:root{
  --bg:#f4f7fb;--panel:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--blue:#111827;--soft:#f8fafc;--shadow:0 18px 44px rgba(15,23,42,.08);
}
body.dark{--bg:#0b1220;--panel:#111827;--text:#f8fafc;--muted:#94a3b8;--border:#273244;--soft:#0f172a;--shadow:0 18px 44px rgba(0,0,0,.28)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif}.wrap{max-width:1580px;margin:0 auto;padding:26px 36px 64px}
.top{display:flex;justify-content:space-between;gap:24px;align-items:center}.eyebrow{font-size:12px;font-weight:950;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}.title{font-size:56px;line-height:.96;margin:10px 0 12px;font-weight:950;letter-spacing:-.055em}.sub{font-size:17px;line-height:1.45;color:var(--muted);font-weight:750;max-width:880px}
.theme{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:6px;display:flex;gap:6px;box-shadow:var(--shadow)}button{font-family:inherit}.theme button{border:0;background:transparent;color:var(--muted);font-weight:950;padding:12px 20px;border-radius:999px;cursor:pointer}.theme button.active{background:#0f172a;color:#fff}body.dark .theme button.active{background:#f8fafc;color:#0f172a}
.panel,.section{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:24px}.panel{padding:22px;margin-top:24px}.section{margin-top:22px;padding:24px}
.step{display:flex;align-items:center;gap:12px;margin-bottom:14px}.step small{font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}.step h3{margin:0;font-size:24px;letter-spacing:-.04em}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.selector{border:1px solid var(--border);background:var(--panel);border-radius:16px;padding:18px 14px;cursor:pointer;min-height:88px;transition:.15s}.selector:hover{transform:translateY(-1px);border-color:rgba(237,30,61,.45)}.selector.active{border-color:#111827;box-shadow:inset 0 0 0 1px #111827;background:linear-gradient(180deg,rgba(237,30,61,.08),rgba(237,30,61,.02))}.selector.reading.active{border-color:#10b981;box-shadow:inset 0 0 0 1px #10b981;background:linear-gradient(180deg,rgba(16,185,129,.13),rgba(16,185,129,.03))}.selector h4{font-size:15px;margin:0 0 8px;font-weight:950;letter-spacing:-.02em;line-height:1.08}.selector p{margin:0;color:var(--muted);font-size:12px;font-weight:850}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.head h2{font-size:28px;letter-spacing:-.045em;margin:0 0 6px}.head p{font-size:14px;color:var(--muted);font-weight:800;margin:0}.datePill{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--soft);padding:10px 14px;color:var(--muted);font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.rankRow{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.rankTabs{display:flex;gap:8px;flex-wrap:wrap}.rankTabs button{border:1px solid var(--border);background:var(--panel);color:var(--muted);font-weight:950;border-radius:999px;padding:10px 14px;cursor:pointer}.rankTabs button.active{background:#0f172a;color:#fff;border-color:#0f172a}body.dark .rankTabs button.active{background:#fff;color:#111827}
.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:18px}table{width:100%;border-collapse:collapse;min-width:980px}th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--soft);padding:14px 12px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:center;font-weight:900}.area{text-align:left;font-size:15px;white-space:nowrap}.sectorName{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:8px 10px;cursor:pointer;transition:.15s}.sectorName:hover{background:var(--soft);border-color:var(--border);transform:translateX(2px)}.sectorName .arrow{font-size:13px;color:var(--muted)}.indexrow td{border-bottom:3px solid var(--text);font-size:16px}
.cell{border-radius:12px;padding:10px 9px;display:inline-flex;min-width:82px;min-height:46px;font-weight:950;align-items:center;justify-content:center;flex-direction:column;gap:2px;cursor:default;position:relative}.cellMain{font-size:15px;line-height:1}.green5{background:#047857;color:#fff}.green4{background:#22c55e;color:#052e16}.green3{background:#bbf7d0;color:#064e3b}.neutral{background:#e5e7eb;color:#334155}.red{background:#fecaca;color:#7f1d1d}.red2{background:#dc2626;color:#fff}.blueCell{background:rgba(237,30,61,.10);color:#111827}.footerNote{font-size:12px;color:var(--muted);font-weight:850;margin-top:16px}.empty{padding:28px;color:var(--muted);font-weight:850}
.tooltip{position:fixed;z-index:1000;background:#0f172a;color:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-size:13px;line-height:1.35;min-width:260px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .08s,transform .08s}.tooltip .tTitle{font-size:14px;font-weight:950;margin-bottom:8px}.tooltip .tRow{display:flex;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,255,255,.15);padding-top:6px;margin-top:6px}.tooltip .tRow span:first-child{color:#cbd5e1}.tooltip .tRow span:last-child{font-weight:950}
.modalBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1100;display:none;align-items:center;justify-content:center;padding:28px}.modalBackdrop.open{display:flex}.modal{width:min(1180px,96vw);max-height:92vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:28px;box-shadow:0 30px 90px rgba(15,23,42,.35);padding:26px}.modalTop{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px}.modalTop h2{font-size:38px;letter-spacing:-.055em;margin:0 0 6px}.modalTop p{font-size:14px;color:var(--muted);font-weight:850;margin:0}.closeBtn{border:1px solid var(--border);background:var(--soft);color:var(--muted);font-weight:950;border-radius:999px;padding:12px 16px;cursor:pointer}.miniCards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.miniCard{border:1px solid var(--border);border-radius:20px;background:var(--soft);padding:18px}.miniCard .num{font-size:34px;font-weight:950;letter-spacing:-.045em;margin-top:8px}.miniCard .cap{font-size:13px;color:var(--muted);font-weight:850;margin-top:4px}.bubbleBox{border:1px solid var(--border);border-radius:22px;background:var(--panel);padding:18px}.bubbleBox h3{font-size:22px;letter-spacing:-.04em;margin:0 0 12px}.smallTable{min-width:760px}
@media(max-width:1400px){.grid7{grid-template-columns:repeat(4,1fr)}}@media(max-width:1150px){.grid4,.miniCards{grid-template-columns:1fr}.grid7{grid-template-columns:repeat(2,1fr)}.title{font-size:42px}.modalTop h2{font-size:30px}}

/* Production polish overrides */
.top{align-items:center}.title{max-width:1100px}.sub,.eyebrow{display:none}.selector{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.rankRow{display:none}.footerNote{display:none}.modalGrid{display:grid;grid-template-columns:1fr}.miniCards{display:none}.heatHeader{cursor:pointer;transition:.15s}.heatHeader:hover{color:var(--blue);background:rgba(237,30,61,.06)}.heatHeader.active{background:#0f172a;color:#fff}body.dark .heatHeader.active{background:#f8fafc;color:#0f172a}.cell{transition:transform .12s ease, box-shadow .12s ease}.cell:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.12)}

/* Front-end upgrade: sticky table UX, stronger active states, export and heatmap-only mode */
.selector.active{
  transform:translateY(-2px);
  border-width:2px;
  box-shadow:0 16px 34px rgba(237,30,61,.14), inset 0 0 0 1px #111827;
}
.selector.reading.active{
  border-width:2px;
  box-shadow:0 16px 34px rgba(16,185,129,.18), inset 0 0 0 1px #10b981;
}
.selector.active h4{color:#111827}
.selector.reading.active h4{color:#047857}
body.dark .selector.active h4, body.dark .selector.reading.active h4{color:#fff}
.tablewrap{
  max-height:72vh;
  position:relative;
}
#breadthTable thead th,
.smallTable thead th{
  position:sticky;
  top:0;
  z-index:20;
}
#breadthTable thead th:first-child,
.smallTable thead th:first-child{
  left:0;
  z-index:40;
}
#breadthTable td.area,
.smallTable td.area{
  position:sticky;
  left:0;
  z-index:18;
  background:var(--panel);
  box-shadow:8px 0 16px rgba(15,23,42,.05);
}
#breadthTable .indexrow td.area{
  z-index:19;
  background:var(--panel);
}
#breadthTable tbody tr:hover td,
.smallTable tbody tr:hover td{
  background:rgba(237,30,61,.035);
}
#breadthTable tbody tr:hover td.area,
.smallTable tbody tr:hover td.area{
  background:var(--soft);
}
.heatmapActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.actionBtn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.actionBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(237,30,61,.45);
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.actionBtn.primary{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
body.dark .actionBtn.primary{
  background:#fff;
  color:#111827;
  border-color:#fff;
}
body.heatmapOnly{
  background:#fff;
}
body.heatmapOnly .top,
body.heatmapOnly .panel,
body.heatmapOnly .theme,
body.heatmapOnly .modalBackdrop:not(.open){
  display:none !important;
}
body.heatmapOnly .wrap{
  max-width:none;
  padding:18px;
}
body.heatmapOnly .section{
  margin-top:0;
  box-shadow:none;
  border-radius:0;
  border:0;
  padding:0;
}
body.heatmapOnly .head{
  margin-bottom:10px;
}
body.heatmapOnly .heatmapActions .actionBtn,
body.heatmapOnly .heatmapActions .datePill{
  display:none;
}
body.heatmapOnly .tablewrap{
  max-height:none;
  border-radius:10px;
}
.exitHeatmapOnly{
  display:none;
  position:fixed;
  top:14px;
  right:14px;
  z-index:3000;
  border:0;
  background:#0f172a;
  color:#fff;
  border-radius:999px;
  padding:12px 16px;
  font-weight:950;
  box-shadow:0 16px 40px rgba(15,23,42,.25);
  cursor:pointer;
}
body.heatmapOnly .exitHeatmapOnly{
  display:block;
}
@media print{
  .top,.panel,.theme,.heatmapActions,.modalBackdrop{display:none !important}
  .wrap{max-width:none;padding:0}
  .section{box-shadow:none;border:0;margin:0;padding:0}
  .tablewrap{max-height:none;overflow:visible}
}


/* Premium UI pass: smoother heatmap, larger cells, fades, richer popup */
.cell{
  min-width:94px;
  min-height:54px;
  padding:13px 12px;
  border-radius:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.cellMain{font-size:17px;letter-spacing:-.025em;}
td{padding:11px 13px;}
th{padding:15px 13px;}
#breadthTable,.smallTable{transition:opacity .15s ease, transform .15s ease;}
#breadthTable.fading,.smallTable.fading{opacity:.28;transform:translateY(3px);}
.tooltip{
  min-width:290px;
  padding:16px 17px;
  border-radius:18px;
  background:linear-gradient(180deg,#111827,#0b1220);
}
.tooltip .tBig{font-size:30px;font-weight:950;letter-spacing:-.055em;margin:4px 0 8px;}
.tooltip .tHint{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.16);color:#F5F7FA;font-weight:950;}
.modalBackdrop{backdrop-filter:blur(5px);}
.modal{
  width:min(1320px,97vw);
  padding:34px;
  border-radius:34px;
}
.modalTop{align-items:center;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.modalTop h2{font-size:48px;line-height:.95;}
.modalTop p{font-size:15px;margin-top:8px;}
.closeBtn{padding:9px 13px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.bubbleBox{padding:22px;border-radius:26px;}
.bubbleBox h3{font-size:25px;margin-bottom:16px;}
.modalFooter{margin-top:16px;color:var(--muted);font-size:12px;font-weight:850;}
.smallTable .cell{min-width:88px;min-height:50px;}

/* V2 history and ranking polish */
.rankMove{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;border-radius:999px;font-size:11px;font-weight:950;margin-right:8px;padding:0 7px;letter-spacing:.02em;vertical-align:middle}
.rankMove.up{background:#dcfce7;color:#166534}.rankMove.down{background:#fee2e2;color:#991b1b}.rankMove.flat{background:#e5e7eb;color:#475569}
.tooltip .change{font-weight:950;margin-left:7px}.tooltip .change.pos{color:#86efac}.tooltip .change.neg{color:#fca5a5}.tooltip .change.flat{color:#cbd5e1}
.tooltip .rankMove{margin-left:8px;margin-right:0;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.16)}



/* Remove internal heatmap scrollbar: let the page scroll naturally */
.section > .tablewrap{
  max-height:none !important;
  overflow:visible !important;
}
.section > .tablewrap #breadthTable{
  min-width:0 !important;
}
.section > .tablewrap #breadthTable thead th,
.section > .tablewrap #breadthTable thead th:first-child,
.section > .tablewrap #breadthTable td.area{
  position:static !important;
  left:auto !important;
  top:auto !important;
  z-index:auto !important;
  box-shadow:none !important;
}


/* V3 drilldown: sector → industry → stocks */
.modalCrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}
.crumb{border:1px solid var(--border);background:var(--soft);color:var(--muted);border-radius:999px;padding:7px 10px;cursor:pointer;transition:.15s}
.crumb:hover{border-color:rgba(237,30,61,.45);color:var(--blue);transform:translateY(-1px)}
.crumb.current{background:#0f172a;color:#fff;border-color:#0f172a;cursor:default}
body.dark .crumb.current{background:#f8fafc;color:#0f172a;border-color:#f8fafc}
.drillName{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:8px 10px;cursor:pointer;transition:.15s}
.drillName:hover{background:var(--soft);border-color:var(--border);transform:translateX(2px)}
.drillName .arrow{font-size:13px;color:var(--muted)}
.stockLabel{display:flex;flex-direction:column;gap:2px}.stockTicker{font-weight:950}.stockCompany{font-size:11px;color:var(--muted);font-weight:850;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Phase 2: historical hover cards, date picker, and chart modal */
.historyControls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.controlGroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:14px;border-right:1px solid var(--border)}.controlGroup:last-of-type{border-right:0;padding-right:0}.dateGroup{gap:7px}
.historyControls input[type="date"]{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;padding:9px 12px;font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.sparkBox{margin:10px 0 8px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05)}
.sparkTitle{display:flex;justify-content:space-between;gap:14px;color:#cbd5e1;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.sparkSvg{width:100%;height:46px;display:block;overflow:visible}.sparkSvg path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.sparkSvg .sparkArea{stroke:none;fill:rgba(191,219,254,.12)}
.tooltip .tMini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.tooltip .tMini div{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 6px;text-align:center;background:rgba(255,255,255,.05)}.tooltip .tMini span{display:block;color:#cbd5e1;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.tooltip .tMini strong{display:block;font-size:12px;margin-top:3px}.tooltip .tClick{margin-top:10px;color:#F5F7FA;font-weight:950}
.chartBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.50);z-index:1200;display:none;align-items:center;justify-content:center;padding:28px;backdrop-filter:blur(5px)}.chartBackdrop.open{display:flex}.chartModal{width:min(980px,96vw);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:30px;box-shadow:0 30px 90px rgba(15,23,42,.35);padding:28px}.chartTop{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}.chartTop h2{font-size:38px;line-height:.98;letter-spacing:-.055em;margin:0 0 7px}.chartTop p{font-size:13px;color:var(--muted);font-weight:850;margin:0}.rangeTabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}.rangeTabs button{border:1px solid var(--border);background:var(--soft);color:var(--muted);border-radius:999px;padding:9px 14px;font-weight:950;cursor:pointer}.rangeTabs button.active{background:#0f172a;color:#fff;border-color:#0f172a}body.dark .rangeTabs button.active{background:#fff;color:#111827;border-color:#fff}.chartBox{border:1px solid var(--border);border-radius:22px;background:var(--soft);padding:18px}.historyChart{width:100%;height:320px;display:block}.historyChart path.line{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.historyChart path.areaFill{stroke:none;fill:rgba(237,30,61,.10)}.historyChart .axis{stroke:var(--border);stroke-width:1}.historyChart .gridLine{stroke:var(--border);stroke-width:1;opacity:.55}.historyChart .axisLabel{fill:var(--muted);font-size:11px;font-weight:850}.historyChart .xLabel{font-size:10px}.historyStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.historyStats div{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:12px;text-align:center}.historyStats span{display:block;color:var(--muted);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.historyStats strong{display:block;font-size:20px;letter-spacing:-.04em;margin-top:5px}.historyStats .statDesc{display:block;margin-top:6px;color:var(--muted);font-size:11px;font-weight:850;line-height:1.25;text-transform:none;letter-spacing:0}.cell{cursor:pointer}.cell.loadingHistory{opacity:.72}
@media(max-width:800px){.historyStats{grid-template-columns:repeat(2,1fr)}.chartTop h2{font-size:30px}.historyControls{justify-content:flex-start}}


/* Index Overview modal */
.topActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topActionBtn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  padding:12px 18px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:.15s;
}
.topActionBtn:hover{transform:translateY(-1px);border-color:rgba(237,30,61,.45);box-shadow:0 12px 26px rgba(15,23,42,.08)}
.topActionBtn.disabled{opacity:.46;cursor:not-allowed}
.topActionBtn.disabled:hover{transform:none;border-color:var(--border);box-shadow:var(--shadow)}
.indexModal{width:min(1180px,96vw)}
.indexTabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.indexTabs button{
  border:1px solid var(--border);
  background:var(--soft);
  color:var(--muted);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
}
.indexTabs button:hover{border-color:rgba(237,30,61,.45);color:var(--blue)}
.indexTabs button.active{background:#0f172a;color:#fff;border-color:#0f172a}
body.dark .indexTabs button.active{background:#f8fafc;color:#0f172a;border-color:#f8fafc}
.indexTableWrap{max-height:64vh;overflow:auto}
.indexTable{min-width:760px}
.indexTable th{cursor:pointer;user-select:none}
.indexTable th:first-child,.indexTable td.area{position:sticky;left:0;z-index:25;background:var(--panel);box-shadow:8px 0 16px rgba(15,23,42,.05)}
.indexTable th:first-child{z-index:45;background:var(--soft)}
.indexTable tbody tr:hover td{background:rgba(237,30,61,.035)}
.indexTable tbody tr:hover td.area{background:var(--soft)}
.indexNote{margin-top:12px;color:var(--muted);font-size:12px;font-weight:850}
@media(max-width:900px){.topActions{justify-content:flex-start}.top{align-items:flex-start;flex-direction:column}}



/* Phase 4 mobile optimisation: mobile-only layer. Desktop styles above 768px remain untouched. */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .wrap {
    width: 100%;
    max-width: none;
    padding: 14px 12px 36px;
  }

  .top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .title {
    max-width: 100%;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .topActions,
  .heatmapActions,
  .historyControls {
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
  }

  .topActionBtn,
  .actionBtn,
  .theme button,
  .closeBtn,
  .rangeTabs button,
  .rankTabs button,
  .indexTabs button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .topActionBtn {
    flex: 1 1 calc(50% - 5px);
    padding: 11px 12px;
    text-align: center;
    font-size: 11px;
  }

  .theme {
    width: 100%;
    justify-content: stretch;
    box-shadow: none;
  }

  .theme button {
    flex: 1 1 0;
    padding: 10px 12px;
  }

  .panel,
  .section {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.07);
  }

  .step {
    margin-bottom: 10px;
  }

  .step h3 {
    font-size: 19px;
  }

  .step small {
    font-size: 10px;
  }

  .grid4,
  .grid7,
  .miniCards,
  .historyStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .selector {
    min-height: 66px;
    padding: 12px 9px;
    border-radius: 14px;
  }

  .selector h4 {
    font-size: 13px;
    line-height: 1.1;
    margin-bottom: 5px;
  }

  .selector p {
    font-size: 10px;
  }

  .head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .head h2 {
    font-size: 23px;
  }

  .controlGroup {
    width: 100%;
    padding-right: 0;
    border-right: 0;
    gap: 7px;
  }

  .controlGroup.dateGroup {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
  }

  .controlGroup.dateGroup .actionBtn:last-child {
    grid-column: 1 / -1;
  }

  .historyControls input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    font-size: 11px;
  }

  .actionBtn {
    flex: 1 1 auto;
    padding: 10px 11px;
    font-size: 10px;
  }

  .datePill {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    text-align: center;
  }

  /* Restore safe horizontal scrolling on phones without changing the desktop heatmap. */
  .section > .tablewrap,
  .bubbleBox .tablewrap,
  .indexTableWrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }

  .section > .tablewrap #breadthTable,
  .smallTable,
  .indexTable {
    min-width: 720px !important;
  }

  th {
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: .06em;
  }

  td {
    padding: 8px;
  }

  .area {
    font-size: 13px;
  }

  .sectorName,
  .drillName {
    min-height: 40px;
    padding: 8px 9px;
  }

  .cell {
    min-width: 70px;
    min-height: 42px;
    padding: 9px 7px;
    border-radius: 12px;
  }

  .cellMain {
    font-size: 14px;
  }

  .rankMove {
    min-width: 24px;
    height: 20px;
    font-size: 10px;
    margin-right: 5px;
  }

  .tooltip {
    display: none !important;
  }

  .modalBackdrop,
  .chartBackdrop {
    align-items: stretch;
    justify-content: stretch;
    padding: 8px;
  }

  .modal,
  .chartModal,
  .indexModal {
    width: 100%;
    max-height: calc(100vh - 16px);
    padding: 16px;
    border-radius: 20px;
  }

  .modalTop,
  .chartTop {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .modalTop h2,
  .chartTop h2 {
    font-size: 28px;
  }

  .modalTop p,
  .chartTop p {
    font-size: 12px;
  }

  .modalCrumbs {
    gap: 6px;
  }

  .crumb {
    padding: 8px 10px;
    min-height: 38px;
  }

  .bubbleBox,
  .chartBox {
    padding: 12px;
    border-radius: 18px;
  }

  .bubbleBox h3 {
    font-size: 20px;
  }

  .historyChart {
    height: 240px;
  }

  .historyStats div {
    padding: 10px;
  }

  .historyStats strong {
    font-size: 18px;
  }

  .rangeTabs {
    gap: 6px;
  }

  .rangeTabs button {
    flex: 1 1 calc(25% - 6px);
    padding: 9px 8px;
  }

  .indexTabs button {
    flex: 1 1 calc(50% - 6px);
  }

  .exitHeatmapOnly {
    top: auto;
    right: 12px;
    bottom: 12px;
  }

  body.heatmapOnly .wrap {
    padding: 10px;
  }
}

@media (max-width: 430px) {
  .wrap {
    padding: 12px 10px 30px;
  }

  .title {
    font-size: 27px;
  }

  .grid4,
  .grid7,
  .miniCards,
  .historyStats {
    grid-template-columns: 1fr;
  }

  .topActionBtn {
    flex-basis: 100%;
  }

  .controlGroup.dateGroup {
    grid-template-columns: 1fr 1fr;
  }

  .controlGroup.dateGroup input[type="date"] {
    grid-column: 1 / -1;
    order: -1;
  }

  .controlGroup.dateGroup .actionBtn:last-child {
    grid-column: 1 / -1;
  }

  .section > .tablewrap #breadthTable,
  .smallTable,
  .indexTable {
    min-width: 650px !important;
  }

  .cell {
    min-width: 64px;
  }

  .modal,
  .chartModal,
  .indexModal {
    padding: 14px;
    border-radius: 18px;
  }
}



/* Daily Number brand system: single-file light/dark theme */
:root{
  --brand-red:#ED1E3D;
  --brand-green:#29B37D;
  --brand-bg-light:#F6F7F9;
  --brand-bg-dark:#0B1220;
  --brand-panel-light:#FFFFFF;
  --brand-panel-dark:#111827;
  --brand-slate:#2B313A;
  --brand-border:#4A525E;
}
body{
  background:var(--brand-bg-light) !important;
}
body.dark{
  --bg:var(--brand-bg-dark) !important;
  --panel:#111827 !important;
  --card:#111827 !important;
  --text:#F5F7FA !important;
  --muted:#A7B2C3 !important;
  --border:#2D3747 !important;
  --soft:#151D2A !important;
  background:var(--brand-bg-dark) !important;
}
.brand-logo-wrap{
  width:min(100%, 1320px);
  line-height:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.brand-logo{
  width:100%;
  height:auto;
  display:block;
  border:0;
  background:transparent;
  border-radius:0;
}
.brand-logo.dark-logo{display:none}
body.dark .brand-logo.light-logo{display:none}
body.dark .brand-logo.dark-logo{display:block}
.theme,.top-actions .theme{
  border-color:rgba(74,82,94,.45) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.08) !important;
}
body.dark .theme{background:#111827 !important;box-shadow:0 18px 44px rgba(0,0,0,.28) !important;}
.theme button.active,.tab.active,.rankTabs button.active,.actionBtn.primary,.topActionBtn.primary,.indexTabs button.active,.rangeTabs button.active,.crumb.current{
  background:var(--brand-red) !important;
  border-color:var(--brand-red) !important;
  color:#fff !important;
}
.selector:hover,.actionBtn:hover,.topActionBtn:hover,.indexTabs button:hover,.crumb:hover{
  border-color:rgba(237,30,61,.45) !important;
}
.selector.active{
  border-color:var(--brand-red) !important;
  box-shadow:0 16px 34px rgba(237,30,61,.14), inset 0 0 0 1px var(--brand-red) !important;
  background:linear-gradient(180deg,rgba(237,30,61,.08),rgba(237,30,61,.02)) !important;
}
.selector.reading.active{
  border-color:var(--brand-green) !important;
  box-shadow:0 16px 34px rgba(41,179,125,.16), inset 0 0 0 1px var(--brand-green) !important;
  background:linear-gradient(180deg,rgba(41,179,125,.12),rgba(41,179,125,.03)) !important;
}
.selector.active h4,.blue,.eyebrow{color:var(--brand-red) !important}
.selector.reading.active h4,.green{color:var(--brand-green) !important}
.red{color:var(--brand-red) !important}
.green5{background:#188C61 !important;color:#fff !important}
.green4{background:var(--brand-green) !important;color:#062418 !important}
.green3{background:rgba(41,179,125,.22) !important;color:#0F5B3E !important}
.cell.red{background:rgba(237,30,61,.18) !important;color:#8B1022 !important}
.red2{background:var(--brand-red) !important;color:#fff !important}
.blueCell{background:rgba(237,30,61,.14) !important;color:#8B1022 !important}
.pill.up,.pill.very-healthy,.pill.healthy{background:rgba(41,179,125,.12) !important;color:var(--brand-green) !important;border-color:rgba(41,179,125,.28) !important}
.pill.down,.pill.very-weak{background:rgba(237,30,61,.10) !important;color:var(--brand-red) !important;border-color:rgba(237,30,61,.28) !important}
.bar > span{background:linear-gradient(90deg,var(--brand-red) 0%,var(--brand-green) 100%) !important;}
body.dark .panel,body.dark .section,body.dark .card,body.dark .modal,body.dark .chartModal{
  background:#111827 !important;
  border-color:#2D3747 !important;
}
body.dark th{background:#151D2A !important}
body.dark .control-select, body.dark .tab, body.dark .topActionBtn, body.dark .actionBtn, body.dark .date-pill{
  background:#111827 !important;
  color:#F5F7FA !important;
  border-color:#2D3747 !important;
}
@media(max-width:768px){.brand-logo-wrap{width:100%;}}


/* Focused colour fix: remove blue accents and fix dark table headings */
:root{
  --blue:#111827 !important;
}
body.dark{
  --blue:#F5F7FA !important;
}
.eyebrow,
.step small,
.blue,
.selector.active h4,
.heatHeader:hover,
.crumb:hover,
.indexTabs button:hover,
.tooltip .tHint,
.tooltip .tClick{
  color:var(--text) !important;
}
.selector.reading.active h4,
.green{
  color:var(--brand-green, #29B37D) !important;
}
a,
a:visited{
  color:var(--text) !important;
}
.selector:hover,
.actionBtn:hover,
.topActionBtn:hover,
.indexTabs button:hover,
.crumb:hover,
.universe-btn:hover,
.tab:hover{
  border-color:rgba(237,30,61,.45) !important;
}
body.dark th,
body.dark thead th,
body.dark .smallTable thead th,
body.dark .indexTable th,
body.dark .ranking-table th,
body.dark table th{
  background:#1F2329 !important;
  color:#F5F7FA !important;
  border-color:#2B313A !important;
}
body.dark td,
body.dark table td{
  color:var(--text) !important;
  border-color:#2B313A !important;
}
body.dark .area,
body.dark td.area,
body.dark .name-cell strong,
body.dark .metric-line strong,
body.dark .streak-item strong,
body.dark .feature-row strong,
body.dark .feature-row b{
  color:#F5F7FA !important;
}
body.dark .tablewrap,
body.dark .indexTableWrap{
  border-color:#2B313A !important;
}
body.dark tbody tr:hover td,
body.dark .smallTable tbody tr:hover td,
body.dark .indexTable tbody tr:hover td{
  background:#151D2A !important;
  color:#F5F7FA !important;
}

/* Sidebar update: heatmap-only mode retired */
.exitHeatmapOnly{display:none!important;}
body.heatmapOnly .top,body.heatmapOnly .panel,body.heatmapOnly .theme{display:flex;}