/* ==========================================================================
   嘉消战系统 · 指挥中心主题（视觉覆盖层）
   --------------------------------------------------------------------------
   这是叠加在 frontend/dist 构建产物之上的样式覆盖层，不是前端源码的一部分。
   前端一旦重新构建并覆盖 dist，本文件的引用会丢失，需要重新在 index.html
   里挂上，或（更好）把这里的设计 token 搬进前端源码。

   作用范围限定在顶部导航 .nav、队站首页 .db 两棵子树，以及首页自己的
   两个弹窗（class="dlg-personnel"，见文末一节）。其余页面（人员管理、车辆
   调整等）与其它 el-dialog 保持原样，避免在无法逐页验证的情况下破坏
   Element Plus 组件。

   dist 里的原样式是 Vue scoped 样式，选择器形如 .db-header[data-v-xxxxxxx]，
   特异度 (0,2,0)。这里统一用 #app 前缀把特异度抬到 (1,x,0) 稳定压过，
   既不依赖那个会随构建变化的 hash，也不用满屏 !important。
   ========================================================================== */

:root {
  /* 飞行甲板分层：靠亮度递进，不靠重阴影和彩光 */
  --cc-bg-0: #0e141f;
  --cc-bg-1: #121a28;
  --cc-bg-2: #182233;

  --cc-panel: rgba(255, 255, 255, 0.035);
  --cc-panel-hi: rgba(255, 255, 255, 0.055);
  --cc-line: rgba(180, 196, 220, 0.12);
  --cc-line-soft: rgba(180, 196, 220, 0.07);

  --cc-text: #e8eef8;
  --cc-text-dim: #b4c0d4;
  --cc-text-mute: #7d8ba3;

  --cc-red: #e85d6a;
  --cc-red-deep: #c42a3c;
  --cc-gold: #d4b46a;
  --cc-green: #3ecf86;
  --cc-blue: #5b9be8;
  --cc-orange: #e09a45;

  --cc-shadow: none;
  --cc-shadow-lg: none;
}

/* ---------- 全局底 ---------- */

#app {
  background: var(--cc-bg-0);
}

/* 深色页面下让滚动条也跟着走，否则右侧会留一条刺眼的白条 */
#app .db ::-webkit-scrollbar { width: 8px; height: 8px; }
#app .db ::-webkit-scrollbar-track { background: transparent; }
#app .db ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px;
}
#app .db ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }

/* ==========================================================================
   顶部导航
   ========================================================================== */

#app .nav {
  height: 56px;
  padding: 0 28px;
  background: rgba(10, 14, 22, .88);
  border-bottom: 1px solid var(--cc-line);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

/* 顶栏下沿一道极细的红金渐变，是整套视觉的"签名" */
#app .nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(217, 32, 56, .5) 18%,
    rgba(246, 196, 83, .55) 50%,
    rgba(217, 32, 56, .5) 82%,
    transparent 100%);
  pointer-events: none;
}

#app .nav__logo-img {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 8px rgba(255, 77, 94, .45));
}

#app .nav__logo-text {
  font-size: 17px;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffffff 0%, #cfe0ff 55%, #9db8e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#app .nav__item {
  color: var(--cc-text-dim);
  font-size: 13px;
  letter-spacing: .5px;
  border-radius: 8px;
  padding: 7px 16px;
  position: relative;
  transition: color .18s ease, background .18s ease;
}

#app .nav__item:hover {
  color: var(--cc-text);
  background: rgba(255, 255, 255, .06);
}

#app .nav__item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 77, 94, .22), rgba(255, 77, 94, .10));
  box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .35);
  font-weight: 600;
}

/* 选中项底部的小高亮，替代原来单调的蓝底 */
#app .nav__item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-red);
  box-shadow: 0 0 10px var(--cc-red);
}

#app .nav__user-trigger {
  border-radius: 9px;
  padding: 6px 12px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}

#app .nav__user-trigger:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cc-line);
}

#app .nav__username { color: var(--cc-text); }
#app .nav__arrow { color: var(--cc-text-mute); }
#app .nav__user-trigger:hover .nav__arrow { color: var(--cc-text-dim); }

#app .nav__role {
  background: linear-gradient(135deg, rgba(246, 196, 83, .22), rgba(246, 196, 83, .10));
  color: var(--cc-gold);
  box-shadow: inset 0 0 0 1px rgba(246, 196, 83, .3);
  letter-spacing: .5px;
}

/* ==========================================================================
   首页容器
   ========================================================================== */

#app .db {
  color: var(--cc-text);
  background-color: var(--cc-bg-0);
  background-image:
    linear-gradient(rgba(180, 196, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 196, 220, .035) 1px, transparent 1px),
    radial-gradient(900px 380px at 50% -12%, rgba(196, 42, 60, .07), transparent 58%),
    linear-gradient(180deg, var(--cc-bg-1) 0%, var(--cc-bg-0) 100%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-attachment: fixed;
}

/* ---------- 标语条 ---------- */

/* 原版把标语用 position:absolute + left:50% 居中，标语一长就会顶到右侧时钟上
   （实测两者只差 2px）。这里改成真正的三栏网格，列之间不可能重叠。 */
#app .db-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 28px;
  background: rgba(14, 20, 31, .55);
  border-bottom: 1px solid var(--cc-line);
  backdrop-filter: blur(14px);
}

#app .db-header__left {
  flex: none;
  justify-self: start;
}

#app .db-header__center {
  position: static;
  left: auto;
  transform: none;
  justify-self: center;
}

#app .db-header__right { justify-self: end; }

#app .db-station {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--cc-text);
  display: flex;
  align-items: center;
  gap: 9px;
}

#app .db-station::before { display: none; }

/* 十六字誓词：整套设计的视觉主角 */
#app .db-motto {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 10px;
  text-indent: 10px;
  white-space: nowrap;
  color: #d8c49a;
  background: none;
  -webkit-text-fill-color: #d8c49a;
  filter: none;
}

#app .db-time {
  font-size: 22px;
  font-weight: 400;
  color: #f2f6ff;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  text-shadow: none;
}

#app .db-date {
  font-size: 11.5px;
  color: var(--cc-text-mute);
  letter-spacing: .6px;
}

#app .db-live {
  background: rgba(62, 207, 134, .08);
  border: 1px solid rgba(62, 207, 134, .28);
  color: #7ed9a8;
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 1.2px;
  box-shadow: none;
}

#app .db-live__dot {
  background: #3ecf86;
  box-shadow: none;
}

#app .db-back-btn {
  background: linear-gradient(135deg, rgba(255, 77, 94, .18), rgba(255, 77, 94, .07));
  border: 1px solid rgba(255, 77, 94, .32);
  color: #ff8b96;
  border-radius: 8px;
}

#app .db-back-btn:hover {
  background: rgba(255, 77, 94, .26);
  color: #fff;
}

#app .db-body { padding: 18px 24px 22px; gap: 18px; }

/* ==========================================================================
   KPI 卡片
   ========================================================================== */

/* 原样式是 flex:1 等分，但 flex-basis:0 时外框最小也得是 padding+border，
   四张图标卡右侧留了 104px，在位率卡就会被挤成最窄的一张。改成 grid 等分外框。 */
#app .db-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

#app .kpi {
  position: relative;
  box-sizing: border-box;   /* 五张卡 flex:1 等分的是外框宽度，而不是扣掉各自 padding 之后的内容宽 */
  min-width: 0;
  padding: 16px 104px 16px 20px;
  border-radius: 8px;
  background: #161e2d;
  border: 1px solid var(--cc-line);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1),
              border-color .2s ease,
              background-color .2s ease,
              box-shadow .2s ease;
}

#app .kpi::before { display: none; }

#app .kpi::after { display: none; }

/* KPI 动态图标：Freepik「Emergency Brigade」Lineal Color（透明动态 WebP，自带动画） */
#app .kpi__ico {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  pointer-events: none;
}

#app .kpi__ico img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

#app .kpi:hover .kpi__ico img { transform: translateY(-2px) scale(1.08); }

/* 警灯图形矮而宽，等边框里显小，单独放大一点（要排在通用 hover 规则之后） */
#app .kpi--orange .kpi__ico img { transform: scale(1.18); }
#app .kpi--orange:hover .kpi__ico img { transform: translateY(-2px) scale(1.27); }

/* Flaticon 免费授权的署名行。.db 高 100vh 且从导航栏下方开始，底部 56px 被裁掉，
   所以按视口定位，贴在右下角面板的空白区里。 */
#app .db-credit {
  position: fixed;
  right: 30px;
  bottom: 8px;
  z-index: 5;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2px;
  color: rgba(138, 151, 173, .5);
}

#app .db-credit a {
  color: inherit;
  text-decoration: none;
}

#app .db-credit a:hover { color: rgba(200, 211, 230, .9); }

/* 悬停：卡片微抬、边框染成本卡的主色、投一层同色淡影；按下回落 */
#app .kpi:hover {
  transform: translateY(-2px);
  background: #192335;
  border-color: rgba(210, 224, 255, .3);
  border-color: color-mix(in srgb, var(--kpi-accent) 55%, transparent);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--kpi-accent) 75%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}

#app .kpi:active {
  transform: translateY(0) scale(.995);
  transition-duration: .08s;
}

@keyframes cc-kpi-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* 数值变化时轻微放大一下 */
@keyframes cc-kpi-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

#app .kpi--green  { --kpi-accent: var(--cc-green); }
#app .kpi--orange { --kpi-accent: var(--cc-orange); }
#app .kpi--blue   { --kpi-accent: var(--cc-blue); }

/* 总人数没有颜色修饰类，夹在四张彩色卡里会显得发灰。
   它是首要指标，给消防红并稍作强调。 */
#app .db-kpis > .kpi:first-child { --kpi-accent: var(--cc-red); }

/* 数字：放大、染成本卡主色（掺白提亮），后面跟一个小单位 */
#app .kpi__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 42px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: #f4f7fc;
  color: color-mix(in srgb, var(--kpi-accent) 72%, #fff);
  text-shadow: none;
  transform-origin: left center;
  transition: color .2s ease, text-shadow .2s ease;
  /* 入场由卡片的 cc-rise 和 JS 数字滚动负责；这里不再叠动画，
     否则 .is-bump 结束后 animation 回切会把淡入重放一遍 */
}

#app .kpi__num::after {
  content: "人";
  font: 500 13px/1 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 1px;
  color: var(--cc-text-mute);
  transition: color .2s ease;
}

#app .kpi--blue .kpi__num::after { content: "辆"; }

#app .kpi:hover .kpi__num {
  color: color-mix(in srgb, var(--kpi-accent) 55%, #fff);
  text-shadow: 0 0 22px color-mix(in srgb, var(--kpi-accent) 55%, transparent);
}

#app .kpi:hover .kpi__num::after { color: var(--cc-text-dim); }

