:root {
    --fv-bg-dark:     var(--surface-0);
    --fv-bg-card:     var(--glass-bg);
    --fv-bg-elevated: var(--surface-2);
    --fv-border: color-mix(in srgb, var(--color-info) 15%, transparent);
    --fv-border-active: color-mix(in srgb, var(--color-primary-light) 60%, transparent);
    --fv-accent-primary: var(--product-fieldkb-accent);
    --fv-accent-secondary: var(--product-fieldvision-accent);
    --fv-accent-warning: var(--color-warning);
    --fv-accent-danger: var(--color-error);
    --fv-text-primary: #e5e7eb;
    --fv-text-secondary: var(--text-muted);
    --fv-text-muted: var(--text-muted);
    --fv-glow-green: 0 0 40px color-mix(in srgb, var(--color-primary-light) 15%, transparent);
    --fv-glow-blue: 0 0 60px var(--alert-info-bg);
    --fv-chlorophyll: var(--color-chlorophyll);
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  }

  /* Light-mode overrides for --fv-* tokens now live in
     app/views/static/css/light-mode.css (Round 3 unification). FieldVision
     no longer carries its own light palette — it inherits the site-wide one. */

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: var(--font-body);
    color: var(--fv-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: color 0.35s ease;
  }

  /* ATMOSPHERIC BACKGROUND */
  .fv-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .fv-atmosphere::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
      radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--color-primary-light) 8%, transparent) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 80% 20%, color-mix(in srgb, var(--color-info) 6%, transparent) 0%, transparent 45%),
      radial-gradient(ellipse 50% 30% at 50% 100%, color-mix(in srgb, var(--color-accent) 4%, transparent) 0%, transparent 40%);
    animation: atmosphereShift 30s ease-in-out infinite alternate;
    opacity: 0.9;
  }

  @keyframes atmosphereShift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-2%, 2%) rotate(1deg); }
  }

  /* MAIN WRAPPER
     Note: top padding is reduced because the hero is now in a collapsible intro
     above the wrapper; the workspace nav + tool header provide visual framing. */
  .fv-wrapper {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.5rem 3rem;
    max-width: 1440px;
    margin: 0 auto;
  }

  /* HERO SECTION */
  .fv-hero {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInUp 0.8s ease-out;
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .fv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-light) 10%, transparent), color-mix(in srgb, var(--color-info) 8%, transparent));
    border: 1px solid var(--fv-border);
    border-radius: 50px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fv-accent-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }

  .fv-hero-badge i { font-size: 0.85rem; }

  .fv-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--fv-text-primary) 0%, var(--fv-accent-primary) 50%, var(--fv-accent-secondary) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 8s ease infinite;
  }

  @keyframes gradientShift {
    0%, 100% { background-position: 0% center; }
    50%       { background-position: 100% center; }
  }

  .fv-hero-subtitle {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--fv-text-secondary);
    line-height: 1.8;
  }

  .fv-hero-subtitle strong { color: var(--fv-accent-primary); font-weight: 600; }

  /* DIFFERENTIATORS */
  .fv-diff-section { margin-bottom: 3rem; }

  .fv-diff-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .fv-diff-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .fv-diff-subtitle {
    font-size: 0.95rem;
    color: var(--fv-text-muted);
  }

  .fv-diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
  }

  .fv-diff-card {
    position: relative;
    background: var(--fv-bg-card);
    border: 1px solid var(--fv-border);
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .fv-diff-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fv-accent-primary), var(--fv-accent-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .fv-diff-card:hover {
    border-color: var(--fv-border-active);
    transform: translateY(-2px);
    box-shadow: var(--fv-glow-green);
  }

  .fv-diff-card:hover::before { opacity: 1; }

  .fv-diff-card-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-light) 15%, transparent), var(--alert-info-bg));
    border-radius: 10px;
    margin-bottom: 0.9rem;
    color: var(--fv-accent-primary);
    font-size: 1.1rem;
  }

  .fv-diff-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
  .fv-diff-card-text  { font-size: 0.85rem; color: var(--fv-text-secondary); line-height: 1.65; }

  /* ══════════════════════════════════════════════════
     INTERACTIVE PLAYGROUND — THREE COLUMN LAYOUT
     ══════════════════════════════════════════════════ */

  .fv-playground {
    background: var(--fv-bg-card);
    border: 1px solid var(--fv-border);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--fv-glow-blue);
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
  }

  .fv-playground-header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--fv-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(180deg, var(--fv-bg-elevated) 0%, var(--fv-bg-card) 100%);
  }

  .fv-playground-title-group h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .fv-playground-title-group p { font-size: 0.88rem; color: var(--fv-text-muted); }

  .fv-playground-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .fv-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    border: 1px solid var(--fv-border);
    background: color-mix(in srgb, var(--surface-0) 80%, transparent);
    color: var(--fv-text-secondary);
  }

  .fv-badge.green {
    border-color: color-mix(in srgb, var(--color-primary-light) 40%, transparent);
    background: color-mix(in srgb, var(--color-primary-light) 10%, transparent);
    color: var(--fv-accent-primary);
  }

  /* THREE COLUMN SHELL
     Breakpoints:
       desktop  ≥ 1024px  → three columns
       tablet   640–1023px → two columns (upload | image+knowledge stacked)
       mobile   < 640px   → single column, scrollable
  */
  .fv-playground-shell {
    display: grid;
    grid-template-columns: 340px 1fr 380px;
    min-height: 600px;
    max-height: 820px;
  }

  @media (max-width: 1280px) {
    .fv-playground-shell {
      grid-template-columns: 300px 1fr 320px;
    }
  }

  @media (max-width: 1023px) {
    .fv-playground-shell {
      grid-template-columns: 1fr;
      max-height: none;
    }
  }

  /* ─── COLUMN 1: UPLOAD PANEL ──────────────────────── */

  .upload-panel {
    background: var(--fv-bg-elevated);
    border-right: 1px solid var(--fv-border);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 820px;
  }

  @media (max-width: 1023px) {
    .upload-panel {
      border-right: none;
      border-bottom: 1px solid var(--fv-border);
      max-height: none;
    }
  }

  .fv-flash-stack {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 9999;
    max-width: 400px;
  }

  .selection-area { display: flex; flex-direction: column; gap: 1.5rem; }

  .welcome-content { text-align: center; padding: 1.5rem 1rem; }

  .welcome-icon {
    font-size: 3rem;
    color: var(--fv-accent-primary);
    margin-bottom: 1rem;
    opacity: 0.85;
  }

  .welcome-content p {
    font-size: 0.9rem;
    color: var(--fv-text-secondary);
    margin-bottom: 0.4rem;
    line-height: 1.7;
  }

  /* Plant Selector
     ─────────────────────────────────────────────────────
     FIX: No country-gate in this flow. The selector is
     always accessible. The disabled state (opacity+pointer-
     events) is kept only as a JS-controlled fallback via
     the :not(.enabled) guard — but the HTML ships with
     .enabled already applied, so it is always interactive.
  */
  .plant-selector {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-light) 8%, transparent), color-mix(in srgb, var(--color-info) 5%, transparent));
    border: 1px solid var(--fv-border);
    border-radius: 0.75rem;
    padding: 1rem;
    /* Default: accessible. JS can still remove .enabled to lock it if needed. */
    opacity: 1;
    pointer-events: all;
    transition: all 0.3s ease;
  }

  /* Keep .enabled rule so JS toggling still works */
  .plant-selector.enabled {
    opacity: 1;
    pointer-events: all;
  }

  .plant-selector-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fv-accent-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .plant-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .plant-option {
    background: var(--fv-bg-elevated);
    border: 2px solid var(--fv-border);
    padding: 0.75rem 0.75rem 0.9rem;
    border-radius: 0.65rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    color: var(--fv-text-secondary);
    /* Flex column so the "leaves only" hint sits BELOW the crop name and
       inside the box. Previously the box was sized to fit only the crop
       name and the hint was being clipped at the bottom. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 78px;
  }

  .plant-option:hover {
    border-color: var(--fv-accent-primary);
    background: var(--fv-bg-card);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-primary-light) 15%, transparent);
  }

  .plant-option.selected {
    background: linear-gradient(135deg, var(--fv-accent-primary), var(--color-primary));
    color: var(--surface-0);
    border-color: var(--fv-accent-primary);
    font-weight: 600;
  }

  .plant-option-tag {
    display: inline-block;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
  }

  /* Subtle scope hint under each plant name — "leaves only" so users know
     FieldVision diagnoses leaf images, not whole plants / fruit / soil. */
  .plant-option-hint {
    display: block;
    font-size: 0.65rem;
    margin-top: 2px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--fv-text-muted);
    opacity: 0.85;
  }
  .plant-option.selected .plant-option-hint {
    color: var(--text-on-emerald);
    opacity: 0.65;
  }

  /* Upload Button */
  .upload-button-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .upload-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--fv-accent-primary), var(--color-primary));
    color: var(--surface-0);
    border: none;
    border-radius: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-primary-light) 30%, transparent);
    opacity: 0.5;
    pointer-events: none;
  }

  .upload-btn.enabled {
    opacity: 1;
    pointer-events: all;
  }

  .upload-btn.enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary-light) 40%, transparent);
  }

  .upload-btn i { font-size: 1.2rem; }

  /* Camera capture button — ghost teal, mobile-only (hidden ≥1024px) */
  .upload-btn--camera {
    background: transparent;
    color: var(--fv-accent-secondary);
    border: 1.5px solid color-mix(in srgb, var(--color-info) 45%, transparent);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-info) 8%, transparent);
  }

  .upload-btn--camera.enabled:hover {
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-info) 70%, transparent);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-info) 20%, transparent);
    transform: translateY(-2px);
  }

  /* Hide camera button on desktop — capture="environment" is a mobile UX */
  @media (min-width: 1024px) {
    .upload-btn--camera { display: none; }
  }

  /* Status Message */
  .status-message {
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
    border-radius: 0.65rem;
    font-size: 0.82rem;
    color: var(--fv-text-secondary);
    text-align: center;
    min-height: 3rem;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .status-message.active { display: flex; }

  /* ─── COLUMN 2: IMAGE PANEL ───────────────────────── */

  .image-panel {
    display: flex;
    flex-direction: column;
    background: var(--fv-bg-dark);
    border-right: 1px solid var(--fv-border);
    max-height: 820px;
    overflow: hidden;
  }

  @media (max-width: 1023px) {
    .image-panel {
      border-right: none;
      border-bottom: 1px solid var(--fv-border);
      max-height: none;
    }
  }

  .image-display {
    flex: 1;
    background: linear-gradient(135deg, var(--fv-bg-dark), var(--fv-bg-elevated));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    min-height: 400px;
    overflow: hidden;
  }

  .image-placeholder {
    text-align: center;
    color: var(--fv-text-muted);
    opacity: 0.7;
  }

  .image-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--fv-accent-secondary);
    opacity: 0.5;
  }

  .uploaded-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--surface-0) 40%, transparent);
    object-fit: contain;
  }

  /* Grad-CAM Tabs */
  .fv-demo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--fv-border);
    background: var(--fv-bg-card);
  }

  .fv-demo-tab {
    position: relative;
    padding: 0.5rem 0.9rem;
    background: var(--fv-bg-dark);
    border: 1px solid var(--fv-border);
    border-radius: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fv-text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .fv-demo-tab:hover {
    border-color: var(--fv-accent-primary);
    color: var(--fv-text-primary);
  }

  .fv-demo-tab.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-light) 15%, transparent), var(--alert-info-bg));
    border-color: var(--fv-accent-primary);
    color: var(--fv-text-primary);
  }

  .fv-demo-tab-rank {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--color-primary-light) 20%, transparent);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--fv-accent-primary);
  }

  .fv-demo-tab.active .fv-demo-tab-rank {
    background: var(--fv-accent-primary);
    color: var(--fv-bg-dark);
  }

  .fv-demo-tab-conf { color: var(--fv-accent-primary); font-weight: 500; }

  /* Heatmap Controls */
  .fv-heatmap-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--fv-bg-elevated);
    border-top: 1px solid var(--fv-border);
  }

  .fv-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--fv-text-secondary);
    cursor: pointer;
  }

  .fv-toggle-label input { accent-color: var(--fv-accent-primary); }

  .fv-band-indicator {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
  }

  .fv-band-indicator.high {
    background: color-mix(in srgb, var(--color-primary-light) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 40%, transparent);
    color: var(--fv-accent-primary);
  }

  .fv-band-indicator.medium {
    background: var(--pill-amber-bg);
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
    color: var(--fv-accent-warning);
  }

  .fv-band-indicator.low {
    background: color-mix(in srgb, var(--color-error) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
    color: var(--fv-accent-danger);
  }

  /* ─── COLUMN 3: KNOWLEDGE PANEL ──────────────────── */

  .knowledge-panel {
    background: var(--fv-bg-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    max-height: 820px;
  }

  .knowledge-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fv-border);
    background: linear-gradient(135deg, var(--fv-bg-elevated), var(--fv-bg-card));
    flex-shrink: 0;
  }

  .knowledge-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fv-accent-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .knowledge-header p { font-size: 0.8rem; color: var(--fv-text-muted); }

  .knowledge-content {
    flex: 1;
    min-height: 0;       /* critical — lets flex child shrink below content size */
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--fv-bg-elevated);
  }

  .knowledge-content::-webkit-scrollbar { width: 6px; }
  .knowledge-content::-webkit-scrollbar-track { background: transparent; }
  .knowledge-content::-webkit-scrollbar-thumb {
    background: var(--fv-accent-primary);
    border-radius: 10px;
  }
  .knowledge-content::-webkit-scrollbar-thumb:hover { background: var(--fv-accent-secondary); }

  /* KB Sections */
  .kb-section {
    padding: 1rem;
    background: color-mix(in srgb, var(--surface-0) 50%, transparent);
    border-radius: 10px;
    border-left: 3px solid var(--fv-accent-primary);
    margin-bottom: 1rem;
  }

  .kb-section.warning {
    border-left-color: var(--fv-accent-warning);
    background: color-mix(in srgb, var(--color-warning) 5%, transparent);
  }

  .kb-section.info   { border-left-color: var(--fv-accent-secondary); }

  /* Sources section — evidence citations at bottom of knowledge panel */
  .kb-section.sources {
    border-left-color: var(--fv-text-muted);
    background: var(--surface-1);
  }

  .kb-section.sources .kb-section-title i { color: var(--fv-text-muted); }

  .kb-section.sources ol {
    padding-left: 1.25rem;
    margin: 0;
  }

  .kb-section.sources ol li {
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--fv-text-secondary);
  }

  .kb-section.sources ol li a {
    color: var(--fv-text-primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
  }

  .kb-section.sources ol li a:hover {
    border-bottom-color: var(--fv-accent-secondary);
    color: var(--fv-accent-secondary);
  }

  .kb-section:last-child { margin-bottom: 0; }

  .kb-section-title {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .kb-section-title i { font-size: 0.85rem; color: var(--fv-accent-primary); }
  .kb-section.warning .kb-section-title i { color: var(--fv-accent-warning); }
  .kb-section.info    .kb-section-title i { color: var(--fv-accent-secondary); }

  .kb-section-content {
    font-size: 0.82rem;
    color: var(--fv-text-secondary);
    line-height: 1.75;
  }

  .kb-section-content ul {
    margin: 0;
    padding: 0 0 0 1.25rem;
  }

  .kb-section-content li { margin-bottom: 0.2rem; }
  .kb-section-content p  { margin-bottom: 0.5rem; }
  .kb-section-content p:last-child { margin-bottom: 0; }

  /* Footer Note */
  .fv-footer-note {
    padding: 1.25rem 1.75rem;
    border-top: 1px dashed var(--fv-border);
    font-size: 0.78rem;
    color: var(--fv-text-muted);
    line-height: 1.7;
    background: var(--fv-bg-card);
  }

  .fv-footer-note strong { color: var(--fv-accent-primary); }

  /* Language Selector */
  .language-selector {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 8%, transparent), color-mix(in srgb, var(--color-accent) 5%, transparent));
    border: 1px solid var(--fv-border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .language-selector-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fv-accent-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .language-dropdown-wrapper { position: relative; width: 100%; }

  .language-dropdown {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: var(--fv-bg-elevated);
    border: 2px solid var(--fv-border);
    border-radius: 0.65rem;
    color: var(--fv-text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
  }

  .language-dropdown:hover {
    border-color: var(--fv-accent-secondary);
    background: var(--fv-bg-card);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-info) 15%, transparent);
  }

  .language-dropdown:focus {
    outline: none;
    border-color: var(--fv-accent-secondary);
    box-shadow: 0 0 0 3px var(--alert-info-bg);
  }

  .language-dropdown option {
    background: var(--fv-bg-elevated);
    color: var(--fv-text-primary);
  }

  .language-dropdown-icon {
    position: absolute;
    right: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--fv-accent-secondary);
    font-size: 0.75rem;
    pointer-events: none;
    transition: transform 0.2s ease;
  }

  .language-dropdown:focus + .language-dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .fv-wrapper { padding: 2rem 1rem 3rem; }

    .fv-playground-header { padding: 1.25rem; }

    .upload-panel { padding: 1.5rem 1.25rem; }

    .plant-options { grid-template-columns: 1fr; }

    .image-display {
      min-height: 300px;
      padding: 1.5rem;
    }

    .knowledge-content { padding: 1.25rem; }
  }
