/* ==================== CSS Variables ==================== */
:root {
    --text-color: #e0e0e0;
    --accent-color: #5b9bd5;
    --accent-hover: #6ba8e0;
    --accent-secondary: #4a7ba7;
    --accent-danger: #d9534f;
    --glass-bg: rgba(20, 20, 20, 0.85);
    --glass-border: rgba(255, 255, 255, 0.15);
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    --gradient-primary: linear-gradient(135deg, #4a5f7f 0%, #3d4f66 100%);
    --gradient-success: linear-gradient(135deg, #5b9bd5 0%, #4a7ba7 100%);
    --gradient-danger: linear-gradient(135deg, #d9534f 0%, #c9302c 100%);
    --gradient-accent: linear-gradient(135deg, #4a5f7f 0%, #5b9bd5 100%);
}

/* ==================== Base Styles ==================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: #0a0e27;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(91, 155, 213, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(74, 123, 167, 0.1) 0%, transparent 50%);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    font-size: 16px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text-color);
}

a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    opacity: 0.8;
}

/* ==================== Layout ==================== */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 20px 16px;
}

.video-page .card {
    padding: 16px 30px 16px;
}

.video-page .card h2 {
    margin-bottom: 10px;
}

header {
    background: rgba(20, 20, 20, 0.5);
    border-bottom: 1px solid rgba(91, 155, 213, 0.2);
    color: white;
    backdrop-filter: blur(10px);
}

header .container {
    padding-top: 12px;
    padding-bottom: 12px;
}

header .container > div {
    flex-wrap: wrap;
    min-width: 0;
}

header h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e0e0e0 0%, #b8c5d6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

footer {
    text-align: center;
    padding: 8px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .container {
    padding: 8px 20px;
}

/* ==================== Card Component ==================== */
.card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.1);
    padding: 30px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.card-fullwidth {
    max-width: none;
    width: calc(100vw - 40px);
    position: relative;
    left: 50%;
    margin-left: calc(-50vw + 20px);
    overflow: visible;
    padding: 30px 40px;
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    pointer-events: none;
    box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 0.1),
                inset 0px -9px 0px -8px rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.card > * {
    position: relative;
    z-index: 2;
}

.card h2 {
    color: #b8c5d6;
    margin-bottom: 20px;
    font-size: 1.3rem;
    letter-spacing: 0.3px;
}

/* ==================== Buttons ==================== */
.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family);
}

.btn:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: var(--gradient-success);
    border-color: rgba(91, 155, 213, 0.6);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6ba8e0 0%, #5a8ec4 100%);
    box-shadow: 0 0 20px rgba(91, 155, 213, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-success {
    background: var(--gradient-success);
    border-color: rgba(91, 155, 213, 0.6);
}

.btn-success:hover {
    background: linear-gradient(135deg, #6ba8e0 0%, #5a8ec4 100%);
    box-shadow: 0 0 20px rgba(91, 155, 213, 0.3);
}

.btn:disabled {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Button pressed/active state */
.btn-pressed {
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(1px);
    border-color: rgba(0, 0, 0, 0.3) !important;
    opacity: 0.85;
    filter: saturate(0.6);
}

/* ==================== Navigation ==================== */
.navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* ==================== Progress Bar ==================== */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gradient-success);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

/* ==================== Form Elements ==================== */
.error {
    color: #ff6b6b;
    font-size: 0.9rem;
    margin-top: 8px;
    font-weight: 500;
}

.required-indicator {
    color: var(--accent-danger);
    margin-left: 3px;
}

.question-number {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

/* Question Styling */
.question {
    margin-bottom: 14px;
}

/* Page title above the card stack */
.page-title {
    color: #b8c5d6;
    font-size: 1.3rem;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

/* Each section group is its own card with a gap */
.question-group-card {
    margin-bottom: 16px;
}

.question-group-card:last-of-type {
    margin-bottom: 0;
}

.question-text {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 1.05rem;
    color: #b8c5d6;
}

/* Images embedded in question text sit below the label text */
.question-text img {
    display: block;
    width: 100%;
    margin-top: 8px;
}

/* Text Display / Heading */
.question:has(.text-display),
.question:has(.section-header),
.question:has(.image-display) {
    margin-bottom: 8px;
}

.text-display {
    padding: 4px 0;
    color: #b8c5d6;
    font-size: 1.05rem;
    line-height: 1.6;
}

.text-display p {
    margin-bottom: 12px;
}

.text-display p:last-child {
    margin-bottom: 0;
}

.text-display ul,
.text-display ol {
    padding-left: 1.5em;
    margin-bottom: 12px;
}

.text-display li {
    margin-bottom: 4px;
}

/* Image Display */
.image-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.image-display__title {
    align-self: flex-start;
    color: #b8c5d6;
    font-size: 1rem;
    line-height: 1.5;
}

.image-display__img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
}

.image-display__caption {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-style: italic;
    margin: 0;
}

/* Section Header */
.section-header {
    margin: 8px 0 0;
}

.section-header-content {
    padding: 0 2px;
}

.section-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #5b9bd5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
}

.section-header-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.5;
}

/* Radio and Checkbox Options */
.radial-choices,
.checkbox-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.choice-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    font-weight: 400;
}

.choice-option:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.choice-option input[type="radio"],
.choice-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}

