/* ===== styles/player.css ===== */
:root{
  --ui-bg: var(--muted);
  --field-bg: var(--paper);
  --ui-border: var(--gold);
  --ui-ink: var(--ink);
  --switch-on: var(--g1);
  --switch-off: var(--brown);
}

/* ===== ریشه باکس ===== */
.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(--ui-border, #ddd); border-radius: var(--radius);
  background: var(--ui-bg, #ffffff); color: var(--ui-ink, #26343B); 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 #0000; border-radius: calc(var(--radius) - 2px);
  background: var(--ui-bg, #ffffff); 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(--nb-tie-color, #000);
}

.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:#000; background:transparent;
}

/* ===== خط شو باکس ===== */
.showbox{
  /* اگر قبلاً تعریف شده بود، این‌ها با !important جایگزین می‌شوند */
  background-image: linear-gradient(#000,#000) !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:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(2px);
  color:#fff;font:600 20px/1 system-ui,Segoe UI,Roboto;align-items:center;justify-content:center;
}

.notebox-add{right:10px;background:#16a34a}   /* + سبز */
.notebox-remove{left:10px;background:#dc2626} /* - قرمز */

.notebox-clone{right:54px;background:#0ea5e9}   /* کپی کنار + */
.notebox-prune{left:54px;background:#f59e0b}    /* پاک‌سازی کنار − */
.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:0 6px 16px rgba(0,0,0,.12)}
.notebox-add:active,.notebox-remove:active,.notebox-clone:active,.notebox-prune:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.notebox-add:focus-visible,.notebox-remove:focus-visible,.notebox-clone:focus-visible,.notebox-prune:focus-visible{outline:2px solid #0003;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(--ui-ink, #26343B);
}
.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(--ui-border, #ddd);
  /* سبز/قرمز ثابت با فونت سفید */
  color:#fff;
}

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

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

/* ===== سلکت و ورودی ===== */
.ctrl__select, .ctrl__input {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--ui-border, #ddd); border-radius: 8px; background: var(--field-bg, #ffffff); color: var(--ui-ink, #26343B);
}

/* ===== نوشته کمرنگ باکس ورودی ===== */
.ctrl__input::placeholder{color: color-mix(in srgb, var(--ui-ink, #26343B) 55%, var(--field-bg, #ffffff) 45%); opacity:1}

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

/* ===== سوییچ ضرب اول ===== */
.controls .switch{justify-self:start !important;align-self:start}
/* سوییچ: استایل پایه */
.switch{color:var(--ui-ink, #26343B)}
.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(--switch-off, #26343B);border-radius:999px;
  background: var(--switch-off, #26343B);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(--field-bg, #ffffff);box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translateY(-50%);transition:left .2s
}
.switch input[type="checkbox"]:checked{background:var(--switch-on, #4A5C66);border-color:var(--switch-on, #4A5C66)}
.switch input[type="checkbox"]:checked::after{left:calc(100% - 3px - 20px)}
.switch input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px #22c55e55}
.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(--ui-ink, #26343B);
  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(--ui-border, #ddd);
  border-radius: var(--radius);
  background: var(--g1, #ffffff);
  color: var(--ui-ink, #26343B);
  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(--ui-bg, #ffffff);
  border: 1px solid var(--ui-border, #ddd);
  border-radius: var(--radius);
  color: var(--ui-ink, #26343B);
  padding: .75rem .7rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  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(--ui-ink, #26343B); }
.figure__panel select.ctrl__select{ width: clamp(7ch, 18vw, 10ch); max-width: 100%; background: var(--field-bg, #ffffff); color: var(--ui-ink, #26343B); border:1px solid var(--ui-border, #ddd); }

.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(--ui-ink, #26343B);
  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(--ui-ink, #26343B);
}
.figure__radios .lbl{ font-weight: 600; margin-inline-end: .5rem; color: var(--ui-ink, #26343B); }
.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(--ui-ink, #26343B);
}
.figure__mute .lbl{ font-weight: 600; color: var(--ui-ink, #26343B); }

/* خود سوییچ سکوت */
.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(--switch-off, #26343B);
  border-radius: 999px; background: var(--switch-off, #26343B);
  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(--field-bg, #ffffff); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transform: translateY(-50%);
  transition: left .2s;
}
.figure__mute input[type="checkbox"]:checked{
  background: var(--switch-on, #4A5C66); border-color: var(--switch-on, #4A5C66);
}
.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 #22c55e55;
}
@media (prefers-reduced-motion: reduce){
  .figure__mute input[type="checkbox"],
  .figure__mute input[type="checkbox"]::after{ transition: none; }
}

/* توپله 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(--field-bg, #ffffff); color: var(--ui-ink, #26343B); border:1px solid var(--ui-border, #ddd); }
.figure__pair .sep{ opacity: .7; color: var(--ui-ink, #26343B); }

.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:#fff;
}

.figure-btn--apply{ background:#16a34a; border-color:#16a34a; }
.figure-btn--apply:hover{ box-shadow:0 4px 12px rgba(22,163,74,.25); transform:translateY(-1px); }
.figure-btn--remove{ background:#dc2626; border-color:#dc2626; }
.figure-btn--remove:hover{ box-shadow:0 4px 12px rgba(220,38,38,.25); 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 color-mix(in oklab, var(--accent, #16a34a) 40%, transparent);
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--accent, #16a34a) 92%, var(--paper, #fff) 8%),
    color-mix(in oklab, var(--accent, #16a34a) 78%, var(--ink, #000) 6%)
  );
  color:var(--paper, #fff);
  box-shadow:0 10px 25px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.1);
  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:0 14px 30px rgba(0,0,0,.16), 0 4px 8px rgba(0,0,0,.12); }
.timer-toggle:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(0,0,0,.18); }

.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(--paper, #fff);
  border:1px solid color-mix(in oklab, var(--accent, #16a34a) 26%, transparent);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.16), 0 6px 14px rgba(0,0,0,.12);
  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:color-mix(in oklab, var(--ink, #000) 70%, transparent); }
.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:color-mix(in oklab, var(--ink, #000) 6%, transparent); 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:color-mix(in oklab, var(--ink, #000) 65%, transparent); }
.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 color-mix(in oklab, var(--ink, #000) 16%, transparent); padding:6px 8px; font-size:1rem; background:var(--paper, #fff); color:var(--ink, #000); width:clamp(58px, 14vw, 80px); text-align:center; }
.timer-panel__clockset input:disabled{ opacity:.65; cursor:not-allowed; background:color-mix(in oklab, var(--ink, #000) 8%, var(--paper, #fff) 92%); }
.timer-panel__clockset input:focus{ outline:2px solid var(--accent, #16a34a); outline-offset:1px; }
.timer-panel__unit-label{ font-size:.7rem; color:color-mix(in oklab, var(--ink, #000) 60%, transparent); line-height:1; letter-spacing:.25px; }
.timer-panel__clocksep{ font-weight:800; font-size:1.15rem; color:color-mix(in oklab, var(--ink, #000) 70%, transparent); line-height:1; }
.timer-panel__tabs{ display:flex; gap:6px; width:100%; }
.timer-tab{ padding:8px 10px; border-radius:10px; border:1px solid color-mix(in oklab, var(--ink, #000) 16%, transparent); background:color-mix(in oklab, var(--paper, #fff) 92%, var(--ink, #000) 8%); font-weight:800; font-size:.92rem; cursor:pointer; transition:all .16s ease; flex:1 1 0; text-align:center; }
.timer-tab.is-active{ border-color:var(--accent, #16a34a); color:var(--paper, #fff); box-shadow:0 6px 16px color-mix(in oklab, var(--accent, #16a34a) 28%, transparent); background:var(--accent, #16a34a); }
.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 color-mix(in oklab, var(--ink, #000) 18%, transparent); padding:6px 8px; font-size:.9rem; background:var(--paper, #fff); color:var(--ink, #000); 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 color-mix(in oklab, var(--ink, #000) 14%, transparent); padding:5px 7px; border-radius:8px; background:color-mix(in oklab, var(--paper, #fff) 94%, var(--ink, #000) 6%); }
.timer-panel__option--inline{ align-self:flex-start; white-space:nowrap; }
.timer-panel__option input{ width:16px; height:16px; margin:0; accent-color:var(--accent, #16a34a); }
.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:#16a34a; border-color:#16a34a; color:#fff; }
.timer-action--positive:hover{ box-shadow:0 4px 12px rgba(22,163,74,.25); }
.timer-action--warning{ background:#f59e0b; border-color:#f59e0b; color:#fff; }
.timer-action--warning:hover{ box-shadow:0 4px 12px rgba(245,158,11,.28); }
.timer-action--danger{ background:#dc2626; border-color:#dc2626; color:#fff; }
.timer-action--danger:hover{ box-shadow:0 4px 12px rgba(220,38,38,.25); }
.timer-toast{
  position:absolute;
  inset-inline-start:0;
  bottom:calc(100% + 10px);
  max-width:min(360px, 90vw);
  padding:10px 12px;
  border-radius:10px;
  background:color-mix(in oklab, var(--accent, #16a34a) 15%, var(--paper, #fff) 85%);
  color:var(--ink, #000);
  border:1px solid color-mix(in oklab, var(--accent, #16a34a) 35%, transparent);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  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); }

@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-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;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.met-toggle__loader .btn-loader-svg{
  width: 72px;
  height: 36px;
  display: block;
}

.met-toggle{
  color: var(--met-icon-color, var(--iconStrong, currentColor));
}

.met-toggle__loader .btn-loader-path{
  stroke: currentColor;
  stroke-width: 14;
}

.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(--ui-ink, var(--ink, currentColor)); /*رنگ نت های بیم*/
}
.notebox .nb-staff .note.is-target-note{
  color: var(--nb-select, #2d7ef7);
}
.notebox .nb-staff .note--beamed.is-target-note .nb-beam-glyph{
  color: var(--nb-select, #2d7ef7);
}
.notebox .nb-staff .note.is-playing-note{
  color: #16a34a;
}
.notebox .nb-staff .note--beamed.is-playing-note .nb-beam-glyph{
  color: #16a34a;
}
.notebox .nb-staff .nb-beam-line.is-playing-stub{
  background-color: #16a34a;
}
.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(--ui-ink, var(--ink, currentColor));

}

/* هر خط بیم یک عنصر مستقل است تا بتوانیم طول کامل و نصفه را جداگانه رسم کنیم. */
.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(--nb-select, #2d7ef7);
}

/* خط حامل/نمایش نت‌ها (پایه) */
.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 #d0d0d0;
  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(--nb-accent, #2d7ef7); }
.notebox.is-playing{ border:2px solid #16a34a; }
.notebox.is-playing.is-selected{ border-color:#16a34a; }
.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(--grip, #999);
  --grip-color-hover: #666;
  --grip-color-active: #444;

  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(--ui-ink, #26343B);
}
.figure__mute .lbl{ font-weight: 600; color: var(--ui-ink, #26343B); }

/* اختصاص ستون هر سوییچ روی شبکه: سکوت در ستون سوم، توپله در ستون چهارم */
.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(--switch-off, #26343B);
  border-radius: 999px; background: var(--switch-off, #26343B);
  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(--field-bg, #ffffff); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transform: translateY(-50%);
  transition: left .2s;
}
.figure__mute input[type="checkbox"]:checked{
  background: var(--switch-on, #4A5C66); border-color: var(--switch-on, #4A5C66);
}
.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 #22c55e55;
}
@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(--ui-ink, #26343B);
}

.figure__mute .lbl{
  font-weight: 600;
  color: var(--ui-ink, #26343B);
}

/* خود سوییچ سکوت */
.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(--switch-off, #26343B);
  border-radius: 999px; background: var(--switch-off, #26343B);
  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(--field-bg, #ffffff); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transform: translateY(-50%);
  transition: left .2s;
}
.figure__mute input[type="checkbox"]:checked{
  background: var(--switch-on, #4A5C66); border-color: var(--switch-on, #4A5C66);
}
.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 #22c55e55;
}

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