:root {
  color-scheme: dark;
  --bg: #071019; --panel: #0d1823; --panel2: #132231; --panel3: #182b3c; --line: #21384b;
  --text: #edf6ff; --muted: #8da4b7; --accent: #44d0a8; --accent2: #72a7ff;
  --pos: #4bd69e; --neg: #ff6b75; --warn: #f4bd50;
  --radius: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { background-image: radial-gradient(circle at 80% -10%, rgba(78,141,219,.14), transparent 38%), radial-gradient(circle at 25% 20%, rgba(68,208,168,.05), transparent 34%); }
h1 { font-size: 22px; margin: 0 0 4px; font-weight: 650; }
h2 { font-size: 13px; margin: 0 0 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.muted { color: var(--muted); }
.pos { color: var(--pos); } .neg { color: var(--neg); }

.app { display: flex; min-height: 100vh; }
#nav { width: clamp(220px, 19vw, 304px); flex: none; padding: 20px 15px; border-right: 1px solid var(--line); background: rgba(7,16,25,.88);
  backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
#nav .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 10px; letter-spacing: .03em; }
#nav .brand i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-style: normal; font-weight: 850; color: #06140f; background: linear-gradient(135deg, var(--accent), #a5ffe3); box-shadow: 0 0 28px rgba(68,208,168,.2); }
#nav .brand span, #nav .brand small { display: block; }
#nav .brand small { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.nav-links { display: flex; flex-direction: column; gap: 3px; }
#nav button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; color: var(--muted); transition: .15s ease; }
#nav button:hover { background: var(--panel); color: var(--text); }
#nav button.on { background: linear-gradient(90deg, rgba(68,208,168,.13), rgba(114,167,255,.06)); color: var(--text); font-weight: 650; box-shadow: inset 2px 0 var(--accent); }
.nav-tools { margin-top: auto; display: grid; gap: 10px; }
.nav-local-badge { margin-top: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(68,208,168,.22); border-radius: 8px; color: var(--accent); background: rgba(68,208,168,.05); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-align: left; }
.app-version { padding-left: 8px; border-left: 1px solid rgba(68,208,168,.22); color: #a9c7ff; font-family: ui-monospace, Consolas, monospace; font-size: 9px; letter-spacing: .03em; }
.nav-local-badge + .nav-tools { margin-top: 0; }
main { flex: 1 1 0; padding: 22px clamp(14px, 2.4vw, 34px) 60px; max-width: none; min-width: 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 20px; }
.head p { margin: 0; color: var(--muted); }

.btn { cursor: pointer; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  padding: 7px 14px; border-radius: 8px; font: inherit; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { color: var(--neg); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.card { background: linear-gradient(145deg, rgba(19,34,49,.95), rgba(13,24,35,.95)); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.card .l { color: var(--muted); font-size: 12px; }
.card .v { font-size: 20px; font-weight: 650; margin-top: 2px; }
.panel { background: linear-gradient(145deg, rgba(13,24,35,.97), rgba(10,20,30,.97)); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px; margin-bottom: 18px; box-shadow: 0 14px 42px rgba(0,0,0,.14); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 14px; margin-bottom: 18px; }
.grid2 .panel { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--panel2); }
.scroll { overflow-x: auto; }
td.num, th.num { text-align: right; }
.bar { display: inline-block; width: 70px; height: 6px; background: var(--panel2); border-radius: 3px;
  vertical-align: middle; position: relative; margin-left: 8px; }
.bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.bar i.pos { background: var(--pos); } .bar i.neg { background: var(--neg); }

.chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted); margin-right: 4px; }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.live { color: var(--accent); } 

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 7px 14px; color: var(--muted); }
.seg button.on { background: var(--panel2); color: var(--text); font-weight: 600; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .sp { flex: 1; }
input, select, textarea { font: inherit; color: var(--text); background: #09141e; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; width: 100%; }
.toolbar input, .toolbar select { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .62; cursor: not-allowed; }

.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .line { fill: none; stroke-width: 2; }
.chart .line.pos { stroke: var(--pos); } .chart .line.neg { stroke: var(--neg); }
.chart .area.pos { fill: var(--pos); opacity: .10; } .chart .area.neg { fill: var(--neg); opacity: .10; }
.chart .ref { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.legend { font-size: 12px; color: var(--muted); margin-top: 6px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h3 { color: var(--text); margin: 0 0 6px; }
.note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.verdict { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--panel2); }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex;
  justify-content: center; align-items: flex-start; padding: 40px 16px; overflow-y: auto; z-index: 10; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 940px; padding: 22px; }
.modal h3 { margin: 0 0 14px; font-size: 17px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.f { display: flex; flex-direction: column; gap: 4px; }
.f > span { font-size: 12px; color: var(--muted); }
.f.wide { grid-column: 1 / -1; }
.sect { margin: 16px 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dz { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.thumb { position: relative; }
.thumb img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.thumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: var(--neg); color: #fff; cursor: pointer; line-height: 1; }
.foot { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.foot .sp { flex: 1; }
.err { color: var(--neg); font-size: 13px; }

/* Public/local-first edition */
.eyebrow { display: block; margin-bottom: 8px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.local-data-card { border-color: rgba(68,208,168,.3); box-shadow: inset 3px 0 rgba(68,208,168,.55), 0 14px 42px rgba(0,0,0,.14); }
.principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.principle-card { position: relative; min-height: 170px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(13,24,35,.98), rgba(9,19,29,.98)); }
.principle-card > span { position: absolute; top: 6px; right: 14px; color: rgba(114,167,255,.12); font-size: 54px; font-weight: 850; line-height: 1; }
.principle-card h2 { position: relative; margin-top: 46px; color: var(--text); font-size: 15px; letter-spacing: 0; text-transform: none; }
.principle-card p { position: relative; margin: 0; color: var(--muted); }
.support-hero { position: relative; min-height: 210px; display: grid; align-items: center; overflow: hidden; border-color: rgba(114,167,255,.3); background: radial-gradient(circle at 80% 50%, rgba(114,167,255,.18), transparent 36%), linear-gradient(135deg, #101f2e, #09131d); }
.support-hero::after { content: '$1'; position: absolute; right: clamp(18px, 7vw, 100px); color: rgba(68,208,168,.09); font-size: clamp(80px, 13vw, 180px); font-weight: 900; }
.support-hero > div { position: relative; z-index: 1; max-width: 700px; }
.support-hero h1 { font-size: clamp(26px, 4vw, 48px); line-height: 1.03; letter-spacing: -.04em; }
.support-hero p { max-width: 620px; color: var(--muted); font-size: 15px; }
.support-wallet select { max-width: 260px; margin-bottom: 12px; }
.wallet-address { display: block; width: 100%; margin: 2px 0 10px; padding: 14px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 8px; color: #dcebff; background: var(--bg); user-select: all; }
.network-warning { padding: 10px 12px; border: 1px solid rgba(244,189,80,.35); border-radius: 8px; color: #e8d29c; background: rgba(244,189,80,.06); }
.support-empty { border-style: dashed; text-align: center; }
.onboarding-overlay { align-items: center; background: rgba(2,7,12,.82); backdrop-filter: blur(10px); }
.onboarding-modal { max-width: 760px; padding: clamp(24px, 5vw, 48px); border-color: rgba(114,167,255,.38); background: radial-gradient(circle at 100% 0, rgba(114,167,255,.16), transparent 42%), var(--panel); box-shadow: 0 28px 90px rgba(0,0,0,.45); }
.onboarding-modal h3 { max-width: 600px; margin-bottom: 8px; font-size: clamp(27px, 5vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
.onboard-lead { max-width: 630px; color: var(--muted); font-size: 15px; }
.onboard-support-note { max-width: 650px; margin: 14px 0 0; color: #91a9ba; font-size: 12px; }
.onboard-support-note > span { color: var(--accent); font-size: 16px; vertical-align: -1px; }
.inline-link { border: 0; padding: 0; color: #a9c7ff; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inline-link:hover { color: #dce9ff; }
.onboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 24px 0 4px; }
.onboard-grid > div { padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(7,16,25,.66); }
.onboard-grid b, .onboard-grid span { display: block; }
.onboard-grid b { color: var(--accent2); font-size: 10px; letter-spacing: .08em; }
.onboard-grid span { margin-top: 5px; color: #c1d1df; font-size: 12px; }

/* Calendar heatmap */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.wd { color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; padding: 2px; text-transform: uppercase; }
.day { min-height: 94px; border: 1px solid var(--line); border-radius: 9px; padding: 9px; position: relative; background: var(--panel2); display: flex; flex-direction: column; gap: 3px; }
.day.blank { visibility: hidden; }
.day.has { cursor: pointer; }
.day.has:hover { border-color: var(--accent); transform: translateY(-1px); }
.day.pos { background: color-mix(in srgb, var(--pos) calc(var(--a) * 100%), var(--panel)); }
.day.neg { background: color-mix(in srgb, var(--neg) calc(var(--a) * 100%), var(--panel)); }
.dn { font-weight: 700; }
.dv { font-size: 18px; font-weight: 750; margin-top: auto; }
.dc { color: var(--muted); font-size: 11px; }

/* Mistakes, insights and simulations */
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.tag { cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 999px; padding: 5px 10px; }
.tag:hover { color: var(--text); }
.tag.on { color: #fff; background: var(--warn); border-color: var(--warn); }
.tagadd { display: flex; gap: 8px; max-width: 420px; }
.insights { margin: 0; padding-left: 20px; }
.insights li { margin: 7px 0; }
.chart .hist.pos { fill: var(--pos); opacity: .85; }
.chart .hist.neg { fill: var(--neg); opacity: .85; }
.chart .band { fill: var(--accent); }
.chart .band.outer { opacity: .10; }
.chart .band.inner { opacity: .22; }
.chart .median { fill: none; stroke: var(--accent); stroke-width: 2; }

/* Dashboard analytics */
.dashboard-tools { margin: 0; }
.dashboard-tools select { min-width: 132px; }
.demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid rgba(114,167,255,.38); border-radius: 11px; background: linear-gradient(110deg, rgba(114,167,255,.10), rgba(68,208,168,.06)); box-shadow: inset 3px 0 var(--accent2); }
.demo-banner div { min-width: 0; }
.demo-banner b, .demo-banner span { display: block; }
.demo-banner b { color: #b9d0ff; font-size: 11px; letter-spacing: .08em; }
.demo-banner span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.demo-banner .btn { flex: none; }
.performance-lab { margin-top: 20px; }
.analytics-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 26px 0 12px; padding-top: 17px; border-top: 1px solid var(--line); }
.analytics-heading.compact { margin-top: 24px; }
.analytics-heading h2 { margin: 0 0 3px; color: var(--text); font-size: 16px; letter-spacing: -.01em; text-transform: none; }
.analytics-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.sample-badge { flex: none; border: 1px solid var(--warn); border-radius: 999px; padding: 4px 9px; color: var(--warn); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sample-badge.ready { border-color: var(--pos); color: var(--pos); }
.probability-panel { border-color: rgba(114,167,255,.32); }
.probability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--line); }
.probability-grid > button { min-height: 74px; padding: 11px 12px; border: 0; text-align: left; color: inherit; background: rgba(9,20,30,.96); cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.probability-grid > button:hover { background: rgba(18,37,54,.98); box-shadow: inset 0 -2px var(--accent2); }
.probability-grid > button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent2); outline-offset: -2px; }
.probability-grid span, .probability-grid b { display: block; }
.probability-grid span { color: var(--muted); font-size: 11px; }
.probability-grid b { margin-top: 5px; color: #dcecff; font-size: 16px; }
.analytics-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.analytics-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(13,24,35,.97), rgba(10,20,30,.97)); box-shadow: 0 10px 32px rgba(0,0,0,.12); }
.analytics-card h3 { margin: 0 0 10px; color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.donut-wrap { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 12px; align-items: center; }
.donut { width: 118px; height: 118px; }
.donut-value { fill: var(--text); font-size: 18px; font-weight: 750; }
.donut-label { fill: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.donut-legend { min-width: 0; display: grid; gap: 6px; }
.donut-legend > div, .donut-legend > button { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 7px; align-items: center; width: 100%; border: 0; border-radius: 5px; padding: 3px; color: inherit; background: transparent; text-align: left; font: inherit; font-size: 10px; }
.donut-legend > button { cursor: pointer; }
.donut-legend > button:hover { background: rgba(114,167,255,.09); }
.donut-segment { transition: opacity .15s ease, filter .15s ease; }
.donut-segment:hover { opacity: .8; filter: brightness(1.18); }
.donut-legend i { width: 8px; height: 8px; border-radius: 50%; }
.donut-legend span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.donut-legend b { color: var(--text); font-weight: 650; white-space: nowrap; }
.analytics-lines .panel { min-width: 0; }
.metric-chart .chart { max-height: 220px; }
.chart .metric-line { fill: none; stroke-width: 2.2; }
.chart .metric-line.edge { stroke: var(--accent); }
.chart .metric-line.risk { stroke: var(--neg); }
.completeness-panel > p { margin-top: -4px; }
.completion-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 2fr) 105px; gap: 12px; align-items: center; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(33,56,75,.7); color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.completion-row:hover:not(:disabled) { background: rgba(114,167,255,.04); }
.completion-row:disabled { cursor: default; opacity: .78; }
.completion-row:last-child { border-bottom: 0; }
.completion-row > span { color: #c7d7e3; font-size: 12px; }
.completion-row > div { height: 7px; overflow: hidden; border-radius: 999px; background: var(--panel3); }
.completion-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.completion-row b { color: var(--muted); font-size: 11px; font-weight: 600; text-align: right; }

/* Interactive dashboard intelligence */
.kpi-click { cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.kpi-click:hover { transform: translateY(-1px); border-color: rgba(114,167,255,.55); background: rgba(20,38,55,.96); }
.kpi-click:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.drilldown-modal { width: min(1120px, 95vw); }
.drilldown-head, .panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.drilldown-head h3, .panel-title-row h2 { margin: 0; }
.drilldown-head p, .panel-title-row p { margin: 4px 0 0; }
.decision-quality, .weekly-review, .exposure-panel, .data-quality { margin-top: 18px; }
.decision-matrix { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.decision-cell { min-height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--text); text-align: left; cursor: pointer; }
.decision-cell:disabled { cursor: default; opacity: .55; }
.decision-cell:not(:disabled):hover { border-color: var(--accent2); transform: translateY(-1px); }
.decision-cell span, .decision-cell b, .decision-cell small, .decision-cell em { display: block; }
.decision-cell span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.decision-cell b { margin: 4px 0; font-size: 25px; }
.decision-cell small { min-height: 29px; color: #bdcddd; }
.decision-cell em { margin-top: 7px; font-size: 11px; font-style: normal; font-weight: 700; }
.decision-cell.pos { box-shadow: inset 3px 0 var(--pos); }
.decision-cell.accent { box-shadow: inset 3px 0 var(--accent2); }
.decision-cell.warn { box-shadow: inset 3px 0 var(--warn); }
.decision-cell.neg { box-shadow: inset 3px 0 var(--neg); }
.weekly-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.review-grid button { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: inherit; background: var(--panel2); text-align: left; cursor: pointer; }
.review-grid button:hover { border-color: rgba(114,167,255,.55); }
.review-grid span, .review-grid b { display: block; }
.review-grid span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.review-grid b { margin-top: 4px; }
.next-rule { margin-top: 10px; padding: 13px 14px; border: 1px solid rgba(68,208,168,.3); border-radius: 9px; background: rgba(68,208,168,.06); }
.next-rule span, .next-rule b { display: block; }
.next-rule span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.next-rule b { margin-top: 4px; }
.exposure-warning { padding: 10px 12px; border: 1px solid rgba(255,180,94,.35); border-radius: 8px; color: #ffd099; background: rgba(255,180,94,.07); }
.exposure-layout { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(330px,1.15fr); gap: 12px; margin-top: 13px; }
.correlation-table { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(13,24,35,.97), rgba(10,20,30,.97)); }
.correlation-table h3 { margin: 0 0 10px; color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.quality-score { flex: none; padding: 5px 9px; border: 1px solid var(--pos); border-radius: 999px; color: var(--pos); font-size: 11px; font-weight: 800; }
.quality-score.warn { border-color: var(--warn); color: var(--warn); }
.quality-score.bad { border-color: var(--neg); color: var(--neg); }
.issue-badge { display: inline-flex; border: 1px solid var(--warn); border-radius: 999px; padding: 2px 7px; color: var(--warn); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.issue-badge.critical { border-color: var(--neg); color: var(--neg); }

/* Toxicflow grading */
.grade-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.grade-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 14px; background: var(--panel2); }
.grade-head > div { flex: 1; min-width: 220px; }
.grade-head small { display: block; color: var(--muted); font-weight: 400; }
.grade-score { font-size: 17px; }
.score-meter { height: 5px; background: var(--line); }
.score-meter i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s ease; }
.grade-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-group { grid-column: 1 / -1; padding: 8px 13px; color: var(--accent); background: rgba(68,208,168,.07); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.grade-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: start; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.grade-item:nth-child(odd) { border-right: 1px solid var(--line); }
.grade-item input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.grade-copy strong, .grade-copy small { display: block; }
.grade-copy small { color: var(--muted); margin-top: 2px; line-height: 1.35; }
.grade-weight { color: var(--muted); font-size: 11px; white-space: nowrap; }
.grade-item.missing-critical { box-shadow: inset 3px 0 var(--neg); }
.grade-comment { margin: 12px 14px 8px; padding: 10px 12px; border-radius: 8px; background: var(--panel2); }
.grade-box > .f { margin: 0 14px 14px; }
.grade-badge, .decision { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.grade-aplus, .grade-a { color: var(--pos); border-color: var(--pos); }
.grade-bplus, .grade-b { color: var(--accent); border-color: var(--accent); }
.grade-c { color: var(--warn); border-color: var(--warn); }
.grade-reject { color: var(--neg); border-color: var(--neg); }
.decision-take { color: #fff; background: var(--pos); border-color: var(--pos); }
.decision-conditional { color: #111; background: var(--warn); border-color: var(--warn); }
.decision-pass { color: #fff; background: var(--neg); border-color: var(--neg); }
.warn-text { color: var(--warn); }

/* Persistent desk ribbon: messages read normally while the tape moves left */
.quote-strip { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: stretch; min-height: 66px; margin: -22px -4px 22px; overflow: hidden; border: 1px solid rgba(94,226,188,.42); border-top: 0; border-radius: 0 0 15px 15px; background: linear-gradient(110deg, rgba(9,23,34,.97), rgba(15,40,48,.96) 46%, rgba(13,29,44,.97)); backdrop-filter: blur(18px); box-shadow: 0 12px 36px rgba(0,0,0,.25), 0 0 28px rgba(68,208,168,.08), inset 0 -1px rgba(151,255,225,.06); }
.quote-strip::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.10) 45%, transparent 63%); transform: translateX(-130%); animation: ribbon-shine 8s ease-in-out infinite; }
.quote-label { position: relative; z-index: 2; min-width: 112px; display: grid; place-content: center; padding: 10px 17px; background: linear-gradient(135deg, rgba(68,208,168,.24), rgba(114,167,255,.13)); border-right: 1px solid rgba(103,225,190,.32); box-shadow: 10px 0 24px rgba(2,11,17,.3); }
.quote-label b, .quote-label small { display: block; }
.quote-label b { color: #baffea; font-size: 11px; letter-spacing: .16em; }
.quote-label small { color: #7be2c4; font-size: 8px; letter-spacing: .22em; }
.quote-window { min-width: 0; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.quote-track { display: flex; width: max-content; will-change: transform; animation: ribbon-ltr var(--ribbon-seconds, 90s) linear infinite; }
.quote-strip:hover .quote-track { animation-play-state: paused; }
.quote-lane { display: flex; align-items: center; flex: none; }
.quote-line { display: block; white-space: nowrap; padding-right: 34px; color: #e8f6ff; font-size: 14px; font-weight: 540; letter-spacing: .005em; }
.quote-item { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: #e8f6ff; font-size: 14px; font-weight: 540; letter-spacing: .005em; padding: 0 34px 0 0; }
.quote-item::after { content: '◆'; color: var(--accent); opacity: .6; margin-left: 24px; font-size: 8px; }
.quote-item i { color: #79e0c2; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@keyframes ribbon-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ribbon-shine { 0%,65% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* Risk governor and always-visible sizing */
.risk-governor, .position-calc { border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: rgba(13,24,35,.94); }
.risk-governor.stopped { border-color: var(--neg); box-shadow: 0 0 0 1px rgba(255,107,117,.18), 0 0 24px rgba(255,107,117,.1); }
.rg-top, .pc-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rg-top span { font-weight: 800; }
.rg-meter { height: 4px; background: var(--panel3); border-radius: 9px; margin: 7px 0; overflow: hidden; }
.rg-meter i { display: block; height: 100%; background: var(--neg); }
.risk-governor small, .position-calc small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.position-calc { border-color: rgba(68,208,168,.27); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 12px 28px rgba(0,0,0,.14); }
.pc-title { margin-bottom: 10px; }
.pc-title b { font-size: 14px; }
.pc-title span { color: var(--accent); font-size: 9px; letter-spacing: .14em; }
.position-calc select, .position-calc input { padding: 8px 9px; font-size: 12px; }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; }
.pc-grid .f { gap: 1px; }
.pc-grid .f > span { font-size: 10px; }
.pc-out { min-height: 62px; padding: 11px; margin: 9px 0; border-radius: 9px; background: linear-gradient(135deg, rgba(68,208,168,.09), var(--panel2)); border: 1px solid rgba(68,208,168,.14); }
.pc-out b { display: block; color: #87f0d1; font-size: 18px; }
.pc-note { border-top: 1px solid var(--line); padding-top: 7px; }
.pc-fees { margin-top: 9px; padding: 9px; border: 1px solid rgba(114,167,255,.22); border-radius: 9px; background: rgba(114,167,255,.045); }
.pc-fees.hidden { display: none; }
.pc-fees .pc-grid { margin: 7px 0 0; }
.pc-fees > small { margin-top: 6px; }

/* Pre-trade audit lock */
.plan-lock { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 12px 0 5px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel2); }
.plan-lock b, .plan-lock span, .plan-lock small { display: block; }
.plan-lock small { color: var(--muted); }
.lock-on b { color: var(--accent); letter-spacing: .08em; }
.grade-box.locked { border-color: rgba(68,208,168,.5); }
.confirm-overlay { z-index: 30; align-items: center; }
.confirm-modal { max-width: 460px; }
.confirm-instruction { color: var(--muted); }
.confirm-instruction code { color: var(--accent); background: var(--panel2); padding: 2px 6px; border-radius: 5px; }

/* Private main-branch updater */
.update-overlay { z-index: 70; align-items: center; background: rgba(1,7,12,.76); backdrop-filter: blur(8px); }
.update-modal { max-width: 560px; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 18px; padding: 24px; border-color: rgba(114,167,255,.38); box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 45px rgba(114,167,255,.09); }
.update-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(114,167,255,.45); border-radius: 18px; color: #dce9ff; background: linear-gradient(145deg, rgba(114,167,255,.28), rgba(68,208,168,.14)); font-size: 34px; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.25); }
.update-status { display: grid; gap: 4px; margin: 0 0 13px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.update-status b { color: #a9c7ff; font-size: 13px; }
.update-status span { color: var(--text); }
.update-status small { color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.update-status .err { color: var(--neg); font-family: inherit; margin-top: 5px; }
.version-hop { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; }
.version-hop strong { padding: 5px 8px; border: 1px solid rgba(114,167,255,.25); border-radius: 7px; color: #dce9ff; background: rgba(114,167,255,.08); font: 700 12px/1 ui-monospace, Consolas, monospace; }
.version-hop i { color: var(--accent); font-style: normal; }
.update-notes { margin: 0 0 13px; padding: 13px 14px; border: 1px solid rgba(68,208,168,.2); border-radius: 10px; background: rgba(68,208,168,.045); }
.update-notes > b { color: var(--accent); font-size: 10px; letter-spacing: .12em; }
.update-notes ul { margin: 8px 0 0; padding-left: 18px; color: var(--text); }
.update-notes li + li { margin-top: 5px; }
.update-no-notes { margin: 0 0 13px; }

/* Optional support nudge: first shown after 30–45 minutes, then at most weekly. */
.donation-overlay { z-index: 65; align-items: center; background: rgba(1,7,12,.72); backdrop-filter: blur(8px); }
.donation-modal { max-width: 570px; display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 19px; padding: 25px; border-color: rgba(68,208,168,.34); background: radial-gradient(circle at 0 0, rgba(68,208,168,.12), transparent 42%), var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.58), 0 0 42px rgba(68,208,168,.07); }
.donation-modal h3 { margin: 0 0 8px; color: #edf7ff; font-size: 21px; letter-spacing: -.02em; }
.donation-modal p { margin: 0; color: var(--muted); line-height: 1.55; }
.donation-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(68,208,168,.42); border-radius: 21px; color: #8bf0d1; background: linear-gradient(145deg, rgba(68,208,168,.18), rgba(114,167,255,.12)); font-size: 38px; box-shadow: inset 0 1px rgba(255,255,255,.1), 0 14px 32px rgba(0,0,0,.24); }

/* Equity simulator */
.simulator-controls { border-top: 2px solid var(--accent2); }
.sim-line { fill: none; stroke-width: 1.2; opacity: .34; }
.sim-line.p0 { stroke: var(--accent); } .sim-line.p1 { stroke: var(--accent2); }
.sim-line.p2 { stroke: var(--warn); } .sim-line.p3 { stroke: #b993ff; }

/* Alpha archive */
.alpha-tools { margin: 0; }
.alpha-tools input { min-width: 280px; }
.alpha-summary { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.alpha-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; }
.alpha-filter-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.alpha-filter-chip { display: inline-flex; align-items: center; gap: 8px; max-width: min(420px, 100%); border: 1px solid rgba(94,226,188,.38); border-radius: 999px; padding: 5px 7px 5px 11px; background: rgba(94,226,188,.09); color: #d8fff3; cursor: pointer; font: inherit; font-size: 11px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.alpha-filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alpha-filter-chip b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.09); color: var(--accent); font-size: 15px; line-height: 1; }
.alpha-filter-chip:hover { border-color: var(--accent); background: rgba(94,226,188,.16); transform: translateY(-1px); }
.alpha-filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alpha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 11px; }
.alpha-card { border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: rgba(13,24,35,.92); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.alpha-card p { white-space: pre-wrap; margin: 10px 0 12px; color: #dbe8f2; }
.alpha-card h3 { margin: 8px 0 5px; font-size: 16px; }
.alpha-card ul { margin: 9px 0 11px; padding-left: 18px; color: #cfe0ec; }
.alpha-card li { margin: 4px 0; }
.alpha-count { color: #a9c7ff; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.alpha-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--muted); font-size: 11px; }
.alpha-meta b { color: var(--accent); }
.alpha-contributors { display: block; margin: 9px 0 5px; color: #8eb8ff; line-height: 1.45; }
.topic-chip { cursor: pointer; border: 1px solid rgba(114,167,255,.32); background: rgba(114,167,255,.08); color: #a9c7ff; border-radius: 99px; padding: 3px 8px; margin: 2px 5px 2px 0; font-size: 10px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 18px 0; }
.pager .btn:disabled { opacity: .38; cursor: not-allowed; border-color: var(--line); }
.page-label { min-width: 92px; color: var(--muted); font-size: 11px; text-align: center; }

/* Setup playbooks */
.setup-tools { margin: 0; }
.setup-tools input { min-width: min(360px, 100%); }
.setup-summarybar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 13px; color: var(--muted); font-size: 12px; }
.setup-summarybar b { color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 16px; }
.setup-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(13,24,35,.98), rgba(8,18,28,.98)); box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.setup-image { all: unset; display: block; width: 100%; aspect-ratio: 16 / 8.7; overflow: hidden; cursor: zoom-in; position: relative; background: #07111a; border-bottom: 1px solid var(--line); }
.setup-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .22s ease, filter .22s ease; }
.setup-image:hover img { transform: scale(1.018); filter: brightness(1.07); }
.setup-image span { position: absolute; right: 10px; bottom: 9px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(5,12,18,.82); color: #dcebf4; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .18s; }
.setup-image:hover span, .setup-image:focus span { opacity: 1; }
.setup-copy { padding: 16px 17px 17px; }
.setup-copy h3 { margin: 8px 0 5px; font-size: 19px; }
.setup-copy h4 { margin: 15px 0 7px; color: #a9c7ff; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.setup-copy ol { margin: 0 0 15px; padding-left: 21px; color: #d8e6ef; }
.setup-copy li { margin: 5px 0; line-height: 1.42; }
.setup-summary { margin: 0 0 14px; color: #dceaf3; line-height: 1.48; }
.setup-page { color: var(--muted); font-size: 10px; }
.source-chip { border: 1px solid rgba(68,208,168,.32); border-radius: 999px; padding: 3px 8px; color: #9debd2; background: rgba(68,208,168,.07); font-size: 10px; font-weight: 750; }
.setup-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0; }
.setup-facts > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(114,167,255,.035); }
.setup-facts dt { color: #8eb8ff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.setup-facts dd { margin: 4px 0 0; color: #c9d9e4; font-size: 12px; line-height: 1.42; }
.setup-facts .setup-avoid { border-color: rgba(255,180,94,.20); background: rgba(255,180,94,.035); }
.setup-facts .setup-avoid dt { color: var(--warn); }
.setup-source { display: block; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); }
.setup-lesson { margin: 16px 0; padding: 14px; border: 1px solid rgba(114,167,255,.22); border-radius: 11px; background: linear-gradient(145deg, rgba(114,167,255,.055), rgba(68,208,168,.035)); }
.setup-lesson h4:first-child { margin-top: 0; }
.setup-lesson p { margin: 0; color: #d8e7f1; line-height: 1.55; }
.setup-example { padding-left: 12px; border-left: 2px solid var(--accent); }
.setup-glossary { display: grid; gap: 7px; margin: 0; }
.setup-glossary > div { display: grid; grid-template-columns: minmax(115px, .32fr) 1fr; gap: 10px; padding: 7px 9px; border-radius: 8px; background: rgba(6,15,23,.42); }
.setup-glossary dt { color: #9fc1ff; font-size: 11px; font-weight: 750; }
.setup-glossary dd { margin: 0; color: #c8d9e4; font-size: 12px; line-height: 1.45; }
.setup-lightbox { align-items: center; justify-content: center; padding: 24px; z-index: 50; background: rgba(1,6,10,.88); }
.setup-lightbox figure { width: min(1500px, 96vw); height: 92vh; margin: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; }
.setup-lightbox-tools { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 5px 52px 5px 10px; }
.setup-lightbox-tools button { min-width: 36px; height: 32px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; padding: 0 10px; color: #e7f1f8; background: rgba(13,28,40,.92); cursor: pointer; font: inherit; }
.setup-lightbox-tools button:hover { border-color: var(--accent2); background: rgba(114,167,255,.13); }
.setup-lightbox-tools small { color: var(--muted); }
.setup-zoom-label { min-width: 48px; color: #dcebf4; font-size: 11px; font-weight: 750; text-align: center; }
.setup-viewport { min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #050c12; box-shadow: 0 30px 90px rgba(0,0,0,.55); scrollbar-color: var(--accent2) #07111a; }
.setup-viewport img { display: block; width: 100%; max-width: none; height: auto; object-fit: contain; object-position: top center; user-select: none; transition: width .12s ease; }
.setup-lightbox figcaption { color: #dbe9f3; text-align: center; font-size: 12px; }
.setup-close { position: fixed; top: 18px; right: 22px; z-index: 2; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(8,18,28,.92); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }

@media (max-width: 800px) {
  .app { flex-direction: column; }
  #nav { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  #nav .brand { padding: 0 10px 0 0; align-self: center; }
  .nav-links { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .nav-tools { width: 100%; grid-template-columns: 1fr; }
  .nav-local-badge { width: 100%; order: 3; margin-top: 3px; }
  .position-calc { display: block; }
  main { padding: 18px 14px 50px; }
  .quote-strip { position: static; margin: -18px 0 16px; }
  .cal { grid-template-columns: repeat(7, minmax(42px, 1fr)); gap: 3px; }
  .day { min-height: 70px; padding: 5px; }
  .dc { display: none; }
  .dv { font-size: 12px; }
  .grade-list { grid-template-columns: 1fr; }
  .grade-item:nth-child(odd) { border-right: 0; }
  .plan-lock { align-items: stretch; flex-direction: column; }
  .alpha-grid { grid-template-columns: 1fr; }
  .alpha-tools input { min-width: 0; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-facts { grid-template-columns: 1fr; }
  .setup-glossary > div { grid-template-columns: 1fr; gap: 3px; }
  .setup-tools input { min-width: 0; }
  .setup-lightbox { padding: 10px; }
  .setup-lightbox figure { width: 98vw; height: 94vh; }
  .setup-lightbox-tools { justify-content: flex-start; overflow-x: auto; padding-right: 48px; }
  .setup-lightbox-tools small { display: none; }
  .analytics-heading { align-items: flex-start; flex-direction: column; }
  .demo-banner { align-items: stretch; flex-direction: column; }
  .demo-banner .btn { text-align: center; }
  .completion-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .completion-row > div { grid-column: 1 / -1; grid-row: 2; }
  .panel-title-row { align-items: stretch; flex-direction: column; }
  .decision-matrix, .review-grid, .exposure-layout { grid-template-columns: 1fr; }
  .weekly-actions { width: 100%; }
  .weekly-actions select { flex: 1; min-width: 0; }
  .update-modal { grid-template-columns: 1fr; }
  .donation-modal { grid-template-columns: 1fr; }
  .onboard-grid { grid-template-columns: 1fr; }
  .onboarding-modal .foot { align-items: stretch; flex-direction: column-reverse; }
  .onboarding-modal .foot .sp { display: none; }
}
