/* InvoiceSafe v5 · System tokens / visual refinements.
   Interface-only changes: exported white document pages retain the V4 invoice styling. */
:root{
  --ui-bg:#101823;
  --ui-panel:#1b293b;
  --ui-panel-deep:#152232;
  --ui-input:#142237;
  --ui-border:#354b64;
  --ui-border-soft:#2e4056;
  --ui-primary:#327ba5;
  --ui-primary-hover:#408bb8;
  --ui-strong:#334994;
  --ui-teal:#3c91ac;
  --ui-text:#eef5ff;
  --ui-muted:#adbed2;
  --ui-subtle:#849bb7;
  --ui-focus:#89d0f3;
  --ui-red:var(--ifs-danger);
  --ui-radius:10px;
  color-scheme:dark;
}
html{scrollbar-color:#405d7b #111e2e;scrollbar-width:thin}
*{scrollbar-color:#425e79 #172435;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#152233;border-radius:10px}
*::-webkit-scrollbar-thumb{background:#435f7d;border:2px solid #152233;border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:#5e88ab}
::selection{background:#416f9b;color:#fff}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
/* Editor chrome, matching the dashboard with quiet, readable elevations. */
body:not(.is-home){background:var(--ui-bg);color:var(--ui-text)}
body:not(.is-home) .topbar{background:#172335;border-color:var(--ui-border-soft);padding:11px 22px;gap:9px}
body:not(.is-home) .topbar .brand strong{color:var(--ui-text);letter-spacing:-.02em;font-size:15px}
body:not(.is-home) .topbar .brand small{color:var(--ui-muted)}
body:not(.is-home) .topbar .toolbar .btn{border-radius:8px;font-size:12px;min-height:36px}
body:not(.is-home) .topbar .toolbar .btn:active{transform:translateY(1px)}
body:not(.is-home) .btn{background:#253850;border-color:#425e7a;color:#e5f0fe}
body:not(.is-home) .btn:hover{background:#304968;border-color:#5682ab}
body:not(.is-home) .btn.primary{background:var(--ui-strong);border-color:#647bc1;color:#fff}
body:not(.is-home) .btn.primary:hover{background:#415ab0}
body:not(.is-home) .btn.accent{background:var(--ui-primary);border-color:#4b9ac4;color:#fff}
body:not(.is-home) .btn.accent:hover{background:var(--ui-primary-hover)}
body:not(.is-home) .is-back{background:#203149;border-color:#405c79;color:#e2efff}
body:not(.is-home) .is-back:hover{background:#2c4361}
body:not(.is-home) .save-indicator{color:#a7c0d7;font-size:11px}
body:not(.is-home) .editor{background:#131f2e;border-color:var(--ui-border-soft);padding:22px 19px}
body:not(.is-home) .panel-heading{margin-bottom:19px;gap:10px}
body:not(.is-home) .panel-heading h1{font-weight:650;font-size:24px;letter-spacing:-.02em;color:var(--ui-text);margin:0}
body:not(.is-home) .panel-heading p{color:#b6c7d8;font-size:12px;line-height:1.5;margin-top:6px}
body:not(.is-home) .card{background:var(--ui-panel);border:1px solid #354a61;box-shadow:none;border-radius:11px;padding:18px;margin-bottom:14px}
body:not(.is-home) .card-title{margin-bottom:15px}
body:not(.is-home) .card-title h2{font-size:13px;letter-spacing:0;font-weight:650;color:#f1f6ff}
body:not(.is-home) .chip{border:1px solid #345e79;color:#b6e4fc;background:#1c3a51;border-radius:6px}
body:not(.is-home) .section-note,body:not(.is-home) .helper{color:#aec1d4;font-size:11px}
body:not(.is-home) .field{gap:7px}
body:not(.is-home) .field label,body:not(.is-home) .small-label{color:#c7d7e9;font-size:12px;font-weight:600;letter-spacing:0}
body:not(.is-home) .field input,body:not(.is-home) .field select,body:not(.is-home) .field textarea{
  min-height:41px;font-size:13px;line-height:1.5;padding:10px 11px;
  color:#f0f6ff;background:var(--ui-input);border:1px solid #516882;border-radius:8px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08)
}
body:not(.is-home) .field textarea{min-height:100px;resize:vertical;line-height:1.55;padding:12px}
body:not(.is-home) .entry .field textarea{min-height:118px}
body:not(.is-home) .field input::placeholder,body:not(.is-home) .field textarea::placeholder{color:#869fba}
body:not(.is-home) .field input:hover,body:not(.is-home) .field select:hover,body:not(.is-home) .field textarea:hover{border-color:#7095b9}
body:not(.is-home) .field input:focus,body:not(.is-home) .field select:focus,body:not(.is-home) .field textarea:focus{
  background:#172943;border-color:#83c5e7;box-shadow:0 0 0 3px #306f963b;outline:none
}
body:not(.is-home) .field select{color-scheme:dark}
body:not(.is-home) .centre-card{border:1px solid #3e5671;border-radius:10px;background:#1a2b40;padding:15px;margin:13px 0}
body:not(.is-home) .centre-top{border-bottom:1px solid #3a526e;padding-bottom:12px;margin-bottom:14px}
body:not(.is-home) .centre-name{color:#dcecff;font-size:12px}
body:not(.is-home) .centre-number{background:#326f9e;border-radius:6px;color:#f3f8ff}
body:not(.is-home) .mini-total{font-size:11px;color:#abc0d4}
body:not(.is-home) .mini-total strong{color:#f2f7ff}
body:not(.is-home) .entry{background:var(--ifs-panel-deep)!important;border:1px solid #3e5875;border-radius:9px;padding:14px 13px;margin:12px 0 13px}
body:not(.is-home) .entry + .entry{background:#17283e!important}
body:not(.is-home) .entry-index{background:#263e5e;border-color:#3f658d;color:#b8dafe;font-weight:600;font-size:11px}
body:not(.is-home) .entry-number{color:#b9cbe0}
body:not(.is-home) .type-toggle{background:#132438;border:1px solid #31475f}
body:not(.is-home) .type-toggle button{color:#b2c6da;font-weight:600}
body:not(.is-home) .type-toggle button.selected{background:#31547a;color:#f4f9ff;box-shadow:none}
body:not(.is-home) .summary-mini{background:#172b40;border:1px solid #35506b}
body:not(.is-home) .summary-mini .money-row{color:#bccfe0}
body:not(.is-home) .summary-mini .money-row b{color:#eff6ff}
body:not(.is-home) .summary-mini .money-row.grand{border-color:#3b5975;color:#f2f7ff}
body:not(.is-home) .summary-mini .money-row.grand b{color:#8ad1f3}
/* Collapsing/tinting centres stays useful, but every tint stays in the blue family. */
body.use-centre-tints:not(.is-home) .centre-card.tone-0{background:#1a2e44!important;border-color:#446284!important}
body.use-centre-tints:not(.is-home) .centre-card.tone-1{background:#212e49!important;border-color:#4a5686!important}
body.use-centre-tints:not(.is-home) .centre-card.tone-2{background:#1b3446!important;border-color:#426b84!important}
body.use-centre-tints:not(.is-home) .centre-card.tone-3{background:#202d46!important;border-color:#4a6187!important}
body.use-centre-tints:not(.is-home) .centre-card .entry{background:#14263b!important}
body.use-action-colors:not(.is-home) .btn.add[data-action="add-entry"],body.use-action-colors:not(.is-home) .btn.add[data-action="add-task"]{background:#294c74!important;border:1px solid #5287b6!important;color:#d8eefe!important;font-weight:650}
body.use-action-colors:not(.is-home) .btn.add[data-action="add-entry"]:hover,body.use-action-colors:not(.is-home) .btn.add[data-action="add-task"]:hover{background:#34628f!important}
body.use-action-colors:not(.is-home) .btn.add[data-action="add-group"]{background:#24485d!important;border:1px solid #4a95af!important;color:#d8f5ff!important;font-weight:650}
body.use-action-colors:not(.is-home) .btn.add[data-action="add-group"]:hover{background:#2c647b!important}
body:not(.is-home) .btn.add{border:1px dashed #4d789f;background:#233c58;color:#d3e9fb;font-weight:600;padding:10px}
body:not(.is-home) .btn.add:hover{background:#315475}
body:not(.is-home) .invoice-price-toggle{border:1px solid #39536e;border-radius:8px;background:#16283c;color:#e6f2ff}
body:not(.is-home) .invoice-price-toggle .price-toggle-copy strong{color:#e3eefc}
/* Splitter & documents zone */
@media(min-width:1021px){body:not(.is-home) .workspace{grid-template-columns:minmax(310px,var(--editor-width,33.333%)) 10px minmax(0,1fr)}}
.workspace-divider{background:#172941;border-left:1px solid #344e6b;border-right:1px solid #344e6b;transition:background .15s}
.workspace-divider:after{height:76px;width:4px;left:3px;top:calc(50% - 38px);background:#477ca8;box-shadow:0 0 0 1px #79b5d03b;border-radius:5px}
.workspace-divider:hover,.workspace-divider:focus-visible{background:#29476a;outline:none}
.workspace-divider:hover:after,.workspace-divider:focus-visible:after{background:#a3d3f2}
body:not(.is-home) .preview-zone{background:#172435;padding:20px 22px 64px;min-width:0}
body:not(.is-home) .preview-heading{max-width:none;margin:0 0 24px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
body:not(.is-home) .preview-heading h2{font-size:14px;color:#f0f5ff;font-weight:650;margin:0}
body:not(.is-home) .preview-heading small{font-size:11px;color:#9fb5cb;line-height:1.5;margin-top:5px}
.preview-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
body:not(.is-home) .page-count{background:#20344b;border:1px solid #3d5975;color:#bcd1e5;border-radius:7px;font-size:11px;padding:7px 10px;white-space:nowrap}
.zoom-toolbar{display:flex;align-items:center;background:#1d3047;border:1px solid #45617e;border-radius:9px;overflow:hidden;height:38px}
.zoom-toolbar button{height:36px;width:39px;border:0;background:transparent;color:#d8eaff;display:grid;place-items:center;cursor:pointer}
.zoom-toolbar button svg{height:18px;width:18px}
.zoom-toolbar button:hover:not(:disabled){background:#31537a;color:#fff}
.zoom-toolbar button:disabled{color:#6d8298;cursor:not-allowed}
.zoom-toolbar output{min-width:54px;color:#f0f6ff;display:block;text-align:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.zoom-fit{height:38px;min-width:48px;border:1px solid #426080;border-radius:8px;background:#243d58;color:#d6eafa;font-weight:600;font-size:12px;cursor:pointer}
.zoom-fit:hover{background:#315979}
body:not(.is-home) .preview-canvas{display:flex;align-items:center;gap:20px;min-height:120px}
.page-frame{position:relative;flex:none}
.page-frame>.paper{position:absolute;top:0;left:0;margin:0!important;transform-origin:top left!important;box-shadow:0 13px 38px rgba(0,0,0,.23)}
.preview-tool-float{right:19px;bottom:18px}
.preview-tool-float>button{width:43px;height:43px;font-size:14px;border-radius:10px;background:#223952;color:#d1e5f7;border:1px solid #476588;box-shadow:0 8px 20px #030b1655;font-weight:700}
.preview-tool-float>button:hover{background:#355677;color:#fff}
.preview-size-panel{background:#1d2d41;border:1px solid #486583;border-radius:11px;color:#e7effc}
/* Settings and saved-library surfaces: no more mismatched charcoal grey. */
.settings-drawer,.library-drawer{background:var(--ifs-panel);border-color:#3e5673;color:#eaf3ff}
.settings-top,.library-heading,.settings-section,.library-actions,.library-tip{border-color:#344963}
.settings-top h2,.library-heading h2{color:#f0f6ff;font-weight:650}
.settings-section h3{color:#e5f0ff;font-weight:650}
.settings-desc,.setting-text small,.library-heading p,.library-tip{color:#b6c8db}
.setting-text strong{color:#eef5ff}
.settings-select{background:#132438;border-color:#526b88;border-radius:8px;color:#e9f3ff}
.library-item{background:#203249;border:1px solid #435c79;border-radius:10px}
.library-item.current{background:#273f5c;border-color:#6287b1}
.library-item-title{color:#f0f6ff}
.library-item-meta{color:#adc2d7}
.library-empty{color:#aec2d6}
.switch input{accent-color:var(--ui-primary)}
body:not(.is-home) .is-editor-readonly{background:#532c38;border-color:#a15163;color:#ffe0e5}
body:not(.is-home) .is-editor-readonly button{background:#8b3e53;border-color:#bf6177}
/* Compact, legible dashboard. Cards use approx half the previous footprint. */
#is-dashboard{background:#101823;color:#e9f2fe}
.is-top{background:#172234;border-color:#2e4258}
.is-top .is-brand-type{font-size:21px;letter-spacing:-.03em}
.is-browser-label{font-size:12px}
.is-shell{max-width:1440px;padding:40px 28px 64px}
.is-page-heading h1{font-size:42px;letter-spacing:-.025em;font-weight:650}
.is-page-heading p{font-size:13px;color:#b5c8df;margin-top:9px}
.is-page-count{font-size:13px}
.is-page-count span{font-size:24px}
.is-search{max-width:390px}
.is-search input,.is-sort-label select{font-size:13px;height:43px;color:#e7f0fd;border-color:#3b526e}
.is-sort-label{font-size:12px;color:#bdd0e3}
.is-filters{gap:6px;margin-bottom:24px}
.is-filter{font-size:12px;font-weight:600;padding:9px 14px}
.is-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:13px}
.is-grid.is-comfortable{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}
.is-document{background:#1d2b3d;border-color:#334961;border-radius:10px;box-shadow:none}
.is-document:hover{transform:translateY(-2px);border-color:#5f8bb5;box-shadow:0 10px 24px #02091355}
.is-preview,.is-comfortable .is-preview{height:149px;padding:5px;background:#233349;border-color:#334e68}
.is-real-thumb{width:110px;height:143px;border-radius:2px;box-shadow:0 5px 13px #0005}
.is-real-thumb .paper{transform:scale(.135)!important}
.is-comfortable .is-real-thumb{transform:scale(1.02)}
.is-demo-chip{font-size:8px;top:7px;left:7px;padding:3px 5px}
.is-card-info{padding:12px 11px 11px;min-height:95px}
.is-card-heading{gap:4px}
.is-card-heading strong{font-size:13px;font-weight:650}
.is-card-location{font-size:12px;margin-top:9px}
.is-card-meta{font-size:10px;gap:5px;white-space:normal;margin-top:8px;line-height:1.3}
.is-locked-status{font-size:9px;background:#672b39;color:#ffcad1;border-color:#b35364;padding:3px 4px}
.is-doc-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:5px;padding:8px 9px 10px;min-height:57px}
.is-doc-actions button{font-size:11px;padding:7px 7px;border-color:#415c79;background:#263b54;color:#e1eefc}
.is-doc-actions .is-lock-toggle{margin-left:auto;color:#cee0f2;padding-inline:6px}
.is-doc-actions .is-lock-toggle.locked{color:#ffe6e9;background:#7e3344;border-color:#bf5c70}
.is-doc-actions .is-more-button{font-size:17px;padding:4px 6px}
.is-new-card{min-height:309px;background:#192b3e;border-color:#537ea3;gap:12px}
.is-new-card:hover{background:#233b54;border-color:#91c5e4}
.is-new-plus{background:#2d6592;border-color:#538db8;width:49px;height:49px;border-radius:10px}
.is-new-plus svg{width:24px;height:24px}
.is-new-card strong{font-size:15px;font-weight:650}
.is-new-card small{font-size:11px;color:#b0cbe1}
.is-example-caption{font-size:11px;color:#a5bad0}
/* responsive grid respects readable controls and touch targets */
@media(max-width:1320px){.is-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.is-grid.is-comfortable{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1120px){.is-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.is-grid.is-comfortable{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:960px){.is-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.is-grid.is-comfortable{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.is-grid.is-comfortable{grid-template-columns:repeat(3,minmax(0,1fr))}
 .is-shell{padding:28px 18px 50px}
 .is-page-heading h1{font-size:34px}
 body:not(.is-home) .preview-heading{align-items:flex-start}
 body:not(.is-home) .preview-zone{padding:16px 12px 34px}
 .zoom-toolbar button{width:36px}
}
@media(max-width:520px){
 .is-grid,.is-grid.is-comfortable{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .is-shell{padding:25px 14px 48px}
 .is-page-heading h1{font-size:31px}
 .is-page-heading p{font-size:12px}
 .is-sort-label select{max-width:135px;font-size:11px}
 .is-search input{font-size:12px}
 .is-preview,.is-comfortable .is-preview{height:135px}
 .is-real-thumb{transform:scale(.88)}
 .is-comfortable .is-real-thumb{transform:scale(.9)}
 .is-card-info{padding:10px 9px;min-height:94px}
 .is-card-heading strong{font-size:12px}
 .is-card-location{font-size:11px}
 .is-doc-actions{padding:8px 6px;min-height:60px;gap:4px}
 .is-doc-actions button{font-size:10px;padding:7px 6px}
 .is-new-card{min-height:294px}
 .is-card-meta{font-size:9px}
 .is-filter{font-size:11px;padding:8px 11px}
 body:not(.is-home) .preview-heading{gap:12px}
 body:not(.is-home) .preview-heading small{font-size:10px}
 .preview-controls{gap:7px}
 .zoom-toolbar output{min-width:44px}
 body:not(.is-home) .page-count{padding:7px 7px}
 body:not(.is-home) .editor{padding:17px 13px}
 body:not(.is-home) .card{padding:14px}
 body:not(.is-home) .field textarea{min-height:95px}
}
@media print{
 .preview-controls,.zoom-toolbar,.zoom-fit{display:none!important}
 .page-frame>.paper{position:static!important;transform:none!important;box-shadow:none!important}
 html,body{color-scheme:light!important;background:#fff!important}
}

/* V5.1 - editorial controls and precise shared dashboard/editor refinements */
#is-dashboard{
  background:linear-gradient(135deg,#121b2a 0%,#0e1724 46%,#15263b 100%);
  min-height:100vh;
}
.is-top{background:linear-gradient(90deg,#172335,#1a2940)}
.is-shell{padding-top:43px}
.is-page-heading h1{font-size:44px}
.is-page-heading p{font-size:14px}
.is-filter{font-size:13px}
.is-card-heading strong{font-size:14px}
.is-card-location{font-size:12.5px}
.is-doc-actions .is-lock-toggle svg{width:14px;height:14px;vertical-align:middle}
.is-doc-actions .is-lock-toggle.locked{background:#7e3344;color:#fff0f1;border-color:#de6f82}
/* The editor brand matches the main dashboard rather than introducing a second logo. */
body:not(.is-home) .topbar .brand{display:flex;align-items:center;gap:12px}
.editor-logo-mark{color:#86c5e5;display:inline-flex;width:26px;height:28px;align-items:center}
.editor-logo-mark svg{width:24px;height:24px}
body:not(.is-home) .topbar .brand .editor-logo-type{display:flex;flex-direction:column;gap:3px}
body:not(.is-home) .topbar .brand .editor-logo-type strong{font-size:19px;font-weight:670;letter-spacing:-.03em;white-space:nowrap}
.editor-logo-type strong span{color:#a4beda;font-weight:420}
.editor-logo-type small{font-size:10px;color:var(--ui-muted)}
#save-invoice.icon-action{display:grid;place-items:center;width:38px;min-width:38px;padding:7px}
#save-invoice svg,#export-menu-trigger svg{width:17px;height:17px}
.editor-export-anchor{position:relative;display:flex;flex:none}
#export-menu-trigger{display:flex;align-items:center;gap:8px;min-height:38px}
.editor-export-menu{position:absolute;right:0;top:calc(100% + 8px);width:235px;padding:6px;background:#1b2d43;border:1px solid #527497;border-radius:11px;box-shadow:0 15px 35px #0007;z-index:21}
.editor-export-menu[hidden]{display:none}
.editor-export-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;background:transparent;border:0;color:#edf5ff;border-radius:7px;padding:12px;text-align:left;font:inherit;font-size:12px;cursor:pointer}
.editor-export-menu button:hover{background:#2d4d6d}
.editor-export-menu button span{color:#93b2d1}
/* The resize rail disappears; only the centered grip is visible and draggable. */
@media(min-width:1021px){body:not(.is-home) .workspace{grid-template-columns:minmax(310px,var(--editor-width,33.333%)) 10px minmax(0,1fr)}}
.workspace-divider,.workspace-divider:hover,.workspace-divider:focus-visible{background:transparent!important;border:0!important;outline:none}
.workspace-divider:after{display:none}
.splitter-grip{position:absolute;top:50%;left:50%;height:69px;width:6px;transform:translate(-50%,-50%);border-radius:7px;background:#5789b0;border:1px solid #83bbdf;box-shadow:0 2px 9px #060f1b55;cursor:col-resize;touch-action:none;transition:background .15s,width .15s}
.splitter-grip:hover,.workspace-divider:focus-visible .splitter-grip{background:#a3d7f1;width:7px}
/* Larger, calmer form groups and color-matched controls. */
body:not(.is-home) .editor{padding:26px 22px;background:#131f30}
body:not(.is-home) .card{margin-bottom:23px;padding:21px 19px;background:#1b2b40;border-color:#3b536f}
body:not(.is-home) .centre-card{margin:18px 0;padding:18px 16px}
body:not(.is-home) .entry{margin:17px 0;padding:16px}
body:not(.is-home) .field textarea{min-height:130px}
body:not(.is-home) .entry .field textarea{min-height:146px}
body:not(.is-home) .painting-task textarea{min-height:110px}
body:not(.is-home) .field textarea,body:not(.is-home) .field input,body:not(.is-home) .field select{background:#14263b;border-color:#587391}
body:not(.is-home) .field textarea:hover,body:not(.is-home) .field input:hover{border-color:#8ab6d6}
body:not(.is-home) .field textarea:focus,body:not(.is-home) .field input:focus{background:#1c3550}
body:not(.is-home) .stack{gap:16px}
body:not(.is-home) .settings-content{background:#18283c}
body:not(.is-home) .settings-section{border-color:#3a536d}
body:not(.is-home) .setting-row{padding:16px 0}
body:not(.is-home) .settings-top{background:#1b2e46}
body:not(.is-home) .settings-select{background:#14263b;border-color:#547391}
body:not(.is-home) .settings-drawer .btn{background:#2a4764;border-color:#537d9f;color:#eef7ff}
/* Entire cards can be collapsed by clicking their header. */
.editor-section-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:25px;user-select:none}
.editor-section-toggle h2{flex:1}
.editor-section-chevron{height:17px;width:17px;margin-left:auto;flex:none;color:#8eb8d7;transition:transform .18s ease}
.is-collapsed .editor-section-chevron{transform:rotate(-90deg)}
.editor-section-toggle:hover h2{color:#a9dcfa!important}
.editor-section-toggle:focus-visible{outline:2px solid #8ec8ea;outline-offset:5px;border-radius:4px}
.card.is-collapsed .editor-section-body{display:none}
.card.is-collapsed .card-title{margin-bottom:0}
/* Keep zoom tools visible as the preview itself scrolls. */
body:not(.is-home) .preview-zone{position:relative;background:#172538;padding:21px 24px 90px}
body:not(.is-home) .preview-heading{position:sticky;top:-22px;z-index:7;align-items:center;padding:14px 18px;margin:-14px -18px 24px;background:#172538;border-bottom:1px solid #35506a;box-shadow:0 8px 16px #0b14252b}
.preview-controls{gap:8px}
.preview-pencil{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 12px;border-radius:8px;background:#20374f;border:1px solid #4e6c89;color:#d4e7fa;font-size:12px;font-weight:600;cursor:pointer}
.preview-pencil svg{width:16px;height:16px}
.preview-pencil:hover{background:#2d4c6c}
.preview-pencil.active{background:#326087;border-color:#87bedf;color:#fff}
.preview-pencil:disabled{opacity:.55;cursor:not-allowed}
/* Contextual toolbar anchors to the bottom of the preview viewport, not the paper. */
.preview-text-tools{position:sticky;bottom:12px;z-index:7;margin:18px auto 0;width:max-content;max-width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#22364f;border:1px solid #5b83aa;border-radius:12px;box-shadow:0 12px 32px #010b1780;padding:11px 13px;color:#e3f0ff;font-size:12px}
.preview-text-tools[hidden]{display:none}
.preview-text-tools .text-tools-name{display:flex;flex-direction:column;max-width:170px;min-width:100px;gap:3px;color:#adc6dc;font-size:10px}
.preview-text-tools .text-tools-name strong{color:#f3f8ff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-text-tools label{display:flex;gap:8px;align-items:center;color:#c5d9ec}
.preview-text-tools input[type=color]{width:37px;height:32px;cursor:pointer;background:#172a40;border:1px solid #597796;padding:3px;border-radius:7px}
.preview-text-tools select{background:#172a40;border:1px solid #597796;color:#ebf5ff;border-radius:7px;padding:7px 8px;font-size:12px}
.preview-text-tools button{background:#2a4865;color:#e0efff;border:1px solid #58789c;border-radius:7px;padding:8px 10px;cursor:pointer}
.preview-text-tools button:hover{background:#376086}
.paper [data-preview-edit].is-selected-text{outline:2px solid #4b95c1;outline-offset:2px;border-radius:2px;background:#d6ebf750}
/* Font-size popover: subtle fade, closes on outside pointerdown. */
.preview-size-panel{opacity:0;transform:translateY(7px) scale(.985);transition:opacity .19s ease,transform .19s ease;box-shadow:0 16px 42px #020915a0}
.preview-size-panel.is-visible{opacity:1;transform:translateY(0) scale(1)}
.preview-size-panel[hidden]{display:none!important}
.preview-size-panel strong{font-size:13px}
/* Save/discard/continue modal uses the same UI vocabulary. */
.is-leave-buttons{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:24px}
.is-leave-buttons button{border-radius:8px;background:#253d58;color:#eaf5ff;border:1px solid #526d89;padding:11px 14px;cursor:pointer}
.is-leave-buttons .is-btn-primary{background:#3677a4;border-color:#548fb8}
@media(max-width:760px){
 .preview-pencil span{display:none}
 body:not(.is-home) .preview-heading{top:0;padding:12px 8px;margin:-8px -8px 18px}
 .preview-text-tools{position:sticky;bottom:8px}
 body:not(.is-home) .editor{padding:16px 13px}
 body:not(.is-home) .card{padding:17px 14px;margin-bottom:18px}
}
@media(max-width:520px){
 .is-page-heading h1{font-size:34px}
 .preview-text-tools{width:100%;gap:8px;padding:10px}
 .preview-text-tools .text-tools-name{flex-basis:100%;max-width:none}
 .is-leave-buttons button{flex:1}
}
@media(prefers-reduced-motion:reduce){.preview-size-panel,.editor-section-chevron{transition:none!important}}

/* InvoiceSafe's UI typography. Invoices retain their separate print typography. */
:root{--invoice-ui-font:'Poppins','Avenir Next','Century Gothic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body:not(.is-home) :is(.topbar,.editor,.editor-cards,.settings-drawer,.library-drawer,.preview-heading,.preview-controls,.preview-tool-float,.preview-size-panel,.preview-text-tools,.is-editor-readonly,.is-modal,.toast){font-family:var(--invoice-ui-font)!important}
body:not(.is-home) :is(.topbar,.editor,.settings-drawer,.library-drawer,.preview-heading,.preview-controls,.preview-tool-float,.preview-size-panel,.preview-text-tools,.is-editor-readonly,.is-modal) :is(button,input,textarea,select,label){font-family:var(--invoice-ui-font)!important}
/* Explicitly isolate the actual invoice document and thumbnails from UI font changes. */
body:not(.is-home) .paper, body:not(.is-home) .paper *, #is-dashboard .paper, #is-dashboard .paper *{font-family:Arial,Helvetica,sans-serif!important}
.lock-svg{width:15px;height:15px;flex:none;vertical-align:middle;display:inline-block}
#is-editor-lock{display:inline-flex;align-items:center;gap:7px}
#is-editor-lock.is-locked{background:#723041!important;border-color:#c3687b!important;color:#ffe4ea!important}
.library-item-title .lock-svg{color:#ff9ba9;margin-right:5px}
.is-unlock-emblem svg{width:23px;height:23px;color:#ffccd5}
.is-editor-readonly .readonly-message{display:inline-flex;align-items:center;gap:9px}
.is-editor-readonly .readonly-message svg{width:16px;height:16px;flex:none}
@media(max-width:700px){.is-editor-readonly .readonly-message{font-size:11px}}
/* Editor export menu must layer above the sticky preview toolbar. */
body:not(.is-home) .topbar{position:relative;z-index:40}
body:not(.is-home) .editor-export-menu{z-index:41}
/* No full-height resize rail: only the small blue grip is visible. */
@media(min-width:1021px){
  body:not(.is-home) .workspace{grid-template-columns:minmax(310px,var(--editor-width,33.333%)) 0 minmax(0,1fr)}
  .workspace-divider{width:0;overflow:visible;pointer-events:none;z-index:5}
  .splitter-grip{pointer-events:auto;min-width:6px}
}
/* Keep the invoice readable while editing: show field boundaries on demand. */
.paper [data-preview-edit][contenteditable="true"]{outline:1px dashed transparent;transition:outline-color .12s,background-color .12s}
.paper [data-preview-edit][contenteditable="true"]:hover{outline-color:#8fbed7;background:#e8f4fb80}
.paper [data-preview-edit][contenteditable="true"]:focus{outline:2px solid #4b95c1;background:#dceef780}
.paper [data-preview-edit].is-selected-text{outline:2px solid #4b95c1!important;background:#d6ebf740}
@media(prefers-reduced-motion:reduce){.paper [data-preview-edit][contenteditable="true"]{transition:none}}
/* On phones there is no independently scrolling preview pane: keep selection tools reachable. */
@media(max-width:760px){
 body:not(.is-home) .preview-text-tools:not([hidden]){position:fixed;left:12px;right:12px;bottom:12px;width:auto;max-height:43vh;overflow-y:auto;z-index:45;margin:0;padding:11px 12px}
}