/* ========================================= */
/* STYLE BLOCK 1 */
/* ========================================= */
/* AXA XYZ THEME: Dark Glassmorphism Premium */
:root {
    --neon-green: #39ff14;
    --neon-glow: 0 0 8px rgba(57, 255, 20, 0.4), 0 0 16px rgba(57, 255, 20, 0.2);
    --bg-dark: #070a10;
    --glass-bg: rgba(15, 20, 30, 0.75);
    --glass-border: rgba(57, 255, 20, 0.25);
}

body {
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at top right, rgba(57, 255, 20, 0.08), transparent 50%),
        radial-gradient(circle at bottom left, rgba(57, 255, 20, 0.05), transparent 50%);
    color: #e2e8f0;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 10;
}

.text-neon {
    color: var(--neon-green);
    text-shadow: var(--neon-glow);
}

.border-neon {
    border-color: var(--neon-green);
    box-shadow: var(--neon-glow);
}

.btn-neon {
    background: rgba(57, 255, 20, 0.05);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-neon:hover:not(:disabled),
.btn-neon:active:not(:disabled) {
    background: var(--neon-green);
    color: var(--bg-dark);
    box-shadow: var(--neon-glow);
    transform: translateY(-2px);
}

.btn-neon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #4b5563;
    color: #9ca3af;
    box-shadow: none;
    transform: none;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.6rem;
    transition: all 0.2s ease-in-out;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0.5rem;
}

@media (hover: hover) {
    .radio-group label:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

.radio-group input[type="radio"]:checked+label {
    background: rgba(57, 255, 20, 0.15);
    border-color: var(--neon-green);
    color: var(--neon-green);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.15) inset;
    transform: scale(0.97);
}

.radio-group label span.num {
    font-size: 1.15rem;
    font-weight: 800;
}

.vas-group label {
    min-height: 45px;
    border-radius: 0.5rem;
    padding: 5px;
}

/* NUMERIC RATING SCALE (NRS) STYLES (GAMBAR 1) */
.nrs-btn {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.nrs-btn:hover {
    background: var(--nb-yellow, #ffe66d) !important;
    transform: translateY(-2px);
}

.nrs-btn.active,
.nrs-btn:has(input[type="radio"]:checked) {
    background: var(--nb-pink, #ff6fb5) !important;
    color: #111 !important;
    border-color: #111 !important;
    border-width: 3px !important;
    box-shadow: 3px 3px 0 #111 !important;
    transform: scale(1.18) !important;
    z-index: 20;
}

.nrs-bracket {
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

/* WONG-BAKER FACES SVG STYLE (BACKWARD COMPATIBILITY) */
.face-svg {
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
    fill: transparent;
    stroke: #9ca3af;
    stroke-width: 2;
}

.vas-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.vas-item input[type="radio"] {
    display: none;
}

.vas-item input[type="radio"]:checked+.face-icon .face-svg {
    stroke: var(--neon-green);
    transform: scale(1.15);
    filter: drop-shadow(0 0 5px rgba(57, 255, 20, 0.5));
}

.vas-item input[type="radio"]:checked~.face-num {
    background: var(--neon-green);
    color: var(--bg-dark);
    font-weight: bold;
    border-color: var(--neon-green);
    box-shadow: var(--neon-glow);
}

.face-num {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1rem;
    color: #d1d5db;
    transition: all 0.3s ease;
}

.step-content {
    display: none;
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.step-content.active {
    opacity: 1;
    transform: translateX(0);
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
    appearance: none;
    min-height: 48px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--neon-green);
    box-shadow: 0 0 0 1px var(--neon-green) inset, 0 0 12px rgba(57, 255, 20, 0.15);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2339ff14' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

select option {
    background-color: var(--bg-dark);
    color: white;
}

input[type="file"]::file-selector-button {
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    margin-right: 12px;
}

input[type="file"]::file-selector-button:hover {
    background: var(--neon-green);
    color: var(--bg-dark);
}

.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 20, 0.4);
    border-radius: 10px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 20, 0.3);
    border-radius: 10px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Tabel SPSS Styling Terbaru */
.spss-wrapper {
    background: white;
    color: black;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.spss-table-container {
    background: white;
    color: black;
    border-radius: 4px;
    padding: 15px;
    overflow-x: auto;
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
}

.spss-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 10px;
    min-width: 600px;
}

.spss-table th,
.spss-table td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    text-align: right;
}

.spss-table th {
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
    background-color: #f9fafb;
}

.spss-table tr:first-child th {
    border-top: 2px solid black;
}

.spss-table tr:last-child td {
    border-bottom: 2px solid black;
}

.spss-table td:first-child,
.spss-table th:first-child {
    text-align: left;
}

.spss-table td.sub-row {
    padding-left: 20px;
    text-align: left;
}

.spss-title {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    color: black;
}

.histogram-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px auto;
    position: relative;
}

.chart-box {
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    transition: opacity 0.5s;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(57, 255, 20, 0.1);
    border-radius: 50%;
    border-top-color: var(--neon-green);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Custom Toggle Switch Style */
.toggle-checkbox:checked {
    right: 0;
    border-color: #39ff14;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: rgba(57, 255, 20, 0.3);
    border-color: #39ff14;
}

.toggle-checkbox:checked+.toggle-label:after {
    transform: translateX(100%);
    border-color: white;
}

.toggle-label {
    width: 3.5rem;
    height: 1.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.toggle-label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.35rem;
    height: 1.35rem;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* =========================================================
       PERFORMANCE + ACCESSIBILITY HARDENING LAYER
       Additive only: existing classes, IDs and JavaScript remain intact.
       ========================================================= */
html {
    scroll-behavior: auto;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
iframe,
canvas {
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="file"]::file-selector-button {
    min-height: 44px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffde00 !important;
    outline-offset: 3px !important;
}

.glass-card {
    contain: layout paint;
    content-visibility: auto;
    contain-intrinsic-size: 700px;
}

#loader {
    contain: strict;
}

#app-container,
#admin-container,
#rontgen-dashboard-container {
    isolation: isolate;
}

.step-content {
    will-change: opacity, transform;
}

.overflow-x-auto {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.spss-table-container {
    contain: layout paint;
}

.spss-wrapper {
    contain: content;
}

@media (max-width: 640px) {
    body {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }

    .glass-card {
        border-width: 2px;
    }

    .radio-group label {
        min-height: 52px;
    }

    .vas-item {
        min-width: 44px;
        min-height: 44px;
    }

    .face-svg {
        width: 34px;
        height: 34px;
    }

    .face-num {
        width: 32px;
        height: 32px;
    }

    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {

    button,
    input,
    select,
    textarea,
    .radio-group label {
        border: 2px solid CanvasText !important;
    }

    :focus-visible {
        outline: 3px solid Highlight !important;
    }
}

@media print {

    #loader,
    #custom-alert,
    #custom-confirm,
    #preview-modal {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #111 !important;
    }

    .glass-card {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ========================================= */
/* STYLE BLOCK 2 */
/* ========================================= */
:root {
    --nb-ink: #111111;
    --nb-paper: #fffdf5;
    --nb-yellow: #ffe66d;
    --nb-pink: #ff6fb5;
    --nb-blue: #63d5ff;
    --nb-lime: #b8f34a;
    --nb-purple: #b69cff;
    --nb-orange: #ff9f43;
    --nb-red: #ff5b5b;
    --nb-white: #ffffff;
    --nb-border: 3px solid var(--nb-ink);
    --nb-shadow: 7px 7px 0 var(--nb-ink);
    --nb-shadow-sm: 4px 4px 0 var(--nb-ink);
    --nb-radius: 18px;
    --nb-radius-sm: 12px;
}

html {
    background: var(--nb-paper);
    scroll-behavior: smooth
}

body {
    background: var(--nb-paper) !important;
    color: var(--nb-ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-image: linear-gradient(135deg, rgba(255, 230, 109, .22) 0 10%, transparent 10% 100%), radial-gradient(circle at 90% 8%, rgba(182, 156, 255, .2), transparent 25%), radial-gradient(circle at 5% 85%, rgba(99, 213, 255, .2), transparent 25%) !important;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    z-index: -1;
    background-image: radial-gradient(var(--nb-ink) .7px, transparent .7px);
    background-size: 12px 12px
}

.glass-card {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--nb-ink) !important;
    border: var(--nb-border) !important;
    border-radius: var(--nb-radius) !important;
    box-shadow: var(--nb-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10
}

.glass-card:after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px dashed rgba(17, 17, 17, .12);
    border-radius: 12px;
    pointer-events: none
}

.text-neon {
    color: var(--nb-ink) !important;
    text-shadow: none !important;
    background: var(--nb-lime);
    border: 2px solid var(--nb-ink);
    padding: .08em .28em;
    border-radius: 7px;
    box-shadow: 3px 3px 0 var(--nb-ink)
}

.border-neon {
    border-color: var(--nb-ink) !important;
    box-shadow: var(--nb-shadow-sm) !important
}

.btn-neon {
    background: var(--nb-lime) !important;
    color: var(--nb-ink) !important;
    border: var(--nb-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nb-shadow-sm) !important;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
    min-height: 48px
}

.btn-neon:hover:not(:disabled) {
    background: var(--nb-yellow) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 9px 9px 0 var(--nb-ink) !important
}

.btn-neon:active:not(:disabled) {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0 var(--nb-ink) !important
}

button:not(:disabled),
input[type=button],
input[type=submit],
input[type=reset],
label[for] {
    -webkit-tap-highlight-color: transparent
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-visible {
    outline: 4px solid var(--nb-blue) !important;
    outline-offset: 3px !important
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"],
select,
textarea {
    background: var(--nb-white) !important;
    color: var(--nb-ink) !important;
    border: var(--nb-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nb-shadow-sm) !important;
    min-height: 50px;
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease !important
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--nb-ink) !important;
    box-shadow: 5px 5px 0 var(--nb-blue) !important;
    transform: translate(-1px, -1px)
}

input::placeholder,
textarea::placeholder {
    color: #666 !important;
    opacity: 1
}

select option {
    background: #fff;
    color: #111
}

.radio-group label {
    background: var(--nb-white) !important;
    color: var(--nb-ink) !important;
    border: var(--nb-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nb-shadow-sm) !important;
    min-height: 64px !important;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important
}

.radio-group label:hover {
    background: var(--nb-yellow) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--nb-ink) !important
}

.radio-group input[type="radio"]:checked+label {
    background: var(--nb-pink) !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
    box-shadow: 2px 2px 0 var(--nb-ink) !important;
    transform: translate(2px, 2px) scale(.99) !important
}

.radio-group label span.num {
    font-weight: 900;
    color: inherit
}

.vas-item {
    gap: 7px
}

.face-svg {
    stroke: var(--nb-ink) !important;
    filter: none !important
}

.face-num {
    border: var(--nb-border) !important;
    background: var(--nb-white) !important;
    color: var(--nb-ink) !important;
    box-shadow: var(--nb-shadow-sm) !important
}

.vas-item input[type=radio]:checked+.face-icon .face-svg {
    stroke: var(--nb-ink) !important;
    filter: none !important;
    transform: scale(1.08)
}

.vas-item input[type=radio]:checked~.face-num {
    background: var(--nb-yellow) !important;
    color: var(--nb-ink) !important;
    border-color: var(--nb-ink) !important;
    box-shadow: 2px 2px 0 var(--nb-ink) !important
}

.step-content {
    will-change: auto;
    transition: opacity .18s ease, transform .18s ease !important
}

.step-content.active {
    opacity: 1
}

#loader {
    background: var(--nb-yellow) !important;
    color: var(--nb-ink) !important;
    transition: opacity .2s ease !important
}

.spinner {
    border: 4px solid rgba(17, 17, 17, .18) !important;
    border-top-color: var(--nb-ink) !important
}

#loader .text-neon {
    background: var(--nb-white) !important
}

#gate-container {
    background: var(--nb-white) !important
}

#gate-container button {
    background: var(--nb-yellow) !important;
    color: var(--nb-ink) !important;
    border: var(--nb-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nb-shadow-sm) !important;
    min-height: 54px;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important
}

#gate-container button:hover {
    background: var(--nb-pink) !important;
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--nb-ink) !important
}

