/* style.css */

/* ====== متغیرها و فونت ====== */
:root{
  --font-ui:"Vazirmatn","Inter",ui-sans-serif,system-ui,-apple-system,"Noto Naskh Arabic",Segoe UI,Roboto,sans-serif;
  --bg:#F6FFFB; --paper:#FFFFFF; --ink:#152c25; --muted:#D7E9E0;
  --gold:#A1E6C6; --g1:#B8F3D4; --g2:#DFFBEA; --brown:#2D6B55; --iconStrong:#14222B;
  --shadow:0 10px 26px rgba(30,25,15,.08);
  --nav-h:70px;           /* ارتفاع تب‌بار */
  --ind-scale-max:1.28;   /* بزرگ‌ترین مقیاس دایرهٔ تب‌بار (تب مترو‌نوم) */
  --nav-clearance: calc(var(--nav-h) * (1 + (var(--ind-scale-max) / 2))); /* فاصله تا بالای بزرگ‌ترین دایره */
  --topbar-h:64px;        /* ارتفاع تقریبی هدر برای محاسبهٔ ارتفاع viewport */
}

/* ارتفاع تب‌بار در موبایل */
@media (max-width:768px){ :root{ --nav-h:64px } }


/* ====== پایه و هدر ====== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ touch-action:pan-x pan-y; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.6 var(--font-ui) }

.topbar{
  position:sticky; top:0; z-index:5;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--muted); min-height:var(--topbar-h);
}
.topbar__side{ display:flex; align-items:center }
.topbar__side--left{ justify-content:flex-start }
.topbar__side--right{ justify-content:flex-end }
.brand{ font-weight:800; justify-self:center; text-align:center }

/* ====== آیکون تنظیمات ====== */
.icon-btn{ height:36px; min-width:36px; padding:0 10px; border-radius:999px; border:1px solid var(--muted); background:var(--paper); color:var(--iconStrong); box-shadow:var(--shadow); cursor:pointer }
.topbar .icon-btn{ color:var(--iconStrong); background:var(--paper) }
.icon-btn .settings-icon{ width:28px; height:28px; display:block }
.si g{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.si-k circle{ fill:currentColor; stroke:currentColor }
.icon-btn:hover .si-k,.icon-btn:focus-visible .si-k,.icon-btn:active .si-k{ animation:si-sl 1s ease-in-out 0s 2 alternate }
.icon-btn:hover .si-m,.icon-btn:focus-visible .si-m,.icon-btn:active .si-m{ animation:si-sr 1s ease-in-out 0s 2 alternate }
@keyframes si-sl{ from{ transform:translateX(0) } to{ transform:translateX(8px) } }
@keyframes si-sr{ from{ transform:translateX(0) } to{ transform:translateX(-8px) } }
.menu{ position:relative }

.menu-pop{
  position: fixed;
  top: var(--topbar-h);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  max-width: min(92vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--muted);
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 12px;
  bottom: calc(var(--nav-clearance) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--topbar-h) - calc(var(--nav-clearance) + env(safe-area-inset-bottom, 0px)));
  overflow: auto;
  z-index: 20;
}
.menu-pop[hidden]{
  display: none !important;
}

