:root {
  --bg: #0b0d10;
  --sidebar: #0e1115;
  --surface: #11151a;
  --surface-2: #151a20;
  --surface-3: #1b2129;
  --line: #242a32;
  --line-strong: #313944;
  --text: #f2f5f7;
  --muted: #87909c;
  --muted-2: #66707c;
  --accent: #8f9eff;
  --accent-strong: #a9b4ff;
  --accent-soft: rgba(143, 158, 255, .12);
  --green: #37c98b;
  --green-soft: rgba(55, 201, 139, .12);
  --red: #f06972;
  --red-soft: rgba(240, 105, 114, .12);
  --purple: #9a78ef;
  --amber: #efb753;
  --amber-soft: rgba(239, 183, 83, .12);
  --shadow: 0 18px 60px rgba(0, 0, 0, .24);
  --radius: 13px;
  --sidebar-width: 248px;
  --topbar-height: 74px;
}

[data-theme="light"] {
  --bg: #f4f6f8;
  --sidebar: #f8f9fb;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #eef1f4;
  --line: #e3e7eb;
  --line-strong: #d2d8df;
  --text: #15181c;
  --muted: #69727d;
  --muted-2: #9299a2;
  --accent: #5667d8;
  --accent-strong: #4154d1;
  --accent-soft: rgba(86, 103, 216, .1);
  --green: #168b5a;
  --green-soft: rgba(22, 139, 90, .1);
  --red: #d64b56;
  --red-soft: rgba(214, 75, 86, .1);
  --purple: #7657d8;
  --amber: #ac7420;
  --amber-soft: rgba(172, 116, 32, .1);
  --shadow: 0 18px 50px rgba(18, 24, 32, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, label[for], select { cursor: pointer; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: white; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .metric-value { font-family: Manrope, Inter, sans-serif; letter-spacing: -.025em; }
h1 { font-size: 20px; line-height: 1.2; }
h2 { font-size: 25px; }
h3 { font-size: 16px; }
small { color: var(--muted); }
.muted { color: var(--muted); }
.eyebrow, .section-kicker { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 18px 14px; background: var(--sidebar); border-right: 1px solid var(--line); transition: width .24s ease, transform .24s ease; }
.brand-row { display: flex; align-items: center; gap: 8px; padding: 0 2px 24px 4px; }
.brand { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; background: none; border: 0; padding: 0; text-align: left; }
.brand-mark { position: relative; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 9px; background: var(--accent); box-shadow: 0 6px 18px rgba(111, 126, 238, .24); overflow: hidden; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; width: 4px; bottom: 7px; border-radius: 3px; background: white; }
.brand-mark::before { left: 7px; height: 8px; }
.brand-mark span { left: 14px; height: 16px; }
.brand-mark::after { left: 21px; height: 12px; }
.brand-copy { display: grid; line-height: 1.15; overflow: hidden; }
.brand-copy strong { font-family: Manrope, sans-serif; font-size: 15px; white-space: nowrap; }
.brand-copy small { margin-top: 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.nav-list { display: grid; gap: 4px; }
.nav-item { position: relative; width: 100%; height: 42px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 9px; padding: 0 11px; background: transparent; color: var(--muted); font-weight: 500; text-align: left; transition: all .16s ease; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: var(--text); border-color: var(--line); background: var(--surface-2); box-shadow: inset 3px 0 var(--accent); }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.8; flex: 0 0 auto; }
.nav-item span { white-space: nowrap; }
.nav-count { margin-left: auto; min-width: 22px; height: 20px; display: grid; place-items: center; background: var(--surface-3); border-radius: 999px; color: var(--muted); font-size: 10px; }
.sidebar-spacer { flex: 1; }
.sidebar-card { margin-top: 10px; padding: 13px; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; overflow: hidden; }
.sidebar-card p { margin-top: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.storage-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 10px; color: var(--green); }
.storage-row svg { width: 14px; }
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .brand-copy, .sidebar.collapsed .nav-item span, .sidebar.collapsed .sidebar-card, .sidebar.collapsed .collapse-button { display: none; }
.sidebar.collapsed .brand { justify-content: center; }
.sidebar.collapsed .brand-row { padding-left: 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 0; }
.main-shell { min-height: 100vh; margin-left: var(--sidebar-width); transition: margin .24s ease; }
.sidebar.collapsed + .main-shell { margin-left: 72px; }
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.topbar-title-wrap { display: flex; align-items: center; gap: 12px; }
.topbar-title-wrap .eyebrow { margin-bottom: 3px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.compact-field { height: 38px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 0 9px; color: var(--muted); }
.compact-field svg { width: 15px; }
.compact-field select { max-width: 130px; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 12px; }
.compact-field select option { color: var(--text); background: var(--surface); }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; transition: all .16s ease; }
.icon-button:hover { background: var(--surface-2); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-button svg { width: 17px; height: 17px; stroke-width: 1.8; }
.primary-button, .secondary-button { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 0 13px; font-weight: 600; font-size: 12px; white-space: nowrap; transition: all .16s ease; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(83, 98, 215, .18); }
.primary-button:hover { background: var(--accent-strong); transform: translateY(-1px); }
.primary-button svg, .secondary-button svg, .text-button svg { width: 15px; height: 15px; }
.primary-button kbd { margin-left: 4px; color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.08); }
.secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.secondary-button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.danger-button { color: var(--red); }
.text-button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 5px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; }
.text-button:hover { color: var(--text); }
.danger-text { color: var(--red); }
.avatar-button { position: relative; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 10px; font-weight: 700; }
.status-dot { position: absolute; right: -1px; bottom: 1px; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; background: var(--green); }
.mobile-menu { display: none; }
main { padding: 25px 28px 50px; }
.view { display: none; animation: viewIn .22s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.welcome-row .section-kicker { color: var(--accent); margin-bottom: 7px; }
.welcome-row .muted { margin-top: 6px; font-size: 12px; }
.discipline-pill { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.discipline-pill > span:last-child { display: grid; }
.discipline-pill small { font-size: 9px; }
.discipline-pill strong { font-size: 11px; }
.score-ring { --score: 0; width: 116px; height: 116px; flex: 0 0 auto; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--surface-3) 0); }
.score-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.score-ring b, .score-ring small { position: relative; z-index: 1; }
.score-ring b { font-family: Manrope; font-size: 30px; }
.score-ring small { position: absolute; top: 66px; }
.score-ring.small { width: 39px; height: 39px; }
.score-ring.small::before { inset: 4px; }
.score-ring.small b { font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 11px; margin-bottom: 12px; }
.metric-card { min-height: 105px; padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); transition: transform .18s ease, border-color .18s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.metric-card.featured { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 62%); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { color: var(--muted); font-size: 10px; font-weight: 600; }
.metric-icon { width: 25px; height: 25px; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border-radius: 7px; }
.metric-icon svg { width: 13px; }
.metric-value { display: block; margin-top: 10px; font-size: 21px; font-weight: 700; }
.metric-foot { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 9px; }
.metric-foot.positive b { color: var(--green); }.metric-foot.negative b { color: var(--red); }
.positive-text { color: var(--green)!important; }.negative-text { color: var(--red)!important; }
.panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,.01); }
.dashboard-grid { display: grid; gap: 12px; margin-top: 12px; }
.primary-grid { grid-template-columns: minmax(0, 1.5fr) minmax(330px, .8fr); }
.secondary-grid { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); }
.summary-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr); }
.panel-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.panel-header .eyebrow { margin-bottom: 4px; }
.chart-wrap { position: relative; width: 100%; padding: 12px; }
.chart-wrap.large { height: 270px; }
.chart-wrap.medium { height: 240px; }
.chart-wrap canvas { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.segmented { display: flex; align-items: center; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.segmented button { height: 25px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 600; }
.segmented button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th { height: 39px; padding: 0 12px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.data-table td { height: 49px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .symbol-cell { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.symbol-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--accent); font-size: 9px; }
.direction-arrow { width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%; }
.direction-arrow.long { color: var(--green); background: var(--green-soft); }.direction-arrow.short { color: var(--red); background: var(--red-soft); }
.direction-arrow svg { width: 10px; }
.badge, .chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 600; }
.badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
.badge.win, .badge.loss { gap: 6px; }
.badge.win { color: var(--green); background: var(--green-soft); border-color: transparent; }.badge.loss { color: var(--red); background: var(--red-soft); border-color: transparent; }.badge.neutral { color: var(--muted); }
.badge.trade-status { color: var(--muted); background: transparent; }
.badge.trade-status.status-closed { color: #fff; border-color: var(--purple); background: var(--purple); }
.badge.trade-status.status-open { color: var(--purple); border-color: var(--purple); background: transparent; }
.live-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }.live-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.insight-list { display: grid; padding: 5px 16px 12px; }
.insight { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.insight:last-child { border: 0; }
.insight-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }
.insight-icon svg { width: 13px; }
.insight p { color: var(--muted); font-size: 10px; line-height: 1.55; }.insight p strong { color: var(--text); }
.summary-list { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 16px 16px; }
.summary-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.summary-item:nth-last-child(-n+2) { border-bottom: 0; }.summary-item:nth-child(odd) { padding-right: 16px; }.summary-item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.summary-item span { color: var(--muted); }.summary-item strong { text-align: right; }
.risk-panel { overflow: hidden; }
.risk-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px 11px; }
.risk-form label, .filter-grid label, .settings-form label, .form-field { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 600; }
input, select, textarea { width: 100%; color: var(--text); border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
input, select { height: 36px; padding: 0 10px; }
textarea { min-height: 86px; padding: 10px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.input-prefix, .input-suffix { position: relative; }.input-prefix span, .input-suffix span { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 10px; }.input-prefix span { left: 10px; }.input-prefix input { padding-left: 22px; }.input-suffix span { right: 10px; }.input-suffix input { padding-right: 24px; }
.risk-results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.risk-result { padding: 12px; background: var(--surface); }.risk-result span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }.risk-result strong { display: block; margin-top: 4px; font-size: 12px; }
.view-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.search-field { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.search-field.grow { flex: 1; }.search-field svg { width: 15px; color: var(--muted); }.search-field input { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.popover-wrap { position: relative; }.popover { position: absolute; z-index: 30; right: 0; top: calc(100% + 7px); min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }.columns-popover label { display: flex; align-items: center; gap: 9px; padding: 7px; color: var(--muted); font-size: 11px; }.columns-popover input { width: 14px; height: 14px; accent-color: var(--accent); }
.filter-panel { margin-bottom: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); animation: dropIn .18s ease; }.filter-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }.filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }.filter-count { min-width: 17px; height: 17px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 8px; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-5px); } }
.bulk-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 11px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }.bulk-bar span:first-child { margin-right: auto; font-size: 11px; }
.table-panel { overflow: visible; }.table-meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 10px; }.trades-wrap { min-height: 400px; max-height: calc(100vh - 270px); }.trades-table { min-width: 1900px; }.trades-table th[data-sort] { cursor: pointer; }.trades-table th[data-sort]:hover { color: var(--text); }.trades-table th:first-child, .trades-table td:first-child { position: sticky; left: 0; z-index: 2; width: 38px; background: var(--surface); }.trades-table th:nth-child(2), .trades-table td:nth-child(2) { position: sticky; left: 38px; z-index: 2; background: var(--surface); box-shadow: 10px 0 16px -16px #000; }.trades-table tbody tr:hover td:first-child, .trades-table tbody tr:hover td:nth-child(2) { background: var(--surface-2); }.row-check { width: 14px; height: 14px; accent-color: var(--accent); }.row-actions { display: flex; gap: 3px; }.row-action { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }.row-action:hover { background: var(--surface-3); color: var(--text); }.row-action svg { width: 13px; }.pagination { min-height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 7px 13px; border-top: 1px solid var(--line); }.pagination-pages { display: flex; gap: 4px; }.page-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 10px; }.page-button.active { color: white; border-color: var(--accent); background: var(--accent); }.page-button:disabled { opacity: .35; cursor: not-allowed; }
.empty-state { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }.empty-state.standalone { min-height: 380px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }.empty-state .empty-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--accent); background: var(--surface); }.empty-state .empty-icon svg { width: 21px; }.empty-state p { max-width: 300px; margin: 7px 0 16px; color: var(--muted); font-size: 11px; }
.calendar-topbar, .calendar-topbar .month-nav { display: flex; align-items: center; justify-content: space-between; gap: 9px; }.calendar-topbar { margin-bottom: 14px; }.month-nav h2 { min-width: 170px; text-align: center; }.small-button { height: 34px; }.calendar-metrics { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 12px; }.calendar-metric { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }.calendar-metric span { display: block; color: var(--muted); font-size: 9px; }.calendar-metric strong { display: block; margin-top: 5px; font-size: 14px; }.calendar-panel { padding: 10px; }.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 2px 0 9px; }.calendar-weekdays span { color: var(--muted); font-size: 9px; font-weight: 600; text-align: center; text-transform: uppercase; }.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }.calendar-day { position: relative; min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); text-align: left; transition: transform .16s ease, border-color .16s ease; overflow: hidden; }.calendar-day:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--line-strong); }.calendar-day.outside { opacity: .25; }.calendar-day.today { border-color: var(--accent); }.calendar-day.today .day-number { color: white; background: var(--accent); }.day-number { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); font-size: 9px; }.day-result { margin-top: auto; font-family: Manrope; font-size: 13px; }.day-detail { margin-top: 3px; color: var(--muted); font-size: 8px; }.calendar-day.profit { background: var(--green-soft); }.calendar-day.loss { background: var(--red-soft); }
.analytics-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 15px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.analytics-filter-bar p { margin-top: 3px; color: var(--muted); font-size: 10px; }.analytics-filters { display: flex; gap: 7px; }.analytics-filters select, .analytics-filters input { width: 120px; height: 32px; font-size: 10px; }.analytics-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }.analytics-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.analysis-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }.compare-side { padding: 14px; background: var(--surface); }.compare-side h4 { margin: 0 0 10px; font-size: 12px; }.mini-stat { display: flex; justify-content: space-between; padding: 5px 0; color: var(--muted); font-size: 9px; }.mini-stat strong { color: var(--text); }.bucket-list { padding: 8px 14px 14px; }.bucket-row { padding: 9px 0; border-bottom: 1px solid var(--line); }.bucket-row:last-child { border: 0; }.bucket-top { display: flex; justify-content: space-between; font-size: 9px; }.bucket-top span { color: var(--muted); }.mini-bar { height: 4px; margin-top: 7px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }.mini-bar span { display: block; height: 100%; border-radius: inherit; }
.section-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-hero .eyebrow { color: var(--accent); margin-bottom: 7px; }
.section-hero p { max-width: 600px; margin-top: 7px; color: var(--muted); font-size: 11px; }
.playbook-hero { align-items: center; justify-content: flex-end; margin-bottom: 18px; padding: 4px 2px; }
.playbook-hero-actions { display: flex; gap: 9px; flex-shrink: 0; margin-left: auto; }
.playbook-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.playbook-summary { display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; min-height: 92px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent-soft) 34%, var(--surface))); box-shadow: 0 8px 24px rgba(31, 42, 68, .035); }
.playbook-summary > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.playbook-summary > span svg { width: 22px; }
.playbook-summary small { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.playbook-summary strong { display: block; margin-top: 1px; font-family: Manrope, sans-serif; font-size: 25px; line-height: 1.1; }
.playbook-summary p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.library-section { margin-top: 26px; }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 0 2px; }
.library-heading > div { display: flex; align-items: center; gap: 11px; }
.library-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.library-icon svg { width: 19px; }
.library-heading h3 { font-size: 18px; }
.library-heading p { margin-top: 2px; color: var(--muted); font-size: 11px; }
.library-count { min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; }
.strategy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.strategy-card { position: relative; overflow: hidden; padding: 18px; border-top: 4px solid var(--strategy-color); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--strategy-color) 4%, var(--surface))); }
.strategy-card-top { display: grid; grid-template-columns: 42px minmax(0, 1fr) 32px; gap: 11px; align-items: center; }
.strategy-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--strategy-color); background: color-mix(in srgb, var(--strategy-color) 12%, transparent); }
.strategy-mark svg { width: 20px; }
.card-kicker { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.strategy-card h3, .setup-card h3 { font-size: 17px; line-height: 1.25; }
.strategy-description { min-height: 42px; margin-top: 13px; color: var(--text); font-size: 12px; line-height: 1.6; }
.strategy-edge { margin-top: 13px; padding: 12px; border: 1px solid color-mix(in srgb, var(--strategy-color) 22%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--strategy-color) 7%, var(--surface)); }
.strategy-edge > span { display: flex; align-items: center; gap: 6px; color: var(--strategy-color); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.strategy-edge svg { width: 13px; }
.strategy-edge p { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.strategy-principles { margin-top: 14px; }
.strategy-principles strong { font-size: 10px; }
.strategy-principles ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.strategy-principles li { position: relative; padding-left: 17px; color: var(--muted); font-size: 10px; }
.strategy-principles li::before { content: "✓"; position: absolute; left: 0; color: var(--strategy-color); font-weight: 800; }
.strategy-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 16px -18px -18px; border-top: 1px solid var(--line); background: var(--line); }
.strategy-footer > div { padding: 11px 7px; background: color-mix(in srgb, var(--surface-2) 86%, var(--surface)); text-align: center; }
.strategy-footer span, .setup-stat span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .03em; }
.strategy-footer strong, .setup-stat strong { display: block; margin-top: 3px; font-size: 11px; }
.playbook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.setup-card { position: relative; overflow: hidden; }
.setup-cover { height: 5px; background: var(--setup-color); }
.setup-card-body { padding: 18px; }
.setup-card-header { display: flex; justify-content: space-between; gap: 12px; }
.strategy-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 4px 8px; border-radius: 99px; color: var(--setup-color); background: color-mix(in srgb, var(--setup-color) 10%, transparent); font-size: 9px; font-weight: 700; }
.strategy-link svg { width: 12px; }
.setup-description { min-height: 42px; margin-top: 13px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.setup-rules { margin-top: 15px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.setup-rules > strong { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 10px; }
.setup-rules > strong svg { width: 14px; color: var(--setup-color); }
.setup-rules ol { margin: 0; padding-left: 18px; color: var(--muted); font-size: 10px; }
.setup-rules li { margin: 5px 0; padding-left: 3px; }
.setup-detail-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.setup-detail-grid > div { min-height: 67px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.setup-detail-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.setup-detail-grid strong { display: block; font-size: 9px; line-height: 1.45; }
.setup-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 14px -18px -18px; background: var(--line); border-top: 1px solid var(--line); overflow: hidden; }
.setup-stat { padding: 10px 5px; background: var(--surface-2); text-align: center; }
.card-menu { display: flex; gap: 3px; }
.library-empty { min-height: 235px; border: 1px dashed var(--line-strong); border-radius: 15px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.mistake-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; }.ranked-list { padding: 8px 15px 13px; }.rank-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }.rank-row:last-child { border: 0; }.rank-num { color: var(--muted); font-size: 10px; }.rank-row strong { display: block; font-size: 10px; }.rank-row small { font-size: 8px; }.mistake-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 12px; }.mistake-card { padding: 14px; }.mistake-card-top { display: flex; justify-content: space-between; gap: 10px; }.mistake-card h3 { font-size: 13px; }.mistake-card .trend { font-size: 9px; }.mistake-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }.mistake-stat span { display: block; color: var(--muted); font-size: 8px; }.mistake-stat strong { display: block; margin-top: 2px; font-size: 11px; }
.discipline-card { display: flex; align-items: center; gap: 28px; padding: 22px; margin-bottom: 14px; background: linear-gradient(110deg, var(--accent-soft), var(--surface) 42%); }.discipline-copy { flex: 1; }.discipline-copy h3 { margin-top: 4px; font-size: 20px; }.discipline-copy > p { max-width: 760px; margin-top: 7px; color: var(--muted); font-size: 10px; }.discipline-breakdown { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 17px; }.breakdown-item { padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 75%, transparent); }.breakdown-item span { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; }.breakdown-item strong { display: block; margin-top: 3px; font-size: 10px; }.goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.goal-card { padding: 16px; }.goal-card-top { display: flex; justify-content: space-between; gap: 10px; }.goal-status { height: 20px; padding: 0 7px; border: 0; border-radius: 99px; background: var(--accent-soft); color: var(--accent-strong); font-size: 8px; }.goal-card p { min-height: 37px; margin-top: 8px; color: var(--muted); font-size: 10px; }.goal-progress-row { display: flex; justify-content: space-between; margin-top: 15px; font-size: 9px; }.progress-bar { height: 6px; margin-top: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }.progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }.goal-meta { display: flex; justify-content: space-between; margin-top: 11px; color: var(--muted); font-size: 8px; }.goal-actions { display: flex; gap: 5px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }.settings-nav { display: flex; flex-direction: column; gap: 4px; }.settings-nav button { height: 38px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; font-size: 11px; }.settings-nav button.active { color: var(--text); background: var(--surface); }.settings-content { max-width: 900px; }.settings-section { display: none; }.settings-section.active { display: block; }.settings-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }.settings-heading.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.settings-heading p { margin-top: 5px; color: var(--muted); font-size: 11px; }.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 19px 0; }.settings-form label { font-size: 10px; }.full { grid-column: 1 / -1; }.form-footer { display: flex; justify-content: flex-end; margin-top: 5px; }.account-list { display: grid; gap: 9px; padding-top: 16px; }.account-row { display: grid; grid-template-columns: 36px 1.5fr 1fr 1fr auto; gap: 13px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }.account-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }.account-icon svg { width: 16px; }.account-row strong { display: block; font-size: 11px; }.account-row small { display: block; font-size: 8px; }.account-value { color: var(--muted); font-size: 9px; }.data-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 0; }.data-action { min-height: 70px; display: grid; grid-template-columns: 38px 1fr 18px; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; }.data-action:hover { border-color: var(--line-strong); background: var(--surface-2); }.data-action > svg { width: 15px; color: var(--muted); }.action-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }.action-icon svg { width: 17px; }.data-action strong, .data-action small { display: block; }.data-action strong { font-size: 11px; }.data-action small { margin-top: 3px; font-size: 8px; }.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; padding: 15px; border: 1px solid rgba(240, 105, 114, .25); border-radius: 11px; background: var(--red-soft); }.danger-zone strong { font-size: 11px; }.danger-zone p { margin-top: 3px; color: var(--muted); font-size: 9px; }.shortcut-list { padding-top: 13px; }.shortcut-list > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }kbd { min-width: 22px; height: 21px; display: inline-grid; place-items: center; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: 8px; box-shadow: inset 0 -1px var(--line); }
.account-default-button { width: 32px; height: 32px; color: var(--muted-2); }
.account-default-button svg { width: 17px; }
.account-default-button.active { color: #e3a008; background: color-mix(in srgb, #f6b928 13%, transparent); }
.account-default-button.active svg { fill: currentColor; }
.account-default-button:hover { color: #d69200; background: color-mix(in srgb, #f6b928 13%, transparent); }
.account-row.is-default { border-color: color-mix(in srgb, #f6b928 42%, var(--line)); }
.custom-range { position: sticky; z-index: 39; top: var(--topbar-height); display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: var(--surface); }.custom-range label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; }.custom-range input { width: 135px; height: 32px; }
.modal-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(2,4,6,.7); backdrop-filter: blur(5px); animation: fadeIn .18s ease; }.modal { position: relative; z-index: 1; width: min(700px, 96vw); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); animation: modalIn .2s ease; }.modal.wide { width: min(1040px, 96vw); }.modal.narrow { width: min(480px, 96vw); }.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }.modal-header .eyebrow { margin-bottom: 4px; }.modal-footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }.modal-body { overflow: auto; padding: 18px; }.modal-form { display: grid; gap: 18px; }.form-section { padding-bottom: 17px; border-bottom: 1px solid var(--line); }.form-section:last-child { padding-bottom: 0; border-bottom: 0; }.form-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }.form-section-title span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }.form-section-title svg { width: 13px; }.form-section-title h3 { font-size: 12px; }.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }.form-field.span-2 { grid-column: span 2; }.form-field.span-3 { grid-column: span 3; }.form-field.span-4 { grid-column: 1 / -1; }.form-field label, .form-field > span { color: var(--muted); font-size: 9px; }.check-field { min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 10px; }.check-field input { width: 14px; height: 14px; accent-color: var(--accent); }.rating-input { display: flex; gap: 5px; }.rating-input input { display: none; }.rating-input label { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 9px; }.rating-input input:checked + label { color: white; border-color: var(--accent); background: var(--accent); }.calculation-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--line); }.calculation-item { padding: 10px; background: var(--surface-2); }.calculation-item span { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; }.calculation-item strong { display: block; margin-top: 3px; font-size: 10px; }.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }.tag-editor input { flex: 1; min-width: 110px; height: 24px; padding: 0; border: 0; background: transparent; box-shadow: none; }.tag-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: 9px; }.tag-chip button { width: 14px; height: 14px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; }.tag-chip svg { width: 10px; }.screenshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.screenshot-upload { position: relative; min-height: 105px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--surface-2); overflow: hidden; text-align: center; }.screenshot-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.screenshot-upload img { width: 100%; height: 105px; object-fit: cover; }.screenshot-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 8px; }.screenshot-placeholder svg { width: 18px; margin-bottom: 5px; }.screenshot-remove { position: absolute; top: 5px; right: 5px; z-index: 2; width: 23px; height: 23px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgba(0,0,0,.65); color: white; }.screenshot-remove svg { width: 12px; }
.trade-detail-stack { display: grid; gap: 14px; }
.trade-summary-card { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.trade-summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--line-strong); }
.trade-summary-card.status-closed::before { background: var(--purple); }
.trade-summary-card.status-open::before { background: var(--purple); }
.trade-summary-main { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.6fr); gap: 28px; align-items: stretch; }
.trade-summary-result { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.trade-summary-label { margin-top: 15px; color: var(--muted); font-size: 11px; font-weight: 700; }
.trade-summary-result > strong { margin-top: 2px; font-family: Manrope, sans-serif; font-size: 34px; line-height: 1.1; letter-spacing: -.04em; }
.trade-summary-subline { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.trade-summary-subline .direction-arrow { width: auto; height: 24px; display: inline-flex; gap: 4px; padding: 0 8px; border-radius: 999px; }
.trade-summary-context { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.trade-summary-context > div { min-width: 0; padding: 14px 16px; background: color-mix(in srgb, var(--surface) 86%, var(--surface-2)); }
.trade-summary-context span,
.trade-execution-metric span,
.trade-context-items span,
.trade-review-items span { display: block; color: var(--muted); font-size: 10px; font-weight: 650; }
.trade-summary-context strong { display: block; margin-top: 4px; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.trade-summary-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.trade-execution-strip,
.trade-context-review { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.trade-detail-heading { display: flex; align-items: center; gap: 11px; padding: 14px 16px; }
.trade-detail-heading > span { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.trade-detail-heading svg { width: 17px; }
.trade-detail-heading h3 { font-size: 14px; }
.trade-detail-heading p { margin-top: 2px; color: var(--muted); font-size: 10px; }
.trade-execution-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-top: 1px solid var(--line); }
.trade-execution-metric { min-width: 0; padding: 14px 13px; }
.trade-execution-metric + .trade-execution-metric { border-left: 1px solid var(--line); }
.trade-execution-metric strong { display: block; margin-top: 4px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.trade-context-review { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.trade-context-side { min-width: 0; border-right: 1px solid var(--line); }
.trade-context-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 22px; padding: 0 16px 17px 62px; }
.trade-context-items strong,
.trade-review-items strong { display: block; margin-top: 3px; font-size: 12px; }
.trade-review-side { min-width: 0; display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 16px; align-items: center; padding: 17px; background: var(--surface-2); }
.trade-review-score { width: 96px; height: 96px; display: grid; place-content: center; justify-items: center; border: 7px solid var(--accent-soft); border-radius: 50%; background: var(--surface); }
.trade-review-score span { color: var(--muted); font-size: 9px; font-weight: 700; }
.trade-review-score strong { margin-top: 1px; font-family: Manrope, sans-serif; font-size: 26px; line-height: 1; }
.trade-review-score small { margin-top: 1px; font-size: 9px; }
.trade-review-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 15px; }
.trade-review-items > div:last-child { grid-column: 1 / -1; }
.detail-section { padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.detail-section.wide { grid-column: 1 / -1; }
.detail-section h3 { margin-bottom: 9px; font-size: 13px; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.detail-item span { display: block; color: var(--muted); font-size: 8px; }
.detail-item strong { display: block; margin-top: 2px; font-size: 10px; }
.detail-notes { color: var(--muted); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.detail-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.detail-images img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.journal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.journal-group { padding: 13px; border: 1px solid var(--line); border-radius: 10px; }.journal-group h3 { margin-bottom: 11px; }.journal-group .form-grid { grid-template-columns: 1fr 1fr; }
.confirm-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 5px auto 15px; border-radius: 14px; color: var(--red); background: var(--red-soft); }.confirm-copy { text-align: center; }.confirm-copy p { margin: 7px auto 2px; max-width: 360px; color: var(--muted); font-size: 11px; }.global-results { display: grid; gap: 4px; margin-top: 12px; }.search-result { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; }.search-result:hover { background: var(--surface-2); }.search-result-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }.search-result-icon svg { width: 14px; }.search-result strong, .search-result small { display: block; }.search-result strong { font-size: 10px; }.search-result small { margin-top: 2px; font-size: 8px; }.search-result > small { color: var(--muted); }
.toast-stack { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; gap: 8px; }.toast { min-width: 260px; display: grid; grid-template-columns: 27px 1fr; gap: 9px; align-items: center; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); animation: toastIn .22s ease; }.toast-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--green); background: var(--green-soft); }.toast-icon svg { width: 13px; }.toast strong { display: block; font-size: 10px; }.toast small { display: block; margin-top: 2px; font-size: 8px; }
.chart-tooltip { position: fixed; z-index: 150; pointer-events: none; min-width: 100px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); font-size: 9px; }.chart-tooltip strong, .chart-tooltip span { display: block; }.chart-tooltip span { margin-top: 2px; color: var(--muted); }
@keyframes fadeIn { from { opacity: 0; } } @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } } @keyframes toastIn { from { opacity: 0; transform: translateX(12px); } }

