@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CareerLah — Illustration / Friendly Theme
   Warm, rounded, approachable — think Duolingo meets Notion
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Brand colours */
  --fr-navy:        #1b3461;
  --fr-navy-dark:   #0f2244;
  --fr-teal:        #00968a;
  --fr-teal-light:  #e6f7f5;
  --fr-teal-mid:    rgba(0,150,138,.15);

  /* Illustration palette */
  --fr-peach:       #ff8c69;
  --fr-peach-bg:    #fff1ec;
  --fr-yellow:      #fbbf24;
  --fr-yellow-bg:   #fffbeb;
  --fr-purple:      #818cf8;
  --fr-purple-bg:   #eef2ff;
  --fr-green:       #34d399;
  --fr-green-bg:    #ecfdf5;

  /* Backgrounds */
  --fr-bg:          #fdf8f3;   /* warm cream */
  --fr-bg2:         #fff;
  --fr-surface:     #ffffff;

  /* Text */
  --fr-text:        #1a1a2e;
  --fr-text2:       #374151;
  --fr-muted:       #6b7280;
  --fr-border:      #e9e4de;

  /* Shape */
  --fr-r-sm:  10px;
  --fr-r-md:  16px;
  --fr-r-lg:  24px;
  --fr-r-xl:  32px;
  --fr-r-pill: 999px;

  /* Shadows — soft, warm */
  --fr-sh-sm:  0 1px 4px rgba(27,52,97,.06), 0 3px 10px rgba(27,52,97,.06);
  --fr-sh-md:  0 4px 16px rgba(27,52,97,.08), 0 8px 28px rgba(27,52,97,.07);
  --fr-sh-lg:  0 12px 40px rgba(27,52,97,.10), 0 4px 16px rgba(27,52,97,.07);
  --fr-sh-card: 0 2px 12px rgba(27,52,97,.07), 0 1px 3px rgba(27,52,97,.05);
  --fr-sh-hover:0 6px 24px rgba(0,150,138,.14), 0 2px 8px rgba(0,150,138,.10);

  /* Typography */
  --fr-font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

/* ── Reset overrides from pixel theme ──────────────────────── */
body::before { display: none !important; }
body::after  { display: none !important; }
* {
  font-family: var(--fr-font) !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  image-rendering: auto !important;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: var(--fr-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(0,150,138,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(27,52,97,.05) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--fr-text) !important;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4,
.hub-hero-title,
.hub-section-title,
.hub-card-title,
.results-headline,
.pane-title,
.auth-panel-headline,
.auth-form-title,
.disc-card-title,
.interview-header-title,
.cover-letter-title,
.rec-header-title,
.acard-title,
.hist-hero .results-headline {
  font-family: var(--fr-font) !important;
  color: var(--fr-navy) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

.hub-hero-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: var(--fr-navy) !important;
}

.hub-section-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--fr-navy) !important;
}

.hub-card-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--fr-navy) !important;
}

.pane-title {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: var(--fr-navy) !important;
}

.results-headline {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.auth-panel-headline {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.auth-form-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--fr-navy) !important;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1.5px solid var(--fr-border) !important;
  box-shadow: 0 2px 12px rgba(27,52,97,.06) !important;
  height: 64px !important;
}

