/* spread.html — one route on one screen: both books live, In/Out, funding, entry by the books.
 * Its own look (owner's pick 28.10.26, the second of two mockups): dark, rounded panels, teal for the long/In side,
 * orange for the short/Out side, Geist for words and Geist Mono for figures. The other pages keep css/styles.css. */
:root {
  color-scheme: dark;
  --bg: #0b0d10; --panel: #111418; --panel-2: #171b20; --line: #23282f; --text: #e6e8eb; --muted: #8b929b;
  --teal: #2fd3a6; --teal-bg: rgba(47, 211, 166, 0.14); --orange: #ff6a3d; --orange-bg: rgba(255, 106, 61, 0.13);
  --warn: #f2c14e; --focus: #2fd3a6; --r: 10px; --r-s: 7px;
  /* chart (Spreader's): crosshair, the two legs' lines, a hole in the data */
  --cross: #5c646e; --leg-a: #3987e5; --leg-b: #c98500; --gap: rgba(128, 128, 128, 0.12);
  --sans: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2 { margin: 0; font-weight: 600; }
h2 { font-size: 14px; }
p { margin: 0; }
a { color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--panel); padding: 8px 12px; border-radius: var(--r-s); }

/* ---- side menu ---- */
.sidebar { border-right: 1px solid var(--line); padding: 18px 14px; display: grid; align-content: start; gap: 22px; position: sticky; top: 0; height: 100vh; }
.logo { display: flex; align-items: center; gap: 8px; font: 600 19px var(--sans); letter-spacing: -0.02em; padding: 0 6px; text-decoration: none; }
.logo svg { width: 22px; height: 22px; flex: none; }
.logo .bar-a { fill: var(--teal); } .logo .bar-b { fill: var(--orange); }
.grp { display: grid; gap: 2px; }
.grp b { color: var(--muted); font-weight: 500; font-size: 13px; padding: 0 8px 6px; }
.grp a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-s); text-decoration: none; }
.grp a:hover, .grp a.on { background: var(--panel-2); }
.grp a .ic { color: var(--muted); font-size: 16px; }

/* ---- top bar ---- */
.wrap { min-width: 0; }
.top { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.crumbs { color: var(--muted); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--text); } .crumbs b { color: var(--text); font-weight: 500; }
.top .mnav { display: none; margin-left: auto; gap: 4px; }
.top .mnav a { padding: 6px 10px; border-radius: var(--r-s); text-decoration: none; background: var(--panel-2); }
#app { padding: 16px 22px 22px; display: grid; gap: 12px; max-width: 1640px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.ghost { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; }
.ghost:hover { border-color: var(--muted); }
.ghost.on { border-color: var(--teal); color: var(--teal); }

