/* iPhone Ringtone Creator — «ламповая» панель mp3_cutter в КОРПУСЕ iPHONE, по макетам
   .tmp/iphoneAudioCutter (desktop.png — ландшафт, mobile.png — портрет со статус-баром).
   Кремовый экран, терракотовая волна на «бумаге», олива+латунь, serif-типографика.
   КОРПУС ВЫРЕЗАН ИЗ МАКЕТОВ (решение владельца 2026-07-04): рамка — фото-кольцо через
   border-image (assets/img/frame-{desktop,mobile}.png: кроп телефона с запечёнными тенью и
   боковыми кнопками, интерьер экрана залит кремом), Dynamic Island с камерой — отдельные
   вырезки island-{desktop,mobile}.png. Слайсы = поле тени + радиус угла корпуса; ширина
   бордера задаёт «зум» кольца (бесель ≈ 11px десктоп / 9px мобайл). Остальное — CSS/SVG. */

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

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

    position: relative;
    background: var(--irng-face);
    /* кромка экрана, углы и тень запечены в фото-рамке (border-image шелла).
       Отрицательные вертикальные маргины съедают лишний запечённый крем кольца
       сверху/снизу (контент рисуется поверх него тем же цветом) — без больших пустот */
    margin: -26px 0;
    padding: .75rem 1rem 1rem;
    color: var(--irng-ink);
    font-family: var(--irng-serif);
    min-width: 0;
}

/* Обёртка страницы .tool-stage имеет overflow:auto — на мобайле она ОТРЕЗАЛА выступ
   корпуса за поля контейнера (шелл раздвинут отрицательными маргинами), срез шёл ровно
   по хром-канту («обрублено»). На этой странице выступ управляемый — разрешаем. */
.tool-stage { overflow: visible; }

/* ============ Корпус iPhone: фото-рамка из макета (border-image) ============
   Кольцо = кроп телефона из desktop.png (тень, металлический кант и кнопки на гранях
   запечены; экран внутри залит кремом --irng-face). Слайсы: тень-поле + радиус угла;
   border-width масштабирует кольцо (десктоп ≈ 0.36 от исходника). */
.irng-shell {
    position: relative;
    max-width: 1030px;
    margin: 0 auto;
    border: solid transparent;
    /* ассет предмасштабирован до 2x от вывода: браузер делит ровно пополам —
       углы гладкие, толщина чёрной линии и канта одинакова по периметру */
    border-width: 63px 62px 75px;
    border-image: url('img/frame-desktop-2x.png?v=3') 126 124 150 124 stretch;
}

/* Dynamic Island (вырезка с камерой): на десктопе — вертикально у левого края экрана.
   Живёт в кремовой зоне фото-кольца: позиция от края .irng наружу (бордер 62px). */
.irng__island {
    position: absolute;
    left: -36px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 86px;
    background: url('img/island-desktop-2x.png?v=3') center / contain no-repeat;
    pointer-events: none;
}

/* Статус-бар iPhone: только мобайл (портрет) */
.irng__status { display: none; }

/* Home-индикатор iOS (низ экрана): только мобайл */
.irng__homebar { display: none; }

/* Панель-«плитка» прибора (нейморфизм) */
.irng__player,
.irng__panel,
.irng__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;
}

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

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

/* ============ Шапка прибора ============ */
.irng__head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1rem;
}
.irng__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 0 0 auto;
}
/* Плитка-логотип с яблоком (по макету: кремовый квадрат, бронзовый глиф) */
.irng__apple {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(#fffdf5, var(--irng-apple-tile));
    border: 1px solid #e3d4b9;
    box-shadow: 2px 3px 8px var(--irng-shadow), inset 0 1px 0 #ffffff;
    color: var(--irng-apple-glyph);
    font-size: 1.9rem;
}
.irng--playing .irng__apple { color: var(--irng-terra); } /* яблоко теплеет при проигрывании */
.irng__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.irng__brand-name {
    font-family: var(--irng-serif);
    font-size: 1.35rem;
    color: var(--irng-title);
}

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

/* ============ Дроп-зона («бумага») ============ */
.irng__drop {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: 2.7rem 1rem 3rem;
    background: var(--irng-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;
}
.irng--dragover .irng__drop {
    border-color: var(--irng-terra);
    box-shadow: inset 0 2px 10px rgba(201, 80, 42, .22);
}
.irng__drop-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--irng-line);
    box-shadow: 3px 4px 9px var(--irng-shadow);
    color: var(--irng-terra);
    font-size: 2.1rem;
    margin-bottom: .6rem;
}
.irng__drop-title { font-size: 1.3rem; font-weight: 700; }
.irng__drop-or { color: var(--irng-muted); }
.irng__choose {
    margin-top: .35rem;
    min-width: 11rem;
    font-family: var(--irng-serif);
    font-size: 1.1rem;
    color: #f5f2e4;
    background: linear-gradient(#6c6f45, var(--irng-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);
}
.irng__choose:hover { filter: brightness(1.07); }
.irng__choose:active { filter: brightness(.95); }
.irng__drop-note {
    margin-top: .9rem;
    font-size: .85rem;
    color: var(--irng-muted);
}

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

/* ============ Волна на «бумаге» ============ */
.irng__waveframe {
    padding: .45rem .45rem .2rem;
}
.irng__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(--irng-paper);
    border: 1px solid #cabfa8;
    border-radius: 12px;
    box-shadow: inset 0 3px 9px rgba(150, 128, 96, .26);
}
.irng__wave {
    position: relative;
    height: 200px;
    min-width: 100%;
    touch-action: none;   /* тап-скраббинг иглы: жест не отдаём браузеру */
    cursor: pointer;
}
.irng__canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.irng__playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;               /* тоньше и чернее линий ручек — игла не путается с маркерами */
    background: #141414;
    pointer-events: none;
}

