@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap";:root{--bg:#f3f4f6;--surface:#fff;--border:#e5e7eb;--primary:#2563eb;--primary-hover:#1d4ed8;--text:#111827;--muted:#6b7280;--success:#10b981;--danger:#ef4444}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:DM Sans,sans-serif}.app{height:100vh;display:flex}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;gap:8px;width:250px;padding:24px 16px;display:flex}.logo{color:var(--primary);align-items:center;gap:12px;margin-bottom:32px;padding:0 12px;font-size:24px;font-weight:700;display:flex}.nav-item{color:var(--muted);cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--primary);background:#eff6ff}.main{flex-direction:column;flex:1;display:flex;overflow:hidden}.header{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:24px 40px;display:flex}.header h1{font-size:24px;font-weight:700}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-weight:600;transition:all .2s;display:flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-outline{border:1px solid var(--border);color:var(--text);background:0 0}.btn-outline:hover{background:#f9fafb}.content{flex:1;justify-content:center;padding:40px;display:flex;overflow-y:auto}.invoice-container{background:var(--surface);border-radius:12px;width:100%;max-width:800px;padding:48px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.invoice-header{pb:24px;border-bottom:1px solid var(--border);justify-content:space-between;margin-bottom:48px;display:flex}.brand-name{color:var(--text);margin-bottom:8px;font-size:28px;font-weight:700}.inv-details{text-align:right}.inv-title{color:var(--text);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-size:32px;font-weight:700}.meta-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:48px;display:grid}.meta-box h4{color:var(--muted);text-transform:uppercase;margin-bottom:8px;font-size:14px;font-weight:600}.meta-value{font-size:16px;font-weight:500}.invoice-table{border-collapse:collapse;width:100%;margin-bottom:32px}.invoice-table th{text-align:left;border-bottom:2px solid var(--border);color:var(--muted);text-transform:uppercase;padding:12px;font-size:14px;font-weight:600}.invoice-table td{border-bottom:1px solid var(--border);padding:16px 12px;font-size:15px}.invoice-table .amount{text-align:right;font-weight:500}.totals-area{justify-content:flex-end;display:flex}.totals-grid{grid-template-columns:auto auto;align-items:center;gap:12px 48px;display:grid}.total-label{color:var(--muted);text-align:right;font-weight:500}.total-val{text-align:right;font-size:16px;font-weight:600}.grand-total{color:var(--primary);font-size:24px;font-weight:700}.status-badge{border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;font-weight:600;display:inline-flex}.status-paid{color:#047857;background:#d1fae5}.status-pending{color:#b45309;background:#fef3c7}