/* Arabic font shipped with the platform, so Arabic always shapes correctly even when Google Fonts does not load */
@font-face{font-family:'Cairo';font-weight:400;font-display:swap;src:url(../fonts/cairo-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Cairo';font-weight:600;font-display:swap;src:url(../fonts/cairo-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Cairo';font-weight:700;font-display:swap;src:url(../fonts/cairo-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
/* Student Master Review: a bright medical library. Navy serif titles, teal actions, gold rules; books stand on cream plinths.
   Layout: header (phone: bottom tabs) · home = hero + three stage cards · libraries = header band + shelf of book cards. */
:root{
  --bg:#f7f3ec; --bg2:#efe7da; --sf:#fffdf8; --sf2:#f5efe4; --glass:rgba(255,253,248,.82);
  --tx:#142a4c; --sub:#55617a; --mut:#7a8496;
  --pri:#11807a; --pri2:#0b6964; --pon:#ffffff; --pritint:rgba(17,128,122,.11);
  --gold:#b08c45; --mark:#14315a; --tl:#0f7570;
  --acr1:rgba(255,255,255,.34); --acr2:rgba(255,255,255,.08); --acrb:rgba(255,255,255,.55);
  --bd:rgba(20,42,76,.12); --bd2:rgba(20,42,76,.22);
  --ok:#17744a; --okbg:#e2f2e8; --soon:#87560c; --soonbg:#f7ebd3;
  --good:#1f9d63; --bad:#d64545; --vio:#6d5bd0; --goldb:#d2a53c;
  --plinth:#fbf8f2; --plinth2:#e7dece; --plsh:rgba(60,45,20,.16);
  --veil1:rgba(247,243,236,.97); --veil2:rgba(247,243,236,.62); --veil3:rgba(247,243,236,.15);
  --bgfx:.42; --heroart:.95; --shadow:0 12px 32px rgba(20,42,76,.10); --shadow2:0 2px 10px rgba(20,42,76,.08);
  --cov-sh:-5px 6px 14px rgba(15,25,45,.28); --backdrop:rgba(12,22,40,.48);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --arab:Cairo,'Noto Sans Arabic',Tahoma,sans-serif;
  --g:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1525; --bg2:#101b2f; --sf:#14213a; --sf2:#1a2946; --glass:rgba(20,33,58,.84);
  --tx:#edf1f8; --sub:#b2bccd; --mut:#8994a9;
  --pri:#1a8a83; --pri2:#22a097; --pon:#ffffff; --pritint:rgba(43,175,165,.16);
  --gold:#d9b86f; --mark:#e9d3a0; --tl:#5cc9bf;
  --acr1:rgba(255,255,255,.10); --acr2:rgba(255,255,255,0); --acrb:rgba(255,255,255,.16);
  --bd:rgba(255,255,255,.10); --bd2:rgba(255,255,255,.2);
  --ok:#74d6a6; --okbg:rgba(70,190,130,.15); --soon:#f0c878; --soonbg:rgba(240,200,120,.14);
  --good:#3ccf8a; --bad:#ff6b6b; --vio:#9f8cff; --goldb:#e2b94f;
  --plinth:#22324f; --plinth2:#16233b; --plsh:rgba(0,0,0,.45);
  --veil1:rgba(12,21,37,.96); --veil2:rgba(12,21,37,.72); --veil3:rgba(12,21,37,.35);
  --bgfx:.13; --heroart:.32; --shadow:0 12px 32px rgba(0,0,0,.35); --shadow2:0 2px 10px rgba(0,0,0,.3);
  --cov-sh:-5px 6px 16px rgba(0,0,0,.55); --backdrop:rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0c1525; --bg2:#101b2f; --sf:#14213a; --sf2:#1a2946; --glass:rgba(20,33,58,.84);
  --tx:#edf1f8; --sub:#b2bccd; --mut:#8994a9;
  --pri:#1a8a83; --pri2:#22a097; --pon:#ffffff; --pritint:rgba(43,175,165,.16);
  --gold:#d9b86f; --mark:#e9d3a0; --tl:#5cc9bf;
  --acr1:rgba(255,255,255,.10); --acr2:rgba(255,255,255,0); --acrb:rgba(255,255,255,.16);
  --bd:rgba(255,255,255,.10); --bd2:rgba(255,255,255,.2);
  --ok:#74d6a6; --okbg:rgba(70,190,130,.15); --soon:#f0c878; --soonbg:rgba(240,200,120,.14);
  --good:#3ccf8a; --bad:#ff6b6b; --vio:#9f8cff; --goldb:#e2b94f;
  --plinth:#22324f; --plinth2:#16233b; --plsh:rgba(0,0,0,.45);
  --veil1:rgba(12,21,37,.96); --veil2:rgba(12,21,37,.72); --veil3:rgba(12,21,37,.35);
  --bgfx:.13; --heroart:.32; --shadow:0 12px 32px rgba(0,0,0,.35); --shadow2:0 2px 10px rgba(0,0,0,.3);
  --cov-sh:-5px 6px 16px rgba(0,0,0,.55); --backdrop:rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--tx);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-family:var(--arab)}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:99;background:var(--sf);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}
.skip:focus{top:12px}
.flip{transition:transform .15s}
[dir="rtl"] .flip{transform:scaleX(-1)}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.serif,h1,h2,h3{font-family:var(--serif);text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] .serif{font-family:var(--arab)}
.en{font-family:var(--serif)}
bdi{unicode-bidi:isolate}

/* ambient library light behind every screen */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx::before{content:"";position:absolute;inset:-40px;background:url(../img/ui/library.webp) center/cover;filter:blur(22px) saturate(1.1);opacity:var(--bgfx)}
.bgfx::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--veil3),var(--bg) 78%)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--sf)}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--bd)}
.top-in{max-width:1320px;margin:0 auto;height:64px;display:flex;align-items:center;gap:12px;padding-left:var(--g);padding-right:var(--gr)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;flex:none}
.mark{width:40px;height:42px;flex:none;background:var(--mark);-webkit-mask:url(../img/ui/logo-mark.png) center/contain no-repeat;mask:url(../img/ui/logo-mark.png) center/contain no-repeat}
.bname{font-family:var(--serif);font-weight:700;line-height:1.05;font-size:16px;color:var(--tx);display:flex;flex-direction:column;letter-spacing:-.01em}
.bname span:last-child{white-space:nowrap}
.tnav{display:none;align-items:center;gap:4px;margin-inline-start:14px;padding-inline-start:16px;border-inline-start:1px solid var(--bd2)}
.tnav a{white-space:nowrap;display:flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:12px;text-decoration:none;color:var(--sub);font-weight:500;font-size:14.5px}
.tnav a:hover{color:var(--tx);background:var(--pritint)}
.tnav a[aria-current="page"]{color:var(--tl);background:var(--pritint);font-weight:600}
.tsearch{display:none;position:relative;flex:1;max-width:340px;margin-inline-start:auto}
.field{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;background:var(--sf);border:1px solid var(--bd2);color:var(--sub)}
.field:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pritint)}
.field input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:inherit;color:var(--tx);height:100%}
.field input::placeholder{color:var(--mut)}
.tbtns{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.tsearch+.tbtns{margin-inline-start:6px}
.ib{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:0;background:transparent;color:var(--tx);cursor:pointer;text-decoration:none;position:relative}
.ib:hover{background:var(--pritint)}
.lbtn{height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--bd2);background:var(--sf);cursor:pointer;font-size:13.5px;font-weight:600;color:var(--tx)}
.lbtn:hover{border-color:var(--pri)}
.lbtn .lt{font-family:var(--arab)}
.thm{position:relative}
.tmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:-6px;z-index:60;min-width:220px;white-space:nowrap;padding:6px;border-radius:16px;background:var(--sf);border:1px solid var(--bd2);box-shadow:var(--shadow);display:grid;gap:2px}
.tmenu button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border:0;border-radius:11px;background:transparent;cursor:pointer;color:var(--tx);font-weight:500;text-align:start}
.tmenu button:hover{background:var(--pritint)}
.tmenu button span{flex:1}
.tmenu .ck{opacity:0;color:var(--tl)}
.tmenu button[aria-pressed="true"]{color:var(--tl);font-weight:600}
.tmenu button[aria-pressed="true"] .ck{opacity:1}
.pchip{display:flex;align-items:center;gap:9px;height:44px;padding:0 4px;border-radius:999px;text-decoration:none;color:var(--tx);font-weight:600;font-size:14px;max-width:190px}
.pchip:hover{background:var(--pritint)}
.pchip .pn{display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:10px}
.av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,var(--pri),#2c5a8c);color:#fff;font:700 13px/1 var(--sans);letter-spacing:.02em}
.av img{width:100%;height:100%;object-fit:cover}
.av .ico{width:20px;height:20px}
.av.big{width:84px;height:84px;font-size:28px}
.av.big .ico{width:40px;height:40px}

