/* بيان — هُويّة فاتحة كريميّة + أكسنت تيل + ذهبيّ (نمط ترتيل، خطّ Tajawal). */
:root{
  --bg:#f4f1e8; --panel:#fffdf7; --panel2:#faf6ec;
  --ink:#172a27; --muted:#6b7a76; --line:#e7e0cf;
  --teal:#0e6b60; --teal2:#128577; --teal-soft:#d7ede9;
  --gold:#b8862f; --gold-soft:#f2e6c8;
  --red:#c0392b; --red-soft:#f8e0dc; --red-line:#e0a59d;
  --reading:#0e6b60; --reading-soft:#cfe8e3;
  --shadow:0 6px 22px rgba(20,50,45,.08);
  --radius:18px;
  --qfont:"Amiri Quran", "Traditional Arabic", "Scheherazade New", serif;
  --uifont:"Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1613; --panel:#16211d; --panel2:#121a17; --ink:#eef4f1; --muted:#93a49f; --line:#243430;
    --teal:#1aa392; --teal2:#22b7a3; --teal-soft:#123330; --gold:#d9a94a; --gold-soft:#332a12;
    --red:#ff6b5b; --red-soft:#3a1d18; --red-line:#7a3830; --reading:#22b7a3; --reading-soft:#123330;
    --shadow:0 6px 22px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--uifont);
  min-height:100dvh; line-height:1.6; overflow-x:hidden;
}
#app{max-width:820px; margin:0 auto; padding:0 14px 120px; min-height:100dvh;}

/* شريط علويّ */
#topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:14px 4px 12px; background:linear-gradient(var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(2px);
  backdrop-filter:saturate(1.1) blur(2px);
}
#topTitle{font-weight:700; font-size:1.25rem; color:var(--teal); flex:1;}
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
}
.icon-btn:hover{background:var(--panel2);}
.pill-btn{
  border:1px solid var(--teal); color:var(--teal); background:transparent;
  border-radius:999px; padding:7px 14px; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.pill-btn:hover{background:var(--teal-soft);}
.pill-btn.active{background:var(--teal); color:#fff;}

/* الصفحة الرئيسيّة */
.hero{
  text-align:center; padding:26px 16px 10px;
}
.hero h1{font-size:2.1rem; margin:.2em 0 .1em; color:var(--teal); letter-spacing:.5px;}
.hero p{color:var(--muted); margin:.2em 0 0; font-size:.98rem;}
.hero .bsm{font-family:var(--qfont); font-size:1.35rem; color:var(--gold); margin-bottom:.3em;}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
@media (min-width:560px){ .grid{grid-template-columns:1fr 1fr;} }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s;
  position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-2px); border-color:var(--teal);}
.card .num{
  position:absolute; inset-inline-end:12px; top:10px; width:30px; height:30px; border-radius:9px;
  background:var(--gold-soft); color:var(--gold); display:grid; place-items:center; font-weight:700; font-size:.85rem;
}
.card .sname{font-family:var(--qfont); font-size:1.7rem; color:var(--ink); margin-bottom:2px;}
.card .smeta{color:var(--muted); font-size:.82rem;}
.card .slatin{color:var(--teal); font-size:.8rem; font-weight:600; margin-top:6px;}

/* شارة التلميح تحت الرئيسيّة */
.tip{
  margin-top:22px; background:var(--panel2); border:1px dashed var(--line); border-radius:14px;
  padding:14px 16px; color:var(--muted); font-size:.86rem; line-height:1.9;
}
.tip b{color:var(--ink);}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:.82rem;}
.dot{width:12px; height:12px; border-radius:4px; display:inline-block;}
.dot.err{background:var(--red);}
.dot.now{background:var(--reading);}
.dot.ok{background:var(--teal-soft); border:1px solid var(--teal);}

