#downloadCsvBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 3vw !important;
        min-width: 0 !important;
        width: 20vw !important;
        max-width: 100% !important;
        font-size: 1.5vw !important;
        box-sizing: border-box !important;
        border-radius: 1vw !important;
        margin-top: 1vw !important;
        margin-bottom: 1vw !important;
        padding: 1vw 1vw !important;
}
@media (max-width: 700px) {
        #downloadCsvBtn {
                height: 9vw !important;
                width: 100% !important;
                font-size: 4.5vw !important;
                border-radius: 2vw !important;
                margin-bottom: 3vw !important;
                padding: 2.5vw 2vw !important;
        }
        #downloadCsvBtn {
                height: 9vw !important;
                width: 100% !important;
                font-size: 4.5vw !important;
                border-radius: 2vw !important;
                margin-bottom: 3vw !important;
                padding: 2.5vw 2vw !important;
        }
        /* Increased gaps between SESSION ID, password, confirm password fields */
        #newSessionId {
                margin-bottom: 3vw !important;
        }
        #newPasswordInput {
                margin-bottom: 3vw !important;
        }
        /* Increased gap between SESSION ID and create password */
        #new-session .uuid-field {
                margin-bottom: 6vw !important;
        }
        #new-session .pw-field:first-of-type {
                margin-bottom: 6vw !important;
        }
        #new-session .pw-field:last-of-type {
                margin-bottom: 6vw !important;
        }
        #beginQuestionnaireBtn {
                margin-top: -4vw !important;
                margin-bottom: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1.1 !important;
                position: relative !important;
                z-index: 1 !important;
        }
        #resumeSessionBtn {
                margin-top: 1vw !important;
                margin-bottom: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                line-height: 1.1 !important;
                position: relative !important;
                z-index: 1 !important;
        }
        #new-session *, #resume-session *, #download-panel * {
                font-size: 4.5vw !important;
        }
        #new-session, #resume-session, #download-panel {
                font-size: 4.5vw !important;
        }
        /* Increased size for language selector, links, and main text */
        .lang-select {
                font-size: 4vw !important;
                padding: 1vw 2vw !important;
                border-radius: 1.5vw !important;
        }
        .top-links a {
                font-size: 4vw !important;
                padding: 1vw 2vw !important;
        }
        body, html, #questionnaireSystemEntry, .error-message {
                font-size: 4vw !important;
        }
        .sections-row {
                flex-direction: column;
                gap: 4vw;
                align-items: stretch;
        }
        #new-session, #resume-session, #download-panel {
                width: 92vw !important;
                min-width: 0;
                min-height: 32vw;
                box-sizing: border-box;
                margin: 0 auto 4vw auto;
                padding: 4vw 3vw;
                border-radius: 2vw;
        }
        #new-session { order: 1; }
        #resume-session { order: 2; }
        #download-panel { order: 3; }
        #new-session input, #resume-session input, #download-panel input,
        .pw-field input, #new-session .uuid-field input,
        #new-session button, #resume-session button, #download-panel button,
        #downloadCsvBtn, #resumeSessionBtn, #beginQuestionnaireBtn {
                height: 9vw !important;
                font-size: 4.5vw !important;
                padding: 2.5vw 2vw !important;
                border-radius: 2vw !important;
                box-sizing: border-box;
                width: 100% !important;
                display: block;
                margin-bottom: 3vw;
        }
        .panel-spacer {
                height: 5vw;
        }
        #resumeExistingSessionHdr, #startNewSessionHdr, #downloadDataHdr, #downloadDataDesc {
                font-size: 4.5vw;
        }
        #startNewSessionHdr {
                margin-bottom: 2vw !important;
        }
        .controls-row {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 2vw !important;
        }
        #new-session .uuid-field, #new-session .pw-field,
        #resume-session .pw-field, #resume-session .uuid-field {
                width: 100% !important;
                display: flex !important;
                align-items: center !important;
                position: relative !important;
                margin-bottom: 1.7vw !important;
                height: 9vw !important;
        }
        #new-session .uuid-field input,
        #new-session .pw-field input,
        #resume-session .pw-field input {
                flex: 1 1 auto !important;
                min-width: 0 !important;
        }
        #copy_uuid_btn, #toggle_new_pw, #toggle_new_pw_confirm {
                position: absolute !important;
                right: 0 !important;
                top: 35% !important;
                bottom: auto !important;
                transform: translateY(-50%) !important;
                width: 9vw !important;
                height: 9vw !important;
                min-width: unset !important;
                min-height: unset !important;
                max-width: 9vw !important;
                max-height: 9vw !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                z-index: 2 !important;
        }
        #resume-session #toggle_pw {
                position: absolute !important;
                right: 0 !important;
                top: 40% !important;
                bottom: auto !important;
                transform: translateY(-54%) !important;
                z-index: 2 !important;
        }
        #new-session .pw-field input,
        #resume-session .pw-field input,
        #new-session .uuid-field input {
                padding-right: 11vw !important;
        }
        .pw-toggle, .copy-toggle {
                position: absolute !important;
                right: 0vw !important;
                top: 50% !important;
                bottom: auto !important;
                transform: translateY(-50%) !important;
                margin: 0 !important;
                width: 9vw !important;
                height: 9vw !important;
                min-width: unset !important;
                min-height: unset !important;
                max-width: 9vw !important;
                max-height: 9vw !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
        }
        .pw-toggle svg, .copy-toggle svg {
                width: 5.8vw !important;
                height: 5.8vw !important;
        }
}
/* Root + base */
:root { --main-fill-color: #A8CEE2;
        --pw-toggle-size: 3vw;
        --padding-btn: 0.75vw 1.5vw;
        --btns-and-fields-len: 95%;
        --border-radius: 0.75vw;
        --panel-padding: 0.75vw;
        --input-text-offset: 1.35vw 1.35vw;
}