.choice-option input[type="radio"]:checked ~ span,
.choice-option input[type="checkbox"]:checked ~ span {
    font-weight: 600;
    color: var(--text-color);
}

.choice-option:has(input[type="radio"]:checked),
.choice-option:has(input[type="checkbox"]:checked) {
    background: rgba(91, 155, 213, 0.2);
    border-color: rgba(91, 155, 213, 0.6);
    box-shadow: 0 0 18px rgba(91, 155, 213, 0.45), inset 0 0 8px rgba(91, 155, 213, 0.1);
}

/* Disabled choice styling */
.choice-option.disabled-choice {
    opacity: 0.4;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.choice-option.disabled-choice span {
    color: rgba(255, 255, 255, 0.4);
}

/* Likert Scale */
.likert-scale {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.likert-options {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
}

.likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transition: all 0.3s ease;
}

.likert-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.likert-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(40px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.likert-option:hover .likert-number {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(91, 155, 213, 0.5);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3);
}

.likert-option input[type="radio"]:checked ~ .likert-number {
    background: linear-gradient(135deg, #5b9bd5 0%, #4a7ba7 100%);
    border-color: #5b9bd5;
    color: white;
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(91, 155, 213, 0.5);
}

.likert-endpoint-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.likert-endpoint-label--min {
    align-self: flex-start;
    width: 250%;
    text-align: left;
}

.likert-endpoint-label--max {
    align-self: flex-end;
    width: 250%;
    text-align: right;
}

@media (max-width: 480px) {
    .likert-options {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
    }

    .likert-option {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        flex: none;
    }

    .likert-number {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        font-size: 0.9rem;
        border-width: 1.5px;
    }

    .likert-endpoint-label,
    .likert-endpoint-label--min,
    .likert-endpoint-label--max {
        font-size: 0.85rem;
        width: auto;
        text-align: left;
    }
}

/* Form Controls */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5));
    color: white !important;
    -webkit-text-fill-color: white;
    font-family: var(--font-family);
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset,
                0 -1px 0 rgba(255, 255, 255, 0.05) inset,
                0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Number input spinner buttons - dark mode */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    display: none;
}

/* Indeterminate counter with + and - buttons */
.indeterminate-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
}

.counter-display {
    flex: 0 0 80px;
    padding: 8px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5));
    color: white !important;
    font-size: 1rem;
    font-family: var(--font-family);
}

.counter-btn {
    flex: 0 0 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5));
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.counter-btn:hover {
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.6), rgba(10, 10, 10, 0.6));
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 8px rgba(91, 155, 213, 0.2);
}

.counter-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset;
}

.counter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-control::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    border-color: rgba(91, 155, 213, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset,
                0 -1px 0 rgba(255, 255, 255, 0.05) inset,
                0 0 8px rgba(91, 155, 213, 0.3);
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.6), rgba(0, 0, 0, 0.6));
}

