/* ================= RIFQ — رفيق المعتمر ================= */

:root{
  --emerald-900:#08352c;
  --emerald-800:#0b4a3d;
  --emerald-700:#0f5f4f;
  --emerald-600:#14806a;
  --emerald-500:#1f9c80;
  --gold:#c9a227;
  --gold-soft:#e6cd7d;
  --gold-deep:#a9861b;

  --bg:#f5f1e6;
  --surface:#fffdf7;
  --surface-2:#efe9d8;
  --surface-3:#e7e0cc;
  --text:#16302a;
  --text-soft:#5d7169;
  --border:rgba(15,95,79,.16);
  --header-bg:rgba(255,253,247,.9);
  --shadow:0 18px 40px -28px rgba(8,53,44,.55);
  --shadow-lg:0 26px 60px -34px rgba(8,53,44,.7);
  --radius:22px;
}

[data-theme="dark"]{
  --bg:#07130f;
  --surface:#0d211a;
  --surface-2:#122b22;
  --surface-3:#18362b;
  --text:#eaf5f0;
  --text-soft:#9db3aa;
  --border:rgba(230,205,125,.16);
  --header-bg:rgba(9,26,21,.9);
  --shadow:0 18px 40px -26px rgba(0,0,0,.9);
  --shadow-lg:0 26px 60px -30px rgba(0,0,0,.95);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(31,156,128,.10), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(201,162,39,.10), transparent 40%);
  background-attachment:fixed;
}

button{font-family:inherit;color:inherit;}
button,input{user-select:none;}
.dua-text, .check-label, .card-sub{user-select:text;}

img{max-width:100%;display:block;}
.hidden{display:none !important;}

/* ---------- shell ---------- */
.app-shell{
  max-width:1040px;
  margin:0 auto;
  padding-bottom:calc(88px + 10px);
  min-height:100vh;
}
@media(min-width:900px){
  .app-shell{padding-bottom:32px;}
}

/* ---------- header ---------- */
.app-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;
  background:var(--header-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-mark{
  width:42px;height:42px;flex:none;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--emerald-600),var(--emerald-800));
  color:var(--gold-soft);
  border:1px solid rgba(230,205,125,.35);
  box-shadow:0 10px 22px -14px rgba(8,53,44,.9);
}
.brand-mark svg{width:22px;height:22px;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand-name{font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--text);}
.brand-tag{font-size:.72rem;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-actions{display:flex;gap:8px;flex:none;}

.icon-btn{
  width:42px;height:42px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-soft);
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.icon-btn:active{transform:scale(.94);}
.icon-btn svg{width:20px;height:20px;}
.icon-btn.small{width:36px;height:36px;border-radius:12px;font-size:.9rem;}
.icon-btn.back{background:var(--surface-2);}
.theme-glyph{font-size:1rem;line-height:1;}

/* ---------- main / screens ---------- */
main{padding:16px 16px 8px;}
.screen{display:none;}
.screen.active{display:block;animation:fadeUp .32s ease both;}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.screen-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.screen-head h2{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:.01em;}
.screen-sub{margin:2px 0 0;font-size:.78rem;color:var(--text-soft);}

.section-title{
  font-size:1rem;font-weight:700;margin:24px 0 12px;
  display:flex;align-items:center;gap:8px;color:var(--text);
}
.section-title::before{
  content:'';width:6px;height:18px;border-radius:6px;
  background:linear-gradient(180deg,var(--gold),var(--emerald-600));
}

/* ---------- hero ---------- */
.hero{
  position:relative;border-radius:26px;overflow:hidden;
  min-height:280px;display:flex;align-items:flex-end;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(230,205,125,.35);
  background:linear-gradient(160deg,#0b4a3d,#07130f);
  margin-bottom:18px;
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.92;
}
.hero-img.img-failed{display:none;}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,19,15,.15) 0%,rgba(7,19,15,.55) 55%,rgba(7,19,15,.92) 100%);
}
.hero-content{position:relative;z-index:2;padding:22px 20px;width:100%;color:#f4f8f5;}
.hero-kicker{margin:0 0 2px;font-size:.75rem;letter-spacing:.22em;color:var(--gold-soft);}
.hero-title{
  margin:0;font-family:'Amiri',serif;font-size:2.6rem;font-weight:700;line-height:1.05;
  color:#fff;text-shadow:0 8px 24px rgba(0,0,0,.45);
}
.hero-sub{margin:6px 0 16px;font-size:.9rem;color:#d7e6df;max-width:30ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 20px;border-radius:16px;
  border:1px solid transparent;
  font-weight:600;font-size:.95rem;
  cursor:pointer;text-align:center;
  transition:transform .14s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn.big{min-height:58px;font-size:1.05rem;width:100%;}
.btn.round{border-radius:999px;min-height:46px;padding:0 22px;font-weight:700;}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#2b2104;
  box-shadow:0 16px 30px -16px rgba(201,162,39,.95);
}
.btn-emerald{
  background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800));
  color:#eafaf3;
  box-shadow:0 16px 30px -16px rgba(20,128,106,.95);
}
.btn-ghost{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.45);
  color:#fff;
  backdrop-filter:blur(8px);
}
.btn-outline{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
.btn-ghost-dark{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--text-soft);
}
.btn-danger{
  background:rgba(190,60,60,.12);
  border-color:rgba(190,60,60,.4);
  color:#b8483f;
}
[data-theme="dark"] .btn-danger{color:#ff9c93;}

.actions-row{display:flex;gap:10px;margin:18px 0 8px;}
.actions-row .btn{flex:1;}

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.card-title{margin:0 0 8px;font-size:.98rem;font-weight:700;display:flex;align-items:center;gap:6px;}
.card-sub{margin:0;font-size:.82rem;color:var(--text-soft);}
.list-tight{margin:0;padding-inline-start:18px;font-size:.88rem;color:var(--text);}
.list-tight li{margin-bottom:7px;}
.list-tight li::marker{color:var(--emerald-600);}

.grid-2{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr;gap:14px;}}

