:root {
  --bg: #05070f; --pane: rgba(5, 8, 18, 0.9); --line: #17305a; --ink: #e8eefc; --dim: #8fa3bf; --faint: #55617a;
  --green: #3dff8b; --pink: #ff3d9a; --cyan: #41c6ff; --gold: #ffd23d; --orange: #f2a54a; --red: #ff3b4e;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --pixel: "Silkscreen", "JetBrains Mono", monospace;
  --top-h: 60px; --strip-h: 34px; --left-w: 380px; --right-w: 400px; --frame: rgba(61, 255, 139, 0.55);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13px/1.45 var(--mono); overflow: hidden; }
a { color: var(--cyan); }
button { font: inherit; cursor: pointer; }
#floor { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.frame { position: fixed; inset: 4px; z-index: 6; border: 1px solid var(--frame); border-radius: 3px; pointer-events: none; transition: border-color 0.3s, box-shadow 0.3s; }
.frame.hot { border-color: var(--pink); box-shadow: 0 0 22px rgba(255, 61, 154, 0.45) inset; animation: hot 0.9s steps(2) infinite; }
@keyframes hot { 50% { border-color: rgba(255, 61, 154, 0.35); } }

.top { position: fixed; z-index: 5; top: 4px; left: 4px; right: 4px; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 7, 15, 0.96), rgba(5, 7, 15, 0.78)); }
.title { display: flex; align-items: center; gap: 10px; color: var(--green); text-decoration: none; font: 700 30px/1 var(--pixel); letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(61, 255, 139, 0.55); }
.title img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 61, 154, 0.6); }
.grow { flex: 1; }
.chip { font: 700 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--dim); background: rgba(5, 7, 15, 0.8); white-space: nowrap; }
.chip.live { color: var(--green); border-color: rgba(61, 255, 139, 0.5); }
.chip.ca { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 12px; }
.ctr { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.ctr i { font: 700 9.5px var(--mono); font-style: normal; letter-spacing: 0.12em; color: var(--faint); }
.ctr b { font: 800 19px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ctr.round b { color: var(--gold); }
.icon { font: 700 12px var(--mono); color: var(--ink); text-decoration: none; background: rgba(5, 7, 15, 0.8); border: 1px solid var(--line); border-radius: 3px; padding: 6px 9px; }
.icon:hover { border-color: var(--green); color: var(--green); }
.icon.off { color: var(--faint); text-decoration: line-through; }

.pane { position: fixed; z-index: 4; top: calc(4px + var(--top-h)); bottom: calc(4px + var(--strip-h)); background: var(--pane); overflow: hidden; }
.pane.left { left: 4px; width: var(--left-w); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.pane.right { right: 4px; width: var(--right-w); border-left: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.pbar { font: 600 11.5px var(--mono); color: var(--dim); padding: 7px 12px; border-bottom: 1px solid var(--line); background: rgba(23, 48, 90, 0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar b { color: var(--green); }
.pbar span { color: var(--faint); }
.log { list-style: none; margin: 0; padding: 6px 12px; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11.5px; }
.log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.log li.new { animation: type 0.35s steps(6); }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.log .t { color: var(--faint); }
.log .open { color: var(--green); } .log .close { color: var(--gold); } .log .loss { color: var(--pink); } .log .skip { color: var(--faint); }
.log .jev { color: #b28cff; } .log .sys { color: var(--cyan); } .log .win { color: var(--gold); font-weight: 700; }

.htop { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.htop th { text-align: left; font-weight: 700; color: #04130a; background: var(--green); padding: 3px 6px; font-size: 10.5px; }
.htop td { padding: 3px 6px; color: var(--dim); border-bottom: 1px solid rgba(23, 48, 90, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.htop tr.top3 td { color: var(--ink); background: rgba(255, 61, 154, 0.09); }
.htop tr.top3 td:first-child { box-shadow: inset 2px 0 0 var(--pink); }
.htop tr.mine td { color: var(--pink); }
.htop .pos { color: var(--green); } .htop .neg { color: var(--pink); }
.box { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.box b { color: var(--ink); font-size: 13px; }
.how p { margin: 6px 0; color: var(--dim); font-size: 12px; }
.small { font-size: 11.5px; color: var(--dim); margin: 6px 0 0; }
.find { display: flex; gap: 6px; margin-top: 8px; }
.find input { flex: 1; min-width: 0; background: #02040a; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 8px 9px; font: 12px var(--mono); }
.find input:focus { outline: none; border-color: var(--green); }
.find button { background: var(--green); color: #04130a; border: 0; border-radius: 3px; padding: 0 12px; font-weight: 800; }
.past { list-style: none; margin: 0; padding: 6px 12px; font-size: 11.5px; }
.past li { padding: 4px 0; color: var(--dim); border-bottom: 1px dashed rgba(23, 48, 90, 0.6); }
.past b { color: var(--ink); }
.fine p { font-size: 11px; color: var(--faint); margin: 0 0 6px; }

.strip { position: fixed; z-index: 5; left: 4px; right: 4px; bottom: 4px; height: var(--strip-h); display: flex; align-items: center; gap: 14px; padding: 0 14px;
  border-top: 1px solid var(--line); background: rgba(5, 7, 15, 0.95); font-size: 12px; color: var(--dim); overflow: hidden; }
.strip .own { display: flex; gap: 16px; white-space: nowrap; overflow: hidden; }
.strip .buy { color: var(--green); } .strip .sell { color: var(--pink); } .strip .dim { color: var(--faint); }
.strip .stats b { color: var(--ink); }
.strip .cta { color: var(--green); font: 700 12px var(--pixel); letter-spacing: 0.03em; }
.toast { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--strip-h) + 18px); transform: translateX(-50%); max-width: calc(100% - 32px); background: #0b1226; border: 1px solid var(--pink); border-radius: 4px; padding: 9px 13px; font-size: 12px; }

@media (max-width: 1280px) { :root { --left-w: 320px; --right-w: 360px; } }
@media (max-width: 1099px) {
  html, body { overflow: auto; height: auto; }
  #floor { position: fixed; height: 58vh; }
  .frame { display: none; }
  .top { left: 0; right: 0; top: 0; gap: 8px; padding: 0 10px; height: 54px; }
  .title { font-size: 21px; } .title img { width: 26px; height: 26px; }
  .ctr b { font-size: 14px; } .ctr i { font-size: 8.5px; }
  .chip .long { display: none; }
  .pane { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; border: 0; }
  .pane.left { margin-top: 58vh; height: 230px; border-top: 1px solid var(--line); }
  .pane.right { overflow: visible; }
  .strip { position: relative; left: 0; right: 0; bottom: 0; flex-wrap: wrap; height: auto; padding: 10px; }
}
@media (max-width: 520px) {
  .ctr:not(.round) { display: none; }
  .icon { padding: 5px 7px; }
  .chip#status { display: none; }
}