:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}

/* Polices auto-hébergées : l'app doit rendre son arabe hors ligne, sans requête vers un tiers.
   Sous-ensembles woff2 de Google Fonts, licence SIL OFL 1.1, voir fonts/OFL.txt. */
/* Amiri réduit à l'arabe que cette application peut écrire : toutes les lettres, les voyelles,
   les chiffres arabes, les marques coraniques et le ﷺ — 108 Ko -> 48 Ko. Les formes contextuelles
   et le placement des voyelles sont conservés, c'est tout l'intérêt de cette police ici. Un
   caractère hors de cette plage retombe sur la police arabe du système plutôt que sur rien. */
@font-face{font-family:"Amiri";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/amiri-arabic-subset.woff2) format("woff2");unicode-range:U+0020, U+060C, U+061B, U+061F, U+0621-0671, U+06D6-06ED, U+FDFA-FDFB}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Bricolage ne sert qu'aux chiffres des compteurs : le fichier est réduit à ces chiffres et à la
   ponctuation qui les accompagne, 75 Ko -> 4,6 Ko. L'unicode-range colle au contenu réel du fichier,
   si bien qu'une lettre posée dans un compteur retombe sur Figtree au lieu d'attendre cette police. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(fonts/bricolage-digits.woff2) format("woff2");unicode-range:U+0020, U+0025, U+002C-002F, U+0030-0039, U+00B7, U+2013, U+2212}

/* Layout: une seule colonne façon objet en main — anneau de perles au centre, grande zone de tap, réglages en tiroir */
/* Deux axes séparés : la palette (jardin / lapis / sable) ne déclare que ses valeurs claires --l-*
   et sombres --d-*, le mode (auto / clair / sombre) décide ensuite laquelle alimente les jetons.
   Sans cette séparation il faudrait six blocs complets au lieu de trois plus un aiguillage. */
:root{
  /* Jardin — sauge et émeraude, l'apparence d'origine, palette par défaut */
  --l-bg:#eef0ea; --l-surface:#f8f9f5; --l-line:#d5d9cd; --l-fg:#1d2a24; --l-muted:#5f6d65;
  --l-bead:#c9d0c2; --l-bead-on:#1f6b52; --l-accent:#1f6b52; --l-accent-fg:#f4f7f2; --l-gold:#8c6618;
  --d-bg:#0f1714; --d-surface:#16211c; --d-line:#26342d; --d-fg:#e7eee9; --d-muted:#93a39a;
  --d-bead:#2a3a33; --d-bead-on:#4fbf93; --d-accent:#4fbf93; --d-accent-fg:#0c1411; --d-gold:#d9ad55;

  --f-ar:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --f-num:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Lapis — outremer et or, les deux couleurs du manuscrit enluminé */
:root[data-palette="lapis"]{
  --l-bg:#eef1f7; --l-surface:#f9fafd; --l-line:#ccd5e6; --l-fg:#1a2340; --l-muted:#5d6886;
  --l-bead:#c3cde4; --l-bead-on:#2a4a9c; --l-accent:#2a4a9c; --l-accent-fg:#f3f6fc; --l-gold:#8b681b;
  --d-bg:#0c1020; --d-surface:#141a30; --d-line:#232c4a; --d-fg:#e6eaf6; --d-muted:#949db9;
  --d-bead:#27304f; --d-bead-on:#7b9bf0; --d-accent:#7b9bf0; --d-accent-fg:#0a0e1c; --d-gold:#e0b961;
}
/* Sable — terre cuite sur sable chaud */
:root[data-palette="sable"]{
  --l-bg:#f4efe6; --l-surface:#fcf9f4; --l-line:#e0d5c4; --l-fg:#2e241b; --l-muted:#756553;
  --l-bead:#ddd0bc; --l-bead-on:#a04e26; --l-accent:#a04e26; --l-accent-fg:#fdf8f2; --l-gold:#7d6a24;
  --d-bg:#16110d; --d-surface:#1f1813; --d-line:#332820; --d-fg:#f0e7db; --d-muted:#a89684;
  --d-bead:#35291f; --d-bead-on:#e0834e; --d-accent:#e0834e; --d-accent-fg:#180f08; --d-gold:#d8ae5c;
}

/* Aiguillage clair / sombre, écrit une seule fois pour toutes les palettes */
:root{
  --bg:var(--l-bg); --surface:var(--l-surface); --line:var(--l-line); --fg:var(--l-fg); --muted:var(--l-muted);
  --bead:var(--l-bead); --bead-on:var(--l-bead-on); --accent:var(--l-accent);
  --accent-fg:var(--l-accent-fg); --gold:var(--l-gold); color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:var(--d-bg); --surface:var(--d-surface); --line:var(--d-line); --fg:var(--d-fg); --muted:var(--d-muted);
  --bead:var(--d-bead); --bead-on:var(--d-bead-on); --accent:var(--d-accent);
  --accent-fg:var(--d-accent-fg); --gold:var(--d-gold); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:var(--d-bg); --surface:var(--d-surface); --line:var(--d-line); --fg:var(--d-fg); --muted:var(--d-muted);
  --bead:var(--d-bead); --bead-on:var(--d-bead-on); --accent:var(--d-accent);
  --accent-fg:var(--d-accent-fg); --gold:var(--d-gold); color-scheme:dark}

html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent}
/* L'application tient dans la hauteur visible : c'est l'anneau qui cède, pas le pied de page
   qui passe sous la ligne de flottaison. « svh » est la hauteur stable, sans la barre d'adresse
   qui va et vient — avec « vh » en repli pour les navigateurs qui ne la connaissent pas. Les
   écarts se resserrent sur un écran court plutôt que de pousser le contenu dehors. */
