:root{
  --bg:#f4f7fb; --card:#fff; --primary:#2563eb; --primary-2:#0ea5e9;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626;
  --text:#0f172a; --text-muted:#64748b; --border:rgba(15,23,42,.12);
  --radius:12px; --shadow:0 8px 20px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;transition:.2s}
.app-shell.collapsed{grid-template-columns:90px 1fr}
.app-sidebar{background:#0f172a;border-right:1px solid var(--border);padding:1rem .8rem;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:.8rem}
.brand-wrap{display:flex;align-items:center;justify-content:space-between;padding:.2rem .3rem .6rem;border-bottom:1px solid rgba(255,255,255,.12)}
.navbar-brand{font-size:1.15rem;font-weight:700;color:#f8fafc}
.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}
.sidebar-nav a{color:#cbd5e1;padding:.62rem .78rem;border-radius:10px;display:flex;align-items:center;gap:.55rem;border:1px solid transparent}
.sidebar-nav a:hover{background:rgba(37,99,235,.16);border-color:rgba(37,99,235,.35);color:#fff}
.sidebar-nav a.active{background:linear-gradient(120deg,rgba(37,99,235,.24),rgba(14,165,233,.18));border-color:rgba(37,99,235,.45);color:#fff}
.sidebar-logout{margin-top:auto;padding:.35rem}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);padding:.7rem 1rem;display:flex;align-items:center;gap:.75rem}
.content-wrap{padding:1.1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem;margin-bottom:1rem}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:.7rem;border-bottom:1px solid var(--border);padding-bottom:.7rem;margin-bottom:.9rem}
.page-title{font-size:1.55rem;font-weight:700;margin:0;color:var(--text)}
.kpi-value{font-size:1.55rem;font-weight:700}
.kpi-label{color:var(--text-muted);font-size:.84rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:10px;border:1px solid transparent;cursor:pointer;padding:.5rem .95rem;font-size:.88rem;font-weight:600}
.btn-sm{padding:.36rem .7rem;font-size:.8rem}
.btn-primary{background:linear-gradient(130deg,var(--primary),var(--primary-2));color:#fff}
.btn-secondary{background:#1e293b;color:#fff}
.btn-outline{background:#fff;color:#334155;border-color:var(--border)}
.btn-danger{background:linear-gradient(130deg,#f87171,#ef4444);color:#fff}
.form-group{margin-bottom:.9rem}
.form-group label{display:block;margin-bottom:.3rem;font-size:.9rem}
.form-control{width:100%;padding:.56rem .72rem;border-radius:10px;border:1px solid var(--border);background:#fff;color:#0f172a}
table{width:100%;border-collapse:collapse}
th,td{padding:.7rem;border-bottom:1px solid rgba(148,163,184,.35);font-size:.9rem}
th{color:#334155;font-weight:600}
tr:hover{background:rgba(148,163,184,.12)}
.alert{padding:.75rem .95rem;border-radius:10px;margin-bottom:1rem;border:1px solid transparent}
.alert-success{background:rgba(34,197,94,.12);color:#166534;border-color:rgba(34,197,94,.35)}
.alert-danger{background:rgba(239,68,68,.12);color:#991b1b;border-color:rgba(239,68,68,.35)}
.alert-warning{background:rgba(245,158,11,.12);color:#92400e;border-color:rgba(245,158,11,.35)}
.badge{display:inline-block;padding:.22rem .52rem;border-radius:999px;font-size:.73rem;font-weight:600}
.badge-danger{background:rgba(239,68,68,.16);color:#b91c1c}
.badge-warning{background:rgba(245,158,11,.18);color:#b45309}
.badge-success{background:rgba(34,197,94,.16);color:#15803d}
.badge-secondary{background:rgba(100,116,139,.2);color:#475569}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dashboard-chart{min-height:280px;display:flex;align-items:center;justify-content:center}
.text-muted{color:var(--text-muted);font-size:.86rem}
.text-danger{color:#dc2626}
.text-success{color:#16a34a}
.d-flex{display:flex}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.mb-0{margin-bottom:0}.mt-2{margin-top:.5rem}
.table-responsive{overflow-x:auto}
.sidebar-toggle{border:1px solid var(--border);background:#fff;color:#0f172a;border-radius:10px;width:34px;height:34px;cursor:pointer}
.mobile-toggle{display:none}
.app-shell.collapsed .navbar-brand{display:none}
.app-shell.collapsed .sidebar-nav a{justify-content:center}
.app-shell.collapsed .sidebar-nav a span{display:none}
.app-shell.collapsed .sidebar-logout .btn{width:100%}
@media(max-width:1100px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .app-shell{grid-template-columns:1fr}
  .app-sidebar{position:fixed;left:-280px;width:260px;z-index:80;transition:left .2s}
  .app-sidebar.show{left:0}
  .desktop-toggle{display:none}
  .mobile-toggle{display:inline-flex}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}