:root {
  --bg: #070b12;
  --panel: rgba(13, 20, 31, 0.88);
  --panel-strong: #0e1724;
  --line: rgba(151, 175, 204, 0.16);
  --line-strong: rgba(151, 175, 204, 0.27);
  --text: #edf5ff;
  --muted: #8494a9;
  --cyan: #57e7d2;
  --blue: #62a9ff;
  --green: #3ce2a1;
  --red: #ff6684;
  --amber: #f6bd58;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -20%, rgba(38, 87, 130, 0.20), transparent 42%),
    linear-gradient(180deg, #080d15, var(--bg) 50%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.ambient { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .15; }
.ambient-a { width: 330px; height: 330px; background: var(--blue); top: 17%; right: -140px; }
.ambient-b { width: 300px; height: 300px; background: var(--cyan); bottom: -180px; left: -100px; }

.topbar { height: 82px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 650; letter-spacing: .13em; }
.brand b { color: var(--cyan); }
.brand-mark { position: relative; width: 28px; height: 32px; border: 1px solid rgba(87,231,210,.65); clip-path: polygon(50% 0, 100% 18%, 84% 78%, 50% 100%, 16% 78%, 0 18%); background: rgba(87,231,210,.08); }
.brand-mark i { position: absolute; inset: 8px; display: block; background: var(--cyan); clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.is-live { color: var(--green); }
.is-demo { color: var(--amber); }
.is-reconnecting, .is-connecting { color: var(--blue); }
.ghost-button, .primary-button { border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.035); padding: 10px 15px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.ghost-button:hover { border-color: rgba(87,231,210,.48); background: rgba(87,231,210,.07); }
.demo-button { border: 1px solid rgba(87,231,210,.32); border-radius: 9px; background: rgba(87,231,210,.08); color: var(--cyan); padding: 10px 15px; font-size: 12px; font-weight: 750; cursor: pointer; }
.demo-button[aria-pressed="true"] { border-color: rgba(60,226,161,.48); background: rgba(60,226,161,.12); color: var(--green); }
.ghost-button.is-connected { border-color: rgba(60,226,161,.34); background: rgba(60,226,161,.08); color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.personal-mode-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; padding: 15px 18px; border: 1px solid rgba(60,226,161,.3); border-radius: 12px; background: linear-gradient(90deg, rgba(60,226,161,.11), rgba(87,231,210,.035)); box-shadow: 0 18px 55px rgba(0,0,0,.22); }
.personal-mode-bar[hidden] { display: none; }
.personal-mode-bar div { display: flex; align-items: center; gap: 12px; }
.personal-mode-bar span { color: var(--green); font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.personal-mode-bar strong { color: #dffdf2; font: 750 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.personal-mode-bar p { margin: 0; color: #83a99b; font-size: 12px; line-height: 1.45; text-align: right; }
.personal-mode .intro { padding-top: 46px; }

.intro { padding: 72px 0 46px; display: grid; grid-template-columns: 1.4fr .75fr; gap: 50px; align-items: end; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .19em; margin-bottom: 18px; }
.eyebrow span { color: #465568; margin-left: 8px; }
h1 { margin: 0; font-size: clamp(46px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; font-weight: 580; }
h1 em { font-style: normal; color: #7890aa; }
.intro p { max-width: 425px; margin: 0 0 5px; color: #9aaabd; line-height: 1.7; font-size: 15px; }

.market-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 12px 12px 0 0; overflow: hidden; }
.market-tab { position: relative; display: flex; justify-content: space-between; align-items: center; border: 0; border-right: 1px solid var(--line); padding: 16px 18px; background: rgba(255,255,255,.018); cursor: pointer; color: #6f8094; }
.market-tab:last-child { border-right: 0; }
.market-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.market-tab span { font-size: 14px; font-weight: 820; }
.market-tab small { font-size: 10px; }
.market-tab.is-active { background: rgba(87,231,210,.06); color: var(--text); }
.market-tab.is-active::after { background: var(--cyan); box-shadow: 0 0 20px rgba(87,231,210,.7); }

.workspace-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; margin-top: 14px; }
.panel { background: linear-gradient(160deg, rgba(17,27,41,.94), rgba(10,16,25,.94)); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.simulator-panel, .health-panel { padding: 27px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.panel-heading > div { display: flex; align-items: center; gap: 11px; }
.panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.panel-index { color: var(--cyan); font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.micro-label { color: #62748a; font: 750 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.side-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 5px; border-radius: 10px; background: #080e17; border: 1px solid var(--line); }
.side-button { border: 0; background: transparent; color: #66798f; padding: 10px; border-radius: 7px; font-size: 12px; font-weight: 800; cursor: pointer; }
.side-button.buy.is-active { color: var(--green); background: rgba(60,226,161,.10); box-shadow: inset 0 0 0 1px rgba(60,226,161,.12); }
.side-button.sell.is-active { color: var(--red); background: rgba(255,102,132,.10); box-shadow: inset 0 0 0 1px rgba(255,102,132,.12); }
.field-label { display: block; margin: 23px 0 9px; color: var(--muted); font-size: 11px; }
.amount-field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 15px; background: rgba(4,9,15,.7); }
.amount-field span { color: #6f8196; font-size: 18px; }
.amount-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 15px 0; font-size: 23px; font-weight: 700; }
.amount-field strong { color: #66798f; font-size: 10px; letter-spacing: .12em; }
.quick-sizes { display: flex; gap: 7px; margin-top: 9px; }
.quick-sizes button { flex: 1; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: #708197; padding: 7px; font-size: 10px; cursor: pointer; }
.quick-sizes button.is-active { color: var(--cyan); border-color: rgba(87,231,210,.38); background: rgba(87,231,210,.06); }
.result-stack { margin-top: 23px; border-top: 1px solid var(--line); }
.result-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.result-row span small { display: block; margin-top: 4px; color: #526378; font: 9px ui-monospace, monospace; letter-spacing: .04em; }
.result-row strong { color: var(--text); font-size: 13px; }
.total-row strong { color: var(--cyan); }
.recommendation { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.recommendation-icon { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 900; color: var(--bg); background: var(--cyan); }
.recommendation small { color: var(--cyan); font: 750 9px ui-monospace, monospace; letter-spacing: .12em; }
.recommendation p { margin: 5px 0 0; color: #aebdce; font-size: 12px; line-height: 1.45; }
.recommendation.warning { border-color: rgba(246,189,88,.25); }
.recommendation.warning .recommendation-icon { background: var(--amber); }
.recommendation.warning small { color: var(--amber); }
.recommendation.danger { border-color: rgba(255,102,132,.25); }
.recommendation.danger .recommendation-icon { background: var(--red); }
.recommendation.danger small { color: var(--red); }

.health-hero { display: grid; grid-template-columns: 185px 1fr; gap: 27px; align-items: center; margin: 17px 0 30px; }
.health-gauge { --score: 0; width: 176px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--score) * 1%), rgba(112,137,163,.12) 0); position: relative; box-shadow: 0 0 55px rgba(87,231,210,.08); }
.health-gauge::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0c1420; border: 1px solid var(--line); }
.health-gauge > div { position: relative; z-index: 1; text-align: center; }
.health-gauge strong { display: block; font-size: 52px; line-height: .9; letter-spacing: -.06em; font-weight: 570; }
.health-gauge span { color: #5f7186; font: 700 10px ui-monospace, monospace; }
.health-label { display: inline-block; color: var(--cyan); margin-bottom: 10px; font: 800 10px ui-monospace, monospace; letter-spacing: .13em; }
.health-label.health-caution { color: var(--amber); }
.health-label.health-high-risk { color: var(--red); }
.health-copy p { margin: 0; color: #93a5b9; font-size: 13px; line-height: 1.65; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-card { padding: 14px; background: rgba(5,10,17,.52); border: 1px solid var(--line); border-radius: 9px; }
.metric-card span { display: block; color: #65778c; font-size: 10px; margin-bottom: 7px; }
.metric-card strong { font-size: 15px; }
.formula-note { margin-top: 14px; color: #5e6f82; font: 10px/1.6 ui-monospace, monospace; }
.formula-note span { color: #8fa1b5; margin-right: 7px; }

.stress-lab { scroll-margin-top: 24px; margin-top: 14px; padding: 27px; }
.stress-heading { display: grid; grid-template-columns: 1fr .9fr; gap: 34px; align-items: end; }
.stress-heading .panel-heading { margin-bottom: 0; }
.stress-heading > p { margin: 0; color: #8ea0b4; font-size: 14px; line-height: 1.65; }
.stress-context { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(5,10,17,.42); }
.stress-context > div { padding: 14px 16px; border-right: 1px solid var(--line); }
.stress-context > div:last-child { border-right: 0; }
.stress-context span { display: block; margin-bottom: 7px; color: #697c92; font-size: 12px; }
.stress-context strong { font-size: 14px; }
.stress-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.stress-card { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,10,17,.50); transition: border-color .2s ease, background .2s ease; }
.stress-card.stress-good { border-color: rgba(60,226,161,.22); }
.stress-card.stress-warning { border-color: rgba(246,189,88,.28); background: rgba(246,189,88,.025); }
.stress-card.stress-danger { border-color: rgba(255,102,132,.30); background: rgba(255,102,132,.03); }
.stress-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stress-card-head span { color: #8fa1b6; font: 750 11px ui-monospace, monospace; letter-spacing: .08em; }
.stress-card-head strong { color: var(--green); font: 800 10px ui-monospace, monospace; letter-spacing: .07em; }
.stress-warning .stress-card-head strong { color: var(--amber); }
.stress-danger .stress-card-head strong { color: var(--red); }
.stress-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; margin-top: 16px; }
.stress-card-grid span { display: block; min-height: 17px; color: #64768b; font-size: 12px; }
.stress-card-grid strong { display: block; margin-top: 6px; font-size: 14px; }
.stress-summary { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; color: #9bacc0; background: rgba(255,255,255,.02); font-size: 14px; line-height: 1.55; }
.stress-summary.warning { color: var(--amber); border-color: rgba(246,189,88,.25); background: rgba(246,189,88,.045); }
.stress-summary.danger { color: #ff91a7; border-color: rgba(255,102,132,.27); background: rgba(255,102,132,.05); }
.stress-method { margin: 13px 0 0; color: #66798e; font-size: 12px; line-height: 1.6; }

.market-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 14px; margin-top: 14px; }
.market-overview, .book-panel { padding: 24px 27px; }
.panel-heading.compact { margin-bottom: 19px; }
.pulse-strip { display: grid; grid-template-columns: 1fr 1fr; }
.pulse-strip > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pulse-strip > div:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 16px; }
.pulse-strip > div:nth-child(even) { padding-left: 16px; }
.pulse-strip span { display: block; color: #63758a; font-size: 10px; margin-bottom: 8px; }
.pulse-strip strong { font-size: 16px; }
.pulse-strip strong.metric-warning { color: var(--amber); }
.pulse-strip strong.metric-danger { color: var(--red); }
.book-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.book-head, .book-row { display: flex; justify-content: space-between; position: relative; }
.book-head { color: #526378; font: 750 9px ui-monospace, monospace; letter-spacing: .1em; padding-bottom: 9px; }
.book-row { overflow: hidden; padding: 5px 6px; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.book-row i { position: absolute; inset: 2px auto 2px 0; opacity: .08; border-radius: 2px; }
.book-row.bid i { background: var(--green); }
.book-row.ask i { background: var(--red); }
.book-row.bid span { color: var(--green); }
.book-row.ask span { color: var(--red); }
.book-row strong { font-weight: 500; color: #9bacc0; }

.method-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 60px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.method-strip div { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-right: 1px solid var(--line); background: rgba(255,255,255,.016); }
.method-strip div:last-child { border: 0; }
.method-strip span { color: var(--cyan); font: 700 9px ui-monospace, monospace; }
.method-strip p { margin: 0; color: #74869a; font-size: 11px; }
.demo-trader { scroll-margin-top: 24px; margin: 78px 0 70px; }
.demo-trader[hidden] { display: none; }
.judge-demo-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; padding: 15px 17px; border: 1px solid rgba(60,226,161,.28); border-radius: 12px; background: linear-gradient(90deg, rgba(60,226,161,.09), rgba(87,231,210,.035)); }
.judge-demo-banner[hidden] { display: none; }
.judge-demo-banner small { display: block; margin-bottom: 5px; color: var(--green); font: 800 9px ui-monospace, monospace; letter-spacing: .14em; }
.judge-demo-banner strong { font-size: 13px; font-weight: 650; }
.judge-demo-banner nav { display: flex; gap: 7px; }
.judge-demo-banner button { border: 1px solid var(--line); border-radius: 7px; background: rgba(4,9,15,.42); color: #91a3b8; padding: 8px 10px; font-size: 10px; cursor: pointer; }
.judge-demo-banner button:hover { border-color: rgba(87,231,210,.4); color: var(--cyan); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 24px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; font-weight: 570; }
.demo-disclosure { padding: 8px 11px; border: 1px solid rgba(246,189,88,.25); border-radius: 999px; color: var(--amber); font: 750 11px ui-monospace, monospace; letter-spacing: .08em; }
.verified-disclosure { padding: 8px 11px; border: 1px solid rgba(60,226,161,.3); border-radius: 999px; color: var(--green); background: rgba(60,226,161,.055); font: 750 11px ui-monospace, monospace; letter-spacing: .08em; }
.trader-summary { display: grid; grid-template-columns: 250px 1fr; overflow: hidden; }
.trader-identity { padding: 25px; border-right: 1px solid var(--line); background: rgba(87,231,210,.025); }
.trader-identity > span { color: #778aa0; font: 700 12px ui-monospace, monospace; }
.trader-identity > div { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.trader-identity p { margin: 0; color: var(--muted); font-size: 13px; }
.grade { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 27px; }
.grade-a, .grade-b { color: var(--green); border-color: rgba(60,226,161,.35); }
.grade-c { color: var(--amber); border-color: rgba(246,189,88,.35); }
.grade-d, .grade-f { color: var(--red); border-color: rgba(255,102,132,.35); }
.summary-metrics { display: grid; grid-template-columns: repeat(5, 1fr); }
.summary-metrics > div { padding: 25px 18px; border-right: 1px solid var(--line); }
.summary-metrics > div:last-child { border-right: 0; }
.summary-metrics span { display: block; min-height: 32px; color: #6f8196; font-size: 12px; line-height: 1.35; }
.summary-metrics strong { display: block; margin-top: 10px; font-size: 18px; }
.forensics-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 14px; margin-top: 14px; }
.trade-list-panel, .forensic-panel { padding: 25px; }
.trade-list-head, .trade-row { display: grid; grid-template-columns: 1.25fr .7fr 1fr 1fr .45fr; gap: 12px; align-items: center; }
.trade-list-head { padding: 0 12px 10px; color: #526378; font: 700 11px ui-monospace, monospace; }
.trade-row { width: 100%; border: 0; border-top: 1px solid var(--line); padding: 13px 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.trade-row:hover, .trade-row.is-active { background: rgba(87,231,210,.05); }
.trade-row.is-active { box-shadow: inset 2px 0 var(--cyan); }
.trade-row span, .trade-row strong { font-size: 13px; }
.trade-row small { display: block; color: #607287; margin-top: 4px; font: 11px ui-monospace, monospace; }
.trade-side { font-weight: 800; }
.trade-side.buy { color: var(--green); }
.trade-side.sell { color: var(--red); }
.mini-grade { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; }
.fill-line, .forensic-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.fill-line strong { color: var(--text); font-size: 17px; }
.cost-attribution { margin: 13px 0; }
.cost-attribution > div { display: grid; grid-template-columns: 75px 1fr 118px; gap: 10px; align-items: center; padding: 8px 0; font-size: 12px; }
.cost-attribution span { color: #718399; }
.cost-attribution i { height: 5px; background: rgba(132,148,169,.12); border-radius: 999px; overflow: hidden; }
.cost-attribution b { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: inherit; }
.cost-attribution strong { text-align: right; font-size: 12px; }
.cost-attribution strong.negative { color: var(--red); }
.cost-attribution strong.positive { color: var(--green); }
.forensic-total { border-top: 1px solid var(--line); border-bottom: 0; }
.forensic-total strong { color: var(--cyan); font-size: 15px; }
.diagnosis-card { margin-top: 13px; padding: 15px; border: 1px solid rgba(87,231,210,.18); border-radius: 10px; background: rgba(87,231,210,.045); }
.diagnosis-card small { color: var(--cyan); font: 750 11px ui-monospace, monospace; letter-spacing: .08em; }
.diagnosis-card p { margin: 8px 0 0; color: #aebdce; font-size: 13px; line-height: 1.55; }
.demo-method { max-width: 900px; margin: 15px 0 0; color: #5f7186; font-size: 12px; line-height: 1.6; }
.trader-dna { scroll-margin-top: 24px; margin: 78px 0 70px; }
.dna-overview { display: grid; grid-template-columns: 1.05fr 190px 1.55fr; overflow: hidden; }
.dna-identity { padding: 27px; border-right: 1px solid var(--line); background: linear-gradient(135deg, rgba(98,169,255,.055), transparent); }
.dna-identity > span { color: #6d8096; font: 750 10px ui-monospace, monospace; letter-spacing: .12em; }
.dna-identity > strong { display: block; margin-top: 15px; color: var(--cyan); font-size: 24px; letter-spacing: -.035em; }
.dna-identity p { margin: 10px 0 0; color: #8799ad; font-size: 12px; line-height: 1.55; }
.dna-score { --dna-score: 0; display: grid; place-items: center; align-content: center; padding: 22px; border-right: 1px solid var(--line); text-align: center; }
.dna-score > div { width: 104px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at center, #0c1420 63%, transparent 64%), conic-gradient(var(--cyan) calc(var(--dna-score) * 1%), rgba(112,137,163,.12) 0); }
.dna-score strong { display: block; font-size: 34px; line-height: .95; }
.dna-score span { color: #5f7186; font: 700 9px ui-monospace, monospace; }
.dna-score p { margin: 9px 0 0; color: #72849a; font-size: 11px; }
.dna-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.dna-facts > div { padding: 21px 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dna-facts > div:nth-child(3n) { border-right: 0; }
.dna-facts > div:nth-child(n+4) { border-bottom: 0; }
.dna-facts span { display: block; color: #6c7f94; font-size: 11px; }
.dna-facts strong { display: block; margin-top: 9px; font-size: 14px; }
.dna-facts .risk-high { color: var(--red); }
.dna-facts .risk-elevated { color: var(--amber); }
.dna-facts .risk-low { color: var(--green); }
.dna-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; margin-top: 14px; }
.dna-signals, .dna-playbook { padding: 25px; }
.dna-bars > div { display: grid; grid-template-columns: 110px 1fr 30px; gap: 12px; align-items: center; padding: 9px 0; }
.dna-bars span { color: #77899e; font-size: 12px; }
.dna-bars i { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(132,148,169,.12); }
.dna-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.dna-bars strong { text-align: right; font: 750 11px ui-monospace, monospace; }
.dna-formula { margin: 15px 0 0; color: #5c6e82; font: 10px/1.6 ui-monospace, monospace; }
.dna-insights > div { display: grid; grid-template-columns: 29px 1fr; gap: 11px; padding: 13px 0; border-top: 1px solid var(--line); }
.dna-insights > div:first-child { border-top: 0; padding-top: 0; }
.dna-insights span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(87,231,210,.22); border-radius: 50%; color: var(--cyan); font: 700 9px ui-monospace, monospace; }
.dna-insights p { margin: 0; color: #8799ad; font-size: 12px; line-height: 1.5; }
.dna-insights strong { display: block; margin-bottom: 4px; color: #c7d4e3; font-size: 13px; }
.dna-report-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 20px 24px; border-color: rgba(87,231,210,.18); background: linear-gradient(110deg, rgba(87,231,210,.055), rgba(98,169,255,.025)); }
.dna-report-cta span { color: var(--cyan); font: 750 9px ui-monospace, monospace; letter-spacing: .11em; }
.dna-report-cta h3 { margin: 7px 0 5px; font-size: 17px; }
.dna-report-cta p { max-width: 670px; margin: 0; color: #72849a; font-size: 12px; line-height: 1.5; }
.report-button { flex: 0 0 auto; border: 1px solid rgba(87,231,210,.32); border-radius: 8px; background: rgba(87,231,210,.09); color: var(--cyan); padding: 11px 15px; font-weight: 750; cursor: pointer; }
.report-button:hover { background: rgba(87,231,210,.15); }
.report-button:disabled { opacity: .45; cursor: not-allowed; }
.connected-account { scroll-margin-top: 24px; margin: 78px 0 70px; }
.connected-account[hidden] { display: none; }
.connected-actions { display: flex; align-items: center; gap: 10px; }
.connected-actions span { color: var(--green); font: 750 11px ui-monospace, monospace; }
.connected-actions button, .dialog-secondary { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: #8494a9; padding: 8px 11px; cursor: pointer; }
.connected-address { margin: 10px 0 0; color: #6f8196; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.personal-mode .connected-account { margin-bottom: 28px; }
.personal-mode .trader-dna { margin-top: 28px; }
.real-summary { display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; }
.real-summary > div { padding: 21px 17px; border-right: 1px solid var(--line); }
.real-summary > div:last-child { border: 0; }
.real-summary span { display: block; min-height: 31px; color: #6f8196; font-size: 12px; line-height: 1.35; }
.real-summary strong { display: block; margin-top: 8px; font-size: 17px; }
.real-fills-panel { margin-top: 14px; padding: 25px; overflow-x: auto; }
.real-fill-head, .real-fill-row { display: grid; grid-template-columns: 1.25fr .7fr 1fr 1fr 1fr; gap: 12px; align-items: center; min-width: 670px; }
.real-fill-head { padding: 0 12px 10px; color: #526378; font: 700 11px ui-monospace, monospace; }
.real-fill-row { padding: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.real-fill-row small { display: block; margin-top: 4px; color: #607287; font: 11px ui-monospace, monospace; }
.empty-state { color: var(--muted); padding: 18px 12px; }
footer { display: flex; justify-content: space-between; padding: 20px 0 30px; border-top: 1px solid var(--line); color: #48586a; font: 700 9px ui-monospace, monospace; letter-spacing: .09em; }

dialog { position: relative; max-width: 455px; border: 1px solid var(--line-strong); border-radius: 15px; background: #0d1622; color: var(--text); padding: 32px; box-shadow: 0 30px 100px #000; }
.account-dialog { width: min(640px, calc(100% - 28px)); max-width: 640px; max-height: min(90vh, 820px); overflow-y: auto; }
dialog::backdrop { background: rgba(2,6,11,.75); backdrop-filter: blur(6px); }
.dialog-close { position: absolute; right: 14px; top: 10px; border: 0; background: transparent; color: #687b91; font-size: 25px; cursor: pointer; }
.dialog-kicker { color: var(--cyan); font: 800 9px ui-monospace, monospace; letter-spacing: .15em; }
dialog h2 { margin: 13px 0 12px; font-size: 25px; }
dialog p { color: #91a3b8; line-height: 1.65; font-size: 13px; }
.primary-button { width: 100%; margin-top: 15px; background: var(--cyan); color: #07110f; border: 0; }
.official-key-link { display: inline-block; margin: 17px 0 7px; color: var(--cyan); font-size: 12px; text-decoration: none; }
.security-promise { display: grid; grid-template-columns: 39px 1fr; gap: 13px; align-items: start; margin: 18px 0 10px; padding: 15px; border: 1px solid rgba(60,226,161,.32); border-radius: 11px; background: linear-gradient(105deg, rgba(60,226,161,.11), rgba(87,231,210,.025)); }
.security-shield { width: 37px; height: 41px; display: grid; place-items: center; color: #07110f; background: var(--green); font-size: 17px; font-weight: 900; clip-path: polygon(50% 0, 100% 17%, 86% 78%, 50% 100%, 14% 78%, 0 17%); }
.security-promise strong { display: block; color: #dffdf2; font-size: 14px; line-height: 1.45; }
.security-promise p { margin: 5px 0 0; color: #87bba8; font-size: 12px; line-height: 1.5; }
.security-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 17px; }
.security-facts span { padding: 8px 5px; border: 1px solid rgba(60,226,161,.15); border-radius: 6px; color: #70ac97; background: rgba(60,226,161,.025); text-align: center; font: 750 9px ui-monospace, monospace; letter-spacing: .05em; }
.connection-option { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,10,17,.42); }
.connection-option h3 { margin: 10px 0 4px; font-size: 16px; }
.connection-option > p { margin: 0; color: #8193a8; font-size: 12px; line-height: 1.55; }
.option-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.option-heading span { color: var(--cyan); font: 750 9px ui-monospace, monospace; letter-spacing: .1em; }
.option-heading b { color: #6f8196; font: 750 9px ui-monospace, monospace; letter-spacing: .08em; }
.wallet-option { margin-top: 16px; }
.public-dashboard-note { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: #718399; background: rgba(255,255,255,.018); font-size: 11px; line-height: 1.55; }
.public-dashboard-note strong { color: #a9bacd; }
.origin-note { margin-bottom: 14px; padding: 10px 11px; border: 1px solid rgba(246,189,88,.18); border-radius: 8px; background: rgba(246,189,88,.045); color: #9aaabd; font: 11px/1.55 ui-monospace, monospace; overflow-wrap: anywhere; }
.origin-note span { display: block; color: var(--amber); font-weight: 800; letter-spacing: .08em; }
.origin-note b { color: #c8a86c; font-weight: 650; }
.dialog-field { display: block; margin-top: 11px; }
.dialog-field span { display: block; margin-bottom: 7px; color: #8799ad; font-size: 12px; }
.dialog-field input { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; background: #080e17; color: var(--text); padding: 12px; font: 13px ui-monospace, monospace; }
.dialog-field input:focus { border-color: rgba(87,231,210,.5); }
.primary-button:disabled { opacity: .55; cursor: not-allowed; }
.confirm-line { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; color: #91a3b8; font-size: 12px; line-height: 1.45; }
.confirm-line input { margin-top: 2px; accent-color: var(--cyan); }
.connection-status { margin-top: 13px; padding: 10px 11px; border-radius: 8px; background: rgba(132,148,169,.07); color: #7f91a6; font-size: 11px; line-height: 1.45; }
.connection-status.ready { color: var(--blue); background: rgba(98,169,255,.07); }
.connection-status.working { color: var(--blue); background: rgba(98,169,255,.07); }
.connection-status.success { color: var(--green); background: rgba(60,226,161,.07); }
.connection-status.error { color: var(--red); background: rgba(255,102,132,.07); }
.connection-status.pending { color: var(--amber); background: rgba(246,189,88,.07); }
.dialog-secondary { width: 100%; margin-top: 8px; }

@media (max-width: 820px) {
  .shell { width: min(100% - 24px, 640px); }
  .topbar { height: 68px; }
  .status-pill { display: none; }
  .top-actions { gap: 7px; }
  .ghost-button, .demo-button { padding: 9px 10px; }
  .intro { grid-template-columns: 1fr; padding: 47px 0 32px; gap: 20px; }
  .intro p { max-width: 100%; }
  .market-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .market-tab { justify-content: center; padding: 14px 5px; }
  .market-tab small { display: none; }
  .workspace-grid, .market-grid { grid-template-columns: 1fr; }
  .stress-heading { grid-template-columns: 1fr; gap: 14px; }
  .stress-scenarios { grid-template-columns: 1fr; }
  .method-strip { grid-template-columns: 1fr 1fr; }
  .method-strip div:nth-child(2) { border-right: 0; }
  .method-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .trader-summary, .forensics-grid { grid-template-columns: 1fr; }
  .dna-overview { grid-template-columns: 1fr 170px; }
  .dna-identity { border-bottom: 1px solid var(--line); }
  .dna-score { border-right: 0; border-bottom: 1px solid var(--line); }
  .dna-facts { grid-column: 1 / -1; }
  .dna-grid { grid-template-columns: 1fr; }
  .dna-report-cta { align-items: flex-start; flex-direction: column; }
  .report-button { width: 100%; }
  .trader-identity { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-metrics { grid-template-columns: repeat(3, 1fr); }
  .real-summary { grid-template-columns: repeat(3, 1fr); }
  .health-hero { grid-template-columns: 145px 1fr; }
  .health-gauge { width: 140px; }
  .health-gauge strong { font-size: 43px; }
  .personal-mode-bar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .personal-mode-bar p { text-align: left; }
}

@media (max-width: 500px) {
  .brand { font-size: 12px; }
  .status-pill { padding: 0 9px; }
  .demo-button { padding: 9px 10px; font-size: 10px; }
  .status-pill { display: none; }
  .account-dialog { padding: 25px 18px; }
  .account-dialog h2 { padding-right: 22px; font-size: 22px; }
  .security-facts { grid-template-columns: 1fr; }
  .security-promise { grid-template-columns: 34px 1fr; padding: 13px; }
  .security-shield { width: 33px; height: 37px; }
  .ghost-button, .demo-button { padding: 8px 8px; font-size: 9px; }
  .ghost-button.is-connected { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .personal-mode-bar div { align-items: flex-start; flex-direction: column; gap: 5px; }
  h1 { font-size: 45px; }
  .simulator-panel, .health-panel, .market-overview, .book-panel { padding: 21px 18px; }
  .stress-lab { padding: 21px 18px; }
  .stress-context { grid-template-columns: 1fr; }
  .stress-context > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stress-context > div:last-child { border-bottom: 0; }
  .health-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .book-columns { gap: 12px; }
  .method-strip { grid-template-columns: 1fr; }
  .method-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .judge-demo-banner { align-items: flex-start; flex-direction: column; }
  .judge-demo-banner nav { width: 100%; overflow-x: auto; }
  .judge-demo-banner button { white-space: nowrap; }
  .dna-overview { grid-template-columns: 1fr; }
  .dna-identity { border-right: 0; }
  .dna-score { border-right: 0; }
  .dna-facts { grid-template-columns: 1fr 1fr; }
  .dna-facts > div, .dna-facts > div:nth-child(3n), .dna-facts > div:nth-child(n+4) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .dna-facts > div:nth-child(2n) { border-right: 0; }
  .dna-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
  .dna-bars > div { grid-template-columns: 96px 1fr 28px; gap: 9px; }
  .connected-actions { width: 100%; justify-content: space-between; }
  .summary-metrics { grid-template-columns: 1fr 1fr; }
  .summary-metrics > div { border-bottom: 1px solid var(--line); }
  .trade-list-panel { overflow-x: auto; }
  .trade-list-head, .trade-row { min-width: 560px; }
  .real-summary { grid-template-columns: 1fr 1fr; }
  footer { flex-direction: column; gap: 8px; }
}