/* ══════════════════════════════════════════
     CSS VARIABLES — aligned with FrenchWrite base.css
  ══════════════════════════════════════════ */
  :root {
    --cream:        #f5f0e8;
    --cream-soft:   #ede7da;
    --cream-border: #d8cfbe;
    --ink:          #1a1612;
    --ink-soft:     #3d3530;
    --ink-muted:    #7a6f65;
    --ink-ghost:    #b0a598;
    --rouge:        #c0392b;
    --rouge-soft:   #e74c3c;
    --or:           #c9a84c;
    --bleu:         #2c5f8a;
    --vert:         #2d8a5f;

    --bg:           var(--cream);
    --bg-panel:     var(--cream-soft);
    --bg-input:     #faf7f2;
    --border:       var(--cream-border);
    --text:         var(--ink);
    --text-soft:    var(--ink-soft);
    --text-muted:   var(--ink-muted);
    --text-ghost:   var(--ink-ghost);
    --accent:       var(--rouge);
    --accent-soft:  var(--rouge-soft);
    --success:      var(--vert);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Lora', Georgia, serif;
    --font-mono:    'DM Mono', 'Courier New', monospace;

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 24px; --space-6: 32px;
    --space-7: 48px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 3px rgba(26,22,18,.08);
    --shadow-md: 0 4px 16px rgba(26,22,18,.12);

    --ease:       cubic-bezier(.4,0,.2,1);
    --trans-fast: 120ms var(--ease);
    --trans-mid:  240ms var(--ease);
    --trans-slow: 400ms var(--ease);

    --header-h: 56px;
  }

  [data-theme="dark"] {
    --cream:        #111827;
    --cream-soft:   #1a2232;
    --cream-border: #2d3a4f;
    --ink:          #e8e2d8;
    --ink-soft:     #c8bfb2;
    --ink-muted:    #8a9ab0;
    --ink-ghost:    #4a5a70;
    --rouge:        #e05c4f;
    --rouge-soft:   #f07368;
    --vert:         #4ab57e;
    --bg:           #0f1724;
    --bg-panel:     #161f2e;
    --bg-input:     #131c2a;
    --border:       #253347;
    --text:         #e8e2d8;
    --text-soft:    #c8bfb2;
    --text-muted:   #8a9ab0;
    --text-ghost:   #4a5a70;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.3);
    --shadow-md:    0 4px 16px rgba(0,0,0,.4);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color var(--trans-slow), color var(--trans-slow);
  }
  a { color: var(--bleu); text-decoration: none; transition: color var(--trans-fast); }
  a:hover { color: var(--accent); }
  button { font-family: inherit; cursor: pointer; border: none; background: none; transition: all var(--trans-fast); }
  button:disabled { opacity: .4; cursor: not-allowed; }
  .hidden { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  ::selection { background: rgba(192,57,43,.15); color: var(--text); }

  /* ══ MAIN ══ */
  .app-main {
    flex: 1;
    max-width: 900px; margin: 0 auto; width: 100%;
    padding: var(--space-5) var(--space-5) var(--space-7);
    display: flex; flex-direction: column; gap: var(--space-4);
  }

  /* Hero */
  .page-hero { text-align: center; padding: var(--space-3) 0 var(--space-2); }
  .page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 600; color: var(--text); line-height: 1.2;
    margin-bottom: var(--space-2);
  }
  .page-hero h1 em { font-style: italic; color: var(--accent); }
  .page-hero p {
    font-size: .92rem; color: var(--text-muted);
    max-width: 520px; margin: 0 auto; line-height: 1.6;
  }

  /* ── Autocomplete ── */
  .autocomplete-wrap {
    position: relative;
    flex: 1;
  }
  .autocomplete-wrap .verb-input {
    width: 100%;
    flex: none;
  }
  .autocomplete-list {
    position: absolute;
    top: calc(100% - 1px);
    left: 0; right: 0;
    z-index: 200;
    background: var(--bg-input);
    border: 1.5px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    max-height: 268px;
    list-style: none;
    padding: 0;
  }
  .autocomplete-list.hidden { display: none; }
  .autocomplete-item {
    padding: 9px 20px 9px 42px;
    font-family: var(--font-display); font-size: .95rem; font-style: italic;
    color: var(--text); cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--trans-fast), color var(--trans-fast);
    user-select: none;
  }
  .autocomplete-item:last-child { border-bottom: none; }
  .autocomplete-item:hover,
  .autocomplete-item.ac-active {
    background: rgba(192,57,43,.07);
    color: var(--accent);
  }
  .autocomplete-item strong {
    color: var(--accent); font-style: normal; font-weight: 600;
  }
  .autocomplete-wrap[aria-expanded="true"] .verb-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(192,57,43,.12), var(--shadow-sm);
  }

  /* ── Search bar ── */
  .search-bar-wrap {
    position: relative;
    display: flex; gap: var(--space-3); align-items: stretch;
  }
  .search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-ghost); pointer-events: none;
    transition: color var(--trans-fast);
  }
  .verb-input {
    flex: 1;
    font-family: var(--font-display); font-size: 1.15rem; font-style: italic;
    padding: 13px 16px 13px 42px;
    background: var(--bg-input); border: 1.5px solid var(--border);
    border-radius: var(--radius-md); color: var(--text); outline: none;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-slow);
  }
  .verb-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(192,57,43,.12), var(--shadow-sm);
  }
  .search-bar-wrap:focus-within .search-icon { color: var(--accent); }
  .verb-input::placeholder { color: var(--text-ghost); font-style: italic; }

  .btn-conjugate {
    font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
    padding: 13px var(--space-5); border-radius: var(--radius-md);
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    white-space: nowrap; box-shadow: var(--shadow-sm);
    transition: background var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
  }
  .btn-conjugate:hover { background: var(--rouge-soft); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn-conjugate:active { transform: translateY(0); }

  /* ── Quick suggestions ── */
  .quick-label {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); flex-shrink: 0;
  }
  .quick-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
  .quick-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
  .quick-chip {
    font-family: var(--font-display); font-size: .82rem; font-style: italic;
    padding: 4px 12px; border: 1px solid var(--border);
    border-radius: 20px; background: var(--bg-panel);
    color: var(--text-soft); cursor: pointer;
    transition: all var(--trans-fast);
  }
  .quick-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(192,57,43,.04); }

  /* ── Tense filter ── */
  .tense-filter-bar {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  }
  .tense-filter-label {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-ghost); flex-shrink: 0;
  }
  .tense-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .tense-chip {
    font-family: var(--font-mono); font-size: .68rem;
    padding: 3px 10px; border: 1px solid var(--border);
    border-radius: 20px; background: var(--bg);
    color: var(--text-soft); cursor: pointer;
    transition: all var(--trans-fast);
  }
  .tense-chip:hover { border-color: var(--accent); color: var(--accent); }
  .tense-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ── Result state ── */
  .result-area { display: flex; flex-direction: column; gap: var(--space-4); }

  /* Verb meta header */
  .verb-meta {
    display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
  }
  .verb-meta-name {
    font-family: var(--font-display); font-size: 1.6rem;
    font-weight: 600; font-style: italic; color: var(--accent);
  }
  .verb-meta-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .verb-badge {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
    text-transform: uppercase; padding: 2px 8px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-muted); background: var(--bg-panel);
  }
  .verb-badge.badge-group { border-color: var(--or); color: var(--or); background: rgba(201,168,76,.08); }
  .verb-badge.badge-type  { border-color: var(--bleu); color: var(--bleu); background: rgba(44,95,138,.08); }

  /* Tense grid */
  .tense-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
  }
  .tense-grid-ad { grid-column: 1 / -1; }
  .tense-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
  }
  .tense-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink-ghost); }
  .tense-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .tense-card-name {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .tense-card-mood {
    font-family: var(--font-mono); font-size: .58rem;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-ghost);
  }
  .conj-table { width: 100%; border-collapse: collapse; }
  .conj-table tr { border-bottom: 1px solid var(--border); }
  .conj-table tr:last-child { border-bottom: none; }
  .conj-table tr:hover td { background: rgba(192,57,43,.04); }
  .conj-table td {
    padding: 6px var(--space-4); font-size: .88rem;
  }
  .conj-pron {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--text-ghost); width: 42px; vertical-align: middle;
  }
  .conj-form {
    font-family: var(--font-body); color: var(--text);
    font-size: .9rem; vertical-align: middle;
  }
  .conj-form em { font-style: normal; color: var(--accent); font-weight: 500; }

  /* Copy row button */
  .conj-copy {
    width: 22px; text-align: right; vertical-align: middle;
  }
  .btn-copy-form {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--border); opacity: 0;
    transition: color var(--trans-fast), opacity var(--trans-fast);
    font-family: var(--font-mono); font-size: .65rem;
  }
  .conj-table tr:hover .btn-copy-form { opacity: 1; color: var(--text-muted); }
  .btn-copy-form:hover { color: var(--accent) !important; }

  /* Notes / participe */
  .verb-notes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
  }
  .note-card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  }
  .note-label {
    font-family: var(--font-mono); font-size: .62rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-ghost); margin-bottom: 5px;
  }
  .note-val {
    font-family: var(--font-display); font-size: 1rem;
    font-style: italic; color: var(--text);
  }
  .note-val strong { color: var(--accent); font-weight: 600; }

  /* Empty / loading state */
  .empty-state {
    text-align: center; padding: var(--space-7) var(--space-5);
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .empty-state-icon { font-size: 2.5rem; margin-bottom: var(--space-3); opacity: .4; }
  .empty-state p {
    font-family: var(--font-body); font-size: .92rem;
    color: var(--text-muted); font-style: italic;
  }

  .loading-state {
    text-align: center; padding: var(--space-6);
    font-family: var(--font-mono); font-size: .78rem;
    color: var(--text-muted); letter-spacing: .05em;
  }
  @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
  .loading-state { animation: pulse 1.2s ease-in-out infinite; }

  .error-state {
    background: rgba(192,57,43,.06); border: 1px solid rgba(192,57,43,.25);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
    font-family: var(--font-mono); font-size: .82rem; color: var(--accent);
  }

  /* ── Actions ── */
  .tool-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
  .btn-label { display: inline; }
  .btn-action {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text-soft); cursor: pointer; text-decoration: none;
    transition: all var(--trans-fast); box-shadow: var(--shadow-sm);
  }
  .btn-action:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }
  .btn-action.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .btn-action.btn-primary:hover { background: var(--rouge-soft); border-color: var(--rouge-soft); color: #fff; }

  .ref-table { width: 100%; border-collapse: collapse; }
  .ref-table th {
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); padding: var(--space-2) var(--space-3);
    text-align: left; background: var(--bg); border: 1px solid var(--border);
  }
  .ref-table td { font-size: .88rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); color: var(--text-soft); }
  .ref-table tr:nth-child(even) td { background: var(--bg); }
  .ref-table td em { font-style: italic; color: var(--accent); }

  /* Toast */
  .toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: var(--cream);
    font-family: var(--font-mono); font-size: .8rem;
    padding: 9px var(--space-5); border-radius: 99px;
    opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s; z-index: 9999;
    white-space: nowrap;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  [data-theme="dark"] .toast { background: var(--ink); color: var(--bg); }

  /* ── Responsive ── */
  @media (max-width: 640px) {
    .tense-grid { grid-template-columns: 1fr; }
    .verb-notes { grid-template-columns: 1fr 1fr; }
    .search-bar-wrap { flex-direction: column; }
    .search-icon { top: 27px; }
    .btn-conjugate { width: 100%; justify-content: center; padding: 12px; }
    .tool-header-nav {
      display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none; gap: var(--space-1); flex: 1; justify-content: flex-start;
    }
    .tool-header-nav::-webkit-scrollbar { display: none; }
    .tool-nav-link { padding: 5px 8px; }
    .tool-nav-text { display: none; }
    .tool-nav-link svg { width: 16px; height: 16px; }
    .tool-actions { flex-direction: row; flex-wrap: nowrap; }
    .btn-action { flex: 1; justify-content: center; padding: var(--space-2); }
    .btn-label { display: none; }
  }