/* ==========================================================================
   البيت المبارك السعيد — نظام التصميم
   هوية إيمانية هادئة فاخرة، RTL كامل، فاتح/داكن، أحجام خط متعددة
   ========================================================================== */

/* ---------- الخطوط المحلية (تعمل بدون إنترنت) ---------- */
@font-face {
  font-family: "Zain";
  src: url("../assets/fonts/Zain-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zain";
  src: url("../assets/fonts/Zain-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Zain";
  src: url("../assets/fonts/Zain-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/Rubik-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

/* ---------- المتغيرات ---------- */
:root {
  --green-900: #0c2621;
  --green-800: #0f2e28;
  --green-700: #14463b;
  --green-600: #1c6b57;
  --teal-500: #2a8f76;
  --gold: #c9a24b;
  --gold-soft: #d9bd77;
  --sand-50: #f7f2e8;
  --sand-100: #f1e9d8;
  --sand-200: #e7dcc4;
  --ink: #23312c;
  --ink-soft: #4d5e57;

  /* ألوان دلالية للوضع الفاتح */
  --bg: var(--sand-50);
  --bg-elev: #ffffff;
  --bg-sunk: var(--sand-100);
  --surface-border: rgba(20, 70, 59, 0.12);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--green-700);
  --accent-strong: var(--green-800);
  --accent-contrast: #ffffff;
  --gold-line: var(--gold);
  --danger: #b0413a;
  --shadow: 0 10px 30px -12px rgba(12, 38, 33, 0.28);
  --shadow-soft: 0 4px 14px -8px rgba(12, 38, 33, 0.35);

  /* مقياس الخط (يتحكم به الإعداد) */
  --fs-scale: 1;
  --nav-h: 78px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

:root[data-theme="dark"] {
  --bg: #0b201c;
  --bg-elev: #10302a;
  --bg-sunk: #0c2621;
  --surface-border: rgba(217, 189, 119, 0.16);
  --text: #eef3ef;
  --text-soft: #a9c1b8;
  --accent: #2a8f76;
  --accent-strong: #34a488;
  --accent-contrast: #04150f;
  --gold-line: var(--gold-soft);
  --danger: #e07b73;
  --shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 6px 16px -10px rgba(0, 0, 0, 0.6);
}

:root[data-font="large"] { --fs-scale: 1.15; }
:root[data-font="xlarge"] { --fs-scale: 1.32; }

/* ---------- إعادة ضبط ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Zain", "Rubik", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow: hidden;               /* التمرير داخلي فقط */
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  transition: background .3s ease, color .3s ease;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 2px; border-radius: 8px; }

/* رقم لاتيني بخط Rubik لوضوح الأرقام */
.num { font-family: "Rubik", sans-serif; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- هيكل التطبيق ---------- */
#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  background: var(--bg);
}

.screens {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;                     /* إخفاء شريط التمرير */
  -webkit-overflow-scrolling: touch;
  padding: calc(18px + var(--safe-top)) 18px calc(var(--nav-h) + var(--safe-bottom) + 24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- الترويسة ---------- */
.app-header {
  text-align: center;
  padding: 6px 0 14px;
}
.app-header .brand {
  font-size: calc(1.9rem * var(--fs-scale));
  font-weight: 800;
  color: var(--accent-strong);
  letter-spacing: .5px;
}
.app-header .slogan {
  font-size: calc(1.15rem * var(--fs-scale));
  color: var(--gold-line);
  font-weight: 700;
  margin-top: 2px;
}
.divider-gold {
  width: 64px; height: 3px; margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  border-radius: 3px;
}

.screen-title {
  font-size: calc(1.7rem * var(--fs-scale));
  font-weight: 800;
  color: var(--accent-strong);
  text-align: center;
  margin-bottom: 4px;
}
.screen-sub {
  text-align: center;
  color: var(--text-soft);
  font-size: calc(1.05rem * var(--fs-scale));
  margin-bottom: 18px;
}

/* ---------- البطاقات ---------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}
.card.quiet { box-shadow: none; background: var(--bg-sunk); }

/* الآية */
.ayah {
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,162,75,.10), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--gold-line);
  border-radius: 22px;
  padding: 22px 18px;
  margin-bottom: 18px;
}
.ayah .text {
  font-size: calc(1.5rem * var(--fs-scale));
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 2.1;
}
.ayah .ref {
  color: var(--gold-line);
  font-weight: 700;
  margin-top: 10px;
  font-size: calc(1.05rem * var(--fs-scale));
}
.opening-phrase {
  text-align: center;
  font-size: calc(1.35rem * var(--fs-scale));
  font-weight: 800;
  color: var(--accent);
  margin: 6px 0 16px;
}

/* ---------- بطاقة المقطع الحالي ---------- */
.now-clip-name {
  font-size: calc(1.4rem * var(--fs-scale));
  font-weight: 800;
  text-align: center;
  color: var(--text);
}
.now-clip-meta {
  text-align: center;
  color: var(--text-soft);
  font-size: calc(1rem * var(--fs-scale));
  margin-top: 2px;
}
.no-clip {
  text-align: center;
  color: var(--text-soft);
  padding: 10px 0 4px;
  font-size: calc(1.1rem * var(--fs-scale));
}

/* ---------- الدائرة الكبيرة (عدّاد التقدم) ---------- */
.progress-ring-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 6px;
}
.progress-ring {
  position: relative;
  width: min(66vw, 260px);
  aspect-ratio: 1;
}
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring .track { fill: none; stroke: var(--bg-sunk); stroke-width: 12; }
.progress-ring .bar {
  fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset .4s ease;
}
:root[data-theme="dark"] .progress-ring .bar { stroke: var(--gold-line); }
.progress-ring .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.progress-ring .done {
  font-size: calc(3.2rem * var(--fs-scale));
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 1;
}
:root[data-theme="dark"] .progress-ring .done { color: var(--gold-soft); }
.progress-ring .of {
  font-size: calc(1.15rem * var(--fs-scale));
  color: var(--text-soft);
  margin-top: 6px;
}
.progress-ring .label {
  font-size: calc(.95rem * var(--fs-scale));
  color: var(--text-soft);
  margin-top: 2px;
}

/* ---------- محدد عدد التكرارات ---------- */
.reps-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 10px 0 6px;
}
.step-btn {
  width: 60px; height: 60px; min-width: 60px; min-height: 60px;
  flex: 0 0 60px; aspect-ratio: 1; border-radius: 50%;
  background: var(--bg-sunk); color: var(--accent-strong);
  font-size: 2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--surface-border);
  transition: transform .1s ease, background .2s;
  user-select: none;
}
.step-btn:active { transform: scale(.92); background: var(--accent); color: var(--accent-contrast); }
.reps-value {
  min-width: 120px; text-align: center;
}
.reps-value input {
  width: 100%; text-align: center;
  font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: calc(2.4rem * var(--fs-scale));
  color: var(--text); background: transparent; border: none;
  border-bottom: 2px solid var(--gold-line);
  padding: 2px 0;
}
.reps-caption { text-align: center; color: var(--text-soft); font-size: calc(1rem * var(--fs-scale)); }

