/* 西青低空无人机感知平台 —— 共用样式
   两套主题：默认「暗色」偏深海蓝（不是纯黑，长时间盯屏不压抑），
   html[data-theme="light"] 为「亮色」浅灰白，同样适合白天/投屏。
   1920×1080 为基准，1366 下不塌。 */
:root{
  /* —— 暗色（默认）：底色由 #050a12 抬到 #0e1a28，面板浮起来一档 —— */
  --bg:#0e1a28; --bg2:#122134;
  --pnl:rgba(23,40,58,.86); --pnl2:rgba(28,47,67,.92);
  --pnl3:#1a2c3f;
  --line:rgba(56,189,248,.20); --line2:rgba(56,189,248,.34);
  --cy:#2ee6d6; --bl:#38bdf8; --red:#ff5a6a; --amb:#ffb01f; --grn:#2bd97a;
  --tx:#e2eefa; --tx2:#9ebfd8; --tx3:#63819b;
  --hd:#c9e8fa;                 /* 按钮/强调文字 */
  --hd2:#d8eefb;                /* 数值文字 */
  --topbg:linear-gradient(180deg,rgba(22,42,62,.96),rgba(14,26,40,.90));
  --barbg:rgba(14,26,40,.92);
  --rowline:rgba(56,189,248,.09);
  --mapbg:#0d1a28;              /* 地图底色 */
  --map-stroke:#0d1a28;         /* 地图文字描边（与底色一致才像"镂空"） */
  --map-grid:rgba(56,189,248,.10);
  --map-dim:#6b89a3;
  --map-txt:#a9c6dd;
  --ring:rgba(46,230,214,.20);
  /* 地图上的数据要素（围栏/目标/终端/飞手），亮色下要换成更深的同色系 */
  --map-red:#ff4d5e;   --map-red-tx:#ff9aa4;
  --map-blue:#38bdf8;  --map-blue-tx:#8ecdf5;
  --map-cyan:#2ee6d6;  --map-cyan-tx:#8ff2e6;  --map-cyan-fill:#0e4b58;
  --map-amber:#ffa64d; --map-amber-tx:#ffb86b;
  --dev-off:#26374a; --dev-offbd:#4a6478;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --brand-grad:linear-gradient(180deg,#ffffff,#8ed8ff);
  --mono:Consolas,"Courier New",ui-monospace,monospace;
  --font:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
}
/* —— 亮色：白底 + 深字，图表与地图形元素同步换色 —— */
html[data-theme="light"]{
  --bg:#eef3f8; --bg2:#e7eef6;
  --pnl:rgba(255,255,255,.94); --pnl2:#ffffff;
  --pnl3:#f4f8fc;
  --line:rgba(15,94,126,.18); --line2:rgba(15,94,126,.34);
  --cy:#0d9488; --bl:#0369a1; --red:#dc2626; --amb:#c2740a; --grn:#059669;
  --tx:#132433; --tx2:#41617a; --tx3:#7d94a8;
  --hd:#0b4a63;
  --hd2:#123547;
  --topbg:linear-gradient(180deg,#ffffff,#f2f7fb);
  --barbg:#f4f8fb;
  --rowline:rgba(15,94,126,.10);
  --mapbg:#e8eef4;
  --map-stroke:#ffffff;
  --map-grid:rgba(15,94,126,.17);
  --map-dim:#7b93a8;
  --map-txt:#3f5d74;
  --ring:rgba(13,148,136,.26);
  --map-red:#d92b3c;   --map-red-tx:#a91d2b;
  --map-blue:#0b72b8;  --map-blue-tx:#0a5c94;
  --map-cyan:#0f9488;  --map-cyan-tx:#0f766e;  --map-cyan-fill:#d6f2ee;
  --map-amber:#b45309; --map-amber-tx:#92400e;
  --dev-off:#c3d1dd; --dev-offbd:#8fa6b8;
  --shadow:0 1px 3px rgba(16,44,66,.08);
  --brand-grad:linear-gradient(180deg,#0f3f57,#1a7fa8);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;
  overflow:hidden;-webkit-font-smoothing:antialiased;transition:background .18s,color .18s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(56,189,248,.10),transparent 70%),
    radial-gradient(700px 420px at 8% 105%,rgba(46,230,214,.06),transparent 70%)}
html[data-theme="light"] body::before{
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(56,140,200,.10),transparent 70%),
    radial-gradient(700px 420px at 8% 105%,rgba(13,148,136,.06),transparent 70%)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--bl);text-decoration:none}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(56,189,248,.22)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 面板 ---------- */