/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE ADDITIONS  (< 640px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

  /* Wrapper */
  .fv-wrapper {
    padding: 0.75rem 0.75rem 5rem; /* extra bottom for mobile thumb zone */
  }

  /* Hero (when revealed via About toggle) */
  .fv-hero { margin-bottom: 1.5rem; }
  .fv-hero-subtitle { font-size: 0.9rem; }

  /* Playground container */
  .fv-playground {
    border-radius: 0.75rem;
  }

  .fv-playground-header {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Upload panel mobile sizing */
  .upload-panel {
    padding: 1.25rem 1rem;
  }

  /* Plant selector: keep 2×2 but smaller */
  .plant-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .plant-option {
    padding: 0.65rem 0.5rem;
    font-size: 0.82rem;
    min-height: 44px; /* WCAG touch target */
  }

  /* Upload + camera buttons: side-by-side on mobile */
  .upload-button-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .upload-btn {
    width: 100%;
    padding: 0.85rem 0.75rem;
    font-size: 0.85rem;
    min-height: 48px;
  }

  /* Image panel */
  .image-display {
    padding: 1rem;
    min-height: 200px;
  }

  /* Knowledge panel */
  .knowledge-panel {
    max-height: none;
  }

  .knowledge-header {
    padding: 1rem;
  }

  .knowledge-content {
    padding: 1rem;
  }

  /* Gradcam tabs — scrollable */
  .fv-demo-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 0.5rem 1rem;
  }

  .fv-demo-tabs::-webkit-scrollbar { display: none; }

  /* Footer note */
  .fv-footer-note {
    font-size: 0.78rem;
    padding: 0.75rem 1rem;
  }

  /* Diff cards (in collapsible intro) */
  .fv-diff-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .fv-diff-card { padding: 1rem; }
}

