/* ============================================================
   CareerLah — Full Visual Transformation v2
   Applied AFTER friendly-theme.css & style.css
   ============================================================ */

/* ── Global body ─────────────────────────────────────────── */
body {
  background: #ffffff !important;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -5%, rgba(99,102,241,.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 95%, rgba(0,150,138,.07) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.42); }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(99,102,241,.1) !important;
  height: 64px !important;
  box-shadow: 0 1px 16px rgba(0,0,0,.05), 0 0 0 1px rgba(99,102,241,.05) !important;
  z-index: 700 !important;
  pointer-events: auto !important;
}
.topbar * { pointer-events: auto !important; }

.brand-name {
  background: linear-gradient(135deg, #0f2244 0%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
  letter-spacing: -0.02em !important;
}

.brand-mark {
  background: linear-gradient(135deg, #6366f1, #00968a) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35) !important;
  border-radius: 10px !important;
}

.nav-link {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  transition: color .14s ease, background .14s ease !important;
  padding: 0.4rem 0.75rem !important;
  color: #374151 !important;
  white-space: nowrap !important;
}
.nav-link:hover {
  background: rgba(99,102,241,.08) !important;
  color: #6366f1 !important;
}
.nav-link.active {
  background: rgba(99,102,241,.12) !important;
  color: #6366f1 !important;
  font-weight: 700 !important;
  transition: none !important;
}

/* ── Topbar responsive ───────────────────────────────────── */
.topbar-nav {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
.topbar-nav::-webkit-scrollbar { display: none !important; }

.topbar-left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Hamburger button (hidden on desktop) */
.topbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #374151;
  flex-shrink: 0;
  transition: background .14s;
  margin-left: 0.5rem;
}
.topbar-hamburger:hover { background: rgba(99,102,241,.08); color: #6366f1; }

/* Mobile nav drawer */
@media (max-width: 900px) {
  .topbar-hamburger {
    display: flex !important;
  }

  .topbar-nav {
    display: none !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(99,102,241,.12) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 0.625rem 1rem !important;
    margin-left: 0 !important;
    padding-left: 1rem !important;
    border-left: none !important;
    z-index: 699 !important;
    overflow-x: hidden !important;
  }
  .topbar-nav.mobile-open {
    display: flex !important;
  }
  .nav-link {
    width: 100% !important;
    text-align: left !important;
    padding: 0.625rem 0.875rem !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
  }
}

.topbar-pill {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.3) !important;
  font-weight: 700 !important;
}

/* ── Loading overlay ─────────────────────────────────────── */
.loading-overlay {
  background: linear-gradient(160deg, #0f2244 0%, #1e1b4b 50%, #312e81 100%) !important;
}
.loading-mascot-img {
  filter: drop-shadow(0 12px 32px rgba(99,102,241,.22)) !important;
  animation: mascotFloat 3.5s ease-in-out infinite !important;
}
.loading-bar-fill {
  background: linear-gradient(90deg, #6366f1, #a78bfa, #00968a) !important;
  background-size: 200% 100% !important;
  animation: loadBarShimmer 2s linear infinite !important;
}
@keyframes loadBarShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Hub Hero v2 ─────────────────────────────────────────── */
.hub-hero-v2 {
  background: linear-gradient(160deg, #f8f7ff 0%, #eef2ff 45%, #e0f2fe 100%) !important;
  border-bottom: 1px solid rgba(99,102,241,.12) !important;
  padding: 3.5rem 1.5rem 3rem !important;
  overflow: hidden !important;
  position: relative !important;
}
.hub-hero-v2::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hub-hero-v2-bg {
  background-image:
    radial-gradient(ellipse 55% 90% at 95% 50%, rgba(0,150,138,.14) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 0% 100%, rgba(99,102,241,.1) 0%, transparent 60%) !important;
}
.hub-eyebrow-v2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  margin-bottom: 0.625rem !important;
  letter-spacing: -0.01em !important;
}
.hub-hero-v2-title {
  font-size: clamp(2rem, 4.5vw, 3.125rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
  color: #0f2244 !important;
  margin-bottom: 0.875rem !important;
}
.hub-hero-v2-accent {
  background: linear-gradient(135deg, #6366f1 0%, #00968a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: unset !important;
}
.hub-hero-v2-sub {
  font-size: 1rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  max-width: 460px !important;
  margin-bottom: 1.75rem !important;
}
.hub-stat-num {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #4f46e5 !important;
  letter-spacing: -0.03em !important;
}
.hub-stat-label {
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}
.hub-mascot-img {
  width: 180px !important;
  height: 200px !important;
  filter: drop-shadow(0 16px 48px rgba(99,102,241,.22)) drop-shadow(0 4px 12px rgba(0,0,0,.1)) !important;
}
.hub-mascot-ring {
  border-color: rgba(99,102,241,.2) !important;
}
.hub-mascot-badge {
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  color: #0f2244 !important;
}

/* ── Hub section ─────────────────────────────────────────── */
.hub-section-title {
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #0f2244 !important;
}
.hub-section-sub {
  font-size: 0.875rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* ── Hub cards ───────────────────────────────────────────── */
.hub-card {
  background: #fff !important;
  border: 1.5px solid #ede9f8 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(99,102,241,.07), 0 1px 3px rgba(0,0,0,.04) !important;
  padding: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .2s !important;
  text-align: left !important;
}
.hub-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3.5px !important;
  border-radius: 20px 20px 0 0 !important;
  background: var(--card-stripe, linear-gradient(90deg, #6366f1, #a78bfa)) !important;
}
.hub-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 48px rgba(99,102,241,.14), 0 4px 12px rgba(0,0,0,.06) !important;
  border-color: rgba(99,102,241,.25) !important;
}
#hubAnalyseBtn   { --card-stripe: linear-gradient(90deg, #00968a 0%, #34d399 100%) !important; }
#hubDiscoverBtn  { --card-stripe: linear-gradient(90deg, #6366f1 0%, #a78bfa 100%) !important; }
#hubResumeBtn    { --card-stripe: linear-gradient(90deg, #f59e0b 0%, #fb923c 100%) !important; }
#hubCareerProfileBtn { --card-stripe: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%) !important; }

.hub-card-badge {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(16,185,129,.28) !important;
  border-radius: 6px !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.05em !important;
}
.hub-card-icon {
  width: 50px !important; height: 50px !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
  flex-shrink: 0 !important;
}
.hub-icon-teal {
  background: linear-gradient(135deg, rgba(0,150,138,.18), rgba(52,211,153,.12)) !important;
  color: #00968a !important;
}
.hub-icon-navy {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(167,139,250,.12)) !important;
  color: #6366f1 !important;
}
.hub-icon-amber {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(251,146,60,.12)) !important;
  color: #d97706 !important;
}
.hub-card-title {
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  color: #0f2244 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.4rem !important;
}
.hub-card-desc {
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  color: #64748b !important;
}
.hub-card-arrow {
  color: #e2e8f0 !important;
  flex-shrink: 0 !important;
  transition: color .2s, transform .2s !important;
}
.hub-card:hover .hub-card-arrow {
  color: #6366f1 !important;
  transform: translateX(5px) !important;
}

/* Tip strip */
.hub-tip-strip {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1.5px solid rgba(0,150,138,.2) !important;
  border-radius: 18px !important;
}
.hub-tip-mascot-img {
  filter: drop-shadow(0 4px 12px rgba(0,150,138,.18)) !important;
}

/* ── Form / inner pages ──────────────────────────────────── */
.form-section-wrap {
  background: #f8f9ff !important;
  min-height: calc(100vh - 64px) !important;
}

.pane-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #0f2244 !important;
}

/* Wizard steps */
.wizard-steps {
  background: transparent !important;
}
.step-dot.active, .step-dot.done {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.18) !important;
}
.step-line.done { background: #6366f1 !important; }
.step-label.active { color: #6366f1 !important; font-weight: 700 !important; }

/* Upload zone */
.upload-zone {
  border: 2px dashed rgba(99,102,241,.25) !important;
  background: rgba(99,102,241,.02) !important;
  border-radius: 16px !important;
  transition: border-color .2s, background .2s !important;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: #6366f1 !important;
  background: rgba(99,102,241,.05) !important;
}

/* Inputs */
textarea, input[type="text"], input[type="email"], input[type="password"] {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
textarea:focus, input[type="text"]:focus, input[type="email"]:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
  outline: none !important;
}

/* Submit / primary buttons */
.submit-btn, .btn-analyse, .btn-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.38) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  transition: transform .15s, box-shadow .15s, opacity .15s !important;
}
.submit-btn:hover, .btn-analyse:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.42) !important;
  opacity: 1 !important;
}

/* Level selector (Discover page) */
.level-btn.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
}