.quick-reps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.chip {
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg-sunk); border: 1px solid var(--surface-border);
  font-weight: 700; font-size: calc(1rem * var(--fs-scale)); color: var(--text-soft);
  font-family: "Rubik", sans-serif;
}
.chip.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.eta {
  text-align: center; margin-top: 8px;
  color: var(--text); font-size: calc(1.1rem * var(--fs-scale));
}
.eta b { color: var(--accent); font-weight: 800; }

/* ---------- زر التشغيل الكبير ---------- */
.play-big-wrap { display: flex; justify-content: center; margin-top: 4px; }
.play-big {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-strong), var(--accent));
  color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow), 0 0 0 8px rgba(201,162,75,.12);
  transition: transform .12s ease;
}
.play-big:active { transform: scale(.94); }
.play-big svg { width: 46px; height: 46px; }

.autosave {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-soft); font-size: calc(.95rem * var(--fs-scale)); margin-top: 14px;
}
.autosave .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-500); }
.autosave.saving .dot { background: var(--gold-line); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- الأزرار العامة ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 16px; font-weight: 800;
  font-size: calc(1.15rem * var(--fs-scale));
  background: var(--accent); color: var(--accent-contrast);
  box-shadow: var(--shadow-soft); transition: transform .1s ease, opacity .2s;
  width: 100%;
}
.btn:active { transform: scale(.98); }
.btn.secondary { background: var(--bg-sunk); color: var(--text); }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: none; border: 1.5px solid var(--surface-border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: 12px; }
.btn-row .btn { flex: 1; }

