*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --topbar-height:56px;
  --bg:#07090f;--surface:#0d1220;--surface2:#111827;--surface3:#161f35;
  --border:#1a2540;--border2:#243050;
  --blue:#2563eb;--blue-lt:#3b82f6;--blue-dim:rgba(37,99,235,0.12);--blue-glow:rgba(59,130,246,0.08);
  --green:#10b981;--green-dim:rgba(16,185,129,0.12);
  --red:#ef4444;--red-dim:rgba(239,68,68,0.12);
  --amber:#f59e0b;--amber-dim:rgba(245,158,11,0.12);
  --teal:#14b8a6;--teal-dim:rgba(20,184,166,0.16);
  /* Cyan for Needs Attention — clearer vs healthy green than teal */
  --cyan:#22d3ee;--cyan-dim:rgba(34,211,238,0.18);
  --purple:#8b5cf6;--purple-dim:rgba(139,92,246,0.12);
  --text:#f1f5f9;--text2:#94a3b8;--text3:#475569;
  --radius:12px;--radius-sm:8px;
}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;overflow-x:hidden;font-size:13px;}

/* ─── SIDEBAR ─────────────────────────────────── */
.sidebar{width:220px;min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:30;}
.logo-wrap{padding:20px 18px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.logo-icon svg{display:block;}
.logo-text{font-size:15px;font-weight:900;letter-spacing:-.4px;color:var(--text);}
.logo-text span{color:var(--blue-lt);}
.logo-tagline{font-size:8px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);margin-top:1px;}
.nav{flex:1;padding:12px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;}
.nav-label{font-size:8.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);padding:10px 8px 4px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s ease;position:relative;user-select:none;border:1px solid transparent;}
.nav a.nav-item{text-decoration:none;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{background:var(--blue-dim);color:var(--blue-lt);border-color:rgba(59,130,246,.18);}
.nav-item.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:2px;background:var(--blue-lt);border-radius:0 2px 2px 0;}
.nav-icon{width:14px;height:14px;flex-shrink:0;opacity:.7;}
.nav-item.active .nav-icon{opacity:1;}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:8px;font-weight:800;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;}
/* ─── STORE TILE (below logo) ──────────────────── */
.store-tile{padding:12px 16px;border-bottom:1px solid var(--border);}
.store-tile-label{font-size:8.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);margin-bottom:6px;}
.store-tile-name{font-size:11.5px;font-weight:700;color:var(--text);}
.store-select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;font-size:11px;font-weight:600;color:var(--text);font-family:'Manrope',sans-serif;cursor:pointer;}
.store-select:hover{border-color:var(--border2);}
.store-select:focus{outline:none;border-color:var(--blue-lt);}

.sidebar-foot{padding:14px 16px;border-top:1px solid var(--border);}
.user-row{display:flex;align-items:center;gap:9px;}
.ava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0;}
.user-name{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.2;}
.user-sub{font-size:9.5px;color:var(--text2);margin-top:1px;}

/* ─── MAIN AREA ───────────────────────────────── */
/*
 * Sidebar is position:fixed, so .main must explicitly fill the viewport to the right.
 * margin-left + width % can collapse on some views after .page flattening — use left/right
 * so the column always spans edge-to-edge (matches Overview/Health; fixes narrow band on others).
 */
.main{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:220px;
  margin-left:0;
  width:auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  /* No scroll on .main — only .main-scroll scrolls so topbar never moves */
  overflow:hidden;
  background:var(--bg);
}

/*
 * Scroll region below topbar only — fixes tiles jumping in front of bar.
 * Keep this a normal block scroll container (no flex column): flex on main-scroll
 * made later views’ first g4/g6 look “pushed down” because inactive .page nodes
 * and modals interact oddly as flex items. Block flow + display:none on inactive
 * pages matches how it behaved before the header fix.
 */
.main-scroll{
  flex:1 1 0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* block formatting context — only in-flow content sets scroll height */
  display:block;
}

