:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #070b16; color: #eef4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(63, 131, 248, 0.24), transparent 34rem), radial-gradient(circle at bottom right, rgba(52, 211, 153, 0.14), transparent 28rem), #070b16; }
.app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; width: min(1700px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0; }
.left-rail, .hero, .card { border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(15, 23, 42, 0.74); box-shadow: 0 24px 90px rgba(0,0,0,0.22); backdrop-filter: blur(14px); }
.left-rail { position: sticky; top: 14px; height: calc(100vh - 28px); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #38bdf8, #34d399); color: #062235; font-weight: 950; }
.brand small { display: block; color: #94a3b8; margin-top: 2px; }
.workspace-shell { min-width: 0; }
.hero { padding: 26px; border-radius: 28px; }
.hero.compact h1 { font-size: clamp(2rem, 5vw, 4.4rem); }
.eyebrow { margin: 0 0 12px; color: #67e8f9; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; font-weight: 800; }
h1 { margin: 0; line-height: 0.95; }
.lede { max-width: 1040px; color: #cbd5e1; font-size: 1.02rem; line-height: 1.6; }
.pill { display: inline-block; padding: 9px 13px; border-radius: 999px; background: rgba(14,165,233,0.18); color: #bae6fd; font-weight: 700; }
.ok-pill { background: rgba(16,185,129,0.18); color: #bbf7d0; }
.degraded-pill { background: rgba(245,158,11,0.18); color: #fde68a; }
.tabs { display: grid; gap: 7px; }
.tabs button { width: 100%; text-align: left; background: rgba(15,23,42,0.82); color: #dbeafe; border: 1px solid rgba(147,197,253,0.18); }
.tabs button.active { background: #38bdf8; color: #082f49; }
.rail-actions { margin-top: auto; display: grid; gap: 8px; }
.page { display: none; }
.page.active { display: block; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.status-card { border: 1px solid rgba(148,163,184,0.2); background: rgba(2,6,23,0.48); border-radius: 18px; padding: 14px; display: grid; gap: 8px; min-height: 108px; }
.status-card span { width: fit-content; border-radius: 999px; padding: 4px 8px; font-weight: 850; font-size: 0.78rem; background: rgba(148,163,184,0.18); }
.status-card.ok span { background: rgba(16,185,129,0.18); color: #bbf7d0; }
.status-card.degraded span, .status-card.needs-token span { background: rgba(245,158,11,0.2); color: #fde68a; }
.status-card small { color: #94a3b8; line-height: 1.4; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-top: 18px; }
.card { border-radius: 22px; padding: 22px; overflow: hidden; }
.card.wide { grid-column: 1 / -1; }
.login-card { margin-top: 18px; }
h2 { margin: 0 0 12px; font-size: 1.04rem; color: #bfdbfe; }
.muted { color: #94a3b8; line-height: 1.5; }
.panel-body, pre { white-space: pre-wrap; word-break: break-word; margin: 0; color: #d1fae5; font-size: 0.84rem; line-height: 1.45; max-height: 560px; overflow: auto; border-radius: 16px; padding: 12px; background: rgba(2,6,23,0.54); border: 1px solid rgba(148,163,184,0.12); }
.panel-body.ok { border-color: rgba(52,211,153,0.38); }
.panel-body.degraded { color: #fde68a; border-color: rgba(245,158,11,0.45); }
.panel-body.error { color: #fecaca; border-color: rgba(248,113,113,0.45); }
.panel-body.loading { color: #bfdbfe; }
.panel-body.empty { color: #c4b5fd; border-color: rgba(196,181,253,0.36); }
.panel-body.login-required, .panel-body.admin-required { color: #c4b5fd; }
form { display: grid; gap: 12px; max-width: 520px; }
.grid-form { max-width: 980px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: end; }
.inline-form { max-width: none; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; margin-bottom: 12px; }
label { display: grid; gap: 6px; color: #cbd5e1; font-weight: 650; }
label.checkbox { display: flex; align-items: center; gap: 8px; }
input, select, textarea { border: 1px solid rgba(148,163,184,0.35); border-radius: 12px; padding: 10px 12px; background: rgba(2,6,23,0.9); color: #fff; font: inherit; min-width: 0; }
textarea { grid-column: 1 / -1; }
button { width: fit-content; border: 0; border-radius: 12px; padding: 10px 16px; background: #38bdf8; color: #082f49; font-weight: 850; cursor: pointer; }
button.secondary { background: rgba(148,163,184,0.18); color: #e2e8f0; border: 1px solid rgba(148,163,184,0.24); }
button:hover { filter: brightness(1.08); }
@media (max-width: 960px) { .app-shell { grid-template-columns: 1fr; width: min(100% - 18px, 1440px); } .left-rail { position: relative; top: 0; height: auto; } .tabs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .rail-actions { display: flex; flex-wrap: wrap; } }
@media (max-width: 640px) { .cards, .status-grid { grid-template-columns: 1fr; } .hero, .card, .left-rail { padding: 16px; border-radius: 20px; } .inline-form { grid-template-columns: 1fr; } }