/* ============================================================
   BITBOSS · layout: header / ticker / 3-column grid / footer
   ============================================================ */

/* ---------------- HEADER ---------------- */
#hdr{
  position:relative;z-index:5;flex:0 0 58px;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px 0 2px;
  border-bottom:1px solid rgba(56,189,248,.16);
}
#hdr::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, rgba(56,225,255,.9), rgba(56,225,255,.18) 34%, transparent 62%, rgba(56,225,255,.12));
  box-shadow:0 0 14px rgba(56,225,255,.35);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  position:relative;flex:0 0 48px;width:48px;height:48px;
  display:grid;place-items:center;border:0;background:none;box-shadow:none;
}
.brand-mark img{width:46px;height:46px;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,190,60,.45))}
.brand-txt{min-width:0}
.brand-txt h1{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.12em;
  color:#e6fbff;text-shadow:0 0 22px rgba(56,225,255,.55);white-space:nowrap;
}
.brand-txt h1 em{
  font-style:normal;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.30em;color:#7fd8ee;text-shadow:none;
}
.brand-txt p{
  margin-top:5px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--txt-faint);white-space:nowrap;
}
.hdr-stats{display:flex;align-items:center;gap:22px}
.hs{display:flex;flex-direction:column;align-items:flex-start;gap:3px;position:relative;padding-left:11px}
.hs::before{
  content:"";position:absolute;left:0;top:2px;width:1px;height:26px;
  background:linear-gradient(180deg, transparent, rgba(56,189,248,.35), transparent);
}
.hs label{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.20em;color:var(--txt-faint);
}
.hs b{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;color:#d8f2fd}
.hs-clock{align-items:flex-end;padding-left:14px;padding-right:2px}
.hs-clock b{font-size:22px;letter-spacing:.08em;color:#eafaff;text-shadow:0 0 18px rgba(56,225,255,.6)}
.hs-clock span{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:rgba(0,229,143,.75)}
.hs-rec{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--red);
  border:1px solid rgba(255,45,94,.32);padding:3px 7px;background:rgba(255,45,94,.07);
}
.hs-rec i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 9px var(--red);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.18}}

/* ---------------- TICKER ---------------- */
#ticker{
  position:relative;z-index:5;flex:0 0 26px;height:26px;
  display:flex;align-items:center;
  border:1px solid rgba(56,189,248,.10);
  background:linear-gradient(90deg, rgba(8,26,44,.72), rgba(4,14,26,.55) 40%, rgba(3,10,20,.6));
  overflow:hidden;
}
#ticker::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,45,94,.16), transparent 16%);
}
.tk-label{
  position:relative;flex:0 0 auto;height:100%;display:flex;align-items:center;gap:6px;
  padding:0 12px 0 9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;font-weight:600;
  color:#ffe3ea;background:linear-gradient(90deg, rgba(255,45,94,.55), rgba(255,45,94,.16));
  border-right:1px solid rgba(255,45,94,.35);white-space:nowrap;
}
.tk-label i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:blink 1.1s infinite}
.tk-view{position:relative;flex:1;height:100%;overflow:hidden}
.tk-track{
  position:absolute;left:0;top:0;height:100%;
  display:flex;align-items:center;gap:34px;white-space:nowrap;will-change:transform;
}
.tk-item{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#b9d8e8;white-space:nowrap}
.tk-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:1px 4px;
  border:1px solid currentColor;opacity:.95;
}
.tk-tag--t-long{color:var(--green);background:rgba(0,229,143,.10)}
.tk-tag--t-short{color:var(--red);background:rgba(255,45,94,.10)}
.tk-tag--t-info{color:var(--cyan);background:rgba(56,225,255,.09)}
.tk-tag--t-warn{color:var(--amber);background:rgba(255,182,46,.10)}
.tk-sep{color:var(--txt-faint);font-family:var(--mono);font-size:10px}
.tk-tail{
  flex:0 0 auto;height:100%;display:flex;align-items:center;gap:6px;padding:0 10px;
  border-left:1px solid rgba(56,189,248,.12);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;white-space:nowrap;
  background:linear-gradient(270deg, rgba(56,225,255,.08), transparent);
}

/* ---------------- MAIN GRID ---------------- */
#main{
  position:relative;z-index:4;flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:348px minmax(0,1fr) 348px;
  gap:9px;
}
.col{display:flex;flex-direction:column;gap:9px;min-height:0;min-width:0}
.col-c{display:flex;flex-direction:column;gap:9px}
.row-2{display:grid;grid-template-columns:1.18fr 1fr;gap:9px;flex:1 1 0;min-height:0}

