:root{--primary:#3B82F6;--primary-dark:#2563EB;--primary-light:#EFF6FF;--success:#10B981;--warning:#F59E0B;--danger:#EF4444;--bg:#F5F7FA;--card:#fff;--tm:#111827;--tb:#4B5563;--tmu:#9CA3AF;--bd:#E5E7EB;--bdl:#F3F4F6;--r-card:12px}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tb);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}
svg.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.auth{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.authcard{width:100%;max-width:920px;min-height:560px;background:#fff;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.1);display:flex;overflow:hidden}
.col-form{width:58%;padding:40px 44px;display:flex;flex-direction:column}
.col-art{width:42%;background:linear-gradient(155deg,#6366F1,#3B82F6);position:relative;overflow:hidden;padding:32px 28px;display:flex;flex-direction:column;color:#fff}
.wave{position:absolute;left:-25%;bottom:-8%;width:150%;opacity:.14}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.brand .mk{width:36px;height:36px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center}
.brand b{font-size:15px;color:var(--tm)}
.brand .ver{font-size:10px;color:var(--primary);background:var(--primary-light);padding:1px 6px;border-radius:999px;font-weight:600}
.auth h2{font-size:26px;color:var(--tm);font-weight:700}
.auth .desc{font-size:13px;color:var(--tmu);margin:6px 0 22px}
.fi{margin-bottom:14px}
.fi label{display:block;font-size:13px;color:var(--tb);margin-bottom:6px;font-weight:500}
.inp{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--bd);border-radius:8px;background:#fff;width:100%}
.inp:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.inp input{flex:1;border:0;background:transparent;font-size:14px;color:var(--tm);min-width:0}
.btn{height:42px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:0 16px;box-shadow:0 4px 14px rgba(59,130,246,.28)}
.btn:hover{background:var(--primary-dark)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--tb);border:1px solid var(--bd);box-shadow:none}
.btn.sm{height:30px;font-size:12.5px;padding:0 12px;box-shadow:none}
.btn.danger{background:#FEF2F2;color:var(--danger);border:1px solid #FECACA;box-shadow:none}
.row-links{display:flex;justify-content:space-between;margin-top:16px;font-size:13px;color:var(--tmu)}
.row-links a{color:var(--primary);cursor:pointer}
.legal{margin-top:auto;padding-top:16px;font-size:11px;color:var(--tmu);border-top:1px solid var(--bdl);display:flex;justify-content:space-between}
.art-t{font-size:15px;font-weight:600;position:relative;z-index:2}
.art-s{font-size:12px;opacity:.82;margin-top:8px;line-height:1.8;position:relative;z-index:2}
.art-list{margin-top:auto;display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}
.art-li{display:flex;align-items:center;gap:8px;font-size:12.5px;background:rgba(255,255,255,.16);border-radius:8px;padding:9px 11px}
.art-badge{margin-top:14px;background:#fff;border-radius:10px;padding:10px 12px;color:var(--tm);position:relative;z-index:2;display:flex;align-items:center;gap:10px}
.art-badge .k{font-size:10.5px;color:var(--tmu)}
.art-badge .v{font-size:13.5px;font-weight:700}
.steps{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.stp{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tmu)}
.stp .n{width:20px;height:20px;border-radius:50%;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:11px}
.stp.on{color:var(--primary)}
.stp.on .n{background:var(--primary);border-color:var(--primary);color:#fff}
.stp-bar{flex:1;height:1px;background:var(--bd)}
.msg{margin-top:12px;font-size:13px;min-height:18px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--success)}
.shell{display:flex;height:100%}
.side{width:200px;flex:0 0 200px;background:#fff;border-right:1px solid var(--bdl);display:flex;flex-direction:column;padding:16px 12px}
.slogo{display:flex;align-items:center;gap:9px;padding:2px 6px 18px}
.slogo .mk{width:30px;height:30px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center}
.slogo b{font-size:13.5px;color:var(--tm)}
.slogo .ver{font-size:9.5px;color:var(--primary);background:var(--primary-light);padding:1px 5px;border-radius:999px;margin-left:auto;font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--tb);cursor:pointer}
.nav a:hover{background:#F7F9FC}
.nav a.on{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(59,130,246,.28)}
.nav .grp{font-size:10px;color:var(--tmu);padding:14px 10px 6px}
.nav a .b{font-size:9.5px;background:var(--danger);color:#fff;border-radius:999px;padding:0 5px;margin-left:auto;font-weight:600}
.sfoot{margin-top:auto;border-top:1px solid var(--bdl);padding-top:10px;display:flex;align-items:center;gap:9px;cursor:pointer}
.avt{width:30px;height:30px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.sfoot .nm{font-size:12.5px;color:var(--tm);font-weight:500}
.sfoot .st{font-size:10.5px;color:var(--tmu)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.hdr{height:56px;background:#fff;border-bottom:1px solid var(--bdl);display:flex;align-items:center;gap:12px;padding:0 22px;flex:0 0 56px}
.search{display:flex;align-items:center;gap:7px;background:var(--bg);border-radius:8px;padding:7px 12px;width:250px;color:var(--tmu);font-size:12.5px}
.search input{border:0;background:transparent;flex:1;font-size:12.5px;color:var(--tm);min-width:0}
.hdr .rt{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--tb)}
.body{flex:1;padding:18px 22px;overflow:auto}
.pt{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.pt h3{font-size:16px;color:var(--tm);font-weight:700}
.pt .sub{font-size:12px;color:var(--tmu);margin-top:3px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.cd{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.sc{padding:12px 14px}
.sc .t{font-size:12px;color:var(--tmu);display:flex;align-items:center;justify-content:space-between}
.sc .icw{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.sc .v{font-size:22px;font-weight:700;color:var(--tm);margin-top:6px;line-height:1.15}
.sc .v i{font-size:11px;font-style:normal;color:var(--tmu);font-weight:400;margin-left:3px}
.sc .s{font-size:10.5px;color:var(--tmu);margin-top:3px}
.accs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ac{padding:14px}
.ac .top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ac .av{width:32px;height:32px;border-radius:9px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto}
.ac .nm{font-size:13.5px;color:var(--tm);font-weight:600}
.ac .sb{font-size:11px;color:var(--tmu);margin-top:1px}
.ac .top>div{min-width:0;overflow:hidden}
.ac .nm,.ac .sb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac .avimg{width:38px;height:38px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#F3F4F6;border:1px solid var(--bdl);cursor:pointer}
.ac .avimg:hover{border-color:var(--primary)}
.pill{font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:500;white-space:nowrap}
.pill.ok{background:#ECFDF5;color:var(--success)}
.pill.info{background:var(--primary-light);color:var(--primary)}
.pill.warn{background:#FFFBEB;color:var(--warning)}
.pill.off{background:#F3F4F6;color:var(--tmu)}
.pill.bad{background:#FEF2F2;color:var(--danger)}
.dot{width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:1px}
.ipad{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tmu);padding:6px 0;border-bottom:1px solid var(--bdl)}
.ipad b{color:var(--tb);font-family:ui-monospace,Consolas,monospace;font-weight:600}
.days{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:11.5px;color:var(--tb)}
.bar{flex:1;height:4px;border-radius:999px;background:#F3F4F6;overflow:hidden;min-width:40px}
.bar i{display:block;height:100%;border-radius:999px;background:var(--primary)}
.bar i.warn{background:var(--warning)}
.link{color:var(--primary);cursor:pointer;font-weight:500}
.ops7{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.op{height:28px;border-radius:6px;border:1px solid var(--bd);background:#fff;color:var(--tb);font-size:11.5px;cursor:pointer}
.op:hover{background:#F9FAFB}
.op.pri{background:var(--primary-light);border-color:#BFDBFE;color:var(--primary);font-weight:500}
.op.dgr{color:var(--danger);border-color:#FECACA;background:#FEF2F2}
.op:disabled{background:#F9FAFB;color:#C7CDD6;border-color:var(--bdl);cursor:not-allowed}
.tbl{overflow:hidden}
.th,.tr{display:grid;align-items:center;gap:8px;padding:9px 14px}
/* 列对齐：网格项默认 min-width:auto，长文本会把 1fr 那列撑宽，每行宽度不一样 → 后面的列（类型/金额）就错位 */
.th>*,.tr>*{min-width:0}
.tr>span:not([style*="flex"]),.th>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th{background:#FAFBFC;border-bottom:1px solid var(--bdl);font-size:11px;color:var(--tmu)}
.tr{border-bottom:1px solid #FAFBFC;font-size:12.5px;color:var(--tb)}
.tr:last-child{border-bottom:0}
.tr:hover{background:#FCFDFE}
.tm{color:var(--tmu);font-variant-numeric:tabular-nums}
.flds{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 16px}
.fld{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tb)}
.fld label{flex:0 0 74px;color:var(--tmu)}
.fld .inp{height:30px;font-size:12.5px}
.fld select,.fld input[type=number]{height:30px;border:1px solid var(--bd);border-radius:8px;padding:0 8px;background:#fff;flex:1;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--bd);background:#fff;color:var(--tb);cursor:pointer;user-select:none}
.chip.on{border-color:#BFDBFE;background:var(--primary-light);color:var(--primary);font-weight:500}
.hint{font-size:11px;color:var(--tmu)}
.tg{width:38px;height:21px;border-radius:999px;background:#D1D5DB;position:relative;cursor:pointer;flex:0 0 38px}
.tg.on{background:var(--primary)}
.tg i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.tg.on i{left:19px}
.my{display:grid;grid-template-columns:300px 1fr;gap:14px}
.my>div{min-width:0}
/* 按账号计费明细：两列（账号信息 + 续费），窄屏也不会把按钮挤出框 */
.tr.feerow{grid-template-columns:minmax(0,1fr) 84px;min-width:0 !important;align-items:center;padding-top:8px;padding-bottom:8px}
.feerow .fmain{min-width:0;display:flex;flex-direction:column;gap:3px}
.feerow .fn{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--tm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feerow .fs{font-size:11px;color:var(--tmu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}          /* 关键：不然里面那张 min-width:560 的表格会把整列撑宽、卡片右半边被切 */
.my .cd{min-width:0}
.pcard{padding:18px;text-align:center}
.pcard .av2{width:62px;height:62px;border-radius:50%;background:linear-gradient(140deg,#3B82F6,#6366F1);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.pcard .nick{font-size:16px;font-weight:700;color:var(--tm)}
.pcard .uid{font-size:11.5px;color:var(--tmu);margin-top:4px}
.trio{display:flex;border-top:1px solid var(--bdl);margin-top:14px}
.trio div{flex:1;text-align:center;padding:12px 0;border-right:1px solid var(--bdl)}
.trio div:last-child{border-right:0}
.trio b{display:block;font-size:17px;color:var(--tm)}
.trio span{font-size:10.5px;color:var(--tmu)}
.li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bdl);font-size:13px;color:var(--tm);cursor:pointer}
.li:last-child{border-bottom:0}
.li:hover{background:#FCFDFE}
.li .iw{width:28px;height:28px;border-radius:8px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.li .r{margin-left:auto;font-size:11.5px;color:var(--tmu);display:flex;align-items:center;gap:5px}
.li.danger{color:var(--danger)}
.li.danger .iw{background:#FEF2F2;color:var(--danger)}
.tip{background:var(--primary-light);border:1px solid #DBEAFE;border-radius:10px;padding:11px 13px;font-size:11.5px;color:#1E40AF;display:flex;gap:8px;line-height:1.7}
.mask{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.modal .mh{padding:14px 18px;border-bottom:1px solid var(--bdl);display:flex;align-items:center;justify-content:space-between}
.modal .mh b{font-size:14.5px;color:var(--tm)}
.modal .mb{padding:16px 18px;overflow:auto}
.modal .mf{padding:12px 18px;border-top:1px solid var(--bdl);display:flex;justify-content:flex-end;gap:8px}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;font-size:13px;padding:9px 16px;border-radius:999px;z-index:99;opacity:0;transition:.2s;pointer-events:none}
.toast.on{opacity:1}
.empty{padding:40px;text-align:center;color:var(--tmu);font-size:13px}
pre.logs{background:#0b1220;color:#cbd5e1;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;line-height:1.75;padding:12px;border-radius:10px;max-height:46vh;overflow:auto;white-space:pre-wrap}
pre.logs .err{color:#f87171}
pre.logs .warn{color:#fbbf24}
@media(max-width:900px){.side{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:.2s}.side.open{transform:none}.col-art{display:none}.col-form{width:100%}.my{grid-template-columns:1fr}.authcard{min-height:auto}}

.sfoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--bdl);display:block;cursor:default}
.usercard{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px}
.usercard .nm{font-size:12.5px;color:var(--tm);font-weight:500}
.usercard .st{font-size:10.5px;color:var(--tmu)}
.logout-btn{margin-top:8px;width:100%;height:34px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #FECACA;background:#FEF2F2;color:var(--danger);border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer}
.logout-btn:hover{background:#FEE2E2}

/* ===== 头像菜单 ===== */
.ubox{position:relative;margin-top:auto;padding-top:10px;border-top:1px solid var(--bdl)}
.usercard{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.15s}
.usercard:hover{background:#F7F9FC;border-color:var(--bdl)}
.usercard .nm{font-size:12.5px;color:var(--tm);font-weight:500}
.usercard .st{font-size:10.5px;color:var(--tmu)}
.usercard .caret{margin-left:auto;color:var(--tmu);display:flex;align-items:center}
.usercard .caret svg{width:14px;height:14px}
.usercard:hover .caret{color:var(--tb)}
.umenu{position:absolute;left:0;right:0;bottom:46px;background:#fff;border:1px solid var(--bdl);border-radius:10px;box-shadow:0 14px 34px rgba(17,24,39,.16);z-index:30;overflow:hidden;display:none}
.umenu.on{display:block}
.umenu .uh{padding:11px 12px 10px;background:#F8FAFC;border-bottom:1px solid var(--bdl)}
.umenu .uh .n{font-size:12.5px;color:var(--tm);font-weight:600}
.umenu .uh .b{font-size:10.5px;color:var(--tmu);margin-top:2px}
.umenu .uh .b b{color:var(--primary);font-size:12px}
.umenu .us{display:flex;padding:9px 6px;border-bottom:1px solid var(--bdl)}
.umenu .us div{flex:1;text-align:center;font-size:10px;color:var(--tmu);line-height:1.5}
.umenu .us b{display:block;font-size:12.5px;color:var(--tm)}
.umenu a{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;color:var(--tb);cursor:pointer;text-decoration:none}
.umenu a svg{width:14px;height:14px;color:var(--tmu)}
.umenu a:hover{background:#F7F9FC}
.umenu a .r{margin-left:auto;color:var(--tmu);font-size:11px}
.umenu .sep{height:1px;background:var(--bdl)}
.umenu a.danger{color:var(--danger)}
.umenu a.danger svg{color:var(--danger)}

/* ===== 功能设置：原版排版的卡片网格 ===== */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:10px;align-items:stretch}
.pick{min-height:92px}
.pick .ps{flex:1 1 auto}
.pick{border:1px solid var(--bd);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:7px;background:#fff;height:100%}
.pick.on{border-color:#BFDBFE;background:#F7FAFF}
.pick .ph{display:flex;align-items:center;gap:8px}
.pick .pname{font-size:12.5px;color:var(--tm);font-weight:600}
.pick .ps{font-size:10.5px;color:var(--tmu);line-height:1.65}
.pick .pr{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tmu)}
.pick .pr input[type=number],.pick .pr input[type=text]{width:58px;height:23px;border:1px solid var(--bd);border-radius:6px;padding:0 6px;font-size:11px;text-align:right;background:#fff}
.pick .pr input.grow{flex:1;width:auto;text-align:left}
.pick .pf{display:flex;gap:5px;flex-wrap:wrap}
.pick .chip{font-size:10.5px;padding:3px 9px;border-radius:999px}
.pick .tg{width:34px;height:19px;flex:0 0 34px}
.pick .tg i{width:15px;height:15px}
.pick .tg.on i{left:17px}
.sech{display:flex;align-items:center;gap:8px;padding:0 0 11px}
.sech b{font-size:13px;color:var(--tm)}
.cards{margin-bottom:12px}
.cards:last-child{margin-bottom:0}
.cfgbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #DBEAFE;border-radius:10px;padding:9px 14px;margin-top:12px;box-shadow:0 6px 18px rgba(59,130,246,.10);position:sticky;bottom:0;z-index:10}
.cfgbar .d{width:6px;height:6px;border-radius:50%;background:var(--warning)}


/* 设置页自动保存条（无按钮） */
.cfgbar .dot2{width:6px;height:6px;border-radius:50%;background:var(--success)}
.cfgbar .dot2.busy{background:var(--warning)}

/* 鸟卡片：贴原版排版 */
.pick.birdcard .bhint{font-size:10px;color:var(--tmu);margin-top:2px}
.pick.birdcard .pr{gap:7px}
.pick.birdcard .pr input.grow{flex:1;width:auto;text-align:left;height:25px}
.pick.birdcard .pf .chip{padding:4px 11px}

/* ===== 管理端独立登录页（/admin）===== */
.admlogin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;
  background:radial-gradient(900px 520px at 12% 0%,#1D3A8A 0%,#0C1526 55%,#070B13 100%)}
.admcard{width:100%;max-width:398px;background:#fff;border-radius:18px;padding:24px 24px 20px;
  box-shadow:0 30px 70px rgba(2,8,20,.55)}
.admhead{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.admhead .mk{width:36px;height:36px;border-radius:11px;background:#0F172A;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.admhead .mk .ic{width:17px;height:17px;stroke:#fff}
.admhead b{display:block;font-size:14px;color:#0F172A;line-height:1.25}
.admhead .st{font-size:11px;color:#64748B;margin-top:1px}
.admhead .vtag{margin-left:auto;font-size:10px;color:#64748B;border:1px solid #E2E8F0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.admcard h2{font-size:19px;margin:0 0 5px;color:#0F172A;letter-spacing:.2px}
.admcard .sub2{font-size:12px;color:#64748B;margin-bottom:18px;line-height:1.6}
.admcard .btn{width:100%;margin-top:2px}
.admlogin .msg{min-height:16px;margin-top:10px;font-size:12px;line-height:1.8}
.admlogin .msg.err{color:#DC2626}
.admfoot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:11.5px;color:#94A3B8}
.admfoot a{color:#3B82F6;text-decoration:none}
.admbar{position:fixed;left:0;right:0;bottom:0;text-align:center;font-size:11px;color:rgba(255,255,255,.34);padding:14px}

/* ===== 管理端 · 托管账号 ===== */
.tbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--bdl);background:#FAFBFC;flex-wrap:wrap}
.tbar .sp{flex:1}
.tbar select{height:30px;border:1px solid var(--bd);border-radius:8px;padding:0 8px;background:#fff;font-size:12px;color:var(--tb)}
.tbar .inp2{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--bd);border-radius:8px;background:#fff;width:220px}
.tbar .inp2 input{border:0;outline:0;font-size:12px;flex:1;min-width:0;color:var(--tm)}
.tbar .inp2 svg.ic{color:var(--tmu)}
.arow{grid-template-columns:1.5fr 100px 148px 118px 148px 72px 1fr}
.accwrap{display:flex;align-items:center;gap:8px;min-width:0}
.accwrap img{width:26px;height:26px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#F3F4F6;border:1px solid var(--bdl)}
.accwrap .n{font-size:12.5px;color:var(--tm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accwrap .s{font-size:10.5px;color:var(--tmu);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat1{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--bdl);border-radius:999px;padding:2px 6px 2px 2px;background:#fff}
.stat1:hover{border-color:var(--primary)}
.stat1 .pen{color:var(--tmu);font-size:9px;line-height:1}
.opsx{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.opsx .op{width:auto;padding:0 8px;height:24px;font-size:11px}
.legend{display:flex;gap:14px;font-size:10.5px;color:var(--tmu);padding:8px 14px;border-top:1px solid var(--bdl);background:#FAFBFC;flex-wrap:wrap}
.radsel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radsel .r{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--bd);border-radius:9px;font-size:12.5px;color:var(--tb);cursor:pointer}
.radsel .r.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary);font-weight:600}
.radsel .r i{width:13px;height:13px;border-radius:50%;border:1.5px solid #CBD5E1;display:inline-block;flex:0 0 auto}
.radsel .r.on i{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px #fff}

/* ===== 推广（客户端卡片 + 管理端页面） ===== */
.promo .pcode{display:flex;align-items:center;gap:8px;margin:10px 0 8px}
.promo .pcode b{font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:1.5px;color:var(--tm)}
.promo .pcode .link{margin-left:auto;font-size:11px}
.promo .ptip{font-size:10.5px;color:var(--tmu);line-height:1.7;background:#FAFBFC;border-radius:8px;padding:8px 10px}
.promo .pstat{display:flex;border-top:1px solid var(--bdl);margin-top:12px;padding-top:12px}
.promo .pstat div{flex:1;text-align:center;font-size:10.5px;color:var(--tmu);line-height:1.6}
.promo .pstat b{display:block;font-size:16px;color:var(--tm)}
.prow{grid-template-columns:1fr 1fr 150px 110px 100px 90px 96px}
.rule{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end}
.rule .f{display:flex;flex-direction:column;gap:6px}
.rule .f label{font-size:11.5px;color:var(--tmu)}
.rule .f .inp{height:34px;width:150px}
.rule .f .inp input{font-size:13px}
.promo.off{background:#FAFBFC}
.promo.off .pcode b{color:var(--tmu)}
.promo.off .ptip{background:#fff;border:1px dashed var(--bd)}


/* ===== 移动端适配（2026-10-24） ===== */
.mnav{display:none;position:fixed;left:12px;top:12px;z-index:60;width:38px;height:38px;border-radius:10px;border:1px solid var(--bdl);background:#fff;box-shadow:0 2px 10px rgba(17,24,39,.10);align-items:center;justify-content:center;cursor:pointer;color:var(--tm)}
.mnav svg{width:18px;height:18px}
.side-mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:49}
.side-mask.on{display:block}
@media(max-width:900px){
  .mnav{display:flex}
  .main{padding-top:56px}
  .hdr{position:fixed;left:0;right:0;top:0;z-index:40;padding-left:60px}
  .body{padding:12px}
  /* 表格在手机上横向滚动而不是撑破 */
  .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .th,.tr{min-width:560px}
  /* 统计卡两列 */
  .stats,.sc-wrap{grid-template-columns:1fr 1fr !important}
  /* 账号卡按钮换行 */
  .ac .ops,.ac .op-row{flex-wrap:wrap}
  /* 弹窗贴边 */
  .modal{max-width:100%;border-radius:12px}
  .modal .mb{padding:14px}
  .toast{top:auto;bottom:24px}
}
@media(max-width:520px){
  .stats,.sc-wrap{grid-template-columns:1fr !important}
  .ac .op{flex:1 1 45%}
  .hdr .search{display:none}
}

/* ===== 计费与定价页（2026-10-24） ===== */
.cards2{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
.sw{width:40px;height:22px;border-radius:999px;background:var(--primary);position:relative;flex:0 0 auto;cursor:pointer;display:inline-block}
.sw i{position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;display:block}
.sw.off{background:#D1D5DB}.sw.off i{left:2px;right:auto}
@media(max-width:900px){.cards2{grid-template-columns:1fr}}

/* ================= 2026-10-26：不抢名单 / 海兽升级 / 海兽孵化 / 折叠 / 客服 ================= */
.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.2px}
.subblk{margin-top:14px;padding-top:12px;border-top:1px dashed #E2E8F0}
.rbrule{display:flex;gap:8px;align-items:flex-start;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:9px;padding:8px 12px;font-size:11.5px;color:var(--tb);margin-bottom:8px;line-height:1.7}
.rbrule b{color:var(--tm);white-space:nowrap}
.rbrule .mono{font-size:11px}
.tbar2{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;border:1px solid var(--bdl);background:#FAFBFC;border-radius:9px;flex-wrap:wrap}
.tbar2 .inp2{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--bd);border-radius:8px;background:#fff;width:230px;color:var(--tmu)}
.tbar2 .inp2 input{border:0;outline:0;font-size:12px;flex:1;min-width:0;color:var(--tm);background:transparent}
.tbar2 .sel{height:30px;border:1px solid var(--bd);border-radius:8px;padding:0 10px;background:#fff;font-size:12px;color:var(--tb)}
.th.rbrow,.tr.rbrow{grid-template-columns:minmax(200px,1.6fr) 120px 90px 90px}
.th.brow,.tr.brow{grid-template-columns:minmax(170px,1.5fr) 56px 150px 60px 86px 96px}
.th.hatchrow,.tr.hatchrow{grid-template-columns:minmax(180px,1.3fr) 64px 64px 1fr 130px}
.th.sup,.tr.sup{grid-template-columns:64px minmax(120px,1fr) 150px minmax(110px,1fr) 48px 48px 214px}
.tr.sup .op{white-space:nowrap}
.tr.sup .op[data-spup],.tr.sup .op[data-spdown]{padding:0 6px}
.tg{display:inline-block}
.accwrap .n,.accwrap .s{display:block}
.num{width:60px;height:24px;border:1px solid var(--bd);border-radius:6px;text-align:center;font-size:12px;color:var(--tm);background:#fff;outline:none}
.lvlcell{display:flex;align-items:center;gap:6px;position:relative}
.lvnow{font-size:12px;color:var(--tm);font-variant-numeric:tabular-nums}
.lvlcell .arrow{color:var(--tmu);font-size:11px}
.lvlcell .cost{position:absolute;left:0;top:20px;font-size:9.5px;color:var(--tmu);white-space:nowrap}
.tr.brow{padding-top:7px;padding-bottom:16px}
.tr.brow>.lvlcell{overflow:visible}
.sumline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#F8FAFC;border:1px solid var(--bdl);border-radius:9px;padding:8px 12px;margin-bottom:8px;font-size:11.5px;color:var(--tb)}
.sumline b{color:var(--tm);font-size:13px}
.sumline .sep{width:1px;height:12px;background:#E2E8F0;display:inline-block}
.capbar{background:#F8FAFC;border:1px solid var(--bdl);border-radius:9px;padding:8px 12px;margin-top:10px}
.capbar.bad{background:#FEF2F2;border-color:#FECACA}
.caphead{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tmu);margin-bottom:6px;flex-wrap:wrap}
.caphead b{color:var(--tm);font-size:12.5px}
.capbar .bar{height:6px;border-radius:999px;background:#E5E7EB;overflow:hidden}
.capbar .bar i{display:block;height:100%;background:var(--primary);border-radius:999px}
.sech.fsech{cursor:pointer;user-select:none}
.fchev{display:flex;color:var(--tmu);transition:transform .15s}
.fchev svg{width:14px;height:14px}
.fchev.open{transform:rotate(90deg)}
.fsum{font-size:11px;color:var(--tmu)}
.cd.collapsed{box-shadow:0 2px 10px rgba(0,0,0,.04)}
.cd.collapsed .sech{padding-bottom:0}
.csrow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--bdl)}
.csrow.pressable{cursor:pointer;transition:background .12s;border-radius:8px}
.csrow.pressable:hover{background:#F8FAFC}
.csrow.pressable:active{background:#EFF6FF}
.csrow .hintcopy{pointer-events:none;display:inline-flex;align-items:center;gap:4px}
.csrow:last-child{border-bottom:0;padding-bottom:2px}
.csic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto;background:var(--primary-light);color:var(--primary)}
.csic.wechat{background:#ECFDF5;color:#059669}
.csic.qqgroup{background:#F5F3FF;color:#7C3AED}
.csic.tg{background:#F3F4F6;color:#4B5563}
.csic.email{background:#FFFBEB;color:#B45309}
.csic.link{background:#EFF6FF;color:#2563EB}
.csm{flex:1;min-width:0}
.csm .lnm{font-size:13px;color:var(--tm);font-weight:600;line-height:1.35}
.csm .lsub{font-size:11.5px;color:var(--tmu);margin-top:3px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csm .lsub b{font-family:ui-monospace,Consolas,monospace;font-weight:600;color:var(--tb)}
.csrow .op{flex:0 0 auto;height:28px;padding:0 10px;font-size:11.5px}
/* 下拉框：别在里面再套一层边框（管理端「添加客服账号 → 类型」） */
.inp select{border:0;background:transparent;outline:none;width:100%;height:100%;font-size:13px;color:var(--tm);cursor:pointer}
.inp select:focus{outline:none}
.csfloat{position:fixed;right:20px;bottom:26px;z-index:45;height:42px;padding:0 15px;border:0;border-radius:999px;background:var(--primary);color:#fff;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px rgba(59,130,246,.36)}
.csfloat svg{width:16px;height:16px}
.csfloat:hover{background:var(--primary-dark)}
.eggres{display:flex;align-items:center;gap:12px;background:#FAFBFC;border:1px solid var(--bdl);border-radius:11px;padding:12px}
.eggav{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;flex:0 0 auto;background:#FEF2F2;color:#DC2626}
.eggnm{font-size:15px;color:var(--tm);font-weight:700}
.eggs{font-size:11.5px;color:var(--tmu);margin-top:3px}
.pick.dis{opacity:.55;cursor:not-allowed}
.pick.dis *{cursor:not-allowed}
.pendbox{margin-top:12px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:11px;padding:10px 12px}
.pendhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.pendhead b{font-size:12.5px;color:#B45309}
.pendrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed #FDE3C0;flex-wrap:wrap}
.pendrow:first-of-type{border-top:0}
.pendrow .pn{font-size:12.5px;color:var(--tm);font-weight:600;white-space:nowrap}
.pendrow .hint{font-size:11px;flex:1 1 auto;min-width:120px}
.pendrow .pa{display:flex;gap:6px;margin-left:auto}
.sech b{white-space:nowrap;flex:0 0 auto}
.sech .acts{flex:0 0 auto}
.sech .acts .btn,.sech>.btn{white-space:nowrap;flex:0 0 auto}
@media(max-width:760px){
  /* 我的信息：手机上一列铺满，长文本不再被切掉 */
  .my{grid-template-columns:1fr}
  .pcard,.promo{padding:14px}
  .pcard .nick,.pcard .uid,.promo b,.promo .pcode b{white-space:normal;word-break:break-all;line-height:1.5}
  .trio div{min-width:0}
  .promo .pcode{flex-wrap:wrap;gap:6px}
  .promo .pstat{flex-wrap:wrap}
  .promo .ptip{word-break:break-word;white-space:normal}
  .sech{flex-wrap:wrap;row-gap:6px}
  .sech .hint{order:2;flex:1 1 auto;min-width:120px}
  .sech.fsech{flex-wrap:wrap;row-gap:6px}
  .sech.fsech .hint{order:3;flex:1 1 100%;white-space:normal;line-height:1.45;font-size:11.5px}
  .sech.fsech .acts,.sech.fsech .fsum{margin-left:auto;flex:0 0 auto}
  .fsum{white-space:nowrap}
  .pendrow .pa{margin-left:0}
}
.notice{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:14px}
.chead{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--bdl)}
.chead b{font-size:13.5px;color:var(--tm)}
.cbody{padding:14px 16px}
.cfoot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--bdl);background:#FAFBFC;border-radius:0 0 12px 12px}
.preview{border:1px dashed #DBEAFE;border-radius:11px;padding:10px 12px;background:#F8FBFF}
.pvhead{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px solid #E8F0FE}
.pvhead b{font-size:12.5px;color:var(--tm)}
.pvhead .hint{margin-left:auto}
.pvi{color:var(--primary);display:flex}
.pvhead .pvi svg{width:15px;height:15px}
svg.xs{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .th.rbrow,.tr.rbrow{grid-template-columns:minmax(120px,1fr) auto 56px;min-width:0}
  .th.rbrow span:nth-child(2),.tr.rbrow>span:nth-child(2){display:none}
  .tr.rbrow>span:nth-child(3){justify-self:end}
  .th.brow,.tr.brow{grid-template-columns:minmax(0,1fr) 40px 84px 56px;min-width:0}
  .tr.brow>span{min-width:0}
  .tr.brow>.accwrap{overflow:hidden}
  .th.hatchrow,.tr.hatchrow{min-width:0}
  .th.rbrow,.tr.rbrow{min-width:0}
  .th.brow span:nth-child(4),.th.brow span:nth-child(5),.tr.brow>span:nth-child(4),.tr.brow>span:nth-child(5){display:none}
  .tr.brow .cost{display:none}
  .tr.brow{padding-top:9px;padding-bottom:9px}
  .th.hatchrow,.tr.hatchrow{grid-template-columns:minmax(110px,1fr) 44px 78px}
  .th.hatchrow span:nth-child(3),.th.hatchrow span:nth-child(5),.tr.hatchrow>span:nth-child(3),.tr.hatchrow>span:nth-child(5){display:none}
  .cards2{grid-template-columns:1fr}
  .th.sup,.tr.sup{grid-template-columns:52px 1fr 60px 64px}
  .th.sup span:nth-child(3),.th.sup span:nth-child(4),.th.sup span:nth-child(5),.tr.sup>span:nth-child(3),.tr.sup>span:nth-child(4),.tr.sup>span:nth-child(5){display:none}
  .csfloat{right:14px;bottom:14px}
  .tbar2 .inp2{width:100%}
}



/* ===== 协助列表（v3.79）：我发起的 / 我协助的 每一趟探险 ===== */
.skrow{border:1px solid var(--bd);border-radius:10px;padding:9px 10px;display:flex;gap:10px;align-items:center;background:#fff;margin-bottom:8px}
.skrow.mine{border-color:#BFDBFE;background:#F7FAFF}
.skico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;line-height:1.15;text-align:center;flex:0 0 auto}
.skmid{flex:1;min-width:0}
.skl1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.skl1 b{font-size:12.5px;color:var(--tm)}
.skrw{font-size:11px;color:var(--tb)}
.skl2{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10.5px;color:var(--tmu);margin-top:3px}
.skl2 b{color:#4B5563}
.skdone{color:#B45309;font-weight:600}
.skavts{display:inline-flex}
.skavts i{width:18px;height:18px;border-radius:50%;background:#E5E7EB;border:1.5px solid #fff;margin-left:-6px;display:inline-block}
.skavts i:first-child{margin-left:0}
.skavts i.me{background:#BFDBFE}
.skavts i.empty{background:#fff;border:1.5px dashed #CBD5E1}
.skact{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
.skgrp{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tmu);margin:10px 2px 7px}
.skgrp b{color:var(--tm);font-size:11.5px}
.skbar{flex:1;height:1px;background:var(--bdl)}
.skempty{border:1px dashed #CBD5E1;border-radius:10px;padding:16px;text-align:center;color:var(--tmu);font-size:12px}
@media(max-width:900px){
  .skrow{flex-wrap:wrap}
  .skact{width:100%;flex-direction:row;align-items:stretch;margin-top:2px}
  .skact .btn{flex:1}
  .skico{width:38px;height:38px;font-size:11px}
  .skl2{gap:7px}
}


/* 探险功能卡 · 手机端单列（以前 430 宽会挤成两列，右边「探险队伍」被压成一条竖排文字） */
@media(max-width:900px){
  .cgrid{grid-template-columns:1fr !important}
  .cgrid > .pick{grid-column:auto !important}
  .skl2{font-size:10px;gap:6px}
}


/* 间隔步进器（手机端没有数字框上下箭头，统一用 −/＋ 按钮） */
.pr .stp{width:30px;height:30px;line-height:1;border:1px solid var(--bd);border-radius:8px;background:#fff;color:var(--tx);font-size:16px;font-weight:600;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;user-select:none}
.pr .stp:active{background:#eef4ff;border-color:var(--primary)}
.pr .stpin{width:64px;height:30px;text-align:center;border:1px solid var(--bd);border-radius:8px;font-size:13px;padding:0 4px;background:#fff;color:var(--tx)}
@media(max-width:900px){
  .pr .stp{width:36px;height:36px;font-size:18px}
  .pr .stpin{width:76px;height:36px;font-size:15px}
}


/* 客服设置表格 · 手机端（以前 .tr 最小 560px + 最后一列被 ellipsis 截成「⋯」，
   手机上根本看不到「编辑 / 删除」按钮） */
@media(max-width:900px){
  .th.sup{display:none}
  .tr.sup{display:flex;flex-wrap:wrap;gap:6px 10px;min-width:0 !important;padding:10px 12px;font-size:13px}
  .tr.sup>span{white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
  .tr.sup>span:nth-child(5){display:none}                     /* 排序列号，手机上没意义 */
  .tr.sup>span:last-child{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;text-align:left !important}
  .tr.sup .op{height:32px;padding:0 14px;font-size:12.5px;flex:0 0 auto}
  .tr.sup>span:nth-child(1){order:1}
  .tr.sup>span:nth-child(2){order:2;font-weight:700;color:var(--tx)}
  .tr.sup>span:nth-child(3),.tr.sup>span:nth-child(4){display:block !important}   /* 上面 467 行把它们藏了，手机上要能看见账号/备注才好编辑 */
  .tr.sup>span:nth-child(3){order:3;flex:1 0 100%}
  .tr.sup>span:nth-child(4){order:4;flex:1 0 100%;font-size:12px}
  .tr.sup>span:nth-child(6){order:5}
  .tr.sup>span:last-child{order:6}
}


/* ===== 孵化「自己选踢谁」列表（2026-10-26）===== */
.khead{display:flex;align-items:center;gap:8px;margin:14px 2px 8px}
.khead b{font-size:12px;color:var(--tx)}
.khead .op{margin-left:auto;height:24px;font-size:11px;padding:0 8px}
.kickbox{max-height:290px;overflow:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
.kopt{display:flex;gap:10px;align-items:center;border:1.5px solid var(--bd);border-radius:12px;padding:9px 10px;background:#fff;margin-bottom:8px;cursor:pointer}
.kopt.on{border-color:var(--primary);background:#F7FAFF;box-shadow:0 0 0 3px rgba(59,130,246,.10)}
.kopt .radio{width:17px;height:17px;border-radius:50%;border:2px solid #CBD5E1;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.kopt.on .radio{border-color:var(--primary)}
.kopt.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.kico{width:36px;height:36px;border-radius:10px;background:#F3F4F6;color:#6B7280;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.kico.sug{background:#FEF3C7;color:#B45309}
.kmid{flex:1;min-width:0}
.kn1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kn1 b{font-size:12.5px;color:var(--tx)}
.kn2{font-size:10.5px;color:var(--tmu);margin-top:3px;display:flex;gap:9px;flex-wrap:wrap}
.kstats{display:flex;gap:9px;flex:0 0 auto}
.kstats .stat{text-align:center;min-width:38px}
.kstats .stat .v{font-size:13px;font-weight:800;color:#B45309;line-height:1.1}
.kstats .stat.gr .v{color:#059669}
.kstats .stat .k{font-size:9px;color:var(--tmu);margin-top:1px}
.khint{font-size:11px;color:var(--tmu);text-align:center;padding:9px 0 2px}
.kcmp{display:flex;align-items:center;gap:10px;border:1px solid #BFDBFE;background:#F7FAFF;border-radius:11px;padding:9px 11px;margin-top:6px}
.kcmp .ks{flex:1;min-width:0}
.kcmp .ks .t{font-size:10px;color:var(--tmu)}
.kcmp .ks .v{font-size:12px;color:var(--tx);font-weight:700;margin-top:1px}
.kcmp .ks .v small{font-weight:600;color:var(--tb)}
.kcmp .ka{flex:0 0 auto;font-size:15px;color:var(--primary);font-weight:800}
.kcmp .chg{font-size:10px;margin-top:2px;font-weight:700}
@media(max-width:900px){
  .kickbox{max-height:42vh}
  .kopt{padding:8px 9px}
  .kstats .stat{min-width:34px}
  .kcmp{flex-wrap:wrap;gap:6px}
  .kcmp .ks{flex:1 0 100%;position:static;width:auto;border:0;padding:0;background:transparent;display:block}
  .kcmp .ka{display:none}
  .mf .btn{font-size:12.5px;padding:0 8px;white-space:nowrap}
}


/* 领地扩容按钮行 */
.capact{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.capact .btn{height:26px;font-size:11.5px;padding:0 10px}
.capact .hint{font-size:10.5px}


/* ===== 2026-10-27：仪表盘·服务器占用（手机端不再超出页面） =====
   以前这块是写死 grid-template-columns:repeat(4,1fr) + 内联 padding，
   媒体查询压不住内联样式：375px 手机上每列只有 80px，「负载/核心/进程」被挤成
   一行一个字，第 4 张「服务」卡直接甩到卡片外面。现在全部改 class，按断点收缩：
   桌面 4 列 → ≤1180 2 列 → ≤900(手机) 2 列且 CPU 环图改上下排 → ≤380 1 列 */
.syscard{padding:14px}
.syshd{display:flex;align-items:center;gap:10px;margin-bottom:11px;min-width:0}
.syshd .syst{font-size:13px;color:var(--tm);flex:0 0 auto;white-space:nowrap}
.syshd .syshint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.syshd .btn{margin-left:auto;flex:0 0 auto}
.sysgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.sysgrid>.sysitem{min-width:0}
.sysitem .ph{flex-wrap:wrap;gap:6px;min-width:0}
.sysitem .pname{white-space:nowrap}
.sysrow{display:flex;align-items:center;gap:11px;min-width:0}
.sysring{width:60px;height:60px;border-radius:99px;display:grid;place-items:center;flex:0 0 auto}
.sysring>b{width:46px;height:46px;border-radius:99px;background:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--tm);font-variant-numeric:tabular-nums}
.syskv{flex:1 1 auto;min-width:0;font-size:10.5px;line-height:1.9;color:var(--tmu)}
.syskv>div{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.syskv>div>span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.syskv>div>b{flex:0 0 auto;color:var(--tm);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.sysserv{line-height:1.95}
.sysv{font-size:22px;font-weight:700;color:var(--tm);line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.sysv small{font-size:11px;color:var(--tmu);font-weight:600}
.sysbar{height:7px;border-radius:99px;background:var(--bdl);overflow:hidden}
.sysbar i{display:block;height:100%;border-radius:99px}
/* 仪表盘底部两栏：手机上 1fr+360px 一定顶出页面，改 class 后能收成单列 */
.dashrow{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}
.dashrow .tbl{min-width:0}
@media(max-width:1180px){.sysgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .syscard{padding:12px}
  .syshd{flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .syshd .syshint{order:3;flex:1 0 100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sysgrid{gap:9px}
  .sysrow{flex-direction:column;align-items:stretch;gap:8px}
  .sysring{margin:0 auto;width:56px;height:56px}
  .sysring>b{width:44px;height:44px;font-size:13.5px}
  .syskv{width:100%;font-size:10.5px;line-height:1.85}
  .sysv{font-size:20px}
  .sysv small{font-size:10.5px}
  .dashrow{grid-template-columns:minmax(0,1fr)}
  /* 最近动态 / 需要处理 这种两列文字行，手机上别再按 560px 最小宽横滚 */
  .tbl .tr.mtr{min-width:0}
  /* 统计卡手机上也两列（原来是 1 列，屏上一张一张往下挤） */
  .stats{grid-template-columns:1fr 1fr !important;gap:9px}
}
@media(max-width:340px){
  .sysgrid{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:1fr !important}
}


/* ===== 2026-10-27：切页面骨架屏 =====
   以前是立刻写一行「加载中…」灰字（导航才 330ms，看着就是闪一下，很怪）。
   现在由 mount() 延迟 350ms 才挂这个骨架，且用和真实卡片同形状的灰块 + 微光扫过。 */
.skel{pointer-events:none}
.skel>*{border-radius:10px;background:#EEF1F5;position:relative;overflow:hidden}
.skel>*::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.78),rgba(255,255,255,0));transform:translateX(-100%);animation:skelShine 1.25s ease-in-out infinite}
@keyframes skelShine{to{transform:translateX(100%)}}
.skel .sk-h{height:24px;width:38%;margin-bottom:16px}
.skel .sk-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;background:transparent;border-radius:0;overflow:visible}
.skel .sk-4::after{display:none}
.skel .sk-4 i{display:block;height:86px;border-radius:10px;background:#EEF1F5;position:relative;overflow:hidden}
.skel .sk-4 i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.78),rgba(255,255,255,0));transform:translateX(-100%);animation:skelShine 1.25s ease-in-out infinite}
.skel .sk-b{height:140px;margin-bottom:12px}
@media(max-width:900px){.skel .sk-h{width:58%}.skel .sk-4{grid-template-columns:1fr 1fr}.skel .sk-b{height:110px}}
@media(prefers-reduced-motion:reduce){.skel>*::after,.skel .sk-4 i::after{animation:none}}


/* ===== 2026-10-27：管理端「用户管理」手机端改卡片式 =====
   原因：8 列表格行 min-width 560，在 390px 上两个 fr 列被压成 0 宽，
   「用户」那一列完全看不见（实测第一个格子 width=0），看着像"没有用户列表"。 */
.ucards{display:flex;flex-direction:column;gap:9px;padding:10px}
.ucard{border:1px solid var(--bd);border-radius:11px;padding:11px 12px;background:#fff}
.ucard .uc-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px;font-size:13px;color:var(--tm)}
.ucard .uc-h b{font-weight:700}
.ucard .uc-h .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.ucard .uc-row{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.95;color:var(--tmu)}
.ucard .uc-row>span:first-child{flex:0 0 68px}
.ucard .uc-row>b{flex:1 1 auto;min-width:0;font-weight:600;color:var(--tb);justify-content:flex-end}
.ucard .uc-ops{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--bdl)}
.ucard .uc-ops .op{flex:1 1 44%;width:auto;height:30px}
@media(max-width:420px){.ucard .uc-row>span:first-child{flex:0 0 58px}}


/* ===== 2026-10-27：踢海兽改成**多选**（凑够格子就行，不用先扩容）· 圆圈 → 方框勾 ===== */
.kopt .cbox{width:17px;height:17px;border-radius:5px;border:2px solid #CBD5E1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff;transition:all .12s}
.kopt.on .cbox{border-color:var(--primary);background:var(--primary)}
.kopt.on .cbox::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}


/* ===== 礼包兑换（功能设置最下面） ===== */
.gift-card{margin-bottom:12px;padding:14px}
.gift-card.collapsed .gift-body{display:none}
.gift-card.collapsed .sech{padding-bottom:0}
.gift-card .sech{min-height:22px}
.gift-card .fsum{margin-left:auto;font-size:11px;color:var(--tmu)}
.gift-body{padding-top:2px}
.gift-controls{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.gift-field{display:flex;align-items:center;gap:7px}
.gift-label{font-size:10.5px;color:var(--tmu);white-space:nowrap}
.gift-controls .chips{gap:5px}
.gift-controls .chip{font-size:10px;padding:3px 9px;border-radius:999px;line-height:1.35}
.gift-controls .chip.gift-chip-disabled{opacity:.45;pointer-events:none}
.gift-hist{margin-left:auto;font-size:10.5px;color:var(--primary);cursor:pointer;white-space:nowrap}
.gift-code-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.gift-code{flex:1;height:36px;padding:0 10px;border-radius:8px}
.gift-code input{font-family:ui-monospace,Consolas,"Microsoft YaHei",monospace;font-size:13px;letter-spacing:.8px;color:var(--tm)}
.gift-code input::placeholder{font-family:"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;font-size:11.5px;color:#AAB4C3}
.gift-paste{font-size:10.5px;color:var(--primary);cursor:pointer;white-space:nowrap}
.gift-btn{height:36px;padding:0 15px;border-radius:8px;font-size:12px;box-shadow:0 4px 12px rgba(59,130,246,.18);flex:0 0 auto;white-space:nowrap}
.gift-meta{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:9.5px;color:var(--tmu);flex-wrap:wrap}
.gift-last{margin-left:auto;color:#64748B}
.gift-result{display:none;padding-top:3px}
.gift-result.on{display:block}
.gift-card.result-on .gift-form-wrap{display:none}
.gr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gr-head b{font-size:13px;color:var(--tm)}
.gr-scope{font-size:9.5px;color:var(--primary);background:var(--primary-light);border-radius:999px;padding:1px 7px}
.gr-stats{margin-left:auto;display:flex;gap:6px}
.gr-stats .pill{font-size:9px;padding:1px 7px}
.gr-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:9px}
.grrow{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px;border:1px solid #F1F5F9;border-radius:7px;background:#fff}
.grrow b{font-size:10.5px;color:var(--tm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grrow .pill{margin-left:auto;font-size:8.5px;padding:1px 5px;flex:0 0 auto}
.grwhy{font-size:8.5px;color:var(--danger);white-space:nowrap;margin-left:2px}
.gr-foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:9.5px;color:var(--tmu);flex-wrap:wrap}
.gr-foot .link{margin-left:auto;font-size:10px}
.gift-hist-row{padding:10px 0;border-bottom:1px solid var(--bdl);font-size:12px;color:var(--tb)}
.gift-hist-row:last-child{border-bottom:0}
.gift-hist-row .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gift-hist-row .top b{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--tm)}
.gift-hist-row .top .right{margin-left:auto;font-size:10px;color:var(--tmu)}
.gift-hist-row .detail{margin-top:4px;font-size:10px;color:var(--tmu);line-height:1.7}
@media(max-width:900px){
  .gift-controls{display:block;padding-top:1px}
  .gift-field{justify-content:space-between;min-height:28px}
  .gift-field+.gift-field{margin-top:6px}
  .gift-field .chips{justify-content:flex-end}
  .gift-controls .chip{font-size:9.5px;padding:3px 7px}
  .gift-hist{display:block;margin-left:0;margin-top:8px;font-size:9.5px}
  .gift-code-row{flex-wrap:wrap;margin-top:8px}
  .gift-code{flex:1 1 100%;height:38px}
  .gift-btn{width:100%;height:36px}
  .gift-meta{font-size:9px;margin-top:6px}
  .gift-last{margin-left:0;width:100%;margin-top:2px}
  .gr-list{grid-template-columns:1fr 1fr}
  .grwhy{white-space:normal}
  .gr-stats{margin-left:0;width:100%;margin-top:2px}
}