:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg:#f5f5f7; --panel:#fff; --card:#fff; --card-hover:#eff0f3; --input-bg:#fff;
  --border:#d8dbe1; --border-hover:#a4a7b0; --border-active:#0063d1;
  --fg:#1d1d1f; --fg-dim:#63666e; --fg-muted:#63666e;
  --primary:#0063d1; --primary-hover:#0057b8; --primary-soft:#e8f1ff;
  --success:#167340; --success-bg:#e7f5eb; --warn:#865300; --warn-bg:#fff5da;
  --danger:#b4232d; --danger-bg:#ffeded;
  --radius:10px; --radius-sm:7px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:var(--font-sans);
  --text-dim:var(--fg-dim);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#161618; --panel:#1e1e21; --card:#1e1e21; --card-hover:#28282c; --input-bg:#1e1e21;
  --border:#3e3f46; --border-hover:#63666e; --border-active:#70b0ff;
  --fg:#f5f5f7; --fg-dim:#a4a7b0; --fg-muted:#a4a7b0;
  --primary:#70b0ff; --primary-hover:#96c5ff; --primary-soft:#1d2f45;
  --success:#73d59a; --success-bg:#1c3325; --warn:#ebc068; --warn-bg:#372e1c;
  --danger:#ff959a; --danger-bg:#3e1f23;
}
body { max-width:1440px; padding:24px 32px 64px; min-height:100dvh; font-size:14px; }
h1,h2,h3 { text-wrap:balance; letter-spacing:normal !important; }
p { text-wrap:pretty; }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
input:focus,select:focus,textarea:focus { background:var(--input-bg); border-color:var(--primary); box-shadow:none; }
input::placeholder,textarea::placeholder { color:var(--fg-dim); }
input,select,textarea { min-height:38px; font-size:13px; }
.app-header { padding:20px 24px 12px; border-radius:12px; box-shadow:none; margin-bottom:32px; gap:20px; }
.brand-logo { background:var(--fg); color:var(--panel); border-radius:8px; width:32px; height:32px; font-size:22px; box-shadow:none; }
.brand-title h1 { font-size:19px; }
.brand-caption { font-size:12px; color:var(--fg-dim); }
.appearance-control { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-dim); }
.appearance-control select { width:auto; padding:6px 10px; }
.nav-tabs { gap:4px; }
.tab-btn { min-height:38px; padding:8px 12px; }
.tab-btn.active { color:var(--primary); background:var(--primary-soft); border-color:transparent; box-shadow:none; }
.btn-primary { background:#0063d1; color:#fff; }
.btn-primary:hover { background:#0057b8; box-shadow:none; }
.btn-primary,.btn-secondary,.btn-danger,.btn-success { min-height:36px; font-weight:500; }
.section-title h2 { font-size:28px; font-weight:650; }
.section-title { margin-bottom:6px; }
.panel-desc { font-size:13px; line-height:1.6; }
.panel-card,.kpi-card { border-color:var(--border) !important; box-shadow:none; border-radius:12px; padding:20px; }
.kpi-grid { gap:16px; }
.kpi-card { min-height:110px; }
.kpi-value { color:var(--fg) !important; font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; }
.kpi-label { text-transform:none; letter-spacing:normal; font-size:12px; color:var(--fg-dim); }
.kpi-warn { background:var(--card); }
.badge-live { text-transform:none; letter-spacing:normal; font-family:var(--font-sans); font-weight:500; }
.pulse { animation:none; box-shadow:none; }
.data-table { font-variant-numeric:tabular-nums; }
.data-table th { background:var(--bg); text-transform:none; font-weight:500; letter-spacing:normal; color:var(--fg-dim); }
.data-table th,.data-table td { padding:14px 16px; }
.data-table tr:hover { background:var(--card-hover); }
.table-container { border:1px solid var(--border); border-radius:9px; }
pre,code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.cm-modal,.cm-overlay { animation:none; }
.user-autocomplete-dropdown { background:var(--panel); box-shadow:0 4px 12px rgb(0 0 0 / .12); }
.custom-modal-card h3,.modal-card h3 { color:var(--fg) !important; }
.view-panel :is(h1,h2,h3,h4,div)[style*="color: white"],
.custom-modal-card :is(h1,h2,h3,h4,div)[style*="color: white"] { color:var(--fg) !important; }
.custom-modal-card input,.modal-card input { background:var(--input-bg) !important; color:var(--fg) !important; }
.custom-modal-card label,.modal-card label { text-transform:none !important; font-size:13px !important; }
@media(max-width:700px) {
 body { padding:16px 12px 40px; }
 .app-header { padding:16px; }
 .header-top-row { align-items:flex-start; }
 .auth-bar { gap:8px; width:100%; }
 .nav-tabs { flex-wrap:nowrap; }
 .section-title h2 { font-size:24px; }
 .panel-card { padding:16px; }
 .appearance-control { width:100%; }
 .table-container { overflow-x:auto; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
:root { --admin-sidebar-width: 216px; }
.jokr-logo { object-fit: contain; flex-shrink: 0; }
.jokr-coin { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
body .app-header { padding: 0; position: sticky; top: 0; z-index: 30; }
body .header-top-row { min-height: 76px; margin: 0; padding: 16px 24px; }
body .nav-tabs-wrapper { position: fixed; left: 0; top: 77px; bottom: 0; width: var(--admin-sidebar-width); padding: 14px 12px; border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; }
body .nav-tabs { display: flex; flex-direction: column; gap: 4px; overflow: visible; }
body .nav-tabs .tab-btn { width: 100%; min-height: 42px; margin: 0; padding: 10px 12px; justify-content: flex-start; text-align: left; border-radius: 6px; border: 0; }
.nav-group-label { padding: 18px 12px 6px; color: var(--fg-dim); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
body .view-panel { margin-left: var(--admin-sidebar-width); max-width: none; padding: 28px; }
body #admin-capacity-alert-banner { margin-left: calc(var(--admin-sidebar-width) + 28px) !important; }
.admin-get-started { border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 20px; margin-bottom: 28px; }
.admin-get-started h2 { font-size: 20px; margin: 0 0 6px; }
.admin-get-started p { font-size: 13px; color: var(--fg-dim); }
.admin-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.token-wrap summary { color: var(--fg-dim); font-size: 12px; cursor: pointer; padding: 8px; }
.token-wrap[open] #token { min-width: 180px; }
body .kpi-value { font-size: 24px; }
body .panel-card { border-radius: 10px; }
body .data-table th { text-transform: none; letter-spacing: 0; font-size: 12px; }
@media(max-width:900px) {
  body .header-top-row { flex-wrap: wrap; gap: 12px; }
  body .nav-tabs-wrapper { position: static; width: 100%; padding: 8px 12px; overflow-x: auto; border-right: 0; border-top: 1px solid var(--border); }
  body .nav-tabs { flex-direction: row; width: max-content; }
  body .nav-tabs .tab-btn { width: auto; white-space: nowrap; }
  .nav-group-label { display: none; }
  body .view-panel { margin-left: 0; padding: 16px; }
  body #admin-capacity-alert-banner { margin-left: 16px !important; }
  body .auth-bar { flex-wrap: wrap; }
}
:root[data-theme="dark"] .jokr-logo { background: #eef3fb; border-radius: 6px; padding: 3px; }
body { padding: 0; }
body .app-header { margin: 0; border-radius: 0; }
@media(max-width:900px) {
  body .auth-bar .appearance-control { width: auto; }
  body .header-top-row { padding: 12px 16px; }
}