.media-card{
  border-radius:var(--radius);overflow:hidden;margin-bottom:14px;
  border:1px solid var(--border);box-shadow:var(--shadow);
  background:var(--surface-2);max-height:230px;
}
.media-card img{width:100%;height:100%;max-height:230px;object-fit:cover;}
.media-card img.img-failed{display:none;}

/* ---------- progress ---------- */
.progress-card{padding:16px;}
.progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.progress-title{font-weight:700;font-size:.92rem;}
.progress-label{font-size:.78rem;color:var(--text-soft);}
.progress-track{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.progress-bar{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--emerald-600),var(--gold));
  transition:width .5s cubic-bezier(.34,1.2,.64,1);
}
.progress-hint{margin:10px 0 0;font-size:.78rem;color:var(--text-soft);}

/* ---------- stage grid ---------- */
.stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(min-width:760px){.stage-grid{grid-template-columns:repeat(4,1fr);}}
.stage-card{
  position:relative;text-align:start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:14px 12px;
  cursor:pointer;display:flex;flex-direction:column;gap:4px;
  transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow:var(--shadow);
}
.stage-card:active{transform:scale(.97);}
.stage-card.done{border-color:rgba(31,156,128,.5);}
.stage-card.current{
  border-color:rgba(201,162,39,.75);
  box-shadow:0 0 0 2px rgba(201,162,39,.25), var(--shadow);
}
.stage-ico{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);font-size:1.05rem;margin-bottom:4px;
}
.stage-card.done .stage-ico{background:rgba(31,156,128,.18);}
.stage-card.current .stage-ico{background:rgba(201,162,39,.2);}
.stage-name{font-weight:700;font-size:.9rem;}
.stage-desc{font-size:.72rem;color:var(--text-soft);line-height:1.45;}
.stage-badge{
  position:absolute;top:10px;inset-inline-end:10px;
  font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:rgba(31,156,128,.15);color:var(--emerald-600);
}
[data-theme="dark"] .stage-badge{color:#5fd3b3;}
.stage-badge.gold{background:rgba(201,162,39,.18);color:var(--gold-deep);}
[data-theme="dark"] .stage-badge.gold{color:var(--gold-soft);}

/* ---------- quick ---------- */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(min-width:760px){.quick-grid{grid-template-columns:repeat(4,1fr);}}
.quick-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:14px 12px;cursor:pointer;text-align:start;
  box-shadow:var(--shadow);transition:transform .16s ease;
}
.quick-card:active{transform:scale(.97);}
.quick-icon{font-size:1.3rem;}
.quick-title{font-weight:700;font-size:.86rem;}
.quick-sub{font-size:.7rem;color:var(--text-soft);}