#gate-container button:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--nb-ink) !important
}

#app-container {
    background: rgba(255, 255, 255, .97) !important
}

#progress-container>div:nth-child(3) {
    background: #111 !important;
    border: 2px solid #111 !important;
    height: 15px !important;
    box-shadow: 4px 4px 0 #111
}

#progress-bar {
    background: var(--nb-pink) !important;
    box-shadow: none !important
}

#progress-percentage {
    background: var(--nb-yellow);
    color: #111 !important;
    border: 2px solid #111;
    padding: 2px 7px;
    border-radius: 6px
}

#kunjungan-title {
    background: var(--nb-blue) !important;
    color: #111 !important;
    border: 2px solid #111 !important;
    box-shadow: 3px 3px 0 #111 !important
}

#nav-buttons {
    border-color: #111 !important
}

#btn-prev {
    background: var(--nb-white) !important;
    color: #111 !important;
    border: var(--nb-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nb-shadow-sm) !important;
    min-height: 48px
}

#btn-prev:hover {
    background: var(--nb-blue) !important
}

#btn-submit {
    background: var(--nb-pink) !important
}

#custom-alert,
#custom-confirm,
#preview-modal {
    background: rgba(17, 17, 17, .82) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important
}

#custom-alert>div,
#custom-confirm>div,
#preview-modal>div {
    background: var(--nb-white) !important;
    border: var(--nb-border) !important;
    box-shadow: 10px 10px 0 var(--nb-pink) !important
}

#custom-alert button,
#custom-confirm button {
    border: var(--nb-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--nb-shadow-sm) !important;
    min-height: 48px
}

#admin-container,
#rontgen-dashboard-container {
    background: var(--nb-white) !important;
    contain: layout paint
}

#admin-container .border-b,
#rontgen-dashboard-container .border-b {
    border-color: #111 !important
}

#admin-container [onclick^="switchTab"],
#admin-container [onclick^="switchSubTable"] {
    border: 2px solid #111 !important;
    border-radius: 10px !important;
    box-shadow: 3px 3px 0 #111 !important;
    background: var(--nb-white) !important;
    color: #111 !important;
    min-height: 44px
}

#admin-container [onclick^="switchTab"]:hover,
#admin-container [onclick^="switchSubTable"]:hover {
    background: var(--nb-yellow) !important
}

#admin-container .overflow-x-auto,
#rontgen-dashboard-container .overflow-x-auto {
    border: var(--nb-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    contain: content
}

#admin-container table,
#rontgen-dashboard-container table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    color: #111 !important
}

#admin-container th,
#rontgen-dashboard-container th {
    background: var(--nb-yellow) !important;
    color: #111 !important;
    border-bottom: var(--nb-border) !important;
    font-weight: 900 !important
}

#admin-container td,
#rontgen-dashboard-container td {
    color: #111 !important;
    border-bottom: 2px solid #111 !important;
    background: #fff !important
}

#admin-container tbody tr:hover,
#rontgen-dashboard-container tbody tr:hover {
    background: var(--nb-blue) !important
}

.spss-wrapper,
.spss-table-container,
.chart-box {
    border: 3px solid #111 !important;
    box-shadow: var(--nb-shadow-sm) !important;
    border-radius: 10px !important
}

.spss-wrapper {
    contain: content
}

.spss-table-container {
    overflow-x: auto;
    overscroll-behavior-x: contain
}

#editor-container>div,
#tab-websettings>div.bg-gray-800\/50,
#tab-gpower .bg-gray-800\/50 {
    background: #fff !important;
    border: var(--nb-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--nb-shadow-sm) !important
}

#tab-websettings .toggle-label {
    border: 3px solid #111 !important;
    background: #fff !important;
    box-shadow: 3px 3px 0 #111 !important
}

.toggle-checkbox:checked+.toggle-label {
    background: var(--nb-lime) !important;
    border-color: #111 !important
}

