:root{
    --parchment:#F6F1E4;
    --page:#FCF8EE;
    --page-alt:#F2EBD9;
    --page-deep:#EBE2CB;
    --ink:#133029;
    --gold:#B08536;
    --gold-soft:#D0A65F;
    --gold-ink:#83601C;
    --gold-on:#FFFDF7;
    --text:#2C2A21;
    --text-soft:#6E6857;
    --line:#E2D9C3;
    --line-soft:#EDE6D5;
    --hover:rgba(176,133,54,.09);
    --hover-strong:rgba(176,133,54,.17);
    --shadow:0 24px 60px -20px rgba(19,48,41,.26);
    --shadow-sm:0 8px 22px -10px rgba(19,48,41,.2);
    --shadow-lg:0 44px 96px -28px rgba(19,48,41,.42);
    --backdrop:rgba(19,48,41,.44);
    --glass:rgba(252,248,238,.86);
    --sel:rgba(208,166,95,.34);
    --ok:#2F7D5B;
    --scale:1;
    --lh:2.9;
    --wrap:44rem;
    --align:justify;
    --topbar-h:58px;
    --player-h:0px;
    --toolbar-h:54px;
    --surah-deco:url('assets/mushaf_decorations/surah_name_green.png');
  }
  html[data-theme="dark"]{
    --parchment:#0B1211;
    --page:#131D1A;
    --page-alt:#1A2521;
    --page-deep:#0E1715;
    --ink:#ECE7D8;
    --gold:#DCB368;
    --gold-soft:#C9A05A;
    --gold-ink:var(--gold);
    --gold-on:#12211C;
    --text:#DAD6C6;
    --text-soft:#8F8C7D;
    --line:#27332E;
    --line-soft:#1E2A26;
    --hover:rgba(220,179,104,.1);
    --hover-strong:rgba(220,179,104,.19);
    --shadow:0 26px 64px -20px rgba(0,0,0,.7);
    --shadow-sm:0 10px 26px -12px rgba(0,0,0,.6);
    --shadow-lg:0 46px 100px -28px rgba(0,0,0,.82);
    --backdrop:rgba(0,0,0,.66);
    --glass:rgba(19,29,26,.88);
    --sel:rgba(220,179,104,.3);
    --ok:#5FBF8E;
    --surah-deco:url('assets/mushaf_decorations/surah_name_black2.png');
  }
  html[data-theme="sepia"]{
    --parchment:#E9DCBE;
    --page:#F5EDD7;
    --page-alt:#EDDFC0;
    --page-deep:#E5D5B2;
    --ink:#4A3A20;
    --gold:#9A6B26;
    --gold-soft:#B08238;
    --gold-ink:#7E551A;
    --gold-on:#FBF5E6;
    --text:#3F3423;
    --text-soft:#6E5F44;
    --line:#D6C29A;
    --line-soft:#E1D1AE;
    --hover:rgba(154,107,38,.11);
    --hover-strong:rgba(154,107,38,.2);
    --shadow:0 24px 56px -20px rgba(74,58,32,.3);
    --shadow-sm:0 8px 22px -10px rgba(74,58,32,.22);
    --shadow-lg:0 44px 90px -28px rgba(74,58,32,.44);
    --backdrop:rgba(48,36,18,.46);
    --glass:rgba(245,237,215,.88);
    --sel:rgba(154,107,38,.26);
    --ok:#4E7A54;
    --surah-deco:url('assets/mushaf_decorations/surah_name_dark_red.png');
  }
  html[data-theme="ocean"]{
    --parchment:#091317;
    --page:#101E24;
    --page-alt:#17292F;
    --page-deep:#0B181D;
    --ink:#E7EFF2;
    --gold:#63C2BE;
    --gold-soft:#49A19F;
    --gold-ink:var(--gold);
    --gold-on:#0C1A20;
    --text:#D2DEE2;
    --text-soft:#83969E;
    --line:#22343C;
    --line-soft:#1A2A31;
    --hover:rgba(99,194,190,.1);
    --hover-strong:rgba(99,194,190,.19);
    --shadow:0 26px 64px -20px rgba(0,0,0,.68);
    --shadow-sm:0 10px 26px -12px rgba(0,0,0,.55);
    --shadow-lg:0 46px 100px -28px rgba(0,0,0,.82);
    --backdrop:rgba(2,10,13,.68);
    --glass:rgba(16,30,36,.88);
    --sel:rgba(99,194,190,.3);
    --ok:#5FC79A;
    --surah-deco:url('assets/mushaf_decorations/surah_name_fayrouz.png');
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  html::-webkit-scrollbar{width:8px;height:8px;}
  html::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
  html::-webkit-scrollbar-track{background:transparent;}
  html.qcf-pending #mushaf,html.qcf-pending #resume,html.qcf-pending .hint{visibility:hidden;}
  /* Skeleton: أسطر رمادية بعرض يشبه أسطر المصحف تظهر حتى يكتمل الرسم */
  html.qcf-pending body::before{
    content:'';position:fixed;z-index:998;pointer-events:none;
    top:118px;left:50%;transform:translateX(-50%);
    width:min(54rem,92vw);height:min(72vh,660px);
    --sk:var(--line-soft,#E9E1CC);
    background:
      linear-gradient(var(--sk),var(--sk)) 50% 0/94% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 58px/88% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 116px/96% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 174px/80% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 232px/92% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 290px/86% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 348px/95% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 406px/62% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 464px/93% 22px no-repeat,
      linear-gradient(var(--sk),var(--sk)) 50% 522px/89% 22px no-repeat;
    animation:qcfPulse 1.1s ease-in-out infinite alternate;
  }
  @keyframes qcfPulse{from{opacity:.4;}to{opacity:1;}}
  html.scroll-lock{overflow:hidden;}
  body{
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;background:var(--parchment);color:var(--text);
    min-height:100vh;-webkit-tap-highlight-color:transparent;padding-bottom:calc(var(--player-h) + var(--toolbar-h));
    background-image:radial-gradient(130% 70% at 50% -12%,var(--page) 0%,transparent 62%);
    background-attachment:fixed;
  }
  ::selection{background:var(--sel);}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .skip-link{
    position:fixed;inset-inline-start:14px;top:-70px;z-index:120;background:var(--ink);color:var(--page);
    padding:10px 18px;border-radius:0 0 10px 0;font-size:.85rem;transition:top .2s;
  }
  .skip-link:focus{top:0;}
  .scroll-x{overflow-x:auto;scrollbar-width:thin;}
  .scroll-x::-webkit-scrollbar{height:6px;}
  .scroll-x::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
  .drawer-list::-webkit-scrollbar{width:8px;}
  .drawer-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
  .search-results::-webkit-scrollbar,.page-body::-webkit-scrollbar,.modal::-webkit-scrollbar{width:8px;}
  .search-results::-webkit-scrollbar-thumb,.page-body::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
  .drawer-list,.search-results,.page-body,.modal{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}

  .topbar{
    display:flex;align-items:center;gap:10px;padding:11px 18px;
    position:sticky;top:0;z-index:22;background:var(--glass);
    backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
    border-bottom:1px solid var(--line-soft);
  }
  .tb-group{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
  .tb-group.tb-end{justify-content:flex-end;}
  .tb-title{text-align:center;line-height:1.25;min-width:0;}
  .tb-title strong{
    display:block;font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:1.16rem;color:var(--ink);font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-wrap:balance;line-height:1.55;
  }
  .tb-title span{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--text-soft);}
  /* اسم التطبيق = مبدّل وضع القراءة/المصحف: تبويبان في الترويسة */
  .tb-title.tb-brand{display:flex;align-items:center;justify-content:center;gap:3px;flex:none;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:2px;}
  .tb-title.tb-brand svg{width:22px;height:22px;flex:none;}
  .brand-tab{
    display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
    color:var(--text-soft);font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:1rem;
    padding:6px 13px;min-height:34px;border-radius:999px;line-height:1.5;transition:.15s;white-space:nowrap;
  }
  .brand-tab strong{display:inline-block;color:inherit;font-family:inherit;font-size:inherit;line-height:1.2;}
  .brand-tab:hover{color:var(--ink);}
  .brand-tab.active{background:var(--ink);color:var(--page);font-weight:700;}
  /* تبويب القراءة: كل آية في سطر برقمها أولًا */
  body.reading #surah-text .ayah{display:block;margin:0 0 8px;}
  body.reading .pg-foot{display:none;}
  /* المصحف الشامل: بلا ترجمة/تفسير مضمّن — المعنى عند الطلب من النافذة */
  body.mushaf-page .tr-line, body.mushaf-page .tf-line{display:none!important;}
  body.mushaf-page #btn-inline{display:none;}
  /* ترجمة المعاني بالإنجليزية/الفرنسية/الإسبانية: اتجاه من اليسار لليمين */
  body.tr-ltr .tr-line{text-align:left;direction:ltr;padding:2px 0 12px 8px;}
  body.tr-ltr #panel-tr,
  body.tr-ltr #preview span{text-align:left;direction:ltr;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;}
  body.tr-ltr .ody-tr{direction:ltr;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;}
  body #panel-tr{font-size:calc(.9rem * var(--tr-scale,1));}
  body #preview span{font-size:calc(.8rem * var(--tr-scale,1));}
  body #panel-tf{font-size:calc(.85rem * var(--tf-scale,1));}
  .tb-brand svg path:first-of-type{stroke:var(--gold);}
  .tb-brand svg path:last-of-type{stroke:var(--gold-soft);}
  .icon-btn{
    display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid transparent;
    cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.82rem;color:var(--text-soft);
    padding:8px 11px;border-radius:10px;transition:background .15s,color .15s,transform .12s;
  }
  .icon-btn:hover{color:var(--ink);background:var(--hover);}
  .icon-btn:active{transform:scale(.94);}
  .icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;}
  .icon-btn[aria-pressed="true"]{color:var(--page);background:var(--ink);}
  .icon-btn.ic-only{padding:9px;}

  .progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;}
  .progress i{
    display:block;height:100%;width:0;border-radius:2px 0 0 2px;
    background:linear-gradient(90deg,var(--gold-soft),var(--gold));
    box-shadow:0 0 10px var(--gold-soft);transition:width .25s ease;
  }

  .toolbar{
    position:fixed;left:50%;bottom:calc(var(--player-h) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    z-index:29;background:var(--glass);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);
    backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
    padding:7px 12px;max-width:calc(100vw - 20px);
    transition:bottom .28s cubic-bezier(.32,.72,0,1),opacity .2s,transform .28s cubic-bezier(.32,.72,0,1),visibility .25s;
  }
  .tools{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
  .tools::-webkit-scrollbar{display:none;}
  .tool{
    display:inline-flex;align-items:center;gap:6px;background:var(--page);border:1px solid var(--line);
    border-radius:999px;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.755rem;color:var(--text-soft);
    padding:7px 13px;transition:.15s;white-space:nowrap;
  }
  .tool:hover{color:var(--ink);border-color:var(--gold-soft);background:var(--hover);}
  .tool:active{transform:scale(.96);}
  .tool[aria-pressed="true"]{color:var(--page);background:var(--ink);border-color:var(--ink);}
  .tool svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;}
  .tool.ic-only{padding:7px 10px;}
  .size-ctl{display:inline-flex;align-items:center;gap:1px;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:2px;}
  .size-ctl button{
    background:none;border:none;cursor:pointer;color:var(--text-soft);font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.95rem;padding:7px 12px;min-height:34px;border-radius:999px;line-height:1;transition:.15s;
  }
  .size-ctl button:hover{background:var(--hover);color:var(--ink);}
  .size-ctl output{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--text-soft);min-width:40px;text-align:center;}

  .panel{
    display:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
    width:min(560px,calc(100vw - 24px));padding:14px;
    background:var(--page);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  }
  .panel.open{display:block;animation:fadeUp .2s ease;}
  .search-field{
    display:flex;align-items:center;gap:8px;background:var(--page);border:1px solid var(--line);
    border-radius:12px;padding:6px 12px;transition:border-color .15s,box-shadow .15s;
  }
  .search-field:focus-within{border-color:var(--gold-soft);box-shadow:0 0 0 3px var(--hover);}
  .search-field>svg{width:17px;height:17px;stroke:var(--text-soft);fill:none;stroke-width:1.8;flex:none;}
  .search-field input{
    flex:1;min-width:0;border:none;background:none;outline:none;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.88rem;color:var(--text);padding:6px 0;
  }
  .search-field input::placeholder{color:var(--text-soft);}
  .search-hint{font-size:.72rem;color:var(--text-soft);padding:9px 4px 2px;}
  .search-results{display:grid;gap:4px;margin-top:7px;max-height:min(44vh,330px);overflow-y:auto;}
  .sr-item{
    display:flex;align-items:flex-start;gap:10px;width:100%;text-align:start;background:var(--page);
    border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.82rem;color:var(--text);line-height:1.85;transition:.13s;
  }
  .sr-item:hover{border-color:var(--gold-soft);background:var(--hover);}
  .sr-item.cur{border-color:var(--gold-soft);background:var(--hover);box-shadow:0 0 0 2px var(--hover-strong) inset;}
  .sr-num{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--gold-ink);flex:none;
    border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-top:3px;background:var(--page-alt);
  }
  .sr-txt em{font-style:normal;background:var(--gold-ink);color:var(--gold-on);border-radius:3px;padding:0 2px;}

  main{max-width:var(--wrap);margin:0 auto;padding:24px 20px 56px;transition:max-width .2s ease;}
  body.focus-mode .topbar,body.focus-mode .toolbar,body.focus-mode .hint,
  body.focus-mode .preview,body.focus-mode .app-foot,body.focus-mode .to-top,body.focus-mode .tour{display:none;}
  body.focus-mode main{padding-top:28px;}

  .tour{
    position:relative;background:linear-gradient(135deg,var(--page),var(--page-alt));
    border:1px solid var(--gold-soft);border-radius:14px;padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-sm);
  }
  .tour[hidden]{display:none;}
  .tour h2{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.95rem;color:var(--ink);display:flex;align-items:center;gap:8px;}
  .tour p{font-size:.82rem;color:var(--text-soft);line-height:1.9;margin-top:6px;}
  .tour-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;}
  .tour-close{position:absolute;inset-inline-end:12px;top:10px;background:none;border:none;cursor:pointer;color:var(--text-soft);font-size:1rem;padding:5px 9px;border-radius:8px;}
  .tour-close:hover{background:var(--hover);color:var(--ink);}

  .resume{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--page);
    border:1px solid var(--gold-soft);border-radius:12px;padding:11px 16px;margin-bottom:16px;
    font-size:.82rem;color:var(--text);box-shadow:var(--shadow-sm);
  }
  .resume[hidden]{display:none;}
  .resume .rk{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;color:var(--gold-ink);background:var(--hover-strong);border-radius:999px;padding:2px 10px;}
  .resume .sp{margin-inline-start:auto;}
  .resume .go{background:var(--ink);color:var(--page);border:none;border-radius:999px;padding:7px 15px;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.78rem;cursor:pointer;transition:.15s;}
  .resume .go:hover{opacity:.9;}
  .resume .dismiss{background:none;color:var(--text-soft);padding:6px 9px;border-radius:8px;cursor:pointer;border:none;font-size:.9rem;}
  .resume .dismiss:hover{background:var(--hover);}

  .mushaf{
    position:relative;background:var(--page);border:1px solid var(--line);border-radius:8px;
    padding:44px clamp(18px,5vw,46px) 34px;box-shadow:var(--shadow);
  }
  .mushaf::before{content:"";position:absolute;inset:9px;border:1px solid var(--gold-soft);opacity:.4;border-radius:4px;pointer-events:none;}
  .orn::after{content:"۞";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:11px;font-style:normal;font-family:'Amiri',serif;}
  .orn{position:absolute;width:19px;height:19px;border:1.5px solid var(--gold-soft);opacity:.7;pointer-events:none;}
  .orn.tr{top:5px;inset-inline-end:5px;border-inline-start:0;border-bottom:0;}
  .orn.tl{top:5px;inset-inline-start:5px;border-inline-end:0;border-bottom:0;}
  .orn.br{bottom:5px;inset-inline-end:5px;border-inline-start:0;border-top:0;}
  .orn.bl{bottom:5px;inset-inline-start:5px;border-inline-end:0;border-top:0;}

  .surah-text,.pg-leaf-body,.pg-measure{
    font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:calc(1.68rem * var(--scale));line-height:var(--lh);color:var(--text);
    text-align:var(--align);text-align-last:center;
  }
  .surah-text{margin-top:28px;}
  body.qfont-amiri .surah-text,body.qfont-amiri .pg-leaf-body,body.qfont-amiri .pg-measure{
    font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;
  }
  body.qfont-scheherazade .surah-text,body.qfont-scheherazade .pg-leaf-body,body.qfont-scheherazade .pg-measure{
    font-family:'Scheherazade New','Amiri','Sakkal Majalla','Traditional Arabic',serif;
    font-size:calc(1.95rem * var(--scale));
    line-height:calc(var(--lh) * 1.02);
  }
  body.qfont-scheherazade .modal-arabic{
    font-family:'Scheherazade New','Amiri','Sakkal Majalla','Traditional Arabic',serif;
    font-size:calc(1.9rem * var(--scale) * .94);
  }
  /* حاوية القياس المخفية: تقيس بعرض الورقة الحقيقي خارج الشاشة */
  .pg-measure{position:absolute;top:0;inset-inline-start:0;visibility:hidden;pointer-events:none;z-index:-1;margin:0;}
  .pg-probe{position:absolute;top:0;inset-inline-start:0;visibility:hidden;pointer-events:none;z-index:-1;margin:0;}
  /* ===== صفحات المصحف ===== */
  .pg-head,.pg-foot{display:none;}
  body.paginated .pg-head,body.paginated .pg-foot{display:flex;}
  /* الورقة تحمل رأسها داخلها، فلا يُرسم الرأس العام فوقها */
  body.paginated .pg-head{animation:pgIn .24s ease;display:none;}
  .pg-head{
    align-items:baseline;justify-content:space-between;gap:12px;margin-top:24px;padding-bottom:9px;
    border-bottom:1px solid var(--line);
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.74rem;color:var(--text-soft);
  }
  .pg-name{color:var(--gold-ink);font-size:.88rem;font-weight:700;}
  .pg-meta{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pg-badge{
    flex:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px;background:var(--page-alt);
    font-size:.7rem;color:var(--ink);
  }
  .pg-foot{align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);}
  .pg-foot button{
    display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:40px;
    background:var(--page);border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink);
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:1.15rem;line-height:1;transition:.15s;
  }
  .pg-foot button:hover:not(:disabled){background:var(--hover);border-color:var(--gold-soft);}
  .pg-foot button:disabled{opacity:.3;cursor:default;}
  .pg-of{flex:1;text-align:center;font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.78rem;color:var(--text-soft);}
  body.paginated .end-mark{display:none;margin-top:20px;}
  body.paginated.pg-last .end-mark{display:block;}
  body.paginated:not(.pg-last) .end-mark{display:none;}
  body.paginated .ayah.cont{box-shadow:none;}

  /* ===== المصحف المفتوح: ورقتان متجاورتان مع كعب الكتاب ===== */
  /* عمود القراءة المخصص أضيق من عرض الورقتين، فنفسح له في العرض المزدوج */
  /* العرض المزدوج يوسّع العمود، فيجب أن يُعرَف قبل القياس لا بعده؛ ونوقف
     انتقال العرض أثناء القياس وإلا قِسنا عرضًا في منتصف حركته */
  .pg-measuring main{transition:none;}
  body.paginated.spread main{max-width:min(92rem,100%);}
  .surah-text.leaves{display:flex;gap:0;align-items:stretch;}
  .surah-text.leaves .pg-leaf{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    padding-inline:22px;
  }
  @media (max-width:1180px){ .surah-text.leaves .pg-leaf{padding-inline:14px;} }
  .surah-text.leaves .pg-leaf + .pg-leaf{border-inline-start:1px solid var(--line);}
  /* الورقة الواحدة على الجوال: بلا كعب ولا حشوة زائدة */
  .pg-leaf-body{min-width:0;}
  .pg-leaf + .pg-leaf .pg-leaf-body{}
  .leaf-head,.leaf-foot{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;color:var(--text-soft);
    display:flex;align-items:baseline;gap:8px;
  }
  .leaf-head{padding-bottom:7px;margin-bottom:14px;border-bottom:1px solid var(--line-soft);animation:pgIn .24s ease;}
  .leaf-foot{padding-top:9px;margin-top:16px;border-top:1px solid var(--line-soft);}
  .leaf-name{color:var(--gold-ink);font-size:.82rem;font-weight:700;}
  .leaf-meta{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .leaf-badge{
    flex:none;border:1px solid var(--line);border-radius:999px;padding:2px 10px;
    background:var(--page-alt);font-size:.72rem;color:var(--ink);
  }
  .leaf-num{flex:1;text-align:center;font-size:.74rem;}
  /* الورقة الفارغة في آخر زوج: تبقى مكانها ولا تنهار */
  .pg-leaf.blank{background:var(--page-alt);opacity:.5;}
  @keyframes pgIn{from{opacity:.25;transform:translateY(7px);}to{opacity:1;transform:none;}}

  .ayah{cursor:pointer;border-radius:6px;padding:0 3px;transition:color .15s,background .15s,box-shadow .15s;box-shadow:inset 0 -1px 0 0 transparent;}
  .ayah:hover{background:var(--hover);box-shadow:inset 0 -1px 0 0 var(--gold-soft);}
  .ayah.active{background:var(--hover-strong);box-shadow:inset 0 -1px 0 0 var(--gold);}
  .ayah.hit{background:var(--hover-strong);}
  .ayah.hit em{font-style:normal;background:var(--gold-ink);color:var(--gold-on);border-radius:3px;padding:0 1px;}
  .searching .ayah:not(.hit){opacity:.3;}
  .ayah-end{
    font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:1em;color:var(--gold-ink);cursor:pointer;
    display:inline-block;text-align:center;min-width:0;height:auto;
    border:0;border-radius:0;margin:0 5px;padding:0;vertical-align:middle;
    position:relative;top:-2px;line-height:1.55;background:transparent;transition:.16s;
  }
  .ayah-end::before{content:"۝";}
  .ayah-end:hover{color:var(--gold);background:transparent;transform:scale(1.08);}
  .ayah-end.playing{color:var(--gold);background:transparent;border:0;box-shadow:none;filter:drop-shadow(0 0 6px var(--gold-soft));transform:scale(1.06);}
  .ayah-end.memorized::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px dashed var(--ok);opacity:.7;}
  .ayah .ayah-end{min-width:0;height:auto;padding:0;margin:0 .3em;top:0;font-size:1em;line-height:1.55;border:0;background:transparent;}
  .ayah-end[data-qcf]:not(.num-latin)::before{content:none;}
  .ayah .ayah-end.playing{color:var(--gold);background:transparent;border:0;box-shadow:none;}
  .ayah .ayah-end.memorized::after{display:block;inset:-2px;}
  .ayah-end.num-latin{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif!important;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding-top:.7em;min-width:.9em;height:1.8em;margin-inline:.7em;line-height:1;position:relative;font-size:.4em;top:0;vertical-align:middle;}
  .ayah-end.num-latin::before{position:absolute;inset:-.3em;display:flex;align-items:center;justify-content:center;font-family:'Amiri',serif;font-size:2.35em;line-height:1;color:var(--gold-soft);pointer-events:none;}
  .reading .ayah-end.num-latin{font-size:.4em;padding-top:.4em;}
  .reading .ayah-end.num-latin::before{font-size:2.15em;}
  body.qfont-amiri .ayah-end,body.qfont-scheherazade .ayah-end{margin-inline-start:12px;}
  .ayah-panel{
    display:none;margin:14px 0 4px;background:var(--page-alt);border:1px solid var(--line);
    border-radius:10px;padding:14px 16px;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;text-align:start;
  }
  .ayah-panel.open{display:block;animation:slideDown .22s ease;}
  @keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
  .ayah-panel h4{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--gold-ink);margin-bottom:7px;display:flex;align-items:center;gap:7px;}
  .ayah-panel h4::after{content:"";flex:1;height:1px;background:var(--line);}
  .ayah-panel .tr{font-size:.86rem;line-height:1.95;color:var(--text);}
  .ayah-panel .tf{font-size:.8rem;line-height:1.95;color:var(--text-soft);margin-top:13px;}
  .ayah-panel .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px;}
  .ayah-panel .acts button{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;background:var(--page);border:1px solid var(--line);
    color:var(--gold-ink);border-radius:999px;padding:7px 14px;min-height:32px;cursor:pointer;transition:.14s;
  }
  .ayah-panel .acts button:hover{background:var(--hover-strong);}

  body.memorize:not(.hide-words) .ayah{filter:blur(7px);transition:filter .25s ease,color .15s;user-select:none;}
  body.memorize:not(.hide-words) .ayah.revealed{filter:none;}
  body.memorize:not(.hide-words) .ayah.revealed:hover{filter:blur(2px);}
  body.memorize:not(.hide-words) .qcf-ayah{filter:blur(7px);transition:filter .25s ease;user-select:none;}
  body.memorize:not(.hide-words) .qcf-ayah.revealed{filter:none;}
  body.memorize .mushaf{border-style:dashed;border-color:var(--gold-soft);}

  .end-mark{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px;color:var(--gold);font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:1.35rem;}
  .end-mark::before,.end-mark::after{content:"";height:1px;width:min(120px,30%);background:linear-gradient(90deg,transparent,var(--gold-soft));}
  .end-mark::after{background:linear-gradient(90deg,var(--gold-soft),transparent);}
  .page-foot{
    display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:24px;padding-top:15px;
    border-top:1px solid var(--line-soft);font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.71rem;color:var(--text-soft);
  }
  /* عرض الفرشة: صفحتان جنبًا لجنب (اليمنى فردية) بخط أصغر */
  body.spread #surah-text{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;}
  body.spread #spread-r{border-inline-end:1px solid var(--line-soft);padding-inline-end:11px;}
  body.spread #spread-l{padding-inline-start:11px;}
  body.spread .spread-col{font-size:88%;min-width:0;}
  body.spread .spread-col .ayah-end:not(.num-latin){min-width:0;height:auto;font-size:.9em;}
  body.spread #spread-l:empty::after{content:'۝';display:block;text-align:center;color:var(--gold-soft);opacity:.55;padding:46px 0;font-size:1.5rem;}
  @media (max-width:760px){
    body.spread #spread-r{padding-inline-end:6px;}
    body.spread #spread-l{padding-inline-start:6px;}
    body.spread .spread-col{font-size:82%;}
  }
  .page-foot .dot{width:3px;height:3px;border-radius:50%;background:var(--line);}
  /* علامات المصحف: جزء/حزب/ربع وسجدة + زخرفة رأس الصفحة */
  .mushaf-mark{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.62rem;line-height:1.7;color:var(--gold-ink);border:1px solid var(--line-soft);border-radius:999px;padding:0 9px;margin:0 6px;}
  .mushaf-mark.mk-juz{font-size:.64rem;font-weight:700;color:var(--gold-ink);background:transparent;border-color:var(--gold-soft);padding:0 10px;}
  .mushaf-mark.mk-hizb{border-style:double;border-width:3px;padding:0 10px;}
  .mushaf-mark.mk-rub{opacity:.9;}
  .sajdah-mark{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border:1px solid var(--gold-soft);border-radius:50%;color:var(--gold-ink);font-size:.85rem;margin:0 5px;vertical-align:middle;background:var(--hover-strong);}
  .pg-head{border:2px solid var(--gold-soft);outline:1px solid var(--line-soft);outline-offset:3px;border-radius:14px;background:linear-gradient(180deg,var(--page-alt),var(--page));padding:10px 16px;}
  .pg-head .pg-name::before{content:'۞ ';color:var(--gold);}
  .pg-head .pg-name::after{content:' ۞';color:var(--gold);}
  body.mushaf-page #pg-head{display:flex;}
  /* زخرفة اسم السورة: إطار زخرفي يتبدّل حسب المظهر، والاسم في وسطه */
  .mushaf-band{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    margin:26px 0 8px;padding:15px min(19%,150px);min-height:64px;
    border:0;border-radius:0;background-color:transparent;
    background-image:var(--surah-deco);background-repeat:no-repeat;background-position:center center;background-size:100% auto;
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.74rem;color:var(--text-soft);text-align:center;
  }
  .mushaf-band .pg-name{color:var(--gold-ink);font-size:1.02rem;font-weight:700;line-height:1.4;}
  .mushaf-band .pg-name::before,.mushaf-band .pg-name::after{content:none;}
  .mushaf-band .pg-meta{flex:none;max-width:100%;font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  kbd{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;background:var(--page-alt);color:var(--ink);
    border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;
  }

  .preview{
    position:fixed;z-index:26;max-width:330px;background:var(--page);border:1px solid var(--gold-soft);
    border-radius:10px;padding:11px 14px;box-shadow:var(--shadow);font-size:.8rem;color:var(--text);
    pointer-events:none;opacity:0;transform:translateY(5px);transition:.15s;line-height:1.75;
  }
  .preview.show{opacity:1;transform:translateY(0);}
  .preview b{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;color:var(--gold-ink);display:block;margin-bottom:5px;}

  .quick{
    position:fixed;z-index:40;background:var(--page);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow-lg);padding:5px;min-width:184px;display:none;
  }
  .quick.open{display:block;animation:pop .13s ease;}
  @keyframes pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
  @keyframes fadeUp{from{opacity:0;}to{opacity:1;}}
  .quick button{
    display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;cursor:pointer;
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.81rem;color:var(--text);padding:8px 11px;border-radius:8px;text-align:start;
  }
  .quick button:hover{background:var(--hover);color:var(--ink);}
  .quick button svg{width:15px;height:15px;stroke:var(--text-soft);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;}
  .quick hr{border:0;border-top:1px solid var(--line-soft);margin:4px 6px;}

  .player{
    position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s,visibility .25s;
  }
  .player.show{opacity:1;visibility:visible;pointer-events:auto;}
  body.playing .toolbar .tools{visibility:hidden;}
  .player-progress{
    height:15px;background:none;cursor:pointer;position:relative;touch-action:none;
    display:flex;align-items:center;
  }
  .player-progress::before{
    content:"";position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);
    height:3px;background:var(--line-soft);
  }
  .player-progress i{
    position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:0;height:3px;
    background:linear-gradient(90deg,var(--gold-soft),var(--gold));border-radius:3px 0 0 3px;
  }
  .player-body{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:8px 12px;}
  .p-info{min-width:0;flex:1;}
  .p-title{font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:1rem;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .p-sub{font-size:.72rem;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .p-ctl{display:flex;align-items:center;gap:5px;flex:none;}
  .p-btn{
    background:none;border:1px solid transparent;cursor:pointer;color:var(--text-soft);
    width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:.15s;
  }
  .p-btn:hover{color:var(--ink);background:var(--hover);}
  .p-btn:disabled{opacity:.32;cursor:default;}
  .p-btn:disabled:hover{color:var(--text-soft);background:none;}
  .p-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .p-btn.main{width:44px;height:44px;background:var(--ink);color:var(--page);}
  .p-btn.main:hover{opacity:.9;transform:scale(1.05);}
  .p-btn.main svg{fill:currentColor;stroke:none;}
  .p-btn .ic-pause{display:none;}
  .p-btn.playing .ic-play{display:none;}
  .p-btn.playing .ic-pause{display:block;}
  .p-chip{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--text-soft);background:var(--page);
    border:1px solid var(--line);border-radius:999px;padding:6px 12px;min-height:32px;cursor:pointer;white-space:nowrap;transition:.15s;
  }
  .p-chip:hover{color:var(--ink);border-color:var(--gold-soft);background:var(--hover);}
  .p-chip.on{color:var(--page);background:var(--gold);border-color:var(--gold);}
  .p-right{display:flex;align-items:center;gap:8px;flex:none;}
  .p-right select{
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.76rem;color:var(--text);background:var(--page);
    border:1px solid var(--line);border-radius:8px;padding:6px 8px;max-width:140px;
  }
  .p-close{background:none;border:none;cursor:pointer;color:var(--text-soft);font-size:1rem;padding:6px 9px;border-radius:8px;}
  .p-close:hover{background:var(--hover);color:var(--ink);}
  .player .player-progress{position:absolute;top:-5px;inset-inline:22px;height:12px;}
  .player .p-sub{display:none;}
  .player .p-title{font-size:.9rem;}
  .player .p-info{flex:1 1 auto;min-width:30px;}
  .player .p-ctl{gap:1px;}
  .player .p-btn{width:32px;height:32px;}
  .player .p-btn.main{width:36px;height:36px;}
  .player .p-btn svg{width:16px;height:16px;}
  .player .p-chip{padding:4px 10px;min-height:28px;font-size:.68rem;}
  .player .p-right{gap:5px;}
  .player .p-right select{max-width:100px;padding:5px 6px;font-size:.7rem;}
  .player .p-close{padding:5px 7px;}

  .backdrop{position:fixed;inset:0;background:var(--backdrop);opacity:0;pointer-events:none;transition:.22s;z-index:32;}
  .backdrop.open{opacity:1;pointer-events:auto;}
  .drawer{
    position:fixed;top:0;right:0;bottom:0;width:340px;max-width:88vw;background:var(--parchment);
    box-shadow:-14px 0 44px -18px rgba(0,0,0,.4);transform:translateX(102%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);z-index:33;display:flex;flex-direction:column;
  }
  .drawer.open{transform:translateX(0);}
  .drawer-head{padding:16px 18px 12px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;}
  .drawer-head h3{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.95rem;color:var(--ink);}
  .drawer-head button{background:none;border:none;cursor:pointer;color:var(--text-soft);font-size:1.05rem;padding:5px 9px;border-radius:8px;}
  .drawer-head button:hover{background:var(--hover);color:var(--ink);}
  .drawer-search{padding:10px 14px;border-bottom:1px solid var(--line-soft);}
  .drawer-search input{
    width:100%;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.85rem;color:var(--text);background:var(--page);
    border:1px solid var(--line);border-radius:10px;padding:9px 13px;outline:none;
  }
  .drawer-search input:focus{border-color:var(--gold-soft);box-shadow:0 0 0 3px var(--hover);}
  .drawer-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line-soft);}
  .drawer-tabs button{
    flex:1;background:none;border:none;border-radius:8px;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.78rem;color:var(--text-soft);padding:8px 4px;transition:.15s;
  }
  .drawer-tabs button[aria-selected="true"]{background:var(--hover-strong);color:var(--ink);font-weight:700;}
  .drawer-list{overflow-y:auto;flex:1;padding:8px 10px 20px;overscroll-behavior:contain;}
  .drawer-item{
    display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;text-decoration:none;
    color:var(--text);font-size:.87rem;width:100%;background:none;border:none;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    text-align:start;cursor:pointer;transition:background .13s;
  }
  .drawer-item:hover{background:var(--hover);}
  .drawer-item.current{color:var(--ink);font-weight:700;background:var(--hover-strong);}
  .drawer-item .idx{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;color:var(--text-soft);width:32px;flex:none;
    text-align:center;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:4px 0;min-height:30px;
  }
  .drawer-item .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .drawer-item .soon{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.68rem;color:var(--text-soft);}
  .drawer-item .bar{width:34px;height:3px;background:var(--line);border-radius:99px;overflow:hidden;flex:none;}
  .drawer-item .bar i{display:block;height:100%;background:var(--gold);}
  .drawer-item .star{flex:none;background:none;border:none;cursor:pointer;color:var(--line);padding:5px;display:inline-flex;border-radius:7px;}
  .drawer-item .star:hover{color:var(--gold-ink);background:var(--hover);}
  .drawer-item .star.on{color:var(--gold-ink);}
  .drawer-item .star svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linejoin:round;}
  .drawer-item .star.on svg{fill:currentColor;}

  /* tools: mushaf map, stats, backup */
  .map-wrap,.stats-wrap{padding:6px 4px 12px;}
  .map-note{font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.75rem;color:var(--text-soft);margin:2px 4px 12px;line-height:1.9;}
  .juz-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px;}
  .juz-cell{
    background:var(--page);border:1px solid var(--line);border-radius:10px;padding:8px 9px;cursor:pointer;
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;color:var(--text);text-align:start;transition:.14s;
  }
  .juz-cell:hover{border-color:var(--gold-soft);background:var(--hover);}
  .juz-cell.cur{border-color:var(--gold);background:var(--hover-strong);color:var(--ink);}
  .juz-cell .jn{display:block;font-size:.92rem;font-weight:700;}
  .juz-cell .js{display:block;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.71rem;color:var(--text-soft);margin-top:3px;}
  .juz-cell .bar{display:block;height:3px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:6px;}
  .juz-cell .bar i{display:block;height:100%;background:var(--gold);}
  .stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:14px;}
  .stat-tile{background:var(--page);border:1px solid var(--line);border-radius:12px;padding:11px 12px;}
  .stat-tile .v{display:block;font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:1.15rem;color:var(--gold-ink);}
  .stat-tile .k{display:block;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.71rem;color:var(--text-soft);margin-top:3px;}
  .stat-list{display:flex;flex-direction:column;gap:6px;}
  .stat-row{
    display:flex;align-items:center;gap:9px;width:100%;background:var(--page);border:1px solid var(--line);
    border-radius:10px;padding:8px 11px;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.76rem;color:var(--text);text-align:start;transition:.14s;
  }
  .stat-row:hover{border-color:var(--gold-soft);background:var(--hover);}
  .stat-row .jn{flex:none;font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.92rem;min-width:74px;color:var(--ink);}
  .stat-row .bar{flex:1;height:4px;background:var(--line);border-radius:99px;overflow:hidden;}
  .stat-row .bar i{display:block;height:100%;background:var(--gold);}
  .stat-row .js{flex:none;color:var(--text-soft);font-size:.71rem;min-width:62px;text-align:end;}
  .backup-note{font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.7rem;color:var(--text-soft);line-height:1.95;margin:0 0 10px;}
  .scope-ctl{display:inline-flex;gap:1px;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:2px;}
  .scope-ctl button{
    background:none;border:none;cursor:pointer;color:var(--text-soft);font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.74rem;padding:7px 14px;min-height:34px;border-radius:999px;line-height:1.5;transition:.15s;
  }
  .scope-ctl button[aria-pressed="true"]{background:var(--hover-strong);color:var(--ink);font-weight:700;}
  .view-seg{display:inline-flex;gap:1px;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:2px;flex:none;}
  .view-seg button{background:none;border:none;cursor:pointer;color:var(--text-soft);font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.74rem;padding:7px 14px;min-height:34px;border-radius:999px;line-height:1.5;transition:.15s;white-space:nowrap;}
  .view-seg button.active{background:var(--ink);color:var(--page);font-weight:700;}
  .scope-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 10px;}
  .scope-row .sr-count{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.71rem;color:var(--gold-ink);}
  .sr-item .sr-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
  .sr-item .sr-ref{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.71rem;color:var(--gold-ink);flex:none;}
  .drawer-foot{padding:10px 16px;border-top:1px solid var(--line-soft);font-size:.72rem;color:var(--text-soft);display:flex;justify-content:space-between;}
  .empty{text-align:center;color:var(--text-soft);font-size:.8rem;padding:30px 12px;line-height:2;}

  .modal-backdrop{
    position:fixed;inset:0;background:var(--backdrop);opacity:0;pointer-events:none;transition:.22s;z-index:50;
    display:flex;align-items:center;justify-content:center;padding:18px;
  }
  .modal-backdrop.open{opacity:1;pointer-events:auto;}
  .modal{
    background:var(--page);border:1px solid var(--line);border-radius:14px;max-width:540px;width:100%;
    max-height:min(88vh,860px);overflow-y:auto;padding:26px 26px 22px;position:relative;
    transform:translateY(18px) scale(.985);transition:.24s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow-lg);
  }
  .modal-backdrop.open .modal{transform:translateY(0) scale(1);}
  .modal-close{position:absolute;top:10px;left:10px;background:none;border:none;cursor:pointer;color:var(--text-soft);font-size:1.1rem;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;line-height:1;}
  .modal-close:hover{background:var(--hover);color:var(--ink);}
  .modal-num{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--gold-ink);text-align:center;margin-bottom:12px;}
  .modal-arabic{
    font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:calc(1.68rem * var(--scale) * .94);line-height:2.4;text-align:center;
    color:var(--ink);margin-bottom:16px;padding:18px 12px;background:var(--page-alt);border-radius:10px;border:1px solid var(--line-soft);
  }
  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;}
  .tabs button{
    background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.82rem;color:var(--text-soft);padding:9px 13px;transition:.15s;
  }
  .tabs button:hover{color:var(--ink);}
  .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold);font-weight:700;}
  .tabpanel[hidden]{display:none;}
  .tabpanel{font-size:.9rem;line-height:2.05;color:var(--text);}
  .tabpanel.tafsir{font-size:.85rem;color:var(--text-soft);}
  .info-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;}
  .info-list .fact,dl.facts .fact{background:var(--page-alt);border-radius:8px;padding:9px 11px;border:1px solid var(--line-soft);}
  .modal-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;}
  .modal-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);}
  .modal-nav button{
    background:none;border:none;cursor:pointer;color:var(--text-soft);font-size:.82rem;
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;transition:.14s;
  }
  .modal-nav button:hover:not(:disabled){color:var(--gold-ink);background:var(--hover);}
  .modal-nav button:disabled{opacity:.3;cursor:default;}
  .modal-pos{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--text-soft);}

  .page-backdrop{position:fixed;inset:0;background:var(--backdrop);opacity:0;pointer-events:none;transition:.22s;z-index:44;}
  .page-backdrop.open{opacity:1;pointer-events:auto;}
  .page{
    position:fixed;inset:0;z-index:45;background:var(--parchment);
    display:flex;flex-direction:column;transform:translateY(101%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow-lg);
  }
  .page.open{transform:translateY(0);}
  .page-head{padding:16px 20px 10px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;position:relative;}
  .page-head h2{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.95rem;color:var(--ink);}
  .page-head button{background:none;border:none;cursor:pointer;color:var(--text-soft);font-size:1.05rem;padding:5px 9px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
  .page-head button:hover{background:var(--hover);color:var(--ink);}
  .page-head button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .page-body{overflow-y:auto;padding:4px 20px 26px;flex:1;}
  .set-group{padding:16px 0;border-bottom:1px solid var(--line-soft);}
  .set-group:last-of-type{border-bottom:0;}
  .set-group h3{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.74rem;color:var(--gold-ink);margin-bottom:11px;display:flex;align-items:center;gap:8px;}
  .set-group h3::after{content:"";flex:1;height:1px;background:var(--line-soft);}
  .set-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .set-row:last-child{margin-bottom:0;}
  .set-row .lbl{font-size:.85rem;color:var(--text);flex:1;min-width:0;}
  .set-row .lbl small{display:block;font-size:.7rem;color:var(--text-soft);margin-top:2px;line-height:1.7;}
  .set-row input[type=range]{flex:1;max-width:180px;height:26px;accent-color:var(--gold);}
  .set-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);border:2px solid var(--page);box-shadow:var(--shadow-sm);cursor:pointer;}
  .set-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:2px solid var(--page);cursor:pointer;}
  .set-row .val{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--text-soft);min-width:48px;text-align:center;}
  .swatches{display:flex;gap:8px;flex-wrap:wrap;}
  .swatch{
    display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:1px solid var(--line);
    border-radius:12px;padding:10px 10px;cursor:pointer;font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;
    color:var(--text-soft);transition:.15s;min-width:62px;
  }
  .swatch:hover{border-color:var(--gold-soft);}
  .swatch[aria-pressed="true"]{border-color:var(--gold);background:var(--hover);color:var(--ink);}
  .swatch .dots{display:flex;gap:3px;}
  .swatch .dots i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.14);}
  .segs{display:flex;gap:3px;background:var(--page);border:1px solid var(--line);border-radius:999px;padding:3px;}
  .segs button{
    background:none;border:none;border-radius:999px;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
    font-size:.73rem;color:var(--text-soft);padding:5px 12px;transition:.15s;white-space:nowrap;
  }
  .segs button:hover{color:var(--ink);}
  .segs button[aria-pressed="true"]{background:var(--ink);color:var(--page);}
  .switch{position:relative;width:46px;height:27px;flex:none;}
  .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
  .switch span{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.2s;pointer-events:none;}
  .switch span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:21px;height:21px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.24);transition:.2s;}
  .switch input:checked+span{background:var(--ok);}
  .switch input:checked+span::after{transform:translateX(-19px);}
  .switch input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px;}
  .btn-ghost{
    background:var(--page);border:1px solid var(--line);border-radius:10px;cursor:pointer;
    font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.8rem;color:var(--text-soft);padding:9px 16px;transition:.15s;
  }
  .btn-ghost:hover{color:var(--ink);border-color:var(--gold-soft);background:var(--hover);}

  .card{background:var(--page);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-top:18px;box-shadow:var(--shadow-sm);}
  .card h2{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.9rem;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
  .card h2::after{content:"";flex:1;height:1px;background:var(--line-soft);}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0;}
  .fact dt{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.72rem;color:var(--text-soft);}
  .fact dd{font-size:.92rem;color:var(--ink);margin-top:4px;font-weight:600;}
  .note{font-size:.85rem;line-height:2;color:var(--text);margin-top:13px;}
  .note em{font-style:normal;color:var(--ink);font-weight:600;}
  .src{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;color:var(--gold-ink);display:block;margin-top:4px;}
  .lessons{display:grid;gap:11px;}
  .lesson{border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px;background:var(--page-alt);}
  .lesson h3{font-size:.88rem;color:var(--ink);margin-bottom:6px;}
  .lesson p{font-size:.79rem;line-height:1.9;color:var(--text-soft);}
  .ref{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
  .ref-btn{
    font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;background:var(--page);border:1px solid var(--line);
    color:var(--gold-ink);border-radius:999px;padding:7px 13px;min-height:30px;cursor:pointer;transition:.14s;
  }
  .ref-btn:hover{background:var(--hover-strong);transform:translateY(-1px);}
  .app-foot{margin-top:26px;text-align:center;font-size:.72rem;color:var(--text-soft);line-height:2;display:flex;flex-direction:column;gap:8px;align-items:center;}
  .app-foot button{background:none;border:none;color:var(--gold-ink);font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.7rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:7px 12px;min-height:34px;border-radius:9px;}
  .app-foot .foot-mushaf{color:var(--gold-ink);font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.74rem;text-decoration:none;border:1px solid var(--gold-soft);border-radius:999px;padding:8px 20px;background:var(--hover);}
  .app-foot .foot-mushaf:hover{background:var(--hover-strong);}
  .surah-pager{display:flex;gap:10px;justify-content:space-between;margin:26px 0 6px;padding-top:18px;border-top:1px solid var(--line);}
  .pager-link{flex:1;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--page);color:var(--text);text-decoration:none;transition:.15s;min-width:0;}
  .pager-link.next{margin-inline-start:auto;text-align:end;align-items:flex-end;}
  .pager-link:hover{border-color:var(--gold-soft);background:var(--hover);}
  .pager-dir{font-size:.7rem;color:var(--text-soft);}
  .pager-name{font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:1.05rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  #pg-jump{width:78px;flex:none;font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.74rem;color:var(--text);background:var(--page);border:1px solid var(--line);border-radius:999px;padding:7px 10px;text-align:center;outline:none;}
  #pg-jump:focus{border-color:var(--gold-soft);box-shadow:0 0 0 3px var(--hover);}
  /* داخل ورقة المصحف: رقم الصفحة الحالية في المنتصف وقابل للكتابة */
  body.mushaf-page .pg-foot{justify-content:center;gap:14px;margin-top:18px;padding-top:12px;}
  body.mushaf-page #pg-of{display:none;}
  body.mushaf-page #pg-jump{
    width:68px;min-height:40px;padding:7px 8px;border-radius:12px;background:var(--page-alt);
    color:var(--ink);font-size:.92rem;font-weight:700;cursor:text;
  }
  body.mushaf-page #pg-jump:focus{background:var(--page);}

  .toast{
    position:fixed;bottom:calc(var(--player-h) + var(--toolbar-h) + 20px);left:50%;transform:translate(-50%,18px);
    background:var(--ink);color:var(--page);padding:11px 18px;border-radius:999px;font-size:.8rem;
    box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.24s;z-index:70;
    max-width:92vw;display:flex;align-items:center;gap:12px;
  }
  .toast.show{opacity:1;transform:translate(-50%,0);}
  .toast button{background:rgba(255,255,255,.16);border:none;border-radius:999px;padding:4px 12px;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.74rem;color:var(--page);}
  .toast button:hover{background:rgba(255,255,255,.3);}

  .to-top{
    position:fixed;bottom:calc(var(--player-h) + var(--toolbar-h) + 20px);inset-inline-end:18px;z-index:26;width:42px;height:42px;
    border-radius:50%;background:var(--page);border:1px solid var(--line);color:var(--ink);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
    opacity:0;pointer-events:none;transition:.22s;
  }
  .to-top.show{opacity:1;pointer-events:auto;}
  .to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

  .focus-exit{
    display:none;position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);inset-inline-end:14px;z-index:28;
    align-items:center;gap:7px;background:var(--glass);border:1px solid var(--line);color:var(--text-soft);
    border-radius:999px;padding:8px 14px;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;font-size:.74rem;cursor:pointer;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);
    animation:pop .18s ease;transition:.15s;
  }
  body.focus-mode .focus-exit{display:inline-flex;}
  .focus-exit:hover{color:var(--ink);border-color:var(--gold-soft);background:var(--hover);}
  .focus-exit svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}
  .focus-exit:active{transform:scale(.95);}

  @media (max-width:760px){
    .topbar{padding:9px 12px;}
    .toolbar{padding:7px 12px;}
    main{padding:5px 5px 40px;}
    .mushaf{padding:10px 10px 20px;}
    .mushaf::before{inset:7px;}
    .tb-title strong{font-size:1rem;}
    .icon-btn .label{display:none;}
    .tools{overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
    .tools::-webkit-scrollbar{display:none;}
    .tool{padding:7px 11px;font-size:.72rem;}
    .toolbar .tools .tool{font-size:0;gap:0;padding:8px 11px;min-height:38px;}
    .card{padding:16px;}
    .modal{padding:22px 18px 18px;}
    .preview{display:none;}
    .player-body{gap:10px;padding:9px 12px;}
    .p-right select{max-width:92px;font-size:.7rem;}
    .p-chip{display:none;}
    .focus-exit span{display:none;}
    .focus-exit{padding:9px;}
    .page-body{padding:4px 16px 30px;}
    .set-row input[type=range]{max-width:120px;}
    /* أصابع أوسع على الشاشات الصغيرة */
    .size-ctl button,.scope-ctl button,.view-seg button,.ref-btn,.app-foot button{min-height:38px;}
    .scope-ctl button{padding:8px 15px;}
    .size-ctl button{padding:8px 14px;}
    .tb-title strong{font-size:1.05rem;}
    .brand-tab{padding:5px 10px;font-size:.72rem;min-height:32px;}
    .tb-title.tb-brand svg{width:18px;height:18px;}
    .tb-title.tb-brand strong{font-size:.92rem;}
  }
  @media (max-width:430px){
    .p-info .p-sub{display:none;}
  }
  @media (min-width:900px){
    .page{
      inset-inline:auto 0 0 auto;top:0;border-radius:0;width:400px;max-width:92vw;
      border-inline-start:1px solid var(--line);border-bottom:0;transform:translateX(101%);
    }
    .page.open{transform:translateX(0);}
    .page-head::before{display:none;}
    .page-head{padding:20px 24px 14px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
  }
  @media print{
    .topbar,.toolbar,.backdrop,.drawer,.modal-backdrop,.page,.page-backdrop,.toast,.to-top,.focus-exit,
    .resume,.preview,.quick,.player,.app-foot,.tour,.orn{display:none !important;}
    body{background:#fff;color:#000;padding-bottom:0;background-image:none;}
    main{max-width:100%;padding:0;}
    .mushaf{box-shadow:none;border:1px solid #ccc;padding:0;}
    .mushaf::before{display:none;}
    .ayah{color:#000;filter:none !important;}
    .ayah.read{color:#000;}
    .card{border:1px solid #ccc;page-break-inside:avoid;box-shadow:none;}
    .lesson,.fact,.info-list .fact{background:#f6f6f6;}
    .ayah-panel{display:none !important;}
    .page-foot{border-top:1px solid #ccc;}
    .pg-head,.pg-foot{display:none !important;}
    @page{margin:1.5cm;}
  }

  html[data-theme="light"]{ color-scheme:light; }
  a.icon-btn{ text-decoration:none; }
  .basmala{font-family:'Amiri','Sakkal Majalla','Traditional Arabic',serif;font-size:1.24rem;color:var(--gold);text-align:center;margin:30px 0 2px;letter-spacing:.02em;line-height:2;}
  .basmala.basmala-active{background:var(--hover-strong);box-shadow:inset 0 -1px 0 var(--gold);border-radius:10px;}
  .drawer-item.locked{opacity:.55;cursor:default;}
  .drawer-item .soon{font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.68rem;color:var(--text-soft);}
  .drawer-link{display:block;text-align:center;color:var(--gold-ink);font-family:'Reem Kufi','Segoe UI',Tahoma,sans-serif;font-size:.74rem;text-decoration:none;padding:12px 8px 4px;}
  .drawer-link:hover{text-decoration:underline;}
  .stat-row.avail{cursor:pointer;}
  .juz-cell .jnwrap{display:flex;align-items:baseline;justify-content:space-between;gap:6px;}