/* Star River staff console. Same palette and type as the public /sr/ page. */
:root {
  --void:#08090b; --bg:#0c0d10; --panel:#111215; --panel-raised:#17181c;
  --line:rgba(255,255,255,.09); --paper:#e8e7e3; --paper-strong:#faf9f5;
  --muted:#a9a8a3; --dim:#7a7974;
  --green:#5fcf8f; --cyan:#9db7cf; --amber:#f39786; --amber-fill:#ed695b; --red:#f07b7b;
  --green-tint:rgba(95,207,143,.1); --cyan-tint:rgba(157,183,207,.1);
  --amber-tint:rgba(243,151,134,.1); --red-tint:rgba(240,123,123,.1);
  --radius:6px; --side-w:236px;
}
body { background:var(--bg); }
::selection { background:rgba(237,105,91,.35); }
:focus-visible { outline-color:var(--amber); }

/* sidebar */
.side { background:var(--void); padding:24px 14px 18px; border-right:1px solid var(--line); }
.side-brand { gap:12px; padding:0 8px 22px; border-bottom:1px solid var(--line); }
.side-brand img { width:34px; height:34px; }
.side-brand b { font-size:15px; font-weight:650; letter-spacing:.06em; }
.side-brand small { display:block; margin-top:4px; font-size:9px; letter-spacing:.14em; color:var(--dim); }
.side-nav { padding-top:18px; gap:2px; }
.nav-item { min-height:38px; padding:8px 12px; border-radius:4px; font-size:13.5px; font-weight:450; color:var(--muted); }
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--paper); }
.nav-item.is-active { background:rgba(237,105,91,.1); color:var(--paper-strong); box-shadow:inset 2px 0 var(--amber-fill); }
.nav-dot { width:5px; height:5px; border-radius:50%; background:var(--amber-fill); margin-left:auto; }
.side-foot { padding-top:18px; }
.me { padding-bottom:14px; }
.me small { font-size:9.5px; line-height:1.8; letter-spacing:.04em; color:var(--dim); }

/* page frame */
.main { padding:0 40px 56px; }
.demo-banner { margin:0 -40px 28px; padding:10px 40px; background:transparent; border-bottom:1px solid var(--line); color:var(--dim); font-size:10.5px; letter-spacing:.04em; }
.view-head { padding:6px 0 20px; margin:0 0 24px; border-bottom:1px solid var(--line); align-items:flex-end; }
.view-head h1 { font:650 28px/1.25 var(--font-body); letter-spacing:-.01em; color:var(--paper-strong); }
.view-head > .hint-line, .view-head + .hint-line { margin:0 0 20px; }
.view-intro { margin:8px 0 0; color:var(--muted); font-size:14px; }
.eyebrow { margin:0 0 10px; color:var(--amber); font:11px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.stamp { border-color:var(--line); color:var(--muted); font-size:9.5px; letter-spacing:.1em; }

/* cards */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:none; }
.card h2 { font-size:15.5px; font-weight:600; letter-spacing:0; }
.card h2::first-letter { text-transform:uppercase; }
.card-head-row { margin-bottom:16px; align-items:flex-start; }
.card-head-row > .btn, .card-head-row > .ghost-btn { flex:none; white-space:nowrap; }
.hint-line { margin:8px 0 0; font:13px/1.7 var(--font-body); letter-spacing:0; color:var(--muted); max-width:78ch; }
.empty-state { color:var(--dim); font-size:13.5px; }
.stat-card { border-top:0; }
.stat-card b, .stat-card strong { font-variant-numeric:tabular-nums; }