#app .kpi__num.is-bump,
#app .kpi-rate__text.is-bump { animation: cc-kpi-bump .6s cubic-bezier(.2, .8, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  #app .kpi__num.is-bump,
  #app .kpi-rate__text.is-bump { animation: none; }
}

/* 标签：提亮、拉开字距；悬停时右侧浮出"查看明细 ›"，提示这张卡能点 */
#app .kpi__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cc-text-dim);
  letter-spacing: 2px;
  margin-top: 9px;
  white-space: nowrap;
  transition: color .2s ease;
}

#app .kpi:hover .kpi__label { color: var(--cc-text); }

#app .kpi__label::after,
#app .kpi-rate__label::after {
  content: "查看明细 ›";
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--kpi-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}

#app .kpi:hover .kpi__label::after,
#app .kpi-rate:hover .kpi-rate__label::after {
  opacity: 1;
  transform: none;
}

/* ---------- 在位率仪表 ----------
   Vue 只画了一个细圆环。dash-fix 在 .kpi-rate__ring 里另画一只 270° 仪表
   （svg.cc-gauge：轨道、刻度、80% 目标标、渐变弧、发光端点），把百分数放大
   成 .cc-rate__num 摆在右侧，环心 .cc-gauge__center 放"在位/总数"。
   原 svg 和 .kpi-rate__text 隐掉但留在 DOM：数字滚动仍写在原文字上，仪表跟着走。
   状态色走 [data-cc-state=warn|good]（dash-fix 按 80% 目标判定），不碰 Vue 的 class。
   注意：不要给 <svg>/path 加 CSS filter，Chromium 会按矩形 bbox 做滤镜。 */

#app .kpi-rate {
  --kpi-accent: var(--cc-gold);
  --rate-num: #f3d58a;
  --rate-cap: #ffe8b0;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0 16px;              /* 原样式的 gap:12px 会连带 row-gap，这里显式归零 */
  align-items: center;
  padding: 12px 20px 12px 18px;
  border-radius: 8px;
  background: #161e2d;
  border: 1px solid var(--cc-line);
  box-shadow: none;
  flex: 1;
  min-width: 200px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1),
              border-color .2s ease,
              background-color .2s ease,
              box-shadow .2s ease;
}

#app .kpi-rate[data-cc-state="good"] {
  --kpi-accent: var(--cc-green);
  --rate-num: #8ae9b9;
  --rate-cap: #d8ffea;
}

#app .kpi-rate::before { display: none; }

#app .kpi-rate:hover {
  transform: translateY(-2px);
  background: #192335;
  border-color: rgba(210, 224, 255, .3);
  border-color: color-mix(in srgb, var(--kpi-accent) 55%, transparent);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--kpi-accent) 75%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}

#app .kpi-rate:active {
  transform: translateY(0) scale(.995);
  transition-duration: .08s;
}

/* 表盘容器：原来是裁成圆的 68px 小环，现在放大并允许刻度露在弧外 */
#app .kpi-rate__ring {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none;
  filter: none !important;
}

/* Vue 原来的圆环和环心文字：隐藏但保留 */
#app .kpi-rate__ring > svg:not(.cc-gauge) { display: none !important; }
#app .kpi-rate__text { display: none !important; }

#app .kpi-rate__ring svg.cc-gauge {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: none;
  background: none !important;
  filter: none !important;
}

#app .cc-gauge__track {
  fill: none;
  stroke: rgba(255, 255, 255, .075);
  stroke-width: 6.5;
  stroke-linecap: round;
}

#app .cc-gauge__tick {
  stroke: rgba(180, 196, 220, .28);
  stroke-width: 1.2;
  stroke-linecap: round;
}

#app .cc-gauge__tick.is-major {
  stroke: rgba(180, 196, 220, .5);
  stroke-width: 1.6;
}

/* 80% 目标标：一枚指向弧线的小三角 */
#app .cc-gauge__goal {
  fill: rgba(232, 238, 248, .85);
}

/* 渐变描边由 dash-fix 按状态写在 stroke 属性上（url(#ccGaugeWarn|Good)），
   外链 CSS 里的 url(#id) 在 SPA 路由下解析不稳，不在这里写 */
#app .cc-gauge__fill {
  fill: none;
  stroke-width: 6.5;
  stroke-linecap: round;
}

#app .cc-gauge__halo {
  fill: var(--rate-cap);
  opacity: .22;
}

#app .cc-gauge__cap {
  fill: var(--rate-cap);
  stroke: rgba(14, 20, 31, .9);
  stroke-width: 1.4;
}

/* 环心：在位 / 总数 */
#app .cc-gauge__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text-dim);
  white-space: nowrap;
  pointer-events: none;
}

/* 右侧三行：标签 / 大百分数 / 状态行 */
#app .kpi-rate__label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cc-text-dim);
  letter-spacing: 2px;
  white-space: nowrap;
  transition: color .2s ease;
}

#app .kpi-rate:hover .kpi-rate__label { color: var(--cc-text); }

#app .cc-rate__num {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 3px;
  font-size: 30px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--rate-num);
  transform-origin: left center;
  white-space: nowrap;
  transition: color .3s ease, text-shadow .2s ease;
}

#app .kpi-rate:hover .cc-rate__num {
  text-shadow: 0 0 22px color-mix(in srgb, var(--kpi-accent) 55%, transparent);
}

#app .cc-rate__num.is-bump { animation: cc-kpi-bump .6s cubic-bezier(.2, .8, .3, 1); }

#app .cc-rate__sub {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--cc-text-mute);
  white-space: nowrap;
}

#app .cc-rate__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kpi-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpi-accent) 22%, transparent);
  flex-shrink: 0;
}

#app .cc-rate__state { color: var(--kpi-accent); font-weight: 600; }
#app .cc-rate__sep { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  #app .cc-rate__num.is-bump { animation: none; }
}

/* ==========================================================================
   面板
   ========================================================================== */

#app .db-content { gap: 18px; grid-template-columns: 360px 1fr; }

#app .db-panel {
  border-radius: 8px;
  background: #141c2a;
  border: 1px solid var(--cc-line);
  box-shadow: none;
  backdrop-filter: none;
}

#app .db-panel__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--cc-line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}

#app .db-panel__head h3 {
  font-size: 14px;
  color: var(--cc-text);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 9px;
}

#app .db-panel__head h3::before { display: none; }

#app .db-badge {
  background: rgba(255, 255, 255, .04);
  color: var(--cc-text-dim);
  border: 1px solid var(--cc-line);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: .5px;
}

#app .db-panel__body { padding: 14px 18px; }

/* ==========================================================================
   人员动态
   ========================================================================== */

#app .pn-section__title {
  color: var(--cc-text-dim);
  letter-spacing: 1.4px;
  font-size: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cc-line-soft);
}

#app .pn-dot { box-shadow: 0 0 9px currentColor; }
#app .pn-dot.green { background: var(--cc-green); color: var(--cc-green); }
#app .pn-dot.orange { background: var(--cc-orange); color: var(--cc-orange); }

#app .pn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#app .pn-row__bar {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

#app .pn-row:hover {
  background: rgba(255, 255, 255, .04);
  border-color: var(--cc-line);
  transform: none;
}

#app .pn-row__name {
  color: var(--cc-text-dim);
  font-size: 13px;
  letter-spacing: .5px;
  min-width: 56px;
}

#app .pn-row__count {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}

#app .pn-row__track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 3px;
  overflow: hidden;
}

#app .pn-row__fill {
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 10px -1px currentColor;
}

/* ==========================================================================
   车辆概要 · 姓名牌排班板
   ========================================================================== */

#app .db-panel--vehicles .vt,
#app .db-panel--vehicles .empty-state {
  display: none !important;
}

#app .db-panel--vehicles .db-panel__body {
  background: transparent;
}

#app .vb {
  width: 100%;
  min-height: 220px;
  padding: 4px 0 0;
  background: transparent;
  border-radius: 0;
}

#app .vb-head,
#app .vb-row {
  display: grid;
  grid-template-columns: 102px repeat(10, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

#app .vb-head {
  padding: 0 2px 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--cc-line-soft);
}

#app .vb-h {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #d5deee;
  text-align: center;
  font-weight: 700;
}

#app .vb-h.is-cmd { color: #ff8b96; }
#app .vb-h.is-drv { color: #7eecb0; }
#app .vb-h.is-tx { color: #9fe4e6; }
#app .vb-h.is-safe { color: #f6c453; }
#app .vb-h.is-lead { color: #ff9a4d; }

#app .vb-row {
  padding: 5px 2px;
  border-radius: 8px;
}

#app .vb-row:hover {
  background: rgba(255, 255, 255, .03);
}

#app .vb-car {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(165deg, #44506c 0%, #2c364f 52%, #1f273a 100%);
  border: 1px solid rgba(214, 196, 152, .32);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .16) inset,
    0 8px 18px -10px rgba(0, 0, 0, .72);
  overflow: hidden;
}

#app .vb-car::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: #d8c08a;
}

#app .vb-row.is-duty .vb-car::before {
  background: #3ee08c;
  box-shadow: 0 0 8px rgba(47, 217, 127, .5);
}

#app .vb-row.is-standby .vb-car::before {
  background: #f6c453;
  box-shadow: 0 0 8px rgba(246, 196, 83, .45);
}

#app .vb-car__name {
  color: #f4efe4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

#app .vb-car__meta {
  color: #c9b896;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

#app .vb-row.is-duty .vb-car__meta {
  color: #8ee0b4;
  background: none;
}

#app .vb-row.is-standby .vb-car__meta {
  color: #f0d28a;
  background: none;
}

#app .vb-plate {
  box-sizing: border-box;
  height: 100%;
  min-height: 40px;
  min-width: 0;
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 7px;
  text-align: center;
  background: linear-gradient(180deg, #f6f0e2 0%, #e4d8be 100%);
  color: #2b2416;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 2px 5px rgba(0, 0, 0, .35);
}

#app .vb-av {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, .08);
}

#app .vb-av--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: rgba(43, 36, 22, .12);
}

#app .vb-plate__name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

#app .vb-plate.tone-red {
  background: linear-gradient(180deg, #ff8a93 0%, #e83d4d 100%);
  color: #fff8f8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 0 0 1px rgba(255, 77, 94, .45),
    0 2px 6px rgba(0, 0, 0, .4);
}

#app .vb-plate.tone-red .vb-av--fallback {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

#app .vb-plate.tone-green {
  background: linear-gradient(180deg, #8ef0b6 0%, #2fd97f 100%);
  color: #083318;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 0 0 1px rgba(47, 217, 127, .4),
    0 2px 6px rgba(0, 0, 0, .35);
}

#app .vb-plate.tone-cyan {
  background: linear-gradient(180deg, #d5f6f6 0%, #8fd4d6 100%);
}

