/* Adjugé! — front. Extrait de app.css (Tab bar, feuilles, modals (partage/auth), carte compte, toast).
   Les app.*.css sont chargés DANS L'ORDRE (la cascade en dépend) ;
   ne pas réordonner les <link>. */
/* ---------- Tab bar (barre flottante façon Betclic, ancrée à GAUCHE) ----------
   #tabbar est un CONTENEUR transparent (centré sur la colonne max-480, mais
   sans fond) ; la PILULE (.tabbar-pill) compacte, ICÔNES SEULES, flotte sur le
   côté GAUCHE — comme l'appli Betclic, avec de l'espace libre à droite. Se CACHE
   au scroll vers le BAS et RÉAPPARAÎT au scroll vers le HAUT (.tabbar-hidden,
   piloté par initTabbarAutoHide dans app.core.js). */
#tabbar {
  position: fixed; left: 50%;
  bottom: calc(10px + var(--sab));
  transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  pointer-events: none;  /* le conteneur laisse passer les taps ; pilule + bulle captent */
  transition: transform 0.36s cubic-bezier(0.22,0.9,0.32,1), opacity 0.26s ease;
}
/* Caché : on POUSSE la barre sous l'écran. Le translateX(-50%) de centrage du
   conteneur DOIT être conservé dans le transform composé. */
#tabbar.tabbar-hidden { transform: translate(-50%, calc(100% + 28px)); opacity: 0; }
#tabbar.tabbar-hidden .tabbar-pill,
#tabbar.tabbar-hidden .tabbar-solo { pointer-events: none; }
/* Translucide (« verre dépoli ») : fond très transparent → on voit le contenu
   défiler derrière, le flou garde les icônes lisibles même au-dessus d'une photo.
   La PILULE (gauche, nav) et la BULLE Profil (droite, autonome) partagent ce verre. */
.tabbar-pill, .tabbar-solo {
  pointer-events: auto;
  background: rgba(255,253,250,0.38);
  backdrop-filter: saturate(160%) blur(13px);
  -webkit-backdrop-filter: saturate(160%) blur(13px);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 10px 28px -10px rgba(34,26,18,0.28), 0 2px 8px rgba(34,26,18,0.10);
}
.tabbar-pill {
  display: flex; align-items: center; gap: 2px; padding: 8px 9px; border-radius: 999px;
}
/* Bulle Profil autonome (rond façon FAB Betclic), un peu plus grande que les icônes. */
.tabbar-solo { width: 60px; height: 60px; }
/* 48px (≥ cible tactile Apple 44px) : depuis l'ajout de « Mes enchères », la
   pilule porte CINQ onglets — 48px les fait tenir avec la bulle Profil même sur
   un petit écran (375 px), sans déborder. */
.tab {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; color: var(--ink-soft); border-radius: 999px;
  transition: color 0.2s ease, background 0.25s ease, transform 0.12s ease;
}
/* Onglet actif = pastille orange PLEINE + icône blanche, EXACTEMENT comme les
   chips de catégorie de l'accueil (.feed-cat.on). L'ancien fond orange pâle
   translucide (rgba .12) rendait grisâtre par-dessus le verre dépoli et laissait
   un liseré flou « halo » : un fond opaque l'élimine et donne un orange franc. */
