/* ══════════════════════════════════════════════════════
   InternTrackAI design system — Apple-style tokens
   Light palette on :root, dark palette on html[data-theme="dark"].
   ══════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────── */
:root {
  /* Surfaces & text */
  --bg:            #EEEEF1;
  --card:          #FBFBFD;
  --surface-2:     #F4F4F7;   /* table heads, drawer sections, AI boxes, hover rows */
  --surface-3:     #EFEFF2;   /* pressed / neutral chips */
  --text:          #1D1D1F;
  /* #6E6E73 measured 4.38:1 on --bg and 4.42:1 on --surface-3 — just under AA, and it is the
     colour of every nav link, form hint and table meta line, so it failed on 13 of 13 pages.
     #67676C clears 4.5:1 on all four light surfaces (4.86 on --bg, the worst case). */
  --text-2:        #67676C;
  --muted:         #67676C;
  --muted-2:       #AEAEB2;   /* decorative only — never the sole carrier of information */
  --border:        rgba(0,0,0,.06);
  --border-strong: rgba(0,0,0,.12);

  /* Accent. Darkened from #0A84FF, which carried white text at only 3.65:1 — .btn-primary fills
     from --accent, so every primary button failed AA in both themes (dark does not override it).
     #0066CC gives 5.57:1, and --accent-h stays a shade darker again so hover still deepens.
     -soft/-rgb move with it so the tints, focus ring and chart fills stay one colour. */
  --accent:        #0066CC;
  --accent-h:      #0059B3;
  --accent-soft:   rgba(0,102,204,.10);
  --accent-surface: #EBF2FB;  /* accent tint for full-width boxes on --bg (4.94:1 / 4.99:1) */
  --accent-text:   #0066CC;
  --accent-rgb:    0,102,204;

  /* Semantic — chips and alerts only */
  --success:       #30D158;
  --success-soft:  rgba(48,209,88,.14);
  --success-text:  #177A32;   /* 3.64:1 on --success-soft was under AA; 4.74:1 now */
  --warning:       #FF9F0A;
  --warning-soft:  rgba(255,159,10,.16);
  --warning-text:  #955900;   /* was #B36B00: 3.43-3.81:1 on every light wash it sits on; this clears 4.63 on all of them (2026-09-26) */
  --danger:        #FF453A;
  --danger-soft:   rgba(255,69,58,.12);
  --danger-text:   #B0271F;   /* 4.11:1 on the danger tint was under AA; 4.99:1 now */
  --purple:        #BF5AF2;
  --purple-soft:   rgba(191,90,242,.14);
  --purple-text:   #8944AB;
  --neutral-soft:  rgba(142,142,147,.14);
  --neutral-text:  #48484A;

  /* Legacy aliases (older rules reference these) */
  --primary:       var(--accent);
  --primary-h:     var(--accent-h);
  --dark:          #1D1D1F;

  /* Shape, depth, motion */
  --radius:        16px;
  --radius-md:     12px;
  --radius-sm:     10px;
  --radius-pill:   999px;
  --shadow-xs:     0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.05);
  --shadow:        0 2px 6px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.10), 0 28px 72px rgba(0,0,0,.14);
  --focus-ring:    0 0 0 4px rgba(0,102,204,.22);

  /* Floating surfaces — tooltips stay dark-on-light in light mode */
  --tooltip-bg:     #1D1D1F;
  --tooltip-color:  #F5F5F7;
  --tooltip-border: transparent;
  --bs-tooltip-bg:    var(--tooltip-bg);
  --bs-tooltip-color: var(--tooltip-color);
  --ease:          cubic-bezier(.25,.1,.25,1);
  --duration:      180ms;
  --font:          -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg:            #0D0D0F;
  --card:          #1C1C1E;
  --surface-2:     #232326;
  --surface-3:     #2C2C2E;
  --text:          #F5F5F7;
  --text-2:        #98989D;
  --muted:         #98989D;
  --muted-2:       #636366;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --accent-text:   #409CFF;
  --accent-soft:   rgba(0,102,204,.16);
  --accent-surface: rgba(0,102,204,.16);  /* dark: the wash already lifts off --bg */
  --success-text:  #30D158;
  --warning-text:  #FFB340;
  --danger-text:   #FF6961;
  --purple-text:   #DA8FFF;
  --neutral-text:  #AEAEB2;
  --neutral-soft:  rgba(142,142,147,.18);
  --dark:          #3A3A3C;
  --shadow-xs:     0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
  --shadow:        0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.5), 0 28px 72px rgba(0,0,0,.6);
  --focus-ring:    0 0 0 4px rgba(0,102,204,.32);
  /* An elevated grey, not the near-black card colour, so tooltips sit above dark cards */
  --tooltip-bg:     #3A3A3C;
  --tooltip-color:  #F5F5F7;
  --tooltip-border: rgba(255,255,255,.12);
  --bs-tooltip-bg:    var(--tooltip-bg);
  --bs-tooltip-color: var(--tooltip-color);
  color-scheme: dark;
}

/* ── Keyframe Animations ─────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 60%; }
  50%       { background-position: 100% 40%; }
}

@keyframes scoreRingDraw {
  to { stroke-dashoffset: var(--ring-offset, 339.29); }
}

@keyframes shimmerSweep {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade-up utility — staggered entrance.
   Fill mode is backwards, not forwards: the from-state hides the element during its delay, and once the animation ends
   nothing stays applied. A retained end transform (even translateY(0), which is what "none" interpolates to) would make
   the element — <main> uses this class — the containing block for position: fixed descendants and a stacking context,
   so the drawer, bulk bar and modals would scroll with the page and sit under the sticky navbar. */
.anim-fade-up {
  animation: fadeSlideUp .45s var(--ease) backwards;
}
.anim-d1 { animation-delay: .05s; }
.anim-d2 { animation-delay: .10s; }
.anim-d3 { animation-delay: .15s; }
.anim-d4 { animation-delay: .20s; }
.anim-d5 { animation-delay: .25s; }
.anim-d6 { animation-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .anim-fade-up { animation: none; opacity: 1; }
  .score-fill   { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  /* Named selectors could not keep up: skeleton-shimmer loops forever on every AI loading state,
     and fadeSlideUp runs on the compare modal, the confirm dialog and the shortcuts modal. Cancel
     animation wholesale instead, which also covers anything added later.
     iteration-count matters as much as duration - an infinite animation at 0.01ms still repeats. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* The one exception: the loading spinner is the only "still working" signal on the AI panels,
     and a frozen spinner reads as a hung request. Motion is small, centred and non-parallax. */
  .match-loading-text::before { animation-duration: .8s !important; animation-iteration-count: infinite !important; }
}

/* Shimmer placeholder bars for AI loading states */
.shimmer-bar {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmerSweep 1.4s ease infinite;
}

/* ── Base ────────────────────────────────────────────── */
html { font-size: 15px; -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* off-canvas drawer must not widen the page */
/* --site-nav-h is the sticky navbar's measured height (site.js keeps it current); anchors and scrollIntoView clear it. */
html { scroll-padding-top: var(--site-nav-h, 53px); }

*,*::before,*::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.2;
}
h1, .h1 { font-size: 2.1333rem; letter-spacing: -.025em; }  /* 32px */
h2, .h2 { font-size: 1.6rem; }                               /* 24px */
h3, .h3 { font-size: 1.3333rem; }                            /* 20px */
h4, .h4, h5, .h5 { font-size: 1.1333rem; }                   /* 17px */
h6, .h6 { font-size: .9333rem; }                             /* 14px */

p { margin-bottom: .75rem; }
small, .small { font-size: .8667rem; }                        /* 13px */

a { color: var(--accent-text); text-decoration: none; transition: color var(--duration) var(--ease), opacity var(--duration) var(--ease); }
a:hover { color: var(--accent-h); }

/* Links in running text are underlined (WCAG 1.4.1: colour must not be the only thing that marks a link).
   Written once, here, rather than per page, so a page added later cannot ship a colour-only link by
   forgetting a rule: any class-less link inside a text element inherits it. Component links are untouched —
   buttons, pills, nav items and the like carry a class, and the few class-less ones that are not prose
   (breadcrumbs, footers, the auth "Sign in" line, which is bold) have their own rule later in this file,
   which wins at equal specificity. Five axe link-in-text-block failures on Register, Privacy and Profile
   (2026-09-25) were all this shape. :where() keeps the specificity at one class + one element. */
:where(p, li, dd, td, th, blockquote, figcaption, label, small, .form-hint, .sub) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .16em;
}

.text-muted, .text-secondary { color: var(--muted) !important; }
.text-body { color: var(--text) !important; }
hr { border-color: var(--border); opacity: 1; }

::selection { background: rgba(10,132,255,.22); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible) { box-shadow: none; }

/* ── Navbar ──────────────────────────────────────────── */
/* The sticky element is the <header> wrapper, not .site-nav: a sticky box can't leave its parent, and the
   header is exactly the navbar's height, so a sticky .site-nav scrolled away with it. */
body > header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-nav {
  padding: .55rem 0;
  background: rgba(238,238,241,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
}
html[data-theme="dark"] .site-nav { background: rgba(13,13,15,.72); }

.site-nav .navbar-brand {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  margin-right: .5rem;
}
.site-nav .navbar-brand:hover { color: var(--text); opacity: .8; }

.brand-dot {
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.site-nav .navbar-nav { align-items: center; }

.site-nav .nav-link {
  color: var(--text-2) !important;
  font-size: .9333rem;
  font-weight: 500;
  padding: .38rem .8rem !important;
  border-radius: var(--radius-pill);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
  position: relative;
  line-height: 1.3;
}

.site-nav .nav-link:hover { color: var(--text) !important; background: rgba(0,0,0,.05); }
.site-nav .nav-link.active { color: var(--text) !important; background: rgba(0,0,0,.06); font-weight: 600; }
html[data-theme="dark"] .site-nav .nav-link:hover  { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .site-nav .nav-link.active { background: rgba(255,255,255,.10); }

.site-nav .navbar-toggler { padding: .3rem .5rem; border-radius: var(--radius-sm); }
.site-nav .navbar-toggler:focus { box-shadow: var(--focus-ring); }
html[data-theme="dark"] .site-nav .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.4); }

@media (max-width: 767.98px) {
  .site-nav .navbar-collapse { padding: .75rem 0 .5rem; }
  .site-nav .navbar-nav { align-items: stretch; }
  .site-nav .nav-link { padding: .55rem .85rem !important; }
  .site-nav .nav-actions { padding-top: .75rem; margin-top: .5rem; border-top: 1px solid var(--border); }
}

/* ── Navbar account chip ─────────────────────────────── */
.navbar-account-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text) !important;
  font-size: .8667rem;
  font-weight: 600;
  text-decoration: none;
  padding: .25rem .7rem .25rem .3rem;
  border-radius: var(--radius-pill);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.navbar-account-link:hover { background: rgba(0,0,0,.05); }
html[data-theme="dark"] .navbar-account-link:hover { background: rgba(255,255,255,.07); }

/* The avatar gradients start at --accent, not the retired #0A84FF: white initials sat at 3.65:1 on that end and
   4.41 mid-way, and neither axe (gradients are "incomplete") nor color-audit (no gradient model) can see it. */
.navbar-account-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #5E5CE6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: -.01em;
  flex-shrink: 0;
}

