:root{
  --teal:#0a8078; --teal-dk:#075e58;
  --silver:#c3c7cb; --silver-lt:#e8ebee; --silver-dk:#87898c; --silver-dkr:#5a5c5e;
  --navy:#00007b; --navy2:#1084d0;
  --ink:#0b0b0b; --ink-soft:#2a2a2a;
  --lcd-bg:#08150f; --lcd:#39ff6a; --lcd-dim:#1c7a38; --lcd-amber:#ffb000;
  --up:#0a8a2e; --up-lt:#d3f4dc; --down:#c81e1e; --down-lt:#f7d6d6;
  --gold:#ffb000;
  --mono:'VT323',ui-monospace,monospace;
  --pixel:'Press Start 2P',monospace;
  --sans:'Tahoma','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--teal); color:var(--ink);
  font-family:var(--sans); font-size:13px;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:3px 3px;
  -webkit-font-smoothing:none;
}
/* ---- bevels ---- */
.out{border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.in{border:2px solid; border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.btn{
  font-family:var(--sans); font-size:12px; background:var(--silver); color:var(--ink);
  padding:4px 12px; cursor:pointer; min-width:70px;
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);
}
.btn:active{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr); padding:5px 11px 3px 13px;}
.btn:focus-visible{outline:1px dotted #000; outline-offset:-4px;}

/* ================= BOOT ================= */
#boot{position:fixed; inset:0; background:#000; color:#c9c9c9; z-index:200;
  font-family:var(--mono); font-size:19px; padding:26px 30px; line-height:1.25;}
#boot .amber{color:var(--lcd-amber);}
#boot .grn{color:var(--lcd);}
#boot .logo{font-family:var(--pixel); font-size:15px; color:#fff; margin:6px 0 20px; letter-spacing:1px;}
#boot .bar{margin-top:18px; width:340px;}
#boot .barTrack{height:16px; background:#111; border:1px solid #444; padding:2px;}
#boot .barFill{height:100%; width:0; background:var(--lcd);}
#boot .blink::after{content:'_'; animation:bl 1s steps(1) infinite;}
@keyframes bl{50%{opacity:0}}

/* ================= DESKTOP ================= */
#desktop{position:fixed; inset:0 0 32px 0; padding:10px;}
.icons{display:flex; flex-direction:column; gap:16px; width:88px;}
.icon{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; text-align:center;
  color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.6); font-size:11px; padding:3px;}
