:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0d1117;
    color: #e6edf3;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0d1117; color: #e6edf3; }
button, input { font: inherit; }
a { color: #79c0ff; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.topbar {
    min-height: 64px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #30363d; background: #161b22; position: sticky; top: 0; z-index: 10;
}
.topbar-user { display: flex; gap: 14px; align-items: center; }
.topbar-user form { margin: 0; }
.env-badge, .security-chip, .queue-label {
    display: inline-flex; align-items: center; border: 1px solid #30363d; background: #21262d;
    color: #b1bac4; border-radius: 999px; padding: 5px 9px; font-size: 12px; margin-left: 10px;
}
.env-badge { color: #d2a8ff; border-color: #6e40c9; background: #1f1633; }

.container { max-width: 1320px; margin: 0 auto; padding: 36px 28px 64px; }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
h2 { margin-bottom: 0; }
.eyebrow { margin: 0 0 8px; color: #8b949e; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.muted { color: #8b949e; }

.deploy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.deploy-group, .activity-card {
    background: #161b22; border: 1px solid #30363d; border-radius: 14px; padding: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-title .queue-label { margin-left: 0; }
.button-grid { display: grid; gap: 12px; }
.deploy-button {
    appearance: none; border: 1px solid #3c4654; background: #21262d; color: #e6edf3; text-align: left;
    padding: 17px 18px; border-radius: 10px; cursor: pointer; transition: .15s ease; min-height: 76px;
}
.deploy-button:hover { transform: translateY(-1px); border-color: #58a6ff; background: #242c35; }
.deploy-button span { display: block; color: #8b949e; font-size: 11px; letter-spacing: .12em; font-weight: 800; margin-bottom: 5px; }
.deploy-button strong { font-size: 16px; }

.activity-card { margin-top: 20px; }
.table-wrap { overflow-x: auto; }
.activity-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.activity-table th, .activity-table td { padding: 13px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #30363d; }
.activity-table th { color: #8b949e; font-size: 12px; font-weight: 700; }
.activity-table td { font-size: 14px; }
.tiny { color: #8b949e; font-size: 11px; margin-top: 5px; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-error { color: #ff7b72; font-size: 11px; margin-top: 5px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .05em; border: 1px solid; }
.status-badge.ok { color: #7ee787; border-color: #238636; background: #102918; }
.status-badge.bad { color: #ff7b72; border-color: #da3633; background: #2d1214; }
.status-badge.wait { color: #d29922; border-color: #9e6a03; background: #2b2111; }
.status-badge.run { color: #79c0ff; border-color: #1f6feb; background: #10243e; }
.empty-state { color: #8b949e; padding: 20px 0; }

.btn { border: 1px solid transparent; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-weight: 700; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primary { background: #238636; color: white; border-color: #2ea043; }
.btn-primary:hover { background: #2ea043; }
.btn-warning { background: #9e6a03; color: white; border-color: #d29922; }
.btn-warning:hover { background: #bb8009; }
.btn-ghost { background: #21262d; color: #c9d1d9; border-color: #30363d; }
.btn-small { padding: 7px 10px; font-size: 12px; }
.btn-full { width: 100%; margin-top: 18px; }

label { display: block; color: #c9d1d9; font-size: 13px; font-weight: 700; margin: 18px 0 7px; }
input[type="text"], input[type="password"] {
    width: 100%; border: 1px solid #30363d; border-radius: 8px; background: #0d1117; color: #e6edf3;
    padding: 12px 13px; outline: none;
}
input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,.12); }

.login-page { display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 420px); border: 1px solid #30363d; background: #161b22; border-radius: 14px; padding: 30px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; background: #238636; border-radius: 11px; font-weight: 900; margin-bottom: 20px; }
.alert { border: 1px solid; border-radius: 8px; padding: 10px 12px; margin-top: 14px; font-size: 13px; }
.alert-error { background: #2d1214; border-color: #da3633; color: #ffb3ad; }

.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 100; display: grid; place-items: center; padding: 22px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 650px); background: #161b22; border: 1px solid #3c4654; border-radius: 14px; padding: 26px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.modal-close { position: absolute; right: 14px; top: 10px; background: transparent; color: #8b949e; border: 0; cursor: pointer; font-size: 28px; }
.modal-target { color: #79c0ff; font-weight: 800; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal-actions.single { justify-content: center; }
.confirm-summary { margin-top: 18px; border: 1px solid #30363d; border-radius: 10px; overflow: hidden; }
.confirm-row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 10px 13px; border-bottom: 1px solid #30363d; }
.confirm-row:last-child { border-bottom: 0; }
.confirm-row span { color: #8b949e; }
.confirm-summary hr { margin: 0; border: 0; border-top: 3px solid #30363d; }
.done-icon { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: #102918; color: #7ee787; font-size: 30px; }
#step-done { text-align: center; }

@media (max-width: 820px) {
    .deploy-grid { grid-template-columns: 1fr; }
    .hero { align-items: flex-start; flex-direction: column; }
    .security-chip { margin-left: 0; }
    .topbar { padding: 0 16px; }
    .container { padding: 24px 16px 48px; }
    .confirm-row { grid-template-columns: 1fr; gap: 3px; }
}