/* Cut MP3 — ЛАМПОВЫЙ дизайн (v3) по макетам .tmp/newMp3CutterDesign: аналоговый прибор.
   Кремовая панель-нейморфизм, терракотовая волна на «бумаге», олива+латунь, serif-типографика.
   Цвета сняты пипеткой с desktop.png. Всё нарисовано CSS/SVG — растр из макета не вырезался.
   Прошлые дизайны: ветки mp3cutter-retro-design (v1), mp3cutter-modern-design (v2). */

.mcut {
    /* --- Токены дизайна (пипетка из макета) --- */
    --mcut-face:        #f6f2ed;               /* лицевая панель прибора */
    --mcut-face-hi:     #fdfbf7;               /* блик панелей */
    --mcut-paper:       #f5eee3;               /* «бумага» волны */
    --mcut-line:        #d9d0c0;               /* тонкие рамки */
    --mcut-shadow:      rgba(168, 148, 116, .28);
    --mcut-ink:         #3c372e;               /* основной текст */
    --mcut-muted:       #8c8474;               /* приглушённый текст */
    --mcut-terra:       #c9502a;               /* терракота: волна, тайм-код, Length */
    --mcut-terra-dim:   rgba(201, 80, 42, .34);/* волна вне выделения */
    --mcut-olive:       #5a5d3a;               /* олива: play, пилюли ручек, сегмент */
    --mcut-olive-dark:  #3f4226;
    --mcut-olive-text:  #5d5d32;               /* заголовки секций */
    --mcut-trimline:    #74754c;               /* вертикальные линии ручек */
    --mcut-brass:       #c4a26c;               /* латунь ручек слайдеров */
    --mcut-brass-dark:  #a17838;
    --mcut-dl-top:      #cd6a3c;               /* терракотовая Download */
    --mcut-dl-bot:      #ad4f26;
    --mcut-dl-border:   #8f3d1e;
    --mcut-lamp-on:     #f6a33c;               /* янтарная лампочка EFFECTS */
    --mcut-serif:       'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; /* lining-цифры: «3» не съезжает вниз */
    --mcut-script:      'Segoe Script', 'Brush Script MT', cursive;

    /* алиасы для отрисовки волны в JS (cssVar) */
    --mcut-wave-in:     var(--mcut-terra);
    --mcut-wave-out:    var(--mcut-terra-dim);
    --mcut-accent-soft: transparent;           /* вуаль выделения в ламповом виде не нужна */

    max-width: 900px;
    margin: 0 auto;
    background: var(--mcut-face);
    border: 1px solid #cfc3ae;
    border-radius: 26px;
    box-shadow:
        0 18px 44px rgba(140, 118, 86, .34),
        0 4px 12px rgba(140, 118, 86, .22),
        inset 0 1px 0 #ffffff;
    padding: 1.15rem 1.25rem 1.3rem;
    color: var(--mcut-ink);
    font-family: var(--mcut-serif);
}

/* Панель-«плитка» прибора (нейморфизм) */
.mcut__player,
.mcut__panel,
.mcut__waveframe {
    background: linear-gradient(#faf6f0, #f1eadf);
    border: 1px solid #d9cdb8;
    border-radius: 16px;
    box-shadow:
        6px 8px 16px rgba(150, 128, 96, .32),
        2px 3px 5px rgba(150, 128, 96, .18),
        -3px -3px 8px #ffffff,
        inset 0 1px 0 #ffffff;
}

/* ============ Переключение состояний ============ */
.mcut__drop,
.mcut__loading,
.mcut__editor { display: none; }
.mcut[data-state="idle"]       .mcut__drop    { display: flex; }
.mcut[data-state="uploading"]  .mcut__loading,
.mcut[data-state="processing"] .mcut__loading { display: block; }
.mcut[data-state="editor"]     .mcut__editor  { display: block; }

/* Файл-строка и New file видны только с файлом */
.mcut[data-state="idle"] .mcut__file { visibility: hidden; }
.mcut[data-state="idle"] .mcut__newfile { visibility: hidden; }

/* ============ Шапка прибора ============ */
.mcut__head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1rem;
}
.mcut__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 0 0 auto;
}
.mcut__vu { width: 74px; height: 55px; filter: drop-shadow(0 2px 3px rgba(74, 52, 35, .35)); }
.mcut__vu-needle {
    transform-origin: 42px 40px;
    transform: rotate(0deg);
}
.mcut--playing .mcut__vu-needle { animation: mcut-vu 1.15s ease-in-out infinite alternate; }
@keyframes mcut-vu {
    0%   { transform: rotate(6deg); }
    35%  { transform: rotate(38deg); }
    60%  { transform: rotate(22deg); }
    100% { transform: rotate(52deg); }
}
.mcut--playing .mcut__vu-lamp { fill: #e4552e; filter: drop-shadow(0 0 2.5px rgba(228, 85, 46, .9)); }
.mcut__brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.mcut__brand-name {
    font-family: var(--mcut-script);
    font-size: 1.5rem;
    color: var(--mcut-olive-text);
}
.mcut__brand-sub {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mcut-terra);
    margin-top: .15rem;
}

