:root {
    --brand-primary: #7f1c45;
    --brand-primary-dark: #5f1635;
    --brand-secondary: #35506d;
    --surface: #ffffff;
    --surface-soft: #f4f7fb;
    --surface-muted: #eef2f6;
    --border: #d9e2ec;
    --text-main: #1f2a37;
    --text-muted: #637387;
    --success: #1f9d67;
    --warning: #d28a16;
    --danger: #d9485f;
    --info: #2563eb;
    --shadow-soft: 0 16px 32px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.12);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
}

* {
    box-sizing: border-box;
}

body.survey-portal-body {
    margin: 0;
    min-height: 100vh;
    color: var(--text-main);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(127, 28, 69, 0.14), transparent 24%),
        radial-gradient(circle at bottom right, rgba(53, 80, 109, 0.1), transparent 28%),
        linear-gradient(180deg, #fffdfd 0%, #f5f8fc 56%, #edf2f7 100%);
}

.survey-portal-shell {
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.4rem 0 2rem;
}

.survey-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), #b03f73 58%, var(--brand-secondary));
    box-shadow: 0 20px 50px rgba(127, 28, 69, 0.24);
    margin-bottom: 1.2rem;
}

.survey-hero-compact {
    margin-bottom: 1rem;
}

.survey-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    opacity: 0.82;
}

.survey-hero h1 {
    margin: 0.4rem 0 0.5rem;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.05;
}

.survey-hero p {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
}

.survey-user-form,
.survey-hero-actions {
    min-width: min(100%, 290px);
}

.survey-user-form {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(16px);
}

.survey-user-form label {
    font-size: 0.84rem;
    font-weight: 700;
}

.survey-user-form input,
.survey-user-form select,
.survey-search input,
.survey-toolbar select,
.answer-field {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    background: #fff;
    color: var(--text-main);
}

.survey-user-form button,
.primary-button,
.ghost-button {
    border: 0;
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.survey-user-form button,
.primary-button {
    background: linear-gradient(135deg, #ffffff, #f5d8e4);
    color: var(--brand-primary);
}

.ghost-button {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.primary-button:hover,
.ghost-button:hover,
.survey-user-form button:hover {
    transform: translateY(-1px);
}

.survey-alert {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    margin-bottom: 1rem;
}

.survey-alert-danger {
    border-color: rgba(217, 72, 95, 0.28);
    background: #fff3f5;
    color: #b7364d;
}

.survey-alert-success {
    border-color: rgba(31, 157, 103, 0.28);
    background: #edf9f3;
    color: #177d54;
}

.survey-alert-info {
    border-color: rgba(37, 99, 235, 0.2);
    background: #eff6ff;
    color: #2457b2;
}

body.survey-feedback-modal-open {
    overflow: hidden;
}

.survey-feedback-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}

.survey-feedback-modal-backdrop[hidden] {
    display: none !important;
}

.survey-feedback-modal {
    width: min(100%, 480px);
    background: var(--surface);
    border-radius: 24px;
    border: 1px solid rgba(217, 226, 236, 0.9);
    box-shadow: var(--shadow-strong);
    overflow: hidden;
}

.survey-feedback-modal-header,
.survey-feedback-modal-body,
.survey-feedback-modal-footer {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.survey-feedback-modal-header {
    padding-top: 1.4rem;
    padding-bottom: 0.6rem;
}

.survey-feedback-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.survey-feedback-modal-body {
    padding-top: 0.2rem;
    padding-bottom: 1rem;
}

.survey-feedback-modal-body p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.6;
}

.survey-feedback-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.9rem;
    padding-bottom: 1.4rem;
    background: var(--surface-soft);
}

.survey-feedback-modal.is-success {
    border-color: rgba(31, 157, 103, 0.28);
}

.survey-feedback-modal.is-success .survey-feedback-modal-header h2 {
    color: var(--success);
}

.survey-feedback-modal.is-danger {
    border-color: rgba(217, 72, 95, 0.28);
}

.survey-feedback-modal.is-danger .survey-feedback-modal-header h2 {
    color: var(--danger);
}

.survey-points-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(5px);
}

