/* ============================================================
   GMT//GLOBAL MARKET TERMINAL — terminal visual system
   black bg · amber command bar · hard-edge windows · mono type
   ============================================================ */
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#000000; --bg-panel:#050505; --bg-raise:#0A0A0A;
  --fg:#D7D7D7; --fg-dim:#8A8A8A; --fg-faint:#5A5A5A;
  --line:#292929; --line-strong:#3A3A3A;
  --amber:#F28C00; --amber-dim:#B26A00; --amber-bg:#1A1000;
  /* 涨跌色（仅用于价格变动）：红涨 / 绿跌 / 灰平 */
  --up:#FF4D4F; --up-deep:#5A1416; --down:#00C176; --down-deep:#004D30;
  --flat:#6E6E6E; --cyan:#4DD0E1;
  /* 状态色（成功/危险/警告，与涨跌无关）：青 / 洋红 / 琥珀 */
  --ok:#4DD0E1; --danger:#FF5C8A; --warn:#F28C00;
  --mono:'IBM Plex Mono','PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',Menlo,Consolas,monospace;
  --cmdbar-h:34px; --tape-h:30px; --toolbar-h:32px;
  --gap:8px; --rowh:84px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg)}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:12px;line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:var(--mono);font-size:11px;background:none;border:1px solid var(--line-strong);
  color:var(--fg);cursor:pointer;padding:2px 8px;border-radius:0}
