: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 (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 (width<=900px){.desktop-nav{display:none}.header-controls{gap:8px;min-width:0}.main-header .desktop-auth,.header-controls .desktop-auth{display:none}.main-header .mobile-auth-menu,.header-controls .mobile-auth-menu{display:block}.mobile-auth-trigger{display:none}.app-container--no-bottom-nav .mobile-auth-trigger,.mobile-auth-trigger--guest{display:flex}: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:96px;margin:0 2px;display:flex}.navbar-link{color:var(--text-muted);cursor:pointer;box-sizing:border-box;width:100%;min-height:var(--control-lg,44px);transition:var(--transition-fast);text-align:center;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 10px;font-family:inherit;font-weight:500;text-decoration:none;display:flex;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}.navbar-icon{flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.navbar-icon svg{width:100%;height:100%}.navbar-label{font-size:var(--font-size-xs);line-height:1.1}.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:8px}.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 (width<=320px){.header-content{padding:0 6px}.logo-link{font-size:1.2rem}.auth-link{font-size:var(--font-size-xs);padding:.2rem .4rem}.user-button{padding:.25rem .4rem;font-size:.75rem}.header-controls{gap:6px}}@media (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}.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}.bottom-navbar .navbar-link{padding:6px}.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}}