/* الثيم: أخضر مع بيج. الوضع الفاتح = ورق بيج + أخضر، الليلي = أخضر غامق + نص بيج */
:root{--beige:#ecdcae;--bg:#f3ead3;--card:#fbf6e8;--ink:#17402d;--mute:#667563;--acc:#1e6b47;--on-acc:#fbf3da;--line:#d9ccaa;--hl:#e8dca8;--hd:#17513a;--hd-ink:#f6edd0;--moon:#e9d9a6;--red:#c62828;--fs:28px}
body.night{--bg:#0f2a1f;--card:#17392a;--ink:#f1e6c8;--mute:#a9b9a5;--acc:#d9c48a;--on-acc:#10281d;--line:#2b5240;--hl:#2e5a40;--hd:#0a1f16;--hd-ink:#f1e6c8;--moon:#e9d9a6;--red:#ff7b72}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Tahoma,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--hd);color:var(--hd-ink)}
#streak{display:flex;align-items:center;gap:8px}
#streak svg{width:46px;height:46px}
#streak b{font-size:26px;color:var(--moon)}
#streak small{color:var(--hd-ink);opacity:.8}
.tools button{background:none;border:1px solid rgba(246,237,208,.4);color:var(--hd-ink);border-radius:10px;padding:6px 10px;margin-inline-start:4px;font-size:15px}
.tools button.on{background:rgba(246,237,208,.18)}
nav{display:flex;border-bottom:1px solid var(--line);background:var(--card)}
nav button{flex:1;padding:12px;background:none;border:0;border-bottom:3px solid transparent;color:var(--mute);font-size:16px}
nav button.on{color:var(--ink);border-color:var(--acc);font-weight:700}
main{max-width:720px;margin:auto;padding:12px 16px 150px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;align-items:center}
select,input,button{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
input[type=number]{width:70px}
#pgno{width:110px}
#name{flex:1;min-width:120px}
button.main{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}
.note{color:var(--mute);font-size:13px;margin:6px 0}
.mushaf{font-family:"Amiri Quran","Amiri","Scheherazade New","Traditional Arabic",serif;font-size:var(--fs);line-height:2.2;text-align:justify;padding:8px 4px}
.mushaf .bis{text-align:center;color:var(--ink);font-size:1.15em}
.ay{cursor:pointer;border-radius:8px;padding:2px 3px}
.ay i{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;margin:0 .35em;font-style:normal;font-family:"Segoe UI",Tahoma,sans-serif;font-size:.5em;color:var(--acc);border-radius:50%;box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--acc)}
.ay.on{background:var(--hl)}
body.hide .mushaf .ay{filter:blur(9px);pointer-events:none}
audio{width:100%;margin-top:8px}
/* أحكام التجويد بالأحمر */
.tj{color:var(--red)}
/* فواصل الصفحات */
.pg{display:flex;align-items:center;gap:10px;color:var(--acc);font:700 13px/1 "Segoe UI",Tahoma,sans-serif;margin:16px 0;scroll-margin-top:8px}
.pg:before,.pg:after{content:"";flex:1;border-top:1px solid var(--acc);opacity:.45}
.pg span{padding:5px 14px;border:1px solid var(--acc);border-radius:999px;background:var(--card)}
#read .mushaf{background:var(--card);border-radius:14px;padding:12px 14px;border:1px solid var(--line)}
#gate{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
#gate h1{margin:0;font-size:44px;color:var(--acc)}
body.gated #gate{display:flex}
body.gated header,body.gated nav,body.gated main{display:none}
/* نتيجة التدقيق */
.good{color:#2e8b57}
body.night .good{color:#7fe0a0}
.bad{color:var(--red);font-weight:700;text-decoration:underline wavy}
#check{border-top:1px dashed var(--line);margin-top:10px}
#check .ayl{display:block;margin:2px 0}
#check .ckh{display:flex;justify-content:space-between;align-items:center;font-family:"Segoe UI",Tahoma,sans-serif;font-size:16px}
#check .ckh button{padding:2px 9px}
#check .note{font-family:"Segoe UI",Tahoma,sans-serif;line-height:1.5}
/* الزر الدائري البيج */
#fab{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;z-index:20}
.fabbtn{width:68px;height:68px;border-radius:50%;background:var(--beige);color:#17513a;border:2px solid #17513a;font-size:28px;line-height:1;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.28);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fabbtn.sm{width:46px;height:46px;font-size:20px}
.fabbtn.on{background:#17513a;color:var(--beige);border-color:var(--beige)}
.fabbtn:active{transform:scale(.95)}
#menu{position:fixed;bottom:calc(104px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
#menu[hidden],#status[hidden]{display:none}
#menu button{background:var(--beige);color:#17513a;border:1px solid #17513a;text-align:start;padding:12px 16px;font-size:16px;white-space:nowrap}
.status{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:92vw;z-index:25;background:#17513a;color:#f6edd0;border-radius:14px;padding:9px 16px;font-size:14px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#gate button{min-width:230px;font-size:17px;padding:12px 18px}
#gate .fb{background:#1877f2;border-color:#1877f2;color:#fff;font-weight:700}
#gate .skip{background:none;border:0;color:var(--mute);text-decoration:underline;font-size:14px}
#gate .skip[hidden]{display:none}
#fab[hidden]{display:none}
/* شاشة التسجيل */
#rov{position:fixed;inset:0;z-index:200;background:#000;color:#f6edd0;display:flex;align-items:center;justify-content:center;text-align:center}
#rov[hidden]{display:none}
#rov .rbox{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}
#rov h2{margin:0;font-size:30px}
#rov p{margin:0;color:#b9b39a}
#rov .dot{width:22px;height:22px;border-radius:50%;background:#e53935;animation:pulse 1s infinite}
#rtime{font:700 38px/1 "Segoe UI",Tahoma,sans-serif;letter-spacing:2px;direction:ltr}
#rovStop{margin-top:18px;min-width:240px;padding:18px 24px;font-size:20px;font-weight:700;background:var(--beige);color:#17513a;border:2px solid #17513a;border-radius:999px}
#rovStop:disabled{opacity:.6}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
#frameBar{display:block;background:#17513a;color:#f6edd0;text-align:center;padding:12px 16px;font-weight:700;text-decoration:none;position:sticky;top:0;z-index:150}
#rtext{max-width:90vw;max-height:30vh;overflow:auto;color:#b9b39a;font-size:16px;line-height:1.7;min-height:1.7em}
#gate .fb[hidden]{display:none}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--beige);color:#17513a}
.plan.cur{border:2px solid #17513a}
.plan h3{margin:0}.plan .pr{font-size:22px;font-weight:bold;margin:4px 0}
.plan ul{margin:0;padding-inline-start:18px;font-size:14px}
.btnlink{display:block;text-align:center;background:#17513a;color:#f3ead3;padding:12px;border-radius:12px;margin:10px 0;text-decoration:none}
#sub a{color:inherit}
/* حواف دائرية وسلسة */
header{border-radius:0 0 26px 26px;padding-bottom:16px}
nav{margin:10px 12px 0;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;overflow:hidden}
nav button{border:0;border-radius:999px;padding:10px;transition:background .25s,color .25s}
nav button.on{background:var(--acc);color:var(--on-acc)}
select,input,button{border-radius:14px;transition:transform .15s,background .2s,box-shadow .2s}
button:active{transform:scale(.96)}
.card{border-radius:22px;box-shadow:0 2px 10px rgba(23,81,58,.08)}
#read .mushaf{border-radius:22px}
.tools button{border-radius:999px}
.fabbtn,#rovStop{border-radius:999px}
section:not([hidden]){animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* واجهة الاشتراك: بيج وأخضر دائمًا */
#sub{--bg:#f3ead3;--card:#fbf6e8;--ink:#17402d;--mute:#667563;--acc:#1e6b47;--on-acc:#fbf3da;--line:#d9ccaa;color:var(--ink);background:var(--bg);border-radius:26px;padding:8px 12px 14px;margin:10px 12px}
#sub .card{background:var(--card);color:var(--ink)}
#sub input,#sub select,#sub button{background:var(--card);color:var(--ink);border-color:var(--line)}
#sub button.main{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.subtop{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 0}
.subtop h2{margin:0;color:#17513a}
#subX{width:42px;height:42px;border-radius:50%;padding:0;font-size:20px;background:#17513a;color:#f3ead3;border:0}
.plan{border-radius:20px;border:1px solid #17513a}
.plan.cur{background:#17513a;color:#f3ead3}
.btnlink{border-radius:999px}
#rpos{font:700 26px/1.6 "Amiri Quran","Segoe UI",serif;color:#e9d9a6;min-height:3.2em}
.mgrid{display:flex;flex-wrap:wrap;gap:3px;direction:ltr;margin:8px 0}.mgrid i{width:22px;height:22px;border-radius:6px;background:#e4d9b8;font:10px/22px sans-serif;text-align:center;font-style:normal;color:#17402d}.mgrid i.a{background:#9bc7a8}.mgrid i.m{background:#17513a;color:#f3ead3}
.bar{height:10px;border-radius:99px;background:#e4d9b8;overflow:hidden}.bar i{display:block;height:100%;background:#17513a}
.bd{border-top:1px dashed var(--line);padding:8px 0}.bd .tf{font-size:15px;line-height:1.8;margin:4px 0}.bd .q{color:var(--acc);font-size:14px;margin:4px 0}.bd textarea{width:100%;font:inherit;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px}
.mushaf.sm{font-size:calc(var(--fs) * .8);line-height:2}
.voice{border-top:1px dashed var(--line);margin-top:10px;padding-top:8px;font-family:"Segoe UI",Tahoma,sans-serif}.vc{margin:8px 0}.vres{font-size:calc(var(--fs) * .7)}
#famCard h3,#planCard h3,#srsCard h3,#buddyCard h3{margin:0 0 6px}
/* ===== زخارف الأطراف + شاشة البسملة + الدخول ===== */
:root{--oL1:url("data:image/svg+xml,");--oL2:url("data:image/svg+xml,");--oL3:url("data:image/svg+xml,");--oL4:url("data:image/svg+xml,");--o1:var(--oL1);--o2:var(--oL2);--o3:var(--oL3);--o4:var(--oL4);--gold:#b8964a}
body.night{--o1:url("data:image/svg+xml,");--o2:url("data:image/svg+xml,");--o3:url("data:image/svg+xml,");--o4:url("data:image/svg+xml,");--gold:#d9c48a}
#splash{--o1:var(--oL1);--o2:var(--oL2);--o3:var(--oL3);--o4:var(--oL4);--gold:#b8964a;--card:#fbf6e8;--acc:#17513a}
.orn{position:relative;border:2px solid var(--gold);border-radius:20px;padding:34px 24px;background-color:var(--card);background-image:var(--o1),var(--o2),var(--o3),var(--o4);background-repeat:no-repeat;background-position:left 5px top 5px,right 5px top 5px,left 5px bottom 5px,right 5px bottom 5px;background-size:58px 58px;box-shadow:inset 0 0 0 5px var(--card),inset 0 0 0 6.5px var(--acc)}
#read .mushaf.orn,#wird .mushaf.orn{padding:40px 22px;border:2px solid var(--gold);border-radius:20px;background-color:var(--card);background-image:var(--o1),var(--o2),var(--o3),var(--o4);background-repeat:no-repeat;background-position:left 5px top 5px,right 5px top 5px,left 5px bottom 5px,right 5px bottom 5px;background-size:58px 58px}
#splash{position:fixed;inset:0;z-index:400;background:#f3ead3;display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#splash.gone{opacity:0;pointer-events:none}
#splash .sframe{width:min(86vw,400px);min-height:min(70vh,520px);display:flex;align-items:center;justify-content:center}
#splash .sbis{font-family:"Amiri Quran","Amiri","Scheherazade New","Traditional Arabic",FreeSerif,serif;font-size:34px;line-height:2.1;color:#17513a;text-align:center;animation:sin 1.2s ease both}
@keyframes sin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
#gate{overflow:auto}
.gframe{width:min(92vw,430px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gbis{font-family:"Amiri Quran","Amiri",FreeSerif,serif;font-size:24px;color:var(--gold)}
.glogo{width:84px;height:84px;border-radius:22px;box-shadow:0 4px 14px rgba(23,81,58,.3)}
.gframe h1{margin:0;font-size:46px;color:var(--acc)}
.gsub{margin:0;color:var(--ink);font-size:16px}.gnote{margin:4px 0;color:var(--mute);font-size:13px}
.gig{color:var(--acc);font-size:14px;text-decoration:underline;margin-top:6px}
#snd{padding:6px 10px}
.inst{display:flex;align-items:center;gap:8px;background:var(--hd);color:var(--hd-ink);border-radius:16px;padding:10px 12px;margin:10px 0;font-size:14px}.inst[hidden]{display:none}.inst span{flex:1}.inst button{padding:6px 12px}.inst #instX{background:none;border:0;color:inherit}
/* صفحة الدفع */
.paybtns button{flex:1;min-width:140px}.paybtns button.on{outline:3px solid var(--gold)}
.payp{border:1px solid var(--line);border-radius:18px;padding:12px;margin:10px 0;background:var(--card)}
.payhd{display:flex;justify-content:space-between;font-size:18px;margin-bottom:8px}
.acct{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff8e6;border:1px dashed #17513a;border-radius:14px;padding:10px;margin:8px 0}
.acct small{width:100%;color:#667563}.acct b{font-size:22px;letter-spacing:1px;flex:1}
.payp input{width:100%;margin:6px 0}.payp .main{width:100%}
.inst.gift{background:#7a5a14;color:#fff3cf}
.btnlink{color:#fff !important;background:#17513a;text-decoration:none;display:block;text-align:center;padding:14px;border-radius:30px;font-weight:700}
#devBox input,#devBox select{width:100%;margin:4px 0;box-sizing:border-box}#devBox .row{gap:6px}#devBox h4{margin:14px 0 6px}#devBox .acct button{padding:6px 12px}
#devBox .main{width:100%;margin-top:8px}#devBox .main+.note{margin:8px 0}