/* ---------- lists / chips ---------- */
.chips-list{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-size:.78rem;padding:6px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
}
.chip.danger{background:rgba(190,60,60,.1);border-color:rgba(190,60,60,.28);color:#b8483f;}
[data-theme="dark"] .chip.danger{color:#ff9c93;}

/* ---------- checklist ---------- */
.checklist{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.check-item{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:12px;cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.check-item input{position:absolute;opacity:0;pointer-events:none;}
.check-box{
  width:22px;height:22px;flex:none;border-radius:7px;
  border:2px solid var(--border);background:var(--surface);
  display:grid;place-items:center;margin-top:2px;
  transition:background .18s ease, border-color .18s ease;
}
.check-box::after{
  content:'';width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .18s ease;margin-top:-2px;
}
.check-item input:checked + .check-box{
  background:linear-gradient(135deg,var(--emerald-500),var(--emerald-700));
  border-color:var(--emerald-600);
}
.check-item input:checked + .check-box::after{transform:rotate(-45deg) scale(1);}
.check-item input:checked ~ .check-label{color:var(--text-soft);text-decoration:line-through;}
.check-label{font-size:.86rem;line-height:1.5;}

/* ---------- segmented ---------- */
.seg{
  display:flex;gap:6px;background:var(--surface-2);
  border-radius:14px;padding:4px;margin-bottom:10px;
}
.seg-wrap{flex-wrap:wrap;}
.seg-btn{
  flex:1;min-height:40px;padding:0 12px;border:none;border-radius:11px;
  background:transparent;color:var(--text-soft);font-weight:600;font-size:.84rem;
  cursor:pointer;transition:background .2s ease,color .2s ease;
  white-space:nowrap;
}
.seg-btn.active{background:var(--surface);color:var(--emerald-700);box-shadow:var(--shadow);}
[data-theme="dark"] .seg-btn.active{color:#6fe3c1;}

.cloth-panel{margin-top:4px;}

/* ---------- counters ---------- */
.counter-card{
  background:var(--surface);border:1px solid var(--border);border-radius:26px;
  padding:20px 16px;box-shadow:var(--shadow-lg);margin-bottom:14px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.counter-ring{
  width:176px;height:176px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:conic-gradient(var(--emerald-600) calc(var(--p,0) * 1%), var(--surface-2) 0);
  transition:background .4s ease;
}
.counter-ring::after{
  content:'';position:absolute;inset:13px;border-radius:50%;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
}
.counter-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;gap:0;}
.counter-num{font-size:2.9rem;font-weight:700;line-height:1;color:var(--emerald-700);font-variant-numeric:tabular-nums;}
[data-theme="dark"] .counter-num{color:#6fe3c1;}
.counter-num.sm{font-size:1.9rem;}
.counter-of{font-size:.72rem;color:var(--text-soft);}
.counter-meta{text-align:center;}
.counter-status{margin:0;font-weight:700;font-size:.95rem;}
.counter-remaining{margin:2px 0 0;font-size:.78rem;color:var(--text-soft);}

.dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;}
.dot{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.66rem;font-weight:700;
  background:var(--surface-2);color:var(--text-soft);
  border:1px solid var(--border);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.dot.done{background:linear-gradient(135deg,var(--emerald-500),var(--emerald-700));color:#eafaf3;border-color:transparent;}
.dot.now{background:rgba(201,162,39,.22);color:var(--gold-deep);border-color:rgba(201,162,39,.6);transform:scale(1.12);}
[data-theme="dark"] .dot.now{color:var(--gold-soft);}

.counter-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px;}
.counter-actions .btn{min-height:48px;font-size:.86rem;padding:0 10px;}
.counter-actions #btn-tawaf-done,
.counter-actions #btn-sai-done{grid-column:1 / -1;grid-row:1;}
.counter-actions #btn-tawaf-start,
.counter-actions #btn-sai-start{grid-row:2;}

.finish-box{
  width:100%;margin-top:10px;padding:14px;border-radius:16px;
  background:rgba(31,156,128,.1);border:1px solid rgba(31,156,128,.35);
  text-align:center;
}
.finish-title{margin:0;font-weight:700;font-size:.95rem;color:var(--emerald-700);}
[data-theme="dark"] .finish-title{color:#6fe3c1;}
.finish-sub{margin:4px 0 12px;font-size:.78rem;color:var(--text-soft);}

/* ---------- sai track ---------- */
.track{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.track-end{font-size:.76rem;font-weight:700;color:var(--text-soft);white-space:nowrap;}
.track-rail{
  position:relative;flex:1;height:10px;border-radius:999px;
  background:linear-gradient(90deg,rgba(31,156,128,.25),rgba(201,162,39,.25));
  border:1px solid var(--border);
}
.track-marker{
  position:absolute;top:50%;right:0;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  border:2px solid var(--surface);
  transform:translate(50%,-50%);
  transition:right .45s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 4px 12px -4px rgba(201,162,39,.9);
}
.counter-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}

/* ---------- dua cards ---------- */
.dua-highlight{background:linear-gradient(160deg,var(--surface),var(--surface-2));}
.dua-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.badge{
  font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--text-soft);border:1px solid var(--border);
}
.badge-gold{background:rgba(201,162,39,.16);color:var(--gold-deep);border-color:rgba(201,162,39,.35);}
[data-theme="dark"] .badge-gold{color:var(--gold-soft);}
.badge-quran{background:rgba(31,156,128,.14);color:var(--emerald-700);border-color:rgba(31,156,128,.3);}
[data-theme="dark"] .badge-quran{color:#6fe3c1;}

.dua-text{
  font-family:'Amiri',serif;
  font-size:1.22rem;line-height:2.05;
  margin:0 0 10px;color:var(--text);
}
.dua-source{margin:0;font-size:.74rem;color:var(--text-soft);}
.dua-note{margin:8px 0 0;font-size:.78rem;color:var(--text-soft);line-height:1.6;}

.search-row{margin-bottom:12px;}
#duas-search{
  width:100%;min-height:50px;border-radius:16px;padding:0 16px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-size:.92rem;font-family:inherit;
  outline:none;transition:border-color .2s ease, box-shadow .2s ease;
}
#duas-search:focus{border-color:var(--emerald-600);box-shadow:0 0 0 3px rgba(31,156,128,.16);}

.cat-scroll{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;
  scrollbar-width:none;
}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-btn{
  flex:none;padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--surface);border:1px solid var(--border);color:var(--text-soft);
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.cat-btn.active{
  background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800));
  color:#eafaf3;border-color:transparent;
}

.notice-strip{
  display:flex;gap:8px;align-items:flex-start;
  background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.3);
  border-radius:14px;padding:10px 12px;font-size:.76rem;line-height:1.6;
  color:var(--text-soft);margin-bottom:14px;
}

.dua-list{display:flex;flex-direction:column;gap:12px;}
.dua-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:16px;box-shadow:var(--shadow);
}
.dua-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.dua-card-head h3{margin:0;font-size:.95rem;font-weight:700;}
.dua-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap;}
.dua-actions{display:flex;gap:6px;flex-wrap:wrap;}
.mini-btn{
  min-height:38px;padding:0 12px;border-radius:11px;font-size:.76rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  cursor:pointer;transition:transform .14s ease,background .2s ease;
  display:inline-flex;align-items:center;gap:5px;
}
.mini-btn:active{transform:scale(.95);}
.mini-btn.saved{background:rgba(31,156,128,.16);border-color:rgba(31,156,128,.45);color:var(--emerald-700);}
[data-theme="dark"] .mini-btn.saved{color:#6fe3c1;}
details.meaning{margin-top:10px;font-size:.8rem;color:var(--text-soft);}
details.meaning summary{
  cursor:pointer;font-weight:600;color:var(--emerald-700);
  list-style:none;display:inline-flex;align-items:center;gap:5px;
}
[data-theme="dark"] details.meaning summary{color:#6fe3c1;}
details.meaning summary::-webkit-details-marker{display:none;}
details.meaning summary::before{content:'▾';font-size:.8rem;}
details.meaning p{margin:6px 0 0;line-height:1.7;}

/* ---------- voice ---------- */
.now-playing{background:linear-gradient(150deg,var(--surface),var(--surface-2));}
.np-label{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);}
[data-theme="dark"] .np-label{color:var(--gold-soft);}
.np-text{margin:6px 0 14px;font-size:.92rem;line-height:1.8;min-height:2.6em;}
.np-actions{display:flex;gap:8px;}
.np-actions .btn{flex:1;min-height:46px;font-size:.86rem;}

.voice-list{display:flex;flex-direction:column;gap:10px;}
.voice-item{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:14px;box-shadow:var(--shadow);
}
.voice-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.voice-item-head h3{margin:0;font-size:.92rem;font-weight:700;}
.voice-item p{margin:8px 0 0;font-size:.82rem;color:var(--text-soft);line-height:1.75;}

/* ---------- chat ---------- */
.chat-log{
  display:flex;flex-direction:column;gap:10px;
  min-height:160px;max-height:46vh;overflow-y:auto;
  padding:4px 2px 10px;
}
.chat-empty{
  text-align:center;padding:24px 12px;color:var(--text-soft);font-size:.84rem;
  background:var(--surface);border:1px dashed var(--border);border-radius:18px;
}
.bubble{
  max-width:88%;padding:11px 14px;border-radius:16px;font-size:.87rem;line-height:1.75;
  white-space:pre-wrap;word-break:break-word;
}
.bubble.user{align-self:flex-start;background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800));color:#eafaf3;border-bottom-inline-start-radius:5px;}
.bubble.assistant{align-self:flex-end;background:var(--surface);border:1px solid var(--border);color:var(--text);}
.bubble.error{align-self:flex-end;background:rgba(190,60,60,.1);border:1px solid rgba(190,60,60,.35);color:#b8483f;}
[data-theme="dark"] .bubble.error{color:#ff9c93;}
.bubble.typing{color:var(--text-soft);font-style:italic;}

.chat-suggestions{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none;}
.chat-suggestions::-webkit-scrollbar{display:none;}
.sugg{
  flex:none;padding:8px 13px;border-radius:999px;font-size:.76rem;font-weight:600;
  background:var(--surface);border:1px solid var(--border);color:var(--text-soft);
  cursor:pointer;white-space:nowrap;
}
.sugg:active{transform:scale(.96);}

.chat-input-row{display:flex;gap:8px;align-items:stretch;}
#chat-input{
  flex:1;min-height:50px;border-radius:16px;padding:0 14px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-family:inherit;font-size:.9rem;outline:none;min-width:0;
}
#chat-input:focus{border-color:var(--emerald-600);box-shadow:0 0 0 3px rgba(31,156,128,.14);}
#chat-send{min-width:104px;font-size:.84rem;padding:0 14px;}
.mini-note{font-size:.7rem;color:var(--text-soft);margin:10px 0 0;line-height:1.6;}

.faq-list{display:flex;flex-direction:column;gap:8px;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.faq-q{
  width:100%;text-align:start;background:transparent;border:none;
  padding:14px;font-size:.86rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);
}
.faq-q .chev{transition:transform .2s ease;color:var(--text-soft);font-size:.8rem;}
.faq-item.open .chev{transform:rotate(180deg);}
.faq-a{padding:0 14px 14px;font-size:.82rem;color:var(--text-soft);line-height:1.8;display:none;}
.faq-item.open .faq-a{display:block;}

/* ---------- delete steps ---------- */
.delete-steps{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px;}
.step-item{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:12px;font-size:.82rem;line-height:1.75;
  color:var(--text);
}
.step-item strong{display:block;margin-bottom:2px;font-size:.85rem;font-weight:700;color:var(--text);}
.step-num{
  flex:none;width:24px;height:24px;border-radius:8px;margin-top:1px;
  display:grid;place-items:center;font-size:.74rem;font-weight:700;
  background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800));
  color:#eafaf3;
}

