:root{
  --bg:#0F172A; --card:#1B2336; --card-2:#182032; --muted:#272F42;
  --fg:#F8FAFC; --fg-dim:#94A3B8; --line:#475569; --line-soft:rgba(148,163,184,.22);
  --primary:#334155; --accent:#22C55E; --accent-dim:rgba(34,197,94,.14);
  --danger:#EF4444; --danger-dim:rgba(239,68,68,.12); --warn:#F59E0B;
  --radius:10px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --mono:"Cascadia Mono","Fira Code",Consolas,"Courier New",monospace;
  --sans:"Fira Sans",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 15% -10%,rgba(34,197,94,.07),transparent 60%),
             radial-gradient(900px 500px at 110% 10%,rgba(56,189,248,.06),transparent 55%),
             var(--bg);
  color:var(--fg); font:14px/1.55 var(--sans); min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--fg);background:var(--muted);
  border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;outline:none}
input:focus,select,textarea:focus{border-color:var(--accent)}
input::placeholder{color:#64748B}
.hidden{display:none !important}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  height:56px;padding:0 24px;background:rgba(15,23,42,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.2px}
.brand svg{width:22px;height:22px;color:var(--accent)}
.brand small{color:var(--fg-dim);font-weight:400;font-size:12px}
.topbar .spacer{flex:1}
.who{color:var(--fg-dim);font-size:13px}
.who b{color:var(--fg);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-soft);
  background:var(--muted);border-radius:8px;padding:7px 12px;transition:.15s}
