/* ============================================================
 * SPL-ESC 原型共享样式 V5（深海军蓝 + 金色 + 玻璃拟态）
 * 编号 ZW-XS-GL-2026-PROTO-CSS
 * 用法：<link rel="stylesheet" href="../shared/proto-styles.css">
 * ============================================================ */

:root{
  --primary:#101d35; --primary-2:#0a1424; --primary-3:#1a2f52;
  --accent:#c4a44b; --accent-2:#e6c976; --accent-soft:rgba(196,164,75,.16);
  --success:#2fbf71; --warn:#e6a23c; --danger:#e04545; --info:#3d7eff; --offline:#8a94a6;
  --bg-gradient:linear-gradient(135deg,#0a1424 0%,#101d35 100%);
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.08);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-glass:0 8px 32px rgba(16,29,53,.4),inset 0 1px 0 rgba(255,255,255,.06);
  --txt-1:#e8eef7; --txt-2:#9aa6b8; --txt-3:#5e6b80;
  --r-card:8px; --r-card-lg:14px; --r-pill:999px;
  --grad-line:linear-gradient(90deg,transparent,#c4a44b,transparent);
  --grad-accent:linear-gradient(135deg,#c4a44b,#e6c976);
  --font-display:"Noto Sans SC",sans-serif; --font-num:"DM Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:var(--font-display);
  background:var(--bg-gradient);
  color:var(--txt-1);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.mono{font-family:var(--font-num);font-weight:500}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.85}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c4a44b,#8a6f2e);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#c4a44b}

/* ============ App 容器 ============ */
.app{display:grid;grid-template-rows:56px 1fr 32px;min-height:100vh}
.main{display:grid;min-height:0;position:relative}

/* ============ 顶部导航栏 ============ */
.topbar{
  display:flex;align-items:center;gap:18px;padding:0 20px;
  background:linear-gradient(180deg,rgba(16,29,53,.96),rgba(10,20,36,.96));
  border-bottom:1px solid rgba(196,164,75,.22);
  box-shadow:0 2px 18px rgba(0,0,0,.45);
  position:sticky;top:0;z-index:30;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--grad-line);opacity:.6;
}
.logo{display:flex;align-items:center;gap:10px;padding-right:18px;border-right:1px solid rgba(255,255,255,.08)}
.logo-mark{
  width:34px;height:34px;border-radius:7px;
  background:linear-gradient(135deg,#c4a44b,#8a6f2e);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;color:#101d35;letter-spacing:.5px;
  box-shadow:0 0 0 1px rgba(196,164,75,.4),0 4px 14px rgba(196,164,75,.25);
  position:relative;
}
.logo-mark::before{content:"";position:absolute;inset:2px;border-radius:5px;border:1px solid rgba(16,29,53,.35)}
.logo-txt{display:flex;flex-direction:column;line-height:1.1}
.logo-txt b{font-weight:900;font-size:14px;letter-spacing:1px;color:#fff}
.logo-txt span{font-size:10px;color:var(--accent);letter-spacing:2px;font-weight:500}

.page-title{display:flex;align-items:center;gap:12px}
.page-title h1{font-weight:900;font-size:16px;letter-spacing:1.2px;color:#fff}
.page-title .tag{
  font-size:10px;font-weight:700;letter-spacing:1px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(196,164,75,.35);
}
.page-title .vtag{
  font-size:10px;font-weight:600;letter-spacing:1px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(47,191,113,.12);color:var(--success);
  border:1px solid rgba(47,191,113,.3);
  font-family:var(--font-num);
}

.crumb{font-size:12px;color:var(--txt-3);display:flex;align-items:center;gap:6px}
.crumb b{color:var(--accent);font-weight:600}
.crumb .sep{opacity:.5}

.top-spacer{flex:1}
.top-tools{display:flex;align-items:center;gap:10px}

/* 台区选择 */
.ta-select{
  display:flex;align-items:center;gap:10px;
  padding:6px 14px;border-radius:var(--r-card);
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);font-size:12px;transition:.25s;
}
.ta-select .lbl{color:var(--txt-3);font-size:10px;letter-spacing:1px;text-transform:uppercase}
.ta-select .val{color:#fff;font-weight:600;font-family:var(--font-num);font-size:12px}
.ta-select .caret{color:var(--accent);font-size:9px;transition:.25s}
.ta-select:hover{border-color:rgba(196,164,75,.4)}
.ta-select:hover .caret{transform:rotate(180deg)}

/* 视图切换 */
.view-sel{
  display:flex;gap:2px;padding:3px;border-radius:var(--r-card);
  background:rgba(0,0,0,.25);border:1px solid var(--glass-border);
}
.view-sel button{
  padding:5px 14px;border-radius:6px;
  font-size:12px;font-weight:600;color:var(--txt-2);transition:.2s;letter-spacing:.5px;
}
.view-sel button.active{
  background:linear-gradient(135deg,#c4a44b,#8a6f2e);
  color:#101d35;box-shadow:0 0 10px rgba(196,164,75,.4);
}

/* 演示开关 */
.switch{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);font-size:12px;color:var(--txt-2);transition:.25s;
}
.switch:hover{border-color:rgba(196,164,75,.4);color:#fff}
.switch .track{
  width:32px;height:16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);position:relative;transition:.25s;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--offline);transition:.25s;
}
.switch.on .track{background:var(--accent-soft)}
.switch.on .track::after{left:18px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.switch.on{color:var(--accent);border-color:rgba(196,164,75,.4)}

.user-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#3d7eff,#2b6cd6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;
  border:1px solid rgba(255,255,255,.2);
}

/* ============ 主内容容器 ============ */
.page-wrap{padding:16px 20px 24px;max-width:1920px;margin:0;min-height:0;overflow:auto;width:100%;box-sizing:border-box}
.page-wrap.full{padding:0;max-width:none}

/* ============ V7.0 宽度契约（M 管理页类 · max-1440 居中） ============
 * 依据《导航设计-V7.0》§3.4：M 类页面主容器统一挂载；F 类全屏页不挂
 * !important 覆盖页面存量 max-width（如 substation-360 的 1920px） */
.spl-page-m{max-width:1440px!important;margin:0 auto!important;width:100%;padding:20px 24px}

/* 通用卡片 */
.card{
  background:linear-gradient(180deg,rgba(16,29,53,.7),rgba(10,20,36,.7));
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);padding:14px;position:relative;
  backdrop-filter:blur(20px);
}
.card::before{
  content:"";position:absolute;top:0;left:14px;width:30px;height:2px;
  background:var(--grad-accent);
}
.card.lg{border-radius:var(--r-card-lg);padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--txt-1)}
.card-title .en{font-family:var(--font-num);font-size:10px;color:var(--accent);opacity:.7;letter-spacing:.12em}
.card-title::before{content:"";width:3px;height:13px;background:var(--accent);border-radius:2px;box-shadow:0 0 6px var(--accent)}
.card-tools{display:flex;gap:6px;align-items:center}

/* 网格（V7.0：fr 轨道 minmax(0,·) 化，防 ECharts canvas 固定宽撑爆轨道 → 横向溢出） */
.grid-1{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid-23{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.grid-32{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}
.grid-1221{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1fr);gap:12px}
/* V7.0 反馈 #5：电能质量四图横排专用（四列等宽 + 最小高度） */
.grid-4-charts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:320px}

/* 图表容器 */
.chart{width:100%;height:240px}
.chart-lg{width:100%;height:340px}
.chart-sm{width:100%;height:160px}

/* ============ 通用表格 ============ */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{
  text-align:left;padding:9px 10px;font-weight:600;color:var(--txt-3);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--glass-border);background:rgba(0,0,0,.18);
  position:sticky;top:0;
}
.tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--txt-1)}
.tbl tr:hover td{background:rgba(196,164,75,.04)}
.tbl .mono{font-family:var(--font-num);color:var(--accent)}

