:root{--primary:#2563eb;--primary-dark:#1d4ed8;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--surface:#fff;--bg:#f6f8fc;--danger:#dc2626;--success:#059669;--warning:#d97706;--radius:16px;--shadow:0 12px 35px rgba(15,23,42,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.85rem,4vw,3.5rem);letter-spacing:-.045em;line-height:1.08}h2{letter-spacing:-.025em}small,.muted{color:var(--muted)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:19px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--primary);color:white;font-size:13px;letter-spacing:-.5px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:11px 17px;font-weight:700;cursor:pointer;transition:.2s;background:#fff;color:var(--ink);border-color:var(--line)}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark)}.btn-danger{color:var(--danger);border-color:#fecaca}.btn-sm{padding:7px 10px;font-size:13px}.btn-block{width:100%}.icon-btn{border:0;background:transparent;cursor:pointer;font-size:21px}
.landing{background:#fff}.landing-header{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px}.landing-nav{display:flex;align-items:center;gap:22px}.hero{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;max-width:1180px;margin:auto;padding:72px 24px 100px}.hero h1 em{font-style:normal;color:var(--primary)}.hero p{color:var(--muted);font-size:19px;line-height:1.7;max-width:620px}.hero-actions{display:flex;gap:12px;margin-top:30px}.eyebrow{display:inline-block;color:var(--primary);background:#eff6ff;border:1px solid #dbeafe;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.09em;margin-bottom:20px}.invoice-mock{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px rgba(37,99,235,.16);padding:28px;transform:rotate(1.5deg)}.mock-head,.between{display:flex;justify-content:space-between;align-items:center}.mock-logo{height:42px;width:125px;border-radius:8px;background:linear-gradient(90deg,var(--primary),#60a5fa)}.mock-lines{display:grid;gap:8px;margin:35px 0}.mock-lines i{display:block;height:10px;background:#eef2f7;border-radius:5px}.mock-table{border:1px solid var(--line);border-radius:10px;overflow:hidden}.mock-table div{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;padding:13px;border-bottom:1px solid var(--line)}.mock-table div:first-child{background:#f8fafc;font-weight:700}.mock-total{margin:20px 0 0 auto;width:55%;height:70px;background:#eff6ff;border-radius:10px}.section{padding:90px 24px}.section-inner{max-width:1180px;margin:auto}.section-title{text-align:center;max-width:650px;margin:0 auto 44px}.features{background:var(--bg)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:26px}.feature-card .feature-icon{font-size:24px;background:#eff6ff;border-radius:10px;width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.step-number{color:var(--primary);font-size:32px;font-weight:900}.cta{margin:0 24px 70px;background:var(--ink);color:#fff;border-radius:28px;text-align:center;padding:70px 24px}.landing-footer{display:flex;justify-content:space-between;padding:28px 24px;max-width:1180px;margin:auto;border-top:1px solid var(--line)}
.auth-shell,.install-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#dbeafe,transparent 36%),var(--bg)}.auth-card,.install-card{width:min(100%,480px);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:36px}.auth-card .brand,.install-card .brand{margin-bottom:30px}.install-shell{width:min(100%,720px);margin:auto}.install-card{width:100%}.install-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:28px 0 13px}.success-orb{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#d1fae5;color:var(--success);font-size:30px;margin:20px auto}.credential-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f8fafc;padding:16px;border-radius:12px;margin:24px 0}.credential-box div{display:grid;gap:5px}
label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#334155;margin-bottom:15px}input,select,textarea{width:100%;border:1px solid #cbd5e1;background:#fff;color:var(--ink);border-radius:10px;padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}textarea{min-height:95px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:9px}.check input{width:auto}.alert{padding:12px 14px;border-radius:10px;margin:15px 0}.alert-danger{color:#991b1b;background:#fee2e2}.alert-success{color:#065f46;background:#d1fae5}.alert-warning{color:#92400e;background:#fef3c7}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#fff;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;z-index:20}.sidebar .brand{padding:0 10px 28px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;color:#475569;padding:11px 13px;border-radius:10px;font-weight:650}.sidebar nav a.active,.sidebar nav a:hover{background:#eff6ff;color:var(--primary)}.sidebar nav a span{width:22px;text-align:center}.sidebar-user{margin-top:auto;border-top:1px solid var(--line);padding:18px 10px 0;display:grid;gap:3px}.sidebar-user a{font-size:13px;margin-top:8px}.main-area{margin-left:250px}.topbar{height:76px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 30px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10}.topbar>div{display:grid}.topbar .avatar{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800}.menu-toggle{display:none}.content{padding:28px 30px 95px;max-width:1500px;margin:auto}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}.page-heading h1{font-size:29px;margin-bottom:6px}.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.stat-card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 25px rgba(15,23,42,.035)}.stat-card{padding:20px}.stat-card small{display:block;margin-bottom:10px}.stat-card strong{display:block;font-size:24px}.stat-card.primary{background:var(--primary);color:white}.stat-card.primary small{color:#dbeafe}.dashboard-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:18px;margin-top:18px}.panel{padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-head h2{font-size:18px;margin:0}.chart{height:230px;display:flex;align-items:flex-end;gap:10px;padding-top:25px}.bar-group{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.bar{width:min(36px,70%);background:linear-gradient(#60a5fa,var(--primary));border-radius:7px 7px 2px 2px;min-height:3px}.bar-group small{font-size:11px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th,.data-table td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line)}.data-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;text-transform:capitalize;background:#f1f5f9}.status-paid{background:#d1fae5;color:#047857}.status-pending,.status-overdue{background:#fef3c7;color:#b45309}.status-cancelled{background:#fee2e2;color:#b91c1c}.actions{display:flex;gap:6px;align-items:center}.empty{text-align:center;padding:50px 20px;color:var(--muted)}.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:18px}.toolbar label{margin:0;min-width:150px;flex:1}.toolbar .btn{height:43px}
.form-section{margin-bottom:20px}.form-section h2{font-size:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field-grid .span-2{grid-column:span 2}.field-grid .span-3{grid-column:span 3}.sticky-actions{position:sticky;bottom:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;justify-content:flex-end;gap:10px;box-shadow:var(--shadow);z-index:8}.item-table input,.item-table select{min-width:80px;padding:8px}.item-table input[name="item_name[]"]{min-width:160px}.totals{margin-left:auto;width:min(100%,390px);display:grid;gap:10px}.total-row{display:flex;justify-content:space-between}.total-row.grand{font-size:20px;font-weight:900;padding-top:12px;border-top:2px solid var(--ink)}
.invoice-paper{width:min(100%,900px);margin:auto;background:#fff;padding:52px;border:1px solid var(--line);box-shadow:var(--shadow)}.invoice-title{font-size:34px;letter-spacing:.12em;color:var(--primary)}.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:40px 0}.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.invoice-summary{margin:30px 0 30px auto;width:min(100%,420px)}.invoice-notes{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-top:1px solid var(--line);padding-top:25px}.logo-preview{max-width:170px;max-height:75px}.bottom-nav{display:none}.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;place-items:center;z-index:50;padding:20px}.modal.open{display:grid}.modal-card{background:#fff;border-radius:18px;padding:24px;width:min(100%,520px);max-height:90vh;overflow:auto}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(3,1fr)}.field-grid{grid-template-columns:repeat(2,1fr)}.field-grid .span-3{grid-column:span 2}}
@media(max-width:800px){.landing-nav>a:not(.btn){display:none}.hero{grid-template-columns:1fr;padding-top:45px}.invoice-mock{display:none}.feature-grid,.steps{grid-template-columns:1fr 1fr}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none;box-shadow:20px 0 50px rgba(15,23,42,.2)}.main-area{margin-left:0}.menu-toggle{display:block}.topbar{padding:0 17px}.content{padding:22px 16px 95px}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:15;padding-bottom:max(5px,env(safe-area-inset-bottom))}.bottom-nav a{display:grid;place-items:center;gap:2px;color:#475569;padding:9px 3px;font-size:19px}.bottom-nav small{font-size:10px}.dashboard-grid{grid-template-columns:1fr}.invoice-paper{padding:26px}.invoice-parties,.invoice-notes{grid-template-columns:1fr}}
@media(max-width:560px){.feature-grid,.steps,.stats-grid,.form-grid,.field-grid{grid-template-columns:1fr}.field-grid .span-2,.field-grid .span-3{grid-column:span 1}.page-heading{align-items:stretch;flex-direction:column}.page-heading .btn{width:100%}.hero-actions{flex-direction:column}.credential-box{grid-template-columns:1fr}.auth-card,.install-card{padding:25px}.landing-footer{display:grid;gap:8px}}
@media print{.sidebar,.topbar,.bottom-nav,.no-print,.sticky-actions{display:none!important}.main-area{margin:0}.content{padding:0}.invoice-paper{box-shadow:none;border:0;width:100%;padding:10mm}body{background:#fff}}