/* phone bottom tabs */
.bnav{position:fixed;inset:auto 0 0;z-index:30;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--bd);display:grid;grid-template-columns:repeat(4,1fr);padding:6px var(--gr) calc(6px + env(safe-area-inset-bottom,0px)) var(--g)}
.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:14px;text-decoration:none;color:var(--sub);font-size:12px;font-weight:600}
.bnav a .ico{width:22px;height:22px}
.bnav a[aria-current="page"]{color:var(--tl);background:var(--pritint)}

main{max-width:1320px;margin:0 auto;padding-left:var(--g);padding-right:var(--gr);padding-block:0 calc(96px + env(safe-area-inset-bottom,0px))}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:14px;border:0;background:var(--pri);color:var(--pon);font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;box-shadow:0 6px 16px rgba(17,128,122,.24);transition:background .15s}
.btn:hover{background:var(--pri2)}
.btn:active{background:var(--pri2)}
.btn .ico{width:18px;height:18px}
.btn.ghost{background:transparent;color:var(--tl);box-shadow:none;border:1.5px solid var(--tl)}
.btn.ghost:hover{background:var(--pritint)}
.btn.ghost[aria-pressed="true"]{background:var(--pritint)}
.btn.quiet{background:var(--sf2);color:var(--tx);box-shadow:none;border:1px solid var(--bd2)}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px;border-radius:12px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--ok);background:var(--okbg)}
.chip.soon{color:var(--soon);background:var(--soonbg)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;font-size:12px;font-weight:600;background:var(--sf2);border:1px solid var(--bd);color:var(--sub)}
.link{color:var(--tl);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}

/* ---------- covers on stands ---------- */
.stand{container-type:inline-size;position:relative;display:flex;flex-direction:column;align-items:center}
.books{display:flex;justify-content:center;align-items:flex-end;position:relative;z-index:1;padding-inline:2%}
.books img{flex:none;height:150px;height:var(--h,44cqw);width:auto;border-radius:3px 5px 5px 3px;box-shadow:var(--cov-sh);background:var(--sf2);position:relative}
.books img+img{margin-inline-start:calc(var(--ov,14cqw) * -1)}
.books.n5{--h:50cqw;--ov:20cqw}
.books.n5 img:nth-child(1){z-index:1}.books.n5 img:nth-child(2){z-index:2}.books.n5 img:nth-child(3){z-index:3}.books.n5 img:nth-child(4){z-index:4}.books.n5 img:nth-child(5){z-index:5}
.books.n4{--h:54cqw;--ov:19cqw}
.books.n4 img:nth-child(2){z-index:2}.books.n4 img:nth-child(3){z-index:3}.books.n4 img:nth-child(4){z-index:4}
.books.n3{--h:46cqw;--ov:13cqw}
.books.n3 img:nth-child(2){--h:60cqw;z-index:3}
.books.n3 img:nth-child(1){z-index:1}.books.n3 img:nth-child(3){z-index:2}
.plinth{width:96%;height:16px;margin-top:-7px;border-radius:9px;background:linear-gradient(180deg,var(--plinth),var(--plinth2));box-shadow:0 10px 18px -6px var(--plsh),inset 0 1px 0 rgba(255,255,255,.5);position:relative;z-index:2}
.plinth::after{content:"";position:absolute;inset:100% 3% auto;height:10px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,var(--plinth2),transparent);opacity:.9}
.one{--cw:76%;position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.shelf.v .bk .one{--cw:46%}
.one img{width:var(--cw);height:auto;aspect-ratio:var(--ar);border-radius:3px 5px 5px 3px;box-shadow:var(--cov-sh);background:var(--sf2);position:relative;z-index:1}
.one::before{content:"";position:absolute;z-index:3;bottom:9px;left:calc((100% - var(--cw))/2 - 3%);right:calc((100% - var(--cw))/2 - 3%);height:20%;max-height:46px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--acr1),var(--acr2));border:1px solid var(--acrb);border-bottom:0;pointer-events:none}

