:root{--bg:#f4f7fc;--panel:rgba(255,255,255,.86);--panel-solid:#fff;--text:#182033;--muted:#8a93a6;--line:#e7ebf3;--primary:#5870e5;--primary-soft:#eef1ff;--success:#2fb47c;--danger:#ef5f73;--warning:#e9a23b;--radius:20px;--shadow:0 18px 50px rgba(49,68,130,.09)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 12%,#e9edff 0,transparent 28%),radial-gradient(circle at 88% 78%,#e9f5ff 0,transparent 30%)}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font:inherit}.sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:224px;padding:14px;background:rgba(255,255,255,.92);border-right:1px solid var(--line);backdrop-filter:blur(22px)}.brand{height:62px;display:flex;align-items:center;gap:12px;padding:6px 10px;color:var(--text);border-bottom:1px solid var(--line);margin-bottom:10px}.brand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#f1f3ff,#e6eaff);color:var(--primary);font-size:18px;font-weight:800;box-shadow:inset 0 0 0 1px #e1e5f8}.brand b,.brand small{display:block}.brand b{font-size:17px}.brand small{color:var(--muted)}nav a{display:flex;align-items:center;gap:12px;color:#626c7e;padding:11px 13px;margin:4px 0;border-radius:13px;transition:.2s}nav a:hover,nav a.active{color:var(--primary);background:var(--primary-soft)}nav a i{width:22px;text-align:center;font-style:normal;font-size:17px}.shell{position:relative;margin-left:224px;min-height:100vh}.topbar{position:sticky;top:0;z-index:15;height:64px;padding:0 28px;display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}.breadcrumb{font-weight:650}.top-actions{margin-left:auto;display:flex;gap:17px;align-items:center;color:var(--muted)}.icon-btn{border:0;background:transparent;border-radius:10px;padding:8px;cursor:pointer;color:var(--text)}.menu-toggle{display:none}.content{padding:24px;max-width:1500px;margin:auto}.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 36px;border-radius:24px;background:linear-gradient(120deg,#fff,#f3f6ff 55%,#f2fbfa);border:1px solid #fff;box-shadow:var(--shadow);margin-bottom:18px}.hero .eyebrow{color:var(--primary);letter-spacing:1.4px;font-size:12px;font-weight:800;text-transform:uppercase}.hero h1{font-size:31px;margin:8px 0 4px}.hero p{color:var(--muted);margin:0}.hero-badge{padding:14px 22px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:17px;min-width:190px}.hero-badge span,.hero-badge strong{display:block}.hero-badge span{color:var(--muted)}.hero-badge strong{font-size:17px;margin-top:4px}.stats{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:16px;margin:18px 0}.stat-card,.card{position:relative;background:var(--panel);border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.stat-card{padding:22px;overflow:hidden}.stat-card:after{content:"";position:absolute;width:74px;height:74px;border-radius:50%;right:-15px;top:-18px;background:#e9ecff}.stat-card.green:after{background:#e3f5ec}.stat-card.orange:after{background:#faeee0}.stat-card.purple:after{background:#f0e5fa}.stat-card span,.stat-card small{display:block;color:var(--muted)}.stat-card strong{display:block;font-size:29px;margin:7px 0}.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.grid.equal{grid-template-columns:repeat(2,1fr)}.card{padding:22px;margin-bottom:18px}.card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.card h2,.card h3{margin:0}.muted{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;padding:10px 17px;background:var(--primary);color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(88,112,229,.2)}.btn:hover{filter:brightness(.97)}.btn.secondary{background:var(--primary-soft);color:var(--primary);box-shadow:none}.btn.danger{background:#fff0f2;color:var(--danger);box-shadow:none}.btn.small{padding:6px 10px;border-radius:9px;font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:600}.input,input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=url],input[type=search],input[type=tel],select,textarea{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.8);border-radius:12px;padding:11px 13px;color:var(--text);outline:none;transition:.2s}.input:focus,input:focus,select:focus,textarea:focus{border-color:#aebbf6;box-shadow:0 0 0 4px rgba(88,112,229,.08)}textarea{min-height:110px;resize:vertical}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}table{width:100%;border-collapse:collapse;white-space:nowrap;background:rgba(255,255,255,.45)}th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line)}th{font-size:12px;color:var(--muted);background:#f8f9fd}tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:3px 9px;border-radius:99px;background:var(--primary-soft);color:var(--primary);font-size:12px}.badge.success{background:#e8f8f1;color:var(--success)}.badge.danger{background:#fff0f2;color:var(--danger)}.badge.warning{background:#fff6e7;color:#b97915}.alert{padding:12px 16px;border-radius:12px;margin-bottom:14px;background:var(--primary-soft);color:var(--primary)}.alert.error{background:#fff0f2;color:var(--danger)}.alert.success{background:#e8f8f1;color:var(--success)}.pager{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:15px;color:var(--muted)}footer{text-align:center;color:var(--muted);padding:10px 20px 25px}.empty{text-align:center;color:var(--muted);padding:36px}.auth-page{display:grid;place-items:center;min-height:100vh;padding:20px}.auth-card{width:min(430px,100%);padding:36px;background:rgba(255,255,255,.88);border:1px solid #fff;border-radius:25px;box-shadow:0 25px 70px rgba(46,64,120,.13);backdrop-filter:blur(25px)}.auth-logo{display:grid;place-items:center;margin:0 auto 14px;width:56px;height:56px;border-radius:17px;background:var(--primary-soft);color:var(--primary);font-size:23px;font-weight:800}.auth-card h1{text-align:center;margin:0 0 5px}.auth-card>p{text-align:center;color:var(--muted);margin:0 0 25px}.auth-card .field{margin-bottom:14px}.auth-card .btn{width:100%;margin-top:7px}.auth-links{display:flex;justify-content:space-between;margin-top:17px}.code{font-family:"SFMono-Regular",Consolas,monospace;background:#161b2c;color:#dce4ff;padding:15px;border-radius:13px;overflow:auto;white-space:pre-wrap}.toast-stack{position:fixed;right:20px;bottom:20px;z-index:50}.toast{padding:12px 16px;background:#242b3c;color:#fff;border-radius:12px;margin-top:8px;box-shadow:var(--shadow)}body.dark{--bg:#10131a;--panel:rgba(27,32,43,.9);--panel-solid:#1b202b;--text:#edf1fa;--muted:#929caf;--line:#2c3341;--primary-soft:#242d53;--shadow:0 18px 50px rgba(0,0,0,.2)}body.dark:before{opacity:.14}body.dark .sidebar,body.dark .topbar{background:rgba(22,26,35,.9)}body.dark th{background:#202632}body.dark input,body.dark select,body.dark textarea{background:#181d27}body.dark .hero{background:linear-gradient(120deg,#1d2330,#1c2538)}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.shell{margin-left:0}.menu-toggle{display:block}.topbar{padding:0 15px}.content{padding:15px}.hero{padding:22px;align-items:flex-start;flex-direction:column}.hero h1{font-size:25px}.hero-badge{width:100%}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:16px}.form-grid{grid-template-columns:1fr}.grid.equal{grid-template-columns:1fr}.top-actions span{display:none}}
@media(max-width:430px){.stats{grid-template-columns:1fr}.auth-card{padding:25px}}
.page-head,.card-head,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.page-head h1{margin:0;font-size:28px}.page-head p{margin:4px 0 0;color:var(--muted)}.card-grid,.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:18px}.card-grid>.card{margin:0}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.toolbar input{max-width:320px}.tabs{display:flex;gap:5px;overflow:auto}.tabs a{white-space:nowrap;padding:6px 10px;border-radius:9px}.tabs a.active{background:var(--primary-soft)}.span-2{grid-column:1/-1}fieldset{border:1px solid var(--line);border-radius:13px;padding:12px}summary{cursor:pointer;color:var(--primary)}.alert.warning{background:#fff6e7;color:#a66a0d}.alert pre{margin:8px 0 0;white-space:pre-wrap}.auth-card .field{margin-bottom:14px}.auth-card .btn,.auth-card .btn.primary{width:100%;margin-top:6px}.page-head+.card{margin-top:18px}.stat-card.red:after{background:#fde7eb}.btn.primary{background:var(--primary);color:#fff}
.auth-foot{text-align:center;margin:18px 0 0;font-size:13px}
.overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.overview-grid div{padding:14px;border-radius:14px;background:rgba(244,247,252,.8)}
.overview-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.overview-grid strong{font-size:15px}
.quick-links{display:grid;gap:10px}
.quick-links a{display:block;padding:14px 16px;border-radius:14px;background:var(--primary-soft);color:var(--primary);font-weight:600}
.quick-links a:hover{filter:brightness(.97)}
@media(max-width:760px){.page-head,.card-head,.toolbar{align-items:stretch;flex-direction:column}.toolbar input{max-width:none}.span-2{grid-column:auto}.grid-2,.grid.equal{grid-template-columns:1fr}.overview-grid{grid-template-columns:1fr}}

/* inputs without type= also get form styles */
.field input,.auth-card input,.auth-card select,.auth-card textarea,
.card input,.card select,.card textarea{
  width:100%;border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:12px;padding:11px 13px;color:var(--text);outline:none;transition:.2s
}
.field input:focus,.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus,
.card input:focus,.card select:focus,.card textarea:focus{
  border-color:#aebbf6;box-shadow:0 0 0 4px rgba(88,112,229,.08)
}
/* <label>文字<input></label> 这种写法也要有间距 */
.form-grid>label,.card form>label,.auth-card>form>label{display:block;font-weight:600;margin-bottom:14px}
label>input,label>select,label>textarea{margin-top:6px}
label input[type=checkbox],label input[type=radio],
.card input[type=checkbox],.card input[type=radio]{width:auto;margin:0 6px 0 0;padding:0}
label>span{display:inline-flex;align-items:center;gap:2px;margin:6px 10px 0 0;font-weight:400;color:var(--muted)}
.card form input[type=hidden]{display:none}

/* logout confirm */
.logout-card{text-align:center}
.logout-x{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;border-radius:22px;background:#fff0f2;font-size:32px;line-height:1}
.logout-card h1{margin:0 0 6px}
.logout-card>p{margin:0 0 22px}
.logout-actions{display:grid;gap:10px}
.logout-actions .btn{width:100%;margin:0}

/* dark mode */
body.dark{
  --bg:#121722;--panel:rgba(28,34,48,.94);--panel-solid:#1c2230;--text:#e8edf8;--muted:#9aa3b5;
  --line:#2a3344;--primary:#7b8ff0;--primary-soft:#242b45;--success:#3ecf94;--danger:#f07184;--warning:#e9b15a;
  --shadow:0 18px 50px rgba(0,0,0,.28)
}
body.dark:before{background:radial-gradient(circle at 12% 12%,rgba(88,112,229,.16) 0,transparent 32%),radial-gradient(circle at 88% 78%,rgba(70,140,200,.1) 0,transparent 34%);opacity:1}
body.dark .sidebar,body.dark .topbar{background:rgba(22,27,38,.94);border-color:var(--line)}
body.dark .brand{color:var(--text);border-color:var(--line)}
body.dark .brand-icon{background:linear-gradient(145deg,#2a3350,#243056);color:#9aabff;box-shadow:inset 0 0 0 1px #334066}
body.dark nav a{color:#a0a8bb}
body.dark nav a:hover,body.dark nav a.active{color:#c2cbff;background:var(--primary-soft)}
body.dark .hero{background:linear-gradient(120deg,#1d2433,#1a2740 55%,#1a2c34);border-color:var(--line)}
body.dark .hero-badge{background:rgba(255,255,255,.04);border-color:var(--line)}
body.dark .stat-card,body.dark .card{background:var(--panel);border-color:var(--line)}
body.dark .stat-card:after{background:#2a3350}
body.dark .stat-card.green:after{background:#1d3a30}
body.dark .stat-card.orange:after{background:#3a2f1f}
body.dark .stat-card.purple:after{background:#322840}
body.dark .stat-card.red:after{background:#3a242a}
body.dark .overview-grid div{background:rgba(18,23,34,.75)}
body.dark .quick-links a{background:var(--primary-soft);color:#b6c2ff}
body.dark table{background:rgba(18,23,34,.35)}
body.dark th{background:#1a2130;color:var(--muted)}
body.dark td,body.dark th{border-color:var(--line)}
body.dark .table-wrap{border-color:var(--line)}
body.dark input,body.dark select,body.dark textarea,
body.dark .field input,body.dark .auth-card input,body.dark .auth-card select,body.dark .auth-card textarea,
body.dark .card input,body.dark .card select,body.dark .card textarea{
  background:#171c28;border-color:#313a4d;color:var(--text)
}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus,
body.dark .field input:focus,body.dark .auth-card input:focus{
  border-color:#6d80df;box-shadow:0 0 0 4px rgba(88,112,229,.18)
}
body.dark .auth-card{background:rgba(28,34,48,.94);border-color:#2f3a4f}
body.dark .auth-logo{background:var(--primary-soft);color:#b6c2ff}
body.dark .logout-x{background:#3a242a}
body.dark .btn.secondary{background:var(--primary-soft);color:#b6c2ff}
body.dark .btn.danger{background:#3a242a;color:#f5a0ac}
body.dark .badge{background:var(--primary-soft);color:#b6c2ff}
body.dark .alert{background:var(--primary-soft);color:#b6c2ff}
body.dark .alert.error{background:#3a242a;color:#f5a0ac}
body.dark .alert.success{background:#1d3a30;color:#7ee0b4}
body.dark footer{color:var(--muted)}