/* ── Page banners (all pages) ────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 35%, #0d4f5c 70%, #0a6e6e 100%) !important;
}
.page-hero-title {
  font-size: clamp(1.625rem, 3.5vw, 2.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}
.page-hero-badge {
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  font-weight: 700 !important;
}
.page-pill {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.9) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* Career banner override */
#bannerCareer {
  background: linear-gradient(135deg, #2d1b69 0%, #4f46e5 50%, #7c3aed 100%) !important;
}
#bannerCareer .page-hero-blob-1 { background: #a78bfa !important; opacity: 0.4 !important; }
#bannerCareer .page-hero-blob-2 { background: #c4b5fd !important; opacity: 0.3 !important; }

/* ── Results hero ────────────────────────────────────────── */
.results-hero {
  background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 35%, #0d4f5c 70%, #0a6e6e 100%) !important;
}
.results-headline {
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* ── Analysis cards ──────────────────────────────────────── */
.acard {
  border-radius: 18px !important;
  border: 1.5px solid #ede9f8 !important;
  box-shadow: 0 2px 12px rgba(99,102,241,.06) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.acard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.1) !important;
}

/* ── History items ───────────────────────────────────────── */
.hist-item {
  border-radius: 16px !important;
  border: 1.5px solid #ede9f8 !important;
  box-shadow: 0 1px 8px rgba(99,102,241,.05) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.hist-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,.1) !important;
  border-color: rgba(99,102,241,.25) !important;
}

/* ── Career profile ──────────────────────────────────────── */
.career-panel {
  background: transparent !important;
}
.career-results-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #2d1b69 50%, #4c1d95 100%) !important;
  border: 1.5px solid rgba(167,139,250,0.2) !important;
}
.career-job-card {
  border-radius: 16px !important;
  border: 1.5px solid #ede9f8 !important;
  transition: transform .15s, box-shadow .15s, border-color .15s !important;
}
.career-job-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,.1) !important;
  border-color: rgba(99,102,241,.3) !important;
}
.career-type-card {
  border-radius: 16px !important;
  border: 1.5px solid #ede9f8 !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.05) !important;
}

