:root {
    --color-pearl-pink: #FFD6E8;
    --color-pearl-blue: #C4E4FF;
    --color-pearl-lavender: #E8D6FF;
    --color-pearl-mint: #D6FFE8;
    --color-pearl-peach: #FFE8D6;
    --glass-white: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    --text-primary: #2D3436;
    /* Soft Slate Charcoal */
    --text-secondary: #636E72;
    /* Subtle Grey */
    --text-tertiary: #B2BEC3;
    /* Gentle Silver */
    --accent-gradient: linear-gradient(135deg, #FF99B3, #B794F6, #70C0F0);
    /* Soft Vibrant Pearl */
    --accent-glow: rgba(255, 153, 179, 0.4);
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Outfit', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    background: #f0f2f5;
    background-image:
        radial-gradient(at 0% 0%, #D8B6FF 0px, transparent 50%),
        radial-gradient(at 50% 0%, #A4D4FF 0px, transparent 50%),
        radial-gradient(at 100% 0%, #FFB6D8 0px, transparent 50%),
        radial-gradient(at 0% 100%, #B6FFD8 0px, transparent 50%),
        radial-gradient(at 50% 100%, #FFD8B6 0px, transparent 50%),
        radial-gradient(at 100% 100%, #A78BFA 0px, transparent 50%);
    background-attachment: fixed;
    animation: pulseGradient 15s ease infinite alternate;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

@keyframes pulseGradient {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

h1,
h2,
h3,
.logo,
.section-title,
.track-name,
.btn-login,
.btn-generate,
.btn-upgrade,
.btn-modal-action,
.btn-save,
.btn-upload-music,
.preset-name,
.preset-card,
.action-btn {
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.35) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 30px -5px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}

#maskCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.8;
    mix-blend-mode: hard-light;
    z-index: 10;
}

.drawing-mode #videoPreview {
    cursor: crosshair !important;
}

.drawing-mode .iphone-frame {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.3), 0 20px 40px rgba(0, 0, 0, 0.2);
}

.mask-controls-extra {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.inverter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.inverter-label .label-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-left: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    white-space: nowrap !important;
    /* Prevent wrapping */
}

.inverter-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 15px !important;
    width: 100% !important;
}

.inverter-label .checkmark {
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.glass-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.45) 100%);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(255, 255, 255, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

/* --- EXCLUSIVE V2 CINEMATIC LOGO: 30s LOOP & SVG MORPH --- */
.cinematic-logo-v2 {
    width: 300px;
    height: 60px;
    cursor: pointer;
    overflow: visible;
}

.exclusive-logo-svg {
    width: 100%;
    height: 100%;
}

/* H-39-2 Р1 (Д1): знак в шапке — «ArcCut.app», где Arc белым. Правил три
   класса вместо одного: база (шрифт/кегль/разрядка — прежние значения H-39)
   и два цвета. Классы прежнего знака (.svg-text-shorts, .svg-text-pro,
   .svg-text-pro-bg) удалены: после правки в бою их не использует ни разметка,
   ни скрипты (Б-216, разведка 1.1 в REPORT_H-39-2.md). */
.svg-logo-text {
    /* H-39 Р1: шрифт заголовка — Inter (строгий гротеск; загружен фронтом в
       fonts.css?v=001: 400/500/700, файлы fonts/inter-*.woff2). Новых загрузок
       нет. Кегль, начертание и разрядка — прежние значения. */
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    /* H-39-3 Р1 (бой 23.10: «чёрная тень делает надпись визуально грязной»):
       тень набора — тень ТЕЛЕФОНА, тот же механизм и те же значения.
       Тень телефона — SVG-фильтр `#premiumShadow` (index.html:103-113):
       SourceAlpha → feGaussianBlur stdDeviation="3" → feOffset dx="0" dy="4"
       → feFuncA slope="0.5" (чёрный, непрозрачность 0.5) → feMerge под
       SourceGraphic. Узел телефона (.film-frame-path) получает её правилом
       `filter: url(#premiumShadow)` (ниже, в бою — theme.css:264); тем же
       правилом её получает и весь набор.
       Прежние ДВЕ drop-shadow rgba(0, 0, 0, 0.3) (композит 0.51) и
       text-shadow сняты: плотная чёрная тень и была причиной «грязной»
       надписи (видимость белого `Arc` — REPORT_H-39-3.md, разведка 1.1).
       Тень стоит на самом <text>: SVG-фильтр на <tspan> браузеры не
       применяют — поэтому одно правило закрывает все три tspan. */
    filter: url(#premiumShadow);
}

/* «Arc» — белым. Значение существующее: `white` из темы (theme.css:348/352,
   .cinematic-logo-v2:hover .film-frame-path { stroke: white }) и прежний
   fill .svg-text-pro (theme.css:220 до H-39-2). Новых цветов нет. */
.svg-logo-arc {
    fill: white;
}

/* «Cut» — тёмный ТЕКУЩЕГО логотипа: #1A1A1A (fill этого же текста до правки,
   theme.css:206, и fill .film-frame-path, theme.css:243). */
.svg-logo-cut {
    fill: #1A1A1A;
}

/* «.app» — тот же цвет, что «Cut», кегль 60 % основного: 32px × 0.6 = 19.2px. */
.svg-logo-app {
    font-size: 19.2px;
    fill: #1A1A1A;
}

/* FINAL PREMIUM INTRO ANIMATION
   - Idle Sway: 0-5s
   - Forward Move: 5-9s 
   - Shape: True Cubic Path Morph (8 nodes)
*/

.film-frame-group {
    animation: frame-motion-morph-v11 9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.reveal-mask-rect {
    animation: mask-wipe-reveal-v11 9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.film-frame-path {
    fill: #1A1A1A;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
    /* High-Fidelity SVG Filter for perfect blur transparency */
    filter: url(#premiumShadow);
    animation: path-morph-logic-v11 9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none;
}

.iphone-details {
    animation: iphone-fade-v11 9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.film-details {
    animation: film-details-fade-v11 9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* H-39-3 Р2 (бой 23.10: «телефон стоит слишком далеко от текста»): в блоке
   ниже изменилось РОВНО ОДНО число — финальная горизонталь телефона
   `translateX(200px)` → `translateX(181.9px)` (кадр 100 %). Зазор между правым
   краем буквы `p` набора и левым краем телефона: 36.2 → 18.1 единицы viewBox
   (= вдвое меньше). Имена блоков, их число, длительность 9 s, cubic-bezier,
   проценты шагов и все прочие свойства анимации — прежние. */
@keyframes frame-motion-morph-v11 {

    /* Subtle Swaying Idle Effect (0-5s) */
    0%,
    20%,
    45% {
        transform: translateX(0) translateY(0) rotate(0);
    }

    10%,
    35% {
        transform: translateX(0) translateY(-1.5px) rotate(0.4deg);
    }

    55.5% {
        transform: translateX(0) translateY(0) rotate(0);
    }

    /* The Run (5-9s) */
    100% {
        transform: translateX(181.9px);
    }

    /* 5px closer for balance */
}

@keyframes mask-wipe-reveal-v11 {

    0%,
    55.5% {
        width: 0;
    }

    100% {
        width: 310px;
    }
}

@keyframes path-morph-logic-v11 {

    /* 
       ABSOLUTE STRUCTURAL SYMMETRY: Both shapes use exactly 8 nodes.
       Nodes: M -> C -> L -> C -> L -> C -> L -> C -> Z
    */
    0%,
    77.7% {
        /* Film Frame (16:9) */
        d: path("M5,15 C5,12 5,12 8,12 L62,12 C65,12 65,12 65,15 L65,45 C65,48 65,48 62,48 L8,48 C5,48 5,48 5,45 Z");
        fill: #1A1A1A;
    }

    100% {
        /* Smartphone (9:16) - Smooth interpolation of the same node points */
        d: path("M22,3 C22,1 23,0 26,0 L44,0 C47,0 48,1 48,3 L48,57 C48,59 47,60 44,60 L26,60 C23,60 22,59 22,57 Z");
        fill: url(#logoGradient);
        stroke: #FFF;
    }
}

@keyframes iphone-fade-v11 {

    0%,
    80% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes film-details-fade-v11 {

    0%,
    80% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.cinematic-logo-v2:hover .film-frame-path {
    stroke: white;
    filter: brightness(1.3) drop-shadow(0 0 22px var(--accent-glow));
}

.cinematic-logo-v2:hover .film-frame-path {
    stroke: white;
    filter: brightness(1.3) drop-shadow(0 0 20px var(--accent-glow));
}

/* Premium Interaction */
.cinematic-logo-v2:hover .film-frame-path {
    filter: brightness(1.2) drop-shadow(0 0 10px var(--accent-glow));
}

/* H-39-2 Р1 (Б-216): правило тени прежнего класса .svg-text-pro снято вместе
   с классом — тень набора теперь у .svg-logo-text (выше). */


.btn-login {
    height: 38px;
    /* Ultra-sleek for top-bar */
    padding: 0 24px;
    font-size: 11px;
    font-weight: 800;
    color: white !important;
    border-radius: var(--radius-full);
    /* Pill shape */
    border: none;
    cursor: pointer;
    background: var(--accent-gradient);
    box-shadow: 0 4px 15px var(--accent-glow);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* Not full width in top bar */
}

.btn-login:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px var(--accent-glow);
    filter: brightness(1.1);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.action-buttons-group {
    position: relative;
}

/* Action buttons group overrides moved back to relative flow */
.action-buttons-group .btn-login {
    display: none;
    /* Already moved to top-bar, but keeping class for safety if any script targets it */
}

.drag-drop-zone {
    border: none;
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-drop-zone:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 10px 30px -5px rgba(167, 139, 250, 0.15);
}

.glass-inset {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -2px -2px 5px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    /* Explicitly remove standard glass border if present */
}

.drag-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
    color: #A78BFA;
    transition: transform 0.3s ease;
}

.drag-drop-zone:hover .upload-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    color: #8B5CF6;
}

.drag-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.drag-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
}

.drag-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
}

.drag-drop-zone:active .drag-pulse {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: 0s;
}

.upload-icon {
    color: var(--text-secondary);
}



.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.preset-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.preset-card:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), 0 0 20px rgba(255, 153, 179, 0.2);
}

/* Maintain text-only request but return subtle visual indicators for logic */
.preset-preview,
.font-preview,
.upload-icon-wrapper,
.setting-icon,
.btn-icon,
.short-icon,
.upgrade-icon,
.generate-glow {
    display: none !important;
}

.preset-card:active {
    transform: scale(0.95);
}

/* Introduction Card Styling & Neon Effects */
.introduction-card {
    background: var(--accent-gradient) !important;
    color: white !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}

.introduction-card .preset-name {
    color: white !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
}

.introduction-card.pulse-active {
    animation: neon-pulse-vibrant 2s infinite, bg-pan 3s infinite linear;
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.6), 0 0 40px rgba(96, 165, 250, 0.4);
}

.introduction-card.pulse-idle {
    animation: neon-pulse-slow 30s infinite ease-in-out;
}

@keyframes neon-pulse-vibrant {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(255, 107, 157, 0.5), 0 0 30px rgba(167, 139, 250, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 107, 157, 0.8), 0 0 60px rgba(167, 139, 250, 0.6);
    }
}

@keyframes neon-pulse-slow {

    0%,
    48%,
    52%,
    98%,
    100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }

    50%,
    99% {
        box-shadow: 0 0 25px rgba(167, 139, 250, 0.6);
    }
}

@keyframes bg-pan {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Enhanced Center column landscape scale */
.iphone-mockup.intro-mode {
    transform: rotate(-90deg) scale(1.85) translateX(35px) translateY(-20px) !important;
    z-index: 1000;
}

.iphone-mockup.intro-mode .iphone-frame {
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}

/* Hide controls specifically during Intro Sequence by moving them up 15px more */
.center-column.intro-active .phone-controls {
    transform: translateY(-172px) !important;
    /* -157px (standard) - 15px = -172px */
    opacity: 0.1;
    /* Extra insurance: make them almost invisible while tucked away */
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.preset-preview {
    font-size: 32px;
    margin-bottom: var(--spacing-xs);
}

.preset-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Compact version for small grids */
/* AI Caption Styles & Grids Refinement */
.caption-styles {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Reduced gap to be more compact */
}

.style-section-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    /* Tighter spacing */
    display: block;
    opacity: 0.6;
}

.font-grid,
.animation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.font-option,
.animation-option {
    padding: 10px 6px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Very subtle border */
    background: rgba(255, 255, 255, 0.7);
    /* Soft translucent white */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    /* Soft diffused shadow */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    text-align: center;
    position: relative;
}

.font-option:hover,
.animation-option:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.font-option.active,
.animation-option.active {
    background: white !important;
    color: #FF99B3 !important;
    border: 1px solid #FF99B3;
    box-shadow: 0 10px 25px -5px rgba(255, 153, 179, 0.2) !important;
    transform: translateY(-1px);
}

/* Base text color */
.font-option .preset-name,
.animation-option .preset-name,
.font-option .font-preview,
.animation-option .preset-preview {
    color: #475569;
    /* Slate 600 */
    font-weight: 700;
}

.font-option.active .preset-name,
.animation-option.active .preset-name {
    color: white !important;
}

.font-preview {
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 800;
}

.preset-name {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-upload-music {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-upload-music:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--accent-glow);
    filter: brightness(1.1);
}

.btn-upload-music svg {
    stroke: white;
}

.audio-tabs {
    display: flex;
    gap: 20px;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}

.audio-tab {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    padding-bottom: 8px;
    position: relative;
    transition: color 0.3s;
}

.audio-tab.active {
    color: var(--text-primary);
}

.audio-tab.active::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

/* Legacy audio styles removed to prevent conflicts with Premium Minimalist Browser */

.track-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.music-track.active .track-icon {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.equalizer-anim {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 12px;
}

.equalizer-anim .bar {
    width: 3px;
    background: white;
    border-radius: 1px;
    animation: eq-bounce 1s infinite ease-in-out;
}

.equalizer-anim .bar:nth-child(1) {
    height: 6px;
    animation-duration: 0.8s;
}

.equalizer-anim .bar:nth-child(2) {
    height: 10px;
    animation-duration: 1.1s;
}

.equalizer-anim .bar:nth-child(3) {
    height: 7px;
    animation-duration: 0.9s;
}

@keyframes eq-bounce {

    0%,
    100% {
        height: 4px;
    }

    50% {
        height: 100%;
    }
}

.btn-fav {
    background: none;
    border: none;
    font-size: 24px;
    /* Increased 1.5x for better visibility */
    color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.btn-fav:hover {
    color: #FF6B9D;
    transform: scale(1.2);
}

.btn-fav.active {
    color: #FF6B9D !important;
    animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.track-info {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.track-name {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

.track-artist {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.7;
    transition: color 0.3s ease;
}

.btn-play {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.music-track.active .btn-play {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.4);
}

.btn-icon {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.waveform-player {
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
}

.play-btn {
    border-radius: var(--radius-full);
    background: var(--accent-gradient);
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.wave-bar {
    background: linear-gradient(to top, #C084FC, #60A5FA);
    border-radius: 2px;
    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
}

.wave-bar:hover {
    opacity: 1;
}

.music-list::-webkit-scrollbar {
    width: 6px;
}

.music-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.music-list::-webkit-scrollbar-thumb {
    background: rgba(192, 132, 252, 0.3);
    border-radius: 10px;
}

.music-list::-webkit-scrollbar-thumb:hover {
    background: rgba(192, 132, 252, 0.5);
}

.music-track {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 40px 1fr 28px 28px;
    align-items: center;
    gap: 14px;
}

.music-track:hover {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateX(6px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.music-track.active {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(167, 139, 250, 0.4);
    box-shadow: 0 12px 30px -10px rgba(167, 139, 250, 0.2);
}

.track-cover {
    display: none;
    /* We use track-icon instead as per index.html */
}



.btn-play {
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: var(--text-primary);
    font-size: 10px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-play:hover {
    background: rgba(0, 0, 0, 0.1);
}

.audio-search {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    color: var(--text-primary);
    transition: all var(--transition-base);
    margin-top: 15px;
}

.audio-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(192, 132, 252, 0.5);
}

.audio-search::placeholder {
    color: var(--text-tertiary);
}





/* --- PHONE ORIENTATION SYSTEM --- */
.iphone-mockup {
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    /* Adjust based on rotated height */
    perspective: 1000px;
}

/* Default state: Landscape (rotated -90deg) */
.iphone-mockup.landscape {
    transform: rotate(-90deg) scale(1.05);
}


/* Vertical state: Portrait */
.iphone-mockup.portrait {
    transform: rotate(0deg) scale(1);
}

.iphone-frame {
    width: 320px;
    height: 650px;
    padding: 2px;
    position: relative;
    background: linear-gradient(135deg, rgba(220, 220, 220, 0.98) 0%, rgba(180, 180, 180, 0.98) 25%, rgba(200, 200, 200, 0.98) 50%, rgba(170, 170, 170, 0.98) 75%, rgba(190, 190, 190, 0.98) 100%);
    border-radius: 48px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 2px 2px 8px rgba(0, 0, 0, 0.2), inset -2px -2px 8px rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(160, 160, 160, 0.6);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

/* Content Rotation for Landscape Mode */
/* Since we rotate the whole mockup -90deg, the content needs to look correct */
.iphone-mockup.landscape .video-preview img {
    /* The image itself is naturally landscape, and since the frame is rotated, 
       we might need to ensure it fills the space correctly */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide UI elements that don't make sense in landscape */
.iphone-mockup.landscape .preview-strip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.iphone-mockup.portrait .preview-strip {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.6s ease 0.4s;
}

/* Player controls positioning is now handled in layout.css with calculated offsets for 20px gap */
.center-column.portrait .phone-controls {
    transform: translateY(0);
}



/* Rotate the "Rotate" button icon back so it's always readable */
.btn-rotate {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

.iphone-mockup.landscape .btn-rotate {
    transform: rotate(90deg);
}

.iphone-mockup.landscape .btn-save {
    transform: rotate(90deg);
    top: 60px;
    right: 20px;
}



.iphone-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 48px;
    background: repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255, 255, 255, 0.02) 1px, rgba(255, 255, 255, 0.02) 2px);
    pointer-events: none;
}

.iphone-notch {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 0 0 20px 20px;
}

.iphone-screen {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    border-radius: 46px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.video-preview {
    background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
    position: relative;
    /* Glow effect simulation */
    box-shadow: 0 0 60px -10px rgba(167, 139, 250, 0.15);
    transition: box-shadow 0.5s ease;
}

.video-preview::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 48px;
    background: linear-gradient(45deg, #FF6B9D, #A78BFA, #60A5FA);
    z-index: -1;
    opacity: 0.3;
    filter: blur(20px);
    animation: ambilightBreath 8s ease infinite alternate;
}

@keyframes ambilightBreath {
    0% {
        opacity: 0.2;
        filter: blur(20px);
    }

    100% {
        opacity: 0.4;
        filter: blur(30px);
    }
}

.video-preview img {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-preview img.fade-out {
    opacity: 0;
}

.video-placeholder {
    color: white;
    padding: var(--spacing-xl);
}

.video-time {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: var(--spacing-md);
}

.video-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.btn-save {
    border-radius: 40px;
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #C0C0C0 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    padding: 12px 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: savePulse 2s ease-in-out infinite;
}

@keyframes savePulse {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 6px 24px rgba(212, 175, 55, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    }
}

.btn-save:hover {
    background: linear-gradient(135deg, #FFD700 0%, #FFF8DC 50%, #E0E0E0 100%);
    transform: translateZ(0) scale(1.05);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

.preview-strip {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
    contain: layout style paint;
}

.preview-thumb {
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), background 0.2s cubic-bezier(0.2, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.2, 0, 0.2, 1);
    border: 2px solid transparent;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.preview-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1) translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-thumb.active {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.3);
}

.thumb-content {
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.registration-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
}

.email-input {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 40px;
    font-size: 15px;
    color: var(--text-primary);
    padding: 14px 28px !important;
    transition: all var(--transition-base);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.email-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    border-color: #A78BFA;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.15);
}

.email-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.8;
}

.btn-join {
    background: linear-gradient(135deg, #FF6B9D, #A78BFA);
    color: white;
    border: none;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 20px -6px rgba(255, 107, 157, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-join:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px -6px rgba(255, 107, 157, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    filter: brightness(1.05);
}

.btn-join:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 10px -6px rgba(255, 107, 157, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}



.btn-extra {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-xl);
    height: 57px;
    /* Increased from 52px */
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    backface-visibility: hidden;
}

.btn-extra:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.btn-generate {
    background: var(--accent-gradient);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-xl);
    padding: 0 var(--spacing-lg);
    height: 57px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    backface-visibility: hidden;
    position: relative;
    overflow: hidden;
}

.btn-generate:hover {
    transform: translateY(-6px) scale(1.05);
    color: #B794F6 !important;
    /* Standard lilac hover color as requested */
}

.btn-generate::after {
    content: "";
    position: absolute;
    top: 0;
    left: 150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 80%,
            transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}

.btn-generate:not(.btn-inactive)::after {
    animation: slowGlare 4s infinite linear;
}

@keyframes slowGlare {
    0% {
        left: 150%;
    }

    100% {
        left: -150%;
    }
}

.btn-generate.btn-inactive {
    background: #E2E8F0 !important;
    color: #94A3B8 !important;
    border-color: #CBD5E1 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.btn-generate.btn-inactive .generate-glow {
    display: none !important;
}

.btn-generate.btn-inactive::after {
    display: none !important;
}

.btn-generate:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow:
        0 5px 10px -2px rgba(167, 139, 250, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.font-option,
.animation-option {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.font-option:hover,
.animation-option:hover {
    background: rgba(255, 255, 255, 0.7);
}

.font-option.active,
.animation-option.active {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(192, 132, 252, 0.5);
}

.font-label,
.animation-label,
.format-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.animation-icon,
.format-icon {
    font-size: 20px;
}

.setting-group {
    margin-bottom: var(--spacing-xl);
}

.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.setting-label-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setting-icon {
    color: var(--text-tertiary);
    opacity: 0.8;
}

.setting-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.setting-value {
    font-size: 14px;
    font-weight: 800;
    color: #A78BFA;
    background: rgba(167, 139, 250, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.slider-container {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
}

.slider {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}

.slider-progress {
    position: absolute;
    height: 6px;
    background: var(--accent-gradient);
    border-radius: 10px;
    left: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #A78BFA;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(167, 139, 250, 0.3);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #A78BFA;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quality-toggle-container {
    margin-top: 12px;
}

.quality-toggle {
    position: relative;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    border-radius: 14px;
    display: flex;
    padding: 4px;
    gap: 4px;
}

.quality-btn {
    flex: 1;
    position: relative;
    background: transparent;
    border: none;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease;
    font-family: 'Outfit', sans-serif;
}

.quality-btn.active {
    color: #FFFFFF;
}

.quality-active-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(33.33% - 5.33px);
    background: var(--accent-gradient);
    border-radius: 10px;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
}

/* Position logic for active background */
.quality-btn:nth-child(1).active~.quality-active-bg {
    transform: translateX(0);
}

.quality-btn:nth-child(2).active~.quality-active-bg {
    transform: translateX(100%);
    margin-left: 4px;
}

.quality-btn:nth-child(3).active~.quality-active-bg {
    transform: translateX(200%);
    margin-left: 8px;
}

.btn-upgrade {
    height: 57px;
    /* Increased from 52px */
    padding: 0 var(--spacing-lg);
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.btn-upgrade:hover {
    background: rgba(255, 255, 255, 0.85);
}

.upgrade-icon {
    font-size: 16px;
}

.btn-ai-chat {
    border-radius: var(--radius-full);
    background: var(--accent-gradient);
    border: none;
    color: white;
    cursor: pointer;
    box-shadow: 0 8px 24px var(--accent-glow);
    transition: all var(--transition-base);
}

.btn-ai-chat:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px var(--accent-glow);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content {
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add Button for Tracks */
.btn-add {
    margin-right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-add:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    transform: scale(1.1);
}

.btn-add.added {
    background: linear-gradient(135deg, #8B5CF6 0%, #C084FC 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}


.modal-close {
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.modal-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.modal-video-preview {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    border-radius: var(--radius-lg);
}

.video-preview-placeholder {
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.modal-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.btn-modal-action {
    background: var(--accent-gradient);
    padding: 14px 32px;
    color: white;
    border: none;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.btn-modal-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.modal-subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    margin-top: 8px;
}

.toggle-label {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-secondary);
}

.discount-badge {
    background: var(--accent-gradient);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.slider-toggle {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    transition: .4s;
    border-radius: 34px;
}

.slider-toggle:before {
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

input:checked+.slider-toggle {
    background: var(--accent-gradient);
}

input:checked+.slider-toggle:before {
    transform: translateX(28px);
}

.plan-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--glass-border);
}

.plan-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.plan-featured {
    border: 2px solid rgba(192, 132, 252, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.plan-badge-top {
    background: var(--accent-gradient);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px var(--accent-glow);
    white-space: nowrap;
}

.plan-icon-wrapper {
    font-size: 32px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.plan-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.plan-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
}

.plan-price {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.plan-price span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
}

.plan-features li {
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-features li span {
    color: var(--accent-color);
    font-size: 12px;
}

.btn-plan {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-plan:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-plan-primary {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-plan-primary:hover {
    background: var(--accent-gradient);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.chat-messages {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-md);
}

.chat-message {
    border-radius: var(--radius-md);
}

.chat-message.bot {
    background: rgba(192, 132, 252, 0.1);
    margin-right: auto;
}

.chat-message.user {
    background: rgba(96, 165, 250, 0.1);
    margin-left: auto;
}

.chat-message p {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

.btn-microphone {
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-microphone:hover {
    background: rgba(255, 255, 255, 0.7);
}

.chat-input {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.chat-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(192, 132, 252, 0.5);
}

.btn-send {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 8px 20px -6px rgba(255, 107, 157, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

button:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(192, 132, 252, 0.5);
    outline-offset: 2px;
}

/* GLOBAL INTERACTION STANDARD */
button,
.preset-card,
.action-btn,
.btn-extra,
.font-option,
.animation-option,
.format-option,
.social-btn,
.btn-control,
.quality-btn,
.btn-ai-chat,
.btn-login,
.btn-upgrade,
.btn-generate,
.btn-modal-action {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover,
.preset-card:hover,
.action-btn:hover,
.btn-extra:hover,
.font-option:hover,
.animation-option:hover,
.format-option:hover,
.social-btn:hover,
.btn-control:hover,
.btn-ai-chat:hover,
.btn-login:hover,
.btn-upgrade:hover,
.btn-modal-action:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 20px rgba(255, 255, 255, 0.3);
    color: #B794F6;
    text-shadow: 0 0 10px rgba(183, 148, 246, 0.6);
}

/* Maintain White Text on Dark/Gradient Buttons */
/* Maintain White Text on Dark/Gradient Buttons (Filtered) */
.btn-upload-music:hover,
.btn-modal-action:hover,
.introduction-card:hover,
.font-option.active:hover,
.animation-option.active:hover {
    color: white !important;
}

/* Ensure children classes take the lilac color */
button:not(.btn-upload-music):hover *,
.preset-card:not(.introduction-card):hover *,
.action-btn:hover *,
.font-option:not(.active):hover *,
.animation-option:not(.active):hover *,
.format-option:hover * {
    color: #B794F6 !important;
    text-shadow: 0 0 10px rgba(183, 148, 246, 0.6);
}

/* Consolidated btn-generate hover logic in main section */

button:active,
.preset-card:active,
.action-btn:active,
.btn-extra:active,
.font-option:active,
.animation-option:active,
.format-option:active,
.social-btn:active,
.btn-control:active,
.btn-ai-chat:active,
.btn-login:active,
.btn-upgrade:active,
.btn-modal-action:active {
    transform: translateY(0) scale(0.94);
}

/* Rotation Button & Rotated State */
.btn-rotate {
    position: absolute;
    top: 45px;
    left: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    animation: auraPulse 2s infinite, softFlicker 3s infinite;
}

@keyframes auraPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes softFlicker {

    0%,
    100% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    55% {
        opacity: 1;
    }
}

.btn-rotate:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.iphone-mockup.rotated {
    transform: rotate(-90deg) !important;
}

.iphone-mockup.zoomed.rotated {
    transform: scale(1.2) rotate(-90deg) !important;
}

/* Adjust controls when phone is horizontal (rotated CCW) */
.iphone-mockup.rotated+.phone-controls {
    transform: translateY(-165px);
}

/* Fix: Buttons hide under phone in zoomed+rotated state. 
   Adjusted to -130px to match the lower edge of the 1.2x scaled horizontal phone. */
.iphone-mockup.zoomed.rotated+.phone-controls {
    transform: translateY(-130px);
}


.input-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mask Options Grid */
.mask-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.mask-options-grid .btn-genre-option {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
}

.mask-icon {
    font-size: 20px;
}

/* Modal Center Size (Compact) */
.modal-center-size {
    max-width: 420px;
    width: 90%;
    margin: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 30px;
}

.caption-textarea {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.caption-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.caption-textarea::placeholder {
    color: var(--text-secondary);
}

.visualizer-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.premium-waveform {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: var(--radius-md);
}

.waveform-svg {
    opacity: 0.6;
}

.wave-path {
    animation: waveAnimation 3s ease-in-out infinite;
    transform-origin: center;
}

.wave-path-2 {
    animation: waveAnimation 2.5s ease-in-out infinite reverse;
}

.wave-path-3 {
    animation: waveAnimation 3.5s ease-in-out infinite;
}

@keyframes waveAnimation {

    0%,
    100% {
        d: path("M0,30 Q10,15 20,30 T40,30 T60,30 T80,30 T100,30 T120,30 T140,30 T160,30 T180,30 T200,30");
    }

    50% {
        d: path("M0,30 Q10,45 20,30 T40,30 T60,30 T80,30 T100,30 T120,30 T140,30 T160,30 T180,30 T200,30");
    }
}

.waveform-bars .bar {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    animation: barPulse 1.5s ease-in-out infinite;
    animation-delay: calc(var(--height) * 0.1s);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

@keyframes barPulse {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 0.8;
    }

    50% {
        transform: scaleY(1.2);
        opacity: 1;
    }
}

.style-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.style-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.style-btn.active {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.login-modal-content {
    max-width: 400px;
    padding: var(--spacing-2xl);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.login-divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-xl) 0;
    color: var(--text-tertiary);
    font-size: 13px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.login-divider span {
    padding: 0 15px;
}

.social-login {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.social-btn {
    width: 60px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all var(--transition-base);
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.modal-footer-text {
    text-align: center;
    margin-top: var(--spacing-xl);
    font-size: 14px;
    color: var(--text-secondary);
}

.modal-footer-text a {
    color: #A78BFA;
    font-weight: 700;
    text-decoration: none;
}

.w-full {
    width: 100%;
}

/* Registration Flow Styles */
.registration-step {
    animation: fadeIn 0.4s ease;
}



.settings-panel {
    margin-top: -10px !important;
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reg-container {
    padding: var(--spacing-xl);
    max-width: 500px;
    margin: 0 auto;
}

.reg-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.card-binding-block {
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 1px;
}

.card-mock-input {
    display: flex;
    justify-content: space-between;
    font-family: 'Outfit', monospace;
    font-size: 16px;
    color: var(--text-primary);
    opacity: 0.8;
}

.btn-modal-back {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: -10px;
}

.btn-modal-back:hover {
    background: rgba(0, 0, 0, 0.03);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Phone Playback Controls */
.phone-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    /* Pill shape */
    background: rgba(255, 255, 255, 0.35);
    /* Slightly more opaque */
    backdrop-filter: blur(20px);
    margin-top: 0;
    /* Slight adjustment to pull it closer to phone if needed */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

}



/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.2s;
    cursor: pointer;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.action-icon {
    font-size: 18px;
}

.action-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Compact Settings Panel */
.settings-panel {
    padding: 20px !important;
    /* Force override */
}

.setting-group {
    margin-bottom: 20px !important;
}

.setting-header {
    margin-bottom: 8px !important;
}

.setting-label {
    font-size: 13px;
    font-weight: 600;
}

.setting-value {
    font-size: 12px;
    font-weight: 700;
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Elegant Slider */
.slider-container {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #C084FC 0%, #C084FC 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 100%);
    cursor: pointer;
    border: none;
}

/* Slider Track (WebKit) */
.slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent;
    border-radius: 3px;
    border: none;
}

/* Slider Thumb (WebKit) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(192, 132, 252, 0.2);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(192, 132, 252, 0.25);
}

.slider::-webkit-slider-thumb:active {
    transform: scale(0.95);
    cursor: grabbing;
}

/* Firefox Styles */
.slider::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: none;
}

.slider::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(192, 132, 252, 0.2);
}

/* Remove default focus outline */
.slider:focus {
    outline: none;
}

.slider-progress {
    display: none;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: 0;
}

/* Zoom Interaction */
.iphone-mockup {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: zoom-in;
    transform-origin: center center;
    position: relative;
    z-index: 10;
}

/* Zoom State Handling */
.iphone-mockup.zoomed {
    /* Portrait Zoom: Scale 1.2 */
    transform: scale(1.2);
    cursor: zoom-out;
    z-index: 50;
}

.iphone-mockup.landscape.zoomed {
    /* Landscape Zoom: Rotate -90 + Scale 1.25 (slightly larger than base 1.05) */
    transform: rotate(-90deg) scale(1.25);
}

/* Offset controls downward when zoomed to prevent overlap */
/* Portrait Zoom */
/* Phone grows by 130px (65px bottom). Move controls down. */
.center-column.portrait .iphone-mockup.zoomed~.phone-controls {
    transform: translateY(65px);
}

/* Landscape Zoom */
/* Landscape base: -157px. 
   Zoomed landscape (1.25x) grows width (visual height) from 336px to ~400px.
   Difference ~64px. Half is 32px downwards.
   Controls need to move down by ~32px from base -157px => -125px.
*/
.center-column.landscape .iphone-mockup.zoomed~.phone-controls {
    transform: translateY(-125px);
}

/* Also move the media card down in landscape zoomed */
.center-column.landscape .iphone-mockup.zoomed~.landscape-media-card {
    transform: translateY(-125px);
}



/* Smooth transition for internal elements when scaling */
.iphone-frame,
.iphone-screen,
.video-preview {
    transition: all 0.4s ease;
}

/* Playback Controls Panel - Neon Glass Edition */
.phone-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 24px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin: -10px auto 0;
    width: fit-content;
    position: relative;
    z-index: 10;
}

.phone-controls:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.12),
        0 0 30px rgba(167, 139, 250, 0.1);
}

.btn-control {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-control:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 255, 255, 0.5);
    color: #B794F6;
    text-shadow: 0 0 10px rgba(183, 148, 246, 0.6);
}

.btn-control:active {
    transform: translateY(0) scale(0.9);
}

.btn-control-main {
    width: 48px;
    height: 48px;
    background: var(--accent-gradient);
    color: white !important;
    border: none;
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-control-main:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    filter: brightness(1.2);
}

.btn-control svg {
    transition: transform 0.3s ease;
}

.btn-control:hover svg {
    transform: scale(1.2);
}

/* AI Retouch Panel - Video & Shorts Library */
.retouch-panel {
    display: none;
    /* Hide to maintain consistent gaps in flex container */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    transform: translateY(-20px) scale(0.98);
    width: 100%;
}

.retouch-panel.active {
    display: block;
    /* Show correctly in flex layout */
    max-height: 520px;
    opacity: 1;
    margin: 0;
    /* Remove redundant margin, rely on gap */
    transform: translateY(0) scale(1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.retouch-scroll-area {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 139, 250, 0.3) transparent;
}

.retouch-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.retouch-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.2);
    border-radius: 10px;
}

.retouch-group {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease;
}

.retouch-group:last-child {
    border-bottom: none;
}

.retouch-group:hover {
    background: rgba(255, 255, 255, 0.2);
}

.retouch-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.retouch-source-cell {
    width: 40%;
    padding: var(--spacing-md);
    border-right: 1px solid rgba(167, 139, 250, 0.2);
    background: rgba(167, 139, 250, 0.05);
    vertical-align: top;
}

.source-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.source-thumb {
    position: relative;
    width: 100%;
    height: 90px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.source-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.source-type-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.source-item p {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-item small {
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.retouch-sub-cell {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.retouch-sub-cell:hover {
    background: rgba(167, 139, 250, 0.15);
    color: var(--text-primary);
    padding-left: 18px;
}

/* Batch Actions Bar */
.batch-actions-bar {
    position: sticky;
    top: -2px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.6);
    /* 40% transparent (0.6 opacity) */
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Outfit', sans-serif;
}

.batch-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.batch-row-actions {
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.batch-tool-group {
    display: flex;
    background: rgba(0, 0, 0, 0.03);
    padding: 6px;
    border-radius: 99px;
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.btn-batch-tool {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-batch-tool:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.5);
}

/* Дизайн как на скриншоте пользователя */
.btn-batch-tool.active,
.btn-batch-tool:active {
    background: var(--accent-gradient);
    color: white !important;
    box-shadow: 0 4px 15px rgba(183, 148, 246, 0.3);
}

.selected-count {
    font-size: 11px;
    font-weight: 800;
    color: #8B5CF6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.3;
}

/* maskPanel option buttons */
.mask-options-grid-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

.mask-option-btn {
    padding: 10px 8px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.mask-option-btn:hover {
    background: rgba(112, 192, 240, 0.08);
    border-color: rgba(112, 192, 240, 0.3);
    color: #70C0F0;
}

.mask-option-btn.active {
    background: rgba(112, 192, 240, 0.12);
    border-color: rgba(112, 192, 240, 0.4);
    color: #70C0F0;
    box-shadow: 0 2px 8px rgba(112, 192, 240, 0.15);
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.selected-count {
    font-size: 11px;
    font-weight: 800;
    color: #8B5CF6;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.25;
    max-width: 60px;
}

.batch-btns {
    display: flex;
    gap: 8px;
}

/* Run/Batch Separators */
.run-header-row td {
    border-top: 1px solid rgba(167, 139, 250, 0.2) !important;
}

.run-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(167, 139, 250, 0.1);
    color: #8B5CF6;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: 10px;
    border: 1px solid rgba(167, 139, 250, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}

.run-tag:hover {
    transform: scale(1.05);
    background: rgba(167, 139, 250, 0.2);
}

.run-tag.cinematic {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
}

.run-tag.vibrant {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    color: #8B5CF6;
    border-color: rgba(139, 92, 246, 0.3);
}

.run-tag.minimal {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(107, 114, 128, 0.05));
    color: #6B7280;
    border-color: rgba(107, 114, 128, 0.3);
}

.btn-batch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.btn-batch-save,
.btn-batch-render {
    background: var(--accent-gradient);
    color: white !important;
    border: none;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-batch-delete {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.15);
    padding: 10px 16px;
}

.btn-batch:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-batch-text {
    background: rgba(139, 92, 246, 0.08);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.btn-batch-text:hover {
    background: rgba(139, 92, 246, 0.15);
}

.btn-batch-effects {
    background: rgba(245, 158, 11, 0.08);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.btn-batch-effects:hover {
    background: rgba(245, 158, 11, 0.15);
}

.btn-batch-mask {
    background: rgba(112, 192, 240, 0.08);
    color: #70C0F0;
    border: 1px solid rgba(112, 192, 240, 0.15);
}

.btn-batch-mask:hover {
    background: rgba(112, 192, 240, 0.15);
}

.btn-batch-delete {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    padding: 8px 12px;
    border-color: rgba(239, 68, 68, 0.15);
    box-shadow: none;
}

.btn-batch-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.25);
}

/* Audio Search Premium Styling */
.audio-search {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.audio-search:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
    outline: none !important;
}

/* Category Highlight & Heart Pulse (V5 - Balanced Density) */
.tile-highlight-premium {
    position: relative;
    border: 3px solid #8B5CF6 !important;
    /* Thick solid neon border */
    box-shadow:
        0 0 15px #8B5CF6,
        0 0 40px rgba(139, 92, 246, 0.6),
        inset 0 0 10px rgba(139, 92, 246, 0.4) !important;
    transform: scale(1.03);
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    animation: tileGlowBreath 2s infinite alternate ease-in-out;
}

@keyframes tileGlowBreath {
    from {
        box-shadow: 0 0 15px #8B5CF6, 0 0 30px rgba(139, 92, 246, 0.4);
    }

    to {
        box-shadow: 0 0 25px #8B5CF6, 0 0 50px rgba(139, 92, 246, 0.8);
    }
}

.heart-pulse-confirm {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.7;
    /* Subtler heart */
    animation: premiumHeartPulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 20;
}

/* More dense Ripple */
.heart-pulse-confirm::before,
.heart-pulse-confirm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.7) 0%, transparent 80%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: rippleEffect 5.6s ease-out infinite;
    opacity: 0;
    filter: blur(3px);
}

.heart-pulse-confirm::after {
    animation-delay: 2.4s;
}

@keyframes premiumHeartPulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) scale(1);
        opacity: 0.9;
    }
}

@keyframes rippleEffect {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
        filter: blur(12px);
        /* Dissolving into air */
    }
}


/* Short Item Table Cell */
.short-item {
    display: table-cell !important;
    vertical-align: middle;
    padding: 0 !important;
    /* Move padding to wrap */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.short-flex-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    width: 100%;
    gap: 12px;
}

.short-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    /* Critical for text-overflow */
}

.short-name {
    transition: transform 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}

.short-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    /* Never hide actions */
    opacity: 0.6;
    /* Higher base visibility */
    transition: all 0.3s ease;
}

.short-flex-wrap:hover .short-actions {
    opacity: 1;
    transform: translateX(0);
}

/* Subtle Run Tints & Accents */
.run-group-1 {
    background: rgba(167, 139, 250, 0.05);
    border-left: 2px solid rgba(167, 139, 250, 0.3);
}

.run-group-2 {
    background: rgba(59, 130, 246, 0.05);
    border-left: 2px solid rgba(59, 130, 246, 0.3);
}

.run-group-3 {
    background: rgba(16, 185, 129, 0.05);
    border-left: 2px solid rgba(16, 185, 129, 0.3);
}

.run-header-row td {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Custom Checkbox */
.custom-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1.5px solid rgba(167, 139, 250, 0.4);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover input~.checkmark {
    border-color: #8B5CF6;
    background-color: rgba(255, 255, 255, 0.5);
}

.custom-checkbox input:checked~.checkmark {
    background-color: #8B5CF6;
    border-color: #8B5CF6;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.short-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.short-flex-wrap:hover .short-actions {
    opacity: 1;
    transform: translateX(0);
}

.action-mini {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.action-mini:hover {
    background: #8B5CF6;
    color: white;
    border-color: #8B5CF6;
    transform: scale(1.1);
}

.action-delete:hover {
    background: #EF4444;
    border-color: #EF4444;
}

/* Selection State */
.short-flex-wrap.selected {
    background: rgba(139, 92, 246, 0.08);
    border-left: 3px solid #8B5CF6;
}

.short-flex-wrap.selected .short-name {
    color: #8B5CF6;
    font-weight: 700;
}

.retouch-source-cell {
    vertical-align: middle !important;
}

/* Utility */
.hidden {
    display: none !important;
}

.short-icon {
    font-size: 14px;
    opacity: 0.8;
}

.music-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 4px 40px 4px;
    /* Added bottom padding to prevent shadow clipping */
}

/* Audio Library - Compact & Muted Style */
.audio-library {
    padding: 16px !important;
    max-height: 520px !important;
    /* Set to match approximate visual height of Settings + Gaps */
    display: flex !important;
    flex-direction: column !important;
}

.audio-header {
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.btn-upload-music,
.btn-audio-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 65px !important;
    /* Unified button width — half of 130px */
    height: 18px !important;
    /* Unified button height — half of 36px */
    padding: 0 !important;
    border-radius: 20px !important;
    background: var(--accent-gradient) !important;
    color: white !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    box-shadow: 0 2px 8px var(--accent-glow) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0 !important;
}

.btn-upload-music:hover,
.btn-audio-back:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 3px 10px var(--accent-glow) !important;
}

.audio-browser-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
    max-height: 380px !important;
    /* Restrict height to stay compact */
}

/* Scrollbar refinement */
.audio-browser-content::-webkit-scrollbar {
    width: 4px !important;
}

.audio-browser-content::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.2) !important;
    border-radius: 10px !important;
}

/* Floating & Muted Categories */
.category-row-premium {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    /* More compact */
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    /* Muted background */
    backdrop-filter: blur(20px) !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.category-row-premium:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
}

.category-icon-refined {
    width: 36px !important;
    /* Smaller icons */
    height: 36px !important;
    background: var(--accent-gradient) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 16px !important;
    margin-right: 14px !important;
    box-shadow: 0 4px 12px var(--accent-glow) !important;
}

.category-name-premium {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

/* Floating & Muted Music Tracks */
.music-track {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    /* More compact */
    margin-bottom: 6px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    /* Muted background */
    backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

.music-track:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

.music-track.active {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 30px rgba(167, 139, 250, 0.1) !important;
}

/* Controls */
.track-controls-group {
    display: flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.music-track button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.3) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}

.music-track button:hover {
    background: #fff !important;
    color: var(--accent-purple) !important;
    transform: scale(1.1) !important;
}



/* ============================================ */
/* GENRE SELECTION MODAL STYLES */
/* ============================================ */

.genre-modal-content {
    display: flex;
    flex-direction: column;
    min-width: 500px;
}

.genre-options-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-genre-option {
    flex: 1;
    padding: 12px 10px;
    border-radius: 40px !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.4) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-genre-option:hover,
.btn-genre-option.active {
    background: var(--accent-gradient) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--accent-glow) !important;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

.btn-apply-genre {
    padding: 10px 24px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 40px !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px var(--accent-glow) !important;
    /* H-37 Р5 (Б-99): `!important` снят вместе с ним у глобального
       `.btn-modal-action` (theme.css:5141). До правки это объявление было
       ПРОИГРАВШИМ: оба `!important` при равной специфичности (0,1,0) решает
       порядок, а глобальное правило стоит НИЖЕ по файлу (240px). Снять
       `!important` только у глобального значило бы отдать ширину этому
       правилу (240px → auto) и изменить размер кнопки Apply в окне GENRE
       SELECT. Здесь `!important` снят с обеих сторон — приоритет снова решает
       порядок, ширина остаётся 240px: WINNER = `.btn-modal-action`.
       Новых `!important` не заведено. */
    width: auto;
}

.btn-apply-genre:hover {
    transform: translateY(-1px) scale(1.05) !important;
}

/* ============================================ */
/* AUDIO MINI-PLAYER & TIMELINE */
/* ============================================ */

.audio-player-widget {
    margin-top: 15px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.audio-player-widget.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-bottom: 5px;
}

/* 1. Top: Header (Title - Time) */
.mini-player-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* space between title and time */
    line-height: 1;
}

.player-track-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.player-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* 2. Middle: Timeline */
.audio-timeline {
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 0;
    width: 100%;
}

/* 3. Bottom: Controls Pill */
.mini-player-controls-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

/* Mimics the .phone-controls aesthetic exactly */
.mini-player-controls-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(25px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Standardized control buttons inside the pill */
.btn-mini-control {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-mini-control:hover {
    color: #8B5CF6;
    transform: translateY(-1px) scale(1.1);
}

.btn-mini-control:active {
    transform: translateY(1px);
}

/* Main play button in the middle */
.btn-mini-main {
    width: 34px;
    height: 34px;
    background: var(--accent-gradient);
    color: white !important;
    border: none;
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-mini-main:hover {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    transform: translateY(-2px) scale(1.05);
}

.timeline-track {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.timeline-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--accent-gradient);
    border-radius: 4px;
    box-shadow: 0 0 12px var(--accent-glow);
}

.timeline-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.2s;
    border: 2px solid #C084FC;
}

.audio-timeline:hover .timeline-handle {
    opacity: 1;
}

.audio-timeline:hover .timeline-track {
    height: 6px;
    transition: height 0.2s;
}

/* ============================================ */
/* TEXT EDITOR MODAL STYLES (9:16) */
/* ============================================ */

.text-editor-container {
    max-width: 800px !important;
    width: 90vw;
    max-height: 90vh;
    padding: 20px !important;
    overflow-x: hidden !important;
}

.text-editor-layout {
    display: grid;
    grid-template-columns: 300px 400px;
    gap: 30px;
    justify-content: center;
    align-items: start;
}

@media (max-width: 800px) {
    .text-editor-layout {
        grid-template-columns: 1fr;
    }
}

.text-editor-preview {
    background: rgba(0, 0, 0, 0.03);
    padding: 15px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.shorts-canvas {
    width: 280px;
    height: 572px;
    /* Ratio matched to 316/646 internal screen area (2px padding) */
    background: #000;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    background-image: url('https://images.unsplash.com/photo-1528605248644-14dd04022da1?w=400&h=700&fit=crop');
    background-size: cover;
    background-position: center;
}

.draggable-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Start at center */
    color: white;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    cursor: move;
    padding: 12px;
    border: 2px dashed rgba(255, 255, 255, 0);
    user-select: text;
    -webkit-user-select: text;
    min-width: 120px;
    white-space: pre-wrap;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    transition: border-color 0.2s;
    outline: none;
}

.draggable-text:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.draggable-text.dragging {
    border-color: rgba(255, 255, 255, 0.5);
    cursor: grabbing;
}

.draggable-text:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    cursor: text;
}

.text-tools-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 400px;
}

/* Two column layout - Ultra Compact */
.editor-two-cols {
    display: grid;
    grid-template-columns: 180px 180px;
    gap: 15px;
}

.editor-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tabs for Text Editor */
.text-editor-tabs-container {
    padding: 0 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.text-editor-tabs {
    display: flex;
    gap: 24px;
}

.text-tab-btn {
    background: none;
    border: none;
    padding: 12px 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-tertiary);
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.text-tab-btn:hover {
    color: var(--text-primary);
}

.text-tab-btn.active {
    color: #B794F6;
}

.text-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
}

.tool-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tool-label {
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7 !important;
}

.tool-select,
.tool-textarea {
    padding: 8px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 11px;
    cursor: pointer;
    box-shadow: none;
}

.tool-textarea {
    resize: vertical;
    min-height: 80px;
    cursor: text;
}

.tool-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    outline: none;
}

.tool-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.color-grid {
    display: flex;
    gap: 12px;
}

.color-swatch,
.shadow-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.color-swatch.active,
.shadow-swatch.active {
    border-color: #8B5CF6;
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2);
}

.shadow-color-grid {
    margin-bottom: 4px;
}

.timing-inputs {
    display: flex;
    gap: 8px;
}

.time-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.time-field span {
    font-size: 9px;
    font-weight: 700;
    color: #000;
    opacity: 0.7;
}

.tool-num-input {
    padding: 6px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: #000000;
    text-align: center;
    width: 100%;
    max-width: 60px;
    font-size: 11px;
}

.modal-footer-text-editor {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 8px;
    width: 100%;
}

.modal-footer-text-editor .btn-delete-text,
.modal-footer-text-editor .btn-modal-action {
    flex: 1;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    white-space: nowrap;
}

.btn-delete-text {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-delete-text:hover {
    background: #ef4444;
    color: white;
    transform: translateY(-2px);
}

/* ============================================ */
/* PREMIUM MINIMALIST AUDIO BROWSER */
/* ============================================ */

.audio-browser {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
}

.audio-nav {
    display: none;
    align-items: center;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.audio-nav.active {
    display: flex;
}

.btn-audio-back {
    background: rgba(183, 148, 246, 0.08);
    border: 1px solid rgba(183, 148, 246, 0.25);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-audio-back:hover {
    background: rgba(183, 148, 246, 0.22);
    border-color: var(--accent-purple);
    color: var(--text-primary);
    transform: translateX(-2px);
}

.audio-browser-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

/* Minimalist List Container */
.category-list-minimalist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Tight, elegant spacing */
}

/* Premium Row Item */
.category-row-premium {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 16px;
}

.category-row-premium:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.category-icon-refined {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s;
}

.category-row-premium:hover .category-icon-refined {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}

.category-info-refined {
    flex: 1;
}

.category-name-premium {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1px 0;
}

.category-meta-refined {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    opacity: 0.95;
}

.category-arrow-right {
    opacity: 0.2;
    transition: all 0.3s;
}

.category-row-premium:hover .category-arrow-right {
    opacity: 0.8;
    transform: translateX(2px);
}

/* Animations */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.audio-browser-content.animating {
    animation: fadeInSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Scrollbar for Browser */
.audio-browser-content::-webkit-scrollbar {
    width: 4px;
}

.btn-fav.active {
    color: #ff3b30;
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 59, 48, 0.3);
}

.track-controls-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-add {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-add:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
    color: var(--text-primary);
}

.btn-add.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 15px var(--accent-glow);
}

.music-track.selected {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #fbcfe8;
    /* Soft pink accent for selection */
}

/* ADR-011 #13: Crop Overlay — Dynamic mode base styles (animation via JS) */
.crop-overlay.crop-dynamic .crop-overlay-inner {
    border-color: rgba(192, 132, 252, 0.6);
    box-shadow: 0 0 25px rgba(192, 132, 252, 0.3), inset 0 0 25px rgba(192, 132, 252, 0.1);
}

/* ─── Global: slider-container must be position:relative for track-bg/progress ─── */
.slider-container {
    position: relative !important;
    width: 100%;
}

/* slider-container padding в модальных окнах Edit/Mix (для thumb не обрезался) */
#audioEditModal .slider-container,
#audioMixModal .slider-container {
    padding: 10px 0 !important;
}

/* ─── Modal Edit & Mix: Premium Slider (эталон = Effects / .quick-action-panel) ─── */

/* Rail: прозрачный, thumb поверх */
#audioEditModal .slider,
#audioMixModal .slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 20px !important;
    background: transparent !important;
    outline: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
    margin: 0 !important;
}

/* Thumb — идентичен .quick-action-panel (Effects) */
#audioEditModal .slider::-webkit-slider-thumb,
#audioMixModal .slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 3px solid #B794F6 !important;
    box-shadow: 0 4px 10px rgba(183, 148, 246, 0.3) !important;
    filter: none !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}

#audioEditModal .slider::-webkit-slider-thumb:hover,
#audioMixModal .slider::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 4px 15px rgba(183, 148, 246, 0.5) !important;
}

/* Firefox */
#audioEditModal .slider::-moz-range-thumb,
#audioMixModal .slider::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 3px solid #B794F6 !important;
    box-shadow: 0 4px 10px rgba(183, 148, 246, 0.3) !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* setting-value badge в модальных окнах Edit/Mix — стиль как в quick-action-panel */
#audioEditModal .setting-value,
#audioMixModal .setting-value {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    background: rgba(183, 148, 246, 0.1) !important;
    color: #B794F6 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(183, 148, 246, 0.2) !important;
    min-width: 45px !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(183, 148, 246, 0.05) !important;
}

/* --- Quick Action Panels & Sliders Refinement (V2: Pearl Theme Alignment) --- */

.quick-action-panel {
    padding: 20px !important;
    margin: 0 !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    transition: none !important;
}

@keyframes panelGrow {
    from {
        max-height: 0;
        opacity: 0;
        margin-top: -20px !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: translateY(-10px);
    }

    to {
        max-height: 1000px;
        opacity: 1;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        transform: translateY(0);
    }
}

@keyframes panelShrink {
    from {
        max-height: 1000px;
        opacity: 1;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        transform: translateY(0);
    }

    to {
        max-height: 0;
        opacity: 0;
        margin-top: -20px !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: translateY(-10px);
    }
}

.active-panel {
    display: block;
    animation: panelGrow 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hidden-panel {
    display: block;
    animation: panelShrink 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none !important;
}

.quick-action-panel .panel-header {
    margin-bottom: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.quick-action-panel .panel-title {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    font-weight: 800 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Elegant Counters */
.quick-action-panel .setting-value {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    background: rgba(183, 148, 246, 0.1) !important;
    color: #B794F6 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(183, 148, 246, 0.2) !important;
    min-width: 45px !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(183, 148, 246, 0.05) !important;
}

#mixPanel .setting-value {
    background: rgba(112, 192, 240, 0.1) !important;
    color: #70C0F0 !important;
    border-color: rgba(112, 192, 240, 0.2) !important;
}

.settings-panel {
    padding: 20px !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

.quick-action-panel .setting-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Elegant Sliders */
.quick-action-panel .slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
    margin: 16px 0 !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.quick-action-panel .slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 4px solid #B794F6 !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#mixPanel .slider::-webkit-slider-thumb {
    border-color: #70C0F0 !important;
}

.quick-action-panel .slider::-webkit-slider-thumb:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(183, 148, 246, 0.3) !important;
}

#mixPanel .slider::-webkit-slider-thumb:hover {
    box-shadow: 0 4px 15px rgba(112, 192, 240, 0.3) !important;
}

/* Smaller "Apply" Buttons - Pearl Standard */
.quick-action-panel .btn-modal-action {
    width: auto !important;
    min-width: 110px !important;
    padding: 10px 24px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    margin-top: 16px !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    border-radius: 40px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.quick-action-panel .btn-modal-action:hover {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px var(--accent-glow) !important;
}

/* Elegant Sliders Redesign - Narrow, Tapered, with Glare */
.settings-panel .slider-container {
    padding: 10px 0;
    position: relative;
    width: 100%;
}

/* Elegant Sliders - Shared Premium Style */
.settings-panel .slider,
.quick-action-panel .slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 20px !important;
    background: transparent !important;
    outline: none !important;
    cursor: pointer;
    position: relative;
    z-index: 5;
    margin: 0 !important;
}

.slider-track-bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 99px;
    clip-path: ellipse(100% 50% at 50% 50%);
    /* Tapered at edges */
    z-index: 1;
}

.slider-progress {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 3px;
    background: var(--accent-gradient);
    pointer-events: none;
    border-radius: 99px;
    clip-path: ellipse(100% 50% at 50% 50%);
    /* Tapered at edges */
    z-index: 2;
    overflow: hidden;
}

.slider-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: sliderGlare 4s infinite linear;
}

.settings-panel .slider::-webkit-slider-thumb,
.quick-action-panel .slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 3px solid #B794F6 !important;
    box-shadow: 0 4px 10px rgba(183, 148, 246, 0.3) !important;
    filter: none !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Glare on Slider Progress */
.settings-panel .slider-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: sliderGlare 4s infinite linear;
}

@keyframes sliderGlare {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

.settings-panel .slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 3px solid #B794F6 !important;
    box-shadow: 0 4px 10px rgba(183, 148, 246, 0.3) !important;
    filter: none !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.settings-panel .slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 15px rgba(183, 148, 246, 0.5) !important;
}

.quick-action-panel .slider-labels {
    opacity: 0.6 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-family: 'Outfit', sans-serif !important;
}

/* --- Premium Modal Layout (V2: Vertical 9:16) --- */

.premium-modal-content {
    max-width: 680px !important;
    width: 95vw !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
}

.modal-layout {
    display: flex;
    height: 520px;
    background: transparent;
}

.modal-preview-side {
    flex: 0 0 260px;
    background: rgba(0, 0, 0, 0.05);
    /* Very subtle tint instead of solid black */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.modal-preview-side::after {
    display: none;
    /* Remove the dark radial gradient */
}

.modal-video-preview {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9/16 !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    background: #000 !important;
    z-index: 2;
    overflow: hidden;
}

.modal-options-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px;
}

.modal-header-block {
    margin-bottom: 24px;
}

.modal-title {
    font-size: 20px !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 4px !important;
    color: var(--text-primary) !important;
}

.modal-description {
    margin: 4px 0 0 0 !important;
    opacity: 0.5;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.selection-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    align-items: center;
    /* Center buttons in the container */
}

.selection-list.vertical-scroll {
    overflow-y: auto;
    padding-right: 8px;
    width: 100%;
}

.selection-list.vertical-scroll::-webkit-scrollbar {
    width: 3px;
}

.selection-list.vertical-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.vertical-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.btn-genre-option {
    width: 240px !important;
    /* Shortened by approx 1/3 */
    justify-content: center !important;
    padding: 0 16px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(183, 148, 246, 0.05) !important;
    border: 1px solid rgba(183, 148, 246, 0.2) !important;
}

.btn-genre-option:hover {
    background: rgba(183, 148, 246, 0.15) !important;
    border-color: var(--accent-purple) !important;
    transform: translateY(-2px) !important;
}

.btn-genre-option.active {
    background: rgba(183, 148, 246, 0.25) !important;
    border-color: var(--accent-purple) !important;
    box-shadow: 0 4px 15px rgba(183, 148, 246, 0.15) !important;
}

/* Captions Alignment */
.font-option,
.animation-option {
    width: 240px !important;
    /* Unified width */
    flex-direction: row !important;
    justify-content: center !important;
    padding: 0 16px !important;
    gap: 12px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
    background: rgba(183, 148, 246, 0.05) !important;
    border: 1px solid rgba(183, 148, 246, 0.2) !important;
}

.font-option:hover,
.animation-option:hover {
    background: rgba(183, 148, 246, 0.15) !important;
    transform: translateY(-2px) !important;
}

.font-option.active,
.animation-option.active {
    background: rgba(183, 148, 246, 0.25) !important;
    border-color: var(--accent-purple) !important;
}

.font-preview,
.preset-preview {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.font-option .preset-name,
.animation-option .preset-name {
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.style-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
    align-items: center;
}

.style-section-label {
    width: 240px;
    /* Align label with buttons */
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: var(--text-tertiary) !important;
    margin-bottom: 4px;
    text-align: left;
}

.modal-footer {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    /* Center the Apply button as well */
}

/* H-37 Р5 (Б-99): с width/height снят `!important` — размеры у ВСЕХ кнопок
   прежние (240×42; у .auth-actions/.quick-action-panel/.modal-footer-dual/
   .modal-footer-text-editor/.h18d-card свои правила с большей специфичностью
   или своим `!important`), а `.mp-load-more` (ui-fixes.css) держит 32 px
   специфичностью 0,2,0 без `!important`. Новых `!important` не заведено. */
.btn-modal-action {
    width: 240px;
    /* Unified width with options */
    height: 42px;
    border-radius: 21px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    box-shadow: 0 10px 25px rgba(183, 148, 246, 0.3) !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-modal-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(183, 148, 246, 0.4) !important;
}

.btn-modal-secondary {
    height: 42px !important;
    border-radius: 21px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-tertiary) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-modal-secondary:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

.modal-footer-dual {
    display: flex;
    gap: 12px;
    width: 240px;
    margin: 20px auto 0;
    justify-content: space-between;
}

.modal-footer-dual .btn-modal-action,
.modal-footer-dual .btn-modal-secondary {
    flex: 1;
    width: auto !important;
    margin: 0 !important;
}


/* Elegant Circle Close Button */
.premium-modal-content .modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
}

.premium-modal-content .modal-close:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #FF6B9D !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Panel Dual Actions */
.panel-actions-dual {
    display: flex;
    gap: 10px;
    padding: 20px 15px 15px;
}

.btn-batch-action {
    flex: 1;
    height: 36px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: 'Outfit', sans-serif;
}

.btn-batch-action.cancel {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-tertiary);
}

.btn-batch-action.cancel:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

.btn-batch-action.apply {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(183, 148, 246, 0.3);
}

.btn-batch-action.apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(183, 148, 246, 0.4);
}
/* ============================================================
   ADR-029: Превью-карточки пресетов — схема-раскадровка актов
   Чистый фронт, данные из STYLE_MAPPING (ui-core.js). Backend не затронут.
   ============================================================ */

/* Сетка карточек в styleModal */
.style-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 4px;
}

/* Карточка пресета */
.style-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--glass-border);
    background: var(--glass-white);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.style-card:hover { transform: translateY(-1px); }
.style-card.active {
    border-color: transparent;
    box-shadow: 0 0 0 2px #B794F6, 0 6px 20px var(--accent-glow);
}

.style-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.style-card-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}
.style-card-dur {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.style-card-desc {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-tertiary);
}

/* ── Полоса актов (раскадровка) ── */
.act-strip {
    display: flex;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
}
.act-strip-sm { height: 26px; }
.act-strip-lg { height: 60px; margin: 10px 0; }

.act-seg {
    position: relative;
    min-width: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Три фазы — три цвета (intro / process / payoff) */
.phase-intro   { background: linear-gradient(135deg, #FFB199, #FF99B3); }
.phase-process { background: linear-gradient(135deg, #B794F6, #9D7BE0); }
.phase-payoff  { background: linear-gradient(135deg, #70C0F0, #5AA8E0); }

/* Деления ритма — вертикальные насечки, плотность задаётся в JS */
.act-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.45);
}
.rhythm-fast .act-tick { background: rgba(255,255,255,0.55); }
.rhythm-slow .act-tick { background: rgba(255,255,255,0.30); }

/* Подписи в крупной версии */
.act-label {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    z-index: 1;
}
.act-sec {
    font-size: 10px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    z-index: 1;
}

/* H-39 Р7 (Б-183): правила превью-доски `.style-preview-board` (7 штук) сняты
   вместе с `_renderStylePreviewBoard` в ui-presets.js: id `stylePreviewBoard`
   нет ни в одной разметке, то есть ни одно из правил не могло сработать.
   Страховка от повторного «оживления» мёртвой ветки — checks/test_h39_pure.py. */
/* ===== /ADR-029 ===== */