/* ---------- شريط التنقل السفلي ---------- */
.bottom-nav {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg-elev);
  border-top: 1px solid var(--surface-border);
  display: flex; box-shadow: 0 -6px 20px -12px rgba(12,38,33,.4);
  z-index: 20;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-soft); position: relative;
  transition: color .2s;
}
.nav-item svg { width: 26px; height: 26px; }
.nav-item span { font-size: calc(.86rem * var(--fs-scale)); font-weight: 700; }
.nav-item.active { color: var(--accent); }
:root[data-theme="dark"] .nav-item.active { color: var(--gold-soft); }
.nav-item.active::before {
  content: ""; position: absolute; top: 0; width: 34px; height: 3px;
  background: var(--gold-line); border-radius: 0 0 4px 4px;
}
.nav-item.record-btn svg { width: 30px; height: 30px; }

/* ---------- شاشة التسجيل ---------- */
.rec-circle-wrap { display: flex; justify-content: center; margin: 14px 0; }
.rec-circle {
  position: relative; width: min(62vw, 240px); aspect-ratio: 1;
}
.rec-circle > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-circle .track { fill: none; stroke: var(--bg-sunk); stroke-width: 10; }
.rec-circle .bar { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
.rec-circle .center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.rec-mic, .rec-play {
  width: 92px; height: 92px; min-width: 92px; min-height: 92px;
  flex: 0 0 92px; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent-strong), var(--accent));
  color: var(--accent-contrast); box-shadow: var(--shadow);
  transition: transform .12s;
}
.rec-mic svg, .rec-play svg { flex-shrink: 0; }
.rec-mic:active, .rec-play:active { transform: scale(.94); }
.rec-mic svg, .rec-play svg { width: 44px; height: 44px; }
.rec-mic.recording { background: linear-gradient(160deg, #a3352f, var(--danger)); animation: recpulse 1.4s infinite; }
@keyframes recpulse { 0%,100% { box-shadow: var(--shadow), 0 0 0 0 rgba(176,65,58,.4); } 50% { box-shadow: var(--shadow), 0 0 0 16px rgba(176,65,58,0); } }
.rec-time {
  text-align: center; font-family: "Rubik", sans-serif; font-weight: 700;
  font-size: calc(1.8rem * var(--fs-scale)); color: var(--text); direction: ltr;
}
.rec-hint { text-align: center; color: var(--text-soft); font-size: calc(1.05rem * var(--fs-scale)); margin-bottom: 6px; }

.name-input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  background: var(--bg-sunk); border: 1px solid var(--surface-border);
  color: var(--text); font-size: calc(1.2rem * var(--fs-scale)); font-weight: 700;
  text-align: center;
}

/* ---------- قائمة المقاطع ---------- */
.clip-list { display: flex; flex-direction: column; gap: 12px; }
.clip-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev); border: 1px solid var(--surface-border);
  border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-soft);
}
.clip-card .drag { color: var(--text-soft); font-size: 1.4rem; cursor: grab; touch-action: none; user-select: none; }
.clip-main { flex: 1; min-width: 0; }
.clip-name { font-weight: 800; font-size: calc(1.25rem * var(--fs-scale)); color: var(--text); }
.clip-sub { color: var(--text-soft); font-size: calc(.98rem * var(--fs-scale)); display: flex; gap: 12px; flex-wrap: wrap; }
.clip-play {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
}
.clip-play svg { width: 26px; height: 26px; }
.clip-card.playing { border-color: var(--gold-line); box-shadow: var(--shadow); }

.empty-state { text-align: center; color: var(--text-soft); padding: 40px 20px; }
.empty-state .big { font-size: calc(1.3rem * var(--fs-scale)); font-weight: 800; color: var(--text); margin-bottom: 8px; }

