:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --green:#29B37D;
  --red:#ED1E3D;
  --yellow:#f59e0b;
  --shadow:0 14px 36px rgba(17,24,39,.08);
  --soft-green:#ecfdf5;
  --soft-red:#fef2f2;
  --soft-yellow:#fffbeb;
  --soft-blue:#eff6ff;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.dark{
  --bg:#0B1220;
  --card:#111827;
  --text:#F5F7FA;
  --muted:#A7B2C3;
  --border:#2D3747;
  --shadow:0 18px 44px rgba(0,0,0,.26);
}
.page{max-width:1420px;margin:0 auto;padding:42px 30px 80px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.eyebrow{color:var(--text);font-size:13px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
h1{margin:0;font-size:clamp(38px,4.8vw,58px);line-height:.98;letter-spacing:-.055em;font-weight:950}
.subtitle{display:none}
.top-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;justify-content:flex-start}
.theme{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px;display:flex;gap:6px;box-shadow:var(--shadow)}
.back-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:12px 16px;font-size:12px;font-weight:950;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px rgba(17,24,39,.05);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.back-btn:hover{transform:translateY(-1px);border-color:rgba(237,30,61,.45)}
.theme button{border:0;background:transparent;color:var(--muted);font-weight:950;padding:10px 16px;border-radius:999px;cursor:pointer;font-family:inherit}
.theme button.active{background:var(--red);color:#fff}
.date-pill{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px 14px;min-width:200px;box-shadow:var(--shadow);text-align:right}
.date-pill strong{display:block;font-size:14px}
.date-pill span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.universe-switcher{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0 24px}
.universe-btn{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;padding:12px 18px;font-size:14px;font-weight:950;cursor:pointer;box-shadow:0 6px 18px rgba(17,24,39,.05);transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease}
.universe-btn:hover{transform:translateY(-1px);border-color:rgba(237,30,61,.45)}
.universe-btn.active{background:var(--red);color:#fff;border-color:var(--red)}
.card{background:var(--card);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.stat-card{padding:22px 18px;min-height:126px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stat-label{color:#111827;font-size:17px;font-weight:950;text-transform:uppercase;letter-spacing:.045em;line-height:1.3}
.stat-value{margin-top:12px;font-size:34px;font-weight:950;letter-spacing:-.05em}
.stat-note{display:none}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}.blue{color:#2563eb}
.stat-card.strong-improving{border-color:rgba(41,179,125,.35);background:linear-gradient(135deg,rgba(41,179,125,.08),var(--card))}
.stat-card.strong-weakening{border-color:rgba(37,99,235,.35);background:linear-gradient(135deg,rgba(37,99,235,.08),var(--card))}
.stat-card.weak-improving{border-color:rgba(245,158,11,.38);background:linear-gradient(135deg,rgba(245,158,11,.10),var(--card))}
.stat-card.weak-deteriorating{border-color:rgba(237,30,61,.35);background:linear-gradient(135deg,rgba(237,30,61,.08),var(--card))}
.quad-card{padding:26px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-title{margin:0;font-size:34px;letter-spacing:-.055em;font-weight:950}
.section-kicker{color:var(--muted);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.control-select{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:11px 15px;font-size:13px;font-weight:850;color:var(--text);outline:none;min-width:160px;cursor:pointer;box-shadow:0 4px 14px rgba(17,24,39,.04)}
.chart-shell{position:relative;display:grid;grid-template-columns:58px 62px 1fr;grid-template-rows:1fr 64px;gap:0;margin-top:20px}
.y-axis{grid-row:1;grid-column:1;position:relative;height:640px;display:flex;align-items:center;justify-content:center;color:#111827;font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:17px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;line-height:1.15;padding:8px 0}
.y-ticks{grid-row:1;grid-column:2;position:relative;height:640px;width:62px;font-size:21px;color:#111827;font-weight:950;text-align:right;padding-right:14px}
.y-ticks span{position:absolute;right:14px;transform:translateY(50%)}
.y-ticks .t30{top:0}.y-ticks .t15{top:25%}.y-ticks .t0{top:50%}.y-ticks .tm15{top:75%}.y-ticks .tm30{top:100%}
.quadrant{grid-column:3;grid-row:1;position:relative;height:640px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:
  linear-gradient(to right,rgba(245,158,11,.11) 0 50%,rgba(41,179,125,.085) 50% 100%) top/100% 50% no-repeat,
  linear-gradient(to right,rgba(237,30,61,.075) 0 50%,rgba(37,99,235,.095) 50% 100%) bottom/100% 50% no-repeat,
  var(--card);
}
.quadrant::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed rgba(107,114,128,.5);z-index:1}
.quadrant::after{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px dashed rgba(107,114,128,.5);z-index:1}
.gridline{position:absolute;left:0;right:0;border-top:1px solid rgba(107,114,128,.12);z-index:0}.g1{top:25%}.g2{top:75%}
.vgrid{position:absolute;top:0;bottom:0;border-left:1px solid rgba(107,114,128,.12);z-index:0}.v1{left:25%}.v2{left:75%}
.q-label{position:absolute;z-index:2;padding:18px 20px;max-width:360px}
.q-label strong{display:block;font-size:13px;font-weight:950;letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px}
.q-label span{display:block;color:#111827;font-size:13px;font-weight:800}
.q-tl{left:0;top:0}.q-tr{right:0;top:0;text-align:right}.q-bl{left:0;bottom:0}.q-br{right:0;bottom:0;text-align:right}
.q-tl strong{color:#d97706}.q-tr strong{color:var(--green)}.q-bl strong{color:var(--red)}.q-br strong{color:#2563eb}
.sector{position:absolute;z-index:5;left:calc(var(--x) * 1%);top:calc((100 - ((var(--y) + 30) / 60 * 100)) * 1%);transform:translate(-50%,-50%);cursor:pointer;transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),transform .18s ease,filter .18s ease}
.sector:hover{transform:translate(-50%,-50%) scale(1.08);z-index:12;filter:drop-shadow(0 16px 20px rgba(17,24,39,.16))}
.tail{display:none}
.dot{width:34px;height:34px;border-radius:999px;background:var(--c);box-shadow:0 14px 26px rgba(17,24,39,.22);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0;font-weight:950;position:relative;z-index:2;border:3px solid rgba(255,255,255,.82)}
.label{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);white-space:nowrap;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:14px;padding:8px 11px;backdrop-filter:blur(8px);box-shadow:0 8px 18px rgba(17,24,39,.06);text-align:center;width:max-content;max-width:190px}
.label strong{display:block;font-size:14px;font-weight:950;letter-spacing:-.01em}
.label span{display:block;margin-top:2px;font-size:12px;font-weight:950;color:var(--c)}
.sector.left .label{left:auto;right:36px;text-align:right}
.sector.above .label{left:50%;top:auto;bottom:34px;transform:translateX(-50%);text-align:center}
.sector.below .label{left:50%;top:34px;transform:translateX(-50%);text-align:center}
.sector.tight .label{padding:7px 9px}
.x-axis{grid-column:3;grid-row:2;position:relative;height:64px;color:var(--muted);font-weight:950;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.x-title{position:absolute;left:50%;top:30px;transform:translateX(-50%);color:#111827;font-size:17px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.x-title::after{content:"→";margin-left:14px;color:var(--muted);font-size:24px;vertical-align:-2px}
.x-ticks span{position:absolute;top:8px;transform:translateX(-50%);font-size:19px;color:#111827;font-weight:950}
.x-ticks span:nth-child(1){left:0}.x-ticks span:nth-child(2){left:25%}.x-ticks span:nth-child(3){left:50%}.x-ticks span:nth-child(4){left:75%}.x-ticks span:nth-child(5){left:100%}
.legend-grid{display:grid;grid-template-columns:1.1fr 1fr 1.15fr 1fr;gap:12px;margin-top:18px}
.legend-card{border:1px solid var(--border);border-radius:18px;background:var(--card);padding:16px}
.legend-card h3{margin:0 0 10px;font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.legend-card p{margin:0;color:var(--text);font-size:14px;line-height:1.45;font-weight:760}
.legend-row{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--border);padding-top:8px;margin-top:8px;color:var(--muted);font-size:13px;font-weight:800}
.legend-row strong{color:var(--text)}
.table-card{margin-top:18px;overflow:hidden}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th{color:var(--muted);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:18px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 90%,#f3f4f6)}
td{padding:18px 20px;border-bottom:1px solid var(--border);font-size:15px;font-weight:800}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--card) 90%,#f8fafc)}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 11px;font-size:13px;font-weight:950;white-space:nowrap}
.pill.up{background:var(--soft-green);color:var(--green);border:1px solid rgba(41,179,125,.24)}
.pill.down{background:var(--soft-red);color:var(--red);border:1px solid rgba(237,30,61,.24)}
.pill.flat{background:#f3f4f6;color:var(--muted);border:1px solid rgba(107,114,128,.14)}
body.dark .pill.flat{background:#151D2A}
body.dark .stat-label, body.dark .q-label span, body.dark .x-title, body.dark .x-ticks span, body.dark .y-axis, body.dark .y-ticks{color:#F5F7FA}
body.dark .stat-card.strong-improving{background:linear-gradient(135deg,rgba(41,179,125,.16),var(--card))}
body.dark .stat-card.strong-weakening{background:linear-gradient(135deg,rgba(37,99,235,.18),var(--card))}
body.dark .stat-card.weak-improving{background:linear-gradient(135deg,rgba(245,158,11,.16),var(--card))}
body.dark .stat-card.weak-deteriorating{background:linear-gradient(135deg,rgba(237,30,61,.16),var(--card))}
.tooltip{position:fixed;z-index:1000;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .08s,transform .08s;background:#111827;color:#fff;border-radius:18px;padding:16px 17px;box-shadow:0 20px 50px rgba(0,0,0,.25);min-width:280px}
.tooltip.open{opacity:1;transform:translateY(0)}
.tooltip h3{margin:0 0 6px;font-size:18px;letter-spacing:-.03em}
.tooltip p{margin:0 0 12px;color:#cbd5e1;font-size:13px;line-height:1.4;font-weight:700}
.tip-row{display:flex;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,255,255,.15);padding-top:8px;margin-top:8px;font-size:13px}.tip-row span:first-child{color:#cbd5e1}.tip-row span:last-child{font-weight:950}
@keyframes enterDot{from{opacity:0;transform:translate(-50%,-50%) scale(.78)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.sector{animation:enterDot .45s ease both}
@media(max-width:1050px){
  .summary-grid,.legend-grid{grid-template-columns:repeat(2,1fr)}
  .quadrant,.y-axis,.y-ticks{height:560px}
  .chart-shell{grid-template-columns:44px 52px 1fr}
  .label{font-size:12px}
}
@media(max-width:760px){
  .page{padding:18px 12px 42px}
  .topbar,.section-head{flex-direction:column;align-items:stretch}
  .top-actions{align-items:flex-start;width:100%}
  .date-pill{text-align:left;width:100%}
  .universe-switcher{display:grid;grid-template-columns:repeat(2,1fr)}
  .universe-btn{text-align:center}
  .summary-grid,.legend-grid{grid-template-columns:1fr}
  .quad-card{padding:14px}
  .chart-shell{grid-template-columns:36px 48px minmax(720px,1fr);overflow-x:auto;padding-bottom:10px}
  .quadrant,.y-axis,.y-ticks{height:520px}
  .label{padding:6px 8px}
  .label strong{font-size:12px}
  .label span{font-size:11px}
  .x-axis{min-width:720px}
  table{min-width:780px}
  .table-card{overflow:auto}
}

/* V5 clean-up: consistent cards, clean quadrant axis, and uniform sector labels */
.summary-grid{align-items:stretch;}
.stat-card{height:128px;min-height:128px;padding:18px;gap:8px;}
.stat-card .stat-label{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;}
.stat-card .stat-value{margin-top:0;line-height:1;}
.card{border-radius:24px;}
.quad-card,.table-card{border-radius:24px;box-shadow:var(--shadow);}
.chart-shell{grid-template-columns:74px 66px minmax(0,1fr);align-items:stretch;}
.y-axis{grid-column:1;grid-row:1;height:640px;padding:0 14px;border:1px solid var(--border);border-right:0;border-radius:20px 0 0 20px;background:color-mix(in srgb,var(--card) 94%,#f8fafc);}
.y-ticks{grid-column:2;grid-row:1;height:640px;width:66px;padding-right:16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 94%,#f8fafc);}
.y-ticks span{right:16px;}
.quadrant{border-radius:0 20px 20px 0;}
.q-label{padding:16px 18px;max-width:350px;}
.q-label strong{text-transform:none;font-size:14px;letter-spacing:-.01em;}
.q-label span{font-size:13px;line-height:1.35;}
.label{width:205px;height:50px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 12px;white-space:normal;}
.label strong{font-size:13px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.label span{font-size:12px;line-height:1;}
.sector.left .label{right:34px;}
.sector.above .label{bottom:34px;}
.sector.below .label{top:34px;}
.table-card table{table-layout:fixed;}
.table-card th,.table-card td{height:56px;vertical-align:middle;}
.tooltip p{display:none;}
body.dark .y-axis,body.dark .y-ticks{background:#111827;border-color:#2D3747;}
@media(max-width:1050px){.chart-shell{grid-template-columns:64px 58px minmax(720px,1fr)}.y-axis,.y-ticks,.quadrant{height:560px}.label{width:180px}}
@media(max-width:760px){.chart-shell{grid-template-columns:48px 52px minmax(720px,1fr)}.y-axis,.y-ticks,.quadrant{height:520px}.label{width:170px;height:46px}}

/* V6 sector label and dot clean-up */
.dot{width:34px !important;height:34px !important;border:4px solid rgba(255,255,255,.9) !important;box-shadow:0 16px 30px rgba(17,24,39,.24) !important;}
.label{left:50% !important;right:auto !important;top:auto !important;bottom:44px !important;transform:translateX(-50%) !important;width:max-content !important;max-width:190px !important;height:auto !important;min-height:0 !important;padding:8px 11px !important;white-space:nowrap !important;text-align:center !important;display:block !important;}
.label strong{display:block;font-size:13px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;}
.label span{display:block;margin-top:3px;font-size:12px !important;line-height:1 !important;}
.sector.left .label,.sector.above .label,.sector.below .label,.sector.tight .label{left:50% !important;right:auto !important;top:auto !important;bottom:44px !important;transform:translateX(-50%) !important;text-align:center !important;}
@media(max-width:1050px){.label{max-width:170px !important;}}
@media(max-width:760px){.label{max-width:160px !important;bottom:42px !important;}.dot{width:40px !important;height:40px !important;}}


/* V7 uncluttered quadrant: dots stay visible, labels only appear on hover */
.sector{
  left:clamp(3.5%, calc(var(--x) * 1%), 96.5%) !important;
  top:clamp(4.5%, calc(var(--yPct) * 1%), 95.5%) !important;
}
.dot{
  width:52px !important;
  height:52px !important;
  font-size:16px !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  color:#fff !important;
  border:4px solid rgba(255,255,255,.92) !important;
  box-shadow:0 18px 34px rgba(17,24,39,.25) !important;
}
.label{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  bottom:52px !important;
  transform:translateX(-50%) translateY(6px) !important;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease !important;
  z-index:9 !important;
}
.sector:hover .label{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateX(-50%) translateY(0) !important;
}
.sector.label-below .label{
  top:52px !important;
  bottom:auto !important;
  transform:translateX(-50%) translateY(-6px) !important;
}
.sector.label-below:hover .label{transform:translateX(-50%) translateY(0) !important;}
.sector.label-left .label{
  left:auto !important;
  right:52px !important;
  transform:translateY(50%) translateX(6px) !important;
  bottom:50% !important;
}
.sector.label-left:hover .label{transform:translateY(50%) translateX(0) !important;}
.sector.label-right .label{
  left:52px !important;
  right:auto !important;
  transform:translateY(50%) translateX(-6px) !important;
  bottom:50% !important;
}
.sector.label-right:hover .label{transform:translateY(50%) translateX(0) !important;}
.quadrant{overflow:hidden !important;}


/* V9 final: bigger dots and no white hover labels, tooltip only */
.dot{
  width:64px !important;
  height:64px !important;
  font-size:18px !important;
  border:5px solid rgba(255,255,255,.94) !important;
  box-shadow:0 20px 38px rgba(17,24,39,.28) !important;
}
.label,
.sector:hover .label,
.sector.label-below .label,
.sector.label-left .label,
.sector.label-right .label{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
@media(max-width:760px){
  .dot{width:54px !important;height:54px !important;font-size:15px !important;}
}


/* V13 smooth momentum animation: dots glide when lookback changes */
.sector{
  transition:left .40s cubic-bezier(.22,.61,.36,1), top .40s cubic-bezier(.22,.61,.36,1), transform .18s ease, filter .18s ease !important;
}