:root{--breakpoint-mobile:480px;--breakpoint-tablet:768px;--breakpoint-desktop:900px;--breakpoint-large:1024px;--breakpoint-xlarge:1200px;--bottom-navbar-height:0px;--bottom-navbar-offset:0px}.bottom-navbar{display:none}.desktop-auth{display:block}.mobile-auth-menu{display:none}@media (max-width:1024px){.header-content{padding:0 12px}.desktop-nav{gap:14px}.nav-link{padding:6px 0;font-size:.9rem}.header-controls{gap:12px}.auth-links{gap:.375rem}.auth-link{padding:.3rem .7rem;font-size:.8rem}}@media (max-width:900px){.desktop-nav{display:none}.header-controls{gap:8px;min-width:0}.header-controls .group-pill-dropdown,.main-header .desktop-auth,.header-controls .desktop-auth{display:none}.main-header .mobile-auth-menu,.header-controls .mobile-auth-menu{display:block}:root{--bottom-navbar-height:calc(47px + 1.28rem);--bottom-navbar-offset:calc(var(--bottom-navbar-height) + env(safe-area-inset-bottom,0px))}.bottom-navbar{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))16px;z-index:var(--z-header);justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.navbar-item{flex:1;max-width:100px;margin:0 4px}.navbar-link{color:var(--text-muted);transition:var(--transition-fast);text-align:center;padding:8px 10px;font-size:.9rem;font-weight:500;text-decoration:none;display:block;position:relative}.navbar-link:hover,.navbar-link.active{color:var(--text-primary)}.navbar-link.active:before{content:"";background:var(--accent-primary);height:2px;position:absolute;bottom:-10px;left:10px;right:10px}.content{padding:16px 16px var(--bottom-navbar-offset)16px;min-height:calc(100vh - 180px)}.app-footer{margin-bottom:var(--bottom-navbar-offset)}.content h2{font-size:2rem}.content p{font-size:1rem}.header-content{padding:0 10px}.logo-link{font-size:1.25rem}.bottom-navbar .navbar-link{padding:10px 12px;font-size:.8rem}.chord-selection{margin-bottom:8px;padding:12px}.chord-selection h2{margin-bottom:12px;font-size:1.3rem}.selection-controls{gap:16px}.chord-display{margin-bottom:8px;padding:12px}.chord-display h2{margin-bottom:12px;font-size:1.5rem}.bottom-navbar{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))16px}}@media (max-width:320px){.header-content{padding:0 6px}.logo-link{font-size:1.2rem}.auth-link{padding:.2rem .4rem;font-size:.7rem}.user-button{padding:.25rem .4rem;font-size:.75rem}.header-controls{gap:6px}}@media (max-width:390px){.header-content{padding:0 8px}.logo-link{font-size:1.25rem}.auth-section{gap:.4rem}.auth-links{gap:.25rem}.auth-link{padding:.25rem .5rem;font-size:.75rem}.user-button{padding:.3rem .6rem;font-size:.8rem}.user-name{max-width:60px}.header-controls{gap:4px}}@media (max-width:480px){:root{--bottom-navbar-height:calc(35px + 1.2rem);--bottom-navbar-offset:calc(var(--bottom-navbar-height) + env(safe-area-inset-bottom,0px))}.content{padding:12px 12px var(--bottom-navbar-offset)12px}.content h2{font-size:1.75rem}.main-header{padding:12px 0}.header-content{padding:0 8px}.logo-link{font-size:1.25rem}.bottom-navbar .navbar-link{padding:8px 10px;font-size:.75rem}.bottom-navbar{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))12px}.app-footer{margin-bottom:var(--bottom-navbar-offset)}.chord-selection{padding:8px}.chord-selection h2{font-size:1.2rem}.selection-controls{gap:12px}.chord-display{padding:8px}.chord-display h2{font-size:1.3rem}}