/* ── Auth pages ──────────────────────────────────────────── */
.auth-panel, .login-panel {
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(99,102,241,.12), 0 4px 16px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(99,102,241,.12) !important;
}
.auth-google-btn, .login-google-btn {
  border-radius: 12px !important;
  border: 1.5px solid rgba(99,102,241,.25) !important;
  transition: all .18s !important;
}
.auth-google-btn:hover, .login-google-btn:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.15) !important;
  transform: translateY(-1px) !important;
}

/* ── Quiz welcome card — overrides handled in full block below ── */

/* ── Quiz paginated layout ───────────────────────────────── */
.quiz-page-card {
  background: #fff;
  border: 1.5px solid #ede9f8;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: 0 4px 32px rgba(99,102,241,.09);
}
.quiz-page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}
.quiz-page-label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #6366f1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.quiz-page-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.quiz-page-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: all .25s;
}
.quiz-page-dot.done { background: #a78bfa; }
.quiz-page-dot.active { background: #6366f1; width: 22px; border-radius: 4px; }

.quiz-prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid #f8fafc;
}
.quiz-prow:last-of-type { border-bottom: none; }
.quiz-prow-q {
  font-size: 0.9375rem;
  color: #0f2244;
  font-weight: 500;
  line-height: 1.5;
  flex: 1;
}
.quiz-prow-btns {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.quiz-prow-yes, .quiz-prow-no {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  border: 1.5px solid;
  white-space: nowrap;
}
.quiz-prow-yes { border-color: #dcfce7; background: #f0fdf4; color: #15803d; }
.quiz-prow-yes:hover { border-color: #22c55e; background: #dcfce7; }
.quiz-prow-yes.chosen { border-color: #22c55e; background: #dcfce7; color: #15803d; box-shadow: 0 2px 8px rgba(34,197,94,.2); }
.quiz-prow-no { border-color: #fee2e2; background: #fef2f2; color: #b91c1c; }
.quiz-prow-no:hover { border-color: #ef4444; background: #fee2e2; }
.quiz-prow-no.chosen { border-color: #ef4444; background: #fee2e2; color: #b91c1c; box-shadow: 0 2px 8px rgba(239,68,68,.2); }

.quiz-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  gap: 1rem;
}
.quiz-page-answered-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
  flex: 1;
  text-align: center;
}
.quiz-next-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.quiz-back-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}
.quiz-back-btn:hover {
  color: #4f46e5 !important;
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
}
.quiz-next-btn {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

@media (max-width: 540px) {
  .quiz-prow { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .quiz-prow-btns { align-self: flex-end; }
  .quiz-page-card { padding: 1.5rem 1.25rem; }
}

/* ── Interview cards ─────────────────────────────────────── */
.interview-card {
  border-radius: 16px !important;
  border: 1.5px solid #ede9f8 !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.05) !important;
}

/* ── Disc (discover) cards ───────────────────────────────── */
.disc-card {
  border-radius: 20px !important;
  border: 1.5px solid #ede9f8 !important;
  box-shadow: 0 2px 14px rgba(99,102,241,.07) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.disc-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px rgba(99,102,241,.12) !important;
}

/* ── Resume hero ─────────────────────────────────────────── */
.ra-hero {
  background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 35%, #0d4f5c 70%, #0a6e6e 100%) !important;
  border-radius: 0 !important;
}

/* ── Score ring (results) ────────────────────────────────── */
.ring-fg { stroke: url(#ringGrad) !important; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(135deg, #0f2244 0%, #1b3461 100%) !important;
  border-top: none !important;
}

/* ============================================================
   Landing page transforms
   ============================================================ */

/* Landing body */
body {
  background: #ffffff !important;
}

/* Landing nav */
.lp-nav {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(99,102,241,.1) !important;
  box-shadow: 0 1px 16px rgba(0,0,0,.05) !important;
  height: 66px !important;
}
.lp-brand-mark {
  background: linear-gradient(135deg, #6366f1, #00968a) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35) !important;
  border-radius: 10px !important;
}
.lp-brand-name {
  background: linear-gradient(135deg, #0f2244 0%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
}
.lp-brand-beta {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(99,102,241,.28) !important;
  font-weight: 700 !important;
}
.lp-btn-solid {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.38) !important;
  font-weight: 700 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.lp-btn-solid:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.42) !important;
}

/* Hero section */
.lp-hero {
  background: linear-gradient(160deg, #f8f7ff 0%, #eef2ff 45%, #f0fdf4 100%) !important;
  border-bottom: 1px solid rgba(99,102,241,.1) !important;
}
.lp-hero::before {
  background-image: radial-gradient(circle, rgba(99,102,241,.08) 1.5px, transparent 1.5px) !important;
  mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, black 20%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, black 20%, transparent 80%) !important;
}
.lp-hero-blob-1 {
  background: radial-gradient(circle, rgba(99,102,241,.16) 0%, transparent 70%) !important;
}
.lp-hero-blob-2 {
  background: radial-gradient(circle, rgba(0,150,138,.1) 0%, transparent 70%) !important;
}
.lp-hero-kicker {
  background: rgba(99,102,241,.1) !important;
  border-color: rgba(99,102,241,.2) !important;
  color: #4f46e5 !important;
}
.lp-kicker-dot {
  background: #6366f1 !important;
}
@keyframes lp-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(99,102,241,.4); }
  50%       { opacity: .7; transform: scale(.85); box-shadow: 0 0 0 5px rgba(99,102,241,0); }
}
.lp-hero-h1 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  color: #0f2244 !important;
}
.lp-hero-h1-accent {
  background: linear-gradient(135deg, #6366f1 0%, #00968a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: unset !important;
}
.lp-hero-sub {
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  color: #475569 !important;
}

/* Feature cards */
.lp-feature-card, .feat-card {
  background: #fff !important;
  border: 1.5px solid #ede9f8 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(99,102,241,.07) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.lp-feature-card:hover, .feat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 36px rgba(99,102,241,.12) !important;
  border-color: rgba(99,102,241,.2) !important;
}
.feat-icon-wrap {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(99,102,241,.06)) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.12) !important;
}

/* How it works */
.hw-card {
  background: #fff !important;
  border: 1.5px solid #ede9f8 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(99,102,241,.06) !important;
}
.hw-step-num {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.3) !important;
}

/* Stats section */
.lp-stats {
  background: linear-gradient(160deg, #f8f7ff 0%, #eef2ff 100%) !important;
  border-top: 1px solid rgba(99,102,241,.1) !important;
  border-bottom: 1px solid rgba(99,102,241,.1) !important;
}
.stat-num {
  background: linear-gradient(135deg, #4f46e5 0%, #00968a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
}

/* CTA section */
.lp-cta {
  background: linear-gradient(135deg, #0f2244 0%, #1e3a5f 40%, #0d4f5c 70%, #0a6e6e 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.lp-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(99,102,241,.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,150,138,.2) 0%, transparent 50%);
  pointer-events: none;
}

/* Footer */
.lp-footer, .site-footer {
  background: linear-gradient(135deg, #0f2244 0%, #1b3461 100%) !important;
  border-top: none !important;
}
.lp-footer .sf-col-title,
.site-footer .sf-col-title {
  color: rgba(255,255,255,.5) !important;
  -webkit-text-fill-color: rgba(255,255,255,.5) !important;
}
.lp-footer .sf-col-links a,
.lp-footer .sf-col-links button,
.site-footer .sf-col-links a,
.site-footer .sf-col-links button {
  color: rgba(255,255,255,.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,.75) !important;
}
.lp-footer .sf-col-links a:hover,
.lp-footer .sf-col-links button:hover,
.site-footer .sf-col-links a:hover,
.site-footer .sf-col-links button:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.lp-footer .sf-copy,
.site-footer .sf-copy,
.lp-footer-bottom,
.sf-bottom-inner {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
}
.lp-footer .sf-desc,
.site-footer .sf-desc {
  color: rgba(255,255,255,.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,.55) !important;
}

/* Product visual card (hero right side) */
.lp-product-card {
  background: #fff !important;
  border: 1.5px solid rgba(99,102,241,.15) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(99,102,241,.15), 0 4px 16px rgba(0,0,0,.06) !important;
}

/* Login / register pages */
.auth-panel, .login-card, .register-card {
  background: #fff !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(99,102,241,.12) !important;
  box-shadow: 0 24px 64px rgba(99,102,241,.12), 0 4px 16px rgba(0,0,0,.06) !important;
}

/* ============================================================
   Hub Hero v3 — Bold gradient banner (ActiveSG-inspired)
   ============================================================ */

/* Override old hub-hero styles */
.hub-hero-v2, .hub-hero-v2 * { display: none !important; }

.hub-hero-v3 {
  background: linear-gradient(135deg, #0f2244 0%, #1e3f8f 25%, #4f46e5 55%, #0891b2 80%, #00968a 100%);
  position: relative;
  overflow: hidden;
  padding: 2.75rem 1.5rem 0;
  min-height: 300px;
}

/* Large decorative background circles */
.hv3-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hv3-bg-c1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
  top: -120px; left: -80px;
}
.hv3-bg-c2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0,150,138,.25) 0%, transparent 70%);
  bottom: -80px; right: -60px;
}
.hv3-bg-c3 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(99,102,241,.3) 0%, transparent 70%);
  top: 20px; right: 30%;
}

/* Inner layout: floating cards flanking centre */
.hv3-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  align-items: flex-end;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* Centre copy + mascot */
.hv3-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hv3-eyebrow {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.75) !important;
  margin-bottom: 0.625rem !important;
  letter-spacing: 0.01em !important;
}

.hv3-title {
  font-size: clamp(1.875rem, 4vw, 2.875rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 0.625rem !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.25) !important;
}

.hv3-title-accent {
  color: #7efff5 !important;
  -webkit-text-fill-color: #7efff5 !important;
  text-shadow: 0 0 40px rgba(0,245,220,.4) !important;
}

.hv3-sub {
  font-size: 0.9375rem !important;
  color: rgba(255,255,255,.8) !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* Mascot wrap with floating deco */
.hv3-mascot-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 220px;
  height: 210px;
}

.hv3-mascot-img {
  width: 180px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 -8px 32px rgba(99,102,241,.35)) drop-shadow(0 8px 24px rgba(0,0,0,.2)) !important;
  animation: mascotFloat 3.5s ease-in-out infinite !important;
  position: relative;
  z-index: 2;
}

