:root{--desk:#120E26;--cream:#FFF4E0;--saffron:#FFC23D;--coral:#FF5A5F;--mint:#3DD9B3;--lav:#B9AEDB;--ui:'Alexandria',system-ui,sans-serif;--serif:'Amiri',serif;--ruqaa:'Aref Ruqaa',serif;--display:'Lalezar',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--desk);color:var(--cream);font-family:var(--ui)}
body{overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a{color:var(--saffron)}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

#app{position:fixed;inset:0;display:flex;flex-direction:column}
.desk{background-color:var(--desk);background-image:radial-gradient(rgba(255,244,224,.06) 1px,transparent 1.3px);background-size:22px 22px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));position:relative;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--cream)}
.brand-logo{font-family:var(--ruqaa);font-weight:700;font-size:34px;line-height:1;color:var(--cream)}
.brand-sub{font-size:13px;color:var(--lav)}
.indicator{font-size:13.5px;color:var(--saffron);letter-spacing:.3px}
.tools{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(255,244,224,.25);background:transparent;color:var(--cream);font-size:13.5px;cursor:pointer;transition:background .2s,opacity .2s}
.pill:hover{background:rgba(255,194,61,.16)}
.pill[aria-pressed="true"]{background:var(--saffron);color:#24113F;border-color:var(--saffron)}
.pill:disabled{opacity:.3;cursor:default;background:transparent}
.foot{justify-content:center;gap:14px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.progress{width:min(260px,30vw);height:4px;border-radius:2px;background:rgba(255,244,224,.15);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--saffron);border-radius:2px;transition:width .5s ease;margin-inline-start:0}
.hint{font-size:12.5px;color:var(--lav)}

.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.book{position:absolute;left:50%;top:50%;width:1120px;height:780px;transform-origin:center center;transform:translate(-50%,-50%) scale(.5);touch-action:none;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .5s ease}
.book.ready{opacity:1}
.book-base{position:absolute;left:-9px;top:-7px;width:1138px;height:794px;border-radius:6px;background:#0A0719;box-shadow:0 40px 90px rgba(0,0,0,.6),0 12px 24px rgba(0,0,0,.4)}
.edge{position:absolute;top:3px;width:6px;height:774px}
.edge-l{left:-6px;background:repeating-linear-gradient(to right,#EDE6D3 0,#EDE6D3 1px,#C9C0A8 1px,#C9C0A8 2px);border-radius:2px 0 0 2px}
.edge-r{left:1120px;background:repeating-linear-gradient(to right,#C9C0A8 0,#C9C0A8 1px,#EDE6D3 1px,#EDE6D3 2px);border-radius:0 2px 2px 0}
.gutter{position:absolute;left:520px;top:0;width:80px;height:780px;z-index:4;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(20,10,40,.10) 38%,rgba(20,10,40,.30) 50%,rgba(20,10,40,.10) 62%,rgba(0,0,0,0) 100%)}
.fsh-wrap{position:absolute;left:0;top:0;width:1680px;height:780px;z-index:5;pointer-events:none;filter:blur(10px);display:none}
.fsh{position:absolute;left:0;top:0;width:560px;height:780px;transform-origin:0 0;background:rgba(12,6,30,.55)}
.backsheet{position:absolute;left:0;top:0;width:560px;height:780px;transform-origin:0 0;background:#F3ECDC;visibility:hidden;overflow:hidden;z-index:6}
.book.single{width:560px}
.book.single .book-base{width:578px}
.book.single .edge-l,.book.single .gutter{display:none}
.book.single .edge-r{left:560px}

.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s}
.loading.gone{opacity:0;pointer-events:none}
.loading .brand-logo{font-size:64px}
.dots{display:flex;gap:8px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--saffron);animation:bob 1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-8px);opacity:1}}
.ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.preview-badge{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:var(--coral);color:#2A0E1A;font-size:13px;padding:8px 16px;border-radius:20px;z-index:30;font-weight:600}
.toast{position:fixed;bottom:84px;left:50%;transform:translate(-50%,20px);background:var(--cream);color:#24113F;padding:12px 20px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:all .3s;z-index:90;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
#measure{position:fixed;left:0;top:0;width:560px;height:780px;visibility:hidden;pointer-events:none;overflow:hidden;z-index:-1;contain:strict}

/* ───────── الصفحة ───────── */
.page{position:absolute;left:0;top:0;width:560px;height:780px;overflow:hidden;transform-origin:0 0;visibility:hidden;background:var(--bg,#FBF7EE);color:var(--ink,#2A2540);direction:rtl;text-align:right}
#measure .page{visibility:hidden;position:absolute}
.page .shade,.backsheet .shade{position:absolute;left:0;top:0;width:3200px;height:3200px;transform-origin:0 0;pointer-events:none;display:none;z-index:9}
.pg-in{position:absolute;inset:0;padding:44px 56px 22px;display:flex;flex-direction:column}
.pg-body{flex:1 1 auto;min-height:0;overflow:hidden}
.pg-num{font-family:var(--ui);font-size:14px}
.pg-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;padding-top:6px;font-size:12px}
.pg-foot .cont{opacity:.75;font-family:var(--serif);font-style:italic;font-size:15px}
.pg-foot.final{flex-direction:column;align-items:stretch;gap:10px}
.reacts{display:flex;flex-wrap:wrap;gap:7px}
.react{min-height:40px;padding:0 13px;border-radius:20px;border:1.5px solid var(--acc);background:transparent;color:var(--acc);font-size:12.5px;cursor:pointer;font-family:var(--ui);transition:transform .15s,background .2s}
.react:active{transform:scale(.92)}
.react[aria-pressed="true"]{background:var(--acc);color:var(--bg)}
.react .c{margin-inline-start:5px;opacity:.85}
.foot-row{display:flex;align-items:center;gap:8px}
.foot-row .pg-num{margin-inline-start:auto}
.act{min-height:40px;padding:0 14px;border-radius:20px;border:0;background:var(--acc);color:var(--bg);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--ui)}
.act.ghost{background:transparent;color:var(--acc);border:1.5px dashed var(--acc)}
.act svg{width:16px;height:16px}

.kick{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.pill-s{padding:5px 14px;border-radius:20px;background:var(--pill-bg);color:var(--pill-fg);font-size:13px;white-space:nowrap}
.stamp{transform:rotate(-2.5deg);border:1.5px dashed var(--acc);color:var(--acc);padding:5px 10px;font-size:11.5px;border-radius:6px;text-align:center;line-height:1.5}
.a-title{margin:0 0 6px;font-family:var(--title-font,var(--serif));font-weight:var(--title-w,700);font-size:var(--title-size,38px);line-height:1.25;color:var(--acc)}
.byline{font-size:12.5px;opacity:.8;margin-bottom:14px}
.running{display:flex;justify-content:space-between;font-size:11.5px;opacity:.7;border-bottom:1px solid currentColor;padding-bottom:8px;margin-bottom:16px;gap:12px}
.running span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.blk{margin:0 0 calc(12px*var(--fs,1));font-family:var(--serif);font-size:calc(20.5px*var(--fs,1));line-height:1.9;color:var(--ink)}
.blk-p{white-space:pre-line}
.blk-h{font-size:calc(25px*var(--fs,1));font-weight:700;color:var(--acc);margin:6px 0 10px;line-height:1.4}
.blk-q{margin:10px 0 18px;padding:12px 0;border-top:2px solid var(--q);border-bottom:2px solid var(--q);text-align:center;font-family:var(--ruqaa);font-size:calc(31px*var(--fs,1));line-height:1.5;color:var(--q)}
.blk-li{display:flex;gap:14px;align-items:baseline}
.li-n{font-family:var(--display);font-size:calc(33px*var(--fs,1));line-height:1;color:var(--acc);flex:none;min-width:22px}
.blk-hr{text-align:center;letter-spacing:10px;opacity:.6;font-size:14px}
.blk-img{margin:4px 0 16px}
.blk-img img{display:block;width:100%;height:300px;object-fit:cover;border-radius:6px}
.blk-img figcaption{font-family:var(--ui);font-size:12px;opacity:.75;margin-top:6px;line-height:1.6}
.blk-d{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.blk-d p{margin:0;font-size:calc(20px*var(--fs,1));line-height:1.75}
.av{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:14px;margin-top:2px}
.who-0 .av{background:var(--acc);color:var(--bg)}
.who-1 .av{background:var(--pill-bg);color:var(--pill-fg);box-shadow:inset 0 0 0 2px var(--acc)}
.who-2 .av{background:var(--coral);color:#2A0E1A}
.who-3 .av{background:var(--mint);color:#10302A}

/* الأبواب */
.sec-hikam{--bg:#FBF7EE;--ink:#2A2540;--acc:#1F2A6B;--pill-bg:#1F2A6B;--pill-fg:#FFE3A3;--q:#9A6B00}
.sec-hikam::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:#1F2A6B}
.sec-sukhriya{--bg:#FF5A5F;--ink:#2A0E1A;--acc:#2A0E1A;--pill-bg:#2A0E1A;--pill-fg:#FFD8DE;--q:#2A0E1A;--title-font:var(--display);--title-w:400;--title-size:44px}
.sec-uqm{--bg:#E9EAEE;--ink:#4F5566;--acc:#3F4455;--pill-bg:#8E95A6;--pill-fg:#FFFFFF;--q:#3F4455;--title-font:var(--ui);--title-w:300;--title-size:44px}
.sec-uqm .a-title{letter-spacing:2px}
.sec-uqm .blk{opacity:.17;filter:blur(1.3px);transition:opacity .9s ease,filter .9s ease}
.sec-uqm:hover .blk,.sec-uqm.awake .blk{opacity:1;filter:none}
.sec-qisas{--bg:#FFF8EC;--ink:#1E2B2B;--acc:#0E7C7B;--pill-bg:#FFF8EC;--pill-fg:#0E5B5A;--q:#0E7C7B}
.sec-riwayat{--bg:#4A1538;--ink:#F7D6E0;--acc:#F7D6E0;--pill-bg:#F7D6E0;--pill-fg:#4A1538;--q:#FFC23D;--title-font:var(--ruqaa);--title-size:42px}
.hero{margin:-44px -56px 18px;padding:40px 56px 22px;background:#0E7C7B;color:#FFF8EC}
.hero .a-title{color:#FFF8EC}
.hero .stamp{border-color:#FFF8EC;color:#FFF8EC}
.uqm-hint{font-size:11.5px;opacity:.8}

/* الغلاف */
.cover{background:var(--cbg)}
.cover .shape{position:absolute;border-radius:50%}
.cover .c1{width:440px;height:440px;left:-150px;top:170px;background:var(--c1)}
.cover .c2{width:230px;height:230px;left:250px;bottom:-125px;border:20px solid var(--c2)}
.cover .c3{width:180px;height:90px;border-radius:180px 180px 0 0;left:60px;bottom:0;background:var(--c3)}
.cover .top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:26px 40px 14px;border-bottom:1px solid var(--cink);font-size:13px;color:var(--clabel)}
.cover .top{border-bottom-color:color-mix(in srgb,var(--cink) 25%,transparent)}
.cover .logo{position:absolute;right:40px;top:150px;text-align:right}
.cover .logo b{display:inline-block;font-family:var(--ruqaa);font-weight:700;font-size:168px;line-height:1.1;color:var(--cink);text-shadow:7px 7px 0 var(--csh);animation:wobble 6s ease-in-out infinite}
.cover .tag{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--cink);text-shadow:2px 2px 0 var(--csh);margin-top:4px;max-width:440px}
.cover .teasers{position:absolute;right:40px;bottom:118px;width:310px;display:flex;flex-direction:column;gap:13px}
.cover .teasers .lbl{font-size:12px;color:var(--clabel);letter-spacing:1px}
.cover .teasers div{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--cink)}
.cover .teasers small{font-family:var(--ui);font-size:12.5px;color:var(--clabel)}
.cover .by{position:absolute;right:40px;bottom:40px;font-size:14px;color:var(--cink)}
.cover .price{position:absolute;left:70px;bottom:100px;width:110px;height:110px;border-radius:50%;background:var(--cink);color:var(--cbg);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-14deg);box-shadow:4px 4px 0 var(--csh);font-size:12px}
.cover .price b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1}
.bubbles{position:absolute;right:190px;top:170px;width:120px;height:10px}
.bubble{position:absolute;bottom:0;border-radius:50%;border:2px solid var(--cink);opacity:0;animation:rise 4s infinite ease-in}
.bubble:nth-child(even){animation-name:rise2}
@keyframes rise{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:.85}60%{transform:translate(10px,-150px) scale(.9)}100%{transform:translate(-6px,-270px) scale(1.15);opacity:0}}
@keyframes rise2{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:.85}55%{transform:translate(-12px,-140px) scale(.85)}100%{transform:translate(8px,-250px) scale(1.1);opacity:0}}
@keyframes wobble{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-4px)}}

/* قبل أن تقلّب */
.intro{--bg:#FFC23D;--ink:#24113F;--acc:#24113F}
.intro .pg-in{padding:54px 60px 26px;gap:20px}
.intro h2,.toc h2{margin:0;font-family:var(--display);font-weight:400;font-size:56px;line-height:1.1}
.intro .ed{margin:0;font-family:var(--serif);font-size:19.5px;line-height:1.9;white-space:pre-line;overflow:hidden}
.howto{display:flex;gap:16px;align-items:center;background:#24113F;color:#FFF4E0;border-radius:14px;padding:16px 20px}
.howto svg{width:54px;height:34px;stroke:#FFC23D;stroke-width:2.2}
.howto p{margin:0;font-size:14px;line-height:1.8}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:15px}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:50%;display:block}
.sig{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}
.sig span:first-child{font-family:var(--ruqaa);font-size:30px}

/* الفهرس */
.toc{--bg:#FBF7EE;--ink:#1B1638;--acc:#2B1A63}
.toc .pg-in{padding:54px 64px 22px}
.toc h2{color:#2B1A63;margin-bottom:8px}
.toc .sub{margin:0 0 14px;font-size:14px;color:#4B4566}
.toc-row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 10px;border:0;border-bottom:1px dashed rgba(27,22,56,.25);background:transparent;color:#1B1638;text-align:right;cursor:pointer;transition:transform .25s,background .25s}
.toc-row:hover{transform:translateX(-6px);background:rgba(43,26,99,.07)}
.toc-row i{width:14px;height:14px;border-radius:50%;flex:none;display:block}
.toc-row .t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.toc-row .t small{font-size:12px;color:#4B4566}
.toc-row .t b{font-family:var(--serif);font-size:20px;line-height:1.35}
.toc-row .n{font-family:var(--display);font-size:26px;color:#2B1A63;min-width:28px;text-align:left}
.toc .credit{font-size:12px;color:#4B4566}

/* صفحة فارغة وغلاف خلفي */
.filler{--bg:#F6F0E2;--ink:#8C8370}
.filler .pg-in{align-items:center;justify-content:center;text-align:center;gap:10px}
.filler .q{font-family:var(--ruqaa);font-size:140px;line-height:.6;opacity:.25}
.filler p{margin:0;font-family:var(--serif);font-size:20px;font-style:italic}
.back{--bg:#1F2A6B;--ink:#FFF4E0;--acc:#FFC23D}
.back .ring{position:absolute;width:300px;height:300px;border-radius:50%;border:22px solid #3DD9B3;left:-110px;top:-90px}
.back .dot{position:absolute;width:160px;height:160px;border-radius:50%;background:#FF5A5F;right:-50px;bottom:150px}
.back .mid{position:absolute;inset:0;padding:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.back .mid .l{font-family:var(--ruqaa);font-weight:700;font-size:104px;line-height:1.1;color:#FFC23D}
.back .mid .s{font-family:var(--serif);font-size:22px;line-height:1.6}
.back .mid a{font-size:16px;direction:ltr}
.back .mid .act{background:#FFC23D;color:#1F2A6B}
.back .copy{position:absolute;left:50px;right:50px;bottom:34px;border-top:1px solid rgba(255,244,224,.25);padding-top:14px;font-size:11.5px;line-height:1.8;color:#D8D3F0;text-align:center}
.empty .mid .s{max-width:360px}

/* الحواشي والرفّ */
.drawer,.shelf{position:fixed;inset:0;z-index:80}
.drawer[hidden],.shelf[hidden]{display:none}
.drawer-scrim{position:absolute;inset:0;background:rgba(8,5,20,.6);animation:fade .25s}
.drawer-panel{position:absolute;top:0;bottom:0;right:0;width:min(440px,100vw);background:#DDF5EC;color:#10302A;display:flex;flex-direction:column;animation:slide .35s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.4)}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 24px 12px}
.drawer-kicker{font-size:12.5px;opacity:.75}
.drawer-head h2{margin:4px 0 0;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.2}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.notes{flex:1;overflow:auto;padding:12px 24px 8px;display:flex;flex-direction:column;gap:18px}
.note{position:relative;background:#FFFDF6;padding:16px 18px 12px;box-shadow:0 6px 14px rgba(16,48,42,.18)}
.note:nth-child(odd){transform:rotate(-1deg)}.note:nth-child(even){transform:rotate(1.2deg);background:#FFF4C9}
.note::before{content:"";position:absolute;top:-8px;right:46%;width:16px;height:16px;border-radius:50%;background:#FF5A5F;box-shadow:0 2px 0 #9E2E33}
.note p{margin:0 0 6px;font-family:var(--serif);font-size:18px;line-height:1.7;white-space:pre-line;word-wrap:break-word}
.note small{font-size:11.5px;color:#3D5C55}
.notes .none{font-family:var(--serif);font-size:18px;font-style:italic;opacity:.75;text-align:center;padding:30px 0}
.note-form{display:flex;flex-direction:column;gap:6px;padding:14px 24px max(20px,env(safe-area-inset-bottom));border-top:1px dashed rgba(16,48,42,.3)}
.note-form label{font-size:13px;font-weight:600}
.muted{font-weight:400;opacity:.7}
.note-form input,.note-form textarea{border:1.5px solid #10302A;border-radius:10px;padding:10px 12px;font-family:var(--serif);font-size:17px;background:#fff;color:#10302A;resize:none;width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cta{min-height:46px;margin-top:6px;border-radius:23px;border:0;background:#10302A;color:#DDF5EC;font-size:14.5px;cursor:pointer}
.cta:disabled{opacity:.5}
.form-msg{margin:4px 0 0;font-size:13px;min-height:1em}
.shelf{background:rgba(8,5,20,.75);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .25s}
.shelf-panel{width:min(980px,100%);max-height:100%;overflow:auto;background:#1B1538;border-radius:18px;padding:6px 6px 24px;color:var(--cream)}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px;padding:12px 24px}
.mini{border:0;padding:0;background:transparent;cursor:pointer;color:var(--cream);text-align:right;font-family:var(--ui)}
.mini .cv{position:relative;aspect-ratio:560/780;border-radius:4px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.5);transition:transform .3s}
.mini:hover .cv{transform:translateY(-6px) rotate(-1.5deg)}
.mini .cv .o{position:absolute;border-radius:50%}
.mini .cv b{position:absolute;right:10%;top:16%;font-family:var(--ruqaa);font-size:clamp(34px,4.6vw,46px);line-height:1}
.mini .cap{margin-top:10px;font-size:13px}
.mini .cap small{display:block;color:var(--lav);font-size:11.5px;margin-top:2px}
.mini[aria-current="true"] .cv{outline:3px solid var(--saffron);outline-offset:4px}

@media (max-width:760px){
  .brand-sub,.hint,.tools .pill>span:not(.fs),.foot .pill span{display:none}
  .tools .pill,.foot .pill{padding:0 13px}
  .brand-logo{font-size:30px}
  .bar{padding-top:8px;padding-bottom:6px}
  .indicator{order:3;width:100%;text-align:center;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.bubble,.cover .logo b{animation:none}}

/* أدوات القراءة */
.read-tools{display:flex;gap:4px;padding:3px;border-radius:24px;border:1px solid rgba(255,244,224,.25)}
.read-tools .pill{border:0;min-width:44px;padding:0 12px;justify-content:center}
.read-tools .fs{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1}
.read-tools .fs small{font-size:12px}
.fs-level{min-width:34px;text-align:center;font-size:12px;color:var(--lav);align-self:center}
:fullscreen #app,:-webkit-full-screen #app{background-color:var(--desk)}
@media (max-width:760px){#btnLayout{display:none}.fs-level{display:none}}

/* الاشتراك */
.sub-pill{background:var(--coral);color:#2A0E1A;border-color:var(--coral);font-weight:600}
.sub-pill:hover{background:#FF7A7E}
.sub-panel{position:relative;width:min(440px,100%);max-height:100%;overflow:auto;background:#2B1A63;color:var(--cream);border-radius:20px;padding:30px 30px 24px;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.sub-art span{position:absolute;border-radius:50%;pointer-events:none}
.sub-art span:nth-child(1){width:200px;height:200px;background:var(--coral);left:-90px;top:-80px}
.sub-art span:nth-child(2){width:110px;height:110px;border:13px solid var(--mint);left:40px;bottom:-60px}
.sub-art span:nth-child(3){width:60px;height:30px;border-radius:60px 60px 0 0;background:var(--saffron);right:40px;bottom:0}
.sub-x{position:absolute;top:14px;left:14px;color:var(--cream);z-index:2}
.sub-logo,.sub-panel h2,.sub-panel p,.sub-panel form{position:relative}
.sub-logo{font-family:var(--ruqaa);font-weight:700;font-size:58px;line-height:1.1;text-shadow:5px 5px 0 #160D3A}
.sub-panel h2{margin:10px 0 4px;font-family:var(--display);font-weight:400;font-size:30px;color:var(--saffron)}
.sub-lead{margin:0 0 16px;font-family:var(--serif);font-size:19px;line-height:1.8}
#subForm{display:flex;flex-direction:column;gap:6px}
#subForm label{font-size:13px;font-weight:600}
#subForm input{border:0;border-radius:12px;padding:12px 14px;font-size:16px;font-family:var(--ui);background:var(--cream);color:#24113F;width:100%}
.sub-cta{background:var(--saffron);color:#24113F;font-weight:600}
.sub-note{margin:6px 0 0;font-size:11.5px;line-height:1.8;opacity:.8}
#subMsg{color:var(--saffron)}
.back .sub-btn{background:var(--coral);color:#2A0E1A}

.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.7;font-weight:400;margin-top:4px}
.consent input{width:18px!important;height:18px;flex:none;margin-top:3px}
.consent a{color:var(--saffron)}
.legal-links{display:flex;gap:14px;font-size:12.5px}
.legal-links a{color:var(--lav);text-decoration:none}
.legal-links a:hover{color:var(--saffron)}
.back .copy a{color:#FFC23D;text-decoration:none}
@media (max-width:760px){.legal-links{display:none}}