/* ---------- home ---------- */
.hero{position:relative;padding-block:30px 22px;isolation:isolate}
.hero-art{position:absolute;z-index:-1;top:0;bottom:-30px;inset-inline-end:calc(var(--gr) * -1);width:min(60%,760px);background:url(../img/ui/hero-anatomy.webp) center right/cover no-repeat;opacity:var(--heroart);-webkit-mask-image:linear-gradient(to left,transparent 0,#000 10%,#000 45%,transparent 100%),linear-gradient(to top,transparent,#000 35%);mask-image:linear-gradient(to left,transparent 0,#000 10%,#000 45%,transparent 100%),linear-gradient(to top,transparent,#000 35%);-webkit-mask-composite:source-in;mask-composite:intersect}
[dir="rtl"] .hero-art{transform:scaleX(-1)}
.eyebrow{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--tx);margin:0 0 10px}
.eyebrow::before{content:"";width:3px;height:20px;border-radius:2px;background:var(--pri)}
.hero h1{font-size:clamp(26px,3.9vw,50px);line-height:1.08;margin:0;letter-spacing:-.015em;font-weight:700;max-width:24ch}
.hero h1:focus,dialog h2:focus{outline:none}
.hero h1 span{display:block}
.hero p.lead{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.6vw,20px);color:var(--sub);margin:10px 0 0;max-width:46ch}
html[lang="ar"] .hero p.lead{font-family:var(--arab);font-style:normal}
.hsearch{display:none;margin-top:16px;text-decoration:none}
.hsearch .field{width:100%;cursor:text}
.stages{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 22px 24px;border-radius:24px;background:var(--glass);border:1px solid var(--bd);box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s,box-shadow .2s}
.stage:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,42,76,.14)}
.stage h2{margin:0;font-size:clamp(28px,2.9vw,40px);line-height:1.05;font-weight:700}
.rule{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-style:italic;color:var(--sub);font-size:17px;margin:0;min-width:0}
html[lang="ar"] .rule{font-family:var(--arab);font-style:normal;font-size:15px}
.stage .rule::before,.stage .rule::after{content:"";height:1px;width:34px;flex:none;background:var(--bd2)}
.stage .stand{width:100%;margin-block:12px 14px;flex:1;justify-content:flex-end}
.stage .btn{position:static}
@media (min-width:960px){.stage .stand{order:3}.stage .btn{order:4}}
.stage .btn::after{content:"";position:absolute;inset:0;border-radius:24px;z-index:6}
.stxt{display:contents}
.homefoot{display:flex;align-items:center;justify-content:center;gap:16px;margin:28px 0 6px;color:var(--sub);font-family:var(--serif);font-style:italic;font-size:17px;text-align:center}
html[lang="ar"] .homefoot{font-family:var(--arab);font-style:normal}
.homefoot::before,.homefoot::after{content:"";height:1px;width:min(140px,14vw);background:var(--bd2)}

