:root{
  --ink:#16233D;
  --ink-soft:#3A4863;
  --paper:#F7F5EF;
  --paper-white:#FFFFFF;
  --line:#DBD6C9;
  --amber:#C98A2C;
  /* Darkened from the original #A6701D (3.89:1 on the paper background,
     below the 4.5:1 WCAG AA minimum for normal text) to #8A5D18 (~5.3:1),
     same hue/saturation. See the Phase 4 accessibility notes in README.md
     — this also matches ACCENT_COLORS' "amber" entry in app.js so the
     app chrome and a resume using the (free, default) Amber accent stay
     in sync. */
  --amber-deep:#8A5D18;
  --green:#2F6F4E;
  --slate:#5B6472;
  --danger:#B3432B;
  --font-display:"Source Serif 4", Georgia, serif;
  --font-body:"IBM Plex Sans", system-ui, sans-serif;
  --radius:4px;
  --shadow-paper:0 1px 2px rgba(22,35,61,.06), 0 12px 32px -16px rgba(22,35,61,.25);

  /* ---------- glass chrome tokens ----------
     Scoped to app chrome only (topbar, cards, modals, fields, tabs).
     Never applied to .paper/.template-* — the resume document itself
     stays opaque and print-safe. Hues reuse --ink/--amber/--green
     rather than a generic purple/blue glass gradient, so the frosted
     chrome still reads as this app's palette, not a stock effect.
     Pushed stronger than a subtle hint — real glassmorphism reads as
     frosted glass at a glance, not a faint tint on white. */
  --glass-radius:18px;
  --glass-bg:rgba(255,255,255,.42);
  --glass-bg-strong:rgba(255,255,255,.58);
  --glass-bg-soft:rgba(255,255,255,.26);
  --glass-border:rgba(255,255,255,.75);
  --glass-shadow:0 8px 40px -6px rgba(22,35,61,.35), 0 1.5px 0 rgba(255,255,255,.65) inset, 0 -1px 0 rgba(255,255,255,.15) inset;
  --glass-blur:blur(28px) saturate(180%);
  --glass-dark-bg:rgba(22,35,61,.5);
  --glass-dark-border:rgba(255,255,255,.18);
}

/* Fixed gradient mesh so translucent/blurred chrome has something vivid
   to refract — a flat/pale backdrop behind glass just looks like grey
   haze, so this leans more saturated than a typical background.
   Lives on body::before (not body itself) so it stays fixed under
   scrolling content instead of repainting per-panel. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 850px 700px at 6% -8%, rgba(224,158,54,.55), transparent 60%),
    radial-gradient(ellipse 750px 650px at 96% 8%, rgba(58,143,102,.5), transparent 58%),
    radial-gradient(ellipse 900px 750px at 20% 108%, rgba(122,74,177,.4), transparent 60%),
    radial-gradient(ellipse 1000px 850px at 100% 100%, rgba(22,35,61,.85), transparent 62%),
    linear-gradient(160deg, #16223d 0%, #1c3157 40%, #2a4a7c 75%, #35618f 100%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:transparent;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;}

/* ---------- accessibility utilities (Phase 4) ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:0;top:-3rem;background:var(--glass-dark-bg);color:#fff;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  padding:.6rem 1rem;z-index:1000;border-radius:0 0 var(--radius) 0;
  font-size:.85rem;font-weight:600;transition:top .1s ease;
}
.skip-link:focus{top:0;}
.current-badge{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;
  color:var(--green);border:1px solid var(--green);border-radius:999px;
  padding:.03rem .4rem;vertical-align:middle;margin-left:.3rem;text-transform:uppercase;
}
.turnstile-widget{margin:.6rem 0;min-height:0;}
.turnstile-widget:empty{margin:0;}

.view[hidden]{display:none;}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  color:var(--ink);
  letter-spacing:-.01em;
}
.wordmark span{color:var(--amber-deep);}
.wordmark.small{font-size:1.2rem;}

/* ---------- buttons ---------- */
.btn{
  border:1px solid transparent;
  border-radius:12px;
  padding:.65rem 1.1rem;
  font-size:.92rem;
  font-weight:600;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-block{width:100%;display:block;}
.btn-primary{background:var(--ink);color:var(--paper-white);box-shadow:0 4px 16px -4px rgba(22,35,61,.5);}
.btn-primary:hover{background:#1F2E4D;}
.btn-primary:disabled{background:var(--slate);cursor:not-allowed;box-shadow:none;}
.btn-accent{background:var(--amber);color:var(--ink);box-shadow:0 4px 16px -4px rgba(201,138,44,.5);}
.btn-accent:hover{background:var(--amber-deep);color:#fff;}
.btn-outline{
  background:var(--glass-bg-soft);border-color:var(--glass-border);color:var(--ink);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.btn-outline:hover{border-color:var(--ink-soft);background:var(--glass-bg);}
.btn-google{display:flex;align-items:center;justify-content:center;gap:.55rem;}
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0;color:var(--ink-soft);font-size:.82rem;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--glass-border);}
.btn-ghost{background:transparent;color:var(--ink-soft);}
.btn-ghost:hover{color:var(--ink);}
.link-btn{
  background:none;border:none;color:var(--ink-soft);
  text-decoration:underline;font-size:.85rem;margin-top:1rem;
}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;}
.field span{font-size:.78rem;color:var(--slate);font-weight:500;}
.field input,.field textarea{
  border:1px solid var(--glass-border);
  border-radius:10px;
  padding:.6rem .7rem;
  font-size:.95rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  color:var(--ink);
}
.field input:focus,.field textarea:focus{border-color:var(--amber-deep);}
.field-row{display:flex;gap:.8rem;}
.field-row .field{flex:1;}
.field-row-btn{align-self:flex-end;margin-bottom:.9rem;white-space:nowrap;}
.hint{font-size:.82rem;color:var(--slate);line-height:1.5;}
.pro-note{color:var(--amber-deep);font-weight:600;}

/* ---------- auth ---------- */
.view-auth{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.auth-card{
  position:relative;
  overflow:hidden;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  padding:2.2rem 2rem;
  width:100%;max-width:380px;
  text-align:left;
}
.auth-card::before{
  content:"";position:absolute;top:0;left:-20%;right:-20%;height:140px;
  background:linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 35%, transparent 60%);
  pointer-events:none;
}
.auth-tag{color:var(--slate);margin:.4rem 0 1.6rem;font-size:.95rem;}
.auth-error{color:var(--danger);font-size:.85rem;margin-top:.8rem;}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.2rem;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 4px 24px -8px rgba(22,35,61,.2);
  position:sticky;top:0;z-index:10;
}
.topbar-left{display:flex;align-items:center;gap:.9rem;}
.resume-switcher{
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);border-radius:999px;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  padding:.35rem .8rem;font-size:.82rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:.3rem;
}
.resume-switcher:hover{border-color:var(--ink-soft);}
.resume-switcher .chevron{color:var(--slate);font-size:.7rem;}
.topbar-actions{display:flex;align-items:center;gap:.7rem;}
.save-status{font-size:.78rem;color:var(--slate);}

/* ---------- builder layout ---------- */
.builder{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(360px,1.1fr);
  gap:0;
  min-height:calc(100vh - 57px);
}
.panel-form{
  padding:1.2rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);
  overflow-y:auto;
}
.panel-preview{
  padding:1.2rem;
  background:transparent;
  display:flex;flex-direction:column;
  overflow-y:auto;
}
@media (max-width:860px){
  .builder{grid-template-columns:1fr;}
  .panel-form{border-right:none;border-bottom:1px solid var(--glass-border);}
}

/* ---------- tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1.2rem;border-bottom:1px solid var(--glass-border);}
.tab{
  background:none;border:none;padding:.6rem .3rem;
  font-size:.85rem;font-weight:600;color:var(--slate);
  border-bottom:2px solid transparent;margin-right:.6rem;
}
.tab.active{color:var(--ink);border-bottom-color:var(--amber-deep);}
.form-section{display:none;}
.form-section.active{display:block;}

/* ---------- repeatable entries ---------- */
.repeat-item{
  border:1px solid var(--glass-border);border-radius:var(--glass-radius);
  padding:.9rem;margin-bottom:.9rem;background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  position:relative;
}
.repeat-item .remove-item{
  position:absolute;top:.6rem;right:.6rem;
  background:none;border:none;color:var(--slate);font-size:.8rem;
}

/* ---------- optimize ---------- */
.optimize-result{
  margin-top:1rem;padding:.9rem;background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
}
.optimize-result h4{margin:1rem 0 .5rem;font-size:.9rem;}
.optimize-result ul{margin:0 0 .9rem;padding-left:1.1rem;font-size:.87rem;color:var(--ink-soft);}
.optimize-result li{margin-bottom:.35rem;}