/* ---------- شاشة اليوم ---------- */
.today-card {
  text-align: center;
  background:
    radial-gradient(140% 120% at 50% -10%, rgba(201,162,75,.14), transparent 55%),
    var(--bg-elev);
  border: 1px solid var(--gold-line);
  border-radius: 26px; padding: 30px 20px; box-shadow: var(--shadow);
}
.today-day { font-size: calc(2rem * var(--fs-scale)); font-weight: 800; color: var(--accent-strong); }
:root[data-theme="dark"] .today-day { color: var(--gold-soft); }
.today-hijri { font-size: calc(2.6rem * var(--fs-scale)); font-weight: 800; color: var(--text); margin: 10px 0 4px; }
.today-hijri .month { color: var(--accent); }
.today-greg { font-size: calc(1.2rem * var(--fs-scale)); color: var(--text-soft); font-family: "Rubik", sans-serif; direction: ltr; }
.today-soon {
  margin-top: 16px; padding: 12px; border-radius: 14px;
  background: var(--bg-sunk); color: var(--text-soft); font-size: calc(1rem * var(--fs-scale));
}

/* ---------- الإعدادات ---------- */
.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 4px; border-bottom: 1px solid var(--surface-border);
}
.setting:last-child { border-bottom: none; }
.setting .label { font-weight: 700; font-size: calc(1.15rem * var(--fs-scale)); }
.setting .desc { color: var(--text-soft); font-size: calc(.92rem * var(--fs-scale)); font-weight: 400; }
.seg { display: flex; background: var(--bg-sunk); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button {
  padding: 8px 14px; border-radius: 9px; font-weight: 700;
  font-size: calc(1rem * var(--fs-scale)); color: var(--text-soft);
}
.seg button.active { background: var(--accent); color: var(--accent-contrast); }
.switch { width: 58px; height: 32px; border-radius: 999px; background: var(--bg-sunk); position: relative; transition: background .2s; flex-shrink: 0; }
.switch.on { background: var(--accent); }
.switch::after { content:""; position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on::after { inset-inline-start: 29px; }

.about-line { color: var(--text-soft); font-size: calc(1rem * var(--fs-scale)); margin: 4px 0; }
.privacy-list { list-style: none; }
.privacy-list li { padding: 6px 0; padding-inline-start: 26px; position: relative; color: var(--text-soft); font-size: calc(1.02rem*var(--fs-scale)); }
.privacy-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--teal-500); font-weight: 800; }

/* ---------- نافذة الحوار ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,22,18,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 100;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  backdrop-filter: blur(2px);
}
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-elev); width: 100%; max-width: 560px;
  border-radius: 26px 26px 0 0; padding: 22px 20px calc(22px + var(--safe-bottom));
  box-shadow: var(--shadow); transform: translateY(20px); transition: transform .25s;
}
.modal-backdrop.show .modal { transform: none; }
.modal h3 { font-size: calc(1.4rem*var(--fs-scale)); font-weight: 800; text-align: center; margin-bottom: 6px; }
.modal p { color: var(--text-soft); text-align: center; margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: calc(1.02rem*var(--fs-scale)); }

/* ---------- التنبيهات (toast) ---------- */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + 20px + var(--safe-bottom)); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-strong); color: #fff; padding: 12px 22px; border-radius: 14px;
  font-weight: 700; box-shadow: var(--shadow); z-index: 200; max-width: 90%;
  opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
  text-align: center;
}
#toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---------- شاشة الترحيب/الأذونات ---------- */
.mic-perm { text-align: center; padding: 20px 0; }
.mic-perm .icon { font-size: 3rem; margin-bottom: 10px; }

/* ---------- مساعدات ---------- */
.hidden { display: none !important; }
.mt { margin-top: 16px; }
.center { text-align: center; }
.days-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.day-toggle {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunk); border: 1px solid var(--surface-border); font-weight: 700;
  font-size: calc(.95rem * var(--fs-scale)); color: var(--text-soft);
}
.day-toggle.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.spinner { width: 22px; height: 22px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }