:root{
  --blue:#3E6FE1; --blue-bg:#EDF3FE; --blue-line:#C9D8F6;
  --brand-cyan:#56C3DB; --brand-grad:linear-gradient(135deg,#5FC8DD 0%,#4A6FE0 100%);
  --green:#00A870; --green-bg:#E6F7F1;
  --orange:#FF8F1F; --orange-bg:#FFF4E8;
  --red:#E34D4D; --red-bg:#FDEDED;
  --ink:#111827; --ink2:#5B6577; --ink3:#9CA3AF;
  --line:#E5E7EB; --line2:#F1F2F4; --bg:#F5F6F7;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);font-size:13px;line-height:1.6}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
.hide{display:none!important}

.topbar{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 18px;gap:16px;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-grad)}
.logo{height:28px;width:45px;background:url(/logo.png) no-repeat center/contain}
.bname{font-size:13px;font-weight:500;line-height:1.3}
.bsub{font-size:11px;color:var(--ink3);line-height:1.3}
.nav{display:flex;gap:2px;background:#F2F3F5;padding:3px;border-radius:8px}
.nav button{padding:6px 14px;border-radius:6px;font-size:12px;color:var(--ink2)}
.nav button.on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(17,24,39,.08)}
.me{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2)}

.wrap{max-width:1240px;margin:0 auto;padding:18px}
.card{background:#fff;border-radius:12px;padding:16px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.card h3 span{font-size:11.5px;color:var(--ink3);font-weight:400}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1fr 1fr}

.kpi{background:#fff;border-radius:12px;padding:16px}
.kpi .k{font-size:12px;color:var(--ink3)}
.kpi .v{font-size:26px;font-weight:500;line-height:1.2;margin-top:4px}
.kpi .v small{font-size:12px;color:var(--ink3);font-weight:400;margin-left:3px}

.btn{height:44px;border-radius:10px;background:var(--blue);color:#fff;font-size:14px;font-weight:500;
  display:flex;align-items:center;justify-content:center;width:100%}
.btn:active{opacity:.85}
.btn.sm{height:34px;width:auto;padding:0 14px;font-size:13px}
.btn.gh{background:#fff;color:var(--blue);border:1px solid var(--blue-line)}
.btn.gy{background:#F2F3F5;color:var(--ink2)}
.btn.dis{background:#E9EBEF;color:#B4BBC6}

.badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:500}
.b-p0{background:var(--red-bg);color:var(--red)}
.b-p1{background:var(--orange-bg);color:var(--orange)}
.b-p2{background:var(--blue-bg);color:var(--blue)}
.b-ok{background:var(--green-bg);color:var(--green)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--ink3);font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line2)}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:14px;background:#F4F5F7;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:3px}
.bar i.b{background:var(--red)}
.bar i.o{background:var(--orange)}

.list{background:#fff;border-radius:12px;overflow:hidden}
.item{display:flex;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line2);cursor:pointer}
.item:last-child{border-bottom:none}
.item.on{background:var(--blue-bg)}
.item .t{font-size:13.5px;font-weight:500}
.item .s{font-size:11.5px;color:var(--ink3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}

.field{margin-bottom:12px}
.field label{display:block;font-size:11.5px;color:var(--ink3);margin-bottom:5px}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:13px;font-family:inherit;outline:none;background:#fff}
input:focus,textarea:focus{border-color:var(--blue)}
textarea{resize:none;line-height:1.6}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:rgba(17,24,39,.88);
  color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;z-index:99}
.toast.on{opacity:1}

/* 手机端 */
.phone-wrap{display:flex;justify-content:center;padding:10px 0 30px}
.phone{width:400px;background:#fff;border:1px solid #DDE1E6;border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;height:740px;box-shadow:0 10px 30px rgba(17,24,39,.07)}
.p-status{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;color:var(--ink2)}
.p-nav{height:44px;border-bottom:1px solid var(--line2);display:flex;align-items:center;padding:0 12px;gap:8px}
.p-nav .ttl{flex:1;text-align:center;font-size:14px;font-weight:500}
.p-body{flex:1;overflow-y:auto;background:#F7F8FA;padding:14px}
.p-body::-webkit-scrollbar{width:0}
.p-foot{padding:10px 14px 16px;background:#fff;border-top:1px solid var(--line2)}
.p-brand{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line2)}
.p-brand .logo{height:22px;width:36px}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{background:#fff;border-radius:11px;padding:13px 4px 10px;display:flex;flex-direction:column;
  align-items:center;gap:6px;border:1px solid transparent}
.cat .ic{width:32px;height:32px;border-radius:10px;background:var(--blue-bg);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500}
.cat .nm{font-size:11.5px}
.cat.off{background:#FBFBFC;border-color:var(--line2)}
.cat.off .ic{background:#F1F2F4;color:#BFC5CE}
.cat.off .nm{color:#BFC5CE}

.scene{display:flex;align-items:center;gap:10px;padding:13px 14px;background:#fff;border-bottom:1px solid var(--line2)}
.scene:last-child{border-bottom:none}
.scene .tx{flex:1;font-size:13px}
.scene .ar{color:#CBD2DC}
.sev-opt{display:flex;gap:11px;padding:14px;background:#fff;border-bottom:1px solid var(--line2);align-items:center}
.sev-opt:last-child{border-bottom:none}
.sev-opt.on{background:var(--blue-bg)}
.sev-opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid #D3D8E0;flex-shrink:0}
.sev-opt.on .dot{border-color:var(--blue);background:var(--blue)}
.sev-opt .lb{font-size:13.5px;font-weight:500}
.sev-opt .ds{font-size:11.5px;color:var(--ink3);margin-top:2px}

.tl{background:#fff;border-radius:12px;padding:14px}
.tl-i{position:relative;padding-left:20px;padding-bottom:14px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:"";position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.tl-i::after{content:"";position:absolute;left:6.5px;top:16px;bottom:0;width:1px;background:var(--line)}
.tl-i:last-child::after{display:none}
.tl-i .h{font-size:13px;font-weight:500}
.tl-i .s{font-size:11.5px;color:var(--ink3);margin-top:2px}