: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:6px}.nav-link{padding:10px 16px;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:12px 16px calc(12px + 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;box-shadow:0 -2px 12px #00000059}.navbar-item{flex:1;max-width:120px;margin:0 4px}.navbar-link{color:var(--text-muted);transition:var(--transition-fast);text-align:center;border:1px solid #0000;border-radius:12px;padding:11px 15px;font-size:.9rem;font-weight:500;text-decoration:none;display:block;position:relative;overflow:hidden}.navbar-link:hover{color:var(--text-primary);background-color:var(--interactive-hover,var(--color-overlay-medium));border-color:#ffffff14}.navbar-link.active{color:var(--text-primary);background:var(--interactive-active,var(--color-overlay-strong));border-color:rgba(var(--accent-primary-rgb),.28)}.navbar-link.active:before{content:"";background:var(--accent-primary);height:2px;position:absolute;top:0;left:0;right:0}.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.75rem}.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.4rem}.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.5rem}.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}}