.icon:focus-visible{outline:1px dotted #fff;}
.icon .glyph{width:42px; height:42px; display:grid; place-items:center; font-size:26px;
  background:var(--silver); border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.icon .lbl{background:transparent; padding:1px 3px;}

/* ================= WINDOW ================= */
.win{position:absolute; background:var(--silver); display:flex; flex-direction:column;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);}
.win.out{padding:2px;}
#app{ width:min(980px,96vw); height:min(660px,calc(100vh - 120px)); left:120px; top:24px;}
.titlebar{background:linear-gradient(90deg,var(--navy),var(--navy2)); color:#fff;
  display:flex; align-items:center; gap:6px; padding:3px 4px; font-weight:bold; cursor:move; user-select:none;}
.titlebar .tbicon{font-size:14px}
.titlebar .ttl{font-size:12px; letter-spacing:.3px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tbtn{width:20px; height:18px; display:grid; place-items:center; background:var(--silver);
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);
  font-size:11px; font-weight:bold; cursor:pointer; color:#000; line-height:1; font-family:var(--sans);}
.tbtn:active{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.menubar{display:flex; gap:2px; padding:2px 4px; background:var(--silver); border-bottom:1px solid var(--silver-dk);}
.menubar span{padding:2px 8px; cursor:default;}
.menubar span:hover{background:var(--navy); color:#fff;}
.menubar u{text-decoration:underline;}

.workspace{flex:1; padding:6px; display:grid; gap:6px; overflow:auto;
  grid-template-columns:1.15fr 1.45fr 1fr; grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "lcd    lcd    ticket"
    "book   chart  ticket"
    "book   blotter positions";
  background:var(--teal-dk);}

.panel{background:var(--silver); padding:3px; display:flex; flex-direction:column; min-height:0;}
.panel > .cap{font-size:11px; font-weight:bold; padding:2px 5px; color:#fff;
  background:linear-gradient(90deg,#3a3a3a,#6a6a6a); display:flex; justify-content:space-between; align-items:center; letter-spacing:.3px;}
.panel > .body{flex:1; min-height:0; background:#fff; padding:5px; overflow:auto;}

/* ---- LCD ticker ---- */
#lcd{grid-area:lcd;}
#lcd .body{background:var(--lcd-bg); color:var(--lcd); font-family:var(--mono);
  display:flex; align-items:center; gap:18px; padding:8px 12px; position:relative;
  box-shadow:inset 0 0 26px rgba(0,0,0,.9);}
#lcd .body::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);}
.lcdSym{font-family:var(--pixel); font-size:13px; color:#fff;}
.lcdPx{font-size:44px; line-height:.8; font-weight:bold; letter-spacing:1px; text-shadow:0 0 8px var(--lcd);}
.lcdChg{font-size:26px; line-height:1;}
.lcdChg.dn{color:#ff5b5b; text-shadow:0 0 8px #ff5b5b;}
.lcdMeta{margin-left:auto; font-size:19px; text-align:right; color:var(--lcd-dim); line-height:1.15;}
.lcdMeta b{color:var(--lcd-amber); text-shadow:0 0 6px var(--lcd-amber);}

/* ---- order book (L2) ---- */
#book{grid-area:book;}
#book .body{padding:0; font-family:var(--mono); font-size:17px;}
.l2head{display:grid; grid-template-columns:1fr 1fr 1.3fr; padding:3px 8px; font-size:12px;
  font-family:var(--sans); font-weight:bold; color:#333; border-bottom:1px solid #999; position:sticky; top:0; background:#eee;}
.l2head span:nth-child(2){text-align:right} .l2head span:nth-child(3){text-align:right}
.l2row{display:grid; grid-template-columns:1fr 1fr 1.3fr; padding:1px 8px; position:relative; align-items:center;
  font-variant-numeric:tabular-nums;}
.l2row .depth{position:absolute; top:1px; bottom:1px; right:0; opacity:.85; z-index:0;}
.l2row.ask .depth{background:var(--down-lt);}
.l2row.bid .depth{background:var(--up-lt);}
.l2row > span{position:relative; z-index:1;}
.l2row .px{font-weight:bold}
.l2row.ask .px{color:var(--down)} .l2row.bid .px{color:var(--up)}
.l2row .sz{text-align:right; color:#333} .l2row .tot{text-align:right; color:#666}
.l2spread{display:flex; justify-content:space-between; padding:3px 8px; background:var(--lcd-bg); color:var(--lcd);
  font-family:var(--mono); font-size:16px; border-block:1px solid #000;}
.l2spread b{color:var(--lcd-amber)}

/* ---- chart ---- */
#chart{grid-area:chart;}
#chart .body{padding:0; background:var(--lcd-bg); position:relative;}
#chart canvas{display:block; width:100%; height:100%;}
.tf{display:flex; gap:3px;}
.tf button{font-family:var(--sans); font-size:10px; padding:1px 6px; cursor:pointer; background:var(--silver);
  border:1px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt); color:#000;}
.tf button.on{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr); background:var(--gold);}

/* ---- ticket ---- */
#ticket{grid-area:ticket;}
#ticket .body{display:flex; flex-direction:column; gap:7px; background:var(--silver); padding:7px;}
.balbox{background:var(--lcd-bg); color:var(--lcd); font-family:var(--mono); padding:6px 8px; font-size:17px; line-height:1.35;}
.balbox .row{display:flex; justify-content:space-between}
.balbox b{color:#fff} .balbox .amber{color:var(--lcd-amber)}
.segbtns{display:flex; gap:0;}
.segbtns button{flex:1; font-family:var(--pixel); font-size:11px; padding:9px 0; cursor:pointer; color:#fff;
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.segbtns .buy{background:#1a7f38;} .segbtns .buy.on{background:var(--up); box-shadow:inset 0 0 0 2px #fff;}
.segbtns .sell{background:#a33;} .segbtns .sell.on{background:var(--down); box-shadow:inset 0 0 0 2px #fff;}
.segbtns button:not(.on){filter:brightness(.62) saturate(.6);}
.fld{display:flex; flex-direction:column; gap:2px;}
.fld label{font-size:11px; font-weight:bold; color:#333; text-transform:uppercase; letter-spacing:.4px;}
.fld input,.fld select{font-family:var(--mono); font-size:18px; padding:3px 6px; background:#fff; color:#000;
  border:2px solid; border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.fld input:focus,.fld select:focus{outline:1px dotted #000; outline-offset:-4px;}
.ordtype{display:flex; gap:8px; font-size:12px;}
.ordtype label{display:flex; align-items:center; gap:3px; cursor:pointer; text-transform:none; letter-spacing:0;}
.qq{display:flex; gap:3px;}
.qq button{flex:1; font-size:11px; padding:3px 0; cursor:pointer; background:var(--silver-lt);
  border:1px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.estimate{font-family:var(--mono); font-size:16px; color:#333; display:flex; justify-content:space-between;
  background:#fff; padding:4px 6px; border:1px solid #aaa;}
.estimate b{color:#000}
.placebtn{font-family:var(--pixel); font-size:12px; padding:12px 0; color:#fff; cursor:pointer; width:100%;
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt); background:var(--up);}
.placebtn.sell{background:var(--down);}
.placebtn:active{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.msg{font-family:var(--mono); font-size:15px; min-height:20px; padding:2px 4px; color:var(--down);}
.msg.ok{color:var(--up);}

/* ---- tables ---- */
#positions{grid-area:positions;} #blotter{grid-area:blotter;}
table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:16px;}
th{font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.3px; text-align:right;
  background:#eee; color:#333; padding:2px 6px; position:sticky; top:0; border-bottom:1px solid #999;}
th:first-child{text-align:left}
td{padding:1px 6px; text-align:right; font-variant-numeric:tabular-nums; border-bottom:1px dotted #ddd;}
td:first-child{text-align:left; font-weight:bold;}
.pos-up{color:var(--up)} .pos-dn{color:var(--down)}
.empty{color:#999; font-family:var(--sans); font-size:12px; padding:10px; text-align:center;}
.pill{font-family:var(--sans); font-size:10px; font-weight:bold; padding:0 5px; color:#fff;}
.pill.b{background:var(--up)} .pill.s{background:var(--down)}
.cancel{font-family:var(--sans); font-size:10px; padding:0 4px; cursor:pointer; background:var(--silver);
  border:1px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}

/* ---- news ticker ---- */
#newsbar{grid-column:1/-1; display:flex; align-items:center; gap:0; background:#000; height:24px; overflow:hidden;}
#newsbar .tag{background:var(--down); color:#fff; font-family:var(--pixel); font-size:9px; padding:0 8px; height:100%;
  display:flex; align-items:center; white-space:nowrap; z-index:2;}
#newsbar .track{white-space:nowrap; font-family:var(--mono); font-size:17px; color:var(--lcd);
  animation:mar 46s linear infinite; padding-left:100%;}
#newsbar .track span{margin-right:44px;}
#newsbar .track b{color:var(--lcd-amber);}
@keyframes mar{to{transform:translateX(-100%)}}

/* ================= TASKBAR ================= */
#taskbar{position:fixed; left:0; right:0; bottom:0; height:32px; background:var(--silver);
  border-top:2px solid var(--silver-lt); display:flex; align-items:center; gap:5px; padding:3px 5px;}
#start{display:flex; align-items:center; gap:6px; font-weight:bold; padding:2px 10px; cursor:pointer;}
#start .logo{font-family:var(--pixel); font-size:11px; color:var(--navy);}
.taskitem{flex:0 0 200px; display:flex; align-items:center; gap:6px; padding:2px 8px; font-size:12px; cursor:pointer;}
.taskitem.on{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.tray{margin-left:auto; display:flex; align-items:center; gap:8px; padding:3px 10px; font-family:var(--mono); font-size:16px;}
.tray .net{color:var(--up); font-weight:bold;}

@media (max-width:760px){
  #app{left:2vw; top:8px; width:96vw; height:calc(100vh - 100px);}
  .workspace{grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas:"lcd" "ticket" "book" "chart" "blotter" "positions";}
  #chart .body{min-height:150px} #book .body{max-height:200px}
  .icons{display:none}
}
@media (prefers-reduced-motion:reduce){
  #newsbar .track{animation:none; padding-left:8px;}
  #boot .blink::after{animation:none}
}