:root {
  color-scheme: dark;
  --bg: #07101d;
  --surface: #0d192a;
  --surface-2: #122136;
  --line: #21344d;
  --text: #f4f8fc;
  --muted: #8ea2ba;
  --cyan: #2fd5c4;
  --amber: #f2b84b;
  --red: #ff6b73;
  --blue: #65a9ff;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 82% -20%, #17365b 0, transparent 36%), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; }
button { font: inherit; }
.topbar { min-height: 92px; padding: 20px clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 46px; height: 46px; border: 1px solid #38607d; border-radius: 12px; display: grid; place-items: center; color: var(--cyan); font-weight: 800; letter-spacing: -.04em; background: linear-gradient(145deg, #152a43, #0a1422); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.02em; }
h2 { margin-top: 5px; font-size: clamp(1.65rem, 4vw, 2.35rem); letter-spacing: -.04em; }
h3 { font-size: 1rem; }
.eyebrow { color: var(--cyan); font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.snapshot { color: #b6c4d4; font-size: .88rem; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #0a1524; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px #f2b84b1d; }
.status-dot.live { background: var(--cyan); box-shadow: 0 0 0 4px #2fd5c41d; }
.tabs { display: flex; gap: 6px; padding: 14px clamp(20px, 4vw, 64px); overflow-x: auto; border-bottom: 1px solid var(--line); background: #081321d9; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.tab { border: 0; color: var(--muted); background: transparent; padding: 10px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-weight: 700; font-size: .9rem; }
.tab:hover { color: var(--text); background: #17263a; }
.tab.active { color: #07101d; background: var(--cyan); }
main { width: min(1440px, 100%); margin: 0 auto; padding: 34px clamp(20px, 4vw, 64px) 64px; }
main:has(> #racers:not([hidden])) { width:min(1800px,100%); padding-inline:clamp(16px,2.5vw,40px); }
.panel { animation: reveal .26s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font-size: .73rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.pill.neutral { background: #1c2d43; color: #b8c7d7; }
.pill.approved { background: #123f3b; color: #65e4d7; }
.pill.waiting, .pill.condition { background: #493817; color: #ffd37a; }
.pill.closed { background: #2d3542; color: #c9d2df; }
.pill.demo { background: #3e2b18; color: #ffd18a; border: 1px solid #704b20; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { min-height: 152px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, #102036, #0a1524); display: flex; flex-direction: column; justify-content: space-between; }
.metric.primary { border-top: 2px solid var(--cyan); }
.metric.negative { border-top: 2px solid var(--red); }
.metric p { color: var(--muted); font-size: .86rem; }
.metric strong { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.05em; }
.metric span { color: #8296ad; font-size: .78rem; }
.overview-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 14px; margin-top: 14px; }
.card, .table-card { border: 1px solid var(--line); border-radius: 14px; background: #0c1828; }
.card { padding: 22px; }
.card-title-row { display: flex; justify-content: space-between; align-items: start; }
.card h3 { margin-top: 5px; font-size: 1.05rem; }
.delta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.negative-text { color: var(--red) !important; }
.nav-chart { height: 218px; margin-top: 10px; }
.nav-chart svg { width: 100%; height: 185px; overflow: visible; }
.nav-chart .grid-line { stroke: #1e3047; stroke-width: 1; }
.nav-chart .area { fill: url(#area); }
.nav-chart .line { fill: none; stroke: var(--cyan); stroke-width: 4; vector-effect: non-scaling-stroke; }
.nav-chart circle { fill: var(--amber); stroke: #0c1828; stroke-width: 4; }
.chart-axis { display: flex; justify-content: space-between; color: #71879f; font-size: .75rem; }
.team-list { margin-top: 18px; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.team-row > div { display: flex; align-items: center; gap: 11px; }
.team-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.team-icon.stock { color: #7cb8ff; background: #173659; }.team-icon.gold { color: #ffd277; background: #493817; }.team-icon.fx { color: #65e4d7; background: #123f3b; }
.warning { margin-top: 14px; padding: 16px 19px; border-left: 3px solid var(--amber); background: #241d11; display: flex; gap: 14px; align-items: baseline; color: #ead5a8; }
.warning span { color: #bea87e; font-size: .88rem; }
.table-card { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th { padding: 13px 16px; color: #8ea7c0; background: #111f31; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
td { padding: 15px 16px; border-top: 1px solid #1b2c42; color: #c8d4e1; font-size: .88rem; line-height: 1.45; }
tbody tr:hover { background: #102139; }
.num { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #f1f5f9; }
.proposal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.proposal { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #0c1828; }
.proposal.open { border-left: 3px solid var(--cyan); }.proposal.closed-card { border-left: 3px solid #66768b; }
.proposal-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.proposal small { color: #7f94aa; font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.proposal h3 { margin-top: 6px; font-size: 1.25rem; }.proposal h3 span { color: #8ea2ba; font-size: .8rem; margin-left: 5px; }
.proposal dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
.proposal dl div { padding: 10px; background: #111f31; border-radius: 8px; }
.proposal dt { color: #7f94aa; font-size: .68rem; }.proposal dd { margin: 4px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.proposal > p { color: #93a7bd; font-size: .82rem; }
.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rule-card { min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(155deg, #102036, #0b1726); }
.rule-card > span { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }
.rule-card h3 { margin-top: 28px; color: #aebfd1; }.rule-card strong { display: block; margin-top: 9px; font-size: 1.9rem; }.rule-card p { margin-top: 11px; color: #8297ae; line-height: 1.55; font-size: .86rem; }
.rule-card.wide { grid-column: span 2; min-height: 150px; }.rule-card.danger { border-color: #5b2933; background: #20131a; }.rule-card.danger > span { color: var(--red); }
footer { padding: 20px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: #71869d; display: flex; justify-content: space-between; gap: 16px; font-size: .75rem; }

.technical-heading { margin-bottom: 18px; }
.technical-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.chart-controls, .chart-workspace, .order-flow-panel { border: 1px solid var(--line); border-radius: 14px; background: #0c1828; }
.chart-controls { padding: 18px; }
.control-group { display: grid; gap: 10px; }
.control-group label, .control-label { color: #98abc0; font-size: .76rem; font-weight: 800; letter-spacing: .05em; }
.control-group select { width: 100%; min-height: 42px; border: 1px solid #2a405b; border-radius: 8px; padding: 0 10px; color: var(--text); background: #101f32; }
.control-divider { height: 1px; margin: 17px 0; background: var(--line); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 3px; background: #081321; border-radius: 8px; }
.range-button, .tool-button, .secondary-button, .primary-button, .icon-button { border: 1px solid transparent; color: #b8c7d7; background: transparent; cursor: pointer; border-radius: 7px; }
.range-button { min-height: 34px; font-size: .76rem; font-weight: 800; }
.range-button.active { color: #07101d; background: var(--cyan); }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool-button { min-height: 54px; padding: 7px; border-color: #243a53; background: #101f32; font-size: .7rem; display: grid; place-items: center; gap: 2px; }
.tool-button span { font-size: 1.2rem; color: #87a1bc; line-height: 1; }
.tool-button:hover, .tool-button.active { color: var(--text); border-color: var(--cyan); background: #123236; }
.tool-button.active span { color: var(--cyan); }
.secondary-button, .primary-button { width: 100%; min-height: 40px; padding: 8px 10px; font-size: .75rem; font-weight: 800; }
.secondary-button { border-color: #2b4059; background: #101f32; }
.primary-button { margin-top: 4px; color: #07101d; background: var(--cyan); }
.secondary-button:hover { border-color: #53718f; color: var(--text); }
.switch-row { display: flex !important; align-items: center; justify-content: space-between; min-height: 29px; font-weight: 650 !important; letter-spacing: 0 !important; }
.switch-row span { display: inline-flex; align-items: center; gap: 8px; }
.switch-row input { accent-color: var(--cyan); width: 17px; height: 17px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.ema20 { background: #9c7cff; }.legend-dot.ema50 { background: #4ed9e6; }.legend-dot.ema200 { background: #f2c14e; }.legend-dot.sr { background: #ff78a9; }
.chart-workspace { min-width: 0; overflow: hidden; }
.chart-toolbar { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.chart-toolbar > div:first-child { display: grid; gap: 4px; }
.chart-toolbar strong { font-size: .92rem; }
.chart-toolbar span { color: #7f95ac; font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.chart-actions { display: flex; gap: 6px; }
.icon-button { min-height: 34px; padding: 0 10px; border-color: #263c55; background: #101f32; font-size: .76rem; }
.icon-button:hover { color: var(--text); border-color: #53718f; }
.canvas-shell { position: relative; height: clamp(430px, 58vh, 650px); min-height: 430px; background: #091421; touch-action: none; user-select: none; }
#technicalCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.crosshair-label { position: absolute; z-index: 3; pointer-events: none; padding: 5px 7px; color: #e9f0f7; background: #07101de8; border: 1px solid #34506d; border-radius: 5px; font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.chart-status { min-height: 42px; padding: 11px 16px; border-top: 1px solid var(--line); color: #8ea2ba; font-size: .75rem; }
.analysis-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.analysis-strip div { padding: 12px 14px; border-right: 1px solid var(--line); display: grid; gap: 4px; }
.analysis-strip div:last-child { border-right: 0; }
.analysis-strip span { color: #7f94aa; font-size: .68rem; }
.analysis-strip strong { font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.technical-warning { margin-top: 14px; }
.order-flow-panel { min-width: 0; overflow: hidden; }
.flow-head { min-height: 64px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.flow-head h3 { margin-top: 5px; font-size: .8rem; }
.feed-status { display: inline-flex; align-items: center; gap: 6px; color: #8fa3b9; font-size: .65rem; white-space: nowrap; }
.feed-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.feed-status.connected i { background: var(--cyan); box-shadow: 0 0 0 3px #2fd5c421; }
.flow-metrics { display: grid; grid-template-columns: 1fr 1fr; }
.flow-metrics div { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 3px; }
.flow-metrics div:nth-child(even) { border-right: 0; }
.flow-metrics span { color: #71879f; font-size: .64rem; }
.flow-metrics strong { font: .74rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.flow-section { border-bottom: 1px solid var(--line); }
.flow-title { padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; background: #101f31; }
.flow-title strong { font-size: .72rem; }.flow-title span { color: #70869e; font-size: .61rem; }
.dom-book, .big-trades { max-height: 246px; overflow-y: auto; scrollbar-width: thin; }
.dom-row { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 23px; align-items: center; padding: 0 10px; font: .65rem ui-monospace, SFMono-Regular, Menlo, monospace; position: relative; }
.dom-row > * { position: relative; z-index: 1; }.dom-row span { color: #d5dee8; }.dom-row strong { text-align: right; }.dom-row.bid strong { color: #5edeb7; }.dom-row.ask strong { color: #ff8490; }
.dom-row > i { position: absolute; inset-block: 2px; right: 0; z-index: 0; opacity: .14; background: var(--cyan); }.dom-row.ask > i { background: var(--red); }
.dom-row::before { content: ''; position: absolute; inset-block: 2px; width: var(--depth, 0%); opacity: .13; }
.dom-row.bid-depth::before { right: 50%; background: var(--cyan); }.dom-row.ask-depth::before { left: 50%; background: var(--red); }
.trade-row { display: grid; grid-template-columns: 52px 1fr .8fr; gap: 6px; padding: 7px 10px; border-top: 1px solid #172a40; font: .65rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.trade-row.buy { border-left: 2px solid var(--cyan); }.trade-row.sell { border-left: 2px solid var(--red); }
.trade-row span { color: #748aa2; }.trade-row strong { text-align: right; }.trade-row b { text-align: right; color: #d5dee8; }.trade-row.buy b, .flow-buy { color: var(--cyan) !important; }.trade-row.sell b, .flow-sell { color: var(--red) !important; }
.empty-flow { padding: 18px; color: #70869e; font-size: .7rem; text-align: center; }
.flow-caveat { padding: 11px 12px; color: #71869d; font-size: .64rem; line-height: 1.45; }
.technical-team-card { margin-top: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #0c1828; }
.team-method-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.team-method-head h3 { margin-top: 6px; font-size: 1.05rem; }
.method-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 18px; }
.method-grid article { min-height: 150px; padding: 14px; border: 1px solid #20344b; border-radius: 10px; background: #101f32; }
.method-grid article > span { color: var(--cyan); font: 800 1.25rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.method-grid strong { display: block; margin-top: 10px; font-size: .8rem; }
.method-grid p { margin-top: 8px; color: #879bb1; font-size: .72rem; line-height: 1.55; }
.team-output-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; padding: 13px; border-radius: 9px; background: #091522; color: #b9c8d8; font-size: .72rem; font-weight: 700; }
.team-output-flow b { color: var(--cyan); }
.method-note { margin-top: 13px; color: #8ea2ba; font-size: .78rem; line-height: 1.55; }

.live-alert { margin-bottom: 14px; padding: 15px 18px; border: 1px solid #735421; border-left: 4px solid var(--amber); border-radius: 10px; background: #241d11; display: flex; gap: 12px; align-items: baseline; }
.live-alert strong { white-space: nowrap; }.live-alert span { color: #c2ad83; font-size: .82rem; line-height: 1.5; }
.live-alert.danger { margin: 14px 0 0; border-color: #632d38; border-left-color: var(--red); background: #23141b; }.live-alert.danger span { color: #c9a0a8; }
.live-alert.ready { border-color: #1f665c; border-left-color: var(--cyan); background: #102621; }.live-alert.ready span { color: #9ecbc5; }
.live-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.live-metrics article { min-height: 118px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #0c1828; display: grid; align-content: space-between; }
.live-metrics span, .live-metrics small { color: #8398af; font-size: .73rem; }.live-metrics strong { font: 800 1.25rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.live-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; margin-top: 14px; }
.live-login-form { display: grid; gap: 10px; margin-top: 20px; }.live-login-form[hidden] { display: none; }.live-login-form label { color: #98abc0; font-size: .75rem; font-weight: 750; }
.live-login-form input { min-height: 44px; padding: 0 12px; border: 1px solid #2a405b; border-radius: 8px; color: var(--text); background: #081321; }
.live-account { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.live-account[hidden] { display: none; }
.live-account div { padding: 11px; border-radius: 8px; background: #101f32; display: grid; gap: 5px; }.live-account span { color: #7f94aa; font-size: .67rem; }.live-account strong { font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }.live-account button { grid-column: 1 / -1; }
.live-message { margin-top: 12px; min-height: 20px; color: #849ab1; font-size: .75rem; line-height: 1.45; }
.danger-button { min-height: 34px; padding: 6px 10px; border: 1px solid #753742; border-radius: 7px; color: #ff9ba4; background: #28151c; font-size: .7rem; font-weight: 800; cursor: pointer; }.danger-button:disabled { opacity: .55; cursor: not-allowed; }.danger-button.off { color: #75e2d5; border-color: #24685f; background: #102b26; }
.gate-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }.gate-list li { min-height: 38px; padding: 8px 10px; border: 1px solid #1f3249; border-radius: 8px; display: flex; align-items: center; gap: 10px; color: #9cafc2; font-size: .75rem; }.gate-list i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #53667a; }.gate-list i.pass { background: var(--cyan); box-shadow: 0 0 0 3px #2fd5c41c; }.gate-list i.block { background: var(--red); box-shadow: 0 0 0 3px #ff6b7318; }
.live-queue-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0c1828; overflow: hidden; }.queue-heading { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.queue-heading h3 { margin-top: 5px; }.secondary-button.compact { width: auto; min-width: 88px; }
.live-queue { padding: 14px; display: grid; gap: 10px; }.live-order { padding: 16px; border: 1px solid #243a52; border-radius: 10px; background: #101f32; display: grid; grid-template-columns: 1.2fr repeat(4, .8fr) auto; align-items: center; gap: 12px; }.live-order span { color: #7f94aa; font-size: .66rem; }.live-order strong { display: block; margin-top: 4px; font: .77rem ui-monospace, SFMono-Regular, Menlo, monospace; }.live-order button { width: auto; margin: 0; }.live-order-focus { outline: 2px solid var(--cyan); outline-offset: 3px; }
.live-confirm-dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 1px solid #36516d; border-radius: 14px; color: var(--text); background: #0c1828; box-shadow: 0 24px 80px #000b; }.live-confirm-dialog::backdrop { background: #02060dbf; backdrop-filter: blur(4px); }.live-confirm-dialog form { padding: 22px; }.live-confirm-dialog h3 { font-size: 1.15rem; }.live-confirm-details { margin: 16px 0; padding: 12px; border-radius: 8px; background: #101f32; line-height: 1.7; font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }.confirm-check { display: flex; gap: 9px; align-items: flex-start; color: #a8b9ca; font-size: .78rem; line-height: 1.45; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.dialog-actions button { width: auto; min-width: 112px; }

.order-draft-section { margin: 16px 0; padding: 18px; border: 1px solid #31516b; border-radius: 14px; background: linear-gradient(155deg, #102238, #0b1726 62%); }
.order-draft-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }.order-draft-heading h3 { margin-top: 5px; font-size: 1.1rem; }
.order-draft-safety { display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; border: 1px solid #725522; border-left: 4px solid var(--amber); border-radius: 8px; background: #241d11; color: #ead5a8; font-size: .8rem; line-height: 1.5; }.order-draft-safety strong { white-space: nowrap; }.order-draft-safety span { color: #c7b184; }
.order-draft-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 12px; margin-top: 12px; }.order-draft-form, .order-draft-preview { min-width: 0; padding: 18px; }
.draft-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.draft-field { min-width: 0; display: grid; align-content: start; gap: 6px; }.draft-field label, .draft-field-label { color: #98abc0; font-size: .72rem; font-weight: 800; }.draft-field input, .draft-field select { width: 100%; min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid #2a405b; border-radius: 8px; color: var(--text); background: #081321; font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }.draft-field input:focus, .draft-field select:focus { outline: 2px solid #2fd5c477; border-color: var(--cyan); }.draft-field small { color: #7f94aa; font-size: .66rem; line-height: 1.4; }
.draft-static { min-height: 42px; display: flex; align-items: center; padding: 8px 10px; border: 1px solid #21344d; border-radius: 8px; color: #c3d0df; background: #101f32; font-size: .77rem; }.draft-input-action { display: flex; gap: 6px; }.draft-input-action input { flex: 1; }.draft-input-action button { flex: 0 0 auto; width: auto; padding-inline: 9px; font-size: .68rem; white-space: nowrap; }
.draft-save-button { margin-top: 14px; }.draft-save-button:disabled { opacity: .45; cursor: not-allowed; }.draft-footnote { margin-top: 9px; color: #8398af; font-size: .67rem; line-height: 1.5; }.order-draft-preview h3 { margin-top: 5px; }.draft-quote-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; padding: 10px 11px; border-radius: 8px; background: #091522; }.draft-quote-row span { color: #8297ae; font-size: .68rem; }.draft-quote-row strong { color: #d6e5f3; font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.draft-preview-values { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0; }.draft-preview-values div { min-width: 0; padding: 10px; border-radius: 8px; background: #101f32; }.draft-preview-values dt { color: #8297ae; font-size: .64rem; line-height: 1.35; }.draft-preview-values dd { margin: 5px 0 0; color: #e5edf5; font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }.draft-math-status { min-height: 44px; padding: 10px 11px; border: 1px solid #273b54; border-radius: 8px; color: #b6c4d4; background: #0a1625; font-size: .72rem; line-height: 1.5; }.draft-math-status.warn { border-color: #725522; color: #ead5a8; background: #241d11; }.draft-math-status.block { border-color: #753742; color: #ffb1b7; background: #28151c; }
.saved-drafts-section { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0a1625; overflow: hidden; }.saved-drafts-section .queue-heading { min-height: 58px; padding: 12px 14px; }.saved-drafts-section .queue-heading h3 { font-size: .9rem; }.saved-drafts { padding: 10px; display: grid; gap: 8px; }.saved-draft-card { display: grid; grid-template-columns: minmax(115px, 1fr) repeat(4, minmax(95px, .7fr)) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid #21344d; border-radius: 8px; background: #101f32; }.saved-draft-card span { display: block; color: #8297ae; font-size: .63rem; }.saved-draft-card strong { display: block; margin-top: 4px; color: #e3edf7; font: 700 .73rem ui-monospace, SFMono-Regular, Menlo, monospace; }.saved-draft-card button { width: auto; margin: 0; padding: 7px 10px; border: 1px solid #57404a; color: #e8b7bd; background: #24171e; font-size: .67rem; }
.draft-demo-notice { margin-top: 10px; padding: 12px 14px; border: 1px solid #753742; border-left: 4px solid var(--red); border-radius: 8px; color: #ffc2c6; background: #28151c; font-size: .76rem; line-height: 1.55; }.draft-demo-notice[hidden] { display: none; }
.order-draft-summary { margin-top: 12px; padding: 18px; border: 1px solid #735421; border-radius: 12px; background: linear-gradient(150deg, #1d1d1a, #0d192a 72%); }.order-draft-summary[hidden], .order-draft-grid[hidden], .order-draft-actions [hidden] { display: none !important; }.draft-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }.draft-summary-grid div { min-width: 0; padding: 11px; border: 1px solid #28384b; border-radius: 8px; background: #0a1625; }.draft-summary-grid dt { color: #8297ae; font-size: .66rem; line-height: 1.4; }.draft-summary-grid dd { margin: 6px 0 0; color: #eef4fb; font: 750 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }.summary-safety { margin-top: 0; }.draft-edit-button { margin-top: 12px; }.order-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }.order-draft-actions .draft-save-button { width: auto; min-width: 180px; }

.signal-actions { display: flex; align-items: center; gap: 9px; }
.signal-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.signal-decision { padding: 24px; border: 1px solid #2a465d; border-top: 3px solid var(--cyan); border-radius: 14px; background: linear-gradient(145deg, #10263a, #0b1726); display: grid; grid-template-columns: .8fr 1.4fr; gap: 24px; align-items: end; }
.signal-decision > div > strong { display: block; margin-top: 8px; font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: -.07em; line-height: .9; }
.signal-decision > div > span { display: block; margin-top: 14px; color: #9aadc1; line-height: 1.5; font-size: .82rem; }
.signal-buy { color: var(--cyan); }.signal-exit { color: var(--red); }
.signal-decision dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.signal-decision dl div { padding: 12px; border-radius: 9px; background: #091522; }
.signal-decision dt, .signal-plan span { color: #7f94aa; font-size: .68rem; }
.signal-decision dd { margin: 5px 0 0; font: 700 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.signal-method p { margin-top: 12px; color: #91a5bb; font-size: .83rem; line-height: 1.5; }
.signal-method-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.signal-method-tags span { padding: 6px 8px; border-radius: 6px; color: #b9d2dc; background: #132d3a; font: 700 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.signal-method small { display: block; margin-top: 14px; color: #c6a96e; line-height: 1.45; }
.signal-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
.signal-checklist { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.signal-checklist li { padding: 11px; border: 1px solid #1f3249; border-radius: 9px; display: flex; gap: 11px; align-items: flex-start; background: #0d1b2c; }
.signal-checklist i { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: #53667a; }.signal-checklist i.pass { background: var(--cyan); }.signal-checklist i.block { background: var(--red); }
.signal-checklist div { display: grid; gap: 4px; }.signal-checklist strong { font-size: .78rem; }.signal-checklist span { color: #8297ae; font-size: .7rem; }
.signal-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.signal-plan div { min-height: 82px; padding: 13px; border-radius: 9px; background: #101f32; display: grid; align-content: space-between; }
.signal-plan strong { font: 800 1.1rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.signal-note { margin-top: 14px; color: #869bb1; font-size: .73rem; line-height: 1.5; }
.signal-history-section { margin-top: 14px; }.signal-history { min-width: 760px; }
.signal-provenance { margin-top: 14px; padding: 15px 18px; border-left: 3px solid #60758c; background: #101a29; display: flex; gap: 13px; align-items: baseline; color: #c2ceda; }
.signal-provenance span { color: #8297ae; font-size: .76rem; line-height: 1.5; }
.agent-heading { align-items: center; }
.agent-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.agent-summary article { min-height: 118px; padding: 18px; display: grid; align-content: space-between; gap: 8px; background: #0c1828; }
.agent-summary span, .agent-summary small { color: #8297ae; font-size: .72rem; }
.agent-summary strong { font: 800 clamp(1.7rem, 4vw, 2.4rem) ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-flow-section, .agent-events-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0c1828; overflow: hidden; }
.agent-updated { color: #8196ad; font-size: .72rem; }
.agent-flow { display: flex; gap: 0; padding: 18px; overflow-x: auto; }
.agent-flow-step { position: relative; flex: 1 0 145px; min-height: 88px; padding: 12px 13px; border: 1px solid #263b52; background: #0d1b2c; display: grid; align-content: space-between; gap: 9px; }
.agent-flow-step:first-child { border-radius: 10px 0 0 10px; }
.agent-flow-step:last-child { border-radius: 0 10px 10px 0; }
.agent-flow-step + .agent-flow-step { border-left: 0; }
.agent-flow-step + .agent-flow-step::before { content: "›"; position: absolute; left: -7px; top: 31px; z-index: 2; color: #6f879f; font-size: 1.25rem; }
.agent-flow-step span { color: #8ca0b6; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.agent-flow-step strong { font-size: .78rem; line-height: 1.35; }
.agent-flow-step i { width: 9px; height: 9px; border-radius: 50%; background: #61768c; box-shadow: 0 0 0 4px #61768c1c; }
.agent-flow-step[data-state="ACTIVE"] i, .agent-flow-step[data-state="WATCHING"] i, .agent-flow-step[data-state="REVIEW"] i, .agent-flow-step[data-state="STANDBY"] i { background: var(--cyan); box-shadow: 0 0 0 4px #2fd5c41c; }
.agent-flow-step[data-state="BLOCKING"] i, .agent-flow-step[data-state="LOCKED"] i, .agent-flow-step[data-state="DEGRADED"] i { background: var(--red); box-shadow: 0 0 0 4px #ff6b731c; }
.agent-flow-step[data-state="ACTION_REQUIRED"] i, .agent-flow-step[data-state="AWAITING_USER"] i { background: var(--amber); box-shadow: 0 0 0 4px #f2b84b1c; }
.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.agent-card { min-height: 218px; padding: 18px; border: 1px solid #21364d; border-radius: 14px; background: linear-gradient(145deg, #0f1e30, #0a1625); display: grid; align-content: start; gap: 14px; }
.agent-card.loading { grid-column: 1 / -1; min-height: 120px; place-items: center; color: var(--muted); }
.agent-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.agent-identity { display: flex; gap: 12px; align-items: center; min-width: 0; }
.agent-avatar { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid #31516c; border-radius: 11px; display: grid; place-items: center; color: var(--cyan); background: #10263a; font: 800 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-identity h3 { font-size: .93rem; }
.agent-identity span { display: block; margin-top: 4px; color: #7f94aa; font-size: .68rem; }
.agent-status { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; color: #bac9d7; background: #223449; font: 800 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-status.active, .agent-status.watching, .agent-status.candidate, .agent-status.review, .agent-status.standby { color: #a8f1e8; background: #153e3b; }
.agent-status.blocking, .agent-status.locked, .agent-status.degraded { color: #ffc0c4; background: #4a252d; }
.agent-status.awaiting_user { color: #ffe0a1; background: #49391d; }
.agent-output { min-height: 48px; color: #cfdae5; font-size: .78rem; line-height: 1.55; }
.agent-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agent-facts div { min-width: 0; padding: 10px; border-radius: 8px; background: #091522; }
.agent-facts span { display: block; color: #70869d; font-size: .62rem; }
.agent-facts strong { display: block; margin-top: 5px; overflow: hidden; color: #b9c9d8; font: 700 .69rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.agent-blocker { padding: 9px 10px; border-left: 3px solid var(--red); color: #d9a9ad; background: #231a23; font-size: .7rem; line-height: 1.45; }
.agent-events-table { min-width: 700px; }
.agent-boundary { margin-top: 14px; }
.backtest-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0c1828; overflow: hidden; }
.backtest-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }
.backtest-metrics article { min-height: 112px; padding: 16px; background: #0c1828; display: grid; align-content: space-between; gap: 8px; }
.backtest-metrics span, .backtest-metrics small { color: #8398af; font-size: .68rem; }.backtest-metrics strong { font: 800 1.2rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.backtest-readiness { padding: 15px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; }.backtest-readiness strong { color: var(--amber); font-size: .82rem; }.backtest-readiness span { color: #8297ae; font-size: .72rem; }
.backtest-oos { padding: 11px 18px; border-top: 1px solid var(--line); color: #9eb1c4; background: #0a1625; font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; }
.backtest-caveat { padding: 12px 18px; border-top: 1px solid var(--line); color: #71869d; font-size: .68rem; line-height: 1.55; }

@media (max-width: 1200px) { .technical-layout { grid-template-columns: 230px minmax(0, 1fr); }.order-flow-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr 1fr; }.order-flow-panel .flow-head { grid-column: 1; }.order-flow-panel .flow-metrics { grid-column: 1; }.order-flow-panel .flow-section { border-left: 1px solid var(--line); }.order-flow-panel .flow-caveat { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .method-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); }.overview-grid, .live-grid, .order-draft-grid, .signal-hero, .signal-grid, .agent-grid { grid-template-columns: 1fr; }.agent-summary { grid-template-columns: repeat(2, 1fr); }.backtest-metrics { grid-template-columns: repeat(3, 1fr); }.rules-grid { grid-template-columns: repeat(2, 1fr); }.technical-layout { grid-template-columns: 1fr; }.chart-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.control-divider { display: none; }.order-flow-panel { grid-column: auto; display: block; }.live-order { grid-template-columns: repeat(3, 1fr); }.live-order > div:first-child { grid-column: span 2; } }
@media (max-width: 640px) { .topbar { align-items: flex-start; flex-direction: column; }.snapshot { white-space: normal; }.metrics, .proposal-grid, .rules-grid, .live-metrics, .agent-summary { grid-template-columns: 1fr; }.agent-summary article { min-height: 96px; }.agent-flow { padding: 12px; }.agent-flow-step { flex-basis: 132px; }.agent-facts { grid-template-columns: 1fr; }.backtest-metrics { grid-template-columns: 1fr 1fr; }.backtest-readiness { flex-direction: column; }.rule-card.wide { grid-column: span 1; }.proposal dl { grid-template-columns: repeat(2, 1fr); }.warning, footer, .live-alert, .signal-provenance, .order-draft-safety { flex-direction: column; }.section-heading { align-items: flex-start; }.signal-heading, .agent-heading { gap: 12px; }.signal-actions { width: 100%; justify-content: space-between; }.signal-decision { grid-template-columns: 1fr; padding: 18px; }.signal-plan, .signal-decision dl { grid-template-columns: 1fr 1fr; }.technical-layout { margin-inline: -12px; }.chart-controls { grid-template-columns: 1fr 1fr; padding: 12px; }.chart-controls .control-group:last-child { grid-column: 1 / -1; }.canvas-shell { height: 470px; min-height: 470px; }.analysis-strip { grid-template-columns: 1fr 1fr; }.analysis-strip div:nth-child(2) { border-right: 0; }.analysis-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.technical-warning, .technical-team-card { margin-inline: -12px; }.technical-heading, .team-method-head { align-items: flex-start; }.method-grid { grid-template-columns: 1fr 1fr; }.method-grid article { min-height: 136px; }.method-grid article:last-child { grid-column: 1 / -1; }.live-order { grid-template-columns: 1fr 1fr; }.live-order > div:first-child { grid-column: 1 / -1; }.live-account { grid-template-columns: 1fr; }.live-account button { grid-column: 1; }.order-draft-section { padding: 12px; margin-inline: -8px; }.order-draft-heading { align-items: flex-start; }.draft-form-grid { grid-template-columns: 1fr; }.draft-input-action { flex-direction: column; }.draft-input-action button { width: 100%; }.draft-preview-values, .draft-summary-grid { grid-template-columns: 1fr 1fr; }.saved-draft-card { grid-template-columns: 1fr 1fr; }.saved-draft-card button { grid-column: 1 / -1; }.order-draft-actions { flex-direction: column; }.order-draft-actions .draft-save-button { width: 100%; }.draft-edit-button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

/* The Testnet Lab is a separate visual and execution boundary from Binance TH Live. */
.testnet-tab { color: #f3c969; border: 1px solid #71551f; }
.testnet-tab.active { color: #201707; background: #efbe58; }
.testnet-heading { align-items: center; }
.testnet-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill.testnet-pill { color: #f5d88e; border: 1px solid #806222; background: #332711; }
.pill.blocked-pill { color: #ffc0c4; border: 1px solid #753742; background: #28151c; }
.testnet-safety { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; padding: 15px 18px; border: 1px solid #806222; border-left: 4px solid #efbe58; border-radius: 10px; color: #f2d896; background: #2b2313; line-height: 1.5; }
.testnet-safety strong { font-size: .9rem; }
.testnet-safety span { color: #ccb984; font-size: .77rem; }
.testnet-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 14px; overflow: hidden; border: 1px solid #55451f; border-radius: 12px; background: #55451f; }
.testnet-status-grid article { min-width: 0; min-height: 100px; padding: 14px; display: grid; align-content: space-between; gap: 7px; background: #171b22; }
.testnet-status-grid span, .testnet-status-grid small { color: #a59672; font-size: .68rem; }
.testnet-status-grid strong { color: #f0e7d1; font: 800 .84rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-status-grid .testnet-positive { color: #8adcca; }
.testnet-status-grid .testnet-negative { color: #ff9ba4; }
.testnet-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 14px; }
.testnet-access-card, .testnet-order-card { min-width: 0; border-color: #3f3828; background: linear-gradient(145deg, #111c2a, #0c1828); }
.testnet-login-form { display: grid; gap: 10px; margin-top: 20px; }
.testnet-login-form[hidden], .testnet-account[hidden], #testnetBuyAmountField[hidden], #testnetSellAmountField[hidden] { display: none !important; }
.testnet-login-help { margin: 0; color: #91a5ba; font-size: .72rem; line-height: 1.5; }
.testnet-login-form label { color: #b8a979; font-size: .75rem; font-weight: 750; }
.testnet-login-form input { min-height: 44px; padding: 0 12px; border: 1px solid #67562d; border-radius: 8px; color: var(--text); background: #081321; }
.testnet-password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.testnet-password-field input { width: 100%; min-width: 0; }
.testnet-password-field button { min-height: 44px; }
.testnet-account { display: grid; gap: 10px; margin-top: 16px; }
.testnet-balance-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #d8c794; font-size: .78rem; }
.testnet-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.testnet-balances > div { min-width: 0; padding: 10px; display: grid; gap: 4px; border: 1px solid #343a43; border-radius: 8px; background: #111b28; }
.testnet-balances span { color: #9c8d67; font-size: .67rem; }
.testnet-balances strong { color: #e7dcc0; font: 750 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-balances small { color: #8793a0; font-size: .64rem; }
.testnet-order-form { margin-top: 18px; }
.testnet-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.testnet-form-grid .draft-field select { width: 100%; min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid #67562d; border-radius: 8px; color: var(--text); background: #081321; }
.testnet-form-grid .draft-field input:focus, .testnet-form-grid .draft-field select:focus, .testnet-login-form input:focus { outline: 2px solid #efbe5880; border-color: #efbe58; }
.testnet-prepare-button { margin-top: 14px; color: #201707; background: #efbe58; }
.testnet-prepare-button:disabled { opacity: .45; cursor: not-allowed; }
.testnet-orders-section { margin-top: 14px; overflow: hidden; border: 1px solid #4d4024; border-radius: 12px; background: #0b1726; }
.testnet-orders { display: grid; gap: 9px; padding: 13px; }
.testnet-order-row { min-width: 0; padding: 14px; border: 1px solid #4b4029; border-radius: 9px; background: #121c29; }
.testnet-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.testnet-order-head > strong { color: #f1d185; font: 800 .88rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.testnet-order-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; }
.testnet-order-values > div { min-width: 0; padding: 8px; border-radius: 7px; background: #0a1522; }
.testnet-order-values dt { color: #97885e; font-size: .62rem; }
.testnet-order-values dd { margin: 4px 0 0; color: #dce2e8; font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-resume-confirm { width: auto; margin-top: 10px; border-color: #71551f; color: #f3d48b; }
.testnet-unresolved { margin-top: 10px; padding: 9px 10px; border: 1px solid #753742; border-radius: 7px; color: #ffc0c4; background: #28151c; font-size: .72rem; line-height: 1.45; }
.testnet-boundary { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; padding: 12px 14px; border: 1px solid #382f1c; border-radius: 9px; color: #cbbd96; background: #16180f; font-size: .72rem; line-height: 1.5; }
.testnet-boundary strong { white-space: nowrap; color: #f2d896; }
.testnet-boundary code { color: #f5d88e; }
.testnet-confirm-dialog { width: min(540px, calc(100% - 28px)); padding: 0; border: 1px solid #806222; border-radius: 14px; color: var(--text); background: #101923; box-shadow: 0 24px 80px #000b; }
.testnet-confirm-dialog::backdrop { background: #02060dc9; backdrop-filter: blur(4px); }
.testnet-confirm-dialog form { padding: 22px; }
.testnet-dialog-label { color: #efbe58; font: 800 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.testnet-confirm-dialog h3 { margin-top: 7px; font-size: 1.15rem; }
.testnet-dialog-warning { margin-top: 10px; color: #e6c97c; font-size: .76rem; line-height: 1.5; }
.testnet-confirm-details { margin: 14px 0; padding: 12px; border: 1px solid #42391f; border-radius: 8px; color: #e7dcc0; background: #0a1522; white-space: pre-line; line-height: 1.75; font: .76rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-pin-label { display: block; margin: 14px 0 6px; color: #e7dcc0; font-size: .76rem; font-weight: 700; }
.testnet-pin-input { width: 100%; padding: 11px 12px; border: 1px solid #596577; border-radius: 8px; color: #f5d88e; background: #0a1522; font: 700 1.25rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .45em; }
.testnet-pin-input:focus { outline: 2px solid #efbe58; outline-offset: 2px; }
.testnet-confirm-check { display: flex; gap: 9px; align-items: flex-start; color: #b9c1ca; font-size: .76rem; line-height: 1.45; }
.testnet-confirm-check input { accent-color: #efbe58; }
.testnet-confirm-dialog .primary-button { color: #201707; background: #efbe58; }
.testnet-confirm-dialog .primary-button:disabled { opacity: .45; cursor: not-allowed; }
.testnet-audit-card { margin: 14px 0; padding: 16px; border: 1px solid #374356; border-left: 4px solid #8ca8da; border-radius: 12px; background: linear-gradient(145deg, #121c2a, #0d1622); }
.testnet-audit-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testnet-audit-heading h3 { margin: 2px 0 4px; color: #e3ebf6; font-size: .98rem; }
.testnet-audit-heading small, .testnet-audit-time { color: #99a8ba; font-size: .68rem; }
.testnet-audit-time { margin: 9px 0; }
.testnet-audit-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.testnet-audit-check { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid #373f4b; border-radius: 7px; background: #0b1420; }
.testnet-audit-check strong { flex: 0 0 68px; color: #e3b5ba; font-size: .65rem; }
.testnet-audit-check span { color: #aeb9c7; font-size: .68rem; line-height: 1.4; }
.testnet-audit-check.pass { border-color: #31564f; }
.testnet-audit-check.pass strong { color: #8adcca; }
.testnet-audit-check.block { border-color: #684049; }
.testnet-audit-events { margin-top: 10px; color: #bbc6d4; font-size: .72rem; }
.testnet-audit-events summary { cursor: pointer; }
.testnet-audit-event { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 3px; border-bottom: 1px solid #273240; }
.testnet-audit-event strong { color: #c7d2e1; font: 700 .65rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-audit-event span { color: #f1d185; font-size: .65rem; }
.testnet-audit-event small { color: #8290a0; font-size: .62rem; }
.live-message.error { color: #ff9ba4; }
@media (max-width: 900px) { .testnet-grid { grid-template-columns: 1fr; } .testnet-order-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .testnet-heading { align-items: flex-start; flex-direction: column; } .testnet-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .testnet-form-grid { grid-template-columns: 1fr; } .testnet-safety, .testnet-boundary { align-items: flex-start; } .testnet-boundary { flex-direction: column; } .testnet-balances { grid-template-columns: 1fr 1fr; } .testnet-order-values { grid-template-columns: 1fr 1fr; } .testnet-audit-heading { align-items: flex-start; flex-direction: column; } .testnet-audit-checks { grid-template-columns: 1fr; } .testnet-audit-event { grid-template-columns: 1fr auto; } .testnet-audit-event small { grid-column: 1 / -1; } .testnet-confirm-dialog form { padding: 16px; } }

/* Binance TH Live proposal ticket: keep the real-money boundary visible while matching the Spot Testnet layout. */
.live-trade-heading { align-items: center; gap: 14px; }
.live-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.pill.live-real-pill { color: #f5d88e; border: 1px solid #806222; background: #332711; }
.live-heading-actions .danger-button { min-height: 42px; padding-inline: 12px; }
.live-trade-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.live-trade-context { min-width: 0; display: grid; gap: 12px; }
.live-market-card, .live-access-card { min-width: 0; padding: 18px; }
.live-market-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.live-market-title h3 { margin-top: 5px; color: #eef4fb; font: 800 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.live-market-pair { color: #8ea2ba; font: 700 .78rem sans-serif; }
.live-reference-price { display: grid; gap: 5px; margin-top: 22px; }
.live-reference-price > span { color: #8ea2ba; font-size: .72rem; }
.live-reference-price strong { color: #edf4fb; font: 800 clamp(1.65rem, 3vw, 2.15rem) ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.live-quote-meta { min-height: 34px; margin-top: 5px; color: #7f94aa; font-size: .68rem; line-height: 1.5; }
.live-limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0 0; }
.live-limit-grid > div { min-width: 0; padding: 10px; border: 1px solid #20344b; border-radius: 8px; background: #101f32; }
.live-limit-grid dt { color: #8398af; font-size: .65rem; }
.live-limit-grid dd { margin: 5px 0 0; color: #e2edf7; font: 750 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.live-limit-grid .live-daily-used { grid-column: 1 / -1; }
.live-access-card .card-title-row h3 { margin-top: 5px; font-size: .9rem; }
.live-access-card .live-login-form { margin-top: 14px; }
.live-account { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.live-account div { min-width: 0; }
.live-account div:first-child { grid-column: 1 / -1; }
.live-account div span { color: #8398af; }
.live-account div strong { margin-top: 2px; font-size: .76rem; overflow-wrap: anywhere; }
.live-account div small { color: #7f94aa; font-size: .64rem; line-height: 1.4; }
.live-primary-queue { min-width: 0; margin-top: 0; min-height: 260px; }
.live-primary-queue > .queue-heading h3 { font-size: 1rem; }
.live-primary-queue .live-queue { padding: 12px; }
.live-order-ticket { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; padding: 16px; }
.live-order-buy { border-left: 4px solid var(--cyan); }
.live-order-sell { border-left: 4px solid var(--red); }
.live-ticket-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.live-ticket-heading .eyebrow { margin-bottom: 3px; color: #8398af; font-size: .62rem; }
.live-ticket-heading h4 { color: #edf4fb; font-size: 1rem; }
.live-order-ticket .live-ticket-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }
.live-ticket-values > div { min-width: 0; padding: 9px 10px; border-radius: 7px; background: #091522; }
.live-ticket-values dt { color: #7f94aa; font-size: .63rem; line-height: 1.35; }
.live-ticket-values dd { margin: 5px 0 0; color: #e7eef6; font: 700 .73rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.live-ticket-source, .live-ticket-rationale, .live-ticket-plan-note, .live-ticket-next-step, .live-ticket-block { margin: 0; color: #9aadc1; font-size: .69rem; line-height: 1.5; overflow-wrap: anywhere; }
.live-ticket-source a { color: #8bdcd3; text-decoration: underline; text-underline-offset: 2px; }
.live-ticket-plan-note { padding: 9px 10px; border: 1px solid #725522; border-radius: 7px; color: #e8d29e; background: #241d11; }
.live-ticket-action { display: grid; gap: 7px; }
.live-order-action { width: 100%; min-height: 48px; margin: 0; color: #06211d; background: var(--cyan); font-weight: 850; }
.live-order-action.live-sell-action { color: #2b0c11; background: #ff7780; }
.live-order-action:disabled { opacity: .48; cursor: not-allowed; }
.live-ticket-next-step { color: #8bdcd3; text-align: center; }
.live-ticket-block { color: #ffafb5; text-align: center; }
.live-deep-link-notice { margin: 12px 14px 0; padding: 10px 12px; border: 1px solid #725522; border-radius: 8px; color: #ead5a8; background: #241d11; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.live-deep-link-notice[hidden] { display: none; }
.live-advanced-details, .live-drafts-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: #0c1828; }
.live-advanced-details > summary, .live-drafts-details > summary { min-height: 48px; padding: 13px 16px; color: #9fb0c4; font-size: .78rem; font-weight: 750; cursor: pointer; }
.live-advanced-details[open] > summary, .live-drafts-details[open] > summary { border-bottom: 1px solid var(--line); }
.live-advanced-details > .live-grid { margin: 12px; }
.live-execution-boundary { align-self: start; margin: 0; }
.live-drafts-details.order-draft-section { margin-bottom: 0; padding: 0; }
.live-drafts-details > summary.order-draft-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; list-style: none; }
.live-drafts-details > summary.order-draft-heading::-webkit-details-marker { display: none; }
.live-drafts-details > summary.order-draft-heading::after { content: 'เปิด'; margin-left: auto; color: #8ea2ba; font-size: .7rem; }
.live-drafts-details[open] > summary.order-draft-heading::after { content: 'ปิด'; }
.live-draft-title { display: block; margin-top: 4px; color: #e6eef7; font-size: .9rem; font-weight: 800; }
.live-drafts-details > :not(summary) { margin-right: 16px; margin-left: 16px; }
.live-drafts-details > .order-draft-safety { margin-top: 14px; }
.live-drafts-details > .saved-drafts-section { margin-bottom: 16px; }
.live-advanced-details > summary:focus-visible, .live-drafts-details > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
@media (max-width: 900px) { .live-trade-layout { grid-template-columns: 1fr; }.live-trade-context { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }.live-account { grid-template-columns: 1fr; }.live-account div:first-child, .live-account button { grid-column: 1; } }
@media (max-width: 640px) { .live-trade-heading { align-items: flex-start; flex-direction: column; }.live-heading-actions { justify-content: flex-start; }.live-heading-actions .danger-button { min-height: 44px; }.live-trade-layout { grid-template-columns: minmax(0, 1fr); }.live-trade-context { grid-template-columns: minmax(0, 1fr); }.live-market-card, .live-access-card { padding: 14px; }.live-account { grid-template-columns: 1fr 1fr; }.live-account div:first-child, .live-account button { grid-column: 1 / -1; }.live-order-ticket { padding: 13px; }.live-ticket-heading { flex-direction: column; }.live-order-ticket .live-ticket-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }.live-advanced-details > .live-grid { margin: 10px; }.live-execution-boundary { flex-direction: column; align-items: flex-start; }.live-drafts-details > summary.order-draft-heading { align-items: flex-start; }.live-drafts-details > summary.order-draft-heading .pill { white-space: nowrap; } }

/* Focus the Spot Testnet screen on price, available balance and one clear order action. */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.testnet-heading { gap: 12px; }
.testnet-heading h2 { margin-top: 3px; }
.testnet-safety-compact { display: flex; flex-direction: row; align-items: baseline; gap: 8px; margin: 0 0 14px; padding: 9px 12px; }
.testnet-safety-compact strong { white-space: nowrap; font-size: .76rem; }
.testnet-safety-compact span { font-size: .7rem; }
.testnet-trade-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); gap: 14px; align-items: start; }
.testnet-market-card, .testnet-order-card, .testnet-access-card { min-width: 0; border-color: #38475a; background: linear-gradient(150deg, #101c2b, #0a1522); }
.testnet-market-card { min-height: 440px; padding: 20px; }
.testnet-market-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testnet-market-heading label { color: #9aadc1; font-size: .75rem; font-weight: 750; }
.testnet-market-heading select { min-width: 175px; min-height: 44px; padding: 0 12px; border: 1px solid #2a405b; border-radius: 8px; color: var(--text); background: #081321; font-size: .85rem; font-weight: 750; }
.testnet-market-heading select:focus, .testnet-side-button:focus-visible, .testnet-amount-quick button:focus-visible { outline: 2px solid #efbe58; outline-offset: 2px; }
.testnet-market-price { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 26px; }
.testnet-market-price > div { min-width: 0; display: grid; gap: 7px; }
.testnet-market-price span:first-child { color: #8ea1b6; font-size: .7rem; }
.testnet-market-price strong { color: #edf4fb; font: 800 clamp(1.7rem, 4vw, 2.35rem) ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-market-meta { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 16px; color: #7f94aa; font-size: .66rem; }
.testnet-chart-empty { min-height: 245px; display: grid; align-content: center; justify-items: center; gap: 9px; padding: 20px; border: 1px solid #1e3044; border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 48px, #24324755 49px 50px), repeating-linear-gradient(90deg, transparent 0 65px, #24324755 66px 67px), #0a1625; text-align: center; }
.testnet-chart-empty > span { color: #607b92; font-size: 2.4rem; line-height: 1; }
.testnet-chart-empty strong { color: #b7c6d5; font-size: .86rem; }
.testnet-chart-empty small { max-width: 340px; color: #798ea4; font-size: .68rem; line-height: 1.5; }
.testnet-chart-details > summary { display: none; }
.testnet-chart-details:not([open]) > .testnet-chart-empty { display: grid; }
.testnet-market-limits { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 13px; color: #8297ae; font-size: .67rem; }
.testnet-market-limits strong { color: #dce7f2; }
.testnet-order-column { display: grid; gap: 12px; }
.testnet-access-card { padding: 14px 16px; }
.testnet-access-row, .testnet-access-row > div { display: flex; align-items: center; gap: 9px; }
.testnet-access-row { justify-content: space-between; }
.testnet-access-row > div > strong { color: #d9e4ef; font-size: .76rem; }
.testnet-access-row .pill { white-space: nowrap; font-size: .59rem; }
.testnet-access-row button { width: auto; margin: 0; min-height: 36px; }
.testnet-access-card .testnet-account { margin-top: 12px; }
.testnet-access-card .testnet-balance-heading { font-size: .7rem; }
.testnet-access-card .testnet-balances { grid-template-columns: 1fr; }
.testnet-access-card .testnet-balances > div { padding: 8px 10px; }
.testnet-access-card .testnet-balances .testnet-primary-balance { display: flex; justify-content: space-between; align-items: center; }
.testnet-access-card .testnet-primary-balance span { color: #91a5ba; }
.testnet-access-card .testnet-primary-balance strong { color: #e2edf6; }
.testnet-access-card .testnet-account > .testnet-balance-heading button { min-height: 32px; padding: 5px 8px; }
.testnet-order-card { padding: 18px; }
.testnet-order-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.testnet-order-heading h3 { color: #edf3f9; font-size: 1rem; }
.testnet-order-type { color: #91a4b8; font-size: .69rem; }
.testnet-side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 15px 0; padding: 4px; border-radius: 9px; background: #081321; }
.testnet-side-button { min-height: 44px; border: 0; border-radius: 7px; color: #99aabd; background: transparent; font-size: .83rem; font-weight: 800; cursor: pointer; }
.testnet-side-button.buy.selected { color: #9de6c0; background: #18372f; box-shadow: inset 0 0 0 1px #32694f; }
.testnet-side-button.sell.selected { color: #ffc0c4; background: #3d222b; box-shadow: inset 0 0 0 1px #73424c; }
.testnet-order-form { margin-top: 0; }
.testnet-form-grid { grid-template-columns: 1fr; gap: 12px; }
.testnet-form-grid .draft-field input { min-height: 48px; font-size: 1rem; }
.testnet-form-grid .draft-field input:focus { outline: 2px solid #efbe5880; border-color: #efbe58; }
.testnet-amount-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -5px; }
.testnet-amount-quick[hidden] { display: none !important; }
.testnet-amount-quick button { min-width: 0; min-height: 38px; padding: 5px 4px; border: 1px solid #2a405b; border-radius: 7px; color: #bed0df; background: #0b1726; font-size: .68rem; font-weight: 750; cursor: pointer; }
.testnet-amount-quick button:disabled { opacity: .48; cursor: not-allowed; }
.testnet-buy-power-note { display: block; margin-top: -6px; color: #8297ae; font-size: .64rem; line-height: 1.4; }
.testnet-buy-power-note[hidden] { display: none !important; }
.testnet-order-estimate { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid #273a50; border-radius: 8px; background: #0a1625; }
.testnet-order-estimate > span, .testnet-order-estimate > small { color: #8398af; font-size: .67rem; }
.testnet-order-estimate > strong { color: #e5eef7; font: 750 .9rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-order-estimate > small { line-height: 1.4; }
.testnet-order-block { min-height: 36px; margin: 10px 0 0; padding: 9px 10px; border-left: 3px solid #438676; border-radius: 6px; color: #9dd8ca; background: #102420; font-size: .69rem; line-height: 1.45; }
.testnet-order-block.blocked { border-left-color: #a9823b; color: #e6d19f; background: #272214; }
.testnet-prepare-button { min-height: 48px; font-size: .87rem; }
.testnet-prepare-button:focus-visible, .testnet-login-form button:focus-visible { outline: 2px solid #efbe58; outline-offset: 2px; }
.testnet-login-form { margin-top: 12px; }
.testnet-login-form label, .testnet-login-form input { min-height: 44px; }
.testnet-order-type, .testnet-order-heading .testnet-order-type { padding: 5px 8px; border: 1px solid #2a405b; border-radius: 6px; background: #0b1726; }
.testnet-orders-section { margin-top: 14px; }
.testnet-secondary-details { margin-top: 12px; padding: 12px 14px; border: 1px solid #29394d; border-radius: 10px; background: #0b1726; color: #c8d4e0; }
.testnet-secondary-details > summary { color: #aab9c8; font-size: .75rem; font-weight: 700; cursor: pointer; }
.testnet-secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 12px; margin-top: 12px; }
.testnet-secondary-grid .testnet-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testnet-secondary-grid .testnet-status-grid { margin: 0; }
.testnet-secondary-grid .testnet-status-grid article { min-height: 80px; padding: 10px; }
.testnet-secondary-details .testnet-audit-card { margin: 12px 0 0; }
.testnet-secondary-details .testnet-boundary { margin-top: 12px; }
.testnet-order-details { margin-top: 10px; color: #91a5ba; font-size: .68rem; }
.testnet-order-details > summary { cursor: pointer; }
.testnet-order-details .testnet-order-values { margin-top: 8px; }
.testnet-confirm-dialog { max-height: min(88dvh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.testnet-confirm-dialog form { padding: 20px; }
.testnet-confirm-dialog .dialog-actions { position: sticky; bottom: -20px; padding: 12px 0 0; background: #101923; }
@media (max-width: 900px) { .testnet-trade-layout { grid-template-columns: 1fr; }.testnet-order-column { grid-row: 2; }.testnet-market-card { min-height: 0; }.testnet-chart-empty { min-height: 170px; }.testnet-secondary-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .testnet-safety-compact { flex-direction: column; gap: 3px; align-items: flex-start; }.testnet-badges { gap: 5px; }.testnet-trade-layout { gap: 10px; }.testnet-order-column { gap: 9px; }.testnet-order-card, .testnet-market-card { padding: 14px; }.testnet-market-heading select { min-width: 0; max-width: 62%; }.testnet-market-price { margin-top: 16px; }.testnet-market-meta { flex-direction: column; gap: 3px; }.testnet-chart-details > summary { display: list-item; color: #91a5ba; font-size: .69rem; cursor: pointer; }.testnet-chart-details:not([open]) > .testnet-chart-empty { display: none; }.testnet-chart-empty { min-height: 110px; padding: 12px; }.testnet-chart-empty > span { font-size: 1.7rem; }.testnet-access-row { align-items: flex-start; }.testnet-access-row > div { align-items: flex-start; flex-direction: column; gap: 5px; }.testnet-access-row > div > strong { font-size: .69rem; }.testnet-order-heading { align-items: flex-start; flex-direction: column; }.testnet-secondary-grid .testnet-balances { grid-template-columns: 1fr 1fr; }.testnet-order-values { grid-template-columns: 1fr 1fr; }.testnet-confirm-dialog { width: calc(100% - 20px); max-height: 92dvh; }.testnet-confirm-dialog form { padding: 14px; }.testnet-confirm-dialog .dialog-actions { bottom: -14px; flex-direction: column-reverse; }.testnet-confirm-dialog .dialog-actions button { width: 100%; min-height: 44px; } }

/* Paper chart + plan workspace */
.paper-subtabs{display:flex;gap:8px;margin:0 0 24px;padding:5px;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:12px;background:#091421}
.paper-subtab{border:0;border-radius:8px;padding:10px 16px;color:#9db0c5;background:transparent;font-weight:750;cursor:pointer}
.paper-subtab.active{color:#07101d;background:var(--cyan)}
.paper-page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}
.paper-page-heading h2{font-size:clamp(1.5rem,3vw,2rem)}
.paper-page-heading>div>p:last-child{margin-top:8px;color:#91a5bb;font-size:.84rem;line-height:1.5}
.paper-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(330px,.9fr);gap:16px;align-items:start}
.paper-chart-card,.paper-teacher-card,.paper-ticket-card,.paper-drafts{min-width:0;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#102036,#0a1524)}
.paper-chart-card{overflow:hidden;padding:20px}
.paper-instrument{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.paper-instrument h3{margin-top:6px;font-size:1.35rem;letter-spacing:-.03em}
.paper-instrument h3 small{font-size:.68rem;color:#8398ae;font-weight:500;letter-spacing:0}
.paper-price{text-align:right}
.paper-price strong{display:block;font:800 clamp(1.3rem,3vw,1.8rem) ui-monospace,monospace}
.paper-price span{display:block;margin-top:4px;color:#879bb1;font-size:.7rem}
.paper-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;padding-bottom:12px;border-bottom:1px solid #203148}
.paper-ranges{display:flex;gap:5px}
.paper-ranges button{min-width:44px;padding:8px 10px;border:1px solid #2a3d53;border-radius:7px;color:#93a8bd;background:#0a1625;font-size:.78rem;font-weight:800;cursor:pointer}
.paper-ranges button.active{border-color:#2fd5c4;color:#051821;background:#2fd5c4}
.paper-canvas-wrap{height:510px;min-height:320px;margin-top:8px}
.paper-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.paper-chart-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px;padding-top:10px;border-top:1px solid #1b2c40;color:#8ea2ba;font:.66rem ui-monospace,monospace}
.paper-chart-note{margin-top:10px;color:#7890a8;font-size:.67rem;line-height:1.5}
.paper-side-column{display:grid;gap:14px}
.paper-teacher-card,.paper-ticket-card{padding:17px}
.teacher-top{display:flex;align-items:center;gap:12px}
.teacher-art{width:68px;height:68px;flex:0 0 auto}
.teacher-top h3{margin-top:4px;font-size:1.02rem}
.teacher-bias{display:inline-flex;margin-top:6px;padding:4px 8px;border-radius:999px;color:#f4d38e;background:#342916;font-size:.68rem;font-weight:800}
.teacher-reasons{display:grid;gap:7px;margin:14px 0 0;padding-left:18px;color:#d0dce8;font-size:.75rem;line-height:1.5}
.teacher-reasons li::marker{color:var(--cyan)}
.teacher-meta{margin-top:11px;color:#8095ab;font-size:.66rem;line-height:1.55;overflow-wrap:anywhere}
.teacher-verdicts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.teacher-verdicts span{padding:9px;border:1px solid #25394f;border-radius:8px;color:#8ea2ba;background:#0a1625;font-size:.62rem;line-height:1.4}
.teacher-verdicts strong{display:block;margin-top:4px;color:#f1f5f9;font-size:.78rem}
.teacher-use,.paper-review-button{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:9px;color:#06151d;background:linear-gradient(135deg,#42dec8,#2bbfac);font-weight:850;cursor:pointer}
.teacher-use:disabled{color:#78899b;background:#253345;cursor:not-allowed}
.teacher-use-hint{display:block;margin-top:6px;color:#8095ab;font-size:.64rem;line-height:1.45}
.paper-ticket-card h3{margin-top:4px;font-size:1.05rem}
.paper-sides{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}
.paper-sides button{min-height:42px;padding:7px;border:1px solid #34445a;border-radius:9px;color:#b4c2d2;background:#101d2d;font-size:.75rem;font-weight:800;cursor:pointer}
.paper-sides button[data-plan-side="LONG"].active{color:#041a14;background:#4addaa;border-color:#4addaa}
.paper-sides button[data-plan-side="SHORT"].active{color:#fff;background:#dd5264;border-color:#dd5264}
.paper-short-note{margin-top:8px;padding:8px 9px;border-left:3px solid var(--red);color:#ffb9bf;background:#28151c;font-size:.67rem;line-height:1.5}
.paper-plan-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.paper-plan-form label{display:grid;gap:5px;color:#8ea2ba;font-size:.69rem}
.paper-plan-form input{min-width:0;width:100%;height:41px;padding:8px 10px;border:1px solid #30445c;border-radius:8px;outline:none;color:#f3f7fb;background:#091421;font:700 .8rem ui-monospace,monospace}
.paper-plan-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #2fd5c426}
.paper-math{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.paper-math div{min-width:0;padding:9px 8px;border:1px solid #24384e;border-radius:8px;background:#0a1625}
.paper-math span{display:block;color:#8398ae;font-size:.61rem}
.paper-math strong{display:block;margin-top:4px;color:#f0f5fa;font:750 .76rem ui-monospace,monospace;overflow-wrap:anywhere}
.paper-plan-status{grid-column:1/-1;margin:0;padding:9px 10px;border:1px solid #735421;border-radius:8px;color:#e8d3a4;background:#241d11;font-size:.67rem;line-height:1.5}
.paper-plan-status.good{border-color:#256e5c;color:#91e9d7;background:#103127}
.paper-plan-status.block{border-color:#753742;color:#ffb1b7;background:#28151c}
.paper-plan-form .paper-review-button{grid-column:1/-1;margin-top:0}
.paper-drafts{margin-top:16px;padding:18px}
.paper-drafts-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.paper-drafts-head h3{margin-top:4px}
.paper-empty,.paper-storage-error{padding:16px;border:1px dashed #304259;border-radius:9px;color:#899db2;font-size:.76rem}
.paper-storage-error{color:#ffb1b7;border-color:#753742}
.paper-draft-row{display:grid;gap:5px;padding:12px 14px;border:1px solid #273a50;border-radius:9px;background:#0b1726}
.paper-draft-row+.paper-draft-row{margin-top:8px}
.paper-draft-row strong{font-size:.76rem}
.paper-draft-row span{color:#94a8bd;font-size:.7rem;line-height:1.5;overflow-wrap:anywhere}
.paper-dialog{width:min(540px,calc(100% - 24px));max-height:min(90dvh,760px);padding:24px;border:1px solid #3a506b;border-radius:16px;color:var(--text);background:#101d2d;box-shadow:0 24px 90px #000b}
.paper-dialog::backdrop{background:#030812bb;backdrop-filter:blur(3px)}
.paper-dialog form{position:relative}
.paper-dialog h3{margin-top:5px;font-size:1.2rem}
.paper-dialog-close{position:absolute;right:0;top:0;width:36px;height:36px;border:1px solid #33475f;border-radius:9px;color:#d9e3ed;background:#0b1726;font-size:1.35rem;cursor:pointer}
.paper-no-order{margin-top:12px;padding:9px 11px;border-left:3px solid var(--amber);color:#f4d38e;background:#292113;font-size:.72rem}
.paper-review-details{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0}
.paper-review-details dt,.paper-review-details dd{margin:0;padding:9px;border-radius:7px;background:#0a1625}
.paper-review-details dt{color:#8095ab;font-size:.67rem}
.paper-review-details dd{color:#f0f5fa;font:700 .72rem ui-monospace,monospace;overflow-wrap:anywhere}
.paper-dialog-warning{padding:10px;border:1px solid #735421;border-radius:8px;color:#e8d3a4;font-size:.7rem;line-height:1.5}
.paper-dialog-warning.error{border-color:#753742;color:#ffb1b7}
.paper-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.paper-dialog-actions .paper-review-button{margin:0}
.paper-dialog-actions .secondary-button{min-height:44px}
#testnetSpotView[hidden],#paperChartView[hidden],#futuresTestnetView[hidden]{display:none!important}

@media(max-width:1050px){.paper-workspace{grid-template-columns:minmax(0,1.25fr) minmax(310px,.9fr)}
.paper-canvas-wrap{height:440px}
}

@media(max-width:760px){#testnet{padding-top:16px}
.paper-subtabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
.paper-subtab{padding:10px 6px;font-size:.77rem}
.paper-page-heading{align-items:flex-start;margin-bottom:13px}
.paper-page-heading>.pill{white-space:normal;text-align:center}
.paper-page-heading h2{font-size:1.48rem}
.paper-page-heading>div>p:last-child{font-size:.73rem}
.paper-workspace{grid-template-columns:minmax(0,1fr);gap:10px}
.paper-chart-card{padding:13px;border-radius:13px}
.paper-instrument{align-items:center}
.paper-instrument h3{font-size:1.08rem}
.paper-instrument h3 small{display:block;margin-top:3px}
.paper-instrument .eyebrow{font-size:.59rem;letter-spacing:.09em}
.paper-price strong{font-size:1.2rem}
.paper-price span{font-size:.59rem}
.paper-chart-toolbar{margin-top:11px}
.paper-canvas-wrap{height:310px;min-height:285px}
.paper-chart-meta{font-size:.58rem}
.paper-side-column{gap:10px}
.paper-teacher-card,.paper-ticket-card{padding:14px;border-radius:13px}
.teacher-art{width:58px;height:58px}
.paper-drafts{padding:14px}
.paper-drafts-head{align-items:flex-start;flex-direction:column}
.paper-dialog{padding:19px}
.paper-dialog-actions{grid-template-columns:1fr}
}

@media(max-width:390px){.paper-canvas-wrap{height:285px}
.paper-chart-meta{display:grid;grid-template-columns:1fr}
.paper-chart-toolbar .pill{font-size:.6rem}
.paper-sides button{font-size:.68rem}
.paper-math{gap:4px}
.paper-math div{padding:8px 5px}
.paper-math strong{font-size:.66rem}
}

/* Keep the new chart workflow readable on touch screens. */
#testnet { scroll-margin-top: 240px; }

.paper-subtabs button:focus-visible,
.paper-ranges button:focus-visible,
.paper-sides button:focus-visible,
.paper-plan-form button:focus-visible,
.teacher-use:focus-visible,
.paper-dialog button:focus-visible {
  outline: 3px solid #8cece0;
  outline-offset: 2px;
}

.paper-ranges button,
.paper-sides button,
.paper-subtab {
  min-height: 44px;
}

.paper-plan-form label {
  font-size: .78rem;
}

/* One-page Binance-style USDⓈ-M Futures workspace */
.futures-view { min-width:0; }
.futures-access-gate { width:min(100%,440px); margin:clamp(20px,6vh,72px) auto; padding:clamp(22px,4vw,34px); display:grid; gap:14px; }
.futures-access-gate[hidden],.futures-protected-content[hidden]{display:none!important}
.futures-access-gate h2{margin:0;font-size:clamp(1.3rem,3vw,1.8rem)}
.futures-access-gate p{margin:0;color:#9aadc1;line-height:1.55}
.futures-access-form{display:grid;gap:9px}
.futures-access-form label{font-size:.75rem;font-weight:700;color:#dfe9f3}
.futures-access-form input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #36506b;border-radius:8px;color:#eef4fb;background:#091421;font:inherit}
.futures-access-form button{min-height:44px}
body.futures-focused .topbar { min-height:58px; padding:8px clamp(12px,2vw,28px); gap:12px; }
body.futures-focused .brand { gap:9px; }
body.futures-focused .brand-mark { width:36px; height:36px; border-radius:9px; }
body.futures-focused .brand .eyebrow,body.futures-focused .snapshot { display:none; }
body.futures-focused h1 { font-size:1rem; }
body.futures-focused .tabs { gap:4px; padding:5px clamp(12px,2vw,28px); position:static; }
body.futures-focused .tabs .tab:not([data-tab="testnet"]) { display:none; }
body.futures-focused .tabs .tab { padding:7px 10px; font-size:.72rem; }
body.futures-focused main { padding-top:10px; padding-bottom:24px; }
body.futures-focused footer { display:none; }
body.futures-focused .paper-subtabs { display:none; }
.futures-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 10px; }
.futures-title { display:flex; align-items:center; gap:9px; }
.futures-title .eyebrow { color:#899db3; font-size:.61rem; letter-spacing:.09em; }
.futures-page-heading h2 { margin:0; font-size:1.13rem; }
.futures-heading-badges { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.futures-heading-badges>.pill { min-height:27px; padding:4px 8px; font-size:.61rem; }
.futures-demo-pill,.futures-demo-mini { color:#ffe0a1; background:#423219; border:1px solid #6b532b; }
.futures-mainnet-locked { border:1px dashed #596779; color:#9eacbb; background:#131c29; opacity:.82; cursor:not-allowed; }
.futures-account-menu { position:relative; z-index:20; }
.futures-account-menu>summary { list-style:none; }
.futures-account-menu>summary::-webkit-details-marker { display:none; }
.futures-customer-button { display:flex; align-items:center; gap:8px; min-height:38px; padding:4px 9px; border:1px solid #30445c; border-radius:8px; color:#eaf1f7; background:#0d192a; text-align:left; cursor:pointer; }
.futures-customer-button>span:nth-child(2) { display:grid; gap:2px; }
.futures-customer-button strong { font-size:.67rem; }
.futures-customer-button small { color:#91a5bb; font-size:.57rem; }
.futures-customer-avatar { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; color:#f1c85b; background:#273449; font-size:1rem; }
.futures-customer-popover { position:absolute; top:calc(100% + 8px); right:0; width:min(370px,calc(100vw - 24px)); padding:14px; border:1px solid #354b64; border-radius:12px; background:#0e1a29; box-shadow:0 16px 44px #0009; }
.futures-customer-popover[hidden] { display:none!important; }
.futures-customer-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid #25364b; }
.futures-customer-heading h3 { margin-top:3px; font-size:.88rem; }
.futures-customer-heading .eyebrow { font-size:.55rem; }
.futures-customer-heading .pill { font-size:.57rem; }
.futures-account-summary { display:flex; flex-wrap:wrap; gap:7px 12px; padding:10px 0 4px; color:#98a9bb; font-size:.62rem; }
.futures-readiness { padding:8px 0 0; }
.futures-readiness-top { display:flex; align-items:center; gap:8px; }
.futures-readiness-top>strong { margin-right:auto; color:#eaf1f7; font-size:.7rem; }
.futures-readiness-top>button { width:auto; min-height:30px; margin:0; }
.futures-readiness>p { margin:6px 0 0; color:#b9c6d3; font-size:.65rem; line-height:1.4; }
.futures-gates { margin-top:8px; border-top:1px solid #263449; color:#aebdcd; font-size:.64rem; }
.futures-gates summary { padding:8px 0 2px; cursor:pointer; }
.futures-readiness-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.futures-ready-chip { padding:4px 7px; border:1px solid #38465a; border-radius:999px; color:#adb9c6; background:#101a27; font-size:.59rem; }
.futures-ready-chip.ok { border-color:#27634f; color:#9ce5c4; background:#12271f; }
.futures-ready-chip.block { border-color:#6d5330; color:#f0d193; background:#282115; }
.futures-login-help { margin-top:9px; padding-top:9px; border-top:1px solid #263449; color:#d9c79c; font-size:.67rem; }
.futures-login-help[hidden],.futures-logout-button[hidden] { display:none!important; }
.futures-login-help form { display:grid; grid-template-columns:auto minmax(120px,1fr) auto; align-items:center; gap:7px; }
.futures-login-help label { color:#d9c79c; font-size:.63rem; }
.futures-login-help input { min-width:0; min-height:34px; padding:6px 8px; border:1px solid #30445c; border-radius:7px; color:#eaf1f7; background:#091421; }
.futures-login-help button { width:auto; min-height:34px; margin:0; }
.futures-login-help small { grid-column:1/-1; color:#8297ae; font-size:.57rem; }
.futures-logout-button { width:100%; margin-top:9px; }
.futures-trade-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(210px,.72fr) minmax(250px,.82fr); gap:9px; align-items:stretch; }
.futures-market,.futures-book,.futures-ticket,.futures-portfolio { min-width:0; border:1px solid #26384d; border-radius:10px; background:linear-gradient(155deg,#101d2d,#0a1421); }
.futures-market { overflow:hidden; padding:11px; }
.futures-market-head { display:grid; grid-template-columns:auto minmax(100px,140px) 1fr; align-items:center; gap:8px; }
.futures-market-head label { color:#91a5bb; font-size:.64rem; }
.futures-market-head select,.futures-order-form input { min-width:0; height:36px; padding:7px 9px; border:1px solid #30445c; border-radius:6px; outline:none; color:#eaf1f7; background:#091421; }
.futures-market-head select { font-weight:750; }
.futures-market-head strong { justify-self:end; color:#f3f7fb; font:800 clamp(1rem,2vw,1.38rem) ui-monospace,monospace; }
.futures-market-meta { display:flex; justify-content:space-between; gap:8px; margin-top:6px; color:#879bb1; font-size:.6rem; }
.futures-chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding-bottom:6px; border-bottom:1px solid #213247; }
.futures-ranges { display:flex; gap:3px; }
.futures-ranges button,.futures-order-modes button { min-height:29px; min-width:36px; padding:5px 8px; border:1px solid transparent; border-radius:5px; color:#91a5bb; background:transparent; font-size:.64rem; font-weight:750; cursor:pointer; }
.futures-ranges button.active,.futures-order-modes button.active { border-color:#2d5366; color:#b2f2ea; background:#15303a; }
.futures-chart-toolbar .pill { min-height:22px; padding:3px 6px; font-size:.54rem; }
.futures-canvas-wrap { height:330px; min-height:220px; margin-top:6px; }
.futures-canvas-wrap canvas { display:block; width:100%; height:100%; touch-action:pan-y; }
.futures-chart-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; padding-top:6px; border-top:1px solid #1b2b3e; color:#8297ae; font:.56rem ui-monospace,monospace; }
.futures-book { display:flex; flex-direction:column; padding:11px 9px; }
.futures-card-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.futures-card-title h3 { color:#eaf1f7; font-size:.82rem; }
.futures-card-title>span { color:#8ea2b8; font-size:.58rem; }
.futures-demo-mini { padding:3px 5px; border-radius:5px; font-size:.54rem!important; font-weight:850; }
.futures-book-labels,.futures-book-row { display:grid; grid-template-columns:1fr .8fr .8fr; gap:4px; }
.futures-book-labels { padding-bottom:5px; color:#788da4; font-size:.55rem; }
.futures-book-labels span:nth-child(n+2),.futures-book-row span:nth-child(n+2) { text-align:right; }
.futures-book-side { display:grid; align-content:start; gap:1px; min-height:118px; }
.futures-book-row { position:relative; overflow:hidden; padding:2px 1px; color:#c2ccd6; font:.57rem ui-monospace,monospace; }
.futures-book-row::before { position:absolute; z-index:0; top:0; right:0; bottom:0; width:var(--depth,0%); content:""; opacity:.19; }
.futures-book-row.ask::before { background:#ff5269; }
.futures-book-row.bid::before { background:#00c087; }
.futures-book-row>* { position:relative; z-index:1; }
.futures-book-row .ask-price { color:#ff6879; }
.futures-book-row .bid-price { color:#00c087; }
.futures-book-side>p { color:#8297ae; font-size:.64rem; }
.futures-book-mid { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px; padding:7px 1px; border-top:1px solid #24354a; border-bottom:1px solid #24354a; }
.futures-book-mid strong { color:#00c087; font:800 .9rem ui-monospace,monospace; }
.futures-book-mid span,.futures-book-time { color:#8297ae; font-size:.54rem; }
.futures-book-time { margin-top:auto; padding-top:7px; }
.futures-ticket { padding:11px; }
.futures-order-modes { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:7px; background:#091421; }
.futures-order-modes button { min-height:31px; }
.futures-order-form { display:grid; gap:7px; margin-top:9px; }
.futures-order-form>label,.futures-order-form #futuresLimitPriceField>label { display:flex; justify-content:space-between; gap:8px; color:#91a5bb; font-size:.63rem; }
.futures-order-form>input,.futures-order-form #futuresLimitPriceField>input { width:100%; font:750 .81rem ui-monospace,monospace; }
.futures-order-form input:focus,.futures-market-head select:focus { border-color:#d8ad47; box-shadow:0 0 0 2px #d8ad4730; }
.futures-order-form #futuresLimitPriceField[hidden] { display:none!important; }
.futures-order-form #futuresLimitPriceField { display:grid; gap:6px; }
.futures-estimate { display:grid; gap:3px; padding:8px; border:1px solid #263a50; border-radius:7px; background:#0a1522; }
.futures-estimate span,.futures-estimate small { color:#8297ae; font-size:.56rem; }
.futures-estimate strong { color:#eaf1f7; font:750 .77rem ui-monospace,monospace; }
.futures-estimate small { line-height:1.35; }
.futures-order-message { min-height:31px; margin:0; padding:6px 8px; border-left:3px solid #b48b39; border-radius:5px; color:#e6d19f; background:#272214; font-size:.59rem; line-height:1.4; }
.futures-order-message.good { border-left-color:#298267; color:#a4e7d0; background:#122820; }
.futures-order-message.error { border-left-color:#b74252; color:#ffc0c4; background:#321a21; }
.futures-submit-pair { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.futures-submit { display:grid; gap:3px; min-width:0; min-height:49px; padding:7px 4px; border:0; border-radius:6px; cursor:pointer; }
.futures-submit.long { color:#041a13; background:#00c087; }
.futures-submit.short { color:#fff; background:#f6465d; }
.futures-submit strong { font-size:.71rem; }
.futures-submit small { font-size:.51rem; opacity:.83; }
.futures-submit:disabled { opacity:.4; cursor:not-allowed; }
.futures-portfolio { margin-top:9px; padding:10px 12px; }
.futures-portfolio-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.futures-portfolio-head .eyebrow { font-size:.55rem; }
.futures-portfolio-head h3 { margin-top:2px; color:#e7eef5; font-size:.82rem; }
.futures-data-tabs { display:flex; gap:3px; overflow-x:auto; margin-top:6px; border-bottom:1px solid #27384d; }
.futures-data-tabs button { flex:0 0 auto; min-height:33px; padding:5px 9px; border:0; border-bottom:2px solid transparent; color:#91a5bb; background:transparent; font-size:.61rem; cursor:pointer; }
.futures-data-tabs button.active { border-bottom-color:#d8ad47; color:#f0d28c; }
.futures-data-tabs button span { display:inline-grid; min-width:16px; height:16px; place-items:center; margin-left:3px; border-radius:10px; background:#263549; font-size:.55rem; }
.futures-data-list { min-height:60px; overflow-x:auto; }
.futures-data-table { width:100%; border-collapse:collapse; white-space:nowrap; }
.futures-data-table th,.futures-data-table td { padding:7px 7px; border-bottom:1px solid #1e2d40; text-align:left; font-size:.59rem; }
.futures-data-table th { color:#8195aa; font-weight:600; }
.futures-data-table td { color:#d2dce6; }
.futures-data-table .positive { color:#00c087; }
.futures-data-table .negative { color:#ff6979; }
.futures-close-position,.futures-cancel-order { min-height:27px; padding:4px 7px; border:1px solid #566176; border-radius:5px; color:#e2eaf2; background:#1a2635; font-size:.58rem; cursor:pointer; }
.futures-close-position:disabled,.futures-cancel-order:disabled { opacity:.4; cursor:not-allowed; }
.futures-data-time { margin-top:6px; color:#71869d; font-size:.55rem; text-align:right; }
@media(max-width:1100px){.futures-trade-grid{grid-template-columns:minmax(0,1.45fr) minmax(210px,.8fr)}.futures-market{grid-column:1/-1}.futures-canvas-wrap{height:300px}.futures-book,.futures-ticket{min-height:0}}
@media(max-width:760px){body.futures-focused .topbar{min-height:50px;padding:6px 12px}.futures-page-heading{align-items:center;flex-wrap:wrap}.futures-title .eyebrow{display:none}.futures-heading-badges{gap:4px}.futures-heading-badges>.pill{min-height:24px;padding:3px 6px;font-size:.53rem}.futures-customer-button{min-height:33px;padding:3px 6px;gap:5px}.futures-customer-button strong{font-size:.59rem}.futures-customer-button small{font-size:.51rem}.futures-trade-grid{grid-template-columns:minmax(0,1fr)}.futures-market{grid-column:auto}.futures-market,.futures-ticket,.futures-book{padding:10px}.futures-book,.futures-ticket{min-height:0}.futures-canvas-wrap{height:210px;min-height:190px}.futures-market-head{grid-template-columns:auto minmax(92px,1fr) auto}.futures-market-head strong{grid-column:auto;justify-self:end;font-size:1.05rem}.futures-market-meta{font-size:.56rem}.futures-book{order:3}.futures-ticket{order:2}.futures-book-side{min-height:0}.futures-book-side .futures-book-row:nth-child(n+6){display:none}.futures-login-help form{grid-template-columns:auto minmax(90px,1fr) auto}.futures-login-help small{grid-column:1/-1}.futures-login-help button{width:auto}.futures-portfolio-head{align-items:flex-start}.futures-data-list{min-height:45px}.futures-account-menu{position:static}.futures-customer-popover{position:fixed;top:58px;right:10px;width:min(370px,calc(100vw - 20px))}}
@media(min-width:561px) and (max-width:760px){.futures-trade-grid{grid-template-columns:minmax(0,1.42fr) minmax(225px,.9fr)}.futures-market{grid-column:auto;order:1}.futures-ticket{grid-column:auto;order:2}.futures-book{grid-column:1/-1;order:3}.futures-canvas-wrap{height:230px;min-height:200px}}
@media(max-width:390px){.futures-customer-button>span:nth-child(2){display:none}.futures-customer-button{width:36px;justify-content:center}.futures-customer-button>span:last-child{display:none}.futures-customer-avatar{width:25px;height:25px}.futures-market-head{grid-template-columns:auto minmax(82px,1fr) auto}.futures-market-head select{font-size:.75rem}.futures-market-meta{align-items:flex-start}.futures-ranges button{min-width:33px;padding-inline:6px}.futures-portfolio{padding:9px}.futures-data-tabs button{padding-inline:7px}}

.paper-plan-form input {
  height: 46px;
  font-size: 16px;
}

.paper-math span,
.paper-plan-status,
.teacher-use-hint {
  font-size: .75rem;
}

.paper-dialog {
  overflow-y: auto;
}

@media(max-width:760px) {
  main { padding-left: 14px; padding-right: 14px; }
  .paper-chart-note { font-size: .72rem; }
  .teacher-reasons { font-size: .8rem; }
  .teacher-meta { font-size: .72rem; }
  .teacher-verdicts span { font-size: .7rem; }
.teacher-verdicts strong { font-size: .85rem; }
  .paper-draft-row span { font-size: .76rem; }
}

.futures-auto-risk-row { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(280px, 1.3fr); align-items: center; gap: 10px; margin: 10px 0; }
.futures-auto-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 11px 13px; margin: 10px 0; border-radius: 9px; background: #0b1624; border: 1px solid #334155; }
.futures-auto-state span { color: #9fb0c2; font-size: .75rem; }
.futures-auto-state strong { color: #f5b0a9; font-size: .9rem; }
.futures-auto-state strong[data-state="running"] { color: #71dcaa; }
.futures-auto-state small { color: #91a3b7; font-size: .68rem; margin-left: auto; }
.futures-test-status { margin: 9px 0; padding: 10px 12px; border-radius: 9px; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.futures-test-status.real-demo { color: #d8f9ec; background: #0a2824; border: 1px solid #2d8b75; }
.futures-test-status.simulated { color: #b7c9dc; background: #101d2b; border: 1px solid #34516d; }
.futures-journal-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; color: #9fb0c2; font-size: .72rem; }
.futures-auto-risk-row small { color: #9fb0c2; font-size: .68rem; line-height: 1.5; }
.futures-risk-soak { margin: 12px 0; padding: 12px 0; border-block: 1px solid #334155; }
.futures-risk-soak-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.futures-risk-soak-head > div { display: grid; gap: 3px; }
.futures-risk-soak-head strong { color: #eaf1f7; font-size: .82rem; }
.futures-risk-soak-head small { color: #91a3b7; font-size: .65rem; }
.futures-risk-soak-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 10px; overflow: hidden; border-radius: 9px; background: #334155; }
.futures-risk-soak-metrics article { min-width: 0; padding: 10px; display: grid; gap: 5px; background: #0b1624; }
.futures-risk-soak-metrics span, .futures-risk-soak-metrics small { color: #8295aa; font-size: .62rem; }
.futures-risk-soak-metrics strong { color: #dfe8f2; font: 750 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.futures-risk-soak-progress { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #263447; }
.futures-risk-soak-progress span { display: block; width: 0; height: 100%; background: #4ea7ff; transition: width .25s ease; }
.futures-risk-soak > p { margin: 8px 0 0; color: #9fb0c2; font-size: .68rem; line-height: 1.5; }
@media(max-width:760px) { .futures-auto-risk-row { grid-template-columns: 1fr; } .futures-risk-soak-head { align-items: flex-start; } .futures-risk-soak-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Session Auto planner: mobile-first, distinct from legacy research controls. */
.session-auto { margin: 20px 0; padding: 24px; border: 1px solid #31485e; }
.sa-heading,.sa-step-heading,.sa-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sa-heading h3 { margin:4px 0; font-size:24px; }
.sa-subtitle,.sa-muted { color:#93a9bc; line-height:1.6; }
.sa-candidates { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0; }
.sa-candidate { text-align:left; display:flex; flex-direction:column; gap:9px; padding:16px; color:inherit; background:#132132; border:1px solid #304355; border-radius:12px; cursor:pointer; }
.sa-candidate.ready { border-color:#00c087; }
.sa-candidate:disabled { opacity:.55; cursor:default; }
.sa-candidate small { line-height:1.5; color:#a7b9c8; }
.sa-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.sa-form label { display:flex; flex-direction:column; gap:8px; }
.sa-form input,.sa-form select,#saPin { padding:12px; border:1px solid #405365; border-radius:8px; background:#0d1824; color:#e6edf3; width:100%; box-sizing:border-box; font-size:16px; }
.sa-profile-guard { padding:12px 14px; border:1px solid #8c6730; border-radius:9px; background:#2a2114; color:#f4d69d; line-height:1.6; }
.sa-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sa-plan { padding:18px; border:1px solid #38536a; border-radius:14px; background:#111e2d; }
.sa-plan h4 { font-size:21px; margin:0 0 10px; }
.sa-plan.blocked { border-color:#624446; }
.sa-field { display:flex; justify-content:space-between; gap:12px; margin:10px 0; font-size:13px; line-height:1.5; }
.sa-field strong { text-align:right; }
.sa-plan ul { font-size:12px; line-height:1.7; padding-left:18px; color:#acbfd0; }
.sa-plan button { width:100%; margin-top:12px; }
.sa-error { color:#ff9b9b; line-height:1.5; }
.sa-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.sa-metrics article { padding:16px; background:#142233; border-radius:10px; display:flex; flex-direction:column; gap:9px; }
.sa-metrics article span { color:#93a9bc; font-size:12px; }
.sa-actions { justify-content:flex-start; margin:20px 0; }
.session-auto details,.sa-legacy { margin:20px 0; }
.session-auto summary,.sa-legacy summary { cursor:pointer; color:#a5b9c9; padding:8px 0; }
#saConfirmDialog label { display:block; margin:14px 0; }
#saConfirmDialog .testnet-confirm-check { display:flex; align-items:center; gap:12px; }
#saConfirmDialog .testnet-confirm-check input { width:20px; height:20px; }
@media(max-width:1000px) { .sa-candidates { grid-template-columns:repeat(2,minmax(0,1fr)); } .sa-plans { grid-template-columns:1fr; } }
@media(max-width:600px) { .session-auto { padding:16px; } .sa-form { grid-template-columns:1fr; } .sa-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .sa-field { flex-wrap:wrap; } .sa-actions button { width:100%; } }
@media(max-width:440px) { .sa-candidates,.sa-metrics { grid-template-columns:1fr; } .sa-heading h3 { font-size:21px; } }

/* สายซิ่ง: persistent live-control UI แยกจากระบบซื้อขายเดิม */
.racer-tab { color:#ffd27a; }
.racer-tab.active { color:#1a1203; background:#f2b84b; }
.racer-shell { display:grid; gap:12px; }
.racer-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px 20px; border:1px solid #6d5223; border-radius:15px; background:linear-gradient(135deg,#241a0e,#111b29 58%,#0d1928); }
.racer-hero h2 { color:#fff5dc; }
.racer-hero > div:first-child > p:last-child { margin-top:3px; color:#8095aa; font-size:.7rem; }
.racer-hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.racer-mock-badge { display:inline-flex; align-items:center; min-height:34px; padding:7px 10px; border:1px solid #8b6322; border-radius:999px; color:#ffd788; background:#2f210d; font-size:.68rem; font-weight:850; letter-spacing:.06em; white-space:nowrap; }
.racer-mock-badge[data-authenticated="true"] { border-color:#327867; color:#83f1db; background:#112b27; }
.racer-login { width:auto; min-width:108px; margin:0; }
.racer-preflight { width:auto; min-width:100px; margin:0; }
.racer-create { width:auto; min-width:150px; margin:0; background:#f2b84b; color:#1c1304; }
.racer-boundary { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #604925; border-radius:9px; color:#dcc9a4; background:#211a10; font-size:.66rem; }
.racer-boundary > span { color:#f2b84b; }
.racer-boundary > span[data-state="LIVE"] { color:#42d7bb; }
.racer-boundary > span[data-state="STALE"],.racer-boundary > span[data-state="ERROR"] { color:#ff7e88; }
.racer-boundary strong { color:#ffd98c; white-space:nowrap; }
.racer-account-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.racer-account-strip[hidden] { display:none!important; }
.racer-account-strip article { min-width:0; padding:9px 11px; border:1px solid #273a50; border-radius:9px; background:#0c1828; }
.racer-account-strip span { display:block; color:#8096ae; font-size:.58rem; }
.racer-account-strip strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; color:#75dfcd; font:800 .72rem ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.racer-account-strip strong[data-ready="false"] { color:#ffb16e; }
.racer-readiness { border:1px solid #293d53; border-radius:10px; background:#0b1725; }
.racer-readiness summary { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; list-style:none; }
.racer-readiness summary::-webkit-details-marker { display:none; }
.racer-readiness summary span { color:#c8d5e2; font-size:.72rem; font-weight:800; }
.racer-readiness summary strong { color:#69e1cf; font:850 .78rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-readiness summary small { margin-left:auto; color:#8096ad; font-size:.61rem; }
.racer-readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:0 10px 10px; }
.racer-readiness-grid article { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:7px 8px; border:1px solid #24384d; border-radius:7px; background:#0f1c2c; }
.racer-readiness-grid span { overflow:hidden; text-overflow:ellipsis; color:#9eb0c2; font-size:.6rem; white-space:nowrap; }
.racer-readiness-grid strong { flex:none; font-size:.57rem; }
.racer-readiness-grid article[data-state="PASS"] strong { color:#64dfc9; }
.racer-readiness-grid article[data-state="BLOCKED"] strong { color:#ff9a82; }
.racer-readiness-grid article[data-state="PENDING"] strong { color:#e9bf6d; }
.racer-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.racer-summary article { min-width:0; padding:12px 14px; border:1px solid #273a50; border-radius:10px; background:#0c1828; display:grid; gap:4px; }
.racer-summary span,.racer-summary small { color:#8096ae; font-size:.68rem; }
.racer-summary strong { overflow-wrap:anywhere; font:800 1.2rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#f3f7fb; }
.racer-summary article:nth-child(4) strong,.racer-summary article:nth-child(5) strong { color:#65e4d7; }
.racer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }
.racer-toolbar > div { display:grid; gap:3px; }
.racer-toolbar span { color:#7f94aa; font-size:.68rem; }
.racer-stop-all { min-height:38px; padding:8px 14px; border:1px solid #853944; border-radius:8px; color:#ffb0b6; background:#2a151b; font-weight:850; cursor:pointer; }
.racer-stop-all:disabled { opacity:.42; cursor:not-allowed; }
.racer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.racer-card { min-width:0; padding:15px; border:1px solid #2c4158; border-radius:15px; background:linear-gradient(150deg,#111f31,#0a1625); }
.racer-card[data-status="ACTIVE"] { border-left:3px solid #2fd5c4; }
.racer-card[data-status="RESEARCHING"] { border-left:3px solid #f2b84b; }
.racer-card[data-status="DRAFT"] { border-left:3px solid #f2b84b; }
.racer-card[data-status="STOPPED"] { border-left:3px solid #66768b; opacity:.78; }
.racer-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.racer-card-head h3 { margin:0; color:#f5f8fb; font-size:1.08rem; }
.racer-state { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:.62rem; font-weight:850; white-space:nowrap; }
.racer-state.active { color:#63e6d9; background:#123f3b; }
.racer-state.researching { color:#ffd37a; background:#493817; }
.racer-state.shadow,.racer-state.risk_review { color:#7edfd2; background:#163c3a; }
.racer-state.draft { color:#ffd37a; background:#493817; }
.racer-state.stopped { color:#b6c2d0; background:#2d3542; }
.racer-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.racer-chips span { min-width:0; padding:4px 7px; border:1px solid #2a4056; border-radius:999px; overflow:hidden; text-overflow:ellipsis; color:#8ea2b6; background:#0b1725; font-size:.58rem; white-space:nowrap; }
.racer-chips span:last-child { flex:0 1 auto; }
/* Emphasised card chips (user request 2026-10-03): risk, style, strategy/state, entry plan */
.racer-chips span { padding:5px 11px; font-size:.74rem; font-weight:700; letter-spacing:.01em; line-height:1.25; color:#dbe7f3; }
.racer-chips .chip-risk { color:#ffd9d2; background:rgba(255,99,71,.16); border-color:rgba(255,99,71,.65); }
.racer-chips .chip-risk[data-level="LOW"] { color:#cdf5dc; background:rgba(60,200,120,.15); border-color:rgba(60,200,120,.6); }
.racer-chips .chip-risk[data-level="MEDIUM"] { color:#ffe9b8; background:rgba(255,184,64,.15); border-color:rgba(255,184,64,.65); }
.racer-chips .chip-style { color:#c8f1f4; background:rgba(32,201,208,.14); border-color:rgba(32,201,208,.6); }
.racer-chips .chip-strategy { color:#e6edf5; background:rgba(150,170,195,.16); border-color:rgba(150,170,195,.55); }
.racer-chips .chip-strategy.stopped { color:#ffc9c9; background:rgba(255,90,90,.12); border-color:rgba(255,90,90,.5); }
.racer-chips .chip-plan { color:#e6dcff; background:rgba(150,110,255,.2); border-color:rgba(160,125,255,.75); }

.racer-scan-line { margin-top:7px; color:#7f96ac; font-size:.59rem; letter-spacing:.01em; }
.racer-plan { margin-top:9px; padding:8px 9px; border:1px solid #263b51; border-radius:8px; background:#0a1624; }
.racer-plan-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.racer-plan-head strong { color:#dbe5ee; font-size:.66rem; }
.racer-plan-head span { color:#70869b; font-size:.54rem; }
.racer-plan-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.racer-plan-list > p { color:#7f94a9; font-size:.58rem; }
.racer-plan-row { display:inline-flex; align-items:center; gap:5px; padding:5px 6px; border:1px solid #294158; border-radius:6px; background:#0d1d2d; }
.racer-plan-row strong { color:#dfe8f0; font:800 .59rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-plan-row span { padding:2px 4px; border-radius:4px; font-size:.5rem; font-weight:850; }
.racer-plan-row small { color:#879bae; font-size:.5rem; }
.racer-plan-side.long { color:#71dfcb; background:#153b36; }
.racer-plan-side.short { color:#ff9da5; background:#3b1c23; }
.racer-plan-side.hold { color:#e5bd6d; background:#3a2d17; }
.racer-money { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0 8px; }
.racer-money div { min-width:0; padding:10px 11px; border-radius:9px; background:#101f32; }
.racer-money span { display:block; color:#8094aa; font-size:.62rem; }
.racer-money strong { display:block; margin-top:5px; overflow-wrap:anywhere; font:800 .82rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-money .racer-equity strong { color:#fff0c9; }
.racer-money .positive { color:#65e4d7; }
.racer-money .negative { color:#ff8e96; }
.racer-allocation { display:grid; grid-template-columns:minmax(80px,1fr) auto; align-items:center; gap:8px; }
.racer-allocation > span { height:5px; overflow:hidden; border-radius:99px; background:#1c3044; }
.racer-allocation i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2fd5c4,#f2b84b); }
.racer-allocation small { color:#778ca2; font-size:.56rem; white-space:nowrap; }
.racer-position-list { display:flex; flex-wrap:wrap; gap:6px; min-height:27px; margin-top:12px; }
.racer-position { padding:5px 7px; border:1px solid #2c425a; border-radius:6px; color:#bdd0e2; background:#0c1726; font:700 .62rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-position.long { border-color:#236457; color:#70dfcc; }
.racer-position.short { border-color:#743a43; color:#ff9ba2; }
.racer-position-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:11px; padding-top:10px; border-top:1px solid #203249; }
.racer-position-heading strong { color:#dbe5ee; font-size:.74rem; }
.racer-position-heading span { color:#71869c; font-size:.6rem; }
.racer-position-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.racer-history { margin-top:16px; border:1px solid #2c4158; border-radius:12px; overflow:hidden; background:#0a1624; }
.racer-history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-bottom:1px solid #263b51; }
.racer-history-head > div { display:flex; align-items:baseline; gap:9px; }
.racer-history-head strong { color:#dbe5ee; font-size:.78rem; }
.racer-history-head span,.racer-history-head small { color:#71869c; font-size:.58rem; }
.racer-history-scroll { overflow-x:auto; }
.racer-history table { min-width:680px; }
.racer-history th { padding:8px 10px; font-size:.57rem; }
.racer-history td { padding:8px 10px; font-size:.65rem; }
.racer-history td.positive { color:#65e4d7; }
.racer-history td.negative { color:#ff8e96; }
.racer-mini-chart { min-width:0; margin:0; padding:8px; border:1px solid #263b51; border-radius:9px; background:#091522; }
.racer-mini-chart figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.racer-mini-chart figcaption div { display:flex; align-items:center; gap:6px; }
.racer-mini-chart figcaption strong { font:800 .72rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-mini-chart figcaption span { padding:3px 5px; border-radius:4px; font-size:.54rem; font-weight:850; }
.racer-mini-chart figcaption span.long { color:#70dfcc; background:#123c36; }
.racer-mini-chart figcaption span.short { color:#ff9ba2; background:#3b1c23; }
.racer-mini-chart figcaption > .positive { color:#65e4d7; }
.racer-mini-chart figcaption > .negative { color:#ff8e96; }
.racer-mini-chart svg { display:block; width:100%; height:105px; margin-top:2px; overflow:visible; }
.racer-mini-chart .dial-track,.racer-mini-chart .dial-progress { fill:none; stroke-linecap:round; stroke-width:5; }
.racer-mini-chart .dial-track { stroke:#1c3043; }
.racer-mini-chart .dial-progress { stroke:#38cbb9; }
.racer-mini-chart .sl-dot { fill:#ff6f79; stroke:#351419; stroke-width:1.5; }
.racer-mini-chart .tp-dot { fill:#43d4ad; stroke:#0e3028; stroke-width:1.5; }
.racer-mini-chart .entry-dot { fill:#e3e9ef; stroke:#243544; stroke-width:1.5; }
.racer-mini-chart .current-dot { fill:#f2b84b; stroke:#33230a; stroke-width:1.7; }
.racer-mini-chart text { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:800; }
.racer-mini-chart .dial-now { fill:#71869b; font-size:6px; letter-spacing:.08em; }
.racer-mini-chart .dial-value { fill:#f2f6f9; font-size:9px; }
.racer-mini-chart .sl-label { fill:#ff8089; font-size:6px; }.racer-mini-chart .tp-label { fill:#60dfc3; font-size:6px; }
.racer-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.racer-levels span { min-width:0; padding:5px; border-radius:5px; background:#101f31; }
.racer-levels small { display:block; color:#71869c; font-size:.5rem; }
.racer-levels strong { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; color:#c7d5e2; font:700 .56rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-quote-strip { display:flex; justify-content:center; gap:7px; margin-top:5px; color:#75899e; font:700 .48rem ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.racer-quote-strip span:nth-child(3) { color:#e4bd69; }
.racer-no-position { grid-column:1/-1; padding:28px 12px; border:1px dashed #31475d; border-radius:9px; color:#8297ac; text-align:center; font-size:.72rem; }
.racer-card-actions { display:flex; gap:8px; margin-top:13px; }
.racer-card-actions button { width:auto; min-height:36px; padding:7px 10px; }
.racer-start { border:1px solid #7b5a20; border-radius:7px; color:#ffd27a; background:#2b210f; cursor:pointer; font-weight:850; }
.racer-start:disabled { opacity:.58; cursor:not-allowed; }
.racer-rename { border:1px solid #315d75; border-radius:7px; color:#a9ddf3; background:#102434; cursor:pointer; font-weight:800; }
.racer-stop { margin-left:auto; border:1px solid #743642; border-radius:7px; color:#ffadb4; background:#28151b; cursor:pointer; font-weight:800; }
.racer-stop:disabled { opacity:.4; cursor:not-allowed; }
.racer-delete { border:1px solid #743642; border-radius:7px; color:#ffadb4; background:transparent; cursor:pointer; font-weight:800; }
.racer-delete:disabled { opacity:.4; cursor:not-allowed; }
.racer-log { margin-top:12px; }
.racer-log summary { color:#9fb1c3; font-size:.7rem; cursor:pointer; }
.racer-log-list { display:grid; gap:7px; margin-top:9px; }
.racer-log-list p { padding:8px 9px; border-left:2px solid #384f67; color:#92a6bb; background:#0a1523; font-size:.65rem; line-height:1.5; }
.racer-empty { grid-column:1/-1; padding:36px; border:1px dashed #334b62; border-radius:14px; color:#8da1b6; text-align:center; }
.racer-dialog { position:fixed; z-index:60; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(540px,calc(100% - 24px)); max-height:min(90dvh,760px); overflow:auto; padding:0; border:1px solid #785b28; border-radius:16px; color:var(--text); background:#101b29; box-shadow:0 24px 90px #000b,0 0 0 100vmax #02060dc4; }
.racer-dialog[hidden] { display:none!important; }
.racer-dialog::backdrop { background:#02060dc4; backdrop-filter:blur(4px); }
.racer-dialog form { position:relative; padding:22px; }
.racer-dialog h3 { margin-top:6px; font-size:1.25rem; }
.racer-dialog-copy { margin-top:8px; color:#8fa4ba; font-size:.75rem; line-height:1.5; }
.racer-dialog-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid #384d62; border-radius:8px; color:#d7e1eb; background:#0b1725; font-size:1.2rem; cursor:pointer; }
.racer-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:18px; }
.racer-form-grid label { display:grid; gap:6px; color:#9aadc0; font-size:.7rem; }
.racer-form-grid label:last-child { grid-column:1/-1; }
.racer-form-grid input,.racer-form-grid select { width:100%; min-height:43px; padding:0 10px; border:1px solid #344a60; border-radius:8px; color:#eef4fa; background:#0a1624; font-size:16px; }
.racer-dialog-summary { display:flex; justify-content:space-between; gap:12px; margin-top:12px; padding:10px; border-radius:8px; background:#211a10; color:#cdbb99; font-size:.68rem; }
.racer-dialog-summary strong { color:#ffd27a; text-align:right; }
.racer-form-message { min-height:20px; margin-top:10px; color:#ff9ca3; font-size:.7rem; line-height:1.45; }
.racer-login-fields { grid-template-columns:1fr; }
.racer-login-fields label:last-child { grid-column:1; }
.racer-start-review { display:grid; gap:11px; margin-top:16px; }
.racer-start-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.racer-start-facts > div { min-width:0; padding:10px; border:1px solid #2b4056; border-radius:9px; background:#0a1624; }
.racer-start-facts span { display:block; color:#8096ad; font-size:.61rem; }
.racer-start-facts strong { display:block; margin-top:4px; overflow-wrap:anywhere; color:#f4f7fa; font:800 .76rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-start-blockers { display:flex; flex-wrap:wrap; gap:6px; }
.racer-start-blockers span { padding:6px 8px; border:1px solid #674b24; border-radius:999px; color:#f4ca7e; background:#211a10; font-size:.61rem; }
.racer-risk-accept { display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:10px; border:1px solid #8a3b2b; border-radius:8px; background:#2a1410; color:#ffb4a2; font-size:.72rem; line-height:1.4; }
.racer-risk-accept input { margin-top:2px; flex:none; }
.racer-start-wait { color:#8fa4ba; font-size:.72rem; }
.racer-dialog .dialog-actions button { margin:0; }
@media(max-width:1250px){.racer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.racer-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.racer-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.racer-grid{grid-template-columns:1fr}}
@media(max-width:460px){.racer-position-charts{grid-template-columns:1fr}}
@media(max-width:600px){.racer-hero{align-items:flex-start;flex-direction:column;padding:18px}.racer-hero-actions{width:100%;justify-content:flex-start}.racer-create{flex:1}.racer-boundary{align-items:flex-start;flex-direction:column;gap:3px}.racer-account-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.racer-readiness-grid{grid-template-columns:1fr}.racer-summary{grid-template-columns:1fr 1fr}.racer-summary strong{font-size:1.08rem}.racer-toolbar{align-items:flex-start}.racer-money{grid-template-columns:1fr 1fr}.racer-form-grid{grid-template-columns:1fr}.racer-form-grid label:last-child{grid-column:auto}.racer-dialog-summary{flex-direction:column}.racer-dialog .dialog-actions{flex-direction:column-reverse}.racer-dialog .dialog-actions button{width:100%}}

.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; opacity: .85; }
.link-button:hover, .link-button:focus-visible { opacity: 1; }
.show-password { display: flex; align-items: center; gap: .5rem; font-size: .85rem; opacity: .85; }
.show-password input { width: auto; margin: 0; }
.racer-plan-row.clickable { cursor:pointer; }
.racer-plan-row.clickable:hover, .racer-plan-row.clickable:focus-visible { border-color:#4a6b8c; outline:none; }
.racer-chart-box { flex-basis:100%; padding:6px; border:1px solid #263b51; border-radius:6px; background:#08121f; }
.racer-chart-box[hidden] { display:none; }
.racer-chart-svg { display:block; width:100%; height:auto; }
.racer-chart-note { display:block; margin-top:4px; color:#879bae; font-size:.5rem; line-height:1.4; }
.racer-plan-row { align-items:center; }
.racer-plan-label { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.racer-gauge { flex:none; display:block; }
.racer-plan-detail-top { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.racer-stage-list { flex:1 1 180px; margin:0; padding:0; list-style:none; font-size:.54rem; line-height:1.55; }
.racer-stage { display:flex; gap:5px; color:#7f94a9; }
.racer-stage b { width:10px; text-align:center; }
.racer-stage.pass { color:#8fdcc8; }
.racer-stage.block { color:#ff8b92; font-weight:800; }
.racer-chart-slot { margin-top:6px; }
.racer-budget-guide { margin-top:10px; padding:9px 10px; border:1px solid #263b51; border-radius:8px; background:#0a1624; }
.racer-budget-guide:empty { display:none; }
.racer-guide-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.racer-guide-head strong { font-size:.72rem; }
.racer-guide-head small { color:#879bae; font-size:.52rem; }
.racer-guide-head.good strong { color:#4ade80; } .racer-guide-head.partial strong { color:#f2b84b; } .racer-guide-head.low strong { color:#ff6b73; }
.racer-guide-rows { display:grid; grid-template-columns:1fr auto; gap:3px 10px; margin:0; font-size:.58rem; }
.racer-guide-rows dt { color:#8ea2ba; } .racer-guide-rows dd { margin:0; color:#dbe5ee; text-align:right; font-variant-numeric:tabular-nums; }
.racer-guide-warn { margin:7px 0 0; color:#ff8b92; font-size:.58rem; }
.racer-guide-note { margin:7px 0 0; color:#7f94a9; font-size:.52rem; line-height:1.45; }
.racer-slider-wrap { grid-column:1 / -1; margin-top:-2px; }
.racer-budget-slider { -webkit-appearance:none; appearance:none; display:block; width:100%; height:8px; margin:6px 0 0; border-radius:6px; background:#22364c; outline:none; cursor:pointer; }
.racer-budget-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#f4f8fc; border:3px solid #0a1624; box-shadow:0 0 0 1px #6f8aa6; }
.racer-budget-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#f4f8fc; border:3px solid #0a1624; box-shadow:0 0 0 1px #6f8aa6; }
.racer-budget-slider:focus-visible { box-shadow:0 0 0 2px #65a9ff; }
.racer-slider-scale { display:flex; justify-content:space-between; margin-top:3px; color:#7f94a9; font-size:.5rem; }
.racer-slider-wrap { position:relative; padding-bottom:16px; }
.racer-slider-funds { position:absolute; top:-2px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.racer-slider-funds[hidden] { display:none; }
.racer-slider-funds i { width:2px; height:22px; background:#f4f8fc; box-shadow:0 0 0 1px #0a1624; }
.racer-slider-funds span { position:absolute; top:27px; white-space:nowrap; color:#f4f8fc; font-size:.5rem; }
/* Entry-plan gauges: three per row, left to right. Opened detail panels span the whole row. */
.racer-plan-list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.racer-plan-list > p { grid-column:1 / -1; }
.racer-plan-row { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; text-align:center; min-width:0; }
.racer-plan-label { align-items:center; gap:2px; min-width:0; width:100%; }
.racer-plan-label small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.racer-plan-list > .racer-chart-box { grid-column:1 / -1; }
.racer-last-closed { margin:5px 0 0; font-size:.56rem; line-height:1.4; }
.racer-last-closed.negative { color:#ff8b92; } .racer-last-closed.positive { color:#4ade80; }
.racer-gate-progress { display:flex; flex-direction:column; align-items:stretch; gap:2px; width:100%; margin-top:2px; }
.racer-gate-progress.wide { flex:0 0 100%; }
.racer-gate-track { display:block; height:5px; border-radius:4px; background:#22364c; overflow:hidden; }
.racer-gate-track i { display:block; height:100%; border-radius:4px; background:#5d7289; }
.racer-gate-track i.low { background:#ff6b73; } .racer-gate-track i.mid { background:#f2b84b; }
.racer-gate-track i.high { background:#2fd5c4; } .racer-gate-track i.full { background:#4ade80; }
.racer-gate-progress small { color:#9fb2c6; font-size:.5rem; text-align:center; }
.racer-plan-detail-top { display:block; }
/* Entry plans as name-and-colour chips (user request 2026-10-03). */
.racer-plan-list { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; }
.racer-plan-row.racer-plan-chip { flex-direction:row; justify-content:center; padding:5px 4px; min-height:0; border-radius:6px; border:1px solid #294158; background:#0d1d2d; }
.racer-plan-chip strong { font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.racer-plan-chip.long { background:rgba(74,222,128,.14); border-color:#2f7d55; } .racer-plan-chip.long strong { color:#8fe6b4; }
.racer-plan-chip.short { background:rgba(255,107,115,.14); border-color:#8a3b44; } .racer-plan-chip.short strong { color:#ff9aa1; }
.racer-plan-chip.flat strong { color:#9fb2c6; }
.racer-plan-chip.waiting { opacity:.62; border-style:dashed; }
.racer-plan-chip.ready { opacity:1; border-style:solid; box-shadow:0 0 0 1px rgba(244,248,252,.45); }

.racer-entry-plan{background:rgba(120,90,255,.14);border:1px solid rgba(120,90,255,.4)}
.racer-guide-fit{display:grid;gap:4px;margin-top:10px;padding:10px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:8px}
.racer-guide-fit small{opacity:.8;word-break:break-word}
/* Entry plans as plain text, coloured by direction (user request 2026-10-03) */
.racer-plan-list { display:flex; flex-wrap:wrap; gap:4px 14px; }
.racer-plan-text { font-weight:700; font-size:.82rem; letter-spacing:.02em; background:none; border:0; padding:0; cursor:default; }
.racer-plan-text.long { color:#3fd884; }
.racer-plan-text.short { color:#ff6b6b; }
.racer-plan-text.flat { color:#8ea2b6; }
/* Entry-plan progress bar (user request 2026-10-03) */
.racer-scan { display:grid; gap:4px; margin:6px 0 8px; }
.racer-scan-track { display:block; height:6px; border-radius:999px; background:#13263a; overflow:hidden; }
.racer-scan-track i { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#20c9d0,#7b6cff); transition:width .6s ease; }
.racer-scan[data-mode="wait"] .racer-scan-track i { background:#3a5670; transition:width 1s linear; }
.racer-scan small { color:#8ea2b6; font-size:.66rem; }
/* indeterminate bar until the first scan reports (right after Start) */
.racer-scan[data-mode="starting"] .racer-scan-track i { width:35%; animation:racerScanSlide 1.2s ease-in-out infinite; }
@keyframes racerScanSlide { 0% { margin-left:-35%; } 100% { margin-left:100%; } }
/* Dial centre shows the move from Entry (user request 2026-10-03) */
.racer-mini-chart .dial-value.move-up { fill:#3fd884; }
.racer-mini-chart .dial-value.move-down { fill:#ff6b6b; }
/* per-position Cut button (user request 2026-10-03) */
.racer-mini-chart .position-cut { margin-top:6px; width:100%; padding:5px 8px; border:1px solid rgba(255,99,99,.6); border-radius:8px; background:rgba(255,99,99,.12); color:#ffc9c9; font-size:.7rem; font-weight:700; cursor:pointer; }
.racer-mini-chart .position-cut:hover:not(:disabled) { background:rgba(255,99,99,.25); }
.racer-mini-chart .position-cut:disabled { opacity:.55; cursor:wait; }
.racer-plan-list > p.racer-scan-issue { color:#ffb4a8; font-size:.72rem; }
/* Position dials: three per row (user request 2026-10-04), compacted to fit the narrower tiles */
@media (min-width:461px) {
  .racer-position-charts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .racer-position-charts .racer-mini-chart { padding:6px; }
  .racer-position-charts .racer-mini-chart figcaption { flex-wrap:wrap; gap:2px 6px; }
  .racer-position-charts .racer-mini-chart figcaption strong { font-size:.62rem; }
  .racer-position-charts .racer-mini-chart svg { height:84px; }
  .racer-position-charts .racer-levels { gap:3px; }
  .racer-position-charts .racer-levels span { padding:3px; }
  .racer-position-charts .racer-levels strong { font-size:.5rem; }
  .racer-position-charts .racer-quote-strip { flex-wrap:wrap; gap:1px 5px; white-space:normal; font-size:.42rem; }
  .racer-position-charts .position-cut { padding:4px 6px; font-size:.62rem; }
}
/* Account details as icon chips next to the title (user request 2026-10-04) */
.racer-title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.racer-account-strip.racer-account-icons { display:flex; flex-wrap:wrap; gap:7px; }
.racer-account-icons article { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid rgba(60,200,160,.45); border-radius:999px; background:rgba(40,160,130,.12); color:#75dfcd; cursor:default; }
.racer-account-icons article[data-state="warn"] { border-color:rgba(255,160,90,.6); background:rgba(255,160,90,.12); color:#ffb16e; }
.racer-account-icons article > span { display:inline-flex; margin:0; color:inherit; }
.racer-account-icons .acct-value { display:inline; margin:0; color:inherit; font:800 .72rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-account-icons .acct-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.racer-boundary[hidden] { display:none!important; }

/* ===== Overview pixel corner: soft pastel pixel-art, a teacher who reads the Speed Racer situation (2026-10-04) ===== */
.pixel-corner { --pc-ink:#e9eeff; --pc-soft:#aab8e6; --pc-bg:#1b2142; --pc-bg2:#232b55; --pc-line:#8fb6ff; --pc-peach:#ffb4a2; --pc-mint:#9be7c4; --pc-lemon:#ffe08a; --pc-lav:#c4b5fd;
  margin-bottom:26px; padding:18px; background:linear-gradient(180deg,var(--pc-bg),#171c38); color:var(--pc-ink); image-rendering:pixelated;
  box-shadow:0 -4px 0 0 var(--pc-line),0 4px 0 0 var(--pc-line),-4px 0 0 0 var(--pc-line),4px 0 0 0 var(--pc-line),0 12px 0 0 #0e1226; }
.pixel-corner .px { display:block; image-rendering:pixelated; }
.pc-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pc-title { display:flex; align-items:center; gap:10px; }
.pc-title .eyebrow { color:var(--pc-lav); letter-spacing:.2em; }
.pc-title h3 { color:#fff; font-size:1.15rem; letter-spacing:.01em; }
.pc-badge { padding:5px 12px; font:800 .7rem ui-monospace,Menlo,monospace; color:#1b2142; background:var(--pc-mint); box-shadow:0 -3px 0 0 #6fc9a0,0 3px 0 0 #6fc9a0,-3px 0 0 0 #6fc9a0,3px 0 0 0 #6fc9a0; }
.pc-badge.locked { background:var(--pc-lemon); box-shadow:0 -3px 0 0 #d9b550,0 3px 0 0 #d9b550,-3px 0 0 0 #d9b550,3px 0 0 0 #d9b550; }
.pc-stage { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.pc-teacher { display:flex; gap:14px; align-items:flex-end; padding:14px; background:var(--pc-bg2); box-shadow:0 -4px 0 0 #3a4784,0 4px 0 0 #3a4784,-4px 0 0 0 #3a4784,4px 0 0 0 #3a4784; }
.pc-teacher-art { position:relative; flex:none; display:flex; flex-direction:column; align-items:center; }
.px-teacher { animation:pcBob 2.4s steps(2) infinite; }
.px-teacher.mood-sleepy { animation:pcSleep 3.2s steps(2) infinite; }
.pc-desk { display:block; width:112px; height:10px; margin-top:2px; background:#c99f6c; box-shadow:0 4px 0 0 #8e6d44; }
.pc-bubble { position:relative; flex:1; min-width:0; padding:12px 14px; color:#2b2f55; background:#fff8e6; box-shadow:0 -4px 0 0 #2b2f55,0 4px 0 0 #2b2f55,-4px 0 0 0 #2b2f55,4px 0 0 0 #2b2f55; }
.pc-bubble::before { content:""; position:absolute; left:-14px; bottom:18px; width:10px; height:10px; background:#fff8e6; box-shadow:-4px 0 0 0 #2b2f55,-4px -4px 0 0 #fff8e6,-8px 0 0 0 #2b2f55; }
.pc-name { margin-bottom:6px; font:800 .66rem ui-monospace,Menlo,monospace; letter-spacing:.14em; color:#8a5cf0; }
.pc-bubble ul { margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.pc-bubble li { display:flex; gap:8px; align-items:flex-start; font-size:.84rem; line-height:1.45; }
.pc-bubble li .px { margin-top:3px; flex:none; }
.pc-score { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pc-score article { display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:12px; background:var(--pc-bg2); box-shadow:0 -3px 0 0 #3a4784,0 3px 0 0 #3a4784,-3px 0 0 0 #3a4784,3px 0 0 0 #3a4784; }
.pc-score article > span { display:flex; align-items:center; gap:6px; color:var(--pc-soft); font-size:.7rem; }
.pc-score strong { color:#fff; font:800 1.35rem ui-monospace,Menlo,monospace; }
.pc-score strong small { margin-left:3px; color:var(--pc-soft); font-size:.8rem; }
.pc-score article.up strong { color:var(--pc-mint); } .pc-score article.down strong { color:var(--pc-peach); }
.pc-sub { margin:20px 0 10px; color:var(--pc-lemon); font:800 .8rem ui-monospace,Menlo,monospace; letter-spacing:.06em; }
.pc-sub small { margin-left:8px; color:var(--pc-soft); font-weight:600; letter-spacing:0; }
.pc-lanes { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.pc-lane { padding:10px 12px; background:var(--pc-bg2); box-shadow:0 -3px 0 0 #3a4784,0 3px 0 0 #3a4784,-3px 0 0 0 #3a4784,3px 0 0 0 #3a4784; }
.pc-lane.live { box-shadow:0 -3px 0 0 var(--pc-mint),0 3px 0 0 var(--pc-mint),-3px 0 0 0 var(--pc-mint),3px 0 0 0 var(--pc-mint); }
.pc-lane[data-status="RECOVERY_REQUIRED"] { box-shadow:0 -3px 0 0 var(--pc-peach),0 3px 0 0 var(--pc-peach),-3px 0 0 0 var(--pc-peach),3px 0 0 0 var(--pc-peach); }
.pc-lane header { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.pc-lane header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; color:#fff; }
.pc-state { flex:none; padding:2px 8px; color:#1b2142; background:var(--pc-lav); font:800 .62rem ui-monospace,Menlo,monospace; }
.pc-lane.live .pc-state { background:var(--pc-mint); }
.pc-track { position:relative; height:42px; margin:10px 0 8px; border-bottom:4px dashed #4a5aa6; }
.pc-car { position:absolute; bottom:2px; transition:left .8s steps(8); }
.px-car.running { animation:pcRun .5s steps(2) infinite; } .px-car.parked { filter:saturate(.55) brightness(.9); }
.pc-goal { position:absolute; right:0; bottom:2px; }
.pc-lane footer { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pc-pnl { display:flex; align-items:center; gap:5px; white-space:nowrap; font:800 .86rem ui-monospace,Menlo,monospace; }
.pc-lane footer { flex-wrap:wrap; }
.pc-pnl.up { color:var(--pc-mint); } .pc-pnl.down { color:var(--pc-peach); }
.pc-meta { color:var(--pc-soft); font-size:.66rem; }
.pc-positions { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.pc-pos { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 10px; background:var(--pc-bg2); box-shadow:0 -2px 0 0 #3a4784,0 2px 0 0 #3a4784,-2px 0 0 0 #3a4784,2px 0 0 0 #3a4784; }
.pc-pos b { font:800 .78rem ui-monospace,Menlo,monospace; color:#fff; }
.pc-pos em { font:800 .74rem ui-monospace,Menlo,monospace; font-style:normal; }
.pc-pos.up em { color:var(--pc-mint); } .pc-pos.down em { color:var(--pc-peach); }
.pc-bar { position:relative; height:8px; background:linear-gradient(90deg,#ff9fb0 0 30%,#3a4784 30% 70%,#9be7c4 70% 100%); }
.pc-bar i { position:absolute; top:-4px; width:8px; height:16px; margin-left:-4px; background:#fff; box-shadow:0 0 0 2px #1b2142; }
.pc-foot { margin-top:16px; color:#8a97c8; font-size:.68rem; }
@keyframes pcBob { 0% { transform:translateY(0); } 100% { transform:translateY(-3px); } }
@keyframes pcSleep { 0% { transform:translateY(0); } 100% { transform:translateY(2px); } }
@keyframes pcRun { 0% { transform:translateY(0); } 100% { transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .px-teacher,.px-car.running { animation:none; } .pc-car { transition:none; } }
@media (max-width:820px) { .pc-stage { grid-template-columns:1fr; } .pc-teacher { flex-direction:column; align-items:center; } .pc-bubble::before { display:none; } }
.pc-rank { flex:none; padding:2px 6px; color:#1b2142; background:#8fb6ff; font:800 .62rem ui-monospace,Menlo,monospace; }
.pc-rank.first { background:#ffe08a; box-shadow:0 0 0 2px #d9b550; }
.pc-lane header strong { flex:1; min-width:0; }
/* Teacher avatar: the same cartoon teacher as the ซื้อขาย page, with a pixel ring */
.pc-teacher-art .teacher-avatar { display:block; border-radius:50%; box-shadow:0 0 0 4px #8fb6ff,0 0 0 8px #232b55; animation:pcBob 2.4s steps(2) infinite; }
.pc-teacher-art .teacher-avatar.mood-sleepy { animation:pcSleep 3.2s steps(2) infinite; }
@media (prefers-reduced-motion:reduce) { .pc-teacher-art .teacher-avatar { animation:none; } }
/* pause entries (split plan step 1) */
.racer-toolbar-actions { display:flex; gap:10px; align-items:center; }
.racer-pause { padding:9px 14px; border:1px solid #6d5a2a; border-radius:9px; color:#ffd98c; background:#2b2310; font-weight:800; cursor:pointer; }
.racer-pause[data-paused="true"] { color:#1a1203; background:#f2b84b; border-color:#f2b84b; }
.racer-pause:disabled { opacity:.55; cursor:wait; }
.racer-pause-banner { margin-top:10px; padding:9px 12px; border:1px solid #7a5b21; border-radius:9px; background:#2a2010; color:#ffd98c; font-size:.76rem; line-height:1.5; }
.racer-pause-banner[hidden] { display:none!important; }
.racer-pause-banner p { margin:0; }

/* ประวัติเป๋า dialog + its button on the Overview pixel corner */
.pc-wallet-btn { margin-left:auto; padding:5px 12px; font:800 .72rem ui-monospace,Menlo,monospace; color:#1b2142; background:var(--pc-mint); border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 -3px 0 0 #6fc9a0,0 3px 0 0 #6fc9a0,-3px 0 0 0 #6fc9a0,3px 0 0 0 #6fc9a0; }
.pc-wallet-btn:disabled { opacity:.55; cursor:not-allowed; }
.wh-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:16px; background:rgba(10,14,30,.6); }
.wh-card { width:min(720px,100%); max-height:88vh; display:flex; flex-direction:column; border-radius:14px; background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.wh-card header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.wh-card h3 { margin:0; font-size:1.05rem; }
.wh-close { border:0; background:transparent; color:inherit; font-size:1.1rem; cursor:pointer; padding:4px 8px; }
.wh-body { padding:14px 18px 18px; overflow:auto; }
.wh-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:10px; }
.wh-cards article { padding:10px 12px; border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; gap:2px; }
.wh-cards span { font-size:.76rem; opacity:.75; } .wh-cards strong { font-size:1rem; }
.wh-cards .up strong, .wh-card td.up { color:#2fd5c4; } .wh-cards .down strong, .wh-card td.down { color:#ff6b73; }
.wh-note { font-size:.78rem; opacity:.8; line-height:1.5; margin:8px 0; }
.wh-scroll { overflow:auto; max-height:40vh; }
.wh-card table { width:100%; border-collapse:collapse; font-size:.82rem; }
.wh-card th, .wh-card td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.wh-h { margin:14px 0 6px; font-size:.9rem; }
.wh-sum { width:100%; border-collapse:collapse; font-size:.86rem; }
.wh-sum th, .wh-sum td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); }
.wh-sum th { font-size:.74rem; opacity:.7; font-weight:600; }
.wh-sum td:nth-child(n+2), .wh-sum th:nth-child(n+2) { text-align:right; white-space:nowrap; }
.wh-total td { font-weight:800; font-size:.95rem; background:rgba(255,255,255,.04); }
.wh-sum tr.up td:nth-child(n+2) { color:#2fd5c4; } .wh-sum tr.down td:nth-child(n+2) { color:#ff6b73; }
.wh-sum tr.sub td { opacity:.8; font-size:.8rem; }
.wh-detail { margin-top:10px; } .wh-detail summary { cursor:pointer; font-size:.82rem; opacity:.85; }
.pc-badge.pc-alert { background:#ff6b73; color:#fff; box-shadow:0 -3px 0 0 #c94850,0 3px 0 0 #c94850,-3px 0 0 0 #c94850,3px 0 0 0 #c94850; }

/* "เงินของเรา" card on Overview */
.money-card { margin:0 0 16px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.money-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.money-card h3 { margin:0; font-size:1.05rem; }
.ms-link { border:1px solid var(--line); background:transparent; color:var(--cyan); border-radius:8px; padding:5px 10px; font-size:.78rem; cursor:pointer; }
.ms-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:10px; }
.ms-tile { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); display:flex; flex-direction:column; gap:2px; }
.ms-tile span { font-size:.78rem; color:var(--muted); }
.ms-tile strong { font-size:1.5rem; line-height:1.2; }
.ms-tile small { font-size:.78rem; color:var(--muted); min-height:1em; }
.ms-tile em { font-style:normal; font-size:.72rem; color:var(--muted); }
.ms-tile.big strong { font-size:1.9rem; }
.ms-small .ms-tile strong { font-size:1.15rem; }
.ms-tile.up strong { color:var(--cyan); } .ms-tile.down strong { color:var(--red); }
.ms-note { font-size:.76rem; color:var(--muted); line-height:1.5; margin:8px 0 0; }
.ms-details { margin-top:8px; font-size:.82rem; } .ms-details summary { cursor:pointer; color:var(--muted); }
.ms-details table { width:100%; border-collapse:collapse; margin-top:6px; } .ms-details td { padding:5px 8px; border-bottom:1px solid var(--line); }

/* "ใครเก่ง" scoreboard */
.sc-wrap { overflow-x:auto; }
.score-card table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:860px; }
.score-card th { text-align:left; font-size:.72rem; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.score-card th small, .score-card td small { font-weight:400; color:var(--muted); }
.score-card td { padding:8px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
.score-card .sc-name { white-space:normal; min-width:150px; } .score-card .sc-name small { display:block; }
.score-card .up { color:var(--cyan); } .score-card .down { color:var(--red); } .ms-dim { color:var(--muted); }
.score-card tr.sc-total td { background:rgba(255,255,255,.04); font-weight:700; }
.score-card tr.sc-archived td { opacity:.75; }
.sc-verdict { white-space:normal !important; min-width:170px; } .sc-verdict span { display:block; font-weight:700; }
.sc-verdict i { display:block; height:4px; margin:4px 0 2px; border-radius:2px; background:linear-gradient(90deg,var(--blue) var(--p),var(--line) var(--p)); }
.sc-verdict.good span { color:var(--cyan); } .sc-verdict.bad span { color:var(--red); } .sc-verdict.mid span { color:var(--amber); } .sc-verdict.few span { color:var(--muted); }

/* ทีมนักซิ่ง (cartoon crew, same look as the pixel teacher) */
.crew { margin:0 0 20px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#1b2142,#171c38); color:#e9eeff; }
.crew-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.crew-head h3 { margin:0; font-size:1.05rem; } .crew-head .eyebrow { color:#c4b5fd; letter-spacing:.2em; }
.crew-summary { margin:0; font-size:.82rem; color:#ffe08a; max-width:60ch; }
.crew-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
.crew-card { position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:end; padding:12px; background:#232b55; border-radius:12px; box-shadow:inset 0 0 0 2px #3a4784; }
.crew-card.leader { box-shadow:inset 0 0 0 2px #ffd166, 0 0 14px rgba(255,209,102,.25); }
.crew-card.mood-sleep { opacity:.8; } .crew-card.mood-cry { box-shadow:inset 0 0 0 2px #6b4a7a; } .crew-card.mood-sick { box-shadow:inset 0 0 0 2px #a8566c; }
.crew-crown { position:absolute; top:-10px; right:10px; padding:2px 10px; font-size:.72rem; font-weight:800; color:#2b2f55; background:#ffd166; border-radius:999px; }
.crew-art { display:flex; align-items:flex-end; } .crew-avatar { display:block; border-radius:50%; background:#17304a; }
.crew-card.mood-star .crew-avatar { animation:crew-bounce 1.1s ease-in-out infinite; } .crew-card.mood-cry .crew-avatar { animation:crew-sob 1.6s ease-in-out infinite; }
.crew-card.mood-sleep .crew-avatar { animation:crew-breathe 3.2s ease-in-out infinite; }
@keyframes crew-bounce { 50% { transform:translateY(-4px); } } @keyframes crew-sob { 50% { transform:translateY(2px) rotate(-2deg); } } @keyframes crew-breathe { 50% { transform:scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .crew-avatar { animation:none !important; } }
.crew-bubble { position:relative; padding:10px 12px; color:#2b2f55; background:#fff8e6; border-radius:10px; min-width:0; }
.crew-bubble::before { content:""; position:absolute; left:-7px; bottom:16px; width:12px; height:12px; background:#fff8e6; transform:rotate(45deg); }
.crew-name { margin:0 0 4px; font-weight:800; font-size:.88rem; } .crew-name small { font-weight:600; color:#6a6f95; margin-left:4px; font-size:.7rem; }
.crew-bubble ul { margin:0; padding:0; list-style:none; display:grid; gap:3px; } .crew-bubble li { font-size:.8rem; line-height:1.4; }
.crew-tag { margin:6px 0 0; font-size:.76rem; font-style:italic; color:#8a5a2b; }
.crew-card footer { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:2px; }
.crew-pnl { font:800 1rem ui-monospace,Menlo,monospace; } .crew-pnl.up { color:#9be7c4; } .crew-pnl.down { color:#ffb4a2; }
.crew-note { font-size:.7rem; color:#aab8e6; text-align:right; }
.crew-empty, .crew-foot { margin:8px 0 0; font-size:.74rem; color:#aab8e6; }
.sc-fold summary { cursor:pointer; font-size:.86rem; color:var(--muted); } .sc-fold summary .eyebrow { margin-right:8px; } .sc-fold[open] summary { margin-bottom:10px; }

/* money panel inside the pixel corner */
.pc-money { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.pc-money article { display:flex; flex-direction:column; gap:4px; padding:12px; background:var(--pc-bg2); box-shadow:0 -3px 0 0 #3a4784,0 3px 0 0 #3a4784,-3px 0 0 0 #3a4784,3px 0 0 0 #3a4784; }
.pc-money article > span { display:flex; align-items:center; gap:6px; color:var(--pc-soft); font-size:.7rem; }
.pc-money strong { font:800 1.25rem ui-monospace,Menlo,monospace; color:var(--pc-ink); }
.pc-money small { color:var(--pc-soft); font-size:.72rem; min-height:1em; } .pc-money em { font-style:normal; color:var(--pc-soft); font-size:.66rem; opacity:.85; }
.pc-money article.up strong { color:var(--pc-mint); } .pc-money article.down strong { color:var(--pc-peach); }

/* fixed card size so a changing line count does not move the cards around */
.crew-card { min-height:190px; contain:layout; }
.crew-bubble { min-height:120px; }
.crew-crown[hidden] { display:none; }

.racer-guard, .racer-guard-create { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:9px; padding:7px 9px; border:1px solid #2a4056; border-radius:8px; background:#0b1725; color:#c5d3e0; font-size:.68rem; }
.racer-guard-check { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.racer-guard-input, .racer-guard-amount input { width:74px; padding:3px 6px; border:1px solid #2a4056; border-radius:6px; background:#07101b; color:#e6eef7; font:inherit; }
.racer-guard-message { color:#8ea2b6; font-size:.62rem; }
.racer-guard-create { margin:10px 0; }
.racer-guard-create small { flex-basis:100%; color:#8ea2b6; line-height:1.45; }

.racer-grandma-call { padding:6px 11px; border:1px solid #6b5a2a; border-radius:8px; background:#2a2310; color:#ffd98a; font:inherit; font-size:.72rem; cursor:pointer; }
.racer-grandma-call[data-on="true"] { background:#3a2f12; border-color:#d9a93a; }
.racer-grandma-call:disabled { opacity:.55; cursor:not-allowed; }
.racer-grandma-panel { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:10px 0; padding:10px 12px; border:1px solid #6b5a2a; border-radius:10px; background:#17130a; color:#e8dcc0; }
.racer-grandma-face { font-size:2rem; line-height:1; }
.racer-grandma-body { display:flex; flex-direction:column; gap:3px; flex:1 1 220px; font-size:.72rem; }
.racer-grandma-body span, .racer-grandma-body small { color:#b9a97d; }
.racer-grandma-amount input { width:74px; padding:3px 6px; border:1px solid #6b5a2a; border-radius:6px; background:#0d0a04; color:#ffe9b8; font:inherit; }
.racer-grandma-total { display:flex; flex-direction:column; align-items:flex-end; font-size:.66rem; color:#b9a97d; }
.racer-grandma-total strong { font-size:1.15rem; color:#ffd98a; }
.racer-grandma-badge { display:flex; align-items:center; gap:7px; margin:6px 0 2px; padding:5px 8px; border:1px solid #d9a93a; border-radius:12px; background:#2a2310; color:#ffe9b8; font-size:.66rem; animation:grandma-bob 1.6s ease-in-out infinite; }
.racer-grandma-icon { font-size:1.25rem; line-height:1; }
@keyframes grandma-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .racer-grandma-badge { animation:none; } }

.grandma-report { border-color:#6b5a2a; background:#17130a; color:#e8dcc0; }
.grandma-report[hidden] { display:none; }
.gr-head { display:flex; align-items:center; gap:12px; }
.gr-face { font-size:2.2rem; line-height:1; }
.gr-head p { margin:2px 0 0; font-size:.78rem; }
.gr-on { color:#ffd98a; } .gr-off { color:#b9a97d; }
.gr-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:10px 0; }
.gr-stats article { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid #4a3f1f; border-radius:8px; background:#0d0a04; }
.gr-stats span, .gr-stats small { color:#b9a97d; font-size:.62rem; }
.gr-stats strong { font-size:1.05rem; }
.gr-tables { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.gr-tables h4 { margin:0 0 4px; font-size:.7rem; color:#ffd98a; }
.gr-tables table { width:100%; border-collapse:collapse; font-size:.66rem; }
.gr-tables th, .gr-tables td { padding:4px 6px; border-bottom:1px solid #2e2612; text-align:left; }

.grandma-svg { display:block; overflow:visible; }
.grandma-btn-icon { display:inline-flex; vertical-align:middle; }
.racer-grandma-call { display:inline-flex; align-items:center; gap:5px; }
.racer-grandma-icon, .racer-grandma-face, .gr-face { display:inline-flex; flex:0 0 auto; }
.grandma-coin { transform-origin:55px 55px; animation:grandma-coin 2.4s ease-in-out infinite; }
.grandma-spark { animation:grandma-spark 1.2s ease-in-out infinite; }
.grandma-eyes { animation:grandma-eyes 3.2s ease-in-out infinite; transform-origin:32px 32px; }
@keyframes grandma-coin { 0%,100% { transform:rotate(0); } 50% { transform:rotate(14deg) translateY(-1px); } }
@keyframes grandma-spark { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes grandma-eyes { 0%,88%,100% { transform:scale(1); } 94% { transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .grandma-coin, .grandma-spark, .grandma-eyes { animation:none; } }

.racer-grandma-panel { gap:16px; padding:14px 16px; }
.racer-grandma-body { gap:6px; }
.racer-grandma-bubble { position:relative; padding:9px 13px; border:2px solid #d9a93a; border-radius:14px; background:#fff6dc; color:#3b2a08; font-size:.82rem; font-weight:600; line-height:1.45; }
.racer-grandma-bubble::before { content:''; position:absolute; left:-9px; top:18px; border:8px solid transparent; border-right-color:#d9a93a; border-left:0; }
.racer-grandma-bubble[data-mood="grumpy"] { background:#ffe3df; border-color:#d94b4b; color:#4a1612; }
.racer-grandma-bubble[data-mood="grumpy"]::before { border-right-color:#d94b4b; }
.racer-grandma-bubble[data-mood="happy"], .racer-grandma-bubble[data-mood="excited"] { background:#fff1b8; }
.gr-face { margin-right:2px; }
.gr-say { margin:6px 0 0; padding:6px 10px; border-radius:10px; background:#fff6dc; color:#3b2a08; font-size:.74rem; font-weight:600; }
.grandma-happy .grandma-eyes, .grandma-excited .grandma-eyes { animation-duration:1.6s; }
.grandma-grumpy { animation:grandma-grump 2.8s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes grandma-grump { 0%,100% { transform:rotate(0); } 45% { transform:rotate(-2deg); } 55% { transform:rotate(2deg); } }
.grandma-happy, .grandma-excited { animation:grandma-hop 1.4s ease-in-out infinite; }
@keyframes grandma-hop { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .grandma-grumpy, .grandma-happy, .grandma-excited { animation:none; } }

/* Position cards are narrow: the grandma badge stacks (icon above, words below) instead of squeezing the words into a column. */
.racer-grandma-badge { flex-direction:column; align-items:center; gap:3px; text-align:center; padding:6px 6px; width:100%; box-sizing:border-box; }
.racer-grandma-badge .racer-grandma-say { font-size:.58rem; line-height:1.35; overflow-wrap:anywhere; }
.racer-grandma-badge .racer-grandma-icon svg { width:34px; height:34px; }

.racer-grandma-confirm, .racer-guard-confirm { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; padding:7px 10px; border:2px solid #d9a93a; border-radius:10px; background:#2a2310; color:#ffe9b8; font-size:.7rem; }
.racer-grandma-confirm[hidden] { display:none; }
.racer-guard-confirm:empty { display:none; }
.racer-guard-confirm { flex-basis:100%; }
.racer-grandma-confirm button, .racer-guard-confirm button { padding:4px 12px; font-size:.7rem; }

.racer-grandma-toast { margin:6px 0 0; padding:5px 10px; border-radius:8px; background:#2a2310; color:#ffe9b8; font-size:.68rem; }
.racer-grandma-toast[hidden] { display:none; }
/* The toolbar buttons (พักเข้าไม้ · เรียกอาม่า · STOP ALL) sit side by side: `.racer-toolbar > div` made this container a grid, which stacked them. */
.racer-toolbar > .racer-toolbar-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; }
.racer-toolbar-actions > button { white-space:nowrap; }

/* Grandma's button is on the LEFT, away from พักเข้าไม้ and STOP ALL on the right, so they cannot be pressed by mistake. */
.racer-toolbar > .racer-toolbar-left { display:flex; align-items:center; flex:0 0 auto; }
.racer-toolbar > .racer-toolbar-title { flex:1 1 auto; padding-left:18px; }
/* `display:flex` on these boxes overrode the `hidden` attribute, so the grandma panel stayed on screen after she was sent home. */
.racer-grandma-panel[hidden], .racer-grandma-confirm[hidden], .racer-guard-confirm[hidden], .racer-grandma-toast[hidden], .grandma-report[hidden] { display:none !important; }

/* Sleeping racer card: one line */
.racer-card-sleeping { display:flex; align-items:center; gap:10px; padding:8px 12px; min-height:0; opacity:.82; }
.racer-card-sleeping .racer-sleep-meta { flex:1 1 auto; color:#8ea2b6; font-size:.7rem; }
.racer-card-sleeping .racer-wake { padding:3px 10px; font-size:.7rem; }
.racer-sleep-icon { font-size:1.1rem; }
.racer-sleep-all { margin-left:12px; padding:4px 10px; border:1px solid #2a4056; border-radius:8px; background:#0b1725; color:#c5d3e0; font:inherit; font-size:.7rem; cursor:pointer; }
.racer-sleep-all[hidden] { display:none !important; }
.racer-card-sleeping { align-self:start; }
.racer-toolbar-title .racer-sleep-all { justify-self:start; margin-left:0; width:max-content; }
/* The global `table { min-width:820px }` pushed the grandma report tables (and the whole Overview) wider than the screen. */
.grandma-report { min-width:0; max-width:100%; overflow:hidden; }
.gr-tables { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.gr-tables > div { min-width:0; overflow-x:auto; }
.gr-tables table { min-width:0; width:100%; table-layout:auto; }
.gr-tables th, .gr-tables td { white-space:nowrap; }

.racer-money { grid-template-columns:repeat(2,minmax(0,1fr)); } /* วงเงิน · ยอด (the per-racer P/L cell was removed) */

/* "เก็บล่าสุด": five rows, one line each; the rest fold away. */
.gr-tables td, .gr-tables th { padding:3px 6px; line-height:1.25; }
.gr-more { margin-top:4px; font-size:.64rem; color:#b9a97d; }
.gr-more summary { cursor:pointer; }
.gr-more table { width:100%; }

.racer-drain, .racer-drain-cancel { padding:6px 10px; border:1px solid #6b5a2a; border-radius:8px; background:#1d1709; color:#ffd98a; font:inherit; font-size:.68rem; cursor:pointer; }
.racer-drain.armed { background:#3a2f12; border-color:#d9a93a; }
.racer-draining { color:#ffd98a; font-size:.66rem; }

.racer-drain-banner { display:flex; flex-direction:column; gap:4px; margin:10px 0; padding:10px 12px; border:2px solid #d9a93a; border-radius:10px; background:#2a2310; color:#ffe9b8; font-size:.72rem; }
.racer-drain-banner strong { font-size:.82rem; color:#ffd98a; }

.racer-history-pager { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; font-size:.72rem; color:#8ea2b6; }
.racer-history-pager[hidden] { display:none !important; }
.racer-history-pager button { padding:4px 12px; font-size:.7rem; }
.racer-history-pager button:disabled { opacity:.45; cursor:not-allowed; }

/* ===== สายซิ่ง compact layout (2026-10-06): fewer words, bigger live numbers, details behind a button ===== */
.racer-summary-main { grid-template-columns: 1.6fr 1fr 1fr; }
.racer-summary-main article strong { font-size: 1.35rem; }
.racer-summary-main .racer-real-pnl strong { font-size: 1.7rem; }
.racer-summary-more { margin: 6px 0 4px; color:#8ea2b6; font-size:.7rem; }
.racer-summary-more > summary { cursor:pointer; width:max-content; }
.racer-summary-more .racer-summary { margin-top:8px; }
.racer-card-compact { display:flex; flex-direction:column; gap:10px; }
.racer-card-compact .racer-card-head h3 { font-size:1.05rem; margin:0; }
.racer-sub { display:block; margin-top:2px; color:#8ea2b6; font-size:.66rem; }
.racer-bignum { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.racer-bignum strong { font:800 1.9rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.02em; }
.racer-bignum strong.positive { color:#65e4d7; } .racer-bignum strong.negative { color:#ff8e96; } .racer-bignum strong.neutral { color:#e6eef7; }
.racer-bignum span { color:#8ea2b6; font-size:.68rem; }
.racer-pills { display:flex; flex-wrap:wrap; gap:6px; }
.racer-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #2a4056; border-radius:999px; background:#0b1725; color:#c5d3e0; font:inherit; font-size:.68rem; cursor:pointer; transition:transform .15s; }
.racer-pill:hover { transform:translateY(-1px); }
.racer-pill b { font-weight:700; color:#e6eef7; }
.racer-pill.up { border-color:#1f6f66; background:#0b2422; } .racer-pill.up span { color:#65e4d7; }
.racer-pill.down { border-color:#6f2a33; background:#24101a; } .racer-pill.down span { color:#ff8e96; }
.racer-pill.near { border-color:#d9a93a; box-shadow:0 0 0 2px rgba(217,169,58,.25); animation:grandma-bob 1.6s ease-in-out infinite; }
.racer-pill i { font-style:normal; }
.racer-drain-line { padding:6px 10px; border-radius:8px; background:#2a2310; color:#ffd98a; font-size:.68rem; }
.racer-card-footer { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.racer-card-footer button { padding:6px 12px; font-size:.7rem; }
.racer-card-footer .racer-start { margin-right:auto; }
.racer-details { border-top:1px dashed #2a4056; padding-top:10px; }
.racer-grandma-settings { font-size:.68rem; color:#b9a97d; }
.racer-grandma-settings > summary { cursor:pointer; width:max-content; }
.racer-history-fold > summary { cursor:pointer; list-style:none; }
.racer-history-fold > summary::-webkit-details-marker { display:none; }
@media (max-width: 640px) { .racer-summary-main { grid-template-columns: 1fr 1fr; } .racer-summary-main .racer-real-pnl { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .racer-pill.near { animation:none; } }

.racer-card-compact .racer-card-head { display:flex; align-items:center; gap:10px; }
.racer-card-compact .racer-card-head > div:nth-child(2) { flex:1 1 auto; min-width:0; }
.racer-face { flex:0 0 58px; width:58px; height:58px; border-radius:50%; overflow:hidden; background:#0b1725; border:2px solid #2a4056; }
.racer-face:empty { display:none; }
.racer-face svg { display:block; width:100%; height:100%; }