html, body { overflow-x: hidden; overflow-y: auto; min-height: 100%; }
body { background-color: var(--main-fill-color); margin: 0; font-family: Arial, Helvetica, sans-serif; }


/* Top helper links */
.top-links {
        transform: translateX(-1.5vw);
        display: flex;
        align-items: center;
        gap: 0.8vw;
        padding: 0 0 0 0.2vw;
        margin-left: 0;
        justify-content: flex-start;
        margin-right: 0;
        margin-top: 0.6vw;
        background: var(--main-fill-color);
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        justify-content: flex-start;
}

.top-links a {
        font-size: 1.6vw;
        color: #0645ad;
        text-decoration: none;
        font-weight: 600;
        background: none;
        border: none;
        outline: none;
        order: 2;
        display: inline-block;
}


/* Language controls */
.lang-select {
        position: relative;
        margin-left: 3vw;
        margin-right: auto;
        order: 1;
        font-size: 1.3vw;
        color: black;
        background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
        border: 2px solid #bfc9d3;
        border-radius: 0.4vw;
        padding: 0.2vw 0.6vw;
        box-shadow:
                inset 0.08vw 0.08vw 0.18vw rgba(255,255,255,0.85),
                inset 0 -0.08vw 0.18vw rgba(0,0,0,0.06),
                0 0.2vw 0.45vw rgba(0,0,0,0.08);
        cursor: pointer;
}

.lang-select:hover { filter: brightness(1.01); }

.lang-select:focus-visible { outline: none; border-color: #0a7cc8;
                           box-shadow:
                                   inset 0 0.1vw 0.2vw rgba(0,0,0,0.06),
                                   0 0 0 0.25vw rgba(10,124,200,0.25),
                                   0 0.25vw 0.6vw rgba(0,0,0,0.08); }


/* Underline below language selection */
.lang-underline {
        position: relative;
        width: 100%;
        height: 0.15vw;
        background: black;
        margin-top: 0.6vw;
        z-index: 10;
}


/* Questionnaire System Entry Header area */
#questionnaireSystemEntry { font-size: 3vw; font-weight: bold; position: relative; margin: 0.4vw auto 0.4vw;
                            color: black; text-align: center; }


/* Panels */
.sections-row { display: flex; justify-content: center; align-items: stretch; gap: 2.5vw; margin-top: 0.8vw; flex-wrap: wrap; }
#new-session, #resume-session { width: 32vw; min-height: 19vw; background-color: rgba(255,255,255,0.95);
                                padding: var(--panel-padding); border-radius: var(--border-radius);
                                display: flex; flex-direction: column; }
