/* =========================================================
   استودیو ویژوالایزر — سیستم طراحی «گرافیت استودیویی»
   خنثی • آرام • بدون درخشش نئونی • یک رنگ تأکید (برنز)
========================================================= */

/* ---------- ۱. فونت کلمه (لوکال) ---------- */
@font-face{ font-family:'Kalameh'; font-weight:100; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-Thin.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:200; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-ExtraLight.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:300; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-Light.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:400; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-Regular.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:500; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-Medium.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:600; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-SemiBold.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:700; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-Bold.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:800; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-ExtraBold.woff2') format('woff2'); }
@font-face{ font-family:'Kalameh'; font-weight:900; font-style:normal; font-display:swap; src:url('public/font/kalameh/KalamehWeb-Black.woff2') format('woff2'); }

/* ---------- ۲. توکن‌های طراحی ---------- */
:root{
  /* سطوح */
  --bg:#0e1116;
  --rail-w:68px;
  --side-w:392px;
  --bg-2:#141821;
  --surface:#1c212a;
  --surface-2:#232935;
  --surface-3:#2c333f;
  --surface-4:#363e4c;
  --line:#3a4250;
  --line-2:#4d5766;

  /* متن */
  --text:#f2f4f8;
  --text-2:#bcc4d0;
  --text-3:#8f98a6;
  --text-4:#6f7885;

  /* رنگ تأکید — برنز/کهربا */
  --accent:#c9a86a;
  --accent-2:#e0c692;
  --accent-soft:rgba(201,168,106,.12);
  --accent-line:rgba(201,168,106,.38);
  --accent-ink:#17120a;

  /* معنایی */
  --ok:#79ab8e;   --ok-soft:rgba(121,171,142,.12);
  --danger:#c4736b; --danger-soft:rgba(196,115,107,.12);
  --warn:#cda45f;  --warn-soft:rgba(205,164,95,.12);

  /* شعاع و فاصله */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --gap:12px;

  /* سایه */
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 6px 20px rgba(0,0,0,.4);
  --sh-3:0 22px 56px rgba(0,0,0,.55);

  /* تایپوگرافی */
  --fs-xs:.6875rem;  /* 11 */
  --fs-sm:.75rem;    /* 12 */
  --fs-md:.8125rem;  /* 13 */
  --fs-lg:.875rem;   /* 14 */
  --fs-xl:1rem;      /* 16 */
  --fs-2xl:1.125rem; /* 18 */
  --fs-3xl:1.375rem; /* 22 */

  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Kalameh', system-ui, 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- ۳. پایه ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-lg);
  font-weight:400;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-soft); color:var(--text); }
:focus-visible{ outline:1.5px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs); }
.sprite{ display:none; }
.hidden{ display:none !important; }
.ic{ width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ic-solid{ fill:currentColor; stroke:none; }

/* اسکرول‌بار خنثی */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:#2b3138; border-radius:8px;
  border:2.5px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:#3a4149; background-clip:content-box; }

/* ---------- ۴. چیدمان کلی ---------- */
.app{ height:100dvh; display:flex; flex-direction:column; gap:var(--gap); padding:14px 18px 16px; }

.topbar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-md);
  background:linear-gradient(160deg, var(--surface-3), var(--surface));
  border:1px solid var(--line-2);
  color:var(--accent);
}
.brand-mark .ic{ width:20px; height:20px; }
.brand-text{ min-width:0; }
.brand-text h1{
  font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.2px;
  color:var(--text); white-space:nowrap;
}
.brand-text p{ font-size:var(--fs-xs); color:var(--text-3); margin-top:-2px; }

.topbar-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* کنترل سگمنتی (ابعاد) */
.segmented{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
}
.seg-label{ font-size:var(--fs-xs); color:var(--text-3); padding:0 8px 0 4px; }
.seg-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:5px 12px; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-2);
  transition:background .16s var(--ease), color .16s var(--ease);
  white-space:nowrap;
}
.seg-btn:hover{ color:var(--text); background:var(--surface-3); }
.seg-btn.active{ background:var(--surface-4); color:var(--text); box-shadow:var(--sh-1); }

/* اعلان بازیابی پروژه — شناور در گوشهٔ پایین، مثل نوتیف.
   عمداً از جریان چیدمان بیرون است تا محتوا را به پایین هل ندهد. */
.restore-banner{
  position:fixed; z-index:9000;
  inset-inline-start:calc(var(--rail-w) + 18px);
  bottom:18px;
  width:min(338px, calc(100vw - var(--rail-w) - 36px));
  display:flex; flex-direction:column; gap:10px;
  padding:12px 13px 13px;
  overflow:hidden;
  background:linear-gradient(155deg, #4b3517 0%, #2d2216 56%, var(--surface) 100%);
  border:1px solid rgba(240,182,74,.42);
  border-inline-start:3px solid #f0b64a;
  border-radius:var(--r-lg);
  box-shadow:0 20px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(240,182,74,.07), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:var(--fs-md);
  animation:rbIn .3s var(--ease);
}
/* پردهٔ نور گرم پشت اعلان تا از بقیهٔ صفحه جدا دیده شود */
.restore-banner::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(125% 85% at 88% -12%, rgba(240,182,74,.24), transparent 62%);
}
.restore-banner .rb-head{ display:flex; align-items:flex-start; gap:10px; }
.restore-banner .rb-icon{
  flex:none; width:32px; height:32px; display:grid; place-items:center;
  border-radius:9px; color:#f5c66d;
  background:rgba(240,182,74,.17); border:1px solid rgba(240,182,74,.42);
  animation:rbPulse 2.6s var(--ease) infinite;
}
.restore-banner .rb-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.restore-banner .rb-title{ font-size:var(--fs-md); font-weight:700; color:#f7e3bd; line-height:1.65; }
.restore-banner .rb-sub{ font-size:var(--fs-xs); color:var(--text-2); line-height:1.9; }
.restore-banner .rb-close{
  appearance:none; border:0; background:none; cursor:pointer; flex:none;
  margin-inline-start:auto; padding:3px; border-radius:7px; color:var(--text-3);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.restore-banner .rb-close:hover{ color:var(--text); background:rgba(255,255,255,.07); }
.restore-banner .rb-actions{ display:flex; gap:7px; }
.restore-banner .rb-actions .btn{ flex:1 1 auto; justify-content:center; }
@keyframes rbIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes rbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,182,74,.3); } 50%{ box-shadow:0 0 0 7px rgba(240,182,74,0); } }

/* شبکه اصلی */
.layout{
  flex:1; min-height:0;
  display:grid;  grid-template-columns:var(--rail-w) minmax(0,1fr) var(--side-w);
  gap:var(--gap); align-items:stretch;
}

/* ---------- ۵. ریل ناوبری ---------- */
.rail{
  display:flex; flex-direction:column; gap:3px; padding:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow-y:auto;
}
.rail-btn{
  appearance:none; cursor:pointer; border:0; background:transparent;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px; border-radius:var(--r-md);
  color:var(--text-3); transition:background .16s var(--ease), color .16s var(--ease);
}
.rail-btn .ic{ width:19px; height:19px; }
.rail-btn span{ font-size:10.5px; font-weight:500; line-height:1.35; letter-spacing:0; }
.rail-btn:hover{ color:var(--text); background:var(--surface-2); }
.rail-btn.active{ color:var(--accent); background:var(--accent-soft); }
.rail-btn.active span{ color:var(--accent); font-weight:600; }
.rail-btn.active::before{
  content:''; position:absolute; inset-block:9px; inset-inline-end:-6px; width:2px;
  background:var(--accent); border-radius:2px;
}
.rail-btn.rail-hint{ animation:railHint 1.5s var(--ease) 2; }
@keyframes railHint{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,168,106,0); }
  45%{ box-shadow:0 0 0 3px var(--accent-soft); }
}
.rail-sep{ height:1px; background:var(--line); margin:5px 6px; }

