/* ═══════════════════════════════════════════════════════════════
   泉柏溪六行业看板 · 统一视觉系统 ui-kit.css v1.0
   ─────────────────────────────────────────────────────────────
   总指挥出品，6 个板块共用。设计规范依据：官网样稿 design_preview.html
   用法：各板块 <link rel="stylesheet" href="../common/ui-kit.css">
   禁止板块自造色值/重写这些类；缺组件找总指挥升级版本号。
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg0:#050B17; --bg1:#081226; --bg2:#0C1830;
  --blue:#2E8CFF; --cyan:#00E5FF; --green:#00FFA3;
  --warn:#FFB020; --crit:#FF4D5E;
  --white:#EFF7FF; --dim:#8FA8C0; --xb:#7FD4FF;
  --line:rgba(0,229,255,.22);
  --glass:rgba(13,27,48,.60);
  --mono:"Consolas","JetBrains Mono","Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,var(--bg0),var(--bg1));
  color:var(--white);font-size:15px;line-height:1.6;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
/* ═════ 板块整页布局：KPI条 / 主区(数据|3D|控制) / 底栏 ═════ */
.board{height:100dvh;display:flex;flex-direction:column;}
.kpis{height:76px;flex:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  padding:12px 16px 6px;}
.main{flex:1;display:grid;grid-template-columns:280px 1fr 300px;gap:14px;
  padding:8px 16px;min-height:0;}
