*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--fs:16px}
html{font-size:var(--fs)}
body{
  --blue:#2f7bf5;--red:#e0192b;
  --bg1:#d6e6ff;--bg2:#f1f6ff;
  --card:rgba(255,255,255,.74);--card-b:rgba(255,255,255,.95);
  --text:#12295c;--sheet:#ffffff;
  --muted:color-mix(in srgb,var(--text) 62%,transparent);
  --shadow:0 8px 22px rgba(47,123,245,.16);
  margin:0;font-family:Vazirmatn,Tahoma,system-ui,sans-serif;color:var(--text);
  min-height:100dvh;line-height:1.6;
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 50%,var(--bg1));background-attachment:fixed;
}
body.dark{
  --bg1:#0a1024;--bg2:#111b3a;--card:rgba(32,45,92,.72);--card-b:rgba(255,255,255,.08);
  --text:#e6ecff;--sheet:#16224a;--red:#ff6b7a;--blue:#5a9bff;--shadow:0 8px 22px rgba(0,0,0,.45);
}
button{font-family:inherit;cursor:pointer}
#app{max-width:520px;margin:0 auto;padding:14px 14px 130px}

/* ---------- header ---------- */
.top{direction:ltr;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px}
.brand>svg{width:46px;height:46px}
.brand .div{width:1.5px;height:44px;background:rgba(47,123,245,.4)}
.brand h1{font-size:1.4rem;margin:0;font-weight:900;direction:rtl;text-align:right;line-height:1.4}
.brand small{display:block;direction:rtl;text-align:right;color:var(--muted);font-size:.78rem}
.gear{width:46px;height:46px;border-radius:50%;border:1px solid var(--card-b);background:var(--card);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--text)}
.gear svg{width:24px;height:24px}

/* ---------- hero ---------- */
.hero{position:relative;direction:ltr;min-height:285px;margin-top:4px}
.hero-text{direction:rtl;text-align:right;width:58%;padding-top:30px}
.hero-text h2{font-size:1.35rem;line-height:1.95;margin:0 0 8px;font-weight:900}
.hero-text p{font-size:.86rem;line-height:1.95;color:var(--muted);margin:0}
.hero-text p::after{content:"";display:block;width:62%;height:3px;border-radius:3px;margin-top:6px;background:linear-gradient(90deg,transparent,var(--blue))}
.robot{position:absolute;right:-10px;top:-8px;width:47%;max-width:240px;filter:drop-shadow(0 12px 18px rgba(47,123,245,.3))}

/* ---------- search ---------- */
.search{position:relative;margin:6px 0 16px}
.search input{width:100%;padding:15px 20px 15px 52px;border-radius:26px;border:1px solid var(--card-b);background:var(--card);color:var(--text);font:inherit;box-shadow:var(--shadow);outline:none}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--muted)}