@media (max-width: 1350px) {
  .metric-grid { grid-template-columns: repeat(4, 1fr); }
  .filter-grid { grid-template-columns: repeat(5, 1fr); }
  .calendar-metrics { grid-template-columns: repeat(4, 1fr); }
  .mistake-grid { grid-template-columns: repeat(3, 1fr); }
  .discipline-breakdown { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1120px) {
  :root { --sidebar-width: 72px; }
  .sidebar .brand-copy, .sidebar .nav-item span, .sidebar .sidebar-card, .sidebar .collapse-button { display: none; }
  .sidebar .brand { justify-content: center; }.sidebar .nav-item { justify-content: center; padding: 0; }
  .top-filter { display: none; }
  .primary-grid, .secondary-grid, .summary-grid { grid-template-columns: 1fr; }
  .analytics-kpis { grid-template-columns: repeat(3, 1fr); }
  .analysis-panels { grid-template-columns: 1fr 1fr; }.analysis-panels > :last-child { grid-column: 1 / -1; }
  .playbook-grid, .strategy-grid, .goal-grid { grid-template-columns: 1fr 1fr; }
  .mistake-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  :root { --topbar-height: 64px; }
  .sidebar { width: 244px; transform: translateX(-100%); box-shadow: var(--shadow); }.sidebar.mobile-open { transform: translateX(0); }.sidebar.mobile-open .brand-copy, .sidebar.mobile-open .nav-item span, .sidebar.mobile-open .sidebar-card { display: initial; }.sidebar.mobile-open .brand { justify-content: flex-start; }.sidebar.mobile-open .nav-item { justify-content: flex-start; padding: 0 11px; }
  .main-shell, .sidebar.collapsed + .main-shell { margin-left: 0; }.mobile-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.55); }
  .mobile-menu { display: grid; }
  .topbar { padding: 0 14px; }.topbar-title-wrap .eyebrow { display: none; }.topbar h1 { font-size: 17px; }.topbar-actions { gap: 6px; }.topbar-actions .primary-button { width: 38px; padding: 0; }.topbar-actions .primary-button span, .topbar-actions .primary-button kbd, .avatar-button { display: none; }
  main { padding: 18px 14px 40px; }
  .welcome-row { align-items: flex-start; }.discipline-pill > span:last-child { display: none; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-card { min-width: 0; }
  .panel-header { align-items: flex-start; }.segmented { max-width: 160px; overflow: auto; }
  .chart-wrap.large { height: 230px; }.summary-list { grid-template-columns: 1fr; }.summary-item:nth-child(odd), .summary-item:nth-child(even) { padding: 10px 0; border-left: 0; }.summary-item:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .risk-form { grid-template-columns: 1fr 1fr; }.risk-results { grid-template-columns: repeat(2, 1fr); }
  .view-toolbar { flex-wrap: wrap; }.search-field.grow { flex-basis: 100%; }.filter-grid { grid-template-columns: 1fr 1fr; }
  .calendar-topbar { align-items: flex-start; }.calendar-topbar > p { display: none; }.calendar-metrics { grid-template-columns: repeat(2, 1fr); }.calendar-panel { padding: 6px; overflow: auto; }.calendar-weekdays, .calendar-grid { min-width: 665px; }.calendar-day { min-height: 90px; }
  .analytics-filter-bar { align-items: flex-start; flex-direction: column; }.analytics-filters { width: 100%; overflow: auto; }.analytics-chart-grid, .analysis-panels, .mistake-hero-grid { grid-template-columns: 1fr; }.analysis-panels > :last-child { grid-column: auto; }
  .playbook-grid, .strategy-grid, .goal-grid, .mistake-grid { grid-template-columns: 1fr; }.section-hero { align-items: flex-start; }.section-hero p { display: none; }
  .playbook-hero { flex-direction: column; }
  .playbook-hero-actions { width: 100%; }
  .playbook-hero-actions button { flex: 1; }
  .playbook-overview { grid-template-columns: 1fr; }
  .setup-detail-grid { grid-template-columns: 1fr; }
  .discipline-card { align-items: flex-start; flex-direction: column; }.discipline-breakdown { grid-template-columns: 1fr 1fr; }
  .settings-layout { grid-template-columns: 1fr; }.settings-nav { flex-direction: row; overflow: auto; }.settings-nav button { white-space: nowrap; }.settings-form, .data-actions-grid { grid-template-columns: 1fr; }.account-row { grid-template-columns: 36px 1fr auto; }.account-row .account-value { display: none; }
  .modal-layer { padding: 0; align-items: end; }.modal, .modal.wide, .modal.narrow { width: 100%; max-height: 94vh; border-radius: 15px 15px 0 0; }.form-grid, .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr 1fr; }.form-field.span-3, .form-field.span-4 { grid-column: 1 / -1; }.calculation-strip { grid-template-columns: repeat(3, 1fr); }.journal-form { grid-template-columns: 1fr; }.detail-section.wide { grid-column: auto; }
}
@media (max-width: 720px) {
  .trade-summary-main,
  .trade-context-review { grid-template-columns: 1fr; }
  .trade-context-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .trade-execution-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trade-execution-metric:nth-child(odd) { border-left: 0; }
  .trade-execution-metric:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 470px) {
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.metric-card { min-height: 96px; padding: 12px; }.metric-value { font-size: 17px; }
  .filter-grid, .risk-form, .form-grid, .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }.form-field.span-2, .form-field.span-3, .form-field.span-4 { grid-column: auto; }
  .trade-summary-card { padding: 17px; }
  .trade-summary-context,
  .trade-context-items,
  .trade-review-items { grid-template-columns: 1fr; }
  .trade-context-items { padding-left: 16px; }
  .trade-review-side { grid-template-columns: 88px minmax(0,1fr); }
  .trade-review-score { width: 78px; height: 78px; border-width: 5px; }
  .trade-review-items > div:last-child { grid-column: auto; }
  .screenshot-grid, .detail-images { grid-template-columns: 1fr; }.calculation-strip { grid-template-columns: repeat(2, 1fr); }.month-nav h2 { min-width: 130px; font-size: 19px; }.month-nav .small-button { display: none; }
}

