*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#eef3f4;
  --side:#fff;
  --card:#fff;
  --ink:#1f2937;
  --muted:#8b95a1;
  --line:#eef1f4;
  --accent:#12b886;
  --accent-deep:#0ca678;
  --accent-soft:#e6f8f1;
  --blue:#3b82f6;
  --purple:#8b5cf6;
  --amber:#f59e0b;
  --pink:#f472b6;
  --sky:#06b6d4;
  --red:#ef4444;
  --sans:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
html,body{height:100%}
body{
  font:14px/1.65 var(--sans);
  color:var(--ink);
  background:var(--bg);
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
.layout,.shell{display:flex;min-height:100vh}
.side{
  width:228px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--side);border-right:1px solid #edf1f3;
}
.logo,.brand-side{
  padding:22px 20px 18px;display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:17px;color:#111827;letter-spacing:.4px;
}
.logo .mark,.brand-side::before{
  content:"";display:inline-flex;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(180deg,#34d399,#12b886);flex-shrink:0;
  box-shadow:0 6px 14px rgba(18,184,134,.28);
}
.logo .mark{width:32px;height:32px;background:linear-gradient(180deg,#34d399,#12b886);border-radius:10px;box-shadow:0 6px 14px rgba(18,184,134,.28)}
.logo small{display:block;font-size:11px;color:#9aa3af;font-weight:500;letter-spacing:.8px;margin-top:1px}
.menu,.side nav{flex:1;padding:8px 12px 18px;display:flex;flex-direction:column;gap:2px}
.menu a,.side nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;color:#64748b;
  border-radius:10px;font-size:13.5px;font-weight:500;
}
.menu a .ico,.side nav a .ico{
  width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;background:#f3f5f7;color:#64748b;flex-shrink:0;
}
.menu a:hover,.side nav a:hover{color:var(--accent);background:var(--accent-soft)}
.menu a.on,.side nav a.on{background:var(--accent-soft);color:var(--accent-deep);font-weight:700}
.menu a.on .ico,.side nav a.on .ico{background:#fff;color:var(--accent)}
.main{flex:1;padding:22px 28px 36px;min-width:0;max-width:1480px}
.head,.topbar{
  display:flex;justify-content:flex-end;align-items:center;margin-bottom:14px;gap:10px;
}
.head-right{display:flex;align-items:center;gap:10px}
.crumb{margin-right:auto;color:#94a3b8;font-size:13px}
.crumb b{color:#334155;font-weight:700}
.who{
  background:#fff;border:1px solid #eef1f4;border-radius:999px;padding:5px 12px 5px 6px;
  font-size:13px;color:#475569;display:flex;align-items:center;gap:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.avatar{
  display:inline-flex;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,#34d399,#12b886);color:#fff;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.page-head{margin-bottom:16px}
.page-head h2{margin-bottom:4px}
.welcome{color:#94a3b8;font-size:13px}
h2,h3.page-title{
  font-weight:800;font-size:22px;color:#111827;margin-bottom:16px;letter-spacing:.2px;
}
h3{font-weight:700;font-size:15px;color:#111827;margin-bottom:12px}
.card{
  background:var(--card);border-radius:16px;padding:20px 22px;margin-bottom:16px;overflow-x:auto;
  box-shadow:0 8px 24px rgba(15,23,42,.05);border:1px solid #f3f6f8;
}
.content{padding:0}
.page{display:none}
.page.on{display:block}
.kpis,.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi,.stat{
  background:#fff;border-radius:16px;padding:16px 18px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);border:1px solid #f3f6f8;
  display:flex;align-items:flex-start;gap:12px;min-width:0;
}
.kpi-ico{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.kpi-ico.g{background:#e7f8ef;color:#12b886}
.kpi-ico.b{background:#e8f1ff;color:#3b82f6}
.kpi-ico.t{background:#e6faf6;color:#0d9488}
.kpi-ico.p{background:#f3e8ff;color:#8b5cf6}
.kpi-ico.y{background:#fff7e6;color:#f59e0b}
.kpi-ico.s{background:#e6f7ff;color:#0284c7}
.kpi-ico.pk{background:#ffeaf4;color:#ec4899}
.kpi-ico.o{background:#fff1e8;color:#f97316}
.kpi .k,.stat span{color:#94a3b8;font-size:12.5px;font-weight:500}
.kpi .v,.stat b{font-size:24px;display:block;color:#111827;font-weight:800;margin:2px 0;letter-spacing:-.4px}
.kpi .d{color:#94a3b8;font-size:12px}
.kpi .icon{display:none}
.grid2{display:grid;grid-template-columns:1.6fr .9fr;gap:14px}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 12px;border-bottom:1px solid #f1f5f9;text-align:left;font-size:13px}
th{color:#94a3b8;font-weight:700;background:#fafbfc}
tr:hover td{background:#f8fafb}
label,.f{display:block;margin:10px 0 5px;color:#64748b;font-size:13px;font-weight:600}
input,select,textarea{
  padding:9px 12px;border:1px solid #e5e7eb;border-radius:10px;font:inherit;background:#fff;color:#334155;width:100%;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:#99e6c9;box-shadow:0 0 0 3px rgba(18,184,134,.15)}
textarea{min-height:88px;resize:vertical}
.row,.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>*{flex:1;min-width:140px}
button,.btn{
  display:inline-block;padding:8px 16px;border:0;border-radius:10px;cursor:pointer;font:inherit;font-weight:700;
  background:var(--accent);color:#fff;width:auto;
}
button:hover,.btn:hover{background:var(--accent-deep)}
button.ghost,.ghost,.btn.white{
  background:#fff;color:var(--accent-deep);border:1px solid #c6efe0;
}
button.ghost:hover,.ghost:hover{background:var(--accent-soft)}
button.ok,.btn.ok{background:#12b886;color:#fff;border:0}
button.ok:hover,.btn.ok:hover{background:#0ca678}
.bill-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bill-bar select,.bill-bar input{width:auto;min-width:120px;flex:0 1 auto}
.err,.flash.err{padding:11px 15px;border-radius:12px;margin-bottom:14px;background:#fff5f5;color:#dc2626;border:1px solid #fecaca}
.okmsg,.flash.ok{padding:11px 15px;border-radius:12px;margin-bottom:14px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.flash-bar{position:sticky;top:0;z-index:30;font-weight:600}
.hint,.muted,.meta{color:#94a3b8;font-size:12.5px}
.empty{color:#94a3b8;padding:16px 0}
.badge,.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.badge.on,.tag.g{background:#ecfdf5;color:#059669}
.badge.off{background:#f1f5f9;color:#94a3b8}
.badge.A,.tag.b{background:#eff6ff;color:#2563eb}
.badge.B,.tag.y{background:#fffbeb;color:#d97706}
.badge.tagv{background:#eff6ff;color:#2563eb}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
code{background:#f8fafc;padding:1px 6px;border-radius:6px;font-size:12.5px;color:#0f766e}
pre{background:#f8fafc;border-radius:12px;padding:14px;overflow:auto}
.qr{background:#fff;border-radius:16px;padding:12px;display:inline-block;border:1px solid #eef1f4}
.secret{font-size:16px;letter-spacing:1px;word-break:break-all}
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;padding:8px 4px 0}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar .col{width:42%;min-height:6px;background:linear-gradient(180deg,#34d399,#12b886);border-radius:8px 8px 3px 3px;opacity:.9}
.bar .lab{color:#94a3b8;font-size:12px}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 16px}
.slots3{grid-template-columns:1fr 1fr 1fr}
.slot{background:#f8fafb;border:1px solid #eef1f4;border-radius:14px;padding:14px 16px}
.slot h4{font-size:13px;color:#94a3b8;margin:0 0 10px;font-weight:700}
.slot input,.slot select{margin:0 0 8px;display:block}
.feed{list-style:none}
.feed li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--accent)}
.chat-pick{
  border:1px solid #eef1f4;border-radius:12px;padding:10px 12px;background:#f8fafb;
  max-height:260px;overflow:auto;margin-bottom:8px;
}
.chat-pick-bar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid #eef1f4;
  position:sticky;top:0;background:#f8fafb;z-index:1;
}
.chat-pick-all,.chat-pick-item{
  display:flex;align-items:center;gap:8px;margin:0;color:#334155;cursor:pointer;font-size:13px;
}
.chat-pick-all input,.chat-pick-item input{width:auto;flex-shrink:0}
.chat-pick-item{padding:7px 8px;border-radius:8px}
.chat-pick-item:hover{background:#fff}
.chat-pick-item .badge{margin-left:auto}
.chat-pick-item .hid{color:#94a3b8;font-size:12px}

.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(1200px 500px at 50% -10%,#d9f7ea 0%,transparent 55%),linear-gradient(180deg,#f7fafb 0%,#eef3f4 100%);
}
.topline{font-size:12.5px;color:#94a3b8;letter-spacing:1.5px;margin-bottom:16px}
.topline b{color:#334155;font-weight:700}
.auth-card,.box{
  width:400px;max-width:92vw;background:#fff;border-radius:18px;padding:34px 36px 26px;
  border:1px solid #eef1f4;box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.auth h1{font-size:22px;text-align:center;margin:0 0 4px;color:#111827;letter-spacing:.4px;font-weight:800}
.sub{text-align:center;color:#94a3b8;font-size:12px;margin-bottom:18px;letter-spacing:1px}
.auth label{display:block;margin:12px 0 5px;color:#64748b;font-size:13px;font-weight:600}
.auth input{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px}
.auth input:focus{outline:0;border-color:#99e6c9;box-shadow:0 0 0 3px rgba(18,184,134,.15)}
.auth button{
  width:100%;margin-top:22px;padding:11px;border:0;border-radius:10px;cursor:pointer;
  color:#fff;font-size:15px;font-weight:700;letter-spacing:3px;
  background:linear-gradient(180deg,#34d399,#12b886);
}
.auth button:hover{background:linear-gradient(180deg,#2fca90,#0ca678)}
.tip{margin-top:18px;color:#94a3b8;font-size:11.5px;text-align:center;line-height:1.9}
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  .layout,.shell{flex-direction:column}
  .side{width:100%}
  .menu{flex-direction:row;overflow:auto}
  .grid2,.kpis,.slots,.slots3{grid-template-columns:1fr}
}