/* V1.7.1 — Unified Header Dropdown Menu
   Navigation lives only in the header dropdown on desktop and mobile. */
:root{--mobile-nav-height:0px;--app-menu-width:330px}
.app-shell{display:block!important;min-height:100dvh;padding-bottom:0!important}
.sidebar,.mobile-menu,.theme-control,.theme-menu{display:none!important}
.main-column{width:100%;min-width:0;min-height:100dvh}
.topbar{left:0;width:100%;padding-left:22px;padding-right:22px}
.topbar-brand-mark{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:14px;background:var(--bg);color:var(--primary);font-family:var(--font-display);font-size:13px;font-weight:900;letter-spacing:-.04em;box-shadow:var(--neu-raised-sm)}
.app-menu-control{position:relative;display:flex;align-items:center}
.app-menu-trigger{width:auto!important;min-width:92px;height:44px!important;padding:0 13px!important;display:flex!important;align-items:center;justify-content:center;gap:8px;border-radius:14px!important;white-space:nowrap}
.app-menu-trigger-icon{font-size:18px;line-height:1}
.app-menu-trigger-label{font-size:12px;font-weight:800}
.app-menu-dropdown{position:absolute;right:0;top:calc(100% + 12px);width:min(var(--app-menu-width),calc(100vw - 24px));max-height:min(720px,calc(100dvh - 104px));overflow-y:auto;overscroll-behavior:contain;padding:11px;border-radius:22px;background:var(--bg);box-shadow:var(--neu-raised-md);z-index:100}
.app-menu-dropdown[hidden]{display:none!important}
.app-menu-heading{display:flex;flex-direction:column;gap:2px;padding:6px 8px 10px}
.app-menu-heading strong{font-family:var(--font-display);font-size:14px}
.app-menu-heading small,.app-menu-section-label{font-size:10px;color:var(--muted)}
.app-menu-nav,.app-theme-options{display:flex;flex-direction:column;gap:5px}
.app-menu-item{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 22px;align-items:center;gap:9px;text-align:left;border:0;background:transparent;color:var(--text);padding:10px;border-radius:14px;cursor:pointer}
.app-menu-item:hover,.app-menu-item:focus-visible{background:var(--primary-2);outline:none}
.app-menu-item>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.app-menu-item strong{font-size:12px}.app-menu-item small{font-size:10px;color:var(--muted);white-space:normal;line-height:1.3}
.app-menu-item b{opacity:0;color:var(--primary);font-size:14px}.app-menu-item.active{background:var(--primary-2);color:var(--primary)}.app-menu-item.active b{opacity:1}
.app-menu-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--bg);box-shadow:var(--neu-inset-sm);font-size:13px;font-weight:800}
.app-menu-divider{height:8px;margin:9px 6px;border-radius:999px;box-shadow:var(--neu-inset-sm)}
.app-menu-section-label{padding:1px 8px 7px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.app-theme-options .theme-option{padding:9px 10px;border-radius:13px}
.app-menu-status{display:flex;align-items:center;gap:9px;padding:7px 8px 3px;color:var(--muted);font-size:10px}
.app-install-button{width:100%;margin-top:7px;text-align:center;min-height:42px}
.page-root{max-width:1480px;margin-left:auto;margin-right:auto}

@media(max-width:900px){
  html{scroll-padding-top:72px}
  .topbar{height:calc(62px + env(safe-area-inset-top));padding:calc(9px + env(safe-area-inset-top)) 10px 9px!important;gap:8px}
  .topbar-brand-mark{width:40px;height:40px;border-radius:13px;font-size:12px}
  .topbar-copy{min-width:0}
  .topbar-actions{gap:5px}
  .topbar-generate{display:none!important}
  .app-menu-trigger{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;border-radius:14px!important}
  .app-menu-trigger-label{display:none}
  .app-menu-dropdown{position:fixed!important;right:10px!important;top:calc(58px + env(safe-area-inset-top))!important;width:min(var(--app-menu-width),calc(100vw - 20px))!important;max-height:calc(100dvh - 72px - env(safe-area-inset-top));padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  .page-root{padding-bottom:24px!important}
  .mobile-generate-bar{bottom:calc(7px + env(safe-area-inset-bottom))!important}
  .output-actions{bottom:calc(7px + env(safe-area-inset-bottom))!important}
  .toast-region{bottom:calc(12px + env(safe-area-inset-bottom))!important}
}

@media(max-width:380px){
  .topbar{padding-left:8px!important;padding-right:8px!important}
  .topbar-brand-mark{width:38px;height:38px}
  .app-menu-trigger{width:40px!important;min-width:40px!important;height:40px!important}
}