/* ============ 药丸标签 / 状态徽章 ============ */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;letter-spacing:.05em;
  font-family:var(--font-num);text-transform:uppercase;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.ok{background:rgba(47,191,113,.14);color:var(--success);border:1px solid rgba(47,191,113,.3)}
.pill.warn{background:rgba(230,162,60,.14);color:var(--warn);border:1px solid rgba(230,162,60,.3)}
.pill.danger{background:rgba(224,69,69,.14);color:var(--danger);border:1px solid rgba(224,69,69,.3)}
.pill.info{background:rgba(61,126,255,.14);color:var(--info);border:1px solid rgba(61,126,255,.3)}
.pill.off{background:rgba(138,148,166,.12);color:var(--offline);border:1px solid rgba(138,148,166,.25)}
.pill.gold{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(196,164,75,.35)}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:7px 14px;border-radius:6px;
  font-family:var(--font-num);font-size:12px;letter-spacing:.05em;cursor:pointer;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.04);
  color:var(--txt-1);transition:all .2s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--grad-accent);color:#101d35;border-color:transparent;font-weight:700}
.btn-primary:hover{box-shadow:0 4px 14px rgba(196,164,75,.35);color:#101d35}
.btn-danger{color:var(--danger);border-color:rgba(224,69,69,.3);background:rgba(224,69,69,.08)}
.btn-danger:hover{background:rgba(224,69,69,.18);color:var(--danger)}
.btn-success{color:var(--success);border-color:rgba(47,191,113,.3);background:rgba(47,191,113,.08)}
.btn-success:hover{background:rgba(47,191,113,.18);color:var(--success)}
.btn-ghost{background:transparent}
.btn-sm{padding:4px 9px;font-size:11px}
.btn-lg{padding:11px 22px;font-size:13px}

/* ============ KPI 卡 ============ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.kpi-card{
  background:linear-gradient(135deg,rgba(16,29,53,.85),rgba(10,20,36,.85));
  border:1px solid var(--glass-border);border-radius:var(--r-card);
  padding:12px 14px;position:relative;overflow:hidden;transition:all .25s;
}
.kpi-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-accent)}
.kpi-card:hover{transform:translateY(-2px);border-color:rgba(196,164,75,.4)}
.kpi-card .lbl{font-size:11px;color:var(--txt-3);letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.kpi-card .lbl .icon{font-size:13px}
.kpi-card .val{font-family:var(--font-num);font-size:24px;font-weight:700;color:var(--accent);line-height:1.2;margin-top:4px}
.kpi-card .val .u{font-size:12px;opacity:.6;margin-left:3px;font-weight:400}
.kpi-card .sub{font-size:10px;color:var(--txt-3);margin-top:3px;font-family:var(--font-num)}
.kpi-card.success .val{color:var(--success)}
.kpi-card.warn .val{color:var(--warn)}
.kpi-card.danger .val{color:var(--danger)}
.kpi-card.info .val{color:var(--info)}

/* ============ 面板 ============ */
.panel{
  background:linear-gradient(180deg,rgba(16,29,53,.7),rgba(10,20,36,.7));
  backdrop-filter:blur(20px);overflow-y:auto;padding:14px;position:relative;z-index:20;
}
.panel.left{border-right:1px solid rgba(255,255,255,.06)}
.panel.right{border-left:1px solid rgba(255,255,255,.06)}

.psection{margin-bottom:16px}
.psection .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.psection .head h2{
  font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent);
  text-transform:uppercase;display:flex;align-items:center;gap:6px;
}
.psection .head h2::before{
  content:"";width:3px;height:11px;background:var(--accent);border-radius:2px;
  box-shadow:0 0 6px var(--accent);
}
.psection .head .mini{font-size:10px;color:var(--txt-3);font-family:var(--font-num)}