.survey-points-confetti-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.survey-points-confetti-piece {
    position: absolute;
    top: -12vh;
    width: var(--confetti-width, 10px);
    height: var(--confetti-height, 18px);
    left: var(--confetti-left, 50%);
    border-radius: 999px;
    background: var(--confetti-color, #fff);
    opacity: 0.95;
    transform: translate3d(0, 0, 0) rotate(0deg);
    animation:
        confetti-fall var(--confetti-duration, 2.8s) linear var(--confetti-delay, 0s) forwards,
        confetti-sway var(--confetti-sway-duration, 1.8s) ease-in-out var(--confetti-delay, 0s) infinite;
}

.survey-points-confetti-piece.is-circle {
    border-radius: 50%;
}

.survey-points-confetti-piece.is-square {
    border-radius: 3px;
}

.survey-points-confetti-piece.is-rect {
    border-radius: 2px;
}

@keyframes confetti-fall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--confetti-drift, 0px), 112vh, 0) rotate(var(--confetti-rotation, 720deg));
        opacity: 0;
    }
}

@keyframes confetti-sway {
    0%,
    100% {
        margin-left: 0;
    }
    50% {
        margin-left: var(--confetti-sway, 18px);
    }
}

.survey-points-modal-backdrop[hidden] {
    display: none !important;
}

.survey-points-modal {
    position: relative;
    width: min(100%, 540px);
    overflow: hidden;
    border-radius: 30px;
    background: var(--surface);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.survey-points-modal-header {
    position: relative;
    padding: 1.2rem 1.4rem 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #9a416c 0%, #cf6072 43%, #ef9b5d 100%);
}

.survey-points-modal-header::after {
    content: '';
    position: absolute;
    right: -1.1rem;
    top: 1.2rem;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.survey-points-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.survey-points-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
}

.survey-points-modal-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.survey-points-modal-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 1.3rem;
}

.survey-points-modal-copy h2 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.1;
}

.survey-points-modal-copy p {
    margin: 0.3rem 0 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}

.survey-points-modal-body {
    padding: 1.2rem 1.4rem 0.8rem;
}

.survey-points-modal-body p {
    margin: 0;
    color: var(--text-main);
    font-size: 1.02rem;
    line-height: 1.7;
}

.survey-points-modal-footer {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    padding: 0.6rem 1.4rem 1.4rem;
}

.survey-points-modal-confirm {
    min-width: 11rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #18c3b7 0%, #00c9a7 100%);
    box-shadow: 0 14px 26px rgba(0, 201, 167, 0.24);
}

.survey-points-modal-confirm:hover {
    filter: brightness(0.98);
}

