:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#18202a;
  --muted:#6f7c8e;
  --line:#d8e0ec;
  --primary:#2f6fed;
  --primary-soft:#e9f0ff;
  --success:#178c52;
  --success-soft:#e8f8f0;
  --warning:#bb6b00;
  --warning-soft:#fff2df;
  --danger:#c63d3d;
  --danger-soft:#fdeaea;
  --shadow:0 10px 30px rgba(18,32,58,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1280px;margin:0 auto;padding:24px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(245,247,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{font-size:22px;font-weight:700;color:var(--text)}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:400}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{padding:9px 14px;border-radius:999px;color:var(--text);background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(18,32,58,.03)}
.nav a.active,.nav a:hover{background:var(--primary-soft);border-color:#bfd1ff;text-decoration:none}
.userbox{display:flex;align-items:center;gap:10px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:8px 0 20px}
.page-head h1{margin:0;font-size:28px}
.page-head p{margin:6px 0 0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:20px}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpi{padding:20px}
.kpi .label{font-size:13px;color:var(--muted);margin-bottom:10px}
.kpi .value{font-size:30px;font-weight:700}
.kpi .hint{margin-top:10px;color:var(--muted);font-size:13px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
th{font-size:13px;color:var(--muted);font-weight:600;background:#fafcff}
tr:hover td{background:#fcfdff}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.badge.primary{background:var(--primary-soft);color:var(--primary);border-color:#c7d6ff}
.badge.success{background:var(--success-soft);color:var(--success);border-color:#bce7d1}
.badge.warning{background:var(--warning-soft);color:var(--warning);border-color:#ffd8a0}
.badge.danger{background:var(--danger-soft);color:var(--danger);border-color:#f3c0c0}
.badge.muted{background:#eef3f9;color:#5a6677;border-color:#d5deea}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;text-decoration:none;font-weight:600}
.btn:hover{text-decoration:none;background:#fbfcff}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.success{background:var(--success);border-color:var(--success);color:#fff}
.btn.warning{background:var(--warning);border-color:var(--warning);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.small{padding:7px 10px;font-size:13px;border-radius:10px}
form .grid{margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:13px;font-weight:600;color:#334055}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);outline:none
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#a7c1ff;box-shadow:0 0 0 4px rgba(47,111,237,.08)}
.help{font-size:12px;color:var(--muted)}
.alert{padding:14px 16px;border-radius:14px;border:1px solid var(--line);margin:0 0 16px}
.alert.success{background:var(--success-soft);border-color:#bce7d1;color:#17533a}
.alert.error{background:var(--danger-soft);border-color:#f2c2c2;color:#7d2e2e}
.alert.info{background:#eef4ff;border-color:#cadaff;color:#2349a6}
.stack{display:flex;flex-direction:column;gap:18px}
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{padding:12px 0;border-bottom:1px solid var(--line)}
.small{font-size:12px;color:var(--muted)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(520px,100%);padding:28px}
.searchbar{display:flex;gap:10px;flex-wrap:wrap}
.searchbar > *{flex:1}
.text-right{text-align:right}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}
.footer-note{padding:22px 0 10px;color:var(--muted);font-size:12px}
@media (max-width: 840px){
  .topbar .container,.container{padding:16px}
  .page-head{flex-direction:column}
}