.save-menu{
  width: min(92vw, 1200px);
  max-width: min(92vw, 1200px);
}
.save-menu__section{
  border: 1px solid var(--muted);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in oklab, var(--paper) 92%, var(--muted) 8%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.save-menu__section--full{
  width: 100%;
}
.save-menu__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px){
  .save-menu__grid{ grid-template-columns: 1fr; }
}
.save-menu__section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.save-menu__title{
  font-weight:700;
  font-size:15px;
}
.save-menu__actions{ display:flex; gap:6px; flex-wrap:wrap; }
.save-menu__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.save-menu__add{
  align-self:flex-start;
  border:1px dashed var(--muted);
  background:transparent;
  color:var(--ink);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.save-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  border-radius:10px;
  background:var(--paper);
  border:1px solid color-mix(in oklab, var(--muted) 70%, transparent);
}
.save-item__btn{
  background:transparent;
  border:none;
  text-align:start;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  flex:1;
}
.save-item__meta{ display:flex; gap:8px; align-items:center; flex:1; min-width:180px; }
.save-item__name{ font-weight:700; color:var(--ink); word-break:break-word; }
.save-item__actions{ display:flex; gap:6px; flex-wrap:wrap; }
.save-item__load{
  border:1px solid var(--muted);
  background:color-mix(in oklab, var(--paper) 90%, transparent);
  color:var(--ink);
  padding:6px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.save-item__load:hover,
.save-item__load:focus-visible{ box-shadow:var(--shadow); }
.save-item__icon-btn{
  width:30px;
  height:30px;
  border-radius:8px;
  border:1px solid var(--muted);
  background:var(--paper);
  color:var(--iconStrong);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.save-item__icon-btn:hover,
.save-item__icon-btn:focus-visible{ box-shadow:var(--shadow); }
.save-menu__empty{
  padding:6px 0;
  color:color-mix(in oklab, var(--ink) 70%, transparent);
  font-size:14px;
}
.chip--ghost{
  background:color-mix(in oklab, var(--paper) 86%, var(--muted) 14%);
}

.save-export{ position: relative; }
.save-export__cta-row{
  display:flex;
  gap:10px;
  width:100%;
}
.save-export__cta{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 10px;
  border-radius:12px;
  border:1px solid var(--muted);
  background:color-mix(in oklab, var(--paper) 90%, var(--muted) 10%);
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.save-export__cta:hover,
.save-export__cta:focus-visible{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}
.save-export__cta-icon{
  width:22px;
  height:22px;
}
.save-export__dialog{
  margin-top: 8px;
  border:1px dashed color-mix(in oklab, var(--muted) 70%, transparent);
  border-radius: 10px;
  padding: 10px;
  background: color-mix(in oklab, var(--paper) 92%, var(--muted) 8%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.save-export__label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
.save-export__label input{
  padding: 8px 10px;
  border-radius: 8px;
  border:1px solid var(--muted);
  background: var(--paper);
  color: var(--ink);
}
.save-export__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.save-export__option{
  border:1px solid var(--muted);
  border-radius: 10px;
  padding: 10px;
  background: var(--paper);
  cursor:pointer;
  text-align: start;
  font-weight: 700;
  color: var(--ink);
}
.save-export__option:focus-visible,
.save-export__option:hover{
  box-shadow: var(--shadow);
}
.save-export__actions{ display:flex; justify-content:flex-end; }

.menu-sec{ padding:6px 4px }
.menu-title{ font-weight:700; margin-bottom:6px; opacity:.85 }
.row{ display:flex; align-items:center }
.gap{ gap:10px }
.chip{ border:1px solid var(--muted); background:var(--paper); color:var(--ink); border-radius:999px; padding:6px 12px; cursor:pointer }



/* ====== بنر نصب PWA ====== */
.install-banner{
  position:fixed;
  left:50%;
  bottom:calc(var(--nav-h) + 28px);
  transform:translateX(-50%);
  width:min(460px,calc(100% - 32px));
  padding:14px 16px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--muted);
  border-radius:18px;
  box-shadow:var(--shadow);
  z-index:30;
  display:flex;
  pointer-events:auto;
}
.install-banner[hidden]{ display:none }
.install-banner__body{ display:flex; flex-direction:column; gap:12px; width:100%; text-align:start }
.install-banner__text{ margin:0; font-weight:700; line-height:1.5 }
.install-banner__actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap }
.install-banner__btn{
  flex:1 1 auto;
  min-width:110px;
  border-radius:999px;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--muted);
  background:var(--paper);
  color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.install-banner__btn:active{ transform:scale(.97) }
.install-banner__btn:focus-visible{ outline:2px solid color-mix(in oklab, var(--accent, var(--ink)) 60%, transparent); outline-offset:2px }
.install-banner__btn--primary{
  background:var(--accent, var(--brown));
  border-color:color-mix(in oklab, var(--accent, var(--brown)) 80%, transparent);
  color:color-mix(in oklab, #ffffff 92%, var(--paper) 8%);
}
.install-banner__btn--ghost{
  background:color-mix(in oklab, var(--paper) 88%, var(--muted) 12%);
}


@media (max-width:600px){
  .install-banner{
    bottom:calc(var(--nav-h) + 18px);
    width:calc(100% - 24px);
  }
  .install-banner__actions{ flex-direction:column }
  .install-banner__btn{ width:100% }
}


/* ====== پالت‌های رنگ ====== */
.swatch{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--ink); /* fallback */
  border-color: color-mix(in oklab,var(--ink) 25%,transparent);
  outline:2px solid transparent; cursor:pointer;
}
.swatch[data-active="true"]{ outline:2px solid var(--gold) }

/* ====== چیدمان کلی ====== */
.viewport{
  min-height:calc(100dvh - var(--topbar-h) - var(--nav-h) - 8px);
  display:grid; grid-template-rows:auto 1fr auto; align-items:center; gap:14px; padding:12px;
  overflow:visible; /* جلوگیری از مخفی شدن پاپ‌آپ‌های ورود در زیر هدر */
}
.score{ background:transparent; border-radius:16px; padding:6px }
.score__title{ font-weight:700; opacity:.85; margin-bottom:6px }
.score__canvas{ height:clamp(110px,22vh,210px); border-radius:14px; position:relative; background:transparent }
.score__canvas::before{
  content:""; position:absolute; inset:0; border-radius:14px; padding:2px;
  background:linear-gradient(135deg,var(--g1),var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ====== دیال ====== */
.dial{ width:var(--dialSize, clamp(160px,26vw,300px)); aspect-ratio:1; position:relative; border-radius:50%; overflow:hidden; touch-action:none; user-select:none }
/* ======== تنظیم دقیق دیال برای موبایل و دسکتاپ ======== */
@media (max-width:768px){ .dial{ width: var(--dialSize, clamp(260px,36vw,420px)) } } /* موبایل: دقیقاً مثل قبل، بدون تغییر */
@media (min-width:769px){ .dial{ width: clamp(240px,32vw,380px) } }               /* دسکتاپ: کمی کوچک‌تر طبق خواسته */
.gear-svg{ width:100%; height:100% }

/* ====== برچسب‌ها ====== */
.labels{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; pointer-events:none; text-align:center; padding:12px }
.rhythm-line{ font-weight:600; font-size:clamp(16px,2.2vw,22px); display:flex; gap:8px; align-items:center }
.rlbl{ opacity:.9 }
.frac.stack{ display:grid; grid-template-rows:auto auto; justify-items:center; line-height:1 }
.frac .num,.frac .den{ font-weight:800; font-size:.95em }
.speed-line{ display:flex; align-items:baseline; gap:10px; direction:ltr; order:1 }
#tempoNum{ font-variant-numeric:tabular-nums; letter-spacing:.25px; font-weight:700; font-size:clamp(50px,7.8vw,98px) }
.speed-line .unit{ font-size:clamp(14px,1.8vw,20px); opacity:.9; font-weight:600 }
.bar-line{ font-size:clamp(16px,2.1vw,22px); font-weight:600; opacity:.9; order:1; margin-top:-6px }
.dial-inline-time{ font-variant-numeric:tabular-nums; font-size:clamp(12px,1.7vw,16px); font-weight:700; opacity:.84; margin-top:-10px; order:2; letter-spacing:.4px; }

/* ====== ورودی‌های مخفی ====== */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ====== تب‌بار پایین ====== */
nav.navigation{
  position:fixed; left:50%; transform:translateX(-50%); bottom:12px;
  width:min(92vw,980px); height:var(--nav-h);
  background:var(--paper);
  display:flex; justify-content:center; align-items:center;
  border-radius:14px; z-index:5;
  --ind-scale:1;                                   /* مقیاس دایره */
  --ind-size: calc(var(--nav-h) * var(--ind-scale)); /* قطر دایره */
}

/* بزرگ‌تر شدن دایره در حالت تب وسط یا اتریبیوت داده‌شده */
nav.navigation:has(li:nth-child(3).active),
nav.navigation[data-big="true"]{ --ind-scale:1.28 }

/* ساختار لیست تب‌ها */
nav.navigation ul{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; width:100%;
}
nav.navigation ul li{ position:relative; list-style:none; height:var(--nav-h); z-index:1 }

/* تب */
nav.navigation a.tab{
  position:relative; display:flex; justify-content:center; align-items:center;
  flex-direction:column; width:100%; height:100%; text-align:center; font-weight:500; text-decoration:none;
}

/* آیکن‌ها */
:root{ --icon-size: clamp(22px, calc(var(--nav-h) * .46), 36px) } /* اندازه آیکن‌ها */
nav.navigation .icon{
  display:grid; place-items:center; width:100%; height:100%;
  line-height:0; font-size:1.5rem; position:relative; z-index:2;
  color:var(--clr, var(--ink));
  transition:transform .6s cubic-bezier(.2,.8,.2,1), color .35s;
}
nav.navigation .icon > ion-icon,
nav.navigation .icon svg{ width:var(--icon-size); height:var(--icon-size); display:block }

/* تینت برای آیکن‌های تک‌رنگ */
nav.navigation .icon.icon--mono svg *:not([fill]):not([style*="fill"]){ fill:currentColor }
nav.navigation .icon.icon--mono svg *:not([stroke]):not([style*="stroke"]){ stroke:currentColor }
nav.navigation .icon.icon--mono svg *[fill="none"]{ fill:none }

/* رنگ آیکن فعال روی دایره (وابسته به تم) */
body[data-theme="dark"]  nav.navigation li.active .icon.icon--mono{ color:var(--g1) }
body[data-theme="light"] nav.navigation li.active .icon.icon--mono{ color:var(--brown) }

/* خود دایرهٔ ایندیکیتور */
.indicator{
  position:absolute; left:0; top:calc(-0.5 * var(--ind-size));
  width:var(--ind-size); height:var(--ind-size);
  background:var(--accent, var(--gold));
  border-radius:50%; border:6px solid var(--bg);
  opacity:0; z-index:0;
  will-change:left, top, width, height, box-shadow, opacity;
}

/* بالچه‌های اتصال به نوار (هم‌مقیاس با دایره) */
.indicator::before,
.indicator::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:calc(var(--ind-size) * .28); height:calc(var(--ind-size) * .28); background:transparent;
}
.indicator::before{
  left:calc(-1 * var(--ind-size) * .31);
  border-top-right-radius:calc(var(--ind-size) * .28);
  box-shadow:1px calc(-1 * var(--ind-size) * .20) 0 0 var(--bg);
}
.indicator::after{
  right:calc(-1 * var(--ind-size) * .31);
  border-top-left-radius:calc(var(--ind-size) * .28);
  box-shadow:-1px calc(-1 * var(--ind-size) * .20) 0 0 var(--bg);
}

/* انیمیشن آیکن فعال (بالا آمدن داخل دایره) */
nav.navigation .icon{ transform:translate3d(0,0,0) scale(1) }

/* فقط گلیفِ آیکن را انیمیت کن، نه کل ظرف .icon */
nav.navigation .icon svg,
nav.navigation .icon ion-icon{
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  transform: translate3d(0,0,0) scale(1);
  display:block;
}

/* === start: تنظیم پایین‌بردن آیکن‌های غیرفعال (idle offset) === */
nav.navigation li:not(.active) .icon svg,
nav.navigation li:not(.active) .icon ion-icon{
  transform: translate3d(0, var(--idle-offset-y, 2px), 0) scale(1);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

@media (min-width: 769px){
  nav.navigation{ --idle-offset-y: 15px }  /* دسکتاپ */
}
@media (max-width: 768px){
  nav.navigation{ --idle-offset-y: 12px }  /* موبایل */
}


/* موبایل: تب‌بار تمام‌عرض پایین */
@media (max-width:768px){
  nav.navigation{
    left:0; right:0; bottom:0; width:100vw; transform:none;
    border-radius:0; box-shadow:0 12px 28px rgba(0,0,0,.28);
  }
  body{ padding-bottom:calc(env(safe-area-inset-bottom,0px)) }
}

/* کاهش انیمیشن */
@media (prefers-reduced-motion:reduce){
  .indicator, nav.navigation .icon, nav.navigation .text{ transition:none }
}

/* ====== واکنش‌گرا ====== */
@media (min-width:900px){
  .viewport{ grid-template-rows:auto 1fr auto }
  .score__canvas{ height:clamp(150px,20vh,240px) }
}

/* ====== حالت بوت (خاموشی گذرای ترنزیشن‌ها) ====== */
nav.navigation.is-booting .indicator,
nav.navigation.is-booting .icon{ transition:none!important }


/* — لیبل استاندارد زیر آیکن‌ها — */
nav.navigation .text{
  font: 600 13px/1.2 var(--font-ui);
  margin-top: 6px;
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  color: var(--ink);
}
nav.navigation li.active .text{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* مهم: ظرف آیکن را جابه‌جا/بزرگ نکن؛ فقط خود گلیف حرکت کند */
nav.navigation .list.active .icon{ transform: none !important; }
nav.navigation .list.active .icon svg,
nav.navigation .list.active .icon ion-icon{
  transform: translate3d(0, calc(-0.5 * var(--nav-h) + var(--lift-fix, 0px)), 0) scale(1.12);
}


/* ===== [PATCH] فیکس نهایی اندازه/موقعیت دایره و بالچه‌ها ===== */

/* رفتار دایره و بالچه‌ها با متغیرهای صریح */
nav.navigation .indicator{
  top: calc(-0.5 * var(--ind-size) + var(--ind-top, 0px)) !important;
  transform: translateX(var(--ind-left, 0px)) !important;
  width: var(--ind-size) !important;
  height: var(--ind-size) !important;
  transition:
    left .45s ease, top .45s ease, transform .35s ease,
    width .35s ease, height .35s ease,
    box-shadow .3s ease, opacity .2s ease !important;
}

/* بالچه‌ها با متغیرها کنترل می‌شوند */
nav.navigation .indicator::before,
nav.navigation .indicator::after{
  width:  var(--fin-w, 22px)  !important;
  height: var(--fin-h, 22px)  !important;
  top: 50% !important;
  transform: translate(var(--fin-dx, 0px), calc(-50% + var(--fin-dy, 0px))) !important;
  background: transparent !important;
}
nav.navigation .indicator::before{
  border-top-right-radius: var(--fin-radius, 35px) !important;
  box-shadow: 1px var(--fin-shadow-y, -10px) 0 0 var(--bg) !important;
  left: calc(-1 * var(--fin-gap, 9px) - var(--fin-w, 22px)) !important;
}
nav.navigation .indicator::after{
  border-top-left-radius: var(--fin-radius, 35px) !important;
  box-shadow: -1px var(--fin-shadow-y, -10px) 0 0 var(--bg) !important;
  right: calc(-1 * var(--fin-gap, 9px) - var(--fin-w, 22px)) !important;
}

/* پروفایل‌ها: دسکتاپ/موبایل × آیکون های وسط/غیروسط */
@media (min-width: 769px){
  nav.navigation{
    --ind-top: -12px; --ind-left: 0px; --ind-size: 64px;
    --fin-dy: 20px; --fin-dx: 0px; --fin-w: 30px; --fin-h: 16px; --fin-gap: -3px; --fin-radius: 40px; --fin-shadow-y: -6px;
  }
  nav.navigation:has(li:nth-child(3).active){
    --ind-top: -10px; --ind-left: 0px; --ind-size: 90px;
    --fin-dy: 21px; --fin-dx: 0px; --fin-w: 25px; --fin-h: 22px; --fin-gap: -1px; --fin-radius: 40px; --fin-shadow-y: -8px;
  }
}
@media (max-width: 768px){
  nav.navigation{
    --ind-top: -12px; --ind-left: 0px; --ind-size: 64px;
    --fin-dy: 20px; --fin-dx: 0px; --fin-w: 30px; --fin-h: 20px; --fin-gap: -4px; --fin-radius: 40px; --fin-shadow-y: -8px;
  }
  nav.navigation:has(li:nth-child(3).active){
    --ind-top: -10px; --ind-left: 0px; --ind-size: 90px;
    --fin-dy: 20px; --fin-dx: 0px; --fin-w: 25px; --fin-h: 22px; --fin-gap: -1px; --fin-radius: 35px; --fin-shadow-y: -8px;
  }
}

nav.navigation .indicator{ box-sizing: border-box; }

/* تب وسط: بالا آمدن + اسکیل فقط گلیف */
nav.navigation li.list:nth-child(3).active .icon svg,
nav.navigation li.list:nth-child(3).active .icon ion-icon{
  --center-scale: 1.5;    /* اندازه‌ی آیکن تب وسط */
  --center-offset-y: 10px; /* آفست عمودی برای دسکتاپ */
  transform:
    translate3d(
      0,
      calc(-0.5 * var(--ind-size) + var(--lift-fix, 0px) + var(--center-offset-y, 0px)),
      0
    )
    scale(var(--center-scale));
}
@media (max-width: 768px){
  nav.navigation li.list:nth-child(3).active .icon svg,
  nav.navigation li.list:nth-child(3).active .icon ion-icon{
    --center-offset-y: 12px; /* آفست عمودی برای موبایل */
  }
}

/* اسکیل آیکن‌ها حول مرکز گلیف */
nav.navigation .icon svg,
nav.navigation .icon ion-icon{
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* لمس موبایل: حذف هایلایت آبی + خاموش کردن outline پیش‌فرض در لمس */
@media (pointer: coarse){
  a, button, .icon-btn, .chip, nav.navigation .tab{
    -webkit-tap-highlight-color: transparent;
  }
  a:focus, button:focus, .icon-btn:focus, .chip:focus, nav.navigation .tab:focus{
    outline: none;
  }
}

/* فوکوس با کیبورد */
:root{
  --focus-ring: var(--gold);
  --focus-radius: 12px;
}
a:focus-visible,
button:focus-visible,
.icon-btn:focus-visible,
.chip:focus-visible,
nav.navigation .tab:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--focus-radius);
}

/* فایرفاکس: برداشتن حاشیهٔ داخلی دکمه‌ها */
button::-moz-focus-inner{ border:0; }

/* خاموش کردن کامل سایه‌ها در نوار پایین و ایندیکیتور */
nav.navigation{ box-shadow: none !important; }
nav.navigation .indicator{ box-shadow: none !important; }

/* === [CENTER DIAL — COMBINED, MINIMAL] === */
#panel-player{ position:relative; min-height:calc(100dvh - var(--topbar-h) - var(--nav-h)) }
#panel-player .dial-area{
  position:absolute; inset:0; display:grid; place-items:center;
  transform:translate(var(--dial-shift-x,0px), var(--dial-shift,0px));
  transition:transform .35s ease; z-index:2
}

@media (max-width:768px){
  #panel-player{
    height:calc(100dvh - var(--topbar-h) - var(--nav-h));
    overflow:hidden;
    overscroll-behavior:contain;
  }
}

/* دسکتاپ */
@media (min-width:769px){
  :root{
    --dial-shift: 210px;   /* عمودی دسکتاپ (پایین = +px) */
    --dial-shift-x: 5px; /* افقی دسکتاپ (راست = +px) */
  }
}

/* موبایل */
@media (max-width:768px){
  :root{
    --dial-shift: 90px;   /* عمودی موبایل (پایین = +px) */
    --dial-shift-x: 5px; /* افقی موبایل (راست = +px) */
  }
}

/* ======== [Icons — Color System Rewrite] ======== */

/* تمام آیکن‌ها در حالت غیرفعال: لایت=سیاه، دارک=سفید */
body[data-theme="light"] nav.navigation li:not(.active) a#tab-player  svg *{ fill:#000 !important; stroke:#000 !important }
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-player  svg *{ fill:#fff !important; stroke:#fff !important }
body[data-theme="light"] nav.navigation li:not(.active) a#tab-tuner   svg *{ stroke:#000 !important;}
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-tuner   svg *{ stroke:#fff !important;}
body[data-theme="light"] nav.navigation li:not(.active) a#tab-account svg *{ stroke:#000 !important }
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-account svg *{ stroke:#fff !important }

/* پلی — غیرفعال: بدنه با تم، آبجکت مرکزِ مخالف + حاشیه هم‌رنگ بدنه */
body[data-theme="light"] nav.navigation li:not(.active) a#tab-poly .body-poly   *{
  fill:#000 !important; stroke:#000 !important;
}
body[data-theme="light"] nav.navigation li:not(.active) a#tab-poly .objects-poly *{
  fill:#fff !important;                  /* مرکز مخالف بدنه */
  stroke:#000 !important;                /* حاشیه مطابق بدنه */
  stroke-width:6 !important;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
}
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-poly .body-poly   *{
  fill:#fff !important; stroke:#fff !important;
}
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-poly .objects-poly *{
  fill:#fff !important;                  /* مرکز مخالف بدنه */
  stroke:#fff !important;                /* حاشیه مطابق بدنه */
  stroke-width:6 !important;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
}

/* ماشین‌حساب — غیرفعال: بدنه با تم؛ آبجکت همیشه زردِ ثابت */
body[data-theme="light"] nav.navigation li:not(.active) a#tab-calc .main-body-calc   *{ fill:#000 !important; stroke:#000 !important }
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-calc .main-body-calc   *{ fill:#fff !important; stroke:#fff !important }
nav.navigation li:not(.active) a#tab-calc .accent-color-calc *{ fill:#FFDC00 !important; stroke:#FFDC00 !important } /* زرد ثابت */

/* ======== حالت فعال (قاعدهٔ کلی) ======== */
/* بدنه در لایت = iconStrong ، در دارک = bg ؛ آبجکت برعکس بدنه */
body[data-theme="light"] nav.navigation li.active a#tab-player  svg *{ fill:var(--iconStrong) !important; stroke:var(--iconStrong) !important }
body[data-theme="dark"]  nav.navigation li.active a#tab-player  svg *{ fill:var(--bg)         !important; stroke:var(--bg)         !important }
body[data-theme="light"] nav.navigation li.active a#tab-tuner   svg *{ stroke:var(--iconStrong) !important }
body[data-theme="dark"]  nav.navigation li.active a#tab-tuner   svg *{ stroke:var(--bg)         !important }
body[data-theme="light"] nav.navigation li.active a#tab-account svg *{ stroke:var(--iconStrong) !important }
body[data-theme="dark"]  nav.navigation li.active a#tab-account svg *{ stroke:var(--bg)         !important }

:root{ --met-icon-color: var(--iconStrong); }
body[data-theme="dark"]{ --met-icon-color: var(--bg); }

/* پلی — فعال: بدنه طبق قاعدهٔ کلی؛ آبجکت مرکزِ مخالف + حاشیه هم‌رنگ بدنه */
body[data-theme="light"] nav.navigation li.active a#tab-poly .body-poly   *{
  fill:var(--iconStrong) !important; stroke:var(--iconStrong) !important;
}
body[data-theme="light"] nav.navigation li.active a#tab-poly .objects-poly *{
  fill:var(--bg) !important;             /* مرکز مخالف بدنه */
  stroke:var(--iconStrong) !important;   /* حاشیه مطابق بدنه */
  stroke-width:6 !important;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
}
body[data-theme="dark"]  nav.navigation li.active a#tab-poly .body-poly   *{
  fill:var(--bg) !important; stroke:var(--bg) !important;
}
body[data-theme="dark"]  nav.navigation li.active a#tab-poly .objects-poly *{
  fill:var(--iconStrong) !important;     /* مرکز مخالف بدنه */
  stroke:var(--bg) !important;           /* حاشیه مطابق بدنه */
  stroke-width:6 !important;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
}
/* کنترل اجباری ضخامت حاشیهٔ آبجکت پلی (این بلوک را انتهای style.css بگذار و مقادیر را تنظیم کن) */
:root{
  --poly-stroke: 1px;          /* ضخامت در حالت غیرفعال */
  --poly-stroke-active: 1px;   /* ضخامت در حالت فعال */
}

body[data-theme="light"] nav.navigation li:not(.active) a#tab-poly .objects-poly *,
body[data-theme="dark"]  nav.navigation li:not(.active) a#tab-poly .objects-poly *{
  stroke-width: var(--poly-stroke) !important;
  vector-effect: non-scaling-stroke !important;
  paint-order: stroke fill !important;
}

