/* ==========================================================================
   铁流智脑 V0.3 · 作战指挥 HUD 视觉体系
   --------------------------------------------------------------------------
   设计依据（联网查证的行业标准与实际案例）：
   · T/CICC 08005-2026《固定式指挥中心建设通用标准·显示控制系统技术规范》
   · SJ 20570-1996《指挥自动化系统显示分系统通用规范》
   · MIL-STD-2525 军事符号标准 / MIL-HDBK-761A 人因工程设计手册
   · Sci-Fi HUD 开源规范：细描边构建、同心圆雷达、单色主色 + 红色告警
     背景 #000b18、主色 #44ddff、告警 #ff3333、等宽字体、发光不用投影

   核心视觉原则：
   1. 用极细描边构建界面，不用实心填充块
   2. 切角 + 四角 L 形角标（20×20，2px 实线）
   3. 单色主青 + 红告警 + 橙警告 + 绿正常，不混用其他色
   4. 所有数字等宽 + text-shadow 发光（光是发射的，不是投影）
   5. 背景细网格 + 雷达扫描线，营造指挥大厅感
   6. 移动优先：默认手机样式，768px 起才扩列
   ========================================================================== */

:root {
  /* 底色系 */
  --void:      #00080f;   /* 最深背景 */
  --deep:      #02101c;   /* 卡片底 */
  --panel:     #041624;   /* 面板底 */
  --raise:     #06202f;   /* 悬浮底 */

  /* 主色系 */
  --cyan:      #44ddff;   /* 主青 */
  --cyan-dim:  #1a8fb5;   /* 暗青 */
  --cyan-line: rgba(68, 221, 255, 0.30);
  --cyan-glow: rgba(68, 221, 255, 0.65);

  /* 状态色 */
  --danger:    #ff3b3b;   /* 告警红 */
  --warn:      #ffaa22;   /* 警告橙 */
  --ok:        #3ddc84;   /* 正常绿 */

  /* 文字 */
  --t1:        #e8f4f8;   /* 主文字 */
  --t2:        #7a95a8;   /* 次级 */
  --t3:        #4a6070;   /* 弱化 */

  /* 字体 */
  --mono: 'JetBrains Mono', 'Consolas', 'SF Mono', 'Courier New', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  background: var(--void);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 全局网格背景 + 扫描线 */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(68,221,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,221,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
body::after {
  content: '';
  position: fixed; left: 0; right: 0; height: 180px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(68,221,255,.05), transparent);
  animation: radarSweep 9s linear infinite;
}
@keyframes radarSweep {
  0%   { top: -180px; }
  100% { top: 100%; }
}

.page { display: none; position: absolute; inset: 0; z-index: 1; }
.page.active { display: flex; flex-direction: column; }

/* ==========================================================================
   通用：切角卡片 + 四角 L 形角标（HUD 核心）
   ========================================================================== */
.hud-box {
  position: relative;
  background: rgba(2, 16, 28, .72);
  border: 1px solid var(--cyan-line);
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%,
    0 calc(100% - 12px), 0 12px
  );
}
/* 四角 L 形角标 */
.hud-box::before,
.hud-box::after {
  content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--cyan);
}
.hud-box::before {
  top: -1px; left: -1px;
  border-top: 2px solid; border-left: 2px solid;
}
.hud-box::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid; border-right: 2px solid;
}

/* ==========================================================================
   按钮
   ========================================================================== */
button { font-family: inherit; cursor: pointer; transition: all .16s; }

.btn {
  height: 40px; padding: 0 20px;
  background: rgba(68,221,255,.06);
  border: 1px solid var(--cyan-line);
  color: var(--cyan);
  font-size: 13px; letter-spacing: 1px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  white-space: nowrap;
}
.btn:hover { background: rgba(68,221,255,.14); border-color: var(--cyan); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, rgba(68,221,255,.22), rgba(68,221,255,.10));
  border-color: var(--cyan); color: #eaffff; font-weight: 600;
  box-shadow: 0 0 16px rgba(68,221,255,.22), inset 0 0 12px rgba(68,221,255,.08);
}
.btn-primary:hover { box-shadow: 0 0 26px rgba(68,221,255,.42), inset 0 0 16px rgba(68,221,255,.14); }

