/* ABA Exam — Visual Environment Styles */
/* Redesigned: deeper perspective, ABA navy palette, richer details */

/* === CORRIDOR SCENE === */
.aba-corridor {
    position: relative;
    width: 100%;
    height: 480px;
    background: linear-gradient(180deg, #1a1410 0%, #2e2118 40%, #3d2d1e 100%);
    overflow: hidden;
    border-radius: var(--aba-radius-lg);
    perspective: 2000px;
    box-shadow: inset 0 -60px 120px rgba(0,0,0,0.5);
}

/* ceiling */
.aba-corridor-ceiling {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, #0d0a06 0%, #1e1510 100%);
}

.aba-corridor-ceiling-light {
    position: absolute;
    top: 18px;
    width: 90px;
    height: 10px;
    background: rgba(255, 245, 200, 0.95);
    border-radius: 6px;
    box-shadow:
        0 0 20px 6px rgba(255, 245, 180, 0.45),
        0 0 80px 20px rgba(255, 240, 150, 0.18),
        0 40px 120px 10px rgba(255, 240, 150, 0.12);
}

/* perspective walls */
.aba-corridor-wall-left,
.aba-corridor-wall-right {
    position: absolute;
    top: 80px;
    bottom: 130px;
    width: 120px;
    background: linear-gradient(180deg, #2c1f13 0%, #3d2b1a 100%);
}

.aba-corridor-wall-left  { left: 0; box-shadow: inset -8px 0 24px rgba(0,0,0,0.4); }
.aba-corridor-wall-right { right: 0; box-shadow: inset  8px 0 24px rgba(0,0,0,0.4); }

/* floor with tile lines */
.aba-corridor-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: linear-gradient(180deg, #5c4030 0%, #3d2b1a 100%);
    transform: perspective(800px) rotateX(32deg);
    transform-origin: bottom center;
}

.aba-corridor-floor::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px,
            transparent 1px, transparent 80px),
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px,
            transparent 1px, transparent 40px);
}

/* === DOORS IN CORRIDOR === */
.aba-corridor-doors {
    position: absolute;
    top: 80px;
    left: 120px;
    right: 120px;
    bottom: 130px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.aba-door-frame {
    position: relative;
    width: 90px;
    height: 180px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.aba-door-frame:hover {
    transform: scale(1.06) translateY(-4px);
    filter: brightness(1.1);
}

.aba-door-frame.active {
    transform: scale(1.1) translateY(-6px);
    filter: brightness(1.15);
}

/* door casing */
.aba-door-frame::before {
    content: '';
    position: absolute;
    inset: -6px -8px -0px -8px;
    background: linear-gradient(135deg, #5c4020, #3d2b10);
    border-radius: 4px 4px 0 0;
    z-index: 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
}

.aba-door-body {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #7a5c38 0%, #5a3f20 60%, #4a3018 100%);
    border-radius: 3px 3px 0 0;
    z-index: 1;
    box-shadow:
        inset 3px 0 8px rgba(255,255,255,0.06),
        inset -3px 0 8px rgba(0,0,0,0.3),
        2px 0 12px rgba(0,0,0,0.5);
    transform-origin: left center;
    transform-style: preserve-3d;
}

/* door inset panel */
.aba-door-body::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 10px;
    right: 10px;
    bottom: 14px;
    border: 2px solid rgba(255,255,255,0.07);
    border-radius: 2px;
}

/* doorknob */
.aba-door-body::after {
    content: '';
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f0d070, #c8a020);
    box-shadow:
        0 0 6px rgba(200,160,30,0.6),
        inset 0 1px 2px rgba(255,255,255,0.4);
}

.aba-door-glass {
    position: absolute;
    top: 16px;
    left: 14px;
    right: 14px;
    height: 55px;
    background: linear-gradient(135deg,
        rgba(180,210,240,0.55) 0%,
        rgba(140,180,220,0.3) 50%,
        rgba(100,150,200,0.2) 100%);
    border-radius: 3px;
    border: 1px solid rgba(200,230,255,0.25);
    box-shadow: inset 0 1px 4px rgba(255,255,255,0.2);
}

.aba-door-number {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--aba-navy);
    color: var(--aba-white);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--aba-radius-sm);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border-bottom: 2px solid var(--aba-gold);
}

.aba-door-number.active {
    background: var(--aba-navy);
    border-bottom-color: var(--aba-gold-mid);
    animation: aba-glow-number 2.5s ease infinite;
}

@keyframes aba-glow-number {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,48,135,0.4); }
    50%       { box-shadow: 0 2px 20px rgba(184,134,11,0.7), 0 0 32px rgba(184,134,11,0.25); }
}

.aba-door-chair {
    position: absolute;
    bottom: -14px;
    left: -18px;
    width: 22px;
    height: 28px;
    background: linear-gradient(180deg, #555, #333);
    border-radius: 3px 3px 0 0;
    box-shadow: var(--aba-shadow-sm);
}

.aba-door-notes {
    position: absolute;
    right: -12px;
    top: 80px;
    width: 16px;
    height: 22px;
    background: #fffef0;
    border: 1px solid var(--aba-gray-300);
    border-radius: 1px;
    transform: rotate(3deg);
    box-shadow: var(--aba-shadow-sm);
}

.aba-door-stop-sign {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--aba-red);
    color: white;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

.aba-door-read-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--aba-navy);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}
.aba-door-read-btn:hover:not(:disabled) {
    background: #1e3a5f;
    transform: translateX(-50%) scale(1.05);
}
.aba-door-read-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Practice OSCE: category labels on doors (3 doors, all selectable) */
.aba-door-label.aba-door-category {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--aba-navy);
    color: var(--aba-white);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: var(--aba-radius-sm);
    max-width: 140px;
    text-align: center;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border-bottom: 2px solid var(--aba-gold);
}
.aba-practice-door .aba-door-label.aba-door-category {
    animation: aba-glow-number 2.5s ease infinite;
}

/* === SOE EXAM MAIN LAYOUT === */
.aba-soe-sidebar-toggle {
    display: none;
}
.aba-soe-sidebar-overlay { display: none; }
.aba-soe-sidebar-close { display: none; }

