/* 交通气象应急保障服务平台 · 深色指挥大屏 · 山东鸿芯物联网 研发三 */
:root{
  --bg:#0a1024; --bg2:#0d1a3a; --panel:#12224a; --panel2:#16294f;
  --line:#1f3a6e; --line2:#26467f;
  --txt:#e8f0ff; --txt2:#8fa6d4; --txt3:#5f79ad;
  --brand:#2f8bff; --brand2:#00d0ff;
  --ok:#22c55e; --warn:#ffb020; --bad:#ff4d5e; --ice:#33d6e8;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:var(--bg);color:var(--txt);overflow:hidden}
.hidden{display:none!important}
a{cursor:pointer;text-decoration:none;color:inherit}

/* ---------- 登录 ---------- */
.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 20% 10%,#123063 0%,transparent 60%),
             radial-gradient(1000px 500px at 90% 90%,#0b2a4d 0%,transparent 60%),var(--bg);}
.login-card{display:flex;width:920px;max-width:94vw;min-height:520px;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6);border:1px solid var(--line)}
.login-brand{flex:1.15;padding:48px 44px;background:linear-gradient(160deg,#0f2a5c,#0a1730 70%);position:relative;display:flex;flex-direction:column}
.login-brand::after{content:"❄";position:absolute;right:-10px;bottom:-40px;font-size:260px;color:rgba(47,139,255,.07)}
.login-brand .logo{width:66px;height:66px;border-radius:16px;display:grid;place-items:center;font-size:36px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 8px 30px rgba(47,139,255,.5)}
.login-brand h1{font-size:26px;margin:26px 0 8px;letter-spacing:1px}
.login-brand .sub{color:var(--brand2);font-size:14px;letter-spacing:3px}
.login-brand .feat{list-style:none;margin-top:auto;color:var(--txt2);font-size:14px;line-height:2.4}
.login-brand .feat li::before{content:"▹";color:var(--brand2);margin-right:8px}
.login-brand .corp{margin-top:22px;color:var(--txt3);font-size:12px;letter-spacing:1px}
.login-form{flex:1;padding:56px 46px;background:var(--panel);display:flex;flex-direction:column;justify-content:center}
.login-form h2{font-size:22px;margin-bottom:28px}
.login-form label{display:block;font-size:13px;color:var(--txt2);margin-bottom:18px}
.login-form input{width:100%;margin-top:8px;padding:13px 14px;border-radius:10px;border:1px solid var(--line2);
  background:#0d1b38;color:var(--txt);font-size:15px;outline:none;transition:.2s}
.login-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,139,255,.18)}
.login-form button{margin-top:8px;padding:13px;border:none;border-radius:10px;cursor:pointer;font-size:16px;letter-spacing:6px;
  color:#fff;background:linear-gradient(135deg,var(--brand),#1d6fe0);box-shadow:0 8px 24px rgba(47,139,255,.4);transition:.2s}
.login-form button:hover{filter:brightness(1.1)}
.login-form .tip{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}
.login-form .demo{margin-top:24px;color:var(--txt3);font-size:12px;line-height:1.9}

/* ---------- 布局 ---------- */
.layout{display:flex;height:100vh}
.sidebar{width:220px;background:linear-gradient(180deg,#0c1836,#0a1229);border-right:1px solid var(--line);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--line)}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--brand2);box-shadow:0 0 12px var(--brand2)}
.brand b{display:block;font-size:15px}
.brand small{color:var(--txt2);font-size:11px;letter-spacing:2px}
.sidebar nav{padding:14px 10px;flex:1;overflow:auto}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:4px;border-radius:10px;color:var(--txt2);font-size:15px;transition:.15s}
.sidebar nav a i{font-style:normal;font-size:17px;width:20px;text-align:center}
.sidebar nav a:hover{background:#14284f;color:var(--txt)}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(47,139,255,.25),rgba(47,139,255,.05));color:#fff;box-shadow:inset 3px 0 0 var(--brand2)}
.sidefoot{border-top:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--txt2)}
.sidefoot button{padding:6px 14px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--txt2);cursor:pointer}
.sidefoot button:hover{border-color:var(--bad);color:var(--bad)}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);background:var(--bg2)}
.topbar h1{font-size:18px;font-weight:600}
.topbar .tb-left{display:flex;align-items:center;gap:18px}
.secpick{display:flex;align-items:center;gap:8px;background:#0d1b38;border:1px solid var(--line2);border-radius:10px;padding:6px 10px 6px 12px}
.secpick .sp-ico{font-size:15px}
.secpick .sp-lbl{font-size:13px;color:var(--txt2)}
.secpick select{background:transparent;border:none;color:var(--txt);font-size:14px;font-weight:600;outline:none;cursor:pointer;min-width:150px;max-width:260px}
.secpick select option{background:#0d1b38;color:var(--txt)}
.secpick:hover{border-color:var(--brand)}
.topbar .meta{display:flex;align-items:center;gap:20px;color:var(--txt2);font-size:14px}
.topbar .live{display:flex;align-items:center;gap:6px;color:var(--ok)}
.topbar .live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.view{flex:1;overflow:auto;padding:20px 24px}

/* ---------- 卡片 ---------- */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative}
.card h3{font-size:14px;color:var(--txt2);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand2)}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .num{font-size:30px;font-weight:700;font-family:"DIN Alternate",Consolas,monospace}
.kpi .lbl{font-size:13px;color:var(--txt2)}
.num.ok{color:var(--ok)} .num.warn{color:var(--warn)} .num.bad{color:var(--bad)} .num.brand{color:var(--brand2)}

/* 概览条 */
.sec-row{display:grid;grid-template-columns:1.6fr repeat(6,1fr) .9fr;gap:10px;align-items:center;
  padding:13px 16px;border-radius:10px;background:var(--panel);border:1px solid var(--line);margin-bottom:10px;font-size:14px}
.sec-row.head{background:transparent;border:none;color:var(--txt2);font-size:12px;padding:4px 16px}
.sec-row .nm{font-weight:600}
.sec-row .nm small{display:block;color:var(--txt3);font-weight:400;font-size:11px;margin-top:2px}
.tag{padding:3px 10px;border-radius:20px;font-size:12px;display:inline-block;white-space:nowrap}
.tag.ok{background:rgba(34,197,94,.15);color:var(--ok)}
.tag.warn{background:rgba(255,176,32,.15);color:var(--warn)}
.tag.bad{background:rgba(255,77,94,.18);color:var(--bad);animation:blink 1s infinite}
.tag.ice{background:rgba(51,214,232,.15);color:var(--ice)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}

/* 指标卡 */
.metric{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;position:relative;overflow:hidden}
.metric .v{font-size:24px;font-weight:700;font-family:Consolas,monospace;color:var(--brand2)}
.metric .u{font-size:12px;color:var(--txt3);margin-left:2px}
.metric .n{font-size:12px;color:var(--txt2);margin-top:6px}
.metric.alert{border-color:var(--bad);box-shadow:0 0 0 1px rgba(255,77,94,.3),0 0 24px rgba(255,77,94,.15)}
.metric.alert .v{color:var(--bad)}
.metric.warn{border-color:var(--warn)} .metric.warn .v{color:var(--warn)}

/* 首页仪表盘（储液量 / 管道压力） */
.gauge{position:relative;height:120px}
.gauge .gcap{position:absolute;left:0;right:0;bottom:6px;text-align:center;line-height:1.3}
.gauge .gcap b{display:block;font-size:13px;color:var(--txt2);font-weight:600}
.gauge .gcap span{font-size:11px;color:var(--txt3)}
/* 首页环境检测分块 */
.envblock .subttl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);margin-bottom:10px}
.envblock .subttl::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand2)}
.envblock .g3{gap:10px}
.envblock .metric{padding:10px 8px}
.envblock .metric .v{font-size:19px}
.envblock .metric .n{font-size:11px}
/* 环境检测：两个独立框起来的模块（像图三，小尺寸） */
#homeEnv{display:flex;flex-direction:column;gap:12px}
.envmod{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:linear-gradient(180deg,rgba(18,34,74,.65),rgba(13,26,58,.35))}
.envmod .mt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--txt2);margin-bottom:9px}
.envmod .mt::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand2)}
.envmod .grid.g3{gap:8px}
.envmod .metric{padding:8px 6px;background:#0e1c3c;border-radius:8px}
.envmod .metric .v{font-size:16px}
.envmod .metric .n{font-size:10px;margin-top:4px}
.envmod .metric .u{font-size:10px}
/* 首页顶部视频监控（单路道路画面，16:9） */
.home-video{margin-bottom:0}
.home-cleft > .home-video{flex:none}
.vone{position:relative;flex:1;aspect-ratio:16/9;min-height:0;border-radius:10px;border:1px solid var(--line);background:linear-gradient(160deg,#0d1b3a,#081226);display:grid;place-items:center;overflow:hidden}
.vone .cam{font-size:56px;opacity:.28}
.vone .vname{position:absolute;left:14px;top:12px;font-size:13px;color:var(--txt);background:rgba(0,0,0,.45);padding:4px 12px;border-radius:6px}
.vone .vtime{position:absolute;right:14px;bottom:12px;font-size:12px;color:var(--txt3)}
.vone .livedot{position:absolute;left:16px;bottom:16px;width:9px;height:9px;border-radius:50%;background:var(--bad);animation:pulse 1.2s infinite}
/* 首页两列布局（照参考图）：左=视频+（喷洒|实时）；右=双表+环境监测+温湿度趋势 */
.home-cols{display:grid;grid-template-columns:2.15fr 1fr;gap:16px;align-items:stretch}
.home-cleft{display:flex;flex-direction:column;gap:16px;min-width:0}
.home-cright{display:flex;flex-direction:column;gap:16px;min-width:0}
.home-cright > .home-envcard{flex:1;min-height:0}
.home-cright > .home-chartcard{flex:none}
.home-sub{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.home-sub > .card{height:380px;display:flex;flex-direction:column;overflow:hidden}
.home-sub .rtlog{flex:1;min-height:0}
/* 实时数据记录：顶部三指标横排 */
.rt-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;flex:none}
.rt-tank{background:#0e1c3c;border:1px solid var(--line);border-radius:9px;padding:8px 6px;text-align:center}
.rt-tank .k{font-size:11px;color:var(--txt2);margin-bottom:3px}
.rt-tank .v{font-size:18px;font-weight:700;font-family:Consolas,monospace;color:var(--brand2)}
.rt-tank .v i{font-size:10px;font-style:normal;color:var(--txt3);margin-left:2px}
/* 喷洒动作流水 */
.sp-log{overflow:auto;font-family:Consolas,monospace}
.sp-log .row{display:flex;gap:12px;padding:6px 2px;border-bottom:1px solid rgba(31,58,110,.4);font-size:12.5px}
.sp-log .row .t{color:var(--brand2);flex:none}
.sp-log .row .x{color:var(--txt)}
/* 喷洒点位网格 */
.pp-legend{color:var(--txt2);font-size:13px;margin-bottom:12px;display:flex;gap:18px;flex-wrap:wrap}
.pp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.ppgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:14px}
.ppgrid .pp{aspect-ratio:1/1;border-radius:8px;border:1px solid var(--line2);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:Consolas,monospace}
.ppgrid .pp.off{background:rgba(255,77,94,.45);border-color:rgba(255,77,94,.6);color:#ffd9dd}
.ppgrid .pp.on{background:rgba(34,197,94,.55);border-color:rgba(34,197,94,.7);color:#eafff1;box-shadow:0 0 10px rgba(34,197,94,.4)}
.ppgrid .pp:hover{transform:translateY(-1px)}

/* 储液量/管道压力：左右并排小表（照参考图，缩小） */
.gauge-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gauge-pair .card{display:flex;align-items:center;justify-content:center;padding:4px;height:120px}
.gauge-pair .gauge{width:100%;height:100%}
/* 环境监测：两个独立小框 */
.home-envcard #homeEnv{gap:10px}
.home-envcard .envmod{padding:9px 10px}
.home-envcard .envmod .metric{padding:7px 5px}
.home-envcard .envmod .metric .v{font-size:15px}
.home-envcard .envmod .metric .n{font-size:10px}
/* 温湿度趋势 */
.home-chartcard #homeChart{width:100%;height:150px}

/* 喷洒控制面板：表单式（照图4） */
.sp-form{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:center;min-height:0}
.sp-row{display:flex;align-items:center;gap:12px}
.sp-row > label{width:84px;color:var(--txt2);font-size:13px;flex:none}
.sp-seg{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.sp-seg .seg{padding:9px 6px;border-radius:8px;border:1px solid var(--line2);background:#0d1b38;color:var(--txt2);font-size:13px;cursor:pointer;transition:.18s}
.sp-seg .seg:hover{border-color:var(--brand);color:var(--txt)}
.sp-seg .seg.on{background:linear-gradient(135deg,var(--brand),#1d6fe0);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(47,139,255,.4)}
.sp-range{flex:1;display:flex;align-items:center;gap:8px}
.sp-range .sel{flex:1;padding:9px 10px;border-radius:8px;border:1px solid var(--line2);background:#0d1b38;color:var(--txt);font-size:13px;outline:none;cursor:pointer;appearance:auto}
.sp-range .sel:focus{border-color:var(--brand)}
.sp-range .sp-to{color:var(--txt2);font-size:13px;flex:none}
.sp-row select,.sp-row .inp{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--line2);background:#0d1b38;color:var(--txt);font-size:13px;outline:none}
.sp-row select:focus,.sp-row .inp:focus{border-color:var(--brand)}
.sp-asarange{position:relative;flex:1;height:26px;min-width:0}
.sp-asarange .sp-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:4px;background:#1a2b52}
.sp-asarange .sp-fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;border-radius:4px;background:linear-gradient(135deg,var(--brand),#1d6fe0);box-shadow:0 0 10px rgba(47,139,255,.45)}
.sp-asarange .rng2{position:absolute;left:0;top:0;width:100%;height:26px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;outline:none}
.sp-asarange .rng2::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--brand);box-shadow:0 2px 8px rgba(47,139,255,.6);cursor:pointer;pointer-events:auto}
.sp-asarange .rng2::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--brand);border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(47,139,255,.6);cursor:pointer;pointer-events:auto}
.sp-angval{flex:none;min-width:104px;text-align:center;font-size:13px;color:var(--txt);background:#0d1b38;border:1px solid var(--line2);border-radius:8px;padding:6px 8px}
.sp-note{margin:-6px 0 0 96px;color:var(--txt2);font-size:11px;line-height:1.5}
.sp-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:6px}
.sp-btns .btn{padding:11px}
.sp-btns .btn:disabled{opacity:.4;cursor:not-allowed}
/* 喷洒控制面板（模块） */
.sp-status{display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:12px;border:1px solid var(--line);background:#0e1c3c;position:relative;overflow:hidden}
.sp-status.on{background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(14,28,60,.4));border-color:rgba(34,197,94,.45)}
.sp-status .sp-ico{font-size:30px;line-height:1}
.sp-status .sp-txt b{display:block;font-size:18px;color:var(--txt)}
.sp-status.on .sp-txt b{color:#6ee7a0}
.sp-status .sp-txt small{color:var(--txt3);font-size:12px}
.sp-status .sp-dot{margin-left:auto;width:12px;height:12px;border-radius:50%;background:var(--txt3)}
.sp-status.on .sp-dot{background:var(--ok);box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:sp-pulse 1.6s infinite}
@keyframes sp-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.sp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.sp-stat{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;background:#0e1c3c;border:1px solid var(--line);text-align:center}
.sp-stat .k{font-size:12px;color:var(--txt2)}
.sp-stat .v{font-size:20px;font-weight:700;font-family:Consolas,monospace;color:var(--brand2)}
.sp-stat .v i{font-size:11px;color:var(--txt3);font-style:normal;margin-left:2px}
.sp-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.sp-acts .btn{padding:11px}
.sp-acts .btn:disabled{opacity:.4;cursor:not-allowed}
.sp-note{margin-top:12px;text-align:center;font-size:11px;color:var(--txt3);letter-spacing:.5px}
.tblwrap{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.kpi select{padding:6px 10px;border-radius:8px;border:1px solid var(--line2);background:#0d1b38;color:var(--txt);font-size:13px;outline:none;font-weight:600;margin:2px 0}
.kpi select:focus{border-color:var(--brand)}

/* 表格 */
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{text-align:left;color:var(--txt2);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line);background:#0e1c3c;position:sticky;top:0}
table.tb td{padding:10px 12px;border-bottom:1px solid rgba(31,58,110,.5)}
table.tb tr:hover td{background:rgba(47,139,255,.06)}
.chip{padding:2px 8px;border-radius:6px;font-size:12px;background:var(--line);color:var(--txt)}
.chip.on{background:rgba(34,197,94,.2);color:var(--ok)}
.chip.off{background:rgba(120,130,150,.2);color:var(--txt2)}

/* 按钮 */
.btn{padding:8px 16px;border-radius:8px;border:1px solid var(--line2);background:#12244c;color:var(--txt);cursor:pointer;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--brand);background:#16305f}
.btn.primary{background:linear-gradient(135deg,var(--brand),#1d6fe0);border:none;box-shadow:0 6px 18px rgba(47,139,255,.35)}
.btn.danger{background:rgba(255,77,94,.15);border-color:var(--bad);color:#ff8a95}
.btn.ok{background:rgba(34,197,94,.15);border-color:var(--ok);color:#6ee7a0}
.btn.sm{padding:5px 11px;font-size:12px}

/* 喷洒面板 */
.spray-panel{display:flex;flex-direction:column;gap:12px}
.spray-sec{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.spray-sec .t{font-size:14px}
.spray-sec .t small{display:block;color:var(--txt3);font-size:11px;margin-top:3px}
.spray-sec .acts{display:flex;gap:8px}

/* 视频格 */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.video-grid:has(.vcell.live){grid-template-columns:1fr}
.vcell{aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line);background:linear-gradient(160deg,#0d1b3a,#081226);position:relative;display:grid;place-items:center;overflow:hidden}
.vcell.off::after{content:"信号丢失";color:var(--bad);font-size:14px}
/* 实时视频（flv.js） */
.vlive{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
.vph{position:absolute;inset:0;display:grid;place-items:center;gap:8px;z-index:1;pointer-events:none}
.vph .cam{font-size:56px;opacity:.28}
.vphTip{font-size:13px;color:var(--txt3);margin-top:6px}
.vone .vname,.vone .vtime,.vone .livedot,.vcell .vname,.vcell .vtime,.vcell .livedot{z-index:2}
.videofail{display:grid;place-items:center;gap:8px;padding:44px 20px;text-align:center}
.videofail .cam{font-size:52px;opacity:.3}
.vfb-t{font-size:16px;color:var(--txt)}
.vfb-d{font-size:13px;color:var(--bad)}
.vfb-h{font-size:12px;color:var(--txt3)}
.vcell .vname{position:absolute;left:12px;top:10px;font-size:12px;color:var(--txt2);background:rgba(0,0,0,.4);padding:3px 9px;border-radius:6px}
.vcell .vtime{position:absolute;right:12px;bottom:10px;font-size:11px;color:var(--txt3)}
.vcell .cam{font-size:44px;opacity:.35}
.vcell .livedot{position:absolute;left:12px;bottom:10px;width:8px;height:8px;border-radius:50%;background:var(--bad);animation:pulse 1.2s infinite}

/* 工具栏 */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar h2{font-size:16px;margin-right:auto}
select,input.inp{padding:9px 12px;border-radius:8px;border:1px solid var(--line2);background:#0d1b38;color:var(--txt);font-size:13px;outline:none}
select:focus,input.inp:focus{border-color:var(--brand)}

/* 模态 */
.modal-bg{position:fixed;inset:0;background:rgba(3,8,20,.72);display:grid;place-items:center;z-index:50;backdrop-filter:blur(3px)}
.modal{width:560px;max-width:94vw;max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h3{font-size:17px;margin-bottom:20px}
.modal .frow{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;margin-bottom:14px}
.modal .frow label{color:var(--txt2);font-size:13px}
.modal .frow input,.modal .frow select,.modal .frow textarea{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line2);background:#0d1b38;color:var(--txt);font-size:13px;outline:none}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.empty{text-align:center;color:var(--txt3);padding:50px;font-size:14px}
.mono{font-family:Consolas,monospace}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#1f3a6e;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}