/* Wraps all #p-* pages only; modals stay siblings after this — keeps scroll height = active page only */
.dashboard-pages{
  display:block;
  min-height:0;
}

/* ─── TOPBAR ──────────────────────────────────── */
/* Not sticky: outside .main-scroll so it never scrolls away */
.topbar{
  height:var(--topbar-height);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 26px;
  gap:12px;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
  z-index:20;
}
.topbar-title{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.3px;}
.topbar-sub{font-size:10px;color:var(--text2);margin-top:1px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.topbar-date-form,.topbar-report-form{display:inline-flex;align-items:center;gap:8px;}
.topbar-date-label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text2);white-space:nowrap;}
.date-range-select{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:10.5px;font-weight:600;color:var(--text2);font-family:'Manrope',sans-serif;cursor:pointer;min-width:140px;}
.date-range-select:hover{border-color:var(--border2);color:var(--text);}
.date-range-select:focus{outline:none;border-color:var(--blue-lt);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.chip{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:10.5px;font-weight:600;color:var(--text2);}
.btn{display:inline-flex;align-items:center;gap:5px;background:var(--blue);border:none;border-radius:7px;padding:6px 12px;font-size:10.5px;font-weight:700;color:#fff;cursor:pointer;font-family:'Manrope',sans-serif;transition:all .15s;white-space:nowrap;}
.btn:hover{background:var(--blue-lt);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2);}
.btn-ghost:hover{border-color:var(--border2);color:var(--text);}
.btn-sm{padding:4px 9px;font-size:9.5px;}

/* ─── PAGES ───────────────────────────────────── */
.page{display:none;padding:22px 26px;flex-direction:column;gap:18px;}
/*
 * Do NOT flex-grow the active page (flex:1 caps height to viewport−topbar).
 * That clips everything below the first row and can let tiles overlap the topbar.
 * flex:0 0 auto = height from content; .main scrolls; sticky .topbar stays correct.
 */
.page.active{display:flex;animation:pageIn .3s ease;width:100%;max-width:100%;min-width:0;flex:0 0 auto;align-self:stretch;}
@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ─── LAYOUT HELPERS ──────────────────────────── */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media (max-width: 1200px) {
  .g6{grid-template-columns:repeat(3,1fr);}
}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:14px;}
.col{display:flex;flex-direction:column;gap:14px;}

