/* ═════════════════════════════════════════════════════════════════
   疯狂水世界 · 控制台 — 海洋双主题层（theme.css）
   ─────────────────────────────────────────────────────────────────
   · 默认浅色白天模式：浅灰白底 #f5f7fa + 海洋蓝 #0e7cc4 / 青绿 #14b8a6
   · 深色夜间模式：<html data-mode="dark">（由 mode.js 切换）
   · 本层只覆盖 style.css 的 CSS 变量与少量硬编码颜色，
     旧版全部面板（25+ 视图、弹窗、登录页）自动随变量换肤，零 JS 改动
   · 主题选择持久化：localStorage['fkssj_mode']
   ═════════════════════════════════════════════════════════════════ */

/* ── 全局结构令牌（浅 / 深色共用）：统一圆角、描边、控件高度 ──────── */
:root{
  --line:#e7eaf1;                 /* 通用细描边 */
  --r-card:12px;                  /* 卡片 / 面板统一圆角（规范 6–8px，取 12 兼顾现代观感） */
  --r-ctl:8px;                    /* 按钮 / 输入框 / 小控件圆角 */
  --ctl-h:36px;                   /* 桌面端控件标准高度 */
  --gap:16px;                     /* 栅格 / 模块标准间距 */
  --card-solid:#ffffff;           /* 实心卡片表面（浅色白，深色块内覆盖） */
  --ctl-bg:#ffffff;               /* 按钮 / 输入框底色 */
  --ctl-bg-hover:#eef2f8;         /* 控件悬停浅灰 */
}

/* ── 浅色白天模式（默认）· 国际游戏运营后台风 ──────────────────────
   配色基调：近白浅灰底 + 纯白卡片 + 深石板文字；
   主色为沉稳深蓝（非高饱和霓虹），青色仅作少量点缀；
   成功/警告/危险用低刺激语义色。                                ── */