button:hover{border-color:var(--amber);color:var(--amber)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
::selection{background:var(--amber);color:#000}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--amber);color:#000;padding:4px 10px;z-index:999}
.skip-link:focus{left:0}
.hidden{display:none!important}

/* ---------- command bar ---------- */
#cmdbar{
  height:var(--cmdbar-h);display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#F28C00 0%,#E07F00 100%);
  color:#000;padding:0 10px;position:sticky;top:0;z-index:200;
  border-bottom:1px solid #000;
}
.cmd-left{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.cmd-logo{font-weight:700;font-size:13px;letter-spacing:.5px}
.cmd-logo b{font-weight:700;opacity:.55}
.cmd-ver{font-size:10px;opacity:.7}
.cmd-mid{display:flex;gap:6px;margin-left:8px}
.cmd-btn{border:1px solid rgba(0,0,0,.45);color:#000;font-weight:600;font-size:10px;padding:1px 7px;background:rgba(0,0,0,.08)}
.cmd-btn:hover{background:#000;color:var(--amber);border-color:#000}
.cmd-right{margin-left:auto;display:flex;align-items:center;gap:12px;white-space:nowrap}
.mode-badge{background:#000;color:var(--amber);font-weight:700;font-size:10px;padding:2px 8px;letter-spacing:1px}
.mode-badge.live{background:#000;color:var(--cyan)}
.mode-badge.stale{background:#000;color:var(--amber-dim)}
.conn-status{font-size:10px;font-weight:600}
.cmd-clock{font-weight:700;font-size:13px;min-width:9ch;text-align:right}

/* ---------- ticker tape ---------- */
#tape-wrap{
  height:var(--tape-h);display:flex;align-items:stretch;
  background:var(--bg-panel);border-bottom:1px solid var(--line-strong);
  position:sticky;top:var(--cmdbar-h);z-index:190;overflow:hidden;
}
.tape-ctl{border:none;border-right:1px solid var(--line-strong);color:var(--amber);font-size:10px;padding:0 8px;flex:0 0 auto}
#tape-viewport{overflow:hidden;flex:1;display:flex;align-items:center}
#tape{display:flex;white-space:nowrap;will-change:transform;animation:tape-scroll 90s linear infinite}
#tape.paused{animation-play-state:paused}
#tape-wrap:hover #tape{animation-play-state:paused}
@keyframes tape-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape-item{display:inline-flex;align-items:baseline;gap:7px;padding:0 16px;border-right:1px solid var(--line);
  cursor:pointer;font-size:11px}
.tape-item:hover{background:var(--amber-bg)}
.tape-item .ts{color:var(--fg-dim);font-weight:600}
.tape-item .tl{color:var(--fg);min-width:9ch;text-align:right}
.tape-item .tc{min-width:8ch;text-align:right}
.tape-item .tp{min-width:7ch;text-align:right}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--flat)}

/* ---------- toolbar ---------- */
#toolbar{
  height:var(--toolbar-h);display:flex;align-items:center;gap:6px;
  padding:0 10px;background:var(--bg-panel);border-bottom:1px solid var(--line-strong);
  position:sticky;top:calc(var(--cmdbar-h) + var(--tape-h));z-index:180;overflow-x:auto;scrollbar-width:none;
}
.tb-btn{font-size:10px;letter-spacing:.5px;padding:3px 9px;color:var(--fg-dim)}
.tb-btn[aria-pressed="true"],.tb-btn.on{background:var(--amber);color:#000;border-color:var(--amber);font-weight:700}
.tb-btn.warn:hover{border-color:var(--danger);color:var(--danger)}
.tb-label{color:var(--amber);font-size:10px;font-weight:600}
.tb-sep{width:1px;height:16px;background:var(--line-strong);margin:0 4px;flex:0 0 auto}
.edit-hint{color:var(--amber);font-size:10px;margin-left:auto;white-space:nowrap}
.tb-group{position:relative}
.menu{position:absolute;top:calc(100% + 4px);left:0;background:var(--bg-raise);border:1px solid var(--amber);
  min-width:220px;z-index:300;box-shadow:none}
.menu button{display:flex;justify-content:space-between;width:100%;border:none;border-bottom:1px solid var(--line);
  padding:6px 10px;color:var(--fg);text-align:left}
.menu button:hover{background:var(--amber-bg);color:var(--amber)}
.menu button:disabled{color:var(--fg-faint);cursor:default;background:none}

/* ---------- grid & widgets ---------- */
#grid{position:relative;padding:var(--gap);min-height:60vh}
#ghost{position:absolute;border:1px dashed var(--amber);background:rgba(242,140,0,.08);z-index:150;pointer-events:none}
#ghost.bad{border-color:var(--danger);background:rgba(255,92,138,.08)}
.widget{
  position:absolute;background:var(--bg-panel);border:1px solid var(--line-strong);
  display:flex;flex-direction:column;overflow:hidden;border-radius:1px;
}
.widget.min .w-body{display:none}
.widget.locked .w-drag{cursor:default}
.widget.flash{border-color:var(--amber)}
.w-head{
  flex:0 0 22px;display:flex;align-items:center;gap:6px;
  background:#000;border-bottom:1px solid var(--line-strong);
  padding:0 4px 0 8px;font-size:10px;user-select:none;
}
.widget.focused .w-head,.widget.dragging .w-head{background:var(--amber);color:#000}
.widget.focused .w-head .w-asof,.widget.dragging .w-head .w-asof{color:#000}
.w-num{color:var(--amber);font-weight:700}
.widget.focused .w-num,.widget.dragging .w-num{color:#000}
.w-title{font-weight:600;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-asof{margin-left:auto;color:var(--fg-faint);font-size:9px;white-space:nowrap}
.w-btn{border:none;color:var(--fg-dim);padding:0 5px;font-size:10px;line-height:18px;flex:0 0 auto}
.w-btn:hover{color:var(--amber);background:var(--line)}
.widget.focused .w-btn:hover,.widget.dragging .w-btn:hover{color:#000;background:rgba(0,0,0,.2)}
.w-drag{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 96px);cursor:grab;display:none}
body.editing .w-drag{display:block}
body.editing .widget:not(.locked) .w-drag{cursor:grab}
.w-drag:active{cursor:grabbing}
.w-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;display:none;z-index:5;
  background:linear-gradient(135deg,transparent 50%,var(--amber) 50%)}
body.editing .widget:not(.locked) .w-resize{display:block}
.w-order{display:none;gap:2px}
body.editing .w-order{display:flex}
.w-body{flex:1;overflow:auto;position:relative;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  display:flex;flex-direction:column}
.w-body>*{flex:0 0 auto}
.w-body>.chart-box,.w-body>.session-box{flex:1 1 auto;min-height:70px}
.w-body>.hm-wrap{flex:1 1 auto;min-height:60px}
.w-body::-webkit-scrollbar{width:6px;height:6px}
.w-body::-webkit-scrollbar-thumb{background:var(--line-strong)}

/* ---------- generic widget internals ---------- */
.ctl-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:5px 8px;border-bottom:1px solid var(--line);
  background:var(--bg-raise);position:sticky;top:0;z-index:10}
.chip{border:1px solid var(--line-strong);color:var(--fg-dim);font-size:9px;padding:1px 7px;letter-spacing:.5px}
.chip.on{background:var(--amber);color:#000;border-color:var(--amber);font-weight:700}
.chip:hover{border-color:var(--amber);color:var(--amber)}
.chip.on:hover{color:#000}
input[type="search"],input[type="text"],select{
  font-family:var(--mono);font-size:10px;background:#000;color:var(--fg);
  border:1px solid var(--line-strong);padding:2px 6px;border-radius:0}
input:focus,select:focus{border-color:var(--amber);outline:none}
.legend{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--fg-dim);padding:3px 8px;border-top:1px solid var(--line)}
.legend-bar{width:110px;height:8px;border:1px solid var(--line-strong);
  background:linear-gradient(90deg,#004D30 0%,#0B2A1B 25%,#141414 50%,#2A0B0C 75%,#5A1416 100%)}

/* heatmap */
.hm-wrap{position:absolute;inset:0}
.hm-group{position:absolute;border:1px solid var(--line-strong);overflow:hidden}
.hm-gtitle{position:absolute;top:0;left:0;right:0;height:14px;background:#000;color:var(--amber);
  font-size:9px;font-weight:700;letter-spacing:.5px;padding:0 5px;z-index:2;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden}
.hm-tile.agg{background:#101010!important;border:1px dashed var(--line-strong);color:var(--amber)!important}
.hm-tile.agg:hover{border-color:var(--amber)}
.hm-drill{position:absolute;inset:0;overflow:auto;background:var(--bg-panel)}
.hm-drill .chip{margin:6px 0 0 8px}
.hm-tile{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;
  border:1px solid #000;cursor:pointer;overflow:hidden;text-align:center;line-height:1.15}
.hm-tile:hover,.hm-tile:focus-visible{outline:1px solid var(--amber);outline-offset:-1px;z-index:3}
.hm-tile .ht{font-weight:700;font-size:11px}
.hm-tile .hp{font-size:10px}
.hm-tile .hn,.hm-tile .hl{font-size:8px;opacity:.75;white-space:nowrap;overflow:hidden;max-width:100%;padding:0 2px;text-overflow:ellipsis}
.hm-list{width:100%;border-collapse:collapse;font-size:10px}
.hm-list td,.hm-list th{border-bottom:1px solid var(--line);padding:2px 6px;text-align:right;white-space:nowrap}
.hm-list th{color:var(--amber);text-align:left;position:sticky;top:0;background:#000}
.hm-list td:first-child{text-align:left;font-weight:700}
.hm-list tr{cursor:pointer}.hm-list tr:hover{background:var(--amber-bg)}

/* breadth */
.bd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);height:100%}
.bd-cell{background:var(--bg-panel);padding:6px 8px;cursor:pointer;overflow:hidden}
.bd-cell:hover{background:var(--amber-bg)}
.bd-cell .bl{font-size:8px;color:var(--fg-dim);letter-spacing:.5px}
.bd-cell .bv{font-size:15px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-cell .bs{font-size:8px;color:var(--fg-faint)}
.bd-note{font-size:8px;color:var(--fg-faint);padding:2px 8px;border-top:1px solid var(--line)}

/* news */
.nw-item{display:grid;grid-template-columns:46px 1fr;gap:6px;padding:3px 8px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:10px;align-items:baseline}
.nw-item:hover{background:var(--amber-bg)}
.nw-item.unread .nw-h{color:#FFF}
.nw-item.unread::before{content:'▸';color:var(--amber);position:absolute;margin-left:-7px}
.nw-c{font-weight:700;font-size:9px}
.nw-h{color:var(--fg);white-space:nowrap;overflow:hidden;display:block}
.nw-ht{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-he{display:block;font-size:9px;color:var(--fg-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-detail{border-top:1px solid var(--amber);background:#000;padding:8px;font-size:10px}
.nw-detail h4{color:var(--amber);font-size:11px;margin-bottom:4px}
.nw-detail .nw-orig{color:var(--fg-faint);font-size:9px}
.nw-detail .meta{color:var(--fg-dim);margin:4px 0}
.nw-detail .tickers span{border:1px solid var(--line-strong);padding:0 4px;margin-right:4px;cursor:pointer}
.nw-detail .tickers span:hover{border-color:var(--amber);color:var(--amber)}

/* stat strips (aapl / metals) */
.stat-strip{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--bg-panel);padding:3px 9px;min-width:86px;flex:0 0 auto}
.stat .sl{font-size:8px;color:var(--fg-dim);letter-spacing:.5px}
.stat .sv{font-size:12px;font-weight:600;white-space:nowrap}
.chart-box{position:relative;flex:1;min-height:0}
.chart-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.chart-readout{position:absolute;top:4px;left:6px;right:4px;font-size:9px;color:var(--fg-dim);pointer-events:none;
  background:rgba(0,0,0,.72);padding:2px 5px;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-note{font-size:8px;color:var(--fg-faint);padding:2px 8px;border-top:1px solid var(--line)}

/* sector */
.sector-legend{display:flex;gap:14px;padding:3px 8px;font-size:9px;color:var(--fg-dim);border-bottom:1px solid var(--line)}
.sector-legend i{display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:4px}

/* metals */
.met-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.w-body.narrow .met-q canvas{display:none}
.met-d{min-width:0;overflow-wrap:anywhere}
.met-q{background:var(--bg-panel);padding:5px 7px;cursor:pointer;position:relative;min-height:64px;min-width:0;overflow:hidden}
.met-q .mu{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.met-q:hover{background:var(--amber-bg)}
.met-q.sel{outline:1px solid var(--amber);outline-offset:-1px;background:#0D0800}
.met-q .mn{font-weight:700;font-size:11px}
.met-q .mu{font-size:8px;color:var(--fg-faint)}
.met-q .ml{font-size:13px;font-weight:700}
.met-q .mc{font-size:10px}
.met-q canvas{position:absolute;right:4px;bottom:4px;width:64px;height:20px;opacity:.9}
.met-derived{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.met-d{background:var(--bg-panel);padding:3px 9px;font-size:9px;color:var(--fg-dim)}
.met-d b{color:var(--fg);font-size:11px;margin-left:6px}

/* pulse */
.pulse-top{display:flex;align-items:center;gap:10px;padding:4px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.big-clock{font-size:26px;font-weight:700;color:var(--amber);letter-spacing:2px;line-height:1}
.big-date{font-size:9px;color:var(--fg-dim)}
.mk-table{width:100%;border-collapse:collapse;font-size:9px}
.mk-table td,.mk-table th{padding:2px 6px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
.mk-table th{color:var(--amber);font-size:8px;letter-spacing:.5px}
.mk-table tr{cursor:pointer}.mk-table tr:hover{background:var(--amber-bg)}
.badge{display:inline-block;font-size:9px;font-weight:700;padding:0 5px;letter-spacing:.5px;border:1px solid transparent}
.badge.OPEN{background:#3a2a00;color:var(--amber);border-color:var(--amber-dim)}
.badge.PRE{background:#123a4a;color:var(--cyan)}
.badge.LUNCH{background:#2a2208;color:#D8B24A}
.badge.CLOSED{background:#1c1c1c;color:var(--flat)}
.badge.HOLIDAY,.badge.UNKNOWN{background:#262626;color:var(--fg-dim)}
.session-box{border-top:1px solid var(--line);position:relative;flex:1;min-height:90px}
.session-box canvas{position:absolute;inset:0;width:100%;height:100%}

/* index list */
.ix-region{color:var(--amber);font-size:9px;font-weight:700;letter-spacing:1px;padding:4px 8px 2px;background:#000;
  position:sticky;top:0}
.ix-table{width:100%;border-collapse:collapse;font-size:10px}
.ix-table td{padding:1px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ix-table tr{cursor:pointer}.ix-table tr:hover{background:var(--amber-bg)}
.ix-table .r{text-align:right}

/* data status */
.ds-table{width:100%;border-collapse:collapse;font-size:10px}
.ds-table td,.ds-table th{padding:3px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.ds-table th{color:var(--amber);font-size:9px}
.ds-ok{color:var(--ok)}.ds-fail{color:var(--danger)}.ds-warn{color:var(--warn)}

/* ---------- inspector ---------- */
#inspector{
  position:fixed;top:calc(var(--cmdbar-h) + var(--tape-h) + var(--toolbar-h));right:0;bottom:0;
  width:340px;max-width:92vw;background:var(--bg-panel);border-left:1px solid var(--amber);
  z-index:250;display:flex;flex-direction:column;
}
.insp-head{flex:0 0 26px;display:flex;align-items:center;background:var(--amber);color:#000;padding:0 4px 0 10px}
.insp-title{font-weight:700;font-size:10px;letter-spacing:.5px}
.insp-head .w-btn{margin-left:auto;color:#000}
.insp-head .w-btn:hover{background:#000;color:var(--amber)}
.insp-body{flex:1;overflow:auto;padding:10px;font-size:10px}
.insp-empty{color:var(--fg-dim)}
.insp-name{font-size:13px;font-weight:700;color:var(--amber);margin-bottom:2px}
.insp-sub{color:var(--fg-dim);margin-bottom:8px;font-size:9px}
.insp-big{font-size:20px;font-weight:700;margin:4px 0}
.kv{width:100%;border-collapse:collapse;margin-top:6px}
.kv td{border-bottom:1px solid var(--line);padding:3px 4px;vertical-align:top}
.kv td:first-child{color:var(--fg-dim);width:42%;font-size:9px;letter-spacing:.3px}
.kv td:last-child{color:var(--fg);word-break:break-word}
.insp-note{margin-top:8px;font-size:9px;color:var(--fg-faint);border-left:2px solid var(--amber);padding-left:6px}

/* ---------- overlay / tooltip ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:400;display:flex;align-items:center;justify-content:center}
.overlay-box{width:min(560px,92vw);background:var(--bg-panel);border:1px solid var(--amber)}
.overlay-head{display:flex;justify-content:space-between;align-items:center;background:var(--amber);color:#000;
  font-weight:700;font-size:11px;padding:4px 4px 4px 10px}
.overlay-head .w-btn{color:#000}
.overlay-body{padding:12px;font-size:11px}
.overlay-body .note{color:var(--fg-dim);font-size:10px;margin-top:8px}
#tooltip{position:fixed;z-index:500;background:#000;border:1px solid var(--amber);color:var(--fg);
  font-size:10px;padding:5px 8px;pointer-events:none;white-space:pre;max-width:280px}

/* zoomed widget */
.widget.zoomed{position:fixed!important;left:8px!important;right:348px;top:calc(var(--cmdbar-h) + var(--tape-h) + var(--toolbar-h) + 6px)!important;
  bottom:8px;width:auto!important;height:auto!important;z-index:240;border-color:var(--amber)}
@media (max-width:759px){.widget.zoomed{right:8px}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cmd-mid{display:none}
}
@media (max-width:759px){
  :root{--rowh:80px}
  #grid{padding:6px;display:flex;flex-direction:column;gap:8px}
  .widget{position:static;width:100%!important;left:auto!important;top:auto!important;margin-bottom:8px}
  .w-drag,.w-resize{display:none!important}
  #inspector{top:auto;left:0;right:0;bottom:0;width:100%;max-height:62vh;border-left:none;border-top:1px solid var(--amber)}
  .met-quotes{grid-template-columns:repeat(2,1fr)}
  .bd-grid{grid-template-columns:repeat(2,1fr)}
  #cmdbar{flex-wrap:wrap;height:auto;min-height:var(--cmdbar-h);padding:4px 8px}
  #tape-wrap{top:0}
  #toolbar{top:0;position:static}
  #cmdbar,#tape-wrap{position:static}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #tape{animation:none;flex-wrap:wrap;white-space:normal}
  *{transition:none!important;animation-duration:.01ms!important}
}