.aba-soe-main {
    display: flex;
    height: calc(100vh - var(--aba-header-h, 64px));
    background: linear-gradient(160deg, #0f172a 0%, #111827 100%);
    overflow: hidden;
}

/* SOE session header: phase chip under title; timer + menu only on the right */
#aba-view-soe-session .aba-header {
    height: auto;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
}
#aba-view-soe-session .aba-header-logo > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
#aba-view-soe-session .aba-header-phase--soe-under-title {
    margin-top: 0;
    padding: 5px 12px;
    font-size: 12px;
    max-width: min(360px, 58vw);
    min-width: 0;
}
#aba-view-soe-session .aba-header-phase--soe-under-title #aba-soe-phase-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#aba-view-soe-session .aba-header-right-group--soe-timer {
    gap: 12px;
    flex-shrink: 0;
}
#aba-view-soe-session .aba-header-right-group--soe-timer .aba-timer-compact {
    flex: 1 1 auto;
    min-width: 72px;
    text-align: center;
    justify-content: center;
}

/* OSCE exam station header: phase under title; compact timer + menu on the right */
.aba-osce-exam-view .aba-header {
    height: auto;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.aba-osce-exam-view .aba-header-logo > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.aba-osce-exam-view .aba-header-phase--osce-under-title {
    margin-top: 0;
    padding: 5px 12px;
    font-size: 12px;
    max-width: min(360px, 58vw);
    min-width: 0;
}
.aba-osce-exam-view .aba-header-phase--osce-under-title [id^="aba-osce-exam-phase"] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aba-osce-exam-view .aba-header-right-group--osce-timer {
    gap: 12px;
    flex-shrink: 0;
}
.aba-osce-exam-view .aba-header-right-group--osce-timer .aba-timer-compact {
    flex: 1 1 auto;
    min-width: 72px;
    text-align: center;
    justify-content: center;
}

.aba-soe-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    gap: 16px;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.aba-soe-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aba-soe-phase-meta {
    display: flex;
    align-items: center;
}

.aba-soe-continue-phase-btn {
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
}

.aba-soe-sidebar .aba-badge-blue {
    background: rgba(38,132,255,0.12);
    color: rgba(147,197,253,0.95);
    border: 1px solid rgba(38,132,255,0.2);
}

.aba-soe-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.aba-soe-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: var(--aba-font);
    text-decoration: none;
}

.aba-soe-sidebar-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}

.aba-soe-sidebar-btn svg {
    flex-shrink: 0;
}

.aba-soe-sidebar-btn-link {
    text-align: left;
}

.aba-soe-sidebar-btn-primary {
    background: rgba(38,132,255,0.25);
    border-color: rgba(38,132,255,0.4);
    color: rgba(147,197,253,0.98);
}

.aba-soe-sidebar-btn-primary:hover {
    background: rgba(38,132,255,0.35);
    border-color: rgba(38,132,255,0.55);
    color: #fff;
}

.aba-soe-sidebar-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding-top: 10px;
}

.aba-tts-mute-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.aba-tts-mute-toggle:hover {
    color: rgba(255, 255, 255, 0.88);
}

.aba-tts-mute-toggle .aba-tts-toggle-icon {
    flex-shrink: 0;
    color: rgba(147, 197, 253, 0.92);
}

.aba-tts-mute-toggle:hover .aba-tts-toggle-icon {
    color: rgba(191, 219, 254, 0.98);
}

.aba-tts-mute-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--aba-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.aba-tts-mute-label {
    line-height: 1.2;
}

.aba-osce-sidebar-bottom--tts {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.aba-soe-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.aba-soe-sound-toggle:hover {
    color: rgba(255, 255, 255, 0.9);
}

.aba-soe-sound-toggle .aba-sfx-toggle-icon {
    flex-shrink: 0;
    color: rgba(250, 204, 21, 0.85);
}

.aba-soe-sound-toggle:hover .aba-sfx-toggle-icon {
    color: rgba(253, 224, 71, 0.95);
}

.aba-sfx-toggle-label {
    line-height: 1.2;
}

.aba-soe-sound-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #eab308;
    cursor: pointer;
    flex-shrink: 0;
}

.aba-soe-chat-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === OSCE EXAM MAIN LAYOUT (SOE-style) === */
.aba-osce-sidebar-toggle {
    display: none;
}
.aba-osce-sidebar-overlay { display: none; }
.aba-osce-sidebar-close { display: none; }

.aba-osce-main {
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--aba-header-h, 64px));
    background: linear-gradient(160deg, #0f172a 0%, #111827 100%);
    overflow: hidden;
}

.aba-osce-main-content-wrap {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
    order: 1;
}

/* Monitor/Ultrasound: simulator is main (left), chat in sidebar (right) */
.aba-osce-simulator-main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aba-osce-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    gap: 16px;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    overflow-y: auto;
}

.aba-osce-sidebar-right {
    order: 2;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.08);
}

.aba-osce-sidebar-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px;
}

/* OSCE sidebar: examiner at desk (pixel art) */
.aba-osce-examiner-scene {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.aba-osce-examiner-pixel {
    width: 100%;
    aspect-ratio: 128 / 72;
    display: flex;
}

.aba-osce-examiner-pixel .aba-pixel-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.aba-osce-examiner-scene-small {
    max-height: 80px;
}

.aba-osce-examiner-scene-small .aba-osce-examiner-pixel {
    aspect-ratio: 128 / 72;
    height: 80px;
}

.aba-osce-sidebar .aba-patient-label,
.aba-osce-sidebar .aba-ultrasound-label {
    color: rgba(255,255,255,0.85);
}

.aba-osce-sidebar .aba-station-type-badge {
    margin-top: 8px;
}

.aba-osce-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aba-osce-sidebar .aba-badge-blue {
    background: rgba(38,132,255,0.12);
    color: rgba(147,197,253,0.95);
    border: 1px solid rgba(38,132,255,0.2);
}

.aba-osce-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.aba-osce-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: var(--aba-font);
    text-decoration: none;
}

.aba-osce-sidebar-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}

.aba-osce-sidebar-btn svg {
    flex-shrink: 0;
}

.aba-osce-sidebar-btn-link {
    text-align: left;
}

.aba-osce-sidebar-btn-primary {
    background: rgba(38,132,255,0.25);
    border-color: rgba(38,132,255,0.4);
    color: rgba(147,197,253,0.98);
}

.aba-osce-sidebar-btn-primary:hover {
    background: rgba(38,132,255,0.35);
    border-color: rgba(38,132,255,0.55);
    color: #fff;
}

.aba-osce-sidebar .aba-phase-strip {
    gap: 3px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
}

.aba-osce-sidebar .aba-phase-segment {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    transition: background 0.25s ease;
}