:root,
:root[data-mode="light"]{
  color-scheme:light;

  /* 主题主色：深蓝 → 天空蓝渐变（品牌标识 / 主按钮） */
  --theme-bg:#f3f5f9;
  --theme-primary:#2563eb;
  --theme-secondary:#0d9488;
  --theme-gradient:linear-gradient(135deg,#1d4ed8 0%,#2563eb 55%,#0ea5e9 100%);
  --app-bg:linear-gradient(180deg,#f6f8fc 0%,#f0f3f8 100%);

  /* 卡片 / 表面分层：白天用不透明白卡，干净利落 */
  --surface-1:#ffffff;
  --surface-2:#f4f6fa;
  --surface-3:#ffffff;
  --surface:#ffffff;                 /* 图表等未编号表面取色 */
  --surface-muted:#edf0f5;           /* 柱状图轨道等底槽色 */
  --surface-border:#e7eaf1;
  --surface-border-strong:#d6dce8;
  --surface-shadow:0 12px 32px -8px rgba(16,24,40,.14),0 4px 10px -4px rgba(16,24,40,.08);
  --surface-shadow-soft:0 1px 2px rgba(16,24,40,.05);
  --card-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --panel-glow:rgba(37,99,235,.08);

  /* 旧变量兼容映射 */
  --paper:#f3f5f9;
  --paper-2:#f4f6fa;
  --paper-3:#f8fafc;
  --card:#ffffff;
  --ink:#0f172a;
  --ink-2:#475569;
  --muted:#64748b;
  --muted-2:#9aa6b8;
  --rule:#e7eaf1;
  --rule-2:#eef1f6;

  /* 强调 / 语义色（沉稳、不刺眼） */
  --accent:#2563eb;
  --accent-2:#0d9488;
  --accent-soft:rgba(37,99,235,.09);
  --positive:#4CAF50;
  --positive-soft:rgba(76,175,80,.12);
  --warning:#FFA726;
  --warning-soft:rgba(255,167,38,.12);
  --danger:#EF5350;
  --danger-soft:rgba(239,83,80,.10);
  --info:#2563eb;

  /* 顶栏 / 侧栏：白天统一不透明白，结构靠细描边分隔（比毛玻璃更清爽） */
  --rail-bg:#ffffff;
  --bar-bg:#ffffff;
  --head-bg:#ffffff;
  --scroll-thumb:rgba(100,116,139,.26);
  --scroll-thumb-hover:rgba(100,116,139,.46);
}

/* ── 深色夜间模式 ───────────────────────────────────────────────── */
/* ── 深色专业模式（默认）· 辅助工具暗色风 ─────────────────────────
   主色调：深蓝灰 #1E2A38 / #252F3E（护眼、不刺眼）；
   强调色：青蓝 #3BA7FF；状态色：绿 #4CAF50 / 橙 #FFA726 / 红 #EF5350 / 灰 #5A6472；
   文字：主 #E8EDF2 / 次 #A0AAB8 / 禁用 #5A6472。低饱和 + 适度对比。     ── */
:root[data-mode="dark"]{
  color-scheme:dark;

  --theme-bg:#1E2A38;
  --theme-primary:#3BA7FF;
  --theme-secondary:#2DD4BF;
  --theme-gradient:linear-gradient(135deg,#2D9BF0 0%,#3BA7FF 55%,#2DD4BF 100%);
  --app-bg:linear-gradient(180deg,#252F3E 0%,#1E2A38 100%);

  --surface-1:rgba(37,47,62,.92);
  --surface-2:#2A3648;
  --surface-3:#303E52;
  --surface:#252F3E;
  --surface-muted:#3A4A60;
  --surface-border:rgba(163,177,199,.14);
  --surface-border-strong:rgba(163,177,199,.26);
  --surface-shadow:0 14px 40px rgba(0,0,0,.45);
  --surface-shadow-soft:0 4px 16px rgba(0,0,0,.30);
  --card-shadow:0 6px 22px rgba(0,0,0,.35);
  --panel-glow:rgba(59,167,255,.12);

  --paper:#1E2A38;
  --paper-2:#232F3F;
  --paper-3:#2A3648;
  --card:rgba(37,47,62,.94);
  --ink:#E8EDF2;
  --ink-2:#A0AAB8;
  --muted:#A0AAB8;
  --muted-2:#5A6472;
  --rule:rgba(163,177,199,.14);
  --rule-2:rgba(163,177,199,.08);

  --accent:#3BA7FF;
  --accent-2:#2DD4BF;
  --accent-soft:rgba(59,167,255,.16);
  --positive:#4CAF50;
  --positive-soft:rgba(76,175,80,.16);
  --warning:#FFA726;
  --warning-soft:rgba(255,167,38,.16);
  --danger:#EF5350;
  --danger-soft:rgba(239,83,80,.15);
  --info:#3BA7FF;

  --rail-bg:rgba(24,33,46,.94);
  --bar-bg:rgba(24,33,46,.90);
  --head-bg:rgba(24,33,46,.82);
  --line:rgba(163,177,199,.12);
  --card-solid:#252F3E;
  --ctl-bg:#2A3648;
  --ctl-bg-hover:#33435B;
  --scroll-thumb:rgba(150,168,196,.28);
  --scroll-thumb-hover:rgba(150,168,196,.50);
}

/* ── 外壳硬编码颜色改由变量驱动（style.css 里这三处写死了白色）──── */
.rail{ background:var(--rail-bg); }
.acct-bar{ background:var(--bar-bg); }
.masthead{ background:var(--head-bg); }

/* ── 普通用户置顶到期卡片：账号选择器下方。
   纵向 block 流式布局 + 整行实色续费按钮，任何手机内核都不会把按钮挤掉/隐形 ── */
.exp-bar{
  display:block;
  margin:8px 14px 2px;
  padding:12px 14px;
  background:var(--accent-soft);
  border:1px solid var(--rule);
  border-radius:12px;
  font-size:var(--fs-13);
}
.exp-bar.hidden{ display:none }
/* ≤7天：卡片转淡红，醒目提示 */
.exp-bar.warn{ background:var(--danger-soft); border-color:var(--danger); }

/* 信息行：左“到期+时间”，右倒计时。只是短文本，空间不够时日期省略号，
   与下面的按钮各自独立成行，互不影响 */
.exp-bar .exp-top{
  display:flex; align-items:baseline; gap:8px;
}
.exp-bar .exp-label{ color:var(--muted); flex:none; font-size:var(--fs-12) }
.exp-bar .exp-date{ font-weight:700; color:var(--ink); min-width:0; flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.exp-bar .exp-countdown{ margin-left:auto; flex:none; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:var(--fs-12) }

/* 提醒文字：独立一整行（未激活/临期时显示） */
.exp-bar .exp-msg{ display:block; margin-top:6px; font-size:var(--fs-13) }
.exp-bar.warn .exp-msg{ color:var(--danger); font-weight:800 }

/* 续费按钮：整行、实色海洋蓝、白字，display:block + width:100% 保证必然渲染可见 */
.exp-bar .exp-renew{
  display:block; width:100%;
  margin:10px 0 0; padding:10px 14px;
  border-radius:10px; border:none; cursor:pointer;
  background:var(--accent); color:#fff;
  font-weight:700; font-size:var(--fs-14);
  -webkit-appearance:none; appearance:none;
}
/* 临期/未激活：按钮转红，强化“马上处理" */
.exp-bar.warn .exp-renew{ background:var(--danger) }
.exp-bar .exp-renew:active{ transform:scale(.98) }

/* 续费弹窗结果展示 */
.rn-result{
  margin-top:12px; padding:12px 14px; border-radius:10px;
  background:var(--positive-soft); border:1px solid var(--positive);
}
.rn-result.hidden{ display:none }
.rn-result .rn-ok{ color:var(--positive); font-weight:700; font-size:var(--fs-14); margin-bottom:8px }
.rn-result .rn-line{ font-size:var(--fs-13); color:var(--ink); margin-top:4px }
.rn-result .rn-line b{ color:var(--accent) }

/* 全局滚动条随主题 */
*::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); }
*::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); }

/* 从手机抽屉状态跨断点拉宽回桌面时，清掉残留的抽屉遮罩/位移
   （否则透明遮罩仍盖在页面上拦截点击，侧栏也可能带着负位移） */
@media (min-width:821px){
  .rail-backdrop{ display:none !important; }
  .rail{ transform:none !important; }
}

/* 主按钮：旧版文字色为深青（配亮青渐变），新海洋渐变上统一白字；阴影也换成主色微光 */
.tbtn.primary{
  color:#fff;
  box-shadow:0 4px 16px color-mix(in srgb,var(--theme-primary) 30%,transparent);
}
.tbtn.primary:hover{
  box-shadow:0 6px 22px color-mix(in srgb,var(--theme-primary) 42%,transparent);
}
.tbtn:hover{
  box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 18%,transparent);
}
/* 输入框聚焦光晕跟随主色 */
.inp:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* ── 📡 实时日志：style.css 里时间/标签/正文颜色写死，改为变量 ──── */
.live-box{ background:var(--paper-2); }
.live-box .ltime{ color:var(--muted-2); }
.live-box .ltag{ color:var(--accent); }
.live-box .lbody{ color:var(--ink-2); }
.live-box .line.info  .lbody{ color:var(--muted); }
.live-box .line.warn  .lbody{ color:var(--warning); }
.live-box .line.error .lbody{ color:var(--danger); }

/* 玩法统计柱状图底槽 */
.bc-track{ background:var(--surface-muted); }

/* ── 右上角日月主题切换按钮：图标居中、宽度稳定，点击有轻微回弹 ──── */
#btnMode{
  min-width:40px;
  justify-content:center;
  font-size:15px;
  line-height:1;
  padding-left:10px;
  padding-right:10px;
}
#btnMode:active{ transform:scale(.92); }

/* ── 系统管理 · 卡密面板 ─────────────────────────────────────────
   桌面端：表格上方批量工具条（复制全部 / 导出 TXT / 导出 CSV） ──── */
