:root{
  --bg:#f4f7fb;--card:#ffffff;--border:#e7ebf3;--text:#162033;--muted:#6b7280;--primary:#0d6efd;--sidebar:#111827;
}
body{background:linear-gradient(180deg,#f8fbff 0,#f4f7fb 100%);color:var(--text);font-size:14px;}
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:280px;background:linear-gradient(180deg,#0f172a 0,#111827 100%);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:12px;align-items:center;padding:8px 10px 18px}
.brand-icon{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:20px}
.brand-title{font-weight:700}.brand-subtitle{font-size:12px;color:#cbd5e1}
.user-panel{background:rgba(255,255,255,.06);padding:14px;border-radius:18px;margin-bottom:18px}
.sidebar-nav .nav-link{color:#d1d5db;border-radius:12px;padding:10px 12px;margin:2px 0;display:flex;gap:10px;align-items:center}
.sidebar-nav .nav-link.active,.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-section{padding:18px 12px 8px;color:#94a3b8;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.main-content{flex:1;padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.page-title{font-size:28px;font-weight:700;margin:0}.page-subtitle{color:var(--muted)}
.card-modern{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,.04)}
.stat-card{padding:18px}.stat-value{font-size:28px;font-weight:700}.stat-label{color:var(--muted)}
.section-card{padding:18px}.section-title{font-size:16px;font-weight:700;margin-bottom:14px}
.table thead th{font-size:12px;text-transform:uppercase;color:#64748b;white-space:nowrap}
.table td,.table th{vertical-align:middle}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-control,.form-select{border-radius:12px;padding:.6rem .8rem;border-color:#d8e1ef}
.btn{border-radius:12px;padding:.58rem .9rem}
.btn-soft{background:#eef4ff;color:#1d4ed8;border:1px solid #dbeafe}
.kbd{background:#eef2f7;border:1px solid #d6dce6;padding:2px 8px;border-radius:999px;font-size:12px}
.invoice-box{background:#fff;padding:36px;border:1px solid #e5e7eb;border-radius:24px;max-width:980px;margin:auto}
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .invoice-box{border:none;box-shadow:none;padding:0}
}

.company-logo-preview{max-height:110px;max-width:240px;object-fit:contain;border:1px solid #e5e7eb;border-radius:18px;padding:12px;background:#fff}
.invoice-logo{max-height:72px;max-width:180px;object-fit:contain}
.card-modern .badge{font-weight:600}

.brand-logo{width:44px;height:44px;border-radius:14px;object-fit:contain;background:#fff;padding:6px}
.login-page{background:radial-gradient(circle at top left,#dbeafe 0,#eff6ff 35%,#f8fafc 100%)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:460px}
.login-logo{max-height:72px;max-width:220px;object-fit:contain}
.report-tab-nav .btn{min-width:140px}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.metric-box{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px}
.metric-box .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.metric-box .value{font-size:24px;font-weight:700}