:root {
            color-scheme: light;
            --survey-density: 1;
            --bg: #eee6d9;
            --surface: #fbf6ed;
            --surface-soft: #f2e8d8;
            --text: #1f1b16;
            --muted: #6f6252;
            --border: #d7c3a5;
            --accent: #d97706;
            --accent-strong: #b45309;
            --accent-soft: #fff0d1;
            --danger: #a63a2d;
            --good: #15803d;
            --shadow: 0 18px 42px rgba(88, 63, 30, 0.13);
        }
        [data-theme="dark"] {
            color-scheme: dark;
            --bg: #0d0d0f;
            --surface: #171717;
            --surface-soft: #242424;
            --text: #fbfcff;
            --muted: #d2d2d2;
            --border: #4a4a4a;
            --accent: #f59e0b;
            --accent-strong: #ffbd45;
            --accent-soft: #352913;
            --danger: #ff9b73;
            --good: #22c55e;
            --shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
        }
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            min-height: 100vh;
            background: var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            overflow-x: hidden;
        }
        html:has(.response-viewer), body:has(.response-viewer) {
            height: 100%;
            overflow: hidden;
        }
        button, input {
            font: inherit;
        }
        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: calc(12px * var(--survey-density)) 22px;
            background: color-mix(in srgb, var(--surface) 88%, transparent);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(14px);
        }
        .brand {
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
        }
        .top-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .theme-toggle, .link-button, .primary-button, .secondary-button {
            min-height: 42px;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 9px 14px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: nowrap;
        }
        .theme-toggle, .secondary-button, .link-button {
            background: var(--surface);
            color: var(--text);
        }
        .primary-button {
            border-color: var(--accent-strong);
            background: var(--accent);
            color: #ffffff;
            font-weight: 700;
        }
        [data-theme="dark"] .primary-button {
            color: #111111;
        }
        .primary-button:hover, .secondary-button:hover, .theme-toggle:hover, .link-button:hover {
            transform: translateY(-1px);
        }
        .wrap {
            width: 100%;
            max-width: none;
            margin: 0 auto;
            padding: clamp(6px, calc(0.9vw * var(--survey-density)), 16px);
            overflow-x: hidden;
        }
        .wrap:has(.response-viewer) {
            height: calc(100vh - 66px);
            overflow: hidden;
            padding-bottom: 8px;
        }
        .survey-layout {
            display: grid;
            grid-template-columns: minmax(520px, 0.88fr) minmax(620px, 1.12fr);
            gap: clamp(8px, calc(1.05vw * var(--survey-density)), 20px);
            align-items: start;
        }
        .form-panel, .center-panel, .admin-panel, .vignette-card, .wide-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }
        .vignette-panel {
            display: grid;
            gap: calc(8px * var(--survey-density));
            align-content: start;
        }
        .split-vignette-title {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: calc(7px * var(--survey-density)) 14px;
            text-align: center;
            font-weight: 900;
            font-size: max(14px, calc(18px * var(--survey-density)));
        }
        .scenario-content {
            display: grid;
            gap: calc(6px * var(--survey-density));
        }
        .vignette-card {
            padding: clamp(8px, calc(0.68vw * var(--survey-density)), 14px);
        }
        .vignette-card h2 {
            margin: 0 0 calc(5px * var(--survey-density));
            font-size: max(15px, calc(19px * var(--survey-density)));
            line-height: 1.2;
            font-weight: 800;
        }
        .vignette-card p {
            margin: 0 0 calc(5px * var(--survey-density));
            color: var(--text);
            font-size: max(12px, calc(15px * var(--survey-density)));
            line-height: max(1.24, calc(1.34 * var(--survey-density)));
        }
        .vignette-card p:last-child {
            margin-bottom: 0;
        }
        .scenario-content.compact .vignette-card {
            padding: clamp(7px, calc(0.52vw * var(--survey-density)), 11px);
        }
        .scenario-content.compact .vignette-card p,
        .scenario-content.compact .vignette-card li {
            font-size: max(11.5px, calc(15.2px * var(--survey-density)));
            line-height: max(1.18, calc(1.28 * var(--survey-density)));
        }
        .scenario-content.compact .vignette-card h3,
        .scenario-content.compact .vignette-card h4 {
            font-size: max(13px, calc(17px * var(--survey-density)));
        }
        .form-panel {
            padding: clamp(9px, calc(0.8vw * var(--survey-density)), 16px);
            max-width: 1500px;
            margin: 0 auto;
            width: 100%;
        }
        .form-panel > h1, .form-panel > h2 {
            font-size: max(15px, calc(22px * var(--survey-density)));
            line-height: 1.25;
            margin: 0 0 calc(12px * var(--survey-density));
        }
        .survey-layout .form-panel {
            max-width: none;
            margin: 0;
        }
        .wide-panel {
            padding: clamp(14px, 1.2vw, 24px);
        }
        .progress-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: calc(14px * var(--survey-density));
            color: var(--muted);
            font-size: max(12px, calc(14px * var(--survey-density)));
        }
        .item-block {
            border: 1px solid var(--border);
            background: var(--surface-soft);
            border-radius: 8px;
            padding: clamp(8px, calc(0.68vw * var(--survey-density)), 14px);
            margin: 0 0 calc(8px * var(--survey-density));
            overflow-x: visible;
        }
        .question-block.error-highlight, .matrix-table tr.error-highlight {
            border-color: var(--danger);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 24%, transparent);
        }
        .matrix-table tr.error-highlight td {
            background: color-mix(in srgb, var(--danger) 8%, var(--surface));
        }
        .matrix-table tr.error-highlight .statement-cell {
            border-left: 3px solid var(--danger);
        }
        .item-text {
            font-size: max(12px, calc(15px * var(--survey-density)));
            font-weight: 700;
            color: var(--text);
            margin-bottom: calc(7px * var(--survey-density));
        }
        .required-star {
            color: var(--danger);
            font-weight: 900;
            margin-left: 4px;
        }
        .error-msg {
            color: var(--danger);
            font-weight: 700;
            margin-top: 10px;
        }
        .likert-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(76px, 1fr));
            gap: clamp(5px, calc(0.55vw * var(--survey-density)), 9px);
            min-width: 600px;
        }
        .likert-choice {
            min-height: max(52px, calc(78px * var(--survey-density)));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: calc(8px * var(--survey-density));
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            padding: calc(7px * var(--survey-density)) 5px;
            text-align: center;
        }
        .likert-choice input, .option-choice input {
            width: max(16px, calc(19px * var(--survey-density)));
            height: max(16px, calc(19px * var(--survey-density)));
            margin: 0;
            accent-color: var(--accent);
            flex: 0 0 auto;
        }
        .likert-label {
            font-weight: 700;
            font-size: max(9px, calc(12px * var(--survey-density)));
            line-height: 1.25;
            min-height: max(26px, calc(32px * var(--survey-density)));
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .likert-choice:has(input:checked), .option-choice:has(input:checked) {
            border-color: var(--accent);
            background: var(--accent-soft);
        }
        .option-list {
            display: grid;
            gap: calc(6px * var(--survey-density));
        }
        .option-list.horizontal {
            grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        }
        .option-choice {
            min-height: max(34px, calc(42px * var(--survey-density)));
            display: flex;
            align-items: center;
            gap: 9px;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: calc(7px * var(--survey-density)) 10px;
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            font-size: max(12px, calc(14px * var(--survey-density)));
            line-height: 1.2;
        }
        .matrix-title {
            font-size: max(12px, calc(15px * var(--survey-density)));
            font-weight: 800;
            line-height: 1.25;
            margin-bottom: 10px;
        }
        .table-responsive-wrapper {
            width: 100%;
            overflow-x: visible;
        }
        .matrix-table {
            width: 100%;
            min-width: 0;
            table-layout: fixed;
            border-collapse: collapse;
        }
        .matrix-table col.statement-col {
            width: 34%;
        }
        .matrix-table col.scale-col {
            width: 9.428%;
        }
        .matrix-table th, .matrix-table td {
            border: 1px solid var(--border);
            vertical-align: middle;
        }
        .matrix-table th {
            color: var(--text);
            background: var(--surface);
            text-align: center;
            font-size: max(8px, calc(10px * var(--survey-density)));
            line-height: 1.12;
            padding: 6px 4px;
            overflow-wrap: anywhere;
            word-break: normal;
        }
        .matrix-table td {
            padding: 0;
            text-align: center;
        }
        .matrix-table .statement-cell {
            width: 34%;
            min-width: 0;
            text-align: left;
            font-weight: 700;
            font-size: max(10px, calc(13px * var(--survey-density)));
            line-height: 1.3;
            padding: 8px;
            background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
            overflow-wrap: anywhere;
            word-break: normal;
        }
        .statement-text {
            display: inline;
        }
        .matrix-choice {
            min-height: max(34px, calc(46px * var(--survey-density)));
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 6px 3px;
        }
        .matrix-choice:hover, .option-choice:hover {
            background: var(--accent-soft);
        }
        .matrix-choice:has(input:checked) {
            background: var(--accent-soft);
            box-shadow: inset 0 0 0 2px var(--accent);
        }
        .matrix-choice input {
            width: max(16px, calc(19px * var(--survey-density)));
            height: max(16px, calc(19px * var(--survey-density)));
            margin: 0;
            accent-color: var(--accent);
        }
        .matrix-choice span {
            display: none;
        }
        .scenario-content h3, .scenario-content h4 {
            margin: calc(7px * var(--survey-density)) 0 calc(5px * var(--survey-density));
            color: var(--text);
        }
        .scenario-content p {
            color: var(--text);
        }
        .scenario-content ul {
            margin: calc(4px * var(--survey-density)) 0 calc(5px * var(--survey-density)) 17px;
            padding: 0;
        }
        .scenario-content li {
            margin-bottom: calc(2px * var(--survey-density));
            color: var(--text);
            font-size: max(12px, calc(15px * var(--survey-density)));
            line-height: max(1.22, calc(1.34 * var(--survey-density)));
        }
        .reviewgpt-explanation {
            border-left: 4px solid var(--accent);
            background: var(--surface-soft);
            padding: calc(6px * var(--survey-density)) 10px;
            border-radius: 8px;
        }
        .scenario-drawer {
            display: block;
        }
        .scenario-drawer > summary {
            display: none;
        }
        .admin-table-wrap {
            overflow-x: auto;
        }
        .admin-actions-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-top: 14px;
        }
        .upload-box {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-top: 14px;
        }
        .admin-input, .admin-select, .admin-file {
            min-height: 40px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
            color: var(--text);
            padding: 8px 10px;
        }
        .response-viewer {
            display: grid;
            grid-template-columns: minmax(460px, 0.82fr) minmax(620px, 1.18fr);
            gap: 16px;
            align-items: start;
            height: 100%;
            overflow: hidden;
        }
        .viewer-left {
            display: grid;
            gap: calc(8px * var(--survey-density));
            align-content: start;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }
        .viewer-right {
            min-width: 0;
            height: 100%;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 18px;
        }
        .viewer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }
        .viewer-section {
            margin-top: 16px;
        }
        .viewer-section h2 {
            margin: 0 0 10px;
            font-size: 18px;
            line-height: 1.25;
        }
        .viewer-dropdown-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 10px;
        }
        .viewer-response-stack {
            display: grid;
            gap: 12px;
        }
        .viewer-field {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
            padding: 9px;
        }
        .viewer-field label {
            display: block;
            color: var(--muted);
            font-weight: 800;
            font-size: 12px;
            margin-bottom: 6px;
        }
        .viewer-field input, .viewer-field select {
            width: 100%;
            min-height: 38px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface);
            color: var(--text);
            padding: 8px;
        }
        .viewer-field.changed {
            outline: 2px solid var(--accent);
        }
        .question-block.changed, .matrix-table tr.changed {
            box-shadow: 0 0 0 2px var(--accent);
        }
        .thank-you {
            text-align: center;
        }
        .thank-you h1 {
            color: #24864a;
        }
        .form-actions {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: calc(14px * var(--survey-density));
        }
        .form-actions.single {
            justify-content: flex-end;
        }
        .error-box {
            border: 1px solid var(--danger);
            color: var(--danger);
            background: color-mix(in srgb, var(--danger) 11%, var(--surface));
            border-radius: 8px;
            padding: 11px 13px;
            margin-bottom: 16px;
            font-weight: 700;
        }
        .center-panel {
            max-width: 960px;
            margin: 18px auto;
            padding: 20px;
        }
        .intro-panel {
            width: min(1440px, calc(100vw - 28px));
            max-width: none;
            margin: 12px auto;
            padding: 16px 22px;
        }
        .intro-panel h1 {
            font-size: 25px;
            line-height: 1.18;
            margin-bottom: 12px;
        }
        .intro-panel h2 {
            font-size: 21px;
            line-height: 1.2;
            margin: 0 0 8px;
        }
        .intro-panel p {
            margin-bottom: 9px;
            line-height: 1.32;
        }
        .intro-panel ul {
            margin: 0 0 10px;
            padding-left: 20px;
        }
        .intro-panel li {
            margin-bottom: 2px;
            line-height: 1.25;
        }
        .center-panel h1, .admin-panel h1 {
            margin: 0 0 12px;
            font-size: 26px;
            line-height: 1.2;
        }
        .center-panel p {
            color: var(--muted);
            margin: 0 0 18px;
        }
        .admin-panel {
            padding: 22px;
            margin-bottom: 18px;
        }
        .admin-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(120px, 1fr));
            gap: 12px;
            margin: 18px 0;
        }
        .metric {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 14px;
            background: var(--surface-soft);
        }
        .metric strong {
            display: block;
            font-size: 24px;
            line-height: 1.15;
        }
        .metric span {
            color: var(--muted);
            font-size: 13px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 16px;
        }
        th, td {
            border-bottom: 1px solid var(--border);
            padding: 10px;
            text-align: left;
            vertical-align: top;
        }
        th {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }
        .login-input {
            width: 100%;
            min-height: 46px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
            color: var(--text);
            padding: 10px 12px;
            margin: 8px 0 16px;
        }
        @media (min-width: 1181px) {
            html:has(.survey-layout),
            body:has(.survey-layout),
            html:has(.form-panel .scenario-content:not(.compact)),
            body:has(.form-panel .scenario-content:not(.compact)) {
                height: 100%;
                overflow: hidden;
            }
        }
        @media (max-width: 1180px) {
            html:has(.response-viewer), body:has(.response-viewer) {
                height: auto;
                overflow: auto;
            }
            .wrap {
                padding: 10px;
            }
            .wrap:has(.response-viewer) {
                height: auto;
                overflow: visible;
            }
            .survey-layout {
                grid-template-columns: 1fr;
            }
            .admin-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .topbar {
                padding: 10px 14px;
            }
            .response-viewer {
                grid-template-columns: 1fr;
                height: auto;
                overflow: visible;
            }
            .viewer-left {
                position: relative;
                top: auto;
                max-height: none;
                height: auto;
                overflow: visible;
            }
            .viewer-right {
                height: auto;
                overflow: visible;
            }
        }
        @media (max-width: 680px) {
            .topbar {
                gap: 10px;
                align-items: center;
            }
            .brand {
                font-size: 13px;
                line-height: 1.2;
            }
            .theme-toggle {
                min-height: 36px;
                padding: 7px 10px;
            }
            .center-panel, .form-panel, .admin-panel {
                padding: 12px;
                margin: 0;
            }
            .center-panel h1, .admin-panel h1 {
                font-size: 22px;
            }
            .scenario-drawer {
                border: 1px solid var(--border);
                border-radius: 8px;
                background: var(--surface);
                box-shadow: var(--shadow);
                overflow: hidden;
            }
            .scenario-drawer > summary {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 4px 8px;
                align-items: center;
                cursor: pointer;
                padding: 10px 12px;
                list-style: none;
            }
            .scenario-drawer > summary::-webkit-details-marker {
                display: none;
            }
            .scenario-summary-title {
                font-weight: 900;
                font-size: 15px;
            }
            .scenario-summary-text {
                grid-column: 1 / -1;
                color: var(--muted);
                font-size: 12px;
                line-height: 1.25;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .scenario-summary-icon {
                font-size: 18px;
                font-weight: 900;
                transition: transform 0.18s ease;
            }
            .scenario-drawer[open] .scenario-summary-icon {
                transform: rotate(180deg);
            }
            .scenario-drawer .scenario-content {
                padding: 0 10px 10px;
            }
            .scenario-content.compact .vignette-card p,
            .scenario-content.compact .vignette-card li {
                font-size: 13px;
                line-height: 1.3;
            }
            .matrix-table {
                display: block;
                min-width: 0;
                border: none;
            }
            .matrix-table colgroup {
                display: none;
            }
            .matrix-table thead {
                display: none;
            }
            .matrix-table tbody {
                display: block;
                width: 100%;
            }
            .matrix-table tr {
                display: block;
                border: none;
                border-radius: 0;
                overflow: visible;
                margin-bottom: 14px;
                background: transparent;
            }
            .matrix-table .statement-cell {
                display: block;
                width: 100%;
                min-width: 0;
                border: none;
                border-bottom: none;
                font-size: 13px;
                line-height: 1.25;
                padding: 0 0 7px;
                background: transparent;
            }
            .matrix-table .option-cell {
                display: block;
                width: 100%;
                border: none;
                padding: 0;
            }
            .matrix-choice {
                justify-content: flex-start;
                gap: 10px;
                min-height: 32px;
                padding: 4px 0;
                background: transparent;
            }
            .matrix-choice span {
                display: inline;
                font-weight: 700;
                font-size: 13px;
                line-height: 1.2;
            }
            .matrix-choice:hover,
            .matrix-choice:has(input:checked) {
                background: transparent;
                box-shadow: none;
            }
            .likert-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                min-width: 0;
            }
            .likert-choice {
                min-height: 62px;
            }
            .option-list.horizontal {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .option-choice {
                font-size: 13px;
                min-height: 40px;
            }
            .viewer-dropdown-grid, .viewer-grid {
                grid-template-columns: 1fr;
            }
            .admin-table-wrap {
                max-width: 100%;
            }
            .admin-panel > .top-actions,
            .form-actions .top-actions {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }
            .admin-grid {
                grid-template-columns: 1fr;
            }
            .form-actions {
                flex-direction: column-reverse;
            }
            .primary-button, .secondary-button, .link-button {
                width: 100%;
            }
        }