#app .vb-plate.tone-gold {
  background: linear-gradient(180deg, #ffe08a 0%, #f0b429 100%);
  color: #3a2a08;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 0 0 1px rgba(246, 196, 83, .45),
    0 2px 6px rgba(0, 0, 0, .35);
}

#app .vb-plate.tone-orange {
  background: linear-gradient(180deg, #ffb072 0%, #e86a1a 100%);
  color: #3a1608;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .35) inset,
    0 0 0 1px rgba(255, 138, 58, .45),
    0 2px 6px rgba(0, 0, 0, .4);
}

#app .vb-plate.is-empty {
  justify-content: center;
  background: rgba(8, 12, 22, .38);
  box-shadow: none;
  border-color: transparent;
  color: transparent;
}

/* ==========================================================================
   车辆概要表（旧表，被排班板替换后隐藏）
   ========================================================================== */

#app .vt th {
  color: var(--cc-text-mute);
  font-size: 11px;
  letter-spacing: 1.4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cc-line);
  background: rgba(255, 255, 255, .022);
}

#app .vt td {
  padding: 13px 12px;
  color: var(--cc-text-dim);
  border-bottom: 1px solid var(--cc-line-soft);
}

#app .vt tbody tr {
  transition: background .16s ease;
}

#app .vt tbody tr:hover {
  background: rgba(77, 159, 255, .07);
}

#app .vt-name {
  color: #fff;
  letter-spacing: .8px;
}

#app .vt-type { color: var(--cc-text-mute); }

#app .vt-num {
  color: var(--cc-text-dim);
  font-variant-numeric: tabular-nums;
}

#app .vt-total {
  color: #8cc2ff;
  font-weight: 800;
  font-size: 14px;
}

#app .vt-highlight { color: #8cc2ff; }
#app .vt-empty { color: var(--cc-text-mute); }

/* 状态胶囊：半透明底 + 描边 + 外发光，比纯色块更"贵" */
#app .vt-status {
  border-radius: 999px;
  padding: 3px 11px;
  letter-spacing: .8px;
  border: 1px solid transparent;
}

#app .vt-status.status-active {
  background: rgba(47, 217, 127, .14);
  border-color: rgba(47, 217, 127, .34);
  color: #5deba0;
  box-shadow: 0 0 12px -3px rgba(47, 217, 127, .55);
}

#app .vt-status.status-backup {
  background: rgba(255, 162, 58, .14);
  border-color: rgba(255, 162, 58, .34);
  color: #ffbe76;
}

#app .vt-status.status-maintenance {
  background: rgba(246, 196, 83, .14);
  border-color: rgba(246, 196, 83, .34);
  color: #f7d488;
}

#app .vt-status.status-default {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cc-line);
  color: var(--cc-text-mute);
}

/* ==========================================================================
   空状态
   ========================================================================== */

#app .db .empty-state,
#app .db .empty,
#app .db .no-data {
  color: var(--cc-text-mute);
}

/* ==========================================================================
   入场动效：让首屏"落位"而不是硬切
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* fill-mode 用 backwards：动画结束后不再钉住 transform，否则会压掉 hover 的抬起 */
  #app .kpi,
  #app .kpi-rate,
  #app .db-panel {
    animation: cc-rise .5s cubic-bezier(.2, .7, .3, 1) backwards;
  }

  #app .db-kpis > *:nth-child(1) { animation-delay: .02s; }
  #app .db-kpis > *:nth-child(2) { animation-delay: .06s; }
  #app .db-kpis > *:nth-child(3) { animation-delay: .10s; }
  #app .db-kpis > *:nth-child(4) { animation-delay: .14s; }
  #app .db-kpis > *:nth-child(5) { animation-delay: .18s; }
  #app .db-content > *:nth-child(1) { animation-delay: .20s; }
  #app .db-content > *:nth-child(2) { animation-delay: .24s; }
}

@keyframes cc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   首页弹窗（人员详情 / 跟车动态情况）
   --------------------------------------------------------------------------
   el-dialog 会被 teleport 到 body，不在 #app .db 之下，所以这一节不能写 #app。
   两个弹窗都带 class="dlg-personnel"，就用它做作用域，其它页面的弹窗不受影响。
   dist 里的 scoped 规则形如 .dlg-name[data-v-xxx]，特异度 (0,2,0)，且该 CSS 块
   随路由懒加载、排在本文件之后，同特异度会赢，所以这里统一用
   .el-overlay .el-dialog.dlg-personnel 前缀把特异度抬到 (0,3,0)。
   dash-fix 自绘的 #dash-fix-dialog 也套同一套 class，共用这份样式。
   ========================================================================== */

/* 遮罩：压暗 + 轻微模糊，让弹窗从页面里"浮"出来 */
.el-overlay:has(> .el-overlay-dialog > .dlg-personnel),
#dash-fix-dialog.el-overlay {
  background: rgba(6, 10, 18, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.el-overlay .el-dialog.dlg-personnel {
  --el-dialog-bg-color: #121a29;
  --el-dialog-padding-primary: 0px;
  padding: 0;
  background: linear-gradient(180deg, #16202f 0%, #111827 100%);
  border: 1px solid rgba(180, 196, 220, .16);
  border-radius: 12px;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
  color: var(--cc-text-dim);
}

/* ---------- 头部 ---------- */
.el-overlay .el-dialog.dlg-personnel .el-dialog__header {
  position: relative;
  margin: 0;
  padding: 18px 60px 14px 24px;
  border-bottom: 1px solid rgba(180, 196, 220, .1);
  cursor: default;
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__title,
.el-overlay .el-dialog.dlg-personnel .dlg-header-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .6px;
  color: var(--cc-text);
}

.el-overlay .el-dialog.dlg-personnel .dlg-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
}

.el-overlay .el-dialog.dlg-personnel .dlg-header-datetime {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .6px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text-mute);
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__headerbtn {
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--cc-text-mute);
  transition: background-color .15s ease, color .15s ease;
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__headerbtn .el-dialog__close {
  color: inherit;
  font-size: 16px;
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__headerbtn:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--cc-text);
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__headerbtn:hover .el-dialog__close { color: inherit; }

/* ---------- 主体 ---------- */
.el-overlay .el-dialog.dlg-personnel .el-dialog__body {
  padding: 10px 14px 12px 20px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  color: var(--cc-text-dim);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__body::-webkit-scrollbar { width: 8px; }
.el-overlay .el-dialog.dlg-personnel .el-dialog__body::-webkit-scrollbar-track { background: transparent; }
.el-overlay .el-dialog.dlg-personnel .el-dialog__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px;
}
.el-overlay .el-dialog.dlg-personnel .el-dialog__body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }

.el-overlay .el-dialog.dlg-personnel .dlg-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--cc-text-mute);
}

/* 人员列表 */
.el-overlay .el-dialog.dlg-personnel .dlg-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.el-overlay .el-dialog.dlg-personnel .dlg-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}

.el-overlay .el-dialog.dlg-personnel .dlg-item:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(180, 196, 220, .1);
}

.el-overlay .el-dialog.dlg-personnel .dlg-idx {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text-mute);
}

.el-overlay .el-dialog.dlg-personnel .dlg-avatar,
.el-overlay .el-dialog.dlg-personnel .el-avatar,
#dash-fix-dialog .dash-fix-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px !important;
  border: 1px solid rgba(180, 196, 220, .22);
  background: #1c2637;
  color: var(--cc-text-dim);
  font-weight: 600;
  object-fit: cover;
  overflow: hidden;
}

.el-overlay .el-dialog.dlg-personnel .el-avatar img { border-radius: 5px !important; }

.el-overlay .el-dialog.dlg-personnel .dlg-info { flex: 1; min-width: 0; }

.el-overlay .el-dialog.dlg-personnel .dlg-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.el-overlay .el-dialog.dlg-personnel .dlg-name {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .3px;
  color: var(--cc-text);
}

.el-overlay .el-dialog.dlg-personnel .dlg-meta {
  font-size: 12px;
  color: var(--cc-text-mute);
}

.el-overlay .el-dialog.dlg-personnel .dlg-sep { margin: 0 5px; opacity: .6; }

.el-overlay .el-dialog.dlg-personnel .dlg-phone {
  font-size: 13px;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text-dim);
  white-space: nowrap;
}

/* 分组分隔行（按车 / 按假期阶段） */
.el-overlay .el-dialog.dlg-personnel .dlg-group-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 6px;
  margin-top: 8px;
}

.el-overlay .el-dialog.dlg-personnel .dlg-group-divider.dlg-group-first { margin-top: 0; padding-top: 4px; }

/* 分组点和分组名也挂着 .phase-* class，原样式会给它们套上浅色底和描边，
   在深色底上就成了一块亮斑，这里清掉。 */
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
  animation: none;
}

.el-overlay .el-dialog.dlg-personnel .dlg-group-label {
  padding: 0;
  border: 0;
  background: transparent !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: none;
}

.el-overlay .el-dialog.dlg-personnel .dlg-group-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(180, 196, 220, .2), transparent);
}

.el-overlay .el-dialog.dlg-personnel .dlg-group-count {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cc-text-mute);
  flex-shrink: 0;
}

/* 状态 / 阶段 / 车辆 标签：半透明底 + 同色描边，和首页车牌板一个语气 */
.el-overlay .el-dialog.dlg-personnel .dlg-status,
.el-overlay .el-dialog.dlg-personnel .dlg-phase-tag,
.el-overlay .el-dialog.dlg-personnel .dlg-vehicle,
.el-overlay .el-dialog.dlg-personnel .vt-status {
  --tag: 160, 172, 192;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .5px;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(var(--tag), .14);
  color: rgb(var(--tag));
  border: 1px solid rgba(var(--tag), .32);
}

.el-overlay .el-dialog.dlg-personnel .dlg-vehicle { padding: 1px 7px; font-size: 10.5px; }

.el-overlay .el-dialog.dlg-personnel .status-green,
.el-overlay .el-dialog.dlg-personnel .status-active,
.el-overlay .el-dialog.dlg-personnel .phase-on-leave,
.el-overlay .el-dialog.dlg-personnel .vehicle-color-3 { --tag: 96, 222, 158; }

.el-overlay .el-dialog.dlg-personnel .status-blue,
.el-overlay .el-dialog.dlg-personnel .phase-preparing,
.el-overlay .el-dialog.dlg-personnel .vehicle-color-2 { --tag: 122, 176, 245; }

.el-overlay .el-dialog.dlg-personnel .status-orange,
.el-overlay .el-dialog.dlg-personnel .status-backup,
.el-overlay .el-dialog.dlg-personnel .status-maintenance,
.el-overlay .el-dialog.dlg-personnel .phase-today-leave,
.el-overlay .el-dialog.dlg-personnel .phase-tomorrow-return,
.el-overlay .el-dialog.dlg-personnel .vehicle-color-5 { --tag: 240, 176, 90; }

