:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    color: #e5e7eb;
    background: #0b1020;
}
* { box-sizing: border-box; }
body { margin: 0; background: #0b1020; color: #e5e7eb; }
a { color: #93c5fd; text-decoration: none; }
a:hover { color: #bfdbfe; }
.shell { max-width: 1180px; margin: 0 auto; padding: 0 22px 40px; }
.shell.wide { max-width: 1720px; }
.topbar { background: #111827; border-bottom: 1px solid #263244; margin-bottom: 28px; }
.topbar-inner { max-width: 1180px; margin: 0 auto; min-height: 64px; padding: 0 22px; display: flex; align-items: center; gap: 24px; }
.brand { color: white; font-weight: 750; letter-spacing: .01em; }
.nav { display: flex; gap: 18px; align-items: center; flex: 1; }
.nav > a { color: #94a3b8; border-radius: 7px; padding: 7px 9px; }
.nav > a:hover { color: #e2e8f0; background: #1e293b; }
.nav > a.active { color: white; background: #1e3a5f; }
.nav form { margin-left: auto; }
h1 { font-size: 1.75rem; margin: 0 0 20px; }
h2 { font-size: 1.15rem; margin: 0 0 14px; }
h3 { font-size: 1rem; margin: 0 0 10px; }
.muted { color: #94a3b8; }
.warning { border: 1px solid #854d0e; background: #422006; color: #fde68a; padding: 12px 14px; border-radius: 8px; margin-bottom: 20px; }
.notice { border: 1px solid #166534; background: #052e16; color: #bbf7d0; padding: 12px 14px; border-radius: 8px; margin-bottom: 20px; }
.error { border: 1px solid #991b1b; background: #450a0a; color: #fecaca; padding: 12px 14px; border-radius: 8px; margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { background: #111827; border: 1px solid #263244; border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.site-status-bar h1 { margin-bottom: 0; }
.feature-console { padding: 0; overflow: hidden; }
.feature-nav { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 18px; border-bottom: 1px solid #263244; background: #0f172a; }
.feature-nav .button[aria-current="page"] { border-color: #3b82f6; background: #2563eb; }
.feature-nav-beta { display: flex; gap: 7px; margin-left: auto; padding-left: 14px; border-left: 1px solid #263244; }
.feature-nav-beta .button { border-color: #263244; background: #0b1220; color: #64748b; }
.feature-nav-beta .button:hover { color: #94a3b8; }
.feature-nav-beta .button[aria-current="page"] { border-color: #475569; background: #1e293b; color: #cbd5e1; }
.feature-nav-beta small { margin-left: 4px; color: #475569; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.feature-content { padding: 20px 18px; }
.site-quick-actions { display: flex; align-items: center; gap: 14px; border: 1px solid #334155; border-radius: 10px; padding: 12px 14px; background: linear-gradient(120deg, #0b1a33, #0b1220); }
.site-quick-actions h2 { flex: 0 0 auto; margin: 0; color: white; font-size: .9rem; }
.site-essential-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.site-essential-actions form { margin: 0; }
.feature-form { max-width: 620px; }
.feature-form + .feature-form { border-top: 1px solid #263244; margin-top: 20px; padding-top: 20px; }
.domain-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid #263244; }
.domain-row code { flex: 1; overflow-wrap: anywhere; }
.domain-row button { padding: 6px 10px; }
.feature-details { margin-bottom: 22px; }
.laravel-panel-heading { align-items: flex-start; }
.laravel-panel-heading h2 { margin-bottom: 10px; }
.laravel-details { padding: 16px; border: 1px solid #263244; border-radius: 9px; background: #0b1220; }
.laravel-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.laravel-action { display: flex; flex-direction: column; align-items: flex-start; min-height: 190px; padding: 16px; border: 1px solid #334155; border-radius: 9px; background: #0f172a; }
.laravel-action p { flex: 1; margin: 0 0 16px; }
.laravel-action form { margin: 0; }
.git-guide { border: 1px solid #1d4ed8; border-radius: 10px; padding: 13px 15px; margin: 0 0 18px; background: #0b1a33; }
.git-guide summary { cursor: pointer; color: #bfdbfe; font-weight: 750; }
.git-guide[open] summary { margin-bottom: 12px; }
.git-guide ol { display: grid; gap: 8px; padding-left: 22px; margin: 0; color: #cbd5e1; line-height: 1.5; }
.git-guide p { padding-top: 11px; margin: 11px 0 0; border-top: 1px solid #1e3a5f; color: #93c5fd; }
.git-heading { display: flex; align-items: center; gap: 7px; }
.git-heading h3 { margin: 0; }
.git-help { position: relative; display: inline-flex; flex: 0 0 auto; z-index: 20; }
.git-help[open] { z-index: 80; }
.git-help summary { display: inline-grid; width: 21px; height: 21px; place-items: center; border: 1px solid #475569; border-radius: 50%; background: #172033; color: #bfdbfe; cursor: help; font-size: .76rem; font-weight: 850; list-style: none; user-select: none; }
.git-help summary::-webkit-details-marker { display: none; }
.git-help summary:hover, .git-help summary:focus-visible { border-color: #60a5fa; background: #1e3a5f; color: white; outline: none; }
.git-help-card { position: absolute; top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 48px)); border: 1px solid #475569; border-radius: 9px; padding: 11px 12px; background: #020617; box-shadow: 0 16px 40px rgb(0 0 0 / .55); color: #cbd5e1; font-size: .82rem; font-weight: 450; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: normal; }
.git-help:not([open]) > .git-help-card { display: none; }
.git-help:hover > .git-help-card, .git-help:focus-within > .git-help-card { display: block; }
.git-help-right .git-help-card { right: 0; left: auto; }
.git-action-with-help { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.git-action-list { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.git-action-list .git-action-with-help { width: 100%; }
.git-action-list .button, .git-action-list button { flex: 1; text-align: center; }
.git-glossary { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 14px; }
.git-glossary span { border: 1px solid #334155; border-radius: 999px; padding: 5px 9px; background: #0b1220; color: #94a3b8; font-size: .76rem; }
.git-glossary strong { color: #e2e8f0; }
.git-workspace-table { min-width: 1480px; }
.git-workspace-table td:last-child { width: 390px; }
.git-workspace-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.git-workspace-actions .git-action-with-help { justify-content: flex-end; }
.git-workspace-actions button { flex: 1; min-height: 34px; white-space: normal; }
.git-dirty-label { display: inline-block; border: 1px solid #a16207; border-radius: 999px; padding: 3px 7px; margin-left: 4px; background: #422006; color: #fde68a; font-size: .72rem; }
.git-deployment-table { min-width: 980px; }
.git-deployment-table td:last-child { min-width: 245px; }
.git-live-label { display: inline-block; border: 1px solid #16a34a; border-radius: 999px; padding: 5px 9px; background: #052e16; color: #bbf7d0; font-size: .78rem; font-weight: 750; }
.gitea-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid #263b53; border-radius: 13px; padding: 20px 22px; margin-bottom: 14px; background: linear-gradient(135deg, #111d31, #091220); }
.gitea-hero h2 { margin: 5px 0 6px; color: white; font-size: 1.5rem; }
.gitea-hero p { margin: 0; }
.gitea-hero-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.gitea-not-connected { border: 1px solid #475569; border-radius: 999px; padding: 6px 10px; color: #94a3b8; font-size: .76rem; font-weight: 750; }
.gitea-setup-steps { display: grid; gap: 7px; padding-left: 22px; margin: 14px 0 18px; color: #cbd5e1; }
.gitea-repository-bar { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(120px, .65fr) minmax(140px, .75fr) minmax(150px, .85fr); gap: 1px; align-items: stretch; overflow: hidden; border: 1px solid #263244; border-radius: 10px; margin-bottom: 14px; background: #263244; }
.gitea-repository-bar > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 11px 13px; background: #0b1220; }
.gitea-repository-bar small { color: #64748b; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gitea-repository-bar strong { overflow: hidden; color: #e2e8f0; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.gitea-repository-bar a { width: fit-content; color: #93c5fd; font-size: .72rem; font-weight: 750; }
.gitea-repository-bar .muted { font-size: .7rem; }
.gitea-repository-bar .gitea-workspace-warning { background: #2b1808; }
.gitea-repository-bar .gitea-workspace-warning strong { color: #fde68a; }
.gitea-repository-bar > button { align-self: center; margin: 8px 10px; }
.certbot-settings { border-top: 1px solid #263244; padding-top: 20px; }
.certbot-actions { border-top: 1px solid #263244; padding-top: 18px; margin: 20px 0 0; }
.metric { font-size: 2rem; font-weight: 750; color: white; }
.dashboard-heading { align-items: flex-start; }
.dashboard-heading h1 { margin-bottom: 5px; }
.dashboard-heading p { margin: 0; }
.health-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.health-stat { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 82px; border: 1px solid #334155; border-radius: 10px; padding: 15px 17px; background: #111827; }
.health-stat span { color: #cbd5e1; font-weight: 650; }
.health-stat strong { color: white; font-size: 1.8rem; line-height: 1; }
.health-stat.healthy { border-color: #166534; background: linear-gradient(135deg, #052e16, #111827 70%); }
.health-stat.healthy strong { color: #86efac; }
.health-stat.unhealthy { border-color: #991b1b; background: linear-gradient(135deg, #450a0a, #111827 70%); }
.health-stat.unhealthy strong { color: #fca5a5; }
.health-stat.unchecked strong { color: #cbd5e1; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }
.button, button { appearance: none; border: 1px solid #3b82f6; background: #2563eb; color: white; border-radius: 7px; padding: 9px 13px; font-weight: 650; cursor: pointer; }
.button.secondary, button.secondary { border-color: #475569; background: #1e293b; }
.button.danger, button.danger { border-color: #dc2626; background: #991b1b; }
.button:disabled, button:disabled { opacity: .5; cursor: not-allowed; }

.dev-page-heading { align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.dev-page-heading > div { max-width: 860px; }
.dev-page-heading h1 { margin: 6px 0; }
.dev-page-heading p { margin: 0; line-height: 1.5; }
.dev-section { padding: 0; overflow: hidden; }
.dev-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid #263244; background: #0f172a; }
.dev-section-heading h2, .dev-section-heading p { margin: 0; }
.dev-section-heading p { margin-top: 5px; }
.dev-change-grid, .dev-child-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; padding: 16px; }
.dev-change-card, .dev-child-card { display: flex; min-width: 0; flex-direction: column; gap: 11px; border: 1px solid #334155; border-radius: 10px; padding: 16px; background: #0b1220; color: #e2e8f0; }
.dev-change-card:hover { border-color: #3b82f6; background: #0d1a31; color: white; }
.dev-change-card-top, .dev-child-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dev-change-card-top strong { font-size: 1rem; }
.dev-change-meta { color: #64748b; font-size: .78rem; }
.dev-change-error { display: block; border-left: 3px solid #f59e0b; padding-left: 9px; color: #fde68a; font-size: .82rem; line-height: 1.4; }
.dev-empty { display: flex; grid-column: 1 / -1; min-height: 120px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border: 1px dashed #334155; border-radius: 10px; color: #94a3b8; text-align: center; }
.dev-empty strong { color: #e2e8f0; }
.dev-sites-table { width: 100%; min-width: 760px; }
.dev-table-actions { text-align: right; }
.dev-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #475569; border-radius: 13px; padding: 0; background: #111827; color: #e5e7eb; box-shadow: 0 28px 80px rgb(0 0 0 / .65); }
.dev-dialog::backdrop { background: rgb(2 6 23 / .78); backdrop-filter: blur(3px); }
.dev-dialog-card { padding: 20px; }
.dev-dialog-card .modal-header { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #263244; }
.dev-dialog-card .modal-header h2, .dev-dialog-card .modal-header p { margin: 0; }
.dev-dialog-card .modal-header p { margin-top: 5px; }
.dev-site-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; border: 1px solid #334155; border-radius: 9px; padding: 14px; margin: 0 0 18px; }
.dev-site-picker legend { padding: 0 7px; color: #cbd5e1; font-weight: 700; }
.dev-site-option { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #334155; border-radius: 8px; padding: 11px; margin: 0; background: #0b1220; cursor: pointer; }
.dev-site-option:has(input:checked) { border-color: #3b82f6; background: #0b1a33; }
.dev-site-option.disabled { opacity: .55; cursor: not-allowed; }
.dev-site-option input { width: auto; margin-top: 3px; }
.dev-site-option span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.dev-site-option small { color: #94a3b8; font-weight: 450; }
.dev-site-picker-searchable { display: block; padding: 12px; }
.dev-site-search-label { margin: 0 0 6px; color: #94a3b8; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dev-site-search { height: 38px; margin: 0 0 9px; padding: 8px 10px; background: #0a1423; }
.dev-site-selection-list { display: grid; max-height: 252px; gap: 6px; overflow-y: auto; padding: 1px 5px 1px 1px; scrollbar-color: #475569 #101827; }
.dev-site-selection-list .dev-site-option { align-items: center; min-height: 42px; padding: 8px 10px; }
.dev-site-selection-list .dev-site-option input { margin-top: 0; }
.dev-site-selection-list .dev-site-option[hidden] { display: none !important; }
.dev-site-search-empty { margin: 0; padding: 24px 12px; color: #94a3b8; font-size: .8rem; text-align: center; }
.dev-site-search-empty[hidden] { display: none; }
.dev-coordinator-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-color: #1d4ed8; background: linear-gradient(135deg, #101d35, #0b1220 72%); }
.dev-coordinator-hero h2 { margin: 5px 0 8px; font-size: 1.45rem; }
.dev-coordinator-hero p { max-width: 800px; margin: 7px 0 0; line-height: 1.5; }
.dev-coordinator-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.dev-coordinator-actions form { margin: 0; }
.dev-release-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 14px; }
.dev-release-summary > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #334155; border-radius: 10px; padding: 12px 14px; background: #0b1220; }
.dev-release-summary small { color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.dev-release-summary strong { color: #e2e8f0; font-size: 1rem; }
.dev-release-summary .complete { border-color: #166534; background: #071d13; }
.dev-release-summary .complete strong { color: #86efac; }
.dev-release-summary .working { border-color: #1d4ed8; background: #0b1a33; }
.dev-release-summary .working strong { color: #93c5fd; }
.dev-child-card { gap: 15px; }
.dev-child-card.is-staged { border-color: #166534; box-shadow: inset 0 1px 0 rgb(134 239 172 / .08); }
.dev-child-card.is-live { border-color: #15803d; background: #07170f; }
.dev-child-card.is-needs-attention { border-color: #dc2626; background: linear-gradient(145deg, #1b1015, #0b1220); box-shadow: inset 3px 0 #ef4444; }
.dev-child-heading h3 { margin: 0 0 4px; }
.dev-child-facts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(90px, .5fr); gap: 10px; margin: 0; }
.dev-child-facts div { min-width: 0; }
.dev-child-facts dt { color: #64748b; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dev-child-facts dd { overflow: hidden; margin: 4px 0 0; color: #cbd5e1; text-overflow: ellipsis; }
.dev-child-facts code { font-size: .74rem; }
.dev-child-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.dev-child-review-actions form { margin: 0; }
.dev-child-review-actions .button, .dev-child-review-actions button { min-height: 34px; padding: 7px 10px; font-size: .76rem; }
.dev-child-actions { margin: auto 0 0; }
.dev-stage-confirmed { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; border: 1px solid #166534; border-radius: 7px; padding: 7px 10px; background: #052e16; color: #bbf7d0; font-size: .78rem; font-weight: 750; }
.dev-stage-confirmed > span { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #16a34a; color: white; font-size: .68rem; }
.dev-multi-release { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-color: #475569; background: linear-gradient(135deg, #111827, #0b1220); }
.dev-multi-release.is-ready { border-color: #16a34a; background: linear-gradient(135deg, #052e16, #0b1220 72%); }
.dev-multi-release h2, .dev-multi-release p { margin: 0; }
.dev-multi-release h2 { margin-bottom: 5px; }
.dev-multi-release-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dev-form-progress { position: fixed; right: 24px; bottom: 24px; z-index: 250; display: flex; width: min(470px, calc(100vw - 48px)); align-items: flex-start; gap: 12px; border: 1px solid rgb(96 165 250 / .72); border-radius: 14px; padding: 15px 17px; background: linear-gradient(145deg, rgb(17 43 78 / .99), rgb(10 28 55 / .99)); color: #dbeafe; box-shadow: 0 18px 48px rgb(0 0 0 / .5); }
.dev-form-progress[hidden] { display: none; }
.dev-form-progress > span:last-child { display: grid; min-width: 0; gap: 3px; }
.dev-form-progress strong { font-size: .84rem; }
.dev-form-progress small { color: #93c5fd; line-height: 1.45; }
[data-dev-processing-form].is-processing { cursor: wait; }
[data-dev-processing-form].is-processing button { pointer-events: none; }
.dev-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-color: #7f1d1d; }
.dev-danger-zone h2, .dev-danger-zone p { margin: 0; }
.dev-danger-zone p { margin-top: 5px; }
.badge.needs_attention { border-color: #854d0e; background: #422006; color: #fde68a; }
.badge.starting { border-color: #1d4ed8; background: #172554; color: #bfdbfe; }
.badge.discarded { border-color: #475569; background: #1e293b; color: #cbd5e1; }
.badge.completed { border-color: #166534; background: #052e16; color: #bbf7d0; }
.dev-page-heading > .badge, .dev-change-card .badge, .dev-child-card .badge { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; box-sizing: border-box; border-width: 1px; border-style: solid; border-radius: 999px; padding: 5px 10px; font-size: .67rem; font-weight: 850; letter-spacing: .055em; line-height: 1; text-transform: uppercase; box-shadow: 0 5px 14px rgb(0 0 0 / .18); }
.dev-page-heading > .badge::before, .dev-change-card .badge::before, .dev-child-card .badge::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; box-shadow: 0 0 8px currentColor; }
.dev-page-heading > .badge.needs_attention, .dev-change-card .badge.needs_attention, .dev-child-card .badge.needs_attention { border-color: rgb(248 113 113 / .72); background: rgb(127 29 29 / .42); color: #fecaca; }
.dev-page-heading > .badge.starting, .dev-change-card .badge.starting, .dev-child-card .badge.starting { border-color: rgb(96 165 250 / .7); background: rgb(30 64 175 / .34); color: #bfdbfe; }
.dev-page-heading > .badge.active, .dev-change-card .badge.active, .dev-child-card .badge.active, .dev-page-heading > .badge.completed, .dev-change-card .badge.completed, .dev-child-card .badge.completed { border-color: rgb(74 222 128 / .62); background: rgb(20 83 45 / .38); color: #bbf7d0; }
.dev-page-heading > .badge.pending, .dev-change-card .badge.pending, .dev-child-card .badge.pending, .dev-page-heading > .badge.discarded, .dev-change-card .badge.discarded, .dev-child-card .badge.discarded { border-color: rgb(148 163 184 / .44); background: rgb(51 65 85 / .48); color: #e2e8f0; }
.dev-child-card .badge.starting::before { animation: dev-badge-pulse 1.35s ease-in-out infinite; }
.dev-remove-site-button { margin-left: auto; border-color: #7f1d1d; color: #fecaca; }
.dev-remove-site-button:hover { border-color: #ef4444; background: rgb(127 29 29 / .34); color: #fff; }
@keyframes dev-badge-pulse { 50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .dev-child-card .badge.starting::before { animation: none; } }
@media (max-width: 720px) {
    .dev-page-heading, .dev-coordinator-hero, .dev-multi-release, .dev-danger-zone { align-items: stretch; flex-direction: column; }
    .dev-coordinator-actions { align-items: stretch; flex-direction: column; }
    .dev-multi-release-actions { align-items: stretch; flex-direction: column; }
    .dev-release-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dev-site-picker { grid-template-columns: 1fr; }
    .dev-form-progress { right: 14px; bottom: 14px; width: calc(100vw - 28px); }
}
form.inline { display: inline; }
label { display: block; color: #cbd5e1; font-weight: 650; margin: 0 0 7px; }
input, select, textarea { width: 100%; border: 1px solid #475569; border-radius: 7px; padding: 10px 11px; background: #0f172a; color: white; }
textarea { min-height: 95px; resize: vertical; }
.field { margin-bottom: 17px; }
.setup-intro { max-width: 760px; margin: -10px 0 20px; }
.setup-form { width: 100%; max-width: none; }
.form-section { border-bottom: 1px solid #263244; padding: 4px 0 8px; margin-bottom: 24px; }
.form-section:last-of-type { border-bottom: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.section-copy { margin: -6px 0 17px; }
.setup-json-section { border: 1px solid #334155; border-radius: 10px; background: #0b1220; padding: 18px; }
.setup-json-heading { align-items: flex-start; margin-bottom: 12px; }
.setup-json-heading h2 { margin-bottom: 10px; }
.setup-json-heading .section-copy { max-width: 520px; margin-bottom: 0; }
.setup-json-output { min-height: 360px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.45; white-space: pre; tab-size: 2; }
.copy-status { min-width: 4.5rem; color: #86efac; font-size: .86rem; align-self: center; }
.identity-preview { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 20px; }
.identity-preview span { border: 1px solid #334155; background: #0f172a; border-radius: 7px; padding: 7px 9px; color: #94a3b8; font-size: .82rem; }
.identity-preview code { color: #e2e8f0; }
.advanced-settings { border: 1px solid #334155; border-radius: 8px; padding: 11px 13px 0; margin-bottom: 17px; }
.advanced-settings summary { cursor: pointer; color: #cbd5e1; font-weight: 650; margin-bottom: 11px; }
.confirmation { border: 1px solid #475569; border-radius: 8px; padding: 12px; }
.help { display: block; color: #94a3b8; font-size: .86rem; margin-top: 5px; }
.check { display: flex; gap: 9px; align-items: flex-start; }
.check input { width: auto; margin-top: 4px; }
.field-error { display: block; color: #fca5a5; font-size: .86rem; margin-top: 5px; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 16px 0; }
.permission-option { display: flex; align-items: center; gap: 9px; border: 1px solid #334155; border-radius: 7px; padding: 9px 11px; margin: 0; font-size: .9rem; }
.permission-option input { width: auto; }
.database-permissions { border-top: 1px solid #263244; padding-top: 20px; }
.database-actions { margin: 18px 0 0; }
.mail-section { border-top: 1px solid #263244; padding-top: 20px; margin-top: 22px; }
.mail-settings-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(360px, 1.3fr); gap: 22px; }
.mail-settings-grid dl { grid-template-columns: minmax(120px, 160px) 1fr; }
.mail-settings-grid code { overflow-wrap: anywhere; }
.mail-create-form { display: grid; grid-template-columns: minmax(230px, 1.35fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(105px, .5fr) auto; gap: 10px; align-items: end; }
.mail-forward-form { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(230px, 1.2fr) auto; gap: 10px; align-items: end; }
.mail-create-form .field, .mail-forward-form .field { min-width: 0; }
.mail-create-form button, .mail-forward-form button { white-space: nowrap; }
.mail-submit { padding-bottom: 1px; }
.address-input { display: flex; align-items: stretch; }
.address-input input { min-width: 70px; border-radius: 7px 0 0 7px; }
.address-input span { display: flex; align-items: center; flex: 0 1 auto; max-width: 62%; border: 1px solid #475569; border-left: 0; border-radius: 0 7px 7px 0; padding: 0 8px; color: #94a3b8; background: #020617; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-badge { padding: 5px 10px; font-size: .78rem; }
.mail-heading { margin-bottom: 8px; }
.mail-heading h2 { margin-bottom: 7px; }
.mail-heading > .spacer { min-width: 24px; }
.mail-heading .button, .mail-heading button { min-width: 92px; text-align: center; }
.mail-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 26px; }
.mail-action-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; min-height: 104px; border: 1px solid #334155; border-radius: 10px; padding: 17px; background: #0f172a; color: #e2e8f0; text-align: left; }
.mail-action-card:hover { border-color: #3b82f6; background: #172033; color: white; }
.mail-action-card .mail-action-icon { display: grid; grid-row: 1 / 3; width: 42px; height: 42px; place-items: center; border: 1px solid #475569; border-radius: 10px; background: #1e293b; color: #bfdbfe; font-size: 1.05rem; font-weight: 850; }
.mail-action-card strong { align-self: end; font-size: .98rem; }
.mail-action-card small { align-self: start; margin-top: 3px; color: #94a3b8; font-size: .75rem; }
.mail-action-card.dns.ready { border-color: #166534; background: #052e16; }
.mail-action-card.dns.ready .mail-action-icon { border-color: #16a34a; background: #14532d; color: #dcfce7; }
.mail-action-card.dns.changes { border-color: #a16207; background: #422006; }
.mail-action-card.dns.changes .mail-action-icon { border-color: #d97706; background: #78350f; color: #fef3c7; }
.section-heading { align-items: flex-start; margin-bottom: 12px; }
.section-heading h3 { margin-bottom: 6px; }
.section-heading p { margin: 0; }
.mailbox-webmail { border-color: #166534; background: #166534; }
.table-actions { flex-wrap: nowrap; white-space: nowrap; }
.wide-modal { width: min(940px, 100%); }
.dns-check-actions { margin-top: 20px; margin-bottom: 8px; }
.dns-check-actions h3 { margin: 0; }
.raw-config { margin: 8px 0 0; max-height: none; }
.credential-sheet { user-select: all; line-height: 1.6; }
.dns-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; margin: 18px 0; }
.dns-result-grid div { border: 1px solid #334155; border-radius: 7px; padding: 9px; }
.dns-result-grid span, .dns-result-grid strong { display: block; }
.dns-ready { color: #86efac; }
.dns-missing { color: #fca5a5; }
.table-actions { margin: 0; }
.credential { display: inline-block; max-width: 100%; padding: 7px 9px; margin-right: 8px; background: #020617; border: 1px solid #334155; border-radius: 6px; overflow-wrap: anywhere; }
button.compact { padding: 6px 9px; font-size: .82rem; }
.button.compact { padding: 6px 9px; font-size: .82rem; }
.empty-state { border: 1px dashed #475569; border-radius: 8px; padding: 18px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgb(2 6 23 / .78); }
.modal { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #111827; border: 1px solid #475569; border-radius: 12px; padding: 20px; box-shadow: 0 24px 80px rgb(0 0 0 / .55); }
.modal-header { margin-bottom: 12px; }
.modal-header h2 { margin: 0; }
.modal-actions { margin: 18px 0 0; }
.development-env-modal { width: min(780px, 100%); }
.development-env-modal textarea { min-height: 300px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .88rem; line-height: 1.55; tab-size: 4; }
.danger-modal { border-color: #991b1b; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid #263244; padding: 11px 8px; vertical-align: top; }
th { color: #94a3b8; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.badge { display: inline-block; border: 1px solid #475569; background: #1e293b; border-radius: 999px; padding: 3px 8px; font-size: .78rem; }
.badge.active, .badge.succeeded { border-color: #166534; background: #052e16; color: #bbf7d0; }
.badge.healthy, .badge.online { border-color: #16a34a; background: #052e16; color: #bbf7d0; }
.badge.maintenance, .badge.http-maintenance { border-color: #d97706; background: #451a03; color: #fde68a; }
.badge.unhealthy, .badge.inactive { border-color: #dc2626; background: #450a0a; color: #fecaca; }
.badge.http-status { padding: 5px 10px; font-size: .82rem; font-weight: 750; }
.badge.http-success { border-color: #16a34a; background: #052e16; color: #bbf7d0; }
.badge.http-error { border-color: #dc2626; background: #450a0a; color: #fecaca; }
.badge.unknown, .badge.unchecked, .badge.not_configured, .badge.disabled { border-color: #475569; background: #1e293b; color: #cbd5e1; }
.badge.activating, .badge.deactivating { border-color: #854d0e; background: #422006; color: #fde68a; }
.badge.failed { border-color: #991b1b; background: #450a0a; color: #fecaca; }
.badge.delete_failed { border-color: #991b1b; background: #450a0a; color: #fecaca; }
.badge.pending, .badge.running, .badge.provisioning { border-color: #854d0e; background: #422006; color: #fde68a; }
.badge.available { border-color: #166534; background: #052e16; color: #bbf7d0; }
.badge.deleting { border-color: #854d0e; background: #422006; color: #fde68a; }
.backup-create-form { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 20px 0; padding: 14px; border: 1px solid #263244; border-radius: 10px; background: #0b1220; }
.backup-create-form label { display: inline-flex; align-items: center; gap: 8px; }
.backup-create-form input { width: auto; }
.backup-create-form button { margin-left: auto; }
.backup-summary { display: grid; text-align: right; }
.table-scroll { overflow-x: auto; }
.health-card { padding: 0; overflow: hidden; border-color: #334155; }
.health-card-heading { margin: 0; padding: 18px 20px; border-bottom: 1px solid #263244; background: #0f172a; }
.health-copy { margin: -7px 0 0; }
.health-table { min-width: 960px; }
.health-table th { background: #0b1220; }
.health-table th:first-child, .health-table td:first-child { padding-left: 18px; }
.health-table th:last-child, .health-table td:last-child { padding-right: 18px; }
.health-table tbody tr:last-child td { border-bottom: 0; }
.health-row td:first-child { border-left: 3px solid #475569; }
.health-row-healthy td:first-child { border-left-color: #16a34a; }
.health-row-unhealthy td:first-child { border-left-color: #dc2626; }
.health-table td:first-child { min-width: 190px; }
.health-table td:nth-child(2) { min-width: 180px; }
.health-table td:nth-child(3) { min-width: 220px; }
.response-time { margin-left: 7px; font-size: .82rem; }
.health-route-detail { max-width: 300px; margin-top: 7px; color: #cbd5e1; font-size: .8rem; line-height: 1.35; }
.health-route-detail code { color: #e2e8f0; }
.health-error { max-width: 280px; margin-top: 6px; color: #fca5a5; font-size: .84rem; }
.health-open-link { display: inline-block; margin-top: 6px; font-size: .84rem; }
.service-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.service-note { max-width: 260px; margin-top: 8px; font-size: .78rem; }
.health-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.health-controls form { margin: 0; }
.dashboard-secondary-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.overview-grid div { display: flex; flex-direction: column; gap: 4px; border: 1px solid #263244; border-radius: 8px; padding: 12px; background: #0b1220; }
.overview-grid strong { color: white; font-size: 1.4rem; }
.operations-dashboard { --ops-green: #22c55e; --ops-red: #ef4444; --ops-blue: #38bdf8; }
.ops-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, .75fr); gap: 18px; margin-bottom: 18px; }
.ops-hero-main, .ops-kpis, .ops-control-deck, .site-tile { border: 1px solid #263b53; background: linear-gradient(145deg, rgb(15 23 42 / .98), rgb(8 15 29 / .98)); box-shadow: 0 18px 60px rgb(0 0 0 / .2); }
.ops-hero-main { position: relative; min-height: 250px; overflow: hidden; border-radius: 16px; padding: 28px 30px; }
.ops-hero-main::after { position: absolute; right: -100px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgb(34 197 94 / .16), transparent 66%); content: ''; pointer-events: none; }
.ops-eyebrow, .ops-section-label { color: #7dd3fc; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ops-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ops-green); box-shadow: 0 0 0 5px rgb(34 197 94 / .12), 0 0 22px rgb(34 197 94 / .65); }
.live-dot.attention { background: var(--ops-red); box-shadow: 0 0 0 5px rgb(239 68 68 / .12), 0 0 22px rgb(239 68 68 / .65); }
.ops-title-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.ops-title-row h1 { margin: 0 0 8px; color: white; font-size: clamp(2rem, 4vw, 3.65rem); line-height: .98; letter-spacing: -.045em; }
.ops-title-row p { max-width: 780px; margin: 0; color: #94a3b8; font-size: 1rem; }
.ops-score { display: grid; flex: 0 0 auto; min-width: 145px; place-items: center; border: 1px solid #166534; border-radius: 14px; padding: 17px 20px; background: #052e16; }
.ops-score strong { color: #86efac; font-size: 3rem; line-height: 1; }
.ops-score span { margin-top: 5px; color: #bbf7d0; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.ops-score.attention { border-color: #991b1b; background: #450a0a; }
.ops-score.attention strong, .ops-score.attention span { color: #fecaca; }
.ops-meta { position: absolute; right: 30px; bottom: 24px; left: 30px; z-index: 1; display: flex; align-items: center; gap: 20px; color: #64748b; font-size: .78rem; }
.ops-meta strong { color: #cbd5e1; }
.refresh-track { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; overflow: hidden; background: #172033; }
.refresh-track span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #0ea5e9, #22c55e); animation: dashboard-refresh 60s linear infinite; }
@keyframes dashboard-refresh { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ops-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border-radius: 16px; background: #263b53; }
.ops-kpi { display: flex; flex-direction: column; justify-content: center; min-height: 124px; padding: 24px; background: #0d1729; }
.ops-kpi span { color: #94a3b8; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ops-kpi strong { margin-top: 8px; color: white; font-size: 2.8rem; line-height: 1; }
.ops-kpi.healthy strong { color: #86efac; }
.ops-kpi.unhealthy strong { color: #fca5a5; }
.ops-control-deck { display: grid; grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr); gap: 26px; align-items: center; border-radius: 14px; padding: 20px 22px; margin-bottom: 24px; }
.ops-control-deck h2, .ops-section-heading h2, .compact-heading h2 { margin: 3px 0 0; color: white; font-size: 1.2rem; }
.ops-control-deck p { max-width: 520px; margin: 6px 0 0; color: #64748b; font-size: .82rem; }
.ops-global-actions { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: 10px; }
.ops-global-actions form { margin: 0; }
.ops-action { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 72px; border-color: #334155; background: #172033; padding: 13px 14px; }
.ops-action.primary { border-color: #0369a1; background: #0c4a6e; }
.ops-action.danger { border-color: #7f1d1d; background: #3f1217; }
.ops-action span { font-size: .9rem; }
.ops-action small { margin-top: 5px; color: #94a3b8; font-size: .69rem; font-weight: 600; }
.ops-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 13px; }
.site-wall { display: grid; grid-template-columns: repeat(3, minmax(320px, 1fr)); gap: 14px; margin-bottom: 24px; }
.site-tile { position: relative; display: flex; flex-direction: column; min-height: 440px; overflow: hidden; border-radius: 14px; }
.site-tile.maintenance { border-color: rgb(245 158 11 / 62%); box-shadow: 0 10px 35px rgb(120 53 15 / .2); }
.site-tile::before { content: none; }
.site-tile-header { display: flex; justify-content: space-between; gap: 14px; padding: 20px 20px 15px; }
.site-state { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #86efac; font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.site-tile.attention .site-state { color: #fca5a5; }
.state-light { width: 7px; height: 7px; border-radius: 50%; background: var(--ops-green); box-shadow: 0 0 12px rgb(34 197 94 / .75); }
.site-tile.attention .state-light { background: var(--ops-red); box-shadow: 0 0 12px rgb(239 68 68 / .75); }
.site-tile h3 { margin: 0 0 4px; font-size: 1.2rem; }
.site-tile h3 a { color: white; }
.site-domain { color: #64748b; font-size: .78rem; }
.site-endpoint { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 1px; margin: 0 20px 13px; overflow: hidden; border: 1px solid #263244; border-radius: 9px; background: #263244; }
.site-endpoint div { display: flex; flex-direction: column; min-width: 0; padding: 10px; background: #0a1221; }
.site-endpoint span { color: #64748b; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.site-endpoint strong { margin-top: 4px; overflow: hidden; color: #e2e8f0; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.route-note { margin: 0 20px 13px; border-left: 2px solid #0ea5e9; padding-left: 9px; color: #94a3b8; font-size: .74rem; }
.site-services { flex: 1; margin: 0 20px; border-top: 1px solid #263244; padding-top: 13px; }
.site-services-heading { display: flex; justify-content: space-between; margin-bottom: 8px; }
.site-services-heading > span { color: #cbd5e1; font-size: .76rem; font-weight: 750; text-transform: uppercase; }
.site-services-heading small { color: #475569; }
.service-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; border-bottom: 1px solid rgb(38 50 68 / .55); color: #94a3b8; font-size: .78rem; }
.service-row:last-child { border-bottom: 0; }
.service-empty { color: #64748b; font-size: .78rem; }
.site-alert { margin: 12px 20px 0; border: 1px solid #7f1d1d; border-radius: 7px; padding: 8px 10px; background: #3f1217; color: #fecaca; font-size: .74rem; }
.site-alert.maintenance { border-color: #92400e; background: #451a03; color: #fde68a; }
.site-tile-actions { display: flex; align-items: center; gap: 7px; margin-top: 16px; border-top: 1px solid #263244; padding: 13px 20px; background: rgb(2 6 23 / .35); }
.site-tile-actions form { margin: 0; }
.site-tile-actions .spacer { flex: 1; }
.ops-lower-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 18px; }
.compact-heading { align-items: center; margin-bottom: 14px; }
.activity-feed { display: grid; }
.activity-item { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 48px; border-top: 1px solid #263244; }
.activity-time { color: #64748b; font-size: .72rem; }
.activity-item strong, .activity-item div > span { display: block; }
.activity-item strong { color: #e2e8f0; font-size: .8rem; }
.activity-item div > span { margin-top: 2px; color: #64748b; font-size: .7rem; }
.site-activity-card table { margin-bottom: 0; }
.site-activity-more { display: flex; align-items: center; justify-content: center; gap: 12px; border-top: 1px solid #263244; padding: 13px 10px 2px; margin-top: 2px; }
.site-activity-more .muted { font-size: .75rem; }
.infrastructure-card dl { grid-template-columns: 120px 1fr; margin-top: 18px; font-size: .82rem; }
.wallboard-bar { position: relative; display: grid; grid-template-columns: minmax(300px, 1.35fr) minmax(330px, 1fr) auto auto; gap: 22px; align-items: center; min-height: 96px; overflow: hidden; border: 1px solid #263b53; border-radius: 14px; padding: 16px 20px 18px; margin-bottom: 12px; background: linear-gradient(125deg, #0f1b2f, #0a1221 65%, #0d1729); box-shadow: 0 16px 50px rgb(0 0 0 / .2); }
.wallboard-overall { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wallboard-overall h1 { overflow: hidden; margin: 3px 0 0; color: white; font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.status-orb { position: relative; display: inline-grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border: 1px solid #4ade80; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #86efac, #16a34a 46%, #052e16 74%); box-shadow: 0 0 0 5px rgb(34 197 94 / .1), inset 0 0 0 3px rgb(255 255 255 / .08), 0 0 20px rgb(34 197 94 / .38); }
.status-orb::after { color: white; content: '✓'; font-size: .75rem; font-weight: 900; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.status-orb.large { width: 38px; height: 38px; }
.status-orb.large::after { font-size: .95rem; }
.status-orb.attention { border-color: #f87171; background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626 46%, #450a0a 74%); box-shadow: 0 0 0 5px rgb(239 68 68 / .1), inset 0 0 0 3px rgb(255 255 255 / .08), 0 0 20px rgb(239 68 68 / .38); }
.status-orb.attention::after { content: '!'; line-height: 1; transform: translateY(-1px); }
.status-orb.warning { border-color: #f59e0b; background: radial-gradient(circle at 35% 30%, #fde68a, #d97706 46%, #451a03 74%); box-shadow: 0 0 0 5px rgb(245 158 11 / .11), inset 0 0 0 3px rgb(255 255 255 / .08), 0 0 20px rgb(245 158 11 / .42); }
.status-orb.warning::after { content: '!'; line-height: 1; transform: translate(-1px, -3px); }
.site-tile-header .status-orb.warning::after { transform: translate(-3px, -8px); }
.wallboard-stats { display: grid; grid-template-columns: repeat(5, minmax(60px, 1fr)); gap: 5px; }
.wallboard-stats div { display: flex; flex-direction: column; align-items: center; border-left: 1px solid #263244; padding: 2px 10px; }
.wallboard-stats strong { color: #86efac; font-size: 1.45rem; line-height: 1; }
.wallboard-stats .attention strong { color: #fca5a5; }
.wallboard-stats .maintenance strong { color: #fbbf24; }
.wallboard-stats span { margin-top: 5px; color: #64748b; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wallboard-meta { display: flex; flex-direction: column; min-width: 116px; text-align: right; }
.wallboard-meta strong { color: white; font-size: 1.05rem; }
.wallboard-meta span { margin-top: 4px; color: #64748b; font-size: .65rem; white-space: nowrap; }
.wallboard-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.wallboard-actions form { margin: 0; }
.compact-wallboard .refresh-track { height: 2px; }
.compact-wallboard .refresh-track span { animation-duration: 300s; }
.resource-strip { display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(190px, .75fr) minmax(240px, 1fr); gap: 10px; align-items: stretch; margin: 0 0 12px; }
.resource-meter { min-width: 0; border: 1px solid #263244; border-radius: 10px; padding: 10px 12px; background: #0b1424; }
.resource-meter header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.resource-meter header span { color: #64748b; font-size: .59rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.resource-meter header strong { color: #e2e8f0; font-size: .82rem; }
.resource-meter-track { height: 6px; overflow: hidden; border-radius: 999px; margin: 8px 0 6px; background: #1e293b; }
.resource-meter-track span { display: block; width: var(--meter-value, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0284c7, #38bdf8); transition: width .35s ease; }
.resource-meter.cpu .resource-meter-track span { background: linear-gradient(90deg, #16a34a, #4ade80); }
.resource-meter.memory .resource-meter-track span { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.resource-meter.warning .resource-meter-track span { background: linear-gradient(90deg, #d97706, #fbbf24); }
.resource-meter.critical .resource-meter-track span { background: linear-gradient(90deg, #dc2626, #f87171); }
.resource-meter small { display: block; overflow: hidden; color: #64748b; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.compact-warning { padding: 8px 11px; margin-bottom: 10px; font-size: .76rem; }
.site-wall.compact { grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 10px; margin-bottom: 0; }
.site-tile.compact { min-height: 205px; border-radius: 12px; box-shadow: 0 10px 35px rgb(0 0 0 / .16); }
.site-uptime-history { position: relative; flex: 0 0 7px; width: 100%; height: 7px; overflow: hidden; border-radius: 10px 10px 0 0; background: #1e293b; }
.site-uptime-history canvas { display: block; width: 100%; height: 7px; cursor: help; image-rendering: pixelated; }
.site-uptime-history::after { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgb(148 163 184 / .22) calc(100% - 1px)); background-size: calc(100% / 7) 100%; content: ''; }
.uptime-history-tooltip { position: fixed; z-index: 1000; max-width: 250px; border: 1px solid #334155; border-radius: 6px; padding: 5px 7px; background: #020617; box-shadow: 0 8px 24px rgb(0 0 0 / .35); color: #e2e8f0; font-size: .68rem; line-height: 1.35; pointer-events: none; }
.site-tile-header.compact { align-items: center; min-height: 70px; padding: 14px 14px 10px; }
.site-identity { min-width: 0; flex: 1; }
.site-identity h2 { overflow: hidden; margin: 0 0 3px; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.site-identity h2 a { color: white; }
.site-identity > span { display: block; overflow: hidden; color: #64748b; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.site-status-box { display: flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #334155; border-radius: 9px; background: #07101d; box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.site-status-part { display: flex; min-width: 58px; flex-direction: column; gap: 2px; justify-content: center; border-left: 1px solid #334155; padding: 6px 8px; text-align: left; text-decoration: none; }
.site-status-part:first-child { border-left: 0; }
.site-status-part small { color: #64748b; font-size: .5rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.site-status-part strong { color: #cbd5e1; font-size: .65rem; line-height: 1.2; white-space: nowrap; }
.site-status-part.web.healthy { background: rgb(22 101 52 / .16); }
.site-status-part.web.healthy strong, .site-status-part.mail.ready strong { color: #86efac; }
.site-status-part.web.failed { background: rgb(127 29 29 / .2); }
.site-status-part.web.failed strong { color: #fca5a5; }
.site-status-part.web.inactive, .site-status-part.web.unknown { background: rgb(71 85 105 / .16); }
.site-status-part.web.inactive strong, .site-status-part.web.unknown strong { color: #cbd5e1; }
.site-status-part.mail.ready { background: rgb(22 101 52 / .12); }
.site-status-part.mail.pending { background: rgb(146 64 14 / .2); }
.site-status-part.mail.pending strong { color: #fcd34d; }
.site-status-part.mail:hover { background-color: rgb(14 165 233 / .16); }
.site-card-details { display: flex; flex: 1; flex-direction: column; gap: 7px; margin: 0 14px; }
.site-facts { display: grid; grid-template-columns: .75fr .85fr 1.25fr; gap: 1px; overflow: hidden; border: 1px solid #263244; border-radius: 8px; background: #263244; }
.site-facts > span { display: flex; min-width: 0; flex-direction: column; padding: 9px; background: #091220; }
.site-facts small, .site-detail-label { color: #475569; font-size: .55rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.site-facts strong { overflow: hidden; margin-top: 4px; color: #cbd5e1; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.site-facts.compact-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 13px; overflow: visible; border: 0; border-radius: 0; padding: 6px 0 8px; background: none; }
.site-facts.compact-line > span { display: inline-flex; flex: 0 1 auto; flex-direction: row; align-items: center; gap: 5px; border: 0; padding: 0; background: none; }
.site-facts.compact-line small { color: #475569; font-size: .53rem; }
.site-facts.compact-line strong { margin: 0; color: #cbd5e1; font-size: .68rem; }
.site-runtime-status .badge { padding: 2px 6px; font-size: .58rem; }
.site-card-details .site-services { display: flex; flex: 1; flex-direction: column; gap: 7px; border-top: 1px solid #263244; padding-top: 10px; margin: 0; }
.site-card-details .route-note.compact { margin: -3px 0 0; padding-left: 7px; font-size: .64rem; }
.service-matrix { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.service-matrix > div:not(.service-empty) { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid #263244; border-radius: 7px; padding: 7px; background: rgb(2 6 23 / .32); }
.service-matrix > div > span:first-child { overflow: hidden; width: 100%; margin-bottom: 6px; color: #64748b; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.service-matrix .badge { max-width: 100%; overflow: hidden; padding: 2px 6px; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.site-alert.compact { margin: 8px 14px 0; padding: 6px 8px; font-size: .65rem; }
.site-tile-actions.compact { min-height: 43px; margin-top: 7px; padding: 7px 14px; }
.site-tile-actions.compact .button, .site-tile-actions.compact button { padding: 6px 8px; font-size: .7rem; }
body:has(.compact-wallboard) .topbar { margin-bottom: 12px; }
body:has(.compact-wallboard) .shell { padding-bottom: 14px; }
@media (max-width: 1100px) { .resource-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .resource-strip { grid-template-columns: 1fr; } }
dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 18px; margin: 0; }
dt { color: #94a3b8; }
dd { margin: 0; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #020617; border: 1px solid #263244; border-radius: 8px; padding: 14px; color: #cbd5e1; max-height: 620px; overflow: auto; }
.site-logs-panel { display: grid; gap: 18px; }
.site-logs-heading, .site-log-result-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.site-logs-heading h2 { margin: 2px 0 4px; }
.site-logs-heading .eyebrow { margin: 0; color: #60a5fa; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-logs-readonly { padding: 5px 9px; border: 1px solid #334155; border-radius: 999px; background: #111c2e; color: #94a3b8; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.site-logs-controls { display: grid; gap: 16px; padding: 17px; border: 1px solid #263244; border-radius: 12px; background: linear-gradient(145deg, #0f172a, #0b1220); }
.site-log-environments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.site-log-environments legend { margin-bottom: 7px; color: #94a3b8; font-size: .75rem; font-weight: 750; }
.site-log-environment, .site-log-source { position: relative; display: grid; gap: 3px; padding: 12px 13px; border: 1px solid #334155; border-radius: 10px; background: #0b1220; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.site-log-environment:hover, .site-log-source:hover { border-color: #64748b; transform: translateY(-1px); }
.site-log-environment.is-selected, .site-log-source.is-selected { border-color: #3b82f6; background: #10213d; box-shadow: inset 0 0 0 1px #2563eb55; }
.site-log-environment input, .site-log-source input { position: absolute; opacity: 0; pointer-events: none; }
.site-log-environment strong, .site-log-source span { color: #e2e8f0; font-size: .88rem; font-weight: 750; }
.site-log-environment span, .site-log-source small { color: #7f8ea3; font-size: .73rem; }
.site-log-source-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.site-log-session-field { margin: 0; }
.site-log-search-row { display: grid; grid-template-columns: minmax(260px, 1fr) 120px auto; align-items: end; gap: 10px; }
.site-log-search-row .field { margin: 0; }
.site-log-search-row button { min-height: 42px; }
.site-log-feedback { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #7f1d1d; border-radius: 9px; background: #2a1115; }
.site-log-result { overflow: hidden; border: 1px solid #263244; border-radius: 12px; background: #07101f; }
.site-log-result-bar { align-items: center; padding: 12px 14px; border-bottom: 1px solid #263244; background: #0f172a; }
.site-log-result-bar > div { display: grid; gap: 2px; }
.site-log-result-bar .muted { font-size: .74rem; }
.site-log-viewer { min-height: 270px; max-height: 660px; margin: 0; border: 0; border-radius: 0; padding: 16px; color: #d6e1f0; font-size: .76rem; line-height: 1.55; white-space: pre; overflow-wrap: normal; tab-size: 4; }
.site-log-truncated { margin: 0; padding: 8px 14px; border-bottom: 1px solid #263244; background: #172033; color: #fbbf24; font-size: .74rem; }
.site-log-placeholder { display: grid; justify-items: center; gap: 5px; padding: 34px 20px; border: 1px dashed #334155; border-radius: 12px; color: #cbd5e1; text-align: center; }
.site-log-placeholder span { max-width: 650px; color: #718096; font-size: .78rem; }
.site-log-result .empty-state { margin: 14px; }
@media (max-width: 760px) {
    .site-log-environments, .site-log-source-tabs { grid-template-columns: 1fr; }
    .site-log-search-row { grid-template-columns: 1fr; }
    .site-logs-heading, .site-log-result-bar { align-items: stretch; flex-direction: column; }
}
.dns-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #263244; border-radius: 10px; padding: 14px 16px; margin: 18px 0; background: #091220; }
.dns-summary span { color: #94a3b8; font-size: .82rem; font-weight: 700; }
.dns-address { display: inline-block; margin: 2px 8px 2px 0; }
.dns-heading { align-items: flex-start; }
.dns-section { border-top: 1px solid #263244; padding-top: 22px; margin-top: 22px; }
.dns-section:first-of-type { border-top: 0; padding-top: 0; }
.dns-section .section-heading { align-items: flex-start; margin-bottom: 14px; }
.dns-section .section-heading h3 { margin: 0 0 4px; }
.dns-section .section-heading p { margin: 0; }
.dns-value { white-space: pre-wrap; overflow-wrap: anywhere; }
.login { max-width: 430px; margin: 10vh auto; }
@media (min-width: 1450px) { .site-wall { grid-template-columns: repeat(4, minmax(300px, 1fr)); } }
@media (max-width: 1100px) { .ops-hero, .ops-control-deck, .ops-lower-grid { grid-template-columns: 1fr; } .ops-global-actions { grid-template-columns: repeat(2, 1fr); } .site-wall { grid-template-columns: repeat(2, minmax(300px, 1fr)); } }
@media (max-width: 900px) { .mail-create-form, .mail-forward-form, .mail-settings-grid, .mail-action-grid, .dashboard-secondary-grid { grid-template-columns: 1fr; } .health-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .topbar-inner { align-items: flex-start; flex-direction: column; gap: 10px; padding-top: 14px; padding-bottom: 14px; } .nav { width: 100%; gap: 4px; font-size: .84rem; flex-wrap: wrap; } .nav form { margin-left: auto; } .health-summary, .overview-grid, .site-wall { grid-template-columns: 1fr; } .ops-title-row { align-items: flex-start; flex-direction: column; } .ops-score { display: flex; gap: 8px; align-items: baseline; min-width: 0; } .ops-score strong { font-size: 2rem; } .ops-meta { position: static; flex-wrap: wrap; margin-top: 28px; } .ops-hero-main { padding: 22px; } .ops-title-row h1 { font-size: 2.25rem; } .ops-kpis { grid-template-columns: 1fr 1fr; } .ops-kpi { min-height: 95px; padding: 17px; } .ops-kpi strong { font-size: 2rem; } .ops-global-actions { grid-template-columns: 1fr; } .site-endpoint { grid-template-columns: 1fr; } .activity-item { grid-template-columns: 72px minmax(0, 1fr); } .activity-item > .badge { grid-column: 2; justify-self: start; } .field-row { grid-template-columns: 1fr; gap: 0; } table { display: block; overflow-x: auto; } dl { grid-template-columns: 1fr; gap: 4px; } dd { margin-bottom: 10px; } }
@media (max-width: 1350px) { .wallboard-bar { grid-template-columns: minmax(280px, 1fr) minmax(300px, .8fr) auto; } .wallboard-meta { display: none; } .site-wall.compact { grid-template-columns: repeat(3, minmax(270px, 1fr)); } }
@media (max-width: 1000px) { .wallboard-bar { grid-template-columns: 1fr auto; } .wallboard-stats { grid-row: 2; grid-column: 1 / -1; } .wallboard-actions { grid-column: 2; grid-row: 1; } .site-wall.compact { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 680px) { .wallboard-bar { grid-template-columns: 1fr; align-items: start; } .wallboard-actions { grid-row: auto; grid-column: auto; justify-content: flex-start; flex-wrap: wrap; } .wallboard-stats { grid-row: auto; grid-column: auto; width: 100%; } .site-wall.compact { grid-template-columns: 1fr; } .service-matrix { grid-template-columns: repeat(3, minmax(78px, 1fr)); } }
.service-recovery-notice {
    position: sticky;
    top: 0.75rem;
    z-index: 100;
    box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 18%);
}
.session-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.session-section-heading > div:first-child { min-width: 0; }
.session-section-heading > p { margin: 6px 0 0; }
.session-list { display: flex; flex-direction: column; gap: 10px; }
.session-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, auto); column-gap: 18px; row-gap: 11px; align-items: center; border: 1px solid #334155; border-radius: 14px; padding: 15px 16px; background: linear-gradient(145deg, #0c1727, #091220); box-shadow: 0 8px 22px rgb(0 0 0 / .16); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.session-row:hover { border-color: #475569; box-shadow: 0 12px 28px rgb(0 0 0 / .2); transform: translateY(-1px); }
.session-row-content { min-width: 0; }
.session-row-heading { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.session-row h4 { margin: 0 0 3px; font-size: 1rem; }
.session-title-status { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.session-title-status h4 { margin: 0; }
.session-row-heading p { margin: 0; font-size: .75rem; }
.session-description { max-width: 720px; margin: 5px 0 0; overflow: hidden; color: #dbeafe; font-size: .84rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.session-result-line { margin-top: 6px; color: #94a3b8; font-size: .76rem; }
.session-result-line .badge { margin-left: 4px; }
.session-row-actions { display: flex; align-items: stretch; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 820px; }
.session-row-actions .git-action-with-help { flex: 0 0 auto; }
.session-action-group { position: relative; display: grid; align-content: start; align-items: stretch; min-height: 50px; overflow: hidden; border: 1px solid #334155; border-radius: 11px; padding: 0; background: rgb(15 23 42 / .72); box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 5px 15px rgb(0 0 0 / .12); }
.session-preview-group { border-color: rgb(59 130 246 / .42); }
.session-management-group { border-color: rgb(34 197 94 / .34); }
.session-action-group-label { position: static; display: block; width: auto; max-width: none; border-bottom: 1px solid rgb(148 163 184 / .13); padding: 5px 9px 4px; background: rgb(15 23 42 / .7); color: #94a3b8; font-size: .58rem; font-weight: 850; letter-spacing: .085em; line-height: 1.2; pointer-events: none; text-transform: uppercase; }
.session-preview-group .session-action-group-label { background: rgb(30 64 175 / .17); color: #93c5fd; }
.session-management-group .session-action-group-label { background: rgb(21 128 61 / .14); color: #86efac; }
.session-action-group-buttons { display: flex; min-height: 34px; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px; }
.session-row-actions button, .session-row-actions .button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 6px 10px; border-radius: 7px; font-size: .75rem; font-weight: 800; letter-spacing: .005em; line-height: 1.15; box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 2px 8px rgb(0 0 0 / .14); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.session-row-actions button:hover, .session-row-actions .button:hover { box-shadow: inset 0 1px rgb(255 255 255 / .12), 0 5px 14px rgb(0 0 0 / .22); transform: translateY(-1px); }
.session-row-actions button:disabled, .session-row-actions .button[aria-disabled="true"] { box-shadow: none; opacity: .48; transform: none; }
.session-row-actions button:focus-visible, .session-row-actions .button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.session-row .badge, .release-stage-card .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-color: rgb(148 163 184 / .32); background: rgb(15 23 42 / .72); font-size: .68rem; font-weight: 850; letter-spacing: .045em; line-height: 1; text-transform: uppercase; box-shadow: inset 0 1px rgb(255 255 255 / .06); }
.session-row .badge::before, .release-stage-card .badge::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; box-shadow: 0 0 8px currentColor; }
.session-row .badge.active { border-color: rgb(59 130 246 / .58); background: rgb(30 64 175 / .24); color: #bfdbfe; }
.session-row .badge.staged { border-color: rgb(139 92 246 / .58); background: rgb(91 33 182 / .22); color: #ddd6fe; }
.release-stage-card .badge.draft { border-color: rgb(139 92 246 / .58); background: rgb(91 33 182 / .22); color: #ddd6fe; }
.session-row .badge.live { border-color: rgb(34 197 94 / .58); background: rgb(21 128 61 / .22); color: #bbf7d0; }
.session-row .badge.needs_attention { border-color: rgb(245 158 11 / .64); background: rgb(146 64 14 / .24); color: #fde68a; }
.session-row .badge.submitting { border-color: rgb(6 182 212 / .58); background: rgb(14 116 144 / .22); color: #a5f3fc; }
.session-row .badge.reverted, .session-row .badge.discarded { border-color: rgb(100 116 139 / .58); background: rgb(51 65 85 / .3); color: #cbd5e1; }
.session-action-codex button, .session-row-actions .session-launch-codex { background: linear-gradient(135deg, #4f46e5, #2563eb); border-color: #6366f1; color: #fff; box-shadow: 0 5px 14px rgb(37 99 235 / .28); }
.session-action-codex button:hover, .session-row-actions .session-launch-codex:hover { background: linear-gradient(135deg, #6366f1, #3b82f6); }
.session-launch-terminal, .session-action-terminal button { border-color: #0f766e; background: linear-gradient(135deg, #134e4a, #0f766e); color: #ccfbf1; box-shadow: 0 5px 14px rgb(13 148 136 / .18); }
.session-launch-terminal:hover, .session-action-terminal button:hover { border-color: #2dd4bf; background: linear-gradient(135deg, #115e59, #0d9488); color: #fff; }
.session-launch-terminal > span:first-child, .session-action-terminal button > span:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72em; font-weight: 900; letter-spacing: -.08em; }
.session-action-publish button { background: linear-gradient(135deg, #15803d, #16a34a); border-color: #22c55e; box-shadow: 0 5px 14px rgb(22 163 74 / .22); }
.session-action-publish button:hover { background: linear-gradient(135deg, #16a34a, #22c55e); }
.session-preview-home, .session-preview-admin, .session-preview-admin button { border-color: #465a73; background: linear-gradient(180deg, #18263a, #111827); color: #dbeafe; }
.session-preview-home:hover, .session-preview-admin:hover, .session-preview-admin button:hover { border-color: #647b98; background: linear-gradient(180deg, #22334b, #162136); color: #fff; }
.session-action-repair button { color: #fde68a; border-color: #a16207; background: rgb(161 98 7 / .18); }
.session-action-repair button:hover { border-color: #d97706; background: rgb(180 83 9 / .28); }
.session-action-discard button { color: #fecaca; border-color: #7f1d1d; background: rgb(127 29 29 / .2); }
.session-action-discard button:hover { border-color: #b91c1c; background: rgb(153 27 27 / .3); }
.session-action-grouping .button { border-color: #5b4b8a; background: rgb(76 29 149 / .16); color: #ddd6fe; }
.session-action-grouping .button:hover { border-color: #7c3aed; background: rgb(91 33 182 / .25); color: #f5f3ff; }
.session-action-manage .button { border-color: #475569; background: rgb(30 41 59 / .48); color: #cbd5e1; }
.session-action-manage .button:hover { border-color: #64748b; background: rgb(51 65 85 / .6); color: #fff; }
.session-new-button { background: linear-gradient(135deg, #2563eb, #4f46e5); border-color: #6366f1; box-shadow: 0 6px 16px rgb(37 99 235 / .25); }
.session-active { border-color: #3b82f6; box-shadow: inset 3px 0 #3b82f6, 0 8px 22px rgb(0 0 0 / .16); }
.session-live { border-color: #15803d; }
.session-needs_attention { border-color: #b45309; }
.session-discarded { opacity: .7; }
.session-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.session-error { margin: 12px 0 0; }
.session-row > .session-error { grid-column: 1 / -1; width: 100%; margin: 0; padding: 10px 12px; border-radius: 10px; box-sizing: border-box; }
.session-empty { padding: 22px; text-align: center; }
.session-empty.compact { padding: 14px; border: 1px dashed #334155; border-radius: 10px; }
.session-empty.compact p { margin: 3px 0; }
.session-history-list .session-row { background: #0b101a; box-shadow: none; }
.session-older { margin-top: 14px; border-top: 1px solid #334155; padding-top: 12px; }
.session-older > summary { cursor: pointer; font-weight: 800; color: #bfdbfe; }
.session-older[open] > summary { margin-bottom: 12px; }
.session-start-progress { align-items: center; gap: 12px; margin: 14px 0; padding: 13px 15px; border: 1px solid #2563eb; border-radius: 10px; background: rgb(30 64 175 / .18); color: #dbeafe; }
.session-start-progress small { display: block; margin-top: 3px; color: #93c5fd; }
.session-spinner { width: 22px; height: 22px; flex: 0 0 auto; border: 3px solid rgb(147 197 253 / .3); border-top-color: #60a5fa; border-radius: 50%; animation: session-spin .8s linear infinite; }
.session-created-success { display: flex; align-items: flex-start; gap: 13px; margin: 2px 0 18px; padding: 15px 16px; border: 1px solid #22c55e; border-radius: 11px; background: rgb(21 128 61 / .18); color: #dcfce7; }
.session-created-success > span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; background: #16a34a; color: white; font-weight: 900; }
.session-created-success p { margin: 4px 0 0; color: #bbf7d0; }
.session-launch-intro { margin: 2px 0 18px; }
.session-launch-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.session-launch-grid .button, .session-launch-grid button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.session-launch-codex { background: linear-gradient(135deg, #4f46e5, #2563eb); border-color: #6366f1; box-shadow: 0 6px 18px rgb(37 99 235 / .28); font-weight: 850; }
.session-launch-fallback { margin-top: 18px; border-top: 1px solid #334155; padding-top: 13px; }
.session-launch-fallback > summary { cursor: pointer; color: #bfdbfe; font-weight: 750; }
.session-launch-install { margin: 15px 0 8px; }
.release-stage-card { border-color: #475569; background: linear-gradient(145deg, rgb(15 23 42 / .96), rgb(30 41 59 / .94)); }
.release-stage-draft { border-color: #7c3aed; box-shadow: inset 0 0 0 1px rgb(139 92 246 / .18); }
.release-stage-ready { border-color: #16a34a; box-shadow: inset 0 0 0 1px rgb(34 197 94 / .18); }
.release-stage-needs_attention { border-color: #d97706; }
.stage-session-list { display: grid; gap: 8px; margin: 16px 0; }
.stage-session-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #334155; border-radius: 10px; background: rgb(15 23 42 / .7); }
.stage-session-item > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.stage-session-item .muted { font-size: .82rem; }
.stage-actions { margin-top: 14px; }
@keyframes session-spin { to { transform: rotate(360deg); } }
.git-advanced > summary { cursor: pointer; font-weight: 800; }
.git-advanced[open] > summary { margin-bottom: 18px; }
.code-command { user-select: all; }
.warning { border: 1px solid #b45309; border-radius: 8px; padding: 11px; background: rgb(146 64 14 / .18); color: #fde68a; }

/* Dev & Git: keep every action close to the object it changes, make long
   operations visible, and visually separate preview work from production. */
.code-management-panel { position: relative; }
.dev-feedback { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid; border-radius: 12px; box-shadow: 0 8px 22px rgb(0 0 0 / .15); }
.dev-feedback > div { min-width: 0; }
.dev-feedback strong { display: block; margin-bottom: 2px; font-size: .82rem; letter-spacing: .025em; text-transform: uppercase; }
.dev-feedback p { margin: 0; color: inherit; line-height: 1.45; }
.dev-feedback-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; color: white; font-weight: 900; }
.dev-feedback-success { border-color: rgb(34 197 94 / .58); background: rgb(21 128 61 / .16); color: #bbf7d0; }
.dev-feedback-success .dev-feedback-icon { background: #16a34a; }
.dev-feedback-error { border-color: rgb(245 158 11 / .65); background: rgb(146 64 14 / .2); color: #fde68a; }
.dev-feedback-error .dev-feedback-icon { background: #d97706; }
.dev-operation-indicator { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: min(640px, calc(100vw - 48px)); overflow: hidden; align-items: center; gap: 11px; box-sizing: border-box; margin: 0; padding: 11px 14px 11px 11px; border: 1px solid rgb(96 165 250 / .62); border-left: 3px solid #60a5fa; border-radius: 12px; background: linear-gradient(145deg, rgb(17 43 78 / .98), rgb(10 28 55 / .98)); color: #dbeafe; box-shadow: 0 16px 42px rgb(0 0 0 / .45), inset 0 1px 0 rgb(191 219 254 / .1); backdrop-filter: blur(12px); }
.dev-operation-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(147 197 253 / .34); border-radius: 9px; background: rgb(30 64 175 / .34); box-shadow: inset 0 1px 0 rgb(219 234 254 / .1); }
.dev-operation-icon .session-spinner.compact { width: 14px; height: 14px; }
.dev-operation-copy { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; }
.dev-operation-copy strong { font-size: .82rem; line-height: 1.35; white-space: nowrap; }
.dev-operation-copy small { display: inline; color: #93c5fd; line-height: 1.4; }
.dev-operation-copy small::before { margin-right: 9px; color: #60a5fa; content: "\2022"; }
.session-inline-progress small { display: block; color: #93c5fd; line-height: 1.45; }
.git-confirmation-modal { width: min(590px, 100%); border-color: #3b82f6; box-shadow: 0 28px 90px rgb(0 0 0 / .68), 0 0 0 1px rgb(59 130 246 / .1); }
.git-confirmation-modal .modal-header { align-items: flex-start; }
.git-confirmation-modal .modal-header .eyebrow { margin-bottom: 5px; }
.git-confirmation-content { display: flex; align-items: flex-start; gap: 14px; padding: 8px 2px 4px; }
.git-confirmation-content p { margin: 0; color: #e2e8f0; font-size: .96rem; line-height: 1.6; }
.git-confirmation-content small { display: block; margin-top: 9px; color: #94a3b8; }
.git-confirmation-field { margin: 4px 2px 2px 48px; }
.git-confirmation-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #1d4ed8; color: white; font-size: 1rem; font-weight: 900; box-shadow: 0 0 0 5px rgb(59 130 246 / .12); }
.git-confirmation-actions { justify-content: flex-end; gap: 9px; }
.git-confirmation-actions button { min-width: 120px; }
.git-confirmation-warning { border-color: #d97706; }
.git-confirmation-warning .git-confirmation-icon { background: #d97706; box-shadow: 0 0 0 5px rgb(245 158 11 / .12); }
.git-confirmation-warning-submit { border-color: #d97706; background: linear-gradient(135deg, #b45309, #d97706); color: white; }
.git-confirmation-production { border-color: #16a34a; }
.git-confirmation-production .git-confirmation-icon { background: #16a34a; box-shadow: 0 0 0 5px rgb(34 197 94 / .12); }
.git-confirmation-danger { border-color: #dc2626; }
.git-confirmation-danger .git-confirmation-icon { background: #dc2626; box-shadow: 0 0 0 5px rgb(239 68 68 / .12); }
.git-setup-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; border-color: #334155; background: linear-gradient(145deg, #0d1726, #0a1220); }
.git-setup-card h3, .git-setup-card p { margin: 0; }
.git-setup-card p { margin-top: 5px; }
.git-setup-number { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3b82f6; border-radius: 50%; background: rgb(30 64 175 / .28); color: #bfdbfe; font-size: .85rem; font-weight: 900; }
.warning.compact { margin: 10px 0 0; padding: 8px 10px; font-size: .78rem; }
.session-row { grid-template-columns: minmax(250px, 1fr) minmax(0, auto); }
.session-row-actions { min-width: 0; }
.session-action-group-label { background: transparent; }
.session-action-codex button { gap: 6px; }
.session-inline-progress { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 8px 10px; border: 1px solid rgb(59 130 246 / .38); border-radius: 10px; background: rgb(30 64 175 / .13); color: #dbeafe; font-size: .77rem; }
.session-inline-progress strong { display: block; }
.session-spinner.compact { width: 16px; height: 16px; border-width: 2px; }
.session-related-context { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #334155; border-radius: 10px; background: rgb(15 23 42 / .62); }
.session-related-context > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: #1d4ed8; color: white; font-weight: 900; }
.session-related-context p { margin: 3px 0 0; color: #94a3b8; font-size: .84rem; line-height: 1.4; }
.session-history-buttons { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.session-history-buttons .danger { border-color: #991b1b; background: rgb(127 29 29 / .25); color: #fecaca; }
.session-history-list .session-row { border-left-width: 3px; opacity: 1; }
.session-history-list .session-live { border-left-color: #22c55e; }
.session-history-list .session-reverted { border-left-color: #f59e0b; }
.session-history-list .session-discarded { border-left-color: #64748b; opacity: 1; }
.session-history-list .session-title-status .badge { padding: 4px 9px; box-shadow: 0 3px 10px rgb(0 0 0 / .25); }
.stage-state-callout { display: flex; align-items: flex-start; gap: 11px; margin: 12px 0 15px; padding: 12px 14px; border: 1px solid; border-radius: 11px; }
.stage-state-callout > span:not(.session-spinner) { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; color: white; font-weight: 900; }
.stage-state-callout p { margin: 3px 0 0; color: inherit; line-height: 1.4; }
.stage-state-callout small { display: block; margin-top: 6px; color: inherit; opacity: .9; }
.stage-state-ready { border-color: rgb(34 197 94 / .5); background: rgb(21 128 61 / .14); color: #bbf7d0; }
.stage-state-ready > span { background: #16a34a; }
.stage-state-error { border-color: rgb(245 158 11 / .62); background: rgb(146 64 14 / .18); color: #fde68a; }
.stage-state-error > span { background: #d97706; }
.stage-state-working { align-items: center; border-color: rgb(59 130 246 / .55); background: rgb(30 64 175 / .16); color: #bfdbfe; }
.stage-session-list { margin: 14px 0; }
.stage-session-item { padding: 9px 11px; }
.stage-session-position { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid #475569; border-radius: 50%; background: #111c2d; color: #94a3b8; font-size: .68rem; font-weight: 850; }
.stage-action-layout { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.stage-action-layout .session-action-group { flex: 0 1 auto; }
.stage-action-layout .session-action-group-label { background: transparent; }
.stage-action-layout button, .stage-action-layout .button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 11px; border-radius: 8px; font-size: .78rem; font-weight: 800; }
.stage-review-group { border-color: rgb(59 130 246 / .42); }
.stage-production-group { margin-left: auto; border-color: rgb(34 197 94 / .48); }
.stage-publish-button { background: linear-gradient(135deg, #15803d, #16a34a); border-color: #22c55e; box-shadow: 0 5px 14px rgb(22 163 74 / .23); }
.stage-owner-note { padding: 0 6px; color: #94a3b8; font-size: .78rem; }
.stage-candidate-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; color: #64748b; font-size: .72rem; }
.stage-candidate-line code { color: #cbd5e1; }
.stage-empty-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-style: dashed; background: rgb(11 18 32 / .65); }
.stage-empty-card h3, .stage-empty-card p { margin: 0; }
.stage-empty-card p { margin-top: 4px; }
.stage-empty-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #172235; color: #93c5fd; font-size: 1.1rem; }
.stage-empty-status { padding: 5px 9px; border: 1px solid #334155; border-radius: 999px; color: #94a3b8; font-size: .7rem; font-weight: 800; }
.git-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.git-advanced > summary::-webkit-details-marker { display: none; }
.git-advanced > summary::after { color: #94a3b8; content: "+"; font-size: 1.2rem; }
.git-advanced[open] > summary::after { content: "−"; }
.git-advanced > summary span, .git-advanced > summary small { display: block; }
.git-advanced > summary small { margin-left: auto; color: #64748b; font-weight: 600; }
.git-advanced-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.git-advanced-heading h3, .git-advanced-heading p { margin: 0; }
.git-advanced-heading p { margin-top: 4px; }
.git-advanced-copy { max-width: 850px; margin: 12px 0 16px; }
.git-history-table td:first-child { min-width: 260px; }
.git-history-table td:first-child strong, .git-history-table td:first-child small { display: block; }
.git-history-table td:first-child small { margin-top: 3px; color: #64748b; }
.git-history-current { background: rgb(21 128 61 / .08); }
.coding-session-list, .coding-session-history, .release-stage-card, .stage-empty-card, .git-advanced { margin-top: 14px; }
@media (max-width: 1050px) { .session-row { grid-template-columns: 1fr; } .session-row-actions { justify-content: flex-start; max-width: none; } }
@media (max-width: 680px) { .session-section-heading, .git-advanced-heading { flex-direction: column; } .session-row-heading { flex-direction: column; gap: 8px; } .git-setup-card, .stage-empty-card { grid-template-columns: auto minmax(0, 1fr); } .git-setup-card > button, .stage-empty-card > .stage-empty-status { grid-column: 1 / -1; width: 100%; } .stage-action-layout, .stage-action-layout .session-action-group { width: 100%; } .stage-production-group { margin-left: 0; } .session-row-actions, .session-action-group { width: 100%; } .session-action-group-buttons { display: grid; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } .session-action-group-buttons > *, .session-action-group-buttons form, .session-action-group-buttons button, .session-action-group-buttons .button { width: 100%; } .git-advanced > summary small { display: none; } }
@media (max-width: 430px) { .session-action-group-buttons { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .dev-operation-indicator { right: 14px; bottom: 14px; width: calc(100vw - 28px); align-items: flex-start; } .dev-operation-copy { display: grid; gap: 2px; } .dev-operation-copy strong { white-space: normal; } .dev-operation-copy small::before { display: none; } }
@media (max-width: 680px) { .git-confirmation-content { gap: 11px; } .git-confirmation-field { margin-left: 2px; } .git-confirmation-actions { display: grid; grid-template-columns: 1fr; } .git-confirmation-actions button { width: 100%; } }
@media (max-width: 820px) {
    .feature-nav-beta { width: 100%; margin-left: 0; padding: 9px 0 0; border-top: 1px solid #263244; border-left: 0; }
    .site-quick-actions, .gitea-hero { align-items: flex-start; flex-direction: column; }
    .gitea-hero-actions { justify-content: flex-start; }
    .gitea-repository-bar { grid-template-columns: 1fr 1fr; }
    .gitea-repository-bar > div:first-child { grid-column: 1 / -1; }
}

/* Multi-site development mirrors the single-site Development & Git workflow:
   production first, private work second, and actions grouped by purpose. */
.dev-directory-hero h1, .dev-coordinator-hero h1 { margin: 5px 0 6px; color: white; font-size: 1.6rem; }
.dev-directory-hero { position: relative; overflow: hidden; min-height: 118px; border-color: #365a83; margin-bottom: 14px; padding: 24px 26px; background: radial-gradient(circle at 82% 15%, rgb(37 99 235 / .28), transparent 34%), linear-gradient(125deg, #10233d, #091321 64%); box-shadow: 0 15px 38px rgb(0 0 0 / .2), inset 0 1px rgb(255 255 255 / .05); }
.dev-directory-hero::after { position: absolute; right: -60px; bottom: -105px; width: 250px; height: 250px; border: 1px solid rgb(96 165 250 / .14); border-radius: 50%; content: ""; pointer-events: none; }
.dev-directory-hero-copy { position: relative; z-index: 1; max-width: 750px; }
.dev-directory-hero-copy > p { margin: 0; color: #cbd5e1; font-size: .9rem; }
.dev-directory-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.dev-directory-summary span { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid rgb(96 165 250 / .22); border-radius: 999px; padding: 5px 10px; background: rgb(8 22 40 / .62); color: #a9bdd3; font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.dev-directory-summary strong { color: #f8fafc; font-size: .8rem; }
.dev-directory-hero .gitea-hero-actions { position: relative; z-index: 1; }
.dev-history-button { display: inline-flex; align-items: center; gap: 7px; }
.dev-back-link { display: inline-flex; margin: 0 0 10px; color: #93c5fd; font-size: .82rem; font-weight: 750; }
.dev-back-link:hover { color: #dbeafe; }
.dev-coordinator-masthead { overflow: hidden; margin-bottom: 15px; border: 1px solid #31598a; border-radius: 16px; background: radial-gradient(circle at 8% 0, rgb(37 99 235 / .24), transparent 38%), linear-gradient(135deg, #0f2038, #0a111d 72%); box-shadow: 0 18px 44px rgb(0 0 0 / .24); }
.dev-coordinator-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 23px 24px 21px; }
.dev-coordinator-identity { min-width: 0; max-width: 860px; }
.dev-coordinator-identity h1 { margin: 5px 0 7px; color: white; font-size: 1.75rem; letter-spacing: -.02em; }
.dev-coordinator-identity > .muted { margin: 0; color: #bfdbfe; line-height: 1.5; }
.dev-coordinator-state { display: flex; min-width: 150px; align-items: flex-end; flex-direction: column; gap: 9px; border-left: 1px solid rgb(96 165 250 / .22); padding: 4px 0 4px 22px; }
.dev-coordinator-state-label { color: #64748b; font-size: .63rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dev-coordinator-state .badge { font-size: .72rem; }
.dev-coordinator-state form { margin: 0; }
.dev-coordinator-masthead .dev-coordinator-summary { margin: 0; border-width: 1px 0 0; border-color: #27415f; border-radius: 0; background: #27415f; }
.dev-coordinator-masthead .dev-coordinator-summary > div { background: rgb(7 16 29 / .82); }
.dev-coordinator-masthead .dev-coordinator-summary small { color: #7f96b2; }
.dev-coordinator-masthead .dev-coordinator-summary strong { font-size: .88rem; }
.dev-coordinator-hero { align-items: flex-start; margin-bottom: 14px; }
.dev-coordinator-description { max-width: 780px; color: #dbeafe; }
.dev-coordinator-actions .session-launch-codex { display: inline-flex; align-items: center; gap: 7px; }
.dev-coordinator-actions .badge { min-height: 34px; padding: 7px 11px; }
.dev-section > .dev-section-heading { margin-bottom: 0; }
.dev-section-heading .eyebrow { display: block; margin-bottom: 4px; }
.dev-section-count { flex: 0 0 auto; border: 1px solid #334155; border-radius: 999px; padding: 5px 10px; background: #111c2d; color: #94a3b8; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.dev-change-list, .dev-multi-site-list { padding: 16px; }
.dev-change-row h3, .dev-multi-site-row h3 { margin: 0 0 3px; font-size: 1rem; }
.dev-change-sites { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.dev-change-sites span { overflow: hidden; max-width: 260px; border: 1px solid #334155; border-radius: 999px; padding: 4px 8px; background: #111c2d; color: #cbd5e1; font-size: .69rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dev-change-row.session-starting { border-color: #2563eb; }
.dev-change-row.session-needs_attention { border-color: #b45309; box-shadow: inset 3px 0 #d97706, 0 8px 22px rgb(0 0 0 / .16); }
.dev-history-dialog { width: min(1120px, calc(100vw - 30px)); }
.dev-history-dialog-card { width: auto; max-height: min(820px, calc(100vh - 34px)); overflow: hidden; }
.dev-history-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; overflow-y: auto; padding: 16px; background: #07111e; }
.dev-history-group { min-width: 0; overflow: hidden; border: 1px solid #29425d; border-radius: 13px; background: #0b1726; }
.dev-history-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #263b53; padding: 13px 14px; background: #101f31; }
.dev-history-group-heading h3 { margin: 2px 0 0; color: #f8fafc; font-size: .98rem; }
.dev-history-group-heading > span { display: grid; min-width: 28px; height: 28px; place-items: center; border: 1px solid #3d5a79; border-radius: 999px; color: #bae6fd; font-size: .72rem; font-weight: 850; }
.dev-history-list { display: grid; max-height: 570px; overflow-y: auto; }
.dev-history-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #22344a; padding: 12px 14px; color: #e2e8f0; text-decoration: none; }
.dev-history-item:last-child { border-bottom: 0; }
.dev-history-item:hover { background: rgb(30 64 101 / .34); color: #fff; }
.dev-history-item > span:first-child { display: grid; min-width: 0; gap: 3px; }
.dev-history-item strong, .dev-history-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-history-item small { color: #8fa5bc; font-size: .7rem; }
.dev-history-item-state { display: grid; flex: 0 0 auto; justify-items: end; gap: 5px; }
.dev-history-empty { display: grid; gap: 4px; padding: 30px 18px; color: #94a3b8; text-align: center; }
.dev-history-empty strong { color: #cbd5e1; }
.dev-history-empty span { font-size: .78rem; }
.dev-coordinator-summary > div.is-complete { background: #071d13; }
.dev-coordinator-summary > div.is-complete strong { color: #86efac; }
.dev-coordinator-summary > div.is-working { background: #0b1a33; }
.dev-coordinator-summary > div.is-working strong { color: #93c5fd; }
.dev-multi-production { margin-top: 0; }
.dev-multi-production h2, .dev-multi-production p { margin: 0; }
.dev-multi-production h2 { margin: 4px 0; }
.dev-stage-state-pending { border-color: #475569; background: rgb(30 41 59 / .38); color: #cbd5e1; }
.dev-stage-state-pending > span { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid #64748b; border-radius: 50%; background: #1e293b; color: #e2e8f0; font-size: .72rem; font-weight: 900; }
.dev-production-actions { justify-content: flex-end; }
.dev-production-live-status { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.dev-live-indicator { display: inline-flex; align-items: center; gap: 6px; color: #94a3b8; font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dev-live-indicator > span { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgb(34 197 94 / .1), 0 0 10px rgb(34 197 94 / .7); animation: dev-live-pulse 2.2s ease-in-out infinite; }
@keyframes dev-live-pulse { 50% { opacity: .45; transform: scale(.82); } }
.dev-current-sites { margin-top: 14px; }
.dev-current-work-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.dev-current-work-tools .session-launch-codex { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 7px 13px; }
.dev-current-work-tools .dev-group-discard-button { min-height: 36px; border-color: #991b1b; padding: 7px 11px; background: rgb(127 29 29 / .24); color: #fecaca; }
.dev-current-work-tools .dev-group-discard-button:hover { border-color: #dc2626; background: rgb(153 27 27 / .34); color: #fff; }
.dev-current-work-tools .dev-group-discard-button:disabled { border-color: #4b2529; background: rgb(69 10 10 / .14); color: #7f6a70; cursor: not-allowed; }
.dev-multi-site-row { grid-template-columns: minmax(220px, 1fr) minmax(0, auto); }
.dev-multi-site-row .session-row-actions { max-width: 850px; }
.dev-multi-site-row .session-description { max-width: 440px; }
.dev-multi-site-row .session-inline-progress { min-width: 0; padding: 6px 9px; }
.dev-multi-site-row .dev-stage-confirmed { min-height: 32px; padding: 5px 9px; }
.dev-site-manage-group { border-color: rgb(148 163 184 / .3); }
.dev-multi-site-row .dev-remove-site-button { margin-left: 0; }
.dev-preview-pair { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 5px; }
.dev-preview-pair form { display: flex; margin: 0; }
.dev-preview-pair > *, .dev-preview-pair form button { white-space: nowrap; }
.dev-danger-zone .eyebrow { display: block; margin-bottom: 4px; }

/* Give each Development surface a distinct job without changing its workflow. */
.dev-section-heading { position: relative; }
.dev-section-heading::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; content: ""; }
.dev-section-current { border-color: #24476b; background: #0d1624; box-shadow: inset 0 1px rgb(96 165 250 / .05); }
.dev-section-current > .dev-section-heading { background: linear-gradient(100deg, rgb(30 64 175 / .24), #0f172a 56%); }
.dev-section-current > .dev-section-heading::before { background: #3b82f6; box-shadow: 0 0 18px rgb(59 130 246 / .48); }
.dev-section-current > .dev-section-heading .eyebrow { color: #93c5fd; }
.dev-section-current .dev-section-count { border-color: rgb(96 165 250 / .42); background: rgb(30 64 175 / .22); color: #bfdbfe; }
.dev-section-current > .dev-change-list,
.dev-section-current > .dev-multi-site-list { background: linear-gradient(180deg, rgb(15 32 56 / .62), rgb(8 15 27 / .35)); }

.dev-section-staging { border-color: #854d0e; background: #17130c; box-shadow: inset 0 1px rgb(251 191 36 / .05); }
.dev-section-staging > .dev-section-heading { background: linear-gradient(100deg, rgb(146 64 14 / .35), #17130c 60%); }
.dev-section-staging > .dev-section-heading::before { background: #f59e0b; box-shadow: 0 0 18px rgb(245 158 11 / .42); }
.dev-section-staging > .dev-section-heading .eyebrow { color: #fbbf24; }
.dev-section-staging .dev-section-count { border-color: rgb(245 158 11 / .4); background: rgb(120 53 15 / .28); color: #fde68a; }
.dev-staging-list { display: grid; gap: 11px; padding: 17px; background: linear-gradient(180deg, rgb(69 36 8 / .25), rgb(17 14 9 / .42)); }
.dev-staging-row { overflow: hidden; border: 1px solid #6b4b1f; border-radius: 15px; background: linear-gradient(112deg, rgb(120 53 15 / .24), #101827 68%); box-shadow: 0 11px 28px rgb(0 0 0 / .2), inset 0 1px rgb(255 255 255 / .035); }
.dev-staging-row.release-stage-draft { border-color: #6d4bb0; background: linear-gradient(112deg, rgb(76 29 149 / .24), #101827 68%); }
.dev-staging-row.release-stage-needs_attention { border-color: #b45309; box-shadow: inset 4px 0 #f59e0b, 0 11px 28px rgb(0 0 0 / .2); }
.dev-staging-row.release-stage-ready { border-color: #3f7449; background: linear-gradient(112deg, rgb(20 83 45 / .24), #101827 68%); }
.dev-staging-row.release-stage-publishing { border-color: #2563eb; background: linear-gradient(112deg, rgb(30 64 175 / .25), #101827 68%); }
.dev-staging-main, .dev-staging-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dev-staging-main { padding: 16px 17px 12px; }
.dev-staging-identity { min-width: 0; }
.dev-staging-title-line { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px; }
.dev-staging-title-line h3 { overflow: hidden; margin: 0; color: #f8fafc; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.dev-staging-group-label { overflow: hidden; max-width: 320px; border: 1px solid #4c3a20; border-radius: 999px; padding: 3px 8px; background: rgb(120 53 15 / .2); color: #fcd34d; font-size: .64rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dev-staging-site { display: inline-flex; margin-top: 5px; color: #fdba74; font-size: .76rem; font-weight: 800; text-decoration: none; }
.dev-staging-site:hover { color: #ffedd5; text-decoration: underline; }
.dev-staging-includes { overflow: hidden; max-width: 760px; margin: 5px 0 0; color: #8fa5bc; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.dev-staging-state { display: flex; flex: 0 0 auto; min-width: 230px; align-items: center; gap: 9px; border: 1px solid #5c4526; border-radius: 11px; padding: 8px 10px; background: rgb(20 25 35 / .68); }
.dev-staging-state > span { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgb(245 158 11 / .12); }
.dev-staging-state > div { display: grid; gap: 1px; }
.dev-staging-state strong { color: #f8fafc; font-size: .73rem; }
.dev-staging-state small { color: #91a4bb; font-size: .64rem; }
.dev-staging-state.stage-ready { border-color: #2f6341; }
.dev-staging-state.stage-ready > span { background: #22c55e; box-shadow: 0 0 0 4px rgb(34 197 94 / .12); }
.dev-staging-state.stage-draft { border-color: #6846a4; }
.dev-staging-state.stage-draft > span { background: #a78bfa; box-shadow: 0 0 0 4px rgb(167 139 250 / .12); }
.dev-staging-state.stage-publishing { border-color: #315b91; }
.dev-staging-state.stage-publishing > span, .dev-staging-state.stage-building > span { animation: dev-live-pulse 1.5s ease-in-out infinite; }
.dev-staging-state.stage-publishing > span { background: #60a5fa; box-shadow: 0 0 0 4px rgb(96 165 250 / .12); }
.dev-staging-error { border-top: 1px solid rgb(180 83 9 / .42); border-bottom: 1px solid rgb(180 83 9 / .42); padding: 9px 17px; background: rgb(120 53 15 / .2); color: #fde68a; font-size: .73rem; line-height: 1.45; }
.dev-staging-footer { border-top: 1px solid rgb(107 75 31 / .5); padding: 10px 12px 10px 17px; background: rgb(7 14 24 / .5); }
.dev-staging-meta { min-width: 0; color: #71849b; font-size: .68rem; }
.dev-staging-meta code { color: #c4b5fd; }
.dev-staging-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dev-staging-actions .button { min-height: 33px; padding: 6px 10px; font-size: .72rem; }
.dev-staging-actions .session-launch-codex { display: inline-flex; align-items: center; gap: 6px; }
.dev-staging-manage { border-color: #a16207; background: linear-gradient(135deg, #92400e, #b45309); color: #fff7ed; }
.dev-staging-manage:hover { border-color: #f59e0b; background: linear-gradient(135deg, #b45309, #d97706); color: #fff; }
.dev-staging-empty { border: 1px dashed #6b4b1f; border-radius: 13px; padding: 25px 18px; background: rgb(47 31 10 / .24); text-align: center; }
.dev-staging-empty p { margin: 5px 0 0; }

.dev-section-history { border-color: #303947; background: #0b1018; }
.dev-section-history > .dev-section-heading { background: #151b25; }
.dev-section-history > .dev-section-heading::before { background: #64748b; }
.dev-section-history > .dev-section-heading .eyebrow { color: #94a3b8; }

.dev-section-directory { border-color: #155e75; background: #0b151d; }
.dev-section-directory > .dev-section-heading { background: linear-gradient(100deg, rgb(8 75 93 / .34), #0f172a 58%); }
.dev-section-directory > .dev-section-heading::before { background: #06b6d4; box-shadow: 0 0 18px rgb(6 182 212 / .36); }
.dev-section-directory > .dev-section-heading .eyebrow { color: #67e8f9; }
.dev-section-directory .table-scroll { background: rgb(5 20 28 / .34); }
.dev-section-directory .dev-sites-table thead { background: #0c202b; }
.dev-section-directory .dev-sites-table tbody tr { transition: background .15s ease; }
.dev-section-directory .dev-sites-table tbody tr:hover { background: rgb(8 75 93 / .16); }

.dev-section-production { position: relative; overflow: hidden; border-width: 1px; border-top-width: 3px; box-shadow: 0 16px 38px rgb(0 0 0 / .2); }
.dev-section-production::before { position: absolute; top: 0; right: 0; left: 0; height: 78px; pointer-events: none; content: ""; opacity: .58; }
.dev-section-production > * { position: relative; }
.dev-section-production .release-stage-heading .eyebrow { font-weight: 850; }
.dev-production-waiting { border-color: #a16207; background: linear-gradient(145deg, #1b160d, #111827 66%); }
.dev-production-waiting::before { background: linear-gradient(180deg, rgb(245 158 11 / .13), transparent); }
.dev-production-waiting .release-stage-heading .eyebrow { color: #fbbf24; }
.dev-production-working { border-color: #2563eb; background: linear-gradient(145deg, #0b1a33, #111827 68%); }
.dev-production-working::before { background: linear-gradient(180deg, rgb(59 130 246 / .16), transparent); }
.dev-production-working .release-stage-heading .eyebrow { color: #93c5fd; }
.dev-production-ready, .dev-production-complete { border-color: #16a34a; background: linear-gradient(145deg, #071d13, #111827 70%); }
.dev-production-ready::before, .dev-production-complete::before { background: linear-gradient(180deg, rgb(34 197 94 / .14), transparent); }
.dev-production-ready .release-stage-heading .eyebrow, .dev-production-complete .release-stage-heading .eyebrow { color: #86efac; }
.dev-production-attention { border-color: #dc2626; background: linear-gradient(145deg, #251013, #111827 70%); }
.dev-production-attention::before { background: linear-gradient(180deg, rgb(239 68 68 / .14), transparent); }
.dev-production-attention .release-stage-heading .eyebrow { color: #fca5a5; }

.dev-danger-zone { background: linear-gradient(110deg, rgb(69 10 10 / .38), #111827 62%); box-shadow: inset 4px 0 #b91c1c; }
.dev-danger-zone .eyebrow { color: #fca5a5; }
@media (max-width: 1050px) {
    .dev-coordinator-main { align-items: stretch; flex-direction: column; }
    .dev-coordinator-state { min-width: 0; align-items: flex-start; flex-direction: row; flex-wrap: wrap; border-top: 1px solid rgb(96 165 250 / .22); border-left: 0; padding: 15px 0 0; }
    .dev-coordinator-state-label { width: 100%; }
    .dev-multi-site-row { grid-template-columns: 1fr; }
    .dev-multi-site-row .session-row-actions { justify-content: flex-start; max-width: none; }
}
@media (max-width: 680px) {
    .dev-coordinator-main { padding: 18px; }
    .dev-coordinator-masthead .dev-coordinator-summary { grid-template-columns: 1fr 1fr; }
    .dev-coordinator-masthead .dev-coordinator-summary > div:first-child { grid-column: auto; }
    .dev-current-work-tools { width: 100%; justify-content: space-between; }
    .dev-change-list, .dev-multi-site-list { padding: 11px; }
    .dev-section-heading { align-items: flex-start; flex-direction: column; }
    .dev-multi-site-row .session-row-actions, .dev-multi-site-row .session-action-group { width: 100%; }
    .dev-multi-site-row .session-action-group-buttons { display: grid; grid-template-columns: 1fr; }
    .dev-multi-site-row .session-action-group-buttons > *, .dev-multi-site-row .session-action-group-buttons form, .dev-multi-site-row .session-action-group-buttons button { width: 100%; box-sizing: border-box; }
    .dev-multi-site-row .dev-preview-pair { display: grid; grid-template-columns: 1fr 1fr; }
    .dev-multi-site-row .dev-preview-pair > *, .dev-multi-site-row .dev-preview-pair form, .dev-multi-site-row .dev-preview-pair button { width: 100%; }
    .dev-staging-list { padding: 11px; }
    .dev-staging-main, .dev-staging-footer { align-items: stretch; flex-direction: column; gap: 11px; }
    .dev-staging-state { min-width: 0; }
    .dev-staging-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
    .dev-staging-actions > * { box-sizing: border-box; justify-content: center; }
}

/* Development directory: familiar per-site controls inside clearly grouped open work. */
.dev-current-work-list { display: grid; gap: 18px; padding: 18px; background: linear-gradient(180deg, rgb(15 32 56 / .62), rgb(8 15 27 / .35)); }
.dev-work-group { overflow: hidden; border: 1px solid #36577b; border-radius: 17px; background: linear-gradient(105deg, rgb(30 64 175 / .25), rgb(9 21 37 / .98) 62%); box-shadow: 0 15px 34px rgb(0 0 0 / .22), inset 0 1px rgb(255 255 255 / .04); }
.dev-work-group.session-needs_attention { border-color: #a16207; box-shadow: 0 15px 34px rgb(0 0 0 / .22), inset 4px 0 #d97706; }
.dev-work-group-header { display: flex; min-height: 126px; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 21px; }
.dev-work-group-identity { min-width: 0; }
.dev-work-group-identity > .eyebrow { color: #93c5fd; }
.dev-work-group-title { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px; margin: 3px 0; }
.dev-work-group-title h3 { overflow: hidden; margin: 0; color: #f8fafc; font-size: 1.12rem; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.dev-work-group-title .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; border-radius: 999px; padding: 4px 9px; font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.dev-work-group-sites { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 13px; margin: 8px 0 4px; }
.dev-work-group-sites a { position: relative; color: #bae6fd; font-size: .8rem; font-weight: 750; text-decoration: none; }
.dev-work-group-sites a:not(:last-child)::after { position: absolute; right: -9px; color: #4d6986; content: "\2022"; }
.dev-work-group-sites a:hover { color: #fff; text-decoration: underline; }
.dev-work-group-meta { margin: 0; font-size: .72rem; }
.dev-work-group-error { overflow: hidden; max-width: 820px; margin: 8px 0 0; color: #fcd34d; font-size: .76rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.dev-work-group-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dev-work-group-actions .session-launch-codex { display: inline-flex; align-items: center; gap: 7px; }
.dev-current-session-row h3 { margin: 0 0 3px; font-size: .96rem; }
.dev-current-session-row .session-row-heading { gap: 10px; }
.dev-current-session-row .session-row-heading p { line-height: 1.35; }
.dev-current-session-branch { overflow: hidden; margin: 7px 0 0; color: #94a3b8; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.dev-current-session-branch code { color: #a5b4fc; }
.dev-current-session-row .session-row-actions { gap: 8px; }
.dev-current-session-row .session-action-group { padding: 0; }
.dev-current-session-row .session-action-group-label { font-size: .58rem; }
.dev-current-session-row .dev-session-site-link { border-style: dashed; color: #94a3b8; }
.dev-work-type-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 2px 2px 0; }
.dev-work-type-heading + .dev-work-group, .dev-work-type-heading + .dev-independent-session-list { margin-top: -7px; }
.dev-work-type-heading > div { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.dev-work-type-heading h3 { margin: 0; color: #f1f5f9; font-size: 1rem; letter-spacing: -.01em; }
.dev-work-type-heading > div > span { color: #7dd3fc; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.dev-single-heading { border-top: 1px solid #2c4561; margin-top: 1px; padding-top: 16px; }
.dev-work-type-heading .button, .dev-work-type-heading button { min-height: 34px; padding: 7px 11px; }
.dev-add-single-session { display: inline-flex; align-items: center; gap: 6px; }
.dev-independent-session-list { display: grid; gap: 10px; }
.dev-independent-session-list > .dev-current-session-row { border-color: #31536c; background: linear-gradient(145deg, #0a1c27, #09131f); }
.dev-current-work-empty { border: 1px dashed #36577b; border-radius: 14px; padding: 28px 20px; background: rgb(8 20 35 / .72); text-align: center; }

@media (max-width: 1050px) {
    .dev-work-group-header { align-items: flex-start; flex-direction: column; }
    .dev-work-group-actions { justify-content: flex-start; }
    .dev-history-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .dev-current-work-list { gap: 13px; padding: 11px; }
    .dev-work-group-header { min-height: 0; padding: 16px 14px; }
    .dev-work-group-actions, .dev-work-group-actions > * { width: 100%; box-sizing: border-box; }
    .dev-work-group-actions > * { justify-content: center; }
    .dev-work-type-heading { align-items: stretch; flex-direction: column; }
    .dev-work-type-heading .button, .dev-work-type-heading button { width: 100%; box-sizing: border-box; justify-content: center; }
    .dev-current-session-row .session-action-group, .dev-current-session-row .session-action-group-buttons { width: 100%; }
    .dev-current-session-row .session-action-group-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dev-current-session-row .session-action-group-buttons > *, .dev-current-session-row .session-action-group-buttons form, .dev-current-session-row .session-action-group-buttons button { width: 100%; box-sizing: border-box; }
    .dev-current-session-row .dev-preview-pair { display: grid; grid-template-columns: 1fr 1fr; }
    .dev-current-session-row .dev-preview-pair > *, .dev-current-session-row .dev-preview-pair form, .dev-current-session-row .dev-preview-pair button { width: 100%; }
}
@media (max-width: 430px) {
    .dev-current-session-row .session-action-group-buttons { grid-template-columns: 1fr; }
}

/* Administrator-managed user roles and site access. */
.user-access-form { display: grid; gap: 22px; max-width: 980px; }
.user-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.user-site-access { display: grid; gap: 14px; border: 1px solid #30465f; border-radius: 14px; padding: 18px; background: #091522; }
.user-site-access[hidden] { display: grid; }
.user-site-access-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.user-site-access-heading h2 { margin: 0 0 3px; font-size: 1rem; }
.user-site-access-heading p { margin: 0; }
.user-site-count { flex: 0 0 auto; border: 1px solid #315b80; border-radius: 999px; padding: 5px 10px; background: #0b2940; color: #bae6fd; font-size: .72rem; font-weight: 800; }
.user-site-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 390px; overflow: auto; gap: 8px; padding-right: 4px; }
.user-site-option { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #263d55; border-radius: 10px; padding: 11px 12px; background: #0c1b2b; cursor: pointer; }
.user-site-option[hidden] { display: none; }
.user-site-option:hover { border-color: #3b82b6; background: #10243a; }
.user-site-option:has(input:checked) { border-color: #3b82f6; background: #102b49; box-shadow: inset 3px 0 #38bdf8; }
.user-site-admin-notice { margin: 0; }
.user-site-search-row { display: flex; align-items: end; gap: 12px; }
.user-site-search-row > .field { flex: 1 1 auto; margin: 0; }
.user-site-selection-actions { display: flex; flex: 0 0 auto; gap: 8px; padding-bottom: 1px; }
.user-site-option input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; padding: 0; }
.user-site-option span { display: grid; min-width: 0; }
.user-site-option strong, .user-site-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-site-option small { color: #8295aa; }
@media (max-width: 700px) {
    .user-identity-grid, .user-site-list { grid-template-columns: 1fr; }
    .user-site-access-heading { align-items: stretch; flex-direction: column; }
    .user-site-count { align-self: flex-start; }
    .user-site-search-row { align-items: stretch; flex-direction: column; }
    .user-site-selection-actions { display: grid; grid-template-columns: 1fr 1fr; }
}