:root {
  --ink: #0a0e17;
  --ink-soft: #3a4152;
  --blue: #007fff;
  --blue-dark: #0064cc;
  --off: #f6f6f8;
  --line: #e6e8ee;
  --white: #fff;
  --ok: #1a9d5a;
  --bad: #d0342c;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(10, 14, 23, 0.08);
  --shadow-lg: 0 18px 50px rgba(10, 14, 23, 0.16);
  --nav-h: 66px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Open Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.bare { display: block; }

h1, h2, h3, h4, .brand, .btn, .nav-link, .eyebrow { font-family: "DM Sans", system-ui, sans-serif; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--ink-soft); }
.center { text-align: center; }
.inline { display: inline; margin: 0; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 2.5rem); height: var(--nav-h);
  background: rgba(10, 14, 23, 0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand {
  color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
  display: flex; align-items: center; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--blue); }
.brand-logo { height: 20px; width: auto; display: block; margin-right: 10px; }
.nav-links { display: flex; align-items: center; gap: 0.4rem; }
.nav-link {
  color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; font-weight: 500;
  padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer;
  background: none; border: none; font-family: "DM Sans", sans-serif;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* Language switcher (a no-JS <details> dropdown in the nav) */
.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; font-weight: 500;
  padding: 0.45rem 0.7rem; border-radius: 8px;
  font-family: "DM Sans", sans-serif; user-select: none;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 168px;
  display: flex; flex-direction: column; gap: 2px;
}
.lang-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 7px; font-size: 0.9rem;
  color: var(--ink); text-decoration: none;
}
.lang-item:hover { background: var(--off); text-decoration: none; }
.lang-item.is-current { color: var(--blue); font-weight: 600; }

main.with-nav { flex: 1; padding-top: var(--nav-h); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; padding: 0.72rem 1.4rem; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; transition: all 0.16s ease;
  text-decoration: none; white-space: nowrap; color: #fff; background: var(--blue);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); background: var(--blue-dark); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-lg { padding: 0.9rem 1.8rem; font-size: 1.02rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--off); color: var(--ink); transform: translateY(-1px); }

.linkbtn {
  background: none; border: none; color: var(--blue); font: inherit;
  font-size: 0.9rem; cursor: pointer; padding: 0;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--bad); }

.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue);
}

/* ── BRAND MARK ── */
.brand-mark {
  width: 16px; height: 16px; margin-right: 10px; border-radius: 5px;
  background: linear-gradient(135deg, var(--blue), #4facff);
  box-shadow: 0 0 0 3px rgba(0, 127, 255, 0.18);
  display: inline-block; flex: 0 0 auto;
}

/* ── HERO / LANDING ── */
.hero { padding: clamp(48px, 8vw, 96px) 24px 40px; }
.hero-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.hero-title {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 700; line-height: 1.06;
  letter-spacing: -0.02em; margin-bottom: 18px; color: var(--ink);
}
.hero-accent { color: var(--blue); }
.hero-sub { font-size: 1.18rem; color: var(--ink-soft); max-width: 660px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }

.hero-features {
  max-width: 1000px; margin: 56px auto 90px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.feat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); text-align: left;
}
.feat h3 { margin: 0 0 8px; font-size: 1.08rem; }
.feat p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ── PRICING ── */
.pricing { max-width: 1060px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) 24px 90px; }
.pricing-title {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 12px; color: var(--ink);
}
.pricing-sub { font-size: 1.1rem; color: var(--ink-soft); text-align: center; max-width: 620px; margin: 0 auto 48px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.plan-card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.plan-card--featured {
  border-color: var(--blue); box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-size: 1.35rem; margin-bottom: 8px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan-amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.plan-suffix { font-size: 0.95rem; color: var(--ink-soft); }
.plan-tagline { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 22px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { position: relative; padding-left: 26px; font-size: 0.94rem; color: var(--ink); }
.plan-feats li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--blue); font-weight: 700;
}
.plan-cta { margin-top: auto; }
.plan-note { font-size: 0.85rem; color: var(--blue); font-weight: 600; margin: 0 0 16px; }
/* Two-card layout (Free + Premium) centred rather than stretched to 3 cols. */
.plan-grid--duo { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.pricing-foot { text-align: center; margin-top: 40px; font-size: 0.9rem; }

/* ===== Download offer (paywall) page ===== */
/* --- Embedded Checkout ------------------------------------------------- */
.checkout-page { max-width: 640px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px 90px; }
.checkout-head { text-align: center; margin-bottom: 28px; }
.checkout-head h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); }
.checkout-head .muted { max-width: 520px; margin: 0 auto; font-size: 0.95rem; line-height: 1.55; }
#checkout-root { min-height: 320px; }
.checkout-back { text-align: center; margin-top: 24px; font-size: 0.9rem; }
.checkout-error {
  text-align: center; color: var(--ink-soft); padding: 28px 20px; line-height: 1.6;
}
.checkout-error a { color: var(--blue); font-weight: 600; }