/* تابع من حيث وقفت */
.continue-card{
  display:flex; align-items:center; gap:14px; margin-top:16px; cursor:pointer;
  background:linear-gradient(135deg, var(--teal-soft), var(--panel)); border:1px solid var(--teal);
  border-radius:var(--radius); padding:14px 18px; box-shadow:var(--shadow); color:var(--teal);
  transition:transform .12s;
}
.continue-card:hover{transform:translateY(-2px);}
.continue-card .cc-lbl{font-size:.8rem; color:var(--muted);}
.continue-card .cc-s{font-family:var(--qfont); font-size:1.5rem; color:var(--ink);}

/* شارة أفضل نتيجة على البطاقة */
.card .best-badge{
  position:absolute; inset-inline-start:12px; top:12px; font-size:.72rem; font-weight:700;
  color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:2px 7px;
}
.card .best-badge.good{ color:var(--teal); border-color:var(--teal); background:var(--teal-soft); }

/* صفّ الختمة + زرّ اللوحة */
.khatma-row{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap;}
.kh-info{flex:1; min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow);}
.kh-lbl{font-size:.82rem; color:var(--muted); margin-bottom:6px;}
.kh-bar{height:8px; background:var(--line); border-radius:99px; overflow:hidden;}
.kh-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--gold)); border-radius:99px; transition:width .4s;}
.kh-n{font-size:.8rem; color:var(--ink); margin-top:6px; font-weight:600;}
.dash-btn{
  border:1px solid var(--teal); color:var(--teal); background:var(--panel); border-radius:14px;
  padding:14px 18px; font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow);
}
.dash-btn:hover{background:var(--teal-soft);}