.controls-row { display: flex; align-items: center; gap: 1vw; flex-wrap: wrap; }
/* Centering panel new session */
#new-session .controls-row { justify-content: center; width: 100%; margin: 0 auto; }
/* Centering panel resume session */
#resume-session .controls-row { justify-content: center; width: 100%; margin: 0 auto; }
#new-session input, #resume-session input { background-color: white; border: 2px solid #ccc;
                                            padding: var(--input-text-offset); border-radius: var(--border-radius); }
#resume-session input { box-sizing: border-box; }
.pw-field { position: relative; display: inline-block;}
.pw-field input { width: 100%; box-sizing: border-box; height: var(--pw-toggle-size); font-size: 2.2vw; }
#new-session .pw-field, #resume-session .pw-field, #sessionIdInput, #new-session .uuid-field { width: var(--btns-and-fields-len);
                                    max-width: 100%; height: var(--pw-toggle-size); font-size: 2.2vw; }
/* Make UUID field the same size and style as other inputs */
#new-session .uuid-field { width: var(--btns-and-fields-len); max-width: 100%; height: var(--pw-toggle-size); }
#new-session .uuid-field { position: relative; display: inline-block; }
#new-session .uuid-field input { width: 100%; box-sizing: border-box; height: var(--pw-toggle-size); font-size: 2.2vw; 
        background: linear-gradient(180deg, #f0f0f0 0%, #e6e6e6 100%);
        border: 2px solid #bfc9d3; border-radius: var(--border-radius);
        box-shadow:
                        inset 0.08vw 0.08vw 0.18vw rgba(255,255,255,0.9),
                        inset 0 -0.08vw 0.18vw rgba(0,0,0,0.06),
                        0 0.2vw 0.45vw rgba(0,0,0,0.06);
        padding: var(--input-text-offset);
        padding-right: calc(var(--pw-toggle-size) + 0.8vw);
}

/* Copy icon button aligned like password eye toggle */
.copy-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
                         width: calc(var(--pw-toggle-size) + 0.8vw); height: var(--pw-toggle-size);
                         background: transparent; border: transparent; padding: 0; cursor: pointer;
                         color: #555; appearance: none; -webkit-appearance: none;
                         display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.copy-toggle svg { display: block; width: 2.4vw; height: 2.4vw; }
.copy-toggle:hover { filter: brightness(0.8); }
/* Third panel: Download CSV */
#download-panel { width: 68vw; min-height: 9vw; background-color: rgba(255,255,255,0.95); padding: var(--panel-padding);
                  border-radius: var(--border-radius); display: flex; flex-direction: column; justify-content: center;
                  align-items: center; margin-bottom: 1vw; margin-top: -0.2; }
#download-panel .controls-row { justify-content: center; align-items: center; width: 100%; margin: 0 auto; }
#download-panel input { width: 30vw; max-width: 100%; box-sizing: border-box; height: var(--pw-toggle-size); font-size: 2.2vw;
                        background-color: white; border: 2px solid #ccc; border-radius: var(--border-radius);
                        padding: var(--input-text-offset); }


/* Spacer below header. Align panels by adding an empty line under the START NEW SESSION header for DE language */
.panel-spacer { height: 2.4vw; }


/* Headers and descriptions */
#resumeExistingSessionHdr, #startNewSessionHdr, #downloadDataHdr { margin: 0 0 0.8vw; font-size: 2vw;
                                                                  text-align: center; font-weight: bold; }
#downloadDataDesc { margin: 0 0 0.8vw; font-size: 2vw; text-align: center; }

/* Buttons */
#new-session button, #resume-session button, #download-panel button { background-color: #06629f; border: 1px solid #999;
             padding: var(--padding-btn); border-radius: var(--border-radius); cursor: pointer; color: white; font-size: 1.5vw; }
#downloadCsvBtn:hover, #resumeSessionBtn:hover, #beginQuestionnaireBtn:hover { filter: brightness(0.8); }
#resumeSessionBtn, #beginQuestionnaireBtn { width: var(--btns-and-fields-len); height: var(--pw-toggle-size);
                                            max-width: 100%; align-self: center;
                                            display: inline-flex; align-items: center; justify-content: center;
                                            line-height: 1.1; text-align: center; }
#downloadCsvBtn { width: 20vw; max-width: 20vw; height: var(--pw-toggle-size); align-self: center; }


