/* ============================================================
   JobEsperusVienna — calm design (soft sage & stone)
   ============================================================ */
:root {
  --bg: #f3f3ee;
  --surface: #fbfbf8;
  --text: #2c322c;
  --text-soft: #707a70;
  --border: #e1e3da;
  --accent: #5a7058;
  --accent-ink: #fbfbf8;
  --c-museum: #927952;
  --c-noedu: #5a7058;
  --c-music: #6d7590;
  --c-restaurant: #9a5c52;
  --c-startup: #46786f;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(44,50,44,.05), 0 4px 14px rgba(44,50,44,.05);
  --shadow-hover: 0 2px 4px rgba(44,50,44,.07), 0 10px 24px rgba(44,50,44,.09);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1020px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
a { color: var(--text); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }

button { font: inherit; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 16px; height: 56px; }
.logo { text-decoration: none; color: var(--text); margin-right: auto; }
.logo-text { font-size: 1.05rem; }
.logo-text strong { font-weight: 800; color: var(--accent); }
.header-nav { display: flex; gap: 2px; align-items: center; }
.header-nav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  text-decoration: none; color: var(--text-soft); font-size: .88rem; font-weight: 500;
  padding: 6px 11px; border-radius: 99px;
}
.nav-ico { flex: none; color: var(--text-soft); }
.header-nav a:hover .nav-ico, .header-nav a.is-active .nav-ico,
.nav-group-btn:hover .nav-ico, .nav-group.is-active .nav-ico { color: inherit; }
.header-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.header-nav a.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* grouped nav (dropdowns): dashboard + assistant, tools + cv */
.nav-group { position: relative; display: inline-flex; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: .88rem; font-weight: 500; color: var(--text-soft);
  background: transparent; border: none; cursor: pointer;
  padding: 6px 11px; border-radius: 99px;
}
.nav-group-btn:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nav-group.is-active > .nav-group-btn { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-group-caret { color: var(--text-soft); transition: transform .15s ease; }
.nav-group-btn[aria-expanded="true"] .nav-group-caret { transform: rotate(180deg); }
.nav-group-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-hover);
}
.nav-group-panel a {
  display: block; padding: 9px 10px; border-radius: 9px;
  font-size: .86rem; font-weight: 500; color: var(--text); text-decoration: none;
}
.nav-group-panel a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.nav-group-panel a.is-active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }

/* On desktop the tools render inline (identical layout); the hamburger is hidden.
   Mobile overrides live in the phone media block at the foot of this file. */
.header-tools { display: contents; }
.nav-toggle {
  display: none; place-items: center; width: 42px; height: 42px;
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 12px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--border); }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle.is-open .nav-toggle-open { display: none; }
.nav-toggle.is-open .nav-toggle-close { display: block; }

/* order:10 pulls the language pills to the far right of the header row on
   desktop (past the login/account) so they sit at the top-right corner,
   separated from the nav menu. Reset to 0 in the phone block so the slide-down
   menu keeps them inline. */
.lang-switch { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 2px; order: 10; }
.lang-btn {
  font-size: .72rem; font-weight: 700; color: var(--text-soft);
  background: transparent; border: none; border-radius: 99px;
  padding: 4px 9px; cursor: pointer;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.is-active { background: var(--accent); color: var(--accent-ink); }

.btn-auth {
  font-size: .84rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); border: none; border-radius: 99px;
  padding: 8px 18px; cursor: pointer;
}
.btn-auth:hover { opacity: .9; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 4px 12px 4px 4px; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text);
}
.user-chip:hover { border-color: var(--accent); }
.user-chip[aria-expanded="true"] { border-color: var(--accent); }
.user-avatar {
  display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 99px; font-size: .8rem; font-weight: 800;
}
.user-caret { color: var(--text-soft); transition: transform .15s ease; }
.user-chip[aria-expanded="true"] .user-caret { transform: rotate(180deg); }
@media (max-width: 560px) { .user-name { display: none; } }

/* account dropdown */
.user-menu { position: relative; }
.user-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-hover);
}
.user-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.user-avatar-lg { width: 36px; height: 36px; font-size: 1rem; flex: 0 0 auto; }
.user-menu-id { display: grid; min-width: 0; }
.user-menu-id strong { font-size: .9rem; font-weight: 700; }
.user-menu-email {
  font-size: .76rem; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-item {
  display: block; width: 100%; text-align: left; text-decoration: none;
  padding: 9px 10px; border: none; border-radius: 9px; cursor: pointer;
  font-size: .86rem; font-weight: 500; color: var(--text); background: transparent;
}
.user-menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.user-menu-logout { color: #a04545; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; }
.user-menu-logout:hover { background: color-mix(in srgb, #a04545 10%, transparent); color: #a04545; }

.btn-primary {
  font-size: .9rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); border: none; border-radius: 99px;
  padding: 11px 26px; cursor: pointer; box-shadow: var(--shadow);
}
.btn-primary:hover { opacity: .9; }

/* ---------- hero ---------- */
.hero { padding: 42px 0 8px; }
.hero h1 {
  margin: 0 0 12px; max-width: 680px; color: #3c463c;
  font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1.13;
}
.hero-sub { margin: 0 0 8px; max-width: 620px; color: var(--text-soft); font-size: .98rem; }
.hero-sub strong { color: var(--text); }

/* ---------- category tabs ---------- */
.catbar-wrap {
  position: sticky; top: 56px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: 12px 0 0;
}
.catbar { display: flex; gap: 8px; flex-wrap: wrap; }
.cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .89rem; font-weight: 600; color: var(--text-soft);
  background: transparent; border: 1px solid transparent; border-radius: 99px;
  padding: 8px 15px; margin-bottom: 10px; cursor: pointer;
}
.cat:hover { color: var(--text); }
.cat.is-active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); color: var(--text); }
.cat[data-focus="museum"].is-active { color: var(--c-museum); }
.cat[data-focus="no-education"].is-active { color: var(--c-noedu); }
.cat[data-focus="music"].is-active { color: var(--c-music); }
.cat[data-focus="startup"].is-active { color: var(--c-startup); }
.cat-ico { flex: 0 0 auto; }
.cat-n {
  font-size: .72rem; font-weight: 700; color: var(--text-soft);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  padding: 1px 7px; border-radius: 99px;
}
.cat.is-active .cat-n { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.cat-desc { margin: 0; padding: 0 4px 10px; font-size: .85rem; color: var(--text-soft); min-height: 1.2em; max-width: 1000px; }

/* ---------- home page ---------- */
.hero-home { padding: 56px 0 30px; text-align: center; }
.hero-home h1 { margin-left: auto; margin-right: auto; font-size: clamp(2rem, 5vw, 3.1rem); }
.hero-home .hero-sub { margin: 0 auto 26px; }
.home-stats { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 26px; color: var(--text-soft); font-size: .85rem; }

/* Prerendered per-city SEO block (#seo-intro) — evergreen lede + the internal
   link mesh to this city's filters and its country siblings. Written by
   scripts/lib/seo-city.mjs; the SPA never touches it. Real content for readers,
   not a keyword shelf: it stays legible and on-brand. */
.seo-intro { padding: 22px 0 4px; }
.seo-lede { margin: 0 0 14px; max-width: 68ch; color: var(--text-soft); font-size: .93rem; line-height: 1.65; }
.seo-links { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-links a {
  text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 99px; padding: 6px 13px;
  transition: background .13s, color .13s;
}
.seo-links a:hover { background: var(--accent); color: var(--accent-ink); }
.seo-more { margin: 14px 0 0; font-size: .84rem; color: var(--text-soft); line-height: 1.9; }
.seo-more a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.seo-more a:hover { color: var(--accent); }

/* Crawlable, evergreen copy shown UNDER the listings on the prerendered
   jobs-view routes (#jobs-seo, filled by the prerenderers — seo-static /
   seo-intent / seo-city kind=jobs). Empty in the template and on client-side
   navigation, so all chrome lives on .seo-jobs-in and an empty block is
   invisible (no :empty / hidden needed). See app.js clearJobsSeo(). */
.seo-jobs-in { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); }
.seo-jobs-in h2 { font-size: 1.25rem; margin: 0 0 12px; }
.seo-jobs-in .seo-lede { max-width: 74ch; }
.seo-faq { margin: 16px 0 4px; max-width: 74ch; }
.seo-faq details { border-top: 1px solid var(--border); padding: 11px 0; }
.seo-faq details:last-child { border-bottom: 1px solid var(--border); }
.seo-faq summary { cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: '+'; color: var(--text-soft); font-weight: 400; }
.seo-faq details[open] summary::after { content: '\2013'; }
.seo-faq p { margin: 9px 0 0; color: var(--text-soft); font-size: .9rem; line-height: 1.65; }

/* Legal pages (Impressum / Privacy / Terms) — readable long-form prose. */
.legal-wrap { padding: 8px 0 44px; }
.legal-body { max-width: 76ch; }
.legal-body h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.legal-body p, .legal-body li { color: var(--text-soft); font-size: .93rem; line-height: 1.7; }
.legal-body ul { margin: 8px 0; padding-left: 20px; }
.legal-body li { margin: 5px 0; }
.legal-body a { color: var(--accent); }
.legal-updated { font-size: .84rem; opacity: .75; margin-bottom: 18px; }

/* AI Act Art. 50 disclosure, shown where an AI feature is used. */
.ai-disclaimer { margin: 12px 0 0; max-width: 68ch; font-size: .8rem; color: var(--text-soft); line-height: 1.55; opacity: .9; }
/* FAGG pre-contractual note under the pricing call-to-action. */
.pricing-legal { margin: 12px 0 0; font-size: .78rem; color: var(--text-soft); line-height: 1.5; }
.pricing-legal a { color: var(--accent); }

.home-cats { padding: 26px 0 10px; }
.home-cats h2, .home-how h2, .home-latest h2, .home-startup h2 { font-size: 1.35rem; margin: 0 0 18px; }
.home-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.home-cat {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
.home-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--hc, var(--accent)); }
.home-cat svg { color: var(--hc, var(--accent)); }
.home-cat h3 { margin: 4px 0 0; font-size: 1.05rem; }
.home-cat p { margin: 0; font-size: .85rem; color: var(--text-soft); }
.hc-count { margin-top: 8px; font-size: .85rem; font-weight: 700; color: var(--hc, var(--accent)); }
.hc-museum { --hc: var(--c-museum); }
.hc-noedu { --hc: var(--c-noedu); }
.hc-music { --hc: var(--c-music); }
.hc-restaurant { --hc: var(--c-restaurant); }
.hc-startup { --hc: var(--c-startup); }

.home-how { padding: 26px 0 8px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.how-grid article {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow);
}
.how-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  background: var(--accent); color: var(--accent-ink); border-radius: 99px;
  font-weight: 800; font-size: .85rem; margin-bottom: 8px;
}
.how-grid h3 { margin: 0 0 6px; font-size: .98rem; }
.how-grid p { margin: 0; font-size: .85rem; color: var(--text-soft); }

.home-latest { padding: 26px 0 8px; }
/* the startup "best of" block — same rhythm as .home-latest, tinted so it reads
   as its own speciality rather than a second newest-listings list */
.home-startup { padding: 26px 0 8px; }
.home-startup h2 { color: var(--c-startup); margin-bottom: 4px; }
.home-startup-sub { margin: 0 0 18px; font-size: .88rem; color: var(--text-soft); }
.home-startup .home-viewall a { color: var(--c-startup); }
.home-viewall { text-align: center; margin: 18px 0 0; }
.home-viewall a { font-weight: 700; color: var(--accent); text-decoration: none; }
.home-viewall a:hover { text-decoration: underline; }

.home-join { padding: 30px 0; }
.home-join-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius); padding: 22px 26px;
}
.home-join-inner h2 { margin: 0 0 4px; font-size: 1.2rem; }
.home-join-inner p { margin: 0; color: var(--text-soft); font-size: .9rem; }

/* ---------- dashboard ---------- */
.dash { padding: 8px 0 44px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-col { display: grid; gap: 16px; }
.dash-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.dash-card h2 { margin: 0 0 10px; font-size: 1.05rem; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: .88rem;
}
.dash-row-main { display: grid; gap: 1px; min-width: 0; }
.dash-row-main a { color: var(--text); text-decoration: none; font-weight: 600; }
.dash-row-main a:hover { color: var(--accent); }
.dash-account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
/* ---------- guest marketing (signed-out feature showcase) ---------- */
.guest-promo-wrap { padding: 10px 0 52px; }
.guest-promo { display: grid; gap: 30px; }
.guest-promo-head { text-align: center; max-width: 680px; margin: 8px auto 0; }
.guest-promo-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 5px 13px; border-radius: 99px; margin-bottom: 16px;
}
.guest-promo-head h2 { margin: 0 0 12px; font-size: clamp(1.55rem, 3.6vw, 2.15rem); line-height: 1.15; }
.guest-promo-lead { margin: 0 auto; max-width: 560px; color: var(--text-soft); font-size: 1rem; line-height: 1.6; }
.guest-promo-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.guest-promo-trust { margin: 14px 0 0; font-size: .8rem; color: var(--text-soft); }
.guest-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
.guest-feat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow);
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
.guest-feat:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--gf, var(--accent)) 55%, var(--border));
}
.guest-feat-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  color: var(--gf, var(--accent));
  background: color-mix(in srgb, var(--gf, var(--accent)) 14%, transparent);
  margin-bottom: 14px;
}
.guest-feat h3 { margin: 0 0 6px; font-size: 1rem; }
.guest-feat p { margin: 0; font-size: .87rem; color: var(--text-soft); line-height: 1.5; }
@media (max-width: 560px) {
  .guest-promo-cta .btn-hero { width: 100%; }
}
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-intro {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 16px;
  font-size: .88rem; color: var(--text-soft);
}
.dash-feed-card { margin-bottom: 16px; }
.dash-feed-card .job-list { margin-top: 12px; }
.dash-card .ai-muted { margin: -4px 0 10px; }