.match-score-row{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem;}
.match-score-ring{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--green) calc(var(--pct,0) * 1%), var(--line) 0);
  flex-shrink:0;
}
.match-score-ring span{
  background:var(--paper-white);width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;
}
.match-score-label{font-weight:600;font-size:.9rem;}
.keyword-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem;}
.chip{
  font-size:.76rem;padding:.25rem .55rem;border-radius:999px;border:1px solid var(--glass-border);
  background:var(--glass-bg-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  color:var(--ink-soft);
}
.chip.matched{border-color:var(--green);color:var(--green);background:rgba(238,246,241,.7);}
.chip.missing{border-color:var(--danger);color:var(--danger);background:rgba(251,238,234,.7);}

/* ---------- readiness trend (match score / ATS score over time) ---------- */
.readiness-trend{
  margin:1rem 0;padding:.9rem;background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow);
}
.readiness-trend h4{margin:0 0 .6rem;font-size:.9rem;}
.readiness-trend-row{display:flex;align-items:center;gap:.9rem;}
.readiness-sparkline{flex-shrink:0;width:110px;height:40px;}
.readiness-sparkline svg{display:block;width:100%;height:100%;}
.readiness-trend-row .hint{margin:0;}

/* ---------- CV photo (preview header) ---------- */
.paper .p-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.paper .p-header-text{flex:1;min-width:0;}
.paper .p-photo{
  width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--accent);background:var(--paper-white);
}
.template-executive .p-header{justify-content:center;}
.template-executive .p-photo{order:-1;}

/* ---------- photo upload widgets (Basics tab + Account modal) ---------- */
.photo-field{margin-bottom:1.1rem;}
.photo-upload-row{display:flex;align-items:center;gap:.9rem;margin:.3rem 0 .6rem;}
.photo-preview{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;
  background:var(--paper-white) center/cover no-repeat;
  border:1px solid var(--line);
}
.photo-preview:empty{background-color:#EEF0F3;}
.photo-upload-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.checkbox-row{
  display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink);
  font-weight:500;margin-bottom:.3rem;
}
.checkbox-row input{width:auto;margin:0;}

/* ---------- account avatar ---------- */
.account-btn{display:flex;align-items:center;gap:.5rem;}
.account-avatar{
  display:inline-block;width:22px;height:22px;border-radius:50%;
  background:var(--line) center/cover no-repeat;flex-shrink:0;
}
.account-avatar-preview{width:72px;height:72px;}

/* ---------- footer links ---------- */
.footer-links{margin-top:1rem;text-align:center;font-size:.78rem;}
.footer-links a{color:var(--slate);}
.topbar-privacy{margin-top:0;font-size:.78rem;}

/* ---------- preview / paper ---------- */
.preview-toolbar{display:flex;justify-content:flex-end;margin-bottom:1rem;gap:.6rem;}
.paper-wrap{flex:1;display:flex;justify-content:center;}
.paper{
  background:var(--paper-white);
  width:100%;max-width:640px;min-height:840px;
  padding:2.6rem 2.4rem;
  box-shadow:var(--shadow-paper);
  font-family:var(--paper-font-body, var(--font-body));
  color:var(--ink);
  /* Per-resume accent color + font pairing (set inline by applyPaperStyle()
     in app.js from resume.accentColor / resume.fontPairing) fall back to
     the site defaults so the paper still looks right before JS runs. */
  --accent:var(--amber);
  --accent-deep:var(--amber-deep);
}
.paper h1{font-family:var(--paper-font-display, var(--font-display));font-size:1.7rem;margin:0 0 .1rem;}
.paper .p-headline{color:var(--accent-deep);font-weight:600;font-size:.95rem;margin-bottom:.3rem;}
.paper .p-contact{font-size:.8rem;color:var(--slate);margin-bottom:1.2rem;}
.paper .p-summary{font-size:.9rem;line-height:1.6;margin-bottom:1.3rem;}
.paper h2{
  font-family:var(--paper-font-display, var(--font-display));font-size:.95rem;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:.25rem;margin:1.3rem 0 .7rem;
  color:var(--ink);
}
.paper .p-role{margin-bottom:1rem;}
.paper .p-role-head{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem;}
.paper .p-role-sub{font-size:.82rem;color:var(--slate);margin-bottom:.3rem;}
.paper ul.p-bullets{margin:0;padding-left:1.1rem;font-size:.85rem;line-height:1.55;}
.paper .p-skills{font-size:.85rem;line-height:1.6;}

/* Compact — free */
.paper.template-compact{padding:1.8rem;}
.template-compact h1{font-size:1.4rem;}

/* Minimal — free. Quiet: no accent color, small-caps section labels. */
.paper.template-minimal .p-headline{color:var(--ink-soft);}
.template-minimal h1{font-weight:600;}
.template-minimal h2{
  border-bottom:none;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  color:var(--slate);font-family:var(--paper-font-body, var(--font-body));font-weight:600;
}

/* Modern — Pro. Sans display font, colored rule under the header, pill section tags. */
.paper.template-modern h1{font-family:var(--paper-font-body, var(--font-body));font-weight:700;}
.template-modern .p-contact{padding-bottom:1rem;border-bottom:3px solid var(--accent);margin-bottom:1.3rem;}
.template-modern h2{
  border-bottom:none;display:inline-block;background:var(--accent);color:#fff;
  padding:.15rem .55rem;border-radius:999px;font-size:.7rem;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--paper-font-body, var(--font-body));
}

/* Executive — Pro. Centered header, formal double-rule section labels. */
.paper.template-executive h1,
.template-executive .p-headline,
.template-executive .p-contact{text-align:center;}
.template-executive .p-contact{margin-bottom:1.4rem;}
.template-executive h2{
  text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;
  color:var(--accent-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.4rem 0;
}

/* Bold — Pro. Large accent-colored name, left accent bar on each role block. */
.paper.template-bold h1{color:var(--accent-deep);font-size:2rem;}
.template-bold .p-headline{color:var(--ink-soft);}
.template-bold h2{border-bottom:2px solid var(--accent);color:var(--accent-deep);}
.template-bold .p-role{border-left:3px solid var(--accent);padding-left:.7rem;}

/* Elegant — Pro. Italic headline, wide accent rule, airy uppercase labels. */
.paper.template-elegant .p-headline{font-style:italic;color:var(--accent-deep);font-weight:400;}
.template-elegant h1{letter-spacing:.02em;}
.template-elegant .p-contact{border-bottom:1px solid var(--accent);padding-bottom:.9rem;}
.template-elegant h2{
  border-bottom:none;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:var(--ink-soft);
}

/* Technical — Pro. Monospace headings, boxed section labels, dates in mono. */
.paper.template-technical h1,
.template-technical h2{font-family:'IBM Plex Mono',monospace;}
.template-technical h1{font-weight:600;}
.template-technical h2{
  border-bottom:none;background:#EEF0F3;color:var(--ink);font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.3rem .5rem;
}
.template-technical .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--slate);}

/* Ivy — Pro. Traditional academic serif: restrained color, wide-tracked name, thin rule. */
.paper.template-ivy{font-family:Georgia,'Source Serif 4',serif;}
.template-ivy h1{font-family:Georgia,'Source Serif 4',serif;letter-spacing:.08em;text-transform:uppercase;font-size:1.35rem;}
.template-ivy .p-headline{color:var(--ink-soft);font-weight:400;font-style:italic;}
.template-ivy .p-contact{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.5rem 0;text-align:center;}
.template-ivy h2{
  border-bottom:none;font-weight:400;font-variant:small-caps;letter-spacing:.06em;
  font-size:1rem;color:var(--accent-deep);margin-top:1.5rem;
}

/* Vibrant — Pro. Colored headline chip, energetic section labels. */
.template-vibrant .p-headline{
  display:inline-block;background:var(--accent);color:#fff;font-weight:700;
  padding:.15rem .6rem;border-radius:4px;font-size:.85rem;
}
.paper.template-vibrant h1{color:var(--accent-deep);}
.template-vibrant h2{
  border-bottom:none;color:var(--accent-deep);font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.03em;
}
.template-vibrant h2::before{content:"— ";color:var(--accent);}

/* Banner — Pro. Full-bleed color band behind the whole header. */
.paper.template-banner .p-header{
  background:var(--accent-deep);color:#fff;margin:-2.6rem -2.4rem 1.3rem;padding:2rem 2.4rem;
}
.template-banner .p-header h1,
.template-banner .p-headline,
.template-banner .p-contact{color:#fff;}
.template-banner .p-photo{border-color:#fff;}
.template-banner h2{color:var(--accent-deep);}

/* Ledger — Pro. Table-like rows: muted mono dates, a rule under every entry. */
.template-ledger .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--slate);font-size:.78rem;}
.template-ledger .p-role{border-bottom:1px solid var(--line);padding-bottom:.7rem;}
.template-ledger h2{
  border-bottom:2px solid var(--ink);text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;color:var(--ink);
}