.aba-osce-sidebar .aba-phase-segment.upcoming {
    background: rgba(255,255,255,0.06);
}

.aba-osce-sidebar .aba-phase-segment.active {
    background: rgba(38,132,255,0.85);
}

.aba-osce-sidebar .aba-phase-segment.completed {
    background: rgba(34,197,94,0.55);
}

.aba-osce-chat-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Communication: chat full width */
.aba-osce-communication-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.aba-osce-communication-main .aba-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.aba-osce-communication-main .aba-chat-input-area {
    flex-shrink: 0;
}

/* Ultrasound: simulator main area (like monitor), chat ONLY in sidebar */
.aba-osce-ultrasound-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}
.aba-osce-ultrasound-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.aba-osce-ultrasound-main .aba-us-exam-screen,
.aba-osce-ultrasound-main #aba-osce-main-ultrasound {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Monitor station: monitor only (chat in sidebar) */
.aba-osce-monitor-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.aba-osce-monitor-main .aba-osce-main-monitor {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === MONITOR STATION — Answer-First Examiner Workspace (newmonitorstationchat plan) === */
.aba-osce-main.aba-osce-monitor-station .aba-osce-main-content-wrap {
    flex: 1 1 auto;
    min-width: 760px;
    min-height: 0;
}
.aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar {
    width: clamp(380px, 26vw, 460px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-rail {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
}
/* Meta strip — compact chips */
.aba-osce-main.aba-osce-monitor-station .aba-monitor-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-meta-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
/* Current question card — prominent, latest examiner question */
.aba-osce-main.aba-osce-monitor-station .aba-monitor-question-card {
    flex-shrink: 0;
    min-height: 72px;
    padding: 12px 14px;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-question-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-question-text {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,0.98);
    margin: 0;
    font-weight: 500;
}
/* Completion CTA — shown when all monitor scenarios done */
.aba-monitor-completion-cta-wrap {
    margin-top: 16px;
}
.aba-monitor-completion-cta-wrap .aba-monitor-completion-cta {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
}
@media (max-width: 768px) {
    .aba-monitor-completion-cta-wrap .aba-monitor-completion-cta {
        padding: 14px 16px;
    }
}
/* Hidden messages container — keeps DOM for chat logic, not displayed */
.aba-osce-main.aba-osce-monitor-station .aba-monitor-messages-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Answer card — main flexible area */
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-body .aba-chat-input-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-body .aba-chat-input {
    flex: 1;
    min-height: 160px;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 14px;
    resize: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
    color: #fff;
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-body .aba-chat-input::placeholder {
    color: rgba(255,255,255,0.45);
}
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 10px;
}

.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-actions .aba-chat-voice-btn,
.aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-actions .aba-chat-send-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
}
/* Compact footer — 3-column grid */
.aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-top: 8px;
    flex-shrink: 0;
}
.aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar-menu .aba-osce-sidebar-btn {
    padding: 6px 8px;
    font-size: 10px;
    justify-content: center;
}
.aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar-menu .aba-osce-sidebar-btn svg {
    flex-shrink: 0;
}

/* Monitor station: below 1024px — slide-over, simulator shrink, answer min 132px */
@media (max-width: 1024px) {
    .aba-osce-main.aba-osce-monitor-station .aba-osce-main-content-wrap {
        min-width: 0;
    }
    .aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar {
        width: 340px;
        max-width: 85vw;
    }
    .aba-osce-main.aba-osce-monitor-station .aba-monitor-answer-body .aba-chat-input {
        min-height: 132px;
    }
}
@media (max-width: 640px) {
    .aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar-menu {
        grid-template-columns: 1fr;
    }
    .aba-osce-main.aba-osce-monitor-station .aba-osce-sidebar-menu .aba-osce-sidebar-btn {
        font-size: 12px;
        justify-content: flex-start;
    }
}

/* Ultrasound Info Rail — compact cards */
.aba-ultrasound-examiner-panel .aba-us-examiner-prompt,
.aba-ultrasound-examiner-panel .aba-us-task-checklist,
.aba-ultrasound-examiner-panel .aba-us-findings {
    margin-bottom: 6px;
    padding: 6px 8px;
    pointer-events: auto;
}
.aba-ultrasound-examiner-panel .aba-us-prompt-label,
.aba-ultrasound-examiner-panel .aba-us-checklist-label,
.aba-ultrasound-examiner-panel .aba-us-findings-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 2px;
}
.aba-ultrasound-examiner-panel .aba-us-prompt-text {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255,255,255,0.9);
}
.aba-ultrasound-examiner-panel .aba-us-checklist-list,
.aba-ultrasound-examiner-panel .aba-us-findings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aba-ultrasound-examiner-panel .aba-us-checklist-item {
    font-size: 10px;
    padding: 2px 0;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 4px;
}
.aba-ultrasound-examiner-panel .aba-us-checklist-item::before {
    content: '○';
    font-size: 10px;
}
.aba-ultrasound-examiner-panel .aba-us-checklist-item.checked {
    color: rgba(160,255,160,0.95);
}
.aba-ultrasound-examiner-panel .aba-us-checklist-item.checked::before {
    content: '✓';
}
.aba-ultrasound-examiner-panel .aba-us-finding-item {
    font-size: 10px;
    padding: 2px 0;
    color: rgba(160,255,160,0.95);
}
.aba-us-findings-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.aba-us-findings-input-row:last-child {
    margin-bottom: 0;
}
.aba-us-findings-input-row label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    min-width: 24px;
}
.aba-us-findings-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    background: #fff;
    color: #000;
    pointer-events: auto !important;
    user-select: text;
    -webkit-user-select: text;
}
.aba-us-findings-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
}
.aba-us-findings-input::placeholder {
    color: #666;
}
.aba-us-findings-inputs:empty {
    display: none !important;
}

.aba-osce-main-monitor {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    overflow: hidden;
}

.aba-osce-main-monitor .aba-monitor-display {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1;
}

.aba-header-right-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Header compact timer — dark theme (readable on navy header) */
.aba-header .aba-timer-compact {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.98);
    border: 1px solid rgba(255,255,255,0.1);
}

.aba-header .aba-timer-compact.warning {
    background: rgba(251,146,60,0.25);
    color: #fdba74;
    border-color: rgba(251,146,60,0.35);
}

.aba-header .aba-timer-compact.critical {
    background: rgba(239,68,68,0.25);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
}

