/* ===== styles/player.css ===== */
:root{
  --ui-bg: var(--panel-m);
  --field-bg: var(--box-m);
  --ui-border: var(--border);
  --ui-ink: var(--text);
  --switch-on: var(--sw-on);
  --switch-off: var(--sw-off);
}

/* ===== ریشه باکس ===== */
.scorebox {
  --sb-border: var(--sb-border, 3px);
  --sb-mobile-h: var(--sb-mobile-h, 30vh);
  --gap: 0.75rem; --radius: 10px;
  position: relative; display: flex; flex-direction: column; gap: var(--gap);
  padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel-m); color: var(--text); min-height: 40vh;
}

@media (max-width:600px){
  .scorebox{
    min-height:30svh !important;
    padding-bottom:30px;
  }
}
/* ===== ردیف‌ها ===== */
.scorebox__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gap); }

/* ===== شو‌باکس ===== */
.showbox {
  grid-column: 1 / -1; height: 30%; min-height: clamp(120px, 30%, var(--sb-mobile-h));
  border: var(--sb-border) solid transparent; border-radius: calc(var(--radius) - 2px);
  background: var(--panel-m); position: relative; overflow: hidden;
}

.showbox{overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;gap:12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.showbox__track{pointer-events:none;z-index:0}
.showbox>*:not(.showbox__track):not(.showbox__ties){position:relative;z-index:1}

.showbox__ties{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  color:var(--note);
}

.showbox__ties .nb-tie{ overflow:visible; }

.showbox__ties .nb-tie path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6px;
  stroke-linecap:round;
    stroke-linejoin:round;
  shape-rendering:geometricPrecision;
}

@media (max-width:600px){
  .scorebox{ --sb-mobile-h:20svh !important; }
  .showbox{ height:auto !important; min-height:var(--sb-mobile-h) !important; }
}

/* ===== نت باکس ===== */
/* نت باکس: کاملاً شفاف؛ هیچ بلوری روی پس‌زمینه */
.notebox{
  flex:0 0 auto; inline-size:160px; block-size:96px; scroll-snap-align:start;
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:3px solid transparent; border-radius:14px;
  box-shadow:none; transition:border-color .15s ease;
}

/* حالت انتخاب‌شده: فقط بوردر 3px مشکی؛ پس‌زمینه همچنان شفاف */
.notebox.is-selected,
.notebox[aria-selected="true"],
.notebox:focus-visible{
  border-color:var(--note); background:transparent;
}

