:root {
            --bg: #0B1020;
            --surface: rgba(255,255,255,0.05);
            --surface-hover: rgba(255,255,255,0.08);
            --border: rgba(255,255,255,0.1);
            --border-hover: rgba(255,255,255,0.18);
            --text: #FFFFFF;
            --text-body: #C7D0EA;
            --text-dim: rgba(255,255,255,0.45);
            --purple: #7A3DFF;
            --blue: #4F7CFF;
            --pink: #FF4FD8;
            --gradient: linear-gradient(135deg, #4F7CFF 0%, #7A3DFF 45%, #FF4FD8 100%);
            --gradient-subtle: linear-gradient(135deg, rgba(79,124,255,0.15) 0%, rgba(122,61,255,0.15) 45%, rgba(255,79,216,0.08) 100%);
            --gradient-border: linear-gradient(135deg, rgba(79,124,255,0.4) 0%, rgba(122,61,255,0.4) 45%, rgba(255,79,216,0.3) 100%);
            --glow-purple: rgba(122,61,255,0.25);
            --glow-blue: rgba(79,124,255,0.2);
            --red: #FF6B6B;
            --radius: 14px;
            --radius-sm: 10px;
            --font: 'Outfit', -apple-system, sans-serif;
            --mono: 'JetBrains Mono', monospace;
            --card-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
        }

        [data-theme="light"] {
            --bg: #F5F6FA;
            --surface: rgba(0,0,0,0.03);
            --surface-hover: rgba(0,0,0,0.06);
            --border: rgba(0,0,0,0.1);
            --border-hover: rgba(0,0,0,0.2);
            --text: #1A1A2E;
            --text-body: #4A4A6A;
            --text-dim: rgba(0,0,0,0.4);
            --glow-purple: rgba(122,61,255,0.08);
            --glow-blue: rgba(79,124,255,0.06);
            --red: #E53E3E;
            --card-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);
        }

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

        /* Moodne scrollbar */
        .builder-shell ::-webkit-scrollbar { width: 6px; }
        .builder-shell ::-webkit-scrollbar-track { background: transparent; }
        .builder-shell ::-webkit-scrollbar-thumb { background: rgba(122,61,255,0.25); border-radius: 3px; }
        .builder-shell ::-webkit-scrollbar-thumb:hover { background: rgba(122,61,255,0.45); }
        [data-theme="light"] .builder-shell ::-webkit-scrollbar-thumb { background: rgba(122,61,255,0.18); }
        [data-theme="light"] .builder-shell ::-webkit-scrollbar-thumb:hover { background: rgba(122,61,255,0.35); }
        .builder-shell { scrollbar-width: thin; scrollbar-color: rgba(122,61,255,0.25) transparent; }

        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text-body);
            min-height: 100vh;
            line-height: 1.6;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: -40%; left: -20%; width: 80%; height: 80%;
            background: radial-gradient(ellipse, var(--glow-purple) 0%, transparent 65%);
            pointer-events: none; z-index: 0; opacity: 0.5;
        }

        body::after {
            content: '';
            position: fixed;
            bottom: -30%; right: -20%; width: 70%; height: 70%;
            background: radial-gradient(ellipse, var(--glow-blue) 0%, transparent 65%);
            pointer-events: none; z-index: 0; opacity: 0.4;
        }

        .page {
            position: relative; z-index: 1;
            max-width: 1100px; margin: 0 auto; padding: 60px 24px 100px;
        }
        .view-page { display: none; }
        .view-page.active { display: block; }
        .hero-page {
            position: relative; z-index: 1;
            max-width: 1100px; margin: 0 auto; padding: 96px 24px 100px;
        }
        .hero-shell {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 34px;
            position: relative;
            isolation: isolate;
        }
        .hero-shell-loader {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 200ms ease;
            z-index: 3;
            shape-rendering: geometricPrecision;
        }
        .hero-shell-loader-track,
        .hero-shell-loader-bar {
            fill: none;
        }
        .hero-shell-loader-track {
            stroke: transparent;
            stroke-width: 0;
        }
        .hero-shell-loader-bar {
            stroke: url(#heroShellLoaderGradient);
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2;
            stroke-dasharray: 22 78;
            stroke-dashoffset: 100;
            opacity: 0.98;
            filter: drop-shadow(0 0 3px rgba(111,214,255,0.85))
                    drop-shadow(0 0 10px rgba(255,79,216,0.45));
            will-change: stroke-dashoffset, opacity, filter;
        }
        .hero-shell.hero-shell-loading .hero-shell-loader {
            opacity: 1;
        }
        .hero-shell.hero-shell-loading .hero-shell-loader-bar {
            animation: heroShellBorderRun 1.44s linear infinite, heroShellGlowPulse 2.6s ease-in-out infinite;
        }
        .hero-title {
            font-size: 44px; font-weight: 700; line-height: 1.08;
            letter-spacing: -1.4px; color: var(--text); margin-bottom: 10px;
        }
        .hero-title span {
            background: var(--gradient); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text;
        }
        .hero-sub {
            font-size: 16px; color: var(--text-body); line-height: 1.6;
            margin-bottom: 24px; max-width: 760px;
        }
        .hero-options {
            display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px;
        }
        .hero-stack {
            display: grid;
            gap: 12px;
            align-content: start;
        }
        .hero-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px;
        }
        .hero-card-custom {
            min-height: 100%;
        }
        .hero-card-pro {
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(79,124,255,0.08) 0%, rgba(122,61,255,0.12) 55%, rgba(255,79,216,0.08) 100%);
        }
        .hero-card h3 {
            font-size: 18px; color: var(--text); margin-bottom: 6px;
        }
        .hero-card p {
            font-size: 13px; color: var(--text-dim); margin-bottom: 12px;
            line-height: 1.5;
        }
        .hero-card-pro h3 {
            font-size: 15px;
            margin-bottom: 4px;
        }
        .hero-card-pro p {
            font-size: 12px;
            margin-bottom: 10px;
        }
        .hero-error {
            min-height: 18px;
            font-size: 12px;
            color: #FFB4B4;
            margin-bottom: 8px;
        }
        .hero-input {
            width: 100%; padding: 12px 14px; margin-bottom: 10px;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            color: var(--text); font-family: var(--font); font-size: 14px;
        }
        .hero-status {
            display: none;
            margin-top: 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px;
            background: rgba(255,255,255,0.03);
        }
        .hero-status.active { display: block; }
        .hero-status-title {
            font-size: 11px;
            color: #BCD5FF;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-family: var(--mono);
            margin-bottom: 6px;
        }
        .hero-status-track {
            width: 100%;
            height: 5px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
            margin-bottom: 7px;
        }
        .hero-status-bar {
            width: 35%;
            height: 100%;
            border-radius: inherit;
            background: var(--gradient);
            animation: heroLoad 1.15s linear infinite;
            transform-origin: left center;
        }
        .hero-status-text {
            font-size: 12px;
            color: var(--text-body);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @keyframes heroLoad {
            0% { transform: translateX(-120%); }
            100% { transform: translateX(340%); }
        }
        @keyframes heroShellBorderRun {
            0% { stroke-dashoffset: 100; }
            100% { stroke-dashoffset: 0; }
        }
        @keyframes heroShellGlowPulse {
            0% {
                opacity: 0.9;
                filter: drop-shadow(0 0 2px rgba(111,214,255,0.75))
                        drop-shadow(0 0 8px rgba(255,79,216,0.35));
            }
            50% {
                opacity: 1;
                filter: drop-shadow(0 0 4px rgba(111,214,255,1))
                        drop-shadow(0 0 14px rgba(255,79,216,0.62));
            }
            100% {
                opacity: 0.9;
                filter: drop-shadow(0 0 2px rgba(111,214,255,0.75))
                        drop-shadow(0 0 8px rgba(255,79,216,0.35));
            }
        }
        .hero-cta {
            width: 100%; justify-content: center;
        }
        .hero-ghost {
            margin-top: 10px; width: 100%;
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text-body);
            font-family: var(--font); font-size: 13px; padding: 11px 14px;
            cursor: pointer;
        }
        .hero-ghost-compact {
            margin-top: 0;
            padding: 9px 12px;
            font-size: 12px;
        }
        .hero-ghost:hover { background: var(--surface-hover); }
        .packs-page {
            position: relative; z-index: 1;
            max-width: 1100px; margin: 0 auto; padding: 96px 24px 100px;
        }
        .packs-shell {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 28px;
        }
        .packs-head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 14px; margin-bottom: 16px;
        }
        .packs-title { font-size: 30px; color: var(--text); line-height: 1.1; }
        .packs-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 14px; }
        .packs-grid {
            display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
        }
        .pack-tile {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 12px;
        }
        .pack-tile h4 { color: var(--text); font-size: 14px; margin-bottom: 4px; }
        .pack-tile p { color: var(--text-dim); font-size: 12px; }

        /* LANG TOGGLE */
        .lang-toggle {
            position: fixed; top: 20px; right: 20px; display: flex;
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border); border-radius: 10px;
            overflow: hidden; z-index: 100;
        }
        .lang-btn {
            padding: 8px 16px; font-family: var(--mono); font-size: 11px;
            font-weight: 700; letter-spacing: 1.5px; background: transparent;
            color: var(--text-dim); border: none; cursor: pointer; transition: all 0.25s;
        }
        .lang-btn.active { background: var(--gradient); color: #fff; }
        .lang-btn:hover:not(.active) { color: var(--text-body); background: rgba(255,255,255,0.05); }
        .theme-btn {
            padding: 6px 10px; background: var(--surface); border: 1px solid var(--border);
            border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1;
            transition: all 0.2s;
        }
        .theme-btn:hover { background: var(--surface-hover); }

        /* User zone */
        .user-zone { display: flex; align-items: center; margin-right: 8px; }
        .user-info { display: flex; align-items: center; gap: 6px; }
        .user-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); }
        .user-name { font-size: 11px; color: var(--text-body); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font); }
        .user-logout-btn {
            font-size: 10px; padding: 3px 8px; background: var(--surface); border: 1px solid var(--border);
            border-radius: 6px; color: var(--text-dim); cursor: pointer; font-family: var(--mono);
            letter-spacing: 0.5px; transition: all 0.2s;
        }
        .user-logout-btn:hover { background: var(--surface-hover); color: var(--text); }
        .user-login-btn {
            font-size: 11px; padding: 5px 12px; background: var(--surface); border: 1px solid var(--border);
            border-radius: 8px; color: var(--text-body); cursor: pointer; font-family: var(--font);
            transition: all 0.2s;
        }
        .user-login-btn:hover { background: var(--surface-hover); color: var(--text); }

        /* Login overlay */
        .login-overlay {
            position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        }
        .login-overlay-content {
            background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 32px 28px; min-width: 300px; max-width: 400px; text-align: center; position: relative;
            box-shadow: var(--card-shadow);
        }
        .login-overlay-close {
            position: absolute; top: 10px; right: 14px; background: none; border: none;
            color: var(--text-dim); font-size: 20px; cursor: pointer; line-height: 1;
        }
        .login-overlay-close:hover { color: var(--text); }
        .login-overlay-content h3 { margin: 0 0 8px; color: var(--text); font-family: var(--font); font-size: 18px; }
        .login-overlay-content p { margin: 0 0 20px; color: var(--text-body); font-size: 13px; font-family: var(--font); }
        .google-signin-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
        .login-overlay-error { color: var(--red); font-size: 12px; margin-top: 8px; font-family: var(--font); min-height: 16px; }

        /* HEADER */
        .header { margin-bottom: 30px; }
        .logo {
            display: inline-block; font-family: var(--mono); font-size: 11px;
            font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
            background: var(--gradient); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 20px;
        }
        .header h1 {
            font-size: 35px; font-weight: 700; line-height: 1.08;
            letter-spacing: -1.2px; color: var(--text); margin-bottom: 8px;
        }
        .header h1 span {
            background: var(--gradient); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text;
        }
        .header p { font-size: 14px; color: var(--text-body); max-width: 560px; line-height: 1.55; }

        /* STEPS */
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
        .step {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); padding: 18px 16px; text-align: center;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            transition: border-color 0.3s, background 0.3s;
        }
        .step:hover { border-color: var(--border-hover); background: var(--surface-hover); }
        .step-num {
            font-family: var(--mono); font-size: 20px; font-weight: 700;
            background: var(--gradient); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0;
        }
        .step-text { font-size: 15px; color: var(--text-body); line-height: 1.34; }

        /* CARD / FORM */
        .card {
            position: relative; background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); padding: 32px; margin-bottom: 24px;
        }
        .card:hover { border-color: var(--border-hover); }
        .card::before {
            content: ''; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px;
            background: var(--gradient-border);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: 0; transition: opacity 0.4s; pointer-events: none;
        }
        .card:focus-within::before { opacity: 1; }
        .inline-preview-wrap {
            display: none;
            margin: 18px 0 8px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }

        .form-group { margin-bottom: 24px; }
        .form-group:last-child { margin-bottom: 0; }

        label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--text); }
        label .hint { font-weight: 400; color: var(--text-dim); }

        input[type="text"], input[type="url"], select {
            width: 100%; padding: 14px 16px; background: rgba(255,255,255,0.04);
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            color: var(--text); font-family: var(--font); font-size: 15px;
            outline: none; transition: border-color 0.25s, box-shadow 0.25s;
        }
        input:focus, select:focus {
            border-color: var(--purple); box-shadow: 0 0 0 3px rgba(122,61,255,0.15);
            background: rgba(255,255,255,0.06);
        }
        input::placeholder { color: rgba(255,255,255,0.25); }
        select {
            cursor: pointer; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A3DFF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
        }
        select option { background: var(--bg); color: var(--text); }

        /* === CARD MODE TOGGLE === */
        .mode-toggle {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        }
        .mode-toggle.single-mode {
            grid-template-columns: 1fr;
        }
        .mode-btn {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 16px; background: var(--surface);
            border: 2px solid var(--border); border-radius: var(--radius-sm);
            cursor: pointer; transition: all 0.25s; text-align: left;
            font-family: var(--font); color: var(--text-body);
        }
        .mode-btn:hover { border-color: var(--border-hover); background: var(--surface-hover); }
        .mode-btn.active {
            border-color: var(--purple);
            background: var(--gradient-subtle);
            box-shadow: 0 0 0 2px rgba(122,61,255,0.15);
        }
        .mode-btn.locked {
            opacity: 0.6;
            filter: saturate(0.7);
            cursor: not-allowed;
        }
        .mode-btn.locked:hover {
            border-color: var(--border);
            background: var(--surface);
        }
        .mode-icon { font-size: 22px; flex-shrink: 0; }
        .mode-info { display: flex; flex-direction: column; gap: 2px; }
        .mode-name { font-size: 14px; font-weight: 600; color: var(--text); }
        .mode-desc { font-size: 11px; color: var(--text-dim); line-height: 1.35; }

        /* Custom mode info banner */
        .custom-info {
            display: none; margin-top: 10px; padding: 12px 16px;
            background: rgba(122,61,255,0.08); border: 1px solid rgba(122,61,255,0.2);
            border-radius: var(--radius-sm); font-size: 13px; color: var(--text-body);
            line-height: 1.5;
        }
        .custom-info.active { display: block; }
        .custom-info strong { color: var(--text); }
        .playlist-context {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            gap: 12px;
            padding: 12px 14px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.04);
        }
        .playlist-prefix {
            flex-shrink: 0;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: var(--text-dim);
            margin: 0;
        }
        .playlist-name {
            min-width: 0;
            font-size: 27px;
            line-height: 1.12;
            color: var(--text);
            font-weight: 700;
            letter-spacing: -0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .playlist-change {
            flex-shrink: 0;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text-body);
            font-family: var(--font);
            font-size: 12px;
            padding: 7px 10px;
            cursor: pointer;
        }
        .playlist-change:hover { background: var(--surface-hover); }

        /* === BACKGROUND PICKER === */
        .bg-picker { display: flex; gap: 10px; flex-wrap: wrap; }

        /* BG section: controls + live preview on the right */
        .bg-section {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 180px;
            gap: 16px;
            align-items: start;
        }
        .bg-controls { min-width: 0; }

        /* === LIVE PREVIEW CARD === */
        .preview-card-wrap {
            flex-shrink: 0;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.03);
        }
        .preview-flip-card {
            width: 156px; height: 156px;
            perspective: 900px; cursor: pointer;
            container-type: inline-size;
        }
        .preview-flip-inner {
            position: relative; width: 100%; height: 100%;
            transition: transform 0.55s cubic-bezier(0.4, 0, 0.15, 1);
            transform-style: preserve-3d; border-radius: 10px;
        }
        .preview-flip-card:hover .preview-flip-inner { transform: rotateY(180deg); }

        .preview-front, .preview-back-data {
            position: absolute; inset: 0;
            backface-visibility: hidden; -webkit-backface-visibility: hidden;
            border-radius: 10px; overflow: hidden;
        }

        /* FRONT = QR side (default visible) */
        .preview-front {
            display: flex; align-items: center; justify-content: center;
            background: #fff;
            box-shadow: var(--card-shadow);
            transition: background 0.3s;
        }
        .preview-front.bg-back-black { background: #000; }
        .preview-front.bg-back-gradient {
            background: linear-gradient(135deg, #4F7CFF 0%, #7A3DFF 45%, #FF4FD8 100%);
        }
        .preview-front.bg-back-custom { background-size: cover; background-position: center; }
        .pfc-qr-frame {
            width: 66%; height: 66%;
            background: #fff;
            border-radius: 6%;
            display: flex; align-items: center; justify-content: center;
            padding: 4%;
        }
        .pfc-qr-frame svg { width: 100%; height: 100%; }

        /* BACK = Data side (shown on hover) */
        .preview-back-data {
            background: #fff;
            transform: rotateY(180deg);
            box-shadow: var(--card-shadow);
        }
        .preview-back-data .pfc-num {
            position: absolute; top: 4%; left: 5%;
            font-family: Helvetica, Arial, sans-serif; font-size: 3.5cqi; color: #aaa;
        }
        .preview-back-data .pfc-artist {
            position: absolute; left: 10.5%; right: 10.5%; top: 50%;
            transform: translateY(calc(-50% - 26cqi));
            font-family: Helvetica, Arial, sans-serif; font-weight: 700;
            font-size: 8.8cqi; color: #000; text-align: center; line-height: 1.15;
        }
        .preview-back-data .pfc-year {
            position: absolute; left: 0; right: 0; top: 50%;
            transform: translateY(-55%);
            font-family: Helvetica, Arial, sans-serif; font-weight: 700;
            font-size: 22cqi; color: #000; text-align: center; line-height: 1;
        }
        .preview-back-data .pfc-title {
            position: absolute; left: 10.5%; right: 10.5%; top: 50%;
            transform: translateY(calc(-50% + 26cqi));
            font-family: Helvetica, Arial, sans-serif; font-weight: 400;
            font-style: italic; font-size: 7.6cqi; color: #000;
            text-align: center; line-height: 1.15;
        }
        .preview-hint {
            font-size: 11px; color: var(--text-dim); text-align: center;
        }

        .bg-option {
            position: relative; width: 68px; height: 68px; border-radius: var(--radius-sm);
            border: 2px solid var(--border); cursor: pointer;
            transition: border-color 0.2s, transform 0.15s; overflow: hidden;
        }
        .bg-option:hover { border-color: var(--border-hover); transform: scale(1.05); }
        .bg-option.active { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(122,61,255,0.3); }

        .bg-option input { position: absolute; opacity: 0; pointer-events: none; }

        .bg-white { background: #fff; }

        .bg-black { background: #000; }

        .bg-gradient { background: linear-gradient(135deg, #4F7CFF 0%, #7A3DFF 45%, #FF4FD8 100%); }

        .bg-ocean { background: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #90E0EF 100%); }
        .bg-sunset { background: linear-gradient(135deg, #FF5E4D 0%, #FF9A00 50%, #FFCE45 100%); }
        .bg-forest { background: linear-gradient(135deg, #1B4332 0%, #2E7D32 50%, #81C784 100%); }
        .bg-carbon { background: linear-gradient(135deg, #212121 0%, #424242 50%, #616161 100%); }
        .bg-marble { background: linear-gradient(135deg, #DCDCDC 0%, #F5F5F5 50%, #C8C8D2 100%); }
        .bg-stars { background: linear-gradient(135deg, #0F0C29 0%, #302B63 50%, #24243E 100%); }

        /* Pattern backgrounds - CSS approximations of PIL patterns */
        .bg-neon-dots {
            background: #0A0A1E;
            background-image: radial-gradient(circle, rgba(128,40,220,0.6) 2px, transparent 2px);
            background-size: 12px 12px;
        }
        .bg-gold-diamonds {
            background: #F5EBDC;
            background-image: 
                linear-gradient(45deg, rgba(200,160,60,0.35) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(200,160,60,0.35) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(200,160,60,0.35) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(200,160,60,0.35) 75%);
            background-size: 16px 16px;
            background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
        }
        .bg-teal-waves {
            background: #051E28;
            background-image: 
                repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0,150,160,0.3) 8px, rgba(0,150,160,0.3) 9px);
        }
        .bg-red-chevron {
            background: #FAF0F0;
            background-image: linear-gradient(135deg, rgba(200,60,80,0.3) 25%, transparent 25%),
                linear-gradient(225deg, rgba(200,60,80,0.3) 25%, transparent 25%);
            background-size: 20px 10px;
        }
        .bg-cyber-grid {
            background: #050A14;
            background-image:
                linear-gradient(rgba(0,80,140,0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,80,140,0.3) 1px, transparent 1px);
            background-size: 12px 12px;
        }
        .bg-hex-purple {
            background: #F0EBFA;
            background-image: radial-gradient(circle, rgba(150,80,200,0.4) 3px, transparent 3px);
            background-size: 14px 14px;
            background-position: 0 0, 7px 7px;
        }

        /* Preview card backgrounds */
        .preview-front.bg-back-neon_dots { background: #0A0A1E; background-image: radial-gradient(circle, rgba(128,40,220,0.6) 2px, transparent 2px); background-size: 14px 14px; }
        .preview-front.bg-back-gold_diamonds { background: #F5EBDC; background-image: linear-gradient(45deg, rgba(200,160,60,0.35) 25%, transparent 25%), linear-gradient(-45deg, rgba(200,160,60,0.35) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(200,160,60,0.35) 75%), linear-gradient(-45deg, transparent 75%, rgba(200,160,60,0.35) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
        .preview-front.bg-back-teal_waves { background: #051E28; background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0,150,160,0.3) 10px, rgba(0,150,160,0.3) 11px); }
        .preview-front.bg-back-red_chevron { background: #FAF0F0; background-image: linear-gradient(135deg, rgba(200,60,80,0.3) 25%, transparent 25%), linear-gradient(225deg, rgba(200,60,80,0.3) 25%, transparent 25%); background-size: 24px 12px; }
        .preview-front.bg-back-cyber_grid { background: #050A14; background-image: linear-gradient(rgba(0,80,140,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0,80,140,0.3) 1px, transparent 1px); background-size: 14px 14px; }
        .preview-front.bg-back-hex_purple { background: #F0EBFA; background-image: radial-gradient(circle, rgba(150,80,200,0.4) 3px, transparent 3px); background-size: 16px 16px; }

        /* Grid preview backgrounds */
        .pv-card-back.pv-bg-neon_dots { background: #0A0A1E; background-image: radial-gradient(circle, rgba(128,40,220,0.6) 1.5px, transparent 1.5px); background-size: 10px 10px; }
        .pv-card-back.pv-bg-gold_diamonds { background: #F5EBDC; background-image: linear-gradient(45deg, rgba(200,160,60,0.35) 25%, transparent 25%), linear-gradient(-45deg, rgba(200,160,60,0.35) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(200,160,60,0.35) 75%), linear-gradient(-45deg, transparent 75%, rgba(200,160,60,0.35) 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
        .pv-card-back.pv-bg-teal_waves { background: #051E28; background-image: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0,150,160,0.3) 8px, rgba(0,150,160,0.3) 9px); }
        .pv-card-back.pv-bg-red_chevron { background: #FAF0F0; background-image: linear-gradient(135deg, rgba(200,60,80,0.3) 25%, transparent 25%), linear-gradient(225deg, rgba(200,60,80,0.3) 25%, transparent 25%); background-size: 16px 8px; }
        .pv-card-back.pv-bg-cyber_grid { background: #050A14; background-image: linear-gradient(rgba(0,80,140,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0,80,140,0.3) 1px, transparent 1px); background-size: 10px 10px; }
        .pv-card-back.pv-bg-hex_purple { background: #F0EBFA; background-image: radial-gradient(circle, rgba(150,80,200,0.4) 2px, transparent 2px); background-size: 12px 12px; }

        /* Preview card background classes */
        .preview-front.bg-back-ocean { background: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #90E0EF 100%); }
        .preview-front.bg-back-sunset { background: linear-gradient(135deg, #FF5E4D 0%, #FF9A00 50%, #FFCE45 100%); }
        .preview-front.bg-back-forest { background: linear-gradient(135deg, #1B4332 0%, #2E7D32 50%, #81C784 100%); }
        .preview-front.bg-back-carbon { background: linear-gradient(135deg, #212121 0%, #424242 50%, #616161 100%); }
        .preview-front.bg-back-marble { background: linear-gradient(135deg, #DCDCDC 0%, #F5F5F5 50%, #C8C8D2 100%); }
        .preview-front.bg-back-stars { background: linear-gradient(135deg, #0F0C29 0%, #302B63 50%, #24243E 100%); }

        /* Grid preview card background classes */
        .pv-card-back.pv-bg-ocean { background: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #90E0EF 100%); }
        .pv-card-back.pv-bg-sunset { background: linear-gradient(135deg, #FF5E4D 0%, #FF9A00 50%, #FFCE45 100%); }
        .pv-card-back.pv-bg-forest { background: linear-gradient(135deg, #1B4332 0%, #2E7D32 50%, #81C784 100%); }
        .pv-card-back.pv-bg-carbon { background: linear-gradient(135deg, #212121 0%, #424242 50%, #616161 100%); }
        .pv-card-back.pv-bg-marble { background: linear-gradient(135deg, #DCDCDC 0%, #F5F5F5 50%, #C8C8D2 100%); }
        .pv-card-back.pv-bg-stars { background: linear-gradient(135deg, #0F0C29 0%, #302B63 50%, #24243E 100%); }

        .bg-custom {
            background: rgba(255,255,255,0.04);
            display: flex; align-items: center; justify-content: center;
            flex-direction: column; gap: 2px; width: auto; padding: 0 16px;
        }
        .bg-custom-icon {
            font-size: 20px; line-height: 1;
        }
        .bg-custom-text {
            font-size: 10px; color: var(--text-dim); font-weight: 500; white-space: nowrap;
        }

        .bg-label {
            font-size: 10px; color: var(--text-dim); text-align: center;
            margin-top: 6px; font-weight: 400;
        }

        .bg-option-wrap { display: flex; flex-direction: column; align-items: center; }

        /* Custom upload area */
        .custom-upload-area {
            display: none; margin-top: 12px; padding: 16px;
            background: rgba(255,255,255,0.03); border: 1px dashed var(--border);
            border-radius: var(--radius-sm); text-align: center;
        }
        .custom-upload-area.active { display: block; }
        .custom-upload-area p { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }

        .upload-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; background: rgba(255,255,255,0.08);
            border: 1px solid var(--border); border-radius: 8px;
            color: var(--text-body); font-family: var(--font); font-size: 13px;
            cursor: pointer; transition: background 0.2s;
        }
        .upload-btn:hover { background: rgba(255,255,255,0.12); }

        .upload-preview {
            display: none; margin-top: 10px;
        }
        .upload-preview img {
            width: 72px; height: 72px; border-radius: 8px; object-fit: cover;
            border: 2px solid var(--purple);
        }
        .upload-preview .upload-name {
            font-size: 12px; color: var(--text-dim); margin-top: 4px;
        }

        /* BUTTON */
        .btn {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; padding: 16px 24px; background: var(--gradient);
            color: #fff; font-family: var(--font); font-size: 16px; font-weight: 600;
            border: none; border-radius: var(--radius-sm); cursor: pointer;
            transition: transform 0.15s, box-shadow 0.3s;
            box-shadow: 0 4px 24px rgba(122,61,255,0.25);
        }
        .btn:hover { box-shadow: 0 6px 32px rgba(122,61,255,0.35); transform: translateY(-1px); }
        .btn:active { transform: translateY(0) scale(0.985); }
        .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
        .btn svg { width: 20px; height: 20px; }
        .rate-limit-note {
            margin-top: 10px;
            min-height: 20px;
            font-size: 12px;
            color: var(--text-dim);
            line-height: 1.45;
        }

        /* PROGRESS */
        .progress { display: none; margin-top: 24px; }
        .progress.active { display: block; }
        .progress-bar-track {
            width: 100%; height: 3px; background: rgba(255,255,255,0.06);
            border-radius: 2px; overflow: hidden; margin-bottom: 14px;
        }
        .progress-bar {
            height: 100%; border-radius: 2px; background: var(--gradient);
            animation: indeterminate 2s ease-in-out infinite;
        }
        @keyframes indeterminate {
            0% { width: 0%; margin-left: 0; }
            50% { width: 55%; margin-left: 25%; }
            100% { width: 0%; margin-left: 100%; }
        }
        .progress-text { font-size: 14px; color: var(--text-dim); text-align: center; }

        .year-magic-live {
            display: none;
            margin-top: 12px;
        }
        .year-magic-live.active { display: block; }
        .year-magic-live .ym-live-shell {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid rgba(79,124,255,0.35);
            background: linear-gradient(135deg, rgba(16,24,48,0.9) 0%, rgba(36,24,70,0.9) 55%, rgba(24,16,40,0.92) 100%);
            padding: 12px 14px;
        }
        .year-magic-live .ym-live-grid {
            position: absolute;
            inset: 0;
            opacity: 0.16;
            background-image:
                linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
            background-size: 16px 16px;
            animation: ymGridShift 6s linear infinite;
        }
        .year-magic-live .ym-live-head {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .year-magic-live .ym-live-orb {
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 30%, #A7C4FF, #4F7CFF 70%);
            box-shadow: 0 0 0 0 rgba(79,124,255,0.45);
            animation: ymPulse 1.5s ease-out infinite;
            flex-shrink: 0;
        }
        .year-magic-live .ym-live-copy { min-width: 0; }
        .year-magic-live .ym-live-title {
            font-size: 12px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #D5E2FF;
            font-weight: 600;
            line-height: 1.2;
        }
        .year-magic-live .ym-live-sub {
            margin-top: 2px;
            font-size: 13px;
            color: #F0F3FF;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .year-magic-live .ym-live-pill {
            margin-left: auto;
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: 1px;
            color: #fff;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.2);
            background: linear-gradient(135deg, rgba(79,124,255,0.7), rgba(122,61,255,0.72));
            flex-shrink: 0;
        }

        /* RESULT */
        .result { display: none; margin-top: 24px; }
        .result.active { display: block; }
        .result-success {
            background: var(--gradient-subtle);
            border: 1px solid rgba(122,61,255,0.25);
            border-radius: var(--radius); padding: 28px; text-align: center;
        }
        .result-success h3 { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
        .result-success p { font-size: 14px; color: var(--text-dim); margin-bottom: 18px; }
        .btn-download {
            display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
            background: var(--gradient); color: #fff; font-family: var(--font);
            font-size: 15px; font-weight: 600; text-decoration: none;
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 20px rgba(122,61,255,0.25);
            transition: box-shadow 0.3s, transform 0.15s;
        }
        .btn-download:hover { box-shadow: 0 6px 28px rgba(122,61,255,0.35); transform: translateY(-1px); }
        .result-error {
            background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.2);
            border-radius: var(--radius); padding: 20px; text-align: center;
        }
        .result-error p { color: var(--red); font-size: 14px; }

        .year-magic-result {
            margin-top: 12px;
            text-align: left;
            border: 1px solid rgba(79,124,255,0.35);
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(79,124,255,0.12) 0%, rgba(122,61,255,0.14) 45%, rgba(255,79,216,0.1) 100%);
            padding: 14px 16px;
        }
        .year-magic-result h4 {
            font-size: 13px;
            line-height: 1.3;
            margin-bottom: 6px;
            color: var(--text);
            letter-spacing: 0.3px;
        }
        .year-magic-result p {
            margin: 0;
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-body);
        }
        .year-magic-result .ymr-meta {
            margin-top: 6px;
            color: var(--text-dim);
            font-size: 11px;
        }
        .year-magic-result .ymr-list-title {
            margin-top: 10px;
            margin-bottom: 5px;
            font-size: 11px;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: var(--mono);
        }
        .year-magic-result .ymr-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .year-magic-result .ymr-list li {
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-body);
            padding-left: 12px;
            position: relative;
        }
        .year-magic-result .ymr-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.62em;
            width: 5px;
            height: 5px;
            border-radius: 999px;
            background: #6FA5FF;
            box-shadow: 0 0 12px rgba(111,165,255,0.5);
        }
        .year-magic-result .ymr-details {
            margin-top: 8px;
            border-top: 1px solid var(--border);
            padding-top: 6px;
        }
        .year-magic-result .ymr-details summary {
            cursor: pointer;
            color: var(--text-body);
            font-size: 12px;
            list-style: none;
        }
        .year-magic-result .ymr-details summary::-webkit-details-marker { display: none; }
        .pv-mini-btn {
            margin-top: 8px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text-body);
            font-family: var(--font);
            font-size: 12px;
            padding: 7px 10px;
            cursor: pointer;
        }
        .pv-mini-btn:hover { background: var(--surface-hover); }
        .pv-mini-btn.is-disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        @keyframes ymGridShift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(16px, 16px); }
        }
        @keyframes ymPulse {
            0% { box-shadow: 0 0 0 0 rgba(79,124,255,0.45); }
            70% { box-shadow: 0 0 0 8px rgba(79,124,255,0); }
            100% { box-shadow: 0 0 0 0 rgba(79,124,255,0); }
        }

        /* FOOTER */
        .footer {
            margin-top: 40px; padding-top: 24px;
            border-top: 1px solid var(--border); text-align: center;
        }
        .footer p { font-size: 13px; color: var(--text-dim); }
        .footer a {
            background: var(--gradient); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text;
            text-decoration: none; font-weight: 500;
        }
        .footer a:hover { text-decoration: underline; }

        /* RESPONSIVE */
        @media (max-width: 600px) {
            .page { padding: 16px 16px 80px; }
            .hero-page, .packs-page { padding: 16px 16px 80px; }
            .hero-shell, .packs-shell { padding: 18px; }
            .hero-title { font-size: 32px; }
            .hero-options { grid-template-columns: 1fr; }
            .packs-head { flex-direction: column; align-items: flex-start; }
            .packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .header h1 { font-size: 28px; }
            .steps { grid-template-columns: 1fr; gap: 8px; }
            .step { padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-align: left; }
            .step-num { margin-bottom: 0; font-size: 18px; flex-shrink: 0; }
            .step-text { font-size: 14px; line-height: 1.35; }
            .card { padding: 24px 20px; }
            .lang-toggle {
                position: static;
                width: 100%;
                border-radius: 0;
                justify-content: flex-end;
                padding: 8px 12px;
                gap: 6px;
                border-left: none;
                border-right: none;
                border-top: none;
            }
            .user-name { display: none; }
            .playlist-context { gap: 8px; }
            .playlist-prefix { font-size: 10px; letter-spacing: 1px; }
            .playlist-name { font-size: 20px; }
            .bg-picker { gap: 10px; }
            .bg-option { width: 62px; height: 62px; }
            .bg-section { grid-template-columns: 1fr; }
            .preview-card-wrap { flex-direction: column; gap: 10px; align-items: center; }
            .preview-flip-card { width: 120px; height: 120px; }
            .mode-toggle { grid-template-columns: 1fr; }
            .mode-btn { padding: 12px 14px; }
            .year-magic-live .ym-live-pill { display: none; }
            .year-magic-live .ym-live-sub { white-space: normal; }
            .builder-hero-header .hero-title { font-size: 26px; }
            .builder-hero-header .hero-sub { font-size: 13px; padding: 0 10px; }
            .builder-pack-header-name { max-width: 100px; }
            .builder-grid { grid-template-columns: 1fr !important; height: auto !important; }
            .builder-catalog { border-right: none; border-bottom: 1px solid var(--border); max-height: 50vh; }
            .builder-browse { grid-template-columns: 1fr !important; }
            .builder-artists { max-height: 200px; border-right: none !important; border-bottom: 1px solid var(--border); }
            .builder-pack { min-height: 250px; }
            .builder-actions { flex-wrap: wrap; gap: 4px; }
            .builder-actions .builder-pack-selector { width: 100%; }
            .builder-actions .builder-pack-selector-trigger { width: 100%; justify-content: space-between; }
            .builder-pack-selector-trigger .pack-sel-label { max-width: none; }
            .builder-network-add { width: 28px; height: 28px; font-size: 18px; }
        }

        /* === PACK BUILDER === */
        .builder-hero-header { text-align: center; margin-bottom: 12px; }
        .builder-hero-header .logo { margin-bottom: 6px; }
        .builder-hero-header .hero-title { margin-bottom: 4px; }
        .builder-hero-header .hero-sub { margin: 0 auto 0; }
        .builder-page { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 16px 24px 24px; }
        .builder-shell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; }
        .builder-top { display: none; }
        .builder-input { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 13px; transition: border-color 0.2s; }
        .builder-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--glow-purple); }
        .builder-input-highlight { border-color: #ff4444; box-shadow: 0 0 0 3px rgba(255,68,68,0.25); }
        .builder-input-highlight:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--glow-purple); }
        .builder-select { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 13px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A3DFF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
        .builder-select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--glow-purple); }
        .builder-count { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
        .builder-count strong { color: var(--text); font-weight: 700; }
        .builder-col-header {
            padding: 12px 16px; border-bottom: 1px solid var(--border);
            background: var(--gradient-subtle);
            font: 600 11px var(--mono); text-transform: uppercase;
            letter-spacing: 1.2px; color: var(--text-dim);
            text-align: center;
        }
        .builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: calc(100vh - 160px); min-height: 400px; max-height: 900px; }

        /* Catalog left */
        .builder-catalog { border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; overflow: hidden; }
        .builder-search { display: flex; align-items: center; gap: 0; padding: 0; border-bottom: 1px solid var(--border); position: relative; }
        .builder-search-icon { padding: 14px 0 14px 16px; font-size: 16px; color: var(--text-dim); flex-shrink: 0; line-height: 1; }
        .builder-mega-search { flex: 1; border: none !important; border-radius: 0 !important; background: transparent !important; padding: 14px 14px !important; font-size: 15px !important; box-shadow: none !important; }
        .builder-mega-search:focus { box-shadow: none !important; }
        .builder-browse-toggle { flex-shrink: 0; padding: 8px 14px; margin: 8px 10px 8px 0; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; transition: all 0.15s; }
        .builder-browse-toggle:hover { background: var(--surface-hover); color: var(--text); }
        .builder-browse-toggle.active { background: var(--gradient-subtle); color: var(--text); border-color: rgba(122,61,255,0.3); }
        .builder-search-results { flex: 1; overflow-y: auto; }
        .builder-search-hint { color: var(--text-dim); text-align: center; padding: 40px 20px; font-size: 14px; line-height: 1.6; }
        .builder-browse-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
        .builder-letters { display: flex; flex-wrap: wrap; gap: 3px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
        .builder-letter { padding: 5px 8px; border-radius: 6px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s; font-family: var(--font); }
        .builder-letter:hover { background: var(--surface-hover); color: var(--text); }
        .builder-letter.active { background: var(--gradient-subtle); color: var(--text); border: 1px solid rgba(122,61,255,0.3); }
        .builder-letter-count { font-size: 10px; color: var(--text-dim); margin-left: 2px; }
        .builder-browse { display: grid; grid-template-columns: 220px 1fr; flex: 1; overflow: hidden; }
        .builder-artists { border-right: 1px solid var(--border); overflow-y: auto; }
        .builder-artist { padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; justify-content: space-between; transition: background 0.15s; }
        .builder-artist:hover { background: var(--surface-hover); }
        .builder-artist.active { background: var(--gradient-subtle); }
        .builder-artist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-body); }
        .builder-artist-count { color: var(--text-dim); font-size: 11px; flex-shrink: 0; margin-left: 8px; }
        .builder-tracks { overflow-y: auto; display: flex; flex-direction: column; }

        /* Tracks table */
        .builder-tracks-table { flex: 1; overflow-y: auto; }
        .builder-track-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 13px; transition: background 0.1s; cursor: pointer; }
        .builder-track-row:hover { background: var(--surface-hover); }
        .builder-track-info { flex: 1; min-width: 0; }
        .builder-track-title { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .builder-track-artist { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .builder-track-year { color: var(--text-dim); font-size: 12px; flex-shrink: 0; min-width: 36px; text-align: right; }
        .builder-track-status { flex-shrink: 0; }

        /* + button */
        .builder-add { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(74,222,128,0.3); background: rgba(74,222,128,0.06); color: #4ade80; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.2s; font-family: var(--font); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .builder-add:hover { background: rgba(74,222,128,0.15); border-color: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.2); transform: scale(1.1); }
        .builder-add:disabled { border-color: rgba(122,61,255,0.25); background: rgba(122,61,255,0.08); color: var(--purple); opacity: 0.5; cursor: default; box-shadow: none; transform: none; font-size: 13px; }

        /* Paging */
        .builder-paging { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
        .builder-paging button { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-body); cursor: pointer; font-family: var(--font); font-size: 12px; transition: background 0.15s; }
        .builder-paging button:hover { background: var(--surface-hover); }
        .builder-paging button:disabled { opacity: 0.3; cursor: default; }
        .builder-paging-info { font-size: 12px; color: var(--text-dim); }

        /* Pack right */
        .builder-pack { display: flex; flex-direction: column; overflow: hidden; }
        .builder-pack-header { display: flex; align-items: center; justify-content: center; gap: 4px; }
        input.builder-pack-header-name {
            border: none; background: transparent; color: var(--text-dim);
            font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 1.2px;
            text-align: center; padding: 0; margin: 0; min-width: 50px; max-width: 180px; width: auto;
            line-height: 1; box-shadow: none; border-radius: 0;
        }
        input.builder-pack-header-name:focus { outline: none; background: rgba(122,61,255,0.1); border-radius: 4px; color: var(--text); padding: 2px 6px; box-shadow: none; border: none; }
        input.builder-pack-header-name::placeholder { color: var(--text-dim); opacity: 0.5; }
        .builder-pack-header-sep { color: var(--text-dim); font-size: 11px; }
        .builder-pack-header-count { font-family: var(--mono); font-size: 11px; color: var(--purple); flex-shrink: 0; }
        .builder-pack-body { flex: 1; overflow-y: auto; padding: 2px 0; }
        .builder-song { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 12px; transition: background 0.1s; }
        .builder-song:hover { background: var(--surface-hover); }
        .builder-song.dragging { opacity: 0.3; }
        .builder-song.drag-over { border-top: 2px solid var(--purple); }
        .builder-song-num { color: var(--text-dim); font-size: 10px; font-family: var(--mono); min-width: 20px; text-align: right; flex-shrink: 0; }
        .builder-song-info { flex: 1; min-width: 0; }
        .builder-song-title { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
        .builder-song-artist { color: var(--text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .builder-drag { cursor: grab; color: var(--text-dim); user-select: none; font-size: 12px; }
        .builder-song-play { flex-shrink: 0; color: var(--text-dim); opacity: 0.4; transition: all 0.15s; display: flex; align-items: center; margin-right: 6px; }
        .builder-song-play:hover { opacity: 1; color: #1DB954; }
        .builder-song-play .builder-spotify-icon { width: 16px; height: 16px; }
        .builder-remove { padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(255,107,107,0.2); background: transparent; color: rgba(255,107,107,0.5); cursor: pointer; font-size: 11px; transition: all 0.15s; }
        .builder-remove:hover { background: rgba(255,107,107,0.1); color: var(--red); }

        /* Footer */
        .builder-pack-footer { border-top: 1px solid var(--border); padding: 6px 10px; }
        .builder-actions { display: flex; gap: 5px; align-items: stretch; }
        .builder-action-btn {
            flex: 1; padding: 8px 0; font-size: 12px; font-weight: 600; font-family: var(--font);
            border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
            color: var(--text-body); cursor: pointer; transition: all 0.15s; white-space: nowrap;
            text-align: center;
        }
        .builder-action-btn:hover { background: var(--surface-hover); border-color: var(--border-hover); }
        .builder-action-btn:disabled { opacity: 0.4; cursor: default; }
        .builder-action-btn.builder-action-primary { background: rgba(122,61,255,0.12); border-color: rgba(122,61,255,0.3); color: var(--purple); }
        .builder-action-btn.builder-action-primary:hover { background: rgba(122,61,255,0.2); }
        .builder-action-btn.builder-action-cta { background: var(--gradient); border: none; color: #fff; box-shadow: 0 2px 8px var(--glow-purple); display: flex; flex-direction: column; align-items: center; gap: 1px; }
        .builder-action-btn.builder-action-cta:hover { box-shadow: 0 4px 14px var(--glow-purple); }
        .builder-action-btn.builder-action-cta:disabled { opacity: 0.4; box-shadow: none; }
        .builder-cta-sub { font-size: 9px; font-weight: 400; opacity: 0.75; }
        .builder-msg { font-size: 11px; min-height: 0; margin-bottom: 2px; }
        .builder-msg:empty { display: none; }

        /* Pack selector dropdown */
        .builder-pack-selector { position: relative; flex: 1; }
        .builder-pack-selector-trigger {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            width: 100%; padding: 8px 0; border-radius: 6px;
            border: 1px solid var(--border); background: var(--surface);
            color: var(--text-body); font-family: var(--font); font-size: 12px; font-weight: 600;
            cursor: pointer; transition: all 0.15s; white-space: nowrap;
        }
        .builder-pack-selector-trigger:hover { border-color: var(--border-hover); }
        .builder-pack-selector-trigger .pack-sel-arrow { font-size: 10px; color: var(--text-dim); transition: transform 0.2s; }
        .builder-pack-selector.open .pack-sel-arrow { transform: rotate(180deg); }
        .builder-pack-selector-trigger .pack-sel-label { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
        .builder-pack-dropdown {
            display: none; position: absolute; bottom: calc(100% + 4px); left: 0;
            z-index: 60; min-width: 260px; max-height: 280px; overflow-y: auto;
            background: var(--bg); border: 1px solid var(--border);
            border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        }
        .builder-pack-selector.open .builder-pack-dropdown { display: block; }
        .builder-pack-dropdown::-webkit-scrollbar { width: 5px; }
        .builder-pack-dropdown::-webkit-scrollbar-track { background: transparent; }
        .builder-pack-dropdown::-webkit-scrollbar-thumb { background: rgba(122,61,255,0.25); border-radius: 3px; }
        .builder-pack-dropdown-item {
            display: flex; align-items: center; gap: 8px; padding: 10px 14px;
            cursor: pointer; font-size: 13px; transition: background 0.1s;
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .builder-pack-dropdown-item:hover { background: var(--surface-hover); }
        .builder-pack-dropdown-item.active { background: var(--gradient-subtle); }
        .builder-pack-dropdown-name { flex: 1; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .builder-pack-dropdown-count { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
        .builder-pack-dropdown-del {
            border: 1px solid transparent; background: transparent; color: var(--text-dim);
            border-radius: 6px; padding: 2px 6px; font-size: 14px; line-height: 1;
            cursor: pointer; transition: all 0.15s;
        }
        .builder-pack-dropdown-del:hover { background: rgba(255, 80, 80, 0.12); color: #ff6b6b; border-color: rgba(255, 80, 80, 0.25); }
        .builder-pack-dropdown-empty { padding: 14px; text-align: center; color: var(--text-dim); font-size: 12px; }

        .builder-pack-status {
            font-size: 9px; padding: 2px 6px; border-radius: 4px; font-family: var(--mono);
            text-transform: uppercase; letter-spacing: 0.5px;
        }
        .builder-pack-status-draft { background: rgba(122,61,255,0.15); color: var(--purple); }
        .builder-pack-status-designed { background: rgba(79,124,255,0.15); color: var(--blue); }
        .builder-pack-status-generated { background: rgba(46,204,113,0.15); color: #2ecc71; }
        .builder-msg.success { color: #4ade80; }
        .builder-msg.error { color: var(--red); }

        /* Status pills */
        .builder-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; }
        .builder-pill-green { background: rgba(74,222,128,0.12); color: #4ade80; }
        .builder-pill-orange { background: rgba(255,165,0,0.12); color: #ffa500; }
        .builder-pill-yellow { background: rgba(255,220,92,0.12); color: #ffdc5c; }
        .builder-pill-red { background: rgba(255,107,107,0.12); color: #ff6b6b; }
        .builder-pill-unverified { background: rgba(255,255,255,0.06); color: var(--text-dim); }

        /* Empty state */
        .builder-empty { color: var(--text-dim); text-align: center; padding: 80px 20px; font-size: 14px; }
        .builder-empty::before { content: '\1F3B5'; display: block; font-size: 36px; margin-bottom: 12px; opacity: 0.4; }

        /* Hero builder card */
        .hero-card-builder { background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, rgba(79,124,255,0.12) 55%, rgba(122,61,255,0.08) 100%); }

        /* ID status */
        #bldIdStatus { font-size: 12px; }
        #bldIdStatus.available { color: #4ade80; }
        #bldIdStatus.taken { color: var(--red); }

        /* === Suggest dropdown === */
        .builder-suggest { position:absolute; left:0; right:0; top:100%; z-index:50;
          background:var(--bg); border:1px solid var(--border); border-top:none;
          border-radius:0 0 var(--radius-sm) var(--radius-sm);
          box-shadow:0 8px 24px rgba(0,0,0,0.4); max-height:360px; overflow-y:auto; }
        .builder-suggest-section { padding:6px 0; }
        .builder-suggest-label { padding:4px 16px; font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); font-family:var(--mono); }
        .builder-suggest-divider { border-top:1px solid var(--border); margin:4px 14px; }
        .builder-suggest-item { display:flex; align-items:center; gap:10px; padding:10px 16px;
          cursor:pointer; transition:background 0.1s; }
        .builder-suggest-item:hover, .builder-suggest-item.active { background:var(--surface-hover); }
        .builder-suggest-type { font-size:16px; flex-shrink:0; width:24px; text-align:center; }
        .builder-suggest-info { flex:1; min-width:0; }
        .builder-suggest-name { font-size:14px; color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .builder-suggest-sub { font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .builder-suggest-count { font-size:12px; color:var(--text-dim); flex-shrink:0; }
        .builder-suggest-add { padding:3px 10px; border-radius:5px; border:1px solid rgba(74,222,128,0.3); background:rgba(74,222,128,0.06); color:#4ade80; cursor:pointer; font-size:11px; transition:all 0.15s; font-family:var(--font); flex-shrink:0; }
        .builder-suggest-add:hover { background:rgba(74,222,128,0.15); }
        .builder-suggest-add:disabled { opacity:0.25; cursor:default; }

        /* Spotify link */
        .builder-spotify-link { display:inline-flex; align-items:center; justify-content:center;
          width:28px; height:28px; border-radius:50%; background:transparent;
          color:var(--text-dim); text-decoration:none; flex-shrink:0; transition:color 0.15s, background 0.15s; }
        .builder-spotify-link:hover { color:#1DB954; background:rgba(29,185,84,0.1); }
        .builder-spotify-icon { width:16px; height:16px; display:block; }
        .builder-spotify-link-sm .builder-spotify-icon { width:14px; height:14px; }

        /* Duplicate warning */
        .builder-msg-warn { color: #ffa500; }

        /* === Artist cards (above search results) === */
        .builder-artist-card {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; margin-bottom: 6px;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
        }
        .builder-artist-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
        .builder-artist-card-icon { font-size: 20px; flex-shrink: 0; }
        .builder-artist-card-name { font-weight: 600; font-size: 14px; color: var(--text-primary, #fff); flex: 1; }
        .builder-artist-card-count { font-size: 12px; color: var(--text-dim, #888); white-space: nowrap; }
        .builder-artist-card-arrow { font-size: 20px; color: var(--text-dim, #888); flex-shrink: 0; font-weight: bold; }

        /* === Artist badge (in search bar) === */
        .builder-search-wrap { display:flex; align-items:center; flex:1; gap:0; min-width:0; }
        .builder-artist-badge { display:inline-flex; align-items:center; gap:4px;
          padding:4px 8px 4px 10px; border-radius:6px; font-size:12px; font-weight:500;
          background:var(--gradient-subtle); color:var(--text); border:1px solid rgba(122,61,255,0.3);
          white-space:nowrap; margin-left:10px; flex-shrink:0; }
        .builder-badge-close { background:none; border:none; color:var(--text-dim);
          cursor:pointer; font-size:14px; padding:0 2px; line-height:1; }
        .builder-badge-close:hover { color:var(--red); }

        /* === Artist header (catalog view) === */
        .builder-artist-header { display:flex; align-items:center; gap:12px;
          padding:14px 16px; border-bottom:1px solid var(--border);
          background:var(--gradient-subtle); }
        .builder-artist-back { background:none; border:1px solid var(--border);
          border-radius:6px; padding:6px 10px; color:var(--text-body);
          cursor:pointer; font-size:14px; }
        .builder-artist-back:hover { background:var(--surface-hover); }
        .builder-artist-info h3 { font-size:18px; color:var(--text); font-weight:700; margin:0; }
        .builder-artist-info span { font-size:12px; color:var(--text-dim); }

        /* === Network hints (track recommendations) === */
        .builder-network-hints { border-top: 1px solid var(--border); background: var(--gradient-subtle); }
        .builder-network-header { display: flex; align-items: center; gap: 6px; padding: 4px 10px;
            cursor: pointer; font-size: 11px; color: var(--text-dim); }
        .builder-network-header:hover { color: var(--text); }
        .builder-network-toggle { transition: transform 0.2s; font-size: 9px; flex-shrink: 0; }
        .builder-network-toggle.open { transform: rotate(90deg); }
        .builder-network-label { flex: 1; display: flex; align-items: baseline; gap: 6px; }
        .builder-network-label-title { font-weight: 600; color: var(--text-body); font-size: 11px; }
        .builder-network-label-sub { font-size: 9px; color: var(--text-dim); font-weight: 400; }
        .builder-network-count { font-family: var(--mono); font-size: 10px; color: var(--purple); font-weight: 400; }
        .builder-network-list { padding: 0; }
        .builder-network-item { display: flex; align-items: center; gap: 6px; padding: 2px 10px;
            font-size: 11px; transition: background 0.1s; }
        .builder-network-item:hover { background: rgba(255,255,255,0.04); }
        .builder-network-info { flex: 1; min-width: 0; }
        .builder-network-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
        .builder-network-sub { font-size: 11px; color: var(--text-dim); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
        .builder-network-add { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(74,222,128,0.35); background: transparent; color: #4ade80; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.2s; font-family: var(--font); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .builder-network-add:hover { background: rgba(74,222,128,0.12); border-color: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.2); transform: scale(1.1); }
        .builder-network-add:disabled { opacity: 0.2; cursor: default; transform: none; box-shadow: none; }
        .builder-network-refresh { background: none; border: 1px solid var(--border); border-radius: 5px;
            color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 1px 6px; line-height: 1;
            transition: all 0.15s; flex-shrink: 0; }
        .builder-network-refresh:hover { background: var(--surface-hover); color: var(--text); }
        .builder-network-score { font-size: 9px; color: var(--text-dim); font-family: var(--mono); }