.navbar-account-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-logout-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.navbar-logout-btn:hover { background: rgba(0,0,0,.05); color: var(--text); }
html[data-theme="dark"] .navbar-logout-btn:hover { background: rgba(255,255,255,.07); }
.navbar-logout-btn svg { width: 16px; height: 16px; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  background: transparent;
  color: var(--muted);
  font-size: .8667rem;
  padding: 1.75rem 0 2rem;
  text-align: center;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  --bs-btn-border-width: 0;
  font-weight: 600;
  font-size: .9333rem;
  line-height: 1.25;
  padding: .55rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 0;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background var(--duration) var(--ease),
              color var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { box-shadow: var(--focus-ring) !important; }
.btn:disabled, .btn.disabled { opacity: .45; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-h); color: #fff; }
.btn-primary:active, .btn-primary.active { background: var(--accent-h) !important; color: #fff; }

.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
  background: rgba(0,0,0,.05); color: var(--text);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-dark:hover,
.btn-secondary:focus, .btn-light:focus, .btn-outline-secondary:focus {
  background: rgba(0,0,0,.09); color: var(--text);
}
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-light, html[data-theme="dark"] .btn-outline-dark {
  background: rgba(255,255,255,.09); color: var(--text);
}
html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-light:hover, html[data-theme="dark"] .btn-outline-dark:hover {
  background: rgba(255,255,255,.15); color: var(--text);
}

/* --accent-h, not --accent-text: the soft wash over --bg (the practice list footer) put --accent-text at 4.19:1
   (color-audit, 2026-09-26). Dark keeps --accent-text through its own rule further down. */
.btn-outline-primary { background: var(--accent-soft); color: var(--accent-h); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--accent); color: #fff; }

.btn-danger { background: #DC2F27; color: #fff; }   /* 4.7:1 with white; --danger itself stays for chips/dots */
.btn-danger:hover { background: #C4271F; color: #fff; }
.btn-outline-danger { background: var(--danger-soft); color: var(--danger-text); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #28B84D; color: #fff; }
.btn-outline-success { background: var(--success-soft); color: var(--success-text); }
.btn-outline-success:hover { background: var(--success); color: #fff; }

.btn-warning { background: var(--warning); color: #1D1D1F; }
.btn-outline-warning { background: var(--warning-soft); color: var(--warning-text); }

.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: #2C2C2E; color: #fff; }

.btn-link { background: transparent; color: var(--accent-text); font-weight: 500; text-decoration: none; padding-inline: .4rem; }
.btn-link:hover { color: var(--accent-h); text-decoration: underline; }

.btn-sm { font-size: .8667rem; padding: .38rem .85rem; }
.btn-lg { font-size: 1.0667rem; padding: .75rem 1.5rem; }

/* ── Cards ───────────────────────────────────────────── */
.app-card, .card {
  --bs-card-border-width: 0;
  --bs-card-bg: var(--card);
  --bs-card-cap-bg: transparent;
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  overflow: hidden;
}
.app-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-header, .card-footer { background: transparent; border-color: var(--border); }
.card-body { padding: 1.35rem 1.5rem; }

/* ── Landing page (Home/Index) ───────────────────────── */
.lp-wrap { max-width: 1120px; }
.lp-ghost { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.lp-ghost:hover { color: var(--text); background: var(--card); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
.lp-hero { padding: 6rem 0 0; text-align: center; background: var(--bg); }
.lp-h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.2667rem);   /* 64px at desktop */
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 auto 1.4rem;
  max-width: 780px;
  color: var(--text);
}
.lp-sub { font-size: 1.4rem; color: var(--text-2); max-width: 580px; margin: 0 auto 2.2rem; line-height: 1.45; }
.lp-cta { display: flex; gap: .75rem; justify-content: center; margin-bottom: .9rem; flex-wrap: wrap; }
.lp-cta .btn-lg { padding: .85rem 1.8rem; font-size: 1.1333rem; }
.lp-fine { font-size: .8667rem; color: var(--text-2); margin: 0 0 4rem; }
.lp-demo-form { display: inline-flex; margin: 0; }
@media (max-width: 575.98px) { .lp-demo-form { width: 100%; } .lp-demo-form .btn { width: 100%; } }

/* Dashboard preview frame */
.lp-shot {
  position: relative;
  margin: 0 auto;
  max-width: 1040px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  overflow: hidden;
  text-align: left;
  animation: lpRise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lpRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-shot { animation: none; } }
/* Mini navbar: real tabs (buttons) styled like .site-nav .nav-link; landing-preview.js swaps the panels. */
.lp-shot-nav { height: 48px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .25rem; padding: 0 1.1rem; font-size: .8667rem; color: var(--text-2); }
.lp-shot-nav b { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: .45rem; margin-right: .9rem; white-space: nowrap; }
.lp-shot-nav button {
  appearance: none; background: none; border: 0; margin: 0;
  font: inherit; font-weight: 500; color: var(--text-2); line-height: 1.3;
  padding: .32rem .8rem; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.lp-shot-nav button:hover { color: var(--text); background: rgba(0,0,0,.05); }
.lp-shot-nav button.on { color: var(--text); background: rgba(0,0,0,.06); font-weight: 600; }
.lp-shot-nav button:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
html[data-theme="dark"] .lp-shot-nav button:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .lp-shot-nav button.on { background: rgba(255,255,255,.10); }

/* Only the active panel is in flow, so the stage is exactly as tall as the visible mock. Inactive panels sit
   absolutely on top of it for the crossfade. landing-preview.js keeps the stage at an explicit pixel height
   (measured from the active panel) so the change animates instead of jumping. */
.lp-shot-panels { position: relative; overflow: hidden; background: var(--bg); transition: height 180ms var(--ease); }
.lp-shot-panel { position: absolute; top: 0; left: 0; right: 0; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease), visibility 0s linear 180ms; }
.lp-shot-panel.is-active { position: relative; opacity: 1; visibility: visible; transition-delay: 0s; }
.lp-shot-panel .btn, .lp-shot-panel .filter-pill { pointer-events: none; }
.lp-shot-panel .view-toggle button { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .lp-shot-panels, .lp-shot-panel { transition: none; } }
.lp-shot-hint { margin: .9rem 0 0; font-size: .8667rem; color: var(--text-2); }
.lp-shot-body { padding: 1.6rem 1.6rem 1.75rem; background: var(--bg); }
.lp-shot-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.1rem; }
.lp-shot-head h3, .lp-shot-head .lp-shot-title { margin: 0; font-size: 1.4667rem; font-weight: 600; letter-spacing: -.03em; }
.lp-shot-head span { font-size: .8667rem; color: var(--text-2); }
.lp-mini-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; }
.lp-mini-card h4, .lp-mini-card .lp-card-title { margin: 0 0 .75rem; font-size: .9333rem; font-weight: 600; letter-spacing: -.01em; }
.lp-shot-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: .75rem; }
.lp-stat .l { font-size: .8rem; color: var(--text-2); margin-bottom: .4rem; }
.lp-stat .n { font-size: 1.7333rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-stat .u { font-size: .9rem; font-weight: 500; color: var(--muted); }
.lp-stat .d { font-size: .7333rem; color: var(--text-2); margin-top: .4rem; }
.lp-stat .up { color: var(--success-text); font-weight: 500; }
.lp-shot-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: .75rem; }   /* board fragment on the wider side */
.lp-bars { height: 120px; display: flex; align-items: flex-end; gap: 6px; padding-top: .5rem; }
.lp-bars i { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 0 0; position: relative; height: 100%; }
.lp-bars i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--v); background: var(--accent); border-radius: 4px 4px 0 0; opacity: .9; }
.lp-li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .8667rem; }
.lp-li:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-li .company-avatar { width: 30px; height: 30px; font-size: .7rem; border-radius: 8px; }
.lp-li .m { flex: 1; min-width: 0; }
.lp-li .m b { font-weight: 500; display: block; }
.lp-li .m span { font-size: .8rem; color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-li .status-badge { font-size: .7333rem; padding: .25em .65em; }

/* Company strip */
.lp-logos { padding: 4rem 0 1.5rem; text-align: center; }
.lp-logos p { font-size: .8667rem; color: var(--text-2); margin: 0 0 1.1rem; }
.lp-logos div { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; font-size: 1rem; font-weight: 600; color: var(--text-2); letter-spacing: -.01em; }

/* Feature stories */
.lp-story { padding: 6rem 0; }
.lp-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lp-story--flip .lp-story-grid > div:first-child { order: 2; }
.lp-story h2 { font-size: 2.6667rem; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; margin: 0 0 1rem; }
.lp-story p { font-size: 1.2rem; color: var(--text-2); margin: 0 0 1.4rem; max-width: 440px; }
.lp-story ul { list-style: none; padding: 0; margin: 0; font-size: 1rem; color: var(--text); }
.lp-story li { padding: .5rem 0; border-top: 1px solid var(--border); display: flex; gap: .75rem; }
.lp-story li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; margin-top: .6rem; }
.lp-frag { background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); padding: 1.4rem 1.5rem; }
.lp-frag h5, .lp-frag .lp-frag-title { margin: 0 0 .9rem; font-size: .8667rem; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.lp-score { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.lp-kv { font-size: .8667rem; color: var(--text-2); line-height: 1.5; }
.lp-kv b { color: var(--text); font-weight: 500; }
.lp-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-aibox { background: var(--surface-2); border-radius: 12px; padding: .9rem 1rem; font-size: .9333rem; line-height: 1.55; color: var(--text); }
.lp-aibox b { display: flex; align-items: center; gap: .4rem; font-weight: 500; margin-bottom: .4rem; font-size: .8667rem; }
.lp-aibox b i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.lp-frag-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.lp-frag-actions .btn { pointer-events: none; }
.lp-q { padding: .8rem .9rem; background: var(--surface-2); border-radius: 12px; font-size: .9333rem; margin-bottom: .6rem; }
.lp-q b { font-weight: 500; display: block; margin-bottom: .2rem; color: var(--text); }
.lp-q span { color: var(--text-2); font-size: .8667rem; }
.lp-input { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: .7rem .9rem; font-size: .9333rem; color: var(--text-2); }

/* Three steps band */
.lp-steps { padding: 6rem 0; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-steps h2 { text-align: center; font-size: 2.6667rem; letter-spacing: -.03em; font-weight: 600; margin: 0 0 .75rem; }
.lp-steps-sub { text-align: center; color: var(--text-2); font-size: 1.2rem; margin: 0 0 3.5rem; }
.lp-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-step { padding: 1.6rem 1.6rem 1.75rem; border-radius: 16px; background: var(--bg); }
.lp-step i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-weight: 600; font-size: .8667rem; margin-bottom: 1.1rem; }
.lp-step b { display: block; font-size: 1.2667rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: .5rem; }
.lp-step p { margin: 0; color: var(--text-2); font-size: 1rem; }

/* Stack strip */
.lp-stack { padding: 5rem 0; text-align: center; }
.lp-stack p { font-size: .8667rem; color: var(--text-2); margin: 0 0 1rem; }
.lp-stack div { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.lp-stack span { padding: .5rem 1rem; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: .9333rem; font-weight: 500; }

/* Closing CTA */
.lp-final { padding: 2.5rem 0 7.5rem; text-align: center; }
.lp-final-box { background: var(--accent-surface); color: var(--text); border-radius: 28px; padding: 4.5rem 2.5rem; box-shadow: inset 0 0 0 1px rgba(10,132,255,.14); }
.lp-final h2 { font-size: 2.9333rem; letter-spacing: -.035em; font-weight: 600; margin: 0 0 .9rem; }
.lp-final p { font-size: 1.2rem; color: var(--text-2); margin: 0 auto 1.9rem; max-width: 560px; }
.lp-final .lp-cta { margin-bottom: 0; }

/* Landing footer */
.lp-footer { border-top: 1px solid var(--border); padding: 1.6rem 0; font-size: .8667rem; color: var(--text-2); }
.lp-footer-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lp-footer-in div { display: flex; gap: 1.1rem; }
.lp-footer-in a { color: var(--text-2); }
.lp-footer-in a:hover { color: var(--text); }

@media (max-width: 991.98px) {
  .lp-story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-story--flip .lp-story-grid > div:first-child { order: 0; }
  .lp-step-grid { grid-template-columns: 1fr; }
  .lp-shot-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-shot-row { grid-template-columns: 1fr; }
  .lp-story h2, .lp-steps h2 { font-size: 2rem; }
  .lp-final h2 { font-size: 2.1333rem; }
}
@media (max-width: 575.98px) {
  .lp-hero { padding-top: 3.5rem; }
  .lp-h1 { font-size: 2.4rem; }
  .lp-sub { font-size: 1.1333rem; }
  .lp-cta { flex-direction: column; align-items: stretch; }
  .lp-cta .btn { width: 100%; }
  .lp-story { padding: 3.5rem 0; }
  .lp-steps, .lp-stack { padding: 3.5rem 0; }
  .lp-final { padding-bottom: 4rem; }
  .lp-final-box { padding: 3rem 1.25rem; border-radius: 22px; }
  .lp-shot-body { padding: 1rem; }
  /* Phone: tabs stay usable (brand text goes, row can scroll); the frame sizes to the active mock instead of the tallest. */
  .lp-shot-nav { gap: .15rem; padding: 0 .6rem; overflow-x: auto; scrollbar-width: none; }
  .lp-shot-nav::-webkit-scrollbar { display: none; }
  .lp-shot-nav b { margin-right: .25rem; }
  .lp-shot-brand { display: none; }
  .lp-shot-nav button { padding: .3rem .45rem; font-size: .8rem; }
  .lp-shot-hint { font-size: .8rem; }
  .lp-footer-in { flex-direction: column; align-items: flex-start; }
}

/* ── Stat cards ──────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.15rem;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stat-number {
  font-size: 2.1333rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  margin-bottom: .45rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: .8667rem;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.stat-label::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
}
.stat-card-total  .stat-label::before { background: var(--accent); }
.stat-card-saved  .stat-label::before { background: var(--muted-2); }
.stat-card-applied .stat-label::before { background: var(--accent); }
.stat-card-interview .stat-label::before { background: var(--warning); }
.stat-card-offer  .stat-label::before { background: var(--success); }
.stat-card-rejected .stat-label::before { background: var(--danger); }

/* ── Status badges ───────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .75em;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  border: 0;
  line-height: 1.4;
}

.badge-saved     { background: var(--neutral-soft); color: var(--neutral-text); }
.badge-applied   { background: var(--accent-soft);  color: var(--accent-text); }
.badge-screening { background: var(--purple-soft);  color: var(--purple-text); }
.badge-interview { background: var(--warning-soft); color: var(--warning-text); }
.badge-offer     { background: var(--success-soft); color: var(--success-text); }
.badge-rejected  { background: var(--danger-soft);  color: var(--danger-text); }

/* ── Table ───────────────────────────────────────────── */
.app-table-wrapper {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.app-table-wrapper .table {
  margin: 0;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(0,0,0,.025);
  --bs-table-hover-color: var(--text);
  color: var(--text);
}

.app-table-wrapper .table thead th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--border);
  padding: .8rem 1rem;
  white-space: nowrap;
}

.app-table-wrapper .table tbody td {
  padding: .9rem 1rem;
  vertical-align: middle;
  border-color: var(--border);
  font-size: .9333rem;
}

.app-table-wrapper .table tbody tr { transition: background var(--duration) var(--ease); }
.app-table-wrapper .table tbody tr:hover td { background: rgba(0,0,0,.025); }
html[data-theme="dark"] .app-table-wrapper .table tbody tr:hover td { background: rgba(255,255,255,.04); }
.app-table-wrapper .table tbody tr:last-child td { border-bottom: none; }

/* Skip link: off-screen until focused, then the first thing a keyboard user sees. Sits above
   the sticky header, which is position:sticky at z-index below this. */
.skip-link {
  position: absolute; left: 0; top: 0; z-index: 2000;
  transform: translateY(-120%);
  background: var(--card); color: var(--accent-text);
  padding: .6rem 1.1rem; margin: .5rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  font-size: .9333rem; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); outline: none; box-shadow: var(--focus-ring); }
#main-content:focus { outline: none; }

.company-name { font-weight: 600; color: var(--text); }
/* The row itself is not focusable any more (nested-interactive: it held a checkbox and three
   link-buttons). This is the keyboard way into the drawer — a real button that looks like the
   text it replaced. Its click bubbles to the row handler, so mouse and keyboard take one path. */
.row-open {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.row-open:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.role-name    { color: var(--muted); }

/* ── Company avatar ──────────────────────────────────── */
.company-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  /* --accent-h: on a hovered row the wash reads #DDE7F3 and --accent-text was 4.45:1. Dark restored below. */
  color: var(--accent-h);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem;
  letter-spacing: -.01em;
  flex-shrink: 0;
}

/* ── Page header ─────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-bottom: 1.75rem;
}

.page-header h1, .page-header h2 {
  font-size: 2.1333rem;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0;
  line-height: 1.15;
}

.page-header .sub { color: var(--muted); font-size: 1rem; margin: .3rem 0 0; }

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted);
}

.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .7; }
.empty-state p { font-size: .9333rem; margin-bottom: 1.25rem; }

/* ── Form (Create) ───────────────────────────────────── */
.form-card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem 2rem 2rem;
}

.form-section-title {
  font-size: 1.1333rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.form-label {
  font-size: .8667rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: .35rem;
}

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  font-size: 1rem;
  color: var(--text);
  background-color: var(--card);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
  padding: .6rem .85rem;
  line-height: 1.4;
  box-shadow: none;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
  background-color: var(--card);
  color: var(--text);
}

.form-control::placeholder { color: var(--muted-2); }
/* Bootstrap only swaps the select chevron under [data-bs-theme=dark]; this app themes via data-theme */
html[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398989D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

textarea.form-control { min-height: 100px; resize: vertical; }

.form-hint {
  font-size: .8667rem;
  color: var(--muted);
  margin-top: .35rem;
}

/* ── Dashboard card header ───────────────────────────── */
.card-header-clean {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.card-header-clean h5, .card-header-clean .h5 {
  font-size: 1.1333rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--text);
}

/* ── Auth layout ─────────────────────────────────────── */
.auth-body {
  background: var(--bg);
  min-height: 100vh;
  display: block;
}
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.1rem;
  gap: 1.5rem;
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-weight: 600;
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: -.02em;
}
.auth-brand:hover { color: var(--text); opacity: .8; }
.auth-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 2.25rem 2rem 2rem;
}
.auth-footnote { font-size: .8rem; color: var(--text-2); margin: 0; }
.auth-footnote a { color: inherit; text-decoration: underline; }
.auth-footnote a:hover { color: var(--text); }
/* Under the Register form: the one line a new account should read before it uploads a resume. */
.auth-legal { text-align: center; font-size: .8rem; color: var(--text-2); margin: 1rem 0 .85rem; }
.auth-legal a { color: var(--accent-text); }

/* Auth form elements */
.auth-header { margin-bottom: 1.5rem; text-align: center; }
.auth-title { font-size: 1.6rem; font-weight: 600; letter-spacing: -.025em; color: var(--text); margin-bottom: .3rem; }
.auth-subtitle { color: var(--muted); font-size: .9333rem; margin: 0; }

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--danger-soft);
  border: 0;
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  margin-bottom: 1.1rem;
  font-size: .8667rem;
  font-weight: 500;
  color: var(--danger-text);
}
.auth-alert ul { margin: 0; padding-left: 1.1rem; }
.auth-alert--success { background: var(--success-soft); color: var(--success-text); }
.auth-alert .validation-summary-valid { display: none; }
.auth-success { text-align: left; }

.auth-field { margin-bottom: 1rem; }
.auth-input { height: 46px; font-size: 1rem; }
.auth-error { display: block; font-size: .8667rem; color: var(--danger-text); margin-top: .3rem; }
.auth-error:empty { display: none; }

.auth-remember { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; font-size: .9333rem; color: var(--text-2); }
.auth-remember .form-check-input { margin-top: 0; }

.auth-submit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  height: 46px;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}
.auth-switch { text-align: center; font-size: .9333rem; color: var(--muted); margin: 0 0 .5rem; }
.auth-switch:last-child { margin-bottom: 0; }
.auth-switch a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* ── AI Analyzer card ────────────────────────────────── */
.analyzer-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.analyzer-card.analyzer-open { box-shadow: var(--shadow); border-color: rgba(10,132,255,.25); }

.analyzer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  user-select: none;
  gap: 1rem;
}

.analyzer-header-left {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 1;
  min-width: 0;
}

.analyzer-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), #5E5CE6);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(10,132,255,.3);
}
.analyzer-icon svg { width: 20px; height: 20px; }

.analyzer-header h6, .analyzer-header .h6 {
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  margin: 0 0 .1rem;
}

.analyzer-header p {
  color: var(--muted);
  font-size: .8667rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analyzer-toggle-btn {
  background: rgba(0,0,0,.05);
  border: 0;
  color: var(--text);
  font-size: .8667rem;
  font-weight: 600;
  padding: .42rem 1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
  white-space: nowrap;
  flex-shrink: 0;
}
.analyzer-toggle-btn:hover { background: rgba(0,0,0,.09); }
html[data-theme="dark"] .analyzer-toggle-btn { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .analyzer-toggle-btn:hover { background: rgba(255,255,255,.15); }
@media (max-width: 575.98px) {
  .analyzer-header { flex-wrap: wrap; }
  .analyzer-header p { white-space: normal; }
  .analyzer-toggle-btn { width: 100%; }
}

/* Body hidden by default, shown when .analyzer-open */
.analyzer-body {
  display: none;
  padding: 0 1.35rem 1.35rem;
}

.analyzer-card.analyzer-open .analyzer-body { display: block; }

.analyzer-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: .9333rem;
  line-height: 1.55;
  padding: .8rem 1rem;
  resize: vertical;
  min-height: 130px;
  font-family: inherit;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
  display: block;
}
.analyzer-textarea::placeholder { color: var(--muted-2); }
.analyzer-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--card); }
html[data-theme="dark"] .analyzer-textarea { background: var(--surface-3); }

.analyzer-submit { white-space: nowrap; }
.analyzer-submit:disabled { cursor: not-allowed; }

.analyzer-model-tag {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
}

/* Result banner */
.analyzer-result {
  background: var(--success-soft);
  border: 0;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  margin-top: .85rem;
  color: var(--success-text);
  font-size: .9333rem;
  font-weight: 500;
}
.analyzer-result .ai-shimmer-wrap { color: var(--text); }

.analyzer-result-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.analyzer-check {
  width: 18px; height: 18px;
  background: var(--success);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.analyzer-check::after { content: ''; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }

.analyzer-skills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.analyzer-skill-tag {
  background: var(--card);
  border: 0;
  color: var(--text);
  font-size: .8rem;
  font-weight: 500;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}

/* Error banner */
.analyzer-error {
  background: var(--danger-soft);
  border: 0;
  border-radius: var(--radius-md);
  padding: .7rem 1rem;
  margin-top: .75rem;
  color: var(--danger-text);
  font-size: .9333rem;
  font-weight: 500;
}

/* Auto-fill flash animation on form fields */
@keyframes ai-autofill-flash {
  0%   { background-color: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10,132,255,.18); }
  60%  { background-color: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10,132,255,.18); }
  100% { background-color: var(--card); border-color: var(--border-strong); box-shadow: none; }
}

.form-control.ai-autofilled,
.form-select.ai-autofilled {
  animation: ai-autofill-flash 2s ease forwards;
}

/* Inline "no resume" + loading states on the Create page */
.match-loading-text { font-size: .9333rem; color: var(--muted); margin: 0; display: flex; align-items: center; gap: .5rem; }
.match-loading-text::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.match-no-resume { padding: 1rem 1.1rem; background: var(--accent-soft); border-radius: var(--radius-md); }
.match-no-resume-title { margin: 0; font-size: .9333rem; color: var(--text); font-weight: 600; }
.match-no-resume-text { margin: .35rem 0 0; font-size: .8667rem; color: var(--muted); }
.match-no-resume-text a { font-weight: 600; }

/* ── Row action buttons ──────────────────────────────── */
.row-action-btn {
  font-size: .8rem;
  padding: .3rem .7rem;
  opacity: 0;
  transition: opacity var(--duration) var(--ease), background var(--duration) var(--ease);
}
.app-table-wrapper .table tbody tr:hover .row-action-btn,
.app-table-wrapper .table tbody tr:focus-within .row-action-btn { opacity: 1; }
@media (hover: none) { .row-action-btn { opacity: 1; } }

/* Sticky table header (Applications list).
   Background: the opaque card surface in both themes. The :root prefix out-ranks the dark-theme
   `.app-table-wrapper .table thead th` rule and Bootstrap's transparent cell reset, so nothing shows through.
   Layering: z-index 5 in the root stacking context — above rows, match rings and row hover (all z auto), below
   the navbar (1000), bulk bar (1000), drawer (1030/1031) and modals (9997+). */
:root .app-table-wrapper.app-table-sticky .table thead th { background-color: var(--card); }