.toggle-label:after {
    background: #111 !important
}

#rontgen-login-container,
#login-container {
    background: var(--nb-white) !important
}

#rontgen-login-container button,
#login-container button {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    border-radius: 12px !important;
    min-height: 50px
}

footer {
    color: #111 !important
}

footer:before {
    content: "✦ ";
    color: var(--nb-pink)
}

/* colorful section accents without changing DOM */
#step-1 h2,
#step-2 h2,
#step-3 h2,
#step-4 h2,
#step-5 h2,
#step-6 h2,
#step-7 h2 {
    color: #111 !important
}

#step-1 .mb-6:first-child {
    background: #fff0f0 !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important
}

#step-2 .radio-group label:nth-child(3n) {
    background: #e9f9ff !important
}

.radio-group label:nth-child(4n) {
    background: #fff8c7 !important
}

.radio-group label:nth-child(5n) {
    background: #ffe9f3 !important
}

#step-5 .bg-gray-800\/40 {
    background: #eaf9ff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important
}

#step-6 .bg-\[rgba\(57\,255\,20\,0\.03\)\] {
    background: #f5edff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important
}

#step-8 {
    background: #fff8c7;
    border: var(--nb-border);
    border-radius: 16px;
    box-shadow: var(--nb-shadow);
    padding-left: 16px;
    padding-right: 16px
}

/* avoid expensive global effects */
*,
*::before,
*::after {
    box-sizing: border-box
}

img {
    max-width: 100%;
    height: auto
}

iframe {
    border: 0
}

.hide-scroll {
    scrollbar-width: none
}

.hide-scroll::-webkit-scrollbar {
    display: none
}

@media (max-width:640px) {
    body {
        padding-left: 10px !important;
        padding-right: 10px !important
    }

    .glass-card {
        box-shadow: 5px 5px 0 #111 !important;
        border-radius: 14px !important
    }

    .glass-card:after {
        display: none
    }

    #app-container,
    #admin-container,
    #rontgen-dashboard-container {
        width: 100% !important;
        padding: 14px !important
    }

    #gate-container {
        width: 100% !important;
        padding: 22px 16px !important;
        margin-top: 12px !important
    }

    h1 {
        letter-spacing: -.03em !important
    }

    #progress-container {
        margin-bottom: 20px !important
    }

    .radio-group {
        gap: 8px !important
    }

    .radio-group label {
        min-height: 58px !important;
        padding: 8px !important
    }

    #container-vas {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important
    }

    .face-svg {
        width: 46px;
        height: 46px
    }

    .face-num {
        width: 40px;
        height: 40px
    }

    .spss-table {
        font-size: 11px !important
    }

    .spss-table th,
    .spss-table td {
        padding: 6px 8px !important
    }
}

@media (min-width:641px) {
    #app-container {
        max-width: 960px !important
    }
}

@media (min-width:1024px) {
    #app-container {
        max-width: 1080px !important
    }

    #admin-container,
    #rontgen-dashboard-container {
        max-width: 1280px !important
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .step-content,
    .btn-neon,
    .radio-group label,
    input,
    select,
    textarea {
        transition: none !important
    }

    .spinner {
        animation: none !important
    }

    .animate-spin,
    .animate-pulse {
        animation: none !important
    }
}

@media (forced-colors:active) {

    button,
    input,
    select,
    textarea,
    .glass-card {
        forced-color-adjust: auto;
        box-shadow: none !important
    }

    .text-neon {
        color: CanvasText !important;
        background: Highlight !important
    }
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important
    }

    .glass-card {
        box-shadow: none !important;
        border: 1px solid #000 !important
    }

    .no-print {
        display: none !important
    }
}

/* ========================================= */
/* STYLE BLOCK 3 */
/* ========================================= */
/* ============================================================
   OHQE HISTOGRAM VISIBILITY FIX
   Does not change analysis/data logic.
   ============================================================ */
.histogram-container {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto 40px auto !important;
    position: relative !important;
}

.histogram-container .chart-box {
    width: 100% !important;
    min-height: 340px !important;
    height: 390px !important;
    padding: 16px !important;
    background: #fff !important;
    color: #111 !important;
    overflow: hidden !important;
    position: relative !important;
    contain: layout paint !important;
}

.histogram-container canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
}

@media (max-width:767px) {
    .histogram-container .chart-box {
        height: 340px !important;
        min-height: 340px !important;
        padding: 10px !important;
    }
}

@media print {
    .histogram-container .chart-box {
        height: 360px !important;
        min-height: 360px !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
}

/* ========================================= */
/* STYLE BLOCK 4 */
/* ========================================= */
/*
  ================================================================
  OHQE ENTERPRISE NEUBRUTALISM — UI/UX + CORE WEB VITALS LAYER
  ================================================================
  CONTRACT:
  - Additive UI/UX layer only.
  - Existing IDs, classes, functions, event handlers, data schema,
    routing, Google Apps Script, OHQE/VAS/MDAS/SPSS/G*Power,
    Rontgen and PDF logic are intentionally untouched.
  - No visual blur, no expensive filter effects, no continuous
    transform animation, no global will-change.
*/

/* ---------- 01. DESIGN TOKENS ---------- */
:root {
    --ux-ink: #111111;
    --ux-paper: #fffdf6;
    --ux-white: #ffffff;
    --ux-lime: #b9f34a;
    --ux-yellow: #ffe36e;
    --ux-pink: #ff72b6;
    --ux-blue: #62d7ff;
    --ux-purple: #b69cff;
    --ux-orange: #ff9b45;
    --ux-red: #ff6262;
    --ux-green: #25c76b;

    --ux-border: 3px solid var(--ux-ink);
    --ux-border-2: 2px solid var(--ux-ink);
    --ux-shadow: 6px 6px 0 var(--ux-ink);
    --ux-shadow-sm: 4px 4px 0 var(--ux-ink);
    --ux-shadow-lg: 10px 10px 0 var(--ux-ink);

    --ux-radius: 18px;
    --ux-radius-sm: 12px;
    --ux-radius-pill: 999px;

    --ux-max: 1180px;
    --ux-touch: 44px;
    --ux-focus: 3px solid #175cd3;

    --ux-duration-fast: 120ms;
    --ux-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 02. BASE / PAINT COST ---------- */
html {
    background: var(--ux-paper) !important;
    color-scheme: light;
    overflow-x: hidden;
    scroll-behavior: auto !important;
}

body {
    min-width: 320px;
    background:
        linear-gradient(135deg, rgba(255, 227, 110, .16), transparent 23%),
        radial-gradient(circle at 94% 7%, rgba(182, 156, 255, .18), transparent 24%),
        radial-gradient(circle at 5% 88%, rgba(98, 215, 255, .16), transparent 24%),
        var(--ux-paper) !important;
    color: var(--ux-ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    overscroll-behavior-x: none;
}

body::before {
    opacity: .055 !important;
    background-image: radial-gradient(var(--ux-ink) .65px, transparent .65px) !important;
    background-size: 14px 14px !important;
    contain: paint;
}

/* Never pay for blur/glow layers. Hard shadows are the design language. */
.glass-card,
#custom-alert>div,
#custom-confirm>div,
#preview-modal>div,
.spss-wrapper,
.spss-table-container,
.chart-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

.glass-card {
    background: var(--ux-white) !important;
    border: var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow) !important;
}

/* Avoid permanent compositor promotion. */
.step-content,
.btn-neon,
.radio-group label,
.vas-item,
.toggle-label {
    will-change: auto !important;
}

/* ---------- 03. GLOBAL FOCUS / KEYBOARD ---------- */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: var(--ux-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px var(--ux-white), 0 0 0 5px #175cd3 !important;
}

:where(button, a, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

/* ---------- 04. BUTTON SYSTEM ---------- */
.btn-neon,
#gate-container button,
#login-container button,
#rontgen-login-container button,
#btn-next,
#btn-prev,
#btn-submit,
#btn-admin,
#btn-rontgen,
#btn-export-pdf,
#btn-save-questions {
    min-height: var(--ux-touch) !important;
    border: var(--ux-border) !important;
    border-radius: var(--ux-radius-sm) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
    transition:
        transform var(--ux-duration-fast) var(--ux-ease),
        box-shadow var(--ux-duration-fast) var(--ux-ease),
        background-color var(--ux-duration-fast) var(--ux-ease),
        color var(--ux-duration-fast) var(--ux-ease) !important;
}

.btn-neon {
    background: var(--ux-lime) !important;
    color: var(--ux-ink) !important;
    border-color: var(--ux-ink) !important;
    text-shadow: none !important;
}

@media (hover:hover) and (pointer:fine) {

    .btn-neon:hover:not(:disabled),
    #gate-container button:hover,
    #login-container button:hover,
    #rontgen-login-container button:hover,
    #btn-next:hover,
    #btn-prev:hover,
    #btn-submit:hover,
    #btn-admin:hover,
    #btn-rontgen:hover,
    #btn-export-pdf:hover,
    #btn-save-questions:hover {
        transform: translate(-2px, -2px) !important;
        box-shadow: 8px 8px 0 var(--ux-ink) !important;
    }
}

.btn-neon:active:not(:disabled),
#gate-container button:active,
#login-container button:active,
#rontgen-login-container button:active,
#btn-next:active,
#btn-prev:active,
#btn-submit:active,
#btn-admin:active,
#btn-rontgen:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0 var(--ux-ink) !important;
}