/* Ручки: оливковая линия на всю высоту + пилюля-грип со стрелкой + чип времени сверху */
.irng__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;              /* широкая тач-зона */
    transform: translateX(-50%);
    cursor: ew-resize;
    touch-action: none;
}
.irng__handle-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--irng-trimline);
}
.irng__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;
}
.irng__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(--irng-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, чтобы не наезжали. */
.irng__handle-l .irng__handle-chip { transform: translateX(0); margin-left: 6px; }
.irng__handle-r .irng__handle-chip { transform: translateX(-100%); margin-left: -6px; }
.irng__handle-l .irng__handle-chip.is-out { transform: translateX(-100%); margin-left: -6px; }
.irng__handle-r .irng__handle-chip.is-out { transform: translateX(0); margin-left: 6px; }
.irng__handle-chip.is-drop { top: 36px; }
.irng__handle:focus-visible .irng__handle-grip {
    box-shadow: 0 0 0 3px rgba(122, 123, 80, .35), 0 2px 6px rgba(60, 55, 40, .45);
}

/* Индикатор замка на волне: по центру выделения (left считает JS); клик = снять замок */
.irng__wave-lock {
    position: absolute;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #3a3c22;
    border-radius: 50%;
    background: linear-gradient(#75774c, #565738);
    color: #f1eedd;
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60, 55, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.irng__wave-lock:hover { filter: brightness(1.08); }

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

/* ============ Плеер-панель ============ */
.irng__player {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .9rem;
    padding: .7rem 1rem;
    flex-wrap: wrap;
}
.irng__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border: 3px solid var(--irng-brass);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #7c7e52, var(--irng-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);
}
.irng__play:hover { filter: brightness(1.08); }
.irng__play:active { transform: translateY(1px); }
.irng__play .bi { margin-left: 3px; }       /* оптическая центровка треугольника */
.irng__play .bi-stop-fill { margin-left: 0; }
.irng__iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--irng-line);
    border-radius: 50%;
    background: linear-gradient(#fdfaf4, #efe8db);
    color: var(--irng-ink);
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 2px 3px 6px var(--irng-shadow), -2px -2px 5px #ffffff;
}
.irng__iconbtn:hover { filter: brightness(1.03); }
.irng__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);
}
.irng__timecode {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.55rem;
    white-space: nowrap;
}
.irng__timecode-now { color: var(--irng-terra); }
.irng__timecode-sep { color: var(--irng-muted); margin: 0 .35rem; font-weight: 400; }
.irng__player-right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.irng__slider { min-width: 0; }
.irng__slider-cap {
    display: block;
    text-align: center;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--irng-muted);
    margin-bottom: .15rem;
}
.irng__slider-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--irng-muted);
}
.irng__slider-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--irng-line);
    border-radius: 50%;
    background: #fdfaf4;
    font-size: .9rem;
    line-height: 1;
    color: var(--irng-ink);
}
.irng__slider-ic { font-size: 1rem; }
/* Слайдеры с латунной ручкой */
.irng__range { width: 120px; }
.irng__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #ddd3c2;
    box-shadow: inset 0 1px 2px rgba(120, 100, 70, .4);
}
.irng__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(--irng-brass-dark));
    border: 1px solid #7d5d2c;
    box-shadow: 0 2px 4px rgba(90, 70, 40, .45);
}
.irng__range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #ddd3c2;
    box-shadow: inset 0 1px 2px rgba(120, 100, 70, .4);
}
.irng__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e5cd9c, var(--irng-brass-dark));
    border: 1px solid #7d5d2c;
    box-shadow: 0 2px 4px rgba(90, 70, 40, .45);
}

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