/* Underline — Pro. Thick accent rule under the name, square accent bullets on labels. */
.paper.template-underline h1{border-bottom:3px solid var(--accent);padding-bottom:.35rem;display:inline-block;}
.template-underline h2{
  border-bottom:none;padding-left:.9rem;position:relative;color:var(--ink);
  font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
}
.template-underline h2::before{content:"";position:absolute;left:0;top:.15em;width:.5em;height:.5em;background:var(--accent);}

/* Panel — Pro. Section labels sit in a full bordered box, like segmented panels. */
.template-panel h2{
  border:1px solid var(--line);border-bottom:1px solid var(--line);background:#F7F5F0;
  padding:.35rem .6rem;font-size:.8rem;letter-spacing:.03em;color:var(--accent-deep);
}
.paper.template-panel .p-contact{border:1px solid var(--line);padding:.5rem .7rem;display:inline-block;}

/* Reverse — Pro. Role rows read date-first (reversed), accent-colored role text. */
.template-reverse .p-role-head{flex-direction:row-reverse;}
.template-reverse .p-role-head span:first-child{color:var(--accent-deep);font-weight:600;}
.template-reverse .p-role-head span:last-child{color:var(--slate);font-weight:400;}
.template-reverse h2{border-bottom:none;border-top:2px solid var(--accent);padding-top:.4rem;}

/* Newsprint — Pro. Dense serif columns feel: tight leading, square accent bullet markers. */
.paper.template-newsprint{font-family:Georgia,'Source Serif 4',serif;}
.template-newsprint .p-contact{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;}
.template-newsprint .p-summary,
.template-newsprint ul.p-bullets{line-height:1.45;}
.template-newsprint ul.p-bullets{list-style:none;padding-left:0;}
.template-newsprint ul.p-bullets li{position:relative;padding-left:1rem;}
.template-newsprint ul.p-bullets li::before{content:"▪";color:var(--accent-deep);position:absolute;left:0;}
.template-newsprint h2{border-bottom:1px double var(--ink);}

/* Signature — Pro. Large italic serif name, centered ornamental rule under contact. */
.paper.template-signature h1{font-style:italic;font-weight:600;color:var(--accent-deep);font-size:1.9rem;}
.template-signature .p-contact{text-align:center;position:relative;padding-bottom:1rem;margin-bottom:1.3rem;}
.template-signature .p-contact::after{
  content:"";display:block;width:40px;height:2px;background:var(--accent);
  margin:.6rem auto 0;
}
.template-signature h2{border-bottom:none;text-align:center;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;}

/* Halo — Pro. Soft accent-tinted card behind the header, glow ring around the photo. */
.paper.template-halo .p-header{
  background:color-mix(in srgb, var(--accent) 12%, white);
  border:1px solid var(--accent);border-radius:12px;
  padding:1.3rem 1.5rem;margin-bottom:1.3rem;
}
.template-halo .p-photo{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, white);}
.template-halo h2{color:var(--accent-deep);border-bottom:1px solid var(--accent);}

/* Skyline — Pro. Accent-colored spine down the left edge of the whole page. */
.paper.template-skyline{border-left:6px solid var(--accent);}
.template-skyline h1{color:var(--accent-deep);}
.template-skyline h2{
  border-bottom:none;border-top:1px solid var(--line);padding-top:.5rem;
  text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;
}

/* Editorial — Pro. Heavy name, thin airy headline, very wide-tracked section labels. */
.paper.template-editorial h1{font-weight:800;letter-spacing:-.01em;}
.template-editorial .p-headline{
  text-transform:uppercase;font-weight:300;letter-spacing:.12em;font-size:.78rem;
  color:var(--ink-soft);
}
.template-editorial h2{
  border-bottom:none;text-transform:uppercase;letter-spacing:.3em;font-size:.68rem;
  color:var(--accent-deep);font-weight:600;margin-top:1.8rem;
}

/* Corporate — Pro. Full-bleed solid color bars for section headers, like a memo. */
.template-corporate h2{
  border-bottom:none;background:var(--accent-deep);color:#fff;font-weight:700;
  margin:1.3rem -2.4rem .7rem;padding:.4rem 2.4rem;font-size:.78rem;
  letter-spacing:.03em;text-transform:uppercase;
}

/* Tab — Pro. Section labels sit in a small bordered tab, dossier/folder feel. */
.template-tab h2{
  display:inline-block;border:1px solid var(--accent);border-top:3px solid var(--accent);
  border-bottom:none;padding:.2rem .6rem;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--accent-deep);background:var(--paper-white);
}
.template-tab .p-role{border-bottom:1px dashed var(--line);padding-bottom:.6rem;}

/* Duotone — Pro. Split accent color block behind the header, clean sans body throughout. */
.paper.template-duotone .p-header{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, white) 50%, transparent 50%);
  padding:1.2rem 1.4rem;margin:-2.6rem -2.4rem 1.3rem;
}
.template-duotone h1{color:var(--accent-deep);font-weight:700;}
.template-duotone h2{
  border-bottom:2px solid var(--accent);color:var(--ink);font-weight:700;
  font-size:.8rem;text-transform:uppercase;
}

/* Outline — Pro. Every role wrapped in a thin outline, section labels boxed — structured and neat. */
.template-outline .p-role{border:1px solid var(--line);border-radius:4px;padding:.6rem .8rem;margin-bottom:.6rem;}
.template-outline h2{
  border-bottom:none;border:1px solid var(--ink);display:inline-block;padding:.1rem .5rem;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);
}

/* Gridline — Pro. Faint background grid, mono contact line, crisp structured feel. */
.paper.template-gridline{
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:24px 24px;background-color:var(--paper-white);
}
.template-gridline .p-contact{font-family:'IBM Plex Mono',monospace;font-size:.76rem;}
.template-gridline h2{
  border-bottom:2px solid var(--ink);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;
}

/* Focus — Pro. Generous whitespace, small-caps throughout, quiet and minimal. */
.paper.template-focus{padding:3rem 2.6rem;}
.template-focus h1{font-weight:400;letter-spacing:.02em;}
.template-focus .p-headline{font-variant:small-caps;letter-spacing:.04em;color:var(--ink-soft);}
.template-focus h2{
  border-bottom:none;font-variant:small-caps;letter-spacing:.08em;font-size:1rem;
  color:var(--ink-soft);font-weight:400;margin-top:1.6rem;
}

/* Statement — Pro. Oversized bold name as the visual anchor, minimal everything else. */
.paper.template-statement h1{font-size:2.6rem;font-weight:900;letter-spacing:-.02em;line-height:1;}
.template-statement .p-headline{color:var(--accent-deep);font-weight:600;margin-top:.3rem;}
.template-statement h2{
  border-bottom:none;font-weight:700;text-transform:uppercase;font-size:.7rem;
  letter-spacing:.1em;color:var(--slate);
}

/* Consulting — Pro. Dark inline section tags, chevron bullets — dense and analytical. */
.template-consulting h2{
  border-bottom:none;background:var(--ink);color:#fff;display:inline-block;
  padding:.15rem .55rem;font-size:.75rem;letter-spacing:.03em;text-transform:uppercase;
}
.template-consulting ul.p-bullets{list-style:none;padding-left:0;}
.template-consulting ul.p-bullets li{position:relative;padding-left:1.1rem;}
.template-consulting ul.p-bullets li::before{content:"▸";color:var(--accent-deep);position:absolute;left:0;}

/* Nonprofit — Pro. Warm and approachable, diamond-marked section labels, roomy role spacing. */
.template-nonprofit .p-headline{color:var(--accent-deep);font-weight:500;}
.template-nonprofit h2{border-bottom:none;color:var(--accent-deep);font-weight:600;font-size:.85rem;letter-spacing:.02em;}
.template-nonprofit h2::before{content:"◆ ";color:var(--accent);font-size:.7em;}
.template-nonprofit .p-role{margin-bottom:1rem;}

/* Hospitality — Pro. Centered italic serif header, dotted dividers — warm and refined. */
.paper.template-hospitality h1{font-style:italic;font-family:Georgia,'Source Serif 4',serif;}
.template-hospitality .p-header-text,
.template-hospitality .p-contact{text-align:center;}
.template-hospitality h2{
  text-align:center;border-bottom:none;text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;color:var(--ink-soft);
}
.template-hospitality h2::before{content:"• ";color:var(--accent);}
.template-hospitality h2::after{content:" •";color:var(--accent);}