/* ---------- misc ---------- */
.field-row{margin:6px 0 8px;}
input[type="range"]{
  width:100%;height:34px;background:transparent;-webkit-appearance:none;appearance:none;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--emerald-600),var(--gold));
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:3px solid var(--emerald-600);margin-top:-8px;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--emerald-600),var(--gold));}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);border:3px solid var(--emerald-600);}

.field-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.field-actions .btn{min-height:46px;font-size:.82rem;flex:1 1 auto;}

.summary-card{background:linear-gradient(160deg,var(--surface),var(--surface-2));text-align:center;}
.summary-card h3{margin:0 0 6px;font-size:1.05rem;}
.summary-card p{margin:2px 0;font-size:.85rem;color:var(--text-soft);}

.takbir-card{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.notice-card{background:linear-gradient(160deg,var(--surface),rgba(201,162,39,.07));}

/* ---------- tabbar ---------- */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:70;
  display:flex;justify-content:space-around;align-items:stretch;
  padding:6px 6px calc(6px + 0px);
  background:var(--header-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  box-shadow:0 -12px 30px -22px rgba(8,53,44,.8);
}
.tab{
  flex:1;min-height:56px;border:none;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--text-soft);font-size:.66rem;font-weight:600;
  cursor:pointer;border-radius:14px;transition:color .2s ease,background .2s ease;
  padding:4px 2px;
}
.tab svg{width:22px;height:22px;}
.tab.active{color:var(--emerald-700);background:rgba(31,156,128,.1);}
[data-theme="dark"] .tab.active{color:#6fe3c1;}

@media(min-width:900px){
  .tabbar{
    position:static;max-width:520px;margin:24px auto 0;
    border-radius:20px;border:1px solid var(--border);
    box-shadow:var(--shadow);
  }
  .tab{min-height:60px;flex-direction:row;gap:7px;font-size:.8rem;}
  .tab svg{width:18px;height:18px;}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(96px);transform:translate(-50%,16px);
  background:var(--emerald-800);color:#eafaf3;
  padding:12px 18px;border-radius:14px;font-size:.84rem;font-weight:600;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  z-index:120;max-width:88vw;text-align:center;
  border:1px solid rgba(230,205,125,.35);
}
.toast.show{opacity:1;transform:translate(-50%,0);}
@media(min-width:900px){.toast{bottom:24px;}}

/* ---------- motion preferences ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------- focus ---------- */
button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid rgba(31,156,128,.55);
  outline-offset:2px;
}