.offer-wrap { max-width: 480px; margin: 48px auto; padding: 0 20px; }
.offer-card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; padding: 40px 34px 30px; box-shadow: var(--shadow-lg);
  text-align: center;
}
.offer-badge {
  display: inline-block; background: color-mix(in srgb, var(--blue) 12%, #fff);
  color: var(--blue); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.offer-title { font-size: 1.7rem; margin: 0 0 8px; color: var(--ink); }
.offer-sub { color: var(--ink-soft); font-size: 0.98rem; margin: 0 auto 24px; max-width: 380px; }
.offer-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.offer-amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.offer-suffix { font-size: 1rem; color: var(--ink-soft); }
.offer-note { font-size: 0.9rem; color: var(--blue); font-weight: 600; margin: 4px 0 24px; }
.offer-feats {
  list-style: none; padding: 0; margin: 0 0 26px; text-align: left;
  display: flex; flex-direction: column; gap: 11px;
}
.offer-feats li { position: relative; padding-left: 28px; font-size: 0.95rem; color: var(--ink); }
.offer-feats li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700;
}
.offer-cta { width: 100%; }
.offer-fine { font-size: 0.8rem; margin: 16px auto 0; max-width: 400px; line-height: 1.5; }
.offer-back { margin: 18px 0 0; font-size: 0.9rem; }

@media (max-width: 860px) {
  .hero-features { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .plan-card--featured { transform: none; }
}
@media (max-width: 520px) {
  .hero-features { grid-template-columns: 1fr; }
}

/* ── AUTH ── */
.auth-wrap { display: flex; justify-content: center; padding: 60px 20px; flex: 1; }
.auth-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 38px; width: 100%; max-width: 430px; box-shadow: var(--shadow-lg);
}
.auth-card h1 { margin: 0 0 6px; font-size: 1.7rem; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.auth-card input {
  padding: 0.72rem 0.85rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-weight: 400;
}
.auth-card input:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.auth-card .muted { margin-top: 16px; font-size: 0.9rem; }

/* Split auth layout: form on the left, marketing template showcase on the right. */
.auth-wrap--split {
  align-items: center; gap: 48px; max-width: 1080px; margin: 0 auto;
}
.auth-showcase { flex: 1; max-width: 480px; }
.auth-showcase-lead {
  font-family: "DM Sans"; font-weight: 700; font-size: 1.15rem; color: var(--ink);
  margin: 0 0 18px;
}
.auth-showcase-grid { display: grid; grid-template-columns: repeat(3, 150px); gap: 14px; justify-content: center; }
.auth-showcase-card {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  width: 150px; height: 212px;
}
/* Fixed-scale miniature: the CV lays out at its natural A4 width (794px) and is
   scaled down by a fixed factor so the full page width is visible. (A unitless
   container-query scale isn't expressible in pure CSS — calc() can't divide a
   length by a length — so we use a fixed factor sized to the card.) */
.auth-showcase-scale {
  width: 794px; transform-origin: top left;
  transform: scale(0.189); /* 150 / 794 */
  pointer-events: none;
}
.auth-showcase-scale .cv { padding-bottom: 0; }
.auth-showcase-link {
  display: inline-block; margin-top: 18px; font-weight: 600; color: var(--blue);
}
@media (max-width: 860px) {
  .auth-showcase { display: none; }
}
.error {
  background: #fdecea; color: var(--bad); border: 1px solid #f6c9c4;
  padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin-top: 14px;
}
.success {
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin-top: 14px;
}
.account-subhead { margin: 22px 0 4px; font-size: 1.05rem; }
.plan-status { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.plan-pill {
  display: inline-block; background: var(--blue); color: #fff;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em;
  padding: 4px 12px; border-radius: 999px;
}
.plan-role { font-size: 0.9rem; }
.plan-status-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.account-note { margin: 10px 0 14px; padding-left: 18px; }
.account-note li { margin: 4px 0; font-size: 0.92rem; line-height: 1.5; }

/* ── LEGAL PAGES (Terms / Privacy) ── */
.legal-page {
  max-width: 760px; margin: 0 auto; padding: 48px 24px 90px;
  flex: 1; width: 100%; line-height: 1.65; color: var(--ink, #1a2233);
}
.legal-title { font-size: 2rem; margin-bottom: 4px; }
.legal-updated { margin: 0 0 24px; font-size: 0.88rem; }
.legal-page h2 { font-size: 1.25rem; margin: 30px 0 8px; }
.legal-page h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.legal-page p { margin: 0 0 12px; }
.legal-page ul { margin: 0 0 14px; padding-left: 22px; }
.legal-page li { margin: 6px 0; }
.legal-page a { color: var(--blue); text-decoration: underline; }

/* ── TEAM ── */
.team-wrap { max-width: 820px; margin: 0 auto; padding: 44px 24px 90px; flex: 1; width: 100%; }
.team-wrap h1 { font-size: 1.8rem; margin-bottom: 6px; }
.team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.team-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.team-create { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 20px 0; }
.team-create label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.team-create input,
.team-invite input,
.team-invite select {
  padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
.team-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
.team-table th, .team-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.team-table th { color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.team-invite { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.team-invite input[type="email"] { flex: 1; min-width: 220px; }
.team-invites { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.team-invites li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-invite-email { font-weight: 600; }
.team-invite-link {
  flex: 1; min-width: 240px; padding: 6px 10px; font-size: 0.82rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--off); color: var(--ink-soft);
}

/* ── DASHBOARD ── */
.dash { max-width: 1060px; margin: 0 auto; padding: 44px 24px 90px; flex: 1; width: 100%; }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; gap: 16px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; font-size: 1.9rem; }
.dash-actions { display: flex; gap: 10px; }
.empty {
  text-align: center; padding: 80px 20px; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--off);
}
.empty p { margin-bottom: 18px; }

.cv-search-row { margin-bottom: 22px; display: flex; gap: 10px; align-items: center; }
.cv-search {
  width: 100%; max-width: 380px; box-sizing: border-box;
  padding: 10px 14px; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s, box-shadow .16s;
}
.cv-search:focus { outline: none; border-color: var(--accent, #1f3a5f); box-shadow: 0 0 0 3px rgba(31,58,95,.12); }
.cv-search::placeholder { color: var(--ink-soft); }
.cv-search-clear { flex: 0 0 auto; }
/* `.btn` sets an explicit display, which would override the [hidden] attribute. */
.cv-search-clear[hidden] { display: none; }
.cv-search-empty { color: var(--ink-soft); padding: 24px 4px; }

/* Auto-generated CV category tags (chips) */
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cv-tags:empty { display: none; }
.cv-tag {
  font: inherit; font-size: 0.72rem; line-height: 1; cursor: pointer;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--off); color: var(--ink-soft);
  transition: border-color .14s, color .14s, background .14s;
}
.cv-tag:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
.cv-tag--active { border-color: var(--blue); background: var(--blue); color: #fff; }

.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, 270px); gap: 22px; justify-content: center; }
.cv-card {
  width: 270px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s;
}
.cv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cv-card-thumb {
  display: block; position: relative; background: #fff; overflow: hidden;
  border-bottom: 1px solid var(--line);
  width: 270px; height: 382px;
}
.cv-card-thumb:hover { text-decoration: none; }
/* Real CV render scaled to fit the card. The inner document is laid out at its
   natural A4 width (794px ≈ 210mm) then scaled by a fixed factor (270 / 794 ≈
   0.34) so it looks like a true miniature. A fixed scale is required because CSS
   transform: scale() needs a unitless number — container-query-unit math can't
   produce one. Card width therefore matches the scaled width (794 × 0.34 ≈ 270). */
.cv-thumb-scale {
  width: 794px; transform-origin: top left;
  transform: scale(0.34);
  pointer-events: none;
}
.cv-thumb-scale .cv { padding-bottom: 0; }
.cv-card-body { padding: 15px 16px 16px; }
.cv-card-title { font-family: "DM Sans"; font-weight: 700; font-size: 1.02rem; display: block; color: var(--ink); }
.cv-card-title:hover { color: var(--blue); }
.cv-improved-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-family: "DM Sans";
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
}
.cv-card-meta { color: var(--ink-soft); font-size: 0.82rem; margin: 4px 0 12px; }
.cv-card-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---- Public template gallery (/templates) ---- */
.tpl-gallery { max-width: 1120px; margin: 0 auto; padding: 40px 20px 64px; }
.tpl-gallery-head { text-align: center; margin-bottom: 34px; }
.tpl-gallery-title { font-family: "DM Sans"; font-weight: 800; font-size: 2.1rem; margin: 0 0 8px; }
.tpl-gallery-sub { color: var(--ink-soft); font-size: 1.02rem; max-width: 620px; margin: 0 auto; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, 270px); gap: 26px; justify-content: center; }
.tpl-card {
  width: 270px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s;
}
.tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tpl-card-preview {
  position: relative; overflow: hidden; background: #fff;
  border-bottom: 1px solid var(--line);
  width: 270px; height: 382px;
}
.tpl-scale {
  width: 794px; transform-origin: top left;
  transform: scale(0.34);
  pointer-events: none;
}
.tpl-scale .cv { padding-bottom: 0; }
.tpl-card-body { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tpl-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl-card-name { font-family: "DM Sans"; font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.tpl-card-layout { color: var(--ink-soft); font-size: 0.78rem; }

/* Inline rename disclosure on each CV card */
.renamer { margin-top: 10px; }
.renamer > summary { list-style: none; display: inline-block; }
.renamer > summary::-webkit-details-marker { display: none; }
.renamer > summary::marker { content: ""; }
.rename-form { display: flex; gap: 8px; margin-top: 8px; }
.rename-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.9rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px;
}
.rename-form input:focus { outline: none; border-color: var(--blue); }

.import-status {
  margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px;
  font-size: 0.9rem; border: 1px solid var(--line); background: var(--off);
  color: var(--ink-soft);
}
.import-status.busy { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.import-status.ok { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.import-status.error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* Admin: site branding panel */
.brand-admin {
  margin: 8px 0 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
}
.brand-admin > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.brand-admin-body { padding: 0 16px 16px; }
.brand-admin-body .muted { font-size: 0.88rem; margin: 0 0 12px; }
.brand-admin-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand-admin-preview {
  height: 28px; width: auto; max-width: 220px; padding: 8px 14px; border-radius: 8px;
  background: rgba(10, 14, 23, 0.9); object-fit: contain;
}
.brand-admin-actions { display: flex; gap: 10px; align-items: center; }

.notfound { text-align: center; padding: 110px 20px; flex: 1; }
.notfound h1 { font-size: 4rem; margin: 0; color: var(--blue); }
.notfound p { color: var(--ink-soft); margin: 8px 0 24px; }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--line); background: var(--off);
  padding: 20px 24px; text-align: center; color: var(--ink-soft);
  font-size: 0.85rem; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.footer-sep { opacity: .5; }

/* ── EDITOR ── */
.editor { display: flex; flex-direction: column; min-height: 100vh; }
.toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; background: var(--white); border-bottom: 1px solid var(--line);
  flex-wrap: wrap; box-shadow: var(--shadow);
}
.tb-back { font-family: "DM Sans"; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.tb-title {
  font-family: "DM Sans"; font-weight: 700; font-size: 1rem;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; min-width: 200px; color: var(--ink);
}
.tb-title:hover { border-color: var(--line); }
.tb-title:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.tb-tpl { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.tb-tpl select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); }
.tb-status { font-size: 0.82rem; color: var(--ink-soft); min-width: 96px; }
.tb-status.dirty { color: #b45309; }
.tb-status.saving { color: var(--blue); }
.tb-status.saved { color: var(--ok); }
.tb-spacer { flex: 1; }
.tb-undo { display: inline-flex; gap: 6px; }
.tb-undo .btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.tb-undo .btn:disabled:hover { background: var(--white); }
.tb-translate { position: relative; display: inline-block; }
.tb-translate-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 150px; padding: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.tb-translate-menu[hidden] { display: none; }
.tb-translate-menu button {
  text-align: left; font: inherit; font-size: 0.88rem; color: var(--ink);
  padding: 8px 12px; border: 0; background: transparent; border-radius: 7px; cursor: pointer;
}
.tb-translate-menu button:hover { background: var(--off); color: var(--blue); }

/* Colour palette dropdown */
.tb-colors { position: relative; display: inline-block; }
.tb-colors-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 260px; padding: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.tb-colors-menu[hidden] { display: none; }
.colors-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.colors-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.colors-reset {
  font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--blue);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; cursor: pointer;
}
.colors-reset:hover { background: var(--off); }
.colors-grid { display: flex; flex-direction: column; gap: 4px; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.color-name { font-size: 0.82rem; color: var(--ink); }
.color-row.is-set .color-name { font-weight: 700; }
.color-row.is-na { opacity: .4; }
.color-ctrls { display: inline-flex; align-items: center; gap: 4px; }
.color-input {
  width: 30px; height: 24px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: none; cursor: pointer;
}
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-clear {
  width: 20px; height: 20px; line-height: 1; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  color: var(--ink-soft); font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.color-row.is-set .color-clear { opacity: 1; }
.color-clear:hover { background: #fee2e2; color: #b91c1c; }
.colors-note { margin: 10px 0 0; font-size: 0.72rem; color: var(--ink-soft); }

/* ---- Font picker (editor toolbar) ---- */
.tb-font { position: relative; display: inline-block; }
.tb-font-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 240px; padding: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.tb-font-menu[hidden] { display: none; }
.font-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.font-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.font-reset {
  font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--blue);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; cursor: pointer;
}
.font-reset:hover { background: var(--off); }
.font-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.font-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; cursor: pointer; text-align: left; color: var(--ink);
}
.font-item:hover { background: var(--off); border-color: var(--line); }
.font-item.is-active { border-color: var(--blue); background: rgba(37,99,235,.06); }
.font-item-name { font-size: 0.9rem; }
.font-item.is-active .font-item-name { font-weight: 700; color: var(--blue); }
.font-item-sample { font-size: 1.05rem; color: var(--ink-soft); }

/* Plan-choice interstitial shown right after a free user selects a template:
   keep the Free plan (edit + preview) or upgrade to Premium (unlocks download). */
.choice-wrap { max-width: 820px; margin: 48px auto; padding: 0 20px; }
.choice-head { text-align: center; margin-bottom: 32px; }
.choice-head h1 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px;
}
.choice-card--featured { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.choice-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.choice-name { font-size: 1.15rem; margin: 0 0 6px; color: var(--ink); }
.choice-price { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; }
.choice-price span { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.choice-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.choice-feats li { position: relative; padding-left: 26px; font-size: 0.94rem; color: var(--ink); }
.choice-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }
.choice-feats li.choice-no { color: var(--ink-soft); }
.choice-feats li.choice-no::before { content: "✕"; color: #c0424c; }
.choice-card .btn { margin-top: auto; }
.choice-fine { font-size: 0.82rem; margin: 12px 0 0; text-align: center; }

/* Non-blocking upgrade nudge shown at the top of the editor for Free-plan
   users. The CV is fully editable; this only reminds them PDF download needs
   Premium. */
.editor-upsell {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 9px 16px;
  background: linear-gradient(90deg, rgba(37,99,235,.10), rgba(37,99,235,.04));
  border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--ink);
}
.editor-upsell-text strong { color: var(--blue); }
@media print { .editor-upsell { display: none !important; } }

/* Bottom footer bar in the editor (editor uses the bare layout, so the site
   footer isn't present here). Spans the full width below the editing stage. */
.editor-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--line);
  background: var(--white); font-size: 0.78rem; color: var(--ink-soft);
}
.editor-footer-brand { font-weight: 600; color: var(--ink-soft); }
.editor-legal { display: flex; align-items: center; gap: 8px; }
.editor-legal a { color: var(--ink-soft); text-decoration: none; }
.editor-legal a:hover { color: var(--blue); text-decoration: underline; }
@media print { .editor-footer { display: none !important; } }

/* ---- Text-size stepper (editor toolbar) ---- */
.tb-textsize { display: inline-flex; align-items: center; gap: 2px; }
.tb-textsize .btn { min-width: 34px; padding: 6px 8px; }
.tb-textsize-label {
  min-width: 46px; text-align: center; font-size: 0.8rem; font-weight: 600;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.text-reset { font-size: 0.76rem; }

/* ---- Sidebar-width stepper + Fit-to-pages select ---- */
.tb-columns { display: inline-flex; align-items: center; gap: 2px; }
.tb-columns[hidden] { display: none; }
.tb-columns .btn { min-width: 30px; padding: 6px 8px; font-size: 1rem; line-height: 1; }
.tb-ctl-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); margin-right: 2px;
}
.tb-fit { display: inline-flex; align-items: center; gap: 4px; }
.tb-select {
  font-size: 0.8rem; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line, #d7dbe3); border-radius: 7px; padding: 5px 8px; cursor: pointer;
}
.tb-select:hover { border-color: var(--brand, #007fff); }

/* ---- Visual template picker (editor toolbar) ---- */
.tb-tpl { position: relative; display: inline-block; }
/* Keep the <select> in the DOM (editor.js reads/drives it) but out of sight. */
.tb-tpl-select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none;
}
.tb-template-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 502px; max-width: calc(100vw - 32px); padding: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.tb-template-menu[hidden] { display: none; }
.tpick-head { margin-bottom: 12px; }
.tpick-title { display: block; font-family: "DM Sans"; font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.tpick-sub { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; }
.tpick-grid {
  display: grid; grid-template-columns: repeat(3, 150px); gap: 14px;
  max-height: calc(100vh - 170px); overflow-y: auto; padding: 2px; justify-content: center;
}
.tpick-card {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: center;
}
.tpick-preview {
  position: relative; width: 150px; height: 212px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .15s, border-color .15s;
}
.tpick-card:hover .tpick-preview { border-color: var(--blue); box-shadow: var(--shadow); }
.tpick-scale {
  /* Must be block-level: transform + width are ignored on inline elements, which
     would leave each preview rendering the CV at full 794px (only a clipped
     corner visible) instead of a scaled-down whole-template thumbnail. */
  display: block;
  width: 794px; transform-origin: top left; transform: scale(0.189); /* 150 / 794 */
  pointer-events: none;
}
.tpick-scale .cv { padding-bottom: 0; }
.tpick-name {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: "DM Sans"; font-weight: 600; font-size: 0.78rem; color: var(--ink);
}
.tpick-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpick-lock { font-size: 0.72rem; }
/* Active (currently applied) template */
.tpick-card.is-active .tpick-preview { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.tpick-card.is-active .tpick-name { color: var(--blue); }
.tpick-card.is-active .tpick-preview::after {
  content: "✓"; position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 12px;
  background: var(--blue); color: #fff; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Locked (Pro) templates: still previewed, but not selectable here */
.tpick-card.is-locked { cursor: default; }
.tpick-card.is-locked .tpick-preview { opacity: .55; }
.tpick-card.is-locked .tpick-preview::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255,255,255,.35);
}
.tpick-card.is-locked .tpick-name { color: var(--ink-soft); }
.tpick-upgrade {
  display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  text-align: center; font-family: "DM Sans"; font-weight: 600; font-size: 0.82rem; color: var(--blue);
}
.tpick-upgrade:hover { text-decoration: underline; }

.editor-stage { flex: 1; padding: 30px 20px 80px; display: flex; justify-content: center; background: var(--off); }

.paper {
  background: #fff; width: 210mm; max-width: 100%; min-height: 297mm;
  box-shadow: var(--shadow-lg); border-radius: 2px;
}

/* ---- Formatting toolbar (below the main toolbar) ---- */
.fmt-bar {
  position: sticky; top: 53px; z-index: 19;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 18px; background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.fmt-btn {
  font: inherit; font-size: 0.82rem; line-height: 1; color: var(--ink);
  padding: 6px 10px; min-width: 34px;
  border: 1px solid var(--line); background: var(--white);
  border-radius: 7px; cursor: pointer;
}
.fmt-btn:hover { background: var(--off); border-color: var(--blue); color: var(--blue); }
.fmt-btn[aria-pressed="true"], .fmt-btn.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.fmt-btn:disabled { opacity: .35; cursor: default; }
.fmt-btn:disabled:hover { background: var(--white); border-color: var(--line); color: var(--ink); }
.fmt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.fmt-hint { font-size: 0.78rem; color: var(--ink-soft); margin-left: 8px; }

/* ---- Text-colour control (fmt bar) ---- */
.fmt-color { position: relative; display: inline-flex; }
.fmt-color-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px; }
.fmt-color-a { font-weight: 700; font-size: 0.86rem; line-height: 1; }
.fmt-color-bar { display: block; width: 16px; height: 3px; border-radius: 2px; background: #111827; }
.fmt-color-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 168px; padding: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.fmt-color-menu[hidden] { display: none; }
.fmt-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fmt-swatch {
  width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0,0,0,.15);
  border-radius: 5px; cursor: pointer;
}
.fmt-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(37,99,235,.35); }
.fmt-color-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
}
.fmt-color-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--ink); cursor: pointer; }
.fmt-color-custom input[type="color"] {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer;
}
.fmt-color-clear {
  font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; cursor: pointer;
}
.fmt-color-clear:hover { background: var(--off); color: var(--ink); }

