/* Use2PDF — tool page (ToolShell) styles */
.tool-page{padding-bottom:3rem}
.tool-shell{margin:1.5rem 0}

.dropzone{border:2px dashed #c9c9d6;border-radius:var(--radius);background:var(--bg-alt);
  padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone:focus,.dropzone.dragover{border-color:var(--primary);background:rgba(56,189,248,0.05);outline:none}
.dz-icon{font-size:2rem;color:var(--brand)}
.dz-title{font-weight:600;font-size:1.1rem;margin:.5em 0 .2em}
.dz-sub{color:var(--muted);font-size:.95rem}

.file-list{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem}
.file-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7em 1em;color:var(--text)}
.file-list .fname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .fsize{color:var(--muted);font-size:.85rem;flex:none}
.file-list .fremove{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;flex:none}
.file-list .fremove:hover{color:var(--brand)}

.tool-options{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;margin:1rem 0;display:grid;gap:1rem;color:var(--text)}
.tool-options .field{display:grid;gap:.35rem}
.tool-options label{font-weight:600;font-size:.95rem}
.tool-options input[type=text],.tool-options input[type=number],.tool-options input[type=password],
.tool-options select,.tool-options textarea{padding:.6em .8em;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;width:100%;background:var(--input-bg);color:var(--text)}
.tool-options input:focus,.tool-options select:focus,.tool-options textarea:focus{outline:none;border-color:var(--primary)}
.tool-options .row{display:flex;gap:1rem;flex-wrap:wrap}
.tool-options .hint{font-size:.85rem;color:var(--muted)}
.opt-inline{display:flex;align-items:center;gap:.5rem}
.opt-inline input{width:auto}

.tool-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0}

.progress-wrap{margin:1rem 0}
.progress-bar{height:10px;background:var(--bg-alt);border-radius:999px;overflow:hidden}
.progress-bar span{display:block;height:100%;width:0;background:var(--brand);transition:width .2s}
.progress-status{color:var(--muted);font-size:.9rem;margin:.5em 0 0}

.result-area{margin:1.2rem 0;display:grid;gap:.8rem}
.result-card{background:#eafaef;border:1px solid #bfe6c7;border-radius:var(--radius);padding:1.2rem;text-align:center}
.result-card h3{color:var(--success);margin-bottom:.3em}
.result-files{display:grid;gap:.5rem;margin-top:1rem}
.result-file{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6em 1em;color:var(--text)}
.result-file-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.result-file-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-file-thumb{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--bg);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.result-file-thumb.has-thumb{background:#fff}
.result-file-thumb.has-thumb canvas,.result-file-thumb.has-thumb img{width:100%;height:100%;object-fit:cover}
.tool-error{background:#fdecec;border:1px solid #f3b4b4;color:#a11;border-radius:var(--radius-sm);padding:1em}

/* Thumbnail grid (reorder/organize tools) */
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem;margin:1rem 0}
.thumb{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);cursor:grab}
.thumb canvas,.thumb img{width:100%;display:block}
.thumb.selected{outline:3px solid var(--brand)}
.thumb .pg{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;padding:.1em .4em;border-radius:4px}
.thumb .thumb-tools{position:absolute;top:2px;right:2px;display:flex;gap:2px}
.thumb .thumb-tools button{background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:.8rem}

/* Split preview strip — page thumbnails with toggleable cut/join points */
.split-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1rem 0}
.split-page{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);width:90px}
.split-page canvas{width:100%;display:block}
.split-page .pg{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;padding:.1em .4em;border-radius:4px}
.split-gap{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--primary);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.split-gap:hover{border-color:var(--primary)}
.split-gap svg,.split-gap i{width:14px;height:14px}
.split-gap.joined{color:var(--text-muted);background:transparent;border-style:dashed}
.split-gap .icon-joined{display:none}
.split-gap.joined .icon-cut{display:none}
.split-gap.joined .icon-joined{display:block}

.split-strip.stale{opacity:.45}
.split-strip-note{margin:.3rem 0 0}

/* Selection-mode page picker (extract/delete/rotate/duplicate pages) */
.page-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem;margin:1rem 0}
.page-pick{position:relative;border:2px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);cursor:pointer;transition:border-color .15s}
.page-pick canvas{width:100%;display:block}
.page-pick .pg{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;padding:.1em .4em;border-radius:4px}
.page-pick:hover{border-color:var(--text-muted)}
.page-pick.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.page-pick.marked-delete{border-color:var(--error)}
.page-pick.marked-delete::after{
  content:"";position:absolute;inset:0;background:rgba(220,38,38,.28);
  border-top:2px solid var(--error);border-bottom:2px solid var(--error);
  top:calc(50% - 1px);bottom:calc(50% - 1px);
}
.page-pick .pick-badge{
  position:absolute;top:2px;right:2px;background:var(--primary);color:#fff;
  font-size:.7rem;font-weight:700;min-width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:8px;padding:0 .3em;
}

/* Template / CV mounts reuse tool-options styling */
.template-shell,#cv-app{margin:1.5rem 0}
.tpl-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:820px){.tpl-layout{grid-template-columns:1fr}}
.tpl-preview{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:auto;min-height:400px;color:var(--text)}
.tpl-preview iframe,.tpl-preview canvas{width:100%;border:0}