/* Sticky only from md up: below that the table scrolls sideways inside .table-responsive (overflow-x: auto), which
   becomes the header's scroll container and stops it sticking to the viewport.
   The cost of that trade is paid in _Table.cshtml: with no scroll container left, a table wider than the
   viewport widens the document instead of scrolling inside it, and the whole page goes sideways. The list's
   columns bottom out at ~945px, which the page only has room for from 992px, so Location, Mode and Match are
   marked d-none/d-lg-table-cell there and step out for the 768-991px band. Adding a column to that table means
   re-checking that band; the compatibility and visual dimensions of the e2e suite both assert on it. */
@media (min-width: 768px) {
  .app-table-sticky, .app-table-sticky .table-responsive { overflow: visible; }
  .app-table-sticky .table thead th {
    position: sticky;
    top: var(--site-nav-h, 53px);   /* directly under the sticky navbar */
    z-index: 5;
  }
  .app-table-sticky .table thead th:first-child { border-top-left-radius: var(--radius); }
  .app-table-sticky .table thead th:last-child  { border-top-right-radius: var(--radius); }

  /* Stuck (applications.js toggles .is-stuck): square corners so no row peeks past the rounded ends, plus a hairline
     and a soft shadow so the header reads as a layer above the rows.
     - Hairline: an inset shadow. The cells' own bottom border stays behind in the collapsed table, and Chromium
       doesn't paint an outer box-shadow on these cells at all.
     - Shadow: one 1px strip hung under the first cell, as wide as the table (--sticky-head-w, set by applications.js),
       so there are no per-cell seams; clip-path keeps only the part below the header. */
  .app-table-sticky.is-stuck .table thead th {
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--border-strong);
  }
  .app-table-sticky.is-stuck .table thead th:first-child::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: var(--sticky-head-w, 100%);
    height: 1px;
    box-shadow: var(--shadow-sm);
    clip-path: inset(0 0 -24px 0);
    pointer-events: none;
  }
}
.col-check { width: 2.75rem; }
.col-check .form-check-input { margin: 0; cursor: pointer; }
.col-match { width: 4rem; }
.app-table-wrapper .table tbody td.col-check { padding-right: 0; }

/* Conic match ring */
.match-ring {
  --p: 0;
  --ring: var(--accent);
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--surface-3) 0);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.match-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); }
.match-ring > span { position: relative; font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.match-ring > span::after { content: '%'; font-size: .55em; font-weight: 500; color: var(--muted); margin-left: 1px; }
.match-ring--sm { width: 36px; height: 36px; }
.match-ring--sm::before { inset: 3.5px; }
.match-ring--sm > span { font-size: .7rem; }
.match-ring--sm > span::after { display: none; }
.match-ring--lg { width: 96px; height: 96px; }
.match-ring--lg::before { inset: 8px; }
.match-ring--lg > span { font-size: 1.6rem; }
.match-ring--tier-5 { --ring: var(--success); }
.match-ring--tier-4 { --ring: var(--accent); }
.match-ring--tier-3 { --ring: var(--warning); }
.match-ring--tier-2 { --ring: #FF8A00; }
.match-ring--tier-1 { --ring: var(--danger); }

/* ── Profile ─────────────────────────────────────────── */
.profile-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 0;
  box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--border);
  flex-shrink: 0;
}

.profile-avatar-placeholder {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #5E5CE6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  flex-shrink: 0;
  border: 0;
  box-shadow: 0 6px 16px rgba(10,132,255,.25);
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
/* min-width:0 lets the identity column shrink inside the flex row, but an email address is one
   unbroken token: without overflow-wrap it keeps its full min-content width and pushes the whole
   document wider than the viewport at 390px. `anywhere` (not `break-word`) is the one that also
   shrinks min-content, which is what the flex item is sized from. Applied to the name too — a long
   single-word name overflows the same way. */
.profile-identity { min-width: 0; }
.profile-photo-name    { font-size: 1.3333rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: .1rem; color: var(--text); overflow-wrap: anywhere; }
.profile-photo-email   { font-size: .9333rem; color: var(--muted); margin-bottom: .6rem; overflow-wrap: anywhere; }

/* The avatar circle is the photo control: hover/focus reveals a dark overlay with a camera
   icon and "Change"; clicking (or Enter/Space) opens the file picker. */
.profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex-shrink: 0; }
.profile-avatar-btn {
  position: relative;
  width: 84px; height: 84px;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  transition: transform var(--duration) var(--ease);
}
.profile-avatar-btn:hover { transform: scale(1.02); }
.profile-avatar-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--accent); }
.profile-avatar-btn .profile-avatar,
.profile-avatar-btn .profile-avatar-placeholder { display: flex; }
.profile-avatar-btn .profile-avatar[hidden],
.profile-avatar-btn .profile-avatar-placeholder[hidden] { display: none; }
.profile-avatar-overlay {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .01em;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}
.profile-avatar-btn:hover .profile-avatar-overlay,
.profile-avatar-btn:focus-visible .profile-avatar-overlay,
.profile-avatar-wrap.is-uploading .profile-avatar-overlay { opacity: 1; }
.profile-avatar-spinner { display: none; width: 18px; height: 18px; border-width: 2px; }
.profile-avatar-wrap.is-uploading .profile-avatar-spinner { display: inline-block; }
.profile-avatar-wrap.is-uploading .profile-avatar-overlay-icon { display: none; }
.profile-avatar-wrap.is-uploading .profile-avatar-btn { cursor: progress; }
.profile-photo-remove {
  background: none; border: 0; padding: 0;
  font-size: .75rem; font-weight: 500;
  color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.profile-photo-remove:hover { color: var(--danger); }
.profile-photo-remove:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }
/* No hover on phones: keep the overlay faintly visible so the control is discoverable. */
@media (max-width: 575.98px) {
  .profile-avatar-overlay { opacity: .45; }
  .profile-avatar-btn:active .profile-avatar-overlay { opacity: 1; }
}

.profile-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
}
.profile-stat { display: flex; flex-direction: column; gap: .15rem; min-width: 64px; }
.profile-stat-num { font-size: 1.4667rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.profile-stat-unit { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: 1px; }
.profile-stat-label { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.profile-stat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); display: inline-block; }
.profile-stat-dot.dot-saved     { background: var(--muted-2); }
.profile-stat-dot.dot-applied   { background: var(--accent); }
.profile-stat-dot.dot-interview { background: var(--warning); }
.profile-stat-dot.dot-offer     { background: var(--success); }
.profile-stat-dot.dot-rejected  { background: var(--danger); }
@media (max-width: 575.98px) {
  .profile-photo-row { flex-direction: row; align-items: center; }
  .profile-stat-strip { gap: .75rem 1.25rem; }
}


/* Document version rows */
.doc-list { display: flex; flex-direction: column; gap: .5rem; }

.doc-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .9rem;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  transition: background var(--duration), transform var(--duration);
  flex-wrap: wrap;
}
.doc-row:hover { background: var(--surface-3); }
.doc-row.doc-active { background: var(--accent-soft); }
.doc-row-link { text-decoration: none; color: inherit; }
.doc-row-link:hover { color: inherit; }

.doc-version-badge {
  display: inline-flex;
  align-items: center;
  padding: .25em .6em;
  background: var(--card);
  color: var(--text-2);
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.doc-active .doc-version-badge { background: var(--accent); color: #fff; box-shadow: none; }

.doc-info { flex: 1; min-width: 160px; }
.doc-filename { font-size: .9333rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.doc-label-row { display: flex; align-items: center; gap: .35rem; }
.doc-label-edit { border: 0; background: transparent; color: var(--muted); padding: .1rem .25rem; border-radius: 6px; display: inline-flex; opacity: 0; transition: opacity var(--duration), color var(--duration); }
.doc-row:hover .doc-label-edit, .doc-label-edit:focus-visible { opacity: 1; }
.doc-label-edit:hover { color: var(--accent-text); background: var(--accent-soft); }
.doc-label-input { max-width: 260px; font-size: .8667rem; }
.doc-stat { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.row-resume { font-size: .78rem; margin-top: .1rem; }
.doc-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; flex-wrap: wrap; margin-left: auto; }
.doc-btn { font-size: .8rem; padding: .3rem .7rem; }
.doc-stars { font-size: .8667rem; color: var(--muted); white-space: nowrap; }

.active-label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--success-text);
  padding: .3em .7em;
  background: var(--success-soft);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.doc-empty { padding: 1.25rem 1rem; background: var(--surface-2); border-radius: var(--radius-md); text-align: center; }
.doc-empty-title { font-weight: 600; color: var(--text); margin: 0 0 .2rem; font-size: .9333rem; }
.doc-empty-text { color: var(--muted); font-size: .8667rem; margin: 0; }

/* Upload drop zone */
.upload-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  padding: 1.5rem 1rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration), background var(--duration);
  margin: 0;
  width: 100%;
}
.upload-zone:hover, .upload-zone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone.has-file { border-style: solid; border-color: var(--accent); }
.upload-zone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-zone-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--card); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); margin-bottom: .35rem; }
.upload-zone-icon svg { width: 18px; height: 18px; }
.upload-zone-title { font-size: .9333rem; font-weight: 500; color: var(--text); }
.upload-zone-link { color: var(--accent-text); font-weight: 600; }
.upload-zone-hint { font-size: .8rem; color: var(--muted); }
.upload-zone-file { font-size: .8667rem; font-weight: 600; color: var(--accent-text); margin-top: .25rem; word-break: break-all; }

