/* One header appearance, shared by every page using the app shell. */
.app-topbar.melopod-topbar{--mp-bg:#f8f8fc;--mp-surface:#fff;--mp-text:#222134;--mp-muted:#777589;--mp-line:#eeedf5;--mp-purple:#7358e8;--mp-time:240ms;box-sizing:border-box;background:var(--mp-surface);border-bottom:1px solid var(--mp-line);padding:16px 32px;gap:16px;min-height:88px;box-shadow:0 3px 20px #24203903;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.theme-dark .app-topbar.melopod-topbar{--mp-bg:#14131b;--mp-surface:#1e1c28;--mp-text:#f4f1fc;--mp-muted:#b2acc4;--mp-line:#302c3e;background:var(--mp-surface)}
.melopod-topbar .global-search-wrap{max-width:none;min-width:0}
.melopod-topbar .app-search{height:52px;border:1px solid transparent;border-radius:18px;background:var(--mp-bg);color:var(--mp-muted);padding:0 18px;transition:box-shadow var(--mp-time),border-color var(--mp-time)}
.melopod-topbar .app-search:focus-within{border-color:#b8a7f4;box-shadow:0 0 0 4px #7358e812}
.melopod-topbar .app-search input{font-size:14px;color:var(--mp-text);background:transparent}
.melopod-topbar .app-search input::placeholder{color:var(--mp-muted)}
.melopod-topbar .app-search-icon img,.melopod-topbar .mobile-search-toggle img{width:24px;height:24px;object-fit:contain;filter:none}
.melopod-topbar .global-search-results{top:calc(100% + 10px);border:1px solid var(--mp-line);border-radius:20px;box-shadow:0 20px 60px #28203b20;background:var(--mp-surface);max-height:min(65vh,560px);overflow:auto}
.melopod-topbar .global-search-result{color:var(--mp-text);border-radius:10px}
.melopod-topbar .global-search-result:hover{background:var(--mp-bg)}
@media(max-width:1200px){.app-topbar.melopod-topbar{padding:14px 24px}}
@media(max-width:650px){
 .app-topbar.melopod-topbar{display:flex;flex-wrap:wrap;gap:10px;padding:10px 16px 12px;position:sticky;min-height:110px;height:auto}
 .app-topbar.melopod-topbar .global-search-wrap,.app-topbar.melopod-topbar.search-open .global-search-wrap{display:block;position:relative;inset:auto;order:20;flex:0 0 100%;width:100%;max-width:none;background:none;padding:0}
 .melopod-topbar .app-search{height:44px;border-radius:15px;padding:0 13px}
 .melopod-topbar .app-search input{font-size:16px}
 .melopod-topbar .mobile-search-toggle,.melopod-topbar .mobile-search-close{display:none!important}
 .app-topbar.melopod-topbar.search-open .mobile-menu-button{display:grid}
 .app-topbar.melopod-topbar .mobile-menu-button{margin-right:auto}
 .melopod-topbar .mobile-top-brand{display:flex!important;position:absolute;left:50%;top:10px;transform:translateX(-50%);align-items:center;justify-content:center;gap:6px;width:auto;height:42px;margin:0;white-space:nowrap;text-decoration:none;color:var(--mp-text);font-size:22px}
 .melopod-topbar .mobile-top-brand img{width:32px;height:32px;object-fit:contain}
 .app-topbar.melopod-topbar .mp-streak-pill{padding:4px;gap:0}
 .app-topbar.melopod-topbar .mp-streak-pill :is(.mp-streak-flame,.mp-streak-count){display:none}
}
@media(max-width:360px){.app-topbar.melopod-topbar .mobile-top-brand{font-size:18px}}
@media(prefers-reduced-motion:reduce){.melopod-topbar .app-search{transition:none}}
/* The unchanged transparent logo supplies the M in the navigation wordmark.
   Compensate for the PNG's transparent padding without clipping its artwork. */
.melopod-brand-lockup{display:inline-flex;align-items:baseline;gap:.025em;line-height:1;white-space:nowrap}
.melopod-brand-initial{display:block;position:relative;flex:none;width:.83em;height:.8em}
.melopod-brand-lockup .melopod-brand-initial img{position:absolute;left:-.18em;top:-.2em;width:1.23em;height:1.23em;max-width:none;object-fit:contain;border-radius:0}