:root {
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --bg-tertiary: #f1f3f5;
            --bg-card: #ffffff;
            --bg-glass: rgba(255, 255, 255, 0.92);
            --accent-primary: #f97316;
            --accent-secondary: #fb923c;
            --accent-tertiary: #fed7aa;
            --accent-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            --accent-gradient-soft: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
            --accent-glow: rgba(249, 115, 22, 0.2);
            --accent-glow-strong: rgba(249, 115, 22, 0.35);
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --text-light: #cbd5e1;
            --border-color: rgba(0, 0, 0, 0.06);
            --border-subtle: rgba(0, 0, 0, 0.08);
            --border-strong: rgba(0, 0, 0, 0.12);
            --success: #10b981;
            --success-light: #34d399;
            --success-bg: rgba(16, 185, 129, 0.1);
            --error: #ef4444;
            --error-light: #f87171;
            --error-bg: rgba(239, 68, 68, 0.1);
            --warning: #f59e0b;
            --warning-bg: rgba(245, 158, 11, 0.1);
            --info: #3b82f6;
            --info-bg: rgba(59, 130, 246, 0.1);
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
            --shadow-glow: 0 0 40px rgba(249, 115, 22, 0.15);
            --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.05);
            --shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.08);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-2xl: 24px;
            --radius-full: 9999px;
            --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* Fluid typography scale */
            --fs-xs: clamp(0.625rem, 0.6rem + 0.13vw, 0.75rem);
            --fs-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
            --fs-base: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
            --fs-lg: clamp(1rem, 0.93rem + 0.35vw, 1.25rem);
            --fs-xl: clamp(1.125rem, 1rem + 0.63vw, 1.5rem);
            --fs-2xl: clamp(1.375rem, 1.2rem + 0.88vw, 1.875rem);
            /* Safe area insets for Capacitor mobile app (notch/home indicator) */
            --sat: env(safe-area-inset-top, 0px);
            --sab: env(safe-area-inset-bottom, 0px);
            --sal: env(safe-area-inset-left, 0px);
            --sar: env(safe-area-inset-right, 0px)
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Outfit', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.6;
            padding-top: calc(72px + var(--sat));
            padding-bottom: var(--sab);
            padding-left: var(--sal);
            padding-right: var(--sar);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-text-size-adjust: 100%;
            overscroll-behavior-y: contain
        }

        body:has(.modal-overlay.visible) {
            overflow: hidden
        }

        button, a, [role="button"], input[type="submit"], select {
            touch-action: manipulation
        }

        h1, h2, h3, h4, .modal-header h2, .modal-header h3 {
            text-wrap: balance
        }

        .container {
            max-width: 920px;
            margin: 0 auto;
            padding: 28px;
            scroll-margin-top: 80px
        }

        .header-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 72px;
            background: var(--bg-glass);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--border-color);
            z-index: 100;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            transition: var(--transition-normal);
            text-align: left
        }

        .header-bar.scrolled {
            box-shadow: var(--shadow-md);
            background: rgba(255, 255, 255, .95)
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 16px
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            cursor: pointer;
            transition: var(--transition-fast)
        }

        .header-logo-img {
            height: 42px;
            width: auto;
            transition: var(--transition-normal);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
            border: none;
            outline: 0;
            background: 0 0
        }

        .header-logo:hover .header-logo-img {
            transform: scale(1.04) translateY(-1px);
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12))
        }

        .header-logo:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 4px;
            border-radius: var(--radius-md)
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .lang-selector-wrap {
            position: relative
        }

        .lang-selector {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 8px 28px 8px 10px;
            font-family: inherit;
            font-size: .8rem;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            transition: var(--transition-fast)
        }

        .lang-selector:hover {
            border-color: var(--accent-primary);
            color: var(--text-primary)
        }

        .lang-selector:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, .15)
        }

        .lang-selector option {
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 8px
        }

        .header-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: none;
            border-radius: var(--radius-md);
            font-family: inherit;
            font-size: .875rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition-fast);
            background: 0 0;
            color: var(--text-secondary);
            position: relative
        }

        .header-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-md);
            background: currentColor;
            opacity: 0;
            transition: var(--transition-fast)
        }

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

        .header-btn:hover::before {
            opacity: .06
        }

        .header-btn:active::before {
            opacity: .1
        }

        .header-btn svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0
        }

        .header-divider {
            width: 1px;
            height: 28px;
            background: var(--border-subtle);
            margin: 0 6px
        }

        .profile-dropdown,
        .support-dropdown {
            position: relative
        }

        .profile-trigger {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px 6px 6px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            background: var(--bg-card);
            cursor: pointer;
            transition: var(--transition-fast);
            box-shadow: var(--shadow-xs)
        }

        .profile-trigger:hover {
            border-color: var(--border-subtle);
            box-shadow: var(--shadow-sm);
            transform: translateY(-1px)
        }

        .profile-avatar {
            width: 34px;
            height: 34px;
            border-radius: var(--radius-sm);
            background: var(--accent-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            font-size: .9rem;
            box-shadow: 0 2px 6px var(--accent-glow)
        }

        .profile-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px
        }

        .profile-name {
            font-size: .875rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.2
        }

        .profile-plan {
            display: flex;
            align-items: center;
            gap: 6px
        }

        .profile-plan-badge {
            font-size: .65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            padding: 3px 7px;
            border-radius: var(--radius-sm);
            line-height: 1
        }

        .profile-plan-badge.preview {
            background: var(--bg-tertiary);
            color: var(--text-muted)
        }

        .profile-plan-badge.basic {
            background: #dbeafe;
            color: #1d4ed8
        }

        .profile-plan-badge.standard {
            background: #dcfce7;
            color: #16a34a
        }

        .profile-plan-badge.pro {
            background: #fef3c7;
            color: #d97706
        }

        .profile-plan-badge.credit {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff
        }

        .profile-usage {
            font-family: Pretendard, -apple-system, sans-serif;
            font-size: .7rem;
            color: var(--text-muted);
            font-weight: 500;
            font-variant-numeric: tabular-nums
        }

        .profile-chevron {
            color: var(--text-muted);
            transition: var(--transition-fast)
        }

        .profile-dropdown.open .profile-chevron {
            transform: rotate(180deg)
        }

        .dropdown-menu {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 300px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(.98);
            transition: var(--transition-normal);
            z-index: 200;
            overflow: hidden
        }

        .profile-dropdown.open .dropdown-menu,
        .support-dropdown.open .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1)
        }

        .support-dropdown .dropdown-menu {
            width: 240px
        }

        .dropdown-header {
            padding: 18px;
            border-bottom: 1px solid var(--border-color);
            background: var(--accent-gradient-soft);
            font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
        }

        .dropdown-user {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px
        }

        .dropdown-avatar {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            background: var(--accent-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 1.2rem;
            box-shadow: 0 4px 12px var(--accent-glow)
        }

        .dropdown-user-info {
            flex: 1
        }

        .dropdown-user-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            font-family: Pretendard, -apple-system, sans-serif
        }

        .dropdown-user-email {
            font-size: .8125rem;
            color: var(--text-muted);
            margin-top: 2px;
            font-family: Pretendard, -apple-system, sans-serif
        }

        .dropdown-usage {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 14px;
            box-shadow: var(--shadow-xs)
        }

        .usage-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px
        }

        .usage-label-text {
            font-size: .8125rem;
            color: var(--text-secondary);
            font-weight: 500;
            font-family: Pretendard, -apple-system, sans-serif
        }

        .usage-label-count {
            font-family: Pretendard, -apple-system, sans-serif;
            font-size: .875rem;
            font-weight: 700;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums
        }

        .usage-bar {
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-full);
            overflow: hidden
        }

        .usage-bar-fill {
            height: 100%;
            background: var(--accent-gradient);
            border-radius: var(--radius-full);
            transition: width .4s ease
        }

        .usage-bar-fill.warning {
            background: linear-gradient(90deg, #f59e0b, #fbbf24)
        }

        .usage-bar-fill.danger {
            background: linear-gradient(90deg, #ef4444, #f87171)
        }

        .dropdown-body {
            padding: 10px
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: var(--radius-md);
            font-size: .9rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition-fast);
            border: none;
            background: 0 0;
            width: 100%;
            text-align: left;
            font-family: inherit
        }

        .dropdown-item:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
            transform: translateX(2px)
        }

        .dropdown-item svg {
            width: 20px;
            height: 20px;
            color: var(--text-muted);
            transition: var(--transition-fast)
        }

        .dropdown-item:hover svg {
            color: var(--accent-primary)
        }

        .dropdown-item.upgrade {
            color: var(--accent-primary);
            font-weight: 600;
            background: var(--accent-gradient-soft)
        }

        .dropdown-item.upgrade svg {
            color: var(--accent-primary)
        }

        .dropdown-item.upgrade:hover {
            background: rgba(249, 115, 22, .15)
        }

        .dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: 6px 14px
        }

        .dropdown-item.logout {
            color: var(--error)
        }

        .dropdown-item.logout svg {
            color: var(--error)
        }

        .dropdown-item.logout:hover {
            background: var(--error-bg)
        }

        .dropdown-credit {
            background: linear-gradient(135deg, rgba(249, 115, 22, .08), rgba(234, 88, 12, .06));
            border-radius: var(--radius-md);
            padding: 14px;
            margin-bottom: 12px;
            border: 1px solid rgba(249, 115, 22, .2)
        }

        .credit-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px
        }

        .credit-label-text {
            font-size: .8125rem;
            color: var(--text-secondary);
            font-weight: 500
        }

        .credit-label-balance {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--accent-primary);
            font-variant-numeric: tabular-nums
        }

        .credit-songs-available {
            font-size: .75rem;
            color: var(--text-muted);
            margin-bottom: 10px
        }

        .btn-credit-charge {
            width: 100%;
            padding: 10px;
            background: var(--accent-gradient);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: .875rem;
            cursor: pointer;
            transition: var(--transition-fast)
        }

        .btn-credit-charge:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--accent-glow)
        }

        .dropdown-item.credit {
            color: #22c55e
        }

        .dropdown-item.credit svg {
            color: #22c55e
        }

        .dropdown-item.credit:hover {
            background: rgba(34, 197, 94, .1)
        }

        .credit-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: var(--accent-primary);
            color: #fff;
            font-weight: 700;
            font-size: 9px;
            font-family: 'JetBrains Mono', monospace;
            line-height: 1;
            flex-shrink: 0;
            margin-right: 5px;
            letter-spacing: -.02em
        }

        .credit-icon.visitor {
            background: rgba(255,255,255,.12);
            color: var(--text-muted)
        }

        .profile-credit-info {
            display: flex;
            align-items: center;
            gap: 4px
        }

        .profile-credit-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: .72rem;
            font-weight: 600;
            color: var(--text-secondary)
        }

        .profile-credit-badge .remaining {
            color: var(--accent-primary);
            font-variant-numeric: tabular-nums;
            margin-left: 2px
        }

        .credit-modal {
            max-width: 520px
        }

        .credit-packages {
            display: grid;
            gap: 10px;
            margin-bottom: 20px
        }

        .credit-package {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            padding: 18px 20px;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            border: 2px solid var(--border-color);
            cursor: pointer;
            transition: border-color .2s, background .2s, box-shadow .2s
        }

        .credit-package:hover {
            border-color: rgba(251,146,60,.4);
            background: rgba(251,146,60,.03)
        }

        .credit-package.selected {
            border-color: var(--accent-primary);
            background: rgba(251,146,60,.06);
            box-shadow: 0 0 0 1px var(--accent-primary), 0 4px 16px rgba(251,146,60,.12)
        }

        .credit-package.popular {
            border-color: rgba(251,146,60,.35);
            background: rgba(251,146,60,.04)
        }

        .credit-package.popular::before {
            content: "BEST";
            position: absolute;
            top: -9px;
            right: 16px;
            background: var(--accent-primary);
            color: #fff;
            font-size: .65rem;
            font-weight: 700;
            letter-spacing: .05em;
            padding: 2px 10px;
            border-radius: 99px;
            line-height: 1.4
        }

        .credit-package-info {
            display: flex;
            flex-direction: column;
            gap: 2px
        }

        .credit-package-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary)
        }

        .credit-package-desc {
            font-size: .8125rem;
            color: var(--text-muted)
        }

        .credit-package-features {
            display: flex;
            gap: 8px;
            margin-top: 6px;
            flex-wrap: wrap
        }

        .credit-package-features span {
            font-size: .7rem;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 2px 8px;
            border-radius: 99px;
            white-space: nowrap
        }

        .credit-package-bonus {
            font-size: .7rem;
            color: var(--accent-primary);
            font-weight: 600;
            margin-top: 2px
        }

        .credit-package-price {
            text-align: right
        }

        .credit-package-price .amount {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums
        }

        .credit-package-price .period {
            font-size: .75rem;
            color: var(--text-muted);
            font-weight: 400
        }

        .credit-package-price .per-song {
            display: block;
            font-size: .7rem;
            color: var(--text-muted);
            margin-top: 2px
        }

        .credit-summary {
            background: var(--bg-tertiary);
            border-radius: var(--radius-lg);
            padding: 16px 20px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color)
        }

        .credit-summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px
        }

        .credit-summary-row:last-child {
            margin-bottom: 0;
            padding-top: 10px;
            border-top: 1px solid var(--border-color)
        }

        .credit-summary-label {
            font-size: .875rem;
            color: var(--text-secondary)
        }

        .credit-summary-value {
            font-size: .875rem;
            color: var(--text-primary);
            font-weight: 600
        }

        .credit-summary-total {
            font-size: 1rem;
            color: var(--accent-primary);
            font-weight: 700
        }

        .btn-charge-submit {
            width: 100%;
            padding: 15px;
            background: var(--accent-primary);
            color: #fff;
            border: none;
            border-radius: var(--radius-lg);
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: background .2s, box-shadow .2s, transform .15s;
            letter-spacing: .01em
        }

        .btn-charge-submit:hover {
            background: #e8822e;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(251,146,60,.25)
        }

        .btn-charge-submit:disabled {
            opacity: .4;
            cursor: not-allowed;
            transform: none;
            box-shadow: none
        }

        .payment-method-tabs {
            display: flex;
            gap: 0;
            margin: 0 24px 16px;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--border-strong)
        }

        .payment-method-tab {
            flex: 1;
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: none;
            color: var(--text-muted);
            font-size: .85rem;
            font-weight: 500;
            cursor: pointer;
            transition: background .15s ease, color .15s ease;
            text-align: center
        }

        .payment-method-tab:hover {
            background: var(--bg-secondary);
            color: var(--text-secondary)
        }

        .payment-method-tab.active {
            background: linear-gradient(135deg, #22c55e, #10b981);
            color: #fff;
            font-weight: 600
        }

        .paypal-payment-content {
            display: none
        }

        .paypal-payment-content.visible {
            display: block
        }

        #paypal-button-container {
            min-height: 55px;
            margin-top: 16px
        }

        .paypal-status-message {
            text-align: center;
            padding: 24px;
            color: var(--text-muted);
            font-size: .9rem
        }

        .paypal-status-message.error {
            color: #ef4444
        }

        .credit-history-list {
            max-height: 400px;
            overflow-y: auto
        }

        .credit-history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px;
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            margin-bottom: 8px
        }

        .credit-history-left {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .credit-history-desc {
            font-size: .875rem;
            color: var(--text-primary)
        }

        .credit-history-date {
            font-size: .75rem;
            color: var(--text-muted)
        }

        .credit-history-amount {
            font-size: 1rem;
            font-weight: 700
        }

        .credit-history-amount.positive {
            color: #22c55e
        }

        .credit-history-amount.negative {
            color: #ef4444
        }

        /* ═══ MODAL CARD (shared dark-themed card for notice + tutorial modals) ═══ */
        .modal-card {
            --mc-surface: #111114;
            --mc-surface-2: #18181b;
            --mc-surface-3: #1f1f23;
            --mc-border: rgba(255,255,255,.06);
            --mc-border-light: rgba(255,255,255,.1);
            --mc-accent: #f97316;
            --mc-accent-glow: rgba(249,115,22,.15);
            --mc-accent-glow-strong: rgba(249,115,22,.25);
            --mc-text: #fafafa;
            --mc-text-secondary: rgba(255,255,255,.55);
            --mc-text-muted: rgba(255,255,255,.35);
            --mc-warning: #f59e0b;
            --mc-warning-bg: rgba(245,158,11,.08);
            --mc-success: #22c55e;
            width: 100%; max-width: 440px;
            background: var(--mc-surface);
            border: 1px solid var(--mc-border);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            transform: translateY(12px) scale(.97);
            opacity: 0;
            transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .35s;
            color: var(--mc-text);
            font-family: 'Outfit', sans-serif
        }
        .modal-overlay.visible .modal-card { transform: translateY(0) scale(1); opacity: 1 }
        .modal-card::before {
            content: '';
            position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
            pointer-events: none; z-index: 0
        }
        .modal-card > * { position: relative; z-index: 1 }

        /* ═══ NOTICE MODAL (Pre-Analysis) ═══ */
        .notice-hdr {
            padding: 28px 28px 22px;
            text-align: center;
            position: relative;
            overflow: hidden
        }
        .notice-hdr::before {
            content: '';
            position: absolute;
            top: -40px; left: 50%; transform: translateX(-50%);
            width: 200px; height: 120px;
            background: radial-gradient(ellipse, var(--mc-accent-glow-strong) 0%, transparent 70%);
            pointer-events: none
        }
        .notice-hdr-icon {
            width: 44px; height: 44px;
            margin: 0 auto 14px;
            background: var(--mc-accent-glow);
            border: 1px solid rgba(249,115,22,.2);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center
        }
        .notice-hdr-icon svg { width: 22px; height: 22px; color: var(--mc-accent) }
        .notice-hdr h2 {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -.03em;
            color: var(--mc-text)
        }
        .notice-hdr-sub {
            font-size: .8125rem;
            color: var(--mc-text-muted);
            margin-top: 6px;
            font-weight: 400
        }
        .notice-body { padding: 4px 24px 8px }
        .notice-row {
            display: flex; align-items: flex-start; gap: 14px;
            padding: 13px 0;
            border-bottom: 1px solid var(--mc-border)
        }
        .notice-row:last-child { border-bottom: none }
        .notice-ic {
            flex-shrink: 0;
            width: 32px; height: 32px;
            border-radius: 8px;
            background: var(--mc-surface-3);
            display: flex; align-items: center; justify-content: center
        }
        .notice-ic svg { width: 16px; height: 16px; color: var(--mc-text-secondary) }
        .notice-row.warn .notice-ic {
            background: var(--mc-warning-bg);
            border: 1px solid rgba(245,158,11,.12)
        }
        .notice-row.warn .notice-ic svg { color: var(--mc-warning) }
        .notice-txt {
            flex: 1;
            font-size: .875rem;
            line-height: 1.55;
            color: var(--mc-text-secondary)
        }
        .notice-txt strong { color: var(--mc-text); font-weight: 600 }
        .notice-row.warn .notice-txt strong { color: var(--mc-warning) }
        .notice-agree {
            margin: 0 24px;
            padding: 14px 16px;
            background: var(--mc-surface-2);
            border: 1px solid var(--mc-border);
            border-radius: 12px
        }
        .notice-agree-label {
            display: flex; align-items: center; gap: 10px;
            cursor: pointer;
            font-size: .8125rem;
            font-weight: 500;
            color: var(--mc-text);
            line-height: 1.4
        }
        .notice-agree-label input[type="checkbox"] {
            appearance: none; -webkit-appearance: none;
            width: 18px; height: 18px;
            border: 1.5px solid var(--mc-border-light);
            border-radius: 5px;
            background: var(--mc-surface-3);
            flex-shrink: 0;
            cursor: pointer;
            position: relative;
            transition: all .2s
        }
        .notice-agree-label input:checked {
            background: var(--mc-accent);
            border-color: var(--mc-accent)
        }
        .notice-agree-label input:checked::after {
            content: '';
            position: absolute;
            left: 5px; top: 2px;
            width: 5px; height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg)
        }
        .notice-links {
            display: flex; justify-content: center; gap: 6px;
            padding: 14px 24px 4px;
            flex-wrap: wrap
        }
        .notice-link {
            font-size: .75rem;
            color: var(--mc-text-muted);
            cursor: pointer;
            transition: color .2s;
            text-decoration: none;
            border-bottom: 1px solid transparent
        }
        .notice-link:hover { color: var(--mc-accent); border-color: var(--mc-accent) }
        .notice-links-sep {
            color: var(--mc-text-muted);
            font-size: .75rem;
            opacity: .4
        }
        .notice-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding: 16px 24px 20px
        }
        .notice-dontshow {
            display: flex; align-items: center; gap: 7px;
            font-size: .75rem;
            color: var(--mc-text-muted);
            cursor: pointer
        }
        .notice-dontshow input[type="checkbox"] {
            appearance: none; -webkit-appearance: none;
            width: 15px; height: 15px;
            border: 1.5px solid rgba(255,255,255,.15);
            border-radius: 4px;
            background: transparent;
            cursor: pointer;
            position: relative;
            transition: all .2s
        }
        .notice-dontshow input:checked {
            background: var(--mc-surface-3);
            border-color: rgba(255,255,255,.25)
        }
        .notice-dontshow input:checked::after {
            content: '';
            position: absolute;
            left: 4px; top: 1.5px;
            width: 4px; height: 7px;
            border: solid var(--mc-text-secondary);
            border-width: 0 1.5px 1.5px 0;
            transform: rotate(45deg)
        }
        .notice-confirm-btn {
            font-family: 'Outfit', sans-serif;
            font-size: .875rem;
            font-weight: 600;
            padding: 11px 28px;
            border-radius: 10px;
            border: none;
            background: var(--mc-accent);
            color: #fff;
            cursor: pointer;
            transition: all .25s;
            box-shadow: 0 4px 16px rgba(249,115,22,.25);
            letter-spacing: -.01em
        }
        .notice-confirm-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(249,115,22,.35)
        }
        .notice-confirm-btn:disabled {
            opacity: 1;
            cursor: not-allowed;
            box-shadow: none;
            background: #333;
            color: rgba(255,255,255,.4)
        }

        .guest-login-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            background: var(--accent-gradient);
            color: #fff;
            border: none;
            border-radius: var(--radius-full);
            font-family: inherit;
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-normal);
            box-shadow: 0 4px 14px var(--accent-glow);
            position: relative;
            overflow: hidden
        }

        .guest-login-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 100%);
            opacity: 0;
            transition: var(--transition-fast)
        }

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

        .guest-login-btn:hover::before {
            opacity: 1
        }

        .guest-login-btn:active {
            transform: translateY(0)
        }

        .guest-login-btn svg {
            width: 18px;
            height: 18px;
            position: relative;
            z-index: 1
        }

        .terms-group {
            margin: 16px 0
        }

        .terms-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px
        }

        .terms-checkbox input {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-primary);
            cursor: pointer;
            flex-shrink: 0
        }

        .terms-checkbox label {
            font-size: .85rem;
            color: var(--text-secondary);
            line-height: 1.4;
            cursor: pointer;
            flex: 1
        }

        .terms-checkbox.required label::before {
            content: '(필수) ';
            color: var(--error);
            font-weight: 500
        }

        .terms-checkbox.optional label::before {
            content: '(선택) ';
            color: var(--text-muted)
        }

        .terms-view-btn {
            font-size: .75rem;
            color: var(--accent-primary);
            background: 0 0;
            border: 1px solid var(--accent-primary);
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap;
            transition: var(--transition-fast)
        }

        .terms-view-btn:hover {
            background: var(--accent-primary);
            color: #fff
        }

        .site-footer {
            margin-top: 80px;
            padding: 48px 28px 36px;
            background: linear-gradient(180deg, var(--bg-secondary) 0, var(--bg-tertiary) 100%);
            border-top: 1px solid var(--border-color);
            position: relative;
            z-index: 100;
            pointer-events: auto !important
        }

        .footer-content {
            max-width: 920px;
            margin: 0 auto
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
            justify-content: center;
            margin-bottom: 28px;
            padding-bottom: 28px;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            z-index: 100
        }

        .footer-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: .9rem;
            font-weight: 500;
            transition: var(--transition-fast);
            position: relative;
            cursor: pointer;
            pointer-events: auto !important;
            z-index: 101;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit
        }

        .footer-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-primary);
            transition: var(--transition-fast)
        }

        .footer-link:hover {
            color: var(--accent-primary)
        }

        .footer-link:hover::after {
            width: 100%
        }

        .footer-business {
            text-align: center;
            font-size: .8125rem;
            color: var(--text-muted);
            line-height: 2
        }

        .footer-business p {
            margin: 4px 0
        }

        .footer-business .company-name {
            font-weight: 700;
            color: var(--text-secondary)
        }

        .footer-copyright {
            text-align: center;
            margin-top: 24px;
            font-size: .8125rem;
            color: var(--text-light)
        }

        .legal-modal {
            max-width: 640px;
            max-height: 80vh
        }

        .legal-content {
            padding: 24px;
            max-height: 60vh;
            overflow-y: auto;
            font-size: .9rem;
            line-height: 1.8;
            color: var(--text-secondary)
        }

        .legal-content h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 24px 0 12px
        }

        .legal-content h3:first-child {
            margin-top: 0
        }

        .legal-content p {
            margin-bottom: 12px
        }

        .legal-content ul {
            margin: 12px 0;
            padding-left: 24px
        }

        .legal-content li {
            margin-bottom: 8px
        }

        .faq-item {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color)
        }

        .faq-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0
        }

        .faq-q {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px
        }

        .faq-a {
            color: var(--text-secondary)
        }

        .faq-a ul {
            margin: 8px 0;
            padding-left: 20px
        }

        .faq-a li {
            margin-bottom: 4px
        }

        .faq-tip {
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(34, 197, 94, .1);
            border-left: 3px solid #22c55e;
            border-radius: 0 8px 8px 0;
            font-size: .85rem;
            color: #16a34a
        }

        .faq-price-table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0;
            font-size: .85rem
        }

        .faq-price-table td,
        .faq-price-table th {
            padding: 10px 12px;
            text-align: left;
            border: 1px solid var(--border-color)
        }

        .faq-price-table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-primary)
        }

        .faq-price-table td {
            color: var(--text-secondary)
        }

        .history-modal {
            max-width: 560px
        }

        .history-warning-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: #fef3c7;
            border: 1px solid #fcd34d;
            border-radius: 10px;
            margin-bottom: 16px
        }

        .history-warning-banner svg {
            flex-shrink: 0;
            color: #d97706
        }

        .history-warning-banner span {
            font-size: .85rem;
            color: #92400e;
            line-height: 1.5
        }

        .history-list {
            max-height: 400px;
            overflow-y: auto
        }

        .history-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 40px 20px;
            color: var(--text-muted)
        }

        .history-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 40px 20px;
            text-align: center
        }

        .history-empty svg {
            color: var(--text-muted);
            opacity: .5
        }

        .history-empty p {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin: 0
        }

        .history-empty span {
            font-size: .875rem;
            color: var(--text-muted)
        }

        .history-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-bottom: 10px;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
            background: #fff
        }

        .history-item:hover {
            border-color: var(--accent-primary);
            box-shadow: 0 2px 8px rgba(249, 115, 22, .1)
        }

        .history-item:last-child {
            margin-bottom: 0
        }

        /* History tabs (v19.0) */
        .history-tabs {
            display: flex;
            gap: 0;
            margin-top: 8px;
            border-bottom: 2px solid var(--border-primary)
        }

        .history-tab {
            flex: 1;
            padding: 10px 16px;
            border: none;
            background: none;
            color: var(--text-muted);
            font-size: .875rem;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: color .2s ease
        }

        .history-tab.active {
            color: var(--accent-primary);
            font-weight: 600
        }

        .history-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-primary);
            border-radius: 1px
        }

        /* Friend tabs & list (v19.0) */
        .friend-tabs {
            display: flex;
            gap: 0;
            border-bottom: 2px solid var(--border-primary)
        }

        .friend-tab {
            flex: 1;
            padding: 10px 12px;
            border: none;
            background: none;
            color: var(--text-muted);
            font-size: .8125rem;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: color .2s ease
        }

        .friend-tab.active {
            color: var(--accent-primary);
            font-weight: 600
        }

        .friend-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-primary);
            border-radius: 1px
        }

        .friend-list-container {
            margin-top: 12px;
            max-height: 350px;
            overflow-y: auto
        }

        .friend-list {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .friend-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border: 1px solid var(--border-primary);
            border-radius: 10px;
            background: var(--bg-secondary);
            transition: border-color .2s ease
        }

        .friend-item:hover {
            border-color: var(--accent-primary)
        }

        .friend-item-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1
        }

        .friend-item-email {
            font-size: .875rem;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .friend-item-name {
            font-size: .75rem;
            color: var(--text-muted)
        }

        .friend-item-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0
        }

        .friend-item-actions button {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: .75rem;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid;
            transition: background .2s ease, color .2s ease
        }

        .btn-friend-accept {
            background: var(--accent-primary);
            color: #fff;
            border-color: var(--accent-primary)
        }

        .btn-friend-accept:hover {
            background: var(--accent-hover)
        }

        .btn-friend-reject,
        .btn-friend-remove {
            background: transparent;
            color: var(--text-muted);
            border-color: var(--border-primary)
        }

        .btn-friend-reject:hover,
        .btn-friend-remove:hover {
            background: #fee2e2;
            color: #dc2626;
            border-color: #dc2626
        }

        .shared-badge {
            font-size: .7rem;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
            background: #dbeafe;
            color: #2563eb;
            display: inline-flex;
            align-items: center;
            gap: 3px
        }

        .btn-share {
            padding: 6px 10px;
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            background: transparent;
            color: var(--text-secondary);
            font-size: .75rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: background .2s ease, color .2s ease, border-color .2s ease
        }

        .btn-share:hover {
            background: #dbeafe;
            color: #2563eb;
            border-color: #2563eb
        }

        .friend-empty {
            text-align: center;
            padding: 32px 16px;
            color: var(--text-muted);
            font-size: .875rem
        }

        .history-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0
        }

        .history-icon.youtube {
            background: #fee2e2
        }

        .history-icon.instagram {
            background: #fce7f3
        }

        .history-icon.file {
            background: var(--bg-tertiary)
        }

        .history-info {
            flex: 1;
            min-width: 0
        }

        .history-title {
            font-size: .9375rem;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px
        }

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

        .history-badge {
            font-size: .75rem;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px
        }

        .history-badge.bpm {
            background: var(--bg-tertiary);
            color: var(--text-secondary)
        }

        .history-badge.date {
            background: 0 0;
            color: var(--text-muted);
            font-weight: 400
        }

        .history-badge.preview {
            background: #fef3c7;
            color: #d97706
        }

        .history-badge.full {
            background: #dcfce7;
            color: #16a34a
        }

        .btn-regenerate {
            padding: 8px 14px;
            border: 1px solid var(--accent-primary);
            border-radius: 8px;
            background: #fff;
            color: var(--accent-primary);
            font-size: .8125rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .btn-regenerate:hover {
            background: var(--accent-primary);
            color: #fff
        }

        .btn-regenerate:disabled {
            opacity: .5;
            cursor: not-allowed
        }

        .btn-regenerate svg {
            width: 14px;
            height: 14px
        }

        .btn-regenerate.free {
            border-color: #10b981;
            color: #10b981
        }

        .btn-regenerate.free:hover {
            background: #10b981;
            color: #fff
        }

        .history-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            align-items: center
        }

        .history-btn {
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: #fff;
            font-size: .75rem;
            font-weight: 500;
            cursor: pointer;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px
        }

        .history-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary)
        }

        .history-btn:disabled {
            opacity: .5;
            cursor: not-allowed
        }

        .history-btn.primary {
            background: var(--accent-primary);
            color: #fff;
            border-color: var(--accent-primary)
        }

        .history-btn.primary:hover {
            background: #ea580c
        }

        .history-btn.success {
            background: #10b981;
            color: #fff;
            border-color: #10b981
        }

        .history-btn.success:hover {
            background: #059669
        }

        .history-btn.purchase {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: #fff;
            border: none
        }

        .history-btn.purchase:hover {
            background: linear-gradient(135deg, #ea580c, #c2410c)
        }

        .history-btn.extend {
            background: #6366f1;
            color: #fff;
            border-color: #6366f1
        }

        .history-btn.extend:hover {
            background: #4f46e5
        }

        .history-btn.credit {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff;
            border: none;
            font-weight: 600
        }

        .history-btn.credit:hover {
            background: linear-gradient(135deg, #16a34a, #15803d);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(34, 197, 94, .3)
        }

        .history-badge.expired {
            background: #fef2f2;
            color: #dc2626
        }

        .history-badge.unlocked {
            background: #dbeafe;
            color: #2563eb
        }

        .history-badge.days {
            background: #f0fdf4;
            color: #16a34a;
            font-size: .7rem
        }

        .history-item-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px
        }

        .history-price {
            font-size: .75rem;
            color: var(--text-muted)
        }

        .edit-toolbar {
            display: none;
            position: fixed;
            right: -320px;
            top: 50%;
            transform: translateY(-50%);
            width: 300px;
            max-height: 80vh;
            overflow-y: auto;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 14px 0 0 14px;
            padding: 16px;
            box-shadow: -4px 0 20px rgba(0, 0, 0, .1);
            z-index: 1000;
            transition: right .3s ease
        }

        .edit-toolbar.visible {
            display: none;
            right: 0
        }

        .edit-toolbar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color)
        }

        .edit-toolbar-title {
            font-size: .9375rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px
        }

        .edit-toolbar-title svg {
            width: 18px;
            height: 18px;
            color: var(--accent-primary)
        }

        .edit-toolbar-close {
            width: 28px;
            height: 28px;
            border: none;
            background: 0 0;
            border-radius: 6px;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center
        }

        .edit-toolbar-close:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary)
        }

        .edit-btn-group {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .edit-btn-row {
            display: flex;
            gap: 8px
        }

        .edit-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: #fff;
            font-size: .8125rem;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
            font-family: inherit;
            flex: 1
        }

        .edit-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary)
        }

        .edit-btn:disabled {
            opacity: .5;
            cursor: not-allowed
        }

        .edit-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0
        }

        .edit-btn.active {
            background: var(--accent-primary);
            color: #fff;
            border-color: var(--accent-primary)
        }

        .edit-btn.active svg {
            color: #fff
        }

        .edit-btn-divider {
            display: none
        }

        .edit-section-title {
            font-size: .75rem;
            font-weight: 600;
            color: var(--text-muted);
            margin: 8px 0 6px;
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .edit-select {
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: #fff;
            font-size: .8125rem;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
            width: 100%
        }

        .edit-select:hover {
            border-color: var(--accent-primary)
        }

        .edit-status {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: .8125rem;
            display: none;
            align-items: center;
            gap: 8px
        }

        .edit-status.visible {
            display: flex
        }

        .edit-status.success {
            background: var(--success-bg);
            color: #059669
        }

        .edit-status.error {
            background: var(--error-bg);
            color: var(--error)
        }

        .edit-status svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0
        }

        .control-bars-container {
            display: none;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 16px
        }

        .control-bars-container.visible {
            display: flex
        }

        .audio-bar,
        .metronome-bar,
        .playback-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(30,58,95,0.85) 0, rgba(45,90,135,0.85) 100%);
            border: 1px solid rgba(59,130,246,0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            position: relative;
            overflow: hidden
        }

        .playback-bar {
            background: linear-gradient(135deg, rgba(124,45,18,0.85) 0, rgba(194,65,12,0.85) 100%);
            border-color: rgba(249,115,22,0.4)
        }

        .playback-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(249,115,22,0.08), transparent);
            animation: barShimmer 4s ease-in-out infinite;
            pointer-events: none
        }

        .metronome-bar {
            background: linear-gradient(135deg, #1e3a5f 0, #2d5a87 100%);
            border-color: #3b82f6;
            padding: 8px 14px;
            gap: 10px
        }

        .metronome-bar .ctrl-btn {
            width: 28px;
            height: 28px
        }

        .metronome-bar .ctrl-btn svg {
            width: 12px;
            height: 12px
        }

        .metronome-bar .metronome-bar-title {
            font-size: .75rem;
            min-width: 80px;
            gap: 6px
        }

        .metronome-bar .metronome-bar-title svg {
            width: 14px;
            height: 14px
        }

        .youtube-player-bar {
            padding: 12px;
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .youtube-player-bar-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .8rem;
            font-weight: 600;
            color: #ff0000
        }

        .youtube-player-bar-title svg {
            width: 20px;
            height: 20px
        }

        .youtube-player-wrapper {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            aspect-ratio: 16/9;
            border-radius: 8px;
            overflow: hidden;
            background: #000
        }

        .youtube-player-wrapper iframe {
            width: 100%;
            height: 100%
        }

        .youtube-sync-controls {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 6px 0;
            font-size: .8rem;
            color: var(--text-secondary);
        }
        .youtube-sync-controls .yt-sync-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .youtube-sync-controls label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            font-size: .8rem;
        }
        .yt-offset-control {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: .8rem;
        }
        .yt-offset-control.disabled {
            opacity: .35;
            pointer-events: none;
        }
        .yt-offset-label {
            color: var(--text-secondary);
            font-size: .8rem;
            white-space: nowrap;
        }
        .yt-offset-btn {
            width: 22px; height: 22px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            cursor: pointer;
            font-size: .8rem;
            display: flex; align-items: center; justify-content: center;
            transition: background .15s, color .15s;
        }
        .yt-offset-btn:hover { background: var(--accent-primary); color: #fff; }
        .yt-offset-value {
            min-width: 40px;
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: .8rem;
            color: var(--text-primary);
        }
        .yt-offset-reset {
            width: 22px; height: 22px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-secondary);
            color: var(--text-muted);
            cursor: pointer;
            font-size: .8rem;
            display: flex; align-items: center; justify-content: center;
            transition: color .15s;
        }
        .yt-offset-reset:hover { color: var(--accent-primary); }

        /* YouTube Mini Player (floating controls) */
        .yt-mini-player {
            position: fixed;
            bottom: 20px;
            left: 200px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: rgba(18, 18, 20, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            z-index: 1050;
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,0,0,0.1);
        }
        .yt-mini-player.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .yt-mini-btn {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, transform 0.15s;
        }
        .yt-mini-btn:active {
            transform: scale(0.92);
        }
        .yt-mini-play {
            background: #ff0000;
            color: #fff;
        }
        .yt-mini-play:hover {
            background: #e60000;
            box-shadow: 0 0 12px rgba(255,0,0,0.4);
        }
        .yt-mini-play svg {
            width: 16px;
            height: 16px;
            fill: #fff;
        }
        .yt-mini-time {
            font-size: 0.72rem;
            color: rgba(255,255,255,0.7);
            font-variant-numeric: tabular-nums;
            min-width: 36px;
            text-align: center;
            letter-spacing: 0.02em;
        }
        .yt-mini-vol-wrap {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .yt-mini-vol-wrap svg {
            width: 14px;
            height: 14px;
            fill: rgba(255,255,255,0.5);
            flex-shrink: 0;
        }
        .yt-mini-volume {
            -webkit-appearance: none;
            appearance: none;
            width: 56px;
            height: 3px;
            background: rgba(255,255,255,0.15);
            border-radius: 2px;
            outline: none;
            cursor: pointer;
        }
        .yt-mini-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff0000;
            cursor: pointer;
            box-shadow: 0 0 4px rgba(255,0,0,0.3);
        }
        .yt-mini-volume::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff0000;
            border: none;
            cursor: pointer;
        }
        .yt-mini-volume:focus-visible {
            outline: 2px solid rgba(255,255,255,0.6);
            outline-offset: 2px;
            border-radius: 2px
        }
        .yt-mini-vol-val {
            font-size: 0.65rem;
            color: rgba(255,255,255,0.45);
            min-width: 22px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .yt-mini-close {
            width: 24px;
            height: 24px;
            background: transparent;
            color: rgba(255,255,255,0.3);
            font-size: 13px;
            border-radius: 50%;
        }
        .yt-mini-close:hover {
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.7);
        }

        /* ============================================================
         * Unified Player Bar v19.1 — fluid container-query layout
         * ============================================================ */
        .unified-player {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1050;
            transform: translateY(100%);
            transition: transform .35s cubic-bezier(.4,0,.2,1);
            font-family: 'Outfit', sans-serif;
            container-type: inline-size;
            container-name: player;
        }
        .unified-player.visible {
            transform: translateY(0);
        }
        .up-bar {
            display: flex;
            flex-direction: column;
            background: rgba(15,23,42,0.92);
            backdrop-filter: blur(24px) saturate(150%);
            -webkit-backdrop-filter: blur(24px) saturate(150%);
            border-top: 1px solid rgba(255,255,255,0.08);
            padding: 0 16px;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        /* Row 1: Progress */
        .up-progress-row {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 22px;
            padding: 0 2px;
        }
        .up-time {
            font-family: 'JetBrains Mono', monospace;
            font-size: .7rem;
            font-variant-numeric: tabular-nums;
            color: rgba(255,255,255,0.6);
            min-width: 32px;
            text-align: center;
            letter-spacing: 0.02em;
        }
        .up-progress {
            flex: 1;
            height: 4px;
            background: rgba(255,255,255,0.12);
            border-radius: 2px;
            cursor: pointer;
            position: relative;
            transition: height .15s ease;
        }
        .up-progress:hover { height: 6px; }
        .up-progress-fill {
            height: 100%;
            border-radius: 2px;
            width: 0%;
            transition: width .1s linear;
            position: relative;
        }
        .unified-player[data-source="score"] .up-progress-fill {
            background: linear-gradient(90deg, #ea580c, #f97316);
            box-shadow: 0 0 8px rgba(249,115,22,0.5);
        }
        .unified-player[data-source="metronome"] .up-progress-fill {
            background: linear-gradient(90deg, #2563eb, #3b82f6);
            box-shadow: 0 0 8px rgba(59,130,246,0.5);
        }
        .unified-player[data-source="youtube"] .up-progress-fill {
            background: linear-gradient(90deg, #dc2626, #ff0000);
            box-shadow: 0 0 8px rgba(255,0,0,0.4);
        }
        .up-progress-handle {
            position: absolute;
            right: -7px;
            top: 50%;
            transform: translateY(-50%) scale(0);
            width: 14px;
            height: 14px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
            transition: transform .15s ease;
            pointer-events: none;
        }
        .up-progress:hover .up-progress-handle {
            transform: translateY(-50%) scale(1);
        }
        /* Row 2: Controls */
        .up-controls-row {
            display: flex;
            align-items: center;
            gap: clamp(4px, 0.8cqi, 12px);
            height: clamp(32px, 4.5cqi, 42px);
            padding-bottom: 2px;
            overflow: hidden;
        }
        /* Source switcher */
        .up-source-switcher {
            display: flex;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.12);
            flex-shrink: 0;
        }
        .up-src-btn {
            padding: 4px clamp(6px, 1.5vw, 10px);
            font-size: clamp(.6rem, 1.8vw, .72rem);
            font-weight: 600;
            color: rgba(255,255,255,0.5);
            background: transparent;
            border: none;
            cursor: pointer;
            transition: background .15s, color .15s;
            white-space: nowrap;
            letter-spacing: 0.02em;
        }
        .up-src-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); }
        .up-src-btn.active[data-source="score"] { background: rgba(249,115,22,0.2); color: #f97316; }
        .up-src-btn.active[data-source="metronome"] { background: rgba(59,130,246,0.2); color: #3b82f6; }
        .up-src-btn.active[data-source="youtube"] { background: rgba(255,0,0,0.2); color: #ff0000; }
        .up-src-btn + .up-src-btn { border-left: 1px solid rgba(255,255,255,0.08); }
        .up-src-btn[style*="display:none"] + .up-src-btn { border-left: none; }
        /* Transport controls */
        .up-transport {
            display: flex;
            gap: 4px;
            align-items: center;
            flex-shrink: 0;
        }
        .up-ctrl-btn {
            width: 32px;
            height: 32px;
            border: 1.5px solid rgba(255,255,255,0.25);
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, border-color .15s, transform .1s;
            flex-shrink: 0;
        }
        .up-ctrl-btn:hover:not(:disabled) {
            background: rgba(255,255,255,0.16);
            border-color: rgba(255,255,255,0.4);
            transform: scale(1.05);
        }
        .up-ctrl-btn:disabled { opacity: .35; cursor: not-allowed; }
        .up-ctrl-btn svg { width: 14px; height: 14px; }
        .up-ctrl-btn.active.play { background: #22c55e; border-color: #22c55e; }
        .up-ctrl-btn.active.pause { background: #eab308; border-color: #eab308; }
        .up-ctrl-btn.stop:hover:not(:disabled) { background: #ef4444; border-color: #ef4444; }
        /* Position info — shrinkable to prevent overflow */
        .up-position {
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            font-variant-numeric: tabular-nums;
            color: rgba(255,255,255,0.7);
            white-space: nowrap;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: 0.02em;
        }
        /* Beat dots */
        .up-beat-dots {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .up-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            transition: background .1s, transform .1s, box-shadow .1s;
        }
        .up-dot.active { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; transform: scale(1.2); }
        .up-dot.downbeat.active { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
        /* BPM display */
        .up-bpm {
            font-family: 'JetBrains Mono', monospace;
            font-size: .72rem;
            font-variant-numeric: tabular-nums;
            color: rgba(255,255,255,0.7);
            white-space: nowrap;
        }
        /* Metro quick toggle */
        .up-metro-toggle {
            width: 28px;
            height: 28px;
            border: 1.5px solid rgba(59,130,246,0.4);
            border-radius: 6px;
            background: transparent;
            color: rgba(59,130,246,0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, color .15s, border-color .15s;
            flex-shrink: 0;
        }
        .up-metro-toggle:hover { background: rgba(59,130,246,0.15); color: #3b82f6; border-color: #3b82f6; }
        .up-metro-toggle.active { background: rgba(59,130,246,0.25); color: #60a5fa; border-color: #3b82f6; }
        .up-metro-toggle svg { width: 14px; height: 14px; }
        /* Subdivision bar (inline in controls row) */
        .up-subdiv-bar {
            display: flex;
            gap: 2px;
            flex-shrink: 0;
        }
        .up-subdiv-bar-btn {
            min-width: 26px;
            height: 28px;
            padding: 2px 5px;
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 5px;
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, color .15s, border-color .15s;
        }
        .up-subdiv-bar-btn svg { flex-shrink: 0; }
        .up-subdiv-bar-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
        .up-subdiv-bar-btn.active { background: rgba(59,130,246,0.25); color: #60a5fa; border-color: #3b82f6; }
        /* Volume quick */
        .up-vol-quick {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            margin-left: auto;
        }
        .up-vol-icon {
            width: 16px;
            height: 16px;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            flex-shrink: 0;
        }
        .up-vol-icon:hover { color: #fff; }
        .up-vol-slider {
            width: 56px;
            height: 3px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
            cursor: pointer;
            outline: none;
        }
        .up-vol-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px; height: 12px;
            background: #fff;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .up-vol-slider::-moz-range-thumb {
            width: 12px; height: 12px;
            background: #fff;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }
        .up-vol-slider:focus-visible {
            outline: 2px solid rgba(255,255,255,0.5);
            outline-offset: 2px;
        }
        /* Gear button */
        .up-gear-btn {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color .2s, transform .3s;
            flex-shrink: 0;
        }
        .up-gear-btn:hover { color: rgba(255,255,255,0.8); }
        .up-gear-btn.active { color: #f97316; transform: rotate(60deg); }
        .up-gear-btn svg { width: 16px; height: 16px; }
        /* Tune (adjustment) toggle button */
        .up-tune-btn {
            width: 30px; height: 30px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color .2s;
            flex-shrink: 0;
        }
        .up-tune-btn:hover { color: rgba(255,255,255,0.8); }
        .up-tune-btn.active { color: #f97316; }
        /* Slim Adjustment Bar */
        .up-adjust-bar {
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s cubic-bezier(.4,0,.2,1);
            background: rgba(15,23,42,0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(249,115,22,0.15);
            position: relative;
        }
        .up-adjust-bar.open {
            max-height: 60px;
        }
        .up-adjust-inner {
            display: flex;
            align-items: center;
            height: clamp(38px, 5cqi, 46px);
            padding: 0 clamp(8px, 1.2cqi, 14px);
            gap: 0;
            flex-wrap: nowrap;
            overflow: hidden;
        }
        .up-adjust-group {
            display: flex;
            align-items: center;
            gap: clamp(2px, 0.4cqi, 5px);
            flex-shrink: 0;
        }
        .up-adjust-spacer {
            flex: 1 1 clamp(4px, 1cqi, 14px);
            min-width: 3px;
        }
        .up-adjust-icon {
            font-size: clamp(8px, 1.2cqi, 12px);
            line-height: 1;
            flex-shrink: 0;
        }
        .up-adjust-label {
            font-size: clamp(8px, 1.2cqi, 11px);
            font-family: 'Outfit', sans-serif;
            font-weight: 500;
            color: rgba(255,255,255,0.45);
            white-space: nowrap;
            overflow: hidden;
        }
        @container player (max-width: 380px) {
            .up-adjust-label { display: none; }
        }
        .up-adjust-btn {
            width: clamp(28px, 3.5cqi, 34px); height: clamp(28px, 3.5cqi, 34px);
            padding: 0;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: clamp(4px, 0.6cqi, 6px);
            background: rgba(255,255,255,0.05);
            color: rgba(255,255,255,0.75);
            cursor: pointer;
            font-size: clamp(11px, 1.5cqi, 15px);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, border-color .15s;
            position: relative;
            flex-shrink: 0;
        }
        .up-adjust-btn::after {
            content: '';
            position: absolute;
            top: -9px; left: -9px; right: -9px; bottom: -9px;
        }
        .up-adjust-btn:active { background: rgba(249,115,22,0.2); border-color: #f97316; }
        .up-adjust-val {
            min-width: clamp(16px, 2.5cqi, 28px);
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: clamp(9px, 1.3cqi, 12px);
            color: #fff;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .up-adjust-reset {
            width: clamp(16px, 2cqi, 22px); height: clamp(16px, 2cqi, 22px);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: clamp(3px, 0.4cqi, 5px);
            background: transparent;
            color: rgba(255,255,255,0.3);
            cursor: pointer;
            font-size: clamp(8px, 1cqi, 11px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color .15s;
            position: relative;
            flex-shrink: 0;
        }
        .up-adjust-reset::after {
            content: '';
            position: absolute;
            top: -12px; left: -12px; right: -12px; bottom: -12px;
        }
        .up-adjust-reset:hover { color: #f97316; }
        .up-adjust-timer {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: #f97316;
            width: 100%;
            transition: width linear;
            pointer-events: none;
        }
        /* Flyout panel */
        .up-flyout {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s cubic-bezier(.4,0,.2,1);
            background: rgba(15,23,42,0.96);
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .up-flyout.open {
            max-height: 60vh;
            overflow-y: auto;
        }
        .up-flyout-inner {
            padding: 12px 16px 8px;
            max-width: 480px;
            margin: 0 auto;
        }
        .up-flyout-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .up-flyout-title {
            font-size: .82rem;
            font-weight: 700;
            color: rgba(255,255,255,0.9);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .up-flyout-close {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: background .15s, color .15s;
        }
        .up-flyout-close:hover { background: rgba(239,68,68,0.3); color: #ef4444; }
        /* Flyout sections */
        .up-flyout-section {
            padding: 10px 0;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .up-flyout-section:first-child { border-top: none; }
        .up-section-label {
            font-size: .7rem;
            font-weight: 700;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }
        .up-section-label.metro { color: #3b82f6; }
        .up-section-label.youtube { color: #ff0000; }
        .up-section-label.mixer { color: #a78bfa; }
        /* Flyout metronome row */
        .up-metro-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .up-metro-bpm-ctrl {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .up-metro-bpm-btn {
            width: 24px; height: 24px;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            cursor: pointer;
            font-size: .8rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s;
        }
        .up-metro-bpm-btn:hover { background: rgba(255,255,255,0.16); }
        .up-metro-bpm-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: .78rem;
            font-variant-numeric: tabular-nums;
            color: #fff;
            min-width: 60px;
            text-align: center;
        }
        .up-subdiv-group {
            display: flex;
            gap: 2px;
        }
        .up-subdiv-btn {
            width: 28px; height: 24px;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            cursor: pointer;
            font-size: .72rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, border-color .15s;
        }
        .up-subdiv-btn:hover { background: rgba(255,255,255,0.16); }
        .up-subdiv-btn.active { background: #3b82f6; border-color: #3b82f6; }
        .up-accent-select {
            padding: 3px 6px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.08);
            color: #fff;
            font-size: .7rem;
            cursor: pointer;
        }
        .up-accent-select option { background: #1e293b; color: #fff; }
        .up-countin-label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: .7rem;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
        }
        .up-countin-label input[type=checkbox] {
            width: 13px; height: 13px;
            accent-color: #3b82f6;
        }
        /* Flyout YouTube section */
        .up-yt-section { display: none; }
        .up-yt-section.visible { display: block; }
        .up-yt-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            font-size: .78rem;
            color: rgba(255,255,255,0.7);
        }
        .up-yt-row label {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            font-size: .78rem;
        }
        .up-yt-offset {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .up-yt-offset.disabled { opacity: .35; pointer-events: none; }
        .up-yt-offset-btn {
            width: 22px; height: 22px;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            cursor: pointer;
            font-size: .8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s;
        }
        .up-yt-offset-btn:hover { background: var(--accent-primary); color: #fff; }
        .up-yt-offset-val {
            min-width: 40px;
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: .78rem;
            color: #fff;
        }
        .up-yt-offset-reset {
            width: 22px; height: 22px;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            font-size: .8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color .15s;
        }
        .up-yt-offset-reset:hover { color: var(--accent-primary); }
        /* Cursor offset in main player bar */
        .up-lyrics-offset {
            display: flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
        }
        .up-lyrics-offset .up-cursor-offset-label {
            color: #f97316;
        }
        .up-cursor-offset {
            display: flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
        }
        .up-cursor-offset-label {
            font-size: .65rem;
            color: rgba(255,255,255,0.5);
            margin-right: 2px;
            white-space: nowrap;
        }
        .up-yt-embed {
            width: 100%;
            max-width: 360px;
            aspect-ratio: 16/9;
            border-radius: 8px;
            overflow: hidden;
            background: #000;
            margin: 6px auto 0;
        }
        /* Flyout mixer */
        .up-mixer-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        .up-mixer-label {
            font-size: .7rem;
            font-weight: 600;
            color: rgba(255,255,255,0.6);
            min-width: 54px;
        }
        .up-mixer-slider {
            flex: 1;
            max-width: 180px;
            height: 4px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255,255,255,0.15);
            border-radius: 2px;
            cursor: pointer;
            outline: none;
        }
        .up-mixer-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px; height: 14px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .up-mixer-slider::-moz-range-thumb {
            width: 14px; height: 14px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }
        .up-mixer-slider.score::-webkit-slider-thumb { background: #f97316; }
        .up-mixer-slider.score::-moz-range-thumb { background: #f97316; }
        .up-mixer-slider.drum::-webkit-slider-thumb { background: #f59e0b; }
        .up-mixer-slider.drum::-moz-range-thumb { background: #f59e0b; }
        .up-mixer-slider.metro::-webkit-slider-thumb { background: #3b82f6; }
        .up-mixer-slider.metro::-moz-range-thumb { background: #3b82f6; }
        .up-mixer-slider.youtube::-webkit-slider-thumb { background: #ff0000; }
        .up-mixer-slider.youtube::-moz-range-thumb { background: #ff0000; }
        .up-mixer-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: .68rem;
            font-variant-numeric: tabular-nums;
            color: rgba(255,255,255,0.5);
            min-width: 32px;
            text-align: right;
        }
        /* Body padding when player visible */
        body.player-visible { padding-bottom: 64px; }
        /* v19: Hide old player bars (replaced by unified player) */
        .playback-bar, .metronome-bar,
        .floating-player, .yt-mini-player { display: none !important; }
        /* Desktop/tablet: inline lyrics + cursor offset in player bar */
        .up-lyrics-offset-inline,
        .up-cursor-offset-inline {
            display: none;
            align-items: center;
            gap: clamp(2px, 0.3cqi, 4px);
            flex-shrink: 0;
        }
        /* === Media query fallback (all browsers) === */
        @media (max-width: 859px) {
            .up-lyrics-offset-inline { display: none !important; }
            .up-cursor-offset-inline { display: none !important; }
            .lyrics-edit-toggle { display: none !important; }
        }
        @media (min-width: 860px) {
            .up-tune-btn { display: none !important; }
            .up-adjust-bar { display: none !important; }
        }
        @media (max-width: 1079px) {
            .up-vol-quick { display: none; }
            .up-subdiv-bar { display: none; }
        }
        @media (max-width: 640px) {
            .up-src-btn span { display: none; }
        }
        @media (max-width: 480px) {
            .up-beat-dots { display: none; }
        }
        /* === Container query progressive enhancement (Chrome 105+, Safari 16+) === */
        @container player (max-width: 859px) {
            .up-lyrics-offset-inline { display: none !important; }
            .up-cursor-offset-inline { display: none !important; }
            .lyrics-edit-toggle { display: none !important; }
        }
        @container player (min-width: 860px) {
            .up-lyrics-offset-inline,
            .up-cursor-offset-inline { display: flex !important; }
            .up-tune-btn { display: none !important; }
            .up-adjust-bar { display: none !important; }
        }
        @container player (max-width: 1079px) {
            .up-vol-quick { display: none !important; }
            .up-subdiv-bar { display: none !important; }
        }
        .up-src-btn span { display: none; }
        @container player (min-width: 580px) {
            .up-src-btn span { display: inline; }
        }
        @container player (max-width: 420px) {
            .up-beat-dots { display: none; }
        }
        /* Responsive — touch targets + non-player layout (media queries) */
        @media (max-width:768px) {
            /* Enlarge controls row for touch targets */
            .up-controls-row { height: 48px; }
            /* Touch target: player transport buttons */
            .up-ctrl-btn { width: 38px; height: 38px; }
            .up-ctrl-btn svg { width: 16px; height: 16px; }
            .up-src-btn { padding: 8px clamp(10px, 2.5vw, 14px); font-size: .72rem; }
            /* Touch target: metronome toggle & settings */
            .up-metro-toggle, .up-settings-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
            /* Touch target: settings panel BPM ± buttons */
            .metronome-tempo-btn { width: 36px; height: 36px; }
            /* Touch target: settings panel subdivision buttons */
            .up-flyout .subdiv-btn { min-width: 36px; min-height: 36px; }
            /* Touch target: settings close button */
            .up-settings-close { min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
            /* Touch target: header buttons */
            .header-btn { min-height: 44px; }
            /* Touch target: footer links */
            .footer-link { min-height: 44px; display: inline-flex; align-items: center; }
        }
        @media (max-width:640px) {
            .up-metro-toggle { display: none; }
            body.player-visible { padding-bottom: 80px; }
            .up-controls-row { height: 52px; }
            .up-ctrl-btn { width: 40px; height: 40px; }
            .up-ctrl-btn svg { width: 17px; height: 17px; }
            .up-src-btn { padding: 10px clamp(10px, 3vw, 16px); font-size: .75rem; }
        }
        @media (max-width:480px) {
            .up-bar { padding: 0 8px; }
            .up-controls-row { gap: clamp(3px, 0.8vw, 6px); }
        }

        .audio-bar {
            background: linear-gradient(135deg, #4c1d95 0, #7c3aed 100%);
            border-color: #8b5cf6
        }

        .audio-bar.disabled {
            opacity: .5;
            pointer-events: none
        }

        .audio-bar-title,
        .metronome-bar-title,
        .playback-bar-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            font-size: .8rem;
            font-weight: 600;
            white-space: nowrap;
            min-width: 90px
        }

        .audio-bar-title svg,
        .metronome-bar-title svg,
        .playback-bar-title svg {
            width: 18px;
            height: 18px;
            opacity: .9
        }

        .metronome-btn,
        .playback-btn {
            width: 38px;
            height: 38px;
            border: 2px solid rgba(255, 255, 255, .3);
            border-radius: 50%;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
            flex-shrink: 0
        }

        .metronome-btn:hover,
        .playback-btn:hover {
            background: rgba(255, 255, 255, .2);
            border-color: rgba(255, 255, 255, .5);
            transform: scale(1.05)
        }

        .metronome-btn svg,
        .playback-btn svg {
            width: 16px;
            height: 16px
        }

        .metronome-btn.playing,
        .playback-btn.playing {
            background: #ef4444;
            border-color: #ef4444
        }

        .playback-controls {
            display: flex;
            gap: 6px;
            align-items: center
        }

        .ctrl-btn {
            width: 32px;
            height: 32px;
            border: 1.5px solid rgba(255, 255, 255, .3);
            border-radius: 8px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
            flex-shrink: 0
        }

        .ctrl-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, .2);
            border-color: rgba(255, 255, 255, .5);
            transform: scale(1.05)
        }

        .ctrl-btn svg {
            width: 14px;
            height: 14px
        }

        .ctrl-btn:disabled {
            opacity: .4;
            cursor: not-allowed;
            transform: none
        }

        .ctrl-btn.active {
            background: rgba(255, 255, 255, .25);
            border-color: rgba(255, 255, 255, .6)
        }

        .ctrl-btn.play-btn.active {
            background: #22c55e;
            border-color: #22c55e
        }

        .ctrl-btn.pause-btn.active {
            background: #eab308;
            border-color: #eab308
        }

        .ctrl-btn.stop-btn:hover:not(:disabled) {
            background: #ef4444;
            border-color: #ef4444
        }

        .playback-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3px
        }

        .metronome-info {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .playback-time {
            font-size: .9rem;
            font-weight: 600;
            color: #fff;
            font-family: 'JetBrains Mono', 'Space Mono', monospace;
            font-variant-numeric: tabular-nums
        }

        .playback-bar-info {
            font-size: .75rem;
            color: rgba(255, 255, 255, .7)
        }

        .metronome-bar-info {
            font-size: .7rem;
            color: rgba(255, 255, 255, .7);
            white-space: nowrap
        }

        .metronome-progress,
        .playback-progress {
            flex: 1;
            height: 5px;
            background: rgba(255, 255, 255, .2);
            border-radius: 3px;
            overflow: visible;
            cursor: pointer;
            position: relative;
            transition: height .15s ease
        }

        .metronome-progress:hover,
        .playback-progress:hover {
            height: 7px
        }

        .playback-progress-fill {
            height: 100%;
            background: var(--accent-gradient);
            border-radius: 3px;
            width: 0%;
            transition: width .1s linear;
            box-shadow: 0 0 8px rgba(249,115,22,0.5);
            position: relative
        }

        .playback-progress-fill::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background: #fff;
            border: 3px solid var(--accent-primary);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
            opacity: 0;
            transition: opacity .2s ease
        }

        .playback-progress:hover .playback-progress-fill::after {
            opacity: 1
        }

        .metronome-progress-fill {
            height: 100%;
            background: #3b82f6;
            border-radius: 3px;
            width: 0%;
            transition: width .1s linear;
            box-shadow: 0 0 8px rgba(59,130,246,0.5)
        }

        .metronome-tempo-control,
        .playback-tempo {
            display: flex;
            align-items: center;
            gap: 6px
        }

        .playback-tempo {
            font-size: .8rem;
            color: rgba(255, 255, 255, .9);
            font-weight: 500
        }

        .playback-tempo svg {
            width: 14px;
            height: 14px
        }

        .volume-control {
            display: flex;
            align-items: center;
            gap: 6px
        }

        .volume-control svg {
            width: 16px;
            height: 16px;
            color: rgba(255, 255, 255, .8);
            flex-shrink: 0;
            cursor: pointer
        }

        .volume-control svg:hover {
            color: #fff
        }

        .volume-slider {
            width: 60px;
            height: 4px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255, 255, 255, .3);
            border-radius: 2px;
            cursor: pointer
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3)
        }

        .volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3)
        }

        .volume-value {
            font-size: .7rem;
            color: rgba(255, 255, 255, .7);
            min-width: 28px;
            text-align: right
        }

        .volume-control.muted svg {
            color: rgba(255, 255, 255, .4)
        }

        /* v9.9: Drum volume control styling */
        .drum-volume-control {
            border-top: 1px solid rgba(255, 255, 255, .2);
            padding-top: 6px;
            margin-top: 4px;
            border-left: none;
            padding-left: 0;
            margin-left: 0;
        }

        .drum-volume-control .drum-label {
            font-size: .65rem;
            font-weight: 600;
            color: #f59e0b;
            cursor: pointer;
            min-width: 32px;
        }

        .drum-volume-control .drum-label:hover {
            color: #fbbf24;
        }

        .drum-volume-control .volume-slider::-webkit-slider-thumb {
            background: #f59e0b;
        }

        .drum-volume-control .volume-slider::-moz-range-thumb {
            background: #f59e0b;
        }

        .drum-volume-control.muted .drum-label {
            color: rgba(245, 158, 11, .4);
        }


        .floating-volume {
            margin-left: auto
        }

        .floating-volume .volume-slider {
            width: 50px
        }

        /* v9.9: Floating drum volume */
        .floating-drum-volume {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: 8px;
            padding-left: 8px;
            border-left: 1px solid rgba(255,255,255,.2);
        }

        .floating-drum-volume .drum-label {
            font-size: .65rem;
            font-weight: 600;
            color: #f59e0b;
            letter-spacing: 0.5px;
        }

        .floating-drum-volume .volume-slider {
            width: 50px;
        }

        .floating-drum-volume .volume-slider::-webkit-slider-thumb {
            background: #f59e0b;
        }

        .floating-drum-volume .volume-value {
            font-size: .65rem;
            color: #f59e0b;
            min-width: 32px;
        }

        .metronome-beat-display {
            display: flex;
            align-items: center;
            gap: 4px;
            font-family: 'Space Mono', monospace;
            font-size: .85rem;
            font-weight: 700;
            color: #fff
        }

        .metronome-beat-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .3);
            transition: background .1s ease, color .1s ease, transform .1s ease, box-shadow .1s ease
        }

        .metronome-beat-dot.active {
            background: #fbbf24;
            box-shadow: 0 0 8px #fbbf24;
            transform: scale(1.3)
        }

        .metronome-beat-dot.downbeat.active {
            background: #ef4444;
            box-shadow: 0 0 10px #ef4444
        }

        .metronome-tempo-btn {
            width: 22px;
            height: 22px;
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 4px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            font-weight: 600
        }

        .metronome-tempo-btn:hover {
            background: rgba(255, 255, 255, .2)
        }

        .metronome-tempo-value {
            font-family: 'Space Mono', monospace;
            font-size: .75rem;
            font-weight: 600;
            color: #fff;
            min-width: 58px;
            text-align: center
        }

        .metronome-settings {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: 6px;
            padding-left: 6px;
            border-left: 1px solid rgba(255, 255, 255, .2)
        }

        .metronome-subdivision {
            display: flex;
            flex-direction: column;
            gap: 1px
        }

        .subdiv-btn {
            width: 24px;
            height: 18px;
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 3px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            cursor: pointer;
            font-size: .7rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .subdiv-btn:hover {
            background: rgba(255, 255, 255, .2)
        }

        .subdiv-btn.active {
            background: #3b82f6;
            border-color: #3b82f6
        }

        .metronome-accent select {
            padding: 3px 5px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, .3);
            background: rgba(255, 255, 255, .1);
            color: #fff;
            font-size: .65rem;
            cursor: pointer
        }

        .metronome-accent select option {
            background: #1e293b;
            color: #fff
        }

        .metronome-countin {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: .65rem;
            color: rgba(255, 255, 255, .8);
            cursor: pointer
        }

        .metronome-countin input[type=checkbox] {
            width: 12px;
            height: 12px;
            accent-color: #3b82f6
        }

        .floating-player {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            background: rgba(15, 23, 42, .8);
            backdrop-filter: blur(20px) saturate(150%);
            -webkit-backdrop-filter: blur(20px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,0.05);
            opacity: 0;
            pointer-events: none;
            transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease
        }

        .floating-player.visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto
        }

        .floating-player-type {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: .75rem;
            font-weight: 600;
            color: #fff;
            white-space: nowrap
        }

        .floating-player-type.score {
            background: linear-gradient(135deg, #7c2d12, #c2410c)
        }

        .floating-player-type.metronome {
            background: linear-gradient(135deg, #1e3a5f, #2d5a87)
        }

        .floating-player-type svg {
            width: 14px;
            height: 14px
        }

        .floating-player-controls {
            display: flex;
            gap: 6px;
            align-items: center
        }

        .floating-player-controls .ctrl-btn {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .1);
            border: 1.5px solid rgba(255, 255, 255, .2)
        }

        .floating-player-controls .ctrl-btn svg {
            width: 16px;
            height: 16px
        }

        .floating-player-controls .ctrl-btn:hover:not(:disabled) {
            background: rgba(255, 255, 255, .2);
            border-color: rgba(255, 255, 255, .4)
        }

        .floating-player-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 80px
        }

        .floating-player-time {
            font-family: 'Space Mono', monospace;
            font-size: .85rem;
            font-weight: 600;
            color: #fff
        }

        .floating-player-position {
            font-size: .7rem;
            color: rgba(255, 255, 255, .6)
        }

        .floating-player-progress {
            width: 120px;
            height: 4px;
            background: rgba(255, 255, 255, .1);
            border-radius: 2px;
            overflow: hidden;
            cursor: pointer;
            transition: height .2s ease
        }

        .floating-player:hover .floating-player-progress {
            height: 6px
        }

        .floating-player-progress-fill {
            height: 100%;
            border-radius: 2px;
            width: 0%;
            transition: width .1s linear
        }

        .floating-player-progress-fill.score {
            background: #f97316;
            box-shadow: 0 0 10px rgba(249,115,22,0.5)
        }

        .floating-player-progress-fill.metronome {
            background: #3b82f6;
            box-shadow: 0 0 10px rgba(59,130,246,0.5)
        }

        .floating-player-close {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 6px;
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .6);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
            margin-left: 4px
        }

        .floating-player-close:hover {
            background: rgba(239, 68, 68, .3);
            color: #ef4444
        }

        .floating-player-close svg {
            width: 14px;
            height: 14px
        }

        @media (max-width:600px) {
            .floating-player {
                bottom: 12px;
                left: 12px;
                right: 12px;
                transform: translateX(0) translateY(100px);
                padding: 10px 14px;
                gap: 8px
            }

            .floating-player.visible {
                transform: translateX(0) translateY(0)
            }

            .floating-player-progress {
                width: 80px
            }

            .floating-player-type {
                padding: 5px 8px;
                font-size: .7rem
            }

            .floating-player-controls .ctrl-btn {
                width: 32px;
                height: 32px
            }
        }

        .fill-panel {
            position: fixed;
            top: 60px;
            right: 20px;
            width: 380px;
            background: var(--bg-card);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
            z-index: 1100;
            display: none;
            max-height: calc(100vh - 80px);
            overflow: hidden;
            border: 1px solid var(--border-color)
        }

        .fill-panel.visible {
            display: flex;
            flex-direction: column
        }

        .fill-panel-header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-secondary)
        }

        .fill-panel-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary)
        }

        .fill-panel-close {
            width: 32px;
            height: 32px;
            border: none;
            background: 0 0;
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .fill-panel-close:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary)
        }

        .fill-panel-body {
            padding: 20px 24px;
            overflow-y: auto;
            flex: 1
        }

        .fill-progress {
            display: flex;
            gap: 4px;
            margin-bottom: 16px
        }

        .fill-progress-step {
            flex: 1;
            height: 4px;
            background: var(--bg-tertiary);
            border-radius: 2px;
            transition: background .2s
        }

        .fill-progress-step.active {
            background: var(--accent-primary)
        }

        .fill-progress-step.completed {
            background: var(--accent-primary);
            opacity: .5
        }

        .fill-step {
            display: none
        }

        .fill-step.active {
            display: block;
            animation: fillFadeIn .2s ease
        }

        @keyframes fillFadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .fill-step-label {
            font-size: .7rem;
            color: var(--accent-primary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: 4px
        }

        .fill-step-title {
            font-size: .9rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px
        }

        .fill-bar-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
            max-height: 180px;
            overflow-y: auto
        }

        .fill-bar-btn {
            padding: 10px 4px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            font-size: .8rem;
            font-weight: 600;
            color: var(--text-primary);
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .fill-bar-btn:hover {
            border-color: var(--accent-primary)
        }

        .fill-bar-btn.selected {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .1);
            color: var(--accent-primary)
        }

        .fill-beat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px
        }

        .fill-beat-btn {
            padding: 16px 8px;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-primary);
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .fill-beat-btn:hover {
            border-color: var(--accent-primary)
        }

        .fill-beat-btn.selected {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .1);
            color: var(--accent-primary)
        }

        .fill-rhythm-builder {
            margin-bottom: 12px
        }

        .fill-rhythm-slots {
            display: flex;
            gap: 6px;
            margin-bottom: 12px
        }

        .fill-rhythm-slot {
            flex: 1;
            min-height: 52px;
            border: 2px dashed var(--border-color);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-secondary);
            position: relative;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease
        }

        .fill-rhythm-slot.filled {
            border-style: solid;
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .04);
            box-shadow: 0 1px 4px rgba(249, 115, 22, .08)
        }

        .fill-rhythm-slot.current {
            border-color: var(--accent-primary);
            border-style: solid;
            background: rgba(249, 115, 22, .02);
            box-shadow: 0 0 0 3px rgba(249, 115, 22, .08)
        }

        .fill-rhythm-slot-label {
            position: absolute;
            top: 3px;
            left: 6px;
            font-size: .6rem;
            color: var(--text-muted);
            font-weight: 600;
            letter-spacing: -.01em
        }

        .fill-rhythm-slot svg {
            width: 36px;
            height: 26px
        }

        .fill-rhythm-options {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px
        }

        .fill-rhythm-opt {
            padding: 8px 4px 5px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            transition: background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
            min-height: 56px;
            position: relative
        }

        .fill-rhythm-opt svg {
            width: 40px;
            height: 28px;
            transition: transform .15s ease
        }

        .fill-rhythm-opt:hover {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .06);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(249, 115, 22, .12)
        }

        .fill-rhythm-opt:hover svg {
            transform: scale(1.06)
        }

        .fill-rhythm-opt.selected {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .1);
            box-shadow: 0 0 0 2.5px rgba(249, 115, 22, .15)
        }

        .fill-rhythm-opt-label {
            font-size: .55rem;
            color: var(--text-muted);
            font-weight: 600;
            letter-spacing: -.01em;
            line-height: 1;
            white-space: nowrap
        }

        .fill-note-indicator {
            background: var(--bg-secondary);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap
        }

        .fill-note-slot {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 600;
            border: 2px solid var(--border-color);
            background: #fff;
            color: var(--text-muted)
        }

        .fill-note-slot.filled {
            background: var(--accent-primary);
            color: #fff;
            border-color: var(--accent-primary)
        }

        .fill-note-slot.current {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .15);
            color: var(--accent-primary);
            animation: notePulse 1s infinite
        }

        @keyframes notePulse {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.1)
            }
        }

        .fill-inst-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 12px
        }

        .fill-inst-card {
            padding: 8px 6px 6px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            transition: background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
            text-align: center
        }

        .fill-inst-card:hover {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .05);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(249, 115, 22, .1)
        }

        .fill-inst-card.selected {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .08);
            box-shadow: 0 0 0 2.5px rgba(249, 115, 22, .12)
        }

        .fill-inst-staff {
            height: 50px;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative
        }

        .fill-inst-staff svg {
            width: 100%;
            max-width: 50px;
            height: 50px
        }

        .fill-inst-name {
            font-size: .65rem;
            color: var(--text-muted);
            font-weight: 600;
            white-space: nowrap
        }

        .fill-inst-presets {
            margin-top: 8px;
            padding-top: 12px;
            border-top: 1px dashed var(--border-color)
        }

        .fill-preset-label {
            font-size: .7rem;
            color: var(--text-muted);
            margin-bottom: 8px
        }

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

        .fill-preset-btn {
            flex: 1;
            padding: 10px 8px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-secondary);
            font-size: .75rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .fill-preset-btn:hover {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .05)
        }

        .fill-crash-box {
            padding: 16px;
            background: var(--bg-secondary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer
        }

        .fill-crash-box input {
            width: 20px;
            height: 20px;
            accent-color: var(--accent-primary)
        }

        .fill-crash-box span {
            font-size: .875rem;
            color: var(--text-primary)
        }

        .fill-summary {
            background: linear-gradient(135deg, var(--accent-primary), #ea580c);
            border-radius: 10px;
            padding: 12px 16px;
            color: #fff;
            margin-top: 12px
        }

        .fill-summary-label {
            font-size: .7rem;
            opacity: .8;
            margin-bottom: 4px
        }

        .fill-summary-content {
            font-size: .9rem;
            font-weight: 600
        }

        .fill-panel-nav {
            padding: 16px 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 10px
        }

        .fill-nav-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: .875rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .fill-nav-back {
            background: var(--bg-tertiary);
            color: var(--text-secondary)
        }

        .fill-nav-back:hover {
            background: var(--border-color)
        }

        .fill-nav-next {
            background: var(--accent-gradient);
            color: #fff
        }

        .fill-nav-next:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--accent-glow)
        }

        .fill-nav-next:disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none
        }

        .fill-cursor-highlight {
            position: absolute;
            background: rgba(249, 115, 22, .2);
            border: 2px solid var(--accent-primary);
            border-radius: 4px;
            pointer-events: none;
            z-index: 100;
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(15, 23, 42, .6);
            backdrop-filter: blur(8px) saturate(150%);
            -webkit-backdrop-filter: blur(8px) saturate(150%);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px
        }

        .modal-overlay.visible {
            display: flex
        }

        .modal {
            position: relative;
            background: var(--bg-card);
            border-radius: var(--radius-2xl);
            width: 100%;
            max-width: 440px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.03);
            animation: modalSlideIn .5s cubic-bezier(.34, 1.56, .64, 1);
            border: 1px solid var(--border-color)
        }

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

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

        .modal-header {
            padding: 28px 28px 0;
            text-align: center;
            position: relative
        }

        .modal-header h2 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 10px;
            background: linear-gradient(135deg, var(--text-primary) 0, var(--text-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .modal-header p {
            font-size: .95rem;
            color: var(--text-muted)
        }

        .modal-body {
            padding: 28px
        }

        .modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 36px;
            height: 36px;
            border: 1.5px solid var(--border-color);
            background: var(--bg-card);
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
            z-index: 10
        }

        .modal-close:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
            background: rgba(249, 115, 22, 0.06)
        }

        .modal-close:active {
            transform: scale(.95)
        }

        .contact-success-popup {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            animation: fadeIn .3s ease
        }

        .contact-success-content {
            background: var(--bg-card);
            border-radius: var(--radius-2xl);
            padding: 40px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            box-shadow: var(--shadow-2xl);
            animation: modalSlideIn .35s cubic-bezier(.34, 1.56, .64, 1)
        }

        .contact-success-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #10b981 0, #059669 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            font-size: 40px;
            color: #fff;
            box-shadow: 0 8px 32px rgba(16, 185, 129, .4)
        }

        .contact-success-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--text-primary)
        }

        .contact-success-content p {
            color: var(--text-muted);
            margin-bottom: 8px;
            font-size: .95rem
        }

        .contact-success-email {
            background: var(--bg-secondary);
            padding: 12px 16px;
            border-radius: var(--radius-md);
            margin: 16px 0 24px;
            font-size: .9rem
        }

        .contact-success-email strong {
            color: #10b981
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .auth-tabs {
            display: flex;
            gap: 4px;
            background: var(--bg-tertiary);
            padding: 5px;
            border-radius: var(--radius-md);
            margin-bottom: 28px
        }

        .auth-tab {
            flex: 1;
            padding: 12px;
            border: none;
            background: 0 0;
            border-radius: var(--radius-sm);
            font-size: .9rem;
            font-weight: 600;
            cursor: pointer;
            color: var(--text-muted);
            transition: var(--transition-fast)
        }

        .auth-tab.active {
            background: var(--bg-card);
            color: var(--text-primary);
            box-shadow: var(--shadow-sm)
        }

        .auth-form {
            display: none
        }

        .auth-form.active {
            display: block;
            animation: fadeIn .3s ease
        }

        .form-group {
            margin-bottom: 20px
        }

        .form-group label {
            display: block;
            font-size: .85rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px
        }

        .form-group input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: .95rem;
            transition: var(--transition-fast);
            background: var(--bg-card)
        }

        .form-group input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 4px var(--accent-glow)
        }

        .form-error {
            font-size: .8rem;
            color: var(--error);
            margin-top: 6px;
            display: none;
            padding: 8px 12px;
            background: var(--error-bg);
            border-radius: var(--radius-sm)
        }

        .form-error.visible {
            display: block
        }

        .password-requirements {
            font-size: .75rem;
            color: var(--text-muted);
            margin-top: 8px
        }

        .password-requirements li {
            margin-left: 16px;
            margin-bottom: 4px;
            transition: var(--transition-fast)
        }

        .password-requirements li.valid {
            color: var(--success)
        }

        .btn-submit {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: var(--radius-md);
            background: var(--accent-gradient);
            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition-normal);
            margin-top: 12px;
            box-shadow: 0 4px 12px var(--accent-glow)
        }

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

        .btn-submit:disabled {
            opacity: .5;
            cursor: not-allowed
        }

        .oauth-divider {
            display: flex;
            align-items: center;
            margin: 28px 0;
            color: var(--text-muted);
            font-size: .85rem
        }

        .oauth-divider::after,
        .oauth-divider::before {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-color), transparent)
        }

        .oauth-divider span {
            padding: 0 18px
        }

        .oauth-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .btn-oauth {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-card);
            font-size: .95rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-fast)
        }

        .btn-oauth:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md)
        }

        .btn-oauth.google {
            border-color: rgba(66, 133, 244, .3)
        }

        .btn-oauth.google:hover {
            background: rgba(66, 133, 244, .08);
            border-color: #4285f4
        }

        .btn-oauth.kakao {
            background: #fee500;
            border-color: #fee500;
            color: #3c1e1e
        }

        .btn-oauth.kakao:hover {
            background: #fdd835;
            box-shadow: 0 4px 12px rgba(254, 229, 0, .4)
        }

        .btn-oauth svg {
            width: 20px;
            height: 20px
        }

        .plan-modal {
            max-width: 880px
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 18px;
            margin-top: 28px
        }

        .plan-card {
            border: 2px solid var(--border-color);
            border-radius: var(--radius-xl);
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-normal);
            position: relative;
            background: var(--bg-card)
        }

        .plan-card:hover {
            border-color: var(--accent-secondary);
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg)
        }

        .plan-card.selected {
            border-color: var(--accent-primary);
            background: var(--accent-gradient-soft);
            box-shadow: 0 0 0 4px var(--accent-glow)
        }

        .plan-card.popular {
            border-color: var(--accent-primary)
        }

        .plan-card.popular::before {
            content: var(--popular-badge, '인기');
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent-gradient);
            color: #fff;
            font-size: .7rem;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: var(--radius-full);
            box-shadow: 0 4px 12px var(--accent-glow)
        }

        .plan-name {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 10px
        }

        .plan-price {
            font-family: 'Space Mono', monospace;
            font-size: 1.6rem;
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .plan-price span {
            font-size: .85rem;
            font-weight: 400;
            -webkit-text-fill-color: var(--text-muted)
        }

        .plan-limit {
            font-size: .9rem;
            color: var(--text-secondary);
            margin-top: 10px;
            font-weight: 500
        }

        .plan-features {
            font-size: .8rem;
            color: var(--text-muted);
            margin-top: 16px;
            text-align: left
        }

        .plan-features li {
            margin: 6px 0 6px 16px
        }

        .banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 24px;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 50;
            animation: bannerSlideUp .3s ease
        }

        @keyframes bannerSlideUp {
            from {
                transform: translateY(100%)
            }

            to {
                transform: translateY(0)
            }
        }

        .banner.visible {
            display: flex
        }

        .banner.preview-banner {
            background: linear-gradient(135deg, #fef3c7 0, #fde68a 100%);
            border-top: 2px solid var(--warning)
        }

        .banner.warning-banner {
            background: linear-gradient(135deg, #fef3c7 0, #fed7aa 100%);
            border-top: 2px solid #f97316;
            flex-direction: column;
            padding: 12px 24px;
            gap: 8px
        }

        .banner.warning-banner .warning-item {
            font-size: .9rem;
            color: #9a3412;
            line-height: 1.5
        }

        .banner.limit-banner {
            background: linear-gradient(135deg, #fee2e2 0, #fecaca 100%);
            border-top: 2px solid var(--error)
        }

        .banner-text {
            font-size: .95rem;
            font-weight: 500
        }

        .banner-text strong {
            color: var(--accent-primary)
        }

        .container>header {
            padding: 48px 0 36px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff
        }

        .brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            animation: fadeInUp .6s ease
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px)
            }

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

        .logo-wrap {
            position: relative;
            display: inline-block
        }

        .logo-wrap::before {
            content: '';
            position: absolute;
            top: 30%;
            left: 42%;
            width: 80px;
            height: 80px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, rgba(251,191,36,0.15) 30%, transparent 60%);
            filter: blur(12px);
            animation: drumHit 2.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 0
        }

        .logo-sound-wave {
            position: absolute;
            top: 25%;
            left: 42%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            border: 2px solid rgba(249,115,22,0.2);
            border-radius: 50%;
            animation: soundWave 2.5s ease-out infinite;
            pointer-events: none
        }

        .logo-sound-wave:nth-child(2) {
            animation-delay: 0.3s;
            border-color: rgba(251,191,36,0.15)
        }

        .logo-sound-wave:nth-child(3) {
            animation-delay: 0.6s;
            border-color: rgba(249,115,22,0.1)
        }

        .logo {
            width: 320px;
            height: auto;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 4px 16px rgba(249,115,22,0.1));
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)
        }

        .logo:hover {
            transform: scale(1.04);
            filter: drop-shadow(0 8px 28px rgba(249,115,22,0.2))
        }

        @keyframes drumHit {
            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8) }
            15% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) }
            40% { opacity: 0.5; transform: translate(-50%, -50%) scale(1) }
        }

        @keyframes soundWave {
            0% { width: 30px; height: 30px; opacity: 0.6 }
            100% { width: 180px; height: 180px; opacity: 0 }
        }

        /* v18: Rhythm waveform below logo */
        .rhythm-wave {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.5px;
            height: 32px;
            margin: 6px auto 16px;
            width: 260px;
            pointer-events: none
        }

        .rhythm-wave-bar {
            width: 2.5px;
            border-radius: 2px;
            background: var(--accent-primary);
            height: 4px;
            animation: rwPulse var(--dur) ease-in-out infinite;
            animation-delay: var(--d);
            opacity: 0.55
        }

        @keyframes rwPulse {
            0%, 100% { height: var(--h-min); opacity: 0.25 }
            50% { height: var(--h-max); opacity: 0.7 }
        }

        .brand-tagline-wrapper {
            margin-top: 8px;
            text-align: center
        }

        .brand-tagline {
            font-family: SUIT, sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -.01em
        }

        .brand-subtitle {
            font-size: .95rem;
            color: var(--text-muted);
            margin-top: 6px;
            text-align: center
        }

        .highlight-ai {
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700
        }

        .highlight-you {
            color: var(--text-primary);
            font-weight: 600
        }

        .progress-container {
            margin: 28px 0 36px
        }

        .progress-steps {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0
        }

        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            position: relative;
            flex: 1;
            max-width: 180px
        }

        .step-circle {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.1rem;
            transition: all 0.4s;
            background: var(--bg-secondary);
            color: var(--text-muted);
            border: 1.5px solid var(--border-color);
            box-shadow: var(--shadow-xs)
        }

        .progress-step.active .step-circle {
            background: var(--accent-gradient);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 16px var(--accent-glow);
            transform: scale(1.05);
            animation: stepGlow 2.5s ease-in-out infinite
        }

        .progress-step.completed .step-circle {
            background: var(--success-bg);
            color: var(--success);
            border: 2px solid rgba(16, 185, 129, 0.2);
            box-shadow: none
        }

        .step-label {
            font-size: .875rem;
            color: var(--text-muted);
            font-weight: 500;
            text-align: center;
            transition: var(--transition-fast)
        }

        .progress-step.active .step-label {
            color: var(--accent-primary);
            font-weight: 600
        }

        .progress-step.completed .step-label {
            color: var(--success)
        }

        .step-line {
            flex: 1;
            height: 3px;
            background: var(--border-subtle);
            margin: 0 -20px;
            margin-top: -30px;
            z-index: -1;
            max-width: 100px;
            border-radius: var(--radius-full);
            position: relative;
            overflow: hidden
        }

        .step-line.completed {
            background: linear-gradient(90deg, var(--success), var(--success-light))
        }

        .step-line.in-progress::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, var(--success), var(--accent-primary));
            animation: lineProgress 1.5s ease-in-out infinite;
            border-radius: var(--radius-full)
        }

        .card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-2xl);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            transition: border-color .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1), transform .4s cubic-bezier(0.4, 0, 0.2, 1)
        }

        .card:hover {
            box-shadow: 0 4px 20px rgba(249,115,22,0.08), 0 20px 40px rgba(0,0,0,0.06);
            border-color: rgba(249,115,22,0.15);
            transform: translateY(-2px)
        }

        .card-header {
            padding: 26px 32px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 16px;
            background: var(--accent-gradient-soft)
        }

        .card-header h2 {
            font-size: 1.15rem;
            font-weight: 700
        }

        .card-icon {
            width: 48px;
            height: 48px;
            background: var(--accent-gradient);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: 0 4px 12px var(--accent-glow)
        }

        .card-icon svg {
            width: 24px;
            height: 24px
        }

        .card-body {
            padding: 32px
        }

        .pipeline-badge {
            margin-left: auto;
            padding: 8px 14px;
            border-radius: var(--radius-full);
            font-size: .75rem;
            font-weight: 700;
            background: linear-gradient(135deg, #10b981 0, #34d399 100%);
            color: #fff;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 3px 10px rgba(16, 185, 129, .25)
        }

        .step-section {
            display: none
        }

        .step-section.active {
            display: block;
            animation: fadeIn .4s ease
        }

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

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

        .input-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 28px;
            background: var(--bg-tertiary);
            padding: 6px;
            border-radius: var(--radius-lg);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04)
        }

        .input-tab {
            flex: 1;
            padding: 14px 24px;
            background: 0 0;
            border: none;
            border-radius: var(--radius-md);
            font-family: inherit;
            font-size: .95rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            position: relative
        }

        .input-tab:hover {
            color: var(--text-secondary)
        }

        .input-tab.active {
            background: var(--bg-card);
            color: var(--accent-primary);
            box-shadow: var(--shadow-md)
        }

        .input-tab.active::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: var(--accent-gradient);
            border-radius: var(--radius-full)
        }

        .input-tab svg {
            width: 20px;
            height: 20px
        }

        .input-section {
            display: none
        }

        .input-section.active {
            display: block;
            animation: fadeIn .3s ease
        }

        .upload-zone {
            border: 2px dashed var(--border-subtle);
            border-radius: var(--radius-xl);
            padding: 60px 28px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-normal);
            background: linear-gradient(180deg, var(--bg-secondary) 0, var(--bg-tertiary) 100%);
            position: relative;
            overflow: hidden
        }

        .upload-zone::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius-xl);
            background: conic-gradient(
                from 0deg,
                var(--accent-primary) 0deg,
                transparent 60deg,
                transparent 180deg,
                var(--accent-primary) 240deg,
                transparent 300deg
            );
            opacity: 0;
            animation: rotateBorder 3s linear infinite;
            transition: opacity .3s;
            z-index: -1
        }

        .upload-zone.dragover,
        .upload-zone:hover {
            border-color: var(--accent-primary);
            border-style: solid;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg)
        }

        .upload-zone.dragover::before,
        .upload-zone:hover::before {
            opacity: .15
        }

        .upload-zone.has-file {
            border-color: var(--success);
            border-style: solid;
            background: var(--success-bg)
        }

        .upload-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: var(--accent-gradient);
            border-radius: var(--radius-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            position: relative;
            z-index: 1;
            box-shadow: 0 8px 24px var(--accent-glow);
            animation: iconFloat 3s ease-in-out infinite
        }

        .upload-icon svg {
            width: 36px;
            height: 36px
        }

        .upload-text {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--text-primary);
            position: relative;
            z-index: 1
        }

        .upload-hint {
            font-size: .9rem;
            color: var(--text-muted);
            position: relative;
            z-index: 1
        }

        .file-info {
            margin-top: 24px;
            padding: 20px 24px;
            background: var(--success-bg);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            gap: 18px;
            border: 1px solid var(--success);
            box-shadow: 0 4px 12px rgba(16, 185, 129, .12)
        }

        .file-icon {
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, var(--success), var(--success-light));
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: 0 4px 12px rgba(16, 185, 129, .25)
        }

        .file-icon svg {
            width: 26px;
            height: 26px
        }

        .file-details {
            flex: 1;
            text-align: left
        }

        .file-name {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 4px;
            color: var(--text-primary)
        }

        .file-size {
            font-size: .85rem;
            color: var(--text-muted);
            font-family: 'Space Mono', monospace
        }

        .file-remove {
            background: 0 0;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 12px;
            border-radius: var(--radius-md);
            transition: var(--transition-fast)
        }

        .file-remove:hover {
            background: var(--error-bg);
            color: var(--error)
        }

        .file-bpm-input {
            margin-top: 20px;
            padding: 20px;
            background: var(--accent-gradient-soft);
            border: 2px solid var(--accent-primary);
            border-radius: var(--radius-lg);
            text-align: center
        }

        .file-bpm-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--accent-primary);
            margin-bottom: 16px
        }

        .file-bpm-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 12px
        }

        .file-bpm-row input {
            width: 120px;
            padding: 14px;
            text-align: center;
            font-family: 'Space Mono', monospace;
            font-size: 1.5rem;
            font-weight: 700;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-card)
        }

        .file-bpm-row input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--accent-glow)
        }

        .file-bpm-unit {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-secondary)
        }

        .file-bpm-link {
            font-size: .85rem;
            color: var(--accent-primary);
            text-decoration: none
        }

        .file-bpm-link:hover {
            text-decoration: underline
        }

        .song-info-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px
        }

        .song-info-input {
            padding: 14px 16px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-family: inherit;
            font-size: .95rem;
            color: var(--text-primary);
            transition: var(--transition-fast)
        }

        .song-info-input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--accent-glow)
        }

        .song-info-input::placeholder {
            color: var(--text-light)
        }

        .song-info-input.has-value {
            border-color: var(--success);
            background: var(--success-bg)
        }

        .song-info-hint {
            font-size: .8rem;
            color: var(--text-light);
            margin-bottom: 12px;
            text-align: center
        }

        .song-info-hint .spotify-icon {
            color: #1db954;
            margin-right: 4px
        }

        .bpm-confirmed-banner {
            background: linear-gradient(135deg, rgba(16, 185, 129, .15), rgba(16, 185, 129, .05));
            border: 2px solid var(--success);
            border-radius: var(--radius-lg);
            padding: 20px;
            text-align: center;
            margin-bottom: 16px
        }

        .bpm-confirmed-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--success);
            font-family: 'Space Mono', monospace;
            font-variant-numeric: tabular-nums
        }

        .bpm-confirmed-source {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--success);
            color: #fff;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: .8rem;
            font-weight: 600;
            margin-top: 8px
        }

        .bpm-confirmed-source svg {
            width: 16px;
            height: 16px
        }

        .manual-bpm-section {
            background: linear-gradient(135deg, rgba(249, 115, 22, .08), rgba(249, 115, 22, .02));
            border: 2px dashed var(--accent-primary);
            border-radius: var(--radius-lg);
            padding: 16px;
            margin-bottom: 16px;
            text-align: center
        }

        .manual-bpm-label {
            font-size: .85rem;
            font-weight: 600;
            color: var(--accent-primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px
        }

        .manual-bpm-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px
        }

        .manual-bpm-input {
            width: 100px;
            padding: 12px 16px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-family: 'Space Mono', monospace;
            font-size: 1.2rem;
            font-weight: 700;
            text-align: center;
            color: var(--text-primary);
            transition: var(--transition-fast)
        }

        .manual-bpm-input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--accent-glow)
        }

        .manual-bpm-input.has-value {
            border-color: var(--success);
            background: var(--success-bg);
            color: var(--success)
        }

        .manual-bpm-unit {
            font-weight: 600;
            color: var(--text-secondary)
        }

        .manual-bpm-hint {
            font-size: .75rem;
            color: var(--text-muted);
            margin-top: 8px
        }

        .manual-bpm-hint strong {
            color: var(--success)
        }

        .song-wizard-modal .modal {
            max-width: 480px;
            box-sizing: border-box
        }

        @media (max-width:480px) {
            .song-wizard-modal .modal {
                max-width: 100vw !important;
                width: 100vw;
                margin: 0;
                border-radius: 16px 16px 0 0;
                max-height: 85vh
            }
            .song-wizard-modal .modal .modal-body {
                padding: 16px
            }
            .song-wizard-modal .modal .modal-header {
                padding: 16px 16px 0
            }
            .direct-url-modal-inner {
                max-width: 100vw !important;
                width: 100vw;
                margin: 0;
                border-radius: 16px 16px 0 0;
                max-height: 85vh
            }
        }

        .song-wizard-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative
        }

        .wizard-input-group {
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .wizard-input-group label {
            font-size: .85rem;
            font-weight: 600;
            color: var(--text-secondary)
        }

        .wizard-input {
            padding: 14px 18px;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 1rem;
            color: var(--text-primary);
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s
        }

        .wizard-input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--accent-glow)
        }

        .wizard-search-btn {
            margin-top: 8px;
            padding: 16px 24px;
            background: var(--accent-gradient);
            border: none;
            border-radius: var(--radius-md);
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s
        }

        .wizard-search-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px var(--accent-glow)
        }

        .wizard-search-btn:disabled {
            opacity: .5;
            cursor: not-allowed
        }

        .wizard-search-btn svg {
            width: 20px;
            height: 20px
        }

        .wizard-open-btn {
            position: relative;
            overflow: hidden;
            animation: wizardPulse 2.5s ease-in-out infinite
        }

        .wizard-open-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(249, 115, 22, .15), transparent);
            animation: wizardShimmer 3s ease-in-out infinite
        }

        .wizard-open-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(249, 115, 22, .25);
            border-color: var(--accent-primary) !important;
            background: rgba(249, 115, 22, .08) !important
        }

        .wizard-open-btn:hover svg {
            animation: wizardSearchBounce .6s ease-in-out
        }

        .wizard-open-btn.selected {
            animation: none
        }

        .wizard-open-btn.selected::before {
            display: none
        }

        @keyframes wizardPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(249, 115, 22, 0)
            }

            50% {
                box-shadow: 0 0 20px 2px rgba(249, 115, 22, .15)
            }
        }

        @keyframes wizardShimmer {
            0% {
                left: -100%
            }

            100%,
            50% {
                left: 100%
            }
        }

        @keyframes wizardSearchBounce {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.2)
            }
        }

        .wizard-bpm-result {
            margin-top: 16px;
            padding: 16px;
            border-radius: var(--radius-md);
            text-align: center
        }

        .wizard-bpm-result.found {
            background: rgba(34, 197, 94, .1);
            border: 2px solid #22c55e
        }

        .wizard-bpm-result.not-found {
            background: rgba(249, 115, 22, .1);
            border: 2px solid var(--accent-primary)
        }

        .wizard-bpm-value {
            font-family: 'Space Mono', monospace;
            font-size: 2rem;
            font-weight: 700;
            color: #22c55e;
            font-variant-numeric: tabular-nums
        }

        .wizard-bpm-source {
            font-size: .85rem;
            color: var(--text-muted);
            margin-top: 4px
        }

        .wizard-songdata-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-primary);
            text-decoration: none;
            font-weight: 600;
            margin: 8px 0
        }

        .wizard-songdata-link:hover {
            text-decoration: underline
        }

        .wizard-manual-bpm {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 12px
        }

        .wizard-manual-bpm input {
            width: 140px;
            padding: 12px 16px;
            text-align: center;
            font-family: 'Space Mono', monospace;
            font-size: 1rem;
            font-weight: 600;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-card)
        }

        .wizard-manual-bpm input::placeholder {
            font-family: inherit;
            font-size: .9rem;
            font-weight: 500;
            color: var(--text-muted)
        }

        .wizard-manual-bpm input:focus {
            outline: 0;
            border-color: var(--accent-primary)
        }

        .wizard-youtube-results {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 16px
        }

        .wizard-youtube-card {
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: pointer;
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s
        }

        .wizard-youtube-card:hover {
            border-color: var(--accent-primary);
            transform: translateY(-2px)
        }

        .wizard-youtube-card.selected {
            border-color: #22c55e;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, .3)
        }

        .wizard-youtube-thumb {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover
        }

        .wizard-youtube-info {
            padding: 10px
        }

        .wizard-youtube-title {
            font-size: .85rem;
            font-weight: 600;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
        }

        .wizard-youtube-duration {
            font-size: .75rem;
            color: var(--text-muted);
            margin-top: 4px
        }

        .wizard-nav-btn {
            padding: 8px 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: .85rem;
            cursor: pointer;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease
        }

        .wizard-nav-btn:hover:not(:disabled) {
            background: var(--accent-primary);
            color: #fff;
            border-color: var(--accent-primary)
        }

        .wizard-nav-btn:disabled {
            cursor: not-allowed
        }

        #direct-url-input:focus {
            border-color: var(--accent-primary)
        }

        #direct-url-analyze-btn:disabled {
            opacity: .4;
            cursor: not-allowed
        }

        .wizard-url-bpm-box {
            padding: 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            text-align: center
        }

        .wizard-url-bpm-box.found {
            border-color: var(--success);
            background: rgba(34, 197, 94, .06)
        }

        #direct-url-manual-bpm-only:focus {
            border-color: var(--accent-primary)
        }

        @media (max-width:600px) {
            .song-info-inputs {
                grid-template-columns: 1fr
            }

            .wizard-youtube-results {
                grid-template-columns: 1fr
            }
        }

        .url-input {
            width: 100%;
            padding: 20px 24px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-lg);
            font-family: inherit;
            font-size: 1rem;
            color: var(--text-primary);
            transition: var(--transition-fast);
            box-shadow: var(--shadow-xs)
        }

        .url-input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-sm)
        }

        .url-input::placeholder {
            color: var(--text-light)
        }

        .url-input.has-url {
            border-color: var(--success);
            background: var(--success-bg);
            box-shadow: 0 0 0 4px rgba(16, 185, 129, .1)
        }

        .youtube-search-wrapper {
            position: relative;
            margin-bottom: 16px
        }

        .youtube-search-input-wrap {
            position: relative;
            display: flex;
            align-items: center
        }

        .youtube-search-icon {
            position: absolute;
            left: 16px;
            width: 20px;
            height: 20px;
            color: var(--text-muted);
            pointer-events: none
        }

        .youtube-search-input {
            width: 100%;
            padding: 16px 44px 16px 48px;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: 14px;
            font-family: inherit;
            font-size: 1rem;
            color: var(--text-primary);
            transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease
        }

        .youtube-search-input:focus {
            outline: 0;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 4px var(--accent-glow)
        }

        .youtube-search-input::placeholder {
            color: var(--text-muted)
        }

        .youtube-search-spinner {
            position: absolute;
            right: 16px;
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            display: none;
            animation: spin .8s linear infinite
        }

        .youtube-search-spinner.visible {
            display: block
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .youtube-search-dropdown {
            margin-top: 16px;
            display: none
        }

        .youtube-search-dropdown.visible {
            display: block
        }

        .youtube-search-dropdown:empty {
            display: none
        }

        .youtube-results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px
        }

        .youtube-result-item {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: border-color .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), transform .35s cubic-bezier(0.4, 0, 0.2, 1)
        }

        .youtube-result-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
            border-color: var(--accent-primary)
        }

        .youtube-result-thumb-wrap {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            background: var(--bg-tertiary);
            overflow: hidden
        }

        .youtube-result-thumb {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease
        }

        .youtube-result-item:hover .youtube-result-thumb {
            transform: scale(1.08)
        }

        .youtube-result-play-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity .3s ease
        }

        .youtube-result-item:hover .youtube-result-play-overlay {
            opacity: 1
        }

        .youtube-result-play-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transform: scale(0.8);
            transition: transform .3s cubic-bezier(0.34,1.56,0.64,1)
        }

        .youtube-result-item:hover .youtube-result-play-btn {
            transform: scale(1)
        }

        .youtube-result-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, .85);
            color: #fff;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: .75rem;
            font-weight: 600
        }

        .youtube-result-info {
            padding: 12px
        }

        .youtube-result-title {
            font-size: .9rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
            min-height: 2.8em
        }

        .youtube-result-channel {
            font-size: .8rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .youtube-result-channel::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent-secondary);
            flex-shrink: 0
        }

        .youtube-search-empty {
            padding: 32px;
            text-align: center;
            color: var(--text-muted);
            font-size: .95rem
        }

        .youtube-search-error {
            padding: 20px;
            text-align: center;
            color: var(--error);
            font-size: .9rem;
            background: var(--error-bg);
            border-radius: 12px
        }

        .url-divider {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 20px 0;
            color: var(--text-muted);
            font-size: .85rem
        }

        .url-divider::after,
        .url-divider::before {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color)
        }

        .supported-platforms {
            display: flex;
            gap: 16px;
            margin-top: 20px;
            justify-content: center
        }

        .platform-tag {
            padding: 12px 20px;
            border-radius: 12px;
            font-size: .9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
            cursor: pointer
        }

        .platform-tag svg {
            width: 20px;
            height: 20px
        }

        .platform-tag.youtube {
            border-color: rgba(255, 0, 0, .3);
            color: #c00
        }

        .platform-tag.youtube:hover {
            background: rgba(255, 0, 0, .05);
            border-color: rgba(255, 0, 0, .5)
        }

        .platform-tag.instagram {
            border-color: rgba(225, 48, 108, .3);
            color: #c13584
        }

        .platform-tag.instagram:hover {
            background: rgba(225, 48, 108, .05);
            border-color: rgba(225, 48, 108, .5)
        }

        .bpm-detected {
            text-align: center;
            padding: 28px;
            background: var(--accent-gradient-soft);
            border-radius: var(--radius-xl);
            margin-bottom: 32px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden
        }

        .bpm-detected::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            animation: bpmPulseGlow 1s ease-in-out infinite;
            pointer-events: none
        }

        .bpm-detected-label {
            font-size: .9rem;
            color: var(--text-muted);
            margin-bottom: 10px;
            font-weight: 500
        }

        .bpm-detected-value {
            font-family: 'Space Mono', monospace;
            font-size: 3.5rem;
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 4px 20px var(--accent-glow)
        }

        .bpm-detected-unit {
            font-size: 1.3rem;
            color: var(--text-muted);
            margin-left: 6px
        }

        .bpm-candidates {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 28px
        }

        .bpm-candidate {
            display: flex;
            align-items: center;
            padding: 18px 22px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: var(--transition-normal);
            box-shadow: var(--shadow-xs)
        }

        .bpm-candidate:hover {
            border-color: var(--accent-secondary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md)
        }

        .bpm-candidate.selected {
            border-color: var(--accent-primary);
            background: var(--accent-gradient-soft);
            box-shadow: 0 0 0 4px var(--accent-glow)
        }

        .bpm-candidate.detected {
            border-color: var(--accent-primary)
        }

        .bpm-candidate input[type=radio] {
            display: none
        }

        .bpm-radio {
            width: 22px;
            height: 22px;
            border: 2px solid var(--border-subtle);
            border-radius: 50%;
            margin-right: 16px;
            position: relative;
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s
        }

        .bpm-candidate.selected .bpm-radio {
            border-color: var(--accent-primary)
        }

        .bpm-candidate.selected .bpm-radio::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            background: var(--accent-primary);
            border-radius: 50%
        }

        .bpm-value {
            font-family: 'Space Mono', monospace;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 90px
        }

        .bpm-label {
            font-size: .9rem;
            color: var(--text-secondary);
            flex: 1
        }

        .bpm-badge {
            padding: 4px 10px;
            background: var(--accent-gradient);
            color: #fff;
            font-size: .75rem;
            font-weight: 600;
            border-radius: 6px
        }

        .bpm-badge.recommended {
            background: linear-gradient(135deg, #22c55e 0, #16a34a 100%);
            animation: pulse-recommend 2s ease-in-out infinite
        }

        @keyframes pulse-recommend {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, .4)
            }

            50% {
                box-shadow: 0 0 0 6px rgba(34, 197, 94, 0)
            }
        }

        .bpm-candidate.recommended {
            border-color: #22c55e;
            background: rgba(34, 197, 94, .08)
        }

        .bpm-candidate.recommended.selected {
            background: rgba(34, 197, 94, .15);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, .3)
        }

        .bpm-custom {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: 14px;
            gap: 16px
        }

        .bpm-custom.selected {
            border-color: var(--accent-primary);
            background: rgba(249, 115, 22, .08)
        }

        .bpm-custom-input {
            width: 100px;
            padding: 12px 16px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-family: 'Space Mono', monospace;
            font-size: 1.1rem;
            text-align: center;
            background: var(--bg-card)
        }

        .bpm-custom-input:focus {
            outline: 0;
            border-color: var(--accent-primary)
        }

        .bpm-custom-label {
            font-size: .9rem;
            color: var(--text-secondary)
        }

        .bpm-hint {
            margin-top: 20px;
            padding: 16px 20px;
            background: linear-gradient(135deg, #fee2e2 0, #fecaca 100%);
            border: 2px solid #ef4444;
            border-radius: 12px;
            font-size: .9rem;
            color: #991b1b;
            display: flex;
            align-items: flex-start;
            gap: 12px
        }

        .bpm-hint-icon {
            font-size: 1.4rem
        }

        .bpm-hint strong {
            color: #dc2626
        }

        .settings-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid var(--border-color)
        }

        .setting-group label {
            display: block;
            font-size: .85rem;
            font-weight: 500;
            margin-bottom: 10px;
            color: var(--text-secondary)
        }

        .setting-group select {
            width: 100%;
            padding: 14px 18px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            font-family: inherit;
            font-size: .95rem;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center
        }

        .setting-group select:focus {
            outline: 0;
            border-color: var(--accent-primary)
        }

        .step2-main-view {
            padding: 30px 20px
        }

        .step2-song-header {
            text-align: center;
            margin-bottom: 24px
        }

        .step2-song-artist {
            font-size: .9rem;
            color: var(--text-muted);
            margin-bottom: 4px
        }

        .step2-song-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.3
        }

        .step2-song-meta {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap
        }

        .step2-meta-bpm {
            font-family: 'Space Mono', monospace;
            font-size: .95rem;
            font-weight: 600;
            color: var(--accent-primary);
            padding: 5px 14px;
            background: var(--accent-gradient-soft);
            border-radius: var(--radius-sm)
        }

        .step2-meta-bars {
            font-size: .9rem;
            color: var(--text-secondary);
            padding: 5px 0
        }

        .step2-progress-section {
            max-width: 450px;
            margin: 0 auto 28px;
            padding: 16px 20px;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg)
        }

        .step2-progress-bar {
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-full);
            overflow: hidden;
            margin-bottom: 10px
        }

        .step2-progress-fill {
            height: 100%;
            background: var(--accent-gradient);
            border-radius: var(--radius-full);
            transition: width .3s ease
        }

        .step2-progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .step2-progress-text {
            font-size: .85rem;
            color: var(--text-secondary)
        }

        .step2-progress-percent {
            font-family: 'Space Mono', monospace;
            font-size: .95rem;
            font-weight: 700;
            color: var(--accent-primary)
        }

        .step2-complete-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 24px;
            background: linear-gradient(135deg, rgba(34, 197, 94, .15) 0, rgba(16, 185, 129, .1) 100%);
            border: 1px solid rgba(34, 197, 94, .3);
            border-radius: var(--radius-lg);
            margin-bottom: 24px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
            animation: step2BannerPop .4s ease
        }

        @keyframes step2BannerPop {
            from {
                transform: scale(.9);
                opacity: 0
            }

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

        .step2-check-icon {
            width: 24px;
            height: 24px;
            color: #22c55e
        }

        .step2-complete-banner span {
            font-size: 1.1rem;
            font-weight: 700;
            color: #22c55e
        }

        /* v18: Step2 Tutorial - Dark Studio Sequencer */
        /* ═══════ STEP2 SLIDESHOW v19 ═══════ */
        .step2-tutorial-section {
            max-width: 560px;
            margin: 0 auto 24px;
            padding: 0;
            background: #0f1117;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: var(--r-xl, 24px);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 24px 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
            overflow: hidden;
            position: relative
        }
        .step2-tutorial-section::before {
            content: '';
            position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E") repeat;
            background-size: 128px;
            pointer-events: none;
            z-index: 50;
            border-radius: inherit;
            mix-blend-mode: overlay
        }
        .step2-tutorial-section::after {
            content: '';
            position: absolute;
            top: 0; left: 10%; right: 10%; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(249,115,22,0.4), transparent);
            z-index: 51
        }
        .step2-tutorial-subtitle { display: none }
        .step2-tutorial-header {
            padding: 20px 24px 0;
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between
        }
        .step2-tutorial-header-left { display: flex; align-items: center; gap: 10px }
        .step2-tutorial-header-icon {
            width: 28px; height: 28px;
            border-radius: var(--r-sm, 8px);
            background: var(--accent-gradient, linear-gradient(135deg, #f97316, #ea580c));
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 12px rgba(249,115,22,0.25)
        }
        .step2-tutorial-header-icon svg { width: 14px; height: 14px; color: #fff }
        .step2-tutorial-header-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 1.5px;
            color: #94a3b8
        }
        .step2-tutorial-header-counter {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px; font-weight: 500;
            color: rgba(148,163,184,0.5)
        }
        .step2-tutorial-header-counter .current {
            color: var(--accent-primary, #f97316); font-weight: 700
        }
        .step2-seq-track {
            display: flex; gap: 4px;
            padding: 16px 24px 0;
            position: relative; z-index: 2
        }
        .step2-seq-cell {
            flex: 1; height: 6px; border-radius: 3px;
            background: rgba(255,255,255,0.05);
            overflow: hidden; cursor: pointer;
            position: relative; transition: background 0.3s ease
        }
        .step2-seq-cell:hover { background: rgba(255,255,255,0.1) }
        .step2-seq-cell.past { background: var(--accent-primary, #f97316); opacity: 0.35 }
        .step2-seq-cell.active { background: rgba(255,255,255,0.05) }
        .step2-seq-fill {
            position: absolute; inset: 0;
            background: linear-gradient(90deg, var(--accent-primary, #f97316), #fb923c);
            border-radius: 3px; transform-origin: left; transform: scaleX(0);
            box-shadow: 0 0 8px rgba(249,115,22,0.3)
        }
        .step2-seq-cell.active .step2-seq-fill { animation: step2SeqFill 10s linear forwards }
        @keyframes step2SeqFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }

        /* Stage: glassmorphism animation area */
        .step2-stage {
            margin: 18px 20px 0;
            height: 180px;
            border-radius: var(--r-md, 14px);
            background: #0a0c12;
            border: 1px solid rgba(255,255,255,0.06);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2
        }
        .step2-stage::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%; width: 250px; height: 250px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(249,115,22,0.06) 0%, transparent 70%);
            pointer-events: none
        }
        .step2-stage::after {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none
        }

        /* Slide transitions: opacity + visibility */
        .step2-tutorial-slide {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transform: scale(0.92) translateY(6px);
            transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.5s;
            pointer-events: none
        }
        .step2-tutorial-slide.active {
            opacity: 1; visibility: visible;
            transform: scale(1) translateY(0);
            transition: opacity 0.5s ease 0.05s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, visibility 0s linear 0s;
            pointer-events: auto
        }

        /* Text area below stage */
        .step2-slide-text-area {
            padding: 16px 24px 4px;
            text-align: center;
            position: relative; z-index: 2;
            min-height: 64px
        }
        .step2-slide-text {
            display: none
        }
        .step2-slide-text.active {
            display: block
        }
        .step2-slide-headline {
            font-size: 15px; font-weight: 700;
            color: #f1f5f9;
            letter-spacing: -0.02em; margin-bottom: 4px;
            opacity: 0; transform: translateY(8px);
            transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s
        }
        .step2-slide-headline strong { color: var(--accent-primary, #f97316) }
        .step2-slide-subtitle {
            font-size: 12.5px; font-weight: 400;
            color: #94a3b8;
            line-height: 1.6;
            opacity: 0; transform: translateY(6px);
            transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s
        }
        .step2-slide-text.active .step2-slide-headline,
        .step2-slide-text.active .step2-slide-subtitle {
            opacity: 1; transform: translateY(0)
        }
        .step2-tutorial-dots { display: none }
        .step2-dot { display: none }

        /* ─── Slide 0: Click Grid ─── */
        .grid-demo {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 10px; padding: 0 30px; width: 100%; max-width: 300px; position: relative
        }
        .grid-col { display: flex; flex-direction: column; gap: 6px; align-items: center }
        .grid-cell {
            width: 100%; aspect-ratio: 1; max-width: 44px;
            border-radius: var(--r-sm, 8px);
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            position: relative
        }
        .grid-cell.lit {
            background: rgba(249,115,22,0.15);
            border-color: rgba(249,115,22,0.3);
            box-shadow: 0 0 16px rgba(249,115,22,0.15), inset 0 0 10px rgba(249,115,22,0.08)
        }
        .grid-cell.lit::after {
            content: ''; position: absolute;
            inset: 32%; border-radius: 50%;
            background: var(--accent-primary, #f97316);
            box-shadow: 0 0 6px rgba(249,115,22,0.4);
            opacity: 0.85
        }
        .grid-cell.click-1 { animation: click1Light 7s ease infinite }
        .grid-cell.click-2 { animation: click2Light 7s ease infinite }
        .grid-cell.click-3 { animation: click3Light 7s ease infinite }
        .grid-cell.click-1::after,
        .grid-cell.click-2::after,
        .grid-cell.click-3::after {
            content: ''; position: absolute;
            inset: 32%; border-radius: 50%;
            background: var(--accent-primary, #f97316);
            box-shadow: 0 0 8px rgba(249,115,22,0.4);
            opacity: 0
        }
        .grid-cell.click-1::after { animation: click1Dot 7s ease infinite }
        .grid-cell.click-2::after { animation: click2Dot 7s ease infinite }
        .grid-cell.click-3::after { animation: click3Dot 7s ease infinite }
        @keyframes click1Light {
            0%, 18% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); box-shadow: none }
            22%, 40% { background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.4); box-shadow: 0 0 24px rgba(249,115,22,0.25) }
            46%, 100% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); box-shadow: none }
        }
        @keyframes click1Dot {
            0%, 18% { opacity: 0; transform: scale(0.3) } 22% { opacity: 1; transform: scale(1.15) }
            26%, 40% { opacity: 0.9; transform: scale(1) } 46%, 100% { opacity: 0; transform: scale(0.3) }
        }
        @keyframes click2Light {
            0%, 43% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); box-shadow: none }
            47%, 65% { background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.4); box-shadow: 0 0 24px rgba(249,115,22,0.25) }
            71%, 100% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); box-shadow: none }
        }
        @keyframes click2Dot {
            0%, 43% { opacity: 0; transform: scale(0.3) } 47% { opacity: 1; transform: scale(1.15) }
            51%, 65% { opacity: 0.9; transform: scale(1) } 71%, 100% { opacity: 0; transform: scale(0.3) }
        }
        @keyframes click3Light {
            0%, 68% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); box-shadow: none }
            72%, 86% { background: rgba(249,115,22,0.15); border-color: rgba(249,115,22,0.4); box-shadow: 0 0 24px rgba(249,115,22,0.25) }
            92%, 100% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); box-shadow: none }
        }
        @keyframes click3Dot {
            0%, 68% { opacity: 0; transform: scale(0.3) } 72% { opacity: 1; transform: scale(1.15) }
            76%, 86% { opacity: 0.9; transform: scale(1) } 92%, 100% { opacity: 0; transform: scale(0.3) }
        }
        .grid-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px; font-weight: 600;
            color: #64748b;
            letter-spacing: 0.5px; margin-top: 4px
        }
        .grid-cursor {
            position: absolute; width: 26px; height: 26px;
            filter: drop-shadow(0 0 6px rgba(255,255,255,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
            z-index: 10; animation: cursorPath 7s ease-in-out infinite; pointer-events: none
        }
        @keyframes cursorPath {
            0%, 6% { top: 8%; left: 22%; transform: scale(1) }
            16% { top: 34%; left: 25%; transform: scale(1) }
            19% { top: 34%; left: 25%; transform: scale(0.78) }
            22%, 32% { top: 34%; left: 25%; transform: scale(1) }
            42% { top: 6%; left: 54%; transform: scale(1) }
            45% { top: 6%; left: 54%; transform: scale(0.78) }
            48%, 56% { top: 6%; left: 54%; transform: scale(1) }
            66% { top: 34%; left: 68%; transform: scale(1) }
            69% { top: 34%; left: 68%; transform: scale(0.78) }
            72%, 80% { top: 34%; left: 68%; transform: scale(1) }
            94%, 100% { top: 8%; left: 22%; transform: scale(1) }
        }

        /* ─── Slide 1: Multi-select ─── */
        .bars-demo { display: flex; gap: 8px; padding: 0 24px; width: 100%; position: relative }
        .bar-block {
            flex: 1; height: 90px; border-radius: 10px;
            background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.06);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 8px; position: relative; overflow: hidden; transition: all 0.4s ease
        }
        .bar-num {
            font-family: 'JetBrains Mono', monospace;
            font-size: 18px; font-weight: 700;
            color: rgba(148,163,184,0.5); transition: color 0.4s ease
        }
        .bar-lines { display: flex; flex-direction: column; gap: 3px; width: 60% }
        .bar-line { height: 2px; border-radius: 1px; background: rgba(255,255,255,0.06); transition: background 0.4s ease }
        .bar-block:nth-child(1) { animation: barSelect 5s ease-in-out infinite 0s }
        .bar-block:nth-child(2) { animation: barSelect 5s ease-in-out infinite 0.3s }
        .bar-block:nth-child(3) { animation: barSelect 5s ease-in-out infinite 0.6s }
        .bar-block:nth-child(4) { animation: barSelect 5s ease-in-out infinite 0.9s }
        @keyframes barSelect {
            0%, 25%, 75%, 100% { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06) }
            35%, 65% { background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.25); box-shadow: inset 0 0 30px rgba(56,189,248,0.05) }
        }
        .bar-block:nth-child(1) .bar-num, .bar-block:nth-child(2) .bar-num,
        .bar-block:nth-child(3) .bar-num, .bar-block:nth-child(4) .bar-num { animation: barNumHL 5s ease-in-out infinite }
        .bar-block:nth-child(2) .bar-num { animation-delay: 0.3s }
        .bar-block:nth-child(3) .bar-num { animation-delay: 0.6s }
        .bar-block:nth-child(4) .bar-num { animation-delay: 0.9s }
        @keyframes barNumHL { 0%, 25%, 75%, 100% { color: rgba(148,163,184,0.5) } 35%, 65% { color: #7dd3fc } }
        .bars-sweep {
            position: absolute; top: 0; left: -2px; bottom: 0; width: 2px;
            background: rgba(56,189,248,0.6); box-shadow: 0 0 12px rgba(56,189,248,0.4);
            border-radius: 1px; animation: sweepLine 5s ease-in-out infinite
        }
        @keyframes sweepLine {
            0%, 20% { left: -2px; opacity: 0 } 25% { left: 0%; opacity: 1 }
            60% { left: 100%; opacity: 1 } 65%, 100% { left: 100%; opacity: 0 }
        }

        /* ─── Slide 3: Playback ─── */
        .playback-demo { display: flex; flex-direction: column; align-items: center; gap: 20px }
        .playback-controls { display: flex; gap: 12px; align-items: center }
        .pb-btn {
            width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); transition: all 0.3s ease
        }
        .pb-btn svg { width: 18px; height: 18px; color: #64748b }
        .pb-btn.play {
            width: 52px; height: 52px;
            background: var(--accent-primary, #f97316); border-color: var(--accent-primary, #f97316);
            box-shadow: 0 0 24px rgba(249,115,22,0.35); animation: playGlow 2s ease-in-out infinite
        }
        .pb-btn.play svg { color: #fff; width: 22px; height: 22px }
        @keyframes playGlow { 0%, 100% { box-shadow: 0 0 24px rgba(249,115,22,0.35) } 50% { box-shadow: 0 0 36px rgba(249,115,22,0.5) } }
        .waveform { display: flex; align-items: center; gap: 2px; height: 48px }
        .wave-bar {
            width: 3px; border-radius: 2px;
            background: linear-gradient(180deg, var(--accent-primary, #f97316), rgba(249,115,22,0.3));
            animation: waveAnim var(--wd, 1s) ease-in-out infinite var(--wdl, 0s)
        }
        @keyframes waveAnim { 0%, 100% { height: var(--wh-min, 4px); opacity: 0.4 } 50% { height: var(--wh-max, 24px); opacity: 1 } }

        /* ─── Slide 4: Shortcuts ─── */
        .shortcuts-demo { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px }
        .shortcut-row {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 12px; border-radius: 10px;
            background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
            transition: all 0.5s ease
        }
        .shortcut-row:nth-child(1) { animation: scHighlight 6s ease-in-out infinite 0s }
        .shortcut-row:nth-child(2) { animation: scHighlight 6s ease-in-out infinite 2s }
        .shortcut-row:nth-child(3) { animation: scHighlight 6s ease-in-out infinite 4s }
        @keyframes scHighlight {
            0%, 20%, 100% { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04) }
            5%, 15% { background: rgba(249,115,22,0.06); border-color: rgba(249,115,22,0.15) }
        }
        .sc-keys { display: flex; align-items: center; gap: 4px; flex-shrink: 0 }
        .sc-key {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 30px; height: 28px; padding: 0 6px;
            font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
            color: rgba(255,255,255,0.8);
            background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
            border: 1px solid rgba(255,255,255,0.15);
            border-bottom: 2.5px solid rgba(255,255,255,0.08);
            border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.3)
        }
        .sc-plus { font-size: 10px; color: rgba(148,163,184,0.6); font-weight: 500 }
        .sc-label { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: auto }

        /* ─── Slide 5: AI Edit ─── */
        .ai-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px }
        .ai-sparkle { color: var(--accent-primary, #f97316); animation: sparkleRotate 4s linear infinite }
        .ai-sparkle svg { width: 24px; height: 24px }
        @keyframes sparkleRotate {
            0% { transform: rotate(0deg) scale(1) } 25% { transform: rotate(5deg) scale(1.1) }
            50% { transform: rotate(0deg) scale(1) } 75% { transform: rotate(-5deg) scale(1.1) } 100% { transform: rotate(0deg) scale(1) }
        }
        .ai-input-box {
            display: flex; align-items: center; gap: 10px; width: 100%;
            padding: 12px 16px; border-radius: 12px;
            background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08)
        }
        .ai-input-icon svg { width: 14px; height: 14px; color: var(--accent-primary, #f97316) }
        .ai-input-text {
            font-size: 13px; font-weight: 500; color: #f1f5f9;
            letter-spacing: -0.01em; border-right: 2px solid var(--accent-primary, #f97316);
            padding-right: 2px; animation: s5typing 4s steps(12) infinite, s5blink 0.8s step-end infinite;
            overflow: hidden; white-space: nowrap; width: 0
        }
        @keyframes s5typing { 0%, 5% { width: 0 } 35%, 70% { width: 100% } 85%, 100% { width: 100% } }
        @keyframes s5blink { 50% { border-color: transparent } }
        .ai-check {
            display: flex; align-items: center; gap: 6px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; font-weight: 600; color: #4ade80;
            opacity: 0; animation: s5checkAppear 4s ease-in-out infinite
        }
        .ai-check svg { width: 14px; height: 14px }
        @keyframes s5checkAppear { 0%, 60% { opacity: 0; transform: translateY(6px) } 70%, 90% { opacity: 1; transform: translateY(0) } 100% { opacity: 0 } }

        /* ─── Slide 6: Auto Save ─── */
        .save-demo { display: flex; flex-direction: column; align-items: center; gap: 16px }
        .save-icon-group { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center }
        .save-icon-group > svg { width: 48px; height: 48px; color: #94a3b8 }
        .save-orbit { position: absolute; width: 68px; height: 68px; animation: orbit 3s linear infinite }
        .save-orbit-dot {
            position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
            width: 16px; height: 16px; border-radius: 50%; background: #4ade80;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 10px rgba(74,222,128,0.4)
        }
        .save-orbit-dot svg { width: 10px; height: 10px; color: #000 }
        @keyframes orbit { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
        .save-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px; font-weight: 600; text-transform: uppercase;
            letter-spacing: 1.5px; color: #94a3b8;
            animation: savePulse 3s ease-in-out infinite
        }
        @keyframes savePulse { 0%, 100% { color: #94a3b8 } 50% { color: #4ade80 } }
        .save-ring {
            position: absolute; inset: -8px; border-radius: 50%;
            border: 1.5px solid rgba(74,222,128,0.15);
            animation: ringPulse 3s ease-in-out infinite
        }
        @keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: 0.3 } 50% { transform: scale(1.15); opacity: 0 } }

        /* ═══════ RESPONSIVE ═══════ */
        @media (max-width: 520px) {
            .step2-tutorial-section { border-radius: 20px }
            .step2-stage { height: 165px; margin: 14px 16px 0 }
            .step2-seq-track { padding: 14px 20px 0 }
            .step2-tutorial-header { padding: 16px 20px 0 }
            .step2-slide-text-area { padding: 12px 20px 4px; min-height: 56px }
            .step2-slide-headline { font-size: 14px }
            .step2-slide-subtitle { font-size: 12px }
            .grid-demo { gap: 8px; padding: 0 20px; max-width: 260px }
            .grid-cell { max-width: 38px }
            .grid-cursor { width: 22px; height: 22px }
            .bar-block { height: 75px }
            .bar-num { font-size: 15px }
            .pb-btn { width: 38px; height: 38px }
            .pb-btn.play { width: 46px; height: 46px }
            .shortcuts-demo { max-width: 260px }
            .shortcut-row { padding: 6px 10px }
            .sc-key { min-width: 26px; height: 24px; font-size: 9px }
            .ai-input-text { font-size: 12px }
            .ai-input-box { padding: 10px 14px }
            .save-icon-group { width: 68px; height: 68px }
            .save-icon-group > svg { width: 40px; height: 40px }
            .save-orbit { width: 58px; height: 58px }
        }
        @media (max-width: 380px) {
            .step2-stage { height: 150px; margin: 12px 12px 0 }
            .step2-tutorial-header { padding: 14px 16px 0 }
            .step2-seq-track { padding: 12px 16px 0 }
            .step2-slide-text-area { padding: 10px 16px 4px }
            .step2-slide-headline { font-size: 13px }
            .step2-slide-subtitle { font-size: 11.5px }
            .grid-demo { gap: 6px; padding: 0 12px; max-width: 220px }
            .grid-cell { max-width: 32px }
            .grid-cursor { width: 18px; height: 18px }
            .bar-block { height: 65px }
            .bar-num { font-size: 13px }
            .pb-btn.play { width: 42px; height: 42px }
            .shortcuts-demo { max-width: 230px; gap: 6px }
        }

        .step2-progress-row {
            display: flex;
            align-items: center;
            gap: 16px
        }

        .step2-spinner {
            flex-shrink: 0;
            width: 36px;
            height: 36px
        }

        .step2-spinner svg {
            width: 100%;
            height: 100%;
            color: var(--accent-primary);
            animation: step2Spin 1s linear infinite
        }

        @keyframes step2Spin {
            from {
                transform: rotate(0)
            }

            to {
                transform: rotate(360deg)
            }
        }

        .step2-progress-content {
            flex: 1
        }

        .step2-view-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 24px auto 0
        }

        .step2-view-btn svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0
        }

        .btn-lg {
            padding: 16px 32px;
            font-size: 1.1rem
        }

        .source-info {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 20px;
            background: var(--bg-secondary);
            border-radius: 14px;
            margin-bottom: 20px;
            border: 1px solid var(--border-color)
        }

        .source-icon {
            font-size: 1.5rem
        }

        .source-title {
            flex: 1;
            font-size: .95rem;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .title-edit-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 6px;
            transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
            margin-left: 8px;
            flex-shrink: 0;
            font-size: .75rem
        }

        .title-edit-btn:hover {
            background: rgba(255, 255, 255, .1);
            color: var(--accent-primary);
            border-color: var(--accent-primary)
        }

        .source-badge {
            padding: 6px 12px;
            border-radius: 8px;
            font-size: .8rem;
            font-weight: 600
        }

        .source-badge.youtube {
            background: rgba(255, 0, 0, .1);
            color: red
        }

        .source-badge.instagram {
            background: rgba(225, 48, 108, .1);
            color: #e1306c
        }

        .source-badge.file {
            background: rgba(249, 115, 22, .1);
            color: var(--accent-primary)
        }

        #osmd-container {
            background: #fff;
            border-radius: 16px;
            padding: 24px 24px 24px 12px;
            min-height: 300px;
            border: 1px solid var(--border-color);
            position: relative;
            cursor: pointer;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);
            transition: border-color .3s ease, box-shadow .3s ease
        }

        #osmd-container.regenerating {
            opacity: 0.5
        }

        /* Edit loading overlay — shown during heavy re-renders */
        .edit-loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(9, 9, 11, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease;
        }
        .edit-loading-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .edit-loading-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 28px;
            background: var(--bg-card, #1a1a2e);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-xl, 16px);
            box-shadow: 0 16px 48px rgba(0,0,0,0.4);
        }
        .edit-loading-text {
            color: var(--text-primary, #f1f5f9);
            font-size: 0.95rem;
            font-weight: 500;
            white-space: nowrap;
        }

        #osmd-container.playback-mode {
            cursor: crosshair
        }

        #osmd-container.edit-mode {
            border-color: rgba(59,130,246,0.3);
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.03), 0 0 0 3px rgba(59,130,246,0.08)
        }

        /* v1.2.0: Hide lyrics in edit mode */
        #osmd-container.edit-mode .vf-lyrics {
            display: none
        }

        .edit-mode-indicator {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #fff;
            font-size: .7rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            display: none;
            align-items: center;
            gap: 4px;
            animation: editBlink 1.5s ease-in-out infinite;
            z-index: 20
        }

        #osmd-container.edit-mode .edit-mode-indicator {
            display: flex
        }

        #osmd-container.preview-mode::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to bottom, transparent 0, #fff 80%);
            pointer-events: none
        }

        .playback-cursor {
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            background: var(--accent-primary);
            pointer-events: none;
            z-index: 10;
            will-change: transform;
            opacity: 0
        }

        .playback-cursor.visible {
            opacity: 1
        }

        .playback-cursor::before {
            content: '';
            position: absolute;
            top: 0;
            left: -4px;
            width: 10px;
            height: 10px;
            background: var(--accent-primary);
            border-radius: 50%
        }

        #osmd-container img[id^="cursorImg"] {
            width: 2.5px !important;
            border-radius: 1px !important
        }

        #osmd-container .cursor,
        #osmd-container img[class*=cursor],
        #osmd-container rect[class*=cursor] {
            fill: rgba(59, 130, 246, 0.2) !important;
            stroke: var(--accent-primary) !important;
            stroke-width: 2px !important;
            opacity: .9 !important;
            rx: 4px !important
        }

        .measure-highlight {
            fill: rgba(59, 130, 246, 0.15);
            stroke: rgba(59, 130, 246, 0.6);
            stroke-width: 2px;
            rx: 4;
            pointer-events: none;
            transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease
        }

        .measure-highlight.multi-select {
            fill: rgba(139, 92, 246, 0.15);
            stroke: rgba(139, 92, 246, 0.6)
        }

        .measure-highlight-div.copied-flash {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.35) 100%) !important;
            border-color: rgba(34, 197, 94, 0.8) !important;
            box-shadow: 0 0 16px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
            animation: copiedPulse .6s ease-out;
        }
        @keyframes copiedPulse {
            0% { transform: scale(1.06); opacity: .7 }
            50% { transform: scale(1); opacity: 1 }
            100% { transform: scale(1); opacity: 1 }
        }

        .beat-highlight {
            fill: rgba(245, 158, 11, 0.25);
            stroke: rgba(245, 158, 11, 0.8);
            stroke-width: 2px;
            rx: 2;
            pointer-events: none
        }

        #osmd-container.edit-mode {
            cursor: crosshair
        }

        #osmd-container.edit-mode:hover::before {
            content: '클릭하여 마디 선택 (Ctrl+클릭: 다중 선택)'
        }

        .selected-bar-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            background: var(--accent-primary);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: .75rem;
            font-weight: 600;
            z-index: 25
        }

        /* v16: Grid Editor */
        .grid-editor {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: min(92vw, 820px);
            background: rgba(18,18,32,0.96); backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
            z-index: 10000; display: none; flex-direction: column;
            box-shadow: 0 24px 80px rgba(0,0,0,.5); color: #e2e2e2;
            max-height: 90vh; overflow: hidden;
        }
        .grid-editor.visible { display: flex; animation: gridFadeIn .2s ease }
        @keyframes gridFadeIn { from{opacity:0;transform:translate(-50%,-50%) scale(.96)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
        .grid-editor-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:none }
        .grid-editor-backdrop.visible { display:block }
        .grid-editor-header {
            display:flex; align-items:center; gap:8px; padding:12px 16px;
            border-bottom:1px solid rgba(255,255,255,0.08);
            background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.1));
        }
        .grid-editor-title { font-weight:700; font-size:15px; white-space:nowrap }
        .grid-editor-info { font-size:12px; color:rgba(255,255,255,.5); margin-left:4px }
        .grid-editor-nav { display:flex; gap:4px; margin-left:auto }
        .grid-editor-nav button {
            width:32px; height:32px; border:1px solid rgba(255,255,255,.15); border-radius:8px;
            background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-size:14px;
            display:flex; align-items:center; justify-content:center; transition:background .15s;
        }
        .grid-editor-nav button:hover { background:rgba(255,255,255,.15) }
        .grid-editor-close {
            width:32px; height:32px; border:none; border-radius:8px;
            background:rgba(255,255,255,.06); color:#aaa; cursor:pointer; font-size:16px;
            display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s,opacity .15s;
        }
        .grid-editor-close:hover { background:rgba(239,68,68,.2); color:#ef4444 }
        .grid-editor-body { overflow-x:auto; overflow-y:auto; padding:10px 12px; flex:1 }
        .grid-table {
            display:grid; gap:1px; width:100%;
            /* columns set dynamically via JS */
        }
        .grid-header-cell {
            font-size:10px; color:rgba(255,255,255,.35); text-align:center;
            padding:2px 0; user-select:none; line-height:1;
        }
        .grid-header-cell.beat-start { color:rgba(255,255,255,.65); font-weight:700; font-size:11px }
        .grid-label {
            font-size:11px; color:rgba(255,255,255,.6); text-align:right; padding:3px 8px 3px 0;
            white-space:nowrap; display:flex; align-items:center; justify-content:flex-end;
            user-select:none; font-weight:600; letter-spacing:.5px;
        }
        .grid-cell {
            min-width:20px; min-height:26px; border:1px solid rgba(255,255,255,.06);
            border-radius:3px; cursor:pointer; transition:background .1s, box-shadow .1s;
            position:relative;
        }
        .grid-cell:hover { background:rgba(255,255,255,.1) }
        .grid-cell.beat-start { border-left:2px solid rgba(255,255,255,.2) }
        .grid-cell.active { border-color:transparent }
        .grid-cell.ghost { opacity:.45; border:1px dashed rgba(255,255,255,.3) }
        .grid-cell.accent::after {
            content:'>'; position:absolute; top:-1px; right:2px; font-size:9px;
            font-weight:900; color:#fbbf24; line-height:1;
        }
        .grid-cell.flam { box-shadow: inset 0 0 0 2px #f59e0b; }
        .grid-cell.flam::before {
            content:'F'; position:absolute; top:-2px; left:1px; font-size:8px; font-weight:800; color:#fbbf24; text-shadow:0 0 2px rgba(0,0,0,.5); pointer-events:none;
        }
        /* drum colors */
        .grid-cell[data-drum="crash"].active { background:#f59e0b }
        .grid-cell[data-drum="ride"].active { background:#d97706 }
        .grid-cell[data-drum="ride_bell"].active { background:#b45309 }
        .grid-cell[data-drum="hat_closed"].active { background:#22c55e }
        .grid-cell[data-drum="hat_open"].active { background:#16a34a }
        .grid-cell[data-drum="tom_high"].active { background:#a855f7 }
        .grid-cell[data-drum="tom_mid"].active { background:#8b5cf6 }
        .grid-cell[data-drum="snare"].active { background:#ef4444 }
        .grid-cell[data-drum="tom_floor"].active { background:#7c3aed }
        .grid-cell[data-drum="tom_low"].active { background:#6d28d9 }
        .grid-cell[data-drum="kick"].active { background:#3b82f6 }
        .grid-cell[data-drum="sidestick"].active { background:#f87171 }
        .grid-editor-toolbar {
            display:flex; flex-wrap:wrap; gap:4px; padding:8px 12px;
            border-top:1px solid rgba(255,255,255,.08);
        }
        .grid-toolbar-btn {
            padding:5px 10px; border:1px solid rgba(255,255,255,.12); border-radius:8px;
            background:rgba(255,255,255,.05); color:#ccc; cursor:pointer;
            font-size:12px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s,opacity .15s;
        }
        .grid-toolbar-btn:hover { background:rgba(255,255,255,.12); color:#fff }
        .grid-toolbar-btn.danger { color:#f87171 }
        .grid-toolbar-btn.danger:hover { background:rgba(239,68,68,.15) }
        .grid-sf-btn { padding:10px 4px;background:#2d2d44;color:#e2e8f0;border:1px solid #444;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s }
        .grid-sf-btn:hover { background:#f97316;color:#fff;border-color:#f97316 }
        .grid-mode-btn.active { background:rgba(99,102,241,.3); color:#a5b4fc; border-color:rgba(99,102,241,.5); font-weight:600 }
        .grid-mode-btn.selecting { background:rgba(251,191,36,.25); color:#fbbf24; border-color:rgba(251,191,36,.6); font-weight:600; animation:tuplet-pulse 1.2s ease-in-out infinite }
        .grid-mode-btn.selecting-6 { background:rgba(244,114,182,.25); color:#f472b6; border-color:rgba(244,114,182,.6); font-weight:600; animation:tuplet-pulse 1.2s ease-in-out infinite }
        .grid-mode-btn.selecting-8 { background:rgba(34,211,238,.25); color:#22d3ee; border-color:rgba(34,211,238,.6); font-weight:600; animation:tuplet-pulse 1.2s ease-in-out infinite }
        @keyframes tuplet-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
        .grid-header-cell.selectable { cursor:pointer; outline:2px dashed rgba(251,191,36,.6); outline-offset:-2px; transition:background .15s,color .15s,border-color .15s,outline .15s }
        .grid-header-cell.selectable:hover { background:rgba(251,191,36,.25) !important }
        .grid-header-cell.selectable-6 { cursor:pointer; outline:2px dashed rgba(244,114,182,.6); outline-offset:-2px; transition:background .15s,color .15s,border-color .15s,outline .15s }
        .grid-header-cell.selectable-6:hover { background:rgba(244,114,182,.25) !important }
        .grid-header-cell.selectable-8 { cursor:pointer; outline:2px dashed rgba(34,211,238,.6); outline-offset:-2px; transition:background .15s,color .15s,border-color .15s,outline .15s }
        .grid-header-cell.selectable-8:hover { background:rgba(34,211,238,.25) !important }
        .grid-header-cell.tuplet-3 { background:rgba(251,191,36,.12); color:#fbbf24 }
        .grid-header-cell.tuplet-6 { background:rgba(244,114,182,.12); color:#f472b6 }
        .grid-header-cell.tuplet-8 { background:rgba(34,211,238,.12); color:#22d3ee }
        .grid-cell.tuplet-3 { background:rgba(251,191,36,.04) }
        .grid-cell.tuplet-6 { background:rgba(244,114,182,.04) }
        .grid-cell.tuplet-8 { background:rgba(34,211,238,.04) }
        .grid-cell.tuplet-3.active { background:rgba(251,191,36,.35) }
        .grid-cell.tuplet-6.active { background:rgba(244,114,182,.35) }
        .grid-cell.tuplet-8.active { background:rgba(34,211,238,.35) }
        .grid-toolbar-sep { width:1px; background:rgba(255,255,255,.1); margin:0 2px }
        .grid-editor-footer {
            display:flex; justify-content:flex-end; gap:8px; padding:10px 16px;
            border-top:1px solid rgba(255,255,255,.08);
        }
        .grid-apply-btn {
            padding:8px 24px; border:none; border-radius:10px;
            background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
            font-weight:700; font-size:14px; cursor:pointer; transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s,opacity .15s;
        }
        .grid-apply-btn:hover { filter:brightness(1.15); transform:translateY(-1px) }
        .grid-apply-btn:disabled { opacity:.4; cursor:not-allowed; transform:none }
        .grid-context-menu {
            position:fixed; z-index:10001; display:none; flex-direction:column;
            background:rgba(24,24,40,.97); border:1px solid rgba(255,255,255,.12);
            border-radius:10px; padding:4px; box-shadow:0 8px 32px rgba(0,0,0,.4);
            min-width:160px; backdrop-filter:blur(12px);
        }
        .grid-context-menu.visible { display:flex }
        .grid-context-menu button {
            padding:8px 14px; border:none; background:none; color:#ddd;
            text-align:left; cursor:pointer; border-radius:6px; font-size:13px;
            transition:background .1s;
        }
        .grid-context-menu button:hover { background:rgba(255,255,255,.1) }
        .grid-context-menu hr { border:none; border-top:1px solid rgba(255,255,255,.1); margin:2px 0 }
        .grid-cell.drag { box-shadow: inset 0 0 0 2px #8b5cf6; }
        .grid-cell.drag::before { content:'D'; position:absolute; top:-2px; left:1px; font-size:8px; font-weight:800; color:#a78bfa; text-shadow:0 0 2px rgba(0,0,0,.5); pointer-events:none }
        .grid-cell.tremolo { box-shadow:inset 0 -2px 0 #fb923c }
        .grid-sticking {
            position:absolute; top:-14px; left:50%; transform:translateX(-50%);
            font-size:9px; font-weight:bold; color:#fff; pointer-events:none;
            text-shadow:0 0 3px rgba(0,0,0,.6);
        }
        @media (max-width:600px) {
            .grid-editor { width:98vw; max-height:95vh }
            .grid-cell { min-width:16px; min-height:22px }
            .grid-label { font-size:9px; padding-right:4px }
        }

        .note-hover-cursor {
            position: absolute;
            pointer-events: none;
            z-index: 9999;
            display: none
        }

        .note-hover-cursor.visible {
            display: block !important
        }

        .note-hover-cursor .cursor-line {
            position: absolute;
            width: 3px;
            height: 60px;
            background: linear-gradient(180deg, rgba(34, 197, 94, 0) 0%, rgba(34, 197, 94, .9) 30%, rgba(34, 197, 94, .9) 70%, rgba(34, 197, 94, 0) 100%);
            transform: translate(-50%, -50%);
            box-shadow: 0 0 8px rgba(34, 197, 94, .6);
            pointer-events: none
        }

        .note-hover-cursor .cursor-ring {
            position: absolute;
            width: 22px;
            height: 22px;
            border: 2.5px solid rgba(34, 197, 94, .95);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(34, 197, 94, .4) 0, rgba(34, 197, 94, .15) 100%);
            transform: translate(-50%, -50%);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, .25), 0 0 15px rgba(34, 197, 94, .6), inset 0 0 8px rgba(255, 255, 255, .4);
            animation: cursorPulse 1s ease-in-out infinite
        }

        @keyframes cursorPulse {

            0%,
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1
            }

            50% {
                transform: translate(-50%, -50%) scale(1.08);
                opacity: .9
            }
        }

        .note-hover-cursor .cursor-label {
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #065f46 0, #064e3b 100%);
            color: #ecfdf5;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .02em;
            white-space: nowrap;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .15), 0 0 12px rgba(34, 197, 94, .3);
            border: 2px solid rgba(34, 197, 94, .5);
            backdrop-filter: blur(8px)
        }

        .note-hover-cursor .cursor-label::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 6px;
            background: linear-gradient(135deg, rgba(34, 197, 94, .2) 0, transparent 50%);
            pointer-events: none
        }

        .note-hover-cursor .cursor-label::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #064e3b;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25))
        }

        .bar-edit-popup {
            position: fixed;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, .15), 0 4px 12px rgba(0, 0, 0, .1);
            padding: 0;
            z-index: 1100;
            min-width: 300px;
            max-width: 340px;
            display: none;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, .06)
        }

        .bar-edit-popup.visible {
            display: block;
            animation: barPopupFadeIn .2s ease
        }

        @keyframes barPopupFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px) scale(.98)
            }

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

        .bar-edit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
            color: #fff;
            user-select: none
        }

        .bar-edit-title-area {
            display: flex;
            align-items: center;
            gap: 8px
        }

        .bar-edit-title {
            font-weight: 600;
            font-size: .9375rem
        }

        .bar-edit-close {
            background: rgba(255, 255, 255, .2);
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            color: #fff;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .bar-edit-close:hover {
            background: rgba(255, 255, 255, .3)
        }

        .bar-edit-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0
        }

        .bar-edit-badge {
            background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
            color: #fff;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: .75rem;
            font-weight: 600
        }

        .bar-edit-note-info {
            font-size: .8125rem;
            color: #64748b
        }

        .bar-edit-note-info span {
            font-weight: 600;
            color: #334155
        }

        .bar-edit-section {
            padding: 12px 16px;
            border-bottom: 1px solid #f1f5f9
        }

        .bar-edit-label {
            font-size: .75rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .bar-edit-btn-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px
        }

        .bar-edit-btn-group.two-col {
            grid-template-columns: repeat(2, 1fr)
        }

        .bar-edit-btn {
            padding: 10px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            text-align: center;
            font-size: .8125rem;
            font-weight: 500;
            color: #334155;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px
        }

        .bar-edit-btn:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, .05);
            color: #667eea;
            transform: translateY(-1px)
        }

        .bar-edit-btn:active {
            transform: translateY(0)
        }

        .bar-edit-btn-icon {
            font-size: 1rem
        }

        .bar-edit-footer {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            background: #f8fafc
        }

        .bar-edit-action-btn {
            flex: 1;
            padding: 10px 12px;
            border-radius: 10px;
            font-size: .8125rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
            border: none
        }

        .bar-edit-action-btn.copy {
            background: #e0e7ff;
            color: #4f46e5
        }

        .bar-edit-action-btn.copy:hover {
            background: #c7d2fe
        }

        .bar-edit-action-btn.delete {
            background: #fee2e2;
            color: #dc2626
        }

        .bar-edit-action-btn.delete:hover {
            background: #fecaca
        }

        .bar-edit-action-btn.add {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff
        }

        .bar-edit-action-btn.add:hover {
            background: linear-gradient(135deg, #059669, #047857)
        }

        .bar-edit-action-btn.paste {
            background: #d1fae5;
            color: #059669
        }

        .bar-edit-action-btn.paste:hover {
            background: #a7f3d0
        }

        .song-form-btns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px
        }

        .song-form-btn {
            padding: 8px 6px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            text-align: center;
            font-size: .75rem;
            font-weight: 500;
            color: #334155;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px
        }

        .song-form-btn:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, .08);
            color: #667eea;
            transform: translateY(-1px)
        }

        .song-form-btn.custom {
            border-style: dashed
        }

        .song-form-icon {
            font-size: 1rem
        }

        .song-form-action-row {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px
        }

        .song-form-remove-btn {
            padding: 6px 10px;
            border: 1px solid #fca5a5;
            border-radius: 6px;
            background: #fef2f2;
            color: #dc2626;
            font-size: .7rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .song-form-remove-btn:hover {
            background: #fee2e2;
            border-color: #f87171
        }

        .custom-song-form-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 2000;
            align-items: center;
            justify-content: center
        }

        .custom-song-form-modal.visible {
            display: flex
        }

        .custom-song-form-content {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            width: 90%;
            max-width: 320px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
        }

        .custom-song-form-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 16px
        }

        .custom-song-form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: .9rem;
            margin-bottom: 16px
        }

        .custom-song-form-input:focus {
            outline: 0;
            border-color: #667eea
        }

        .custom-song-form-btns {
            display: flex;
            gap: 8px;
            justify-content: flex-end
        }

        .custom-song-form-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: .875rem;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .custom-song-form-btn.cancel {
            background: #f1f5f9;
            color: #64748b
        }

        .custom-song-form-btn.cancel:hover {
            background: #e2e8f0
        }

        .custom-song-form-btn.apply {
            background: #667eea;
            color: #fff
        }

        .custom-song-form-btn.apply:hover {
            background: #5a67d8
        }

        .ts-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 10100;
            align-items: center;
            justify-content: center
        }

        .ts-modal.visible {
            display: flex
        }

        .ts-modal-content {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            width: 90%;
            max-width: 360px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
        }

        .ts-modal-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .ts-modal-bar {
            font-size: .85rem;
            color: #64748b;
            margin-bottom: 16px
        }

        .ts-modal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 16px
        }

        .ts-modal-btn {
            padding: 12px 8px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            color: #334155;
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s
        }

        .ts-modal-btn:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, .05)
        }

        .ts-modal-btn.active {
            border-color: #667eea;
            background: #667eea;
            color: #fff
        }

        .ts-modal-btns {
            display: flex;
            gap: 8px;
            justify-content: flex-end
        }

        .ts-modal-cancel {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: .875rem;
            cursor: pointer;
            border: none;
            background: #f1f5f9;
            color: #64748b
        }

        .ts-modal-cancel:hover {
            background: #e2e8f0
        }

        /* ═══ TUTORIAL MODAL (Post-Analysis) v2 ═══ */
        .tutorial-modal {
            position: fixed; inset: 0;
            background: rgba(0,0,0,.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center;
            z-index: 3000;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity .35s, visibility .35s;
            padding: 20px
        }
        .tutorial-modal.visible { opacity: 1; visibility: visible; pointer-events: auto }
        .tutorial-modal.visible .modal-card { transform: translateY(0) scale(1); opacity: 1 }
        .tut-header { padding: 28px 28px 0; text-align: center }
        .tut-celebration {
            font-size: 2.5rem;
            margin-bottom: 10px;
            display: inline-block;
            animation: tutBounce .7s ease
        }
        @keyframes tutBounce {
            0% { transform: scale(0) rotate(-15deg); opacity: 0 }
            50% { transform: scale(1.2) rotate(5deg) }
            100% { transform: scale(1) rotate(0); opacity: 1 }
        }
        .tut-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; color: #fafafa }
        .tut-song-info {
            display: flex; justify-content: center; gap: 8px;
            margin-top: 12px; flex-wrap: wrap
        }
        .tut-song-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: .75rem; font-weight: 500;
            padding: 4px 10px; border-radius: 6px;
            background: #1f1f23;
            border: 1px solid rgba(255,255,255,.06);
            color: rgba(255,255,255,.55)
        }
        .tut-song-tag.bpm {
            color: #f97316;
            border-color: rgba(249,115,22,.2);
            background: rgba(249,115,22,.15)
        }
        .tut-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
            margin: 20px 28px 0
        }
        .tut-stage-wrap { padding: 20px 24px 0 }
        .tut-stage {
            height: 175px;
            background: #18181b;
            border: 1px solid rgba(255,255,255,.06);
            border-radius: 14px;
            position: relative; overflow: hidden
        }
        .tut-stage::after {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none
        }
        .tut-stage::before {
            content: '';
            position: absolute;
            bottom: -30px; left: 50%; transform: translateX(-50%);
            width: 180px; height: 80px;
            background: radial-gradient(ellipse, rgba(249,115,22,.15) 0%, transparent 70%);
            pointer-events: none
        }
        .tut-slide {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transform: scale(.95);
            transition: opacity .4s, visibility .4s, transform .4s;
            z-index: 1
        }
        .tut-slide.active { opacity: 1; visibility: visible; transform: scale(1) }
        .tut-text-area { padding: 18px 28px 0; min-height: 68px }
        .tut-text {
            opacity: 0; visibility: hidden;
            position: absolute;
            transition: opacity .35s, visibility .35s
        }
        .tut-text.active { opacity: 1; visibility: visible; position: relative }
        .tut-headline {
            font-size: .9375rem; font-weight: 700;
            letter-spacing: -.02em; margin-bottom: 5px;
            color: #fafafa;
            transition: opacity .35s .15s
        }
        .tut-headline strong { color: #f97316 }
        .tut-subtitle {
            font-size: .8125rem;
            color: rgba(255,255,255,.55);
            line-height: 1.5;
            transition: opacity .35s .25s
        }
        .tut-progress { display: flex; gap: 4px; padding: 18px 28px 0 }
        .tut-seg {
            flex: 1; height: 6px;
            background: rgba(255,255,255,.08);
            border-radius: 3px;
            cursor: pointer;
            position: relative; overflow: hidden;
            transition: background .3s
        }
        .tut-seg:hover { background: rgba(255,255,255,.12) }
        .tut-seg.active { background: rgba(255,255,255,.08) }
        .tut-seg.done { background: #f97316; box-shadow: 0 0 6px rgba(249,115,22,.25) }
        .tut-seg-fill {
            position: absolute; left: 0; top: 0; bottom: 0;
            width: 0; background: #f97316; border-radius: 3px
        }
        .tut-seg.active .tut-seg-fill { animation: segFill 6s linear forwards }
        @keyframes segFill { to { width: 100% } }
        .tut-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding: 18px 24px 22px
        }
        .tut-next-btn {
            font-family: 'Outfit', sans-serif;
            font-size: .875rem; font-weight: 600;
            padding: 10px 24px; border-radius: 10px;
            border: none; background: #f97316; color: #fff;
            cursor: pointer; transition: all .25s;
            box-shadow: 0 4px 16px rgba(249,115,22,.25);
            display: flex; align-items: center; gap: 6px
        }
        .tut-next-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(249,115,22,.35) }

        /* Slide 0: Celebration */
        .s0-sparkles { position: absolute; inset: 0; overflow: hidden }
        .s0-sparkle {
            position: absolute; width: 4px; height: 4px; border-radius: 50%;
            background: #f97316; opacity: 0;
            animation: sparkleFloat 2.5s ease-in-out infinite
        }
        @keyframes sparkleFloat {
            0% { opacity: 0; transform: translateY(0) scale(0) }
            20% { opacity: 1; transform: translateY(-15px) scale(1) }
            100% { opacity: 0; transform: translateY(-80px) scale(0) }
        }
        .s0-check-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2 }
        .s0-check {
            width: 56px; height: 56px; border-radius: 50%;
            background: linear-gradient(135deg, #f97316, #ea580c);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 30px rgba(249,115,22,.3);
            animation: s0Pop .6s ease .2s both
        }
        @keyframes s0Pop { 0% { transform: scale(0) } 60% { transform: scale(1.15) } 100% { transform: scale(1) } }
        .s0-check svg { width: 28px; height: 28px; color: #fff }
        .s0-ready {
            font-size: .8125rem; color: rgba(255,255,255,.55); font-weight: 500;
            animation: s0FadeUp .5s ease .5s both
        }
        @keyframes s0FadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

        /* Slide 1: Click Edit */
        .s1-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 6px; padding: 16px 20px;
            z-index: 2; width: 100%; height: 100%;
            position: absolute; inset: 0
        }
        .s1-cell {
            background: rgba(255,255,255,.07);
            border: 1.5px solid rgba(255,255,255,.18);
            border-radius: 6px;
            position: relative; transition: all .3s; min-height: 0
        }
        .s1-cell.lit {
            background: rgba(249,115,22,.22);
            border-color: rgba(249,115,22,.55);
            box-shadow: 0 0 18px rgba(249,115,22,.3), inset 0 0 10px rgba(249,115,22,.15)
        }
        .s1-cell.lit::after {
            content: ''; position: absolute; inset: 20%;
            background: #f97316; border-radius: 50%;
            animation: s1Pulse 1.5s ease infinite
        }
        @keyframes s1Pulse { 0%,100% { opacity: .6; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.15) } }
        .s1-tap {
            position: absolute; width: 36px; height: 36px;
            z-index: 3; border-radius: 50%; pointer-events: none;
            animation: s1TapMove 3.5s ease-in-out infinite
        }
        .s1-tap::before {
            content: ''; position: absolute; inset: 0;
            border-radius: 50%; background: rgba(249,115,22,.35);
            animation: s1TapPulse 3.5s ease-in-out infinite
        }
        .s1-tap::after {
            content: ''; position: absolute; inset: -8px;
            border-radius: 50%; border: 2px solid rgba(249,115,22,.3);
            animation: s1TapRing 3.5s ease-in-out infinite
        }
        @keyframes s1TapMove {
            0%,15% { top: 14%; left: 8% } 20%,40% { top: 14%; left: 42% }
            45%,65% { top: 55%; left: 68% } 70%,90% { top: 55%; left: 30% }
            95%,100% { top: 14%; left: 8% }
        }
        @keyframes s1TapPulse {
            0%,15%,45%,70%,95% { transform: scale(.5); opacity: 0 }
            20%,50%,75% { transform: scale(1); opacity: 1 }
            25%,55%,80% { transform: scale(.7); opacity: .6 }
        }
        @keyframes s1TapRing {
            0%,15%,45%,70%,95% { transform: scale(.3); opacity: 0 }
            22%,52%,77% { transform: scale(1.3); opacity: .5 }
            30%,60%,85% { transform: scale(1.6); opacity: 0 }
        }

        /* Slide 2: AI Edit */
        .s2-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; padding: 20px }
        .s2-sparkle-icon { width: 36px; height: 36px; color: #f97316; animation: s2Rotate 4s linear infinite }
        @keyframes s2Rotate { 0%,100% { transform: rotate(0) } 25% { transform: rotate(10deg) scale(1.1) } 75% { transform: rotate(-10deg) scale(.95) } }
        .s2-bubble {
            background: #1f1f23; border: 1px solid rgba(255,255,255,.06);
            border-radius: 12px; padding: 12px 18px;
            font-family: 'JetBrains Mono', monospace; font-size: .8125rem;
            color: rgba(255,255,255,.55); position: relative;
            max-width: 260px; overflow: hidden
        }
        .s2-bubble::before {
            content: ''; position: absolute;
            top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
            width: 10px; height: 10px; background: #1f1f23;
            border-left: 1px solid rgba(255,255,255,.06); border-top: 1px solid rgba(255,255,255,.06)
        }
        .s2-typing { display: inline; border-right: 2px solid #f97316; animation: s2Blink .8s step-end infinite; padding-right: 2px }
        @keyframes s2Blink { 50% { border-color: transparent } }
        .s2-typed-text {
            display: inline; overflow: hidden; white-space: nowrap;
            animation: s2Type 3s steps(14) infinite; max-width: 0
        }
        @keyframes s2Type { 0%,10% { max-width: 0 } 60%,100% { max-width: 200px } }
        .s2-check-badge {
            display: flex; align-items: center; gap: 6px;
            font-size: .75rem; font-weight: 600; color: #22c55e;
            opacity: 0; animation: s2CheckIn 3s ease infinite
        }
        @keyframes s2CheckIn { 0%,65% { opacity: 0; transform: translateY(5px) } 75%,95% { opacity: 1; transform: translateY(0) } 100% { opacity: 0 } }
        .s2-check-badge svg { width: 14px; height: 14px }

        /* Slide 3: Shortcuts */
        .s3-keys { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 20px; z-index: 2 }
        .s3-key-group { display: flex; flex-direction: column; align-items: center; gap: 6px }
        .s3-key-row { display: flex; gap: 3px; align-items: center }
        .s3-keycap {
            font-family: 'JetBrains Mono', monospace; font-size: .6875rem; font-weight: 600;
            padding: 6px 10px;
            background: linear-gradient(180deg, #1f1f23 0%, #18181b 100%);
            border: 1px solid rgba(255,255,255,.1); border-bottom-width: 3px;
            border-radius: 6px; color: #fafafa; min-width: 32px; text-align: center;
            transition: all .15s
        }
        .s3-keycap.accent {
            border-color: rgba(249,115,22,.25);
            background: linear-gradient(180deg, rgba(249,115,22,.1) 0%, rgba(249,115,22,.05) 100%);
            color: #f97316
        }
        .s3-plus { font-size: .625rem; color: rgba(255,255,255,.35) }
        .s3-key-label { font-size: .6875rem; color: rgba(255,255,255,.35); font-weight: 500 }
        .s3-key-group:nth-child(1) .s3-keycap { animation: s3Press 4s ease 0s infinite }
        .s3-key-group:nth-child(2) .s3-keycap { animation: s3Press 4s ease .8s infinite }
        .s3-key-group:nth-child(3) .s3-keycap { animation: s3Press 4s ease 1.6s infinite }
        .s3-key-group:nth-child(4) .s3-keycap { animation: s3Press 4s ease 2.4s infinite }
        @keyframes s3Press {
            0%,8% { transform: translateY(0); border-bottom-width: 3px }
            10% { transform: translateY(2px); border-bottom-width: 1px; box-shadow: 0 0 12px rgba(249,115,22,.15) }
            18%,100% { transform: translateY(0); border-bottom-width: 3px; box-shadow: none }
        }

        /* Slide 4: Save & Export */
        .s4-wrap { display: flex; align-items: center; justify-content: center; gap: 40px; z-index: 2; padding: 20px }
        .s4-icon-group { display: flex; flex-direction: column; align-items: center; gap: 10px }
        .s4-icon-circle {
            width: 52px; height: 52px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center; position: relative
        }
        .s4-icon-circle.save { background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.2) }
        .s4-icon-circle.save svg { width: 24px; height: 24px; color: #f97316 }
        .s4-icon-circle.export { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.15) }
        .s4-icon-circle.export svg { width: 24px; height: 24px; color: #22c55e }
        .s4-icon-label { font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.35) }
        .s4-orbit {
            position: absolute; inset: -8px;
            border: 1.5px dashed rgba(249,115,22,.2); border-radius: 18px;
            animation: s4Spin 8s linear infinite
        }
        @keyframes s4Spin { to { transform: rotate(360deg) } }
        .s4-orbit-dot {
            position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
            width: 6px; height: 6px; background: #f97316; border-radius: 50%
        }
        .s4-icon-circle.export::after {
            content: ''; position: absolute; inset: -4px;
            border: 1.5px solid rgba(34,197,94,.15); border-radius: 18px;
            animation: s4ExportPulse 2s ease infinite
        }
        @keyframes s4ExportPulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.08); opacity: .5 } }
        .s4-connector {
            width: 40px; height: 2px;
            background: linear-gradient(90deg, #f97316, #22c55e);
            border-radius: 1px; position: relative; opacity: .3
        }
        .s4-connector::after {
            content: ''; position: absolute; right: -3px; top: -3px;
            width: 0; height: 0;
            border-top: 4px solid transparent; border-bottom: 4px solid transparent;
            border-left: 6px solid #22c55e
        }

        /* v12: Mode Select Modal - enhanced cards */
        #mode-select-modal .modal {
            background: linear-gradient(145deg, #1a1735 0%, #0f0f23 100%);
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff
        }

        #mode-select-modal .modal-close {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.6)
        }

        #mode-select-modal .modal-close:hover {
            background: rgba(255,255,255,0.15);
            border-color: var(--accent-primary);
            color: var(--accent-primary)
        }

        .mode-select-cards {
            display: flex;
            gap: 14px;
        }

        .mode-card {
            flex: 1;
            position: relative;
            background: rgba(30, 27, 75, 0.5);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 18px;
            padding: 24px 14px 20px;
            cursor: pointer;
            transition: border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: center;
            color: inherit;
            overflow: hidden;
            font-family: inherit;
        }

        .mode-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 18px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .mode-card.beginner::before {
            background: radial-gradient(ellipse at 50% 80%, rgba(34,197,94,0.15) 0%, transparent 70%);
        }

        .mode-card.advanced::before {
            background: radial-gradient(ellipse at 50% 80%, rgba(249,115,22,0.15) 0%, transparent 70%);
        }

        .mode-card:hover::before {
            opacity: 1;
        }

        .mode-card.beginner:hover {
            border-color: rgba(34,197,94,0.5);
            box-shadow: 0 0 24px rgba(34,197,94,0.15), 0 8px 32px rgba(0,0,0,0.2);
            transform: translateY(-3px);
        }

        .mode-card.advanced:hover {
            border-color: rgba(249,115,22,0.5);
            box-shadow: 0 0 24px rgba(249,115,22,0.15), 0 8px 32px rgba(0,0,0,0.2);
            transform: translateY(-3px);
        }

        .mode-card-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 12px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mode-card.beginner .mode-card-icon {
            background: rgba(34,197,94,0.12);
        }

        .mode-card.advanced .mode-card-icon {
            background: rgba(249,115,22,0.12);
        }

        .mode-card-title {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 6px;
        }

        .mode-card-desc {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.55);
            line-height: 1.4;
            margin-bottom: 12px;
        }

        .mode-card-dots {
            display: flex;
            gap: 6px;
            justify-content: center;
            align-items: center;
        }

        .mode-card-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            opacity: 0.35;
        }

        .mode-card-dot.active {
            opacity: 1;
        }

        .mode-card.beginner .mode-card-dot { background: #22c55e; }
        .mode-card.advanced .mode-card-dot { background: #f97316; }

        .mode-ambient {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            border-radius: var(--radius-2xl);
        }

        .mode-ambient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.08;
            animation: modeOrbFloat 8s ease-in-out infinite;
        }

        .mode-ambient-orb:nth-child(1) {
            width: 120px; height: 120px;
            background: #22c55e;
            top: -30px; left: -20px;
        }

        .mode-ambient-orb:nth-child(2) {
            width: 100px; height: 100px;
            background: #f97316;
            bottom: -20px; right: -20px;
            animation-delay: -4s;
        }

        @keyframes modeOrbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(10px, -10px) scale(1.1); }
        }

        /* Tutorial modal mobile */
        @media (max-width: 480px) {
            .tut-header { padding: 22px 20px 0 }
            .tut-title { font-size: 1.25rem }
            .tut-stage { height: 155px }
            .tut-text-area { padding: 14px 20px 0 }
            .tut-headline { font-size: .875rem }
            .tut-subtitle { font-size: .8125rem }
            .tut-progress { padding: 14px 20px 0 }
            .tut-footer { padding: 14px 18px 18px }
            .tut-divider { margin: 16px 20px 0 }
            .s1-grid { padding: 14px 14px; gap: 4px }
            .s3-keys { gap: 8px; padding: 16px }
            .s3-keycap { padding: 5px 8px; font-size: .625rem; min-width: 28px }
            .s4-wrap { gap: 24px }
            .notice-hdr { padding: 22px 20px 18px }
            .notice-hdr h2 { font-size: 1.125rem }
            .notice-body { padding: 4px 18px 8px }
            .notice-row { gap: 12px; padding: 11px 0 }
            .notice-txt { font-size: .8125rem }
            .notice-agree { margin: 0 18px; padding: 12px 14px }
            .notice-footer { padding: 14px 18px 18px }
            .modal-card { border-radius: 16px }
        }

        #osmd-container:hover::before {
            content: '클릭하여 재생 위치 이동';
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: .75rem;
            z-index: 20;
            opacity: 0;
            transition: opacity .2s
        }

        #osmd-container.playback-ready:hover::before {
            opacity: 1
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 12px;
            margin-top: 24px
        }

        .stat-item {
            background: var(--bg-secondary);
            padding: 18px 16px;
            border-radius: 14px;
            text-align: center;
            border: 1px solid var(--border-color)
        }

        .stat-value {
            font-family: 'Space Mono', monospace;
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .stat-label {
            font-size: .75rem;
            color: var(--text-muted);
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: .05em
        }

        .btn-row {
            display: flex;
            gap: 14px;
            margin-top: 32px;
            justify-content: space-between;
            flex-wrap: wrap
        }

        .btn-row.center {
            justify-content: center
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 32px;
            border-radius: var(--radius-lg);
            font-family: inherit;
            font-size: .95rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
            border: none;
            position: relative;
            overflow: hidden
        }

        .btn svg {
            width: 20px;
            height: 20px;
            position: relative;
            z-index: 1;
            transition: transform .3s ease
        }

        .btn:hover:not(:disabled) svg {
            transform: rotate(5deg) scale(1.1)
        }

        .btn-primary {
            background: var(--text-primary);
            color: #fff;
            box-shadow: var(--shadow-md)
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent-gradient);
            z-index: 1
        }

        .btn-primary:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl)
        }

        .btn-primary:active:not(:disabled) {
            transform: translateY(0) scale(0.98);
            transition-duration: .1s
        }

        .btn-primary:disabled {
            opacity: .4;
            cursor: not-allowed;
            transform: none
        }

        .btn-secondary {
            background: var(--bg-card);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-xs)
        }

        .btn-secondary:hover:not(:disabled) {
            background: rgba(249, 115, 22, 0.08);
            border-color: var(--accent-secondary);
            color: var(--accent-primary);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px)
        }

        .btn-secondary:active:not(:disabled) {
            transform: translateY(0)
        }

        .btn-brand {
            color: var(--accent-primary);
            background: #fff;
            border: 1.5px solid var(--accent-primary);
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.08)
        }

        .btn-brand:hover:not(:disabled) {
            background: rgba(249, 115, 22, 0.04);
            box-shadow: 0 4px 24px rgba(249, 115, 22, 0.2);
            transform: translateY(-2px)
        }

        #btn-credit-1:hover {
            filter: brightness(1.15);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3)
        }

        .btn-with-sub {
            flex-direction: column;
            padding: 14px 28px;
            gap: 3px
        }

        .btn-with-sub .btn-content {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .btn-sub-text {
            font-size: .7rem;
            font-weight: 500;
            opacity: .8
        }

        .status-bar {
            margin-top: 28px;
            padding: 24px 28px;
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            display: none;
            box-shadow: var(--shadow-sm)
        }

        .status-bar.visible {
            display: block;
            animation: fadeIn .3s ease
        }

        .status-content {
            display: flex;
            align-items: center;
            gap: 18px
        }

        .spinner {
            width: 26px;
            height: 26px;
            border: 3px solid var(--bg-tertiary);
            border-top-color: var(--accent-primary);
            border-radius: var(--radius-full);
            animation: spin .7s linear infinite
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .status-text {
            flex: 1;
            font-size: .95rem;
            color: var(--text-secondary);
            font-weight: 500
        }

        .status-percent {
            font-family: 'Space Mono', monospace;
            font-size: 1.2rem;
            font-weight: 700;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            min-width: 55px;
            text-align: right
        }

        .progress-bar {
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: var(--radius-full);
            margin-top: 18px;
            overflow: hidden
        }

        .progress-fill {
            height: 100%;
            background: var(--accent-gradient);
            border-radius: var(--radius-full);
            transition: width .5s cubic-bezier(.4, 0, .2, 1);
            position: relative
        }

        .progress-fill::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .4) 50%, transparent 100%);
            animation: shimmer 1.5s infinite
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%)
            }

            100% {
                transform: translateX(100%)
            }
        }

        @keyframes heroFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg) }
            33% { transform: translate(20px, -10px) rotate(1deg) }
            66% { transform: translate(-10px, 15px) rotate(-1deg) }
        }

        @keyframes stepPulse {
            0%, 100% { box-shadow: 0 4px 16px var(--accent-glow), var(--shadow-md), 0 0 0 0 rgba(249,115,22,0.2) }
            50% { box-shadow: 0 4px 16px var(--accent-glow), var(--shadow-md), 0 0 0 8px rgba(249,115,22,0) }
        }

        @keyframes stepGlow {
            0%, 100% { box-shadow: 0 4px 16px var(--accent-glow) }
            50% { box-shadow: 0 4px 28px var(--accent-glow-strong) }
        }

        @keyframes lineProgress {
            0% { transform: scaleX(0); transform-origin: left }
            50% { transform: scaleX(1); transform-origin: left }
            51% { transform: scaleX(1); transform-origin: right }
            100% { transform: scaleX(0); transform-origin: right }
        }

        @keyframes barShimmer {
            0% { transform: translateX(-50%) }
            100% { transform: translateX(50%) }
        }

        @keyframes iconFloat {
            0%, 100% { transform: translateY(0) }
            50% { transform: translateY(-6px) }
        }

        @keyframes skeletonWave {
            0% { background-position: 200% 0 }
            100% { background-position: -200% 0 }
        }

        @keyframes timerShrink {
            from { width: 100% }
            to { width: 0% }
        }

        @keyframes rotateBorder {
            to { transform: rotate(360deg) }
        }

        @keyframes bpmPulseGlow {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5 }
            50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1 }
        }

        @keyframes editBlink {
            0%, 100% { opacity: 1 }
            50% { opacity: 0.7 }
        }

        .status-bar.error {
            background: var(--error-bg);
            border-color: rgba(239, 68, 68, .3)
        }

        .status-bar.error .status-text {
            color: var(--error)
        }

        .toast-container {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 1100;
            transition: bottom .3s ease
        }

        body.player-visible .toast-container {
            bottom: 92px
        }

        .toast {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 18px 24px 14px;
            margin-top: 14px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02);
            animation: toastSlideIn .5s cubic-bezier(.34, 1.56, .64, 1);
            position: relative;
            overflow: hidden
        }

        .toast::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent-primary);
            animation: timerShrink 3s linear forwards
        }

        .toast.success::after {
            background: var(--success)
        }

        .toast.error::after {
            background: var(--error)
        }

        .toast.warning::after {
            background: var(--warning)
        }

        @keyframes toastSlideIn {
            from {
                transform: translateX(120%) scale(.9);
                opacity: 0
            }

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

        .toast.success {
            border-left: 4px solid var(--success)
        }

        .toast.error {
            border-left: 4px solid var(--error)
        }

        .toast.warning {
            border-left: 4px solid var(--warning)
        }

        #file-input {
            display: none
        }

        @media print {
            @page {
                size: A4 portrait;
                margin: 15mm
            }

            html { -webkit-print-color-adjust: exact; print-color-adjust: exact }
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important }

            body, html {
                margin: 0 !important; padding: 0 !important;
                background: #fff !important; width: 100% !important; height: auto !important
            }

            /* Hide all screen UI */
            body > *:not(#osmd-print-container):not(#vf-print-container) { display: none !important }

            /* Show print container only when ready */
            body.print-ready #osmd-print-container,
            body.print-ready #vf-print-container {
                display: block !important;
                position: static !important;
                left: auto !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important
            }

            /* Page units */
            .print-page {
                page-break-after: always;
                break-after: page;
                width: 100%;
                box-sizing: border-box
            }
            .print-page:last-child {
                page-break-after: auto;
                break-after: auto
            }

            /* SVG per page */
            .print-page svg {
                max-width: 100% !important;
                height: auto !important;
                display: block !important;
                overflow: hidden !important
            }

            /* Print header (page 2+) */
            .print-page-header {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                padding-bottom: 3mm;
                margin-bottom: 2mm;
                border-bottom: 0.3pt solid #ccc;
                font-family: 'Outfit', sans-serif
            }
            .print-header-title { font-size: 10pt; font-weight: 600; color: #333 }
            .print-header-meta { font-size: 8pt; color: #888 }

            /* Print footer (all pages) */
            .print-page-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: 2mm;
                margin-top: 3mm;
                font-family: 'Outfit', sans-serif
            }
            .print-footer-brand { font-size: 7pt; color: #aaa }
            .print-footer-page { font-size: 8pt; color: #666 }

            /* Print watermark (page 1 only) */
            .print-watermark {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 3mm
            }
            .print-watermark img { width: 24px; height: 24px; border-radius: 4px }
            .print-watermark-text { font-family: 'Outfit', sans-serif; font-size: 9pt; font-weight: 600; color: #555 }
            .print-watermark-sub { font-family: 'Outfit', sans-serif; font-size: 7pt; color: #999; display: block }
        }

        @media (max-width:768px) {
            .container {
                padding: 20px
            }

            .logo {
                width: 280px
            }

            .card-header {
                padding: 20px 24px
            }

            .card-body {
                padding: 24px
            }

            .header-bar {
                padding: 0 20px;
                height: 68px
            }

            .header-logo-img {
                height: 36px
            }
        }

        @media (max-width:640px) {
            body {
                padding-top: 48px
            }

            .container {
                padding: 16px
            }

            header {
                padding: 32px 0 24px
            }

            .logo {
                width: 220px
            }

            .brand-tagline {
                font-size: 1.1rem
            }

            .brand-subtitle {
                font-size: .9rem
            }

            .card-body {
                padding: 8px
            }

            .btn-row {
                flex-direction: column;
                gap: 12px
            }

            .btn {
                width: 100%;
                padding: 14px 24px
            }

            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px
            }

            .stat-item {
                padding: 14px 10px
            }

            .stat-value {
                font-size: 1.25rem
            }

            .header-bar {
                padding: 0 12px;
                height: 48px
            }

            .header-logo-img {
                height: 26px
            }

            .header-right {
                gap: 4px
            }

            .lang-selector {
                padding: 5px 22px 5px 8px;
                font-size: .7rem;
                background-position: right 5px center
            }

            .header-btn span {
                display: none
            }

            .header-btn {
                padding: 7px
            }

            .header-btn svg {
                width: 16px;
                height: 16px
            }

            .header-divider {
                height: 20px;
                margin: 0 2px
            }

            .profile-info {
                display: none
            }

            .profile-trigger {
                padding: 4px 8px 4px 4px
            }

            .profile-trigger .avatar {
                width: 28px;
                height: 28px
            }

            .guest-login-btn {
                padding: 7px 12px;
                font-size: .75rem
            }

            .guest-login-btn svg {
                width: 15px;
                height: 15px
            }

            .guest-login-btn span {
                display: none
            }

            .footer-links {
                gap: 16px;
                flex-direction: column;
                align-items: center
            }

            .plans-grid {
                grid-template-columns: 1fr
            }

            .input-tabs {
                flex-direction: column;
                gap: 4px
            }

            .input-tab {
                padding: 12px 16px
            }

            .card-header h2 {
                font-size: 1rem
            }

            .dropdown-menu {
                width: calc(100vw - 32px);
                right: -8px
            }
        }

        @media (max-width:480px) {
            body {
                padding-top: 44px
            }

            .logo {
                width: 200px
            }

            .step-circle {
                width: 42px;
                height: 42px;
                font-size: .95rem
            }

            .step-label {
                font-size: .75rem
            }

            .upload-zone {
                padding: 40px 20px
            }

            .upload-icon {
                width: 64px;
                height: 64px
            }

            .upload-icon svg {
                width: 28px;
                height: 28px
            }
        }

        @media (max-width:768px) {
            .control-bars-container {
                gap: 8px
            }

            .audio-bar,
            .metronome-bar,
            .playback-bar {
                flex-wrap: wrap;
                padding: 10px 12px;
                gap: 8px
            }

            .audio-bar-title,
            .metronome-bar-title,
            .playback-bar-title {
                font-size: .8rem;
                min-width: 70px
            }

            .playback-controls {
                gap: 4px
            }

            .ctrl-btn {
                width: 36px;
                height: 36px
            }

            .tempo-control button {
                width: 28px;
                height: 28px;
                font-size: .9rem
            }

            .tempo-display {
                font-size: .85rem;
                min-width: 70px
            }

            .progress-bar-wrapper {
                flex: 1;
                min-width: 100px
            }

            .metronome-beats {
                gap: 4px
            }

            .metronome-beat-dot {
                width: 10px;
                height: 10px
            }

            .metronome-settings {
                display: none
            }

            #score-scroll-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch
            }

            #osmd-container {
                padding: 12px;
                border-radius: 12px
            }

            #osmd-container svg {
                max-width: none !important
            }

            .modal-overlay .modal {
                width: 95vw;
                max-width: 95vw;
                margin: 10px;
                max-height: 90vh
            }

            .modal-body {
                padding: 16px
            }

            .modal-header {
                padding: 16px
            }

            .modal-header h2 {
                font-size: 1.1rem
            }

            .form-input,
            .form-select {
                padding: 14px 16px;
                font-size: 16px
            }

            .form-btn {
                padding: 14px 20px;
                font-size: 1rem
            }

            .auth-tabs {
                gap: 4px
            }

            .auth-tab {
                padding: 10px 16px;
                font-size: .9rem
            }

            .bar-edit-modal,
            .beat-edit-wizard {
                width: 95vw !important;
                max-width: 360px
            }

            .bar-edit-popup {
                min-width: auto;
                max-width: calc(100vw - 24px);
                left: 12px !important;
                right: 12px !important
            }

            .mode-select-cards {
                flex-direction: column
            }

            .shortcut-help-btn {
                display: none !important
            }

            .youtube-results-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px
            }

            .youtube-result-title {
                font-size: .8rem
            }

            .fill-panel {
                width: calc(100vw - 24px);
                right: 12px;
                left: 12px
            }

            #mode-select-modal .modal {
                max-width: 95vw;
                padding: 24px 20px 20px
            }

            .mode-option {
                padding: 16px
            }

            input[type="number"],
            input[type="text"],
            input[type="email"],
            input[type="password"],
            input[type="tel"],
            textarea,
            select {
                font-size: 16px !important
            }
        }
        /* Phone (≤640px): 2 bars/line, fit to screen width (no horizontal scroll) */

        @media (max-width:480px) {
            .header-bar {
                height: 44px;
                padding: 0 10px
            }

            .header-logo-img {
                height: 22px
            }

            .header-right {
                gap: 2px
            }

            .lang-selector {
                padding: 3px 15px 3px 5px;
                font-size: .55rem;
                background-position: right 2px center;
                background-size: 10px
            }

            .header-btn {
                padding: 7px
            }

            .header-btn svg {
                width: 18px;
                height: 18px
            }

            .guest-login-btn {
                padding: 5px 10px
            }

            .guest-login-btn svg {
                width: 14px;
                height: 14px
            }

            .audio-bar,
            .metronome-bar,
            .playback-bar {
                padding: 8px 10px
            }

            .audio-bar-title,
            .metronome-bar-title,
            .playback-bar-title {
                display: none
            }

            .ctrl-btn {
                width: 32px;
                height: 32px
            }

            .tempo-control button {
                width: 26px;
                height: 26px
            }

            .metronome-bar-info,
            .playback-bar-info {
                font-size: .7rem
            }

            #osmd-container {
                padding: 8px;
                -webkit-overflow-scrolling: touch
            }

            /* Default: center modal (short modals) */
            .modal-overlay {
                padding: 16px;
                padding-bottom: calc(16px + var(--sab, 0px));
                align-items: center
            }

            .modal-overlay .modal {
                width: calc(100vw - 32px);
                max-width: calc(100vw - 32px);
                margin: 0;
                border-radius: var(--radius-2xl);
                max-height: calc(85vh - var(--sab, 0px))
            }

            /* Bottom-sheet style for long/scrollable modals */
            .modal-overlay.bottom-sheet {
                padding: 0;
                padding-bottom: var(--sab, 0px);
                align-items: flex-end
            }

            .modal-overlay.bottom-sheet .modal {
                width: 100vw;
                max-width: 100vw;
                border-radius: 16px 16px 0 0
            }

            #mode-select-modal .modal {
                padding: 20px 16px 16px
            }

            .fill-panel {
                width: 100vw;
                right: 0;
                left: 0;
                border-radius: 0;
                top: 56px;
                max-height: calc(100vh - 56px)
            }

            .youtube-results-grid {
                grid-template-columns: 1fr
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .fill-wizard-step {
                padding: 12px
            }

            .fill-duration-btn,
            .fill-rhythm-btn {
                padding: 10px;
                min-width: 60px
            }

            /* legacy tutorial-modal-content removed (v2 uses .modal-card) */
        }

        @media (hover:none) and (pointer:coarse) {

            .btn,
            .ctrl-btn,
            .form-btn,
            button {
                min-height: 44px
            }

            .dropdown-item {
                padding: 14px 16px
            }

            .plan-card {
                padding: 20px
            }

            .auth-tab {
                min-height: 44px
            }

            .clickable,
            a {
                min-height: 44px;
                display: inline-flex;
                align-items: center
            }
        }

        .shortcut-help-btn {
            position: fixed;
            bottom: 84px;
            left: 20px;
            padding: 10px 16px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            border: none;
            font-size: .85rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(99, 102, 241, .4);
            z-index: 9999;
            transition: transform .2s, box-shadow .2s, opacity .2s;
            display: none;
            align-items: center;
            gap: 6px
        }

        .shortcut-help-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(99, 102, 241, .5)
        }

        .shortcut-help-panel {
            display: none;
            position: fixed;
            bottom: 70px;
            left: 20px;
            width: 320px;
            max-height: 400px;
            overflow-y: auto;
            background: rgba(30, 30, 40, .95);
            border: 1px solid rgba(255, 255, 255, .15);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
            z-index: 9998;
            backdrop-filter: blur(10px)
        }

        .shortcut-help-panel::-webkit-scrollbar {
            width: 6px
        }

        .shortcut-help-panel::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .05);
            border-radius: 3px
        }

        .shortcut-help-panel::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .2);
            border-radius: 3px
        }

        .shortcut-help-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, .3)
        }

        .shortcut-help-panel.visible {
            display: block;
            animation: fadeIn .2s ease
        }

        .shortcut-help-title {
            font-size: .95rem;
            font-weight: 600;
            color: #a5b4fc;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, .1)
        }

        .shortcut-section {
            margin-bottom: 12px
        }

        .shortcut-section-title {
            font-size: .75rem;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: 6px
        }

        .shortcut-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            font-size: .85rem
        }

        .shortcut-key {
            background: rgba(255, 255, 255, .1);
            padding: 3px 8px;
            border-radius: 4px;
            font-family: Consolas, Monaco, monospace;
            font-size: .8rem;
            color: #fbbf24;
            white-space: nowrap
        }

        .shortcut-desc {
            color: rgba(255, 255, 255, .85);
            flex: 1;
            margin-right: 10px
        }

        .score-watermark {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
            display: none;
            align-items: center;
            gap: 8px;
            opacity: .7;
            pointer-events: none
        }

        .score-watermark.visible {
            display: flex
        }

        .score-watermark img {
            width: 32px;
            height: 32px;
            border-radius: 6px
        }

        .score-watermark-text {
            font-size: 11px;
            color: #666;
            font-weight: 500
        }

        .score-watermark-sub {
            font-size: 9px;
            color: #999;
            display: block
        }

        /* v18: Slide 5 - AI Edit */
        .s5-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px }
        .s5-sparkle { animation: s5Spin 3s linear infinite; color: var(--accent-primary, #f97316); filter: drop-shadow(0 0 8px rgba(249,115,22,0.3)) }
        @keyframes s5Spin {
            0% { transform: rotate(0deg) scale(1) }
            50% { transform: rotate(180deg) scale(1.1) }
            100% { transform: rotate(360deg) scale(1) }
        }
        .s5-input {
            display: flex; align-items: center; gap: 8px;
            background: rgba(249,115,22,0.06); border: 1.5px solid rgba(249,115,22,0.2);
            border-radius: 24px; padding: 8px 16px; min-width: 240px; height: 38px;
            position: relative; overflow: hidden
        }
        .s5-input svg { flex-shrink: 0; color: var(--accent-primary, #f97316); opacity: 0.6 }
        .s5-typing {
            font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.85);
            white-space: nowrap; overflow: hidden; width: 0;
            border-right: 2px solid var(--accent-primary, #f97316);
            animation: s5Type 3s steps(14) 0.5s forwards, s5Blink 0.5s step-end infinite
        }
        @keyframes s5Type {
            0% { width: 0 }
            70% { width: 160px; border-right-color: var(--accent-primary, #f97316) }
            100% { width: 160px; border-right-color: transparent }
        }
        @keyframes s5Blink { 50% { border-right-color: transparent } }
        .s5-check {
            display: flex; align-items: center; gap: 5px;
            color: #22c55e; font-size: 0.75rem; font-weight: 700;
            opacity: 0; animation: s5CheckIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.5s forwards
        }
        @keyframes s5CheckIn {
            from { opacity: 0; transform: translateY(6px) scale(0.8) }
            to { opacity: 1; transform: translateY(0) scale(1) }
        }

        /* v18: Slide 6 - Auto Save */
        .s6-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px }
        .s6-icon-group { position: relative; width: 64px; height: 64px }
        .s6-icon-group svg { width: 100%; height: 100%; color: #22c55e; filter: drop-shadow(0 0 12px rgba(34,197,94,0.3)) }
        .s6-orbit {
            position: absolute; top: -4px; right: -8px; width: 28px; height: 28px;
            background: var(--bg-primary, #0f172a); border: 2px solid #22c55e; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 12px rgba(34,197,94,0.3); animation: s6Orbit 2.5s ease-in-out infinite
        }
        @keyframes s6Orbit {
            0%, 100% { transform: translate(0, 0) scale(1) }
            25% { transform: translate(4px, -4px) scale(1.1) }
            50% { transform: translate(0, -6px) scale(1) }
            75% { transform: translate(-4px, -4px) scale(1.1) }
        }
        .s6-orbit svg { width: 14px; height: 14px }
        .s6-label {
            font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 2px; color: #22c55e; opacity: 0.7
        }

        /* ============================================================
           AI Edit Command Bar v1.0
           ============================================================ */
        .ai-edit-bar {
            position: fixed;
            bottom: 88px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            width: min(560px, calc(100vw - 32px));
            display: none;
            flex-direction: column;
            gap: 10px;
            animation: aiBarSlideUp .35s cubic-bezier(.34,1.56,.64,1) forwards
        }
        .ai-edit-bar.visible { display: flex }
        body:has(.ai-edit-bar.visible) .site-footer { padding-bottom: 80px }

        @keyframes aiBarSlideUp {
            from { opacity: 0; transform: translateX(-50%) translateY(20px) }
            to { opacity: 1; transform: translateX(-50%) translateY(0) }
        }

        .ai-edit-input-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(15,23,42,.88);
            backdrop-filter: blur(20px) saturate(1.6);
            -webkit-backdrop-filter: blur(20px) saturate(1.6);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 16px;
            padding: 6px 8px 6px 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset
        }
        .ai-edit-input-wrap:focus-within {
            border-color: rgba(99,102,241,.5);
            box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(99,102,241,.3) inset, 0 0 20px rgba(99,102,241,.15)
        }

        .ai-edit-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            color: rgba(255,255,255,.5)
        }
        .ai-edit-input-wrap:focus-within .ai-edit-icon { color: rgba(129,140,248,.9) }

        .ai-edit-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: .9rem;
            font-family: inherit;
            padding: 8px 0;
            min-width: 0
        }
        .ai-edit-input::placeholder { color: rgba(255,255,255,.35) }

        .ai-edit-voice {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s ease
        }
        .ai-edit-voice:hover { color: #f97316; border-color: rgba(249,115,22,0.3); background: rgba(249,115,22,0.1) }
        .ai-edit-voice.listening {
            color: #ef4444;
            border-color: #ef4444;
            background: rgba(239,68,68,0.15);
            animation: voicePulse 1.2s ease-in-out infinite
        }
        @keyframes voicePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3) }
            50% { box-shadow: 0 0 0 8px rgba(239,68,68,0) }
        }
        .ai-edit-voice svg { width: 16px; height: 16px }

        .ai-edit-send {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: none;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease
        }
        .ai-edit-send:hover { transform: scale(1.05); box-shadow: 0 2px 12px rgba(99,102,241,.4) }
        .ai-edit-send:active { transform: scale(.95) }
        .ai-edit-send:disabled { opacity: .4; cursor: not-allowed; transform: none }
        .ai-edit-send svg { width: 18px; height: 18px }

        .ai-edit-suggestions {
            display: flex;
            gap: 6px;
            padding: 2px 4px;
            flex-wrap: wrap;
            justify-content: center;
            max-height: 72px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,.15) transparent
        }
        .ai-edit-suggestions::-webkit-scrollbar { width: 3px; height: 0 }
        .ai-edit-suggestions::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px }
        .ai-edit-suggestions:empty { display: none }

        .ai-suggest-chip {
            flex-shrink: 0;
            padding: 5px 12px;
            background: rgba(15,23,42,.72);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 20px;
            color: rgba(255,255,255,.75);
            font-size: .76rem;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
            display: flex;
            align-items: center;
            gap: 4px
        }
        .ai-suggest-chip:hover {
            background: rgba(99,102,241,.25);
            border-color: rgba(99,102,241,.5);
            color: #fff;
            transform: translateY(-1px)
        }
        .ai-suggest-chip:active { transform: scale(.96) }
        .ai-suggest-chip svg { width: 13px; height: 13px; opacity: .6 }

        .ai-edit-counter {
            flex-shrink: 0;
            font-size: .7rem;
            color: rgba(255,255,255,.35);
            font-variant-numeric: tabular-nums;
            padding: 0 4px;
            white-space: nowrap;
            transition: color .3s ease
        }
        .ai-edit-counter.warn { color: rgba(251,191,36,.8) }
        .ai-edit-counter.limit { color: rgba(239,68,68,.8) }

        .ai-edit-response {
            display: none;
            padding: 10px 16px;
            background: rgba(15,23,42,.88);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 12px;
            color: rgba(255,255,255,.85);
            font-size: .82rem;
            line-height: 1.5;
            animation: aiFadeIn .25s ease
        }
        .ai-edit-response.visible { display: flex; align-items: center; gap: 8px }
        .ai-edit-response.success { border-color: rgba(34,197,94,.3) }
        .ai-edit-response.error { border-color: rgba(239,68,68,.3) }
        .ai-edit-response.info { border-color: rgba(99,102,241,.3); background: rgba(30,27,75,.92) }

        .ai-response-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px
        }
        .ai-response-icon.success { color: #22c55e }
        .ai-response-icon.error { color: #ef4444 }
        .ai-response-icon.info { color: #818cf8 }

        .ai-clarify-option {
            padding: 6px 14px;
            background: rgba(15,23,42,.82);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(99,102,241,.4);
            border-radius: 20px;
            color: #c7d2fe;
            font-size: .78rem;
            cursor: pointer;
            white-space: nowrap;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease
        }
        .ai-clarify-option:hover { background: rgba(99,102,241,.35); border-color: rgba(99,102,241,.6); color: #fff; transform: translateY(-1px) }
        .ai-clarify-option:active { transform: scale(.96) }

        @keyframes aiFadeIn {
            from { opacity: 0; transform: translateY(4px) }
            to { opacity: 1; transform: translateY(0) }
        }

        .ai-edit-toggle {
            position: fixed;
            bottom: 84px;
            left: 170px;
            z-index: 9997;
            height: 42px;
            padding: 0 16px 0 12px;
            border-radius: 21px;
            border: none;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            cursor: pointer;
            display: none;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 20px rgba(99,102,241,.4);
            transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
            font-size: .8rem;
            font-weight: 600;
            letter-spacing: .02em;
            white-space: nowrap
        }
        .ai-edit-toggle.visible { display: flex }
        .ai-edit-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(99,102,241,.5) }
        .ai-edit-toggle:active { transform: scale(.95) }
        .ai-edit-toggle svg { width: 18px; height: 18px; flex-shrink: 0 }
        /* Hide both buttons when shortcut panel is open */
        body:has(.shortcut-help-panel.visible) .ai-edit-toggle,
        body:has(.shortcut-help-panel.visible) .shortcut-help-btn { opacity: 0; pointer-events: none }
        @media (max-width:640px) {
            .ai-edit-toggle {
                bottom: 72px;
                left: auto;
                right: 12px;
                height: 38px;
                padding: 0 12px 0 10px;
                font-size: .75rem;
                gap: 6px
            }
            .ai-edit-toggle svg { width: 16px; height: 16px }
        }
        @media (max-width:480px) {
            .ai-edit-toggle {
                padding: 0 10px;
                height: 36px
            }
            .ai-edit-toggle span { display: none }
        }
        .ai-edit-close {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: none;
            background: rgba(255,255,255,.08);
            color: rgba(255,255,255,.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease
        }
        .ai-edit-close:hover { background: rgba(239,68,68,.25); color: #fca5a5 }

        .ai-edit-loading {
            display: inline-flex;
            gap: 4px;
            align-items: center
        }
        .ai-edit-loading .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(129,140,248,.7);
            animation: aiDotPulse .6s ease infinite
        }
        .ai-edit-loading .dot:nth-child(2) { animation-delay: .15s }
        .ai-edit-loading .dot:nth-child(3) { animation-delay: .3s }

        @keyframes aiDotPulse {
            0%, 100% { opacity: .3; transform: scale(.8) }
            50% { opacity: 1; transform: scale(1.2) }
        }

        /* ===== Accessibility: prefers-reduced-motion ===== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important
            }
        }

        /* Capacitor Phone Mode: edit features now enabled (was hidden, re-enabled for full mobile editing) */

        /* ===== Accessibility: skip-to-main link ===== */
        .skip-to-main {
            position: absolute;
            top: -100%;
            left: 16px;
            z-index: 99999;
            padding: 12px 24px;
            background: var(--accent-primary);
            color: #fff;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            transition: top .15s ease
        }
        .skip-to-main:focus {
            top: 16px
        }

        /* ===== Accessibility: screen-reader only ===== */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0
        }

        /* ========================================
           LANDING PAGE (integrated from landing-preview)
           ======================================== */

        /* --- Scoping: landing mode overrides --- */
        body:not(.landing-exited) .progress-container { display:none }
        body:not(.landing-exited) #main-content.container { max-width:100%; padding:0 }
        body:not(.landing-exited) .site-footer { margin-top:0 }
        body:not(.landing-exited) #main-content > header { display:none }
        #step1-original-card { display:none }
        body.landing-exited #landing-content { display:none }
        body.landing-exited #step1-original-card { display:block }
        .header-nav-landing { display:none }
        body:not(.landing-exited) .header-nav-landing { display:flex; align-items:center; gap:24px }
        .header-nav-link {
            font-size:.875rem; font-weight:600; color:var(--text-secondary);
            text-decoration:none; transition:color var(--transition-fast);
        }
        .header-nav-link:hover { color:var(--accent-primary) }

        /* --- Landing buttons (avoid .btn conflict) --- */
        .lp-btn {
            font-family:inherit; font-weight:600; border:none; cursor:pointer;
            border-radius:var(--radius-md);
            transition:box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
            display:inline-flex; align-items:center; gap:8px; text-decoration:none;
        }
        .lp-btn--lg { font-size:1rem; padding:14px 28px }
        .lp-btn--accent {
            background:var(--accent-gradient); color:#fff;
            box-shadow: 0 4px 16px var(--accent-glow);
        }
        .lp-btn--accent:hover { box-shadow:0 6px 24px var(--accent-glow-strong); transform:translateY(-2px) }
        .lp-btn--outline {
            background:transparent; color:var(--text-primary);
            border:1.5px solid var(--border-strong);
        }
        .lp-btn--outline:hover { border-color:var(--accent-primary); color:var(--accent-primary) }

        /* --- Hero 2-column --- */
        .hero-section {
            max-width:1040px; margin:0 auto;
            padding:28px 28px 48px;
            display:grid; grid-template-columns:1fr 400px; gap:32px; align-items:center;
            position:relative; overflow:hidden;
        }
        .hero-section::before {
            content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
            width:800px; height:600px;
            background:radial-gradient(ellipse at center, rgba(249,115,22,0.04) 0%, transparent 70%);
            pointer-events:none; z-index:0;
        }
        .hero-text { position:relative; z-index:1 }
        .hero-text h2 {
            font-family:SUIT, Pretendard, sans-serif;
            font-size:clamp(1.6rem,2.8vw,2.4rem);
            font-weight:800; line-height:1.3; letter-spacing:-.02em; margin-bottom:14px;
        }
        .hero-text h2 .accent {
            background:var(--accent-gradient);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .hero-sub {
            font-size:clamp(.9rem,1vw,1.05rem);
            color:var(--text-secondary); line-height:1.7; margin-bottom:28px;
        }
        .hero-ctas { display:flex; gap:12px; flex-wrap:wrap }
        .hero-card {
            background:var(--bg-card); border-radius:var(--radius-xl);
            border:1px solid var(--border-color); border-top:3px solid var(--accent-primary);
            box-shadow:0 2px 4px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.08),
                        0 16px 32px rgba(0,0,0,.06), 0 0 0 1px rgba(249,115,22,.05);
            padding:20px 24px 28px; width:100%; position:relative; overflow:visible; z-index:1;
            transition:box-shadow var(--transition-normal), transform var(--transition-normal);
        }
        .hero-card:hover {
            transform:translateY(-4px);
            box-shadow:0 4px 8px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.1),
                        0 24px 48px rgba(0,0,0,.08), 0 0 24px rgba(249,115,22,.1);
        }
        .hero-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:80px;
            background:var(--accent-gradient-soft); opacity:.5; pointer-events:none;
        }
        .hero-card-title {
            font-family:SUIT, sans-serif; font-size:1.1rem; font-weight:700;
            margin-bottom:6px; position:relative;
        }
        .hero-card-sub { font-size:.85rem; color:var(--text-muted); margin-bottom:20px; position:relative }
        .hero-input-wrap { position:relative; margin-bottom:14px }
        .hero-input {
            width:100%; padding:14px 16px 14px 44px;
            border:1.5px solid var(--border-color); border-radius:var(--radius-md);
            font-family:inherit; font-size:1rem; color:var(--text-primary);
            background:var(--bg-secondary); outline:none;
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
        }
        .hero-input:focus {
            border-color:var(--accent-primary);
            box-shadow:0 0 0 3px var(--accent-glow), 0 0 0 6px rgba(249,115,22,.08);
        }
        .hero-input::placeholder { color:var(--text-muted) }
        .hero-input-icon {
            position:absolute; left:14px; top:50%; transform:translateY(-50%);
            color:var(--text-muted); pointer-events:none;
        }
        .hero-search-row { display:flex; gap:10px; margin-bottom:14px; position:relative }
        .hero-search-row .hero-input { flex:1; padding-left:16px }
        .hero-submit {
            width:100%; padding:14px; border:none; border-radius:var(--radius-md);
            background:var(--accent-gradient); color:#fff; font-family:inherit;
            font-size:1rem; font-weight:700; cursor:pointer; position:relative; overflow:hidden;
            transition:box-shadow var(--transition-fast), transform var(--transition-fast);
            box-shadow:0 4px 16px var(--accent-glow);
        }
        .hero-submit::after {
            content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
            transition:left 0.5s ease;
        }
        .hero-submit:hover { box-shadow:0 6px 24px var(--accent-glow-strong); transform:translateY(-1px) }
        .hero-submit:hover::after { left:120% }
        .hero-or { text-align:center; font-size:.8rem; color:var(--text-muted); margin:14px 0; position:relative }
        .hero-alt-actions { display:flex; gap:10px; margin-bottom:14px }
        .hero-alt-btn {
            flex:1; padding:11px 8px; border:1.5px dashed var(--border-strong);
            border-radius:var(--radius-md); background:transparent; font-family:inherit;
            font-size:.85rem; color:var(--text-secondary); cursor:pointer;
            transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
            display:flex; align-items:center; justify-content:center; gap:6px;
            white-space:nowrap;
        }
        .hero-alt-btn:hover { border-color:var(--accent-primary); color:var(--accent-primary); background:rgba(249,115,22,0.03) }
        .hero-card-note {
            font-size:.75rem; color:var(--text-muted); text-align:center;
            margin-top:10px; position:relative;
        }

        /* --- Section common --- */
        .section-header { text-align:center; margin-bottom:clamp(40px,6vh,56px) }
        .section-label {
            font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
            color:var(--accent-primary); margin-bottom:10px;
        }
        .section-title {
            font-family:SUIT, Pretendard, sans-serif;
            font-size:clamp(1.6rem,2.5vw,2.4rem); font-weight:800; line-height:1.25;
            letter-spacing:-.015em;
        }
        .section-sub {
            font-size:clamp(.95rem,1.1vw,1.05rem); color:var(--text-secondary);
            margin-top:10px; max-width:560px; margin-left:auto; margin-right:auto;
        }

        /* --- Top 20 --- */
        .top100-section { background:var(--bg-secondary); padding:clamp(64px,10vh,100px) 0 }
        .top100-inner { max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,48px) }
        .genre-tabs {
            display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap;
        }
        .genre-tab {
            font-family:inherit; font-size:.875rem; font-weight:600;
            padding:8px 20px; border-radius:var(--radius-full);
            border:1.5px solid var(--border-color); background:var(--bg-card);
            color:var(--text-secondary); cursor:pointer;
            transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
        }
        .genre-tab:hover { border-color:var(--accent-secondary); color:var(--accent-primary) }
        .genre-tab.active {
            background:var(--accent-gradient); color:#fff; border-color:transparent;
            box-shadow:0 2px 10px var(--accent-glow);
        }
        .song-grid {
            display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
        }
        .song-card {
            background:var(--bg-card); border-radius:var(--radius-lg);
            border:1px solid var(--border-color); overflow:hidden;
            transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
            cursor:pointer; position:relative;
        }
        .song-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-card-hover); border-color:rgba(249,115,22,.25) }
        .song-card-img {
            position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-tertiary);
        }
        .song-card-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow) }
        .song-card:hover .song-card-img img { transform:scale(1.08) }
        .song-card-overlay {
            position:absolute; inset:0;
            background:rgba(249,115,22,0.7); opacity:0;
            display:flex; align-items:center; justify-content:center;
            transition:opacity var(--transition-normal);
        }
        .song-card:hover .song-card-overlay { opacity:1 }
        .song-card-play {
            width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.95);
            display:flex; align-items:center; justify-content:center;
            transform:scale(0.8); transition:transform var(--transition-bounce);
        }
        .song-card:hover .song-card-play { transform:scale(1) }
        .song-rank {
            position:absolute; top:8px; left:8px; z-index:2;
            background:var(--accent-gradient); color:#fff;
            font-size:.7rem; font-weight:800; width:26px; height:26px;
            border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
            box-shadow:0 2px 6px rgba(0,0,0,.2);
        }
        .song-rank[data-top="1"] { background:linear-gradient(135deg, #FFD700, #FFA500); text-shadow:0 1px 2px rgba(0,0,0,.2) }
        .song-rank[data-top="2"] { background:linear-gradient(135deg, #E8E8E8, #9CA3AF); color:#1f2937 }
        .song-rank[data-top="3"] { background:linear-gradient(135deg, #CD7F32, #B8860B); text-shadow:0 1px 2px rgba(0,0,0,.2) }
        /* Skeleton loading cards */
        .song-skeleton {
            background:var(--bg-card); border-radius:var(--radius-lg);
            border:1px solid var(--border-color); overflow:hidden;
        }
        .song-skeleton-img {
            aspect-ratio:1;
            background:linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-card) 50%, var(--bg-tertiary) 75%);
            background-size:200% 100%;
            animation:skeletonShimmer 1.5s ease-in-out infinite;
        }
        .song-skeleton-info { padding:12px 14px }
        .song-skeleton-line {
            height:12px; border-radius:6px; margin-bottom:8px;
            background:linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-card) 50%, var(--bg-tertiary) 75%);
            background-size:200% 100%;
            animation:skeletonShimmer 1.5s ease-in-out infinite;
        }
        .song-skeleton-line:last-child { width:60%; margin-bottom:0 }
        @keyframes skeletonShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
        /* Stagger animation for song cards */
        .song-card { opacity:0; transform:translateY(20px); }
        .song-card.card-visible {
            opacity:1; transform:translateY(0);
            transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1),
                        box-shadow var(--transition-normal), border-color var(--transition-normal);
        }
        .song-card-info { padding:12px 14px }
        .song-card-title {
            font-family:Pretendard, sans-serif;
            font-size:.875rem; font-weight:700; line-height:1.3;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        }
        .song-card-artist {
            font-size:.78rem; color:var(--text-muted); margin-top:3px;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        }
        .song-diff {
            display:inline-block; font-size:.65rem; font-weight:700;
            padding:2px 8px; border-radius:var(--radius-full); margin-top:6px;
        }
        .song-diff--easy { background:rgba(16,185,129,.1); color:#10b981 }
        .song-diff--medium { background:rgba(245,158,11,.1); color:#f59e0b }
        .song-diff--hard { background:rgba(239,68,68,.1); color:#ef4444 }

        /* --- Song card meta tags --- */
        .song-card-meta { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap }
        .song-meta-tag { font-size:.65rem; padding:2px 7px; border-radius:10px; font-weight:600; line-height:1.4; white-space:nowrap }
        .song-meta-genre { background:rgba(168,85,247,.12); color:#a855f7 }
        .song-meta-diff--beginner { background:rgba(34,197,94,.12); color:#22c55e }
        .song-meta-diff--intermediate { background:rgba(59,130,246,.12); color:#3b82f6 }
        .song-meta-diff--advanced { background:rgba(239,68,68,.12); color:#ef4444 }

        /* --- Song card hover badges --- */
        .song-card-badges { position:absolute; bottom:6px; left:6px; right:6px; display:flex; gap:4px; flex-wrap:wrap; opacity:0; transition:opacity .2s; pointer-events:none }
        .song-card:hover .song-card-badges { opacity:1 }
        .s-hover-badge { font-size:.6rem; padding:2px 6px; border-radius:8px; background:rgba(0,0,0,.7); color:#fff; backdrop-filter:blur(4px); font-weight:500; white-space:nowrap }

        /* --- Autocomplete dropdown --- */
        .ac-dropdown { position:absolute; top:100%; left:0; right:0; z-index:60; max-height:320px; overflow-y:auto; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .15s, transform .15s }
        .ac-dropdown.ac-visible { opacity:1; transform:translateY(0); pointer-events:auto }
        .ac-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:background .15s }
        .ac-item:hover { background:rgba(249,115,22,.08) }
        .ac-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0 }
        .ac-text { flex:1; min-width:0 }
        .ac-title { font-size:.82rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
        .ac-title strong { color:var(--accent-primary) }
        .ac-sub { font-size:.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin-top:1px }
        .ac-thumb-round { border-radius:50% }
        .ac-thumb-placeholder { display:flex; align-items:center; justify-content:center; background:var(--bg-secondary); color:var(--text-muted) }

        @media (max-width:480px) {
            .song-card-meta { display:none }
            .ac-thumb { width:32px; height:32px }
        }

        /* --- FAQ (landing) — always-visible Q&A list --- */
        .faq-section-landing { padding:clamp(64px,10vh,100px) 0; background:var(--bg-secondary) }
        .faq-inner-landing { max-width:720px; margin:0 auto; padding:0 clamp(16px,4vw,48px) }
        .faq-item-landing {
            background:var(--bg-card); border-radius:var(--radius-lg);
            border:1px solid var(--border-color); margin-bottom:12px;
            padding:24px;
        }
        .faq-q-landing {
            font-family:inherit; font-size:.95rem; font-weight:700;
            color:var(--accent-primary); margin-bottom:8px;
            display:flex; align-items:flex-start; gap:10px;
        }
        .faq-q-landing::before {
            content:'Q'; font-family:'JetBrains Mono',monospace; font-size:.75rem; font-weight:800;
            background:rgba(249,115,22,.1); color:var(--accent-primary);
            padding:2px 8px; border-radius:4px; flex-shrink:0; margin-top:1px;
        }
        .faq-a-text-landing { font-size:.9rem; color:var(--text-secondary); line-height:1.7; padding-left:34px }

        /* --- Playback bar: hide in landing mode --- */
        body:not(.landing-exited) .playback-bar { display:none }

        /* --- Scroll animations --- */
        .fade-up {
            opacity:0; transform:translateY(30px);
            transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
        }
        .fade-up.visible { opacity:1; transform:translateY(0) }
        .fade-up-delay-1 { transition-delay:.1s }
        .fade-up-delay-2 { transition-delay:.2s }
        .fade-up-delay-3 { transition-delay:.3s }

        /* --- Landing responsive --- */
        @media (max-width:1024px) {
            .hero-section { grid-template-columns:1fr; text-align:center; justify-items:center; gap:32px }
            .hero-text { max-width:600px }
            .hero-sub { margin-left:auto; margin-right:auto }
            .hero-ctas { justify-content:center }
            .hero-card { max-width:460px }
            .song-grid { grid-template-columns:repeat(4,1fr) }
        }
        @media (max-width:768px) {
            .hero-section { padding:20px 20px 40px }
            .hero-text h2 { font-size:clamp(1.4rem,4.5vw,2rem) }
            .logo { width:260px }
            .rhythm-wave { height:24px; width:200px }
            .brand-tagline { font-size:1.1rem }
            .song-grid { grid-template-columns:repeat(3,1fr); gap:14px }
            .footer-links { gap:16px }
            .header-nav-landing { display:none !important }
            .hero-search-row { flex-direction:column }
        }
        @media (max-width:480px) {
            .song-grid { grid-template-columns:repeat(2,1fr); gap:10px }
            .hero-card { padding:20px 16px }
            .genre-tabs { gap:6px }
            .genre-tab { padding:6px 14px; font-size:.8rem }
            .song-card-info { padding:8px 10px }
            .song-card-title { font-size:.8rem }
            .logo { width:min(220px, 55vw) }
            .logo-sound-wave { display:none }
            .rhythm-wave { height:20px; width:160px }
            .brand-tagline { font-size:1rem }
            .hero-alt-btn { font-size:.75rem; padding:10px 6px }
            .up-lyrics-offset { display: none; }
        }

        /* ═══════════════════════════════════════
           Lyrics: hover/click + edit modal
           ═══════════════════════════════════════ */
        .vf-lyrics { transition: fill 0.15s; pointer-events: none; }
        /* Lyrics edit mode: make lyrics clickable */
        .lyrics-edit-active .vf-lyrics { pointer-events: auto !important; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") 0 16, text; }
        .lyrics-edit-active .vf-lyrics:hover { fill: #f97316 !important; text-decoration: underline; }
        /* "+" placeholder for empty bars in edit mode */
        .vf-lyrics-add { pointer-events: auto !important; cursor: pointer; transition: fill 0.15s, transform 0.15s; }
        .vf-lyrics-add:hover { fill: #f97316 !important; font-size: 28px !important; }

        /* Lyrics edit toggle button (player bar) */
        .lyrics-edit-toggle { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.10); background:transparent; color:#606070; font-family:'Outfit',sans-serif; font-size:12px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
        .lyrics-edit-toggle:hover { border-color:rgba(255,255,255,0.2); color:#a0a0b0; }
        .lyrics-edit-toggle.active { background:rgba(249,115,22,0.10); border-color:rgba(249,115,22,0.25); color:#f97316; }
        .lyrics-edit-toggle.active svg { color:#f97316; }
        @container player (max-width: 859px) { .lyrics-edit-toggle { display:none !important; } }
        /* Lyrics edit button inside adjust bar (mobile) — fluid icon/text */
        .up-adjust-lyrics-edit { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:clamp(24px, 3cqi, 30px); height:clamp(22px, 3cqi, 28px); padding:0 clamp(0px, 0.8cqi, 8px); border-radius:clamp(4px, 0.6cqi, 6px); border:1px solid rgba(249,115,22,0.2); background:rgba(249,115,22,0.05); color:#f97316; font-family:'Outfit',sans-serif; font-size:clamp(10px, 1.3cqi, 12px); cursor:pointer; transition:all 0.15s; white-space:nowrap; overflow:hidden; flex-shrink:0; }
        .up-adjust-lyrics-edit:hover { background:rgba(249,115,22,0.15); border-color:rgba(249,115,22,0.35); }
        .up-adjust-lyrics-edit.active { background:rgba(249,115,22,0.20); border-color:#f97316; }
        .up-adjust-lyrics-edit svg { flex-shrink:0; }
        .up-adjust-lyrics-edit .adj-edit-text { display:none; }
        @container player (min-width: 520px) {
            .up-adjust-lyrics-edit .adj-edit-text { display:inline; }
            .up-adjust-lyrics-edit { padding:0 clamp(6px, 1cqi, 10px); width:auto; }
        }
        .up-adjust-divider { width:1px; height:clamp(14px, 2cqi, 18px); background:rgba(255,255,255,0.06); flex-shrink:0; }

        /* Lyrics edit banner (top) */
        .lyrics-edit-banner { position:fixed; top:0; left:0; right:0; z-index:10000; background:linear-gradient(135deg,#1a1207,#0f0a04); border-bottom:1px solid rgba(249,115,22,0.25); padding:0 20px; height:42px; display:flex; align-items:center; justify-content:center; gap:10px; transform:translateY(-100%); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); box-shadow:0 4px 24px rgba(0,0,0,0.4); }
        .lyrics-edit-banner.visible { transform:translateY(0); }
        .lyrics-edit-banner::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#f97316,transparent); opacity:0.4; }
        .lyrics-edit-banner-done { position:absolute; right:16px; padding:5px 14px; border-radius:6px; border:1px solid rgba(249,115,22,0.25); background:rgba(249,115,22,0.10); color:#f97316; font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:500; cursor:pointer; transition:all 0.15s; }
        .lyrics-edit-banner-done:hover { background:#f97316; color:#fff; }

        .lyrics-edit-modal {
            position: fixed;
            z-index: 10001;
            background: #18181b;
            border: 1px solid rgba(249,115,22,0.3);
            border-radius: 12px;
            padding: 12px;
            width: 320px;
            max-width: 90vw;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            font-family: 'Outfit', sans-serif;
        }
        .lyrics-edit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .lyrics-edit-bar {
            font-size: .8rem;
            color: #f97316;
            font-weight: 600;
        }
        .lyrics-edit-close {
            background: none;
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0 4px;
        }
        .lyrics-edit-close:hover { color: #fff; }
        .lyrics-edit-input {
            width: 100%;
            background: #09090b;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px;
            color: #e5e5e5;
            font-size: .85rem;
            padding: 8px 10px;
            resize: vertical;
            font-family: 'Outfit', sans-serif;
            box-sizing: border-box;
        }
        .lyrics-edit-input:focus {
            outline: none;
            border-color: #f97316;
        }
        .lyrics-edit-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }
        .lyrics-edit-right {
            display: flex;
            gap: 6px;
        }
        .lyrics-edit-delete {
            background: none;
            border: 1px solid rgba(239,68,68,0.4);
            color: #ef4444;
            border-radius: 6px;
            padding: 5px 10px;
            font-size: .75rem;
            cursor: pointer;
        }
        .lyrics-edit-delete:hover { background: rgba(239,68,68,0.15); }
        .lyrics-edit-cancel {
            background: none;
            border: 1px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.6);
            border-radius: 6px;
            padding: 5px 10px;
            font-size: .75rem;
            cursor: pointer;
        }
        .lyrics-edit-cancel:hover { background: rgba(255,255,255,0.08); }
        .lyrics-edit-save {
            background: #f97316;
            border: none;
            color: #fff;
            border-radius: 6px;
            padding: 5px 14px;
            font-size: .75rem;
            font-weight: 600;
            cursor: pointer;
        }
        .lyrics-edit-save:hover { background: #ea580c; }

        /* === Modal UI Improvements (2026-03-17) === */

        /* 1. Profile dropdown: subscription manage button */
        .btn-sub-manage {
            flex: 0 0 auto;
            background: none;
            border: 1.5px solid rgba(249, 115, 22, .3);
            color: var(--accent-primary);
            font-size: .75rem;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            border-radius: var(--radius-sm);
            padding: 8px 14px;
            min-height: 36px;
            transition: var(--transition-fast);
            font-family: inherit
        }
        .btn-sub-manage:hover {
            background: rgba(249, 115, 22, .08);
            border-color: var(--accent-primary)
        }

        /* 2. Support dropdown: legal items styling */
        .dropdown-item-legal {
            font-size: .8rem;
            color: var(--text-muted)
        }
        .dropdown-item-legal svg {
            width: 16px;
            height: 16px;
            opacity: .6
        }

        /* 3. Legal modal: fix double scroll + sticky close */
        .legal-modal {
            max-width: 640px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden
        }
        .legal-modal .modal-header {
            position: sticky;
            top: 0;
            background: var(--bg-card);
            z-index: 5;
            flex-shrink: 0;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px
        }
        .legal-modal .modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 10
        }
        .legal-modal .legal-content {
            flex: 1;
            overflow-y: auto;
            max-height: none
        }

        /* 4. FAQ accordion styles */
        .faq-category {
            margin-bottom: 8px
        }
        .faq-category-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: .9rem;
            color: var(--accent-primary);
            cursor: pointer;
            transition: var(--transition-fast);
            border: 1px solid transparent;
            user-select: none
        }
        .faq-category-header:hover {
            border-color: rgba(249, 115, 22, .2)
        }
        .faq-cat-icon {
            font-size: 1.1rem;
            flex-shrink: 0
        }
        .faq-cat-chevron {
            margin-left: auto;
            transition: transform .3s;
            font-size: .65rem;
            color: var(--text-muted)
        }
        .faq-category.open .faq-cat-chevron {
            transform: rotate(180deg)
        }
        .faq-category-items {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease
        }
        .faq-category.open .faq-category-items {
            max-height: 2000px
        }
        .faq-accordion-q {
            border-bottom: 1px solid var(--border-color);
            cursor: pointer
        }
        .faq-accordion-q-title {
            padding: 12px 16px;
            font-weight: 600;
            font-size: .88rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition-fast)
        }
        .faq-accordion-q-title:hover {
            color: var(--accent-primary)
        }
        .faq-accordion-q-title .q-chevron {
            margin-left: auto;
            transition: transform .3s;
            font-size: .6rem;
            color: var(--text-muted)
        }
        .faq-accordion-q.open .q-chevron {
            transform: rotate(180deg)
        }
        .faq-accordion-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease;
            font-size: .85rem;
            color: var(--text-secondary);
            line-height: 1.7
        }
        .faq-accordion-q.open .faq-accordion-answer {
            max-height: 500px;
            padding: 0 16px 14px
        }

        /* 5. Subscription modal: disabled button fix + grid layout */
        .btn-charge-submit[disabled] {
            background: var(--bg-tertiary) !important;
            color: var(--text-muted) !important;
            cursor: not-allowed;
            opacity: .7
        }
        .credit-packages.grid-layout {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px
        }
        @media (max-width:640px) {
            .credit-packages.grid-layout {
                grid-template-columns: 1fr
            }
        }

        /* 6. Contact modal: sticky submit footer */
        .contact-modal-body-scroll {
            max-height: calc(80vh - 180px);
            overflow-y: auto;
            padding-bottom: 16px
        }
        .contact-sticky-footer {
            position: sticky;
            bottom: 0;
            background: var(--bg-card);
            padding: 12px 28px 20px;
            border-top: 1px solid var(--border-color)
        }

        /* 7. History modal: clickable title + artist + icon button */
        .history-item-title.clickable-title {
            cursor: pointer;
            color: var(--accent-primary);
            text-decoration: underline;
            text-decoration-color: rgba(249, 115, 22, .3);
            transition: var(--transition-fast)
        }
        .history-item-title.clickable-title:hover {
            text-decoration-color: var(--accent-primary)
        }
        .history-item-artist {
            font-size: .75rem;
            color: var(--text-muted);
            margin-top: 2px
        }
        .history-regen-icon {
            width: 34px;
            height: 34px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-fast);
            font-size: .85rem;
            color: var(--text-muted);
            flex-shrink: 0
        }
        .history-regen-icon:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary)
        }

        /* 8. Modal close animation */
        @keyframes modalSlideOut {
            from { opacity: 1; transform: scale(1) translateY(0) }
            to { opacity: 0; transform: scale(.95) translateY(8px) }
        }
        .modal-overlay.closing {
            animation: none
        }
        .modal-overlay.closing .modal,
        .modal-overlay.closing .modal-card {
            animation: modalSlideOut .25s ease forwards
        }

        /* 9. Bottom-sheet drag handle */
        .modal-drag-handle {
            width: 40px;
            height: 4px;
            background: var(--border-subtle);
            border-radius: 2px;
            margin: 10px auto 0;
            flex-shrink: 0
        }
        @media (min-width:769px) {
            .modal-drag-handle { display: none }
        }

        /* Usage Limit Exceeded Modal */
        .usage-limit-overlay {
            display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px); z-index: 10020;
            align-items: center; justify-content: center;
        }
        .usage-limit-overlay.visible { display: flex; }
        .usage-limit-box {
            background: #1a1a2e; border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px; padding: 32px 28px; max-width: 400px; width: 90%;
            text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            animation: usageLimitIn 0.3s ease;
        }
        @keyframes usageLimitIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .usage-limit-icon {
            width: 56px; height: 56px; margin: 0 auto 16px;
            background: rgba(249,115,22,0.12); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }
        .usage-limit-icon svg { width: 28px; height: 28px; stroke: #f97316; }
        .usage-limit-title { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
        .usage-limit-desc { color: #a1a1aa; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
        .usage-limit-info {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
        }
        .usage-limit-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 4px 0; font-size: 13px;
        }
        .usage-limit-label { color: #71717a; }
        .usage-limit-value { color: #e4e4e7; font-weight: 600; }
        .usage-limit-value.zero { color: #ef4444; }
        .usage-limit-value.plan { color: #f97316; }
        .usage-limit-bar {
            height: 6px; background: rgba(255,255,255,0.06);
            border-radius: 3px; margin-top: 10px; overflow: hidden;
        }
        .usage-limit-bar-fill {
            height: 100%; background: #ef4444; border-radius: 3px;
            width: 100%; transition: width 0.5s ease;
        }
        .usage-limit-btns { display: flex; flex-direction: column; gap: 10px; }
        .usage-limit-upgrade {
            background: linear-gradient(135deg, #f97316, #ea580c); color: #fff;
            border: none; border-radius: 10px; padding: 13px 24px; font-size: 15px;
            font-weight: 700; cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .usage-limit-upgrade:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(249,115,22,0.3); }
        .usage-limit-close {
            background: transparent; color: #71717a;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px; padding: 11px 24px; font-size: 14px;
            cursor: pointer; transition: all 0.2s;
        }
        .usage-limit-close:hover { color: #a1a1aa; border-color: rgba(255,255,255,0.15); }