:root{ --bg:#f7f8fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --primary:#2563eb; --ring:#e2e8f0; }
*{ box-sizing:border-box }
body{ margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
a{ color:var(--primary); text-decoration:none }
.container{ display:flex; min-height:100vh; }
.sidebar{ width:260px; background:#0b1220; color:#cbd5e1; padding:20px; position:sticky; top:0; height:100vh }
.brand{ font-weight:800; font-size:22px; margin-bottom:20px; color:#fff }
.nav a{ display:block; padding:10px 12px; border-radius:10px; color:#cbd5e1; }
.nav a.active, .nav a:hover{ background:#111827; color:#fff }
.main{ flex:1; padding:24px; }
.header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card{ background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.table{ width:100%; border-collapse:collapse }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--ring); text-align:left; vertical-align:top }
.table th{ background:#f1f5f9 }
.btn{ display:inline-block; padding:8px 12px; border:1px solid var(--ring); border-radius:10px; background:#fff; color:#0f172a; cursor:pointer }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary) }
.btn.warn{ background:#ef4444; color:#fff; border-color:#ef4444 }
.btn.ghost{ background:#fff }
.badge{ padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--ring) }
.input,.select{ width:100%; padding:10px 12px; border:1px solid var(--ring); border-radius:10px; background:#fff }
.grid{ display:grid; gap:12px }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.actions{ display:flex; gap:6px; flex-wrap:wrap }
.searchbar{ display:flex; gap:8px; align-items:center }
.pagination{ display:flex; gap:6px; margin-top:10px }
.hide{ display:none }
@media (max-width: 900px){
 .sidebar{ position:fixed; z-index:20; transform:translateX(-100%); transition:.2s }
 .sidebar.open{ transform:none }
 .main{ padding:16px }
 .grid-3{ grid-template-columns:1fr }
}
.print-a4{ width:210mm; min-height:297mm; padding:20mm; background:#fff; color:#000; }
.print-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px }
.print-tbl{ width:100%; border-collapse:collapse }
.print-tbl th,.print-tbl td{ border:1px solid #000; padding:6px }
@media print{
  body{ background:#fff }
  .no-print{ display:none !important }
}