/* ---- CV builder ---- */
.cv-layout{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:1.5rem;align-items:start}
@media(max-width:1100px){.cv-layout{grid-template-columns:1fr}}
.cv-form{display:grid;gap:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;color:var(--text)}
.cv-form h3{margin:.6rem 0 .2rem;font-size:1rem;color:var(--primary)}
.cv-form input,.cv-form textarea{padding:.55em .7em;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;width:100%;background:var(--input-bg);color:var(--text)}
.cv-form input:focus,.cv-form textarea:focus{outline:none;border-color:var(--primary)}
.cv-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cv-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem;display:grid;gap:.5rem;background:var(--bg-alt);color:var(--text)}
.cv-card-top{display:flex;justify-content:space-between;align-items:center}
.cv-switch{display:flex;flex-direction:column;gap:.6rem;border-bottom:1px solid var(--border);padding-bottom:.8rem}
.cv-tpls{display:flex;flex-wrap:wrap;gap:.4rem}
.cv-tpl{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.3em .8em;font-size:.8rem;cursor:pointer;color:var(--text)}
.cv-tpl.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.cv-accents{display:flex;gap:.4rem}
.cv-accent{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);cursor:pointer}
.cv-accent.on{box-shadow:0 0 0 2px var(--primary)}
.cv-sugg{display:flex;flex-wrap:wrap;gap:.35rem}
.sugg{border:1px dashed var(--border);background:var(--surface);border-radius:6px;padding:.25em .5em;font-size:.75rem;cursor:pointer;color:var(--text-secondary)}
.sugg:hover{border-color:var(--primary);color:var(--primary)}
.cv-skills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem}
.skill-chip{background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:.25em .7em;font-size:.82rem;display:inline-flex;align-items:center;gap:.4em}
.skill-chip .skill-del{border:0;background:none;cursor:pointer;color:var(--muted)}
.cv-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.cv-preview-wrap{position:sticky;top:80px;background:var(--bg-alt);border-radius:var(--radius);padding:1rem;max-height:calc(100vh - 100px);overflow:auto}
/* The preview is a real A4 sheet: 794x1123px is A4 at 96dpi, which is what the
   PDF export assumes too, so what you see here matches what you download.
   --pv-scale is set from JS to fit whatever width the column ends up with. */
