/* 老八秘制小汉堡 · 在线挂机平台共用设计系统（F 型布局）
 *
 * 阅读动线按 F 型排：第一条横带（品牌 + 导航 + 主操作）→ 第二条横带（上下文 /
 * 统计 / 筛选）→ 左主栏 + 右侧栏。正文一律左对齐，行宽压在 65-75 字符内。
 *
 * 不外链任何 CDN 框架：服务器在国内、这个仓库也没有 CSS 构建步骤，所以下面这套
 * token 就是设计规范里那份 Tailwind 配置的等价手写实现（rounded-lg=8px、
 * gap-3/4/6=12/16/24、card p-4 md:p-6=16/24、section py-6 md:py-8 lg:py-12）。
 * static/index.html 自带一份同名 token（它那张样式表太大不便外链），改色板时
 * 两处要一起改。
 */
:root{
  color-scheme:light;
  /* 主色（深蓝黑）：顶栏、标题、正文 */
  --ink:#1a1a2e;--ink-2:#242440;--ink-3:#32324e;--ink-line:rgba(255,255,255,.1);
  /* 辅色：页面底色 */
  --paper:#f8f9fa;--surface:#fff;
  /* 文字：白底对比度都 ≥4.5:1；深色带上用 --on-ink */
  --text:#1a1a2e;--text-2:#4a5568;--text-3:#6b7280;--on-ink:#f2f4f8;--on-ink-2:#aab3c5;
  --line:#e5e7eb;--line-2:#d1d5db;--field:#f8f9fa;
  /* 四个强调色：蓝=可交互，青=正常，红=危险，金=等待。
     纯色只用于填充，配文字时换成 *-text 那档（纯色配白字只有 3-4:1）。 */
  --blue:#457b9d;--blue-dark:#3a6a89;--blue-soft:#eaf1f6;
  --teal:#2a9d8f;--teal-text:#1f7a6f;--teal-soft:#e7f6f3;
  --red:#e63946;--red-text:#c1121f;--red-soft:#fdecee;
  --gold:#e9c46a;--gold-text:#8a5300;--gold-soft:#fdf3dc;
  --r:8px;--r-sm:6px;
  --shadow-sm:0 1px 2px rgba(26,26,46,.05),0 1px 3px rgba(26,26,46,.06);
  --shadow-md:0 6px 16px rgba(26,26,46,.09);
  --ring:0 0 0 3px rgba(69,123,157,.2);
  --container:1152px;--pad:16px;
}
@media(min-width:768px){:root{--pad:24px}}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--paper);color:var(--text);font-family:"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;font-size:14px;line-height:1.6;text-align:left}
h1,h2,h3,h4{line-height:1.3;font-weight:700}
h1{font-size:22px}h2{font-size:18px}h3{font-size:15px}
p{line-height:1.7}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-dark)}
code,.mono{font-family:Consolas,"Microsoft YaHei",monospace;overflow-wrap:anywhere}
img{max-width:100%}
/* 正文行宽：65-75 个字符，超过就换行难跟 */
.prose{max-width:68ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 深色带上默认焦点圈太糊，换一档亮的 */
.tmf-top :focus-visible{outline-color:#8fb6cd}

/* ── 第一条横带：品牌 + 导航 + 主操作 ────────────────────────────────
   眼睛第一眼扫这里，所以最重要的动作（保存 / 新增 / 退出）都放在这条带的右端。
   .config-topbar 是同一条带的别名，配置页的测试按类名找它。 */
.tmf-top,.config-topbar{position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:1px solid var(--ink-line)}
.tmf-top-inner{max-width:var(--container);margin:0 auto;min-height:64px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px var(--pad)}
.tmf-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-right:4px}
.tmf-brand-logo{width:36px;height:36px;flex:0 0 36px;padding:2px;border-radius:var(--r-sm);background:#fff;object-fit:contain}
.tmf-brand-text{display:block;color:#fff;font-size:14px;font-weight:700;line-height:1.25}
/* 品牌名两行竖排：窄屏也不会把「老八秘制小汉堡」拆在奇怪的位置 */
.brand-name-line{display:block;white-space:nowrap}
.tmf-nav{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tmf-nav::-webkit-scrollbar{display:none}
.tmf-nav-item{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:0;border-radius:var(--r);background:transparent;color:var(--on-ink-2);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.tmf-nav-item:hover{color:#fff;background:var(--ink-3)}
.tmf-nav-item.active,.tmf-nav-item[aria-current=page]{color:#fff;background:var(--blue)}
.tmf-nav-icon{width:20px;height:20px;flex:0 0 20px;object-fit:contain}
.tmf-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.tmf-top-note{color:var(--on-ink-2);font-size:12px;line-height:1.5}
.tmf-top-note b{color:#fff;font-weight:600}

/* ── 第二条横带：上下文 / 统计 / 筛选 ─────────────────────────────── */
.tmf-sub{background:var(--surface);border-bottom:1px solid var(--line)}
.tmf-sub-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--pad)}
.tmf-sub-head{min-width:0;max-width:68ch}
.tmf-sub-head p{margin-top:6px;color:var(--text-2);font-size:13px}
.tmf-sub-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tmf-stats{display:flex;gap:8px;flex-wrap:wrap}
.tmf-stat{min-width:104px;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tmf-stat span{color:var(--text-3);font-size:11px}
.tmf-stat strong{color:var(--text);font-size:18px;font-variant-numeric:tabular-nums}
.tmf-stat.on strong{color:var(--teal-text)}
.tmf-stat.wait strong{color:var(--gold-text)}
.tmf-stat.fail strong{color:var(--red-text)}

/* ── 第三段：左主栏 + 右侧栏 ──────────────────────────────────────
   桌面 = 左主 + 右侧；平板 = 主栏通栏、侧栏落到下面；手机 = 单列。 */
.tmf-main{max-width:var(--container);margin:0 auto;padding:24px var(--pad) 48px}
@media(min-width:768px){.tmf-main{padding-top:32px}}
@media(min-width:1024px){.tmf-main{padding-top:48px}}
.tmf-cols{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:24px;align-items:start}
@media(max-width:1080px){.tmf-cols{grid-template-columns:minmax(0,1fr);gap:16px}}
.tmf-col-main,.tmf-col-side,.config-sidebar{min-width:0;display:grid;gap:16px;align-content:start}
/* ── 卡片：白底 + 8px 圆角 + 一层浅阴影，左对齐 ─────────────────────
   卡里不再套卡（嵌套卡片是禁用模式），内层分区只用分隔线和浅底。 */
.card{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm);text-align:left}
@media(min-width:768px){.card{padding:24px}}
.card-tight{padding:16px}
@media(min-width:768px){.card-tight{padding:16px}}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h2{font-size:16px}
.card-head h3{font-size:14px}
.card-head p{margin-top:4px;color:var(--text-2);font-size:12px;max-width:68ch}
.card-split{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.card-sub{padding:12px;border-radius:var(--r-sm);background:var(--paper)}

/* ── 按钮 ────────────────────────────────────────────────────────── */
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.btn:hover{border-color:var(--blue);color:var(--blue-dark)}
.btn:active{transform:scale(.97)}
.btn:disabled{cursor:not-allowed;opacity:.5;transform:none}
.btn-primary{border-color:var(--blue);background:var(--blue);color:#fff}
.btn-primary:hover{border-color:var(--blue-dark);background:var(--blue-dark);color:#fff}
.btn-danger{border-color:#eeb9be;color:var(--red-text)}
.btn-danger:hover{border-color:var(--red);background:var(--red-soft);color:var(--red-text)}
.btn-onink{border-color:rgba(255,255,255,.24);background:transparent;color:#fff}
.btn-onink:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.btn-sm{padding:0 10px;font-size:12px}
.btn-block{width:100%}

/* ── 表单 ────────────────────────────────────────────────────────── */
label,legend{display:block;color:var(--text-2);font-size:12px;font-weight:500;line-height:1.5}
input,select,textarea{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--field);color:var(--text);font:inherit;font-size:13px;transition:border-color .2s,box-shadow .2s,background-color .2s}
textarea{min-height:96px;padding:10px 12px;line-height:1.6;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;background:var(--surface);border-color:var(--blue);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.6}
input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:0 0 20px;padding:0;accent-color:var(--blue);cursor:pointer}
.field{display:grid;gap:6px;min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.hint{color:var(--text-3);font-size:11px;line-height:1.6;max-width:68ch}
/* 勾选行：整行 44px 可点，标签跟框对齐在第一行 */
.chk{min-height:44px;display:flex;align-items:center;gap:10px;color:var(--text);font-size:13px;cursor:pointer}
.chk span{min-width:0}
/* ── 开关：44px 高的整体可点区，状态用文字兜住（不只靠颜色） ───────── */
.switch-track{width:40px;height:22px;position:relative;display:block;flex:0 0 40px;border:1px solid var(--line-2);border-radius:999px;background:#cfd5dd;transition:background-color .2s,border-color .2s}
.switch-track::after{content:"";width:16px;height:16px;position:absolute;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(26,26,46,.3);transition:transform .2s}
input:checked+.switch-track{border-color:var(--blue);background:var(--blue)}
input:checked+.switch-track::after{transform:translateX(18px)}
input:focus-visible+.switch-track{outline:2px solid var(--blue);outline-offset:2px}

/* ── 状态药丸 ────────────────────────────────────────────────────── */
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.pill.on{color:var(--teal-text);background:var(--teal-soft)}
.pill.off{color:var(--text-2);background:#eef0f3}
.pill.fail{color:var(--red-text);background:var(--red-soft)}
.pill.wait{color:var(--gold-text);background:var(--gold-soft)}

/* ── 提示条 ──────────────────────────────────────────────────────── */
.msg{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.ok,.ok{color:var(--teal-text)}
.msg.err,.err{color:var(--red-text)}
.note{padding:12px;border-left:1px solid var(--line-2);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--paper);color:var(--text-2);font-size:12px;line-height:1.7;max-width:68ch}
.note.warn{border-left-color:var(--gold);background:var(--gold-soft);color:var(--gold-text)}

/* ── 表格：窄屏横向滚动，表头留在原位 ────────────────────────────── */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{position:sticky;top:0;z-index:1;color:var(--text-2);background:var(--paper);font-weight:600;white-space:nowrap}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:#fbfcfd}
tbody tr:last-child td{border-bottom:0}

/* ── 游戏图标：一律 64px 源图缩显，别再放大 ──────────────────────── */
.gicon{width:24px;height:24px;flex:0 0 24px;object-fit:contain}
.gicon-sm{width:18px;height:18px;flex-basis:18px}
.gicon-lg{width:32px;height:32px;flex-basis:32px}

/* 列表项悬停右移一点，暗示「可以点进去」 */
.list-row{transition:transform .15s,background-color .15s}
.list-row:hover{transform:translateX(4px)}

/* 关掉动画偏好：位移和缩放全部让位，只留颜色变化 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:active{transform:none}
  .list-row:hover{transform:none}
}