:root{--bg:#f5f6f8;--card:#fff;--line:#e7e8ec;--text:#1b1d23;--sub:#5d6170;--mute:#9aa0ad;--pri:#e8336d;--pri-d:#c71f57;--blue:#2f6fed;
  --ok:#16a34a;--warn:#d97706;--bad:#dc2626;--side:#14151b;--r:10px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,sans-serif}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:var(--text);outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--pri)}
.layout{display:flex;min-height:100vh}
.side{width:216px;flex:none;background:var(--side);color:#c9cbd3;position:sticky;top:0;height:100vh;overflow-y:auto;padding:16px 10px}
.brand{font-weight:800;font-size:18px;color:#fff;padding:4px 10px 18px;display:flex;align-items:center;gap:8px}
.brand i{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#ff2d6f,#ff7a3d);display:inline-block}
.side h6{margin:14px 10px 6px;font-size:11px;color:#6b6e7a;font-weight:600;letter-spacing:.5px}
.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#c9cbd3;font-size:13.5px}
.side a:hover{background:#1f2029}
.side a.on{background:#2a1b25;color:#fff}
.side a.on:before{content:"";width:3px;height:14px;border-radius:2px;background:var(--pri);margin-left:-6px}
.side .cnt{margin-left:auto;background:var(--pri);color:#fff;border-radius:9px;font-size:11px;padding:0 6px}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{margin:0;font-size:17px}
.top .u{color:var(--sub);font-size:13px;display:flex;gap:14px;align-items:center}
.wrap{padding:20px 24px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.card h3{margin:0 0 12px;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.card h3 small{color:var(--mute);font-weight:400;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .l{color:var(--sub);font-size:12.5px}
.kpi .v{font-size:24px;font-weight:750;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{color:var(--mute);font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;min-width:160px}
.toolbar .sp{flex:1}
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 14px;color:var(--text);white-space:nowrap}
.btn:hover{border-color:#c9ccd4}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri-d)}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn.danger{color:var(--bad)}
.btn.link{border:0;background:none;color:var(--blue);padding:3px 6px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--sub);font-weight:600;background:#fafbfc;border-bottom:1px solid var(--line);padding:9px 10px;white-space:nowrap}
td{border-bottom:1px solid #f0f1f4;padding:8px 10px;vertical-align:middle}
tr:hover td{background:#fcfcfd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.thumb{width:42px;height:56px;border-radius:6px;object-fit:cover;background:#eee;display:block}
.thumb.wide{width:96px;height:48px}
.pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:#eef0f4;color:var(--sub)}
.pill.ok{background:#e7f6ec;color:var(--ok)}.pill.warn{background:#fdf3e2;color:var(--warn)}.pill.bad{background:#fde8e8;color:var(--bad)}.pill.vip{background:#fbf1d9;color:#9a6a12}
.pager{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:12px;color:var(--sub);font-size:13px}
.modal-mask{position:fixed;inset:0;background:rgba(15,16,22,.45);z-index:40;display:flex;justify-content:flex-end}
.modal{background:#fff;width:min(560px,100vw);height:100vh;overflow-y:auto;padding:20px 22px;box-shadow:-10px 0 30px rgba(0,0,0,.1);animation:slide .2s ease-out}
.modal.wide{width:min(900px,100vw)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.modal h2{margin:0 0 16px;font-size:17px;display:flex;justify-content:space-between}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:4px}
.form-row .hint{font-size:12px;color:var(--mute);margin-top:3px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}
.upl{display:flex;gap:6px}
.upl input{flex:1}
.preview{margin-top:6px;max-height:120px;border-radius:6px}
.foot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;position:sticky;bottom:-20px;background:#fff;padding:12px 0}
.login{max-width:360px;margin:12vh auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
.login h2{margin:0 0 18px}
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:99}
#toast div{background:#1b1d23;color:#fff;padding:8px 16px;border-radius:8px;animation:fade 2.4s forwards}
@keyframes fade{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
.chart{width:100%;height:220px;display:block}
.chart .bar{fill:var(--c,#2f6fed)}
.chart .bar:hover,.chart .hit:hover+.bar{opacity:.75}
.chart .ax{fill:var(--mute);font-size:11px}
.chart .gl{stroke:#eef0f3}
.tip{position:fixed;z-index:60;background:#1b1d23;color:#fff;font-size:12px;padding:6px 9px;border-radius:6px;pointer-events:none;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:4px 12px;font-size:12.5px;color:var(--sub)}
.seg button.on{background:var(--text);color:#fff}
.empty{text-align:center;color:var(--mute);padding:40px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px;margin-bottom:14px}
.kv b{color:var(--sub);font-weight:500}