html[data-ui-theme="next"] body {
    color: #edf5ef;
    background: #080d0b;
}

html[data-ui-theme="next"] body:not(.dynamic-active) {
    background: #0b1110;
}

html[data-ui-theme="next"] body:not(.dynamic-active) > #card,
html[data-ui-theme="next"] .fallback-question {
    max-width: 520px;
    border: 1px solid #26342d;
    border-radius: var(--cs-radius);
    color: #edf5ef;
    background: #101815;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

html[data-ui-theme="next"] #card p,
html[data-ui-theme="next"] .fallback-question p {
    color: #9eaaa3;
}

html[data-ui-theme="next"] #card input,
html[data-ui-theme="next"] .fallback-question input {
    border-color: #314038;
    border-radius: var(--cs-radius);
    color: #fff;
    background: #0b1210;
}

html[data-ui-theme="next"] #card button,
html[data-ui-theme="next"] .fallback-question button {
    border-radius: var(--cs-radius);
    color: #0a130c;
    background: var(--cs-brand);
}

html[data-ui-theme="next"] .promo-survey {
    --lime: #72df20 !important;
    --lime-2: #a8f56f !important;
    --panel: #0e1713 !important;
    --panel-2: #121f19 !important;
    --line: rgba(143, 174, 155, .22) !important;
    --text: #f2f7f3 !important;
    --muted: #9eaaa3 !important;
    min-height: 100vh !important;
    padding: 16px 18px 42px !important;
    color: var(--text) !important;
    background: #080d0b !important;
    font-family: var(--cs-font) !important;
}

html[data-ui-theme="next"] .promo-survey .promo-shell {
    width: min(1320px, 100%) !important;
}

html[data-ui-theme="next"] .promo-survey .promo-topbar {
    min-height: 56px;
    margin-bottom: 16px !important;
    padding: 8px 12px;
    border: 1px solid #202c26;
    border-radius: var(--cs-radius);
    background: #0c1310;
}

html[data-ui-theme="next"] .promo-survey .promo-brand {
    font-size: 16px !important;
}

html[data-ui-theme="next"] .promo-survey .promo-brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--cs-radius) !important;
}

html[data-ui-theme="next"] .promo-survey .language-toggle {
    min-height: 44px !important;
    border-color: #35443c !important;
    background: #131d18 !important;
}

html[data-ui-theme="next"] .promo-survey .promo-hero {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) !important;
    gap: 16px !important;
}

html[data-ui-theme="next"] .promo-survey .promo-poster {
    top: 16px !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 6;
    border-color: #2c4434 !important;
    border-radius: var(--cs-radius) !important;
    background: #0a120e !important;
    box-shadow: none !important;
}

html[data-ui-theme="next"] .promo-survey .promo-poster::after {
    display: none !important;
}

html[data-ui-theme="next"] .promo-survey .promo-poster img {
    min-height: 0 !important;
    height: 100% !important;
    object-fit: cover !important;
}

html[data-ui-theme="next"] .promo-survey .offer-strip {
    min-height: 42px;
    margin-bottom: 8px !important;
    border-color: #2c4434 !important;
    border-radius: var(--cs-radius) !important;
    color: #b9f58b !important;
    background: #101a15 !important;
}

html[data-ui-theme="next"] .promo-survey .survey-panel {
    border-color: #2b3932 !important;
    border-radius: var(--cs-radius) !important;
    background: #0d1512 !important;
    box-shadow: none !important;
}

html[data-ui-theme="next"] .promo-survey .survey-heading {
    padding: 24px 24px 20px !important;
    border-bottom-color: #27332d !important;
}

html[data-ui-theme="next"] .promo-survey .survey-heading h1 {
    max-width: 820px;
    font-size: clamp(28px, 3vw, 38px) !important;
}

html[data-ui-theme="next"] .promo-survey .survey-progress-bar {
    height: 4px !important;
    background: #243029 !important;
}

html[data-ui-theme="next"] .promo-survey .survey-progress-bar span {
    width: var(--survey-progress, 4%) !important;
    background: var(--cs-brand) !important;
    box-shadow: none !important;
    transition: width .2s ease;
}

html[data-ui-theme="next"] .promo-survey .survey-question {
    padding: 19px 24px !important;
    border-bottom-color: #233029 !important;
}

html[data-ui-theme="next"] .promo-survey .question-number {
    border-radius: 50% !important;
    background: var(--cs-brand) !important;
}

html[data-ui-theme="next"] .promo-survey .question-copy h2 {
    font-size: 16px !important;
}

html[data-ui-theme="next"] .promo-survey .option-label {
    min-height: 46px !important;
    border-color: #2d3b34 !important;
    border-radius: var(--cs-radius) !important;
    color: #e5eee8 !important;
    background: #121d18 !important;
    transform: none !important;
}

html[data-ui-theme="next"] .promo-survey .option-label:hover {
    border-color: #5b8d45 !important;
    background: #17261e !important;
}