.analyze-row { border-top: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.analyze-btn { display: inline-flex; align-items: center; gap: .45rem; }
.analyze-btn:disabled { cursor: not-allowed; }
.resume-ai-buttons { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.resume-ai-hint { font-size: .8rem; }
.resume-ai-powered { color: var(--text-2); font-size: .75rem; margin-left: .35rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .resume-ai-buttons, .resume-ai-buttons form, .resume-ai-buttons .analyze-btn { width: 100%; }
  .resume-ai-buttons .analyze-btn { justify-content: center; }
}
.analyze-spinner { width: 13px; height: 13px; border-width: 2px; }

.form-card-inset { box-shadow: none; background: var(--surface-2); }
.form-section-title--sm { font-size: .9333rem; }
.danger-zone-card { box-shadow: inset 0 0 0 1px rgba(255,69,58,.25), var(--shadow-sm); }

/* Tag input — chip system (skills / target roles) */
.tag-manager { display: flex; flex-direction: column; gap: .7rem; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tag-manager .tag-cloud { padding-top: .7rem; border-top: 1px solid var(--border); }
.tag-manager .tag-cloud:empty { display: none; padding-top: 0; border-top: none; }

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: .8667rem;
  font-weight: 500;
  line-height: 1;
  padding: .45em .5em .45em .85em;
  white-space: nowrap;
  transition: background var(--duration) var(--ease);
}
.tag-item:hover { background: rgba(10,132,255,.16); }
.tag-cloud > span.tag-item { padding-right: .85em; }
.tag-item-label { letter-spacing: -.01em; }

/* Chips a resume auto-fill just added: one soft pulse so the user can spot what changed. */
@keyframes tag-added-flash {
  0%   { background: var(--accent); color: #fff; transform: scale(1.06); box-shadow: 0 0 0 0 rgba(10,132,255,.45); }
  60%  { background: var(--accent); color: #fff; transform: scale(1); box-shadow: 0 0 0 8px rgba(10,132,255,0); }
  100% { background: var(--accent-soft); color: var(--accent-text); transform: scale(1); box-shadow: none; }
}
.tag-item-new { animation: tag-added-flash 1.6s var(--ease) both; }
.tag-item-new button { color: inherit; }

/* The chip a duplicate collided with: a short shake plus an amber pulse. */
@keyframes tag-dupe-flash {
  0%   { background: var(--warning-soft); box-shadow: 0 0 0 0 rgba(255,159,10,.5); transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-2px); box-shadow: 0 0 0 7px rgba(255,159,10,0); }
  80%  { transform: translateX(0); background: var(--warning-soft); }
  100% { background: var(--accent-soft); box-shadow: none; }
}
.tag-item-dupe { animation: tag-dupe-flash 1.2s var(--ease) both; }
.tag-dupe-msg { width: 100%; }
@media (prefers-reduced-motion: reduce) { .tag-item-new, .tag-item-dupe { animation-duration: .01s; } }

.tag-item button {
  background: rgba(10,132,255,.14);
  border: none;
  color: var(--accent-text);
  font-size: .65rem;
  line-height: 1;
  width: 16px; height: 16px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  opacity: .8;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.tag-item button:hover { opacity: 1; background: var(--accent); color: #fff; }

.tag-input-row { display: flex; gap: .5rem; flex-wrap: nowrap; align-items: center; }

.tag-text-input {
  flex: 0 1 260px;
  min-width: 0;
  height: 38px;
  font-size: .9333rem;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 .8rem;
  color: var(--text);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.tag-text-input::placeholder { color: var(--muted-2); }
.tag-text-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
html[data-theme="dark"] .tag-text-input { background: var(--surface-3); }

.tag-add-btn {
  height: 38px;
  padding: 0 1rem;
  font-size: .8667rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.tag-add-btn:hover { background: var(--accent); color: #fff; }
@media (max-width: 575.98px) { .tag-text-input { flex: 1 1 auto; } .role-combobox-wrap { flex: 1 1 auto; display: block; } }

/* Inline match result (on Create page) */
.inline-match-card {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-top: .85rem;
}

.match-result-title {
  font-size: .8667rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: .8rem;
}

.match-verdict-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.match-score-big {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.match-score-big--tier-5 { color: var(--success-text); }
.match-score-big--tier-4 { color: var(--accent-text); }
.match-score-big--tier-3 { color: var(--warning-text); }
.match-score-big--tier-2 { color: var(--warning-text); }
.match-score-big--tier-1 { color: var(--danger-text); }

.match-rec-badge {
  display: inline-flex;
  align-items: center;
  font-size: .76rem;
  font-weight: 600;
  padding: .32em .8em;
  border-radius: var(--radius-pill);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0 !important;
}

.match-tier-5 { color: var(--success-text); background: var(--success-soft); }
.match-tier-4 { color: var(--accent-text);  background: var(--accent-soft); }
.match-tier-3 { color: var(--warning-text); background: var(--warning-soft); }
.match-tier-2 { color: var(--warning-text); background: var(--warning-soft); }
.match-tier-1 { color: var(--danger-text);  background: var(--danger-soft); }

.match-verdict-desc {
  font-size: .9333rem;
  color: var(--text);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.match-summary-text {
  font-size: .9333rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 .85rem;
  padding: .85rem 1rem;
  background: var(--card);
  border-radius: var(--radius-sm);
  border-top: 0;
  box-shadow: var(--shadow-xs);
}

.match-skills-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: .25rem;
  border-top: 0;
}
/* Score ring (smaller variant for AI score on profile) */
.score-ring-sm { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.score-ring-sm .score-svg { width: 100px; height: 100px; }
.score-ring-sm .score-number { font-size: 1.6rem; }

/* Stat mini cards on profile (legacy, still used by public page fallbacks) */
.mini-stat {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  text-align: center;
}
.mini-stat-num   { font-size: 1.4667rem; font-weight: 600; letter-spacing: -.03em; }
.mini-stat-label { font-size: .8rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ── Resume Match ─────────────────────────────────────── */
.match-upload-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 2.25rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration), background var(--duration);
  background: var(--surface-2);
  height: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.match-upload-zone:hover,
.match-upload-zone.has-file { border-color: var(--primary); background: var(--purple-soft); }

.match-file-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.match-upload-icon {
  width: 44px; height: 44px;
  background: var(--accent-soft);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .75rem;
  font-size: .7rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: .02em;
  flex-shrink: 0;
}

.match-upload-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.match-upload-hint { font-size: .75rem; color: var(--muted); margin: 0; }

/* Score card */
.match-score-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.match-score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  flex-shrink: 0;
}

/* SVG ring */
.score-ring-wrap {
  position: relative;
  width: 140px; height: 140px;
  flex-shrink: 0;
}

.score-svg {
  width: 140px; height: 140px;
  transform: rotate(-90deg);
}

.score-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.score-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dashoffset: 339.29;
  animation: scoreRingDraw 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: .3s;
}

.score-fill--apply   { stroke: var(--success); }
.score-fill--maybe   { stroke: var(--warning); }
.score-fill--noapply { stroke: var(--danger); }

.score-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: .1rem;
  line-height: 1;
}

.score-number {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
}

.score-unit {
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
}

/* Recommendation badge */
.rec-badge {
  display: inline-flex;
  align-items: center;
  padding: .3em 1.1em;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rec-badge--apply   { background: var(--success-soft); color: var(--success-text); border: 1px solid rgba(48,209,88,.35); }
.rec-badge--maybe   { background: var(--warning-soft); color: var(--warning-text); border: 1px solid rgba(255,159,10,.35); }
.rec-badge--noapply { background: var(--danger-soft); color: var(--danger-text); border: 1px solid rgba(255,69,58,.35); }

.match-score-right { flex: 1; min-width: 0; }

.match-score-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .65rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

.match-summary {
  font-size: .9rem;
  line-height: 1.72;
  color: var(--text);
  margin: 0;
}

.match-skills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: .28em .75em;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  border: 0 !important;
}

.skill-tag--match   { background: var(--success-soft); color: var(--success-text); }
.skill-tag--missing { background: var(--danger-soft);  color: var(--danger-text); }

.skill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  margin-left: .4rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Strengths */
.match-strengths-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.match-strengths-list li {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text);
  padding-left: 1.1rem;
  position: relative;
}

.match-strengths-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* Error banner */
.match-error-banner {
  background: var(--danger-soft);
  border: 1px solid rgba(255,69,58,.35);
  border-radius: var(--radius-sm);
  padding: .85rem 1.1rem;
  color: var(--danger-text);
  font-size: .875rem;
}

@media (max-width: 575px) {
  .match-score-card { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .score-ring-wrap  { width: 120px; height: 120px; }
  .score-svg        { width: 120px; height: 120px; }
  .score-number     { font-size: 1.9rem; }
}

/* ── Cover Letter Generator ──────────────────────────── */
.cl-output {
  font-family: var(--font);
  font-size: .9333rem;
  line-height: 1.8;
  min-height: 440px;
  resize: vertical;
  color: var(--text);
  padding: 1.25rem;
  border-radius: var(--radius-md);
}
.word-count { font-size: .8rem; font-weight: 500; color: var(--muted); }
.cl-info-banner {
  background: var(--accent-surface);
  border: 0;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font-size: .9333rem;
  color: var(--accent-text);
}
.cl-info-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cl-info-link:hover { color: var(--accent-h); }
.cl-improve-box { border-top: 1px solid var(--border); padding-top: 1rem; }
.improve-input { min-width: 220px; }
.cl-success-banner {
  background: var(--success-soft);
  border: 0;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font-size: .9333rem;
  color: var(--success-text);
}

/* ── Toast ───────────────────────────────────────────── */
.app-toast {
  position: fixed;
  top: 4.4rem; /* clear the sticky navbar */
  left: 50%;
  right: auto;
  z-index: 9999;
  background: rgba(251,251,253,.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--text);
  padding: .7rem 1rem .7rem .9rem;
  border-radius: 14px;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .9333rem;
  font-weight: 500;
  width: max-content; /* otherwise a left:50% box only gets half the viewport and long messages wrap into a narrow column on phones */
  max-width: min(420px, calc(100vw - 2rem));
  opacity: 0;
  transform: translate(-50%, -.75rem) scale(.98);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
html[data-theme="dark"] .app-toast { background: rgba(44,44,46,.88); }

.app-toast.app-toast-show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

.app-toast-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.app-toast-success .app-toast-dot { background: var(--success); }
.app-toast-error   .app-toast-dot,
.app-toast-danger  .app-toast-dot { background: var(--danger); }
.app-toast-warning .app-toast-dot { background: var(--warning); }
.app-toast-info    .app-toast-dot { background: var(--accent); }

.app-toast-msg { flex: 1; line-height: 1.4; }

.app-toast-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 .1rem;
  cursor: pointer;
  margin-left: .25rem;
  flex-shrink: 0;
  transition: color var(--duration);
  border-radius: 50%;
}

.app-toast-close:hover { color: var(--text); }

/* ── Filter Bar ──────────────────────────────────────── */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: .9333rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
  white-space: nowrap;
}
.filter-pill:hover { color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.filter-pill.active { background: var(--text); color: var(--bg); font-weight: 600; }
.filter-pill-count {
  font-size: .8rem;
  font-weight: 600;
  padding: .05em .5em;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.06);
  color: inherit;
}
.filter-pill.active .filter-pill-count { background: rgba(255,255,255,.18); }
/* .06, not .1: at .1 the inherited --text-2 count measured 4.41:1 on its chip (color-audit, 2026-09-26); .06 gives 4.99. */
html[data-theme="dark"] .filter-pill-count { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .filter-pill.active .filter-pill-count { background: rgba(0,0,0,.18); }
.filter-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; }
.filter-pill-saved     .filter-pill-dot { background: var(--muted-2); }
.filter-pill-applied   .filter-pill-dot { background: var(--accent); }
.filter-pill-interview .filter-pill-dot { background: var(--warning); }
.filter-pill-offer     .filter-pill-dot { background: var(--success); }
.filter-pill-rejected  .filter-pill-dot { background: var(--danger); }

.filter-bar {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  min-width: 140px;
}
.filter-group-search { flex: 2.2; min-width: 200px; }

.filter-label {
  font-size: .8667rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

.filter-search-wrap { position: relative; }
.filter-search-icon {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted-2); pointer-events: none;
}
.filter-search-wrap .form-control { padding-left: 2.2rem; }

.filter-bar .form-control,
.filter-bar .form-select { height: 40px; font-size: .9333rem; padding-top: .35rem; padding-bottom: .35rem; }

.filter-apply-btn { height: 40px; white-space: nowrap; }
@media (max-width: 575.98px) {
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
}

/* ── Bulk Action Bar ─────────────────────────────────── */
.bulk-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  right: auto;
  z-index: 1000;
  width: max-content;
  max-width: calc(100vw - 2rem);
  background: rgba(29,29,31,.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  padding: .6rem .6rem .6rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06);
  border: 0;
  transform: translate(-50%, 1rem) scale(.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .22s var(--ease), opacity .22s var(--ease), visibility 0s .22s;
}
html[data-theme="dark"] .bulk-bar { background: rgba(44,44,46,.9); }

.bulk-bar.show {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .22s var(--ease), opacity .22s var(--ease), visibility 0s 0s;
}

.bulk-bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bulk-count {
  font-weight: 600;
  font-size: .9333rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.bulk-status-select {
  background-color: rgba(255,255,255,.12) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: .8667rem;
  height: 34px;
  padding: 0 2rem 0 .8rem;
  border-radius: var(--radius-pill) !important;
  min-width: 170px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m3 6 5 5 5-5'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 12px;
}
.bulk-status-select:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.25) !important; }
.bulk-status-select option { background: #1D1D1F; color: #fff; }

.bulk-bar .btn { height: 34px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.bulk-bar .btn-outline-light { background: rgba(255,255,255,.14); color: #fff; }
.bulk-bar .btn-outline-light:hover { background: rgba(255,255,255,.24); color: #fff; }
.bulk-bar .btn-danger { background: #DC2F27; color: #fff; }

.bulk-deselect-link {
  font-size: .8667rem;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none;
  padding-inline: .5rem;
}
.bulk-deselect-link:hover { color: #fff !important; text-decoration: none; }

@media (max-width: 575.98px) {
  .bulk-bar { left: 1rem; right: 1rem; width: auto; transform: translateY(1rem); border-radius: var(--radius); padding: .75rem .9rem; }
  .bulk-bar.show { transform: translateY(0); }
  .bulk-bar-inner { justify-content: space-between; }
  .bulk-actions { margin-left: 0; width: 100%; }
  .bulk-status-group { width: 100%; }
  .bulk-status-select { flex: 1; min-width: 0; }
}

/* ── Confirm dialog ──────────────────────────────────── */
.app-confirm-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility 0s .2s;
  padding: 1rem;
}
.app-confirm-overlay.active { opacity: 1; visibility: visible; transition: opacity .2s var(--ease); }
.app-confirm {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 380px;
  padding: 1.75rem 1.5rem 1.35rem;
  text-align: center;
  animation: fadeSlideUp .2s var(--ease) both;
}
.app-confirm-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--danger-soft); color: var(--danger-text);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .9rem;
}
.app-confirm-icon svg { width: 24px; height: 24px; }
.app-confirm-title { font-size: 1.1333rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .4rem; color: var(--text); }
.app-confirm-text { font-size: .9333rem; color: var(--muted); margin: 0 0 1.25rem; line-height: 1.5; }
.app-confirm-actions { display: flex; gap: .5rem; }
.app-confirm-actions .btn { flex: 1; }

/* ── Duplicate Warning ───────────────────────────────── */
.duplicate-warning {
  background: var(--warning-soft);
  border: 0;
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  font-size: .9333rem;
  color: var(--warning-text);
}

/* ── Bookmarklet install page (Profile/Bookmarklet) ───────────── */
.bm-drop-zone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  padding: 1.5rem 1.25rem;
  margin: .25rem 0 1rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.bookmarklet-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.35rem;
  font-size: 1rem;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: element;
  box-shadow: 0 6px 18px rgba(10,132,255,.28);
}
.bookmarklet-btn:active, .bookmarklet-btn.is-dragging { cursor: grabbing; transform: scale(.98); }
.bm-drop-hint {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--muted); font-size: .8667rem; font-weight: 500;
}
.bm-bar-tip .kbd { margin: 0 .1rem; }

.bm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.bm-step { display: flex; gap: .85rem; align-items: flex-start; }
.bm-step .onboarding-step-icon { margin-top: .1rem; }
.bm-step-title { font-weight: 600; color: var(--text); font-size: .9333rem; }
.bm-step-text  { color: var(--muted); font-size: .8667rem; line-height: 1.5; }

.bm-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.5;
  resize: vertical;
  word-break: break-all;
  background: var(--surface-2);
}
.bm-note { color: var(--text); font-size: .9333rem; line-height: 1.55; }
.bm-note code {
  font-size: .85em;
  background: var(--surface-2);
  padding: .1em .4em;
  border-radius: 6px;
  color: var(--accent-text);
  word-break: break-all;
}
.quick-action-hint { color: var(--text-2); font-size: .8rem; font-weight: 400; margin-left: .3rem; }

@media (max-width: 480px) {
  .bm-drop-zone { padding: 1.1rem 1rem; }
  .bookmarklet-btn { width: 100%; justify-content: center; }
}

/* Create page banner shown when the form was pre-filled by the bookmarklet (/Capture). */
.capture-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: .85rem 1.05rem;
  font-size: .9333rem;
  color: var(--accent-text);
  line-height: 1.45;
}
.capture-banner strong { font-weight: 600; }
.capture-banner-dot {
  width: 9px; height: 9px; margin-top: .45em;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Interview Prep ──────────────────────────────────── */
.company-avatar--lg { width: 44px; height: 44px; font-size: .9rem; border-radius: 12px; }
.prep-company { font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: -.01em; }
.prep-role { color: var(--muted); font-size: .8667rem; }

.prep-category-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.prep-category-badge {
  display: inline-flex;
  align-items: center;
  padding: .32em .8em;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border: 0 !important;
}
.prep-cat-technical  { background: var(--accent-soft);  color: var(--accent-text); }
.prep-cat-behavioral { background: var(--purple-soft);  color: var(--purple-text); }
.prep-cat-company    { background: var(--success-soft); color: var(--success-text); }


/* ── Salary insight card ──────────────────────────────── */
.salary-insight-card {
  background: var(--accent-soft);
  border: 0;
  border-radius: var(--radius-md);
  padding: .7rem 1rem;
  font-size: .9333rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.salary-insight-range { font-weight: 600; color: var(--accent-text); }
.salary-insight-note { color: var(--muted); }

/* ── Misc utilities ──────────────────────────────────── */
.text-muted { color: var(--muted) !important; }



/* ── Button hover polish ─────────────────────────────── */
.btn-dark {
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
              transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn-dark:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.btn-outline-primary,
.btn-outline-secondary {
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn-outline-primary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.1);
}

/* ── AI shimmer loading ──────────────────────────────── */
.ai-shimmer-wrap {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .5rem 0;
}
.shimmer-bar    { height: 13px; }
.shimmer-bar.w-full  { width: 100%; }
.shimmer-bar.w-three { width: 75%; }
.shimmer-bar.w-half  { width: 50%; }

/* ── Auth form entrance ──────────────────────────────── */
.auth-card { animation: fadeSlideUp .4s var(--ease) both; }

/* ══════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════ */


/* Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--surface-3);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(10,132,255,.2);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
html[data-theme="dark"] .form-label { color: var(--text); }

/* Table — Bootstrap 5 sets bg via --bs-table-bg on <td>, so we must
   override both the CSS variable AND target td/th directly. */
html[data-theme="dark"] .app-table-wrapper .table {
  --bs-table-bg: var(--card);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-striped-bg: rgba(255,255,255,.025);
  color: var(--text);
}
html[data-theme="dark"] .app-table-wrapper .table thead th {
  background-color: var(--surface-2);
  color: var(--muted);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .app-table-wrapper .table tbody td,
html[data-theme="dark"] .app-table-wrapper .table tbody th {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .app-table-wrapper .table tbody tr:hover td,
html[data-theme="dark"] .app-table-wrapper .table tbody tr:hover th {
  background-color: rgba(255,255,255,.04);
}

/* Cards that use hardcoded backgrounds */
html[data-theme="dark"] .doc-row               { background: var(--surface-2); }
html[data-theme="dark"] .doc-row:hover         { background: var(--surface-3); }
html[data-theme="dark"] .doc-row.doc-active    { background: rgba(10,132,255,.15); border-color: rgba(10,132,255,.35); }
html[data-theme="dark"] .doc-version-badge     { background: rgba(10,132,255,.2); color: var(--accent-text); }
html[data-theme="dark"] .doc-active .doc-version-badge { background: var(--primary); color: #fff; }
html[data-theme="dark"] .active-label          { background: rgba(10,132,255,.2); color: var(--accent-text); }
html[data-theme="dark"] .tag-item              { background: rgba(10,132,255,.14); color: var(--accent-text); border-color: transparent; }
html[data-theme="dark"] .tag-item:hover         { background: rgba(10,132,255,.2); }
html[data-theme="dark"] .tag-item button        { background: rgba(10,132,255,.16); color: var(--accent-text); }
html[data-theme="dark"] .tag-item button:hover  { background: rgba(10,132,255,.32); }
html[data-theme="dark"] .tag-text-input         { border-bottom-color: var(--border); color: var(--text); }
html[data-theme="dark"] .tag-add-btn            { background: rgba(10,132,255,.16); color: var(--accent-text); }
html[data-theme="dark"] .tag-add-btn:hover      { background: var(--primary); color: #fff; }

/* Score track in dark mode */
html[data-theme="dark"] .score-track { stroke: var(--border-strong); }

/* Feature cards on home page */
html[data-theme="dark"] .feature-card { background: var(--card); border-color: var(--border); }

/* Match upload zone */
html[data-theme="dark"] .match-upload-zone         { background: var(--surface-2); }
html[data-theme="dark"] .match-upload-zone:hover,
html[data-theme="dark"] .match-upload-zone.has-file { background: rgba(10,132,255,.12); }
html[data-theme="dark"] .match-upload-icon         { background: rgba(10,132,255,.2); color: var(--accent-text); }

/* Cover letter / info banners */
html[data-theme="dark"] .cl-info-banner    { background: rgba(10,132,255,.12); border-color: rgba(10,132,255,.3); color: var(--accent-text); }
html[data-theme="dark"] .cl-success-banner { background: rgba(48,209,88,.1); border-color: rgba(48,209,88,.3); color: var(--success); }

/* Duplicate warning */
html[data-theme="dark"] .duplicate-warning { background: rgba(255,159,10,.1); border-color: rgba(255,159,10,.3); color: var(--warning); }

/* Match error banner */
html[data-theme="dark"] .match-error-banner { background: rgba(255,69,58,.1); border-color: rgba(255,69,58,.3); color: var(--danger); }

/* Rec badges */
html[data-theme="dark"] .rec-badge--apply   { background: rgba(48,209,88,.12); color: var(--success); border-color: rgba(48,209,88,.3); }
html[data-theme="dark"] .rec-badge--maybe   { background: rgba(255,159,10,.12); color: var(--warning); border-color: rgba(255,159,10,.3); }
html[data-theme="dark"] .rec-badge--noapply { background: rgba(255,69,58,.12); color: var(--danger); border-color: rgba(255,69,58,.3); }

/* Status badges */
html[data-theme="dark"] .badge-saved     { background: rgba(142,142,147,.12); color: var(--text-2); border-color: var(--text-2); }
html[data-theme="dark"] .badge-applied   { background: rgba(10,132,255,.12); color: var(--accent-text); border-color: var(--accent-text); }
html[data-theme="dark"] .badge-interview { background: rgba(255,159,10,.12); color: var(--warning); border-color: var(--warning-text); }
html[data-theme="dark"] .badge-offer     { background: rgba(48,209,88,.12); color: var(--success); border-color: var(--success-text); }
/* Rejected reads --danger-text, not --danger: bright red on its own dark wash measured 4.05–4.39:1 (color-audit, 2026-09-26). */
html[data-theme="dark"] .badge-rejected  { background: rgba(255,69,58,.12); color: var(--danger-text); border-color: var(--danger-text); }

/* Match dot dark mode boost */
html[data-theme="dark"] .match-dot--amber  { background: var(--warning); box-shadow: 0 0 0 2px rgba(255,159,10,.35); }

/* Match tier badge dark mode */
html[data-theme="dark"] .match-tier-3 { color: var(--warning); background: rgba(255,159,10,.12); border-color: rgba(255,159,10,.3); }

/* Skill tags */
html[data-theme="dark"] .skill-tag--match   { background: rgba(48,209,88,.12); color: var(--success); border-color: rgba(48,209,88,.3); }
html[data-theme="dark"] .skill-tag--missing { background: rgba(255,69,58,.12); color: var(--danger-text); border-color: rgba(255,69,58,.3); }

/* Interview prep badges */
html[data-theme="dark"] .prep-cat-technical  { background: rgba(10,132,255,.12); color: var(--accent-text); border-color: rgba(10,132,255,.3); }
html[data-theme="dark"] .prep-cat-behavioral { background: rgba(191,90,242,.12); color: var(--purple); border-color: rgba(191,90,242,.3); }
html[data-theme="dark"] .prep-cat-company    { background: rgba(48,209,88,.12); color: var(--success); border-color: rgba(48,209,88,.3); }

/* Shimmer bars */
html[data-theme="dark"] .shimmer-bar {
  background: linear-gradient(90deg, var(--border-strong) 25%, #3A3A3C 50%, var(--border-strong) 75%);
  background-size: 200% 100%;
}

/* Autofill flash */
html[data-theme="dark"] .form-control.ai-autofilled,
html[data-theme="dark"] .form-select.ai-autofilled {
  animation: ai-autofill-flash-dark 2s ease forwards;
}
@keyframes ai-autofill-flash-dark {
  0%   { background: #1F2A44; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.2); }
  60%  { background: #1F2A44; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.2); }
  100% { background: var(--surface-3); border-color: var(--border); box-shadow: none; }
}

/* Auth pages — keep white panel styling, skip dark overrides */
html[data-theme="dark"] .auth-panel-right { background: var(--card); }
html[data-theme="dark"] .auth-panel-right .form-control,
html[data-theme="dark"] .auth-panel-right .form-select { background: var(--surface-3); color: var(--text); border-color: var(--border); }

/* ── Dark mode toggle button ──────────────────────────── */
.dark-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  border: 0;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--duration), color var(--duration), transform var(--duration);
  flex-shrink: 0;
}
.dark-toggle:hover { background: rgba(0,0,0,.09); color: var(--text); }
.dark-toggle:active { transform: scale(.94); }
html[data-theme="dark"] .dark-toggle { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .dark-toggle:hover { background: rgba(255,255,255,.14); }
.dark-toggle svg   { width: 16px; height: 16px; display: block; }

/* Show sun in dark mode, moon in light mode */
.dark-toggle .icon-sun  { display: none; }
.dark-toggle .icon-moon { display: block; }
html[data-theme="dark"] .dark-toggle .icon-sun  { display: block; }
html[data-theme="dark"] .dark-toggle .icon-moon { display: none; }

/* ── Keyboard Shortcuts Modal ─────────────────────────── */
.kbd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility 0s .2s;
}
.kbd-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s var(--ease);
}
.kbd-modal {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 380px;
  margin: 1rem;
  animation: fadeSlideUp .2s var(--ease) both;
}
.kbd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.kbd-modal-title { font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: -.01em; }
.kbd-modal-close {
  background: rgba(0,0,0,.05);
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration), background var(--duration);
}
.kbd-modal-close:hover { color: var(--text); background: rgba(0,0,0,.09); }
html[data-theme="dark"] .kbd-modal-close { background: rgba(255,255,255,.08); }
.kbd-modal-body {
  padding: .85rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.kbd-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .9333rem;
  color: var(--text);
}
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: .15em .5em;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  font-family: inherit;
}
.kbd-hint-footer {
  font-size: .8rem;
  color: var(--muted);
  margin-left: 1rem;
}
.kbd-inline {
  display: inline-flex;
  align-items: center;
  padding: .05em .4em;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Status Icons ─────────────────────────────────────── */
.status-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ── Breadcrumb ───────────────────────────────────────── */
.breadcrumb-nav { margin-bottom: .85rem; }
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .8667rem;
  color: var(--muted);
}
.breadcrumb-list li             { display: flex; align-items: center; gap: .4rem; }
.breadcrumb-list li + li::before { content: '›'; color: var(--muted-2); font-size: 1rem; line-height: 1; }
.breadcrumb-list a              { color: var(--muted); text-decoration: none; transition: color var(--duration); }
.breadcrumb-list a:hover        { color: var(--accent-text); }
.breadcrumb-list li:last-child  { color: var(--text); font-weight: 500; }

/* ── Analytics Section ────────────────────────────────── */
.stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .stats-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-chart     { grid-column: span 8; }
.dash-pipeline  { grid-column: span 4; }
.dash-success   { grid-column: span 3; }
.dash-companies { grid-column: span 5; }
.dash-actions   { grid-column: span 4; }
@media (max-width: 991.98px) {
  .dash-chart, .dash-pipeline { grid-column: span 12; }
  .dash-success { grid-column: span 4; }
  .dash-companies { grid-column: span 8; }
  .dash-actions { grid-column: span 12; }
}
@media (max-width: 575.98px) {
  .dash-grid > * { grid-column: span 12; }
}

/* Resume performance card (dashboard) */
.resume-perf-card { margin-bottom: 1.5rem; }
.practice-stats-card { margin-bottom: 1.5rem; }
.practice-interview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.practice-interview-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-size: .9333rem;
}
.practice-interview-item:first-child { padding-top: 0; border-top: 0; }
.practice-interview-name { min-width: 0; color: var(--text); }
.resume-perf-takeaway { font-size: .9333rem; color: var(--text-2); margin: 0 0 .85rem; }
.resume-perf-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.resume-perf-table th { font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.resume-perf-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.resume-perf-table tbody tr:last-child td { border-bottom: 0; }
.resume-perf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resume-perf-table .rate-col { min-width: 150px; }
.resume-perf-name { display: flex; align-items: center; gap: .5rem; min-width: 160px; }
.resume-perf-label { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-perf-rate { display: flex; align-items: center; gap: .6rem; }
.resume-perf-pct { color: var(--text-2); font-size: .8667rem; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.resume-perf-table tr.is-low td { opacity: .5; }
.resume-perf-table tr.is-none .resume-perf-label { color: var(--muted); font-style: italic; }
@media (max-width: 575.98px) {
  .resume-perf-table { font-size: .8467rem; }
  .resume-perf-table th, .resume-perf-table td { padding-inline: .35rem; }
  .resume-perf-name { min-width: 130px; }
  .resume-perf-table .rate-col { min-width: 120px; }
}

/* Skills you're missing most (dashboard, skill-gap.js) */
.dash-skillgap { grid-column: span 12; }
.skill-gap-title { display: flex; align-items: center; gap: .35rem; }
.skill-gap-title h3 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.skill-gap-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: help;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.skill-gap-info svg { width: 16px; height: 16px; }
.skill-gap-info:hover { color: var(--text); background: var(--surface-2); }
.skill-gap-info:focus-visible { outline: 0; box-shadow: var(--focus-ring); color: var(--text); }
.skill-gap-note { font-size: .8667rem; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-sm); padding: .45rem .7rem; margin: 0 0 .85rem; }
.skill-gap-roles { margin-bottom: .85rem; }
.skill-gap-roles .filter-pill { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; background: var(--surface-2); box-shadow: none; white-space: normal; text-align: left; }
.skill-gap-roles .filter-pill.active { background: var(--text); color: var(--bg); }
.skill-gap-roles .filter-pill:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.skill-gap-takeaway { font-size: .9333rem; color: var(--text-2); margin: 0 0 .85rem; }
.skill-gap-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.skill-gap-chart { position: relative; width: 100%; max-width: 100%; min-height: 40px; }
.skill-gap-chart canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.skill-gap-hits { position: absolute; inset: 0; }
.skill-gap-hit-row { position: absolute; left: 0; right: 0; }
.skill-gap-hit {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.skill-gap-hit:hover { background: rgba(var(--accent-rgb), .06); }
.skill-gap-hit.is-selected { background: var(--accent-soft); }
.skill-gap-hit:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.skill-gap-detail { min-width: 0; border-left: 1px solid var(--border); padding-left: 1.25rem; align-self: stretch; }
.skill-gap-hint { font-size: .8667rem; color: var(--muted); margin: .35rem 0 0; }
.skill-gap-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.skill-gap-panel-title { font-weight: 600; color: var(--text); }
.skill-gap-panel-sub { font-size: .8667rem; color: var(--text-2); }
.skill-gap-panel-close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2); cursor: pointer;
}
.skill-gap-panel-close svg { width: 14px; height: 14px; }
.skill-gap-panel-close:hover { color: var(--text); background: var(--surface-3); }
.skill-gap-panel-close:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.skill-gap-apps { list-style: none; margin: 0; padding: 0; }
.skill-gap-apps li + li { border-top: 1px solid var(--border); }
.skill-gap-app { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .45rem; margin-inline: -.45rem; border-radius: var(--radius-sm); text-decoration: none; }
.skill-gap-app:hover { background: var(--surface-2); }
.skill-gap-app:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.skill-gap-app-company { font-weight: 500; color: var(--accent-text); font-size: .9333rem; }
.skill-gap-app-role { font-size: .8667rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-gap-more { font-size: .8667rem; color: var(--muted); margin: .4rem 0 0; }
@media (max-width: 991.98px) {
  .skill-gap-body { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .skill-gap-detail { border-left: 0; padding-left: 0; }
  .skill-gap-hint { display: none; }
  .skill-gap-panel { border-top: 1px solid var(--border); padding-top: .75rem; }
}

.analytics-strip {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.analytics-card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  flex: 1;
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.analytics-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.analytics-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.analytics-card-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: .15rem;
}
.analytics-card-value {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--text);
  line-height: 1;
  margin-top: .6rem;
  font-variant-numeric: tabular-nums;
}
.analytics-card-value.value-success { color: var(--success-text); }
.analytics-card-unit { font-size: 1.1rem; font-weight: 600; margin-left: .1rem; color: var(--muted); }
.analytics-card-sub {
  font-size: .8667rem;
  color: var(--muted);
  margin-top: .35rem;
}

/* Chart */
.chart-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 180px;
}
.chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.chart-legend {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8667rem;
  color: var(--muted);
  white-space: nowrap;
  padding-top: .15rem;
}
.chart-legend-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); display: inline-block; }

/* Pipeline funnel */
.funnel { display: flex; flex-direction: column; gap: .7rem; }
.funnel-row { display: grid; grid-template-columns: 78px 1fr 28px; align-items: center; gap: .75rem; font-size: .9333rem; }
.funnel-label { color: var(--text); font-weight: 500; }
.funnel-bar-wrap { height: 10px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.funnel-bar { height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width .5s var(--ease); }
.funnel-count { color: var(--muted); font-size: .8667rem; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-saved     .funnel-bar { background: var(--muted-2); }
.funnel-applied   .funnel-bar { background: var(--accent); }
.funnel-interview .funnel-bar { background: var(--warning); }
.funnel-offer     .funnel-bar { background: var(--success); }
.funnel-rejected  .funnel-bar { background: var(--danger); }

/* Top companies */
.top-companies-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.top-company-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9333rem;
}
.top-company-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.top-company-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width .4s var(--ease);
}
.top-company-name  { color: var(--text); font-weight: 500; min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-company-count { color: var(--muted); font-size: .8667rem; flex-shrink: 0; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.quick-action {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .6rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9333rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.quick-action:hover { background: rgba(0,0,0,.04); color: var(--text); }
html[data-theme="dark"] .quick-action:hover { background: rgba(255,255,255,.06); }
.quick-action::after { content: '›'; margin-left: auto; color: var(--muted-2); font-size: 1.1rem; line-height: 1; }
.quick-action-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quick-action-icon svg { width: 16px; height: 16px; }
.quick-action-icon--accent  { background: var(--accent-soft);  color: var(--accent-text); }
.quick-action-icon--purple  { background: var(--purple-soft);  color: var(--purple-text); }
.quick-action-icon--success { background: var(--success-soft); color: var(--success-text); }
.quick-action-icon--warning { background: var(--warning-soft); color: var(--warning-text); }
@media (min-width: 576px) and (max-width: 991.98px) { .quick-actions { grid-template-columns: 1fr 1fr; } }

/* ── Alert / Reminder Sections ───────────────────────── */
.alert-section { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.alert-card {
  border-radius: var(--radius-md);
  padding: .9rem 1.15rem;
  font-size: .9333rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border: 0;
}
.alert-card--amber { background: var(--warning-soft); color: var(--warning-text); }
.alert-card--blue  { background: var(--accent-soft);  color: var(--accent-text); }
.alert-card-title { font-weight: 600; margin-bottom: .1rem; }
.alert-item { font-size: .8667rem; opacity: .92; }

/* ── New-user onboarding banner ───────────────────────── */
.onboarding-banner {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.onboarding-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.onboarding-header h6 { color: var(--text); font-weight: 600; font-size: 1.1333rem; letter-spacing: -.01em; margin: 0 0 .2rem; }
.onboarding-header p { color: var(--muted); font-size: .9333rem; margin: 0; }
.onboarding-close {
  background: rgba(0,0,0,.05);
  border: none;
  color: var(--muted);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration), color var(--duration);
}
.onboarding-close:hover { background: rgba(0,0,0,.09); color: var(--text); }
html[data-theme="dark"] .onboarding-close { background: rgba(255,255,255,.08); }
.onboarding-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 767.98px) { .onboarding-checklist { grid-template-columns: 1fr; } }
.onboarding-step {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  padding: .8rem .9rem;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: background var(--duration), transform var(--duration);
}
.onboarding-step:hover { background: var(--surface-3); }
.onboarding-step-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .8rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.onboarding-step.is-done .onboarding-step-icon { background: var(--success); color: #fff; }
.onboarding-step-text { color: var(--text); font-size: .9333rem; font-weight: 500; }
.onboarding-step.is-done .onboarding-step-text { color: var(--muted); text-decoration: line-through; }
.onboarding-step-arrow { margin-left: auto; color: var(--muted-2); font-size: 1.1rem; line-height: 1; }

/* ── Empty State Illustration ─────────────────────────── */
.empty-state-illustrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.empty-illustration {
  width: 120px;
  height: 100px;
  margin-bottom: 1.25rem;
}
.empty-state-title {
  font-size: 1.1333rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .35rem;
}
.empty-state-desc { font-size: .9333rem; color: var(--muted); margin-bottom: 1.25rem; max-width: 34ch; }

/* SVG fill overrides for dark mode */
html[data-theme="dark"] .empty-illu-bg  { fill: rgba(10,132,255,.12); }
html[data-theme="dark"] .empty-illu-top { fill: rgba(10,132,255,.2); }
html[data-theme="dark"] .empty-illu-line { stroke: rgba(10,132,255,.4); }

/* ── Job Comparison Modal ─────────────────────────────── */
.compare-btn { display: none; }
.compare-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility 0s .2s;
  padding: 1rem;
}
.compare-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s var(--ease);
}
.compare-modal {
  background: var(--card);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 860px;
  margin: 0;
  max-height: 88vh;
  overflow-y: auto;
  animation: fadeSlideUp .22s var(--ease) both;
}
.compare-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}
.compare-modal-title { font-weight: 600; font-size: 1.1333rem; letter-spacing: -.01em; color: var(--text); }
.compare-modal-close {
  background: rgba(0,0,0,.05); border: none; color: var(--muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  padding: 0; display: flex; align-items: center; justify-content: center;
  transition: color var(--duration), background var(--duration);
}
.compare-modal-close:hover { color: var(--text); background: rgba(0,0,0,.09); }
html[data-theme="dark"] .compare-modal-close { background: rgba(255,255,255,.08); }
.compare-grid {
  display: grid;
  background: var(--border);
  gap: 1px;
}
.compare-col {
  background: var(--card);
  padding: 1.25rem 1.4rem;
}
.compare-col-header {
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.compare-company { font-weight: 600; font-size: 1.0667rem; letter-spacing: -.01em; color: var(--text); }
.compare-role    { font-size: .8667rem; color: var(--muted); margin-top: .15rem; }
.compare-field {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .8rem;
}
.compare-field-label {
  font-size: .8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.compare-field-value { font-size: .9333rem; color: var(--text); font-weight: 500; }

/* ── Profile Quick Stats ──────────────────────────────── */
.quick-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.quick-stat-card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.quick-stat-label { font-size: .8667rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: .5rem; }
.quick-stat-value { font-size: 1.8667rem; font-weight: 600; letter-spacing: -.03em; color: var(--text); line-height: 1; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.quick-stat-sub { font-size: .8rem; color: var(--muted); }
.quick-deadline-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .55rem; }
.quick-deadline-item { font-size: .8667rem; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.quick-deadline-date { color: var(--muted); flex-shrink: 0; margin-left: auto; }
.quick-deadline-urgent { color: var(--danger-text); font-weight: 600; }
.quick-match-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .55rem; }
.quick-match-item { font-size: .8667rem; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.match-rec-badge--sm { font-size: .72rem; padding: .18em .6em; }

/* ══════════════════════════════════════════════════════
   DARK MODE — ADDITIONAL OVERRIDES (PASS 2)
   ══════════════════════════════════════════════════════ */

/* form-label uses hardcoded var(--border-strong) */
html[data-theme="dark"] .form-label { color: var(--text); }

/* feature icon bg: var(--accent-soft) */
html[data-theme="dark"] .feature-icon { background: rgba(10,132,255,.18); }

/* feature-card hover border: rgba(10,132,255,.35) */
html[data-theme="dark"] .feature-card:hover { border-color: rgba(10,132,255,.4); }

/* form-card hover border: var(--border-strong) */
html[data-theme="dark"] .form-card:hover { border-color: rgba(10,132,255,.25); }

/* placeholder: var(--muted-2) is actually fine in dark but slightly too bright */
html[data-theme="dark"] .form-control::placeholder { color: var(--text-2); }

/* stat card number colors — too dark/wrong in dark mode */


/* ── Semantic color classes (replace inline styles) ─── */

/* Mini-stat status number colors */
.mini-stat-saved     { color: var(--text-2); }
.mini-stat-applied   { color: var(--accent-text); }
.mini-stat-interview { color: var(--warning-text); }
.mini-stat-offer     { color: var(--success-text); }
.mini-stat-rejected  { color: var(--danger-text); }

html[data-theme="dark"] .mini-stat-saved     { color: var(--text-2); }
html[data-theme="dark"] .mini-stat-applied   { color: var(--accent-text); }
html[data-theme="dark"] .mini-stat-interview { color: var(--warning); }
html[data-theme="dark"] .mini-stat-offer     { color: var(--success); }
html[data-theme="dark"] .mini-stat-rejected  { color: var(--danger); }

/* Profile success alert */
.profile-success-alert { font-size: .9333rem; }

/* Section title semantic variants */
.section-title--strengths { color: var(--success-text); }
.section-title--improvements { color: var(--warning-text); }

/* Danger confirm card (Delete page) */
.danger-confirm-card { background: var(--danger-soft); box-shadow: none; }
/* --text-2 on the red wash is 4.22:1; the label is the one piece of text on it that a user must read to act. */
.danger-confirm-card .form-label { color: var(--text); }
.danger-confirm-text { font-size: .9333rem; color: var(--danger-text); font-weight: 500; }

/* Key-value list used on the Delete page and elsewhere */
.kv-list { font-size: .9333rem; row-gap: .5rem; }
.kv-list dt { color: var(--muted); font-weight: 500; }
.kv-list dd { color: var(--text); margin-bottom: 0; }

/* Narrow page containers (forms, confirm pages) */
.container-narrow  { max-width: 780px; }

/* Privacy / Terms: prose in the app's cards, readable line length from .container-narrow. */
.legal-page .form-card p, .legal-page .form-card li { line-height: 1.6; }
.legal-page .form-card ul { padding-left: 1.2rem; }
.legal-page .form-card li + li { margin-top: .45rem; }
.legal-page code { color: var(--text); background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; font-size: .9em; }
.container-xnarrow { max-width: 560px; }
.form-actions { flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .form-actions .btn { flex: 1 1 auto; }
  .form-actions .ms-auto { margin-left: 0 !important; width: 100%; }
}

/* JS-injected error text (resume match fail) */
.js-error-text { font-size: .82rem; color: var(--danger-text); margin: 0; }
html[data-theme="dark"] .js-error-text { color: var(--danger); }

/* Bootstrap form-check-input dark mode */
html[data-theme="dark"] .form-check-input {
  background-color: var(--surface-3);
  border-color: var(--border);
}
html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Bootstrap select option bg in dark */
html[data-theme="dark"] select.form-select option { background: var(--card); color: var(--text); }

/* btn-outline-secondary in dark needs softer border. The label keeps the base rule's --text: dimmed to --muted
   over the .09 white wash it was 4.59:1 on a card and 4.0–4.1:1 on --surface-2 or a hovered row (the Attention
   card's Snooze, the list's row actions; a11y dimension, 2026-09-26). */
html[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--border);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  color: var(--text);
  background-color: rgba(255,255,255,.06);
  border-color: var(--text);
}

/* btn-outline-primary in dark */
html[data-theme="dark"] .btn-outline-primary {
  color: var(--accent-text);
  border-color: var(--accent);
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background-color: rgba(10,132,255,.15);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

/* Dashboard success rate color conditional */
html[data-theme="dark"] .analytics-card-value.value-success { color: var(--success); }

/* value-success: green success rate on Dashboard */
.analytics-card-value.value-success { color: var(--success-text); }

/* Bootstrap btn-close needs to be visible on dark backgrounds */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap Alert inherits light bg — flatten it in dark */
html[data-theme="dark"] .alert {
  background-color: var(--card);
  border-color: var(--border);
  color: var(--text);
}

/* form-card hover: override border to subtle indigo glow in dark */
html[data-theme="dark"] .form-card { border-color: var(--border); }

/* Tag input background in dark mode */
html[data-theme="dark"] .tag-text-input {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .tag-text-input:focus { border-color: var(--primary); }

/* Cover letter output textarea in dark */
html[data-theme="dark"] .cl-output {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}

/* dl/dt inside app-table-wrapper */
html[data-theme="dark"] dt { color: var(--muted); }
html[data-theme="dark"] dd { color: var(--text); }

/* Bootstrap .form-control-sm */
html[data-theme="dark"] .form-control-sm {
  background-color: var(--surface-3);
  color: var(--text);
  border-color: var(--border);
}

/* ── Application Detail Drawer ─────────────────────────── */
.app-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);
  z-index: 1030;
}
.app-drawer-backdrop.active { opacity: 1; visibility: visible; }

.app-drawer {
  position: fixed;
  top: .75rem;
  right: .75rem;
  bottom: .75rem;
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + 1rem));
  visibility: hidden;
  transition: transform .26s var(--ease), visibility 0s linear .26s;
  z-index: 1031;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-drawer.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform .26s var(--ease), visibility 0s;
}

@media (max-width: 576px) {
  .app-drawer {
    max-width: none;
    top: auto;
    left: 0; right: 0; bottom: 0;
    height: 92%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform .26s var(--ease), visibility 0s linear .26s;
  }
  .app-drawer.active { transform: translateY(0); transition: transform .26s var(--ease), visibility 0s; }
  .app-drawer.is-dragging { transition: none; }
}

.app-drawer-handle {
  display: none;
  justify-content: center;
  padding: 10px 0 0;
  flex-shrink: 0;
  touch-action: none;
  cursor: grab;
}
@media (max-width: 576px) { .app-drawer-handle { display: flex; } }
.app-drawer-handle-bar { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); }

.app-drawer-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.app-drawer-header {
  padding: 1.35rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.app-drawer-header-main {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 0;
  padding-right: 2.5rem;
}
.app-drawer-avatar { width: 46px; height: 46px; font-size: 1rem; border-radius: 12px; flex-shrink: 0; }
.app-drawer-header-text { flex: 1; min-width: 0; }
.app-drawer-title { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .15rem; color: var(--text); line-height: 1.25; }
.app-drawer-company { font-size: .9333rem; color: var(--muted); margin: 0 0 .5rem; }
.app-drawer-header-main .status-badge { align-self: flex-start; margin-top: .15rem; }
.app-drawer-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  background: rgba(0,0,0,.05);
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.app-drawer-close svg { width: 18px; height: 18px; }
.app-drawer-close:hover { color: var(--text); background: rgba(0,0,0,.09); }
html[data-theme="dark"] .app-drawer-close { background: rgba(255,255,255,.08); }

.app-drawer-body { flex: 1; overflow-y: auto; padding: 1.35rem 1.5rem 2rem; }

.app-drawer-footer {
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--card);
}
.app-drawer-footer .btn { padding: .45rem .95rem; font-size: .8667rem; }

/* Drawer Sections */
.drawer-section { margin-bottom: 1.6rem; }
.drawer-section:last-child { margin-bottom: 0; }
.drawer-section-title {
  font-size: .8667rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0 .7rem;
}
.drawer-text {
  font-size: .9333rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.drawer-description-box {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  max-height: 240px;
  overflow-y: auto;
}

/* AI Analysis match card (mirrors Create page resume match card) */
.match-result-card {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem;
}

/* Additional Info Grid */
.drawer-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1rem;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
.drawer-info-item { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.drawer-info-label { font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.drawer-info-value { font-size: .9333rem; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }

/* Status progress timeline (drawer) */
.status-timeline {
  display: flex;
  align-items: flex-start;
}
.status-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.status-timeline-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  z-index: 1;
  transition: background var(--duration), border-color var(--duration), color var(--duration);
}
.status-timeline-line {
  position: absolute;
  top: 12px; left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.status-timeline-step:last-child .status-timeline-line { display: none; }
.status-timeline-label {
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.status-timeline-step.is-done .status-timeline-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.status-timeline-step.is-done .status-timeline-line { background: var(--primary); }
.status-timeline-step.is-done .status-timeline-label { color: var(--text); }
.status-timeline-step.is-current .status-timeline-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(10,132,255,.18); }
.status-timeline-step.is-current .status-timeline-label { color: var(--text); font-weight: 700; }
.status-timeline-step.is-rejected .status-timeline-dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.status-timeline-step.is-rejected .status-timeline-line { background: var(--danger); }
.status-timeline-step.is-rejected .status-timeline-label { color: var(--danger); font-weight: 700; }

html[data-theme="dark"] .status-timeline-dot { background: var(--bg); border-color: var(--border-strong); color: var(--muted); }
html[data-theme="dark"] .status-timeline-line { background: var(--border-strong); }
html[data-theme="dark"] .status-timeline-step.is-current .status-timeline-dot { box-shadow: 0 0 0 4px rgba(10,132,255,.25); }

/* ── Notes / activity timeline (drawer) ─────────────────── */
.drawer-note-form {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  margin-bottom: .85rem;
}
.drawer-note-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  font-size: .9333rem;
  color: var(--text);
  background: var(--card);
  font-family: inherit;
  line-height: 1.45;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.drawer-note-input::placeholder { color: var(--muted-2); }
.drawer-note-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
html[data-theme="dark"] .drawer-note-input { background: var(--surface-3); }
.drawer-note-submit { white-space: nowrap; }

.drawer-note-timeline {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 260px;
  overflow-y: auto;
}
.drawer-note-item {
  border-left: 0;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
}
.drawer-note-text { font-size: .9333rem; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
.drawer-note-time { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.drawer-note-empty { font-size: .9333rem; color: var(--muted); margin: 0; padding: .25rem 0; }

/* Table row interaction */
.app-row { cursor: pointer; transition: background-color 100ms ease; }
.app-row:focus { outline: none; }
.app-row:focus-visible td { box-shadow: inset 0 0 0 2px var(--accent); }
.app-table-wrapper .table tbody tr.is-selected td { background: var(--accent-soft); }
.app-table-wrapper .table tbody tr.is-selected:hover td { background: rgba(10,132,255,.16); }

/* ── Profile: resume-first analyze flow (Section 1a) ─────────────────────── */

.resume-hero-card {
  border: 1.5px dashed var(--border);
  background: var(--card);
}

.resume-hero-card.has-resume {
  border-style: solid;
}

.analyze-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: .45rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.analyze-btn:hover { background: var(--primary-h); }
.analyze-btn:disabled { opacity: .6; cursor: not-allowed; }

.analyze-spinner {
  width: 13px; height: 13px;
  border-width: 2px;
}

/* Skeleton shimmer shown over fields while AI extraction is running */
.skeleton-line {
  height: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer calc(var(--duration) * 8) ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.field-skeleton-wrap { position: relative; }
.field-skeleton-wrap .skeleton-line {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.field-skeleton-wrap.skeleton-active > :not(.skeleton-line) { visibility: hidden; }

html[data-theme="dark"] .skeleton-line {
  background: linear-gradient(90deg, var(--card) 25%, var(--bg) 50%, var(--card) 75%);
  background-size: 200% 100%;
}

/* ── Profile: AJAX autosave indicator (Section 1b) ───────────────────────── */

.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--success);
  opacity: 0;
  transition: opacity .3s var(--ease);
  margin-left: .5rem;
}

.save-indicator.show { opacity: 1; }

/* ── Profile: required-field shake validation (Section 1d) ───────────────── */

.field-invalid { border-color: var(--danger) !important; }

.field-error-msg {
  color: var(--danger);
  font-size: .75rem;
  font-weight: 500;
  margin-top: .3rem;
}

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

.field-shake {
  animation: field-shake calc(var(--duration) * 3) var(--ease);
}

/* ── Profile: searchable target-role combobox (Section 1c) ──────────────── */

.role-combobox-wrap { position: relative; flex: 0 0 auto; display: inline-block; }

.role-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--card);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: .3rem;
  display: none;
}

.role-combobox-list.open { display: block; }

.role-combobox-option {
  padding: .5rem .7rem;
  font-size: .9333rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.role-combobox-option:hover,
.role-combobox-option.active {
  background: var(--accent-soft);
  color: var(--primary);
}

html[data-theme="dark"] .role-combobox-option:hover,
html[data-theme="dark"] .role-combobox-option.active {
  background: var(--surface-3);
  color: var(--text);
}

.role-combobox-empty {
  padding: .4rem .6rem;
  font-size: .78rem;
  color: var(--muted);
}


/* ══════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES — Apple-style design system layer
   Loaded last so it wins over both Bootstrap and the
   component rules above.
   ══════════════════════════════════════════════════════ */

/* Global Bootstrap tokens */
:root, html[data-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--muted-2);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--accent-h);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-success-rgb: 48,209,88;
  --bs-warning-rgb: 255,159,10;
  --bs-danger-rgb: 255,69,58;
  --bs-heading-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary-bg: var(--surface-3);
}

.text-primary { color: var(--accent-text) !important; }
.text-success { color: var(--success-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-danger  { color: var(--danger-text) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--card) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }

/* Bootstrap badges → soft pills */
.badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .76rem;
  padding: .32em .7em;
  letter-spacing: 0;
}
.badge.bg-primary,  .badge.text-bg-primary  { background: var(--accent-soft)  !important; color: var(--accent-text)  !important; }
.badge.bg-success,  .badge.text-bg-success  { background: var(--success-soft) !important; color: var(--success-text) !important; }
.badge.bg-warning,  .badge.text-bg-warning  { background: var(--warning-soft) !important; color: var(--warning-text) !important; }
.badge.bg-danger,   .badge.text-bg-danger   { background: var(--danger-soft)  !important; color: var(--danger-text)  !important; }
.badge.bg-info,     .badge.text-bg-info     { background: var(--accent-soft)  !important; color: var(--accent-text)  !important; }
.badge.bg-secondary,.badge.text-bg-secondary,
.badge.bg-light,    .badge.text-bg-light,
.badge.bg-dark,     .badge.text-bg-dark     { background: var(--neutral-soft) !important; color: var(--neutral-text) !important; }

/* Alerts → soft tinted, borderless */
.alert {
  border: 0;
  border-radius: var(--radius-md);
  padding: .85rem 1.1rem;
  font-size: .9333rem;
  font-weight: 500;
  box-shadow: none;
}
.alert-primary, .alert-info    { background: var(--accent-soft);  color: var(--accent-text); }
.alert-success                 { background: var(--success-soft); color: var(--success-text); }
.alert-warning                 { background: var(--warning-soft); color: var(--warning-text); }
.alert-danger                  { background: var(--danger-soft);  color: var(--danger-text); }
.alert-secondary, .alert-light { background: var(--surface-3);    color: var(--text); }
.alert .alert-link { color: inherit; font-weight: 600; }
.alert .btn-close { filter: none; opacity: .5; }

/* Validation */
.text-danger.field-validation-error,
.field-validation-error, .validation-summary-errors {
  color: var(--danger-text) !important;
  font-size: .8667rem;
  font-weight: 500;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.input-validation-error, .form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--danger) !important;
  background-image: none !important;
}
.input-validation-error:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(255,69,58,.2) !important; }
.invalid-feedback { color: var(--danger-text); font-size: .8667rem; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--border-strong); background-image: none; }

/* Form controls (Bootstrap variants) */
.form-control-sm, .form-select-sm { font-size: .8667rem; padding: .4rem .7rem; border-radius: 8px; }
.form-control-lg { font-size: 1.0667rem; padding: .75rem 1rem; border-radius: var(--radius-md); }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--muted); opacity: 1; }
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E6E73' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
  background-size: 14px;
}
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398989D' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background-color: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color: var(--surface-3); border-color: var(--accent); }
html[data-theme="dark"] .form-control::placeholder { color: var(--muted-2); }
html[data-theme="dark"] select.form-select option { background: var(--surface-3); color: var(--text); }

.form-check-input {
  width: 1.1em; height: 1.1em;
  border: 1.5px solid var(--border-strong);
  background-color: var(--card);
  margin-top: .2em;
  transition: background var(--duration), border-color var(--duration), box-shadow var(--duration);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-check-input[type="checkbox"] { border-radius: 6px; }
.form-switch .form-check-input { width: 2.4em; height: 1.35em; border-radius: 2em; background-color: var(--surface-3); border-color: transparent; margin-top: .05em; }
.form-switch .form-check-input:checked { background-color: var(--success); }
.form-switch .form-check-input:focus:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .form-check-input { background-color: var(--surface-3); border-color: var(--border-strong); }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-label { color: var(--text); font-size: .9333rem; }
.form-text { color: var(--muted); font-size: .8667rem; }
.input-group-text { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); border-radius: var(--radius-sm); }
.input-group > .form-control, .input-group > .form-select { border-radius: var(--radius-sm); }

/* Modals */
.modal-backdrop { background-color: rgba(0,0,0,.45); }
.modal-backdrop.show { opacity: 1; }
.modal-content {
  background: var(--card);
  color: var(--text);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--border); padding: 1.1rem 1.35rem; }
.modal-title { font-weight: 600; font-size: 1.1333rem; letter-spacing: -.01em; }
.modal-body { padding: 1.25rem 1.35rem; }
.modal-footer { border-top: 1px solid var(--border); padding: .9rem 1.35rem; gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal.fade .modal-dialog { transform: translateY(8px) scale(.98); transition: transform .2s var(--ease); }
.modal.show .modal-dialog { transform: none; }
.btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231D1D1F'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  opacity: .45;
  border-radius: 50%;
  transition: opacity var(--duration), background-color var(--duration);
}
.btn-close:hover { opacity: .9; }
.btn-close:focus { box-shadow: var(--focus-ring); opacity: .9; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

/* Dropdowns */
.dropdown-menu {
  --bs-dropdown-bg: var(--card);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-hover-bg: rgba(0,0,0,.05);
  --bs-dropdown-link-active-bg: var(--accent-soft);   /* white on the accent fill is 3.7:1; soft tint + accent text matches the role combobox */
  --bs-dropdown-link-active-color: var(--accent-text);
  --bs-dropdown-border-width: 0;
  --bs-dropdown-divider-bg: var(--border);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  padding: .4rem;
  font-size: .9333rem;
}
html[data-theme="dark"] .dropdown-menu { --bs-dropdown-link-hover-bg: rgba(255,255,255,.08); }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; }
.dropdown-header { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* Pagination */
.pagination { gap: .3rem; --bs-pagination-border-width: 0; }
.page-link {
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: transparent;
  font-weight: 500;
  font-size: .9333rem;
  padding: .4rem .85rem;
  min-width: 36px;
  text-align: center;
  transition: background var(--duration), color var(--duration);
}
.page-link:hover { background: rgba(0,0,0,.06); color: var(--text); }
html[data-theme="dark"] .page-link:hover { background: rgba(255,255,255,.08); }
.page-item.active .page-link { background: var(--accent); color: #fff; }
.page-item.disabled .page-link { color: var(--muted-2); background: transparent; }
.page-link:focus { box-shadow: var(--focus-ring); }

/* Generic tables outside the app wrapper */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); color: var(--text); }
.table > :not(caption) > * > * { background-color: transparent; color: inherit; }

/* Nav tabs / pills */
.nav-pills .nav-link { border-radius: var(--radius-pill); color: var(--text-2); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--accent); color: #fff; }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-2); border: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--text); background: transparent; border-bottom-color: var(--accent); }

/* List groups */
.list-group { --bs-list-group-bg: var(--card); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--border); border-radius: var(--radius-md); }
.list-group-item { background: var(--card); color: var(--text); border-color: var(--border); }

/* Progress */
.progress { background: var(--surface-3); border-radius: var(--radius-pill); height: 8px; }
.progress-bar { background: var(--accent); border-radius: var(--radius-pill); }

/* Tooltips / popovers — Bootstrap re-declares --bs-tooltip-* on .tooltip itself, so the theme
   tokens above are bridged here; the arrow reads --bs-tooltip-bg and so always matches the box. */
.tooltip {
  --bs-tooltip-bg: var(--tooltip-bg);
  --bs-tooltip-color: var(--tooltip-color);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: 8px;
  --bs-tooltip-font-size: .8rem;
  --bs-tooltip-padding-x: .6rem;
  --bs-tooltip-padding-y: .35rem;
}
.tooltip .tooltip-inner { box-shadow: var(--shadow), 0 0 0 1px var(--tooltip-border); } /* ring instead of border keeps the arrow flush */
.popover {
  --bs-popover-bg: var(--card);
  --bs-popover-border-width: 0;
  --bs-popover-border-color: var(--border-strong);
  --bs-popover-border-radius: var(--radius-md);
  --bs-popover-inner-border-radius: var(--radius-md);
  --bs-popover-header-bg: var(--surface-2);
  --bs-popover-header-color: var(--text);
  --bs-popover-body-color: var(--text);
  --bs-popover-box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-strong);
}
html[data-theme="dark"] .popover { --bs-popover-bg: var(--surface-3); --bs-popover-header-bg: var(--dark); }

