:root {
  --bg: #0a0a0a;
  --panel: #0e0e0e;
  --line: #222;
  --line-soft: #161616;
  --fg: #d4d4d4;
  --dim: #6a6a6a;
  --amber: #f0a500;
  --green: #3fb950;
  --red: #f85149;
  --blue: #58a6ff;
  --sel: #181818;
  --hover: #131313;
  /* Bloomberg Fixed Unicode is the Terminal's own (proprietary) face: used automatically if installed, else the
     closest stock faces (Lucida Console on Windows). */
  --mono: "Bloomberg Fixed Unicode", "Bloomberg Fixed", "Lucida Console", "Lucida Sans Typewriter", Consolas, "Cascadia Mono", Menlo, monospace;
  --t: 120ms cubic-bezier(0.2, 0, 0, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg); font: 12px/1.35 var(--mono);
  display: grid; grid-template-rows: 26px 1fr 18px; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.num, td, .stats span, #bar { font-variant-numeric: tabular-nums; }

/* header */
#bar { display: flex; align-items: center; gap: 20px; padding: 0 10px; border-bottom: 1px solid var(--line); background: #000; white-space: nowrap; }
.brand { color: var(--amber); font-weight: 700; letter-spacing: 2px; }
.kv { display: inline-flex; gap: 6px; align-items: baseline; }
.kv b { color: var(--dim); font-weight: 400; font-size: 10px; letter-spacing: 1px; }
.agent { margin-left: auto; color: var(--dim); font-size: 10px; letter-spacing: 1px; }
.agent i, #status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2a2a2a; margin: 0 5px 0 12px; vertical-align: 1px; transition: background var(--t); }
#status i { margin: 0 6px 0 0; }
i.ok { background: var(--green); } i.warn { background: var(--amber); } i.bad { background: var(--red); }

/* layout */
#grid { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) minmax(0, 24%); min-height: 0; }
.panel { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
.panel:last-child { border-right: 0; }
#center { overflow: hidden; }
.ph { display: flex; gap: 6px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); min-height: 28px; }
.ph.head { min-height: 46px; gap: 10px; }
.ph.head img { width: 34px; height: 34px; image-rendering: pixelated; object-fit: contain; }
.ph.head div { display: flex; flex-direction: column; line-height: 1.25; }
#d-title { color: var(--amber); font-weight: 700; letter-spacing: 0.5px; }
#d-title:empty::before { content: "\00a0"; }
.sh { padding: 4px 8px 3px; color: var(--amber); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0b0b; letter-spacing: 1.5px; font-size: 10px; }
.scroll { overflow: auto; flex: 1; min-height: 0; }
.scroll.s { flex: 0 1 auto; max-height: 190px; }
#left .scroll { flex: 1; }

/* controls */
input, select {
  background: #000; color: var(--fg); border: 1px solid var(--line); font: inherit; padding: 2px 8px; outline: none; height: 22px;
  transition: border-color var(--t);
}
input { flex: 1; }
input:focus, select:focus { border-color: #555; }
input::placeholder { color: var(--dim); }
select { color: var(--dim); font-size: 10px; letter-spacing: 1px; }
.seg { display: inline-flex; }
.seg button {
  background: #000; color: var(--dim); border: 1px solid var(--line); border-left-width: 0; font: inherit; font-size: 10px; letter-spacing: 1px;
  padding: 0 7px; height: 18px; cursor: pointer; transition: color var(--t), background var(--t);
}
.seg button:first-child { border-left-width: 1px; }
.seg button:hover { color: var(--fg); }
.seg button.on { color: var(--fg); background: #1a1a1a; }
#chart-ranges button.on { color: var(--amber); }

/* tables */
table { border-collapse: collapse; width: 100%; }
th { position: sticky; top: 0; background: #0b0b0b; color: var(--dim); font-weight: 400; text-align: left; padding: 3px 8px 2px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: 1px; white-space: nowrap; z-index: 1; }
td { padding: 1px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; transition: background var(--t); }
td.ic { padding: 0 2px 0 6px; width: 24px; }
td.ic img { width: 18px; height: 18px; image-rendering: pixelated; object-fit: contain; vertical-align: middle; display: inline-block; }
td.ic img.sprite { image-rendering: auto; width: 22px; height: 22px; }
.r { text-align: right; }
tr.sel td { background: var(--sel); box-shadow: inset 2px 0 0 var(--amber); }
tbody tr:hover td { background: var(--hover); }
#assets tbody tr, #d-asks tbody tr, #deals tbody tr, #tape tbody tr { cursor: default; }
.up { color: var(--green); } .down { color: var(--red); } .amber { color: var(--amber); } .blue { color: var(--blue); } .dim { color: var(--dim); }
.pk { color: var(--blue); } .it { color: var(--fg); }
.iv { letter-spacing: 0; }
.iv b { font-weight: 400; color: var(--green); }
.iv i { font-style: normal; color: var(--red); }
canvas.spark { vertical-align: middle; }
small { font-size: 10px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.stats div { padding: 5px 8px 4px; border-right: 1px solid var(--line); min-width: 0; }
.stats div:last-child { border-right: 0; }
.stats b { display: block; color: var(--dim); font-weight: 400; font-size: 10px; letter-spacing: 1px; margin-bottom: 1px; }
.stats span { font-size: 14px; white-space: nowrap; }

/* chart */
#chart-bar { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 3px 8px; border-bottom: 1px solid var(--line); min-height: 24px; }
#chart-legend { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; min-height: 14px; }
#chart { width: 100%; height: 262px; flex: 0 0 auto; background: var(--bg); overflow: hidden; }
#chart-resize { height: 7px; flex: 0 0 auto; cursor: ns-resize; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0b0b; position: relative; transition: background var(--t); }
#chart-resize::after { content: ""; position: absolute; left: 50%; top: 2px; width: 28px; height: 1px; margin-left: -14px; background: #333; }
#chart-resize:hover, #chart-resize.on { background: #161616; }
#chart-resize:hover::after, #chart-resize.on::after { background: var(--amber); }
body.resizing { cursor: ns-resize; user-select: none; }
#chart .uplot { font: inherit; }
#chart .u-select { background: rgba(240, 165, 0, 0.12); }
#chart .u-cursor-x, #chart .u-cursor-y { border-color: #3a3a3a; }
#chart .u-over { cursor: grab; }
body.resizing #chart .u-over { cursor: grabbing; }
#chart .u-axis { transition: background var(--t); }
#chart .u-axis:hover { background: rgba(255, 255, 255, 0.03); }

/* detail */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split > div { border-right: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.split > div:last-child { border-right: 0; }
.card { border-top: 1px solid var(--line); background: #0b0b0b; padding: 6px 10px 8px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 18px; font-size: 11px; }
.card h4 { margin: 0 0 4px; color: var(--amber); font-weight: 400; font-size: 10px; letter-spacing: 1.5px; }
.card table { width: auto; }
.card td { padding: 0 8px 0 0; border: 0; }
.card .bar { display: inline-block; height: 5px; background: var(--amber); vertical-align: middle; }
.card .bar.ev { background: var(--blue); }
.card .lore { color: var(--dim); white-space: pre-wrap; max-height: 90px; overflow: auto; font-size: 10px; }
.chat div { padding: 1px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .t { color: var(--dim); margin-right: 8px; }
.chat .s { color: var(--blue); margin-right: 8px; }
.chat .buy { color: var(--green); } .chat .sell { color: var(--amber); }

/* footer */
#status { display: flex; align-items: center; padding: 0 10px; border-top: 1px solid var(--line); background: #000; color: var(--dim); font-size: 10px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; }

/* tabs (mobile only) */
#tabs { display: none; }

/* responsive */
@media (max-width: 1400px) {
  #grid { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 32vh); }
  #right { grid-column: 1 / -1; border-top: 1px solid var(--line); flex-direction: row; }
  #right > .sh { writing-mode: vertical-rl; transform: rotate(180deg); border: 0; border-left: 1px solid var(--line); padding: 8px 3px; }
  #right > .scroll { flex: 1 1 0; max-height: none; border-right: 1px solid var(--line); }
  #right > .scroll:last-child { border-right: 0; }
}
@media (max-width: 900px) {
  body { grid-template-rows: 26px minmax(0, 1fr) 34px; font-size: 12px; }
  #bar { gap: 12px; overflow-x: auto; scrollbar-width: none; }
  #bar::-webkit-scrollbar { display: none; }
  #bar .kv b { display: none; }
  #bar .agent { margin-left: 0; }
  #grid { display: block; min-height: 0; height: 100%; }
  .panel { display: none; height: 100%; border-right: 0; }
  .panel.active { display: flex; }
  #right { flex-direction: column; }
  #right > .sh { writing-mode: horizontal-tb; transform: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 8px 3px; }
  #right > .scroll { flex: 1 1 0; max-height: none; border-right: 0; }
  .ph { flex-wrap: wrap; }
  input, select { height: 28px; }
  .seg button { height: 24px; padding: 0 9px; }
  #chart-bar { flex-wrap: wrap; row-gap: 4px; }
  #chart-legend { flex-basis: 100%; order: 3; min-height: 0; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats div:nth-child(3n) { border-right: 0; }
  .stats div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .split { grid-template-columns: 1fr; }
  .split > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .card { grid-template-columns: 1fr; gap: 6px 0; }
  td { max-width: 160px; padding: 3px 8px; }
  th { padding: 4px 8px 3px; }
  #assets th:nth-child(4), #assets td:nth-child(4), #assets th:nth-child(7), #assets td:nth-child(7), #assets th:nth-child(9), #assets td:nth-child(9) { display: none; }
  #status { display: none; }
  #tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: #000; }
  #tabs button { background: none; border: 0; color: var(--dim); font: inherit; font-size: 11px; letter-spacing: 2px; height: 34px; cursor: pointer; transition: color var(--t); }
  #tabs button.on { color: var(--amber); box-shadow: inset 0 2px 0 var(--amber); }
  #chart-resize { height: 14px; }
  #chart-resize::after { top: 6px; width: 40px; margin-left: -20px; }
}
@media (hover: none) {
  tbody tr:hover td { background: inherit; }
}

::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #262626; } ::-webkit-scrollbar-thumb:hover { background: #333; } ::-webkit-scrollbar-track { background: var(--panel); }