:root {
  --bg: #0a0a0a;
  --bg-1: #111111;
  --bg-2: #161616;
  --bg-3: #1c1c1c;
  --bg-input: #1a1a1a;
  --border: rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.13);
  --border-hi: rgba(255,255,255,0.22);
  --text: #f0f0ee;
  --text-2: #8a8a86;
  --text-3: #525250;
  --gold: #c8a96e;
  --gold-dim: rgba(200,169,110,0.14);
  --gold-glow: rgba(200,169,110,0.07);
  --green: #4caf7d;
  --green-dim: rgba(76,175,125,0.12);
  --red: #e05a4f;
  --red-dim: rgba(224,90,79,0.12);
  --amber: #e09a3a;
  --amber-dim: rgba(224,154,58,0.12);
  --blue: #5b8dee;
  --blue-dim: rgba(91,141,238,0.12);
  --r: 8px;
  --r-lg: 12px;
  --sidebar: 228px;
  --header: 54px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5; overflow-x:hidden; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-md); border-radius:2px; }
a { color:var(--gold); text-decoration:none; }

/* ── AUTH ── */
#auth-screen { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:2rem; background:var(--bg); }
.auth-box { width:100%; max-width:420px; }
.auth-logo { margin-bottom:2.5rem; }
.auth-logo-mark { font-size:12px; letter-spacing:.14em; color:var(--text-3); text-transform:uppercase; margin-bottom:.3rem; }
.auth-logo-mark span { color:var(--gold); }
.auth-logo-title { font-size:26px; font-weight:300; color:var(--text); }
.auth-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem; }
.auth-error { background:var(--red-dim); border:1px solid rgba(224,90,79,.25); border-radius:var(--r); padding:.65rem 1rem; font-size:13px; color:var(--red); margin-bottom:1rem; display:none; }
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:12px; color:var(--text-2); margin-bottom:.4rem; letter-spacing:.04em; }
.form-input { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r); padding:.65rem .9rem; color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--gold); }
.form-input::placeholder { color:var(--text-3); }
.form-select { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r); padding:.65rem .9rem; color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; outline:none; cursor:pointer; }
.form-select:focus { border-color:var(--gold); }
.btn-primary { width:100%; background:var(--gold); color:#0a0a0a; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; padding:.75rem 1.5rem; border-radius:var(--r); border:none; cursor:pointer; transition:opacity .15s; margin-top:.5rem; }
.btn-primary:hover { opacity:.88; }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.btn-ghost { background:transparent; border:1px solid var(--border-md); color:var(--text-2); font-family:'DM Sans',sans-serif; font-size:13px; padding:.55rem 1.1rem; border-radius:var(--r); cursor:pointer; transition:all .15s; }
.btn-ghost:hover { border-color:var(--border-hi); color:var(--text); }
.btn-sm { background:transparent; border:1px solid var(--border); color:var(--text-2); font-family:'DM Sans',sans-serif; font-size:12px; padding:4px 12px; border-radius:var(--r); cursor:pointer; transition:all .15s; white-space:nowrap; }
.btn-sm:hover { border-color:var(--border-md); color:var(--text); }
.btn-accent { background:var(--gold); border-color:var(--gold); color:#0a0a0a; font-weight:500; }
.btn-accent:hover { opacity:.88; color:#0a0a0a; }
.btn-danger { background:var(--red-dim); border:1px solid rgba(224,90,79,.3); color:var(--red); }
.btn-danger:hover { background:rgba(224,90,79,.2); }

/* ── NDA SCREEN ── */
#nda-screen { display:none; min-height:100vh; align-items:center; justify-content:center; padding:2rem; background:var(--bg); }
.nda-box { width:100%; max-width:640px; }
.nda-scroll { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.5rem; max-height:300px; overflow-y:auto; font-size:12px; color:var(--text-2); line-height:1.9; margin-bottom:1.5rem; }
.nda-scroll h4 { color:var(--text); font-size:13px; font-weight:500; margin-bottom:.4rem; margin-top:1rem; }
.nda-scroll h4:first-child { margin-top:0; }
.check-row { display:flex; gap:.75rem; margin-bottom:.75rem; align-items:flex-start; }
.check-row input[type=checkbox] { margin-top:3px; accent-color:var(--gold); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.check-label { font-size:13px; color:var(--text-2); cursor:pointer; line-height:1.5; }

/* ── APP SHELL ── */
#app { display:none; }
.app-header { position:fixed; top:0; left:0; right:0; height:var(--header); background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 1.25rem; z-index:200; gap:1rem; }
.hdr-logo { font-size:11px; letter-spacing:.14em; color:var(--text-3); text-transform:uppercase; user-select:none; }
.hdr-logo span { color:var(--gold); }
.hdr-product { font-size:13px; font-weight:500; color:var(--text); border-left:1px solid var(--border); padding-left:1rem; }
.hdr-client { font-size:13px; color:var(--text-2); border-left:1px solid var(--border); padding-left:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.hdr-spacer { flex:1; }
.hdr-mode-pill { display:flex; gap:2px; background:var(--bg-2); border:1px solid var(--border); border-radius:20px; padding:3px; }
.mode-btn { padding:4px 14px; border-radius:16px; font-size:12px; font-weight:500; cursor:pointer; color:var(--text-3); background:transparent; border:none; transition:all .15s; font-family:'DM Sans',sans-serif; }
.mode-btn.active { background:var(--gold); color:#0a0a0a; }
.mode-btn:disabled { opacity:.3; cursor:not-allowed; }
.hdr-role { font-size:12px; color:var(--text-2); padding:4px 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); white-space:nowrap; }
.hdr-avatar { width:28px; height:28px; border-radius:50%; background:var(--gold-dim); border:1px solid rgba(200,169,110,.3); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:500; color:var(--gold); flex-shrink:0; cursor:pointer; }

/* ── SIDEBAR ── */
.sidebar { position:fixed; top:var(--header); left:0; width:var(--sidebar); bottom:0; background:var(--bg); border-right:1px solid var(--border); overflow-y:auto; z-index:100; padding:.75rem 0 2rem; }
.sidebar-section { margin-bottom:.25rem; }
.sidebar-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding:.5rem 1.25rem .2rem; font-weight:500; }
.nav-item { display:flex; align-items:center; gap:10px; padding:.55rem 1.25rem; cursor:pointer; color:var(--text-3); font-size:13px; border-left:2px solid transparent; transition:all .15s; user-select:none; }
.nav-item:hover { color:var(--text-2); background:var(--gold-glow); }
.nav-item.active { color:var(--text); background:var(--gold-glow); border-left-color:var(--gold); }
.nav-icon { width:15px; height:15px; flex-shrink:0; opacity:.5; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity:.8; }
.nav-divider { height:1px; background:var(--border); margin:.65rem 1.25rem; }
.nav-role-tag { font-size:10px; background:var(--gold-dim); color:var(--gold); padding:1px 6px; border-radius:3px; margin-left:auto; }

/* ── MAIN CONTENT ── */
.main { margin-left:var(--sidebar); margin-top:var(--header); padding:1.75rem 2rem; min-height:calc(100vh - var(--header)); }
.page { display:none; animation:fadeIn .18s ease; }
.page.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── PAGE HEAD ── */
.page-head { margin-bottom:1.75rem; }
.page-head-row { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.page-title { font-size:21px; font-weight:300; color:var(--text); }
.page-sub { font-size:12px; color:var(--text-3); margin-top:2px; }
.page-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.date-tag { font-size:11px; color:var(--text-3); font-family:'DM Mono',monospace; }

/* ── KPI GRID ── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.85rem; margin-bottom:1.5rem; }
.kpi-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.1rem 1.2rem; transition:border-color .15s; }
.kpi-card:hover { border-color:var(--border-md); }
.kpi-lbl { font-size:10px; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; font-weight:500; margin-bottom:.45rem; }
.kpi-val { font-size:24px; font-weight:300; color:var(--text); margin-bottom:.2rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kpi-delta { font-size:11px; display:flex; align-items:center; gap:3px; }
.delta-up { color:var(--green); }
.delta-down { color:var(--red); }
.delta-flat { color:var(--text-3); }
.kpi-bar { height:2px; background:var(--border); border-radius:1px; margin-top:.65rem; overflow:hidden; }
.kpi-bar-fill { height:100%; border-radius:1px; }

/* ── CHART CARDS ── */
.chart-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:.85rem; }
.chart-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem; margin-bottom:.85rem; }
.chart-grid-main { display:grid; grid-template-columns:2fr 1fr; gap:.85rem; margin-bottom:.85rem; }
.chart-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; }
.chart-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.1rem; gap:.5rem; }
.chart-title { font-size:13px; font-weight:500; color:var(--text); }
.chart-sub { font-size:11px; color:var(--text-3); margin-top:2px; }
.chart-legend { display:flex; gap:10px; flex-wrap:wrap; }
.leg-item { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-2); white-space:nowrap; }
.leg-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }

/* ── ALERTS ── */
.alert-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; }
.alert-item { display:flex; gap:.75rem; padding:.8rem 1rem; border-radius:var(--r); border:1px solid transparent; background:var(--bg-2); }
.alert-item.crit { border-color:rgba(224,90,79,.2); background:var(--red-dim); }
.alert-item.warn { border-color:rgba(224,154,58,.2); background:var(--amber-dim); }
.alert-item.info { border-color:rgba(91,141,238,.2); background:var(--blue-dim); }
.alert-dot-wrap { padding-top:4px; }
.a-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.alert-item.crit .a-dot { background:var(--red); }
.alert-item.warn .a-dot { background:var(--amber); }
.alert-item.info .a-dot { background:var(--blue); }
.a-title { font-size:13px; font-weight:500; color:var(--text); margin-bottom:2px; }
.a-desc { font-size:12px; color:var(--text-2); line-height:1.5; }

/* ── TABLES ── */
.table-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:.85rem; }
.table-head-row { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.1rem; border-bottom:1px solid var(--border); }
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:.6rem 1rem; text-align:left; font-size:10px; font-weight:500; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--border); background:var(--bg-1); white-space:nowrap; }
.data-table td { padding:.7rem 1rem; font-size:13px; color:var(--text-2); border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,.02); color:var(--text); }
.mono { font-family:'DM Mono',monospace; font-size:12px; }
.gold-text { color:var(--gold); }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.text-amber { color:var(--amber); }
.text-muted { color:var(--text-3); }
.text-primary { color:var(--text) !important; }
.num { text-align:right; font-variant-numeric:tabular-nums; font-family:'DM Mono',monospace; }