.el-overlay .el-dialog.dlg-personnel .status-red,
.el-overlay .el-dialog.dlg-personnel .phase-today-return,
.el-overlay .el-dialog.dlg-personnel .phase-overdue,
.el-overlay .el-dialog.dlg-personnel .vehicle-color-1 { --tag: 245, 120, 130; }

.el-overlay .el-dialog.dlg-personnel .status-purple,
.el-overlay .el-dialog.dlg-personnel .vehicle-color-4 { --tag: 186, 160, 255; }

.el-overlay .el-dialog.dlg-personnel .status-pink { --tag: 245, 140, 190; }
.el-overlay .el-dialog.dlg-personnel .status-indigo { --tag: 150, 160, 255; }

.el-overlay .el-dialog.dlg-personnel .status-teal,
.el-overlay .el-dialog.dlg-personnel .vehicle-color-6 { --tag: 80, 220, 205; }

.el-overlay .el-dialog.dlg-personnel .status-default { --tag: 150, 162, 184; }

/* 分组点/分组名的阶段色（无内联色时生效），跟标签同一套调色 */
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot.phase-overdue,
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot.phase-today-return { background: rgb(245, 120, 130); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot.phase-tomorrow-return,
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot.phase-today-leave { background: rgb(240, 176, 90); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot.phase-preparing { background: rgb(122, 176, 245); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-dot.phase-on-leave { background: rgb(96, 222, 158); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-label.phase-overdue,
.el-overlay .el-dialog.dlg-personnel .dlg-group-label.phase-today-return { color: rgb(245, 120, 130); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-label.phase-tomorrow-return,
.el-overlay .el-dialog.dlg-personnel .dlg-group-label.phase-today-leave { color: rgb(240, 176, 90); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-label.phase-preparing { color: rgb(122, 176, 245); }
.el-overlay .el-dialog.dlg-personnel .dlg-group-label.phase-on-leave { color: rgb(96, 222, 158); }

/* 阶段区（休假天数等） */
.el-overlay .el-dialog.dlg-personnel .dlg-phase-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  min-width: 84px;
}

.el-overlay .el-dialog.dlg-personnel .dlg-phase-time,
.el-overlay .el-dialog.dlg-personnel .dlg-days-row {
  font-size: 10.5px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  color: var(--cc-text-mute);
  white-space: nowrap;
}

.el-overlay .el-dialog.dlg-personnel .dlg-days-row { display: flex; align-items: center; gap: 5px; }
.el-overlay .el-dialog.dlg-personnel .dlg-days-item b { font-weight: 700; margin: 0 1px; color: var(--cc-text-dim); }
.el-overlay .el-dialog.dlg-personnel .dlg-days-sep { color: rgba(180, 196, 220, .25); font-size: 9px; }
.el-overlay .el-dialog.dlg-personnel .dlg-days-used b { color: #f0b05a; }
.el-overlay .el-dialog.dlg-personnel .dlg-days-remain b { color: #60de9e; }

/* 车辆表 */
.el-overlay .el-dialog.dlg-personnel .vt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.el-overlay .el-dialog.dlg-personnel .vt th {
  padding: 8px 12px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--cc-text-mute);
  border-bottom: 1px solid rgba(180, 196, 220, .14);
  white-space: nowrap;
}

.el-overlay .el-dialog.dlg-personnel .vt td {
  padding: 12px;
  color: var(--cc-text-dim);
  border-bottom: 1px solid rgba(180, 196, 220, .06);
  transition: background-color .15s ease;
}

.el-overlay .el-dialog.dlg-personnel .vt tbody tr:last-child td { border-bottom-color: transparent; }
.el-overlay .el-dialog.dlg-personnel .vt tbody tr:hover td { background: rgba(255, 255, 255, .035); }
.el-overlay .el-dialog.dlg-personnel .vt tbody tr td:first-child { border-radius: 6px 0 0 6px; }
.el-overlay .el-dialog.dlg-personnel .vt tbody tr td:last-child { border-radius: 0 6px 6px 0; }

.el-overlay .el-dialog.dlg-personnel .vt-name {
  font-weight: 650;
  letter-spacing: .3px;
  color: var(--cc-text);
  white-space: nowrap;
}

.el-overlay .el-dialog.dlg-personnel .vt-type { font-size: 12px; color: var(--cc-text-mute); }

.el-overlay .el-dialog.dlg-personnel .vt-num {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

.el-overlay .el-dialog.dlg-personnel .vt-total { font-weight: 800; color: #8fc0ff; }
.el-overlay .el-dialog.dlg-personnel .vt-highlight { font-weight: 600; color: #a7c8f5; }
.el-overlay .el-dialog.dlg-personnel .vt-empty { color: rgba(125, 139, 163, .6); font-style: normal; letter-spacing: 1px; }

/* ---------- 底部 ---------- */
.el-overlay .el-dialog.dlg-personnel .el-dialog__footer {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(180, 196, 220, .1);
  text-align: right;
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__footer .el-button,
.el-overlay .el-dialog.dlg-personnel .el-dialog__footer .el-button--default {
  height: 34px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--cc-text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(180, 196, 220, .22);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__footer .el-button:hover {
  color: var(--cc-text);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(212, 180, 106, .55);
}

.el-overlay .el-dialog.dlg-personnel .el-dialog__footer .el-button:active {
  background: rgba(255, 255, 255, .05);
}

/* ==========================================================================
   车辆调整页 · 顶部「车辆选择」卡片
   --------------------------------------------------------------------------
   这页是浅色的，不套指挥台的深色，只把这一排卡做精：
   状态色作为卡的 accent（右上角一抹淡淡的同色晕 + 底部 10 格座位条），
   选中态是蓝色光环 + 右上角对勾，悬停抬起，进场错位淡入。
   座位条的 --crew 由 dash-fix 从 .v-card__crew 的数字写入（共 10 个跟车位）。
   ========================================================================== */

#app .vehicle-selection-bar {
  border-color: #e3e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .18);
}

#app .vehicle-selection-bar .title-text { letter-spacing: .5px; }

#app .vehicle-strip {
  gap: 12px;
  padding: 9px 8px 10px 2px;
}

/* 把 --crew 注册成数字类型后它就能过渡，座位条随人数增减平滑推进 */
@property --crew {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

#app .v-card {
  --acc: #64748b;
  --acc-rgb: 100, 116, 139;
  position: relative;
  flex: 0 0 172px;
  border: 1px solid #e4e9f1;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -10px rgba(16, 24, 40, .12);
  overflow: visible;
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s ease,
              border-color .22s ease,
              background-color .22s ease,
              --crew .6s cubic-bezier(.2, .7, .3, 1);
}

/* 右上角一抹状态色的晕 */
#app .v-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130px 70px at 100% 0%, rgba(var(--acc-rgb), .13), transparent 72%);
  pointer-events: none;
  transition: opacity .22s ease;
}

#app .v-card:hover {
  transform: translateY(-3px);
  border-color: #bfd4f5;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 28px -14px rgba(59, 130, 246, .35);
}

#app .v-card:active {
  transform: translateY(-1px) scale(.985);
  transition-duration: .08s;
}

#app .v-card--selected,
#app .v-card--selected:hover {
  border-color: #3b82f6;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  box-shadow: 0 14px 28px -14px rgba(59, 130, 246, .45);
}

/* 光环呼吸放在 ::before 上，不占用卡片自身的 animation（那是进场用的，
   切换选中时被覆盖再切回会把淡入重放一遍） */
#app .v-card--selected::before {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
  animation: vc-ring 2.6s ease-in-out infinite;
}

/* 选中角标 */
#app .v-card--selected::after {
  content: "✓";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .45), 0 0 0 2px #fff;
  animation: vc-pop .32s cubic-bezier(.2, .9, .3, 1.3) both;
}

#app .v-card--fault { border-color: #fecaca; }
#app .v-card--fault:hover { border-color: #f87171; box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 28px -14px rgba(239, 68, 68, .35); }

/* 状态 → accent */
#app .v-card:has(.status-on-duty)                       { --acc: #3b82f6; --acc-rgb: 59, 130, 246; }
#app .v-card:has(.status-standby)                       { --acc: #22c55e; --acc-rgb: 34, 197, 94; }
#app .v-card:has(.status-maintenance),
#app .v-card:has(.status-refueling),
#app .v-card:has(.status-stationed),
#app .v-card:has(.status-logistics)                     { --acc: #f59e0b; --acc-rgb: 245, 158, 11; }
#app .v-card:has(.status-fault),
#app .v-card:has(.status-repair)                        { --acc: #ef4444; --acc-rgb: 239, 68, 68; }
#app .v-card:has(.status-training),
#app .v-card:has(.status-exercise),
#app .v-card:has(.status-research),
#app .v-card:has(.status-cross-training)                { --acc: #8b5cf6; --acc-rgb: 139, 92, 246; }
#app .v-card:has(.status-returning)                     { --acc: #06b6d4; --acc-rgb: 6, 182, 212; }
#app .v-card:has(.status-linked)                        { --acc: #14b8a6; --acc-rgb: 20, 184, 166; }
#app .v-card:has(.status-official)                      { --acc: #0ea5e9; --acc-rgb: 14, 165, 233; }
#app .v-card:has(.status-off-duty)                      { --acc: #94a3b8; --acc-rgb: 148, 163, 184; }

#app .v-card__body { position: relative; padding: 12px 12px 4px; }

#app .v-card__row1 { margin-bottom: 5px; }

#app .v-card__name {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .2px;
  color: #0f172a;
  transition: color .2s ease;
}

#app .v-card--selected .v-card__name { color: #1d4ed8; }

/* 状态胶囊：前面加一颗同色小点，覆盖原来那套渐变+描边 */
#app .v-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  background: rgba(var(--acc-rgb), .12);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), .28);
  box-shadow: none;
}

#app .v-card__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .2);
}

#app .v-card:has(.status-on-duty) .v-card__status::before { animation: vc-blink 1.8s ease-in-out infinite; }

#app .v-card__row2 { gap: 6px; font-size: 11px; color: #64748b; }
#app .v-card__row2 .v-card__plate { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
#app .v-card__row2 .v-card__type {
  padding: 0 5px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

/* 底部：人数 + 10 格座位条 + 悬停才出现的编辑/删除 */
#app .v-card__footer {
  position: relative;
  padding: 6px 12px 16px;
}

#app .v-card__footer::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acc) calc(var(--crew, 0) * 10%), #e6eaf0 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent 0 10%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent 0 10%);
  transition: background .5s ease;
}

#app .v-card__crew {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
  transition: color .2s ease;
}

#app .v-card__crew small { font-size: 10px; font-weight: 600; color: #94a3b8; margin-left: 1px; }
#app .v-card__crew.is-bump { animation: cc-kpi-bump .5s cubic-bezier(.2, .8, .3, 1); }
#app .v-card--selected .v-card__crew { color: #1d4ed8; }