body[data-theme="light"] nav.navigation li.active a#tab-poly .objects-poly *,
body[data-theme="dark"]  nav.navigation li.active a#tab-poly .objects-poly *{
  stroke-width: var(--poly-stroke-active) !important;
  vector-effect: non-scaling-stroke !important;
  paint-order: stroke fill !important;
}

/* ماشین‌حساب — فعال: بدنه طبق قاعده؛ آبجکت برعکس بدنه */
body[data-theme="light"] nav.navigation li.active a#tab-calc .main-body-calc   *{ fill:var(--iconStrong) !important; stroke:var(--iconStrong) !important }
body[data-theme="light"] nav.navigation li.active a#tab-calc .accent-color-calc *{ fill:var(--bg)         !important; stroke:var(--bg)         !important }
body[data-theme="dark"]  nav.navigation li.active a#tab-calc .main-body-calc   *{ fill:var(--bg)         !important; stroke:var(--bg)         !important }
body[data-theme="dark"]  nav.navigation li.active a#tab-calc .accent-color-calc *{ fill:var(--iconStrong) !important; stroke:var(--iconStrong) !important }



/* فاصله از تب‌بار پایین */
:root{ --bottom-bar-h: 40px; } /* ارتفاع تب‌بار */

body{
  padding-bottom: max(var(--bottom-bar-h), env(safe-area-inset-bottom));
}