/* ---- Split stage: left section panel + CV paper ---- */
.editor-split { align-items: flex-start; gap: 22px; }
.cv-panel {
  flex: 0 0 468px; align-self: stretch;
  position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
.cv-panel-head {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.cv-panel-head-text { min-width: 0; }
.cv-panel-title { display: block; font-family: "DM Sans"; font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.cv-panel-sub { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; }
.pnl-collapse-all {
  flex: 0 0 auto; margin-top: 2px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--white);
  font-family: "DM Sans"; font-weight: 600; font-size: 0.74rem; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pnl-collapse-all:hover { border-color: var(--blue); color: var(--blue); background: var(--off); }
.cv-panel-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.paper-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }

/* ---- Panel section cards ---- */
.pnl-card { border: 1px solid var(--line); border-radius: 10px; background: var(--white); overflow: hidden; }
.pnl-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; background: var(--off); border-bottom: 1px solid var(--line);
  font-family: "DM Sans"; font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
  cursor: pointer; user-select: none;
}
.pnl-card-head:hover { color: var(--blue); }
.pnl-card-head .pnl-title {
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
}
/* Let a custom section's title input share the header row with the caret. */
.pnl-card-head .pnl-input { flex: 1 1 auto; width: auto; }
/* Collapse / expand caret + hidden body. */
.pnl-caret { flex: 0 0 auto; font-size: 0.7rem; color: var(--ink-soft); transition: transform .15s ease; }
.pnl-card.collapsed .pnl-caret { transform: rotate(-90deg); }
.pnl-card.collapsed .pnl-card-body { display: none; }
/* Reorder (move up/down) controls in section + role headers. */
.pnl-head-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pnl-move { display: inline-flex; gap: 2px; }
.pnl-move-btn {
  border: 1px solid var(--line); background: var(--white); color: var(--ink-soft);
  border-radius: 5px; width: 20px; height: 20px; padding: 0; line-height: 1;
  font-size: 0.7rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pnl-move-btn:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); }