/* ─── KPI CARD ────────────────────────────────── */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden;transition:border-color .2s,transform .15s;}
.kpi:hover{border-color:var(--border2);transform:translateY(-1px);}
.kpi-accent{position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--radius) var(--radius) 0 0;}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.kpi-label{font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);}
.kpi-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;}
.kpi-val{font-size:28px;font-weight:900;color:var(--text);letter-spacing:-1px;line-height:1;margin-bottom:7px;}
/* Health page: icon + count in KPI tiles */
#p-health .kpi-val.kpi-val-with-icon{display:flex;align-items:center;gap:10px;}
#p-health .kpi-val-with-icon .kpi-val-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;opacity:.92;}
#p-health .kpi-val-with-icon .kpi-val-icon svg{display:block;width:26px;height:26px;}
/* Health page: main KPI number + optional subline (e.g. pending cancellations) */
#p-health .kpi-val-with-icon .kpi-val-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.15;min-width:0;}
#p-health .kpi-val-with-icon .kpi-val-sub{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;}
/* High Risk tile: trajectory count + pending count on one line (same red, + separator) */
#p-health .kpi-val-high-risk-line{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:inherit;font-weight:inherit;}
#p-health .kpi-val-high-risk-line .kpi-val-plus{font-weight:800;opacity:.9;}
/* Match tile title: same .kpi-label look under the High Risk value */
#p-health .kpi-label-under-val{display:block;margin-top:6px;letter-spacing:1.5px;}
/* KPI row doubles as roster filter triggers — same data-filter bands as roster tabs */
#p-health .kpi.kpi-roster-filter{cursor:pointer;transition:border-color .15s,box-shadow .15s;}
#p-health .kpi.kpi-roster-filter:hover{border-color:var(--border2);}
/* Active highlight matches each tile’s accent (same as kpi-accent gradients) */
#p-health .kpi.kpi-roster-filter.kpi-filter-active[data-roster-filter="all"]{border-color:rgba(16,185,129,.5);box-shadow:0 0 0 1px rgba(16,185,129,.14);}
#p-health .kpi.kpi-roster-filter.kpi-filter-active[data-roster-filter="healthy"]{border-color:rgba(16,185,129,.5);box-shadow:0 0 0 1px rgba(16,185,129,.14);}
#p-health .kpi.kpi-roster-filter.kpi-filter-active[data-roster-filter="needs_attention"]{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 1px rgba(34,211,238,.16);}
#p-health .kpi.kpi-roster-filter.kpi-filter-active[data-roster-filter="at_risk"]{border-color:rgba(245,158,11,.5);box-shadow:0 0 0 1px rgba(245,158,11,.14);}
#p-health .kpi.kpi-roster-filter.kpi-filter-active[data-roster-filter="high_risk"]{border-color:rgba(239,68,68,.5);box-shadow:0 0 0 1px rgba(239,68,68,.14);}
#p-health .kpi.kpi-roster-filter.kpi-filter-active[data-roster-filter="frozen"]{border-color:rgba(59,130,246,.5);box-shadow:0 0 0 1px rgba(59,130,246,.14);}
/* No focus ring — active tile already has colored border/glow; avoids double highlight */
#p-health .kpi.kpi-roster-filter:focus{outline:none;}
.kpi-foot{display:flex;align-items:center;gap:5px;font-size:10.5px;}
.pos{color:var(--green);font-weight:700;}
.neg-good{color:var(--green);font-weight:700;}
.neg-bad{color:var(--red);font-weight:700;}
.neutral{color:var(--text2);}
.kpi-foot .kpi-foot-link{color:var(--blue-lt);text-decoration:none;font-weight:inherit;}
.kpi-foot .kpi-foot-link:hover{color:var(--blue-lt);opacity:.9;}

/* ─── CARD ────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:10px;}
.card-title{font-size:13px;font-weight:800;color:var(--text);letter-spacing:-.2px;}
.card-sub{font-size:10px;color:var(--text2);margin-top:2px;}
.ph-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--text3);color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;flex-shrink:0;}

/* ─── MEMBER DETAIL MODAL ────────────────────── */
.member-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.8);display:none;align-items:center;justify-content:center;z-index:90;}
.member-modal-backdrop.is-open{display:flex;}
.member-modal{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.7);}
.member-modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;}
.member-modal-avatar-wrap{display:flex;align-items:center;gap:10px;}
.member-modal-head-right{display:flex;align-items:center;gap:10px;}
.member-modal-risk-pill{flex-shrink:0;text-transform:uppercase;letter-spacing:.4px;}
.member-modal-risk-pill[hidden]{display:none!important;}
.member-modal-mhs-badge{flex-shrink:0;}
.member-modal-close{background:transparent;border:none;color:var(--text2);cursor:pointer;font-size:20px;line-height:1;padding:0 0 0 8px;}
.member-modal-close:hover{color:var(--text);}
.member-modal-body{font-size:11.5px;color:var(--text);position:relative;min-height:120px;}
.member-modal-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.member-modal-avatar{width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.member-modal-meta-line{font-size:11px;color:var(--text2);margin-top:2px;}
.member-modal-name-row{display:flex;align-items:center;gap:8px;}
.member-modal-name{font-size:13px;font-weight:800;}
.member-modal-frozen-badge{display:inline-flex;align-items:center;justify-content:center;color:var(--blue-lt);font-size:28px;line-height:1;}
.frozen-badge{display:inline-flex;align-items:center;color:var(--blue-lt);font-size:26px;line-height:1;margin-left:4px;}
.member-modal-value-green{color:var(--green);font-weight:700;}
.member-modal-value-red{color:var(--red);font-weight:700;}
.member-modal-value-amber{color:var(--amber);font-weight:700;}
.member-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin-top:6px;}
.member-modal-item{}
.member-modal-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-bottom:2px;}
.member-modal-value{font-size:11.5px;color:var(--text);}
.member-modal-loading{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:absolute;inset:0;background:var(--surface);border-radius:var(--radius);font-size:12px;color:var(--text2);}
.member-modal-backdrop.is-loading .member-modal-loading{display:flex;}
.member-modal-backdrop.is-loading .member-modal-content{visibility:hidden;}
.member-modal-spinner{width:28px;height:28px;border:3px solid var(--border2);border-top-color:var(--blue-lt);border-radius:50%;animation:member-modal-spin .7s linear infinite;}
@keyframes member-modal-spin{to{transform:rotate(360deg);}}

