.mtc-header{width:min(95vw,75rem);max-width:75rem;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg);margin-bottom:var(--space-sm);flex-shrink:0}.mtc-logo{font-size:clamp(var(--font-size-xl),4vw + .5rem,var(--font-size-3xl));font-weight:800;font-style:italic;background:linear-gradient(135deg,var(--color-accent-primary) 0%,var(--color-accent-info) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;cursor:default;letter-spacing:-.02em}.header-controls{display:flex;align-items:center;gap:var(--space-md)}.mode-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:#28a74533;border:2px solid var(--color-accent-success);border-radius:2rem;font-weight:700;font-size:var(--font-size-sm);color:var(--color-accent-success);transition:all var(--transition-base)}.mode-badge-dot{width:.5rem;height:.5rem;background:var(--color-accent-success);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}body.test-mode-active .mode-badge{background:#0793d133;border-color:#0793d1;color:#0793d1}body.test-mode-active .mode-badge-dot{background:#0793d1}.mode-badge-text:after{content:"Practice"}body.test-mode-active .mode-badge-text:after{content:"Test"}body.mtc-mode-active .mode-badge{background:#9c27b033;border-color:#9c27b0;color:#9c27b0}body.mtc-mode-active .mode-badge-dot{background:#9c27b0}body.mtc-mode-active .mode-badge-text:after{content:"MTC"}body.mtc-practice-active .mode-badge{background:#e67e2226;border-color:#e67e22;color:#e67e22}body.mtc-practice-active .mode-badge-dot{background:#e67e22}body.mtc-practice-active .mode-badge-text:after{content:"MTC Practise"}.header-mode-switch{display:none;align-items:center;background-color:#eeeeeef2;padding:.2rem;border-radius:1.5rem;box-shadow:var(--shadow-sm);gap:0}.header-mode-switch .mode-segment{font-size:var(--font-size-xs);font-weight:700;color:#666;padding:.4rem .75rem;cursor:pointer;transition:all var(--transition-base);background:transparent;border:none;border-radius:1.25rem;white-space:nowrap}.header-mode-switch .mode-segment:hover:not(.active){color:#333;background:#0000000d}.header-mode-switch .mode-segment.active{color:#fff;background:linear-gradient(135deg,var(--color-accent-success) 0%,#3ea55f 100%);box-shadow:0 2px 4px #0003}.header-mode-switch .mode-segment.active[data-mode=test]{background:linear-gradient(135deg,#0793d1,#2980b9)}.header-mode-switch .mode-segment.active[data-mode=mtc]{background:linear-gradient(135deg,#9c27b0,#7b1fa2)}.header-class-switch{display:none;align-items:center}.header-class-switch select{font-size:var(--font-size-xs);font-weight:700;padding:.4rem 1.8rem .4rem .65rem;border-radius:1.5rem;border:none;cursor:pointer;white-space:nowrap;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:10px 6px;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}body:not(.light-mode) .header-class-switch select{background-color:#32323cf2;color:#ddd;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E")}body:not(.light-mode) .header-class-switch select:hover{background-color:#3c3c4bf2}body.light-mode .header-class-switch select{background-color:#cbd5e1b3;color:#334155}body.light-mode .header-class-switch select:hover{background-color:#cbd5e1e6}body:not(.light-mode) .header-mode-switch{background-color:#32323cf2}body:not(.light-mode) .header-mode-switch .mode-segment{color:#aaa}body:not(.light-mode) .header-mode-switch .mode-segment:hover:not(.active){color:#ddd;background:#ffffff1a}body:not(.light-mode) .header-mode-switch .mode-segment.active{color:#fff}body.light-mode .header-mode-switch{background-color:#cbd5e1b3}body.light-mode .header-mode-switch .mode-segment{color:#475569}body.light-mode .header-mode-switch .mode-segment:hover:not(.active){color:#1e293b;background:#ffffff80}body.light-mode .header-mode-switch .mode-segment.active{color:#fff}.user-menu{position:relative}.user-menu-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--seat-bg);border:2px solid var(--border-color);border-radius:2rem;color:var(--text-color-primary);font-weight:600;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.user-menu-btn:hover{border-color:var(--color-accent-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.user-icon{font-size:1.25rem}.user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-arrow{font-size:.625rem;transition:transform var(--transition-base)}.user-menu.open .menu-arrow{transform:rotate(180deg)}.user-dropdown{position:absolute;top:calc(100% + var(--space-xs));right:0;min-width:180px;background:var(--seat-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px solid var(--border-color);border-radius:var(--space-md);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-base);z-index:1000;overflow:hidden}.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:none;color:var(--text-color-primary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background var(--transition-fast);text-align:left}.dropdown-item:hover{background:#ffffff1a}.dropdown-icon{font-size:1.125rem;width:1.5rem;text-align:center}.dropdown-divider{height:1px;background:var(--border-color);margin:var(--space-xs) 0}#darkModeToggle .icon-moon{display:none}#darkModeToggle .icon-sun,body.light-mode #darkModeToggle .icon-moon{display:inline}body.light-mode #darkModeToggle .icon-sun,#performanceModeToggle .icon-perf-on,#performanceModeToggle .perf-text-on{display:none}#performanceModeToggle .icon-perf-off,#performanceModeToggle .perf-text-off{display:inline}body.reduced-motion #performanceModeToggle .icon-perf-off,body.reduced-motion #performanceModeToggle .perf-text-off{display:none}body.reduced-motion #performanceModeToggle .icon-perf-on,body.reduced-motion #performanceModeToggle .perf-text-on{display:inline}#authBtn .icon-login{display:none}#authBtn .icon-logout,body.logged-out #authBtn .icon-login{display:inline}body.logged-out #authBtn .icon-logout,.admin-only{display:none}body:not(.logged-out):not(.pupil-mode) .header-mode-switch{display:flex}body:not(.logged-out):not(.pupil-mode) .mode-badge{display:none}body.logged-out .header-mode-switch,body.pupil-mode .header-mode-switch{display:none}body.logged-out .mode-badge,body.pupil-mode .mode-badge{display:flex}body:not(.logged-out) .admin-only{display:flex}body:not(.logged-out) .dropdown-divider.admin-only{display:block}body:has(.test-screen.active) .mtc-header,body:has(.finish-screen.active) .mtc-header,body:has(.pupil-home-screen.active) .mtc-header{display:none}body:has(.class-login-overlay[style*=flex]) .mtc-header{display:none}
