/* ══════════════════════════════════════════
     GENDER-CHECKER-SPECIFIC VARIABLES
     (all shared vars come from french-verbs-conjugator.css)
  ══════════════════════════════════════════ */
  :root {
    --masc:        #2c5f8a;
    --masc-soft:   rgba(44,95,138,.10);
    --masc-border: rgba(44,95,138,.30);
    --fem:         #c0392b;
    --fem-soft:    rgba(192,57,43,.10);
    --fem-border:  rgba(192,57,43,.30);
  }
  [data-theme="dark"] {
    --masc:        #4a8fc0;
    --masc-soft:   rgba(74,143,192,.12);
    --masc-border: rgba(74,143,192,.30);
    --fem:         #e05c4f;
    --fem-soft:    rgba(224,92,79,.12);
    --fem-border:  rgba(224,92,79,.30);
  }

  /* ══ MAIN — center-align override ══ */
  .app-main { align-items: center; }
  .app-main > * { width: 100%; }

  /* ══ 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);
  }

  /* ══ RESULT CARD ══ */
  .result-wrap { width: 100%; }

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

  .gender-card {
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    overflow: hidden;
    transition: border-color var(--trans-mid), box-shadow var(--trans-mid);
    box-shadow: var(--shadow-sm);
    animation: fadeUp var(--trans-mid) both;
  }
  .gender-card.is-masc { border-color: var(--masc-border); box-shadow: 0 0 0 4px var(--masc-soft), var(--shadow-md); }
  .gender-card.is-fem  { border-color: var(--fem-border);  box-shadow: 0 0 0 4px var(--fem-soft),  var(--shadow-md); }

  .gender-card-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    gap: var(--space-4);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
  }

  .article-block { text-align: center; }
  .article-def {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1;
    letter-spacing: -.02em; transition: color var(--trans-mid);
  }
  .is-masc .article-def { color: var(--masc); }
  .is-fem  .article-def { color: var(--fem); }
  .article-indef {
    font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 4px;
  }
  .article-sub {
    font-family: var(--font-body); font-size: .78rem;
    color: var(--text-ghost); font-style: italic; margin-top: 2px;
  }

  .gender-badge-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .gender-badge {
    font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 16px; border-radius: 99px;
    border: 1.5px solid var(--border); transition: all var(--trans-mid);
  }
  .is-masc .gender-badge { background: var(--masc-soft); border-color: var(--masc-border); color: var(--masc); }
  .is-fem  .gender-badge { background: var(--fem-soft);  border-color: var(--fem-border);  color: var(--fem); }
  .gender-symbol {
    font-family: var(--font-display); font-size: 1.4rem;
    color: var(--text-ghost); transition: color var(--trans-mid);
  }
  .is-masc .gender-symbol { color: var(--masc); }
  .is-fem  .gender-symbol { color: var(--fem); }

  .noun-block { text-align: center; }
  .noun-display {
    font-family: var(--font-display); font-weight: 600; font-style: italic;
    font-size: clamp(1.4rem, 4vw, 2.2rem); line-height: 1.2;
    color: var(--text); word-break: break-word;
  }
  .noun-plural {
    font-family: var(--font-body); font-size: .82rem;
    color: var(--text-muted); font-style: italic; margin-top: 5px;
  }
  .noun-plural span { color: var(--text-ghost); font-style: normal; font-family: var(--font-mono); font-size: .7rem; }

  .gender-card-strip {
    display: flex; flex-wrap: wrap;
    padding: var(--space-3) var(--space-5);
    gap: var(--space-2) var(--space-5);
    background: var(--bg); justify-content: center; align-items: center;
  }
  .strip-item { display: flex; align-items: center; gap: var(--space-2); font-size: .82rem; }
  .strip-label {
    font-family: var(--font-mono); font-size: .62rem;
    letter-spacing: .07em; text-transform: uppercase; color: var(--text-ghost);
  }
  .strip-val { font-family: var(--font-body); color: var(--text-soft); }
  .strip-val em { font-style: italic; }
  .strip-rule {
    font-family: var(--font-mono); font-size: .72rem;
    padding: 2px 8px; border-radius: var(--radius-sm); transition: all var(--trans-mid);
  }
  .is-masc .strip-rule { background: var(--masc-soft); color: var(--masc); border: 1px solid var(--masc-border); }
  .is-fem  .strip-rule { background: var(--fem-soft);  color: var(--fem);  border: 1px solid var(--fem-border); }

  /* ══ SUFFIX CARDS ══ */
  .suffix-section-title {
    font-family: var(--font-display); font-size: 1rem;
    font-weight: 600; color: var(--text); text-align: center;
  }
  .suffix-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
  }
  .suffix-card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: var(--space-4);
    transition: border-color var(--trans-fast), transform var(--trans-fast);
  }
  .suffix-card:hover { transform: translateY(-2px); border-color: var(--ink-ghost); }
  .suffix-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-2);
  }
  .suffix-tag {
    font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
    padding: 2px 8px; border-radius: var(--radius-sm); letter-spacing: .04em;
  }
  .suffix-tag.m { background: var(--masc-soft); color: var(--masc); border: 1px solid var(--masc-border); }
  .suffix-tag.f { background: var(--fem-soft);  color: var(--fem);  border: 1px solid var(--fem-border); }
  .suffix-gender-dot { width: 8px; height: 8px; border-radius: 50%; }
  .suffix-gender-dot.m { background: var(--masc); }
  .suffix-gender-dot.f { background: var(--fem); }
  .suffix-examples {
    font-family: var(--font-body); font-size: .8rem;
    font-style: italic; color: var(--text-muted); line-height: 1.5;
  }

  /* ══ QUIZ ══ */
  .btn-quiz {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
    padding: 6px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text-soft); cursor: pointer;
    transition: all var(--trans-fast); box-shadow: var(--shadow-sm);
  }
  .btn-quiz:hover, .btn-quiz.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .quiz-card {
    background: var(--bg-panel); border: 2px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-6);
    text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: var(--space-4);
  }
  .quiz-progress {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-ghost); align-self: stretch;
    display: flex; justify-content: space-between; align-items: center;
  }
  .quiz-score-badge {
    font-family: var(--font-mono); font-size: .72rem;
    padding: 2px 10px; border-radius: 99px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
  }
  .quiz-word {
    font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 600; font-style: italic; color: var(--text);
  }
  .quiz-hint { font-family: var(--font-body); font-size: .82rem; color: var(--text-muted); font-style: italic; }
  .quiz-btns { display: flex; gap: var(--space-4); width: 100%; max-width: 340px; }
  .btn-quiz-answer {
    flex: 1; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); border: 1.5px solid var(--border);
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
    cursor: pointer; transition: all var(--trans-fast); background: var(--bg);
  }
  .btn-quiz-answer.masc { color: var(--masc); border-color: var(--masc-border); }
  .btn-quiz-answer.fem  { color: var(--fem);  border-color: var(--fem-border); }
  .btn-quiz-answer.masc:hover { background: var(--masc-soft); }
  .btn-quiz-answer.fem:hover  { background: var(--fem-soft); }
  .btn-quiz-answer.correct { background: rgba(45,138,95,.15); border-color: var(--vert); color: var(--vert); }
  .btn-quiz-answer.wrong   { background: var(--fem-soft); border-color: var(--fem); color: var(--fem); }
  .quiz-feedback {
    font-family: var(--font-body); font-size: .88rem;
    min-height: 1.4em; font-style: italic; transition: color var(--trans-fast);
  }
  .quiz-feedback.ok  { color: var(--vert); }
  .quiz-feedback.bad { color: var(--fem); }

  /* ══ TABLE GENDER COLS ══ */
  .td-m { color: var(--masc) !important; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; }
  .td-f { color: var(--fem)  !important; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; }

  /* ══ NOT-FOUND STATE ══ */
  .not-found-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);
    text-align: center;
  }

  /* ══ RESPONSIVE ══ */

  /* Tablet — undo layout.css button squish, restore suffix grid */
  @media (max-width: 768px) {
    .suffix-cards { grid-template-columns: 1fr; }
    .suffix-examples { font-size: .88rem; }
    .tool-actions .btn-action { width: auto; height: auto; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
    .tool-actions .btn-label { display: inline; }
  }

  /* Mobile — gender card single column, quiz btns full width */
  @media (max-width: 640px) {
    .gender-card-top { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
    .article-def { font-size: 2.2rem; }
    .quiz-btns { max-width: 100%; }
    .quick-chips { justify-content: flex-start; }
    .ref-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Icon-only actions at true phone width */
    .tool-actions { flex-direction: row; flex-wrap: nowrap; }
    .tool-actions .btn-action { flex: 1; justify-content: center; padding: var(--space-2); }
    .tool-actions .btn-label { display: none; }
  }