:root { --blue:#0d6efd; --green:#15a362; --ink:#122033; --soft:#f5f8fb; }
body { background: var(--soft); color: var(--ink); }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 260px; background: #10243d; color: #fff; padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand-wrap { margin-bottom: 22px; }
.brand { color: #fff; display: inline-block; font-size: 1.25rem; font-weight: 800; text-decoration: none; margin-bottom: 0; }
.brand span { color: #46d28b; }
.brand-credit { color: #bcd2e8; display: inline-block; font-size: .75rem; font-weight: 600; text-decoration: none; }
.brand-credit:hover { color: #fff; }
.brand-by { color: #6c757d; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand-by span { color: #15a362; }
.sidebar nav a { display: block; color: #d9e8f7; text-decoration: none; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: .95rem; }
.sidebar nav a:hover { background: rgba(255,255,255,.09); color:#fff; }
.compliance { margin-top: 18px; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; font-size: .78rem; color: #bcd2e8; }
.app-main { flex: 1; min-width: 0; }
.topbar { min-height: 74px; background: #fff; border-bottom: 1px solid #e5edf5; display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; }
.app-footer { border-top: 1px solid #e5edf5; color: #6c757d; font-size: .9rem; margin-top: 32px; padding: 18px 0 0; }
.app-footer a { color: #15a362; font-weight: 600; text-decoration: none; }
.card { border: 1px solid #e5edf5; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,36,61,.04); }
.stat-card { border-left: 4px solid var(--blue); }
.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-success { background: var(--green); border-color: var(--green); }
.hero { background: linear-gradient(120deg, #06345f, #0d6efd 58%, #15a362); color: #fff; padding: 86px 0; }
.section { padding: 72px 0; }
.feature-icon { width: 42px; height: 42px; display:grid; place-items:center; border-radius:8px; background:#e9f4ff; color:var(--blue); font-weight:800; }
.table td, .table th { vertical-align: middle; }
@media (max-width: 900px) {
    .app-shell { display:block; }
    .sidebar { width:100%; height:auto; position:relative; }
    .sidebar nav { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
    .topbar { align-items:flex-start; gap:12px; flex-direction:column; }
}