/* ===== Theme & resets ===== */
:root{
  --c-bg: #f6f3ee;
  --c-paper: #ffffff;
  --c-ink: #1f2a37;
  --c-mute: #6b7785;
  --c-line: #e6e1d6;
  --c-brand: #0e6655;
  --c-brand-2: #0b8a6b;
  --c-gold: #b58a3a;
  --c-warm: #fff8ea;
  --c-warm-line: #ead9b0;
  --c-umra: #0e6655;
  --c-hajj: #6b3aa6;
  --c-ziyara: #2a5d8f;
  --c-voyage: #b58a3a;
  --c-tools: #c0552c;
  --c-checklist: #355c4f;
  --shadow: 0 6px 24px rgba(20, 30, 50, .08);
  --radius: 14px;
  --radius-lg: 22px;
  --space: 16px;
  --base-font: 16px;
}
html{font-size:var(--base-font)}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --c-bg: #0f1417;
    --c-paper: #161c20;
    --c-ink: #ecedee;
    --c-mute: #98a2af;
    --c-line: #232b32;
    --c-warm: #1f1c12;
    --c-warm-line: #3a3220;
    --shadow: 0 6px 24px rgba(0,0,0,.45);
  }
}
html[data-theme="dark"]{
  --c-bg: #0f1417;
  --c-paper: #161c20;
  --c-ink: #ecedee;
  --c-mute: #98a2af;
  --c-line: #232b32;
  --c-warm: #1f1c12;
  --c-warm-line: #3a3220;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-ink);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}
body{min-height:100vh}

button{font-family:inherit;color:inherit;cursor:pointer}
.icon-btn{background:transparent;border:0;color:var(--c-ink);padding:8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:rgba(0,0,0,.06)}

/* ===== Top bar ===== */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:color-mix(in srgb, var(--c-paper) 92%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--c-line);
}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.brand-mark{font-size:22px;color:var(--c-brand)}
.brand-title{letter-spacing:.2px}
.lang-switch{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--c-paper);border:1px solid var(--c-line);padding:6px 10px;border-radius:999px;font-size:13px;cursor:pointer;user-select:none}
.chip input{accent-color:var(--c-brand)}

/* ===== Sidebar ===== */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:300px;max-width:88vw;
  background:var(--c-paper);border-right:1px solid var(--c-line);
  transform:translateX(-105%);transition:transform .25s ease;z-index:50;
  display:flex;flex-direction:column;
}
.sidebar.open{transform:translateX(0)}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--c-line)}
.side-head .icon-btn{font-size:22px;line-height:1}
.side-nav{flex:1;overflow:auto;padding:8px}
.side-nav a{display:block;padding:10px 12px;border-radius:10px;color:var(--c-ink);text-decoration:none;font-weight:500}
.side-nav a:hover,.side-nav a.active{background:rgba(14,102,85,.08);color:var(--c-brand)}
.side-nav .nav-sub{padding-left:18px;font-size:14px;color:var(--c-mute)}
.side-foot{padding:12px;border-top:1px solid var(--c-line)}
.ghost-btn{display:block;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--c-line);background:transparent;color:var(--c-ink);font-weight:500}
.muted{color:var(--c-mute)}
.small{font-size:12px}

.scrim{position:fixed;inset:0;background:rgba(10,15,25,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:45}
.scrim.show{opacity:1;pointer-events:auto}

/* ===== Screens ===== */
.screen{display:none;padding:18px max(16px, env(safe-area-inset-left)) 60px max(16px, env(safe-area-inset-right));max-width:1100px;margin:0 auto}
.screen.active{display:block}
.screen-head{display:flex;align-items:center;gap:8px;margin:8px 0 18px}
.screen-head h1{margin:0;font-size:22px}
.back{background:transparent;border:0;font-size:22px;padding:6px 8px;border-radius:10px}
.back:hover{background:rgba(0,0,0,.06)}

/* ===== Hero / Home ===== */
.hero{
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 120% at 110% -10%, rgba(181,138,58,.18), transparent 60%),
    radial-gradient(80% 80% at -10% 110%, rgba(14,102,85,.18), transparent 60%),
    linear-gradient(135deg, #fffaf0, #f1efe4);
  padding:28px 22px;color:#1d2a32;
  border:1px solid var(--c-line);
  position:relative;overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .hero{
    background:
      radial-gradient(120% 120% at 110% -10%, rgba(181,138,58,.16), transparent 60%),
      radial-gradient(80% 80% at -10% 110%, rgba(14,102,85,.18), transparent 60%),
      linear-gradient(135deg, #1a201f, #161c1f);
    color:var(--c-ink);
  }
}
.hero h1{margin:8px 0 6px;font-size:28px}
.hero .lede{margin:0;color:var(--c-mute);max-width:62ch}
.bismillah{font-size:26px;margin:0;color:var(--c-brand);font-weight:700;letter-spacing:.5px}
.arabic{font-family:'Amiri','Scheherazade New',serif;direction:rtl;line-height:1.9}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px}
.card{
  text-align:left;background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:18px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card h2{margin:4px 0 0;font-size:18px}
.card p{margin:0;color:var(--c-mute);font-size:14px}
.card-emoji{font-size:28px}
.card-umra{border-left:4px solid var(--c-umra)}
.card-hajj{border-left:4px solid var(--c-hajj)}
.card-ziyara{border-left:4px solid var(--c-ziyara)}
.card-voyage{border-left:4px solid var(--c-voyage)}
.card-tools{border-left:4px solid var(--c-tools)}
.card-checklist{border-left:4px solid var(--c-checklist)}

.progress-block{margin-top:24px}
.progress-card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:14px 16px}
.progress-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.progress-row .label{flex:0 0 110px;font-size:13px;color:var(--c-mute)}
.progress-row .bar{flex:1;height:8px;background:rgba(0,0,0,.06);border-radius:999px;overflow:hidden}
.progress-row .bar > i{display:block;height:100%;background:var(--c-brand);border-radius:inherit;width:0}
.progress-row .pct{flex:0 0 44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--c-mute);font-size:13px}

/* ===== Sections / steps ===== */
.section-intro{
  background:var(--c-warm);border:1px solid var(--c-warm-line);
  padding:14px 16px;border-radius:var(--radius);margin:6px 0 14px;color:var(--c-ink)
}
.section-intro h2{margin:0 0 6px;font-size:18px}
.section-intro p{margin:6px 0;color:var(--c-ink)}
.section-intro .arabic{font-size:18px}