@media print {
  .sidebar, .topbar, .view-toolbar, .mobile-overlay { display: none!important; }.main-shell { margin: 0!important; }body { background: white; color: #111; }main { padding: 0; }.panel { break-inside: avoid; }
}

/* Four balanced comparison panels and the complete five-stat playbook footer. */
.setup-stats { grid-template-columns: repeat(5, 1fr); }
.setup-stat { padding-inline: 4px; }
.setup-stat strong { font-size: 9px; }
@media (min-width: 1121px) { .analysis-panels { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 761px) and (max-width: 1120px) { .analysis-panels > :last-child { grid-column: auto; } }

/* Readability pass: supporting copy should remain comfortably legible. */
.eyebrow, .section-kicker, .brand-copy small, .nav-count, .storage-row,
.discipline-pill small, .metric-foot, .segmented button, .symbol-mark,
.badge, .chip, .live-badge, .calendar-metric span, .calendar-weekdays span,
.day-number, .day-detail, .mini-stat, .bucket-top, .setup-rules strong,
.setup-rules ol, .setup-stat span, .rank-row small, .mistake-card .trend,
.mistake-stat span, .breakdown-item span, .goal-status, .goal-progress-row,
.goal-meta, .account-row small, .account-value, .data-action small,
.danger-zone p, kbd, .custom-range label, .form-field label,
.form-field > span, .rating-input label, .calculation-item span,
.tag-chip, .screenshot-placeholder, .detail-item span, .search-result small,
.toast small, .chart-tooltip { font-size: 11px; }

.metric-label, .insight p, .summary-item, .risk-form label,
.filter-grid label, .settings-form label, .risk-result span, .table-meta,
.analytics-filter-bar p, .analytics-filters select, .analytics-filters input,
.setup-card p, .rank-row strong, .discipline-copy > p, .goal-card p,
.settings-form label, .data-action strong, .danger-zone strong,
.check-field, .calculation-item strong, .detail-item strong,
.detail-notes, .search-result strong, .toast strong { font-size: 12px; }

.data-table { font-size: 12px; }
.data-table th { font-size: 11px; }
.primary-button, .secondary-button, .compact-field select { font-size: 13px; }
.text-button, .settings-nav button { font-size: 12px; }
.sidebar-card p, .discipline-pill strong, .section-hero p,
.settings-heading p, .account-row strong, .detail-section h3,
.confirm-copy p { font-size: 12px; }
.modal .muted { font-size: 12px !important; }

/* Lite version: bright, calm, spacious, and focused on the essentials. */
@scope (html[data-experience="lite"]) {
:scope[data-theme="light"] {
  --bg: #f5f7fb;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef1f7;
  --line: #e2e6ee;
  --line-strong: #cfd6e2;
  --text: #172033;
  --muted: #687286;
  --muted-2: #9199aa;
  --accent: #596fe8;
  --accent-strong: #455bd2;
  --accent-soft: rgba(89, 111, 232, .1);
  --green: #138a5b;
  --green-soft: rgba(19, 138, 91, .1);
  --red: #d84f5d;
  --red-soft: rgba(216, 79, 93, .1);
  --shadow: 0 14px 38px rgba(46, 57, 82, .08);
}

body { font-size: 16px; line-height: 1.55; }
h1 { font-size: 25px; }
h2 { font-size: 32px; line-height: 1.22; }
h3 { font-size: 19px; }
.eyebrow, .section-kicker { font-size: 12px; letter-spacing: .08em; }
.brand-copy strong { font-size: 17px; }
.brand-copy small { font-size: 11px; }
.nav-item { height: 48px; font-size: 15px; border-radius: 12px; }
.nav-item svg { width: 19px; height: 19px; }
.sidebar { padding: 20px 16px; }
.sidebar-card { display: none; }
.nav-list button[data-nav="mistakes"],
.nav-list button[data-nav="goals"] { display: none; }
.topbar { height: 82px; padding-inline: 32px; background: color-mix(in srgb, var(--bg) 92%, transparent); }
.topbar-actions { gap: 10px; }
.icon-button, .compact-field, .primary-button, .secondary-button { height: 44px; }
.icon-button { width: 44px; }
.primary-button, .secondary-button, .compact-field select { font-size: 14px; }
.primary-button { padding-inline: 17px; }
.primary-button kbd, #searchButton, .avatar-button { display: none; }
main { max-width: 1500px; margin: 0 auto; padding: 34px 34px 60px; }
.welcome-row { margin-bottom: 26px; }
.welcome-row .muted { margin-top: 8px; font-size: 16px; }
.welcome-row .section-kicker { margin-bottom: 8px; }
.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.metric-card { min-height: 138px; padding: 20px; border-radius: 18px; box-shadow: var(--shadow); }
.metric-label { font-size: 14px; }
.metric-icon { width: 36px; height: 36px; border-radius: 11px; }
.metric-icon svg { width: 18px; height: 18px; }
.metric-value { margin-top: 13px; font-size: 29px; }
.metric-foot { margin-top: 6px; font-size: 13px; }
.panel { border-radius: 18px; box-shadow: var(--shadow); }
.dashboard-grid { gap: 16px; margin-top: 16px; }
.primary-grid, .simple-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recent-grid { grid-template-columns: 1fr; }
.panel-header { min-height: 76px; padding: 17px 20px; }
.chart-wrap { padding: 18px; }
.chart-wrap.large { height: 330px; }
.chart-wrap.medium { height: 290px; }
.segmented button { height: 31px; padding-inline: 11px; font-size: 12px; }
.data-table { font-size: 14px; }
.data-table th { height: 46px; padding-inline: 16px; font-size: 12px; }
.data-table td { height: 58px; padding-inline: 16px; }
.badge, .chip { min-height: 27px; height: auto; padding: 4px 9px; font-size: 12px; }
.symbol-mark { width: 34px; height: 34px; font-size: 11px; }
.advanced-control, .advanced-analytics,
#analyticsView .analysis-panels,
#analyticsView > .table-panel { display: none !important; }
.trades-table { min-width: 820px; }
.table-meta { padding: 16px 18px; font-size: 13px; }
.view-toolbar { margin-bottom: 16px; }
.search-field { height: 48px; padding-inline: 15px; font-size: 15px; }
.search-field svg { width: 18px; }
.calendar-metrics { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.calendar-metric { padding: 17px; border-radius: 15px; box-shadow: var(--shadow); }
.calendar-metric span { font-size: 13px; }
.calendar-metric strong { font-size: 20px; }
.calendar-weekdays span, .day-number, .day-detail { font-size: 12px; }
.day-result { font-size: 16px; }
.analytics-chart-grid { gap: 16px; }

.modal.narrow { width: min(650px, 96vw); }
.modal-header, .modal-footer { padding: 20px 24px; }
.modal-body { padding: 24px; }
.beginner-form-intro { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--accent-soft); }
.beginner-form-intro > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--surface); }
.beginner-form-intro svg { width: 18px; }
.beginner-form-intro strong { display: block; font-size: 16px; }
.beginner-form-intro p { margin-top: 3px; color: var(--muted); font-size: 14px; }
.beginner-grid { gap: 16px; }
.beginner-grid .form-field, .beginner-grid .form-field > span { font-size: 14px; }
.beginner-grid input, .beginner-grid select { height: 48px; padding-inline: 13px; font-size: 16px; border-radius: 11px; }
.beginner-grid textarea { min-height: 100px; padding: 13px; font-size: 15px; border-radius: 11px; }
.beginner-grid .form-field > span small { color: var(--muted-2); font-size: 12px; font-weight: 500; }
.result-field input { color: var(--text); font-size: 19px; font-weight: 700; }
.result-field > small { color: var(--muted); font-size: 12px; font-weight: 500; }
.beginner-calculation { grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-radius: 13px; }
.beginner-calculation .calculation-item { padding: 14px; }
.beginner-calculation .calculation-item span { font-size: 11px; }
.beginner-calculation .calculation-item strong { margin-top: 5px; font-size: 17px; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .primary-grid, .simple-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar { height: 70px; padding-inline: 15px; }
  main { padding: 22px 15px 42px; }
  h2 { font-size: 27px; }
  .metric-grid { gap: 10px; }
  .metric-card { min-height: 125px; padding: 16px; }
  .metric-value { font-size: 24px; }
  .chart-wrap.large, .chart-wrap.medium { height: 280px; }
  .calendar-metrics { grid-template-columns: repeat(2, 1fr); }
  .analytics-chart-grid { grid-template-columns: 1fr; }
  .beginner-grid { grid-template-columns: 1fr; }
  .beginner-grid .form-field.span-2 { grid-column: auto; }
}

@media (max-width: 470px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 116px; }
  .beginner-calculation { grid-template-columns: 1fr; }
}
}