.pnl-move-btn:disabled { opacity: .35; cursor: default; }
.pnl-sub { font-size: 0.72rem; color: var(--ink-soft); }
.pnl-sub--collapsible { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pnl-sub--collapsible + .pnl-sub--collapsible { margin-top: 8px; }
.pnl-sub-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; background: var(--off); cursor: pointer; user-select: none;
}
.pnl-sub-head:hover .pnl-sub-title { color: var(--blue); }
.pnl-sub-title {
  flex: 0 1 auto; min-width: 0; font-family: "DM Sans"; font-weight: 600;
  font-size: 0.74rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dates shown next to the role title in the header. */
.pnl-sub-meta {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
}
.pnl-sub-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.pnl-sub--collapsible.collapsed .pnl-caret { transform: rotate(-90deg); }
.pnl-sub--collapsible.collapsed .pnl-sub-body { display: none; }
/* "+ Add section" button at the bottom of the panel. */
.pnl-add-section {
  margin-top: 2px; padding: 9px 12px; width: 100%;
  border: 1px dashed var(--line); border-radius: 10px; background: transparent;
  font-family: "DM Sans"; font-weight: 600; font-size: 0.8rem; color: var(--blue);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pnl-add-section:hover { border-color: var(--blue); background: var(--off); }
.pnl-add-role {
  margin-top: 2px; padding: 7px 12px; width: 100%;
  border: 1px dashed var(--line); border-radius: 8px; background: transparent;
  font-family: "DM Sans"; font-weight: 600; font-size: 0.78rem; color: var(--blue);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pnl-add-role:hover { border-color: var(--blue); background: var(--off); }
.pnl-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.pnl-field { display: flex; flex-direction: column; gap: 4px; }
.pnl-row2 { display: flex; gap: 8px; }
.pnl-row2 .pnl-field { flex: 1; }
.pnl-lbl { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.pnl-input, .pnl-title-input {
  font: inherit; font-size: 0.86rem; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); width: 100%;
}
.pnl-input:focus, .pnl-title-input:focus, .pnl-edit:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.pnl-kv { display: flex; flex-direction: column; gap: 8px; }
.pnl-kv-row { display: flex; gap: 8px; align-items: flex-start; }
.pnl-kv-k { flex: 0 0 34%; }
.pnl-kv-v { flex: 1; }
.pnl-edit {
  font: inherit; font-size: 0.86rem; color: var(--ink); line-height: 1.5;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--white);
  min-height: 34px; overflow-wrap: anywhere;
}
.pnl-edit--block { min-height: 90px; }
.pnl-edit--bullets { min-height: 110px; }
.pnl-edit:empty::before { content: attr(data-placeholder); color: var(--ink-soft); pointer-events: none; }
.pnl-edit ul, .pnl-edit ol { margin: 4px 0; padding-left: 22px; }
.pnl-edit ul { list-style: disc; }
.pnl-edit ol { list-style: decimal; }
.pnl-empty { font-size: 0.8rem; color: var(--ink-soft); padding: 6px 2px; }

.preview-page { padding: 24px 20px 60px; display: flex; flex-direction: column; align-items: center; background: var(--off); min-height: 100vh; }
.preview-bar { width: 210mm; max-width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

@media (max-width: 720px) {
  .features { grid-template-columns: 1fr; }
}

/* Stack the section panel above the CV on narrow screens. */
@media (max-width: 980px) {
  .editor-split { flex-direction: column; align-items: stretch; }
  .cv-panel { flex: 1 1 auto; position: static; max-height: none; width: 100%; }
  .paper-wrap { width: 100%; }
}

/* A4 with a 50px top/bottom margin. Left/right margin is 0 here — the 50px
   side inset is applied as .cv padding instead (see cv.css print) so the
   coloured header band can bleed into that padding and fill the full page
   width reliably (bleeding into the @page margin box gets clipped by headless
   Chromium). No browser-injected header (page title), footer (timestamp), or
   URL — the printed page is exactly the document. The first page drops its top
   margin so the header band sits flush against the top edge. */
@page { size: A4; margin: 50px 0; }
@page :first { margin-top: 0; }

@media print {
  .no-print, .toolbar, .fmt-bar, .cv-panel, .nav, .preview-bar, .site-footer { display: none !important; }
  .editor-split { display: block; }
  .paper-wrap { display: block; }
  html, body { background: #fff; margin: 0; }
  main.with-nav { padding-top: 0; }
  .editor-stage, .preview-page { padding: 0; background: #fff; }
  .paper { box-shadow: none; width: auto; min-height: 0; border-radius: 0; }
}