/* controls */
.btn { border:1px solid var(--amber-fill); background:var(--amber-fill); color:#15090a; border-radius:4px; font-weight:650; padding:9px 16px; box-shadow:none; }
.btn:hover { background:#ff8a7c; border-color:#ff8a7c; }
.btn:disabled, .btn[disabled] { background:transparent; border-color:var(--line); color:var(--dim); opacity:1; cursor:not-allowed; }
.btn-quiet { background:transparent; color:var(--paper); border-color:rgba(255,255,255,.18); }
.btn-quiet:hover { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.3); }
.ghost-btn { border-radius:4px; padding:7px 12px; color:var(--muted); background:transparent; border-color:rgba(255,255,255,.14); }
.ghost-btn:hover { color:var(--paper); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.03); }
.ghost-btn:disabled { opacity:.4; cursor:not-allowed; }
input,select,textarea { background:#0a0b0d !important; border-color:rgba(255,255,255,.14) !important; color:var(--paper) !important; border-radius:4px !important; }
input:focus,select:focus,textarea:focus { border-color:var(--amber) !important; outline:2px solid rgba(243,151,134,.16); outline-offset:0; }
input::placeholder, textarea::placeholder { color:#66655f; }
.stack-form label { font-size:11.5px; font-weight:600; letter-spacing:.06em; }
.stack-form input, .stack-form select { min-height:40px; padding:8px 12px; font:14px var(--font-body); }
.stack-form textarea { padding:10px 12px; font:14px/1.6 var(--font-body); }

/* tables and tags */
th { color:var(--dim); font:600 11px var(--font-body); letter-spacing:.04em; text-transform:uppercase; }
td { border-bottom-color:rgba(255,255,255,.06); }
.table tbody tr:hover td { background:rgba(255,255,255,.02); }
.tag { border-radius:3px; border-color:rgba(255,255,255,.12); }

/* sign-in */
.login-page { background:radial-gradient(ellipse at 20% 20%,rgba(237,105,91,.08),transparent 45%),var(--void); min-height:100vh; padding:48px 20px; }
.login-card { width:min(100%,440px); padding:36px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.login-card h1 { font:650 26px/1.25 var(--font-body); margin:28px 0 10px; color:var(--paper-strong); }
.login-brand { margin-bottom:8px; padding:0 0 22px; }
.login-card .stack-form { gap:16px; margin-top:24px; }
.login-card .btn { min-height:44px; }
.login-secondary { padding:10px 0; border-color:transparent; text-align:left; font-size:12.5px; color:var(--muted); }
.login-secondary:hover { color:var(--amber); border-color:transparent; background:transparent; }

/* subscription codes */
.code-workspace { display:grid; align-items:start; grid-template-columns:minmax(0,1.4fr) minmax(260px,.85fr); gap:24px; }
.code-workspace .card { margin-bottom:24px; }
.code-editor fieldset { padding:0; border:0; margin:0; min-width:0; }
.code-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.code-fields label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--muted); position:relative; }
.code-fields input,.code-fields select { width:100%; height:42px; padding:9px 12px; border:1px solid var(--line); font:14px var(--font-body); }
.code-wide { grid-column:1/-1; }
.field-note { position:absolute; right:0; top:0; color:var(--dim); font-size:10.5px; }
.code-editor .hint-line { margin:20px 0; }
#code-generate { width:100%; display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.code-server { color:var(--amber); background:var(--amber-tint); padding:3px 10px; border-radius:3px; font:11px var(--font-mono); }
.code-guide { background:var(--panel); }
.code-guide h2 { font:650 20px/1.35 var(--font-body); margin:6px 0 18px; }
.code-guide ol { padding-left:20px; color:var(--muted); font-size:13.5px; line-height:2.1; }
.code-guide li::marker { color:var(--amber); }
.redeem-example { padding:16px 0; margin-top:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.redeem-example span { display:block; font-size:11.5px; color:var(--dim); margin-bottom:8px; }
.redeem-example code { color:var(--amber); font-size:14px; }
.code-output .inline-actions { display:flex; gap:8px; }
.code-output .inline-actions .ghost-btn { flex:initial; }
#code-status { color:var(--muted); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
#code-results { margin:20px 0; }
.issued-code { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); }
.issued-code code { color:var(--amber); font-size:17px; letter-spacing:.07em; user-select:all; }
.issued-code small { color:var(--dim); font:10px var(--font-mono); }
.code-item-help { color:var(--dim); font-size:11.5px; line-height:1.5; }
.code-label-line { display:inline-flex; align-items:baseline; gap:6px; }
.code-unit { color:var(--dim); font-size:10.5px; }
.code-config-guide { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); min-width:0; }
.code-config-guide h3 { margin:0 0 12px; font-size:15px; font-weight:600; }
.code-config-guide p { font-size:12.5px; line-height:1.75; color:var(--muted); margin:10px 0; }
.code-config-guide details { margin-top:16px; }
.code-config-guide summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--paper-strong); }
.code-config-guide .code-config-path { overflow-wrap:anywhere; font-size:10.5px; }
.code-config-guide pre { margin:10px 0; padding:12px; border:1px solid var(--line); border-radius:4px; background:var(--void); overflow-x:auto; font-size:11.5px; line-height:1.65; }
.code-config-guide code { color:#e2c7bf; }
.code-config-guide .code-config-note { padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; }

@media(max-width:1100px) { .main { padding:0 24px 32px; }.demo-banner { margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; }.code-workspace { grid-template-columns:1fr; } }
@media(max-width:720px) { :root { --side-w:190px; }.view-head h1 { font-size:24px; }.card { padding:18px; }.side { padding:18px 10px; }.side-brand { padding-bottom:18px; }.main { padding:0 16px 24px; }.demo-banner { margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px; }.code-fields { gap:16px 14px; }.stamp { white-space:normal; }.login-card { padding:26px; }.code-output .card-head-row { align-items:flex-start;flex-direction:column; } }
@media(max-width:520px) { .shell { display:block; }.side { position:relative; width:100%;height:auto; }.side-nav { display:flex;flex-direction:row;overflow:auto;flex-wrap:nowrap;padding:12px 0; }.nav-item { white-space:nowrap;flex-shrink:0; }.side-brand { border:0;padding-bottom:8px; }.side-foot { padding-top:12px; }.code-fields { grid-template-columns:1fr; }.main { padding-top:20px; }.demo-banner { margin-top:-20px; }.code-guide { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; } }