/* Pro version: keep the complete workflow, but match Lite's readable type scale. */
@scope (html[data-experience="pro"]) {
body { font-size: 16px; line-height: 1.55; }
h1 { font-size: 25px; }
h2 { font-size: 32px; line-height: 1.22; }
h3 { font-size: 19px; }
.eyebrow, .section-kicker { font-size: 12px; letter-spacing: .08em; }
.brand-copy strong { font-size: 17px; }
.brand-copy small { font-size: 11px; }
.nav-item { min-height: 48px; font-size: 15px; }
.nav-item svg { width: 19px; height: 19px; }
.nav-count, .storage-row { font-size: 12px; }
.sidebar-card p { font-size: 13px; }
.topbar { min-height: 82px; }
.icon-button, .compact-field, .primary-button, .secondary-button { height: 44px; }
.icon-button { width: 44px; }
.primary-button, .secondary-button, .compact-field select { font-size: 14px; }
.text-button, .settings-nav button { font-size: 14px; }
.welcome-row .muted { font-size: 16px; }
.discipline-pill small { font-size: 12px; }
.discipline-pill strong { font-size: 14px; }
.score-ring.small b { font-size: 14px; }

.metric-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.metric-card { min-height: 138px; padding: 20px; }
.metric-label { font-size: 14px; }
.metric-icon { width: 36px; height: 36px; }
.metric-icon svg { width: 18px; }
.metric-value { margin-top: 13px; font-size: 29px; }
.metric-foot { margin-top: 6px; font-size: 13px; }
.dashboard-grid { gap: 16px; margin-top: 16px; }
.panel-header { min-height: 76px; padding: 17px 20px; }
.chart-wrap.large { height: 330px; }
.chart-wrap.medium { height: 290px; }
.segmented button { height: 31px; padding-inline: 11px; font-size: 12px; }
.insight p, .summary-item, .risk-form label, .risk-result span { font-size: 14px; }
.risk-result strong { font-size: 16px; }

.data-table { font-size: 14px; }
.data-table th { height: 46px; padding-inline: 16px; font-size: 12px; }
.data-table td { height: 58px; padding-inline: 16px; }
.badge, .chip, .live-badge { min-height: 27px; height: auto; padding: 4px 9px; font-size: 12px; }
.symbol-mark { width: 34px; height: 34px; font-size: 11px; }
.table-meta, .bulk-bar, .pagination, .page-button, .columns-popover label { font-size: 13px; }
.search-field { height: 48px; font-size: 15px; }
.search-field svg { width: 18px; }
.trades-table { min-width: 2200px; }
.filter-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.filter-grid label, .analytics-filter-bar p { font-size: 14px; }
.analytics-filters select, .analytics-filters input { width: 145px; height: 42px; font-size: 14px; }
.analytics-kpis { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.compare-side h4 { font-size: 16px; }
.mini-stat, .bucket-top { font-size: 13px; }

.calendar-metric { padding: 17px; }
.calendar-metric span { font-size: 13px; }
.calendar-metric strong { font-size: 20px; }
.calendar-weekdays span, .day-number, .day-detail { font-size: 12px; }
.day-result { font-size: 16px; }
.calendar-day { min-height: 118px; }

.section-hero p, .setup-card p, .discipline-copy > p, .goal-card p, .settings-heading p { font-size: 14px; }
.setup-rules strong, .setup-rules ol, .setup-stat span, .rank-row small,
.mistake-card .trend, .mistake-stat span, .breakdown-item span,
.goal-status, .goal-progress-row, .goal-meta, .account-row small,
.account-value, .data-action small, .danger-zone p, kbd { font-size: 12px; }
.setup-stat strong, .rank-row strong, .mistake-stat strong,
.breakdown-item strong, .account-row strong, .data-action strong,
.danger-zone strong, .shortcut-list > div { font-size: 14px; }

.modal.wide { width: min(1120px, 96vw); }
.modal.wide:has(#tradeForm) {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 18px;
}
.modal.wide:has(#tradeForm) .modal-header {
  align-items: flex-start;
  padding: 22px 24px 20px;
}
.modal.wide:has(#tradeForm) .modal-header .icon-button { flex: 0 0 auto; }
.modal.wide:has(#tradeForm) .modal-body {
  padding: 24px;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.modal.wide:has(#tradeForm) .modal-footer {
  min-height: 78px;
  padding: 16px 24px;
  gap: 12px;
}
.modal-header, .modal-footer { padding: 20px 24px; }
.modal-body { padding: 24px; }
.form-section-title h3 { font-size: 18px; }
.form-section-title span { width: 34px; height: 34px; }
.form-section-title svg { width: 18px; }
#tradeForm { width: 100%; min-width: 0; gap: 0; }
#tradeForm .form-section {
  min-width: 0;
  margin-bottom: 26px;
  padding-bottom: 26px;
}
#tradeForm .form-section:last-child { margin-bottom: 0; padding-bottom: 0; }
#tradeForm .form-section-title { gap: 12px; margin-bottom: 20px; }
#tradeForm .form-grid,
#tradeForm .form-grid.cols-2,
#tradeForm .form-grid.cols-3 {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
#tradeForm .form-grid.basic-info-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
}
#tradeForm .basic-info-grid > .form-field:not(.timing-field):not(.identity-field) { grid-column: 1 / -1; }
#tradeForm .form-grid.execution-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
#tradeForm .execution-grid .form-field > span {
  min-height: 30px;
  display: flex;
  align-items: flex-end;
  font-size: 11px;
  line-height: 1.25;
}
#tradeForm .execution-grid input {
  height: 42px;
  padding-inline: 7px;
  font-size: 14px;
}
#tradeForm .form-grid.trade-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
}
#tradeForm .trade-plan-grid > .form-field:not(.plan-primary):not(.plan-secondary) { grid-column: 1 / -1; }
#tradeForm .form-field.span-2,
#tradeForm .form-field.span-3,
#tradeForm .form-field.span-4 { grid-column: auto; }
#tradeForm .form-field { min-width: 0; gap: 8px; }
#tradeForm input,
#tradeForm select,
#tradeForm textarea { max-width: 100%; border-radius: 10px; }
#tradeForm .calculation-strip {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
#tradeForm .calculation-item { min-width: 0; }
#tradeForm .rating-input { flex-wrap: wrap; }
#tradeForm .psychology-section > .form-section-title { justify-content: center; }
#tradeForm .psychology-ratings {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  gap: 18px;
}
#tradeForm .psychology-ratings .form-field { width: max-content; }
#tradeForm .psychology-emotions {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#tradeForm .tag-editor { min-width: 0; }
#tradeForm .tag-editor input { min-width: 0; }
#tradeForm .screenshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tradeForm .screenshot-upload { min-width: 0; }
.form-field, .form-field label, .form-field > span, .check-field,
.settings-form label, .custom-range label { font-size: 14px; }
input, select, textarea { font-size: 15px; }
input, select { height: 46px; }
select[multiple] { height: auto; min-height: 120px; }
textarea { min-height: 100px; }
.rating-input label { width: 40px; height: 40px; font-size: 14px; }
.check-field { min-height: 46px; }
.calculation-item { padding: 14px; }
.calculation-item span { font-size: 12px; }
.calculation-item strong { margin-top: 5px; font-size: 17px; }
.tag-chip, .screenshot-placeholder, .detail-item span, .search-result small,
.toast small, .chart-tooltip { font-size: 13px; }
.detail-item strong, .detail-notes, .search-result strong, .toast strong,
.confirm-copy p { font-size: 15px; }