.cards-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap; margin:2px 0 10px;
}
.cards-bar-btns{ display:flex; gap:6px; flex-wrap:wrap }
.cards-bar-btns .tbtn{ min-height:36px }
/* 桌面端每行操作按钮（复制/启禁用/删除）紧凑一排 */
.cards-tbl .cd-ops{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.cards-tbl .cd-ops .tbtn{ padding:6px 10px }
.cards-tbl .cd-code{ max-width:220px }
.cards-tbl .cd-code .copyable{
  display:inline-block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
}
.cards-tbl .cd-desc{
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 勾选列：窄列居中；使用人列未使用的灰色占位 */
.cards-tbl .cd-check{ width:34px; text-align:center }
.cards-tbl .cd-check input{ width:15px; height:15px; vertical-align:middle; cursor:pointer; accent-color:var(--accent) }
.cards-tbl .cd-unused{ color:var(--muted) }
/* 编辑卡密弹窗 */
#ecBody .ec-info{ margin-bottom:10px; color:var(--muted) }
#ecBody .ec-row{ display:flex; align-items:center; gap:8px; margin:10px 0; justify-content:space-between }
#ecBody .ec-row input[type=number],#ecBody .ec-row input[type=text],#ecBody .ec-row select{
  flex:1; max-width:200px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text)
}
#ecBody .ec-row input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent) }
#ecBody .ec-note{ padding:8px 10px; border-radius:8px; background:var(--warn-bg,#fdf6e3); color:#92600a; margin-bottom:8px }

/* ── 主题切换平滑过渡（只过渡颜色类属性，不干扰布局/抽屉动画）────── */
body,
.rail, .acct-bar, .masthead, .subtabs, .rail-foot, .brand,
.card, .acard, .chip, .errbox, .logs, .live-box,
.modal .box, .modal-hd, .auth-form, .toast,
.taskchip, .faccard, .mtask, .shop-row, .panel, .sect,
.brief, .metabar, .uchip, .acct-pick, .acct-list,
.barchart, .logtabs, .np-summary, .facfloor{
  transition:background-color .25s ease, background .25s ease,
             border-color .25s ease, color .2s ease, box-shadow .25s ease;
}
/* 按钮/卡片需要保留原有位移动效，单独合并声明 */
.tbtn, .card, .acard{
  transition:background-color .25s ease, border-color .25s ease,
             color .2s ease, box-shadow .25s ease,
             transform .18s var(--ease,cubic-bezier(.2,.7,.3,1)),
             filter .2s ease;
}
.inp, .subtab, .nav-it, .logtab, .sw{
  transition:background-color .25s ease, border-color .25s ease,
             color .2s ease, box-shadow .25s ease;
}

/* ═════════════════════════════════════════════════════════════════
   📱 移动端强化（在 style.css 既有抽屉/安全区基础上补齐需求）
   ═════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* 所有可点控件触摸区域 ≥ 48px */
  .nav-it{ min-height:48px; }
  .acct-it{ min-height:48px; }
  .subtab{ min-height:44px; }
  .logtab{ min-height:44px; }
  .masthead .tools .tbtn,
  .modal-ft .tbtn,
  .live-btns .tbtn,
  .acard-actions .tbtn,
  .view .tbtn{ min-height:48px; }

  /* 开关本身保持小巧，但用透明热区把触摸范围扩到 ≥48px */
  .sw::before{
    content:'';
    position:absolute;
    top:-14px; right:-10px; bottom:-14px; left:-10px;
  }

  /* 输入框字体 ≥16px，防止 iOS Safari 聚焦自动缩放（表格内密集数字除外） */
  .view input.inp,
  .view select.inp,
  .view textarea.inp{ font-size:16px; }
  table .inp, .fm-tbl .inp{ font-size:var(--fs-12); }

  /* 实时/面板日志：窄屏改为整行不换行 + 面板横向滚动，长内容左右拖动查看 */
  .logs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .logs .l{
    white-space:nowrap;
    min-width:max-content;
    padding-right:24px;
  }
  .logs .l .m{ white-space:pre; }

  /* 主题切换按钮在顶栏滑动条中排最前，始终可见 */
  .masthead .tools #btnMode{ order:-6; }

  /* 内容底部再留一道安全边距，避免被系统手势栏遮挡 */
  .view-inner{ padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }

  /* ── 卡密面板：六列表格 → 紧凑卡片，每张卡密 3 行，全程无需横向滑动 ── */
  /* 批量工具条：计数一行、按钮自动换行（3 个 / 行），避免 6 个按钮挤成一行溢出 */
  .cards-bar{ gap:6px }
  .cards-bar-btns{ display:flex; width:100%; flex-wrap:wrap; gap:6px }
  .cards-bar-btns .tbtn{
    flex:1 1 calc(33.333% - 6px); min-width:0; justify-content:center;
    min-height:40px; padding:6px 6px; font-size:var(--fs-12);
  }

  /* 生成卡密表单：两列网格，长控件整行 */
  .card-gen .row{
    display:grid; grid-template-columns:1fr 1fr;
    gap:8px; align-items:center;
  }
  .card-gen .row .gen-span2{ grid-column:1 / -1; width:100%; min-width:0 }
  .card-gen .row .inp,
  .card-gen .row select{
    width:100%; min-width:0; height:40px;
    font-size:16px;            /* ≥16px 防 iOS 聚焦自动缩放 */
  }
  .card-gen .row label.txt-small{ display:flex; align-items:center; gap:6px; min-height:40px }
  .card-gen .row .tbtn.primary{ min-height:44px; justify-content:center }

  /* 表格解构为卡片流 */
  .cards-tbl, .cards-tbl tbody{ display:block }
  .cards-tbl thead{ display:none }
  .cards-tbl tr{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:3px 10px;
    background:var(--surface-1);
    border:1px solid var(--surface-border);
    border-radius:10px;
    padding:8px 10px; margin-bottom:7px;
    box-shadow:var(--surface-shadow-soft);
  }
  .cards-tbl tr:hover td{ background:none }
  .cards-tbl td{ display:block; border:0; padding:0 }

  /* 勾选框固定在卡片首行最左，不参与换行 */
  .cards-tbl td.cd-check{ flex:none; order:-1; width:auto; display:flex; align-items:center }
  .cards-tbl td.cd-check input{ width:17px; height:17px }

  /* 第 1 行：卡密（占满剩余宽度，点击复制）+ 状态 chip */
  .cards-tbl td.cd-code{ flex:1 1 auto; min-width:0; max-width:none }
  .cards-tbl td.cd-code .copyable{
    font-size:var(--fs-13); font-weight:600;
  }
  .cards-tbl td.cd-status{ flex:none }

  /* 第 2 行：类型 / 到期额度 / 备注，灰色小字横排，备注超长省略 */
  .cards-tbl td.cd-meta{
    flex:0 1 auto; font-size:var(--fs-11); color:var(--muted);
    display:inline-flex; align-items:center; min-width:0;
  }
  .cards-tbl td.cd-meta::before{
    content:attr(data-label);
    color:var(--muted-2); font-size:9px; margin-right:3px;
  }
  .cards-tbl td.cd-desc{
    flex:0 1 30%; max-width:46%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* 第 3 行：复制 / 启禁用 / 删除 三个按钮等分整行，触控区域充足 */
  .cards-tbl td.cd-ops{
    flex:1 1 100%; display:flex; gap:6px;
    margin-top:3px; justify-content:stretch;
  }
  .cards-tbl td.cd-ops .tbtn{
    flex:1 1 0; min-width:0; justify-content:center;
    min-height:40px; padding:6px 4px; font-size:var(--fs-12);
  }

  /* 管理弹窗本体在手机端是底部弹层，收紧内边距让一屏容纳更多卡密 */
  #mAdmin .modal-bd{ padding:10px 12px }
}