/* ============ 标签页 ============ */
.tabs{
  display:flex;gap:2px;background:rgba(10,20,36,.6);
  border:1px solid var(--glass-border);border-radius:var(--r-card) var(--r-card) 0 0;
  padding:0 4px;backdrop-filter:blur(20px);
}
.tab{
  padding:11px 18px;cursor:pointer;font-size:13px;font-weight:500;color:rgba(232,238,247,.6);
  border-bottom:2px solid transparent;transition:all .2s;display:flex;align-items:center;gap:6px;
}
.tab .num{font-family:var(--font-num);font-size:10px;opacity:.6}
.tab:hover{color:var(--txt-1)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab.active .num{opacity:1}

.tab-body{
  background:var(--glass);border:1px solid var(--glass-border);border-top:none;
  border-radius:0 0 var(--r-card) var(--r-card);backdrop-filter:blur(20px);
  padding:14px;min-height:400px;
}

/* ============ 进度条 ============ */
.bar{height:7px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden;position:relative}
.bar .fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 6px rgba(196,164,75,.4);transition:width .5s}
.bar.success .fill{background:linear-gradient(90deg,var(--success),#1a9c57);box-shadow:0 0 6px rgba(47,191,113,.4)}
.bar.warn .fill{background:linear-gradient(90deg,var(--warn),#a87426);box-shadow:0 0 6px rgba(230,162,60,.4)}
.bar.danger .fill{background:linear-gradient(90deg,var(--danger),#a02e2e);box-shadow:0 0 6px rgba(224,69,69,.4)}
.bar.info .fill{background:linear-gradient(90deg,var(--info),#2b6cd6);box-shadow:0 0 6px rgba(61,126,255,.4)}

/* ============ 输入控件 ============ */
.input,.select,textarea.input{
  padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);color:var(--txt-1);
  font-family:var(--font-display);font-size:13px;transition:.2s;width:100%;
}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,164,75,.1)}
.input::placeholder{color:var(--txt-3)}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4a44b' d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}

/* ============ 时间轴 ============ */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--grad-line);opacity:.4}
.timeline-item{position:relative;padding-bottom:14px}
.timeline-item::before{
  content:"";position:absolute;left:-21px;top:4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--primary);border:2px solid var(--accent);
  box-shadow:0 0 8px rgba(196,164,75,.4);
}
.timeline-item.success::before{border-color:var(--success);box-shadow:0 0 8px rgba(47,191,113,.4)}
.timeline-item.warn::before{border-color:var(--warn);box-shadow:0 0 8px rgba(230,162,60,.4)}
.timeline-item.danger::before{border-color:var(--danger);box-shadow:0 0 8px rgba(224,69,69,.4)}
.timeline-item .t-time{font-family:var(--font-num);font-size:11px;color:var(--accent);letter-spacing:.05em}
.timeline-item .t-title{font-size:13px;font-weight:600;color:var(--txt-1);margin:2px 0}
.timeline-item .t-desc{font-size:11px;color:var(--txt-3);line-height:1.5}

/* ============ 状态栏 ============ */
.statusbar{
  display:flex;align-items:center;gap:20px;padding:0 18px;
  background:linear-gradient(180deg,rgba(10,20,36,.96),rgba(6,12,22,.96));
  border-top:1px solid rgba(196,164,75,.22);
  font-size:11px;color:var(--txt-2);position:relative;z-index:30;
}
.statusbar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--grad-line);opacity:.6}
.statusbar .item{display:flex;align-items:center;gap:6px}
.statusbar .item .k{color:var(--txt-3);font-size:10px;letter-spacing:.5px}
.statusbar .item .v{color:var(--txt-1);font-family:var(--font-num);font-size:11px}
.statusbar .item .v.acc{color:var(--accent)}
.statusbar .item .v.warn{color:var(--danger)}
.statusbar .item .v.ok{color:var(--success)}
.statusbar .dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.statusbar .spacer{flex:1}