/* EYE properties */
.pw-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
             width: calc(var(--pw-toggle-size) + 0.8vw); height: var(--pw-toggle-size);
             background: transparent; border: transparent; padding: 0; cursor: pointer;
             color: #555; appearance: none; -webkit-appearance: none;
             display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pw-toggle svg { display: block; width: 2.4vw; height: 2.4vw; }
.pw-toggle:hover { filter: brightness(0.8); }


/* 3D design with shadow: Begin & Resume buttons (refined) */
#beginQuestionnaireBtn, #resumeSessionBtn, #downloadCsvBtn {
        position: relative;
        color: #fff;
        cursor: pointer;
        font-size: 1.5vw;
        padding: var(--padding-btn);
        border-radius: var(--border-radius);
        border: 1px solid #0a5a8c;
        background: linear-gradient(180deg, #0a7cc8 0%, #06629f 100%);
        box-shadow:
                0 0.45vw 1vw rgba(0,0,0,0.2),
                inset 0 0.12vw 0 rgba(255,255,255,0.22);
        transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, background 150ms ease;
}

#beginQuestionnaireBtn:hover, #resumeSessionBtn:hover, #downloadCsvBtn:hover {
        filter: brightness(1.03);
        transform: translateY(-0.08vw);
        box-shadow:
                0 0.6vw 1.2vw rgba(0,0,0,0.24),
                inset 0 0.12vw 0 rgba(255,255,255,0.22);
}

#beginQuestionnaireBtn:active, #resumeSessionBtn:active, #downloadCsvBtn:active {
        transform: translateY(0);
        box-shadow:
                0 0.25vw 0.6vw rgba(0,0,0,0.22),
                inset 0 0.18vw 0 rgba(0,0,0,0.08);
        filter: brightness(0.99);
}

#beginQuestionnaireBtn:focus-visible, #resumeSessionBtn:focus-visible, #downloadCsvBtn:focus-visible {
        outline: none;
        box-shadow:
                0 0.5vw 1.1vw rgba(0,0,0,0.24),
                0 0 0 0.25vw rgba(10,124,200,0.35),
                inset 0 0.12vw 0 rgba(255,255,255,0.22);
}


/* 3D style for Create and Resume Password fields */
#new-session .pw-field input, #resume-session .pw-field input {
        background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
        border: 2px solid #bfc9d3;
        box-shadow:
                inset 0.08vw 0.08vw 0.18vw rgba(255,255,255,0.9),
                inset 0 -0.08vw 0.18vw rgba(0,0,0,0.06),
                0 0.2vw 0.45vw rgba(0,0,0,0.06);
        padding: var(--input-text-offset);
        padding-right: calc(var(--pw-toggle-size) + 0.8vw);
}

#new-session .pw-field input:hover, #resume-session .pw-field input:hover {
        filter: brightness(1.01);
}

#new-session .pw-field input:focus, #resume-session .pw-field input:focus {
        outline: none;
        border-color: #0a7cc8;
        background: linear-gradient(180deg, #ffffff 0%, #eef4f8 100%);
        box-shadow:
                inset 0 0.1vw 0.2vw rgba(0,0,0,0.06),
                0 0 0 0.25vw rgba(10,124,200,0.25),
                0 0.25vw 0.6vw rgba(0,0,0,0.08);
}

/* 3D style for Enter session ID field */
#sessionIdInput, #downloadSessionIdInput {
        background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
        border: 2px solid #bfc9d3;
        box-shadow:
                inset 0.08vw 0.08vw 0.18vw rgba(255,255,255,0.9),
                inset 0 -0.08vw 0.18vw rgba(0,0,0,0.06),
                0 0.2vw 0.45vw rgba(0,0,0,0.06);
        padding: var(--input-text-offset);
}

#sessionIdInput:hover, #downloadSessionIdInput:hover {
        filter: brightness(1.01);
}

#sessionIdInput:focus, #downloadSessionIdInput:focus {
        outline: none;
        border-color: #0a7cc8;
        background: linear-gradient(180deg, #ffffff 0%, #eef4f8 100%);
        box-shadow:
                inset 0 0.1vw 0.2vw rgba(0,0,0,0.06),
                0 0 0 0.25vw rgba(10,124,200,0.25),
                0 0.25vw 0.6vw rgba(0,0,0,0.08);
}