/* ═══════════════════════════════════════════════════════
   🎬 Нарезки Завод — Мобильное PWA (стили)
   ═══════════════════════════════════════════════════════ */

:root {
    --bg: #0f0f14;
    --bg2: #1a1a24;
    --card: #22222e;
    --hover: #2a2a38;
    --accent: #7c5cfc;
    --accent2: #9b7ffd;
    --glow: rgba(124,92,252,.3);
    --ok: #4ade80;
    --warn: #fbbf24;
    --err: #ef4444;
    --txt: #e8e8f0;
    --txt2: #9898b0;
    --muted: #5a5a70;
    --border: #2e2e3e;
    --r: 12px;
    --rs: 8px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; -webkit-text-size-adjust:100%; }
body {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background: var(--bg);
    color: var(--txt);
    min-height: 100%;
    padding-bottom: calc(64px + var(--safe-b));
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    overflow-x: hidden;
}

/* ─── Таб-бар (внизу) ─── */
.tab-bar {
    position: fixed; bottom:0; left:0; right:0;
    display: flex;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding-bottom: var(--safe-b);
    z-index: 100;
}
.tab {
    flex:1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 8px 0 6px;
    border: none; background: none;
    color: var(--muted);
    font-size: 10px; font-weight: 600;
    cursor: pointer;
    transition: color .2s;
}
.tab.active { color: var(--accent); }
.tab-icon { font-size: 20px; line-height:1; }
.tab-label { font-size: 10px; }

/* ─── Страницы ─── */
.page { display:none; padding: 12px 12px 24px; animation: fadeUp .25s ease; }
.page.active { display:block; }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}

.page-header h1 {
    font-size: 20px; font-weight: 700; margin-bottom: 14px;
}

/* ─── Карточки ─── */
.card {
    background: var(--card); border:1px solid var(--border);
    border-radius: var(--r); padding: 14px; margin-bottom: 12px;
}
.card-title {
    font-size: 13px; font-weight: 700; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}

/* ─── Ввод ссылки ─── */
.input-card {
    background: var(--card); border:1px solid var(--border);
    border-radius: var(--r); padding: 12px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.input-card input[type="url"] {
    width:100%; padding: 12px 14px;
    background: var(--bg); border:2px solid var(--border); border-radius: var(--rs);
    color: var(--txt); font-size: 15px; outline:none;
}
.input-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.input-row { display: flex; gap: 8px; }
.input-row select {
    flex: 1; padding: 10px; background: var(--bg); border:2px solid var(--border);
    border-radius: var(--rs); color: var(--txt); font-size: 14px;
}

.dl-options-mobile { display: flex; flex-direction: column; gap: 8px; }

.clip-panel-mobile {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px; border: 1px solid var(--border); border-radius: var(--rs);
    background: rgba(124,92,252,.08);
}
.clip-title-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; }
.clip-badge { font-size:11px; padding:4px 8px; border-radius:999px; background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.clip-grid-mobile { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.clip-field-m label { display:block; font-size:11px; color:var(--muted); margin-bottom:4px; }
.clip-field-m input, .clip-grid-mobile input {
    width:100%; padding:10px; background:var(--bg); border:2px solid var(--border);
    border-radius:var(--rs); color:var(--txt); font-size:14px;
}

/* ─── Кнопки ─── */
.btn {
    padding: 10px 18px; border:none; border-radius: var(--rs);
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    transition: .2s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 12px var(--glow); }
.btn-primary:active { transform: scale(.96); }
.btn-primary:disabled { opacity:.5; }
.btn-secondary { background: var(--hover); color: var(--txt); border:1px solid var(--border); }
.btn-link { background:none; border:none; color: var(--accent); font-size:13px; font-weight:600; cursor:pointer; }
.full-w { width:100%; justify-content: center; }
.export-btn { padding: 14px; font-size: 15px; font-weight: 700; border-radius: var(--r); }

/* ─── Инфо-карточка ─── */
.info-card {
    background: var(--card); border:1px solid var(--border); border-radius: var(--r);
    padding: 10px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center;
}
.info-card img { width: 80px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink:0; }
.info-title { font-size: 13px; font-weight: 600; line-height: 1.3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.info-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ─── Прогресс ─── */
.progress-card {
    background: var(--card); border:1px solid var(--border);
    border-radius: var(--r); padding: 12px; margin-bottom: 12px;
}
.progress-head { display:flex; justify-content: space-between; font-size:13px; color: var(--txt2); margin-bottom:8px; }
.progress-track { height:6px; background: var(--bg); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background: linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:3px; width:0; transition: width .3s; }
.progress-fill.done { background: linear-gradient(90deg,var(--ok),#22c55e); }
.progress-fill.err { background: var(--err); }

/* ─── Список видео ─── */
.section-title { font-size: 15px; font-weight: 600; margin: 14px 0 10px; }
.video-list { display: flex; flex-direction: column; gap: 8px; }
.vid-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border:1px solid var(--border); border-radius: var(--r);
    padding: 8px 10px; cursor: pointer; transition: .2s;
}
.vid-item:active { background: var(--hover); }
.vid-item.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vid-thumb { width:64px; height:42px; object-fit:cover; border-radius:6px; flex-shrink:0; background: var(--bg); }
.vid-info { flex:1; min-width:0; }
.vid-name { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vid-meta { font-size:11px; color: var(--muted); margin-top:2px; }
.vid-actions { display:flex; gap:6px; }
.vid-btn {
    padding: 6px 10px; font-size:11px; font-weight:600; border:none;
    border-radius:6px; cursor:pointer; transition: .2s;
}
.vid-btn-edit { background: var(--accent); color:#fff; }
.vid-btn-del { background: transparent; border:1px solid var(--err); color: var(--err); }
.vid-btn-del:active { background: var(--err); color:#fff; }

/* ─── Пустое состояние ─── */
.empty-state { text-align:center; padding:40px 20px; color: var(--muted); }
.empty-icon { font-size:40px; margin-bottom:10px; }
.empty-state p { font-size:14px; }

/* ─── Превью редактора ─── */
.preview-wrap {
    position: relative; background:#000; border-radius: var(--r);
    overflow: hidden; aspect-ratio: 16/9; margin-bottom: 10px;
}
.preview-wrap video { width:100%; height:100%; object-fit:contain; }
.preview-overlay {
    position: absolute; top:0; left:0; right:0; bottom:0; pointer-events: auto;
}

/* Зоны кропа */
.crop-overlay {
    position: absolute; border: 2px dashed; border-radius: 3px;
    pointer-events: auto; cursor: move;
}
.crop-overlay.webcam { border-color: #f97316; background: rgba(249,115,22,.12); }
.crop-overlay.content { border-color: #22d3ee; background: rgba(34,211,238,.12); }
.crop-overlay.text { border-color: #facc15; background: rgba(250,204,21,.12); }
.crop-overlay.extra { border-color: #34d399; background: rgba(52,211,153,.12); }
.crop-overlay .crop-label {
    position: absolute; top:-18px; left:2px; font-size:9px; font-weight:700;
    padding:1px 4px; border-radius:2px; color:#fff;
}
.crop-overlay.webcam .crop-label { background:#f97316; }
.crop-overlay.content .crop-label { background:#22d3ee; color:#000; }
.crop-overlay.text .crop-label { background:#facc15; color:#000; }
.crop-overlay.extra .crop-label { background:#34d399; color:#000; }
.crop-handle {
    position: absolute; width:18px; height:18px; background:#fff; border:2px solid rgba(0,0,0,.3);
    border-radius:3px; z-index:2;
}
.crop-handle.nw { top:-9px; left:-9px; }
.crop-handle.ne { top:-9px; right:-9px; }
.crop-handle.sw { bottom:-9px; left:-9px; }
.crop-handle.se { bottom:-9px; right:-9px; }

/* ─── Плеер ─── */
.player-bar {
    display:flex; align-items:center; gap:8px;
    background: var(--card); border:1px solid var(--border);
    border-radius: var(--rs); padding:8px 10px; margin-bottom:10px;
}
.play-btn {
    width:32px; height:32px; border-radius:50%; background: var(--accent);
    border:none; color:#fff; font-size:14px; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.time { font-size:11px; color: var(--txt2); min-width:80px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.player-bar input[type="range"] { flex:1; accent-color: var(--accent); }

/* ─── Таймлайн обрезки ─── */
.trim-card {
    background: var(--card); border:1px solid var(--border);
    border-radius: var(--r); padding: 12px; margin-bottom: 10px;
}
.trim-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; font-weight:600; }
.timeline {
    position:relative; height:48px; background: var(--bg); border-radius: var(--rs);
    overflow:hidden; cursor:pointer; user-select:none; touch-action:none;
}
.tl-wave { position:absolute; inset:0; display:flex; align-items:center; gap:1px; padding:4px; }
.tl-wave .bar { flex:1; background: var(--muted); border-radius:1px; min-height:3px; opacity:.4; }
.tl-sel {
    position:absolute; top:0; bottom:0;
    background: rgba(124,92,252,.2); border-left:3px solid var(--accent); border-right:3px solid var(--accent);
}
.tl-handle {
    position:absolute; top:0; bottom:0; width:24px; cursor:col-resize; z-index:2;
}
.tl-handle-l { left:-14px; }
.tl-handle-r { right:-14px; }
.tl-handle::after {
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:4px; height:18px; background: var(--accent); border-radius:2px;
}
.tl-playhead { position:absolute; top:0; bottom:0; width:2px; background:#fff; z-index:3; pointer-events:none; }
.tl-playhead::after {
    content:''; position:absolute; top:-3px; left:-3px; width:8px; height:8px; background:#fff; border-radius:50%;
}
.trim-times { display:flex; justify-content:space-between; font-size:11px; color: var(--txt2); margin-top:6px; }

/* ─── Пресеты ─── */
.presets-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:6px; }
.preset-btn {
    padding:10px 4px; background: var(--bg); border:2px solid var(--border);
    border-radius: var(--rs); color: var(--txt2); cursor:pointer;
    text-align:center; font-size:11px; font-weight:600; transition:.2s;
}
.preset-btn:active { background: var(--hover); }
.preset-btn.active { border-color: var(--accent); color: var(--txt); background: rgba(124,92,252,.1); }
.preset-btn .p-icon { font-size:20px; display:block; margin-bottom:2px; }

/* ─── Результат canvas ─── */
.result-wrap {
    display:flex; justify-content:center; background:#000;
    border-radius: var(--rs); overflow:hidden; padding: 4px 0;
}
#result-canvas { max-width:100%; height:auto; }

/* ─── Слайдеры кропа ─── */
.zone-label { font-size:12px; font-weight:700; margin: 8px 0 4px; }
.webcam-label { color: #f97316; }
.content-label { color: #22d3ee; }
.sliders-2col { display:grid; grid-template-columns:1fr 1fr; gap: 4px 12px; }
.slider-row { display:flex; align-items:center; gap:4px; padding:2px 0; }
.slider-row span:first-child { font-size:11px; color: var(--muted); width:16px; flex-shrink:0; }
.slider-row input[type="range"] { flex:1; accent-color: var(--accent); }
.sv { font-size:11px; color: var(--accent); font-weight:700; width:32px; text-align:right; font-variant-numeric:tabular-nums; }

/* ─── Toggle ─── */
.toggle-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.toggle-row span { font-size:13px; color: var(--txt2); }
.toggle-row select {
    max-width: 128px;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--txt);
    font-size: 12px;
}
.toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-s {
    position:absolute; inset:0; background: var(--bg); border:2px solid var(--border);
    border-radius:11px; cursor:pointer; transition:.2s;
}
.toggle-s::before {
    content:''; position:absolute; width:14px; height:14px; left:2px; bottom:2px;
    background: var(--muted); border-radius:50%; transition:.2s;
}
.toggle input:checked + .toggle-s { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-s::before { transform:translateX(18px); background:#fff; }

/* ─── Формат ─── */
.format-row { display:flex; gap:6px; }
.fmt-btn {
    flex:1; padding:8px; background: var(--bg); border:2px solid var(--border);
    border-radius: var(--rs); color: var(--txt2); text-align:center;
    font-size:11px; cursor:pointer; transition:.2s;
}
.fmt-btn.active { border-color: var(--accent); color: var(--txt); background: rgba(124,92,252,.1); }
.fmt-btn b { font-size:16px; display:block; margin-bottom:1px; }

/* ─── Уникализатор ─── */
.uq-fname { font-size:13px; font-weight:600; margin-bottom:8px; word-break:break-all; }
.uq-presets { display:grid; grid-template-columns: repeat(4,1fr); gap:6px; }
.uq-p-btn {
    padding:8px 2px; background: var(--bg); border:2px solid var(--border);
    border-radius: var(--rs); color: var(--txt2); cursor:pointer;
    text-align:center; font-size:10px; font-weight:600; transition:.2s;
}
.uq-p-btn .uq-p-icon { font-size:18px; display:block; margin-bottom:1px; }
.uq-p-btn.active { border-color: var(--accent); color: var(--txt); background: rgba(124,92,252,.1); }

.export-card { margin-bottom:12px; }

/* ─── Toast ─── */
.toast-container { position:fixed; top: 12px; left:10px; right:10px; z-index:200; display:flex; flex-direction:column; gap:6px; }
.toast {
    padding:10px 14px; background: var(--card); border:1px solid var(--border);
    border-radius: var(--rs); font-size:13px; box-shadow: 0 4px 20px rgba(0,0,0,.5);
    animation: slideDown .3s ease; display:flex; align-items:center; gap:6px;
}
.toast.success { border-left:3px solid var(--ok); }
.toast.error { border-left:3px solid var(--err); }
.toast.info { border-left:3px solid var(--accent); }
@keyframes slideDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

/* Спиннер */
.spinner {
    width:16px; height:16px;
    border:2px solid var(--muted); border-top-color: var(--accent);
    border-radius:50%; animation: spin .6s linear infinite; display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Скроллбар */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius:2px; }