/* ============ Сетка секций ============ */
.irng__grid {
    display: grid;
    grid-template-columns: 1.38fr minmax(0, .92fr) 1.15fr;
    gap: .9rem;
    margin-top: .9rem;
    align-items: stretch;
}
.irng__panel {
    padding: .75rem .9rem .9rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.irng__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(--irng-olive-text);
    text-align: center;
}
.irng__sec-title::before,
.irng__sec-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--irng-line);
}
.irng__sec-title > span { display: inline-flex; align-items: center; gap: .45rem; }
/* Лампочка EFFECTS: тлеет, когда включён хоть один эффект */
.irng__lamp {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9cdb9;
    box-shadow: inset 0 1px 1px rgba(120, 100, 70, .5);
}
.irng--fx-on .irng__lamp {
    background: var(--irng-lamp-on);
    box-shadow: 0 0 6px 1px rgba(246, 163, 60, .75);
}

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

.irng__lenrow {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .9rem;
    margin-bottom: auto;   /* пара к auto сверху: блоки по центру, разрыв фиксированный */
}
.irng__lenrow .irng__tf-cap { margin: 0; }
.irng__len {
    flex: 1;
    text-align: center;
    font-size: 1.5rem;
    color: var(--irng-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;
}

/* Замок фиксации длины (ставится ТОЛЬКО здесь; горит и тут, и на волне) */
.irng__lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid #cfc5b2;
    border-radius: 10px;
    background: linear-gradient(#fdfaf4, #f1eadd);
    color: var(--irng-muted);
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(140, 120, 90, .2);
}
.irng__lock:hover { background: #fffdf8; }
.irng__lock[aria-pressed="true"] {
    background: linear-gradient(#75774c, #565738);
    border-color: #3a3c22;
    color: #f1eedd;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}

/* ---- EFFECTS: свитчи с надписью ON/OFF ---- */
.irng__switches {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: auto 0;        /* компактные строки, блок отцентрован по высоте панели */
}
.irng__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.irng__switch-lab { font-size: .9rem; white-space: nowrap; }
.irng__switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.irng__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;
}
.irng__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;
}
.irng__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;
}
.irng__switch input:checked + .irng__switch-track {
    background: linear-gradient(#75774c, #565738);
    border-color: #3a3c22;
}
.irng__switch input:checked + .irng__switch-track::before { left: 40px; }
.irng__switch input:checked + .irng__switch-track::after {
    content: attr(data-on);
    right: auto;
    left: 11px;
    color: #f1eedd;
}
.irng__switch input:focus-visible + .irng__switch-track {
    box-shadow: 0 0 0 3px rgba(122, 123, 80, .3), inset 0 2px 4px rgba(120, 100, 70, .25);
}

/* ---- EXPORT: формат фиксированный — описание M4R + длительность фрагмента без долей ---- */
.irng__exportinfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin: auto 0;        /* заполняет высоту панели без дыр (download прижат ниже) */
}
.irng__export-note {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    min-width: 0;
}
.irng__export-note .bi { color: var(--irng-apple-glyph); font-size: 1.15rem; }
.irng__export-len {
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--irng-terra);
    background: #fbf3e6;
    border: 1px solid #ecdfc9;
    border-radius: 10px;
    padding: .2rem .65rem;
    box-shadow: inset 0 1px 3px rgba(160, 120, 80, .14);
    font-variant-numeric: tabular-nums;
}