@media (max-width: 1120px) {
  .metric-grid, .analytics-kpis { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  h2 { font-size: 27px; }
  .metric-grid, .analytics-kpis, .filter-grid { grid-template-columns: 1fr; }
  .metric-value { font-size: 24px; }
  .analytics-filters select, .analytics-filters input { min-width: 145px; }
}
}

html[data-experience="lite"] .pro-only,
html[data-experience="pro"] .lite-only { display: none !important; }

.experience-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}
.experience-switch button {
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font: 700 12px/1 Inter, sans-serif;
  cursor: pointer;
}
.experience-switch button.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(114, 96, 255, .24);
}

@media (max-width: 760px) {
  .experience-switch button { min-width: 44px; padding-inline: 9px; }
}

/* Lite trade entry — beginner-first position journal */
.modal.lite-trade-modal {
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 22px;
}
.modal.lite-trade-modal .modal-header { padding: 20px 28px 18px; }
.modal.lite-trade-modal .modal-kicker { display: none; }
.modal.lite-trade-modal .modal-body { padding: 0 28px 28px; overflow-x: hidden; }
.modal.lite-trade-modal .modal-footer { min-height: 78px; padding: 16px 28px; }
.lite-trade-form { width: 100%; gap: 18px; color: var(--text); }
.lite-trade-form input,
.lite-trade-form select,
.lite-trade-form textarea { width: 100%; min-width: 0; border-radius: 12px; }
.lite-trade-form textarea { resize: vertical; }