/* لوحة الإحصاءات */
.statwrap{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.scard{flex:1; min-width:72px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; box-shadow:var(--shadow);}
.scard-n{font-size:1.5rem; font-weight:700; color:var(--teal);}
.scard-l{font-size:.74rem; color:var(--muted); margin-top:3px;}
.sec-h{margin:22px 0 10px; font-weight:700; color:var(--ink); font-size:.95rem;}
.trend{display:flex; align-items:flex-end; gap:2px; height:64px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px; box-shadow:var(--shadow);}
.tbar{flex:1; min-width:3px; border-radius:3px 3px 0 0; background:var(--line);}
.tbar.g{background:var(--teal);} .tbar.m{background:var(--gold);} .tbar.b{background:var(--red);}
.tbar.none{background:var(--line); opacity:.5;}

/* عرض السورة */
.surah-head{text-align:center; padding:8px 0 4px;}
.surah-head .sname{font-family:var(--qfont); font-size:2.1rem; color:var(--teal);}
.surah-head .smeta{color:var(--muted); font-size:.85rem;}
.bism{font-family:var(--qfont); font-size:1.5rem; text-align:center; color:var(--gold); margin:6px 0 16px;}

.ayah{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px 12px; margin-bottom:14px; box-shadow:var(--shadow);
}
.ayah-text{
  font-family:var(--qfont); font-size:2rem; line-height:2.5; text-align:justify; text-align-last:center;
  direction:rtl; word-spacing:2px;
}
.ayah-num{
  display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; padding:0 .3em;
  border-radius:50%; border:1.5px solid var(--gold); color:var(--gold);
  font-family:var(--uifont); font-size:.9rem; font-weight:700; margin-inline-start:6px; vertical-align:middle;
}
.word{
  padding:2px 3px; border-radius:7px; cursor:default; transition:background .15s, color .15s;
  position:relative;
}
.word.read{ color:var(--ink); }
.word.reading{
  background:var(--reading-soft); box-shadow:inset 0 -3px 0 var(--reading);
}
.word.err{
  color:var(--red); background:var(--red-soft); box-shadow:inset 0 -3px 0 var(--red);
}
.word.err.reading{ box-shadow:inset 0 -3px 0 var(--red); }
/* دمج الإدغام في النصّ العاديّ: الكلمتان تلتصقان بلا فراغٍ ولا حوافّ عند المفصل (تبدوان كلمةً واحدة). */
.word.join{ padding-inline-end:0; border-start-end-radius:0; border-end-end-radius:0; }
.word.join + .word{ padding-inline-start:0; border-start-start-radius:0; border-end-start-radius:0; }

/* ملاحظات الأخطاء تحت الآية */
.notes{margin-top:10px; display:flex; flex-direction:column; gap:7px;}
.note{
  display:flex; align-items:flex-start; gap:9px; background:var(--red-soft);
  border:1px solid var(--red-line); border-radius:11px; padding:8px 11px; font-size:.86rem; color:var(--ink);
}
.note .tag{
  flex:none; background:var(--red); color:#fff; border-radius:7px; padding:2px 8px; font-size:.74rem; font-weight:700;
}
.note .w{font-family:var(--qfont); font-size:1.15rem; color:var(--red);}
.note.info{background:var(--panel2); border-color:var(--line); color:var(--muted);}
.note.info .tag{background:var(--gold);}
.ayah-tools{display:flex; align-items:center; gap:8px; margin-top:10px;}
.mini-btn{
  border:1px solid var(--line); background:var(--panel2); color:var(--teal); border-radius:9px;
  padding:5px 10px; font-size:.78rem; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:5px;
}
.mini-btn:hover{background:var(--teal-soft);}
.mini-btn:disabled{opacity:.4; cursor:not-allowed;}
.reread-btn.active{background:var(--red); color:#fff; border-color:var(--red); animation:pulse 1.4s infinite;}
.ayah.rereading{border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft), var(--shadow);}

/* شريط التسجيل السفليّ */
.recbar{
  position:fixed; inset-inline:0; bottom:0; z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 12px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg) 34%);
}
.rec-status{font-size:.82rem; color:var(--muted); min-height:1.1em; text-align:center;}
.rec-status.err{color:var(--red);}
.rec-status.ok{color:var(--teal);}
.micbtn{
  width:66px; height:66px; border-radius:50%; border:none; cursor:pointer;
  background:var(--teal); color:#fff; display:grid; place-items:center; box-shadow:0 8px 24px rgba(14,107,96,.35);
  transition:transform .1s;
}
.micbtn:active{transform:scale(.95);}
.micbtn.recording{background:var(--red); box-shadow:0 0 0 0 rgba(192,57,43,.5); animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.45);}70%{box-shadow:0 0 0 16px rgba(192,57,43,0);}100%{box-shadow:0 0 0 0 rgba(192,57,43,0);}}

/* شريط تقدّم التحميل (النموذج على الجهاز) */
.od-load{
  position:fixed; inset-inline:0; bottom:90px; z-index:29; display:flex; justify-content:center; pointer-events:none;
}
.od-load .box{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 14px;
  font-size:.8rem; color:var(--muted); box-shadow:var(--shadow); pointer-events:auto;
}
.od-load .bar{height:5px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:6px; width:200px;}
.od-load .bar i{display:block; height:100%; background:var(--teal); width:0;}

/* لوحة الملخّص */
.summary{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  margin-bottom:16px; box-shadow:var(--shadow); text-align:center;
}
.summary .score{font-size:2.4rem; font-weight:700; color:var(--teal); line-height:1;}
.summary .score.warn{color:var(--gold);} .summary .score.bad{color:var(--red);}
.summary .lbl{color:var(--muted); font-size:.86rem; margin-top:4px;}
.summary .counts{display:flex; justify-content:center; gap:18px; margin-top:12px; flex-wrap:wrap;}
.summary .counts b{color:var(--ink);}
.diag-btn{margin-top:12px; border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:9px; padding:6px 12px; font-size:.76rem; cursor:pointer; font-family:inherit;}
.diag-btn:hover{background:var(--panel2); color:var(--teal);}

.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-3px;}
@keyframes spin{to{transform:rotate(360deg);}}
[hidden]{display:none !important;}