/* «صدا و موسیقی» رویِ ویدیوهایِ ساخته‌شده (۱۴۰۵/۰۸/۱۰) — static/js/env_audiomix.js */
.amx{ --amx-a: var(--env-family-accent, #DC2626); width:min(720px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:22px;
  background: var(--env-paper, #fff); color: var(--env-ink, #1a1a1a); box-shadow:0 30px 90px rgba(0,0,0,.35); overflow:hidden; direction:rtl; }
.amx[open]{ display:flex; flex-direction:column; }
.amx::backdrop{ background: rgba(10,8,20,.6); }
.amx [hidden]{ display:none !important; }
.amx-h, .amx-f2{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--env-border, #e5e5e5); }
.amx-f2{ border-bottom:0; border-top:1px solid var(--env-border, #e5e5e5); justify-content:flex-start; flex-wrap:wrap; }
.amx-h b{ font-size:1rem; }
.amx-x{ width:34px; height:34px; border-radius:50%; border:1px solid var(--env-border, #e5e5e5); background: var(--env-paper, #fff); color: inherit; cursor:pointer; font-size:.9rem; }
.amx-b{ flex:1; min-height:0; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:14px; }
.amx-src{ display:flex; gap:12px; align-items:center; }
.amx-src video{ width:96px; height:96px; object-fit:cover; border-radius:12px; background:#000; flex:none; }
.amx-src div{ display:flex; flex-direction:column; gap:4px; font-size:.8rem; color: var(--env-ink-muted, #666); line-height:1.8; }
.amx-src b{ color: var(--env-ink, #1a1a1a); font-size:.88rem; }
.amx-sec{ display:flex; flex-direction:column; gap:10px; }
.amx-sec h4{ margin:0; font-size:.9rem; }
.amx-panel{ padding:12px; border-radius:16px; border:1px solid var(--env-border, #e5e5e5); background: var(--env-paper-2, var(--env-paper, #fafafa)); }
.amx-ph{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.amx-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.amx-chip{ font:inherit; cursor:pointer; padding:6px 12px; border-radius:999px; border:2px solid var(--env-border, #e5e5e5); background: var(--env-paper, #fff); color: inherit;
  font-size:.78rem; display:inline-flex; flex-direction:column; align-items:center; line-height:1.4; }
.amx-chip b{ font-weight:700; } .amx-chip small{ font-size:.66rem; color: var(--env-ink-muted, #666); }
.amx-chip[aria-checked="true"]{ border-color: var(--amx-a); background: color-mix(in srgb, var(--amx-a) 10%, var(--env-paper, #fff)); }
.amx-modes{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; }
.amx-mode{ border-radius:14px; padding:10px 6px; }
.amx-mode i{ font-style:normal; font-size:1.05rem; }
.amx-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr)); gap:8px; }
.amx-tracks{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); max-height:260px; overflow-y:auto; padding:2px; }
.amx-tracks .amx-hint{ grid-column:1 / -1; }
.amx-item{ display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:12px; border:2px solid var(--env-border, #e5e5e5); background: var(--env-paper, #fff); min-width:0; }
.amx-item[data-sel="true"]{ border-color: var(--amx-a); background: color-mix(in srgb, var(--amx-a) 9%, var(--env-paper, #fff)); }
.amx-pv{ flex:none; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer; background: color-mix(in srgb, var(--amx-a) 14%, var(--env-paper, #fff)); color: var(--amx-a); font-size:.72rem; padding-left:2px; }
.amx-pv.is-on{ background: var(--amx-a); color:#fff; }
.amx-pick{ flex:1; min-width:0; font:inherit; color: inherit; text-align:right; background:none; border:0; cursor:pointer; padding:2px; display:flex; flex-direction:column; gap:1px; }
.amx-pick b{ font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.amx-pick b small{ font-weight:500; font-size:.66rem; color: var(--env-ink-muted, #666); }
.amx-pick span{ font-size:.68rem; color: var(--env-ink-muted, #666); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.amx-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.amx-f{ display:flex; flex-direction:column; gap:6px; font-size:.78rem; font-weight:700; color: var(--env-ink-muted, #666); min-width:0; }
.amx-f small{ font-weight:500; } .amx-f small.amx-warn{ color:#c2410c; }
.amx textarea, .amx-write input{ font:inherit; font-weight:500; font-size:.88rem; color: var(--env-ink, #1a1a1a); background: var(--env-paper, #fff); border:1px solid var(--env-border, #e5e5e5);
  border-radius:12px; padding:9px 11px; width:100%; line-height:1.9; resize:vertical; }
.amx input[type=range]{ accent-color: var(--amx-a); }
.amx-write{ display:flex; flex-wrap:wrap; gap:8px; }
.amx-write input{ flex:1; min-width:200px; line-height:1.5; }
.amx-btn{ font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; padding:9px 14px; border-radius:12px; border:1px solid var(--env-border, #e5e5e5); background: var(--env-paper, #fff);
  color: inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.amx-btn--pri{ background: var(--amx-a); border-color: var(--amx-a); color:#fff; }
.amx-btn:disabled{ opacity:.6; cursor:wait; }
.amx-go{ padding:11px 22px; font-size:.92rem; }
.amx-hint{ font-size:.74rem; color: var(--env-ink-muted, #666); line-height:1.8; }
.amx-drop{ display:flex; align-items:center; justify-content:center; padding:12px; border-radius:12px; border:2px dashed var(--env-border, #e5e5e5); cursor:pointer; font-size:.82rem; font-weight:700; }
.amx-up{ display:flex; flex-direction:column; gap:6px; }
.amx-res{ padding:12px; border-radius:16px; border:1px solid var(--env-border, #e5e5e5); }
.amx-busy{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.85rem; }
.amx-busy i{ display:block; width:min(320px, 100%); height:8px; border-radius:99px; background: var(--env-border, #e5e5e5); overflow:hidden; }
.amx-busy em{ display:block; height:100%; width:0; background: var(--amx-a); transition: width .4s; }
.amx-done{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.amx-done video{ width:100%; max-height:46dvh; border-radius:14px; background:#000; }
.amx-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.amx-chip:focus-visible, .amx-pick:focus-visible, .amx-pv:focus-visible, .amx-btn:focus-visible, .amx-x:focus-visible{ outline:3px solid color-mix(in srgb, var(--amx-a) 55%, transparent); outline-offset:2px; }
@media (max-width: 520px){ .amx-modes{ grid-template-columns: 1fr; } .amx-mode{ flex-direction:row; justify-content:center; gap:8px; } }
@media (prefers-reduced-motion: reduce){ .amx-busy em{ transition:none; } }