/* برای کانتینرهای اسکرولی داخلی */
:where(main,.content,.tab-content,.page,.panel,.pane,.scroll,#panel-tuner){
  padding-bottom: max(var(--bottom-bar-h), env(safe-area-inset-bottom));
}

/* اطمینان از روی‌هم‌نیفتادن */
.bottom-tabbar{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999; /* جلوتر از محتوا */
}



/* ========== DESKTOP: فقط پنل‌ها اسکرول عمودی داشته باشن ==========
   اسکرول‌بار هم مخفی بمونه
*/
@media (min-width: 769px){
  /* خود صفحه تکون نخوره */
  html, body{
    overflow: hidden; /* قفل صفحه اصلی */
    height: 100%;
  }

  /* فقط پنل‌ها اسکرول عمودی بگیرن؛ افقی قفل */
  #tabPanels, .panel, .page, .scroll{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100dvh - var(--topbar-h) - var(--nav-h));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* مخفی‌کردن ظاهری اسکرول‌بار در دسکتاپ */
  #tabPanels, .panel, .page, .scroll{ scrollbar-width: none; }            /* Firefox */
  #tabPanels::-webkit-scrollbar,
  .panel::-webkit-scrollbar,
  .page::-webkit-scrollbar,
  .scroll::-webkit-scrollbar{ width:0; height:0 }                          /* WebKit */
}


body.account-locked {
  overflow: hidden;
}

body.account-locked main,
body.account-locked header,
body.account-locked .navigation,
body.account-locked .menu-pop,
body.account-locked .install-banner {
  pointer-events: none;
  user-select: none;
}

body.account-locked main,
body.account-locked header,
body.account-locked .navigation {
  filter: blur(1.5px) saturate(0.6);
}

body.account-locked [data-account-lock] {
  pointer-events: auto;
}

.referral-lock-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 3000000;
}

.referral-lock-modal[hidden] {
  display: none;
}

.referral-lock-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.referral-lock {
  position: relative;
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface-strong, #f6f6f6);
  border: 1px dashed var(--accent, #7c4dff);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  max-width: 520px;
  width: min(520px, 90vw);
  z-index: 1;
}

.referral-lock__text {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-strong, #111);
  flex: 1 1 260px;
}

.referral-lock__cta {
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: var(--accent, #7c4dff);
  color: #fff;
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease;
  min-width: 160px;
}

.referral-lock__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.referral-lock__cta:active {
  transform: translateY(0);
  box-shadow: none;
}