/*
 * ════════════════════════════════════════════════════════════════════
 *  SMART FEEL — Design System
 *  Version 1.0 · 2026-06-02
 *
 *  Based on FormGoat DS-160 Electron design language.
 *  Applied to Smart Fill v2 web interface.
 *
 *  Architecture:
 *    Layer 0 — Raw palette (--fg-*)
 *    Layer 1 — Semantic tokens (surfaces, text, borders, brand)
 *    Layer 2 — Tints & gradients
 *    Layer 3 — Component tokens (radius, spacing, shadows, motion)
 *    Layer 4 — Typography
 * ════════════════════════════════════════════════════════════════════
 */

/* ── Layer 0: Raw palette ─────────────────────────────────────────── */
:root {
  /* Navy ramp */
  --fg-navy-900:   #0a1330;
  --fg-navy-800:   #0e1a3d;
  --fg-navy-card:  #131f4a;
  --fg-navy-700:   #142152;
  --fg-navy-600:   #1b2a6b;

  /* Brand colours */
  --fg-cyan:       #5fe3ff;
  --fg-cyan-bright:#8df0ff;
  --fg-blue:       #4d8bff;
  --fg-blue-deep:  #2657d6;
  --fg-blue-darker:#1a3fa8;
  --fg-coral:      #ff8a7a;
  --fg-coral-soft: #ffb8ad;
  --fg-green:      #4ade80;
  --fg-yellow:     #fbbf24;

  /* Ink ramp */
  --fg-ink:        #e8edff;
  --fg-ink-dim:    #a9b3d6;
  --fg-ink-mute:   #6b75a0;
}


/* ── Layer 1: Semantic tokens (default = navy theme) ──────────────── */
:root {
  /* Surfaces */
  --surface-base:  var(--fg-navy-900);   /* #0a1330  app background */
  --surface-1:     var(--fg-navy-800);   /* #0e1a3d  nav / panel bg */
  --surface-2:     var(--fg-navy-card);  /* #131f4a  cards */
  --surface-3:     var(--fg-navy-700);   /* #142152  nested elements */
  --surface-4:     var(--fg-navy-600);   /* #1b2a6b  tooltips / menus */

  /* On-surface text */
  --on-surface:         var(--fg-ink);       /* #e8edff */
  --on-surface-variant: var(--fg-ink-dim);   /* #a9b3d6 */
  --on-surface-muted:   var(--fg-ink-mute);  /* #6b75a0 */

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Brand */
  --primary:       var(--fg-blue);       /* #4d8bff  CTA, focus rings */
  --primary-deep:  var(--fg-blue-deep);  /* #2657d6 */
  --primary-on:    var(--fg-navy-900);   /* text on primary bg */
  --accent:        var(--fg-cyan);       /* #5fe3ff  highlights */
  --accent-bright: var(--fg-cyan-bright);

  /* Status */
  --success:  var(--fg-green);    /* #4ade80 */
  --warning:  var(--fg-yellow);   /* #fbbf24 */
  --error:    var(--fg-coral);    /* #ff8a7a */
  --error-soft: var(--fg-coral-soft);
}