/* ---------- assistant ---------- */
.asst-wrap { padding: 14px 0 50px; }
.asst-tabs-wrap { position: relative; }
.asst-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
/* ‹ › scroll affordances for the tab row — hidden by default, shown only on
   phones where the row scrolls (see @media 720px); JS toggles .is-off at each end */
.asst-tabs-nav {
  display: none; position: absolute; top: 0; bottom: 11px; z-index: 3;
  align-items: center; width: 50px; padding: 0;
  border: none; cursor: pointer; color: var(--accent); -webkit-tap-highlight-color: transparent;
}
.asst-tabs-nav-l { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--bg) 40%, transparent); }
.asst-tabs-nav-r { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--bg) 40%, transparent); }
.asst-tabs-nav.is-off { display: none; }
.asst-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--text-soft);
  background: transparent; border: 1px solid transparent; border-radius: 99px;
  padding: 8px 14px; cursor: pointer;
}
.asst-tab:hover { color: var(--text); }
.asst-tab.is-active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); color: var(--accent); }
.asst-tab svg { flex: 0 0 auto; }
.asst-disclaimer { margin: 12px 2px 0; }

.asst-panel {
  margin-top: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.asst-desc { margin: 0 0 16px; font-size: .9rem; color: var(--text-soft); }
.asst-field { display: block; margin-bottom: 14px; }
.asst-label { display: block; font-size: .78rem; font-weight: 700; color: var(--text-soft); margin-bottom: 5px; }
.asst-textwrap { position: relative; }
.asst-textwrap textarea, .asst-chat-input {
  width: 100%; font: inherit; font-size: .92rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 44px 11px 13px; resize: vertical; line-height: 1.5;
}
.asst-textwrap textarea:focus, .asst-chat-input:focus { outline: none; border-color: var(--accent); }
.asst-mic {
  position: absolute; right: 8px; top: 8px;
  display: grid; place-items: center; width: 32px; height: 32px;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border); border-radius: 99px; cursor: pointer;
}
.asst-mic:hover { color: var(--accent); border-color: var(--accent); }
.asst-mic.is-rec { color: #fff; background: #b04a4a; border-color: #b04a4a; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(176,74,74,.16); } }
.asst-stt-lang { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-soft); margin-bottom: 14px; }
.asst-stt-lang select { font: inherit; font-size: .82rem; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.asst-modes { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.asst-radio { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; cursor: pointer; }
.asst-radio input { accent-color: var(--accent); }
.asst-go { margin-top: 4px; }
.asst-canva {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--c-music) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--c-music) 22%, var(--border));
  border-radius: 11px; padding: 11px 14px; margin: 4px 0 16px; font-size: .84rem; color: var(--text-soft);
}
.asst-canva a { flex: 0 0 auto; text-decoration: none; }

.asst-output {
  margin-top: 16px; padding: 16px 18px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: .92rem; line-height: 1.6; max-height: 520px; overflow-y: auto;
}
.asst-output p { margin: 0 0 10px; }
.asst-output h3 { font-size: 1.02rem; margin: 14px 0 6px; }
.asst-output h4 { font-size: .92rem; margin: 12px 0 5px; }
.asst-output ul { margin: 6px 0 10px; padding-left: 20px; }
.asst-output li { margin: 3px 0; }
.asst-output p:empty { display: none; }
.asst-err { color: #a04545; }
.asst-cursor { display: inline-block; width: 8px; height: 16px; background: var(--accent); animation: blink 1s steps(2) infinite; vertical-align: -2px; }
@keyframes blink { 50% { opacity: 0; } }
.asst-out-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.asst-refine { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-left: 4px; border-left: 1px solid var(--border); }
.asst-refine-l { font-size: .78rem; }

/* gated-AI fallback card inside a tool */
.asst-gate {
  display: grid; gap: 12px; justify-items: start;
  margin-top: 16px; padding: 18px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.asst-gate p { margin: 0; font-size: .9rem; }

/* banner linking every tool to the central profile */
.asst-profile-note {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 8px 9px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid var(--border); font-size: .85rem; color: var(--text-soft);
}
/* "preparing for <job>" banner when arriving from a job card */
.asst-jobctx {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 14px; padding: 9px 10px 9px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--c-museum) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c-museum) 26%, var(--border));
  font-size: .85rem; font-weight: 600; color: var(--text);
}
.asst-jobctx-x {
  flex: 0 0 auto; width: 24px; height: 24px; border: none; border-radius: 99px; cursor: pointer;
  background: transparent; color: var(--text-soft); font-size: 1.2rem; line-height: 1;
}
.asst-jobctx-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.asst-chat-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }

.asst-chat { margin-top: 4px; }
.asst-messages {
  max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 4px; margin-bottom: 12px;
}
.asst-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; }
.asst-msg p { margin: 0 0 8px; }
.asst-msg p:last-child { margin: 0; }
.asst-msg ul { margin: 6px 0; padding-left: 18px; }
.asst-msg-bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.asst-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.asst-chatbar { display: flex; align-items: flex-end; gap: 8px; }
.asst-chatbar .asst-chat-input { flex: 1; padding-right: 13px; }
.asst-chatbar .asst-mic { position: static; flex: 0 0 auto; width: 40px; height: 40px; }
.asst-send { flex: 0 0 auto; padding: 11px 20px; }
@media (max-width: 560px) { .asst-msg { max-width: 95%; } }

/* ---------- two-panel workbench: your materials left, AI right ---------- */
.asst-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.asst-col { min-width: 0; }
.asst-col-out { position: sticky; top: 14px; }
@media (max-width: 820px) {
  .asst-work { grid-template-columns: 1fr; gap: 18px; }
  .asst-col-out { position: static; }
}

/* placeholder shown in the output column before anything has run */
.asst-out-empty, .cv-empty, .asst-conv-empty {
  display: grid; place-items: center; text-align: center; gap: 6px;
  min-height: 220px; padding: 26px 22px; line-height: 1.5;
  border: 1px dashed var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text-soft); font-size: .9rem;
}
.asst-conv-empty { min-height: 160px; margin: 4px; }

/* conversation tools (interview, chat): scrollable thread + pinned input bar */
.asst-convo { display: flex; flex-direction: column; }
.asst-convo .asst-messages { flex: 1; min-height: 320px; max-height: 60vh; margin-bottom: 12px; }
.asst-convo .asst-chat-input[disabled],
.asst-convo .asst-send[disabled],
.asst-convo .asst-mic[disabled] { opacity: .55; cursor: not-allowed; }

/* quick-prompt suggestion chips in the chat tool */
.asst-suggest { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 4px 0 16px; }
.asst-suggest .asst-label { margin-bottom: 2px; }
.asst-suggest-chip {
  text-align: left; font: inherit; font-size: .86rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 13px; cursor: pointer; transition: border-color .15s, color .15s;
}
.asst-suggest-chip:hover { border-color: var(--accent); color: var(--accent); }
.asst-chat-reset { margin-top: 2px; }

/* ---------- right-column "Ask AI to review" CTA card ---------- */
/* The empty placeholders double as a call to action: an icon, a hint and the
   primary button that "transforms" into the answer / conversation on click. */
.asst-cta-card {
  gap: 13px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}
.asst-cta-ico {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.asst-cta-card p { margin: 0; max-width: 32ch; }
.asst-cta-card .btn-primary { margin-top: 2px; }
.asst-convo-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ---------- saved-CV library cards (assistant + CV tool) ---------- */
.asst-cvlib { margin: 2px 0 16px; }
.asst-cvlib-l { display: block; margin-bottom: 8px; }
.asst-cvcards { display: flex; flex-wrap: wrap; gap: 8px; }
.asst-cvcard {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.asst-cvcard:hover { border-color: var(--accent); }
.asst-cvcard.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.asst-cvcard.is-busy { opacity: .6; cursor: progress; }
.asst-cvcard-ico { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.asst-cvcard-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* label row carrying a "Pick a job announcement" shortcut next to the field */
.asst-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.asst-field-head .asst-label { margin-bottom: 0; }
.asst-pick-job { flex: 0 0 auto; }

/* ---------- setup screen (interview / CV / letter): pick a doc, see the job,
   press one round button ---------- */
.asst-setup-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .asst-setup-grid { grid-template-columns: 1fr; gap: 18px; } }
.asst-setup-l { display: block; margin-bottom: 10px; }
.asst-setup-doc .asst-doc-gallery { margin: 0; }
/* keep the gallery a calm, single-row strip inside the assistant */
.asst-doc-gallery .apply-cv-card { width: 116px; }
.asst-doc-gallery .apply-cv-card-thumb { height: 136px; }

/* the target-job bubble */
.asst-jobbubble {
  position: relative; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg); padding: 14px 16px; max-height: 280px; overflow: auto;
}
.asst-jobbubble-title { margin: 0 0 6px; font-weight: 700; font-size: .92rem; color: var(--text); }
.asst-jobbubble-text { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--text-soft); white-space: pre-wrap; }
.asst-jobbubble-empty { display: grid; place-items: center; gap: 10px; text-align: center; color: var(--text-soft); }
.asst-jobbubble-empty p { margin: 0; }
.asst-find-job { cursor: pointer; text-decoration: none; }

/* the round "start" button */
.asst-setup-go { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px 0 6px; }
.asst-start-circle {
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--accent-ink);
  background: var(--accent); border: none; box-shadow: var(--shadow);
  transition: transform .15s, filter .15s;
}
.asst-start-circle:hover { transform: scale(1.05); filter: brightness(.97); }
.asst-start-circle .asst-start-ico { display: inline-flex; }
.asst-start-circle.is-busy { pointer-events: none; opacity: .65; }
.asst-start-circle.is-busy .asst-start-ico {
  width: 26px; height: 26px; border: 3px solid color-mix(in srgb, var(--accent-ink) 45%, transparent);
  border-top-color: var(--accent-ink); border-radius: 50%; animation: asst-spin .8s linear infinite;
}
.asst-start-circle.is-busy .asst-start-ico svg { display: none; }
@keyframes asst-spin { to { transform: rotate(360deg); } }
.asst-start-t { font-weight: 700; font-size: .95rem; color: var(--text); text-align: center; }

/* ---------- running tool: toolbar (change / peek) + the job-ad peek popover ---------- */
.asst-live { position: relative; }
.asst-livebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.asst-peek-btn {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--border); transition: border-color .15s, color .15s;
}
.asst-peek-btn:hover { border-color: var(--accent); color: var(--accent); }
.asst-peek-pop {
  position: absolute; top: 44px; right: 0; z-index: 6; width: min(440px, 92vw);
  max-height: 60vh; overflow: auto; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.asst-peek-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-weight: 700; font-size: .9rem; }
.asst-peek-sec { margin-top: 10px; }
.asst-peek-l { display: block; margin-bottom: 4px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); }
.asst-peek-pre {
  margin: 0; font-family: inherit; font-size: .8rem; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; max-height: 30vh; overflow: auto;
}
/* streamed markdown report (letter feedback) */
.asst-report { font-size: .9rem; line-height: 1.6; min-height: 200px; }
.asst-report p { margin: 0 0 10px; }
.asst-report ul { margin: 8px 0; padding-left: 20px; }

/* ---------- job picker modal ---------- */
.jobpick-card { display: flex; flex-direction: column; max-height: min(80vh, 720px); }
.jobpick-sub { margin: 2px 0 12px; }
.jobpick-search { margin-bottom: 12px; }
.jobpick-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.jobpick-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.jobpick-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.jobpick-row-t { font-weight: 600; font-size: .9rem; }
.jobpick-row-m { font-size: .8rem; }
.jobpick-empty { padding: 24px 6px; text-align: center; }

/* ---------- auth modal extras / toast ---------- */
.modal-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; font-size: 1.25rem; color: var(--text-soft); cursor: pointer;
}
.modal-x:hover { color: var(--text); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 10px 0; cursor: pointer; margin-top: 12px;
}
.btn-google:hover { border-color: var(--accent); }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 2px;
  color: var(--text-soft); font-size: .78rem;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.auth-error { color: #a04545; font-size: .84rem; margin: 10px 0 0; }
.auth-error.is-ok { color: var(--accent); }
.auth-link {
  background: none; border: none; color: var(--accent); font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; padding: 6px 0 0; text-align: left;
}
.auth-link:hover { text-decoration: underline; }

/* centered, focused sign-in popup */
.auth-card { max-width: 400px; padding: 30px 28px 26px; text-align: center; }
.auth-card h3 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 6px; }
.auth-card .ai-muted { max-width: 320px; margin: 0 auto; line-height: 1.45; }
.auth-card .btn-google { margin-top: 18px; }
.auth-card .modal-label { text-align: left; }
.auth-card .auth-error { text-align: center; }
.auth-card .modal-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; }
.auth-card #auth-submit { width: 100%; }
.auth-card .auth-link { width: 100%; text-align: center; padding: 4px 0; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: var(--text); color: var(--bg); font-size: .87rem; font-weight: 600;
  padding: 10px 20px; border-radius: 99px; box-shadow: var(--shadow-hover);
}

/* ---------- save / hide / seen on cards ---------- */
.job-actions { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.job-save, .job-hide {
  display: grid; place-items: center; width: 32px; height: 32px;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border); border-radius: 99px; cursor: pointer;
}
.job-save:hover { color: var(--accent); border-color: var(--accent); }
.job-save.is-saved { color: var(--accent); border-color: var(--accent); }
.job-hide:hover { color: #a04545; border-color: #a04545; }
.job-card.is-seen { opacity: .72; }
.job-card.is-seen:hover { opacity: 1; }
.badge-seen {
  display: inline-block; color: var(--text-soft);
  font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  margin-left: 8px; vertical-align: 2px;
}
.filter-check {
  display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text);
  padding: 8px 2px; cursor: pointer;
}
.filter-check input { accent-color: var(--accent); width: 16px; height: 16px; }

.ai-muted { font-size: .83rem; color: var(--text-soft); }
.ai-btn-sm {
  font-size: .78rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 12px; cursor: pointer;
}
.ai-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.ai-btn-danger:hover { border-color: #a04545; color: #a04545; }

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(44, 50, 44, .35); backdrop-filter: blur(3px);
  padding: 20px;
}
.modal-card {
  position: relative; width: 100%; max-width: 470px; max-height: 85vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-hover);
}
.modal-card h3 { margin: 0 0 8px; }
.modal-label { display: grid; gap: 4px; margin-top: 12px; font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.modal-label input {
  font: inherit; font-size: .9rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
}
.modal-label input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.alert-create { display: grid; gap: 8px; margin: 12px 0; }
.alert-create input {
  font: inherit; font-size: .9rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
}
.alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-top: 1px solid var(--border); font-size: .88rem;
}
.alert-actions { display: flex; gap: 6px; }
.email-pref-row {
  display: flex; align-items: flex-start; gap: 9px; margin: 10px 0;
  font-size: .9rem; line-height: 1.4; cursor: pointer;
}
.email-pref-row input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.email-pref-note { margin: 6px 0 0; font-size: .82rem; }
.alert-new {
  font-size: .7rem; font-weight: 800; color: var(--accent-ink);
  background: var(--accent); border-radius: 99px; padding: 1px 8px; margin-left: 6px;
}

/* ---------- toolbar / filters ---------- */
.toolbar-wrap { padding: 12px 0 0; }
.toolbar { display: flex; gap: 8px; align-items: stretch; }
.searchbar {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  color: var(--text-soft);
}
.searchbar:focus-within { border-color: var(--accent); }
.searchbar input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 10px 0; font: inherit; font-size: .92rem; color: var(--text);
}
.btn-filters {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 0 16px; cursor: pointer;
}
.btn-filters:hover, .btn-filters.is-open { border-color: var(--accent); color: var(--accent); }
.filters-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  font-size: .68rem; font-weight: 800; color: var(--accent-ink);
  background: var(--accent); border-radius: 99px; padding: 0 4px;
}
.toolbar > select, .filter-panel select {
  font: inherit; font-size: .88rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 9px 12px; cursor: pointer;
}
.filter-panel select { border-radius: 9px; }
.toolbar > select:hover { border-color: var(--accent); }

.filter-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
  align-items: end;
  margin-top: 10px; padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.filter-group { display: grid; gap: 4px; }
.filter-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.btn-clear {
  font-size: .85rem; font-weight: 600; color: var(--text-soft);
  background: transparent; border: 1px dashed var(--border); border-radius: 9px;
  padding: 9px 12px; cursor: pointer;
}
.btn-clear:hover { color: var(--accent); border-color: var(--accent); }

.active-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.apill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 99px; padding: 4px 11px; cursor: pointer;
}
.apill-x { font-size: 1rem; line-height: 1; color: var(--text-soft); }
.apill:hover .apill-x { color: var(--text); }

/* ---------- results ---------- */
.results { padding: 6px 0 44px; min-height: 55vh; }
.results-count { color: var(--text-soft); font-size: .85rem; margin: 14px 4px 10px; }
/* minmax(0,…): a plain 1fr floors at the row's min-content, so one card with a
   wide unshrinkable footer button steals width from its neighbour */
.job-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 820px) { .job-list { grid-template-columns: 1fr; } }

/* date-bucket headers ("New today" / "New this week" / "Earlier") */
.job-section {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 -2px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-soft);
}
.job-section:not(:first-child) { margin-top: 20px; }
.job-section-n {
  font-size: .72rem; font-weight: 800;
  padding: 1px 8px; border-radius: 99px;
  color: var(--text-soft); background: color-mix(in srgb, var(--text-soft) 12%, transparent);
}
.job-section-today { color: var(--accent); }
.job-section-today .job-section-n {
  color: var(--accent-ink); background: var(--accent);
}

.job-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow);
  position: relative; min-width: 0;
  transition: box-shadow .13s, border-color .13s, transform .13s;
}
.job-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.job-top { display: flex; gap: 12px; align-items: flex-start; }
.job-logo {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  object-fit: contain; background: #fff; border: 1px solid var(--border);
}
.job-logo-fallback {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  color: #fff; background: var(--av, var(--text-soft));
}
.job-head { min-width: 0; padding-right: 74px; }
.job-title { margin: 0; font-size: 1rem; line-height: 1.32; font-weight: 650; }
.job-title a { color: var(--text); text-decoration: none; }
.job-title a::after { content: ""; position: absolute; inset: 0; }
.job-title a:hover { color: var(--accent); }
.job-company { color: var(--text-soft); font-size: .85rem; margin: 3px 0 0; }
.badge-new {
  display: inline-block; color: var(--accent);
  font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  margin-left: 8px; vertical-align: 2px;
}
.job-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-soft);
}
.tag-salary { background: color-mix(in srgb, var(--c-noedu) 13%, transparent); color: var(--c-noedu); }
.tag-en { background: color-mix(in srgb, var(--c-music) 13%, transparent); color: var(--c-music); }
.tag-focus { font-weight: 700; }
.tag-focus-museum { background: color-mix(in srgb, var(--c-museum) 14%, transparent); color: var(--c-museum); }
.tag-focus-music { background: color-mix(in srgb, var(--c-music) 14%, transparent); color: var(--c-music); }
.tag-focus-no-education { background: color-mix(in srgb, var(--c-noedu) 14%, transparent); color: var(--c-noedu); }
.tag-focus-startup { background: color-mix(in srgb, var(--c-startup) 14%, transparent); color: var(--c-startup); }
.job-snippet {
  color: var(--text-soft); font-size: .84rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.job-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: .76rem; color: var(--text-soft);
}
.job-source a { color: var(--text-soft); }
.job-foot-actions {
  display: inline-flex; align-items: center; gap: 8px 14px;
  flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto;
}
/* primary action: open the guided 3-step application page */
.job-apply {
  position: relative; z-index: 2; flex: 0 0 auto;
  font-weight: 700; font-size: .8rem; color: var(--accent-ink);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 99px;
  padding: 6px 14px; cursor: pointer;
}
.job-apply:hover { filter: brightness(.96); }
/* secondary: straight to the original announcement */
.job-view {
  position: relative; z-index: 2; flex: 0 0 auto;
  font-weight: 600; font-size: .8rem; color: var(--accent); text-decoration: none;
  background: transparent; border: 1px solid var(--accent); border-radius: 99px;
  padding: 5px 13px;
}
.job-view:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* tertiary: open the job assistant (interview practice, CV / letter review) */
.job-prepare {
  position: relative; z-index: 2; flex: 0 0 auto;
  font-weight: 600; font-size: .8rem; color: var(--text); text-decoration: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 13px; cursor: pointer; transition: border-color .15s, color .15s;
}
.job-prepare:hover { border-color: var(--accent); color: var(--accent); }
/* never let a long label ("Direct access to the job announcement") push the card
   wider than its grid column — wrap inside the button instead */
.job-apply, .job-view, .job-prepare { max-width: 100%; text-align: center; }

/* ===================== GUIDED APPLICATION PAGE ===================== */
.apply-wrap { padding: 22px 0 60px; }