/* Decorative floating SVG icons */
.hv3-deco {
  position: absolute;
  animation: hv3-decoFloat 4s ease-in-out infinite;
  z-index: 1;
}
.hv3-deco-briefcase {
  top: 10px; left: 0;
  animation-delay: 0s;
}
.hv3-deco-chart {
  top: 30px; right: 8px;
  animation-delay: 0.8s;
}
.hv3-deco-star {
  top: 0; right: 40px;
  animation-delay: 1.4s;
}
.hv3-deco-check {
  bottom: 60px; left: 10px;
  animation-delay: 0.4s;
}
@keyframes hv3-decoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(8deg); }
}

/* Floating info cards (left/right) */
.hv3-float-card {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: hv3-decoFloat 5s ease-in-out infinite;
  align-self: center;
  margin-bottom: 2.5rem;
}
.hv3-card-left  { animation-delay: 0.3s; }
.hv3-card-right { animation-delay: 1.1s; }

.hv3-fc-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hv3-fc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hv3-fc-val {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

/* Responsive */
@media (max-width: 760px) {
  .hv3-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hv3-float-card { display: none; }
  .hv3-mascot-wrap { width: 160px; height: 160px; }
  .hv3-mascot-img { width: 140px !important; }
  .hub-hero-v3 { padding: 2rem 1.25rem 0; }
}

/* Override transform.css hub-hero-v2 rule since we replaced it */
.hub-hero-v2 { display: none !important; }

/* ============================================================
   Landing page hero — bold gradient background + mascot
   ============================================================ */

.lp-hero {
  background: linear-gradient(135deg, #0f2244 0%, #1e3f8f 25%, #4f46e5 55%, #0891b2 80%, #00968a 100%) !important;
  border-bottom: none !important;
}
.lp-hero::before {
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1.5px, transparent 1.5px) !important;
  mask-image: radial-gradient(ellipse 80% 100% at 80% 50%, black 20%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 80% 50%, black 20%, transparent 80%) !important;
}
.lp-hero-blob-1 {
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%) !important;
  width: 600px !important; height: 600px !important;
}
.lp-hero-blob-2 {
  background: radial-gradient(circle, rgba(0,150,138,.25) 0%, transparent 70%) !important;
}
.lp-hero-kicker {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.9) !important;
}
.lp-kicker-dot { background: #7efff5 !important; }
.lp-hero-h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  color: #fff !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.2) !important;
}
.lp-hero-h1-accent {
  color: #7efff5 !important;
  -webkit-text-fill-color: #7efff5 !important;
  background: none !important;
  text-shadow: 0 0 40px rgba(126,255,245,.4) !important;
}
.lp-hero-sub {
  color: rgba(255,255,255,.8) !important;
  font-size: 1.0625rem !important;
}
.lp-hero-note {
  color: rgba(255,255,255,.55) !important;
}
.lp-btn-outline.lp-btn-lg {
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.1) !important;
}
.lp-btn-outline.lp-btn-lg:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
}