.btn:hover{border-color:var(--line);background:#2C3650}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#06210F;font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:rgba(239,68,68,.45);color:#FCA5A5}
.btn.danger:hover{background:var(--danger-dim)}
.btn.sm{padding:4px 9px;font-size:12.5px;border-radius:7px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px}

.wrap{max-width:none;margin:0 auto;padding:20px clamp(16px,2.4vw,40px)}
.page-head{display:flex;align-items:flex-end;gap:16px;margin:6px 0 18px}
.page-head h1{font-size:20px;margin:0;font-weight:600;letter-spacing:.2px}
.page-head .sub{color:var(--fg-dim);font-size:13px}
.page-head .spacer{flex:1}

/* 卡片/统计 */
.grid{display:grid;gap:14px}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--card);
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px 16px}
.stat .k{color:var(--fg-dim);font-size:12.5px}
.stat .v{font:600 22px/1.3 var(--mono);margin-top:4px}
.stat .v.green{color:#4ADE80}

/* 表格 */
.panel{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:0}
thead th{position:sticky;top:0;background:var(--card-2);color:var(--fg-dim);
  font-weight:500;font-size:12.5px;text-align:left;padding:11px 12px;
  border-bottom:1px solid var(--line-soft);white-space:nowrap}
tbody td{padding:11px 12px;border-bottom:1px solid rgba(148,163,184,.10);
  vertical-align:top;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
tbody tr:hover{background:rgba(148,163,184,.05)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono);text-align:right;white-space:nowrap}
td.idx,th.idx{width:46px;color:var(--fg-dim);font-family:var(--mono);
  text-align:right;white-space:nowrap}
td.ops{text-align:right;white-space:nowrap}
td.ops .btn{margin-left:6px}
td.mono{font-family:var(--mono);white-space:nowrap}
.cell-dim{color:var(--fg-dim)}
.mono{font-family:var(--mono)}
.res4{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.res{display:flex;flex-direction:column;line-height:1.3}
.res .top{color:var(--fg);font-size:12px;font-weight:600;white-space:nowrap}
.res .bot{color:var(--accent);font-size:11px;white-space:nowrap}
.acc{color:var(--accent);font-weight:600}
.xy{color:#F59E0B}
.small{font-size:11px;line-height:1.35}
.cell-shield{font-size:10.5px;line-height:1.45}
.qbox{display:grid;gap:2px;font-size:11.5px;line-height:1.45}
.qbox .ql{color:var(--fg-dim);margin-right:5px}
.qok{color:var(--accent)}
.qgo{color:#F59E0B}
.cell-note{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
td.ops .btn{padding:3px 7px;margin-left:4px}
/* 用户端账号表：固定列宽 + 换行，宽屏铺满、不需要横滑 */
#view-main table{table-layout:fixed;width:100%}
#view-main table th:nth-child(1){width:4%}
#view-main table th:nth-child(2){width:5.8%}
#view-main table th:nth-child(3){width:5.5%}
#view-main table th:nth-child(4){width:9%}
#view-main table th:nth-child(5){width:3%}
#view-main table th:nth-child(6){width:10.5%}
#view-main table th:nth-child(7){width:4%}
#view-main table th:nth-child(8){width:4%}
#view-main table th:nth-child(9){width:4.2%}
#view-main table th:nth-child(10){width:4.2%}
#view-main table th:nth-child(11){width:4.2%}
#view-main table th:nth-child(12){width:4.2%}
#view-main table th:nth-child(13){width:3%}
#view-main table th:nth-child(14){width:12%}
#view-main table th:nth-child(15){width:3.5%}
#view-main table th:nth-child(16){width:7.5%}
#view-main table th:nth-child(17){width:11%}
@media (max-width:1200px){
  #view-main table{table-layout:auto;min-width:1180px}
}

/* 手机端：账号表改为卡片（不横向滚动） */
@media (max-width:760px){
  .wrap{padding:14px}
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head .spacer{display:none}
  .page-head h1{font-size:18px}
  #view-main .panel{background:transparent;border:0;box-shadow:none;overflow:visible}
  #view-main .table-scroll{overflow:visible}
  #view-main table{display:block;width:100%;min-width:0;table-layout:auto}
  #view-main thead{display:none}
  #view-main tbody{display:block}
  #view-main tbody tr{display:grid;grid-template-columns:repeat(4,1fr);
    grid-template-areas:"phone phone phone status" "role role role role"
      "level level shield shield" "diamond diamond soldier soldier"
      "food wood power iron" "tech tech queue queue"
      "note note note note" "last last last last" "ops ops ops ops";
    gap:8px 10px;background:var(--card);border:1px solid var(--line-soft);
    border-radius:12px;padding:14px;margin-bottom:12px}
  #view-main tbody tr:hover{background:var(--card)}
  #view-main tbody td{display:block;padding:0;border:0;font-size:13px}
  #view-main tbody td:nth-child(1){display:none}
  #view-main tbody td:nth-child(2){grid-area:phone;font:600 15px var(--mono)}
  #view-main tbody td:nth-child(3){grid-area:status;justify-self:end;align-self:start}
  #view-main tbody td:nth-child(4){grid-area:role}
  #view-main tbody td:nth-child(5){grid-area:level;text-align:left}
  #view-main tbody td:nth-child(6){grid-area:shield;white-space:normal}
  #view-main tbody td:nth-child(7){grid-area:diamond;text-align:left}
  #view-main tbody td:nth-child(8){grid-area:soldier;text-align:left}
  #view-main tbody td:nth-child(9){grid-area:food}
  #view-main tbody td:nth-child(10){grid-area:wood}
  #view-main tbody td:nth-child(11){grid-area:power}
  #view-main tbody td:nth-child(12){grid-area:iron}
  #view-main tbody td:nth-child(13){grid-area:tech;text-align:left}
  #view-main tbody td:nth-child(14){grid-area:queue}
  #view-main tbody td:nth-child(15){grid-area:note}
  #view-main tbody td:nth-child(16){grid-area:last}
  #view-main tbody td:nth-child(17){grid-area:ops;justify-self:end;
    border-top:1px solid var(--line-soft);padding-top:10px;width:100%}
  #view-main tbody td:nth-child(5)::before,
  #view-main tbody td:nth-child(6)::before,
  #view-main tbody td:nth-child(7)::before,
  #view-main tbody td:nth-child(8)::before,
  #view-main tbody td:nth-child(9)::before,
  #view-main tbody td:nth-child(10)::before,
  #view-main tbody td:nth-child(11)::before,
  #view-main tbody td:nth-child(12)::before,
  #view-main tbody td:nth-child(13)::before,
  #view-main tbody td:nth-child(14)::before,
  #view-main tbody td:nth-child(15)::before,
  #view-main tbody td:nth-child(16)::before{color:var(--fg-dim);font-size:12px;
    margin-right:6px}
  #view-main tbody td:nth-child(5)::before{content:"等级"}
  #view-main tbody td:nth-child(6)::before{content:"盾迁"}
  #view-main tbody td:nth-child(7)::before{content:"钻石"}
  #view-main tbody td:nth-child(8)::before{content:"兵力"}
  #view-main tbody td:nth-child(9)::before{content:"生肉"}
  #view-main tbody td:nth-child(10)::before{content:"木材"}
  #view-main tbody td:nth-child(11)::before{content:"电力"}
  #view-main tbody td:nth-child(12)::before{content:"铁矿"}
  #view-main tbody td:nth-child(13)::before{content:"科技"}
  #view-main tbody td:nth-child(14)::before{content:"队列"}
  #view-main tbody td:nth-child(15)::before{content:"备注"}
  #view-main tbody td:nth-child(16)::before{content:"动态"}
  #view-main tbody tr[data-task] td:nth-child(4)::before{content:"区服";color:var(--fg-dim);
    font-size:12px;margin-right:6px}
  #view-main tbody tr[data-task] td:nth-child(6),
  #view-main tbody tr[data-task] td:nth-child(7),
  #view-main tbody tr[data-task] td:nth-child(8),
  #view-main tbody tr[data-task] td:nth-child(9),
  #view-main tbody tr[data-task] td:nth-child(10),
  #view-main tbody tr[data-task] td:nth-child(11),
  #view-main tbody tr[data-task] td:nth-child(12),
  #view-main tbody tr[data-task] td:nth-child(13),
  #view-main tbody tr[data-task] td:nth-child(14),
  #view-main tbody tr[data-task] td:nth-child(15),
  #view-main tbody tr[data-task] td:nth-child(16){display:none}
  #view-main tbody tr[data-task] td:nth-child(5){display:block;grid-area:last}
  #view-main tbody tr[data-task]{grid-template-areas:"phone phone phone status" "role role role role" "last last last last" "ops ops ops ops"}
  .stats{grid-template-columns:repeat(2,1fr)}
  .login-card{margin-top:6vh;padding:20px}
  .drawer .body{padding:14px}
  .modal .body{padding:14px}
}
.empty{padding:46px 20px;text-align:center;color:var(--fg-dim)}
.empty b{display:block;color:var(--fg);font-weight:500;margin-bottom:6px}

/* 徽章 */
.badge{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:12px;border:1px solid var(--line-soft);color:var(--fg-dim)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:#64748B}
.badge.on{color:#86EFAC;background:var(--accent-dim);border-color:rgba(34,197,94,.35)}
.badge.on .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.badge.off .dot{background:#64748B}
.badge.err{color:#FCA5A5;background:var(--danger-dim);border-color:rgba(239,68,68,.4)}
.badge.err .dot{background:var(--danger)}
.badge.wait{color:#FCD34D;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
.badge.wait .dot{background:var(--warn)}

/* 表单/模态/抽屉 */
.mask{position:fixed;inset:0;background:rgba(2,6,23,.62);backdrop-filter:blur(4px);
  z-index:40;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.modal header{display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--line-soft)}
.modal header h3{margin:0;font-size:16px;font-weight:600}
.modal header .x{margin-left:auto;background:none;border:0;color:var(--fg-dim);font-size:18px}
.modal .body{padding:18px;display:grid;gap:12px}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;
  border-top:1px solid var(--line-soft)}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;color:var(--fg-dim)}
.field .hint{font-size:12px;color:#64748B}
.field .err{font-size:12.5px;color:#FCA5A5}
.login-card{width:100%;max-width:400px;margin:10vh auto 0;background:var(--card);
  border:1px solid var(--line-soft);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.login-card h1{font-size:19px;margin:0 0 4px}
.login-card .sub{color:var(--fg-dim);margin-bottom:20px;font-size:13px}
.login-card .body{display:grid;gap:14px}
.login-card .btn.primary{justify-content:center;padding:10px}

/* 抽屉 */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);z-index:50;
  background:var(--card);border-left:1px solid var(--line-soft);box-shadow:var(--shadow);
  display:flex;flex-direction:column;animation:slidein .18s ease-out}
@keyframes slidein{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer header{display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--line-soft)}
.drawer header h3{margin:0;font-size:15.5px}
.drawer header .x{margin-left:auto;background:none;border:0;color:var(--fg-dim);font-size:19px}
.drawer .body{flex:1;overflow:auto;padding:16px 18px}
.drawer .foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;
  border-top:1px solid var(--line-soft);background:var(--card-2)}
.group{border:1px solid var(--line-soft);border-radius:10px;margin-bottom:12px;overflow:hidden}
.group>summary{cursor:pointer;list-style:none;padding:11px 14px;background:var(--card-2);
  font-weight:500;display:flex;align-items:center;gap:8px}
.group>summary::-webkit-details-marker{display:none}
.group>summary .caret{color:var(--fg-dim);margin-left:auto;transition:.15s}
.group[open]>summary .caret{transform:rotate(90deg)}
.group .items{padding:8px 14px 14px;display:grid;gap:12px}
.row-field{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.row-field .lab{font-size:13px}
.row-field .lab .hint{display:block;color:#64748B;font-size:11.5px;margin-top:2px}
.row-field input[type=number]{width:96px}
.row-field select{min-width:130px}
.switch{position:relative;display:inline-block;width:40px;height:22px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#334155;border-radius:999px;transition:.15s}
.switch .sl:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#CBD5E1;border-radius:50%;transition:.15s}
.switch input:checked+.sl{background:var(--accent)}
.switch input:checked+.sl:before{transform:translateX(18px);background:#052e16}
.multi{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-soft);
  border-radius:999px;padding:4px 10px;font-size:12.5px;color:var(--fg-dim);cursor:pointer}
.chip input{display:none}
.chip.on{border-color:rgba(34,197,94,.45);background:var(--accent-dim);color:#BBF7D0}
.drawer .msg{font-size:12.5px;color:var(--fg-dim)}
.drawer .msg.ok{color:#86EFAC}
.drawer .msg.bad{color:#FCA5A5}
details.raw{margin-top:8px}
details.raw summary{cursor:pointer;font-size:12.5px;color:var(--fg-dim)}
details.raw textarea{width:100%;min-height:140px;margin-top:8px;font-family:var(--mono);font-size:12.5px}

/* 事件列表 */
.events{display:grid;gap:0;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.events .ev{display:grid;grid-template-columns:132px 1fr;gap:10px;padding:9px 12px;
  border-bottom:1px solid rgba(148,163,184,.1);font-size:12.5px}
.events .ev:last-child{border-bottom:0}
.events .ts{color:#64748B;font-family:var(--mono)}
.events .ok{color:#86EFAC}
.events .bad{color:#FCA5A5}

/* 管理端 Tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.tab{background:none;border:0;padding:9px 14px;color:var(--fg-dim);border-bottom:2px solid transparent}
.tab.on{color:var(--fg);border-bottom-color:var(--accent)}
.notice{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);
  color:#FCD34D;padding:10px 12px;border-radius:9px;font-size:12.5px;margin-bottom:14px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:#0B1220;border:1px solid var(--line-soft);border-radius:10px;
  padding:10px 16px;box-shadow:var(--shadow);font-size:13px;opacity:0;pointer-events:none;
  transition:.2s}
.toast.show{opacity:1}
.toast.bad{border-color:rgba(239,68,68,.5);color:#FCA5A5}
.toast.ok{border-color:rgba(34,197,94,.45);color:#BBF7D0}

@media (max-width:768px){
  .topbar{padding:0 14px;gap:10px}
  .brand small{display:none}
  .wrap{padding:14px}
  .page-head{flex-wrap:wrap;gap:10px}
  .drawer{width:100vw}
  .who{display:none}
  table{min-width:820px}
}

/* 设置抽屉 tabs */
.stabs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);margin:8px 0}
.stab{background:var(--muted);border:1px solid var(--line-soft);border-radius:999px;
  padding:5px 12px;color:var(--fg-dim);white-space:nowrap;font-size:12.5px;cursor:pointer}
.stab.on{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45);color:#BBF7D0}
.spane{display:grid;gap:10px;padding:6px 2px}