/* ============================================================
   数字化作业 · 数字孪生管理平台 — 大屏深色科技风
   ============================================================ */
:root{
  --bg:#050b1a;
  --bg2:#081226;
  --panel:rgba(10,22,48,.72);
  --panel-border:rgba(0,212,255,.28);
  --cyan:#00d4ff;
  --cyan2:#19e6ff;
  --blue:#3f8cff;
  --green:#00ffa3;
  --orange:#ffb020;
  --red:#ff4d6d;
  --purple:#9d5cff;
  --txt:#e8f4ff;
  --txt-dim:#7fa6c9;
  --txt-dark:#3c5b7a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  color:var(--txt);
  /* 全透明：供 Unity WebView 透明合成，三维场景自页面下方透出 */
  background:transparent;
  -webkit-font-smoothing:antialiased;
}
/* 舞台：只保留布局与缩放，背景全透明（非面板区域均透明） */
.stage{
  position:fixed; inset:0; background:transparent;
  display:flex; flex-direction:column;
  transform-origin:top left;
}

/* ================= 顶栏 ================= */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:84px; padding:0 26px; flex:0 0 84px; position:relative;
  background:linear-gradient(180deg, rgba(8,20,46,.95), rgba(8,20,46,.55));
  border-bottom:1px solid rgba(0,212,255,.35);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  z-index:5;
}
.topbar::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.topbar-left{display:flex; align-items:center; gap:16px}
.logo-ring{
  width:52px;height:52px; border-radius:50%; position:relative; flex:0 0 52px;
  background:conic-gradient(from 0deg, transparent 0 60deg, var(--cyan) 60deg 180deg, transparent 180deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 52%, #000 54%);
  mask:radial-gradient(circle, transparent 52%, #000 54%);
  animation:spin 6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.title-box h1{
  font-size:30px; letter-spacing:4px; font-weight:700;
  background:linear-gradient(90deg,#fff,#8fd8ff,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(0,212,255,.25);
}
.title-box p{font-size:12px;color:var(--txt-dim);letter-spacing:3px;margin-top:4px}
.topbar-center{display:flex;gap:10px}
.scene-badge{
  padding:8px 18px; border:1px solid rgba(0,212,255,.4); border-radius:22px;
  font-size:13px; color:var(--cyan2); background:rgba(0,212,255,.08);
  box-shadow:0 0 14px rgba(0,212,255,.15) inset;
  letter-spacing:1px; white-space:nowrap;
}
.scene-badge.mini{color:#bcd8f5;border-color:rgba(120,160,210,.4);background:rgba(120,160,210,.08)}
.topbar-right{display:flex;align-items:center;gap:20px}
.conn-state{
  display:flex;align-items:center;gap:8px; padding:8px 16px; border-radius:20px;
  border:1px solid rgba(0,255,163,.4); background:rgba(0,255,163,.08); color:var(--green);
  font-size:13px; letter-spacing:1px;
}
.conn-state .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.2s infinite}
.conn-state.off{border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.1);color:var(--red)}
.conn-state.off .dot{background:var(--red);box-shadow:0 0 10px var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.clock-box{text-align:right}
.clock-box .time{font-size:26px;font-weight:700;color:#fff;font-family:Consolas,monospace;letter-spacing:2px;text-shadow:0 0 14px rgba(0,212,255,.6)}
.clock-box .date{font-size:12px;color:var(--txt-dim);letter-spacing:2px;margin-top:2px}

/* ================= 主体布局 ================= */
.main{
  flex:1; display:grid; gap:14px; padding:14px 20px;
  grid-template-columns:350px 1fr 350px;
  min-height:0;
}
.col{display:flex;flex-direction:column;gap:14px;min-height:0}
.col-center{min-width:0}
/* 侧栏面板固定高度（1920×1080 大屏基准，两栏各 916px 预算） */
#panel-state{flex:0 0 375px}
#panel-motors{flex:0 0 155px}
#panel-speed{flex:0 0 358px}
#panel-minimap{flex:0 0 300px}
#panel-task{flex:1}

/* ================= 面板卡片 ================= */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:10px;
  backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(0,120,255,.08), inset 0 0 30px rgba(0,120,255,.04);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.panel::before,.panel::after{
  content:""; position:absolute; width:26px;height:26px; pointer-events:none;
}
.panel::before{left:-1px;top:-1px;border-left:2px solid var(--cyan);border-top:2px solid var(--cyan);border-top-left-radius:10px}
.panel::after{right:-1px;bottom:-1px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);border-bottom-right-radius:10px}
.panel-head{
  flex:0 0 40px; display:flex; align-items:center; gap:9px;
  padding:0 16px; font-size:15px; font-weight:600; letter-spacing:1px; color:#cfeaff;
  border-bottom:1px solid rgba(0,212,255,.18);
  background:linear-gradient(90deg, rgba(0,212,255,.10), transparent 70%);
}
.panel-head .bar{width:4px;height:16px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);border-radius:2px}
.panel-head .tag{
  margin-left:auto; font-size:10px; font-weight:400; letter-spacing:2px; color:var(--cyan);
  border:1px solid rgba(0,212,255,.35); padding:2px 8px; border-radius:10px;
  background:rgba(0,212,255,.08);
}
.panel-body{padding:14px 16px; flex:1; min-height:0; display:flex; flex-direction:column; gap:12px}

/* ================= 左侧：AGV 状态 ================= */
.state-hero{display:flex;align-items:center;gap:12px;padding:2px 2px 6px}
.state-icon{
  width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px; flex:0 0 54px; color:#03121f;
  background:linear-gradient(135deg,var(--cyan),#37e0ff);
  box-shadow:0 0 22px rgba(0,212,255,.55);
}
.state-icon.running{background:linear-gradient(135deg,var(--green),#3affb0);box-shadow:0 0 22px rgba(0,255,163,.5)}
.state-icon.idle{background:linear-gradient(135deg,#7fb0d8,#a8cdf0);box-shadow:0 0 22px rgba(127,176,216,.4)}
.state-icon.pause{background:linear-gradient(135deg,var(--orange),#ffd06b);box-shadow:0 0 22px rgba(255,176,32,.5)}
.state-icon.error{background:linear-gradient(135deg,var(--red),#ff7b93);box-shadow:0 0 22px rgba(255,77,109,.5)}
.state-info{min-width:0}
.state-text{font-size:24px;font-weight:700;letter-spacing:2px;color:#fff;text-shadow:0 0 14px rgba(0,212,255,.5)}
.state-sub{font-size:12px;color:var(--txt-dim);margin-top:5px;letter-spacing:1px}
.kv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kv{
  background:rgba(0,212,255,.05); border:1px solid rgba(0,212,255,.14); border-radius:7px;
  padding:6px 6px; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.kv span{font-size:10px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv b{font-size:12px;color:#fff;font-family:Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv b.ok{color:var(--green)}
.kv b.bad{color:var(--red)}
.chart-title{font-size:13px;color:#cfeaff;display:flex;align-items:baseline;gap:6px;margin-top:4px}
.chart-title .bar-sm{width:3px;height:12px;background:var(--cyan);border-radius:2px}
.chart-title b{color:var(--cyan);font-size:20px;font-family:Consolas,monospace}
.chart-title i{font-style:normal;color:var(--txt-dim);font-size:12px;margin-left:auto}
.chart{width:100%;height:150px}
.chart-lg{height:190px}
.chart-half{height:150px}
.battery-wrap{flex:1;display:flex;flex-direction:column;min-height:0;gap:2px;padding-bottom:2px}
#chartBattery{flex:1;min-height:150px}

/* 电机状态（文字表格，无图表） */
#panel-motors .panel-body{padding:6px 12px;gap:0}
.motor-table{width:100%;border-collapse:collapse;text-align:center}
.motor-table th{color:var(--cyan);font-weight:600;padding:3px 2px;border-bottom:1px solid rgba(0,212,255,.25);font-size:11px;letter-spacing:1px}
.motor-table td{padding:2px 2px;color:#cfe6ff;border-bottom:1px solid rgba(0,212,255,.08);font-family:Consolas,monospace;font-size:11px}
.motor-table td:first-child{color:var(--txt-dim);font-family:"Microsoft YaHei";font-size:10px;text-align:left;width:74px;white-space:nowrap}
.motor-table tbody tr:last-child td{border-bottom:none}

/* 速度（全宽仪表 + 底部信息条：角速度 / 坐标） */
#panel-speed .panel-body{gap:10px}
#chartSpeed{flex:1;width:100%;min-height:140px}
.angle-box{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;
  background:rgba(0,212,255,.04); border:1px solid rgba(0,212,255,.14); border-radius:8px; padding:6px 10px;
}
.angle-val{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--txt-dim);letter-spacing:1px}
.angle-val b{font-size:24px;color:var(--orange);font-family:Consolas,monospace;font-weight:700;text-shadow:0 0 10px rgba(255,176,32,.4)}
.angle-val i{font-style:normal;font-size:11px}
.pos-box{display:flex;gap:14px}
.pos-item{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--txt-dim);font-family:Consolas,monospace}
.pos-item b{color:#fff;font-size:14px;font-family:Consolas,monospace}

/* ================= 中间：模型区（全透明） ================= */
/* 模型区保持空列（无背景、无内容），完全透明，供 Unity3D 三维场景透出；
   仅作为 350px|1fr|350px 三栏布局的中间占位，用于固定左右面板位置。 */
.col-center{background:transparent}

/* 楼层平面（右侧栏顶部面板） */
#panel-minimap{flex:0 0 300px}
#panel-minimap .panel-body{padding:10px 16px}
.room-tag{font-style:normal;font-size:11px;color:var(--orange);border:1px solid rgba(255,176,32,.4);padding:1px 7px;border-radius:9px;margin-left:auto}
#minimap{width:100%;height:220px;display:block;background:#071226;border-radius:5px;border:1px solid rgba(0,212,255,.15)}

/* ================= 右侧 ================= */
#panel-task .panel-body{justify-content:flex-start}
.task-card{display:flex;flex-direction:column;gap:12px}
.task-name{font-size:20px;font-weight:700;color:#fff;letter-spacing:1px;text-shadow:0 0 12px rgba(0,212,255,.4)}
.task-meta{display:flex;gap:8px}
.meta-chip{font-size:11px;padding:3px 10px;border-radius:12px;letter-spacing:1px}
.meta-chip.type{background:rgba(157,92,255,.15);color:#c9a8ff;border:1px solid rgba(157,92,255,.4)}
.meta-chip.status{background:rgba(0,255,163,.12);color:var(--green);border:1px solid rgba(0,255,163,.4)}
.task-progress-track{height:9px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.task-progress-track i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 10px var(--cyan);width:0%;transition:width .6s}
.task-progress-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--txt-dim);margin-top:3px}
.task-progress-labels #taskProgressPct{color:var(--green)}
.task-times{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.tt{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:7px 12px;background:rgba(0,212,255,.04);border-radius:6px;border-left:2px solid rgba(0,212,255,.4)}
.tt span{color:var(--txt-dim);flex:0 0 76px}
.tt b{color:#eaf6ff;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ================= 底部 ================= */
.bottombar{
  flex:0 0 52px; display:flex; align-items:center; gap:22px; padding:0 22px;
  background:linear-gradient(0deg, rgba(8,20,46,.95), rgba(8,20,46,.6));
  border-top:1px solid rgba(0,212,255,.3);
  z-index:5;
}
.bt-item{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.bt-item.right{flex:0 0 auto;gap:16px}
.bt-label{font-size:12px;color:var(--txt-dim);letter-spacing:2px;white-space:nowrap}
.stream{flex:1;display:flex;gap:10px;overflow:hidden;font-family:Consolas,monospace;font-size:11px;color:#8fe3ff;white-space:nowrap}
.stream-item{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.18);padding:2px 9px;border-radius:10px;flex:0 0 auto}
.stream-item .hl{color:var(--green)}
.source-switch{display:flex;border:1px solid rgba(0,212,255,.3);border-radius:6px;overflow:hidden}
.src-btn{
  background:transparent;border:none;color:var(--txt-dim);padding:5px 12px;font-size:12px;cursor:pointer;letter-spacing:1px;
}
.src-btn.active{background:var(--cyan);color:#03121f;font-weight:700}
#lastUpdate{font-family:Consolas,monospace;color:var(--green)}

/* 滚动条 */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(0,212,255,.35);border-radius:3px}
::-webkit-scrollbar-track{background:rgba(0,212,255,.05)}