/* ── Layer 2: Tints & gradients ───────────────────────────────────── */
:root {
  /* Accent (cyan) tints */
  --tint-accent-bg:        rgba(95,227,255,0.06);
  --tint-accent-bg-strong: rgba(95,227,255,0.12);
  --tint-accent-border:    rgba(95,227,255,0.25);

  /* Primary (blue) tints */
  --tint-primary-bg:       rgba(77,139,255,0.10);
  --tint-primary-bg-strong:rgba(77,139,255,0.18);
  --tint-primary-border:   rgba(77,139,255,0.30);

  /* Error (coral) tints */
  --tint-error-bg:         rgba(255,138,122,0.06);
  --tint-error-bg-strong:  rgba(255,138,122,0.15);
  --tint-error-border:     rgba(255,138,122,0.28);

  /* Success (green) tints */
  --tint-success-bg:       rgba(74,222,128,0.08);
  --tint-success-bg-strong:rgba(74,222,128,0.15);
  --tint-success-border:   rgba(74,222,128,0.25);

  /* Warning (yellow) tints */
  --tint-warning-bg:       rgba(251,191,36,0.07);
  --tint-warning-bg-strong:rgba(251,191,36,0.14);
  --tint-warning-border:   rgba(251,191,36,0.28);

  /* Gradients */
  --grad-brand: linear-gradient(90deg, #6fe0ff 0%, #4d8bff 60%, #2a5fd8 100%);
  --grad-coral: linear-gradient(90deg, #ffb8ad 0%, #ff8a7a 100%);
  --grad-bg:
    radial-gradient(1200px 600px at 50% -10%,  rgba(77,139,255,0.18),  transparent 60%),
    radial-gradient(900px  500px at 90%  20%,  rgba(255,138,122,0.08), transparent 60%),
    radial-gradient(700px  400px at 5%   30%,  rgba(95,227,255,0.10),  transparent 60%);
}


/* ── Layer 3: Component tokens ────────────────────────────────────── */
:root {
  /* Border radius */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* Spacing (8pt grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Shadows */
  --shadow-card:      0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -20px rgba(0,0,0,0.5);
  --shadow-card-raised: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 24px -8px rgba(0,0,0,0.55), 0 40px 80px -30px rgba(77,139,255,0.15);
  --shadow-btn:       0 8px 24px -6px rgba(77,139,255,0.50);
  --shadow-btn-hover: 0 12px 30px -6px rgba(77,139,255,0.65);
  --shadow-focus:     0 0 0 3px rgba(77,139,255,0.25);
  --shadow-focus-err: 0 0 0 3px rgba(255,138,122,0.25);
  --shadow-glow:      0 0 40px -10px rgba(95,227,255,0.35);
  --shadow-win:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px -20px rgba(0,0,0,0.65),
    0 60px 140px -40px rgba(77,139,255,0.20);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
}


/* ── Layer 4: Typography ──────────────────────────────────────────── */
:root {
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
}


/* ══════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--surface-base);
  background-image: var(--grad-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a    { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }


/* ── Buttons ──────────────────────────────────────────────────────── */
.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-text);
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform  var(--dur-fast) var(--ease-out),
    opacity    var(--dur-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.sf-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sf-btn:active   { transform: scale(0.975); }

/* Primary — gradient CTA */
.sf-btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.sf-btn-primary:hover { box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }

/* Secondary — outline */
.sf-btn-secondary {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-strong);
  color: var(--on-surface-variant);
}
.sf-btn-secondary:hover { background: rgba(255,255,255,0.07); color: var(--on-surface); border-color: var(--border-strong); }

/* Ghost — minimal */
.sf-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--on-surface-muted);
}
.sf-btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--on-surface); border-color: var(--border-strong); }

/* Danger */
.sf-btn-danger {
  background: var(--tint-error-bg);
  border-color: var(--tint-error-border);
  color: var(--error);
}
.sf-btn-danger:hover { background: var(--tint-error-bg-strong); }

/* Sizes */
.sf-btn-lg  { height: 56px; padding: 0 var(--sp-6); font-size: 15px; border-radius: var(--r-lg); }
.sf-btn-sm  { height: 34px; padding: 0 var(--sp-3); font-size: 13px; }
.sf-btn-xs  { height: 28px; padding: 0 var(--sp-2); font-size: 12px; border-radius: var(--r-sm); }
.sf-btn-full{ width: 100%; }

/* Icon button */
.sf-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--on-surface-variant);
  background: transparent;
  border: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.sf-icon-btn:hover { background: rgba(255,255,255,0.07); color: var(--on-surface); }
.sf-icon-btn.sm   { width: 26px; height: 26px; border-radius: 6px; }
.sf-icon-btn.danger:hover { color: var(--error); background: var(--tint-error-bg); }