/* ── TABLET  640–1023px ──────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

  .fv-wrapper { padding: 1rem 1.25rem 3rem; }

  /* Two column: upload + image side-by-side, knowledge below */
  .fv-playground-shell {
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto auto;
    max-height: none;
  }

  .knowledge-panel {
    grid-column: 1 / -1; /* full width on tablet */
    border-top: 1px solid var(--fv-border);
    border-left: none;
    max-height: 400px;
    overflow-y: auto;
  }

  .image-panel {
    border-right: none;
    border-bottom: none;
    max-height: none;
  }

  .upload-panel {
    border-bottom: none;
    max-height: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUOTA BANNER
   ══════════════════════════════════════════════════════════════════════════ */

.fv-quota-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 97%, transparent), color-mix(in srgb, var(--color-warning) 97%, transparent));
  border-bottom: 1px solid var(--glass-border);
  padding: .85rem 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--surface-0) 30%, transparent);
  animation: fvQuotaSlideDown 0.3s ease-out;
}
@keyframes fvQuotaSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fv-quota-banner.active { display: flex; align-items: center; justify-content: center; }
.fv-quota-banner-inner {
  display: flex; align-items: center; gap: .75rem;
  max-width: 1280px; width: 100%;
}
.fv-quota-banner-icon { font-size: 1.4rem; flex-shrink: 0; }
.fv-quota-banner-text { flex: 1; }
.fv-quota-banner-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .95rem; font-weight: 700; color: var(--text-inverse); margin-bottom: .2rem;
}
.fv-quota-banner-message {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .85rem; color: color-mix(in srgb, var(--text-inverse) 90%, transparent); line-height: 1.5;
}
.fv-quota-banner-meta {
  font-size: .75rem; color: color-mix(in srgb, var(--text-inverse) 75%, transparent); margin-top: .25rem;
}
.fv-quota-banner-cta {
  display: inline-flex; align-items: center;
  padding: .4rem .9rem;
  background: color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 35%, transparent);
  border-radius: 20px;
  color: var(--text-inverse); font-size: .75rem; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .2s ease;
}
.fv-quota-banner-cta:hover { background: color-mix(in srgb, var(--text-inverse) 30%, transparent); color: var(--text-inverse); }
.fv-quota-banner-close {
  background: color-mix(in srgb, var(--text-inverse) 15%, transparent); border: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border-radius: 50%; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-inverse); font-size: 1.2rem;
  transition: all .2s ease; flex-shrink: 0;
}
.fv-quota-banner-close:hover { background: color-mix(in srgb, var(--text-inverse) 25%, transparent); transform: scale(1.05); }