/* ---------- topics ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{position:relative;min-height:128px;border-radius:22px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text);font-weight:800;font-size:.84rem;line-height:1.5;padding:10px 6px;text-align:center;backdrop-filter:blur(8px)}
.tile>svg{width:50%;height:auto}
.tile .x{position:absolute;top:7px;left:7px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:none;place-items:center;font-size:18px;line-height:1}
.managing .tile .x{display:grid}
.managing .tile{animation:wob .5s infinite alternate}
@keyframes wob{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:26px 0}

/* ---------- actions ---------- */
.actions,.infos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.act{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:20px;border:1.5px solid var(--blue);background:var(--card);color:var(--blue);text-align:right;min-height:74px}
.act svg{width:30px;height:30px;flex:none}
.act b{display:block;font-size:.95rem}
.act small{display:block;font-size:.7rem;opacity:.85;line-height:1.5}
.act.primary{background:linear-gradient(135deg,#3b8bff,#1d5fe0);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(47,123,245,.35)}
.info{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:20px;border:1px solid var(--card-b);background:var(--card);box-shadow:var(--shadow);color:var(--text);text-align:right;min-height:78px;position:relative;overflow:hidden}
.info .ib{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.info .ib svg{width:22px;height:22px}
.info.i1 .ib{background:#6d7cf0}.info.i2 .ib{background:#14a8a0}
.info.i1{background:linear-gradient(160deg,var(--card),rgba(120,130,240,.18))}
.info.i2{background:linear-gradient(160deg,var(--card),rgba(20,168,160,.18))}
.info b{display:block;font-size:.95rem}.info small{display:block;color:var(--muted);font-size:.7rem;line-height:1.5}
.info>svg.chev{width:18px;height:18px;margin-right:auto;color:var(--muted);flex:none}

/* ---------- bottom nav ---------- */
#nav{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 22px);max-width:498px;height:66px;border-radius:34px;background:var(--card);border:1px solid var(--card-b);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(20,60,160,.22);display:flex;align-items:center;justify-content:space-around;padding:0 6px;z-index:20}
#nav button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text);font-size:11px;padding:4px 0}
#nav button svg{width:25px;height:25px}
#nav button.on:not(.home){color:var(--blue)}
#nav .home{flex:0 0 74px;height:74px;margin-top:-30px;border-radius:50%;background:linear-gradient(145deg,#4a9aff,#1d5fe0);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(47,123,245,.5);border:4px solid var(--card-b)}
#nav .home svg{width:34px;height:34px}

/* ---------- common pages ---------- */
.page-head{display:flex;align-items:center;gap:8px;margin:6px 0 14px}
.page-head h1{flex:1;font-size:1.2rem;margin:0}
.ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--card-b);background:var(--card);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow);flex:none}
.ic svg{width:22px;height:22px}
.ic.on{color:var(--red)}
.ic.del{color:var(--red)}
.btn{display:block;width:100%;padding:14px;border-radius:18px;border:0;font-weight:800;font-size:1rem;margin-top:12px;color:var(--text)}
.btn.primary{background:linear-gradient(135deg,#3b8bff,#1d5fe0);color:#fff;box-shadow:0 10px 22px rgba(47,123,245,.3)}
.btn.ghost{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.btn.danger{background:var(--red);color:#fff}
.hint{color:var(--muted);font-size:.85rem;text-align:center;margin:10px 0 16px}
.book{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:10px;border-radius:20px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow)}
.book.gone{opacity:.55}
.bk-ico{width:44px;height:44px;flex:none;border-radius:14px;background:rgba(47,123,245,.12);display:grid;place-items:center}
.bk-ico svg{width:30px;height:30px}
.bk-main{flex:1;min-width:0}
.bk-main b{display:block;font-size:.98rem;line-height:1.6}
.bk-main small{display:block;color:var(--muted);font-size:.74rem}
.book .ic{width:38px;height:38px;box-shadow:none}
.noitem{text-align:center;color:var(--muted);padding:40px 10px;line-height:2}

/* ---------- reader: top + hero ---------- */
.rd-top{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px}
.rd-act{display:flex;gap:8px}
.rd-hero{display:grid;grid-template-columns:42% 1fr;gap:12px;direction:ltr;align-items:center;margin:6px 0 14px}
.cover-wrap{position:relative;padding-bottom:14px}
.plat{position:absolute;left:-8%;right:-8%;bottom:0;height:24px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 6px 14px rgba(47,123,245,.25)}
.cover{position:relative;z-index:1;aspect-ratio:3/4.2;border-radius:6px 16px 16px 6px;background:radial-gradient(circle at 50% 55%,rgba(60,120,255,.45),transparent 62%),linear-gradient(160deg,#173b9b,#081650);color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:14px 10px 12px 16px;box-shadow:0 18px 30px rgba(20,50,150,.45),inset 4px 0 0 rgba(255,255,255,.18);overflow:hidden}
.cover .ct{font-weight:800;letter-spacing:.4px;line-height:1.3;text-transform:uppercase;word-break:break-word;direction:ltr}
.cover .ci{width:56%;filter:drop-shadow(0 0 8px #4aa8ff)}
.cover .ci svg{width:100%;height:auto;display:block}
.cover .ca{font-size:.62rem;opacity:.8;letter-spacing:.5px;direction:ltr;min-height:1em}
.rd-info{direction:rtl;text-align:right}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 8px;border-radius:22px;background:linear-gradient(135deg,rgba(47,123,245,.2),rgba(111,168,255,.38));color:var(--blue);font-weight:800;font-size:.9rem;margin-bottom:10px}
.tag svg{width:26px;height:26px}
.bt{font-size:1.65rem;line-height:1.5;margin:0;font-weight:900}
.bt-en{direction:ltr;text-align:right;color:var(--muted);font-weight:600;margin:2px 0 10px;font-size:1rem;line-height:1.5}
.auth{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;background:var(--card);border:1px solid var(--card-b);box-shadow:var(--shadow)}
.auth .av{width:36px;height:36px;color:var(--blue);flex:none}
.auth .av svg{width:100%;height:100%}
.auth small{display:block;color:var(--muted);font-size:.74rem;line-height:1.4}
.auth b{display:block;font-size:1rem;line-height:1.5}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.st{background:var(--card);border:1px solid var(--card-b);border-radius:18px;padding:10px 8px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.st .l{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--muted);line-height:1.4}
.st .l svg{width:18px;height:18px;flex:none;color:var(--blue)}
.st.rt .l svg{color:#f5a623}
.st b{display:block;text-align:center;font-size:1.05rem;line-height:1.5}
.st b.sm{font-size:.8rem}

/* ---------- reader: sections ---------- */
.reader{margin-top:6px}
.sec{position:relative;display:flow-root;overflow:hidden;margin:16px 0;padding:18px;border-radius:24px;border:1px solid var(--card-b);box-shadow:var(--shadow);background:linear-gradient(100deg,var(--tint),var(--card) 72%)}
.k1{--c:#2f7bf5;--tint:rgba(47,123,245,.2);--g:linear-gradient(135deg,#2f7bf5,#58a6ff)}
.k2{--c:#12a15f;--tint:rgba(18,161,95,.2);--g:linear-gradient(135deg,#0f9d58,#3ccd82)}
.k3{--c:#7c4dff;--tint:rgba(124,77,255,.2);--g:linear-gradient(135deg,#6a3df0,#a374ff)}
.k4{--c:#f2780c;--tint:rgba(242,120,12,.2);--g:linear-gradient(135deg,#ee6c0a,#ffa43d)}
.tab{display:flex;align-items:center;gap:8px;width:fit-content;margin:-18px 0 14px;margin-inline-start:-18px;padding:9px 20px;border-radius:22px 0 22px 22px;background:var(--g);color:#fff;font-weight:900;font-size:1.05rem}
.tab svg{width:21px;height:21px;flex:none}
.deco{float:left;width:90px;height:auto;margin:0 12px 6px 0}
.sec p{line-height:2.2;margin:0 0 14px;font-size:1rem;text-align:justify;text-justify:inter-word}
.sec h3{display:flow-root;font-size:1.05rem;margin:22px 0 10px;padding-bottom:8px;border-bottom:1px dashed rgba(127,127,127,.4);font-weight:800}
.sec h3::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:.8rem;margin-inline-end:8px;vertical-align:middle}
.imp{color:var(--red);font-weight:800}
.sec ol,.sec ul{list-style:none;padding:0;margin:0 0 12px}
.sec li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:10px;border-radius:14px;background:rgba(127,150,230,.12);line-height:2.05}
.num{flex:none;width:28px;height:28px;margin-top:4px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:800}
.lt{flex:1}
.rd-foot{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:18px}
.rd-foot .btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:.92rem;padding:14px 8px}
.rd-foot .btn svg{width:20px;height:20px;flex:none}
.live-pill{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:10px;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--card-b);box-shadow:var(--shadow);border-radius:20px;padding:8px 14px;margin-bottom:10px;font-size:.85rem}
.live-pill span{flex:1}
.mini{border:0;background:var(--red);color:#fff;border-radius:12px;padding:5px 12px;font-size:.8rem}
.spin{width:18px;height:18px;border:3px solid rgba(47,123,245,.25);border-top-color:var(--blue);border-radius:50%;animation:sp .9s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.skel div{height:16px;border-radius:8px;margin:14px 0;background:linear-gradient(90deg,rgba(127,150,230,.15),rgba(127,150,230,.35),rgba(127,150,230,.15));background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}
.errbox{background:var(--card);border:1px solid var(--card-b);border-right:6px solid var(--red);border-radius:22px;padding:20px;line-height:2.1;box-shadow:var(--shadow)}

/* ---------- stats ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.tiles .t{background:var(--card);border:1px solid var(--card-b);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.tiles .t:last-child{grid-column:1/-1}
.tiles .t small{color:var(--muted);font-size:.78rem}
.tiles .t b{display:block;font-size:1.35rem;color:var(--blue)}
.chart{background:var(--card);border:1px solid var(--card-b);border-radius:22px;padding:6px 16px 14px;box-shadow:var(--shadow)}
.chart h3{margin:14px 0 4px;font-size:1.02rem}
.bar{margin:14px 0}
.bar .row{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;margin-bottom:6px}
.bar .row span:first-child{font-weight:700}
.bar .row span:last-child{color:var(--muted);white-space:nowrap}
.track{height:13px;border-radius:9px;background:rgba(127,150,230,.18);overflow:hidden}
.fill{height:100%;border-radius:9px}

/* ---------- sheets ---------- */
#sheets .sheet-bg,.sheet-bg{position:fixed;inset:0;background:rgba(5,10,30,.55);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg.center{align-items:center;padding:20px}
.sheet{width:100%;max-width:520px;max-height:90dvh;overflow:auto;background:var(--sheet);color:var(--text);border-radius:28px 28px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));animation:up .25s ease}
.sheet.small{border-radius:24px;text-align:center;line-height:2}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h3{margin:0 0 14px;font-size:1.2rem}
.sheet p{line-height:2.1;margin:6px 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inp{width:100%;padding:14px;border-radius:16px;border:1.5px solid rgba(127,150,230,.5);background:transparent;color:var(--text);font:inherit;outline:none}
.lbl{margin:14px 0 6px;font-weight:700;font-size:.9rem}
.icons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:42dvh;overflow:auto;padding:4px}
.ico{border:2px solid transparent;border-radius:14px;background:rgba(127,150,230,.12);padding:7px}
.ico.on{border-color:var(--blue);background:rgba(47,123,245,.2)}
.ico svg{width:100%;height:auto;display:block}
.set{margin:16px 0}
.set label{display:block;font-weight:700;margin-bottom:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{padding:12px;border-radius:14px;border:1.5px solid rgba(127,150,230,.5);background:transparent;color:var(--text);font-weight:700}
.seg button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.set input[type=range]{width:100%;accent-color:var(--blue)}
.fsprev{margin-top:6px;padding:10px;border-radius:12px;background:rgba(127,150,230,.12)}
.sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swb{width:34px;height:34px;border-radius:50%;border:2px solid rgba(127,127,127,.45);padding:0}
.swb.def{width:auto;border-radius:17px;padding:0 12px;background:transparent;color:var(--text);font-size:.8rem}
.swb.on{outline:3px solid var(--blue);outline-offset:2px}
.sw input[type=color]{width:42px;height:34px;border:0;background:none;padding:0}
.about-name{font-weight:900;color:var(--blue)}

#toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);background:#10224f;color:#fff;padding:12px 18px;border-radius:16px;opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:88%;text-align:center;line-height:1.9;font-size:.9rem}
#toast.show{opacity:1;transform:translate(-50%,0)}