/* Mode chooser */
  .mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px; }
  .mode-card { border:2px solid var(--border); border-radius:12px; padding:20px;
    cursor:pointer; text-align:center; transition:all 0.15s; }
  .mode-card:hover { border-color:var(--accent); }
  .mode-card.selected { border-color:var(--accent); background:var(--info-bg-tint); }
  .mode-icon { font-size:28px; margin-bottom:10px; }
  .mode-card h3 { font-size:13px; font-weight:600; margin-bottom:6px; }
  .mode-card p { font-size:11px; color:var(--muted); line-height:1.5; }
  .mode-recommend { font-size:10px; background:var(--accent); color:var(--text-inverted); padding:2px 8px;
    border-radius:20px; display:inline-block; margin-top:8px; }

  /* Wizard steps */
  .wizard-steps { display:flex; justify-content:space-between; margin-bottom:24px; position:relative; }
  .wizard-steps::before { content:''; position:absolute; top:15px; left:10%; right:10%;
    height:1px; background:var(--border); z-index:0; }
  .wstep { display:flex; flex-direction:column; align-items:center; gap:6px; z-index:1; }
  .wstep-dot { width:30px; height:30px; border-radius:50%; background:var(--border);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
    color:var(--muted); transition:all 0.2s; }
  .wstep.active .wstep-dot  { background:var(--accent); color:var(--text-inverted); }
  .wstep.done   .wstep-dot  { background:var(--green);  color:var(--text-inverted); }
  .wstep-label { font-size:10px; color:var(--muted); }
  .wstep.active .wstep-label { color:var(--accent); font-weight:600; }

  /* Form fields */
  .form-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  .form-row.full { grid-template-columns:1fr; }
  .form-group { display:flex; flex-direction:column; gap:5px; }
  .form-group label { font-size:11px; font-weight:600; color:var(--label); text-transform:uppercase; letter-spacing:0.05em; }
  .form-group input, .form-group select, .form-group textarea {
    background:var(--border-subtle); border:1px solid var(--border); border-radius:8px;
    color:var(--text); padding:8px 11px; font-size:13px; font-family:var(--sans); }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline:none; border-color:var(--accent); }
  .form-group textarea { resize:vertical; min-height:80px; }
  .form-group select option { background:var(--surface); }
  .form-hint { font-size:12px; color:var(--label); }
  .btn-secondary { background:transparent; color:var(--muted); border:1px solid var(--border);
    padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; }
  .btn-secondary:hover { border-color:var(--text); color:var(--text); }

  /* ── Fix A: .btn-sm had no CSS rule, falling back to default browser
     buttons (the "HTML from 2000" look on Add Text / Add Q&A / PDF /
     DOCX / Refresh, etc.). Style as a compact dark-theme pill with
     hover lift. Variants:
       .btn-sm           — default tinted neutral
       .btn-sm.outline   — transparent + border (used by ↻ refresh-style)
       .btn-sm.btn-danger — destructive (red); existing .btn-danger rule
                             handles colors, this rule just sizes it down
     Subtle hover transform keeps clicks feeling intentional. */
  .btn-sm {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--border-subtle);
    color:var(--text); border:1px solid var(--border);
    padding:5px 10px; border-radius:6px;
    font-size:11px; font-weight:600; line-height:1.2;
    font-family:inherit; cursor:pointer;
    transition:background 0.15s, border-color 0.15s, transform 0.06s;
  }
  .btn-sm:hover  { background:var(--border-subtle); border-color:var(--accent); }
  .btn-sm:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .btn-sm:active { transform:translateY(1px); }
  .btn-sm:disabled, .btn-sm[aria-disabled="true"] {
    opacity:0.45; cursor:not-allowed; transform:none;
  }
  .btn-sm.outline { background:transparent; }
  .btn-sm.outline:hover { background:var(--border-subtle); }
  /* .btn-danger.btn-sm: take colors from .btn-danger but the smaller
     padding/font from .btn-sm. The order in the cascade means
     .btn-sm comes after .btn-danger in the rule list — explicit
     override here keeps the destructive red regardless of order. */
  .btn-sm.btn-danger {
    background:var(--danger); color:var(--text-inverted); border-color:var(--danger);
  }
  .btn-sm.btn-danger:hover { background:var(--danger); border-color:var(--danger); opacity:0.85; }

  /* ── Fix B: native <select> dropdown popup honours dark theme. Most
     browsers (Chromium, Firefox 95+) render the options popup using
     OS-default styles unless explicitly told otherwise. Setting
     color-scheme + repeating background/color on option/optgroup gives
     a consistent dark dropdown across Voice / STT / LLM / Country /
     Campaign pickers. Hover/checked highlight uses --accent so it
     matches the rest of the UI. */
  select { color-scheme:light dark; }
  select option, select optgroup {
    background:var(--surface);
    color:var(--text);
  }
  select option:checked,
  select option:hover {
    background:var(--accent-bg);
    color:var(--text-inverted);
  }
  select optgroup {
    font-weight:700; font-style:normal;
    color:var(--muted);
  }
  .provision-status { display:none; padding:12px 14px; border-radius:8px; font-size:13px;
    margin-top:12px; }
  .provision-status.loading { display:block; background:var(--info-bg-tint);
    color:var(--accent); border:1px solid var(--info-border); }
  .provision-status.error   { display:block; background:var(--danger-bg-tint);
    color:var(--danger); border:1px solid var(--danger-border); }
  .provision-status.success { display:block; background:var(--success-bg-tint);
    color:var(--success); border:1px solid var(--success-border); }


  /* Variables UI */
  .var-table { width:100%; border-collapse:collapse; margin-top:8px; }
  .var-table th { font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase;
    padding:4px 8px; text-align:left; border-bottom:1px solid var(--border); }
  .var-table td { padding:5px 4px; vertical-align:middle; }
  .var-table input { background:var(--border-subtle); border:1px solid var(--border);
    border-radius:6px; color:var(--text); padding:5px 8px; font-size:12px; width:100%; font-family:var(--font); }
  .var-table select { background:var(--border-subtle); border:1px solid var(--border);
    border-radius:6px; color:var(--text); padding:5px 8px; font-size:12px; width:100%; }
  .var-table input:focus, .var-table select:focus { outline:none; border-color:var(--accent); }
  /* Was color:var(--accent) (#3b82f6) on rgba(59,130,246,0.1) → ~4.2:1.
     blue-400 (#60a5fa) on the same tint measures ~7.4:1. */
  .btn-add-var { background:var(--info-bg-tint); color:var(--accent); border:1px solid var(--info-border);
    padding:5px 12px; border-radius:6px; font-size:11px; font-weight:600;
    cursor:pointer; margin-top:8px; }
  .btn-add-var:hover { background:var(--info-border); }
  /* Same lift for the destructive Remove. red-300 (#fca5a5) on the red tint
     reaches ~9:1; var(--red) #ef4444 was 4.2:1. */
  .btn-rm-var { background:var(--danger-bg-tint); color:var(--danger); border:none;
    width:24px; height:24px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:700; }
  .var-placeholder { font-family:var(--font); font-size:11px; color:var(--accent); }