/* === EXAMINERS (dark theme) === */
.aba-examiners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.aba-examiners-scene {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.aba-examiners-pixel {
    width: 100%;
    aspect-ratio: 96 / 56;
    display: flex;
}

.aba-examiners-pixel .aba-pixel-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.aba-examiner-indicators {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.aba-examiner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.aba-examiner-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aba-examiner-avatar .aba-examiner-speak-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.aba-examiner-avatar .aba-examiner-speak-icon svg {
    width: 100%;
    height: 100%;
}

.aba-examiner-avatar.male {
    background: rgba(59,130,246,0.2);
    border: 2px solid rgba(59,130,246,0.5);
    color: rgba(147,197,253,0.9);
}

.aba-examiner-avatar.female {
    background: rgba(236,72,153,0.15);
    border: 2px solid rgba(236,72,153,0.45);
    color: rgba(251,182,206,0.9);
}

.aba-examiner-avatar.speaking {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(34,197,94,0.45);
}

.aba-examiner-avatar.speaking .aba-examiner-speak-icon {
    opacity: 1;
    animation: aba-mic-bounce 0.6s ease infinite;
}

.aba-examiner-avatar.speaking::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: var(--aba-green);
    border-radius: 50%;
    border: 2px solid #111827;
    animation: aba-speaking-pulse 1s ease infinite;
}

@keyframes aba-speaking-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.2); opacity: 0.85; }
}

@keyframes aba-mic-bounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.aba-examiner-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Phase strip inside dark sidebar */
/* SOE sidebar: dark-theme progress strip (overrides light track from illustrations.css) */
.aba-soe-sidebar .aba-phase-strip {
    gap: 3px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
}

.aba-soe-sidebar .aba-phase-segment {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    transition: background 0.25s ease;
}

.aba-soe-sidebar .aba-phase-segment.upcoming {
    background: rgba(255,255,255,0.06);
}

.aba-soe-sidebar .aba-phase-segment.active {
    background: rgba(38,132,255,0.85);
}

.aba-soe-sidebar .aba-phase-segment.completed {
    background: rgba(34,197,94,0.55);
}

/* === CLIPBOARD === */
.aba-clipboard {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    background: #f8f2e6;
    border-radius: var(--aba-radius-lg);
    padding: 52px 40px 40px;
    box-shadow: var(--aba-shadow-lg), 0 0 0 2px #c8a870;
}

/* clipboard clip */
.aba-clipboard::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 28px;
    background: linear-gradient(135deg, #b8943a, #8a6a10);
    border-radius: 6px;
    box-shadow: var(--aba-shadow);
}

.aba-clipboard::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 10px;
    border: 3px solid rgba(0,0,0,0.25);
    border-radius: 50%;
    background: transparent;
}

.aba-clipboard-paper {
    background: white;
    border-radius: var(--aba-radius);
    padding: 32px;
    box-shadow: var(--aba-shadow-sm);
    position: relative;
    min-height: 300px;
    border: 1px solid #e8e0d0;
}

.aba-clipboard-lines {
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 27px,
        #e8e2d2 27px,
        #e8e2d2 28px
    );
    padding-top: 8px;
}

.aba-case-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--aba-navy);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--aba-pale-blue);
}

.aba-case-field {
    margin-bottom: 14px;
}

.aba-case-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--aba-navy);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 4px;
    opacity: 0.8;
}

.aba-case-field-value {
    font-size: 14px;
    color: var(--aba-gray-700);
    line-height: 1.65;
}

/* === PATIENT BED (OSCE) === */
.aba-patient-bed {
    position: relative;
    background: #f0f4f8;
    border-radius: var(--aba-radius);
    padding: 20px;
    margin: 16px 0;
    border: 1px solid var(--aba-border);
}

.aba-patient-avatar {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 10px;
    box-shadow: var(--aba-shadow-sm);
}

.aba-patient-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--aba-gray-600);
}

/* === MONITOR DISPLAY (OSCE) — Physiologic Display (compact, no-scroll) === */
.aba-monitor-display {
    background: #0a0a0c;
    border-radius: 8px;
    padding: 12px;
    border: 2px solid #1e1e24;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.aba-monitor-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #050507;
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', monospace;
    font-size: 10px;
    color: #fff;
}

.aba-monitor-alarm-boxes {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.aba-monitor-alarm {
    background: rgba(255,193,7,0.25);
    color: #ffc107;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
}

.aba-monitor-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    gap: 8px;
}