/* ---------- library screens ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:18px 0 0;font-size:14px}
.crumbs ol{display:flex;gap:6px;list-style:none;margin:0;padding:0;color:var(--sub)}
.crumbs ol li+li::before{content:"/";margin-inline-end:6px;color:var(--mut)}
.crumbs ol a{color:var(--tl);text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{width:1px;height:16px;background:var(--bd2)}
.shead{position:relative;overflow:hidden;border-radius:24px;margin-top:14px;padding:30px 28px;min-height:150px;isolation:isolate;border:1px solid var(--bd)}
.shead::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/ui/library.webp) center/cover}
.shead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--veil1) 0%,var(--veil2) 55%,var(--veil3) 100%)}
[dir="rtl"] .shead::after{background:linear-gradient(270deg,var(--veil1) 0%,var(--veil2) 55%,var(--veil3) 100%)}
.shead h1{margin:0;font-size:clamp(32px,4.6vw,56px);line-height:1.04;font-weight:700;letter-spacing:-.01em}
.shead h1::after{content:"";display:block;width:84px;height:2px;margin-top:10px;background:var(--gold)}
.shead p{margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.6vw,19px);color:var(--sub);max-width:52ch}
html[lang="ar"] .shead p{font-family:var(--arab);font-style:normal}
.pagehead{margin:24px 0 18px}
.pagehead h1{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.1}
.pagehead p{margin:8px 0 0;color:var(--sub);max-width:70ch}

.shelf{display:grid;gap:20px;margin-top:22px}
.shelf.h{grid-template-columns:repeat(2,minmax(0,1fr))}
.shelf.h .bk:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 10px);justify-self:center}
.shelf.v{display:flex;flex-wrap:wrap;justify-content:center}
.shelf.v .bk{width:calc((100% - 40px)/3)}
.bk{position:relative;display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:22px;align-items:center;padding:22px;border-radius:22px;background:var(--glass);border:1px solid var(--bd);box-shadow:var(--shadow2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,box-shadow .2s}
.bk:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.shelf.v .bk{grid-template-columns:1fr;text-align:center;justify-items:center;gap:14px}
.bk .stand{width:100%}
.bk h3{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.1;font-weight:700}
.bk .series{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.68em;color:var(--sub);margin-top:4px}
.bk .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.shelf.v .bk .meta{justify-content:center}
.bk .desc{margin:10px 0 0;color:var(--sub);font-size:14.5px}
.bk .gl{display:block;width:62px;height:2px;background:var(--gold);margin-top:12px;opacity:.8}
.shelf.v .bk .gl{margin-inline:auto}
.bk .act{margin-top:16px}
.bk .act .btn::after{content:"";position:absolute;inset:0;border-radius:22px;z-index:6}
.bk .hot{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.shelf.v .bk .hot{justify-content:center}
.bk .opens{display:block;margin-top:8px;font-size:12.5px;color:var(--mut)}

/* ---------- dialog ---------- */
dialog.sheet{border:0;padding:0;border-radius:24px;background:var(--sf);color:var(--tx);width:min(680px,calc(100% - 32px));max-height:calc(100% - 40px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.sh-in{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:26px}
.sh-in .cv img{width:100%;height:auto;border-radius:3px 5px 5px 3px;box-shadow:var(--cov-sh)}
.sh-in h2{margin:0;font-size:28px;line-height:1.1}
.sh-in h2 .series{display:block;font-style:italic;font-weight:400;font-size:18px;color:var(--sub);margin-top:4px}
.sh-in p{margin:12px 0 0;color:var(--sub)}
.sh-sub{margin:20px 0 10px;font:700 12.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
html[lang="ar"] .sh-sub{font-family:var(--arab);letter-spacing:0;font-size:14px}
.areas{display:flex;flex-wrap:wrap;gap:8px}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tool{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;border:1px solid var(--bd);background:var(--sf2)}
.tool .ti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pritint);color:var(--tl);flex:none}
.tool b{display:block;font-size:15px}
.tool span{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.tool .tag{display:inline-flex;width:auto;margin-top:8px;height:22px;font-size:11.5px}
.sh-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:0 26px 24px}
.xbtn{position:absolute;top:12px;inset-inline-end:12px}

/* ---------- lists, panels ---------- */
.block{margin-top:28px}
.block>h2{font-size:22px;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.block>h2 .cnt{font:600 13px/1 var(--sans);color:var(--mut);background:var(--sf2);border:1px solid var(--bd);padding:4px 8px;border-radius:999px}
.rows{display:grid;gap:10px}
.row{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--bd)}
.row img{width:46px;height:auto;border-radius:2px 4px 4px 2px;box-shadow:var(--cov-sh);flex:none}
.row .rt{flex:1;min-width:0}
.row .rt b{display:block;font-family:var(--serif);font-size:17px;line-height:1.2}
.row .rt i{display:block;font-family:var(--serif);font-size:14px;color:var(--sub);margin-top:1px}
.row .rt span .ico{width:14px;height:14px;vertical-align:-2px}
.row .rt span{display:block;color:var(--sub);font-size:13.5px;margin-top:2px}
.row .rgo::after{content:"";position:absolute;inset:0;border-radius:16px}
.row:hover{border-color:var(--bd2)}
.empty{display:flex;gap:14px;align-items:center;padding:18px;border-radius:16px;border:1px dashed var(--bd2);color:var(--sub);background:var(--glass)}
.empty .ico{width:28px;height:28px;color:var(--mut)}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--pritint);color:var(--tx);font-size:14px;margin-top:22px}
.note .ico{color:var(--tl);margin-top:1px}
.panels{display:grid;gap:16px}
.narrow{max-width:880px;margin-inline:auto}
.panel{padding:20px;border-radius:20px;background:var(--glass);border:1px solid var(--bd)}
.panel h2{margin:0 0 12px;font-size:20px}
.panel p{margin:0;color:var(--sub);font-size:14.5px}
.panel label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
.prof{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.prof .pf{flex:1;min-width:220px;display:grid;gap:14px}
.inp{width:100%;height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--bd2);background:var(--sf);color:var(--tx);font:inherit}
.inp:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px var(--pritint)}
.pbtns{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--sf2);border:1px solid var(--bd)}
.seg button{min-height:40px;padding:0 16px;border-radius:10px;border:0;background:transparent;cursor:pointer;font-weight:600;color:var(--sub)}
.seg button[aria-pressed="true"]{background:var(--sf);color:var(--tl);box-shadow:var(--shadow2)}
.seg .ar{font-family:var(--arab)}
.ok-msg{color:var(--ok);font-weight:600;font-size:14px;margin-top:10px}
.confirm{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border-radius:18px;background:var(--glass);border:1px solid var(--bd)}
.prow img{width:56px;height:auto;border-radius:2px 4px 4px 2px;box-shadow:var(--cov-sh)}
.prow b{display:block;font-family:var(--serif);font-size:19px}
.prow span{display:block;color:var(--sub);font-size:13.5px;margin-top:2px}

/* search */
.sdrop{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:50;background:var(--sf);border:1px solid var(--bd2);border-radius:18px;box-shadow:var(--shadow);padding:8px;min-width:320px}
.sres{display:grid;gap:4px}
.sres a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;text-decoration:none}
.sres a:hover,.sres a.on{background:var(--pritint)}
.sres img{width:34px;height:auto;border-radius:2px 3px 3px 2px;flex:none;box-shadow:var(--cov-sh)}
.sres .st{flex:1;min-width:0}
.sres .st b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres .st span{display:block;font-size:12.5px;color:var(--sub)}
.sscope{font-size:12.5px;color:var(--mut);padding:8px 10px 4px;border-top:1px solid var(--bd);margin-top:6px}
.spage .field{height:50px;max-width:640px;font-size:16px}
.spage .sres a{padding:12px;background:var(--glass);border:1px solid var(--bd);border-radius:16px}
.spage .sres{gap:10px;margin-top:16px;max-width:760px}
.spage .sres img{width:44px}
.scount{margin-top:14px;color:var(--sub);font-size:14px}

