:root { color-scheme: dark; --bg:#080c14; --surface:#141d2d; --line:rgba(148,163,184,.17); --text:#f4f7fb; --muted:#95a3b8; --blue:#3b82f6; --cyan:#22d3ee; --green:#36d399; --orange:#fbbf24; --red:#fb7185; --radius:18px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 30% -10%,#172554 0,transparent 34%),var(--bg); color:var(--text); } button,input,select { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.ambient { position:fixed; width:420px; height:420px; border-radius:50%; filter:blur(110px); opacity:.12; pointer-events:none; } .ambient-one { background:var(--blue); top:20%; left:-280px; } .ambient-two { background:var(--cyan); right:-300px; bottom:5%; }
.topbar { position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; height:76px; padding:0 max(24px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:rgba(8,12,20,.82); backdrop-filter:blur(20px); }
.brand { display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none; } .brand-mark { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(96,165,250,.5); border-radius:12px; background:linear-gradient(145deg,rgba(59,130,246,.35),rgba(34,211,238,.08)); font-weight:800; } .brand strong,.brand small { display:block; } .brand small { color:var(--muted); font-size:11px; margin-top:2px; } .top-actions { display:flex; align-items:center; gap:10px; }
main { width:min(1240px,calc(100% - 40px)); margin:0 auto; } .auth-shell { min-height:calc(100vh - 145px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.7fr); gap:8vw; align-items:center; padding:70px 0; }
.hero-copy h1,.dashboard-head h1 { margin:6px 0 18px; font-size:clamp(40px,5.2vw,72px); line-height:.99; letter-spacing:-.055em; max-width:780px; } .dashboard-head h1 { font-size:clamp(34px,4vw,54px); } .lead { max-width:670px; color:#bdc7d8; font-size:19px; line-height:1.65; } .eyebrow { margin:0; color:#7dd3fc; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.trust-note { display:flex; flex-direction:column; gap:4px; margin-top:32px; padding-left:16px; border-left:2px solid var(--cyan); color:var(--muted); } .trust-note strong { color:var(--text); }
.card { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(24,34,53,.9),rgba(12,18,30,.88)); box-shadow:0 30px 80px rgba(0,0,0,.28); backdrop-filter:blur(18px); } .auth-card { padding:28px; }
.tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:24px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.2); } .tab { padding:11px 12px; color:var(--muted); border:0; border-radius:9px; background:transparent; } .tab.active { color:var(--text); background:var(--surface); box-shadow:0 4px 15px rgba(0,0,0,.25); }
.form-stack,.form-grid { display:grid; gap:16px; } .form-grid { grid-template-columns:1fr 1fr; } .full { grid-column:1/-1; } label { display:grid; gap:7px; color:#ced6e2; font-size:13px; font-weight:650; } label small,.fine-print,.flow-step small,.social-grid small,.entitlement small { display:block; color:var(--muted); font-size:11px; font-weight:450; line-height:1.5; }
input,select { width:100%; padding:12px 13px; color:var(--text); border:1px solid rgba(148,163,184,.22); border-radius:10px; outline:0; background:rgba(6,10,18,.72); } input:focus,select:focus { border-color:rgba(59,130,246,.8); box-shadow:0 0 0 3px rgba(59,130,246,.14); } code { color:#bae6fd; font-size:.9em; }
.button { padding:11px 16px; border:1px solid transparent; border-radius:10px; color:var(--text); background:transparent; font-weight:750; transition:.14s ease; } .button:hover { transform:translateY(-1px); } .button:disabled { cursor:not-allowed; opacity:.5; transform:none; } .button.primary { background:linear-gradient(135deg,#2563eb,#0891b2); box-shadow:0 12px 26px rgba(37,99,235,.22); } .button.secondary { border-color:rgba(96,165,250,.35); background:rgba(37,99,235,.1); } .button.ghost { color:var(--muted); border-color:var(--line); } .button.danger { border-color:rgba(251,113,133,.4); background:rgba(190,24,93,.12); } .button.wide { width:100%; margin-top:4px; } .button.small { padding:7px 10px; font-size:12px; }
.message { min-height:19px; margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.5; } .message.error { color:#fda4af; } .message.success { color:#6ee7b7; }
.dashboard { padding:52px 0 80px; } .dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:26px; } .dashboard-head p:not(.eyebrow) { color:var(--muted); } .compact { display:flex; align-items:center; gap:12px; min-width:240px; padding:16px 18px; } .status-dot { width:10px; height:10px; border-radius:50%; box-shadow:0 0 16px currentColor; } .status-dot.good { color:var(--green); background:var(--green); }
.warning-banner { display:flex; gap:12px; margin-bottom:18px; padding:15px 18px; border:1px solid rgba(251,191,36,.22); border-radius:12px; color:#c9d1de; background:rgba(120,53,15,.12); font-size:13px; } .warning-banner strong { flex:0 0 auto; color:#fde68a; }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .panel { padding:22px; } .full-width { grid-column:1/-1; } .panel-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; } .panel-title h2 { margin:4px 0 0; font-size:21px; letter-spacing:-.025em; }
.icon-chip,.social-icon { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(96,165,250,.3); border-radius:11px; color:#bae6fd; background:rgba(59,130,246,.08); font-size:12px; font-weight:850; } .badge { display:inline-flex; align-items:center; padding:6px 9px; border:1px solid var(--line); border-radius:999px; font-size:10px; font-weight:750; letter-spacing:.04em; } .badge.good { color:#86efac; border-color:rgba(74,222,128,.3); background:rgba(22,163,74,.1); } .badge.caution { color:#fde68a; border-color:rgba(251,191,36,.3); background:rgba(180,83,9,.1); } .badge.bad { color:#fda4af; border-color:rgba(251,113,133,.3); background:rgba(190,24,93,.1); } .badge.neutral { color:#bac7d8; }
.details { margin:0; } .details div { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); } .details dt { color:var(--muted); font-size:12px; } .details dd { margin:0; overflow-wrap:anywhere; font-size:13px; font-weight:700; }
.console-list { display:grid; gap:10px; } .console-item { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.13); } .console-item input[type=checkbox] { width:18px; height:18px; accent-color:var(--blue); } .console-item strong,.console-item small { display:block; } .console-item small { margin-top:3px; color:var(--muted); font-size:11px; } .probe-result { min-width:100px; color:var(--muted); font-size:11px; text-align:right; } .empty-state { padding:20px; color:var(--muted); border:1px dashed var(--line); border-radius:12px; text-align:center; }
.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:9px; } .flow-step { display:flex; align-items:center; gap:11px; min-height:78px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.12); } .flow-step>span { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; color:#bfdbfe; background:rgba(37,99,235,.2); font-size:11px; font-weight:800; } .flow-step strong { display:block; margin-bottom:4px; font-size:12px; } .flow-arrow { color:#4b5e79; font-size:24px; } .action-row { display:flex; align-items:center; gap:10px; margin-top:18px; } .action-row .message { margin:0 0 0 4px; }
.provision-panel>p { color:#bdc7d8; font-size:13px; line-height:1.6; } .provision-panel label { margin:14px 0; } .job-list { max-height:390px; overflow:auto; } .job { padding:12px 0; border-bottom:1px solid var(--line); } .job:last-child { border-bottom:0; } .job-head { display:flex; justify-content:space-between; gap:10px; align-items:center; } .job-head strong { font-size:12px; text-transform:capitalize; } .job pre { max-height:190px; overflow:auto; margin:9px 0 0; padding:10px; border-radius:9px; color:#a8b7ca; background:#070b12; font:10px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.social-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } .social-grid>div { display:grid; justify-items:center; gap:7px; padding:15px 10px; border:1px solid var(--line); border-radius:12px; text-align:center; opacity:.7; } .social-grid strong { font-size:12px; } footer { padding:22px; color:#64748b; border-top:1px solid var(--line); font-size:11px; text-align:center; }
.disabled-state { opacity:.76; } .token-output { display:grid; gap:8px; margin:14px 0 24px; padding:14px; border:1px solid rgba(34,211,238,.28); border-radius:10px; background:rgba(8,145,178,.08); } .token-output strong { font-size:12px; } .token-output code { overflow-wrap:anywhere; user-select:all; } .user-list-title { margin-top:28px; } .admin-users { display:grid; gap:9px; } .admin-user { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.13); } .admin-user strong,.admin-user small { display:block; overflow-wrap:anywhere; } .admin-user small { margin-top:4px; color:var(--muted); font-size:11px; } .admin-actions { display:flex; gap:8px; flex:0 0 auto; }
.launch-actions { display:flex; gap:10px; margin-top:18px; } .launch-actions .button.primary { flex:1; }
@media(max-width:920px){.auth-shell{grid-template-columns:1fr;gap:40px}.dashboard-head{align-items:start;flex-direction:column}.dashboard-grid{grid-template-columns:1fr}.full-width{grid-column:auto}.flow{grid-template-columns:1fr}.flow-arrow{display:none}.social-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){main{width:min(100% - 24px,1240px)}.topbar{padding:0 12px}.brand small,#releaseBadge{display:none}.auth-shell{padding:35px 0}.auth-card,.panel{padding:17px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.console-item{grid-template-columns:auto 1fr}.console-item .button,.probe-result{grid-column:2;text-align:left}.action-row,.launch-actions{align-items:stretch;flex-direction:column}.warning-banner{flex-direction:column}.social-grid{grid-template-columns:1fr 1fr}}