/* ═════════════════════════════════════════════════════════════════
   🎮 国际游戏运营后台 · 统一视觉层（Console UI Kit）
   ─────────────────────────────────────────────────────────────────
   原则：只改视觉与间距，不删/不改任何按钮、表单、数据模块与 DOM 结构。
   · 全部取色走上面的 CSS 变量，浅色（默认）/深色自动跟随
   · 统一：卡片圆角/阴影/内边距、字体层级、控件高度、模块间距
   · PC 多列栅格、手机单列；桌面规则在前，本块末尾用媒体查询收口
   ═════════════════════════════════════════════════════════════════ */

/* ── 1. 基础排版：清晰无衬线 + 明确层级 + 舒适行高 ─────────────── */
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.005em;
}
/* 大标题 / 模块标题 / 正文 / 辅助小字 四级权重 */
.masthead h1{ letter-spacing:-.01em }
.sect h2,.fac-head h3,.mtask-goal{ letter-spacing:-.01em }
.muted,.txt-mute,.hint,.acard-meta,.fac-head .lv,.bcard .meta,
.herocard .meta,.np-summary,.cfg-desc,.st-tip{ color:var(--muted) }

/* ── 2. 应用外壳：左侧导航 + 白色顶栏 + 浅灰内容区 ─────────────── */
.rail,.acct-bar,.masthead{ backdrop-filter:none; -webkit-backdrop-filter:none }
.rail{ border-right:1px solid var(--line) }
.brand{ border-bottom:1px solid var(--line); background:none }
.rail-foot{ border-top:1px solid var(--line) }

/* 侧栏导航：选中项改为“浅蓝底 + 深蓝字”（比整条渐变更克制、更像后台） */
.nav-grp > h4{ font-weight:700 }
.nav-it{ border-radius:10px; padding:9px 12px }
.nav-it.on{
  background:var(--accent-soft);
  color:var(--accent); font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
.nav-it.on .idx,.nav-it.on .srv{ color:var(--accent) }
.nav-it.on .cnt.has{ background:var(--ctl-bg); color:var(--accent) }

/* 顶栏 / 账号栏 / 二级标签：统一水平留白与细描边 */
.acct-bar{ padding:12px 24px; border-bottom:1px solid var(--line) }
.acct-bar .acct-pick{
  border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--card-shadow); background:var(--card-solid);
}
.masthead{ padding:16px 24px 14px; border-bottom:1px solid var(--line) }
.subtabs{ padding:10px 24px; background:var(--head-bg); border-bottom:1px solid var(--line) }

/* 内容区：统一留白；超宽屏（>1600）居中收束，避免在带鱼屏上被拉散 */
.view{ padding:20px 24px }
.view-inner{ max-width:1600px; margin:0 auto }

/* ── 3. 卡片系统：全站卡片统一为 白底 / 细边 / 14圆角 / 柔和轻阴影 ── */
.card,.acard,.faccard,.mtask,.bcard,.herocard,.dyn-card,.st-card,
.logs,.barchart,.np-details,.shop-row,.srv-foot,.qrbox .frame,
.auth-form,.modal .box{
  background:var(--card-solid);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--card-shadow);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* 登录页是品牌门面卡，保留更大的 18px 圆角与顶部渐变条 */
.auth-form{ border-radius:18px }
/* 标准卡片内边距（信息密度与呼吸感平衡） */
.card,.acard{ padding:20px }
.card.tight{ padding:16px }
.faccard,.mtask{ padding:16px }
.bcard,.herocard,.dyn-card{ padding:14px 16px }

/* 静态信息卡不悬浮跳动；可交互列表卡仅做极轻微抬升 */
.card,.acard{ transition:box-shadow .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease) }
.card:hover{ box-shadow:var(--card-shadow); border-color:var(--line); transform:none }
.acard:hover,.faccard:hover,.bcard:hover,.herocard:hover{
  box-shadow:var(--surface-shadow-soft); border-color:var(--surface-border-strong);
  transform:translateY(-1px);
}
/* 概览卡顶部状态色条保留（运行/异常/启动中），圆角内收更精致 */
.acard{ border-top:3px solid var(--accent) }

/* 栅格间距统一为 16px；PC 自适应多列 */
.dyn-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gap) }
.herolist{ gap:var(--gap) }
.facgrid{ gap:var(--gap) }
.metabar{ gap:var(--gap) }

