/* ══════════════════════════════════════════════════════════════════════════
   Luna — Dashboard v2 "clean Pillio" skin
   Scoped under body.dash2. Neutral gray page, white rounded cards, black text,
   a collapsible white sidebar, subtle glassy roundness. Luna accents only
   (butter / coral / blue). No ombre, no lavender.
   ══════════════════════════════════════════════════════════════════════════ */

body.dash2 { background: #F3F4F8; }

.dash2 .shell { background: transparent; position: relative; }
/* sidebar is always expanded (Option A); main reserves its full width */
.dash2 .main { background: transparent; position: relative; z-index: 1; margin-left: 244px; }
/* solid page-gray bg so the cat video's white background blends away under multiply */
.dash2 .content { background: #F3F4F8; padding: 12px 34px 60px; position: relative; z-index: 1; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.dash2 .topbar { background: transparent; border-bottom: none; padding: 18px 34px 8px; }
/* Wayfinding chrome, not a headline: small, uppercase, low-contrast section label
   on the left so it orients and then recedes, never competing with the hero. */
.dash2 .topbar-title {
  display: block; font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #8A90A0;
}
/* Persistent, global "what am I targeting" chip, right side before the avatar. */
.dash2 .topbar-target {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: #5F6472;
  background: #EEF1F6; border: 1px solid #E3E7EF; border-radius: 999px; padding: 5px 13px;
}
.dash2 .topbar-target i { font-size: 13px; color: #1D7FD6; }
@media (max-width: 640px) { .dash2 .topbar-target { display: none !important; } }
.dash2 .v2-compare-link {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 4px;
  font-size: 12.5px; font-weight: 600; color: #5D5B66; text-decoration: none;
  background: #fff; border: 1px solid #E7E8EF; padding: 8px 15px; border-radius: 999px;
  transition: background .15s ease, transform .15s ease;
}
.dash2 .v2-compare-link:hover { background: #F6F7FA; transform: translateY(-1px); }
.dash2 .icon-btn { background: #fff; border: 1px solid #E7E8EF; }

/* ── Collapsible white sidebar (Pillio) ─────────────────────────────────── */
.dash2 .sidebar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 244px; z-index: 40;
  background: #fff; border-right: 1px solid #ECEDF2;
  padding: 20px 0 16px; align-items: stretch; overflow-y: auto; overflow-x: hidden;
}
.dash2 .sb-top { align-items: flex-start; padding: 0 22px; width: 100%; }
.dash2 .sb-brand { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 26px; }
/* One logo, two states: expanded shows the "luna" wordmark only (below); the cat
   mark shows only when the rail is collapsed. The cat art is portrait, so keep
   its aspect ratio (auto width, object-fit contain) instead of squashing it. */
.dash2 .sb-logo { display: none; width: auto; height: 30px; border-radius: 0; object-fit: contain; }
.dash2 .sb-appname {
  font-size: 26px; font-weight: 800; color: #14141C; text-transform: none; letter-spacing: -0.03em;
  white-space: nowrap; opacity: 1;
}
/* collapse toggle */
.dash2 .sb-collapse {
  margin-left: auto; border: none; background: none; cursor: pointer; color: #9AA0AE;
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s; flex-shrink: 0;
}
.dash2 .sb-collapse i { font-size: 19px; }
.dash2 .sb-collapse:hover { background: #F5F6FA; color: #14141C; }

/* ── Collapsed sidebar (icon rail) ─────────────────────────────────────────── */
.dash2.sb-collapsed .sidebar { width: 84px; }
.dash2.sb-collapsed .main { margin-left: 84px; }
.dash2.sb-collapsed .sb-top { padding: 0 10px; }
.dash2.sb-collapsed .sb-logo { display: block; width: auto; height: 30px; margin: 0 auto; }
.dash2.sb-collapsed .sb-appname { display: none; }
/* stack logo + toggle vertically so the expand button is always visible & centered */
.dash2.sb-collapsed .sb-brand { flex-direction: column; align-items: center; gap: 10px; }
.dash2.sb-collapsed .nav-item span,
.dash2.sb-collapsed .nav-caret { display: none; }
.dash2.sb-collapsed .nav-item { justify-content: center; padding: 11px 0; }
.dash2.sb-collapsed .nav-flyout { display: none; } /* accordions hidden when collapsed */
.dash2.sb-collapsed .sb-collapse { margin: 0 auto; background: #F5F6FA; }
.dash2 .sb-user { display: none; }

/* HubSpot-style hover flyout beside the icon rail */
.hs-flyout {
  position: fixed; z-index: 2000; min-width: 224px; max-width: 264px;
  background: #fff; border: 1px solid #E7E9F0; border-radius: 14px;
  box-shadow: 0 20px 48px rgba(20,20,40,.17); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.hs-flyout::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 14px; } /* hover bridge */
.hs-flyout.open { opacity: 1; visibility: visible; transform: none; }
.hs-flyout-h {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; color: #14141C;
  letter-spacing: -.01em; padding: 9px 12px; border-radius: 9px; margin-bottom: 2px;
}
.hs-flyout-h:hover { background: #F5F6FA; }
.hs-flyout .nav-sub { padding: 9px 12px; font-size: 13px; color: #3C414C; margin-top: 1px; }
.hs-flyout .nav-sub i { color: #9AA0AE; }
.hs-flyout .nav-sub:hover { background: #F5F6FA; color: #14141C; }
.hs-flyout .nav-sub:hover i { color: #1D7FD6; }

.dash2 .nav-section { padding: 0 14px; align-items: stretch; gap: 4px; flex: 1; }
.dash2 .nav-label { display: none; }
.dash2 .nav-item {
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px;
  width: 100%; padding: 11px 13px; border-radius: 13px;
  color: #6C6B78; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-align: left;
}
.dash2 .nav-item i { font-size: 22px; opacity: 0.9; width: 24px; flex-shrink: 0; text-align: center; }
.dash2 .nav-item span { opacity: 1; }
.dash2 .nav-item:hover { background: #F5F6FA; color: #14141C; }
.dash2 .nav-item.active { background: #EEF0F6; color: #14141C; font-weight: 700; }
.dash2 .nav-item.active i { color: #1D7FD6; opacity: 1; }

/* Settings + Log out pinned to the bottom */
.dash2 .sb-foot {
  margin-top: auto; padding: 12px 14px 0; border-top: 1px solid #F0F1F5;
  display: flex; flex-direction: column; gap: 4px;
}
.dash2 .nav-logout:hover { background: #FFF0EC; color: #C0442A; }
.dash2 .nav-logout:hover i { color: #C0442A; }
.dash2 #auth-btn-container { display: none !important; }

/* ── Primary buttons: outlined with a soft translucent blue fill ─────────── */
.dash2 .btn-primary {
  background: rgba(47, 151, 239, 0.12);
  color: var(--brand-text, #12507E);
  border: 1.5px solid var(--brand, #2F97EF);
  box-shadow: none;
  font-weight: 600;
}
.dash2 .btn-primary i { color: inherit; }
.dash2 .btn-primary:hover {
  background: rgba(47, 151, 239, 0.20);
  border-color: var(--brand, #2F97EF);
  color: var(--brand-text, #12507E);
  box-shadow: none;
  transform: translateY(-1px);
}
.dash2 .btn-primary:active { transform: translateY(0); }
.dash2 .btn-primary:disabled { opacity: .6; }

/* ── Shared surface — clean white cards ─────────────────────────────────── */
.dash2 .card,
.dash2 .dash-section {
  background: #fff;
  border: 1px solid #ECEDF2;
  box-shadow: 0 6px 22px rgba(30,30,50,0.05);
  border-radius: 22px;
}
.dash2 .dash-section:hover { box-shadow: 0 10px 28px rgba(30,30,50,0.07); }

/* ── Greeting box FIRST; luna video peeks up from BEHIND the top edge ────── */
.dash2 .v2-greet-wrap { position: relative; margin-top: 12px; }
.dash2 .greet-cat { display: none; }
.dash2 .greet-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #ECEDF2;
  box-shadow: 0 6px 22px rgba(30,30,50,0.05); border-radius: 22px;
  margin-top: 0;
}
.dash2 .greet-hi { font-family: 'Inter Tight', sans-serif; font-size: 26px; color: #14141C; }
.dash2 .greet-sub { color: #6C6B78; }
.dash2 .greet-pill { background: #EFF6FE; border-color: #D6EAFF; color: #1D7FD6; }
.dash2 .greet-date { color: #9AA0AA; }

/* ── "Complete your setup" — clean card below the greeting ──────────────── */
.dash2 .v2-setup { position: relative; margin: 14px 0 20px; padding: 16px 20px; }
.dash2 .v2-setup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash2 .setup-peek-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 14px; color: #14141C; display: inline-flex; align-items: center; gap: 8px; }
.dash2 .setup-progress-fill { background: linear-gradient(90deg, #5BB8FF, #1D7FD6); }
.dash2 .setup-peek-close {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer; background: #F1F2F6; color: #8A8A94;
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
}
.dash2 .setup-peek-close:hover { background: #E7E8EE; color: #14141C; }

/* ── Stat tiles (clean white, Luna accents) ─────────────────────────────── */
.dash2 .pipeline-bar { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash2 #pipeline-bar-wrap { display: grid !important; }
.dash2 #pipeline-zero-state { display: none !important; }
.dash2 .stat-chip {
  flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px;
  background: #fff; border: 1px solid #ECEDF2; border-left: 1px solid #ECEDF2;
  box-shadow: 0 6px 22px rgba(30,30,50,0.05); border-radius: 20px;
}
.dash2 .stat-chip:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(30,30,50,0.08); }
.dash2 .stat-chip-icon { width: 46px; height: 46px; border-radius: 14px; }
.dash2 .stat-chip.stat-applied .stat-chip-icon { background: #EFF6FE; color: #1D7FD6; }
.dash2 .stat-chip.stat-interview .stat-chip-icon { background: #FFEEEA; color: #E0602F; }
.dash2 .stat-chip.stat-offers .stat-chip-icon { background: #FFF3CF; color: #B07D1E; }
.dash2 .pipeline-bar-num { font-size: 30px; color: #14141C; }
.dash2 .pipeline-bar-num.pipeline-applied,
.dash2 .pipeline-bar-num.pipeline-interview,
.dash2 .pipeline-bar-num.pipeline-offers { color: #14141C; }
.dash2 .pipeline-bar-lbl { font-size: 12.5px; color: #7A7A85; }

/* ── Section titles / facet chips ───────────────────────────────────────── */
.dash2 .dash-section-title { font-family: 'Inter Tight', sans-serif; color: #14141C; }
.dash2 .facet-chip { background: #F5F6FA; border: 1px solid #ECEDF2; color: #5D5B66; }
.dash2 .facet-chip i { color: #1D7FD6; }

/* ── Role-match cards (clean; keep the dark ring tile) ──────────────────── */
.dash2 .match-card { background: #fff; border: 1px solid #ECEDF2; border-radius: 20px; box-shadow: 0 6px 22px rgba(30,30,50,0.05); }
.dash2 .match-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30,30,50,0.09); border-color: #DfE3EC; }
.dash2 .match-card.best, .dash2 .match-card.chosen-role { background: #fff; border-color: #CFE0F5; }

/* Show only the primary match by default; the expander reveals the rest */
.dash2 #matches-card .match-card:not(:first-child) { display: none; }
.dash2 #matches-card.v2-show-all .match-card { display: flex; }
.dash2 .v2-more-matches {
  align-self: flex-start; margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #F5F6FA; border: 1px solid #ECEDF2; border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; color: #1D7FD6; cursor: pointer; font-family: 'Inter Tight', sans-serif;
  transition: background .15s ease;
}
.dash2 .v2-more-matches:hover { background: #EDEFF4; }
.dash2 .v2-more-matches i { transition: transform .2s ease; }
.dash2 .v2-more-matches.open i { transform: rotate(180deg); }

/* ── "Jump back in" quick actions (fills the space under What's next) ────── */
.dash2 .v2-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.dash2 .v2-qa {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border-radius: 14px; border: 1px solid #ECEDF2; background: #FBFBFD;
  cursor: pointer; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; color: #14141C;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dash2 .v2-qa:hover { background: #fff; border-color: #DfE3EC; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,30,50,0.06); }
.dash2 .v2-qa-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px; }
.dash2 .v2-qa-ic.ic-blue { background: #EFF6FE; color: #1D7FD6; }
.dash2 .v2-qa-ic.ic-coral { background: #FFEEEA; color: #E0602F; }
.dash2 .v2-qa-ic.ic-butter { background: #FFF3CF; color: #B07D1E; }
.dash2 .v2-qa-label { line-height: 1.25; }

/* ── Right-rail focus items ─────────────────────────────────────────────── */
.dash2 .focus-item { color: #2A2740; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .dash2 .pipeline-bar { grid-template-columns: repeat(3, 1fr); }
}
/* ── Phones: the sidebar becomes an off-canvas drawer ─────────────────────
   This breakpoint used to keep the sidebar on screen and merely narrow it to
   208px, while .main kept margin-left:208px. On a 375px phone that left about
   167px of usable content, so the dashboard was effectively unusable. The nav
   now slides over the content instead of stealing width from it. */
@media (max-width: 760px) {
  .dash2 .sidebar,
  .dash2.sb-collapsed .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 272px; max-width: 84vw;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 28px rgba(20, 20, 40, 0.16);
  }
  /* body-qualified so it outranks the collapsed-rail rule above regardless of
     which other state classes are on the body */
  body.dash2.nav-open .sidebar,
  body.dash2.sb-collapsed.nav-open .sidebar { transform: translateX(0); }

  /* content takes the full width in every sidebar state */
  .dash2 .main,
  .dash2.sb-collapsed .main { margin-left: 0; }
  .dash2 .content { padding: 16px 16px 56px; }
  .dash2 .topbar { padding: 14px 16px 4px; }

  /* the drawer replaces the collapse rail, and its labels always show */
  .dash2 .sb-collapse { display: none; }
  .dash2.sb-collapsed .nav-item span,
  .dash2.sb-collapsed .sb-appname { display: inline; }
  .dash2.sb-collapsed .nav-item { justify-content: flex-start; padding: 11px 13px; }

  .dash2 .pipeline-bar { grid-template-columns: 1fr; }
  .dash2 .v2-greet-wrap { margin-top: 8px; }
}

/* Hamburger: phones only */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: #fff; border: 1px solid #E7E8EF; color: #14141C;
  align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-toggle i { font-size: 21px; }
.nav-toggle:active { transform: scale(0.94); }

/* Backdrop behind the open drawer */
.nav-backdrop { display: none; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .dash2 .topbar { display: flex; align-items: center; gap: 12px; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1150;
    background: rgba(20, 20, 40, 0.38);
    opacity: 0; pointer-events: none;
    transition: opacity 220ms ease;
  }
  .dash2.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .dash2 .sidebar, .dash2.sb-collapsed .sidebar { transition: none; }
  .nav-backdrop { transition: none; }
  .nav-toggle:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dash2 .stat-chip:hover, .dash2 .match-card:hover { transform: none; }
}

/* ═══════════ Sidebar accordions (Option A) + top tabs + highlight rewrite ═══════════ */
.dash2 .nav-group{position:relative}
/* chevron on group parents rotates when open */
.dash2 .nav-caret{margin-left:auto !important;font-size:15px !important;width:auto !important;
  opacity:.55;transition:transform .22s ease;flex-shrink:0}
.dash2 .nav-caret:hover{opacity:1}
.dash2 .nav-group.open .nav-caret{transform:rotate(90deg)}
/* inline collapsible container */
.dash2 .nav-flyout{overflow:hidden;max-height:0;opacity:.4;
  transition:max-height .26s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.dash2 .nav-group.open .nav-flyout{max-height:280px;opacity:1}
.dash2 .nav-flyout-h{display:none}
.dash2 .nav-sub{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:none;
  font-family:inherit;font-size:12.5px;font-weight:600;color:#6C6B78;padding:8px 8px 8px 34px;
  border-radius:10px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;margin-top:2px}
.dash2 .nav-sub i{font-size:15px;width:16px;text-align:center;color:#9AA0AE;flex-shrink:0}
.dash2 .nav-sub:hover{background:#F5F6FA;color:#14141C}
.dash2 .nav-sub:hover i{color:#1D7FD6}

/* ── Profile resume-style view (#16) ─────────────────────────────────────── */
.pv-head { padding: 24px 24px 20px; }
.pv-name { font-size: 26px; font-weight: 800; color: var(--text-primary, #14141C); letter-spacing: -0.02em; }
.pv-role { font-size: 14px; color: var(--brand, #1D7FD6); font-weight: 600; margin-top: 4px; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #F5F6FA; border: 1px solid #ECEDF2; font-size: 12.5px; color: #3C414C; text-decoration: none; }
.pv-chip i { font-size: 14px; color: #9AA0AE; }
a.pv-chip:hover { background: #EEF0F6; color: #14141C; }
.pv-section { padding: 20px 24px; }
.pv-section-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #9AA0AE; margin-bottom: 14px; }
.pv-section-head i { font-size: 15px; color: var(--brand, #1D7FD6); }
.pv-timeline { display: flex; flex-direction: column; gap: 20px; }
.pv-exp { position: relative; padding-left: 20px; border-left: 2px solid #ECEDF2; }
.pv-exp:last-child { border-left-color: transparent; }
.pv-exp-dot { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand, #1D7FD6); }
.pv-exp-range { font-size: 12px; color: var(--text-muted, #9AA0AE); font-weight: 600; margin-bottom: 2px; }
.pv-exp-company { font-size: 15px; font-weight: 700; color: var(--text-primary, #14141C); }
.pv-exp-title { font-size: 13px; color: var(--text-secondary, #6C6B78); margin-top: 1px; }
.pv-bullets { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pv-bullets li { font-size: 13px; line-height: 1.55; color: var(--text-secondary, #4C505A); }
.pv-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-skill { padding: 6px 12px; border-radius: 8px; background: #F5F6FA; border: 1px solid #ECEDF2;
  font-size: 12.5px; font-weight: 500; color: #3C414C; }

/* editable skills chips (profile editor) */
.pv-skills-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-skill-edit { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border-radius: 8px; background: #EAF3FE; border: 1px solid #D6EAFF; font-size: 12.5px; font-weight: 500; color: #1F6FD6; }
.pv-skill-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; background: rgba(47,151,239,.14); color: #1F6FD6; border-radius: 5px; cursor: pointer; padding: 0; }
.pv-skill-x i { font-size: 12px; }
.pv-skill-x:hover { background: rgba(47,151,239,.28); }

/* ── Structured inline experience editor ─────────────────────────────────── */
.exp-edit-role { border: 1px solid var(--border, #ECEDF2); border-radius: 14px; padding: 16px;
  margin-bottom: 14px; background: var(--surface-low, #FAFBFC); }
.exp-edit-role-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; color: var(--text-primary, #14141C); }
.exp-role-del { background: none; border: none; cursor: pointer; color: #C0442A; font-size: 16px;
  line-height: 1; padding: 4px; border-radius: 6px; }
.exp-role-del:hover { background: #FBE9E6; }
.exp-edit-role .resume-field { margin-bottom: 10px; }
.exp-edit-role .resume-input { height: 40px; padding: 0 12px; font-size: 13px; }
.exp-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exp-current { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--text-secondary, #5D5B66); cursor: pointer; margin: 2px 0 4px; }
.exp-current input { width: 15px; height: 15px; accent-color: var(--brand, #2F97EF); cursor: pointer; }
.exp-bullet-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.exp-bullet-row .resume-input { flex: 1; height: 38px; }
.exp-bullet-x { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--border, #ECEDF2);
  background: #fff; border-radius: 8px; cursor: pointer; color: var(--text-muted, #9AA0AE);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.exp-bullet-x:hover { color: #C0442A; border-color: #F3C4BA; background: #FBE9E6; }
.exp-add-bullet { font-size: 11.5px; margin-top: 2px; }
.exp-add-role { font-size: 12.5px; font-weight: 600; width: 100%; justify-content: center;
  border-style: dashed; margin-bottom: 14px; }
@media (max-width: 560px) { .exp-date-grid { grid-template-columns: 1fr; } }

/* ── Settings rows (#17) ──────────────────────────────────────────────────── */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid #F0F1F5; }
.set-row-label { font-size: 14px; font-weight: 600; color: var(--text-primary, #14141C); }
.set-row-sub { font-size: 12.5px; color: var(--text-muted, #9AA0AE); margin-top: 2px; }
.set-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.set-switch input { opacity: 0; width: 0; height: 0; }
.set-slider { position: absolute; inset: 0; cursor: pointer; background: #CFD3DC; border-radius: 999px; transition: .2s; }
.set-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; }
.set-switch input:checked + .set-slider { background: var(--brand, #1D7FD6); }
.set-switch input:checked + .set-slider::before { transform: translateX(18px); }

/* highlight-to-rewrite hint bar above the resume preview */
.hl-hint{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:13px 16px;
  background:linear-gradient(135deg,#DCEEFF 0%,#E4E8FF 100%);border:2px solid var(--brand,#1D7FD6);border-radius:14px;
  font-size:13.5px;line-height:1.45;color:#1B2A3F;box-shadow:0 4px 16px rgba(29,127,214,.16);
  animation:hlHintPulse 2.6s ease-in-out infinite}
.hl-hint-badge{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--brand,#1D7FD6);box-shadow:0 3px 10px rgba(29,127,214,.4)}
.hl-hint-badge i{font-size:19px;color:#fff}
.hl-hint-text b{color:#0E3B66;font-weight:700}
@keyframes hlHintPulse{
  0%{box-shadow:0 4px 16px rgba(29,127,214,.16),0 0 0 0 rgba(29,127,214,.28)}
  55%{box-shadow:0 4px 16px rgba(29,127,214,.16),0 0 0 7px rgba(29,127,214,0)}
  100%{box-shadow:0 4px 16px rgba(29,127,214,.16),0 0 0 0 rgba(29,127,214,0)}
}
@media (prefers-reduced-motion:reduce){ .hl-hint{animation:none} }

/* fill-in metric chips inside the résumé preview */
.metric-ph{display:inline-flex;align-items:center;gap:3px;vertical-align:baseline;
  padding:0 6px;margin:0 1px;border-radius:6px;cursor:pointer;
  font-family:'Inter Tight',system-ui,sans-serif;font-size:.9em;font-weight:600;line-height:1.35;
  color:#1565C0;background:rgba(47,151,239,.13);border:1px dashed #6FB2EE;
  transition:background .12s,border-color .12s}
.metric-ph:hover{background:rgba(47,151,239,.24);border-style:solid;border-color:#2F97EF}
.metric-ph i{font-size:.82em}
.metric-ph-x{display:none;margin-left:2px;font-weight:700;font-size:1.05em;line-height:.9;
  color:#1565C0;opacity:.55;cursor:pointer;padding:0 1px}
.metric-ph:hover .metric-ph-x{display:inline}
.metric-ph-x:hover{opacity:1;color:#C0442A}
.metric-ph-input{display:inline-block;vertical-align:baseline;padding:0 6px;min-width:56px;
  font-family:'Inter Tight',system-ui,sans-serif;font-size:.9em;font-weight:600;color:#1565C0;
  background:#fff;border:1.5px solid #2F97EF;border-radius:6px;outline:none}

/* editor version / save bar */
.resume-save-bar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:16px;border:1px solid var(--border,#ECEDF2);
  border-radius:12px;background:var(--surface-low,#F7F8FB)}
.resume-save-bar-title{flex:1;min-width:200px;display:flex;flex-direction:column;gap:5px}
.resume-save-bar-actions{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.resume-save-attach-wrap{display:flex;flex-direction:column;gap:4px}
.resume-save-attach-wrap select{height:40px;min-width:190px;font-size:12.5px;padding:0 14px;line-height:38px}
.resume-save-btn{font-size:12px;height:40px;white-space:nowrap;flex-shrink:0}

/* saved resume rows */
.saved-resume-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid var(--border,#ECEDF2);border-radius:10px;margin-bottom:8px;background:#fff}
.saved-resume-row:last-child{margin-bottom:0}
.saved-resume-name{font-size:13.5px;font-weight:600;color:var(--text-primary,#14141C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-resume-name-input{font-size:13.5px;font-weight:600;color:var(--text-primary,#14141C);
  width:100%;max-width:280px;padding:5px 9px;border:1.5px solid var(--brand,#2F97EF);
  border-radius:8px;font-family:inherit;outline:none;background:#fff}
.saved-resume-meta{font-size:11.5px;color:var(--text-muted,#9AA0AE);margin-top:2px}
.saved-resume-actions{display:flex;gap:6px;flex-shrink:0}

/* freshly-rewritten text flashes a fading highlight so the change is obvious */
.hl-new{border-radius:3px;padding:0 1px;animation:hlNewFade 2.6s ease forwards}
@keyframes hlNewFade{
  0%{background:rgba(47,151,239,.30);box-shadow:0 0 0 2px rgba(47,151,239,.15)}
  70%{background:rgba(47,151,239,.18)}
  100%{background:rgba(47,151,239,0);box-shadow:none}
}

/* resume top tabs */
.rtabs{display:flex;gap:4px;margin-bottom:22px;border-bottom:1.5px solid var(--border,#E8ECF1);overflow-x:auto;max-width:100%}
.rtab{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;font-family:inherit;font-size:14.5px;font-weight:600;
  color:var(--text-secondary,#4B5563);background:transparent;border:none;border-bottom:2.5px solid transparent;
  padding:12px 16px;margin-bottom:-1.5px;cursor:pointer;white-space:nowrap;transition:color .14s,border-color .14s}
.rtab i{font-size:17px}
.rtab:hover{color:var(--text-primary)}
.rtab.active{color:var(--brand);border-bottom-color:var(--brand)}
.rtab-pane{display:none;animation:rtabIn .3s ease}
.rtab-pane.active{display:block}
@keyframes rtabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* highlight-to-rewrite popover */
#resume-preview{cursor:text}
.hl-pop{position:absolute;z-index:200;background:#14141C;border-radius:11px;padding:5px;display:none;
  box-shadow:0 12px 34px rgba(0,0,0,.32);white-space:nowrap}
.hl-pop.show{display:block}
.hl-btns{display:flex;gap:2px;align-items:center}
.hl-pop button{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:#fff;
  font-family:inherit;font-size:12px;font-weight:600;padding:7px 11px;border-radius:8px;cursor:pointer;transition:background .12s}
.hl-pop button:hover{background:rgba(255,255,255,.14)}
.hl-pop button i{font-size:14px;color:#FFC24B}
.hl-sp{width:1px;align-self:stretch;background:rgba(255,255,255,.16);margin:5px 1px}
.hl-load{display:none;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:600;padding:7px 13px}
.hl-load i{font-size:15px;color:#FFC24B;animation:hlspin .8s linear infinite}
.hl-pop.loading .hl-btns{display:none}
.hl-pop.loading .hl-load{display:flex}
@keyframes hlspin{to{transform:rotate(360deg)}}
.hl-pop::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#14141C;border-bottom:0}
.hl-pop.below::after{bottom:auto;top:-6px;border-top:0;border-bottom-color:#14141C}

/* mini toast */
.mini-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);z-index:300;
  background:#14141C;color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:11px;
  box-shadow:0 12px 34px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.mini-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════ Applications pipeline: fit all stages on one screen ═══════════ */
.kanban-board{ gap:10px; }
.kanban-col{ flex:1 1 0; min-width:0; padding:10px 10px 12px; }
.kanban-col-header{ margin:2px 2px 10px; padding-bottom:10px; gap:7px; }
.kanban-col-name{ font-size:12.5px; white-space:normal; line-height:1.2; }
.kanban-col-header{ align-items:flex-start; }
.kanban-col-header .kc-dot{ margin-top:5px; }
.kanban-col-count, .kc-add-top{ margin-top:-1px; }
.kanban-card{ padding:11px 12px; }
.kc-avatar{ width:28px; height:28px; font-size:13px; border-radius:8px; }
.kc-top{ gap:9px; }
.kanban-card-company{ font-size:13.5px; }
.kanban-card-role{ font-size:12px; }
.kc-meta{ margin-top:9px; gap:6px; }
.kc-pill{ font-size:10px; padding:2px 7px; }
.kc-date{ font-size:11px; }
.kc-next{ font-size:11px; margin-top:8px; }
.kc-add-top{ width:24px; height:24px; }
.kc-add-top i{ font-size:16px; }
@media (max-width:600px){ .kanban-col{ flex:0 0 210px; min-width:210px; } }

/* ══════════════════════════════════════
   First-run dashboard tour (coach marks)
══════════════════════════════════════ */
.luna-tour-blocker{
  position:fixed; inset:0; z-index:99990;
  background:rgba(17,20,32,.60);
  opacity:0; transition:opacity .3s ease;
  cursor:default;
}
.luna-tour-blocker.show{ opacity:1; }
/* When spotlighting a target, the blocker itself is transparent and the
   dimming is done by the spot's huge box-shadow (so the cutout is clean). */
.luna-tour-blocker.has-spot{ background:transparent; }

.luna-tour-spot{
  position:fixed; z-index:99991; border-radius:16px;
  box-shadow:0 0 0 9999px rgba(17,20,32,.62), 0 0 0 3px var(--brand,#2F97EF), 0 10px 30px rgba(0,0,0,.28);
  pointer-events:none; opacity:0;
  transition:opacity .3s ease, top .38s cubic-bezier(.4,0,.2,1), left .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1);
}
.luna-tour-spot.show{ opacity:1; }

.luna-tour-pop{
  position:fixed; z-index:99993; width:320px; max-width:calc(100vw - 32px);
  background:var(--surface,#fff); border:1px solid var(--border,#E7E9F0);
  border-radius:16px; padding:18px 18px 16px;
  box-shadow:0 16px 44px rgba(19,24,42,.24);
  opacity:0; transform:translateY(6px);
  transition:opacity .28s ease, transform .28s ease, top .34s cubic-bezier(.4,0,.2,1), left .34s cubic-bezier(.4,0,.2,1);
  font-family:'Inter Tight',system-ui,sans-serif;
}
.luna-tour-pop.show{ opacity:1; transform:translateY(0); }
.luna-tour-pop .lt-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand,#2F97EF); margin-bottom:6px;
}
.luna-tour-pop .lt-title{ font-size:16px; font-weight:700; color:var(--text-primary,#1B1B24); margin-bottom:6px; }
.luna-tour-pop .lt-body{ font-size:13.5px; line-height:1.6; color:var(--text-secondary,#5D5B66); }
.luna-tour-foot{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.luna-tour-dots{ display:flex; gap:6px; margin-right:auto; }
.luna-tour-dots span{ width:7px; height:7px; border-radius:50%; background:var(--border,#DDE1EA); transition:background .2s,width .2s; }
.luna-tour-dots span.on{ background:var(--brand,#2F97EF); width:18px; border-radius:4px; }
.luna-tour-count{ margin-right:auto; font-size:11.5px; font-weight:700; color:var(--text-muted,#8A889A); letter-spacing:.02em; }
.luna-tour-skip{ background:none; border:none; font-size:12.5px; color:var(--text-muted,#8A889A); cursor:pointer; padding:6px 4px; font-family:inherit; }
.luna-tour-skip:hover{ color:var(--text-secondary,#5D5B66); }
.luna-tour-back{ background:none; border:1px solid var(--border,#E0E3EC); color:var(--text-secondary,#5D5B66); border-radius:9999px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.luna-tour-back:hover{ background:var(--surface-low,#F3F4F8); }
.luna-tour-next{ background:var(--brand,#2F97EF); color:#fff; border:none; border-radius:9999px; padding:8px 18px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 14px rgba(47,151,239,.34); }
.luna-tour-next:hover{ filter:brightness(1.05); }
/* little arrow that points from the popover to the spotlight */
.luna-tour-pop .lt-arrow{ position:absolute; width:14px; height:14px; background:var(--surface,#fff); border:1px solid var(--border,#E7E9F0); transform:rotate(45deg); display:none; }
.luna-tour-pop.arr-top .lt-arrow{ display:block; top:-8px; border-right:none; border-bottom:none; }
.luna-tour-pop.arr-bottom .lt-arrow{ display:block; bottom:-8px; border-left:none; border-top:none; }
.luna-tour-pop.arr-left .lt-arrow{ display:block; left:-8px; border-top:none; border-right:none; }
.luna-tour-pop.arr-right .lt-arrow{ display:block; right:-8px; border-bottom:none; border-left:none; }
@media (prefers-reduced-motion:reduce){
  .luna-tour-spot,.luna-tour-pop,.luna-tour-blocker{ transition:opacity .2s ease; }
}

/* ══════════════════════════════════════
   Friendly inline error (never raw errors)
══════════════════════════════════════ */
.luna-oops{ display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:#FFF7E8; border:1px solid #F3E2AF; border-radius:12px;
  font-size:13px; line-height:1.55; color:#7A5B12; }
.luna-oops i{ font-size:18px; color:#E8A93C; flex-shrink:0; }

/* ══════════════════════════════════════
   Skeleton loaders (mock the real layout)
══════════════════════════════════════ */
@keyframes skelShimmer { 100% { background-position: -200% 0; } }
.skel{ background:linear-gradient(90deg,#EDEFF4 25%,#F6F7FA 37%,#EDEFF4 63%);
  background-size:200% 100%; background-position:200% 0;
  animation:skelShimmer 1.4s linear infinite; border-radius:8px; display:block; }
.skel-line{ height:12px; margin-bottom:8px; }
.skel-line.sm{ height:10px; }
.skel-line.w40{ width:40%; } .skel-line.w55{ width:55%; } .skel-line.w70{ width:70%; }
.skel-line.w85{ width:85%; } .skel-line.w100{ width:100%; }
.skel-line:last-child{ margin-bottom:0; }
.skel-pill{ height:26px; width:96px; border-radius:9999px; }
.skel-circle{ border-radius:50%; }
/* a skeleton row shaped like an accordion question */
.skel-q{ display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--border,#ECEDF2); border-radius:12px; margin-bottom:6px; background:#fff; }
.skel-q .skel-num{ width:26px; height:26px; flex-shrink:0; border-radius:50%; }
.skel-q .skel-body{ flex:1; }
/* skeleton card shaped like a resource / match card */
.skel-card{ border:1px solid var(--border,#ECEDF2); border-radius:14px; padding:16px; background:#fff; }
.skel-row{ display:flex; gap:12px; flex-wrap:wrap; }
.skel-chips{ display:flex; gap:8px; flex-wrap:wrap; }
@media (prefers-reduced-motion:reduce){ .skel{ animation:none; } }

/* ══════════════════════════════════════
   Instant feedback on every button
   Fires on pointerdown so the press registers immediately, even if the
   handler is still working. No button should ever feel dead.
══════════════════════════════════════ */
button, .btn-primary, .btn-ghost, [role="button"] { cursor: pointer; }
button, .btn-primary, .btn-ghost, [role="button"] {
  transition: transform .09s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
}
.is-pressed { transform: scale(.965) !important; }
button:disabled, .btn-primary:disabled, .btn-ghost:disabled {
  cursor: progress; opacity: .68;
}
/* Busy = a calm pulse, never a spinner */
@keyframes lunaBusyPulse { 0%,100% { opacity:.68 } 50% { opacity:.95 } }
button:disabled.is-busy, .btn-primary:disabled.is-busy, .btn-ghost:disabled.is-busy {
  animation: lunaBusyPulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .is-pressed { transform: none !important; }
  button:disabled.is-busy { animation: none; }
}

/* Honest "we don't know enough yet" chip */
.facet-chip-warn { background:#FFF7E8; border-color:#F3E2AF; color:#7A5B12; }
.facet-chip-warn a { color:#1D7FD6; font-weight:600; text-decoration:none; }

/* Unknown-role hint under the resume target role field */
.role-hint { display:none; margin-top:8px; font-size:13px; line-height:1.5; color:var(--text-muted,#8A889A); align-items:center; flex-wrap:wrap; gap:6px; }
.role-hint.show { display:flex; }
.role-hint-pick {
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--brand,#2F97EF);
  background:var(--brand-subtle,#EFF6FE); border:1px solid var(--brand-dim,#CFE4FA);
  border-radius:999px; padding:4px 11px; cursor:pointer;
  transition: background 160ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1);
}
.role-hint-pick:active { transform: scale(0.97); }

/* Honest empty state where a fabricated match used to be */
.match-thin { padding: 26px 24px; }
.match-thin-title { font-size: 16px; font-weight: 700; color: var(--text-primary,#14141C); margin-bottom: 8px; }
.match-thin p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary,#5D5B66); margin: 0 0 16px; max-width: 52ch; }

/* ── Voice check ──────────────────────────────────────────────────────────
   A short list of real problems, not a score. Each finding shows the line as
   the person actually wrote it, so they can find it in the editor. */
.voice-count {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary,#5D5B66); margin-bottom: 10px;
}
.voice-finding {
  border: 1px solid var(--border,#E7E7EE); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; background: #fff;
  animation: voice-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.voice-finding-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--text-secondary,#5D5B66);
  margin-bottom: 7px;
}
.voice-quote {
  font-size: 13px; line-height: 1.5; color: var(--text-primary,#14141C);
  border-left: 2.5px solid var(--border,#E7E7EE); padding-left: 10px; margin-bottom: 6px;
}
.voice-why { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary,#5D5B66); }
.voice-fix {
  font-size: 12.5px; line-height: 1.5; color: var(--text-primary,#14141C);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border,#E7E7EE);
}
.voice-fix-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand,#3B82F6); margin-right: 5px;
}
.voice-clear, .voice-empty {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; line-height: 1.5; color: var(--text-secondary,#5D5B66);
}
.voice-clear { color: var(--text-primary,#14141C); font-weight: 500; }

@keyframes voice-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-finding { animation: none; }
}

/* ── Warm paths ───────────────────────────────────────────────────────────
   Tiered on purpose: a person you already know is not the same kind of thing
   as a stranger with a shared university, and the UI must not flatten them. */
.wp-search-row { display: flex; gap: 10px; align-items: stretch; }
.wp-search-row .resume-input { flex: 1; }
.wp-search-row .btn-primary { flex-shrink: 0; white-space: nowrap; }

.wp-upload {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px; cursor: pointer;
  background: var(--brand,#3B82F6); color: #fff; font-size: 13px; font-weight: 600;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms ease;
}
.wp-upload:hover { filter: brightness(1.05); }
.wp-upload:active { transform: scale(0.97); }

.wp-how { margin-top: 12px; font-size: 12px; }
.wp-how summary { cursor: pointer; color: var(--text-secondary,#5D5B66); font-weight: 500; }

.wp-conn-summary { margin-bottom: 12px; }
.wp-conn-num { font-size: 22px; font-weight: 800; color: var(--text-primary,#14141C); }
.wp-conn-stat { font-size: 13px; color: var(--text-primary,#14141C); }
.wp-conn-sub { font-size: 12px; color: var(--text-secondary,#5D5B66); margin-top: 2px; }
.wp-conn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wp-reimport { cursor: pointer; }

.wp-tier { margin-bottom: 14px; }
.wp-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.wp-tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 9999px;
}
.wp-badge-strong { background: #E6F6EC; color: #167C3B; }
.wp-badge-warm   { background: #FFF3E0; color: #9A6400; }
.wp-badge-plain  { background: #EEF2F7; color: #465267; }
.wp-tier-count { font-size: 12px; color: var(--text-secondary,#5D5B66); }
.wp-tier-note { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary,#5D5B66); margin: 0 0 12px; }

.wp-person {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--border,#E7E7EE);
}
.wp-person:first-of-type { border-top: none; }
.wp-person-main { min-width: 0; }
.wp-person-name { font-size: 14px; font-weight: 600; color: var(--text-primary,#14141C); }
.wp-person-title { font-size: 12.5px; color: var(--text-secondary,#5D5B66); margin-top: 1px; }
.wp-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.wp-reason {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 9999px;
  background: #FFF3E0; color: #9A6400;
}
.wp-person-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  padding: 8px 14px; border-radius: 9999px;
  background: var(--brand,#3B82F6); color: #fff;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms ease;
}
.wp-person-cta:hover { filter: brightness(1.05); }
.wp-person-cta:active { transform: scale(0.97); }
.wp-cta-ghost { background: #fff; color: var(--brand,#3B82F6); border: 1.5px solid var(--brand,#3B82F6); }

.wp-empty { margin-bottom: 14px; }
.wp-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary,#14141C); margin-bottom: 6px; }
.wp-empty p { font-size: 13px; line-height: 1.6; color: var(--text-secondary,#5D5B66); margin: 0; }

.wp-search-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-search-links .btn-ghost { text-decoration: none; }

@media (max-width: 760px) {
  .wp-search-row { flex-direction: column; }
  .wp-person { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-upload, .wp-person-cta { transition: none; }
}

/* Tour: persistent exit. Without this, "Skip" only existed on step one and
   there was no way to leave the tour once it had started. */
.luna-tour-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-secondary,#5D5B66);
  border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
  transition: background 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.luna-tour-close:hover { background: rgba(20,20,40,0.07); color: var(--text-primary,#14141C); }
.luna-tour-close:active { transform: scale(0.92); }
.luna-tour-pop .lt-eyebrow, .luna-tour-pop .lt-title { padding-right: 30px; }
@media (prefers-reduced-motion: reduce) { .luna-tour-close { transition: none; } }

/* Profile header: inline edit, matching the work-experience editor */
.pv-head { position: relative; }
.pv-head-edit { position: absolute; top: 16px; right: 16px; }
.pv-basics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pv-allfields {
  font-size: 12px; color: var(--text-secondary,#5D5B66); text-decoration: none;
  margin-left: 4px; border-bottom: 1px solid var(--border,#E7E7EE);
}
.pv-allfields:hover { color: var(--text-primary,#14141C); }
@media (max-width: 760px) {
  .pv-basics-grid { grid-template-columns: 1fr; }
  .pv-head-edit { position: static; margin-bottom: 10px; }
}

/* Undo / redo in the resume editor header */
.resume-undo-row { display: inline-flex; gap: 6px; }
.resume-hist-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border,#E7E7EE); background: #fff; border-radius: 8px;
  color: var(--text-secondary,#5D5B66); cursor: pointer; font-size: 15px;
  transition: background 150ms ease, color 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1);
}
.resume-hist-btn:hover:not(:disabled) { background: #F3F4F8; color: var(--text-primary,#14141C); }
.resume-hist-btn:active:not(:disabled) { transform: scale(0.92); }
.resume-hist-btn:disabled { opacity: 0.4; cursor: default; }

/* Voice check: apply the suggested rewrite straight into the resume */
.voice-apply-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 9999px; border: none;
  background: var(--brand,#3B82F6); color: #fff;
  transition: filter 150ms ease, transform 150ms cubic-bezier(0.23,1,0.32,1);
}
.voice-apply-btn:hover:not(:disabled) { filter: brightness(1.05); }
.voice-apply-btn:active:not(:disabled) { transform: scale(0.97); }
.voice-apply-btn:disabled { background: #E6F6EC; color: #167C3B; cursor: default; }
.voice-finding.voice-applied { border-color: #Bfe6cd; background: #F6FCF8; }

/* Metric fill: inline input with the unit (%, etc.) shown after it */
.metric-ph-wrap { display: inline-flex; align-items: baseline; gap: 1px; }
.metric-ph-unit { font-weight: 700; color: var(--brand,#3B82F6); font-size: 0.95em; }
@media (prefers-reduced-motion: reduce) {
  .resume-hist-btn, .voice-apply-btn { transition: none; }
}

/* ── Résumé editor: mockup-style sectioned cards ── */
#resume-editor-panel { display: flex; flex-direction: column; gap: 14px; }

/* "Build from your profile" card */
.gen-card { display: flex; align-items: center; gap: 13px; background: var(--surface, #fff);
  border: 1px solid var(--border, #E8ECF1); border-radius: 16px; padding: 15px 16px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.04)); }
.gen-card-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-subtle, #FFE9E5);
  color: var(--accent, #FF6B5B); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.gen-card-text { min-width: 0; }
.gen-card-text b { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 14px; color: var(--text-primary, #1B1B24); display: block; }
.gen-card-text p { font-size: 11.5px; color: var(--text-secondary, #4B5563); margin: 1px 0 0; line-height: 1.4; }
.gen-card-btn { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand, #2F97EF);
  background: var(--brand-subtle, #EFF6FE); border: 1px solid var(--brand-dim, #BEE3FF); border-radius: 10px;
  padding: 9px 15px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.gen-card-btn:hover { background: #E4F0FD; }

/* Section cards */
.sec-card { background: var(--surface, #fff); border: 1px solid var(--border, #E8ECF1); border-radius: 16px;
  padding: 16px 17px; box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.04)); }
.sec-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.sec-card-title { font-family: 'Quicksand', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-muted, #9CA3AF); margin: 0 auto 0 0; }
.sec-card-badge { font-size: 11px; color: var(--text-secondary, #4B5563); font-weight: 600;
  background: var(--surface-mid, #EEF0F4); border-radius: 20px; padding: 2px 10px; }
.sec-card-link { font-size: 11px; color: var(--text-muted, #9CA3AF); text-decoration: none; }
.sec-card-link:hover { color: var(--brand, #2F97EF); }
.sec-card .resume-save-bar { margin: 0; padding: 0; border: none; background: none; }
.sec-card .resume-field { margin-bottom: 12px; }
.sec-card .resume-field:last-child { margin-bottom: 0; }

/* Collapsible section cards (Education, Skills) — a line you drop down */
.sec-collapse .sec-card-head { cursor: pointer; user-select: none; margin-bottom: 0; }
.sec-collapse.open .sec-card-head { margin-bottom: 13px; }
.sec-collapse .sec-card-body { display: none; }
.sec-collapse.open .sec-card-body { display: block; }
.sec-summary { font-size: 12.5px; color: var(--text-secondary, #4B5563); margin-left: auto;
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-collapse.open .sec-summary { display: none; }
.sec-chev { color: var(--text-muted, #9CA3AF); font-size: 18px; transition: transform .2s cubic-bezier(0.23,1,0.32,1); flex-shrink: 0; }
.sec-collapse.open .sec-chev { transform: rotate(180deg); }

/* Accordion role — avatar chip + title/dates, mockup look */
.rexp-av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-mid, #EEF0F4);
  display: grid; place-items: center; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--text-secondary, #4B5563); }
.rexp-role.open .rexp-av { background: var(--brand, #2F97EF); color: #fff; }
.rexp-head-main { flex-direction: column; align-items: flex-start; gap: 1px; }
.rexp-role.open .rexp-head { background: var(--brand-subtle, #EFF6FE); }
.exp-add-role { width: 100%; font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #4B5563);
  background: var(--surface-low, #F8FAFC); border: 1.5px dashed var(--border-strong, #D1D5DB); border-radius: 11px;
  padding: 11px; cursor: pointer; margin-top: 9px; }
.exp-add-role:hover { border-color: var(--brand-dim, #BEE3FF); color: var(--brand, #2F97EF); }

/* Résumé preview: clean, subtle "select to rewrite" hint */
.preview-hint { display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 12.5px; color: var(--text-secondary); }
.preview-hint i { font-size: 16px; color: var(--brand); flex-shrink: 0; }
.preview-hint b { color: var(--text-primary); font-weight: 600; }

/* Résumé builder: top action bar (template + Download, always in reach) */
.resume-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px; }
.resume-topbar .tpl-picker { margin-bottom: 0; }
.resume-topbar-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted, #9CA3AF); }
.resume-topbar-dl { font-size: 13px; padding: 10px 20px; box-shadow: 0 4px 12px rgba(47,151,239,0.22); }
.editor-download-note { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 14px 0 0; }

/* Résumé export: template segmented control */
.editor-download-row { margin-top: 8px; }
.tpl-picker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tpl-picker-label { font-family: var(--mono, 'Geist Mono', monospace); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted, #9AA0AE); font-weight: 600; }
.tpl-seg { display: inline-flex; background: #F1F2F6; border: 1px solid var(--border, #E7E7EE); border-radius: 10px; padding: 3px; gap: 2px; }
.tpl-opt { font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #5D5B66); background: transparent;
  border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23,1,0.32,1); }
.tpl-opt:hover { color: var(--text-primary, #14141C); }
.tpl-opt:active { transform: scale(0.96); }
.tpl-opt.active { background: #fff; color: var(--text-primary, #14141C); box-shadow: 0 1px 3px rgba(20,20,40,0.12); }
@media (prefers-reduced-motion: reduce) { .tpl-opt { transition: none; } }

/* Résumé editor: collapsible experience roles (keep the editor short) */
.resume-editor-card .resume-field { margin-bottom: 14px; }  /* tighter than the roomy profile/settings */
#r-exp-editor { display: flex; flex-direction: column; gap: 8px; }
.rexp-role { border: 1px solid var(--border, #E7E7EE); border-radius: 12px; overflow: hidden; background: #fff; }
.rexp-role.open { border-color: #D6E4F5; box-shadow: 0 2px 10px rgba(20,20,40,0.05); }
.rexp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; }
.rexp-head:hover { background: #FAFBFD; }
.rexp-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.rexp-head-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #14141C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rexp-head-meta { font-size: 11.5px; color: var(--text-muted, #9AA0AE); }
.rexp-del { flex-shrink: 0; width: 30px; height: 30px; border: none; background: transparent; color: var(--text-muted, #9AA0AE); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.rexp-del:hover { background: #FFF0EC; color: #C0442A; }
.rexp-chev { flex-shrink: 0; color: var(--text-muted, #9AA0AE); font-size: 18px; transition: transform 200ms cubic-bezier(0.23,1,0.32,1); }
.rexp-role.open .rexp-chev { transform: rotate(180deg); }
.rexp-body { padding: 4px 14px 14px; border-top: 1px solid #F1F2F6; }
.rexp-body .resume-field { margin-bottom: 10px; }
.rexp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .rexp-2col { grid-template-columns: 1fr; } }
.exp-add-role { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .rexp-chev { transition: none; } }