/* Vela English: a clear, shared navigation for every learning page. */
.learning-sync-status { font-size: 12px; line-height: 1.6; color: #456184; margin: 8px 0 14px; }
.learning-sync-status[data-state="offline"], .learning-sync-status[data-state="blocked"] { color: #a32935; }
.recovery-card { width: min(100%, 540px); margin: 48px auto; }
.recovery-card h1 { font-size: clamp(25px, 5vw, 34px); }
.recovery-card p { line-height: 1.9; }
.recovery-notice { background: #f0f4fc; padding: 18px; border-radius: 12px; }
@media (max-width: 760px) {
  .site-header.vela-header.is-compact { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 58px; }
  .vela-header.is-compact .brand-copy, .vela-header.is-compact .brand-logo-frame { display: none; }
  .vela-header.is-compact .brand { display: none; }
  .site-header.vela-header.is-compact .main-nav { flex: 1; width: auto; padding: 0; border: 0; background: transparent; }
  .site-header.vela-header.is-compact .main-nav .header-nav-link { font-size: 11px; min-height: 44px; padding: 7px; gap: 4px; }
  .vela-header.is-compact .header-account { margin: 0; padding: 0; border: 0; }
  .vela-header.is-compact .header-avatar { width: 36px; height: 36px; }
  .recovery-card { margin: 24px auto; padding: 23px; }
}
.site-header.vela-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  min-height: 102px;
  padding: 16px 24px;
  border: 1px solid #e0e6ef;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 5px 22px #10295707, 0 1px 3px #10295703;
  backdrop-filter: blur(20px);
}
.vela-header .brand { min-width: 0; width: fit-content; gap: 14px; text-decoration: none; }
.vela-header .brand-logo-frame { display: grid; place-items: center; flex-shrink: 0; padding: 4px; background: #fff; border: 1px solid #e0e6ef; border-radius: 14px; box-shadow: 0 3px 8px #10295709; }
.vela-header .brand-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 9px; }
.vela-header .brand-copy { display: flex; min-width: 0; gap: 0; }
.vela-header .brand-copy strong { font-size: 22px; font-weight: 750; line-height: 1.25; letter-spacing: -.045em; color: #142b55; white-space: nowrap; }
.vela-header .brand-copy strong::after { width: 19px; height: 13px; margin-left: 10px; box-shadow: 0 0 0 1px #1226490c; }
.vela-header .brand-copy small { margin-top: 5px; color: #617087; font-size: 12px; letter-spacing: .01em; }
.site-header.vela-header .main-nav { display: flex; flex-wrap: nowrap; gap: 4px; width: auto; justify-content: center; padding: 5px; border: 1px solid #e6ebf3; border-radius: 15px; background: #f5f7fb; }
.site-header.vela-header .main-nav .header-nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 16px; min-height: 46px; border: 1px solid transparent; border-radius: 10px; color: #55647c; font-size: 14px; font-weight: 650; line-height: 1.5; text-decoration: none; white-space: nowrap; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.vela-header .header-nav-link svg { width: 19px; height: 19px; flex-shrink: 0; }
.site-header.vela-header .main-nav .header-nav-link:hover { background: #eaf0f8; color: #16366c; }
.site-header.vela-header .main-nav .header-nav-link[aria-current] { color: #123574; background: #fff; border-color: #dce4f2; box-shadow: 0 2px 5px #14386b09; }
.vela-header .main-nav .header-nav-link[aria-current]::after { display: none; }
.vela-header .header-nav-link[aria-current] svg { color: #c52b3a; }
.header-account { position: relative; padding-left: 20px; border-left: 1px solid #e5eaf2; min-width: 0; }
.header-account > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; border-radius: 12px; list-style: none; cursor: pointer; color: #253c5f; }
.header-account > summary::-webkit-details-marker { display: none; }
.header-account > summary:hover, .header-account[open] > summary { background: #f4f7fc; }
.header-avatar { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid #cad8ee; border-radius: 50%; background: #ecf2fc; color: #16366c; font-size: 16px; font-weight: 750; box-shadow: 0 0 0 3px #fff; }
.header-account-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 650; white-space: nowrap; }
.header-chevron { width: 17px; height: 17px; color: #6e7e94; flex-shrink: 0; transition: transform .16s ease; }
.header-account[open] .header-chevron { transform: rotate(180deg); }
.header-account-panel { position: absolute; z-index: 80; top: calc(100% + 14px); right: 0; width: 248px; max-width: calc(100vw - 40px); padding: 20px; background: #fff; border: 1px solid #dfe6f1; border-radius: 16px; box-shadow: 0 16px 44px #142b551a, 0 3px 8px #142b5505; }
.header-account-caption { display: block; margin-bottom: 6px; color: #66758b; font-size: 12px; }
.header-account-panel > strong { display: block; color: #1c345a; font-size: 16px; overflow-wrap: anywhere; }
.header-account-panel form { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e8edf5; }
.header-signout { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; background: #fff4f5; color: #ad2333; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.header-signout:hover { background: #ffe9ec; }
.header-signout svg { width: 18px; height: 18px; }
.vela-header :is(a, summary, button):focus-visible { outline: 3px solid #547bc2; outline-offset: 3px; }
.site-header.vela-header-guest { grid-template-columns: minmax(220px, 1fr) auto; }
.vela-header-guest .main-nav .button { min-height: 46px; display: inline-flex; align-items: center; padding: 10px 18px; font-size: 14px; box-shadow: none; }
@media (max-width: 1100px) and (min-width: 961px) {
  .site-header.vela-header { gap: 16px; padding-inline: 18px; }
  .header-account { padding-left: 14px; }
  .header-account-name { display: none; }
}
@media (max-width: 960px) {
  .site-header.vela-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; min-height: 0; border-radius: 0 0 16px 16px; }
  .site-header.vela-header .main-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .site-header.vela-header .main-nav .header-nav-link { flex: 1; min-width: 0; }
  .header-account { grid-column: 2; grid-row: 1; padding-left: 12px; }
  .header-account-panel { top: calc(100% + 10px); }
  .site-header.vela-header-guest .main-nav { grid-column: 2; grid-row: 1; width: auto; }
}
@media (max-width: 600px) {
  .site-header.vela-header { gap: 10px; padding: 10px 12px; }
  .vela-header .brand { gap: 10px; }
  .vela-header .brand-logo-frame { padding: 3px; border-radius: 11px; }
  .vela-header .brand-logo { width: 44px; height: 44px; border-radius: 7px; }
  .vela-header .brand-copy strong { font-size: 19px; }
  .vela-header .brand-copy strong::after { width: 17px; height: 12px; margin-left: 7px; }
  .vela-header .brand-copy small { font-size: 11px; margin-top: 4px; }
  .header-account { padding-left: 0; border-left: 0; }
  .header-account > summary { padding: 4px; min-width: 44px; min-height: 44px; justify-content: center; }
  .header-account-name, .header-chevron { display: none; }
  .header-avatar { width: 34px; height: 34px; font-size: 14px; }
  .site-header.vela-header .main-nav { padding: 3px; border-radius: 12px; }
  .site-header.vela-header .main-nav .header-nav-link { gap: 7px; padding: 9px 8px; min-height: 44px; font-size: 13px; border-radius: 9px; }
  .vela-header .header-nav-link svg { width: 17px; height: 17px; }
  .site-header.vela-header-guest .main-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .vela-header-guest .main-nav .button { flex: 1; justify-content: center; min-height: 44px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .vela-header *, .vela-header *::after { transition: none !important; }
}