/* Capital — Pro. Finance & banking: double rule under the name, tabular mono figures. */
.paper.template-capital h1{border-bottom:3px double var(--ink);padding-bottom:.35rem;}
.template-capital .p-contact{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.02em;}
.template-capital .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--accent-deep);}
.template-capital h2{
  border-bottom:1px solid var(--accent-deep);text-transform:uppercase;letter-spacing:.1em;
  font-size:.75rem;color:var(--ink);font-weight:700;
}

/* Freight — Pro. Supply chain & logistics: routed arrow bullets, boxed date labels. */
.template-freight ul.p-bullets{list-style:none;padding-left:0;}
.template-freight ul.p-bullets li{position:relative;padding-left:1.2rem;}
.template-freight ul.p-bullets li::before{content:"→";color:var(--accent-deep);position:absolute;left:0;font-weight:700;}
.template-freight .p-role-head span:last-child{
  border:1px solid var(--line);border-radius:3px;padding:.05rem .4rem;font-size:.72rem;color:var(--slate);
}
.template-freight h2{
  border-bottom:none;border-left:4px solid var(--accent);padding-left:.5rem;
  text-transform:uppercase;font-size:.8rem;letter-spacing:.04em;
}

/* Sentinel — Pro. EHS (environment, health & safety): placard-bordered header, alert-marked labels. */
.paper.template-sentinel .p-header{border:2px solid var(--ink);padding:1rem 1.2rem;margin-bottom:1.2rem;}
.template-sentinel h1{text-transform:uppercase;letter-spacing:.03em;}
.template-sentinel h2{
  border-bottom:none;background:var(--accent);color:#fff;font-weight:700;
  padding:.2rem .6rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
}
.template-sentinel h2::before{content:"■ ";font-size:.7em;}

/* Pipeline — Pro. Sales & marketing: bold accent name, chip-style dates, upward bullet markers. */
.paper.template-pipeline h1{color:var(--accent-deep);font-weight:800;}
.template-pipeline .p-role-head span:last-child{
  background:color-mix(in srgb, var(--accent) 15%, white);color:var(--accent-deep);
  border-radius:10px;padding:.05rem .55rem;font-size:.72rem;font-weight:600;
}
.template-pipeline ul.p-bullets{list-style:none;padding-left:0;}
.template-pipeline ul.p-bullets li{position:relative;padding-left:1.2rem;}
.template-pipeline ul.p-bullets li::before{content:"↗";color:var(--accent-deep);position:absolute;left:0;font-weight:700;}
.template-pipeline h2{
  border-bottom:2px solid var(--accent);color:var(--accent-deep);font-weight:800;
  text-transform:uppercase;font-size:.8rem;
}

/* Foundry — Pro. Mining & industrial engineering: bracketed blueprint labels, structural rules. */
.paper.template-foundry h1{
  text-transform:uppercase;letter-spacing:.04em;font-weight:800;
  border-bottom:4px solid var(--ink);padding-bottom:.3rem;
}
.template-foundry h2{
  border-bottom:none;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.05em;color:var(--accent-deep);
}
.template-foundry h2::before{content:"[ ";}
.template-foundry h2::after{content:" ]";}
.template-foundry .p-role{border-left:2px solid var(--line);padding-left:.7rem;}

/* Realty — Pro. Real estate: spacious header, listing-style role rows, thin accent divider. */
.paper.template-realty .p-header{padding-bottom:1rem;border-bottom:1px solid var(--accent);margin-bottom:1.2rem;}
.template-realty h1{font-weight:700;letter-spacing:.01em;}
.template-realty .p-headline{color:var(--accent-deep);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;}
.template-realty .p-role-head{border-bottom:1px dotted var(--line);padding-bottom:.25rem;}
.template-realty h2{
  border-bottom:none;color:var(--ink);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.05em;
}

/* Storefront — Pro. Retail & merchandising: price-tag date chips, small round bullets. */
.template-storefront .p-role-head span:last-child{
  background:var(--accent);color:#fff;border-radius:3px;padding:.05rem .5rem;font-size:.72rem;font-weight:600;
}
.template-storefront ul.p-bullets{list-style:none;padding-left:0;}
.template-storefront ul.p-bullets li{position:relative;padding-left:1.1rem;}
.template-storefront ul.p-bullets li::before{content:"●";color:var(--accent);position:absolute;left:0;font-size:.6em;top:.4em;}
.template-storefront h2{
  border-bottom:2px dashed var(--accent);color:var(--accent-deep);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;padding-bottom:.2rem;
}

/* Circuit — Pro. Energy & utilities: meter-style mono figures, grid rule around section labels. */
.paper.template-circuit h1,
.template-circuit .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;}
.template-circuit h1{letter-spacing:.02em;}
.template-circuit h2{
  border-bottom:1px solid var(--ink);border-top:1px solid var(--ink);padding:.2rem 0;
  text-align:center;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em;color:var(--accent-deep);
}

/* Relay — Pro. Telecommunications: dashed connector rule down each role, signal-wave section labels. */
.template-relay .p-role{border-left:2px dashed var(--accent);padding-left:.8rem;}
.template-relay .p-contact{letter-spacing:.05em;}
.template-relay h2{
  border-bottom:none;color:var(--accent-deep);text-transform:uppercase;
  font-size:.8rem;letter-spacing:.04em;
}
.template-relay h2::before{content:"))) ";color:var(--accent);letter-spacing:-.1em;}

/* Assembly — Pro. Manufacturing & operations: numbered process-step section labels. */
.paper.template-assembly{counter-reset:assembly-counter;}
.template-assembly h2{
  border-bottom:none;font-weight:700;text-transform:uppercase;font-size:.78rem;
  letter-spacing:.04em;color:var(--ink);
}
.template-assembly h2::before{
  counter-increment:assembly-counter;content:"0" counter(assembly-counter) " — ";color:var(--accent-deep);
}
.template-assembly .p-role{border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.6rem;}

/* Aviation — Pro. Aviation & aerospace: instrument-panel header rule, pill-style section labels. */
.paper.template-aviation .p-header{border-bottom:2px solid var(--ink);padding-bottom:.6rem;}
.template-aviation h1{letter-spacing:.05em;text-transform:uppercase;}
.template-aviation .p-role-head span:last-child{
  font-family:'IBM Plex Mono',monospace;color:var(--accent-deep);font-size:.76rem;
}
.template-aviation h2{
  border-bottom:none;border:1px solid var(--accent-deep);border-radius:20px;display:inline-block;
  padding:.1rem .7rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-deep);
}

/* Voyage — Pro. Maritime & shipping: anchor-marked section labels, ruled role rows. */
.template-voyage .p-role{border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.6rem;}
.template-voyage h1{color:var(--accent-deep);}
.template-voyage h2{
  border-bottom:none;color:var(--ink);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;
}
.template-voyage h2::before{content:"⚓ ";font-size:.75em;color:var(--accent);}

/* Assurance — Pro. Insurance: bordered trust-toned header block, solid accent section rules. */
.paper.template-assurance .p-header{
  border:1px solid var(--accent-deep);border-radius:6px;padding:1rem 1.2rem;margin-bottom:1.2rem;
}
.template-assurance h1{color:var(--ink);font-weight:700;}
.template-assurance h2{
  border-bottom:2px solid var(--accent-deep);color:var(--accent-deep);font-weight:600;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
}

/* Bulletin — Pro. Media & journalism: masthead-style centered name, newspaper column rules. */
.paper.template-bulletin h1{
  font-family:Georgia,'Source Serif 4',serif;font-weight:800;text-transform:uppercase;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:.3rem 0;text-align:center;
}
.template-bulletin .p-headline{text-align:center;font-style:italic;color:var(--ink-soft);}
.template-bulletin h2{
  border-bottom:1px solid var(--ink);text-transform:uppercase;letter-spacing:.1em;
  font-size:.75rem;font-weight:700;
}

/* Blueprint — Pro. Architecture & design: drafting-line rules, mono dimension-style dates. */
.paper.template-blueprint{border:1px solid var(--line);}
.template-blueprint h1{letter-spacing:.02em;}
.template-blueprint h2{
  border-bottom:1px dashed var(--accent-deep);color:var(--accent-deep);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.05em;
}
.template-blueprint .p-role-head span:last-child{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--slate);
}

/* Vital — Pro. Pharmaceutical & life sciences: clinical cross-marked labels, structured header rule. */
.paper.template-vital .p-header{border-bottom:2px solid var(--accent-deep);padding-bottom:.6rem;}
.template-vital h1{font-weight:600;color:var(--ink);}
.template-vital h2{
  border-bottom:none;color:var(--accent-deep);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;
}
.template-vital h2::before{content:"+ ";color:var(--accent);font-weight:800;}