@media (max-width: 576px) {
    .survey-points-modal {
        border-radius: 24px;
    }

    .survey-points-modal-header {
        padding: 1rem 1.1rem 0.95rem;
    }

    .survey-points-modal-hero {
        align-items: flex-start;
    }

    .survey-points-modal-copy h2 {
        font-size: 1.3rem;
    }

    .survey-points-modal-body,
    .survey-points-modal-footer {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

.survey-empty-panel,
.survey-toolbar,
.survey-card,
.survey-summary-card,
.survey-form-card,
.survey-question,
.survey-filter-empty {
    background: var(--surface);
    border: 1px solid rgba(217, 226, 236, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.survey-empty-panel {
    display: grid;
    place-items: center;
    gap: 0.4rem;
    padding: 2rem 1.2rem;
    text-align: center;
    color: var(--text-muted);
}

.survey-empty-panel i {
    font-size: 1.4rem;
    color: var(--brand-primary);
}

.survey-empty-panel code {
    background: var(--surface-muted);
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
}

.survey-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.survey-toolbar-heading h2,
.survey-form-heading h2,
.survey-summary-card h2,
.survey-question-body h2 {
    margin: 0;
}

.survey-toolbar-heading small,
.survey-form-heading small,
.survey-summary-meta,
.survey-card p,
.survey-question-body p {
    color: var(--text-muted);
}

.survey-toolbar-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.survey-search {
    position: relative;
    min-width: min(100%, 300px);
}

.survey-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.survey-search input {
    padding-left: 2.6rem;
    border-color: var(--border);
}

.survey-toolbar select {
    border-color: var(--border);
}

.survey-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.survey-card {
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.survey-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
}

.survey-card-top,
.survey-summary-top,
.survey-card-meta,
.survey-summary-meta,
.survey-form-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.survey-card h3 {
    margin: 0;
    font-size: 1.2rem;
}

.survey-pill,
.survey-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.survey-pill {
    background: rgba(127, 28, 69, 0.08);
    color: var(--brand-primary);
}

.survey-badge.status-draft {
    background: #fff6df;
    color: #9a6404;
}

.survey-badge.status-live {
    background: #e9f8ef;
    color: #117a52;
}

.survey-badge.status-progress {
    background: #eaf2ff;
    color: #285fc0;
}

.survey-badge.status-closed {
    background: #edf2f7;
    color: #4a5565;
}

.survey-badge.status-cancelled {
    background: #fdecef;
    color: #b63d53;
}

.survey-card-meta,
.survey-summary-meta {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.survey-card-meta span,
.survey-summary-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.survey-response-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.survey-summary-card,
.survey-form-card {
    padding: 1rem;
}

.survey-summary-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.survey-summary-stats > div {
    background: var(--surface-soft);
    border-radius: 16px;
    padding: 0.9rem;
    text-align: center;
}

.survey-summary-stats strong {
    display: block;
    color: var(--brand-primary);
    font-size: 1.25rem;
}

.survey-form-heading {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.survey-question-list {
    display: grid;
    gap: 1rem;
}

.survey-question {
    overflow: hidden;
}

.survey-question-header {
    background: linear-gradient(135deg, #2c435b, #3d5976);
    color: #fff;
    padding: 0.9rem 1rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.survey-question-body {
    padding: 1rem;
    display: grid;
    gap: 0.9rem;
}

.survey-question-body h2 {
    font-size: 1.1rem;
    line-height: 1.4;
}

.survey-question-body h2 small {
    color: var(--danger);
}

body.survey-response-simple-body {
    background: #f0f2f5;
}

.survey-response-simple-shell {
    width: min(760px, calc(100% - 1.2rem));
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.survey-response-simple-backbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.survey-response-simple-backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}

.survey-response-simple-form {
    display: grid;
    gap: 1rem;
}

.survey-response-simple-intro {
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid rgba(217, 226, 236, 0.9);
    box-shadow: var(--shadow-soft);
}

.survey-response-simple-accent {
    height: 10px;
    background: linear-gradient(135deg, var(--brand-primary), #b03f73 58%, var(--brand-secondary));
}

.survey-response-simple-intro-body {
    padding: 1.25rem 1.35rem 1.15rem;
}

.survey-response-simple-intro-body h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    line-height: 1.12;
}

.survey-response-simple-intro-body p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.6;
    white-space: normal;
}

.survey-response-simple-meta {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.survey-response-simple-meta strong {
    color: var(--danger);
}

.survey-response-simple-alert {
    margin-bottom: 0;
}

.survey-question-list-simple {
    gap: 0.85rem;
}

.survey-response-simple-body .survey-question {
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid rgba(217, 226, 236, 0.9);
    box-shadow: var(--shadow-soft);
}

.survey-response-simple-body .survey-question-header {
    padding: 0.85rem 1rem;
    background: #fff;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    letter-spacing: 0;
}

.survey-response-simple-body .survey-question-body {
    padding: 1.15rem 1rem 1rem;
    gap: 0.8rem;
}

.survey-response-simple-body .survey-question-body h2 {
    font-size: 1.32rem;
    line-height: 1.35;
}

.survey-response-simple-body .survey-question-body p {
    margin: 0;
    color: var(--text-muted);
}

.survey-response-simple-body .answer-choice,
.survey-response-simple-body .answer-satisfaction-slider {
    background: #fff;
    border-radius: 14px;
}

.survey-response-simple-body .answer-satisfaction-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
}

.survey-response-simple-body .answer-field {
    background: #fff;
    min-height: 54px;
}

.survey-form-footer-simple {
    justify-content: flex-start;
    padding-top: 0.1rem;
}

.survey-action-secondary {
    color: var(--brand-secondary);
    background: #eaf0f8;
    border: 1px solid #dbe5f0;
}

.survey-action-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), #b03f73);
    box-shadow: 0 14px 26px rgba(127, 28, 69, 0.18);
}

.answer-options,
.answer-satisfaction-grid {
    display: grid;
    gap: 0.75rem;
}

.answer-satisfaction-slider {
    display: grid;
    gap: 0.95rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-soft);
    --satisfaction-progress: 0%;
    --satisfaction-accent: var(--brand-primary);
}

.satisfaction-slider-current {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(127, 28, 69, 0.12);
    background: linear-gradient(180deg, #fff, #fbfcfe);
}

.satisfaction-slider-current.is-active {
    border-color: color-mix(in srgb, var(--satisfaction-accent) 24%, var(--border));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--satisfaction-accent) 16%, transparent);
}

.satisfaction-slider-current-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--satisfaction-accent) 12%, white);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.satisfaction-slider-current-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.satisfaction-slider-current-hint {
    color: var(--text-muted);
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.satisfaction-slider-current-copy strong {
    color: var(--text-main);
    font-size: 1rem;
}

.satisfaction-slider-current-copy small {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.satisfaction-slider-control {
    padding: 0 0.2rem;
}

.satisfaction-slider-input {
    width: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.satisfaction-slider-input:focus {
    outline: none;
}

.satisfaction-slider-input::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--satisfaction-accent) 0%, var(--satisfaction-accent) var(--satisfaction-progress), #e4ebf3 var(--satisfaction-progress), #e4ebf3 100%);
}

.satisfaction-slider-input::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -6px;
    border-radius: 999px;
    border: 3px solid #fff;
    background: var(--satisfaction-accent);
    box-shadow: 0 8px 16px rgba(31, 42, 55, 0.16);
}

.satisfaction-slider-input::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: #e4ebf3;
}

