:root{
  --bg:#000000;
  --panel:#0a0a0a;
  --amber:#ffae00;
  --amber-dim:#8a6a1c;
  --amber-faint:#3d2f0c;
  --white:#e8e8e8;
  --up:#00e676;
  --down:#ff4545;
  --blue:#0a2a6b;
  --cyan:#4dd0e1;
  --grid:#1a1a1a;
  --ex-binance:#f3ba2f;
  --ex-okx:#4dd0e1;
  --ex-bybit:#b388ff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);overflow:hidden;}
body{
  font-family:Consolas,"Menlo","Lucida Console",monospace;
  font-size:12px;
  color:var(--amber);
  display:flex;flex-direction:column;
}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#050505;}
::-webkit-scrollbar-thumb{background:#333;border:1px solid #1a1a1a;}
::selection{background:var(--amber);color:#000;}

/* ============ COMMAND BAR ============ */
#cmdbar{
  display:flex;align-items:center;gap:10px;
  background:#0d0d0d;border-bottom:2px solid var(--amber-dim);
  padding:6px 10px;flex-shrink:0;
}
#cmdprompt{color:var(--up);font-weight:bold;}
#cmdinput{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--white);font:inherit;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;
  caret-color:var(--amber);
}
#cmdinput::placeholder{color:#444;text-transform:none;letter-spacing:0;}
.gokey{
  background:var(--up);color:#000;font-weight:bold;
  padding:2px 10px;cursor:pointer;user-select:none;font-size:11px;
}
.gokey:active{filter:brightness(0.8);}
#clock{color:var(--cyan);white-space:nowrap;}
#leds{display:flex;align-items:center;gap:10px;white-space:nowrap;color:#777;font-size:10px;}
.exled{display:flex;align-items:center;gap:4px;}
.dot{width:7px;height:7px;border-radius:50%;background:#555;}
.dot.on{background:var(--up);box-shadow:0 0 5px var(--up);}
.dot.err{background:var(--down);box-shadow:0 0 5px var(--down);}
.dot.na{background:#333;}
.dot.stale{background:var(--amber);box-shadow:0 0 5px var(--amber);}

/* ============ SECURITY HEADER ============ */
#sechead{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  background:var(--blue);
  padding:5px 12px;flex-shrink:0;border-bottom:1px solid #000;
  color:var(--white);
}
#sec-sym{font-size:17px;font-weight:bold;color:#ffd54f;letter-spacing:1px;}
#sec-px{font-size:17px;font-weight:bold;}
#sec-chg{font-size:13px;font-weight:bold;}
.sh-item{color:#b9c4e0;font-size:11px;}
.sh-item b{color:var(--white);font-weight:normal;}

/* ============ LAYOUT ============ */
#main{flex:1;display:grid;min-height:0;
  grid-template-columns:minmax(320px,25%) 1fr minmax(240px,19%);
  gap:2px;background:#1a1a1a;}
.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0;min-width:0;}
.ptitle{
  background:#161616;color:var(--amber);font-weight:bold;
  padding:3px 8px;border-bottom:1px solid var(--amber-faint);
  letter-spacing:1px;font-size:11px;flex-shrink:0;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.ptitle .sub{color:#666;font-weight:normal;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

#centercol{display:flex;flex-direction:column;gap:2px;background:#1a1a1a;min-height:0;}
#chartpanel{flex:1;}
#spreadpanel{height:196px;flex-shrink:0;}

/* ============ MONITOR ============ */
#monwrap{flex:1;overflow-y:auto;overflow-x:hidden;}
table.mon{width:100%;border-collapse:collapse;table-layout:fixed;}
table.mon th{
  position:sticky;top:0;background:#111;color:#999;text-align:right;
  padding:3px 6px;font-weight:normal;cursor:pointer;user-select:none;
  border-bottom:1px solid var(--amber-faint);white-space:nowrap;font-size:10px;
}
table.mon th:first-child{text-align:left;}
table.mon th:hover{color:var(--amber);}
table.mon th .arr{color:var(--amber);}
table.mon td{
  padding:2px 6px;text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--white);cursor:pointer;
}
table.mon td:first-child{text-align:left;color:var(--amber);font-weight:bold;}
table.mon tr:hover td{background:#14140a;}
table.mon tr.sel td{background:var(--amber-faint);}
.up{color:var(--up) !important;}
.down{color:var(--down) !important;}
.flashU{animation:fu .5s;}
.flashD{animation:fd .5s;}
@keyframes fu{0%{background:#00512e;}100%{background:transparent;}}
@keyframes fd{0%{background:#571414;}100%{background:transparent;}}

/* ============ CHART ============ */
#regimebadge{font-size:10px;color:#666;letter-spacing:.5px;}
#regimebadge.trending{color:var(--amber);}
#regimebadge.meanrev{color:var(--cyan);}
#ivbar{display:flex;gap:2px;}
.ivbtn{background:#222;color:#999;border:none;font:inherit;font-size:10px;
  padding:1px 7px;cursor:pointer;}
.ivbtn:hover{color:var(--amber);}
.ivbtn.on{background:var(--amber);color:#000;font-weight:bold;}
#chartwrap{flex:1;position:relative;min-height:0;}
#chart{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;}
#chartmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#555;pointer-events:none;}

/* ============ SPREAD PANEL ============ */
#spreadbody{flex:1;display:flex;min-height:0;}
#spreadleft{flex:5;min-width:0;display:flex;flex-direction:column;padding:4px 8px;gap:2px;}
#spreadright{flex:4;min-width:0;position:relative;border-left:1px solid #1a1a1a;}
#spark{position:absolute;inset:0;width:100%;height:100%;}
table.spr{width:100%;border-collapse:collapse;table-layout:fixed;}
table.spr th{color:#777;font-weight:normal;text-align:right;font-size:10px;padding:1px 5px;
  border-bottom:1px solid #222;}
table.spr th:first-child{text-align:left;}
table.spr td{padding:2px 5px;text-align:right;white-space:nowrap;color:var(--white);
  overflow:hidden;text-overflow:ellipsis;}
table.spr td:first-child{text-align:left;font-weight:bold;}
td.bestbid{color:var(--up) !important;font-weight:bold;}
td.bestask{color:var(--down) !important;font-weight:bold;}
#xsummary{margin-top:auto;padding-top:3px;border-top:1px solid #222;color:var(--cyan);
  font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#xsummary .arb{color:#000;background:var(--up);padding:0 5px;font-weight:bold;}
#xsummary .noarb{color:#666;}

/* ============ BOOK / TAPE ============ */
#rightcol{display:flex;flex-direction:column;gap:2px;background:#1a1a1a;min-height:0;}
#bookpanel{flex:11;}#tapepanel{flex:9;}
.bt{width:100%;border-collapse:collapse;table-layout:fixed;}
.bt td{padding:1px 8px;white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;}
.bt td.px{text-align:left;}
.bt td.qt{text-align:right;color:#bbb;}
.depthbar{position:absolute;top:0;bottom:0;right:0;opacity:.16;}
#bookwrap,#tapewrap{flex:1;overflow-y:auto;}
#spreadrow{background:#111;color:var(--cyan);text-align:center;padding:2px;
  border-top:1px solid #222;border-bottom:1px solid #222;font-size:11px;}
#imbrow{background:#111;padding:3px 8px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #222;font-size:10px;color:#888;}
#imblabel{flex-shrink:0;white-space:nowrap;}
#imbbar{flex:1;height:6px;background:var(--down);position:relative;overflow:hidden;}
#imbfill{position:absolute;top:0;bottom:0;left:0;background:var(--up);width:50%;}
#liqrow{background:#111;color:#888;text-align:center;padding:3px;
  border-bottom:1px solid #222;font-size:10px;}

/* ============ HINT POPOVER (tap/click info for beginner-facing indicators) ============ */
.hintable{cursor:help;border-bottom:1px dotted #666;}
.hintpop{position:fixed;z-index:999;max-width:min(280px,calc(100vw - 16px));
  background:#111;border:1px solid #444;color:#ccc;font-size:11px;line-height:1.6;
  padding:8px 10px;white-space:pre-wrap;box-shadow:0 4px 16px rgba(0,0,0,.7);}

/* ============ STALE DATA ============ */
.panel.stale{opacity:.45;}
.panel.stale .ptitle::after{content:"STALE";color:#000;background:var(--down);
  padding:0 5px;font-size:9px;margin-left:6px;}

/* ============ STATUS BAR ============ */
#statusbar{
  background:#0d0d0d;border-top:2px solid var(--amber-dim);
  padding:3px 10px;display:flex;gap:16px;flex-shrink:0;
  color:#777;overflow:hidden;white-space:nowrap;font-size:11px;
}
#statusbar .fk{color:#000;background:#666;padding:0 5px;margin-right:3px;}
#statusbar .fkl{color:#aaa;cursor:pointer;}
#statusbar .fkl:hover{color:var(--amber);}
#msgline{color:var(--amber);}

/* ============ MOBILE: stacked, page-scrollable ============ */
@media (max-width:900px){
  html,body{height:auto;min-height:100dvh;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;}
  body{font-size:11px;display:block;}

  #cmdbar{position:sticky;top:0;z-index:20;flex-wrap:wrap;row-gap:4px;}
  #cmdinput{min-width:140px;font-size:16px;} /* 16px prevents iOS zoom-on-focus */
  #clock{display:none;}

  #sechead{gap:10px;padding:5px 8px;}
  #sec-sym{font-size:15px;}#sec-px{font-size:15px;}

  #main{display:flex;flex-direction:column;gap:2px;min-height:0;}
  .panel{flex:none;}

  /* fixed, comfortable heights; inner areas scroll independently */
  #main > .panel:first-child{height:320px;}          /* monitor */
  #centercol{display:flex;flex-direction:column;gap:2px;}
  #chartpanel{height:300px;flex:none;}
  #spreadpanel{height:auto;flex:none;}
  #spreadbody{flex-direction:column;}
  #spreadleft{flex:none;}
  #spreadright{flex:none;height:110px;border-left:none;border-top:1px solid #1a1a1a;}
  #rightcol{display:flex;flex-direction:row;height:280px;}
  #bookpanel,#tapepanel{flex:1;}

  #statusbar{position:static;flex-wrap:wrap;row-gap:2px;}
  #statusbar span:nth-child(2),#statusbar span:nth-child(3){display:none;}

  /* bigger touch targets */
  .ivbtn{padding:4px 10px;font-size:11px;}
  table.mon td{padding:5px 6px;}
  .gokey{padding:5px 12px;}
}