#app .v-card__actions { gap: 4px; opacity: 0; transform: translateY(2px); transition: opacity .18s ease, transform .18s ease; }
#app .v-card:hover .v-card__actions { opacity: 1; transform: none; }

#app .v-action {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

#app .v-action:hover { background: #eff6ff; border-color: #bfd4f5; color: #1d4ed8; }
#app .v-action--danger:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* 进场：错位淡入抬起 */
@media (prefers-reduced-motion: no-preference) {
  #app .vehicle-strip .v-card { animation: vc-in .42s cubic-bezier(.2, .7, .3, 1) backwards; }
  #app .vehicle-strip .v-card:nth-child(2) { animation-delay: .05s; }
  #app .vehicle-strip .v-card:nth-child(3) { animation-delay: .10s; }
  #app .vehicle-strip .v-card:nth-child(4) { animation-delay: .15s; }
  #app .vehicle-strip .v-card:nth-child(5) { animation-delay: .20s; }
  #app .vehicle-strip .v-card:nth-child(6) { animation-delay: .25s; }
  #app .vehicle-strip .v-card:nth-child(7) { animation-delay: .30s; }
  #app .vehicle-strip .v-card:nth-child(n+8) { animation-delay: .35s; }
}

@keyframes vc-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vc-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes vc-ring {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, .07); }
}

@keyframes vc-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  #app .v-card--selected::before { animation: none; }
  #app .v-card--selected::after { animation: none; }
  #app .v-card:has(.status-on-duty) .v-card__status::before { animation: none; }
}


/* ==========================================================================
   超管控制台（/super/dashboard）· 整页重做
   --------------------------------------------------------------------------
   原版是紫粉霓虹渐变 + emoji 图标。这里改成和队站首页同一套"飞行甲板"语言：
   深海军蓝底 + 极淡网格、细描边分层、等宽白数字、状态用同色半透明胶囊。
   emoji 全部隐掉，换成 CSS mask 的线性图标（跟随 currentColor），
   三张统计卡右侧放和首页同款的动态插画（/icons/*.webp）。
   动态：数字滚动（dash-fix）、进度条从 0 长出、卡片错位入场、悬停抬起、在线态呼吸。
   选择器统一 #app .super-dashboard 前缀，特异度 (1,2,0) 稳定压过 scoped 的 (0,2,0)。
   ========================================================================== */

#app .super-dashboard {
  --sa-red: #e85d6a; --sa-blue: #5b9be8; --sa-green: #3ecf86; --sa-gold: #d4b46a; --sa-orange: #e09a45; --sa-cyan: #4cc2d8;
  --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 9h1M9 12.5h1M9 16h1'/%3E%3Cpath d='M14 9h1M14 12.5h1M14 16h1'/%3E%3Cpath d='M11 21v-3h2v3'/%3E%3C/svg%3E");
  --i-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E");
  --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-8'/%3E%3Cpath d='M10 20V5'/%3E%3Cpath d='M16 20v-5'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E");
  --i-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5z'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.6-1.7'/%3E%3Cpath d='M12 15v2'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
  --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20H2.5z'/%3E%3Cpath d='M12 9.5v5'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
  --i-filetext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
  --i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-3.6'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 3.6'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3Cpath d='M20 20v-4.5h-4.5'/%3E%3C/svg%3E");
  --i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 8v6l-4-2v-4z'/%3E%3C/svg%3E");
  --i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3'/%3E%3Cpath d='M4 12h3M11 12h9'/%3E%3Cpath d='M4 18h11M19 18h1'/%3E%3Cpath d='M13 4v4M7 10v4M15 16v4'/%3E%3C/svg%3E");
  --i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  color: var(--cc-text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background-color: var(--cc-bg-0);
  background-image:
    linear-gradient(rgba(180, 196, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 196, 220, .035) 1px, transparent 1px),
    radial-gradient(900px 380px at 50% -12%, rgba(196, 42, 60, .07), transparent 58%),
    linear-gradient(180deg, var(--cc-bg-1) 0%, var(--cc-bg-0) 100%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-attachment: fixed;
}

#app .super-dashboard::before { display: none; }

/* 通用：把 emoji 变成 mask 图标 */
#app .super-dashboard .sa-ico,
#app .super-dashboard .title-icon,
#app .super-dashboard .station-icon,
#app .super-dashboard .action-icon,
#app .super-dashboard .check-icon,
#app .super-dashboard .empty-icon,
#app .super-dashboard .refresh-btn > span:first-child,
#app .super-dashboard .filter-btn > span:first-child,
#app .super-dashboard .clear-btn > span:first-child {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 0 !important;
  line-height: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  flex-shrink: 0;
  opacity: 1;
}

/* ---------- 头部 ---------- */
#app .super-dashboard .dashboard-header {
  padding: 14px 28px;
  background: rgba(17, 24, 39, .92);
  border-bottom: 1px solid var(--cc-line);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

#app .super-dashboard .main-title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 3px;
  color: var(--cc-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#app .super-dashboard .sub-title {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--cc-text-mute);
}

#app .super-dashboard .date-text {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--cc-text-mute);
  margin-bottom: 2px;
}

#app .super-dashboard .time-text {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#app .super-dashboard .system-status {
  gap: 8px;
  padding: 5px 12px;
  border-radius: 4px;
  background: rgba(62, 207, 134, .08);
  border: 1px solid rgba(62, 207, 134, .28);
}

#app .super-dashboard .system-status span {
  font-size: 12px;
  letter-spacing: 1.2px;
  color: #7ed9a8;
}

#app .super-dashboard .status-indicator {
  width: 7px;
  height: 7px;
  background: var(--sa-green);
  box-shadow: 0 0 0 0 rgba(62, 207, 134, .5);
  animation: sa-pulse 2.2s ease-out infinite;
}

@keyframes sa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62, 207, 134, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(62, 207, 134, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 134, 0); }
}

#app .super-dashboard .dashboard-content { padding: 20px 28px 24px; gap: 18px; }

/* ---------- 三张统计卡 ---------- */
#app .super-dashboard .stats-row { gap: 14px; }

#app .super-dashboard .stat-card {
  --acc: var(--sa-blue);
  position: relative;
  gap: 0;
  min-height: 104px;
  padding: 16px 112px 16px 20px;
  border-radius: 8px;
  background: #161e2d;
  border: 1px solid var(--cc-line);
  box-shadow: none;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#app .super-dashboard .stat-users    { --acc: var(--sa-red); }
#app .super-dashboard .stat-stations { --acc: var(--sa-blue); }
#app .super-dashboard .stat-online   { --acc: var(--sa-green); }

#app .super-dashboard .stat-card::before,
#app .super-dashboard .stat-decoration { display: none; }

#app .super-dashboard .stat-card:hover {
  transform: translateY(-2px);
  background: #192335;
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--acc) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* 图标位：emoji 隐掉，换成首页同款动态插画 */
#app .super-dashboard .stat-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

#app .super-dashboard .stat-icon span { display: none; }
#app .super-dashboard .stat-card:hover .stat-icon { transform: translateY(-2px) scale(1.08); }
#app .super-dashboard .stat-users .stat-icon    { background-image: url("/icons/kpi-people.webp"); }
#app .super-dashboard .stat-stations .stat-icon { background-image: url("/icons/kpi-station.webp"); }
#app .super-dashboard .stat-online .stat-icon   { background-image: url("/icons/kpi-online.webp"); }

#app .super-dashboard .stat-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 9px;
  font-size: 42px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: color-mix(in srgb, var(--acc) 72%, #fff);
  transform-origin: left center;
  transition: color .2s ease, text-shadow .2s ease;
}

#app .super-dashboard .stat-value::after {
  content: "人";
  font: 500 13px/1 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 1px;
  color: var(--cc-text-mute);
}

#app .super-dashboard .stat-stations .stat-value::after { content: "个"; }
#app .super-dashboard .stat-card:hover .stat-value { text-shadow: 0 0 22px color-mix(in srgb, var(--acc) 55%, transparent); }
#app .super-dashboard .stat-value.is-bump { animation: cc-kpi-bump .6s cubic-bezier(.2, .8, .3, 1); }

#app .super-dashboard .stat-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cc-text-dim);
}

/* 在线用户：标签前加一颗呼吸的绿点 */
#app .super-dashboard .stat-online .stat-label { display: flex; align-items: center; gap: 8px; }
#app .super-dashboard .stat-online .stat-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-green);
  animation: sa-pulse 2.2s ease-out infinite;
}

/* ---------- 版面 ----------
   原版 .main-grid 是「队站面板 | 右栏」两列，队站面板被拉到和右栏一样高，站少时下面一大片空；
   登录记录另起一行占满整宽。这里让 .main-grid display:contents，把它的两个孩子和登录记录
   一起放进 .dashboard-content 的网格：左列 = 队站统计 + 登录记录，右列 = IP 解锁 + 系统管理。 */
#app .super-dashboard .dashboard-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas:
    "stats    stats"
    "stations right"
    "logs     right";
  align-items: start;
  gap: 18px;
}

#app .super-dashboard .stats-row     { grid-area: stats; }
#app .super-dashboard .main-grid     { display: contents; }
#app .super-dashboard .station-panel { grid-area: stations; }
#app .super-dashboard .right-panels  { grid-area: right; gap: 18px; }
#app .super-dashboard .logs-panel    { grid-area: logs; }

@media (max-width: 1100px) {
  #app .super-dashboard .dashboard-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stats" "stations" "right" "logs";
  }
}

#app .super-dashboard .panel {
  border-radius: 8px;
  background: #141c2a;
  border: 1px solid var(--cc-line);
  box-shadow: none;
}

#app .super-dashboard .panel-header {
  padding: 13px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  border-bottom: 1px solid var(--cc-line-soft);
}

#app .super-dashboard .panel-title {
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--cc-text);
}

#app .super-dashboard .title-icon { color: var(--cc-text-mute); }
#app .super-dashboard .station-panel .title-icon { --i: var(--i-activity); color: var(--sa-red); }
#app .super-dashboard .ip-panel .title-icon      { --i: var(--i-unlock);   color: var(--sa-gold); }
#app .super-dashboard .actions-panel .title-icon { --i: var(--i-sliders);  color: var(--sa-blue); }
#app .super-dashboard .logs-panel .title-icon    { --i: var(--i-list);     color: var(--sa-cyan); }

#app .super-dashboard .panel-body { padding: 16px 18px; }
#app .super-dashboard .station-panel { min-height: 0; }

/* 幽灵按钮：刷新 / 筛选 / 清除记录 */
#app .super-dashboard .refresh-btn,
#app .super-dashboard .filter-btn,
#app .super-dashboard .clear-btn {
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cc-line);
  color: var(--cc-text-dim);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

#app .super-dashboard .refresh-btn > span:first-child { --i: var(--i-refresh); width: 14px; height: 14px; }
#app .super-dashboard .filter-btn  > span:first-child { --i: var(--i-filter);  width: 14px; height: 14px; }
#app .super-dashboard .clear-btn   > span:first-child { --i: var(--i-trash);   width: 14px; height: 14px; }

