:root {
  --ui-bg: #f2f5f8;
  --ui-panel: #ffffff;
  --ui-ink: #16202a;
  --ui-muted: #687481;
  --ui-border: #dfe5eb;
  --ui-accent: #1d4ed8;
  --ui-soft: #eef3f8;
  --ui-danger: #b42318;
  --paper: #ffffff;
  --ink: #17202a;
  --muted: #65717d;
  --accent: #173c78;
  --accent2: #b88a44;
  --soft: #f3f6fa;
  --line: #d8dee6;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: Georgia, "Times New Roman", serif;
  --radius: 18px;
  --header-align: row;
}

* { box-sizing: border-box; }
html { background: var(--ui-bg); }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ui-ink); background: var(--ui-bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 450px) 1fr; }
.editor-panel { background: var(--ui-panel); border-right: 1px solid var(--ui-border); padding: 24px; height: 100vh; overflow: auto; position: sticky; top: 0; }
.brand-block { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg,#111827,#334155); color:#fff; font-weight:800; font-size:24px; box-shadow:0 10px 22px rgba(15,23,42,.16); }
.brand-block h1 { margin: 2px 0 4px; font-size: 24px; letter-spacing: -.03em; }
.brand-block p { margin:0; color:var(--ui-muted); font-size:13px; }
.eyebrow, .label, .preview-label { text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; color:var(--ui-muted); }

.toolbar { display:flex; gap:10px; flex-wrap:wrap; }
.primary-toolbar { margin-bottom:14px; }
.btn { border:1px solid var(--ui-border); border-radius:11px; padding:10px 13px; background:#fff; color:var(--ui-ink); font-weight:700; font-size:13px; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,23,42,.08); }
.btn-primary { background:#111827; color:#fff; border-color:#111827; flex:1; }
.btn-soft { background:var(--ui-soft); }
.btn-danger { color:var(--ui-danger); }
.full-width { width:100%; margin-top:10px; }

.card { border:1px solid var(--ui-border); background:#fff; border-radius:15px; padding:14px; margin:12px 0; box-shadow:0 2px 8px rgba(15,23,42,.03); }
.compact-card { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.style-status strong { display:block; margin-top:4px; }
.style-counter { min-width:56px; text-align:center; border-radius:999px; background:var(--ui-soft); padding:7px 10px; font-size:12px; font-weight:800; }
details summary { cursor:pointer; font-weight:800; font-size:14px; list-style:none; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; float:right; color:var(--ui-muted); }
details[open] summary::after { content:"−"; }
details[open] summary { margin-bottom:14px; }
.form-grid { display:grid; gap:11px; }
.form-grid.two-col { grid-template-columns:1fr 1fr; }
.form-grid .full { grid-column:1 / -1; }
label { display:grid; gap:6px; color:#46515d; font-size:11px; font-weight:800; letter-spacing:.01em; }
input, textarea, select { width:100%; border:1px solid var(--ui-border); border-radius:10px; padding:10px 11px; outline:none; color:var(--ui-ink); background:#fff; font-weight:600; font-size:13px; }
textarea { resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:#8aa2bc; box-shadow:0 0 0 3px rgba(59,130,246,.08); }
.switch-row { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:9px; padding:10px 0 2px; }
.switch-row input { width:auto; }
.notice { margin-top:12px; border:1px solid #f5d490; background:#fff8e8; color:#7a4a00; padding:10px 11px; border-radius:10px; font-size:12px; line-height:1.45; }
.hidden { display:none !important; }

.items-editor { display:grid; gap:8px; }
.item-editor-row { display:grid; grid-template-columns:minmax(0,1fr) 66px 88px 34px; gap:7px; align-items:center; }
.item-editor-row input { padding:9px; }
.icon-btn { width:34px; height:34px; border-radius:9px; border:1px solid var(--ui-border); background:#fff; font-size:20px; color:#697581; }
.footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.footer-actions .btn-danger { grid-column:1/-1; }
.privacy-note { text-align:center; color:var(--ui-muted); font-size:11px; line-height:1.5; margin:16px 20px 6px; }

.preview-stage { min-width:0; padding:24px 30px 60px; overflow:auto; }
.preview-topbar { max-width:210mm; margin:0 auto 12px; display:flex; justify-content:space-between; align-items:flex-end; color:var(--ui-muted); font-size:11px; }
.preview-topbar > div:first-child { display:flex; gap:9px; align-items:center; }
.preview-hint { text-align:right; }

.invoice-paper { width:210mm; min-height:297mm; margin:0 auto; background:var(--paper); color:var(--ink); position:relative; overflow:hidden; box-shadow:0 18px 65px rgba(15,23,42,.14); padding:18mm 16mm 13mm; font-family:var(--font); display:flex; flex-direction:column; isolation:isolate; }
.design-layer { position:absolute; pointer-events:none; z-index:-1; }
.design-layer-a { inset:0 auto auto 0; }
.design-layer-b { inset:auto 0 0 auto; }
.invoice-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; position:relative; }
.seller-identity { display:flex; gap:12px; align-items:center; min-width:0; }
.logo-wrap { width:44px; height:44px; border-radius:10px; border:1px solid var(--line); overflow:hidden; background:#fff; display:grid; place-items:center; }
.logo-wrap img { width:100%; height:100%; object-fit:contain; }
.company-name { font-weight:900; font-size:21px; letter-spacing:-.025em; color:var(--accent); max-width:102mm; }
.owner-name { color:var(--muted); margin-top:3px; font-weight:700; font-size:11px; }
.invoice-heading { text-align:right; }
.invoice-kicker { font-size:8px; font-weight:900; letter-spacing:.22em; color:var(--muted); }
.invoice-title { font-family:var(--display-font); font-size:30px; font-weight:900; letter-spacing:.04em; line-height:1; color:var(--accent); margin-top:5px; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; margin-top:8px; border-radius:999px; padding:5px 10px; font-size:8px; font-weight:900; letter-spacing:.13em; color:var(--accent); border:1px solid currentColor; }
.hero-rule { height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2),transparent); margin:11mm 0 8mm; }
.meta-grid { display:grid; grid-template-columns:1.05fr 1.05fr .9fr; gap:9mm; }
.client-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:3px; }
.client-card-head > div:first-child { min-width:0; }
.client-logo-wrap { width:52px; height:38px; flex:0 0 auto; border:1px solid var(--line); border-radius:8px; background:#fff; display:grid; place-items:center; overflow:hidden; padding:3px; }
.client-logo-wrap img { width:100%; height:100%; object-fit:contain; }

.info-card { min-width:0; font-size:9.6px; line-height:1.55; color:var(--muted); }
.info-card strong { display:block; color:var(--ink); font-size:10.3px; margin-bottom:3px; }
.section-label { text-transform:uppercase; letter-spacing:.15em; font-size:7.7px; color:var(--accent); font-weight:900; margin-bottom:6px; }
.preline { white-space:pre-line; }
.meta-row { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--line); }
.meta-row span { color:var(--muted); }
.meta-row strong { text-align:right; margin:0; }
.items-section { margin-top:10mm; }
.invoice-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:9.5px; }
.invoice-table th { text-align:right; padding:7px 7px; color:var(--accent); font-size:7.8px; text-transform:uppercase; letter-spacing:.12em; border-bottom:2px solid var(--accent); }
.invoice-table th.description-col { text-align:left; width:58%; }
.invoice-table td { padding:8px 7px; border-bottom:1px solid var(--line); vertical-align:top; text-align:right; }
.invoice-table td:first-child { text-align:left; color:var(--ink); font-weight:700; }
.invoice-table .line-secondary { display:block; color:var(--muted); font-weight:500; margin-top:2px; }
.totals-area { display:grid; grid-template-columns:1fr 73mm; gap:13mm; margin-top:11mm; align-items:start; }
.notes-column { display:grid; gap:8mm; }
.content-block { color:var(--muted); font-size:9.3px; line-height:1.6; }
.totals-card { border-top:2px solid var(--accent); padding-top:5px; }
.total-row { display:flex; justify-content:space-between; gap:12px; padding:5px 2px; font-size:9.5px; color:var(--muted); }
.total-row strong { color:var(--ink); }
.grand-total { margin-top:4px; padding:9px 8px; background:var(--soft); color:var(--accent); font-size:11px; font-weight:900; }
.grand-total strong { color:var(--accent); font-size:13px; }
.balance-row { padding-top:8px; border-top:1px solid var(--line); font-weight:900; color:var(--ink); }
.terms-block { margin-top:10mm; font-size:8.8px; line-height:1.55; color:var(--muted); padding-top:5mm; border-top:1px solid var(--line); }
.invoice-footer { margin-top:auto; padding-top:10mm; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; font-size:7.8px; color:var(--muted); }
.footer-page-mark { text-transform:uppercase; letter-spacing:.14em; font-weight:900; color:var(--accent); }

/* Layout families */
.invoice-paper.family-1 .design-layer-a { width:54mm; height:7mm; background:var(--accent); }
.invoice-paper.family-1 .design-layer-b { width:30mm; height:30mm; border-right:9mm solid var(--accent2); border-bottom:9mm solid var(--accent2); opacity:.12; }

.invoice-paper.family-2 { padding-top:24mm; }
.invoice-paper.family-2 .design-layer-a { width:100%; height:14mm; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.invoice-paper.family-2 .invoice-title, .invoice-paper.family-2 .company-name { color:var(--ink); }
.invoice-paper.family-2 .hero-rule { height:1px; background:var(--line); }
.invoice-paper.family-2 .totals-card { border:1px solid var(--line); padding:8px 10px; border-radius:var(--radius); }

.invoice-paper.family-3 .invoice-header { align-items:center; }
.invoice-paper.family-3 .company-name { font-family:var(--display-font); font-weight:800; }
.invoice-paper.family-3 .invoice-title { font-family:var(--font); letter-spacing:.18em; font-size:25px; }
.invoice-paper.family-3 .hero-rule { width:25mm; margin-left:auto; background:var(--accent); }
.invoice-paper.family-3 .meta-grid { background:var(--soft); padding:7mm; border-radius:var(--radius); gap:7mm; }

.invoice-paper.family-4 { border-top:6mm solid var(--accent); }
.invoice-paper.family-4 .design-layer-b { width:70mm; height:70mm; border-radius:50%; background:var(--accent2); opacity:.08; transform:translate(25mm,25mm); }
.invoice-paper.family-4 .invoice-heading { background:var(--accent); color:#fff; padding:6mm; border-radius:0 0 0 16px; margin-top:-18mm; margin-right:-16mm; min-width:58mm; }
.invoice-paper.family-4 .invoice-title, .invoice-paper.family-4 .invoice-kicker, .invoice-paper.family-4 .status-pill { color:#fff; }
.invoice-paper.family-4 .status-pill { opacity:.9; }

.invoice-paper.family-5 .invoice-header { flex-direction:column; gap:7mm; }
.invoice-paper.family-5 .invoice-heading { text-align:left; display:flex; align-items:baseline; gap:12px; }
.invoice-paper.family-5 .status-pill { margin-left:auto; }
.invoice-paper.family-5 .hero-rule { margin-top:5mm; }
.invoice-paper.family-5 .meta-grid { grid-template-columns:1fr 1fr; }
.invoice-paper.family-5 .invoice-meta { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:5mm; background:var(--soft); padding:5mm; }
.invoice-paper.family-5 .meta-row { display:block; border:0; }
.invoice-paper.family-5 .meta-row strong { display:block; text-align:left; margin-top:3px; }

.invoice-paper.family-6 { padding-left:28mm; }
.invoice-paper.family-6 .design-layer-a { width:12mm; height:100%; background:var(--accent); }
.invoice-paper.family-6 .design-layer-b { width:7mm; height:42mm; left:12mm; top:38mm; right:auto; bottom:auto; background:var(--accent2); }
.invoice-paper.family-6 .hero-rule { background:var(--accent2); }
.invoice-paper.family-6 .invoice-table th { border-bottom-color:var(--accent2); }

.invoice-paper.family-7 .invoice-header { padding:8mm; margin:-8mm -8mm 0; background:var(--soft); border-radius:var(--radius); }
.invoice-paper.family-7 .hero-rule { background:none; height:0; margin:7mm 0; }
.invoice-paper.family-7 .info-card { border-left:2px solid var(--accent); padding-left:4mm; }
.invoice-paper.family-7 .totals-card { background:var(--accent); color:#fff; padding:8px 10px; border-radius:var(--radius); border:0; }
.invoice-paper.family-7 .total-row, .invoice-paper.family-7 .total-row strong, .invoice-paper.family-7 .grand-total, .invoice-paper.family-7 .grand-total strong, .invoice-paper.family-7 .balance-row { color:#fff; }
.invoice-paper.family-7 .grand-total { background:rgba(255,255,255,.12); }

.invoice-paper.family-8 .company-name { text-transform:uppercase; letter-spacing:.08em; font-size:16px; }
.invoice-paper.family-8 .invoice-title { font-size:36px; letter-spacing:-.04em; }
.invoice-paper.family-8 .design-layer-a { width:85mm; height:85mm; border:1px solid var(--accent); border-radius:50%; opacity:.11; transform:translate(-43mm,-50mm); }
.invoice-paper.family-8 .meta-grid { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6mm 0; }
.invoice-paper.family-8 .invoice-table th { background:var(--ink); color:var(--paper); border:0; }

.invoice-paper.family-9 .invoice-header { border-bottom:5mm solid var(--accent); padding-bottom:7mm; }
.invoice-paper.family-9 .hero-rule { height:0; margin:6mm 0; }
.invoice-paper.family-9 .meta-grid { grid-template-columns:1.2fr 1.2fr .7fr; }
.invoice-paper.family-9 .client-card { background:var(--soft); padding:5mm; }
.invoice-paper.family-9 .totals-card { border-top:0; border-left:4px solid var(--accent); padding-left:12px; }

.invoice-paper.family-10 .design-layer-a { width:100%; height:100%; background:linear-gradient(145deg,transparent 0 70%, color-mix(in srgb,var(--accent) 7%, transparent) 70% 100%); }
.invoice-paper.family-10 .invoice-heading { border:1px solid var(--accent); padding:5mm; min-width:55mm; }
.invoice-paper.family-10 .meta-grid { gap:5mm; }
.invoice-paper.family-10 .info-card { border:1px solid var(--line); padding:5mm; }
.invoice-paper.family-10 .invoice-table { border:1px solid var(--line); }
.invoice-paper.family-10 .invoice-table th { background:var(--soft); }

/* Fine variants driven by data-variant */
.invoice-paper[data-variant="2"] { --radius:4px; }
.invoice-paper[data-variant="3"] .invoice-title { font-style:italic; }
.invoice-paper[data-variant="4"] .section-label { letter-spacing:.25em; }
.invoice-paper[data-variant="5"] .invoice-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--soft) 68%, transparent); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns:1fr; }
  .editor-panel { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--ui-border); }
  .preview-stage { padding:20px 10px 50px; }
  .invoice-paper { transform-origin:top center; }
}

@media (max-width: 760px) {
  .editor-panel { padding:16px; }
  .form-grid.two-col { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .preview-stage { overflow-x:auto; }
  .preview-topbar { width:210mm; }
}

@page { size:A4; margin:0; }
@media print {
  html, body { background:#fff !important; margin:0 !important; padding:0 !important; width:210mm; }
  .editor-panel, .preview-topbar { display:none !important; }
  .app-shell, .preview-stage { display:block !important; padding:0 !important; margin:0 !important; background:#fff !important; }
  .invoice-paper { margin:0 !important; width:210mm !important; min-height:297mm !important; box-shadow:none !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; page-break-after:avoid; }
}

/* Bespoke per-theme details: each of the 50 numbered designs has an additional unique treatment. */
.invoice-paper[data-theme="1"] .company-name { border-bottom:2px solid var(--accent2); padding-bottom:3px; }
.invoice-paper[data-theme="2"] .invoice-heading { box-shadow:inset 4px 0 0 var(--accent2); padding-left:5mm; }
.invoice-paper[data-theme="3"] .meta-grid { border-top:3px double var(--accent2); padding-top:5mm; }
.invoice-paper[data-theme="4"] .invoice-table th:first-child { border-radius:8px 0 0 8px; }
.invoice-paper[data-theme="5"] .grand-total { border-left:4px solid var(--accent2); }
.invoice-paper[data-theme="6"] .seller-identity { padding-left:5mm; border-left:3px solid var(--accent2); }
.invoice-paper[data-theme="7"] .totals-card { box-shadow:0 0 0 1px var(--line), 6px 6px 0 var(--soft); }
.invoice-paper[data-theme="8"] .section-label { text-decoration:underline; text-underline-offset:3px; }
.invoice-paper[data-theme="9"] .invoice-title { border-bottom:1px solid var(--accent); padding-bottom:2mm; }
.invoice-paper[data-theme="10"] .meta-row strong { font-family:var(--display-font); }

.invoice-paper[data-theme="11"] .hero-rule { width:55%; }
.invoice-paper[data-theme="12"] .invoice-header { border-bottom:1px dashed var(--accent2); padding-bottom:5mm; }
.invoice-paper[data-theme="13"] .info-card strong { font-family:var(--display-font); font-size:11px; }
.invoice-paper[data-theme="14"] .invoice-table td { border-bottom-style:dashed; }
.invoice-paper[data-theme="15"] .status-pill { border-radius:4px; }
.invoice-paper[data-theme="16"] .invoice-title { text-transform:none; font-variant:small-caps; }
.invoice-paper[data-theme="17"] .totals-card { border-top:0; border-right:3px solid var(--accent2); padding-right:8px; }
.invoice-paper[data-theme="18"] .invoice-footer { border-top:1px solid var(--line); padding-top:6mm; }
.invoice-paper[data-theme="19"] .client-card { border-radius:10px; }
.invoice-paper[data-theme="20"] .invoice-heading { transform:rotate(-1deg); }

.invoice-paper[data-theme="21"] .invoice-table thead { box-shadow:inset 0 -1px 0 var(--accent2); }
.invoice-paper[data-theme="22"] .company-name { font-style:italic; }
.invoice-paper[data-theme="23"] .meta-grid { outline:1px solid var(--line); outline-offset:3mm; }
.invoice-paper[data-theme="24"] .grand-total { border-radius:999px; padding-left:13px; padding-right:13px; }
.invoice-paper[data-theme="25"] .invoice-heading { border-left:5px solid var(--accent2); padding-left:4mm; }
.invoice-paper[data-theme="26"] .seller-card { background:var(--soft); padding:4mm; border-radius:0 12px 12px 0; }
.invoice-paper[data-theme="27"] .status-pill { background:var(--soft); border-color:transparent; }
.invoice-paper[data-theme="28"] .invoice-table th { letter-spacing:.2em; }
.invoice-paper[data-theme="29"] .totals-card { border-top-style:dotted; }
.invoice-paper[data-theme="30"] .terms-block { border-top:3px double var(--line); }

.invoice-paper[data-theme="31"] .company-name::first-letter { font-size:1.3em; }
.invoice-paper[data-theme="32"] .meta-row { border-bottom-style:dotted; }
.invoice-paper[data-theme="33"] .invoice-heading { border-bottom:4px solid var(--accent2); padding-bottom:3mm; }
.invoice-paper[data-theme="34"] .invoice-table { border-collapse:separate; border-spacing:0 2px; }
.invoice-paper[data-theme="34"] .invoice-table td { background:var(--soft); border:0; }
.invoice-paper[data-theme="35"] .section-label { border-left:2px solid var(--accent2); padding-left:5px; }
.invoice-paper[data-theme="36"] .invoice-footer strong { color:var(--accent); }
.invoice-paper[data-theme="37"] .grand-total { box-shadow:inset 0 -3px 0 var(--accent2); }
.invoice-paper[data-theme="38"] .invoice-title { font-weight:500; }
.invoice-paper[data-theme="39"] .client-card { border-top:3px solid var(--accent2); }
.invoice-paper[data-theme="40"] .invoice-table th:first-child { padding-left:14px; }

.invoice-paper[data-theme="41"] .seller-identity { align-items:flex-start; }
.invoice-paper[data-theme="42"] .invoice-heading { border-radius:16px 0 16px 0; }
.invoice-paper[data-theme="43"] .meta-grid { column-gap:12mm; }
.invoice-paper[data-theme="44"] .invoice-table tbody tr:last-child td { border-bottom:2px solid var(--accent2); }
.invoice-paper[data-theme="45"] .status-pill { box-shadow:3px 3px 0 var(--soft); }
.invoice-paper[data-theme="46"] .invoice-title { writing-mode:horizontal-tb; letter-spacing:.08em; }
.invoice-paper[data-theme="47"] .totals-card { border-radius:18px 0 18px 0; }
.invoice-paper[data-theme="48"] .info-card { letter-spacing:.015em; }
.invoice-paper[data-theme="49"] .hero-rule { height:4px; border-radius:999px; }
.invoice-paper[data-theme="50"] .invoice-footer { border-top:2px solid var(--accent2); padding-top:6mm; }

/* Fixed recipient card used by the public client-facing invoice workflow. */
.recipient-fixed-card {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: #f8fafc;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.45;
}
.recipient-fixed-card strong { color: var(--ui-ink); font-size: 14px; }
.field-help { margin: 8px 1px 0; color: var(--ui-muted); font-size: 11.5px; line-height: 1.45; }

/* v3 editor refinements */
.style-status-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.theme-picker { margin-top:12px; }
.theme-picker select { background:#fff; }
input[readonly], textarea[readonly] {
  background:#f8fafc;
  color:#334155;
  border-color:#d9e1e8;
  cursor:default;
}
input[readonly]:focus, textarea[readonly]:focus {
  border-color:#d9e1e8;
  box-shadow:none;
}