/* ── 4. 按钮：三级体系（主=实心蓝 / 次=白底描边 / 幽灵=浅灰胶囊）── */
.tbtn{
  min-height:var(--ctl-h); padding:0 14px;
  border-radius:var(--r-ctl);
  background:var(--ctl-bg); border:1px solid var(--surface-border-strong);
  color:var(--ink-2); font-weight:500; font-size:var(--fs-13);
  box-shadow:none; transform:none;
}
.tbtn:hover{
  background:var(--ctl-bg); border-color:var(--accent); color:var(--accent);
  transform:none; box-shadow:none;
}
.tbtn:active{ transform:translateY(.5px) }
.tbtn.primary{
  background:var(--accent); border-color:transparent; color:#fff; font-weight:600;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 32%,transparent);
}
.tbtn.primary:hover{
  background:color-mix(in srgb,var(--accent) 88%,#000); color:#fff;
  border-color:transparent; box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent);
}
.tbtn.danger{ background:transparent; border-color:color-mix(in srgb,var(--danger) 32%,transparent); color:var(--danger) }
.tbtn.danger:hover{ background:var(--danger); border-color:var(--danger); color:#fff; box-shadow:none }
.tbtn.ghost{ background:transparent; border-color:transparent; color:var(--muted) }
.tbtn.ghost:hover{ background:var(--surface-2); border-color:transparent; color:var(--ink) }
/* 顶栏工具按钮密集，统一收成浅灰胶囊，弱化边框噪音 */
.masthead .tools .tbtn.ghost{
  background:var(--surface-2); border-color:transparent; color:var(--ink-2);
}
.masthead .tools .tbtn.ghost:hover{
  background:var(--ctl-bg-hover); border-color:transparent; color:var(--accent);
}
.masthead .tools .tbtn.primary{ border-color:transparent }
.tbtn.on{ background:var(--accent); border-color:var(--accent); color:#fff }
.tbtn:disabled{ opacity:.45; box-shadow:none; transform:none }
/* 各类“标签页型”按钮选中态统一为浅蓝胶囊（不再用整条渐变） */
.logtab.on,.dyn-tab.on{
  background:var(--accent-soft); color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 26%,transparent);
  box-shadow:none; font-weight:600;
}
.sw.on{ background:var(--accent) }

/* 登录主 CTA 保留品牌渐变（登录页是唯一的“门面时刻”），hover 不再变青色 */
.auth-form .btn{ border-radius:var(--r-ctl) }
.auth-form .btn:hover{ background:var(--theme-gradient); filter:brightness(.97); transform:translateY(-1px) }
.auth-claim button{ border-radius:var(--r-ctl) }

/* ── 5. 表单控件：白底、统一高度/圆角、聚焦主色描边 + 柔光环 ────── */
.inp{
  min-height:38px; padding:8px 12px;
  background:var(--ctl-bg); border:1px solid var(--surface-border-strong);
  border-radius:var(--r-ctl); color:var(--ink);
}
.inp:focus{
  outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}
.inp::placeholder{ color:var(--muted-2) }
.auth-form .inp{ background:var(--ctl-bg); border-radius:var(--r-ctl) }
.auth-form .inp:focus{ background:var(--ctl-bg) }
.fld label,.auth-form label,.mlabel{ color:var(--muted); font-weight:600 }

/* ── 6. 数据展示：表格 / 键值 / 统计条 / 标签 ─────────────────── */
.tbl th{
  background:var(--paper-3); color:var(--muted);
  font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);
}
.tbl td{ padding:11px 12px; border-bottom:1px solid var(--rule-2) }
.tbl tr:hover td{ background:var(--paper-3) }
.kv dt{ color:var(--muted) }
.chip{ border-radius:999px; font-weight:600 }
.brief{ border-color:var(--line) }
.brief > div{ border-color:var(--rule-2) }
.metabar{ border-color:var(--line) }
.errbox{ border-radius:var(--r-ctl) }

/* 日志盒 / 实时日志：控制台浅灰底 + 统一圆角（文字颜色已在上方变量层处理） */
.logs,.live-box{ border-radius:var(--r-card); border:1px solid var(--line) }
.live-box{ background:var(--paper-2); box-shadow:var(--card-shadow) }
#btnLive.on,.live-btns .tbtn.on{
  background:var(--accent); color:#fff; border-color:transparent;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 32%,transparent);
}
.live-title .pdot{ background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft) }