/* Registrar — Pro. Academic administration: formal ruled header, small-caps section labels. */
.paper.template-registrar .p-header{border-bottom:1px solid var(--ink);padding-bottom:.6rem;}
.template-registrar h1{font-family:Georgia,'Source Serif 4',serif;letter-spacing:.03em;}
.template-registrar h2{
  border-bottom:1px solid var(--line);font-variant:small-caps;letter-spacing:.05em;
  font-size:.95rem;color:var(--accent-deep);font-weight:600;
}

/* Palette — Pro. Fashion & design: colored initial cap, airy wide-tracked section labels. */
.template-palette h1::first-letter{color:var(--accent);font-size:1.3em;}
.template-palette .p-headline{letter-spacing:.05em;color:var(--ink-soft);}
.template-palette h2{
  border-bottom:none;text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;
  color:var(--accent-deep);font-weight:600;
}

/* Cortex — Pro. Data science & AI: mono headings, bracketed tag-style section labels. */
.paper.template-cortex h1{font-family:'IBM Plex Mono',monospace;font-weight:600;}
.template-cortex .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--slate);}
.template-cortex h2{
  border-bottom:none;font-family:'IBM Plex Mono',monospace;font-size:.75rem;
  color:var(--accent-deep);text-transform:lowercase;letter-spacing:.02em;
}
.template-cortex h2::before{content:"<";color:var(--accent);}
.template-cortex h2::after{content:"/>";color:var(--accent);}

/* Harvest — Pro. Agriculture & agribusiness: warm rounded role rules, ornamental section marks. */
.template-harvest .p-role{
  border-bottom:1px solid var(--line);border-radius:0 0 8px 8px;padding-bottom:.6rem;margin-bottom:.6rem;
}
.template-harvest h1{color:var(--accent-deep);}
.template-harvest h2{
  border-bottom:none;color:var(--accent-deep);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.03em;
}
.template-harvest h2::before{content:"❧ ";font-size:.85em;}

/* Kitchen — Pro. Food & culinary: warm italic serif name, recipe-card style role rows. */
.paper.template-kitchen h1{font-family:Georgia,'Source Serif 4',serif;font-style:italic;color:var(--accent-deep);}
.template-kitchen .p-role{border-bottom:1px dashed var(--line);padding-bottom:.6rem;margin-bottom:.6rem;}
.template-kitchen h2{
  border-bottom:none;color:var(--accent-deep);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em;
}
.template-kitchen h2::before{content:"— ";}

/* Gallery — Pro. Fine & visual arts: minimal light-weight header, hairline section rules. */
.paper.template-gallery{padding-top:2.4rem;}
.template-gallery h1{font-weight:300;letter-spacing:.03em;font-size:1.9rem;}
.template-gallery .p-headline{color:var(--ink-soft);font-weight:300;}
.template-gallery h2{
  border-bottom:none;border-top:1px solid var(--line);padding-top:.4rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.25em;font-size:.65rem;color:var(--slate);
}

/* Broadcast — Pro. Film & broadcast media: full-bleed dark header bar, on-air style section tags. */
.paper.template-broadcast .p-header{
  background:var(--ink);color:#fff;margin:-2.6rem -2.4rem 1.3rem;padding:1.6rem 2.4rem;
}
.template-broadcast .p-header h1,
.template-broadcast .p-headline,
.template-broadcast .p-contact{color:#fff;}
.template-broadcast h2{
  border-bottom:none;background:var(--accent);color:#fff;display:inline-block;
  padding:.15rem .6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
}

/* Feed — Pro. Social media & content creation: rounded pill dates, playful accent bullet dots. */
.template-feed .p-role-head span:last-child{
  background:color-mix(in srgb, var(--accent) 18%, white);color:var(--accent-deep);
  border-radius:999px;padding:.05rem .6rem;font-size:.72rem;font-weight:600;
}
.template-feed ul.p-bullets{list-style:none;padding-left:0;}
.template-feed ul.p-bullets li{position:relative;padding-left:1.1rem;}
.template-feed ul.p-bullets li::before{content:"●";color:var(--accent);position:absolute;left:0;font-size:.55em;top:.45em;}
.template-feed h1{font-weight:800;color:var(--accent-deep);}

/* Aperture — Pro. Photography: bordered frame header, minimal high-contrast section labels. */
.paper.template-aperture .p-header{border:1px solid var(--ink);padding:1rem 1.2rem;}
.template-aperture h1{letter-spacing:.04em;font-weight:600;}
.template-aperture h2{
  border-bottom:none;color:var(--ink);font-weight:800;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.15em;
}
.template-aperture h2::before{content:"○ ";color:var(--accent);}

/* Talent — Pro. HR & recruiting: soft rounded header card, approachable section labels. */
.paper.template-talent .p-header{
  background:color-mix(in srgb, var(--accent) 10%, white);border-radius:10px;padding:1.1rem 1.3rem;margin-bottom:1.2rem;
}
.template-talent h1{color:var(--accent-deep);font-weight:700;}
.template-talent h2{
  border-bottom:none;color:var(--accent-deep);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;
}
.template-talent h2::before{content:"◉ ";font-size:.7em;}

/* Workshop — Pro. Skilled trades: bold utilitarian header, boxed certification-style dates. */
.paper.template-workshop h1{text-transform:uppercase;font-weight:800;letter-spacing:.02em;}
.template-workshop .p-role-head span:last-child{
  border:1px solid var(--ink);padding:.05rem .4rem;font-size:.72rem;font-weight:600;color:var(--ink);
}
.template-workshop h2{
  border-bottom:3px solid var(--ink);text-transform:uppercase;font-size:.78rem;
  letter-spacing:.05em;color:var(--ink);font-weight:700;
}

/* Garage — Pro. Automotive: mono spec-sheet dates, heavy accent rule above each section. */
.paper.template-garage h1{font-weight:800;letter-spacing:.01em;}
.template-garage .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--accent-deep);}
.template-garage h2{
  border-bottom:none;border-top:3px solid var(--accent);padding-top:.35rem;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;color:var(--ink);
}

/* Arena — Pro. Sports & fitness: bold energetic name, solid accent-block section labels. */
.paper.template-arena h1{font-weight:800;color:var(--accent-deep);text-transform:uppercase;letter-spacing:.02em;}
.template-arena h2{
  border-bottom:none;background:var(--accent);color:#fff;font-weight:800;
  padding:.15rem .7rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  display:inline-block;
}
.template-arena .p-role-head span:last-child{color:var(--accent-deep);font-weight:700;}

/* Stage — Pro. Music & performing arts: dramatic centered italic serif name, spotlight header. */
.paper.template-stage h1{font-style:italic;font-weight:700;font-size:1.9rem;text-align:center;}
.template-stage .p-header-text,
.template-stage .p-contact{text-align:center;}
.template-stage h2{
  border-bottom:none;text-align:center;text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;color:var(--accent-deep);font-weight:600;
}

/* Salon — Pro. Beauty & cosmetology: soft italic headline, delicate accent underline on labels. */
.paper.template-salon h1{font-weight:600;color:var(--accent-deep);}
.template-salon .p-headline{font-style:italic;color:var(--ink-soft);}
.template-salon h2{
  border-bottom:1px solid var(--accent);color:var(--accent-deep);font-weight:600;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;padding-bottom:.15rem;
}

/* Companion — Pro. Veterinary & animal care: warm rounded-border header, gentle ornamental section marks. */
.paper.template-companion .p-header{
  border:1px solid var(--accent);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.2rem;
}
.template-companion h1{color:var(--accent-deep);font-weight:600;}
.template-companion h2{
  border-bottom:none;color:var(--accent-deep);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;
}
.template-companion h2::before{content:"❦ ";font-size:.8em;}

/* Concierge — Pro. Customer service & support: polished centered header, understated rule labels. */
.template-concierge .p-header-text,
.template-concierge .p-contact{text-align:center;}
.template-concierge h1{font-weight:600;letter-spacing:.02em;}
.template-concierge h2{
  border-bottom:none;border-top:1px solid var(--accent);padding-top:.4rem;text-align:center;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink-soft);
}

/* Arcade — Pro. Gaming & esports: mono heading, bracketed terminal-style section labels. */
.paper.template-arcade h1{font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:.02em;}
.template-arcade .p-role-head span:last-child{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--accent-deep);}
.template-arcade h2{
  border-bottom:none;font-family:'IBM Plex Mono',monospace;color:var(--accent-deep);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
}
.template-arcade h2::before{content:"> ";color:var(--accent);}