.cv-preview-inner{--pv-scale:1;display:flex;justify-content:center}
.cv-preview-inner .pv{
  /* align-self:flex-start stops the flex parent stretching the sheet to the
     height fitPreview() just set from offsetHeight — that fed back on itself
     and pinned every preview to exactly one page, so a longer CV spilled
     outside the sheet instead of growing it. */
  width:794px;min-height:1123px;flex:none;align-self:flex-start;
  transform:scale(var(--pv-scale));transform-origin:top center;
  background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.28);border-radius:2px;
  padding:48px 56px;font-size:12.5px;line-height:1.5;color:#222;
}
.pv-head{border-bottom:2px solid;padding-bottom:10px;margin-bottom:14px}
.pv-head h1{font-size:24px;margin:0}
.pv-title{font-size:14px;color:#444}
.pv-contact{font-size:11px;color:#666;margin-top:4px}
.pv section{margin:12px 0}
.pv h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;border-bottom:1px solid #eee;padding-bottom:3px}
.pv-item{margin-bottom:8px}
.pv-row{display:flex;justify-content:space-between;gap:1rem}
.pv-sub{color:#666;font-size:11.5px}
.pv ul{margin:4px 0 0 16px;padding:0}
.pv-skills{display:flex;flex-wrap:wrap;gap:5px}
.pv-skill{border:1px solid;border-radius:4px;padding:2px 7px;font-size:11px}
.pv-sidebar .pv-cols{display:grid;grid-template-columns:34% 1fr;gap:14px}
.pv-sidebar aside{padding:10px;border-radius:6px}

/* ---- CV builder: Academic CV template ---- */
.pv-academic{font-family:Georgia,'Times New Roman',serif}
.pv-academic h1,.pv-academic h2{font-family:Georgia,'Times New Roman',serif}
.pv-academic .pv-head{text-align:center;border-bottom-width:1px}
.pv-academic .pv-contact{margin-top:6px}
.pv-reflist{margin:4px 0 0 18px;padding:0}
.pv-reflist li{margin-bottom:5px}
.pv-academic ol.pv-reflist{list-style:decimal}
.pv-academic ul.pv-reflist{list-style:disc}
/* Academic CV: section headings underlined in the chosen accent (currentColor = accent) */
.pv-academic h2{border-bottom:1.5px solid currentColor;padding-bottom:3px;margin-bottom:8px}
/* CV builder: Professional design photo control */
.cv-photo-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.cv-photo-thumb{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#555,#777);color:#fff;font-weight:700;font-size:1.1rem;border:2px solid var(--line)}
/* The generic .btn padding left this label 199px for 200px of text, so it
   wrapped — and broke inside "(Max 10MB)". Trim the inline padding to buy
   the room back; .cv-photo-hint keeps the size hint unbreakable so that if
   a narrower column ever does wrap it, it wraps before the hint, not
   through the middle of it. */
.cv-photo-btn{cursor:pointer;margin:0;padding-inline:.75rem;text-align:center}
.cv-photo-hint{white-space:nowrap}

/* ===== Universal Resume Form ===== */
.cv-sec{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.7rem;background:var(--surface);color:var(--text)}
.cv-sec>summary{cursor:pointer;padding:.7em 1em;font-weight:700;color:var(--text);list-style:none;display:flex;align-items:center;gap:.5rem}
.cv-sec>summary::before{content:'▸';color:var(--primary);transition:.15s}
.cv-sec[open]>summary::before{transform:rotate(90deg)}
.cv-sec>summary::-webkit-details-marker{display:none}
/* Inset the section's contents. Elements that carry their own padding —
   the entry cards and the add button — are excluded and inset with margin
   instead: this blanket rule outranks both .cv-card and .btn on specificity,
   so it was flattening the cards and leaving the add button with no top
   padding and a 1em gap under its label. */
.cv-sec>*:not(summary):not(.cv-card):not(.cv-add){padding:0 1em}
.cv-sec>*:not(summary):not(.cv-card):not(.cv-add):last-child{padding-bottom:1em}
.cv-sec>.cv-card{margin:0 1em .5rem}
.cv-sec>.cv-add{margin:.3rem 1em 1em}
.cvf{display:grid;gap:.25rem;margin-bottom:.6rem}
.cvf>span{font-size:.8rem;font-weight:600;color:var(--text-secondary)}
.cvf input,.cvf textarea{padding:.5em .7em;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;width:100%;background:var(--input-bg);color:var(--text)}
.cvf input:focus,.cvf textarea:focus{outline:none;border-color:var(--primary)}
.cv-card-tools{display:inline-flex;gap:.2rem;margin-left:auto}
.cv-card-tools button{border:1px solid var(--border);background:var(--surface);border-radius:6px;width:26px;height:24px;cursor:pointer;font-size:.75rem;color:var(--text-secondary);line-height:1}
.cv-card-tools button:hover:not([disabled]){border-color:var(--primary);color:var(--primary)}
.cv-card-tools button[disabled]{opacity:.35;cursor:default}
.cv-add{margin-top:.3rem}
.cv-tag-input{padding:.55em .7em;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;width:100%;background:var(--input-bg);color:var(--text)}
.cv-tag-input:focus{outline:none;border-color:var(--primary)}
.cv-form select,.cv-sec select{background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5em .7em;font:inherit;width:100%}
.cv-sec .ql-toolbar{background:var(--bg-alt);border-color:var(--border)!important}
.cv-sec .ql-container{background:var(--input-bg);border-color:var(--border)!important;color:var(--text)}
.cv-sec .ql-editor{color:var(--text)}
.cv-sec .ql-editor.ql-blank::before{color:var(--text-secondary)}
.cv-sec .ql-toolbar button,.cv-sec .ql-toolbar .ql-stroke{color:var(--text-secondary);stroke:var(--text-secondary)}
.cv-sec .ql-toolbar button:hover,.cv-sec .ql-toolbar button.ql-active{color:var(--primary)}
.cv-sec .ql-toolbar .ql-active .ql-stroke,.cv-sec .ql-toolbar button:hover .ql-stroke{stroke:var(--primary)}

/* ===== Universal preview: shared marks ===== */
.pv-serif{font-family:Georgia,'Times New Roman',serif}
.pv-serif h1,.pv-serif h2{font-family:Georgia,'Times New Roman',serif}
.pv-banner{padding:20px 24px;border-radius:6px;color:#fff!important}
.pv-banner h1{color:#fff!important}
.pv-banner .pv-title{color:rgba(255,255,255,.9)}
.pv-banner .pv-contact{color:rgba(255,255,255,.8)}
.pv-tech{font-size:11px;color:#777;font-style:italic;margin-top:2px}
.pv-refgrid{display:flex;flex-wrap:wrap;gap:12px 28px}

/* ===== Sidebar preview (light + dark) ===== */
.pv-sidebar2{display:grid;grid-template-columns:36% 1fr;padding:0;overflow:hidden;box-shadow:0 4px 24px rgba(20,20,40,.08)}
.pv-sidebar2 .pv-side{padding:30px 22px}
.pv-sidebar2 .pv-main{padding:32px 28px;background:#fff}
.pv-avatar{text-align:center;margin-bottom:22px}
.pv-sh{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.pv-sh span{width:16px;height:2px;display:inline-block}
.pv-sh h4{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.pv-gap{height:18px}
.pv-prof{font-size:11px;line-height:1.7;margin:0}
.pv-dark .pv-prof,.pv-dark .pv-side .pv-sub,.pv-dark .pv-side p{color:#c9c9c9}
.pv-dark .pv-side .pv-row span{color:#e6e6e6}
.pv-cline{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:11px}
.pv-dark .pv-cline{color:#c9c9c9}
.pv-light .pv-cline{color:#444}
.pv-side .pv-skills{gap:5px}
.pv-dark .pv-side .pv-skill{border-color:rgba(255,255,255,.2)!important;background:rgba(255,255,255,.08);color:#e6e6e6}
.pv-namebar{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid #eee}
.pv-namebar h1{margin:0;font-size:28px;font-weight:800;color:#1A1A2E}
.pv-namebar p{margin:5px 0 0;font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.pv-mblock{margin-bottom:20px}
.pv-mh{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pv-mh h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:#1A1A2E;font-weight:800}
.pv-mh span{flex:1;height:1px;background:#e4e4e9}
.pv-sidebar2 .pv-item{margin-bottom:12px}
/* ==========================================================================
   CV design: "Bold Split". Every number below is in the preview sheet's
   794x1123 space (A4 at 96dpi) and was taken off the reference artwork; the
   PDF renderer scales the same figures by 595/794 so the two cannot drift.
     cream panel  x 30..362      name plate  x 0..380,  y 101..186
     rail markers x 396          rail text   x 445      bars end x 707
   Colours arrive as --sp-* so the accent picker still drives the meters.
   ========================================================================== */
/* .pv.pv-split, not .pv-split: the generic `.cv-preview-inner .pv` rule paints
   the sheet white and would otherwise win on specificity. No overflow:hidden —
   the SVG viewport clips the swoosh, and hiding overflow would cut long CVs. */
.pv.pv-split{position:relative;padding:0;background:var(--sp-navy);color:#fff}
.pv-split .pv-sp-deco{position:absolute;top:0;left:0;width:100%;height:470px;z-index:0;pointer-events:none}
.pv-split .pv-sp-stripe{position:absolute;top:0;left:40px;width:18px;height:235px;z-index:1}
.pv-split>*:not(.pv-sp-deco){position:relative;z-index:2}

/* --- name plate + ringed portrait, placed from the page's top-left --- */
.pv-split .pv-sp-head{display:block;height:0;z-index:3}
.pv-split .pv-sp-plate{position:absolute;top:101px;left:0;width:380px;padding:19px 26px 19px 54px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.pv-split .pv-sp-plate h1{margin:0;color:#fff;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-split .pv-sp-plate p{margin:7px 0 0;color:rgba(255,255,255,.62);font-size:11px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-split .pv-sp-portrait{position:absolute;top:55px;left:477px;border-radius:50%;border-width:11px;border-style:solid;overflow:hidden;box-sizing:content-box;display:flex;align-items:center;justify-content:center}
.pv-split .pv-sp-portrait img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.pv-split .pv-sp-initials{font-weight:800;font-size:56px;color:#fff}

/* --- social pill, sitting on the navy just clear of the swoosh --- */
.pv-split .pv-sp-social{position:absolute;top:330px;left:407px;display:flex;gap:16px;padding:10px 20px;border-radius:30px;z-index:3}
.pv-split .pv-sp-badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;text-transform:lowercase}

/* --- body: inset cream panel + navy rail --- */
.pv-split .pv-sp-body{display:grid;grid-template-columns:373px 1fr;align-items:stretch;min-height:640px;margin-top:238px}
.pv-split .pv-sp-left{margin-left:30px;padding:46px 25px 44px 53px;color:#1a1a2e;min-width:0}
.pv-split .pv-sp-right{position:relative;padding:195px 87px 44px 72px;min-width:0}
.pv-split .pv-sp-right::before{content:"";position:absolute;left:34px;top:205px;bottom:60px;width:2px;background:rgba(255,255,255,.28)}

/* --- left column: square markers on a rule, circular entry bullets --- */
.pv-split .pv-sp-left section{margin:0 0 24px;padding-left:27px;border-left:2px solid rgba(27,42,65,.2)}
.pv-split .pv-sp-left section:last-child{margin-bottom:0;border-left-color:transparent}
.pv-split .pv-sp-lhead{display:flex;align-items:center;gap:15px;margin:0 0 12px -43px}
.pv-split .pv-sp-sq{width:31px;height:31px;flex:none}
.pv-split .pv-sp-lhead h2{margin:0;font-size:18px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sp-navy);border:0;padding:0}
.pv-split .pv-sp-lbody{font-size:10.5px;line-height:1.66;color:#4a5160;text-align:justify}
.pv-split .pv-sp-lbody .pv-item{position:relative;margin:0 0 13px}
.pv-split .pv-sp-lbody .pv-item::before{content:"";position:absolute;left:-27px;top:2px;width:11px;height:11px;border-radius:50%;background:#9aa1b0}
.pv-split .pv-sp-lbody strong{color:var(--sp-navy);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.pv-split .pv-sp-lbody .pv-row{gap:10px}
.pv-split .pv-sp-lbody .pv-row span{color:#9aa1b0;font-size:9.5px;flex:none}
.pv-split .pv-sp-lbody .pv-sub{color:#9aa1b0;font-size:9.5px}
.pv-split .pv-sp-lbody p{margin:3px 0 0}
.pv-split .pv-sp-lbody ul{margin:4px 0 0 15px;padding:0}

/* --- rail: square markers, contact rows, meters --- */
.pv-split .pv-sp-rhead{display:flex;align-items:center;gap:16px;margin:0 0 15px -49px}
.pv-split .pv-sp-rhead:not(:first-child){margin-top:30px}
.pv-split .pv-sp-tick{width:20px;height:20px;flex:none;background:#fff!important}
.pv-split .pv-sp-rhead h3{margin:0;font-size:20px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.pv-split .pv-sp-crow{display:flex;align-items:flex-start;gap:13px;margin:0 0 11px;font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.92);min-width:0}
.pv-split .pv-sp-crow>span:last-child{overflow-wrap:anywhere;word-break:break-word;padding-top:5px}
.pv-split .pv-sp-ic{width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-style:normal}

/* Skills read label-left / bar-right; languages stack label over a full bar. */
.pv-split .pv-sp-meter{margin:0 0 10px}
.pv-split .pv-sp-meters:not(.pv-sp-lang) .pv-sp-meter{display:flex;align-items:center;gap:0}
.pv-split .pv-sp-meters:not(.pv-sp-lang) .pv-sp-mlabel{width:89px;flex:none;margin:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-split .pv-sp-meters:not(.pv-sp-lang) .pv-sp-msub{display:none}
.pv-split .pv-sp-meters:not(.pv-sp-lang) .pv-sp-track{flex:1}
.pv-split .pv-sp-mlabel{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:rgba(255,255,255,.94);margin:0 0 5px;text-transform:uppercase;letter-spacing:.09em}
.pv-split .pv-sp-msub{color:rgba(255,255,255,.55);text-transform:none;letter-spacing:0}
.pv-split .pv-sp-track{height:10px;background:#fff;overflow:hidden}
.pv-split .pv-sp-track>i{display:block;height:100%}
.pv-split .pv-sp-lang .pv-sp-meter{margin-bottom:14px}
.pv-split .pv-sp-rbody{font-size:10.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.pv-split .pv-sp-rbody strong{color:#fff}
.pv-split .pv-sp-rbody .pv-sub,.pv-split .pv-sp-rbody .pv-item{color:rgba(255,255,255,.7)}
.pv-split .pv-sp-rbody .pv-skill{border-color:rgba(255,255,255,.35)!important;color:#fff}

/* Sidebar: wrap long links/contact so nothing clips at the edge */
.pv-cline{min-width:0}
.pv-cline>span:last-child{overflow-wrap:anywhere;word-break:break-word}
.pv-side .pv-sub,.pv-side .pv-item strong{overflow-wrap:anywhere}
.pv-side .pv-item{margin-bottom:12px}
.pv-side .pv-item strong{display:block;font-size:12px;color:inherit}
.pv-dark .pv-side .pv-item strong{color:#fff}
.pv-side .pv-item .pv-sub{font-size:10.5px;margin-top:1px}

/* Header photo for single-column + banner themes */
.pv-head-photo{display:flex;align-items:center;justify-content:space-between;gap:18px}
.pv-head-text{min-width:0;flex:1}
.pv-head-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line)}
.pv-banner .pv-head-avatar{border-color:rgba(255,255,255,.5)}
/* WORKSPACE UI */
.tool-workspace {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}
.tool-workspace.is-dragging {
  border-color: var(--primary);
}

.pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.pdf-thumb {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pdf-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  border-color: var(--border-hover);
}
.pdf-thumb:active {
  cursor: grabbing;
}
.pdf-thumb canvas {
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  border-radius: 4px;
}
.pdf-thumb .thumb-title {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
.pdf-thumb .thumb-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--error);
  color: white;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.pdf-thumb:hover .thumb-remove {
  opacity: 1;
}

.workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.workspace-header h3 { margin: 0; font-size: 1.25rem; }

/* MERGE TOOLBAR */
.merge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.merge-tabs { display: flex; gap: .25rem; }
.merge-tab {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: .5rem .9rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.merge-tab.active { color: var(--text); background: var(--bg); }
.merge-tab:disabled { cursor: not-allowed; opacity: .65; }
.merge-tab .tab-crown { width: 14px; height: 14px; color: #F5A524; }

.merge-toolbar-actions { display: flex; align-items: center; gap: .5rem; }
.toolbar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 .25rem; }

.btn-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: all .15s;
}
.btn-icon svg, .btn-icon i { width: 18px; height: 18px; pointer-events: none; }
.btn-icon:hover:not(:disabled) { background: var(--bg); border-color: var(--border); }
.btn-icon.active { background: var(--primary); color: #fff; }
.btn-icon:disabled { opacity: .4; cursor: not-allowed; }

.dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.dropdown-toggle .chev { width: 14px; height: 14px; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  padding: .35rem;
}
.dropdown-menu.dropdown-menu-right { left: auto; right: 0; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: .55rem .6rem;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.dropdown-item:hover { background: var(--bg); }
.dropdown-item svg, .dropdown-item i { width: 16px; height: 16px; color: var(--text-muted); }

.merge-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .75rem 0;
}
.select-all-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--text-muted);
  cursor: pointer;
}
.select-all-row input[type="checkbox"] { width: 16px; height: 16px; }
.merge-view-controls { display: flex; align-items: center; gap: .35rem; }

/* Grid cards get checkboxes + insert gaps on top of the existing .pdf-thumb styles */
.thumb-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
}
.thumb-checkbox input { width: 18px; height: 18px; cursor: pointer; }
.thumb-visual {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-visual.thumb-blank {
  background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 8px, var(--surface) 8px, var(--surface) 16px);
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  height: 200px;
}
.thumb-visual.thumb-blank svg, .thumb-visual.thumb-blank i { width: 32px; height: 32px; }
.thumb-visual.thumb-error {
  width: 100%; height: 200px;
  background: rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
  color: var(--text-muted); font-size: .85rem; text-align: center; padding: .5rem;
}
.thumb-meta { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

.thumb-insert {
  align-self: center;
  flex: 0 0 auto;
}
.thumb-insert-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.thumb-insert-btn svg, .thumb-insert-btn i { width: 14px; height: 14px; }
.thumb-insert .dropdown-menu { left: 50%; transform: translateX(-50%); top: calc(100% + 8px); }

.pdf-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}
.pdf-grid .pdf-thumb { width: 160px; }
.pdf-grid-add {
  border: 1px dashed var(--border);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 200px;
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
  cursor: pointer;
}
.pdf-grid:not(.view-list) .pdf-grid-add { width: 160px; }
.pdf-grid-add:hover { border-color: var(--primary); color: var(--primary); }
.pdf-grid-add svg, .pdf-grid-add i { width: 28px; height: 28px; }

/* List view */
.pdf-grid.view-list { flex-direction: column; align-items: stretch; gap: .5rem; }
.pdf-grid.view-list .thumb-insert { align-self: stretch; display: flex; justify-content: center; padding: .1rem 0; }
.pdf-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 3.2rem .6rem 2.2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: grab;
}
.pdf-row:active { cursor: grabbing; }
.pdf-row.drag-over { border-color: var(--primary); }
.pdf-row .thumb-checkbox { position: static; margin-left: -1.6rem; }
.pdf-row .thumb-visual { width: 32px; min-height: 0; flex: 0 0 auto; }
.pdf-row .thumb-visual canvas { width: 28px; height: auto; }
.pdf-row .thumb-visual.thumb-blank { height: 32px; width: 32px; }
.pdf-row .thumb-visual.thumb-blank svg, .pdf-row .thumb-visual.thumb-blank i { width: 16px; height: 16px; }
.pdf-row .thumb-title { flex: 1; text-align: left; margin: 0; width: auto; }
.pdf-row .thumb-meta { margin: 0 .5rem 0 0; }
.pdf-row.pdf-grid-add { justify-content: center; padding: .6rem .75rem; min-height: 0; }
.pdf-row .thumb-remove {
  position: absolute;
  opacity: 1;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  box-shadow: none;
}

/* ADVANCED METRICS */
.result-metrics {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  justify-content: center;
  flex-wrap: wrap;
}
.result-metrics span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* UNIVERSAL SIDEBAR LAYOUT */
.workspace-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .workspace-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}
.workspace-main {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}
.workspace-sidebar {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}
@media (min-width: 900px) {
  .workspace-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 1.5rem;
  }
}

.workspace-sidebar h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.workspace-sidebar .field {
  margin-bottom: 1rem;
}
.thumb-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.pdf-thumb:hover .thumb-actions {
  opacity: 1;
}
.thumb-btn {
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.thumb-btn:hover { background: rgba(0,0,0,0.9); }
/* UNIFIED PDF EDITOR UI */
.pdf-editor-layout {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 80vh;
  min-height: 600px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
  margin-top: 1rem;
}
.editor-toolbar {
  height: 60px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 1rem;
  background: var(--bg);
}
.editor-toolbar .btn-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text);
  transition: all 0.2s;
}
.editor-toolbar .btn-icon:hover {
  background: var(--surface);
  border-color: var(--border);
}
.editor-toolbar .btn-icon.active {
  background: var(--primary);
  color: white;
}
.editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.editor-sidebar {
  width: 200px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.editor-sidebar .page-thumb {
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
  padding: 0.5rem;
  text-align: center;
  background: white;
}
.editor-sidebar .page-thumb.active {
  border-color: var(--primary);
  background: #f0f7ff;
}
.editor-sidebar .page-thumb canvas {
  max-width: 100%;
  height: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.editor-main {
  flex: 1;
  background: #e9ecef;
  overflow: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
}
.editor-canvas-container {
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: white;
  margin: auto;
}
.editor-canvas-container canvas {
  display: block;
}
.editor-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; /* Let tools toggle pointer events */
}
.editor-overlay.tool-active {
  pointer-events: auto;
  cursor: crosshair;
}
.editor-properties {
  width: 280px;
  border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 1.5rem;
  overflow-y: auto;
}

/* INTERACTIVE OVERLAYS */
.editor-text-box {
  position: absolute;
  pointer-events: auto;
  cursor: move;
  border: 1px dashed transparent;
  padding: 2px;
  box-sizing: border-box;
  transform-origin: top left;
}
.editor-text-box.selected {
  border-color: var(--primary);
  background: rgba(0, 123, 255, 0.05);
}
.editor-text-box .text-content {
  outline: none;
  white-space: pre-wrap;
  min-width: 20px;
  min-height: 20px;
  line-height: 1.2;
}
/* SMART ANALYSIS DASHBOARD */
.analysis-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}
.metric-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.metric-card .label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.metric-card .value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.metric-card.highlight {
  border-color: var(--primary);
  background: rgba(0, 123, 255, 0.02);
}
.security-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}
.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
/* LIVE GENERATOR WORKSPACE */
.generator-layout {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 85vh;
  min-height: 700px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
  margin-top: 1rem;
}
@media (min-width: 900px) {
  .generator-layout {
    flex-direction: row;
  }
}
.generator-sidebar {
  width: 100%;
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
@media (min-width: 900px) {
  .generator-sidebar {
    width: 400px;
    flex-shrink: 0;
  }
}
.generator-sidebar .section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  color: var(--text);
}
.live-preview-pane {
  flex: 1;
  background: #e9ecef;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
}
.live-template-container {
  background: white;
  width: 210mm; /* A4 width */
  min-height: 297mm; /* A4 height */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 40px;
  box-sizing: border-box;
  position: relative;
  transform-origin: top center;
}
/* INVOICE TEMPLATE STYLES */
.inv-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.inv-header h1 {
  font-size: 2.5rem;
  color: var(--primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.inv-meta {
  text-align: right;
  color: var(--text-muted);
}
.inv-addresses {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.inv-address-box {
  width: 45%;
}
.inv-address-box h3 {
  font-size: 1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.inv-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.inv-table th {
  background: var(--bg);
  padding: 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}
.inv-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.inv-table th.right, .inv-table td.right {
  text-align: right;
}
.inv-totals {
  width: 300px;
  float: right;
}
.inv-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.inv-totals-row.grand-total {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--primary);
  border-bottom: none;
  border-top: 2px solid var(--border);
}
.inv-notes {
  clear: both;
  padding-top: 3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
/* BATCH PROCESSING QUEUE UI */
.queue-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  padding: 1rem;
}
.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.queue-header .queue-title {
  font-size: 1rem;
  margin: 0;
}
.queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.queue-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.queue-item .remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255,0,0,0.1);
  color: red;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.queue-item:hover .remove-btn {
  opacity: 1;
}
.queue-item-icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.queue-item-icon.has-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.queue-item-icon.has-thumb canvas,
.queue-item-icon.has-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.queue-item-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
  text-align: center;
}
.queue-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}
.queue-item.error {
  border-color: var(--error);
  background: rgba(255,0,0,0.02);
}
.error-badge {
  background: var(--error);
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  margin-top: 0.5rem;
}

/* PROGRESS BAR */
.progress-bar-container {
  height: 12px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary);
  width: 0%;
  transition: width 0.3s ease;
}
.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ===== Mobile responsive ===== */
@media(max-width:640px){
  .cv-form .row{grid-template-columns:1fr}
  .cv-form{padding:.9rem}
  .cv-sec>*:not(summary):not(.cv-card):not(.cv-add){padding:0 .7em}
  .cv-sec>.cv-card{margin:0 .7em .5rem}
  .cv-sec>.cv-add{margin:.3rem .7em .7em}
  .cv-tpls{gap:.3rem}
  .cv-tpl{font-size:.72rem;padding:.25em .6em}
  .cv-actions{flex-direction:column}
  .cv-actions .btn{width:100%;text-align:center}
  .tool-options .row{flex-direction:column}
  .tool-shell{margin:1rem 0}
  .dropzone{padding:1.5rem 1rem}
  .pdf-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* ==========================================================================
   Images to PDF — tiles, per-image editor, PDF preview
   ========================================================================== */

/* ---- Grid tiles ----------------------------------------------------------
   A rotated image used to overflow its tile because a CSS transform doesn't
   change layout size. The rotation is now baked into a canvas, and the stage
   below gives every tile the same footprint whatever the aspect ratio. */
.img-tile { padding-bottom: .5rem; }
.img-tile-stage {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: repeating-conic-gradient(rgba(127,127,127,.14) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.img-tile-canvas {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.img-tile-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: img-spin .7s linear infinite;
}
@keyframes img-spin { to { transform: rotate(360deg); } }
.img-tile-error { font-size: .78rem; color: var(--text-muted); text-align: center; padding: 0 .5rem; }

.img-tile-num {
  position: absolute; top: 6px; left: 6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: rgba(0,0,0,.62); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
}
.img-tile .thumb-btn-wide { width: auto; padding: 0 .6rem; font-size: .78rem; font-weight: 600; }

/* Drag feedback: dim the source, and show an insertion edge on the target. */
.img-tile.dragging { opacity: .38; }
.img-tile.drop-before { box-shadow: inset 3px 0 0 var(--primary); }
.img-tile.drop-after  { box-shadow: inset -3px 0 0 var(--primary); }

.btn-block { display: block; width: 100%; }

/* ---- Shared modal --------------------------------------------------------- */
body.img-modal-open { overflow: hidden; }
.img-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(3, 8, 18, .68);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.img-modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(1000px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.img-modal-head, .img-modal-foot {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.2rem;
}
.img-modal-head { border-bottom: 1px solid var(--border); }
.img-modal-foot { border-top: 1px solid var(--border); }
.img-modal-head h3 { margin: 0; font-size: 1.05rem; }
.img-modal-spacer { flex: 1; }
.img-modal-close {
  margin-left: auto; background: transparent; border: 0;
  color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.img-modal-close:hover { color: var(--text); }
.img-modal-body { padding: 1.2rem; overflow: auto; }

/* ---- Editor --------------------------------------------------------------- */
.img-modal-body { display: grid; grid-template-columns: 1fr 260px; gap: 1.2rem; }
.img-preview-body { display: block; }
@media (max-width: 780px) { .img-modal-body { grid-template-columns: 1fr; } }

.img-editor-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  background: repeating-conic-gradient(rgba(127,127,127,.14) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
  border: 1px solid var(--border); border-radius: 12px; padding: .8rem;
}
.img-editor-canvas-wrap { position: relative; display: inline-flex; }
.img-editor-canvas { max-width: 100%; max-height: 52vh; display: block; border-radius: 4px; }

/* Crop overlay. The box is a real hit target (you can grab its middle to move
   the selection); the dimmed surround is a giant outward box-shadow, which
   avoids four separate shade elements. */
.img-editor-canvas-wrap.is-cropping { cursor: crosshair; touch-action: none; }
.img-editor-canvas-wrap.is-cropping .img-editor-canvas { user-select: none; -webkit-user-drag: none; }

.img-crop-box {
  position: absolute;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
  cursor: move;
}
/* Rule-of-thirds guides. */
.img-crop-grid { position: absolute; inset: 0; pointer-events: none; }
.img-crop-grid::before, .img-crop-grid::after {
  content: ''; position: absolute; inset: 0;
  background-repeat: no-repeat;
}
.img-crop-grid::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.38) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.38) 1px, transparent 1px);
  background-size: 1px 100%, 1px 100%;
  background-position: 33.33% 0, 66.66% 0;
}
.img-crop-grid::after {
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.38) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.38) 1px, transparent 1px);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 33.33%, 0 66.66%;
}

.img-crop-handle {
  position: absolute;
  background: #fff; border: 2px solid var(--primary); border-radius: 3px;
  width: 14px; height: 14px;
}
.img-crop-handle[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.img-crop-handle[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.img-crop-handle[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.img-crop-handle[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
/* Edge grips: thin bars centred on each side. */
.img-crop-edge { border-radius: 2px; }
.img-crop-handle[data-h="n"] { top: -5px; left: 50%; margin-left: -13px; width: 26px; height: 9px; cursor: ns-resize; }
.img-crop-handle[data-h="s"] { bottom: -5px; left: 50%; margin-left: -13px; width: 26px; height: 9px; cursor: ns-resize; }
.img-crop-handle[data-h="w"] { left: -5px; top: 50%; margin-top: -13px; width: 9px; height: 26px; cursor: ew-resize; }
.img-crop-handle[data-h="e"] { right: -5px; top: 50%; margin-top: -13px; width: 9px; height: 26px; cursor: ew-resize; }

.img-crop-size {
  position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%);
  background: rgba(0,0,0,.78); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1;
  padding: .35em .6em; border-radius: 5px; white-space: nowrap; pointer-events: none;
}
.img-sub-label { display: block; font-size: .78rem; font-weight: 600; margin: .6rem 0 .3rem; }
.img-crop-panel select { width: 100%; }

.img-tile-flag {
  position: absolute; top: 6px; right: 6px;
  background: var(--primary); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .22em .45em; border-radius: 4px;
}

.img-editor-side .field { margin-bottom: 1rem; }
.img-editor-side label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.img-editor-side input[type=range] { width: 100%; accent-color: var(--primary); }
.img-btn-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.img-btn-row .btn { padding: .45rem .7rem; font-size: .9rem; }

/* ---- Preview -------------------------------------------------------------- */
.img-preview-pages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.1rem; margin-top: 1rem;
}
.img-preview-page { margin: 0; text-align: center; }
.img-preview-canvas {
  max-width: 100%; height: auto; background: #fff;
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.img-preview-page figcaption { font-size: .78rem; color: var(--text-muted); margin-top: .4rem; }

/* Document converters (Word/Markdown/HTML/EPUB/Excel to PDF) share the image
   tools' workspace shell, but have no per-item grid to fill the main column. */
.doc-preview-hint {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.2rem;
  text-align: center;
  margin-top: .6rem;
}
.doc-preview-hint .hint { margin: 0; }

/* ==========================================================================
   CV builder — form field arrangement
   .cvf and .cv-toggle previously had no rules at all, so a label fell back to
   display:inline and the "Show" text wrapped under its own checkbox inside the
   narrow two-column rows.
   ========================================================================== */
.cvf { display: grid; gap: .3rem; min-width: 0; }
.cvf > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; min-width: 0;
}
.cvf > span,
.cvf > div > span:first-child {
  font-size: .82rem; font-weight: 600; color: var(--text-secondary);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-toggle {
  display: inline-flex; align-items: center; gap: .3em; flex: none;
  font-size: .72rem; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.cv-toggle input[type=checkbox] {
  width: auto !important; margin: 0; flex: none; accent-color: var(--primary);
}
.cv-toggle:hover { color: var(--primary); }
/* The photo's Show toggle is present before an upload so the control is
   discoverable, but there is nothing to show yet — make that state read as
   deliberately inactive rather than broken. */
.cv-toggle:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cv-toggle:has(input:disabled):hover { color: var(--text-muted); }

/* Show toggle + remove link sit on one row under the upload button. */
.cv-photo-actions {
  display: flex; align-items: center; gap: .75rem;
  margin-top: .35rem; flex-wrap: wrap;
}

/* Inputs sit tighter now that every field owns its label row. */
.cv-form .cvf input,
.cv-form .cvf textarea,
.cv-form .cvf select { margin: 0; }

/* Three-up rows for short fields (city/state, country/postal and friends). */
.cv-form .row-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; }
@media (max-width: 520px) {
  .cv-form .row, .cv-form .row-3 { grid-template-columns: 1fr; }
}

/* Preview column framing */
.cv-preview-wrap { display: flex; flex-direction: column; }
.cv-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 0 0 .75rem; font-size: .8rem; color: var(--text-muted);
}
.cv-preview-head strong { color: var(--text); font-size: .85rem; }
.cv-zoom { display: inline-flex; align-items: center; gap: .3rem; }
.cv-zoom button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 6px; width: 26px; height: 24px; cursor: pointer; line-height: 1; font-size: .8rem;
}
.cv-zoom button:hover { border-color: var(--primary); color: var(--primary); }
.cv-zoom span { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }

/* Group dividers inside the CV form's Personal details panel. */
.cv-form .cv-group,
.cv-sec .cv-group {
  margin: .9rem 0 .1rem; padding-top: .7rem;
  border-top: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cv-form .cv-group:first-of-type, .cv-sec .cv-group:first-of-type { margin-top: .4rem; }

/* ---- CV builder: drag-to-reorder sections -------------------------------- */
.cv-sections { display: block; }
.cv-drag { position: relative; }
.cv-drag .cv-sec { margin-bottom: .7rem; }

/* The grip is the only place a drag can start, so text inside an open
   section stays selectable. */
.cv-drag-handle {
  position: absolute; left: 4px; top: 11px; z-index: 2;
  width: 18px; height: 22px; line-height: 22px; text-align: center;
  color: var(--text-muted); font-size: .8rem; letter-spacing: -2px;
  cursor: grab; border-radius: 4px; user-select: none;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.cv-drag:hover .cv-drag-handle { opacity: 1; }
.cv-drag-handle:hover { color: var(--primary); background: var(--surface-hover); }
.cv-drag-handle:active { cursor: grabbing; }
/* Leave room for the grip so it never sits on top of the section title. */
.cv-drag .cv-sec > summary { padding-left: 1.7em; }

.cv-drag.dragging { opacity: .4; }
.cv-drag.drop-above::before,
.cv-drag.drop-below::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background: var(--primary); border-radius: 2px;
}
.cv-drag.drop-above::before { top: -3px; }
.cv-drag.drop-below::after { bottom: 2px; }

/* ---- CV builder: rich-text fields (summary + custom sections) ------------
   Quill replaces the element with .ql-container and puts .ql-toolbar before
   it, so the height belongs on the container, not the mount point. */
.cv-rte { min-height: 130px; }
.cv-sec .ql-toolbar.ql-snow {
  border-color: var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bg-alt);
}
.cv-sec .ql-container.ql-snow {
  border-color: var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--input-bg); color: var(--text);
  min-height: 130px; font: inherit; font-size: .92rem;
}
.cv-sec .ql-editor { min-height: 130px; }
.cv-sec .ql-editor.ql-blank::before { color: var(--text-muted); font-style: normal; }
.cv-sec .ql-snow .ql-stroke { stroke: var(--text-secondary); }
.cv-sec .ql-snow .ql-fill { fill: var(--text-secondary); }
.cv-sec .ql-snow .ql-picker { color: var(--text-secondary); }
.cv-sec .ql-snow button:hover .ql-stroke,
.cv-sec .ql-snow button.ql-active .ql-stroke { stroke: var(--primary); }
.cv-sec .ql-snow button:hover .ql-fill,
.cv-sec .ql-snow button.ql-active .ql-fill { fill: var(--primary); }
/* The RTE owns its own label row, so don't let .cvf squash it. */
.cvf > .cv-rte, .cvf > .ql-toolbar, .cvf > .ql-container { width: 100%; }

/* CV header: one line per detail group (identity / contact / address / links)
   rather than a single run-on string that wraps arbitrarily. */
.pv-contact > div + div { margin-top: 2px; }

/* Retention notice under the CV builder. Deleting a visitor's draft after 180
   days has to be stated where they are working, not only in the admin. */
.cv-retention{color:var(--muted);font-size:.85rem;margin:1.25rem 0 0;max-width:60ch}