/* ── PILLS / STATUS ── */
.pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500; white-space:nowrap; }
.p-green { background:var(--green-dim); color:var(--green); }
.p-red   { background:var(--red-dim);   color:var(--red);   }
.p-amber { background:var(--amber-dim); color:var(--amber); }
.p-blue  { background:var(--blue-dim);  color:var(--blue);  }
.p-gold  { background:var(--gold-dim);  color:var(--gold);  }
.p-muted { background:rgba(255,255,255,.05); color:var(--text-3); }

/* ── PROGRESS ROWS ── */
.prog-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.65rem; }
.prog-label { font-size:12px; color:var(--text-2); min-width:160px; }
.prog-bar { flex:1; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.prog-fill { height:100%; border-radius:2px; }
.prog-val { font-size:12px; font-family:'DM Mono',monospace; color:var(--text-3); min-width:36px; text-align:right; }

/* ── LISTING TILES ── */
.listing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:.65rem; }
.listing-tile { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); padding:.9rem 1rem; cursor:pointer; transition:border-color .15s; }
.listing-tile:hover { border-color:var(--border-md); }
.listing-tile.t-issue { border-color:rgba(224,90,79,.3); }
.listing-tile.t-warn  { border-color:rgba(224,154,58,.3); }
.listing-asin { font-family:'DM Mono',monospace; font-size:10px; color:var(--gold); margin-bottom:.2rem; }
.listing-name { font-size:12px; color:var(--text); line-height:1.4; margin-bottom:.45rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.listing-score-num { font-size:20px; font-weight:300; margin-bottom:.2rem; }
.listing-meta { font-size:11px; color:var(--text-3); }

/* ── TABS ── */
.tab-row { display:flex; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }
.tab-btn { padding:.6rem 1.1rem; font-size:13px; color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none; font-family:'DM Sans',sans-serif; transition:all .15s; }
.tab-btn:hover { color:var(--text-2); }
.tab-btn.active { color:var(--text); border-bottom-color:var(--gold); }

/* ── ADMIN ── */
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.admin-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; }
.admin-card-title { font-size:14px; font-weight:500; margin-bottom:1rem; }
.client-row { display:flex; align-items:center; gap:.75rem; padding:.65rem .75rem; background:var(--bg-3); border-radius:var(--r); margin-bottom:.4rem; }
.client-row-name { flex:1; font-size:13px; font-weight:500; }
.client-row-meta { font-size:11px; color:var(--text-3); }
.client-actions { display:flex; gap:.4rem; }