/* 柱状图条：写死的蓝/红渐变改为语义变量，浅蓝→主色、成功绿、危险红 */
.bc-fill{ background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,#fff),var(--accent)) }
.bc-fill.ok{ background:linear-gradient(135deg,color-mix(in srgb,var(--positive) 45%,#fff),var(--positive)) }
.bc-fill.err,.bc-fill.full,
.dyn-mat .it-bar .bc-fill.full,.st-row .bc-fill.full{
  background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 42%,#fff),var(--danger));
}
.qbar.done > i{ background:linear-gradient(135deg,color-mix(in srgb,var(--positive) 50%,#fff),var(--positive)) }

/* ── 7. 弹窗：圆角 / 头部 / 底部统一 ─────────────────────────── */
.modal .box{ border-radius:16px }
.modal-hd{ background:color-mix(in srgb,var(--accent) 6%,transparent); border-bottom:1px solid var(--line) }
.modal-hd h3{ font-size:var(--fs-18) }
.modal-ft{ background:var(--surface-2); border-top:1px solid var(--line) }
.mtabs,.cfg-tabs{ border-bottom:1px solid var(--line) }

/* ── 8. 中和历史遗留的写死杂色（统一到语义变量，保持浅底和谐）──── */
.tg-group{ border:1px solid var(--line); background:transparent }
.tg-it{ border:1px solid var(--surface-border-strong); background:var(--ctl-bg); color:var(--ink-2) }
.tg-it.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent) }
.tg-lv{ color:var(--muted-2) }
.np-now{ background:var(--positive-soft); border:1px solid color-mix(in srgb,var(--positive) 26%,transparent) }
.np-id{ color:var(--positive) }
.np-prog{ color:var(--muted) }
.np-stuck{ background:var(--warning-soft); border:1px solid color-mix(in srgb,var(--warning) 30%,transparent) }
.np-stuck-why{ color:var(--warning) }
.np-tips .tip{ color:color-mix(in srgb,var(--warning) 72%,var(--ink)) }
.np-fm{ background:var(--surface-1); border:1px solid var(--line) }
.fm-tbl th,.fm-tbl td{ border-bottom:1px solid var(--rule-2) }
.fm-tbl th{ color:var(--muted) }
.fm-planned{ color:var(--positive) }
.toast{ background:var(--ink); box-shadow:var(--surface-shadow) }

/* ═════════════════════════════════════════════════════════════════
   📱 响应式收口（本段置于最后，确保小屏优先级，覆盖前面的桌面值）
   ═════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .view{ padding:14px }
  .acct-bar{ padding:10px 14px }
  .masthead{ padding:14px }
  .subtabs{ padding:10px 14px }
}
@media (max-width:560px){
  /* 卡片内边距在手机端收紧，栅格自动单列 */
  .card,.acard{ padding:14px }
  .faccard,.mtask{ padding:12px }
  .bcard,.herocard,.dyn-card{ padding:12px }
  .dyn-grid,.herolist{ grid-template-columns:minmax(0,1fr) }
  .facstock{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) }
  .dyn-mat{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) }
  /* 主操作区按钮保证足够触控高度 */
  .view .tbtn,.modal-ft .tbtn{ min-height:44px }
  .modal .box{ border-radius:14px }
}

/* 用户在系统层面开启“减少动态效果”时，关闭所有过渡/动画 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition:none !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ── 益玩账号密码登录 · 官方极验滑块挂载区（滑块本体由官方 gt.js 注入） ── */
.ew-gee-wrap{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line,#e7eaf1);
}
.ew-gee-tip{ color:var(--muted,#64748b); }
.ew-gee-box{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ew-gee-loading{ padding:10px 0; }
/* 极验注入的按钮/弹层在窄屏下居中，避免溢出卡片 */
.ew-gee-box .geetest_holder{ margin:0 auto; }
.ew-gee-box .geetest_panel{ max-width:100% !important; }

/* ═════════════════════════════════════════════════════════════════
   ✦ V2 精修层（Console UI Kit · Polished）
   目标：Awwwards / FWA 级克制高级感。只动视觉与交互，不碰任何业务 DOM 与逻辑。
   全部动画限定在 transform / opacity（GPU 合成），避免重排与卡顿。
   ═════════════════════════════════════════════════════════════════ */

/* ── 0. ui.js 动效配套样式 ─────────────────────────────────────── */
/* 数字 tweening 期间：等宽数字 + 禁选，保证过渡期间宽度稳定不抖动 */
.num-tweening{ font-variant-numeric:tabular-nums; user-select:none; }

/* 日志新行入场：淡入 + 轻微上浮，柔和不突兀（不做 will-change，避免大量行各自分层闪烁） */
.logs .l.log-in, .live-box .line.log-in, .live-box .l.log-in{
  animation:logIn .62s cubic-bezier(.22,.7,.28,1) both;
}
@keyframes logIn{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:none }
}

/* 区块 / 卡片入场：已取消（用户不想要卡片一弹一弹），直接显示无动画 */
.reveal-pending{ opacity:1; transform:none; }
.reveal-in{ animation:none; opacity:1; transform:none; transition:none; }

/* ── 1. 排版：统一字体层级与节奏，建立清晰的“视觉流” ──────────── */
:root{
  --fs-display:clamp(30px,3.2vw,44px);  /* 页面主标题 */
  --fs-title:20px;                       /* 模块标题 */
  --fs-body:14px;                        /* 正文 */
  --fs-small:12px;                       /* 辅助 */
  --lh-tight:1.2; --lh-snug:1.4; --lh-normal:1.6;
}
body{ font-size:var(--fs-body); line-height:var(--lh-normal); }
.masthead h1{ font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:700; }
.sect h2,.fac-head h3{ font-size:var(--fs-title); line-height:var(--lh-snug); }
/* 等宽数字统一 tabular，杜绝指标跳动 */
.mnum,.brief .v,.metabar .v,.dyn-row .v,.dyn-bar .v,.fackv .v,
.st-q,.herocard .meta,.acard-meta,.chip.mono{ font-variant-numeric:tabular-nums; }

/* ── 2. 留白：更通透的呼吸感，区块间距克制放大 ─────────────────── */
.view{ padding:26px 28px; }
.view-inner{ max-width:1480px; }
.masthead{ padding:20px 28px 16px; }
.acct-bar{ padding:14px 28px; }
.subtabs{ padding:12px 28px; }
/* 卡片内边距统一加大一档，信息密度与通透感平衡 */
.card,.acard{ padding:22px 22px; }
.dyn-grid,.herolist,.facgrid,.metabar{ gap:18px; }
.sect{ margin-bottom:20px; padding-bottom:14px; }
/* 栅格间距统一为 18 */
.dyn-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px }
.brief{ margin:14px 0; }
.brief > div{ padding:14px 14px; }

/* ── 3. 视觉层级：主操作 / 核心数据一眼识别，次要信息弱化 ──────── */
/* 主按钮强化：更高对比 + 微光晕，作为页面最强视觉锚点 */
.tbtn.primary{ font-weight:700; letter-spacing:.01em; }
/* 概览大数字：字号与字重拉开，成为看板焦点 */
.brief .v{ font-size:26px; font-weight:800; letter-spacing:-.015em; }
.brief .k{ font-size:11px; letter-spacing:.08em; }
/* 次要元信息统一降饱和、降字重 */
.acard-meta,.meta,.txt-mute,.muted{ color:var(--muted); }
/* 标签/计数胶囊弱化边框噪音，靠底色区分 */
.subtab .cnt{ background:var(--surface-2); }

/* ── 4. 色彩：高级和谐，低刺激；主题切换随变量同步（变量已在上方定义）── */
/* 为浅色模式叠加一层极淡的环境渐变，制造空间深度，避免扁平单调 */
.stage{ background:
  radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 60%),
  var(--app-bg); }
/* 主色点缀统一收敛到 accent，避免多色杂糅 */
.masthead .kicker{ color:var(--accent); }
/* 文本对比度兜底：正文用 ink-2 偏深，辅助用 muted，保证可读性 */

/* ── 5. 动效：克制、平滑、GPU 加速；动效服务体验 ──────────────── */
/* 卡片 hover：克制上浮 + 柔和阴影加深 + 1.02 微缩放；点击下压反馈 */
.card,.acard,.dyn-card,.faccard,.bcard,.herocard,.mtask,.st-card{
  transition:
    transform .28s cubic-bezier(.22,.7,.28,1),
    box-shadow .28s ease,
    border-color .2s ease,
    background-color .25s ease;
  will-change:transform;
}
.acard:hover,.dyn-card:hover,.faccard:hover,.bcard:hover,.herocard:hover,
.mtask:hover,.st-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--surface-shadow);
  border-color:var(--surface-border-strong);
}
.acard:active,.dyn-card:active,.faccard:active,.bcard:active,.herocard:active,
.mtask:active,.st-card:active{ transform:translateY(-1px) scale(1.005); }
/* 纯静态信息卡（.card）不缩放跳动，仅阴影柔和变化，避免视觉噪音 */
.card:hover{ transform:none; box-shadow:var(--surface-shadow-soft); border-color:var(--surface-border); }

