/* Hide horizontal scrollbar on mobile tabs */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Custom refined dark scrollbars */
    .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
    .custom-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background: #475569; }

    /* Modern Dark Obsidian Background with Radial Ambient Glow */
    body {
      background-color: #070B12;
      background-image: 
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0),
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.12), transparent 45%),
        radial-gradient(circle at 10% 30%, rgba(99, 102, 241, 0.06), transparent 40%);
      background-size: 24px 24px, 100% 100%, 100% 100%;
    }

    /* Active job card styling with indigo neon glow */
    .job-card-active {
      border-color: #6366f1 !important;
      background-color: rgba(30, 41, 59, 0.85) !important;
      box-shadow: 0 0 25px 0 rgba(99, 102, 241, 0.25) !important;
    }
    .job-card-active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, #6366f1, #06b6d4);
      border-top-left-radius: 0.75rem;
      border-bottom-left-radius: 0.75rem;
    }

    /* Ultra-smooth transitions & micro-interaction keyframes */
    .tab-fade-in {
      animation: tabFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes tabFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .view-fade-in {
      animation: viewFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes viewFadeIn {
      from { opacity: 0; transform: scale(0.992); }
      to { opacity: 1; transform: scale(1); }
    }

    .pulse-hud-glow {
      animation: pulseHud 2s infinite ease-in-out;
    }
    @keyframes pulseHud {
      0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.15); }
      50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.4); }
    }

    .radar-sweep {
      animation: radarSpin 3s linear infinite;
    }
    @keyframes radarSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* ===================== UI POLISH v2 (CSS-only, non-breaking) ===================== */

    /* Premium micro-interaction on all primary indigo action buttons */
    button.bg-indigo-600, a.bg-indigo-600, button.bg-indigo-500, .btn-primary {
      transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1), filter .18s ease;
    }
    button.bg-indigo-600:hover, a.bg-indigo-600:hover, button.bg-indigo-500:hover, .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px -8px rgba(99,102,241,.55);
      filter: brightness(1.06);
    }
    button.bg-indigo-600:active, a.bg-indigo-600:active, button.bg-indigo-500:active { transform: translateY(0) scale(.985); }

    /* Softer, deeper hover for job cards (rounded slate cards in the list) */
    .rounded-2xl, .rounded-xl { transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.16,1,.3,1), background-color .2s ease; }

    /* Refined active job card: animated gradient accent bar + lift */
    .job-card-active {
      transform: translateY(-1px);
    }
    .job-card-active::before {
      background: linear-gradient(180deg, #6366f1, #06b6d4, #6366f1) !important;
      background-size: 100% 200% !important;
      animation: accentFlow 3.5s ease-in-out infinite;
    }
    @keyframes accentFlow {
      0%,100% { background-position: 0% 0%; }
      50% { background-position: 0% 100%; }
    }

    /* Match-score badges: gentle emerald glow so top matches pop */
    [class*="text-emerald"][class*="bg-emerald"], .match-badge {
      text-shadow: 0 0 12px rgba(16,185,129,.25);
    }

    /* Smoother, thinner focus rings that match the brand */
    *:focus-visible {
      outline: 2px solid rgba(99,102,241,.6);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* Frosted, elevated modals for a more premium feel */
    #portalsModal > div, #analyticsModal > div {
      box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(148,163,184,.06);
    }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    }

    /* Chrome hero card: animated gradient ring + drifting glow + hover lift */
    .chrome-hero { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
    .chrome-hero:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(6,182,212,.35); }
    .chrome-hero::after {
      content: '';
      position: absolute; inset: -1px;
      border-radius: 1rem;
      padding: 1px;
      background: linear-gradient(120deg, rgba(6,182,212,.6), rgba(99,102,241,.5), rgba(6,182,212,.6));
      background-size: 200% 200%;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: heroRing 5s linear infinite;
      pointer-events: none;
    }
    @keyframes heroRing { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
    .chrome-hero-glow { animation: heroGlow 4s ease-in-out infinite; }
    @keyframes heroGlow { 0%,100%{opacity:.5; transform:translate(0,0)} 50%{opacity:.9; transform:translate(-6px,6px)} }

    /* ============================================================================
       PROFESSIONAL LIGHT / WHITE THEME  (scoped to body.theme-light)
       A clean, high-contrast, easy-to-read skin. Implemented as an override layer
       so the underlying dark markup is untouched and the theme stays reversible.
       ============================================================================ */
    body.theme-light {
      background: #eef2f7 !important;
      background-image:
        radial-gradient(circle at 50% 0%, rgba(79,70,229,0.06), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(6,182,212,0.05), transparent 40%) !important;
      color: #0f172a !important;
    }
    body.theme-light .human-grain-overlay { opacity: 0 !important; }

    /* Surfaces: dark neutrals -> white / soft gray */
    body.theme-light [class*="bg-[#070B12]"],
    body.theme-light [class*="bg-[#0B0F19]"],
    body.theme-light [class*="bg-[#090D16]"],
    body.theme-light [class*="bg-[#05070D]"],
    body.theme-light [class*="bg-[#0F172A]"],
    body.theme-light [class*="bg-black"],
    body.theme-light [class*="bg-slate-950"],
    body.theme-light [class*="bg-slate-900"],
    body.theme-light [class*="bg-slate-850"],
    body.theme-light [class*="bg-darkbg-"] {
      background-color: #ffffff !important;
    }
    body.theme-light [class*="bg-slate-800"],
    body.theme-light [class*="bg-slate-750"],
    body.theme-light [class*="bg-slate-700"],
    body.theme-light [class*="bg-slate-600"] {
      background-color: #f1f5f9 !important;
    }

    /* Kill dark header gradients -> subtle light wash */
    body.theme-light [class*="from-slate-950"],
    body.theme-light [class*="from-slate-900"],
    body.theme-light [class*="via-indigo-950"],
    body.theme-light [class*="via-purple-950"],
    body.theme-light [class*="to-slate-950"] {
      background-image: none !important;
      background-color: #f8fafc !important;
    }

    /* Text: light neutrals -> dark slate */
    body.theme-light .text-white,
    body.theme-light [class*="text-slate-100"],
    body.theme-light [class*="text-slate-200"],
    body.theme-light [class*="text-slate-300"] {
      color: #0f172a !important;
    }
    body.theme-light [class*="text-slate-400"],
    body.theme-light [class*="text-slate-500"] {
      color: #64748b !important;
    }

    /* Accent text darkened for contrast on white */
    body.theme-light [class*="text-indigo-200"],
    body.theme-light [class*="text-indigo-300"],
    body.theme-light [class*="text-indigo-400"] { color: #4f46e5 !important; }
    body.theme-light [class*="text-cyan-200"],
    body.theme-light [class*="text-cyan-300"] { color: #0891b2 !important; }
    body.theme-light [class*="text-emerald-300"],
    body.theme-light [class*="text-emerald-400"] { color: #059669 !important; }
    body.theme-light [class*="text-purple-200"],
    body.theme-light [class*="text-purple-300"] { color: #7c3aed !important; }
    body.theme-light [class*="text-amber-300"],
    body.theme-light [class*="text-amber-400"] { color: #b45309 !important; }
    body.theme-light [class*="text-blue-300"],
    body.theme-light [class*="text-blue-400"] { color: #2563eb !important; }
    body.theme-light [class*="text-rose-300"],
    body.theme-light [class*="text-rose-400"] { color: #e11d48 !important; }

    /* Borders -> light gray */
    body.theme-light [class*="border-slate-800"],
    body.theme-light [class*="border-slate-700"],
    body.theme-light [class*="border-slate-600"],
    body.theme-light [class*="border-white"] {
      border-color: #e2e8f0 !important;
    }

    /* Keep text WHITE on saturated colored buttons/pills (readability) */
    body.theme-light .bg-indigo-700, body.theme-light .bg-indigo-600, body.theme-light .bg-indigo-500,
    body.theme-light .bg-emerald-700, body.theme-light .bg-emerald-600, body.theme-light .bg-emerald-500,
    body.theme-light .bg-blue-700, body.theme-light .bg-blue-600,
    body.theme-light .bg-purple-700, body.theme-light .bg-purple-600,
    body.theme-light .bg-cyan-700, body.theme-light .bg-cyan-600,
    body.theme-light .bg-rose-700, body.theme-light .bg-rose-600,
    body.theme-light .bg-red-700, body.theme-light .bg-red-600,
    body.theme-light .bg-amber-600, body.theme-light .bg-amber-500,
    body.theme-light .bg-indigo-600 *, body.theme-light .bg-indigo-500 *,
    body.theme-light .bg-emerald-600 *, body.theme-light .bg-emerald-500 *,
    body.theme-light .bg-blue-600 *, body.theme-light .bg-purple-600 *,
    body.theme-light .bg-cyan-600 *, body.theme-light .bg-rose-600 *,
    body.theme-light .bg-red-600 *, body.theme-light .bg-amber-600 * {
      color: #ffffff !important;
    }

    /* Soft cards / definition on white: add gentle shadow + hairline */
    body.theme-light .rounded-2xl, body.theme-light .rounded-3xl, body.theme-light .rounded-xl {
      box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    }

    /* Active job card on light theme */
    body.theme-light .job-card-active {
      background-color: #eef2ff !important;
      border-color: #6366f1 !important;
      box-shadow: 0 0 0 1px rgba(99,102,241,.3), 0 8px 24px -10px rgba(99,102,241,.35) !important;
    }

    /* Inputs & selects */
    body.theme-light input, body.theme-light select, body.theme-light textarea {
      background-color: #ffffff !important;
      color: #0f172a !important;
      border-color: #cbd5e1 !important;
    }
    body.theme-light input::placeholder, body.theme-light textarea::placeholder { color: #94a3b8 !important; }

    /* Light scrollbars */
    body.theme-light .custom-scroll::-webkit-scrollbar-track { background: #eef2f7; }
    body.theme-light .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
    body.theme-light .custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* Chrome hero card reads well on light too */
    body.theme-light .chrome-hero {
      background: linear-gradient(135deg, #ecfeff, #eef2ff) !important;
      border-color: #a5f3fc !important;
    }

    /* Dividers */
    body.theme-light hr, body.theme-light [class*="divide-slate"] > * { border-color: #e2e8f0 !important; }

    /* ============================================================================
       WORKSPACE REFINEMENT v3 — compact, attractive buttons + menu-style filter bar
       ============================================================================ */
    /* Segmented filter bar: smaller, cleaner pills with icons */
    body.theme-light .filter-btn {
      padding: 5px 11px !important;
      font-size: 11px !important;
      border-radius: 9px !important;
      gap: 6px;
      letter-spacing: .1px;
      transition: all .16s cubic-bezier(.16,1,.3,1) !important;
    }
    body.theme-light .filter-btn i { font-size: 10px; opacity: .9; }
    /* Inactive pill: subtle, refined */
    body.theme-light .filter-btn:not([class*="bg-emerald"]):not([class*="bg-indigo"]) {
      color: #475569 !important;
    }
    body.theme-light .filter-btn:not([class*="bg-emerald"]):not([class*="bg-indigo"]):hover {
      background: #eef2ff !important;
      color: #4338ca !important;
      transform: translateY(-1px);
    }
    /* Active pill: crisp gradient + soft glow */
    body.theme-light .filter-btn[class*="bg-emerald-600"] {
      background: linear-gradient(135deg,#10b981,#059669) !important;
      box-shadow: 0 4px 12px -3px rgba(16,185,129,.45) !important;
    }
    /* The segmented container: tighter, cleaner */
    body.theme-light .filter-btn:first-child { margin-left: 0; }

    /* Header action buttons: smaller & more refined (List/Pipeline, Scan, Upload) */
    body.theme-light header button,
    body.theme-light header a[onclick],
    body.theme-light header .rounded-xl > button {
      transition: all .16s cubic-bezier(.16,1,.3,1) !important;
    }
    /* Compact the primary pill buttons a touch */
    body.theme-light header .rounded-xl.bg-gradient-to-r,
    body.theme-light #btnHeaderCrawlNow,
    body.theme-light #btnViewList, body.theme-light #btnViewKanban {
      padding-top: 5px !important; padding-bottom: 5px !important;
      font-size: 11.5px !important;
    }
    /* Icon buttons feel like a clean menu: circular, subtle */
    body.theme-light .fa-solid, body.theme-light .fa-regular, body.theme-light .fa-brands { line-height: 1; }

    /* Job cards: tighter, more refined hover in list */
    body.theme-light #jobListSection [class*="rounded-2xl"]:hover,
    body.theme-light #jobListSection [class*="rounded-xl"]:hover {
      border-color: #c7d2fe !important;
    }

    /* Count chips inside filter pills: smaller */
    body.theme-light .filter-btn span[id^="count_"] { font-size: 9.5px !important; padding: 1px 6px !important; }

/* ============================================================================
   MOBILE / PHONE VIEW OPTIMIZATIONS
   ============================================================================ */
@media (max-width: 640px) {
  /* Never allow sideways scrolling on phones */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Touch-friendly tap targets (Apple/Google min 44px guidance) */
  button, a[onclick], .filter-btn, select, [role="button"] {
    min-height: 40px;
  }
  .filter-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .filter-btn span[id^="count_"] { font-size: 10px !important; }

  /* Filter bar: smooth horizontal swipe with snap, hidden scrollbar */
  .no-scrollbar { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .no-scrollbar > * { scroll-snap-align: start; }

  /* Primary action buttons easier to tap */
  .btn-primary, button.bg-indigo-600, a.bg-indigo-600,
  button.bg-emerald-600, .bg-gradient-to-r {
    min-height: 42px;
  }

  /* Job cards: a touch more breathing room + clear tap feedback */
  #jobListContainer > * { margin-bottom: 8px; }
  #jobListContainer [onclick]:active { transform: scale(0.985); }

  /* Larger, readable headings/prices in the detail panel */
  h1, h2 { line-height: 1.25; }

  /* Comfortable body text on small screens */
  body { font-size: 14px; }

  /* Respect iPhone notch / home indicator safe areas */
  header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  #mobileBottomNav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

  /* Live badge can hide on very small screens to save room (already sm:inline) */
  #liveIndicator { display: none !important; }

  /* Modals fit the screen with margins */
  #portalsModal > div, #analyticsModal > div, #profileModal > div,
  #screeningQAModal > div, #atsGapModal > div {
    max-height: 90vh; margin: 0 8px;
  }

  /* Search input comfortable height */
  #quickSearchInput { min-height: 40px; font-size: 13px; }
}

/* Slightly larger tap targets on small tablets too */
@media (min-width: 641px) and (max-width: 900px) {
  .filter-btn { padding: 6px 11px !important; }
}

/* ============================================================================
   IMPRESSIVE PHONE VIEW v2 — polished, app-like mobile experience
   ============================================================================ */
@media (max-width: 640px) {
  /* Sticky frosted header so brand + crawler status stay visible while scrolling */
  body.theme-light header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,0.9) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 rgba(15,23,42,.06);
  }

  /* App-like job cards: rounded, soft shadow, gradient hairline, press feedback */
  #jobListContainer > div[onclick],
  #jobListContainer > a[onclick] {
    border-radius: 16px !important;
    box-shadow: 0 2px 10px -4px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.05) !important;
    transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease !important;
  }
  #jobListContainer > div[onclick]:active,
  #jobListContainer > a[onclick]:active {
    transform: scale(.98);
    box-shadow: 0 1px 4px rgba(15,23,42,.1) !important;
  }

  /* Filter pills: crisp segmented feel; active pill pops with gradient + glow */
  .filter-btn { border-radius: 999px !important; font-weight: 700 !important; }
  .filter-btn[class*="bg-emerald-600"], .filter-btn[class*="bg-indigo-600"] {
    box-shadow: 0 4px 14px -4px rgba(79,70,229,.5) !important;
  }

  /* Match-score badge pops on mobile */
  [class*="Match"] , [id*="matchScore"] { font-weight: 800; }

  /* Primary CTAs: big, thumb-friendly, gradient */
  #jobDetailWorkspace .bg-gradient-to-r,
  a[onclick*="apply"], button[onclick*="apply"] {
    min-height: 46px; border-radius: 14px !important; font-weight: 800 !important;
  }

  /* Mobile bottom nav: frosted, elevated, rounded top */
  #mobileBottomNav {
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid #eef0f4 !important;
    box-shadow: 0 -6px 20px -8px rgba(15,23,42,.15);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
  }

  /* Section headers & list breathing room */
  #jobListContainer { padding: 4px 2px 80px 2px; }

  /* Smooth momentum scrolling everywhere */
  .custom-scroll, .no-scrollbar, main, #jobListContainer { -webkit-overflow-scrolling: touch; }

  /* Search bar: rounded, prominent */
  #quickSearchInput { border-radius: 12px !important; }
}


/* ============================================================================
   WORKSPACE COMMAND CENTER v5 — focused hierarchy, responsive, accessible
   ============================================================================ */
.workspace-command-strip {
  min-height: 58px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  background: rgba(7,11,18,.94);
  border-bottom: 1px solid rgba(51,65,85,.62);
  box-shadow: 0 10px 28px -24px rgba(15,23,42,.9);
  position: relative;
  z-index: 19;
}
.workspace-command-metrics { display:flex; align-items:center; gap:8px; min-width:0; }
.workspace-metric {
  min-width: 132px;
  height: 42px;
  padding: 6px 10px;
  border: 1px solid rgba(51,65,85,.65);
  border-radius: 13px;
  background: rgba(15,23,42,.72);
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  color:#e2e8f0;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
button.workspace-metric:hover { border-color:rgba(99,102,241,.6); background:rgba(30,41,59,.88); transform:translateY(-1px); }
.workspace-metric-icon { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; font-size:11px; }
.metric-indigo { background:rgba(99,102,241,.16); color:#818cf8; }
.metric-amber { background:rgba(245,158,11,.16); color:#f59e0b; }
.metric-emerald { background:rgba(16,185,129,.16); color:#10b981; }
.metric-cyan { background:rgba(6,182,212,.16); color:#06b6d4; }
.workspace-metric strong { display:block; font-size:14px; line-height:1; color:#f8fafc; font-weight:800; font-variant-numeric:tabular-nums; }
.workspace-metric small { display:block; margin-top:3px; font-size:10px; line-height:1; color:#94a3b8; white-space:nowrap; }
.workspace-sync-button { min-height:38px; padding:0 13px; border-radius:11px; display:flex; align-items:center; gap:7px; color:#c7d2fe; background:rgba(79,70,229,.14); border:1px solid rgba(99,102,241,.28); font-size:11px; font-weight:800; }
.workspace-sync-button:hover { background:rgba(79,70,229,.24); border-color:rgba(99,102,241,.55); }

/* Stronger reading hierarchy without changing existing component contracts. */
#jobListSection { box-shadow: 12px 0 32px -32px rgba(15,23,42,.9); }
#jobListContainer .job-card { padding:15px !important; content-visibility:auto; contain-intrinsic-size:150px; }
#jobListContainer .job-card h4 { font-size:15px !important; line-height:1.35 !important; letter-spacing:-.01em; }
#jobListContainer .job-card:hover { transform:translateY(-1px); box-shadow:0 12px 28px -20px rgba(79,70,229,.45) !important; }
#listTotalEntries { font-variant-numeric:tabular-nums; }
.workspace-skeleton { height:132px; border-radius:16px; border:1px solid #1e293b; background:linear-gradient(100deg,#0f172a 20%,#172033 35%,#0f172a 50%); background-size:300% 100%; animation:workspaceShimmer 1.3s ease-in-out infinite; }
@keyframes workspaceShimmer { to { background-position:-100% 0; } }

body.theme-light .workspace-command-strip { background:rgba(255,255,255,.94); border-color:#e2e8f0; }
body.theme-light .workspace-metric { background:#f8fafc; border-color:#e2e8f0; color:#0f172a; box-shadow:none; }
body.theme-light .workspace-metric strong { color:#0f172a; }
body.theme-light .workspace-metric small { color:#64748b; }
body.theme-light button.workspace-metric:hover { background:#eef2ff; border-color:#c7d2fe; }
body.theme-light .workspace-sync-button { color:#4338ca; background:#eef2ff; border-color:#c7d2fe; }
body.theme-light .workspace-skeleton { border-color:#e2e8f0; background:linear-gradient(100deg,#f1f5f9 20%,#e2e8f0 35%,#f1f5f9 50%); background-size:300% 100%; }

@media (max-width: 900px) {
  .workspace-command-strip { overflow-x:auto; scrollbar-width:none; padding:7px 10px; }
  .workspace-command-strip::-webkit-scrollbar { display:none; }
  .workspace-command-metrics { gap:6px; }
  .workspace-metric { min-width:116px; }
  .workspace-sync-button { position:sticky; right:0; flex:0 0 auto; backdrop-filter:blur(10px); }
}

@media (max-width: 640px) {
  /* Eliminate the old header collision; mobile bottom nav owns view switching. */
  #headerViewSwitcher { display:none !important; }
  #headerCrawlerStatus { display:none !important; }
  #jobListSection { width:100% !important; max-width:100vw !important; min-width:0 !important; }
  .filter-btn { flex:0 0 auto; white-space:nowrap; }
  header > div:first-child { padding:7px 10px !important; gap:7px !important; }
  header > div:first-child > div:first-child { gap:7px !important; }
  header button[onclick*="openPortalsLoginModal"] span { display:none; }
  header button[onclick*="openPortalsLoginModal"] { width:36px; justify-content:center; padding:6px !important; }
  header button[onclick*="directResumeInput"] span { display:none; }
  header button[onclick*="directResumeInput"] { width:38px; justify-content:center; padding:7px !important; }
  #headerCandidateName, #headerTargetRole { max-width:92px; }
  #filterSearchBarContainer { padding:7px 9px !important; gap:7px !important; }
  #filterSearchBarContainer > div:first-child { width:100%; }
  #filterSearchBarContainer > div:last-child { width:100%; justify-content:flex-start; overflow-x:auto; }
  #filterSearchBarContainer .relative.w-44 { min-width:190px; flex:1; }
  #quickLocationSelect, #quickSortSelect { min-width:138px; }
  .workspace-command-strip { min-height:54px; }
  .workspace-metric { min-width:108px; height:40px; padding:5px 8px; }
  .workspace-metric-icon { width:26px; height:26px; }
  .workspace-metric strong { font-size:13px; }
  .workspace-metric small { font-size:9px; }
  .workspace-sync-button span { display:none; }
  .workspace-sync-button { width:38px; padding:0; justify-content:center; }
  #guidedJourneyBar { display:none !important; }
  #jobListContainer .job-card { padding:14px !important; }
  #jobListContainer .job-card h4 { font-size:15px !important; }
  #jobListSection > div:first-child button span { display:none; }
}

@media (min-width: 901px) {
  #filterSearchBarContainer { flex-wrap:nowrap !important; min-height:48px; overflow:hidden; }
  #filterSearchBarContainer > div:first-child { flex:1 1 auto; min-width:0; }
  #filterSearchBarContainer > div:last-child { flex:0 0 auto; }
}