/* ---------- 05. FORM UX ---------- */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="date"],
select,
textarea {
    min-height: var(--ux-touch) !important;
    background: var(--ux-white) !important;
    color: var(--ux-ink) !important;
    border: var(--ux-border-2) !important;
    border-radius: var(--ux-radius-sm) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    transition:
        transform var(--ux-duration-fast) var(--ux-ease),
        box-shadow var(--ux-duration-fast) var(--ux-ease),
        border-color var(--ux-duration-fast) var(--ux-ease) !important;
}

textarea {
    min-height: 96px !important;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #5b5b5b !important;
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ux-ink) !important;
    box-shadow: 5px 5px 0 var(--ux-blue) !important;
    transform: translate(-1px, -1px);
}

select option {
    background: #fff !important;
    color: #111 !important;
}

input[type="file"] {
    min-height: var(--ux-touch) !important;
    color: var(--ux-ink) !important;
}

input[type="file"]::file-selector-button {
    min-height: 40px;
    margin-right: 10px;
    padding: .5rem .85rem;
    border: var(--ux-border-2);
    border-radius: 10px;
    background: var(--ux-yellow);
    color: var(--ux-ink);
    font-weight: 850;
}

/* ---------- 06. RADIO / QUESTION CARDS ---------- */
.radio-group {
    gap: 8px !important;
}

.radio-group label {
    min-height: 56px !important;
    padding: .65rem .45rem !important;
    background: var(--ux-white) !important;
    color: var(--ux-ink) !important;
    border: var(--ux-border-2) !important;
    border-radius: var(--ux-radius-sm) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    transition:
        transform var(--ux-duration-fast) var(--ux-ease),
        box-shadow var(--ux-duration-fast) var(--ux-ease),
        background-color var(--ux-duration-fast) var(--ux-ease) !important;
}

@media (hover:hover) and (pointer:fine) {
    .radio-group label:hover {
        background: var(--ux-yellow) !important;
        transform: translate(-2px, -2px);
        box-shadow: 7px 7px 0 var(--ux-ink) !important;
    }
}

.radio-group input[type="radio"]:checked+label {
    background: var(--ux-pink) !important;
    color: var(--ux-ink) !important;
    border-color: var(--ux-ink) !important;
    box-shadow: 2px 2px 0 var(--ux-ink) !important;
    transform: translate(2px, 2px) !important;
}

.radio-group label span.num {
    color: inherit !important;
}

/* Question block accent stripes without pseudo-heavy effects. */
#step-1 .mb-6:first-child,
#step-5 .bg-gray-800\/40,
#step-6 .bg-\[rgba\(57\,255\,20\,0\.03\)\] {
    border: var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-sm) !important;
}

/* ---------- 07. VAS / WONG-BAKER TOUCH UX ---------- */
.vas-group {
    gap: 6px !important;
}

.vas-item {
    min-width: var(--ux-touch);
    min-height: var(--ux-touch);
    padding: 4px !important;
    border: var(--ux-border-2);
    border-radius: 14px;
    background: var(--ux-white);
    box-shadow: 3px 3px 0 var(--ux-ink);
    transition:
        transform var(--ux-duration-fast) var(--ux-ease),
        box-shadow var(--ux-duration-fast) var(--ux-ease),
        background-color var(--ux-duration-fast) var(--ux-ease) !important;
}

.vas-item input[type="radio"]:checked+.face-icon .face-svg {
    stroke: var(--ux-ink) !important;
    filter: none !important;
    transform: scale(1.04) !important;
}

.vas-item input[type="radio"]:checked~.face-num {
    background: var(--ux-yellow) !important;
    color: var(--ux-ink) !important;
    border-color: var(--ux-ink) !important;
    box-shadow: 2px 2px 0 var(--ux-ink) !important;
}

.face-svg {
    width: 38px !important;
    height: 38px !important;
    filter: none !important;
}

.face-num {
    width: 34px !important;
    height: 34px !important;
    border: var(--ux-border-2) !important;
    border-radius: 10px !important;
    background: var(--ux-white) !important;
    color: var(--ux-ink) !important;
    box-shadow: 2px 2px 0 var(--ux-ink) !important;
}

/* ---------- 08. PROGRESS / VISITATION ---------- */
#progress-container {
    contain: layout paint;
}

#progress-container>div:nth-child(3) {
    background: var(--ux-white) !important;
    border: var(--ux-border-2) !important;
    border-radius: var(--ux-radius-pill) !important;
    box-shadow: 3px 3px 0 var(--ux-ink) !important;
    overflow: hidden;
}

#progress-bar {
    background: linear-gradient(90deg, var(--ux-blue), var(--ux-lime), var(--ux-yellow)) !important;
    box-shadow: none !important;
    border-radius: inherit;
}

#kunjungan-title {
    border: var(--ux-border-2) !important;
    box-shadow: var(--ux-shadow-sm) !important;
    border-radius: 12px !important;
    background: var(--ux-blue) !important;
    color: var(--ux-ink) !important;
}

/* ---------- 09. MODALS / LOADER ---------- */
#custom-alert,
#custom-confirm,
#preview-modal {
    background: rgba(17, 17, 17, .76) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#custom-alert>div,
#custom-confirm>div,
#preview-modal>div {
    background: var(--ux-white) !important;
    color: var(--ux-ink) !important;
    border: var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-lg) !important;
}

#loader {
    background: var(--ux-yellow) !important;
    color: var(--ux-ink) !important;
    transition: opacity 160ms ease !important;
    contain: strict;
}

.spinner {
    border-color: rgba(17, 17, 17, .18) !important;
    border-top-color: var(--ux-ink) !important;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ---------- 10. ADMIN / DASHBOARD ---------- */
#admin-container {
    contain: layout style;
}

#admin-container [onclick^="switchTab"],
#admin-container [onclick^="switchSubTable"] {
    min-height: 44px !important;
    border: var(--ux-border-2) !important;
    border-radius: 10px !important;
    box-shadow: 3px 3px 0 var(--ux-ink) !important;
    background: var(--ux-white) !important;
    color: var(--ux-ink) !important;
    font-weight: 850 !important;
    transition: transform var(--ux-duration-fast) var(--ux-ease),
        background-color var(--ux-duration-fast) var(--ux-ease) !important;
}

@media (hover:hover) and (pointer:fine) {

    #admin-container [onclick^="switchTab"]:hover,
    #admin-container [onclick^="switchSubTable"]:hover {
        background: var(--ux-yellow) !important;
        transform: translate(-2px, -2px);
    }
}

.spss-wrapper,
.spss-table-container,
.chart-box {
    background: #fff !important;
    color: #111 !important;
    border: var(--ux-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ux-shadow-sm) !important;
    contain: layout paint;
}

