:root {
  --brown: #8a5a3b;
  --brown-light: #cf9f7c;
  --blue: #2f5d8a;
  --blue-light: #8fb6d9;
  --beige: #ede3d3;
  --bg: #f7f4ee;
  --card-bg: #ffffff;
  --text: #2b2620;
  --text-muted: #7a7266;
  --border: #e1d8c8;
  --accent: #a8632f;
  --danger: #b23b3b;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --input-bg: #ffffff;
}

:root[data-theme="dark"] {
  --brown: #c78a5c;
  --brown-light: #8a6446;
  --blue: #6c9fd6;
  --blue-light: #3a5878;
  --beige: #33302a;
  --bg: #171512;
  --card-bg: #221f1a;
  --text: #ecE6da;
  --text-muted: #a89c89;
  --border: #3a352d;
  --accent: #d38b4c;
  --danger: #e2685f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --input-bg: #2a2620;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brown: #c78a5c;
    --brown-light: #8a6446;
    --blue: #6c9fd6;
    --blue-light: #3a5878;
    --beige: #33302a;
    --bg: #171512;
    --card-bg: #221f1a;
    --text: #ecE6da;
    --text-muted: #a89c89;
    --border: #3a352d;
    --accent: #d38b4c;
    --danger: #e2685f;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --input-bg: #2a2620;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  background: var(--accent);
  color: #fff;
  transition: opacity 0.15s;
}
button:hover { opacity: 0.9; }
button.secondary { background: var(--border); color: var(--text); }
button.danger { background: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  width: 100%;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.field { margin-bottom: 1rem; }

/* ---------- Layout ---------- */

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* En-tête : titre à gauche, identité + boutons à droite. TOUT y est autorisé à passer
   à la ligne et à se réduire. Sans ça, sur un écran étroit (téléphone en 360 px de
   large, ou plus large mais avec une "taille d'affichage" Android augmentée, ou
   simplement une adresse e-mail un peu longue), cette ligne dépassait la largeur de
   l'écran et créait un ASCENSEUR HORIZONTAL sur toute l'application — au point que le
   balayage du doigt faisait glisser la page latéralement au lieu de changer de
   chapitre (voir la navigation tactile dans renderLire). */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.9rem 1.2rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 1.1rem; margin: 0; min-width: 0; }
.topbar .user-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}
/* L'adresse e-mail est la seule partie de longueur imprévisible : elle se tronque
   proprement plutôt que de pousser les boutons hors de l'écran. */