.aba-monitor-waveforms {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aba-monitor-wave {
    flex: 1 1 0;
    min-height: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aba-monitor-wave[data-color="green"] { color: #22c55e; }
.aba-monitor-wave[data-color="yellow"] { color: #eab308; }
.aba-monitor-wave[data-color="red"] { color: #ef4444; }
.aba-monitor-wave[data-color="white"] { color: #e5e7eb; }

.aba-monitor-wave-label {
    font-size: 18px;
    min-width: 50px;
    flex-shrink: 0;
}

.aba-monitor-canvas {
    flex: 1;
    min-width: 0;
    min-height: 20px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    background: rgba(0,0,0,0.3);
    border-radius: 2px;
}

.aba-monitor-values {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aba-monitor-param {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.aba-monitor-param-label {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
}

.aba-monitor-param .aba-monitor-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.aba-val-green { color: #22c55e; }
.aba-val-yellow { color: #eab308; }
.aba-val-red { color: #ef4444; }
.aba-val-white { color: #e5e7eb; }

.aba-monitor-mabp {
    font-size: 18px;
    font-weight: 600;
}

.aba-monitor-param-row {
    display: flex;
    gap: 8px;
}

.aba-monitor-param-row .aba-monitor-param { flex: 1; }

.aba-monitor-extra {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

.aba-monitor-nbp {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.aba-monitor-nbp .aba-monitor-value {
    font-size: 18px;
}

/* Large monitor in main area — compact overrides */
.aba-monitor-large .aba-monitor-screen {
    padding: 8px 12px;
    font-size: 10px;
}

.aba-monitor-large .aba-monitor-alarm-boxes {
    margin-bottom: 6px;
}

.aba-monitor-large .aba-monitor-alarm {
    padding: 2px 6px;
    font-size: 9px;
}

.aba-monitor-large .aba-monitor-layout {
    gap: 8px;
}

.aba-monitor-large .aba-monitor-wave-label {
    font-size: 18px;
    min-width: 50px;
}

.aba-monitor-large .aba-monitor-values {
    flex: 0 0 140px;
}

.aba-monitor-large .aba-monitor-param .aba-monitor-value {
    font-size: 22px;
}

.aba-monitor-large .aba-monitor-mabp {
    font-size: 18px;
}

.aba-monitor-large .aba-monitor-extra {
    font-size: 12px;
}

.aba-monitor-large .aba-monitor-nbp .aba-monitor-value {
    font-size: 18px;
}

.aba-monitor-value.critical {
    color: #ef4444;
    animation: aba-blink-critical 1s ease infinite;
}

.aba-monitor-placeholder {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 12px 8px;
}

@keyframes aba-blink-critical {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Monitor station 3-scenario flow */
.aba-monitor-flow {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
}

.aba-monitor-flow-case {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.aba-monitor-flow-sub-badge {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aba-monitor-case-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

.aba-monitor-flow-recording {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.aba-combined-tab-bar {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.aba-combined-tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.aba-combined-tab:hover {
    color: rgba(255,255,255,0.9);
}

.aba-combined-tab.active {
    color: rgba(255,255,255,1);
    border-bottom-color: #3b82f6;
}

.aba-monitor-display-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.aba-tee-viewer {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050507;
    border-radius: 8px;
}

.aba-tee-placeholder {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
}

.aba-tee-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.aba-monitor-flow-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 16px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.aba-monitor-answer-timer {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

.aba-monitor-flow-controls .aba-btn {
    padding: 10px 24px;
}

/* === ULTRASOUND EXAM SCREEN (Redesign) === */
/* Exam toolbar */
.aba-us-exam-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aba-us-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.aba-us-toolbar-badge {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.aba-us-toolbar-timer {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    font-variant-numeric: tabular-nums;
}
.aba-us-progress-pills {
    display: flex;
    align-items: center;
    gap: 4px;
}
.aba-us-pill {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    transition: background 0.2s, color 0.2s;
}
.aba-us-pill.active {
    background: #3b82f6;
    color: #fff;
}
.aba-us-pill.done {
    background: rgba(34,197,94,0.4);
    color: rgba(255,255,255,0.95);
}
.aba-us-toolbar-prompt {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    padding: 0 8px;
}
.aba-us-exam-toolbar .aba-us-next-task-btn {
    flex-shrink: 0;
}

/* Workspace */
.aba-us-workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin: 12px 0;
}
.aba-us-workspace-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.aba-us-placeholder-text {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}
/* Stage question card (sonusgplan) */
.aba-us-stage-question-wrap {
    padding: 20px;
}
.aba-us-stage-question-card {
    max-width: 420px;
    padding: 20px 24px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    text-align: center;
}
.aba-us-stage-question-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}
.aba-us-stage-question-text {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 10px;
}
.aba-us-stage-question-help {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}
@media (max-width: 640px) {
    .aba-us-stage-question-wrap {
        padding: 16px 12px;
    }
    .aba-us-stage-question-card {
        padding: 16px 18px;
    }
    .aba-us-stage-question-text {
        font-size: 15px;
    }
}
.aba-us-workspace-annotation {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Action dock */
.aba-us-action-dock {
    flex-shrink: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.aba-us-dock-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.aba-us-segmented-control {
    display: inline-flex;
    gap: 0;
    padding: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}
.aba-us-seg-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.aba-us-seg-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.aba-us-seg-btn.active {
    background: #3b82f6;
    color: #fff;
}
.aba-us-doppler-btn, .aba-us-axis-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.aba-us-doppler-btn:hover, .aba-us-axis-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.aba-us-doppler-btn.active, .aba-us-axis-btn.active {
    background: #3b82f6;
    color: #fff;
}
.aba-us-annotation-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
.aba-us-annotation-img-wrap {
    position: relative;
    max-width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}
.aba-us-annotation-zoom-inner {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    transform-origin: 0 0;
}
/* Zoom kontrolleri: resmin üst-sağ köşesi (Labels aşaması) */
.aba-us-labels-zoom-bar {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: stretch;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}
.aba-us-zoom-btn {
    box-sizing: border-box;
    min-width: 30px;
    min-height: 28px;
    padding: 0 6px;
    margin: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.aba-us-zoom-btn:last-child {
    border-right: none;
}
.aba-us-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.aba-us-zoom-btn:active {
    background: rgba(255, 255, 255, 0.2);
}
.aba-us-zoom-btn--reset {
    min-width: 34px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* Pinch/pan: yalnızca Labels aşamasında JS .aba-us-zoom-active ekler (touch-action + kaydırma alanı) */
.aba-us-annotation-img-wrap[data-us-labels-zoom].aba-us-zoom-active {
    overflow: auto;
    max-height: min(56vh, 520px);
    -webkit-overflow-scrolling: touch;
    touch-action: none;
}
.aba-us-annotation-img-wrap[data-us-labels-zoom].aba-us-zoom-active .aba-us-annotation-zoom-inner {
    will-change: transform;
}
.aba-us-point-inputs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}
@media (max-width: 600px) {
    .aba-us-point-inputs-grid {
        grid-template-columns: 1fr;
    }
}
.aba-us-annotation-img {
    max-width: 100%;
    display: block;
    border-radius: 6px;
}
.aba-us-points-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.aba-us-point-inputs {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}
.aba-us-point-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.aba-us-point-input-row label {
    min-width: 60px;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}
.aba-us-point-input-row input {
    flex: 1;
    max-width: 280px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    background: #fff;
    color: #000;
    pointer-events: auto !important;
    user-select: text;
    -webkit-user-select: text;
}
.aba-us-point-input-row input::placeholder {
    color: #666;
}

/* === ULTRASOUND STATION (Legacy) === */
.aba-ultrasound-station {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.aba-ultrasound-machine {
    width: 200px;
    background: #e5e7eb;
    border-radius: var(--aba-radius);
    padding: 12px;
    border: 2px solid #d1d5db;
    box-shadow: var(--aba-shadow-sm);
}

.aba-ultrasound-screen {
    width: 100%;
    height: 120px;
    background: #000;
    border-radius: 6px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.aba-ultrasound-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(100,200,255,0.1) 0%, transparent 70%);
}

/* Ultrasound Simulator (main area) */
.aba-ultrasound-simulator {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 16px;
    gap: 12px;
}

.aba-ultrasound-task-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
}

.aba-ultrasound-task-badge {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.aba-ultrasound-task-timer {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
}

.aba-ultrasound-transducer-bar {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.aba-us-transducer-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.aba-us-transducer-btn:hover {
    color: rgba(255,255,255,0.9);
}

.aba-us-transducer-btn.active {
    color: rgba(255,255,255,1);
    border-bottom-color: #3b82f6;
}

.aba-us-patient-position-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 6px 0;
}
.aba-us-ctrl-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}
.aba-us-position-btns {
    display: flex;
    gap: 6px;
}
.aba-us-position-btn {
    padding: 6px 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    cursor: pointer;
}
.aba-us-position-btn:hover {
    background: rgba(255,255,255,0.15);
}
.aba-us-position-btn.active {
    background: rgba(59,130,246,0.4);
    border-color: #3b82f6;
    color: #fff;
}

.aba-us-overlay-mode {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aba-us-overlay-mode[aria-hidden="true"] { visibility: hidden; }
.aba-us-needle-target, .aba-us-color-flow {
    align-items: center;
    justify-content: center;
}
.aba-us-target-marker {
    font-size: 24px;
    color: rgba(255,100,100,0.8);
    font-weight: 700;
}
.aba-us-cf-marker {
    font-size: 11px;
    padding: 4px 8px;
    background: rgba(100,200,255,0.5);
    color: #fff;
    border-radius: 4px;
}

.aba-ultrasound-probe-area {
    flex-shrink: 0;
    padding: 8px 0;
}

.aba-us-anatomy-silhouette {
    position: relative;
    width: 100%;
    height: 80px;
    background: linear-gradient(135deg, rgba(40,50,60,0.9) 0%, rgba(30,40,50,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    cursor: crosshair;
}

.aba-us-probe {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    background: #3b82f6;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 4px;
    cursor: grab;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.aba-us-probe:active {
    cursor: grabbing;
}

.aba-us-anatomy-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.aba-ultrasound-screen-wrap {
    flex: 1;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #050507;
    border-radius: 8px;
}

.aba-ultrasound-simulator .aba-ultrasound-screen {
    position: relative;
    flex: 1;
    min-height: 200px;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aba-us-screen-placeholder {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.aba-us-screen-image,
.aba-us-bmode-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.aba-us-bmode-canvas {
    display: block;
    background: #000;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.aba-ultrasound-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.aba-us-overlay-action-bar .aba-us-overlay-action-btn.active {
    background: rgba(34,197,94,0.4);
    border-color: #22c55e;
}

.aba-us-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aba-us-control-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    min-width: 48px;
}

.aba-us-slider {
    width: 100px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.aba-us-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
}

.aba-us-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
}

.aba-us-next-task-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 13px;
}

.aba-btn-freeze-active {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.aba-us-structure-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.aba-us-structure-overlay-visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.aba-us-structure-panel {
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 100%;
}

.aba-us-structure-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 10px;
}

.aba-us-structure-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aba-us-structure-btn {
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.aba-us-structure-btn:hover {
    background: rgba(255,255,255,0.15);
}

.aba-us-structure-btn.identified {
    background: rgba(34,197,94,0.3);
    border-color: #22c55e;
}

/* === LOBBY (fullscreen bg + centered card) === */
.aba-lobby-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.aba-lobby-header {
    background: #2d3238;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}


.aba-lobby-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Fullscreen background image */
.aba-lobby-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.aba-lobby-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* SOE Preparation Phase — fullscreen background, no page scroll */
.aba-soe-prep-view {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.aba-soe-prep-bg {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    z-index: 0;
}

.aba-soe-prep-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
}

.aba-soe-prep-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Compact header — lobby style */
.aba-prep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px 10px 20px;
    min-height: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.aba-prep-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aba-prep-header-left > div {
    line-height: 1.2;
}

.aba-prep-header-left .aba-header-logo-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
}

.aba-prep-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.98);
    margin: 0 0 0 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.aba-prep-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.2;
}

.aba-prep-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aba-prep-phase-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.aba-prep-phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: aba-pulse-dot 2s ease infinite;
}

/* Body — flex fill, no scroll */
.aba-prep-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 20px;
}

.aba-prep-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.aba-prep-badges {
    display: flex;
    gap: 8px;
}

.aba-badge-prep {
    background: rgba(251, 191, 36, 0.25);
    color: rgba(254, 243, 199, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

/* Case card — white 30% transparent, backdrop blur so bg shows through */
.aba-prep-case-card {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.aba-prep-case-inner {
    padding: 20px 24px 24px;
}

/* Case content — dark text for contrast on glass background */
.aba-prep-case-inner .aba-clipboard-lines {
    background: none;
    padding: 0;
}

.aba-prep-case-inner .aba-case-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.aba-prep-case-inner .aba-case-field {
    margin-bottom: 14px;
    padding-left: 12px;
    border-left: 3px solid rgba(255, 255, 255, 0.5);
}

.aba-prep-case-inner .aba-case-field:last-child {
    margin-bottom: 0;
}

.aba-prep-case-inner .aba-case-field-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.aba-prep-case-inner .aba-case-field-value {
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
}

/* Case prep tabs — spaced pills (SOE + OSCE stem) */
.aba-case-tabs-wrap {
    width: 100%;
}

.aba-case-tabs-wrap .aba-case-title {
    margin-bottom: 12px;
}

.aba-case-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px;
    background: rgba(30, 41, 59, 0.45);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.aba-case-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px 12px;
    min-height: 44px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    color: rgba(255, 255, 255, 0.88);
    flex: 0 0 auto;
}

.aba-case-tab:hover {
    color: #fff;
    background: rgba(51, 65, 85, 0.75);
    border-color: rgba(255, 255, 255, 0.16);
}

.aba-case-tab.active {
    color: #fff;
    background: #334155;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.aba-case-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.aba-case-tab-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.aba-case-tab.active .aba-case-tab-icon svg {
    stroke: #fff;
}

.aba-case-tab-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.aba-case-tab-panels {
    width: 100%;
}

.aba-case-tab-panel {
    display: none;
}

.aba-case-tab-panel.active {
    display: block;
}

.aba-case-empty {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

/* Footer — info + button */
.aba-prep-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    flex-shrink: 0;
}

.aba-prep-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.aba-prep-info-icon {
    flex-shrink: 0;
}

.aba-btn-prep-primary {
    width: 100%;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #003087 !important;
    padding: 14px 24px !important;
    font-weight: 600;
    border-radius: 10px;
}

.aba-btn-prep-primary:hover {
    background: #fff !important;
}

/* SOE Prep view: no page scroll — only case card scrolls internally */
#aba-view-soe-prep.aba-view {
    overflow: hidden;
    height: 100%;
}

/* OSCE Prep view: same structure as SOE prep — pixel bg, overlay, tabbed content */
.aba-osce-prep-view {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.aba-osce-prep-bg {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    z-index: 0;
}

.aba-osce-prep-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
}

.aba-osce-prep-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#aba-view-osce-prep.aba-view {
    overflow: hidden;
    height: 100%;
}

.aba-osce-prep-content .aba-phase-timer-bar {
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.aba-osce-prep-content .aba-phase-timer-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
}

/* OSCE Corridor view: full page below header, no scroll */
#aba-view-osce-corridor.aba-view {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Do not set min-height:0 here — it overrides .aba-view min-height:100% and can collapse the view */
}

#aba-view-osce-corridor .aba-header {
    flex-shrink: 0;
}

/* Simulator / landing: fill below header (avoid fixed top:64px vs multi-line header) */
#aba-view-osce-corridor .aba-osce-corridor-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    background: #1a1410;
}

#aba-view-osce-corridor .aba-osce-corridor-full {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #1a1410;
}

/* Corridor scene uses only abs-positioned layers — no in-flow height; keep a floor + flex-grow */
#aba-view-osce-corridor .aba-osce-corridor-full > .aba-corridor {
    flex: 1 1 0%;
    min-height: 350px;
    width: 100%;
    position: relative;
    /* Override .aba-osce-corridor-full .aba-corridor { height:100% } — % + abs children = circular sizing on iOS; flex must assign main size */
    height: auto;
    align-self: stretch;
    max-height: none;
}

.aba-osce-corridor-wrap {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #1a1410;
}

.aba-osce-corridor-full {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.aba-osce-corridor-full .aba-corridor {
    flex: 1;
    min-height: 350px;
    height: 100%;
    border-radius: 0;
}

.aba-osce-corridor-full .aba-mt-4 {
    flex-shrink: 0;
}

.aba-soe-prep-content .aba-phase-timer-bar {
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.aba-soe-prep-content .aba-phase-timer-fill {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
}

/* Centered content card on top of background */
.aba-lobby-content-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
}

.aba-lobby-card {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.aba-lobby-banner {
    text-align: center;
    margin-bottom: 20px;
}

.aba-lobby-banner-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 4px 0;
}

.aba-lobby-banner-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.aba-registration-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.98);
    margin: 0 0 8px 0;
}

.aba-registration-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.aba-registration-actions {
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

.aba-btn-lobby {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2328;
    border: none;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}

.aba-btn-lobby:hover {
    background: #fff;
}

.aba-wristband {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.aba-wristband-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
}

/* Lobby orientation — unique classes, dark card, white text */
.aba-lobby-orient {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent !important;
}

.aba-lobby-orient-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.aba-lobby-orient-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.38);
    font-size: 26px;
    line-height: 1;
}

.aba-lobby-orient-icon.osce {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.aba-lobby-orient-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.98);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.aba-lobby-orient-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
}

.aba-lobby-orient-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid rgba(251, 191, 36, 0.9);
    background: rgba(251, 191, 36, 0.12);
    font-size: 12px;
    color: rgba(254, 243, 199, 0.95);
}

.aba-lobby-orient-warning-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.aba-lobby-orient-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent !important;
}

.aba-lobby-orient-rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.45;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.aba-lobby-orient-rule-num {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.85);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aba-lobby-orient-actions {
    margin-top: 4px;
}

.aba-lobby-orient-actions .aba-btn-primary {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    color: #003087;
    padding: 14px 24px;
}

.aba-lobby-orient-actions .aba-btn-primary:hover {
    background: #fff;
}

/* Legacy class for JS that might target .aba-registration-table */
.aba-registration-table {
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 28px 24px;
}

/* === BREAK AREA (SOE → OSCE) === */
.aba-break-area {
    text-align: center;
    padding: 64px 32px;
    max-width: 600px;
    margin: 0 auto;
}

.aba-break-icons {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin: 36px 0;
}

.aba-break-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.aba-break-icon-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--aba-ice);
    border: 2px solid var(--aba-pale-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: var(--aba-shadow);
    transition: transform 0.2s ease;
}

.aba-break-icon:hover .aba-break-icon-circle {
    transform: translateY(-3px);
}

.aba-break-icon-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--aba-gray-600);
}

/* === RESULTS — Glass / SOE-prep style === */
.aba-results-view {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.aba-results-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.aba-results-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 32px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.aba-btn-results-back {
    background: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 8px;
}
.aba-btn-results-back:hover {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

/* Score hero */
.aba-results-score-hero {
    text-align: center;
    margin-bottom: 20px;
}

.aba-score-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: conic-gradient(
        rgba(255,255,255,0.85) calc(var(--score-pct) * 1%),
        rgba(255,255,255,0.12) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.aba-score-circle-inner {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aba-score-value {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.aba-score-label {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* Glass cards (same style as .aba-prep-case-card) */
.aba-results-glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 14px;
}

.aba-results-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.aba-results-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    margin: 0;
}

.aba-results-heading-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.aba-results-icon {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.92);
}

.aba-results-icon--heading {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
}

.aba-results-icon--domain {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
}

.aba-results-icon--feedback {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    max-width: 14px;
    max-height: 14px;
}

/* Two-column score cards */
.aba-results-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Score rows */
.aba-results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

.aba-results-row-last {
    border-bottom: none;
}

.aba-results-val {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* Domain items — 2-col grid on desktop to reduce scroll */
.aba-results-domains {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}

.aba-results-domain-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}

.aba-results-domain-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
}

.aba-results-domain-info {
    flex: 1;
    min-width: 0;
}

.aba-results-domain-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    margin-bottom: 4px;
}

.aba-results-domain-bar {
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    overflow: hidden;
}

.aba-results-domain-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.8));
    border-radius: 3px;
    transition: width 0.6s ease;
    width: 0%;
}

.aba-results-domain-item .aba-results-val {
    font-size: 14px;
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
}

/* Feedback blocks */
.aba-results-feedback-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.aba-results-feedback-block {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px;
}

.aba-results-feedback-green {
    border-left: 3px solid rgba(74, 222, 128, 0.7);
}

.aba-results-feedback-amber {
    border-left: 3px solid rgba(251, 191, 36, 0.7);
}

.aba-results-feedback-detail {
    margin-top: 0;
}

.aba-results-feedback-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.aba-results-feedback-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aba-results-feedback-block,
.aba-results-feedback-detail {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
}

.aba-results-view .aba-strength-item,
.aba-results-view .aba-improvement-item {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin-bottom: 6px;
}

.aba-results-view .aba-strength-item::before {
    color: rgba(74, 222, 128, 0.9);
}

.aba-results-view .aba-improvement-item::before {
    background: rgba(251, 191, 36, 0.3);
    color: rgba(251, 191, 36, 0.95);
}

#aba-view-results.aba-view {
    overflow: hidden;
    height: 100%;
}

/* Your Progress, Exam Readiness, Session Notes — content text white */
#aba-gamification-section {
    color: #fff;
}
#aba-gamification-section [id$="-display"] {
    color: var(--aba-gold, #d4a843) !important;
}
#aba-readiness-content {
    color: #fff;
}
#aba-session-note-input {
    color: #fff !important;
}
#aba-session-note-input::placeholder {
    color: rgba(255,255,255,0.5);
}
#aba-session-notes-list,
#aba-session-notes-list * {
    color: #fff;
}