/* ---------- responsive ---------- */
@media (min-width:960px){
  .tnav,.tsearch{display:flex}
  .tsearch{display:block}
  .bnav,.ph-only{display:none!important}
  .pchip .pn{display:block}
  .bname{flex-direction:row;gap:5px;font-size:20px}
  main{padding-block-end:40px}
  .mark{width:46px;height:48px}
}
@media (min-width:960px){.tsearch{flex:1 1 200px;min-width:130px}.tnav{flex:none}}
@media (max-width:1300px) and (min-width:960px){
  .lbtn,.pchip .pn{display:none}
}
@media (max-width:1140px) and (min-width:960px){
  .tnav{margin-inline-start:6px;padding-inline-start:8px}
  .tnav a{padding:0 9px}
  .tnav a .ico{display:none}
  .bname{flex-direction:column;gap:0;font-size:16px}
}
@media (max-width:959px){
  .lbtn{display:none}
  .shelf.v .bk{width:calc((100% - 20px)/2)}
}
@media (max-width:959px){
  .stages{grid-template-columns:1fr;gap:12px;margin-top:14px}
  .stage{display:grid;grid-template-columns:40% minmax(0,1fr);text-align:start;align-items:center;gap:6px 14px;padding:14px 16px 14px 12px;border-radius:20px}
  [dir="rtl"] .stage{padding:14px 12px 14px 16px}
  .stage .stand{grid-row:1;grid-column:1;margin:0}
  .stxt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;grid-column:2;grid-row:1}
  .stage h2{font-size:25px}
  .stage .rule{font-size:14px;line-height:1.3}
  .stage .rule::before,.stage .rule::after{display:none}
  .stage .btn{min-height:42px;font-size:13.5px;padding:0 10px;margin-top:4px;width:100%;gap:6px;line-height:1.2}
  .stage .btn .ico{display:none}
  html[lang="ar"] .stage h2{font-size:22px}
}
@media (min-width:721px) and (max-width:959px){
  .stages{gap:16px}
  .stage{padding:20px 24px 20px 16px;gap:8px 24px}
  [dir="rtl"] .stage{padding:20px 16px 20px 24px}
  .stage h2{font-size:34px}
  .stage .rule{font-size:17px}
  .stage .btn{width:auto;align-self:flex-start;font-size:15px;padding:0 20px}
  .stage .btn .ico{display:inline}
}
@media (max-width:860px){
  .shelf.h{grid-template-columns:1fr}
  .shelf.h .bk:last-child:nth-child(odd){width:auto;justify-self:stretch}
}
@media (max-width:720px){
  .hero{padding-block:16px 6px}
  .hero-art{width:72%;opacity:calc(var(--heroart) * .6)}
  .hsearch{display:block}
  body[data-view="home"] .ph-search{display:none}
  .shelf.v .bk .one,.bk .one{--cw:86%}
  .ib{width:38px;height:38px}
  .tbtns{gap:3px}
  .pchip{padding:0}
  .bname{font-size:14.5px}
  .top-in{gap:8px}
  .homefoot{font-size:15px;margin-top:18px}
  .shead{padding:22px 18px;min-height:0;border-radius:20px}
  .shelf{gap:12px;margin-top:16px}
  .shelf.v .bk{width:100%}
  .bk,.shelf.v .bk{grid-template-columns:36% minmax(0,1fr);text-align:start;justify-items:stretch;gap:14px;padding:14px;border-radius:18px}
  .shelf.v .bk .meta,.shelf.v .bk .hot{justify-content:flex-start}
  .shelf.v .bk .gl{margin-inline:0}
  .bk h3{font-size:21px}
  .bk .desc{font-size:13.5px;margin-top:6px}
  .bk .meta{margin-top:8px}
  .bk .act{margin-top:10px}
  .bk .act .btn{width:100%}
  .bk .gl{display:none}
  .sh-in{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:22px 18px}
  .sh-in h2{font-size:23px}
  .tools{grid-template-columns:1fr}
  .tool{padding:12px}
  .sh-foot{padding:0 18px 20px}
  .sh-foot .btn{flex:1}
  dialog.sheet{width:100%;max-width:100%;margin:auto auto 0;border-radius:24px 24px 0 0;max-height:92%;padding-bottom:env(safe-area-inset-bottom,0px)}
  .prow{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .prow .btn{grid-column:1/-1}
  .sdrop{min-width:0}
}
@media (max-width:370px){
  .bname{display:none}
  .stage h2{font-size:22px}
}
@media (max-width:719px) and (max-height:700px){
  .hero p.lead{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Home fits one screen on phones and portrait tablets (owner, 11 Nov 2026: no scrolling).
   main takes the height between the header and the bottom tabs; the three cards share it; covers and text follow the card height.
   Very short screens (landscape phones) keep normal scrolling. */
@media (max-width:959px) and (min-height:540px){
  body[data-view="home"] main{height:calc(100vh - 128px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - 128px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;padding-block-end:0;overflow:hidden}
  body[data-view="home"] .hero{flex:none}
  body[data-view="home"] .stages{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));margin:6px 0 12px}
  body[data-view="home"] .homefoot{display:none}
  body[data-view="home"] .stage{container-type:size;min-height:0;transform:none}
  body[data-view="home"] .stage .books img{height:min(var(--h),76cqh)}
  body[data-view="home"] .stage .books.n3 img:nth-child(2){height:min(var(--h),88cqh)}
  @container (max-height:122px){ .stage .rule{display:none} }
}
@media (max-width:720px) and (min-height:540px){
  body[data-view="home"] .hero{padding-block:10px 4px}
  body[data-view="home"] .eyebrow{font-size:13.5px;margin-bottom:4px}
  body[data-view="home"] .eyebrow::before{height:16px}
  body[data-view="home"] .hero h1{font-size:clamp(21px,3.3vh,27px)}
  body[data-view="home"] .hero p.lead{display:none}
  body[data-view="home"] .hsearch{margin-top:10px}
  body[data-view="home"] .hsearch .field{height:42px}
  body[data-view="home"] .stages{gap:10px}
  body[data-view="home"] .stage{padding:8px 14px 8px 8px;gap:4px 12px}
  [dir="rtl"] body[data-view="home"] .stage{padding:8px 8px 8px 14px}
  body[data-view="home"] .stxt{gap:4px}
  body[data-view="home"] .stage h2{font-size:min(25px,20cqh)}
  html[lang="ar"] body[data-view="home"] .stage h2{font-size:min(22px,18cqh)}
  body[data-view="home"] .stage .rule{font-size:min(14px,11.5cqh)}
  body[data-view="home"] .stage .btn{min-height:min(42px,32cqh);margin-top:2px}
}
@media (max-width:720px) and (min-height:800px){
  body[data-view="home"] .hero p.lead{display:block;font-size:14px;margin-top:6px}
}

/* ---------- a book open inside the platform ---------- */
.apps{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
body[data-view="read"]{overflow:hidden}
body[data-view="read"] .top,body[data-view="read"] .bnav,body[data-view="read"] main{display:none}
.abar{flex:none;height:54px;display:flex;align-items:center;gap:6px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));background:var(--glass);border-bottom:1px solid var(--bd);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.atitle{display:grid;place-items:center;width:40px;height:40px;border-radius:12px}
.atitle:hover{background:var(--pritint)}
.mark.sm{width:30px;height:32px}
.aname{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding-inline-start:8px;border-inline-start:1px solid var(--bd2)}
.aname img{height:36px;width:auto;border-radius:2px 3px 3px 2px;box-shadow:var(--cov-sh);flex:none}
.aname span{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.aname b{font-family:var(--serif);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aname small{font-size:12px;color:var(--sub)}
.anote{flex:none;display:flex;align-items:center;gap:12px;padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));background:var(--pritint);font-size:13.5px;color:var(--tx);border-bottom:1px solid var(--bd)}
.anote>span{flex:1}
.anote .ico{color:var(--tl)}
.aframes{flex:1;position:relative;min-height:0}
.aframe{position:absolute;inset:0}
/* books loading or waiting in the background: laid out at full size but off the screen and invisible (owner, 12 Nov 2026: fast opening) */
.apps.bg,.aframe.bg{visibility:hidden;pointer-events:none}.apps.bg{transform:translateX(-200vw)}.aframe.bg{transform:translateX(-200vw)}
.aframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
.aload{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--bg);padding:24px;text-align:center}
.alc{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:340px}
.alc img{width:110px;height:auto;border-radius:3px 5px 5px 3px;box-shadow:var(--cov-sh)}
.alc p{margin:0;color:var(--sub)}
.alc .pbtns{justify-content:center}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--bd2);border-top-color:var(--pri);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Header in one row on every screen (owner, 11 Nov 2026): logo · Master Review · day/night · search · notifications · student.
   The name takes the free space, so there is no empty gap; on computers the main links sit after the name. */
