:root { --ink:#17211b; --muted:#657168; --paper:#f4f6f1; --white:#fff; --line:#dfe5dc; --green:#236b4e; --lime:#c9f17a; --danger:#9d2f2f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
.app-header { height:72px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); }
.brand,.header-actions { display:flex; align-items:center; gap:12px; }
.brand { color:var(--ink); font-weight:700; text-decoration:none; }
.brand-mark { width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; color:#fff; background:var(--green); font-weight:700; }
.brand-mark-large { width:48px; height:48px; border-radius:14px; font-size:20px; }
.user-chip { color:var(--muted); font-size:14px; }
.nav-link { color:var(--muted); font-size:14px; font-weight:600; text-decoration:none; }
.nav-link:hover { color:var(--green); }
.app-shell { width:min(1180px,90vw); margin:0 auto; padding:48px 0 72px; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:4vw; background:radial-gradient(circle at 15% 15%,#e4f2c8,transparent 30%),var(--paper); }
.auth-card { width:min(1060px,100%); min-height:620px; display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--white); box-shadow:0 24px 80px rgba(35,58,44,.12); }
.auth-intro { padding:72px; display:flex; flex-direction:column; justify-content:center; color:#fff; background:linear-gradient(145deg,#173e30,#236b4e); }
.auth-intro h1 { margin:18px 0; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-.05em; }
.auth-intro p { max-width:520px; color:#d9e7df; font-size:18px; line-height:1.65; }
.feature-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.feature-row span { padding:9px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:13px; }
.login-panel { padding:64px 52px; display:flex; flex-direction:column; justify-content:center; }
h1,h2,p { margin-top:0; }
h1 { font-size:40px; letter-spacing:-.035em; }
h2 { font-size:24px; letter-spacing:-.02em; }
.login-panel h2 { margin:24px 0 8px; font-size:30px; }
.muted { color:var(--muted); }
.eyebrow { color:var(--green); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.auth-intro .eyebrow,.panel-dark .eyebrow { color:var(--lime); }
.stack-form { display:grid; gap:20px; margin-top:30px; }
.stack-form label { display:grid; gap:8px; color:#354139; font-size:14px; font-weight:600; }
.stack-form input { width:100%; padding:14px 15px; border:1px solid #cfd7d0; border-radius:11px; outline:none; }
.stack-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(35,107,78,.12); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:0 17px; border:0; border-radius:10px; cursor:pointer; font-weight:700; text-decoration:none; }
.button-primary { color:#fff; background:var(--green); }
.button-primary:disabled { opacity:.55; cursor:not-allowed; }
.button-ghost { color:var(--ink); background:transparent; }
.alert { margin-top:24px; padding:12px 14px; color:var(--danger); background:#fff2f1; border:1px solid #f0c9c6; border-radius:10px; font-size:14px; }
.alert-success { color:#1d6847; background:#edf8f1; border-color:#c9e7d4; }
.app-shell > .alert { margin:0 0 24px; }
.dashboard-heading,.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dashboard-heading { margin-bottom:34px; }
.dashboard-heading h1 { margin:8px 0; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric-card { min-height:150px; padding:24px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; background:var(--white); }
.metric-card span,.metric-card small { color:var(--muted); }
.metric-card strong { margin:auto 0 8px; font-size:25px; letter-spacing:-.03em; }
.metric-card.accent { background:#eaf6d6; border-color:#d8ebba; }
.content-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; margin-top:18px; }
.panel { padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--white); }
.panel-heading p { color:var(--muted); font-size:14px; }
.status-pill { padding:8px 11px; white-space:nowrap; color:var(--green); background:#e8f2ec; border-radius:999px; font-size:12px; font-weight:700; }
.setup-list { margin:20px 0 0; padding:0; list-style:none; }
.setup-list li { padding:16px 0; display:flex; gap:14px; border-top:1px solid var(--line); }
.setup-list strong,.setup-list small { display:block; }
.setup-list small { margin-top:4px; color:var(--muted); }
.step-icon { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; color:var(--muted); background:#edf0eb; border-radius:50%; font-size:12px; font-weight:700; }
.done .step-icon { color:#fff; background:var(--green); }
.panel-dark { color:#fff; background:#172a21; border-color:#172a21; }
.panel-dark h2 { margin:18px 0 12px; font-size:32px; }
.panel-dark p { color:#c4d0c8; line-height:1.65; }
.invoice-sample { margin-top:36px; padding:18px; background:rgba(255,255,255,.08); border-radius:14px; }
.invoice-sample span,.invoice-sample strong { display:block; }
.invoice-sample span { margin-bottom:7px; color:#9fb0a5; font-size:12px; text-transform:uppercase; }
.empty-state { max-width:600px; margin:12vh auto; text-align:center; }
.page-heading { margin-bottom:30px; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.page-heading h1 { margin:8px 0; }
.narrow-heading,.onboarding-form,.form-alert { width:min(860px,100%); margin-left:auto; margin-right:auto; }
.admin-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:18px; align-items:start; }
.compact-form { margin-top:20px; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-row-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.key-callout { margin:0 0 24px; padding:20px 24px; display:grid; gap:6px; color:#183a2b; background:#eaf6d6; border:1px solid #d8ebba; border-radius:16px; }
.key-callout span,.key-callout small { color:#58705f; }
.key-callout strong,.mono { font-family:Consolas,"Courier New",monospace; }
.key-callout strong { font-size:18px; overflow-wrap:anywhere; }
.table-panel { min-width:0; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:14px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
td strong,td small { display:block; }
td small { margin-top:5px; color:var(--muted); font-size:11px; }
.onboarding-form { display:grid; gap:18px; }
.form-section { padding:30px; display:grid; gap:20px; border:1px solid var(--line); border-radius:20px; background:var(--white); }
.form-section label { display:grid; gap:8px; color:#354139; font-size:14px; font-weight:600; }
.form-section input,.form-section select,.form-section textarea { width:100%; padding:13px 14px; border:1px solid #cfd7d0; border-radius:10px; outline:none; color:var(--ink); background:#fff; }
.form-section textarea { resize:vertical; line-height:1.5; }
.form-section input:focus,.form-section select:focus,.form-section textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(35,107,78,.12); }
.form-section-title { display:flex; gap:14px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line); }
.form-section-title > span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:var(--green); background:#e8f2ec; border-radius:10px; font-size:12px; font-weight:700; }
.form-section-title h2 { margin:2px 0 5px; }
.form-section-title p { margin:0; color:var(--muted); font-size:14px; }
.sequence-preview { padding:16px 18px; display:flex; justify-content:space-between; gap:16px; color:#dce8df; background:#172a21; border-radius:12px; }
.sequence-preview strong { color:var(--lime); font-family:Consolas,"Courier New",monospace; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; }
.collection-panel { padding:0; overflow:hidden; }
.collection-tools { padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid var(--line); }
.search-form { flex:1; display:flex; align-items:center; gap:8px; }
.search-form input { width:min(460px,100%); padding:11px 13px; border:1px solid #cfd7d0; border-radius:10px; outline:none; }
.search-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(35,107,78,.12); }
.record-count { color:var(--muted); font-size:13px; white-space:nowrap; }
.collection-empty { padding:70px 24px; text-align:center; }
.actions-column { text-align:right; }
.row-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; white-space:nowrap; }
.row-actions form { margin:0; }
.text-link,.link-button { padding:0; color:var(--green); background:none; border:0; font:inherit; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; }
.danger-link { color:#a23b35; }
.status-muted { color:#6f7771; background:#eef0ed; }
.invoice-status-draft { color:#775d1c; background:#fff5d8; }
.invoice-status-issued,.invoice-status-paid { color:#1d6847; background:#e8f5ed; }
.invoice-status-partial { color:#775d1c; background:#fff5d8; }
.invoice-status-overdue { color:#9d2f2f; background:#fff0ee; }
.invoice-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.invoice-editor label,.invoice-meta-grid label,.invoice-notes label,.invoice-totals-editor label { display:grid; gap:7px; color:#354139; font-size:13px; font-weight:600; }
.invoice-editor input,.invoice-editor select,.invoice-editor textarea { width:100%; padding:11px 12px; border:1px solid #cfd7d0; border-radius:9px; color:var(--ink); background:#fff; outline:none; }
.invoice-editor input:focus,.invoice-editor select:focus,.invoice-editor textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(35,107,78,.12); }
.invoice-lines-panel { margin-top:18px; min-width:0; }
.invoice-template-choice{margin-top:18px;display:grid;grid-template-columns:1fr minmax(260px,380px);gap:18px;align-items:end}.invoice-template-choice h2{margin:6px 0}.invoice-template-choice p{margin:0;color:var(--muted);font-size:13px}.invoice-template-choice label{display:grid;gap:7px;color:#354139;font-size:13px;font-weight:600}.invoice-template-choice select{width:100%;padding:11px 12px;border:1px solid #cfd7d0;border-radius:9px;background:#fff}.selected-template-preview{grid-column:1/-1;padding:14px 16px;display:flex;align-items:center;gap:12px;color:var(--selected-template-ink);background:#f8faf8;border:1px solid #dfe5e0;border-left:4px solid var(--selected-template-accent);border-radius:10px}.selected-template-preview .template-color-dot{width:30px;height:30px;flex:0 0 auto;background:var(--selected-template-accent);border-radius:9px}.selected-template-preview strong,.selected-template-preview small{display:block}.selected-template-preview small{margin-top:3px;color:var(--muted)}.selected-template-preview .text-link{margin-left:auto}
.invoice-lines-scroll { overflow-x:auto; margin-top:20px; }
.invoice-line { min-width:1050px; display:grid; grid-template-columns:minmax(270px,2.2fr) 80px 85px 110px 105px 85px 120px 32px; gap:8px; align-items:center; padding:9px 0; border-top:1px solid var(--line); }
.invoice-line-head { padding:8px 0; color:var(--muted); border:0; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.line-description { display:grid; grid-template-columns:140px 1fr; gap:7px; }
.line-total { text-align:right; font-size:13px; }
.remove-line { width:30px; height:30px; color:#a23b35; background:#fff0ee; border:0; border-radius:8px; cursor:pointer; font-size:18px; }
.invoice-bottom-grid { margin-top:18px; display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start; }
.invoice-notes { display:grid; gap:18px; }
.invoice-notes textarea { resize:vertical; }
.invoice-totals-editor { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.invoice-totals-editor dl { grid-column:1/-1; margin:6px 0 0; }
.invoice-totals-editor dl div,.invoice-total-list div { padding:9px 0; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); }
.invoice-totals-editor dt,.invoice-total-list dt { color:var(--muted); }
.invoice-totals-editor dd,.invoice-total-list dd { margin:0; font-weight:700; }
.grand-total { font-size:18px; }
.invoice-view-toolbar { margin-bottom:26px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.invoice-view-toolbar h1 { margin:12px 0 10px; }
.invoice-template-caption{display:block;margin-top:9px;color:var(--muted)}
.toolbar-actions { display:flex; align-items:center; gap:10px; }
.toolbar-actions form { margin:0; }
.invoice-paper { width:min(920px,100%); margin:0 auto; padding:58px; color:#1c251f; background:#fff; border:1px solid var(--line); box-shadow:0 18px 60px rgba(28,45,35,.08); }
.invoice-rendered-preview{display:block;width:min(920px,100%);height:1180px;margin:0 auto;background:#fff;border:1px solid var(--line);box-shadow:0 18px 60px rgba(28,45,35,.08)}
.direct-invoice-editor{display:grid;gap:14px}
.direct-editor-toolbar{position:sticky;z-index:8;top:8px;width:min(1080px,100%);margin:0 auto;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:end;gap:10px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 35px rgba(22,40,30,.1)}
.direct-editor-toolbar>div{margin-right:auto}.direct-editor-toolbar strong,.direct-editor-toolbar small{display:block}.direct-editor-toolbar small{margin-top:3px;color:var(--muted)}
.direct-editor-toolbar label{display:grid;gap:4px;color:var(--muted);font-size:10px;font-weight:700}.direct-editor-toolbar select,.direct-editor-toolbar input{height:36px;padding:5px 8px;border:1px solid #cfd7d0;border-radius:7px;background:#fff}.direct-editor-toolbar select{max-width:210px}.direct-editor-toolbar input[type=color]{width:44px;padding:3px}.direct-editor-toolbar input[type=number]{width:68px}
.direct-invoice-paper{color:var(--direct-ink);font-size:var(--direct-font-size)}.direct-invoice-paper .invoice-paper-header{border-color:var(--direct-accent)}.direct-invoice-paper .invoice-word,.direct-invoice-paper .invoice-label,.direct-invoice-paper .invoice-grand{color:var(--direct-accent)}.direct-invoice-paper p,.direct-invoice-paper dt{color:var(--direct-muted)}.direct-invoice-paper .invoice-paper-table th{background:var(--direct-accent)}
.direct-invoice-paper input,.direct-invoice-paper select,.direct-invoice-paper textarea{width:100%;padding:4px 5px;color:inherit;background:transparent;border:1px solid transparent;border-radius:5px;font:inherit;outline:none}.direct-invoice-paper input:hover,.direct-invoice-paper select:hover,.direct-invoice-paper textarea:hover,.direct-label:hover{background:rgba(118,88,20,.06);box-shadow:0 0 0 1px rgba(118,88,20,.2)}.direct-invoice-paper input:focus,.direct-invoice-paper select:focus,.direct-invoice-paper textarea:focus,.direct-label:focus{background:#fffbe8;border-color:var(--direct-accent);box-shadow:0 0 0 2px rgba(35,107,78,.15)}
.direct-label{display:inline-block;min-width:24px;padding:2px;border-radius:4px;outline:none;cursor:text}.direct-invoice-paper h2.direct-label,.direct-invoice-paper h3.direct-label,.direct-invoice-paper p.direct-label{display:block}.direct-amend-reason input{min-width:220px}.direct-customer-select{margin:6px 0 2px;padding:2px 4px!important;font-size:12px!important;font-weight:600!important}.direct-lines-table table{min-width:850px}.direct-lines-table th:last-child,.direct-lines-table td:last-child{width:28px;padding-left:2px;padding-right:2px}.direct-lines-table input{text-align:right}.direct-lines-table td:first-child input{text-align:left}
.direct-remove{width:25px;height:25px;color:#9d2f2f;background:#fff0ee;border:0;border-radius:6px;cursor:pointer;opacity:.25}.direct-lines-table tr:hover .direct-remove{opacity:1}.direct-add-line{margin-top:10px;padding:8px 11px;color:var(--direct-accent);background:#f3f7f4;border:1px dashed var(--direct-accent);border-radius:8px;cursor:pointer;font-weight:700}.direct-invoice-paper .invoice-copy label{display:grid;gap:5px}.direct-invoice-paper textarea{resize:vertical}.direct-invoice-paper .invoice-total-list input{text-align:right;font-weight:700}.direct-invoice-paper footer{color:var(--direct-muted)}
.direct-movable{position:relative}.direct-drag-handle{position:absolute;z-index:5;top:-12px;left:50%;display:none;transform:translateX(-50%);padding:3px 8px;color:#fff;background:var(--direct-accent);border:0;border-radius:7px;cursor:grab;font-size:10px;font-weight:700}.direct-movable:hover>.direct-drag-handle{display:block}.direct-dragging{opacity:.35}.direct-footer-wrap footer{margin-top:45px;padding-top:18px;color:var(--direct-muted);border-top:1px solid var(--line);text-align:center;font-size:11px}
.direct-custom-block{margin:20px 0;padding:var(--custom-padding);color:var(--custom-text);background:var(--custom-bg);border:1px solid var(--custom-border);border-radius:10px;text-align:var(--custom-align)}.direct-custom-content{min-height:24px;white-space:pre-wrap;outline:none}.direct-custom-content:focus{box-shadow:inset 0 -2px 0 var(--custom-border)}.direct-custom-tools{position:absolute;z-index:6;top:-38px;right:0;display:none;align-items:center;gap:6px;padding:5px 7px;color:#34423a;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 22px rgba(22,40,30,.14);font-size:9px;font-weight:700}.direct-custom-block:hover>.direct-custom-tools,.direct-custom-block:focus-within>.direct-custom-tools{display:flex}.direct-custom-tools label{display:flex;align-items:center;gap:3px;white-space:nowrap}.direct-custom-tools input[type=color]{width:25px;height:24px;padding:1px;border:1px solid #cfd7d0;border-radius:5px}.direct-custom-tools input[type=number]{width:46px;height:26px;padding:3px}.direct-custom-tools select{width:auto;height:26px;padding:2px 5px}.direct-custom-remove{padding:5px 7px;color:#9d2f2f;background:#fff0ee;border:0;border-radius:6px;cursor:pointer;font-size:9px;font-weight:700}
.renew-form{display:flex;align-items:center;gap:7px;min-width:245px}.renew-form input{min-width:135px;padding:8px;border:1px solid var(--line);border-radius:7px}
.auth-card-compact{grid-template-columns:minmax(320px,520px);justify-content:center}.auth-card-compact .login-panel{border-radius:18px}
.password-reset{margin-top:8px}.password-reset summary{color:var(--accent);cursor:pointer;font-size:12px;font-weight:700}.password-reset form{display:grid;gap:6px;margin-top:7px}.password-reset input{min-width:190px;padding:8px;border:1px solid var(--line);border-radius:7px}
.status-form{display:flex;align-items:center;gap:6px;margin-top:6px}.status-form select{padding:7px;border:1px solid var(--line);border-radius:7px;background:#fff}
.branch-editor{padding:13px 0;border-bottom:1px solid var(--line)}.branch-editor summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer}.branch-editor summary span{color:var(--muted);font-size:12px}.branch-editor form{margin-top:14px}
.settings-logo-preview{display:block;max-width:220px;max-height:100px;margin:0 0 14px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff}
.sequence-company-picker{display:flex;align-items:end;gap:12px;margin-bottom:18px}.sequence-company-picker label{flex:1}.sequence-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:15px;margin-top:14px}.sequence-card{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:12px}.sequence-card label{display:grid;gap:5px}.sequence-card input,.sequence-company-picker select{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.cancel-invoice{position:relative}.cancel-invoice summary{padding:10px;color:#9d2f2f;cursor:pointer;font-weight:700}.cancel-invoice form{position:absolute;z-index:8;right:0;display:flex;gap:7px;min-width:420px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12)}.cancel-invoice input{flex:1;padding:9px;border:1px solid var(--line);border-radius:7px}.button-danger{color:#fff;background:#a83232;border-color:#a83232}
.report-filter{display:flex;align-items:end;gap:12px;margin-bottom:18px}.report-filter label{display:grid;gap:5px;min-width:190px}.report-filter input,.report-filter select{padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}.report-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.report-metrics article{padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px}.report-metrics span,.report-metrics strong{display:block}.report-metrics span{color:var(--muted)}.report-metrics strong{margin-top:7px;font-size:22px}.report-section{margin-bottom:16px}.audit-json{max-width:360px;white-space:pre-wrap;font-size:10px}
.invoice-paper-header,.invoice-parties,.invoice-summary { display:flex; justify-content:space-between; gap:40px; }
.invoice-paper-header { padding-bottom:32px; border-bottom:2px solid #20392c; }
.invoice-paper-header h2 { margin:20px 0 8px; }
.invoice-paper-header p,.invoice-parties p { margin:3px 0; color:#68736c; font-size:13px; }
.invoice-word { color:var(--green); font-size:12px; font-weight:700; letter-spacing:.2em; }
.invoice-identity { display:grid; align-content:start; justify-items:end; gap:8px; }
.invoice-identity strong { font-size:24px; }
.invoice-identity span { color:var(--muted); }
.invoice-parties { padding:34px 0; }
.invoice-parties h3 { margin:8px 0; }
.invoice-parties > div { max-width:50%; }
.invoice-parties dl { min-width:280px; margin:0; }
.invoice-parties dl div { padding:6px 0; display:flex; justify-content:space-between; gap:24px; }
.invoice-parties dt { color:var(--muted); }
.invoice-parties dd { margin:0; font-weight:600; text-align:right; }
.invoice-label { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.invoice-paper-table { overflow-x:auto; }
.invoice-paper-table table { min-width:700px; }
.invoice-paper-table th { color:#fff; background:#20392c; border:0; }
.invoice-paper-table th:first-child { border-radius:8px 0 0 8px; }
.invoice-paper-table th:last-child { border-radius:0 8px 8px 0; }
.invoice-paper-table th:not(:first-child),.invoice-paper-table td:not(:first-child) { text-align:right; }
.invoice-summary { padding-top:30px; align-items:flex-start; }
.invoice-copy { max-width:50%; display:grid; gap:20px; }
.invoice-copy p { color:var(--muted); font-size:13px; line-height:1.55; }
.invoice-total-list { width:330px; margin:0; }
.invoice-grand { color:var(--green); font-size:18px; border-top:2px solid #20392c !important; }
.invoice-paper footer { margin-top:45px; padding-top:18px; color:var(--muted); border-top:1px solid var(--line); text-align:center; font-size:11px; }
.print-controls { width:min(920px,100%); margin:0 auto 16px; display:flex; justify-content:flex-end; }
.delivery-grid { width:min(920px,100%); margin:20px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.delivery-grid h2 { margin:9px 0; }
.delivery-grid p { font-size:14px; line-height:1.5; }
.delivery-form { margin-top:20px; display:flex; gap:8px; }
.delivery-form input { min-width:0; flex:1; padding:11px 12px; border:1px solid #cfd7d0; border-radius:9px; outline:none; }
.delivery-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(35,107,78,.12); }
.delivery-history { margin:18px 0 0; padding:0; list-style:none; }
.delivery-history li { padding:12px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--line); }
.delivery-history strong,.delivery-history small { display:block; }
.delivery-history small { margin-top:4px; color:var(--muted); }
.delivery-failed { color:#9d2f2f; background:#fff0ee; }
.payment-grid{width:min(920px,100%);margin:20px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}.payment-entry h2{margin:9px 0 18px}.payment-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment-form label{display:grid;gap:6px;color:#354139;font-size:12px;font-weight:700}.payment-form input,.payment-form select,.payment-form textarea{width:100%;padding:10px 11px;border:1px solid #cfd7d0;border-radius:8px;background:#fff}.payment-notes,.payment-form button{grid-column:1/-1}.payment-history{margin:16px 0 0;padding:0;list-style:none}.payment-history li{padding:12px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-top:1px solid var(--line)}.payment-history strong,.payment-history small{display:block}.payment-history small{margin-top:4px;color:var(--muted)}.paid-confirmation{padding:18px;display:grid;gap:4px;color:#1d6847;background:#e8f5ed;border-radius:12px}.financial-metrics{margin:0 0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.financial-metrics article{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}.financial-metrics span,.financial-metrics small{display:block;color:var(--muted)}.financial-metrics strong{display:block;margin:8px 0;font-size:22px}.financial-metrics small{font-size:12px}.financial-metrics .metric-overdue{border-color:#efc3bf}.financial-metrics .metric-overdue strong{color:#9d2f2f}.dashboard-recent{margin-bottom:22px}.dashboard-recent h2{margin:6px 0 0}
.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.template-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; transition:transform .2s ease,box-shadow .2s ease; }
.template-card:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(27,50,36,.1); }
.template-selected { border-color:#70a98e; box-shadow:0 0 0 3px rgba(35,107,78,.1); }
.template-preview { min-height:390px; margin:14px; padding:24px; color:var(--preview-ink); background:#fff; border:1px solid #e4e8e5; border-radius:12px; box-shadow:0 10px 25px rgba(23,42,33,.08); font-size:9px; }
.preview-top,.preview-meta,.preview-row,.preview-total { display:flex; justify-content:space-between; gap:12px; }
.preview-top { padding-bottom:18px; border-bottom:2px solid var(--preview-accent); }
.preview-top div { display:grid; gap:4px; }
.preview-top span,.preview-meta small { color:var(--preview-accent); font-weight:700; letter-spacing:.12em; }
.preview-top strong { font-size:17px; }.preview-top small { color:var(--preview-muted); }.preview-top b { font-size:12px; }
.preview-meta { padding:24px 0; }.preview-meta > div { display:grid; grid-template-columns:auto auto; gap:5px 14px; }.preview-meta > div:first-child { display:flex; flex-direction:column; gap:6px; }.preview-meta span { color:var(--preview-muted); }
.preview-table { border-bottom:1px solid #dfe5e1; }.preview-row { display:grid; grid-template-columns:1fr 35px 65px; padding:9px 8px; border-top:1px solid #e3e7e4; }.preview-row span:nth-child(n+2) { text-align:right; }.preview-head { color:#fff; background:var(--preview-accent); border:0; font-weight:700; }
.preview-total { margin:24px 0 0 auto; width:58%; padding:12px 0; color:var(--preview-accent); border-top:2px solid var(--preview-accent); font-size:11px; }
.template-modern-slate { padding:0; background:#f8fafc; }.template-modern-slate .preview-top { padding:24px; color:#fff; background:var(--preview-accent); border:0; }.template-modern-slate .preview-top span,.template-modern-slate .preview-top small { color:#d9e2eb; }.template-modern-slate .preview-meta,.template-modern-slate .preview-table,.template-modern-slate .preview-total { margin-left:24px; margin-right:24px; }.template-modern-slate .preview-row:not(.preview-head):nth-child(odd) { background:#eef2f6; }
.template-minimal-mono { border-color:#222; box-shadow:none; }.template-minimal-mono .preview-top { border-bottom:1px solid #111; }.template-minimal-mono .preview-head { color:#111; background:#fff; border-top:1px solid #111; border-bottom:1px solid #111; }.template-minimal-mono .preview-row { padding-top:13px; padding-bottom:13px; }.template-minimal-mono .preview-total { border-top:1px solid #111; }
.template-card-footer { min-height:118px; padding:20px; display:flex; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid var(--line); }
.template-title-row { display:flex; align-items:center; gap:10px; }.template-title-row h2 { margin:0; font-size:19px; }.template-card-footer p { margin:6px 0 0; color:var(--muted); font-size:12px; }.template-card-footer form { margin:0; }
@media (max-width:850px) { .auth-card,.content-grid { grid-template-columns:1fr; } .auth-intro { display:none; } .metric-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:950px) { .admin-grid { grid-template-columns:1fr; } }
@media (max-width:1100px) { .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .form-row,.form-row-three { grid-template-columns:1fr; } .page-heading { display:block; } .page-heading .button { margin-top:12px; } .sequence-preview { display:grid; } .collection-tools,.search-form { align-items:stretch; flex-direction:column; } .record-count { align-self:flex-start; } }
@media (max-width:520px) { .login-panel { padding:42px 28px; } .metric-grid { grid-template-columns:1fr; } .dashboard-heading { display:block; } .header-actions .user-chip,.header-actions .nav-link { display:none; } }
@media (max-width:680px) { .template-grid { grid-template-columns:1fr; } }
@media (max-width:850px) { .invoice-meta-grid { grid-template-columns:1fr 1fr; } .invoice-bottom-grid,.delivery-grid,.payment-grid { grid-template-columns:1fr; } .financial-metrics{grid-template-columns:1fr 1fr}.invoice-paper { padding:32px; } .invoice-view-toolbar,.invoice-paper-header,.invoice-parties,.invoice-summary { flex-direction:column; align-items:stretch; } .invoice-identity { justify-items:start; } .invoice-parties > div,.invoice-copy { max-width:none; } .invoice-total-list { width:100%; } }
@media(max-width:560px){.financial-metrics,.payment-form{grid-template-columns:1fr}.payment-notes,.payment-form button{grid-column:auto}}
@media(max-width:650px){.invoice-template-choice{grid-template-columns:1fr}.selected-template-preview{grid-column:auto;align-items:flex-start;flex-wrap:wrap}.selected-template-preview .text-link{width:100%;margin-left:42px}}
@media(max-width:900px){.direct-editor-toolbar{position:static;flex-wrap:wrap;align-items:end}.direct-editor-toolbar>div{width:100%;margin-right:0}.direct-invoice-paper{min-width:820px}.direct-invoice-editor{overflow-x:auto}}
@media print { body { background:#fff; } .app-header,.print-controls { display:none !important; } .app-shell { width:100%; margin:0; padding:0; } .invoice-paper { width:100%; padding:0; border:0; box-shadow:none; } }
.builder-page-heading{margin-bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.builder-page-heading h1{margin:8px 0}.builder-page-heading p{margin:0;color:var(--muted)}.builder-heading-actions{display:flex;gap:8px}.builder-name-row{margin-bottom:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px}.builder-name-row label{flex:1;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700}.builder-name-row input{flex:1;max-width:420px;padding:9px 11px;border:1px solid #cfd7d0;border-radius:8px}
.builder-workspace{display:grid;grid-template-columns:270px minmax(560px,1fr) 230px;gap:14px;align-items:start}.builder-sidebar,.builder-history{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px}.builder-tool-section{padding:18px;border-bottom:1px solid var(--line)}.builder-tool-section:last-child{border-bottom:0}.builder-tool-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.builder-tool-title h2{margin:0;font-size:15px}.builder-tool-title small{color:var(--muted)}
.block-palette{margin-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.block-palette button,.builder-toolbar button{padding:9px;color:#344139;background:#f4f6f2;border:1px solid #dde3dd;border-radius:8px;cursor:pointer;font-weight:700}.block-palette button:hover,.builder-toolbar button:hover,.builder-toolbar button.active{color:#fff;background:var(--green);border-color:var(--green)}.builder-controls{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.builder-controls label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:700}.builder-controls input,.builder-controls select{width:100%;min-height:36px;padding:6px;border:1px solid #cfd7d0;border-radius:8px;background:#fff}.builder-controls input[type=color]{padding:3px}.builder-controls .full-control{grid-column:1/-1}
.column-controls{margin-top:12px;display:grid;gap:7px}.column-control{display:grid;grid-template-columns:20px 1fr 28px 28px;gap:5px;align-items:center}.column-control input:not([type=checkbox]){min-width:0;padding:7px;border:1px solid #d4dbd5;border-radius:7px}.column-control button{height:28px;padding:0;background:#f2f4f1;border:1px solid #dce2dc;border-radius:6px;cursor:pointer}.block-inspector{margin-top:12px;display:grid;gap:8px}.block-inspector small{color:var(--muted)}.block-inspector p{margin:0;color:var(--muted);font-size:12px}.block-inspector label{display:grid;gap:6px;font-size:12px;font-weight:700}.block-inspector textarea{width:100%;padding:8px;border:1px solid #cfd7d0;border-radius:8px;resize:vertical}
.block-inspector input,.block-inspector select{width:100%;min-width:0;padding:7px;border:1px solid #cfd7d0;border-radius:7px;background:#fff}.block-inspector input[type=color]{padding:2px;min-height:34px}.inspector-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px;border-top:1px solid var(--line)}.inspector-wide{grid-column:1/-1}.canvas-editable{display:inline-block;min-width:20px;border-radius:3px;outline:none;cursor:text}.canvas-editable:hover{box-shadow:0 0 0 2px rgba(124,58,237,.18)}.canvas-editable:focus{background:#fffbe8;box-shadow:0 0 0 2px var(--builder-accent)}
.builder-main{min-width:0}.builder-toolbar{margin-bottom:10px;padding:10px;display:flex;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px}.builder-toolbar>div{display:flex;gap:6px}.builder-toolbar button{padding:7px 11px}.builder-toolbar button:disabled{opacity:.45;cursor:not-allowed}.builder-stage{padding:28px;overflow:auto;background:#dfe4de;border-radius:16px;min-height:700px}.builder-stage.print .builder-invoice{width:595px;min-height:842px}.builder-stage.desktop .builder-invoice{width:min(760px,100%);min-height:900px}.builder-invoice{margin:0 auto;padding:34px;color:var(--builder-ink);background:#fff;box-shadow:0 15px 40px rgba(22,40,30,.14);font-size:var(--builder-font-size)}
.builder-block{position:relative;margin-bottom:var(--builder-spacing);border:1px dashed transparent;border-radius:7px;transition:border .15s,opacity .15s}.builder-block:hover,.builder-block.block-selected{border-color:var(--builder-accent)}.builder-block.dragging{opacity:.35}.builder-block.block-hidden .block-body{opacity:.18;filter:grayscale(1)}.block-chrome{position:absolute;z-index:2;top:-13px;left:7px;right:7px;padding:3px 5px;display:none;align-items:center;gap:6px;color:#fff;background:var(--builder-accent);border-radius:6px;font-size:9px}.builder-block:hover .block-chrome,.builder-block.block-selected .block-chrome{display:flex}.block-chrome>div{margin-left:auto;display:flex;gap:3px}.block-chrome button{padding:2px 5px;color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:4px;cursor:pointer;font-size:8px}.block-chrome button:disabled{opacity:.35}.drag-handle{cursor:grab}.block-body{padding:5px}
.block-body.custom-block-text,.block-body.custom-block-text *{color:var(--block-text)!important}
.sample-header,.sample-billing{display:flex;justify-content:space-between;gap:22px}.sample-header{padding-bottom:16px;border-bottom:2px solid var(--builder-accent)}.sample-header span,.sample-billing span,.sample-copy span{color:var(--builder-accent);font-size:.72em;font-weight:700;letter-spacing:.13em}.sample-header h2{margin:7px 0 3px;font-size:2em}.sample-header p,.sample-billing p,.sample-copy p{margin:3px 0;color:var(--builder-muted)}.sample-header>strong{font-size:1.2em}.sample-billing{padding:12px 0}.sample-billing h3{margin:5px 0;font-size:1.4em}.sample-billing dl{min-width:42%;margin:0}.sample-billing dl div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}.sample-billing dd{margin:0;font-weight:700}
.sample-items{overflow:hidden}.sample-item-row{display:grid;border-bottom:1px solid #e0e5e1}.sample-item-row span{padding:8px 6px;text-align:right;overflow:hidden}.sample-item-row span:first-child{text-align:left}.sample-item-head{color:#fff;background:var(--builder-accent);font-weight:700}.sample-copy{max-width:55%}.sample-totals{width:48%;margin-left:auto}.sample-totals>div{padding:6px 0;display:flex;justify-content:space-between;border-bottom:1px solid #dce2dd}.sample-grand{color:var(--builder-accent);border-top:2px solid var(--builder-accent);font-size:1.25em;font-weight:700}.sample-footer{padding-top:12px;color:var(--builder-muted);border-top:1px solid #dce2dd;text-align:center}.sample-custom{padding:14px;color:var(--builder-ink);background:#f2f5f2;border-left:3px solid var(--builder-accent)}
.builder-history{padding:18px}.builder-history ol{margin:14px 0 0;padding:0;list-style:none}.builder-history li{padding:11px 0;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line)}.builder-history strong,.builder-history small{display:block}.builder-history small{margin-top:3px;color:var(--muted);font-size:10px}
@media(max-width:1200px){.builder-workspace{grid-template-columns:240px minmax(520px,1fr)}.builder-history{position:static;grid-column:1/-1;max-height:none}.builder-history ol{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}}
@media(max-width:850px){.builder-page-heading,.builder-name-row{align-items:stretch;flex-direction:column}.builder-workspace{display:block}.builder-sidebar,.builder-history{position:static;max-height:none;margin-bottom:14px}.builder-stage{padding:12px}.builder-stage.desktop .builder-invoice,.builder-stage.print .builder-invoice{width:680px}.builder-history ol{grid-template-columns:1fr}}