/* ---------- ۶. صحنه (بوم + ترنسپورت) ---------- */
.stage{
  min-height:0; display:flex; flex-direction:column; gap:var(--gap);
}
/* سردر صحنه حذف شد؛ بج پیش‌نمایش و راهنما به‌صورت چیپ شناور روی گوشه‌های بوم افتادند */
.live-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:500; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--line);
  padding:3px 9px; border-radius:999px;
}
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 2.4s var(--ease) infinite; }

.canvas-frame{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, #12151a 0%, var(--bg-2) 60%, var(--bg) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  position:relative; overflow:hidden;
}
#canvasWrapper{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:0; }
#mainCanvas{
  max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:var(--r-sm);
  box-shadow:0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  cursor:grab; touch-action:pan-y; background:#000;
}
#mainCanvas:active{ cursor:grabbing; }

/* حالت خالی بوم */
.stage-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:24px; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,13,.72), rgba(10,11,13,.86));
}
.stage-empty.hidden{ display:none; }
.stage-empty .se-icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--accent);
}
.stage-empty .se-icon .ic{ width:24px; height:24px; }
.stage-empty h2{ font-size:var(--fs-xl); font-weight:600; }
.stage-empty p{ font-size:var(--fs-md); color:var(--text-3); max-width:44ch; line-height:1.9; }
.drop-active .canvas-frame{ border-color:var(--accent-line); background:var(--accent-soft); }