.tab.on { color: #FFFFFF; background: var(--orange); }
.tab:active { transform: scale(0.92); }
.tab-label { display: none; }  /* icônes seules (a11y via aria-label) */
/* Icônes BIEN présentes dans les pastilles (scale = compatible avec le
   rotate(45deg) de .ic-home, contrairement à un changement de width). */
.tabbar-pill .ic-home { transform: rotate(45deg) scale(1.55); }
.tabbar-pill .ic-plus,
.tabbar-pill .ic-msg,
.tabbar-pill .ic-search { transform: scale(1.55); }
.tabbar-solo .ic-user { transform: scale(1.7); }
/* Icône maillet d'enchère (gavel, SVG au trait) de l'onglet « Mes enchères » :
   hérite la couleur de l'onglet via currentColor (orange actif / gris inactif),
   dimensionnée directement (pas de scale, contrairement aux icônes en bordures). */
.ic-bids, .ic-mine { display: flex; align-items: center; justify-content: center; }
.ic-bids svg, .ic-mine svg { width: 24px; height: 24px; display: block; }
/* Onglet CONDITIONNEL « Mes annonces en cours » : quand il est révélé, la pilule
   porte SIX onglets. On compacte un peu les pastilles (et le gap/padding) pour
   que la pilule + la bulle Profil tiennent sans déborder sur un petit écran
   (≤375px). MOBILE uniquement : le rail desktop (≥900px, app.desktop.css) garde
   ses onglets pleine largeur — d'où le verrou en max-width. */
@media (max-width: 899px) {
  #tabbar.tabbar-6 .tabbar-pill { gap: 1px; padding: 8px 7px; }
  #tabbar.tabbar-6 .tabbar-pill .tab { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { #tabbar { transition: none; } }
.ic-home {
  width: 12px; height: 12px; border: 2.5px solid currentColor;
  border-radius: 3px; transform: rotate(45deg); margin-top: 2px; margin-bottom: 2px;
}
.tab .ic-search.tab-ic i { border-color: currentColor; border-width: 2.5px; }
.tab .ic-search.tab-ic b { background: currentColor; height: 2.5px; }
.ic-plus { position: relative; width: 16px; height: 16px; display: block; }
.ic-plus i {
  position: absolute; left: 6.75px; top: 0; width: 2.5px; height: 16px;
  background: currentColor; border-radius: 2px;
}
.ic-plus b {
  position: absolute; top: 6.75px; left: 0; width: 16px; height: 2.5px;
  background: currentColor; border-radius: 2px;
}
.ic-user { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ic-user i {
  width: 7px; height: 7px; border: 2.5px solid currentColor; border-radius: 999px;
  display: block;
}
.ic-user b {
  width: 14px; height: 6px; border: 2.5px solid currentColor; border-bottom: none;
  border-radius: 8px 8px 0 0; display: block;
}

/* ---------- Feuilles (« Enchérir » + partage + auth) ---------- */
#sheet-backdrop, #share-backdrop, #auth-backdrop, #report-backdrop, #sort-backdrop,
#delivery-backdrop, #protection-backdrop, #pricedetail-backdrop, #pseudo-backdrop,
#renew-backdrop, #buynow-backdrop, #offer-backdrop, #review-backdrop, #rules-consent-backdrop,
#boost-backdrop, #pending-backdrop, #lang-backdrop, #feedprefs-backdrop,
#dispute-backdrop {
  position: fixed; inset: 0; z-index: 35; background: rgba(24,17,9,0.45);
  animation: fadeIn 0.25s ease both;
}
/* La feuille de litige s'ouvre PAR-DESSUS le fil de discussion (écran plein) :
   au-dessus du modal d'évaluation (66) pour rester accessible partout. */
#dispute-backdrop { z-index: 67; }
#feedprefs-backdrop { z-index: 59; }
#review-backdrop { z-index: 65; }
/* La feuille « Détails du prix » s'ouvre depuis une carte/fiche ; la feuille
   « Protection acheteurs » peut s'ouvrir PAR-DESSUS → tout en haut de la pile. */
#pricedetail-backdrop { z-index: 59; }
#protection-backdrop { z-index: 61; }
#sort-backdrop, #renew-backdrop, #boost-backdrop { z-index: 59; }
#lang-backdrop { z-index: 59; }
#sort-sheet, #renew-sheet, #boost-sheet, #lang-sheet, #feedprefs-sheet,
#dispute-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 60;
  background: #FFFFFF; border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(24px + var(--sab));
  animation: sheetUp 0.35s cubic-bezier(0.2,0.9,0.3,1) both;
  max-height: 86dvh; overflow: auto;
}
#dispute-sheet { z-index: 68; }
#dispute-comment { margin-top: 12px; height: 64px; }
/* « Personnaliser le fil » : indice sous le libellé catégories + icône dans
   les pastilles multi-sélection (réutilisent .filter-chip). */
.feedprefs-hint { font-size: 13px; color: #8A7F73; margin: 2px 0 4px; }
.feedprefs-cat-ic { margin-right: 1px; }
#feedprefs-sort { margin-top: 6px; }
/* Sélecteur de langue : coche visible seulement sur l'option active, nom natif
   de la langue à droite de l'entrée du profil (façon réglage iOS). */
.lang-check { margin-left: auto; color: var(--orange); font-weight: 800;
  opacity: 0; }
.lang-opt.lang-on .lang-check { opacity: 1; }
.lang-current { margin-left: auto; color: #8A7F73; font-size: 14px;
  padding-right: 6px; }
.p-menu-item .lang-current + .chev { margin-left: 0; }
/* Voile de transition au changement de langue : affiché pendant la persistance
   (≤ 2 s) + le reload, pour ne plus donner l'impression d'un gel. Au-dessus de
   la feuille (z 60) et de son backdrop (z 59). Reprend le LOGO du splash : voile
   → reload → splash = un seul logo continu (plus de « spinner puis logo »). Le
   conteneur fait un fondu doux à l'apparition ; le logo lui-même reste STABLE
   (cf. bloc .brand-mark-splash ci-dessous). */
#lang-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; background: var(--bg, #FFFFFF);
  animation: fadeIn 0.18s ease both;
}
/* Logo STABLE dans tout le contexte changement de langue (voile + splash
   post-reload) : NI respiration (splashBreathe) NI re-fondu (appSplashIn). La
   respiration n'est pas synchronisée entre les deux DOM (voile détruit au reload,
   splash recréé) → au reload le logo sautait de taille = « scintillement » ; le
   re-fondu y ajoutait un clignotement. Le conteneur du voile fait déjà un fondu
   doux (fadeIn) ; le splash post-reload apparaît OPAQUE → le logo « était déjà
   là », transition continue. Double classe pour battre `.app-splash
   .brand-mark-splash` d'app.extras.css (chargé APRÈS app.nav.css). */
#lang-loading .brand-mark-splash,
.app-splash.lang-switch-splash .brand-mark-splash,
.feed-loading.lang-switch-splash .brand-mark-splash {
  animation: none;
}
.lang-loading-txt { color: #8A7F73; font-size: 15px; font-weight: 600; }
/* Reprise APRÈS le reload : le splash logo (#app-splash / #feed-loading) accueille
   le libellé SOUS le logo → logo + texte s'effacent ENSEMBLE quand le splash part
   (le texte est enfant du splash). #app-splash n'est pas en colonne par défaut :
   on l'y passe. */
.app-splash.lang-switch-splash,
.feed-loading.lang-switch-splash { flex-direction: column; gap: 22px; }
#renew-sheet .sec-label, #boost-sheet .sec-label { margin-top: 16px; }
#renew-sheet .sheet-cta, #boost-sheet .sheet-cta { margin-top: 18px; }
/* Seconde option « Modifier l'annonce d'abord » : bouton secondaire en contour
   orange (ghost) sous le CTA plein « Remettre en vente ». */
#renew-edit {
  margin-top: 10px; background: transparent; color: var(--orange);
  box-shadow: none; border: 1.5px solid var(--orange);
}
/* Lignes de tiers de mise en avant (radios + libellé/sous-titre + prix). */
.boost-opt { align-items: center; }
.boost-opt-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.boost-opt-label { font-size: 15px; font-weight: 700; }
.boost-opt-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.boost-opt-price { font-size: 15px; font-weight: 800; color: var(--orange-dark); }
.sort-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 2px; font-size: 15px; font-weight: 600; text-align: left;
}
.sort-radio {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--faint); background: #FFFFFF; position: relative;
}
.sort-opt.on .sort-radio { border-color: var(--orange); }
.sort-opt.on .sort-radio::after {
  content: ''; position: absolute; inset: 4px; border-radius: 999px; background: var(--orange);
}
.sort-opt.on { font-weight: 800; }
#sheet, #share-modal, #auth-modal, #report-modal, #delivery-sheet, #protection-sheet,
#pricedetail-sheet, #pseudo-modal, #buynow-sheet, #offer-sheet, #review-modal,
#rules-consent-modal, #pending-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 36;
  background: #FFFFFF; border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(24px + var(--sab));
  animation: sheetUp 0.35s cubic-bezier(0.2,0.9,0.3,1) both;
  max-height: 86dvh; overflow: auto;
}
/* Hint « minimum » sous le champ de la feuille d'achat immédiat. */
.buynow-hint { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.buynow-hint strong { color: var(--ink); }
#review-modal { z-index: 66; }

/* ---------- Modal « Évaluer le vendeur » (après réception, façon Vinted) ---------- */
.review-seller {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--card-line);
}
.review-seller .avatar { width: 44px; height: 44px; flex-shrink: 0; }
.review-seller-name { font-size: 15px; font-weight: 800; }
.review-seller-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.star-picker {
  display: flex; justify-content: center; gap: 6px; margin: 20px 0 4px;
}
.star-pick {
  font-size: 38px; line-height: 1; color: #E2D7C7; background: none;
  padding: 4px; transition: transform 0.08s, color 0.12s;
}
.star-pick.on { color: #F5A623; }
.star-pick:active { transform: scale(1.18); }
.star-hint {
  text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted);
  min-height: 18px; margin-bottom: 12px;
}
textarea.review-comment {
  width: 100%; resize: none; line-height: 1.45; margin-top: 4px;
}
#review-submit { margin-top: 16px; }
#pricedetail-sheet { z-index: 60; }
#protection-sheet { z-index: 62; }
.sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: #E5DBCC; margin: 0 auto 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { font-size: 18px; font-weight: 900; }
.sheet-close {
  width: 32px; height: 32px; border-radius: 999px; background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: transform 0.1s;
}
.sheet-close:active { transform: scale(0.92); }
.sheet-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sheet-sub strong { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
#sheet-name-wrap .f-label { margin-top: 14px; }
.sugg { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
/* Montant libre, sous les suggestions */
.free-bid { display: flex; margin-top: 9px; }
.free-bid-field { flex: 1; margin-top: 0; min-height: 52px; border-radius: 16px; }
/* Pas de spinners natifs sur le montant : on tape un nombre, point. */
.price-input input::-webkit-outer-spin-button,
.price-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-input input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.sheet-cta { margin-top: 14px; }
.sugg-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-radius: 16px; background: #FFFFFF; color: var(--ink);
  border: 1.5px solid #E4D9CB; transition: transform 0.1s;
}
.sugg-btn:active { transform: scale(0.98); }
/* Option sélectionnée (la confirmation vit dans le CTA, pas ici) */
.sugg-btn.on { background: var(--orange); color: #FFFFFF; border-color: var(--orange); }
.sugg-amount { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sugg-sub { font-size: 12.5px; font-weight: 700; opacity: 0.75; }
.auto-box {
  margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--card-line);
}
.auto-title { font-size: 13.5px; font-weight: 800; }
.auto-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.auto-opts { display: flex; gap: 8px; margin-top: 11px; }
.auto-opt {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 12px;
  background: #FFFFFF; border: 1.5px solid #E4D9CB; font-size: 14px;
  font-weight: 800; font-variant-numeric: tabular-nums; transition: transform 0.1s;
}
.auto-opt:active { transform: scale(0.96); }
/* Pastille sélectionnée (la confirmation vit dans « Activer », pas ici) */
.auto-opt.on { background: var(--orange); color: #FFFFFF; border-color: var(--orange); }
/* Montant libre de l'auto-enchère : champ PLEINE LARGEUR puis bouton « Activer »
   en dessous (mire exacte du couple champ libre/CTA de l'enchère manuelle
   au-dessus) — empilés, sinon le champ est trop étroit et le placeholder se
   fait tronquer. */
.auto-custom { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.auto-custom .free-bid-field { min-height: 52px; border-radius: 14px; }
.auto-custom-cta {
  width: 100%; padding: 13px 0; border-radius: 14px; background: var(--ink);
  color: #FFFFFF; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; transition: transform 0.1s;
}
.auto-custom-cta:active { transform: scale(0.96); }
.auto-custom-cta:disabled { opacity: 0.45; }
.auto-active { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.auto-state { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-ink); }
.greendot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); }

/* ---------- Modal de partage ---------- */
.share-pitch {
  margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.share-card {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--card-line);
}
.share-thumb { width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; }
.share-info { flex: 1; min-width: 0; }
.share-item-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.share-item-meta {
  font-size: 11.5px; color: var(--muted2); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.share-url-row {
  margin-top: 12px; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 13px; background: var(--chip-bg);
  border: none; text-align: left; cursor: pointer; transition: transform 0.1s;
}
.share-url-row:active { transform: scale(0.99); }
.share-url {
  flex: 1; min-width: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--chip-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-url-copy {
  flex: none; font-size: 13px; font-weight: 800; color: var(--ink);
}
#share-native { margin-top: 14px; height: 52px; font-size: 15.5px; }

/* ---------- Modal d'authentification ---------- */
#auth-modal { z-index: 38; }
#auth-backdrop { z-index: 37; }
/* Le choix du pseudo (second temps) doit passer AU-DESSUS de tout, y compris
   le modal de partage « Annonce publiée » du flux vendre-via-magic-link. */
#pseudo-modal { z-index: 70; }
#pseudo-backdrop { z-index: 69; }
/* Acceptation des règles (consentement d'un compte connecté) : au-dessus des
   écrans, mais sous le pseudo (l'identité passe d'abord ; les deux ne sont
   jamais empilés — maybePromptRules skippe si la modal pseudo est ouverte). */
#rules-consent-modal { z-index: 68; }
#rules-consent-backdrop { z-index: 67; }
/* Logo de marque en tête de la feuille de connexion. */
.brand-mark-auth { display: block; width: 84px; height: 84px; object-fit: contain; margin: 6px auto 2px; }
.auth-sub { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.auth-pending {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #FDEEE3;
  border: 1px solid #F5CDAA; font-size: 13.5px; font-weight: 700; color: var(--orange-dark);
}
.auth-pending strong { font-weight: 900; font-variant-numeric: tabular-nums; }
#auth-form .f-label, #pseudo-form .f-label { margin-top: 16px; }
/* Consentement aux règles : ligne case + texte, alignée en haut (le texte
   peut passer sur 2 lignes). La case garde une cible tactile confortable. */
.auth-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; cursor: pointer;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.auth-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  accent-color: var(--orange); cursor: pointer;
}
.auth-consent span { padding-top: 1px; }
#auth-submit, #pseudo-submit { margin-top: 16px; height: 52px; font-size: 15.5px; }
/* Bouton « J'accepte les règles » : plus d'air sous le paragraphe explicatif. */
#rules-consent-accept { margin-top: 22px; height: 52px; font-size: 15.5px; }
.auth-note { margin-top: 12px; font-size: 11.5px; color: var(--muted2); text-align: center; line-height: 1.5; }
#auth-step-sent { text-align: center; padding-top: 8px; }
.auth-sent-icon {
  width: 64px; height: 64px; margin: 6px auto 0; border-radius: 999px;
  background: var(--chip-bg); display: flex; align-items: center;
  justify-content: center; font-size: 30px;
}
.auth-sent-title { margin-top: 14px; font-size: 18px; font-weight: 900; }
#auth-demo-link {
  margin-top: 16px; height: 52px; font-size: 15px; text-decoration: none;
}
#auth-retry { margin-top: 14px; }

/* ---------- Carte compte (profil) ---------- */
.account-card {
  margin-top: 16px; background: #FFFFFF; border: 1px solid var(--card-line);
  border-radius: 16px; overflow: hidden;
}
.account-card .menu-item { border-bottom: none; }
.account-info { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--green-ink);
}
.account-email { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
#account-logout { margin: 0; flex-shrink: 0; }

/* ---------- Signature logo en bas du profil ---------- */
.p-footer-logo { display: flex; justify-content: center; margin: 28px 0 12px; }
.p-footer-logo img { width: 160px; height: auto; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; top: calc(16px + var(--sat)); left: 50%;
  z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--ink);
  color: var(--bg); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  animation: toastIn 0.35s cubic-bezier(0.2,0.9,0.3,1) both;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); max-width: 90vw;
  overflow: hidden; text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}