/* avatar + connected bubble stepper */
.apply-stepper {
  display: flex; align-items: center; gap: 0; flex-wrap: nowrap;
  margin: 4px 0 20px; overflow-x: auto; padding-bottom: 4px;
}
.apply-avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-size: 1.3rem; font-weight: 700; color: var(--accent-ink); background: var(--accent);
  border: 2px solid var(--surface); box-shadow: var(--shadow);
}
.apply-avatar img { width: 100%; height: 100%; object-fit: cover; }
.apply-stepline { flex: 1 1 24px; min-width: 18px; height: 2px; background: var(--border); }
.apply-stepline.is-done { background: var(--accent); }
.apply-bubble {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0; width: 92px;
}
.apply-bubble-circle {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: .95rem; font-weight: 700; color: var(--text-soft);
  background: var(--surface); border: 2px solid var(--border); transition: all .15s;
}
.apply-bubble-label { font-size: .72rem; font-weight: 600; color: var(--text-soft); text-align: center; line-height: 1.2; }
.apply-bubble.is-active .apply-bubble-circle { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.apply-bubble.is-active .apply-bubble-label { color: var(--text); }
.apply-bubble.is-done .apply-bubble-circle { color: var(--accent); border-color: var(--accent); }

.apply-job { margin-bottom: 14px; }
.apply-for { display: block; font-size: .78rem; }
.apply-jobname { font-size: 1.25rem; margin: 2px 0 4px; }
.apply-loc { font-size: .85rem; margin-right: 10px; }
.apply-annlink { font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.apply-annlink:hover { text-decoration: underline; }
.apply-intro {
  width: 100%; line-height: 1.55; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 22px;
}
.apply-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 22px;
  font-size: .9rem;
}
.apply-step {
  display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 18px 20px; margin-bottom: 18px;
}
.apply-step.is-active { display: block; border-color: var(--accent); box-shadow: var(--shadow); }
.apply-step-head { display: flex; align-items: center; gap: 10px; }
.apply-step-n {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent);
  border-radius: 99px; padding: 3px 10px;
}
.apply-step-t { font-size: 1.05rem; margin: 0; }
.apply-step-d { margin: 6px 0 12px; font-size: .9rem; line-height: 1.5; }
.apply-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.apply-row-center { justify-content: center; }
.apply-select {
  flex: 1 1 200px; min-width: 160px; font-family: inherit; font-size: .9rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px;
}
.apply-select:focus { outline: none; border-color: var(--accent); }
.apply-fieldlabel {
  display: block; font-size: .78rem; font-weight: 600; color: var(--text-soft); margin: 10px 0 5px;
}
.apply-field {
  width: 100%; resize: vertical; font-family: inherit; font-size: .92rem; line-height: 1.5;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 13px;
}
.apply-field:focus { outline: none; border-color: var(--accent); }
.apply-report {
  margin-top: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  font-size: .9rem; line-height: 1.55;
}
.apply-report:empty { display: none; }
.apply-step-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* CV gallery (Step 1) — horizontal, scrollable cards of saved CVs */
.apply-cv-gallery {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
}
.apply-cv-card {
  flex: 0 0 auto; width: 122px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 7px; position: relative;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 8px; cursor: pointer; text-align: center; font-family: inherit; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.apply-cv-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.apply-cv-card.is-active { border-color: var(--accent); box-shadow: var(--shadow); }
.apply-cv-card-thumb {
  height: 148px; display: grid; place-items: center; overflow: hidden; font-size: 2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
/* CORS-free PDF preview: the browser renders the file natively inside the card. */
.apply-cv-thumb-frame {
  width: 100%; height: 100%; border: 0; display: block; background: #fff; pointer-events: none;
}
.apply-cv-thumb-glyph { font-size: 2rem; line-height: 1; }
.apply-cv-thumb-text {
  font-size: .6rem; line-height: 1.4; color: var(--text-soft); text-align: left; padding: 8px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
}
.apply-cv-card-name {
  font-size: .78rem; font-weight: 600; line-height: 1.25; min-height: 2em;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.apply-cv-card-check {
  position: absolute; top: 6px; right: 6px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
  opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;
}
.apply-cv-card.is-active .apply-cv-card-check { opacity: 1; transform: scale(1); }
.apply-cv-add { color: var(--text-soft); }
.apply-cv-add-thumb { border-style: dashed; }
.apply-cv-add-plus { font-size: 2.2rem; line-height: 1; color: var(--text-soft); }
.apply-cv-add.is-busy { opacity: .6; pointer-events: none; }
.apply-cv-check { display: flex; justify-content: center; margin: 18px 0 4px; }
.apply-cv-checkbtn { padding: 12px 32px; font-size: .98rem; }

/* Step 1, chosen-CV view: the picked CV on the left, a drop zone for a new
   version on the right (replaces the gallery once a CV is selected). */
.apply-cv-chosen {
  display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; padding: 4px 2px 8px;
}
.apply-cv-chosen-side { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.apply-cv-change { align-self: flex-start; }
.apply-cv-chosen-card {
  width: 132px; display: flex; flex-direction: column; gap: 7px; position: relative;
  background: var(--bg); border: 1.5px solid var(--accent); border-radius: 12px;
  padding: 8px; text-align: center; box-shadow: var(--shadow);
}
.apply-cv-chosen-card .apply-cv-card-thumb {
  height: 160px; display: grid; place-items: center; overflow: hidden; font-size: 2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.apply-cv-vbadge {
  position: absolute; bottom: 44px; right: 6px;
  padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
}
.apply-cv-vdrop {
  flex: 1 1 240px; min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 18px; cursor: pointer; color: var(--text-soft);
  background: var(--surface); border: 2px dashed var(--border); border-radius: 12px;
  transition: border-color .15s, background .15s, color .15s;
}
.apply-cv-vdrop:hover, .apply-cv-vdrop:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }
.apply-cv-vdrop.is-over { border-color: var(--accent); background: var(--accent-wash, var(--surface)); color: var(--text); }
.apply-cv-vdrop.is-busy { opacity: .6; pointer-events: none; }
.apply-cv-vdrop-icon { color: var(--accent); }
.apply-cv-vdrop-t { font-weight: 600; font-size: .92rem; margin: 0; color: var(--text); }
.apply-cv-vdrop-hint { font-size: .78rem; margin: 0; max-width: 30ch; }

/* iterative AI coach panel + step nav */
.apply-coach-hint { font-size: .82rem; margin: 10px 0 0; }
.apply-coach-wrap { margin-top: 14px; }
.apply-coach-wrap[hidden] { display: none; }
.apply-coach-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 6px;
}
.apply-coach-round { font-weight: 600; color: var(--accent); text-transform: none; letter-spacing: 0; }
.apply-coach { margin-top: 0; }
/* Step 2 "letter studio" — two panels: editor (left) + AI chat (right) */
.lstudio {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px;
  align-items: stretch;
}
.lstudio-pane {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
}
.lstudio-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.lstudio-scope {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft); border: 1px solid var(--border); border-radius: 99px; padding: 3px 9px;
  margin-right: 2px; white-space: nowrap;
}
.lstudio-scope.is-sel { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.lstudio-tool { padding: 5px 10px; font-size: .8rem; }
.lstudio-text { flex: 1 1 auto; min-height: 320px; background: var(--bg); }
.lstudio-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.lstudio-hint { font-size: .78rem; }

.lstudio-chat-head {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 8px;
}
.lstudio-msgs {
  flex: 1 1 auto; min-height: 320px; max-height: 520px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
}
.lstudio-empty { font-size: .85rem; line-height: 1.5; margin: auto 0; text-align: center; padding: 12px; }
.lstudio-msg { max-width: 92%; font-size: .88rem; line-height: 1.5; }
.lstudio-msg.is-user { align-self: flex-end; }
.lstudio-msg.is-user .lstudio-body {
  background: var(--accent); color: var(--accent-ink); border-radius: 14px 14px 4px 14px; padding: 8px 12px;
}
.lstudio-msg.is-ai { align-self: flex-start; }
.lstudio-msg.is-ai .lstudio-body {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 9px 12px;
}
.lstudio-replace { white-space: pre-wrap; }
.lstudio-msg-actions { margin-top: 6px; }
.lstudio-compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.lstudio-input {
  flex: 1 1 auto; resize: vertical; min-height: 42px; font-family: inherit; font-size: .88rem; line-height: 1.4;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px;
}
.lstudio-input:focus { outline: none; border-color: var(--accent); }
.lstudio-send { white-space: nowrap; }
@media (max-width: 720px) {
  .lstudio { grid-template-columns: 1fr; }
  .lstudio-text, .lstudio-msgs { min-height: 220px; }
}

.apply-nav { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.apply-nav-spacer { flex: 1 1 auto; }
.apply-assemble-wrap { text-align: center; margin: 8px 0 24px; }
.apply-done {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
}
.apply-done h2 { font-size: 1.1rem; margin: 0 0 4px; }
.apply-done-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.apply-sent { color: var(--accent); font-weight: 600; margin-top: 12px; }
.apply-gate {
  text-align: center; max-width: 38ch; margin: 30px auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 20px;
}
.apply-gate p { margin: 0 0 16px; color: var(--text-soft); }

.load-more-wrap { text-align: center; margin-top: 24px; }
.btn-load-more {
  font-size: .9rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 99px;
  padding: 11px 36px; cursor: pointer; box-shadow: var(--shadow);
}
.btn-load-more:hover { opacity: .9; }
.empty-state { text-align: center; padding: 46px 0; color: var(--text-soft); }

/* ---------- guide ---------- */
.guide { padding: 40px 0 46px; border-top: 1px solid var(--border); }
.guide h2 { font-size: 1.35rem; margin: 0 0 22px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.guide-grid article {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.guide-grid h3 { margin: 0 0 7px; font-size: .98rem; }
.guide-grid p { margin: 0; font-size: .86rem; color: var(--text-soft); }

/* ---------- footer ---------- */
.site-footer { padding: 32px 0 26px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: .85rem; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
@media (max-width: 700px) { .footer-cols { grid-template-columns: 1fr; } }
/* the 19-city link mesh: two compact columns so the footer stays short */
.footer-cities { grid-template-columns: 1fr 1fr; column-gap: 14px; }

/* ---- onboarding tour modal ---- */
/* One step at a time, centred like the sign-in card: a single idea per screen
   reads faster than a four-item list, and it lets the last step carry the real
   call to action (the email alert) on its own. Filled by renderOnb() in app.js. */
.onb-card { max-width: 480px; padding: 26px 26px 20px; text-align: center; }
.onb-icon {
  width: 54px; height: 54px; margin: 2px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.onb-eyebrow {
  margin: 0 0 6px; font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}
.onb-card h3 { font-size: 1.28rem; line-height: 1.25; margin: 0 0 9px; }
.onb-text { margin: 0 auto; max-width: 370px; color: var(--text-soft); font-size: .9rem; line-height: 1.55; }
.onb-note {
  margin: 14px auto 0; max-width: 370px; font-size: .77rem; line-height: 1.5; color: var(--text-soft);
  background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px;
}
.onb-dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 0; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.onb-dot.is-on { background: var(--accent); }
.onb-actions { justify-content: center; }
.onb-skip {
  display: block; width: 100%; text-align: center; padding: 12px 0 0;
  font-size: .78rem; color: var(--text-soft);
}
.onb-skip:hover { color: var(--accent); }
@media (max-width: 520px) {
  .onb-card { padding: 24px 18px 18px; }
  .onb-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .onb-actions .btn-primary { width: 100%; }
}
.footer-logo { font-size: .98rem; color: var(--text); margin: 0 0 8px; }
.footer-logo strong { font-weight: 800; color: var(--accent); }
.footer-head { font-weight: 700; color: var(--text); margin: 0 0 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--accent); }
/* the Help/tutorial entry is a JS action, so it is a <button> styled as a link */
.footer-linkbtn { background: none; border: 0; padding: 0; font: inherit; text-align: left; color: var(--text-soft); cursor: pointer; }
.footer-linkbtn:hover { color: var(--accent); }
.footer-legal { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; font-weight: 600; }
.footer-legal a { color: var(--text-soft); }
.footer-legal a:hover { color: var(--accent); }
.footer-note { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--border); font-size: .76rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  .toolbar { flex-wrap: wrap; }
  .searchbar { flex-basis: 100%; }
  .ai-bar { flex-wrap: wrap; border-radius: var(--radius); padding: 10px 12px; }
  .ai-bar input { flex-basis: 100%; order: -1; padding: 4px 2px 8px; }
  .cat { padding: 7px 11px; font-size: .82rem; }
}

/* ============================================================
   Phone optimisation — scoped to small screens only.
   Desktop (>720px) is untouched.
   ============================================================ */
@media (max-width: 720px) {
  /* ---- header: hamburger + slide-down menu ---- */
  .nav-toggle { display: grid; }
  .header-tools {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 14px 20px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-hover);
  }
  .header-tools.is-open { display: flex; }
  .header-nav { display: flex; flex-direction: column; gap: 2px; }
  .header-nav a { padding: 11px 12px; font-size: 1rem; border-radius: 10px; }
  /* in the slide-down menu the groups flatten: header label + inline items */
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-group-btn { justify-content: space-between; padding: 11px 12px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
  .nav-group-btn:hover { background: transparent; color: var(--text-soft); }
  .nav-group-caret { display: none; }
  .nav-group-panel, .nav-group-panel[hidden] {
    position: static; display: flex; min-width: 0; margin: 0; padding: 0 0 0 8px;
    background: transparent; border: none; box-shadow: none;
  }
  .nav-group-panel a { padding: 11px 12px; font-size: 1rem; border-radius: 10px; }
  .lang-switch { align-self: flex-start; order: 0; }
  .btn-auth { width: 100%; padding: 12px 18px; }
  .user-chip { align-self: flex-start; }
  .user-name { display: inline; }
  /* in the slide-down menu the dropdown expands inline, full width */
  .user-menu-panel {
    position: static; right: auto; min-width: 0; margin-top: 8px;
    box-shadow: none; background: var(--bg);
  }

  /* ---- avoid iOS focus auto-zoom: form text must be >= 16px ---- */
  .searchbar input, #search,
  .asst-textwrap textarea, .asst-chat-input,
  .modal-label input, .alert-create input, .fe-tag-input, .fe-salary input, .me-field input,
  .toolbar > select, .filter-panel select, .asst-stt-lang select, .topics-field select { font-size: 16px; }

  /* ---- tighter hero spacing on phones ---- */
  .hero { padding: 28px 0 6px; }
  .hero-home { padding: 34px 0 22px; }
  .hero-home .hero-sub { margin-bottom: 20px; }
  .hero-lead { font-size: 1rem; }

  /* ---- hero CTAs: full-width stacked, easy thumb targets ---- */
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta-row .btn-hero { width: 100%; justify-content: center; text-align: center; }
  .btn-ghost { justify-content: center; }

  /* ---- category tabs + assistant tabs: one swipeable row ---- */
  .catbar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -20px; padding: 0 20px 2px;
  }
  .catbar::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 auto; margin-bottom: 4px; }
  .asst-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .asst-tabs::-webkit-scrollbar { display: none; }
  .asst-tab { flex: 0 0 auto; }
  .asst-tabs-nav { display: flex; }
  .asst-tabs-nav.is-off { display: none; }

  /* ---- bigger tap targets on job cards ---- */
  .job-save, .job-hide { width: 38px; height: 38px; }
  .job-head { padding-right: 86px; }

  /* ---- join banner + assistant panel ---- */
  .home-join-inner { padding: 18px 18px; }
  .home-join-inner .btn-primary { width: 100%; }
  .asst-panel { padding: 16px 15px; }
  .asst-msg { max-width: 92%; }

  /* ---- auth modal: pin near top so the keyboard doesn't hide it ---- */
  .modal { align-items: start; padding-top: 30px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .catbar { margin: 0 -16px; padding: 0 16px 2px; }
  .hero-home { padding: 26px 0 18px; }
  .home-stats { gap: 16px; }
  .job-card { padding: 16px 15px 13px; }
  .dash-card { padding: 16px 16px; }
  /* calmer heading scale + section rhythm on small phones */
  .home-cats h2, .home-how h2, .home-latest h2, .home-startup h2, .guide h2 { font-size: 1.2rem; }
  .home-join-inner h2 { font-size: 1.1rem; }
  .home-cats, .home-how, .home-latest, .home-startup { padding-top: 20px; }
  .home-join, .guide { padding: 24px 0; }
  /* email setup card: full-width primary action, comfortable toggles */
  .dash-email-card .btn-primary { width: 100%; }
  .email-pref-row { padding: 4px 0; }
}

/* ---------- AI job-profile finder ---------- */
/* finder modal / My profile */
.modal-lg .modal-card { max-width: 640px; }
.finder-panel { margin-top: 6px; }
.finder-sec-t { margin: 0 0 4px; font-size: 1.05rem; }
.finder-sec-help { margin: 0 0 14px; }
.finder-about { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.finder-want > .finder-sec-t { margin-bottom: 8px; }
.me-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.me-field { display: block; margin-bottom: 4px; }
.me-field > .fe-label { margin-bottom: 6px; }
.me-field input[type="text"] {
  width: 100%; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
}
.me-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
@media (max-width: 560px) { .me-grid { grid-template-columns: 1fr; } }
.finder-intro { margin: 0 0 14px; font-size: .9rem; color: var(--text-soft); line-height: 1.55; }
.finder-messages { max-height: 300px; }
.finder-actions { margin-top: 6px; display: grid; gap: 8px; justify-items: center; }
.finder-find { width: 100%; }
.finder-manual {
  background: none; border: none; cursor: pointer; padding: 2px;
  font-size: .82rem; color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px;
}
.finder-manual:hover { color: var(--accent); }

/* editable filter panel */
.finder-editor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.finder-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.finder-editor-head h3 { margin: 0; font-size: 1rem; }
.finder-editor-help { margin: 4px 0 14px; }
.fe-group { margin-bottom: 14px; }
.fe-label { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); margin-bottom: 7px; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-chip {
  font-size: .8rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 6px 12px; cursor: pointer;
}
.fe-chip:hover { border-color: var(--accent); color: var(--accent); }
.fe-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fe-toggle { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: .88rem; cursor: pointer; }
.fe-toggle input { width: 17px; height: 17px; accent-color: var(--accent); }
.fe-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fe-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 99px; padding: 4px 6px 4px 11px;
}
.fe-tag-x {
  display: grid; place-items: center; width: 17px; height: 17px;
  border: none; border-radius: 99px; cursor: pointer; line-height: 1; font-size: .9rem;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
}
.fe-tag-x:hover { background: var(--accent); color: var(--accent-ink); }
.fe-tag-input {
  flex: 1 1 120px; min-width: 120px; font: inherit; font-size: .85rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px;
}
.fe-tag-input:focus { outline: none; border-color: var(--accent); }
.fe-salary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fe-salary-row .fe-label { margin-bottom: 0; }
.fe-salary { display: inline-flex; align-items: center; gap: 8px; }
.fe-salary input {
  width: 96px; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px;
}
.fe-salary input:focus { outline: none; border-color: var(--accent); }

.finder-results { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.finder-results-t { margin: 0 0 4px; font-size: 1rem; }
.finder-summary { margin: 0 0 12px; }
.finder-matches { margin-top: 4px; }
.finder-results-foot { margin-top: 12px; }
.finder-seeall { width: 100%; }
.finder-save {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.finder-save p { margin: 0 0 10px; font-size: .86rem; color: var(--text-soft); }

/* "for you" banner on the jobs page */
.foryou-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.foryou-banner-text { font-size: .88rem; color: var(--text); }

/* dashboard profile card */
.dash-profile-card.is-empty {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}
.profile-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.profile-cta-text h2 { margin: 0 0 4px; }
.profile-cta-text p { margin: 0; }
.profile-cta .btn-primary { flex: 0 0 auto; }
.profile-summary { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

@media (max-width: 560px) {
  .finder-messages { max-height: 50vh; }
  .profile-cta .btn-primary { width: 100%; }
}

/* ------------------------------------------------------------ membership / paywall */
.paywall-wrap { padding: 2rem 0 3rem; }
.paywall { padding: 1rem 0; }
.paywall-card {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e7dd;
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 6px 24px rgba(60, 69, 57, 0.06);
}
.paywall-title { margin: 0 0 .35rem; font-size: 1.3rem; color: #3c4539; }
.paywall-sub { margin: 0 0 1rem; color: #5d655a; }
.paywall-price { margin: 0 0 1rem; font-size: 1rem; color: #5d655a; }
.paywall-price strong { font-size: 2rem; color: #3c4539; }
.paywall-feats {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  text-align: left;
  display: grid;
  gap: .6rem;
}
.paywall-feats li {
  position: relative;
  padding-left: 1.6rem;
  color: #4a5247;
  font-size: .92rem;
  line-height: 1.4;
}
.paywall-feats li::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem;
  width: .85rem; height: .5rem;
  border-left: 2px solid #5a7058;
  border-bottom: 2px solid #5a7058;
  transform: rotate(-45deg);
}
.paywall-card .btn-primary { width: 100%; }
.paywall-trial { margin: -0.5rem 0 1rem; color: #5d655a; font-size: .88rem; }
.dash-sub-line { margin: .25rem 0 .75rem; color: #5d655a; font-size: .9rem; }

/* ------------------------------------------------------------ pricing page */
.pricing-wrap { padding: 8px 0 48px; }
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
/* the offer card — sticks alongside the feature list on wide screens */
.pricing-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow);
  text-align: center;
  position: sticky;
  top: 84px;
}
.pricing-badge {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 99px; padding: 4px 12px; margin-bottom: 12px;
}
.pricing-amount { margin: 0; line-height: 1; }
.pricing-amount strong { font-size: 2.9rem; font-weight: 800; color: var(--text); }
.pricing-amount span { font-size: 1rem; color: var(--text-soft); margin-left: 4px; }
.pricing-trial { margin: 10px 0 18px; color: var(--text-soft); font-size: .9rem; }
.pricing-cta .btn-primary { width: 100%; text-decoration: none; display: block; }
.price-cta-note { margin: 12px 0 0; color: var(--text-soft); font-size: .85rem; line-height: 1.45; }
.pricing-reassure {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--border);
  text-align: left; display: grid; gap: 9px;
}
.pricing-reassure li {
  position: relative; padding-left: 26px;
  color: var(--text-soft); font-size: .86rem; line-height: 1.35;
}
.pricing-reassure li::before {
  content: ""; position: absolute; left: 4px; top: .28rem;
  width: .8rem; height: .46rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* what's included */
.pricing-feats-title { margin: 4px 0 18px; font-size: 1.25rem; }
.pricing-feat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.pricing-feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pricing-feat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.pricing-feat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pricing-feat h3 { margin: 0 0 6px; font-size: 1rem; }
.pricing-feat p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.5; }
.pricing-foot { margin: 18px 0 0; color: var(--text-soft); font-size: .86rem; line-height: 1.5; }

/* why pay? — live numbers + the side-by-side against searching on your own */
.pricing-why { padding: 8px 0 56px; border-top: 1px solid var(--border); }
.pricing-why .container { padding-top: 34px; }
.pricing-why-h2 { margin: 0 0 8px; font-size: 1.5rem; }
.pricing-why-sub { margin: 0 0 22px; max-width: 64ch; color: var(--text-soft); line-height: 1.55; }
.pricing-stats {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.pricing-stats li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  display: grid; gap: 2px;
}
.pricing-stats strong { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.pricing-stats span { color: var(--text-soft); font-size: .85rem; line-height: 1.35; }
.pricing-stat-wide { grid-column: 1 / -1; padding: 10px 16px; }
.cmp { display: grid; gap: 10px; }
.cmp-head, .cmp-row {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.cmp-head { padding: 0 16px 2px; }
.cmp-col-h { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.cmp-col-pro { color: var(--accent); }
.cmp-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.cmp-topic { margin: 0; font-size: .95rem; align-self: center; }
.cmp-cell { margin: 0; position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.5; color: var(--text-soft); }
.cmp-pro { color: var(--text); }
.cmp-free::before { /* a muted dash — the thing you'd be doing by hand */
  content: ""; position: absolute; left: 2px; top: .62rem;
  width: .74rem; height: 2px; border-radius: 2px;
  background: var(--text-soft); opacity: .55;
}
.cmp-pro::before { /* the same tick the rest of the page uses */
  content: ""; position: absolute; left: 3px; top: .34rem;
  width: .8rem; height: .46rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.cmp-label { display: none; }
.pricing-why-foot { margin: 20px 0 0; max-width: 72ch; color: var(--text-soft); font-size: .86rem; line-height: 1.55; }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 22px; }
  .pricing-card { position: static; top: auto; max-width: 460px; margin: 0 auto; }
  /* the column headers can't survive the stack — each cell labels itself */
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 10px; }
  .cmp-label {
    display: block; margin-bottom: 2px;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-soft);
  }
  .cmp-pro .cmp-label { color: var(--accent); }
}
@media (max-width: 520px) {
  .pricing-feat-grid { grid-template-columns: 1fr; }
  .pricing-stats { grid-template-columns: 1fr 1fr; }
}

/* Site-wide membership banner (free-trial countdown / subscribe nudge) */
#trial-banner {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.trial-banner-inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .5rem 1rem; padding: .5rem 1rem;
}
.trial-banner-msg { color: var(--text); font-size: .9rem; font-weight: 600; }
.trial-banner-inner.is-over .trial-banner-msg { color: #a05252; }
.trial-banner-btn {
  border: none; cursor: pointer; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .82rem; font-weight: 700; padding: .35rem .9rem;
}
.trial-banner-btn:hover { filter: brightness(1.06); }

/* ------------------------------------------------------------ salary calculator */
.calc-wrap { padding: 8px 0 48px; }
.calc-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px;
}
.calc-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; align-items: end; }
.calc-grid-2 { grid-template-columns: 1fr 1fr; }
.calc-field { display: grid; gap: 5px; min-width: 0; }
.calc-label { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.calc-form input[type="number"], .calc-form select {
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; width: 100%;
}
.calc-form input[type="number"]:focus, .calc-form select:focus { outline: none; border-color: var(--accent); }
.calc-input-money { display: flex; gap: 8px; }
.calc-input-money input { flex: 1 1 auto; }
.calc-input-money select { flex: 0 0 auto; width: auto; border-radius: 10px; cursor: pointer; }

.calc-adv { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.calc-adv > summary {
  cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--accent);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.calc-adv > summary::-webkit-details-marker { display: none; }
.calc-adv > summary::before { content: "＋"; font-weight: 700; }
.calc-adv[open] > summary::before { content: "−"; }
.calc-adv-body { display: grid; gap: 10px; margin-top: 14px; }
.calc-sub { font-size: .82rem; font-weight: 700; color: var(--text); margin-top: 6px; }
.calc-field-sm { max-width: 220px; }
.calc-check { display: flex; align-items: center; gap: 9px; font-size: .9rem; cursor: pointer; }
.calc-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.calc-help { font-size: .78rem; color: var(--text-soft); margin: -2px 0 4px; line-height: 1.45; }

.calc-results { margin-top: 18px; }
.calc-empty { color: var(--text-soft); font-size: .92rem; padding: 8px 2px; }
.calc-headline {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
.calc-big {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 4px;
}
.calc-big-soft { background: var(--surface); border-color: var(--border); }
.calc-big-label { font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.calc-big-val { font-size: clamp(1.5rem, 4vw, 2rem); color: #3c463c; letter-spacing: -0.02em; }

.calc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.calc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
}
.calc-card h3 { margin: 0 0 8px; font-size: .95rem; }
.calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-soft);
}
.calc-row:first-of-type { border-top: none; }
.calc-num { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; white-space: nowrap; }
.calc-row-total { font-weight: 700; color: var(--text); border-top: 2px solid var(--accent); margin-top: 2px; padding-top: 9px; }
.calc-row-total .calc-num { font-size: 1.02rem; color: var(--accent); }
.calc-card .calc-help { margin: 8px 0 0; }

.calc-note {
  margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid var(--border); font-size: .86rem; color: var(--text-soft); line-height: 1.5;
}
.calc-note-good {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text);
}
.calc-about { margin-top: 26px; max-width: 720px; }
.calc-about h2 { font-size: 1.05rem; margin: 0 0 8px; }
.calc-about p { font-size: .9rem; color: var(--text-soft); line-height: 1.6; margin: 0 0 10px; }

/* ---------- CV guide + motivation-letter library ---------- */
.cvg-wrap { padding: 8px 0 48px; }
.cvg-section { margin: 0 0 38px; }
.cvg-section > h2 { font-size: 1.2rem; margin: 0 0 6px; }
.cvg-lead { margin: 0 0 18px; max-width: 720px; color: var(--text-soft); font-size: .92rem; line-height: 1.6; }

.cvg-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cvg-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.cvg-step-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 99px;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
}
.cvg-step strong { display: block; font-size: .92rem; margin-bottom: 3px; }
.cvg-step p { margin: 0; font-size: .85rem; color: var(--text-soft); line-height: 1.5; }

.cvg-format {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px;
}
.cvg-format h3 { margin: 0 0 8px; font-size: .98rem; }
.cvg-format ul { margin: 0; padding-left: 18px; }
.cvg-format li { font-size: .88rem; color: var(--text-soft); line-height: 1.5; margin: 0 0 6px; }

/* template gallery — surfaced on /profile and standalone */
.profile-templates { margin-top: 34px; }
.cvg-gallery > h2 { font-size: 1.1rem; margin: 0 0 6px; }
.cvg-tpls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cvg-tpl {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.cvg-tpl:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.cvg-tag {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 99px; padding: 2px 9px; margin-bottom: 2px;
}
.cvg-tpl strong { font-size: .98rem; color: var(--text); }
.cvg-tpl-d { font-size: .83rem; color: var(--text-soft); line-height: 1.45; }
.cvg-tpl-go { margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--accent); }
.cvg-note { margin: 14px 0 0; font-size: .83rem; color: var(--text-soft); }
.cvg-note a { color: var(--accent); font-weight: 600; }

/* motivation-letter profiles */
.cvg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cvg-tab {
  font-size: .85rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: 7px 15px; cursor: pointer;
}
.cvg-tab:hover { color: var(--text); border-color: var(--accent); }
.cvg-tab.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.cvg-locked {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 34px 24px; color: var(--text-soft);
}
.cvg-locked svg { color: var(--accent); }
.cvg-locked p { margin: 0; max-width: 420px; font-size: .9rem; line-height: 1.55; }

.cvg-letter-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px;
}
.cvg-letter-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cvg-when { margin: 0; font-size: .85rem; color: var(--text-soft); line-height: 1.5; max-width: 560px; }
.cvg-when strong { color: var(--text); }
.cvg-langtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 99px; overflow: hidden; flex: 0 0 auto; }
.cvg-lang { font-size: .78rem; font-weight: 700; color: var(--text-soft); background: var(--surface); border: none; padding: 5px 14px; cursor: pointer; }
.cvg-lang.is-active { color: var(--accent-ink); background: var(--accent); }

.cvg-letter {
  margin: 14px 0; padding: 16px 18px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font); font-size: .88rem; line-height: 1.6; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.cvg-letter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cvg-letter-actions .ai-btn-sm { text-decoration: none; }
.cvg-tips { margin-top: 16px; }
.cvg-tips h3 { margin: 0 0 6px; font-size: .92rem; }
.cvg-tips ul { margin: 0; padding-left: 18px; }
.cvg-tips li { font-size: .85rem; color: var(--text-soft); line-height: 1.5; margin: 0 0 5px; }

.cvg-canva {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius); padding: 22px 24px;
}
.cvg-canva h2 { margin: 0 0 4px; font-size: 1.1rem; }
.cvg-canva p { margin: 0; font-size: .9rem; color: var(--text-soft); max-width: 520px; }
.cvg-canva .btn-primary { flex: 0 0 auto; text-decoration: none; }

/* the annotated example letter (each paragraph carries its step badge) */
.cl-annotated { display: flex; flex-direction: column; gap: 14px; }
.cl-block { display: flex; gap: 12px; align-items: flex-start; }
.cl-badge {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--accent); color: var(--accent-ink); font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-blocktext { font-size: .9rem; line-height: 1.6; }

/* Do / Don't two-up */
.cvg-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cvg-do h3 { color: #1a7f4b; }
.cvg-dont h3 { color: #b3423a; }

/* "Build your CV" — the two builder cards (Reactive Resume + Canva) */
.cvb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.cvb-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.cvb-card.is-primary {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.cvb-card h3 { margin: 0; font-size: 1.15rem; }
.cvb-card p { margin: 0; font-size: .9rem; color: var(--text-soft); line-height: 1.55; }
.cvb-card ul { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--text-soft); line-height: 1.55; flex: 1 1 auto; }
.cvb-card li { margin: 0 0 4px; }
.cvb-card .btn-primary { text-decoration: none; margin-top: 4px; }

/* AI "thinking" spinner — buttons and report panels */
.btn-spin {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: jev-spin .8s linear infinite; vertical-align: -2px; margin-right: 8px;
}
.apply-thinking { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .92rem; padding: 6px 0; }
.apply-thinking .btn-spin { margin-right: 0; }
@keyframes jev-spin { to { transform: rotate(360deg); } }

/* ---------- grouped writing tools: guide hero → editor ----------
   /cv-guide and /cover-letter-guide are the front doors; their editors
   (/cv-designer, /letter-designer) are sub-pages reached from the hero. */
.hero-tool { padding: 42px 0 24px; }
.hero-tool .hero-sub { max-width: 640px; margin-bottom: 18px; }
.tool-eyebrow {
  margin: 0 0 9px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.hero-tool .hero-cta-row { justify-content: flex-start; margin: 0 0 16px; }
.hero-tool .hero-cta-row .btn-primary {
  display: inline-flex; align-items: center; text-decoration: none;
}
.tool-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.tool-points li { display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--text-soft); }
.tool-points li::before {
  content: '✓'; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: .62rem; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
}
.tool-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
  font-size: .84rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.tool-back:hover { text-decoration: underline; }
.tool-note { margin: 10px 0 0; font-size: .85rem; color: var(--text-soft); max-width: 620px; }

/* the guide below the hero, read as numbered chapters */
.cvg-toc {
  margin: 0 0 34px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.cvg-toc > h2 { margin: 0 0 5px; font-size: 1.2rem; }
.cvg-toc-lead { margin: 0 0 14px; max-width: 720px; font-size: .9rem; color: var(--text-soft); line-height: 1.6; }
.cvg-toc-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.cvg-toc-list a {
  display: flex; align-items: center; gap: 9px; height: 100%; text-decoration: none;
  font-size: .87rem; font-weight: 600; color: var(--text);
  border: 1px solid var(--border); border-radius: 99px; padding: 7px 14px;
}
.cvg-toc-list a:hover { border-color: var(--accent); color: var(--accent); }
.cvg-toc-n {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
}
/* the hero's "read the guide first" link and the TOC both scroll into place
   under the 56px sticky header */
.cvg-wrap[id], .cvg-chapter { scroll-margin-top: 72px; }
.cvg-chapter-n {
  margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent);
}

@media (max-width: 720px) {
  .cvg-steps, .cvg-tpls { grid-template-columns: 1fr; }
  .cvg-dodont, .cvb-cards { grid-template-columns: 1fr; }

  /* ---- guide hero: tighter, one thumb-sized CTA per row ----
     (.hero-cta-row itself already stacks + goes full width site-wide) */
  .hero-tool { padding: 26px 0 20px; }
  .hero-tool .hero-sub { margin-bottom: 16px; }
  .tool-eyebrow { letter-spacing: .04em; }
  /* the ✓ points read as a list, not a wrapped inline row */
  .tool-points { flex-direction: column; gap: 7px; }
  .tool-points li { align-items: flex-start; line-height: 1.45; }
  .tool-points li::before { margin-top: 1px; }
  /* editor pages: a comfortable tap target back to the guide */
  .tool-back { margin: 0 0 6px; padding: 6px 0; font-size: .88rem; }

  /* ---- table of contents: full-width rows, 44px tall, text may wrap ---- */
  .cvg-toc { padding: 16px 16px; margin-bottom: 26px; }
  .cvg-toc-list { grid-template-columns: 1fr; gap: 6px; }
  .cvg-toc-list a { min-height: 44px; border-radius: 12px; padding: 9px 13px; }

  /* ---- the letter library's profile tabs: one swipeable row ---- */
  .cvg-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -20px 16px; padding: 0 20px 2px;
  }
  .cvg-tabs::-webkit-scrollbar { display: none; }
  .cvg-tab { flex: 0 0 auto; }

  /* ---- full-width actions in the letter + builder cards ----
     NB .btn-primary sets no `display`, so an <a> version stays inline and
     ignores width unless its parent is a flex container (or we blockify it). */
  .cvg-letter-actions { flex-direction: column; align-items: stretch; }
  .cvg-letter-actions > * { width: 100%; justify-content: center; text-align: center; }
  .cvb-card { padding: 20px 17px; }
  .cvb-card .btn-primary { width: 100%; text-align: center; }
  .cvg-canva { padding: 18px 17px; }
  .cvg-canva-actions { width: 100%; }
  .cvg-canva .btn-primary { display: block; width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .hero-tool { padding: 22px 0 18px; }
  .cvg-toc > h2, .cvg-section > h2 { font-size: 1.1rem; }
  .cvg-toc { padding: 15px 15px; margin-bottom: 24px; }
  .cvg-tabs { margin: 0 -16px 16px; padding: 0 16px 2px; }
  .cvg-letter-wrap { padding: 15px 15px; }
  .cvg-letter { padding: 13px 14px; }
  .cvg-format { padding: 14px 16px; }
  .cvg-step { padding: 13px 14px; }
}
.calc-disclaimer { font-size: .8rem; font-style: italic; }

@media (max-width: 720px) {
  .calc-grid { grid-template-columns: 1fr 1fr; }
  .calc-field-amount { grid-column: 1 / -1; }
  .calc-cards { grid-template-columns: 1fr; }
  .calc-form input[type="number"], .calc-form select { font-size: 16px; }
}
@media (max-width: 460px) {
  .calc-grid, .calc-headline { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- CV check (scorecard) */
.cv-drop {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg)); color: var(--text-soft); font-size: .86rem;
}
.cv-drop:hover, .cv-drop.is-over { border-color: var(--accent); color: var(--accent); }
.cv-drop.is-busy { opacity: .7; pointer-events: none; }

.cv-result { margin-top: 18px; }
.cv-loading { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .92rem; padding: 8px 0; }
.cv-summary {
  margin: 0 0 16px; padding: 12px 14px; font-size: .95rem; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 11px;
}

.cv-overall { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.cv-gauge {
  flex: 0 0 auto; width: 116px; height: 116px; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--border) 55%, transparent) 0);
}
.cv-gauge::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.cv-gauge-in { position: relative; text-align: center; }
.cv-gauge-num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--text); }
.cv-gauge-band { font-size: .72rem; font-weight: 600; color: var(--text-soft); }
.cv-overall-t { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.cv-stats { margin-top: 4px; font-size: .84rem; }

.cv-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-bottom: 20px; }
.cv-cat-head { display: flex; justify-content: space-between; font-size: .84rem; font-weight: 600; margin-bottom: 5px; }
.cv-cat-val { color: var(--text-soft); }
.cv-bar { height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--border) 55%, transparent); }
.cv-bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }

.cv-keywords { margin-bottom: 20px; }
.cv-kw-head { display: flex; align-items: center; justify-content: space-between; font-size: .92rem; font-weight: 700; margin-bottom: 10px; }
.cv-kw-pct { font-weight: 800; }
.cv-kw-grp { margin-bottom: 10px; }
.cv-kw-grp .fe-label { margin-bottom: 6px; }
.fe-chip.cv-kw-hit { cursor: default; color: #2e7d57; background: color-mix(in srgb, #2e9e6b 12%, var(--surface)); border-color: color-mix(in srgb, #2e9e6b 30%, var(--border)); }
.fe-chip.cv-kw-miss { cursor: default; color: #a8443f; background: color-mix(in srgb, #b04a4a 10%, var(--surface)); border-color: color-mix(in srgb, #b04a4a 28%, var(--border)); }

.cv-block { margin-bottom: 20px; }
.cv-h { margin: 0 0 10px; font-size: 1rem; }
.cv-rewrite { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); }
.cv-rw-row { display: flex; gap: 9px; font-size: .9rem; line-height: 1.5; align-items: baseline; flex-wrap: wrap; }
.cv-rw-before { color: var(--text-soft); margin-bottom: 6px; }
.cv-rw-tag { flex: 0 0 auto; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; }
.cv-rw-before .cv-rw-tag { background: color-mix(in srgb, var(--border) 50%, transparent); color: var(--text-soft); }
.cv-rw-after .cv-rw-tag { background: color-mix(in srgb, #2e9e6b 16%, transparent); color: #2e7d57; }
.cv-rw-after .cv-copy { margin-left: auto; }

.cv-issue { border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; background: var(--bg); overflow: hidden; }
.cv-issue > summary { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; font-size: .9rem; font-weight: 600; list-style: none; }
.cv-issue > summary::-webkit-details-marker { display: none; }
.cv-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.cv-sev-high .cv-dot { background: #b04a4a; }
.cv-sev-medium .cv-dot { background: #c98a2b; }
.cv-sev-low .cv-dot { background: #6b9bd1; }
.cv-issue-sev { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--text-soft); }
.cv-issue-body { padding: 0 14px 13px; font-size: .9rem; line-height: 1.55; }
.cv-quote { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--border); color: var(--text-soft); font-style: italic; }
.cv-fix { margin: 0 0 6px; }
.cv-why { margin: 0; font-size: .84rem; }

.cv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 540px) { .cv-cats { grid-template-columns: 1fr; } .cv-overall { gap: 14px; } }

/* ===================== account-first home hero ===================== */
.hero-lead { font-size: 1.06rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-topic-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 20px; }
.hero-topic-chip {
  font-size: .82rem; font-weight: 700; padding: 5px 13px; border-radius: 99px;
  color: var(--hc, var(--accent));
  background: color-mix(in srgb, var(--hc, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc, var(--accent)) 28%, transparent);
}
a.hero-topic-chip {
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .12s;
}
a.hero-topic-chip:hover {
  background: color-mix(in srgb, var(--hc, var(--accent)) 22%, transparent);
  border-color: color-mix(in srgb, var(--hc, var(--accent)) 55%, transparent);
  transform: translateY(-1px);
}
.hero-home-h1 { text-wrap: balance; }
.hero-topic-chip.hc-museum { --hc: var(--c-museum); }
.hero-topic-chip.hc-music { --hc: var(--c-music); }
.hero-topic-chip.hc-noedu { --hc: var(--c-noedu); }
.hero-topic-chip.hc-restaurant { --hc: var(--c-restaurant); }
.hero-topic-chip.hc-startup { --hc: var(--c-startup); }
.hero-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 4px 0 14px; }
.btn-hero { padding: 12px 24px; font-size: 1rem; }
.btn-ghost {
  display: inline-flex; align-items: center; font-weight: 700; font-size: .95rem;
  color: var(--accent); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 11px 22px;
}
.btn-ghost:hover { border-color: var(--accent); }
.hero-note { margin: 6px auto 0; font-size: .85rem; color: var(--text-soft); }
.hero-note:empty { display: none; }

/* ===================== email job-alert cards ===================== */
.alerts-card { margin-bottom: 16px; }
.alerts-head-text { display: grid; gap: 3px; }
.alerts-intro { margin: 0; font-size: .85rem; }
.alerts-master-off {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 4px;
  padding: 10px 13px; font-size: .86rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 11px;
}

.alert-grid {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.alert-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 15px; transition: border-color .15s ease, opacity .15s ease;
}
.alert-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.alert-card.is-paused { opacity: .62; }
.alert-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.alert-card-name { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.3; word-break: break-word; }
.alert-card-summary { margin: 0; font-size: .85rem; color: var(--text-soft); line-height: 1.4; }
.alert-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alert-chip {
  font-size: .76rem; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 99px; padding: 3px 10px;
}
.alert-status { font-size: .76rem; font-weight: 600; color: var(--text-soft); }
.alert-card.is-paused .alert-status { color: var(--text-soft); }
.alert-last { margin: 0; font-size: .8rem; color: var(--text-soft); }
.alert-history { font-size: .8rem; }
.alert-history summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.alert-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.alert-history li { display: grid; gap: 1px; color: var(--text-soft); line-height: 1.35; }
.alert-hist-date { font-weight: 600; color: var(--text); }
.alert-hist-titles { font-size: .76rem; }
.alert-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.alert-del { color: var(--text-soft); }
.alert-del:hover { color: #b4503f; }
.alert-empty {
  grid-column: 1 / -1; text-align: center; padding: 22px 16px;
  border: 1px dashed var(--border); border-radius: 12px;
}
.alert-empty-t { margin: 0 0 4px; font-weight: 700; }

/* alert editor modal */
.alert-modal-card { max-width: 480px; }
.alert-field { display: grid; gap: 5px; margin-top: 12px; font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.alert-field input, .alert-field select {
  font: inherit; font-size: .92rem; font-weight: 400; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
}
.alert-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alert-freq { display: grid; gap: 7px; }
.alert-freq label {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: .9rem; font-weight: 400; color: var(--text);
  padding: 9px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
}
.alert-freq input { accent-color: var(--accent); flex: none; }
.alert-freq label:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.alert-active-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: .9rem; cursor: pointer; }
.alert-active-row input { accent-color: var(--accent); }
.alert-modal-actions { justify-content: space-between; }

/* on/off toggle switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; border-radius: 99px; cursor: pointer;
  background: color-mix(in srgb, var(--text-soft) 42%, transparent); transition: background .15s ease;
}
.switch-slider::before {
  content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===================== simplified dashboard + account ===================== */
.dash-likes-grid { margin-top: 6px; }
.dash-sub-h { margin: 0 0 6px; font-size: .98rem; }
.account-grid { display: grid; gap: 16px; max-width: 640px; }
.account-identity { font-weight: 700; margin: 0 0 4px; }
.account-logout-card { display: flex; }
.lang-switch-lg .lang-btn { padding: 6px 15px; font-size: .9rem; }

/* ---------- profile library (CVs / letters / contacts) ---------- */
.profile-wrap { padding: 4px 0 50px; }
.profile-bubbles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 4px 0 26px;
}
.profile-bubble {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 16px 18px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.profile-bubble:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.profile-bubble.is-active {
  border-color: var(--bubble);
  box-shadow: var(--shadow-hover), inset 0 0 0 1px var(--bubble);
}
.profile-bubble-circle {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%; margin-bottom: 4px;
  color: var(--bubble);
  background: color-mix(in srgb, var(--bubble) 14%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--bubble) 35%, transparent);
}
.profile-bubble.is-active .profile-bubble-circle {
  background: color-mix(in srgb, var(--bubble) 22%, var(--surface));
}
.profile-bubble-badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--bubble); color: #fff; font-size: .72rem; font-weight: 700;
  border: 2px solid var(--surface);
}
.profile-bubble-label { font-weight: 700; font-size: .98rem; color: var(--text); }
.profile-bubble-sub { font-size: .78rem; color: var(--text-soft); line-height: 1.3; max-width: 22ch; }