.app{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px);
  padding-block:14px 20px;
  min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hgroup{display:flex;align-items:center;gap:8px;min-width:0}
/* display:block pour que l'ellipsis s'applique : sur un inline-flex le texte devient un flex item */
#menuBtn{display:block;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;padding:4px 0;min-height:44px;cursor:pointer;text-align:left}
.today:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.today[aria-expanded="true"]{color:var(--accent)}
/* 600 et non le gras par défaut : « 42 sur 100 » mêle Bricolage (chiffres) et Figtree (le mot),
   et Figtree ne monte qu'à 600 — à 700 le navigateur lui fabriquerait un faux gras. */
.today b{font-family:var(--f-num);color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
.today.met b{color:var(--gold)}
.btn{font:inherit;font-weight:600;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--fg);
  border-radius:999px;padding:9px 14px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:focus-visible,.tap:focus-visible,.opt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.icon{flex:none;padding:9px;min-width:44px;line-height:0}
.btn.icon svg{width:18px;height:18px}
.btn.icon[aria-expanded="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

.resume{font-size:13px;color:var(--accent);text-align:center;min-height:18px}
.storage-warning{font-size:13px;color:var(--gold);border:1px solid var(--gold);border-radius:12px;padding:10px 12px;text-align:center}

.dhikr{text-align:center;display:flex;flex-direction:column;gap:2px}
.ar{font-family:var(--f-ar);font-size:clamp(25px,4vh,34px);line-height:1.5;direction:rtl}
.tr{font-weight:600;font-size:15px}
.fr{font-size:13px;color:var(--muted)}
.steps{display:flex;justify-content:center;gap:6px;margin-top:6px}
.steps span{width:28px;height:4px;border-radius:2px;background:var(--bead)}
.steps span.on{background:var(--accent)} .steps span.done{background:var(--gold)}

/* L'anneau prend la hauteur qui reste, calculée et non héritée : .app ayant une hauteur
   minimale et non fixe, il grandit avec son contenu et aucun élément de flex n'est contraint
   de rétrécir. Les 420 px retranchés sont le reste de l'écran — en-tête, dhikr, consigne,
   boutons, horaires, écarts et marges — mesuré, pas estimé. Entre 150 et 340 px : en deçà
   les perles ne se visent plus, au-delà l'anneau n'a rien à gagner.
   Le SVG reste carré et centré tout seul, c'est le défaut de preserveAspectRatio. */
.tap{position:relative;flex:0 0 auto;width:100%;max-width:340px;
  height:clamp(150px,calc(100vh - 420px),340px);
  height:clamp(150px,calc(100svh - 420px),340px);
  margin:0 auto;border:0;background:none;padding:0;
  cursor:pointer;color:var(--fg);touch-action:manipulation;user-select:none}
.tap svg{width:100%;height:100%;display:block}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.count{font-family:var(--f-num);font-weight:700;font-size:clamp(46px,9.5vh,76px);line-height:1;font-variant-numeric:tabular-nums}
.target{font-size:14px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
/* Sans objectif pour ce dhikr la ligne est vide : la retirer évite sa marge et le décalage. */
.dayline:empty{display:none}
.dayline{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.dayline.met{color:var(--gold);font-weight:600}
.rounds{font-size:12px;color:var(--gold);margin-top:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hint{font-size:12px;color:var(--muted);text-align:center}
@media (max-height:800px){.hint{display:none}}

/* Paysage sur un téléphone : il n'y a plus de hauteur à partager, mais de la largeur à revendre.
   L'anneau passe à droite, le reste se range à gauche — sinon il manquerait cent cinquante
   pixels et le pied de page repasserait sous la ligne de flottaison. Les tiroirs et les
   bandeaux gardent toute la largeur : ce sont des listes, elles se lisent en pleine page. */
@media (orientation:landscape) and (max-height:560px){
  .app{max-width:780px;display:grid;align-content:start;
    grid-template-columns:minmax(0,1fr) minmax(0,320px);column-gap:20px;row-gap:6px;
    padding-block:8px 4px}
  .app>*{grid-column:1/-1}
  .dhikr,.controls,.confirm,.prayers{grid-column:1}
  .tap{grid-column:2;grid-row:span 3;align-self:center;max-width:none;
    height:min(320px,calc(100vh - 86px));height:min(320px,calc(100svh - 86px))}
  .ar{font-size:clamp(22px,5.5vh,30px)}
}
.pulse{animation:pulse .18s ease-out}
@keyframes pulse{from{transform:scale(.985)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* Horaires de prière : une bande en pied de page, sous les boutons. Elle n'apparaît qu'avec un
   lieu renseigné — sans cela l'application reste exactement celle d'avant. Les heures sont en
   Figtree et non dans la police des compteurs, dont le sous-ensemble n'a pas les deux-points. */
.prayers{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
/* Le lieu intitule la bande : une heure de prière ne veut rien dire sans lui, et il change
   dès qu'on voyage ou qu'on règle ailleurs. */
.pwhere{font-size:11px;color:var(--muted);letter-spacing:.02em}
.ptimes{display:flex;gap:3px;margin:0;padding:0;list-style:none}
.ptimes li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 1px;border-radius:10px;border:1px solid transparent}
.ptimes li.past{opacity:.45}
.ptimes li.next{border-color:var(--accent);background:var(--surface);opacity:1}
.ptimes small{font-size:10px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptimes b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ptimes li.next small,.ptimes li.next b{color:var(--accent)}
.pnext{min-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);text-align:center}
.pnext .btn{font-size:12px;padding:6px 14px;min-height:38px;color:var(--accent);border-color:var(--accent)}

.sheet{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.sheet h2{font-size:12px;margin:0;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
/* En-tête de panneau : le titre et la croix. Collant, parce qu'un panneau long se parcourt en
   défilant et que le bouton qui l'a ouvert est alors loin au-dessus — c'est là qu'on cherche à
   fermer. Les marges négatives rattrapent le padding du panneau pour que le fond couvre bien
   ce qui passe dessous. */
.shead,.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  position:sticky;top:0;z-index:3;background:var(--surface);
  padding-block:10px;margin-block:-10px}
.shead h2,.hrow h2{flex:1;min-width:0}
.iconbtn.close{flex:none}
.note{margin:0;font-size:12px;color:var(--muted)}
.seg{display:flex;gap:6px}
.seg button{font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;min-height:44px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{font:inherit;text-align:left;display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:44px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg);border-radius:12px;padding:10px 12px;cursor:pointer}
.opt:disabled,.opt.static{cursor:default}
.opt:disabled{opacity:.5}
.opt[aria-pressed="true"]:not(:disabled),.opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.opt .l{display:flex;flex-direction:column;min-width:0}
.opt .l b{font-weight:600}
.opt .l small{color:var(--muted)}
.opt .ar-s{font-family:var(--f-ar);font-size:20px;direction:rtl;white-space:nowrap;flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.opt .go{flex:none;display:flex;color:var(--muted)}
.opt .go svg{width:18px;height:18px}
.opt .sw{flex:none;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.opt[aria-pressed="true"]:not(:disabled) .sw,.opt.on .sw{color:var(--accent-fg);background:var(--accent);border-color:var(--accent)}
/* Intertitre d'un groupe dans la liste des dhikr : même voix que les titres de panneau. */
.gtitle{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding-top:4px}
.gtitle:first-child{padding-top:0}
.opt.static.off{opacity:.5}
.iconbtn.on{color:var(--accent);border-color:var(--accent)}
.row{display:flex;align-items:stretch;gap:6px}
.row .opt{flex:1;min-width:0}
.iconbtn{flex:none;width:44px;min-height:44px;border:1px solid var(--line);background:var(--bg);color:var(--muted);
  border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.iconbtn:hover{color:var(--fg)}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iconbtn svg{width:16px;height:16px}
.delrow{border:1px solid var(--accent);border-radius:12px;padding:10px 12px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;font-size:14px}
.delrow span{flex:1;min-width:140px}
.delrow .btn{padding:6px 12px}
.palettes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pal{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;min-height:44px;
  padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.pal[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pal .sw3{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1px solid rgba(128,128,128,.25)}
.pal .sw3 i{flex:1}
.pal .nm{font-size:12px;font-weight:600;text-align:center}
.add{display:grid;grid-template-columns:1fr 80px;gap:8px}
.add input:disabled{opacity:.6}
.add input,.add select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:9px 10px;min-width:0;min-height:44px}
.add .btn{grid-column:1/-1;justify-content:center}
/* Objectif : un seul champ, le bouton tient sur la même ligne. Après .add .btn, qu'il annule. */
.goalrow{grid-template-columns:90px auto;justify-content:start}
.remind{grid-template-columns:auto auto;justify-content:start;align-items:center}
.goalrow .btn,.remind .btn{grid-column:auto}
/* Liste qui se filtre à la frappe : douze mille villes ne se déroulent pas, et sur un
   téléphone aucun clavier ne permet d'y sauter. Le champ et sa liste se superposent au reste,
   d'où la position absolue — le panneau ne doit pas se déplier sous elle. */
.combo{position:relative;display:flex}
.combo input{flex:1;min-width:0;font:inherit;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-height:44px}
.combo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.clist{position:absolute;z-index:5;top:calc(100% + 4px);left:0;right:0;max-height:252px;overflow-y:auto;
  margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--accent);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.clist li{padding:9px 10px;border-radius:8px;cursor:pointer;min-height:40px;display:flex;align-items:center}
.clist li.on{background:var(--accent);color:var(--accent-fg)}
.clist li.vide{color:var(--muted);cursor:default}
/* Lieu seul sur sa ligne, méthode et école côte à côte. */
.one{grid-template-columns:1fr}
.coords{grid-template-columns:1fr 1fr}
/* Écart à la mosquée : un petit champ par prière. Le calcul est juste, les tableaux locaux
   s'en écartent tout de même de quelques minutes — autant pouvoir les suivre. */
.poff{display:flex;gap:4px}
.poff label{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.poff small{font-size:10px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poff input{width:100%;min-width:0;font:inherit;font-size:13px;text-align:center;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 2px;min-height:40px}
.poff input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hist{display:flex;align-items:stretch;gap:6px;height:96px}
.hist.noval{gap:4px}
.hist.nolab{gap:2px}
.hcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
/* Piste de hauteur identique dans chaque colonne : les barres partagent la même échelle et le
   trait de l'objectif tombe au même niveau partout, sans dépendre de la hauteur des étiquettes. */
.track{position:relative;flex:1;width:100%;display:flex;align-items:flex-end}
/* Objectif quotidien : un segment par colonne, qui se lit comme un seul trait en pointillé. */
.track.gl::before{content:"";position:absolute;left:0;right:0;bottom:var(--g);border-top:1px dashed var(--gold)}
.hbar{width:100%;min-height:3px;background:var(--bead);border-radius:6px 6px 0 0}
.hcol.now .hbar{background:var(--accent)}
.hcol .d{font-size:11px;color:var(--muted)}
.hcol .v{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Au-delà de sept colonnes la valeur ne tient plus sous la barre, et au-delà de douze l'étiquette
   non plus : elle déborderait sur sa voisine. La légende sous le graphique porte alors les dates. */
.hist.noval .v{display:none}
.hist.nolab .d{display:none}
.streak{font-size:13px;color:var(--gold);font-weight:600}
/* Répartition par dhikr : la barre est un fond, pas une colonne, pour que la ligne reste lisible
   même quand le nom est long — le texte passe par-dessus. */
.brk{display:flex;flex-direction:column;gap:4px}
.brkrow{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;padding:6px 9px;border-radius:9px;background:var(--bg);overflow:hidden}
.brkrow i{position:absolute;left:0;top:0;bottom:0;background:var(--bead);border-radius:9px}
.brkrow b,.brkrow em{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brkrow b{font-weight:600}
.brkrow em{font-style:normal;color:var(--muted)}
.brkrow .n{position:relative;flex:none;font-variant-numeric:tabular-nums;color:var(--muted)}
.confirm{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px}