/* ---------- ۷. ترنسپورت — پلیر: موج در بالا؛ ردیف [پوشه+نام | زمان+نوار | پخش/پاوس | صدا] ---------- */
.transport{
  flex:none; display:flex; flex-direction:column; gap:9px;
  padding:11px 16px 12px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* نوار پخش کل عرض را می‌گیرد و زمان کنارش می‌نشیند */
.tp-seek-row{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.tp-seek-row .seek{ flex:1; min-width:0; }
.transport-row{ display:flex; align-items:center; gap:10px; }
.tp-side{ display:flex; align-items:center; gap:8px; min-width:0; }
.tp-center{ display:flex; align-items:center; gap:8px; margin-inline-start:6px; }
.time-label{
  flex:none;
  font-size:var(--fs-sm); font-weight:600; color:var(--text-3);
  font-variant-numeric:tabular-nums; letter-spacing:.4px; white-space:nowrap;
}
/* دکمهٔ انتخاب آهنگ: کاشی گِرد با آیکون پوشه — برای هر دو پلتفرم */
.tp-load{ gap:7px; color:var(--text-2); border:1px solid var(--line-2); background:var(--surface-3); }
.tp-load .ic{ color:var(--text-2); }
.tp-load:hover{ color:var(--accent); border-color:var(--accent-line); }
.volume-box{ display:flex; align-items:center; gap:7px; color:var(--text-3); }
.volume-box input[type=range]{ width:96px; }
/* نوار پخش پلیر: بلندتر و برجسته‌تر از اسلایدرهای پنل (سلیکتور خاص‌تر تا از استایل عمومی جلو بزند) */
/* نوار جابه‌جایی: پرشدنِ رنگی مطابق جهت RTL — متغیر --p را paintSeek به‌روز می‌کند؛
   بخشِ پرشده فیروزه‌ای→طلایی می‌سوید و کاملاً از باقی‌ماندهٔ کم‌رنگ جدا است */
input[type=range].seek{
  width:100%; height:8px; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(to left, #14c9c4 0, var(--accent) calc(var(--p,0)*1%), rgba(255,255,255,.14) calc(var(--p,0)*1%) 100%);
}
input[type=range].seek::-webkit-slider-thumb{ width:15px; height:15px; background:var(--accent); }
input[type=range].seek::-webkit-slider-thumb:hover{ transform:scale(1.16); background:var(--accent-2); }
input[type=range].seek::-moz-range-thumb{ width:15px; height:15px; background:var(--accent); }

/* ---------- ۸. پنل کناری ---------- */
.sidebar{
  min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  padding-inline-end:4px; padding-bottom:4px;
  scroll-behavior:smooth;
}
/* مهم: کارت‌ها هرگز جمع نمی‌شوند؛ اگر جا کم بیاید خود پنل اسکرول می‌شود */
.sidebar > *{ flex:0 0 auto; flex-shrink:0; }
details{
  flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
details[open]{
  border-color:var(--line-2);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
details summary{ list-style:none; cursor:pointer; user-select:none; }
details summary::-webkit-details-marker{ display:none; }
.sec-head{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; min-height:44px;
  font-size:var(--fs-md); font-weight:600; color:var(--text);
  border-radius:var(--r-lg);
  transition:background .16s var(--ease);
}
.sec-head:hover{ background:var(--surface-2); }
details[open] > summary .sec-head{ border-end-start-radius:0; border-end-end-radius:0; }
.sec-head .ic{ width:16px; height:16px; color:var(--text-3); flex:none; }
details[open] > summary .sec-head .ic{ color:var(--accent); }
.sec-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* توضیح هر بخش داخل بدنه نمایش داده می‌شود، نه در تیتر */
.sec-intro{
  font-size:var(--fs-sm); color:var(--text-3); line-height:1.85;
  padding-inline-start:2px;
}
.sec-badge{
  font-size:var(--fs-xs); font-weight:500; color:var(--text-3);
  background:var(--bg-2); border:1px solid var(--line);
  padding:2px 8px; border-radius:999px; white-space:nowrap; flex:none;
}
details[open] > summary .sec-badge{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.arrow{ flex:none; color:var(--text-4); transition:transform .22s var(--ease); }
.arrow .ic{ width:15px; height:15px; }
details[open] > summary .arrow{ transform:rotate(180deg); }

.sec-body{
  display:flex; flex-direction:column; gap:12px;
  padding:12px 13px 14px;
  /* تبِ باز کمی روشن‌تر از بقیهٔ پنل است تا معلوم باشد کدام بخش فعال است */
  border-top:1px solid var(--line-2);
  background:var(--surface-2);
  border-end-start-radius:calc(var(--r-lg) - 1px);
  border-end-end-radius:calc(var(--r-lg) - 1px);
}
.sec-body > *{ margin:0; }
.sec-actions{ display:flex; gap:7px; flex-wrap:wrap; }
/* زیربخش‌های تودرتوی تب‌های ادغام‌شده — کمی فرورفته‌تر از تب اصلی */
details.subsec{
  border-radius:var(--r-md);
  background:var(--surface-2);
  margin-top:2px;
}
details.subsec .sec-head{ min-height:40px; padding:8px 10px; font-size:var(--fs-sm); }
details.subsec .sec-body{ background:transparent; padding:10px 11px 12px; }

/* رنگ‌بندی متمایز زیربخش‌های تودرتو — هر زیربخش هویت رنگی خودش را دارد */
details.subsec[data-acc=trim]{ --acc:#45c2a2; --acc-soft:rgba(69,194,162,.13); --acc-line:rgba(69,194,162,.42); }
details.subsec[data-acc=sound]{ --acc:#f09a4b; --acc-soft:rgba(240,154,75,.13); --acc-line:rgba(240,154,75,.42); }
details.subsec[data-acc=fx]{ --acc:#a684f5; --acc-soft:rgba(166,132,245,.13); --acc-line:rgba(166,132,245,.42); }
details.subsec[data-acc=stack]{ --acc:#ef6fa8; --acc-soft:rgba(239,111,168,.13); --acc-line:rgba(239,111,168,.42); }
details.subsec[data-acc=sub]{ --acc:#8fc96b; --acc-soft:rgba(143,201,107,.13); --acc-line:rgba(143,201,107,.42); }
details.subsec[data-acc=prog]{ --acc:#ef6f6f; --acc-soft:rgba(239,111,111,.13); --acc-line:rgba(239,111,111,.42); }
details.subsec[data-acc]{ border:1px solid var(--line-2); border-inline-start:3px solid var(--acc); }
details.subsec[data-acc] > summary .sec-head{ background:linear-gradient(to left, var(--acc-soft), transparent 72%); }
details.subsec[data-acc] .sec-head .ic{
  width:22px; height:22px; padding:3px;
  color:var(--acc);
  background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:6px;
}
details.subsec[data-acc] .sec-title{ font-weight:600; }
details.subsec[data-acc] .sec-badge{ color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft); }
details.subsec[data-acc][open] > summary .sec-head{ border-top:2px solid var(--acc); }
details.subsec[data-acc][open] .sec-body{
  background:linear-gradient(180deg, var(--acc-soft), transparent 85%);
  box-shadow:inset 0 0 0 1px var(--acc-soft);
}
.divider{ height:1px; background:var(--line); margin:2px 0; border:0; }

/* ---------- ۹. فرم ---------- */
.field{ display:flex; flex-direction:column; gap:5px; }
.field-label{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-2);
}
.field-value{ font-size:var(--fs-xs); color:var(--text-3); font-variant-numeric:tabular-nums; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

input[type=text], input[type=number], select{
  width:100%; padding:7px 10px; font-size:var(--fs-md);
  color:var(--text); background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
input[type=text]::placeholder{ color:var(--text-4); }
input[type=text]:focus, input[type=number]:focus, select:focus{
  outline:none; border-color:var(--accent-line); background:var(--surface-2);
}
select{
  appearance:none; cursor:pointer; padding-inline-end:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 10px center;
}
select option{ background:var(--bg-2); color:var(--text); }

input[type=range]{
  -webkit-appearance:none; appearance:none; margin:0;
  width:100%; height:4px; border-radius:4px; outline:none; cursor:pointer;
  background:var(--surface-4);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--text); border:0; cursor:grab;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
  transition:transform .14s var(--ease), background .14s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); background:var(--accent-2); }
input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.04); }
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--text); border:0; cursor:grab;
}
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--accent-soft); }

input[type=color]{
  -webkit-appearance:none; appearance:none; width:100%; height:34px;
  padding:0; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg-2); cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{ padding:3px; }
input[type=color]::-webkit-color-swatch{ border:0; border-radius:5px; }

input[type=checkbox], input[type=radio]{ accent-color:var(--accent); width:17px; height:17px; margin:0; cursor:pointer; flex:none; }

.switch-row{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; font-size:var(--fs-sm); color:var(--text-2); cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .16s var(--ease), color .16s var(--ease);
}
.switch-row:hover{ border-color:var(--line-2); color:var(--text); }
.switch-row:has(input:checked){ color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); }
.switch-row .sb-label{ flex:1; }

/* ظرف‌های تنظیمات تاشو — bindCollapse مقدار display:flex می‌دهد */
[id$="Settings"]{ flex-direction:column; gap:8px; }
/* ظرف‌های جایگزین پس‌زمینه (گرادینت / عکس-ویدیو) — JS فقط display را عوض می‌کند */
[id$="Controls"]{ flex-direction:column; gap:12px; }

/* ---------- ۱۰. دکمه‌ها ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 13px; font-size:var(--fs-md); font-weight:500;
  color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover{ color:var(--text); background:var(--surface-3); border-color:var(--line-2); }
.btn:active{ transform:translateY(.5px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.active{ color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); color:var(--accent-ink); }
.btn-ghost{ background:transparent; border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ color:var(--danger); border-color:rgba(196,115,107,.28); background:var(--danger-soft); }
.btn-danger:hover{ color:#e0938b; border-color:rgba(196,115,107,.5); background:rgba(196,115,107,.18); }
.btn-icon{ width:34px; height:34px; padding:0; }
.btn-sm{ padding:5px 10px; font-size:var(--fs-sm); }
.btn-play{ min-width:118px; }
.btn-block{ width:100%; }
.link-danger{
  appearance:none; border:0; background:none; cursor:pointer; padding:2px 4px;
  font-size:var(--fs-xs); color:var(--text-3); border-radius:var(--r-xs);
  transition:color .16s var(--ease);
}
.link-danger:hover{ color:var(--danger); }

.file-label{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 12px; font-size:var(--fs-sm); color:var(--text-2);
  background:var(--bg-2); border:1px dashed var(--line-2);
  border-radius:var(--r-sm); cursor:pointer;
  transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.file-label:hover{ color:var(--text); border-color:var(--accent-line); background:var(--surface-2); }

/* ---------- ۱۱. اجزای کوچک ---------- */
.hint-text{
  display:flex; gap:6px; font-size:var(--fs-xs); color:var(--text-3);
  line-height:1.85;
}
.note-lines{ display:flex; flex-direction:column; gap:6px; }
.file-name{ font-size:var(--fs-xs); color:var(--text-2); word-break:break-all; }

.chip-row{ display:flex; gap:5px; flex-wrap:wrap; }
.chip{
  appearance:none; cursor:pointer;
  min-height:30px; padding:5px 11px; font-size:var(--fs-xs); color:var(--text-3);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; transition:all .16s var(--ease);
}
.chip:hover{ color:var(--text); border-color:var(--line-2); }
.chip.active{ color:var(--text); border-color:var(--line-2); background:var(--surface-2); }

.preset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.preset-btn{
  appearance:none; cursor:pointer; display:flex; flex-direction:column; gap:6px;
  padding:7px; font-size:var(--fs-xs); color:var(--text-3);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:all .16s var(--ease);
}
.preset-btn:hover{ color:var(--text); border-color:var(--line-2); background:var(--surface-2); }
.preset-btn.active{ border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); }
.preset-swatch{
  width:100%; height:26px; border-radius:5px;
  border:1px solid rgba(255,255,255,.09);
}
.tdot{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0; flex:none;
  border:1px solid rgba(255,255,255,.22);
  transition:transform .14s var(--ease);
}
.tdot:hover{ transform:scale(1.12); }

.bg-type-switch{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.bg-type-btn{ font-size:var(--fs-sm); padding:9px 8px; }
.bg-type-btn.active{ background:var(--surface-4); border-color:var(--line-2); color:var(--text); }

.sub-item{
  display:flex; flex-direction:column; gap:5px;
  padding:9px 10px; font-size:var(--fs-sm);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
}
.sub-item .si-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sub-item .si-head > input[type=text]{ flex:1; min-width:0; }
.sub-item .si-main{ color:var(--text); font-weight:500; }
.sub-item .si-sub{ font-size:var(--fs-xs); color:var(--text-3); }

/* جعبهٔ هر متن = یک تب داخلی؛ همزمان فقط یکی باز است */
.text-acc{ padding:0; overflow:hidden; }
.text-acc .ta-head{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 10px; cursor:pointer;
  font-size:var(--fs-sm); color:var(--text-2);
  background:transparent; border-radius:var(--r-sm);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.text-acc .ta-head:hover{ background:var(--surface); color:var(--text); }
.text-acc .ta-head:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-2px; }
.text-acc.open .ta-head{ background:var(--surface); color:var(--text); border-end-start-radius:0; border-end-end-radius:0; }
.ta-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.ta-arrow{ flex:none; display:flex; color:var(--text-4); transition:transform .22s var(--ease); }
.ta-arrow .ic{ width:15px; height:15px; }
.text-acc.open .ta-arrow{ transform:rotate(180deg); }
.ta-del{ flex:none; }
.ta-body{
  display:none; flex-direction:column; gap:9px;
  padding:10px; background:var(--surface);
  border-start-start-radius:0; border-start-end-radius:0;
  border-end-start-radius:var(--r-sm); border-end-end-radius:var(--r-sm);
}
.text-acc.open .ta-body{ display:flex; }
/* کنترل سگمنتی داخل فیلد، هم‌عرض ستون شود */
.field > .segmented{ display:flex; width:100%; }
.field > .segmented .seg-btn{ flex:1; padding:5px 6px; }
/* هایلایت لحظه‌ای جعبه وقتی از روی بوم روی آن پرش می‌کنیم */
@keyframes settingFlash{
  0%{ box-shadow:0 0 0 0 var(--accent-soft); }
  18%{ box-shadow:0 0 0 4px var(--accent-soft); }
  100%{ box-shadow:0 0 0 0 var(--accent-soft); }
}
.setting-flash{ animation:settingFlash 1.6s var(--ease) 1; border-color:var(--accent-line); }
.tag-time{
  font-size:var(--fs-xs); color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:.3px;
}
.item-list{ display:flex; flex-direction:column; gap:7px; max-height:320px; overflow-y:auto; padding-inline-end:2px; }
/* فهرست متن‌ها اسکرول داخلی نمی‌گیرد؛ تبِ باز جا باز می‌کند و پنل اسکرول می‌شود */
#textList{ max-height:none; overflow:visible; padding-inline-end:0; }
.stack{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:8px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.row-wrap{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

/* ---------- ۱۲. قالب‌های آماده ---------- */
/* نوار فیلتر: جست‌وجو + دو ردیف چیپ (فرمت و سبک) + شمارنده */
.tpl-filter-head{ display:flex; gap:6px; align-items:center; margin-bottom:7px; }
.tpl-search{
  flex:1 1 auto; display:flex; align-items:center; gap:6px; min-width:0;
  padding:6px 9px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
}
.tpl-search .ic{ width:14px; height:14px; color:var(--text-3); flex:0 0 auto; }
.tpl-search input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text); font-family:inherit; font-size:var(--fs-sm);
}
.tpl-search input::placeholder{ color:var(--text-3); }
.tpl-clear{ flex:0 0 auto; white-space:nowrap; }
.tpl-filter-label{
  margin:6px 0 5px; font-size:var(--fs-xs); font-weight:600; color:var(--text-3);
}
.tpl-count-row{ display:flex; justify-content:flex-end; margin:7px 0 6px; }
.tpl-count{ font-size:var(--fs-xs); color:var(--text-3); }
.tpl-empty{ margin-top:10px; font-size:var(--fs-xs); color:var(--text-3); line-height:1.8; }
/* پنل قالب: نوار فیلتر هنگام گشتن در ۵۳ کارت بالای ستون چسبان می‌ماند
   (overflow:clip لازم است وگرنه overflow:hidden عنصر details اسکرول‌پورت چسبندگی می‌شود) */
#tplDetails{ overflow:clip; }
.tpl-filters{
  position:sticky; top:-1px; z-index:3;
  padding:6px 2px 8px; margin:-6px -2px 0;
  background:var(--surface-3);
  box-shadow:0 12px 16px -14px rgba(0,0,0,.85);
}
.tpl-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
/* چیپ‌های فیلتر در ستون باریک کنار، جمع‌وجورتر تا فهرست جا باز کند */
.tpl-filters .chip{ min-height:26px; padding:4px 9px; font-size:11px; }
.tpl-filters .tpl-filter-label{ margin:5px 0 4px; }
.tpl-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
/* برچسب‌ها در یک ردیف می‌مانند و لبهٔ بریده با محو نرم پوشیده می‌شود */
.tpl-tags{
  display:flex; gap:4px; flex-wrap:nowrap; overflow:hidden; margin-top:5px;
  mask-image:linear-gradient(90deg, #000 76%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 76%, transparent 100%);
}
.tpl-tags span{
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; font-size:10px; color:var(--text-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px;
}
.tpl-song-tag .ic{ width:11px; height:11px; }
/* نوار پالت قالب — امضای رنگی هر طرح */
.tpl-sw{ display:block; height:3px; margin-bottom:6px; border-radius:99px; opacity:.9; }
.tpl-card{
  position:relative; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.tpl-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.tpl-card img{ display:block; width:100%; height:64px; object-fit:cover; filter:saturate(.92); }
.tpl-card:hover img{ filter:saturate(1); }
.tpl-card .tpl-meta{ padding:6px 8px 7px; }
.tpl-card .tpl-name{ font-size:var(--fs-sm); font-weight:600; color:var(--text); }
/* توضیح در دو خط بریده می‌شود تا کارت‌ها هم‌قد و اسکن‌کردنشان راحت باشد */
.tpl-card .tpl-desc{
  margin-top:2px; font-size:var(--fs-xs); color:var(--text-3); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tpl-badge{
  position:absolute; top:7px; inset-inline-start:7px;
  padding:2px 8px; font-size:10px; font-weight:500; color:var(--text);
  background:rgba(10,11,13,.78); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; backdrop-filter:blur(6px);
}
.tpl-card.tpl-loading{ pointer-events:none; opacity:.55; }
.tpl-card.tpl-loading::after{
  content:'در حال اعمال…'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:500; color:var(--text);
  background:rgba(10,11,13,.72);
}

/* ---------- ۱۳. تایم‌لاین برش ---------- */
.trim-timeline{
  position:relative; height:60px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line);
  touch-action:none; user-select:none; cursor:default; direction:ltr;
}
#trimLoopStripes{ position:absolute; inset:0; display:flex; opacity:.55; }
#trimLoopStripes .stripe{
  flex:1; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:4px; font-size:9px; color:var(--text-4);
  border-inline-end:1px solid var(--line);
}
#trimLoopStripes .stripe.repeat{
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 8px, transparent 8px 16px);
}
#trimWindow{
  position:absolute; top:5px; bottom:5px;
  display:flex; align-items:stretch; cursor:grab;
  background:var(--accent-soft);
  border:1.5px solid var(--accent-line);
  border-radius:var(--r-sm);
  box-shadow:0 0 0 9999px rgba(10,11,13,.42);
}
#trimWindow:active{ cursor:grabbing; }
#trimWindowBody{ flex:1; }
.trim-grip{
  width:24px; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--accent-ink); background:var(--accent);
  cursor:ew-resize; font-weight:700;
}
#trimGripL{ border-radius:7px 0 0 7px; }
#trimGripR{ border-radius:0 7px 7px 0; }
#trimPlayhead{
  position:absolute; top:0; bottom:0; width:2px; background:var(--text);
  opacity:.85; pointer-events:none;
}
.timeline-scale{
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-xs); color:var(--text-3); font-variant-numeric:tabular-nums;
}
.timeline-scale .mid{ color:var(--accent); font-weight:500; }

