/* Glasstrade terminal: full-width, flat white, thin rules. Tokens from the dossier; the only accent is the blue on price. */
:root { --ink: #0B0B0C; --text: #3A3A3D; --muted: #5E5E63; --rule: #E4E4E7; --field: #D4D4D8; --panel: #F5F5F6; --orange: #FF6B00; --blue: #2563FF;
  --sans: "Inter Tight", Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: #fff; color: var(--text); font: 400 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
p, h1, dl, dd { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Top bar */
.bar { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: #fff; position: sticky; top: 0; z-index: 10; }
.bar__brand { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.bar__brand img { border-radius: 6px; }
.bar__sep { width: 1px; height: 24px; background: var(--rule); }
.pillbtn { height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pillbtn:hover { border-color: var(--field); }
.pillbtn--acct { background: #fff; }
.bar__price { font-size: 24px; color: var(--blue); letter-spacing: -0.02em; line-height: 1; }
.bar__chg { font-size: 12px; color: var(--blue); }
.bar__chg.down { color: var(--ink); }
.bar__src { font-size: 12px; color: var(--muted); }
.bar__spacer { flex: 1; }
.bar__net { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.market { position: relative; }
.market__list { position: absolute; top: 36px; left: 0; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 30px -16px rgba(11, 11, 12, .25); z-index: 20; }
.market__item { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; text-align: left; }
.market__item:hover, .market__item[aria-selected="true"] { background: var(--panel); }
.market__item .mono { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) { .bar__src, .bar__net, .bar__sep { display: none; } .bar { gap: 10px; flex-wrap: wrap; height: auto; padding: 10px 12px; } }

/* Grid */
.term { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: clamp(520px, 64vh, 760px) minmax(200px, auto); gap: 12px; padding: 12px 16px 16px; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; min-width: 0; }
.chart { grid-column: 1; grid-row: 1; }
.order { grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; }   /* never taller than the chart: the body scrolls, the button stays */
.book { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 1100px) { .term { grid-template-columns: 1fr; grid-template-rows: clamp(360px, 50vh, 520px) auto auto; } .chart { grid-row: 1; } .order { grid-column: 1; grid-row: 2; overflow: visible; } .book { grid-column: 1; grid-row: 3; } }

/* Chart */
.chart { display: flex; flex-direction: column; min-height: 0; }
.chart__head { display: flex; align-items: center; gap: 18px; padding: 16px 20px 8px; }
.chart__sym { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 480px) { .chart__head { flex-wrap: wrap; gap: 10px 14px; } .chart__live { margin-left: 0; } }
.ivals { display: flex; gap: 2px; }
.ival { height: 24px; min-width: 32px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.ival[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chart__live { margin-left: auto; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.chart__wrap { flex: 1; position: relative; min-height: 0; }
.chart__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Positions / history */
.book { display: flex; flex-direction: column; }
.tabs { display: flex; gap: 22px; padding: 14px 20px 0; border-bottom: 1px solid var(--rule); }
.tab { border: 0; background: transparent; padding: 0 0 12px; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.tab .mono { font-size: 11px; margin-left: 4px; }
.book__panel { flex: 1; display: flex; flex-direction: column; }
.tscroll { overflow-x: auto; }
.ttable { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 13px; }
.ttable th { text-align: left; padding: 10px 20px; font: 400 11px/1 var(--mono); color: var(--muted); border-bottom: 1px solid var(--rule); letter-spacing: .02em; }
.ttable td { padding: 12px 20px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.ttable .muted { color: var(--muted); }
.side-long { color: var(--blue); font-weight: 500; }
.side-short { color: var(--ink); font-weight: 500; }
.pnl-pos { color: var(--blue); }
.dist { display: inline-flex; align-items: center; gap: 8px; }
.dist__bar { width: 64px; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.dist__fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.outcome { display: inline-block; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--rule); font: 400 11px/1 var(--mono); color: var(--ink); }
.outcome--win { border-color: var(--blue); color: var(--blue); }
.outcome--shattered { border-color: var(--orange); }
.close { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field); background: #fff; color: var(--ink); font-size: 12px; cursor: pointer; }
.close:hover { border-color: var(--ink); }
.empty { flex: 1; display: grid; place-items: center; min-height: 140px; color: var(--text); font-size: 15px; }
.ttable:not(:has(tbody tr)) { display: none; }

/* Order ticket */
.order { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.order__body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin: 0 -4px; padding: 0 4px; }
.equity { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0 0 8px; border-bottom: 1px solid var(--rule); flex: none; }
.equity div { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.equity dd { color: var(--ink); }
.equity__head { font-size: 13px; }
.equity__head dt { color: var(--ink); font-weight: 600; }
.equity__head dd { font-size: 15px; font-weight: 500; }
.order__head { display: none; }
.order__title { font: 600 15px/1 var(--sans); color: var(--ink); }
.order__sym { font-size: 11px; color: var(--muted); }
.seg { display: flex; padding: 4px; border-radius: 999px; background: var(--panel); }
.seg__opt { flex: 1; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 500 15px/1 var(--sans); cursor: pointer; }
.seg__opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font-size: 13px; color: var(--muted); }
.field__box { display: flex; align-items: center; height: 38px; border: 1px solid var(--field); border-radius: 12px; padding: 0 16px; gap: 2px; background: #fff; }
.field__box:focus-within { border-color: var(--ink); }
.field__cur { font-size: 17px; color: var(--ink); }
.field__input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 17px; color: var(--ink); background: transparent; padding: 0; -moz-appearance: textfield; }
.field__input::-webkit-outer-spin-button, .field__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.field__unit { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.stakes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
.chip { height: 28px; min-width: 52px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field); background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lev { display: flex; flex-direction: column; gap: 2px; }
.lev__head { display: flex; justify-content: space-between; align-items: center; }
.lev__mode { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.lev__num { font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: -0.03em; padding: 2px 0 4px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; outline: none; margin: 2px 0 4px; --p: 0%;
  background: linear-gradient(90deg, var(--ink) 0 var(--p), var(--rule) var(--p) 100%); }
.range::-moz-range-progress { background: var(--ink); height: 4px; border-radius: 2px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: pointer; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: pointer; }
.range:disabled { opacity: .35; }
.range:focus-visible { outline-offset: 6px; }
.glass { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; position: relative; }
.glass__text { display: flex; flex-direction: column; gap: 3px; }
.glass__text strong { font-weight: 600; color: var(--ink); font-size: 14px; }
.glass__sub { font-size: 12px; color: var(--muted); }
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--field); position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 12, .2); transition: transform .2s; }
.switch__input:checked + .switch { background: var(--ink); }
.switch__input:checked + .switch::after { transform: translateX(20px); }
.switch__input:focus-visible + .switch { outline: 2px solid var(--blue); outline-offset: 2px; }
.glass.is-on { border-color: var(--ink); }
.sum { display: flex; flex-direction: column; gap: 5px; padding-top: 0; }
.sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.sum dt { color: var(--text); }
.sum dd { color: var(--ink); font-size: 13px; text-align: right; }
.order__note { font-size: 11px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--rule); }
.order__msg { font-size: 13px; color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
.order__msg.is-bad { border-color: var(--orange); }
.open { height: 44px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; margin-top: 4px; flex: none; }
.open:disabled { opacity: .4; cursor: not-allowed; }
.open:active { transform: scale(.985); }

/* Price shatters when a position busts */
@keyframes px-shatter { 0%, 100% { text-shadow: none; } 15% { text-shadow: -14px 0 rgba(255, 107, 0, .6), 14px 0 rgba(37, 99, 255, .6); } }
.bar__price.shatter { animation: px-shatter .8s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .bar__price.shatter { animation: none; } .switch, .switch::after { transition: none; } }

.tfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 14px 16px 18px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.tfoot nav { display: flex; gap: 18px; }
.tfoot a:hover { color: var(--ink); }

/* Arrival after the home shattered: the terminal settles in */
@keyframes arrive { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: none; } }
.bar, .term { animation: arrive .45s cubic-bezier(.16, 1, .3, 1) both; }
.term { animation-delay: .06s; }
@media (prefers-reduced-motion: reduce) { .bar, .term { animation: none; } }
.no-arrive .bar, .no-arrive .term { animation: none; }

/* ---------- testnet mode (2026-11-07) ---------- */
.modeseg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; background: var(--panel); }
.modeseg__opt { height: 24px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 12px/1 var(--sans); cursor: pointer; }
.modeseg__opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bar__net.is-chain .dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 255, .15); }
.dot--on { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-right: 2px; }
.funds { border-bottom: 1px solid var(--rule); padding: 0 0 10px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.funds__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.funds__grid div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.funds__grid dt { color: var(--muted); }
.funds__grid dd { margin: 0; color: var(--ink); }
.funds__act { display: flex; gap: 6px; align-items: center; }
.funds__box { flex: 1; min-width: 0; height: 30px; }
.funds__box .field__input { font-size: 13px; }
.chip--faucet { border-color: var(--blue); color: var(--blue); }
.funds__note { margin: 0; font-size: 11px; color: var(--muted); }
.funds__note a { color: var(--blue); }
.ttable tr.is-pending td { color: var(--muted); }
.ttable tr.is-you td { background: rgba(37, 99, 255, .06); }
.tabs__stats { margin: 0 0 12px auto; align-self: center; font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .tabs__stats { display: none; } .modeseg { order: 5; } }