/* MyEFB v0.17.0 — unified modern EFB design system
   Canonical final visual layer for Home, Performance, Checklists, Settings and Account. */

:root{
  --efb-page:#f4f6f8;
  --efb-surface:#ffffff;
  --efb-surface-raised:#ffffff;
  --efb-surface-subtle:#eef1f5;
  --efb-surface-tonal:#e8edf3;
  --efb-text:#182230;
  --efb-muted:#667085;
  --efb-border:rgba(24,34,48,.12);
  --efb-hairline:rgba(24,34,48,.075);
  --efb-shadow-sm:0 1px 2px rgba(15,23,42,.055),0 3px 10px rgba(15,23,42,.035);
  --efb-shadow-md:0 2px 5px rgba(15,23,42,.06),0 14px 34px rgba(15,23,42,.09);
  --efb-shadow-float:0 8px 22px rgba(15,23,42,.10),0 28px 64px rgba(15,23,42,.12);
  --efb-radius-xs:10px;
  --efb-radius-sm:12px;
  --efb-radius-md:16px;
  --efb-radius-lg:20px;
  --efb-radius-xl:24px;
  --efb-control-height:48px;
  --efb-glass:rgba(255,255,255,.78);
  --efb-glass-strong:rgba(255,255,255,.9);
  --efb-focus:color-mix(in srgb,var(--primary) 42%,transparent);
  --efb-motion:cubic-bezier(.2,.75,.2,1);
}

@supports(color:oklch(60% .1 250)){
  :root{
    --efb-page:oklch(97.2% .007 250);
    --efb-surface:oklch(99.2% .003 250);
    --efb-surface-raised:oklch(100% 0 0);
    --efb-surface-subtle:oklch(95.4% .008 250);
    --efb-surface-tonal:oklch(93.4% .011 250);
    --efb-text:oklch(24% .025 255);
    --efb-muted:oklch(52% .025 255);
    --efb-border:color-mix(in oklch,var(--efb-text) 13%,transparent);
    --efb-hairline:color-mix(in oklch,var(--efb-text) 8%,transparent);
    --efb-focus:color-mix(in oklch,var(--primary) 42%,transparent);
  }
}