/* ── Cards ────────────────────────────────────────────────────────── */
.sf-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}
.sf-card-xl {
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
}
.sf-card-raised {
  box-shadow: var(--shadow-card-raised);
  border-color: var(--border-strong);
  background: linear-gradient(160deg, rgba(255,255,255,0.025) 0%, transparent 50%), var(--surface-2);
}


/* ── Form fields ──────────────────────────────────────────────────── */
.sf-field        { display: flex; flex-direction: column; gap: 6px; }
.sf-field-label  { font-size: 12px; font-weight: 500; color: var(--on-surface-variant); letter-spacing: 0.03em; }
.sf-field-hint   { font-size: 11.5px; color: var(--on-surface-muted); }
.sf-field-error  { font-size: 11.5px; color: var(--error); }

.sf-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--on-surface);
  font-size: 14px;
  font-family: var(--font-text);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.sf-input::placeholder { color: var(--on-surface-muted); font-size: 13px; }
.sf-input:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
  background: var(--surface-3);
}
.sf-input.is-error { border-color: var(--error); box-shadow: var(--shadow-focus-err); }
.sf-input:disabled { background: rgba(255,255,255,0.02); cursor: not-allowed; opacity: 0.6; }

.sf-textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--on-surface);
  font-size: 14px; font-family: var(--font-text);
  resize: vertical; min-height: 100px; line-height: 1.5; outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.sf-textarea:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }

.sf-select {
  width: 100%; height: 44px; padding: 0 var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--on-surface);
  font-size: 14px; font-family: var(--font-text); outline: none; cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.sf-select:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }


/* ── Badges / Chips / Pills ───────────────────────────────────────── */
.sf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--on-surface-muted);
  white-space: nowrap;
}
.sf-badge.success { background: var(--tint-success-bg); border-color: var(--tint-success-border); color: var(--success); }
.sf-badge.warning { background: var(--tint-warning-bg); border-color: var(--tint-warning-border); color: var(--warning); }
.sf-badge.error   { background: var(--tint-error-bg);   border-color: var(--tint-error-border);   color: var(--error); }
.sf-badge.accent  { background: var(--tint-accent-bg);  border-color: var(--tint-accent-border);  color: var(--accent); }
.sf-badge.primary { background: var(--tint-primary-bg); border-color: var(--tint-primary-border); color: var(--primary); }

.sf-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--tint-accent-bg); border: 1px solid var(--tint-accent-border);
  color: var(--accent);
}

.sf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--on-surface-variant);
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.sf-chip:hover     { background: rgba(255,255,255,0.08); border-color: var(--border-strong); }
.sf-chip.is-active { background: var(--tint-primary-bg); border-color: var(--tint-primary-border); color: var(--primary); }