html[data-ui-theme="next"] .promo-survey .option-input:checked + .option-label {
    border-color: var(--cs-brand) !important;
    color: #f4fff0 !important;
    background: #244b19 !important;
    box-shadow: inset 3px 0 0 var(--cs-brand) !important;
}

html[data-ui-theme="next"] .promo-survey .option-input:checked + .option-label .stars {
    color: #ffe36a !important;
}

html[data-ui-theme="next"] .promo-survey .short-answer,
html[data-ui-theme="next"] .promo-survey .promo-email-input {
    border-color: #34443b !important;
    border-radius: var(--cs-radius) !important;
    background: #0a120f !important;
}

html[data-ui-theme="next"] .promo-survey .survey-submit {
    min-height: 54px !important;
    border-radius: var(--cs-radius) !important;
    color: #0b150c !important;
    background: var(--cs-brand) !important;
    box-shadow: 0 8px 22px rgba(105, 216, 25, .16) !important;
}

html[data-ui-theme="next"] .loading-overlay {
    background: rgba(5, 10, 8, .94);
}

html[data-ui-theme="next"] .loading-box {
    border-color: #34463b;
    border-radius: var(--cs-radius);
    background: #101915;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
}

html[data-ui-theme="next"] .queue-status {
    color: #f5b942;
    border-top-color: rgba(245, 185, 66, .24);
}

/* Numbered PHP question templates keep their own markup and behavior. */
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page {
    min-height: 100vh !important;
    padding: 24px !important;
    color: #edf5ef !important;
    background: #080d0b !important;
    font-family: var(--cs-font) !important;
}

html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page .question-panel {
    width: min(560px, 100%) !important;
    padding: 28px !important;
    border: 1px solid #2b3932 !important;
    border-top: 4px solid var(--cs-brand) !important;
    border-radius: var(--cs-radius) !important;
    color: #edf5ef !important;
    background: #101815 !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .34) !important;
}

html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page h1 { color: #f2f7f3 !important; }
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page p { color: #9eaaa3 !important; }
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page label { color: #cbd6cf !important; }
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page input,
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page textarea,
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page select {
    border-color: #34443b !important;
    border-radius: var(--cs-radius) !important;
    color: #f3f7f4 !important;
    background: #0a120f !important;
}
html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page button[type="submit"] {
    border-radius: var(--cs-radius) !important;
    color: #0b150c !important;
    background: var(--cs-brand) !important;
    box-shadow: none !important;
}

@media (max-width: 920px) {
    html[data-ui-theme="next"] .promo-survey .promo-hero {
        grid-template-columns: 1fr !important;
    }

    html[data-ui-theme="next"] .promo-survey .promo-poster {
        position: relative !important;
        top: auto !important;
        aspect-ratio: 16 / 7;
        max-height: 360px !important;
    }
}

@media (max-width: 620px) {
    html[data-ui-theme="next"],
    html[data-ui-theme="next"] body,
    html[data-ui-theme="next"] #dynamicPageContainer { max-width: 100%; overflow-x: hidden; }

    html[data-ui-theme="next"] .promo-survey {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px 70px !important;
    }

    html[data-ui-theme="next"] .promo-survey .promo-topbar {
        min-width: 0;
        padding: 6px 8px;
    }

    html[data-ui-theme="next"] .promo-survey .promo-brand { min-width: 0; font-size: 13px !important; }
    html[data-ui-theme="next"] .promo-survey .promo-brand span:last-child { white-space: nowrap; }
    html[data-ui-theme="next"] .promo-survey .language-toggle {
        flex: 0 1 auto;
        min-width: 70px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    html[data-ui-theme="next"] .promo-survey .promo-poster {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 210px !important;
        max-height: 250px !important;
        aspect-ratio: 16 / 10;
    }

    html[data-ui-theme="next"] .promo-survey .survey-heading,
    html[data-ui-theme="next"] .promo-survey .survey-question,
    html[data-ui-theme="next"] .promo-survey .survey-submit-zone {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html[data-ui-theme="next"] .promo-survey .rating-options {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    html[data-ui-theme="next"] .promo-survey .rating-options .option-label {
        min-width: 0;
        min-height: 52px !important;
        padding: 7px 2px !important;
    }

    html[data-ui-theme="next"] .promo-survey .rating-options .stars {
        max-width: 100%;
        overflow: hidden;
        font-size: 8px !important;
        line-height: 1;
    }

    html[data-ui-theme="next"] .promo-survey .choice-options {
        grid-template-columns: 1fr !important;
    }

    html[data-ui-theme="next"] .promo-survey .nps-options {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    html[data-ui-theme="next"] .ui-theme-floating {
        left: 8px;
        bottom: 8px;
        min-height: 44px;
        font-size: 11px;
    }

    html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page { padding: 12px !important; }
    html[data-ui-theme="next"] #dynamicPageContainer .custom-question-page .question-panel { padding: 21px 17px !important; }
}