.topbar .user-info .user-email {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 0.5rem;
}
.tabs button {
  background: none;
  color: var(--text-muted);
  border-radius: 0;
  padding: 0.8rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

main { flex: 1; padding: 1.2rem; max-width: 960px; margin: 0 auto; width: 100%; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

/* ---------- Auth screens ---------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  width: 100%;
  max-width: 380px;
}
.auth-card h1 { font-size: 1.3rem; margin: 0 0 1.2rem; text-align: center; }
.auth-card .switch { text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.msg { font-size: 0.88rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); margin-bottom: 1rem; }
.msg.error { background: #fbeaea; color: var(--danger); }
.msg.success { background: #e9f3ea; color: #2f6b3a; }

/* ---------- Dashboard ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.stat-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow);
}
.stat-tile .value { font-size: 1.6rem; font-weight: 700; }
.stat-tile .label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }

.progress-row { margin-bottom: 0.9rem; }
.progress-row .top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--text-muted); }
.progress-bar { height: 10px; border-radius: 6px; background: var(--beige); overflow: hidden; }
.progress-bar > div { height: 100%; border-radius: 6px; }
.progress-bar.global > div { background: var(--accent); }
.progress-bar.at > div { background: var(--brown); }
.progress-bar.nt > div { background: var(--blue); }

.chart-wrap { position: relative; height: 260px; }

/* ---------- Saisie ---------- */

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

/* ---------- Plan (pastilles) ---------- */

.book-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.book-nav select { width: auto; min-width: 180px; }
.book-nav button.active { background: var(--accent); color: #fff; }

.book-block { margin-bottom: 1rem; scroll-margin-top: 1rem; }
.book-block h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.book-block h3 .count { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }
.book-block h3 button { padding: 0.15rem 0.55rem; font-size: 0.75rem; vertical-align: middle; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: var(--beige);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}
.chip.at-read, .chip.nt-read { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.chip.at-read { background: var(--brown); color: #fff; }
.chip.nt-read { background: var(--blue); color: #fff; }
.chip:hover { border-color: var(--accent); }

/* Chapitre entamé mais pas encore entièrement lu (ex. plan chronologique, versets
   cochés sur plusieurs jours non consécutifs) : ni "lu" ni "non lu", le compte exact
   est dans l'infobulle (title). Purement visuel, voir getChapterVerseProgress. */
.chip.partial-read {
  background: repeating-linear-gradient(45deg, var(--beige), var(--beige) 4px, color-mix(in srgb, var(--accent) 35%, var(--beige)) 4px, color-mix(in srgb, var(--accent) 35%, var(--beige)) 8px);
  border-color: var(--accent);
}

/* Pastille plus large pour les libellés "Livre chapitre" (vue séquentielle d'un plan
   non aligné sur les livres, et suggestion "aujourd'hui" de la carte plan actif). */
.chip.wide { width: auto; min-width: 56px; padding: 0 0.5rem; font-size: 0.72rem; }

.legend { display: flex; gap: 1rem; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* ---------- Lire ---------- */

.reading-text sup {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.2rem;
}
.partial-range-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}
.reading-text.compact { font-size: 0.88rem; line-height: 1.45; }
.reading-text.compact p { margin: 0 0 0.2rem; }
.reading-text.confortable { font-size: 1.05rem; line-height: 1.7; }
.reading-text.confortable p { margin: 0 0 0.9rem; }
.reading-text.aere { font-size: 1.2rem; line-height: 2; }
.reading-text.aere p { margin: 0 0 1.4rem; }
.reading-text sup.footnote-ref {
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  margin: 0 0.15rem;
}
/* En-tête collant : reste visible en haut de l'écran pendant le défilement, pour
   toujours savoir quel chapitre on lit sans avoir à remonter. */
.reading-sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.reading-sticky-title { flex: 1; min-width: 0; }
.reading-sticky-title h2 { margin: 0; font-size: 1.05rem; }
/* Titre de péricope (harmonie des évangiles) : donne le contexte de ce qui est lu,
   affiché au-dessus du nom du chapitre plutôt qu'à la place — voir
   reading_plan_items_chronologique_evangiles côté PHP. */
.reading-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

/* Panneau d'options replié par défaut (recherche livre/chapitre, version, affichage,
   marque-page, non-lu) : tout ce qui n'est pas nécessaire à chaque instant de la
   lecture, pour limiter le défilement sur petit écran. */
.reading-options-panel { margin-bottom: 1rem; }
.reading-options-panel summary {
  cursor: pointer;
  padding: 0.5rem 0.2rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.reading-options-panel[open] summary { margin-bottom: 0.5rem; }
.reading-options-panel .options-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* Navigation par flèches fixées sur les bords de l'écran (précédent à gauche, suivant
   à droite) plutôt que des boutons en bas de page — accessibles sans défiler, et
   doublées par un balayage tactile sur le texte (voir renderLire). */
.edge-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  border: 1px solid var(--border);
  color: var(--accent);
  box-shadow: var(--shadow);
  opacity: 0.85;
}
.edge-nav:hover:not(:disabled) { opacity: 1; }
.edge-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.edge-nav.prev { left: 0.5rem; }
.edge-nav.next { right: 0.5rem; }

/* Marge pour que le texte ne passe pas sous les flèches fixes. */
.reading-text { padding-left: 2.6rem; padding-right: 2.6rem; }

@media (max-width: 600px) {
  .edge-nav { width: 40px; height: 40px; font-size: 1.25rem; }
  .reading-text { padding-left: 2.2rem; padding-right: 2.2rem; }
}

/* ---------- Harmonie des évangiles : récits parallèles côte à côte ----------
   Un même épisode raconté par plusieurs évangélistes se lit en vis-à-vis, un bloc de
   versets par témoignage. auto-fit + minmax fait tout le travail : au-delà de ~280 px
   par colonne les blocs se rangent côte à côte, en dessous ils s'empilent — donc
   colonnes sur ordinateur, l'un sous l'autre sur téléphone, sans requête média.
   Le seuil n'est pas arbitraire : sous ~280 px on tombe à moins de 30 caractères par
   ligne, où la lecture suivie décroche (mesuré sur le texte réel). */
.reading-text.harmony {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 1.6rem;
  align-items: start;
}
/* min-width:0 : sans ça une colonne de grille refuse de descendre sous la largeur de
   son plus long mot et fait déborder la carte. */
.harmony-col { min-width: 0; }
.harmony-col-ref {
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--border);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
}
/* Empilés, les récits ont besoin d'une respiration entre eux ; côte à côte, non. */
.reading-text.harmony .harmony-col + .harmony-col { margin-top: 1.4rem; }
@media (min-width: 640px) {
  .reading-text.harmony .harmony-col + .harmony-col { margin-top: 0; }
}
/* Grand écran : la vue harmonie s'affranchit de la colonne de lecture de 960 px. À
   quatre évangiles, des colonnes de ~230 px seraient illisibles ; ici elles respirent.
   Pas de 100vw (qui inclut la barre de défilement et rouvrirait un débordement
   horizontal) : on élargit simplement la zone de contenu. */
@media (min-width: 1024px) {
  body.harmony-view main { max-width: 1500px; }
}

/* Sélection et surlignage de versets (clic droit / appui long, voir renderLire). */
.reading-text p[data-verse] {
  border-radius: 4px;
  padding: 0.05em 0.35em;
  margin-left: -0.35em;
  margin-right: -0.35em;
  transition: background-color 0.15s, outline-color 0.15s;
  /* Sans ça, l'appui long tactile déclenche la sélection de mot / le menu contextuel
     natif du navigateur (Copier, Partager, Rechercher…) au lieu de notre propre menu
     de sélection de verset (voir renderLire) — sur iOS il faut en plus désactiver le
     "callout" natif séparément de user-select. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.reading-text p.verse-selected { outline: 2px dashed var(--accent); outline-offset: 2px; }
.reading-text p.hl-jaune { background: #f5d90a; color: #1a1a1a; }
.reading-text p.hl-vert { background: #8bd17c; color: #1a1a1a; }
.reading-text p.hl-bleu { background: #8ec6f0; color: #1a1a1a; }
.reading-text p.hl-rose { background: #f2a0c4; color: #1a1a1a; }
.reading-text p.hl-orange { background: #f5b26b; color: #1a1a1a; }

/* Barre de sélection de versets. Deux mises en page pour un seul HTML (voir
   renderVerseToolbar, qui produit toujours les mêmes trois groupes) : une pastille
   flottante compacte sur ordinateur, et sur téléphone une bande pleine largeur ancrée
   en bas de l'écran — là où le pouce arrive naturellement, et où rien n'oblige à
   comprimer les libellés. */
.verse-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin: 0 auto;
  width: fit-content;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: calc(100vw - 2rem);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.5rem 0.4rem 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.verse-toolbar-colors,
.verse-toolbar-actions { display: flex; align-items: center; gap: 0.35rem; }
/* Séparateur discret entre les couleurs et les actions, sans ajouter de balise. */
.verse-toolbar-actions { padding-left: 0.45rem; border-left: 1px solid var(--border); }
/* Bouton d'action : même apparence qu'un <button class="secondary">, mais applicable
   aussi au lien <a> de la concordance (qui doit rester un vrai lien pour s'ouvrir dans
   un nouvel onglet sans être bloqué par le navigateur du téléphone). */
.verse-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius);
  background: var(--border);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.verse-toolbar-btn:hover { opacity: 0.85; }
.verse-toolbar-close {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.verse-toolbar-close:hover { background: var(--border); color: var(--text); }
.verse-toolbar-count {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 0;
}
.verse-toolbar-count strong { color: var(--text); font-size: 0.85rem; }
.verse-toolbar-sub::before { content: "· "; }
.verse-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 1px var(--border);
  padding: 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verse-color-clear { background: var(--beige); }

/* Téléphone : bande pleine largeur en bas de l'écran. Trois lignes (repère, couleurs,
   actions) plutôt qu'une pastille qui partirait en accordéon sur 360 px de large. */
@media (max-width: 600px) {
  .verse-toolbar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "count  close"
      "colors colors"
      "actions actions";
    gap: 0.55rem;
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
    /* env(safe-area-inset-bottom) : évite la barre de gestes des téléphones récents. */
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.28);
  }
  .verse-toolbar-count { grid-area: count; font-size: 0.85rem; }
  .verse-toolbar-count strong { font-size: 0.9rem; }
  .verse-toolbar-close { grid-area: close; font-size: 1rem; padding: 0.3rem 0.55rem; }
  .verse-toolbar-colors { grid-area: colors; justify-content: space-between; gap: 0.3rem; }
  .verse-toolbar-actions { grid-area: actions; padding-left: 0; border-left: none; gap: 0.5rem; }
  /* Cibles tactiles confortables et actions qui se partagent la largeur. */
  .verse-toolbar-actions .verse-toolbar-btn { flex: 1; justify-content: center; padding: 0.6rem 0.5rem; font-size: 0.88rem; }
  .verse-color-swatch { width: 34px; height: 34px; font-size: 1rem; }
  /* Dégage la fin du texte, qui passerait sinon sous la bande. */
  body.verse-toolbar-open main { padding-bottom: 11rem; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.modal-box {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.modal-box p { margin: 0 0 1rem; line-height: 1.5; }

/* ---------- Table (historique / bilan / admin) ---------- */

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.chapters-list { max-width: 420px; white-space: normal; color: var(--text-muted); }

/* ---------- Plan : vue Calendrier ---------- */

.calendar-wrap { max-height: 520px; overflow-y: auto; }
tr.calendar-today { background: color-mix(in srgb, var(--accent) 12%, transparent); }
tr.calendar-late td:nth-child(2) { color: var(--danger); font-weight: 600; }
.calendar-chap-read { color: var(--text-muted); text-decoration: line-through; }
.comment-input {
  width: 100%;
  min-width: 320px;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
}

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; }
.badge.admin { background: #e9dff0; color: #5a3a7a; }
.badge.user { background: var(--beige); color: var(--text-muted); }
.badge.inactive { background: #fbeaea; color: var(--danger); }
.badge.status-done { background: #e9f3ea; color: #2f6b3a; }
.badge.status-partial { background: #fbeee0; color: #a0611f; }
.badge.status-none { background: #e3edf7; color: #2f5d8a; }

option.status-done { color: #2f6b3a; }
option.status-partial { color: #a0611f; }
option.status-none { color: #2f5d8a; }

.empty-state { color: var(--text-muted); text-align: center; padding: 2rem 0; font-size: 0.9rem; }

.hint { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1rem; }

/* ---------- Import Bible (admin) ---------- */

.import-diff-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; }

.import-sample-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.8rem;
}
.import-sample { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.import-sample:last-child { border-bottom: none; }
.import-sample .ref { font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.4rem; }
.import-sample .old { color: var(--danger); text-decoration: line-through; opacity: 0.8; }
.import-sample .new { color: var(--text); }

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  main { padding: 0.8rem; }
  .chip { width: 26px; height: 26px; font-size: 0.68rem; }
}