@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080d0b;--panel:#101815;--panel2:#141e19;--line:#24332b;--text:#f1f7f3;--muted:#91a198;--green:#36e08d;--green2:#1fb874;--danger:#ff7777;--radius:16px;--shadow:0 16px 45px rgba(0,0,0,.22)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:#0b120f;border-right:1px solid var(--line);padding:27px 18px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font:800 21px Manrope,sans-serif;letter-spacing:-.8px;padding:0 8px 42px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--green);color:#062013;font-weight:800}.brand-accent,.text-accent{color:var(--green)}.workspace-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#718278}.workspace-label{padding:0 10px 13px}.nav-list{display:grid;gap:6px}.nav-link{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#9eafa5;text-align:left;padding:12px 13px;border-radius:10px;font-weight:600}.nav-link:hover,.nav-link.active{background:#14241b;color:var(--green)}.nav-icon{width:20px;font-size:17px;text-align:center}.sidebar-bottom{margin-top:auto;display:grid;gap:16px}.sidebar-note{display:flex;gap:10px;align-items:flex-start;padding:13px 10px;border:1px solid var(--line);border-radius:12px}.sidebar-note strong,.sidebar-note small{display:block}.sidebar-note strong{font-size:12px}.sidebar-note small{font-size:10px;color:var(--muted);margin-top:4px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #36e08d88;flex:none;margin-top:4px}.main-area{margin-left:248px;min-height:100vh}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;position:sticky;top:0;background:#080d0beF;backdrop-filter:blur(14px);z-index:10}.topbar-context{display:grid;gap:4px}.topbar-context strong{font:700 14px Manrope}.topbar-actions{display:flex;align-items:center;gap:22px}.secure-label{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}.secure-label .status-dot{margin:0}.mobile-menu{display:none;background:none;color:var(--text);border:0;font-size:20px}.view{display:none;padding:38px 42px 70px;max-width:1500px;margin:auto}.view.active{display:block}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}.page-heading h1,.editor-heading h1{font:800 clamp(26px,3vw,36px) Manrope;margin:9px 0 7px;letter-spacing:-1.4px}.page-heading p,.editor-heading p{color:var(--muted);margin:0}.button{border:1px solid transparent;border-radius:9px;padding:11px 16px;font-weight:700;font-size:12px;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:7px}.button-primary{background:var(--green);color:#062114}.button-primary:hover{background:#62efa8;transform:translateY(-1px)}.button-secondary{background:#18231d;border-color:#2c3c32;color:#dce9e0}.button-secondary:hover{border-color:var(--green);color:var(--green)}.button-small{padding:8px 12px;font-size:11px}.button-full{width:100%;margin-top:13px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:39px}.stat-card{padding:20px;background:linear-gradient(145deg,#121d17,#0e1512);border:1px solid var(--line);border-radius:var(--radius)}.stat-label{font-size:9px;letter-spacing:1.1px;color:#91a198;font-weight:700;display:flex;justify-content:space-between}.stat-label span{color:var(--green);font-size:15px}.stat-value{font:800 27px Manrope;margin:16px 0 5px;letter-spacing:-.8px}.stat-foot{font-size:11px;color:#78877e}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-heading h2,.panel h2,.settings-card h2{font:700 16px Manrope;margin:0 0 5px}.section-heading p,.panel-heading p,.settings-card-heading p{margin:0;color:var(--muted);font-size:11px}.text-button{background:none;border:0;color:var(--green);font-size:11px;font-weight:700;padding:8px}.text-button span{font-size:15px;margin-left:5px}.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;min-height:170px}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th{font-size:9px;letter-spacing:1px;color:#718278;font-weight:700;padding:15px 17px;background:#121b16}.data-table td{padding:15px 17px;border-top:1px solid #202d25;font-size:11px;color:#c5d1c9}.data-table tbody tr:hover{background:#142019}.doc-title{font-weight:700;color:#edf6ef;font-size:12px}.doc-sub{display:block;color:#819087;font-size:10px;margin-top:4px}.amount-cell{font-weight:700;color:#edf6ef!important;white-space:nowrap}.status-pill{display:inline-flex;padding:5px 8px;border-radius:20px;font-size:9px;font-weight:700;text-transform:capitalize;background:#202c25;color:#c0d0c5}.status-pill.paid,.status-pill.accepted{background:#123c29;color:#62e9a2}.status-pill.overdue{background:#3d2021;color:#ff9292}.status-pill.sent{background:#1d303b;color:#8dd6f3}.row-actions{display:flex;gap:5px}.row-action{background:#1a261f;border:1px solid #2b3a30;color:#b7c6bc;border-radius:7px;padding:6px 8px;font-size:10px}.row-action:hover{color:var(--green);border-color:var(--green)}.empty-state{text-align:center;padding:35px 15px;display:none}.empty-state.show{display:block}.empty-icon{width:42px;height:42px;margin:0 auto 12px;border-radius:13px;background:#1b2a21;color:var(--green);display:grid;place-items:center;font-size:22px}.empty-state h3{font:700 14px Manrope;margin:0 0 7px}.empty-state p{color:var(--muted);font-size:11px;margin:0 0 17px}.filter-row{display:flex;gap:10px;margin-bottom:15px}.search-wrap{display:flex;align-items:center;gap:8px;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:0 12px;color:#8a9a90}.search-wrap input{background:none;border:0;outline:0;color:var(--text);width:100%;padding:11px 0;font-size:11px}.filter-select{background:var(--panel);border:1px solid var(--line);border-radius:9px;color:#d4e0d7;padding:0 12px;font-size:11px;min-width:130px}.settings-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:15px}.settings-card{max-width:850px}.settings-card-heading,.panel-heading{margin-bottom:22px}.logo-upload-row{display:flex;align-items:center;gap:17px;padding:17px;background:#0c1410;border:1px dashed #314439;border-radius:12px;margin-bottom:22px}.logo-preview{width:64px;height:64px;border-radius:12px;background:#183a29;color:var(--green);display:grid;place-items:center;font:800 24px Manrope;overflow:hidden}.logo-preview img{width:100%;height:100%;object-fit:contain;background:white}.logo-upload-row strong{font-size:12px}.logo-upload-row p{margin:5px 0 9px}.muted,.tiny-note{color:var(--muted);font-size:10px}.upload-button{cursor:pointer}.danger-text{color:#ff8585}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field>span{font-size:10px;font-weight:700;color:#a9b8ae}.field input,.field select,.field textarea{width:100%;background:#0b120e;border:1px solid #2a3a30;border-radius:8px;padding:11px 12px;color:#edf5ef;outline:0;font-size:12px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #36e08d15}.field textarea{resize:vertical}.full-field{grid-column:1/-1}.form-actions{display:flex;align-items:center;gap:14px;margin-top:20px}.form-message{font-size:11px;color:var(--green)}.notice-card{max-width:850px;border:1px solid #3d3523;background:#211d12;border-radius:12px;padding:15px 17px;color:#d5c8a8}.notice-card strong{font-size:11px}.notice-card p{font-size:11px;line-height:1.6;margin:6px 0 0;color:#b8ad92}.editor-heading{display:flex;align-items:center;gap:18px;margin-bottom:25px}.back-button{background:none;border:1px solid var(--line);border-radius:8px;color:#c4d0c8;padding:9px 12px;font-size:11px}.editor-heading h1{font-size:27px;margin:5px 0}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:16px;align-items:start}.editor-main{min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center}.items-head,.item-row{display:grid;grid-template-columns:minmax(150px,1fr) 70px 120px 105px 30px;gap:10px;align-items:center}.items-head{font-size:9px;color:#75857b;letter-spacing:.8px;padding:0 0 10px}.item-row{padding:9px 0;border-top:1px solid #26342b}.item-row input{width:100%;min-width:0;background:#0b120e;border:1px solid #2a3a30;border-radius:7px;padding:9px;color:#eff7f1;font-size:11px}.item-row .item-total{text-align:right;font-weight:700;font-size:11px;white-space:nowrap}.remove-item{border:0;background:none;color:#ff8b8b;font-size:17px}.totals-panel{position:sticky;top:95px}.totals-panel h2{margin-bottom:20px}.total-line{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #26342b;color:#aab8ae;font-size:11px}.total-line strong{color:#e6f0e9}.compact-field{margin:13px 0}.compact-field input{max-width:100px;padding:7px 9px}.grand-total{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px;font-weight:700}.grand-total strong{font:800 21px Manrope;color:var(--green)}.tiny-note{line-height:1.5;text-align:center}.mobile-menu{font-size:0}.toast{position:fixed;bottom:22px;right:22px;background:#173c29;border:1px solid #28794d;color:#d8ffea;padding:12px 17px;border-radius:10px;font-size:11px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateY(0)}.modal-backdrop{display:none;position:fixed;inset:0;background:#000b;z-index:50;padding:22px;overflow:auto}.modal-backdrop.open{display:block}.preview-modal{max-width:900px;margin:0 auto;background:#e9ecea;border-radius:13px;overflow:hidden;color:#111}.preview-toolbar{height:58px;background:#111a15;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 18px}.preview-toolbar strong{font:700 13px Manrope}.preview-toolbar>div{display:flex;gap:10px;align-items:center}.icon-button{border:0;background:none;color:white;font-size:24px}.print-document{background:#fff;color:#17221b;max-width:800px;min-height:900px;margin:24px auto;padding:55px 60px;font-family:Arial,sans-serif;box-shadow:0 8px 35px #0002}.pdf-top{display:flex;justify-content:space-between;gap:30px;border-bottom:2px solid #14271c;padding-bottom:28px}.pdf-brand{display:flex;align-items:center;gap:13px}.pdf-logo{width:58px;height:58px;object-fit:contain}.pdf-brand h2{font-size:22px;margin:0 0 5px;color:#10251a}.pdf-brand p,.pdf-meta p{font-size:11px;color:#5c6c62;margin:3px 0}.pdf-title{text-align:right}.pdf-title h1{font-size:28px;letter-spacing:2px;margin:0 0 8px;color:#14864f}.pdf-title p{font-size:11px;margin:4px 0;color:#56665b}.pdf-parties{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:30px 0}.pdf-kicker{font-size:9px;letter-spacing:1.4px;font-weight:bold;color:#17814d;margin-bottom:10px}.pdf-parties h3{font-size:14px;margin:0 0 7px}.pdf-parties p{font-size:11px;color:#59665e;line-height:1.6;margin:3px 0}.pdf-items{width:100%;border-collapse:collapse;margin-top:8px}.pdf-items th{background:#11251a;color:#fff;text-align:left;padding:12px 10px;font-size:10px}.pdf-items td{border-bottom:1px solid #e2e8e3;padding:13px 10px;font-size:11px}.pdf-items td:not(:first-child),.pdf-items th:not(:first-child){text-align:right}.pdf-summary{width:270px;margin:22px 0 0 auto}.pdf-summary div{display:flex;justify-content:space-between;padding:7px 0;font-size:11px;border-bottom:1px solid #e7ece8}.pdf-summary .pdf-grand{font-size:16px;font-weight:bold;color:#087a43;border-bottom:0;padding-top:13px}.pdf-notes{margin-top:45px;border-top:1px solid #dce5de;padding-top:17px}.pdf-notes strong{font-size:10px}.pdf-notes p{font-size:11px;line-height:1.6;color:#59665e;white-space:pre-wrap}.pdf-footer{margin-top:55px;padding-top:15px;border-top:1px solid #dce5de;text-align:center;font-size:9px;color:#7a887f}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.editor-layout{grid-template-columns:1fr}.totals-panel{position:static}.editor-side{order:-1}.totals-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.totals-panel h2,.grand-total,.button-full,.tiny-note{grid-column:1/-1}.totals-panel h2{margin-bottom:8px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.22s;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}.topbar{height:65px;padding:0 17px}.mobile-menu{display:block;font-size:19px}.topbar-context{margin-right:auto;margin-left:12px}.secure-label{display:none}.view{padding:27px 17px 55px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .button{align-self:stretch}.stats-grid{gap:9px}.stat-card{padding:15px}.stat-value{font-size:22px}.table-wrap{overflow-x:auto}.data-table{min-width:720px}.filter-row{flex-wrap:wrap}.search-wrap{flex-basis:100%}.filter-select{flex:1}.form-grid{grid-template-columns:1fr}.full-field{grid-column:auto}.items-head,.item-row{grid-template-columns:minmax(110px,1fr) 48px 82px 75px 22px;gap:5px}.items-head{font-size:7px}.item-row input{padding:8px 5px;font-size:10px}.item-row .item-total{font-size:10px}.panel{padding:16px}.editor-heading{align-items:flex-start}.editor-heading h1{font-size:23px}.print-document{margin:0;padding:28px 22px;min-height:0}.pdf-top{gap:10px}.pdf-title h1{font-size:21px}.pdf-brand h2{font-size:17px}.pdf-parties{gap:14px}.modal-backdrop{padding:8px}.preview-toolbar{padding:0 10px}.preview-toolbar .button{padding:7px 9px}}
@media print{body{background:#fff!important}.app-shell,.toast,.modal-backdrop{display:none!important}body.printing-preview .modal-backdrop{display:block!important;position:static!important;padding:0!important;background:#fff!important;overflow:visible!important}.preview-modal{max-width:none;margin:0;border-radius:0;overflow:visible}.preview-toolbar{display:none!important}.print-document{box-shadow:none!important;margin:0!important;max-width:none!important;min-height:0!important;padding:18mm 16mm!important}@page{size:A4;margin:0}}


/* Supabase authentication gate */
.auth-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(4,9,7,.88);backdrop-filter:blur(12px)}
.auth-backdrop[hidden]{display:none}
.auth-card{width:min(100%,440px);padding:34px;border:1px solid rgba(105,220,157,.2);border-radius:22px;background:#0d1511;box-shadow:0 28px 90px rgba(0,0,0,.45)}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;font-size:21px;font-weight:800;color:#f5fff8}
.auth-card h1{margin:9px 0 8px;color:#f5fff8;font-family:Manrope,sans-serif;font-size:27px}
.auth-card>p{color:#a7b5ac;line-height:1.55}
.auth-form{display:grid;gap:16px;margin-top:24px}
.auth-form .field{display:grid;gap:8px}
.auth-form .field span{color:#dce8df;font-size:13px;font-weight:600}
.auth-form input{width:100%;min-height:46px;padding:12px 14px;border:1px solid #293b30;border-radius:10px;background:#101c15;color:#f5fff8;outline:none}
.auth-form input:focus{border-color:#39d98a;box-shadow:0 0 0 3px rgba(57,217,138,.12)}
.auth-switch{margin:19px 0 4px;text-align:center;font-size:13px}
.auth-switch button{border:0;background:none;color:#55e59a;font:inherit;font-weight:700;cursor:pointer}
.auth-message{min-height:20px;margin:12px 0 0;color:#75e6a7;font-size:13px}
.auth-privacy{display:block;margin-top:14px;color:#84958a;line-height:1.5}