.mcut__file {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1;
    min-width: 0;
    justify-content: center;
}
.mcut__file-ic {
    display: none; /* на десктопе имя по центру без плитки-иконки (как в макете) */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mcut-paper);
    border: 1px solid var(--mcut-line);
    color: var(--mcut-muted);
    font-size: 1.25rem;
    flex: 0 0 auto;
}
.mcut__file-body { min-width: 0; text-align: center; }
.mcut__file-name {
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcut__file-meta {
    font-size: .85rem;
    color: var(--mcut-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcut__newfile {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    font-family: var(--mcut-serif);
    font-size: 1rem;
    color: var(--mcut-ink);
    background: linear-gradient(#fbf8f2, #efe8db);
    border: 1px solid var(--mcut-line);
    border-radius: 12px;
    padding: .55rem 1.1rem;
    box-shadow: 2px 3px 7px var(--mcut-shadow), -2px -2px 5px #ffffff;
    cursor: pointer;
}
.mcut__newfile:hover { background: linear-gradient(#fffdf9, #f3ecdf); }
.mcut__newfile .bi { color: var(--mcut-olive-text); }

/* ============ Дроп-зона («бумага») ============ */
.mcut__drop {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: 2.7rem 1rem 3rem;
    background: var(--mcut-paper);
    border: 1px solid #cec2ab;
    border-radius: 16px;
    box-shadow: inset 0 3px 10px rgba(150, 128, 96, .24);
    transition: box-shadow .15s, border-color .15s;
}
.mcut--dragover .mcut__drop {
    border-color: var(--mcut-terra);
    box-shadow: inset 0 2px 10px rgba(201, 80, 42, .22);
}
.mcut__drop-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--mcut-line);
    box-shadow: 3px 4px 9px var(--mcut-shadow);
    color: var(--mcut-terra);
    font-size: 2.1rem;
    margin-bottom: .6rem;
}
.mcut__drop-title { font-size: 1.3rem; font-weight: 700; }
.mcut__drop-or { color: var(--mcut-muted); }
.mcut__choose {
    margin-top: .35rem;
    min-width: 11rem;
    font-family: var(--mcut-serif);
    font-size: 1.1rem;
    color: #f5f2e4;
    background: linear-gradient(#6c6f45, var(--mcut-olive-dark));
    border: 1px solid #33351c;
    border-radius: 12px;
    padding: .55rem 1.4rem;
    box-shadow: 0 3px 8px rgba(63, 66, 38, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.mcut__choose:hover { filter: brightness(1.07); }
.mcut__choose:active { filter: brightness(.95); }
.mcut__drop-note {
    margin-top: .9rem;
    font-size: .85rem;
    color: var(--mcut-muted);
}

/* ============ Загрузка ============ */
.mcut__loading {
    padding: 3.4rem 1.5rem 3.6rem;
    text-align: center;
    background: var(--mcut-paper);
    border: 1px solid #cec2ab;
    border-radius: 16px;
    box-shadow: inset 0 3px 10px rgba(150, 128, 96, .24);
}
.mcut__loading-name {
    font-weight: 700;
    margin-bottom: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcut__progressbar {
    position: relative;
    height: 10px;
    max-width: 460px;
    margin: 0 auto;
    background: #e9e1d4;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(120, 100, 70, .35);
    overflow: hidden;
}
.mcut__progressfill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 6px;
    background: linear-gradient(var(--mcut-terra), #a94320);
    transition: width .15s linear;
}
.mcut__progressbar.is-indeterminate .mcut__progressfill {
    width: 30%;
    animation: mcut-slide 1.1s ease-in-out infinite alternate;
}
@keyframes mcut-slide {
    from { margin-left: 0; }
    to   { margin-left: 70%; }
}
.mcut__loading-cap {
    margin-top: .9rem;
    color: var(--mcut-muted);
    display: flex;
    justify-content: center;
    gap: .5rem;
}

/* ============ Волна на «бумаге» ============ */
.mcut__waveframe {
    padding: .45rem .45rem .2rem;
}
.mcut__wave-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 16px;   /* поля «бумаги»: пилюли ручек на краях видны целиком */
    background:
        repeating-linear-gradient(90deg, rgba(140, 120, 90, .045) 0 1px, transparent 1px 56px),
        var(--mcut-paper);
    border: 1px solid #cabfa8;
    border-radius: 12px;
    box-shadow: inset 0 3px 9px rgba(150, 128, 96, .26);
}
.mcut__wave {
    position: relative;
    height: 200px;
    min-width: 100%;
    touch-action: none;   /* тап-скраббинг иглы: жест не отдаём браузеру */
    cursor: pointer;
}
.mcut__canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.mcut__playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;               /* тоньше и чернее линий ручек — игла не путается с маркерами */
    background: #141414;
    pointer-events: none;
}

/* Ручки: оливковая линия на всю высоту + пилюля-грип со стрелкой + чип времени сверху */
.mcut__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;              /* широкая тач-зона */
    transform: translateX(-50%);
    cursor: ew-resize;
    touch-action: none;
}
.mcut__handle-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--mcut-trimline);
}
.mcut__handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 56px;
    border-radius: 11px;
    background: linear-gradient(160deg, #7a7b50, #4c4e2e);
    border: 1px solid #3a3c22;
    box-shadow: 0 2px 6px rgba(60, 55, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #f1eedd;
    font-size: 1.25rem;
}
.mcut__handle-chip {
    position: absolute;
    top: 7px;
    left: 50%;
    background: #fbf7ee;
    border: 1px solid #c9beac;
    box-shadow: 0 2px 5px rgba(140, 120, 90, .3);
    color: var(--mcut-ink);
    font-size: .8rem;
    line-height: 1;
    padding: .3rem .5rem;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
/* Чипы смотрят ВНУТРЬ выделения — у краёв волны не обрезаются скролл-контейнером.
   При сближении ручек JS (placeChips) разводит их классами is-out/is-drop, чтобы не наезжали. */
.mcut__handle-l .mcut__handle-chip { transform: translateX(0); margin-left: 6px; }
.mcut__handle-r .mcut__handle-chip { transform: translateX(-100%); margin-left: -6px; }
.mcut__handle-l .mcut__handle-chip.is-out { transform: translateX(-100%); margin-left: -6px; }
.mcut__handle-r .mcut__handle-chip.is-out { transform: translateX(0); margin-left: 6px; }
.mcut__handle-chip.is-drop { top: 36px; }
.mcut__handle:focus-visible .mcut__handle-grip {
    box-shadow: 0 0 0 3px rgba(122, 123, 80, .35), 0 2px 6px rgba(60, 55, 40, .45);
}

/* Линейка времени под волной (внутри бумажной рамки) */
.mcut__ruler {
    position: relative;
    height: 1.15rem;
    margin: .25rem 16px 0;
    overflow: hidden;
}
.mcut__ruler span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: .74rem;
    color: var(--mcut-muted);
    font-variant-numeric: tabular-nums;
}
.mcut__ruler span::before {
    content: '';
    position: absolute;
    top: -0.3rem;
    left: 50%;
    width: 1px;
    height: .25rem;
    background: var(--mcut-muted);
}
.mcut__ruler span:first-child { transform: none; }

/* ============ Плеер-панель ============ */
.mcut__player {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .9rem;
    padding: .7rem 1rem;
    flex-wrap: wrap;
}
.mcut__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border: 3px solid var(--mcut-brass);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #7c7e52, var(--mcut-olive-dark));
    color: #f1eedd;
    font-size: 1.9rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(63, 66, 38, .45), inset 0 2px 3px rgba(255, 255, 255, .25);
}
.mcut__play:hover { filter: brightness(1.08); }
.mcut__play:active { transform: translateY(1px); }
.mcut__play .bi { margin-left: 3px; }       /* оптическая центровка треугольника */
.mcut__play .bi-stop-fill { margin-left: 0; }
.mcut__iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mcut-line);
    border-radius: 50%;
    background: linear-gradient(#fdfaf4, #efe8db);
    color: var(--mcut-ink);
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 2px 3px 6px var(--mcut-shadow), -2px -2px 5px #ffffff;
}
.mcut__iconbtn:hover { filter: brightness(1.03); }
.mcut__iconbtn[aria-pressed="true"] {
    background: linear-gradient(#7a7b50, #565738);
    border-color: #3a3c22;
    color: #f1eedd;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}
.mcut__timecode {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.55rem;
    white-space: nowrap;
}
.mcut__timecode-now { color: var(--mcut-terra); }
.mcut__timecode-sep { color: var(--mcut-muted); margin: 0 .35rem; font-weight: 400; }
.mcut__player-right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.mcut__slider { min-width: 0; }
.mcut__slider-cap {
    display: block;
    text-align: center;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mcut-muted);
    margin-bottom: .15rem;
}
.mcut__slider-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--mcut-muted);
}
.mcut__slider-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--mcut-line);
    border-radius: 50%;
    background: #fdfaf4;
    font-size: .9rem;
    line-height: 1;
    color: var(--mcut-ink);
}
.mcut__slider-ic { font-size: 1rem; }
/* Слайдеры с латунной ручкой */
.mcut__range { width: 120px; }
.mcut__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #ddd3c2;
    box-shadow: inset 0 1px 2px rgba(120, 100, 70, .4);
}
.mcut__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e5cd9c, var(--mcut-brass-dark));
    border: 1px solid #7d5d2c;
    box-shadow: 0 2px 4px rgba(90, 70, 40, .45);
}
.mcut__range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #ddd3c2;
    box-shadow: inset 0 1px 2px rgba(120, 100, 70, .4);
}
.mcut__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e5cd9c, var(--mcut-brass-dark));
    border: 1px solid #7d5d2c;
    box-shadow: 0 2px 4px rgba(90, 70, 40, .45);
}