#app .super-dashboard .refresh-btn:hover,
#app .super-dashboard .filter-btn:hover {
  color: var(--cc-text);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(91, 155, 232, .55);
}

#app .super-dashboard .refresh-btn:active > span:first-child { animation: sa-spin .5s ease; }
@keyframes sa-spin { to { transform: rotate(360deg); } }

#app .super-dashboard .clear-btn { color: #f0a0a8; }
#app .super-dashboard .clear-btn:hover { color: #ffc2c7; background: rgba(232, 93, 106, .1); border-color: rgba(232, 93, 106, .5); }

/* ---------- 队站卡 ---------- */
#app .super-dashboard .station-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; align-content: start; }

#app .super-dashboard .station-card {
  --acc: var(--sa-green);
  --acc-rgb: 62, 207, 134;
  position: relative;
  padding: 16px 18px 14px;
  border-radius: 8px;
  background: #161e2d;
  border: 1px solid var(--cc-line);
  box-shadow: none;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

#app .super-dashboard .station-card:has(.rate-medium) { --acc: var(--sa-gold); --acc-rgb: 212, 180, 106; }
#app .super-dashboard .station-card:has(.rate-low)    { --acc: var(--sa-red);  --acc-rgb: 232, 93, 106; }

#app .super-dashboard .station-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px 80px at 100% 0%, rgba(var(--acc-rgb), .10), transparent 70%);
  pointer-events: none;
}

#app .super-dashboard .station-card:hover {
  transform: translateY(-3px);
  background: #192335;
  border-color: rgba(var(--acc-rgb), .55);
  box-shadow: 0 14px 28px -16px rgba(var(--acc-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .05);
}

#app .super-dashboard .station-card:active { transform: translateY(-1px) scale(.99); transition-duration: .08s; }

#app .super-dashboard .station-top { margin-bottom: 12px; }

#app .super-dashboard .station-name {
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .5px;
  color: var(--cc-text);
}

#app .super-dashboard .station-icon { --i: var(--i-building); width: 16px; height: 16px; color: var(--cc-text-mute); }
#app .super-dashboard .station-card:hover .station-icon { color: var(--acc); }

#app .super-dashboard .rate-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  background: rgba(var(--acc-rgb), .12);
  color: rgb(var(--acc-rgb));
  border: 1px solid rgba(var(--acc-rgb), .35);
}

#app .super-dashboard .rate-badge.rate-high,
#app .super-dashboard .rate-badge.rate-medium,
#app .super-dashboard .rate-badge.rate-low {
  background: rgba(var(--acc-rgb), .12);
  color: color-mix(in srgb, rgb(var(--acc-rgb)) 75%, #fff);
  border-color: rgba(var(--acc-rgb), .35);
}

#app .super-dashboard .station-stats { gap: 28px; margin: 4px 0 14px; }
#app .super-dashboard .mini-stat { gap: 3px; }
#app .super-dashboard .mini-label { font-size: 11px; letter-spacing: 1.5px; color: var(--cc-text-mute); }

#app .super-dashboard .mini-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text);
  transform-origin: left center;
}

#app .super-dashboard .mini-value.on-duty  { color: #8ae9b9; }
#app .super-dashboard .mini-value.off-duty { color: #f0a0a8; }
#app .super-dashboard .mini-value.is-bump  { animation: cc-kpi-bump .6s cubic-bezier(.2, .8, .3, 1); }

/* 进度条：进场从 0 长到位 */
#app .super-dashboard .station-progress {
  height: 4px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

#app .super-dashboard .station-progress .progress-fill {
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), .7), rgb(var(--acc-rgb)));
  box-shadow: 0 0 10px rgba(var(--acc-rgb), .45);
  transform-origin: left center;
  animation: sa-grow .9s cubic-bezier(.2, .7, .3, 1) both;
  transition: width .6s cubic-bezier(.2, .7, .3, 1);
}

@keyframes sa-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#app .super-dashboard .enter-hint {
  gap: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--cc-text-mute);
}

#app .super-dashboard .station-card:hover .enter-hint { color: color-mix(in srgb, var(--acc) 80%, #fff); }

#app .super-dashboard .enter-hint .arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat;
          mask: var(--i-arrow) center / contain no-repeat;
}

#app .super-dashboard .empty-state { color: var(--cc-text-mute); letter-spacing: 1px; }
#app .super-dashboard .empty-icon { --i: var(--i-chart); width: 36px; height: 36px; color: var(--cc-text-mute); opacity: .6; }

/* ---------- IP 解锁 ---------- */
#app .super-dashboard .ip-input,
#app .super-dashboard .filter-input,
#app .super-dashboard .filter-select,
#app .super-dashboard .page-size-select {
  background: rgba(10, 15, 24, .7);
  border: 1px solid var(--cc-line);
  border-radius: 5px;
  color: var(--cc-text);
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#app .super-dashboard .ip-input { padding: 9px 12px; }
#app .super-dashboard .ip-input::placeholder,
#app .super-dashboard .filter-input::placeholder { color: var(--cc-text-mute); }

#app .super-dashboard .ip-input:focus,
#app .super-dashboard .filter-input:focus,
#app .super-dashboard .filter-select:focus {
  border-color: rgba(91, 155, 232, .7);
  box-shadow: 0 0 0 3px rgba(91, 155, 232, .15);
}

#app .super-dashboard .unlock-btn,
#app .super-dashboard .search-btn {
  padding: 9px 16px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0e141f;
  background: linear-gradient(180deg, #7fb2f2, #5b9be8);
  border: 1px solid rgba(91, 155, 232, .6);
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#app .super-dashboard .unlock-btn:hover:not(:disabled),
#app .super-dashboard .search-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 18px -10px rgba(91, 155, 232, .8);
}

#app .super-dashboard .locked-list { background: rgba(255, 255, 255, .025); border: 1px solid var(--cc-line-soft); border-radius: 6px; }
#app .super-dashboard .list-header { font-size: 12px; letter-spacing: 1px; color: var(--cc-text-dim); }
#app .super-dashboard .count-badge { border-radius: 4px; background: rgba(232, 93, 106, .14); color: #f0a0a8; border: 1px solid rgba(232, 93, 106, .35); }
#app .super-dashboard .locked-item { border-radius: 6px; background: rgba(232, 93, 106, .06); border: 1px solid rgba(232, 93, 106, .2); }
#app .super-dashboard .ip-address { font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; color: var(--cc-text); }
#app .super-dashboard .ip-time { color: #f0a0a8; }
#app .super-dashboard .mini-unlock-btn { border-radius: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--cc-line); color: var(--cc-text-dim); }
#app .super-dashboard .mini-unlock-btn:hover { color: var(--cc-text); border-color: rgba(91, 155, 232, .55); background: rgba(91, 155, 232, .1); }

#app .super-dashboard .no-locked { gap: 8px; padding: 18px; font-size: 12px; letter-spacing: 1px; color: var(--cc-text-mute); }
#app .super-dashboard .check-icon { --i: var(--i-check); width: 16px; height: 16px; color: var(--sa-green); }

/* ---------- 系统管理 ---------- */
#app .super-dashboard .action-grid { gap: 10px; }

#app .super-dashboard .action-btn {
  --acc: var(--sa-blue);
  --acc-rgb: 91, 155, 232;
  gap: 9px;
  padding: 14px 10px 12px;
  border-radius: 8px;
  background: #161e2d;
  border: 1px solid var(--cc-line);
  color: var(--cc-text-dim);
  font-size: 12px;
  letter-spacing: 1px;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

#app .super-dashboard .action-btn.warning { --acc: var(--sa-gold);   --acc-rgb: 212, 180, 106; }
#app .super-dashboard .action-btn.info    { --acc: var(--sa-cyan);   --acc-rgb: 76, 194, 216; }
#app .super-dashboard .action-btn.success { --acc: var(--sa-green);  --acc-rgb: 62, 207, 134; }
#app .super-dashboard .action-btn.danger  { --acc: var(--sa-red);    --acc-rgb: 232, 93, 106; }

#app .super-dashboard .action-btn:hover,
#app .super-dashboard .action-btn.warning:hover,
#app .super-dashboard .action-btn.info:hover,
#app .super-dashboard .action-btn.success:hover,
#app .super-dashboard .action-btn.danger:hover {
  transform: translateY(-2px);
  color: var(--cc-text);
  background: #192335;
  border-color: rgba(var(--acc-rgb), .55);
  box-shadow: 0 12px 24px -16px rgba(var(--acc-rgb), .8);
}

#app .super-dashboard .action-btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }

#app .super-dashboard .action-icon {
  width: 22px;
  height: 22px;
  color: var(--acc);
  transition: transform .18s ease;
}

#app .super-dashboard .action-btn:hover .action-icon { transform: translateY(-1px) scale(1.08); }
#app .super-dashboard .action-grid .action-btn:nth-child(1) .action-icon { --i: var(--i-chart); }
#app .super-dashboard .action-grid .action-btn:nth-child(2) .action-icon { --i: var(--i-unlock); }
#app .super-dashboard .action-grid .action-btn:nth-child(3) .action-icon { --i: var(--i-download); }
#app .super-dashboard .action-grid .action-btn:nth-child(4) .action-icon { --i: var(--i-trash); }
#app .super-dashboard .action-grid .action-btn:nth-child(5) .action-icon { --i: var(--i-alert); }
#app .super-dashboard .action-grid .action-btn:nth-child(6) .action-icon { --i: var(--i-filetext); }

/* ---------- 登录记录 ---------- */
#app .super-dashboard .logs-panel { max-height: none; }
#app .super-dashboard .filter-section { background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--cc-line-soft); }
#app .super-dashboard .filter-item label { font-size: 11px; letter-spacing: 1.5px; color: var(--cc-text-mute); }
#app .super-dashboard .reset-btn { border-radius: 5px; border: 1px solid var(--cc-line); color: var(--cc-text-dim); }
#app .super-dashboard .reset-btn:hover { color: var(--cc-text); border-color: rgba(180, 196, 220, .35); }

#app .super-dashboard .logs-table { border-collapse: separate; border-spacing: 0; }

#app .super-dashboard .logs-table th {
  padding: 9px 14px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cc-text-mute);
  background: transparent;
  border-bottom: 1px solid var(--cc-line);
}

#app .super-dashboard .logs-table td {
  padding: 11px 14px;
  color: var(--cc-text-dim);
  border-bottom: 1px solid var(--cc-line-soft);
  transition: background-color .15s ease;
}