/* ============ 工具类 ============ */
.text-acc{color:var(--accent)}
.text-ok{color:var(--success)}
.text-warn{color:var(--warn)}
.text-danger{color:var(--danger)}
.text-info{color:var(--info)}
.text-off{color:var(--offline)}
.text-mute{color:var(--txt-3)}
.flex{display:flex}
.flex-1{flex:1}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.text-sm{font-size:12px}.text-xs{font-size:11px}.text-lg{font-size:15px}.text-xl{font-size:18px}
.font-bold{font-weight:700}
.hidden{display:none}
.text-right{text-align:right}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
.tracker{letter-spacing:.05em}

/* ============ 卡片列表 ============ */
.list-card{
  background:var(--glass-2);border:1px solid var(--glass-border);
  border-radius:var(--r-card);padding:10px 12px;margin-bottom:8px;
  transition:.25s;position:relative;overflow:hidden;
}
.list-card:hover{border-color:rgba(196,164,75,.35);background:rgba(196,164,75,.04)}

/* ============ 树形结构 ============ */
.tree-node{padding-left:14px;font-size:12px}
.tree-node .node-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:.2s}
.tree-node .node-row:hover{background:rgba(196,164,75,.06);color:var(--accent)}
.tree-node .node-row.active{background:rgba(196,164,75,.14);color:var(--accent)}
.tree-node .caret{font-size:9px;color:var(--txt-3);transition:.2s;width:10px}
.tree-node .caret.open{transform:rotate(90deg)}
.tree-node .icon{font-size:13px}

/* ============ 空状态 ============ */
.empty-state{text-align:center;padding:36px 16px;color:var(--txt-3)}
.empty-state .icon{font-size:42px;opacity:.4;margin-bottom:8px}
.empty-state p{font-size:13px;margin-bottom:6px}
.empty-state small{font-size:11px;font-family:var(--font-num);opacity:.7}