/* Advanced-коллапс (только мобайл) */
.mcut__advanced { display: none; }

/* ============ Сетка секций ============ */
.mcut__grid {
    display: grid;
    grid-template-columns: 1.38fr minmax(0, .92fr) 1.15fr;
    gap: .9rem;
    margin-top: .9rem;
    align-items: stretch;
}
.mcut__panel {
    padding: .75rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mcut__sec-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .8rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mcut-olive-text);
    text-align: center;
}
.mcut__sec-title::before,
.mcut__sec-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mcut-line);
}
.mcut__sec-title > span { display: inline-flex; align-items: center; gap: .45rem; }
/* Лампочка EFFECTS: тлеет, когда включён хоть один эффект */
.mcut__lamp {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9cdb9;
    box-shadow: inset 0 1px 1px rgba(120, 100, 70, .5);
}
.mcut--fx-on .mcut__lamp {
    background: var(--mcut-lamp-on);
    box-shadow: 0 0 6px 1px rgba(246, 163, 60, .75);
}

/* ---- TRIM ---- */
.mcut__trimfields {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: auto;     /* вместе с auto у mcut__lenrow центрирует контент — без больших дыр */
}
.mcut__timefield { min-width: 0; }
.mcut__tf-cap {
    display: block;
    font-size: .82rem;
    color: var(--mcut-muted);
    margin-bottom: .25rem;
}
.mcut__tf-group {
    display: flex;
    border: 1px solid #cfc5b2;
    border-radius: 9px;
    overflow: hidden;
    background: #fbf8f2;
    box-shadow: inset 0 1px 3px rgba(140, 120, 90, .16);
}
.mcut__tf-btn {
    width: 1.8rem;
    border: 0;
    border-right: 1px solid #e2d9c8;
    background: linear-gradient(#fdfaf4, #f1eadd);
    color: var(--mcut-ink);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--mcut-serif);
}
.mcut__tf-btn:last-child { border-right: 0; border-left: 1px solid #e2d9c8; }
.mcut__tf-btn:hover { background: #fffdf8; }
.mcut__time-input {
    width: 5rem;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--mcut-serif);
    font-weight: 700;
    font-size: .92rem;
    color: var(--mcut-ink);
    font-variant-numeric: tabular-nums;
    padding: .42rem .1rem;
}
.mcut__time-input:focus { outline: none; background: #fffdf6; }
.mcut__presets {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .9rem;
}
.mcut__presets .mcut__tf-cap { margin: 0; }
.mcut__preset-btns { display: flex; gap: .45rem; flex-wrap: wrap; }
.mcut__preset {
    border: 1px solid #cfc5b2;
    border-radius: 9px;
    background: linear-gradient(#fdfaf4, #f1eadd);
    color: var(--mcut-ink);
    font-family: var(--mcut-serif);
    font-size: .85rem;
    padding: .28rem .7rem;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(140, 120, 90, .2);
}
.mcut__preset:hover { background: #fffdf8; }
.mcut__preset:active { box-shadow: inset 0 1px 3px rgba(140, 120, 90, .3); }

.mcut__lenrow {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .9rem;
    margin-bottom: auto;   /* пара к auto сверху: блоки по центру, разрыв фиксированный */
}
.mcut__lenrow .mcut__tf-cap { margin: 0; }
.mcut__len {
    flex: 1;
    text-align: center;
    font-size: 1.5rem;
    color: var(--mcut-terra);
    background: #fbf3e6;
    border: 1px solid #ecdfc9;
    border-radius: 10px;
    padding: .35rem .8rem;
    box-shadow: inset 0 1px 3px rgba(160, 120, 80, .14);
    font-variant-numeric: tabular-nums;
}

/* ---- EFFECTS: свитчи с надписью ON/OFF ---- */
.mcut__switches {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: auto 0;        /* компактные строки, блок отцентрован по высоте панели */
}
.mcut__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.mcut__switch-lab { font-size: .9rem; white-space: nowrap; }
.mcut__switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.mcut__switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 66px;
    height: 28px;
    border-radius: 14px;
    background: #e9e1d4;
    border: 1px solid #d5cab5;
    box-shadow: inset 0 2px 4px rgba(120, 100, 70, .25);
    transition: background .15s;
}
.mcut__switch-track::before {          /* ручка */
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(#ffffff, #ece5d6);
    border: 1px solid #cfc5b2;
    box-shadow: 0 1px 3px rgba(90, 75, 50, .35);
    transition: left .15s;
}
.mcut__switch-track::after {           /* надпись OFF/ON */
    content: attr(data-off);
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #9a917f;
}
.mcut__switch input:checked + .mcut__switch-track {
    background: linear-gradient(#75774c, #565738);
    border-color: #3a3c22;
}
.mcut__switch input:checked + .mcut__switch-track::before { left: 40px; }
.mcut__switch input:checked + .mcut__switch-track::after {
    content: attr(data-on);
    right: auto;
    left: 11px;
    color: #f1eedd;
}
.mcut__switch input:focus-visible + .mcut__switch-track {
    box-shadow: 0 0 0 3px rgba(122, 123, 80, .3), inset 0 2px 4px rgba(120, 100, 70, .25);
}

/* ---- EXPORT ---- */
.mcut__format {
    display: flex;
    border: 1px solid #cfc5b2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(140, 120, 90, .14);
}
.mcut__format-btn {
    flex: 1 1 0;
    border: 0;
    background: #f4eee2;
    color: var(--mcut-ink);
    font-family: var(--mcut-serif);
    font-size: .95rem;
    padding: .5rem .4rem;
    cursor: pointer;
    min-width: 0;
    white-space: nowrap;
}
.mcut__format-btn + .mcut__format-btn { border-left: 1px solid #cfc5b2; }
.mcut__format-btn.active {
    background: linear-gradient(#75774c, #565738);
    color: #f1eedd;
    pointer-events: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
}
.mcut__bitrate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin: .8rem 0 0;
}
.mcut__bitrate-row .mcut__tf-cap { margin: 0; font-size: .95rem; color: var(--mcut-ink); }
.mcut__bitrate {
    width: auto;
    font-family: var(--mcut-serif);
    background-color: #fbf8f2;
    border-color: #cfc5b2;
    color: var(--mcut-ink);
}

/* Download: терракотовая плита с винтами и катушкой */
.mcut__download {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: .9rem;
    width: 100%;
    border: 1px solid var(--mcut-dl-border);
    border-radius: 12px;
    background: linear-gradient(var(--mcut-dl-top), var(--mcut-dl-bot));
    color: #fdf6ec;
    font-family: var(--mcut-serif);
    font-size: 1.12rem;
    font-weight: 700;
    padding: .65rem 1.9rem;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    box-shadow: 0 4px 10px rgba(143, 61, 30, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
    cursor: pointer;
}
.mcut__download:hover:not(:disabled) { filter: brightness(1.06); }
.mcut__download:active:not(:disabled) { transform: translateY(1px); }
.mcut__download:disabled { cursor: default; filter: saturate(.55) brightness(.96); }
/* латунные винты по краям */
.mcut__download::before,
.mcut__download::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background:
        linear-gradient(35deg, transparent 44%, rgba(72, 50, 20, .85) 45%, rgba(72, 50, 20, .85) 55%, transparent 56%),
        radial-gradient(circle at 34% 30%, #e8cf9e, #a1783f);
    border: 1px solid #6f5224;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    transform: translateY(-50%);
}
.mcut__download::before { left: 11px; }
.mcut__download::after { right: 11px; }
.mcut__download .spinner-border { color: #fdf6ec; }
.mcut__dl-size {
    display: block;
    text-align: center;
    margin-top: .45rem;
    font-size: .88rem;
    color: var(--mcut-muted);
    min-height: 1.2rem;   /* место зарезервировано — строка не прыгает */
}

/* ============ Ошибки ============ */
.mcut__error {
    min-height: 1.4rem;
    margin: .8rem 0 0;
    color: var(--tls-danger);
    text-align: center;
}

/* Блок «How it works» переехал в общий блок движка (templates/partials/tool_explain.php). */

/* ============ Мобайл (по mobile.png: всё в столбик, файл-строка отдельно) ============ */
@media (max-width: 767px) {
    .mcut { padding: .9rem .8rem 1rem; border-radius: 20px; }
    .mcut__head { flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
    .mcut__brand { flex: 1; }
    .mcut__file {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        padding-top: .3rem;
    }
    .mcut[data-state="idle"] .mcut__file { display: none; }
    .mcut__file-ic { display: flex; }   /* на мобайле у имени файла плитка-иконка (как в макете) */
    .mcut__file-body { text-align: left; }
    .mcut__newfile { font-size: .9rem; padding: .45rem .8rem; }
    .mcut__vu { width: 60px; height: 45px; }
    .mcut__brand-name { font-size: 1.25rem; }

    .mcut__wave { height: 140px; }
    .mcut__handle-grip { width: 20px; height: 48px; }

    /* На мобайле drag&drop нет — только кнопка выбора файла */
    .mcut__drop-title, .mcut__drop-or { display: none; }
    .mcut__drop { padding-top: 1.4rem; gap: .2rem; }

    /* Плеер компактный: [Play][Repeat][тайм-код] строкой, ZOOM+VOLUME одной строкой ниже */
    .mcut__player { padding: .6rem .7rem; gap: .55rem; }
    .mcut__play { width: 50px; height: 50px; font-size: 1.6rem; }
    .mcut__iconbtn { width: 40px; height: 40px; }
    .mcut__timecode { font-size: 1.15rem; margin-left: auto; }
    .mcut__player-right {
        margin-left: 0;
        flex-basis: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: .7rem;
    }
    .mcut__slider-row { gap: .3rem; }
    .mcut__slider-dot { width: 19px; height: 19px; font-size: .8rem; }
    .mcut__range { width: 92px; }

    /* TRIM и EFFECTS спрятаны за Advanced; юзер видит волну, плеер и сразу EXPORT */
    .mcut__advanced {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        width: 100%;
        margin-top: .7rem;
        font-family: var(--mcut-serif);
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--mcut-olive-text);
        background: linear-gradient(#faf6f0, #f1eadf);
        border: 1px solid #d9cdb8;
        border-radius: 12px;
        padding: .55rem .8rem;
        box-shadow: 3px 4px 9px rgba(150, 128, 96, .25), -2px -2px 6px #ffffff;
        cursor: pointer;
    }
    .mcut__advanced .bi { transition: transform .15s; }
    .mcut--adv-open .mcut__advanced .bi { transform: rotate(180deg); }
    .mcut__panel--adv { display: none; }
    .mcut--adv-open .mcut__panel--adv { display: flex; }

    .mcut__grid { grid-template-columns: 1fr; gap: .7rem; margin-top: .7rem; }
    .mcut__trimfields { gap: .7rem; }
    .mcut__presets {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .9rem;
}
.mcut__presets .mcut__tf-cap { margin: 0; }
.mcut__preset-btns { display: flex; gap: .45rem; flex-wrap: wrap; }
.mcut__preset {
    border: 1px solid #cfc5b2;
    border-radius: 9px;
    background: linear-gradient(#fdfaf4, #f1eadd);
    color: var(--mcut-ink);
    font-family: var(--mcut-serif);
    font-size: .85rem;
    padding: .28rem .7rem;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(140, 120, 90, .2);
}
.mcut__preset:hover { background: #fffdf8; }
.mcut__preset:active { box-shadow: inset 0 1px 3px rgba(140, 120, 90, .3); }

.mcut__lenrow { padding-top: .7rem; }
    .mcut__download { font-size: 1.2rem; padding: .6rem 2.2rem; }
}
@media (max-width: 380px) {
    .mcut__tf-group { flex: 1; }
    .mcut__timefield { flex: 1 1 46%; }
    .mcut__time-input { width: 100%; }
    .mcut__range { width: 88px; }
    .mcut__timecode { font-size: 1.15rem; }
}