/* Spinners / loading */
.spinner-border { border-width: 2px; }
.spinner-border-sm { width: 1rem; height: 1rem; }

/* Code / kbd */
code { color: var(--accent-text); background: var(--accent-soft); padding: .1em .35em; border-radius: 5px; font-size: .85em; }

/* Section title utility used across pages */
.section-title {
  font-size: 1.1333rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .85rem;
}

/* Responsive spacing */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-inline: 1.1rem; }
  .form-card { padding: 1.35rem 1.15rem 1.5rem; }
  .page-header h1, .page-header h2, h1, .h1 { font-size: 1.75rem; }
  .card-body { padding: 1.15rem 1.15rem; }
  .modal-dialog { margin: .75rem; }
}

/* Error pages */
.error-card { padding: 3rem 2rem; }
.error-code { font-size: 3.2rem; font-weight: 600; letter-spacing: -.04em; color: var(--accent); line-height: 1; margin-bottom: .5rem; }
.error-title { font-size: 1.4667rem; margin-bottom: .6rem; }
.error-text { font-size: .9333rem; line-height: 1.6; margin-bottom: 1.5rem; }


/* ── List / Board view toggle (segmented, lives in the filter-pill row) ── */
.view-toggle {
  display: inline-flex;
  gap: .2rem;
  padding: .2rem;
  margin-left: auto;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}