/* ─── TABS ────────────────────────────────────── */
.tabs{display:flex;gap:3px;background:var(--surface2);border-radius:7px;padding:3px;}
.tab{padding:5px 12px;border-radius:5px;font-size:10.5px;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s;user-select:none;}
.tab:hover{color:var(--text);}
.tab.active{background:var(--blue);color:#fff;}

/* ─── TABLE ───────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text2);padding:0 0 10px;text-align:left;border-bottom:1px solid var(--border);}
.roster-table-wrap{overflow:auto;max-height:min(70vh, 600px);}
#p-health .g21{align-items:start;}
/* Roster fills scroll area below KPIs; 100vh was full viewport — use remaining viewport under topbar */
#p-health .card-roster{display:flex;flex-direction:column;min-height:0;height:calc(100vh - var(--topbar-height) - 120px);max-height:calc(100vh - var(--topbar-height) - 120px);}
#p-health .card-roster .roster-table-wrap{flex:1;min-height:0;max-height:none;overflow:auto;}
#p-health .roster-tbl thead th{position:sticky;top:0;background:var(--surface);z-index:1;box-shadow:0 1px 0 var(--border);}
.tbl td{padding:10px 0;font-size:11.5px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--blue-glow);}
.tbl tr{transition:background .1s;}

/* ─── PILL ────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:9.5px;font-weight:800;letter-spacing:.3px;}
.pill-green{background:var(--green-dim);color:var(--green);}
.pill-amber{background:var(--amber-dim);color:var(--amber);}
.pill-red{background:var(--red-dim);color:var(--red);}
/* Needs Attention band — cyan for contrast vs healthy green */
.pill-teal{background:var(--cyan-dim);color:var(--cyan);}
.pill-blue{background:var(--blue-dim);color:var(--blue-lt);}
.pill-purple{background:var(--purple-dim);color:var(--purple);}
.roster-risk-pill{border:none;cursor:pointer;font:inherit;}
.roster-risk-pill:hover{opacity:.9;}

/* ─── PROGRESS BAR ────────────────────────────── */
.bar-track{width:100%;height:4px;background:var(--surface3);border-radius:4px;overflow:hidden;margin-top:5px;}
.bar-fill{height:100%;border-radius:4px;transition:width .6s ease;}
.seg{margin-bottom:12px;}
.seg-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.seg-lbl{font-size:11.5px;font-weight:600;color:var(--text);}
.seg-val{font-size:11px;font-weight:700;color:var(--text2);}

/* Member Mix: band name | aligned colored descriptor | count */
.member-mix-row{display:grid;grid-template-columns:9.25rem 1fr auto;gap:0 12px;align-items:baseline;margin-bottom:4px;}
.member-mix-lbl{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.35;}
.member-mix-desc{font-size:11px;font-weight:600;line-height:1.35;min-width:0;}
.member-mix-val{justify-self:end;}