/* Legacy fallback */
.aba-feedback-section {
    background: var(--aba-surface);
    border: 1px solid var(--aba-border);
    border-radius: var(--aba-radius-lg);
    padding: 20px;
    margin: 12px 0;
}

.aba-feedback-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--aba-navy);
    margin-bottom: 10px;
}

/* === Ultrasound Report (usgraporplani) === */
.aba-ultrasound-report-card {
    margin-top: 16px;
}
.aba-ultrasound-report-station {
    margin-bottom: 24px;
}
.aba-ultrasound-report-station:last-child {
    margin-bottom: 0;
}
.aba-ultrasound-report-station-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.aba-ultrasound-report-station-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.aba-ultrasound-report-station-score {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
}
.aba-ultrasound-report-station-summary {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    margin-bottom: 10px;
}
.aba-ultrasound-report-case-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.aba-ultrasound-report-chip {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.aba-ultrasound-report-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.aba-ultrasound-report-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}
.aba-ultrasound-report-tab:hover {
    color: rgba(255,255,255,0.9);
}
.aba-ultrasound-report-tab-active {
    color: #fff;
    border-bottom-color: var(--aba-gold, #d4a843);
}
.aba-ultrasound-report-panel {
    padding-top: 12px;
}
.aba-ultrasound-report-case-card {
    padding: 14px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.aba-ultrasound-report-case-header {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}
.aba-ultrasound-report-case-score {
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    margin-left: 6px;
}
.aba-ultrasound-report-snapshot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.aba-ultrasound-report-snapshot-chip {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 6px;
}
.aba-ultrasound-report-chip-correct {
    background: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
.aba-ultrasound-report-chip-incorrect {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}
.aba-ultrasound-report-chip-partial {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
.aba-ultrasound-report-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.aba-ultrasound-report-compare-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}
.aba-ultrasound-report-compare-body {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}
.aba-ultrasound-report-pre {
    margin: 0;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.aba-ultrasound-report-field {
    margin-bottom: 4px;
}
.aba-ultrasound-report-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}
.aba-ultrasound-report-markers {
    margin-bottom: 14px;
}
.aba-ultrasound-report-marker-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}
.aba-ultrasound-report-marker-table th,
.aba-ultrasound-report-marker-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aba-ultrasound-report-marker-table th {
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}
.aba-ultrasound-report-marker-table td {
    color: rgba(255,255,255,0.9);
}
.aba-ultrasound-report-result-ok {
    color: #4ade80;
}
.aba-ultrasound-report-result-miss {
    color: #fbbf24;
}
.aba-ultrasound-report-ai {
    margin-bottom: 12px;
}
.aba-ultrasound-report-ai-summary {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
    margin-bottom: 8px;
}
.aba-ultrasound-report-ai-correct {
    font-size: 12px;
    color: #4ade80;
    margin-bottom: 4px;
}
.aba-ultrasound-report-ai-missed {
    font-size: 12px;
    color: #fbbf24;
    margin-bottom: 4px;
}
.aba-ultrasound-report-ai-priority {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-top: 6px;
}
.aba-ultrasound-report-advisory {
    font-size: 12px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 6px;
    color: rgba(255,255,255,0.85);
    border-left: 3px solid rgba(59, 130, 246, 0.5);
}
@media (max-width: 640px) {
    .aba-ultrasound-report-compare {
        grid-template-columns: 1fr;
    }
    .aba-ultrasound-report-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .aba-ultrasound-report-marker-table th,
    .aba-ultrasound-report-marker-table td {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* Phase advance notices (SOE/OSCE chat + prep body); manual = button only, no countdown bar */
.aba-phase-advance-notice-wrap {
    margin: 10px 0;
    clear: both;
}

.aba-chat-system.aba-phase-advance-notice,
.aba-phase-advance-notice.aba-chat-system {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.92), rgba(22, 78, 99, 0.9));
    border: 1px solid rgba(147, 197, 253, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    line-height: 1.45;
}

.aba-prep-body > .aba-chat-system.aba-phase-advance-notice {
    margin-bottom: 12px;
}

.aba-phase-advance-notice-text {
    font-weight: 500;
}

.aba-phase-advance-notice--manual .aba-phase-next-btn {
    margin-top: 12px;
    width: 100%;
    max-width: 280px;
    display: block;
    box-sizing: border-box;
}

.aba-phase-advance-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.aba-phase-advance-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #38bdf8, #a78bfa);
    border-radius: 2px;
    animation: abaPhaseAdvanceBar 3s linear forwards;
}

@keyframes abaPhaseAdvanceBar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.aba-phase-stay-btn {
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.aba-phase-stay-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.aba-corridor-info-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(7, 15, 35, 0.72);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-size: 12px;
    line-height: 1.45;
}

.aba-door-status-badge {
    position: absolute;
    top: -28px;
    right: -4px;
    z-index: 5;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(7, 15, 35, 0.8);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.94);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.aba-door-lock-note {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    width: min(160px, 100%);
    text-align: center;
    font-size: 9px;
    line-height: 1.25;
    color: rgba(255,255,255,0.78);
}

.aba-door-frame.aba-door-locked {
    cursor: not-allowed;
    opacity: 0.58;
    filter: grayscale(0.55);
}

.aba-door-frame.aba-door-locked .aba-door-body {
    box-shadow: none;
}

.aba-door-frame.aba-door-locked .aba-door-read-btn {
    background: rgba(107, 114, 128, 0.88);
    cursor: not-allowed;
}