.spss-table-container {
    overflow: auto;
    overscroll-behavior-inline: contain;
}

.spss-table {
    min-width: 640px;
}

.spss-table th {
    background: #f3f3f3 !important;
}

#editor-container>div,
#tab-websettings>div.bg-gray-800\/50,
#tab-gpower .bg-gray-800\/50 {
    background: var(--ux-white) !important;
    color: var(--ux-ink) !important;
    border: var(--ux-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--ux-shadow-sm) !important;
}

/* ---------- 11. DATA TABLE ENTERPRISE UX ---------- */
.overflow-x-auto {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.overflow-x-auto table {
    min-width: max-content;
}

.overflow-x-auto thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff !important;
    color: #111 !important;
}

.overflow-x-auto tbody tr {
    transition: background-color 100ms linear !important;
}

@media (hover:hover) and (pointer:fine) {
    .overflow-x-auto tbody tr:hover {
        background: #fff2a8 !important;
    }
}

/* ---------- 12. RONTGEN ---------- */
#rontgen-dashboard-container {
    contain: layout style;
}

#rontgen-dashboard-container table {
    min-width: 760px;
}

#rontgen-dashboard-container .overflow-x-auto {
    border: var(--ux-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ux-shadow-sm) !important;
}

/* ---------- 13. MEDIA / EMBEDS ---------- */
img {
    max-width: 100%;
}

iframe {
    border: var(--ux-border-2) !important;
    border-radius: 12px !important;
    background: #fff;
    content-visibility: auto;
}

canvas {
    display: block;
    max-width: 100%;
}

/* ---------- 14. MOBILE FIRST ---------- */
@media (max-width:767px) {
    body {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }

    .glass-card {
        border-width: 2px !important;
        border-radius: 14px !important;
        box-shadow: 4px 4px 0 var(--ux-ink) !important;
    }

    .radio-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .radio-group label {
        min-height: 54px !important;
    }

    .vas-item {
        min-width: 46px;
        min-height: 46px;
        border-width: 2px;
        box-shadow: 2px 2px 0 var(--ux-ink);
    }

    .face-svg {
        width: 30px !important;
        height: 30px !important;
    }

    .face-num {
        width: 30px !important;
        height: 30px !important;
        font-size: .9rem !important;
    }

    #admin-container [onclick^="switchTab"] {
        flex: 0 0 auto;
    }

    .spss-wrapper {
        padding: 12px !important;
    }

    .spss-table-container {
        padding: 8px !important;
    }

    .spss-table {
        font-size: 11px !important;
        min-width: 620px;
    }

    #gpowerPlot {
        min-height: 220px;
    }
}

/* ---------- 15. TABLET ---------- */
@media (min-width:768px) and (max-width:1199px) {
    .glass-card {
        border-radius: 16px !important;
    }

    .radio-group label {
        min-height: 58px !important;
    }
}

/* ---------- 16. LARGE DESKTOP ---------- */
@media (min-width:1200px) {

    #app-container>main,
    #admin-container>main,
    #rontgen-dashboard-container>main {
        max-width: var(--ux-max);
        margin-inline: auto;
    }
}

/* ---------- 17. LOW POWER / REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .spinner {
        animation: none !important;
    }
}

/* ---------- 18. FORCED COLORS ---------- */
@media (forced-colors:active) {

    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    button,
    input,
    select,
    textarea,
    .radio-group label,
    .glass-card {
        border: 2px solid CanvasText !important;
    }

    :focus-visible {
        outline: 3px solid Highlight !important;
        box-shadow: none !important;
    }
}

/* ---------- 19. PRINT ---------- */
@media print {

    html,
    body {
        background: #fff !important;
        color: #111 !important;
    }

    body::before,
    #loader,
    #custom-alert,
    #custom-confirm,
    #preview-modal {
        display: none !important;
    }

    .glass-card,
    .spss-wrapper,
    .spss-table-container,
    .chart-box {
        box-shadow: none !important;
        border: 1px solid #111 !important;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------- 20. SCROLLBAR: LOW COST ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #111 transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #111;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

/* ---------- 21. CONTENT CONTAINMENT FOR NON-CRITICAL AREAS ---------- */
#tab-ohqe,
#tab-vas,
#tab-mdas,
#tab-spss,
#tab-gpower,
#tab-settings,
#tab-websettings {
    contain: layout style;
}

#tab-spss .spss-wrapper,
#tab-spss .spss-table-container,
#tab-gpower .chart-box {
    contain: layout paint;
}

/* ---------- 22. SAFE-AREA + TOUCH ---------- */
button,
[role="button"],
label,
input,
select,
textarea {
    touch-action: manipulation;
}

@supports(padding:max(0px)) {

    #app-container,
    #admin-container,
    #rontgen-dashboard-container {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ========================================= */
/* STYLE BLOCK 5 */
/* ========================================= */
#tab-websettings .toggle-label {
    width: 3.75rem !important;
    height: 2rem !important;
    border: 3px solid #111 !important;
    background: #fff !important;
    box-shadow: 3px 3px 0 #111 !important
}

#tab-websettings .toggle-label:after {
    width: 1.5rem !important;
    height: 1.5rem !important;
    top: 2px !important;
    left: 2px !important;
    background: #111 !important;
    box-shadow: none !important
}

#tab-websettings .toggle-checkbox:checked+.toggle-label {
    background: #b8f34a !important
}

#tab-websettings .toggle-checkbox:checked+.toggle-label:after {
    transform: translateX(1.7rem) !important
}

#btn-kunjungan-1,
#btn-kunjungan-2,
#btn-kunjungan-3 {
    min-height: 64px !important;
    border: 3px solid #111 !important;
    box-shadow: 6px 6px 0 #111 !important;
    background: #ffe66d !important;
    color: #111 !important;
    border-radius: 14px !important;
    font-weight: 900 !important
}

#btn-kunjungan-1:hover,
#btn-kunjungan-2:hover,
#btn-kunjungan-3:hover {
    background: #ff6fb5 !important
}

#btn-kunjungan-1:active,
#btn-kunjungan-2:active,
#btn-kunjungan-3:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0 #111 !important
}

#btn-kunjungan-1[disabled],
#btn-kunjungan-2[disabled],
#btn-kunjungan-3[disabled] {
    pointer-events: none !important
}

/* ========================================= */
/* STYLE BLOCK 6 */
/* ========================================= */
#tab-websettings .visit-label-input {
    min-height: 44px;
    box-shadow: 3px 3px 0 #111;
    transition: transform .12s ease, box-shadow .12s ease
}

#tab-websettings .visit-label-input:focus {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #111
}

@media (max-width:640px) {
    #tab-websettings .visit-label-input {
        font-size: 16px
    }
}

/* ========================================= */
/* STYLE BLOCK 7 */
/* ========================================= */
#gate-container {
    visibility: hidden
}

#gate-container.web-settings-ready {
    visibility: visible
}

.visit-label-input:disabled {
    opacity: .65;
    cursor: wait
}

#visit-access-settings .toggle-label {
    flex: 0 0 auto
}

/* ========================================= */
/* STYLE BLOCK 8 */
/* ========================================= */
/*
================================================================
INDEX(4).HTML — COMPREHENSIVE FONT CONTRAST / READABILITY
================================================================
Goal:
- eliminate white/light text disappearing on light backgrounds
- keep white text on genuinely dark controls/modals
- strengthen gray text on paper/white/neubrutalist surfaces
- preserve all existing application logic and DOM structure
================================================================
*/

/* ---------- GLOBAL PAPER / LIGHT SURFACES ---------- */
html,
body {
    color: #111111 !important;
}

.glass-card,
#gate-container,
#app-container,
#admin-container,
#rontgen-dashboard-container,
#login-container,
#rontgen-login-container,
#editor-container,
#tab-websettings,
#tab-gpower,
#step-1,
#step-2,
#step-3,
#step-4,
#step-5,
#step-6,
#step-7,
#step-8 {
    color: #111111 !important;
}