.view-toggle .filter-pill { background: transparent; box-shadow: none; padding: .3rem .85rem; }
.view-toggle .filter-pill:hover { transform: none; box-shadow: none; }
.view-toggle .filter-pill.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-xs); }

/* ── Kanban board ────────────────────────────────────── */
.board {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .25rem .25rem 1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.board-column {
  flex: 0 0 280px;
  min-width: 280px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: .6rem;
  scroll-snap-align: start;
  transition: box-shadow var(--duration) var(--ease);
}
@media (min-width: 1400px) {
  .board-column { flex: 1 1 280px; max-width: none; }
}
.board-column.is-highlighted { box-shadow: var(--focus-ring); }
.board-column-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .4rem .65rem;
}
.board-column-title { font-weight: 600; font-size: .95rem; color: var(--text); }
.board-count { font-variant-numeric: tabular-nums; }
/* The column head is --surface-2, where the Applied wash reads #DCE6F3 and --accent-text is 4.4:1 (color-audit, 2026-09-26). */
.board-count.badge-applied { color: var(--accent-h); }
/* Light only: --accent-h has no dark value, and on the dark wash it measured 2.2:1. Dark keeps --accent-text (5.3:1). */
html[data-theme="dark"] .board-count.badge-applied,
html[data-theme="dark"] .lp-board-head .badge-applied,
html[data-theme="dark"] .company-avatar,
html[data-theme="dark"] .practice-badge--medium { color: var(--accent-text); }
.board-add {
  margin-left: auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--text-2);
  font-weight: 600; font-size: 1.05rem; line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.board-add:hover { color: var(--text); transform: translateY(-1px); }
