/**
 * Task #1579880 — Tools Pages: 10/10 Visual Perfection
 * Targets: /find-my-settlements, /quiz, /tools, /calculator, /document-vault, /claim-tracker
 * Standard: Apple simplicity + Stripe professionalism + Bloomberg trustworthiness + Tesla elegance
 *
 * Coverage:
 *  - Forms & Inputs: full-width mobile, proper padding, visible focus rings
 *  - Quiz Flow: progress bar, step dots, answer options (44px+ tap), selected states
 *  - Scanner/Calculator: results cards, step indicators, CTAs
 *  - Premium Polish: loading states, empty states, success states, transitions
 *  - Tools Hub: hub-card elevation, hover, badge polish, CTA arrow micro-animation
 *  - Document Vault: dark-mode-compatible, upload zone, stats
 *  - Claim Tracker: phase badges, search UX, mobile table
 *  - Paywall: refined blur overlay, gate banner contrast
 *  - Universal: focus-visible ring, prefers-reduced-motion, 375px + 1440px verified
 */

/* ══════════════════════════════════════════════════════════════════════
   1. UNIVERSAL TOKENS & RESETS
══════════════════════════════════════════════════════════════════════ */

:root {
  --sr-emerald:       #00875A;
  --sr-emerald-dark:  #006B4D;
  --sr-emerald-light: #E6F9F3;
  --sr-emerald-pale:  #F0FDF9;
  --sr-navy:          #0D1B2A;
  --sr-navy-mid:      #1e293b;
  --sr-navy-dark:     #0f172a;
  --sr-amber:         #F59E0B;
  --sr-amber-pale:    #FEF3C7;
  --sr-bg:            #FAF9F5;
  --sr-white:         #FFFFFF;
  --sr-text:          #111827;
  --sr-text-muted:    #6B7280;
  --sr-text-light:    #9CA3AF;
  --sr-border:        #E5E7EB;
  --sr-border-focus:  #00875A;
  --sr-shadow-sm:     0 1px 3px rgba(0,0,0,.06);
  --sr-shadow-md:     0 4px 16px rgba(0,0,0,.08);
  --sr-shadow-lg:     0 8px 32px rgba(0,0,0,.12);
  --sr-radius-sm:     8px;
  --sr-radius:        12px;
  --sr-radius-lg:     16px;
  --sr-radius-xl:     20px;
  --sr-transition:    all 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* Reduced motion: kill all animations for a11y */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   2. TOOLS HUB PAGE — /tools
   Classes: .hub-hero, .hub-card, .hub-section-label, .hub-card__icon, etc.
══════════════════════════════════════════════════════════════════════ */

/* Hero improvements */
.hub-hero {
  background: linear-gradient(160deg, #0D1B2A 0%, #1a2f45 60%, #0D1B2A 100%) !important;
  padding: clamp(3rem, 8vw, 5rem) 1.25rem clamp(2.5rem, 6vw, 4rem) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hub-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 70% at 20% 50%, rgba(0,135,90,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(0,135,90,0.07) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.hub-hero .container { position: relative; z-index: 1; }

.hub-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0,135,90,0.15) !important;
  border: 1px solid rgba(0,135,90,0.35) !important;
  color: #6EE7B7 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 1rem !important;
}
.hub-hero__title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  line-height: 1.1 !important;
  margin: 0 0 0.75rem !important;
  letter-spacing: -0.02em !important;
}
.hub-hero__sub {
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  color: rgba(255,255,255,0.72) !important;
  max-width: 540px !important;
  line-height: 1.65 !important;
  margin: 0 0 1.75rem !important;
}
.tools-hero-btns {
  display: flex !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

/* Hub cards — premium elevation + interaction */
.hub-card {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  color: var(--sr-text) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
  box-shadow: var(--sr-shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hub-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, var(--sr-emerald-pale) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
.hub-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 0 1px rgba(0,135,90,0.15) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(0,135,90,0.25) !important;
  text-decoration: none !important;
  color: var(--sr-text) !important;
}
.hub-card:hover::before { opacity: 1 !important; }

.hub-card__icon {
  width: 42px !important;
  height: 42px !important;
  background: var(--sr-emerald-light) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--sr-emerald) !important;
  flex-shrink: 0 !important;
  margin-bottom: 0.25rem !important;
  transition: background 0.2s ease !important;
}
.hub-card:hover .hub-card__icon {
  background: var(--sr-emerald) !important;
  color: #fff !important;
}

.hub-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 999px !important;
  background: var(--sr-emerald-light) !important;
  color: var(--sr-emerald-dark) !important;
  border: 1px solid rgba(0,135,90,0.2) !important;
  width: fit-content !important;
}
.hub-card__badge--new {
  background: var(--sr-amber-pale) !important;
  color: #92400E !important;
  border-color: rgba(245,158,11,0.3) !important;
}

.hub-card__title {
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: var(--sr-text) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.hub-card__desc {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
  margin: 0 !important;
}
.hub-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--sr-emerald) !important;
  margin-top: 0.25rem !important;
  transition: gap 0.2s ease !important;
}
.hub-card:hover .hub-card__cta { gap: 7px !important; }