/* ---------- THE EXACT LANDING-PAGE PROBLEM ---------- */
#gate-container h1 {
    color: #111111 !important;
    background: transparent !important;
    text-shadow: none !important;
}

#gate-container h1>span,
#gate-container h1 .text-neon {
    color: #111111 !important;
    background: #b8f34a !important;
    border: 2px solid #111111 !important;
    text-shadow: none !important;
}

#gate-container>p,
#gate-container .text-gray-300,
#gate-container .text-gray-400,
#gate-container .text-gray-500,
#gate-container .text-gray-600 {
    color: #374151 !important;
    text-shadow: none !important;
}

/* ---------- LIGHT SURFACE + WHITE TEXT ---------- */
/* This is deliberately scoped to known light UI containers. */
.glass-card .text-white,
#gate-container .text-white,
#app-container .text-white,
#admin-container .text-white,
#rontgen-dashboard-container .text-white,
#login-container .text-white,
#rontgen-login-container .text-white,
#editor-container .text-white,
#tab-websettings .text-white,
#tab-gpower .text-white,
#step-1 .text-white,
#step-2 .text-white,
#step-3 .text-white,
#step-4 .text-white,
#step-5 .text-white,
#step-6 .text-white,
#step-7 .text-white,
#step-8 .text-white {
    color: #111111 !important;
    text-shadow: none !important;
}

/* ---------- LIGHT SURFACE + FAINT GRAY TEXT ---------- */
.glass-card .text-gray-300,
.glass-card .text-gray-400,
.glass-card .text-gray-500,
#gate-container .text-gray-300,
#gate-container .text-gray-400,
#gate-container .text-gray-500,
#app-container .text-gray-300,
#app-container .text-gray-400,
#app-container .text-gray-500,
#admin-container .text-gray-300,
#admin-container .text-gray-400,
#admin-container .text-gray-500,
#rontgen-dashboard-container .text-gray-300,
#rontgen-dashboard-container .text-gray-400,
#rontgen-dashboard-container .text-gray-500,
#login-container .text-gray-300,
#login-container .text-gray-400,
#login-container .text-gray-500,
#rontgen-login-container .text-gray-300,
#rontgen-login-container .text-gray-400,
#rontgen-login-container .text-gray-500 {
    color: #374151 !important;
}

/* ---------- LIGHT CARDS / PANELS ---------- */
.bg-white .text-white,
.bg-gray-50 .text-white,
.bg-gray-100 .text-white,
.bg-yellow-50 .text-white,
.bg-yellow-100 .text-white,
.bg-blue-50 .text-white,
.bg-blue-100 .text-white,
.bg-green-50 .text-white,
.bg-green-100 .text-white,
.bg-purple-50 .text-white,
.bg-purple-100 .text-white,
.bg-pink-50 .text-white,
.bg-pink-100 .text-white,
.bg-orange-50 .text-white,
.bg-orange-100 .text-white {
    color: #111111 !important;
    text-shadow: none !important;
}

/* ---------- NEUBRUTALIST BUTTONS ---------- */
#gate-container button,
#btn-kunjungan-1,
#btn-kunjungan-2,
#btn-kunjungan-3 {
    color: #111111 !important;
    text-shadow: none !important;
}

#gate-container button:hover,
#btn-kunjungan-1:hover,
#btn-kunjungan-2:hover,
#btn-kunjungan-3:hover {
    color: #111111 !important;
}

/* ---------- NAV / ICON BUTTONS ON LIGHT SURFACES ---------- */
#app-container button,
#admin-container button,
#rontgen-dashboard-container button,
#login-container button,
#rontgen-login-container button {
    text-shadow: none !important;
}

/* Explicitly readable text on the common dark utility buttons. */
#app-container button.bg-gray-800,
#app-container button.bg-gray-900,
#admin-container button.bg-gray-800,
#admin-container button.bg-gray-900,
#rontgen-dashboard-container button.bg-gray-800,
#rontgen-dashboard-container button.bg-gray-900,
#login-container button.bg-gray-800,
#login-container button.bg-gray-900,
#rontgen-login-container button.bg-gray-800,
#rontgen-login-container button.bg-gray-900 {
    color: #ffffff !important;
}

/* ---------- FORMS ---------- */
input,
select,
textarea {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

input::placeholder,
textarea::placeholder {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
    opacity: 1 !important;
}

select option {
    color: #111111 !important;
    background: #ffffff !important;
}

/* ---------- TABLES / SPSS / CHART PANELS ---------- */
.spss-wrapper,
.spss-table-container,
.chart-box {
    color: #111111 !important;
    background: #ffffff !important;
}

.spss-wrapper *,
.spss-table-container *,
.chart-box * {
    border-color: inherit;
}

.spss-wrapper .text-white,
.spss-table-container .text-white,
.chart-box .text-white,
.spss-wrapper .text-gray-300,
.spss-wrapper .text-gray-400,
.spss-table-container .text-gray-300,
.spss-table-container .text-gray-400,
.chart-box .text-gray-300,
.chart-box .text-gray-400 {
    color: #111111 !important;
    text-shadow: none !important;
}

/* ---------- ADMIN / RONTGEN DATA TABLES ---------- */
#admin-container table,
#admin-container th,
#admin-container td,
#rontgen-dashboard-container table,
#rontgen-dashboard-container th,
#rontgen-dashboard-container td {
    color: #111111 !important;
}

#admin-container table .text-white,
#admin-container table .text-gray-300,
#admin-container table .text-gray-400,
#rontgen-dashboard-container table .text-white,
#rontgen-dashboard-container table .text-gray-300,
#rontgen-dashboard-container table .text-gray-400 {
    color: #111111 !important;
}

/* ---------- LIGHT TOGGLES / SETTINGS ---------- */
#tab-websettings .toggle-label,
#tab-websettings .toggle-label span {
    color: #111111 !important;
}

#tab-websettings .visit-label-input {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: #ffffff !important;
}

#tab-websettings .visit-label-input::placeholder {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
}

/* ---------- FOOTER ---------- */
footer,
footer * {
    color: #111111 !important;
}

footer a:hover {
    color: #175cd3 !important;
}

/* ---------- DARK MODALS: WHITE TEXT IS CORRECT HERE ---------- */
#custom-alert,
#custom-confirm,
#preview-modal {
    color: #ffffff !important;
}

#custom-alert>div,
#custom-confirm>div,
#preview-modal>div {
    color: #111111 !important;
    background: #ffffff !important;
}

#custom-alert>div .text-white,
#custom-confirm>div .text-white,
#preview-modal>div .text-white {
    color: #111111 !important;
}

#custom-alert button.bg-gray-800,
#custom-alert button.bg-gray-700,
#custom-confirm button.bg-gray-700,
#custom-confirm button.bg-red-600 {
    color: #ffffff !important;
}

/* ---------- LOADER ---------- */
#loader {
    color: #111111 !important;
}

#loader .text-gray-400,
#loader .text-gray-500 {
    color: #374151 !important;
}

/* ---------- ACCESSIBLE LINKS ---------- */
.glass-card a,
#gate-container a,
#app-container a,
#admin-container a,
#rontgen-dashboard-container a {
    text-underline-offset: 2px;
}

.glass-card a.text-blue-400,
.glass-card a.text-blue-500,
.glass-card a.text-blue-600,
#admin-container a.text-blue-400,
#admin-container a.text-blue-500,
#admin-container a.text-blue-600 {
    color: #175cd3 !important;
}

/* ---------- SVG ICONS ---------- */
.glass-card svg,
#gate-container svg,
#app-container svg,
#admin-container svg,
#rontgen-dashboard-container svg {
    max-width: 100%;
}

/* ---------- MOBILE READABILITY ---------- */
@media (max-width: 767px) {

    body,
    button,
    input,
    select,
    textarea,
    label,
    a,
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    #gate-container h1 {
        line-height: 1.15 !important;
    }

    #gate-container>p {
        color: #374151 !important;
        font-weight: 600 !important;
    }
}

