@media (max-width: 900px) {
  .site-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(11, 18, 32, 0.12) !important;
    backdrop-filter: blur(10px) !important;
  }

  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 26px rgba(11, 18, 32, 0.08) !important;
  }

  .nav-row {
    min-height: 60px !important;
  }

  .burger span {
    background: #0b1220 !important;
    opacity: 0.92 !important;
  }

  .brand--mobile-center {
    display: block !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 160px !important;
    max-width: calc(100vw - 120px) !important;
    height: 44px !important;
    overflow: hidden !important;
  }

  .brand--mobile-center img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .mobile-overlay {
    position: fixed !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 100dvh !important;
    inset: auto !important;

    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background: rgba(255, 255, 255, 0.98) !important;
    color: #0b1220 !important;
    backdrop-filter: blur(10px) !important;

    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-right: 18px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: 18px !important;

    z-index: 9999 !important;
    text-align: center !important;
  }

  .mobile-overlay.active {
    display: flex !important;
  }

  .mobile-overlay a,
  .mobile-overlay .mobile-divider,
  .mobile-overlay .mobile-actions {
    width: min(360px, 100%) !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mobile-overlay a {
    display: block !important;
    text-decoration: none !important;
    font-size: 1.06rem !important;
    padding: 10px 0 !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em !important;
    color: #0b1220 !important;
    opacity: 0.92 !important;
    text-align: center !important;
  }

  .mobile-overlay a:hover {
    opacity: 1 !important;
  }

  .mobile-divider {
    height: 1px !important;
    background: rgba(11, 18, 32, 0.12) !important;
    margin: 10px auto !important;
  }

  .mobile-actions {
    width: min(360px, 100%) !important;
    max-width: 360px !important;
  }

  .mobile-overlay .btn.ghost {
    background: #ffffff !important;
    border: 1px solid rgba(11, 18, 32, 0.12) !important;
    color: #0b1220 !important;
    box-shadow: 0 10px 26px rgba(11, 18, 32, 0.06) !important;
  }

  .mobile-overlay .btn.primary {
    background: #0b1220 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(11, 18, 32, 0.12) !important;
  }

  #mWelcome,
  .mobile-overlay #mWelcome,
  .mobile-overlay #mUser,
  .mobile-overlay #mUser * {
    color: #0b1220 !important;
  }

  .mobile-overlay .caption {
    color: rgba(11, 18, 32, 0.62) !important;
  }
}

@media (max-width: 640px) {
  .site-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(11, 18, 32, 0.12) !important;
  }

  .site-footer,
  .site-footer * {
    color: #0b1220 !important;
  }

  .site-footer .caption,
  .site-footer .ftext {
    color: rgba(11, 18, 32, 0.62) !important;
  }

  .site-footer .footer-cols {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .site-footer .fcol {
    width: 100%;
    text-align: center !important;
  }

  .site-footer .ftext {
    text-align: center !important;
  }

  .site-footer .flink {
    text-align: center !important;
  }

  .site-footer .footer-bottom {
    align-items: center !important;
    text-align: center !important;
  }

  .site-footer .footer-info {
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  .mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    transform: none !important;

    display: none;
    z-index: 999999 !important;

    background: #fff !important;
    color: #0b1220 !important;

    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;

    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-right: 18px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: 18px !important;
  }

  .mobile-overlay.active {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  .nav-row {
    position: relative;
  }
  .brand--mobile-center {
    z-index: 1 !important;
  }
  .burger {
    z-index: 5 !important;
    pointer-events: auto !important;
  }

  html[data-theme="dark"] .site-header {
    background: color-mix(in oklab, var(--card) 82%, transparent) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: var(--blur) !important;
  }
  html[data-theme="dark"] .site-header.scrolled {
    background: color-mix(in oklab, var(--card) 92%, transparent) !important;
    box-shadow: var(--shadow-soft) !important;
  }

  html[data-theme="dark"] .burger span {
    background: var(--text) !important;
    opacity: 0.92 !important;
  }

  html[data-theme="dark"] .mobile-overlay {
    background: var(--overlay) !important;
    color: var(--overlay-text) !important;
    backdrop-filter: var(--blur) !important;
  }
  html[data-theme="dark"] .mobile-overlay a {
    color: var(--overlay-text) !important;
  }
  html[data-theme="dark"] .mobile-divider {
    background: var(--overlay-border) !important;
  }

  html[data-theme="dark"] .mobile-overlay .btn.ghost {
    background: color-mix(in oklab, var(--card) 78%, transparent) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
  }
  html[data-theme="dark"] .mobile-overlay .btn.primary {
    background: var(--text) !important;
    color: color-mix(in oklab, var(--bg) 92%, #000) !important;
    box-shadow: var(--shadow-soft) !important;
  }
}

@media (max-width: 640px) {
  html[data-theme="dark"] .site-footer {
    background: color-mix(in oklab, var(--surface) 96%, transparent) !important;
    border-top: 1px solid var(--border) !important;
  }
  html[data-theme="dark"] .site-footer,
  html[data-theme="dark"] .site-footer * {
    color: var(--text) !important;
  }
  html[data-theme="dark"] .site-footer .caption,
  html[data-theme="dark"] .site-footer .ftext {
    color: var(--muted) !important;
  }
}

.brand img {
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  .brand--mobile-center {
    width: 260px !important;
    height: 72px !important;
  }
  .brand--mobile-center img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }
}
@media (max-width: 900px) {
  header.site-header .nav-row {
    position: relative !important;
  }

  header.site-header .brand--mobile-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;

    width: 260px !important;
    height: 60px !important;

    max-width: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header.site-header .brand--mobile-center img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;

    max-width: none !important;
    max-height: none !important;

    height: 60px !important;
    max-width: 260px !important;
  }
}