/* Hub section labels */
.hub-section-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: var(--sr-emerald) !important;
  margin-bottom: 1rem !important;
  margin-top: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.hub-section-label::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--sr-emerald) !important;
  border-radius: 2px !important;
}
.hub-section-label:first-child { margin-top: 0 !important; }

/* Section backgrounds */
.section-alt { background: #F8F9FA !important; }

/* 375px: single column cards */
@media (max-width: 479px) {
  .hub-card { padding: 1.25rem !important; }
  .hub-hero { padding: 2rem 1rem 1.75rem !important; }
  .tools-hero-btns { flex-direction: column !important; }
  .tools-hero-btns .btn { width: 100% !important; text-align: center !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   3. FIND MY SETTLEMENTS — /find-my-settlements
   Classes: .fms2-*
══════════════════════════════════════════════════════════════════════ */

/* Progress dots: larger tap area on mobile */
.fms2-prog-dot {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* Better focus on search input */
.fms2-search:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* Popular chips: min 44px height for touch targets */
.fms2-popular-chip {
  min-height: 44px !important;
  padding: 0.5rem 0.9rem !important;
  transition: var(--sr-transition) !important;
}
.fms2-popular-chip.selected {
  background: var(--sr-emerald-pale) !important;
  border-color: var(--sr-emerald) !important;
  color: var(--sr-emerald-dark) !important;
  box-shadow: 0 0 0 2px rgba(0,135,90,0.1) !important;
}

/* Primary button — lift + depth shadow */
.fms2-btn-primary {
  background: linear-gradient(135deg, #00875A, #006B4D) !important;
  box-shadow: 0 4px 16px rgba(0,135,90,0.35), 0 1px 2px rgba(0,0,0,0.08) !important;
  min-height: 52px !important;
  border-radius: var(--sr-radius) !important;
  font-size: 1rem !important;
}
.fms2-btn-primary:hover {
  background: linear-gradient(135deg, #006B4D, #00553E) !important;
  box-shadow: 0 8px 28px rgba(0,135,90,0.45), 0 2px 4px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}

/* Result match cards */
.fms2-match-card {
  border-radius: var(--sr-radius) !important;
  transition: var(--sr-transition) !important;
}
.fms2-match-card:hover {
  box-shadow: var(--sr-shadow-md) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(0,135,90,0.2) !important;
}

/* Hero results block */
.fms2-hero {
  background: linear-gradient(135deg, #004D3A 0%, #0f172a 100%) !important;
  box-shadow: var(--sr-shadow-md) !important;
}
.fms2-hero-count {
  background: linear-gradient(135deg, #6EE7B7, #34D399) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Gate form inputs */
.fms2-field:focus {
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
  outline: none !important;
}

/* Error state */
.fms2-error {
  border-left: 3px solid #EF4444 !important;
  border-radius: 8px !important;
  animation: fmsShake 0.35s cubic-bezier(.36,.07,.19,.97) both !important;
}
@keyframes fmsShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Empty state */
.fms2-card .fms2-btn-primary { margin-top: 0.5rem !important; }

/* Locked card overlay */
.fms2-lock-overlay {
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* 375px adjustments */
@media (max-width: 479px) {
  .fms2-page { padding: 1rem 0.875rem 3rem !important; padding-right: 0.875rem !important; }
  .fms2-card { padding: 1.25rem 1rem !important; }
  .fms2-btn-primary { min-height: 56px !important; font-size: 1rem !important; }
  .fms2-popular-chip { min-height: 44px !important; font-size: 0.82rem !important; }
  .fms2-hero-count { font-size: 2.75rem !important; }
  .fms2-prog-line { width: 18px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   4. QUIZ PAGE — /quiz
   Classes: .qw-page, .qw-progress, .qw-screen, .qw-state-btn,
            .qw-brand-chip, .qw-option-btn, .qw-btn-primary, etc.
══════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.qw-page {
  background: var(--sr-bg) !important;
}

/* Progress bar */
.qw-progress {
  background: var(--sr-white) !important;
  border-bottom: 1px solid var(--sr-border) !important;
  padding: 0.875rem 1.25rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}
.qw-progress-track {
  background: #EFF6FF !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden !important;
}
.qw-progress-fill {
  background: linear-gradient(90deg, var(--sr-emerald), #34D399) !important;
  border-radius: 999px !important;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: 0 0 8px rgba(0,135,90,0.4) !important;
}
.qw-progress-label {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--sr-text) !important;
}
.qw-progress-steps {
  font-size: 0.8rem !important;
  color: var(--sr-text-muted) !important;
}
.qw-step-dots { gap: 6px !important; }
.qw-step-dot {
  width: 32px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #E5E7EB !important;
  transition: all 0.3s ease !important;
  cursor: default !important;
}
.qw-step-dot.active {
  background: var(--sr-emerald) !important;
  width: 20px !important;
  box-shadow: 0 0 8px rgba(0,135,90,0.5) !important;
}
.qw-step-dot.done {
  background: rgba(0,135,90,0.45) !important;
}

/* Screen card */
.qw-screen { position: relative !important; }
.qw-screen-q {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.35rem, 4vw, 1.75rem) !important;
  font-weight: 900 !important;
  color: var(--sr-text) !important;
  line-height: 1.2 !important;
  margin: 0 0 0.5rem !important;
}
.qw-screen-sub {
  font-size: 0.9rem !important;
  color: var(--sr-text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 1.25rem !important;
}

/* State search input */
.qw-state-search {
  width: 100% !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  font-size: 16px !important; /* 16px prevents iOS zoom */
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
  margin-bottom: 0.75rem !important;
}
.qw-state-search:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}
.qw-state-search::placeholder { color: var(--sr-text-light) !important; }

/* State buttons: 44px min tap target */
.qw-state-btn {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 1rem !important;
  border-radius: var(--sr-radius-sm) !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
  color: var(--sr-text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: var(--sr-transition) !important;
  text-align: left !important;
}
.qw-state-btn:hover {
  background: var(--sr-emerald-pale) !important;
  border-color: rgba(0,135,90,0.2) !important;
}
.qw-state-btn.selected,
.qw-state-btn[aria-selected="true"] {
  background: var(--sr-emerald-pale) !important;
  border-color: var(--sr-emerald) !important;
  font-weight: 700 !important;
  color: var(--sr-emerald-dark) !important;
}
.qw-check { opacity: 0; transition: opacity 0.15s !important; }
.qw-state-btn[aria-selected="true"] .qw-check { opacity: 1 !important; color: var(--sr-emerald) !important; }

/* Brand search input */
.qw-brand-search {
  width: 100% !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  font-size: 16px !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
  margin-bottom: 1rem !important;
}
.qw-brand-search:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* Brand chips: 44px min height */
.qw-brand-chip {
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.9rem !important;
  font-size: 0.85rem !important;
  border: 1.5px solid var(--sr-border) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  cursor: pointer !important;
  transition: var(--sr-transition) !important;
  font-weight: 500 !important;
}
.qw-brand-chip:hover {
  border-color: rgba(0,135,90,0.4) !important;
  background: var(--sr-emerald-pale) !important;
  transform: translateY(-1px) !important;
}
.qw-brand-chip.selected,
.qw-brand-chip[aria-pressed="true"] {
  background: var(--sr-emerald-pale) !important;
  border-color: var(--sr-emerald) !important;
  color: var(--sr-emerald-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(0,135,90,0.1) !important;
}

/* Option buttons (Yes/No/Not sure): large, clear, 44px+ */
.qw-option-btn {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  width: 100% !important;
  padding: 1rem 1.15rem !important;
  min-height: 64px !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  cursor: pointer !important;
  transition: var(--sr-transition) !important;
  margin-bottom: 0.6rem !important;
  text-align: left !important;
  box-shadow: var(--sr-shadow-sm) !important;
}
.qw-option-btn:hover {
  border-color: rgba(0,135,90,0.4) !important;
  background: var(--sr-emerald-pale) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--sr-shadow-md) !important;
}
.qw-option-btn.selected,
.qw-option-btn[aria-checked="true"] {
  border-color: var(--sr-emerald) !important;
  background: var(--sr-emerald-pale) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.1), var(--sr-shadow-sm) !important;
}
.qw-option-icon {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.qw-option-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}
.qw-option-label small {
  font-size: 0.78rem !important;
  color: var(--sr-text-muted) !important;
  font-weight: 400 !important;
}
.qw-option-radio {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #D1D5DB !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  transition: var(--sr-transition) !important;
  position: relative !important;
}
.qw-option-btn.selected .qw-option-radio,
.qw-option-btn[aria-checked="true"] .qw-option-radio {
  border-color: var(--sr-emerald) !important;
  background: var(--sr-emerald) !important;
}
.qw-option-btn.selected .qw-option-radio::after,
.qw-option-btn[aria-checked="true"] .qw-option-radio::after {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

/* Email input field */
.qw-email-input {
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  font-size: 16px !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  transition: var(--sr-transition) !important;
  box-sizing: border-box !important;
}
.qw-email-input:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}
.qw-email-input::placeholder { color: var(--sr-text-light) !important; }

/* Error banner */
.qw-error-banner {
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  border-left: 3px solid #EF4444 !important;
  border-radius: var(--sr-radius-sm) !important;
  padding: 0.65rem 0.9rem !important;
  font-size: 0.85rem !important;
  color: #DC2626 !important;
  margin-bottom: 0.75rem !important;
}

/* Primary action button */
.qw-btn-primary {
  background: linear-gradient(135deg, var(--sr-emerald), var(--sr-emerald-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sr-radius) !important;
  padding: 0.9rem 2rem !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  min-height: 52px !important;
  width: 100% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(0,135,90,0.35) !important;
  transition: var(--sr-transition) !important;
  margin-top: 1rem !important;
}
.qw-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,135,90,0.45) !important;
  background: linear-gradient(135deg, var(--sr-emerald-dark), #00553E) !important;
}
.qw-btn-primary:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Back button */
.qw-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
  border: none !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--sr-text-muted) !important;
  cursor: pointer !important;
  padding: 0.4rem 0 !important;
  margin-bottom: 0.75rem !important;
  transition: color 0.15s !important;
}
.qw-back:hover { color: var(--sr-text) !important; }

/* Skip link */
.qw-skip-link {
  display: block !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  color: var(--sr-text-muted) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  margin-top: 0.25rem !important;
  transition: color 0.15s !important;
}
.qw-skip-link:hover { color: var(--sr-emerald) !important; }

/* Email preview banner */
.qw-email-preview {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  background: var(--sr-emerald-pale) !important;
  border: 1px solid rgba(0,135,90,0.2) !important;
  border-radius: var(--sr-radius) !important;
  padding: 0.9rem 1rem !important;
  margin-bottom: 0.75rem !important;
}
.qw-email-preview-icon { font-size: 1.25rem; flex-shrink: 0; }
.qw-email-preview-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: 0.88rem !important;
  color: var(--sr-text) !important;
}
.qw-email-preview-text strong { font-weight: 700 !important; }
.qw-email-preview-text span { color: var(--sr-text-muted) !important; font-size: 0.82rem !important; }

/* Privacy text */
.qw-email-privacy {
  font-size: 0.75rem !important;
  color: var(--sr-text-light) !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
}

/* Results header */
.qw-results-headline {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.5rem, 5vw, 2rem) !important;
  font-weight: 900 !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.4rem !important;
}
.qw-hl-green {
  color: var(--sr-emerald) !important;
}
.qw-results-sub {
  font-size: 0.88rem !important;
  color: var(--sr-text-muted) !important;
  margin: 0 0 1.25rem !important;
}

/* Loading skeletons */
.qw-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
  background-size: 200% 100% !important;
  animation: qwShimmer 1.5s ease-in-out infinite !important;
  border-radius: var(--sr-radius) !important;
  height: 88px !important;
  margin-bottom: 0.6rem !important;
}
@keyframes qwShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Trust strip */
.qw-trust-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  padding: 0.875rem !important;
  background: #F9FAFB !important;
  border-radius: var(--sr-radius) !important;
  border: 1px solid var(--sr-border) !important;
  font-size: 0.78rem !important;
  color: var(--sr-text-muted) !important;
  font-weight: 500 !important;
  margin-top: 1rem !important;
}
.qw-trust-sep {
  opacity: 0.4 !important;
}

/* Restart button */
.qw-restart button {
  background: none !important;
  border: none !important;
  font-size: 0.85rem !important;
  color: var(--sr-text-muted) !important;
  cursor: pointer !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--sr-radius-sm) !important;
  transition: color 0.15s, background 0.15s !important;
}
.qw-restart button:hover {
  color: var(--sr-text) !important;
  background: #F3F4F6 !important;
}

/* Autopilot upsell */
.qw-autopilot-upsell {
  background: linear-gradient(135deg, var(--sr-navy-mid), var(--sr-navy-dark)) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.5rem !important;
  color: #fff !important;
  margin-top: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.qw-autopilot-upsell::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,135,90,0.15), transparent 70%) !important;
  pointer-events: none !important;
}

/* 375px quiz adjustments */
@media (max-width: 479px) {
  .qw-option-btn { min-height: 56px !important; padding: 0.875rem 1rem !important; }
  .qw-brand-chip { min-height: 40px !important; }
  .qw-btn-primary { min-height: 56px !important; font-size: 1.05rem !important; }
  .qw-state-btn { min-height: 44px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   5. CLAIM VALUE ESTIMATOR / TOOLS CALCULATOR — /tools/claim-calculator
   Classes: .cve-*, .tools-claim-calculator
══════════════════════════════════════════════════════════════════════ */

/* Step indicator line: flexible, not hard-capped */
.cve-step-line {
  flex: 1 !important;
  max-width: 80px !important;
  min-width: 12px !important;
}

/* Step number: clear active/done states */
.cve-step-num {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* Panel cards slide in */
.cve-panel.active {
  display: block !important;
}

/* Category buttons: 44px+ */
.cve-cat-btn {
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.9rem !important;
  border: 1.5px solid var(--sr-border) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  transition: var(--sr-transition) !important;
}
.cve-cat-btn:hover {
  border-color: rgba(0,135,90,0.4) !important;
  background: var(--sr-emerald-pale) !important;
}
.cve-cat-btn.selected {
  border-color: var(--sr-emerald) !important;
  background: var(--sr-emerald-pale) !important;
  color: var(--sr-emerald-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(0,135,90,0.1) !important;
}

/* Pill group options: large tappable */
.cve-pill-group { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; }
.cve-pill {
  min-height: 40px !important;
  padding: 0.45rem 1rem !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: 999px !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  cursor: pointer !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: var(--sr-transition) !important;
}
.cve-pill:hover {
  border-color: rgba(0,135,90,0.4) !important;
  background: var(--sr-emerald-pale) !important;
}
.cve-pill.selected {
  border-color: var(--sr-emerald) !important;
  background: var(--sr-emerald-pale) !important;
  color: var(--sr-emerald-dark) !important;
  font-weight: 700 !important;
}

/* Next/CTA buttons */
.cve-next-btn,
.cve-cta-btn {
  background: linear-gradient(135deg, var(--sr-emerald), var(--sr-emerald-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sr-radius) !important;
  padding: 0.85rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  min-height: 52px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0,135,90,0.35) !important;
  transition: var(--sr-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cve-next-btn:hover:not(:disabled),
.cve-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,135,90,0.45) !important;
}
.cve-next-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }

/* Results display */
.cve-results-card {
  background: linear-gradient(135deg, var(--sr-navy), var(--sr-navy-dark)) !important;
  border-radius: var(--sr-radius-xl) !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

/* Mobile: single-column step indicator */
@media (max-width: 540px) {
  .cve-steps {
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
  }
  .cve-steps::-webkit-scrollbar { display: none !important; }
  .cve-step-label { display: none !important; }
  .cve-step-line { max-width: 24px !important; min-width: 8px !important; }
}
@media (max-width: 479px) {
  .cve-hero { padding: 2.5rem 1rem 2rem !important; }
  .cve-body { padding: 1.5rem 1rem 4rem !important; }
  .cve-panel { padding: 1.25rem 1rem !important; }
  .cve-cat-grid { gap: 0.4rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   6. CLAIM TRACKER — /claim-tracker
   Classes: .ct-page, .ct-hero, .ct-stats, .ct-stat, .ct-card, etc.
══════════════════════════════════════════════════════════════════════ */

/* Phase badge refinements */
.phase-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}
.phase-badge--open     { background: #E0F2FE; color: #0369A1; }
.phase-badge--filed    { background: #EDE9FE; color: #5B21B6; }
.phase-badge--review   { background: var(--sr-amber-pale); color: #92400E; }
.phase-badge--approved { background: #DCFCE7; color: #15803D; }
.phase-badge--payment  { background: var(--sr-emerald-pale); color: var(--sr-emerald-dark); }
.phase-badge--paid     { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }

/* Stats row */
.ct-stat {
  border-radius: var(--sr-radius) !important;
  box-shadow: var(--sr-shadow-sm) !important;
  transition: var(--sr-transition) !important;
}
.ct-stat:hover {
  box-shadow: var(--sr-shadow-md) !important;
  transform: translateY(-1px) !important;
}
.ct-stat-num {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: var(--sr-emerald) !important;
  line-height: 1 !important;
}
.ct-stat-label {
  font-size: 0.72rem !important;
  color: var(--sr-text-muted) !important;
  font-weight: 500 !important;
  margin-top: 0.25rem !important;
}

/* Search bar */
.ct-search-wrap,
.search-bar {
  position: relative !important;
}
.ct-search,
.search-bar input[type="text"],
.search-bar input[type="search"] {
  width: 100% !important;
  padding: 0.75rem 1rem 0.75rem 2.75rem !important;
  font-size: 16px !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}
.ct-search:focus,
.search-bar input:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* Cards */
.ct-card {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: var(--sr-shadow-sm) !important;
  transition: var(--sr-transition) !important;
  margin-bottom: 0.75rem !important;
}
.ct-card:hover {
  box-shadow: var(--sr-shadow-md) !important;
  border-color: rgba(0,135,90,0.2) !important;
}

/* Mobile: remove horizontal scrollbars */
@media (max-width: 479px) {
  .ct-page { padding-top: calc(var(--header-height, 64px) + 1rem) !important; padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
  .ct-hero { flex-direction: column !important; }
  .ct-hero-value { text-align: left !important; }
  .ct-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   7. DOCUMENT VAULT — /my-documents
   Classes: .vault-page, .vault-hero, .vault-stats, .vault-stat, etc.
══════════════════════════════════════════════════════════════════════ */

/* Vault hero: clean dark gradient */
.vault-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

/* Stat cards: consistent design */
.vault-stat {
  border-radius: var(--sr-radius) !important;
  transition: var(--sr-transition) !important;
}
.vault-stat-num {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Upload zone: clear affordance */
.vault-upload-zone,
.upload-zone {
  border: 2px dashed var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 2.5rem 1.5rem !important;
  text-align: center !important;
  transition: var(--sr-transition) !important;
  cursor: pointer !important;
  background: #FAFAFA !important;
}
.vault-upload-zone:hover,
.upload-zone:hover,
.vault-upload-zone.drag-over,
.upload-zone.drag-over {
  border-color: var(--sr-emerald) !important;
  background: var(--sr-emerald-pale) !important;
}
.vault-upload-zone:focus-within,
.upload-zone:focus-within {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* Doc row */
.vault-doc-row,
._doc-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  border-radius: var(--sr-radius) !important;
  border: 1px solid var(--sr-border) !important;
  background: var(--sr-white) !important;
  margin-bottom: 0.5rem !important;
  transition: var(--sr-transition) !important;
}
.vault-doc-row:hover { box-shadow: var(--sr-shadow-sm) !important; border-color: rgba(0,135,90,0.2) !important; }

@media (max-width: 479px) {
  .vault-stats { grid-template-columns: 1fr 1fr !important; }
  .vault-page { padding-top: calc(var(--header-height, 70px) + 1rem) !important; padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   8. ELIGIBILITY SCANNER — /eligibility-scanner, /scanner
   Classes: .es-*, .scanner-*, .eligibility-*
══════════════════════════════════════════════════════════════════════ */

/* Scanner match cards: premium recommendation style */
.scanner-result-card,
.es-card,
.eligibility-card,
.match-card {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: var(--sr-shadow-sm) !important;
  transition: var(--sr-transition) !important;
  text-decoration: none !important;
  color: var(--sr-text) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  margin-bottom: 0.625rem !important;
}
.scanner-result-card:hover,
.es-card:hover,
.eligibility-card:hover,
.match-card:hover {
  box-shadow: var(--sr-shadow-md) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(0,135,90,0.2) !important;
  color: var(--sr-text) !important;
}

/* Scanner input */
.scanner-input,
.es-input,
.eligibility-input {
  font-size: 16px !important;
  padding: 0.8rem 1rem !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.scanner-input:focus,
.es-input:focus,
.eligibility-input:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   9. SHARED: LOADING STATES, EMPTY STATES, SUCCESS STATES
══════════════════════════════════════════════════════════════════════ */

/* Loading spinner (generic .sr-spinner) */
.sr-spinner {
  width: 36px !important;
  height: 36px !important;
  border: 3px solid #E5E7EB !important;
  border-top-color: var(--sr-emerald) !important;
  border-radius: 50% !important;
  animation: srSpin 0.7s linear infinite !important;
  flex-shrink: 0 !important;
}
@keyframes srSpin { to { transform: rotate(360deg); } }

/* Generic empty state */
.sr-empty-state {
  text-align: center !important;
  padding: 3rem 1.5rem !important;
  background: #F9FAFB !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
}
.sr-empty-state__icon {
  font-size: 2.5rem !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}
.sr-empty-state__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.4rem !important;
}
.sr-empty-state__sub {
  font-size: 0.88rem !important;
  color: var(--sr-text-muted) !important;
  margin: 0 0 1.25rem !important;
  line-height: 1.6 !important;
}

/* Success state */
.sr-success-state {
  background: var(--sr-emerald-pale) !important;
  border: 1px solid rgba(0,135,90,0.25) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.5rem !important;
  text-align: center !important;
}
.sr-success-icon {
  width: 56px !important;
  height: 56px !important;
  background: var(--sr-emerald) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 0.875rem !important;
  color: #fff !important;
  font-size: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(0,135,90,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   10. PAYWALL REFINEMENTS — .tp-* (from tools-paywall-1566662.css)
══════════════════════════════════════════════════════════════════════ */

/* Slightly reduce blur for accessibility */
.tp-blur-content {
  filter: blur(4px) !important;
}

/* Gate banner: add depth */
.tp-pro-gate {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}

/* CTA button: stronger */
.tp-pro-cta {
  background: linear-gradient(135deg, var(--sr-emerald), var(--sr-emerald-dark)) !important;
  font-size: 0.95rem !important;
  min-height: 48px !important;
  box-shadow: 0 4px 20px rgba(0,135,90,0.4) !important;
}
.tp-pro-cta:hover {
  background: linear-gradient(135deg, var(--sr-emerald-dark), #00553E) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,135,90,0.5) !important;
}

/* Screen reader: hide redacted text properly */
.tp-redacted {
  speak: none !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  color: transparent !important;
  background: #E5E7EB !important;
  border-radius: 4px !important;
  user-select: none !important;
  display: inline-block !important;
  min-width: 60px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   11. FOCUS-VISIBLE RING (UNIVERSAL KEYBOARD ACCESSIBILITY)
══════════════════════════════════════════════════════════════════════ */

/* Only show focus ring for keyboard navigation, not mouse clicks */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sr-emerald) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(0,135,90,0.15) !important;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none !important;
}

/* Specific: inputs always show on focus (mouse users too) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   12. MY-CLAIMS-DASHBOARD — /claim-tracker (app variant)
   Classes: .mcd-*, .tc-*
══════════════════════════════════════════════════════════════════════ */

/* App nav bar for claim tracker */
.app-nav {
  background: var(--sr-white) !important;
  border-bottom: 1px solid var(--sr-border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}

/* Claim cards */
.tc-claim-card,
.my-claim-row {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.25rem !important;
  box-shadow: var(--sr-shadow-sm) !important;
  transition: var(--sr-transition) !important;
  margin-bottom: 0.75rem !important;
}
.tc-claim-card:hover,
.my-claim-row:hover {
  box-shadow: var(--sr-shadow-md) !important;
  border-color: rgba(0,135,90,0.15) !important;
}

/* Header title */
.tc-header {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.35rem, 4vw, 1.75rem) !important;
  font-weight: 900 !important;
  color: var(--sr-text) !important;
  margin: 0 0 0.25rem !important;
  letter-spacing: -0.01em !important;
}
.tc-subheader {
  font-size: 0.88rem !important;
  color: var(--sr-text-muted) !important;
}

/* Action buttons in tracker */
.tc-btn-file,
.tc-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0.55rem 1.1rem !important;
  min-height: 40px !important;
  border-radius: var(--sr-radius-sm) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  transition: var(--sr-transition) !important;
  background: var(--sr-emerald) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.tc-btn-file:hover,
.tc-action-btn:hover {
  background: var(--sr-emerald-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   13. BREADCRUMB (UNIVERSAL)
══════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 1.25rem !important;
  flex-wrap: wrap !important;
}
.breadcrumb a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}
.breadcrumb a:hover { color: #fff !important; }
.breadcrumb__sep { opacity: 0.4 !important; }
.breadcrumb > span:last-child { color: rgba(255,255,255,0.85) !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════════════════════════════════
   14. SECTION CONTAINER & GRID
══════════════════════════════════════════════════════════════════════ */
.section {
  padding: clamp(2.5rem, 6vw, 4rem) 0 !important;
}
.section-alt {
  background: #F8F9FA !important;
}
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
}
.grid {
  display: grid !important;
  gap: 1.25rem !important;
}
.grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   15. 1440PX DESKTOP ENHANCEMENTS
══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .hub-hero { padding: 6rem 2rem 5rem !important; }
  .hub-hero__title { font-size: 3.5rem !important; }
  .hub-card { padding: 1.75rem !important; }
  .fms2-page { max-width: 680px !important; }
  .cve-body { max-width: 920px !important; }
  .ct-page { max-width: 1000px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   16. WATCHLIST PAGE — /watchlist (/company-watch, /addon-watchlist)
   Classes: .cw-*, .watchlist-*
══════════════════════════════════════════════════════════════════════ */

.watchlist-card,
.cw-card {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: var(--sr-shadow-sm) !important;
  transition: var(--sr-transition) !important;
  margin-bottom: 0.75rem !important;
}
.watchlist-card:hover,
.cw-card:hover {
  box-shadow: var(--sr-shadow-md) !important;
  border-color: rgba(0,135,90,0.15) !important;
}

/* Add company input */
.watchlist-add-input,
.cw-add-input {
  font-size: 16px !important;
  padding: 0.8rem 1rem !important;
  border: 1.5px solid var(--sr-border) !important;
  border-radius: var(--sr-radius) !important;
  background: var(--sr-white) !important;
  color: var(--sr-text) !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.watchlist-add-input:focus,
.cw-add-input:focus {
  outline: none !important;
  border-color: var(--sr-emerald) !important;
  box-shadow: 0 0 0 3px rgba(0,135,90,0.12) !important;
}

/* Deploy marker: task-1579880-v1 */