:root {
            --bg: #0c0c0e;
            --surface: #141418;
            --surface-2: #1c1c22;
            --fg: #f3f3f5;
            --muted: #8e8e96;
            --faint: #75757e; /* підняли з #5c5c64 — недостатній контраст на --bg для дрібного тексту */
            --accent: #ff4d4d;
            --accent-fg: #1a0505;
            --yt: #ff0000;
            --border: #2a2a32;
            --danger: #e07070;
            --tier-ink: #14110f;
            --radius: 12px;
            --card-min: 8.25rem;

            /* Уніфікована шкала кнопок: 3 розміри замість 12+ довільних значень */
            --btn-h-xs: 28px;
            --btn-h-sm: 32px;
            --btn-h-md: 36px;
            --btn-h-lg: 40px;
            --btn-radius-sm: 9px;
            --btn-radius-md: 10px;
            --btn-radius-lg: 11px;
            --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255, 255, 255, 0.22);
        }

        * { box-sizing: border-box; }

        /* Єдиний видимий focus-стан для клавіатурної навігації.
           Раніше кнопки взагалі не мали focus-стилю (лише inputs). */
        button:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible,
        a:focus-visible,
        [tabindex]:focus-visible,
        [contenteditable="true"]:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
            border-radius: 8px;
        }
        .track-card:focus-visible,
        .tour-option:focus-visible {
            box-shadow: var(--focus-ring);
        }

        @media (prefers-reduced-motion: no-preference) {
            .view.is-on { animation: viewFadeIn 0.18s ease; }
            @keyframes viewFadeIn {
                from { opacity: 0; transform: translateY(4px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }

        html {
            overflow-y: scroll; /* смуга прокрутки завжди зарезервована — сторінка не «стрибає» вбік при переході Home ↔ редактор тірів */
            scrollbar-gutter: stable;
        }

        body {
            font-family: 'Onest', system-ui, sans-serif;
            background: var(--bg);
            color: var(--fg);
            margin: 0;
            padding: 32px 16px calc(140px + env(safe-area-inset-bottom, 0px));
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        body.is-dragging,
        body.is-dragging * {
            cursor: none !important;
            user-select: none;
        }

        .wrap { width: 100%; max-width: 68rem; margin: 0 auto; }

        .header-top {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            margin-left: auto;
        }
        .btn-login {
            height: var(--btn-h-md);
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.15s, background 0.15s;
        }
        .btn-login:hover {
            border-color: rgba(255,255,255,0.24);
            background: var(--surface);
        }
        .btn-login svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .btn-icon {
            width: var(--btn-h-md);
            height: var(--btn-h-md);
            border-radius: 50%;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--muted);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
        }
        .btn-icon:hover {
            color: var(--danger);
            border-color: rgba(224, 112, 112, 0.45);
        }
        .btn-icon svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        .header-user {
            display: none;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: var(--muted);
            max-width: 12rem;
        }
        .header-user.is-on { display: inline-flex; }
        .header-user img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        .header-user span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--fg);
            font-weight: 500;
        }

        h1 {
            font-family: 'Syne', sans-serif;
            margin: 0;
            font-size: clamp(1.6rem, 4vw, 2.1rem);
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        .badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--accent);
            border: 1px solid rgba(255, 77, 77, 0.35);
            border-radius: 999px;
            padding: 2px 8px;
            margin-left: 8px;
            vertical-align: middle;
        }

        .lead {
            margin: 8px 0 0;
            max-width: 40rem;
            font-size: 0.9rem;
            line-height: 1.5;
            color: var(--muted);
        }

        .stats {
            font-family: 'Syne', sans-serif;
            font-size: 0.875rem;
            color: var(--muted);
            font-variant-numeric: tabular-nums;
        }
        .stats strong { color: var(--fg); }

        .panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 0;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
        }
        .panel-head h2 {
            margin: 0;
            font-family: 'Syne', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .btn-text {
            border: none;
            background: transparent;
            color: var(--faint);
            font-family: inherit;
            font-size: 0.78rem;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 6px;
        }
        .btn-text:hover { color: var(--danger); background: rgba(224, 112, 112, 0.08); }

        .panel-section {
            padding: 14px 16px;
        }
        .panel-section + .panel-section {
            border-top: 1px solid var(--border);
        }
        .section-label {
            margin: 0 0 10px;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--faint);
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }

        .panel-title {
            margin: 0 0 10px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .import-line {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }
        .import-line textarea {
            flex: 1;
            min-width: 0;
            min-height: 44px;
            max-height: 120px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.875rem;
            outline: none;
            resize: vertical;
            line-height: 1.4;
        }
        .import-line textarea:focus {
            border-color: rgba(255, 77, 77, 0.55);
            box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.12);
        }
        .import-line .btn {
            height: auto;
            min-height: 44px;
            padding: 0 16px;
            border-radius: 10px;
            flex-shrink: 0;
        }

        input[type="text"],
        input[type="password"] {
            flex: 1;
            min-width: 12rem;
            height: 40px;
            padding: 0 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.875rem;
            outline: none;
        }
        input:focus { border-color: var(--accent); }

        textarea {
            width: 100%;
            min-height: 72px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.85rem;
            outline: none;
            resize: vertical;
        }
        textarea:focus { border-color: var(--accent); }

        .btn {
            height: var(--btn-h-lg);
            padding: 0 14px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            font-weight: 500;
            font-size: 0.875rem;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background 0.15s, opacity 0.15s;
        }
        .btn-accent { background: var(--accent); color: var(--accent-fg); }
        .btn-accent:hover { filter: brightness(1.08); }
        .btn-secondary {
            background: var(--surface-2);
            color: var(--fg);
            border: 1px solid var(--border);
        }
        .btn-secondary:hover { background: var(--surface); }
        .btn-danger {
            background: transparent;
            color: var(--danger);
            border: 1px solid rgba(224, 112, 112, 0.35);
        }
        .btn-danger:hover { background: var(--danger); color: #fff; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .hint {
            margin: 8px 0 0;
            font-size: 0.75rem;
            color: var(--faint);
            line-height: 1.4;
        }

        .my-pl-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-bottom: 10px;
        }
        .my-pl-list {
            display: none;
            max-height: 280px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg);
        }
        .my-pl-list.is-on { display: block; }
        .my-pl-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            transition: background 0.12s;
        }
        .my-pl-item:last-child { border-bottom: none; }
        .my-pl-item:hover { background: rgba(255, 255, 255, 0.03); }
        .my-pl-item.is-added { opacity: 0.72; }
        .my-pl-item img {
            width: 44px;
            height: 44px;
            border-radius: 6px;
            object-fit: cover;
            background: #111;
            flex-shrink: 0;
        }
        .my-pl-item .ph {
            width: 44px;
            height: 44px;
            border-radius: 6px;
            background: var(--surface-2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            color: var(--faint);
        }
        .my-pl-meta { flex: 1; min-width: 0; }
        .my-pl-title {
            font-size: 0.88rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .my-pl-count {
            font-size: 0.72rem;
            color: var(--muted);
            margin-top: 2px;
        }
        .my-pl-add {
            flex-shrink: 0;
            height: var(--btn-h-sm);
            min-width: 72px;
            padding: 0 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface-2);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.75rem;
            cursor: pointer;
        }
        .my-pl-add:hover { border-color: var(--accent); color: var(--accent); }
        .my-pl-add:disabled { opacity: 0.5; cursor: default; }
        .my-pl-add.is-done {
            border-color: rgba(123, 211, 137, 0.35);
            background: rgba(123, 211, 137, 0.12);
            color: #7bd389;
            cursor: default;
            opacity: 1;
        }
        .my-pl-add.is-done:hover {
            border-color: rgba(123, 211, 137, 0.35);
            color: #7bd389;
        }

        .status {
            margin-top: 8px;
            font-size: 0.8rem;
            color: var(--muted);
            min-height: 1.2em;
        }
        .status.error { color: var(--danger); }
        .status.ok { color: #7bd389; }

        .tier-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .tier-row {
            display: flex;
            background: var(--surface);
            border-radius: var(--radius);
            overflow: hidden;
            min-height: 3.25rem;
            border: 1px solid var(--border);
            transition: box-shadow 0.15s;
        }
        .tier-row.drag-over {
            box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.5);
        }

        .tier-label-wrapper {
            width: 4.5rem;
            min-width: 4.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--tier-ink);
            user-select: none;
            padding: 6px 4px;
        }
        .tier-label {
            font-family: 'Syne', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
        }
        .tier-count {
            font-size: 0.65rem;
            font-weight: 500;
            opacity: 0.8;
            margin-top: 3px;
        }

        .tier-zone {
            flex: 1;
            min-width: 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
            gap: 6px;
            padding: 8px;
            align-content: start;
            min-height: 3.25rem;
            contain: layout style;
        }

        #pool {
            margin-top: 16px;
            background: var(--surface);
            border: 1.5px dashed var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: box-shadow 0.15s, border-color 0.15s;
        }
        #pool.drag-over {
            border-style: solid;
            border-color: rgba(255, 77, 77, 0.45);
            box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.35);
        }
        #pool-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
        }
        #pool-header h2 {
            margin: 0;
            font-size: 0.875rem;
            font-weight: 500;
        }
        #pool-count {
            font-size: 0.75rem;
            color: var(--accent);
            margin-left: 8px;
        }
        #pool-zone { min-height: 5rem; padding: 10px; }

        .track-card {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            cursor: grab;
            user-select: none;
            touch-action: none;
            min-width: 0;
            width: 100%;
            overflow: hidden;
            transition: border-color 0.15s, opacity 0.15s, background 0.15s;
            -webkit-tap-highlight-color: transparent;
            contain: layout style paint;
        }
        .track-card:hover {
            border-color: rgba(255, 77, 77, 0.45);
            background: #22222a;
        }
        .track-card.is-source { opacity: 0.3; }
        .track-card.drag-over-target {
            border-color: rgba(255, 77, 77, 0.65);
            background: #241818;
            box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.35);
        }

        /* Режим 1 (за замовч.): mqdefault 16:9 — повне прев'ю без обрізки боків */
        .track-card .thumb,
        .thumb {
            width: 100%;
            aspect-ratio: 16 / 9;
            height: auto;
            max-height: none;
            border-radius: 0;
            object-fit: cover;
            object-position: center center;
            background: #111;
            display: block;
            flex-shrink: 0;
            -webkit-user-drag: none;
            user-drag: none;
            pointer-events: none;
            transform: none;
            transition: aspect-ratio 0.15s ease;
        }
        .thumb.is-placeholder {
            display: block;
            aspect-ratio: 16 / 9;
            background: linear-gradient(135deg, #1a1a1e, #2a2a32);
            transform: none;
        }
        /* Режим 2: квадрат як YouTube Music — рівно 8 карток у ряд (пул і тіри) */
        body.card-ratio-square .track-card .thumb,
        body.card-ratio-square .thumb {
            aspect-ratio: 1 / 1;
        }
        body.card-ratio-square .thumb.is-placeholder {
            aspect-ratio: 1 / 1;
        }
        body.card-ratio-square .track-card {
            max-width: none;
            width: 100%;
        }
        body.card-ratio-square .tier-zone,
        body.card-ratio-square #pool-zone {
            --card-min: 0;
            /* 1fr заповнює ряд без «дірки» справа */
            grid-template-columns: repeat(8, minmax(0, 1fr));
            justify-content: stretch;
        }
        @media (max-width: 960px) {
            body.card-ratio-square .tier-zone,
            body.card-ratio-square #pool-zone {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }
        }
        @media (max-width: 640px) {
            body.card-ratio-square .tier-zone,
            body.card-ratio-square #pool-zone {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        .track-body {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px 10px;
            min-width: 0;
        }
        .track-details { flex: 1; min-width: 0; }
        .track-title {
            font-weight: 600;
            font-size: 0.82rem;
            line-height: 1.25;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .track-artist {
            font-size: 0.72rem;
            color: var(--muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .play-btn {
            background: var(--yt);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            min-width: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            touch-action: manipulation;
            position: relative;
            z-index: 2;
            padding: 0;
        }
        .play-btn::before { content: ''; position: absolute; inset: -10px; }

        .play-btn svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
            margin-left: 0;
            transform: none;
            pointer-events: none;
        }

        #player-bar {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 40;
            /* колір задається з JS з обкладинки */
            background: #1a1a22;
            --player-progress-hover: #777780;
            transition: background 0.45s ease;
            padding: 0;
            display: flex;
            justify-content: center;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
        }
        #player-inner {
            width: 100%;
            max-width: 56rem;
            position: relative;
        }

        #yt-engine {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
            left: -9999px;
            top: 0;
        }

        /* Spotify-like: art | meta …… progress …… time | play */
        .mini-player {
            width: 100%;
            padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        }
        .mini-player.is-empty { opacity: 0.7; }

        .mini-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            position: relative;
        }

        .mini-art {
            width: 52px;
            height: 52px;
            border-radius: 6px;
            object-fit: cover;
            background: rgba(0,0,0,0.25);
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            -webkit-user-drag: none;
            user-drag: none;
            pointer-events: none;
        }
        .mini-art.is-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.45);
            font-size: 1.1rem;
            width: 52px;
            height: 52px;
            border-radius: 6px;
            background: rgba(0,0,0,0.25);
            flex-shrink: 0;
        }

        .mini-meta {
            flex: 0 1 auto;
            min-width: 0;
            max-width: 28%;
        }
        .mini-title {
            font-weight: 600;
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
            line-height: 1.25;
        }
        .mini-sub {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.7);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
            line-height: 1.25;
        }

        .mini-progress-block {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 4px;
        }
        .mini-progress-hit {
            flex: 1;
            height: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            min-width: 0;
            touch-action: none;
        }
        .mini-progress-track {
            width: 100%;
            height: 3px;
            background: rgba(255,255,255,0.22);
            border-radius: 2px;
            position: relative;
            overflow: hidden;
            transition: height 0.12s;
        }
        .mini-progress-hit:hover .mini-progress-track,
        .mini-progress-hit.is-seeking .mini-progress-track { height: 5px; }
        .mini-progress-fill {
            height: 100%;
            width: 0%;
            background: #fff;
            border-radius: 2px;
            pointer-events: none;
        }
        .mini-progress-hit:hover .mini-progress-fill,
        .mini-progress-hit.is-seeking .mini-progress-fill {
            background: var(--player-progress-hover);
        }
        .mini-time {
            font-size: 0.72rem;
            color: rgba(255,255,255,0.75);
            font-variant-numeric: tabular-nums;
            flex-shrink: 0;
            min-width: 2.6rem;
            text-align: right;
        }

        .mini-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            padding-right: 38px; /* стала «кишеня» під mini-clear — щоб її поява не штовхала play/prev/next */
        }
        .mini-btn {
            width: var(--btn-h-md);
            height: var(--btn-h-md);
            border-radius: 50%;
            border: none;
            background: #fff;
            color: #111;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: filter 0.12s, opacity 0.12s;
        }
        .mini-btn:hover { filter: brightness(0.94); } /* без transform/scale — іконка лишається статичною й не зсувається */
        .mini-btn:disabled {
            opacity: 0.35;
            cursor: default;
            filter: none;
        }
        .mini-btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: block;
        }
        /* Play і pause — без зсуву, щоб іконка була по центру кнопки */
        .mini-btn.play .ui-icon {
            width: 18px !important;
            height: 18px !important;
            transform: translateX(0.5px);
        }

        .mini-open {
            width: var(--btn-h-sm);
            height: var(--btn-h-sm);
            border-radius: 50%;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.75);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 1rem;
            line-height: 1;
        }
        .mini-open:hover { color: #fff; }
        .mini-open:disabled { opacity: 0.32; color: rgba(255,255,255,0.45); cursor: default; }
        .mini-open:disabled:hover { color: rgba(255,255,255,0.45); }
        .mini-open .ui-icon {
            width: 17px !important;
            height: 17px !important;
        }
        #mini-prev-btn .ui-icon,
        #mini-next-btn .ui-icon {
            width: 18px !important;
            height: 18px !important;
        }
        .mini-clear {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: var(--btn-h-xs); height: var(--btn-h-xs); border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.68); cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; padding: 0;
            font-family: inherit; line-height: 1;
            transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, opacity 0.12s;
            flex-shrink: 0;
        }
        .mini-clear:hover { color: #fff; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.1); }
        .mini-clear svg { width: 14px; height: 14px; }
        .mini-clear > svg:not(.ui-icon) { display: none; }
        .mini-clear .ui-icon {
            width: 16px !important;
            height: 16px !important;
        }
        /* Icon alignment normalization */
        .tool-btn, .icon-btn, .mini-btn, .mini-open, .mini-clear, .btn-add, .btn-google {
            align-items: center;
            justify-content: center;
        }
        .tool-btn svg, .icon-btn svg, .mini-btn svg, .mini-open svg, .mini-clear svg, .btn-google svg {
            display: block;
            margin: 0;
            flex: 0 0 auto;
            vertical-align: middle;
        }
        .tool-btn.icon-only svg {
            width: 17px;
            height: 17px;
            transform: translateY(0);
        }
        /* Hide native search clear; use our own button instead. */
        input[type="search"] {
            -webkit-appearance: none;
            appearance: none;
        }
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        input[type="search"]::-ms-clear,
        input[type="search"]::-ms-reveal {
            display: none;
            width: 0;
            height: 0;
        }


        @media (max-width: 640px) {
            .mini-meta { max-width: 34%; }
            .mini-time { display: none; }
            .mini-art, .mini-art.is-placeholder { width: 44px; height: 44px; }
        }

        .toolbar-search {
            position: relative;
            width: 190px;
            min-width: 150px;
            margin-left: auto;
        }
        .toolbar-search input {
            width: 100%;
            height: 34px;
            padding: 0 34px 0 11px;
            border-radius: 9px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.025);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.77rem;
            outline: none;
            transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
        }
        .toolbar-search input:focus {
            border-color: rgba(255,255,255,0.28);
            background: rgba(255,255,255,0.04);
            box-shadow: none;
        }
        .toolbar-search input::placeholder { color: var(--faint); }
        .toolbar-search .search-clear {
            position: absolute;
            right: 5px;
            top: 4px;
            width: 26px;
            height: 26px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--faint);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }
        .toolbar-search .search-clear svg { width: 14px; height: 14px; fill: currentColor; }
        .toolbar-search.has-value .search-clear { display: inline-flex; }
        .toolbar-search .search-clear:hover {
            color: var(--fg);
            background: rgba(255,255,255,0.07);
        }

        .tier-toolbar {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0 0 10px;
            padding: 7px;
            background: var(--surface);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 13px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        .tier-toolbar .toolbar-group {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
        }
        .tier-toolbar .tool-btn {
            height: var(--btn-h-sm);
            min-width: var(--btn-h-sm);
            padding: 0 10px;
            border-radius: 9px;
        }
        .tier-toolbar .toolbar-group .tool-btn[title="Скасувати останню дію"],
        .tier-toolbar .toolbar-group .tool-btn[title="Повторити дію"] {
            min-width: 34px;
            padding: 0;
        }
        .toolbar-sep {
            width: 1px;
            height: 22px;
            background: rgba(255,255,255,0.07);
            margin: 0 2px;
            flex: 0 0 auto;
        }
        .pool-actions {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .pool-actions .tool-btn {
            height: var(--btn-h-sm);
            min-width: var(--btn-h-sm);
            padding: 0 9px;
            font-size: 0.72rem;
        }

        .track-card.is-playing {
            border-color: rgba(255,77,77,0.9) !important;
            box-shadow: inset 0 0 0 1.5px rgba(255,77,77,0.42), 0 0 0 1px rgba(255,77,77,0.16), 0 7px 18px rgba(0,0,0,0.18);
            background: linear-gradient(180deg, rgba(255,77,77,0.075), rgba(255,77,77,0.025)), var(--surface-2);
        }
        .track-card.is-playing:hover {
            border-color: rgba(255,77,77,1) !important;
        }
        .track-card .track-body { min-width: 0; }
        .track-card .track-details { min-width: 0; }
        .track-card .track-title {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            display: block !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        .mini-volume {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: 112px;
            flex-shrink: 0;
        }
        .mini-volume-icon {
            width: 18px;
            height: 18px;
            color: rgba(255,255,255,0.72);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mini-volume-icon svg { width: 16px; height: 16px; fill: currentColor; }
        .mini-volume-range {
            width: 84px;
            height: 4px;
            margin: 0;
            accent-color: #fff;
            cursor: pointer;
        }

        @media (max-width: 820px) {
            .toolbar-search { width: 170px; min-width: 140px; }
        }
        @media (max-width: 640px) {
            .tier-toolbar { flex-wrap: wrap; }
            .tier-toolbar .toolbar-group { flex-wrap: nowrap; }
            .toolbar-search { order: 3; width: 100%; min-width: 0; margin-left: 0; }
            .toolbar-search input { height: 36px; }
            .mini-volume { width: 86px; }
            .mini-volume-range { width: 58px; }
        }
        /* Раніше жодного брейкпоінту нижче 640px не було — на екранах ~360-400px
           мініплеєр і тулбар тірів обрізались/перекривались. */
        @media (max-width: 420px) {
            .mini-art, .mini-art.is-placeholder { width: 40px; height: 40px; }
            .mini-row { gap: 8px; }
            .mini-meta { max-width: 22%; }
            .mini-volume { display: none; }
            .mini-controls { gap: 6px; }
            .mini-progress-block { padding: 0; gap: 6px; }
            .mini-time { min-width: 2.1rem; font-size: 0.68rem; }
            .tier-label-wrapper { width: 3.6rem; min-width: 3.6rem; }
            .tier-toolbar .tool-btn { padding: 0 8px; font-size: 0.7rem; }
        }

        /* ── Stage 1 productivity tools ───────────────────────── */
        .global-search-wrap { position: relative; min-width: 0; }
        .global-search-wrap input {
            width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--surface); color: var(--fg);
            font-family: inherit; font-size: 0.875rem; outline: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235c5c64' viewBox='0 0 16 16'%3E%3Cpath d='M11.7 10.3a6 6 0 1 0-1.4 1.4l3.3 3.3 1.4-1.4-3.3-3.3zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: 12px center;
        }
        .global-search-wrap input:focus { border-color: rgba(255,77,77,0.5); box-shadow: 0 0 0 3px rgba(255,77,77,0.12); }
        .global-search-wrap input::-webkit-search-cancel-button,
        .toolbar-search input::-webkit-search-cancel-button,
        .search-row input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
        .global-search-wrap input::-ms-clear,
        .toolbar-search input::-ms-clear,
        .search-row input::-ms-clear { display: none; }
        .stage1-select {
            height: 40px; min-width: 8.5rem; padding: 0 10px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--surface); color: var(--fg);
            font-family: inherit; font-size: 0.82rem; outline: none;
        }
        .stage1-tools .tool-btn { white-space: nowrap; }


        /* ── Stage 1 UI polish ─────────────────────────────────────── */
        .editor-topbar {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            margin: 0 0 14px;
            padding: 4px 0;
        }
        .editor-topbar .editor-back {
            height: 38px;
            border-radius: 11px;
            padding: 0 13px;
            background: rgba(255,255,255,0.025);
            border-color: rgba(255,255,255,0.08);
        }
        .editor-topbar .editor-back:hover {
            border-color: rgba(255,77,77,0.36);
            background: rgba(255,77,77,0.06);
        }
        .editor-heading {
            min-width: 0;
        }
        .editor-heading .eyebrow {
            font-size: 0.67rem;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            color: var(--faint);
            margin-bottom: 2px;
        }
        .editor-heading .subline {
            font-size: 0.76rem;
            color: var(--muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .editor-save-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: flex-end;
        }

        .add-card {
            background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 72%), var(--surface);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 16px;
            padding: 18px;
            margin-bottom: 14px;
            box-shadow: 0 10px 28px rgba(0,0,0,0.14);
        }
        .add-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            text-align: left;
            margin: 0 0 12px;
            font-size: 1rem;
        }
        .add-title::after {
            content: 'YouTube';
            font-family: 'Outfit', system-ui, sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            color: #ff8a8a;
            border: 1px solid rgba(255,77,77,0.24);
            background: rgba(255,77,77,0.07);
            border-radius: 999px;
            padding: 4px 8px;
            letter-spacing: 0.03em;
        }
        .url-row { gap: 10px; }
        .url-row input {
            height: 44px;
            border-radius: 11px;
            background: var(--bg);
            border-color: rgba(255,255,255,0.08);
            font-size: 0.84rem;
        }
        .url-row input:focus { border-color: rgba(255,77,77,0.52); }
        .split {
            margin: 13px 0;
            font-size: 0.65rem;
            color: var(--faint);
        }
        .yt-prompt {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            background: rgba(255,255,255,0.018);
            text-align: left;
        }
        .yt-prompt p {
            margin: 0;
            font-size: 0.78rem;
            color: var(--muted);
        }
        .account-block {
            margin-top: 10px;
        }
        .account-block.is-on {
            padding-top: 2px;
        }

        .list-title-wrap {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: end;
            gap: 12px;
            margin: 2px 0 10px;
        }
        .list-title-wrap .list-title {
            margin: 0;
        }

        .stage1-tools {
            display: grid;
            grid-template-columns: minmax(250px, 1fr) auto auto auto;
            gap: 8px;
            align-items: center;
            margin: 0 0 8px;
            padding: 8px;
            background: var(--surface);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 13px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        }
        .global-search-wrap input {
            height: 40px;
            background: rgba(255,255,255,0.025);
            border-color: rgba(255,255,255,0.07);
        }
        .stage1-select {
            height: 40px;
            border-radius: 10px;
            background: rgba(255,255,255,0.025);
            border-color: rgba(255,255,255,0.07);
        }
        .stage1-actions {
            display: inline-flex;
            gap: 6px;
            align-items: center;
        }
        .stage1-history {
            display: inline-flex;
            gap: 6px;
        }
        .stage1-history .tool-btn {
            min-width: 40px;
            padding: 0 10px;
            justify-content: center;
        }

        .tier-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin: 0 0 14px;
            padding: 8px;
            background: var(--surface);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 13px;
        }
        .toolbar-group {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .toolbar-group + .toolbar-group {
            margin-left: auto;
        }
        .toolbar-divider {
            width: 1px;
            height: 22px;
            background: rgba(255,255,255,0.07);
            margin: 0 2px;
        }
        .track-card {
            background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012)), var(--surface-2);
            border-color: rgba(255,255,255,0.07);
            border-radius: 13px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        .track-card:hover {
            border-color: rgba(255,77,77,0.42);
            background: #22222a;
            box-shadow: 0 8px 18px rgba(0,0,0,0.2);
        }
        .thumb { max-height: none; }
        .track-body { padding: 8px 9px 9px; gap: 7px; }
        .track-title { font-size: 0.8rem; }
        .track-artist { font-size: 0.69rem; }
        .play-btn {
            width: 30px; height: 30px; min-width: 30px;
            box-shadow: 0 4px 10px rgba(255,0,0,0.18);
            transition: filter .15s ease;
        }
        .play-btn:hover { filter: brightness(1.08); }
        .tier-row {
            border-color: rgba(255,255,255,0.07);
            box-shadow: 0 4px 12px rgba(0,0,0,0.10);
        }
        .tier-label-wrapper {
            position: relative;
        }
        .tier-count {
            font-weight: 600;
        }
        #pool {
            border-color: rgba(255,255,255,0.09);
            background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 55%), var(--surface);
        }
        #pool-header {
            padding: 10px 13px;
        }
        #pool-header h2 {
            font-weight: 600;
        }
        #pool-count {
            background: rgba(255,77,77,0.10);
            border: 1px solid rgba(255,77,77,0.18);
            border-radius: 999px;
            padding: 2px 7px;
            font-size: 0.68rem;
        }

        @media (max-width: 820px) {
            .editor-topbar { grid-template-columns: auto minmax(0, 1fr); }
            .editor-save-wrap { grid-column: 1 / -1; justify-content: flex-end; }
            .stage1-tools { grid-template-columns: minmax(0, 1fr) auto auto; }
            .dirty-state { grid-column: 1 / -1; justify-content: flex-start; }
        }
        @media (max-width: 640px) {
            .editor-topbar { grid-template-columns: 1fr auto; }
            .editor-heading { display: none; }
            .editor-save-wrap { grid-column: auto; }
            .add-card { padding: 14px; }
            .yt-prompt { align-items: stretch; flex-direction: column; }
            .btn-google { width: 100%; justify-content: center; }
            .stage1-tools { grid-template-columns: 1fr 1fr; }
            .global-search-wrap { grid-column: 1 / -1; }
            .stage1-select { min-width: 0; width: 100%; }
            .stage1-history { grid-column: 1 / -1; }
            .stage1-history .tool-btn { flex: 1; justify-content: center; }
            .tier-toolbar { align-items: stretch; }
            .toolbar-group { width: 100%; }
            .toolbar-group + .toolbar-group { margin-left: 0; }
            .toolbar-divider { display: none; }
            .toolbar-group .tool-btn { flex: 1; justify-content: center; }
        }
        .selection-bar {
            display: none; align-items: center; gap: 8px; flex-wrap: wrap;
            margin: 0 0 12px; padding: 9px 10px; background: var(--surface);
            border: 1px solid var(--border); border-radius: 10px;
        }
        .selection-bar.is-on { display: flex; }
        .selection-count { color: var(--muted); font-size: 0.8rem; font-weight: 600; margin-right: 2px; }
        .selection-bar select { height: 34px; min-width: 9rem; }
        .track-card.is-selected {
            border-color: rgba(255,77,77,0.85);
            box-shadow: inset 0 0 0 2px rgba(255,77,77,0.35), 0 0 0 1px rgba(255,77,77,0.15);
        }
        .track-card.is-selected::after {
            content: '✓'; position: absolute; top: 7px; right: 7px; z-index: 3;
            width: 22px; height: 22px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
            background: var(--accent); color: var(--accent-fg); font-weight: 800; font-size: 0.75rem;
        }
        .track-card { position: relative; }
        .bulk-hidden { display: none !important; }

        .controls-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        @media (max-width: 640px) {
            :root { --card-min: 7.5rem; }
            .tier-label-wrapper { width: 3.5rem; min-width: 3.5rem; }
            body { padding: 20px 10px calc(150px + env(safe-area-inset-bottom, 0px)); }
            .btn { height: 44px; }
            .play-btn { width: 34px; height: 34px; min-width: 34px; }
        }

        /* ── New add-music UI (from test) ── */
        .add-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 22px 20px 20px;
            margin-bottom: 16px;
        }
        .add-title {
            margin: 0 0 18px;
            text-align: center;
            font-family: 'Syne', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .url-row { display: flex; gap: 8px; align-items: center; }
        .url-row input {
            flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--bg); color: var(--fg);
            font-family: inherit; font-size: 0.875rem; outline: none;
        }
        .url-row input:focus {
            border-color: rgba(255,77,77,0.5);
            box-shadow: 0 0 0 3px rgba(255,77,77,0.12);
        }
        .url-row input::placeholder { color: var(--faint); }
        .btn-add {
            width: var(--btn-h-md); height: var(--btn-h-md); min-width: var(--btn-h-md); padding: 0; border-radius: var(--btn-radius-md); border: none;
            background: var(--accent); color: var(--accent-fg); font-family: inherit;
            font-size: 1.2rem; font-weight: 600; line-height: 0; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            box-shadow: 0 6px 16px rgba(255,77,77,0.18);
        }
        .btn-add:hover { filter: brightness(1.08); }
        .split {
            display: flex; align-items: center; gap: 12px; margin: 22px 0 18px;
            color: var(--faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
        }
        .split::before, .split::after { content: ''; flex: 1; height: 1px; background: var(--border); }
        .yt-prompt { text-align: center; }
        .yt-prompt p { margin: 0 0 14px; font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
        .btn-google {
            height: var(--btn-h-lg); padding: 0 18px; border-radius: 999px; border: 1px solid var(--border);
            background: var(--surface-2); color: var(--fg); font-family: inherit; font-size: 0.875rem;
            font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
        }
        .btn-google:hover { border-color: rgba(255,77,77,0.4); }
        .btn-google svg { width: 18px; height: 18px; }
        .account-block { display: none; }
        .account-block.is-on { display: block; }
        .step { display: none; }
        .step.is-on { display: block; }
        .search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
        .search-row input {
            flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 36px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--bg); color: var(--fg);
            font-family: inherit; font-size: 0.875rem; outline: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235c5c64' viewBox='0 0 16 16'%3E%3Cpath d='M11.7 10.3a6 6 0 1 0-1.4 1.4l3.3 3.3 1.4-1.4-3.3-3.3zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: 12px center;
        }
        .search-row input:focus { border-color: rgba(255,77,77,0.45); }
        .search-row input::placeholder { color: var(--faint); }
        .list-box {
            border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden;
        }
        .list-box.has-scroll { max-height: 16.5rem; }
        .list-box.tracks-scroll.has-scroll { max-height: 14rem; }
        .list-box.is-collapsed { display: none; }
        .scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3a44 transparent; }
        .scroll-y::-webkit-scrollbar { width: 6px; }
        .scroll-y::-webkit-scrollbar-thumb { background: #3a3a44; border-radius: 99px; }
        .pl-item {
            display: flex; align-items: center; gap: 12px; padding: 10px 12px;
            border-bottom: 1px solid var(--border);
        }
        .pl-item:last-child { border-bottom: none; }
        .pl-item:hover { background: rgba(255,255,255,0.03); }
        .pl-item img, .pl-ph {
            width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
            background: var(--surface-2); flex-shrink: 0;
        }
        .pl-ph {
            display: flex; align-items: center; justify-content: center;
            color: var(--faint); font-size: 0.75rem;
        }
        .pl-meta { flex: 1; min-width: 0; }
        .pl-name {
            font-size: 0.9rem; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pl-sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
        .pl-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .icon-btn {
            width: var(--btn-h-md); height: var(--btn-h-md); border-radius: var(--btn-radius-md); border: 1.5px solid var(--border);
            background: var(--surface-2); color: var(--faint); cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0; line-height: 0; flex-shrink: 0;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .icon-btn svg { width: 16px; height: 16px; display: block; fill: currentColor; }
        .icon-btn:hover { border-color: var(--faint); color: var(--fg); }
        .icon-btn.is-empty { color: var(--faint); }
        .icon-btn.is-empty:hover { color: #7bd389; border-color: rgba(123,211,137,0.5); }
        .icon-btn.is-partial {
            color: #e8c547; border-color: rgba(232,197,71,0.55); background: rgba(232,197,71,0.1);
        }
        .icon-btn.is-partial:hover {
            color: #7bd389; border-color: rgba(123,211,137,0.55); background: rgba(123,211,137,0.12);
        }
        .icon-btn.is-full {
            color: #7bd389; border-color: rgba(123,211,137,0.5); background: rgba(123,211,137,0.12);
        }
        .icon-btn.is-full:hover {
            color: var(--danger); border-color: rgba(224,112,112,0.55); background: rgba(224,112,112,0.12);
        }
        .icon-btn.is-toggle svg { transition: transform 0.2s ease; }
        .icon-btn.is-toggle.is-collapsed svg { transform: rotate(-90deg); }
        .tracks-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .tracks-head-meta { flex: 1; min-width: 0; }
        .tracks-head-meta strong {
            display: block; font-size: 0.95rem;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .tracks-head-meta span { font-size: 0.72rem; color: var(--muted); }
        .track-item {
            display: flex; align-items: center; gap: 10px; padding: 8px 12px;
            border-bottom: 1px solid var(--border);
        }
        .track-item:last-child { border-bottom: none; }
        .track-item:hover { background: rgba(255,255,255,0.03); }
        .track-item img {
            width: 36px; height: 36px; border-radius: 4px; object-fit: cover;
            flex-shrink: 0; background: #111;
        }
        .track-item .info { flex: 1; min-width: 0; }
        .track-item .info strong {
            display: block; font-size: 0.84rem; font-weight: 500;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .track-item .info span {
            font-size: 0.7rem; color: var(--muted);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
        }


        /* list title + unified actions */

        .view { display: none; }
        .view.is-on { display: block; }
        .home-head {
            margin: 8px 0 16px;
        }
        .home-head h2 {
            margin: 0; font-family: 'Syne', sans-serif; font-size: 1.35rem;
            font-weight: 700; letter-spacing: -0.03em;
        }
        .home-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }
        .home-lists {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
            gap: 12px;
        }
        .home-tile {
            position: relative;
            aspect-ratio: 1;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--surface);
            overflow: hidden;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
        }
        .home-tile:hover {
            border-color: rgba(255,77,77,0.45);
            box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }
        .home-tile-new {
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-style: dashed;
            background: transparent;
            color: var(--muted);
        }
        .home-tile-new:hover {
            color: var(--fg);
            border-color: rgba(255,77,77,0.55);
            background: rgba(255,77,77,0.06);
        }
        .home-tile-new .plus {
            width: 44px; height: 44px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; font-weight: 600; line-height: 0;
            background: var(--accent); color: var(--accent-fg);
            box-shadow: 0 6px 16px rgba(255,77,77,0.28);
        }
        .home-tile-new span.label { font-size: 0.8rem; font-weight: 600; }
        .home-tile-mosaic {
            flex: 1; min-height: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            background: #111;
        }
        .home-tile-mosaic .cell {
            background: #1a1a1e center/cover no-repeat;
            min-height: 0;
        }
        .home-tile-mosaic .cell.is-empty { background: #16161a; }
        .home-tile-foot {
            flex-shrink: 0;
            padding: 8px 10px 10px;
            background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 30%, rgba(12,12,14,0.95));
            margin-top: -28px;
            position: relative;
            z-index: 1;
        }
        .home-tile-title {
            font-weight: 700; font-size: 0.86rem; letter-spacing: -0.02em;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            color: var(--fg);
        }
        .home-tile-meta {
            font-size: 0.68rem; color: var(--muted); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .home-tile-del {
            position: absolute; top: 6px; right: 6px; z-index: 2;
            width: 28px; height: 28px; border-radius: 8px; border: none;
            background: rgba(0,0,0,0.55); color: #ddd; cursor: pointer;
            display: none; align-items: center; justify-content: center;
            line-height: 0;
        }
        .home-tile-del svg { width: 14px; height: 14px; fill: currentColor; display: block; }
        .home-tile:hover .home-tile-del { display: inline-flex; }
        .home-tile-del:hover { background: #c62828; color: #fff; }
        .tour-section { margin-top: 28px; }
        .tour-section h2 {
            margin: 0 0 4px; font-family: 'Syne', sans-serif; font-size: 1.25rem;
            font-weight: 700; letter-spacing: -0.03em;
        }
        .tour-section .sub { margin: 0 0 14px; color: var(--muted); font-size: 0.85rem; }
        .tour-play-wrap { max-width: 920px; margin: 0 auto; width: 100%; }

        .tour-banner {
            text-align: center;
            margin: 0 0 14px;
            padding: 12px 16px;
            background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent), var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
        }
        .tour-banner .site {
            font-size: 0.68rem;
            color: var(--faint);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .tour-banner h2 {
            margin: 6px 0 8px;
            font-family: 'Syne', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .tour-banner .meta { font-size: 0.88rem; color: var(--muted); }
        .tour-banner .meta strong { color: var(--fg); }

        .tour-match {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 16px;
            align-items: stretch;
            flex: 1;
            min-height: 0;
        }
        @media (max-width: 640px) {
            .tour-match { grid-template-columns: 1fr; gap: 10px; }
            .tour-vs { order: 0; padding: 4px 0; }
        }
        .tour-option {
            background: var(--surface);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: border-color 0.15s, transform 0.2s, box-shadow 0.2s;
            min-height: 0;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
            text-align: left;
            width: 100%;
            padding: 0;
            color: inherit;
            font: inherit;
        }
        .tour-option:hover {
            border-color: rgba(255,255,255,0.13);
            box-shadow: 0 14px 36px rgba(0,0,0,0.3);
            transform: translateY(-3px);
        }
        .tour-option:active { transform: translateY(-1px); }
        .tour-option .art {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: #111;
            flex-shrink: 0;
        }
        .tour-option .art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }
        .tour-option:hover .art img {
            transform: scale(1.03);
        }
        .tour-option .body {
            padding: 14px 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex-shrink: 0;
            background: transparent;
            border: none;
        }
        .tour-option .txt { min-width: 0; text-align: left; flex: 1; }
        .tour-option-title-row {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .tour-option-title-row .txt { min-width: 0; }
        .tour-option .t {
            font-family: Syne, sans-serif;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: -0.02em;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .tour-option .a {
            font-size: 0.82rem;
            color: var(--muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tour-option-listen {
            width: 32px;
            min-width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.05);
            color: var(--muted);
            font-family: inherit;
            font-size: 0.78rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .tour-option-listen:hover {
            color: var(--fg);
            background: rgba(255,255,255,0.06);
        }
        .tour-option-listen svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tour-option-listen .tour-pause-icon { display: none; }
        .tour-option-listen.is-playing .tour-play-icon { display: none; }
        .tour-option-listen.is-playing .tour-pause-icon { display: block; }
        .tour-vs {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            color: var(--muted);
            font-size: 1.5rem;
            letter-spacing: 0.06em;
            padding: 0 8px;
            user-select: none;
        }
        .tour-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 16px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .tour-edit-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin: 0 0 14px;
        }
        #view-tour-edit .tour-selection-bar {
            margin-top: -6px;
            margin-bottom: 14px;
        }
        #view-tour-edit #tour-pool-zone.tour-select-mode .track-card {
            cursor: pointer;
        }
        .tour-count-hint { font-size: 0.82rem; color: var(--muted); }
        .tour-count-hint.ok { color: #7bd389; }
        .tour-count-hint.bad { color: #ff6b6b; }
        .tour-track-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }

        /* Full-viewport shells: no page scrollbar on lobby / play */
        html:has(body.tour-focus) {
            overflow: hidden !important;
            scrollbar-gutter: auto;
        }
        body.tour-focus {
            overflow: hidden !important;
            height: 100vh;
            height: 100dvh;
            padding-top: 12px;
            padding-bottom: 12px;
            margin: 0;
        }
        body.tour-focus #player-bar { display: none !important; }
        body.tour-focus .wrap {
            max-height: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        body.tour-focus .header-top { display: none; }
        body.tour-playing { overflow: hidden; }
        body.tour-playing #player-bar { display: flex !important; }
        body.tour-playing #view-tour-play {
            padding-bottom: 86px;
        }

        #view-tour-lobby.is-on,
        #view-tour-play.is-on {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: auto;
            max-height: 100%;
            overflow: hidden;
            min-height: 0;
        }
        #view-tour-lobby .editor-topbar,
        #view-tour-play .editor-topbar {
            flex-shrink: 0;
            margin-bottom: 8px;
        }
        #view-tour-lobby .editor-topbar {
            grid-template-columns: 1fr auto;
            padding: 0;
            min-height: 34px;
        }
        #view-tour-lobby .editor-topbar .editor-back {
            justify-self: start;
            width: 34px;
            min-width: 34px;
            height: 34px;
            padding: 0;
            border: 0 !important;
            border-radius: 0;
            background: transparent !important;
            color: var(--muted);
            box-shadow: none !important;
            justify-content: center;
        }
        #view-tour-lobby .editor-topbar .editor-back:hover {
            color: var(--fg);
            background: transparent !important;
            border-color: transparent !important;
        }
        #view-tour-lobby .editor-topbar .editor-back .ui-icon {
            width: 20px;
            height: 20px;
        }
        #view-tour-lobby .editor-topbar .tour-lobby-edit-top {
            justify-self: end;
        }
        #view-tour-lobby .tour-lobby {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            max-width: 576px;
            margin: 0 auto;
            width: 100%;
            text-align: center;
            padding: 8px 4px 14px;
        }
        #view-tour-play .tour-play-wrap {
            flex: 1;
            min-height: 0;
            max-width: 920px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            padding-bottom: 4px;
        }

        #view-tour-play .tour-banner {
            margin-bottom: 12px;
            padding: 10px 14px;
            flex-shrink: 0;
        }
        #view-tour-play .tour-banner h2 {
            font-size: 1.05rem;
            margin: 4px 0 4px;
        }
        #view-tour-play .tour-match {
            flex: 1;
            min-height: 0;
        }
        #view-tour-play .tour-option .art {
            max-height: min(36vh, 280px);
        }
        @media (max-width: 640px) {
            #view-tour-play .tour-option .art {
                max-height: min(26vh, 200px);
            }
            #view-tour-play .tour-option .t { font-size: 0.9rem; }
            #view-tour-play .tour-option .body { padding: 12px; }
        }

        .tour-stats {
            text-align: left;
            max-width: 480px;
            margin: 12px auto 0;
            background: var(--surface-2);
            border-radius: 14px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            max-height: none;
            overflow: visible;
            flex-shrink: 0;
            min-height: auto;
            width: 100%;
            box-sizing: border-box;
        }
        .tour-stats h3 {
            margin: 0 0 8px;
            font-size: 0.85rem;
            font-family: Syne, sans-serif;
            letter-spacing: -0.02em;
        }
        .tour-stats-row {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.8rem;
        }
        .tour-stats-row:last-child { border-bottom: none; }
        .tour-stats-row img {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .tour-stats-row .nm { flex: 1; min-width: 0; }
        .tour-stats-row .nm strong {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tour-stats-row .sc {
            color: var(--muted);
            white-space: nowrap;
            font-size: 0.75rem;
            font-variant-numeric: tabular-nums;
        }

        /* Lobby denser to fit viewport */
        .tour-lobby-cover {
            width: min(100%, 520px, 58vh);
            aspect-ratio: 16 / 9;
            margin: 0 auto 18px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: #111;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            box-shadow: 0 12px 32px rgba(0,0,0,0.35);
            flex-shrink: 0;
        }
        .tour-lobby-cover .cell {
            background: #16161a center/cover no-repeat;
            min-height: 0;
        }
        .tour-lobby-cover .cell.is-empty { background: #1a1a1e; }
        .tour-lobby-title {
            margin: 0 0 4px;
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.15rem, 2.8vw, 1.4rem);
            font-weight: 700;
            letter-spacing: -0.03em;
            flex-shrink: 0;
        }
        .tour-lobby-meta {
            margin: 0 0 12px;
            color: var(--muted);
            font-size: 0.84rem;
            flex-shrink: 0;
        }
        .tour-lobby-fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 12px;
            text-align: left;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 12px 14px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .tour-lobby-fields label {
            display: block;
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--faint);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin: 0 0 5px;
        }
        .tour-lobby-field { min-width: 0; }
        .tour-lobby-field label { margin-bottom: 5px; }
        .tour-lobby-fields select {
            width: 100%;
            height: 40px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.88rem;
            outline: none;
        }
        .tour-lobby-fields select:focus {
            border-color: rgba(255,77,77,0.5);
            box-shadow: 0 0 0 3px rgba(255,77,77,0.12);
        }
        .tour-lobby-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
            flex-shrink: 0;
        }
        .tour-lobby-actions .tool-btn {
            justify-content: center;
            height: 44px;
            font-size: 0.92rem;
        }
        body.tour-focus:not(.tour-playing) #player-bar {
            display: flex !important;
        }
        body.tour-focus:not(.tour-playing) #view-tour-lobby {
            padding-bottom: 86px;
        }
        .tour-lobby-edit-wrap {
            display: none;
        }
        .tour-lobby-edit-wrap .tool-btn {
            height: 34px;
            font-size: 0.78rem;
            color: var(--muted);
            background: transparent;
            border-color: transparent;
        }
        .tour-lobby-edit-wrap .tool-btn:hover {
            color: var(--fg);
            border-color: var(--border);
            background: var(--surface);
        }
        .tour-lobby-warn {
            margin: 0 0 10px;
            font-size: 0.8rem;
            color: var(--danger);
            display: none;
            flex-shrink: 0;
        }
        .tour-lobby-warn.is-on { display: block; }
        @media (max-width: 620px) {
            .tour-lobby-fields { grid-template-columns: 1fr; gap: 10px; }
            .tour-lobby-cover { width: min(100%, 460px); }
        }

        /* Final result */
        .tour-result {
            text-align: center;
            padding: 20px 16px 16px;
            background: linear-gradient(180deg, rgba(255,77,77,0.08), transparent 42%), var(--surface);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 18px;
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: visible;
            max-height: none;
            width: 100%;
            box-sizing: border-box;
            flex: 0 0 auto;
            box-shadow: 0 16px 40px rgba(0,0,0,0.28);
        }
        #view-tour-play .tour-play-wrap.is-result {
            justify-content: flex-start;
            overflow-x: hidden;
            overflow-y: auto;
            padding-right: 4px;
        }
        .tour-result-crown {
            font-size: 1.4rem;
            margin-bottom: 6px;
            letter-spacing: 0.08em;
            color: #ffc300;
        }
        .tour-result-art {
            width: min(180px, 42vw);
            height: min(180px, 42vw);
            object-fit: cover;
            border-radius: 16px;
            margin: 0 auto 12px;
            display: block;
            box-shadow: 0 12px 28px rgba(0,0,0,0.4);
            border: 2px solid rgba(255,195,0,0.35);
            flex-shrink: 0;
        }
        .tour-result-art-ph {
            width: min(180px, 42vw);
            height: min(180px, 42vw);
            border-radius: 16px;
            margin: 0 auto 12px;
            background: #1a1a1e;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--faint);
            font-size: 2rem;
            flex-shrink: 0;
        }
        .tour-result h2 {
            margin: 0 0 4px;
            font-family: Syne, sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #ffc300;
        }
        .tour-result-name {
            font-weight: 800;
            font-size: clamp(1.15rem, 3vw, 1.4rem);
            letter-spacing: -0.03em;
            line-height: 1.25;
            margin: 0 0 4px;
        }
        .tour-result-artist {
            color: var(--muted);
            font-size: 0.9rem;
            margin: 0 0 8px;
        }
        .tour-result-sub {
            color: var(--faint);
            font-size: 0.78rem;
            margin: 0 0 4px;
            flex-shrink: 0;
        }


        /* ── Sticky editor bar: один ряд ── */
        .editor-sticky {
            position: sticky;
            top: 0;
            z-index: 45;
            margin: 0 0 10px;
            padding: 0;
            background: rgba(12, 12, 14, 0.98);
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .editor-sticky-inner {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
            padding: 8px 8px 8px 46px;
            min-height: 48px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
        }
        .editor-sticky .editor-back {
            height: 34px;
            min-width: 34px;
            padding: 0 8px;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 10px;
        }
        .editor-sticky-title.list-title {
            margin: 0;
            padding: 2px 6px;
            font-size: 0.95rem;
            min-width: 0;
            max-width: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1 1 auto;
            line-height: 1.2;
        }
        .editor-save-badge {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: var(--muted);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 3px 8px;
            flex-shrink: 0;
            white-space: nowrap;
        }
        .editor-save-badge.is-dirty {
            color: #ffc300;
            border-color: rgba(255,195,0,0.35);
        }
        .editor-sticky-actions {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 5px;
            margin-left: auto;
            flex-shrink: 0;
        }
        .editor-sticky-actions .tool-btn {
            position: relative;
            height: 34px;
            width: 34px;
            min-width: 34px;
            padding: 0;
            font-size: 0;
            line-height: 0;
            border-radius: 10px;
            flex-shrink: 0;
            white-space: nowrap;
            align-items: center;
            justify-content: center;
        }
        .editor-sticky-actions .tool-btn.icon-only {
            width: 34px;
            min-width: 34px;
            padding: 0;
        }
        .editor-sticky-actions .tool-btn .ui-icon {
            width: 17px;
            height: 17px;
            display: block;
            flex: 0 0 auto;
            margin: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .editor-sticky-actions #open-import-btn {
            width: auto;
            min-width: 88px;
            padding: 0 12px;
            font-size: 0.8rem;
            line-height: normal;
            gap: 7px;
        }
        .editor-sticky-actions #open-import-btn .ui-icon {
            position: static;
            transform: none;
        }
        .tier-ratio-setting {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: -2px 0 14px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
        }
        .tier-ratio-setting-label {
            color: var(--muted);
            font-size: 0.8rem;
            font-weight: 600;
        }
        .ratio-toggle {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 30px;
            padding: 0 4px;
            border: 0;
            background: transparent;
            color: var(--muted);
            font: inherit;
            cursor: pointer;
        }
        .ratio-toggle-option {
            min-width: 28px;
            font-size: 0.72rem;
            font-weight: 700;
            text-align: center;
        }
        .ratio-toggle-option[data-ratio="wide"] { color: var(--fg); }
        .ratio-toggle-track {
            position: relative;
            width: 38px;
            height: 20px;
            border-radius: 999px;
            background: rgba(255,255,255,0.14);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
            transition: background 0.15s ease;
        }
        .ratio-toggle-thumb {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--fg);
            transition: transform 0.15s ease;
        }
        .ratio-toggle.is-square .ratio-toggle-thumb { transform: translateX(18px); }
        .ratio-toggle.is-square .ratio-toggle-track { background: rgba(255,255,255,0.28); }
        .ratio-toggle.is-square .ratio-toggle-option[data-ratio="square"] { color: var(--fg); }
        .ratio-toggle.is-square .ratio-toggle-option[data-ratio="wide"],
        .ratio-toggle:not(.is-square) .ratio-toggle-option[data-ratio="square"] { color: var(--muted); }
        .ratio-toggle:focus-visible {
            outline: 2px solid rgba(255,255,255,0.35);
            outline-offset: 3px;
        }
        .editor-sticky-actions .toolbar-search {
            position: relative;
            width: 11.5rem;
            flex-shrink: 0;
            margin-left: 0;
        }
        .editor-sticky-actions .toolbar-search input {
            height: 34px;
            font-size: 0.78rem;
            border-radius: 10px;
            padding: 0 32px 0 11px;
        }
        /* open-import uses success green via button system */
        #view-editor .list-title-wrap,
        #view-editor .tier-toolbar { display: none !important; }



        /* ══ Unified controls ══════════════════════════════════════ */
        /* Search: import uses flex wrap; toolbar-search keeps absolute clear */
        .import-filter-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 34px;
            padding: 0 10px 0 12px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.22);
            min-width: 0;
        }
        /* toolbar-search = absolute clear btn model; import-filter-wrap = flex model */
        .import-filter-wrap:focus-within {
            border-color: rgba(255,255,255,0.28);
            box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
        }
        .import-filter-wrap .import-filter,
        .import-filter {
            flex: 1;
            min-width: 0;
            height: 100%;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            outline: none !important;
            color: var(--fg);
            font-family: inherit;
            font-size: 0.8rem;
            padding: 0 !important;
            border-radius: 0 !important;
        }
        .import-filter::placeholder { color: var(--faint); }

        /* Custom scrollbars */
        .import-list,
        .scroll-y,
        .list-box,
        .tier-zone,
        #pool-zone,
        .import-modal-scroll {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.18) transparent;
        }
        .import-list::-webkit-scrollbar,
        .scroll-y::-webkit-scrollbar,
        .list-box::-webkit-scrollbar,
        .import-modal-scroll::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }
        .import-list::-webkit-scrollbar-track,
        .scroll-y::-webkit-scrollbar-track,
        .list-box::-webkit-scrollbar-track,
        .import-modal-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .import-list::-webkit-scrollbar-thumb,
        .scroll-y::-webkit-scrollbar-thumb,
        .list-box::-webkit-scrollbar-thumb,
        .import-modal-scroll::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.16);
            border-radius: 99px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        .import-list::-webkit-scrollbar-thumb:hover,
        .scroll-y::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.28);
            background-clip: padding-box;
        }
        .modal-body::-webkit-scrollbar,
        .editor-sticky-inner::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }
        .modal-body,
        .editor-sticky-inner {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.18) transparent;
        }
        .modal-body::-webkit-scrollbar-track,
        .editor-sticky-inner::-webkit-scrollbar-track {
            background: transparent;
        }
        .modal-body::-webkit-scrollbar-thumb,
        .editor-sticky-inner::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.16);
            border-radius: 99px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        .modal-body::-webkit-scrollbar-thumb:hover,
        .editor-sticky-inner::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.28);
            background-clip: padding-box;
        }

        /* Selection row expands sticky panel downward */
        #view-editor .editor-sticky {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        #view-editor .selection-bar {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px;
            margin: 0;
            max-height: 0;
            padding: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            border-top: 1px solid transparent;
            transition: max-height 0.22s ease, padding 0.22s ease, opacity 0.18s ease, border-color 0.18s ease;
        }
        #view-editor .selection-bar.is-on {
            max-height: 64px;
            padding: 10px 8px 8px;
            opacity: 1;
            pointer-events: none;
            overflow: visible;
            border-top-color: rgba(255,255,255,0.08);
        }

        .selection-count {
            display: inline-flex;
            align-items: center;
            height: 32px;
            padding: 0 12px;
            border-radius: 10px;
            background: rgba(255,77,77,0.12);
            border: 1px solid rgba(255,77,77,0.28);
            color: var(--fg);
            font-weight: 700;
            font-size: 0.8rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* Custom "Перемістити до" dropdown */
        .move-dd {
            position: relative;
            flex-shrink: 0;
        }
        .move-dd-btn {
            height: 32px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.04);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        .move-dd-btn:hover {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.16);
        }
        .move-dd-btn svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
            opacity: 0.7;
        }
        .move-dd-menu {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            z-index: 80;
            min-width: 180px;
            max-height: 240px;
            overflow-y: auto;
            padding: 6px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.1);
            background: #1a1a20;
            box-shadow: 0 16px 40px rgba(0,0,0,0.5);
        }
        .move-dd.is-open .move-dd-menu { display: block; }
        .move-dd-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 8px 10px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--fg);
            font-family: inherit;
            font-size: 0.82rem;
            cursor: pointer;
        }
        .move-dd-item:hover {
            background: rgba(255,77,77,0.12);
            color: #ffb4b4;
        }

        .selection-bar .tool-btn {
            height: 32px;
            padding: 0 12px;
            font-size: 0.78rem;
            border-radius: 10px;
            flex-shrink: 0;
        }
        .selection-bar .selection-spacer { flex: 1; min-width: 8px; }
        .selection-bar .selection-close {
            width: 32px;
            min-width: 32px;
            padding: 0;
        }

        /* Import filter matches tiers search */
        .import-filter-wrap {
            max-width: 220px;
            margin-left: auto;
            flex: 1;
        }
        .import-filter-wrap svg {
            flex-shrink: 0;
            opacity: 0.45;
        }



        /* Import dialog — як на скріні React */
        #import-modal .import-modal {
            max-width: min(560px, 96vw);
            width: 100%;
            max-height: min(88vh, 720px);
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
            border-radius: 16px;
            background: #141418;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 24px 64px rgba(0,0,0,0.55);
        }
        .import-modal-header {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 18px 18px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            flex-shrink: 0;
        }
        .import-modal-heading {
            flex: 1;
            min-width: 0;
        }
        .import-modal-heading h3 {
            margin: 0 0 6px;
            font-family: Syne, sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .import-hint {
            margin: 0;
            font-size: 0.84rem;
            color: var(--muted);
            line-height: 1.45;
        }
        .import-modal-x {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--muted);
            font-size: 1rem;
            cursor: pointer;
            flex-shrink: 0;
            line-height: 1;
        }
        .import-modal-x:hover {
            background: rgba(255,255,255,0.06);
            color: var(--fg);
        }
        #import-modal .import-modal-scroll {
            overflow: auto;
            flex: 1;
            min-height: 0;
            padding: 14px 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .import-url-row {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }
        .import-url-row input {
            flex: 1;
            min-width: 0;
            height: 42px;
            padding: 0 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.25);
            color: var(--fg);
            font-family: inherit;
            font-size: 0.875rem;
            outline: none;
        }
        .import-url-row input:focus {
            border-color: rgba(255,77,77,0.45);
            box-shadow: 0 0 0 3px rgba(255,77,77,0.12);
        }
        .import-url-row input::placeholder { color: var(--faint); }
        .import-load-btn {
            height: 42px !important;
            padding: 0 16px !important;
            border-radius: 12px !important;
            gap: 6px;
            font-weight: 600;
            flex-shrink: 0;
        }
        .import-load-btn svg { flex-shrink: 0; }
        .import-status {
            font-size: 0.82rem;
            color: var(--muted);
        }
        .import-status.is-err { color: var(--danger); }
        .import-status.is-ok { color: #7bd389; }

        /* Results block — hidden until load */
        .import-results {
            display: none;
            flex-direction: column;
            gap: 10px;
            min-height: 0;
            flex: 1;
        }
        .import-results.is-visible {
            display: flex;
        }
        .import-results-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .import-results-meta-line {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex: 1;
        }
        .import-pl-title {
            font-family: Syne, sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--fg);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
            max-width: min(50vw, 14rem);
        }
        .import-count-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            min-width: 2rem;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--fg);
            font-size: 0.82rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            flex-shrink: 0;
        }
        /* import-filter-wrap unified above */
        .import-filter-wrap svg { flex-shrink: 0; opacity: 0.5; }
        .import-list {
            flex: 1;
            min-height: 120px;
            max-height: min(42vh, 340px);
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-right: 2px;
        }
        .import-item {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            text-align: left;
            padding: 8px 10px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.03);
            color: var(--fg);
            font-family: inherit;
            cursor: pointer;
            transition: border-color 0.12s, background 0.12s;
        }
        .import-item:hover:not(:disabled) {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.12);
        }
        .import-item.is-on {
            border-color: rgba(255,255,255,0.28);
            background: rgba(255,255,255,0.06);
        }
        .import-item.is-already {
            opacity: 0.5;
            cursor: default;
        }
        .import-item img {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 8px;
            flex-shrink: 0;
            background: #111;
        }
        .import-item .txt { flex: 1; min-width: 0; }
        .import-item .t {
            display: block;
            font-size: 0.88rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .import-item .a {
            display: block;
            font-size: 0.75rem;
            color: var(--muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .import-item .mark {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            color: transparent;
        }
        .import-item.is-on .mark {
            border-color: rgba(255,255,255,0.62);
            background: rgba(255,255,255,0.2);
            color: var(--fg);
        }
        .import-item .already-badge {
            font-size: 0.68rem;
            color: var(--muted);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 2px 8px;
            flex-shrink: 0;
        }
        .import-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255,255,255,0.06);
            flex-shrink: 0;
        }
        .import-footer > span {
            font-size: 0.82rem;
            color: var(--muted);
        }
        .import-footer-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .import-footer-actions .tool-btn {
            height: 36px;
            border-radius: 10px;
            font-size: 0.82rem;
        }

        /* Tournament lobby polish */
        .tour-lobby {
            max-width: 420px;
        }
        .tour-lobby-actions .tool-btn.primary {
            width: 100%;
            height: 48px;
            font-size: 0.95rem;
            border-radius: 12px;
            font-weight: 600;
        }
        .tour-lobby-fields {
            border-radius: 16px;
            padding: 16px;
            background: var(--surface);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .tour-lobby-cover {
            border-radius: 18px;
            box-shadow: 0 16px 40px rgba(0,0,0,0.35);
        }
        .tour-banner {
            background: transparent;
            border: none;
            padding: 0 0 8px;
            margin-bottom: 8px;
        }
        .tour-banner .site { display: none; }
        .tour-banner h2 {
            font-size: 1.25rem;
        }
        .tour-match {
            gap: 20px;
            align-items: start;
        }

        .tour-result-crown {
            font-size: 1.6rem;
        }

        @media (max-width: 720px) {
            .editor-sticky-title.list-title {
                max-width: 7rem;
            }
            .editor-sticky-actions .toolbar-search {
                width: 8.5rem;
            }
        }

        .home-empty-hint {
            grid-column: 1 / -1;
            text-align: center; padding: 8px 4px 4px;
            color: var(--faint); font-size: 0.8rem;
        }

        .editor-topbar {
            display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
        }
        .editor-back {
            height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border);
            background: var(--surface); color: var(--fg); font-family: inherit;
            font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
        }
        .editor-back:hover { border-color: rgba(255,77,77,0.4); }
        .list-title.is-empty:not(:focus)::before {
            content: attr(data-placeholder);
            color: var(--faint);
            font-weight: 600;
            pointer-events: none;
        }

        .list-title {
            margin: 4px 0 12px;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: clamp(1.15rem, 3vw, 1.45rem);
            letter-spacing: -0.03em;
            color: var(--fg);
            line-height: 1.25;
            min-height: 1.3em;
            outline: none;
            border-radius: 6px;
            padding: 2px 4px;
            margin-left: -4px;
            cursor: text;
        }
        .list-title.is-empty:not(:focus)::before {
            content: attr(data-placeholder);
            color: var(--faint);
            font-weight: 600;
            pointer-events: none;
        }
        .list-title:focus { box-shadow: 0 0 0 2px rgba(255,77,77,0.25); }
        .tier-toolbar {
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            margin: 0 0 14px; padding: 10px 12px;
            background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        }
        /* Export PNG — єдиний блок стилів (без конфліктів) */
        #export-shot {
            position: fixed;
            left: -10000px;
            top: 0;
            background: #0c0c0e;
            padding: 16px;
            box-sizing: border-box;
            z-index: -1;
            pointer-events: none;
            font-family: 'Outfit', system-ui, sans-serif;
            color: #f3f3f5;
        }
        #export-shot .export-title {
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 1.35rem;
            letter-spacing: -0.03em;
            color: #f3f3f5;
            margin: 0 0 14px;
            padding: 0 2px;
            line-height: 1.25;
        }
        #export-shot .tier-container {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            width: max-content !important;
            max-width: none !important;
        }
        #export-shot .tier-row {
            display: flex !important;
            align-items: stretch !important;
            background: #141418 !important;
            border: 1px solid #2a2a32 !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            width: max-content !important;
            min-width: 0 !important;
        }
        #export-shot .tier-label-wrapper {
            width: 4.5rem !important;
            min-width: 4.5rem !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            color: #14110f !important;
            padding: 6px 4px !important;
            box-sizing: border-box !important;
        }
        #export-shot .tier-label {
            font-family: 'Syne', sans-serif !important;
            font-size: 1.25rem !important;
            font-weight: 700 !important;
        }
        #export-shot .tier-count {
            font-size: 0.65rem !important;
            font-weight: 600 !important;
            opacity: 0.8 !important;
            margin-top: 3px !important;
        }
        #export-shot .tier-zone {
            display: grid !important;
            grid-auto-flow: row !important;
            gap: 6px !important;
            padding: 8px !important;
            align-content: start !important;
            box-sizing: border-box !important;
            flex: 0 0 auto !important;
            min-height: 3.25rem !important;
            background: transparent !important;
        }
        #export-shot .track-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid rgba(255,255,255,0.07) !important;
            border-radius: 13px !important;
            background: #1c1c22 !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            position: relative !important;
            width: 132px !important;
            min-width: 132px !important;
            max-width: 132px !important;
        }
        #export-shot .thumb {
            display: block !important;
            width: 132px !important;
            height: 74px !important;
            min-width: 132px !important;
            min-height: 74px !important;
            max-width: 132px !important;
            max-height: 74px !important;
            object-fit: cover !important;
            object-position: center !important;
            background-color: #111 !important;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            border-radius: 0 !important;
            flex-shrink: 0 !important;
            aspect-ratio: 16 / 9 !important;
            transform: none !important;
        }
        body.card-ratio-square #export-shot .thumb {
            width: 132px !important;
            height: 132px !important;
            min-width: 132px !important;
            min-height: 132px !important;
            max-width: 132px !important;
            max-height: 132px !important;
            aspect-ratio: 1 / 1 !important;
        }
        #export-shot .track-body {
            display: flex !important;
            align-items: center !important;
            gap: 7px !important;
            padding: 8px 9px 9px !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }
        #export-shot .track-details { flex: 1 !important; min-width: 0 !important; }
        #export-shot .track-title {
            font-weight: 600 !important;
            font-size: 0.8rem !important;
            line-height: 1.25 !important;
            color: #f3f3f5 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            display: block !important;
        }
        #export-shot .track-artist {
            font-size: 0.69rem !important;
            color: #8e8e96 !important;
            margin-top: 2px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        #export-shot .play-btn,
        #export-shot .play-btn::before { display: none !important; }
        #export-shot .track-card.is-playing,
        #export-shot .track-card.is-selected,
        #export-shot .track-card.is-source {
            border-color: rgba(255,255,255,0.07) !important;
            box-shadow: none !important;
            opacity: 1 !important;
            background: #1c1c22 !important;
        }
        #export-shot .track-card.is-selected::after { display: none !important; }

        /* Уніфікований .tool-btn — раніше був розкиданий по 3 місцях файлу
           з конфліктними значеннями; звели в один блок без зміни підсумкового вигляду. */
        /* (export-shot styles unified above) */

        /* PNG preview */
        #png-preview-modal .modal {
            max-width: min(960px, 96vw);
            max-height: min(92vh, 900px);
        }
        .png-preview-body {
            display: flex; align-items: center; justify-content: center;
            padding: 12px 16px; overflow: auto; background: #08080a;
            min-height: 120px;
        }
        .png-preview-body img {
            max-width: 100%; max-height: min(70vh, 720px);
            height: auto; border-radius: 8px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.45);
        }

        /* toast */
        #toast-host {
            position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom, 0px));
            transform: translateX(-50%); z-index: 250;
            display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
            pointer-events: none; width: min(92vw, 22rem);
        }
        .toast {
            padding: 12px 16px; border-radius: 12px; background: rgba(28,28,34,0.92);
            border: 1px solid var(--border); color: var(--fg); font-size: 0.85rem; text-align: center;
            box-shadow: 0 12px 32px rgba(0,0,0,0.45); backdrop-filter: blur(10px);
            opacity: 0; transform: translateY(12px);
            transition: opacity 0.28s ease, transform 0.28s ease; max-width: 100%;
        }
        .toast.is-show { opacity: 1; transform: translateY(0); }
        .toast.is-hide { opacity: 0; transform: translateY(8px); }
        .toast.ok { border-color: rgba(123,211,137,0.35); }
        .toast.err { border-color: rgba(224,112,112,0.45); color: #f0c0c0; }

        /* tier editor modal (from index) */
        .modal-backdrop {
            position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 200;
            display: flex; align-items: center; justify-content: center; padding: 16px;
            opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s;
            overscroll-behavior: contain;
        }
        .modal-backdrop.is-open { opacity: 1; visibility: visible; }
        body.modal-open { overflow: hidden; }
        .modal {
            background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
            width: 100%; max-width: 440px; max-height: min(90vh, 640px);
            display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }
        .modal-header { padding: 18px 20px 12px; flex-shrink: 0; }
        .modal-header h3 { margin: 0; font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 700; }
        .modal-body { padding: 4px 20px 12px; overflow-y: auto; flex: 1; min-height: 0; }
        .modal-footer {
            padding: 12px 20px 18px; display: flex; gap: 8px; justify-content: flex-end;
            align-items: center; border-top: 1px solid var(--border); flex-shrink: 0;
        }
        .modal-footer-right { display: flex; gap: 8px; margin-left: auto; }

        .tier-edit-list { display: flex; flex-direction: column; gap: 8px; }
        .tier-edit-item {
            display: flex; align-items: center; gap: 8px; background: var(--surface-2);
            border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
        }
        .tier-edit-item.is-dragging-tier { opacity: 0.35; }
        .tier-edit-item.drag-over-target {
            border-color: rgba(255,255,255,0.35);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.05);
        }
        .tier-drag-handle {
            width: 20px; height: 36px; display: flex; align-items: center; justify-content: center;
            cursor: grab; color: var(--faint); flex-shrink: 0; user-select: none; touch-action: none;
            letter-spacing: -2px;
        }
        .tier-edit-swatch {
            width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.25);
            cursor: pointer; flex-shrink: 0;
        }
        .tier-edit-name {
            flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 8px;
            border: 1px solid var(--border); background: var(--bg); color: var(--fg);
            font-family: inherit; font-size: 0.9rem; font-weight: 600; outline: none;
        }
        .tier-edit-del {
            width: var(--btn-h-sm); height: var(--btn-h-sm); border: none; border-radius: 8px; background: transparent;
            color: var(--muted); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .tier-edit-del svg { width: 15px; height: 15px; fill: currentColor; }
        .tier-edit-del:hover { background: rgba(224,112,112,0.15); color: var(--danger); }
        .tier-edit-del:disabled { opacity: 0.3; cursor: not-allowed; }
        .add-tier-in-modal {
            width: 100%; height: 40px; margin-top: 10px; border-radius: 8px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--muted);
            font-family: inherit; font-size: 0.85rem; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        }
        .add-tier-in-modal:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); color: var(--fg); }
        .add-tier-in-modal .ui-icon { width: 16px; height: 16px; display: block; }
        .color-popover {
            position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.55);
            display: none; width: 200px;
        }
        .color-popover.is-open { display: block; }
        .color-popover-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
        .color-popover-presets button {
            width: 100%; aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent;
            cursor: pointer; padding: 0;
        }
        .color-popover-presets button.is-active { border-color: #fff; }
        .color-popover-custom { display: flex; align-items: center; gap: 8px; }
        .color-popover-custom label { font-size: 0.75rem; color: var(--muted); flex: 1; }
        .color-popover-custom input[type=color] {
            width: 36px; height: 28px; border: 1px solid var(--border); border-radius: 6px;
            padding: 2px; background: var(--surface-2); cursor: pointer;
        }
        .delete-confirm {
            margin-top: 12px; padding: 12px; background: var(--surface-2);
            border: 1px solid var(--border); border-radius: 10px; display: none;
        }
        .delete-confirm.is-visible { display: block; }
        .delete-confirm p { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
        .delete-confirm select {
            width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
            background: var(--bg); color: var(--fg); font-family: inherit; font-size: 0.875rem;
            margin-bottom: 10px;
        }
        .delete-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

    
        /* ══ Neutral interactions (no red chrome) ══ */
        .track-card:hover {
            border-color: rgba(255,255,255,0.2) !important;
            background: #22222a !important;
            box-shadow: none !important;
        }
        .track-card.is-selected {
            border-color: rgba(255,255,255,0.32) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
            background: rgba(255,255,255,0.05) !important;
        }
        .track-card.is-selected::after {
            background: rgba(255,255,255,0.16) !important;
            color: var(--fg) !important;
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: none !important;
        }
        .track-card.is-playing {
            border-color: rgba(255,255,255,0.38) !important;
            box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.14), 0 6px 16px rgba(0,0,0,0.18) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--surface-2) !important;
        }
        .track-card.is-playing:hover {
            border-color: rgba(255,255,255,0.45) !important;
        }
        .track-card.drag-over-target {
            border-color: rgba(255,255,255,0.4) !important;
            background: rgba(255,255,255,0.07) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
            outline: none !important;
        }
        .tier-row.drag-over,
        #pool.drag-over {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18) !important;
            border-color: rgba(255,255,255,0.2) !important;
        }
        .home-tile:hover {
            border-color: rgba(255,255,255,0.22) !important;
            box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
        }
        .home-tile-new {
            border-color: rgba(255,255,255,0.12) !important;
            background: rgba(255,255,255,0.03) !important;
        }
        .home-tile-new:hover {
            border-color: rgba(255,255,255,0.25) !important;
            background: rgba(255,255,255,0.06) !important;
        }
        .home-tile-new .plus {
            background: rgba(255,255,255,0.1) !important;
            color: var(--fg) !important;
            box-shadow: none !important;
        }
        .selection-count {
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            color: var(--fg) !important;
            border-radius: 10px !important;
        }
        #select-mode-btn.primary {
            background: rgba(255,255,255,0.1) !important;
            border-color: rgba(255,255,255,0.28) !important;
            color: var(--fg) !important;
        }
        /* selection row: no extra frames */
        #view-editor .selection-bar.is-on {
            background: transparent !important;
            box-shadow: none !important;
            border-top: 1px solid rgba(255,255,255,0.06) !important;
        }
        #view-editor .selection-bar .tool-btn,
        #view-editor .selection-bar .move-dd-btn {
            border-color: rgba(255,255,255,0.1) !important;
            box-shadow: none !important;
            outline: none !important;
        }
        /* ══ Final pass: no red chrome on interactions ══ */
        .track-card.drag-over-target,
        .track-card.is-source,
        .tier-row.drag-over,
        #pool.drag-over {
            border-color: rgba(255,255,255,0.28) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
            background: rgba(255,255,255,0.06) !important;
        }
        .track-card.is-source {
            opacity: 0.35 !important;
            background: transparent !important;
            box-shadow: none !important;
            border-color: rgba(255,255,255,0.08) !important;
        }
        .play-btn {
            /* keep red play as brand YT — optional neutralize ring only */
            box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
        }
        .home-tile:hover,
        .home-tile-new:hover {
            border-color: rgba(255,255,255,0.22) !important;
            background: rgba(255,255,255,0.05) !important;
            box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
        }
        .home-tile-new .plus {
            background: rgba(255,255,255,0.1) !important;
            color: var(--fg) !important;
            box-shadow: none !important;
        }
        .editor-sticky-actions .tool-btn:hover,
        .selection-bar .tool-btn:hover {
            border-color: rgba(255,255,255,0.18) !important;
        }
        /* focus rings neutral */
        input:focus, textarea:focus, select:focus, .toolbar-search:focus-within, .import-filter-wrap:focus-within {
            border-color: rgba(255,255,255,0.28) !important;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
        }
        .badge, .badge-local {
            color: var(--muted) !important;
            border-color: rgba(255,255,255,0.1) !important;
            background: rgba(255,255,255,0.05) !important;
        }

        /* ══════════════════════════════════════════════════════════
           AUTHORITATIVE UI FIXES (wins over older duplicates)
           ══════════════════════════════════════════════════════════ */
        :root {
            --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,0.22);
            --btn-h: 34px;
            --btn-r: 10px;
        }

        /* Buttons: one system */
        .tool-btn {
            height: var(--btn-h) !important;
            min-height: var(--btn-h);
            padding: 0 12px !important;
            border-radius: var(--btn-r) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            background: rgba(255,255,255,0.04) !important;
            color: var(--fg) !important;
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 500 !important;
            letter-spacing: -0.01em;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            white-space: nowrap;
            box-shadow: none !important;
            transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
        }
        .tool-btn svg {
            width: 15px;
            height: 15px;
            fill: currentColor;
            flex-shrink: 0;
        }
        .tool-btn.icon-only {
            width: var(--btn-h-md);
            min-width: var(--btn-h-md);
            padding: 0 !important;
            justify-content: center;
        }
        .tool-btn.icon-only svg { width: 17px; height: 17px; }
        .tool-btn:hover:not(:disabled) {
            background: rgba(255,255,255,0.09) !important;
            border-color: rgba(255,255,255,0.18) !important;
            color: var(--fg) !important;
            filter: none !important;
        }
        .tool-btn:disabled { opacity: 0.45; cursor: default; }
        .tool-btn.primary,
        .tool-btn.success {
            background: rgba(123, 211, 137, 0.12) !important;
            border-color: rgba(123, 211, 137, 0.45) !important;
            color: #9be4a8 !important;
            font-weight: 600 !important;
        }
        .tool-btn.primary:hover:not(:disabled),
        .tool-btn.success:hover:not(:disabled) {
            background: rgba(123, 211, 137, 0.22) !important;
            border-color: rgba(123, 211, 137, 0.65) !important;
            color: #b6f0c0 !important;
            filter: none !important;
        }
        .tool-btn.danger {
            background: rgba(224, 112, 112, 0.1) !important;
            border-color: rgba(224, 112, 112, 0.4) !important;
            color: #f0a0a0 !important;
            font-weight: 600 !important;
        }
        .tool-btn.danger:hover:not(:disabled) {
            background: rgba(224, 112, 112, 0.2) !important;
            border-color: rgba(224, 112, 112, 0.55) !important;
            color: #ffc0c0 !important;
        }
        .tool-btn.ghost {
            background: transparent !important;
            border-color: transparent !important;
            color: var(--muted) !important;
        }
        .tool-btn.ghost:hover:not(:disabled) {
            background: rgba(255,255,255,0.06) !important;
            color: var(--fg) !important;
        }
        .tool-btn:focus-visible,
        .move-dd-btn:focus-visible,
        .editor-back:focus-visible {
            outline: none !important;
            box-shadow: var(--focus-ring) !important;
        }
        /* selection bar: no extra plate / white frame */
        #view-editor .selection-bar.is-on {
            background: transparent !important;
            box-shadow: none !important;
            border-top: 1px solid rgba(255,255,255,0.06) !important;
            border-right: 0 !important;
            border-bottom: 0 !important;
            border-left: 0 !important;
            border-radius: 0 !important;
        }
        #view-editor .selection-bar .tool-btn:focus-visible {
            box-shadow: var(--focus-ring) !important;
        }

        /* Keep back navigation at the viewport edge as a simple arrow control. */
        #view-editor .editor-sticky {
            position: sticky;
            position: -webkit-sticky;
            isolation: isolate;
        }
        #view-editor .editor-sticky-inner > .editor-back {
            position: absolute;
            left: 8px;
            top: 8px;
            z-index: 2;
            width: 34px;
            min-width: 34px;
            height: 34px;
            padding: 0;
            border: 0 !important;
            border-radius: 0;
            background: transparent !important;
            color: var(--muted);
            box-shadow: none !important;
        }
        #view-editor .editor-sticky-inner > .editor-back:hover {
            color: var(--fg);
            background: transparent !important;
            border-color: transparent !important;
        }
        #view-editor .editor-sticky-inner > .editor-back .ui-icon {
            width: 20px;
            height: 20px;
        }
        #view-editor .editor-sticky-inner > .editor-back:focus-visible {
            outline: 2px solid rgba(255,255,255,0.3) !important;
            outline-offset: -2px;
            border: 0 !important;
        }

        /* Keep the tier search focus style consistent with the import search. */
        #view-editor .toolbar-search:focus-within {
            box-shadow: none !important;
        }
        #view-editor .toolbar-search input:focus {
            box-shadow: none !important;
        }

        /* Drag neutrals everywhere */
        .track-card.drag-over-target,
        .tier-row.drag-over,
        #pool.drag-over,
        .tier-edit-item.drag-over-target {
            border-color: rgba(255,255,255,0.32) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
            background: rgba(255,255,255,0.06) !important;
        }
        .track-card.is-source {
            border-color: rgba(255,255,255,0.12) !important;
            box-shadow: none !important;
            background: transparent !important;
        }
        /* Back navigation uses the same neutral interaction color as other controls. */
        .editor-back:hover,
        .editor-topbar .editor-back:hover {
            border-color: rgba(255,255,255,0.18) !important;
            background: rgba(255,255,255,0.08) !important;
            color: var(--fg) !important;
        }
        .editor-back:focus-visible {
            border-color: rgba(255,255,255,0.28) !important;
        }

        /* toolbar-search: absolute clear, never flex-collapse padding */
        .toolbar-search {
            display: block !important;
            position: relative !important;
            padding: 0 !important;
            height: auto !important;
            background: transparent !important;
            border: none !important;
            gap: 0 !important;
        }
        .toolbar-search input {
            display: block !important;
            width: 100% !important;
            height: 34px !important;
            padding: 0 32px 0 11px !important;
            border-radius: 10px !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            background: rgba(0,0,0,0.22) !important;
            box-shadow: none !important;
            outline: none !important;
            color: var(--fg) !important;
            font-size: 0.78rem !important;
        }
        .toolbar-search input:focus {
            border-color: rgba(255,255,255,0.28) !important;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
        }
        .toolbar-search .search-clear {
            position: absolute !important;
            right: 4px !important;
            top: 50% !important;
            transform: translateY(-50%);
            z-index: 2;
        }

        /* Unified local icon set: Lucide-style, 1.8px stroke and currentColor. */
        .ui-icon {
            width: 16px !important;
            height: 16px !important;
            display: block;
            flex: 0 0 auto;
            margin: 0;
            fill: none !important;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tool-btn > .ui-icon,
        .editor-back > .ui-icon,
        .add-tier-in-modal > .ui-icon {
            align-self: center;
            justify-self: center;
        }
        .icon-btn .ui-icon,
        .mini-open .ui-icon,
        .mini-clear .ui-icon,
        .search-clear .ui-icon {
            width: 15px !important;
            height: 15px !important;
        }
        .mini-btn .ui-icon {
            width: 17px !important;
            height: 17px !important;
        }
        .icon-sprite {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
        }

        /* Onest keeps the existing geometric feel while covering Ukrainian text. */
        body,
        body h1,
        body h2,
        body h3,
        body [class],
        body [style*="font-family"] {
            font-family: 'Onest', sans-serif !important;
        }

        /* Stage 16: a distinct wordmark that stays close to the site's geometry. */
        body h1.site-brand {
            font-family: 'Manrope', 'Onest', sans-serif !important;
            font-weight: 800;
            letter-spacing: -0.055em;
        }

        /* Account actions use the same shape, spacing and neutral states as site tools. */
        .header-actions .account-action {
            height: var(--btn-h) !important;
            min-height: var(--btn-h);
            border-radius: var(--btn-r) !important;
        }

        /* Selection actions use the same quiet focus treatment as search fields. */
        #view-editor .selection-bar {
            background: transparent !important;
            border: 0 !important;
        }
        #view-editor .selection-bar:not(.is-on) {
            visibility: hidden;
        }
        #view-editor .selection-bar.is-on {
            visibility: visible;
        }
        #view-editor .list-title:focus,
        #view-editor .list-title:focus-visible {
            outline: none !important;
            border-color: transparent !important;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.18) !important;
        }
        .list-title:focus,
        .list-title:focus-visible {
            outline: none !important;
            border-color: transparent !important;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.18) !important;
        }
        #view-editor .move-dd-menu {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.2) transparent;
        }
        #view-editor .move-dd-menu::-webkit-scrollbar {
            width: 8px;
        }
        #view-editor .move-dd-menu::-webkit-scrollbar-track {
            background: transparent;
        }
        #view-editor .move-dd-menu::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.16);
            border: 2px solid transparent;
            border-radius: 99px;
            background-clip: padding-box;
        }
        #view-editor .move-dd-menu::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.28);
            background-clip: padding-box;
        }
        .tier-label-wrapper {
            cursor: pointer;
        }
        .tier-label-wrapper:focus,
        .tier-label-wrapper:focus-visible,
        .tier-label-wrapper:active {
            outline: none !important;
            border: 0 !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28) !important;
        }
        .tier-label-wrapper:hover {
            border: 0 !important;
            outline: none !important;
        }
        .tier-label,
        .tier-label-wrapper * {
            outline: none !important;
            text-shadow: none !important;
        }
        .tier-label-wrapper:focus-within {
            outline: none !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28) !important;
        }
        .tier-row:focus-within {
            outline: none !important;
            box-shadow: none !important;
        }
        .import-url-row {
            align-items: stretch;
        }
        .import-url-row input,
        .import-url-row .import-load-btn {
            height: 42px !important;
            min-height: 42px !important;
        }
        .import-url-row input:focus {
            border-color: rgba(255,255,255,0.28) !important;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
        }

        /* Етап 10: початковий адаптивний CSS Grid і природна висота карток
           знову керують 16:9 та квадратним режимами. */
        .track-card.is-drag-source,
        .track-card.is-drag-source:hover {
            cursor: none !important;
            opacity: 0.12 !important;
            box-shadow: none !important;
        }
        .track-card.is-drag-source * {
            cursor: none !important;
        }

        .drag-mirror {
            position: fixed;
            z-index: 100;
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid rgba(255,255,255,0.24);
            border-radius: 12px;
            background: var(--surface-2);
            box-shadow: 0 12px 28px rgba(0,0,0,0.34);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            cursor: none !important;
            contain: strict;
            will-change: transform;
            backface-visibility: hidden;
        }
        .drag-mirror.is-active {
            opacity: 0.97;
            visibility: visible;
        }
        .drag-mirror,
        .drag-mirror * {
            cursor: none !important;
        }
        .drag-mirror-thumb {
            width: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #111;
            pointer-events: none;
        }
        .drag-mirror-thumb.is-placeholder {
            background: linear-gradient(135deg, #1a1a1e, #2a2a32);
        }
        .drag-mirror-copy {
            overflow: hidden;
            padding: 8px 10px 10px;
            pointer-events: none;
        }
        .drag-mirror-title {
            overflow: hidden;
            color: var(--fg);
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1.25;
            white-space: nowrap;
            text-overflow: ellipsis;
            pointer-events: none;
        }
        .drag-mirror-artist {
            overflow: hidden;
            margin-top: 2px;
            color: var(--muted);
            font-size: 0.72rem;
            line-height: 1.25;
            white-space: nowrap;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .drag-ghost-el {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            display: none;
            opacity: 0.97;
            pointer-events: none;
            will-change: transform;
            backface-visibility: hidden;
        }
        .drag-ghost-el,
        .drag-ghost-el * {
            cursor: none !important;
        }
        .drag-ghost-el .track-card {
            border-color: rgba(255,255,255,0.24);
            box-shadow: 0 14px 34px rgba(0,0,0,0.55);
        }