.top-in{gap:8px}
.brand{flex:1 1 auto;min-width:0;gap:8px}
.mark{width:36px;height:38px}
.bname{display:block;font-size:clamp(15px,4.3vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bname .b1{display:none}
.tbtns{flex:none;gap:2px;margin-inline-start:0}
.ib{width:40px;height:40px}
.pchip{padding:0;gap:8px;margin-inline-start:4px}
.pchip .pn{display:none;max-width:120px;padding-inline-end:10px}
@media (min-width:440px){ .pchip{padding-inline-start:0;background:var(--pritint)} .pchip .pn{display:block} }
@media (max-width:359px){ .ib{width:36px;height:36px} .mark{width:30px;height:32px} .top-in{gap:4px} .brand{gap:5px} .bname{font-size:14px} .pchip{margin-inline-start:2px} }
@media (min-width:600px){ .bname .b1{display:inline} }
@media (min-width:960px){
  .brand{flex:none}
  .bname{font-size:20px}
  .mark{width:44px;height:46px}
  .tnav{display:flex}
  .tbtns{margin-inline-start:auto;gap:4px}
  .pchip .pn{max-width:180px}
}
@media (min-width:960px) and (max-width:1140px){ .bname .b1{display:none} }
/* phones and tablets: the six header items are spread evenly across the row */
@media (max-width:959px){
  .top-in{justify-content:space-between}
  .brand{flex:0 1 auto}
  .tbtns{display:contents}
  .bname{font-size:clamp(14.5px,4.2vw,20px)}
  .top-in{gap:4px}
}
@media (max-width:340px){ .bname{font-size:13.5px} .mark{width:28px;height:30px} }
@media (max-width:720px) and (min-height:540px){ body[data-view="home"] .stage{grid-template-columns:47% minmax(0,1fr)} }

/* ---------- opening screen and install steps ---------- */
.wel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) var(--gr) max(16px,env(safe-area-inset-bottom,0px)) var(--g);background:var(--bg);overflow-y:auto}
.wel::before{content:"";position:fixed;inset:-40px;background:url(../img/ui/library.webp) center/cover;filter:blur(18px) saturate(1.1);opacity:var(--bgfx);z-index:-1}
body.welon{overflow:hidden}
.wcard{position:relative;width:min(440px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 24px 24px;border-radius:28px;background:var(--glass);border:1px solid var(--bd);box-shadow:0 24px 60px rgba(20,42,76,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:wIn .45s ease both}
@keyframes wIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.wmark{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--sf);border:1px solid var(--bd);box-shadow:0 0 0 8px var(--pritint),var(--shadow2);margin-bottom:10px}
.wmark .mark{width:60px;height:64px}
.wmark.sm{width:64px;height:64px;color:var(--tl);box-shadow:0 0 0 6px var(--pritint)}
.wmark.sm .ico{width:30px;height:30px}
.wcard h2{margin:6px 0 0;font-size:26px;line-height:1.2}
html[lang="ar"] .wcard h2{font-family:var(--arab);font-weight:700}
.wbrand{margin:0;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--gold)}
.wsub{margin:2px 0 8px;color:var(--sub);font-size:15px;max-width:34ch}
.wbtns{display:grid;gap:10px;width:100%;margin-top:12px}
.wbtns.wrow{display:flex;flex-wrap:wrap;justify-content:center}
#welT:focus{outline:none}
.wbig{min-height:62px;justify-content:flex-start;gap:14px;padding:0 18px;text-align:start;border-radius:18px}
.wbig .ico{width:26px;height:26px}
.wbig span{display:flex;flex-direction:column;line-height:1.25}
.wbig b{font-size:16.5px}
.wbig small{font-size:12.5px;font-weight:500;opacity:.85}
.wnote{margin:10px 0 0;font-size:13px;color:var(--mut)}
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;width:100%;text-align:start}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--sf2);border:1px solid var(--bd);font-size:15px;line-height:1.55}
.steps li.warn{flex-direction:column;align-items:stretch;background:var(--soonbg);color:var(--tx)}
.steps .sn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pon);font-weight:700;font-size:14px}
.si{display:inline-grid;place-items:center;width:28px;height:28px;margin-inline:2px;vertical-align:middle;border-radius:8px;background:var(--sf);border:1px solid var(--bd2);color:var(--tl)}
.si .ico{width:17px;height:17px}
.wdone{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
@media (max-height:600px){ .wmark{width:72px;height:72px} .wmark .mark{width:44px;height:48px} .wcard{padding:20px 18px 18px} }

/* Settings → profile (owner, 11 Nov 2026): big photo first, the photo button under it, then the name */
.panel label.btn{display:inline-flex;margin:0;font-size:14px}
.pfp{display:flex;flex-direction:column;align-items:center;text-align:center}
.pfp h2{align-self:stretch;text-align:start}
.pfpic{position:relative;display:block;margin:6px 0 12px;cursor:pointer;border-radius:50%}
.pfpic .av.big{width:132px;height:132px;font-size:44px;box-shadow:0 0 0 5px var(--sf),0 0 0 7px var(--pritint),var(--shadow2)}
.pfpic .av.big .ico{width:58px;height:58px}
.pfcam{position:absolute;bottom:4px;inset-inline-end:4px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pon);border:3px solid var(--sf)}
.pfcam .ico{width:18px;height:18px}
.pfb{justify-content:center}
.pfname{align-self:stretch;text-align:start;margin-top:18px}
.pfname label{margin-bottom:8px}
.pfnote{margin:12px 0 0!important;font-size:13px!important;color:var(--mut)!important;max-width:44ch}