/* ── Field card (extracted data item) ────────────────────────────── */
.sf-field-card {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 10px 12px 10px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.sf-field-card:hover { border-color: var(--border-strong); }

/* Status badge */
.sf-field-card-status {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Filled */
.sf-field-card.filled             { background: var(--tint-success-bg); border-color: var(--tint-success-border); }
.sf-field-card.filled .sf-field-card-status { background: var(--success); color: #0a1330; }

/* Missing */
.sf-field-card.missing            { background: var(--tint-warning-bg); border-color: var(--tint-warning-border); }
.sf-field-card.missing .sf-field-card-status { border: 1.5px dashed rgba(251,191,36,0.55); color: var(--warning); }

/* Custom */
.sf-field-card.custom             { background: var(--tint-accent-bg); border-color: var(--tint-accent-border); }
.sf-field-card.custom .sf-field-card-status { background: var(--tint-accent-bg-strong); color: var(--accent); }

/* Active (focused / selected) */
.sf-field-card.is-active          { border-color: var(--primary); box-shadow: var(--shadow-focus); }

/* Content */
.sf-field-card-content { min-width: 0; }
.sf-field-card-label {
  font-size: 11px; font-weight: 500;
  color: var(--on-surface-muted); letter-spacing: 0.01em;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-field-card-value {
  font-size: 13.5px; font-weight: 600;
  color: var(--on-surface); letter-spacing: -0.005em;
  word-break: break-word;
}
.sf-field-card.missing .sf-field-card-value { color: var(--on-surface-muted); font-weight: 400; font-size: 12.5px; }

/* Inline editable input */
.sf-field-card-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
  color: var(--on-surface); font-size: 13.5px; font-weight: 600;
  font-family: var(--font-text); letter-spacing: -0.005em;
  outline: none; transition: border-bottom-color var(--dur-fast);
}
.sf-field-card-input::placeholder { color: var(--on-surface-muted); font-weight: 400; font-size: 12px; }
.sf-field-card-input:focus        { border-bottom-color: var(--primary); }
.sf-field-card-input.modified     { border-bottom-color: var(--warning); color: var(--warning); }
.sf-field-card.missing .sf-field-card-input { font-size: 12.5px; font-weight: 400; color: var(--on-surface-variant); }

/* Inline select */
.sf-field-card-select {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; color: var(--on-surface);
  font-size: 12.5px; font-family: var(--font-text);
  margin-top: 3px; outline: none; cursor: pointer;
  transition: border-color var(--dur-fast);
}
.sf-field-card-select:focus { border-color: var(--primary); }


/* ── Section header ───────────────────────────────────────────────── */
.sf-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.10em; color: var(--on-surface-muted);
  margin: 16px 0 7px;
  display: flex; align-items: center; gap: 10px;
}
.sf-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sf-section-title.filled { color: var(--success); }
.sf-section-title.missing{ color: var(--warning); }


/* ── Progress ─────────────────────────────────────────────────────── */
.sf-progress {
  width: 100%; height: 3px;
  background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden;
}
.sf-progress-bar {
  height: 100%; background: var(--grad-brand);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.sf-progress-bar.indeterminate {
  width: 35%;
  animation: sf-progress-indet 1.4s var(--ease-in-out) infinite;
}
@keyframes sf-progress-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}


/* ── Spinner ──────────────────────────────────────────────────────── */
.sf-spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2.5px solid rgba(95,227,255,0.18);
  border-top-color: var(--accent);
  animation: sf-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.sf-spinner.sm { width: 18px; height: 18px; border-width: 2px; }
.sf-spinner.lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes sf-spin { to { transform: rotate(360deg); } }


/* ── Toast / notification ─────────────────────────────────────────── */
.sf-toast {
  display: flex; gap: var(--sp-3);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px 14px;
  min-width: 280px; max-width: 380px;
  box-shadow: var(--shadow-card);
}
.sf-toast-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 14px;
}
.sf-toast.success .sf-toast-icon { background: var(--tint-success-bg); color: var(--success); }
.sf-toast.warning .sf-toast-icon { background: var(--tint-warning-bg); color: var(--warning); }
.sf-toast.error   .sf-toast-icon { background: var(--tint-error-bg-strong); color: var(--error); }
.sf-toast.accent  .sf-toast-icon { background: var(--tint-accent-bg-strong); color: var(--accent); }
.sf-toast-title   { font-size: 13px; font-weight: 600; color: var(--on-surface); }
.sf-toast-body    { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; line-height: 1.4; }


/* ── Nav / Header ─────────────────────────────────────────────────── */
.sf-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(10,19,48,0.72);
  border-bottom: 1px solid var(--border);
}
.sf-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6);
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.sf-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.sf-brand-mark {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--surface-3); display: grid; place-items: center; overflow: hidden;
}
.sf-brand-accent { color: var(--accent); }
.sf-nav-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--tint-accent-bg);
  border: 1px solid var(--tint-accent-border); padding: 3px 8px; border-radius: var(--r-pill);
}


/* ── 3-pane workbench layout ──────────────────────────────────────── */
.sf-workbench {
  display: grid;
  grid-template-columns: 1fr var(--mid-w, 340px) 1fr;
  height: calc(100vh - 60px);  /* subtract nav height */
  background: var(--surface-base);
  overflow: hidden;
}