.brand-mark {
  background: linear-gradient(135deg, var(--fr-teal) 0%, #00b5a8 100%) !important;
  border-radius: var(--fr-r-sm) !important;
  box-shadow: 0 3px 10px rgba(0,150,138,.28) !important;
  border: none !important;
}
.brand-name {
  font-family: var(--fr-font) !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  color: var(--fr-navy) !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
}
.brand-name span { color: var(--fr-teal) !important; }

.brand-pill {
  font-family: var(--fr-font) !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  background: var(--fr-teal-light) !important;
  color: var(--fr-teal) !important;
  border: 1.5px solid rgba(0,150,138,.2) !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: none !important;
  padding: 0.15rem 0.5rem !important;
}

.nav-link {
  font-family: var(--fr-font) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--fr-muted) !important;
  border-radius: var(--fr-r-pill) !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.nav-link:hover { color: var(--fr-navy) !important; background: rgba(27,52,97,.05) !important; }
.nav-link.active { color: var(--fr-teal) !important; background: var(--fr-teal-light) !important; font-weight: 600 !important; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary,
.auth-submit-btn,
.disc-submit {
  font-family: var(--fr-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  background: var(--fr-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: 0 4px 14px rgba(0,150,138,.30) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  padding: 0.65rem 1.5rem !important;
}
.btn-primary:hover:not(:disabled),
.auth-submit-btn:hover,
.disc-submit:hover {
  background: #007a6f !important;
  box-shadow: 0 6px 20px rgba(0,150,138,.35) !important;
  transform: translateY(-2px) !important;
}
.btn-primary:active:not(:disabled),
.auth-submit-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0,150,138,.2) !important;
}

.btn-outline, .btn-back {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--fr-navy) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-pill) !important;
  background: var(--fr-surface) !important;
  box-shadow: var(--fr-sh-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.btn-outline:hover, .btn-back:hover {
  background: rgba(27,52,97,.03) !important;
  border-color: #c0b9b0 !important;
  transform: none !important;
  box-shadow: var(--fr-sh-md) !important;
}

.btn-signin {
  font-family: var(--fr-font) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: var(--fr-muted) !important;
  border-radius: var(--fr-r-pill) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-signin:hover { color: var(--fr-navy) !important; background: rgba(27,52,97,.04) !important; }

.btn-register {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  background: var(--fr-navy) !important;
  color: #fff !important;
  border-radius: var(--fr-r-pill) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(27,52,97,.22) !important;
  text-shadow: none !important;
  text-transform: none !important;
}
.btn-register:hover {
  background: var(--fr-navy-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(27,52,97,.28) !important;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hub-hero, .view-home .hub-hero {
  background: linear-gradient(145deg, #e6f4f2 0%, #f0f7ff 50%, #fdf8f3 100%) !important;
  border-bottom: 1.5px solid rgba(0,150,138,.12) !important;
  box-shadow: 0 4px 24px rgba(27,52,97,.06) !important;
  backdrop-filter: none !important;
}

.hub-eyebrow {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--fr-teal) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
}

.hub-hero-sub {
  font-family: var(--fr-font) !important;
  color: var(--fr-muted) !important;
  font-size: 1.0625rem !important;
  text-shadow: none !important;
}

/* ── Hero title upgrade ─────────────────────────────────────── */
.hub-hero-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
  color: var(--fr-navy) !important;
}
.hub-hero-title br { display: block; }

.hub-hero-sub {
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  color: var(--fr-muted) !important;
  max-width: 400px;
}

/* ── Feature pills ──────────────────────────────────────────── */
.hero-feature-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.25rem !important;
}

.hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.4rem 0.875rem !important;
  border-radius: var(--fr-r-pill) !important;
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  cursor: default !important;
}
.hero-pill:hover {
  transform: translateY(-2px) !important;
}

.hero-pill-teal {
  background: #e0f5f3 !important;
  color: #007a6f !important;
  border: 1.5px solid rgba(0,150,138,.22) !important;
  box-shadow: 0 2px 8px rgba(0,150,138,.12) !important;
}
.hero-pill-purple {
  background: #eef0fe !important;
  color: #4f46e5 !important;
  border: 1.5px solid rgba(99,102,241,.22) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.10) !important;
}
.hero-pill-peach {
  background: #fff0eb !important;
  color: #c0440e !important;
  border: 1.5px solid rgba(255,140,105,.22) !important;
  box-shadow: 0 2px 8px rgba(255,140,105,.10) !important;
}

/* Pill enter animation (staggered) */
.hero-pill { opacity: 0; animation: heroFadeIn 0.5s ease-out both; }
.hero-pill:nth-child(1) { animation-delay: 0.48s; }
.hero-pill:nth-child(2) { animation-delay: 0.58s; }
.hero-pill:nth-child(3) { animation-delay: 0.68s; }

/* ── Action cards ───────────────────────────────────────────── */
.hub-wrap {
  background: transparent !important;
}

.hub-section-title {
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.hub-section-sub {
  color: var(--fr-muted) !important;
  font-size: 0.9375rem !important;
}

.hub-card {
  background: var(--fr-surface) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-lg) !important;
  box-shadow: var(--fr-sh-card) !important;
  backdrop-filter: none !important;
  transition: box-shadow .22s ease, transform .18s ease, border-color .2s !important;
}
.hub-card:hover {
  border-color: rgba(0,150,138,.3) !important;
  box-shadow: var(--fr-sh-hover) !important;
  transform: translateY(-4px) !important;
}

.hub-card-badge {
  font-family: var(--fr-font) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: var(--fr-peach-bg) !important;
  color: var(--fr-peach) !important;
  border-radius: var(--fr-r-pill) !important;
  border: 1px solid rgba(255,140,105,.25) !important;
  box-shadow: none !important;
}

.hub-card-title {
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.hub-card-desc {
  font-family: var(--fr-font) !important;
  color: var(--fr-muted) !important;
  font-size: 0.875rem !important;
  text-shadow: none !important;
}
.hub-card-icon {
  border-radius: var(--fr-r-md) !important;
  border: none !important;
}
.hub-icon-teal  { background: var(--fr-teal-light) !important; color: var(--fr-teal) !important; }
.hub-icon-navy  { background: var(--fr-purple-bg) !important; color: var(--fr-purple) !important; }
.hub-icon-amber { background: var(--fr-yellow-bg) !important; color: #d97706 !important; }
.hub-card-arrow { color: #d1ccc6 !important; }
.hub-card:hover .hub-card-arrow { color: var(--fr-teal) !important; }

/* ── Tip strip ──────────────────────────────────────────────── */
.hub-tip-strip {
  background: var(--fr-surface) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-lg) !important;
  box-shadow: var(--fr-sh-sm) !important;
  backdrop-filter: none !important;
}
.hub-tip-label {
  font-family: var(--fr-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--fr-teal) !important;
  text-shadow: none !important;
}
.hub-tip-content {
  font-family: var(--fr-font) !important;
  font-size: 0.9rem !important;
  color: var(--fr-text2) !important;
  text-shadow: none !important;
}
.hub-tip-content strong { color: var(--fr-navy) !important; }
.hub-tip-mascot .hub-tip-mascot-avatar {
  background: var(--fr-teal-light) !important;
  border-radius: var(--fr-r-md) !important;
}

/* ── Form section ───────────────────────────────────────────── */
.form-section-wrap {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.wizard-container, .form-container {
  background: var(--fr-surface) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-lg) !important;
  box-shadow: var(--fr-sh-md) !important;
  backdrop-filter: none !important;
}

.main-tabs {
  background: #f5f3ef !important;
  border-bottom: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-lg) var(--fr-r-lg) 0 0 !important;
}
.main-tab {
  font-family: var(--fr-font) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--fr-muted) !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.main-tab:hover { color: var(--fr-navy) !important; background: rgba(27,52,97,.04) !important; }
.main-tab.active { color: var(--fr-teal) !important; border-bottom-color: var(--fr-teal) !important; font-weight: 600 !important; }

.wizard-pill {
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid var(--fr-border) !important;
  box-shadow: none !important;
}
.wizard-pill.active {
  background: var(--fr-navy) !important;
  border-color: var(--fr-navy) !important;
  color: #fff !important;
}
.wizard-pill.done {
  background: var(--fr-green-bg) !important;
  border-color: var(--fr-green) !important;
  color: #065f46 !important;
}
.wp-num {
  font-family: var(--fr-font) !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  border-radius: 50% !important;
  text-shadow: none !important;
  background: transparent !important;
}
.wp-label {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
.wp-line { background: var(--fr-border) !important; }

.pane-sub {
  font-family: var(--fr-font) !important;
  color: var(--fr-muted) !important;
  font-size: 0.9375rem !important;
  text-shadow: none !important;
}
.or-row {
  font-family: var(--fr-font) !important;
  color: var(--fr-muted) !important;
  font-size: 0.875rem !important;
}
.or-row::before, .or-row::after { background: var(--fr-border) !important; }

/* ── Inputs ─────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.auth-field input {
  font-family: var(--fr-font) !important;
  background: #fff !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-md) !important;
  color: var(--fr-text) !important;
  font-size: 0.9375rem !important;
  box-shadow: 0 1px 3px rgba(27,52,97,.04) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
.auth-field input:focus {
  border-color: var(--fr-teal) !important;
  box-shadow: 0 0 0 3px rgba(0,150,138,.12) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: #b0aaa4 !important; }

.upload-zone {
  background: var(--fr-bg) !important;
  border: 2px dashed var(--fr-border) !important;
  border-radius: var(--fr-r-md) !important;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--fr-teal) !important;
  background: var(--fr-teal-light) !important;
}
.upload-main { color: var(--fr-text) !important; }
.upload-formats { color: var(--fr-muted) !important; }
.upload-icon-box {
  background: #fff !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-sm) !important;
  color: var(--fr-teal) !important;
}

/* ── Results hero ───────────────────────────────────────────── */
.results-hero,
.hist-hero,
.resume-analysis-hero {
  background: linear-gradient(135deg, var(--fr-navy) 0%, #1e4d8c 60%, #0f6b60 100%) !important;
  border-bottom: none !important;
  border-radius: 0 0 var(--fr-r-xl) var(--fr-r-xl) !important;
  box-shadow: 0 8px 32px rgba(27,52,97,.18) !important;
  backdrop-filter: none !important;
}
.results-eyebrow {
  font-family: var(--fr-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: rgba(255,255,255,.7) !important;
  text-shadow: none !important;
}
.results-sub {
  font-family: var(--fr-font) !important;
  color: rgba(255,255,255,.75) !important;
  text-shadow: none !important;
}
.section-label {
  font-family: var(--fr-font) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--fr-muted) !important;
  text-shadow: none !important;
}

/* ── Score ring ─────────────────────────────────────────────── */
.ring-bg { stroke: rgba(255,255,255,.1) !important; }
.ring-num {
  font-family: var(--fr-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  fill: #fff !important;
  text-shadow: none !important;
}
.ring-label { fill: rgba(255,255,255,.6) !important; }
.score-pill {
  font-family: var(--fr-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── PDF button ─────────────────────────────────────────────── */
.btn-pdf {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: none !important;
  text-transform: none !important;
  text-shadow: none !important;
}
.btn-pdf:hover {
  background: rgba(255,255,255,.25) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
}

/* ── Analysis & company cards ───────────────────────────────── */
.acard, .company-bg-banner, .hist-card, .disc-form-card, .disc-card {
  background: var(--fr-surface) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-md) !important;
  box-shadow: var(--fr-sh-card) !important;
  backdrop-filter: none !important;
  color: var(--fr-text) !important;
}
.acard-title {
  font-family: var(--fr-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.acard-head { border-bottom: 1.5px solid var(--fr-border) !important; }

/* ── Rec cards ──────────────────────────────────────────────── */
.rec-verdict  { background: var(--fr-navy) !important; border: none !important; border-radius: var(--fr-r-md) !important; box-shadow: var(--fr-sh-md) !important; }
.rec-checklist{ background: var(--fr-teal-light) !important; border: 1.5px solid rgba(0,150,138,.2) !important; border-radius: var(--fr-r-md) !important; }
.rec-strategy { background: var(--fr-purple-bg) !important; border: 1.5px solid rgba(129,140,248,.2) !important; border-radius: var(--fr-r-md) !important; }
.rec-header-title {
  font-family: var(--fr-font) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.rec-header-icon { color: var(--fr-yellow) !important; }

/* ── Company banner ─────────────────────────────────────────── */
.company-bg-title {
  font-family: var(--fr-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.company-bg-sub { color: var(--fr-muted) !important; text-shadow: none !important; }
.company-bg-icon { color: var(--fr-teal) !important; }

/* ── History ────────────────────────────────────────────────── */
.hist-hero h2, .hist-hero .results-headline { color: #fff !important; }
.hist-hero p.results-sub { color: rgba(255,255,255,.75) !important; }
.hist-card:hover { border-color: rgba(0,150,138,.25) !important; box-shadow: var(--fr-sh-hover) !important; transform: translateY(-2px) !important; }
.hist-card-title { color: var(--fr-navy) !important; font-weight: 600 !important; text-shadow: none !important; }
.hist-card-meta { color: var(--fr-muted) !important; }
.hist-view-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: var(--fr-teal-light) !important;
  color: var(--fr-teal) !important;
  border: 1.5px solid rgba(0,150,138,.25) !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0.35rem 0.75rem !important;
}
.hist-del-btn {
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid var(--fr-border) !important;
  color: var(--fr-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hist-del-btn:hover { border-color: #f87171 !important; color: #ef4444 !important; }
.hist-clear-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--fr-muted) !important;
  border: 1.5px solid var(--fr-border) !important;
  background: transparent !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0.3rem 0.75rem !important;
}
.hist-clear-btn:hover { color: #ef4444 !important; border-color: #f87171 !important; }
.hist-empty-text { color: var(--fr-muted) !important; font-family: var(--fr-font) !important; text-shadow: none !important; }
.hist-empty-sub { color: var(--fr-teal) !important; font-family: var(--fr-font) !important; text-shadow: none !important; }

/* ── Discovery ──────────────────────────────────────────────── */
.disc-form-label { color: var(--fr-text) !important; font-size: 0.875rem !important; font-weight: 600 !important; text-shadow: none !important; }
.disc-level-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  background: #fff !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-pill) !important;
  color: var(--fr-muted) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
}
.disc-level-btn:hover { border-color: var(--fr-teal) !important; color: var(--fr-teal) !important; }
.disc-level-btn.active {
  background: var(--fr-navy) !important;
  border-color: var(--fr-navy) !important;
  color: #fff !important;
}
.disc-refine-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 1.5px solid var(--fr-teal) !important;
  border-radius: var(--fr-r-pill) !important;
  color: var(--fr-teal) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.disc-results-count {
  font-family: var(--fr-font) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.disc-card-title { color: var(--fr-navy) !important; text-shadow: none !important; }
.disc-card-num {
  font-family: var(--fr-font) !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  color: var(--fr-teal) !important;
  text-shadow: none !important;
}
.disc-card-industry, .disc-card-fit { color: var(--fr-muted) !important; text-shadow: none !important; }
.disc-tag { border-radius: var(--fr-r-pill) !important; font-size: 0.75rem !important; text-shadow: none !important; }
.disc-tag-match { background: var(--fr-teal-light) !important; color: var(--fr-teal) !important; border: 1px solid rgba(0,150,138,.2) !important; }
.disc-tag-gap   { background: #fff3e0 !important; color: #d97706 !important; border: 1px solid rgba(217,119,6,.2) !important; }
.disc-analyse-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: var(--fr-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: 0 3px 10px rgba(0,150,138,.22) !important;
  text-shadow: none !important;
}

/* ── Interview ──────────────────────────────────────────────── */
.interview-header-title, .cover-letter-title {
  font-family: var(--fr-font) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--fr-navy) !important;
  text-shadow: none !important;
}
.interview-header-sub, .cover-letter-sub { color: var(--fr-muted) !important; text-shadow: none !important; }
.iq-tab {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid var(--fr-border) !important;
  color: var(--fr-muted) !important;
  background: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.iq-tab.active {
  background: var(--fr-navy) !important;
  color: #fff !important;
  border-color: var(--fr-navy) !important;
}
.iq-card {
  background: var(--fr-surface) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-md) !important;
  box-shadow: var(--fr-sh-sm) !important;
}

/* ── Cover letter ───────────────────────────────────────────── */
.cl-tone-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid var(--fr-border) !important;
  background: #fff !important;
  color: var(--fr-muted) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cl-tone-btn.active { background: var(--fr-teal-light) !important; color: var(--fr-teal) !important; border-color: rgba(0,150,138,.3) !important; }
.cl-copy-btn {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid var(--fr-border) !important;
  background: #fff !important;
  color: var(--fr-muted) !important;
  box-shadow: none !important;
}
.cl-result-label {
  font-family: var(--fr-font) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--fr-muted) !important;
  text-shadow: none !important;
}
.cl-body {
  background: #fafaf9 !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-md) !important;
  color: var(--fr-text) !important;
}

/* ── Loading overlay ────────────────────────────────────────── */
.loading-overlay {
  background: linear-gradient(135deg, var(--fr-navy-dark) 0%, #0d4a44 100%) !important;
}
.loading-msg {
  font-family: var(--fr-font) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}
.loading-sub-fun, .loading-sub {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  color: rgba(255,255,255,.6) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}
.loading-bar-wrap {
  border: none !important;
  border-radius: var(--fr-r-pill) !important;
  background: rgba(255,255,255,.12) !important;
  width: 240px !important;
  height: 6px !important;
}
.loading-bar-fill {
  background: linear-gradient(90deg, var(--fr-teal), #34d399) !important;
  border-radius: var(--fr-r-pill) !important;
  box-shadow: none !important;
}

/* ── User menu ──────────────────────────────────────────────── */
.user-btn {
  border-radius: var(--fr-r-pill) !important;
  border: 1.5px solid var(--fr-border) !important;
  background: #fff !important;
  box-shadow: var(--fr-sh-sm) !important;
}
.user-name {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--fr-text) !important;
  text-shadow: none !important;
}
.user-dropdown {
  background: #fff !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-lg) !important;
  box-shadow: var(--fr-sh-lg) !important;
  backdrop-filter: none !important;
}
.dropdown-info { border-bottom: 1.5px solid var(--fr-border) !important; padding-bottom: 0.75rem !important; }
.dropdown-name {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--fr-text) !important;
  text-shadow: none !important;
}
.dropdown-email { color: var(--fr-muted) !important; font-size: 0.8125rem !important; text-shadow: none !important; }
.dropdown-item {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  color: var(--fr-text2) !important;
  border-radius: var(--fr-r-sm) !important;
  text-shadow: none !important;
}
.dropdown-item:hover { background: rgba(27,52,97,.04) !important; color: var(--fr-navy) !important; }
.dropdown-divider { background: var(--fr-border) !important; }

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-panel-left {
  background: linear-gradient(145deg, var(--fr-navy) 0%, #1e4d8c 50%, #0f6b60 100%) !important;
  border-right: none !important;
  border-radius: 0 !important;
}
.auth-panel-right {
  background: var(--fr-bg) !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.auth-form-container {
  background: var(--fr-surface) !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-xl) !important;
  box-shadow: var(--fr-sh-lg) !important;
  padding: 2.5rem !important;
  max-width: 420px !important;
  width: 100% !important;
  backdrop-filter: none !important;
}
.auth-logo-mark {
  background: rgba(255,255,255,.2) !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
  border-radius: var(--fr-r-sm) !important;
  box-shadow: none !important;
}
.auth-logo-name {
  font-family: var(--fr-font) !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  text-shadow: none !important;
}
.auth-panel-sub { color: rgba(255,255,255,.8) !important; font-size: 1rem !important; line-height: 1.6 !important; text-shadow: none !important; }
.auth-preview-card {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: var(--fr-r-lg) !important;
  box-shadow: none !important;
}
.auth-panel-features li { color: rgba(255,255,255,.9) !important; text-shadow: none !important; }
.auth-panel-features li::before {
  background: var(--fr-green) !important;
  border-radius: 50% !important;
  width: 7px !important; height: 7px !important;
}
.auth-panel-note { color: rgba(255,255,255,.55) !important; font-size: 0.8125rem !important; text-shadow: none !important; }
.auth-form-sub { color: var(--fr-muted) !important; text-shadow: none !important; }
.auth-form-back { font-family: var(--fr-font) !important; font-size: 0.875rem !important; color: var(--fr-muted) !important; text-shadow: none !important; }
.auth-field label {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--fr-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.auth-divider { color: var(--fr-border) !important; }
.auth-divider::before, .auth-divider::after { background: var(--fr-border) !important; }
.auth-alert {
  border-radius: var(--fr-r-sm) !important;
  border: 1.5px solid #fca5a5 !important;
  border-left-width: 3px !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  text-shadow: none !important;
}
.auth-switch-text { color: var(--fr-muted) !important; text-shadow: none !important; }
.auth-switch-text a { color: var(--fr-teal) !important; text-shadow: none !important; }
.auth-terms-note { color: var(--fr-muted) !important; font-size: 0.75rem !important; text-shadow: none !important; }
.btn-google {
  background: #fff !important;
  border: 1.5px solid var(--fr-border) !important;
  border-radius: var(--fr-r-pill) !important;
  color: var(--fr-text) !important;
  box-shadow: var(--fr-sh-sm) !important;
  text-shadow: none !important;
  font-family: var(--fr-font) !important;
  font-size: 0.9375rem !important;
}
.btn-google:hover { background: #f9fafb !important; box-shadow: var(--fr-sh-md) !important; transform: none !important; }

/* ── Misc ────────────────────────────────────────────────────── */
.err-msg {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: var(--fr-r-sm) !important;
  color: #b91c1c !important;
  text-shadow: none !important;
}
.saved-banner {
  background: var(--fr-teal-light) !important;
  border: 1.5px solid rgba(0,150,138,.2) !important;
  border-radius: var(--fr-r-md) !important;
  color: var(--fr-text) !important;
  box-shadow: none !important;
}
.saved-banner-clear {
  background: transparent !important;
  border: 1.5px solid rgba(0,150,138,.3) !important;
  border-radius: var(--fr-r-pill) !important;
  color: var(--fr-teal) !important;
  font-family: var(--fr-font) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.paste-hint {
  background: var(--fr-yellow-bg) !important;
  border: 1.5px solid rgba(251,191,36,.3) !important;
  border-radius: var(--fr-r-sm) !important;
  color: #92400e !important;
  text-shadow: none !important;
}
.form-note { color: var(--fr-muted) !important; text-shadow: none !important; }
.next-step-banner {
  background: linear-gradient(135deg, var(--fr-navy), #0f6b60) !important;
  border-radius: var(--fr-r-lg) !important;
  border: none !important;
  box-shadow: var(--fr-sh-md) !important;
}
.next-step-btn {
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: var(--fr-r-pill) !important;
  color: #fff !important;
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.btn-save-profile {
  font-family: var(--fr-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 1.5px solid var(--fr-teal) !important;
  border-radius: var(--fr-r-pill) !important;
  color: var(--fr-teal) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cache-notice {
  border-radius: var(--fr-r-sm) !important;
  border: 1.5px solid rgba(251,191,36,.35) !important;
  background: var(--fr-yellow-bg) !important;
  color: #92400e !important;
  text-shadow: none !important;
}

/* ── Mascot sizing & glow ───────────────────────────────────── */
.hub-hero-mascot-large {
  width: 220px !important;
  height: 220px !important;
  max-width: 38vw !important;
  filter: drop-shadow(0 10px 32px rgba(0,150,138,.22)) !important;
  image-rendering: auto !important;
}

.loading-mascot-img {
  width: 140px !important;
  height: 140px !important;
  filter: drop-shadow(0 6px 20px rgba(0,150,138,.3)) !important;
  image-rendering: auto !important;
}

.hub-tip-mascot-img {
  width: 72px !important;
  height: 72px !important;
  filter: drop-shadow(0 4px 12px rgba(0,150,138,.2)) !important;
  image-rendering: auto !important;
}

.hist-empty-mascot-img {
  width: 140px !important;
  height: 140px !important;
  filter: drop-shadow(0 6px 20px rgba(0,150,138,.2)) !important;
  image-rendering: auto !important;
}

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner-sm {
  border-color: rgba(0,150,138,.2) !important;
  border-top-color: var(--fr-teal) !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--fr-surface) !important;
  border-top: 1.5px solid var(--fr-border) !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: auto !important;
}

.site-footer-inner {
  max-width: 1160px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
}

.site-footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
}

.site-footer-brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.05rem !important;
}

.site-footer-tagline {
  font-family: var(--fr-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: var(--fr-muted) !important;
  letter-spacing: 0.01em !important;
}

.site-footer-links {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.site-footer-links a {
  font-family: var(--fr-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--fr-muted) !important;
  text-decoration: none !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: var(--fr-r-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  transition: background .15s, color .15s !important;
}
.site-footer-links a:hover {
  background: rgba(27,52,97,.05) !important;
  color: var(--fr-navy) !important;
}
.site-footer-links a:last-child {
  color: #ef4444 !important;
}
.site-footer-links a:last-child:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.site-footer-copy {
  font-family: var(--fr-font) !important;
  font-size: 0.75rem !important;
  color: #b0aaa4 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.875rem !important;
  }
  .site-footer-copy { order: 3; }
}