/* left column weights */
.col-l .p-inputs{flex:1.12 1 0}
.col-l .p-orderflow{flex:1.02 1 0}
.col-l .p-iteration{flex:.92 1 0}
/* center weights */
.col-c .p-globe{flex:1.78 1 0}
.col-c .row-2{flex:1 1 0}
/* right column weights */
.col-r .p-pnl{flex:.90 1 0}
.col-r .p-positions{flex:1.06 1 0}
.col-r .p-spread{flex:1.02 1 0}

/* globe panel is the hero — stronger ambient */
.panel--globe{
  background:
    radial-gradient(760px 560px at 52% 50%, rgba(6,58,86,.42), transparent 68%),
    linear-gradient(180deg, rgba(8,32,52,.62) 0%, rgba(2,10,20,.86) 60%, rgba(1,6,14,.9) 100%);
  border-color:rgba(56,189,248,.20);
  box-shadow:
    inset 0 1px 0 rgba(88,200,255,.14),
    inset 0 0 120px rgba(0,72,110,.16),
    0 0 44px rgba(0,26,44,.6);
}
.panel--globe .panel-hd{flex-basis:30px;height:30px}

/* ---------------- FOOTER ---------------- */
#ftr{
  position:relative;z-index:5;flex:0 0 21px;height:21px;
  display:flex;align-items:center;gap:18px;
  padding:0 3px;
  border-top:1px solid rgba(56,189,248,.10);
  font-family:var(--mono);font-size:9px;letter-spacing:.10em;
  color:var(--txt-faint);
}
#ftr::before{
  content:"";position:absolute;left:0;top:-1px;width:180px;height:1px;
  background:linear-gradient(90deg, rgba(56,225,255,.6), transparent);
}
.ftr-legend{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lg{display:inline-flex;align-items:center;gap:5px;letter-spacing:.12em}
.lg i{width:7px;height:7px;display:inline-block}
.lg-long{color:var(--green)}   .lg-long i{background:var(--green);box-shadow:0 0 7px var(--green)}
.lg-short{color:var(--red)}    .lg-short i{background:var(--red);box-shadow:0 0 7px var(--red)}
.lg-watch{color:var(--cyan)}   .lg-watch i{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
.ftr-mid{flex:1 1 auto;text-align:center;color:#6f90a6;letter-spacing:.14em}
.ftr-mid .arw{color:var(--cyan);padding:0 6px;opacity:.8}
.ftr-right{flex:0 0 auto;color:#334a5c;letter-spacing:.06em}

/* ---------------- whole-screen frame decoration ---------------- */
#screen::before{
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:50;
  background-image:
    linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),
    linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),
    linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),
    linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30)),linear-gradient(rgba(56,225,255,.30),rgba(56,225,255,.30));
  background-repeat:no-repeat;
  background-size:26px 1.5px,1.5px 26px, 26px 1.5px,1.5px 26px, 26px 1.5px,1.5px 26px, 26px 1.5px,1.5px 26px;
  background-position:left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom;
}
#screen::after{
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.055);
}

/* ---------------- interactive polish (non-print, no layout effect) ---------------- */
.panel{transition:border-color .25s ease, box-shadow .25s ease}
.panel:hover{
  border-color:rgba(56,189,248,.26);
  box-shadow:
    inset 0 1px 0 rgba(88,200,255,.16),
    inset 0 0 90px rgba(0,90,140,.14),
    0 0 40px rgba(0,30,52,.7);
}
.panel--globe:hover{border-color:rgba(56,189,248,.34)}

.ftr-tele{
  flex:0 0 auto;color:#3d5a6e;letter-spacing:.10em;
  border-left:1px solid rgba(56,189,248,.12);padding-left:14px;
}

/* ==========================================================================
   小屏重排模式（手机 / 折叠屏）：完整 9 面板纵向重排，不缩小 1920 画布
   ========================================================================== */