.col{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:rgba(0,229,255,.3) transparent;}
.col::-webkit-scrollbar{width:5px;}
.col::-webkit-scrollbar-thumb{background:rgba(0,229,255,.3);border-radius:3px;}
.stage{position:relative;border-radius:16px;overflow:hidden;min-height:0;
  background:radial-gradient(900px 460px at 60% 0%,rgba(46,140,255,.12),transparent 60%),
             linear-gradient(180deg,var(--bg0),#03060D);}
.stage canvas{display:block;touch-action:none;}
.ops{height:58px;flex:none;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 16px;}

/* ═════ KPI 横条 ═════ */
.kpi{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:8px 16px;border-radius:12px;background:var(--glass);
  border:1px solid var(--line);}
.kpi .t{font-size:12px;color:var(--dim);letter-spacing:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.kpi .num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:800;line-height:1.25;
  background:linear-gradient(92deg,#CFEFFF,#00E5FF 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.kpi.g .num{background:linear-gradient(92deg,#D6FFEA,#00FFA3 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.kpi .num small{font-size:13px;font-weight:600;letter-spacing:0;}
.kpi.alert .num{background:linear-gradient(92deg,#FFD9DC,#FF4D5E 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ═════ 玻璃面板 / HUD 角框 ═════ */
.panel{position:relative;background:var(--glass);border:1px solid rgba(0,229,255,.18);
  border-radius:14px;padding:14px;transition:border-color .3s ease-out,box-shadow .3s ease-out;}
.panel:hover{border-color:rgba(0,229,255,.45);box-shadow:0 0 22px rgba(0,229,255,.10);}
.panel .pt{font-size:13px;letter-spacing:2px;color:var(--cyan);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;}
.panel .pt::before{content:"";width:4px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),var(--green));}
.hud::before,.hud::after,.hud .h2::before,.hud .h2::after{
  content:"";position:absolute;width:18px;height:18px;border-color:var(--cyan);
  border-style:solid;opacity:.85;pointer-events:none;z-index:5;
  filter:drop-shadow(0 0 4px rgba(0,229,255,.7));}
.hud::before{top:6px;left:6px;border-width:2px 0 0 2px;}
.hud::after{top:6px;right:6px;border-width:2px 2px 0 0;}
.hud .h2::before{bottom:6px;left:6px;border-width:0 0 2px 2px;}
.hud .h2::after{bottom:6px;right:6px;border-width:0 2px 2px 0;}

/* ═════ 数据卡 ═════ */
.dcard{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:rgba(10,22,42,.62);border:1px solid rgba(0,229,255,.12);flex:none;
  transition:border-color .25s ease-out;}
.dcard:hover{border-color:rgba(0,229,255,.4);}
.dcard .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);flex:none;}
.dcard.w .dot{background:var(--warn);box-shadow:0 0 8px var(--warn);}
.dcard.c .dot{background:var(--crit);box-shadow:0 0 8px var(--crit);}
.dcard .n{font-size:12.5px;color:var(--dim);flex:1;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dcard .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:700;color:var(--white);}
.dcard .u{font-size:11px;color:var(--dim);margin-left:2px;}
@keyframes blink{0%,100%{border-color:rgba(255,77,94,.9);box-shadow:0 0 18px rgba(255,77,94,.35);}
  50%{border-color:rgba(255,77,94,.25);box-shadow:0 0 4px rgba(255,77,94,.1);}}
.dcard.blinking{animation:blink 1s ease-in-out infinite;}
.dcard.blinking .v{color:var(--crit);}

/* ═════ 按钮 / 开关 / 滑块 ═════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;cursor:pointer;
  color:#03131D;background:linear-gradient(92deg,var(--cyan),var(--green));
  border:none;box-shadow:0 0 16px rgba(0,229,255,.28);letter-spacing:1px;
  transition:transform .2s ease-out,box-shadow .2s ease-out,opacity .2s ease-out;flex:none;}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(0,229,255,.45);}
.btn:active{transform:translateY(0);}
.btn.ghost{background:transparent;color:var(--cyan);border:1.5px solid rgba(0,229,255,.5);
  box-shadow:none;}
.btn.ghost:hover{box-shadow:0 0 18px rgba(0,229,255,.3);}
.btn.danger{background:linear-gradient(92deg,#FF6A76,var(--crit));color:#FFF;
  box-shadow:0 0 16px rgba(255,77,94,.3);}
.btn.warn{background:linear-gradient(92deg,#FFD37A,var(--warn));color:#2B1A00;
  box-shadow:0 0 16px rgba(255,176,32,.3);}
.btn.on{outline:2px solid var(--green);outline-offset:2px;}
.btn:disabled{opacity:.35;pointer-events:none;}
.gohome{position:static;font-size:12px;letter-spacing:2px;
  color:var(--green);border:1px solid rgba(0,255,163,.55);border-radius:999px;
  padding:5px 13px;background:rgba(0,255,163,.08);text-decoration:none;
  animation:pulse 2.4s ease-out infinite;flex:none;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,255,163,.4);}
  70%{box-shadow:0 0 0 9px rgba(0,255,163,0);}100%{box-shadow:0 0 0 0 rgba(0,255,163,0);}}
.ctl{margin-bottom:14px;}
.ctl .cl{display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--dim);margin-bottom:7px;letter-spacing:1px;}
.ctl .cl b{color:var(--white);font-weight:600;}
.ctl .cv{font-family:var(--mono);color:var(--cyan);font-variant-numeric:tabular-nums;}
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--green));outline:none;cursor:pointer;}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:#EAF9FF;border:3px solid var(--cyan);
  box-shadow:0 0 12px rgba(0,229,255,.8);cursor:pointer;}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#EAF9FF;
  border:3px solid var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.8);cursor:pointer;}

/* ═════ 氛围层（3D 容器内）═════ */
.gridfloor{position:absolute;left:-25%;right:-25%;bottom:-50px;height:300px;pointer-events:none;
  background-image:linear-gradient(rgba(0,229,255,.12) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,229,255,.12) 1px,transparent 1px);
  background-size:52px 52px;transform:perspective(600px) rotateX(64deg);
  mask-image:linear-gradient(180deg,transparent 0%,#000 45%,transparent 95%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,transparent 95%);}
.scan{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.45) 30%,rgba(0,255,163,.55) 55%,transparent 85%);
  animation:scan 8s linear infinite;opacity:.6;}
@keyframes scan{0%{transform:translateY(30px);}50%{transform:translateY(45vh);}100%{transform:translateY(30px);}}
.live{position:absolute;bottom:12px;left:14px;z-index:6;display:flex;gap:6px;align-items:center;
  font-size:11.5px;letter-spacing:2px;color:var(--dim);pointer-events:none;}
.live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}