/* Pane base */
.sf-pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.sf-pane:last-child { border-right: none; background: var(--surface-base); }

/* Pane header */
.sf-pane-header {
  flex: 0 0 auto; height: 44px;
  padding: 0 14px;
  display: flex; align-items: center; gap: var(--sp-3);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--on-surface);
  font-family: var(--font-display);
}
.sf-pane-header-badges {
  margin-left: auto; display: flex; gap: 5px; align-items: center;
}

/* Pane body */
.sf-pane-body {
  flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-4) var(--sp-8);
}
.sf-pane-body::-webkit-scrollbar          { width: 8px; }
.sf-pane-body::-webkit-scrollbar-track    { background: transparent; }
.sf-pane-body::-webkit-scrollbar-thumb    { background: rgba(255,255,255,0.10); border-radius: 6px; }
.sf-pane-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* Pane footer */
.sf-pane-footer {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-2);
}


/* ── Drop zone ────────────────────────────────────────────────────── */
.sf-drop {
  padding: 32px 24px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.02);
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  position: relative;

  /* Dashed border via SVG mask */
  border: 2px dashed rgba(255,255,255,0.14);
}
.sf-drop:hover,
.sf-drop.is-over {
  background: var(--tint-accent-bg);
  border-color: var(--accent);
}
.sf-drop-icon  { font-size: 32px; margin-bottom: var(--sp-3); opacity: 0.4; }
.sf-drop-title { font-size: 15px; font-weight: 600; color: var(--on-surface); }
.sf-drop-sub   { font-size: 12.5px; color: var(--on-surface-muted); margin-top: 4px; }


/* ── Confidence / score bar ───────────────────────────────────────── */
.sf-conf-pill {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.sf-conf-pill.high   { background: var(--tint-success-bg); border: 1px solid var(--tint-success-border); color: var(--success); }
.sf-conf-pill.medium { background: var(--tint-warning-bg); border: 1px solid var(--tint-warning-border); color: var(--warning); }
.sf-conf-pill.low    { background: var(--tint-error-bg);   border: 1px solid var(--tint-error-border);   color: var(--error); }

.sf-conf-bar {
  height: 6px; background: var(--surface-3);
  border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-2);
}
.sf-conf-bar > div {
  height: 100%; background: var(--grad-brand);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}


/* ── Skeleton shimmer ─────────────────────────────────────────────── */
.sf-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: sf-shimmer 1.4s linear infinite;
}
.sf-skeleton.line { height: 12px; border-radius: 6px; }
.sf-skeleton.card { height: 56px; border-radius: 10px; margin: 8px 0; }
@keyframes sf-shimmer { to { background-position: -200% 0; } }


/* ── Utility ──────────────────────────────────────────────────────── */
.hidden  { display: none !important; }
.sf-flex { display: flex; }
.sf-grid { display: grid; }
.sf-items-center   { align-items: center; }
.sf-items-start    { align-items: flex-start; }
.sf-justify-between{ justify-content: space-between; }
.sf-justify-center { justify-content: center; }
.sf-gap-1  { gap: var(--sp-1); }
.sf-gap-2  { gap: var(--sp-2); }
.sf-gap-3  { gap: var(--sp-3); }
.sf-gap-4  { gap: var(--sp-4); }
.sf-flex-1 { flex: 1; min-width: 0; }
.sf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-text-mute { color: var(--on-surface-muted); }
.sf-text-dim  { color: var(--on-surface-variant); }
.sf-text-sm   { font-size: 13px; }
.sf-text-xs   { font-size: 11.5px; }
.sf-text-mono { font-family: var(--font-mono); }
.sf-font-600  { font-weight: 600; }
.sf-font-700  { font-weight: 700; }
.sf-mt-2  { margin-top: var(--sp-2); }
.sf-mt-4  { margin-top: var(--sp-4); }
.sf-mb-2  { margin-bottom: var(--sp-2); }
.sf-mb-4  { margin-bottom: var(--sp-4); }