/* ---------- HIGH CONTRAST / FORCED COLORS ---------- */
@media (forced-colors: active) {

    body,
    .glass-card,
    #gate-container,
    #app-container,
    #admin-container,
    #rontgen-dashboard-container {
        color: CanvasText !important;
        background: Canvas !important;
    }

    button,
    input,
    select,
    textarea {
        color: ButtonText !important;
        background: ButtonFace !important;
        border: 2px solid ButtonText !important;
    }

    :focus-visible {
        outline: 3px solid Highlight !important;
    }
}

/* ---------- PRINT ---------- */
@media print {

    body,
    .glass-card,
    #gate-container,
    #app-container,
    #admin-container,
    #rontgen-dashboard-container {
        color: #111111 !important;
        background: #ffffff !important;
    }

    .text-white,
    .text-gray-300,
    .text-gray-400,
    .text-gray-500 {
        color: #111111 !important;
    }
}

/* ========================================= */
/* STYLE BLOCK 9 */
/* ========================================= */
/* ============================================================
   DEVTOOLS WARNING POPUP — NEUBRUTALISM
   ============================================================ */
#devtools-warning-popup {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#devtools-warning-popup.hidden {
    display: none !important;
}

#devtools-warning-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 11, .72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#devtools-warning-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px;
    background: #ffffff;
    color: #111111;
    border: 4px solid #111111;
    border-radius: 24px;
    box-shadow: 10px 10px 0 #111111;
    animation: devtoolsWarningIn .18s ease-out;
}

#devtools-warning-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: #ff5c5c;
    color: #111111;
    border: 4px solid #111111;
    border-radius: 16px;
    box-shadow: 5px 5px 0 #111111;
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
}

#devtools-warning-content {
    min-width: 0;
    flex: 1;
}

#devtools-warning-badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 9px;
    background: #b8f34a;
    color: #111111;
    border: 2px solid #111111;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

#devtools-warning-title {
    margin: 0;
    color: #111111 !important;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 950;
    line-height: 1.1;
}

#devtools-warning-message {
    margin: 12px 0 0;
    color: #1f2937 !important;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.55;
}

#devtools-warning-detail {
    margin: 8px 0 18px;
    color: #4b5563 !important;
    font-size: 13px;
    line-height: 1.45;
}

#devtools-warning-close {
    min-height: 46px;
    padding: 10px 18px;
    background: #ffe36e;
    color: #111111 !important;
    border: 3px solid #111111;
    border-radius: 12px;
    box-shadow: 5px 5px 0 #111111;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    transition: transform .12s ease, box-shadow .12s ease;
}

#devtools-warning-close:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #111111;
}

#devtools-warning-close:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 #111111;
}

#devtools-warning-close:focus-visible {
    outline: 3px solid #175cd3;
    outline-offset: 3px;
}

@keyframes devtoolsWarningIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    #devtools-warning-popup {
        padding: 14px;
    }

    #devtools-warning-card {
        gap: 13px;
        padding: 20px;
        border-width: 3px;
        border-radius: 20px;
        box-shadow: 7px 7px 0 #111111;
    }

    #devtools-warning-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-width: 3px;
        box-shadow: 4px 4px 0 #111111;
        font-size: 28px;
    }

    #devtools-warning-message {
        font-size: 14px;
    }

    #devtools-warning-close {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #devtools-warning-card {
        animation: none;
    }

    #devtools-warning-close {
        transition: none;
    }
}

/* ========================================= */
/* STYLE BLOCK 10 */
/* ========================================= */
body.devtools-warning-open {
    overflow: hidden !important;
}

/* ========================================= */
/* STYLE BLOCK 11 */
/* ========================================= */
/*
================================================================
OHQE NRS VISIBILITY + KUNJUNGAN 3 HARDENING
================================================================
- Memastikan angka 0–10 NRS selalu terbaca.
- Warna angka mengikuti kategori spektrum.
- Active score tetap memiliki kontras tinggi.
- Tidak menghapus logic NRS/VAS legacy.
- Kunjungan 3 tidak menampilkan step-5/NRS.
================================================================
*/

/* NRS number: explicit child selector + !important prevents
   inherited Tailwind/theme rules from making the digits invisible. */
#container-nrs .nrs-btn {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
}

#container-nrs .nrs-btn .nrs-score {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    font-size: 1rem !important;
    min-width: 1ch;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Color-coded digits matching the NRS spectrum. */
#container-nrs .nrs-score-0 {
    color: #67e8f9 !important;
}

#container-nrs .nrs-score-1,
#container-nrs .nrs-score-2,
#container-nrs .nrs-score-3 {
    color: #4ade80 !important;
}

#container-nrs .nrs-score-4,
#container-nrs .nrs-score-5,
#container-nrs .nrs-score-6 {
    color: #facc15 !important;
}

#container-nrs .nrs-score-7,
#container-nrs .nrs-score-8,
#container-nrs .nrs-score-9,
#container-nrs .nrs-score-10 {
    color: #ff7b7b !important;
}

/* Hover state: keep the digit visible on the yellow surface. */
@media (hover:hover) and (pointer:fine) {
    #container-nrs .nrs-btn:hover .nrs-score {
        color: #111111 !important;
        text-shadow: none !important;
    }
}

/* Selected score: strongest contrast regardless of category. */
#container-nrs .nrs-btn.active .nrs-score,
#container-nrs .nrs-btn:has(input[type="radio"]:checked) .nrs-score {
    color: #111111 !important;
    text-shadow: none !important;
}

/* Mobile readability. */
@media (max-width:640px) {
    #container-nrs .nrs-btn .nrs-score {
        font-size: .95rem !important;
        font-weight: 1000 !important;
    }
}

/* Kunjungan 3 contract: only Bagian 1–4 are part of the flow.
   The step remains in DOM for backward compatibility but is never
   presented to the participant. */
body[data-ohqe-kunjungan="3"] #step-5 {
    display: none !important;
}

/* ========================================= */
/* STYLE BLOCK 12 */
/* ========================================= */
/* K2/K3 PATIENT SELECTOR — DATA_OHQE_1 ONLY. Additive layer. */
#k1-patient-picker {
    width: 100%
}

#k1-patient-dropdown {
    border: 3px solid #111 !important
}

.k1-patient-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: #fff;
    color: #111;
    border: 0;
    border-bottom: 2px solid #111;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .1s ease
}

.k1-patient-option:last-child {
    border-bottom: 0
}

.k1-patient-option:hover,
.k1-patient-option:focus {
    background: #ffe66d;
    outline: none
}

.k1-patient-option .k1-patient-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-right: 8px;
    border: 2px solid #111;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 11px;
    font-weight: 1000
}

#k1-patient-picker.patient-selected #nama {
    background: #f3f3f3 !important;
    border-color: #111 !important;
    box-shadow: 4px 4px 0 #111 !important;
    cursor: not-allowed !important;
    font-weight: 900 !important
}

#k1-patient-picker.patient-selected #k1-patient-search-icon {
    color: #111 !important
}

#step-1.k1-patient-locked .k1-source-locked-field {
    background: #f3f3f3 !important;
    color: #111 !important;
    border-color: #111 !important;
    box-shadow: 3px 3px 0 #111 !important;
    cursor: not-allowed !important;
    opacity: 1 !important
}

#step-1.k1-patient-locked .k1-source-locked-field:disabled {
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
    opacity: 1 !important
}

#k1-patient-dropdown-status {
    background: #fff;
    color: #555
}

@media(max-width:640px) {
    #k1-patient-dropdown {
        max-height: 60vh
    }

    .k1-patient-option {
        padding: 14px 12px;
        font-size: 14px
    }
}

/* ========================================= */
/* STYLE BLOCK 13 */
/* ========================================= */
/*
================================================================
K2/K3 PATIENT SELECTOR — SUPER BIG HARDENING
- Full Name visibility
- Search/dropdown readability
- Mobile touch target
- Loading / selected states
- Does not change DOM IDs or application data logic
================================================================
*/
#k1-patient-picker {
    position: relative !important;
}

#k1-patient-dropdown {
    position: relative !important;
    z-index: 999 !important;
    overflow: hidden !important;
    background: #fff !important;
    color: #111 !important;
    border: 3px solid #111 !important;
    border-radius: 14px !important;
    box-shadow: 6px 6px 0 #111 !important;
}

