:root {
  --primary: #1e3a5f; --primary-light: #2e5c8a; --primary-dark: #16304f;
  --accent: #4a7fb5; --success: #16a34a; --danger: #b91c1c;
  --bg: #f0f2f5; --surface: #ffffff; --border: #d1d5db;
  --text: #1a1a2e; --text-muted: #6b7280; --sidebar-w: 220px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
.topbar { position:fixed;top:0;left:0;right:0;height:52px;z-index:50;background:var(--primary);color:#fff;display:flex;align-items:center;padding:0 20px;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.2); }
.topbar-logo { display:flex;align-items:center;gap:10px; }
.topbar-logo img { height:32px;width:auto; }
.topbar-logo span { font-size:13px;font-weight:700;letter-spacing:.08em; }
.topbar-spacer { flex:1; }
.topbar-user { font-size:12px;opacity:.85; }
.topbar-role { font-size:10px;background:rgba(255,255,255,.15);padding:2px 8px;border-radius:10px;margin-left:6px;text-transform:uppercase;letter-spacing:.06em; }
.topbar-btn { padding:5px 14px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-family:inherit;transition:background .15s; }
.topbar-btn:hover { background:rgba(255,255,255,.1); }
.sidebar { position:fixed;top:52px;left:0;bottom:0;width:var(--sidebar-w);background:var(--primary-dark);color:#fff;display:flex;flex-direction:column;overflow-y:auto;z-index:40; }
.sidebar-section { padding:16px 12px 4px;font-size:9px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.35);text-transform:uppercase; }
.sidebar-item { display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12px;font-weight:500;color:rgba(255,255,255,.75);cursor:pointer;text-decoration:none;transition:background .15s,color .15s;border-left:3px solid transparent; }
.sidebar-item:hover { background:rgba(255,255,255,.07);color:#fff; }
.sidebar-item.active { background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--accent); }
.sidebar-item .icon { font-size:14px;width:18px;text-align:center; }
.sidebar-badge { margin-left:auto;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px; }
.main { margin-left:var(--sidebar-w);margin-top:52px;padding:28px 28px 48px;min-height:calc(100vh - 52px); }
.page-title { font-size:20px;font-weight:700;color:var(--primary);margin-bottom:4px; }
.page-sub { font-size:12px;color:var(--text-muted);margin-bottom:24px; }
.card { background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:20px; }
.card-title { font-size:13px;font-weight:700;color:var(--primary);margin-bottom:14px;letter-spacing:.04em; }
.module-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:28px; }
.module-card { background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px 18px;cursor:pointer;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:8px; }
.module-card:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(30,58,95,.12);border-color:var(--accent); }
.module-card.coming-soon { opacity:.5;cursor:not-allowed; }
.module-card.coming-soon:hover { transform:none;box-shadow:none;border-color:var(--border); }
.module-icon { font-size:26px; }
.module-name { font-size:13px;font-weight:700;color:var(--primary); }
.module-desc { font-size:11px;color:var(--text-muted);line-height:1.5; }
.module-tag { display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;margin-top:2px; }
.tag-active { background:#dcfce7;color:#16a34a; }
.tag-soon { background:#f3f4f6;color:#9ca3af; }
.stat-strip { display:flex;gap:14px;margin-bottom:24px;flex-wrap:wrap; }
.stat-box { background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 20px;min-width:120px;flex:1; }
.stat-val { font-size:24px;font-weight:700;color:var(--primary); }
.stat-lbl { font-size:11px;color:var(--text-muted);margin-top:2px; }
.tbl { width:100%;border-collapse:collapse;font-size:12px; }
.tbl th { background:#f9fafb;padding:9px 12px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border); }
.tbl td { padding:10px 12px;border-bottom:1px solid #f3f4f6;vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:#fafbff; }
.badge { display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px; }
.badge-admin { background:#ede9fe;color:#7c3aed; }
.badge-staff { background:#e0f2fe;color:#0369a1; }
.badge-active { background:#dcfce7;color:#16a34a; }
.badge-off { background:#f3f4f6;color:#9ca3af; }
.btn { padding:8px 20px;border:none;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,transform .1s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--primary);color:#fff; } .btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:#fff;color:var(--primary);border:1.5px solid var(--primary); } .btn-secondary:hover { background:#f0f6ff; }
.btn-danger { background:#fff;color:var(--danger);border:1.5px solid var(--danger); } .btn-danger:hover { background:#fef2f2; }
.btn-sm { padding:4px 12px;font-size:11px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.form-group { display:flex;flex-direction:column;gap:5px; }
.form-group.full { grid-column:1/-1; }
label { font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase; }
input,select { border:1.5px solid var(--border);border-radius:5px;padding:8px 10px;font-size:12px;font-family:inherit;outline:none;background:#fff;color:var(--text);transition:border-color .15s; }
input:focus,select:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,58,95,.08); }
.modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:#fff;border-radius:10px;padding:28px 28px 24px;width:420px;max-width:94vw; }
.modal-title { font-size:15px;font-weight:700;color:var(--primary);margin-bottom:18px; }
.modal-actions { display:flex;gap:10px;justify-content:flex-end;margin-top:20px; }
.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--primary);color:#fff;padding:10px 24px;border-radius:6px;font-size:13px;font-weight:600;z-index:200;transition:transform .3s ease;pointer-events:none;white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }
.login-page { min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg); }
.login-box { background:#fff;border:1px solid var(--border);border-radius:12px;padding:40px 36px;width:380px;max-width:94vw; }
.login-logo { display:flex;justify-content:center;margin-bottom:28px; }
.login-logo img { height:56px;width:auto; }
.login-title { font-size:18px;font-weight:700;color:var(--primary);text-align:center;margin-bottom:4px; }
.login-sub { font-size:12px;color:var(--text-muted);text-align:center;margin-bottom:24px; }
.login-group { display:flex;flex-direction:column;gap:5px;margin-bottom:14px; }
.login-group label { font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase; }
.login-group input { border:1.5px solid var(--border);border-radius:5px;padding:10px 12px;font-size:13px;font-family:inherit;outline:none; }
.login-group input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,58,95,.08); }
.login-btn { width:100%;padding:11px;background:var(--primary);color:#fff;border:none;border-radius:5px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px;transition:background .15s; }
.login-btn:hover { background:var(--primary-dark); }
.login-error { font-size:12px;color:var(--danger);text-align:center;margin-top:10px;min-height:18px; }
.login-footer { text-align:center;font-size:11px;color:var(--text-muted);margin-top:28px; }
@media (max-width:700px) { .sidebar { display:none; } .main { margin-left:0; } .form-grid { grid-template-columns:1fr; } }