/* Guardian — Pro. Security, law enforcement & military: formal bordered header, rank-tab section labels. */
.paper.template-guardian .p-header{border-bottom:3px solid var(--ink);padding-bottom:.6rem;}
.template-guardian h1{text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.template-guardian h2{
  border-bottom:none;background:var(--ink);color:#fff;font-weight:700;
  padding:.15rem .6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;display:inline-block;
}

/* Roster — Pro. HR & recruiting (2nd style): numbered role list, clean corporate rule — distinct from Talent's soft card look. */
.paper.template-roster{counter-reset:roster-counter;}
.template-roster h1{font-weight:700;letter-spacing:.01em;}
.template-roster .p-role{position:relative;padding-left:1.6rem;margin-bottom:.7rem;}
.template-roster .p-role::before{
  counter-increment:roster-counter;content:counter(roster-counter, decimal-leading-zero);
  position:absolute;left:0;top:0;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--accent-deep);
}
.template-roster h2{
  border-bottom:1px solid var(--accent-deep);text-transform:uppercase;font-size:.78rem;
  letter-spacing:.06em;font-weight:700;color:var(--ink);
}

/* Toolbelt — Pro. Skilled trades (2nd style): checklist-style bullets, work-order role blocks. */
.template-toolbelt ul.p-bullets{list-style:none;padding-left:0;}
.template-toolbelt ul.p-bullets li{position:relative;padding-left:1.3rem;}
.template-toolbelt ul.p-bullets li::before{
  content:"☐";position:absolute;left:0;color:var(--accent-deep);font-size:.85em;top:.05em;
}
.template-toolbelt .p-role{border-left:3px solid var(--ink);padding-left:.8rem;margin-bottom:.7rem;}
.template-toolbelt h2{
  border-bottom:none;background:var(--ink);color:#fff;font-weight:700;display:inline-block;
  padding:.15rem .6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
}

/* Throttle — Pro. Automotive (2nd style): racing-stripe side bar, aggressive uppercase name. */
.paper.template-throttle{border-left:6px solid var(--accent);padding-left:calc(2.4rem - 6px);}
.template-throttle h1{font-weight:900;text-transform:uppercase;letter-spacing:.03em;}
.template-throttle h2{
  border-bottom:none;color:var(--accent-deep);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;
}
.template-throttle h2::after{content:" //";color:var(--accent);}

/* Sprint — Pro. Sports & fitness (2nd style): scoreboard mono figures, split-rule section labels. */
.template-sprint .p-role-head span:last-child{
  font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--accent-deep);font-size:.78rem;
}
.template-sprint h1{font-weight:800;letter-spacing:.02em;}
.template-sprint h2{
  border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:.15rem 0;
  text-align:center;text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:var(--ink);
}

/* Brief — Pro. Legal (2nd style): formal serif header, indented citation-style role blocks. */
.paper.template-brief h1{font-family:Georgia,'Source Serif 4',serif;font-weight:700;}
.template-brief .p-role{padding-left:1rem;border-left:2px solid var(--line);margin-bottom:.7rem;}
.template-brief h2{
  border-bottom:1px solid var(--ink);font-family:Georgia,'Source Serif 4',serif;font-weight:700;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;
}

/* Government — Pro. Bordered page, centered formal header — an official letterhead feel. */
.paper.template-government{border:1px solid var(--ink);}
.template-government .p-header-text{text-align:center;}
.template-government h1{text-transform:uppercase;letter-spacing:.05em;font-size:1.3rem;}
.template-government .p-contact{border-top:1px solid var(--ink);padding-top:.5rem;margin-top:.3rem;}
.template-government h2{
  border-bottom:1px solid var(--ink);text-transform:uppercase;letter-spacing:.06em;
  font-size:.8rem;font-weight:700;
}

/* Founder — Pro. Bold underlined name, small accent chips before section labels. */
.paper.template-founder h1{font-weight:800;position:relative;display:inline-block;}
.template-founder h1::after{
  content:"";position:absolute;left:0;bottom:-4px;width:60%;height:4px;background:var(--accent);
}
.template-founder h2{
  border-bottom:none;font-weight:800;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);
}
.template-founder h2::before{
  content:"";display:inline-block;width:8px;height:8px;background:var(--accent);
  margin-right:.4rem;border-radius:2px;
}

/* ---------- Pastel category — Pro. Each of these 5 carries its own
   fixed soft palette rather than the resume's chosen --accent/--accent-deep
   (unlike every template above). The pastel hue IS the template's
   identity here — deriving it from an arbitrary user-picked accent (which
   could be Burgundy or Ink) would undermine that, so these five
   deliberately opt out of the accent-color picker's usual effect. The
   accent swatches still work normally on every other template. ---------- */