.btn-ok {
  background: rgba(61,220,132,.10); border-color: rgba(61,220,132,.5); color: var(--ok);
}
.btn-ok:hover { background: rgba(61,220,132,.2); box-shadow: 0 0 16px rgba(61,220,132,.3); }

.btn-danger {
  background: rgba(255,59,59,.08); border-color: rgba(255,59,59,.45); color: var(--danger);
}
.btn-danger:hover { background: rgba(255,59,59,.18); }

.btn-ghost {
  background: transparent; border-color: var(--t3); color: var(--t2);
}
.btn-ghost:hover { border-color: var(--cyan-dim); color: var(--cyan); }

.btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.btn-block { width: 100%; display: block; }

/* ==========================================================================
   L1 登录页
   ========================================================================== */
#pageLogin { align-items: center; justify-content: center; overflow: hidden; }

.login-bg-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(68,221,255,.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(68,221,255,.06), transparent 70%);
}

.login-frame {
  position: relative; z-index: 2;
  width: 400px; max-width: calc(100vw - 32px);
  padding: 40px 32px 32px;
}

.login-corner {
  position: absolute; width: 56px; height: 56px; pointer-events: none;
  border-color: var(--cyan);
}
.login-corner.tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.login-corner.tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.login-corner.bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.login-corner.br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

.login-logo {
  width: 64px; height: 64px; margin: 0 auto 22px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 34px rgba(68,221,255,.55);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 34px rgba(68,221,255,.45); }
  50%     { box-shadow: 0 0 52px rgba(68,221,255,.75); }
}

.login-title {
  text-align: center; font-size: 28px; font-weight: 600;
  letter-spacing: 10px; color: #eaffff;
  text-shadow: 0 0 22px rgba(68,221,255,.7);
  margin-bottom: 10px;
}
.login-sub {
  text-align: center; font-size: 12px; color: var(--t2);
  letter-spacing: 3px; margin-bottom: 6px;
}
.login-ver {
  text-align: center; font-size: 10.5px; color: var(--t3);
  font-family: var(--mono); letter-spacing: 1.5px; margin-bottom: 30px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 11px; color: var(--cyan-dim);
  letter-spacing: 2px; margin-bottom: 7px; font-family: var(--mono);
}
.field input, .field select {
  width: 100%; height: 44px; padding: 0 14px;
  background: rgba(0,8,15,.8);
  border: 1px solid var(--cyan-line);
  color: var(--t1); font-size: 14px; font-family: var(--mono);
  outline: none;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.field input:focus, .field select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(68,221,255,.14), inset 0 0 12px rgba(68,221,255,.08);
}
.field input::placeholder { color: var(--t3); }

.login-hint {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px dashed var(--cyan-line);
  display: flex; flex-direction: column; gap: 5px;
  font-size: 10.5px; color: var(--t3); font-family: var(--mono);
}
.login-hint span::before { content: '▸ '; color: var(--cyan-dim); }

.err-text {
  color: var(--danger); font-size: 12px; margin-top: 12px;
  min-height: 16px; text-shadow: 0 0 10px rgba(255,59,59,.5);
}

/* ==========================================================================
   HUD 顶栏
   ========================================================================== */
.hud-bar {
  flex-shrink: 0; position: relative; z-index: 10;
  background: linear-gradient(180deg, rgba(4,22,36,.96), rgba(2,16,28,.92));
  border-bottom: 1px solid var(--cyan-line);
  padding: 10px 14px;
}
.hud-bar::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .55;
}

.hud-bar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-width: 0;
}

