:root {
    --bg: #f4f7fb;
    --card: #ffffff;
    --text: #162133;
    --muted: #5b6472;
    --line: #d8e0ea;
    --primary: #1e40af;
    --primary-2: #0f172a;
    --success: #ecfdf3;
    --success-text: #166534;
    --warning: #fff7ed;
    --warning-text: #9a3412;
    --danger: #fef2f2;
    --danger-text: #b91c1c;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
a { color: var(--primary); text-decoration:none; }
.shell { display:flex; min-height:100vh; }
.sidebar { width:250px; background:var(--primary-2); color:#fff; padding:24px 18px; position:sticky; top:0; height:100vh; }
.brand h2 { margin:0 0 6px; font-size:20px; }
.brand p { margin:0 0 24px; color:#cbd5e1; font-size:14px; }
.nav { display:flex; flex-direction:column; gap:8px; }
.nav a { color:#e2e8f0; padding:10px 12px; border-radius:10px; }
.nav a:hover { background:rgba(255,255,255,.08); }
.main { flex:1; padding:28px; }
.container { max-width:1200px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.topbar h1, .topbar h2, h1, h2, h3 { margin:0 0 10px; }
.muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; margin-bottom:18px; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.kpi strong { display:block; font-size:28px; margin-top:6px; }
label { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-weight:700; }
label span { font-size:14px; }
input, textarea, select { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; font-size:14px; }
textarea { min-height:100px; resize:vertical; }
button, .btn { display:inline-block; background:var(--primary); color:#fff; border:none; padding:11px 16px; border-radius:12px; font-weight:700; cursor:pointer; }
.btn.alt { background:var(--primary-2); }
.btn.light { background:#eef2ff; color:var(--primary); }
.btn.warn { background:#dc2626; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#e0e7ff; color:#3730a3; font-size:13px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.flash { padding:12px 14px; border-radius:12px; margin-bottom:14px; border:1px solid transparent; }
.flash-success { background:var(--success); color:var(--success-text); border-color:#bbf7d0; }
.flash-error { background:var(--danger); color:var(--danger-text); border-color:#fecaca; }
.flash-warning { background:var(--warning); color:var(--warning-text); border-color:#fdba74; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:min(460px, 100%); }
.items-grid { display:grid; grid-template-columns: 140px 1.3fr 1.8fr 90px 90px 110px 90px 90px; gap:10px; align-items:end; margin-bottom:12px; }
.invoice-head { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.totals { margin-left:auto; max-width:420px; }
.totals div { display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:8px 0; }
.totals .grand { font-size:20px; font-weight:700; }
.print-sheet { max-width:980px; margin:20px auto; background:#fff; padding:30px; }
@media (max-width: 1100px) {
    .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .grid.two, .grid.three, .invoice-head, .items-grid { grid-template-columns:1fr; }
    .shell { display:block; }
    .sidebar { width:auto; height:auto; position:relative; }
}
@media print {
    .sidebar, .topbar .actions, .no-print { display:none !important; }
    body, .main { background:#fff; padding:0; }
    .card { box-shadow:none; border:0; padding:0; }
}