:root{
  --bg:#0b1220;
  --card:#0f172a;
  --border:rgba(255,255,255,.08);
  --txt:#e5e7eb;
  --muted:#94a3b8;
  --btn:#111c33;
  --danger:#7f1d1d;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--txt);
}
.wrap{max-width:980px;margin:0 auto;padding:22px}
a{color:#93c5fd;text-decoration:none}
h1,h2{margin:0 0 10px}
.muted{color:var(--muted)}
.card{
  background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.92));
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  margin:14px 0;
}
.pad{padding:16px}
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;
  background:var(--btn);
  border:1px solid var(--border);
  color:var(--txt);
}
.btn:hover{filter:brightness(1.08)}
.btn.danger{background:rgba(127,29,29,.35);border-color:rgba(127,29,29,.7)}
.alert{
  border:1px solid rgba(220,38,38,.6);
  background:rgba(220,38,38,.15);
  padding:12px;border-radius:12px;margin:12px 0;
}
.alert.ok{
  border-color:rgba(34,197,94,.55);
  background:rgba(34,197,94,.12);
}
label{display:block;margin:12px 0 6px;color:var(--muted);font-size:13px}
input,select,textarea{
  width:100%;
  background:#0b1020;
  border:1px solid var(--border);
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
textarea{resize:vertical}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mini{width:86px}
.ayah-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:rgba(148,163,184,.12);
  border:1px solid var(--border);
}
.arabic{
  font-size:30px;
  line-height:1.9;
  text-align:right;
  direction:rtl;
  padding:8px 0 2px;
}
.translation{
  margin-top:10px;
  font-size:16px;
  line-height:1.6;
  color:#e2e8f0;
}
.sep{border:0;border-top:1px solid var(--border);margin:16px 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.nav{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px}

.wbw{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.wbw-item{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.03);
}
.wbw-ar{
  text-align:right;
  direction:rtl;
  font-size:20px;
  margin-bottom:6px;
}
.wbw-gloss{color:#e2e8f0;font-size:14px}
@media (max-width:820px){
  .wbw{grid-template-columns:repeat(2,1fr)}
  .arabic{font-size:26px}
}
@media (max-width:420px){
  .wbw{grid-template-columns:1fr}
}

.ayah-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:8px;
}
.ayah-link{
  text-align:center;
  padding:8px 0;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
}
.ayah-link:hover{filter:brightness(1.12)}

.wbw-edit{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.wbw-row{
  display:grid;
  grid-template-columns:56px 1.2fr 2fr;
  gap:10px;
  align-items:center;
}
.wbw-row input{width:100%}
.wbw-num{color:var(--muted);text-align:center}

/* Sourate entière */
.surah-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.ayah-block{margin:14px 0}
.ayah-tools{display:flex;gap:8px;align-items:center}
.wbw-details{margin-top:12px}
.wbw-details > summary{
  cursor:pointer;
  user-select:none;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}

.wbw-details > summary::before{
  content:"▸";
  color:#94a3b8;
  transform:translateY(-1px);
  transition:transform .15s ease;
}

.wbw-details[open] > summary::before{
  transform:rotate(90deg) translateY(-1px);
}

.wbw-summary{
  cursor:pointer;
  user-select:none;
  font-weight:500;
  color:#cbd5f1;
}

.wbw-summary:hover{
  color:#ffffff;
}

/* garde la flèche native */
.wbw-summary::marker{
  color:#94a3b8;
}
@media (max-width: 640px){

  .aw-ar{
    font-size: 26px;
  }

  .aw-tr{
    font-size: 11px;
  }

  .wbw-item{
    padding:10px;
  }

}

/* Focus ayah (quand tu arrives avec ?ayah=...) */
.ayah-block.focus{
  outline:2px solid rgba(147,197,253,.35);
  box-shadow:0 0 0 6px rgba(147,197,253,.07);
}

/* =========================
   WBW en RTL (droite -> gauche)
========================= */

/* Le conteneur des cartes se lit RTL */
.wbw,
.wbw-details .wbw{
  direction: rtl;
}

/* Les cartes restent “normales” */
.wbw-item{
  direction: rtl;
  text-align: right;
}

/* Le mot arabe : RTL + à droite */
.wbw-ar{
  direction: rtl;
  text-align: right;
}

/* La traduction (FR) : LTR + à gauche (sinon ça devient chelou) */
.wbw-gloss{
  direction: ltr;
  text-align: left;
}

/* ====== Edit (liste des mots) en RTL ====== */
.wbw-edit{
  direction: rtl;
}

.wbw-row{
  direction: rtl;
  grid-template-columns: 2fr 2fr 1.2fr 56px; /* gloss | translit | arabe | num */
}

.wbw-row input{
  direction: ltr;       /* tu tapes en FR */
  text-align: left;
}

.wbw-row .wbw-ar{
  direction: rtl;
  text-align: right;
}

.wbw-row .wbw-num{
  direction: ltr;
  text-align: center;
}

/* =========================
   Ligne translit RTL (verte) + alignement
========================= */

.rtl-line{
  direction: rtl;
  display:flex;
  flex-wrap:wrap;          /* si ça déborde, ça passe à la ligne */
  gap:10px;
  align-items:flex-end;
  justify-content:flex-start;
  margin: 6px 0 10px;
}

.rtl-word{
  direction: rtl;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;

  /* ✅ “même largeur” : chaque mot prend un bloc */
  min-width: 140px;        /* ajuste selon ton rendu */
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.rtl-green{
  direction: rtl;
  font-size: 12px;
  line-height: 1.2;
  color: #a3e635;          /* vert lisible */
  opacity: .95;
  white-space: nowrap;
}

.rtl-ar{
  direction: rtl;
  text-align:center;
  font-size: 22px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Sur mobile, évite des blocs trop larges */
@media (max-width: 820px){
  .rtl-word{ min-width: 110px; }
}
@media (max-width: 420px){
  .rtl-word{ min-width: 100%; }
}


/* =========================
   Arab + translit (verlan) sous le texte
   (sans cartes, sans fond)
========================= */

.arabicStack{
  direction: rtl;
  text-align: right;
  margin: 6px 0 10px;
}

.arabicWords{
  direction: rtl;
  display:flex;
  flex-wrap:wrap;
  gap:16px;              /* espace entre mots */
  justify-content:flex-start;
  align-items:flex-end;
}

.aw{
  direction: rtl;
  display:inline-flex;
  flex-direction:column;
  align-items:center;     /* translit centrée sous le mot */
}

.aw-ar{
  direction: rtl;
  font-size: 34px;        /* adapte */
  line-height: 1.7;
  white-space: nowrap;
}

.aw-tr{
  font-size: 12px;
  line-height: 1.1;
  color: #a3e635;
  font-style: italic;
  opacity: .95;
  white-space: nowrap;
  margin-top: 2px;

  unicode-bidi: isolate;
  text-align: center;     /* toujours centré sous le mot arabe */
}

/* Mode normal (lisible) */
.aw-tr.norm{
  direction: ltr;
}

/* Mode sens inverse (verlan visuel) */
.aw-tr.rev{
  direction: rtl;
}

.triSwitch{
  padding:0;
  border:0;
  background:transparent;
}

.triBtn{
  all:unset;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#e5e7eb;
  cursor:pointer;
  transition:.15s ease;
}

.triBtn:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}

.triBtn:active{
  transform:translateY(0);
}

.triBtn{
  all: unset;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.aw-trl{
  direction:ltr;
  text-align:center;
  font-size:12px;
  line-height:1.1;
  color:#cbd5f1;
  opacity:.9;
  white-space:nowrap;
  margin-top:2px;
  unicode-bidi:isolate;
}

.pill.triSwitch{padding:0; overflow:hidden;}
.pill.triSwitch .triBtn{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.pill.triSwitch .triLbl{white-space:nowrap;}


/* =========================
   Mot à mot — centrage + contraste couleur (arabe)
========================= */

/* Carte */
.wbw-item{
  text-align: center;      /* centre tout dans la carte */
}

/* Mot arabe dans la carte */
.wbw-item .wbw-ar{
  text-align: center;
  direction: rtl;
  color: #7dd3fc;          /* bleu clair (différent du vert translit) */
  font-weight: 700;
}

/* Traduction / gloss dans la carte */
.wbw-item .wbw-gloss{
  text-align: center;
  direction: ltr;          /* FR normal */
  color: #e5e7eb;          /* texte normal */
}

/* Optionnel : petit espace entre arabe et gloss */
.wbw-item .wbw-gloss{
  margin-top: 6px;
}

/* ============ Quran Sidebar (style proche Wiki) ============ */
.layout{display:flex; min-height:100vh;}
.sidebar{
  width:320px; max-width:86vw;
  background: linear-gradient(180deg, #050814 0%, #0b1220 100%);
  border-right:1px solid #1e293b;
  padding:18px 14px;
  position:sticky; top:0;
  height:100vh; overflow:auto;
}
.content{flex:1; min-width:0;}

.sidebarToggleBtn{
  position:fixed; top:14px; left:14px; z-index:1100;
  display:none;
  padding:10px 12px;
  border-radius:12px;
  background:#0b1220;
  border:1px solid #334155;
  color:#e2e8f0;
  cursor:pointer;
}
.sidebarOverlay{
  position:fixed; inset:0; z-index:1050;
  background:rgba(0,0,0,.62);
  display:none;
}
body.sidebar-open .sidebarOverlay{display:block;}

@media (max-width:900px){
  .sidebarToggleBtn{display:inline-flex;}
  .sidebar{
    position:fixed; left:-340px; top:0; z-index:1080;
    transition:left .18s ease;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  body.sidebar-open .sidebar{left:0;}
}

/* blocs */
.phi-separator{height:1px; background:#1e293b; margin:16px 0;}
.sideBlock{
  background: rgba(15,23,42,.50);
  border:1px solid #1e293b;
  border-radius:12px;
  padding:12px;
  margin:12px 0;
}
.sideSearch{
  width:100%;
  background:#020617;
  border:1px solid #1e293b;
  color:#e2e8f0;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.surahLink{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  background:#020617;
  border:1px solid #1e293b;
  color:#e2e8f0;
}
.surahLink:hover{border-color:#60a5fa; background:rgba(96,165,250,.08);}
.surahLink.active{border-color:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.10);}

/* ===== Sidebar Tools Grid ===== */
.sidebar-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0;
}
.sidebar-tools .qbtn{
  margin:0 !important;
  margin-top:0 !important;
  padding:12px 10px !important;
}
.sidebar-tools .qbtn + .qbtn{
  margin-top:0 !important;
}

/* ===== Logo Sidebar Quran ===== */

.sidebarLogoWrap{
  text-align:center;
  padding:20px 10px 10px;
}

.sidebarLogo{
  width:220px;
  max-width:85%;
  height:auto;
  display:inline-block;
  filter: drop-shadow(0 0 12px rgba(14,165,233,.25));
  transition: transform .2s ease, filter .2s ease;
}

.sidebarLogo:hover{
  transform: scale(1.03);
  filter: drop-shadow(0 0 18px rgba(96,165,250,.35));
}

/* =========================
   Nav sourate compacte (1 ligne)
========================= */

.surah-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;      /* ✅ reste sur 1 ligne */
}

.surah-nav .inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;      /* ✅ */
  margin:0;
}

.surah-nav label{
  margin:0;
  white-space:nowrap;
}

.surah-nav .mini{
  width:70px;            /* ✅ plus compact */
  padding:8px 10px;
}

.surah-nav .btn{
  padding:8px 10px;      /* ✅ boutons plus petits */
  border-radius:12px;
  white-space:nowrap;
}

/* Mobile : on autorise le wrap si vraiment trop serré */
@media (max-width: 520px){
  .surah-nav{flex-wrap:wrap;}
  .surah-nav .inline{width:100%; justify-content:center;}
}

/* =========================
   Nav sourate TOP compacte (chevrons)
========================= */

.surah-nav-top{
  flex-wrap:nowrap !important;
  gap:8px;
}

.surah-nav-top .mini{
  width:62px;           /* encore + compact en haut */
  padding:8px 10px;
  text-align:center;
}

.surah-nav-top .btn{
  padding:8px 10px;
}

.surah-nav-top .nav-icon{
  width:40px;           /* boutons chevrons carrés */
  justify-content:center;
  font-size:18px;
  padding:8px 0;
}

.surah-nav-top .nav-go{
  padding:8px 12px;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Mobile : si vraiment trop étroit, on autorise le retour à la ligne */
@media (max-width: 420px){
  .surah-nav-top{flex-wrap:wrap !important;}
  .surah-nav-top .inline{width:100%; justify-content:center;}
}

/* Décale le header quand le bouton Menu (fixed) est visible */
@media (max-width: 900px){
  .topbar{
    margin-top: 56px; /* ajuste 48-64 selon ton rendu */
  }
}

/* =========================
   Options (checkbox) ultra compact
========================= */

.optRow{
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center;
}

.optRow label{
  margin:0 !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  font-size:13px;
  white-space:nowrap; /* ✅ Mot à mot ne casse plus */
}

.optRow input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
}

.optRow select{
  width:auto !important;
  padding:8px 10px !important;
  border-radius:12px;
}

/* Sur petit mobile: tu gardes compact, mais ça respire */
@media (max-width: 520px){
  .optRow{
    gap:8px !important;
  }
  .optRow label{
    padding:6px 8px;
    font-size:12px;
  }
}

/* Nav bottom identique au top */
.surah-nav-bottom{
  flex-wrap:nowrap !important;
  gap:8px;
}

.surah-nav-bottom .mini{
  width:62px;
  padding:8px 10px;
  text-align:center;
}

.surah-nav-bottom .nav-icon{
  width:40px;
  justify-content:center;
  font-size:18px;
  padding:8px 0;
}

.surah-nav-bottom .nav-go{
  padding:8px 12px;
}

/* si écran minuscule, on accepte wrap */
@media (max-width: 360px){
  .surah-nav-bottom{flex-wrap:wrap !important;}
  .surah-nav-bottom .inline{width:100%; justify-content:center;}
}

/* Header sourate (titre AR + FR) */
.surah-header{
  padding:18px 16px;
  text-align:center;
}
.surah-header .sname-ar{
  font-size:28px;
  font-weight:900;
  line-height:1.2;
  direction:rtl;
}
.surah-header .sname-fr{
  margin-top:6px;
  font-size:16px;
  font-weight:800;
  color:#e5e7eb;
}
.surah-header .smeta{
  margin-top:6px;
  font-size:12px;
  color:#94a3b8;
}

/* Toolbar options (compact + dynamique) */
.optBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.optLeft{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.optRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.optPills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#e5e7eb;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.pill:hover{filter:brightness(1.1); transform:translateY(-1px)}
.pill:active{transform:translateY(0)}
.pill input{display:none}
.pill .dot{
  width:10px;height:10px;border-radius:999px;
  border:2px solid rgba(229,231,235,.55);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.pill input:checked + .dot{
  border-color: rgba(147,197,253,.95);
  background: rgba(147,197,253,.95);
  box-shadow: 0 0 0 6px rgba(147,197,253,.10);
}
.pill .lbl{font-weight:800;font-size:13px;letter-spacing:.2px}

.optSelect{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(11,16,32,.85);
  color:#e5e7eb;
  outline:none;
  font-weight:800;
  font-size:13px;
}

.optHint{
  flex-basis:100%;
  margin-top:2px;
  font-size:12px;
  color:#94a3b8;
  opacity:.95;
}

/* Mobile : tout reste compact, hint optionnel */
@media (max-width:520px){
  .optHint{display:none;} /* tu peux laisser si tu veux */
}

/* Base bouton (style Quran) */
.qbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 16px;
  border-radius:16px;

  font-weight:800;
  font-size:14px;
  line-height:1;

  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#e5e7eb;

  box-shadow:
  0 10px 28px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.qbtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.qbtn:active{
  transform: translateY(0);
}

/* Bouton primaire bleu (comme "Recherche" de ta capture) */
.qbtn-primary{
  border-color: rgba(96,165,250,.22);
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  box-shadow:
  0 14px 34px rgba(37,99,235,.25),
  0 10px 28px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.10);
}

.qbtn-primary:hover{
  box-shadow:
  0 18px 44px rgba(37,99,235,.32),
  0 10px 28px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.14);
}

/* Petite pastille icône (optionnel mais ça fait “pro”) */
.qbtn-ico{
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.qbtn{
  display:flex;          /* au lieu de inline-flex */
  align-items:center;
  justify-content:center; /* centre le texte */
  gap:10px;

  width:100%;            /* 👈 pleine largeur */
  box-sizing:border-box; /* évite débordement */

  padding:14px 16px;
  border-radius:18px;
}

.sidebar .qbtn{
  width:100%;
}

.qbtn-back{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;

  padding:12px 16px;
  border-radius:18px;

  font-weight:800;
  text-decoration:none;

  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;

  box-shadow:
  0 8px 22px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.06);

  transition: all .2s ease;
}

.qbtn-back:hover{
  transform:translateY(-1px);
  background: rgba(255,255,255,.08);
}

.btn-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:48px;

  border-radius:14px;
  border:1px solid rgba(96,165,250,.25);

  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  color:#fff;

  font-size:18px;
  font-weight:900;

  cursor:pointer;

  box-shadow:
  0 12px 28px rgba(37,99,235,.28),
  inset 0 1px 0 rgba(255,255,255,.10);

  transition: all .2s ease;
}

.btn-search-icon:hover{
  transform:translateY(-1px);
  box-shadow:
  0 18px 38px rgba(37,99,235,.35),
  inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:48px;
  border-radius:12px;
  border:1px solid rgba(96,165,250,.25);
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.btn-search-icon:hover{filter:brightness(1.06); transform:translateY(-1px);}

/* Espace entre deux qbtn consécutifs */
.qbtn + .qbtn{
  margin-top: 12px;
}

/* ✅ IMPORTANT : respecte l'attribut hidden */
.rootModal[hidden]{
  display:none !important;
}

.rootModal{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.68);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.rootBox{
  width:min(720px, 96vw);
  max-height:86vh;
  overflow:auto;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.95));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  padding:14px;
}
.rootHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rootTitle{font-weight:900;font-size:16px}
.rootClose{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
#welcomeModal { z-index: 99999 !important; }

.rootSub{margin-top:8px;color:#cbd5f1;font-size:13px}
.rootAr{direction:rtl;text-align:right;font-size:18px}
.rootSep{opacity:.6;margin:0 6px}

.rootStats{margin-top:10px;color:#94a3b8;font-size:13px}
.rootForms{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.rootTag{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;font-weight:800;font-size:12px;
}
.rootHits{margin-top:12px;display:grid;gap:10px}
.rootHit{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:10px;
}
.rootRef{color:#93c5fd;font-weight:900;font-size:12px;margin-bottom:6px}
.rootAyah{direction:rtl;text-align:right;font-size:20px;line-height:1.9}
.rootFoot{margin-top:12px}

.aw-ar[data-word-ar], .wbw-ar[data-word-ar]{
  cursor:pointer;
}
.aw-ar[data-word-ar]:hover, .wbw-ar[data-word-ar]:hover{
  filter:brightness(1.12);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.aw-ar{
  transition: all .15s ease;
}

.aw-ar:hover{
  color:#60a5fa;
  text-shadow:0 0 12px rgba(96,165,250,.35);
}

.rootInfoBtn{
  margin-left:8px;
  font-size:14px;
  cursor:pointer;
  opacity:.7;
  transition:.2s;
}
.rootInfoBtn:hover{
  opacity:1;
}

.rootInfoBox{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.5;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
}

.repeatBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  margin-top:3px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(147,197,253,.15);
  border:1px solid rgba(147,197,253,.35);
  color:#93c5fd;
  cursor:default;
}

.rootLetter{
  color:#ff4d4d;
  font-weight:900;
}

.rootLetter{
  color:#ff4d4d;
  font-weight:900;
  text-shadow: 0 0 8px rgba(255,77,77,.35);
}

/* ===== Boost visibilité boutons info (ⓘ) ===== */
.rootInfoBtn{
  width:26px;
  height:26px;
  font-size:15px;
  font-weight:900;

  border:2px solid rgba(59,130,246,.8);
  background:linear-gradient(180deg, rgba(59,130,246,.25), rgba(29,78,216,.35));
  color:#fff;

  box-shadow:
  0 0 0 4px rgba(59,130,246,.12),
  0 8px 18px rgba(37,99,235,.35);

  transition:all .18s ease;
  cursor:pointer;
}

.rootInfoBtn:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:
  0 0 0 6px rgba(59,130,246,.18),
  0 12px 26px rgba(37,99,235,.45);
}

.rootInfoBtn:active{
  transform:scale(.95);
}

/* Fix centrage parfait du ⓘ */
.rootInfoBtn{
  display:flex;              /* remplace inline-flex si besoin */
  align-items:center;
  justify-content:center;

  line-height:1;             /* supprime décalage vertical */
  padding:0;                 /* évite décalage interne */
  text-align:center;

  font-family:system-ui, sans-serif;
}

/* optionnel : micro-ajustement optique */
.rootInfoBtn::before{
  display:block;
}

.rootInfoBtn{
  position:relative;
}

.rootInfoBtn{
  display:grid;
  place-items:center;
}

/* ===== Toolbar App Style ===== */

.optBar{
  position:sticky;
  top:12px;
  z-index:1000;

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  background:linear-gradient(
    180deg,
    rgba(15,23,42,.85),
    rgba(2,6,23,.75)
  );

  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;

  padding:12px 14px;
  margin-bottom:22px;

  box-shadow:
  0 10px 30px rgba(0,0,0,.35);
  
  transition:all .25s ease;
}

.pill{
  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);

  font-size:14px;
  font-weight:600;

  transition:all .18s ease;
  cursor:pointer;
}

.pill:hover{
  background:rgba(59,130,246,.18);
  border-color:rgba(59,130,246,.6);
}

.pill input{
  display:none;
}

.pill input:checked + .dot{
  background:#3b82f6;
  box-shadow:0 0 10px rgba(59,130,246,.6);
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  transition:all .18s ease;
}

.optPills{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
}

.optPills::-webkit-scrollbar{
  display:none;
}

.optSelect{
  border-radius:14px;
  padding:8px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
}

/* ===== OptBar : 1 ligne, style app ===== */
.optBar{ position:sticky; top:12px; z-index:1000; }

.optBar form.optLeft{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Tout sur UNE ligne (scroll si ça dépasse) */
.optPills{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.optPills::-webkit-scrollbar{ display:none; }

/* Cache le petit point + checkbox */
.pill .dot{ display:none !important; }
.pill input{ display:none !important; }

/* Bouton = pill */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#e5e7eb;

  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  white-space:nowrap;

  transition:all .18s ease;
  cursor:pointer;
  user-select:none;
}

/* ON = plein bleu */
.pill:has(input:checked){
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  border-color:rgba(59,130,246,.85);
  box-shadow:0 10px 24px rgba(37,99,235,.35);
  color:#fff;
}

/* OFF hover léger */
.pill:hover{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
}

/* état disabled (quand Arabe OFF) */
.pill[style*="pointer-events:none"]{
  opacity:.45;
}

/* Select à droite compact, reste visible */
.optRight{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.optSelect{
  min-width:92px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  font-weight:900;
}

/* ===== Toolbar: 1 ligne, jamais de wrap, scroll si besoin ===== */

.optBar form.optLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;      /* ✅ interdit le retour ligne */
  min-width:0;           /* ✅ permet le shrink propre */
}

/* Zone boutons = prend toute la place dispo, scroll horizontal si overflow */
.optPills{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;

  overflow-x:auto;       /* ✅ jamais de wrap */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.optPills::-webkit-scrollbar{ display:none; }

/* Zone droite (select) = ne rétrécit jamais */
.optRight{
  flex:0 0 auto;
  margin-left:0;         /* on laisse le gap gérer */
  display:flex;
  align-items:center;
}

/* Select compact + largeur stable */
.optSelect{
  width:110px;           /* ✅ stable partout */
  max-width:110px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  white-space:nowrap;
}

/* Boutons: pas de coupe */
.pill{ white-space:nowrap; flex:0 0 auto; }

@media (max-width:480px){
  .optSelect{ width:92px; max-width:92px; padding:9px 10px; }
  .pill{ padding:9px 12px; font-size:12.5px; }
}

/* Empêche tout bouton de déborder */
.pill{
  flex:0 0 auto;
  max-width:110px;       /* sécurité */
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Si écran très petit → réduit légèrement */
@media (max-width:420px){
  .pill{
    padding:8px 11px;
    font-size:12px;
    max-width:95px;
  }
}

/* =========================
   OPTBAR — 1 ligne, jamais de dépassement
   (override final)
========================= */

.optBar{
  position: sticky;
  top: 12px;
  z-index: 1000;

  display:flex;
  align-items:center;
  gap:12px;

  /* ✅ empêche les pills de sortir du conteneur arrondi */
  overflow:hidden;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-radius: 20px;
}

/* Le form doit pouvoir shrink, sinon overflow bizarre */
.optBar form.optLeft{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: nowrap;
}

/* La rangée de boutons prend la place dispo + scroll horizontal si trop */
.optPills{
  flex: 1 1 auto;
  min-width: 0;

  display:flex;
  flex-wrap: nowrap;
  gap:10px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.optPills::-webkit-scrollbar{ display:none; }

/* Plus de dot / checkbox visible : bouton = pill */
.pill .dot{ display:none !important; }
.pill input{ display:none !important; }

/* ✅ Pills = “app buttons” */
.pill{
  flex: 0 0 auto;         /* ne shrink pas en cassant le layout */
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:#e5e7eb;

  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
  white-space:nowrap;

  transition: .18s ease;
}

/* ON (checkbox pills) */
.pill:has(input:checked){
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  border-color: rgba(59,130,246,.85);
  box-shadow: 0 10px 24px rgba(37,99,235,.35);
  color:#fff;
}

/* ✅ ON (SUB triSwitch) -> piloté par la classe JS */
.pill.triSwitch.is-on{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  border-color: rgba(59,130,246,.85);
  box-shadow: 0 10px 24px rgba(37,99,235,.35);
  color:#fff;
}

/* Hover léger OFF */
.pill:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
}

/* ✅ sécurité : si un libellé est trop long (Echo), on tronque proprement */
.pill .lbl{
  max-width: 78px;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Sur petits écrans, un peu plus compact */
@media (max-width:420px){
  .pill{ padding:8px 12px; font-size:12px; }
  .pill .lbl{ max-width: 64px; }
}

/* ===== Toolbar : jamais de dépassement, scroll horizontal ===== */

.optBar{
  box-sizing:border-box;
  max-width:100%;
  overflow:hidden;            /* ✅ clippe tout ce qui sort */
}

.optBar form.optLeft{
  min-width:0;
  flex-wrap:nowrap;
}

.optPills{
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
  flex-wrap:nowrap;

  overflow-x:auto;            /* ✅ si trop long -> scroll */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.optPills::-webkit-scrollbar{display:none;}

/* Les pills ne doivent jamais “pousser” hors conteneur */
.pill{
  flex:0 0 auto;
  max-width:120px;            /* sécurité */
}

.pill .lbl{
  display:block;
  max-width:90px;             /* tronque "Echo" si besoin */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* SUB ON = bleu (piloté par class) */
.pill.triSwitch.is-on{
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(29,78,216,.95));
  border-color:rgba(59,130,246,.85);
  box-shadow:0 10px 24px rgba(37,99,235,.35);
  color:#fff;
}

/* ===== OptBar : mode "app bar" full width + dock bottom ===== */

:root{
  --optbar-h: 64px; /* approx, sert à réserver la place */
}

/* base: on garde ton style, mais on autorise full width */
.optBar{
  box-sizing:border-box;
  width:100%;
}

/* Full-bleed (sort de la .wrap) quand elle est dockée */
.optBar.is-docked{
  position:fixed;
  left:0; right:0;
  bottom:0;
  top:auto;
  width:100vw;
  margin:0;
  border-radius:18px 18px 0 0;
  z-index:1500;

  /* look “taskbar” */
  background:linear-gradient(180deg, rgba(2,6,23,.75), rgba(2,6,23,.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* évite toute fuite */
  overflow:hidden;
}

/* IMPORTANT: réserve la place en bas quand docké (sinon ça cache le contenu) */
body.optbar-docked{
  padding-bottom: calc(var(--optbar-h) + 16px);
}

/* La zone pills doit scroller si trop long (plus de dépassement) */
.optBar .optPills{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.optBar .optPills::-webkit-scrollbar{display:none}

/* Echo / tout pill: jamais de dépassement */
.optBar .pill{
  flex:0 0 auto;
  max-width:120px;
}
.optBar .pill .lbl{
  display:block;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Mobile: barre toujours en bas (app-like) */
@media (max-width: 900px){
  .optBar{
    position:fixed;
    left:0; right:0;
    bottom:0;
    top:auto;
    width:100vw;
    margin:0;
    border-radius:18px 18px 0 0;
    z-index:1500;
    overflow:hidden;
  }
  body{
    padding-bottom: calc(var(--optbar-h) + 16px);
  }
}

/* OptBar (barre) */
.optBar{ z-index:1500; }

/* Sidebar + overlay AU-DESSUS */
.sidebarOverlay{ z-index:3000 !important; }
.sidebar{ z-index:3100 !important; }
.sidebarToggleBtn{ z-index:3200 !important; } /* bouton menu toujours au-dessus */

/* Centrage global du contenu de la barre */
.optBar{
  display:flex;
  justify-content:center;   /* ✅ centre */
  align-items:center;
}

/* Le form occupe la largeur et centre ses éléments */
.optBar form.optLeft{
  width:100%;
  display:flex;
  justify-content:center;   /* ✅ centre les boutons */
  align-items:center;
  gap:10px;
}

/* Les pills restent sur une ligne, mais centrées */
.optBar .optPills{
  flex:0 1 auto;            /* ✅ ne force pas à prendre toute la place */
  display:flex;
  justify-content:center;   /* ✅ centre les boutons */
  align-items:center;
  gap:10px;
}

/* si overflow -> scroll mais on garde le centrage visuel */
.optBar .optPills{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.optBar .optPills::-webkit-scrollbar{display:none}

/* ✅ Bookmarks floating button */
.bmFab{
  position:fixed;
  top:14px;
  right:14px;
  z-index:1105;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(17,28,51,.92);
  border:1px solid rgba(255,255,255,.10);
  color:#e5e7eb;
  cursor:pointer;
  backdrop-filter: blur(10px);
}

.bmFabPanel{
  position:fixed;
  top:66px;
  right:14px;
  z-index:1106;
  width:min(320px, 92vw);
  background:rgba(15,18,25,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.bmFabHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.bmFabClose{
  background:transparent;
  border:0;
  color:#e5e7eb;
  cursor:pointer;
  font-size:16px;
  padding:6px 8px;
  border-radius:10px;
}

.bmFabBtns{
  display:flex;
  gap:10px;
}

.bmFabBtn{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#e5e7eb;
  cursor:pointer;
}

.bmFabBtn:hover{ filter:brightness(1.12); }

.bmFabHint{
  margin-top:10px;
  font-size:12px;
  color:#94a3b8;
  opacity:.9;
}

/* option: évite conflit avec iOS safe area */
@media (max-width: 900px){
  .bmFab{ top:12px; right:12px; }
  .bmFabPanel{ top:62px; right:12px; }
}

/* Multi-glosses WBW */
.wbw-g1 {
  display: block;
  font-weight: 700;
}
.wbw-galt {
  display: block;
  font-size: 11px;
  opacity: .65;
  margin-top: 2px;
  line-height: 1.3;
}

/* Fix FAB stack */
.fabStack {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fabStack .bmFab {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,18,25,.92);
  color: #e5e7eb;
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.fabStack .bmFab:hover {
  filter: brightness(1.15);
}

/* Popups AU-DESSUS des boutons FAB */
.bmFabPanel {
  z-index: 10001 !important;
}
#alphaModal {
  z-index: 10001 !important;
}
#helpModal {
  z-index: 10001 !important;
}

/* Sourate lue dans la sidebar */
.surahLink.is-read {
  border-color: rgba(34,197,94,.3);
  background: rgba(34,197,94,.08);
}
.surahLink.is-read .surahName::after {
  content: ' ✓';
  color: #4ade80;
  font-size: 12px;
  margin-left: 6px;
}

/* Help cards */
.helpCard {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
}
.helpCardTitle {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 4px;
  color: #e5e7eb;
}
.helpCardTitle code {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  font-weight: 700;
}