.board-column-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
  min-height: 120px;
}
.board-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .75rem .85rem;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.board-card:hover { box-shadow: var(--shadow-sm); }
.board-card:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.board-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.board-card-text { min-width: 0; }
.board-card-company { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.board-card-role { color: var(--text-2); font-size: .9rem; margin-top: .05rem; }
.board-card-date { color: var(--muted); font-size: .8rem; margin-top: .35rem; }
.board-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.board-tag {
  font-size: .75rem; font-weight: 500;
  padding: .15em .6em;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--neutral-text);
  white-space: nowrap;
}
.board-tag--warning { background: var(--warning-soft); color: var(--warning-text); }
.board-tag--danger  { background: var(--danger-soft);  color: var(--danger-text); }
.board-empty {
  display: none;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1.5rem .5rem;
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
}
.board-column-body.is-empty .board-empty { display: block; }

/* Drag-and-drop states (SortableJS fallback mode + keyboard lift) */
.board-card--ghost {
  opacity: .45;
  background: var(--surface-3);
  border: 1.5px dashed var(--border-strong);
  box-shadow: none;
}
.board-card--ghost > * { visibility: hidden; }
.board-card--drag,
.board-card--lifted {
  transform: rotate(2deg) scale(1.02);
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
  z-index: 50;
}
.board-card--lifted { box-shadow: var(--focus-ring), var(--shadow-lg); }
.board-card--chosen { cursor: grabbing; }
body.board-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.board-dragging .board-column-body { min-height: 120px; }

/* Dashboard pipeline rows link to the board column (#status-<name>) */
a.funnel-row { color: inherit; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--duration) var(--ease); }
a.funnel-row:hover { background: var(--surface-2); }
a.funnel-row:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.analytics-card-link { font-size: .875rem; font-weight: 500; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.analytics-card-link:hover { text-decoration: underline; }

/* Landing hero: compact 3-column board fragment inside the dashboard preview */
.lp-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lp-board-col { display: flex; flex-direction: column; gap: .4rem; padding: .45rem; border-radius: 10px; background: var(--surface-2); }
.lp-board-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .1rem .2rem .15rem; font-size: .7333rem; font-weight: 600; }
.lp-board-head .status-badge { font-size: .6667rem; padding: .12em .55em; }
/* The same Applied-wash-on-grey pair as .board-count.badge-applied (4.4:1 with --accent-text); dark is restored beside that rule. */
.lp-board-head .badge-applied { color: var(--accent-h); }
.lp-board-card { display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem; border-radius: 8px; background: var(--card); box-shadow: var(--shadow-xs); font-size: .7333rem; }
.lp-board-card .t { flex: 1; min-width: 0; }
.lp-board-card .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .7733rem; letter-spacing: -.01em; }
.lp-board-card .t span { display: block; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-board-card .match-ring { width: 26px; height: 26px; flex: none; }
.lp-board-card .match-ring::before { inset: 3px; }
.lp-board-card .match-ring > span { font-size: .55rem; color: var(--text); }
.lp-board-card .match-ring > span::after { display: none; }

/* ── Landing hero: Applications / Cover Letter / Profile mocks (see Views/Home/_HeroPreview.cshtml) ── */
/* Applications: 4-column board with the real filter pills, count badges and reminder chips at preview scale */
.lp-board--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-board-card { flex-wrap: wrap; }
.lp-board-card .tags { width: 100%; display: flex; flex-wrap: wrap; gap: .25rem; }
.lp-board-card .board-tag { font-size: .6667rem; padding: .12em .55em; }
.lp-board-more { font-size: .6667rem; color: var(--text-2); text-align: center; padding: .1rem 0 .05rem; }
.lp-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .75rem; }
.lp-pills .filter-pill { font-size: .7333rem; padding: .28rem .7rem; }
.lp-pills .filter-pill-count { font-size: .6667rem; }
.lp-pills .view-toggle { padding: .15rem; }
.lp-pills .view-toggle .filter-pill { padding: .22rem .65rem; }
.lp-pills .view-toggle button.filter-pill { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.lp-pills .view-toggle button.filter-pill:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
/* Board / List views: same crossfade + in-flow-active trick as the panels, so the panel height follows the visible view */
.lp-views { position: relative; }
.lp-view { position: absolute; top: 0; left: 0; right: 0; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease), visibility 0s linear 180ms; }
.lp-view.is-active { position: relative; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .lp-view { transition: none; } }
/* List view mock: the real table, selected rows and bulk bar at preview scale */
.lp-list .app-table-wrapper { border-radius: 12px; }
.lp-list .table thead th { font-size: .6667rem; padding: .5rem .6rem; }
.lp-list .table tbody td { font-size: .7333rem; padding: .42rem .6rem; }
.lp-list .app-row { cursor: default; }
.lp-list .company-avatar { width: 26px; height: 26px; font-size: .6rem; border-radius: 7px; }
.lp-list .status-badge { font-size: .6667rem; padding: .25em .6em; }
.lp-list .status-icon { width: 9px; height: 9px; }
.lp-list .match-ring--sm { width: 26px; height: 26px; }
.lp-list .match-ring--sm::before { inset: 3px; }
.lp-list .match-ring--sm > span { font-size: .55rem; }
.lp-list .col-check { width: 2.1rem; }
.lp-check { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--card); vertical-align: middle; }
.lp-check.on { background: var(--accent) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") center/10px no-repeat; border-color: var(--accent); }
.lp-list-more { font-size: .6667rem; color: var(--text-2); text-align: center; padding: .4rem 0; border-top: 1px solid var(--border); background: var(--card); }
.lp-bulk-bar { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; visibility: visible; margin: .65rem auto 0; max-width: 100%; padding: .35rem .35rem .35rem .85rem; transition: none; z-index: 1; }
.lp-bulk-bar .bulk-bar-inner { gap: .65rem; }
.lp-bulk-bar .bulk-count { font-size: .7733rem; }
.lp-bulk-bar .bulk-actions { gap: .35rem; }
.lp-bulk-bar .btn { height: 26px; font-size: .6667rem; padding: 0 .65rem; }
.lp-bulk-bar .bulk-status-select { height: 26px; font-size: .6667rem; min-width: 128px; display: inline-flex; align-items: center; padding: 0 1.7rem 0 .65rem; color: rgba(255,255,255,.85) !important; white-space: nowrap; }
.lp-bulk-bar .bulk-deselect-link { font-size: .6667rem; }
/* Cover letter: selector card on the left, generated letter on the right */
.lp-shot-row--cl { grid-template-columns: 1fr 1.4fr; }
.lp-label { font-size: .7733rem; font-weight: 500; color: var(--text); margin: .65rem 0 .3rem; }
.lp-label span { color: var(--muted); font-weight: 400; }
.lp-help { font-size: .7333rem; color: var(--muted); margin: .3rem 0 0; line-height: 1.45; }
.lp-help--meta { margin: 0 0 .6rem; }
.lp-help strong { font-weight: 600; color: var(--text-2); }
.lp-shot-panel .lp-input { font-size: .8rem; padding: .5rem .75rem; color: var(--text); }
.lp-select { position: relative; padding-right: 2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-select::after { content: ''; position: absolute; right: .85rem; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.lp-textarea { min-height: 64px; color: var(--text-2) !important; }
.lp-powered { font-size: .7333rem; color: var(--text-2); align-self: center; }
.lp-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.lp-card-top h4, .lp-card-top .lp-card-title { margin: 0; }
.lp-card-top .word-count { font-size: .7333rem; }
.lp-shot-panel .lp-aibox { font-size: .8rem; }
.lp-aibox p { margin: 0 0 .55rem; line-height: 1.55; }
.lp-aibox p:last-child { margin: 0; }
.lp-shot-panel .lp-frag-actions { margin-top: .8rem; }
/* Practice: the question and answer on the left, the scored feedback on the right. Reuses the real
   practice badge and score chip so the preview shows what the page actually looks like. */
.lp-practice-meta { display: flex; align-items: center; gap: .35rem; margin-bottom: .6rem; }
.lp-practice-meta .practice-score { margin-left: auto; }
.lp-shot-panel .practice-badge, .lp-shot-panel .practice-score { font-size: .6667rem; }
.lp-practice-q { margin: 0; font-size: .8667rem; line-height: 1.5; color: var(--text); }
.lp-practice-list { margin: 0; padding-left: 1.1rem; font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.lp-practice-list li + li { margin-top: .2rem; }
.lp-practice-opening { margin-top: .8rem; }
/* Profile: identity + skills on the left, resume card on the right */
.lp-shot-row--profile { grid-template-columns: 1fr 1.3fr; }
.lp-profile-left { display: flex; flex-direction: column; gap: .75rem; }
.lp-photo-row { display: flex; align-items: center; gap: .9rem; padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--border); }
.lp-avatar { position: relative; display: block; width: 56px; height: 56px; border-radius: 50%; flex: none; }
.lp-avatar-init { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #5E5CE6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; letter-spacing: -.03em; box-shadow: 0 6px 16px rgba(10,132,255,.25); }
.lp-avatar .profile-avatar-overlay { font-size: .6rem; }
.lp-avatar:hover .profile-avatar-overlay { opacity: 1; }
.lp-avatar-badge { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); color: var(--text-2); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.lp-avatar-badge svg { width: 11px; height: 11px; }
.lp-identity { min-width: 0; }
.lp-name { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); }
.lp-email { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.lp-stats { gap: .4rem 1.1rem; }
.lp-stats .profile-stat { min-width: 44px; }
.lp-stats .profile-stat-num { font-size: 1.1333rem; }
.lp-stats .profile-stat-label { font-size: .7rem; }
.lp-saved { font-size: .7333rem; font-weight: 500; color: var(--success-text); }
.lp-docs .doc-row { padding: .55rem .7rem; gap: .6rem; }
.lp-docs .doc-info { min-width: 120px; }
.lp-docs .doc-filename { font-size: .8rem; }
.lp-docs .doc-meta { font-size: .7rem; white-space: normal; }
.lp-docs .doc-version-badge { font-size: .7rem; }
.lp-docs .doc-btn { font-size: .7rem; padding: .25rem .6rem; }
.lp-docs .active-label { font-size: .7rem; }
.lp-analyze { margin-top: .8rem; padding-top: .8rem; }
.lp-analyze .btn { font-size: .7733rem; padding: .36rem .8rem; }
.lp-analyze .btn svg { width: 12px; height: 12px; }
.lp-analyze .lp-help { width: 100%; margin-top: .1rem; }
.lp-tags-mock .tag-text-input { height: 32px; font-size: .8rem; display: flex; align-items: center; color: var(--text-2); flex: 1 1 auto; }
.lp-tags-mock .tag-add-btn { height: 32px; font-size: .7733rem; padding: 0 .8rem; }
.lp-tags-mock .tag-item { font-size: .7733rem; }
.lp-tags-mock .tag-item i { background: rgba(10,132,255,.14); color: var(--accent-text); font-style: normal; font-size: .65rem; line-height: 1; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .8; }
@media (max-width: 991.98px) {
  .lp-shot-row--cl, .lp-shot-row--profile { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .lp-board--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-pills .lp-pill-status { display: none; }
  .lp-shot-head { flex-wrap: wrap; gap: .1rem .6rem; }
}


/* ── Reminders: Attention card (dashboard), board chips, filter pill, drawer actions ── */
.attention-card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.attention-count {
  display: inline-block; min-width: 1.6em; text-align: center;
  padding: .05em .5em; margin-left: .35rem; vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft); color: var(--neutral-text);
  font-size: .8rem; font-weight: 600;
}
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.attention-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .85rem;
  padding: .65rem .85rem;
  background: var(--surface-2);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
}
.attention-item--danger { border-left-color: var(--danger); }
.attention-item--accent { border-left-color: var(--accent); }
.attention-main { min-width: 0; flex: 1 1 14rem; }
.attention-title {
  display: block; font-weight: 600; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attention-title:hover { color: var(--accent-text); }
.attention-sep { color: var(--muted); font-weight: 400; }
.attention-why { font-size: .8667rem; color: var(--text-2); }
.attention-kind { font-weight: 600; }
.attention-item--danger  .attention-kind { color: var(--danger-text); }
.attention-item--warning .attention-kind { color: var(--warning-text); }
.attention-item--accent  .attention-kind { color: var(--accent-text); }
/* Shrinkable (not flex: none) so the three follow-up buttons wrap inside a narrow row instead of overflowing it. */
.attention-actions { display: flex; gap: .4rem; flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; }
.attention-empty { margin: 0; padding: .35rem 0; color: var(--muted); font-size: .9333rem; }

.board-tag--accent { background: var(--accent-soft); color: var(--accent-text); }
.filter-pill-attention .filter-pill-dot { background: var(--warning); }
.drawer-reminder-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* ── Follow-up draft modal (Views/Shared/_FollowUpModal.cshtml, wwwroot/js/follow-up.js) ──
   Rides on .compare-modal (overlay, card, sticky header); the footer sticks to the bottom of the same scroller. */
.followup-modal { max-width: 640px; scroll-padding-block: 6rem 5.5rem; }   /* scrollIntoView clears the sticky header and footer */
.followup-modal:focus { outline: none; }
.followup-heading { min-width: 0; }
.followup-context { margin: .15rem 0 0; font-size: .8667rem; color: var(--muted); overflow-wrap: anywhere; }
.followup-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.35rem; }
.followup-editor { display: flex; flex-direction: column; gap: 1rem; transition: opacity var(--duration) var(--ease); }
.followup-editor[hidden] { display: none; }
.followup-editor.is-updating { opacity: .55; }
.followup-replaced #followup-subject,
.followup-replaced .followup-textarea { animation: followup-refresh .4s var(--ease); }
@keyframes followup-refresh { from { opacity: .3; } to { opacity: 1; } }
.followup-subject-row { display: flex; gap: .5rem; }
.followup-subject-row .form-control { flex: 1; min-width: 0; }
.followup-subject-row .btn { white-space: nowrap; }
.followup-textarea { min-height: 260px; padding: 1rem; line-height: 1.65; }
.followup-loading { display: flex; flex-direction: column; gap: .75rem; }
.followup-loading[hidden] { display: none; }
.followup-skeleton-body { height: 240px; border-radius: var(--radius-md); }
.followup-error { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.followup-error[hidden] { display: none; }
.followup-error .match-error-banner { width: 100%; }
.followup-footer {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem;
  padding: .9rem 1.35rem; border-top: 1px solid var(--border); background: var(--card);
}
.followup-footnote { margin: 0; font-size: .8rem; color: var(--muted); }
.followup-footer-actions { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 575px) {
  .followup-modal { scroll-padding-block: 6rem 8.5rem; }
  .followup-body { padding: 1rem; }
  .followup-footer { padding: .8rem 1rem; }
  .followup-footer-actions { width: 100%; }
  .followup-footer-actions .btn { flex: 1; }
  .followup-textarea { min-height: 220px; }
  .followup-skeleton-body { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .followup-editor { transition: none; }
  .followup-replaced #followup-subject,
  .followup-replaced .followup-textarea { animation: none; }
}
.reminder-days-input { max-width: 6.5rem; }
.calendar-howto { padding-left: 1.1rem; font-size: .8667rem; color: var(--text-2); display: flex; flex-direction: column; gap: .25rem; }

/* ── Connected accounts (Profile → Gmail) ────────────────────────────────── */
.connected-account {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.connected-account-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--neutral-soft); color: var(--neutral-text);
}
.connected-account-icon svg { width: 1.1rem; height: 1.1rem; }
.connected-account--on .connected-account-icon { background: var(--success-soft); color: var(--success-text); }
.connected-account-text { flex: 1 1 10rem; min-width: 0; }
.connected-account-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connected-account-sub { font-size: .8667rem; color: var(--text-2); }
.connected-account-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ── Inbox suggestions (dashboard card, drawer section, dots, nav badge) ──── */
.suggestions-card .card-header-clean { align-items: baseline; }
.suggestions-card-sub { font-size: .8rem; color: var(--muted); }
.suggestion-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .85rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
}
.suggestion-main { min-width: 0; flex: 1 1 16rem; display: flex; flex-direction: column; gap: .2rem; }
.suggestion-title { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; min-width: 0; }
.suggestion-app { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.suggestion-app:hover { color: var(--accent-text); }
.suggestion-arrow { color: var(--muted); font-weight: 600; }
.suggestion-confidence { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.suggestion-summary { font-size: .9333rem; color: var(--text); line-height: 1.45; }
.suggestion-email { font-size: .8rem; color: var(--text-2); overflow-wrap: anywhere; }
.suggestion-subject { font-style: italic; }
.suggestion-when { color: var(--accent-text); font-weight: 500; }

/* Drawer */
.drawer-suggestion-list { display: flex; flex-direction: column; gap: .6rem; }
.drawer-suggestion {
  padding: .7rem .85rem;
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: .3rem;
}
.drawer-suggestion-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.drawer-suggestion-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }

/* Dot on a status badge (list row) or company name (board card) */
.suggestion-dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent); margin-left: .35em; vertical-align: middle; flex: none;
  box-shadow: 0 0 0 2px var(--card);
  animation: suggestion-pulse 2.4s ease-in-out infinite;
}
.board-card-company .suggestion-dot { box-shadow: none; }
@keyframes suggestion-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) { .suggestion-dot { animation: none; } }

/* Navbar badge on the Dashboard link */
.nav-badge {
  display: inline-block; min-width: 1.35em; padding: .05em .4em; margin-left: .4em;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.4; text-align: center; vertical-align: middle;
}

/* ── Rewrite a bullet (profile Resume card; Views/Profile/_BulletRewriter.cshtml, wwwroot/js/bullet-rewriter.js) ── */
.rewrite-section { border-top: 1px solid var(--border); }
.rewrite-form { display: flex; flex-direction: column; gap: .85rem; }
.rewrite-textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.rewrite-empty { background: var(--surface-2); border-radius: var(--radius-md); padding: .85rem 1rem; font-size: .9333rem; color: var(--text); }
.rewrite-empty a { color: var(--accent-text); font-weight: 600; }
.rewrite-error { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.rewrite-error[hidden] { display: none; }
.rewrite-error .match-error-banner { width: 100%; }
.rewrite-error a { color: var(--danger-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rewrite-results { transition: opacity var(--duration) var(--ease); }
.rewrite-results[hidden] { display: none; }
.rewrite-results.is-updating { opacity: .55; }
.rewrite-results #rewriteResultsTitle:focus { outline: none; }
.rewrite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.rewrite-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .9rem; }
.rewrite-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.rewrite-angle {
  display: inline-block; padding: .15em .65em; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-text); font-size: .75rem; font-weight: 600;
}
.rewrite-copy { flex: none; }
.rewrite-text { margin: 0; color: var(--text); font-size: .9333rem; line-height: 1.55; overflow-wrap: anywhere; }
.rewrite-discarded { font-size: .8667rem; color: var(--warning-text); margin: 0; }
.rewrite-discarded[hidden] { display: none; }
.rewrite-placeholder { background: var(--warning-soft); color: var(--warning-text); border-radius: 3px; padding: 0 1px; font-weight: 600; }
@media (max-width: 575.98px) {
  .rewrite-form .analyze-btn { width: 100%; justify-content: center; }
}

/* ── Keyword coverage ────────────────────────────────────────────────────────
   The ATS-style literal-term check (Views/Shared/_KeywordCoverage.cshtml), shown in the application
   drawer, on Edit and in the Create analyzer panel. Chips are deliberately neutral rather than the
   green/red of the resume-match tags: this is a different question, not a second verdict on the same one. */
.keyword-coverage { display: flex; flex-direction: column; gap: .7rem; }
.keyword-head { display: flex; flex-direction: column; gap: .2rem; }
.keyword-title {
  font-size: .8667rem; font-weight: 600; color: var(--muted);
  margin: 0; letter-spacing: 0;
}
.keyword-help { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.45; }
.keyword-reason { font-size: .8667rem; color: var(--text-2); margin: 0; }
.keyword-body { display: flex; flex-direction: column; gap: .6rem; transition: opacity var(--duration) var(--ease); }
.keyword-body.is-updating { opacity: .55; }
.keyword-count { font-size: .9333rem; font-weight: 500; color: var(--text); margin: 0; }
.keyword-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.keyword-footnote { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.45; }

/* Chip: same pill as .skill-tag, but a button so the popover is keyboard-reachable. */
.skill-tag--keyword {
  background: var(--neutral-soft); color: var(--neutral-text);
  cursor: help; font: inherit; font-size: .8rem; font-weight: 500;
  transition: background var(--duration) var(--ease);
}
.skill-tag--keyword:hover, .skill-tag--keyword:focus-visible { background: var(--surface-3); }
.skill-tag--keyword:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.keyword-error { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.keyword-loading { display: flex; flex-direction: column; gap: .5rem; }
.keyword-skeleton-count { width: 60%; height: 18px; }
.keyword-skeleton-chips { width: 100%; height: 30px; }

/* Bootstrap re-declares its popover variables on .popover itself, so the theme tokens are bridged in the
   shared .popover rule further up; only the body styling belongs here. */
.keyword-popover { max-width: 320px; }
.keyword-popover-context { font-size: .82rem; margin: 0; color: var(--text-2); font-style: italic; }
.keyword-popover-near {
  font-size: .8rem; margin: .5rem 0 0; color: var(--text-2);
  padding-top: .5rem; border-top: 1px solid var(--border);
}

/* ── Resume review (/Profile/ReviewResume) ───────────────
   The screen between an AI parse and the profile. Built from the same surfaces and tokens as
   .doc-row above; nothing here introduces a colour, radius or spacing step of its own. */
.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.review-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem .9rem;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  transition: background var(--duration) var(--ease);
}
.review-row:hover { background: var(--surface-3); }

/* A row with nothing to tick (the read-only "what we read" block) shouldn't invite a click. */
.review-row--plain { background: transparent; padding-left: 0; padding-right: 0; }
.review-row--plain:hover { background: transparent; }

/* Nudged down to sit on the first line of the label rather than the top of the box. */
.review-check { margin-top: .2rem; flex-shrink: 0; }

.review-row-body { min-width: 0; flex: 1; }

.review-row-title {
  display: block;
  font-size: .9333rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.review-row--plain .review-row-title { cursor: default; }

/* The resume snippet a skill was claimed from. --text-2, not --muted-2: this is prose and has to
   clear AA (see the --muted-2 note in section 8 of CLAUDE.md). */
.review-evidence {
  margin: .2rem 0 0;
  font-size: .8667rem;
  line-height: 1.45;
  color: var(--text-2);
}

.review-summary {
  margin: 0 0 .75rem;
  font-size: .9333rem;
  line-height: 1.5;
  color: var(--text-2);
}

.review-tag {
  display: inline-flex;
  align-items: center;
  margin-left: .45rem;
  padding: .15em .5em;
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: .7333rem;
  font-weight: 600;
  vertical-align: middle;
}
.review-tag--muted { background: var(--neutral-soft); color: var(--neutral-text); }

/* ── Practice page (/Practice) ───────────────────────────
   Same surfaces and tokens as the resume review list; nothing new introduced. */
.practice-filters { display: flex; flex-direction: column; gap: .5rem; }
.practice-filter-group { display: flex; flex-wrap: wrap; gap: .35rem; }

.practice-filter {
  padding: .3rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .8667rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.practice-filter:hover { background: var(--surface-3); color: var(--text); }
.practice-filter.is-active { background: var(--accent); color: #fff; }

.practice-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }

/* ── Progress card ───────────────────────────────────────────────────────────
   Reuses .mini-stat for the numbers and the dashboard .funnel for the coverage
   bars, so there is no second stat or bar implementation to keep in step. */

.practice-progress-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-bottom: .9rem; }
.practice-progress-of { font-size: .8667rem; font-weight: 500; color: var(--muted); }
.practice-progress-score--low  { color: var(--danger-text); }
.practice-progress-score--mid  { color: var(--warning-text); }
.practice-progress-score--high { color: var(--success-text); }

.practice-trend { margin-left: .3rem; font-size: .8rem; font-weight: 600; }
.practice-trend--up   { color: var(--success-text); }
.practice-trend--down { color: var(--danger-text); }

.practice-progress-weakest { margin: 0 0 .9rem; font-size: .8667rem; color: var(--text-2); }
.practice-progress-weakest strong { color: var(--text); }

.practice-progress-coverage .funnel-row { grid-template-columns: 64px 1fr 44px; }
.practice-coverage-easy   .funnel-bar { background: var(--success); }
.practice-coverage-medium .funnel-bar { background: var(--accent); }
.practice-coverage-hard   .funnel-bar { background: var(--warning); }

/* ── Question groups ─────────────────────────────────────────────────────── */

.practice-group { display: flex; flex-direction: column; gap: .75rem; }

.practice-manage { margin-top: 1.5rem; }
.practice-manage-summary {
  font-size: .8667rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
.practice-manage-body { display: flex; flex-direction: column; gap: 1rem; margin-top: .9rem; }
.practice-manage-action { padding-top: .9rem; border-top: 1px solid var(--border); }
.practice-manage-action:first-child { padding-top: 0; border-top: 0; }

/* Sits outside .container-narrow on purpose — a sticky action bar should span the viewport — but its
   contents are held to the same 780px column, so the button lines up with everything above it rather
   than drifting to the far left of a wide screen. */
.practice-batch-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: .75rem 1rem;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
html[data-theme="dark"] .practice-batch-bar { box-shadow: 0 -4px 16px rgba(0,0,0,.4); }
.practice-batch-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: 780px;
  margin: 0 auto;
}

/* The per-card busy state during a batch: the card's own form is hidden, so the spinner needs a home. */
.practice-card-busy {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  font-size: .8667rem;
  color: var(--text-2);
}

.practice-card-batch-error { margin-top: .75rem; }

.practice-list-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin: .25rem 0 1rem;
}
.practice-group-list { display: flex; flex-direction: column; gap: .75rem; }

.practice-group-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .1rem .15rem;
}
.practice-group-titles { display: flex; flex-direction: column; min-width: 0; }
.practice-group-role { font-weight: 600; font-size: .9333rem; color: var(--text); }
.practice-group-company { font-size: .8rem; color: var(--text-2); }
.practice-group-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.practice-group-link { font-size: .8667rem; color: var(--accent-text); text-decoration: none; }
.practice-group-link:hover { text-decoration: underline; }

.practice-group-general {
  margin: 0 0 -.15rem;
  padding: .1rem .15rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
}

/* Day separators inside general practice. A label with a hairline running off it, quieter than a
   group header: it divides one list, it does not start a new one. */
.practice-day { display: flex; flex-direction: column; gap: .6rem; }
.practice-day + .practice-day { margin-top: .6rem; }
.practice-day-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: 0 .15rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
}
.practice-day-label::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.practice-day-list { display: flex; flex-direction: column; gap: .75rem; }

