/*
 * NineBrief Invoice Generator UI
 * Current release: v18.11
 *
 * The rules below preserve the existing production design while moving styling
 * out of index.html. New changes should be added to the relevant component
 * section rather than as new vXX override blocks. See docs/ARCHITECTURE.md.
 */
    :root{
      /* Invoice compatibility aliases; canonical brand values come from ninebrief-tokens.css. */
      --ink:var(--nb-text); --muted:var(--nb-muted); --bg:#f3f4f6; --card:var(--nb-white);
      --line:#d1d5db; --line-soft:#e5e7eb; --brand:var(--nb-ink); --accent:var(--nb-green);
      --danger:#b42318; --ok:#067647; --desk:var(--nb-dark); --radius:16px;
      --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
      --shadow-md:0 10px 30px rgba(16,24,40,.08); --ring:0 0 0 4px var(--nb-green-focus);
      --ninebrief-green:var(--nb-green); --ninebrief-green-dark:var(--nb-green);

      /* Consolidated Invoice application/UI variables. */
      --ui-bg:#f5f5f7; --ui-canvas:#f5f5f7; --ui-surface:var(--nb-white); --ui-surface-muted:#f8f8fa;
      --ui-fill:#f2f2f7; --ui-fill-2:#f7f7f9;
      --ui-border:rgba(60,60,67,.16); --ui-border-strong:rgba(60,60,67,.24);
      --ui-separator:rgba(60,60,67,.14); --ui-separator-strong:rgba(60,60,67,.22);
      --ui-label:var(--nb-text); --ui-secondary:var(--nb-muted); --ui-tertiary:var(--nb-document-muted); --ui-blue:#0a66c2;
      --ui-green:var(--nb-green); --ui-radius:16px;
      --ui-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
      --glass-surface:rgba(255,255,255,.70); --glass-surface-strong:rgba(255,255,255,.82);
      --glass-border:rgba(255,255,255,.72);
      --glass-shadow:0 1px 0 rgba(255,255,255,.72) inset,0 10px 34px rgba(30,41,59,.09);

      /* Shared document-control variants for the Invoice editor. */
      --nb-doc-card-margin:0 0 10px;
      --nb-doc-card-border:1px solid color-mix(in srgb,var(--section-accent,#64748b) 16%,var(--ui-separator));
      --nb-doc-card-radius:18px; --nb-doc-card-bg:var(--ui-surface); --nb-doc-card-shadow:none;
      --nb-doc-card-body-padding:14px 15px 17px; --nb-doc-card-body-border:1px solid var(--ui-border);
      --nb-doc-control-min-width:0; --nb-doc-control-min-height:44px;
      --nb-doc-control-border:1px solid var(--ui-separator-strong); --nb-doc-control-radius:11px;
      --nb-doc-control-bg:var(--nb-white); --nb-doc-control-color:var(--ui-label);
      --nb-doc-control-padding:10px 12px; --nb-doc-control-shadow:0 1px 0 rgba(0,0,0,.015);
      --nb-doc-control-size:13.5px; --nb-doc-control-line-height:1.35;
      --nb-doc-control-transition:border-color 120ms ease,box-shadow 120ms ease,background 120ms ease;
      --nb-doc-control-focus-border:#7baed9; --nb-doc-control-focus-shadow:0 0 0 3px rgba(10,102,194,.10);
      --nb-doc-segment-display:flex; --nb-doc-segment-gap:2px; --nb-doc-segment-margin-top:0;
      --nb-doc-segment-padding:3px; --nb-doc-segment-border:0; --nb-doc-segment-radius:11px;
      --nb-doc-segment-bg:#efeff1; --nb-doc-segment-button-height:34px; --nb-doc-segment-button-flex:1;
      --nb-doc-segment-button-radius:8px; --nb-doc-segment-button-color:#5f6067;
      --nb-doc-segment-button-size:12px; --nb-doc-segment-button-weight:650;
      --nb-doc-segment-active-bg:var(--nb-white); --nb-doc-segment-active-color:#1d1d1f;
      --nb-doc-segment-active-shadow:0 1px 3px rgba(0,0,0,.12);
      --nb-doc-field-gap:6px;
      --nb-doc-logo-columns:1fr auto auto; --nb-doc-logo-gap:8px; --nb-doc-logo-margin-bottom:13px;
      --nb-doc-logo-target-height:64px; --nb-doc-logo-target-padding:9px 11px;
      --nb-doc-logo-target-border:1px dashed rgba(0,122,255,.36); --nb-doc-logo-target-radius:13px;
      --nb-doc-logo-target-bg:rgba(0,122,255,.035); --nb-doc-logo-title-color:#262629; --nb-doc-logo-title-size:12.5px;
      --nb-doc-logo-help-color:var(--ui-secondary); --nb-doc-logo-help-size:10.5px;
      --nb-doc-logo-icon-size:34px; --nb-doc-logo-icon-border:1px solid rgba(0,122,255,.18);
      --nb-doc-logo-icon-radius:10px; --nb-doc-logo-icon-bg:var(--nb-white); --nb-doc-logo-icon-color:var(--ui-blue);
      --nb-doc-logo-icon-font-size:20px;
      --nb-doc-privacy-margin:12px 0 0; --nb-doc-privacy-padding:8px 4px; --nb-doc-privacy-radius:12px;
      --nb-doc-privacy-color:var(--ui-secondary); --nb-doc-privacy-size:11.5px; --nb-doc-privacy-line-height:normal;
      --nb-doc-privacy-align:center;
      --nb-doc-toast-z:200; --nb-doc-toast-offset:16px; --nb-doc-toast-max-width:min(92vw,560px);
      --nb-doc-toast-padding:11px 16px; --nb-doc-toast-radius:12px; --nb-doc-toast-bg:#111827;
      --nb-doc-toast-shadow:0 16px 40px rgba(0,0,0,.3); --nb-doc-toast-size:13.5px;
      --nb-doc-toast-weight:700; --nb-doc-toast-duration:220ms;
      --nb-doc-toolbar-z:15; --nb-doc-toolbar-min-height:54px; --nb-doc-toolbar-gap:8px;
      --nb-doc-toolbar-wrap:wrap; --nb-doc-toolbar-padding:8px 12px;
      --nb-doc-toolbar-border-bottom:1px solid rgba(255,255,255,.10);
      --nb-doc-toolbar-bg:linear-gradient(180deg,rgba(25,26,29,.86),rgba(25,26,29,.76));
      --nb-doc-toolbar-color:#e5e7eb;
      --nb-doc-toolbar-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 24px rgba(0,0,0,.12);
      --nb-doc-toolbar-backdrop:saturate(135%) blur(24px);
      --nb-doc-toolbar-button-height:34px; --nb-doc-toolbar-button-padding:6px 10px;
      --nb-doc-toolbar-button-border:1px solid rgba(255,255,255,.10);
      --nb-doc-toolbar-button-radius:9px; --nb-doc-toolbar-button-bg:rgba(255,255,255,.08);
      --nb-doc-toolbar-button-color:#e5e7eb; --nb-doc-toolbar-button-shadow:none;
      --nb-doc-toolbar-button-size:12.5px; --nb-doc-toolbar-button-weight:650;
      --nb-doc-toolbar-button-hover-border:rgba(255,255,255,.10);
      --nb-doc-toolbar-button-hover-bg:rgba(255,255,255,.14);
      --nb-doc-toolbar-button-hover-color:#e5e7eb; --nb-doc-toolbar-button-hover-shadow:none;
      --nb-doc-zoom-label-width:48px; --nb-doc-zoom-label-color:#e5e7eb;
      --nb-doc-zoom-label-size:13px; --nb-doc-zoom-label-weight:700;

      /* Action/site compatibility aliases; values derive from global tokens where branded. */
      --ninebrief-action:var(--nb-green); --ninebrief-action-hover:var(--nb-green-strong); --ninebrief-action-ink:var(--nb-green-ink);
      --download-red:#e53935; --download-red-hover:#c62828;
      --ninebrief-site-bg:var(--nb-ink); --ninebrief-site-surface:var(--nb-dark);
      --ninebrief-site-border:#27272a; --ninebrief-site-green:var(--nb-green); --ninebrief-site-muted:#a1a1aa;
    }
    *{ box-sizing:border-box; }
    [hidden]{ display:none !important; }
    body{
      margin:0;
      font-family:var(--nb-font-ui);
      font-optical-sizing:auto;
      color:var(--ui-label);
      background:var(--ui-canvas);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    button,input,select,textarea{ font:inherit; color:inherit; }

    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      min-height:64px;
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      padding:10px 18px;
      background:rgba(248,250,249,.76);
      border-bottom:1px solid rgba(255,255,255,.72);
      box-shadow:0 1px 0 rgba(17,24,39,.06),0 8px 26px rgba(17,24,39,.05);
      backdrop-filter:saturate(165%) blur(24px);
      -webkit-backdrop-filter:saturate(165%) blur(24px);
    }
    .topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
    .save-chip{ font-size:12px; color:var(--ui-secondary); border:0; border-radius:999px; padding:6px; background:transparent; white-space:nowrap; }

    .btn{
      min-height:40px; border:1px solid var(--ui-border); background:#fff; color:var(--ink); border-radius:11px;
      padding:8px 11px; cursor:pointer; font-weight:650; font-size:12.5px;
      transition:transform 110ms ease-out,background 120ms ease-out,border-color 120ms ease-out,box-shadow 120ms ease-out;
    }
    .btn:active{ transform:scale(.98); }
    .btn.primary{ background:#111827; border-color:#111827; color:#fff; box-shadow:0 4px 12px rgba(17,24,39,.18); }
    .btn.accent{ background:#4ade80; border-color:#4ade80; color:#121212; box-shadow:0 6px 16px rgba(74,222,128,.18); }
    .btn.danger{ color:var(--danger); border-color:rgba(185,28,28,.25); }
    .btn.small{ padding:5px 9px; font-size:12px; border-radius:8px; }

    .workspace{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(420px,500px) minmax(0,1fr);
      overflow:hidden;
      background:var(--ui-canvas);
      scroll-margin-top:64px;
      border-top:0;
    }
    .editor{
      min-height:0;
      overflow:auto;
      padding:14px;
      background:var(--ui-canvas);
      font-size:13px;
      scrollbar-gutter:stable;
    }
    .editor form{
      max-width:480px;
      margin:0 auto;
    }
    .preview{
      display:flex;
      flex-direction:column;
      min-width:0;
      min-height:0;
      background:#dde0e5;
      background-image:none;
    }
    .preview-scroll{ flex:1; overflow:auto; padding:34px 28px 46px; min-height:0; }
    .sheet-zoom{ width:794px; margin:0 auto; }

    /* ══════════ INVOICE SHEET ══════════ */
    .sheet{
      width:794px; min-height:1123px; background:#fff; padding:54px 58px;
      box-shadow:0 18px 50px rgba(17,24,39,.20),0 2px 8px rgba(17,24,39,.10); overflow:hidden; border-radius:4px;
      color:var(--body-color,#27272a);
      font-size:var(--inv-size,13px);
      font-family:var(--inv-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
      --line-color:rgba(107,114,128,var(--line-alpha,.65));
      --line-weight:1px;
      --line-weight-strong:2px;
    }
    .sheet.exporting{ min-height:0 !important; box-shadow:none !important; }

    .inv-head{ display:flex; justify-content:space-between; gap:24px; padding-bottom:18px; margin-bottom:22px;
      border-bottom:var(--line-weight-strong) var(--line-style,solid) var(--line-color); }
    .inv-logo{ max-height:64px; max-width:180px; object-fit:contain; display:block; margin-bottom:10px; }
    .inv-bizname{ font-size:1.4em; font-weight:800; color:var(--biz-color,#111827); }
    .inv-line{ font-size:.92em; line-height:1.55; color:inherit; overflow-wrap:anywhere; }
    .inv-titleblock{ text-align:right; min-width:220px; }
    .inv-title{ margin:0; font-size:2.1em; line-height:1.05; color:var(--title-color,#111827); }
    .pill{ display:inline-block; margin-top:8px; padding:.3em .8em; border-radius:999px; font-size:.78em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#f3f4f6; color:#374151; }
    .st-draft{ background:#f3f4f6; color:#4b5563; }
    .st-sent{ background:#eff6ff; color:#1d4ed8; }
    .st-due{ background:#fffbeb; color:#b45309; }
    .st-overdue{ background:#fef2f2; color:#b91c1c; }
    .st-paid{ background:#f0fdf4; color:#166534; }
    .inv-meta{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 18px; margin:12px 0 0; }
    .inv-meta div{ min-width:105px; }
    .inv-meta dt{ font-size:.7em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
    .inv-meta dd{ margin:2px 0 0; font-size:.92em; font-weight:700; }

    .inv-parties{ display:flex; justify-content:space-between; gap:24px; margin-bottom:20px; }
    .inv-label{ font-size:.78em; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-bottom:6px; }
    .bill-name{ font-weight:800; font-size:1.08em; margin-bottom:2px; }
    .party-extra{ max-width:45%; text-align:right; }
    .party-extra .inv-label{ margin-top:10px; }
    .party-extra .inv-label:first-child{ margin-top:0; }

    .inv-table{ width:100%; border-collapse:collapse; font-size:.95em; background:var(--table-bg,#ffffff); }
    .inv-table th{ text-align:left; padding:9px 8px; font-size:.72em; letter-spacing:.1em; text-transform:uppercase; opacity:.72;
      border-bottom:calc(var(--line-weight) + .5px) var(--line-style,solid) var(--line-color); }
    .inv-table td{ padding:10px 8px; vertical-align:top; border-bottom:var(--line-weight) var(--line-style,solid) var(--line-color); overflow-wrap:anywhere; }
    .num,.th-r{ text-align:right; font-variant-numeric:tabular-nums; }
    .inv-desc strong{ display:block; font-weight:700; }
    .inv-desc small{ display:block; margin-top:3px; color:inherit; opacity:.85; font-size:.85em; }
    .desc-wrap{ display:flex; gap:9px; align-items:flex-start; }
    .item-thumb{ width:40px; height:40px; object-fit:contain; border-radius:6px; border:1px solid var(--line-color); flex:none; }
    .inv-empty td{ text-align:center; color:var(--muted); padding:24px 8px; font-style:italic; }

    /* Table header styles */
    .sheet.th-filled .inv-table th{ background:var(--th-bg,#1f2937); color:var(--th-color,#ffffff); opacity:1; border-bottom:none; }
    .sheet.th-minimal .inv-table th{ background:transparent; border-bottom:none; opacity:.85; }
    .sheet.th-boxed .inv-table th{ background:transparent; border:1px solid var(--line-color); opacity:.85; }

    /* Row styles */
    .sheet.row-plain .inv-table td{ border-bottom:none; }
    .sheet.row-zebra .inv-table td{ border-bottom:none; }
    .sheet.row-zebra .inv-table tbody tr:nth-child(even) td{ background:var(--row-alt,#f4f5f6); }
    .sheet.row-boxed .inv-table td{ border:1px solid var(--line-color); }

    /* Optional highlighted amount column */
    .sheet.hl-amount .inv-table th:last-child,
    .sheet.hl-amount .inv-table td:last-child{ background:var(--amt-bg,#f3f6f4); }

    .totals-wrap{ display:flex; justify-content:flex-end; margin-top:16px; }
    .inv-totals{ min-width:300px; font-size:.96em; }
    .inv-totals > div{ display:flex; justify-content:space-between; gap:18px; padding:4.5px 8px; }
    .inv-totals dt{ opacity:1; }
    .inv-totals dd{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
    .t-total{ border-top:var(--line-weight-strong) var(--line-style,solid) var(--line-color); margin-top:7px; padding-top:8px; }
    .t-total dd{ font-size:1.15em; color:var(--total-color,#111827); }
    .t-paid dd{ color:var(--ok); }
    .t-balance dd{ color:var(--total-color,#111827); font-size:1.2em; }

    .payment,.notes{ margin-top:26px; }
    .payment h3,.notes h3{ margin:0 0 9px; font-size:.78em; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
    .pay-grid{ display:flex; flex-wrap:wrap; gap:12px 34px; }
    .pay-block .pk{ font-size:.7em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin-top:7px; }
    .pay-block .pk:first-child{ margin-top:0; }
    .pay-block div:not(.pk){ font-size:.92em; line-height:1.55; overflow-wrap:anywhere; }
    .pay-instr{ margin-top:10px; font-size:.92em; white-space:pre-wrap; opacity:.85; }
    .notes p{ margin:0 0 12px; font-size:.92em; line-height:1.6; white-space:pre-wrap; max-width:650px; }
    .inv-thanks{ margin-top:22px; font-style:italic; font-size:1.05em; }
    .sig{ margin-top:44px; margin-left:auto; max-width:260px; }
    .sig-line{ height:38px; border-top:1.5px solid currentColor; margin-bottom:6px; }
    .sig .sn{ font-weight:800; font-size:1em; }
    .sig .sr{ font-size:.9em; opacity:.85; }
    .inv-footer{ margin-top:42px; padding-top:12px; border-top:1px var(--line-style,solid) var(--line-color); text-align:center; font-size:.78em; opacity:.85; white-space:pre-wrap; }
    .avoid-break{ break-inside:avoid; }

    /* Premium font collection. Web fonts load on Cloudflare; system fonts remain useful offline. */
    .sheet.font-inter{ --inv-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
    .sheet.font-manrope{ --inv-font:Manrope,Inter,Arial,sans-serif; }
    .sheet.font-ibmplex{ --inv-font:"IBM Plex Sans",Inter,Arial,sans-serif; }
    .sheet.font-sourcesans{ --inv-font:"Source Sans 3",Inter,Arial,sans-serif; }
    .sheet.font-dmsans{ --inv-font:"DM Sans",Inter,Arial,sans-serif; }
    .sheet.font-lato{ --inv-font:Lato,Inter,Arial,sans-serif; }
    .sheet.font-montserrat{ --inv-font:Montserrat,Inter,Arial,sans-serif; }
    .sheet.font-poppins{ --inv-font:Poppins,Inter,Arial,sans-serif; }
    .sheet.font-merriweather{ --inv-font:Merriweather,Georgia,serif; }
    .sheet.font-sourceserif{ --inv-font:"Source Serif 4",Georgia,serif; }
    .sheet.font-librebaskerville{ --inv-font:"Libre Baskerville",Georgia,serif; }
    .sheet.font-aptos{ --inv-font:Aptos,"Segoe UI",Arial,sans-serif; }
    .sheet.font-helvetica{ --inv-font:"Helvetica Neue",Helvetica,Arial,sans-serif; }
    .sheet.font-georgia{ --inv-font:Georgia,"Times New Roman",serif; }
    .sheet.font-times{ --inv-font:"Times New Roman",Times,serif; }
    .sheet.font-sans{ --inv-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }

    /* Premium template variations */
    .tpl-classic .inv-title{ font-size:1.9em; text-transform:uppercase; letter-spacing:.06em; }
    .tpl-classic .inv-meta{ flex-direction:column; align-items:flex-end; gap:4px; }
    .tpl-classic .inv-meta div{ display:flex; align-items:baseline; gap:10px; min-width:0; }
    .tpl-classic .inv-head{ border-bottom-width:3px; }
    .tpl-modern .inv-head{ border-bottom-width:3px; }
    .tpl-modern .inv-title{ font-weight:900; }
    .tpl-minimal .inv-head{ border-bottom-width:1px; }
    .tpl-minimal .inv-title{ font-size:1.25em; text-transform:uppercase; letter-spacing:.24em; font-weight:700; }
    .tpl-minimal .inv-table th{ opacity:.85; }

    .tpl-executive .inv-head{ border-bottom:0; padding-bottom:8px; margin-bottom:30px; }
    .tpl-executive .inv-title{ font-size:2.6em; font-weight:800; letter-spacing:-.045em; color:var(--iacc); }
    .tpl-executive .inv-bizname{ font-size:1.55em; letter-spacing:-.025em; }
    .tpl-executive .inv-label,.tpl-executive .inv-meta dt{ letter-spacing:.15em; }
    .tpl-executive .inv-table th{ border:0; background:#f8fafc; padding-top:11px; padding-bottom:11px; }
    .tpl-executive .inv-table td{ padding-top:13px; padding-bottom:13px; }
    .tpl-executive .t-total{ border-top:3px solid var(--iacc); }

    .tpl-editorial .inv-head{ align-items:flex-end; border-bottom:1px solid var(--line-color); }
    .tpl-editorial .inv-title{ font-family:"Source Serif 4",Georgia,serif; font-size:2.8em; font-weight:500; letter-spacing:-.035em; text-transform:none; }
    .tpl-editorial .inv-bizname{ font-family:"Source Serif 4",Georgia,serif; font-size:1.45em; font-weight:600; }
    .tpl-editorial .inv-table th{ font-family:Inter,Arial,sans-serif; letter-spacing:.14em; }
    .tpl-editorial .t-total dd,.tpl-editorial .t-balance dd{ font-family:"Source Serif 4",Georgia,serif; }

    .tpl-studio .inv-head{ border:0; padding:0 0 28px; }
    .tpl-studio .inv-titleblock{ background:var(--iacc); color:#fff; padding:18px 20px; border-radius:14px; }
    .tpl-studio .inv-title,.tpl-studio .inv-titleblock .inv-meta dt,.tpl-studio .inv-titleblock .inv-meta dd{ color:#fff; }
    .tpl-studio .pill{ background:rgba(255,255,255,.16); color:#fff; }
    .tpl-studio .inv-table{ border-radius:10px; overflow:hidden; }
    .tpl-studio .inv-table th{ background:#111827; color:#fff; opacity:1; border:0; }
    .tpl-studio .t-total{ background:#f8fafc; border:0; border-radius:8px; padding:9px 10px; }

    .tpl-ledger .inv-head{ border-bottom:4px double var(--line-color); }
    .tpl-ledger .inv-title{ font-family:"IBM Plex Sans",Arial,sans-serif; font-size:1.8em; letter-spacing:.08em; text-transform:uppercase; }
    .tpl-ledger .inv-table th,.tpl-ledger .inv-table td{ border-bottom:1px solid var(--line-color); }
    .tpl-ledger .inv-table th{ background:#f3f4f6; opacity:1; }
    .tpl-ledger .inv-totals{ border:1px solid var(--line-color); padding:10px; min-width:330px; }
    .tpl-ledger .t-total{ border-top:2px solid var(--line-color); }


    /* ══════════ EDITOR UI ══════════ */
    details.card summary{ list-style:none; cursor:pointer; }
    details.card summary::-webkit-details-marker{ display:none; }
    details.card > summary{
      min-height:58px; display:flex; align-items:center; gap:8px; padding:13px 15px;
      color:var(--ui-label); font-size:14px; font-weight:720; letter-spacing:-.01em;
      background:color-mix(in srgb,var(--section-soft,#f8fafc) 84%,white);
      border-bottom:1px solid color-mix(in srgb,var(--section-accent,#64748b) 13%,transparent);
    }
    details.card:not([open]) > summary{ border-bottom-color:transparent; }
    details.card > summary:hover{ background:color-mix(in srgb,var(--section-soft,#f8fafc) 94%,white); }
    details.card > summary::after{
      content:""; margin-left:auto; width:28px; height:28px; border-radius:50%; display:block;
      border:1px solid color-mix(in srgb,var(--section-accent,#64748b) 12%,transparent);
      background-color:color-mix(in srgb,var(--section-soft,#f2f2f4) 82%,white);
      background-image:
        linear-gradient(45deg,transparent 48%,var(--section-accent,#64748b) 49% 58%,transparent 59%),
        linear-gradient(-45deg,transparent 48%,var(--section-accent,#64748b) 49% 58%,transparent 59%);
      background-repeat:no-repeat; background-size:7px 7px,7px 7px; background-position:9px 11px,13px 11px;
      transform:none; transition:background-color 120ms ease-out,transform 180ms ease-out;
    }
    details.card[open] > summary::after{ transform:rotate(180deg); }
    details.card > summary:hover::after{ background-color:color-mix(in srgb,var(--section-accent,#64748b) 10%,white); }
    .summary-tag{
      display:inline-flex; align-items:center; margin-left:3px; margin-right:auto; padding:4px 8px;
      border:1px solid color-mix(in srgb,var(--section-accent,#64748b) 24%,transparent); border-radius:999px;
      background:color-mix(in srgb,var(--section-accent,#64748b) 13%,white);
      color:color-mix(in srgb,var(--section-accent,#475569) 86%,#111827);
      font-size:9.5px; line-height:1; font-weight:800; letter-spacing:.025em;
      box-shadow:0 1px 0 rgba(255,255,255,.72) inset;
    }
    .fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .field > span,.cap{ color:#5f6067; font-size:11px; font-weight:680; letter-spacing:-.004em; text-transform:none; }
    .span2{ grid-column:1/-1; }
    input[type="text"],input[type="email"],input[type="date"],select,textarea{
      width:100%; min-width:0; min-height:44px; padding:10px 12px; outline:none;
      border:1px solid var(--ui-separator-strong); border-radius:11px; background:#fff;
      box-shadow:0 1px 0 rgba(0,0,0,.015); font-size:13.5px; line-height:1.35;
      -webkit-font-smoothing:antialiased;
      transition:border-color 120ms ease,box-shadow 120ms ease,background 120ms ease;
    }
    input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:var(--ring); }
    input[type="color"]{ width:100%; height:38px; padding:3px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
    input[type="range"]{ width:100%; padding:0; border:none; background:transparent; height:38px; }
    textarea{ resize:vertical; }
    .checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
    .check{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; font-size:12.5px; cursor:pointer; }
    .check input{ margin-top:3px; accent-color:var(--accent); }
    .help{ color:var(--muted); font-size:11.5px; line-height:1.4; }
    .input-btn{ display:flex; gap:8px; }
    .input-btn input{ flex:1; }
    .logo-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .logo-thumb{ display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px; }
    .logo-thumb img{ max-height:38px; max-width:120px; object-fit:contain; display:block; }
    .palette-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
    .subtle-note{ font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45; }
    .design-quick{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .inline-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
    .toggle-group{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .mini-card{ border:1px solid #e7ebf1; border-radius:16px; padding:14px; background:#fbfcfd; }
    .inner-card{ margin-top:14px; border:1px solid #e9edf3; border-radius:16px; background:#ffffff; overflow:hidden; }
    .inner-card summary{ padding:14px 16px; font-size:14px; font-weight:700; background:#fcfcfd; }
    .inner-card .card-body{ padding:14px 16px 16px; }
    .inner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .small-range-note{ margin-top:4px; }

    .pal{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); cursor:pointer; background:linear-gradient(135deg,var(--p1) 50%,var(--p2) 50%); }
    .pal:hover{ transform:scale(1.08); }

    .item-row{
      margin-bottom:8px; padding:11px; border:1px solid rgba(74,222,128,.34); border-radius:14px; background:#fff;
      box-shadow:0 1px 0 rgba(255,255,255,.86) inset,0 2px 8px rgba(15,23,42,.035);
      transition:border-color 150ms ease,box-shadow 150ms ease,background 150ms ease;
    }
    .item-head{
      display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
      border-bottom:1px solid rgba(74,222,128,.24); background:linear-gradient(180deg,#fcfffd 0%,#f8fcfa 100%);
    }
    .item-index{
      display:inline-flex; align-items:center; min-height:24px; padding:4px 8px;
      border:1px solid rgba(14,116,72,.16); border-radius:999px; background:#eafbf2; color:var(--nb-green-ink);
      font-size:9.5px; font-weight:820; letter-spacing:.07em; line-height:1;
      box-shadow:0 1px 0 rgba(255,255,255,.75) inset;
    }
    .item-actions{ display:flex; gap:5px; }
    .ibtn{ width:32px; height:32px; min-width:30px; min-height:30px; border-radius:9px; cursor:pointer; }
    .item-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
    .g3{ grid-column:1/-1; }
    .line-total{ font-weight:800; text-align:right; padding-top:29px; font-variant-numeric:tabular-nums; }
    .item-image-ctl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .item-image-ctl img{ width:34px; height:34px; object-fit:contain; border-radius:6px; border:1px solid var(--line); }
    #items-list.tax-off .field-tax{ display:none; }
    #items-list.disc-off .field-disc{ display:none; }

    .totals{ margin-top:12px; border-top:2px solid var(--line); padding-top:10px; }
    .totals-row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:13px; }
    .totals-row dt{ color:var(--muted); }
    .totals-row dd{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
    .totals-row.grand{ border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
    .totals-row.grand dd{ color:var(--accent); font-size:16px; }
    .subhead{ grid-column:1/-1; margin:10px 0 0; color:#667085; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .extra-block:first-child{ border-top:0; padding-top:0; }
    .extra-fields{ margin-top:8px; }


    @media screen and (max-width:1020px){
      .workspace{ display:block; height:auto; }
      .editor,.preview{ overflow:visible; }
      .preview-scroll{ overflow-x:auto; padding:18px 10px; }
    }
    @media screen and (max-width:640px){
      .fields,.checks,.item-grid,.design-quick,.toggle-group,.inner-grid{ grid-template-columns:1fr; }
      .g3{ grid-column:auto; }
    }


    /* v3 premium editor controls */
    .topbar-actions .secondary-action{ display:none; }
    .more-menu{ position:relative; }
    .more-menu > summary{ list-style:none; cursor:pointer; border:1px solid #dfe3ea; background:#fff; border-radius:12px; padding:9px 13px; font-weight:700; font-size:13px; }
    .more-menu > summary::-webkit-details-marker{ display:none; }
    .more-menu > summary::after{ content:"⌄"; margin-left:7px; color:var(--muted); }
    .more-menu[open] > summary{ border-color:#c7ced8; box-shadow:0 8px 22px rgba(16,24,40,.08); }
    .more-popover{ position:absolute; right:0; top:calc(100% + 8px); width:190px; padding:8px; background:#fff; border:1px solid #e2e7ee; border-radius:14px; box-shadow:0 18px 45px rgba(16,24,40,.14); display:grid; gap:5px; z-index:90; }
    .more-popover .btn{ width:100%; text-align:left; border:0; box-shadow:none; background:transparent; }
    .more-popover .btn:hover{ background:#f6f8fa; transform:none; }

    .design-stack{ display:grid; gap:18px; }
    .section-kicker{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:9px; }
    .section-kicker strong{ color:#3a3a3c; font-size:12.5px; font-weight:700; letter-spacing:-.004em; }
    .section-kicker > span{ display:none; }

    .template-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .template-card{
      appearance:none;
      min-height:62px;
      min-width:0;
      display:flex;
      align-items:center;
      gap:9px;
      padding:8px 10px;
      border:1px solid var(--ui-border);
      border-radius:14px;
      background:#fff;
      text-align:left;
      cursor:pointer;
      transition:.16s ease;
    }
    .template-card:hover{ border-color:var(--ui-border-strong); background:#fbfbfc; transform:none; box-shadow:none; }
    .template-card.active{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
    .template-thumb{ width:52px; height:44px; flex:0 0 52px; margin:0; border:1px solid #e7ebf0; border-radius:8px; background:#fff; overflow:hidden; position:relative; }
    .template-thumb .t-head{ display:block; width:26px; height:4px; margin:7px 7px 4px; border-radius:999px; background:var(--thumb-accent,#111827); opacity:.92; }
    .template-thumb .t-line{ display:block; height:2px; margin:3px 7px; border-radius:999px; background:#d9dce2; }
    .template-thumb .t-line.short{ width:45%; }
    .template-thumb .t-table{ display:block; height:13px; margin:5px 7px 0; border:1px solid #e4e9f0; border-radius:3px; background:repeating-linear-gradient(to bottom,#f1f2f5 0 3px,#fff 3px 6px); }
    .template-card[data-template="editorial"] .template-thumb{ font-family:Georgia,serif; }
    .template-card[data-template="studio"] .template-thumb{ --thumb-accent:#6d28d9; }
    .template-card[data-template="ledger"] .template-thumb{ --thumb-accent:#4ade80; }
    .template-card[data-template="modern"] .template-thumb{ --thumb-accent:#2563eb; }
    .template-card[data-template="classic"] .template-thumb{ --thumb-accent:#7c2d12; }
    .template-card[data-template="minimal"] .template-thumb{ --thumb-accent:#64748b; }
    .template-name{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:12.5px; font-weight:800; line-height:1.2; }
    .template-desc{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted); line-height:1.35; }
    .premium-badge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 6px; background:#f4f0ff; color:#6d28d9; border-radius:999px; margin-left:5px; vertical-align:1px; }

    .font-featured{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .font-card{
      appearance:none;
      min-height:58px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:6px;
      padding:9px 11px;
      border:1px solid var(--ui-border);
      border-radius:13px;
      background:#fff;
      text-align:left;
      cursor:pointer;
      transition:.15s ease;
    }
    .font-card:hover{ border-color:var(--ui-border-strong); background:#fbfbfc; }
    .font-card.active{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
    .font-sample{ display:block; margin:0; color:#111827; font-size:18px; line-height:1.15; }
    .font-meta{ display:block; font-size:11.5px; color:var(--muted); }
    .font-card[data-font="manrope"] .font-sample{ font-family:Manrope,sans-serif; }
    .font-card[data-font="inter"] .font-sample{ font-family:Inter,sans-serif; }
    .font-card[data-font="ibmplex"] .font-sample{ font-family:"IBM Plex Sans",sans-serif; }
    .font-card[data-font="sourceserif"] .font-sample{ font-family:"Source Serif 4",serif; }

    .theme-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
    .theme-card{
      appearance:none;
      height:36px;
      display:flex;
      align-items:center;
      gap:6px;
      padding:5px 6px;
      border:1px solid var(--ui-border);
      border-radius:10px;
      background:#fff;
      text-align:left;
      cursor:pointer;
    }
    .theme-card:hover{ border-color:var(--ui-border-strong); background:#fbfbfc; }
    .theme-card.active{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent); }
    .theme-swatch{ width:18px; height:18px; flex:0 0 18px; margin:0; border-radius:50%; background:linear-gradient(135deg,var(--p1) 0 58%,var(--p2) 58%); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08); }
    .theme-card span{ display:block; font-size:9.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .switch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }

    .advanced-card{ border-top:1px solid #edf0f4; padding-top:16px; }
    .advanced-card details{ border:0; background:transparent; }
    .advanced-card summary{ padding:0; font-size:13px; font-weight:750; background:transparent; border:0 !important; }
    .advanced-card details[open] summary{ margin-bottom:14px; }
    .advanced-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    .design-essentials{
      padding:13px;
      border:1px solid #e7eaf0;
      border-radius:14px;
      background:#fbfbfc;
    }
    .design-essentials .section-kicker{ margin-bottom:10px; }
    .design-essential-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .settings-card > summary{
      background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(248,250,252,.86));
    }
    .settings-intro{
      display:grid;
      gap:3px;
      margin-bottom:12px;
      padding:11px 12px;
      border:1px solid #e4e7ec;
      border-radius:12px;
      background:#f8fafc;
    }
    .settings-intro strong{
      color:#344054;
      font-size:12px;
      font-weight:780;
    }
    .settings-intro span{
      color:#667085;
      font-size:10.5px;
      line-height:1.4;
    }
    .settings-help{
      margin:0;
      padding:9px 10px;
      border-radius:10px;
      background:#f5f5f7;
      color:#71717a;
      font-size:10.5px;
      line-height:1.45;
    }

    .visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

    @media screen and (max-width:700px){
      .topbar-actions{ width:100%; margin-left:0; }
      .topbar-actions .btn.primary,.topbar-actions .btn.accent{ flex:1; }
      .switch-grid,.design-essential-grid{ grid-template-columns:1fr; }
      .section-kicker{ align-items:flex-start; flex-direction:column; gap:2px; }
    }

    /* v4 sidebar polish */
    select{
      appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' stroke='%23636B75' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
      background-repeat:no-repeat!important;
      background-position:right 14px center!important;
      background-size:14px 14px!important;
    }
    select:hover,input:hover,textarea:hover{ border-color:#c9d0da; }
    select:focus,input:focus,textarea:focus{ background-color:#fff; }
    option,optgroup{ font-family:Manrope,Inter,Arial,sans-serif; }
    optgroup{ font-weight:700; color:#475467; }
    .template-thumb{ height:76px; margin-bottom:8px; border-radius:8px; }
    .template-thumb .t-head{ margin:8px 8px 4px; height:15px; }
    .template-thumb .t-line{ margin:4px 8px; }
    .template-thumb .t-table{ margin:7px 8px 0; height:24px; }
    .template-desc{ display:none!important; }
    .premium-badge,.choice-tag{ display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .premium-badge{ margin-left:0; background:#f4f0ff; color:#6d28d9; }
    .choice-tag{ background:#f2f4f7; color:#667085; }
    .font-meta{ margin-top:0; display:flex; gap:5px; align-items:center; font-size:0; }
    .font-meta .choice-tag{ font-size:9px; }
    .switch-grid{ gap:7px; }
    .advanced-card{ padding-top:14px; }
    .advanced-card summary{ font-size:12.5px!important; color:#475467; }
    .advanced-grid{ gap:10px; }
    .logo-row{ padding:10px; border:1px dashed #d7dde6; border-radius:12px; margin-bottom:14px; background:#fbfcfd; }
    .logo-row .help{ display:none; }
    .input-btn .btn{ width:42px; padding:0; display:grid; place-items:center; }
    /* ══════════ v5 — Apple-inspired clarity & workflow polish ══════════ */
    .template-card:active,.font-card:active,.theme-card:active,.segment-control button:active{ transform:scale(.98); }

    .summary-action{ color:var(--ui-tertiary); font-size:11px; font-weight:650; min-width:28px; text-align:right; }
    .summary-action::before{ content:"Show"; }
    details.card[open] > summary .summary-action::before{ content:"Hide"; }

    .premium-badge{ font-size:8.5px; padding:2px 5px; }

    .font-card .choice-tag{ align-self:flex-start; }
    .select-row{ margin-top:9px; }


    select{ background-repeat:no-repeat!important; background-position:right 14px center!important; background-size:14px 14px!important; }
    .section-tabs{ margin-bottom:16px; }
    .tab-panel[hidden]{ display:none!important; }

    .sub-disclosure{ margin-top:14px; border:1px solid var(--ui-border); border-radius:13px; background:#fbfbfc; overflow:hidden; }
    .sub-disclosure > summary{ min-height:46px; list-style:none; cursor:pointer; padding:11px 12px; display:flex; align-items:center; font-size:12.5px; font-weight:700; color:#3a3a3c; }
    .sub-disclosure > summary::-webkit-details-marker{ display:none; }
    .sub-summary-action{ margin-left:auto; color:var(--ui-tertiary); font-size:11px; }
    .sub-summary-action::before{ content:"Show"; }
    .sub-disclosure[open] .sub-summary-action::before{ content:"Hide"; }
    .sub-disclosure > summary::after{ content:"⌄"; width:24px; height:24px; margin-left:8px; border-radius:50%; display:grid; place-items:center; background:#ededf2; color:#636366; transition:transform 160ms ease-out; }
    .sub-disclosure[open] > summary::after{ transform:rotate(180deg); }
    .sub-body{ border-top:1px solid var(--ui-border); padding:14px; }

    .line-control{ grid-template-columns:repeat(5,1fr); }
    .line-control button{ min-width:0; padding:0 4px; font-size:11px; }

    .logo-upload-target:hover{ background:rgba(0,122,255,.06); border-color:rgba(0,122,255,.55); }
    .logo-preview{ min-width:68px; display:grid; place-items:center; padding:7px; border-color:var(--ui-border); border-radius:12px; }
    .logo-preview img{ max-height:46px; max-width:76px; }
    .icon-text-btn{ border:1px solid var(--ui-border); border-radius:11px; background:#fff; padding:0 10px; font:inherit; font-size:11px; font-weight:650; cursor:pointer; }
    .icon-text-btn.danger{ color:#d70015; }
    .compact-switch{ margin-bottom:13px; }
    .section-fields{ margin-top:0; }


    .action-row{ display:flex; justify-content:flex-end; }
    .quiet-btn{ background:var(--ui-fill); border:0; color:#3a3a3c; }
    .icon-only{ width:44px; min-width:44px; padding:0; }

    .item-options{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
    .item-options-label{ font-size:11.5px; font-weight:700; color:#515154; margin-right:2px; }
    .mini-toggle{ position:relative; cursor:pointer; }
    .mini-toggle input{ position:absolute; opacity:0; pointer-events:none; }
    .mini-toggle span{ display:inline-flex; min-height:32px; align-items:center; padding:0 10px; border-radius:999px; border:1px solid var(--ui-border); background:#fff; color:var(--ui-secondary); font-size:11.5px; font-weight:650; }
    .mini-toggle input:checked + span{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,white); }
    .mini-toggle input:disabled + span{ opacity:.45; }

    .extras-grid{ display:grid; gap:9px; }
    .extra-block{ border:0; padding:0; }
    .extra-block .switch-row{ margin:0; }
    .extra-fields{ padding:10px 2px 2px; }
    .legal-note{ margin:10px 0 0; color:var(--ui-secondary); font-size:10.5px; line-height:1.4; }

    /* Invoice table column alignment and working divider styles. */
    .inv-table{ table-layout:fixed; }
    .inv-table th,.inv-table td{ box-sizing:border-box; }
    .inv-table .c-index{ text-align:center; padding-left:3px; padding-right:3px; }
    .inv-table .c-unit{ text-align:left; }
    .inv-table .c-qty,.inv-table .c-price,.inv-table .c-discount,.inv-table .c-tax,.inv-table .c-amount{ text-align:right; font-variant-numeric:tabular-nums; }
    .inv-table th.c-qty,.inv-table th.c-price,.inv-table th.c-discount,.inv-table th.c-tax,.inv-table th.c-amount{ white-space:normal; line-height:1.18; }
    .inv-table td.c-price,.inv-table td.c-discount,.inv-table td.c-tax,.inv-table td.c-amount{ white-space:nowrap; font-size:.92em; }
    .sheet.line-solid .inv-head,.sheet.line-solid .inv-table th,.sheet.line-solid .inv-table td{ border-bottom-style:solid!important; }
    .sheet.line-dashed .inv-head,.sheet.line-dashed .inv-table th,.sheet.line-dashed .inv-table td{ border-bottom-style:dashed!important; }
    .sheet.line-dotted .inv-head,.sheet.line-dotted .inv-table th,.sheet.line-dotted .inv-table td{ border-bottom-style:dotted!important; }
    .sheet.line-double .inv-head,.sheet.line-double .inv-table th,.sheet.line-double .inv-table td{ border-bottom-style:double!important; border-bottom-width:3px!important; }
    .sheet.line-none .inv-head,.sheet.line-none .inv-table th,.sheet.line-none .inv-table td{ border-bottom-color:transparent!important; }
    .sheet.line-dashed.row-boxed .inv-table td,.sheet.line-dashed.th-boxed .inv-table th{ border-style:dashed!important; }
    .sheet.line-dotted.row-boxed .inv-table td,.sheet.line-dotted.th-boxed .inv-table th{ border-style:dotted!important; }
    .sheet.line-double.row-boxed .inv-table td,.sheet.line-double.th-boxed .inv-table th{ border-style:double!important; border-width:3px!important; }
    .sheet.line-none.row-boxed .inv-table td,.sheet.line-none.th-boxed .inv-table th{ border-color:transparent!important; }

    button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label.logo-upload-target:focus-within{
      outline:2px solid color-mix(in srgb,var(--ui-blue) 78%,white); outline-offset:2px; box-shadow:none;
    }
    @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }
    @media screen and (max-width:700px){
      .logo-uploader{ --nb-doc-logo-columns:1fr auto; }
      .logo-upload-target{ grid-column:1/-1; }
      .line-control{ flex-wrap:wrap; }
      .line-control button{ flex:1 1 30%; }
    }
    @media screen and (max-width:390px){
      .summary-tag{ display:none; }
      .template-name{ font-size:11.5px; }
    }


    /* v6 — colorful section identity + safer direct manipulation */
    details.card{ --section-accent:#5856d6; --section-soft:#f1f0ff; }
    details.card[data-tone="violet"]{ --section-accent:#6e5ae6; --section-soft:#f1efff; }
    details.card[data-tone="blue"]{ --section-accent:#0878d1; --section-soft:#eaf5ff; }
    details.card[data-tone="orange"]{ --section-accent:#c65d08; --section-soft:#fff1e6; }
    details.card[data-tone="green"]{ --section-accent:#0a7d55; --section-soft:#e9f8f1; }
    details.card[data-tone="pink"]{ --section-accent:#b63c72; --section-soft:#fff0f6; }
    details.card[data-tone="slate"]{ --section-accent:#475569; --section-soft:#f1f5f9; }
    .summary-action{ min-width:auto; padding:5px 8px; border-radius:999px; color:var(--section-accent); background:var(--section-soft); border:1px solid color-mix(in srgb,var(--section-accent) 10%,transparent); }
    details.card > summary:hover .summary-action{ background:color-mix(in srgb,var(--section-accent) 12%,white); }

    .column-toggle{ min-height:32px; padding:0 11px; border-radius:999px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; transition:background 120ms ease-out,color 120ms ease-out,border-color 120ms ease-out,transform 90ms ease-out; }
    .column-toggle:active{ transform:scale(.97); }
    .column-toggle:disabled{ opacity:.42; cursor:not-allowed; }

    .sheet.edit-mode [data-edit-target], .sheet.edit-mode [data-edit-item]{ cursor:pointer; border-radius:5px; outline:1px dashed transparent; outline-offset:3px; transition:outline-color 100ms ease-out,background 100ms ease-out; }
    .sheet.edit-mode [data-edit-target]:hover, .sheet.edit-mode [data-edit-item]:hover{ outline:2px solid color-mix(in srgb,var(--accent) 70%,white); outline-offset:3px; background:color-mix(in srgb,var(--accent) 5%,white); }
    .sheet.edit-mode [data-edit-target]::selection{ background:color-mix(in srgb,var(--accent) 22%,white); }
    .preview-add-item{ display:none; width:100%; min-height:40px; margin:10px 0 2px; border-radius:10px; font:inherit; font-size:.84em; font-weight:750; cursor:pointer; }
    .sheet.edit-mode .preview-add-item{ display:block; }
    .focus-flash{ animation:focusFlash .75s ease-out; }
    @keyframes focusFlash{ 0%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); } 100%{ box-shadow:0 0 0 0 transparent; } }
    @media (prefers-reduced-motion:reduce){ .focus-flash{ animation:none; } }

    /* Quantities and monetary values must remain readable for large values. */
    .inv-table td.c-qty{ white-space:nowrap; font-size:.92em; }
    .inv-table th.c-qty{ white-space:nowrap; }
    .inv-table td.c-unit{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .inv-totals dd{ font-variant-numeric:tabular-nums; white-space:nowrap; }

    .item-options-label{ letter-spacing:-.004em; }

    .template-grid-v8{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .template-card-v8{ min-height:92px; padding:9px 10px; }
    .template-card-v8 .template-thumb{
      position:relative; display:block; width:100%; height:56px; margin:0 0 7px; border:1px solid #e3e7ee;
      border-radius:9px; background:#fff; overflow:hidden;
    }
    .template-card-v8 .template-thumb i{ position:absolute; display:block; border-radius:2px; }
    .template-card-v8 .mini-logo{ left:8px; top:8px; width:22px; height:6px; background:#cbd5e1; }
    .template-card-v8 .mini-title{ right:8px; top:7px; width:29px; height:8px; background:var(--accent); }
    .template-card-v8 .mini-meta{ right:8px; top:19px; width:36px; height:3px; background:#d9dee7; }
    .template-card-v8 .mini-table{ left:8px; right:8px; top:30px; height:12px; border-top:4px solid #dfe5ec; border-bottom:1px solid #e9edf2; }
    .template-card-v8 .mini-total{ right:8px; bottom:6px; width:29px; height:4px; background:#cbd5e1; }
    .thumb-minimal .mini-title{ background:#111827; width:22px; height:4px; top:10px; }
    .thumb-minimal .mini-table{ border-top-width:1px; background:transparent; }
    .thumb-minimal .mini-logo{ background:#e5e7eb; }
    .thumb-executive .mini-title{ background:#1f2937; height:6px; }
    .thumb-executive::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); }
    .thumb-executive .mini-table{ border-top-color:#cfd5df; }
    .thumb-studio{ background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,white),#fff 58%); }
    .thumb-studio .mini-title{ width:37px; height:13px; border-radius:5px; }
    .template-card.active .template-thumb{ box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent); border-color:color-mix(in srgb,var(--accent) 42%,#dfe3ea); }

    .theme-grid-v8{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
    .theme-chip{ min-height:34px; display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:10px; }
    .theme-chip .theme-dot{ width:14px; height:14px; border-radius:50%; background:var(--dot); margin:0; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
    .theme-chip span:last-child{ font-size:10.5px; font-weight:700; }
    .theme-chip.active{ border-color:color-mix(in srgb,var(--accent) 38%,#dfe3ea); background:color-mix(in srgb,var(--accent) 4%,white); }

    .color-settings{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .color-setting{ min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px; border:1px solid var(--ui-border); border-radius:11px; background:#fff; }
    .color-setting > span{ font-size:10.5px; line-height:1.2; font-weight:680; color:#515154; }
    .color-setting input[type="color"]{ width:28px; height:28px; padding:2px; border-radius:8px; flex:0 0 28px; }

    .compact-choice-grid{ margin-bottom:8px; }
    .micro-disclosure{ margin-top:8px; border-top:1px solid var(--ui-border); }
    .micro-disclosure > summary{ list-style:none; min-height:42px; display:flex; align-items:center; cursor:pointer; font-size:12px; font-weight:700; color:#515154; }
    .micro-disclosure > summary::-webkit-details-marker{ display:none; }
    .micro-disclosure > summary::after{ content:"＋"; margin-left:auto; color:var(--nb-document-muted); font-size:14px; }
    .micro-disclosure[open] > summary::after{ content:"−"; }
    .auto-column-note{ margin-left:auto; color:var(--nb-document-muted); font-size:10.5px; line-height:1.25; text-align:right; max-width:210px; }

    /* Cleaner invoice typography and table */
    .sheet{
      font-size:var(--inv-size,12.5px); letter-spacing:-.003em;
      font-variant-numeric:tabular-nums lining-nums;
    }
    .inv-head{ margin-bottom:26px; }
    .inv-title{ letter-spacing:-.045em; }
    .inv-label,.inv-meta dt{ font-size:.69em; letter-spacing:.10em; }
    .inv-table{ font-size:.92em; }
    .inv-table th{ padding:9px 7px; font-size:.69em; letter-spacing:.085em; font-weight:780; }
    .inv-table td{ padding:11px 7px; line-height:1.38; }
    .inv-table th.c-desc,.inv-table td.c-desc{ padding-left:4px; }
    .inv-table th.c-qty,.inv-table th.c-price,.inv-table th.c-discount,.inv-table th.c-tax,.inv-table th.c-amount{ text-align:right; }
    .inv-table td.c-discount,.inv-table td.c-tax{ color:var(--nb-document-muted); }
    .inv-table td.c-amount{ font-weight:720; }
    .inv-totals{ min-width:310px; }
    .inv-totals > div{ padding:5px 0; }
    .inv-totals dt{ color:var(--nb-document-muted); }
    .t-total{ margin-top:8px; padding-top:10px!important; }
    .t-total dt,.t-total dd{ font-weight:800; color:#111827; }

    /* Four intentionally distinct, restrained templates */
    .tpl-professional .inv-head{ border-bottom:2px solid var(--iacc); padding-bottom:18px; }
    .tpl-professional .inv-title{ font-size:2.35em; font-weight:820; color:#111827; }
    .tpl-professional .inv-bizname{ font-size:1.42em; }
    .tpl-professional .inv-table th{ background:color-mix(in srgb,var(--iacc) 7%,white); color:#30343b; border-bottom:1px solid color-mix(in srgb,var(--iacc) 28%,#d9dee7); opacity:1; }
    .tpl-professional .inv-table td{ border-bottom:1px solid #e7e9ed; }
    .tpl-professional .t-total{ border-top:2px solid var(--iacc); }
    .tpl-professional .t-total dd{ color:var(--iacc); }

    .tpl-minimal .inv-head{ border-bottom:0; padding-bottom:6px; margin-bottom:34px; }
    .tpl-minimal .inv-title{ font-size:1.9em; font-weight:680; letter-spacing:-.035em; text-transform:none; color:#111827; }
    .tpl-minimal .inv-bizname{ font-size:1.3em; font-weight:720; }
    .tpl-minimal .inv-table th{ background:transparent!important; border-bottom:1px solid #cfd3d8; color:#555b65; opacity:1; }
    .tpl-minimal .inv-table td{ border-bottom:1px solid #eceef1; }
    .tpl-minimal .t-total{ border-top:1px solid #111827; }
    .tpl-minimal .pill{ background:#f5f5f5; color:#555; }

    .tpl-executive .inv-head{ border-bottom:1px solid #b9bec6; padding-bottom:20px; }
    .tpl-executive .inv-title,.tpl-executive .inv-bizname{ font-family:"Source Serif 4",Georgia,serif; }
    .tpl-executive .inv-title{ font-size:2.55em; font-weight:560; color:#171717; letter-spacing:-.03em; }
    .tpl-executive .inv-bizname{ font-size:1.5em; font-weight:600; }
    .tpl-executive .inv-table th{ background:#232830!important; color:#fff!important; opacity:1!important; border:0!important; }
    .tpl-executive .inv-table td{ border-bottom:1px solid #dfe2e6; }
    .tpl-executive .t-total{ border-top:3px double #3f454e; }
    .tpl-executive .t-total dd{ font-family:"Source Serif 4",Georgia,serif; font-size:1.24em; }

    .tpl-studio .inv-head{ border:0; margin:-12px -14px 28px; padding:20px 20px 22px; border-radius:12px; background:color-mix(in srgb,var(--iacc) 9%,white); }
    .tpl-studio .inv-title{ color:var(--iacc); font-size:2.45em; font-weight:850; }
    .tpl-studio .inv-bizname{ font-size:1.46em; }
    .tpl-studio .inv-table{ border-collapse:separate; border-spacing:0; border:1px solid #e3e6ea; border-radius:9px; overflow:hidden; }
    .tpl-studio .inv-table th{ background:var(--iacc)!important; color:#fff!important; opacity:1!important; border:0!important; }
    .tpl-studio .inv-table td{ border-bottom:1px solid #eceef1; }
    .tpl-studio .inv-table tbody tr:last-child td{ border-bottom:0; }
    .tpl-studio .t-total{ border-top:0; background:color-mix(in srgb,var(--iacc) 7%,white); border-radius:8px; padding:9px 10px!important; }
    .tpl-studio .t-total dd{ color:var(--iacc); }

    @media screen and (max-width:700px){
      .template-grid-v8{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      .theme-grid-v8{ grid-template-columns:repeat(3,minmax(0,1fr)); }
      .color-settings{ grid-template-columns:1fr; }
      .auto-column-note{ display:none; }
    }


    /* ══════════ v9 — distinct invoice headers + linked editing ══════════ */
.color-inline{ display:flex; align-items:center; gap:9px; min-height:46px; padding:7px 9px; border:1px solid var(--ui-border); border-radius:12px; background:#fff; }
    .color-inline input[type="color"]{ width:32px; height:32px; flex:0 0 32px; padding:2px; border-radius:8px; }
    .color-inline em{ font-style:normal; font-size:10.5px; line-height:1.25; color:var(--nb-document-muted); }
    details.card.edit-linked-card{ border-color:color-mix(in srgb,var(--section-accent) 48%,#dfe3e8); box-shadow:0 0 0 3px color-mix(in srgb,var(--section-accent) 10%,transparent),0 10px 26px rgba(16,24,40,.07); }
    details.card.edit-linked-card > summary{ background:color-mix(in srgb,var(--section-soft) 74%,white); }
    details.card.edit-linked-card .summary-tag{ box-shadow:0 0 0 3px color-mix(in srgb,var(--section-accent) 10%,transparent); }
    .inv-meta{ margin-top:14px; gap:10px 16px; }
    .inv-meta .meta-item{ min-width:0; }
    .inv-meta .meta-item dt{ margin-bottom:3px; }
    .inv-meta .meta-item dd{ line-height:1.3; overflow-wrap:anywhere; }
    .inv-brand,.inv-titleblock{ min-width:0; }

    /* Professional: split business + invoice details. */
    .tpl-professional .inv-head{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(285px,.9fr)!important; gap:34px!important; align-items:start!important; padding-bottom:20px!important; border-bottom:2px solid var(--iacc)!important; }
    .tpl-professional .inv-titleblock{ text-align:right!important; min-width:0!important; }
    .tpl-professional .inv-meta{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; justify-content:stretch!important; }
    .tpl-professional .inv-meta > div{ min-width:0!important; }
    .tpl-professional .meta-period,
    .tpl-professional .meta-wide-last{ grid-column:1/-1; }
    .tpl-professional .inv-table th{ background:color-mix(in srgb,var(--th-bg) 55%,white)!important; color:#30343b!important; border-bottom:1px solid color-mix(in srgb,var(--th-bg) 52%,#d9dee7)!important; }
    .tpl-professional.th-filled .inv-table th{ background:var(--th-bg)!important; color:var(--th-color)!important; border-bottom:0!important; }
    .tpl-professional.th-minimal .inv-table th{ background:transparent!important; color:#555b65!important; border-bottom:1px solid #d7dbe0!important; }

    /* Minimal: business first, then horizontal invoice strip. */
    .tpl-minimal .inv-head{ display:grid!important; grid-template-columns:1fr!important; gap:24px!important; border-bottom:0!important; padding-bottom:10px!important; margin-bottom:30px!important; }
    .tpl-minimal .inv-brand{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:24px!important; }
    .tpl-minimal .inv-titleblock{ display:grid!important; grid-template-columns:minmax(160px,.55fr) minmax(0,1.45fr)!important; column-gap:34px!important; align-items:start!important; text-align:left!important; min-width:0!important; padding-top:18px!important; border-top:1px solid #d9dde2!important; }
    .tpl-minimal .inv-title{ margin:0!important; }
    .tpl-minimal .pill{ justify-self:start!important; margin-top:8px!important; grid-column:1!important; }
    .tpl-minimal .inv-meta{ grid-column:2!important; grid-row:1 / span 3!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px 18px!important; margin:0!important; text-align:left!important; }
    .tpl-minimal .meta-period{ grid-column:span 2; }
    .tpl-minimal .inv-table th{ background:transparent!important; color:#555b65!important; border-bottom:1px solid #cfd3d8!important; }
    .tpl-minimal.th-filled .inv-table th{ background:var(--th-bg)!important; color:var(--th-color)!important; border-bottom:0!important; }
    .tpl-minimal.th-underline .inv-table th{ background:color-mix(in srgb,var(--th-bg) 42%,white)!important; color:#3f4650!important; border-bottom:1px solid #d6dbe1!important; }

    /* Executive: centered title, compact metadata matrix, sender below. */
    .tpl-executive .inv-head{ display:grid!important; grid-template-columns:1fr!important; gap:0!important; padding-bottom:22px!important; border-bottom:1px solid #b9bec6!important; }
    .tpl-executive .inv-titleblock{ order:-1!important; text-align:center!important; width:100%!important; min-width:0!important; }
    .tpl-executive .inv-title{ margin-bottom:6px!important; }
    .tpl-executive .pill{ margin-top:0!important; }
    .tpl-executive .inv-meta{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:13px 18px!important; max-width:610px!important; margin:20px auto 0!important; text-align:center!important; }
    .tpl-executive .inv-meta > div{ min-width:0!important; }
    .tpl-executive .meta-period{ grid-column:auto!important; }
    .tpl-executive .inv-brand{ margin-top:24px!important; padding-top:18px!important; border-top:1px solid #e0e3e7!important; display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:24px!important; }
    .tpl-executive .inv-biz{ max-width:62%; }
    .tpl-executive .inv-table th{ background:var(--th-bg)!important; color:var(--th-color)!important; }
    .tpl-executive.th-underline .inv-table th{ background:color-mix(in srgb,var(--th-bg) 20%,white)!important; color:#34383f!important; border-bottom:1px solid color-mix(in srgb,var(--th-bg) 36%,#d8dde3)!important; }
    .tpl-executive.th-minimal .inv-table th{ background:transparent!important; color:#555b65!important; border-bottom:1px solid #d7dbe0!important; }

    /* Studio: branded two-panel masthead. */
    .tpl-studio .inv-head{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(300px,.95fr)!important; gap:0!important; margin:-12px -14px 28px!important; padding:0!important; border:1px solid color-mix(in srgb,var(--iacc) 17%,#e3e6ea)!important; border-radius:14px!important; overflow:hidden!important; background:#fff!important; }
    .tpl-studio .inv-brand{ padding:24px 22px!important; background:color-mix(in srgb,var(--iacc) 8%,white)!important; }
    .tpl-studio .inv-titleblock{ padding:22px!important; text-align:left!important; color:#fff!important; background:var(--iacc)!important; min-width:0!important; }
    .tpl-studio .inv-title{ color:#fff!important; }
    .tpl-studio .pill{ background:rgba(255,255,255,.16)!important; color:#fff!important; }
    .tpl-studio .inv-meta{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px 14px!important; color:#fff!important; }
    .tpl-studio .inv-meta dt{ color:rgba(255,255,255,.72)!important; opacity:1!important; }
    .tpl-studio .inv-meta dd{ color:#fff!important; }
    .tpl-studio .meta-period,
    .tpl-studio .meta-wide-last{ grid-column:1/-1; }
    .tpl-studio .inv-table th{ background:var(--th-bg)!important; color:var(--th-color)!important; }
    .tpl-studio.th-underline .inv-table th{ background:color-mix(in srgb,var(--th-bg) 44%,white)!important; color:#31363c!important; border-bottom:1px solid color-mix(in srgb,var(--th-bg) 40%,#d6dbe0)!important; }
    .tpl-studio.th-minimal .inv-table th{ background:transparent!important; color:#555b65!important; border-bottom:1px solid #d7dbe0!important; }

    /* Template cards mirror the actual header compositions. */
    .template-card-v8[data-template="professional"] .template-thumb .mini-logo{ left:8px; top:8px; width:21px; }
    .template-card-v8[data-template="professional"] .template-thumb .mini-title{ right:8px; top:8px; width:25px; height:7px; }
    .template-card-v8[data-template="professional"] .template-thumb .mini-meta{ right:8px; top:19px; width:29px; }
    .template-card-v8[data-template="minimal"] .template-thumb .mini-logo{ left:8px; top:7px; width:18px; height:4px; }
    .template-card-v8[data-template="minimal"] .template-thumb .mini-title{ left:8px; right:auto; top:22px; width:18px; height:4px; background:#111827; }
    .template-card-v8[data-template="minimal"] .template-thumb .mini-meta{ left:32px; right:8px; top:22px; width:auto; height:3px; }
    .template-card-v8[data-template="minimal"] .template-thumb .mini-table{ top:35px; border-top-width:1px; }
    .template-card-v8[data-template="executive"] .template-thumb .mini-title{ left:50%; right:auto; transform:translateX(-50%); top:6px; width:30px; height:6px; background:#232830; }
    .template-card-v8[data-template="executive"] .template-thumb .mini-meta{ left:9px; right:9px; top:18px; width:auto; height:7px; background:repeating-linear-gradient(90deg,#cfd5df 0 15px,transparent 15px 18px); }
    .template-card-v8[data-template="executive"] .template-thumb .mini-logo{ left:8px; top:29px; width:18px; height:4px; }
    .template-card-v8[data-template="executive"] .template-thumb .mini-table{ top:38px; }
    .template-card-v8[data-template="studio"] .template-thumb::before{ content:""; position:absolute; inset:0 0 0 50%; background:var(--accent); opacity:.92; }
    .template-card-v8[data-template="studio"] .template-thumb .mini-logo{ z-index:1; left:8px; top:9px; background:#bfc7d1; }
    .template-card-v8[data-template="studio"] .template-thumb .mini-title{ z-index:1; right:8px; top:8px; width:26px; background:#fff; }
    .template-card-v8[data-template="studio"] .template-thumb .mini-meta{ z-index:1; right:8px; top:20px; width:25px; background:rgba(255,255,255,.65); }
    .template-card-v8[data-template="studio"] .template-thumb .mini-table{ z-index:1; top:34px; }

    @media screen and (max-width:760px){
      .tpl-professional .inv-head,.tpl-studio .inv-head{ grid-template-columns:1fr!important; }
      .tpl-professional .inv-titleblock,.tpl-studio .inv-titleblock{ text-align:left!important; }
      .tpl-professional .inv-meta,.tpl-studio .inv-meta{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
      .tpl-minimal .inv-titleblock{ grid-template-columns:1fr!important; gap:14px!important; }
      .tpl-minimal .inv-meta{ grid-column:1!important; grid-row:auto!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; }
      .tpl-executive .inv-meta{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
    }

    @media screen and (max-width:390px){ .summary-tag{ display:inline-flex!important; } }


    /* ══════════ v10 — classic-left / Google-inspired reference template ══════════ */
    .template-grid-v10{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .thumb-classicleft{ background:#fff; position:relative; }
    .thumb-classicleft .mini-side{ position:absolute; left:0; top:0; bottom:0; width:38%; background:#fafafa; border-right:1px solid #e5e7eb; }
    .thumb-classicleft .mini-band{ position:absolute; right:8px; top:8px; width:34px; height:5px; background:#3b82f6; border-radius:3px; }
    .thumb-classicleft .mini-lines{ position:absolute; left:8px; top:10px; width:24px; height:30px; background:
      linear-gradient(#d1d5db,#d1d5db) 0 0/24px 1px no-repeat,
      radial-gradient(circle,#c5c9d1 45%,transparent 46%) 0 8px/5px 4px repeat-x,
      radial-gradient(circle,#c5c9d1 45%,transparent 46%) 0 18px/5px 4px repeat-x,
      radial-gradient(circle,#c5c9d1 45%,transparent 46%) 0 28px/5px 4px repeat-x; }
    .thumb-classicleft .mini-total{ position:absolute; right:8px; bottom:8px; width:46px; height:16px; border-top:1px solid #d1d5db; background:linear-gradient(180deg,transparent 0 50%, #e5e7eb 50% 56%, transparent 56%); }

    .tpl-classicleft{ --side-width:248px; --panel-line:#e3e5e8; }
    .tpl-classicleft .inv-head{
      display:grid!important; grid-template-columns:minmax(0,var(--side-width)) minmax(0,1fr)!important; gap:26px!important;
      align-items:start!important; border-bottom:0!important; padding-bottom:10px!important; margin-bottom:16px!important;
    }
    .tpl-classicleft .inv-brand{ display:block!important; padding-right:22px!important; border-right:1px solid var(--panel-line)!important; }
    .tpl-classicleft .inv-bizname{ font-size:1.35em; font-weight:750; margin-bottom:10px; color:#111827; }
    .tpl-classicleft .inv-line{ color:#3f3f46; line-height:1.45; }
    .tpl-classicleft .inv-titleblock{ text-align:left!important; min-width:0!important; padding-top:2px!important; }
    .tpl-classicleft .inv-title{ margin:0 0 12px!important; font-size:2.35em!important; font-weight:770!important; letter-spacing:-.04em!important; color:#151515!important; }
    .tpl-classicleft .pill{ margin:0 0 10px auto!important; display:inline-flex!important; background:#f8ead6!important; color:#a15c00!important; }
    .tpl-classicleft .inv-meta{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px 24px!important; margin-top:8px!important; }
    .tpl-classicleft .inv-meta .meta-item{ padding-bottom:6px; border-bottom:1px solid #f0f1f3; }
    .tpl-classicleft .inv-meta .meta-item dt{ font-size:.68em!important; letter-spacing:.12em!important; color:var(--nb-document-muted)!important; opacity:1; }
    .tpl-classicleft .inv-meta .meta-item dd{ font-size:1.03em!important; font-weight:700!important; color:#111827!important; }
    .tpl-classicleft .meta-period{ grid-column:span 2; }
    .tpl-classicleft .inv-parties{
      display:grid!important; grid-template-columns:minmax(0,var(--side-width)) minmax(0,1fr)!important; gap:26px!important; margin-bottom:18px!important; align-items:start!important;
    }
    .tpl-classicleft .bill-card{ padding-right:22px!important; border-right:1px solid var(--panel-line)!important; }
    .tpl-classicleft .bill-card .inv-label:first-child{ margin-top:0!important; font-size:.76em!important; letter-spacing:.14em!important; color:var(--nb-document-muted)!important; opacity:1; }
    .tpl-classicleft .bill-name{ font-size:1.18em!important; font-weight:720!important; color:#111827!important; margin-bottom:8px!important; }
    .tpl-classicleft .extra-card{
      display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px 24px!important; align-content:start!important; padding-top:2px!important;
    }
    .tpl-classicleft .extra-card .inv-label{ margin:0 0 5px!important; font-size:.74em!important; letter-spacing:.14em!important; color:var(--nb-document-muted)!important; opacity:1; }
    .tpl-classicleft .inv-table{ margin-top:6px!important; border-top:1px solid #d7dbe0!important; }
    .tpl-classicleft .inv-table th{ background:transparent!important; color:#5b6470!important; border-bottom:1px solid #d7dbe0!important; font-size:.72em!important; letter-spacing:.12em!important; }
    .tpl-classicleft .inv-table td{ border-bottom:1px solid #eceef1!important; padding-top:12px!important; padding-bottom:12px!important; }
    .tpl-classicleft .inv-totals{ margin-top:18px!important; min-width:320px!important; margin-left:auto!important; border-top:1px solid #d7dbe0!important; padding-top:10px!important; }
    .tpl-classicleft .t-total{ margin-top:8px!important; border-top:1px solid #d7dbe0!important; padding-top:11px!important; }
    .tpl-classicleft .t-total dd{ color:#111827!important; font-size:1.22em!important; font-weight:820!important; }
    .tpl-classicleft .inv-notes,.tpl-classicleft .inv-payment{ margin-top:20px!important; padding-top:16px!important; border-top:1px solid #eceef1!important; }
    @media screen and (max-width:760px){
      .template-grid-v10{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      .tpl-classicleft .inv-head,.tpl-classicleft .inv-parties{ grid-template-columns:1fr!important; }
      .tpl-classicleft .inv-brand,.tpl-classicleft .bill-card{
        border-right:0!important; padding-right:0!important; border-bottom:1px solid var(--panel-line)!important;
        padding-bottom:14px!important; margin-bottom:4px!important;
      }
      .tpl-classicleft .inv-meta{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
      .tpl-classicleft .extra-card{ grid-template-columns:1fr!important; }
    }


    /* v12 — one quiet chevron per select */
    select:hover{ border-color:#b9c0c9; }
    select:focus-visible{ border-color:color-mix(in srgb,var(--accent) 58%,#b9c0c9); }


    /* ══════════ v12 — simplified affordances + NineBrief site chrome ══════════ */

    /* One centered disclosure control. No redundant Show/Hide text. */
    .sub-disclosure > summary{
      min-height:48px;
      display:grid;
      grid-template-columns:1fr 28px;
      align-items:center;
      column-gap:10px;
    }
    .sub-disclosure > summary::after{
      content:"";
      width:28px; height:28px;
      justify-self:end;
      border-radius:50%;
      background-color:#f1f2f5;
      background-image:
        linear-gradient(45deg, transparent 48%, #69707a 49% 58%, transparent 59%),
        linear-gradient(-45deg, transparent 48%, #69707a 49% 58%, transparent 59%);
      background-repeat:no-repeat;
      background-size:7px 7px,7px 7px;
      background-position:8px 10px,12px 10px;
      transition:transform 180ms ease-out,background-color 120ms ease-out;
    }
    .sub-disclosure[open] > summary::after{ transform:rotate(180deg); }
    .sub-disclosure > summary:hover::after{ background-color:#e9ebef; }

    /* Remove legacy Show/Hide pills if old cached markup is ever present. */
    .summary-action,.sub-summary-action{ display:none!important; }

    @media print{
      @page{ size:A4; margin:0; }

      html,body{
        width:210mm !important;
        min-width:210mm !important;
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
      }

      body,
      .sheet,
      .sheet *{
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
      }

      .topbar,
      .studio-boundary,
      .editor,
      .toolbar,
      .toast,
      .preview-add-item,
      .invoice-editor-popover,
      .site-footer{
        display:none !important;
      }

      .workspace{
        display:block !important;
        width:210mm !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
      }

      .preview{
        display:block !important;
        width:210mm !important;
        min-width:210mm !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
      }

      .preview-scroll{
        display:block !important;
        width:210mm !important;
        overflow:visible !important;
        margin:0 !important;
        padding:0 !important;
      }

      .sheet-zoom{
        width:794px !important;
        margin:0 !important;
        zoom:1 !important;
        transform:none !important;
      }

      /* Keep the exact preview geometry. Do not restyle the invoice for print. */
      .sheet{
        box-sizing:border-box !important;
        width:794px !important;
        min-width:794px !important;
        max-width:794px !important;
        min-height:1123px !important;
        padding:54px 58px !important;
        margin:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        overflow:visible !important;
      }

      .sheet.preview-edit-mode [data-edit-target],
      .sheet.preview-edit-mode [data-edit-item]{
        outline:none !important;
        cursor:default !important;
      }

      thead{ display:table-header-group !important; }
      tr,.avoid-break{ break-inside:avoid !important; page-break-inside:avoid !important; }
    }
  
    @media print{
      .pdf-exporting *,
      .pdf-exporting *::before,
      .pdf-exporting *::after{
        animation:none !important;
        transition:none !important;
      }
    }


/* Brand asset fallback: shown only when the PNG cannot be loaded. */
.brand-logo-fallback{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#4ade80;
  color:#fff;
  font-weight:850;
  line-height:1;
}
.brand-logo-fallback-main{
  width:38px;
  height:38px;
  border-radius:10px;
  font-size:22px;
}
.brand-logo-fallback-footer{
  width:24px;
  height:24px;
  border-radius:7px;
  font-size:14px;
}
@media screen and (max-width:760px){
  .brand-logo-fallback-main{ width:35px; height:35px; font-size:20px; }
}
@media screen and (max-width:520px){
  .brand-logo-fallback-main{ width:32px; height:32px; font-size:19px; }
}


/* ══════════ SEO / discovery content ══════════
 * Static, useful page copy gives crawlers and first-time visitors a clear
 * explanation of the tool without interfering with the invoice workflow.
 */
html{ scroll-behavior:smooth; }
.tool-intro{
  position:relative;
  overflow:hidden;
  background:radial-gradient(760px 300px at 72% 0%,rgba(74,222,128,.055),transparent 66%),var(--ninebrief-site-bg);
  color:#fff;
  border-bottom:0;
  padding-bottom:54px;
}
.tool-intro-inner{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  padding:26px 24px 42px;
}
.tool-intro-copy{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.tool-breadcrumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin:0 0 20px;
  color:#71717a;
  font-size:10.5px;
  font-weight:650;
}
.tool-breadcrumb a{ color:#a1a1aa; text-decoration:none; }
.tool-breadcrumb a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.tool-eyebrow{
  margin:0 0 10px;
  color:var(--ninebrief-site-green);
  font-size:11px;
  font-weight:820;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tool-intro h1{
  margin:0;
  color:#fff;
  font-size:clamp(38px,5vw,62px);
  line-height:1.02;
  letter-spacing:-.048em;
  font-weight:820;
  text-transform:none;
  text-wrap:balance;
}
.tool-intro-lede{
  max-width:850px;
  margin:18px auto 0;
  color:#c4c4cc;
  font-size:clamp(15px,1.45vw,18px);
  line-height:1.58;
  text-wrap:balance;
}
.tool-proof{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px 24px;
  flex-wrap:wrap;
  margin:20px auto 0;
  color:#d4d4d8;
  font-size:12.5px;
  font-weight:650;
}
.tool-proof span{ white-space:nowrap; }
.tool-intro-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}
.intro-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 17px;
  border-radius:10px;
  text-decoration:none;
  font-size:13px;
  font-weight:760;
  transition:transform 120ms ease-out,background 120ms ease-out,border-color 120ms ease-out;
}
.intro-cta:hover{ transform:translateY(-1px); }
.intro-cta-primary{ border:1px solid transparent; background:var(--ninebrief-site-green); color:#0a1b10; }
.intro-cta-primary:hover{ background:#5be28d; }
.intro-cta-secondary{ border:1px solid #303034; background:#1a1a1a; color:#e4e4e7; }
.intro-cta-secondary:hover{ background:#202024; border-color:#3f3f46; }
.intro-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.tool-product-note{
  max-width:800px;
  margin:18px auto 0;
  color:var(--nb-muted-light);
  font-size:11.5px;
  line-height:1.5;
}
.tool-product-note strong{ color:#d4d4d8; font-weight:720; }

.seo-content{
  background:#f8fafb;
  border-top:1px solid #e6e8ec;
}
.seo-content-inner{
  max-width:1120px;
  margin:0 auto;
  padding:64px 24px;
}
.seo-content-lead{
  max-width:820px;
  margin-bottom:30px;
}
.seo-content h2,
.seo-content h3{
  color:#111827;
  letter-spacing:-.025em;
}
.seo-content h2{
  margin:0 0 12px;
  font-size:clamp(23px,3vw,32px);
  line-height:1.2;
}
.seo-content h3{
  margin:0 0 9px;
  font-size:16px;
}
.seo-content p,
.seo-content li{
  color:#667085;
  font-size:14px;
  line-height:1.65;
}
.seo-content p{ margin:0; }
.seo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:24px 0 34px;
}
.seo-grid article{
  padding:20px;
  border:1px solid #e4e7ec;
  border-radius:16px;
  background:#fff;
}
.seo-grid ol{
  margin:0;
  padding-left:20px;
}
.seo-faq{
  max-width:820px;
  margin-top:34px;
}
.seo-faq > h2{ font-size:24px; }
.seo-faq details{
  border-top:1px solid #e1e5ea;
}
.seo-faq details:last-child{
  border-bottom:1px solid #e1e5ea;
}
.seo-faq summary{
  cursor:pointer;
  padding:16px 2px;
  color:#20242c;
  font-size:14px;
  font-weight:750;
}
.seo-faq details p{
  padding:0 2px 17px;
}
.ninebrief-discovery{
  margin-top:42px;
  padding:22px 24px;
  border:1px solid rgba(74,222,128,.22);
  border-radius:17px;
  background:color-mix(in srgb,#4ade80 5%,white);
}
.ninebrief-discovery strong{
  display:block;
  margin-bottom:6px;
  color:#111827;
  font-size:15px;
}
.ninebrief-discovery p{
  max-width:780px;
}
.ninebrief-discovery a{
  display:inline-block;
  margin-top:12px;
  color:var(--nb-green-ink);
  font-size:13px;
  font-weight:750;
  text-underline-offset:3px;
}

@media screen and (max-width:900px){
  .tool-proof{ gap:9px 16px; }
  .seo-grid{ grid-template-columns:1fr; }
}
@media screen and (max-width:520px){
  .tool-proof{
    align-items:flex-start;
    flex-direction:column;
    width:max-content;
    max-width:100%;
    text-align:left;
  }
  .tool-intro-actions{
    align-items:stretch;
    flex-direction:column;
    width:100%;
  }
  .intro-cta{ width:100%; }
  .tool-product-note{ font-size:11px; }
  .seo-content-inner{ padding:46px 16px; }
}

/* Discovery content must never become part of the exported invoice. */
@media print{
  .tool-intro,
  .seo-content{
    display:none !important;
  }
}


/* ══════════ Product UI refinement — clarity, hierarchy, direct manipulation ══════════
 * Principles: calm surfaces, obvious primary actions, progressive disclosure,
 * 44px touch targets, direct editing on the invoice, and reduced visual noise.
 */
button,input,select,textarea{ -webkit-tap-highlight-color:transparent; }

.topbar .btn{
  min-height:40px;
  border-radius:10px;
  box-shadow:none;
  font-weight:650;
}
.topbar .btn:hover{ transform:none; box-shadow:none; background:#f5f5f7; }
.topbar .btn.accent{
  min-height:42px;
  padding-inline:16px;
  background:#111827;
  border-color:#111827;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
.topbar .btn.accent:hover{ background:#202938; border-color:#202938; }
.editor-overview{
  position:sticky;
  top:0;
  z-index:20;
  margin:0 0 12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:20px;
  background:rgba(247,248,250,.88);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
}
.editor-overview-copy{
  display:grid;
  gap:2px;
  margin-bottom:11px;
}
.editor-overview-eyebrow{
  color:var(--ui-green);
  font-size:10px;
  font-weight:780;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.editor-overview-copy strong{
  color:var(--ui-label);
  font-size:15px;
  letter-spacing:-.015em;
}
.editor-overview-copy small{
  color:var(--ui-secondary);
  font-size:11.5px;
  line-height:1.35;
}
.editor-jumps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  overflow:visible;
  padding:7px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(240,243,246,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
}
.editor-jumps button{
  min-width:0;
  width:100%;
  min-height:40px;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.72);
  padding:0 13px;
  background:rgba(255,255,255,.42);
  color:#3f454d;
  cursor:pointer;
  font-size:11px;
  font-weight:760;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 3px 10px rgba(15,23,42,.08);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:background 140ms ease,border-color 140ms ease,box-shadow 140ms ease,color 140ms ease,transform 140ms ease;
}
.editor-jumps button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.56);
  border-color:rgba(255,255,255,.88);
  color:#1f2937;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 4px 12px rgba(15,23,42,.10);
}
.editor-jumps button.active,
.editor-jumps button[aria-current="step"]{
  background:rgba(232,255,241,.58);
  border-color:rgba(74,222,128,.55);
  color:#0b6b43;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 4px 12px rgba(74,222,128,.14);
}
.editor-jumps button:focus-visible{
  outline:3px solid rgba(74,222,128,.22);
  outline-offset:2px;
}

details.card[open]{
  border-color:color-mix(in srgb,var(--section-accent,#64748b) 26%,rgba(60,60,67,.18));
  box-shadow:0 1px 2px rgba(0,0,0,.025);
}
details.card.edit-linked-card{
  border-color:rgba(10,102,194,.42);
  box-shadow:0 0 0 3px rgba(10,102,194,.08);
}

input:hover,select:hover,textarea:hover{ border-color:rgba(60,60,67,.32); }
.editor [aria-invalid="true"],
.invoice-editor-popover [aria-invalid="true"]{
  border-color:#d92d20!important;
  box-shadow:0 0 0 3px rgba(217,45,32,.10)!important;
}
.currency-field{
  align-content:start;
}
.custom-currency-wrap{
  display:grid;
  gap:5px;
  margin-top:7px;
}
.custom-currency-wrap input{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:720;
}
.custom-currency-wrap small{
  color:var(--nb-document-muted);
  font-size:9.5px;
  line-height:1.35;
}
.item-row:hover{
  border-color:rgba(74,222,128,.52);
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 5px 14px rgba(74,222,128,.075);
}
.item-row:focus-within{
  border-color:rgba(74,222,128,.72);
  box-shadow:
    0 0 0 3px rgba(74,222,128,.11),
    0 1px 0 rgba(255,255,255,.90) inset,
    0 6px 16px rgba(74,222,128,.08);
}
.item-row:nth-child(4n+2) .item-index{ background:#edf5ff; border-color:#bfdbfe; color:#1d4ed8; }
.item-row:nth-child(4n+3) .item-index{ background:#f4efff; border-color:#ddd0ff; color:#6d28d9; }
.item-row:nth-child(4n+4) .item-index{ background:#fff4e8; border-color:#fed7aa; color:#b45309; }
.preview-title{
  display:grid;
  gap:1px;
  min-width:122px;
}
.preview-title strong{
  color:#fff;
  font-size:12px;
  font-weight:720;
  letter-spacing:-.01em;
}
.preview-title small{
  color:var(--nb-muted-light);
  font-size:10px;
}
/* Default Professional invoice — finance-grade typography and restrained hierarchy. */
.tpl-professional{
  letter-spacing:-.004em;
  font-weight:400;
}
.tpl-professional .inv-line,
.tpl-professional .inv-table td,
.tpl-professional .pay-block div:not(.pk),
.tpl-professional .pay-instr,
.tpl-professional .notes p{
  font-weight:400;
}
.tpl-professional .inv-head{
  grid-template-columns:minmax(0,1fr) minmax(290px,.9fr)!important;
  gap:38px!important;
  padding-bottom:20px!important;
  margin-bottom:24px!important;
  border-bottom:2px solid var(--iacc)!important;
}
.tpl-professional .inv-bizname{
  color:var(--biz-color)!important;
  font-size:1.34em!important;
  font-weight:720!important;
  letter-spacing:-.018em;
}
.tpl-professional .inv-title{
  color:var(--title-color)!important;
  font-size:2.45em!important;
  font-weight:720!important;
  letter-spacing:-.04em!important;
}
.tpl-professional .inv-meta{
  gap:9px 22px!important;
  margin-top:15px!important;
}
.tpl-professional .inv-meta dt{
  color:var(--nb-document-muted);
  opacity:1;
  font-size:.66em;
  font-weight:680;
  letter-spacing:.09em;
}
.tpl-professional .inv-meta dd{
  color:#0f172a;
  font-weight:650;
}
.tpl-professional .inv-parties{
  margin-bottom:24px;
  padding:2px 0 4px;
}
.tpl-professional .inv-label{
  color:var(--nb-document-muted);
  opacity:1;
  font-size:.7em;
  font-weight:680;
}
.tpl-professional .bill-name{ color:#0f172a; font-weight:700; }
.tpl-professional .inv-table{
  margin-top:4px;
  border-top:1px solid #d9e2ec;
}
.tpl-professional .inv-table th{
  padding:10px 8px!important;
  background:color-mix(in srgb,var(--th-bg) 58%,white)!important;
  color:#334155!important;
  border-bottom:1px solid #cbd5e1!important;
  font-size:.68em!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  opacity:1!important;
}
.tpl-professional .inv-table td{
  padding:11px 8px!important;
  border-bottom:1px solid #e6ebf0!important;
}
.tpl-professional .inv-desc strong{ color:#0f172a; font-weight:650; }
.tpl-professional .num{ font-variant-numeric:tabular-nums; }
.tpl-professional .inv-totals{
  min-width:310px;
  border-top:1px solid #dbe2ea;
  padding-top:7px;
}
.tpl-professional .inv-totals > div{ padding:5px 7px; }
.tpl-professional .t-total{
  margin-top:7px!important;
  padding-top:10px!important;
  border-top:2px solid var(--iacc)!important;
}
.tpl-professional .t-total dt{
  color:#0f172a;
  opacity:1;
  font-weight:700;
}
.tpl-professional .t-total dd{
  color:var(--total-color)!important;
  font-size:1.24em!important;
  font-weight:750!important;
}

/* Direct manipulation controls live on the canvas only while editing. */
.preview-quick-adjustments{
  display:none;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin:12px 0 0 auto;
  padding:8px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(59,130,246,.14);
  border-radius:12px;
  background:#f8fbff;
}
.sheet.edit-mode .preview-quick-adjustments{ display:flex; }
.preview-quick-label{
  margin:0 5px 0 2px;
  color:var(--nb-document-muted);
  font-size:.72em;
  font-weight:680;
}
.preview-adjust-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:0 9px;
  border-radius:9px;
  cursor:pointer;
  font:inherit;
  font-size:.76em;
}
.preview-adjust-name{ font-weight:700; }
.preview-adjust-state{
  color:var(--nb-document-muted);
  font-size:.9em;
}
@media screen and (max-width:1020px){
  .editor-overview{ top:0; }
}
@media screen and (max-width:760px){
  .editor{ overflow:visible; padding:12px; }
  .editor form{ max-width:none; }
  .editor-overview{
    position:relative;
    top:auto;
    border-radius:15px;
  }
  .preview{ min-height:720px; }
  .preview-scroll{ padding:22px 14px 36px; }
  .preview-quick-adjustments{
    flex-wrap:wrap;
    width:100%;
    justify-content:flex-start;
  }
  .preview-quick-label{ width:100%; }
}
@media print{
  .preview-quick-adjustments,
  .editor-overview{
    display:none!important;
  }
}


/* ══════════ v18.2 — download action, canvas logo and faster invoice options ══════════ */
.topbar .btn.accent{
  background:var(--ninebrief-action);
  border-color:var(--ninebrief-action);
  color:var(--ninebrief-action-ink);
  font-weight:780;
  box-shadow:0 2px 8px rgba(74,222,128,.20);
}
.topbar .btn.accent:hover{
  background:var(--ninebrief-action-hover);
  border-color:var(--ninebrief-action-hover);
  color:#04271b;
  box-shadow:0 3px 10px rgba(74,222,128,.24);
}
.topbar .btn.accent:focus-visible{
  outline:3px solid rgba(74,222,128,.26);
  outline-offset:2px;
}

/* Canvas logo placeholder: visible only while direct invoice editing is on. */
.canvas-logo-upload{
  display:none;
  width:190px;
  min-height:92px;
  margin:0 0 14px;
  padding:15px 16px;
  place-items:center;
  align-content:center;
  gap:7px;
  border:1px solid #aeb8c5;
  border-radius:6px;
  background:#fff;
  color:#1f2937;
  cursor:pointer;
  font:inherit;
  text-align:center;
  box-shadow:none;
  transition:border-color 120ms ease,box-shadow 120ms ease,background 120ms ease;
}
.sheet.edit-mode .canvas-logo-upload{ display:grid; }
.canvas-logo-upload:hover{
  border-color:#667085;
  background:#fbfcfd;
  box-shadow:0 0 0 3px rgba(74,222,128,.08);
}
.canvas-logo-upload:focus-visible{
  outline:3px solid rgba(74,222,128,.20);
  outline-offset:3px;
}
.canvas-logo-topline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.canvas-logo-plus{
  font-size:.84em;
  font-weight:560;
  color:#344054;
}
.canvas-logo-title{
  display:block;
  font-size:.92em;
  font-weight:720;
  color:#111827;
}
.canvas-logo-icon{
  position:relative;
  width:28px;
  height:28px;
  display:block;
  flex:0 0 28px;
  border-radius:4px;
  background:#050505;
}
.canvas-logo-icon::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:5px;
  height:14px;
  background:#fff;
  clip-path:polygon(0 100%,34% 36%,54% 69%,72% 24%,100% 100%);
}
.canvas-logo-icon::after{
  content:"";
  position:absolute;
  top:5px;
  right:6px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
}
.tpl-professional .canvas-logo-upload{
  width:192px;
  min-height:94px;
}

/* Make common tax/discount/charge controls feel intentionally discoverable. */
#tax-settings{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(60,60,67,.10);
}
#invoice-tax-rate-setting[hidden],
#per-item-tax-note[hidden]{ display:none!important; }
#per-item-tax-note{
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  background:#f8fafc;
  color:#667085;
}
.preview-quick-adjustments{
  border-color:rgba(74,222,128,.20);
  background:#f7fffb;
}
.preview-adjust-btn{
  border-color:#d8e5de;
}
.preview-adjust-btn:hover{
  border-color:#8dc7aa;
  background:#f2fff8;
}

@media print{
  .canvas-logo-upload{
    display:none!important;
  }
}


/* ══════════ v18.2.1 — clearer brand, PDF action and edit/preview guidance ══════════ */
/* Primary export action: intentionally distinct from editing controls. */
.topbar .btn.accent,
#btn-pdf{
  background:var(--download-red)!important;
  border-color:var(--download-red)!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:0 3px 10px rgba(229,57,53,.24)!important;
}
.topbar .btn.accent:hover,
#btn-pdf:hover{
  background:var(--download-red-hover)!important;
  border-color:var(--download-red-hover)!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(198,40,40,.28)!important;
}
#btn-pdf:focus-visible{
  outline:3px solid rgba(229,57,53,.22);
  outline-offset:2px;
}


/* Edit mode is a mode, not just a button. Explain both states in plain language. */
.preview-mode-guide{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:min(250px,100%);
  max-width:min(430px,100%);
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(255,255,255,.07);
}
.preview-mode-dot{
  width:9px;
  height:9px;
  margin-top:4px;
  flex:0 0 9px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.12);
}
.preview-mode-copy{
  display:grid;
  gap:1px;
  min-width:0;
  overflow-wrap:anywhere;
}
.preview-mode-copy strong{
  color:#fff;
  font-size:11px;
  font-weight:760;
  line-height:1.2;
}
.preview-mode-copy small{
  color:rgba(255,255,255,.68);
  font-size:10px;
  line-height:1.35;
}
.preview-mode-guide.is-editing{
  border-color:rgba(74,222,128,.34);
  background:rgba(74,222,128,.10);
}
.preview-mode-guide.is-editing .preview-mode-dot{
  background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.16);
}
.preview-mode-guide.is-preview{
  border-color:rgba(96,165,250,.28);
  background:rgba(96,165,250,.09);
}
.preview-mode-guide.is-preview .preview-mode-dot{
  background:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.14);
}

.preview-edit-toggle{
  flex:0 0 auto;
  min-height:44px;
  margin-left:4px;
  padding:8px 13px;
  border-radius:10px;
  font-weight:780;
  white-space:nowrap;
}
.preview-edit-toggle[aria-pressed="true"]{
  background:rgba(74,222,128,.78);
  border-color:rgba(74,222,128,.90);
  color:#052e1d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 4px 14px rgba(74,222,128,.22);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.preview-edit-toggle[aria-pressed="true"]:hover{
  background:var(--nb-green-strong);
  border-color:var(--nb-green-strong);
}
.preview-edit-toggle[aria-pressed="false"]{
  background:rgba(74,222,128,.12);
  border-color:rgba(255,255,255,.24);
  color:#dffbea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
}
.preview-edit-toggle[aria-pressed="false"]:hover{
  background:#f5f5f7;
}
.preview-edit-toggle .edit-icon{
  display:inline-block;
  margin-right:6px;
  font-size:13px;
  font-weight:900;
  transform:translateY(-.5px);
}
#preview-edit-hint{
  display:block;
  padding:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.68);
  font-size:10.5px;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media screen and (max-width:1100px){

  .topbar{ gap:10px; }
}
@media screen and (max-width:900px){

  .preview-mode-guide{ max-width:340px; }
}
@media screen and (max-width:760px){
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .topbar-actions{
    grid-column:1 / -1;
    width:100%;
    margin-left:0;
    justify-content:flex-end;
  }
  .save-chip{ margin-right:auto; }
  .toolbar{
    align-items:stretch;
  }
  .preview-title{
    width:100%;
    min-width:0;
  }
  .preview-mode-guide{
    order:2;
    flex:1 1 100%;
    max-width:none;
  }
  .preview-edit-toggle{
    order:3;
    flex:1 1 auto;
  }
}
@media screen and (max-width:520px){
  .topbar{ padding:9px 10px; }

  .topbar-actions{
    gap:6px;
  }
  .topbar-actions .btn{
    min-height:38px;
    padding:8px 10px;
    font-size:12px;
  }
  #btn-pdf{
    flex:1 1 auto;
  }
  .preview-mode-copy small{ font-size:9.5px; }
}

@media print{
  .preview-mode-guide{
    display:none!important;
  }
}


/* ══════════ v18.3 — shared NineBrief shell + edit section guides ══════════
 * Site brand/header/footer structure and sizing live in ninebrief-shell.css.
 */
.sheet.edit-mode [data-edit-section]{
  position:relative;
  cursor:pointer;
  outline:1.5px dashed rgba(74,222,128,.68);
  outline-offset:5px;
  border-radius:7px;
  transition:outline-color 120ms ease-out,background-color 120ms ease-out,box-shadow 120ms ease-out;
}
.sheet.edit-mode [data-edit-section]::before{
  content:attr(data-edit-section-label);
  position:absolute;
  z-index:8;
  top:-14px;
  left:7px;
  display:block;
  max-width:calc(100% - 14px);
  padding:2px 6px;
  overflow:hidden;
  border:1px solid rgba(74,222,128,.18);
  border-radius:999px;
  background:#effcf6;
  color:var(--nb-green-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:8.5px;
  font-weight:760;
  line-height:1.35;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
.sheet.edit-mode [data-edit-section]:hover{
  outline-color:var(--nb-green-strong);
  background:rgba(74,222,128,.035);
  box-shadow:0 0 0 4px rgba(74,222,128,.045);
}
.sheet.edit-mode [data-edit-section]:hover::before{
  border-color:rgba(74,222,128,.28);
  background:#e4faef;
}
.sheet.edit-mode .invoice-items-section{
  margin-top:2px;
}
.sheet.edit-mode .invoice-items-section::before{
  top:-12px;
}
.sheet.edit-mode .totals-wrap[data-edit-section]{
  padding:2px 0;
}
.sheet.edit-mode .payment[data-edit-section],
.sheet.edit-mode .notes[data-edit-section],
.sheet.edit-mode .sig[data-edit-section]{
  padding:3px 2px;
}

/* Individual fields remain clickable within an outlined section, but section
 * guides carry the persistent visual hierarchy instead of outlining every
 * field at rest.
 */
.sheet.edit-mode [data-edit-target],
.sheet.edit-mode [data-edit-item]{
  outline:1px dashed transparent;
  outline-offset:3px;
}
.sheet.edit-mode [data-edit-target]:hover,
.sheet.edit-mode [data-edit-item]:hover{
  outline:2px solid rgba(10,102,194,.55);
  outline-offset:3px;
  background:rgba(96,165,250,.055);
}

/* Clean preview and PDF/export are document-only views. */
.pdf-exporting .sheet [data-edit-section],
.pdf-exporting .sheet [data-edit-target],
.pdf-exporting .sheet [data-edit-item]{
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
.pdf-exporting .sheet [data-edit-section]::before{
  display:none!important;
}

@media screen and (max-width:520px){
  .editor-jumps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sheet.edit-mode [data-edit-section]::before{
    font-size:8px;
    padding:2px 5px;
  }
}
@media (prefers-reduced-transparency: reduce){
  .topbar,
  .editor-overview,
  .editor-jumps,
  .editor-jumps button,
  .toolbar,
  .switch-control .switch-ui{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .topbar,.editor-overview,.editor-jumps button{ background:#fff!important; }
  .editor-jumps{ background:#eef1f4!important; }
  .toolbar{ background:#1c1d21!important; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar,.editor-overview,.editor-jumps button{ background:#fff; }
  .editor-jumps{ background:#eef1f4; }
  .toolbar{ background:#1c1d21; }
  .switch-control .switch-ui{ background:#e8ebef; }
  .switch-control input:checked + .switch-ui{ background:var(--ninebrief-site-green); }
}

@media print{
  .sheet [data-edit-section],
  .sheet [data-edit-target],
  .sheet [data-edit-item]{
    outline:none!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .sheet [data-edit-section]::before{
    display:none!important;
  }
}


/* Give the studio its own visual and scrolling boundary. */
.studio-boundary{
  position:relative;
  z-index:3;
  background:#f5f5f7;
  border-top:1px solid #202024;
  border-bottom:1px solid #e5e5e7;
}
.studio-boundary-inner{
  display:flex;
  align-items:baseline;
  gap:10px;
  max-width:1480px;
  margin:0 auto;
  padding:12px 18px 10px;
}
.studio-kicker{
  color:#0b7a4e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.studio-boundary-copy{
  color:#71717a;
  font-size:11px;
  line-height:1.35;
}

/* Invoice-only physical checkbox switch. Quote/Estimate has no equivalent control. */
.switch-row{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border:1px solid var(--ui-separator);
  border-radius:12px;
  background:#fafafa;
  cursor:default;
  user-select:text;
}
.switch-row span{
  font-size:12.5px;
  line-height:1.25;
}
.switch-control{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:46px;
  height:42px;
  flex:0 0 46px;
  cursor:pointer;
  border-radius:999px;
}
.switch-control input{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  opacity:0!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:2;
}
.switch-control .switch-ui{
  position:relative;
  width:38px;
  height:22px;
  padding:2px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(226,232,240,.56));
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 5px 14px rgba(15,23,42,.10),
    0 0 0 1px rgba(100,116,139,.08);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  transition:background 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 120ms ease;
  pointer-events:none;
}
.switch-control .switch-ui::after{
  content:"";
  display:block;
  width:16px;
  height:16px;
  border:1px solid rgba(255,255,255,.90);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.88));
  box-shadow:0 1px 3px rgba(15,23,42,.18),0 1px 0 rgba(255,255,255,.92) inset;
  transition:transform 160ms ease;
}
.switch-control input:disabled + .switch-ui{ opacity:.45; }
.switch-row:has(input:disabled){ opacity:.58; cursor:not-allowed; }
.switch-control input:checked + .switch-ui{
  border-color:rgba(74,222,128,.72);
  background:linear-gradient(135deg,var(--nb-green),var(--nb-green-strong));
  box-shadow:
    0 1px 0 rgba(255,255,255,.34) inset,
    0 5px 16px rgba(74,222,128,.24),
    0 0 0 1px rgba(74,222,128,.16);
}
.switch-control input:checked + .switch-ui::after{
  transform:translateX(16px);
}
.switch-control:focus-within .switch-ui{
  outline:3px solid rgba(74,222,128,.26);
  outline-offset:3px;
}
.switch-control:hover .switch-ui{
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 7px 18px rgba(15,23,42,.13),
    0 0 0 1px rgba(100,116,139,.08);
}
.switch-control:hover input:checked + .switch-ui{
  box-shadow:
    0 1px 0 rgba(255,255,255,.36) inset,
    0 7px 20px rgba(74,222,128,.30),
    0 0 0 1px rgba(74,222,128,.18);
}

/* Keep wheel/touch scrolling inside the studio once the user is working. */
@media screen and (min-width:761px){
  .workspace{
    height:calc(100dvh - 64px);
    min-height:620px;
    overflow:hidden;
  }
  .editor{
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    overflow-anchor:none;
    scrollbar-gutter:stable;
  }
  .preview{
    overflow:hidden;
    overscroll-behavior:contain;
  }
  .preview-scroll{
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
}

/* On phones/tablets the document remains a normal page, but the visual
   separation between marketing and studio is preserved. */
@media screen and (max-width:760px){
  .studio-boundary-inner{
    padding:10px 12px 9px;
  }
  .studio-boundary-copy{
    display:none;
  }
  .tool-intro{
    padding-bottom:38px;
  }
  .tool-intro-inner{
    padding:22px 16px 34px;
  }
  .tool-intro h1{
    font-size:clamp(34px,10vw,48px);
  }
}


/* ══════════ v18.8.1 — form guidance placeholders ══════════ */
.editor input::placeholder,
.editor textarea::placeholder,
.invoice-editor-popover input::placeholder,
.invoice-editor-popover textarea::placeholder{
  color:var(--nb-placeholder);
  opacity:1;
  font-weight:400;
}
.editor input:focus::placeholder,
.editor textarea:focus::placeholder,
.invoice-editor-popover input:focus::placeholder,
.invoice-editor-popover textarea:focus::placeholder{
  color:var(--nb-document-muted);
}


/* ══════════ v18.9 — uniform section tones, clearer danger/upload actions ══════════ */
.more-menu-label{
  padding:4px 8px 2px;
  color:#667085;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.more-danger-zone{
  margin-top:5px;
  padding-top:8px;
  border-top:1px solid #f0d4d4;
}
.more-danger-zone > span{
  display:block;
  padding:0 8px 5px;
  color:#b42318;
  font-size:10px;
  font-weight:780;
}
.more-popover .clear-invoice-btn{
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#b42318;
  font-weight:800;
}
.more-popover .clear-invoice-btn:hover{
  border-color:#fca5a5;
  background:#ffe4e6;
  color:#991b1b;
}

.item-upload-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border-radius:11px;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  transition:border-color 120ms ease,background 120ms ease,box-shadow 120ms ease,transform 120ms ease;
}
.item-upload-btn:hover{ transform:translateY(-1px); }
.item-upload-btn:focus-within{
  outline:3px solid rgba(74,222,128,.18);
  outline-offset:2px;
}

/* Editor action language: NineBrief green frosted glass.
 * Destructive controls intentionally keep their danger treatment.
 */
.editor .btn:not(.danger),
.editor .ibtn:not(.del),
.editor .column-toggle,
.editor .segment-control button,
.editor .item-upload-btn{
  border:1px solid rgba(60,60,67,.18);
  background:rgba(255,255,255,.58);
  color:#11623c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 3px 10px rgba(15,23,42,.065);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.editor .btn:not(.danger):hover,
.editor .ibtn:not(.del):hover,
.editor .column-toggle:hover,
.editor .segment-control button:hover,
.editor .item-upload-btn:hover{
  border-color:rgba(60,60,67,.30);
  background:rgba(239,255,246,.76);
  color:#0b6b43;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 4px 12px rgba(74,222,128,.12);
}
.editor .segment-control{
  border:1px solid rgba(60,60,67,.10);
  background:rgba(239,243,241,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(10px) saturate(135%);
  -webkit-backdrop-filter:blur(10px) saturate(135%);
}
.editor .segment-control button.active,
.editor .column-toggle[aria-pressed="true"]{
  border-color:rgba(74,222,128,.66);
  background:rgba(226,252,237,.74);
  color:var(--nb-green-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 3px 10px rgba(74,222,128,.15);
}
.editor .ibtn.del{
  background:rgba(255,255,255,.62);
  border-color:rgba(239,68,68,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 3px 9px rgba(15,23,42,.05);
  backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
}
.editor .ibtn.del:hover{
  border-color:rgba(220,38,38,.52);
  background:rgba(255,241,242,.82);
  color:#b42318;
}

/* Keep Add line item compact but easy to find. */
#btn-add-item{
  width:max-content;
  min-height:36px;
  margin-top:4px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(60,60,67,.18);
  border-radius:10px;
  background:rgba(232,255,241,.68);
  color:var(--nb-green-ink);
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 3px 10px rgba(74,222,128,.13);
  backdrop-filter:blur(12px) saturate(155%);
  -webkit-backdrop-filter:blur(12px) saturate(155%);
}
#btn-add-item:hover{
  background:rgba(220,252,231,.86);
  border-color:rgba(60,60,67,.30);
  color:#065f46;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 4px 13px rgba(74,222,128,.19);
}

/* Direct-edit popover: one current component generation. */
.invoice-editor-popover{ position:fixed; z-index:300; width:min(340px,calc(100vw - 24px)); overflow:hidden; border:1px solid rgba(60,60,67,.18); border-radius:18px; background:rgba(255,255,255,.98); color:#1d1d1f; box-shadow:0 18px 60px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.invoice-editor-popover[hidden]{ display:none!important; }
.invoice-editor-head{ display:flex; align-items:center; gap:10px; min-height:46px; padding:13px 14px 10px; border-bottom:1px solid rgba(60,60,67,.10); }
.invoice-editor-head strong{ flex:1; font-size:13px; font-weight:760; letter-spacing:-.012em; }
.invoice-editor-close{ width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; }
.invoice-editor-body{ display:grid; gap:10px; padding:13px 14px; }
.invoice-editor-body .field{ gap:5px; }
.invoice-editor-body .field > span{ color:#6e6e73; font-size:11px; font-weight:680; }
.invoice-editor-body input,.invoice-editor-body select,.invoice-editor-body textarea{ min-height:42px; border-radius:11px; background:#fff; }
.invoice-editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.invoice-editor-grid .wide{ grid-column:1/-1; }
.invoice-editor-foot{ display:flex; justify-content:flex-end; gap:8px; padding:10px 14px 13px; border-top:1px solid rgba(60,60,67,.08); }
.invoice-editor-done{ min-height:38px; padding:7px 13px; border-radius:10px; font:inherit; cursor:pointer; }
.invoice-editor-hint{ margin:2px 0 0; color:#77777d; font-size:11px; line-height:1.45; }
@media screen and (max-width:760px){
  .invoice-editor-popover{ left:12px!important; right:12px!important; bottom:12px!important; top:auto!important; width:auto; }
  .invoice-editor-grid{ grid-template-columns:1fr 1fr; }
}
@media screen and (max-width:430px){
  .invoice-editor-grid{ grid-template-columns:1fr; }
  .invoice-editor-grid .wide{ grid-column:auto; }
}

/* Canvas editing controls use the same green glass family. */
.preview-adjust-btn,
.preview-add-item,
.invoice-editor-close,
.invoice-editor-done{
  border:1px solid rgba(60,60,67,.18);
  background:rgba(247,255,250,.72);
  color:#0b6b43;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 3px 10px rgba(15,23,42,.07);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.preview-adjust-btn:hover,
.preview-add-item:hover,
.invoice-editor-close:hover,
.invoice-editor-done:hover{
  border-color:rgba(60,60,67,.30);
  background:rgba(226,252,237,.84);
  color:#065f46;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 4px 12px rgba(74,222,128,.14);
}
.invoice-editor-done{
  background:rgba(74,222,128,.72);
  color:#063d25;
  font-weight:800;
}

/* Direct canvas entry for the two most important party names. */
.canvas-inline-input{
  display:none;
  width:100%;
  min-width:0;
  min-height:38px;
  margin:0 0 4px;
  padding:7px 10px;
  border:1.5px solid rgba(74,222,128,.72);
  border-radius:9px;
  outline:0;
  background:rgba(247,255,250,.84);
  color:#0f172a!important;
  font-family:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 3px 10px rgba(74,222,128,.10);
  backdrop-filter:blur(10px) saturate(145%);
  -webkit-backdrop-filter:blur(10px) saturate(145%);
  transition:border-color 120ms ease,box-shadow 120ms ease,background 120ms ease;
}
.canvas-inline-input::placeholder{
  color:var(--nb-placeholder);
  opacity:1;
  font-weight:400;
}
.canvas-inline-input:focus{
  border-color:var(--ninebrief-site-green);
  background:rgba(244,255,249,.96);
  box-shadow:
    0 0 0 3px rgba(74,222,128,.16),
    inset 0 1px 0 rgba(255,255,255,.96),
    0 4px 12px rgba(74,222,128,.12);
}
.sheet.edit-mode .canvas-inline-display{ display:none!important; }
.sheet.edit-mode .canvas-inline-input{ display:block; }
.sheet:not(.edit-mode) .canvas-inline-input{ display:none!important; }
.pdf-exporting .sheet.edit-mode .canvas-inline-input,
.pdf-exporting .canvas-inline-input{ display:none!important; }
.pdf-exporting .sheet.edit-mode .canvas-inline-display,
.pdf-exporting .canvas-inline-display{ display:block!important; }

@media print{
  .sheet.edit-mode .canvas-inline-input,
  .canvas-inline-input{ display:none!important; }
  .sheet.edit-mode .canvas-inline-display,
  .canvas-inline-display{ display:block!important; }
}

@media (prefers-reduced-transparency: reduce){
  .editor .btn:not(.danger),
  .editor .ibtn,
  .editor .column-toggle,
  .editor .segment-control button,
  .editor .item-upload-btn,
  .preview-adjust-btn,
  .preview-add-item,
  .invoice-editor-close,
  .invoice-editor-done,
  .canvas-inline-input{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}


/* ══════════ v18.12 — shared site shell with separate invoice actionbar ══════════ */
.topbar.invoice-actionbar{
  position:relative;
  top:auto;
  z-index:35;
  min-height:56px;
  display:flex;
  align-items:center;
  padding:8px clamp(16px,4vw,56px);
  background:var(--nb-white);
  border-bottom:1px solid var(--nb-border);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.topbar.invoice-actionbar .topbar-actions{
  width:100%;
  margin-left:0;
  justify-content:flex-end;
}
@media screen and (max-width:760px){
  .topbar.invoice-actionbar{display:flex;grid-template-columns:none;padding:8px 12px}
  .topbar.invoice-actionbar .topbar-actions{grid-column:auto}
}