:root{--bg:#f6f8fb;--surface:#fff;--text:#172033;--muted:#667085;--border:#e6eaf0;--primary:#2563eb;--primary-2:#1d4ed8;--success:#16a34a;--danger:#dc2626;--warning:#d97706;--shadow:0 12px 30px rgba(15,23,42,.08)}
html[data-theme="dark"]{--bg:#0f172a;--surface:#111c31;--text:#e5e7eb;--muted:#aab3c5;--border:#243149;--primary:#60a5fa;--primary-2:#3b82f6;--success:#22c55e;--danger:#f87171;--warning:#fbbf24;--shadow:0 12px 30px rgba(0,0,0,.32)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border);padding:22px 18px;position:fixed;inset:0 auto 0 0;z-index:20;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.brand-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;display:grid;place-items:center;font-weight:800}.brand span{display:block;color:var(--muted);font-size:12px}.nav-menu{display:grid;gap:6px}.nav-menu a{padding:12px 14px;border-radius:14px;color:var(--muted);font-weight:600}.nav-menu a:hover,.nav-menu a.active{background:rgba(37,99,235,.10);color:var(--primary)}.logout-link{margin-top:14px;color:var(--danger)!important}.main-content{margin-left:280px;width:calc(100% - 280px);padding:24px}.topbar{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:18px 20px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:var(--shadow)}.topbar h1{font-size:24px;margin:0}.topbar p{margin:4px 0 0;color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:10px}.menu-toggle,.theme-toggle,.btn{border:0;border-radius:14px;padding:11px 14px;background:var(--primary);color:#fff;cursor:pointer;font-weight:700}.menu-toggle{display:none}.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--text)}.btn.secondary{background:var(--surface);border:1px solid var(--border);color:var(--text)}.btn.danger{background:var(--danger)}.user-pill{border:1px solid var(--border);border-radius:999px;padding:10px 14px;color:var(--muted);font-size:13px}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:20px;box-shadow:var(--shadow)}.metric{display:flex;justify-content:space-between;gap:14px}.metric small{color:var(--muted);font-weight:700}.metric strong{display:block;font-size:26px;margin-top:8px}.metric .icon{width:42px;height:42px;border-radius:14px;background:rgba(37,99,235,.12);display:grid;place-items:center}.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.form-control{display:grid;gap:7px}.form-control label{font-size:13px;color:var(--muted);font-weight:700}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--surface);color:var(--text)}textarea{min-height:90px}.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--border)}table{width:100%;border-collapse:collapse;background:var(--surface)}th,td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:rgba(148,163,184,.08)}tr.overdue{background:rgba(220,38,38,.08)}.badge{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;display:inline-block}.badge-success{background:rgba(22,163,74,.12);color:var(--success)}.badge-danger{background:rgba(220,38,38,.12);color:var(--danger)}.badge-warning{background:rgba(217,119,6,.12);color:var(--warning)}.badge-muted{background:rgba(100,116,139,.15);color:var(--muted)}.alert{padding:14px;border-radius:16px;margin-bottom:16px}.alert-success{background:rgba(22,163,74,.12);color:var(--success)}.alert-danger{background:rgba(220,38,38,.12);color:var(--danger)}.actions{display:flex;gap:8px;align-items:center}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eff6ff,#f8fafc)}html[data-theme="dark"] .login-page{background:linear-gradient(135deg,#0f172a,#111827)}.login-card{width:min(440px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:32px;box-shadow:var(--shadow)}.login-card h1{margin-top:0}.empty{padding:25px;text-align:center;color:var(--muted)}
@media(max-width:1050px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.sidebar{transform:translateX(-110%);transition:.25s}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0;width:100%;padding:14px}.menu-toggle{display:inline-block}.topbar{align-items:flex-start}.topbar-actions{flex-wrap:wrap;justify-content:flex-end}}@media(max-width:620px){.grid-4{grid-template-columns:1fr}.topbar{display:grid}.filters{display:grid}.user-pill{display:none}.card{padding:16px}th,td{padding:11px}.actions{flex-wrap:wrap}}