/* Product card — glass treatment on dark bg */
.lp-card.lp-card-float {
  background: rgba(255,255,255,.96) !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.12) !important;
  border-radius: 22px !important;
}
.lp-badge-1, .lp-badge-2 {
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* Mascot bottom-right of visual */
.lp-hero-mascot {
  position: absolute !important;
  bottom: -8px !important;
  right: -24px !important;
  width: 100px !important;
  height: auto !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)) !important;
  animation: mascotFloat 3.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* ── Tracker Analytics Dashboard ── */
.tracker-analytics {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  border-radius: 18px;
  padding: 1.75rem 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tracker-analytics::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}
.tracker-analytics::after {
  content: "";
  position: absolute;
  bottom: -80px; left: 20px;
  width: 180px; height: 180px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}
.tracker-analytics-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  margin: 0 0 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tracker-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .tracker-analytics-grid { grid-template-columns: 1fr 1fr; }
  .tan-response { display: none; }
}
@media (max-width: 560px) {
  .tracker-analytics-grid { grid-template-columns: 1fr; }
}
/* KPI row */
.tan-kpis {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.tan-kpi {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
  gap: 3px;
  transition: background .2s;
}
.tan-kpi:hover { background: rgba(255,255,255,.16); }
.tan-kpi-blue   { border-color: rgba(96,165,250,.4); }
.tan-kpi-purple { border-color: rgba(167,139,250,.4); }
.tan-kpi-green  { border-color: rgba(74,222,128,.4); }
.tan-kpi-red    { border-color: rgba(248,113,113,.4); }
.tan-kpi-num {
  font-size: 1.625rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.tan-kpi-blue   .tan-kpi-num { color: #93c5fd; }
.tan-kpi-purple .tan-kpi-num { color: #c4b5fd; }
.tan-kpi-green  .tan-kpi-num { color: #86efac; }
.tan-kpi-red    .tan-kpi-num { color: #fca5a5; }
.tan-kpi-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
/* Breakdown bar */
.tan-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.6rem;
}
.tan-bar-track {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  margin-bottom: 0.75rem;
}
.tan-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
}
.tan-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}
.tan-legend-item span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: .9;
}
/* Donut */
.tan-response { text-align: center; }
.tan-donut-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tan-donut { display: block; filter: drop-shadow(0 4px 12px rgba(99,102,241,.4)); }
.tan-donut-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.tan-donut-label span:first-child {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
}
.tan-donut-label span:last-child {
  font-size: 0.55rem;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Tracker table footer (add row + pagination + export) ── */
.tracker-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tracker-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tpag-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background .15s;
}
.tpag-btn:hover:not(:disabled) { background: #e5e7eb; }
.tpag-btn:disabled { opacity: .4; cursor: default; }
.tpag-info {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
  min-width: 80px;
  text-align: center;
}
.tracker-export-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.35rem 0.875rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
}
.tracker-export-btn:hover { background: #e5e7eb; }

/* ── Tracker checkbox column ── */
.tracker-table th:first-child,
.tracker-table td:first-child {
  width: 36px !important;
  padding: 0 8px !important;
  text-align: center !important;
}
.trow-check, #tSelectAll {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
}

/* ── Sortable column headers ── */
.tsh-sortable { white-space: nowrap; }
.tsh-sortable:hover { background: #f0f0ff; }
.tsh-active { color: #6366f1 !important; }
.tsh-arrow { font-size: 0.7rem; color: #9ca3af; }
.tsh-active .tsh-arrow { color: #6366f1; }

/* ── Long text in table cells ── */
.tsheet-input {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-height: 28px !important;
  height: auto !important;
}
.tracker-table td { vertical-align: top !important; padding-top: 6px !important; }

/* ── Status select min-width to fit "Interviewing" ── */
.tsheet-select {
  min-width: 110px !important;
  width: 100% !important;
}

/* ── Results hero v2 (with mascot) ── */
.rh-v2 {
  overflow: visible !important;
  padding-bottom: 0 !important;
}
.rh-inner-v2 {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: 2rem !important;
  padding-bottom: 1.5rem !important;
}
.rh-deco-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.rh-deco-c1 {
  width: 260px; height: 260px;
  background: rgba(255,255,255,.04);
  top: -80px; right: 160px;
}
.rh-deco-c2 {
  width: 160px; height: 160px;
  background: rgba(255,255,255,.04);
  bottom: -40px; right: 60px;
}
.rh-mascot-col {
  position: relative;
  align-self: flex-end;
  flex-shrink: 0;
}
.rh-mascot-img {
  width: 120px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
  animation: mascotFloat 3.5s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 640px) {
  .rh-inner-v2 { grid-template-columns: 1fr auto !important; }
  .rh-mascot-col { display: none; }
}

/* ── CareerLah brand name font ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap');
.brand-name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.03em !important;
}
.brand-logo-wrap { gap: 4px !important; }

/* ── Personality type cards (ctc) ── */
.career-type-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 0.875rem !important;
  margin-bottom: 2rem !important;
}
.ctc-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 1rem 1.125rem;
  border-top: 3px solid var(--clr, #6366f1);
  transition: box-shadow .2s, transform .2s;
}
.ctc-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.ctc-header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}
.ctc-letter {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 900;
  flex-shrink: 0;
}
.ctc-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e1b4b;
  line-height: 1.2;
}
.ctc-primary-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: #6366f1;
  color: #fff;
  border-radius: 99px;
  padding: 1px 7px;
  display: inline-block;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctc-desc {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.5;
}

/* ── Job cards (cjc) ── */
.career-jobs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 0.875rem !important;
}
.cjc-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.cjc-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); transform: translateY(-2px); }
.cjc-top { border-color: #c7d2fe; box-shadow: 0 4px 16px rgba(99,102,241,.1); }
.cjc-top-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.75rem;
}
.cjc-rank { font-weight: 800; font-size: 0.8rem; }
.cjc-badge {
  background: #6366f1;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cjc-stars { margin-left: auto; font-size: 0.75rem; letter-spacing: -1px; }
.cjc-body { padding: 0.75rem 0.875rem 0.5rem; flex: 1; }
.cjc-title { font-size: 0.875rem; font-weight: 700; color: #1e1b4b; margin-bottom: 0.3rem; line-height: 1.3; }
.cjc-type { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: #6b7280; font-weight: 500; }
.cjc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cjc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0.5rem 0.875rem 0.75rem;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
}
.cjc-link {
  font-size: 0.68rem;
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
  border-radius: 6px;
  padding: 2px 8px;
  text-decoration: none;
  transition: background .15s;
}
.cjc-link:hover { background: #c7d2fe; color: #3730a3; }
.cjs-header { margin-bottom: 1rem; }

/* ── Doc Generator Grid (Cover Letter + Resume side by side) ── */
.doc-gen-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem !important;
  margin: 1.5rem 0 0 !important;
}
@media (max-width: 700px) {
  .doc-gen-grid { grid-template-columns: 1fr !important; }
}
.doc-gen-card {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
  transition: box-shadow .2s, transform .2s !important;
}
.doc-gen-card:hover { box-shadow: 0 6px 24px rgba(99,102,241,.12) !important; transform: translateY(-1px) !important; }
.doc-gen-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  padding: 1.1rem 1.25rem 0.9rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
}
.doc-gen-card-icon { font-size: 1.6rem; line-height: 1; }
.doc-gen-card-title { font-size: 1rem; font-weight: 700; color: #1e1b4b; }
.doc-gen-card-sub   { font-size: 0.78rem; color: #6b7280; margin-top: 1px; }
.doc-gen-card-body  { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; flex: 1; }
.doc-gen-hint { font-size: 0.82rem; color: #6b7280; line-height: 1.55; margin: 0; }
.doc-gen-btn  { width: 100% !important; justify-content: center !important; gap: 0.5rem !important; display: flex !important; align-items: center !important; }
.doc-gen-status { font-size: 0.82rem; color: #6b7280; text-align: center; }

/* ── Cover Letter Preview ── */
.cl-preview-body  { font-family: "Calibri", "Georgia", serif !important; padding: 2.5rem 3rem !important; }
.cl-preview-doc   { max-width: 680px; margin: 0 auto; }
.cl-preview-line  { font-size: 0.9rem; line-height: 1.7; color: #1a1a2e; }
.cl-preview-blank { height: 0.85rem; }
.cl-copy-preview-btn {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 8px !important;
  padding: 0.35rem 0.875rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  transition: background .15s !important;
}
.cl-copy-preview-btn:hover { background: rgba(255,255,255,.25) !important; }

/* ── Fit history hint ── */
.fit-history-hint {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.82rem !important;
  color: #6b7280 !important;
  margin-top: 0.75rem !important;
  padding: 0.5rem 0.75rem !important;
  background: #f5f3ff !important;
  border-radius: 8px !important;
  border: 1px solid #e0e7ff !important;
}
.fit-history-link {
  background: none !important;
  border: none !important;
  color: #6366f1 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  padding: 0 !important;
}
.fit-history-link:hover { color: #4338ca !important; }

/* ── Tracker Bulk Action Bar ── */
.tracker-bulk-bar {
  display: none;
  position: fixed !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  color: #fff !important;
  border-radius: 16px !important;
  padding: 0.75rem 1rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  z-index: 900 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08) !important;
  min-width: 320px !important;
  animation: tbbSlideUp .2s ease forwards !important;
  backdrop-filter: blur(12px) !important;
}
.tracker-bulk-bar[style*="flex"] {
  display: flex !important;
  transform: translateX(-50%) translateY(0) !important;
}
@keyframes tbbSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tbb-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
}
.tbb-check-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(99,102,241,.35) !important;
  border: 1px solid rgba(99,102,241,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.tbb-count {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.95) !important;
  white-space: nowrap !important;
}
.tbb-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.tbb-cancel-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.8) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 10px !important;
  padding: 0.4rem 0.875rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.tbb-cancel-btn:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.tbb-delete-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: #dc2626 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.4rem 0.875rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s, transform .1s !important;
  white-space: nowrap !important;
}
.tbb-delete-btn:hover { background: #b91c1c !important; transform: scale(1.03) !important; }
.tbb-delete-btn:active { transform: scale(0.97) !important; }

/* ── Discovery Cards v2 ── */
.discovery-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.125rem !important;
  padding: 0.25rem 0 1.5rem !important;
}
.disc-card-v2 {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: 16px !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
  transition: box-shadow .2s, transform .2s !important;
  animation: discCardIn .35s ease both !important;
  animation-delay: calc(var(--i) * 0.07s) !important;
}
.disc-card-v2:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1) !important; transform: translateY(-2px) !important; }
@keyframes discCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dcv2-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}
.dcv2-num {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
  min-width: 2rem !important;
  opacity: 0.85 !important;
}
.dcv2-titles { flex: 1; }
.dcv2-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1e1b4b !important;
  line-height: 1.3 !important;
  margin-bottom: 0.25rem !important;
}
.dcv2-industry {
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}
.dcv2-fit {
  font-size: 0.82rem !important;
  color: #4b5563 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0.625rem 0.75rem !important;
  background: #f9fafb !important;
  border-radius: 8px !important;
  border-left: 3px solid var(--accent) !important;
}
.dcv2-section { display: flex; flex-direction: column; gap: 0.35rem; }
.dcv2-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #059669 !important;
}
.dcv2-label-gap { color: #7c3aed !important; }
.dcv2-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dcv2-tag {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 99px !important;
}
.dcv2-tag-strength { background: #d1fae5 !important; color: #065f46 !important; }
.dcv2-tag-gap      { background: #ede9fe !important; color: #5b21b6 !important; }
.dcv2-companies {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  padding-top: 0.25rem !important;
  border-top: 1px solid #f3f4f6 !important;
}
.dcv2-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid #f3f4f6 !important;
}
.dcv2-links { display: flex; flex-wrap: wrap; gap: 4px; }
.dcv2-analyse-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.875rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .15s, transform .1s !important;
  white-space: nowrap !important;
}
.dcv2-analyse-btn:hover { opacity: 0.88 !important; transform: scale(1.03) !important; }
.dcv2-analyse-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ── RIASEC Quiz Welcome Card ── */
.quiz-welcome-card {
  max-width: 560px !important;
  margin: 2rem auto !important;
  text-align: center !important;
  padding: 3rem 2.5rem 2.5rem !important;
  background: linear-gradient(145deg, #1e1b4b 0%, #4f46e5 55%, #7c3aed 100%) !important;
  border-radius: 28px !important;
  border: none !important;
  box-shadow: 0 16px 64px rgba(79,70,229,.4), 0 2px 8px rgba(0,0,0,.12) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.1rem !important;
  overflow: hidden !important;
  position: relative !important;
}
.quiz-welcome-card::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important; right: -60px !important;
  width: 200px !important; height: 200px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.quiz-welcome-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important; left: -40px !important;
  width: 150px !important; height: 150px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.quiz-welcome-mascot {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  padding: 14px !important;
  backdrop-filter: blur(8px) !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}
.quiz-welcome-title {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  position: relative !important;
  z-index: 1 !important;
}
.quiz-welcome-sub {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: 400px !important;
  position: relative !important;
  z-index: 1 !important;
}
.quiz-welcome-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 0.1rem !important;
  position: relative !important;
  z-index: 1 !important;
}
.quiz-welcome-pill {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 99px !important;
  backdrop-filter: blur(4px) !important;
  letter-spacing: 0.02em !important;
}
.quiz-start-btn {
  margin-top: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #fff !important;
  color: #4f46e5 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0.85rem 2.25rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
  transition: all .18s !important;
  position: relative !important;
  z-index: 1 !important;
}
.quiz-start-btn:hover {
  background: #f5f3ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.28) !important;
}

/* ── Likert Scale Quiz ── */
.quiz-likert-row {
  padding: 1rem 0.75rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  border-radius: 12px !important;
  transition: background .15s !important;
}
.quiz-likert-row:hover { background: #fafaff !important; }
.quiz-likert-row.qlr-answered { background: #f9f8ff !important; }
.quiz-likert-row:last-of-type { border-bottom: none !important; }
.quiz-likert-q {
  font-size: 0.9rem !important;
  color: #1e1b4b !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
}
.quiz-q-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  margin-top: 0.05rem !important;
}
.quiz-likert-scale {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}
.quiz-likert-btns {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.4rem !important;
  width: 100% !important;
}
.quiz-likert-btn {
  border-radius: 12px !important;
  border: 2px solid #e5e7eb !important;
  background: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  padding: 0.6rem 0.25rem !important;
  transition: all .15s !important;
  min-height: 62px !important;
}
.ql-num {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #374151 !important;
  line-height: 1 !important;
}
.ql-label {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
/* Color-coded buttons */
.ql-val-1 { border-color: #fecaca !important; }
.ql-val-1:hover { background: #fef2f2 !important; border-color: #f87171 !important; }
.ql-val-1.ql-chosen { background: #ef4444 !important; border-color: #ef4444 !important; box-shadow: 0 3px 12px rgba(239,68,68,.3) !important; transform: scale(1.05) !important; }
.ql-val-1.ql-chosen .ql-num { color: #fff !important; }
.ql-val-1.ql-chosen .ql-label { color: rgba(255,255,255,.8) !important; }

.ql-val-2 { border-color: #fed7aa !important; }
.ql-val-2:hover { background: #fff7ed !important; border-color: #fb923c !important; }
.ql-val-2.ql-chosen { background: #f97316 !important; border-color: #f97316 !important; box-shadow: 0 3px 12px rgba(249,115,22,.3) !important; transform: scale(1.05) !important; }
.ql-val-2.ql-chosen .ql-num { color: #fff !important; }
.ql-val-2.ql-chosen .ql-label { color: rgba(255,255,255,.8) !important; }

.ql-val-3 { border-color: #e5e7eb !important; }
.ql-val-3:hover { background: #f9fafb !important; border-color: #9ca3af !important; }
.ql-val-3.ql-chosen { background: #64748b !important; border-color: #64748b !important; box-shadow: 0 3px 12px rgba(100,116,139,.3) !important; transform: scale(1.05) !important; }
.ql-val-3.ql-chosen .ql-num { color: #fff !important; }
.ql-val-3.ql-chosen .ql-label { color: rgba(255,255,255,.8) !important; }

.ql-val-4 { border-color: #99f6e4 !important; }
.ql-val-4:hover { background: #f0fdf4 !important; border-color: #2dd4bf !important; }
.ql-val-4.ql-chosen { background: #00968a !important; border-color: #00968a !important; box-shadow: 0 3px 12px rgba(0,150,138,.3) !important; transform: scale(1.05) !important; }
.ql-val-4.ql-chosen .ql-num { color: #fff !important; }
.ql-val-4.ql-chosen .ql-label { color: rgba(255,255,255,.8) !important; }

.ql-val-5 { border-color: #bfdbfe !important; }
.ql-val-5:hover { background: #eff6ff !important; border-color: #60a5fa !important; }
.ql-val-5.ql-chosen { background: linear-gradient(135deg, #4f46e5, #0f2244) !important; border-color: #4f46e5 !important; box-shadow: 0 3px 12px rgba(79,70,229,.35) !important; transform: scale(1.05) !important; }
.ql-val-5.ql-chosen .ql-num { color: #fff !important; }
.ql-val-5.ql-chosen .ql-label { color: rgba(255,255,255,.8) !important; }

@media (max-width: 520px) {
  .quiz-likert-btn { min-height: 54px !important; padding: 0.5rem 0.1rem !important; }
  .ql-num { font-size: 0.875rem !important; }
  .ql-label { font-size: 0.52rem !important; }
  .quiz-likert-btns { gap: 0.3rem !important; }
}

/* ── Fun Fact ── */
.quiz-funfact {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  padding: 0.875rem 1rem !important;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
  border-radius: 12px !important;
  border: 1px solid #e0e7ff !important;
  margin: 0.5rem 0 !important;
}
.qff-mascot { width: 40px; height: auto; flex-shrink: 0; }
.qff-text { flex: 1; }
.qff-badge {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #6366f1 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.qff-text p {
  font-size: 0.78rem !important;
  color: #4b5563 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}