/* ============================================================
   بيّن — أنماط المصحف (المرحلة 4)
   الخط الرسمي KFGQPC من مجمع الملك فهد (شبيه بالمطبوع)
   ============================================================ */
@font-face {
    font-family: 'KFGQPC-Hafs';
    src: url('../fonts/uthmanic_hafs_v20.ttf') format('truetype');
    font-display: swap;
}

:root{
    --parchment:#fdfaf3;
    --parchment-edge:#f3ead2;
    --ink:#1b1b1b;
    --blue:#1E3A8A;
    --emerald:#10B981;
    --gold:#D4AF37;
}

/* شريط التنقّل */
.mushaf-bar{
    max-width:760px; margin:0 auto 14px; display:flex; align-items:center;
    justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.mushaf-bar .group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mushaf-bar select, .mushaf-bar input[type=number]{
    padding:8px 10px; border:1px solid #d7dbe3; border-radius:10px;
    font-family:inherit; font-size:14px; background:#fff;
}
.navbtn{
    background:var(--blue); color:#fff; border:0; border-radius:10px;
    padding:9px 16px; font-size:15px; cursor:pointer; text-decoration:none;
    font-family:inherit; display:inline-block;
}
.navbtn:hover{background:#16306e}
.navbtn.disabled{background:#c7cdd8; pointer-events:none}

/* قسم التجويد */
.lesson-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.lesson-chip{display:flex; align-items:center; gap:10px; text-decoration:none; background:#fff;
    border:1px solid #eef0f4; border-radius:12px; padding:12px 14px; color:var(--dark); transition:.15s}
.lesson-chip:hover{border-color:var(--emerald); box-shadow:0 4px 14px rgba(16,185,129,.12)}
.lesson-chip .num{background:var(--grad); color:#fff; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none}
.lesson-chip .ttl{font-weight:700; font-size:15px}
.tajweed-body{font-size:17px; line-height:2.1; color:#2b2f36; text-align:justify}
.tajweed-body h4{color:var(--blue); margin:20px 0 8px; font-size:18px}
.tajweed-body p{margin:0 0 12px}
.tajweed-body .bayt{display:flex; justify-content:center; gap:32px; flex-wrap:wrap;
    background:#f8fbf9; border-radius:10px; padding:8px 14px; margin:8px auto; max-width:620px;
    color:#0f5132; font-weight:600}
.tajweed-body .bayt .sadr, .tajweed-body .bayt .ajz{min-width:200px; text-align:center}

/* البحث المؤصَّل */
.search-list{ display:flex; flex-direction:column; gap:8px; }
.search-item{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid #eef0f4;
    border-radius:12px; padding:12px 14px; border-inline-start:3px solid var(--emerald); transition:.12s; }
a.search-item:hover{ border-color:var(--emerald); background:#fafffe; }
.si-text{ font-size:16px; line-height:1.95; color:#1f2937; }
.si-text.quran-emlaey{ font-family:'Scheherazade New','Amiri',serif; font-size:19px; color:#0f5132; }
.si-src{ font-size:12.5px; color:#9aa2af; margin-top:6px; }

/* الرفيق الوكيل */
.card.rafiq-hero{ background:var(--grad); color:#fff; text-align:center; }
.rafiq-hero .r-greet{ font-size:clamp(20px,5vw,28px); font-weight:800; }
.rafiq-hero .r-hijri{ opacity:.9; margin:6px 0 16px; font-size:15px; }
.rafiq-hero .r-next{ display:inline-flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.15);
    border-radius:16px; padding:12px 26px; }
.r-next-label{ font-size:12px; opacity:.85; }
.r-next-name{ font-size:22px; font-weight:800; }
.r-next-time{ font-size:16px; font-variant-numeric:tabular-nums; }
.r-next-mins{ font-size:13px; opacity:.9; }

.r-now{ display:flex; gap:16px; align-items:flex-start; border-inline-start:5px solid var(--emerald); }
.r-now-icon{ font-size:42px; flex:none; }
.r-now-label{ color:var(--emerald); font-weight:800; font-size:13px; }
.r-now-title{ margin:2px 0 6px; color:var(--blue); }
.r-now-detail{ color:#4b5563; line-height:1.9; margin:0 0 12px; }

.r-list{ display:flex; flex-direction:column; gap:8px; }
.r-item{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
    background:#fff; border:1px solid #eef0f4; border-radius:12px; padding:12px 14px; transition:.12s; }
a.r-item:hover{ border-color:var(--emerald); transform:translateX(-2px); }
.r-item-icon{ font-size:24px; flex:none; }
.r-item-title{ display:block; font-weight:700; color:var(--dark); }
.r-item-detail{ display:block; font-size:13.5px; color:#6b7280; line-height:1.7; }

.r-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.r-quick a{ background:var(--gray); border-radius:999px; padding:8px 16px; text-decoration:none;
    color:var(--blue); font-weight:700; font-size:14px; }
.r-quick a:hover{ background:#e2e6ee; }

/* محرك الحفظ — أزرار التقييم */
.grade-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:6px; }
.grade{ display:flex; flex-direction:column; align-items:center; gap:2px; border:0; border-radius:14px;
    padding:14px 6px; cursor:pointer; font-family:inherit; color:#fff; font-weight:800; transition:transform .1s; }
.grade:hover{ transform:translateY(-2px); }
.grade span{ font-size:17px; } .grade small{ font-weight:400; font-size:12px; opacity:.9; }
.grade.g-again{ background:#dc2626; } .grade.g-hard{ background:#d97706; }
.grade.g-good{ background:var(--emerald); } .grade.g-easy{ background:var(--blue); }
@media (max-width:520px){ .grade-grid{ grid-template-columns:repeat(2,1fr); } }

/* الخط اليومي والعادات */
.progress{ height:12px; background:#eef0f4; border-radius:999px; overflow:hidden; margin:12px 0 16px; }
.progress-bar{ height:100%; background:var(--grad); border-radius:999px; transition:width .3s; }
.habit-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.habit{ display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff;
    border:1px solid #eef0f4; border-radius:14px; padding:14px 10px; cursor:pointer; font-family:inherit;
    transition:.15s; position:relative; }
.habit:hover{ border-color:var(--emerald); }
.habit.done{ background:linear-gradient(135deg,#e9f9f2,#d6f3e6); border-color:var(--emerald); }
.habit.done::after{ content:'✓'; position:absolute; top:6px; inset-inline-start:8px; color:var(--emerald); font-weight:800; }
.habit .h-icon{ font-size:26px; }
.habit .h-name{ font-weight:700; font-size:14px; color:var(--dark); text-align:center; }
.habit .h-streak{ font-size:12px; color:#b45309; font-weight:700; min-height:16px; }

.timeline{ position:relative; }
.tl-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid #f1f3f7; }
.tl-item:last-child{ border-bottom:0; }
.tl-icon{ font-size:24px; flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:var(--gray); border-radius:50%; }
.tl-body{ flex:1; }
.tl-head{ display:flex; justify-content:space-between; align-items:center; }
.tl-name{ font-weight:800; color:var(--blue); font-size:16px; }
.tl-time{ font-variant-numeric:tabular-nums; direction:ltr; background:#e6ecfb; color:var(--blue);
    border-radius:999px; padding:2px 10px; font-size:13px; font-weight:700; }
.tl-desc{ color:#4b5563; font-size:14px; margin-top:2px; line-height:1.8; }

/* المواقيت والتقويم الهجري */
.hijri-box{ text-align:center; padding:14px }
.hijri-main{ font-size:clamp(22px,5vw,32px); font-weight:800; color:var(--blue) }
.hijri-sub{ color:#6b7280; font-size:14px; margin-top:6px }
.live-strip{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:10px;
    padding-top:10px; border-top:1px solid #eef0f4; }
.live-strip span{ font-size:15px; color:#4b5563; }
.live-clock{ font-variant-numeric:tabular-nums; direction:ltr; display:inline-block; color:var(--emerald); font-weight:800; }
.ls-count .cd-time{ font-variant-numeric:tabular-nums; direction:ltr; display:inline-block; color:var(--gold); }
.r-next .cd-time{ font-variant-numeric:tabular-nums; }

.geo-status{ font-size:13px; color:#065f46; background:#e9f9f2; border-radius:10px; padding:8px 12px;
    margin:0 0 12px; min-height:0; }
.geo-status:empty{ display:none; }
.geo-status.warn{ color:#9b6a00; background:#fff8e6; }
.times-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:8px }
.time-card{ background:var(--grad); color:#fff; border-radius:14px; padding:16px 12px; text-align:center;
    box-shadow:0 6px 18px rgba(30,58,138,.12) }
.time-card.muted{ background:#eef0f4; color:var(--dark) }
.time-card .t-icon{ font-size:26px }
.time-card .t-name{ font-weight:700; margin:6px 0 2px; font-size:15px }
.time-card .t-val{ font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; direction:ltr }

/* مركز الأذكار — تنسيق */
.src-note{ background:#eef6ff; color:#1e3a8a; border-radius:12px; padding:12px 16px; font-size:13.5px; line-height:1.9; }
.featured-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.featured-chip{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
    background:var(--grad); border-radius:14px; padding:14px 16px; font-weight:700; font-size:15px;
    box-shadow:0 6px 18px rgba(30,58,138,.14); transition:transform .12s; }
.featured-chip:hover{ transform:translateY(-2px); }
.featured-chip .f-icon{ font-size:22px; }

/* بطاقات الأذكار */
.dhikr-card{ border-inline-start:4px solid var(--emerald); position:relative; padding-top:22px; }
.dhikr-card.done{ opacity:.5; border-inline-start-color:#c7cdd8; }
.dhikr-num{ position:absolute; top:14px; inset-inline-start:16px; background:var(--soft); color:#065f46;
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px; }
.dhikr-text{ font-size:22px; line-height:2.3; color:#1b2733; text-align:justify;
    font-family:'Scheherazade New','Amiri','Traditional Arabic',serif; padding-inline-start:44px; }
.dhikr-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:14px;
    border-top:1px solid #eef0f4; padding-top:12px; }
.dhikr-count{ color:var(--gold); font-weight:700; font-size:14px; }
.dhikr-done{ background:var(--soft); color:#065f46; }
.dhikr-done.on{ background:var(--emerald); color:#fff; }

/* عدّاد الذكر */
.counter{display:flex; flex-direction:column; align-items:center; gap:18px}
.counter-ring{width:160px; height:160px; border-radius:50%; border:8px solid var(--soft);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#fff; transition:.2s}
.counter.reached .counter-ring{border-color:var(--gold); box-shadow:0 0 0 6px #faf3d9}
.counter-num{font-size:52px; font-weight:800; color:var(--blue); line-height:1}
.counter-target{color:#9aa2af; font-size:15px; margin-top:4px}
.counter-controls{display:flex; flex-direction:column; align-items:center; gap:12px}
.counter-targets{display:flex; gap:8px}
.chip-btn{background:#eef0f4; border:0; border-radius:999px; padding:8px 16px; font-size:14px;
    font-weight:700; cursor:pointer; font-family:inherit; color:var(--dark)}
.chip-btn:hover{background:#e2e6ee}
.chip-btn.reset{background:#fde8e8; color:#9b1c1c}

/* مشغّل التلاوة */
.player{
    max-width:760px; margin:0 auto 14px; background:#fff; border-radius:12px;
    padding:12px 16px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    box-shadow:0 4px 16px rgba(30,58,138,.07);
}
.player .group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.player select, .player input[type=number]{
    padding:8px 10px; border:1px solid #d7dbe3; border-radius:10px; font-family:inherit; font-size:14px;
}
.player .navbtn{background:var(--emerald)}
.player .navbtn:hover{background:#0e9f74}
.player .navbtn.playing{background:#b45309}
.player-status{font-size:13px; color:#6b7280; width:100%}
.player-status.warn{color:#9b6a00}

/* إطار الصفحة — شبيه بمصحف المدينة */
.mushaf-page{
    width:min(94vw, 690px); margin:0 auto; background:var(--parchment);
    border:2px solid var(--gold); border-radius:14px;
    box-shadow:0 10px 40px rgba(30,58,138,.10), inset 0 0 0 6px var(--parchment-edge);
    padding:clamp(16px,3.4vw,34px) clamp(14px,3vw,30px) 18px;
}

/* أسطر المصحف — تخطيط مطابق للمطبوع (15 سطراً)، متجاوب */
.mushaf-lines{ direction:rtl; font-size:clamp(17px, 4.35vw, 27px); }
.mushaf-lines .ml{
    text-align:justify; text-align-last:justify;
    line-height:2.0; margin:0; white-space:normal;
    color:var(--ink); direction:rtl;
}
/* عزل كل كلمة بيدياً لضمان ترتيب RTL عبر المتصفحات (رموز الخط محايدة) */
.mushaf-lines .ml .aya{ unicode-bidi:isolate; }
.mushaf-lines .ml.basmala,
.mushaf-lines .ml.center{ text-align:center; text-align-last:center; }
/* البسملة: سطرٌ موسَّطٌ أنيق تحت عنوان السورة، كالمصحف المطبوع */
.mushaf-lines .ml.basmala{ margin:2px auto 4px; }
.mushaf-lines .sura-header-ornament{ text-align:center; margin:6px auto; padding:6px 0;
    border-top:2px solid var(--gold); border-bottom:2px solid var(--gold);
    background:linear-gradient(#fbf3d9,#f7ecc9); border-radius:8px; }
.mushaf-lines .sura-name{ font-family:'Segoe UI','Tajawal',sans-serif; font-weight:800;
    color:var(--blue); font-size:clamp(15px,3vw,19px); }
.mushaf-lines .w-end{ cursor:default; }
.mushaf-lines .aya{ cursor:pointer; border-radius:5px; transition:background .12s; }
.mushaf-lines .aya:hover{ background:#f6efd8; }
.mushaf-lines .aya.active{ background:#fcefb4; }
@media (max-width:400px){ .mushaf-lines{ font-size:clamp(15px,5vw,20px); } }
.mushaf-head{
    display:flex; justify-content:space-between; align-items:center;
    color:var(--blue); font-weight:700; font-size:15px;
    border-bottom:1px solid var(--parchment-edge); padding-bottom:10px; margin-bottom:18px;
}
.mushaf-head .juz{color:#8a6d1a}

/* نصّ المصحف */
.mushaf-text{
    font-family:'KFGQPC-Hafs', serif;
    font-size:30px; line-height:2.45; color:var(--ink);
    text-align:justify; text-align-last:center; direction:rtl;
    letter-spacing:0; word-spacing:normal;
}
/* عرض QCF (رموز الصفحة — رسم مطابق للمطبوع) */
.mushaf-text.qcf{ font-size:29px; line-height:1.95; word-spacing:normal; letter-spacing:0 }
@media (max-width:640px){ .mushaf-text.qcf{ font-size:24px; line-height:1.9 } }

.mushaf-text .aya{cursor:pointer; border-radius:6px; transition:background .15s}
.mushaf-text .aya:hover{background:#f6efd8}
.mushaf-text .aya.active{background:#fcefb4}

/* فاصل السورة داخل الصفحة */
.sura-divider{
    text-align:center; margin:20px auto 12px; padding:8px 0;
    border-top:1px solid var(--parchment-edge); border-bottom:1px solid var(--parchment-edge);
    color:var(--blue); font-weight:700;
}
.sura-divider .name{
    font-family:'KFGQPC-Hafs', serif; font-size:26px; display:block; margin-bottom:2px;
}

.mushaf-foot{
    text-align:center; margin-top:18px; color:#8a6d1a; font-weight:700; font-size:15px;
}
.mushaf-src{
    max-width:760px; margin:14px auto 0; text-align:center;
    color:#9aa2af; font-size:12px;
}

/* لوحة معلومات الآية المحدّدة */
.aya-info{
    max-width:760px; margin:12px auto 0; background:#fff; border-radius:12px;
    padding:12px 16px; font-size:14px; color:#374151; display:none;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.aya-info.show{display:block}
.aya-info-head{font-weight:700; color:var(--blue); margin-bottom:8px; border-bottom:1px solid #eef0f4; padding-bottom:6px}
.aya-info-head .src-tag{background:#e6ecfb; color:var(--blue); border-radius:999px; padding:2px 10px; font-size:12px; margin-inline-start:6px}
.aya-info-body{font-size:16px; line-height:2; color:#2b2f36; text-align:justify}
.aya-info-body .aya{font-family:'KFGQPC-Hafs', serif; color:#0f5132; font-size:19px; cursor:default}
.aya-info-body .aya:hover{background:none}

@media (max-width:640px){
    .mushaf-text{font-size:25px; line-height:2.3}
    .mushaf-page{padding:22px 16px 16px}
}