.card{position:relative;background:var(--pnl);border:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;backdrop-filter:blur(3px);
  box-shadow:var(--shadow)}
.card::before,.card::after{content:"";position:absolute;width:10px;height:10px;
  border:1px solid var(--cy);opacity:.5;pointer-events:none}
.card::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.card::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.card>.hd{display:flex;align-items:center;gap:8px;padding:10px 13px;flex:0 0 auto;
  border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.4px}
.card>.hd .en{font-family:var(--mono);font-size:9.5px;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.8px}
.card>.hd .rt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx3)}
.card>.bd{flex:1;min-height:0;overflow:auto}

.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;font-size:10.5px;
  font-family:var(--mono);border:1px solid;letter-spacing:.3px}
.tag.g{color:var(--grn);border-color:rgba(43,217,122,.45);background:rgba(43,217,122,.08)}
.tag.r{color:var(--red);border-color:rgba(255,77,94,.45);background:rgba(255,77,94,.10)}
.tag.a{color:var(--amb);border-color:rgba(255,176,31,.45);background:rgba(255,176,31,.08)}
.tag.c{color:var(--bl);border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.08)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.on{background:var(--grn);box-shadow:0 0 7px var(--grn)}
.dot.off{background:var(--dev-offbd)}
.dot.r{background:var(--red);box-shadow:0 0 7px var(--red)}
.blink{animation:bk 1.1s steps(2,end) infinite}
@keyframes bk{50%{opacity:.25}}

.mbar{height:4px;background:rgba(56,189,248,.10);overflow:hidden}
.mbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--bl))}

/* ---------- 顶栏 ---------- */
.top{position:relative;z-index:5;height:62px;display:flex;align-items:center;
  padding:0 20px;gap:16px;border-bottom:1px solid var(--line);
  background:var(--topbg)}
.top .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.top .brand .mk{width:26px;height:26px;flex:0 0 auto}
.top .n1{font-size:17px;letter-spacing:1.1px;font-weight:600;
  background:var(--brand-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.top .n2{font-family:var(--mono);font-size:9px;color:var(--tx3);letter-spacing:1.5px;margin-top:1px}
.top .mid{flex:1;display:flex;justify-content:center;align-items:center;gap:10px}
.top .mid .t{font-size:14px;letter-spacing:3px;color:var(--hd)}
.top .mid .ln{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.top .mid .ln.r{background:linear-gradient(90deg,var(--line2),transparent)}
.top .rt{display:flex;align-items:center;gap:14px;flex:0 0 auto;white-space:nowrap}
.top .clk{font-family:var(--mono);font-size:15px;color:var(--hd2);letter-spacing:1px}
.top .clk small{font-size:10px;color:var(--tx3);margin-left:5px}
.top .sep{width:1px;height:20px;background:var(--line)}
.btn{height:28px;padding:0 12px;background:rgba(56,189,248,.06);
  border:1px solid var(--line2);color:var(--hd);font-size:12px;display:inline-flex;
  align-items:center;gap:5px;letter-spacing:.4px;transition:.15s}
.btn:hover{background:rgba(56,189,248,.14);border-color:var(--cy);color:var(--hd2)}
.btn.p{background:rgba(46,230,214,.14);border-color:var(--cy);color:var(--cy)}
.btn.d{background:rgba(255,77,94,.10);border-color:rgba(255,77,94,.4);color:#ffb3ba}
.btn.s{height:24px;padding:0 8px;font-size:11px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 大屏布局 ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;z-index:1}
.wrap{flex:1;min-height:0;display:grid;grid-template-columns:340px 1fr 372px;
  gap:12px;padding:12px 16px}
.col{display:flex;flex-direction:column;gap:12px;min-height:0}
.bottombar{flex:0 0 auto;height:34px;display:flex;align-items:center;gap:18px;
  padding:0 18px;border-top:1px solid var(--line);background:var(--barbg);
  font-family:var(--mono);font-size:11px;color:var(--tx3)}
.bottombar .live{color:var(--grn)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.kpi{background:var(--pnl2);padding:10px 12px}
.kpi .l{font-size:11px;color:var(--tx3);letter-spacing:.4px}
.kpi .v{font-family:var(--mono);font-size:25px;line-height:1.15;color:var(--hd2);margin-top:2px}
.kpi .v small{font-size:11px;color:var(--tx3);margin-left:3px}
.kpi .v.r{color:var(--red)} .kpi .v.a{color:var(--amb)} .kpi .v.g{color:var(--grn)}
.kpi .v.c{color:var(--cy)}

/* 地图 */
.map{position:relative;flex:1;min-height:0;background:
  radial-gradient(circle at 50% 45%,rgba(56,189,248,.06),transparent 65%),var(--mapbg);
  border:1px solid var(--line);overflow:hidden;cursor:grab;touch-action:none}
.map svg{display:block;width:100%;height:100%}
.map .hud{position:absolute;font-family:var(--mono);font-size:10px;color:var(--tx3);pointer-events:none}
.map .hud.tl{left:12px;top:10px}
.map .hud.tr{right:12px;top:10px;text-align:right}
.map .hud.bl{left:12px;bottom:10px}
.map .zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:4px}
.map .zoom button{width:24px;height:24px;background:var(--pnl2);
  border:1px solid var(--line2);color:var(--hd);font-family:var(--mono);font-size:13px}
.map .zoom button:hover{border-color:var(--cy);color:var(--cy)}
/* 图层切换（矢量 / 影像），放在缩放按钮上方 */
.map .lyr{position:absolute;right:10px;bottom:92px;display:flex;flex-direction:column;gap:4px}
.map .lyr button{width:34px;height:22px;background:var(--pnl2);border:1px solid var(--line2);
  color:var(--tx2);font-size:10.5px;font-family:var(--font);line-height:1}
.map .lyr button:hover{border-color:var(--cy);color:var(--hd)}
.map .lyr button.on{background:rgba(46,230,214,.18);border-color:var(--cy);color:var(--cy)}
/* 拖动中：抓手光标，并屏蔽子元素的手型，避免"能拖却没反应"的错觉 */
.map.panning{cursor:grabbing}
.map.panning svg,.map.panning svg *{cursor:grabbing!important}

/* 列表行 */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-bottom:1px solid rgba(56,189,248,.06);font-size:12.5px}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(56,189,248,.08)}
.row .k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{font-family:var(--mono);font-size:11px;color:var(--tx3);flex:0 0 auto}

/* 告警 */
.alarm{display:flex;gap:9px;padding:9px 12px;border-bottom:1px solid rgba(56,189,248,.06);
  border-left:2px solid transparent;font-size:12.5px;align-items:flex-start}
.alarm.critical{border-left-color:var(--red);background:rgba(255,77,94,.05)}
.alarm.major{border-left-color:var(--amb);background:rgba(255,176,31,.04)}
.alarm.minor{border-left-color:var(--bl)}
.alarm .m{flex:1;min-width:0}
.alarm .t{font-family:var(--mono);font-size:10px;color:var(--tx3);flex:0 0 auto;
  white-space:nowrap;text-align:right}
.alarm .sub{font-size:10.5px;color:var(--tx3);margin-top:2px;font-family:var(--mono)}
.alarm.new{animation:flash .9s ease-out}
@keyframes flash{from{background:rgba(255,77,94,.28)}}

.empty{padding:26px 12px;text-align:center;color:var(--tx3);font-size:12px}

/* 目标详情 */
.kv{display:grid;grid-template-columns:78px 1fr;gap:6px 10px;padding:11px 13px;font-size:12.5px}
.kv .k{color:var(--tx3)}
.kv .v{font-family:var(--mono);color:var(--hd2)}

/* ---------- 后台 ---------- */
.admin{position:absolute;inset:0;display:flex;z-index:1}
.side{width:222px;flex:0 0 auto;border-right:1px solid var(--line);
  background:var(--barbg);display:flex;flex-direction:column}
.side .lg{padding:14px 13px;border-bottom:1px solid var(--line);display:flex;gap:9px;align-items:center}
.side .lg .n1{font-size:14px;letter-spacing:.4px}
.side .lg .n2{font-family:var(--mono);font-size:8.5px;color:var(--tx3);letter-spacing:.8px}
.side nav{flex:1;overflow:auto;padding:6px 0}
.side .grp{padding:11px 14px 5px;font-size:10.5px;color:var(--tx3);letter-spacing:1px}
.side .it{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 20px;
  font-size:13px;color:var(--tx2);cursor:pointer;border-left:2px solid transparent}
.side .it:hover{background:rgba(56,189,248,.08);color:var(--tx)}
.side .it.on{background:linear-gradient(90deg,rgba(46,230,214,.13),transparent);
  border-left-color:var(--cy);color:var(--hd2)}
.side .it .bdg{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--red)}
.side .ft{padding:9px 13px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:10px;color:var(--tx3);display:flex;gap:6px;align-items:center}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.main .hd{height:48px;flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:0 18px;border-bottom:1px solid var(--line)}
.main .hd h2{font-size:15px;font-weight:500;letter-spacing:.5px}
.main .hd .sub{font-family:var(--mono);font-size:10.5px;color:var(--tx3)}
.main .hd .rt{margin-left:auto;display:flex;gap:8px;align-items:center}
.main .body{flex:1;min-height:0;overflow:auto;padding:14px 18px 18px;
  display:flex;flex-direction:column;gap:12px}

table.tb{width:100%;border-collapse:collapse;font-size:12.5px}
table.tb th{text-align:left;padding:9px 10px;font-size:11px;color:var(--tx3);
  font-weight:400;letter-spacing:.5px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--pnl2);z-index:1}
table.tb td{padding:10px;border-bottom:1px solid rgba(56,189,248,.06);vertical-align:middle}
table.tb tr:hover td{background:rgba(56,189,248,.04)}
table.tb td.m{font-family:var(--mono);font-size:11.5px;color:var(--tx2)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:26px;padding:0 11px;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:rgba(56,189,248,.04);color:var(--tx2);
  font-size:12px;cursor:pointer}
.chip.on{border-color:var(--cy);background:rgba(46,230,214,.12);color:var(--cy)}

.form{display:grid;grid-template-columns:110px 1fr;gap:10px 14px;font-size:13px;
  align-items:center;max-width:560px}
.form label{color:var(--tx3)}
.form input,.form select{height:30px;background:var(--pnl2);border:1px solid var(--line);
  color:var(--tx);padding:0 9px;font-family:var(--mono);font-size:12.5px;width:100%}
.form input:focus,.form select:focus{outline:0;border-color:var(--cy)}

/* ---------- 登录 ---------- */
.login{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .85fr}
.login .lf{padding:46px 56px;display:flex;flex-direction:column;
  border-right:1px solid var(--line);position:relative;overflow:hidden}
.login .lf .bc{font-family:var(--mono);font-size:11px;color:var(--tx3);letter-spacing:.6px}
.login .lf .tt{margin-top:auto;font-size:38px;line-height:1.28;letter-spacing:1.5px;
  background:var(--brand-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.login .lf .ds{margin-top:14px;color:var(--tx2);font-size:14px;line-height:2;max-width:560px}
.login .lf .nums{margin-top:26px;margin-bottom:auto;display:flex;gap:44px}
.login .lf .nums b{display:block;font-family:var(--mono);font-size:27px;color:var(--cy)}
.login .lf .nums span{font-size:11.5px;color:var(--tx3)}
.login .rt{display:flex;align-items:center;justify-content:center;padding:40px;
  background:radial-gradient(circle at 50% 40%,rgba(56,189,248,.07),transparent 60%)}
.login .box{width:352px}
.login .box h1{font-size:19px;letter-spacing:.6px;font-weight:500;margin-bottom:5px}
.login .box .ps{font-size:12px;color:var(--tx3);margin-bottom:26px}
.login .fld{margin-bottom:14px}
.login .fld label{display:block;font-size:11.5px;color:var(--tx3);margin-bottom:6px}
.login .fld input{width:100%;height:38px;background:var(--pnl2);
  border:1px solid var(--line);color:var(--tx);padding:0 11px;font-size:13.5px;
  font-family:var(--mono);letter-spacing:.5px}
.login .fld input:focus{outline:0;border-color:var(--cy);box-shadow:0 0 0 2px rgba(46,230,214,.10)}
.login .go{width:100%;height:40px;margin-top:8px;background:linear-gradient(90deg,#1aa8b8,#2ee6d6);
  border:0;color:#04141a;font-size:14px;letter-spacing:2px;font-weight:600}
.login .go:hover{filter:brightness(1.08)}
.login .err{color:var(--red);font-size:12px;min-height:18px;margin-top:9px}
.login .ft{position:absolute;left:56px;bottom:24px;font-family:var(--mono);font-size:10.5px;color:var(--tx3)}

/* ---------- 小屏兜底：后台菜单不挤成一条 ---------- */
@media (max-width:1180px){
  .side{width:186px}
  .main .body{padding:12px}
}
.printhead{display:none}

/* ---------- 打印：报表 / 设备报告交给客户时用 ---------- */
@media print{
  @page{margin:14mm}
  html,body{height:auto;overflow:visible;background:#fff;color:#111}
  body::before{display:none}
  .top,.side,.bottombar,.main .hd,.chip,.btn,.back{display:none!important}
  .admin{position:static;display:block}
  .main{display:block;min-width:0}
  .main .body{display:block;overflow:visible;padding:0;height:auto}
  .printhead{display:block;margin-bottom:12px;border-bottom:2px solid #333;padding-bottom:8px}
  .printhead .t{font-size:18px;font-weight:600;color:#111}
  .printhead .s{font-size:11px;color:#555;margin-top:4px}
  .card{background:#fff!important;border:1px solid #bbb!important;color:#111;
    break-inside:avoid;margin-bottom:10px;backdrop-filter:none}
  .card::before,.card::after{display:none}
  .card>.hd{background:#f3f3f3!important;color:#111!important;border-color:#bbb!important}
  .card>.hd .en,.card>.hd .rt{color:#555!important}
  .card>.bd{overflow:visible!important}
  table.tb th{background:#f3f3f3!important;color:#333!important;border-color:#ccc!important}
  table.tb td{color:#111!important;border-color:#ddd!important}
  table.tb td.m{color:#111!important}
  .kv .k,.help,.empty{color:#444!important}
  .kv .v{color:#111!important}
  .kpi4{grid-template-columns:repeat(4,1fr)!important}
  .kpi .l{color:#555!important}
  .kpi .v{color:#111!important}
  .tag{border-color:#888!important;color:#333!important;background:none!important}
  a{color:#111;text-decoration:none}
}