/* ─── SCORE BADGE ─────────────────────────────── */
.score-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;font-size:12.5px;font-weight:900;}
.sb-green{background:var(--green-dim);color:var(--green);}
.sb-amber{background:var(--amber-dim);color:var(--amber);}
.sb-red{background:var(--red-dim);color:var(--red);}
.sb-teal{background:var(--cyan-dim);color:var(--cyan);}
/* Frozen replaces MHS badge — neutral/dim so ❄ reads clearly */
.sb-frozen{background:var(--surface3);color:var(--text2);}
.sb-blue{background:var(--blue-dim);color:var(--blue-lt);}

/* ─── MEMBER AVATAR ───────────────────────────── */
.mav{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;color:#fff;flex-shrink:0;}

/* ─── LEGEND ──────────────────────────────────── */
.legend{display:flex;flex-wrap:wrap;gap:12px;}
.leg-item{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--text2);}
.leg-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.leg-line{display:inline-block;width:14px;height:2px;border-radius:2px;flex-shrink:0;vertical-align:middle;}

/* ─── STAT BOX ────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stat-box{background:var(--surface2);border-radius:var(--radius-sm);padding:12px 14px;}
.stat-box-val{font-size:18px;font-weight:900;letter-spacing:-.5px;line-height:1;}
.stat-box-lbl{font-size:8.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-top:3px;}

/* ─── DIVIDER ─────────────────────────────────── */
.div{height:1px;background:var(--border);margin:4px 0;}

/* ─── SVG CHART AXIS TEXT ─────────────────────── */
.ax{font-size:5.4px;fill:#475569;font-family:'Manrope',sans-serif;font-weight:600;}

/* ─── INSIGHT BOX ─────────────────────────────── */
.insight{background:var(--blue-glow);border:1px solid rgba(59,130,246,.15);border-radius:var(--radius-sm);padding:12px 14px;font-size:11px;color:var(--text2);line-height:1.65;}
.insight strong{color:var(--blue-lt);}

/* ─── LIST ROW ────────────────────────────────── */
.list-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--surface2);border-radius:var(--radius-sm);margin-bottom:6px;}
.list-row:last-child{margin-bottom:0;}

/* ─── BENCHMARK ROW ───────────────────────────── */
.bm-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.bm-row:last-child{border-bottom:none;}
.bm-label{font-size:11px;color:var(--text2);flex:1;}
.bm-bar-wrap{flex:2;height:4px;background:var(--surface3);border-radius:4px;overflow:hidden;}
.bm-bar{height:100%;border-radius:4px;}
.bm-val{font-size:11px;font-weight:800;min-width:36px;text-align:right;}