/* ===== خط شو باکس ===== */
.showbox{
  /* اگر قبلاً تعریف شده بود، این‌ها با !important جایگزین می‌شوند */
  background-image: linear-gradient(var(--note),var(--note)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 2px !important;

  /* مقدار پایه: وسط دقیق */
  background-position: left calc(61%) !important;
}

/* موبایل: چند پیکسل بالاتر (اینجا مقدار را دستی تنظیم کن) */
@media (max-width:600px){
  .showbox{
    /* ← اگر فاصله‌ات 3–4pxه، یکی از این‌ها رو تست کن */
    background-position: left calc(57.8%) !important;
  }
}

/* دسکتاپ: به‌صورت پیش‌فرض مرکز؛ وقتی اسکرول افقی وجود دارد، کمی بالاتر برو */
@media (min-width:601px){
  .showbox.scrollbar-on{
    background-position: left calc(30%) !important;
  }
}

/* ===== دکمه‌های مدیریت نوت‌باکس =====*/
.notebox-add,.notebox-remove,.notebox-clone,.notebox-prune{
  display:none;position:absolute;bottom:10px;z-index:4;pointer-events:auto;
  inline-size:38px;block-size:38px;border-radius:999px;border:0;
  background:var(--btn-m);
  color:var(--text);font:600 20px/1 system-ui,Segoe UI,Roboto;align-items:center;justify-content:center;
}

.notebox-add{right:10px;background:#16a34a;color:#fff;}
.notebox-remove{left:10px;background:#8b0c0c;color:#fff;}
.notebox-clone{right:54px;background:#0ea5e9;color:#fff;}
.notebox-prune{left:54px;background:#f97316;color:#fff;}
.notebox-add,.notebox-remove,.notebox-clone,.notebox-prune{display:inline-flex}
.notebox-add:hover,.notebox-remove:hover,.notebox-clone:hover,.notebox-prune:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.notebox-add:active,.notebox-remove:active,.notebox-clone:active,.notebox-prune:active{transform:translateY(0);box-shadow:var(--shadow)}
.notebox-add:focus-visible,.notebox-remove:focus-visible,.notebox-clone:focus-visible,.notebox-prune:focus-visible{outline:2px solid var(--sw);outline-offset:2px}

.notebox-add { display: none; }
.notebox-remove { display: none; }
.notebox-clone { display: none; }
.notebox-prune { display: none; }

/* ===== گروه کنترل‌ها ===== */
.controls { display: none; }

/* ===== دکمه گسترش/جمع‌وجور ===== */
.scorebox{position:relative}
.scorebox__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;margin:0;box-shadow:none;outline:0;cursor:pointer;
  padding:4px;
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  /* جلوگیری از پوشش پلی/پاز روی دکمه گسترش باکس */
  z-index:2147482000;
  pointer-events:auto; color:var(--text);
}
.scorebox__toggle .toggle-icon{display:block;width:24px;height:24px}
.scorebox__toggle:hover,
.scorebox__toggle:active{background:transparent;box-shadow:none}
.scorebox__toggle:focus{outline:0}

.scorebox.is-expanded .controls,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .controls{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap);align-items:start;
}

/* انیمیشن چرخش برای دکمه‌ی گسترش باکس اصلی */
.scorebox__toggle .toggle-icon{
  width:24px; height:24px;
  transition: transform .18s ease;
}
.scorebox__toggle[aria-expanded="true"] .toggle-icon{
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce){
  .scorebox__toggle .toggle-icon{ transition: none; }
}

/* دسکتاپ: فقط هنگام باز بودن فیگور، ارتفاع اضافه می‌گیرد تا نت‌باکس دیده بماند */
@media (min-width: 750px){
  /* حالت عادی بدون تغییر می‌ماند (ارتفاع پایهٔ scorebox = 40vh) */
  .scorebox.raise-top:has(.figure-btn[aria-expanded="true"]){ min-height: calc(40vh + 120px); }
  /* دکمه و پنل فیگور را پایین‌تر می‌آورد تا روی نت‌باکس نیفتند */
  .scorebox.raise-top:has(.figure-btn[aria-expanded="true"]) .figure-wrap{ margin-top: 56px; }
}

/* ===== حالت گسترش: نمایش دکمه‌های + و - ===== */
.scorebox.is-expanded .notebox-add,
.scorebox.is-expanded .notebox-remove,
.scorebox.is-expanded .notebox-clone,
.scorebox.is-expanded .notebox-prune,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .notebox-add,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .notebox-remove,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .notebox-clone,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .notebox-prune {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--border);
  /* سبز/قرمز ثابت با فونت سفید */
  color:var(--text);
}

/* ===== گروه‌بندی کنترل‌ها ===== */
.ctrl-group { display: contents; }

/* ===== خانه کنترل (لیبل‌ها) ===== */
.ctrl {
  display: grid;
  gap: .35rem;
  min-width: 0;
}
.ctrl .lbl { font-size: .85rem; color: var(--text); }
/* همه لیبل‌ها پررنگ */
.ctrl .lbl,
.switch span{font-weight:600}

/* ===== سلکت و ورودی ===== */
.ctrl__select, .ctrl__input {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--box-m); color: var(--text);
}

/* ===== نوشته کمرنگ باکس ورودی ===== */
.ctrl__input::placeholder{color: var(--text); opacity:.6}

/* ===== پشته سرعت با واحد ===== */
.ctrl__stack { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem; }
.ctrl .unit { padding-inline: .5rem; font-size: .85rem; color: var(--text); }

/* ===== سوییچ ضرب اول ===== */
.controls .switch{justify-self:start !important;align-self:start}
/* سوییچ: استایل پایه */
.switch{color:var(--text)}
.switch span{text-align:start}

/* چیدمان عمودی فقط برای سوییچ‌های معمولی */
.switch:not(.figure__tuplet){display:grid;justify-items:start;row-gap:.35rem}
.switch:not(.figure__tuplet) span{order:1}
.switch:not(.figure__tuplet) input[type="checkbox"]{order:2}

.switch input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;cursor:pointer;position:relative;
  inline-size:44px;block-size:26px;box-sizing:border-box;border:1px solid var(--border);border-radius:999px;
  background: var(--switch-off);vertical-align:middle;display:inline-block;outline:0;transition:background .2s,border-color .2s,box-shadow .2s
}
.switch input[type="checkbox"]::after{
  content:"";position:absolute;top:50%;left:3px;inline-size:20px;block-size:20px;border-radius:50%;
  background: var(--box-m);box-shadow:var(--shadow);transform:translateY(-50%);transition:left .2s
}
.switch input[type="checkbox"]:checked{background:var(--switch-on)}
.switch input[type="checkbox"]:checked::after{left:calc(100% - 3px - 20px)}
.switch input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--switch-on) 35%, transparent)}
.switch input[type="checkbox"]:disabled{opacity:.6;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  .switch input[type="checkbox"],.switch input[type="checkbox"]::after{transition:none}
}


/* سوییچ توپله: لیبل بالا، خود سوییچ زیر */
label.figure__tuplet.switch{
  display:grid;
  justify-items:start;
  align-items:start;
  row-gap:.35rem;
  gap:.35rem;
  margin-block-start:0;
}
label.figure__tuplet.switch .lbl{
  order:1;
  margin:0;
  font-weight:600;
  color:var(--text);
  text-align:start;
}
label.figure__tuplet.switch input[type="checkbox"]{
  order:2;
}

/* ===== چینش کسر و مخرج زیر هم ===== */
.scorebox.is-expanded .controls,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .controls{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap);align-items:start;
}
.controls > * { order: 10; }

/* ===== ریسپانسیو ===== */
@media (max-width: 600px) { .showbox { min-height: var(--sb-mobile-h); } }


/* ===== شبکه کنترل‌ها: سه ستون فشرده و هم‌ردیف ===== */
.scorebox.is-expanded .controls,
.scorebox:has(.scorebox__toggle[aria-expanded="true"]) .controls{
  display:grid;grid-template-columns:repeat(3,minmax(8ch,1fr));gap:8px 12px;align-items:start;grid-auto-flow:row dense
}