/* ---- route header + figures ---- */
.route { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; border-radius: var(--r) var(--r) 0 0; }
.coin { display: flex; align-items: baseline; gap: 8px; position: relative; }
.coin h1 { font-size: 24px; letter-spacing: -0.02em; }
.coin-pick { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.coin-pick svg.ic { width: 14px; height: 14px; color: var(--muted); }
.coin-pick:hover svg.ic, .coin-pick[aria-expanded="true"] svg.ic { color: var(--text); }
.coin-pick:focus-visible { outline-offset: 3px; border-radius: 4px; }
.coinmenu { width: 300px; }
.coinmenu input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text); font: 14px var(--mono); }
.coinmenu .hint { margin: 8px 2px 0; }
.coin .kind { padding: 2px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); font: 12px var(--mono); }
.legs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legs .dir { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.legs .dir.long .ic { color: var(--teal); } .legs .dir.short .ic { color: var(--orange); }
.leg-pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); font: 12px var(--mono); text-decoration: none; }
.leg-pick:hover { border-color: var(--muted); }
.leg-pick img { width: 14px; height: 14px; border-radius: 3px; }
.leg-pick b { font-weight: 600; }
button.leg-pick { color: inherit; cursor: pointer; }
.leg-pick svg.ic { color: var(--muted); }
.legwrap { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.leg-out { display: inline-flex; padding: 4px; color: var(--muted); }
.leg-out:hover { color: var(--text); }
.legmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 340px; max-width: calc(100vw - 28px); max-height: min(560px, 70vh); overflow: auto;
  padding: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
.legmenu ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.legmenu .grp { margin: 10px 8px 0; color: var(--text); font-size: 12px; font-weight: 600; }
.legmenu a, .legmenu .off { display: grid; grid-template-columns: 16px auto 1fr auto 64px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; font-size: 13px; }
.legmenu .off { opacity: 0.4; cursor: not-allowed; }
.legmenu a:hover, .legmenu a:focus-visible { background: var(--bg); }
.legmenu img { width: 16px; height: 16px; border-radius: 4px; }
.legmenu span:not(.num) { color: var(--muted); }
.legmenu .num { text-align: right; font: 12px var(--mono); } .legmenu .pos { color: var(--teal); } .legmenu .neg { color: var(--orange); }
.arrow { color: var(--muted); }
.acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.metrics { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 0; border-radius: 0 0 var(--r) var(--r); margin-top: -12px; }
.m { padding: 10px 16px; border-left: 1px solid var(--line); display: grid; gap: 1px; align-content: start; min-width: 0; }
.m:first-child { border-left: 0; }
.m > span { color: var(--muted); font-size: 12px; }
.m b { font: 500 16px var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.m small { color: var(--muted); font: 11px var(--mono); }
.m-in > span::before { content: "— "; color: var(--teal); } .m-out > span::before { content: "— "; color: var(--orange); }
.m-in b { color: var(--teal); font-size: 18px; } .m-out b { color: var(--orange); font-size: 18px; }
.m .dim, .dim { color: var(--muted); }
.verdict { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: var(--muted); }
.verdict .ic { color: var(--teal); }
.verdict.warn .ic { color: var(--warn); }

/* ---- work area: chart | books | trade ---- */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 470px 320px; gap: 12px; }
.chart { display: grid; grid-template-rows: auto auto auto 1fr; min-width: 0; }
.ctools { display: flex; gap: 10px; padding: 10px 12px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.seg button { padding: 4px 11px; background: transparent; color: var(--muted); border: 0; border-radius: 999px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.legend i { width: 14px; height: 2px; display: inline-block; border-radius: 2px; }
.legend b { color: var(--text); font: 500 12px var(--mono); margin-right: 10px; }
.legend .lf { font: 11px var(--mono); margin-right: 10px; }
.csel { width: auto; padding: 4px 8px; font-size: 12px; border-radius: 999px; }
.ibtn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.ibtn:hover { color: var(--text); border-color: var(--muted); }
.ibtn .ic { width: 15px; height: 15px; }
.cmode { align-self: end; }
.cmode button { flex: 1; }
.k-in { background: var(--teal); } .k-out { background: var(--orange); }
.k-a { background: var(--leg-a); } .k-b { background: var(--leg-b); }
/* the chart itself (Lightweight Charts) sizes to this box: 420 px as Spreader's main pane */
.plotwrap { position: relative; min-width: 0; }
.plot { height: 420px; min-width: 0; }
.plotwrap .msg { position: absolute; inset: 0 70px 30px 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.cfoot { padding: 6px 12px 0; min-height: 26px; }
.src { padding: 8px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

.books { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.gross { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.gross b { color: var(--text); font: 500 13px var(--mono); }
.gross .g { margin-left: auto; } .gross .g b { color: var(--teal); } .gross .g b.neg { color: var(--orange); }
.pair2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.book { display: grid; grid-template-rows: auto auto auto auto auto 1fr auto; font: 12.5px var(--mono); min-width: 0; overflow: hidden; }
.book-h { display: flex; gap: 6px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--line); font-family: var(--sans); min-width: 0; }
.book-h img { width: 16px; height: 16px; border-radius: 4px; }
.exn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tagmk { color: var(--muted); font: 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; }
.book-h a { margin-left: auto; color: var(--muted); text-decoration: none; } .book-h a:hover { color: var(--text); }
.book-h .bstep { flex: none; width: auto; min-width: 58px; margin-left: auto; padding: 2px 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.book-h .bunit + a { display: none; }   /* the leg's own ↗ link in the route header does this; no room beside the step list */
.bunit { min-width: 34px; padding: 2px 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; font: 11px var(--mono); color: var(--muted); }
.bunit:hover { color: var(--text); border-color: var(--muted); }
.book-body { display: contents; }
.cdl-up { stroke: var(--teal); fill: var(--teal); } .cdl-dn { stroke: var(--orange); fill: var(--orange); }
.book-cols, .lv li { display: grid; grid-template-columns: 1fr auto; padding: 0 10px; }
.book-cols { color: var(--muted); font: 12px var(--sans); padding-block: 6px; }
.lv { list-style: none; margin: 0; padding: 0; min-height: 230px; }
.lv li { position: relative; line-height: 23px; }
.lv li i { position: absolute; inset: 1px 0 1px auto; width: var(--w); }
.lv li span { position: relative; }
.ask i { background: var(--orange-bg); } .bid i { background: var(--teal-bg); }
.ask span:first-of-type { color: var(--orange); } .bid span:first-of-type { color: var(--teal); }   /* the depth bar <i> comes first */
.lv li.ask.hit { box-shadow: inset 3px 0 0 var(--orange); } .lv li.bid.hit { box-shadow: inset 3px 0 0 var(--teal); }
.mid { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; border-block: 1px solid var(--line); }
.mid b { font: 600 17px var(--mono); } .mid span { color: var(--muted); }
.btip { position: fixed; z-index: 40; display: grid; grid-template-columns: auto auto; gap: 3px 14px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-s); font: 12px var(--mono); pointer-events: none; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7); }
.btip[hidden] { display: none; }
.btip span { color: var(--muted); } .btip b { font-weight: 500; text-align: right; }
.book-f { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; color: var(--muted); font: 11px var(--mono); border-top: 1px solid var(--line); }
.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: 6px; }
.live.old::before { background: var(--warn); }
.live.off::before { background: var(--orange); }
.book .na { grid-row: 2 / -2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 14px; color: var(--muted); font-family: var(--sans); gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.book .na b { color: var(--text); font: 600 18px var(--mono); }
.book .na a { color: var(--teal); }

.trade { display: grid; gap: 10px; padding: 10px; align-content: start; min-width: 0; }
.trade > * { min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); }
.tabs button { flex: 1; padding: 6px; background: transparent; color: var(--muted); border: 0; border-radius: 6px; }
.tabs button.on { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.leg-form { display: grid; gap: 8px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); }
.leg-h { display: flex; align-items: center; gap: 8px; }
.side { padding: 2px 8px; border-radius: 5px; font: 600 11px var(--mono); }
.side.long { background: var(--teal-bg); color: var(--teal); } .side.short { background: var(--orange-bg); color: var(--orange); }
.keyst { margin-left: auto; color: var(--muted); font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
select, input { width: 100%; min-width: 0; padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); font-family: var(--mono); font-size: 13px; }
input:focus-visible, select:focus-visible { outline-offset: 0; }
.hint { color: var(--muted); font-size: 12px; }
.hint.warn { color: var(--warn); }
.sum { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 6px; }
.sum span { color: var(--muted); } .sum b { color: var(--teal); font: 600 17px var(--mono); white-space: nowrap; } .sum b.neg { color: var(--orange); }
.calc-rows { display: grid; gap: 4px; font: 12px var(--mono); color: var(--muted); }
.calc-rows div { display: flex; justify-content: space-between; gap: 8px; } .calc-rows b { color: var(--text); font-weight: 500; }
.primary { padding: 10px; background: var(--teal); color: var(--bg); border: 0; border-radius: var(--r-s); font-weight: 600; }
.soon { padding: 18px 12px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-s); }

.bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; gap: 12px; }
.bottom .panel { padding: 12px 16px; min-height: 140px; }
.empty { color: var(--muted); padding-top: 30px; text-align: center; }
.balrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.balrow div { display: grid; } .balrow span { color: var(--muted); font-size: 12px; } .balrow .ghost { margin-left: auto; }
svg.ic { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.15em; }
.sigbox { flex-basis: 100%; display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.sigbox label { width: 200px; }
.sigbox .hint { flex-basis: 100%; }
.verdict { margin: 0; }
.verdict.warn { color: var(--warn); }
.tabbody { display: grid; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
#cout { display: grid; gap: 8px; }
.soon { display: grid; gap: 8px; text-align: left; line-height: 1.5; }
.soon b { color: var(--text); }
.soon a { color: var(--teal); }
.toast-host { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
.toast.in { opacity: 1; transform: none; }
.toast .ic { color: var(--teal); }
.blank { padding: 60px 20px; text-align: center; color: var(--muted); }
.blank h1 { color: var(--text); font-size: 20px; margin-bottom: 8px; }

@media (max-width: 1400px) {
  body { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar .grp b, .sidebar .grp a span, .logo span { display: none; }
  .grp a { justify-content: center; } .grp a .ic { font-size: 19px; }
  .work { grid-template-columns: minmax(0, 1fr) 470px; }
  .trade { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade .tabs, .trade .wide { grid-column: 1 / -1; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m:nth-child(4n+1) { border-left: 0; } .m:nth-child(n+5) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  body { display: block; } .sidebar { display: none; }
  .top { padding: 10px 14px; } .top .mnav { display: flex; } .top .mnav + .tg-login { margin-left: 8px; }
  #app { padding: 12px 14px; }
  .acts { margin-left: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m { border-left: 0 !important; border-top: 1px solid var(--line); } .m:nth-child(-n+2) { border-top: 0; }
  .work, .bottom { grid-template-columns: minmax(0, 1fr); }
  .trade { grid-template-columns: minmax(0, 1fr); }
  .plot { height: 300px; }
  .lv { min-height: 0; } .lv li { font-size: 11.5px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 520px) {   /* two books side by side: the route header already names spot or perp */
  .book-h .tagmk { display: none; }
}
@media (max-width: 900px) {   /* the venue menu as a sheet under the header, so leg B's never runs off the right edge */
  .legmenu { position: fixed; left: 14px; right: 14px; top: 64px; width: auto; max-width: none; max-height: 70vh; }
}

/* ---- trading: the panel on the spread page and trade.html (orders go through spreadtrade on twap) ---- */
.tg-login { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.tg-login iframe { vertical-align: middle; }
.tg-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tg-who .ic, .tg-who svg { color: var(--muted); }
.tg-out { padding: 4px 10px; }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-acct { font-size: 12px; color: var(--muted); text-decoration: none; padding: 3px 8px; border: 1px dashed var(--line); border-radius: 999px; }
.tp-acct.live { color: var(--warn); border: 1px solid var(--warn); }
label .seg { width: max-content; }
.primary { width: 100%; }
.primary.close { background: var(--orange); }
.primary:hover:not(:disabled) { filter: brightness(1.08); }
.tp-job, .tp-pos { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); }
.tp-jh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.chip.running, .chip.open, .chip.ok, .chip.done { color: var(--teal); border-color: var(--teal); }
.chip.waiting { color: var(--text); }
.chip.paused, .chip.one_leg, .chip.legs_differ, .chip.unchecked, .chip.waiting_api_key { color: var(--warn); border-color: var(--warn); }
.chip.failed, .chip.error, .chip.stopped { color: var(--orange); border-color: var(--orange); }
.tp-bar { height: 4px; border-radius: 2px; background: var(--bg); overflow: hidden; }
.tp-bar i { display: block; height: 100%; background: var(--teal); transition: transform 0.3s; }
.tp-btns { display: flex; gap: 8px; }
.tp-btns .ghost { flex: 1; justify-content: center; }
.calc-rows b.pos { color: var(--teal); } .calc-rows b.neg { color: var(--orange); }
.tp-ord summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.tp-ord .calc-rows { margin-top: 6px; }

/* trade.html */
.tpage { display: grid; gap: 12px; }
.tpage-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.tpage-h h1 { font-size: 20px; letter-spacing: -0.01em; margin-right: auto; }
.tpage-h .note { flex-basis: 100%; }
.tpage .seg button { padding: 5px 12px; }
.tsec { padding: 14px 16px; display: grid; gap: 12px; min-width: 0; }
.tsec h2 { font-size: 15px; }
.tsec .lead { color: var(--muted); font-size: 13px; max-width: 72ch; }
.ttable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ttable th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ttable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ttable td.n, .ttable th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ttable tr:last-child td { border-bottom: 0; }
.ttable a { text-decoration: none; } .ttable a:hover { text-decoration: underline; }
.ttable .pos { color: var(--teal); } .ttable .neg { color: var(--orange); }
.twrap { overflow-x: auto; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kcard { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); }
.kcard h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcard ol { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; display: grid; gap: 3px; }
.kcard .num { color: var(--text); }
.kcard textarea { font: 11px/1.4 var(--mono); width: 100%; min-height: 96px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px; }
.kcard .row { display: flex; gap: 8px; flex-wrap: wrap; }
.kcard .row .ghost { flex: 1; justify-content: center; }
.kinfo { display: grid; gap: 3px; font: 12px var(--mono); color: var(--muted); }
.kinfo b { color: var(--text); font-weight: 500; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.danger { color: var(--orange); border-color: var(--orange); }
@media (max-width: 900px) { .row2 { grid-template-columns: 1fr; } .tpage-h h1 { flex-basis: 100%; } }