:root{
  --bg:#0a0a0f;--surface:#111118;--surface2:#16161f;--surface3:#1c1c28;
  --border:#1e1e2e;--border2:#2a2a3e;
  --gold:#c9a84c;--gold-light:#e8c96a;--gold-dim:#7a6230;
  --text:#e8e8f0;--text-muted:#6b6b80;--text-dim:#3a3a50;
  --green:#22c55e;--yellow:#f59e0b;--red:#ef4444;--blue:#3b82f6;
  --q1:#3b82f6;--q2:#a855f7;--q3:#f59e0b;--q4:#ec4899;
  --h1:#14b8a6;--h2:#fb923c;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}

/* HEADER */
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid rgba(201,168,76,0.2);background:var(--surface);position:sticky;top:38px;z-index:200;}
.logo-area{display:flex;align-items:center;gap:12px;}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--gold-dim));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.logo-text h1{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--gold-light);line-height:1;}
.logo-text p{font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-top:1px;}
.header-center{text-align:center;}
.header-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:3px;color:var(--text-muted);}
.header-file{font-size:10px;color:var(--text-dim);font-family:'DM Mono',monospace;margin-top:2px;}
.legend{display:flex;align-items:center;gap:16px;font-size:11px;color:var(--text-muted);}
.legend-item{display:flex;align-items:center;gap:5px;}
.ldot{width:8px;height:8px;border-radius:50%;}

/* STATUS */
.status-bar{background:var(--surface2);border-bottom:1px solid rgba(201,168,76,0.2);padding:6px 28px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--text-dim);flex-shrink:0;}
.sdot.ok{background:var(--green);box-shadow:0 0 6px var(--green);}
.sdot.err{background:var(--red);box-shadow:0 0 6px var(--red);}
.sdot.loading{background:var(--yellow);animation:sdotPulse 1s infinite;}
@keyframes sdotPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* HERO */
.hero{background:linear-gradient(135deg,#0d1a0d 0%,#0e180a 50%,#13100a 100%);border-bottom:1px solid rgba(201,168,76,0.2);padding:24px 28px 20px;}
.hero-top{display:flex;align-items:flex-start;gap:20px;margin-bottom:16px;flex-wrap:wrap;}
.hero-badge{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
.hero-medal{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 24px rgba(245,158,11,.35);}
.hero-rank-label{font-size:9px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;}
.hero-info{flex:1;min-width:200px;}
.hero-name{font-size:30px;font-weight:700;color:#fff;line-height:1;margin-bottom:4px;}
.hero-id{font-family:'DM Mono',monospace;font-size:11px;color:var(--text-muted);}
.hero-stats{display:flex;align-items:flex-end;gap:32px;margin-top:14px;flex-wrap:wrap;}
.hero-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:3px;}
.hero-stat-val{font-family:'DM Mono',monospace;font-size:18px;font-weight:500;color:var(--text);white-space:nowrap;}
.hero-stat-val.big{font-size:34px;font-weight:700;}
.hero-stat-val.green{color:var(--green);}
.hero-stat-val.yellow{color:var(--yellow);}
.hero-stat-val.red{color:var(--red);}
.hero-qbadges{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.hero-qbadge{padding:8px 16px;border-radius:8px;border:1px solid;text-align:center;min-width:72px;}
.hero-qbadge .ql{font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.7;margin-bottom:3px;}
.hero-qbadge .qv{font-family:'DM Mono',monospace;font-size:15px;font-weight:700;}
.hero-progress-track{height:5px;background:var(--border2);border-radius:3px;overflow:hidden;}
.hero-progress-fill{height:100%;border-radius:3px;transition:width 1.2s ease;}

/* INSIGHT CARDS */
.insights{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,168,76,0.2);border-bottom:1px solid rgba(201,168,76,0.2);}
.icard{background:var(--surface);padding:16px 20px;position:relative;overflow:hidden;}
.icard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.icard.best::before{background:linear-gradient(90deg,var(--green),transparent);}
.icard.worst::before{background:linear-gradient(90deg,var(--red),transparent);}
.icard.stat-gold::before{background:linear-gradient(90deg,var(--gold),transparent);}
.icard.stat-blue::before{background:linear-gradient(90deg,var(--blue),transparent);}
.icard-tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-weight:600;}
.icard-tag.green{color:var(--green);}
.icard-tag.red{color:var(--red);}
.icard-tag.gold{color:var(--gold);}
.icard-tag.blue{color:var(--blue);}
.icard-name{font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px;}
.icard-sub{font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;margin-bottom:8px;}
.icard-pct{font-family:'DM Mono',monospace;font-size:28px;font-weight:700;line-height:1;margin-bottom:6px;}
.icard-pct.green{color:var(--green);}
.icard-pct.red{color:var(--red);}
.icard-pct.yellow{color:var(--yellow);}
.icard-meta{font-size:10px;color:var(--text-muted);font-family:'DM Mono',monospace;}
.icard-bigval{font-family:'DM Mono',monospace;font-size:26px;font-weight:700;line-height:1;margin-bottom:6px;}
.icard-bigval.gold{color:var(--gold-light);}
.icard-bigval.blue{color:var(--blue);}
.icard-bar{height:3px;background:rgba(201,168,76,0.1);border-radius:2px;margin-top:10px;overflow:hidden;}
.icard-bar-fill{height:100%;border-radius:2px;}
.fill-green{background:var(--green);}
.fill-yellow{background:var(--yellow);}
.fill-red{background:var(--red);}
.fill-gold{background:var(--gold);}

/* CHART */
.chart-section{padding:24px 28px;border-bottom:1px solid rgba(201,168,76,0.2);background:var(--surface2);}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:2.5px;color:var(--text-muted);margin-bottom:16px;}
.section-title span{color:var(--gold);}
.chart-wrap{width:100%;overflow-x:auto;}

/* REP FILTER */
.rep-filter-row{padding:10px 28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid rgba(201,168,76,0.2);background:var(--surface2);}
.rf-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);font-weight:600;white-space:nowrap;}
.rpill{padding:4px 11px;border-radius:20px;font-size:10px;border:1px solid rgba(201,168,76,0.2);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.rpill:hover{border-color:var(--text-muted);color:var(--text);}
.rpill.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.08);}

/* FILTER + EXPORT */
.filter-export-bar{background:var(--surface);border-bottom:1px solid rgba(201,168,76,0.2);padding:10px 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;}
.filter-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.filter-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.filter-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);font-weight:600;white-space:nowrap;}
.fdivider{width:1px;height:22px;background:rgba(201,168,76,0.2);flex-shrink:0;}
.fbtn{padding:5px 12px;border-radius:6px;font-size:11px;font-family:'DM Sans',sans-serif;font-weight:500;border:1px solid rgba(201,168,76,0.2);background:var(--surface2);color:var(--text-muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.fbtn:hover{border-color:var(--text-muted);color:var(--text);}
.fbtn.on-all  {border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.08);}
.fbtn.on-q1   {border-color:var(--q1);color:var(--q1);background:rgba(59,130,246,.1);}
.fbtn.on-q2   {border-color:var(--q2);color:var(--q2);background:rgba(168,85,247,.1);}
.fbtn.on-q3   {border-color:var(--q3);color:var(--q3);background:rgba(245,158,11,.1);}
.fbtn.on-q4   {border-color:var(--q4);color:var(--q4);background:rgba(236,72,153,.1);}
.fbtn.on-h1   {border-color:var(--h1);color:var(--h1);background:rgba(20,184,166,.1);}
.fbtn.on-h2   {border-color:var(--h2);color:var(--h2);background:rgba(251,146,60,.1);}
.fbtn.on-month{border-color:var(--gold-light);color:var(--gold-light);background:rgba(232,201,106,.08);}
.fbtn.cmp-on-none{border-color:#818cf8;color:#818cf8;background:rgba(129,140,248,.1);}
.cmp-col{border-left:2px dashed rgba(129,140,248,0.35);}
.cmp-th{color:#818cf8!important;}
.delta-up{color:var(--green);font-family:'DM Mono',monospace;font-size:11px;font-weight:600;}
.delta-dn{color:var(--red);font-family:'DM Mono',monospace;font-size:11px;font-weight:600;}
.export-btns{display:flex;gap:8px;}
.exp-btn{padding:6px 16px;border-radius:6px;font-size:11px;font-family:'DM Sans',sans-serif;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;}
.exp-csv {background:rgba(59,130,246,.1);border:1px solid var(--q1);color:var(--q1);}
.exp-csv:hover{background:rgba(59,130,246,.2);}
.exp-xlsx{background:rgba(34,197,94,.1);border:1px solid var(--green);color:var(--green);}
.exp-xlsx:hover{background:rgba(34,197,94,.2);}

/* SUMMARY CARDS */
.summary-strip{display:grid;gap:1px;background:rgba(201,168,76,0.2);border-bottom:1px solid rgba(201,168,76,0.2);}
.scard{background:var(--surface);padding:16px 22px;position:relative;overflow:hidden;}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.sc-all::before  {background:linear-gradient(90deg,var(--gold),transparent);}
.sc-q1::before   {background:linear-gradient(90deg,var(--q1),transparent);}
.sc-q2::before   {background:linear-gradient(90deg,var(--q2),transparent);}
.sc-q3::before   {background:linear-gradient(90deg,var(--q3),transparent);}
.sc-q4::before   {background:linear-gradient(90deg,var(--q4),transparent);}
.sc-h1::before   {background:linear-gradient(90deg,var(--h1),transparent);}
.sc-h2::before   {background:linear-gradient(90deg,var(--h2),transparent);}
.sc-month::before{background:linear-gradient(90deg,var(--gold-light),transparent);}
.card-label{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:2px;color:var(--text-muted);margin-bottom:5px;}
.card-value{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;color:var(--text);line-height:1;}
.card-sub{font-size:10px;color:var(--text-muted);margin-top:4px;}
.card-pct{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;margin-top:3px;}

/* TABLE */
.table-wrap{padding:0 28px 20px 28px;overflow-x:auto;overflow-y:visible;}
table{width:100%;border-collapse:collapse;min-width:500px;}
.qtr-header td{
  background:var(--surface2);
  padding:7px 12px;
  font-family:'Bebas Neue',sans-serif;
  font-size:12px;
  letter-spacing:2px;
  text-align:center;
  border-bottom:2px solid;
  position:sticky;
  top:98px;
  z-index:120;
}
.c-q1{color:var(--q1)!important;border-color:var(--q1)!important;}
.c-q2{color:var(--q2)!important;border-color:var(--q2)!important;}
.c-q3{color:var(--q3)!important;border-color:var(--q3)!important;}
.c-q4{color:var(--q4)!important;border-color:var(--q4)!important;}
.c-h1{color:var(--h1)!important;border-color:var(--h1)!important;}
.c-h2{color:var(--h2)!important;border-color:var(--h2)!important;}
.c-total{color:var(--gold)!important;border-color:var(--gold)!important;}
.c-month{color:var(--gold-light)!important;border-color:var(--gold-light)!important;}
.col-header th{
  padding:8px 12px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
  text-align:right;
  background:var(--surface);
  border-bottom:1px solid rgba(201,168,76,0.2);
  font-weight:500;
  white-space:nowrap;
  position:sticky;
  top:128px;
  z-index:119;
}
.col-header th.left{text-align:left;}
.col-header th.center{text-align:center;}
.data-row td{padding:11px 12px;font-size:12px;border-bottom:1px solid rgba(201,168,76,0.2);vertical-align:middle;text-align:right;}
.data-row:hover td{background:rgba(201,168,76,.04);}
.data-row.total-row td{
  background:var(--surface2);
  font-weight:600;
  border-top:2px solid var(--gold-dim);
  color:var(--gold-light);
}
.rep-cell{text-align:left !important;min-width:170px;}
.rep-rank{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:600;margin-right:8px;font-family:'DM Mono',monospace;background:var(--surface2);color:var(--text-muted);border:1px solid rgba(201,168,76,0.2);}
.rep-rank.gold  {background:var(--gold-dim);color:var(--gold-light);border-color:var(--gold);}
.rep-rank.silver{background:#2a2a3a;color:#aaa;border-color:#555;}
.rep-rank.bronze{background:#2a1a0a;color:#cd7f32;border-color:#cd7f32;}
.rep-name{font-weight:500;font-size:12px;color:var(--text);}
.rep-id{font-family:'DM Mono',monospace;font-size:9px;color:var(--text-muted);display:block;margin-top:1px;margin-left:28px;}
.mono{font-family:'DM Mono',monospace;font-size:11px;}
.pct-cell{font-family:'DM Mono',monospace;font-size:12px;font-weight:600;text-align:center !important;}
.pct-green{color:var(--green);}
.pct-yellow{color:var(--yellow);}
.pct-red{color:var(--red);}
.zero{color:var(--text-dim)!important;}
.qdiv{border-left:1px solid rgba(201,168,76,0.2);}
.bar-wrap{height:2px;background:rgba(201,168,76,0.1);border-radius:2px;margin-top:4px;overflow:hidden;}
.bar-fill{height:100%;border-radius:2px;}
.bg-green{background:var(--green);}
.bg-yellow{background:var(--yellow);}
.bg-red{background:var(--red);}
.msub{font-size:9px;color:var(--text-muted);margin-top:2px;font-family:'DM Mono',monospace;}

/* STATE SCREENS */
.state-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;gap:14px;color:var(--text-muted);}
.state-screen .icon{font-size:42px;}
.state-screen h2{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;}
.state-screen p{font-size:12px;font-family:'DM Mono',monospace;color:var(--text-dim);max-width:360px;text-align:center;line-height:1.8;}

/* FOOTER */
.footer{padding:12px 28px;border-top:1px solid rgba(201,168,76,0.2);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-muted);}
.footer-logo{font-family:'Bebas Neue',sans-serif;letter-spacing:2px;color:var(--gold-dim);font-size:12px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.data-row{animation:fadeUp .28s ease both;}


/* ── CLEAN STICKY TABLE HEADER — GOLDEN REFERENCE PATTERN ── */
#site-nav{
  position:sticky !important;
  top:0 !important;
  z-index:300 !important;
}

.header{
  position:sticky !important;
  top:38px !important;
  z-index:250 !important;
}

.status-bar{
  position:sticky !important;
  top:98px !important;
  z-index:240 !important;
}

#main-content,
.table-wrap{
  overflow:visible !important;
}

.table-wrap{
  padding:20px 28px;
}

table{
  width:100%;
  min-width:500px;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

thead{
  position:static !important;
}

.qtr-header td{
  position:sticky !important;
  top:128px !important;
  z-index:230 !important;
  background:var(--surface2) !important;
}

.col-header th{
  position:sticky !important;
  top:158px !important;
  z-index:229 !important;
  background:var(--surface) !important;
}

.data-row.total-row td{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
}