:root {
    --color-brand-primary: #2f4de4; /* ex royal-blue-900 */
    --color-brand-secondary: #97A6F1;
    --color-brand-tertiary: #CBD2F8;
    --color-brand-subtle: #EAEDFC;
    
    --color-text-default: #101B31;
    --color-text-subtle: #525c76; /* ex midnight-300 */
    --color-text-disabled: #b2b7c2; /* ex gray-600 */
    --color-text-button: #ffffff;

    --color-surface-default: #ffffff;
    --color-surface-subtle: #fafafb; /* ex gray-100 */
    --color-surface-web: #F5F2EF;
    --color-surface-transparent: transparent;
    --color-surface-ai: radial-gradient(63.49% 50% at 0% 50.15%, #DBE2B4 0%, rgba(219, 226, 180, 0.00) 100%), radial-gradient(80.72% 70.61% at 0% 100%, #A2D2F6 0%, rgba(162, 210, 246, 0.00) 100%), radial-gradient(49.85% 49.85% at 50% 100%, #398FFF 0%, rgba(57, 143, 255, 0.00) 100%), radial-gradient(80.72% 70.61% at 100% 100%, #9F7DF2 0%, rgba(159, 125, 242, 0.00) 100%), radial-gradient(80.9% 70.82% at 100% 0%, #FF4240 0%, rgba(255, 66, 64, 0.00) 100%), radial-gradient(63.49% 50% at 100% 50.15%, #D950B2 0%, rgba(217, 80, 178, 0.00) 100%), radial-gradient(50.15% 50.15% at 50% 0%, #FE8D1F 0%, rgba(254, 141, 31, 0.00) 100%), radial-gradient(80.9% 70.82% at 0% 0%, #FFC654 0%, rgba(255, 198, 84, 0.00) 100%), #BEBBC0;

    --color-border-default: #e2e4e8; /* ex gray-400 */
    --color-border-ai: radial-gradient(63.49% 50% at 0% 50.15%, #DBE2B4 0%, rgba(219, 226, 180, 0.00) 100%), radial-gradient(80.72% 70.61% at 0% 100%, #A2D2F6 0%, rgba(162, 210, 246, 0.00) 100%), radial-gradient(49.85% 49.85% at 50% 100%, #398FFF 0%, rgba(57, 143, 255, 0.00) 100%), radial-gradient(80.72% 70.61% at 100% 100%, #9F7DF2 0%, rgba(159, 125, 242, 0.00) 100%), radial-gradient(80.9% 70.82% at 100% 0%, #FF4240 0%, rgba(255, 66, 64, 0.00) 100%), radial-gradient(63.49% 50% at 100% 50.15%, #D950B2 0%, rgba(217, 80, 178, 0.00) 100%), radial-gradient(50.15% 50.15% at 50% 0%, #FE8D1F 0%, rgba(254, 141, 31, 0.00) 100%), radial-gradient(80.9% 70.82% at 0% 0%, #FFC654 0%, rgba(255, 198, 84, 0.00) 100%), #BEBBC0;

    --color-feedback-error-primary: #f03d3d;
    --color-feedback-error-secondary: #fff8f8;
    --color-feedback-notification-primary: #0284fe;
    --color-feedback-notification-secondary: #f8fbff;
    --color-feedback-success-primary: #0ca977;
    --color-feedback-success-secondary: #f1fffb;
    --color-feedback-warning-primary: #ffad0d;
    --color-feedback-warning-secondary: #fffcf5;

    /* 📏 Spacing */
    --space-0: 0px;
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-auto: Auto;

    /* 🔲 Radius */
    --radius-none: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
    
    --border-width-0: 0px;
    --border-width-sm: 1px;
    --border-width-md: 2px;
    
    /* 🔤 Fonts */
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 64px;
    --font-size-input: 20px;
    
    --font-primary: Inter, sans-serif;
    --font-secondary: Satoshi, sans-serif;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    --line-height-sm: 1.2;
    --line-height-md: 1.4;
    --line-height-lg: 1.6;
    
    /* 🌖 Shadows */
    --shadow-tooltip: 0px 0px 8px rgba(0,0,0, 0.2);
    --shadow-popup: 0px 5px 14px rgba(0,0,0, 0.2);
    --shadow-ai: -2px 2px 10px rgba(184, 213, 218, 0.25), 2px 2px 10px 0 rgba(156, 129, 236, 0.25), 2px -2px 10px 0 rgba(249, 76, 77, 0.25), -2px -2px 10px 0 rgba(239, 202, 117, 0.25);
    --shadow-ai-inset: inset -2px 2px 10px rgba(184, 213, 218, 0.25), inset 2px 2px 10px rgba(156, 129, 236, 0.25), inset 2px -2px 10px rgba(249, 76, 77, 0.25), inset -2px -2px 10px rgba(239, 202, 117, 0.25);

    @media screen and (max-width: 1200px)  {
        --space-2xs: 2px;
        --space-xs: 4px;
        --space-sm: 8px;
        --space-md: 12px;
        --space-lg: 16px;
        --space-xl: 24px;
        --space-2xl: 32px;
        --space-3xl: 48px;

        --font-size-sm: 10px;
        --font-size-md: 12px;
        --font-size-lg: 14px;
        --font-size-xl: 18px;
        --font-size-2xl: 24px;
        --font-size-3xl: 32px;
        --font-size-input: 16px;
    }
}      

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: var(--font-weight-regular);
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi Bold';
  src: url('../fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: var(--font-weight-bold);
  font-style: normal;
}

       * {
            margin: var(--space-0);
            padding: var(--space-0);
            box-sizing: border-box;
        }
        img {
            max-width: 100%;
        }
        .no-desktop {
            display: none;
        }
         @media screen and (max-width: 990px)  {
            .no-desktop {
                display: block;
            }
            .no-mobile {
                display: none;
            }
         }
        .input {
            width: 100%;
            border: var(--border-width-0);
            border-radius:  var(--radius-full);
            padding: var(--space-xs);
            height: 60px;
            margin: 0 !important;
        }
        input:focus,
        select:focus {
            outline: none;
            box-shadow: none;
            -webkit-tap-highlight-color: transparent; /* Removes iOS touch highlight */
            -webkit-focus-ring-color: transparent; 
        }
        section {
            padding: var(--space-2xl) var(--space-0);
        }
        section.highlight {
            background-color: var(--color-brand-subtle);
        }
        .text-center {
            text-align: center;
        }
        h1, .h1 {
            color: var(--color-text-button);
            font-size: var(--font-size-3xl);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-sm);
            font-family: Satoshi Bold, sans-serif;
            margin-bottom: var(--space-xl);
        }
        .hero h1 {
            margin-bottom: var(--space-md);
        }
        h2 {
            color: var(--color-text-default);
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-sm);
            font-family: Satoshi Bold, sans-serif;
            margin-bottom: var(--space-lg);
            margin-top: var(--space-sm);
        }
        .row h2,
        .highlight h2 {
            margin-bottom: var(--space-lg);
        }
        h3 {
            color: var(--color-text-default);
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-sm);
            font-family: Satoshi Bold, sans-serif;
            margin-bottom: var(--space-sm);
            margin-top: var(--space-sm);
        }
        p {
            font-size: var(--font-size-lg);
            color: var(--color-text-subtle);
            line-height: var(--line-height-md);
            margin-bottom: var(--space-sm);
        }
        p.xs {
            font-size: var(--font-size-md);
        }
        .row {
            display: flex;
            justify-content: center;
            gap: var(--space-2xl);
            flex-direction: row;
            align-items: center;
        }
        .row-start {
            align-items: start;
        }
        .row-reverse {
            flex-direction: row-reverse;
        }
        @media screen and (max-width: 1200px)  {
           .row {
                flex-direction: column;
                gap: var(--space-lg);
            }     
        }
        .row .col {
            padding: var(--space-0) var(--space-xs);
            width: 100%;
        }
        .row .col .col-img {
            margin-bottom: var(--space-md);
        }
        .hide {
            display: none !important;
        }
        body {
            font-family: Inter, sans-serif;
            background: white;
            min-height: 100vh;
        }
        .container {
            padding:  var(--space-0) var(--space-lg);
            max-width: 1280px;
            width: 100%;
            margin: var(--space-0) auto;
            position: relative;
        }
        header {
            padding:  var(--space-md) var(--space-xl);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        footer {
            background-color: black;
        }
        footer .col:last-child {
            text-align: right;
        }
        footer p {
            color: var(--color-text-button);
        }
        footer a {
            color: var(--color-text-button);
            text-decoration: none;
            display: inline-block;
            padding: var(--space-md) var(--space-lg);
        }
        @media screen and (max-width: 1200px)  {
            footer a {
                display: block;
                padding: var(--space-md) var(--space-0);
            }   
            footer .col:last-child {
                text-align: left;
            }
        }
        footer a:hover {
            color: var(--color-brand-tertiary);
        }
        .btn {
            padding: var(--space-sm) var(--space-md);
            text-align: center;
            border-radius: var(--radius-md);
            font-size: var(--font-size-lg);
            display: flex;
            justify-content: start;
            gap: var(--space-xs);
            align-items: center;
            text-decoration: none;
            cursor: pointer;
            min-height: 44px;
            font-weight: var(--font-weight-medium);
        }
        button {
            cursor: pointer;
        }
        .btn.primary {
            background-color: var(--color-brand-primary);
            border: var(--border-width-md) solid var(--color-brand-primary);
            color: var(--color-text-button);
            transition: filter 0.2s;
        }
        .btn.primary:hover {
            filter: brightness(1.2); /* 1 = normal, >1 = brighter, <1 = darker */
        }
        .btn.secondary {
            background-color: transparent;
            color: var(--color-brand-primary);
            border: var(--border-width-md) solid var(--color-brand-primary);
            transition: background-color 0.2s;
        }
        .btn.secondary:hover {
            background-color: var(--color-brand-subtle);
        }
        .btn.ai {
            /*background: var(--color-surface-ai);*/
            border-radius:  var(--radius-full);
            border: var(--border-width-0);
            isolation: isolate;
            overflow: hidden;
            position: relative;
            color: var(--color-text-button);
            min-width: fit-content;
            padding: var(--space-md) var(--space-lg);
        }
        .btn.ai::before {
            content: "";
            position: absolute;
            inset: -20%;
            background: var(--color-surface-ai);
            background-size: cover;
            /*transform: rotate(0deg);*/
            transition: transform 3s linear;
            transition: filter 0.2s;
            z-index: -1;
        }
        .btn.ai:hover::before {
            /*animation: spin 3s linear infinite;*/
             filter: brightness(1.1); /* 1 = normal, >1 = brighter, <1 = darker */
        }
        @keyframes spin {
        to { transform: rotate(360deg); }
        }
        .btn.upload-btn {
            background: var(--color-brand-subtle);
            border: var(--border-width-0) solid var(--color-border-default);
            border-radius: var(--radius-full);
            padding: var(--space-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .btn.upload-btn:hover {
            background: var(--color-surface-subtle);
            border-color: var(--color-brand-primary);
        }
        .btn.upload-btn:hover svg {
            stroke: var(--color-brand-primary);
        }
        .btn.upload-btn svg {
            stroke: var(--color-text-subtle);
            transition: stroke 0.2s ease;
        }
        .btn.upload-btn.confirmed {
            background: var(--color-feedback-success-secondary);
            border-color: var(--color-feedback-success-primary);
            cursor: not-allowed;
        }
        .btn.upload-btn.confirmed svg {
            stroke: var(--color-feedback-success-primary);
        }
        .btn-link {
            color: var(--color-brand-primary);
            text-decoration: none;
            font-weight: var(--font-weight-bold);
            border-bottom: 2px solid var(--color-brand-primary);
            transition: filter 0.2s;
        }
        .btn-link:hover {
            filter: brightness(1.2); /* 1 = normal, >1 = brighter, <1 = darker */
        }
        .btn.link {
            color: var(--color-text-button);
            text-decoration: underline;
            border: 0 none;
            background-color: transparent;
            padding: var(--space-sm) var(--space-sm);
        }
        .btn.link:hover {
            color: var(--color-brand-subtle);
        }
        .btn.upload {
            border-radius: var(--radius-xl);
            border: 1px dashed var(--color-brand-secondary);
            background-color: transparent;
            display: flex;
            min-width: 100%;
            color: white;
            justify-content: center;
            align-items: center;
            margin-bottom: var(--space-lg);
            gap: var(--space-md);
        }
        .btn.upload:hover {
            border: 1px dashed var(--color-brand-tertiary);
        }
        .btn.upload p {
            margin-bottom: 0;
            font-size: var(--font-size-lg);
        }
        .btn.upload span {
            display: block;
            font-size: var(--font-size-xs);
        }
        .hero {
            background: url("../images/test.jpg") no-repeat bottom center;
            background-size: cover;
            padding: var(--space-0);
            text-align: center;
        }
        .hero p,
        .hero button,
        .hero .toggle-label,
        .hero .file-upload-pill,
        .hero .pill-text,
        .hero input,
        .hero select {
            font-size: var(--font-size-md);
        }

        .hero p {
            color: var(--color-brand-tertiary);
        }
        .hero-img {
            margin-bottom: -3px;
            background-image: url("../images/hero.png");
            background-position: top center;
            background-size: cover;
            height: 320px;
            margin-top: 25px;
        }
        @media screen and (max-width: 1200px)  {
            .hero-img {
                background-image: url("../images/hero-mobile.png");
                background-size: cover;
                margin-top: var(--space-0);
                height: 260px;
            }     
        }
        @media screen and (max-width: 640px)  {
            .hero-img {
                height: 200px;
            }     
        }
        .video {
            width: 100%;
        }
        .pill {
            background: var(--color-surface-ai);
            border-radius: var(--radius-full);
            width: fit-content;
            padding: var(--space-2xs) var(--space-xs);
            color: var(--color-text-button);
            font-size: var(--font-size-sm);
        }
        .benefits {
            display: flex;
            justify-content: center;
            gap: var(--space-xl);
            align-items: center;
        }
        .benefits .elmts {
            display: flex;
            justify-content: start;
            gap: var(--space-xs);
            align-items: center;
            margin-top: var(--space-2xl);
        }
        .action-content {
            box-shadow: var(--shadow-ai);
            margin: var(--space-3xl) auto var(--space-xl) auto;
            background:
                radial-gradient(63.49% 50% at 0% 50.15%, #DBE2B4 0%, rgba(219, 226, 180, 0) 100%),
                radial-gradient(80.72% 70.61% at 0% 100%, #A2D2F6 0%, rgba(162, 210, 246, 0) 100%),
                radial-gradient(49.85% 49.85% at 50% 100%, #398FFF 0%, rgba(57, 143, 255, 0) 100%),
                radial-gradient(80.72% 70.61% at 100% 100%, #9F7DF2 0%, rgba(159, 125, 242, 0) 100%),
                radial-gradient(80.9% 70.82% at 100% 0%, #FF4240 0%, rgba(255, 66, 64, 0) 100%),
                radial-gradient(63.49% 50% at 100% 50.15%, #D950B2 0%, rgba(217, 80, 178, 0) 100%),
                radial-gradient(50.15% 50.15% at 50% 0%, #FE8D1F 0%, rgba(254, 141, 31, 0) 100%),
                radial-gradient(80.9% 70.82% at 0% 0%, #FFC654 0%, rgba(255, 198, 84, 0) 100%),
                #BEBBC0;
            border-radius: 46px;
            padding: 1px; /* border thickness */
            width: 100%;
            max-width: 750px;
        }

        .action .inner-content {
            background: #0F1834; /* inner background */
            border-radius:  45px;
            height: 100%;
            width: 100%;
            padding: var(--space-lg);
            display: flex;
            justify-content: center;
            gap: var(--space-sm);
            flex-direction: column;

        }
        p.textinfo {
            color: white;
        }
        .action .prompt {
            display: block;
            justify-content: center;
            flex-direction: row;
            align-items: center;
            gap: var(--space-sm);
            align-self: stretch;
        }
        .action .prompt .input {
            width: 100%;
            max-width: 900px;
            margin-bottom: var(--space-md);
            background-color: transparent;
            color: var(--color-text-button);
            padding: var(--space-0);
            border-radius: var(--radius-none);
            font-size: var(--font-size-input);
            transition: background-color 0.2s ease;
        }

        .action .prompt .input:focus {

        }

        .action .prompt .input:focus::placeholder {
            opacity: 0;
        }

        .action .prompt .input:focus::-webkit-input-placeholder {
            opacity: 0;
        }

        .action .prompt .input:focus:-moz-placeholder {
            opacity: 0;
        }

        .action .prompt .input:focus::-moz-placeholder {
            opacity: 0;
        }

        .action .prompt .input:focus:-ms-input-placeholder {
            opacity: 0;
        }

        /* Form Container */
        .form-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            width: 100%;
        }

        /* Form Controls Row - Left and Right sides */
        .form-controls-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-md);
            flex-wrap: wrap;
        }

        .controls-left {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .controls-left p {
            margin-bottom: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .controls-right {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        

        /* Compact submit button (arrow only) */

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


        /* Toggle Switch */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            cursor: pointer;
            user-select: none;
            transition: transform 0.3s ease;
        }

        .toggle-container .liquid-btn {
            font-size: var(--font-size-sm);
        }
        .toggle-container input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: relative;
            min-width: 44px;
            height: 24px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-full);
            transition: background-color 0.3s ease;
        }

        .toggle-slider::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            left: 2px;
            top: 2px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .toggle-container input:checked + .toggle-slider {
            background: var(--color-surface-ai);
        }

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

        .toggle-label {
            color: var(--color-text-button);
            text-align: left;
        }

        /* Preview Badge */
        .preview-badge {
            padding: var(--space-3xs) var(--space-xs);
            background: var(--color-surface-ai);
            border-radius: var(--radius-sm);
            color: var(--color-text-button);
            font-size: 10px;
            font-weight: var(--font-weight-bold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: var(--shadow-ai);
            pointer-events: none;
        }

        /* File Upload Pill */
        .file-upload-pill {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs) var(--space-sm);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-full);
            color: var(--color-text-button);
            cursor: pointer;
            transition: all 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
            white-space: nowrap;
            pointer-events: all;
            outline: none;
        }

        .file-upload-pill:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.4);
        }

        .file-upload-pill svg {
            flex-shrink: 0;
        }

        .file-upload-pill .pill-text {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 1;
        }

        .file-upload-pill.has-file {
            background: rgba(100, 100, 100, 0.3);
            border-color: rgba(150, 150, 150, 0.5);
        }

        .file-upload-pill.has-file:hover {
            background: rgba(120, 120, 120, 0.35);
        }

        .pill-remove {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--space-md);
            height: var(--space-md);
            padding: 0;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            border-radius: 50%;
            color: var(--color-text-button);
            cursor: pointer;
            transition: all 0.2s ease;
            margin-left: var(--space-3xs);
        }

        .pill-remove:hover {
            background: rgba(80, 80, 80, 0.8);
            color: white;
        }

        /* File Required State */
        .file-upload-pill.required {
            border-color: rgba(255, 255, 255, 0.6);
            /*animation: pulse-border 2s ease-in-out infinite;*/
        }
        .file-upload-pill.required:hover {
            border-color: rgba(255, 255, 255, 1);
        }

        @keyframes pulse-border {
            0%, 100% {
                border-color: rgba(255, 255, 255, 0.3);
            }
            50% {
                border-color: rgba(255, 255, 255, 1);
            }
        }

        /* Responsive adjustments */
        @media screen and (max-width: 600px) {
            .form-container {
                position: relative;
            }

            .action .prompt .input {
                padding-right: 60px;
            }

            .form-controls-row {
                flex-direction: column;
                flex-wrap: wrap;
            }

            .controls-left {
                flex-direction: column;
                width: 100%;
                gap: var(--space-sm);
                align-items: center;
                justify-content: center;
            }

            .controls-left .file-upload-pill {
                justify-content: center;
            }


            .btn.ai {
                position: absolute;
                top: 10px;
                right: 0;
                flex-direction: row;
                width: auto;
                gap: var(--space-xs);
            }

            .file-upload-pill {
                justify-content: center;
            }

            .suggestions .buttons {
                flex-wrap: wrap;
            }

            .file-upload-pill .pill-text {
                max-width: 150px;
            }

            .quality-select {
                width: 100%;
            }
        }
        @media screen and (max-width: 1200px)  {
           .action .prompt textarea {
                width: 100%;
            }     
        }
        .start {
            display: flex;
            justify-content: center;
            gap: auto;
            flex-direction: row;
        }
        .start .btn {
            min-width: 60px;
            height: 60px;
            text-align: center;
            justify-content: center;
            padding: 0;
        }
        .next {
            display: none;
        }
        .input::placeholder {
            color: var(--color-brand-tertiary);
            opacity: 1; /* Optional: ensures full color visibility */
        }

        /* For older browser compatibility */
        .input::-webkit-input-placeholder {
            color: var(--color-brand-tertiary);
        }
        .input:-moz-placeholder {
            color: var(--color-brand-tertiary);
        opacity: 1;
        }
        .input::-moz-placeholder {
            color: var(--color-brand-tertiary);
        opacity: 1;
        }
        .input:-ms-input-placeholder {
            color: var(--color-brand-tertiary);
        }
        .action .btn-area {
            display: flex;
            justify-content:space-between;
            flex-direction: row; 
            align-items: center;
            padding-left: var(--space-xs);
        }
        .action .buttons {
            display: flex;
            justify-content:end;
            flex-direction: row; 
             gap:var(--space-xs);
             align-items: center;
        }
        .action .settings {
            display: flex;
            justify-content:start;
            flex-direction: row; 
             gap:var(--space-xs);
        }
        .quality-select {
            appearance: none;           /* Standard */
            -webkit-appearance: none;   /* Safari / Chrome */
            -moz-appearance: none;      /* Firefox */
            border: 1px solid var(--color-border-default);
            border-radius: var(--radius-full);
            color: var(--color-text-button);
            padding: var(--space-2xs) var(--space-lg) var(--space-2xs) var(--space-sm);
            height: 44px;
            min-width: 150px;
            font-weight: var(--font-weight-normal);
            background-color: transparent;
            background-image: url("../images/Icon_Chevron.svg");
            background-position: 120px center;
            background-repeat: no-repeat;
            background-size: 16px;
            cursor: pointer;
            position: relative;
            display: inline-block;
        }
        .quality-select:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: white;
        }

        .quality-select:focus {
            outline: var(--color-brand-primary);
        }
        .action .upload-btn {
            border-radius: var(--radius-full);
            font-size: 14px;
            color: var(--color-text-default);
            background-image: none;
            border: 1px solid var(--color-border-default);
            padding: var(--space-2xs) var(--space-sm);
            height: 44px;
            font-weight: var(--font-weight-normal);
        }
        .action .upload-btn:hover {
            border: 1px solid var(--color-brand-primary);
        }
        .settings-btn {
            background: transparent; 
            border: 1px solid rgba(255,255,255,0); 
            padding: 6px 12px; 
            font-size: 14px; 
            cursor: pointer; 
            color: white; 
            border-radius: 20px;
        }
        .settings-btn:hover {
            background: rgba(255,255,255,0.15); 
            border: 1px solid rgba(255,255,255,0.3); 
        }
        .settings-panel {
            position: absolute; 
            right: 70px;
            top: var(--space-md);
            background-color: white; 
            padding: var(--space-md);
            border-radius:  var(--space-xl);
            width: 300px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            text-align: left;
            color: var(--color-text-default);
        }
        .settings-panel p {
            color: var(--color-text-subtle);
        }
        section.signup {
            display: none;
        }
        .signup-form {
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: center;
            gap: var(--space-xs);
        }
        .signup h2 {
            margin-bottom: var(--space-xs);
        }
        .signup-form input {
            padding: var(--space-md);
            border-radius: var(--radius-md);
            border: 0 none;
            font-size: var(--font-size-lg);
            height: 50px;
        }
        .signup-form .btn {
            height: 50px;
        } 
        .suggestions .buttons {
            margin-bottom: var(--space-3xl);
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: center;
            gap: var(--space-xs);
        }
        .jig-viewer-container {
            display: none;
            padding: var(--space-xl) 0;
            position: relative;
        }
        .js-jig-viewer {
            width: 100%;
            max-width: 100%;
            height: 450px;
            border-radius: var(--radius-sm);
            display: block;
            margin: 0 auto;
            z-index: 1;
        }
        .redo {
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: center;
            gap: var(--space-2xs);
            margin-top: var(--space-md);
        }
        .redo button {
            padding: var(--space-xs) var(--space-sm);
            font-size: var(--font-size-lg);
            color: var(--color-brand-subtle);
            line-height: var(--line-height-md);
            background-color: transparent;
            border: 0px solid var(--color-border-default);
            align-items: center;
            display: flex;
            gap: var(--space-xs);
            border-radius: var(--radius-full);
            transition: background-color 0.2s ease;
        }
        .redo button:hover {
            background-color: rgba(255, 255, 255, 0.15);
        }
        .redo button:hover .icon {
            filter: brightness(1.2);
        }
        #redo {
            margin-left: var(--space-lg);
        }
        .card {
            background-color: var(--color-surface-default);
            padding: var(--space-lg);
            border-radius: var(--radius-xl);
            display: block;
            justify-content: center;
            flex-direction: row;
            gap: var(--space-sm);
            align-items: center;
            max-width: 250px;
            box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.25);
            position: absolute;
            left: var(--space-0);
            bottom: var(--space-xl);
            z-index: 999;
        }
        .card.active {
            display: block;
        }
        @media screen and (max-width: 990px)  {
           .card {
                position: relative;
                margin: 0 auto;
                left: 0;
            }     
        }
        .qr {
            min-width: 150px;
        }
        .ctas {
            display: flex;
            justify-content: center;
            flex-direction: row;
            gap: var(--space-sm);
            align-items: start;
            align-self: stretch;
        }
        .ctas.centered {
            justify-content: center;
        }
        .progress-container {
            max-width: 650px;
            margin: 0 auto;
            padding: var(--space-xl);
            display: none;
        }
        .progress-container.active {
            display: flex;
            justify-content: start;
            flex-direction: row;
            align-items: center;
            gap:var(--space-2xl);
        }
        #lottie-container {
            width: 250px;
            height: 250px;
        }
        @media screen and (max-width: 990px)  {
            .progress-container.active {
                flex-direction: column;
            }
            #lottie-container {
                width: 150px;
                height: 150px;
            } 
        }

        .progress-bar-bg {
            background: #f0f0f0;
            border-radius: 10px;
            height: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .progress-bar {
            background: linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%);
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }

        .progress-text {
            text-align: left;
            color: #666;
            font-size: 14px;
        }
        .status-message {
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            display: none;
            max-width: 600px;
            margin: var(--space-3xl) auto;
        }

        .status-message.success {
            background: rgba(0, 255, 0, 0.05);
            color: var(--color-feedback-success-primary);
            border: var(--border-width-sm) solid var(--color-feedback-success-primary);
            display: block;
        }

        .status-message.error {
            background: rgba(255, 0, 0, 0.05);
            color: var(--color-feedback-error-primary);
            border: var(--border-width-sm) solid var(--color-feedback-error-primary);
            display: block;
        }

        .status-message.info {
            background: var(--color-feedback-info-secondary);
            color: var(--color-feedback-info-primary);
            border: var(--border-width-sm) solid var(--color-feedback-info-primary);
            display: block;
        }




        

        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #fafafa;
        }

        .upload-area:hover {
            border-color: #ff6b35;
            background: #fff7f5;
        }

        .upload-area.dragover {
            border-color: #ff6b35;
            background: #fff7f5;
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 48px;
            color: #ff6b35;
            margin-bottom: 20px;
        }

        .upload-text {
            color: #666;
            margin-bottom: 10px;
        }

        .file-input {
            display: none;
        }

        .tab-btn {
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .tab-btn.active {
            opacity: 1;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }

        .generate-area {
            padding: 40px;
            background: white;
            border-radius: 10px;
            border: 2px dashed #667eea;
            text-align: center;
            transition: all 0.3s ease;
            cursor: default;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

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

        .jig-viewer-container.active {
            display: block;
        }

        .jig-viewer-title {
            color: #333;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            text-align: center;
        } 

        .file-info {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            display: none;
        }

        .file-info.active {
            display: block;
        }

        .file-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .file-info-label {
            color: #666;
        }

        .file-info-value {
            color: #333;
            font-weight: 500;
        }

        .token-input-container {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .url-input-container {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .presentation-type-container {
            margin-bottom: 20px;
        }

        .presentation-select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            background-color: white;
            color: #333;
            cursor: pointer;
            transition: all 0.2s ease;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 9L1.5 4.5h9z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
        }

        .presentation-select:hover {
            border-color: #ff6b35;
        }

        .presentation-select:focus {
            outline: none;
            border-color: #ff6b35;
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
        }

        .token-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }

        .token-input:focus {
            outline: none;
            border-color: #ff6b35;
        }

        .token-label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
        }

        .done-icon {
            font-size: 72px;
            color: #28a745;
            margin-bottom: 20px;
        }

        /* Model viewer completely disabled - running in headless mode
        #modelViewer {
            display: none;
        } */

        .queue-status {
            padding: 10px;
            background: #f0f4ff;
            border-radius: 8px;
            margin-top: 10px;
            font-size: 14px;
            display: none;
        }

        .queue-status.active {
            display: block;
        }

        .queue-id-display {
            margin-top: 15px;
            padding: 12px;
            background: #fff7f5;
            border: 2px solid #ff6b35;
            border-radius: 8px;
            font-family: monospace;
            font-size: 14px;
            display: none;
        }

        .queue-id-display.active {
            display: block;
        }

        .queue-id-display strong {
            color: #ff6b35;
        }

        .processing-animation {
            display: inline-block;
            margin-left: 8px;
        }

        .spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #ff6b35;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .dots::after {
            content: '';
            display: inline-block;
            animation: dots 1.5s infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60% { content: '...'; }
            80%, 100% { content: ''; }
        }

        .bouncing-dots {
            display: inline-block;
        }

        .bouncing-dots span {
            display: inline-block;
            animation: bounce 1.4s infinite ease-in-out;
        }

        .bouncing-dots span:nth-child(1) { animation-delay: -0.32s; }
        .bouncing-dots span:nth-child(2) { animation-delay: -0.16s; }

        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        .pulsing {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        /* Multi-Model Progress Display */
        .multi-model-progress {
            max-width: 650px;
            margin: 0 auto;
            padding: var(--space-xl);
            display: none;
        }

        .multi-model-progress.active {
            display: block;
        }

        .model-progress-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) 0;
            margin-bottom: var(--space-xs);
            background: transparent;
            transition: all 0.3s ease;
        }

        .model-progress-item:last-child {
            margin-bottom: 0;
        }

        .model-progress-circle-container {
            flex-shrink: 0;
        }

        .model-progress-circle {
            width: 32px;
            height: 32px;
        }

        .model-progress-circle .progress-bg,
        .model-progress-circle .progress-bar {
            transition: all 0.3s ease;
        }

        .model-progress-circle .checkmark {
            transition: opacity 0.3s ease;
        }

        .model-progress-circle .progress-bg {
            stroke: rgba(255, 255, 255, 0.2);
        }

        .model-progress-circle .progress-bar {
            stroke: rgba(255, 255, 255, 0.8);
        }

        .model-progress-info {
            flex: 1;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .model-name {
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-medium);
            color: rgba(255, 255, 255, 0.9);
            font-family: Satoshi, sans-serif;
            flex-shrink: 0;
        }

        .model-progress-dots {
            flex-grow: 1;
            border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
            height: 1px;
            margin: 0 var(--space-xs);
        }

        .model-stage {
            font-size: var(--font-size-xs);
            padding: var(--space-3xs) var(--space-xs);
            border-radius: var(--radius-sm);
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
            text-transform: capitalize;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .model-stage.stage-queued {
            background: var(--color-surface-subtle);
            color: var(--color-text-subtle);
        }

        .model-stage.stage-generating {
            background: var(--color-feedback-notification-secondary);
            color: var(--color-feedback-notification-primary);
        }

        .model-stage.stage-downloading {
            background: var(--color-feedback-notification-secondary);
            color: var(--color-feedback-notification-primary);
        }

        .model-stage.stage-processing {
            background: var(--color-feedback-notification-secondary);
            color: var(--color-feedback-notification-primary);
        }

        .model-stage.stage-uploading {
            background: var(--color-feedback-notification-secondary);
            color: var(--color-feedback-notification-primary);
        }

        .model-stage.stage-complete {
            background: var(--color-feedback-success-secondary);
            color: var(--color-feedback-success-primary);
        }

        .model-stage.stage-failed {
            background: var(--color-feedback-error-secondary);
            color: var(--color-feedback-error-primary);
        }

        #jigQRCode {
            margin-bottom: var(--space-md);
        }
    .liquid-btn {
        position: relative;
        padding: var(--space-xs) var(--space-sm);
        color: var(--color-text-button);
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.25s ease, background 0.3s ease;
    }
    @media screen and (max-width: 1200px)  {
        .liquid-btn {
            padding: var(--space-sm) var(--space-md);
        }
    }

    .liquid-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
            135deg,
            rgba(255,255,255,0.6) 0%,
            rgba(255,255,255,0.2) 30%,
            rgba(255,255,255,0.05) 70%,
            rgba(255,255,255,0.3) 100%
        );
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 2;
    }

    .liquid-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 150%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,0.3) 40%,
            rgba(255,255,255,0.6) 50%,
            rgba(255,255,255,0.3) 60%,
            transparent 100%
        );
        transform: skewX(-20deg);
        animation: sheen 3s linear infinite;
        mix-blend-mode: screen;
        pointer-events: none;
        z-index: 1;
    } 
    /* Hover interaction */
    .liquid-btn:hover {
        background: rgba(0,0,0,0.02);

    }

/* ==============================================================
   USER QUESTION DISPLAY - Shows user's question during generation
   ============================================================== */

.user-question-display {
    margin: var(--space-lg) 0 var(--space-md) 0;
    padding: 0;
    text-align: center;
}

.user-question-display h2 {
    margin: 0;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.95);
    font-family: Satoshi, sans-serif;
    line-height: 1.3;
}

/* ==============================================================
   THINKING PHRASE - Rotating status messages during generation
   ============================================================== */

.thinking-phrase-container {
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    min-height: 40px;
    display: none; /* Hidden for now */
    align-items: center;
    justify-content: center;
}

.thinking-phrase {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-subtle);
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 20%,
        rgba(47, 77, 228, 0.15) 40%,
        rgba(47, 77, 228, 0.25) 50%,
        rgba(47, 77, 228, 0.15) 60%,
        transparent 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: sheen 3s linear infinite;
    border-radius: var(--radius-md);
    max-width: 600px;
    line-height: 1.5;
}

@keyframes sheen {
    from {
        background-position: -200% 0;
    }
    to {
        background-position: 200% 0;
    }
}

/* Fade in/out transitions for phrase changes */
.thinking-phrase {
    animation: sheen 3s linear infinite, fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}