.satisfaction-slider-input::-moz-range-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--satisfaction-accent);
}

.satisfaction-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--satisfaction-accent);
    box-shadow: 0 8px 16px rgba(31, 42, 55, 0.16);
}

.satisfaction-slider-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-start;
}

.satisfaction-slider-scale-item {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 0.24rem;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.satisfaction-slider-scale-item:hover,
.satisfaction-slider-scale-item:focus-visible {
    color: var(--text-main);
    transform: translateY(-1px);
    outline: none;
}

.satisfaction-slider-scale-item.is-active {
    color: var(--text-main);
}

.satisfaction-slider-scale-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--accent-color, var(--brand-primary)) 45%, white);
    background: #fff;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.satisfaction-slider-scale-item.is-passed .satisfaction-slider-scale-dot,
.satisfaction-slider-scale-item.is-active .satisfaction-slider-scale-dot {
    background: var(--accent-color, var(--satisfaction-accent));
    border-color: var(--accent-color, var(--satisfaction-accent));
    transform: scale(1.05);
}

.satisfaction-slider-scale-emoji {
    font-size: 1.05rem;
    line-height: 1;
}

.satisfaction-slider-scale-label {
    font-weight: 700;
    color: currentColor;
    font-size: 0.9rem;
}

.satisfaction-slider-scale-item small {
    color: inherit;
    font-size: 0.77rem;
}

.answer-choice,
.satisfaction-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-soft);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.answer-choice:hover,
.satisfaction-choice:hover {
    transform: translateY(-1px);
    border-color: rgba(127, 28, 69, 0.26);
}

.answer-choice input,
.satisfaction-choice input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
}

.satisfaction-choice {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 146px;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.survey-response-simple-body .satisfaction-choice {
    min-height: 102px;
    gap: 0.45rem;
    padding: 0.8rem 0.7rem;
    border-radius: 16px;
}

.satisfaction-choice input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.satisfaction-choice-emoji {
    font-size: 2rem;
    line-height: 1;
}

.survey-response-simple-body .satisfaction-choice-emoji {
    font-size: 1.75rem;
}

.satisfaction-choice-label {
    font-weight: 700;
    color: var(--text-main);
}

.survey-response-simple-body .satisfaction-choice-label {
    font-size: 0.95rem;
}

.satisfaction-choice small {
    color: var(--text-muted);
}

.survey-response-simple-body .satisfaction-choice small {
    font-size: 0.82rem;
}

.satisfaction-choice:has(input:checked) {
    border-color: var(--accent-color, var(--brand-primary));
    box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--accent-color, var(--brand-primary)) 18%, transparent);
    background: #fff;
}

.answer-field {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.95rem 1rem;
    background: var(--surface-soft);
    color: var(--text-main);
}

.answer-textarea {
    resize: vertical;
    min-height: 120px;
}

.survey-form-footer {
    justify-content: flex-end;
    padding-top: 1rem;
}

.survey-form-footer .ghost-button {
    color: var(--brand-secondary);
    background: var(--surface-soft);
    border-color: var(--border);
}

.survey-form-footer .primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary), #bf5b89);
    box-shadow: 0 14px 28px rgba(127, 28, 69, 0.2);
}

.survey-filter-empty[hidden] {
    display: none;
}

.survey-empty {
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(127, 28, 69, 0.2);
    background: #faf6f8;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .survey-response-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .survey-portal-shell {
        width: min(100% - 1rem, 1240px);
    }

    .survey-hero,
    .survey-toolbar,
    .survey-form-heading,
    .survey-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .survey-user-form,
    .survey-hero-actions,
    .survey-search {
        min-width: 0;
    }

    .survey-summary-stats {
        grid-template-columns: 1fr;
    }

    .survey-response-simple-shell {
        width: min(100% - 0.9rem, 760px);
    }

    .survey-response-simple-intro-body {
        padding: 1rem;
    }

    .survey-form-footer-simple {
        align-items: stretch;
    }

    .answer-satisfaction-slider {
        padding: 0.9rem;
    }

    .satisfaction-slider-current {
        padding: 0.85rem;
    }

    .satisfaction-slider-scale {
        gap: 0.35rem;
    }

    .satisfaction-slider-scale-label {
        font-size: 0.82rem;
    }

    .satisfaction-slider-scale-item small {
        font-size: 0.72rem;
    }
}

body.poll-public-body {
    margin-top: 0 !important;
}

.poll-public-shell {
    padding-top: 1.4rem;
}

.poll-public-topbar {
    align-items: center;
    margin-bottom: 1.5rem;
}

.poll-eyebrow {
    display: inline-block;
}

.panel-card,
.public-filter-card {
    background: var(--surface);
    border: 1px solid rgba(217, 226, 236, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.panel-heading h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.poll-public-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.poll-public-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1.25rem;
}

.toolbar-search {
    position: relative;
    min-width: min(100%, 320px);
}

.toolbar-search-block {
    width: 100%;
}

.toolbar-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.toolbar-search input,
.toolbar-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.82rem 0.95rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.toolbar-search input {
    padding-left: 2.6rem;
}

.toolbar-search input:focus,
.toolbar-select:focus {
    outline: none;
    border-color: rgba(127, 28, 69, 0.55);
    box-shadow: 0 0 0 0.23rem rgba(127, 28, 69, 0.12);
}

.filter-stack {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.poll-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.poll-public-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.poll-public-card-accent {
    height: 6px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
}

.poll-public-card-body {
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem;
}

.poll-card-top,
.poll-public-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.poll-public-card h2 {
    margin: 0.5rem 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.35;
}

.poll-public-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.poll-public-meta {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.poll-public-meta span,
.survey-side-note-content span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.type-pill,
.badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.type-pill {
    background: rgba(127, 28, 69, 0.08);
    color: var(--brand-primary);
}

.badge-pill.status-draft {
    background: #fff6df;
    color: #9a6404;
}

.badge-pill.status-live {
    background: #e9f8ef;
    color: #117a52;
}

.badge-pill.status-closed {
    background: #edf2f7;
    color: #4a5565;
}

.badge-pill.status-cancelled {
    background: #fdecef;
    color: #b63d53;
}

.empty-state {
    padding: 2rem 1rem;
    border: 1px dashed rgba(127, 28, 69, 0.22);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(127, 28, 69, 0.04), rgba(37, 99, 235, 0.04));
    color: var(--text-muted);
    display: grid;
    place-items: center;
    gap: 0.35rem;
    text-align: center;
}

.empty-state i {
    font-size: 1.4rem;
    color: var(--brand-primary);
}

.public-empty-state[hidden] {
    display: none;
}

.survey-side-note-content {
    display: grid;
    gap: 0.7rem;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .poll-public-layout {
        grid-template-columns: 1fr;
    }

    .poll-public-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .poll-public-grid {
        grid-template-columns: 1fr;
    }
}

.survey-identity-question {
    margin-bottom: 1.1rem;
}