/* ─── HELP TOOLTIP (TABLE HEADERS + SCORE FACTORS) ─────────────── */
.help-th,.help-wrap{position:relative;}
.help-wrap{display:inline-flex;align-items:center;}
.help-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:9px;font-weight:800;cursor:pointer;background:transparent;color:var(--text2);margin-left:4px;padding:0;}
.help-icon:focus{outline:none;color:var(--text2);border-color:var(--text2);}
/* Card-style tooltip: accent bar + summary + rule rows */
.help-tooltip{
  position:absolute;top:140%;left:0;transform:none;
  min-width:220px;max-width:300px;
  background:linear-gradient(180deg, var(--surface2) 0%, var(--surface3) 100%);
  border:1px solid var(--border2);
  border-radius:10px;
  padding:0;
  font-size:10px;color:var(--text2);line-height:1.45;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.08);
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:9999;
  overflow:hidden;
}
.help-tooltip::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg, var(--blue-lt), var(--blue));
  border-radius:10px 0 0 10px;
}
.help-tooltip-summary{
  padding:10px 12px 10px 14px;
  background:rgba(37,99,235,.06);
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-size:10px;font-weight:600;line-height:1.5;
}
.help-tooltip-rules{
  padding:8px 10px 10px 14px;
  display:flex;flex-direction:column;gap:3px;
}
.help-tooltip-rule{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:5px 8px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);
  font-size:9.5px;color:var(--text2);
}
.help-tooltip-cond{flex:1;}
.help-tooltip-pts{
  font-weight:900;font-variant-numeric:tabular-nums;
  min-width:32px;text-align:right;
  padding:2px 6px;border-radius:4px;font-size:9px;
}
.help-tooltip-pts--good{background:var(--green-dim);color:var(--green);}
.help-tooltip-pts--warn{background:var(--amber-dim);color:var(--amber);}
.help-tooltip-pts--bad{background:var(--red-dim);color:var(--red);}
.help-tooltip-plain{padding:10px 12px 10px 14px;font-size:10px;color:var(--text2);line-height:1.5;}
/* Accent bar + summary tint per factor (match segment bar colors) */
.help-tooltip--blue::before{background:linear-gradient(180deg,#60a5fa,#2563eb);}
.help-tooltip--blue .help-tooltip-summary{background:rgba(37,99,235,.1);}
.help-tooltip--blue-lt::before{background:linear-gradient(180deg,#93c5fd,#3b82f6);}
.help-tooltip--blue-lt .help-tooltip-summary{background:rgba(59,130,246,.1);}
.help-tooltip--indigo::before{background:linear-gradient(180deg,#3b82f6,#1d4ed8);}
.help-tooltip--indigo .help-tooltip-summary{background:rgba(29,78,216,.12);}
.help-tooltip--purple::before{background:linear-gradient(180deg,#a78bfa,#7c3aed);}
.help-tooltip--purple .help-tooltip-summary{background:rgba(139,92,246,.1);}
.help-tooltip--slate::before{background:linear-gradient(180deg,#64748b,#475569);}
.help-tooltip--slate .help-tooltip-summary{background:rgba(71,85,105,.12);}
.help-tooltip--red::before{background:linear-gradient(180deg,#f87171,#dc2626);}
.help-tooltip--red .help-tooltip-summary{background:rgba(248,113,113,.1);}
.help-icon:focus + .help-tooltip,
.help-icon:hover + .help-tooltip{opacity:1;pointer-events:auto;}
.help-wrap:hover .help-tooltip,
.help-wrap:focus-within .help-tooltip{opacity:1;pointer-events:auto;}

/* Roster sorting indicators */
th.th-sort-asc::after,
th.th-sort-desc::after{content:'';display:inline-block;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;}
th.th-sort-asc::after{border-bottom:6px solid var(--text3);}
th.th-sort-desc::after{border-top:6px solid var(--text3);}

/* ─── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
::-webkit-scrollbar-track{background:transparent;}

/* ─── GLOW EFFECTS ────────────────────────────── */
.glow-blue{box-shadow:0 0 0 1px rgba(59,130,246,.2),0 4px 20px rgba(37,99,235,.12);}

/* ─── LOGIN PAGE ─────────────────────────────── */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:0 8px 32px rgba(0,0,0,.25);}
.login-card .logo-wrap{border-bottom:1px solid var(--border);padding:0 0 24px;margin-bottom:24px;}
.login-card .logo-wrap .logo-wrap-inner{display:flex;align-items:center;justify-content:center;gap:12px;}
.login-card .logo-wrap .logo-icon{flex-shrink:0;}
.login-card .logo-wrap .logo-icon svg{width:64px;height:72px;display:block;}
.login-card .logo-wrap .logo-text{font-size:32px;font-weight:900;letter-spacing:-.4px;}
.login-card .logo-wrap .logo-tagline{font-size:10px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);margin-top:2px;}
.login-card .login-title{font-size:13px;font-weight:800;color:var(--text2);letter-spacing:.5px;margin-bottom:20px;text-align:center;}
.login-card .login-subtext{font-size:12px;color:var(--text2);line-height:1.5;margin:-12px 0 20px;text-align:center;}
.login-card .form-group{margin-bottom:16px;}
.login-card label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-bottom:6px;}
.login-card input[type=email],
.login-card input[type=password],
.login-card input[type=text]{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;font-weight:600;color:var(--text);font-family:'Manrope',sans-serif;}
.login-card input:focus{outline:none;border-color:var(--blue-lt);}
.login-card input::placeholder{color:var(--text2);}
.login-card .password-wrap{position:relative;}
.login-card .password-wrap input{padding-right:44px;}
.login-card .password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:6px;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;border-radius:4px;width:30px;height:30px;}
.login-card .password-toggle:hover{color:var(--text2);}
.login-card .password-toggle:focus{outline:none;color:var(--blue-lt);}
.login-card .password-toggle svg{width:18px;height:18px;position:absolute;}
.login-card .password-toggle svg[hidden]{display:none !important;}
.login-card .form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;}
.login-card .form-row label{margin-bottom:0;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--text2);}
.login-card input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;}
.login-card .btn-submit{width:100%;padding:12px;font-size:12px;font-weight:800;letter-spacing:.5px;margin-top:4px;justify-content:center;}
.login-card .btn-submit:disabled{opacity:.7;cursor:not-allowed;}
.login-card .form-group-code{margin-top:24px;}
.login-card .login-back-link{display:block;text-align:center;font-size:11px;font-weight:600;color:var(--blue-lt);text-decoration:none;margin-top:16px;}
.login-card .login-back-link:hover{color:var(--blue-lt);opacity:.9;}
.login-card .login-errors{background:var(--red-dim);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;list-style:none;}
.login-card .login-errors li{font-size:11.5px;color:var(--red);font-weight:600;}
.login-card .login-status{background:var(--amber-dim);border:1px solid rgba(245,158,11,.35);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;font-size:12px;color:var(--amber);font-weight:600;text-align:center;}

/* ─── PROFILE PAGE ────────────────────────────── */
.profile-page{padding:22px 26px;display:flex;flex-direction:column;gap:24px;}
.profile-cards{display:flex;flex-direction:column;gap:32px;}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;}
.profile-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.profile-card .profile-form .btn,.profile-card form .btn{margin-top:20px;}
.profile-card:hover{border-color:var(--border2);}
.profile-card-title{font-size:13px;font-weight:800;color:var(--text);letter-spacing:-.2px;margin-bottom:6px;}
.profile-card-sub{font-size:10px;color:var(--text2);margin-bottom:20px;}
.profile-card .form-group{margin-bottom:16px;}
.profile-card label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-bottom:6px;}
.profile-card input[type=email],
.profile-card input[type=password],
.profile-card input[type=text]{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;font-weight:600;color:var(--text);font-family:'Manrope',sans-serif;}
.profile-card input:focus{outline:none;border-color:var(--blue-lt);}
.profile-card input::placeholder{color:var(--text2);}
.profile-card .btn-submit{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;font-size:11.5px;font-weight:800;letter-spacing:.5px;background:var(--blue);color:#fff;border:none;border-radius:7px;cursor:pointer;font-family:'Manrope',sans-serif;transition:background .15s;}
.profile-card .btn-submit:hover{background:var(--blue-lt);}
.profile-card .btn-submit:disabled{opacity:.7;cursor:not-allowed;}
.profile-card .profile-status{background:var(--green-dim);border:1px solid rgba(16,185,129,.35);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;font-size:12px;color:var(--green);font-weight:600;}
.profile-card .profile-errors{background:var(--red-dim);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:20px;list-style:none;}
.profile-card .profile-errors li{font-size:11.5px;color:var(--red);font-weight:600;}
/* Nav items as links (profile layout) */
.nav a.nav-item{text-decoration:none;display:flex;align-items:center;}