.lite-portfolio-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .9fr); gap: 14px; }
.lite-portfolio-row.lite-account-only-row { grid-template-columns: minmax(0, 1fr); }
.lite-portfolio-card,
.lite-account-picker,
.lite-position-row,
.lite-field-card,
.lite-wide-field,
.lite-rating-field,
.lite-rule-check,
.lite-mistakes-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.lite-portfolio-card { min-height: 104px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.lite-card-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.lite-card-icon svg { width: 23px; height: 23px; }
.lite-portfolio-card > span:last-child { display: grid; gap: 2px; }
.lite-portfolio-card small,
.lite-account-picker > span,
.lite-position-row label > span:first-child,
.lite-percent-field > span,
.lite-field-card > span,
.lite-wide-field > span,
.lite-section-label > span { color: var(--muted); font-size: 12px; font-weight: 750; }
.lite-portfolio-card .lite-account-name { font-size: 17px; letter-spacing: -.015em; }
.lite-account-balance { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.lite-account-balance b { font-size: 21px; letter-spacing: -.025em; }
.lite-portfolio-card em { color: var(--muted); font-size: 12px; font-style: normal; }
.lite-account-picker { display: grid; align-content: center; gap: 7px; padding: 14px 16px; }
.lite-account-picker select { height: 46px; font-weight: 750; background-color: var(--surface); }

.lite-position-row { display: grid; grid-template-columns: minmax(210px, 1.35fr) minmax(150px, .8fr) minmax(150px, 1fr) minmax(120px, .72fr) minmax(110px, .65fr); gap: 12px; padding: 15px; align-items: stretch; }
.lite-coin-field { min-width: 0; display: flex; align-items: center; gap: 11px; }
.lite-coin-logo { width: 52px; height: 52px; position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.lite-coin-logo img { position: relative; z-index: 1; width: 38px; height: 38px; object-fit: contain; }
.lite-coin-logo b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 13px; }
.lite-coin-logo b.is-placeholder { font-family: Manrope, Inter, sans-serif; font-size: 29px; font-weight: 800; line-height: 1; color: var(--accent); }
.lite-coin-field label,
.lite-amount-field,
.lite-leverage-field { min-width: 0; display: grid; align-content: center; gap: 6px; }
.lite-coin-field input,
.lite-amount-field input,
.lite-leverage-field input { height: 44px; background-color: var(--surface); }
.lite-coin-field input { font-weight: 800; text-transform: uppercase; }
.lite-coin-field small { min-height: 15px; color: var(--muted); font-size: 11px; }
.lite-direction-field { min-width: 0; display: grid; align-content: center; gap: 6px; margin: 0; padding: 0; border: 0; }
.lite-direction-field legend { padding: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.lite-direction-toggle { height: 44px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lite-direction-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lite-direction-toggle label { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; font-size: 11px; font-weight: 800; transition: color .16s ease, background .16s ease; }
.lite-direction-toggle label svg { width: 18px; height: 18px; stroke-width: 2.4; }
.lite-direction-toggle label.long { color: var(--green); background: var(--green-soft); }
.lite-direction-toggle label.short { color: var(--red); border-left: 1px solid var(--line); background: var(--red-soft); }
.lite-direction-toggle input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -3px; }
.lite-direction-toggle input:checked + label.long { color: #fff; background: var(--green); }
.lite-direction-toggle input:checked + label.short { color: #fff; background: var(--red); }
.lite-money-input { position: relative; display: block; }
.lite-money-input b { position: absolute; z-index: 1; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
.lite-money-input input { padding-left: 29px; font-weight: 800; }
.lite-leverage-input { position: relative; display: block; }
.lite-leverage-input input { width: 100%; padding-right: 35px; font-weight: 800; appearance: textfield; }
.lite-leverage-input input::-webkit-inner-spin-button,
.lite-leverage-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.lite-leverage-input b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; pointer-events: none; }
.lite-percent-field { display: grid; align-content: center; gap: 3px; padding: 0 8px; }
.lite-percent-field strong { color: var(--accent); font-size: 24px; letter-spacing: -.03em; }
.lite-percent-field small { color: var(--muted); font-size: 10px; line-height: 1.25; }

.lite-two-column-row,
.lite-ratings-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lite-field-card,
.lite-wide-field { display: grid; gap: 8px; padding: 15px 16px; }
.lite-field-card input { height: 48px; background: var(--surface); }
.lite-wide-field textarea { min-height: 96px; padding: 13px 14px; line-height: 1.55; background: var(--surface); }

.lite-rating-field { min-width: 0; margin: 0; padding: 15px 16px 17px; }
.lite-rating-field legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.lite-stars { display: flex; justify-content: center; gap: 9px; }
.lite-stars input { position: absolute; opacity: 0; pointer-events: none; }
.lite-stars label { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--line-strong); background: var(--surface); cursor: pointer; transition: .16s ease; }
.lite-stars label span { font-size: 28px; line-height: 1; }
.lite-stars label.selected { color: #f6b928; border-color: color-mix(in srgb, #f6b928 50%, var(--line)); background: color-mix(in srgb, #f6b928 10%, var(--surface)); transform: translateY(-1px); }
.lite-stars input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); }

.lite-rule-checklist { display: grid; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.lite-rule-checklist-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lite-rule-checklist-heading > span { min-width: 0; display: flex; align-items: center; gap: 10px; }
.lite-rule-checklist-heading svg { width: 23px; height: 23px; flex: 0 0 auto; color: var(--accent); }
.lite-rule-checklist-heading > span > span { display: grid; gap: 2px; }
.lite-rule-checklist-heading b { font-size: 14px; }
.lite-rule-checklist-heading small { color: var(--muted); font-size: 11px; }
.lite-rule-checklist-heading > strong { min-width: 50px; min-height: 32px; display: grid; place-items: center; padding: 5px 10px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 12px; }
.lite-rule-checklist-heading > strong.complete { color: var(--green); background: var(--green-soft); }
.lite-rule-groups { display: grid; gap: 10px; }
.lite-rule-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 11px; border-top: 1px solid var(--line); }
.lite-rule-source { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); }
.lite-rule-source b { color: var(--text); font-size: 12px; }
.lite-rule-source span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lite-rule-item { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.lite-rule-item:hover { border-color: color-mix(in srgb,var(--accent) 36%,var(--line)); transform: translateY(-1px); }
.lite-rule-item:has(input:checked) { border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); background: var(--accent-soft); }
.lite-rule-item input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.lite-rule-item span { color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.35; }
.lite-rule-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); font-size: 12px; text-align: center; }