/* Blush — Pro. Soft rose header card, pill-shaped headline. */
.paper.template-blush .p-header{background:#FBE9EC;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:1.3rem;}
.template-blush h1{color:#8B3A48;}
.template-blush .p-headline{
  display:inline-block;background:#F6D3D9;color:#8B3A48;padding:.15rem .6rem;
  border-radius:999px;font-weight:600;
}
.template-blush h2{border-bottom:2px solid #F6D3D9;color:#8B3A48;}
.template-blush .p-photo{border-color:#E7A8B3;}

/* Sage — Pro. Soft green header card, round leaf-toned bullet markers. */
.paper.template-sage .p-header{background:#E8F1E7;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:1.3rem;}
.template-sage h1{color:#3F6B45;}
.template-sage h2{border-bottom:none;color:#3F6B45;font-weight:600;letter-spacing:.02em;}
.template-sage ul.p-bullets{list-style:none;padding-left:0;}
.template-sage ul.p-bullets li{position:relative;padding-left:1rem;}
.template-sage ul.p-bullets li::before{content:"●";color:#8FBB92;font-size:.5em;position:absolute;left:0;top:.5em;}
.template-sage .p-photo{border-color:#8FBB92;}

/* Lavender — Pro. Soft purple header card, centered dreamy layout. */
.paper.template-lavender .p-header{background:#EDEAF6;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:1.3rem;}
.template-lavender .p-header-text{text-align:center;}
.template-lavender h1{color:#5B4A8A;}
.template-lavender h2{
  text-align:center;border-bottom:none;color:#5B4A8A;letter-spacing:.08em;
  text-transform:uppercase;font-size:.78rem;
}
.template-lavender .p-photo{border-color:#B7A9DC;}

/* Buttercup — Pro. Soft yellow header card, golden underline on the name. */
.paper.template-buttercup .p-header{background:#FBF3D6;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:1.3rem;}
.template-buttercup h1{color:#8A6D1D;border-bottom:3px solid #F0DE96;display:inline-block;padding-bottom:.2rem;}
.template-buttercup h2{border-bottom:none;color:#8A6D1D;font-weight:600;}
.template-buttercup .p-photo{border-color:#F0DE96;}

/* Powder — Pro. Soft blue header card, boxed powder-blue section labels. */
.paper.template-powder .p-header{background:#E6EEF7;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:1.3rem;}
.template-powder h1{color:#34597E;}
.template-powder h2{
  border:1px solid #C6D9EA;background:#F3F8FC;color:#34597E;padding:.25rem .5rem;font-size:.8rem;
}
.template-powder .p-photo{border-color:#A9C6E0;}

/* ---------- Navy category — Pro. Same "fixed palette, opts out of the
   accent picker" pattern as Pastel above — five distinct treatments,
   all sharing one deep-navy palette (#1B2A5E / #35508C / #C7D0EA /
   #E7EBF7) rather than the resume's chosen --accent/--accent-deep. ---------- */

/* Navarre — Pro. Full-bleed dark navy banner header, white text. */
.paper.template-navarre .p-header{
  background:#1B2A5E;color:#fff;margin:-2.6rem -2.4rem 1.3rem;
  padding:2rem 2.4rem 1.4rem;border-bottom:3px solid #35508C;
}
.template-navarre .p-header h1,
.template-navarre .p-headline,
.template-navarre .p-contact{color:#fff;}
.template-navarre .p-photo{border-color:#fff;}
.template-navarre h2{border-bottom:2px solid #C7D0EA;color:#1B2A5E;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;}

/* Fleet — Pro. Navy spine down the left edge, square-marked section labels. */
.paper.template-fleet{border-left:6px solid #1B2A5E;}
.template-fleet h1{color:#1B2A5E;}
.template-fleet h2{border-bottom:none;color:#1B2A5E;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;}
.template-fleet h2::before{content:"";display:inline-block;width:8px;height:8px;background:#35508C;margin-right:.4rem;}
.template-fleet .p-photo{border-color:#35508C;}

/* Harbor — Pro. Soft navy-tinted header card, gentle and rounded. */
.paper.template-harbor .p-header{background:#E7EBF7;border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:1.3rem;}
.template-harbor h1{color:#1B2A5E;}
.template-harbor .p-headline{color:#35508C;}
.template-harbor h2{border-bottom:none;color:#1B2A5E;font-weight:600;}
.template-harbor .p-photo{border-color:#35508C;}

/* Midnight — Pro. Bordered page, centered formal header — navy letterhead. */
.paper.template-midnight{border:1px solid #1B2A5E;}
.template-midnight .p-header-text{text-align:center;}
.template-midnight h1{color:#1B2A5E;text-transform:uppercase;letter-spacing:.05em;font-size:1.3rem;}
.template-midnight .p-contact{border-top:1px solid #1B2A5E;border-bottom:1px solid #1B2A5E;padding:.5rem 0;margin-top:.3rem;}
.template-midnight h2{text-align:center;border-bottom:none;color:#1B2A5E;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;}
.template-midnight .p-photo{border-color:#1B2A5E;}

/* Compass — Pro. Navy pill headline, boxed navy-tinted section labels. */
.template-compass .p-headline{
  display:inline-block;background:#1B2A5E;color:#fff;padding:.15rem .6rem;border-radius:999px;font-weight:600;
}
.template-compass h2{
  border:1px solid #C7D0EA;background:#F3F5FB;color:#1B2A5E;padding:.25rem .5rem;font-size:.8rem;letter-spacing:.03em;
}
.template-compass .p-photo{border-color:#1B2A5E;}

/* Boardroom — Pro. Dark ink header band with a thin accent rule, formal and heavy. */
.paper.template-boardroom .p-header{
  background:var(--ink);color:#fff;margin:-2.6rem -2.4rem 1.3rem;
  padding:2rem 2.4rem 1.4rem;border-bottom:3px solid var(--accent);
}
.template-boardroom .p-header h1,
.template-boardroom .p-headline,
.template-boardroom .p-contact{color:#fff;}
.template-boardroom .p-photo{border-color:var(--accent);}
.template-boardroom h2{
  text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--accent-deep);
  border-bottom:1px solid var(--line);padding-bottom:.3rem;
}

/* Chairman — Pro. Centered, all-caps, wide-tracked name framed by thin accent rules. */
.template-chairman h1{
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:1.4rem;
  text-align:center;
}
.template-chairman .p-headline,
.template-chairman .p-contact{text-align:center;}
.template-chairman .p-header-text{
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:1rem 0;
}
.template-chairman h2{
  text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;
  color:var(--accent-deep);border-bottom:none;
}

/* Summit — Pro. Short accent tick above the name, bold spaced-out section labels. */
.paper.template-summit .p-header-text{position:relative;padding-top:1rem;}
.template-summit .p-header-text::before{
  content:"";position:absolute;top:0;left:0;width:36px;height:4px;background:var(--accent);
}
.template-summit h2{
  border-bottom:none;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
  font-weight:700;margin-top:2rem;color:var(--ink);
}

/* Prestige — Pro. Small-caps headline, accent rule above (not below) each section label. */
.paper.template-prestige h1{color:var(--accent-deep);}
.template-prestige .p-headline{font-variant:small-caps;letter-spacing:.04em;font-size:1rem;}
.template-prestige h2{
  border-bottom:none;border-top:1px solid var(--accent);padding-top:.4rem;
  text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--ink-soft);
}

/* Council — Pro. Double rule under the header, centered boxed labels, stacked role/dates. */
.template-council .p-contact{border-bottom:3px double var(--ink);padding-bottom:.8rem;margin-bottom:1.3rem;}
.template-council h2{
  text-align:center;border:1px solid var(--line);padding:.3rem 0;
  text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--accent-deep);
}
.template-council .p-role-head{flex-direction:column;align-items:flex-start;gap:.1rem;}
.template-council .p-role-head span:last-child{font-size:.78rem;color:var(--slate);font-weight:400;}

/* Studio — Pro. Creative/design-facing: oversized drop-cap initial, pill headline, bold labels. */
.template-studio h1::first-letter{font-size:1.7em;color:var(--accent);font-weight:800;}
.template-studio .p-headline{
  display:inline-block;background:color-mix(in srgb, var(--accent) 15%, white);
  color:var(--accent-deep);padding:.15rem .6rem;border-radius:999px;font-weight:600;
}
.template-studio h2{
  border-bottom:none;color:var(--accent);font-weight:800;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.02em;
}

/* Curriculum — Pro. Academic/research-facing: hanging-indent bullets, justified summary, small-caps labels. */
.paper.template-curriculum{font-family:Georgia,'Source Serif 4',serif;}
.template-curriculum .p-summary{text-align:justify;}
.template-curriculum ul.p-bullets{padding-left:0;list-style:none;}
.template-curriculum ul.p-bullets li{padding-left:1.4rem;text-indent:-1.4rem;font-size:.85rem;line-height:1.6;margin-bottom:.3rem;}
.template-curriculum ul.p-bullets li::before{content:"— ";}
.template-curriculum h2{
  border-bottom:1px solid var(--ink);font-variant:small-caps;letter-spacing:.03em;
  font-size:1rem;font-weight:400;
}

/* Clinic — Pro. Healthcare-facing: calm and airy, quiet rules, generous breathing room. */
.template-clinic h1{font-weight:500;}
.template-clinic .p-headline{color:var(--accent-deep);font-weight:400;}
.template-clinic h2{
  border-bottom:none;border-top:2px solid var(--accent);padding-top:.5rem;
  font-weight:500;letter-spacing:.03em;color:var(--ink-soft);font-size:.85rem;
}
.template-clinic .p-role{padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line);}

/* Docket — Pro. Legal/finance-facing: auto-numbered sections (I., II., III. via CSS counters). */
.paper.template-docket{counter-reset:section-counter;}
.template-docket h2{
  counter-increment:section-counter;border-bottom:1px solid var(--ink);
  font-weight:700;letter-spacing:.02em;font-size:.85rem;color:var(--ink);
}
.template-docket h2::before{content:counter(section-counter, upper-roman) ". ";color:var(--accent-deep);}

/* Terminal — Pro. Tech/engineering-facing: dark code-window header, comment-style section labels. */
.paper.template-terminal .p-header{
  background:var(--ink);color:#EDEDED;margin:-2.6rem -2.4rem 1.3rem;
  padding:1.6rem 2.4rem;border-radius:0 0 8px 8px;
}
.template-terminal .p-header h1,
.template-terminal .p-headline,
.template-terminal .p-contact{color:#EDEDED;font-family:'IBM Plex Mono',monospace;}
.template-terminal .p-headline::before{content:"$ ";color:var(--accent);}
.template-terminal h2{border-bottom:none;font-family:'IBM Plex Mono',monospace;color:var(--accent-deep);font-size:.8rem;}
.template-terminal h2::before{content:"// ";color:var(--ink-soft);}

/* watermark for free tier */
.paper.watermarked::after{
  content:"Made with Resume Signal — upgrade to remove";
  display:block;margin-top:2rem;font-size:.7rem;color:var(--line);text-align:center;
}

/* ---------- design tab: template / accent / font pickers ---------- */
.template-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem;}
.template-filter-pill{
  border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-bg-soft);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  color:var(--ink-soft);font-size:.78rem;font-weight:600;padding:.3rem .75rem;
}
.template-filter-pill.active{border-color:var(--ink);color:var(--ink);background:var(--glass-bg-strong);}
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.2rem;}
.template-card{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.5rem;
  border:1px solid var(--glass-border);border-radius:var(--glass-radius);background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);
  padding:.5rem;text-align:left;font-weight:600;font-size:.85rem;color:var(--ink);
}
.template-card.active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;}
.template-card.locked{opacity:.85;}
.template-card-label{display:flex;align-items:center;justify-content:space-between;gap:.4rem;}
.template-card .pro-badge{
  background:var(--amber);color:var(--ink);flex-shrink:0;
  font-size:.62rem;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:.1rem .45rem;
}
.template-card-check{font-size:.72rem;font-weight:600;color:var(--green);flex-shrink:0;}

/* The live thumbnail: a real .paper.template-X element rendered at a
   fixed reference width, then optically scaled down as a whole (fonts,
   borders, and padding all shrink together) rather than laid out small —
   laying it out small directly would blow every rem-based measurement
   in the per-template CSS out of proportion at this size. The frame
   clips it to a short, page-like rectangle; only the header and the
   start of Experience ever show, which is enough to tell templates
   apart at a glance. Kept solid white/opaque, unlike the glass chrome
   around it — it needs to preview the resume's true (non-glass) look. */
.template-thumb-frame{
  width:100%;aspect-ratio:4/3.1;overflow:hidden;border-radius:10px;
  border:1px solid var(--line);background:#fff;position:relative;
  display:flex;align-items:flex-start;justify-content:center;
}
.paper.template-thumb-inner{
  width:400px;flex-shrink:0;transform:scale(.235);transform-origin:top center;
  box-shadow:none;pointer-events:none;max-width:none;
}
.template-thumb-lock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;background:rgba(255,255,255,.45);
}

.accent-swatches{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.2rem;}
.accent-swatch{
  width:32px;height:32px;border-radius:50%;border:2px solid transparent;position:relative;
  box-shadow:0 0 0 1px var(--glass-border) inset, 0 2px 8px -2px rgba(22,35,61,.3);padding:0;
}
.accent-swatch.active{border-color:var(--ink);}
.accent-swatch.locked::after{
  content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;background:rgba(255,255,255,.55);border-radius:50%;
}

.font-pairing-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.4rem;}
.font-pairing-option{
  display:flex;justify-content:space-between;align-items:center;border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);padding:.6rem .8rem;background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);font-size:.85rem;
  width:100%;text-align:left;color:var(--ink);
}
.font-pairing-option.active{border-color:var(--ink);}
.font-pairing-option.locked{opacity:.65;}
.font-pairing-option .pro-badge{
  background:var(--amber);color:var(--ink);font-size:.62rem;font-weight:700;
  letter-spacing:.03em;border-radius:999px;padding:.1rem .45rem;flex-shrink:0;margin-left:.5rem;
}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(22,35,61,.45);
  display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;
}
.modal[hidden]{display:none;}
.modal-card{
  background:var(--glass-bg-strong);border-radius:var(--glass-radius);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  padding:1.8rem;max-width:460px;width:100%;position:relative;
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.modal-close{position:absolute;top:.8rem;right:.9rem;background:none;border:none;font-size:1.3rem;color:var(--slate);}
.plan-row{display:flex;gap:.8rem;margin-top:1rem;}
.plan-card{
  flex:1;border:1px solid var(--glass-border);border-radius:var(--glass-radius);
  background:var(--glass-bg-soft);padding:1rem;text-align:center;
}
.plan-card-single{max-width:280px;margin:0 auto;}
.plan-card-single .hint{margin-top:.7rem;}
.plan-name{font-size:.8rem;color:var(--slate);}
.plan-price{font-family:var(--font-display);font-size:1.4rem;margin:.3rem 0 .8rem;}
.plan-price span{font-size:.8rem;color:var(--slate);}

.import-preview-list{list-style:none;margin:0 0 1rem;padding:0;font-size:.88rem;}
.import-preview-list li{padding:.4rem 0;border-bottom:1px solid var(--line);}

/* ---------- optimize diff preview ---------- */
.optimize-diff{margin-bottom:1rem;}
.diff-block{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);}
.diff-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.diff-block-label{font-size:.78rem;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.4rem;}
.diff-col-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin:.5rem 0 .25rem;}
.diff-col-label.before{color:var(--slate);}
.diff-col-label.after{color:var(--green);}
.diff-text{font-size:.87rem;line-height:1.5;margin:0 0 .5rem;color:var(--ink-soft);}
.diff-text.before{text-decoration:line-through;color:var(--slate);}
.diff-text.after{color:var(--ink);background:rgba(47,111,78,.14);border-radius:var(--radius);padding:.4rem .55rem;}
.diff-bullets{margin:0 0 .5rem;padding-left:1.1rem;font-size:.87rem;line-height:1.5;}
.diff-bullets.before li{text-decoration:line-through;color:var(--slate);}
.diff-bullets.after li{color:var(--ink);}
.diff-bullets.after{background:rgba(47,111,78,.14);border-radius:var(--radius);padding:.5rem .5rem .5rem 1.6rem;}
.diff-unchanged{font-size:.8rem;color:var(--slate);font-style:italic;}

/* ---------- ATS check ---------- */
.export-hint{margin:.5rem 0 0;}
.ats-checklist{list-style:none;margin:0 0 1rem;padding:0;font-size:.88rem;}
.ats-checklist li{display:flex;gap:.5rem;align-items:flex-start;padding:.35rem 0;border-bottom:1px solid var(--line);}
.ats-checklist li:last-child{border-bottom:none;}
.ats-check-icon{flex:0 0 auto;font-weight:700;}
.ats-check-icon.pass{color:var(--green);}
.ats-check-icon.fail{color:var(--danger);}
.ats-check-detail{display:block;color:var(--slate);font-size:.8rem;margin-top:.15rem;}
.ats-bullet-role{font-size:.8rem;font-weight:600;color:var(--slate);margin:.7rem 0 .3rem;}
.ats-bullet-item{font-size:.87rem;line-height:1.5;padding:.4rem .55rem;border-radius:var(--radius);margin-bottom:.4rem;background:var(--paper);}
.ats-bullet-item.clean{border-left:3px solid var(--green);}
.ats-bullet-item.flagged{border-left:3px solid var(--amber);}
.ats-bullet-flags{list-style:none;margin:.35rem 0 0;padding:0;font-size:.78rem;color:var(--amber-deep);}
.ats-bullet-flags li{margin-bottom:.15rem;}
.import-preview-list li:last-child{border-bottom:none;}
.import-preview-list .label{color:var(--slate);margin-right:.4rem;}

.new-resume-row{display:flex;gap:.6rem;margin:1rem 0;}
.new-resume-row input{
  flex:1;border:1px solid var(--line);border-radius:var(--radius);
  padding:.6rem .7rem;font-size:.9rem;
}
.resumes-list{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;}
.resume-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem 0;border-bottom:1px solid var(--line);
}
.resume-row:last-child{border-bottom:none;}
.resume-row-info{flex:1;min-width:0;cursor:pointer;}
.resume-row-name{font-weight:600;font-size:.92rem;}
.resume-row-name.active::before{content:"● ";color:var(--green);font-size:.7rem;}
.resume-row-meta{font-size:.76rem;color:var(--slate);margin-top:.1rem;}
.resume-row-actions{display:flex;gap:.3rem;flex-shrink:0;}
.resume-row-actions button{
  background:none;border:none;color:var(--slate);font-size:.78rem;
  padding:.3rem .4rem;
}
.resume-row-actions button:hover{color:var(--ink);}
.resume-row-actions .danger:hover{color:var(--danger);}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  background:var(--glass-dark-bg);color:#fff;padding:.7rem 1.1rem;border-radius:12px;
  border:1px solid var(--glass-dark-border);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:.85rem;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.toast[hidden]{display:none;}

.offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--danger);color:#fff;text-align:center;
  font-size:.82rem;padding:.5rem 1rem;
}
.offline-banner[hidden]{display:none;}

@media print{
  .topbar,.panel-form,.preview-toolbar{display:none!important;}
  .panel-preview{background:#fff!important;padding:0;}
  .paper{box-shadow:none;max-width:none;}
}

/* ---------- application tracker (Phase 3) ---------- */
.modal-card-wide{max-width:640px;}
.app-form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem;
}
.app-form-grid .field{grid-column:span 1;}
@media (max-width:520px){.app-form-grid{grid-template-columns:1fr;}}
.field select{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:.6rem .7rem;font-size:.9rem;background:var(--paper-white);color:var(--ink);
}
.applications-list{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.4rem;}
.app-row-info{flex:1;min-width:0;}
.app-row-title{font-weight:600;font-size:.92rem;}
.app-row-meta{font-size:.76rem;color:var(--slate);margin-top:.15rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.status-badge{
  display:inline-block;border-radius:999px;padding:.1rem .55rem;font-size:.72rem;
  font-weight:600;border:1px solid transparent;
}
.status-badge.applied{color:var(--slate);background:rgba(91,100,114,.14);border-color:var(--glass-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.status-badge.interview{color:var(--amber-deep);background:rgba(201,138,44,.18);border-color:rgba(201,138,44,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.status-badge.offer{color:var(--green);background:rgba(47,111,78,.16);border-color:rgba(47,111,78,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.status-badge.rejected{color:var(--danger);background:rgba(179,67,43,.14);border-color:rgba(179,67,43,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.status-badge.withdrawn{color:var(--slate);background:rgba(91,100,114,.14);border-color:var(--glass-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

.badge-dot{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.1rem;height:1.1rem;padding:0 .3rem;margin-left:.4rem;
  border-radius:999px;background:var(--amber-deep);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;
}
.stale-nudge{margin-top:.35rem;font-size:.78rem;font-weight:600;color:var(--amber-deep);}
.stale-summary{
  color:var(--amber-deep);font-weight:600;background:rgba(201,138,44,.16);
  border:1px solid rgba(201,138,44,.4);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:.6rem .8rem;margin-bottom:.8rem;
}

/* ---------- start-from-a-job-title draft ---------- */
#draft-step-input code{background:var(--paper);padding:.05rem .3rem;border-radius:3px;font-size:.85em;}