/* ================= v2 — مكتبة وأماكن وتحديات ومواقيت ================= */
body.no-scroll{overflow:hidden;}

/* --- figures --- */
.fig-row{display:flex;align-items:center;gap:12px;margin:6px 0 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:10px;}
.ihram-fig{width:86px;height:120px;flex:none;}
.fig-note{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--text-soft);line-height:1.6;}
.fig-note strong{color:var(--text);font-size:.86rem;}

/* --- library / places cards --- */
.lib-card{display:flex;align-items:stretch;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:8px;margin-bottom:10px;box-shadow:var(--shadow);}
.lib-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;background:transparent;border:none;text-align:start;cursor:pointer;padding:6px;border-radius:12px;transition:background .18s ease;}
.lib-main:active{background:var(--surface-2);}
.lib-year{font-size:.68rem;font-weight:700;color:var(--gold-deep);letter-spacing:.02em;}
[data-theme="dark"] .lib-year{color:var(--gold-soft);}
.lib-title{font-weight:700;font-size:.92rem;color:var(--text);}
.lib-sub{font-size:.78rem;color:var(--text-soft);line-height:1.65;}
.fav-btn{flex:none;width:44px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);font-size:1.1rem;cursor:pointer;transition:transform .14s ease,background .2s ease;}
.fav-btn:active{transform:scale(.93);}
.fav-btn.on{background:rgba(201,162,39,.18);color:var(--gold-deep);border-color:rgba(201,162,39,.5);}
[data-theme="dark"] .fav-btn.on{color:var(--gold-soft);}