/* ============ 工具提示 ============ */
.tooltip{
  position:fixed;z-index:1000;pointer-events:none;
  background:rgba(10,20,36,.96);border:1px solid var(--accent);
  border-radius:6px;padding:8px 11px;backdrop-filter:blur(20px);
  box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 0 1px rgba(196,164,75,.2);
  font-size:11px;color:var(--txt-1);min-width:160px;opacity:0;transition:opacity .15s;
  transform:translate(-50%,calc(-100% - 14px));
}
.tooltip.show{opacity:1}
.tooltip .tt-title{font-weight:700;color:#fff;font-size:12px;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid rgba(196,164,75,.2);font-family:var(--font-num)}
.tooltip .tt-row{display:flex;justify-content:space-between;gap:14px;margin-bottom:2px}
.tooltip .tt-row .k{color:var(--txt-3);font-size:10px}
.tooltip .tt-row .v{color:var(--txt-1);font-family:var(--font-num);font-size:10.5px}

/* ============ 移动驾驶舱 ============ */
.mobile-frame{
  width:390px;height:780px;margin:24px auto;border-radius:36px;
  background:#000;padding:8px;box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 2px rgba(196,164,75,.2);
  position:relative;overflow:hidden;
}
.mobile-screen{
  width:100%;height:100%;border-radius:30px;
  background:linear-gradient(180deg,#0a1424 0%,#101d35 100%);
  overflow-y:auto;color:#fff;position:relative;
}
.mobile-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:140px;height:22px;background:#000;border-radius:12px;z-index:50;
}

/* ============ 信号格 / 电池 ============ */
.signal-bars{display:inline-flex;align-items:end;gap:1.5px;height:10px}
.signal-bars .bar-cell{width:2px;background:var(--txt-3);border-radius:1px}
.signal-bars .bar-cell.on{background:var(--accent)}
.signal-bars .bar-cell:nth-child(1){height:30%}.signal-bars .bar-cell:nth-child(2){height:55%}
.signal-bars .bar-cell:nth-child(3){height:80%}.signal-bars .bar-cell:nth-child(4){height:100%}

/* ============ 甘特图 ============ */
.gantt-row{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.04);font-size:12px}
.gantt-row .label{color:var(--txt-2);font-size:11px}
.gantt-row .track{position:relative;height:18px;background:rgba(255,255,255,.03);border-radius:4px}
.gantt-row .seg{position:absolute;top:2px;bottom:2px;border-radius:3px;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 6px;font-family:var(--font-num)}
.gantt-row .seg.gold{background:linear-gradient(135deg,#c4a44b,#8a6f2e)}
.gantt-row .seg.success{background:linear-gradient(135deg,#2fbf71,#1a9c57)}
.gantt-row .seg.warn{background:linear-gradient(135deg,#e6a23c,#a87426)}
.gantt-row .seg.danger{background:linear-gradient(135deg,#e04545,#a02e2e)}
.gantt-row .seg.info{background:linear-gradient(135deg,#3d7eff,#2b6cd6)}

/* ============ 雷达 / 矩阵 ============ */
.matrix-cell{padding:8px 10px;border:1px solid var(--glass-border);text-align:center;font-family:var(--font-num);font-size:12px;transition:.2s}
.matrix-cell:hover{background:rgba(196,164,75,.06)}
.matrix-cell.good{background:rgba(47,191,113,.1);color:var(--success)}
.matrix-cell.mid{background:rgba(230,162,60,.1);color:var(--warn)}
.matrix-cell.bad{background:rgba(224,69,69,.1);color:var(--danger)}

/* ============ 渐变高亮卡 ============ */
.feature-card{
  background:linear-gradient(135deg,rgba(196,164,75,.1),rgba(196,164,75,.03));
  border:1.5px solid rgba(196,164,75,.45);
  border-radius:var(--r-card);padding:14px;
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(196,164,75,.1),0 8px 24px rgba(0,0,0,.3);
}
.feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* ============ 滚动动画 ============ */
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
 * 明亮模式 V6.2「云母纸·墨与鎏金」（html[data-theme="light"]，由 theme-manager.js 切换）
 * 覆盖共用本样式表的 19 个原型页：变量层 + 组件级硬编码深色修正
 * 文字对比度 WCAG AA+：--txt-1 #14213a（13.8:1）/ --txt-2 #3d4c68（9.2:1）/ --txt-3 #6a7690（5.0:1）
 * ============================================================ */
html[data-theme="light"]{
  --bg-gradient:linear-gradient(135deg,#fafbfd 0%,#f0f3f8 100%);
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.55);
  --glass-border:rgba(20,33,58,.10);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-glass:0 2px 12px rgba(20,33,58,.06),0 8px 32px rgba(20,33,58,.08),inset 0 1px 0 rgba(255,255,255,.8);
  --txt-1:#14213a;
  --txt-2:#3d4c68;
  --txt-3:#6a7690;
  --accent:#b8922f;
  --accent-2:#a37e22;
  --accent-soft:rgba(184,146,47,.10);
  --success:#158a4c;
  --warn:#a06e14;
  --danger:#c03434;
  --info:#2b6cd6;
  --offline:#6a7690;
  --grad-line:linear-gradient(90deg,transparent,#b8922f,transparent);
  --grad-accent:linear-gradient(135deg,#b8922f,#d8b96a);
}

/* —— 基础 —— */
html[data-theme="light"] ::-webkit-scrollbar-track{background:transparent}
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,247,250,.92));
  border-bottom-color:rgba(184,146,47,.28);
  box-shadow:0 2px 14px rgba(20,33,58,.08);
}
html[data-theme="light"] .logo-txt b{color:#14213a}
html[data-theme="light"] .page-title h1{color:#14213a}
html[data-theme="light"] .ta-select .val{color:var(--txt-1)}
html[data-theme="light"] .view-sel{background:rgba(20,33,58,.05)}
html[data-theme="light"] .switch:hover{color:var(--txt-1)}

/* —— 卡片 / 面板 —— */
html[data-theme="light"] .card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,252,.92));
  border-color:rgba(20,33,58,.10);
  box-shadow:0 2px 10px rgba(20,33,58,.05);
}
html[data-theme="light"] .kpi-card{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,249,252,.96));
  border-color:rgba(20,33,58,.10);
  box-shadow:0 2px 10px rgba(20,33,58,.05);
}
html[data-theme="light"] .panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,252,.92));
}
html[data-theme="light"] .panel.left{border-right-color:rgba(20,33,58,.08)}
html[data-theme="light"] .panel.right{border-left-color:rgba(20,33,58,.08)}
html[data-theme="light"] .list-card:hover{background:rgba(184,146,47,.06)}
html[data-theme="light"] .feature-card{box-shadow:0 0 0 1px rgba(184,146,47,.12),0 6px 18px rgba(20,33,58,.08)}

/* —— 表格 —— */
html[data-theme="light"] .tbl th{
  background:rgba(20,33,58,.045);
  border-bottom-color:rgba(20,33,58,.12);
  color:#6a7690;
}
html[data-theme="light"] .tbl td{border-bottom-color:rgba(20,33,58,.07);color:var(--txt-1)}
html[data-theme="light"] .tbl tr:hover td{background:rgba(184,146,47,.06)}

/* —— 标签页 —— */
html[data-theme="light"] .tabs{background:rgba(20,33,58,.05)}
html[data-theme="light"] .tab{color:rgba(20,33,58,.62)}
html[data-theme="light"] .tab:hover{color:var(--txt-1)}

/* —— 输入 / 按钮 —— */
html[data-theme="light"] .input,html[data-theme="light"] .select,html[data-theme="light"] textarea.input{
  background:rgba(255,255,255,.9);
}
html[data-theme="light"] .btn{background:rgba(255,255,255,.9)}

/* —— 状态栏 / 进度 —— */
html[data-theme="light"] .statusbar{
  background:linear-gradient(180deg,rgba(245,247,250,.95),rgba(238,241,246,.95));
  border-top-color:rgba(184,146,47,.28);
}
html[data-theme="light"] .bar{background:rgba(20,33,58,.08)}
html[data-theme="light"] .gantt-row{border-bottom-color:rgba(20,33,58,.09)}
html[data-theme="light"] .gantt-row .track{background:rgba(20,33,58,.06)}

/* —— 提示浮层 —— */
html[data-theme="light"] .tooltip{
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 24px rgba(20,33,58,.16),0 0 0 1px rgba(184,146,47,.22);
}
html[data-theme="light"] .tooltip .tt-title{color:#14213a}

/* —— 移动端模拟 —— */
html[data-theme="light"] .mobile-screen{
  background:linear-gradient(180deg,#f5f7fa 0%,#eef1f6 100%);
  color:var(--txt-1);
}
/* V9.0 任务10：手机外框/刘海在白天模式改为浅灰，不再纯黑 */
html[data-theme="light"] .mobile-frame{
  background:#e5e7eb;
  box-shadow:0 24px 64px rgba(17,24,39,.18),0 0 0 2px rgba(184,146,47,.25);
}
html[data-theme="light"] .mobile-notch{background:#d1d5db}
/* —— 时间轴圆点（--primary 被当背景色用，light 下改浅色） —— */
html[data-theme="light"] .timeline-item::before{background:#ffffff}