@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";:root{--bg-color: #0d0f12;--bg-surface: #15181e;--bg-surface-hover: #1f232b;--text-primary: #f0f2f5;--text-secondary: #9aa0a6;--accent-color: #3b82f6;--accent-hover: #2563eb;--border-color: #272c35;--glass-bg: rgba(21, 24, 30, .7);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .5);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--z-sidebar: 100;--z-bottom-nav: 90;--z-fab: 110;--z-sheet: 120;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}:root[data-theme=light]{--bg-color: #f8fafc;--bg-surface: #ffffff;--bg-surface-hover: #f1f5f9;--text-primary: #0f172a;--text-secondary: #64748b;--border-color: #e2e8f0;--glass-bg: rgba(255, 255, 255, .7)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}#root{display:flex;height:100vh;width:100vw;overflow:hidden}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color)}.btn-primary{background-color:var(--accent-color);color:#fff;padding:10px 20px;border-radius:var(--radius-md);font-weight:600;transition:var(--transition)}.btn-primary:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.input-field{width:100%;background-color:var(--bg-surface-hover);border:1px solid var(--border-color);color:var(--text-primary);padding:12px 16px;border-radius:var(--radius-md);font-family:inherit;outline:none;transition:var(--transition)}.input-field:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f633}.canto-layout{display:flex;flex-direction:row;width:100%;height:100%;position:relative}.canto-main{flex:1;padding:40px;overflow-y:auto}.app-layout{display:flex;width:100vw;height:100vh;overflow:hidden}.app-main{flex:1;overflow-y:auto}.app-sidebar{width:260px;background-color:var(--bg-surface);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:24px 16px;transition:width .3s ease,padding .3s ease;z-index:50}.nav-label,.sidebar-logo-text{display:block}.canto-sidebar{width:320px;background-color:var(--bg-surface);border-left:1px solid var(--border-color);padding:32px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:-4px 0 15px #0000000d;overflow-y:auto;transition:transform .3s ease}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:64px;background-color:var(--bg-surface);border-top:1px solid var(--border-color);display:none;justify-content:space-around;align-items:center;z-index:var(--z-bottom-nav);padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--text-secondary);flex:1}.bottom-nav-item.active{color:var(--accent-color)}.fab{position:fixed;bottom:80px;right:20px;width:56px;height:56px;border-radius:28px;background-color:var(--accent-color);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px #3b82f666;z-index:var(--z-fab);transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.fab:active{transform:scale(.9)}.bottom-sheet-overlay{position:fixed;inset:0;background-color:#00000080;z-index:var(--z-sheet);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .3s ease}.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background-color:var(--bg-surface);border-top-left-radius:24px;border-top-right-radius:24px;padding:24px;z-index:calc(var(--z-sheet) + 1);box-shadow:0 -8px 24px #0003;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.bottom-sheet.open{transform:translateY(0)}.bottom-sheet-handle{width:40px;height:4px;background-color:var(--border-color);border-radius:2px;margin:-8px auto 16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.repertoire-container{height:100vh;overflow-y:auto;background-color:var(--bg-color);padding:40px 20px;color:var(--text-primary)}.repertoire-banner{margin-bottom:40px;padding:32px;border-radius:var(--radius-lg);background-color:var(--bg-surface);border:1px solid var(--border-color);box-shadow:var(--shadow-md);text-align:center}@media(max-width:768px){.desktop-only{display:none!important}.bottom-nav{display:flex}.app-sidebar,.canto-sidebar{display:none!important}.fab{display:flex}.canto-layout{flex-direction:column}.canto-main{padding:20px 16px 100px}.canto-main h1{font-size:2.25rem!important}.repertoire-container{padding:24px 16px 100px}.repertoire-banner{padding:24px 16px;margin-bottom:24px}.repertoire-banner h1{font-size:2rem!important}.glass-panel{padding:16px!important}}