/* 滚动平滑（容器级，不影响动画元素） */
.logs,.live-box,.view{ scroll-behavior:smooth; }

/* ── 6. 微交互：完整交互态（默认/悬停/激活/禁用）────────────────── */
.tbtn{ transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; }
.tbtn:hover{ transform:translateY(-1px); }
.tbtn:active{ transform:translateY(0) scale(.985); }
.tbtn:disabled{ transform:none; cursor:not-allowed; }
/* 输入框：默认细边 → 聚焦主色描边 + 柔光环；禁用态灰化 */
.inp{ transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.inp:focus{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.inp:disabled{ background:var(--surface-2); color:var(--muted); }
/* 下拉/标签：悬停提亮，激活主色胶囊（已在上方定义，这里补过渡） */
.subtab,.logtab,.nav-it,.tg-it{ transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }

/* ── 7. 响应式：平板 / 手机重新规划布局与触控 ──────────────────── */
/* 平板（821–1180）：收窄侧栏、内容区单列优先，保证触控舒适 */
@media (max-width:1180px){
  :root{ --rail-w:200px; }
  .view{ padding:18px; }
  .masthead,.acct-bar,.subtabs{ padding-left:18px; padding-right:18px; }
  .dyn-grid,.herolist{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}
/* 手机（≤820）：侧栏变抽屉、卡片单列、触控区≥44（已在上方定义，这里补留白收口） */
@media (max-width:820px){
  .view{ padding:14px; }
  .card,.acard{ padding:16px; }
  .brief .v{ font-size:20px; }
  .masthead h1{ font-size:26px; }
}
@media (max-width:560px){
  .dyn-grid,.herolist{ grid-template-columns:minmax(0,1fr); }
  .brief{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── 8. 原创性：项目专属视觉语言细节 ──────────────────────────── */
/* 品牌标识：首帧轻微落位，建立“控制台”仪式感（仅首屏一次） */
.brand-mark .n{ background:var(--theme-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* 顶部品牌序号（01/02…）微动：作为页面编号的精致细节 */
.masthead .no{ font-variant-numeric:lining-nums; }
/* 自定义滚动条：随主题、更纤细精致 */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ border-radius:99px; }
/* 选区色跟随主色 */
::selection{ background:color-mix(in srgb,var(--accent) 22%,transparent); }
/* 焦点环统一品牌色，键盘可达性清晰 */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ── 9. 自适应加固（V3）：缩放 / 窄屏顶栏不被挤坏，PC / 平板 / 手机 三档重排 ──
   根因：顶栏是“序号 | 标题 | 工具栏”三列网格，工具栏十几个按钮不换行，
   缩放后有效宽度变小会把中间标题列压到 ~0 宽 → 中文逐字竖排、按钮溢出。
   对策：中窄屏把工具栏整体下移到独立一行，标题独占一行，字号随宽度收敛。 */

/* 顶栏大序号随宽度收敛（30~64px），避免超宽数字吃掉标题空间 */
.masthead .no{ font-size:clamp(30px, 5vw, 64px); }
/* 标题按词/句换行，不出现单字竖排；列允许收缩但有下方重排兜底 */
.masthead .titles{ min-width:0; }
.masthead h1{ word-break:keep-all; overflow-wrap:anywhere; }
.masthead .tools{ min-width:0; }

/* 平板及“桌面端放大到 125%~150%”（561~1320 CSS 像素）：
   工具栏下移独占一行，标题拿满剩余宽度 → 永不竖排、按钮不溢出。
   注意：≤560 手机档由 style.css 的 grid-areas（menu/no/title + tools）负责，
   这里若用 max-width:1320 会覆盖手机的三列布局，导致 ☰ 与序号 01 挤进同一格重叠，
   故必须用 min-width:561px 把手机档排除在外。 */
@media (min-width:561px) and (max-width:1320px){
  :root{ --rail-w:190px; }
  .masthead{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto;
    row-gap:18px; column-gap:18px;
    align-items:end;
  }
  .masthead .no{ grid-column:1; grid-row:1; font-size:clamp(28px,4.4vw,52px); }
  .masthead .titles{ grid-column:2; grid-row:1; }
  /* 工具栏独立成行：左对齐、允许换行，与标题拉开 18px 绝不相碰 */
  .masthead .tools{ grid-column:1 / -1; grid-row:2; justify-content:flex-start; padding-top:2px; }
  .view{ padding:18px; }
}

/* 手机（≤820，侧栏已变抽屉）：顶栏更紧凑，隐藏副标题给标题让路 */
@media (max-width:820px){
  .masthead{ padding-left:14px; padding-right:14px; row-gap:12px; }
  .masthead h1{ font-size:22px; }
  .masthead .lede{ display:none; }
  .view{ padding:14px; }
}

/* 小屏手机（≤560）：序号再收、按钮更紧凑，内容贴边不留多余白 */
@media (max-width:560px){
  .masthead .no{ font-size:30px; }
  .masthead .tools .tbtn{ padding:6px 10px; font-size:11px; }
  .view{ padding:12px; }
  .view-inner{ max-width:100%; }
  .dyn-grid,.herolist{ grid-template-columns:minmax(0,1fr); }
}

/* ── 10. 手机端紧凑密度：按钮 / 卡面 / 文字整体收一档，信息更密不臃肿 ── */
/* 大屏手机 / 小平板（≤820）：温和收紧 */
@media (max-width:820px){
  .acard-name{ font-size:22px; }
  .masthead h1{ font-size:20px; }
  .card,.acard{ padding:14px; }
}
/* 手机（≤560）：明显收紧 —— 覆盖无障碍 48px 触控下限，换更密的信息密度 */
@media (max-width:560px){
  .masthead .no{ font-size:20px; }
  .masthead h1{ font-size:18px; }
  .masthead{ column-gap:10px; row-gap:10px; }
  .acard-name{ font-size:19px; }
  .acard-meta{ font-size:11px; }
  /* 所有按钮统一压到 36px 高、更窄的内边距（含顶栏/卡片/弹窗工具条） */
  .tbtn,
  .masthead .tools .tbtn,
  .view .tbtn,
  .modal-ft .tbtn,
  .live-btns .tbtn,
  .acard-actions .tbtn{ min-height:36px; padding:5px 10px; font-size:11px; gap:4px; border-radius:9px; }
  .card,.acard{ padding:12px; }
  .acard-actions{ gap:6px; }
  .brief .v{ font-size:16px; }
  .brief .k{ font-size:9px; }
  .brief > div{ padding:7px 9px; }
  .subtab{ padding:4px 10px; font-size:11px; }
  .metabar{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:4px 8px }
  .metabar .m .k{ font-size:9px }
  .metabar .m .v{ font-size:11px }
  .view{ padding:10px; }
}

/* ── 11. 桌面端可读性：日志等小字放大、行距拉开（仅 ≥821px，手机端保持紧凑） ── */
@media (min-width:821px){
  .logs, .live-box{ font-size:14px; line-height:1.7; }
  .logs .l{ padding:5px 6px; }
  .logs .l .t, .live-box .ltime{ font-size:12px; }
  .logs-empty{ font-size:13px; }
}

/* ═════════════════════════════════════════════════════════════════
   🛠 专业工具暗色风 · 增强层（规范落地）
   ─────────────────────────────────────────────────────────────────
   依据：深蓝灰底 #1E2A38 · 青蓝强调 #3BA7FF · 状态绿橙红灰 ·
         圆角 6–8px · 字体 标题16/正文13-14/辅助11-12 ·
         分区卡片式布局 · 底部快捷操作栏 · 统一悬停/点击/禁用反馈
   ═════════════════════════════════════════════════════════════════ */

/* ── 1. 字体层级：标题 16 / 正文 13-14 / 辅助 11-12 ── */
.masthead h1{ font-size:var(--fs-18); letter-spacing:-.01em }
.sect h2, .fac-head h3{ font-size:var(--fs-16); letter-spacing:-.01em }
.view-inner{ font-size:var(--fs-14) }
.np-summary, .cfg-desc{ font-size:var(--fs-12) }
.acard-meta, .bcard .meta, .herocard .meta{ font-size:var(--fs-12) }

/* ── 2. 分区卡片式布局：模块独立成卡、圆角阴影统一、留白均匀 ── */
.card, .acard, .panel, .shop-row{ border-radius:var(--r-card); box-shadow:var(--card-shadow) }
.sect{ margin-bottom:var(--sp-5) }
.view-inner{ padding-bottom:76px }   /* 底部给快捷操作栏让位 */

/* ── 3. 底部快捷操作栏：高频操作一键可达 ── */
.dock{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 92%,transparent);
  border:1px solid var(--surface-border);
  box-shadow:var(--surface-shadow); z-index:60;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.dock.hidden{ display:none }
.dock-btn{
  min-height:40px; padding:0 18px; border-radius:9px;
  border:1px solid var(--surface-border);
  background:var(--ctl-bg); color:var(--ink);
  font-size:var(--fs-13); font-weight:600;
  cursor:pointer; transition:all .18s var(--ease);
}
.dock-btn:hover{ background:var(--ctl-bg-hover); box-shadow:0 4px 14px rgba(0,0,0,.30); transform:translateY(-1px) }
.dock-btn:active{ transform:scale(.95) }
.dock-btn.go{ background:var(--accent); color:#fff; border-color:transparent }
.dock-btn.go:hover{ background:color-mix(in srgb,var(--accent) 85%,#fff) }
.dock-btn.stop{ background:var(--danger); color:#fff; border-color:transparent }
.dock-btn.stop:hover{ background:color-mix(in srgb,var(--danger) 85%,#fff) }
/* 手机上隐藏快捷栏（顶栏已有按钮，避免遮挡内容） */
@media (max-width:820px){
  .dock{ display:none }
  .view-inner{ padding-bottom:12px }
}

/* ── 4. 交互反馈：禁用态 / 危险按钮警示 ── */
.tbtn:disabled, .dock-btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none }
.tbtn.danger{ background:var(--danger); border-color:transparent; color:#fff }
.tbtn.danger:hover{ background:color-mix(in srgb,var(--danger) 88%,#fff) }

/* ── 5. 日志区质感：深色内嵌、圆角统一 ── */
.logs, .live-box{
  background:var(--paper-2);
  border:1px solid var(--surface-border);
  border-radius:var(--r-card);
}