.profile-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow);
}
.profile-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.profile-panel-head h2 { margin: 0; font-size: 1.1rem; }
.profile-add-btn { padding: 8px 16px; font-size: .85rem; }
.profile-empty { padding: 18px 2px; }

.profile-list { display: grid; gap: 10px; }
.profile-entry {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.profile-entry-main { display: grid; gap: 3px; min-width: 0; }
.profile-entry-title { font-size: .95rem; }
.profile-entry-mail { color: var(--accent); text-decoration: none; font-size: .85rem; font-weight: 600; }
.profile-entry-mail:hover { text-decoration: underline; }
.profile-entry-note {
  font-size: .84rem; color: var(--text-soft); white-space: pre-wrap;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.profile-entry-meta { font-size: .74rem; color: var(--text-soft); }
.profile-entry-actions { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

.profile-form {
  display: grid; gap: 10px; margin-bottom: 18px; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.profile-form-h { margin: 0 0 2px; font-size: .95rem; }
.profile-input {
  width: 100%; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
}
.profile-input:focus { outline: none; border-color: var(--accent); }
.profile-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.profile-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.profile-form-actions .btn-primary { padding: 8px 18px; }

@media (max-width: 680px) {
  .profile-bubbles { grid-template-columns: 1fr; gap: 12px; }
  .profile-bubble { flex-direction: row; text-align: left; gap: 14px; padding: 14px 16px; }
  .profile-bubble-circle { width: 60px; height: 60px; margin: 0; flex: 0 0 auto; }
  .profile-bubble-circle svg { width: 26px; height: 26px; }
  .profile-bubble-sub { max-width: none; }
  .profile-entry { flex-direction: column; }
  .profile-entry-actions { justify-content: flex-start; }
}

/* ---------- document library: drag-drop + preview cards ---------- */
.doc-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; padding: 26px 18px; margin-bottom: 18px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--text); transition: background .15s, border-color .15s;
}
.doc-drop:hover, .doc-drop:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); outline: none; }
.doc-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); transform: scale(1.005); }
.doc-drop.is-busy { opacity: .65; pointer-events: none; }
.doc-drop-icon { color: var(--accent); margin-bottom: 2px; }
.doc-drop-t { margin: 0; font-weight: 600; font-size: .95rem; }
.doc-drop-hint { margin: 0; font-size: .8rem; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.doc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.doc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.doc-thumb {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 6%, #eef0e9);
  border-bottom: 1px solid var(--border); aspect-ratio: 5 / 6; overflow: hidden;
}
div.doc-thumb { cursor: default; }
div.doc-thumb[data-doc-view] { cursor: pointer; }
.doc-thumb-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; position: relative;
}
.doc-thumb-canvas { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* CORS-free PDF preview: the browser renders the file natively inside the card. */
.doc-thumb-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; pointer-events: none; }
.doc-thumb-text {
  display: block; width: 100%; height: 100%; padding: 14px 14px 0; overflow: hidden;
  font-size: .66rem; line-height: 1.5; color: var(--text-soft); text-align: left;
  background: var(--surface);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.doc-thumb-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: var(--c-music);
}
.doc-thumb-icon.doc-ext-pdf { background: #b4524a; }
.doc-thumb-icon.doc-ext-doc, .doc-thumb-icon.doc-ext-docx { background: #3d6098; }
.doc-card-body { display: grid; gap: 4px; padding: 12px 14px; }
.doc-name {
  font-size: .9rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-meta { font-size: .74rem; color: var(--text-soft); }
.doc-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.doc-card-actions a.ai-btn-sm { text-decoration: none; }

/* version badge + dropdown, overlaid on the bottom-right of a doc preview */
.doc-thumb-wrap { position: relative; }
.doc-ver { position: absolute; bottom: 8px; right: 8px; z-index: 2; }
.doc-ver-badge {
  padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 0; box-shadow: var(--shadow);
  font-family: inherit; line-height: 1.2;
}
.doc-ver-badge:hover { filter: brightness(1.05); }
.doc-ver-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 3; margin: 0; padding: 4px;
  list-style: none; min-width: 168px; max-height: 240px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-hover);
}
.doc-ver-menu[hidden] { display: none; }
.doc-ver-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font-family: inherit; font-size: .8rem; color: var(--text); text-align: left;
}
.doc-ver-item:hover { background: var(--surface); }
.doc-ver-item.is-current .doc-ver-name { color: var(--accent); font-weight: 700; }
.doc-ver-date { font-size: .72rem; white-space: nowrap; }