/* Download: терракотовая плита с винтами и катушкой */
.irng__download {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: .9rem;
    width: 100%;
    border: 1px solid var(--irng-dl-border);
    border-radius: 12px;
    background: linear-gradient(var(--irng-dl-top), var(--irng-dl-bot));
    color: #fdf6ec;
    font-family: var(--irng-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;
}
.irng__download:hover:not(:disabled) { filter: brightness(1.06); }
.irng__download:active:not(:disabled) { transform: translateY(1px); }
.irng__download:disabled { cursor: default; filter: saturate(.55) brightness(.96); }
/* латунные винты по краям */
.irng__download::before,
.irng__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%);
}
.irng__download::before { left: 11px; }
.irng__download::after { right: 11px; }
.irng__download .spinner-border { color: #fdf6ec; }
.irng__dl-size {
    display: block;
    text-align: center;
    margin-top: .45rem;
    font-size: .88rem;
    color: var(--irng-muted);
    min-height: 1.2rem;   /* место зарезервировано — строка не прыгает */
}

/* ============ Ошибки ============ */
.irng__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) {
    /* Ширина — на вес золота: корпус раздвинут на боковые поля страницы (гуттер 16px,
       4px оставляем), а контент съедает запечённый крем кольца по бокам (−14px) —
       внутренние отступы от беселя маленькие, но заметные (~14px) */
    .irng {
        margin: 0 -14px;
        padding: .4rem .5rem .8rem;
    }
    /* Портретная фото-рамка из mobile.png (кнопки на гранях запечены; ассет 2x) */
    .irng-shell {
        margin: 0 -12px;
        border-width: 37px 38px 41px 37px;
        border-image: url('img/frame-mobile-2x.png?v=4') 74 76 82 74 stretch;
    }
    /* Хром-кант на прямых участках боков запечён УСИЛЕННЫМ прямо в 2x-ассет
       (в исходнике он ~4px и при мобильном зуме глох до ~1px) — см. генерацию ассета */

    /* Реальный iPhone — вытянутый прямоугольник: пустой экран (idle) тянем к пропорциям
       телефона, дроп-зона занимает высоту; низ экрана обозначен home-индикатором */
    .irng[data-state="idle"] {
        display: flex;
        flex-direction: column;
        min-height: min(132vw, 620px);
    }
    .irng[data-state="idle"] .irng__drop { flex: 1 1 auto; justify-content: center; }
    .irng__homebar {
        display: block;
        width: 36%;
        max-width: 150px;
        height: 5px;
        border-radius: 3px;
        background: #1c1c1e;   /* как island (пипетка корпуса) */
        margin: 1rem auto 0;
        flex: 0 0 auto;
    }

    /* Island: вырезка с камерой, сверху по центру — в кремовой зоне кольца над контентом */
    .irng__island {
        left: 50%;
        top: -15px;
        transform: translateX(-50%);
        width: 76px;
        height: 22px;
        background-image: url('img/island-mobile-2x.png?v=3');
    }

    /* Статус-бар: время слева, значки справа — по бокам от island; подтянут вверх,
       на одну линию с island (в кремовую зону кольца) */
    .irng__status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 22px;
        padding: 0 .3rem;
        margin: -21px 0 .5rem;
        font-weight: 700;
        font-size: .95rem;
        color: var(--irng-title);
    }
    .irng__status-ics { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }

    .irng__head { flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
    .irng__brand { flex: 1; }
    /* На idle кнопки New file нет и в раскладке — заголовок бренда получает всю ширину */
    .irng[data-state="idle"] .irng__newfile { display: none; }
    .irng__file {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        padding-top: .3rem;
    }
    .irng[data-state="idle"] .irng__file { display: none; }
    .irng__file-ic { display: flex; }   /* на мобайле у имени файла плитка-иконка (как в макете) */
    .irng__file-body { text-align: left; }
    .irng__newfile { font-size: .85rem; padding: .4rem .6rem; gap: .35rem; }
    .irng__brand { gap: .5rem; }
    .irng__apple { width: 42px; height: 42px; border-radius: 11px; font-size: 1.5rem; }
    .irng__brand-name { font-size: 1rem; line-height: 1.2; }

    .irng__wave { height: 140px; }
    .irng__handle-grip { width: 20px; height: 48px; }

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

    /* Плеер компактный: [Play][Repeat][тайм-код] строкой, ZOOM+VOLUME одной строкой ниже.
       Экран внутри фото-рамки узкий — слайдеры резиновые, кнопки ужаты */
    .irng__player { padding: .6rem .6rem; gap: .45rem; }
    .irng__play { width: 46px; height: 46px; font-size: 1.5rem; }
    .irng__iconbtn { width: 37px; height: 37px; font-size: 1.1rem; }
    .irng__timecode { font-size: 1.05rem; margin-left: auto; }
    .irng__player-right {
        margin-left: 0;
        flex-basis: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: .6rem;
    }
    .irng__slider { flex: 1 1 0; min-width: 0; }
    .irng__slider-row { gap: .3rem; }
    .irng__slider-dot { width: 19px; height: 19px; flex: 0 0 auto; font-size: .8rem; }
    .irng__slider-ic { flex: 0 0 auto; }
    .irng__range { width: 100%; min-width: 46px; }

    /* TRIM и EFFECTS спрятаны за Advanced; юзер видит волну, плеер и сразу EXPORT */
    .irng__advanced {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        width: 100%;
        margin-top: .7rem;
        font-family: var(--irng-serif);
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--irng-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;
    }
    .irng__advanced .bi { transition: transform .15s; }
    .irng--adv-open .irng__advanced .bi { transform: rotate(180deg); }
    .irng__panel--adv { display: none; }
    .irng--adv-open .irng__panel--adv { display: flex; }

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

.irng__lenrow { padding-top: .7rem; }
    .irng__download { font-size: 1.2rem; padding: .6rem 2.2rem; }
}
@media (max-width: 380px) {
    .irng__tf-group { flex: 1; }
    .irng__timefield { flex: 1 1 46%; }
    .irng__time-input { width: 100%; }
    .irng__timecode { font-size: 1rem; }
}