html.wall-mobile, html.wall-mobile body{height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden}
html.wall-mobile #screen{
  position:relative;left:auto;top:auto;transform:none;
  width:100%;height:auto;min-height:100vh;
  padding:8px 10px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:8px;overflow:visible;
}
html.wall-mobile #hdr{
  position:sticky;top:0;z-index:60;height:auto;flex:none;
  margin:-8px -10px 0;padding:7px 12px 6px;
  background:rgba(1,5,12,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(56,189,248,.18);gap:8px;
}
html.wall-mobile .brand{gap:8px}
html.wall-mobile .brand-mark{width:34px;height:34px;flex-basis:34px}
html.wall-mobile .brand-mark img{width:31px;height:31px}
html.wall-mobile .brand-txt h1{font-size:14px;letter-spacing:.14em}
html.wall-mobile .brand-txt h1 em{display:none}
html.wall-mobile .brand-txt p{display:none}
html.wall-mobile .hdr-stats{gap:10px}
html.wall-mobile .hdr-stats .hs{display:none}
html.wall-mobile .hdr-stats .hs.hs-clock,
html.wall-mobile .hdr-stats .hs.hs-rec{display:flex}
html.wall-mobile .hdr-stats .hs-clock b{font-size:15px}
html.wall-mobile .hdr-stats .hs-clock span,
html.wall-mobile .hs-clock label{font-size:7.5px}
html.wall-mobile .hs-rec{font-size:7.5px;padding:2px 5px}
#ticker .tk-links{flex:0 0 auto;display:flex;gap:5px;align-items:center;padding:0 3px 0 8px}
#ticker .tk-links a{display:inline-flex;align-items:center;gap:4px;font:600 9px var(--mono);letter-spacing:.06em;
  color:#9dffdb;border:1px solid rgba(0,229,143,.45);background:rgba(0,229,143,.08);padding:2px 8px;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
#ticker .tk-links a:hover{background:rgba(0,229,143,.16);color:#eafcff}
#ticker .tk-links a.dex{color:#c9c0ff;border-color:rgba(139,125,255,.45);background:rgba(139,125,255,.08)}
#ticker .tk-links a .sm{display:none}
html.wall-mobile #ticker{flex:none;height:24px;margin:0}
html.wall-mobile #ticker .tk-links a{font-size:8px;padding:1px 6px}
html.wall-mobile #ticker .tk-links a .lg{display:none}
html.wall-mobile #ticker .tk-links a .sm{display:inline}
html.wall-mobile .tk-label{font-size:8px;padding:0 7px}
html.wall-mobile .tk-item{font-size:9.5px;gap:5px}
html.wall-mobile .tk-tail{display:none}
html.wall-mobile #main{
  flex:none;min-height:0;display:grid;grid-template-columns:1fr;gap:8px;
}
html.wall-mobile .col,html.wall-mobile .row-2{display:contents}
html.wall-mobile .panel{
  flex:none !important;height:300px;min-height:0;
}
html.wall-mobile .panel-hd{flex-basis:24px;height:24px;padding:0 8px;gap:6px}
html.wall-mobile .ph-title{font-size:9px;letter-spacing:.14em}
html.wall-mobile .ph-cn{font-size:9px}
html.wall-mobile .ph-meta{font-size:7px}
/* 排序：地球置顶 → P&L/持仓 → 输入流 → 盘口/价差 → 因果/领先时间 → 迭代（两列拼接无空缺） */
html.wall-mobile .p-globe{order:1;height:380px}
html.wall-mobile .p-pnl{order:2;height:250px}
html.wall-mobile .p-positions{order:3;height:310px}
html.wall-mobile .p-inputs{order:4;height:300px}
html.wall-mobile .p-orderflow{order:5;height:300px}
html.wall-mobile .p-spread{order:6;height:290px}
html.wall-mobile .p-causal{order:7;height:300px}
html.wall-mobile .p-leadtime{order:8;height:250px}
html.wall-mobile .p-iteration{order:9;height:230px}
html.wall-mobile #ftr{display:none}
/* 折叠屏展开：两列拼接（地球 / 输入流 / 迭代 跨两列），保证每行排满无空缺 */
@media (max-width:1199px) and (min-width:640px){
  html.wall-mobile #main{grid-template-columns:1fr 1fr;gap:9px}
  html.wall-mobile .p-globe,html.wall-mobile .p-inputs,html.wall-mobile .p-causal{grid-column:1 / -1}
  html.wall-mobile .p-globe{height:400px}
  html.wall-mobile .p-pnl,html.wall-mobile .p-positions{height:310px}
  html.wall-mobile .p-inputs{height:330px}
  html.wall-mobile .p-orderflow,html.wall-mobile .p-spread{height:320px}
  html.wall-mobile .p-causal{height:300px}
  html.wall-mobile .p-leadtime,html.wall-mobile .p-iteration{height:280px}
}

/* 面板头防溢出：标题/中文名/右侧标记各司其职，超长省略，LIVE 标签留在框内 */
.panel-hd{overflow:hidden;min-width:0}
.panel-hd .ph-title{flex:0 0 auto;white-space:nowrap}
.panel-hd .ph-cn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-hd .ph-meta{margin-left:auto;flex:0 0 auto;max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px}
.panel-hd .ph-meta .live-tag{font-size:7.5px;letter-spacing:.06em;opacity:.95}
/* 皮肤切换器与头部统计样式统一 */
.hs-skin .skin-btn{height:26px;min-height:26px;padding:3px 9px}
.hs-skin .skin-dot{width:7px;height:7px}