:root{
  --bg:#0f1420; --bg2:#161d2c; --card:#1a2233; --line:#263149;
  --txt:#e6ecf5; --dim:#8b98ad; --acc:#4f8cff; --acc2:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.6 "Segoe UI","Microsoft YaHei",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--dim);font-weight:400}
.hint{color:var(--dim);font-size:12px}

/* ---------- 登录 ---------- */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1000px 500px at 50% -10%,#1c2942,var(--bg))}
.login-card{width:360px;padding:34px 30px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center}
.login-logo{font-size:22px;font-weight:700;letter-spacing:1px}
.login-sub{color:var(--dim);margin:6px 0 22px;font-size:13px}
.login-input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--line);
  background:#0d1220;color:var(--txt);font-size:15px;letter-spacing:2px;text-align:center;outline:none}
.login-input:focus{border-color:var(--acc)}
.login-btn{width:100%;margin-top:14px;padding:12px;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(135deg,#4f8cff,#7c5cff);color:#fff;font-size:15px;font-weight:600}
.login-btn:hover{filter:brightness(1.1)}
.login-err{color:var(--bad);min-height:20px;margin-top:10px;font-size:13px}
.login-tip{color:var(--dim);font-size:12px;margin-top:6px}
.login-btn.ghost-login{background:transparent;border:1px solid var(--line);color:var(--txt);margin-top:0}
.login-btn.ghost-login:hover{border-color:var(--acc);filter:none}
.login-chal{margin-top:12px;padding:14px 10px;border-radius:8px;background:#0d1220;border:1px dashed var(--acc);
  font-size:20px;letter-spacing:6px;font-weight:600;color:#8fb4ff;user-select:all;word-break:break-all}

/* ---------- 框架 ---------- */
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:16px}
.brand-sub{color:var(--dim);font-size:12px;font-weight:400;margin-left:6px}
.topbar-right{display:flex;gap:8px;align-items:center}
.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:170px;flex:none;background:var(--bg2);border-right:1px solid var(--line);padding:12px 8px}
.nav{display:block;padding:9px 12px;border-radius:8px;color:var(--dim);cursor:pointer;font-size:14px;margin-bottom:2px}
.nav:hover{background:#1e2739;color:var(--txt)}
.nav.active{background:linear-gradient(135deg,#2b4a8f,#3b3b8f);color:#fff}
.content{flex:1;padding:18px;overflow:auto}
.view h2{margin:0 0 14px;font-size:18px}

/* 二级标签（2026-11-08 页签合并：同类页收进一个页签） */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.subtabs .btn{background:transparent;color:var(--dim)}
.subtabs .btn:hover{color:#fff;border-color:var(--acc)}
.subtabs .btn.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
/* 子页标题（原理是原来的 h2，合并后降一级避免和父页标题撞车） */
.subpane h3{margin:0 0 12px;font-size:15px;font-weight:600;color:#c8d3e6}

/* ---------- 组件 ---------- */
.btn{padding:7px 14px;border:1px solid var(--line);background:#243049;color:var(--txt);
  border-radius:7px;cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--acc);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.ok{background:#1d4ed8;border-color:#1d4ed8}
.btn.danger{background:#7f1d1d;border-color:#7f1d1d}
.inp{padding:7px 10px;border:1px solid var(--line);background:#0d1220;color:var(--txt);
  border-radius:7px;outline:none;font-size:13px}
.inp:focus{border-color:var(--acc)}
.sel{padding:7px 10px;border:1px solid var(--line);background:#0d1220;color:var(--txt);
  border-radius:7px;outline:none;font-size:13px;max-width:260px}
.chk{display:flex;align-items:center;gap:5px;color:var(--dim);font-size:13px}
.searchbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.searchbar .inp{flex:1;min-width:220px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.panel-h{font-weight:600;margin-bottom:10px;color:#cdd8e8;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.card .n{font-size:24px;font-weight:700;color:#fff}
.card .t{color:var(--dim);font-size:12px;margin-top:2px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.kv{display:flex;justify-content:space-between;background:#141c2b;border:1px solid var(--line);
  border-radius:7px;padding:7px 10px;font-size:13px}
.kv b{color:#ffd166;font-weight:600}

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{color:var(--dim);font-weight:500;background:#141c2b;position:sticky;top:0}
.tbl tr:hover td{background:#1b2437}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;color:#ffd166}
.tbl .op{white-space:nowrap}
.empty{color:var(--dim);padding:26px;text-align:center}
.pre{background:#0d1220;border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;
  max-height:60vh;font-size:12px;color:#c8d3e6;margin:0}

.split{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.list-panel{max-height:70vh;overflow:auto}
.detail-panel{min-height:400px}
.list .item{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.list .item:hover{background:#1e2739}
.list .item.on{background:#24406f}
.list .item .t{font-weight:600}
.list .item .s{color:var(--dim);font-size:12px;word-break:break-all}

.detail .sec{margin-bottom:14px}
.detail .sec-h{font-weight:600;color:#cdd8e8;margin-bottom:6px;font-size:13px;display:flex;justify-content:space-between}
.row{display:flex;align-items:center;gap:6px;padding:5px 7px;border-bottom:1px dashed #223;flex-wrap:wrap}
.row:hover{background:#1b2437}
.row .k{width:150px;flex:none;color:#b9c6da}
.row .k small{color:var(--dim);font-size:11px}
.row .v{width:110px;text-align:right;color:#ffd166;font-variant-numeric:tabular-nums}
.row .ops{margin-left:auto;display:flex;gap:5px;align-items:center}
.row input.n{width:100px;padding:3px 6px;border:1px solid var(--line);background:#0d1220;color:var(--txt);border-radius:5px;font-size:12px;text-align:right}
.row input.t{width:180px;text-align:left}
.ident{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;padding:10px;background:#141c2b;border:1px solid var(--line);border-radius:8px}
.ident .code{font-family:Consolas,monospace;font-size:12px;color:#8fd3ff;word-break:break-all}
.exec{display:flex;gap:8px;margin-top:6px}
.exec .inp{flex:1}
.out{white-space:pre-wrap;background:#0d1220;border:1px solid var(--line);border-radius:8px;
  padding:10px;margin-top:8px;font-size:13px;max-height:220px;overflow:auto;color:#c8d3e6}
.tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;background:#263149;color:#a9b7cc;margin-left:6px}
.tag.ok{background:#14532d;color:#86efac}
.tag.st{background:#3b2f63;color:#c4b5fd}
.tag.warn{background:#5b3a12;color:#fcd34d}
/* 图片素材 */
.imggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.imgcell{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0f1117}
.imgcell img{display:block;width:100%;height:96px;object-fit:cover;background:#151821}
.imgcell .cap{padding:5px 7px;font-size:11px;color:var(--muted);display:flex;gap:4px;align-items:baseline}
.imgcell .cap span{margin-left:auto;color:#6b7280;flex:none}
.imgcell:hover{border-color:var(--acc)}
.imgmiss{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:220px;overflow:auto}
.chip{font-size:11px;padding:2px 7px;border-radius:10px;background:#2a1f1f;color:#fca5a5;border:1px solid #4b2c2c}
.tag.num{background:#123a5b;color:#7dd3fc}
.tag.txt{background:#4a2f5e;color:#e9b8ff}
.tag.num,.tag.txt{font-size:10px;padding:0 5px;vertical-align:middle}

/* ---------- 玩家数据（按游戏分类） ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.tab{padding:6px 14px;border:1px solid var(--line);background:#141c2b;color:#b9c6da;
  border-radius:8px 8px 0 0;cursor:pointer;font-size:13px;font-weight:600}
.tab:hover{background:#1b2437;color:#fff}
.tab.on{background:#24406f;color:#fff;border-color:#3b82f6}
.grp{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:#111827;overflow:hidden}
.grp>summary{cursor:pointer;padding:7px 10px;background:#151d2e;font-size:13px;
  display:flex;align-items:center;gap:8px;list-style:none;flex-wrap:wrap}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:hover{background:#1b2437}
.grp .gi{font-size:15px}
.grp .gbody{padding:2px 8px 8px}
.grp .gbody .row{border-bottom:1px dashed #202b40}
.grp .gbody .empty{padding:6px 2px;font-size:12px}
.row.off{opacity:.55}
.row.off .v{color:var(--dim)}
.row.add{background:#0f1727;border-bottom:none}
.row.add .k{color:#7dd3fc}
.grp .gbody .row .k{width:200px}
select.n{padding:3px 6px;border:1px solid var(--line);background:#0d1220;color:var(--txt);
  border-radius:5px;font-size:12px;max-width:180px}

.toast{position:fixed;right:18px;bottom:18px;background:#111827;border:1px solid var(--line);
  padding:10px 16px;border-radius:8px;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:default;max-width:420px}
.toast.toast-err{border-color:#b91c1c;background:#2a1215;color:#fca5a5;cursor:pointer}
.pager{display:flex;gap:8px;align-items:center;margin:10px 0}
@media (max-width:900px){.split{grid-template-columns:1fr}.sidebar{width:120px}}

/* ---------- 免@设置 ---------- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.switch-t{font-size:16px;font-weight:600}
.btn.big{padding:12px 28px;font-size:15px;font-weight:600}
.steps{margin:0;padding-left:20px;line-height:1.9;color:#c8d3e6}
.steps code{background:#0d1220;padding:1px 6px;border-radius:4px;color:#8fd3ff}
.diag{margin-top:10px;padding:10px 12px;border-radius:8px;background:#141c2b;border:1px solid var(--line);font-size:13px;color:#c8d3e6}
.diag.good{border-color:#14532d;background:#0f2418;color:#86efac}
.diag.bad{border-color:#7f1d1d;background:#2a1215;color:#fca5a5}
.opt{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.grouplist{display:flex;flex-wrap:wrap;gap:4px}

/* 校验失败红框 */
.inp.err { border-color: #e74c3c; background: #fff5f5; }
.inp.err:focus { border-color: #c0392b; }

/* ================= 移动端适配 ================= */
@media (max-width: 900px) {
  .topbar { padding: 0 10px; }
  .brand-sub { display: none; }
  .layout { flex-direction: column; }
  /* 侧栏导航 → 顶部横向滚动条 */
  .sidebar { width: 100%; display: flex; overflow-x: auto; padding: 8px; border-right: none; border-bottom: 1px solid var(--line); }
  .nav { white-space: nowrap; margin-bottom: 0; padding: 8px 12px; }
  .content { padding: 12px; }
  /* 双栏（列表+详情）改上下堆叠 */
  .split { grid-template-columns: 1fr; }
  .cards, .kv-grid, .imggrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* 表格横向滚动（外层已有 .tbl-wrap 的直接生效，其余兜底） */
  .panel { overflow-x: auto; }
  .row .k { width: auto; min-width: 110px; }
  .row .ops { margin-left: 0; width: 100%; }
  .exec { flex-wrap: wrap; }
  .exec .inp { flex: 1 1 140px; min-width: 120px; }
  .ident { flex-direction: column; align-items: stretch; }
  .ident > div[style*="margin-left"] { margin-left: 0 !important; }
  input.inp.t, .exec .inp[style*="width:420px"] { width: 100% !important; }
  h2 { font-size: 17px; }
}
@media (max-width: 600px) {
  .content { padding: 8px; }
  .panel { padding: 10px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .searchbar .inp { min-width: 120px; }
  .topbar { height: 48px; }
  .layout { min-height: calc(100vh - 48px); }
}

/* ---- 新玩家漏斗 ---- */
.fn-row{display:grid;grid-template-columns:150px 1fr 60px 120px;align-items:center;gap:10px;margin:6px 0;font-size:13px}
.fn-name{color:var(--dim)}
.fn-bar{background:#141c2b;border:1px solid var(--line);border-radius:6px;height:16px;overflow:hidden}
.fn-fill{height:100%;background:linear-gradient(90deg,#2563eb,#38bdf8);border-radius:5px}
.fn-n{text-align:right;color:#ffd166;font-weight:600}
.fn-rate{color:var(--dim);font-size:12px}
@media (max-width:768px){
  .fn-row{grid-template-columns:110px 1fr auto;grid-template-areas:"name bar n" ". rate rate";row-gap:2px}
  .fn-name{grid-area:name}.fn-bar{grid-area:bar}.fn-n{grid-area:n}.fn-rate{grid-area:rate}
}

/* ================= 移动端补充（本轮新增页面/控件） ================= */
@media (max-width: 900px) {
  /* 触控目标够大：手机上按钮不小于 34px 高，避免误点相邻项 */
  .btn { min-height: 34px; padding: 7px 12px; }
  .btn.sm { min-height: 30px; }
  /* 设置类表单：整行占满，标签不再挤在一行 */
  .opt { flex-direction: column; align-items: stretch; }
  .opt > span { width: auto !important; display: block !important; margin-bottom: 4px; }
  .opt .inp { width: 100% !important; max-width: none; }
  /* 新增页（主人设置/资产巡检/数据备份/活动模式）：开关行改为上下堆叠 */
  .switch-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .switch-row > .btn { width: 100%; }
  /* 详情折叠块长标题换行，不吃掉内容 */
  details > summary { flex-wrap: wrap; row-gap: 4px; }
  /* 代码块/长文本（试跑结果、JSON）不要横向溢出 */
  pre, textarea.pre, .out { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
  /* 表格再挤也保持可读 */
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 6px 7px; }
  /* 数值配置表单：说明列在手机上折到下一行 */
  #gNumWrap .tbl td:nth-child(4) { min-width: 160px; }
}
@media (max-width: 600px) {
  .fn-row { grid-template-columns: 100px 1fr auto; }
  .exec > .btn { flex: 1 1 100%; }
}

/* 兑换码卡片脏标记：改了没保存的卡标题挂橙点 */
details.grp.dirty > summary > b::after {
  content: '●';
  color: #f59e0b;
  margin-left: 6px;
  font-size: 12px;
  vertical-align: 2px;
}

/* ---------- 手机端侧边栏（2026-11-08）----------
   17 个页签平铺在手机上要滚两屏，且占掉 1/3 屏幕宽度。
   改成抽屉：默认收起，点左上角 ☰ 滑出，点空白处或选中页签后自动收起。 */
.nav-toggle{display:none;background:transparent;border:0;color:var(--txt, #e6edf6);font-size:20px;line-height:1;padding:6px 8px;cursor:pointer;border-radius:6px}
.nav-toggle:hover{background:#1e2739}
.nav-mask{display:none}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .layout { position: relative; }
  .sidebar {
    position: fixed; top: 56px; bottom: 0; left: 0; width: 200px; z-index: 60;
    transform: translateX(-100%); transition: transform .18s ease;
    overflow-y: auto; box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-mask {
    display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45); z-index: 55;
  }
  body.nav-open .nav-mask { display: block; }
  /* 手机上表格横向可拖，别把整页撑宽 */
  .content { padding: 10px; overflow-x: hidden; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel { padding: 10px; }
  /* 顶栏在手机上会很挤，隐藏副标题已经做了，这里再把「刷新」缩一档 */
  .topbar .btn { padding: 6px 10px; font-size: 12px; }
}