.hud-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 14px rgba(68,221,255,.5);
}
.hud-name {
  font-size: 14px; font-weight: 600; letter-spacing: 3px; color: #eaffff;
  text-shadow: 0 0 14px rgba(68,221,255,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-desc {
  font-size: 9.5px; color: var(--t3); letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hud-user { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.hud-uname { font-size: 12px; color: var(--t1); font-family: var(--mono); white-space: nowrap; }
.tag {
  padding: 2px 8px; font-size: 10px; letter-spacing: .5px; font-family: var(--mono);
  border: 1px solid var(--cyan-line); color: var(--cyan); background: rgba(68,221,255,.08);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  white-space: nowrap;
}
.tag.admin  { color: var(--warn); border-color: rgba(255,170,34,.45); background: rgba(255,170,34,.08); }
.tag.leader { color: var(--cyan); }
.tag.driver { color: var(--t2); border-color: var(--t3); background: transparent; }
.tag.team   { color: var(--t2); border-color: var(--t3); }

/* 导航 */
.hud-nav {
  display: flex; gap: 6px; margin-top: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hud-nav::-webkit-scrollbar { display: none; }
.nav-btn {
  flex-shrink: 0; height: 34px; padding: 0 16px;
  background: rgba(0,8,15,.5); border: 1px solid var(--cyan-line);
  color: var(--t2); font-size: 12.5px; letter-spacing: 1px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.nav-btn.active {
  background: rgba(68,221,255,.16);
  border-color: var(--cyan); color: var(--cyan); font-weight: 600;
  box-shadow: 0 0 14px rgba(68,221,255,.22);
}

/* ==========================================================================
   主内容区
   ========================================================================== */
.main-area { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: 2px; color: #eaffff;
}
.section-title::before {
  content: ''; width: 3px; height: 16px; background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.count-pill {
  padding: 2px 9px; font-size: 11px; font-family: var(--mono);
  color: var(--cyan); background: rgba(68,221,255,.12);
  border: 1px solid var(--cyan-line);
}

/* ==========================================================================
   任务卡片（移动优先）
   ========================================================================== */
.task-list { display: flex; flex-direction: column; gap: 10px; }

.task-card {
  position: relative;
  padding: 14px;
  background: rgba(2,16,28,.72);
  border: 1px solid var(--cyan-line);
  border-left: 3px solid var(--cyan-dim);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: all .16s;
}
.task-card:active { background: rgba(4,22,36,.9); border-left-color: var(--cyan); }
.task-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan);
  opacity: .7;
}

.tc-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tc-name {
  font-size: 14px; font-weight: 600; color: #eaffff; letter-spacing: .5px;
  flex: 1; min-width: 0; word-break: break-all;
}
.tc-no { font-size: 10.5px; color: var(--t3); font-family: var(--mono); margin-top: 3px; }

.tc-status {
  flex-shrink: 0; padding: 3px 10px; font-size: 10.5px; font-family: var(--mono);
  letter-spacing: .5px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.tc-status.draft      { color: var(--t2); background: rgba(122,149,168,.12); border: 1px solid var(--t3); }
.tc-status.planned    { color: var(--cyan); background: rgba(68,221,255,.12); border: 1px solid var(--cyan-line); }
.tc-status.published  { color: var(--ok); background: rgba(61,220,132,.12); border: 1px solid rgba(61,220,132,.4); }

.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tc-tag {
  padding: 2px 8px; font-size: 10.5px; color: var(--t2);
  background: rgba(68,221,255,.05); border: 1px solid rgba(68,221,255,.16);
  white-space: nowrap;
}
.tc-tag.special { color: var(--warn); border-color: rgba(255,170,34,.35); background: rgba(255,170,34,.06); }

/* 参数网格：手机两列，大屏四列 */
.tc-params {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  padding-top: 10px; border-top: 1px dashed rgba(68,221,255,.14);
}
.tc-param { min-width: 0; }
.tc-param label { display: block; font-size: 9.5px; color: var(--t3); letter-spacing: .5px; margin-bottom: 3px; }
.tc-param b {
  font-size: 12.5px; font-family: var(--mono); color: var(--t1); font-weight: 500;
  display: block; word-break: break-all;
}

/* ==========================================================================
   资源卡片（移动优先，重点修复）
   ========================================================================== */
.res-card { display: flex; flex-direction: column; gap: 0; }

/* ---------- 资源管理 ---------- */
.res-tabs {
  display: flex; gap: 0; margin-bottom: 12px;
  border: 1px solid var(--cyan-line); background: rgba(0,8,15,.6);
}
.res-tab {
  flex: 1; height: 38px; background: transparent; border: none;
  color: var(--t2); font-size: 12.5px; letter-spacing: 1px;
  border-right: 1px solid rgba(68,221,255,.12);
}
.res-tab:last-child { border-right: none; }
.res-tab.active { background: rgba(68,221,255,.14); color: var(--cyan); font-weight: 600; }

.res-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.res-search {
  width: 100%; height: 40px; padding: 0 14px;
  background: rgba(0,8,15,.8); border: 1px solid var(--cyan-line);
  color: var(--t1); font-size: 13px; font-family: var(--mono); outline: none;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.res-search:focus { border-color: var(--cyan); }
.res-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.res-btns .btn { width: 100%; padding: 0 8px; font-size: 12px; }

.res-body { display: flex; flex-direction: column; gap: 10px; }

.res-item {
  position: relative;
  padding: 13px;
  background: rgba(2,16,28,.72);
  border: 1px solid var(--cyan-line);
  border-left: 3px solid var(--cyan-dim);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.res-item.has-pending { border-left-color: var(--warn); }

.ri-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.ri-no {
  font-size: 13px; font-family: var(--mono); color: var(--cyan);
  text-shadow: 0 0 10px rgba(68,221,255,.5); letter-spacing: 1px;
}
.ri-badges { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ri-badge {
  padding: 2px 8px; font-size: 10px; letter-spacing: .5px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.ri-badge.on  { color: var(--ok); background: rgba(61,220,132,.12); border: 1px solid rgba(61,220,132,.4); }
.ri-badge.off { color: var(--danger); background: rgba(255,59,59,.10); border: 1px solid rgba(255,59,59,.4); }
.ri-badge.pending {
  color: var(--warn); background: rgba(255,170,34,.10); border: 1px solid rgba(255,170,34,.4);
  animation: blinkWarn 1.4s step-end infinite;
}
@keyframes blinkWarn { 50% { opacity: .35; } }

.ri-title {
  font-size: 14px; font-weight: 600; color: #eaffff; margin-bottom: 10px;
  word-break: break-all;
}

.ri-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px;
  padding-top: 9px; border-top: 1px dashed rgba(68,221,255,.14);
}
.ri-cell { min-width: 0; }
.ri-cell label { display: block; font-size: 9.5px; color: var(--t3); margin-bottom: 3px; letter-spacing: .5px; }
.ri-cell b {
  font-size: 12.5px; font-family: var(--mono); color: var(--t1); font-weight: 500;
  word-break: break-all;
}

.ri-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(68,221,255,.14);
}

/* ==========================================================================
   审批卡片
   ========================================================================== */
.appr-tabs { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--cyan-line); background: rgba(0,8,15,.6); }
.appr-tab {
  flex: 1; height: 38px; background: transparent; border: none;
  color: var(--t2); font-size: 12.5px; letter-spacing: 1px;
  border-right: 1px solid rgba(68,221,255,.12);
}
.appr-tab:last-child { border-right: none; }
.appr-tab.active { background: rgba(68,221,255,.14); color: var(--cyan); font-weight: 600; }

.appr-body { display: flex; flex-direction: column; gap: 10px; }

.appr-item {
  padding: 13px; position: relative;
  background: rgba(2,16,28,.72); border: 1px solid var(--cyan-line);
  border-left: 3px solid var(--warn);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.appr-item.approved { border-left-color: var(--ok); }
.appr-item.rejected { border-left-color: var(--danger); }
.appr-item.withdrawn, .appr-item.conflict { border-left-color: var(--t3); }

.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.ai-no { font-size: 12.5px; font-family: var(--mono); color: var(--cyan); letter-spacing: .5px; }
.ai-type { font-size: 13px; font-weight: 600; color: #eaffff; }
.ai-status {
  padding: 2px 9px; font-size: 10px; letter-spacing: .5px;
  color: var(--warn); background: rgba(255,170,34,.10); border: 1px solid rgba(255,170,34,.35);
}
.ai-status.approved { color: var(--ok); background: rgba(61,220,132,.1); border-color: rgba(61,220,132,.35); }
.ai-status.rejected { color: var(--danger); background: rgba(255,59,59,.1); border-color: rgba(255,59,59,.35); }
.ai-status.withdrawn, .ai-status.conflict { color: var(--t2); background: rgba(122,149,168,.1); border-color: var(--t3); }

/* 差异对比：手机上下堆叠，大屏左右并排 */
.ai-diff { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.diff-box {
  padding: 10px 12px; background: rgba(0,8,15,.6);
  border: 1px solid rgba(68,221,255,.16);
}
.diff-box.after { border-color: rgba(61,220,132,.3); }
.diff-box label {
  display: block; font-size: 9.5px; color: var(--t3);
  letter-spacing: 1px; margin-bottom: 7px; font-family: var(--mono);
}
.diff-box pre {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  color: var(--t2); white-space: pre-wrap; word-break: break-all; margin: 0;
}
.diff-box.after pre { color: var(--ok); }

.ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-reason { font-size: 11.5px; color: var(--t3); flex: 1; min-width: 120px; }
.ai-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ==========================================================================
   规划页（左地图右面板，手机上下）
   ========================================================================== */
.plan-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.plan-map {
  position: relative; flex-shrink: 0; height: 42vh; min-height: 220px;
  background: var(--void); border-bottom: 1px solid var(--cyan-line);
}
#mapContainer { width: 100%; height: 100%; }
#mapContainer .amap-satellite,
#mapContainer canvas { filter: brightness(.6) contrast(1.15) saturate(.7); }

.map-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(2,16,28,.9); border: 1px solid var(--cyan-line);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  backdrop-filter: blur(6px);
}
.lg-item { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--t2); }
.lg-line { width: 20px; height: 3px; flex-shrink: 0; }
.lg-line.base { background: var(--t3); }
.lg-line.cons { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lg-dot.pt { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.lg-dot.av { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

.plan-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.panel-scroll { flex: 1; overflow-y: auto; padding: 12px; }

.road-switch { display: flex; gap: 0; margin-bottom: 10px; border: 1px solid var(--cyan-line); }
.road-btn {
  flex: 1; height: 38px; background: transparent; border: none;
  color: var(--t2); font-size: 12.5px; letter-spacing: 1px;
  border-right: 1px solid rgba(68,221,255,.12);
}
.road-btn:last-child { border-right: none; }
.road-btn.active { background: rgba(68,221,255,.15); color: var(--cyan); font-weight: 600; }

.panel-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.panel-btns .btn { width: 100%; padding: 0 6px; font-size: 12px; }

.warn-bar {
  display: none; padding: 10px 12px; margin-bottom: 12px;
  background: rgba(255,170,34,.08); border-left: 3px solid var(--warn);
  color: var(--warn); font-size: 11.5px; line-height: 1.6;
}
.warn-bar.show { display: block; }

.ps { margin-bottom: 16px; }
.ps-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--cyan);
  letter-spacing: 1.5px; margin-bottom: 9px; font-family: var(--mono);
}
.ps-title::before { content: ''; width: 2px; height: 12px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.ps-title.warn { color: var(--warn); }
.ps-title.warn::before { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi {
  padding: 10px 12px; background: rgba(0,8,15,.6);
  border: 1px solid rgba(68,221,255,.18);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.kpi label { display: block; font-size: 9.5px; color: var(--t3); letter-spacing: .5px; margin-bottom: 6px; }
.kpi b {
  font-size: 17px; font-family: var(--mono); color: var(--cyan); font-weight: 500;
  text-shadow: 0 0 12px rgba(68,221,255,.6); word-break: break-all;
}

.mix-row { display: grid; grid-template-columns: 36px 1fr 78px; gap: 8px; align-items: center; margin-bottom: 7px; }
.mix-label { font-size: 10.5px; color: var(--t2); }
.mix-bar { height: 6px; background: rgba(68,221,255,.08); overflow: hidden; }
.mix-bar i { display: block; height: 100%; background: var(--cyan); transition: width .5s; box-shadow: 0 0 8px var(--cyan-glow); }
.mix-bar i.nat { background: var(--warn); box-shadow: 0 0 8px rgba(255,170,34,.6); }
.mix-bar i.oth { background: var(--t3); box-shadow: none; }
.mix-val { font-size: 10px; color: var(--t2); font-family: var(--mono); text-align: right; }

.list-box { display: flex; flex-direction: column; gap: 6px; }
.list-box li {
  list-style: none; padding: 8px 10px; font-size: 11.5px; line-height: 1.6;
  background: rgba(0,8,15,.5); border-left: 2px solid var(--danger); color: var(--t2);
  word-break: break-all;
}
.list-box.verify li { border-left-color: var(--ok); }
.list-box.pending li { border-left-color: var(--warn); color: var(--warn); }
.list-box li.dim { border-left-color: var(--t3); color: var(--t3); }

/* 通讯占位区 */
.comm-zone {
  flex-shrink: 0; padding: 11px 12px;
  background: rgba(4,22,36,.9); border-top: 1px solid var(--cyan-line);
}
.comm-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--t2); letter-spacing: 1px; margin-bottom: 9px;
  font-family: var(--mono);
}
.comm-badge {
  padding: 2px 8px; font-size: 9.5px; color: var(--t3);
  border: 1px solid var(--t3); background: transparent;
}
.comm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 9px; }
.placeholder-btn {
  height: 30px; padding: 0; font-size: 10px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(122,149,168,.22);
  color: var(--t3); cursor: not-allowed; letter-spacing: .3px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.switch-row { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--t3); }
.switch { width: 32px; height: 16px; border-radius: 8px; background: rgba(122,149,168,.18); position: relative; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--t3); }

/* ==========================================================================
   创建页表单（移动优先单列）
   ========================================================================== */
.create-wrap { max-width: 960px; margin: 0 auto; }
.form-box { padding: 15px; }

.form-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(68,221,255,.16); flex-wrap: wrap;
}
.type-pill {
  padding: 4px 14px; font-size: 12px; color: var(--cyan);
  background: rgba(68,221,255,.12); border: 1px solid var(--cyan-line);
  letter-spacing: 1.5px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.type-pill.special { color: var(--warn); background: rgba(255,170,34,.1); border-color: rgba(255,170,34,.4); }
.form-hint { font-size: 10.5px; color: var(--t3); }
.form-hint em { color: var(--danger); font-style: normal; }

.form-sec {
  font-size: 12px; font-weight: 600; color: var(--cyan);
  letter-spacing: 1.5px; margin: 18px 0 11px;
  padding-left: 9px; border-left: 2px solid var(--cyan);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.form-sec.warn { color: var(--warn); border-left-color: var(--warn); }
.form-sec .note { font-size: 10px; font-weight: 400; color: var(--t3); letter-spacing: 0; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fg.full { grid-column: 1 / -1; }
.fg label { font-size: 11px; color: var(--t2); letter-spacing: .5px; }
.fg label em { color: var(--danger); font-style: normal; }
.fg input, .fg select {
  width: 100%; height: 40px; padding: 0 12px;
  background: rgba(0,8,15,.75); border: 1px solid var(--cyan-line);
  color: var(--t1); font-size: 13px; font-family: var(--mono); outline: none;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.fg input:focus, .fg select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(68,221,255,.12); }
.fg input[readonly] { background: rgba(0,8,15,.4); color: var(--t3); }
.fg select option { background: #02101c; color: var(--t1); }

.form-foot {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(68,221,255,.16);
}
.form-foot .btn { width: 100%; }

/* ==========================================================================
   弹窗
   ========================================================================== */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,4,8,.82); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 16px;
}
.modal.show { display: flex; }
.modal-card {
  width: 100%; max-width: 600px; max-height: 84vh;
  display: flex; flex-direction: column; position: relative;
  background: rgba(2,16,28,.97);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 40px rgba(68,221,255,.2);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(68,221,255,.2); flex-shrink: 0;
}
.modal-head h3 { font-size: 14px; font-weight: 600; letter-spacing: 1.5px; color: var(--cyan); }
.modal-x {
  width: 28px; height: 28px; background: transparent;
  border: 1px solid rgba(122,149,168,.4); color: var(--t2);
  font-size: 13px; flex-shrink: 0;
}
.modal-x:hover { border-color: var(--danger); color: var(--danger); }
.modal-body { padding: 16px; overflow-y: auto; font-size: 13px; line-height: 1.75; color: var(--t2); }
.modal-body h4 { font-size: 12px; color: var(--cyan); margin: 14px 0 8px; letter-spacing: 1px; font-family: var(--mono); }
.modal-body h4:first-child { margin-top: 0; }
.modal-body ul { margin-left: 18px; }
.modal-body li { margin: 5px 0; }
.modal-body .ok { color: var(--ok); }
.modal-body .warn { color: var(--warn); }
.modal-body .bad { color: var(--danger); }
.modal-foot {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid rgba(68,221,255,.2); flex-shrink: 0;
}
.modal-foot .btn { flex: 1; }

.res-form { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ==========================================================================
   通讯占位页
   ========================================================================== */
.comm-page {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.comm-empty { text-align: center; max-width: 420px; }
.comm-icon {
  width: 68px; height: 68px; margin: 0 auto 22px;
  background: rgba(68,221,255,.06); border: 2px solid var(--cyan-line);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.comm-empty h2 { font-size: 20px; letter-spacing: 6px; color: var(--t2); margin-bottom: 16px; }
.comm-empty p { font-size: 12.5px; line-height: 1.9; color: var(--t2); margin-bottom: 8px; }
.comm-empty p.dim { color: var(--t3); font-size: 11.5px; }

/* ==========================================================================
   滚动条
   ========================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(68,221,255,.28); }
::-webkit-scrollbar-thumb:hover { background: rgba(68,221,255,.5); }

/* ==========================================================================
   断点：平板 768px 起扩列
   ========================================================================== */
@media (min-width: 768px) {
  .main-area { padding: 20px; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-foot { flex-direction: row; justify-content: flex-end; }
  .form-foot .btn { width: auto; padding: 0 28px; }
  .tc-params { grid-template-columns: repeat(4, 1fr); }
  .ri-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .res-toolbar { flex-direction: row; align-items: center; }
  .res-search { flex: 1; max-width: 340px; }
  .res-btns { grid-template-columns: repeat(3, auto); flex-shrink: 0; }
  .panel-btns { grid-template-columns: repeat(4, 1fr); }
  .ai-diff { grid-template-columns: 1fr 1fr; }
  .comm-grid { grid-template-columns: repeat(8, 1fr); }
}

/* 桌面 1024px 起：规划页左右分栏 */
@media (min-width: 1024px) {
  .hud-bar { padding: 12px 24px; }
  .hud-nav { margin-top: 0; }
  .hud-bar-row { flex-wrap: nowrap; }
  .hud-nav { margin-top: 10px; }
  .plan-main { flex-direction: row; }
  .plan-map { flex: 0 0 64%; height: auto; border-bottom: none; border-right: 1px solid var(--cyan-line); }
  .plan-panel { flex: 1; }
  .form-grid { grid-template-columns: repeat(4, 1fr); }
  .ri-grid { grid-template-columns: repeat(4, 1fr); }
  .task-list { display: grid; grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1440px) {
  .main-area { padding: 26px; }
  .task-list { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
   规划页 V3 补丁：状态条 / 参数网格 / 操作分级 / 图例语义
   ========================================================================== */

.status-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(68,221,255,.14);
  border: 1px solid var(--cyan-line);
  margin-bottom: 12px;
}
.ss-item {
  padding: 8px 10px; background: rgba(2,16,28,.95);
}
.ss-item label {
  display: block; font-size: 9px; color: var(--t3);
  letter-spacing: 1px; margin-bottom: 4px; font-family: var(--mono);
}
.ss-item b {
  font-size: 12.5px; color: var(--cyan); font-family: var(--mono); font-weight: 500;
  text-shadow: 0 0 10px rgba(68,221,255,.5);
}

.param-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px;
}
.pm { min-width: 0; }
.pm label { display: block; font-size: 9.5px; color: var(--t3); margin-bottom: 3px; }
.pm b {
  font-size: 12px; font-family: var(--mono); color: var(--t1); font-weight: 500;
  word-break: break-all;
}

.op-row { margin-bottom: 8px; }
.op-row.op-primary .btn { height: 42px; font-size: 14px; letter-spacing: 3px; }
.op-row.op-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-row.op-secondary .btn { width: 100%; }
.op-row.op-danger { display: flex; justify-content: flex-end; }
.op-row.op-danger .btn { opacity: .65; font-size: 11px; }
.op-row.op-danger .btn:hover { opacity: 1; border-color: var(--danger); color: var(--danger); }

/* 图例语义区分：起点三角 / 终点方块 / 避让点圆环 */
.lg-tri {
  width: 0; height: 0; flex-shrink: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 11px solid var(--ok);
  filter: drop-shadow(0 0 5px var(--ok));
}
.lg-sq {
  width: 11px; height: 11px; flex-shrink: 0;
  background: var(--danger); box-shadow: 0 0 7px var(--danger);
}
.lg-ring {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid var(--danger); box-sizing: border-box;
  box-shadow: 0 0 7px rgba(255,59,59,.8);
}

/* 平板起状态条四列 */
@media (min-width: 768px) {
  .status-strip { grid-template-columns: repeat(4, 1fr); }
  .param-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .param-grid { grid-template-columns: repeat(4, 1fr); }
}