.step{
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:14px 16px;margin:10px 0;
  position:relative;
}
.step.done{border-color: color-mix(in srgb, var(--c-brand) 35%, var(--c-line));}
.step-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.step-num{flex:0 0 30px;height:30px;border-radius:999px;background:var(--c-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.step-title{margin:0;font-size:17px;line-height:1.35;flex:1}
.step-actions{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.tag{display:inline-block;background:rgba(14,102,85,.10);color:var(--c-brand);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.tag.warn{background:rgba(192,85,44,.12);color:var(--c-tools)}
.tag.gold{background:rgba(181,138,58,.15);color:var(--c-gold)}
.tag.purple{background:rgba(107,58,166,.12);color:var(--c-hajj)}
.tag.blue{background:rgba(42,93,143,.12);color:var(--c-ziyara)}

.step .body p{margin:.4em 0}
.step .note{font-size:13px;color:var(--c-mute);border-top:1px dashed var(--c-line);margin-top:10px;padding-top:8px}
.step-figure{margin:12px 0;padding:12px;background:#fffaf0;border:1px solid var(--c-warm-line);border-radius:var(--radius)}
.step-figure img{width:100%;height:auto;display:block;border-radius:6px}
.step-figure figcaption{margin-top:8px;font-size:12px;color:var(--c-mute);text-align:center;font-style:italic}
@media (prefers-color-scheme: dark){
  .step-figure{background:#1d1c14;border-color:#3a3220}
  .step-figure img{background:#fffaf0;padding:6px}
}

.invocation{
  background:linear-gradient(180deg, #fffdf6, #fffaf0);
  border:1px solid var(--c-warm-line);
  border-radius:var(--radius);
  padding:12px 14px;margin:8px 0;
}
@media (prefers-color-scheme: dark){
  .invocation{background:linear-gradient(180deg, #1d1c14, #181711)}
}
.inv-ar{font-family:'Amiri','Scheherazade New',serif;direction:rtl;text-align:right;font-size:22px;line-height:2;color:#1d2a32}
@media (prefers-color-scheme: dark){.inv-ar{color:#f1ead8}}
.inv-tr{font-style:italic;color:var(--c-brand);margin:8px 0;font-size:15px}
.inv-fr{margin:6px 0 0;color:var(--c-ink)}
.hidden{display:none !important}

/* Language toggles — driven by body classes set in app.js */
body.hide-ar [data-lang="ar"]{display:none !important}
body.hide-tr [data-lang="tr"]{display:none !important}
body.hide-fr [data-lang="fr"]{display:none !important}
body.hide-en [data-lang="en"]{display:none !important}
body.hide-wo [data-lang="wo"]{display:none !important}
.inv-en{margin:6px 0 0;color:var(--c-ink);font-style:italic;font-size:.95em}
.inv-wo{margin:6px 0 0;color:var(--c-ink);font-size:.95em}

/* Invocation header: label + play button */
.inv-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.inv-label{flex:1;margin:0}
.inv-play{
  flex-shrink:0;width:34px;height:34px;border-radius:999px;
  border:1px solid var(--c-warm-line);background:var(--c-paper);color:var(--c-brand);
  font-size:13px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .1s ease, background .15s ease;
}
.inv-play:hover{background:rgba(14,102,85,.08)}
.inv-play.playing{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.inv-play:active{transform:scale(.92)}

/* Topbar Hijri pill */
.hijri{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,102,85,.10);color:var(--c-brand);
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  margin-left:auto;margin-right:6px;
  white-space:nowrap;
}
@media (max-width:560px){.hijri{font-size:11px;padding:3px 8px}}

/* Qibla compass */
.qibla{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.compass{
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, #fffaf0 0%, #f1efe4 100%);
  border:3px solid var(--c-warm-line);
  position:relative;
  box-shadow:inset 0 4px 16px rgba(0,0,0,.06);
}
.compass .n{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-weight:700;color:var(--c-mute);font-size:14px}
.compass .arrow{
  position:absolute;top:50%;left:50%;
  width:6px;height:80px;
  background:linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand) 50%, #aaa 50%, #aaa 100%);
  transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(0deg);
  border-radius:3px;
  transition:transform .2s ease-out;
}
.compass .arrow::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-bottom:14px solid var(--c-brand);
}
.compass .center{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:var(--c-ink);transform:translate(-50%,-50%)}
.qibla .info{text-align:center;font-size:14px;color:var(--c-mute);max-width:320px;line-height:1.5}
.qibla .info strong{color:var(--c-ink);font-size:16px;display:block;margin-bottom:4px}
.qibla button.enable{
  padding:10px 16px;border-radius:10px;
  background:var(--c-brand);color:#fff;border:0;font-weight:600;cursor:pointer;
}

/* Prayer times */
.prayers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:8px}
.prayer{
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:10px;padding:10px;text-align:center;
}
.prayer.next{background:rgba(14,102,85,.08);border-color:var(--c-brand)}
.prayer .name{font-size:12px;color:var(--c-mute);text-transform:uppercase;letter-spacing:.5px}
.prayer .time{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.prayer.next .time{color:var(--c-brand)}
.prayer-loc{font-size:13px;color:var(--c-mute);margin-top:8px}

/* Step actions: favorite star */
.fav-btn{
  background:transparent;border:0;cursor:pointer;color:var(--c-mute);
  font-size:18px;line-height:1;padding:4px;border-radius:6px;flex-shrink:0;
}
.fav-btn:hover{background:rgba(0,0,0,.05);color:var(--c-gold)}
.fav-btn.on{color:var(--c-gold)}

/* Sidebar settings panel */
.side-settings{padding:8px 12px;border-top:1px solid var(--c-line)}
.side-settings .row{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px}
.side-settings .row .lbl{flex:0 0 auto;color:var(--c-mute);min-width:70px}
.font-buttons{display:flex;gap:4px;flex:1}
.font-buttons button{
  flex:1;padding:6px 8px;border:1px solid var(--c-line);background:var(--c-paper);
  color:var(--c-ink);border-radius:8px;cursor:pointer;font-size:13px;
}
.font-buttons button.active{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}

/* Search overlay */
.search-overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(10,15,25,.55);
  display:none;align-items:flex-start;justify-content:center;padding:60px 16px;
}
.search-overlay.show{display:flex}
.search-panel{
  width:100%;max-width:640px;background:var(--c-paper);
  border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex;flex-direction:column;max-height:80vh;overflow:hidden;
}
.search-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--c-line)}
.search-head input{
  flex:1;border:0;outline:none;background:transparent;color:var(--c-ink);
  font-size:16px;padding:8px;font-family:inherit;
}
.search-head .icon-btn{font-size:24px;line-height:1}
.search-results{flex:1;overflow-y:auto;padding:4px 0}
.search-results .empty{padding:24px;text-align:center;color:var(--c-mute);font-size:14px}
.search-result{
  padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--c-line);
  display:block;text-decoration:none;color:var(--c-ink);
}
.search-result:hover{background:rgba(14,102,85,.06)}
.search-result .sec{font-size:11px;color:var(--c-brand);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.search-result .ttl{margin:2px 0;font-weight:500}
.search-result .snip{font-size:13px;color:var(--c-mute);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-result mark{background:rgba(181,138,58,.3);color:var(--c-ink);padding:0 2px;border-radius:2px}

/* Step-by-step mode */
.stepmode-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:8px 12px;margin-bottom:14px;
}
.stepmode-bar .toggle{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;
  color:var(--c-mute);user-select:none;
}
.stepmode-bar .toggle input{accent-color:var(--c-brand)}
.stepmode-nav{display:none;align-items:center;gap:8px;margin-left:auto}
body.stepmode .stepmode-nav{display:flex}
.stepmode-nav button{
  padding:6px 12px;border-radius:8px;border:1px solid var(--c-line);background:var(--c-paper);
  color:var(--c-ink);cursor:pointer;font-size:14px;
}
.stepmode-nav button:disabled{opacity:.4;cursor:not-allowed}
.stepmode-nav .pos{font-size:13px;color:var(--c-mute);font-variant-numeric:tabular-nums;min-width:60px;text-align:center}
body.stepmode .step{display:none}
body.stepmode .step.current{display:block}
body.stepmode .timeline{display:none}

/* Favorites + Glossary lists */
.fav-list .step{margin:10px 0}
.fav-empty{padding:30px 20px;text-align:center;color:var(--c-mute);font-size:14px}
.glossary-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.glossary-card{
  background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:12px 14px;
}
.glossary-card .term{font-weight:700;font-size:16px;color:var(--c-brand)}
.glossary-card .ar{font-family:'Amiri','Scheherazade New',serif;font-size:18px;float:right;color:var(--c-ink);margin-top:-2px;direction:rtl}
.glossary-card .def{font-size:14px;color:var(--c-ink);margin-top:6px;line-height:1.55}

/* Personal notes per step */
.note-toggle{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;font-size:13px;color:var(--c-mute);cursor:pointer;
  background:none;border:0;padding:4px 0;
}
.note-toggle:hover{color:var(--c-brand)}
.note-toggle.has-notes{color:var(--c-gold);font-weight:600}
.note-area{display:none;margin-top:8px}
.note-area.show{display:block}
.note-area textarea{
  width:100%;min-height:80px;
  padding:10px 12px;border:1px solid var(--c-line);
  border-radius:10px;background:var(--c-paper);color:var(--c-ink);
  font-family:inherit;font-size:14px;line-height:1.5;
  resize:vertical;
}
.note-area textarea:focus{outline:none;border-color:var(--c-brand)}
.note-area .small{display:block;margin-top:4px;font-size:11px;color:var(--c-mute)}

/* Update banner */
.update-banner{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:var(--c-brand);color:#fff;
  padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;z-index:80;
  font-size:14px;
}
.update-banner button{
  background:#fff;color:var(--c-brand);border:0;
  padding:6px 12px;border-radius:999px;font-weight:600;cursor:pointer;font-size:13px;
}

/* About page */
.about-card{
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:18px 20px;margin:12px 0;
}
.about-card h2{margin:0 0 8px;font-size:18px;color:var(--c-brand)}
.about-card p{margin:6px 0;line-height:1.6}
.about-card .meta{font-size:13px;color:var(--c-mute)}
.about-card a{color:var(--c-brand);text-decoration:underline}

/* Print button in screen header */
.print-btn{
  margin-left:auto;background:transparent;border:1px solid var(--c-line);
  color:var(--c-ink);padding:6px 12px;border-radius:8px;
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.print-btn:hover{background:rgba(0,0,0,.04);border-color:var(--c-brand);color:var(--c-brand)}

/* Sidebar badges */
.side-nav a{display:flex;align-items:center;justify-content:space-between}
.side-nav a .badge{
  background:var(--c-brand);color:#fff;font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:999px;margin-left:6px;
}

/* Tasbih counter */
.tasbih .num{font-size:64px}
.tasbih .presets{display:flex;gap:6px;margin-top:6px}
.tasbih .presets button{
  flex:1;padding:6px 4px;border-radius:8px;border:1px solid var(--c-line);
  background:var(--c-paper);color:var(--c-ink);font-size:12px;cursor:pointer;
}
.tasbih .presets button.active{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.tasbih .label-input{
  width:100%;margin-top:8px;padding:6px 8px;
  border:1px solid var(--c-line);border-radius:8px;background:var(--c-paper);
  color:var(--c-ink);font-size:13px;
}

/* Counter "Aller à l'invocation" link */
.counter-jump{
  display:block;margin-top:8px;padding:8px;border-radius:8px;
  background:rgba(14,102,85,.08);color:var(--c-brand);
  text-decoration:none;font-size:13px;font-weight:600;text-align:center;
  border:1px dashed var(--c-brand);
}
.counter-jump:hover{background:rgba(14,102,85,.16)}

/* Step highlighted as "in progress" by linked counter */
.step.active-by-counter{
  border-color:var(--c-brand);
  box-shadow:0 0 0 2px rgba(14,102,85,.2);
  background:rgba(14,102,85,.03);
}

/* Preparation timeline */
.timeline-bucket{
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:14px 16px;margin:10px 0;
}
.timeline-bucket h3{margin:0 0 6px;font-size:16px;color:var(--c-brand)}
.timeline-bucket .when{font-size:12px;color:var(--c-mute);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}

/* "Pour qui" — list of people to invoke for */
.fw-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.fw-row{display:flex;gap:8px;background:var(--c-paper);border:1px solid var(--c-line);border-radius:10px;padding:10px}
.fw-row input{flex:1;border:0;background:transparent;color:var(--c-ink);font-family:inherit;font-size:14px;outline:none}
.fw-row .name{font-weight:600;flex:0 0 30%}
.fw-row .ctx{flex:1;color:var(--c-mute);font-style:italic}
.fw-row .del{background:transparent;border:0;color:var(--c-mute);cursor:pointer;font-size:18px;line-height:1;padding:4px 8px}
.fw-row .del:hover{color:var(--c-tools)}
.fw-add{display:flex;gap:8px;margin-top:14px}
.fw-add input{flex:1;padding:10px 12px;border:1px solid var(--c-line);border-radius:10px;background:var(--c-paper);color:var(--c-ink);font-size:14px}
.fw-add button{padding:10px 16px;background:var(--c-brand);color:#fff;border:0;border-radius:10px;font-weight:600;cursor:pointer}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:8px}
.stat-card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:14px;text-align:center}
.stat-card .num{font-size:32px;font-weight:800;color:var(--c-brand);font-variant-numeric:tabular-nums}
.stat-card .lbl{font-size:12px;color:var(--c-mute);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.stat-bars{margin-top:18px}
.stat-bars h3{font-size:14px;color:var(--c-mute);text-transform:uppercase;letter-spacing:.5px;margin:8px 0}

/* Step commentary */
.commentary-toggle{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;font-size:13px;color:var(--c-mute);cursor:pointer;
  background:none;border:0;padding:4px 0;
}
.commentary-toggle:hover{color:var(--c-brand)}
.commentary{
  display:none;margin-top:8px;padding:10px 14px;
  background:rgba(14,102,85,.06);border-left:3px solid var(--c-brand);
  border-radius:0 8px 8px 0;font-size:14px;line-height:1.6;
}
.commentary.show{display:block}

/* Kiosk mode */
.kiosk{
  position:fixed;inset:0;z-index:90;
  background:var(--c-bg);
  display:none;flex-direction:column;justify-content:center;align-items:center;
  padding:60px 24px;
  touch-action:pan-y;
}
.kiosk.show{display:flex}
.kiosk-close{
  position:absolute;top:14px;right:14px;
  background:transparent;border:0;color:var(--c-ink);
  font-size:36px;line-height:1;cursor:pointer;padding:4px 12px;border-radius:8px;
}
.kiosk-close:hover{background:rgba(0,0,0,.06)}
.kiosk-prev,.kiosk-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--c-mute);
  font-size:48px;line-height:1;cursor:pointer;padding:8px 14px;border-radius:50%;
}
.kiosk-prev{left:8px}
.kiosk-next{right:8px}
.kiosk-prev:hover,.kiosk-next:hover{color:var(--c-brand);background:rgba(14,102,85,.08)}
.kiosk-prev:disabled,.kiosk-next:disabled{opacity:.2;cursor:default}
.kiosk-content{
  max-width:760px;width:100%;text-align:center;
  font-size:1.2em;
}
.kiosk-content h2{margin:0 0 20px;font-size:1.5em;color:var(--c-brand)}
.kiosk-content .inv-ar{font-size:2em;line-height:2.2;color:var(--c-ink);margin:18px 0}
.kiosk-content .inv-tr{font-size:1.1em;color:var(--c-brand);font-style:italic;margin:14px 0}
.kiosk-content .inv-fr{font-size:1.05em;color:var(--c-ink);margin:12px 0;max-width:600px;margin-left:auto;margin-right:auto}
.kiosk-content .inv-play{width:54px;height:54px;font-size:18px;margin:18px auto 0;display:inline-flex}
.kiosk-pos{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--c-paper);border:1px solid var(--c-line);
  padding:6px 14px;border-radius:999px;
  font-size:13px;color:var(--c-mute);font-variant-numeric:tabular-nums;
}
.kiosk .step-figure{display:none}
@media (max-width:560px){
  .kiosk-content .inv-ar{font-size:1.6em}
  .kiosk-prev,.kiosk-next{font-size:36px;padding:6px 10px}
}

/* TTS voice picker (in tools talbiya/audio area) */
.tts-row{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:12px;flex-wrap:wrap}
.tts-row select{
  flex:1;min-width:120px;padding:4px 6px;border:1px solid var(--c-line);border-radius:6px;
  background:var(--c-paper);color:var(--c-ink);font-size:12px;
}
.tts-row label{color:var(--c-mute);display:inline-flex;align-items:center;gap:4px;cursor:pointer}

/* Print: hide everything but the active screen, no nav, no buttons */
@media print {
  .topbar, .sidebar, .scrim, .update-banner, .stepmode-bar, .timeline,
  .step-actions, .fav-btn, .check, .note-toggle, .note-area,
  .progress-block, .cards, .hero, .print-btn, .back, .inv-play, .audio-row {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .screen { display: none !important; padding: 0 !important; }
  .screen.active { display: block !important; }
  .step { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; background: #fff !important; }
  .invocation { break-inside: avoid; page-break-inside: avoid; background: #fafafa !important; border-color: #ccc !important; }
  .inv-ar { color: #000 !important; }
  .glossary-list { display: block !important; }
  .glossary-card { break-inside: avoid; page-break-inside: avoid; background: #fff !important; }
  body.hide-ar [data-lang="ar"], body.hide-tr [data-lang="tr"], body.hide-fr [data-lang="fr"], body.hide-en [data-lang="en"], body.hide-wo [data-lang="wo"] {
    display: revert !important;
  }
}

.check{appearance:none;width:22px;height:22px;border:2px solid var(--c-line);border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:transparent;font-weight:700;flex-shrink:0}
.check:checked,.check.checked{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.check::after{content:"✓"}

/* Variant tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--c-line);margin-bottom:14px;padding-bottom:6px}
.tabs button{
  background:transparent;border:1px solid var(--c-line);color:var(--c-ink);
  padding:8px 12px;border-radius:999px;font-weight:600;font-size:14px
}
.tabs button.active{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}

.timeline{
  display:grid;gap:8px;margin:6px 0 14px;
}
.timeline a{
  text-decoration:none;color:var(--c-ink);
  background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:10px;padding:8px 12px;font-size:14px;
}
.timeline a:hover{border-color:var(--c-brand)}

/* Tools */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tool{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);padding:16px}
.counter{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.counter .num{font-size:64px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--c-brand);line-height:1}
.counter .lbl{color:var(--c-mute);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.counter .pill{padding:6px 12px;border-radius:999px;background:rgba(14,102,85,.1);color:var(--c-brand);font-weight:600;font-size:13px}
.counter button.big{
  width:100%;min-height:84px;font-size:18px;font-weight:700;
  background:var(--c-brand);color:#fff;border:0;border-radius:14px;
  box-shadow:0 4px 12px rgba(14,102,85,.25)
}
.counter button.big:active{transform:translateY(1px)}
.counter .row{display:flex;gap:8px;width:100%}
.counter .row button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--c-line);background:transparent}

/* Checklist */
.checklist{display:flex;flex-direction:column;gap:6px}
.checklist label{display:flex;align-items:flex-start;gap:10px;background:var(--c-paper);border:1px solid var(--c-line);padding:10px 12px;border-radius:10px;cursor:pointer}
.checklist label.done{background:rgba(14,102,85,.06);border-color:color-mix(in srgb, var(--c-brand) 30%, var(--c-line))}
.checklist label input{margin-top:3px}
.cat{margin-top:14px;font-size:14px;color:var(--c-mute);text-transform:uppercase;letter-spacing:.5px}

/* Audio talbiya */
.audio-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.audio-row button.play{
  width:44px;height:44px;border-radius:999px;border:0;background:var(--c-brand);color:#fff;font-size:18px
}

/* Mobile tweaks */
@media (max-width:560px){
  .topbar{padding:8px 10px}
  .lang-switch .chip span{display:none}
  .lang-switch .chip{padding:6px 8px}
  .lang-switch .chip input{width:14px;height:14px}
  .hero{padding:22px 18px}
  .hero h1{font-size:22px}
  .bismillah{font-size:22px}
  .step-num{flex-basis:26px;height:26px;font-size:13px}
  .inv-ar{font-size:19px}
}