:root {
  color-scheme: light;
  --bg: #fff6dc;
  --surface: #fffdf5;
  --surface-2: #fff1c9;
  --line: #1b1b1b;
  --text: #141414;
  --muted: #4f4a3c;
  --ink: #141414;
  --cyan: #0c8f83;
  --cyan-fill: #2ee6d0;
  --amber: #f2a900;
  --red: #d7263d;
  --blue: #1f6fe5;
  --pink: #ff6fae;
  --yellow: #ffd23f;
  --sky: #8fd6ff;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle, #f2d98a 1.4px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg, #fff6dc 0, #fffaf0 100%); background-attachment: fixed; 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: 4px solid var(--ink); background: linear-gradient(100deg, #ffd23f 0, #ffe27a 55%, #fff0a8 100%); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-4deg); }
.brand-mark img { display: block; width: 100%; height: 100%; }
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: #7a4a00; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.snapshot { color: var(--ink); font-size: .88rem; font-weight: 700; padding: 9px 13px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 3px 3px 0 var(--ink); 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 #bc7d051d; }
.status-dot.live { background: #19c9b5; box-shadow: 0 0 0 4px #22d8c61d; }
.tabs { display: flex; gap: 8px; padding: 12px clamp(20px, 4vw, 64px); overflow-x: auto; border-bottom: 4px solid var(--ink); background: #fffdf5; position: sticky; top: 0; z-index: 10; }
.tab { border: 2px solid transparent; color: var(--ink); background: transparent; padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-weight: 800; font-size: .9rem; }
.tab:hover { color: var(--ink); background: #e0f4ff; border-color: var(--ink); }
.tab.active { color: var(--ink); background: var(--cyan-fill); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
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: #bccde3; color: #283747; }
.pill.approved { background: #c0ede9; color: #15a092; }
.pill.waiting, .pill.condition { background: #e8d7b6; color: #855900; }
.pill.closed { background: #bdc5d2; color: #181e28; }
.pill.demo { background: #e7d4c1; color: #754700; border: 1px solid #e3ba8b; }
.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, #fefbf2, #fefcf5); 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: #52667d; 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: #fefcf5; }
.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: #b8cae1; 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: #fefcf5; stroke-width: 4; }
.chart-axis { display: flex; justify-content: space-between; color: #60768e; 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: #003c83; background: #a3c5eb; }.team-icon.gold { color: #885b00; background: #e8d7b6; }.team-icon.fx { color: #15a092; background: #c0ede9; }
.warning { margin-top: 14px; padding: 16px 19px; border-left: 3px solid var(--amber); background: #fefcf5; display: flex; gap: 14px; align-items: baseline; color: #574215; }
.warning span { color: #846c3e; 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: #3d5874; background: #fefbf3; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
td { padding: 15px 16px; border-top: 1px solid #bdcee4; color: #161f29; font-size: .88rem; line-height: 1.45; }
tbody tr:hover { background: #fefbf2; }
.num { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #090f15; }
.proposal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.proposal { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fefcf5; }
.proposal.open { border-left: 3px solid var(--cyan); }.proposal.closed-card { border-left: 3px solid #748499; }
.proposal-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.proposal small { color: #556a80; font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.proposal h3 { margin-top: 6px; font-size: 1.25rem; }.proposal h3 span { color: #455971; 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: #fefbf3; border-radius: 8px; }
.proposal dt { color: #556a80; font-size: .68rem; }.proposal dd { margin: 4px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.proposal > p { color: #42566c; 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, #fefbf2, #fefcf5); }
.rule-card > span { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }
.rule-card h3 { margin-top: 28px; color: #2e3f51; }.rule-card strong { display: block; margin-top: 9px; font-size: 1.9rem; }.rule-card p { margin-top: 11px; color: #51667d; line-height: 1.55; font-size: .86rem; }
.rule-card.wide { grid-column: span 2; min-height: 150px; }.rule-card.danger { border-color: #d8a2ad; background: #fefcf5; }.rule-card.danger > span { color: var(--red); }
footer { padding: 20px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: #62778e; 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: #fefcf5; }
.chart-controls { padding: 18px; }
.control-group { display: grid; gap: 10px; }
.control-group label, .control-label { color: #3f5267; font-size: .76rem; font-weight: 800; letter-spacing: .05em; }
.control-group select { width: 100%; min-height: 42px; border: 1px solid #a2bad7; border-radius: 8px; padding: 0 10px; color: var(--text); background: #fefbf3; }
.control-divider { height: 1px; margin: 17px 0; background: var(--line); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 3px; background: #fffcf6; border-radius: 8px; }
.range-button, .tool-button, .secondary-button, .primary-button, .icon-button { border: 1px solid transparent; color: #283747; background: transparent; cursor: pointer; border-radius: 7px; }
.range-button { min-height: 34px; font-size: .76rem; font-weight: 800; }
.range-button.active { color:var(--ink);background:var(--cyan-fill); }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool-button { min-height: 54px; padding: 7px; border-color: #aac2dd; background: #fefbf3; font-size: .7rem; display: grid; place-items: center; gap: 2px; }
.tool-button span { font-size: 1.2rem; color: #405d7b; line-height: 1; }
.tool-button:hover, .tool-button.active { color: var(--text); border-color: var(--cyan); background: #fefbf2; }
.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: #a4bbd6; background: #fefbf3; }
.primary-button { margin-top: 4px; color:var(--ink);background:var(--cyan-fill); }
.secondary-button:hover { border-color: #6d8eaf; 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: #200083; }.legend-dot.ema50 { background: #11aab9; }.legend-dot.ema200 { background: #b98305; }.legend-dot.sr { background: #870031; }
.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: #536980; font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.chart-actions { display: flex; gap: 6px; }
.icon-button { min-height: 34px; padding: 0 10px; border-color: #a8c0db; background: #fefbf3; font-size: .76rem; }
.icon-button:hover { color: var(--text); border-color: #6d8eaf; }
.canvas-shell { position: relative; height: clamp(430px, 58vh, 650px); min-height: 430px; background: #fffcf6; 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: #09121a; background: #fffcf6e8; border: 1px solid #8faece; 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: #455971; 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: #556a80; 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: #465a70; 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 #22d8c621; }
.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: #60768e; 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: #fefbf3; }
.flow-title strong { font-size: .72rem; }.flow-title span { color: #61778f; 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: #131a22; }.dom-row strong { text-align: right; }.dom-row.bid strong { color: #1ba77d; }.dom-row.ask strong { color: #7b000c; }
.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 #bfd2e8; 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: #5d738b; }.trade-row strong { text-align: right; }.trade-row b { text-align: right; color: #131a22; }.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: #61778f; font-size: .7rem; text-align: center; }
.flow-caveat { padding: 11px 12px; color: #62778e; font-size: .64rem; line-height: 1.45; }
.technical-team-card { margin-top: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fefcf5; }
.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 #b2c8e1; border-radius: 10px; background: #fefbf3; }
.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: #4e6278; 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: #fffcf6; color: #273646; font-size: .72rem; font-weight: 700; }
.team-output-flow b { color: var(--cyan); }
.method-note { margin-top: 13px; color: #455971; font-size: .78rem; line-height: 1.55; }

.live-alert { margin-bottom: 14px; padding: 15px 18px; border: 1px solid #e2c088; border-left: 4px solid var(--amber); border-radius: 10px; background: #fefcf5; display: flex; gap: 12px; align-items: baseline; }
.live-alert strong { white-space: nowrap; }.live-alert span { color: #7f683a; font-size: .82rem; line-height: 1.5; }
.live-alert.danger { margin: 14px 0 0; border-color: #d599a5; border-left-color: var(--red); background: #fefcf5; }.live-alert.danger span { color: #5f363e; }
.live-alert.ready { border-color: #95e4d9; border-left-color: var(--cyan); background: #fefcf5; }.live-alert.ready span { color: #34615b; }
.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: #fefcf5; display: grid; align-content: space-between; }
.live-metrics span, .live-metrics small { color: #50657c; 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: #3f5267; font-size: .75rem; font-weight: 750; }
.live-login-form input { min-height: 44px; padding: 0 12px; border: 1px solid #a2bad7; border-radius: 8px; color: var(--text); background: #fffcf6; }
.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: #fefbf3; display: grid; gap: 5px; }.live-account span { color: #556a80; 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: #4e647b; font-size: .75rem; line-height: 1.45; }
.danger-button { min-height: 34px; padding: 6px 10px; border: 1px solid #cb8793; border-radius: 7px; color: #460006; background: #fefcf4; font-size: .7rem; font-weight: 800; cursor: pointer; }.danger-button:disabled { opacity: .55; cursor: not-allowed; }.danger-button.off { color: #188f81; border-color: #94ded5; background: #fefcf4; }
.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 #b4c9e2; border-radius: 8px; display: flex; align-items: center; gap: 10px; color: #3d5063; font-size: .75rem; }.gate-list i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #8598ac; }.gate-list i.pass { background: var(--cyan); box-shadow: 0 0 0 3px #22d8c61c; }.gate-list i.block { background: var(--red); box-shadow: 0 0 0 3px #94000818; }
.live-queue-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fefcf5; 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 #abc3dd; border-radius: 10px; background: #fefbf3; display: grid; grid-template-columns: 1.2fr repeat(4, .8fr) auto; align-items: center; gap: 12px; }.live-order span { color: #556a80; 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 #8fadcc; border-radius: 14px; color: var(--text); background: #fefcf5; box-shadow: 0 24px 80px #000b; }.live-confirm-dialog::backdrop { background: #fffdf8bf; 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: #fefbf3; line-height: 1.7; font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }.confirm-check { display: flex; gap: 9px; align-items: flex-start; color: #354657; 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 #91b4d1; border-radius: 14px; background: linear-gradient(155deg, #fefbf2, #fefcf5 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 #e1c189; border-left: 4px solid var(--amber); border-radius: 8px; background: #fefcf5; color: #574215; font-size: .8rem; line-height: 1.5; }.order-draft-safety strong { white-space: nowrap; }.order-draft-safety span { color: #7e6635; }
.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: #3f5267; 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 #a2bad7; border-radius: 8px; color: var(--text); background: #fffcf6; font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }.draft-field input:focus, .draft-field select:focus { outline: 2px solid #22d8c677; border-color: var(--cyan); }.draft-field small { color: #556a80; font-size: .66rem; line-height: 1.4; }
.draft-static { min-height: 42px; display: flex; align-items: center; padding: 8px 10px; border: 1px solid #b0c5e0; border-radius: 8px; color: #17202b; background: #fefbf3; 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: #50657c; 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: #fffcf6; }.draft-quote-row span { color: #51667d; font-size: .68rem; }.draft-quote-row strong { color: #0b1824; 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: #fefbf3; }.draft-preview-values dt { color: #51667d; font-size: .64rem; line-height: 1.35; }.draft-preview-values dd { margin: 5px 0 0; color: #0b131c; font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }.draft-math-status { min-height: 44px; padding: 10px 11px; border: 1px solid #a9bfda; border-radius: 8px; color: #2b3949; background: #fefcf5; font-size: .72rem; line-height: 1.5; }.draft-math-status.warn { border-color: #e1c189; color: #574215; background: #fefcf5; }.draft-math-status.block { border-color: #cb8793; color: #3b0005; background: #fefcf4; }
.saved-drafts-section { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fefcf5; 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 #b0c5e0; border-radius: 8px; background: #fefbf3; }.saved-draft-card span { display: block; color: #51667d; font-size: .63rem; }.saved-draft-card strong { display: block; margin-top: 4px; color: #09131e; font: 700 .73rem ui-monospace, SFMono-Regular, Menlo, monospace; }.saved-draft-card button { width: auto; margin: 0; padding: 7px 10px; border: 1px solid #bfa8b2; color: #331015; background: #fefcf4; font-size: .67rem; }
.draft-demo-notice { margin-top: 10px; padding: 12px 14px; border: 1px solid #cb8793; border-left: 4px solid var(--red); border-radius: 8px; color: #330003; background: #fefcf4; font-size: .76rem; line-height: 1.55; }.draft-demo-notice[hidden] { display: none; }
.order-draft-summary { margin-top: 12px; padding: 18px; border: 1px solid #e2c088; border-radius: 12px; background: linear-gradient(150deg, #fefcf5, #fefcf5 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 #b2c4d9; border-radius: 8px; background: #fefcf5; }.draft-summary-grid dt { color: #51667d; font-size: .66rem; line-height: 1.4; }.draft-summary-grid dd { margin: 6px 0 0; color: #060f19; 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 #9fbed8; border-top: 3px solid var(--cyan); border-radius: 14px; background: linear-gradient(145deg, #fefbf2, #fefcf5); 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: #3e5165; 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: #fffcf6; }
.signal-decision dt, .signal-plan span { color: #556a80; 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: #44586e; 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: #233c46; background: #c5dfec; font: 700 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.signal-method small { display: block; margin-top: 14px; color: #957535; 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 #b4c9e2; border-radius: 9px; display: flex; gap: 11px; align-items: flex-start; background: #fefcf5; }
.signal-checklist i { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: #8598ac; }.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: #51667d; 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: #fefbf3; 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: #4e6379; 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 #73889f; background: #fefcf5; display: flex; gap: 13px; align-items: baseline; color: #1a232b; }
.signal-provenance span { color: #51667d; 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: #fefcf5; }
.agent-summary span, .agent-summary small { color: #51667d; 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: #fefcf5; overflow: hidden; }
.agent-updated { color: #52677e; 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 #abc2db; background: #fefcf5; 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: #607890; font-size: 1.25rem; }
.agent-flow-step span { color: #495d73; 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: #73889e; box-shadow: 0 0 0 4px #73889e1c; }
.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 #22d8c61c; }
.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 #9400081c; }
.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 #bc7d051c; }
.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 #b0c7e0; border-radius: 14px; background: linear-gradient(145deg, #fefbf3, #fefcf5); 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 #90b3d1; border-radius: 11px; display: grid; place-items: center; color: var(--cyan); background: #fefbf2; font: 800 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-identity h3 { font-size: .93rem; }
.agent-identity span { display: block; margin-top: 4px; color: #556a80; font-size: .68rem; }
.agent-status { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; color: #283745; background: #b4c8df; 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: #0a3d37; background: #c1eae7; }
.agent-status.blocking, .agent-status.locked, .agent-status.degraded { color: #340003; background: #dcb3bc; }
.agent-status.awaiting_user { color: #432d00; background: #e2d2b6; }
.agent-output { min-height: 48px; color: #141d25; 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: #fffcf6; }
.agent-facts span { display: block; color: #62788f; font-size: .62rem; }
.agent-facts strong { display: block; margin-top: 5px; overflow: hidden; color: #273746; 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: #56262a; background: #fefcf4; 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: #fefcf5; 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: #fefcf5; display: grid; align-content: space-between; gap: 8px; }
.backtest-metrics span, .backtest-metrics small { color: #50657c; 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: #51667d; font-size: .72rem; }
.backtest-oos { padding: 11px 18px; border-top: 1px solid var(--line); color: #3b4e61; background: #fefcf5; font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; }
.backtest-caveat { padding: 12px 18px; border-top: 1px solid var(--line); color: #62778e; 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: var(--ink); }

.testnet-heading { align-items: center; }
.testnet-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill.testnet-pill { color: #71540a; border: 1px solid #e2c17a; background: #fefbf2; }
.pill.blocked-pill { color: #340003; border: 1px solid #cb8793; background: #fefcf4; }
.testnet-safety { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; padding: 15px 18px; border: 1px solid #e2c17a; border-left: 4px solid #af7908; border-radius: 10px; color: #694f0d; background: #fefbf3; line-height: 1.5; }
.testnet-safety strong { font-size: .9rem; }
.testnet-safety span { color: #7f6a2f; 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 #e3d1a7; border-radius: 12px; background: #e3d1a7; }
.testnet-status-grid article { min-width: 0; min-height: 100px; padding: 14px; display: grid; align-content: space-between; gap: 7px; background: #fefcf5; }
.testnet-status-grid span, .testnet-status-grid small { color: #8d7e5a; font-size: .68rem; }
.testnet-status-grid strong { color: #261f0d; font: 800 .84rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-status-grid .testnet-positive { color: #237563; }
.testnet-status-grid .testnet-negative { color: #460006; }
.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: #d7d0c0; background: linear-gradient(145deg, #fefcf4, #fefcf5); }
.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: #45596e; font-size: .72rem; line-height: 1.5; }
.testnet-login-form label { color: #897944; font-size: .75rem; font-weight: 750; }
.testnet-login-form input { min-height: 44px; padding: 0 12px; border: 1px solid #d5c295; border-radius: 8px; color: var(--text); background: #fffcf6; }
.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: #6b5a27; 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 #bcc2cb; border-radius: 8px; background: #fefcf5; }
.testnet-balances span { color: #988963; font-size: .67rem; }
.testnet-balances strong { color: #2e2612; font: 750 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-balances small { color: #5f6b78; 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 #d5c295; border-radius: 8px; color: var(--text); background: #fffcf6; }
.testnet-form-grid .draft-field input:focus, .testnet-form-grid .draft-field select:focus, .testnet-login-form input:focus { outline: 2px solid #af790880; border-color: #af7908; }
.testnet-prepare-button { margin-top: 14px; color: #fffcf6; background: #af7908; }
.testnet-prepare-button:disabled { opacity: .45; cursor: not-allowed; }
.testnet-orders-section { margin-top: 14px; overflow: hidden; border: 1px solid #ddcfb0; border-radius: 12px; background: #fefcf5; }
.testnet-orders { display: grid; gap: 9px; padding: 13px; }
.testnet-order-row { min-width: 0; padding: 14px; border: 1px solid #d8ccb2; border-radius: 9px; background: #fefcf4; }
.testnet-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.testnet-order-head > strong { color: #7a5a0e; 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: #fffcf6; }
.testnet-order-values dt { color: #a19268; font-size: .62rem; }
.testnet-order-values dd { margin: 4px 0 0; color: #14191e; font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-resume-confirm { width: auto; margin-top: 10px; border-color: #e4c58a; color: #74550c; }
.testnet-unresolved { margin-top: 10px; padding: 9px 10px; border: 1px solid #cb8793; border-radius: 7px; color: #340003; background: #fefcf4; 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 #e3dac7; border-radius: 9px; color: #6c5c31; background: #fffcf6; font-size: .72rem; line-height: 1.5; }
.testnet-boundary strong { white-space: nowrap; color: #694f0d; }
.testnet-boundary code { color: #71540a; }
.testnet-confirm-dialog { width: min(540px, calc(100% - 28px)); padding: 0; border: 1px solid #e2c17a; border-radius: 14px; color: var(--text); background: #fefcf5; box-shadow: 0 24px 80px #000b; }
.testnet-confirm-dialog::backdrop { background: #fffdf8c9; backdrop-filter: blur(4px); }
.testnet-confirm-dialog form { padding: 22px; }
.testnet-dialog-label { color: #af7908; 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: #886814; font-size: .76rem; line-height: 1.5; }
.testnet-confirm-details { margin: 14px 0; padding: 12px; border: 1px solid #e0d7bd; border-radius: 8px; color: #2e2612; background: #fffcf6; 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: #2e2612; font-size: .76rem; font-weight: 700; }
.testnet-pin-input { width: 100%; padding: 11px 12px; border: 1px solid #8894a6; border-radius: 8px; color: #71540a; background: #fffcf6; font: 700 1.25rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .45em; }
.testnet-pin-input:focus { outline: 2px solid #af7908; outline-offset: 2px; }
.testnet-confirm-check { display: flex; gap: 9px; align-items: flex-start; color: #353d46; font-size: .76rem; line-height: 1.45; }
.testnet-confirm-check input { accent-color: #af7908; }
.testnet-confirm-dialog .primary-button { color: #fffcf6; background: #af7908; }
.testnet-confirm-dialog .primary-button:disabled { opacity: .45; cursor: not-allowed; }
.testnet-audit-card { margin: 14px 0; padding: 16px; border: 1px solid #a9b5c8; border-left: 4px solid #254173; border-radius: 12px; background: linear-gradient(145deg, #fefcf4, #fefcf5); }
.testnet-audit-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testnet-audit-heading h3 { margin: 2px 0 4px; color: #09121d; font-size: .98rem; }
.testnet-audit-heading small, .testnet-audit-time { color: #455466; 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 #b4bcc8; border-radius: 7px; background: #fffcf6; }
.testnet-audit-check strong { flex: 0 0 68px; color: #341417; font-size: .65rem; }
.testnet-audit-check span { color: #384351; font-size: .68rem; line-height: 1.4; }
.testnet-audit-check.pass { border-color: #a7d0c8; }
.testnet-audit-check.pass strong { color: #237563; }
.testnet-audit-check.block { border-color: #bf97a0; }
.testnet-audit-events { margin-top: 10px; color: #2b3644; 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 #bfcad8; }
.testnet-audit-event strong { color: #161e29; font: 700 .65rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.testnet-audit-event span { color: #7a5a0e; font-size: .65rem; }
.testnet-audit-event small { color: #5f6d7d; font-size: .62rem; }
.live-message.error { color: #460006; }
@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: #71540a; border: 1px solid #e2c17a; background: #fefbf2; }
.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: #060f19; font: 800 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.live-market-pair { color: #455971; font: 700 .78rem sans-serif; }
.live-reference-price { display: grid; gap: 5px; margin-top: 22px; }
.live-reference-price > span { color: #455971; font-size: .72rem; }
.live-reference-price strong { color: #06101a; 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: #556a80; 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 #b2c8e1; border-radius: 8px; background: #fefbf3; }
.live-limit-grid dt { color: #50657c; font-size: .65rem; }
.live-limit-grid dd { margin: 5px 0 0; color: #08141e; 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: #50657c; }
.live-account div strong { margin-top: 2px; font-size: .76rem; overflow-wrap: anywhere; }
.live-account div small { color: #556a80; 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: #50657c; font-size: .62rem; }
.live-ticket-heading h4 { color: #06101a; 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: #fffcf6; }
.live-ticket-values dt { color: #556a80; font-size: .63rem; line-height: 1.35; }
.live-ticket-values dd { margin: 5px 0 0; color: #0a121b; 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: #3e5165; font-size: .69rem; line-height: 1.5; overflow-wrap: anywhere; }
.live-ticket-source a { color: #23746b; text-decoration: underline; text-underline-offset: 2px; }
.live-ticket-plan-note { padding: 9px 10px; border: 1px solid #e1c189; border-radius: 7px; color: #614b17; background: #fefcf5; }
.live-ticket-action { display: grid; gap: 7px; }
.live-order-action { width: 100%; min-height: 48px; margin: 0; color:var(--ink);background:var(--cyan-fill); font-weight: 850; }
.live-order-action.live-sell-action { color: #fefcf5; background: #880009; }
.live-order-action:disabled { opacity: .48; cursor: not-allowed; }
.live-ticket-next-step { color: #23746b; text-align: center; }
.live-ticket-block { color: #3c0005; text-align: center; }
.live-deep-link-notice { margin: 12px 14px 0; padding: 10px 12px; border: 1px solid #e1c189; border-radius: 8px; color: #574215; background: #fefcf5; 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: #fefcf5; }
.live-advanced-details > summary, .live-drafts-details > summary { min-height: 48px; padding: 13px 16px; color: #3b4c60; 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: #455971; font-size: .7rem; }
.live-drafts-details[open] > summary.order-draft-heading::after { content: 'ปิด'; }
.live-draft-title { display: block; margin-top: 4px; color: #09121c; 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: #a5b4c7; background: linear-gradient(150deg, #fefcf4, #fffcf6); }
.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: #3e5165; font-size: .75rem; font-weight: 750; }
.testnet-market-heading select { min-width: 175px; min-height: 44px; padding: 0 12px; border: 1px solid #a2bad7; border-radius: 8px; color: var(--text); background: #fffcf6; 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 #af7908; 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: #495c71; font-size: .7rem; }
.testnet-market-price strong { color: #06101a; 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: #556a80; font-size: .66rem; }
.testnet-chart-empty { min-height: 245px; display: grid; align-content: center; justify-items: center; gap: 9px; padding: 20px; border: 1px solid #bbcde1; border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 48px, #b6c6dd55 49px 50px), repeating-linear-gradient(90deg, transparent 0 65px, #b6c6dd55 66px 67px), #fefcf5; text-align: center; }
.testnet-chart-empty > span { color: #6d889f; font-size: 2.4rem; line-height: 1; }
.testnet-chart-empty strong { color: #2a3948; font-size: .86rem; }
.testnet-chart-empty small { max-width: 340px; color: #5b7086; 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: #51667d; font-size: .67rem; }
.testnet-market-limits strong { color: #0c1620; }
.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: #0e1821; 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: #45596e; }
.testnet-access-card .testnet-primary-balance strong { color: #09151e; }
.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: #081018; font-size: 1rem; }
.testnet-order-type { color: #475a6e; font-size: .69rem; }
.testnet-side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 15px 0; padding: 4px; border-radius: 9px; background: #fffcf6; }
.testnet-side-button { min-height: 44px; border: 0; border-radius: 7px; color: #425366; background: transparent; font-size: .83rem; font-weight: 800; cursor: pointer; }
.testnet-side-button.buy.selected { color: #19623c; background: #c8e7df; box-shadow: inset 0 0 0 1px #93d0b3; }
.testnet-side-button.sell.selected { color: #340003; background: #ddc2cb; box-shadow: inset 0 0 0 1px #bf8a95; }
.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 #af790880; border-color: #af7908; }
.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 #a2bad7; border-radius: 7px; color: #17242e; background: #fefcf5; 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: #51667d; 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 #adc2da; border-radius: 8px; background: #fefcf5; }
.testnet-order-estimate > span, .testnet-order-estimate > small { color: #50657c; font-size: .67rem; }
.testnet-order-estimate > strong { color: #09131d; 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 #76bfae; border-radius: 6px; color: #276254; background: #fefcf5; font-size: .69rem; line-height: 1.45; }
.testnet-order-block.blocked { border-left-color: #ca9f50; color: #604b19; background: #fefcf4; }
.testnet-prepare-button { min-height: 48px; font-size: .87rem; }
.testnet-prepare-button:focus-visible, .testnet-login-form button:focus-visible { outline: 2px solid #af7908; 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 #a2bad7; border-radius: 6px; background: #fefcf5; }
.testnet-orders-section { margin-top: 14px; }
.testnet-secondary-details { margin-top: 12px; padding: 12px 14px; border: 1px solid #b0c2d8; border-radius: 10px; background: #fefcf5; color: #172029; }
.testnet-secondary-details > summary { color: #374655; 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: #45596e; 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: #fefcf5; }
@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: #45596e; 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:#fffcf6}
.paper-subtab{border:0;border-radius:8px;padding:10px 16px;color:#384d64;background:transparent;font-weight:750;cursor:pointer}
.paper-subtab.active{color:var(--ink);background:var(--cyan-fill)}
.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:#44586e;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,#fefbf2,#fefcf5)}
.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:#51667c;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:#4e6278;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 #b5c8e1}
.paper-ranges{display:flex;gap:5px}
.paper-ranges button{min-width:44px;padding:8px 10px;border:1px solid #aabfd7;border-radius:7px;color:#42576c;background:#fefcf5;font-size:.78rem;font-weight:800;cursor:pointer}
.paper-ranges button.active{border-color:#22d8c6;color:#fffcf6;background:#22d8c6}
.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 #bfd0e4;color:#455971;font:.66rem ui-monospace,monospace}
.paper-chart-note{margin-top:10px;color:#576f87;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:#71500b;background:#fefbf2;font-size:.68rem;font-weight:800}
.teacher-reasons{display:grid;gap:7px;margin:14px 0 0;padding-left:18px;color:#121c25;font-size:.75rem;line-height:1.5}
.teacher-reasons li::marker{color:var(--cyan)}
.teacher-meta{margin-top:11px;color:#54697f;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 #aec4dc;border-radius:8px;color:#455971;background:#fefcf5;font-size:.62rem;line-height:1.4}
.teacher-verdicts strong{display:block;margin-top:4px;color:#090f15;font-size:.78rem}
.teacher-use,.paper-review-button{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:9px;color:#fffcf6;background:linear-gradient(135deg,#19c5ad,#39dbc7);font-weight:850;cursor:pointer}
.teacher-use:disabled{color:#647587;background:#b8c8dc;cursor:not-allowed}
.teacher-use-hint{display:block;margin-top:6px;color:#54697f;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 #a3b5cd;border-radius:9px;color:#2d3b4b;background:#fefcf4;font-size:.75rem;font-weight:800;cursor:pointer}
.paper-sides button[data-plan-side="LONG"].active{color:#fffcf6;background:#1bbc84;border-color:#1bbc84}
.paper-sides button[data-plan-side="SHORT"].active{color:#0a0a0a;background:#b41b2f;border-color:#b41b2f}
.paper-short-note{margin-top:8px;padding:8px 9px;border-left:3px solid var(--red);color:#370005;background:#fefcf4;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:#455971;font-size:.69rem}
.paper-plan-form input{min-width:0;width:100%;height:41px;padding:8px 10px;border:1px solid #a1b7d1;border-radius:8px;outline:none;color:#070e15;background:#fffcf6;font:700 .8rem ui-monospace,monospace}
.paper-plan-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #22d8c626}
.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 #afc5dd;border-radius:8px;background:#fefcf5}
.paper-math span{display:block;color:#51667c;font-size:.61rem}
.paper-math strong{display:block;margin-top:4px;color:#080f17;font:750 .76rem ui-monospace,monospace;overflow-wrap:anywhere}
.paper-plan-status{grid-column:1/-1;margin:0;padding:9px 10px;border:1px solid #e2c088;border-radius:8px;color:#5b4617;background:#fefcf5;font-size:.67rem;line-height:1.5}
.paper-plan-status.good{border-color:#8ddeca;color:#166e5c;background:#fefbf3}
.paper-plan-status.block{border-color:#cb8793;color:#3b0005;background:#fefcf4}
.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 #a4b8d1;border-radius:9px;color:#4d6176;font-size:.76rem}
.paper-storage-error{color:#3b0005;border-color:#cb8793}
.paper-draft-row{display:grid;gap:5px;padding:12px 14px;border:1px solid #adc2da;border-radius:9px;background:#fefcf5}
.paper-draft-row+.paper-draft-row{margin-top:8px}
.paper-draft-row strong{font-size:.76rem}
.paper-draft-row span{color:#42566b;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 #92aac7;border-radius:16px;color:var(--text);background:#fefcf4;box-shadow:0 24px 90px #000b}
.paper-dialog::backdrop{background:#fffcf7bb;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 #9eb4ce;border-radius:9px;color:#101821;background:#fefcf5;font-size:1.35rem;cursor:pointer}
.paper-no-order{margin-top:12px;padding:9px 11px;border-left:3px solid var(--amber);color:#71500b;background:#fefcf4;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:#fefcf5}
.paper-review-details dt{color:#54697f;font-size:.67rem}
.paper-review-details dd{color:#080f17;font:700 .72rem ui-monospace,monospace;overflow-wrap:anywhere}
.paper-dialog-warning{padding:10px;border:1px solid #e2c088;border-radius:8px;color:#5b4617;font-size:.7rem;line-height:1.5}
.paper-dialog-warning.error{border-color:#cb8793;color:#3b0005}
.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 #137367;
  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:#3e5165;line-height:1.55}
.futures-access-form{display:grid;gap:9px}
.futures-access-form label{font-size:.75rem;font-weight:700;color:#0c151f}
.futures-access-form input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #91aecc;border-radius:8px;color:#060f19;background:#fffcf6;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:#4c6076; 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:#432d00; background:#e6d6bd; border:1px solid #d7bd91; }
.futures-mainnet-locked { border:1px dashed #8694a6; color:#445261; background:#fefcf4; 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 #a1b7d1; border-radius:8px; color:#0a1219; background:#fefcf5; 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:#44586e; font-size:.57rem; }
.futures-customer-avatar { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; color:#ac7e06; background:#b4c3da; 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 #99b1cc; border-radius:12px; background:#fefcf5; 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 #b2c5dc; }
.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:#445567; 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:#0a1219; font-size:.7rem; }
.futures-readiness-top>button { width:auto; min-height:30px; margin:0; }
.futures-readiness>p { margin:6px 0 0; color:#2c3946; font-size:.65rem; line-height:1.4; }
.futures-gates { margin-top:8px; border-top:1px solid #b4c4db; color:#324151; 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 #a5b3c7; border-radius:999px; color:#394552; background:#fefcf5; font-size:.59rem; }
.futures-ready-chip.ok { border-color:#99dbc5; color:#1a6342; background:#fefcf5; }
.futures-ready-chip.block { border-color:#d2b58f; color:#6c4d0f; background:#fefcf4; }
.futures-login-help { margin-top:9px; padding-top:9px; border-top:1px solid #b4c4db; color:#635126; 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:#635126; font-size:.63rem; }
.futures-login-help input { min-width:0; min-height:34px; padding:6px 8px; border:1px solid #a1b7d1; border-radius:7px; color:#0a1219; background:#fffcf6; }
.futures-login-help button { width:auto; min-height:34px; margin:0; }
.futures-login-help small { grid-column:1/-1; color:#51667d; 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 #b0c4db; border-radius:10px; background:linear-gradient(155deg,#fefcf4,#fffcf6); }
.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:#44586e; font-size:.64rem; }
.futures-market-head select,.futures-order-form input { min-width:0; height:36px; padding:7px 9px; border:1px solid #a1b7d1; border-radius:6px; outline:none; color:#0a1219; background:#fffcf6; }
.futures-market-head select { font-weight:750; }
.futures-market-head strong { justify-self:end; color:#070e15; 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:#4e6278; 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 #b6c9e0; }
.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:#44586e; background:transparent; font-size:.64rem; font-weight:750; cursor:pointer; }
.futures-ranges button.active,.futures-order-modes button.active { border-color:#96c0d5; color:#093832; background:#c5e0ea; }
.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 #c1d1e4; color:#51667d; 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:#0a1219; font-size:.82rem; }
.futures-card-title>span { color:#475b71; 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:#5b7087; 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:#1d242b; 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:#ad0017; }
.futures-book-row.bid::before { background:#3fffc6; }
.futures-book-row>* { position:relative; z-index:1; }
.futures-book-row .ask-price { color:#970011; }
.futures-book-row .bid-price { color:#3fffc6; }
.futures-book-side>p { color:#51667d; 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 #b3c6dd; border-bottom:1px solid #b3c6dd; }
.futures-book-mid strong { color:#3fffc6; font:800 .9rem ui-monospace,monospace; }
.futures-book-mid span,.futures-book-time { color:#51667d; 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:#fffcf6; }
.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:#44586e; 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:#bf9020; box-shadow:0 0 0 2px #bf902030; }
.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 #adc3db; border-radius:7px; background:#fffcf6; }
.futures-estimate span,.futures-estimate small { color:#51667d; font-size:.56rem; }
.futures-estimate strong { color:#0a1219; 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 #cc9f45; border-radius:5px; color:#604b19; background:#fefcf4; font-size:.59rem; line-height:1.4; }
.futures-order-message.good { border-left-color:#79dabd; color:#185b44; background:#fefcf5; }
.futures-order-message.error { border-left-color:#c34254; color:#340003; background:#fefbf1; }
.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:#fffcf6; background:#3fffc6; }
.futures-submit.short { color:#0a0a0a; background:#c2001a; }
.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:#0b131a; font-size:.82rem; }
.futures-data-tabs { display:flex; gap:3px; overflow-x:auto; margin-top:6px; border-bottom:1px solid #b0c3da; }
.futures-data-tabs button { flex:0 0 auto; min-height:33px; padding:5px 9px; border:0; border-bottom:2px solid transparent; color:#44586e; background:transparent; font-size:.61rem; cursor:pointer; }
.futures-data-tabs button.active { border-bottom-color:#bf9020; color:#73550f; }
.futures-data-tabs button span { display:inline-grid; min-width:16px; height:16px; place-items:center; margin-left:3px; border-radius:10px; background:#b4c5db; 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 #bfcee1; text-align:left; font-size:.59rem; }
.futures-data-table th { color:#55697e; font-weight:600; }
.futures-data-table td { color:#141c24; }
.futures-data-table .positive { color:#3fffc6; }
.futures-data-table .negative { color:#960010; }
.futures-close-position,.futures-cancel-order { min-height:27px; padding:4px 7px; border:1px solid #8994a9; border-radius:5px; color:#0d151d; background:#cad6e5; 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:#62778e; 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: #fefcf5; border: 1px solid #aab8cc; }
.futures-auto-state span { color: #3d4e60; font-size: .75rem; }
.futures-auto-state strong { color: #3d0c07; font-size: .9rem; }
.futures-auto-state strong[data-state="running"] { color: #1e935c; }
.futures-auto-state small { color: #485a6e; 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: #062519; background: #fefcf5; border: 1px solid #6fd7bf; }
.futures-test-status.simulated { color: #233548; background: #fefcf4; border: 1px solid #8fafce; }
.futures-journal-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; color: #3d4e60; font-size: .72rem; }
.futures-auto-risk-row small { color: #3d4e60; font-size: .68rem; line-height: 1.5; }
.futures-risk-soak { margin: 12px 0; padding: 12px 0; border-block: 1px solid #aab8cc; }
.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: #0a1219; font-size: .82rem; }
.futures-risk-soak-head small { color: #485a6e; 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: #aab8cc; }
.futures-risk-soak-metrics article { min-width: 0; padding: 10px; display: grid; gap: 5px; background: #fefcf5; }
.futures-risk-soak-metrics span, .futures-risk-soak-metrics small { color: #55687d; font-size: .62rem; }
.futures-risk-soak-metrics strong { color: #0c151f; 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: #b6c6db; }
.futures-risk-soak-progress span { display: block; width: 0; height: 100%; background: #0059b1; transition: width .25s ease; }
.futures-risk-soak > p { margin: 8px 0 0; color: #3d4e60; 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 #9fb8d0; }
.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:#43596c; 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:#fefbf2; border:1px solid #a8bdd1; border-radius:12px; cursor:pointer; }
.sa-candidate.ready { border-color:#3fffc6; }
.sa-candidate:disabled { opacity:.55; cursor:default; }
.sa-candidate small { line-height:1.5; color:#374958; }
.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 #9aadbf; border-radius:8px; background:#fefcf5; color:#0d141a; width:100%; box-sizing:border-box; font-size:16px; }
.sa-profile-guard { padding:12px 14px; border:1px solid #d4ab6e; border-radius:9px; background:#fefbf3; color:#62440b; 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 #93b0c9; border-radius:14px; background:#fefbf3; }
.sa-plan h4 { font-size:21px; margin:0 0 10px; }
.sa-plan.blocked { border-color:#bb9d9f; }
.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:#2f4253; }
.sa-plan button { width:100%; margin-top:12px; }
.sa-error { color:#460000; 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:#fefbf2; border-radius:10px; display:flex; flex-direction:column; gap:9px; }
.sa-metrics article span { color:#43596c; 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:#364a5a; 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: var(--ink); }

.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 #e0c28e; border-radius:15px; background:linear-gradient(135deg,#fefcf5,#fefcf5 58%,#fefcf5); }
.racer-hero h2 { color:#261b00; }
.racer-hero > div:first-child > p:last-child { margin-top:3px; color:#556a7f; 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 #e2b66f; border-radius:999px; color:#774f00; background:#fefcf4; font-size:.68rem; font-weight:850; letter-spacing:.06em; white-space:nowrap; }
.racer-mock-badge[data-authenticated="true"] { border-color:#84d1be; color:#0e7c66; background:#fefcf4; }
.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:#bc7d05; color:#fffcf6; }
.racer-boundary { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #ddc49c; border-radius:9px; color:#5b4823; background:#fefcf5; font-size:.66rem; }
.racer-boundary > span { color:#bc7d05; }
.racer-boundary > span[data-state="LIVE"] { color:#21c4a6; }
.racer-boundary > span[data-state="STALE"],.racer-boundary > span[data-state="ERROR"] { color:#81000a; }
.racer-boundary strong { color:#734d00; 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 #adc2da; border-radius:9px; background:#fefcf5; }
.racer-account-strip span { display:block; color:#51677f; font-size:.58rem; }
.racer-account-strip strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; color:#1b8f7c; font:800 .72rem ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.racer-account-strip strong[data-ready="false"] { color:#914300; }
.racer-readiness { border:1px solid #aac0d8; border-radius:10px; background:#fefcf5; }
.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:#161f29; font-size:.72rem; font-weight:800; }
.racer-readiness summary strong { color:#189c88; font:850 .78rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-readiness summary small { margin-left:auto; color:#52687f; 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 #b0c6dd; border-radius:7px; background:#fefcf4; }
.racer-readiness-grid span { overflow:hidden; text-overflow:ellipsis; color:#3d4f61; font-size:.6rem; white-space:nowrap; }
.racer-readiness-grid strong { flex:none; font-size:.57rem; }
.racer-readiness-grid article[data-state="PASS"] strong { color:#1aa189; }
.racer-readiness-grid article[data-state="BLOCKED"] strong { color:#7d1800; }
.racer-readiness-grid article[data-state="PENDING"] strong { color:#986a10; }
.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 #adc2da; border-radius:10px; background:#fefcf5; display:grid; gap:4px; }
.racer-summary span,.racer-summary small { color:#51677f; font-size:.68rem; }
.racer-summary strong { overflow-wrap:anywhere; font:800 1.2rem ui-monospace,SFMono-Regular,Menlo,monospace; color:#070e15; }
.racer-summary article:nth-child(4) strong,.racer-summary article:nth-child(5) strong { color:#15a092; }
.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:#556a80; font-size:.68rem; }
.racer-stop-all { min-height:38px; padding:8px 14px; border:1px solid #ca7682; border-radius:8px; color:#3c0005; background:#fefbf3; 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 #a5bcd5; border-radius:15px; background:linear-gradient(150deg,#fefbf3,#fefcf5); }
.racer-card[data-status="ACTIVE"] { border-left:3px solid #22d8c6; }
.racer-card[data-status="RESEARCHING"] { border-left:3px solid #bc7d05; }
.racer-card[data-status="DRAFT"] { border-left:3px solid #bc7d05; }
.racer-card[data-status="STOPPED"] { border-left:3px solid #748499; opacity:.78; }
.racer-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.racer-card-head h3 { margin:0; color:#080e14; 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:#12a394; background:#c0ede9; }
.racer-state.researching { color:#855900; background:#e8d7b6; }
.racer-state.shadow,.racer-state.risk_review { color:#1b8678; background:#c3e9e7; }
.racer-state.draft { color:#855900; background:#e8d7b6; }
.racer-state.stopped { color:#2f3b49; background:#bdc5d2; }
.racer-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.racer-chips span { min-width:0; padding:4px 7px; border:1px solid #a7bfd7; border-radius:999px; overflow:hidden; text-overflow:ellipsis; color:#495d71; background:#fefcf5; 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:#0b1621; }
.racer-chips .chip-risk { color:#2b0700; background:rgba(184,28,0,.16); border-color:rgba(184,28,0,.65); }
.racer-chips .chip-risk[data-level="LOW"] { color:#082a15; background:rgba(48,202,114,.15); border-color:rgba(48,202,114,.6); }
.racer-chips .chip-risk[data-level="MEDIUM"] { color:#382700; background:rgba(191,120,0,.15); border-color:rgba(191,120,0,.65); }
.racer-chips .chip-style { color:#092a2d; background:rgba(38,224,232,.14); border-color:rgba(38,224,232,.6); }
.racer-chips .chip-strategy { color:#0b121b; background:rgba(58,80,107,.16); border-color:rgba(58,80,107,.55); }
.racer-chips .chip-strategy.stopped { color:#2f0000; background:rgba(165,0,0,.12); border-color:rgba(165,0,0,.5); }
.racer-chips .chip-plan { color:#0b0026; background:rgba(40,0,145,.2); border-color:rgba(35,0,130,.75); }

.racer-scan-line { margin-top:7px; color:#536a80; font-size:.59rem; letter-spacing:.01em; }
.racer-plan { margin-top:9px; padding:8px 9px; border:1px solid #acc3db; border-radius:8px; background:#fefcf5; }
.racer-plan-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.racer-plan-head strong { color:#0f1820; font-size:.66rem; }
.racer-plan-head span { color:#647a8f; font-size:.54rem; }
.racer-plan-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.racer-plan-list > p { color:#566b80; font-size:.58rem; }
.racer-plan-row { display:inline-flex; align-items:center; gap:5px; padding:5px 6px; border:1px solid #a5bfd8; border-radius:6px; background:#fefcf5; }
.racer-plan-row strong { color:#0e161e; 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:#516578; font-size:.5rem; }
.racer-plan-side.long { color:#1a947e; background:#c4eae5; }
.racer-plan-side.short { color:#450006; background:#e3c4cb; }
.racer-plan-side.hold { color:#986c14; background:#e8dbc5; }
.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:#fefbf3; }
.racer-money span { display:block; color:#55697f; 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:#2f2200; }
.racer-money .positive { color:#15a092; }
.racer-money .negative { color:#710008; }
.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:#bbcfe3; }
.racer-allocation i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#22d8c6,#bc7d05); }
.racer-allocation small { color:#5d7288; 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 #a3bbd5; border-radius:6px; color:#15222f; background:#fefcf5; font:700 .62rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-position.long { border-color:#98dfd1; color:#1a9580; }
.racer-position.short { border-color:#c88892; color:#460005; }
.racer-position-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:11px; padding-top:10px; border-top:1px solid #b4c8e1; }
.racer-position-heading strong { color:#0f1820; font-size:.74rem; }
.racer-position-heading span { color:#63788e; 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 #a5bcd5; border-radius:12px; overflow:hidden; background:#fefcf5; }
.racer-history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-bottom:1px solid #acc3db; }
.racer-history-head > div { display:flex; align-items:baseline; gap:9px; }
.racer-history-head strong { color:#0f1820; font-size:.78rem; }
.racer-history-head span,.racer-history-head small { color:#63788e; 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:#15a092; }
.racer-history td.negative { color:#710008; }
.racer-mini-chart { min-width:0; margin:0; padding:8px; border:1px solid #acc3db; border-radius:9px; background:#fffcf6; }
.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:#1a9580; background:#c3ede7; }
.racer-mini-chart figcaption span.short { color:#460005; background:#e3c4cb; }
.racer-mini-chart figcaption > .positive { color:#15a092; }
.racer-mini-chart figcaption > .negative { color:#710008; }
.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:#bcd0e3; }
.racer-mini-chart .dial-progress { stroke:#2dcebb; }
.racer-mini-chart .sl-dot { fill:#90000a; stroke:#fefbf2; stroke-width:1.5; }
.racer-mini-chart .tp-dot { fill:#24c398; stroke:#fefbf3; stroke-width:1.5; }
.racer-mini-chart .entry-dot { fill:#0f151b; stroke:#b9ccdd; stroke-width:1.5; }
.racer-mini-chart .current-dot { fill:#bc7d05; stroke:#fefcf4; 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:#64798e; font-size:6px; letter-spacing:.08em; }
.racer-mini-chart .dial-value { fill:#091014; font-size:9px; }
.racer-mini-chart .sl-label { fill:#7f0009; font-size:6px; }.racer-mini-chart .tp-label { fill:#1aa587; 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:#fefbf3; }
.racer-levels small { display:block; color:#63788e; font-size:.5rem; }
.racer-levels strong { display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; color:#152029; font:700 .56rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.racer-quote-strip { display:flex; justify-content:center; gap:7px; margin-top:5px; color:#61758a; font:700 .48rem ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.racer-quote-strip span:nth-child(3) { color:#9c7115; }
.racer-no-position { grid-column:1/-1; padding:28px 12px; border:1px dashed #a0b8d0; border-radius:9px; color:#53687d; 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 #e4bf7f; border-radius:7px; color:#855800; background:#fefcf5; cursor:pointer; font-weight:850; }
.racer-start:disabled { opacity:.58; cursor:not-allowed; }
.racer-rename { border:1px solid #87b7d1; border-radius:7px; color:#082d3d; background:#fefbf2; cursor:pointer; font-weight:800; }
.racer-stop { margin-left:auto; border:1px solid #cc8895; border-radius:7px; color:#3d0005; background:#fefcf4; cursor:pointer; font-weight:800; }
.racer-stop:disabled { opacity:.4; cursor:not-allowed; }
.racer-delete { border:1px solid #cc8895; border-radius:7px; color:#3d0005; background:transparent; cursor:pointer; font-weight:800; }
.racer-delete:disabled { opacity:.4; cursor:not-allowed; }
.racer-log { margin-top:12px; }
.racer-log summary { color:#3c4e60; 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 #96afc9; color:#44586d; background:#fefcf5; font-size:.65rem; line-height:1.5; }
.racer-empty { grid-column:1/-1; padding:36px; border:1px dashed #9bb5ce; border-radius:14px; color:#495d72; 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 #dbbb83; border-radius:16px; color:var(--text); background:#fefcf5; box-shadow:0 24px 90px #000b,0 0 0 100vmax #fffdf8c4; }
.racer-dialog[hidden] { display:none!important; }
.racer-dialog::backdrop { background:#fffdf8c4; 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:#455a70; font-size:.75rem; line-height:1.5; }
.racer-dialog-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid #9bb2c9; border-radius:8px; color:#111922; background:#fefcf5; 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:#3f5265; 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 #9db5cd; border-radius:8px; color:#071018; background:#fefcf5; font-size:16px; }
.racer-dialog-summary { display:flex; justify-content:space-between; gap:12px; margin-top:12px; padding:10px; border-radius:8px; background:#fefcf5; color:#665432; font-size:.68rem; }
.racer-dialog-summary strong { color:#855800; text-align:right; }
.racer-form-message { min-height:20px; margin-top:10px; color:#460005; 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 #a7bed6; border-radius:9px; background:#fefcf5; }
.racer-start-facts span { display:block; color:#52687f; font-size:.61rem; }
.racer-start-facts strong { display:block; margin-top:4px; overflow-wrap:anywhere; color:#090e14; 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 #dec095; border-radius:999px; color:#81570b; background:#fefcf5; font-size:.61rem; }
.racer-risk-accept { display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:10px; border:1px solid #d98270; border-radius:8px; background:#fefcf5; color:#430d00; font-size:.72rem; line-height:1.4; }
.racer-risk-accept input { margin-top:2px; flex:none; }
.racer-start-wait { color:#455a70; 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:#7094b8; outline:none; }
.racer-chart-box { flex-basis:100%; padding:6px; border:1px solid #acc3db; border-radius:6px; background:#fffcf6; }
.racer-chart-box[hidden] { display:none; }
.racer-chart-svg { display:block; width:100%; height:auto; }
.racer-chart-note { display:block; margin-top:4px; color:#516578; 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:#566b80; }
.racer-stage b { width:10px; text-align:center; }
.racer-stage.pass { color:#23705c; }
.racer-stage.block { color:#740007; font-weight:800; }
.racer-chart-slot { margin-top:6px; }
.racer-budget-guide { margin-top:10px; padding:9px 10px; border:1px solid #acc3db; border-radius:8px; background:#fefcf5; }
.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:#516578; font-size:.52rem; }
.racer-guide-head.good strong { color:#1abc55; } .racer-guide-head.partial strong { color:#bc7d05; } .racer-guide-head.low strong { color:#940008; }
.racer-guide-rows { display:grid; grid-template-columns:1fr auto; gap:3px 10px; margin:0; font-size:.58rem; }
.racer-guide-rows dt { color:#455971; } .racer-guide-rows dd { margin:0; color:#0f1820; text-align:right; font-variant-numeric:tabular-nums; }
.racer-guide-warn { margin:7px 0 0; color:#740007; font-size:.58rem; }
.racer-guide-note { margin:7px 0 0; color:#566b80; 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:#b1c7df; outline:none; cursor:pointer; }
.racer-budget-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#060e16; border:3px solid #fefcf5; box-shadow:0 0 0 1px #597490; }
.racer-budget-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#060e16; border:3px solid #fefcf5; box-shadow:0 0 0 1px #597490; }
.racer-budget-slider:focus-visible { box-shadow:0 0 0 2px #00449a; }
.racer-slider-scale { display:flex; justify-content:space-between; margin-top:3px; color:#566b80; 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:#060e16; box-shadow:0 0 0 1px #fefcf5; }
.racer-slider-funds span { position:absolute; top:27px; white-space:nowrap; color:#060e16; 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:#740007; } .racer-last-closed.positive { color:#1abc55; }
.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:#b1c7df; overflow:hidden; }
.racer-gate-track i { display:block; height:100%; border-radius:4px; background:#768ba2; }
.racer-gate-track i.low { background:#940008; } .racer-gate-track i.mid { background:#bc7d05; }
.racer-gate-track i.high { background:#22d8c6; } .racer-gate-track i.full { background:#1abc55; }
.racer-gate-progress small { color:#374c62; 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 #a5bfd8; background:#fefcf5; }
.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(26,188,85,.14); border-color:#7ed4a8; } .racer-plan-chip.long strong { color:#19703e; }
.racer-plan-chip.short { background:rgba(148,0,8,.14); border-color:#c8717b; } .racer-plan-chip.short strong { color:#470005; }
.racer-plan-chip.flat strong { color:#374c62; }
.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(6,14,22,.45); }

.racer-entry-plan{background:rgba(30,0,165,.14);border:1px solid rgba(30,0,165,.4)}
.racer-guide-fit{display:grid;gap:4px;margin-top:10px;padding:10px;border:1px solid var(--line,rgba(127,127,127,.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:#1fc86b; }
.racer-plan-text.short { color:#940000; }
.racer-plan-text.flat { color:#495d71; }
/* 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:#c5d8ec; overflow:hidden; }
.racer-scan-track i { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#26e0e8,#0f0093); transition:width .6s ease; }
.racer-scan[data-mode="wait"] .racer-scan-track i { background:#8cabc8; transition:width 1s linear; }
.racer-scan small { color:#495d71; 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:#1fc86b; }
.racer-mini-chart .dial-value.move-down { fill:#940000; }
/* 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(156,0,0,.6); border-radius:8px; background:rgba(156,0,0,.12); color:#2f0000; font-size:.7rem; font-weight:700; cursor:pointer; }
.racer-mini-chart .position-cut:hover:not(:disabled) { background:rgba(156,0,0,.25); }
.racer-mini-chart .position-cut:disabled { opacity:.55; cursor:wait; }
.racer-plan-list > p.racer-scan-issue { color:#400900; 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(48,202,158,.45); border-radius:999px; background:rgba(89,221,188,.12); color:#1b8f7c; cursor:default; }
.racer-account-icons article[data-state="warn"] { border-color:rgba(165,70,0,.6); background:rgba(165,70,0,.12); color:#914300; }
.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:#00071f; --pc-soft:#192755; --pc-bg:#bdc3e4; --pc-bg2:#a8b0de; --pc-line:#002770; --pc-peach:#430d00; --pc-mint:#186441; --pc-lemon:#755600; --pc-lav:#0d0239;
  margin-bottom:26px; padding:18px; background:linear-gradient(180deg,var(--pc-bg),#c7cce8); 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 #fefcf5; }
.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:#0a0a0a; font-size:1.15rem; letter-spacing:.01em; }
.pc-badge { padding:5px 12px; font:800 .7rem ui-monospace,Menlo,monospace; color:#bdc3e4; background:var(--pc-mint); box-shadow:0 -3px 0 0 #319467,0 3px 0 0 #319467,-3px 0 0 0 #319467,3px 0 0 0 #319467; }
.pc-badge.locked { background:var(--pc-lemon); box-shadow:0 -3px 0 0 #b68e1f,0 3px 0 0 #b68e1f,-3px 0 0 0 #b68e1f,3px 0 0 0 #b68e1f; }
.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 #7786c9,0 4px 0 0 #7786c9,-4px 0 0 0 #7786c9,4px 0 0 0 #7786c9; }
.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:#986931; box-shadow:0 4px 0 0 #bf9a6d; }
.pc-bubble { position:relative; flex:1; min-width:0; padding:12px 14px; color:#a8acd6; background:#211800; box-shadow:0 -4px 0 0 #a8acd6,0 4px 0 0 #a8acd6,-4px 0 0 0 #a8acd6,4px 0 0 0 #a8acd6; }
.pc-bubble::before { content:""; position:absolute; left:-14px; bottom:18px; width:10px; height:10px; background:#211800; box-shadow:-4px 0 0 0 #a8acd6,-4px -4px 0 0 #211800,-8px 0 0 0 #a8acd6; }
.pc-name { margin-bottom:6px; font:800 .66rem ui-monospace,Menlo,monospace; letter-spacing:.14em; color:#3a08aa; }
.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 #7786c9,0 3px 0 0 #7786c9,-3px 0 0 0 #7786c9,3px 0 0 0 #7786c9; }
.pc-score article > span { display:flex; align-items:center; gap:6px; color:var(--pc-soft); font-size:.7rem; }
.pc-score strong { color:#0a0a0a; 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 #7786c9,0 3px 0 0 #7786c9,-3px 0 0 0 #7786c9,3px 0 0 0 #7786c9; }
.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:#0a0a0a; }
.pc-state { flex:none; padding:2px 8px; color:#bdc3e4; 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 #5466ba; }
.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 #7786c9,0 2px 0 0 #7786c9,-2px 0 0 0 #7786c9,2px 0 0 0 #7786c9; }
.pc-pos b { font:800 .78rem ui-monospace,Menlo,monospace; color:#0a0a0a; }
.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,#44000c 0 30%,#7786c9 30% 70%,#186441 70% 100%); }
.pc-bar i { position:absolute; top:-4px; width:8px; height:16px; margin-left:-4px; background:#0a0a0a; box-shadow:0 0 0 2px #bdc3e4; }
.pc-foot { margin-top:16px; color:#344278; 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:#bdc3e4; background:#002770; font:800 .62rem ui-monospace,Menlo,monospace; }
.pc-rank.first { background:#755600; box-shadow:0 0 0 2px #b68e1f; }
.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 #002770,0 0 0 8px #a8b0de; 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 #d8c38f; border-radius:9px; color:#734d00; background:#fefcf4; font-weight:800; cursor:pointer; }
.racer-pause[data-paused="true"] { color:#fffcf7; background:#bc7d05; border-color:#bc7d05; }
.racer-pause:disabled { opacity:.55; cursor:wait; }
.racer-pause-banner { margin-top:10px; padding:9px 12px; border:1px solid #e2c081; border-radius:9px; background:#fefcf5; color:#734d00; 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:#bdc3e4; background:var(--pc-mint); border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 -3px 0 0 #319467,0 3px 0 0 #319467,-3px 0 0 0 #319467,3px 0 0 0 #319467; }
.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(255,252,246,.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(255,253,249,.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:#22d8c6; } .wh-cards .down strong, .wh-card td.down { color:#940008; }
.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(10,10,10,.04); }
.wh-sum tr.up td:nth-child(n+2) { color:#22d8c6; } .wh-sum tr.down td:nth-child(n+2) { color:#940008; }
.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:#940008; color:#0a0a0a; box-shadow:0 -3px 0 0 #bd3038,0 3px 0 0 #bd3038,-3px 0 0 0 #bd3038,3px 0 0 0 #bd3038; }

/* "เงินของเรา" 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(10,10,10,.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,#bdc3e4,#c7cce8); color:#00071f; }
.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:#0d0239; letter-spacing:.2em; }
.crew-summary { margin:0; font-size:.82rem; color:#755600; 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:#a8b0de; border-radius:12px; box-shadow:inset 0 0 0 2px #7786c9; }
.crew-card.leader { box-shadow:inset 0 0 0 2px #996b00, 0 0 14px rgba(153,107,0,.25); }
.crew-card.mood-sleep { opacity:.8; } .crew-card.mood-cry { box-shadow:inset 0 0 0 2px #a685b5; } .crew-card.mood-sick { box-shadow:inset 0 0 0 2px #ad536b; }
.crew-crown { position:absolute; top:-10px; right:10px; padding:2px 10px; font-size:.72rem; font-weight:800; color:#a8acd6; background:#996b00; border-radius:999px; }
.crew-art { display:flex; align-items:flex-end; } .crew-avatar { display:block; border-radius:50%; background:#b5cee8; }
.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:#a8acd6; background:#211800; border-radius:10px; min-width:0; }
.crew-bubble::before { content:""; position:absolute; left:-7px; bottom:16px; width:12px; height:12px; background:#211800; 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:#d9a470; }
.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:#186441; } .crew-pnl.down { color:#430d00; }
.crew-note { font-size:.7rem; color:#192755; text-align:right; }
.crew-empty, .crew-foot { margin:8px 0 0; font-size:.74rem; color:#192755; }
.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 #7786c9,0 3px 0 0 #7786c9,-3px 0 0 0 #7786c9,3px 0 0 0 #7786c9; }
.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 #a7bfd7; border-radius:8px; background:#fefcf5; color:#17212a; 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 #a7bfd7; border-radius:6px; background:#fffcf6; color:#09121c; font:inherit; }
.racer-guard-message { color:#495d71; font-size:.62rem; }
.racer-guard-create { margin:10px 0; }
.racer-guard-create small { flex-basis:100%; color:#495d71; line-height:1.45; }

.racer-grandma-call { padding:6px 11px; border:1px solid #d8c691; border-radius:8px; background:#fefcf5; color:#754f00; font:inherit; font-size:.72rem; cursor:pointer; }
.racer-grandma-call[data-on="true"] { background:#fefbf1; border-color:#cd981e; }
.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 #d8c691; border-radius:10px; background:#fffcf6; color:#2e2611; }
.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:#857343; }
.racer-grandma-amount input { width:74px; padding:3px 6px; border:1px solid #d8c691; border-radius:6px; background:#fffdf7; color:#382700; font:inherit; }
.racer-grandma-total { display:flex; flex-direction:column; align-items:flex-end; font-size:.66rem; color:#857343; }
.racer-grandma-total strong { font-size:1.15rem; color:#754f00; }
.racer-grandma-badge { display:flex; align-items:center; gap:7px; margin:6px 0 2px; padding:5px 8px; border:1px solid #cd981e; border-radius:12px; background:#fefcf5; color:#382700; 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:#d8c691; background:#fffcf6; color:#2e2611; }
.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:#754f00; } .gr-off { color:#857343; }
.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 #e2d6b3; border-radius:8px; background:#fffdf7; }
.gr-stats span, .gr-stats small { color:#857343; 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:#754f00; }
.gr-tables table { width:100%; border-collapse:collapse; font-size:.66rem; }
.gr-tables th, .gr-tables td { padding:4px 6px; border-bottom:1px solid #fefbf3; 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 #cd981e; border-radius:14px; background:#261c00; color:#fefbf3; 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:#cd981e; border-left:0; }
.racer-grandma-bubble[data-mood="grumpy"] { background:#240500; border-color:#bb1f1f; color:#edb9b5; }
.racer-grandma-bubble[data-mood="grumpy"]::before { border-right-color:#bb1f1f; }
.racer-grandma-bubble[data-mood="happy"], .racer-grandma-bubble[data-mood="excited"] { background:#382d00; }
.gr-face { margin-right:2px; }
.gr-say { margin:6px 0 0; padding:6px 10px; border-radius:10px; background:#261c00; color:#fefbf3; 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 #cd981e; border-radius:10px; background:#fefcf5; color:#382700; 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:#fefcf5; color:#382700; 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:#495d71; 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 #a7bfd7; border-radius:8px; background:#fefcf5; color:#17212a; 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:#857343; }
.gr-more summary { cursor:pointer; }
.gr-more table { width:100%; }

.racer-drain, .racer-drain-cancel { padding:6px 10px; border:1px solid #d8c691; border-radius:8px; background:#fffcf6; color:#754f00; font:inherit; font-size:.68rem; cursor:pointer; }
.racer-drain.armed { background:#fefbf1; border-color:#cd981e; }
.racer-draining { color:#754f00; font-size:.66rem; }

.racer-drain-banner { display:flex; flex-direction:column; gap:4px; margin:10px 0; padding:10px 12px; border:2px solid #cd981e; border-radius:10px; background:#fefcf5; color:#382700; font-size:.72rem; }
.racer-drain-banner strong { font-size:.82rem; color:#754f00; }

.racer-history-pager { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; font-size:.72rem; color:#495d71; }
.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:#495d71; 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:#495d71; 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:#15a092; } .racer-bignum strong.negative { color:#710008; } .racer-bignum strong.neutral { color:#09121c; }
.racer-bignum span { color:#495d71; 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 #a7bfd7; border-radius:999px; background:#fefcf5; color:#17212a; font:inherit; font-size:.68rem; cursor:pointer; transition:transform .15s; }
.racer-pill:hover { transform:translateY(-1px); }
.racer-pill b { font-weight:700; color:#09121c; }
.racer-pill.up { border-color:#8ce4da; background:#fefcf5; } .racer-pill.up span { color:#15a092; }
.racer-pill.down { border-color:#d88d96; background:#fefcf5; } .racer-pill.down span { color:#710008; }
.racer-pill.near { border-color:#cd981e; box-shadow:0 0 0 2px rgba(205,152,30,.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:#fefcf5; color:#754f00; 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 #a7bfd7; padding-top:10px; }
.racer-grandma-settings { font-size:.68rem; color:#857343; }
.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:#fefcf5; border:2px solid #a7bfd7; }
.racer-face:empty { display:none; }
.racer-face svg { display:block; width:100%; height:100%; }

/* Overview chooser (2026-10-10): two big cards only, Pixel (Speed Racer) and ตี๋ใหญ่ (Gunmen). Display only. */
.overview-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 8px 0; }
.overview-pick[hidden] { display: none; }
.overview-pick-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 16px; min-height: 280px; border: 3px solid #fefbf2; border-radius: 8px; background: #0a0a0a; color: #fefbf2; font: inherit; text-align: center; cursor: pointer; box-shadow: 4px 4px 0 #fefbf2; }
.overview-pick-card span { display: grid; gap: 2px; }
.overview-pick-card b { font-size: 1.35rem; }
.overview-pick-card small { opacity: .75; font-size: .95rem; }
.overview-pick-card:hover { background: #2e2400; }
.overview-pick-card:focus-visible { outline: 3px solid #2257b7; outline-offset: 2px; }
.overview-back { margin: 0 0 10px; padding: 8px 14px; min-height: 44px; border: 3px solid #fefbf2; border-radius: 6px; background: #996b00; color: #fefbf2; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 #fefbf2; }
@media (max-width: 480px) { .overview-pick { gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .overview-pick-card { min-height: 200px; padding: 16px 8px; } .overview-pick-card svg, .overview-pick-card img { width: 96px; height: 96px; } .overview-pick-card b { font-size: 1.1rem; } }

/* ===== Bright cartoon theme (2026-10-10, user request: white/cream, vivid, thick ink) ===== */
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px; }
.tab-ico { flex: none; width: 28px; height: 28px; border: 2.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: .95rem; line-height: 1; background: #ffd23f; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.tab-ico-overview { background: #ffd23f; } .tab-ico-racers { background: #ff8a7a; } .tab-ico-stocks { background: #8fd6ff; } .tab-ico-intel { background: #c3a6ff; }
.tab-ico-agents { background: #7df0dc; } .tab-ico-prices { background: #b7f08a; } .tab-ico-technical { background: #ffb3d4; } .tab-ico-signals { background: #ffe27a; }
.tab-ico-gold-signals { background: #ffd23f; } .tab-ico-proposals { background: #bfe8ff; } .tab-ico-risk { background: #ffb3b3; } .tab-ico-live { background: #b7f08a; }
.tab-ico-testnet { background: #ffc98a; } .tab-ico-rules { background: #e6d8ff; }
.tab.racer-tab.active { background: #ffd23f; } .tab.stocks-tab.active { background: #8fd6ff; } .tab.intel-tab.active { background: #d9c6ff; }
.metric, .card, .table-card, .proposal, .rule-card, .chart-controls, .chart-workspace, .order-flow-panel { border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.metric { background: #fff; } .metric.primary { background: #fff3b8; } .metric.negative { background: #ffe3e3; }
.pill { border: 2px solid var(--ink); color: var(--ink); }
.pill.neutral { background: #e6f4ff; } .pill.approved { background: #c9f7d9; } .pill.waiting, .pill.condition { background: #ffe9a6; } .pill.closed { background: #eceae4; } .pill.demo { background: #ffd9b0; }
.warning { border-left: 6px solid var(--amber); border-radius: 8px; background: #fff3c4; color: #3a2a00; border: 2.5px solid var(--ink); border-left-width: 8px; }
.warning span { color: #4a3a10; }
footer { color: #4f4a3c; border-top: 4px solid var(--ink); background: #fffdf5; }
@media (max-width: 700px) {
  .topbar { min-height: 72px; padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .brand-mark { width: 44px; height: 44px; }
  .snapshot { font-size: .76rem; padding: 6px 10px; white-space: normal; }
  .tabs { padding: 8px 10px; gap: 6px; scroll-snap-type: x proximity; }
  .tab { font-size: .82rem; padding: 4px 11px 4px 5px; scroll-snap-align: start; }
  .tab-ico { width: 26px; height: 26px; font-size: .88rem; }
  .metric, .card, .table-card, .proposal, .rule-card { box-shadow: 3px 3px 0 var(--ink); }
}
nav.tabs .tab.intel-tab, nav.tabs .tab.racer-tab, nav.tabs .tab.stocks-tab { font-size: .95rem; }
@media (max-width: 700px) { nav.tabs .tab.intel-tab, nav.tabs .tab.racer-tab, nav.tabs .tab.stocks-tab { font-size: .88rem; } }
/* Kill Switch / risk status stays loud on the light theme */
.danger-button, .pill.blocked-pill { color: #8a0014; background: #ffe3e6; border: 2.5px solid #8a0014; font-weight: 800; }
.danger-button:disabled { opacity: .9; }
/* Menu font: Itim (already loaded for the cartoon pages), system fallback */
.tab { font-family: 'Itim', 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .01em; }
nav.tabs .tab.intel-tab, nav.tabs .tab.racer-tab, nav.tabs .tab.stocks-tab { font-size: 1.05rem; }
.tab.active { text-shadow: 0 0 0 var(--ink); -webkit-text-stroke: .3px var(--ink); }
.h2-sub { display: block; margin-top: 2px; font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
@media (max-width: 700px) { .tab, nav.tabs .tab.intel-tab, nav.tabs .tab.racer-tab, nav.tabs .tab.stocks-tab { font-size: .98rem; } }
/* hidden menu tabs (2026-10-10): remove the hidden attribute in index.html to restore */
.tabs .tab[hidden] { display: none !important; }
/* ===== Top-bar login (2026-10-10) ===== */
.hq-login { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.hq-login-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 8px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 400 1.05rem 'Itim', system-ui, sans-serif; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.hq-login-btn:hover { background: #e0f4ff; }
.hq-logout-btn { background: #ffd9dd; } .hq-logout-btn:hover { background: #ffc2c9; } .hq-logout-btn[hidden] { display: none; }
.hq-login-btn[data-state="all"] { background: #c9f7d9; } .hq-login-btn[data-state="some"] { background: #ffe9a6; }
.hq-key { display: grid; place-items: center; width: 30px; height: 30px; border: 2.5px solid var(--ink); border-radius: 50%; background: #ffd23f; font-size: 1rem; }
.hq-chips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.hq-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.hq-chips li b { font-weight: 800; }
.hq-dot { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: #d9d4c4; }
[data-state="in"] > .hq-dot, [data-state="in"].hq-dot { background: #2ee6a0; } [data-state="out"] > .hq-dot { background: #ff8a7a; } [data-state="unknown"] > .hq-dot { background: #ffd23f; }
.hq-chips li[data-state="in"] { background: #c9f7d9; } .hq-chips li[data-state="out"] { background: #fff; }
.hq-dialog { width: min(480px, calc(100vw - 28px)); padding: 0; border: 4px solid var(--ink); border-radius: 18px; background: #fffdf5; color: var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.hq-dialog::backdrop { background: rgba(20, 20, 20, .45); }
.hq-dialog form { display: grid; gap: 12px; padding: 20px; }
.hq-dialog h3 { font-size: 1.35rem; }
.hq-note { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.hq-field { display: grid; gap: 6px; font-weight: 700; }
.hq-field input { min-height: 46px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); }
.hq-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hq-lines li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 8px 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; }
.hq-lines li[data-state="in"] { background: #c9f7d9; } .hq-lines li[data-state="fail"] { background: #ffe3e6; } .hq-lines li[data-state="busy"] { background: #ffe9a6; }
.hq-lines li small { flex-basis: 100%; color: #8a0014; font-weight: 700; }
.hq-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hq-primary, .hq-ghost { min-height: 44px; padding: 0 16px; border: 3px solid var(--ink); border-radius: 999px; font: 400 1rem 'Itim', system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.hq-primary { background: var(--cyan-fill); box-shadow: 3px 3px 0 var(--ink); } .hq-primary:disabled { opacity: .6; cursor: wait; } .hq-ghost { background: #fff; }
@media (max-width: 700px) { .hq-login { width: 100%; margin-left: 0; } .hq-chips li { font-size: .72rem; padding: 2px 8px; } }
/* top bar: keep the site name on one line; the login chips wrap under it when space is tight */
.topbar { flex-wrap: wrap; }
.brand { flex: 0 0 auto; } .brand h1 { white-space: nowrap; }
.tab-ico-gold { background: #ffc21a; } .tab.gold-tab.active { background: #ffd95c; }