#app .super-dashboard .logs-table tbody tr:hover td { background: rgba(255, 255, 255, .035); }
#app .super-dashboard .username { color: var(--cc-text); letter-spacing: .3px; }
#app .super-dashboard .ip,
#app .super-dashboard .time { font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; font-variant-numeric: tabular-nums; }
#app .super-dashboard .ip { color: var(--cc-text-dim); }
#app .super-dashboard .time { font-size: 12px; color: var(--cc-text-mute); }
#app .super-dashboard .device { color: var(--cc-text-mute); }
#app .super-dashboard .fail-reason { color: #f0a0a8; }

#app .super-dashboard .user-type-badge,
#app .super-dashboard .status-badge {
  --tag: 150, 162, 184;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .5px;
  background: rgba(var(--tag), .13);
  color: rgb(var(--tag));
  border: 1px solid rgba(var(--tag), .32);
}

#app .super-dashboard .user-type-badge.super   { --tag: 245, 120, 130; }
#app .super-dashboard .user-type-badge.admin   { --tag: 240, 190, 100; }
#app .super-dashboard .user-type-badge.station { --tag: 122, 176, 245; }
#app .super-dashboard .user-type-badge.user    { --tag: 96, 222, 158; }
#app .super-dashboard .status-badge.success    { --tag: 96, 222, 158; }
#app .super-dashboard .status-badge.failed     { --tag: 245, 120, 130; }

#app .super-dashboard .pagination { border-top: 1px solid var(--cc-line-soft); }
#app .super-dashboard .total { font-size: 12px; letter-spacing: .5px; color: var(--cc-text-mute); font-variant-numeric: tabular-nums; }
#app .super-dashboard .page-info { font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; color: var(--cc-text-dim); }

#app .super-dashboard .page-btn {
  border-radius: 5px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cc-line);
  color: var(--cc-text-dim);
}

#app .super-dashboard .page-btn:hover:not(:disabled) { color: var(--cc-text); background: rgba(255, 255, 255, .06); border-color: rgba(91, 155, 232, .55); }

#app .super-dashboard .dashboard-footer {
  padding: 12px 28px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cc-text-mute);
  background: transparent;
  border-top: 1px solid var(--cc-line-soft);
}

/* ---------- 入场 ---------- */
@media (prefers-reduced-motion: no-preference) {
  #app .super-dashboard .stat-card,
  #app .super-dashboard .panel { animation: cc-rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  #app .super-dashboard .stats-row > :nth-child(2) { animation-delay: .05s; }
  #app .super-dashboard .stats-row > :nth-child(3) { animation-delay: .10s; }
  #app .super-dashboard .station-panel { animation-delay: .16s; }
  #app .super-dashboard .ip-panel { animation-delay: .20s; }
  #app .super-dashboard .actions-panel { animation-delay: .24s; }
  #app .super-dashboard .logs-panel { animation-delay: .28s; }
  #app .super-dashboard .station-card { animation: cc-rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
  #app .super-dashboard .station-card:nth-child(2) { animation-delay: .06s; }
  #app .super-dashboard .station-card:nth-child(3) { animation-delay: .12s; }
  #app .super-dashboard .station-card:nth-child(4) { animation-delay: .18s; }
  #app .super-dashboard .station-card:nth-child(n+5) { animation-delay: .24s; }
}

@media (prefers-reduced-motion: reduce) {
  #app .super-dashboard .status-indicator,
  #app .super-dashboard .stat-online .stat-label::before,
  #app .super-dashboard .station-progress .progress-fill { animation: none; }
}

/* ---------- 超管控制台 · 队站管理员在线状态（dash-fix 注入） ---------- */
#app .super-dashboard .station-name { flex-wrap: wrap; row-gap: 6px; }

#app .super-dashboard .sa-presence {
  --p: 125, 139, 163;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.3;
  color: rgb(var(--p));
  background: rgba(var(--p), .10);
  border: 1px solid rgba(var(--p), .28);
  white-space: nowrap;
}

#app .super-dashboard .sa-presence::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--p));
  flex-shrink: 0;
}

#app .super-dashboard .sa-presence.is-online { --p: 62, 207, 134; }
#app .super-dashboard .sa-presence.is-online::before { animation: sa-pulse 2s ease-out infinite; }
#app .super-dashboard .sa-presence.is-recent { --p: 212, 180, 106; }
#app .super-dashboard .sa-presence.is-off,
#app .super-dashboard .sa-presence.is-unknown { --p: 125, 139, 163; }
#app .super-dashboard .sa-presence.is-off::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--p)); }

/* 在线用户卡下面的名单 */
#app .super-dashboard .stat-online { padding-bottom: 14px; }

#app .super-dashboard .sa-online-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  max-width: calc(100% - 8px);
}

#app .super-dashboard .sa-online-head {
  width: 100%;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--cc-text-mute);
  font-variant-numeric: tabular-nums;
}

#app .super-dashboard .sa-online-item,
#app .super-dashboard .sa-online-more,
#app .super-dashboard .sa-online-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--cc-text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--cc-line);
  white-space: nowrap;
}

#app .super-dashboard .sa-online-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-gold);
}

#app .super-dashboard .sa-online-item.is-online i { background: var(--sa-green); animation: sa-pulse 2s ease-out infinite; }
#app .super-dashboard .sa-online-item.is-online { color: var(--cc-text); border-color: rgba(62, 207, 134, .35); }
#app .super-dashboard .sa-online-empty { color: var(--cc-text-mute); border-style: dashed; }

/* 右下角上线 / 离线提示 */
#sa-toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.sa-toast {
  --p: 62, 207, 134;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(17, 24, 39, .96);
  border: 1px solid rgba(var(--p), .45);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  color: #e8eef8;
  font: 13px/1.3 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .3px;
  animation: sa-toast-in .28s cubic-bezier(.2, .8, .3, 1.2) both;
  transition: opacity .4s ease, transform .4s ease;
}

.sa-toast.is-off { --p: 125, 139, 163; }
.sa-toast.is-leaving { opacity: 0; transform: translateX(16px); }

.sa-toast__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--p));
  box-shadow: 0 0 0 3px rgba(var(--p), .22);
  flex-shrink: 0;
}

.sa-toast__time {
  margin-left: auto;
  font-size: 11px;
  color: #7d8ba3;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

@keyframes sa-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   队站管理（/super/stations）+ 三个弹窗（.tech-dialog）
   --------------------------------------------------------------------------
   页面本身沿用控制台的"飞行甲板"语言；emoji 换成 CSS mask 图标。
   三个弹窗原来只套上了一半样式（dist 里写的是 .tech-dialog .el-dialog，但 class 就挂在
   .el-dialog 自己身上，后代选择器匹配不到），结果白底弹窗配了深色输入框、浅色标题，
   标题几乎看不见。这里按 .el-overlay .el-dialog.tech-dialog 完整重写。
   ========================================================================== */

:root {
  --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 9h1M9 12.5h1M9 16h1'/%3E%3Cpath d='M14 9h1M14 12.5h1M14 16h1'/%3E%3Cpath d='M11 21v-3h2v3'/%3E%3C/svg%3E");
  --i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3'/%3E%3Cpath d='M13.5 6.5l3 3'/%3E%3C/svg%3E");
  --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3a6 6 0 1 0-5.4 8.6L3 18v3h3l1-1v-2h2l1-1v-2h2l1.4-1.4A6 6 0 1 0 15 3z'/%3E%3Cpath d='M16 8h.01'/%3E%3C/svg%3E");
  --i-trash2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v15H4z'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M8 3v5M16 3v5'/%3E%3C/svg%3E");
  --i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8h11v13H8z'/%3E%3Cpath d='M5 16H4V3h11v1'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.5 7.5-8 9-4.5-1.5-8-4.5-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
  --i-alert2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20H2.5z'/%3E%3Cpath d='M12 9.5v5'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
}

#app .stations-page {
  color: var(--cc-text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  padding: 20px 28px 28px;
  background-color: var(--cc-bg-0);
  background-image:
    linear-gradient(rgba(180, 196, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 196, 220, .035) 1px, transparent 1px),
    radial-gradient(900px 380px at 50% -12%, rgba(196, 42, 60, .07), transparent 58%),
    linear-gradient(180deg, var(--cc-bg-1) 0%, var(--cc-bg-0) 100%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-attachment: fixed;
}

#app .stations-page::before { display: none; }

/* mask 图标通用体 */
#app .stations-page .st-ico,
#app .stations-page .btn-icon,
#app .stations-page .info-icon,
#app .stations-page .share-icon,
#app .stations-page .station-avatar span,
#app .stations-page .empty-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 0 !important;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  flex-shrink: 0;
}

/* ---------- 页头 ---------- */
#app .stations-page .page-header {
  margin-bottom: 18px;
  padding: 14px 20px;
  border-radius: 8px;
  background: #141c2a;
  border: 1px solid var(--cc-line);
  box-shadow: none;
}

#app .stations-page .main-title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 3px;
  color: var(--cc-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#app .stations-page .sub-title { margin-top: 4px; font-size: 12px; letter-spacing: 1.5px; color: var(--cc-text-mute); }

#app .stations-page .add-btn,
#app .stations-page .empty-btn {
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0e141f;
  background: linear-gradient(180deg, #7fb2f2, #5b9be8);
  border: 1px solid rgba(91, 155, 232, .6);
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#app .stations-page .add-btn:hover,
#app .stations-page .empty-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px -12px rgba(91, 155, 232, .9);
}

#app .stations-page .add-btn:active { transform: translateY(0); }
#app .stations-page .btn-icon { --i: var(--i-plus); width: 14px; height: 14px; }

/* ---------- 卡片 ---------- */
#app .stations-page .stations-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

#app .stations-page .station-card {
  position: relative;
  border-radius: 8px;
  background: #141c2a;
  border: 1px solid var(--cc-line);
  box-shadow: none;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

#app .stations-page .station-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px 120px at 100% 0%, rgba(91, 155, 232, .10), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

#app .stations-page .station-card:hover {
  transform: translateY(-3px);
  background: #172130;
  border-color: rgba(91, 155, 232, .5);
  box-shadow: 0 16px 32px -18px rgba(91, 155, 232, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}

#app .stations-page .station-card:hover::after { opacity: 1; }

#app .stations-page .card-header { position: relative; z-index: 1; padding: 18px 18px 0; }

#app .stations-page .station-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: var(--sa-blue, #5b9be8);
  background: rgba(91, 155, 232, .1);
  border: 1px solid rgba(91, 155, 232, .3);
  box-shadow: none;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), background-color .2s ease;
}

#app .stations-page .station-avatar span { --i: var(--i-building); width: 24px; height: 24px; }
#app .stations-page .station-card:hover .station-avatar { transform: translateY(-2px) scale(1.04); background: rgba(91, 155, 232, .16); }

#app .stations-page .card-actions { gap: 6px; }

#app .stations-page .action-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 0;
  color: var(--cc-text-mute);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cc-line);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

#app .stations-page .action-btn::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}

#app .stations-page .card-actions .action-btn:nth-child(1) { --i: var(--i-pencil); }
#app .stations-page .card-actions .action-btn:nth-child(2) { --i: var(--i-key); }
#app .stations-page .card-actions .action-btn:nth-child(3) { --i: var(--i-trash2); }

