.ecg-mobile-nav{display:none}
@media(max-width:899px){
 body.ecg-has-mobile-nav{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
 .ecg-mobile-nav{position:fixed;z-index:10000;left:12px;right:12px;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;box-sizing:border-box;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));border:1px solid #485369;border-bottom:0;border-radius:22px 22px 0 0;background:rgba(13,20,34,.97);box-shadow:0 -8px 30px #0006;font-family:"Segoe UI",Arial,sans-serif}
 .ecg-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;min-width:0;padding:3px 0;border:0;border-radius:14px;color:#b7c1d2;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.2;text-transform:none;transition:background .16s,color .16s}
 .ecg-mobile-nav a[aria-current="page"]{color:var(--ecg-nav-active-text,#ffffff);background:var(--ecg-nav-active-bg,#21658e)}
 .ecg-mobile-nav a:active{background:var(--ecg-nav-press,#b78bff3d)}
 .ecg-mobile-nav a:focus-visible{outline:2px solid var(--ecg-nav-focus,#55b8ef);outline-offset:1px}
 .ecg-mobile-icon{display:grid;place-items:center;position:relative;width:25px;height:25px}
 .ecg-mobile-icon svg{width:23px;height:23px}
 .ecg-mobile-avatar{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--ecg-nav-avatar-border,#cbd5e2);border-radius:50%;background:var(--ecg-nav-avatar-bg,#192535);font-size:14px;color:var(--ecg-nav-avatar-text,#e1e7ee)}
 .ecg-mobile-nav [data-state="active"] .ecg-mobile-icon::after{content:"";position:absolute;right:-3px;top:0;width:6px;height:6px;border-radius:50%;background:#5cdeb8;border:2px solid #111827}
 body.ecg-has-mobile-nav .ecg-real-test{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
 body.ecg-mobile-keyboard .ecg-mobile-nav,body:has(dialog[open],.mobile-panel-fixed,.map-preview-layer,.planet-preview-layer.is-open) .ecg-mobile-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.ecg-mobile-nav a{transition:none}}

/* One mobile header shared by home, academy and account pages. */
.ecg-mobile-header-logo{display:none!important}
@media(max-width:899px){
 html body.ecg-has-mobile-nav>header.top,html body.ecg-has-mobile-nav>header.topbar{
  display:flex!important;align-items:center!important;justify-content:space-between;flex-wrap:nowrap!important;
  box-sizing:border-box!important;height:80px!important;min-height:80px!important;width:100%!important;max-width:none!important;
  margin:0!important;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))!important;
  border:0!important;border-bottom:1px solid #66839b45!important;border-radius:0!important;background:#09121e!important;gap:12px!important;
 }
 html body.ecg-has-mobile-nav>header .brand{display:flex!important;align-items:center!important;flex:0 0 112px!important;width:112px!important;height:56px!important;padding:0!important;margin:0!important;gap:0!important}
 html body.ecg-has-mobile-nav>header .brand>*{display:none!important}
 html body.ecg-has-mobile-nav>header .brand>img.ecg-mobile-header-logo{display:block!important;width:112px!important;height:56px!important;max-width:none!important;object-fit:contain!important;image-rendering:auto!important;filter:none!important;transform:none!important}
 html body.home-page.ecg-has-mobile-nav .account-preview{display:none!important}
}

@media(min-width:900px){
 html body>header.ecg-site-header{position:sticky!important;top:0!important;left:auto!important;right:auto!important;z-index:10000!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;height:80px!important;min-height:80px!important;margin:0!important;padding:8px max(24px,calc((100vw - 1200px)/2))!important;gap:20px!important;border:0!important;border-bottom:1px solid #66839b45!important;border-radius:0!important;background:#09121ef5!important;box-shadow:0 4px 20px #0002}
 html body>header.ecg-site-header .brand{display:flex!important;flex:0 0 128px!important;width:128px!important;height:64px!important;gap:0!important;margin:0!important;padding:0!important}
 html body>header.ecg-site-header .brand>*{display:none!important}
 html body>header.ecg-site-header .brand>img.ecg-mobile-header-logo{display:block!important;width:128px!important;height:64px!important;max-width:none!important;object-fit:contain!important;image-rendering:auto!important;filter:none!important;transform:none!important}
 .ecg-site-header .environment,.ecg-site-header .account-preview{display:none!important}
 .ecg-site-header .back{margin:0!important;white-space:nowrap;font:600 13px/1.2 'Segoe UI',Arial,sans-serif!important;letter-spacing:0!important;padding:12px!important;border:1px solid #748ba75c;border-radius:10px;color:#d8e4f2;background:#142233}
 .ecg-site-header .ecg-mobile-nav{display:flex;position:static;margin-left:auto;align-items:center;gap:8px;font-family:'Segoe UI',Arial,sans-serif}
 .ecg-mobile-nav a{display:flex;align-items:center;gap:9px;min-height:44px;box-sizing:border-box;padding:10px 15px;border:1px solid transparent;border-radius:12px;text-decoration:none;color:#bcc9dc;font-size:14px;font-weight:600;line-height:1.2;letter-spacing:0;white-space:nowrap;transition:background .18s,color .18s,transform .18s}
 .ecg-mobile-nav a:hover{color:#fff;background:var(--ecg-nav-hover,#55b8ef20);transform:translateY(-1px)}
 .ecg-mobile-nav a[aria-current=page]{color:var(--ecg-nav-active-text,#ffffff);border-color:var(--ecg-nav-active-border,#9cd5f580);background:var(--ecg-nav-active-bg,#21658e)}
 .ecg-mobile-nav a[data-nav=account]{border-color:#778dab4d;background:#1b283b}
 .ecg-mobile-nav a:focus-visible{outline:2px solid var(--ecg-nav-focus,#55b8ef);outline-offset:3px}
 .ecg-mobile-icon{display:grid;place-items:center;width:24px;height:24px}.ecg-mobile-icon svg{width:22px;height:22px}
 .ecg-mobile-avatar{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--ecg-nav-avatar-border,#cbd5e2);border-radius:50%;background:var(--ecg-nav-avatar-bg,#192535);color:var(--ecg-nav-avatar-text,#e1e7ee)}
}
@media(prefers-reduced-motion:reduce){.ecg-mobile-nav a{transition:none;transform:none!important}}
@media(min-width:900px){html body>header.ecg-site-header .back[href="account.php"]{display:none!important}}

/* Keep the cockpit frame entirely below the shared 80px header. */
@media(min-width:900px){
 html body.module-cockpit #academy-map:before,html body.module-cockpit .view-system,
 html body.unit-cockpit .cabin-unit-map,html body.lesson-cockpit .view-unit,
 html body.lesson-cockpit .view-unit:before,.cabin-travel-veil,.cabin-approach{top:80px!important}
}
@media(prefers-reduced-motion:no-preference){body>main{animation:ecg-page-arrive .18s ease-out both}}
@keyframes ecg-page-arrive{from{opacity:0}to{opacity:1}}

/* Accessible return control on legacy detail pages, desktop and mobile. */
html body.consistent-back>header.ecg-site-header a.back{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px!important;min-width:84px;padding:10px 12px!important;margin:0!important;border:1px solid #8195b34d!important;border-radius:10px!important;background:linear-gradient(#27364a,#182437)!important;color:#e5edfa!important;font:600 13px/1.3 'Segoe UI',Arial,sans-serif!important;letter-spacing:0!important;white-space:normal!important;text-align:center;text-decoration:none;max-width:180px;box-shadow:inset 0 1px #e0edff20,0 2px 0 #090f19}
html body.consistent-back>header.ecg-site-header a.back::before,html body.consistent-back>header.ecg-site-header a.back::after{content:none!important;display:none!important}
html body.consistent-back>header.ecg-site-header a.back:hover{background:var(--ecg-nav-back-hover,#35344c)!important;border-color:var(--ecg-nav-active-border,#b894db)!important}
html body.consistent-back>header.ecg-site-header a.back:focus-visible{outline:2px solid var(--ecg-nav-focus,#d0a6ff);outline-offset:3px}