/* ── Saved star ──────────────────────────────────────────────────────────── */

.practice-star {
  margin-left: auto;
  padding: 0 .2rem;
  border: 0;
  background: none;
  font-size: 1.05rem;
  line-height: 1;
  /* The glyph is the whole control, so it takes text tokens, not --muted-2 (decorative only) or --warning (a
     fill): ☆ was 2.14:1 light / 2.84:1 dark and ★ about 2:1 (color-audit, 2026-09-26). */
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.practice-star:hover { color: var(--warning-text); transform: scale(1.12); }
.practice-star.is-saved { color: var(--warning-text); }
.practice-star:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* The score chip already claims the right edge on an answered card, so the star follows it rather
   than fighting it for the same margin-left:auto. */
.practice-score + .practice-star { margin-left: .1rem; }

.practice-card {
  padding: 1rem 1.15rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

/* Entrance only — fill-mode backwards so no transform is retained (see the Design notes in CLAUDE.md
   §8: a retained transform on an ancestor traps position:fixed children). */
.practice-card--new { animation: practice-fade-in var(--duration) var(--ease) backwards; }
@keyframes practice-fade-in { from { opacity: 0; transform: translateY(-6px); } }

/* The empty page's example card. Dashed and quieter than a real card so it cannot be mistaken for
   one of the user's questions; the "Example" tag says it in words for anyone who can't see the border. */
.practice-example { margin-top: 1rem; }
.practice-card--example {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
}
.practice-card--example .practice-prompt { color: var(--text-2); }
.practice-example-tag {
  padding: .15em .55em;
  border-radius: var(--radius-pill);
  font-size: .7333rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--neutral-soft);
  color: var(--neutral-text);
}
.practice-example-note { margin: .6rem 0 0; font-size: .8667rem; line-height: 1.45; color: var(--text-2); }

.practice-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

.practice-badge {
  padding: .15em .55em;
  border-radius: var(--radius-pill);
  font-size: .7333rem;
  font-weight: 600;
}
.practice-badge--easy     { background: var(--success-soft); color: var(--success-text); }
.practice-badge--medium   { background: var(--accent-soft);  color: var(--accent-h); }   /* on the card's --surface-2 the wash reads #DCE6F3, where --accent-text is 4.4:1 */
.practice-badge--hard     { background: var(--warning-soft); color: var(--warning-text); }
.practice-badge--category { background: var(--neutral-soft); color: var(--neutral-text); }

.practice-topic { font-size: .8rem; color: var(--text-2); }

.practice-prompt { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }

.practice-hint { margin-top: .6rem; }
.practice-hint summary {
  font-size: .8667rem;
  font-weight: 500;
  color: var(--accent-text);
  cursor: pointer;
}
.practice-hint-body { margin: .4rem 0 0; font-size: .8667rem; line-height: 1.45; color: var(--text-2); }

/* ── Answering a practice question ───────────────────────────────────────────
   Score chip, feedback sections, retry history and the answer form. Three tones only
   (1-2 / 3 / 4-5) so the chip reads at a glance; the tints are the existing semantic
   tokens rather than new colours, which is what keeps both themes working for free. */

.practice-score {
  margin-left: auto;
  padding: .15em .55em;
  border-radius: var(--radius-pill);
  font-size: .7333rem;
  font-weight: 700;
  white-space: nowrap;
}
.practice-score--low  { background: var(--danger-soft);  color: var(--danger-text); }
.practice-score--mid  { background: var(--warning-soft); color: var(--warning-text); }
.practice-score--high { background: var(--success-soft); color: var(--success-text); }
.practice-score-max { font-weight: 500; opacity: .75; }
.practice-elapsed { font-size: .8rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

.practice-answered { margin-top: .75rem; }

/* The disclosure. Its summary reads as a quiet control, not a heading — the score chip above is
   what carries the result at a glance. */
.practice-answered-summary {
  font-size: .8667rem;
  font-weight: 500;
  color: var(--accent-text);
  cursor: pointer;
  margin-bottom: .5rem;
}
.practice-answered-summary-open { display: none; }
.practice-answered[open] .practice-answered-summary-open { display: inline; }
.practice-answered[open] .practice-answered-summary-closed { display: none; }

.practice-bulk-toggle { display: flex; gap: .4rem; margin-top: .75rem; }
.practice-bulk-toggle .practice-filter { border: 0; font: inherit; cursor: pointer; }

.practice-progress-index { margin: 0 0 .7rem; font-size: .8667rem; }
.practice-progress-index a { color: var(--accent-text); text-decoration: none; }
.practice-progress-index a:hover { text-decoration: underline; }

/* Answered cards carry a left edge in the score's colour, so a page of them can be scanned without
   reading any of them. */
.practice-card--scored-low  { border-left: 3px solid var(--danger); }
.practice-card--scored-mid  { border-left: 3px solid var(--warning); }
.practice-card--scored-high { border-left: 3px solid var(--success); }

.practice-card--flash { animation: practice-flash 1.2s var(--ease); }
@keyframes practice-flash {
  0%, 100% { box-shadow: var(--shadow-xs); }
  30%      { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-xs); }
}

.practice-answer-label {
  margin: 0 0 .2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
}

.practice-answer-text {
  margin: 0;
  font-size: .8667rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

.practice-answer-given {
  padding: .6rem .75rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.practice-feedback-block { margin-top: .75rem; }
.practice-feedback-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .8667rem;
  line-height: 1.5;
  color: var(--text-2);
}
.practice-feedback-list li + li { margin-top: .25rem; }

.practice-revised {
  margin: 0;
  padding: .5rem .75rem;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  font-size: .8667rem;
  line-height: 1.5;
  color: var(--text);
}

.practice-attempt-when { font-size: .8rem; color: var(--text-2); margin: 0 0 .35rem; }

/* Attempts side by side. A horizontal scroll rather than a stack at narrow widths on purpose: a
   stack is what this replaces, so collapsing to one on a phone would give back the same
   non-comparison. Capped at AttemptHistory.Keep + 1 columns, so the track never grows unbounded. */
.practice-compare { margin-bottom: .25rem; }
.practice-compare-track {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scroll-snap-type: x proximity;
}
.practice-compare-col {
  flex: 0 0 min(15rem, 78%);
  scroll-snap-align: start;
  padding: .6rem .75rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.practice-compare-col--current {
  background: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.practice-compare-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .15rem;
}
.practice-compare-head .practice-score { margin-left: auto; }
.practice-compare-n { font-size: .8rem; font-weight: 600; color: var(--text-2); }

.practice-answer-form { margin-top: .85rem; }

.practice-answer-input {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  font-size: .9333rem;
  color: var(--text);
  background: var(--card);
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.practice-answer-input::placeholder { color: var(--muted-2); }
.practice-answer-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
html[data-theme="dark"] .practice-answer-input { background: var(--surface-3); }

.practice-answer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .5rem;
}

.practice-star { margin-top: .5rem; }
.practice-star summary {
  font-size: .8667rem;
  font-weight: 500;
  color: var(--accent-text);
  cursor: pointer;
}
.practice-star-list {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  font-size: .8667rem;
  line-height: 1.5;
  color: var(--text-2);
}