/* ═════ 页眉（板块标题）═════ */
.boardhead{height:56px;flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;}
.boardhead .bn{font-weight:800;font-size:18px;letter-spacing:2px;}
.boardhead .bn .q{color:#00E5FF;}.boardhead .bn .b{color:#00FFA3;}.boardhead .bn .x{color:#7FD4FF;}
.boardhead .bt{font-size:16px;font-weight:700;letter-spacing:1px;
  background:linear-gradient(92deg,#EAF6FF,#7FD8FF 70%,#00FFA3);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.boardhead .en{font-size:11px;color:var(--dim);letter-spacing:3px;}
.boardhead .sp{flex:1;}

/* ═════ toast / 弹层 / 抽屉 ═════ */
.toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(480px,92vw);}
.toast{border-radius:10px;padding:10px 16px;font-size:13.5px;letter-spacing:.5px;
  background:rgba(8,18,38,.92);border:1px solid rgba(0,229,255,.4);color:var(--white);
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 18px rgba(0,229,255,.15);
  animation:toastin .3s ease-out;pointer-events:auto;}
.toast.warn{border-color:rgba(255,176,32,.6);}
.toast.crit{border-color:rgba(255,77,94,.7);background:rgba(60,10,16,.92);}
.toast .push{display:inline-flex;gap:6px;margin-left:8px;}
.toast .push span{font-size:10.5px;color:var(--dim);border:1px solid rgba(143,168,192,.35);
  border-radius:99px;padding:1px 7px;}
@keyframes toastin{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
.mask{position:fixed;inset:0;background:rgba(3,6,13,.6);backdrop-filter:blur(4px);z-index:300;
  display:flex;align-items:center;justify-content:center;}
.modal{width:min(400px,90vw);border-radius:16px;padding:26px;background:var(--bg2);
  border:1px solid rgba(0,229,255,.35);box-shadow:0 0 40px rgba(0,229,255,.15);}
.modal h3{font-size:18px;margin-bottom:10px;}
.modal p{color:var(--dim);font-size:14px;margin-bottom:20px;}
.modal .row{display:flex;gap:12px;justify-content:flex-end;}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:150;max-height:70dvh;overflow-y:auto;
  background:rgba(8,18,38,.97);border-top:1px solid rgba(0,229,255,.35);
  border-radius:18px 18px 0 0;padding:18px 18px 30px;transform:translateY(100%);
  transition:transform .3s ease-out;}
.drawer.open{transform:none;}
.drawer .grip{width:44px;height:4px;border-radius:2px;background:rgba(0,229,255,.4);
  margin:0 auto 14px;}
.portrait-tip{display:none;position:fixed;top:0;left:0;right:0;z-index:400;text-align:center;
  font-size:12.5px;letter-spacing:2px;color:#03131D;padding:7px 0;font-weight:700;
  background:linear-gradient(90deg,var(--cyan),var(--green));
  animation:tipblink 2s ease-in-out infinite;}
@media(orientation:portrait) and (max-width:820px){
  .portrait-tip{display:block;animation:none;}
}
@keyframes tipblink{0%,100%{opacity:1;}50%{opacity:.75;}}

/* ═════ 手机竖屏专项修复（2026-09-28：页眉挤爆问题）═════ */
@media(max-width:820px){
  .boardhead{height:auto;min-height:46px;flex-wrap:wrap;padding:8px 12px;gap:6px 10px;}
  .boardhead .en{display:none;}
  .boardhead .live{display:none;}
  .boardhead .bt{font-size:14.5px;white-space:nowrap;}
  .boardhead .bn{font-size:16px;}
  .gohome{font-size:11px;padding:4px 10px;animation:none;}
  .stage .live{display:none;}          /* 3D操作提示在手机上收起，竖排防乱 */
}

/* ═════ 手机自适应（横屏优先）═════ */
@media(max-width:1020px){
  .kpis{grid-auto-flow:column;grid-auto-columns:minmax(128px,1fr);overflow-x:auto;
    grid-template-columns:none;padding-bottom:8px;}
  .main{grid-template-columns:1fr;grid-template-rows:minmax(230px,44%) auto auto;
    overflow-y:auto;}
  .main .stage{order:-1;}                  /* ★3D 永远排最前（V5 教训） */
  .main .col.data{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;
    align-items:flex-start;}
  .main .col.data .dcard{min-width:170px;height:52px;flex:none;}
  .main .col.ctrl{display:none;}           /* 控制进抽屉 */
  .ops{flex-wrap:wrap;height:auto;padding:8px 16px;gap:8px;}
}
@media(prefers-reduced-motion:reduce){
  .scan,.gohome,.dcard.blinking,.portrait-tip{animation:none;}
}

/* ═════ 手机横屏三栏同屏（2026-09-28：对标 V5 大屏"数据+3D+控制"一屏；必须放文件末尾压过通用手机规则）═════ */
@media(max-width:1020px) and (orientation:landscape){
  .main{grid-template-columns:190px 1fr 205px !important;grid-template-rows:1fr !important;overflow:hidden;gap:10px;}
  .main .stage{order:0 !important;}
  .main .col.data{flex-direction:column !important;overflow-y:auto;overflow-x:hidden;padding:0;gap:8px;}
  .main .col.data .dcard{min-width:0 !important;width:100%;height:auto;padding:6px 10px;flex:none;}
  .main .col.data .dcard .n{font-size:11px;white-space:normal;line-height:1.25;}
  .main .col.data .dcard .v{font-size:14.5px;}
  .main .col.ctrl{display:flex !important;}
  .col .panel{padding:10px 11px;}
  .col .panel .pt{font-size:12px;margin-bottom:8px;}
  .kpis{height:64px;padding:8px 12px 4px;gap:8px;}
  .kpi{padding:6px 10px;}
  .kpi .num{font-size:19px;}
  .kpi .t{font-size:10.5px;letter-spacing:1px;}
  .ops{height:50px;}
  .btn{padding:7px 16px;font-size:13px;}
  .ctl{margin-bottom:10px;}
}