/* ---------- Progress (owner, 11 Nov 2026): real figures from each book, rings and bars ---------- */
.psums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 18px}
.psum{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:var(--glass);border:1px solid var(--bd);box-shadow:var(--shadow2)}
.psum .pi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--pritint);color:var(--tl);margin-bottom:4px}
.psum.g .pi{background:color-mix(in srgb,var(--goldb) 18%,transparent);color:var(--gold)}
.psum.v .pi{background:color-mix(in srgb,var(--vio) 16%,transparent);color:var(--vio)}
.psum b{font:700 24px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.psum b small{font-size:14px;font-weight:600;color:var(--mut)}
.psum>span:last-child{font-size:13px;color:var(--sub)}
.pbks{display:grid;gap:16px}
.pbk{padding:18px;border-radius:22px;background:var(--glass);border:1px solid var(--bd);box-shadow:var(--shadow2)}
.pbh{display:flex;align-items:center;gap:14px}
.pbh img{width:46px;height:auto;border-radius:2px 4px 4px 2px;box-shadow:var(--cov-sh);flex:none}
.pbh>div{flex:1;min-width:0}
.pbh b{display:block;font-family:var(--serif);font-size:19px;line-height:1.2}
.pbh span{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.pbh .btn{flex:none}
.pnone{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--sf2);color:var(--sub);font-size:14px}
.pnone .ico{color:var(--tl);flex:none}
.pbm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:16px}
.pbr{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.prl{font-size:12.5px;color:var(--sub);max-width:110px}
.pring{position:relative;width:118px;height:118px;display:grid;place-items:center}
.pring svg{position:absolute;inset:0;transform:rotate(-90deg)}
[dir="rtl"] .pring svg{transform:rotate(-90deg) scaleY(-1)}
.pring circle{fill:none;stroke-width:9}
.pring .rt{stroke:var(--sf2)}
.pring .rv{stroke:var(--pri);stroke-linecap:round;transition:stroke-dasharray .6s ease}
.pring b{font:800 26px/1 var(--sans);font-variant-numeric:tabular-nums}
.pbl{display:grid;gap:14px;min-width:0}
.pmet{display:grid;gap:6px}
.pmh{display:flex;align-items:center;gap:8px}
.pmh .pi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--pritint);color:var(--tl)}
.pmh .pi .ico{width:16px;height:16px}
.pmh b{flex:1;font-size:15px}
.pmh em{font-style:normal;font-weight:700;font-size:14px;color:var(--tl);font-variant-numeric:tabular-nums}
.pms{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;color:var(--sub)}
.pacc{margin-inline-start:auto;font-weight:700;color:var(--tx)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pri);flex:none}
.dot.gold{background:var(--goldb)}.dot.ok{background:var(--good)}.dot.no{background:var(--bad)}
.pbar{display:flex;height:9px;border-radius:99px;background:var(--sf2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pri),var(--pri2));transition:width .6s ease}
.pbar.gold i,.pbar i.gold{background:linear-gradient(90deg,var(--goldb),var(--gold))}
.pbar.violet i{background:linear-gradient(90deg,var(--vio),color-mix(in srgb,var(--vio) 70%,#fff))}
.pbar.split i{border-radius:0}.pbar.split i.ok{background:var(--good)}.pbar.split i.no{background:var(--bad)}
.pbar.dual{position:relative;display:block}
.pbar.dual i{position:absolute;inset-block:0;inset-inline-start:0}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pchip2{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--sf2);border:1px solid var(--bd);font-size:13px;font-weight:600}
.pchip2 .ico{width:16px;height:16px;color:var(--tl)}
.pchip2.fire .ico{color:#e8772e}
.pch{margin-top:14px;border-top:1px solid var(--bd);padding-top:10px}
.pch summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;cursor:pointer;font-weight:700;list-style:none}
.pch summary::-webkit-details-marker{display:none}
.pch .chev{transform:rotate(-90deg);transition:transform .2s;color:var(--mut)}
.pch[open] .chev{transform:rotate(90deg)}
.pchl{display:grid;gap:12px;padding:6px 0 4px}
.pcr{display:grid;gap:6px}
.pct{display:flex;align-items:center;gap:8px;font-size:13.5px;min-width:0}
.pcn{flex:none;min-width:24px;height:24px;padding:0 6px;border-radius:7px;display:grid;place-items:center;background:var(--pritint);color:var(--tl);font-weight:700;font-size:12px}
.pcname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pct em{font-style:normal;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .psums{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .psum{padding:12px 14px;border-radius:16px}
  .psum b{font-size:21px}
  .pbk{padding:14px;border-radius:20px}
  .pbm{grid-template-columns:1fr;gap:14px;justify-items:stretch}
  .pbr{flex-direction:row;justify-content:center;gap:14px;text-align:start}
  .pring{width:100px;height:100px}
  .pbh .btn{padding:0 12px}
}
@media (min-width:900px){ .pbl{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .pbm{gap:28px} }

/* greeting, second step: language and look (owner, 11 Nov 2026) */
.wset{display:grid;gap:8px;width:100%;margin-top:14px;text-align:start}
.wlab{margin:6px 0 0;font-weight:700;font-size:14px;color:var(--sub)}
.wseg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:var(--sf2);border:1px solid var(--bd)}
.wseg button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:12px;background:transparent;color:var(--sub);font-weight:700;font-size:15.5px;cursor:pointer}
.wseg button[lang="ar"]{font-family:var(--arab)}
.wseg button[aria-pressed="true"]{background:var(--pri);color:var(--pon);box-shadow:0 4px 12px color-mix(in srgb,var(--pri) 25%,transparent)}

/* ===== App colours (owner, 12 Nov 2026): html[data-pal] changes the action colour; teal is the default ===== */
:root[data-pal="navy"]{--pri:#2f4f86;--pri2:#243e6b;--tl:#2a4878;--pritint:color-mix(in srgb,#2f4f86 11%,transparent)}
:root[data-pal="navy"][data-theme="dark"]{--pri:#5b84c4;--pri2:#7097d4;--tl:#9db8e6;--pritint:color-mix(in srgb,#5b84c4 16%,transparent)}
@media (prefers-color-scheme:dark){:root[data-pal="navy"]:not([data-theme="light"]){--pri:#5b84c4;--pri2:#7097d4;--tl:#9db8e6;--pritint:color-mix(in srgb,#5b84c4 16%,transparent)}}
:root[data-pal="lav"]{--pri:#7a5bb5;--pri2:#634899;--tl:#6c4fa8;--pritint:color-mix(in srgb,#7a5bb5 11%,transparent)}
:root[data-pal="lav"][data-theme="dark"]{--pri:#8f74c9;--pri2:#a58ad8;--tl:#c3b0ee;--pritint:color-mix(in srgb,#8f74c9 16%,transparent)}
@media (prefers-color-scheme:dark){:root[data-pal="lav"]:not([data-theme="light"]){--pri:#8f74c9;--pri2:#a58ad8;--tl:#c3b0ee;--pritint:color-mix(in srgb,#8f74c9 16%,transparent)}}
:root[data-pal="green"]{--pri:#1e7a4c;--pri2:#16613c;--tl:#1a6c43;--pritint:color-mix(in srgb,#1e7a4c 11%,transparent)}
:root[data-pal="green"][data-theme="dark"]{--pri:#2f9a63;--pri2:#3bb375;--tl:#86d9ad;--pritint:color-mix(in srgb,#2f9a63 16%,transparent)}
@media (prefers-color-scheme:dark){:root[data-pal="green"]:not([data-theme="light"]){--pri:#2f9a63;--pri2:#3bb375;--tl:#86d9ad;--pritint:color-mix(in srgb,#2f9a63 16%,transparent)}}
:root[data-pal="blue"]{--pri:#1768b3;--pri2:#115394;--tl:#155ea2;--pritint:color-mix(in srgb,#1768b3 11%,transparent)}
:root[data-pal="blue"][data-theme="dark"]{--pri:#2f80c9;--pri2:#4a95da;--tl:#8cc4f5;--pritint:color-mix(in srgb,#2f80c9 16%,transparent)}
@media (prefers-color-scheme:dark){:root[data-pal="blue"]:not([data-theme="light"]){--pri:#2f80c9;--pri2:#4a95da;--tl:#8cc4f5;--pritint:color-mix(in srgb,#2f80c9 16%,transparent)}}
:root[data-pal="rose"]{--pri:#b4235f;--pri2:#94194d;--tl:#a01f55;--pritint:color-mix(in srgb,#b4235f 11%,transparent)}
:root[data-pal="rose"][data-theme="dark"]{--pri:#c7477d;--pri2:#d8608f;--tl:#f59ec4;--pritint:color-mix(in srgb,#c7477d 16%,transparent)}
@media (prefers-color-scheme:dark){:root[data-pal="rose"]:not([data-theme="light"]){--pri:#c7477d;--pri2:#d8608f;--tl:#f59ec4;--pritint:color-mix(in srgb,#c7477d 16%,transparent)}}
.pals{display:flex;flex-wrap:wrap;gap:8px 10px}
.pals button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;padding:8px 6px;border:0;border-radius:14px;background:transparent;color:var(--sub);font:600 12.5px var(--sans);cursor:pointer}
html[lang="ar"] .pals button{font-family:var(--arab)}
.pals i{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.18)}
.pals button[aria-pressed="true"]{background:var(--sf2);color:var(--tx)}
.pals button[aria-pressed="true"] i{outline:3px solid var(--c);outline-offset:3px}
.wset .pals{justify-content:center;padding:4px 0 2px;gap:2px;flex-wrap:nowrap}
.wset .pals button{min-width:0;flex:1 1 0;padding:6px 0;font-size:11px;gap:5px}
.wset .pals i{width:28px;height:28px}
.wmoved{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px;padding:12px 14px;border-radius:14px;background:var(--pritint);color:var(--tx);font-weight:600;font-size:14.5px;line-height:1.6;text-align:start}.wmoved svg{flex:none;width:20px;height:20px;color:var(--tl);margin-top:2px}