html{
  min-height:100%;
  font-size:18px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-gutter:stable;
  background:var(--efb-page);
  color-scheme:light;
}
html[data-theme="light"]{background:#f4f6f8;color-scheme:light}
html[data-theme="dark"]{background:#090a0c!important;color-scheme:dark;scrollbar-color:#59616d #090a0c}
html[data-theme="dark"]::-webkit-scrollbar-track{background:#090a0c}
html[data-theme="dark"]::-webkit-scrollbar-thumb{background:#4b535e;border:3px solid #090a0c;border-radius:999px}
body{
  min-height:100dvh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.menuHeaderInstalled{
  --page:var(--efb-page);
  --surface:var(--efb-surface);
  --surface-solid:var(--efb-surface-raised);
  --surface-2:var(--efb-surface-subtle);
  --input-bg:var(--efb-surface);
  --output-bg:var(--efb-surface);
  --text:var(--efb-text);
  --muted:var(--efb-muted);
  --border:var(--efb-border);
  --hairline:var(--efb-hairline);
  color:var(--efb-text);
  line-height:1.42;
  background:
    radial-gradient(70rem 34rem at 50% -20rem,color-mix(in srgb,var(--primary) 7%,transparent),transparent 68%),
    var(--efb-page)!important;
}

body[data-theme="dark"]{
  --efb-page:#090a0c;
  --efb-surface:#14161a;
  --efb-surface-raised:#191b20;
  --efb-surface-subtle:#202329;
  --efb-surface-tonal:#292d35;
  --efb-text:#f4f6f8;
  --efb-muted:#a3a9b3;
  --efb-border:rgba(255,255,255,.115);
  --efb-hairline:rgba(255,255,255,.075);
  --efb-shadow-sm:0 1px 2px rgba(0,0,0,.34),0 4px 12px rgba(0,0,0,.18);
  --efb-shadow-md:0 2px 7px rgba(0,0,0,.32),0 16px 36px rgba(0,0,0,.28);
  --efb-shadow-float:0 10px 26px rgba(0,0,0,.34),0 30px 72px rgba(0,0,0,.38);
  --efb-glass:rgba(18,20,24,.8);
  --efb-glass-strong:rgba(20,22,27,.92);
}
@supports(color:oklch(60% .1 250)){
  body[data-theme="dark"]{
    --efb-page:oklch(16% .008 255);
    --efb-surface:oklch(21% .01 255);
    --efb-surface-raised:oklch(23.5% .011 255);
    --efb-surface-subtle:oklch(27% .012 255);
    --efb-surface-tonal:oklch(31% .014 255);
    --efb-text:oklch(96% .006 250);
    --efb-muted:oklch(72% .015 250);
    --efb-border:color-mix(in oklch,var(--efb-text) 13%,transparent);
    --efb-hairline:color-mix(in oklch,var(--efb-text) 8%,transparent);
  }
}

:where(button,input,select,textarea){font:inherit}
:where(button,a,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
:where(button,[role="button"],summary){touch-action:manipulation}
:where(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--efb-focus)!important;
  outline-offset:2px;
}
::selection{background:color-mix(in srgb,var(--primary) 22%,transparent)}
.hidden{display:none!important}

/* Floating app chrome: translucency is intentionally limited to navigation surfaces. */
body.menuHeaderInstalled .menuToggle,
body.menuHeaderInstalled .compactBrand,
body.menuHeaderInstalled .efbHomeButton{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-glass-strong)!important;
  color:var(--efb-text)!important;
  box-shadow:var(--efb-shadow-md)!important;
  backdrop-filter:saturate(150%) blur(22px)!important;
  -webkit-backdrop-filter:saturate(150%) blur(22px)!important;
}
body.menuHeaderInstalled .menuToggle{width:46px!important;height:46px!important}
body.menuHeaderInstalled .compactBrand{height:46px!important}
body.menuHeaderInstalled .efbHomeButton{
  min-width:112px!important;
  height:48px!important;
  border-radius:24px!important;
}
body[data-efb-app="calculator"] .efbHomeButton{
  top:max(9px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  bottom:auto!important;
  left:auto!important;
  min-width:104px!important;
  transform:none!important;
}
body.menuHeaderInstalled .appMenu{
  background:var(--efb-glass-strong)!important;
  border-right:1px solid var(--efb-border)!important;
  box-shadow:var(--efb-shadow-float)!important;
  backdrop-filter:saturate(155%) blur(30px)!important;
  -webkit-backdrop-filter:saturate(155%) blur(30px)!important;
}
body.menuHeaderInstalled .appMenuNavButton{
  min-height:54px;
  border-radius:var(--efb-radius-md)!important;
  transition:background .16s var(--efb-motion),transform .16s var(--efb-motion);
}
body.menuHeaderInstalled .appMenuNavButton.active{
  background:color-mix(in srgb,var(--primary) 11%,var(--efb-surface))!important;
  color:var(--primary)!important;
}
body.menuHeaderInstalled .appMenuNavIcon{
  border-radius:var(--efb-radius-sm)!important;
  background:var(--efb-surface-subtle)!important;
}
body.menuHeaderInstalled .appMenuNavCopy strong{font-size:.94rem}
body.menuHeaderInstalled .appMenuNavCopy small{font-size:.74rem;line-height:1.3}

/* Home / app picker */
body[data-efb-app="home"] .efbHomeMain{max-width:1120px}
.myEfbHomeBrand{gap:11px!important;margin-bottom:32px!important}
.myEfbHomeBrandMark{
  width:88px!important;
  height:88px!important;
  border-radius:var(--efb-radius-xl)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:linear-gradient(145deg,#248cff,#076be3)!important;
  box-shadow:0 2px 3px rgba(0,0,0,.12),0 12px 26px rgba(18,80,160,.18),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
.myEfbHomeBrandMark::after{border-radius:20px!important}
.myEfbHomeBrand>strong{font-size:1.76rem!important;font-weight:800!important;letter-spacing:-.045em!important}
.efbSectionHeading h1{font-size:1.22rem!important;font-weight:800;letter-spacing:-.03em!important}
.efbAppHint{font-size:.76rem!important;font-weight:650!important}
.efbAppTile{gap:10px!important}
.efbAppIcon{
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.13),0 9px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.38)!important;
  transition:transform .18s var(--efb-motion),box-shadow .18s var(--efb-motion)!important;
}
.efbAppIcon::before{border-radius:19px!important}
.efbAppLabel{font-size:.86rem!important;font-weight:740!important;letter-spacing:-.015em!important}
.efbCornerDock{
  border-radius:var(--efb-radius-lg)!important;
  background:color-mix(in srgb,var(--efb-surface) 78%,transparent)!important;
}
@media(hover:hover) and (pointer:fine){
  .efbAppTile:hover .efbAppIcon{transform:translateY(-3px) scale(1.015)!important;box-shadow:0 2px 3px rgba(0,0,0,.13),0 14px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.4)!important}
}

/* Shared cards, controls and text rhythm */
body.menuHeaderInstalled .settingsCard,
body.menuHeaderInstalled .libraryAircraft,
body.menuHeaderInstalled .userRow,
body.menuHeaderInstalled .sessionRow,
body.menuHeaderInstalled .manualRunwayBlock{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-lg)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body.menuHeaderInstalled input:not([type="range"]),
body.menuHeaderInstalled select,
body.menuHeaderInstalled textarea,
body.menuHeaderInstalled .dateControl{
  min-height:var(--efb-control-height);
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-sm)!important;
  background:var(--efb-surface-raised)!important;
  color:var(--efb-text)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body.menuHeaderInstalled input:not([type="range"]):focus,
body.menuHeaderInstalled select:focus,
body.menuHeaderInstalled textarea:focus,
body.menuHeaderInstalled .dateControl:focus-within{
  border-color:color-mix(in srgb,var(--primary) 52%,var(--efb-border))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent)!important;
}
body.menuHeaderInstalled label{font-size:.76rem!important;font-weight:680}
body.menuHeaderInstalled .fieldUnit{font-size:.72rem!important}
body.menuHeaderInstalled .eyebrow{font-size:.72rem!important;font-weight:800;letter-spacing:.09em}
body.menuHeaderInstalled .fieldNote{font-size:.72rem!important;line-height:1.45}
body.menuHeaderInstalled .settingsStatus{font-size:.78rem!important}

/* Consistent button geometry */
body.menuHeaderInstalled .primaryButton,
body.menuHeaderInstalled .settingsPrimary,
body.menuHeaderInstalled .secondaryButton,
body.menuHeaderInstalled .settingsSecondary,
body.menuHeaderInstalled .backButton{
  min-height:46px!important;
  border-radius:var(--efb-radius-sm)!important;
  box-shadow:none!important;
  transition:transform .14s var(--efb-motion),filter .14s var(--efb-motion),background .14s var(--efb-motion)!important;
}
body.menuHeaderInstalled .primaryButton,
body.menuHeaderInstalled .settingsPrimary{
  border:1px solid color-mix(in srgb,var(--primary) 82%,#000)!important;
  background:var(--primary)!important;
  color:#fff!important;
}
body.menuHeaderInstalled .secondaryButton,
body.menuHeaderInstalled .settingsSecondary,
body.menuHeaderInstalled .backButton{
  border:1px solid var(--efb-border)!important;
  background:var(--efb-surface)!important;
  color:var(--efb-text)!important;
}
@media(hover:hover) and (pointer:fine){
  body.menuHeaderInstalled .primaryButton:hover,
  body.menuHeaderInstalled .settingsPrimary:hover{filter:brightness(1.045)}
  body.menuHeaderInstalled .secondaryButton:hover,
  body.menuHeaderInstalled .settingsSecondary:hover,
  body.menuHeaderInstalled .backButton:hover{background:var(--efb-surface-subtle)!important}
}
body.menuHeaderInstalled .primaryButton:active,
body.menuHeaderInstalled .settingsPrimary:active,
body.menuHeaderInstalled .secondaryButton:active,
body.menuHeaderInstalled .settingsSecondary:active{transform:scale(.985)!important}

/* Performance: one hierarchy, one segmented navigation surface. */
body.menuHeaderInstalled .appMain{container-type:inline-size}
body.menuHeaderInstalled .performanceSwitcher.card{
  gap:5px!important;
  padding:5px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-lg)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body.menuHeaderInstalled .performanceTab{
  min-height:58px;
  padding:7px 10px!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.menuHeaderInstalled .performanceTab.active{
  background:var(--primary)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(var(--primary-rgb),.19)!important;
}
body.menuHeaderInstalled .performanceTab:not(.active):not(:disabled):hover{background:var(--efb-surface-subtle)!important}
body.menuHeaderInstalled .performanceTabIcon{
  border-radius:11px!important;
  background:var(--efb-surface-subtle)!important;
  box-shadow:none!important;
}
body.menuHeaderInstalled .performanceTab.active .performanceTabIcon{background:rgba(255,255,255,.94)!important;color:var(--primary)!important}
body.menuHeaderInstalled .performanceTab strong{font-size:.88rem!important}
body.menuHeaderInstalled .performanceTab small{font-size:.7rem!important}

body #setupPhase .routeField,
body #setupPhase .weightPlanner{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body #setupPhase .routeField{padding:0!important}
body #setupPhase .weightPlanner{padding:14px 0 0!important}
body #setupPhase .manualRunwayBlock{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body .routeFieldTitle{font-size:.76rem!important;font-weight:760!important}
body .manualRunwayHeader .routeFieldTitle{font-size:.76rem!important}
body .manualControl>span,
body .manualControlTopline>label{font-size:.7rem!important}
body .manualControl input,
body .manualControl select{height:44px!important;border-radius:var(--efb-radius-sm)!important}
body .routeReverseButton{
  width:42px!important;
  height:42px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:50%!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body .routeModeToggle,
body .timeModeToggle,
body .unitToggle{
  gap:3px!important;
  padding:3px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-sm)!important;
  background:var(--efb-surface-subtle)!important;
  box-shadow:none!important;
}
body .routeModeToggle button,
body .timeModeToggle button,
body .unitToggle button{
  min-height:34px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--efb-muted)!important;
}
body .routeModeToggle button.active,
body .routeModeToggle button[aria-pressed="true"],
body .timeModeToggle button.active,
body .unitToggle button.active{
  background:var(--efb-surface-raised)!important;
  color:var(--primary)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body .eobtNow{
  min-width:58px!important;
  min-height:38px!important;
  padding:0 12px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-xs)!important;
  background:var(--efb-surface)!important;
  color:var(--primary)!important;
  box-shadow:var(--efb-shadow-sm)!important;
  font-size:.72rem!important;
  font-weight:760!important;
}
body .eobtNow:hover{background:var(--efb-surface-subtle)!important}
body .routeActions .calculateButton{
  width:min(100%,560px)!important;
  min-height:52px!important;
  border-radius:var(--efb-radius-md)!important;
  box-shadow:0 7px 18px rgba(var(--primary-rgb),.18)!important;
}
body .weightRange::-webkit-slider-runnable-track,
body .weightRange::-moz-range-track{background:var(--efb-surface-tonal)!important}
body .weightRange::-webkit-slider-thumb,
body .weightRange::-moz-range-thumb{box-shadow:0 2px 8px rgba(15,23,42,.22)!important}

body .phaseCard.card{color:var(--efb-text)}
body .phaseHeader h2{font-size:1.16rem!important}
body .phaseHeader h2 small{font-size:.78rem!important}
body .timeChip,
body .sourceBadge{font-size:.72rem!important}
body .windReadout>div,
body .atmosphereReadout>div,
body .supportingResults>div,
body .calculationMetric,
body .calculationFlow .resultGrid>div,
body .calculationFlow .atmosphereReadout>div{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-sm)!important;
  background:var(--efb-surface)!important;
  box-shadow:none!important;
}
body .resultGrid span,
body .windReadout span,
body .atmosphereReadout span{font-size:.7rem!important}
body .supportingResults span{font-size:.68rem!important}
body .supportingResults strong{font-size:.96rem!important}
body .outputPanel>.permitBanner{
  min-height:64px!important;
  border-radius:var(--efb-radius-md)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body .outputPanel>.permitBanner span{font-size:.76rem!important}
body .outputPanel>.permitBanner strong{font-size:1.24rem!important}
body .calculationsHub>summary,
body .inputPanel>summary{
  min-height:50px!important;
  padding:11px 14px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
body .calculationsHub>summary{font-size:.82rem!important}
body #depInputs .panelHeading h3::after,
body #arrInputs .panelHeading h3::after{font-size:.96rem!important}
body .calculationFlowStep{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface)!important;
  box-shadow:none!important;
}
body .calculationStepCopy strong{font-size:.79rem!important}
body .calculationStepCopy small{font-size:.68rem!important}
body .calculationMetric span,
body .calculationFlow .resultGrid span,
body .calculationFlow .atmosphereReadout span{font-size:.65rem!important}
body .calculationMetric strong,
body .calculationFlow .resultGrid strong,
body .calculationFlow .atmosphereReadout strong{font-size:.84rem!important}
body .airportSuggestions{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-glass-strong)!important;
  box-shadow:var(--efb-shadow-float)!important;
}
body .airportSuggestion{min-height:48px!important;border-radius:var(--efb-radius-sm)!important}
body .airportSuggestion strong{font-size:.82rem!important}
body .airportSuggestion span{font-size:.76rem!important}

/* Checklists: category colour remains operationally prominent, chrome stays neutral. */
body[data-efb-app="checklists"]{
  --surface:var(--efb-surface);
  --surface-solid:var(--efb-surface-raised);
  --surface-2:var(--efb-surface-subtle);
  --text:var(--efb-text);
  --muted:var(--efb-muted);
  --border:var(--efb-border);
  --hairline:var(--efb-hairline);
  background:var(--efb-page)!important;
}
.checklistsMain{container-type:inline-size}
.checklistNavTitle h2,.checklistNavBar>h2{font-weight:800!important;letter-spacing:-.04em!important}
.checklistNavTitle p,.checklistGroupTitle p{font-size:.72rem!important}
.checklistNavAction,
.checklistBackButton{color:var(--primary)!important}
.checklistNavAction{min-height:44px!important;border-radius:var(--efb-radius-sm)!important}
.checklistGroupLibrary{gap:12px!important}
.checklistGroupCard{
  grid-template-columns:minmax(84px,auto) minmax(0,1fr) auto!important;
  min-height:78px!important;
  padding:12px 14px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
  transition:transform .16s var(--efb-motion),box-shadow .16s var(--efb-motion)!important;
}
.checklistGroupCard.abnormal{
  border-color:color-mix(in srgb,var(--warn) 28%,var(--efb-border))!important;
  background:color-mix(in srgb,var(--warn) 13%,var(--efb-surface))!important;
}
.checklistGroupCard.emergency{
  border-color:color-mix(in srgb,var(--bad) 30%,var(--efb-border))!important;
  background:color-mix(in srgb,var(--bad) 13%,var(--efb-surface))!important;
}
.checklistGroupMark{
  min-width:86px!important;
  height:40px!important;
  border-radius:var(--efb-radius-sm)!important;
  font-size:.74rem!important;
}
.checklistGroupCopy strong{font-size:1rem!important}
.checklistGroupCopy span{font-size:.74rem!important}
.checklistLibrary,
.activeChecklistList,
.checklistEditorGroup,
.checklistEditorItems{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
}
.checklistLibraryRow{
  min-height:66px!important;
  background:var(--efb-surface)!important;
  border-color:var(--efb-hairline)!important;
}
.checklistLibraryRow.abnormal{background:color-mix(in srgb,var(--warn) 16%,var(--efb-surface))!important}
.checklistLibraryRow.emergency{background:color-mix(in srgb,var(--bad) 16%,var(--efb-surface))!important}
.checklistLibraryOpen strong{font-size:.92rem!important}
.checklistLibraryMeta{font-size:.7rem!important}
.checklistPencil,.checklistResetButton,.checklistDeleteButton,.checklistReorderHandle{width:42px!important;height:42px!important;border-radius:var(--efb-radius-sm)!important}
.checklistAddRow{
  min-height:54px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface)!important;
  box-shadow:var(--efb-shadow-sm)!important;
  font-size:.82rem!important;
}
.activeChecklistSection{font-size:.68rem!important}
.checklistRunItem{
  min-height:72px!important;
  padding:11px 12px 11px 16px!important;
  border-color:var(--efb-hairline)!important;
}
.checklistRunItem.type-abnormal{background:#d99b32!important}
.checklistRunItem.type-emergency{background:#c93d47!important}
.checklistItemText strong{font-size:.9rem!important;line-height:1.28!important}
.checklistItemText span{font-size:.8rem!important;line-height:1.3!important}
.checklistCheckCircle{width:34px!important;height:34px!important}
.checklistTopActions button{min-height:34px!important;border-radius:var(--efb-radius-xs)!important;font-size:.72rem!important}
.checklistActionDock{
  padding:7px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-lg)!important;
  background:var(--efb-glass-strong)!important;
  box-shadow:var(--efb-shadow-float)!important;
  backdrop-filter:saturate(150%) blur(24px)!important;
  -webkit-backdrop-filter:saturate(150%) blur(24px)!important;
}
.checklistActionDock button{min-height:50px!important;border-radius:var(--efb-radius-sm)!important;font-size:.8rem!important}
.checklistDeferredBar{
  min-height:38px!important;
  border-radius:var(--efb-radius-sm)!important;
  font-size:.7rem!important;
}
.checklistEditorAddActions button{min-height:48px!important;border-radius:var(--efb-radius-sm)!important;font-size:.82rem!important}

/* Settings + account */
.settingsMain[data-app-page="settings"] .settingsContent{gap:22px!important}
.settingsSectionHeader h3{font-size:1.34rem!important;font-weight:800;letter-spacing:-.03em!important}
.settingsSectionHeader p{max-width:68ch;font-size:.84rem!important;line-height:1.5!important}
.settingsCard.compact{padding:20px!important}
.settingsCard .cardTitleRow h4{font-size:1rem!important}
.settingsCard .cardTitleRow p{font-size:.78rem!important;line-height:1.4}
.settingsPrimary,.settingsSecondary{font-size:.82rem!important}
.libraryGrid{gap:12px!important}
.libraryAircraft{padding:15px!important}
.libraryMeta div,.accountSummary div,.settingsStatus,.inviteOutput{
  border-radius:var(--efb-radius-sm)!important;
  background:var(--efb-surface-subtle)!important;
  box-shadow:none!important;
}
.libraryActions a,.libraryActions button,.userActions button{
  min-height:40px!important;
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-sm)!important;
  background:var(--efb-surface)!important;
  box-shadow:none!important;
}
.fileDrop{
  border-radius:var(--efb-radius-md)!important;
  background:var(--efb-surface-subtle)!important;
  box-shadow:none!important;
}
.accountProfileAvatar{border-radius:var(--efb-radius-md)!important;box-shadow:none!important}
.accountStateBadge,.libraryStatus{min-height:26px}
.sessionRow{padding:13px!important}

/* Authentication gets the same visual language without requiring the app shell. */
.authPage{
  --efb-page:#f4f6f8;
  --efb-surface:#fff;
  --efb-surface-subtle:#eef1f5;
  --efb-text:#182230;
  --efb-muted:#667085;
  --efb-border:rgba(24,34,48,.12);
  background:
    radial-gradient(44rem 28rem at 15% 0,color-mix(in srgb,#1479f8 12%,transparent),transparent 70%),
    var(--efb-page)!important;
  color:var(--efb-text)!important;
}
.authCard{
  border:1px solid var(--efb-border)!important;
  border-radius:var(--efb-radius-xl)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--efb-shadow-md)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.authTabs{border-radius:var(--efb-radius-md)!important;background:var(--efb-surface-subtle)!important}
.authTabs button{min-height:44px!important;border-radius:var(--efb-radius-sm)!important}
.authTabs button.active{box-shadow:var(--efb-shadow-sm)!important}
.authForm{gap:17px!important}
.authForm input{min-height:50px!important;border-radius:var(--efb-radius-sm)!important;box-shadow:none!important}
.authPrimary{min-height:50px!important;border-radius:var(--efb-radius-sm)!important;box-shadow:none!important}
.authBrandMark{border-radius:var(--efb-radius-md)!important;box-shadow:var(--efb-shadow-md)!important}

@media(prefers-color-scheme:dark){
  .authPage{
    --efb-page:#090a0c;
    --efb-surface:#17191d;
    --efb-surface-subtle:#22252b;
    --efb-text:#f4f6f8;
    --efb-muted:#a3a9b3;
    --efb-border:rgba(255,255,255,.12);
    --efb-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.22);
    --efb-shadow-md:0 2px 7px rgba(0,0,0,.38),0 18px 42px rgba(0,0,0,.34);
    background:#090a0c!important;
    color:var(--efb-text)!important;
  }
  .authCard{background:#17191d!important}
  .authTabs{background:#22252b!important}
  .authTabs button{color:#a3a9b3!important}
  .authTabs button.active{background:#2a2e35!important;color:#8fc3ff!important}
  .authForm p,.authForm label{color:#a3a9b3!important}
  .authForm input{background:#202329!important;border-color:rgba(255,255,255,.12)!important;color:#f4f6f8!important}
}

/* Component-responsive fallback in addition to viewport breakpoints. */
@container (max-width:760px){
  body #setupPhase .flightCard.detailsPage{grid-template-columns:1fr!important;gap:18px!important}
  body #setupPhase .aircraftHero{max-width:100%!important}
}
@container (max-width:560px){
  .performanceTab small{display:none!important}
  .performanceTab{min-height:52px!important}
  .checklistGroupCard{grid-template-columns:minmax(76px,auto) minmax(0,1fr) auto!important}
}

/* Small-screen readability and touch targets. */
@media(max-width:620px){
  html{font-size:18px}
  body.menuHeaderInstalled input:not([type="range"]),
  body.menuHeaderInstalled select,
  body.menuHeaderInstalled textarea{font-size:16px!important}
  body.menuHeaderInstalled .performanceSwitcher.card{border-radius:var(--efb-radius-md)!important;padding:4px!important}
  body.menuHeaderInstalled .performanceTab{min-height:50px;padding:5px 4px!important;border-radius:12px!important}
  body.menuHeaderInstalled .performanceTab strong{font-size:.72rem!important}
  .myEfbHomeBrandMark{width:80px!important;height:80px!important}
  .myEfbHomeBrand>strong{font-size:1.62rem!important}
  .efbAppLabel{font-size:.82rem!important}
  .checklistNavTitle h2{font-size:1.52rem!important}
  .checklistNavBarDetail{grid-template-columns:44px minmax(0,1fr) 122px!important}
  .checklistTopActions{width:122px!important}
  .checklistTopActions button{font-size:.68rem!important}
}
@media(max-width:380px){
  .checklistNavBarDetail{grid-template-columns:40px minmax(0,1fr) 112px!important}
  .checklistTopActions{width:112px!important}
  .checklistTopActions button{font-size:.64rem!important}
}

/* Accessibility preferences */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}
@media(prefers-reduced-transparency:reduce){
  body.menuHeaderInstalled .menuToggle,
  body.menuHeaderInstalled .compactBrand,
  body.menuHeaderInstalled .efbHomeButton,
  body.menuHeaderInstalled .appMenu,
  .checklistActionDock{background:var(--efb-surface-raised)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(prefers-contrast:more){
  :root{--efb-border:rgba(0,0,0,.28);--efb-hairline:rgba(0,0,0,.18)}
  body[data-theme="dark"]{--efb-border:rgba(255,255,255,.3);--efb-hairline:rgba(255,255,255,.2)}
  body.menuHeaderInstalled input:not([type="range"]),
  body.menuHeaderInstalled select,
  body.menuHeaderInstalled textarea{border-width:2px!important}
}
@media(forced-colors:active){
  .efbAppIcon,.myEfbHomeBrandMark,.permitBanner,.checklistRunItem{forced-color-adjust:auto}
  :where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid Highlight!important}
}