textarea,
textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* ==================== Matrix/Grid Question ==================== */
.matrix-grid {
    overflow-x: auto;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(10, 10, 10, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.95rem;
}

.matrix-table thead {
    background: linear-gradient(135deg, rgba(91, 155, 213, 0.15) 0%, rgba(74, 123, 167, 0.1) 100%);
    border-bottom: 2px solid rgba(91, 155, 213, 0.2);
}

.matrix-table th {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.matrix-table th:last-child {
    border-right: none;
}

.matrix-row-header {
    text-align: left;
    width: 1%;
    min-width: 150px;
    padding-left: 12px;
}

.matrix-col-header {
    min-width: 100px;
    word-break: break-word;
}

.matrix-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.matrix-table tbody tr:last-child {
    border-bottom: none;
}

.matrix-table tbody tr:hover {
    background: rgba(91, 155, 213, 0.08);
}

.matrix-row-label {
    padding: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    min-width: 150px;
    max-width: 150px;
    word-break: break-word;
}

.matrix-cell {
    padding: 12px 8px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.matrix-cell:last-child {
    border-right: none;
}

.matrix-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.matrix-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.matrix-radio-circle {
    display: none;
}

/* Responsive matrix for mobile */
@media (max-width: 768px) {
    .matrix-table {
        font-size: 0.85rem;
    }
    
    .matrix-row-label,
    .matrix-row-header {
        min-width: 100px;
        max-width: 100px;
        padding: 8px;
    }
    
    .matrix-table th,
    .matrix-cell {
        padding: 8px 4px;
    }
    
    .matrix-radio-circle {
        width: 18px;
        height: 18px;
        border-width: 1.5px;
    }
}

/* ==================== Survey List Page ==================== */
.surveys-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.survey-link {
    display: block;
    padding: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.survey-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    pointer-events: none;
}

.survey-link > * {
    position: relative;
    z-index: 1;
}

.survey-link:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(91, 155, 213, 0.4);
}

.survey-link h3 {
    color: #b8c5d6;
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 600;
}

.survey-link p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.survey-link-action {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.survey-link:hover .survey-link-action {
    color: var(--accent-hover);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.empty-state p {
    font-size: 1.05rem;
}

/* ==================== Survey Start Page ==================== */
.survey-description {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.survey-info {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.survey-instructions {
    margin-bottom: 30px;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.75);
}

.survey-instructions li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* ==================== Questions Page ==================== */
.question-block {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.question-block--error {
    border-left: 3px solid var(--accent-danger);
    padding-left: 10px;
    margin-left: -13px;
}

.question-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.empty-questions {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* ==================== Video Page ==================== */
.video-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-player {
    width: 100%;
    display: block;
    /* Before metadata loads the video has no natural ratio, so fall back to 16:9
       (the common case) to size the element — and the black placeholder over it —
       correctly from the first paint. The `auto` keyword means that once the real
       dimensions are known the true ratio takes over, so non-16:9 videos are not
       distorted. Inline px sizing from the maximize logic overrides this when the
       video is enlarged. */
    aspect-ratio: auto 16 / 9;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 12px;
    overflow: hidden;
}

/* When the real ratio turns out to differ from the assumed 16:9, the box is
   resized to the true dimensions; transition it so the placeholder morphs
   smoothly to the right shape instead of jumping before it fades out. */
.video-container.video-settling .video-player {
    transition: width 0.45s ease, height 0.45s ease;
}

/* While loading, keep the real <video> hidden behind the placeholder. The
   element stays in layout so its 16:9/maximized height sizes the container
   (and therefore the black placeholder) before any frame is shown. */
.video-container.video-loading .video-player {
    opacity: 0;
}

/* ----- Loading placeholder (black box with spinner, shown until ready) ----- */
.video-placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 12px;
    transition: opacity 0.4s ease;
}

.video-placeholder.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
}

.video-spinner.active {
    display: block;
    animation: video-spin 0.8s linear infinite;
}

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


/* Hide mute button (not suppressible via controlslist) */
.video-player::-webkit-media-controls-mute-button {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
}

/* Make the timeline read-only — seeking is also blocked in JS as a hard fallback */
.video-player::-webkit-media-controls-timeline {
    pointer-events: none !important;
    cursor: default !important;
}

/* ----- Maximized video (fills available viewport before completion) ----- */
/* Expand the card itself to wrap the enlarged video, breaking out of the
   900px container and staying centred on the viewport. The exact width is set
   inline (in px) by video_player.js to match the video. */
.card.video-card-maximized {
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.video-container.maximized {
    border: none;
    border-radius: 12px;
}

.video-container.maximized .video-player {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    /* height applied inline by JS */
}

/* Smooth shrink back to the in-card size once the video completes. */
.video-container.animate .video-player {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-message-notice {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    text-align: center;
    color: #fbbf24;
    font-size: 18px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.play-message-notice.hidden {
    opacity: 0;
}

.fullscreen-btn-mobile {
    display: none;
}

.video-complete-message {
    display: none;
    text-align: center;
    padding: 20px;
    background: rgba(91, 155, 213, 0.2);
    border: 1px solid rgba(91, 155, 213, 0.4);
    border-radius: 12px;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.video-complete-message.show {
    display: block;
}

.questions-container {
    display: none;
}

.questions-container.show {
    display: block;
}

.description-box {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(91, 155, 213, 0.1);
    border-left: 4px solid rgba(91, 155, 213, 0.6);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
}

.already-watched {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 15px;
    border-radius: 12px;
    color: rgba(255, 193, 7, 0.9);
    margin-bottom: 20px;
}

.already-watched strong {
    color: rgba(255, 193, 7, 1);
}

.validation-errors {
    border-left: 3px solid var(--accent-danger);
    padding: 10px 15px;
    margin-bottom: 20px;
}

.validation-errors .error {
    margin: 0;
    padding: 4px 0;
}

/* ==================== Thank You & Error Pages ==================== */
.thank-you-card,
.error-card {
    text-align: center;
    padding: 50px 30px;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.thank-you-title {
    color: var(--accent-color);
    margin-bottom: 20px;
}

.thank-you-message {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.submission-reference {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.submission-code {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--accent-color);
    font-family: monospace;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.thank-you-note {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.error-title {
    color: #ff6b6b;
    margin-bottom: 20px;
}

.error-message {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

/* ==================== Bladder Annotation ==================== */
.annotation-container {
    margin-top: 20px;
}

.annotation-toolbar {
    display: flex;
    gap: 12px 20px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(91, 155, 213, 0.08);
    border: 1px solid rgba(91, 155, 213, 0.2);
    border-radius: 8px;
}

.toolbar-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-group:first-child {
    flex: 1 1 100%;
    min-width: 0;
}

.toolbar-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Unified Button Styles for Annotation Toolbar */
.annotation-toolbar .btn {
    padding: 8px 14px;
    border: 1.5px solid rgba(91, 155, 213, 0.4);
    border-radius: 6px;
    background: rgba(75, 95, 127, 0.5);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.annotation-toolbar .btn:not(.btn-paint):hover {
    background: rgba(75, 95, 127, 0.7);
    border-color: rgba(91, 155, 213, 0.6);
}

.annotation-toolbar .btn:active {
    transform: scale(0.98);
}

.annotation-toolbar .btn-paint {
    flex: 0 1 auto;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
}

.annotation-toolbar .investigate-btn {
    background: rgba(243, 156, 18, 0.15);
    border-color: #f39c12;
    filter: saturate(0.6);
    opacity: 0.75;
}

.annotation-toolbar .investigate-btn:hover {
    background: rgba(243, 156, 18, 0.25);
    border-color: #f39c12;
}

.annotation-toolbar .investigate-btn.btn-active {
    background: rgba(243, 156, 18, 0.35);
    border-color: #f39c12;
    box-shadow: 0 0 12px rgba(243, 156, 18, 0.4);
    filter: saturate(1);
    opacity: 1;
}

.annotation-toolbar .resect-btn {
    background: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c;
    filter: saturate(0.6);
    opacity: 0.75;
}

.annotation-toolbar .resect-btn:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: #e74c3c;
}

.annotation-toolbar .resect-btn.btn-active {
    background: rgba(231, 76, 60, 0.35);
    border-color: #e74c3c;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.4);
    filter: saturate(1);
    opacity: 1;
}

.annotation-toolbar .color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.annotation-toolbar .btn-size {
    padding: 8px 10px;
    min-width: 38px;
    justify-content: center;
    background: rgba(75, 95, 127, 0.4);
    border-color: rgba(91, 155, 213, 0.3);
}

.annotation-toolbar .btn-size:hover {
    background: rgba(75, 95, 127, 0.6);
}

.annotation-toolbar .btn-size.btn-active {
    background: rgba(91, 155, 213, 0.3);
    border-color: rgba(91, 155, 213, 0.6);
    box-shadow: 0 0 12px rgba(91, 155, 213, 0.2);
}

.annotation-toolbar .btn-size svg {
    width: 16px;
    height: 16px;
}

.annotation-toolbar .btn-eraser {
    background: rgba(75, 95, 127, 0.4);
    border-color: rgba(91, 155, 213, 0.3);
    color: var(--text-color);
    filter: saturate(0.6);
    opacity: 0.75;
}

.annotation-toolbar .btn-eraser:hover {
    background: rgba(75, 95, 127, 0.6);
    border-color: rgba(91, 155, 213, 0.5);
}

.annotation-toolbar .btn-eraser.btn-active {
    background: rgba(91, 155, 213, 0.3);
    border-color: rgba(91, 155, 213, 0.6);
    box-shadow: 0 0 12px rgba(91, 155, 213, 0.2);
    filter: saturate(1);
    opacity: 1;
}

.annotation-toolbar .btn-control {
    background: rgba(75, 95, 127, 0.4);
    border-color: rgba(91, 155, 213, 0.3);
}

.annotation-toolbar .btn-control:hover {
    background: rgba(75, 95, 127, 0.6);
}

.annotation-toolbar .btn-danger {
    background: rgba(217, 83, 79, 0.2);
    border-color: rgba(217, 83, 79, 0.3);
}

.annotation-toolbar .btn-danger:hover {
    background: rgba(217, 83, 79, 0.3);
    border-color: rgba(217, 83, 79, 0.5);
}

.annotation-toolbar .btn-secondary {
    background: rgba(75, 95, 127, 0.4);
    border-color: rgba(91, 155, 213, 0.3);
}

.annotation-toolbar .btn-secondary:hover {
    background: rgba(75, 95, 127, 0.6);
}

.annotation-toolbar .btn-pressed,
.annotation-toolbar .btn-active:not(.investigate-btn):not(.resect-btn):not(.btn-eraser) {
    background: rgba(91, 155, 213, 0.3) !important;
    border-color: rgba(91, 155, 213, 0.6) !important;
    box-shadow: 0 0 12px rgba(91, 155, 213, 0.2) !important;
}

.canvas-wrapper {
    position: relative;
    display: block;
    border: 2px solid rgba(91, 155, 213, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    width: 100%;
    max-width: 377px;
    margin: 0 auto;
}

/* Background bladder diagram – sits below the drawing layer */
.canvas-wrapper .bladder-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    display: block;
}

/* Fabric drawing layer – semi-transparent for visualization */
.canvas-wrapper .canvas-container {
    opacity: 0.55;
}

.canvas-wrapper canvas {
    display: block;
}

.annotation-legend {
    margin-top: 15px;
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

/* ==================== Responsive Design ==================== */
@media (max-width: 768px) {
    .container {
        padding: 20px 15px;
    }

    .card {
        padding: 20px;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .navigation {
        flex-direction: column;
        gap: 15px;
    }

    /* Shrink play button so it fits inside shorter video on mobile */
    .play-btn {
        width: 60px !important;
        height: 60px !important;
        padding: 14px !important;
    }

    .play-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Show fullscreen button below video on mobile */
    .fullscreen-btn-mobile {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: rgba(91, 155, 213, 0.15);
        border: 1px solid rgba(91, 155, 213, 0.4);
        border-radius: 8px;
        color: var(--accent-color);
        font-size: 15px;
        cursor: pointer;
        margin-bottom: 12px;
    }

    .fullscreen-btn-mobile:active {
        background: rgba(91, 155, 213, 0.3);
    }
}

@media (max-width: 360px) {
    .container {
        padding: 16px 12px;
    }

    .card {
        padding: 16px 12px;
        border-radius: 12px;
    }

    header h1 {
        font-size: 1.15rem;
    }

    header .container > div img {
        height: 36px;
    }

    .annotation-toolbar {
        gap: 8px 12px;
        padding: 12px;
    }

    .toolbar-group {
        gap: 6px;
    }

    .annotation-toolbar .btn,
    .annotation-toolbar .btn-paint {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .color-dot {
        width: 10px !important;
        height: 10px !important;
    }
}

/* ==================== Utility Classes ==================== */
.text-center {
    text-align: center;
}

.text-muted {
    color: rgba(255, 255, 255, 0.6);
}

.mt-3 {
    margin-top: 20px;
}

.mb-3 {
    margin-bottom: 20px;
}

.mt-4 {
    margin-top: 30px;
}

.mb-4 {
    margin-bottom: 30px;
}

/* ==================== Print Styles ==================== */
@media print {
    /* Light background, dark text */
    body {
        background: #fff !important;
        background-image: none !important;
        color: #111 !important;
        font-size: 11pt;
    }

    /* Hide chrome */
    header,
    .progress-text,
    .progress-bar,
    .navigation,
    .btn {
        display: none !important;
    }

    /* Remove glassmorphism from cards */
    .card,
    .question-group-card {
        background: none !important;
        border: 1px solid #888 !important;
        box-shadow: none !important;
        border-radius: 4px !important;
        padding: 12pt 14pt !important;
        margin-bottom: 10pt !important;
        break-inside: avoid;
    }

    .card::after {
        display: none !important;
    }

    /* Page title */
    .page-title {
        color: #111 !important;
        font-size: 14pt;
        margin-bottom: 8pt;
    }

    /* Question text */
    .question-text,
    .question-text--short_text,
    .question-text--long_text,
    .question-text--radial_choice,
    .question-text--checkbox_multi,
    .question-text--likert_scale,
    .question-text--matrix_choice {
        color: #111 !important;
        font-size: 11pt;
    }

    .question-number {
        color: #555 !important;
    }

    .question-block {
        border-bottom: 1px solid #bbb !important;
        padding-bottom: 6pt !important;
        margin-bottom: 6pt !important;
        break-inside: avoid;
    }

    .question-block:last-child {
        border-bottom: none !important;
    }

    /* Section header */
    .section-header-title {
        color: #111 !important;
        font-size: 11pt;
    }

    .section-header-subtitle {
        color: #222 !important;
    }

    /* Choices: show as plain list, remove dark styling */
    .radial-choices,
    .checkbox-choices {
        gap: 4pt !important;
    }

    .choice-option {
        background: none !important;
        border: 1px solid #777 !important;
        box-shadow: none !important;
        color: #111 !important;
        padding: 4pt 8pt !important;
        border-radius: 3px !important;
    }

    .choice-option span {
        color: #111 !important;
    }

    .choice-option input[type="radio"],
    .choice-option input[type="checkbox"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Likert */
    .likert-options {
        background: none !important;
        border: 1px solid #777 !important;
        padding: 6pt !important;
        gap: 4pt !important;
    }

    .likert-number {
        background: none !important;
        border: 1.5px solid #333 !important;
        color: #111 !important;
        box-shadow: none !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 9pt !important;
    }

    /* Show selected likert value clearly in print */
    .likert-option input[type="radio"]:checked ~ .likert-number {
        background: #111 !important;
        color: #fff !important;
        border-color: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .likert-endpoint-label {
        color: #111 !important;
        font-size: 9pt !important;
    }

    /* Matrix grid */
    .matrix-table {
        border-collapse: collapse;
        width: 100%;
        border: none !important;
    }

    .matrix-table thead {
        background: none !important;
        border-bottom: 1px solid #888 !important;
    }

    .matrix-table tbody tr {
        border-bottom: 1px solid #ddd !important;
    }

    .matrix-col-header,
    .matrix-row-header,
    .matrix-row-label,
    .matrix-cell {
        color: #111 !important;
        border: 1px solid #888 !important;
        background: none !important;
    }

    .matrix-radio-circle {
        border-color: #333 !important;
        background: none !important;
    }

    /* Text inputs */
    .form-control,
    input[type="text"],
    input[type="number"],
    textarea {
        background: #fff !important;
        border: 1px solid #666 !important;
        color: #111 !important;
        -webkit-text-fill-color: #111 !important;
        box-shadow: none !important;
    }

    .form-control::placeholder,
    input[type="text"]::placeholder,
    input[type="number"]::placeholder,
    textarea::placeholder {
        color: #999 !important;
        -webkit-text-fill-color: #999 !important;
    }

    /* Text display */
    .text-display {
        color: #111 !important;
    }

    /* Required indicator */
    .required-indicator {
        color: #c00 !important;
    }

    /* Links */
    a {
        color: #111 !important;
        text-decoration: none !important;
    }
}

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(91, 155, 213, 0.4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 155, 213, 0.6);
}
/* ==================== Pathology Choice Chips ==================== */
.pathology-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.chip-option {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-option .chip-label {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
}

.chip-option:hover:not(.disabled-chip) .chip-label {
    background: rgba(91, 155, 213, 0.15);
    border-color: rgba(91, 155, 213, 0.4);
    transform: translateY(-1px);
}

.chip-option input[type="checkbox"]:checked + .chip-label {
    background: linear-gradient(135deg, rgba(91, 155, 213, 0.3), rgba(74, 123, 167, 0.3));
    border-color: rgba(91, 155, 213, 0.8);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 12px rgba(91, 155, 213, 0.3);
}

.chip-option.disabled-chip {
    opacity: 0.4;
    pointer-events: none;
}

.chip-option.disabled-chip .chip-label {
    cursor: not-allowed;
}

/* ==================== Gallery Image Selection ==================== */
.gallery-container {
    width: 100%;
    padding: 40px 0;
    background: rgba(10, 14, 39, 0.6);
    border-top: 1px solid rgba(91, 155, 213, 0.2);
    border-bottom: 1px solid rgba(91, 155, 213, 0.2);
    margin-top: 20px;
    margin-bottom: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 2200px;
    margin: 0 auto;
    padding: 0 20px;
}

.gallery-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(20, 20, 30, 0.8);
    border: 3px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* Hover effects only on devices with hover capability (not touch) */
@media (hover: hover) {
    .gallery-tile:hover {
        border-color: rgba(91, 155, 213, 0.5);
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(91, 155, 213, 0.2);
    }

    .gallery-tile:hover img {
        transform: scale(1.05);
    }
    
    .gallery-tile.locked:hover {
        border-color: rgba(255, 255, 255, 0.1);
        transform: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .gallery-tile.locked:hover img {
        transform: none;
    }
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 165, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gallery-tile.selected .gallery-overlay {
    opacity: 1;
}

.gallery-tile.selected {
    border-color: rgba(255, 165, 0, 0.8);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

.carcinoma-label {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

/* Gallery scroll milestone toast */
#gallery-milestone-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #ff922b, #ffd93d);
    color: #1a1a2e;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
}

#gallery-milestone-toast.gallery-milestone-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Gallery Results Modal */
.gallery-results-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-results-modal[hidden] {
    display: none;
}

.gallery-results-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.gallery-results-modal__box {
    position: relative;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 2.5rem 3rem;
    max-width: 560px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: gallery-modal-pop 0.25s ease;
}

@keyframes gallery-modal-pop {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.gallery-results-modal__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f8f8f8;
    margin: 0 0 1.8rem;
}

.gallery-results-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.gallery-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.2rem 1rem;
}

.gallery-stat__value {
    font-size: 2rem;
    font-weight: 800;
    color: #ff922b;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.gallery-stat__label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

/* Responsive Gallery */
@media (max-width: 1400px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .gallery-container {
        padding: 20px 15px;
    }
    
    .carcinoma-label {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    
    .gallery-container {
        padding: 15px 10px;
    }
}

/* ==================== Gallery Lockout Feature ==================== */
.gallery-tile.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.gallery-tile.locked img {
    filter: grayscale(60%);
}

/* Lockout banner */
#gallery-lockout-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%);
    color: white;
    padding: 1rem 1.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 5000;
    box-shadow: 0 4px 12px rgba(217, 83, 79, 0.3);
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.4s ease;
    pointer-events: none;
}

#gallery-lockout-banner.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#gallery-lockout-banner.show {
    animation: slideInDown 0.4s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}