/* ── TRANSPARENCY / BRAND ── */
.transparency-rec { background:var(--gold-glow); border:1px solid rgba(200,169,110,.2); border-radius:var(--r); padding:1rem; }
.tr-icon { color:var(--gold); font-size:15px; margin-bottom:.4rem; }

/* ── UPLOAD ZONE ── */
.upload-zone { border:1px dashed var(--border-md); border-radius:var(--r-lg); padding:2rem; text-align:center; cursor:pointer; transition:all .18s; }
.upload-zone:hover { border-color:var(--gold); background:var(--gold-glow); }
.upload-file-item { display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; background:var(--bg-2); border-radius:var(--r); margin-top:.4rem; font-size:13px; border:1px solid var(--border); }

/* ── ROLE-LOCKED STATE ── */
.locked-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; text-align:center; color:var(--text-3); }
.locked-state-icon { font-size:32px; margin-bottom:1rem; opacity:.3; }
.locked-state-title { font-size:16px; font-weight:400; color:var(--text-2); margin-bottom:.5rem; }
.locked-state-sub { font-size:13px; max-width:300px; }

/* ── SECTION HEAD ── */
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.section-title { font-size:14px; font-weight:500; color:var(--text); }

/* ── RESPONSIVE ── */
@media(max-width:960px) {
  .chart-grid-2 { grid-template-columns:1fr; }
  .chart-grid-3 { grid-template-columns:1fr; }
  .chart-grid-main { grid-template-columns:1fr; }
  .admin-grid { grid-template-columns:1fr; }
}
@media(max-width:700px) {
  .sidebar { transform:translateX(-100%); }
  .main { margin-left:0; }
}

/* ── LOADING ── */
.loading-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:.75rem; }
.loading-logo { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.loading-logo span { color:var(--gold); }
.loading-dot { display:flex; gap:6px; }
.loading-dot span { width:5px; height:5px; border-radius:50%; background:var(--gold); animation:pulse 1.2s infinite; }
.loading-dot span:nth-child(2) { animation-delay:.2s; }
.loading-dot span:nth-child(3) { animation-delay:.4s; }
@keyframes pulse { 0%,80%,100% { opacity:.2; } 40% { opacity:1; } }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:500; align-items:center; justify-content:center; padding:2rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg-2); border:1px solid var(--border-md); border-radius:var(--r-lg); padding:1.75rem; width:100%; max-width:480px; }
.modal-title { font-size:16px; font-weight:500; margin-bottom:1.25rem; }
.modal-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.5rem; }

/* ── VIEWING-AS BANNER ── */
.viewing-banner { background:var(--gold-dim); border-bottom:1px solid rgba(200,169,110,.2); padding:.45rem 1.5rem; font-size:12px; color:var(--gold); display:flex; align-items:center; justify-content:space-between; }
.viewing-banner button { background:transparent; border:1px solid rgba(200,169,110,.3); color:var(--gold); font-size:11px; padding:2px 10px; border-radius:4px; cursor:pointer; font-family:'DM Sans',sans-serif; }
.viewing-banner button:hover { background:rgba(200,169,110,.1); }

/* ── INFO ROWS (channel/registry detail lists) ── */
.info-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:13px; }
.info-row:last-child { border-bottom:none; }
.info-row-lbl { color:var(--text-2); }
</style>