.lite-mistakes-section { display: grid; gap: 10px; padding: 15px 16px; }
.lite-section-label { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.lite-section-label small { color: var(--muted); font-size: 11px; }
.lite-mistake-editor { min-height: 50px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#liteMistakeTags { display: contents; }
.lite-mistake-editor input { flex: 1 1 190px; width: auto; height: 34px; padding: 0 5px; border: 0; background: transparent; box-shadow: none; }
.lite-mistake-tag { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); font-size: 12px; font-weight: 750; }
.lite-mistake-tag button { width: 21px; height: 21px; border: 0; border-radius: 50%; color: inherit; background: color-mix(in srgb, var(--accent) 11%, transparent); cursor: pointer; }
.lite-mistake-options { display: flex; flex-wrap: wrap; gap: 6px; max-height: 86px; overflow: auto; }
.lite-mistake-option { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 11px; cursor: pointer; }
.lite-mistake-option:hover,
.lite-mistake-option.selected { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.lite-notes-field textarea { min-height: 118px; }
.lite-result-section { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.lite-result-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; }
.lite-result-input small { color: var(--muted); font-size: 11px; }
.lite-result-status { min-width: 92px; min-height: 36px; display: grid; place-items: center; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.lite-result-status.status-open { color: var(--purple); border-color: var(--purple); background: transparent; }
.lite-result-status.status-closed { color: #fff; border-color: var(--purple); background: var(--purple); }
.lite-result-input { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); align-items: center; gap: 7px 14px; }
.lite-result-input > span:first-child { color: var(--muted); font-size: 12px; font-weight: 750; }
.lite-result-input .lite-money-input { grid-column: 2; grid-row: 1 / 3; }
.lite-result-input input { height: 48px; background: var(--surface); }

@media (max-width: 820px) {
  .modal.lite-trade-modal .modal-header,
  .modal.lite-trade-modal .modal-footer { padding-inline: 20px; }
  .modal.lite-trade-modal .modal-body { padding-inline: 20px; }
  .lite-position-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lite-percent-field { min-height: 74px; padding: 8px 4px; }
}

@media (max-width: 600px) {
  .modal.lite-trade-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 17px; }
  .modal.lite-trade-modal .modal-header { padding: 16px 16px 14px; }
  .modal.lite-trade-modal .modal-body { padding: 0 14px 20px; }
  .modal.lite-trade-modal .modal-footer { min-height: 70px; padding: 12px 14px; }
  .lite-portfolio-row,
  .lite-position-row,
  .lite-two-column-row,
  .lite-ratings-row { grid-template-columns: 1fr; }
  .lite-stars { gap: 6px; }
  .lite-stars label { width: 42px; height: 42px; }
  .lite-result-input { grid-template-columns: 1fr; }
  .lite-result-input .lite-money-input { grid-column: 1; grid-row: auto; }
  .lite-section-label { display: grid; gap: 3px; }
  .lite-rule-group { grid-template-columns: 1fr; }
}

/* Keep the Lite Playbook as readable as the Pro library. */
html[data-experience="lite"] #playbookView .section-hero p { font-size: 14px; }
html[data-experience="lite"] #playbookView .playbook-summary small { font-size: 12px; }
html[data-experience="lite"] #playbookView .playbook-summary p { font-size: 13px; }
html[data-experience="lite"] #playbookView .library-heading h3 { font-size: 19px; }
html[data-experience="lite"] #playbookView .library-heading p,
html[data-experience="lite"] #playbookView .library-count { font-size: 13px; }
html[data-experience="lite"] #playbookView .card-kicker { font-size: 11px; }
html[data-experience="lite"] #playbookView .strategy-card h3,
html[data-experience="lite"] #playbookView .setup-card h3 { font-size: 19px; }
html[data-experience="lite"] #playbookView .strategy-description,
html[data-experience="lite"] #playbookView .setup-description { font-size: 14px; }
html[data-experience="lite"] #playbookView .strategy-edge > span,
html[data-experience="lite"] #playbookView .strategy-principles strong { font-size: 12px; }
html[data-experience="lite"] #playbookView .strategy-edge p,
html[data-experience="lite"] #playbookView .strategy-principles li { font-size: 13px; }
html[data-experience="lite"] #playbookView .strategy-link { font-size: 12px; }
html[data-experience="lite"] #playbookView .setup-rules > strong,
html[data-experience="lite"] #playbookView .setup-rules ol,
html[data-experience="lite"] #playbookView .strategy-footer span,
html[data-experience="lite"] #playbookView .setup-stat span { font-size: 12px; }
html[data-experience="lite"] #playbookView .setup-detail-grid span { font-size: 11px; }
html[data-experience="lite"] #playbookView .setup-detail-grid strong { font-size: 12px; }
html[data-experience="lite"] #playbookView .strategy-footer strong,
html[data-experience="lite"] #playbookView .setup-stat strong { font-size: 14px; }

/* Large, comfortable type in Lite Playbook editors. */
html[data-experience="lite"] .modal:has(#strategyForm) .modal-header,
html[data-experience="lite"] .modal:has(#setupForm) .modal-header { padding: 24px 28px; }
html[data-experience="lite"] .modal:has(#strategyForm) .modal-title,
html[data-experience="lite"] .modal:has(#setupForm) .modal-title { font-size: 32px; line-height: 1.2; }
html[data-experience="lite"] .modal:has(#strategyForm) .modal-header .eyebrow,
html[data-experience="lite"] .modal:has(#setupForm) .modal-header .eyebrow { font-size: 13px; }
html[data-experience="lite"] .modal:has(#strategyForm) .modal-body,
html[data-experience="lite"] .modal:has(#setupForm) .modal-body { padding: 28px; }
html[data-experience="lite"] #strategyForm .form-grid,
html[data-experience="lite"] #setupForm .form-grid { gap: 18px; }
html[data-experience="lite"] #strategyForm .form-field > span,
html[data-experience="lite"] #setupForm .form-field > span { margin-bottom: 7px; font-size: 15px; font-weight: 750; }
html[data-experience="lite"] #strategyForm input,
html[data-experience="lite"] #strategyForm select,
html[data-experience="lite"] #setupForm input:not([type="file"]),
html[data-experience="lite"] #setupForm select { min-height: 52px; padding-inline: 15px; font-size: 16px; }
html[data-experience="lite"] #strategyForm textarea,
html[data-experience="lite"] #setupForm textarea { min-height: 128px; padding: 15px; font-size: 16px; line-height: 1.55; }
html[data-experience="lite"] .modal:has(#strategyForm) .modal-footer,
html[data-experience="lite"] .modal:has(#setupForm) .modal-footer { min-height: 82px; padding: 16px 28px; }
html[data-experience="lite"] .modal:has(#strategyForm) .modal-footer button,
html[data-experience="lite"] .modal:has(#setupForm) .modal-footer button { min-height: 48px; font-size: 16px; }

/* Comfortable typography across the app.
   Keep the compact hierarchy, but use the readable scale from Playbook editors. */
html[data-experience] {
  --font-supporting: 13px;
  --font-label: 14px;
  --font-body-comfortable: 15px;
}

html[data-experience] :is(
  .eyebrow,
  .section-kicker,
  .brand-copy small,
  .discipline-pill small,
  .nav-count,
  .storage-row,
  .metric-foot,
  .segmented button,
  .symbol-mark,
  .badge,
  .chip,
  .live-badge,
  .calendar-weekdays span,
  .calendar-metric span,
  .day-number,
  .day-detail,
  .mini-stat,
  .bucket-top,
  .setup-stat span,
  .rank-row small,
  .mistake-card .trend,
  .mistake-stat span,
  .breakdown-item span,
  .goal-status,
  .goal-progress-row,
  .goal-meta,
  .account-row small,
  .account-value,
  .data-action small,
  .danger-zone p,
  .custom-range label,
  .calculation-item span,
  .tag-chip,
  .screenshot-placeholder,
  .search-result small,
  .toast small,
  .chart-tooltip,
  .confirm-copy p,
  .input-prefix span,
  .input-suffix span,
  .columns-popover label,
  .bulk-bar span:first-child,
  .pagination,
  .page-button,
  .playbook-summary small,
  .playbook-summary p,
  .library-heading p,
  .library-count,
  .card-kicker,
  .strategy-edge > span,
  .strategy-edge p,
  .strategy-principles strong,
  .strategy-principles li,
  .strategy-footer span,
  .strategy-link,
  .setup-description,
  .setup-rules > strong,
  .setup-rules ol,
  .setup-detail-grid span,
  .setup-stat span,
  .rank-num,
  .lite-coin-field small,
  .lite-percent-field small,
  .lite-rule-checklist-heading small,
  .lite-rule-source span
) { font-size: var(--font-supporting); }

html[data-experience] :is(
  .metric-label,
  .summary-item,
  .risk-form label,
  .filter-grid label,
  .settings-form label,
  .risk-result span,
  .table-meta,
  .analytics-filter-bar p,
  .setup-card p,
  .rank-row strong,
  .discipline-copy > p,
  .goal-card p,
  .settings-heading p,
  .data-action strong,
  .danger-zone strong,
  .check-field,
  .detail-notes,
  .search-result strong,
  .toast strong
) { font-size: var(--font-label); }

html[data-experience] :is(
  .discipline-pill strong,
  .strategy-footer strong,
  .setup-detail-grid strong,
  .setup-stat strong,
  .mistake-stat strong,
  .breakdown-item strong,
  .shortcut-list > div
) { font-size: var(--font-label); }

html[data-experience] .data-table { font-size: var(--font-body-comfortable); }
html[data-experience] .data-table th { font-size: var(--font-supporting); }
html[data-experience] :is(.primary-button, .secondary-button, .text-button, .settings-nav button) { font-size: var(--font-label); }
html[data-experience] :is(.empty-state p, .sidebar-card p, .section-hero p, .settings-heading p) { font-size: var(--font-label); }
html[data-experience] .avatar-button { font-size: var(--font-supporting); }
html[data-experience] .compare-side h4 { font-size: 16px; }
html[data-experience] .modal .muted { font-size: var(--font-label) !important; }
html[data-experience] .form-section-title h3 { font-size: 16px; }
html[data-experience] .form-field label,
html[data-experience] .form-field > span { font-size: var(--font-label); }
html[data-experience] .modal :is(input, select, textarea) { font-size: var(--font-body-comfortable); }
html[data-experience] .rating-input label { font-size: var(--font-label); }
html[data-experience] .calculation-item strong { font-size: var(--font-body-comfortable); }

/* Trade detail: labels and supporting copy should be as legible as editor fields. */
html[data-experience] .trade-summary-label,
html[data-experience] .trade-summary-subline { font-size: var(--font-label); }
html[data-experience] :is(
  .trade-summary-context span,
  .trade-execution-metric span,
  .trade-context-items span,
  .trade-review-items span
) { font-size: var(--font-supporting); }
html[data-experience] .trade-summary-context strong,
html[data-experience] .trade-execution-metric strong,
html[data-experience] .trade-context-items strong,
html[data-experience] .trade-review-items strong { font-size: var(--font-body-comfortable); }
html[data-experience] .trade-detail-heading h3 { font-size: 18px; }
html[data-experience] .trade-detail-heading p { font-size: var(--font-label); }
html[data-experience] .trade-review-score span,
html[data-experience] .trade-review-score small { font-size: var(--font-supporting); }
html[data-experience] .detail-section h3 { font-size: 17px; }
html[data-experience] .detail-item span { font-size: var(--font-supporting); }
html[data-experience] .detail-item strong { font-size: var(--font-body-comfortable); }

/* Lite trade editor: use the same field scale as New Strategy / New Setup. */
html[data-experience="lite"] .lite-trade-form :is(
  .form-field > span,
  .lite-section-label > span,
  .lite-result-input > span:first-child
) { font-size: var(--font-body-comfortable); }
html[data-experience="lite"] .lite-trade-form :is(
  small,
  .lite-section-label small,
  .lite-result-input small,
  .lite-rule-empty
) { font-size: var(--font-supporting); }
html[data-experience="lite"] .lite-trade-form :is(
  input,
  select,
  textarea
) { font-size: 16px; }
html[data-experience="lite"] .lite-trade-form :is(
  .lite-mistake-tag,
  .lite-mistake-option,
  .lite-result-status,
  .lite-direction-toggle label,
  .lite-rule-item
) { font-size: var(--font-label); }