/* shell.css — App Shell: header / drawer / bottom-nav / glass — RTL */
*{box-sizing:border-box}
html,body{height:100%}
/* موبایل: زوم دابل‌تپ خاموش، و در چرخش صفحه متن بزرگ‌نمایی نشود */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  font-feature-settings: 'ss02';
  background-image:
    radial-gradient(600px 320px at 85% -5%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(700px 380px at 10% 0%, rgba(29,53,87,.14), transparent 60%);
  background-attachment:fixed;
  transition:background .35s,color .25s;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.glass{
  background:var(--surface);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
/* ---------- Scrollbar سراسری: باریک، شیشه‌ای، بدون فلش و بدون بکگراند ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(140,150,175,.55) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(140,150,175,.55);border-radius:99px;border:none}
*::-webkit-scrollbar-thumb:hover{background:var(--primary)}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:transparent}
/* ---------- Header ---------- */
.app-header{
  /* در حالت اپ نصب‌شده (standalone) هدر شیشه‌ای زیر نوار وضعیت می‌رفت؛ حالا با --top-off کمی بالاتر و بدون فضای خالی اضافه */
  position:fixed;top:var(--top-off);left:50%;transform:translateX(-50%);z-index:60;
  margin:0;max-width:1280px;width:calc(100% - 24px);
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  border-radius:22px;
}
/* جبران فضای هدر فیکس: ارتفاع هدر + آفست بالای آن */
body{padding-top:calc(var(--header-h) + var(--top-off));}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;white-space:nowrap}
.brand-mark{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--secondary),#2f5a94 60%,var(--primary));
  box-shadow:var(--shadow);flex:none;
}
.brand-mark svg{width:24px;height:24px}
.brand small{display:block;font-size:.68rem;font-weight:400;color:var(--muted)}
.desktop-nav{display:flex;align-items:center;gap:2px;margin-inline:auto;overflow-x:auto;scrollbar-width:none}
.desktop-nav::-webkit-scrollbar{display:none}
.desktop-nav a{
  padding:9px 13px;border-radius:12px;font-size:.9rem;white-space:nowrap;color:var(--muted);
  transition:.2s;border:1px solid transparent;
}
.desktop-nav a:hover{background:var(--surface-2);color:var(--text)}
.desktop-nav a.active{background:var(--primary-soft);color:var(--primary-ink);border-color:rgba(212,175,55,.35);font-weight:700}
.header-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.icon-btn{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--stroke);color:var(--text);transition:.2s;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.icon-btn svg{width:20px;height:20px}
.account-wrap{position:relative}
.account-btn{
  display:flex;align-items:center;gap:3px;padding:0;border-radius:14px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--stroke);color: inherit;width: max-content;
}
.account-btn .avatar{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#f3d97b);display:grid;place-items:center;color:#3a2f05;overflow:hidden;position:relative;flex:none;animation:avGlow 2.6s ease-in-out infinite}
.account-btn .avatar svg{width:26px;height:26px;position:relative;z-index:1}
.account-btn .avatar::after{content:"";position:absolute;top:-60%;bottom:-60%;width:16px;background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);transform:rotate(12deg);animation:avSheen 3.4s ease-in-out infinite}
@keyframes avGlow{0%,100%{box-shadow:0 0 0 rgba(212,175,55,0)}50%{box-shadow:0 0 14px rgba(212,175,55,.65)}}
@keyframes avSheen{0%{inset-inline-start:-30px;opacity:0}25%{opacity:1}55%,100%{inset-inline-start:calc(100% + 10px);opacity:0}}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:210px;padding:8px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s; background: var(--bg);
}
.account-wrap.open .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;font-size:.9rem}
.dropdown a:hover{background:var(--primary-soft)}
.dropdown button.theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;border:0;border-radius:12px;background:none;color:inherit;font-family:inherit;font-size:.9rem;cursor:pointer}
.dropdown button.theme-row:hover{background:var(--primary-soft)}
.tsun,.tmoon{width:19px;height:19px;flex:none;transition:opacity .3s,transform .3s,filter .3s}
.tsun{color:#e8a100;filter:drop-shadow(0 0 4px rgba(232,161,0,.7))}
.tmoon{color:#8aa2c5}
html[data-theme="light"] .tmoon{opacity:.3;transform:scale(.82);filter:none}
html[data-theme="dark"] .tsun{opacity:.3;transform:scale(.82);filter:none}
html[data-theme="dark"] .tmoon{filter:drop-shadow(0 0 5px rgba(138,162,197,.8))}
.tswitch{position:relative;width:44px;height:24px;border-radius:99px;flex:none;background:linear-gradient(135deg,#f3d97b,var(--primary));box-shadow:inset 0 1px 3px rgba(0,0,0,.28);transition:background .35s}
html[data-theme="dark"] .tswitch{background:linear-gradient(135deg,#27406e,#0d1830)}
.tknob{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:inset-inline-start .34s cubic-bezier(.34,1.45,.4,1)}
html[data-theme="dark"] .tknob{inset-inline-start:calc(100% - 21px)}
.dropdown svg{width:18px;height:18px;color:var(--muted)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#d33;color:#fff;font-size:.7rem;display:grid;place-items:center;margin-inline-start:auto}
/* unread notification marks (global shell) */
.icon-btn{position:relative}
.ndot{position:absolute;top:8px;inset-inline-end:8px;width:10px;height:10px;border-radius:50%;background:#e5484d;border:2px solid var(--bg)}
/* mobile topbar bits */
.mobile-only{display:none}
.hamburger{display:none}
/* ---------- Drawer (mobile) ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,15,30,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.25s;z-index:70}
.scrim.show{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(340px,88vw);z-index:80;
  padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);
  background:var(--surface-solid);border-inline-start:1px solid var(--stroke);
  border-radius:24px 0 0 24px;box-shadow:var(--shadow-lg);
  transform:translateX(105%);transition:transform .32s cubic-bezier(.32,.72,.24,1),visibility .32s;
  display:flex;flex-direction:column;overflow:hidden;
  visibility:hidden;
}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--stroke)}
.drawer-nav{overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:2px}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;font-size:.95rem}
.drawer-nav a svg{width:20px;height:20px;color:var(--muted)}
.drawer-nav a.active{background:var(--primary-soft);font-weight:700}
.drawer-nav a.active svg{color:var(--primary-ink)}
/* لینک‌های مهمان‌مخفی دراور (خرید اشتراک/اعلانات/تنظیمات): فقط بعد از لاگین */
body[data-authed="0"] .drawer-nav a.guest-hide{display:none}
.drawer-sep{height:1px;background:var(--stroke);margin:8px 4px}
.drawer-foot{margin-top:auto;padding:14px;border-top:1px solid var(--stroke);font-size:.8rem;color:var(--muted);text-align:center}
.drawer-foot b{color:var(--primary-ink)}
/* ---------- Main outlet ---------- */
.app-main{max-width:1280px;margin:18px auto 0;width:calc(100% - 24px);padding-bottom:calc(var(--bottom-h) + 0px)}
#page-outlet{animation:pageIn .32s cubic-bezier(.32,.72,.24,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
#page-outlet.leaving{opacity:0;transform:translateY(8px);transition:.18s}
/* skeleton */
.skeleton{display:grid;gap:12px}
.skel{height:64px;border-radius:16px;background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));background-size:200% 100%;animation:sh 1.1s infinite}
@keyframes sh{to{background-position:-200% 0}}
/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed;bottom:var(--nav-off);left:12px;right:12px;z-index:50;
  display:none;justify-content:space-around;align-items:center;
  padding:8px;height:var(--bottom-h);border-radius:26px;max-width:560px;margin-inline:auto;
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.68rem;color:var(--muted);padding:8px 12px;border-radius:18px;min-width:60px;transition:.2s}
.bottom-nav a svg{width:22px;height:22px}
.bottom-nav a.active{background:var(--primary-soft);color:var(--primary-ink);font-weight:700}
.bottom-nav a p{margin: 0}
/* install banner */
.install-bar{position:fixed;bottom:calc(var(--nav-off) + 88px);left:50%;transform:translate(-50%,14px);z-index:60;display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.85rem;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s cubic-bezier(.32,.72,.24,1),visibility .3s}
.install-bar.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* مودال اجباری به‌روزرسانی نسخه — بلاک‌کننده، هم‌خانواده شیشه‌ای */
.ver-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(10,15,30,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ver-modal[hidden]{display:none}
.ver-sheet{width:min(380px,100%);padding:30px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;animation:hqpop .3s cubic-bezier(.32,.72,.24,1)}
.ver-badge{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;color:#231a02;background:linear-gradient(135deg,#b8942a,var(--primary),#eed27a);box-shadow:0 12px 28px rgba(212,175,55,.4)}
.ver-badge svg{width:30px;height:30px}
.ver-sheet h2{margin:0;font-size:1.05rem}
.ver-sheet .sub{margin:0;font-size:.8rem;color:var(--muted);line-height:2}
.ver-nums{display:flex;gap:10px;font-size:.74rem;color:var(--muted)}
.ver-nums b{color:var(--text)}
.ver-full{width:100%;justify-content:center}
.ver-full.busy{opacity:.6;pointer-events:none}
/* چرخش آیکون دکمه بررسی آپدیت تنظیمات */
.st-row.spinning .ic svg{animation:hqspin 1s linear infinite}
@keyframes hqspin{to{transform:rotate(360deg)}}
/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .desktop-nav,.desktop-only{display:none}
  .mobile-only{display:grid}
  .hamburger{display:grid}
  .bottom-nav{display:flex}
  /* فضای ته صفحه = نوبار + کمی نفس (نوبار حالا با --nav-off نزدیک لبه است) */
  .app-main{padding-bottom:calc(var(--bottom-h) + 20px + var(--nav-off))}
  /* دکمه ورود هدر در موبایل نباشد (ورود از نوبار پایین) */
  [data-auth-open]{display:none !important}
  /* iOS با فوکوس روی فیلدهای زیر ۱۶px کل صفحه را زوم می‌کند؛ همه فیلدها ۱۶px */
  input,select,textarea{font-size:16px !important}
  .au-boxes input,.otp .boxes input{font-size:1.3rem !important}
}
@media (max-width:380px){
  body{padding-top:calc(54px + var(--top-off))}
  .app-header{width:calc(100% - 16px);gap:8px;padding:8px 10px;border-radius:18px}
  .app-main{width:calc(100% - 16px)}
  .brand{font-size:.95rem;gap:7px}
  .brand img{width:34px !important;height:34px !important}
  .brand small{display:none}
  .icon-btn{width:38px;height:38px;border-radius:12px}
  .icon-btn svg{width:18px;height:18px}
  .bottom-nav{left:8px;right:8px;padding:8px 4px;gap:0}
  .bottom-nav a{min-width:0;flex:1 1 0;padding:7px 2px;font-size:.6rem}
  .bottom-nav a svg{width:20px;height:20px}
}
@media (min-width:1024px){
  .drawer,.scrim,.bottom-nav{display:none !important}
}
@media (max-width:435px){
  /* نوبار بدون برچسب: ارتفاع کم‌تر (هماهنگ با --bottom-h) تا فضای خالی نماند */
  :root{--bottom-h:48px}
  .bottom-nav a p{display: none}
  .bottom-nav a{padding:4px 2px;gap:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
:focus-visible{outline:none}
a:focus-visible,button:focus-visible{box-shadow:0 0 0 3px var(--primary-soft);border-radius:12px}