/* ---------- ۱۴. توست ---------- */
#toastWrap{
  /* مرکزِ افقی باید فیزیکی باشد: inset-inline-start در RTL یعنی «راست» و با
     translateX(-50%) توست تا نیم‌عرض از صفحه بیرون می‌افتاد (باگ «باکس ناقص») */
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:10000; width:min(380px,92vw);
  display:flex; flex-direction:column; gap:7px; align-items:stretch;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px;
  padding:10px 13px; font-size:var(--fs-md); text-align:start;
  color:var(--text); background:var(--surface-3);
  border:1px solid var(--line-2); border-inline-start:2px solid var(--text-4);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
  animation:toastIn .22s var(--ease);
}
.toast::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--text-4); flex:none; }
.toast-ok{ border-inline-start-color:var(--ok); }
.toast-ok::before{ background:var(--ok); }
.toast-error{ border-inline-start-color:var(--danger); }
.toast-error::before{ background:var(--danger); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- ۱۵. خروجی ویدیو ---------- */
.export-block{
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.export-head{ display:flex; align-items:center; gap:10px; }
.export-head .eh-icon{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--surface-3); color:var(--accent);
  border:1px solid var(--line-2);
}
.export-head h3{ font-size:var(--fs-lg); font-weight:600; }
.export-head p{ font-size:var(--fs-xs); color:var(--text-3); }
.export-big{ width:100%; padding:12px; font-size:var(--fs-lg); font-weight:600; border-radius:var(--r-md); }
.field-hint{ font-weight:500; color:var(--text-3); font-size:var(--fs-xs); }
/* لیست کیفیت خروجی — گزینه‌های عمودی؛ تأکید بصری روی نام کیفیت */
.eq-list{ display:flex; flex-direction:column; gap:7px; }
.eq-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; text-align:start;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md);
  color:var(--text-2); cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.eq-opt:hover{ border-color:var(--line-x, var(--accent-line)); }