.place-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);}
.place-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.place-head h3{margin:0;font-size:.95rem;font-weight:700;}
.place-tag{font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(201,162,39,.15);color:var(--gold-deep);border:1px solid rgba(201,162,39,.32);white-space:nowrap;}
[data-theme="dark"] .place-tag{color:var(--gold-soft);}
.place-sum{margin:8px 0 10px;font-size:.82rem;color:var(--text-soft);line-height:1.75;}
.place-actions{display:flex;gap:8px;flex-wrap:wrap;}
.place-actions .btn{min-height:44px;font-size:.8rem;flex:1 1 auto;padding:0 12px;}

/* --- sheet --- */
.sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(6,20,16,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.sheet-panel{position:relative;width:100%;max-width:640px;max-height:88vh;background:var(--surface);border-radius:24px 24px 0 0;border:1px solid var(--border);display:flex;flex-direction:column;animation:sheetUp .28s cubic-bezier(.2,.8,.3,1) both;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5);}
@keyframes sheetUp{from{transform:translateY(26px);opacity:.5}to{transform:translateY(0);opacity:1}}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);}
.sheet-grip{width:44px;height:4px;border-radius:999px;background:var(--surface-3);}
.sheet-body{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sheet-body h3{margin:6px 0 4px;font-size:1.1rem;}
.sheet-sub{margin:0 0 12px;font-size:.74rem;color:var(--text-soft);}
.sheet-text{font-size:.86rem;line-height:1.85;color:var(--text);margin:0 0 12px;}
.sheet-block{margin-bottom:14px;}
.sheet-block h4{margin:0 0 6px;font-size:.84rem;font-weight:700;color:var(--emerald-700);}
[data-theme="dark"] .sheet-block h4{color:#6fe3c1;}
.sheet-block p{margin:0;font-size:.83rem;line-height:1.8;color:var(--text-soft);}
.sheet-block ul{margin:0;padding-inline-start:18px;font-size:.83rem;line-height:1.85;color:var(--text-soft);}
.ayah{font-family:'Amiri',serif;font-size:1.18rem;line-height:2.1;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:10px;}
.ayah-ref{display:block;margin-top:6px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.7rem;color:var(--gold-deep);}
[data-theme="dark"] .ayah-ref{color:var(--gold-soft);}
.ayah-meaning{display:block;margin-top:4px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.76rem;color:var(--text-soft);line-height:1.7;}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.sheet-actions .btn{flex:1 1 auto;min-height:46px;font-size:.82rem;text-decoration:none;}

/* --- search --- */
.search-overlay{position:fixed;inset:0;z-index:220;background:var(--bg);display:flex;flex-direction:column;animation:fadeUp .2s ease both;}
.search-panel{display:flex;flex-direction:column;height:100%;max-width:760px;margin:0 auto;width:100%;}
.search-bar{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--border);background:var(--header-bg);}
#search-input{flex:1;min-height:48px;border-radius:14px;padding:0 14px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.9rem;min-width:0;outline:none;}
#search-input:focus{border-color:var(--emerald-600);box-shadow:0 0 0 3px rgba(31,156,128,.14);}
.search-results{padding:12px;overflow-y:auto;flex:1;}
.sr-row{display:block;width:100%;text-align:start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:8px;cursor:pointer;}
.sr-row .sr-type{font-size:.66rem;font-weight:700;color:var(--gold-deep);}
[data-theme="dark"] .sr-row .sr-type{color:var(--gold-soft);}
.sr-row .sr-title{display:block;font-size:.88rem;font-weight:700;margin:2px 0;}
.sr-row .sr-snip{display:block;font-size:.76rem;color:var(--text-soft);line-height:1.65;}

/* --- quiz --- */
.quiz-hero{background:linear-gradient(150deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:22px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px;}
.quiz-stats{display:flex;gap:10px;margin-bottom:12px;}
.stat-pill{flex:1;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 6px;}
.stat-pill b{display:block;font-size:1.25rem;color:var(--emerald-700);font-variant-numeric:tabular-nums;}
[data-theme="dark"] .stat-pill b{color:#6fe3c1;}
.stat-pill span{font-size:.68rem;color:var(--text-soft);}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.cat-tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 12px;text-align:start;cursor:pointer;font-weight:700;font-size:.86rem;color:var(--text);transition:transform .15s ease,border-color .2s ease;}
.cat-tile:active{transform:scale(.97);}
.cat-tile span{display:block;font-weight:500;font-size:.7rem;color:var(--text-soft);margin-top:2px;}
.badge-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.bdg{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);}
.bdg.on{background:rgba(201,162,39,.16);border-color:rgba(201,162,39,.45);color:var(--gold-deep);}
[data-theme="dark"] .bdg.on{color:var(--gold-soft);}

.quiz-top{display:flex;align-items:center;justify-content:space-between;font-size:.76rem;font-weight:700;color:var(--text-soft);margin-bottom:8px;}
.quiz-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:16px;}
.quiz-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--emerald-600),var(--gold));transition:width .3s ease;}
.quiz-q{margin:0 0 14px;font-size:1.02rem;font-weight:700;line-height:1.7;}
.q-opt{display:block;width:100%;text-align:start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin-bottom:8px;font-size:.86rem;font-weight:600;color:var(--text);cursor:pointer;transition:transform .13s ease,background .2s ease,border-color .2s ease;}
.q-opt:active{transform:scale(.99);}
.q-opt.correct{background:rgba(31,156,128,.16);border-color:rgba(31,156,128,.6);color:var(--emerald-700);}
[data-theme="dark"] .q-opt.correct{color:#6fe3c1;}
.q-opt.wrong{background:rgba(190,60,60,.12);border-color:rgba(190,60,60,.5);color:#b8483f;}
[data-theme="dark"] .q-opt.wrong{color:#ff9c93;}
.q-opt:disabled{cursor:default;}
.quiz-fb{margin-top:10px;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);font-size:.82rem;line-height:1.75;color:var(--text-soft);}
.quiz-fb b{color:var(--text);}

/* --- prayer --- */
.prayer-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px;}
.prayer-loc{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.prayer-loc strong{font-size:.95rem;}
.prayer-loc span{font-size:.72rem;color:var(--text-soft);}
.next-prayer{background:linear-gradient(140deg,var(--emerald-700),var(--emerald-900));color:#eafaf3;border-radius:18px;padding:14px;text-align:center;margin-bottom:12px;border:1px solid rgba(230,205,125,.3);}
.next-prayer b{display:block;font-size:1.15rem;color:var(--gold-soft);}
.next-prayer span{font-size:.76rem;opacity:.9;}
.pt-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);}
.pt-row:last-child{border-bottom:none;}
.pt-name{flex:1;font-size:.88rem;font-weight:600;}
.pt-time{font-size:.92rem;font-weight:700;color:var(--emerald-700);font-variant-numeric:tabular-nums;}
[data-theme="dark"] .pt-time{color:#6fe3c1;}
.pt-bell{width:42px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-soft);font-size:.9rem;cursor:pointer;flex:none;}
.pt-bell.on{background:rgba(201,162,39,.18);border-color:rgba(201,162,39,.5);color:var(--gold-deep);}
[data-theme="dark"] .pt-bell.on{color:var(--gold-soft);}

.qibla-wrap{display:flex;align-items:center;gap:14px;}
.qibla-dial{width:132px;height:132px;flex:none;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 50%,var(--surface),var(--surface-2));border:1px solid var(--border);box-shadow:inset 0 0 0 6px var(--surface-2);}
.qibla-dial .n{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:.66rem;color:var(--text-soft);font-weight:700;}
.needle{position:absolute;inset:0;display:grid;place-items:center;transition:transform .25s ease;}
.needle i{display:block;width:4px;height:52px;border-radius:999px;background:linear-gradient(180deg,var(--gold),var(--emerald-700));transform:translateY(-26px);}
.needle::after{content:'🕋';position:absolute;top:6px;font-size:.85rem;}
.qibla-info{font-size:.8rem;color:var(--text-soft);line-height:1.75;}
.qibla-info b{color:var(--text);font-size:.95rem;}

