/* =========================================================================
   SaveResume V16 — shared editor core (CSS)
   One stylesheet, shared by every template. Template files only add a
   small <style id="theme"> block for colors/fonts/decorative shapes —
   they never touch layout mechanics, print handling, or toolbar UI.
   ========================================================================= */

:root{
  --sr-blue:#2563eb;
  --sr-ink:#1f2937;
  --sr-muted:#6b7280;
  --sr-line:#e5e7eb;
  --sr-bg:#f1f3f6;
  --sr-white:#fff;
  --sr-radius:10px;
  --sr-shadow:0 10px 40px rgba(15,23,42,.12);
  --sr-toolbar-h:56px;
  --sr-mobile-dock-h:60px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--sr-bg);color:var(--sr-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block}
button{font:inherit}

/* ---------------------------------------------------------------------- *
 * Top toolbar
 * ---------------------------------------------------------------------- */
.sr-toolbar{
  position:sticky;top:0;z-index:40;
  height:var(--sr-toolbar-h);
  display:flex;align-items:center;gap:10px;
  padding:0 16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sr-line);
}
.sr-logo{display:flex;align-items:center;gap:8px;margin-right:8px;white-space:nowrap;text-decoration:none;cursor:pointer;flex:0 0 auto}
.sr-mode-link{display:flex;align-items:center;font-size:12.5px;font-weight:700;color:#667085;background:#f1f4f9;padding:7px 12px;border-radius:7px;text-decoration:none;white-space:nowrap;flex:0 0 auto;margin-right:6px}
.sr-mode-link:hover{color:#172033;background:#e7ebf2}
.sr-logo:hover{opacity:.82}
.sr-logo img{height:26px;width:auto;display:block}
.sr-toolbar .sr-spacer{flex:1}
.sr-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--sr-line);
  background:#fff;color:var(--sr-ink);font-size:13px;font-weight:600;cursor:pointer;
}
.sr-btn:hover{border-color:#c9cfda}
.sr-btn:disabled{opacity:.4;cursor:default}
.sr-btn.primary{background:var(--sr-blue);border-color:var(--sr-blue);color:#fff}
.sr-btn.primary:hover{background:#1d4ed8}
.sr-btn.icon{width:34px;padding:0;justify-content:center}
.sr-zoom{display:flex;align-items:center;gap:8px;border:1px solid var(--sr-line);border-radius:8px;height:34px;padding:0 10px;background:#fff}
.sr-zoom span{font-size:13px;font-weight:600;width:42px;text-align:center}
.sr-select{height:34px;border-radius:8px;border:1px solid var(--sr-line);background:#fff;padding:0 10px;font-size:13px;font-weight:600;color:var(--sr-ink)}

/* Export split-button: primary action + caret opening a menu of
   Print / Download PDF / Download DOCX. */
.sr-export-menu{position:relative;display:flex;flex:0 0 auto}
.sr-export-menu .sr-btn.primary{border-radius:8px 0 0 8px}
.sr-export-caret{
  border-radius:0 8px 8px 0!important;padding:0 10px!important;border-left:1px solid rgba(255,255,255,.3)!important;
  font-size:10px;
}
.sr-export-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:90;
  width:280px;background:#fff;border:1px solid var(--sr-line);border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.18);padding:6px;
}
.sr-export-dropdown.open{display:block}
.sr-export-dropdown button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:10px 12px;border:0;background:none;border-radius:8px;cursor:pointer;text-align:left;
}
.sr-export-dropdown button:hover{background:#f3f6fb}
.sr-export-item-title{font-size:13.5px;font-weight:700;color:var(--sr-ink)}
.sr-export-item-note{font-size:11.5px;color:var(--sr-muted)}

/* ---------------------------------------------------------------------- *
 * Workspace: left rail, canvas, right inspector
 * ---------------------------------------------------------------------- */
.sr-workspace{display:flex;min-height:calc(100vh - var(--sr-toolbar-h))}

.sr-rail{
  width:76px;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 8px;background:#fff;border-right:1px solid var(--sr-line);
}
.sr-rail-btn{
  width:60px;padding:10px 4px 8px;border:0;background:transparent;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:var(--sr-muted);
}
.sr-rail-btn svg{width:20px;height:20px}
.sr-rail-btn span{font-size:10.5px;font-weight:700}
.sr-rail-btn:hover{background:#f3f4f6;color:var(--sr-ink)}
.sr-rail-btn.active{background:#eaf0ff;color:var(--sr-blue)}

.sr-canvas-outer{flex:1;overflow:auto;padding:36px 24px;display:flex;justify-content:center}
.sr-canvas-scale{transform-origin:top center}

.sr-inspector{
  width:260px;flex:0 0 auto;background:#fff;border-left:1px solid var(--sr-line);
  padding:16px;display:none;
}
.sr-inspector.open{display:block}
.sr-inspector [data-sr-panel]{display:none}
.sr-inspector [data-sr-panel].open{display:block}
.sr-inspector h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sr-muted);margin:14px 0 8px}
.sr-inspector h4:first-child{margin-top:0}
.sr-inspector-title{font-weight:800;font-size:14px;margin-bottom:2px}
.sr-font-select{width:100%;height:36px;border-radius:8px;border:1px solid var(--sr-line);padding:0 10px;font-size:13px}
.sr-size-row{display:flex;align-items:center;gap:10px}
.sr-size-row input[type=range]{flex:1}
.sr-size-number{
  width:56px;height:32px;border-radius:8px;border:1px solid var(--sr-line);text-align:center;
  font-size:13px;font-weight:600;font-family:inherit;flex:0 0 auto;
}
.sr-size-number:focus{outline:none;border-color:var(--sr-blue)}
.sr-color-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sr-color-input{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--sr-line);padding:2px;cursor:pointer;
  background:#fff;flex:0 0 auto;
}
.sr-color-presets{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.sr-color-presets button{
  width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;
}
.sr-color-presets button:hover{transform:scale(1.12)}
.sr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sr-tool-toggle{
  height:38px;border:1px solid var(--sr-line);border-radius:8px;background:#fff;
  font-size:12.5px;font-weight:700;cursor:pointer;color:var(--sr-ink);
}
.sr-tool-toggle:hover{border-color:#c9cfda}
.sr-tool-toggle.active{background:var(--sr-ink);color:#fff;border-color:var(--sr-ink)}
.sr-inspector-hint{font-size:11.5px;color:var(--sr-muted);line-height:1.5;margin-top:14px}

/* ---------------------------------------------------------------------- *
 * The physical page
 * ---------------------------------------------------------------------- */
.sr-page-shell{background:#fff;box-shadow:var(--sr-shadow);position:relative}
.page{
  width:215.9mm;
  min-height:279.4mm;
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* ---------------------------------------------------------------------- *
 * Editable elements
 * ---------------------------------------------------------------------- */
[contenteditable="true"]{outline:none;cursor:text;transition:box-shadow .1s ease}
[contenteditable="true"]:hover{box-shadow:0 0 0 2px rgba(37,99,235,.18);border-radius:3px}
[contenteditable="true"]:focus{box-shadow:0 0 0 2px rgba(37,99,235,.55);border-radius:3px}

/* Photo well */
.sr-photo-wrap{position:relative;display:block}
.sr-photo{
  position:relative;cursor:pointer;overflow:hidden;background:#e5e7eb;
  display:flex;align-items:center;justify-content:center;
}
.sr-photo img{width:100%;height:100%;object-fit:cover;display:none}
.sr-photo.has-photo img{display:block}
.sr-photo.has-photo .sr-photo-placeholder{display:none}
.sr-photo-placeholder{font-size:11px;color:#8a93a3;text-align:center;padding:0 10px;line-height:1.4;font-weight:600}
.sr-photo:hover::after{
  content:"Change photo";position:absolute;inset:0;background:rgba(15,23,42,.45);
  color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.sr-photo.has-photo:hover::after{content:"Change photo"}
.sr-photo.sr-resizing::after{content:none!important}

/* Photo resize handle — a small rounded-square badge with a diagonal
   double-arrow icon (the standard "resize" glyph), sitting just
   outside the photo's own corner so a circular photo's overflow:hidden
   clipping never cuts it off. Always visible rather than hover-gated:
   an earlier version only appeared while the cursor was over the
   photo itself, which made it hard to actually reach while dragging
   toward the corner — the cursor would leave the (often small,
   circular) photo before reaching the handle, and it would vanish
   mid-drag. */
.sr-photo-resize{
  position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;padding:0;
  border-radius:8px;background:#fff;border:1.5px solid var(--sr-blue);
  color:var(--sr-blue);box-shadow:0 2px 8px rgba(15,23,42,.28);
  display:flex;align-items:center;justify-content:center;
  cursor:nwse-resize;z-index:20;
}
.sr-photo-resize:hover{background:var(--sr-blue);color:#fff}
.sr-photo-resize svg{width:15px;height:15px}

/* Repeatable item controls (experience/education/skill rows) */
.sr-repeat{position:relative}
.sr-repeat-controls{
  position:absolute;top:2px;right:2px;display:none;gap:4px;z-index:5;
}
.sr-repeat:hover .sr-repeat-controls{display:flex}
.sr-repeat-btn{
  width:22px;height:22px;border-radius:6px;border:1px solid var(--sr-line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sr-muted);
  box-shadow:0 2px 6px rgba(15,23,42,.12);font-size:14px;line-height:1;padding:0;
}
.sr-repeat-btn:hover{color:var(--sr-ink);border-color:#c9cfda}
.sr-repeat-btn.danger:hover{color:#dc2626;border-color:#fca5a5}

/* Generic body/list styling for user-added sections. Deliberately
   neutral and color:inherit so it reads reasonably against either a
   light main column or a dark/colored sidebar without per-template
   tuning — the section *heading* still borrows the template's own
   heading class (passed via data-sr-heading-class on the column) so
   the most visually distinctive part still matches; only the body
   copy uses this generic fallback. */
.sr-generic-body{font-size:10.5px;line-height:1.65;color:inherit;opacity:.92}
.sr-generic-list{margin:6px 0 0;padding-left:16px;font-size:10.5px;line-height:1.65;color:inherit;opacity:.92}
.sr-generic-list li{margin-bottom:2px}
.sr-generic-section{margin-top:20px}

/* Timeline-shaped generic section (used where a column's heading
   template is "timeline", e.g. Navy Timeline's right column) */
.sr-tl-generic{display:grid;grid-template-columns:20px 1fr;gap:14px;margin-bottom:18px}
.sr-tl-generic .sr-tl-marker{display:flex;flex-direction:column;align-items:center}
.sr-tl-generic .sr-tl-dot{width:16px;height:16px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.85}
.sr-tl-generic .sr-tl-line{width:1px;flex:1;background:currentColor;opacity:.25;margin-top:4px}

/* Section show/hide (used by the Section rail tool + panel) */
.sr-section[data-hidden="true"]{display:none}
.sr-section-row{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:8px 4px;border-bottom:1px solid var(--sr-line);font-size:13px;
}
.sr-section-row:last-child{border-bottom:0}
.sr-section-name-input{
  border:1px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--sr-ink);
  padding:4px 6px;border-radius:6px;width:100%;min-width:0;font-family:inherit;
}
.sr-section-name-input:hover{border-color:var(--sr-line)}
.sr-section-name-input:focus{outline:none;border-color:var(--sr-blue);background:#fff}
.sr-section-row-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.sr-switch{width:34px;height:20px;border-radius:999px;background:#d7dbe3;position:relative;cursor:pointer;border:0;flex:0 0 auto}
.sr-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .12s ease}
.sr-switch.on{background:var(--sr-blue)}
.sr-switch.on::after{left:16px}
.sr-section-del{
  width:22px;height:22px;border-radius:6px;border:1px solid transparent;background:transparent;
  color:var(--sr-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;
  flex:0 0 auto;
}
.sr-section-del:hover{color:#dc2626;border-color:#fca5a5;background:#fef2f2}

.sr-add-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--sr-line)}
.sr-add-section-toggle{
  width:100%;height:36px;border-radius:8px;border:1px dashed #c9cfda;background:#fff;color:var(--sr-blue);
  font-size:13px;font-weight:700;cursor:pointer;
}
.sr-add-section-toggle:hover{background:#f5f8ff;border-color:var(--sr-blue)}
.sr-add-section-form{display:none;margin-top:10px}
.sr-add-section-form.open{display:block}
.sr-add-section-form input[type=text]{
  width:100%;height:36px;border-radius:8px;border:1px solid var(--sr-line);padding:0 10px;font-size:13px;
  margin-bottom:10px;font-family:inherit;
}
.sr-add-section-form input[type=text]:focus{outline:none;border-color:var(--sr-blue)}
.sr-column-choice{display:flex;gap:8px;margin-bottom:10px}
.sr-column-choice button{
  flex:1;height:34px;border-radius:8px;border:1px solid var(--sr-line);background:#fff;font-size:12.5px;
  font-weight:700;cursor:pointer;color:var(--sr-ink);
}
.sr-column-choice button.selected{background:var(--sr-ink);color:#fff;border-color:var(--sr-ink)}
.sr-add-section-actions{display:flex;gap:8px}
.sr-add-section-actions .sr-btn{flex:1;justify-content:center}

/* Move tool — drag-to-reorder */
.sr-move-mode [draggable="true"]{cursor:grab}
.sr-move-mode [draggable="true"]:hover{outline:1.5px dashed #9fb3ff;outline-offset:2px}
.sr-move-mode [draggable="true"]:active{cursor:grabbing}
.sr-drop-before{box-shadow:inset 0 3px 0 0 var(--sr-blue)!important}
.sr-drop-after{box-shadow:inset 0 -3px 0 0 var(--sr-blue)!important}

/* Toast */
.sr-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:#111827;color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:200;opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.sr-toast.show{opacity:1}

/* ---------------------------------------------------------------------- *
 * Mobile
 * ---------------------------------------------------------------------- */
@media (max-width:860px){
  html{ -webkit-text-size-adjust:100%; touch-action:manipulation; }

  /* Top toolbar: keep it usable rather than letting buttons wrap onto
     two lines (the "Export / PDF" stacking bug). Let it scroll
     horizontally instead of wrapping, shrink the button chrome, and
     drop the least essential controls. */
  .sr-toolbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:6px;
    padding:0 8px;
  }
  .sr-toolbar::-webkit-scrollbar{display:none}
  .sr-logo{margin-right:2px}
  .sr-logo img{height:22px}
  .sr-btn{padding:0 10px;font-size:12.5px;white-space:nowrap;flex:0 0 auto}
  .sr-zoom{flex:0 0 auto}
  .sr-zoom span{width:34px}
  .sr-select{display:none}

  /* The Export controls are the single most important action in the
     app — they must never require scrolling the toolbar sideways to
     find. Pin the whole split-button to the right edge; everything
     less critical scrolls underneath. */
  .sr-export-menu{
    position:sticky;right:0;z-index:2;
    box-shadow:-14px 0 14px -6px rgba(255,255,255,.95);
  }

  /* The left rail doesn't fit on a phone; it's replaced by the bottom
     dock below. Leave room at the bottom of the canvas for that dock so
     it never overlaps the resume itself. */
  .sr-rail{display:none}
  .sr-workspace{padding-bottom:64px}
  .sr-canvas-outer{padding:16px 10px}

  /* Inspector becomes a bottom sheet instead of a right-hand sidebar —
     a right-docked 260px panel doesn't work on a 375px-wide screen.
     Stops above the mobile dock (rather than covering it) so a person
     can still tap between tools while a sheet is open, instead of the
     sheet blocking every dock button underneath it. */
  .sr-inspector{
    position:fixed;left:0;right:0;top:auto;
    bottom:calc(var(--sr-mobile-dock-h) + env(safe-area-inset-bottom, 0px));
    width:auto;max-height:calc(75vh - var(--sr-mobile-dock-h));overflow-y:auto;
    border-left:0;border-radius:16px 16px 0 0;
    box-shadow:0 -12px 30px rgba(15,23,42,.18);
    padding-top:8px;
    z-index:56;
  }
  .sr-inspector-drag-handle{
    width:36px;height:4px;border-radius:3px;background:#e2e5ea;margin:0 auto 12px;
  }
  .sr-inspector-mobile-close{
    display:block;width:100%;height:38px;border-radius:8px;border:1px solid var(--sr-line);
    background:#f8f9fb;color:var(--sr-ink);font-size:13px;font-weight:700;margin-top:16px;
  }

  /* Bottom dock — the mobile replacement for the desktop left rail.
     Same five tools (Text/Photo/Move/Section/Reset), thumb-reachable
     across the bottom of the screen instead of down the left edge. */
  .sr-mobile-dock{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;
    min-height:var(--sr-mobile-dock-h);
    background:#fff;border-top:1px solid var(--sr-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content:space-around;
    box-shadow:0 -6px 20px rgba(15,23,42,.08);
  }
  .sr-mobile-dock button{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:0;color:var(--sr-muted);font-size:10px;font-weight:700;
    padding:5px 6px;flex:1 1 0;min-width:0;
  }
  .sr-mobile-dock button.active{color:var(--sr-blue)}
  .sr-mobile-dock svg{width:19px;height:19px}
  .sr-mobile-dock span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* Repeat-item controls (duplicate/remove) rely on :hover on desktop,
     which doesn't exist reliably on touch — show them plainly instead
     of gating on a hover state the device may or may not simulate, and
     make them big enough to tap accurately (was 22px, under the ~28px
     minimum comfortable touch target). */
  .sr-repeat-controls{display:flex!important;top:-6px;right:-6px}
  .sr-repeat-btn{width:30px;height:30px;font-size:16px}
}
@media (min-width:861px){
  .sr-mobile-dock{display:none!important}
  .sr-inspector-drag-handle,.sr-inspector-mobile-close{display:none}
}

/* Never let the mobile dock or its accommodation show up in the export
   itself — it's editor chrome, not resume content. Resets `position`
   too, not just `display`: a lingering `position:fixed` element can
   still influence Chromium's print pagination and silently produce a
   blank extra page even once display:none is applied to it. */
html.sr-print-prepared .sr-mobile-dock{display:none!important;position:static!important;min-height:0!important}

/* ---------------------------------------------------------------------- *
 * Print / export
 *
 * Everything below only ever applies while html.sr-print-prepared is set
 * (added by srPreparePrintFit() in sr-core.js right before window.print())
 * and cleared immediately after. There is deliberately no competing
 * always-on !important height lock anywhere in this file or in the
 * per-template theme files — sr-core.js is the single source of truth
 * for the page's printed dimensions. That was the root cause of every
 * print/export bug in the previous build: multiple independent rules
 * fighting to own the same box.
 * ---------------------------------------------------------------------- */
html.sr-print-prepared,
html.sr-print-prepared body{
  overflow:hidden!important;
}
html.sr-print-prepared .sr-toolbar,
html.sr-print-prepared .sr-rail,
html.sr-print-prepared .sr-inspector,
html.sr-print-prepared .sr-toast{
  display:none!important;
}
html.sr-print-prepared .sr-canvas-outer{
  padding:0!important;display:block!important;overflow:visible!important;
}
html.sr-print-prepared .sr-workspace{
  min-height:0!important;display:block!important;padding:0!important;
}
html.sr-print-prepared .sr-canvas-scale{
  transform:none!important;
  zoom:1!important;
}
html.sr-print-prepared .sr-page-shell{
  box-shadow:none!important;margin:0!important;
}
html.sr-print-prepared [contenteditable="true"]:hover,
html.sr-print-prepared [contenteditable="true"]:focus{
  box-shadow:none!important;
}
html.sr-print-prepared .sr-repeat-controls,
html.sr-print-prepared .sr-photo:hover::after,
html.sr-print-prepared .sr-photo-resize{
  display:none!important;
}
html.sr-print-prepared [draggable="true"]{
  outline:none!important;
}
html.sr-print-prepared .sr-drop-before,
html.sr-print-prepared .sr-drop-after{
  box-shadow:none!important;
}

@page{margin:0}

/* ---------------------------------------------------------------------- *
 * Multi-page pagination — when a resume has enough content to need a
 * 2nd or 3rd page (see srExport() in sr-core.js), these keep each
 * repeatable entry from splitting mid-item across the page boundary,
 * and keep a section heading from being stranded alone at the bottom
 * of a page with its content pushed to the next one. `.sr-repeat` and
 * `[data-sr-heading]` are used consistently across every template's
 * markup, so these two rules alone cover all 20 without needing a
 * per-template selector. `.side-block` is an additional defensive
 * rule: several templates group a whole labeled sidebar subsection
 * (e.g. "Hobbies") under this class, and it reads better kept whole
 * when it's short enough to fit that way; harmless no-op on templates
 * that don't use the name.
 * ---------------------------------------------------------------------- */
.sr-repeat{break-inside:avoid;page-break-inside:avoid}
[data-sr-heading]{break-after:avoid;page-break-after:avoid}
.side-block{break-inside:avoid;page-break-inside:avoid}
@media print{
  /* Mobile browsers' print/PDF pipeline (iOS Safari's Share > Print,
     Android Chrome's share-sheet Print) generally has no user-facing
     toggle for "print background colors" the way desktop print dialogs
     do, and defaults to suppressing them to save ink. Without this
     override, every colored sidebar, header band, and skill bar in
     every template silently turns white/transparent on a phone even
     though the exact same export looks correct on desktop. */
  html,body,.page,.page *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
    color-adjust:exact!important;
  }
  html,body{background:#fff!important}

  /* Security: the "Print / Download" button is not the only way to
     print a page -- right-click > Print, Ctrl/Cmd+P, and a mobile
     share-sheet's Print option all call the browser's native print
     directly, completely bypassing openPaymentModal() and the button's
     own JS. sr-export-gate.js adds `resume-print-authorized` to <body>
     only once the server has actually confirmed an active export
     authorization; every OTHER print path leaves that class absent, so
     this is the one check that applies no matter how printing started.
     A previous `window.stop()` call on `beforeprint` attempted to stop
     unauthorized prints in JS, but that only halts page *loading* -- it
     has no effect on a print already under way, which is exactly how
     an unauthorized full-quality export was possible before this. */
  body:not(.resume-print-authorized) .page,
  body:not(.resume-print-authorized) .page *{
    color:transparent!important;background:#e9edf3!important;border-color:transparent!important;
    box-shadow:none!important;filter:blur(9px);
  }
  body:not(.resume-print-authorized)::after{
    content:"This resume hasn't been exported through SaveResume Pro. Sign in and subscribe at saveresume.com to download the finished PDF.";
    position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:60px;background:rgba(255,255,255,.94);
    font:700 22px/1.5 Arial,Helvetica,sans-serif;color:#0b1526;
  }
}