.eq-opt:active{ transform:scale(.985); }
.eq-opt.active{
  border-color:var(--accent-line); background:var(--accent-soft); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.eq-name{ font-size:var(--fs-md); font-weight:700; color:var(--text); flex:none; min-width:78px; }
.eq-opt.active .eq-name{ color:var(--accent); }
.eq-meta{ font-size:var(--fs-xs); color:var(--text-3); flex:1; min-width:0; direction:ltr; unicode-bidi:isolate; font-family:'Segoe UI','Tahoma',Arial,sans-serif; }
.eq-side{ font-size:var(--fs-xs); font-weight:600; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; font-family:'Segoe UI','Tahoma',Arial,sans-serif; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--danger); animation:pulse 1.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

#renderOverlay{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,7,9,.84); backdrop-filter:blur(8px);
}
.render-card{
  width:min(430px,94vw); padding:26px 22px;
  display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-3);
}
.render-ring-wrap svg{ transform:rotate(-90deg); }
#renderRingBg{ stroke:var(--surface-4); fill:none; }
#renderRingFg{ stroke:var(--accent); fill:none; stroke-linecap:round; transition:stroke-dashoffset .25s linear; }
.render-pct{ position:absolute; inset:0; display:grid; place-items:center; }
#renderPct{ font-size:1.15rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.render-ring-wrap{ position:relative; width:148px; height:148px; }
.render-rec{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; font-size:var(--fs-sm); font-weight:600; color:var(--text-2);
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:999px;
}
.render-title{ font-size:var(--fs-xl); font-weight:600; }
.render-title.big{ font-size:1.42rem; font-weight:700; letter-spacing:-.2px; color:var(--text); }
.render-times{ font-size:var(--fs-md); font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums; direction:ltr; }
.render-warn{
  width:100%; padding:12px 14px; font-size:var(--fs-sm); font-weight:600; line-height:2;
  color:var(--warn); background:var(--warn-soft);
  border:1.5px solid rgba(205,164,95,.5); border-radius:var(--r-md);
}
.render-warn b{ color:var(--warn); font-weight:700; }
#renderPausedBanner{
  width:100%; padding:9px 12px; font-size:var(--fs-sm); font-weight:500;
  color:var(--text); background:var(--surface-3);
  border:1px solid var(--accent-line); border-radius:var(--r-md);
  animation:pulse 1.6s var(--ease) infinite;
}
.render-download{ width:100%; padding:12px; font-size:var(--fs-lg); }
.render-done-icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  background:var(--ok-soft); border:1px solid rgba(121,171,142,.4); color:var(--ok); }
.render-done-icon .ic{ width:26px; height:26px; }
@keyframes popIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.render-done-icon{ animation:popIn .35s var(--ease); }
#renderDoneWrap{ display:none; flex-direction:column; gap:13px; align-items:center; width:100%; }
.render-check{ font-size:var(--fs-sm); color:var(--text-3); line-height:1.9; min-height:1.4em; text-align:center; }
.render-check.ok{ color:var(--ok); }
.render-check.warn{ color:var(--warn, #e0a030); }
#renderBusyWrap{ display:flex; flex-direction:column; gap:13px; align-items:center; width:100%; }

/* ---------- ۱۶. پنجره میانبرها ---------- */
.modal{
  position:fixed; inset:0; z-index:9998; display:grid; place-items:center;
  padding:20px; background:rgba(6,7,9,.7); backdrop-filter:blur(6px);
}
.modal.hidden{ display:none; }
.modal-card{
  width:min(460px,94vw); overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-3);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.modal-head h3{ font-size:var(--fs-xl); font-weight:600; display:flex; align-items:center; gap:9px; }
.modal-head .ic{ color:var(--accent); }
.modal-body{ padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.kbd-group-block{ display:flex; flex-direction:column; gap:7px; }
.kbd-section{
  font-size:var(--fs-xs); font-weight:600; color:var(--text-4);
  letter-spacing:.4px; padding-bottom:2px;
}
.kbd-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:var(--fs-md); color:var(--text-2); }
.kbd-row .kbd-group{ display:flex; gap:5px; }
kbd{
  display:inline-block; min-width:26px; padding:2px 7px;
  font-family:var(--font); font-size:var(--fs-xs); text-align:center;
  color:var(--text); background:var(--bg-2);
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px;
}
.modal-foot{ padding:0 16px 16px; }

/* ---------- ۱۷. پاورقی پنل ---------- */
.sidebar-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; font-size:var(--fs-xs); color:var(--text-4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.save-status{ display:flex; align-items:center; gap:6px; }
.save-status .ic{ width:13px; height:13px; }
.save-status.saved{ color:var(--ok); }
.undo-row{ display:flex; align-items:center; gap:6px; }
.undo-row .btn{ padding:4px 9px; font-size:var(--fs-xs); }
.undo-row .btn:disabled{ opacity:.45; }

/* ---------- ۱۸. تفکیک بصری بخش‌ها + صحنهٔ پیش‌نمایش + سوئیچ ابعاد ---------- */
/* هر بلوک اصلی یک شیشهٔ روشن‌تر از پس‌زمینه دارد تا مرزها معلوم باشند */
.topbar, .rail, .transport, details{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border-color:var(--line);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.045);
}

/* بخش‌های پنل کناری: فاصلهٔ بیشتر + مرز واضح؛ بخشِ باز با نوار تأکید متمایز می‌شود */
.sidebar{ gap:11px; }
details{ overflow:hidden; }
details + details{ margin-top:1px; }
details[open]{
  border-color:var(--accent-line);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
details[open] > summary .sec-head{
  background:linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-top:2px solid var(--accent);
}
details:not([open]) > summary .sec-head{ border-top:2px solid transparent; }
.sec-body{ background:linear-gradient(180deg, var(--surface-3), var(--surface-2)); }

/* صحنه: قاب پیش‌نمایش، روشن‌تر و با حاشیهٔ بیشتر از بقیهٔ صفحه جدا می‌شود */
.canvas-frame{
  padding:16px 18px;
  background:
    radial-gradient(130% 105% at 50% -12%, #2a3242 0%, #1d2432 48%, #141a25 100%);
  border:2px solid var(--line-2);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 64px rgba(0,0,0,.5);
}
.canvas-frame::after{
  content:''; position:absolute; inset:9px; border-radius:15px;
  border:1px dashed rgba(255,255,255,.075); pointer-events:none;
}
#mainCanvas{ box-shadow:0 26px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.09); }
.stage-empty{ background:linear-gradient(180deg, rgba(14,17,22,.6), rgba(14,17,22,.8)); }

/* سوئیچ ابعاد — وسط صحنه، با آیکون نسبت و نشانگر انتخاب */
.aspect-switch{
  flex:none; align-self:center;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center;
  padding:6px 10px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
}
.as-label{ font-size:var(--fs-xs); font-weight:600; color:var(--text-3); padding:0 4px 0 8px; }
.asp-btn{
  appearance:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:5px 9px;
  background:var(--surface-3);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text-2);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.asp-btn:hover{ background:var(--surface-4); border-color:var(--line-2); color:var(--text); transform:translateY(-1px); }
.asp-btn.active{
  background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent-2);
  box-shadow:0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.asp-shape{
  flex:none; height:20px; width:auto; aspect-ratio:var(--ar, 1 / 1);
  border:1.8px solid currentColor; border-radius:4px; opacity:.75;
  background:linear-gradient(135deg, rgba(201,168,106,.34), rgba(201,168,106,.12) 55%, rgba(232,68,63,.20));
  transition:opacity .16s var(--ease), background .16s var(--ease);
}
.asp-btn:hover .asp-shape{ opacity:.9; }
.asp-btn.active .asp-shape{ opacity:1; background:linear-gradient(135deg, var(--accent-soft), rgba(240,154,75,.30)); }
.asp-meta{ display:flex; flex-direction:row; align-items:baseline; gap:5px; line-height:1.2; }
.asp-meta b{ font-size:var(--fs-sm); font-weight:700; letter-spacing:.3px; }
.asp-meta i{ font-size:10px; font-style:normal; color:var(--text-3); }
.asp-btn.active .asp-meta i{ color:var(--accent); }
/* نشانگر رادیویی تا «قابل انتخاب بودن» بی‌درنگ معلوم شود */
.asp-btn::after{
  content:''; flex:none; width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--line-2); background:transparent;
  transition:background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.asp-btn.active::after{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft); }

/* ---------- ۱۸.۵ نوار ابزار بوم، چیپ‌ها و کنترل جای آبجکت ---------- */
/* دکمهٔ جابه‌جایی — هم‌ردیف ابعاد، تا یک ردیف جدا ارتفاع نگیرد */
.as-sep{ width:1px; align-self:stretch; margin:2px 1px; background:var(--line-2); }
.as-move{ padding:4px 10px; font-size:11px; line-height:1.5; }
/* راهنمای تعامل در حاشیهٔ خالی قاب می‌نشیند (نه روی خود طرح) و بعد از اولین کشیدن محو می‌شود */
.frame-hint{
  position:absolute; inset-inline-start:14px; bottom:12px;
  max-width:min(17%, 150px);
  flex-direction:column; gap:2px;
  padding:6px 9px; font-size:10.5px; line-height:1.75;
  text-align:center; cursor:default; pointer-events:none; opacity:.92;
}
.ar-wide .frame-hint, .stage-idle .frame-hint{ display:none; }
.cf-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  font-family:inherit; font-size:var(--fs-xs); font-weight:600; line-height:1.6;
  color:var(--text-2);
  background:rgba(20,25,34,.84);
  border:1px solid var(--line-2);
  box-shadow:0 6px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
  cursor:pointer; user-select:none;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.cf-chip .ic{ width:14px; height:14px; flex:none; }
.cf-hint{
  font-weight:500; color:var(--text-3); cursor:default;
  transition:opacity .35s var(--ease), visibility .35s;
}
.cf-hint.gone{ opacity:0; visibility:hidden; }
#moveModeBtn:hover{ background:var(--surface-4); color:var(--text); border-color:var(--accent-line); }
#moveModeBtn.active{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
/* لینک «کپی» کنار «حذف» در کارت هر متن (جای نوار ابزار شناور را گرفت) */
.link-copy{
  appearance:none; background:none; border:0; cursor:pointer; padding:0;
  font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--text-3);
  transition:color .15s var(--ease);
}
.link-copy:hover{ color:var(--accent-2); }

.pos-block{ display:flex; flex-direction:column; gap:9px; }
.pos-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pos-grid{
  display:grid; grid-template-columns:repeat(3, 29px); grid-template-rows:repeat(3, 29px); gap:4px;
  padding:6px; border-radius:var(--r-md);
  background:var(--bg-2); border:1px solid var(--line);
}
.pos-cell{
  appearance:none; cursor:pointer; position:relative; border-radius:6px;
  background:var(--surface-3); border:1px solid var(--line);
  transition:background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
}
/* حالت فعال باید بی‌شک دیده شود — نه فقط یک نقطهٔ کوچک */
.pos-cell.active{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.pos-cell::after{
  content:''; position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%;
  background:var(--text-4); transform:translate(-50%,-50%);
  transition:background .14s var(--ease), box-shadow .14s var(--ease);
}
.pos-cell:hover{ background:var(--surface-4); border-color:var(--line-2); transform:translateY(-1px); }
.pos-cell.active::after{ background:var(--accent-ink); }
.pos-centers{ display:flex; flex-direction:column; gap:6px; }
.pos-center{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:var(--r-md);
  font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text-2);
  background:var(--surface-3); border:1px solid var(--line); white-space:nowrap;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pos-center .ic{ width:14px; height:14px; flex:none; }
.pos-center:hover{ background:var(--surface-4); color:var(--text); border-color:var(--line-2); }
.pos-center:active{ transform:translateY(1px); }

/* ---------- ۱۹. پاسخ‌گویی ---------- */
@media (max-width:1180px){
  body{ overflow:auto; }
  .app{ height:auto; min-height:100dvh; padding:12px; }
  .layout{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .rail{
    flex-direction:row; overflow-x:auto; padding:6px; gap:4px;
    position:sticky; top:0; z-index:20;
  }
  .rail-btn{ flex-direction:row; padding:7px 11px; gap:6px; }
  .rail-btn .ic{ width:16px; height:16px; }
  .rail-btn span{ font-size:var(--fs-xs); }
  .rail-btn.active::before{ inset:auto auto 1px 22%; width:56%; height:2px; }
  .rail-sep{ width:1px; height:auto; margin:4px 4px; }
  .sidebar{ overflow:visible; }
  .canvas-frame{ min-height:44vh; }
  .topbar{ position:sticky; top:0; z-index:30; }
}
@media (max-width:640px){
  .grid3{ grid-template-columns:repeat(2,1fr); }
  .preset-grid{ grid-template-columns:repeat(3,1fr); }
  .brand-text p{ display:none; }
  .brand-text h1{ font-size:var(--fs-xl); }
  .seg-label{ display:none; }
  .as-label{ display:none; }
  .canvas-frame{ padding:14px 12px; }
  .transport-row{ flex-wrap:wrap; justify-content:center; row-gap:8px; }
  .cf-hint{ max-width:calc(100% - 24px); font-size:10.5px; }
  .asp-btn{ padding:6px 8px; gap:6px; }
  .asp-meta i{ display:none; }
  .asp-shape{ height:19px; }
  .volume-box input[type=range]{ width:64px; }
}
@media (min-width:1181px){
  .canvas-frame{ min-height:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- wave strip / tour (added) ---------- */
.wave-strip{ width:100%; height:44px; display:block; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.tour-card{ max-width:min(440px,92vw); }
.tour-foot{ display:flex; align-items:center; gap:8px; }

/* پنل‌ها هنگام پرش خودکار زیر هدر چسبان پنهان نشوند */
.sidebar > details, .sidebar details[id]{ scroll-margin-top:82px; }

/* ---------- دسترسی‌پذیری لمسی: هدف‌های انگشتی بزرگ‌تر روی صفحه‌های لمسی ---------- */
@media (pointer:coarse){
  .chip{ min-height:38px; padding:8px 14px; font-size:var(--fs-sm); }
  .btn{ min-height:44px; padding:10px 15px; }
  .btn-sm{ min-height:38px; }
  .btn-icon{ width:42px; height:42px; }
  .preset-btn{ padding:9px; }
  .pos-grid{ grid-template-columns:repeat(3, 40px); grid-template-rows:repeat(3, 40px); }
  .cf-chip{ min-height:36px; padding:8px 13px; }
}
/* نوارهای اسلایدر لاغرند اما ناحیهٔ گرفتن باید انگشتی باشد */
input[type=range]{ padding:9px 0; height:22px; background-clip:content-box; }
input[type=range].seek{ height:22px; padding:7px 0; background-clip:content-box; }
/* وضعیت «الان» کنار برچسب شبکهٔ جای‌گذاری */
.pos-now{ font-weight:400; color:var(--text-3); }

/* روی صفحهٔ باریک، راهنمای بوم یک خط می‌شود تا ارتفاع نگیرد */
@media (max-width:640px){
  .frame-hint{ display:none; }
}

/* روی صفحه‌های کوتاه، زیرنویس هدر جمع می‌شود تا ارتفاع به بوم برسد */
@media (min-width:641px) and (max-height:820px){
  .brand-text p{ display:none; }
}
/* روی صفحهٔ باریک، پنجرهٔ اسکرول تودرتو لازم نیست */
@media (max-width:640px){
  #tplDetails{ overflow:hidden; }
  .tpl-filters{ position:static; padding:0; margin-top:0; background:none; }
}

/* اعلان بازیابی روی صفحهٔ باریک: پایین و تمام‌عرض */
@media (max-width:640px){
  .restore-banner{ inset-inline:12px; width:auto; bottom:12px; }
}
/* روی موبایل اعلان روی نوار پخش می‌افتد، پس توضیح بلند جمع می‌شود
   تا فقط عنوان و دو دکمه بماند (ارتفاع ~۱۳۶ → ~۹۶ پیکسل) */
@media (max-width:480px){
  .restore-banner{ padding:10px 12px 11px; gap:8px; }
  .restore-banner .rb-sub{ display:none; }
  .restore-banner .rb-title{ line-height:1.5; }
}

/* =========================== ۲۱. تجربهٔ موبایل — حس اپ اندروید =========================== */
/* داک پایین، کارت‌های ابعاد تمام‌عرض، bottom-sheet، توست بالای داک، لمس‌های بزرگ */
@media (max-width:640px){
  .app{ padding:calc(8px + env(safe-area-inset-top, 0px)) 10px calc(86px + env(safe-area-inset-bottom, 0px)); gap:9px; }

  /* هدر: جمع و آرام؛ نشانگر «بدون آپلود» روی گوشی حرف اضافه است */
  .topbar{ position:static; padding:8px 10px; border-radius:16px; gap:8px; }
  .topbar .live-badge{ display:none; }

  /* داکِ پایین — نوار ابزار شناور و همیشه در دسترس، با سایهٔ عمیق تا از پس‌زمینه جدا شود */
  .rail{
    position:fixed; top:auto;
    bottom:calc(9px + env(safe-area-inset-bottom, 0px));
    inset-inline:9px;
    z-index:80;
    flex-direction:row; gap:1px;
    padding:6px 3px;
    border-radius:24px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
    background:linear-gradient(180deg, rgba(24,27,33,.96), rgba(13,15,18,.96));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 22px 44px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
  }
  .rail::-webkit-scrollbar{ display:none; }
  .rail-btn{ flex:1 1 auto; min-width:0; max-width:none; min-height:52px; flex-direction:column; gap:3px; padding:7px 1px; border-radius:18px; }
  .rail-btn .ic{ width:20px; height:20px; }
  .rail-btn span{ font-size:10px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rail-btn:active{ transform:scale(.93); }
  /* نشانگر فعال مثل اپ‌های اندروید: قرص رنگ‌گرفته + خط باریک بالای دکمه */
  .rail-btn.active{ background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
  .rail-btn.active::before{
    content:''; position:absolute; top:2px; inset-inline-start:50%; transform:translateX(50%);
    width:18px; height:2.5px; border-radius:2px; background:var(--accent);
  }
  .rail-sep{ display:none; }

  /* بوم و پلیر: فشرده‌تر، نزدیک‌تر */
  .stage{ gap:9px; }
  .canvas-frame{ min-height:54vh; padding:12px 9px; border-radius:16px; }
  #mainCanvas{ box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); border-radius:7px; }
  .transport{ padding:8px 12px 10px; gap:7px; border-radius:15px; }
  .time-label{ font-size:var(--fs-md); }

  /* سوئیچ ابعاد: یک ردیف ۴ ستونهٔ جمع‌وجور با نام کامل هر نسبت (مربع، پرتره، استوری، افقی) */
  .aspect-switch{
    align-self:stretch;
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
    width:100%; padding:1px;
    background:transparent; border:0; box-shadow:none;
  }
  .as-label, .as-sep, .as-move{ display:none !important; } /* کنترل جابه‌جایی روی گوشی لازم نیست: لمس = انتخاب بعد کشیدن */
  .asp-btn{
    flex-direction:column; justify-content:center; gap:5px; text-align:center;
    min-height:62px; padding:7px 4px; border-radius:13px;
  }
  .asp-btn::after{ display:none; } /* نشانگر رادیویی حذف؛ خودِ قاب طلاییِ فعال کافی است */
  .asp-shape{ height:17px; }
  .asp-meta{ flex-direction:column; align-items:center; gap:1px; }
  .asp-meta i{ display:inline; font-size:9.5px; }
  .asp-meta b{ font-size:var(--fs-sm); }

  /* پنل‌ها: تنفس بیشتر، لمس راحت‌تر */
  details{ border-radius:16px; }
  .sec-head{ min-height:46px; padding:10px 12px; }
  .sec-body{ padding:12px; }
  details.subsec[data-acc] .sec-head .ic{ width:24px; height:24px; }

  /* مودال‌ها: بوتوم‌شیت اندرویدی با دستگیره بالا */
  .modal{ padding:6px; place-items:end center; }
  .modal-card{
    width:100%; max-width:none;
    border-radius:22px 22px 24px 24px;
    box-shadow:0 -18px 50px rgba(0,0,0,.55);
    animation:sheetUp .26s var(--ease);
  }
  .modal-card::before{
    content:''; display:block; width:44px; height:4px; margin:8px auto 0;
    border-radius:3px; background:var(--line-2);
  }
  .modal-body{ max-height:min(60dvh, 540px); overflow-y:auto; overscroll-behavior:contain; }
  .modal-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
  .tour-card{ max-width:none; }

  /* اعلان بازیابی و توست‌ها بالای داک */
  .restore-banner{ bottom:calc(86px + env(safe-area-inset-bottom, 0px)); z-index:90; }
  #toastWrap{ bottom:calc(80px + env(safe-area-inset-bottom, 0px)); width:min(400px, 94vw); }
  .sidebar{ overflow:visible; overscroll-behavior:contain; }
}
@keyframes sheetUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* لمس: ضربهٔ راهنما را خاموش کن + انگشت‌ها جای درست بگیرند */
@media (pointer:coarse){
  html{ -webkit-tap-highlight-color:transparent; }
  .rail-btn, .btn, .asp-btn, .sec-head, .chip, .preset-btn, .pos-cell, .cf-chip{ touch-action:manipulation; }
  input[type=range]::-webkit-slider-thumb{ width:22px; height:22px; }
  input[type=range].seek::-webkit-slider-thumb{ width:20px; height:20px; }
  input[type=range]::-moz-range-thumb{ width:22px; height:22px; }
  .rail-btn:active{ transform:scale(.93); }
}

/* =================================================================
   ۲۲ — داک ابعاد هدر + منوی همبرگری (فقط موبایل)
   ================================================================= */
.m-only{ display:none !important; }

@media (max-width:640px){
  .m-only{ display:inline-flex !important; }
  .m-hide{ display:none !important; }

  /* نوار ابعاد داخل صحنه حذف — جای خودش را در داک هدر و مودالش گرفت */
  .aspect-switch{ display:none !important; }

  /* هدر جمع‌وجورتر: برند کوچک، ابزار فشرده */
  .brand-mark{ width:32px; height:32px; border-radius:10px; }
  .brand-mark .ic{ width:17px; height:17px; }
  .brand-text h1{ font-size:15.5px; }
  .topbar{ gap:8px; }
  .topbar .brand p{ display:none; }
  .topbar-tools{ gap:7px; }

  /* داک ابعاد — دیوارک با شکل نسبت + نام ریز زیرش */
  #aspectDock{
    appearance:none; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    width:52px; min-height:46px; padding:5px 6px;
    border-radius:12px; cursor:pointer;
    color:var(--text);
    background:var(--surface-3); border:1px solid var(--line-2);
    transition:border-color .15s ease;
  }
  #aspectDock:active{ transform:scale(.94); border-color:var(--accent); }
  #aspectDock .dock-shape{
    width:auto; aspect-ratio:var(--ar, 1/1); height:17px; max-width:32px;
    border:1.7px solid var(--accent); border-radius:3.5px;
    background:linear-gradient(135deg, rgba(201,168,106,.38), rgba(232,68,63,.2));
    color:var(--accent);
  }
  #aspectDock .dock-label{
    font-size:9px; line-height:1; color:var(--text-3); white-space:nowrap;
  }

  /* مودال انتخاب ابعاد — چهار کارت بزرگِ ۲×۲ */
  .aspect-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .aspect-grid .asp-btn{
    flex-direction:column; justify-content:center; gap:6px; text-align:center;
    min-height:88px; padding:12px 8px; border-radius:16px;
  }
  .aspect-grid .asp-btn::after{ display:none; }
  .aspect-grid .asp-shape{ height:22px; opacity:1; }
  .aspect-grid .asp-meta{ flex-direction:column; align-items:center; gap:3px; }
  .aspect-grid .asp-meta b{ font-size:var(--fs-lg); }
  .aspect-grid .asp-meta i{ font-size:var(--fs-xs); }

  /* منوی همبرگری — ردیف‌های بزرگ لمس‌پذیر */
  .mob-menu-card .modal-body{ display:flex; flex-direction:column; gap:9px; }
  .menu-row{
    display:flex; align-items:center; gap:12px; width:100%;
    padding:13px 14px; border-radius:14px; text-align:right;
    background:var(--surface-3); border:1px solid var(--line);
    color:var(--text); cursor:pointer;
  }
  .menu-row .ic{ width:21px; height:21px; color:var(--accent); flex-shrink:0; }
  .menu-row span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .menu-row b{ font-size:var(--fs-md); font-weight:600; }
  .menu-row i{ font-size:var(--fs-xs); font-style:normal; color:var(--text-3); }
  .menu-row:active{ transform:scale(.985); }
}

/* =================================================================
   ۲۳ — پالایش نهایی موبایل: ریلِ چسبیده + پلیر تک‌خطی
   ================================================================= */
@media (max-width:640px){

  /* نوار ابزار پایین: کاملاً چسبیده به لبه، بدون فاصلهٔ کناری،
     فقط گوشه‌های بالا گرد، فضای داخلی ده درصد بازتر */
  .rail{
    inset-inline:0;
    bottom:0;
    padding:8px 6px calc(9px + env(safe-area-inset-bottom, 0px));
    border-radius:20px 20px 0 0;
    border:0;
    padding-top:9px;
    background:linear-gradient(180deg, #2e3540, #20252e);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -16px 40px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.10);
  }
  /* خط مویی طلایی بین‌موجی روی لبهٔ بالایی — امضای ظریف */
  .rail::before{
    content:''; position:absolute; top:0; inset-inline:0; height:1px;
    background:linear-gradient(90deg, transparent 6%, rgba(201,168,106,.5) 50%, transparent 94%);
  }
  .rail-btn{ min-height:54px; padding:8px 3px; border-radius:16px; gap:4px; color:var(--text-2); }
  .rail-btn .ic{ width:21px; height:21px; }
  .rail-btn span{ font-size:10.5px; }
  .rail-btn.active::before{ top:1px; }

  .app{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  #toastWrap{ bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }
  .restore-banner{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* ---- پلیر تک‌خطی: [پوشه | زمان۱۲۳۴۵۶۷۸۹۰ + نوار | پخش/پاوس] ---- */
  .transport{
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:9px;
    grid-auto-rows:min-content;
    padding:10px 12px 11px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(28,31,37,.92), rgba(16,18,22,.95));
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .tp-seek-row, .transport-row, .tp-side, .tp-side-start, .tp-side-end, .tp-center{ display:contents; }

  /* همهٔ حاشیه حذف: نمای موج، نام فایل و صدا — پخش/پاوس یک دکمه است (توقف کنارش نیست) */
  .wave-strip, .file-name, .volume-box{ display:none !important; }
  #playPauseLabel{ display:none !important; }

  /* تک‌دکمهٔ پخش/پاوس — چپ: آیکون و کار با هم عوض می‌شوند؛ موقع پخش حلقهٔ نفس‌کش */
  #playPauseBtn{
    grid-column:3; grid-row:1; justify-content:center;
    width:50px; height:50px; min-width:0; min-height:50px; padding:0;
    border-radius:50%; position:relative;
    box-shadow:0 6px 16px rgba(0,0,0,.42);
  }
  #playPauseBtn .ic{ width:22px; height:22px; margin:0; }
  #playPauseBtn:active{ transform:scale(.94); }
  body.is-playing #playPauseBtn::after{
    content:''; position:absolute; inset:-5px; border-radius:50%;
    border:2px solid rgba(224,178,92,.45);
    animation:playPulse 1.7s var(--ease) infinite;
  }
  @keyframes playPulse{
    0%{ transform:scale(.88); opacity:.7; }
    70%{ transform:scale(1.24); opacity:0; }
    100%{ transform:scale(1.24); opacity:0; }
  }

  /* وسط: نوار پیشرفت با زمان ۰ تا انتها زیرش */
  #seekRange{ grid-column:2; grid-row:1; min-width:0; height:13px; }
  #timeLabel{
    grid-column:2; grid-row:2;
    display:block; margin-top:-3px; text-align:center;
    font-size:10px; font-weight:600; letter-spacing:.6px;
    color:rgba(255,255,255,.55);
  }

  /* راست: انتخاب آهنگ — کاشی گِرد با آیکون پوشه */
  .tp-load{
    grid-column:1; grid-row:1; font-size:0; gap:0;
    width:46px; height:46px; min-height:46px; padding:0;
    border-radius:15px; justify-content:center;
    background:var(--surface-3); border:1px solid var(--line-2);
    color:var(--text-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .tp-load .ic{ width:20px; height:20px; margin:0; }
  .tp-load-text{ display:none; }
  .tp-load:active{ color:var(--accent); border-color:var(--accent-line); }
}

/* =================================================================
   ۲۵ — مینی‌بوم چسبان: ادیت لایه‌ها با پیش‌نمایشِ همیشه جلوی چشم (موبایل)
   وقتی تب کنترل‌های لایهٔ روی بوم (متن/زیرنویس/قاب/ویژوالایزر/کاور) باز است،
   بوم کوچک و چسبان در بالای صفحه می‌ماند و ابزارها زیرش جریان دارند
   ================================================================= */
/* دکمهٔ مینی ↔ بزرگ: پایه پنهان (دسکتاپ بی‌اثر) — در موبایل با مینی/بگ‌شده نمایش */
#canvasMiniToggle{
  display:none; position:absolute; top:12px; inset-inline-end:12px; z-index:6;
  width:34px; height:34px; border-radius:10px;
  align-items:center; justify-content:center; padding:0;
  color:var(--text-2); background:rgba(18,22,28,.74); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media (max-width:640px){
  /* در حالت خُرد، روکش خالی و راهنمای درگ فضا را می‌گیرند — پنهان */
  body.canvas-thumb #stageEmpty, body.canvas-thumb .cf-chip{ display:none !important; }

  /* چسبندگی بوم — دامنه‌اش به .app است (بوم موقتاً منتقل می‌شود)؛ پیش‌فرض نصفه، دکمهٔ گوشه خُردش می‌کند */
  body.canvas-attached .canvas-frame{
    position:sticky; top:8px; z-index:40;
    padding:8px; border-radius:14px; min-height:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.45);
  }
  body.canvas-attached .canvas-frame::after{ inset:5px; border-radius:10px; }
  body.canvas-thumb #mainCanvas{ width:auto; height:132px; }

  body.canvas-attached #canvasMiniToggle{ display:flex; }
  body.canvas-thumb #canvasMiniToggle .ic{ transform:rotate(90deg); }

  /* هر اسکرول داخلیِ پنل (فوکوس کادر متن و…) هم زیر بومِ چسبان پنهان نشود */
  body.canvas-attached .sidebar *{ scroll-margin-top:var(--stickH, 420px); }
}