#app .stations-page .action-btn:hover {
  transform: translateY(-1px);
  color: var(--cc-text);
  background: rgba(91, 155, 232, .12);
  border-color: rgba(91, 155, 232, .5);
}

#app .stations-page .card-actions .action-btn:nth-child(2):hover { color: #f3d58a; background: rgba(212, 180, 106, .12); border-color: rgba(212, 180, 106, .5); }
#app .stations-page .action-btn.danger:hover { color: #ffb3b9; background: rgba(232, 93, 106, .12); border-color: rgba(232, 93, 106, .5); }

#app .stations-page .card-body { position: relative; z-index: 1; padding: 14px 18px 16px; }

#app .stations-page .station-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .6px;
  color: var(--cc-text);
}

#app .stations-page .info-list { gap: 8px; }

#app .stations-page .info-row {
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--cc-line-soft);
}

#app .stations-page .info-icon { width: 14px; height: 14px; color: var(--cc-text-mute); }
#app .stations-page .info-list .info-row:nth-child(1) .info-icon { --i: var(--i-user); }
#app .stations-page .info-list .info-row:nth-child(2) .info-icon { --i: var(--i-calendar); }
#app .stations-page .info-label { min-width: 56px; font-size: 11px; letter-spacing: 1.5px; color: var(--cc-text-mute); }

#app .stations-page .info-value {
  font-size: 13px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  color: var(--cc-text);
}

/* 分享链接：从蓝色渐变块改成安静的描边区 */
#app .stations-page .share-section {
  position: relative;
  z-index: 1;
  margin: 0 18px 18px;
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(76, 194, 216, .05);
  border: 1px solid rgba(76, 194, 216, .22);
}

#app .stations-page .share-header { gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: #7fd4e4; }
#app .stations-page .share-icon { --i: var(--i-link); width: 14px; height: 14px; }
#app .stations-page .share-input-group { gap: 8px; margin-bottom: 8px; }

#app .stations-page .share-input {
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  letter-spacing: .2px;
  color: var(--cc-text-dim);
  background: rgba(10, 15, 24, .7);
  border: 1px solid var(--cc-line);
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  transition: border-color .15s ease;
}

#app .stations-page .share-input:focus { border-color: rgba(76, 194, 216, .6); }

#app .stations-page .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #9fe3ef;
  background: rgba(76, 194, 216, .1);
  border: 1px solid rgba(76, 194, 216, .38);
  box-shadow: none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

#app .stations-page .copy-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--i-copy) center / contain no-repeat;
          mask: var(--i-copy) center / contain no-repeat;
}

#app .stations-page .copy-btn:hover { transform: translateY(-1px); background: rgba(76, 194, 216, .18); border-color: rgba(76, 194, 216, .6); box-shadow: none; }
#app .stations-page .copy-btn:active { transform: translateY(0) scale(.97); }

#app .stations-page .share-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--cc-text-mute);
  opacity: 1;
}

#app .stations-page .share-tip::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--i-info) center / contain no-repeat;
          mask: var(--i-info) center / contain no-repeat;
}

#app .stations-page .empty-state { border-radius: 8px; background: #141c2a; border: 1px dashed var(--cc-line); }
#app .stations-page .empty-icon { --i: var(--i-building); width: 40px; height: 40px; color: var(--cc-text-mute); opacity: .6; }
#app .stations-page .empty-text { letter-spacing: 1px; color: var(--cc-text-mute); }

/* 入场 */
@media (prefers-reduced-motion: no-preference) {
  #app .stations-page .page-header { animation: cc-rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
  #app .stations-page .station-card { animation: cc-rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  #app .stations-page .station-card:nth-child(2) { animation-delay: .06s; }
  #app .stations-page .station-card:nth-child(3) { animation-delay: .12s; }
  #app .stations-page .station-card:nth-child(4) { animation-delay: .18s; }
  #app .stations-page .station-card:nth-child(n+5) { animation-delay: .24s; }
}

/* 队站管理页也显示管理员在线胶囊（dash-fix 注入，复用控制台那套样式的变量） */
#app .stations-page .sa-presence {
  --p: 125, 139, 163;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.3;
  color: rgb(var(--p));
  background: rgba(var(--p), .10);
  border: 1px solid rgba(var(--p), .28);
  white-space: nowrap;
}

#app .stations-page .sa-presence::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--p)); flex-shrink: 0; }
#app .stations-page .sa-presence.is-online { --p: 62, 207, 134; }
#app .stations-page .sa-presence.is-online::before { animation: sa-pulse 2s ease-out infinite; }
#app .stations-page .sa-presence.is-recent { --p: 212, 180, 106; }
#app .stations-page .sa-presence.is-off::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--p)); }

/* ---------- 三个弹窗 ---------- */
.el-overlay:has(> .el-overlay-dialog > .tech-dialog) {
  background: rgba(6, 10, 18, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.el-overlay .el-dialog.tech-dialog {
  --el-dialog-bg-color: #121a29;
  padding: 0;
  background: linear-gradient(180deg, #16202f 0%, #111827 100%);
  border: 1px solid rgba(180, 196, 220, .16);
  border-radius: 12px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
  color: var(--cc-text-dim);
}

.el-overlay .el-dialog.tech-dialog .el-dialog__header {
  margin: 0;
  padding: 18px 60px 14px 24px;
  background: none;
  border-bottom: 1px solid rgba(180, 196, 220, .1);
  cursor: default;
}

.el-overlay .el-dialog.tech-dialog .el-dialog__title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .6px;
  color: var(--cc-text);
}

.el-overlay .el-dialog.tech-dialog .el-dialog__headerbtn {
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--cc-text-mute);
  transition: background-color .15s ease, color .15s ease;
}

.el-overlay .el-dialog.tech-dialog .el-dialog__headerbtn .el-dialog__close { color: inherit; font-size: 16px; }
.el-overlay .el-dialog.tech-dialog .el-dialog__headerbtn:hover { background: rgba(255, 255, 255, .07); color: var(--cc-text); }
.el-overlay .el-dialog.tech-dialog .el-dialog__headerbtn:hover .el-dialog__close { color: inherit; }

.el-overlay .el-dialog.tech-dialog .el-dialog__body { padding: 22px 24px 8px; color: var(--cc-text-dim); }

.el-overlay .el-dialog.tech-dialog .el-form-item { margin-bottom: 18px; }

.el-overlay .el-dialog.tech-dialog .el-form-item__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--cc-text-mute);
}

.el-overlay .el-dialog.tech-dialog .el-form-item.is-required .el-form-item__label::before,
.el-overlay .el-dialog.tech-dialog .el-form-item__label::before { color: #f0a0a8; }

.el-overlay .el-dialog.tech-dialog .el-input__wrapper {
  padding: 1px 12px;
  border-radius: 6px;
  background: rgba(10, 15, 24, .7);
  border: 1px solid rgba(180, 196, 220, .16);
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.el-overlay .el-dialog.tech-dialog .el-input__wrapper:hover { border-color: rgba(180, 196, 220, .3); }

.el-overlay .el-dialog.tech-dialog .el-input__wrapper.is-focus {
  border-color: rgba(91, 155, 232, .7);
  box-shadow: 0 0 0 3px rgba(91, 155, 232, .15) !important;
}

.el-overlay .el-dialog.tech-dialog .el-input__inner {
  height: 36px;
  font-size: 14px;
  letter-spacing: .3px;
  color: var(--cc-text);
}

.el-overlay .el-dialog.tech-dialog .el-input__inner::placeholder { color: var(--cc-text-mute); }
.el-overlay .el-dialog.tech-dialog .el-input__icon,
.el-overlay .el-dialog.tech-dialog .el-input__password { color: var(--cc-text-mute); }
.el-overlay .el-dialog.tech-dialog .el-input__password:hover { color: var(--cc-text); }

/* 「生成强密码」是 el-input 的 append 槽 */
.el-overlay .el-dialog.tech-dialog .el-input-group__append {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.el-overlay .el-dialog.tech-dialog .el-input-group--append .el-input__wrapper { border-radius: 6px 0 0 6px; border-right: 0; }

.el-overlay .el-dialog.tech-dialog .el-input-group__append .el-button {
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  letter-spacing: 1px;
  color: #f3d58a;
  background: rgba(212, 180, 106, .1);
  border: 1px solid rgba(212, 180, 106, .4);
}

.el-overlay .el-dialog.tech-dialog .el-input-group__append .el-button:hover { background: rgba(212, 180, 106, .18); color: #ffe6a8; }

/* 密码规则提示（el-alert） */
.el-overlay .el-dialog.tech-dialog .el-alert {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(212, 180, 106, .08);
  border: 1px solid rgba(212, 180, 106, .3);
}

.el-overlay .el-dialog.tech-dialog .el-alert--info { background: rgba(91, 155, 232, .08); border-color: rgba(91, 155, 232, .3); }
.el-overlay .el-dialog.tech-dialog .el-alert .el-alert__icon { color: #f3d58a; }
.el-overlay .el-dialog.tech-dialog .el-alert--info .el-alert__icon { color: #9cc0f1; }
.el-overlay .el-dialog.tech-dialog .el-alert__title { font-size: 12px; line-height: 1.6; letter-spacing: .3px; color: var(--cc-text-dim); }

.el-overlay .el-dialog.tech-dialog .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(180, 196, 220, .1);
}

.el-overlay .el-dialog.tech-dialog .el-dialog__footer .el-button {
  height: 34px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, filter .15s ease;
}

.el-overlay .el-dialog.tech-dialog .el-dialog__footer .el-button--default {
  color: var(--cc-text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(180, 196, 220, .22);
}

.el-overlay .el-dialog.tech-dialog .el-dialog__footer .el-button--default:hover { color: var(--cc-text); background: rgba(255, 255, 255, .08); border-color: rgba(180, 196, 220, .4); }

.el-overlay .el-dialog.tech-dialog .el-dialog__footer .el-button--primary {
  color: #0e141f;
  font-weight: 600;
  background: linear-gradient(180deg, #7fb2f2, #5b9be8);
  border: 1px solid rgba(91, 155, 232, .6);
}

.el-overlay .el-dialog.tech-dialog .el-dialog__footer .el-button--primary:hover { transform: translateY(-1px); filter: brightness(1.06); background: linear-gradient(180deg, #7fb2f2, #5b9be8); }

/* 复制成功的瞬时反馈（dash-fix 加 .is-copied 1.6 秒） */
#app .stations-page .copy-btn.is-copied {
  color: #8ae9b9;
  background: rgba(62, 207, 134, .12);
  border-color: rgba(62, 207, 134, .5);
}
#app .stations-page .copy-btn.is-copied::before {
  -webkit-mask-image: var(--i-check);
          mask-image: var(--i-check);
}