/* Extracted from /_design-samples/neon/ and used by the real multisite theme loader. */
/* =========================================================
       NEON SYNTHWAVE ג€” design tokens
       ========================================================= */
    :root {
        --bg-deep: #0a021a;
        --bg-near: #1a0533;
        --pink: #ff2e92;
        --pink-soft: #ff6dba;
        --cyan: #00f0ff;
        --cyan-soft: #5cf6ff;
        --purple: #a020f0;
        --yellow: #ffea00;
        --text: #ffffff;
        --text-dim: rgba(255, 255, 255, 0.78);
        --text-faint: rgba(255, 255, 255, 0.5);
        --card-bg: rgba(15, 5, 35, 0.7);
        --card-border: rgba(255, 46, 146, 0.3);
        --radius-lg: 16px;
        --radius-md: 10px;
        --radius-sm: 6px;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; min-height: 100vh; }

    body {
        font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--text);
        background: var(--bg-deep);
        overflow-x: hidden;
    }

    /* The signature animated horizontal gradient backdrop */
    .neon-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        background: linear-gradient(135deg,
            #1a0533 0%,
            #2d0a4e 20%,
            #5e1075 40%,
            #a020f0 55%,
            #ff2e92 75%,
            #00f0ff 100%);
        background-size: 250% 250%;
        animation: gradientShift 18s ease-in-out infinite alternate;
        opacity: 0.45;
    }
    @keyframes gradientShift {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 50% 100%; }
    }

    /* Synthwave grid floor */
    .neon-grid {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200vw;
        height: 60vh;
        background-image:
            linear-gradient(0deg, rgba(255, 46, 146, 0.6) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 240, 255, 0.6) 1px, transparent 1px);
        background-size: 60px 60px;
        transform-origin: 50% 100%;
        transform: translateX(-50%) perspective(600px) rotateX(60deg);
        animation: gridScroll 8s linear infinite;
        z-index: 0;
        pointer-events: none;
        mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
        -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
    }
    @keyframes gridScroll {
        from { background-position: 0 0; }
        to   { background-position: 0 60px; }
    }

    /* Sun on horizon */
    .neon-sun {
        position: fixed;
        bottom: 35vh;
        left: 50%;
        transform: translateX(-50%);
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: linear-gradient(180deg, #ffea00 0%, #ff6dba 50%, #a020f0 100%);
        box-shadow:
            0 0 80px rgba(255, 46, 146, 0.6),
            0 0 200px rgba(160, 32, 240, 0.4);
        z-index: 0;
        pointer-events: none;
    }
    .neon-sun::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 30px,
            rgba(10, 2, 26, 1) 30px,
            rgba(10, 2, 26, 1) 38px);
        bottom: 50%;
        top: auto;
        height: 50%;
        opacity: 0.55;
    }

    /* Dark veil over backdrop so cards are readable */
    .neon-veil {
        position: fixed;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(ellipse at 50% 80%, transparent 0%, rgba(10, 2, 26, 0.7) 70%),
            linear-gradient(180deg, rgba(10, 2, 26, 0.4) 0%, rgba(10, 2, 26, 0.85) 100%);
        pointer-events: none;
    }

    nav, section, .container, .sample-footer, .theme-switcher { position: relative; z-index: 1; }

    h1, h2, h3, h4 { font-family: "Outfit", sans-serif; font-weight: 800; letter-spacing: -0.02em; }

    a { color: var(--cyan); text-decoration: none; }
    a:hover { color: var(--cyan-soft); text-shadow: 0 0 8px var(--cyan); }

    /* =========================================================
       THEME SWITCHER
       ========================================================= */
    .theme-switcher {
        position: fixed;
        top: 14px;
        right: 14px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 8px;
        background: rgba(15, 5, 35, 0.85);
        backdrop-filter: blur(16px);
        border: 1px solid var(--pink);
        border-radius: 8px;
        z-index: 1100;
        box-shadow: 0 0 20px rgba(255, 46, 146, 0.4);
    }
    .theme-switcher-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--cyan);
        padding: 0 8px;
    }
    .theme-switch-btn {
        font-family: "Outfit", sans-serif;
        font-size: 12px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 4px;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: all 0.2s ease;
    }
    .theme-switch-btn:hover { color: #fff; background: rgba(255, 46, 146, 0.15); }
    .theme-switch-btn.is-active {
        background: var(--pink);
        color: #fff;
        box-shadow: 0 0 12px var(--pink);
    }
    .theme-switch-home { padding: 6px 10px; opacity: 0.5; font-size: 14px; }

    /* =========================================================
       NAVBAR
       ========================================================= */
    .navbar {
        background: rgba(15, 5, 35, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--card-border);
        box-shadow: 0 0 30px rgba(160, 32, 240, 0.2);
    }
    .navbar-brand {
        font-family: "Outfit", sans-serif;
        font-size: 22px;
        font-weight: 900;
        color: #fff !important;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        text-shadow: 0 0 12px var(--pink);
    }
    .brand-star { color: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }
    .nav-link {
        color: var(--text-dim) !important;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition: all 0.2s ease;
    }
    .nav-link:hover { color: var(--cyan) !important; text-shadow: 0 0 8px var(--cyan); }

    /* =========================================================
       HERO
       ========================================================= */
    .model-hero { padding: 90px 0 50px; }
    .model-hero-inner {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 48px;
        align-items: center;
    }
    @media (max-width: 900px) { .model-hero-inner { grid-template-columns: 1fr; } }

    .model-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 16px;
        border-radius: 4px;
        background: rgba(0, 240, 255, 0.12);
        border: 1px solid var(--cyan);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--cyan);
        box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
        margin-bottom: 22px;
    }
    .model-hero-title {
        font-size: clamp(46px, 7vw, 84px);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 0.95;
        margin: 0 0 24px;
        color: #fff;
        text-transform: uppercase;
        text-shadow:
            0 0 30px rgba(255, 46, 146, 0.6),
            0 0 60px rgba(160, 32, 240, 0.4);
    }
    .model-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 4px;
        background: var(--cyan);
        color: var(--bg-deep);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        vertical-align: middle;
        margin-left: 12px;
        box-shadow: 0 0 16px var(--cyan);
        text-shadow: none;
    }
    .model-hero-desc {
        font-size: 18px;
        line-height: 1.6;
        color: var(--text-dim);
        max-width: 56ch;
        margin: 0 0 32px;
    }
    .model-hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
    .stat { display: flex; flex-direction: column; gap: 4px; }
    .stat-num {
        font-family: "JetBrains Mono", monospace;
        font-size: 28px;
        font-weight: 700;
        color: var(--cyan);
        text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    }
    .stat-num .fa-star { color: var(--yellow); font-size: 18px; margin-left: 2px; text-shadow: 0 0 8px var(--yellow); }
    .stat-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-faint);
    }

    .model-hero-art { position: relative; height: 380px; }
    .hero-art-tile {
        position: absolute;
        border-radius: 8px;
        background-size: cover;
        box-shadow: 0 0 30px rgba(255, 46, 146, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    .hero-art-tile-1 { top: 8%;   left: 5%;  width: 48%; height: 58%;
        background: linear-gradient(135deg, #ff2e92, #00f0ff); }
    .hero-art-tile-2 { top: 4%;   right: 6%; width: 38%; height: 44%;
        background: linear-gradient(135deg, #a020f0, #ff2e92);
        box-shadow: 0 0 30px rgba(160, 32, 240, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2); }
    .hero-art-tile-3 { bottom: 6%; left: 28%; width: 38%; height: 42%;
        background: linear-gradient(135deg, #00f0ff, #a020f0);
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2); }
    .hero-art-tile-4 { bottom: 10%; right: 4%; width: 32%; height: 38%;
        background: linear-gradient(135deg, #ffea00, #ff2e92);
        box-shadow: 0 0 30px rgba(255, 234, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2); }

    /* =========================================================
       PANELS
       ========================================================= */
    .panel {
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        padding: 28px;
        position: relative;
        box-shadow: 0 0 40px rgba(255, 46, 146, 0.15), 0 0 0 1px rgba(255, 46, 146, 0.2);
    }
    .panel::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: linear-gradient(135deg, var(--pink), var(--purple), var(--cyan));
        z-index: -1;
        opacity: 0.4;
        filter: blur(14px);
    }
    .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--card-border);
    }
    .panel-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin: 0;
        color: var(--cyan);
        display: flex;
        align-items: center;
        gap: 12px;
        text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
    }
    .panel-icon-btn {
        font-size: 14px;
        color: var(--text-faint);
        cursor: pointer;
        padding: 7px;
        border-radius: 4px;
        transition: all 0.15s ease;
    }
    .panel-icon-btn:hover { color: var(--pink); text-shadow: 0 0 8px var(--pink); }

    /* =========================================================
       FORM ELEMENTS
       ========================================================= */
    .form-group { margin-bottom: 22px; }
    .form-group > label > strong {
        font-family: "Outfit", sans-serif;
        font-size: 14px;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .description {
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-dim);
        margin: 4px 0 12px;
    }
    /* Lift the field above the synthwave panel with a frosted surface and a
       stronger pink border so empty inputs don't vanish into the near-black bg.
       The original pure-black fill (rgba(0,0,0,0.5)) over the dark purple gradient
       made fields almost invisible until clicked. Inset well + outer pink halo
       reinforce that this is an interactive recessed surface. */
    .form-control, .form-select {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 46, 146, 0.5) !important;
        border-radius: var(--radius-sm) !important;
        color: #fff !important;
        padding: 12px 14px !important;
        font-family: inherit;
        font-size: 14px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 46, 146, 0.08) !important;
        transition: all 0.15s ease;
    }
    .form-control:hover, .form-select:hover {
        border-color: var(--pink-soft) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 46, 146, 0.2) !important;
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--cyan) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 0 0 1px var(--cyan), 0 0 20px rgba(0, 240, 255, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        outline: none;
    }
    textarea.form-control { min-height: 140px; resize: vertical; line-height: 1.55; }
    /* Stronger than --text-faint (0.5) so placeholder text is comfortably readable
       on the new lighter frosted field surface. */
    .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }

    .file-upload {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 28px 16px;
        border: 1.5px dashed var(--pink);
        border-radius: var(--radius-md);
        background: rgba(255, 46, 146, 0.05);
        cursor: pointer;
        transition: all 0.2s ease;
        color: var(--text-dim);
        font-size: 14px;
    }
    .file-upload:hover {
        border-color: var(--cyan);
        background: rgba(0, 240, 255, 0.08);
        color: #fff;
        box-shadow: 0 0 24px rgba(0, 240, 255, 0.3) inset;
    }
    .file-upload .fa-upload { font-size: 18px; color: var(--cyan); }
    .file-upload input[type="file"] {
        position: absolute; inset: 0; opacity: 0; cursor: pointer;
    }

    .btn-enhance {
        margin-top: 12px;
        background: transparent !important;
        color: var(--cyan) !important;
        border: 1px solid var(--cyan) !important;
        border-radius: 6px !important;
        padding: 9px 18px !important;
        font-family: "Outfit", sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: all 0.2s ease;
    }
    .btn-enhance:hover {
        background: var(--cyan) !important;
        color: var(--bg-deep) !important;
        box-shadow: 0 0 20px var(--cyan);
    }

    .btn-group .btn-outline-light {
        background: rgba(0, 0, 0, 0.4) !important;
        border-color: var(--card-border) !important;
        color: var(--text-dim) !important;
        padding: 12px 8px !important;
        font-family: "Outfit", sans-serif;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.15s ease;
    }
    .btn-group .btn-outline-light:hover {
        color: var(--cyan) !important;
        border-color: var(--cyan) !important;
        background: rgba(0, 240, 255, 0.06) !important;
    }
    .btn-check:checked + .btn-outline-light {
        background: linear-gradient(135deg, var(--pink), var(--purple)) !important;
        border-color: var(--pink) !important;
        color: #fff !important;
        box-shadow: 0 0 16px rgba(255, 46, 146, 0.6) !important;
    }
    .btn-group .btn-outline-light small {
        color: inherit;
        opacity: 0.8;
        font-size: 11px;
        font-family: "JetBrains Mono", monospace;
    }

    .ratio-row { gap: 8px; }
    .ratio-row input[type="radio"] { display: none; }
    .ratio-box {
        width: 80px; height: 80px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid var(--card-border);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .ratio-row label:hover .ratio-box {
        border-color: var(--cyan);
        box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
        transform: translateY(-2px);
    }
    .ratio-shape {
        background: rgba(255, 255, 255, 0.15);
        color: var(--text-dim);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 600;
        display: flex; align-items: center; justify-content: center;
        border-radius: 3px;
        transition: all 0.2s ease;
    }
    .circle-ratio .ratio-shape { border-radius: 50%; }
    input[type="radio"]:checked + label .ratio-box {
        background: rgba(255, 46, 146, 0.2);
        border-color: var(--pink);
        box-shadow: 0 0 0 2px var(--pink), 0 0 24px var(--pink);
    }
    input[type="radio"]:checked + label .ratio-shape {
        background: linear-gradient(135deg, var(--pink), var(--cyan));
        color: #fff;
    }

    /* Match the lifted frosted field surface so checkboxes don't vanish either. */
    .form-check-input {
        background-color: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 46, 146, 0.5) !important;
        cursor: pointer;
    }
    .form-check-input:checked {
        background-color: var(--pink) !important;
        border-color: var(--pink) !important;
        box-shadow: 0 0 12px var(--pink);
    }
    .form-check-input:focus { box-shadow: 0 0 0 3px rgba(255, 46, 146, 0.25) !important; }

    .advanced { position: relative; padding-left: 14px; }
    .advanced::before {
        content: '';
        position: absolute;
        left: 0; top: 4px; bottom: 4px;
        width: 2px;
        background: linear-gradient(180deg, var(--pink), var(--cyan));
        border-radius: 2px;
        box-shadow: 0 0 8px var(--pink);
    }

    /* RUN BUTTON ג€” full neon */
    .run-row { display: flex; align-items: center; margin-top: 28px; }
    .super-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 16px 36px;
        background: var(--bg-deep);
        border: 2px solid var(--pink);
        border-radius: 8px;
        color: #fff;
        font-family: "Outfit", sans-serif;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.2s ease;
        box-shadow:
            0 0 24px rgba(255, 46, 146, 0.6),
            inset 0 0 24px rgba(255, 46, 146, 0.2);
        text-shadow: 0 0 8px var(--pink);
    }
    .super-button::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
            transparent,
            rgba(0, 240, 255, 0.3),
            transparent);
        animation: scan 3s ease-in-out infinite;
    }
    @keyframes scan {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    .super-button:hover {
        border-color: var(--cyan);
        box-shadow:
            0 0 40px rgba(0, 240, 255, 0.8),
            inset 0 0 24px rgba(0, 240, 255, 0.3);
        text-shadow: 0 0 12px var(--cyan);
    }
    .super-button .arrow {
        width: 22px; height: 22px;
        color: var(--cyan);
        transition: transform 0.2s ease;
    }
    .super-button:hover .arrow { transform: translateX(6px); }

    .allowance {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        color: var(--cyan);
        margin-top: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* OUTPUT */
    .output-container {
        min-height: 540px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }
    .output-empty { text-align: center; color: var(--text-dim); }
    .output-empty-icon {
        width: 80px; height: 80px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.5);
        border: 2px solid var(--cyan);
        display: flex; align-items: center; justify-content: center;
        font-size: 32px;
        color: var(--cyan);
        margin: 0 auto 18px;
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    }
    .output-empty h3 {
        font-size: 20px;
        margin: 0 0 8px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .output-empty p { font-size: 14px; max-width: 36ch; margin: 0 auto; }
    .output-thumbs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 320px;
    }
    .output-thumb {
        aspect-ratio: 1;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .output-thumb-1 { background: linear-gradient(135deg, #ff2e92, #00f0ff); box-shadow: 0 0 20px rgba(255, 46, 146, 0.4); }
    .output-thumb-2 { background: linear-gradient(135deg, #a020f0, #ff2e92); box-shadow: 0 0 20px rgba(160, 32, 240, 0.4); }
    .output-thumb-3 { background: linear-gradient(135deg, #00f0ff, #a020f0); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
    .output-thumb-4 { background: linear-gradient(135deg, #ffea00, #ff2e92); box-shadow: 0 0 20px rgba(255, 234, 0, 0.4); }

    /* CREATIONS */
    .creations-section { margin-top: 60px; }
    .creations-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
    .creations-header h3 {
        margin: 0;
        font-size: 24px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-shadow: 0 0 12px var(--pink);
    }
    .creations-icons { display: flex; gap: 12px; }
    .creation-header-icon {
        font-size: 16px;
        color: var(--text-faint);
        cursor: pointer;
        padding: 7px;
        border-radius: 4px;
        transition: all 0.15s ease;
    }
    .creation-header-icon:hover { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }

    .thumbnails-row { gap: 12px 0; }
    .thumbnail-wrapper { padding: 6px; position: relative; cursor: pointer; }
    .thumb-fake {
        width: 110px; height: 110px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.2s ease;
    }
    .thumbnail-wrapper:hover .thumb-fake {
        transform: translateY(-4px) scale(1.04);
        border-color: var(--cyan);
        box-shadow: 0 0 30px var(--cyan);
    }
    .thumb-fake-1 { background: linear-gradient(135deg, #ff2e92, #00f0ff); }
    .thumb-fake-2 { background: linear-gradient(135deg, #a020f0, #ff2e92); }
    .thumb-fake-3 { background: linear-gradient(135deg, #00f0ff, #a020f0); }
    .thumb-fake-4 { background: linear-gradient(135deg, #ffea00, #ff2e92); }
    .thumb-fake-5 { background: linear-gradient(135deg, #00f0ff, #ffea00); }
    .thumb-fake-6 { background: linear-gradient(135deg, #a020f0, #00f0ff); }
    .thumb-fake-7 { background: linear-gradient(135deg, #ff2e92, #a020f0); }
    .thumb-fake-8 { background: linear-gradient(135deg, #00f0ff, #ff2e92); }

    .public-example-badge {
        position: absolute; top: 12px; left: 12px;
        width: 22px; height: 22px;
        border-radius: 4px;
        background: var(--bg-deep);
        border: 1px solid var(--cyan);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--cyan); font-size: 10px; z-index: 2;
        box-shadow: 0 0 8px var(--cyan);
    }
    .thumbnail-output-count {
        position: absolute; top: 12px; left: 12px; right: auto;
        width: 22px; height: 22px;
        padding: 0 8px;
        border-radius: 4px;
        background: var(--pink);
        font-family: "JetBrains Mono", monospace;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700; color: #fff; z-index: 2;
        box-shadow: 0 0 8px var(--pink);
    }

    /* PRICING */
    .pricing-section { padding: 100px 0 50px; }
    .pricing-intro { text-align: center; max-width: 720px; margin: 0 auto 60px; }
    .pricing-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 18px;
        border-radius: 4px;
        background: var(--yellow);
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--bg-deep);
        margin-bottom: 22px;
        box-shadow: 0 0 20px var(--yellow);
    }
    .pricing-title {
        font-size: clamp(40px, 6vw, 64px);
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1;
        margin: 0 0 16px;
        color: #fff;
        text-transform: uppercase;
        text-shadow:
            0 0 30px rgba(255, 46, 146, 0.6),
            0 0 60px rgba(0, 240, 255, 0.4);
    }
    .pricing-sub { font-size: 18px; color: var(--text-dim); margin: 0 0 28px; }
    .compare-plans-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 6px;
        background: transparent;
        border: 1px solid var(--cyan);
        color: var(--cyan);
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s ease;
        text-shadow: 0 0 8px var(--cyan);
    }
    .compare-plans-link:hover {
        background: var(--cyan);
        color: var(--bg-deep);
        box-shadow: 0 0 24px var(--cyan);
        text-shadow: none;
    }

    .pricing-grid { gap: 24px 0; }
    .pricing-card {
        position: relative;
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        padding: 32px 28px;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
        box-shadow: 0 0 24px rgba(255, 46, 146, 0.15);
    }
    .pricing-card:hover {
        transform: translateY(-6px);
        border-color: var(--pink);
        box-shadow: 0 0 40px rgba(255, 46, 146, 0.4);
    }
    .pricing-card-ultimate {
        background: rgba(15, 5, 35, 0.85);
        border: 2px solid var(--cyan);
        box-shadow: 0 0 50px rgba(0, 240, 255, 0.5);
    }
    .pricing-card-ultimate:hover {
        border-color: var(--cyan);
        box-shadow: 0 0 70px rgba(0, 240, 255, 0.7);
    }
    .recommended-ribbon {
        position: absolute;
        top: -12px; left: 50%;
        transform: translateX(-50%);
        padding: 6px 18px;
        background: var(--cyan);
        color: var(--bg-deep);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-radius: 4px;
        box-shadow: 0 0 16px var(--cyan);
    }

    .plan-name {
        font-size: 22px;
        margin: 0 0 14px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .plan-price {
        display: flex; align-items: baseline; gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .price-was { font-size: 16px; color: var(--text-faint); font-family: "JetBrains Mono", monospace; }
    .price-amount {
        font-family: "Outfit", sans-serif;
        font-size: 48px;
        font-weight: 900;
        letter-spacing: -0.03em;
        color: var(--cyan);
        line-height: 1;
        text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    }
    .price-per { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--text-dim); }
    .plan-tag { font-size: 13px; color: var(--text-dim); margin: 6px 0 24px; }

    .plan-features {
        list-style: none; padding: 0; margin: 0 0 28px;
        font-size: 14px; flex: 1;
    }
    .plan-features li {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 9px 0;
        color: var(--text);
        line-height: 1.4;
    }
    .plan-features li.muted { color: var(--text-faint); }
    .plan-features .fa-check { color: var(--pink); margin-top: 4px; text-shadow: 0 0 8px var(--pink); }
    .plan-features .fa-xmark { color: var(--text-faint); margin-top: 4px; }

    .plan-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 100%;
        padding: 14px 20px;
        border-radius: 6px;
        font-family: "Outfit", sans-serif;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .plan-btn-ghost {
        background: transparent;
        color: var(--text-dim);
        border: 1px solid var(--text-faint);
    }
    .plan-btn-primary {
        background: transparent;
        color: var(--pink);
        border: 2px solid var(--pink);
        box-shadow: 0 0 16px rgba(255, 46, 146, 0.4);
        text-shadow: 0 0 8px var(--pink);
    }
    .plan-btn-primary:hover {
        background: var(--pink);
        color: #fff;
        text-shadow: none;
        box-shadow: 0 0 30px var(--pink);
    }
    .plan-btn-accent {
        background: linear-gradient(135deg, var(--pink), var(--cyan));
        color: #fff;
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    }
    .plan-btn-accent:hover { filter: brightness(1.15); box-shadow: 0 0 50px rgba(0, 240, 255, 0.7); }

    /* COMPARISON */
    .compare-section { padding: 60px 0 100px; }
    .compare-head { text-align: center; margin-bottom: 40px; }
    .compare-title {
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin: 0 0 8px;
        color: #fff;
        text-shadow: 0 0 24px var(--pink);
    }
    .compare-sub { color: var(--text-dim); font-size: 16px; }

    .cmp-table-wrap {
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 0 40px rgba(255, 46, 146, 0.2);
    }
    .cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .cmp-table thead th {
        position: sticky; top: 0;
        background: rgba(15, 5, 35, 0.95);
        backdrop-filter: blur(20px);
        padding: 22px 20px;
        text-align: left;
        font-family: "Outfit", sans-serif;
        font-weight: 700;
        border-bottom: 2px solid var(--pink);
        z-index: 2;
    }
    .cmp-feature-th {
        font-family: "JetBrains Mono", monospace;
        color: var(--text-dim);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
    .cmp-plan-th { text-align: center !important; }
    .cmp-plan-name {
        display: block;
        font-size: 18px;
        color: #fff;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .cmp-plan-price {
        display: block;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        color: var(--text-faint);
        font-weight: 500;
    }
    .cmp-plan-pro .cmp-plan-name { color: var(--pink); text-shadow: 0 0 8px var(--pink); }
    .cmp-plan-ult .cmp-plan-name { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }

    .cmp-table tbody tr { border-top: 1px solid rgba(255, 46, 146, 0.1); }
    .cmp-table tbody tr:hover { background: rgba(255, 46, 146, 0.04); }
    .cmp-table td {
        padding: 18px 20px;
        vertical-align: top;
        text-align: center;
        color: var(--text);
        line-height: 1.5;
    }
    .cmp-feature-td {
        text-align: left !important;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
    }
    .cmp-line { display: block; }
    .cmp-line + .cmp-line { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
    .cmp-dash { color: var(--text-faint); font-size: 18px; }
    .cmp-tag {
        display: inline-block;
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 3px;
        background: var(--cyan);
        color: var(--bg-deep);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-left: 6px;
        vertical-align: middle;
    }

    @media (max-width: 720px) {
        .cmp-table thead { display: none; }
        .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; width: 100%; }
        .cmp-table tr { padding: 16px 18px; border-top: 1px solid var(--card-border); }
        .cmp-table td { padding: 6px 0; text-align: left !important; }
        .cmp-table td[data-plan]::before {
            content: attr(data-plan) ":";
            display: inline-block;
            min-width: 80px;
            color: var(--cyan);
            font-weight: 700;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-right: 10px;
            font-family: "JetBrains Mono", monospace;
        }
        .cmp-feature-td { font-size: 16px; padding-bottom: 8px !important; border-bottom: 1px solid var(--card-border); margin-bottom: 8px; }
    }

    /* SIGN-IN */
    .signin-section { padding: 50px 0 100px; }
    .signin-card {
        max-width: 480px;
        margin: 0 auto;
        text-align: center;
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        border: 2px solid var(--cyan);
        border-radius: var(--radius-lg);
        padding: 56px 36px;
        box-shadow: 0 0 50px rgba(0, 240, 255, 0.3);
    }
    .signin-logo { margin-bottom: 24px; }
    .brand-star-lg {
        color: var(--cyan);
        filter: drop-shadow(0 0 24px var(--cyan)) drop-shadow(0 0 12px var(--pink));
    }
    .signin-title {
        font-size: 32px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin: 0 0 10px;
        color: #fff;
        text-shadow: 0 0 16px var(--pink);
    }
    .signin-sub { color: var(--text-dim); margin: 0 0 30px; font-size: 15px; }
    .signin-terms {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
        font-size: 13px;
        color: var(--text-dim);
        margin: 0 0 22px;
        line-height: 1.4;
    }
    .signin-terms a { color: var(--cyan); text-decoration: underline; }
    .login-with-google-btn-wrap { display: block; }
    .login-with-google-btn {
        width: 100%;
        padding: 14px 24px 14px 50px;
        border: 2px solid var(--pink);
        border-radius: 8px;
        background: var(--bg-deep) url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=") no-repeat 18px center;
        color: #fff;
        font-family: "Outfit", sans-serif;
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
        box-shadow: 0 0 24px rgba(255, 46, 146, 0.5);
        transition: all 0.2s ease;
    }
    .login-with-google-btn:hover {
        border-color: var(--cyan);
        box-shadow: 0 0 40px var(--cyan);
        background-color: var(--bg-near);
    }
    .signin-foot { margin-top: 18px; font-size: 12px; color: var(--text-faint); font-family: "JetBrains Mono", monospace; }

    .sample-footer {
        padding: 30px 0;
        text-align: center;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        color: var(--text-faint);
        border-top: 1px solid var(--card-border);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }