:root{
  --blue:#1f4f8f;
  --blue-2:#2d64b3;
  --blue-3:#3b7bd6;
  --bg:#f1f5fb;
  --text:#0d1b2a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--blue);color:#fff}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue-2),var(--blue-3));font-weight:800}
.appname{font-weight:700;letter-spacing:.3px}
.user .btn{margin-left:8px}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 60px)}
.sidebar{background:#e6eefb;padding:14px;border-right:2px solid #d4e0f5}
.sidebar a{display:block;padding:10px 12px;margin-bottom:8px;color:#123d6a;text-decoration:none;background:#fff;border:1px solid #d4e0f5;border-radius:6px}
.sidebar a:hover{background:#f7faff}
.content{padding:18px}
.footer{padding:12px;text-align:center;color:#335;}

h1,h2{margin:0 0 12px}
.box{background:#fff;border:1px solid #d4e0f5;border-radius:8px;padding:14px;margin:10px 0}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1 1 280px}
.btn{display:inline-block;background:var(--blue);color:#fff;border:none;padding:8px 12px;border-radius:6px;text-decoration:none}
.btn.secondary{background:#3b7bd6aa}
.btn.small{padding:6px 10px;font-size:13px}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #d4e0f5}
.table th,.table td{padding:8px;border-bottom:1px solid #d4e0f5;text-align:left;font-size:14px}
.table th{background:#f0f5ff}
.form label{display:block;margin:8px 0 4px}
.form input,.form select,.form textarea{width:100%;padding:8px;border:1px solid #cdd8ee;border-radius:6px;background:#fff}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;color:#fff;font-size:12px}
.kpi{display:flex;gap:12px;flex-wrap:wrap}
.kpi .card{flex:1 1 200px;background:#fff;border:1px solid #d4e0f5;border-radius:8px;padding:12px}
.kpi .val{font-size:22px;font-weight:800;color:#0b2c57}
.kpi .sub{font-size:12px;color:#456}
.tag{display:inline-block;padding:4px 6px;font-size:11px;border:1px solid #cdd8ee;border-radius:6px;background:#fff;margin-right:6px}
.notice{padding:10px;background:#fcf7e7;border:1px solid #f0e0b0;border-radius:8px}
.alert{padding:10px;background:#fde9e9;border:1px solid #f6c5c5;border-radius:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}