/* ردیف 1 */
.controls label:has(#timeNum){order:1;grid-column:1}
.controls label:has(#ticktack){order:1;grid-column:2}
.controls label:has(#barCount){order:1;grid-column:3}

/* ردیف 2 */
.controls label:has(#timeDen){order:2;grid-column:1}
.controls label:has(#baseNote){order:2;grid-column:2}
.controls label:has(#speed){order:2;grid-column:3}

/* ردیف 3 */
.controls label:has(#soundType){order:3;grid-column:1}
.controls label.ctrl--loop{order:3;grid-column:2}
.controls .switch{order:3;grid-column:3}

/* ===== پهنای ۴ رقم برای کسر/مخرج ===== */
.controls label:has(#timeNum) .ctrl__input{width:12ch}
.controls label:has(#timeDen) .ctrl__select{width:12ch}
.controls label:has(#timeNum),.controls label:has(#timeDen){justify-self:start}

/* ===== ریزتنظیمات اختیاری ===== */
.controls label:has(#baseNote),.controls label:has(#soundType){min-width: 5ch}
.controls label:has(#speed) .ctrl__input{min-width: 5ch}

/* همهٔ سلکتورها و ورودی‌ها 12ch */
.controls .ctrl__select,
.controls .ctrl__input{width:12ch}

.controls label.ctrl--loop{justify-self:start}
.controls label.ctrl--loop .ctrl__input{
  width:12ch;
  text-align:center;
  font-feature-settings:'tnum' 1;
}

/* سرعت (داخل پشته) نیز 12ch */
.controls label:has(#speed) .ctrl__stack .ctrl__input{width:12ch}

/* نت پایه و نوع صدا 12ch */
.controls label:has(#baseNote) .ctrl__select,
.controls label:has(#soundType) .ctrl__select{width:12ch}


/* تنظیمات باکس اصلی */
/* فضای اضافه فقط وقتی باکس گسترش دارد تا با دکمه‌ها تداخل نشود */
@media (max-width:600px){
  .scorebox.is-expanded,
  .scorebox:has(.scorebox__toggle[aria-expanded="true"]){
    padding-bottom:70px !important; /* ~20px بیشتر از قبل روی موبایل */
  }
}
@media (min-width:601px){
  .scorebox.is-expanded,
  .scorebox:has(.scorebox__toggle[aria-expanded="true"]){
    padding-bottom:60px !important; /* دسکتاپ: 20px فضای اضافه */
  }
}


/* لایهٔ تنظیمات همیشه بالاتر و شناور بماند */
.topbar, .settings-layer{position:relative;z-index:2000000 !important;overflow:visible !important;transform:none !important}
#settingsBtn{position:relative;z-index:2000001 !important}
#settingsMenu{position:fixed;z-index:2000002 !important}

/* اسکورباکس بالا بیاید ولی زیر تنظیمات بماند */
.scorebox.raise-top{position:relative;z-index:1999999 !important}





/* ===== فیگور: دکمه‌ی مینیمال + پنل شناور ===== */

/* والد مشترک برای موقعیت‌دهی پنل نسبت به دکمه */
.figure-wrap{
  position: relative;
}

/* دکمه مینیمال فیگور */
/* دکمه مینیمال فیگور: از Grid استفاده کن */
.figure-btn{
  display: grid;
  grid-template-columns: auto 1fr auto; /* آیکن چپ | عنوان | آیکن راست */
  align-items: center;
  gap: .5rem;

  /* اندازه و جایگیری دکمه */
  width: var(--figure-btn-width, 92%);   /* ← اگر خواستی دستی کمترش کن */
  margin-inline: auto;
  padding: .5rem .6rem;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--box-f);
  color: var(--text);
  cursor: pointer;
  text-align: inherit;
}

/* عنوان دقیقاً وسط ستون می‌ایستد */
.figure__title{
  font-weight: 600;
  justify-self: center;
  text-align: center;
}

/* آیکن‌ها طرفین دکمه قرار بگیرند */
.figure-btn .toggle-icon{
  width: 20px; height: 20px;
  transition: transform .18s ease;
}

.figure-btn .toggle-icon:first-child{ justify-self: start; }
.figure-btn .toggle-icon:last-child { justify-self: end;   }

/* انیمیشن چرخش هنگام گسترش */
.figure-btn[aria-expanded="true"] .toggle-icon{ transform: rotate(180deg); }

/* احترام به کاهش حرکت */
@media (prefers-reduced-motion:reduce){
  .toggle-icon{ transition:none; }
}

/* پیش‌فرض: پنهان وقتی scorebox باز نشده */
.scorebox:not(.scorebox--expanded) .figure-btn,
.scorebox:not(.scorebox--expanded) .figure__panel{
  display: none !important;
}

/* وقتی scorebox باز شد، دکمه فیگور دیده شود */
.scorebox.scorebox--expanded .figure-btn{
  display: grid;
}

/* پنل: پیش‌فرض مخفی؛ وقتی دکمه باز است، نشان بده */
.figure__panel{
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 8px); /* بالا و چسبیده به دکمه */
  z-index: 10;
  background: var(--panel-f);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: .75rem .7rem;
  box-shadow: var(--shadow);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.8vw, 14px);
  max-height: min(74vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  --figure-col-gap: clamp(8px, 3vw, 14px);
  --figure-row-width: min(100%, 430px);
  --figure-col-template: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
}
.figure-btn[aria-expanded="true"] + .figure__panel{
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* لیبل و سلکت داخل پنل */
.figure__panel .ctrl .lbl{ font-weight: 600; color: var(--text); }
.figure__panel select.ctrl__select{ width: clamp(7ch, 18vw, 10ch); max-width: 100%; background: var(--box-f); color: var(--text); border:1px solid var(--border); }

.figure__chips{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}


.figure__row{
  display: grid;
  grid-template-columns: var(--figure-col-template, minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: var(--figure-col-gap);
  width: var(--figure-row-width);
  margin-inline: auto;
}

.figure__label1,
.figure__label2,
.figure__object1,
.figure__object2{
  display: grid;
  grid-template-columns: var(--figure-col-template, minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: var(--figure-col-gap);
  width: var(--figure-row-width);
  margin-inline: auto;
}

/* کاهش شدید فاصلهٔ لیبل و آبجکت (درخواست کاربر برای یافتن سریع) */
.figure__label1,
.figure__label2{ margin-block-end: -6px; }
.figure__object1,
.figure__object2{ margin-block-start: -6px; }

.figure__label1 > *,
.figure__label2 > *,
.figure__object1 > *,
.figure__object2 > *{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.figure__row--3{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--figure-row-width);
  margin-inline: auto;
  grid-template-columns: none;
  gap: .4rem;
}

.figure__label-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-align: center;
}

.figure__object1 .switch,
.figure__object1 .ctrl,
.figure__object1 .figure__radios,
.figure__object2 .figure__mute,
.figure__object2 .figure__tuplet,
.figure__object2 .figure__pair-box{
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.figure__object1 .ctrl,
.figure__object2 .figure__pair-box{
  gap: .4rem;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
}

.figure__radios{
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 0; padding: 0; margin: 0; color: var(--text);
}
.figure__radios .lbl{ font-weight: 600; margin-inline-end: .5rem; color: var(--text); }
.figure__radios label{ display: inline-flex; align-items: center; gap: .28rem; }

/* سوییچ سکوت (لیبل بالا، خود سوییچ زیرش) */
.figure__mute{
  display: inline-flex; align-items: center; justify-content: center; row-gap: .35rem; color: var(--text);
}
.figure__mute .lbl{ font-weight: 600; color: var(--text); }

/* خود سوییچ سکوت */
.figure__mute input[type="checkbox"]{
  -webkit-appearance: none; appearance: none;
  cursor: pointer; position: relative;
  inline-size: 44px; block-size: 26px; box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 999px; background: var(--switch-off);
  outline: 0; transition: background .2s, border-color .2s, box-shadow .2s;
}
.figure__mute input[type="checkbox"]::after{
  content: "";
  position: absolute; top: 50%; left: 3px;
  inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: var(--box-m); box-shadow:var(--shadow);
  transform: translateY(-50%);
  transition: left .2s;
}
.figure__mute input[type="checkbox"]:checked{
  background: var(--switch-on);
}
.figure__mute input[type="checkbox"]:checked::after{
  left: calc(100% - 3px - 20px);
}
.figure__mute input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-on) 35%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .figure__mute input[type="checkbox"],
  .figure__mute input[type="checkbox"]::after{ transition: none; }
}

/* =========================
   مترو‌نوم: راهنمای مرحله‌ای
   ========================= */
.im-tour{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}
.im-tour__shield{
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 2147483645;
}
.im-tour.is-locked .im-tour__shield{
  pointer-events: none;
}
.im-tour--prompt::before{
  content: "";
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--panel-G) 35%, transparent);
  z-index: 2147483645;
}
.im-tour.is-active{
  display: block;
}
.im-tour__spotlight{
  position: fixed;
  border: 2px solid var(--btn-G);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px color-mix(in oklab, var(--panel-G) 35%, transparent);
  pointer-events: none;
  z-index: 2147483646;
}
.im-tour__tooltip,
.im-tour__prompt{
  position: fixed;
  max-width: min(340px, 92vw);
  background: var(--panel-G);
  color: var(--text);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  z-index: 2147483647;
}
.im-tour__tooltip{
  padding-top: 28px;
}
.im-tour__close{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--box-G);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.im-tour__close:hover{
  background: var(--box-G);
}
.im-tour__close-icon{
  width: 16px;
  height: 16px;
  display: block;
}
.im-tour__prompt{
  inset: 0;
  margin: auto;
  width: min(360px, 92vw);
  height: fit-content;
  text-align: center;
  z-index: 2147483647;
}
.im-tour-target{
  z-index: 2147483646;
  pointer-events: auto;
}
.im-tour__sticker{
  font-size: 28px;
  margin-bottom: 6px;
}
.im-tour__text{
  font-weight: 600;
  line-height: 1.6;
}
.im-tour__hint{
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .7;
  line-height: 1.4;
}
.im-tour__skip-step{
  margin-top: 8px;
  width: 100%;
}
.im-tour__actions{
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 12px;
  flex-wrap: wrap;
}
.im-tour__actions .chip{
  flex: 1;
  min-width: 90px;
}
.im-tour__actions .chip[disabled]{
  opacity: .5;
  pointer-events: none;
}
.im-tour__skip--danger{
  background: var(--btn-G);
  color: var(--text);
  border-color: var(--btn-G);
}
.im-tour__skip--danger:hover{
  background: var(--btn-G);
  border-color: var(--btn-G);
}
.im-tour__prompt-title{
  font-weight: 700;
  margin-bottom: 6px;
}
.im-tour__prompt-text{
  opacity: .8;
  margin-bottom: 8px;
}
.im-tour__options{
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.im-tour__option{
  width: 100%;
}
.im-tour__option--danger{
  background: var(--btn-G);
  color: var(--text);
  border-color: var(--btn-G);
}
.im-tour__option--danger:hover{
  background: var(--btn-G);
  border-color: var(--btn-G);
}
.im-tour__toast{
  position: fixed;
  z-index: 2147483647;
  max-width: min(320px, 92vw);
  background: var(--panel-G);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.im-tour__toast.is-active{
  opacity: 1;
  transform: translateY(0);
}
.im-tour-lock{
  overflow: hidden;
}
.im-tour-lock *{
  pointer-events: none;
}
.im-tour-lock .im-tour,
.im-tour-lock .im-tour *{
  pointer-events: auto;
}
.im-tour-lock .im-tour-target,
.im-tour-lock .im-tour-target *{
  pointer-events: auto;
}

/* توپله a : b */
.figure__pair{
  display: grid;
  grid-template-columns: 6ch auto 6ch;
  align-items: center; gap: .35rem;
}
.figure__pair-box{
  width: auto;
}
.figure__pair-box .figure__pair{
  white-space: nowrap;
  flex-shrink: 0;
}
.figure__pair .ctrl__input{ width: 6ch; text-align: center; background: var(--box-f); color: var(--text); border:1px solid var(--border); }
.figure__pair .sep{ opacity: .7; color: var(--text); }

.figure__actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}

/* دکمه‌های اکشن: رنگ ثابت (غیرتمی) */
.figure-btn--apply,
.figure-btn--remove{
  flex: 0 0 auto;
  padding: .55rem 1.05rem;
  font-size: 0.98rem;
  line-height: 1.1;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  margin-block: 3px;
  color:var(--text);
}

.figure-btn--apply{ background:var(--btn-f); border-color:var(--btn-f); }
.figure-btn--apply:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.figure-btn--remove{ background:var(--btn-f); border-color:var(--btn-f); }
.figure-btn--remove:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }

/* ===== تایمر تمرین (دراپ‌آپ) ===== */
.timer-shell{
  --timer-btn-size:48px;
  position:absolute;
  right:clamp(12px, 2vw, 18px);
  bottom:clamp(20px, 5vw, 44px);
  z-index:2000001;
  display:flex;
  align-items:flex-end;
}

.timer-toggle{
  width:var(--timer-btn-size);
  height:var(--timer-btn-size);
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panelBG);
  color:var(--text);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.timer-toggle:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.timer-toggle:active{ transform:translateY(0); box-shadow:var(--shadow); }

.timer-toggle__icon{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.timer-toggle__icon svg{ width:70%; height:70%; display:block; color:currentColor; fill:currentColor; }

.timer-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  width:min(320px, calc(100vw - 16px));
  background:var(--panel-Time);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  transform-origin: bottom right;
  transform:translateY(8px) scale(.985);
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .2s ease, transform .2s ease;
}

.timer-panel.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.timer-panel__inner{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:10px; }
.timer-panel__header{ display:flex; flex-direction:row; gap:6px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.timer-panel__title{ font-size:.92rem; margin:0; }
.timer-panel__hint{ margin:0; font-size:.8rem; color:var(--text); opacity:.7; }
.timer-panel__hint--sub{ margin-top:2px; font-size:.78rem; }
.timer-panel__display{ font-variant-numeric:tabular-nums; font-size:1.35rem; font-weight:800; text-align:center; padding:10px 10px 12px; background:var(--box-Time); border-radius:10px; letter-spacing:.5px; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; }
.timer-panel__readout{ width:100%; text-align:center; font-size:1.55rem; }
.timer-panel__unit-row{ width:100%; display:flex; align-items:center; justify-content:center; gap:12px; font-size:.75rem; font-weight:700; letter-spacing:.35px; color:var(--text); opacity:.7; }
.timer-panel__unit-row span{ min-width:60px; text-align:center; }
.timer-panel__clockset{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; width:100%; }
.timer-panel__field{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.timer-panel__clockset input{ border-radius:8px; border:1px solid var(--border); padding:6px 8px; font-size:1rem; background:var(--box-Time); color:var(--text); width:clamp(58px, 14vw, 80px); text-align:center; }
.timer-panel__clockset input:disabled{ opacity:.65; cursor:not-allowed; background:var(--box-Time); }
.timer-panel__clockset input:focus{ outline:2px solid var(--sw); outline-offset:1px; }
.timer-panel__unit-label{ font-size:.7rem; color:var(--text); opacity:.7; line-height:1; letter-spacing:.25px; }
.timer-panel__clocksep{ font-weight:800; font-size:1.15rem; color:var(--text); opacity:.7; line-height:1; }
.timer-panel__tabs{ display:flex; gap:6px; width:100%; }
.timer-tab{ padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--box-Time); font-weight:800; font-size:.92rem; cursor:pointer; transition:all .16s ease; flex:1 1 0; text-align:center; color:var(--text); }
.timer-tab.is-active{ border-color:var(--btn-Time); color:var(--text); box-shadow:var(--shadow); background:var(--btn-Time); }
.timer-panel__meta{ display:flex; flex-direction:column; gap:8px; }
.timer-panel__display-row{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.timer-panel__select{ display:flex; flex-direction:column; gap:3px; font-weight:600; align-items:flex-start; }
.timer-panel__select select{ border-radius:8px; border:1px solid var(--border); padding:6px 8px; font-size:.9rem; background:var(--box-Time); color:var(--text); width:100%; max-width:220px; min-width:0; }
.timer-panel__options{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; justify-content:flex-start; }
.timer-panel__option{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; border:1px solid var(--border); padding:5px 7px; border-radius:8px; background:var(--box-Time); color:var(--text); }
.timer-panel__option--inline{ align-self:flex-start; white-space:nowrap; }
.timer-panel__option input{ width:16px; height:16px; margin:0; accent-color:var(--sw); }
.timer-panel__content{ display:none; }
.timer-panel__content.is-active{ display:block; }
.timer-panel__actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; align-items:stretch; position:relative; }
.timer-action{ flex:1 1 0; text-align:center; font-weight:800; letter-spacing:.2px; min-width:120px; }
.timer-action--positive{ background:var(--btn-Time); border-color:var(--btn-Time); color:var(--text); }
.timer-action--positive:hover{ box-shadow:var(--shadow); }
.timer-action--warning{ background:var(--btn-Time); border-color:var(--btn-Time); color:var(--text); }
.timer-action--warning:hover{ box-shadow:var(--shadow); }
.timer-action--danger{ background:var(--btn-Time); border-color:var(--btn-Time); color:var(--text); }
.timer-action--danger:hover{ box-shadow:var(--shadow); }
.timer-toast{
  position:absolute;
  inset-inline-start:0;
  bottom:calc(100% + 10px);
  max-width:min(360px, 90vw);
  padding:10px 12px;
  border-radius:10px;
  background:var(--panel-R);
  color:var(--text2);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  font-weight:700;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.timer-toast.is-visible{ opacity:1; transform:translateY(0); }

.timer-alert{ position:absolute; inset-inline-end:0; bottom:calc(100% + 12px); background:var(--panel-R); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:12px; padding:10px 12px; width:min(320px, 90vw); color:var(--text2); display:flex; align-items:stretch; gap:10px; opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.timer-alert__body{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%; }
.timer-alert__icon{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--icon2); }
.timer-alert__icon svg{ width:100%; height:100%; display:block; color:inherit; fill:currentColor; }
.timer-alert__text{ font-weight:800; line-height:1.3; }
.timer-alert__close{ border:none; background:var(--box-R); color:inherit; width:28px; height:28px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:800; transition:background .16s ease, transform .16s ease; }
.timer-alert__close:hover{ background:var(--box-R); transform:scale(1.04); }
.timer-alert__close:active{ transform:scale(.96); }
.timer-alert.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

@keyframes timer-alert-wiggle{
  0%{ transform:rotate(45deg); }
  16%{ transform:rotate(0deg); }
  33%{ transform:rotate(-45deg); }
  50%{ transform:rotate(0deg); }
  66%{ transform:rotate(45deg); }
  83%{ transform:rotate(0deg); }
  100%{ transform:rotate(45deg); }
}

.timer-alert.is-visible .timer-alert__icon svg{ animation:timer-alert-wiggle 1s linear infinite; transform-origin:center; }

@media (max-width: 520px){
  .timer-shell{ right:clamp(8px, 3vw, 14px); left:unset; }
  .timer-shell{ --timer-btn-size:46px; }
  .timer-panel{ width:min(300px, calc(100vw - 10px)); bottom:calc(100% + 10px); }
}

@media (min-width: 1024px){
  .timer-shell{ --timer-btn-size:58px; }
}

/* موبایل: همچنان همان ردیف؛ کمی فشرده‌تر */
@media (max-width: 600px){
  .figure-btn--apply,
  .figure-btn--remove{
    padding: .5rem .95rem;
    font-size: 1rem;
    border-radius: 10px;
  }
}

/* خیلی تنگ: یک ذره فشرده می‌کنیم ولی همان ردیف می‌ماند */
@media (max-width: 380px){
  .figure-btn--apply,
  .figure-btn--remove{
    padding: .46rem .88rem;
    font-size: .96rem;
  }
}

@media (max-width: 500px){
  .figure__panel{
    padding: .65rem .6rem;
    --figure-col-gap: clamp(6px, 3vw, 12px);
    --figure-row-width: min(100%, 380px);
  }
  .figure__panel select.ctrl__select{ width: clamp(5.4ch, 24vw, 7ch); }
  .figure__radios{ gap: 8px; }
  .figure__radios label{ gap: .25rem; }
}

/* دسکتاپ: دکمه‌های فیگور بزرگ‌تر */
@media (min-width: 1024px){
  .figure-btn--apply,
  .figure-btn--remove{
    padding: .6rem 1.15rem;
    font-size: 1.02rem;
    border-radius: 11px;
  }
}

.figure__radios{ position: relative; top: 0; }
.figure__mute{ position: relative; top: 0; }



/* دکمه پلی/پاز: Overlay نامرئی که روی .indicator می‌افتد */
.met-toggle{
  position: fixed;
  left: -9999px; top: -9999px;     /* خارج از صفحه تا وقتی جابه‌جا نشده */
  width: 0; height: 0;
  opacity: 0;                       /* کاملاً نامرئی */
  background: transparent;
  border: 0; padding: 0;
  z-index: 2000003;                 /* بالاتر از .dial-area و تب‌بار */
  pointer-events: none;             /* تا زمان فعال‌شدن کلیک نگیرد */
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.met-toggle.is-loading{
  opacity: 1;
}
.met-toggle.is-overlay{
  pointer-events: auto;             /* کلیک/تاچ فعال */
}
/* داخلی‌های دکمه رو بی‌اثر کن که حتماً کلیک به خود دکمه برسد */
.met-toggle *{ pointer-events: none; }

.met-toggle__text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
}

.met-toggle__loader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  color: var(--met-loader-color, currentColor);
}

.met-toggle__loader .app-loader-svg{
  width: 72px;
  height: 36px;
}

.met-toggle{
  color: var(--met-icon-color, var(--text));
  --met-loader-color: var(--met-icon-color, var(--text));
}

.met-toggle__loader .svg_strokeWidth{
  stroke-width: 14;
}

.met-toggle__loader .svg__stroke{
  stroke: var(--met-loader-color, currentColor);
}

.met-toggle__countdown{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--met-loader-color, currentColor);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.met-toggle__countdown.is-active{
  opacity: 1;
}

.met-toggle.is-loading .met-toggle__loader{
  opacity: 1;
}

.met-loading #tab-player .navicon{
  opacity: 0;
}


/* برای دکمه پاز و پلی */
#tab-player .icon .navicon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
#tab-player .icon .navicon--pause { display: none; }         /* پیش‌فرض: پاز مخفی */
.met-playing #tab-player .icon .navicon--play { display: none; }
.met-playing #tab-player .icon .navicon--pause { display: inline-block; }






/* ===== نت‌باکس‌ها و شو‌باکس (یکپارچه‌ی مینیمال) ===== */

/* ظرف نت‌ها داخل نت‌باکس */
.notebox .nb-staff{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:"Noto Music","Noto Sans Symbols 2",system-ui,sans-serif;
  font-size:28px;
  line-height:1;
    position:relative; /* این خط باعث می‌شود لایهٔ بیم بتواند به صورت مطلق داخل استاف قرار گیرد. */
  overflow:visible;  /* اجازه می‌دهد خطوط بیم در صورت نیاز کمی از محدودهٔ نت بیرون بزنند. */
}
.notebox .nb-staff .note{ display:inline-block; }
.notebox .nb-staff .note--beamed{ display:inline-flex; align-items:flex-end; gap:2px; }
.notebox .nb-staff .note--beamed .nb-beam-glyph{
  display:block;
  width:11px;
  height:28px;
  color: var(--note); /*رنگ نت های بیم*/
}
.notebox .nb-staff .note.is-target-note{
  color: var(--select-color);
}
.notebox .nb-staff .note--beamed.is-target-note .nb-beam-glyph{
  color: var(--select-color);
}
.notebox .nb-staff .note.is-playing-note{
  color: var(--play-metronome);
}
.notebox .nb-staff .note--beamed.is-playing-note .nb-beam-glyph{
  color: var(--play-metronome);
}
.notebox .nb-staff .nb-beam-line.is-playing-stub{
  background-color: var(--play-metronome);
}
.notebox .nb-staff .note--beamed .nb-beam-dot{
  font-size:28px;
  line-height:1;
  display:block;
  transform: translateY(6px);
}
.notebox .nb-staff .note .note-dot{
  font-size:28px;
  line-height:1;
  display:inline-block;
  transform: translateY(6px);
}
/* لایهٔ اختصاصی رسم بیم‌ها که روی نت‌ها قرار می‌گیرد. */
.nb-beam-layer{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  pointer-events:none;
  overflow:visible;
    --nb-beam-thickness: 2.6px; /* ضخامت خطوط بیم باید با مقدار جاوااسکریپت هماهنگ باشد. */
  color: var(--note);

}

/* هر خط بیم یک عنصر مستقل است تا بتوانیم طول کامل و نصفه را جداگانه رسم کنیم. */
.nb-beam-line{
  position:absolute;
  height:var(--nb-beam-thickness, 2.8px);
  background-color: currentColor; /* رنگ خطوط بیم با متغیر ink هماهنگ می‌شود. */
  border-radius: 0px;  /*گوشه ها*/
}
.nb-beam-line.is-target-beam{
  background-color: var(--note);
}

/* خط حامل/نمایش نت‌ها (پایه) */
.nb-staff{
  font-family:"Noto Music",system-ui,sans-serif;
  font-size:28px;
  line-height:1;
  display:flex;
  gap:6px;
}

/* کانتینر ردیف نت‌باکس‌ها (شو‌باکس) */
#showbox{
  overflow-x:auto;          /* فقط این اسکرول افقی داشته باشد */
  overflow-y:hidden;        /* عمودی بسته بماند */
  white-space:nowrap;       /* نت‌باکس‌ها کنار هم بمانند */
  padding-bottom:.25rem;    /* جا برای اسکرول‌بار */
  scrollbar-gutter:stable both-edges; /* جلوگیری از پرش عمودی هنگام ظاهر شدن اسکرول */
}

/* فallback بی‌دردسر برای موتورهایی که scrollbar-gutter ندارند */
@supports not (scrollbar-gutter: stable both-edges){
  #showbox{ overflow-x: overlay; }
}

/* نت‌باکس (یک تعریف واحد) */
.notebox{
  /* باکس و ظاهر */
  display:inline-flex;         /* کنار هم + ترازبندی عمودی داخل */
  vertical-align:top;
  align-items:center;
  gap:6px;
  cursor:pointer;

  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;

  /* محتوا از باکس بیرون نزند و باکس به اندازه محتوا کش بیاید */
  width:max-content;
  min-width:120px;
  max-width:none;
  overflow-x:clip;
  overflow-y:hidden;
  /* حاشیه داخلی کمی برای فاصله نت تا مرز */
  padding:.25rem .5rem;        /* (ترجیح داده از پدینگ بالا یکبار استفاده شود) */

  /* اسنپ روی شروع هنگام اسکرول افقی */
  scroll-snap-align:start;

  /* وقتی اسکرول‌بار ظاهر می‌شود، مستقل از تغییر مرکز والد در وسط محور عمودی بماند */
  align-self:center;

  /* حالت انتخاب */
}
.notebox.is-selected{ border:2px solid var(--select-color); }
.notebox.is-playing{ border:2px solid var(--play-metronome); }
.notebox.is-playing.is-selected{ border-color:var(--play-metronome); }
.notebox.nb--tuplet-scroll{
  align-items:stretch;
  overflow-y:auto;
  scrollbar-gutter:stable both-edges;
  overscroll-behavior:contain;
}

.notebox.nb--tuplet-scroll .nb-staff{
  align-items:flex-start;
  justify-content:center;
}

/* === موبایل: حذف کادر آبیِ فوکوس از نت‌باکس‌ها و سوییچ‌ها === */
@media (hover: none) and (pointer: coarse){
  /* خاموش‌کردن هایلایت تاچ در WebKit */
  .notebox,
  .switch input[type="checkbox"],
  .figure__mute input[type="checkbox"]{
    -webkit-tap-highlight-color: transparent;
  }

  /* خود عناصر: هیچ outline/shadow نداشته باشند */
  .notebox:focus,
  .notebox:focus-visible,
  .switch input[type="checkbox"]:focus,
  .switch input[type="checkbox"]:focus-visible,
  .figure__mute input[type="checkbox"]:focus,
  .figure__mute input[type="checkbox"]:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  /* اگر فوکوس روی label والد می‌افتد (به‌خاطر input داخلش) */
  .controls label:focus-within,
  .figure__panel label:focus-within{
    outline: none !important;
    box-shadow: none !important;
  }
}


#gear { will-change: transform; }

/* Figure chips row hardening */
#se-children {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: .4rem;
  white-space: nowrap;
}
#se-children .chip {
  flex: 0 0 auto !important;
  white-space: nowrap;
}






/* ===== دستگیره تغییر ارتفاع نت‌باکس ===== */
.scorebox__resize{
  /* جایگاه */
  position: relative;          /* داخل scorebox */
  width: 100%;
  height: 16px;                /* نوار باریک با منطقه‌ی قابل کلیک بزرگ */
  margin-top: .25rem;

  /* ظاهر */
  --grip-color: var(--border);
  --grip-color-hover: var(--border);
  --grip-color-active: var(--border);

  cursor: ns-resize;
  user-select: none;
  touch-action: none;          /* برای درگ عمودی بدون اسکرول */
  display: grid;
  place-items: center;
  z-index: 3;                  /* روی محتوای داخل نت‌باکس دیده شود */
}

/* خودِ دستگیره (خط‌های موازی) */
.scorebox__resize::before{
  content: "";
  display: block;
  width: min(180px, 60%);
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(currentColor, currentColor) left 0 top 0/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 center/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 bottom/100% 2px no-repeat;
  color: var(--grip-color);
  opacity: .85;
  transition: color .15s ease, opacity .15s ease, transform .06s ease;
}

/* هاور و فوکوس دیداری */
.scorebox__resize:hover::before{
  color: var(--grip-color-hover);
  opacity: 1;
}
.scorebox__resize:active::before{
  color: var(--grip-c






             /* این قوانین مشترک، چیدمان عمودی و استایل را برای هر دو سوییچ (سکوت و توپله) یکپارچه می‌کند */
.figure__mute{
  display: grid; justify-items: start; row-gap: .35rem; align-self: start; color: var(--text);
}
.figure__mute .lbl{ font-weight: 600; color: var(--text); }

/* اختصاص ستون هر سوییچ روی شبکه: سکوت در ستون سوم، توپله در ستون چهارم */
.figure__mute{ grid-column: 3; grid-row: 1; }

/* خود سوییچ‌های سکوت و توپله */
.figure__mute input[type="checkbox"]{
  -webkit-appearance: none; appearance: none;
  cursor: pointer; position: relative;
  inline-size: 44px; block-size: 26px; box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 999px; background: var(--switch-off);
  outline: 0; transition: background .2s, border-color .2s, box-shadow .2s;
}
.figure__mute input[type="checkbox"]::after{
  content: "";
  position: absolute; top: 50%; left: 3px;
  inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: var(--box-m); box-shadow:var(--shadow);
  transform: translateY(-50%);
  transition: left .2s;
}
.figure__mute input[type="checkbox"]:checked{
  background: var(--switch-on);
}
.figure__mute input[type="checkbox"]:checked::after{
  left: calc(100% - 3px - 20px);
}
.figure__mute input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-on) 35%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .figure__mute input[type="checkbox"],
  .figure__mute input[type="checkbox"]::after,
  .figure__tuplet input[type="checkbox"],
  .figure__tuplet input[type="checkbox"]::after{ transition: none; }
}



/* =========================
   MUTE (سوییچ سکوت) — عمودی، لیبل بالا
   ========================= */
.figure__mute{
  display: grid;
  justify-items: start;
  row-gap: .35rem;
  align-self: start;
  color: var(--text);
}

.figure__mute .lbl{
  font-weight: 600;
  color: var(--text);
}

/* خود سوییچ سکوت */
.figure__mute input[type="checkbox"]{
  -webkit-appearance: none; appearance: none;
  cursor: pointer; position: relative;
  inline-size: 44px; block-size: 26px; box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 999px; background: var(--switch-off);
  outline: 0; transition: background .2s, border-color .2s, box-shadow .2s;
}
.figure__mute input[type="checkbox"]::after{
  content: "";
  position: absolute; top: 50%; left: 3px;
  inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: var(--box-m); box-shadow:var(--shadow);
  transform: translateY(-50%);
  transition: left .2s;
}
.figure__mute input[type="checkbox"]:checked{
  background: var(--switch-on);
}
.figure__mute input[type="checkbox"]:checked::after{
  left: calc(100% - 3px - 20px);
}
.figure__mute input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-on) 35%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .figure__mute input[type="checkbox"],
  .figure__mute input[type="checkbox"]::after{ transition: none; }
}