#k1-patient-dropdown-status {
    min-height: 44px;
    display: flex;
    align-items: center;
    background: #fff !important;
    color: #555 !important;
    border-bottom: 2px solid #111 !important;
}

#k1-patient-options {
    max-height: 420px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.k1-patient-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    color: #111 !important;
    border: 0 !important;
    border-bottom: 2px solid #111 !important;
    text-align: left !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: background-color 100ms ease, transform 100ms ease !important;
}

.k1-patient-option:last-child {
    border-bottom: 0 !important;
}

.k1-patient-option:hover,
.k1-patient-option:focus-visible {
    background: #ffe66d !important;
    outline: none !important;
}

.k1-patient-option:active {
    background: #ff72b6 !important;
    transform: translate(2px, 2px) !important;
}

.k1-patient-index {
    display: inline-flex !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #111 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
}

.k1-patient-option-main {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.k1-patient-option-name {
    display: block !important;
    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    word-break: break-word !important;
}

.k1-patient-option-id {
    display: block !important;
    color: #666 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

#k1-patient-picker #nama.k1-patient-loading {
    background: #eef7ff !important;
    border-color: #175cd3 !important;
}

#k1-patient-picker.patient-selected #nama {
    background: #f3f3f3 !important;
    border-color: #111 !important;
    box-shadow: 4px 4px 0 #111 !important;
    cursor: not-allowed !important;
    font-weight: 900 !important;
}

#k1-patient-picker.patient-selected #k1-patient-search-icon {
    color: #111 !important;
}

#step-1.k1-patient-locked .k1-source-locked-field {
    background: #f3f3f3 !important;
    color: #111 !important;
    border-color: #111 !important;
    box-shadow: 3px 3px 0 #111 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

#step-1.k1-patient-locked .k1-source-locked-field:disabled {
    -webkit-text-fill-color: #111 !important;
    color: #111 !important;
    opacity: 1 !important;
}

@media(max-width:640px) {
    #k1-patient-dropdown {
        max-height: 60vh !important;
        border-radius: 12px !important;
        box-shadow: 4px 4px 0 #111 !important;
    }

    #k1-patient-options {
        max-height: 50vh !important;
    }

    .k1-patient-option {
        min-height: 68px !important;
        padding: 12px 10px !important;
    }

    .k1-patient-option-name {
        font-size: 14px !important;
    }

    .k1-patient-option-id {
        font-size: 10px !important;
    }

    .k1-patient-index {
        flex-basis: 32px !important;
        width: 32px !important;
        height: 32px !important;
    }
}

@media(prefers-reduced-motion:reduce) {
    .k1-patient-option {
        transition: none !important;
    }
}

/* ========================================= */
/* STYLE BLOCK 14 */
/* ========================================= */
/*
================================================================
OHQE SUPER BIG UPGRADE — MOBILE SCALE LABEL VISIBILITY
================================================================
Tujuan:
- Menampilkan keterangan UNTUK SETIAP angka 1–5 pada mobile.
- Mempertahankan seluruh ID, name, value, validation, routing,
  data schema, Google Apps Script, scoring, analisis dan logic.
- Desktop tetap mempertahankan tampilan/keterangan yang sudah ada.
- Mobile tetap menggunakan 2 kolom agar label panjang lebih mudah
  dibaca dan tidak dipaksa menjadi 5 kolom sempit.
- Menghilangkan label ujung bawah yang sebelumnya hanya menjadi
  fallback mobile karena sekarang setiap opsi sudah memiliki label.
================================================================
*/

/* Semua keterangan opsi selalu terlihat. */
#container-fisik .radio-group .label-text,
#container-psiko .radio-group .label-text,
#container-ekspektasi .radio-group .label-text,
#container-mdas .radio-group .label-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #303030 !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* Pastikan nomor dan keterangannya tersusun vertikal. */
#container-fisik .radio-group label,
#container-psiko .radio-group label,
#container-ekspektasi .radio-group label,
#container-mdas .radio-group label {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Mobile: tetap 2 kolom, tetapi kartu dibuat cukup tinggi untuk
   menampilkan nomor + keterangan tanpa mengorbankan touch target. */
@media (max-width:767px) {

    #container-fisik .radio-group,
    #container-psiko .radio-group,
    #container-ekspektasi .radio-group,
    #container-mdas .radio-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #container-fisik .radio-group label,
    #container-psiko .radio-group label,
    #container-ekspektasi .radio-group label,
    #container-mdas .radio-group label {
        min-height: 78px !important;
        padding: 9px 7px !important;
    }

    #container-fisik .radio-group label .num,
    #container-psiko .radio-group label .num,
    #container-ekspektasi .radio-group label .num,
    #container-mdas .radio-group label .num {
        display: block !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
        font-weight: 1000 !important;
        margin-bottom: 5px !important;
    }

    #container-fisik .radio-group .label-text,
    #container-psiko .radio-group .label-text,
    #container-ekspektasi .radio-group .label-text,
    #container-mdas .radio-group .label-text {
        display: block !important;
        font-size: .68rem !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
        color: #333 !important;
    }

    /* Fallback endpoint text lama tidak lagi diperlukan karena
     semua angka sudah memiliki keterangan sendiri. */
    #container-fisik .mobile-scale-endpoints,
    #container-psiko .mobile-scale-endpoints,
    #container-ekspektasi .mobile-scale-endpoints,
    #container-mdas .mobile-scale-endpoints {
        display: none !important;
    }
}

/* Ponsel sangat kecil: sedikit mengecilkan font, bukan menghilangkan
   keterangan. */
@media (max-width:380px) {

    #container-fisik .radio-group label,
    #container-psiko .radio-group label,
    #container-ekspektasi .radio-group label,
    #container-mdas .radio-group label {
        min-height: 76px !important;
        padding: 8px 5px !important;
    }

    #container-fisik .radio-group .label-text,
    #container-psiko .radio-group .label-text,
    #container-ekspektasi .radio-group .label-text,
    #container-mdas .radio-group .label-text {
        font-size: .62rem !important;
    }
}

/* Desktop/tablet: jangan mengubah grid atau ukuran existing secara
   agresif; hanya memastikan keterangan tetap terbaca. */
@media (min-width:768px) {

    #container-fisik .radio-group .label-text,
    #container-psiko .radio-group .label-text,
    #container-ekspektasi .radio-group .label-text,
    #container-mdas .radio-group .label-text {
        display: block !important;
        color: #303030 !important;
    }
}

/* ========================================= */
/* STYLE BLOCK 15 */
/* ========================================= */
/*
================================================================
K2/K3 CROSS-VISIT DUPLICATE PREVENTION
- K2 hides names already present in Data_OHQE_2
- K3 hides names already present in Data_OHQE_3
- K3 intentionally does NOT hide Data_OHQE_2
- Fail-closed if duplicate source cannot be verified
================================================================
*/
#k1-patient-dropdown {
    z-index: 9999 !important;
}

#k1-patient-options {
    max-height: min(52vh, 460px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

.k1-patient-option {
    min-height: 64px !important;
}

#k1-patient-dropdown-status {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 46px !important;
    line-height: 1.35 !important;
}

#k1-patient-picker.k1-dedup-unavailable #nama {
    border-color: #b91c1c !important;
    box-shadow: 4px 4px 0 #b91c1c !important;
}

#k1-patient-picker.k1-dedup-ready #nama {
    border-color: #111 !important;
}

#k1-patient-picker.k1-dedup-loading #nama {
    border-color: #175cd3 !important;
    box-shadow: 4px 4px 0 #175cd3 !important;
}

.k1-patient-dedup-meta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

@media(max-width:640px) {
    #k1-patient-options {
        max-height: 55vh !important;
    }

    .k1-patient-option {
        min-height: 68px !important;
        padding: 12px !important;
    }

    #k1-patient-dropdown-status {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }
}

@media(prefers-reduced-motion:reduce) {
    .k1-patient-option {
        transition: none !important;
    }
}