/* document viewer modal */
.docview-card {
  width: min(960px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.docview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.docview-title { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docview-head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.docview-head-actions .ai-btn-sm { text-decoration: none; }
.docview-head .modal-x { position: static; }
.docview-body {
  overflow: auto; padding: 20px; background: #e9ebe4; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.docview-page {
  width: auto; max-width: 100%; height: auto; box-shadow: var(--shadow); border-radius: 4px; background: #fff;
}
.docview-docx {
  width: 100%; max-width: 760px; background: #fff; color: #222; border-radius: 6px;
  box-shadow: var(--shadow); padding: 40px 48px; line-height: 1.6; font-size: .95rem;
}
.docview-docx :is(h1, h2, h3) { line-height: 1.25; }
.docview-docx img { max-width: 100%; height: auto; }
.docview-docx table { border-collapse: collapse; width: 100%; }
.docview-docx td, .docview-docx th { border: 1px solid #ddd; padding: 6px 8px; }
.docview-loading, .docview-nopreview { margin: 40px auto; }
/* full PDF viewer: native browser render of the download URL (no CORS needed) */
.docview-frame { width: 100%; flex: 1 1 auto; min-height: min(80vh, 760px); border: 0; border-radius: 4px; background: #fff; box-shadow: var(--shadow); }

@media (max-width: 680px) {
  .doc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .docview-docx { padding: 22px 18px; }
  .docview-body { padding: 12px; }
}

/* ============================================================
   Letter designer (/letter-designer) — free in-browser A4 editor.
   On screen: an editable "paper" page. On print: only the page,
   so the browser's "Save as PDF" yields a clean Bewerbungsschreiben.
   ============================================================ */
.ld-section { padding: 26px 0 60px; }
.ld-wrap { display: flex; flex-direction: column; gap: 14px; }
.ld-intro, .ld-tip { margin: 0; text-align: center; }

.ld-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  position: sticky; top: 64px; z-index: 5;
}
.ld-tpls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ld-tools-label { font-size: .8rem; color: var(--text-soft); margin-right: 2px; }
.ld-actions { display: flex; align-items: center; gap: 8px; }
.ld-tplbtn {
  padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--text-soft); font-size: .82rem; font-weight: 500; cursor: pointer;
}
.ld-tplbtn:hover { border-color: var(--accent); color: var(--accent); }
.ld-tplbtn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* saved-letters gallery: load chip + small delete, plus a live save-status pill */
.ld-toolrows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ld-mine { row-gap: 6px; }
.ld-mine-empty { font-size: .8rem; }
.ld-mine-new { border-style: dashed; }
.ld-minechip { display: inline-flex; align-items: center; gap: 3px; }
.ld-mine-x {
  width: 18px; height: 18px; padding: 0; line-height: 1; border: 1px solid var(--border);
  border-radius: 50%; background: transparent; color: var(--text-soft); font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ld-mine-x:hover { color: #b3423a; border-color: #b3423a; }
.ld-savestatus { font-size: .8rem; color: var(--text-soft); white-space: nowrap; }

/* the "canvas": a light tray that frames the white A4 page */
.ld-print-area {
  display: flex; justify-content: center; padding: 22px 10px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--radius); overflow-x: auto;
}
.ld-page {
  width: 210mm; min-height: 297mm; padding: 24mm 22mm; box-sizing: border-box;
  background: #fff; color: #232323; box-shadow: 0 6px 26px rgba(44,50,44,.18);
  font-family: var(--font); font-size: 11.2pt; line-height: 1.5;
}

/* editable fields: a hint on hover/focus, never printed */
.ld-page [contenteditable] { border-radius: 3px; transition: background .12s ease; }
.ld-page [contenteditable]:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ld-page [contenteditable]:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; background: transparent; }
.ld-page [data-ph]:empty::before { content: attr(data-ph); color: #b3b3b3; }

.ld-letterhead { margin-bottom: 16mm; position: relative; }
.ld-letterhead.has-photo { padding-right: 38mm; }
.ld-name { font-size: 17pt; font-weight: 700; line-height: 1.2; }
.ld-sender { margin-top: 3mm; color: #5a5a5a; font-size: 9.6pt; }
.ld-sline { min-height: 1.4em; }
.ld-recipient { margin-bottom: 12mm; }
.ld-rline { min-height: 1.45em; }
.ld-rco { font-weight: 600; color: #232323; }
.ld-placedate { text-align: right; color: #5a5a5a; margin-bottom: 9mm; }
.ld-subject { font-weight: 700; margin-bottom: 7mm; }
.ld-body p { margin: 0 0 3.4mm; }
.ld-body { min-height: 60mm; }

/* photo slot — shared by both designers. The <img> is real content and prints;
   the add/remove controls (.*-ui) don't. In the letter it sits absolutely
   top-right; in the CV it is a real flex/grid item so it can never overlap. */
.ld-photo-wrap { position: absolute; top: 0; right: 0; }
.cvd-photo-wrap { position: relative; flex: 0 0 auto; }
.ld-photo, .cvd-photo {
  display: block; width: 30mm; height: 38mm; object-fit: cover;
  border-radius: 2mm; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); cursor: pointer;
}
.ld-photo-add, .cvd-photo-add {
  width: 30mm; height: 38mm; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4px; font-size: .72rem; line-height: 1.25; cursor: pointer;
  color: #8a8a8a; background: #fafafa; border: 1px dashed #c4c4c4; border-radius: 2mm;
}
.ld-photo-add:hover, .cvd-photo-add:hover { color: var(--accent); border-color: var(--accent); }
.ld-photo-del, .cvd-photo-del {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0; line-height: 1;
  border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #999;
  font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.ld-photo-del:hover, .cvd-photo-del:hover { color: #b3423a; border-color: #b3423a; }

/* template: Modern — accent name + rule, sender to the right */
.ld-tpl-modern .ld-letterhead {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12mm;
  border-bottom: 2px solid var(--accent); padding-bottom: 5mm;
}
.ld-tpl-modern .ld-name { color: var(--accent); }
.ld-tpl-modern .ld-sender { margin-top: 0; text-align: right; }
.ld-tpl-modern .ld-subject { color: var(--accent); }

/* template: Minimal — lighter, roomier, no accent */
.ld-tpl-minimal .ld-name { font-weight: 600; font-size: 15pt; letter-spacing: .02em; }
.ld-tpl-minimal .ld-subject { font-weight: 600; }
.ld-tpl-minimal .ld-letterhead { margin-bottom: 20mm; }

@media screen and (max-width: 860px) {
  .ld-page { zoom: .62; }
  .ld-toolbar { top: 56px; }
}
@media screen and (max-width: 560px) {
  .ld-page { zoom: .44; }
}

@media print {
  @page { size: A4; margin: 0; }
  .site-header, .site-footer, #toast, .ld-toolbar, .ld-intro, .ld-tip,
  #view-letterdesign .hero, #view-cvdesign .hero,
  .cvg-wrap, .cvd-title, .cvd-ui, .ld-ui { display: none !important; }
  body { background: #fff; margin: 0; }
  main { padding: 0 !important; margin: 0 !important; }
  .ld-section, .ld-section .container, .ld-wrap,
  .cvd-section, .cvd-section .container { padding: 0 !important; margin: 0 !important; max-width: none !important; gap: 0 !important; }
  .ld-print-area { padding: 0 !important; background: #fff !important; border-radius: 0 !important; overflow: visible !important; }
  .ld-page { width: 210mm; min-height: 297mm; margin: 0 auto !important; box-shadow: none !important; zoom: 1 !important; }
  .ld-page [contenteditable]:hover, .ld-page [contenteditable]:focus { background: transparent !important; outline: none !important; }
  .ld-page [data-ph]:empty::before { content: '' !important; }
  .ld-page [data-f]:empty { display: none !important; }
}

/* ------------- in-site CV designer (shares the letter designer chrome) ------------- */
.cvd-section { padding: 8px 0 48px; }
.cvd-title { margin: 0; font-size: 1.2rem; }
.cvd-head { margin-bottom: 8mm; display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; }
.cvd-headtext { flex: 1 1 auto; min-width: 0; }
.cvd-name { font-size: 17pt; font-weight: 800; line-height: 1.25; }
.cvd-role { font-size: 11pt; color: #4a4a4a; margin-top: 1mm; }
.cvd-contact { font-size: 9.5pt; color: #666; margin-top: 1.5mm; }
.cvd-label {
  font-size: 9pt; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #555; margin: 6mm 0 1.5mm; border-bottom: 1px solid #ddd; padding-bottom: 1mm;
}
.cvd-text { font-size: 10.5pt; }
.cvd-entry { position: relative; margin: 0 0 3mm; }
.cvd-eh { display: flex; justify-content: space-between; gap: 6mm; align-items: baseline; }
.cvd-h { flex: 1 1 auto; font-weight: 600; }
.cvd-d { flex: 0 0 auto; color: #666; font-size: 9.5pt; white-space: nowrap; margin-right: 7mm; }
.cvd-bullets { margin: 1mm 0 0; padding-left: 5mm; }
.cvd-bullets li { margin: 0 0 .5mm; }
.cvd-bullets li[data-ph]:empty::before { content: attr(data-ph); color: #b3b3b3; }

/* screen-only editing chrome */
.cvd-add {
  margin: 0 0 2mm; padding: 3px 10px; font-size: .78rem; cursor: pointer;
  color: #777; background: transparent; border: 1px dashed #bbb; border-radius: 99px;
}
.cvd-add:hover { color: var(--accent); border-color: var(--accent); }
.cvd-del {
  position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0; line-height: 1;
  border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #999;
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cvd-del:hover { color: #b3423a; border-color: #b3423a; }

/* "My CVs" chips in the toolbar: switch button + small delete. Each chip is one
   auto-saved CV; the active one wears .is-active (accent, via .ld-tplbtn). */
.cvd-minechip { display: inline-flex; align-items: center; gap: 3px; }
.cvd-docbtn { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvd-newbtn { border-style: dashed; }
.cvd-mine-x {
  width: 18px; height: 18px; padding: 0; line-height: 1; border: 1px solid var(--border);
  border-radius: 50%; background: transparent; color: var(--text-soft); font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.cvd-mine-x:hover { color: #b3423a; border-color: #b3423a; }

/* auto-save status text in the toolbar actions (screen-only via .ld-toolbar) */
.cvd-status { font-size: .8rem; color: var(--text-soft); white-space: nowrap; }

/* per-section reorder controls — screen-only, and revealed only when the section
   is hovered/focused so the CV itself stays clean and professional. The section's
   top margin collapses above it, so the label sits at the section's top edge and
   the bar lands neatly on the heading. */
.cvd-sec { position: relative; }
.cvd-secbar {
  position: absolute; top: -1px; right: 0; display: inline-flex; gap: 3px;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.cvd-sec:hover .cvd-secbar, .cvd-secbar:focus-within { opacity: 1; pointer-events: auto; }
@media (hover: none) { .cvd-secbar { opacity: .5; pointer-events: auto; } }
.cvd-secbtn {
  width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #333; background: rgba(255, 255, 255, .94); border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.cvd-secbtn:hover { color: var(--accent); border-color: var(--accent); }

/* colour theming — JS sets these per page from the chosen accent (see cv-designer.js).
   --cvd-accent = the theme colour · --cvd-on-accent = readable text on it ·
   --cvd-mark = an always-dark-enough version for rules/labels on the white page. */
.cvd-page { --cvd-accent: #2c3e50; --cvd-on-accent: #ffffff; --cvd-mark: #2c3e50; }

/* colour picker (toolbar row 3) */
.cvd-swatch {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.cvd-swatch.is-active { box-shadow: 0 0 0 2px var(--accent); }
.cvd-swatch-custom {
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(from .25turn, #e5484d, #f2a93b, #f5d90a, #46a758, #12a594, #0090ff, #8e4ec6, #e5484d);
}
.cvd-swatch-custom input { width: 130%; height: 130%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cvd-color-reset { font-size: .78rem; }

/* linear style variants — subtle accent on the marks; text stays dark + ATS-safe */
.cvd-tpl-classic .cvd-name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.cvd-tpl-classic .cvd-label { border-bottom: 1px solid var(--cvd-mark); color: var(--cvd-mark); }
.cvd-tpl-classic .cvd-photo { border-radius: 1.5mm; }
.cvd-tpl-modern .cvd-label { border-bottom: none; padding-left: 2.5mm; border-left: 3px solid var(--cvd-mark); color: var(--cvd-mark); }
.cvd-tpl-minimal .cvd-label { border-bottom: none; letter-spacing: .14em; color: color-mix(in srgb, var(--cvd-mark) 55%, #8a8a8a); }
.cvd-tpl-minimal .cvd-name { font-weight: 600; }

/* ---- two-column style variants (Elegant / Navy / Rosé) ----
   The sidebar is a real page-edge column filled with --cvd-accent, so the page
   loses its own padding; print-color-adjust keeps the colour in the exported PDF
   even when the browser's "background graphics" box is unticked. The page picks
   up a whisper of the accent so the two columns read as one design. */
.cvd-page.cvd-split {
  display: grid; grid-template-columns: 62mm 1fr; padding: 0;
  background: color-mix(in srgb, var(--cvd-accent) 5%, #fff);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.cvd-split .cvd-side {
  background: var(--cvd-accent); color: var(--cvd-on-accent);
  padding: 15mm 8mm 16mm 9mm; min-width: 0;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.cvd-split .cvd-main { padding: 15mm 11mm 16mm 10mm; min-width: 0; }
.cvd-split .cvd-side .cvd-photo-wrap { width: fit-content; margin: 0 auto 7mm; }
.cvd-split .cvd-side .cvd-text, .cvd-split .cvd-side .cvd-h { font-size: 9.6pt; color: var(--cvd-on-accent); }
.cvd-split .cvd-side .cvd-label { color: var(--cvd-on-accent); border-bottom: none; }
.cvd-split .cvd-side .cvd-eh { flex-wrap: wrap; gap: 0 3mm; }
.cvd-split .cvd-side .cvd-d { white-space: normal; margin-right: 6mm; color: color-mix(in srgb, var(--cvd-on-accent) 72%, transparent); }
.cvd-split .cvd-side [data-ph]:empty::before { color: color-mix(in srgb, var(--cvd-on-accent) 55%, transparent); }
.cvd-split .cvd-side .cvd-add { color: color-mix(in srgb, var(--cvd-on-accent) 80%, transparent); border-color: color-mix(in srgb, var(--cvd-on-accent) 45%, transparent); }
.cvd-split .cvd-name { font-size: 22pt; line-height: 1.15; color: #232323; }
.cvd-split .cvd-main .cvd-label { color: var(--cvd-mark); border-bottom: 1px solid color-mix(in srgb, var(--cvd-mark) 32%, transparent); }
.cvd-split .cvd-photo-add { width: 34mm; height: 34mm; border-radius: 50%; }

/* Elegant — photo squared top-left, airy letter-spaced labels (default: light sand) */
.cvd-tpl-elegant .cvd-photo { width: 42mm; height: 52mm; border-radius: 0; filter: grayscale(1); box-shadow: none; }
.cvd-tpl-elegant .cvd-photo-add { width: 42mm; height: 52mm; border-radius: 0; }
.cvd-tpl-elegant .cvd-name { font-weight: 800; letter-spacing: .04em; }
.cvd-tpl-elegant .cvd-side .cvd-label { letter-spacing: .26em; }
.cvd-tpl-elegant .cvd-main .cvd-label { letter-spacing: .18em; border-bottom: none; }
.cvd-tpl-elegant .cvd-role { letter-spacing: .04em; }

/* Navy — round photo with a ring, bold main headline, underlined sidebar labels */
.cvd-tpl-navy .cvd-photo { width: 36mm; height: 36mm; border-radius: 50%; border: 1.5mm solid color-mix(in srgb, var(--cvd-on-accent) 28%, transparent); }
.cvd-tpl-navy .cvd-name { font-size: 24pt; font-weight: 800; }
.cvd-tpl-navy .cvd-side .cvd-label { border-bottom: 1px solid color-mix(in srgb, var(--cvd-on-accent) 40%, transparent); padding-bottom: 1mm; }
.cvd-tpl-navy .cvd-main .cvd-label { border-bottom-width: 1.5px; }

/* Rosé — round photo with a white ring, uppercase spaced name, italic role */
.cvd-tpl-rose .cvd-photo { width: 38mm; height: 38mm; border-radius: 50%; border: 2mm solid #fff; }
.cvd-tpl-rose .cvd-side .cvd-label { letter-spacing: .2em; }
.cvd-tpl-rose .cvd-name { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.cvd-tpl-rose .cvd-role { font-style: italic; }

/* ============================ multi-city ============================ */
/* header city switcher — sits beside the logo, so the left group is
   brand + city while nav/tools keep to the right. The panel lists every city
   grouped by country (built by renderCitySwitch() in app.js). */
.logo { margin-right: 0; }
.city-switch { position: relative; margin-right: auto; }
.city-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 10px 5px 9px; cursor: pointer;
}
.city-switch-btn:hover { border-color: var(--accent); }
.city-switch-btn[aria-expanded="true"] { border-color: var(--accent); }
.city-switch-pin { color: var(--accent); flex: none; }
.city-switch-caret { color: var(--text-soft); flex: none; transition: transform .15s ease; }
.city-switch-btn[aria-expanded="true"] .city-switch-caret { transform: rotate(180deg); }

.city-switch-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  padding: 14px; width: max-content; max-width: min(720px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-hover);
}
.city-switch-title {
  margin: 0 0 10px; font-size: .72rem; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.city-switch-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 6px 14px; }
.city-switch-group { display: flex; flex-direction: column; gap: 1px; align-items: stretch; }
.city-switch-country {
  margin: 0 0 4px; padding: 0 8px 5px; border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.city-switch-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font: inherit; font-size: .86rem; font-weight: 500; color: var(--text); text-align: left;
  background: transparent; border: none; border-radius: 9px;
  padding: 7px 8px; cursor: pointer;
}
.city-switch-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.city-switch-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 700; }
.city-switch-item-count { font-size: .72rem; color: var(--text-soft); font-weight: 500; }
.city-switch-item:hover .city-switch-item-count,
.city-switch-item.is-active .city-switch-item-count { color: inherit; opacity: .75; }

/* landing page — the city picker grid */
.landing-hero .hero-lead { max-width: 760px; }
.landing-pick { margin: 30px 0 12px; font-size: 1.08rem; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.city-card {
  display: grid; gap: 2px; align-content: start; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 16px 14px; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.city-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.city-card-name { font-size: 1.12rem; font-weight: 800; }
.city-card-country { font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
.city-card-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; min-height: 1.1em; }
.city-card-count { font-size: .84rem; color: var(--text-soft); }
.city-card-new { font-size: .74rem; font-weight: 700; color: var(--accent); }
/* Phones: the panel leaves the button and becomes a full-width sheet under the
   header, scrollable, with the countries stacked two-up. */
@media (max-width: 720px) {
  .city-switch { position: static; }
  .city-switch-btn { font-size: .78rem; padding: 4px 9px 4px 8px; }
  .city-switch-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .city-switch-panel {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; max-width: none;
    max-height: calc(100vh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 20px 18px;
    border-radius: 0; border-left: none; border-right: none; border-top: none;
  }
  .city-switch-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
  .city-switch-item { padding: 10px 8px; font-size: 1rem; }
}
@media (max-width: 380px) {
  .city-switch-grid { grid-template-columns: 1fr; }
}
.city-group-h {
  margin: 22px 0 10px; font-size: .82rem; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .07em;
}