:root{
  --bg:#060b1e; --bg2:#0a1430; --panel:rgba(255,255,255,.045); --border:rgba(120,160,255,.16);
  --border2:rgba(120,160,255,.30); --text:#e6edf7; --muted:#8aa0c8;
  --accent:#2dd4bf; --accent2:#38bdf8; --accent3:#818cf8; --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  background-image:radial-gradient(800px 500px at 50% -10%,rgba(56,189,248,.16),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2))}
h1{font-size:18px;margin:22px 0 4px}
.sub{color:var(--muted);font-size:12px;margin-bottom:18px;text-align:center;max-width:520px;line-height:1.6}
.phone{width:360px;height:740px;border-radius:38px;padding:12px;position:relative;
  background:linear-gradient(160deg,#0c1838,#070d22);border:1px solid var(--border2);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(45,212,191,.18)}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:120px;height:22px;background:#000;border-radius:14px;z-index:5}
.screen{width:100%;height:100%;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0a1430,#070d22)}
.s-top{height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px 8px;
  font-size:13px;color:var(--text);background:linear-gradient(180deg,rgba(45,212,191,.16),transparent)}
.s-body{flex:1;overflow:auto;padding:14px}
.s-tab{height:58px;display:flex;border-top:1px solid var(--border);background:rgba(6,11,30,.9)}
.s-tab div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;color:var(--muted)}
.s-tab div.active{color:var(--accent)}
.s-tab .ic{width:20px;height:20px;border-radius:6px;background:rgba(120,160,255,.18);display:grid;place-items:center;font-size:12px}
.s-tab div.active .ic{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04121a}
.hero{background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(56,189,248,.08));border:1px solid var(--border);
  border-radius:14px;padding:14px;margin-bottom:14px}
.hero .t{font-size:14px;font-weight:700}
.hero .d{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.6}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.kpi .v{font-size:22px;font-weight:800;background:linear-gradient(135deg,#fff,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .k{font-size:10.5px;color:var(--muted);margin-top:3px}
.sec-h{font-size:13px;font-weight:700;margin:6px 2px 10px;display:flex;align-items:center;gap:8px}
.sec-h::before{content:"";width:4px;height:13px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px}
.card .row1{display:flex;justify-content:space-between;align-items:center}
.card .title{font-size:13px;font-weight:600}
.card .meta{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.6}
.pill{padding:3px 9px;border-radius:20px;font-size:10.5px}
.pill.ok{color:var(--ok);background:rgba(52,211,153,.12)}
.pill.warn{color:var(--warn);background:rgba(251,191,36,.12)}
.pill.danger{color:var(--danger);background:rgba(248,113,113,.12)}
.btn{display:block;width:100%;padding:11px;border:none;border-radius:11px;margin-top:6px;font-weight:600;font-size:13px;
  color:#04121a;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 20px rgba(45,212,191,.25)}
.field{margin-bottom:12px}
.field label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:5px}
.field input,.field select{width:100%;padding:10px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--border);color:var(--text);font-size:13px;outline:none}
.login-mask{position:absolute;inset:12px;border-radius:28px;background:rgba(4,8,20,.92);z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}
.login-mask input{width:100%;padding:11px;border-radius:9px;margin-bottom:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--border);color:var(--text);font-size:13px;outline:none}
.login-mask button{width:100%;padding:11px;border:none;border-radius:9px;font-weight:600;color:#04121a;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.login-mask .err{color:var(--danger);font-size:11px;min-height:14px;margin-bottom:8px}
.login-mask .hint{color:var(--muted);font-size:11px;margin-top:10px}