/* --- safety --- */
.safe-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);}
.safe-card h3{margin:0 0 8px;font-size:.94rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.safe-card ul{margin:0;padding-inline-start:18px;font-size:.83rem;line-height:1.85;color:var(--text-soft);}
.safe-card ul li::marker{color:var(--emerald-600);}
.tel-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.tel-btn{flex:1 1 44%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px 12px;font-size:.8rem;font-weight:600;text-decoration:none;color:var(--text);min-height:46px;}
.tel-btn b{color:var(--emerald-700);font-variant-numeric:tabular-nums;}
[data-theme="dark"] .tel-btn b{color:#6fe3c1;}

/* --- kids --- */
.kid-card{background:linear-gradient(150deg,#fff7e3,#fdf0d5);border:2px solid #e6cd7d;border-radius:20px;padding:14px;margin-bottom:12px;color:#4a3b12;}
[data-theme="dark"] .kid-card{background:linear-gradient(150deg,#1c2e26,#243b31);border-color:rgba(230,205,125,.45);color:#f1e9cf;}
.kid-card h3{margin:0 0 6px;font-size:1rem;font-weight:700;}
.kid-card p{margin:0;font-size:.85rem;line-height:1.85;}
.kid-actions{display:flex;gap:8px;margin-top:10px;}
.kid-actions .btn{flex:1;min-height:44px;font-size:.82rem;}
.kid-q{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow);}
.kid-q h4{margin:0 0 10px;font-size:.9rem;}
.kid-opt{display:block;width:100%;text-align:start;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:7px;font-size:.84rem;font-weight:600;color:var(--text);cursor:pointer;}
.kid-opt.ok{background:rgba(31,156,128,.18);border-color:rgba(31,156,128,.6);}
.kid-opt.no{background:rgba(190,60,60,.12);border-color:rgba(190,60,60,.5);}
.kid-stars{font-size:.9rem;color:var(--gold-deep);margin-top:8px;font-weight:700;}
[data-theme="dark"] .kid-stars{color:var(--gold-soft);}