@import"https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;500;600;700&display=swap";:root{--color-bordeaux: #722F37;--color-bordeaux-dark: #5C262D;--color-bordeaux-light: #8B3A44;--color-bordeaux-moooh: #943D36;--color-turquoise: #4A9BAD;--color-turquoise-dark: #3D8291;--color-turquoise-light: #5BB5C7;--color-turquoise-pale: #E8F4F6;--color-gold: #D4883A;--color-gold-dark: #B8732E;--color-gold-light: #E9A855;--color-cream: #F5F0E6;--color-cream-dark: #E8E0D0;--color-navy: #1E3A5F;--color-navy-light: #2A4A73;--color-white: #ffffff;--color-gray-100: #f8f8f8;--color-gray-200: #eeeeee;--color-gray-300: #dddddd;--color-gray-400: #cccccc;--color-gray-500: #999999;--color-gray-600: #666666;--content-xs: 360px;--content-sm: 520px;--content-md: 680px;--content-lg: 820px;--bg-primary: var(--color-bordeaux);--bg-secondary: var(--color-bordeaux-dark);--bg-card: var(--color-turquoise);--bg-input: var(--color-cream);--text-light: var(--color-cream);--text-dark: var(--color-navy);--text-muted: rgba(245, 240, 230, .7);--accent: var(--color-gold);--border-color: var(--color-gold);--border-light: rgba(212, 136, 58, .3);--success: #6BBF59;--error: #E85A5A;--font-display: "Pacifico", cursive;--font-body: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(30, 58, 95, .1);--shadow-md: 0 4px 6px rgba(30, 58, 95, .1);--shadow-lg: 0 10px 15px rgba(30, 58, 95, .1);--shadow-xl: 0 20px 25px rgba(30, 58, 95, .15);--shadow-gold: 0 4px 14px rgba(212, 136, 58, .3);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease}@media(min-width:768px){:root{--text-5xl: 3.5rem;--text-6xl: 4.5rem}}@media(min-width:1280px){:root{--text-6xl: 5rem}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-normal);line-height:1.5;color:var(--text-dark);min-height:100vh;min-height:100dvh;width:100%;overflow-x:hidden}#root{min-height:100vh;min-height:100dvh;width:100%}h1,h2,h3,h4,h5,h6{font-family:var(--font-body);font-weight:var(--font-bold);line-height:1.25;color:var(--text-light)}.font-display{font-family:var(--font-display)}.title-display{font-family:var(--font-display);font-size:var(--text-5xl);color:var(--color-gold);text-shadow:2px 2px 4px rgba(0,0,0,.2)}.title-display-sm{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-gold)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-4)}.container-sm{max-width:480px}.container-md{max-width:720px}@media(min-width:768px){.container{padding:0 var(--space-8)}.title-display{font-size:var(--text-6xl)}}@media(min-width:1024px){.container{padding:0 var(--space-10)}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.text-center{text-align:center}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}.opacity-0{opacity:0}.opacity-50{opacity:.5}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn var(--transition-slow) ease forwards}.animate-fade-in-up{animation:fadeInUp var(--transition-slow) ease forwards}.animate-fade-in-down{animation:fadeInDown var(--transition-slow) ease forwards}.animate-slide-in-up{animation:slideInUp var(--transition-slow) ease forwards}.animate-slide-in-right{animation:slideInRight var(--transition-slow) ease forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease-in-out infinite}.animate-shake{animation:shake .4s ease}.animate-spin{animation:spin 1s linear infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.animate-fill-forwards{animation-fill-mode:forwards}.animate-hidden{opacity:0}.page-layout{min-height:100vh;min-height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--space-4);padding-top:var(--space-2);box-sizing:border-box}.page-hero{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--content-lg);margin:0 auto;flex:1}.cow-header{width:100%;max-width:420px;height:auto;flex-shrink:0}.page-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%;max-width:var(--content-md);margin-top:-230px;margin-left:auto;margin-right:auto;padding:var(--space-3);padding-bottom:0;z-index:1;box-sizing:border-box}.page-hero.no-logo .page-content{margin-top:0}.page-footer{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-8);padding-top:var(--space-4);padding-bottom:var(--space-4);flex-shrink:0}.footer-nav{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.footer-buttons{display:flex;align-items:center;justify-content:center;gap:var(--space-4)}.footer-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:3px solid var(--color-navy);border-radius:50%;cursor:pointer;transition:all .15s ease;box-shadow:3px 3px 0 var(--color-navy)}.footer-back svg{width:24px;height:24px;stroke:var(--color-navy)}.footer-back:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}.footer-back:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--color-navy)}.logo-btn{background:none;border:none;padding:0;cursor:pointer;transition:transform var(--transition-base)}.logo-btn:hover{transform:scale(1.05)}.footer-logo{width:160px;height:auto}.footer-user{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);border:3px solid var(--color-turquoise-dark);border-radius:50%;color:#fff;font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all .15s ease;box-shadow:3px 3px 0 var(--color-turquoise-dark)}.footer-user:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-turquoise-dark)}.footer-user:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--color-turquoise-dark)}@media(min-width:480px){.cow-header{max-width:450px}.page-content{max-width:var(--content-md);margin-top:-200px;padding:var(--space-4)}.footer-logo{width:180px}}@media(min-width:768px){.cow-header{max-width:500px}.page-content{max-width:var(--content-md);margin-top:-220px}.footer-logo{width:200px}}@media(min-width:1024px){.cow-header{max-width:550px}.page-content{max-width:var(--content-lg);margin-top:-240px}.footer-logo{width:220px}}.form-input{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--text-base);font-weight:500;color:var(--color-navy);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);transition:all var(--transition-base);box-shadow:3px 3px 0 var(--color-navy)}.form-input::placeholder{color:var(--color-navy);opacity:.4}.form-input:focus{outline:none;border-color:var(--color-gold);box-shadow:3px 3px 0 var(--color-gold)}.form-input:disabled{background:var(--color-gray-100);border-color:var(--color-gray-300);color:var(--color-gray-500);box-shadow:2px 2px 0 var(--color-gray-300);cursor:not-allowed}.form-input--centered{text-align:center}.form-input--login{padding:var(--space-4);font-size:var(--text-lg);text-align:center;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-xl)}.form-input--login::placeholder{color:#1e3a5f66;font-style:italic}.form-input--login:focus{border-color:var(--color-gold);box-shadow:0 0 0 4px #d4883a33}.form-input--search{padding:var(--space-3);background:var(--color-white)}.input-retro{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--text-base);font-weight:500;color:var(--color-navy);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-xl);transition:all var(--transition-base);box-shadow:4px 4px 0 var(--color-navy)}.input-retro::placeholder{color:var(--color-navy);opacity:.4}.input-retro:focus{outline:none;border-color:var(--color-gold);box-shadow:4px 4px 0 var(--color-gold)}.input-retro.error{border-color:var(--error);box-shadow:4px 4px 0 var(--error)}.input-retro--centered{text-align:center}.input-retro--lg{padding:var(--space-4) var(--space-5);font-size:var(--text-lg)}.form-input-wrapper{position:relative;width:100%}.form-input-wrapper .form-input{padding-right:44px}.form-input-action{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:var(--color-navy);border:none;border-radius:50%;color:var(--color-cream);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);opacity:.6}.form-input-action:hover{opacity:1;background:var(--color-bordeaux)}.form-select{width:100%;padding:var(--space-3) var(--space-4);padding-right:var(--space-10);font-family:var(--font-body);font-size:var(--text-base);font-weight:500;color:var(--color-navy);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231E3A5F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;transition:all var(--transition-base);box-shadow:3px 3px 0 var(--color-navy)}.form-select:focus{outline:none;border-color:var(--color-gold);box-shadow:3px 3px 0 var(--color-gold)}.form-select:disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-300);color:var(--color-gray-500);box-shadow:2px 2px 0 var(--color-gray-300);cursor:not-allowed}.form-textarea{width:100%;min-height:120px;padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--text-base);font-weight:400;line-height:1.6;color:var(--color-navy);background:var(--color-white);border:2px solid var(--color-gold);border-radius:var(--radius-md);resize:vertical;transition:all var(--transition-base)}.form-textarea::placeholder{color:var(--color-navy);opacity:.5}.form-textarea:focus{outline:none;border-color:var(--color-navy);box-shadow:0 0 0 3px #1e3a5f1a}.form-group{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.form-label{font-size:var(--text-sm);font-weight:600;color:var(--color-navy)}.form-hint{font-size:var(--text-xs);color:var(--color-gray-500)}.form-input--error,.form-select--error,.form-textarea--error{border-color:var(--error)}.form-input--error:focus,.form-select--error:focus,.form-textarea--error:focus{box-shadow:0 0 0 3px #e85a5a33}.form-error{font-size:var(--text-sm);color:var(--error);font-weight:500}@media(hover:none)and (pointer:coarse){.form-input,.form-select,.form-textarea{min-height:44px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:600;cursor:pointer;transition:all .25s ease;border:none;text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);border-radius:var(--radius-md)}.btn-md{padding:var(--space-3) var(--space-5);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-xl)}.btn-block{width:100%}.btn-primary{background:var(--color-gold);color:var(--color-navy);box-shadow:0 4px 0 var(--color-gold-dark),0 6px 12px #00000026}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--color-gold-dark),0 10px 20px #0003}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--color-gold-dark),0 4px 8px #0000001a}.btn-secondary{background:var(--color-bordeaux);color:var(--color-cream);box-shadow:0 4px 0 var(--color-bordeaux-dark),0 6px 12px #00000026}.btn-secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--color-bordeaux-dark),0 10px 20px #0003}.btn-secondary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--color-bordeaux-dark),0 4px 8px #0000001a}.btn-outline{background:transparent;color:var(--color-navy);border:2px solid var(--color-navy);border-radius:var(--radius-md)}.btn-outline:hover:not(:disabled){background:var(--color-navy);color:var(--color-cream)}.btn-ghost{background:transparent;color:var(--color-navy)}.btn-ghost:hover:not(:disabled){background:#1e3a5f1a}.btn-moooh{background:var(--color-bordeaux-moooh);color:var(--color-white);padding:var(--space-4) var(--space-8);font-size:var(--text-xl);border-radius:60px;border:3px solid var(--color-navy);box-shadow:0 6px 0 var(--color-navy),0 10px 25px #0003;letter-spacing:.02em}.btn-moooh:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 9px 0 var(--color-navy),0 15px 35px #00000040}.btn-moooh:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 var(--color-navy),0 6px 15px #00000026}.btn-back-icon,.btn-action-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:3px solid var(--color-navy);border-radius:50%;cursor:pointer;transition:all .2s ease}.btn-back-icon svg,.btn-action-icon svg{width:24px;height:24px;color:var(--color-navy)}.btn-back-icon:hover,.btn-action-icon:hover{background:var(--color-navy)}.btn-back-icon:hover svg,.btn-action-icon:hover svg{color:var(--color-white)}.btn-action-icon.danger{border-color:var(--color-bordeaux)}.btn-action-icon.danger svg{color:var(--color-bordeaux)}.btn-action-icon.danger:hover{background:var(--color-bordeaux)}.btn-action-icon.danger:hover svg{color:var(--color-white)}.btn-practice{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);background:var(--color-turquoise);color:#fff;border:3px solid var(--color-turquoise-dark);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all .2s;box-shadow:4px 4px 0 var(--color-turquoise-dark)}.btn-practice svg{width:24px;height:24px;stroke:#fff;fill:#fff}.btn-practice:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-turquoise-dark)}.btn-practice:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--color-turquoise-dark)}@media(hover:none)and (pointer:coarse){.btn{min-height:44px}}.card{background:var(--color-cream);border:2px solid var(--color-gold);border-radius:var(--radius-lg);padding:var(--space-4)}.card--turquoise{background:var(--color-turquoise)}.card--bordeaux{background:var(--color-bordeaux);color:var(--color-cream)}.card--interactive{cursor:pointer;transition:all var(--transition-base)}.card--interactive:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.biblio-block{background:var(--color-cream);border:2px solid var(--color-gold);border-radius:var(--radius-lg);padding:var(--space-4)}.badge{display:inline-flex;align-items:center;padding:2px 8px;background:var(--color-navy);color:var(--color-cream);border-radius:10px;font-size:var(--text-xs);font-weight:600}.badge.key{background:var(--color-bordeaux)}.badge.content{padding:2px 6px;background:transparent;font-size:14px}.user-role{display:inline-block;background:var(--color-gold);color:var(--color-navy);padding:.2rem .6rem;border-radius:1rem;font-size:var(--text-xs);font-weight:600;text-transform:capitalize}.filter-pills{display:flex;flex-wrap:wrap;gap:var(--space-1)}@media(min-width:480px){.filter-pills{gap:var(--space-2)}}.pill{padding:4px var(--space-2);background:var(--color-white);border:2px solid var(--color-gold);border-radius:20px;font-size:11px;font-weight:600;color:var(--color-navy);cursor:pointer;transition:all .2s}@media(min-width:480px){.pill{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}}.pill:hover{background:var(--color-turquoise-pale)}.pill.active{background:var(--color-navy);border-color:var(--color-navy);color:var(--color-cream)}.stat-block{flex:1;text-align:center;padding:var(--space-3);background:var(--color-cream);border-radius:var(--radius-lg);border:2px solid var(--color-gold);cursor:pointer;transition:all var(--transition-base)}.stat-block:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.stat-value{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy);display:block}.stat-label{font-size:var(--text-sm);color:var(--color-navy);font-weight:500}.user-avatar{width:60px;height:60px;background:var(--color-turquoise);border:3px solid var(--color-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--color-navy);font-family:var(--font-display);margin:0 auto var(--space-2)}.feedback-message{padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;text-align:center}.feedback-message.success{background:#6bbf5926;color:var(--success);border:2px solid var(--success)}.feedback-message.error{background:#e85a5a26;color:var(--error);border:2px solid var(--error)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);text-align:center}.empty-icon{font-size:48px;margin-bottom:var(--space-3)}.empty-state p{color:var(--color-navy);opacity:.7;margin:0}.divider{width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--color-gold) 20%,var(--color-gold) 80%,transparent);margin:var(--space-6) 0}@media(hover:none)and (pointer:coarse){.pill{min-height:36px;display:flex;align-items:center}}.songs-list{display:flex;flex-direction:column;gap:var(--space-2)}.song-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--color-cream);border:3px solid var(--color-turquoise);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease}@media(min-width:480px){.song-row{gap:var(--space-3);padding:var(--space-3)}}.song-row:hover{transform:translate(-2px,-2px);border-color:var(--color-turquoise-dark);box-shadow:4px 4px 0 var(--color-turquoise-dark)}.song-row:active{transform:translate(0);box-shadow:2px 2px 0 var(--color-turquoise-dark)}.song-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.song-title{font-weight:600;color:var(--color-navy);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:480px){.song-title{font-size:var(--text-base)}}.song-artist{font-size:var(--text-xs);color:var(--color-navy);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:480px){.song-artist{font-size:var(--text-sm)}}.song-badges{display:flex;gap:2px;flex-shrink:0}@media(min-width:480px){.song-badges{gap:var(--space-1)}}.biblio-options{position:relative;align-self:flex-end}.btn-options{padding:var(--space-2) var(--space-3);background:transparent;border:2px solid var(--color-navy);border-radius:var(--radius-md);color:var(--color-navy);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s}.btn-options:hover{background:var(--color-navy);color:var(--color-cream)}.options-menu{position:absolute;top:100%;right:0;margin-top:var(--space-2);background:var(--color-cream);border:2px solid var(--color-gold);border-radius:var(--radius-lg);box-shadow:0 4px 20px #00000026;z-index:100;min-width:180px;overflow:hidden}.options-item{display:block;width:100%;padding:var(--space-3);background:transparent;border:none;color:var(--color-navy);font-size:var(--text-sm);font-weight:500;text-align:left;cursor:pointer;transition:background .2s}.options-item:hover{background:var(--color-turquoise-pale)}.options-item+.options-item{border-top:1px solid rgba(212,136,58,.3)}.videos-section{background:var(--color-cream);border:2px solid var(--color-gold);border-radius:var(--radius-lg);overflow:hidden}.videos-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:transparent;border:none;font-size:var(--text-base);font-weight:600;color:var(--color-navy);cursor:pointer;transition:background .2s}.videos-toggle:hover{background:#d4883a1a}.videos-toggle .chevron{width:20px;height:20px;transition:transform .2s}.videos-list{display:flex;flex-direction:column;gap:var(--space-1);padding:0 var(--space-3) var(--space-3)}.video-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-navy);text-decoration:none;font-size:var(--text-sm);transition:all .2s}.video-link:hover{background:red;border-color:red;color:var(--color-white)}.video-link svg{width:20px;height:20px;flex-shrink:0}.moooh-main{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:300px}.shuffle-wrapper{position:relative;display:inline-block}.shuffle-button{background:var(--color-turquoise);border:4px solid var(--color-gold);border-radius:var(--radius-2xl);padding:var(--space-6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 30px #0000004d;aspect-ratio:1;width:160px;transform:rotate(-4deg)}.shuffle-button:hover{transform:translateY(-8px) scale(1.1) rotate(-6deg);box-shadow:0 20px 50px #0006,0 0 30px #d4883a80,0 0 60px #d4883a4d,inset 0 0 20px #ffffff1a;border-color:var(--color-gold-light);border-width:5px}.shuffle-button:active{transform:translateY(-2px) scale(1.05);transition:all .1s ease}.shuffle-icon{width:80px;height:80px;background:var(--color-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -4px #0003}.shuffle-icon svg{width:50px;height:50px;color:var(--color-navy)}.shuffle-text{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-cream);text-shadow:1px 1px 3px rgba(0,0,0,.4);transform:rotate(-3deg)}.settings-container{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);z-index:10}.settings-btn{background:var(--color-navy);border:3px solid var(--color-gold);border-radius:50%;width:48px;height:48px;font-size:1.4rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d}.settings-btn:hover{transform:scale(1.15) rotate(15deg);background:var(--color-navy-light);box-shadow:0 6px 16px #0006}.settings-menu{position:absolute;top:auto;bottom:calc(100% + var(--space-2));left:50%;transform:translate(-50%);background:var(--color-white);border:2px solid var(--color-gold);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);box-shadow:0 -10px 30px #00000026;z-index:100;min-width:180px}.settings-menu label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--color-navy);font-weight:500}.settings-menu select{padding:.5rem;border:2px solid var(--color-gold);border-radius:6px;background:var(--color-white);color:var(--color-navy);font-size:.9rem}@media(max-width:480px){.settings-menu{min-width:160px}}.result-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.result-header{text-align:center;padding:var(--space-6) var(--space-4);background:var(--color-cream);border-radius:var(--radius-lg);border:3px solid var(--color-navy);box-shadow:6px 6px 0 var(--color-navy);position:relative}.result-header-top{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}.result-title{font-family:var(--font-display);font-size:var(--text-4xl);color:var(--color-bordeaux);margin:0;line-height:1.1}.result-subtitle{font-size:var(--text-lg);font-weight:var(--font-medium);color:var(--color-navy);margin:var(--space-2) 0 0 0}.result-divider{display:flex;align-items:center;justify-content:center;margin:var(--space-5) 0}.result-divider span{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-gold-dark);text-transform:uppercase;letter-spacing:.15em;padding:0 var(--space-3);background:var(--color-cream)}.result-divider:before,.result-divider:after{content:"";flex:1;height:2px;background:var(--color-gold)}.result-music{font-family:var(--font-body);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-navy);margin:0}.result-music-artist{font-size:var(--text-base);color:var(--color-navy);margin:var(--space-1) 0 0 0;opacity:.7}.result-challenge{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-turquoise);margin:0}.result-key{display:inline-block;margin-top:var(--space-3);padding:var(--space-1) var(--space-4);background:var(--color-turquoise);color:var(--color-white);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-lg)}.content-block{background:var(--color-cream);border-radius:var(--radius-md);border:3px solid var(--color-navy);box-shadow:4px 4px 0 var(--color-navy);overflow:hidden;cursor:pointer;transition:all .2s ease}.content-block:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.content-block:active{transform:translate(0);box-shadow:2px 2px 0 var(--color-navy)}.block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3)}.block-label{font-size:var(--text-xl);font-weight:var(--font-bold);color:#fff}.block-content{padding:var(--space-4)}.block-footer{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-2) var(--space-3);background:#00000008;border-top:2px dashed var(--color-gray-300)}.partition-block .block-header{background:var(--color-turquoise);border-bottom:2px solid var(--color-turquoise-dark)}.partition-block .block-label{color:var(--color-white)}.capo-badge{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-white);background:var(--color-gold);padding:2px 10px;border-radius:var(--radius-full)}.chords-preview,.chords-grid-full{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.chord-pill{background:var(--color-turquoise);color:var(--color-white);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-lg)}.more-indicator{font-size:var(--text-base);color:var(--color-gray-500);font-weight:var(--font-bold)}.chord-sheet-inline{display:flex;flex-direction:column;gap:var(--space-4)}.chord-section-inline{display:flex;flex-direction:column;gap:var(--space-1)}.section-label{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-turquoise);text-transform:uppercase;letter-spacing:.05em}.section-lines{display:flex;flex-direction:column;gap:4px}.sheet-line-inline{display:flex;flex-direction:column}.chords-inline{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-turquoise);letter-spacing:.05em}.lyrics-inline{font-size:var(--text-xl);color:var(--color-navy);line-height:1.5}.lyrics-block .block-header{background:var(--color-bordeaux);border-bottom:2px solid var(--color-bordeaux-dark)}.lyrics-block .block-label{color:var(--color-white)}.lyrics-text{font-size:var(--text-2xl);color:var(--color-navy);line-height:1.8;white-space:pre-line}.lyrics-text p{font-size:var(--text-2xl);margin:var(--space-3) 0;line-height:1.8}.lyrics-text strong{font-weight:700}.lyrics-text em{font-style:italic}.lyrics-text mark{border-radius:2px;padding:0 4px}.fullscreen-btn{display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);border:2px solid var(--color-gray-400);padding:6px;cursor:pointer;transition:all .2s ease;border-radius:var(--radius-sm)}.fullscreen-btn svg{width:16px;height:16px;stroke:var(--color-gray-600)}.fullscreen-btn:hover{background:var(--color-navy);border-color:var(--color-navy)}.fullscreen-btn:hover svg{stroke:var(--color-white)}.videos-block{border-color:var(--color-gold);box-shadow:4px 4px 0 var(--color-gold)}.videos-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:none;border:none;cursor:pointer;font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-navy)}.videos-toggle .chevron{width:20px;height:20px;stroke:var(--color-navy);transition:transform .3s ease}.videos-toggle .chevron.up{transform:rotate(180deg)}.videos-list{display:flex;flex-direction:column;gap:var(--space-2);padding:0 var(--space-3) var(--space-3)}.video-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);text-decoration:none;color:var(--color-navy);font-size:var(--text-base);font-weight:var(--font-medium);transition:all .2s ease}.video-link:hover{border-color:var(--color-bordeaux);background:#fff5f5}.video-link svg{width:24px;height:24px;fill:red;flex-shrink:0}.result-actions{display:flex;justify-content:center;align-items:stretch;gap:var(--space-3);padding-top:var(--space-2)}.expand-hint{font-size:var(--text-xs);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.1em}.content-block.loading{cursor:default;opacity:.9}.content-block.loading:hover{transform:none;box-shadow:4px 4px 0 var(--color-navy)}.loading-badge{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-white);opacity:.8;animation:pulse 1.5s ease-in-out infinite}.chords-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-6);color:var(--color-gray-500);font-size:var(--text-sm)}.loading-spinner.small{width:24px;height:24px;border-width:3px}.chords-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--color-gray-500);font-size:var(--text-sm)}.chords-error .error-icon{font-size:var(--text-2xl);opacity:.5}.btn-retry{margin-top:var(--space-2);padding:var(--space-1) var(--space-4);background:var(--color-turquoise);color:var(--color-white);border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-bold);cursor:pointer;transition:all .2s ease}.btn-retry:hover{background:var(--color-turquoise-dark);transform:translateY(-1px)}@keyframes pulse{0%,to{opacity:.8}50%{opacity:.5}}.song-edit-container{width:100%;display:flex;flex-direction:column;gap:var(--space-3)}.song-edit-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-navy)}.song-edit-header-info{flex:1;text-align:center}.song-edit-song-title{display:block;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy);margin-bottom:var(--space-1);line-height:1.2}.song-edit-song-artist{display:block;font-size:var(--text-lg);font-weight:500;color:var(--color-bordeaux);opacity:.85}.song-edit-header .btn-favorite{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;color:var(--color-gray-400);transition:all .2s}.song-edit-header .btn-favorite svg{width:24px;height:24px}.song-edit-header .btn-favorite:hover{transform:scale(1.1);border-color:var(--color-bordeaux);color:var(--color-bordeaux)}.song-edit-header .btn-favorite.active{background:var(--color-bordeaux);border-color:var(--color-bordeaux);color:#fff}.btn-export-small{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);border:2px solid var(--color-navy);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.btn-export-small svg{width:20px;height:20px;stroke:var(--color-white)}.btn-export-small:hover{background:var(--color-turquoise-dark);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-enrich-small{width:40px;height:40px;background:var(--color-gold);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:1.2rem;cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.btn-enrich-small:hover{background:var(--color-turquoise);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-enrich-small:disabled{opacity:.6;cursor:wait}.enrich-status{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;text-align:center}.enrich-status.success{background:#6bbf5933;border:1px solid var(--success);color:#2e7d32}.enrich-status.error{background:#e85a5a33;border:1px solid var(--error);color:#c62828}.enrich-status.info{background:#2196f31a;border:1px solid #2196f3;color:#1565c0}.edit-tabs{display:flex;gap:var(--space-2)}.tab{flex:1;padding:var(--space-2);background:var(--color-cream);border:2px solid var(--color-navy);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:var(--color-navy);cursor:pointer;transition:all .15s}.tab:hover{background:var(--color-gray-100)}.tab.active{background:var(--color-navy);color:var(--color-cream)}.tab-content{background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);overflow:hidden}.tab-content:before{content:"";display:block;height:40px;background:var(--color-navy)}.tab-panel{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.field{display:flex;flex-direction:column;gap:var(--space-1)}.field span{font-size:var(--text-sm);font-weight:600;color:var(--color-navy);text-transform:uppercase;letter-spacing:.05em}.field input,.field select,.field textarea{padding:var(--space-2) var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-base);background:#fff}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-turquoise)}.field textarea{resize:vertical;min-height:160px;font-family:inherit;line-height:1.5}.field-row{display:flex;gap:var(--space-3)}.field-row .field{flex:1}.sheets-list{display:flex;flex-direction:column;gap:var(--space-2)}.sheet-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md)}.sheet-info{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}.sheet-name{font-weight:600;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sheet-chords{font-size:var(--text-xs);color:var(--color-gray-500);max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-remove{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:var(--color-gray-400);font-size:1.1rem;cursor:pointer}.btn-remove:hover{color:var(--color-error)}.song-edit-container .edit-actions{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);margin-top:var(--space-3);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-navy)}.song-edit-container .btn-add-queue{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-gold);color:var(--color-navy);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.song-edit-container .btn-add-queue svg{width:16px;height:16px}.song-edit-container .btn-add-queue:hover{background:var(--color-turquoise);color:#fff}.song-edit-container .jam-actions{display:flex;flex-direction:column;gap:var(--space-1)}.song-edit-container .btn-see-list{background:transparent;border:none;font-size:var(--text-xs);color:var(--color-turquoise-dark);cursor:pointer;padding:0;text-align:left;font-weight:500;transition:color .2s}.song-edit-container .btn-see-list:hover{color:var(--color-navy);text-decoration:underline}.song-edit-container .btn-play{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-turquoise);color:#fff;border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-turquoise-dark)}.song-edit-container .btn-play svg{width:16px;height:16px}.song-edit-container .btn-play:hover{background:var(--color-turquoise-dark)}.song-edit-container .btn-cancel{margin-left:auto;padding:var(--space-2) var(--space-3);background:var(--color-gray-200);color:var(--color-gray-700);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);cursor:pointer}.song-edit-container .btn-cancel:hover{background:var(--color-gray-300)}.song-edit-container .btn-save{padding:var(--space-2) var(--space-4);background:var(--color-navy);color:#fff;border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:700;font-size:var(--text-sm);cursor:pointer;box-shadow:2px 2px #0000004d;transition:all .15s}.song-edit-container .btn-save:hover{background:var(--color-turquoise);border-color:var(--color-turquoise)}.chords-config-section{margin-bottom:var(--space-4)}.chords-config-section h4{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--color-gray-600);text-transform:uppercase;letter-spacing:.5px}.chords-config-row{display:flex;gap:var(--space-4);align-items:flex-end}.chords-config-row .field:first-child{width:120px;flex-shrink:0}.add-chords-field{flex:1}.add-chords-field .add-chords{display:flex;gap:var(--space-2)}.partitions-section,.chords-section{margin-bottom:var(--space-4)}.partitions-section h4,.chords-section h4{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--color-gray-600);text-transform:uppercase;letter-spacing:.5px}.partitions-list{display:flex;flex-direction:column;gap:var(--space-2)}.partition-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-cream);border:2px solid var(--color-navy);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.partition-item:hover{background:var(--color-turquoise);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.partition-view{display:flex;align-items:center;justify-content:space-between;flex:1;background:transparent;border:none;cursor:pointer}.partition-instrument{font-weight:600;color:var(--color-navy)}.partition-arrow{font-weight:700;color:var(--color-navy)}.add-section h4{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--color-gray-600);text-transform:uppercase}.add-chords input{flex:1}.btn-add,.btn-import{padding:var(--space-2) var(--space-3);background:var(--color-turquoise);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:600;color:var(--color-navy);cursor:pointer}.streaming-section{margin-top:var(--space-4);padding-top:var(--space-4);border-top:2px dashed var(--color-gray-300)}.streaming-section h4{font-size:var(--text-base);color:var(--color-navy);margin:0 0 var(--space-3)}.streaming-field{display:flex;gap:var(--space-2);align-items:flex-end;margin-bottom:var(--space-3)}.streaming-field .field{flex:1;margin:0}.streaming-buttons{display:flex;gap:4px;flex-shrink:0}.btn-play-link{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-bold);cursor:pointer;transition:all .2s;white-space:nowrap}.btn-play-link.custom{background:var(--color-turquoise);color:#fff;border:2px solid var(--color-turquoise-dark)}.btn-play-link.auto{background:var(--color-cream);color:var(--color-navy);border:2px solid var(--color-gray-300)}.btn-play-link:hover{transform:scale(1.05)}.btn-play-link.custom:hover{background:var(--color-turquoise-dark)}.btn-play-link.auto:hover{border-color:var(--color-navy)}.chords-editor-section{display:flex;flex-direction:column;gap:var(--space-3)}.chords-editor-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.chords-editor-header h4{margin:0;font-size:var(--text-lg);color:var(--color-navy)}.chords-editor-header .key-field{display:flex;align-items:center;gap:var(--space-2);margin:0}.chords-editor-header .key-field span{font-size:var(--text-sm);color:var(--color-gray-600)}.chords-editor-header .key-field select{padding:var(--space-1) var(--space-2);font-size:var(--text-sm);border-radius:var(--radius-md)}.chords-header-actions{display:flex;align-items:center;gap:var(--space-3)}.btn-search-ug{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;color:var(--color-gray-500)}.btn-search-ug:hover{border-color:var(--color-turquoise);color:var(--color-turquoise);transform:scale(1.05)}.btn-search-ug svg{width:18px;height:18px}.chords-editor-section .chords-textarea{width:100%;min-height:300px;padding:var(--space-3);font-family:Courier New,Courier,monospace;font-size:var(--text-sm);line-height:1.5;border:2px solid var(--color-gray-300);border-radius:var(--radius-md);background:var(--color-cream);resize:vertical;white-space:pre;overflow-x:auto}.chords-editor-section .chords-textarea:focus{outline:none;border-color:var(--color-turquoise)}@media(max-width:480px){.tab{padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.tab-panel{padding:var(--space-3)}.chords-editor-header{flex-direction:column;align-items:flex-start}}.add-section{padding-top:var(--space-3);border-top:2px dashed var(--color-gray-300)}.add-section h4{margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:700;color:var(--color-navy)}.add-chords{display:flex;gap:var(--space-2)}.add-chords input{flex:1;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm)}.add-chords input:focus{outline:none;border-color:var(--color-turquoise)}.add-section .btn-add{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:1.5rem;color:var(--color-white);cursor:pointer;box-shadow:2px 2px 0 var(--color-navy);transition:all .15s}.add-section .btn-add:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-import{width:100%;padding:var(--space-2) var(--space-3);background:var(--color-gold);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:700;color:var(--color-navy);cursor:pointer;transition:all .15s;box-shadow:2px 2px 0 var(--color-navy)}.btn-import:hover{background:var(--color-turquoise);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.autofill-section{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-white);border-radius:var(--radius-md);border:2px dashed var(--color-gray-300)}.btn-autofill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-turquoise);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:700;color:var(--color-white);cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:2px 2px 0 var(--color-navy)}.btn-autofill svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.5;fill:none}.btn-autofill:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-autofill:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.autofill-status{font-size:var(--text-xs);font-weight:600}.autofill-status.info{color:var(--color-navy)}.autofill-status.success{color:var(--color-success)}.autofill-status.error{color:var(--color-error)}.youtube-section{display:flex;flex-direction:column;gap:var(--space-3)}.youtube-field{display:flex;flex-direction:column;gap:var(--space-2)}.youtube-field label{font-size:var(--text-sm);font-weight:600;color:var(--color-navy)}.youtube-input-row input{flex:1;padding:var(--space-2);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm)}.youtube-input-row input:focus{outline:none;border-color:var(--color-turquoise)}.btn-yt-open{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:red;border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:1.1rem;cursor:pointer;flex-shrink:0;box-shadow:2px 2px 0 var(--color-navy);transition:all .15s}.btn-yt-open:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-yt-open:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.youtube-help{margin:0;font-size:var(--text-xs);color:var(--color-gray-500);text-align:center}.youtube-preview{border-radius:var(--radius-md);overflow:hidden;background:#000;border:2px solid var(--color-navy)}.youtube-preview iframe{width:100%;aspect-ratio:16/9;border:none}.youtube-previews{display:flex;flex-direction:column;gap:var(--space-3)}.youtube-preview-item{display:flex;flex-direction:column;gap:var(--space-1)}.youtube-preview-label{font-size:var(--text-xs);font-weight:600;color:var(--color-navy);opacity:.7}.cover-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:2px dashed var(--color-gray-300)}.cover-section .field-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-2)}.cover-row{display:flex;align-items:center;gap:var(--space-3)}.cover-preview{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-md);border:2px solid var(--color-navy)}.cover-placeholder{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border:2px dashed var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--color-gray-400);text-align:center}.cover-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.btn-remove-cover{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:var(--color-gray-400);font-size:1rem;cursor:pointer}.btn-remove-cover:hover{color:var(--color-error)}.recordings-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}.recordings-section h4{margin:0 0 var(--space-1);font-size:var(--text-base);font-weight:700;color:var(--color-navy)}.recordings-hint{margin:0;font-size:var(--text-sm);color:var(--color-gray-500)}.btn-record-inline{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:2px solid var(--color-navy);border-radius:50%;cursor:pointer;transition:all .15s;box-shadow:2px 2px 0 var(--color-navy)}.btn-record-inline svg{width:20px;height:20px;fill:var(--color-bordeaux)}.btn-record-inline:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-record-inline:hover svg{fill:#c0392b}.btn-record-inline:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-navy)}.expanded-view{position:fixed;inset:0;background:var(--color-cream);z-index:100;padding:var(--space-6);padding-top:var(--space-16);overflow-y:auto;display:flex;flex-direction:column;align-items:center}.expanded-view .close-btn{position:absolute;top:var(--space-4);right:var(--space-4);width:48px;height:48px;background:var(--color-bordeaux);color:#fff;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:all .3s ease;z-index:10}.expanded-view .close-btn:hover{background:var(--color-navy);transform:scale(1.1)}.expanded-view .edit-btn{position:absolute;top:var(--space-4);left:var(--space-4);width:32px;height:32px;background:transparent;color:var(--color-bordeaux);border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;z-index:10;padding:0}.expanded-view .edit-btn svg{width:24px;height:24px;stroke:var(--color-bordeaux)}.expanded-view .edit-btn:hover{transform:scale(1.15);opacity:.7}.context-switch{background:var(--color-cream);border:2px solid var(--color-gold);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);cursor:pointer;transition:all .2s ease;font-size:var(--text-sm);color:var(--color-navy);text-align:center;margin-bottom:var(--space-3)}.context-switch:hover{background:var(--color-gold);transform:scale(1.02)}.context-switch strong{color:var(--color-bordeaux)}.expanded-view h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-bordeaux);margin:0 0 var(--space-1);text-align:center}.expanded-view .artist{font-size:var(--text-md);color:var(--color-navy);opacity:.8;margin-bottom:var(--space-4)}.chords-expanded .chords-grid{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;max-width:500px}.chord-big{min-width:70px;padding:var(--space-4) var(--space-5);background:var(--color-turquoise);color:var(--color-navy);font-size:var(--text-2xl);font-weight:700;border-radius:var(--radius-lg);text-align:center;border:3px solid var(--color-gold);box-shadow:0 4px 10px #00000026}.lyrics-expanded .lyrics-text{max-width:600px;text-align:left}.lyrics-expanded .lyric-line{margin:var(--space-2) 0;font-size:var(--text-lg);color:var(--color-navy);line-height:1.6}.lyrics-expanded .lyric-line.verse{padding-left:var(--space-4)}.lyrics-expanded .lyric-line.chorus{font-weight:600;color:var(--color-bordeaux)}.lyrics-expanded .challenge-text{font-size:var(--text-xl);color:var(--color-navy);text-align:center;padding:var(--space-6);background:#722f371a;border-radius:var(--radius-lg);max-width:500px}.tiptap-content{font-size:var(--text-2xl);line-height:1.8;color:var(--color-navy)}.tiptap-content p{margin:var(--space-2) 0}.tiptap-content strong{font-weight:700}.tiptap-content em{font-style:italic}.tiptap-content u{text-decoration:underline}.tiptap-content mark{border-radius:2px;padding:0 4px}.edit-mode{width:100%;max-width:600px;display:flex;flex-direction:column;gap:var(--space-3)}.expanded-view .edit-actions{display:flex;gap:var(--space-2);justify-content:flex-end}.expanded-view .btn-cancel{padding:var(--space-2) var(--space-4);background:transparent;border:2px solid var(--color-navy);border-radius:var(--radius-md);color:var(--color-navy);font-weight:600;cursor:pointer;transition:all .2s}.expanded-view .btn-cancel:hover{background:var(--color-navy);color:#fff}.expanded-view .btn-save{padding:var(--space-2) var(--space-4);background:var(--color-bordeaux);border:2px solid var(--color-bordeaux);border-radius:var(--radius-md);color:#fff;font-weight:600;cursor:pointer;transition:all .2s}.expanded-view .btn-save:hover{background:var(--color-navy);border-color:var(--color-navy)}.key-selector{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding:var(--space-2) var(--space-3);background:#fffc;border-radius:var(--radius-lg);border:2px solid var(--color-turquoise)}.key-selector label{display:flex;align-items:center;gap:var(--space-2)}.key-selector .key-label{font-size:var(--text-sm);font-weight:600;color:var(--color-navy)}.key-selector select{padding:var(--space-1) var(--space-3);border:2px solid var(--color-navy);border-radius:var(--radius-md);background:#fff;color:var(--color-navy);font-size:var(--text-base);font-weight:600;cursor:pointer;min-width:90px}.key-selector select:focus{outline:none;border-color:var(--color-bordeaux)}.transposition-badge{padding:var(--space-1) var(--space-2);background:var(--color-gold);color:var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600}.capo-indicator{background:var(--color-gold);color:var(--color-navy);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);margin-bottom:var(--space-4)}.chord-sheet{width:100%;max-width:700px;text-align:left}.chord-section{margin-bottom:var(--space-6)}.chord-section .section-name{font-family:var(--font-body);font-size:var(--text-base);font-weight:700;color:var(--color-bordeaux);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-gold)}.section-content{display:flex;flex-direction:column;gap:var(--space-1)}.sheet-line{font-family:var(--font-mono, monospace)}.sheet-line .chord-line{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-1)}.chord-inline{background:var(--color-turquoise);color:var(--color-navy);padding:4px 12px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--text-lg);border:2px solid var(--color-gold)}.sheet-line .lyric-line{font-family:var(--font-body);font-size:var(--text-lg);color:var(--color-navy);line-height:1.6;margin-bottom:var(--space-2)}.sheet-line.lyrics .lyric-line{padding-left:var(--space-2)}.sheet-line.mixed{margin-bottom:var(--space-3)}.source-link{margin-top:var(--space-6);color:var(--color-bordeaux);font-size:var(--text-sm);text-decoration:none;opacity:.7;transition:opacity .2s}.source-link:hover{opacity:1;text-decoration:underline}.chords-html-display{font-family:Courier New,Courier,monospace;font-size:var(--text-sm);line-height:1.8;white-space:pre-wrap;color:var(--color-navy)}.chords-html-display.chords-preview{max-height:120px;overflow:hidden;mask-image:linear-gradient(to bottom,black 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%)}.chords-html-display p{margin:0;font-family:inherit}.chords-html-display strong{color:var(--color-bordeaux);font-weight:700}.video-section{width:100%;max-width:700px;margin-bottom:var(--space-6)}.video-toggle{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-bordeaux);color:var(--color-cream);border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background var(--transition-fast)}.video-toggle:hover{background:var(--color-bordeaux-dark)}.video-toggle svg{width:20px;height:20px}.video-embed{margin-top:var(--space-4);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16 / 9;background:var(--color-navy)}.video-embed iframe{width:100%;height:100%;border:none}.lyrics-editor{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.editor-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2);background:var(--color-gray-100);border:2px solid var(--color-gray-300);border-radius:var(--radius-md)}.toolbar-group{display:flex;gap:4px;padding-right:var(--space-2);border-right:1px solid var(--color-gray-300)}.toolbar-group:last-child{border-right:none;padding-right:0}.toolbar-group button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--color-gray-300);border-radius:4px;font-size:14px;cursor:pointer;transition:all .15s}.toolbar-group button:hover{background:var(--color-turquoise);border-color:var(--color-turquoise)}.toolbar-group button.active{background:var(--color-navy);border-color:var(--color-navy);color:#fff}.toolbar-group.colors button.color-btn{width:24px;height:24px;border-radius:50%;border:2px solid transparent}.toolbar-group.colors button.color-btn:hover{transform:scale(1.1)}.toolbar-group.colors button.color-btn.active{border-color:var(--color-navy);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-navy)}.toolbar-group.colors button.clear{background:#fff;border:1px solid var(--color-gray-300);font-size:10px;color:var(--color-gray-500)}.toolbar-group.symbols{flex-wrap:wrap}.toolbar-group.symbols button{font-size:16px;font-family:serif}.editor-content{min-height:200px;max-height:400px;overflow-y:auto;padding:var(--space-3);background:#fff;border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-family:inherit;font-size:var(--text-base);line-height:1.6}.editor-content:focus-within{border-color:var(--color-turquoise)}.editor-content .tiptap{outline:none;min-height:180px}.editor-content .tiptap p{margin:0 0 .5em}.editor-content .tiptap p:last-child{margin-bottom:0}.editor-content .tiptap mark{border-radius:2px;padding:0 2px}.cvt-toggle-group{gap:4px!important}.cvt-toggle-btn{width:auto!important;padding:0 12px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.05em;background:var(--color-gray-200)!important;color:var(--color-gray-600)!important;border:2px solid var(--color-gray-400)!important}.cvt-toggle-btn:hover{background:var(--color-turquoise)!important;color:#fff!important;border-color:var(--color-turquoise-dark)!important}.cvt-toggle-btn.active{background:var(--color-navy)!important;color:#fff!important;border-color:var(--color-navy)!important}.cvt-info-link{display:flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:11px;font-weight:700;color:var(--color-gray-500);background:var(--color-gray-100);border:1px solid var(--color-gray-300);border-radius:50%;text-decoration:none;transition:all .15s}.cvt-info-link:hover{background:var(--color-turquoise);border-color:var(--color-turquoise);color:#fff}.cvt-toolbar{background:var(--color-white);border-color:var(--color-navy);padding:var(--space-2)!important;gap:var(--space-1)!important}.cvt-toolbar .toolbar-group{border-right:none;padding-right:0;flex-wrap:wrap;align-items:center;gap:6px!important}.toolbar-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--color-gray-400);letter-spacing:.05em;min-width:40px}.cvt-btn{height:26px!important;width:auto!important;padding:0 10px!important;font-size:12px!important;font-weight:700!important;border-radius:13px!important;border:2px solid!important;white-space:nowrap}.cvt-btn:hover{transform:scale(1.05);box-shadow:0 2px 4px #0003}.cvt-effect-btn{background:#525252!important;color:#fff!important;border-color:#404040!important}.cvt-label{display:inline-block;padding:1px 6px;font-size:10px;font-weight:700;border-radius:8px;border:1.5px solid;margin:0 1px;vertical-align:middle;line-height:1.3}@media(max-width:480px){.editor-toolbar{gap:var(--space-1);padding:var(--space-1)}.toolbar-group{padding-right:var(--space-1)}.toolbar-group button{width:28px;height:28px;font-size:12px}.toolbar-group.colors button.color-btn{width:20px;height:20px}.cvt-btn{padding:3px 8px!important;font-size:10px!important}.toolbar-label{font-size:10px;min-width:45px}}.chords-editor{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.chords-editor .toolbar-group.sections{border-right:none}.chords-editor .toolbar-group.sections button{height:26px;width:auto;padding:0 10px;font-size:11px;font-weight:700;border-radius:13px;background:var(--color-navy);border:2px solid var(--color-navy);color:#fff;white-space:nowrap}.chords-editor .toolbar-group.sections button:hover{background:var(--color-turquoise);border-color:var(--color-turquoise);transform:scale(1.05)}.chords-editor .editor-content.chords-content{font-family:SF Mono,Consolas,Monaco,monospace;font-size:13px;line-height:1.5}.chords-editor .editor-content .tiptap p{margin:0 0 .25em}.chords-editor .editor-content .tiptap p:last-child{margin-bottom:0}@media(max-width:480px){.chords-editor .toolbar-group.sections button{padding:0 8px;font-size:10px}}.options-section.danger-zone{border-color:#dc2626;box-shadow:4px 4px #dc2626}.options-section.danger-zone .options-section-title{color:#dc2626}.btn-danger{background:#dc2626;color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:background .2s}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-danger:disabled{opacity:.6;cursor:not-allowed}.delete-confirm{display:flex;flex-direction:column;gap:var(--space-3)}.delete-warning{color:var(--color-gray-600);font-size:var(--text-sm);line-height:1.5;margin:0}.delete-password-input{padding:var(--space-2) var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-base)}.delete-password-input:focus{outline:none;border-color:#dc2626}.delete-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.songs-view{text-align:left}.songs-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:var(--space-3)}.section-title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy)}.btn-add-song{width:40px;height:40px;background:var(--color-gold);border:none;border-radius:50%;font-size:1.5rem;font-weight:700;color:var(--color-navy);cursor:pointer;transition:transform .2s}.btn-add-song:hover{transform:scale(1.1)}.songs-list{width:100%;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2)}.song-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);background:var(--color-gray-100);border-radius:var(--radius-md);border-left:3px solid var(--color-gray-400);cursor:pointer;transition:all .2s}.song-item:hover{background:var(--color-gray-200);transform:translate(4px)}.song-item.custom{border-left-color:var(--color-gold)}.song-info{display:flex;flex-direction:column;gap:2px;flex:1}.song-title{font-weight:600;color:var(--color-navy)}.song-artist{font-size:var(--text-sm);color:var(--color-gray-600)}.song-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-gray-500)}.song-indicators{display:flex;gap:4px}.song-indicators .indicator{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:10px;border-radius:4px;opacity:.8}.song-indicators .indicator.video{background:#f44;color:#fff}.song-indicators .indicator.chords{background:var(--color-turquoise);color:#fff}.song-indicators .indicator.lyrics{background:var(--color-gold);color:var(--color-navy)}.moooh-badge{min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-gold);color:var(--color-navy);font-size:var(--text-xs);font-weight:700;border-radius:50%;margin-left:var(--space-2)}.song-actions{display:flex;gap:var(--space-2)}.btn-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.btn-icon svg{width:16px;height:16px}.btn-icon:hover{background:var(--color-turquoise);border-color:var(--color-turquoise)}.btn-icon.btn-danger:hover{background:#f8d7da;border-color:var(--color-error);color:var(--color-error)}.empty-message{text-align:center;color:var(--color-gray-500);padding:var(--space-4)}.edit-form{width:100%;display:flex;flex-direction:column;gap:var(--space-4)}.edit-form label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);font-weight:500;color:var(--color-navy);text-align:left}.edit-form input,.edit-form select{padding:var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-base)}.edit-form input:focus,.edit-form select:focus{outline:none;border-color:var(--color-turquoise)}.login-page{min-height:100dvh;display:flex;flex-direction:column;padding:var(--space-6)}.login-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:var(--space-4)}.login-cow{width:100%;max-width:550px;height:auto}.login-content{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;margin-top:-240px;z-index:1}.login-footer{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) 0}.login-logo{width:200px;height:auto}.login-jams-link{color:var(--color-navy);font-size:var(--text-sm);font-weight:600;text-decoration:none;padding:var(--space-2) var(--space-4);border:2px solid var(--color-navy);border-radius:var(--radius-full);transition:all var(--transition-fast)}.login-jams-link:hover{background:var(--color-navy);color:var(--color-cream)}.animate-fade-in-down{animation:fadeInDown .5s ease-out}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-container{width:100%;display:flex;flex-direction:column;align-items:center}.login-step{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%;max-width:320px}.login-input{width:100%;padding:var(--space-4) var(--space-5);font-family:var(--font-body);font-size:var(--text-lg);font-weight:500;text-align:center;color:var(--color-navy);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-xl);transition:all var(--transition-base);box-shadow:4px 4px 0 var(--color-navy)}.login-input::placeholder{color:var(--color-navy);opacity:.4;font-style:italic}.login-input:focus{outline:none;border-color:var(--color-gold);box-shadow:4px 4px 0 var(--color-gold)}.login-input.error{border-color:var(--error);box-shadow:4px 4px 0 var(--error)}.login-input-with-reset{position:relative;width:100%}.login-input-with-reset .login-input{padding-right:48px}.login-reset-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-navy);border:none;border-radius:50%;color:var(--color-cream);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);opacity:.6}.login-reset-btn:hover{opacity:1;background:var(--color-bordeaux)}.login-next-wrapper{display:none}.login-next-wrapper.visible{display:block}.login-error{margin:0;padding:var(--space-2) var(--space-4);background:var(--color-bordeaux);color:var(--color-white);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-md);text-align:center}.login-email-display{margin:0;font-size:var(--text-lg);font-weight:600;color:var(--color-navy);text-align:center;opacity:.7}.forgot-title{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-navy);text-align:center}.forgot-subtitle{margin:0 0 var(--space-4);font-size:var(--text-base);color:var(--color-navy);text-align:center;opacity:.7}.forgot-link{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-navy);opacity:.6;text-decoration:none;transition:opacity var(--transition-fast)}.forgot-link:hover{opacity:1;text-decoration:underline}.forgot-back{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-navy);text-decoration:none;opacity:.6;transition:opacity var(--transition-fast)}.forgot-back:hover{opacity:1}.login-status{margin:0;padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-md);text-align:center;width:100%}.login-status.success{background:var(--color-sage);color:var(--color-navy)}.login-status.error{background:var(--color-bordeaux);color:var(--color-white)}.reset-form{gap:var(--space-3)}.hub-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding:var(--space-2);max-width:600px;margin:0 auto}.hub-modes{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.hub-mode-card{display:flex;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-4) var(--space-5);background:var(--color-cream);border:4px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:6px 6px 0 var(--color-navy);cursor:pointer;transition:all .15s ease;text-align:left}.hub-mode-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--color-navy)}.hub-mode-card:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--color-navy)}.hub-mode-turquoise{border-color:var(--color-turquoise);box-shadow:6px 6px 0 var(--color-turquoise-dark)}.hub-mode-turquoise:hover{box-shadow:9px 9px 0 var(--color-turquoise-dark)}.hub-mode-turquoise:active{box-shadow:4px 4px 0 var(--color-turquoise-dark)}.hub-mode-bordeaux{border-color:var(--color-bordeaux);box-shadow:6px 6px 0 var(--color-bordeaux-dark)}.hub-mode-bordeaux:hover{box-shadow:9px 9px 0 var(--color-bordeaux-dark)}.hub-mode-bordeaux:active{box-shadow:4px 4px 0 var(--color-bordeaux-dark)}.hub-mode-gold{border-color:var(--color-gold);box-shadow:6px 6px 0 var(--color-gold-dark)}.hub-mode-gold:hover{box-shadow:9px 9px 0 var(--color-gold-dark)}.hub-mode-gold:active{box-shadow:4px 4px 0 var(--color-gold-dark)}.hub-mode-img{width:80px;height:auto;flex-shrink:0;filter:drop-shadow(2px 2px 0 rgba(30,58,95,.15));transition:transform .2s ease}.hub-mode-card:hover .hub-mode-img{transform:scale(1.1) rotate(-3deg)}.hub-mode-content{flex:1;min-width:0}.hub-mode-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy);margin:0 0 2px}.hub-mode-subtitle{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.5px}.hub-mode-desc{font-size:var(--text-sm);color:var(--color-gray-600);margin:var(--space-1) 0 0 0;line-height:1.4}.hub-library-link{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;padding:var(--space-4) var(--space-5);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-navy);color:var(--color-navy);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all .15s}.hub-library-link svg{width:24px;height:24px}.hub-library-link:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy);background:var(--color-white)}.hub-library-link:active{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--color-navy)}@media(max-width:480px){.hub-container{padding:var(--space-2);gap:var(--space-3)}.hub-mode-card{padding:var(--space-3) var(--space-4);gap:var(--space-3);border-width:3px;box-shadow:4px 4px 0 var(--color-navy)}.hub-mode-card:hover{box-shadow:6px 6px 0 var(--color-navy)}.hub-mode-img{width:60px}.hub-mode-title{font-size:var(--text-lg)}.hub-library-link{padding:var(--space-3) var(--space-4);font-size:var(--text-base)}}.moooh-main{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.loading-library{display:flex;justify-content:center;align-items:center;padding:var(--space-8)}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-cream-dark);border-top-color:var(--color-bordeaux);border-radius:50%;animation:spin .8s linear infinite}.empty-library{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-6);background:#ffffffe6;border-radius:var(--radius-xl);border:3px solid var(--color-navy);box-shadow:6px 6px 0 var(--color-navy);max-width:400px;margin:0 auto}.empty-library .empty-icon{font-size:3rem;margin-bottom:var(--space-2)}.empty-library h3{margin:0;color:var(--color-navy);font-family:var(--font-display);font-size:var(--text-2xl)}.empty-library p{margin:0;color:var(--color-navy);font-size:var(--text-base);opacity:.8;line-height:1.5}.empty-library .btn-import{margin-top:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-bordeaux);color:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:4px 4px 0 var(--color-navy)}.empty-library .btn-import:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.shuffle-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}@media(max-width:480px){.moooh-main{gap:var(--space-3)}.empty-library{padding:var(--space-3);gap:var(--space-2)}.empty-library p{font-size:var(--text-base)}.empty-library .btn-import{padding:var(--space-2) var(--space-4);font-size:var(--text-base);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}}.jam-main{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.jam-start{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.jam-hint{font-size:var(--text-sm);color:var(--color-gray-600);margin-top:var(--space-4)}.jam-display{width:100%;display:flex;flex-direction:column;gap:var(--space-4)}.jam-song-header{text-align:center;padding:var(--space-3);background:var(--color-cream);border:3px solid var(--color-gold);border-radius:var(--radius-lg)}.jam-song-title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy)}.jam-song-artist{margin:var(--space-1) 0 0;font-size:var(--text-base);color:var(--color-gray-600)}.jam-song-key{display:inline-block;margin-top:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-turquoise);color:var(--color-navy);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm)}.jam-content{display:flex;flex-direction:column;gap:var(--space-4)}.jam-chords-section,.jam-lyrics-section{background:var(--color-cream);border:2px solid var(--color-gray-300);border-radius:var(--radius-lg);padding:var(--space-3)}.jam-chords-section h3,.jam-lyrics-section h3{margin:0 0 var(--space-2);font-size:var(--text-base);color:var(--color-navy);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-gray-200)}.jam-chords-section h3{color:var(--color-turquoise)}.jam-lyrics-section h3{color:var(--color-bordeaux)}.jam-chord-sheet{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6}.jam-section{margin-bottom:var(--space-3)}.jam-section-name{font-weight:700;color:var(--color-navy);margin-bottom:var(--space-1)}.jam-line{white-space:pre-wrap;color:var(--color-gray-700)}.jam-lyrics-text p,.jam-lyrics-html p{margin:0 0 var(--space-1);line-height:1.5}.jam-actions{display:flex;justify-content:center;gap:var(--space-3)}.btn-jam-next{padding:var(--space-3) var(--space-6);background:var(--color-gold);color:var(--color-navy);border:3px solid var(--color-navy);border-radius:var(--radius-lg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;cursor:pointer;transition:all .2s;box-shadow:4px 4px 0 var(--color-navy)}.btn-jam-next:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.mode-toggle,.mode-toggle-3{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.mode-active{font-weight:700;padding:var(--space-1) var(--space-2);background:var(--color-turquoise);color:#fff;border-radius:var(--radius-sm);font-size:var(--text-xs)}.mode-switch-btn{padding:var(--space-1) var(--space-2);background:var(--color-gray-100);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;transition:all .2s}.mode-switch-btn:hover{background:var(--color-gold);border-color:var(--color-gold)}.toggle-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm)}.toggle-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-turquoise);cursor:pointer}@media(max-width:480px){.jam-song-title{font-size:var(--text-lg)}.jam-song-header{padding:var(--space-2);border-width:2px}.jam-chords-section,.jam-lyrics-section{padding:var(--space-2)}.btn-jam-next{padding:var(--space-2) var(--space-4);font-size:var(--text-base);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}}@media(min-width:768px){.jam-content{flex-direction:row}.jam-chords-section,.jam-lyrics-section{flex:1;max-height:500px;overflow-y:auto}}.result-actions .btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;cursor:pointer;transition:all .2s;border:3px solid var(--color-navy);box-shadow:4px 4px 0 var(--color-navy)}.result-actions .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.result-actions .btn-moooh{background:var(--color-bordeaux);color:var(--color-white)}.result-actions .btn-share{background:var(--color-cream);color:var(--color-navy)}.result-actions .btn-edit{background:var(--color-gold);color:var(--color-navy)}.result-actions .btn-sheet{background:var(--color-turquoise);color:var(--color-navy)}.result-actions .btn-share.is-live{background:var(--color-red, #ef4444);color:#fff;border-color:var(--color-red, #ef4444);box-shadow:4px 4px #ef444480}.result-actions .btn-share .live-dot{width:10px;height:10px;background:#fff;border-radius:50%;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.emoji-overlay{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:999}.floating-emoji{position:absolute;animation:floatUp 2s ease-out forwards;left:calc(50% + (var(--random-x, 0) * 100px));bottom:100px}.floating-emoji svg{width:40px;height:40px;fill:var(--color-bordeaux);filter:drop-shadow(2px 2px 0 var(--color-navy))}@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-300px) scale(1.5);opacity:0}}.profil-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.profil-options-btn{position:absolute;top:var(--space-4);right:var(--space-4);width:36px;height:36px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.profil-options-btn svg{width:24px;height:24px;stroke:var(--color-navy);opacity:.6;transition:all .2s}.profil-options-btn:hover svg{opacity:1;stroke:var(--color-turquoise)}.profil-options-btn:active{transform:scale(.9)}.profil-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-4);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy)}.user-avatar{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);color:var(--color-white);font-size:var(--text-2xl);font-weight:var(--font-bold);border-radius:50%;border:3px solid var(--color-navy);box-shadow:3px 3px 0 var(--color-navy)}.user-name{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy)}.user-role{padding:var(--space-1) var(--space-3);background:var(--color-gold);color:var(--color-navy);font-size:var(--text-base);font-weight:var(--font-bold);border-radius:var(--radius-full);border:2px solid var(--color-gold-dark);text-transform:capitalize}.profil-stats{display:flex;gap:var(--space-3);width:100%}.stat-block{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4);background:var(--color-cream);border:3px solid var(--color-turquoise);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;box-shadow:4px 4px 0 var(--color-turquoise)}.stat-block:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-turquoise)}.stat-block:active{transform:translate(0);box-shadow:2px 2px 0 var(--color-turquoise)}.stat-block:nth-child(2){border-color:var(--color-bordeaux);box-shadow:4px 4px 0 var(--color-bordeaux)}.stat-block:nth-child(2):hover{box-shadow:6px 6px 0 var(--color-bordeaux)}.stat-block:nth-child(2):active{box-shadow:2px 2px 0 var(--color-bordeaux)}.stat-block:nth-child(2) .stat-value{color:var(--color-bordeaux)}.stat-value{font-family:var(--font-display);font-size:3.5rem;font-weight:var(--font-bold);color:var(--color-turquoise);line-height:1}.stat-label{font-size:var(--text-lg);color:var(--color-navy);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.05em}.stat-sub{font-size:var(--text-sm);color:var(--color-gray-500);font-weight:var(--font-medium)}.profil-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100%;margin-bottom:calc(-1 * var(--space-4))}.btn-logout-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:none;border:none;color:var(--color-gray-500);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all .2s}.btn-logout-link svg{width:18px;height:18px;stroke:var(--color-gray-500);transition:all .2s}.btn-logout-link:hover{color:var(--color-bordeaux)}.btn-logout-link:hover svg{stroke:var(--color-bordeaux)}.btn-donate-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:none;border:2px dashed var(--color-gold);border-radius:var(--radius-md);color:var(--color-gold-dark);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all .2s}.btn-donate-link svg{width:18px;height:18px;stroke:var(--color-gold);transition:all .2s}.btn-donate-link:hover{background:var(--color-gold);color:var(--color-navy);border-style:solid}.btn-donate-link:hover svg{stroke:var(--color-navy)}.profil-section{width:100%;padding:var(--space-4);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy)}.section-title{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy);text-align:center}.jam-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-3)}.stat-block.small{padding:var(--space-2) var(--space-3);border-width:2px;box-shadow:2px 2px 0 var(--color-turquoise)}.stat-block.small .stat-value{font-size:var(--text-2xl)}.stat-block.small .stat-label{font-size:var(--text-sm)}.stat-block.small:nth-child(2){border-color:var(--color-gold);box-shadow:2px 2px 0 var(--color-gold)}.stat-block.small:nth-child(2) .stat-value{color:var(--color-gold-dark)}.stat-block.small:nth-child(3){border-color:var(--color-bordeaux);box-shadow:2px 2px 0 var(--color-bordeaux)}.stat-block.small:nth-child(3) .stat-value{color:var(--color-bordeaux)}.stat-block.small:nth-child(4){border-color:var(--color-navy);box-shadow:2px 2px 0 var(--color-navy)}.stat-block.small:nth-child(4) .stat-value{color:var(--color-navy)}.btn-schedule{display:block;margin:0 auto;padding:var(--space-3) var(--space-5);background:var(--color-turquoise);color:var(--color-white);border:3px solid var(--color-gold);border-radius:var(--radius-lg);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-bold);cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 6px 20px #00000040}.btn-schedule:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 30px #0000004d,0 0 20px #d4883a66;border-color:var(--color-gold-light)}@media(max-width:480px){.profil-container{gap:var(--space-3)}.profil-header{padding:var(--space-3);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}.user-avatar{width:60px;height:60px;font-size:var(--text-xl);border-width:2px;box-shadow:2px 2px 0 var(--color-navy)}.user-name{font-size:var(--text-xl)}.profil-stats{gap:var(--space-2)}.stat-block{padding:var(--space-3);border-width:2px;box-shadow:3px 3px 0 var(--color-turquoise)}.stat-block:nth-child(2){box-shadow:3px 3px 0 var(--color-bordeaux)}.stat-value{font-size:var(--text-3xl)}.stat-label{font-size:var(--text-base)}.profil-section{padding:var(--space-3);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}.stat-block.small{padding:var(--space-2)}.stat-block.small .stat-value{font-size:var(--text-xl)}}.mode-selection{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);width:100%}.mode-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5);background:var(--color-cream);border:4px solid var(--color-navy);border-radius:var(--radius-xl);cursor:pointer;transition:all .2s ease;box-shadow:5px 5px 0 var(--color-navy)}.mode-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--color-navy)}.mode-card:active{transform:translate(0);box-shadow:2px 2px 0 var(--color-navy)}.mode-img{width:80px;height:auto;filter:drop-shadow(3px 3px 0 rgba(30,58,95,.15));transition:transform .2s}.mode-card:hover .mode-img{transform:scale(1.1) rotate(-3deg)}.mode-name{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy);line-height:1}.mode-tag{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.1em}.mode-moooh{border-color:var(--color-bordeaux);box-shadow:5px 5px 0 var(--color-bordeaux)}.mode-moooh:hover{box-shadow:8px 8px 0 var(--color-bordeaux)}.mode-moooh .mode-tag{background:var(--color-bordeaux);color:#fff}.mode-jam{border-color:var(--color-turquoise);box-shadow:5px 5px 0 var(--color-turquoise)}.mode-jam:hover{box-shadow:8px 8px 0 var(--color-turquoise)}.mode-jam .mode-tag{background:var(--color-turquoise);color:#fff}.mode-practice{border-color:var(--color-gold);box-shadow:5px 5px 0 var(--color-gold)}.mode-practice:hover{box-shadow:8px 8px 0 var(--color-gold)}.mode-practice .mode-tag{background:var(--color-gold);color:var(--color-navy)}@media(max-width:600px){.mode-selection{gap:var(--space-2)}.mode-card{padding:var(--space-3);border-width:3px;box-shadow:3px 3px 0 var(--color-navy)}.mode-card:hover{box-shadow:5px 5px 0 var(--color-navy)}.mode-img{width:50px}.mode-name{font-size:var(--text-base)}.mode-moooh{box-shadow:3px 3px 0 var(--color-bordeaux)}.mode-moooh:hover{box-shadow:5px 5px 0 var(--color-bordeaux)}.mode-jam{box-shadow:3px 3px 0 var(--color-turquoise)}.mode-jam:hover{box-shadow:5px 5px 0 var(--color-turquoise)}.mode-practice{box-shadow:3px 3px 0 var(--color-gold)}.mode-practice:hover{box-shadow:5px 5px 0 var(--color-gold)}}.historique-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.historique-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.historique-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy)}.historique-subtitle{font-size:var(--text-sm);color:var(--color-gray-600)}.historique-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);text-align:center}.historique-empty .empty-icon{font-size:3rem}.historique-list-block{background:var(--color-cream);border:3px solid var(--color-gold);border-radius:var(--radius-lg);overflow:hidden}.list-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:#d4883a33;border-bottom:2px solid var(--color-gold)}.list-icon{font-size:1.2rem}.list-label{font-weight:600;color:var(--color-navy);flex:1}.list-count{background:var(--color-gold);color:var(--color-navy);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:700}.historique-list{max-height:300px;overflow-y:auto}.historique-item{padding:var(--space-3);border-bottom:1px solid var(--color-gray-200)}.historique-item:last-child{border-bottom:none}.item-date{font-size:var(--text-xs);color:var(--color-gray-500);margin-bottom:var(--space-1)}.item-content{display:flex;align-items:center;gap:var(--space-2)}.item-chords,.item-lyrics{display:flex;align-items:center;gap:var(--space-2);flex:1}.item-icon{font-size:1rem}.item-title{font-weight:600;color:var(--color-navy);display:block}.item-artist{font-size:var(--text-sm);color:var(--color-gray-600);display:block}.item-separator{color:var(--color-gold);font-weight:700}.historique-actions{display:flex;justify-content:center;gap:var(--space-4)}@media(max-width:480px){.historique-container{gap:var(--space-3)}.historique-title{font-size:var(--text-lg)}.historique-list-block{border-width:2px}.list-header,.historique-item{padding:var(--space-2)}.item-content{flex-direction:column;align-items:flex-start;gap:var(--space-1)}.item-separator{display:none}.item-title{font-size:var(--text-sm)}.item-artist{font-size:var(--text-xs)}}.page-hero:has(.biblio-container){flex:0 0 auto}.page-hero:has(.biblio-container) .cow-header{max-width:180px}.page-content:has(.biblio-container){margin-top:var(--space-2);max-width:100%;flex:1}.page-layout:has(.biblio-container) .page-footer{margin-top:var(--space-4)}.biblio-container{display:flex;flex-direction:column;gap:var(--space-3);width:100%;height:100%;flex:1}.biblio-block{background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:4px 4px 0 var(--color-navy)}.header-block{display:flex;flex-direction:column;gap:var(--space-2)}.header-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.header-left{display:flex;align-items:center;gap:var(--space-3)}.biblio-title{margin:0;font-family:var(--font-body);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-navy);text-align:left}.song-count-badge{display:flex;align-items:center;justify-content:center;padding:6px 12px;background:var(--color-navy);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-white);line-height:1}.header-right{display:flex;align-items:center;gap:var(--space-2)}.biblio-options{position:relative}.btn-options{width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:50%;cursor:pointer;transition:all .2s;flex-shrink:0;opacity:.5}.btn-options svg{width:4px;height:18px}.btn-options:hover{opacity:1}.btn-add{width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--color-turquoise);border:3px solid var(--color-navy);border-radius:50%;cursor:pointer;transition:all .15s;flex-shrink:0;box-shadow:3px 3px 0 var(--color-navy)}.btn-add svg{width:28px;height:28px;stroke:var(--color-white);stroke-width:4;stroke-linecap:round}.btn-add:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy);background:var(--color-turquoise-dark)}.options-menu{position:absolute;top:calc(100% + var(--space-2));right:0;background:var(--color-cream);border:2px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy);z-index:10;overflow:hidden;min-width:140px}.options-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);background:transparent;border:none;border-bottom:1px dashed var(--color-gray-300);text-align:left;font-size:var(--text-sm);color:var(--color-navy);cursor:pointer}.options-item svg{width:16px;height:16px;flex-shrink:0}.options-item:last-child{border-bottom:none}.options-item:hover{background:var(--color-gold-light)}.search-block{display:flex;flex-direction:column;gap:var(--space-3)}.biblio-container .search-input{width:100%;padding:var(--space-3);background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-base);box-shadow:inset 2px 2px 0 var(--color-gray-200)}.biblio-container .search-input:focus{outline:none;border-color:var(--color-turquoise)}.filters-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.biblio-container .filter-btn,.filters-row .filter-btn,.filters-row .filter-dropdown .filter-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--color-white);border:2px solid var(--color-navy)!important;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-navy)!important;cursor:pointer;transition:all .15s;white-space:nowrap}.filters-row .filter-btn:hover{background:var(--color-gray-50);transform:translateY(-1px)}.filters-row .filter-btn.active{background:var(--color-navy);color:var(--color-white)!important}.filters-row .filter-btn.toggle.active{background:var(--color-turquoise);border-color:var(--color-turquoise-dark)!important}.filters-row .filter-chevron{width:12px;height:12px;transition:transform .2s;stroke:var(--color-navy)}.filter-dropdown{position:relative}.filter-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:160px;background:var(--color-cream);border:2px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy);z-index:50;overflow:hidden;animation:menuSlide .15s ease-out}@keyframes menuSlide{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.filter-option{display:block;width:100%;padding:10px 14px;background:transparent;border:none;border-bottom:1px solid var(--color-gray-200);text-align:left;font-size:var(--text-sm);color:var(--color-navy);cursor:pointer;transition:background .1s}.filter-option:last-child{border-bottom:none}.filter-option:hover{background:var(--color-gold-light)}.filter-option.active{background:var(--color-turquoise);color:var(--color-white);font-weight:var(--font-bold)}.songs-block{padding:0;background:transparent;border:none;box-shadow:none;flex:1;min-height:0;display:flex;flex-direction:column}.songs-block .songs-list{display:flex;flex-direction:column;gap:var(--space-2);flex:1;min-height:800px;max-height:calc(100vh - 320px);overflow-y:auto;padding:var(--space-1)}.biblio-container .song-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-cream);border:3px solid var(--color-turquoise);border-radius:var(--radius-md);cursor:pointer;transition:all .15s}.biblio-container .song-row:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--color-turquoise-dark);border-color:var(--color-turquoise-dark)}.biblio-container .song-row.custom{background:var(--color-cream)}.biblio-container .song-row.custom:hover{box-shadow:4px 4px 0 var(--color-turquoise-dark)}.biblio-container .song-row .song-info{display:flex;flex-direction:column;flex:1;min-width:0}.biblio-container .song-row .song-title{font-weight:var(--font-bold);font-size:var(--text-base);color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.biblio-container .song-row .song-artist{font-size:var(--text-sm);color:var(--color-gray-500)}.song-badges{display:flex;gap:6px;align-items:center}.badge{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-bold)}.badge.key{background:var(--color-turquoise);color:var(--color-white);width:auto;padding:0 var(--space-2)}.badge.content{background:var(--color-cream);border:2px solid var(--color-navy)}.badge.content svg{width:18px;height:18px}.badge.content.chords,.badge.content.sheet,.badge.content.lyrics{color:var(--color-navy)}.badge.icon{width:20px;height:20px;font-size:11px;font-weight:700;background:var(--color-gray-200);color:var(--color-gray-600);border-radius:var(--radius-sm)}.badge.icon.yt{background:#ff000026;color:#c00}.btn-delete{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-gray-300);font-size:1.4rem;cursor:pointer}.btn-delete:hover{color:var(--color-error)}.btn-library{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);color:var(--color-gray-400);cursor:pointer;transition:all .15s;flex-shrink:0}.btn-library svg{width:14px;height:14px}.btn-library:hover{border-color:var(--color-turquoise);color:var(--color-turquoise)}.btn-library.active{background:var(--color-turquoise);border-color:var(--color-turquoise);color:#fff}.btn-favorite{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-gray-400);cursor:pointer;transition:all .15s;flex-shrink:0}.btn-favorite svg{width:20px;height:20px}.btn-favorite:hover{color:var(--color-bordeaux);transform:scale(1.1)}.btn-favorite.active{color:var(--color-bordeaux)}.btn-favorite.active:hover{transform:scale(1.2)}.btn-admin{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--color-gold);border:2px solid var(--color-navy);border-radius:50%;cursor:pointer;transition:all .15s;flex-shrink:0;box-shadow:2px 2px 0 var(--color-navy)}.btn-admin svg{width:20px;height:20px;stroke:var(--color-navy)}.btn-admin:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy);background:var(--color-gold-light)}.pill.library{background:var(--color-turquoise-light, #e0f7fa);color:var(--color-turquoise-dark);border-color:var(--color-turquoise)}.pill.library.active{background:var(--color-turquoise);color:#fff;box-shadow:2px 2px 0 var(--color-turquoise-dark)}.pill.favorite{background:var(--color-bordeaux-light);color:var(--color-white);border-color:var(--color-bordeaux)}.pill.favorite.active{background:var(--color-bordeaux);box-shadow:2px 2px 0 var(--color-bordeaux-dark)}.songs-loader{display:flex;align-items:center;justify-content:center;padding:var(--space-4);color:var(--color-gray-500);font-size:var(--text-sm)}.biblio-container .empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);text-align:center}.biblio-container .empty-icon{font-size:3rem}@media(max-width:480px){.biblio-block{padding:var(--space-3);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}.biblio-title{font-size:var(--text-lg)}.header-row,.header-left{gap:var(--space-2)}.song-count-badge{min-width:36px;height:36px;font-size:var(--text-base)}.btn-add,.btn-options{width:36px;height:36px}.btn-add svg,.btn-options svg{width:18px;height:18px}.pill{padding:var(--space-1) var(--space-2);font-size:var(--text-sm)}.biblio-container .song-row{padding:var(--space-2) var(--space-3);gap:var(--space-2)}.badge{width:28px;height:28px}.badge.content{font-size:.9rem}.key-select{min-width:80px;padding:var(--space-2);font-size:var(--text-sm)}}.options-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.options-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy)}.options-header h1{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy)}.options-section{background:var(--color-cream);border:3px solid var(--color-turquoise);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:4px 4px 0 var(--color-turquoise)}.options-section-title{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-navy)}.options-radio-group{display:flex;flex-direction:column;gap:var(--space-2)}.option-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all .15s}.option-item:hover:not(.disabled){border-color:var(--color-turquoise);background:var(--color-turquoise-pale)}.option-item.active{border-color:var(--color-turquoise);background:var(--color-turquoise-pale);box-shadow:2px 2px 0 var(--color-turquoise-dark)}.option-item.disabled{opacity:.5;cursor:not-allowed}.option-radio{width:24px;height:24px;border:3px solid var(--color-navy);border-radius:50%;background:var(--color-white);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}.option-item.active .option-radio{background:var(--color-turquoise);border-color:var(--color-turquoise-dark)}.option-item.active .option-radio:after{content:"";width:10px;height:10px;background:var(--color-white);border-radius:50%}.option-content{flex:1;display:flex;flex-direction:column;gap:2px}.option-label{font-weight:var(--font-bold);font-size:var(--text-base);color:var(--color-navy)}.option-example{font-size:var(--text-sm);color:var(--color-gray-500);font-family:var(--font-mono, monospace)}.option-soon{font-size:var(--text-xs);color:var(--color-gold-dark);font-weight:var(--font-bold);text-transform:uppercase}.language-dropdown-container{width:100%}.language-dropdown{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-navy);cursor:pointer;box-shadow:3px 3px 0 var(--color-navy);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231E3A5F' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px}.language-dropdown:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}.language-dropdown:focus{outline:none;border-color:var(--color-turquoise);box-shadow:3px 3px 0 var(--color-turquoise)}.language-dropdown option{background:var(--color-cream);color:var(--color-navy);font-weight:var(--font-medium);padding:var(--space-2)}.profile-field{padding:var(--space-3) 0;border-bottom:1px solid var(--color-gray-200)}.profile-field:last-child{border-bottom:none;padding-bottom:0}.profile-field label{display:block;font-size:var(--text-sm);color:var(--color-gray-500);margin-bottom:var(--space-1)}.profile-value-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.profile-value{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-navy)}.profile-edit-row{display:flex;align-items:center;gap:var(--space-2)}.profile-edit-row input{flex:1;padding:var(--space-2);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);font-size:var(--text-base)}.profile-edit-row input:focus{outline:none;border-color:var(--color-turquoise)}.profile-edit-column{display:flex;flex-direction:column;gap:var(--space-2)}.profile-edit-column input{padding:var(--space-2);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);font-size:var(--text-base)}.profile-edit-column input:focus{outline:none;border-color:var(--color-turquoise)}.profile-edit-actions{display:flex;gap:var(--space-2);margin-top:var(--space-1)}.btn-edit-small{padding:var(--space-1) var(--space-2);background:none;border:none;color:var(--color-turquoise);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer}.btn-edit-small:hover{color:var(--color-turquoise-dark);text-decoration:underline}.btn-save-small{padding:var(--space-2) var(--space-3);background:var(--color-turquoise);color:var(--color-white);border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-bold);cursor:pointer}.btn-save-small:hover{background:var(--color-turquoise-dark)}.btn-save-small:disabled{opacity:.6;cursor:not-allowed}.btn-cancel-small{padding:var(--space-2) var(--space-3);background:var(--color-gray-200);color:var(--color-navy);border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer}.btn-cancel-small:hover{background:var(--color-gray-300)}.field-error{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--color-error)}.field-success{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--color-success, #22c55e)}.options-section-desc{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--color-gray-500)}.options-actions{display:flex;justify-content:center;padding-top:var(--space-2)}.btn-back-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:50%;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--color-navy)}.btn-back-icon svg{width:24px;height:24px;stroke:var(--color-navy)}.btn-back-icon:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}@media(max-width:480px){.options-container{gap:var(--space-3)}.options-header{padding:var(--space-2);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}.options-header h1{font-size:var(--text-xl)}.options-section{padding:var(--space-3);border-width:2px;box-shadow:3px 3px 0 var(--color-turquoise)}.option-item{padding:var(--space-2)}.option-radio{width:20px;height:20px;border-width:2px}.option-item.active .option-radio:after{width:8px;height:8px}}.spectator-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-4)}.spectator-waiting{text-align:center;margin-top:var(--space-8)}.spectator-waiting p{margin-top:var(--space-4);font-size:var(--text-lg);color:var(--color-gray-600)}.spectator-count{display:block;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-gray-500)}.waiting-session-name{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy);margin:0 0 var(--space-4);padding:var(--space-2) var(--space-4);background:#ffffffe6;border-radius:var(--radius-lg);box-shadow:0 4px 12px #0000001a}.spectator-mode-logo{display:flex;justify-content:center;margin-top:var(--space-6);padding-top:var(--space-4)}.spectator-mode-logo img{width:160px;height:auto}.spectator-logo-spinner{display:flex;justify-content:center;margin-bottom:var(--space-4)}.spectator-logo-spinner img{width:140px;height:auto;animation:logoSpin 3s ease-in-out infinite}@keyframes logoSpin{0%,to{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}.spectator-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.live-badge{background:var(--color-red, #ef4444);color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;animation:pulse 1.5s ease-in-out infinite}.youtube-live-link{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:red;color:#fff;text-decoration:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;transition:all .2s}.youtube-live-link svg{width:16px;height:16px;fill:#fff}.youtube-live-link:hover{background:#c00;transform:scale(1.05)}.spectator-song{width:100%;background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-4) var(--space-6);margin-bottom:120px;box-shadow:4px 4px 0 var(--color-navy)}.spectator-song .song-cover{display:block;width:120px;height:120px;object-fit:cover;border-radius:var(--radius-md);border:2px solid var(--color-navy);margin:0 auto var(--space-3)}.spectator-song .song-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy);margin:0;text-align:center}.spectator-song .song-artist{font-size:var(--text-lg);color:var(--color-gray-600);margin:var(--space-1) 0 var(--space-3);text-align:center}.song-key{display:block;text-align:center;margin:0 auto var(--space-4);padding:var(--space-1) var(--space-3);background:var(--color-turquoise);color:var(--color-navy);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);width:fit-content}.spectator-toggles{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4)}.spectator-toggles .toggle-btn{padding:var(--space-2) var(--space-4);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;color:var(--color-gray-600);cursor:pointer;transition:all .2s}.spectator-toggles .toggle-btn:hover{border-color:var(--color-turquoise);color:var(--color-turquoise)}.spectator-toggles .toggle-btn.active{background:var(--color-turquoise);border-color:var(--color-turquoise);color:#fff}.spectator-chords,.spectator-lyrics{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-gray-200)}.spectator-chords h3,.spectator-lyrics h3{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--space-2)}.spectator-chords h3{color:var(--color-turquoise)}.spectator-lyrics h3{color:var(--color-bordeaux)}.chords-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chords-content{font-family:Courier New,monospace;font-size:var(--text-sm);line-height:1.6;white-space:pre-wrap;color:var(--color-navy)}.lyrics-text{font-size:var(--text-sm);line-height:1.6;color:var(--color-gray-700);white-space:pre-wrap}.lyrics-text p{margin:0 0 var(--space-1)}.more-lyrics{color:var(--color-gray-400);font-style:italic}.emoji-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-cream);border-top:4px solid var(--color-navy);box-shadow:0 -4px 12px #0000001a}.emoji-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--color-navy)}.emoji-btn svg{width:28px;height:28px;fill:var(--color-bordeaux);transition:all .15s ease}.emoji-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-navy);background:var(--color-cream)}.emoji-btn:hover svg{fill:var(--color-turquoise);transform:scale(1.1)}.emoji-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-navy)}.spectator-error,.spectator-ended{text-align:center;max-width:400px;padding:var(--space-6);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);margin-top:var(--space-8)}.error-icon,.ended-icon{font-size:3rem;display:block;margin-bottom:var(--space-3)}.spectator-error h2,.spectator-ended h2{font-family:var(--font-display);color:var(--color-navy);margin:0 0 var(--space-2)}.spectator-error p,.spectator-ended p{color:var(--color-gray-600);margin:0 0 var(--space-4)}.btn-home{padding:var(--space-2) var(--space-4);background:var(--color-gold);color:var(--color-navy);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:600;cursor:pointer}.spectator-footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-4);margin-bottom:100px}.spectator-footer a{display:block;transition:transform .2s}.spectator-footer a:hover{transform:scale(1.1)}.spectator-footer .footer-logo{width:140px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.footer-donate-btn{width:36px;height:36px;background:var(--color-gold);border:2px solid var(--color-navy);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.footer-donate-btn svg{width:18px;height:18px;stroke:var(--color-navy)}.footer-donate-btn:hover{transform:scale(1.1);background:var(--color-gold-light)}@media(max-width:480px){.spectator-page{padding:var(--space-2)}.emoji-btn{width:50px;height:50px;font-size:1.5rem}.emoji-bar{gap:var(--space-2);padding:var(--space-3)}.spectator-footer .footer-logo{width:120px}}.landing-page{min-height:100vh}.landing-main{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}.landing-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--space-6);max-width:1200px;margin:0 auto}.lang-dropdown{position:relative}.lang-dropdown-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);color:var(--color-navy);font-family:var(--font-display);font-size:var(--text-base);font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--color-navy);transition:all .2s}.lang-dropdown-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}.lang-dropdown-btn svg{width:14px;height:14px}.lang-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy);overflow:hidden;z-index:100;animation:dropIn .15s ease-out}.lang-dropdown-item{display:block;width:100%;padding:var(--space-2) var(--space-5);background:transparent;border:none;color:var(--color-navy);font-family:var(--font-display);font-size:var(--text-base);font-weight:600;cursor:pointer;text-align:left;transition:background .15s}.lang-dropdown-item:hover{background:var(--color-gray-100)}.lang-dropdown-item.active{background:var(--color-navy);color:var(--color-cream)}.header-actions{display:flex;gap:var(--space-4);align-items:center}.header-jams-btn{padding:var(--space-3) var(--space-5);background:transparent;border:3px solid var(--color-navy);border-radius:var(--radius-md);color:var(--color-navy);font-size:var(--text-base);font-weight:700;text-decoration:none;transition:all .2s}.header-jams-btn:hover{background:var(--color-navy);color:var(--color-cream)}.header-login-btn{padding:var(--space-3) var(--space-6);background:var(--color-gold);border:4px solid var(--color-navy);border-radius:var(--radius-lg);color:var(--color-navy);font-size:var(--text-lg);font-weight:700;text-decoration:none;box-shadow:5px 5px 0 var(--color-navy);transition:all .2s}.header-login-btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--color-navy)}.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-8) var(--space-6) var(--space-12)}.hero-mascot{width:clamp(280px,40vw,400px);height:auto;margin-bottom:var(--space-4);filter:drop-shadow(12px 12px 0 rgba(30,58,95,.25));animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.hero-logo{width:clamp(200px,35vw,350px);height:auto;margin-bottom:var(--space-2)}.hero-tagline{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,2rem);color:var(--color-bordeaux);margin:var(--space-3) 0 var(--space-6)}.hero-cta{display:inline-block;padding:var(--space-4) var(--space-8);background:var(--color-bordeaux);color:#fff;font-family:var(--font-display);font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:700;text-decoration:none;border:4px solid var(--color-navy);border-radius:var(--radius-xl);box-shadow:6px 6px 0 var(--color-navy);transition:all .2s}.hero-cta:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--color-navy)}.features{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-12)}.feature-card{padding:var(--space-10);background:var(--color-cream);border:5px solid var(--color-navy);border-radius:var(--radius-2xl);box-shadow:8px 8px 0 var(--color-navy);text-align:center;transition:all .3s}.feature-card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--color-navy)}.feature-img{width:180px;height:auto;margin-bottom:var(--space-6);filter:drop-shadow(6px 6px 0 rgba(30,58,95,.15));transition:transform .3s}.feature-card:hover .feature-img{transform:scale(1.08) rotate(-3deg)}.feature-card h2{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);color:var(--color-navy);margin:0 0 var(--space-4);line-height:1}.feature-card p{font-family:var(--font-body);font-size:clamp(1.1rem,2vw,1.4rem);color:var(--color-gray-600);margin:0 0 var(--space-5);line-height:1.5}.feature-tag{display:inline-block;padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-base);font-weight:700;text-transform:uppercase;letter-spacing:.1em}.tag-live{background:var(--color-bordeaux);color:#fff}.tag-solo{background:var(--color-gold);color:var(--color-navy)}.feature-moooh:hover{border-color:var(--color-turquoise);box-shadow:12px 12px 0 var(--color-turquoise)}.feature-jam:hover{border-color:var(--color-bordeaux);box-shadow:12px 12px 0 var(--color-bordeaux)}.practice-section{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);padding:var(--space-10);margin-bottom:var(--space-12);background:var(--color-cream);border:5px solid var(--color-navy);border-radius:var(--radius-2xl);box-shadow:8px 8px 0 var(--color-navy);transition:all .3s}.practice-section:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--color-gold-dark);border-color:var(--color-gold-dark)}.practice-content{flex:1}.practice-content h2{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);color:var(--color-navy);margin:var(--space-3) 0 var(--space-4);line-height:1}.practice-content p{font-family:var(--font-body);font-size:clamp(1.1rem,2vw,1.4rem);color:var(--color-gray-600);margin:0;line-height:1.5}.practice-img{width:220px;height:auto;filter:drop-shadow(6px 6px 0 rgba(30,58,95,.15));transition:transform .3s}.practice-section:hover .practice-img{transform:scale(1.05) rotate(3deg)}.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-12)}.signup-card,.join-card{padding:var(--space-8);background:var(--color-cream);border-radius:var(--radius-2xl);text-align:center;transition:all .3s}.signup-card{border:5px solid var(--color-navy);box-shadow:8px 8px 0 var(--color-navy)}.signup-card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--color-navy)}.join-card{border:5px solid var(--color-turquoise);box-shadow:8px 8px 0 var(--color-turquoise)}.join-card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--color-turquoise)}.signup-card h2,.join-card h2{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.5rem);color:var(--color-navy);margin:0 0 var(--space-5)}.join-form{display:flex;gap:var(--space-3);justify-content:center}.join-form input{flex:1;padding:var(--space-3);font-size:var(--text-lg);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;text-align:center;border:4px solid var(--color-gray-300);border-radius:var(--radius-lg)}.join-form input:focus{outline:none;border-color:var(--color-navy)}.join-form input.error{border-color:var(--color-bordeaux)}.join-form button{padding:var(--space-3) var(--space-6);background:var(--color-turquoise);color:var(--color-navy);font-size:var(--text-lg);font-weight:700;border:4px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-navy);cursor:pointer;transition:all .2s}.join-form button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.join-form button:disabled{opacity:.5;cursor:not-allowed;transform:none}.error-text{color:var(--color-bordeaux);font-size:var(--text-base);margin-top:var(--space-2)}.notify-btn{margin-top:var(--space-4);margin-right:var(--space-3);padding:var(--space-2) var(--space-4);background:transparent;border:2px dashed var(--color-turquoise);border-radius:var(--radius-md);color:var(--color-turquoise);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s}.notify-btn:hover{background:var(--color-turquoise);color:#fff;border-style:solid}.signup-inline{display:flex;gap:var(--space-3)}.signup-inline input{flex:1;padding:var(--space-3);font-size:var(--text-lg);border:4px solid var(--color-gray-300);border-radius:var(--radius-lg)}.signup-inline input:focus{outline:none;border-color:var(--color-navy)}.signup-inline button{width:50px;height:50px;border-radius:50%;background:var(--color-gold);color:var(--color-navy);font-size:1.3rem;font-weight:700;border:4px solid var(--color-navy);box-shadow:4px 4px 0 var(--color-navy);cursor:pointer;transition:all .2s;flex-shrink:0}.signup-inline button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.signup-inline button:disabled{opacity:.3;cursor:not-allowed}.signup-overlay{position:fixed;inset:0;background:#1e3a5f80;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:signupFadeIn .2s}@keyframes signupFadeIn{0%{opacity:0}to{opacity:1}}.signup-modal{position:relative;background:var(--color-cream);border:5px solid var(--color-navy);border-radius:var(--radius-2xl);box-shadow:10px 10px 0 var(--color-navy);padding:var(--space-8);max-width:380px;width:90%;text-align:center;animation:signupSlideUp .3s}@keyframes signupSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.signup-close{position:absolute;top:var(--space-3);right:var(--space-3);width:36px;height:36px;background:var(--color-gray-200);border:3px solid var(--color-navy);border-radius:50%;font-size:1.2rem;color:var(--color-navy);cursor:pointer;line-height:1;transition:all .2s;display:flex;align-items:center;justify-content:center}.signup-close:hover{background:var(--color-navy);color:var(--color-cream)}.signup-mascot{width:100px;height:auto;margin-bottom:var(--space-3);filter:drop-shadow(4px 4px 0 rgba(30,58,95,.15))}.signup-form-modal h2{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.5rem);color:var(--color-navy);margin:0 0 var(--space-5)}.signup-form-modal input{width:100%;padding:var(--space-4);font-size:var(--text-lg);border:4px solid var(--color-navy);border-radius:var(--radius-lg);margin-bottom:var(--space-4);box-sizing:border-box;background:#fff}.signup-form-modal input:focus{outline:none;border-color:var(--color-turquoise)}.signup-email{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy);margin:0 0 var(--space-4);font-weight:600}.signup-next{width:56px;height:56px;border-radius:50%;background:var(--color-turquoise);color:var(--color-navy);font-size:1.5rem;font-weight:700;border:4px solid var(--color-navy);box-shadow:4px 4px 0 var(--color-navy);cursor:pointer;transition:all .2s}.signup-next:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.signup-next:disabled{opacity:.3;cursor:not-allowed}.signup-submit{width:100%;padding:var(--space-4);background:var(--color-gold);color:var(--color-navy);font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;border:4px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:5px 5px 0 var(--color-navy);cursor:pointer;transition:all .2s}.signup-submit:hover:not(:disabled){transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--color-navy)}.signup-submit:disabled{opacity:.4;cursor:not-allowed}.signup-back{background:none;border:none;color:var(--color-gray-500);font-size:var(--text-base);cursor:pointer;margin-top:var(--space-4);transition:color .2s}.signup-back:hover{color:var(--color-navy)}.notify-modal{border-color:var(--color-turquoise);box-shadow:10px 10px 0 var(--color-turquoise)}.notify-form h2{color:var(--color-turquoise)}.notify-desc{font-size:var(--text-base);color:var(--color-gray-600);margin:0 0 var(--space-4);line-height:1.5}.notify-country{font-size:var(--text-sm);color:var(--color-gray-500);margin:0 0 var(--space-3);background:var(--color-gray-100);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);display:inline-block}.notify-submit-btn{width:100%;padding:var(--space-4);background:var(--color-turquoise);color:#fff;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;border:4px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:5px 5px 0 var(--color-navy);cursor:pointer;transition:all .2s}.notify-submit-btn:hover:not(:disabled){transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--color-navy)}.notify-submit-btn:disabled{opacity:.4;cursor:not-allowed}.notify-success{text-align:center}.notify-success h2{color:var(--color-turquoise);margin-bottom:var(--space-3)}.notify-success p{color:var(--color-gray-600);margin-bottom:var(--space-5)}.notify-done-btn{padding:var(--space-3) var(--space-6);background:var(--color-gray-200);color:var(--color-navy);font-weight:600;border:3px solid var(--color-navy);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.notify-done-btn:hover{background:var(--color-navy);color:#fff}.donate-modal{border-color:var(--color-gold);box-shadow:10px 10px 0 var(--color-gold)}.donate-form h2{color:var(--color-gold-dark);font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.5rem);margin:0 0 var(--space-3)}.donate-desc{font-size:var(--text-base);color:var(--color-gray-600);margin:0 0 var(--space-5);line-height:1.5}.donate-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}.donate-amount-btn{padding:var(--space-3);background:#fff;border:3px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:700;color:var(--color-navy);cursor:pointer;transition:all .2s}.donate-amount-btn:hover{border-color:var(--color-gold);transform:translateY(-2px)}.donate-amount-btn.selected{background:var(--color-gold);border-color:var(--color-navy);box-shadow:3px 3px 0 var(--color-navy)}.donate-custom{position:relative;margin-bottom:var(--space-4)}.donate-custom input{width:100%;padding:var(--space-3) var(--space-8) var(--space-3) var(--space-4);font-size:var(--text-lg);border:3px solid var(--color-gray-300);border-radius:var(--radius-md);box-sizing:border-box}.donate-custom input:focus{outline:none;border-color:var(--color-gold)}.donate-custom input.has-value{border-color:var(--color-gold);background:#d4883a1a}.donate-currency{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);font-size:var(--text-lg);font-weight:700;color:var(--color-gray-500)}.donate-recurring{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding:var(--space-3);background:var(--color-gray-100);border-radius:var(--radius-md);cursor:pointer}.donate-recurring input{width:20px;height:20px;accent-color:var(--color-gold)}.donate-recurring span{font-size:var(--text-base);color:var(--color-navy);font-weight:600}.donate-submit-btn{width:100%;padding:var(--space-4);background:var(--color-gold);color:var(--color-navy);font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;border:4px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:5px 5px 0 var(--color-navy);cursor:pointer;transition:all .2s}.donate-submit-btn:hover:not(:disabled){transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--color-navy)}.donate-submit-btn:disabled{opacity:.4;cursor:not-allowed}.donate-secure{font-size:var(--text-sm);color:var(--color-gray-500);margin:var(--space-3) 0 0}.donate-btn{margin-top:var(--space-4);margin-left:var(--space-3);padding:var(--space-2) var(--space-4);background:transparent;border:2px dashed var(--color-gold);border-radius:var(--radius-md);color:var(--color-gold-dark);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all .2s}.donate-btn:hover{background:var(--color-gold);color:var(--color-navy);border-style:solid}.donate-result-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6)}.donate-result-card{background:var(--color-cream);border:5px solid var(--color-navy);border-radius:var(--radius-2xl);box-shadow:10px 10px 0 var(--color-navy);padding:var(--space-8);max-width:400px;text-align:center;animation:signupSlideUp .3s}.donate-result-card.success{border-color:var(--color-gold);box-shadow:10px 10px 0 var(--color-gold)}.donate-result-card.cancel{border-color:var(--color-gray-400);box-shadow:10px 10px 0 var(--color-gray-400)}.donate-result-card .result-icon{margin-bottom:var(--space-4)}.donate-result-card .result-icon svg{width:80px;height:80px}.donate-result-card.success .result-icon svg{stroke:var(--color-gold);fill:#d4883a33}.donate-result-card.cancel .result-icon svg{stroke:var(--color-gray-500)}.donate-result-card h1{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-navy);margin:0 0 var(--space-3)}.donate-result-card p{color:var(--color-gray-600);margin:0 0 var(--space-5);line-height:1.5}.donate-result-card .amount-badge{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-gold);color:var(--color-navy);font-size:var(--text-xl);font-weight:700;border-radius:var(--radius-lg);margin-bottom:var(--space-5)}.donate-result-card .btn-home{padding:var(--space-3) var(--space-6);background:var(--color-navy);color:var(--color-cream);font-size:var(--text-base);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.donate-result-card .btn-home:hover{transform:translateY(-2px);box-shadow:0 4px 12px #1e3a5f4d}.bento-username{max-width:500px;margin:var(--space-12) auto;text-align:center;background:var(--color-cream);border:5px solid var(--color-gold);box-shadow:10px 10px 0 var(--color-gold-dark);padding:var(--space-10);border-radius:var(--radius-2xl)}.username-mascot{width:180px;height:auto;margin-bottom:var(--space-6)}.bento-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);color:var(--color-navy);margin:0 0 var(--space-6)}.bento-input{padding:var(--space-4);font-size:var(--text-xl);border:4px solid var(--color-gray-300);border-radius:var(--radius-lg);text-align:center}.bento-input:focus{outline:none;border-color:var(--color-navy)}.bento-btn{padding:var(--space-4);font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;border:4px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:5px 5px 0 var(--color-navy);cursor:pointer;transition:all .2s}.bento-btn-gold{background:var(--color-gold);color:var(--color-navy)}.bento-btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--color-navy)}.bento-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.bento-error{color:var(--color-bordeaux);font-size:var(--text-base);margin:0}@media(max-width:900px){.features{grid-template-columns:1fr}.practice-section{flex-direction:column;text-align:center}.actions-row{grid-template-columns:1fr}}@media(max-width:600px){.landing-main{padding:0 var(--space-4)}.landing-header{padding:var(--space-4)}.hero{padding:var(--space-6) var(--space-4) var(--space-10)}.hero-mascot{width:240px}.feature-card{padding:var(--space-6)}.feature-img{width:120px}.practice-section{padding:var(--space-6)}.practice-img{width:140px}.signup-card,.join-card{padding:var(--space-6)}.join-form{flex-direction:column}}.bento-what{grid-column:span 2;text-align:center;background:linear-gradient(135deg,var(--color-turquoise-pale) 0%,var(--color-cream) 100%);border-color:var(--color-turquoise);box-shadow:5px 5px 0 var(--color-turquoise-dark);padding:var(--space-8) var(--space-6)}.bento-what:hover{box-shadow:7px 7px 0 var(--color-turquoise-dark)}.bento-what .bento-title{color:var(--color-turquoise-dark);font-size:var(--text-2xl)}.bento-what .bento-text{max-width:600px;margin:0 auto;font-size:var(--text-lg)}.bento-library{background:var(--color-cream);border-color:var(--color-gold);box-shadow:5px 5px 0 var(--color-gold-dark)}.bento-library:hover{box-shadow:7px 7px 0 var(--color-gold-dark)}.bento-library .bento-title{color:var(--color-gold-dark)}.card-icon{width:80px;height:auto;margin-bottom:var(--space-3);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.1))}.bento-jam{display:flex;align-items:center;gap:var(--space-4);background:var(--color-cream);border-color:var(--color-bordeaux);box-shadow:5px 5px 0 var(--color-bordeaux-dark)}.bento-jam:hover{box-shadow:7px 7px 0 var(--color-bordeaux-dark)}.bento-jam .card-icon{width:120px;flex-shrink:0}.bento-jam .bento-title{color:var(--color-bordeaux);font-size:var(--text-2xl);margin-bottom:var(--space-2)}.bento-jam .bento-text{font-size:var(--text-lg);line-height:1.5}.bento-jam .card-content{flex:1}.bento-moooh{display:flex;align-items:center;gap:var(--space-4);background:var(--color-cream);border-color:var(--color-bordeaux);box-shadow:5px 5px 0 var(--color-bordeaux-dark)}.bento-moooh:hover{box-shadow:7px 7px 0 var(--color-bordeaux-dark)}.bento-moooh .card-icon{width:120px;flex-shrink:0}.bento-moooh .bento-title{color:var(--color-bordeaux);font-size:var(--text-2xl);margin-bottom:var(--space-2)}.bento-moooh .bento-text{font-size:var(--text-lg);line-height:1.5}.bento-moooh .card-content{flex:1}.bento-example{font-size:var(--text-sm);font-style:italic;color:var(--color-bordeaux-light);margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);background:var(--color-cream-dark);border-radius:var(--radius-sm);border-left:3px solid var(--color-bordeaux)}.bento-join{background:var(--color-cream);border-color:var(--color-turquoise);box-shadow:5px 5px 0 var(--color-turquoise-dark)}.bento-join:hover{box-shadow:7px 7px 0 var(--color-turquoise-dark)}.bento-join .bento-title{color:var(--color-turquoise-dark)}.bento-signup{grid-column:span 2;background:var(--color-cream);border:3px solid var(--color-gold);box-shadow:5px 5px 0 var(--color-gold-dark);padding:var(--space-5);display:flex;flex-direction:column;align-items:center}.bento-signup:hover{box-shadow:7px 7px 0 var(--color-gold-dark)}.bento-signup .bento-title{color:var(--color-gold-dark);font-size:var(--text-xl);text-align:center;margin-bottom:var(--space-2)}.bento-signup .bento-text{text-align:center;margin-bottom:var(--space-3);color:var(--color-gray-600)}@media(max-width:800px){.bento-what,.bento-signup{grid-column:span 1}.bento-what .bento-title,.bento-signup .bento-title{font-size:var(--text-xl)}.card-icon{width:60px}.bento-jam .card-icon,.bento-moooh .card-icon{width:70px}}.bento-input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);color:var(--color-navy);background:var(--color-white);border:3px solid var(--color-gray-300);border-radius:var(--radius-md);transition:all .2s ease;box-shadow:inset 2px 2px #00000008}.bento-input:focus{outline:none;border-color:var(--color-turquoise);box-shadow:inset 2px 2px #00000008,0 0 0 3px var(--color-turquoise-pale)}.bento-input::placeholder{color:var(--color-gray-500)}.bento-input.error{border-color:var(--error)}.bento-input-code{text-align:center;text-transform:uppercase;letter-spacing:.15em;font-weight:var(--font-bold);font-size:var(--text-lg);background:var(--color-cream);border-color:var(--color-turquoise)}.join-form-bento{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.join-form-bento .bento-input{flex:1}.signup-form-bento{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;align-items:center;width:100%;max-width:600px}.signup-form-bento .bento-input{flex:1;min-width:180px;max-width:220px}.signup-form-bento .bento-btn{flex-shrink:0}.username-form{display:flex;flex-direction:column;gap:var(--space-4)}.bento-btn{padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--font-bold);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;border:3px solid;text-transform:none}.bento-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.bento-btn-turquoise{background:var(--color-turquoise);border-color:var(--color-turquoise-dark);color:var(--color-white);box-shadow:4px 4px 0 var(--color-turquoise-dark)}.bento-btn-turquoise:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-turquoise-dark)}.bento-btn-bordeaux{background:var(--color-bordeaux);border-color:var(--color-bordeaux-dark);color:var(--color-white);box-shadow:4px 4px 0 var(--color-bordeaux-dark)}.bento-btn-bordeaux:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-bordeaux-dark)}.bento-btn-gold{background:var(--color-gold);border-color:var(--color-gold-dark);color:var(--color-navy);box-shadow:4px 4px 0 var(--color-gold-dark)}.bento-btn-gold:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-gold-dark)}.bento-error{color:var(--error);font-size:var(--text-sm);margin:0;text-align:center;padding:var(--space-2);background:#e85a5a1a;border-radius:var(--radius-sm)}.bento-footer{font-size:var(--text-sm);color:var(--color-gray-600);margin:var(--space-4) 0 0;text-align:center}.bento-footer a{color:var(--color-turquoise);font-weight:var(--font-bold);text-decoration:none}.bento-footer a:hover{text-decoration:underline}.bento-signup{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center}.bento-signup-left{display:flex;flex-direction:column;gap:var(--space-2);text-align:left}.bento-signup .bento-title,.bento-signup .bento-text{margin:0}.bento-signup .signup-form-bento{width:100%;flex-direction:column;gap:var(--space-3);justify-content:center;max-width:none}.bento-signup .signup-form-bento .bento-input{max-width:100%;min-width:100%;border-color:var(--color-navy)}@media(max-width:640px){.join-form-bento{flex-direction:column}.signup-form-bento{max-width:100%}.bento-signup{grid-template-columns:1fr;text-align:center}.bento-signup-left{align-items:center}}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.share-modal{position:relative;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:8px 8px 0 var(--color-navy);padding:var(--space-6);max-width:400px;width:100%;text-align:center}.modal-close{position:absolute;top:var(--space-2);right:var(--space-2);background:none;border:none;font-size:var(--text-2xl);color:var(--color-gray-500);cursor:pointer;line-height:1;padding:var(--space-1)}.modal-close:hover{color:var(--color-navy)}.share-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy);margin:0 0 var(--space-4)}.share-qr{display:flex;justify-content:center;margin-bottom:var(--space-4);padding:var(--space-3);background:#fff;border-radius:var(--radius-md);border:2px solid var(--color-gray-200)}.share-code{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4)}.code-label{font-size:var(--text-sm);color:var(--color-gray-600)}.code-value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-turquoise);letter-spacing:.2em;background:var(--color-white);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:2px dashed var(--color-turquoise)}.share-url{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}.url-input{flex:1;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm);background:var(--color-white);color:var(--color-navy)}.btn-copy{padding:var(--space-2) var(--space-4);background:var(--color-gold);color:var(--color-navy);border:2px solid var(--color-gold-dark);border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:var(--text-sm);cursor:pointer;transition:all .2s}.btn-copy:hover{background:var(--color-gold-dark)}.share-spectators{display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-base);color:var(--color-gray-600)}.spectator-icon{font-size:var(--text-xl)}.btn-end-session-link{margin-top:var(--space-4);padding:var(--space-2);background:none;color:var(--color-gray-400);border:none;font-size:var(--text-xs);cursor:pointer;opacity:.6;transition:all .2s}.btn-end-session-link:hover{color:var(--color-red, #ef4444);opacity:1}.share-youtube{margin-bottom:var(--space-4);text-align:left}.youtube-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-bordeaux);margin-bottom:var(--space-2)}.youtube-icon{width:20px;height:20px;fill:red}.youtube-input-row{display:flex;gap:var(--space-2)}.youtube-input{flex:1;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm);background:var(--color-white);color:var(--color-navy)}.youtube-input:focus{outline:none;border-color:red}.btn-youtube-save{padding:var(--space-2) var(--space-3);background:red;color:#fff;border:2px solid #CC0000;border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:var(--text-sm);cursor:pointer;transition:all .2s}.btn-youtube-save:hover{background:#c00}.share-session-name{margin-bottom:var(--space-2)}.share-title{cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2)}.share-title .edit-hint{font-size:var(--text-sm);opacity:.5;transition:opacity .2s}.share-title:hover .edit-hint{opacity:1}.session-name-edit{display:flex;gap:var(--space-2);justify-content:center}.session-name-input{flex:1;max-width:200px;padding:var(--space-2) var(--space-3);border:2px solid var(--color-turquoise);border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--text-xl);text-align:center;background:var(--color-white);color:var(--color-navy)}.session-name-input:focus{outline:none;border-color:var(--color-gold)}.btn-name-save{padding:var(--space-2) var(--space-3);background:var(--color-turquoise);color:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer}.btn-name-save:hover{background:var(--color-navy)}.sheet-viewer-overlay{position:fixed;inset:0;background:#000000e6;z-index:1000;display:flex;flex-direction:column}.sheet-viewer-modal{width:100%;height:100%;display:flex;flex-direction:column}.sheet-viewer-header{display:flex;align-items:center;justify-content:center;padding:16px 24px;background:#fdf6e3!important;border-bottom:4px solid #1E3A5F;gap:24px;flex-shrink:0}.sheet-viewer-controls,.sheet-viewer-pagination{display:flex;align-items:center;gap:8px}.sheet-btn{background:#d4a853!important;color:#1e3a5f!important;border:3px solid #1E3A5F!important;border-radius:8px;padding:10px 16px;font-family:Righteous,cursive;font-weight:700;font-size:16px;cursor:pointer;transition:all .2s;box-shadow:3px 3px #1e3a5f}.sheet-btn:hover:not(:disabled){background:#5bc0be!important;transform:translate(-2px,-2px);box-shadow:5px 5px #1e3a5f}.sheet-btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px #1e3a5f}.sheet-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.sheet-close{background:#722f37!important;color:#fff!important;border-color:#722f37!important;box-shadow:3px 3px #0006}.sheet-close:hover{background:#5a252c!important;box-shadow:5px 5px #0006}.sheet-zoom,.sheet-page{font-size:18px;min-width:100px;text-align:center;font-weight:700;color:#1e3a5f;font-family:Righteous,cursive}.sheet-title{font-size:20px;font-weight:700;color:#1e3a5f;font-family:Righteous,cursive}.sheet-viewer-content{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px;background:#2a2a2a}.sheet-viewer-content .react-pdf__Document{display:flex;flex-direction:column;align-items:center}.sheet-viewer-content .react-pdf__Page{box-shadow:0 8px 32px #00000080;background:#fff}.sheet-loading,.sheet-error{padding:48px;font-size:20px;color:#888}.sheet-error{color:#722f37}@media(max-width:640px){.sheet-viewer-header{flex-wrap:wrap;gap:12px;padding:12px 16px}.sheet-btn{padding:8px 12px;font-size:14px}.sheet-zoom,.sheet-page{font-size:14px;min-width:70px}.sheet-viewer-content{padding:12px}}.practice-container{width:100%;margin:0 auto;padding:var(--space-6) var(--space-4)}.practice-header{text-align:center;margin-bottom:var(--space-8)}.practice-mascot{width:clamp(180px,30vw,280px);height:auto;margin-bottom:var(--space-4);filter:drop-shadow(8px 8px 0 rgba(30,58,95,.2));animation:bounceIn .6s cubic-bezier(.68,-.55,.265,1.55)}.practice-header h1{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.5rem);color:var(--color-navy);margin:0}.practice-header p{font-size:clamp(1rem,2vw,1.25rem);color:var(--color-gray-600);margin:var(--space-2) 0 0}.practice-container .content-block{background:var(--color-cream);border:4px solid var(--color-navy);border-radius:var(--radius-xl);box-shadow:6px 6px 0 var(--color-navy);margin-bottom:var(--space-6);overflow:hidden}.practice-container .block-header{padding:var(--space-4) var(--space-5);display:flex;justify-content:space-between;align-items:center}.practice-container .block-label{font-size:var(--text-xl);color:var(--color-white);font-weight:700}.favorites-block .block-header{background:var(--color-gold);border-bottom:3px solid var(--color-gold-dark)}.block-count{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-navy);background:#ffffff80;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full)}.practice-container .block-content{padding:var(--space-5)}.block-empty{color:var(--color-gray-500);font-size:var(--text-xl);text-align:center;margin:0;padding:var(--space-4)}.favorites-list{display:flex;flex-direction:column;gap:var(--space-3)}.song-item-wrapper{display:flex;flex-direction:column}.song-item-wrapper.has-video{margin-bottom:var(--space-2)}.song-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-navy);cursor:pointer;transition:all .2s ease}.song-item:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--color-navy)}.song-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.song-title{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-artist{color:var(--color-gray-600);font-size:var(--text-lg)}.song-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.song-actions .badge.key{padding:var(--space-2) var(--space-3);background:var(--color-turquoise);color:#fff;border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-bold)}.song-actions .badge.bpm{padding:var(--space-1) var(--space-2);background:var(--color-navy);color:#fff;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-bold)}.song-actions .badge.bpm:after{content:" bpm";font-weight:400;opacity:.7}.song-actions .badge-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-gold);border:2px solid var(--color-gold-dark);border-radius:var(--radius-sm);color:var(--color-navy);cursor:pointer}.song-actions .badge-icon svg{width:16px;height:16px}.song-actions .badge-icon.chords{background:var(--color-turquoise);border-color:var(--color-turquoise-dark);color:#fff}.song-actions .badge-icon.lyrics{background:var(--color-cream);border-color:var(--color-gray-400);color:var(--color-navy)}.song-actions .badge-icon.youtube{background:red;border-color:#c00;color:#fff}.song-actions .badge-icon.youtube.active{box-shadow:0 0 0 2px #fff,0 0 0 4px red}.song-actions .badge-icon.spotify{background:#1db954;border-color:#169c46;color:#fff}.song-actions .badge-icon.apple{background:#fc3c44;border-color:#d92d35;color:#fff}.song-actions .badge-icon.pdf-sheet{width:auto;padding:0 var(--space-2);background:var(--color-bordeaux);border-color:#8b1a1a;color:#fff;transition:all .2s}.song-actions .badge-icon.pdf-sheet:hover{transform:scale(1.1);background:#8b1a1a}.song-actions .badge-icon.pdf-sheet .badge-label{font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase}.video-player-inline{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:3px solid var(--color-navy);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}.btn-favorite{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;background:transparent;border:none;color:var(--color-gray-400)}.btn-favorite.active{color:var(--color-gold)}.btn-favorite:hover{transform:scale(1.15);color:var(--color-gold)}.btn-favorite svg{width:24px;height:24px}.practice-search-section{position:relative;margin-bottom:var(--space-6)}.practice-search-wrapper{position:relative;display:flex;align-items:center}.practice-search-wrapper .search-icon{position:absolute;left:var(--space-4);width:22px;height:22px;color:var(--color-gray-400);pointer-events:none;z-index:1}.practice-search-input{width:100%;padding:var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 30px);border:3px solid var(--color-navy);border-radius:var(--radius-lg);font-size:var(--text-lg);font-family:inherit;background:var(--color-cream);box-shadow:4px 4px 0 var(--color-navy);transition:all .2s}.practice-search-input:focus{outline:none;border-color:var(--color-turquoise);box-shadow:4px 4px 0 var(--color-turquoise)}.practice-search-input:focus+.search-icon,.practice-search-wrapper:focus-within .search-icon{color:var(--color-turquoise)}.practice-search-input::placeholder{color:var(--color-gray-400)}.search-clear{position:absolute;right:var(--space-3);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);border:none;border-radius:50%;font-size:18px;color:var(--color-gray-600);cursor:pointer;transition:all .15s}.search-clear:hover{background:var(--color-bordeaux);color:#fff}.practice-search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:6px 6px 0 var(--color-navy);max-height:320px;overflow-y:auto;z-index:100;animation:dropIn .15s ease-out}@keyframes dropIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.search-empty{padding:var(--space-4);text-align:center;color:var(--color-gray-500);margin:0}.search-suggestion-label{padding:var(--space-2) var(--space-4);margin:0;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-gray-400);border-bottom:2px solid var(--color-gray-100)}.search-result-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-3) var(--space-4);background:transparent;border:none;border-bottom:2px solid var(--color-gray-100);cursor:pointer;font-family:inherit;text-align:left;transition:background .15s}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background:var(--color-gold-light)}.search-result-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.search-result-title{font-size:var(--text-base);font-weight:600;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-result-artist{font-size:var(--text-sm);color:var(--color-gray-500)}.search-result-add{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);color:#fff;border-radius:var(--radius-md);font-size:20px;font-weight:700;flex-shrink:0;transition:all .15s;border:2px solid var(--color-turquoise-dark)}.search-result-item:hover .search-result-add{background:var(--color-gold);border-color:var(--color-gold-dark);transform:scale(1.1)}@media(max-width:600px){.practice-container{padding:var(--space-4) var(--space-3)}.practice-mascot{width:clamp(140px,35vw,180px)}.practice-container .block-header{padding:var(--space-3) var(--space-4)}.practice-container .block-content{padding:var(--space-4)}.song-item{padding:var(--space-3)}.song-actions{gap:var(--space-1)}}.practice-song-view{background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-xl);box-shadow:6px 6px 0 var(--color-navy);overflow:hidden}.practice-song-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:var(--color-cream);border-bottom:2px solid var(--color-navy)}.practice-song-header .btn-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bordeaux);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-xl);cursor:pointer}.practice-song-header .btn-close:hover{transform:scale(1.1)}.practice-song-header .key-select{height:36px;padding:0 var(--space-3);border:2px solid var(--color-navy);border-radius:var(--radius-md);background:#fff;font-weight:var(--font-bold);color:var(--color-navy);cursor:pointer;font-size:var(--text-sm)}.song-nav{display:flex;align-items:center;gap:var(--space-2)}.song-nav .nav-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-md);cursor:pointer}.song-nav .nav-btn:disabled{opacity:.4;cursor:not-allowed}.song-nav .nav-btn:not(:disabled):hover{transform:scale(1.1)}.song-nav .nav-btn svg{width:20px;height:20px;stroke:#fff}.nav-count{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-navy);min-width:50px;text-align:center}.practice-song-header .btn-favorite{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;color:var(--color-gray-500)}.practice-song-header .btn-favorite svg{width:20px;height:20px}.practice-song-header .btn-favorite:hover{transform:scale(1.1);border-color:var(--color-gold)}.practice-song-header .btn-favorite.active{background:var(--color-gold);border-color:var(--color-gold-dark);color:var(--color-navy)}.practice-song-row{display:flex;gap:var(--space-4);padding:var(--space-4);border-bottom:1px solid var(--color-gray-200)}.practice-song-info{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0}.btn-metronome-toggle{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-2);background:transparent;border:none;cursor:pointer;transition:all .2s;color:var(--color-navy);opacity:.5}.btn-metronome-toggle:hover{opacity:.8;transform:scale(1.1)}.btn-metronome-toggle.active{opacity:1;color:var(--color-turquoise)}.btn-metronome-toggle svg{width:32px;height:32px}.btn-metronome-toggle .bpm-label{font-size:var(--text-xs);font-weight:var(--font-bold)}.metronome-panel{padding:var(--space-4);display:flex;justify-content:center;border-bottom:1px solid var(--color-gray-200)}.practice-cover{width:100px;height:100px;object-fit:cover;border-radius:var(--radius-md);border:3px solid var(--color-navy);box-shadow:3px 3px 0 var(--color-navy);flex-shrink:0}.practice-song-details{flex:1;min-width:0}.practice-song-details h2{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-navy);margin:0;line-height:1.2}.practice-song-details .artist{color:var(--color-gray-600);font-size:var(--text-lg);margin:var(--space-1) 0 var(--space-2)}.header-badges{display:flex;gap:var(--space-2)}.header-badge{padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase}.header-badge.pdf{background:var(--color-bordeaux);color:#fff;border:none}.header-badge.pdf.clickable{cursor:pointer;transition:all .2s}.header-badge.pdf.clickable:hover{transform:scale(1.1);background:#8b1a1a}.header-badge.chords{background:#ffffff4d;color:#fff}.header-badge.capo{background:var(--color-gold);color:var(--color-navy)}.practice-content{padding:var(--space-4);max-height:50vh;overflow-y:auto}.chords-grid{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center}.chord-big{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-navy);background:var(--color-turquoise-pale);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:3px solid var(--color-turquoise)}.practice-sections{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5)}.practice-sections .content-block{margin:0}.block-empty-action{text-align:center;padding:var(--space-3)}.block-empty-action p{color:var(--color-gray-500);margin:0 0 var(--space-3)}.btn-search-google{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-turquoise);color:#fff;border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.btn-search-google:hover{transform:scale(1.05);background:var(--color-turquoise-dark)}.lyrics-preview{max-height:150px;overflow:hidden;position:relative}.lyrics-preview:after{content:"";position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(transparent,var(--color-cream))}.media-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}.media-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-bold);cursor:pointer;transition:all .2s;text-decoration:none}.media-pill svg{width:16px;height:16px}.media-pill.video{background:red;color:#fff;border:2px solid #cc0000}.media-pill.video:hover,.media-pill.video.active{background:#c00;transform:scale(1.05)}.media-pill.spotify{background:#1db954;color:#fff;border:2px solid #169c46}.media-pill.spotify:hover{background:#169c46;transform:scale(1.05)}.media-pill.apple{background:#fc3c44;color:#fff;border:2px solid #d92d35}.media-pill.apple:hover{background:#d92d35;transform:scale(1.05)}.media-pill.edit{background:var(--color-navy);color:#fff;border:2px solid var(--color-navy)}.media-pill.edit:hover{background:var(--color-turquoise);border-color:var(--color-turquoise);transform:scale(1.05)}.media-pill.youtube{background:red;color:#fff;border:2px solid #cc0000}.media-pill.youtube:hover{background:#c00;transform:scale(1.05)}.media-pill.youtube.karaoke{background:#9146ff;border-color:#73d}.media-pill.youtube.karaoke:hover{background:#73d}.video-player-inline{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-bottom:2px solid var(--color-navy)}.video-player-inline iframe{width:100%;height:100%;border:none}.video-player-inline .btn-close-video{position:absolute;top:var(--space-2);right:var(--space-2);width:32px;height:32px;background:#000000b3;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:var(--text-base)}.video-player-inline .btn-close-video:hover{background:var(--color-bordeaux)}.notes-block .block-header{background:var(--color-navy)}.notes-block .notes-count{padding:2px 8px;background:#fff3;border-radius:var(--radius-full);font-size:var(--text-xs);color:#fff}.note-input-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}.note-input-row input{flex:1;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-base)}.note-input-row input:focus{outline:none;border-color:var(--color-turquoise)}.note-input-row button{width:40px;height:40px;background:var(--color-turquoise);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-xl);cursor:pointer}.note-input-row button:disabled{opacity:.4;cursor:not-allowed}.note-input-row button:not(:disabled):hover{background:var(--color-turquoise-dark)}.notes-empty{color:var(--color-gray-500);text-align:center;padding:var(--space-3);margin:0}.notes-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.note-item{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-gray-100);border-radius:var(--radius-md)}.note-content{flex:1;min-width:0}.note-text{display:block;color:var(--color-navy);font-size:var(--text-base)}.note-date{display:block;font-size:var(--text-xs);color:var(--color-gray-500);margin-top:2px}.note-actions{display:flex;gap:4px}.note-actions button{width:28px;height:28px;background:transparent;border:none;color:var(--color-gray-500);cursor:pointer;font-size:var(--text-sm)}.note-actions button:hover{color:var(--color-bordeaux)}.note-edit{display:flex;gap:var(--space-2);flex:1}.note-edit input{flex:1;padding:var(--space-1) var(--space-2);border:2px solid var(--color-turquoise);border-radius:var(--radius-sm)}.note-edit button{width:28px;height:28px;background:var(--color-turquoise);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer}.note-edit button:last-child{background:var(--color-gray-400)}.practice-footer{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-cream);border-top:2px solid var(--color-navy)}.practice-footer .btn-play{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-gold);color:var(--color-navy);border:2px solid var(--color-navy);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.practice-footer .btn-play svg{width:20px;height:20px}.practice-footer .btn-play:hover:not(:disabled){background:var(--color-turquoise-dark);transform:scale(1.05)}.practice-footer .btn-play:disabled{opacity:.4;cursor:not-allowed}.practice-footer .btn-play.active{background:var(--color-bordeaux);border-color:#8b1a1a}.practice-footer .btn-cancel{padding:var(--space-2) var(--space-4);background:var(--color-gray-200);color:var(--color-gray-700);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.practice-footer .btn-cancel:hover{background:var(--color-gray-300)}.practice-footer .btn-save{margin-left:auto;padding:var(--space-2) var(--space-5);background:var(--color-navy);color:#fff;border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.practice-footer .btn-save:hover{background:var(--color-turquoise);border-color:var(--color-turquoise)}.practice-footer .record-fab{position:static;width:40px;height:40px;box-shadow:2px 2px 0 var(--color-navy)}.practice-footer .record-fab svg{width:20px;height:20px}@media(max-width:600px){.practice-song-row{flex-direction:column}.metronome-panel,.metronome-panel .metronome{padding:var(--space-3)}}.videos-content{padding:0 var(--space-3) var(--space-3)}.video-player{margin-bottom:var(--space-3)}.video-player iframe{width:100%;aspect-ratio:16/9;border-radius:var(--radius-md);border:2px solid var(--color-navy)}.btn-close-video{display:block;width:100%;margin-top:var(--space-2);padding:var(--space-2);background:var(--color-gray-200);border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer}.btn-close-video:hover{background:var(--color-gray-300)}.video-btn{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);text-align:left;font-size:var(--text-base);font-weight:var(--font-medium);color:var(--color-navy);cursor:pointer;transition:all .2s ease}.video-btn:hover{border-color:var(--color-bordeaux);background:#fff5f5}.video-btn.active{border-color:var(--color-bordeaux);background:var(--color-bordeaux);color:#fff}.video-btn svg{width:24px;height:24px;fill:red;flex-shrink:0}.video-btn.active svg{fill:#fff}.streaming-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap}.streaming-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);text-decoration:none;transition:all .15s ease}.streaming-btn svg{width:16px;height:16px}.streaming-btn.spotify{background:#1db954;color:#fff}.streaming-btn.spotify:hover{background:#1ed760;transform:scale(1.05)}.streaming-btn.apple{background:#fc3c44;color:#fff}.streaming-btn.apple:hover{background:#ff5a5f;transform:scale(1.05)}.metronome-wrapper{padding:var(--space-4);background:var(--color-cream);border-bottom:2px solid var(--color-gray-200)}.metronome{max-width:400px;margin:0 auto}.metro-display{text-align:center;margin-bottom:var(--space-3)}.metro-beats{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-3)}.beat-dot{width:20px;height:20px;border-radius:50%;background:var(--color-gray-300);border:2px solid var(--color-gray-400);transition:all .1s}.beat-dot.accent{background:var(--color-turquoise);border-color:var(--color-turquoise-dark)}.beat-dot.active{transform:scale(1.3);box-shadow:0 0 10px var(--color-gold)}.metro-bpm{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.bpm-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-navy);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-xl);font-weight:var(--font-bold);cursor:pointer}.bpm-btn:hover{transform:scale(1.1)}.bpm-input{width:70px;text-align:center;font-size:var(--text-2xl);font-weight:var(--font-bold);border:2px solid var(--color-navy);border-radius:var(--radius-md);padding:var(--space-1)}.bpm-input:focus{outline:none;border-color:var(--color-turquoise)}.bpm-label{font-size:var(--text-sm);color:var(--color-gray-600)}.metro-controls{display:flex;justify-content:center;gap:var(--space-3);align-items:center}.metro-tap{padding:var(--space-2) var(--space-4);background:var(--color-turquoise);color:#fff;border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.metro-tap:hover{transform:scale(1.05)}.metro-play{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-gold);border:3px solid var(--color-gold-dark);border-radius:50%;cursor:pointer;box-shadow:3px 3px 0 var(--color-gold-dark);transition:all .2s}.metro-play:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-gold-dark)}.metro-play svg{width:24px;height:24px;fill:var(--color-navy)}.metro-play.playing{background:var(--color-bordeaux);border-color:var(--color-bordeaux-dark);box-shadow:3px 3px 0 var(--color-bordeaux-dark)}.metro-play.playing svg{fill:#fff}.metro-signature{padding:var(--space-1) var(--space-2);border:2px solid var(--color-navy);border-radius:var(--radius-sm);font-weight:var(--font-bold);background:#fff}@media(max-width:480px){.metro-bpm{flex-wrap:wrap}.metro-controls{gap:var(--space-2)}.metro-play{width:48px;height:48px}}.song-view{display:flex;flex-direction:column;gap:var(--space-4);width:100%;animation:fadeInUp .3s ease-out}.song-view-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0}.song-view-header .key-select{padding:var(--space-2) var(--space-3);border:2px solid var(--color-navy);border-radius:var(--radius-md);background:var(--color-white);font-weight:var(--font-bold);font-size:var(--text-base);cursor:pointer}.song-view-header .song-nav{display:flex;align-items:center;gap:var(--space-2)}.song-view-header .nav-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-full);cursor:pointer;transition:all .2s ease}.song-view-header .nav-btn:hover:not(:disabled){background:var(--color-navy);color:var(--color-white)}.song-view-header .nav-btn:disabled{opacity:.3;cursor:not-allowed}.song-view-header .nav-btn svg{width:18px;height:18px}.song-view-header .nav-count{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-navy)}.song-view-header .header-actions{display:flex;align-items:center;gap:var(--space-2)}.song-view-header .btn-favorite{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:2px solid var(--color-gold);border-radius:var(--radius-full);color:var(--color-gold);cursor:pointer;transition:all .2s ease}.song-view-header .btn-favorite:hover,.song-view-header .btn-favorite.active{background:var(--color-gold);color:var(--color-white)}.song-view-header .btn-favorite svg{width:18px;height:18px}.song-sections{display:flex;flex-direction:column;gap:var(--space-4)}.song-actions{display:flex;justify-content:center;align-items:stretch;gap:var(--space-3);padding:var(--space-4) 0}.song-actions .btn-play{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);border:2px solid var(--color-navy);border-radius:var(--radius-full);color:var(--color-white);cursor:pointer;transition:all .2s ease}.song-actions .btn-play:hover:not(:disabled){transform:scale(1.1)}.song-actions .btn-play:disabled{opacity:.3;cursor:not-allowed}.song-actions .btn-play.active{background:var(--color-bordeaux)}.song-actions .btn-play svg{width:24px;height:24px}.song-actions .btn-cancel{padding:var(--space-3) var(--space-6);background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s ease}.song-actions .btn-cancel:hover{background:var(--color-gray-100)}.header-badges{display:flex;align-items:center;gap:var(--space-2)}.header-badge{font-size:var(--text-xs);font-weight:var(--font-bold);padding:2px 10px;border-radius:var(--radius-full);background:var(--color-gold);color:var(--color-white)}.header-badge.capo{background:var(--color-gold)}.header-badge.pdf{background:var(--color-bordeaux);border:none;cursor:pointer}.header-badge.pdf:hover{filter:brightness(1.1)}.loading-badge{font-size:var(--text-xs);color:var(--color-gray-500);font-style:italic}.song-actions .btn{padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--font-bold);font-family:var(--font-body);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;box-shadow:3px 3px 0 var(--color-navy)}.song-actions .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-navy)}.song-actions .btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-navy)}.song-actions .btn-primary{background:var(--color-gold);color:var(--color-navy);border:3px solid var(--color-navy)}.song-actions .btn-primary:hover{background:var(--color-gold-light)}.song-actions .btn-secondary{background:var(--color-white);color:var(--color-navy);border:3px solid var(--color-navy)}.song-actions .btn-secondary:hover{background:var(--color-gray-100)}.song-actions .btn-share{background:var(--color-turquoise);color:var(--color-white);border:3px solid var(--color-navy);display:flex;align-items:center;gap:var(--space-2)}.song-actions .btn-share:hover{background:var(--color-turquoise-dark)}.song-actions .btn-share.is-live{background:var(--color-bordeaux);animation:pulse-live 2s ease-in-out infinite}.song-actions .btn-share .live-dot{width:8px;height:8px;background:var(--color-white);border-radius:50%;animation:blink 1s ease-in-out infinite}.song-actions .btn-moooh{background:var(--color-bordeaux);color:var(--color-white);border:3px solid var(--color-navy);font-size:var(--text-lg);padding:var(--space-3) var(--space-6)}.song-actions .btn-moooh:hover{background:var(--color-bordeaux-dark)}@keyframes pulse-live{0%,to{opacity:1}50%{opacity:.8}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.nav-arrows{display:flex;justify-content:center;gap:var(--space-4)}.nav-arrow-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-gold);border:3px solid var(--color-navy);border-radius:50%;color:var(--color-navy);cursor:pointer;transition:all .2s ease;box-shadow:3px 3px 0 var(--color-navy)}.nav-arrow-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy);background:var(--color-gold-light)}.nav-arrow-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-navy)}.nav-arrow-btn svg{width:28px;height:28px}.song-view-info{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4);padding-bottom:var(--space-6);background:var(--color-cream);border-radius:var(--radius-lg);border:3px solid var(--color-navy);box-shadow:6px 6px 0 var(--color-navy);position:relative}.song-view-info .song-cover{width:100px;height:100px;object-fit:cover;border-radius:var(--radius-md);border:2px solid var(--color-navy);flex-shrink:0}.song-view-info .song-details{flex:1;min-width:0}.song-view-info .song-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-bordeaux);margin:0;line-height:1.2}.song-view-info .song-title.moooh-lyrics{color:var(--color-bordeaux)}.song-view-info .song-title.moooh-chords{font-family:var(--font-body);font-size:var(--text-xl);color:var(--color-navy);margin-top:var(--space-1)}.song-view-info .song-artist{font-size:var(--text-lg);color:var(--color-navy);margin:var(--space-1) 0 0 0;opacity:.8}.song-view-info .song-key{display:inline-block;margin-top:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-turquoise);color:var(--color-white);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm)}.song-view-info .key-select-card{display:inline-block;margin-top:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-turquoise);color:var(--color-white);border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm);cursor:pointer;appearance:none;padding-right:var(--space-5);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.song-view-info .key-select-card:hover{background-color:var(--color-turquoise-dark)}.song-view-info .key-select-card option{background:var(--color-cream);color:var(--color-navy)}.song-view-info .moooh-divider{display:flex;align-items:center;margin:var(--space-3) 0}.song-view-info .moooh-divider span{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-gold-dark);text-transform:uppercase;letter-spacing:.1em}.song-view-info .media-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.song-view-info .media-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-bold);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:all .2s ease}.song-view-info .media-pill svg{width:18px;height:18px}.song-view-info .media-pill.spotify{background:#1db954;color:#fff;border-color:#1db954}.song-view-info .media-pill.spotify:hover{filter:brightness(1.1)}.song-view-info .media-pill.youtube{background:var(--color-white);color:red;border-color:red}.song-view-info .media-pill.youtube:hover,.song-view-info .media-pill.youtube.active{background:red;color:#fff}.song-view-info .media-pill.edit{background:var(--color-white);color:var(--color-navy);border-color:var(--color-navy)}.song-view-info .media-pill.edit:hover{background:var(--color-navy);color:#fff}.song-view-info .btn-metronome-toggle{position:absolute;bottom:var(--space-3);right:var(--space-3);display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;box-shadow:2px 2px 0 var(--color-navy)}.song-view-info .btn-metronome-toggle:hover,.song-view-info .btn-metronome-toggle.active{background:var(--color-navy);color:var(--color-white)}.song-view-info .btn-metronome-toggle svg{width:24px;height:24px}.song-view-info .bpm-label{font-size:var(--text-xs);font-weight:var(--font-bold)}.header-actions-inline{display:flex;align-items:center;gap:var(--space-2)}.btn-icon-small{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;color:var(--color-gray-500)}.btn-icon-small:hover{border-color:var(--color-turquoise);color:var(--color-turquoise);transform:scale(1.1)}.btn-icon-small svg{width:14px;height:14px}.lyrics-empty{text-align:center;padding:var(--space-4);cursor:pointer;border:2px dashed var(--color-gray-300);border-radius:var(--radius-md);transition:all .2s}.lyrics-empty:hover{border-color:var(--color-turquoise);background:var(--color-turquoise-pale)}.lyrics-empty p{margin:0;color:var(--color-gray-500);font-size:var(--text-sm)}.lyrics-block.editing{cursor:default}.lyrics-block.editing .block-content{padding:0}.lyrics-editor-wrapper{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.lyrics-editor-wrapper .lyrics-editor{width:100%}.lyrics-editor-wrapper .editor-content{min-height:180px;max-height:350px}.lyrics-editor{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3)}.lyrics-textarea{width:100%;min-height:200px;padding:var(--space-3);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;border:2px solid var(--color-gray-300);border-radius:var(--radius-md);resize:vertical;transition:border-color .2s}.lyrics-textarea:focus{outline:none;border-color:var(--color-turquoise)}.lyrics-textarea::placeholder{color:var(--color-gray-400)}.editor-actions{display:flex;justify-content:flex-end;gap:var(--space-2)}.editor-actions .btn-save{padding:var(--space-2) var(--space-4);background:var(--color-turquoise);color:var(--color-white);border:2px solid var(--color-turquoise-dark);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.editor-actions .btn-save:hover:not(:disabled){background:var(--color-turquoise-dark)}.editor-actions .btn-save:disabled{opacity:.6;cursor:not-allowed}.editor-actions .btn-cancel-edit{padding:var(--space-2) var(--space-4);background:var(--color-white);color:var(--color-gray-600);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.editor-actions .btn-cancel-edit:hover{border-color:var(--color-gray-500);color:var(--color-gray-700)}.chords-empty{text-align:center;padding:var(--space-4);cursor:pointer;border:2px dashed var(--color-gray-300);border-radius:var(--radius-md);transition:all .2s}.chords-empty:hover{border-color:var(--color-turquoise);background:var(--color-turquoise-pale)}.chords-empty p{margin:0;color:var(--color-gray-500);font-size:var(--text-sm)}.btn-search-chords,.btn-search-lyrics{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-gray-600);cursor:pointer;transition:all .2s ease}.btn-search-chords:hover,.btn-search-lyrics:hover{border-color:var(--color-turquoise);color:var(--color-turquoise);background:var(--color-turquoise-pale)}.btn-search-chords svg,.btn-search-lyrics svg{width:16px;height:16px}.expand-hint-inline{font-size:var(--text-sm);font-weight:var(--font-bold);color:#fffc;margin-left:var(--space-2)}.btn-search-inline{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;color:#fffc}.btn-search-inline:hover{background:#ffffff4d;color:#fff;transform:scale(1.1)}.btn-search-inline svg{width:16px;height:16px}.partition-block.editing{cursor:default}.partition-block.editing .block-content{padding:0}.chords-textarea{width:100%;min-height:200px;padding:var(--space-3);font-family:var(--font-mono, monospace);font-size:var(--text-sm);line-height:1.6;border:2px solid var(--color-gray-300);border-radius:var(--radius-md);resize:vertical;transition:border-color .2s;white-space:pre}.chords-textarea:focus{outline:none;border-color:var(--color-turquoise)}.chords-textarea::placeholder{color:var(--color-gray-400)}.psychedelic-bg{position:fixed;inset:0;z-index:-1;cursor:pointer;background:#f5e6c8}.psychedelic-bg:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,#8b455f1f,#40e0d026,#daa5201f,#8000801a,#ff8c001f,#00bfff26,#8b455f1f),conic-gradient(from 180deg at 30% 70%,#ff69b41a,#00ff7f1f,#ffd7001a,#8a2be21f,#ff69b41a);animation:fractalSpin 25s linear infinite;pointer-events:none}.psychedelic-bg:after{content:"";position:absolute;inset:-25%;background:repeating-conic-gradient(from 0deg,rgba(255,0,128,.06) 0deg 15deg,transparent 15deg 30deg,rgba(0,255,255,.06) 30deg 45deg,transparent 45deg 60deg),repeating-radial-gradient(circle,transparent,rgba(255,200,100,.04) 10%,transparent 20%);animation:fractalSpinReverse 18s linear infinite;mix-blend-mode:multiply;pointer-events:none}@keyframes fractalSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.3)}to{transform:rotate(360deg) scale(1)}}@keyframes fractalSpinReverse{0%{transform:rotate(360deg);filter:hue-rotate(0deg)}to{transform:rotate(0);filter:hue-rotate(360deg)}}body.bg-static .psychedelic-bg:before,body.bg-static .psychedelic-bg:after{animation-play-state:paused}body.bg-session-live .psychedelic-bg{background:#d4edda}body.bg-session-live .psychedelic-bg:before{background:conic-gradient(from 0deg,#228b2226,#0080001f,#32cd3226,#3cb3711f,#0064001a,#2e8b5726,#228b2226),conic-gradient(from 180deg at 30% 70%,#90ee901f,#00ff7f1a,#32cd321f,#0080001a,#90ee901f)}body.bg-session-live .psychedelic-bg:after{background:repeating-conic-gradient(from 0deg,rgba(0,128,0,.06) 0deg 15deg,transparent 15deg 30deg,rgba(50,205,50,.06) 30deg 45deg,transparent 45deg 60deg),repeating-radial-gradient(circle,transparent,rgba(144,238,144,.05) 10%,transparent 20%)}.session-live-indicator{position:fixed;top:var(--space-2);left:50%;transform:translate(-50%);z-index:1000;display:inline-flex;align-items:center;gap:var(--space-2);background:#228b22f2;color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-bold);box-shadow:0 2px 8px #0003;cursor:pointer;transition:transform .15s,box-shadow .15s}.session-live-indicator:hover{transform:translate(-50%) scale(1.05);box-shadow:0 4px 12px #228b2266}.session-live-wrapper{display:flex;justify-content:center;padding:var(--space-2) 0}.session-live-indicator:before{content:"";width:8px;height:8px;background:#f44;border-radius:50%;animation:livePulse 1s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 2px 8px #228b224d}50%{box-shadow:0 2px 16px #228b2280}}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.bg-toggle-btn{position:fixed;bottom:var(--space-4);right:var(--space-4);width:44px;height:44px;border-radius:50%;border:3px solid var(--color-navy);background:var(--color-cream);color:var(--color-navy);font-size:1.2rem;cursor:pointer;z-index:9999;box-shadow:3px 3px 0 var(--color-navy);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.bg-toggle-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}.bg-toggle-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-navy)}.record-fab{position:fixed;bottom:100px;right:var(--space-4);width:56px;height:56px;background:var(--color-bordeaux);border:3px solid var(--color-navy);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:4px 4px 0 var(--color-navy);transition:all .2s;z-index:100}.record-fab svg{width:28px;height:28px;fill:var(--color-white)}.record-fab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.record-fab:active{transform:translate(0);box-shadow:2px 2px 0 var(--color-navy)}.record-fab .premium-badge,.btn-record-inline .premium-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--color-gold);border:2px solid var(--color-navy);border-radius:50%;font-size:11px;font-weight:900;color:var(--color-navy);display:flex;align-items:center;justify-content:center;line-height:1}.btn-record-inline{position:relative;width:36px;height:36px;background:var(--color-bordeaux);border:2px solid var(--color-navy);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.btn-record-inline svg{width:18px;height:18px;fill:var(--color-white)}.btn-record-inline:hover{transform:scale(1.1)}.btn-record-inline:active{transform:scale(.95)}.recording-modal{position:relative;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:8px 8px 0 var(--color-navy);width:90%;max-width:400px;max-height:90vh;overflow-y:auto}.recording-header{padding:var(--space-4);border-bottom:2px dashed var(--color-gray-300);text-align:center}.recording-header h2{margin:0;font-family:var(--font-body);font-size:var(--text-xl);color:var(--color-navy)}.recording-song{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--color-gray-600)}.recording-body{padding:var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.recording-timer{display:flex;align-items:center;gap:var(--space-2)}.timer-display{font-family:var(--font-mono, monospace);font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--color-navy)}.timer-display.recording{color:var(--color-bordeaux)}.recording-indicator{width:12px;height:12px;background:var(--color-bordeaux);border-radius:50%;animation:pulse-recording 1s ease-in-out infinite}@keyframes pulse-recording{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.recording-controls{display:flex;gap:var(--space-3);align-items:center}.btn-record,.btn-stop,.btn-pause,.btn-resume{width:64px;height:64px;border-radius:50%;border:3px solid var(--color-navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;box-shadow:3px 3px 0 var(--color-navy)}.btn-record{background:var(--color-bordeaux)}.btn-record svg{width:32px;height:32px;fill:var(--color-white)}.btn-record span{position:absolute;bottom:-24px;font-size:var(--text-sm);color:var(--color-navy);font-weight:var(--font-semibold)}.btn-stop{background:var(--color-navy)}.btn-stop svg{width:24px;height:24px;fill:var(--color-white)}.btn-pause,.btn-resume{background:var(--color-turquoise)}.btn-pause svg,.btn-resume svg{width:24px;height:24px;fill:var(--color-white)}.btn-record:hover,.btn-stop:hover,.btn-pause:hover,.btn-resume:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}.recording-review{width:100%;display:flex;flex-direction:column;gap:var(--space-3)}.recording-audio{width:100%;height:40px}.rating-section{text-align:center}.rating-label{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--color-navy)}.rating-buttons{display:flex;justify-content:center;gap:var(--space-2)}.rating-btn{width:48px;height:48px;font-size:1.5rem;background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.rating-btn:hover{border-color:var(--color-navy);transform:scale(1.1)}.rating-btn.active{background:var(--color-turquoise);border-color:var(--color-navy);box-shadow:2px 2px 0 var(--color-navy)}.notes-section textarea{width:100%;padding:var(--space-2);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);resize:none}.notes-section textarea:focus{outline:none;border-color:var(--color-turquoise)}.review-actions{display:flex;gap:var(--space-2);justify-content:center}.btn-discard,.btn-save{padding:var(--space-2) var(--space-4);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-family:var(--font-body);font-weight:var(--font-semibold);cursor:pointer;transition:all .2s}.btn-discard{background:var(--color-white);color:var(--color-navy)}.btn-save{background:var(--color-turquoise);color:var(--color-white);box-shadow:2px 2px 0 var(--color-navy)}.btn-save:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-save:disabled{opacity:.6;cursor:not-allowed}.recording-error,.save-error{color:var(--color-error);font-size:var(--text-sm);text-align:center}.recording-mode-selection{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-2) 0;width:100%}.mode-label{margin:0;font-size:var(--text-lg);color:var(--color-navy);font-weight:var(--font-bold);text-align:center}.mode-buttons{display:flex;gap:var(--space-4);justify-content:center}.mode-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:100px;height:100px;background:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;box-shadow:3px 3px 0 var(--color-navy)}.mode-btn svg{width:36px;height:36px;fill:var(--color-navy)}.mode-btn span{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-navy)}.mode-btn:hover{background:var(--color-turquoise);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--color-navy)}.mode-btn:hover svg{fill:var(--color-white)}.mode-btn:hover span{color:var(--color-white)}.btn-back-mode{width:40px;height:40px;background:var(--color-white);border:2px solid var(--color-navy);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.btn-back-mode svg{width:20px;height:20px;stroke:var(--color-navy)}.btn-back-mode:hover{background:var(--color-gray-100)}.video-preview-container{width:100%;border-radius:var(--radius-md);overflow:hidden;border:2px solid var(--color-navy);background:var(--color-black)}.video-preview{width:100%;height:auto;max-height:200px;object-fit:cover;display:block;transform:scaleX(-1)}.recording-video{width:100%;max-height:240px;border-radius:var(--radius-md);background:var(--color-black)}@media(max-width:480px){.record-fab{bottom:80px;right:var(--space-3);width:48px;height:48px}.record-fab svg{width:24px;height:24px}.recording-modal{width:95%;border-width:2px;box-shadow:4px 4px 0 var(--color-navy)}.timer-display{font-size:var(--text-3xl)}.btn-record,.btn-stop,.btn-pause,.btn-resume{width:56px;height:56px}.rating-btn{width:40px;height:40px;font-size:1.25rem}}.audio-player{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md)}.player-btn{width:36px;height:36px;background:var(--color-turquoise);border:2px solid var(--color-navy);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.player-btn svg{width:16px;height:16px;fill:var(--color-white)}.player-progress{flex:1;height:8px;background:var(--color-gray-200);border-radius:4px;cursor:pointer;overflow:hidden}.progress-bar{height:100%;background:var(--color-turquoise);transition:width .1s}.player-time{font-size:var(--text-xs);color:var(--color-gray-600);font-family:var(--font-mono, monospace);white-space:nowrap}.recordings-list{display:flex;flex-direction:column;gap:var(--space-2)}.recording-item{background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);overflow:hidden}.recording-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);cursor:pointer;transition:background .2s}.recording-row:hover{background:var(--color-gray-100)}.recording-info{flex:1;display:flex;flex-direction:column}.recording-date{font-size:var(--text-sm);color:var(--color-navy)}.recording-duration{font-size:var(--text-xs);color:var(--color-gray-500)}.recording-rating{font-size:1.25rem}.btn-delete-recording{width:32px;height:32px;background:transparent;border:none;cursor:pointer;transition:all .2s}.btn-delete-recording svg{width:18px;height:18px;stroke:var(--color-gray-400)}.btn-delete-recording:hover svg{stroke:var(--color-error);transform:scale(1.1)}.delete-confirm-inline{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--color-error)}.btn-confirm-yes,.btn-confirm-no{padding:var(--space-1) var(--space-2);border:2px solid var(--color-navy);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:700;cursor:pointer;transition:all .15s}.btn-confirm-yes{background:var(--color-error);color:#fff}.btn-confirm-yes:hover{background:#c0392b}.btn-confirm-no{background:var(--color-gray-200);color:var(--color-navy)}.btn-confirm-no:hover{background:var(--color-gray-300)}.recording-expanded{padding:var(--space-3);border-top:1px dashed var(--color-gray-300);background:var(--color-gray-50)}.recording-notes{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--color-gray-600);font-style:italic}.recordings-empty{text-align:center;padding:var(--space-6);color:var(--color-gray-500)}.recordings-empty .empty-hint{font-size:var(--text-sm);margin-top:var(--space-1);color:var(--color-gray-400)}.recordings-loading,.recordings-error{text-align:center;padding:var(--space-4);color:var(--color-gray-500)}.recording-type-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.recording-type-icon .type-icon{width:20px;height:20px;fill:var(--color-navy)}.recording-video{width:100%;max-height:300px;border-radius:var(--radius-md);background:#000}.spotify-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:2px dashed var(--color-gray-300)}.spotify-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.btn-spotify{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#1db954;border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:700;color:var(--color-white);cursor:pointer;box-shadow:2px 2px 0 var(--color-navy);transition:all .15s}.btn-spotify svg{width:18px;height:18px}.btn-spotify:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy)}.btn-spotify:disabled{opacity:.6;cursor:not-allowed}.spotify-info{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}.spotify-badge{display:flex;flex-direction:column;align-items:center;padding:var(--space-1) var(--space-2);background:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md)}.spotify-badge .badge-label{font-size:var(--text-xs);color:var(--color-gray-500)}.spotify-badge .badge-value{font-size:var(--text-lg);font-weight:700;color:var(--color-navy)}.spotify-link{font-size:var(--text-sm);color:#1db954;font-weight:600;text-decoration:none}.spotify-link:hover{text-decoration:underline}.moooh-mode-select{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-4)}.mode-select-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy);margin:0;background:#ffffffd9;padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);box-shadow:0 4px 12px #00000026}.mode-select-cards{display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}.mode-select-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);width:160px;aspect-ratio:1;border:4px solid var(--color-gold);border-radius:var(--radius-2xl);cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 30px #0000004d}.mode-select-card:hover{transform:translateY(-8px) scale(1.1) rotate(-6deg);box-shadow:0 20px 50px #0006,0 0 30px #d4883a80;border-color:var(--color-gold-light);border-width:5px}.mode-select-card:active{transform:translateY(-2px) scale(1.05);transition:all .1s ease}.mode-select-card.shuffle{background:var(--color-bordeaux);transform:rotate(-4deg)}.mode-select-card.challenge{background:var(--color-turquoise);transform:rotate(3deg)}.mode-select-card .mode-icon{width:60px;height:60px;background:var(--color-gold);border-radius:50%;padding:12px;box-shadow:inset 0 -4px #0003}.mode-select-card .mode-icon svg{width:100%;height:100%;stroke:var(--color-navy)}.mode-select-card .mode-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-cream);text-shadow:2px 2px 0 rgba(0,0,0,.4)}.challenge-setup{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);width:100%;max-width:500px;margin:0 auto;background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-xl);box-shadow:6px 6px 0 var(--color-navy)}.challenge-header{display:flex;align-items:center;gap:var(--space-3)}.challenge-header h2{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-bordeaux)}.btn-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:2px solid var(--color-navy);border-radius:50%;cursor:pointer}.btn-back:hover{background:var(--color-gray-100)}.btn-back svg{width:20px;height:20px;stroke:var(--color-navy)}.player-card{background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md)}.player-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:var(--color-navy);color:var(--color-white);border-radius:calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0}.player-card-header .player-name{font-weight:var(--font-bold)}.btn-remove-player{background:none;border:none;color:var(--color-white);font-size:var(--text-xl);cursor:pointer;opacity:.7;line-height:1}.btn-remove-player:hover{opacity:1}.player-songs{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--color-gray-50)}.player-song-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--color-white);border-radius:var(--radius-sm)}.player-song-item .song-info{flex:1;min-width:0}.player-song-item .song-title{font-weight:var(--font-bold);color:var(--color-navy)}.player-song-item .song-artist{font-size:var(--text-sm);color:var(--color-gray-500);margin-left:var(--space-2)}.player-song-item .song-moooh{display:block;font-size:var(--text-xs);color:var(--color-bordeaux);font-style:italic}.player-song-item .song-actions{display:flex;gap:var(--space-1)}.btn-moooh-toggle,.btn-remove-song{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm)}.btn-moooh-toggle:hover{background:var(--color-turquoise-pale)}.btn-moooh-toggle.active,.btn-remove-song:hover{background:var(--color-bordeaux);color:#fff}.moooh-picker{width:100%;position:relative;margin-top:var(--space-2)}.moooh-picker input{width:100%;padding:var(--space-2);border:2px dashed var(--color-bordeaux);border-radius:var(--radius-sm);font-size:var(--text-sm)}.add-song-search{position:relative;padding:var(--space-3)}.song-search-container{position:relative}.song-search-container .search-wrapper{position:relative;display:flex;align-items:center}.song-search-container .search-icon{position:absolute;left:var(--space-3);width:18px;height:18px;color:var(--color-gray-400);pointer-events:none;z-index:1}.song-search-container .song-search-input{width:100%;padding:var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 26px);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:inherit;background:var(--color-white);transition:all .2s}.song-search-container .song-search-input:focus{outline:none;border-color:var(--color-turquoise);box-shadow:3px 3px 0 var(--color-turquoise)}.song-search-container .search-wrapper:focus-within .search-icon{color:var(--color-turquoise)}.song-search-container .song-search-input::placeholder{color:var(--color-gray-400)}.song-search-container .search-clear{position:absolute;right:var(--space-2);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);border:none;border-radius:50%;font-size:14px;color:var(--color-gray-600);cursor:pointer}.song-search-container .search-clear:hover{background:var(--color-bordeaux);color:#fff}.song-search-container .song-search-results,.moooh-picker .song-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--color-cream);border:2px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy);z-index:20;max-height:220px;overflow-y:auto;animation:dropIn .15s ease-out}@keyframes dropIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.song-search-container .search-suggestion-label{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-gray-400);border-bottom:2px solid var(--color-gray-100);margin:0}.song-search-container .song-search-result{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--space-2) var(--space-3);background:none;border:none;border-bottom:1px solid var(--color-gray-100);cursor:pointer;text-align:left;transition:background .15s}.song-search-container .song-search-result:last-child{border-bottom:none}.song-search-container .song-search-result:hover{background:var(--color-gold-light)}.song-search-container .song-search-result .result-title{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.song-search-container .song-search-result .result-artist{font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-gray-500);white-space:nowrap}.song-search-container .song-search-empty{padding:var(--space-3);text-align:center;color:var(--color-gray-500);font-family:var(--font-body)}.add-player-form{display:flex;gap:var(--space-2)}.add-player-form input{flex:1;padding:var(--space-3) var(--space-4);border:3px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-base);background:var(--color-white);box-shadow:3px 3px 0 var(--color-navy)}.add-player-form input:focus{outline:none;border-color:var(--color-turquoise);box-shadow:3px 3px 0 var(--color-turquoise)}.add-player-form input::placeholder{color:var(--color-gray-400)}.btn-add-player{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-turquoise);color:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-2xl);font-weight:var(--font-bold);cursor:pointer;box-shadow:3px 3px 0 var(--color-navy)}.btn-add-player:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-navy)}.btn-add-player:disabled{opacity:.4;cursor:not-allowed}.challenge-footer{display:flex;justify-content:center;padding-top:var(--space-2)}.btn-launch-challenge{padding:var(--space-3) var(--space-6);background:var(--color-gold);color:var(--color-navy);border:3px solid var(--color-navy);border-radius:var(--radius-lg);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;box-shadow:4px 4px 0 var(--color-navy)}.btn-launch-challenge:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}@media(max-width:480px){.mode-select-cards{flex-direction:column;gap:var(--space-4)}.mode-select-card{width:140px}.mode-select-card .mode-icon{width:50px;height:50px;padding:10px}}.challenge-play{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}.challenge-play-header{display:flex;align-items:center;justify-content:space-between}.challenge-progress{font-size:var(--text-sm);color:var(--color-gray-500)}.current-player-banner{text-align:center;padding:var(--space-4);background:var(--color-navy);color:var(--color-white);border-radius:var(--radius-lg)}.current-player-label{font-size:var(--text-sm);opacity:.8;margin:0 0 var(--space-1)}.current-player-name{font-size:var(--text-3xl);font-weight:var(--font-bold);font-family:var(--font-display);margin:0}.challenge-song-view{flex:1}.challenge-play-footer{display:flex;justify-content:center;padding:var(--space-2) 0}.btn-next-turn{padding:var(--space-3) var(--space-6);background:var(--color-turquoise);color:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;box-shadow:4px 4px 0 var(--color-navy)}.btn-next-turn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.challenge-end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-8);text-align:center}.challenge-end-icon{font-size:4rem}.challenge-end h2{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-navy);margin:0}.btn-restart{padding:var(--space-3) var(--space-5);background:var(--color-bordeaux);color:var(--color-white);border:3px solid var(--color-navy);border-radius:var(--radius-lg);font-weight:var(--font-bold);cursor:pointer;box-shadow:3px 3px 0 var(--color-navy)}.btn-restart:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-navy)}.jam-queue-panel{background:var(--color-cream);border:3px solid var(--color-turquoise);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-turquoise-dark);width:100%;max-width:600px;margin:0 auto;overflow:visible}.jam-queue-panel.loading{opacity:.7}.queue-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:var(--color-turquoise);color:#fff;border:none;border-bottom:2px solid var(--color-turquoise-dark);width:100%;cursor:pointer;font-family:inherit}.queue-title{font-family:var(--font-body);font-size:var(--text-base);font-weight:700;display:flex;align-items:center;gap:var(--space-2)}.queue-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:#fff;color:var(--color-turquoise-dark);border-radius:var(--radius-full);font-family:var(--font-body);font-size:11px;font-weight:700}.queue-header .chevron{width:16px;height:16px;transition:transform .2s}.queue-header .chevron.up{transform:rotate(180deg)}.queue-content{padding:var(--space-3);overflow:visible}.queue-empty{text-align:center;padding:var(--space-2);color:var(--color-gray-500);font-size:var(--text-sm);margin:0}.queue-list{display:flex;flex-direction:column;gap:6px}.queue-item{display:flex;align-items:center;gap:var(--space-2);padding:6px 8px;background:#fff;border:2px solid var(--color-gray-200);border-radius:var(--radius-sm);transition:all .15s;cursor:grab}.queue-item:hover{border-color:var(--color-turquoise)}.queue-item.playing{background:var(--color-turquoise);border-color:var(--color-turquoise-dark);color:#fff}.queue-item.dragging{box-shadow:0 4px 12px #00000026;transform:scale(1.02)}.queue-position{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--color-gray-400);flex-shrink:0}.queue-position svg{width:12px;height:12px}.queue-item.playing .queue-position{color:#fff}.queue-item:active{cursor:grabbing}.queue-item-info{display:flex;flex-direction:column;flex:1;min-width:0;background:transparent;border:none;cursor:pointer;text-align:left;padding:0;font-family:inherit;gap:0}.queue-song-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-navy)}.queue-item.playing .queue-song-title{color:#fff}.queue-song-artist{font-size:11px;color:var(--color-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item.playing .queue-song-artist{color:#fffc}.queue-remove{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--color-gray-300);font-size:18px;font-weight:300;border-radius:var(--radius-sm);opacity:0;transition:all .15s;flex-shrink:0;line-height:1}.queue-item:hover .queue-remove{opacity:1}.queue-remove:hover{background:var(--color-bordeaux);color:#fff}.queue-item.playing .queue-remove{color:#ffffff80}.queue-item.playing .queue-remove:hover{background:#fff3;color:#fff}.btn-clear-queue{display:block;margin:var(--space-2) auto 0;padding:0;background:transparent;border:none;font-size:11px;color:var(--color-gray-400);cursor:pointer;transition:color .15s}.btn-clear-queue:hover{color:var(--color-bordeaux);text-decoration:underline}.queue-search-add{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--color-gray-300);position:relative;z-index:50}.queue-search-add .song-search-container{position:relative;z-index:51}.queue-search-add .song-search-container .song-search-input{padding:var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 28px);font-size:var(--text-sm);border:2px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:3px 3px 0 var(--color-navy)}.queue-search-add .song-search-container .song-search-input:focus{border-color:var(--color-turquoise);box-shadow:3px 3px 0 var(--color-turquoise)}.queue-search-add .song-search-container .search-icon{left:var(--space-2);width:18px;height:18px;color:var(--color-navy)}.queue-search-add .song-search-container .search-wrapper:focus-within .search-icon{color:var(--color-turquoise)}.queue-search-add .song-search-container .song-search-results{z-index:100}@media(max-width:480px){.queue-header{padding:var(--space-2) var(--space-3)}.queue-content{padding:var(--space-2)}.queue-remove{opacity:1}}.email-verify-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:var(--space-4)}.email-verify-modal{background:#fff;border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #00000040;padding:var(--space-6);max-width:360px;width:100%;text-align:center}.email-verify-icon{width:56px;height:56px;margin:0 auto var(--space-4);background:var(--color-turquoise-pale);border-radius:50%;display:flex;align-items:center;justify-content:center}.email-verify-icon svg{width:28px;height:28px;stroke:var(--color-turquoise)}.email-verify-modal h2{font-size:var(--text-xl);font-weight:600;color:var(--color-navy);margin:0 0 var(--space-2)}.email-verify-desc{color:var(--color-gray-500);margin:0 0 var(--space-4);line-height:1.5;font-size:var(--text-sm)}.email-verify-email{display:inline-block;font-weight:600;color:var(--color-navy);background:var(--color-gray-100);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin:0 0 var(--space-4);font-size:var(--text-sm)}.email-verify-success{background:var(--color-turquoise-pale);color:var(--color-turquoise-dark, #0d9488);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin:0 0 var(--space-3);font-size:var(--text-sm);font-weight:500}.email-verify-error{background:#fef2f2;color:#dc2626;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin:0 0 var(--space-3);font-size:var(--text-sm)}.email-verify-actions{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.email-verify-actions .btn-moooh{padding:var(--space-3) var(--space-4);background:var(--color-turquoise);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:background .2s}.email-verify-actions .btn-moooh:hover:not(:disabled){background:var(--color-turquoise-dark, #0d9488)}.email-verify-actions .btn-moooh:disabled{opacity:.6;cursor:not-allowed}.email-verify-actions .btn-secondary{background:none;border:none;color:var(--color-gray-400);font-size:var(--text-sm);cursor:pointer;padding:var(--space-2)}.email-verify-actions .btn-secondary:hover{color:var(--color-gray-600)}.email-verify-help{font-size:var(--text-xs);color:var(--color-gray-400);margin:0}.email-verify-help a{color:var(--color-turquoise);text-decoration:none}.email-verify-help a:hover{text-decoration:underline}.verify-email-card{text-align:center;padding:var(--space-6)}.verify-loading,.verify-success,.verify-error{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.verify-icon{width:64px;height:64px;background:var(--color-turquoise);border-radius:50%;display:flex;align-items:center;justify-content:center}.verify-icon.error{background:#dc2626}.verify-icon svg{width:32px;height:32px;stroke:#fff}.verify-success h2,.verify-error h2{font-size:var(--text-xl);font-weight:600;color:var(--color-navy);margin:0}.verify-success p,.verify-error p{color:var(--color-gray-500);margin:0}.session-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4);margin-top:var(--space-4);animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.session-bar-info{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-navy);border:2px solid var(--color-gold);border-radius:var(--radius-full);cursor:pointer;transition:all .2s;box-shadow:3px 3px 0 var(--color-navy)}.session-bar-info:hover{background:var(--color-navy);transform:translate(-1px,-1px);box-shadow:4px 4px #0000004d}.session-live-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.session-code{font-family:var(--font-mono, monospace);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-gold);letter-spacing:.1em}.session-spectators{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-white);opacity:.8}.session-spectators svg{opacity:.7}.session-bar-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all .2s}.session-bar-btn svg{width:18px;height:18px}.session-bar-btn.share{background:var(--color-gold);color:var(--color-navy)}.session-bar-btn.share:hover{background:var(--color-gold-light);transform:scale(1.05)}.session-bar-btn.end{width:36px;height:36px;padding:0;justify-content:center;background:var(--color-white);color:#ef4444;border:2px solid #ef4444}.session-bar-btn.end:hover{background:#ef4444;color:#fff}.session-bar-btn.go{background:var(--color-turquoise);color:var(--color-white);padding:var(--space-2) var(--space-3)}.session-bar-btn.go:hover{background:var(--color-turquoise-dark, #2a9d8f)}.session-bar-btn.cancel{background:var(--color-gray-200);color:var(--color-gray-600);padding:var(--space-2);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg)}.session-bar-btn.cancel:hover{background:var(--color-gray-300)}.session-name-form{display:flex;align-items:center;gap:var(--space-2);animation:fadeIn .2s ease-out}.session-name-input{padding:var(--space-2) var(--space-3);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:inherit;background:var(--color-white);min-width:160px;box-shadow:2px 2px 0 var(--color-navy)}.session-name-input:focus{outline:none;border-color:var(--color-gold);box-shadow:2px 2px 0 var(--color-gold)}@media(max-width:480px){.session-bar{padding:var(--space-3);gap:var(--space-2)}.session-bar-info{padding:var(--space-2) var(--space-3);gap:var(--space-2)}.session-bar-btn.share{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.session-name-form{flex-wrap:wrap;justify-content:center}.session-name-input{min-width:120px;font-size:var(--text-xs)}}.session-name-badge{background:var(--color-cream);color:var(--color-navy);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;border:2px solid var(--color-gold)}.mode-badge{background:var(--color-navy);color:var(--color-gold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;letter-spacing:.05em}.spectator-player-banner{width:100%;text-align:center;padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,var(--color-bordeaux) 0%,var(--color-navy) 100%);border-radius:var(--radius-lg);margin-bottom:var(--space-4);border:3px solid var(--color-gold)}.spectator-player-banner .player-label{margin:0;font-size:var(--text-sm);color:var(--color-gold);text-transform:uppercase;letter-spacing:.1em}.spectator-player-banner .player-name{margin:var(--space-1) 0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-white)}.spectator-player-banner .progress-badge{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--color-gold);color:var(--color-navy);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700}.mashup-info{text-align:center;padding:var(--space-2) var(--space-3);background:var(--color-turquoise);color:var(--color-navy);border-radius:var(--radius-md);margin-bottom:var(--space-3);font-size:var(--text-sm)}.mashup-info strong{font-weight:700}:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors:active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--total-scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--total-scale-factor));width:100%;min-width:calc(180px * var(--total-scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--total-scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;border-radius:calc(2px * var(--total-scale-factor));padding:calc(6px * var(--total-scale-factor));margin-left:calc(5px * var(--total-scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--total-scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--total-scale-factor));padding-top:calc(2px * var(--total-scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors:active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;inset:0;overflow:hidden;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:-1;cursor:default;-webkit-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}.admin-page{min-height:100vh;background:var(--color-bordeaux);padding:var(--space-4)}.admin-denied{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--color-cream);font-size:var(--text-xl);background:var(--color-bordeaux)}.admin-header{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}.admin-header h1{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-cream);margin:0}.admin-nav{display:flex;gap:var(--space-2)}.admin-nav button{padding:var(--space-2) var(--space-4);border:2px solid var(--color-gold);border-radius:var(--radius-md);background:transparent;color:var(--color-cream);font-family:var(--font-body);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base)}.admin-nav button:hover{background:#d4883a33}.admin-nav button.active{background:var(--color-gold);color:var(--color-navy)}.admin-message{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-weight:var(--font-medium)}.admin-message.error{background:#e85a5a33;border:1px solid var(--error);color:#ff9090}.admin-message.success{background:#6bbf5933;border:1px solid var(--success);color:#98e089}.admin-content{background:var(--color-bordeaux-dark);border-radius:var(--radius-lg);padding:var(--space-4)}.admin-loading{text-align:center;padding:var(--space-8);color:var(--color-cream)}.admin-toolbar{display:flex;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}.admin-search{flex:1;min-width:200px;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gold);border-radius:var(--radius-md);background:var(--color-bordeaux);color:var(--color-cream);font-family:var(--font-body)}.admin-search::placeholder{color:var(--text-muted)}.btn-add{padding:var(--space-2) var(--space-4);background:var(--color-gold);border:none;border-radius:var(--radius-md);color:var(--color-navy);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base)}.btn-add:hover{background:var(--color-gold-light)}.admin-filters{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;padding:var(--space-3);background:#0003;border-radius:var(--radius-md)}.filter-label{color:var(--color-cream);font-size:var(--text-sm);margin-right:var(--space-2)}.filter-btn{padding:var(--space-1) var(--space-3);border:1px solid var(--color-gold);border-radius:var(--radius-full);background:transparent;color:var(--color-cream);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.filter-btn:hover{background:#d4883a33}.filter-btn.active{background:var(--color-gold);color:var(--color-navy)}.link-icons{display:flex;gap:var(--space-1)}.link-icons span{padding:2px 4px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-semibold)}.link-icons .has-link{background:#6bbf594d;color:#98e089}.link-icons .no-link{background:#e85a5a33;color:#ff9090;opacity:.5}.btn-enrich{background:var(--color-gold)!important;color:var(--color-navy)!important}.btn-enrich:disabled{opacity:.6;cursor:wait}.actions-cell{display:flex;gap:var(--space-1);flex-wrap:wrap}.admin-table{width:100%;border-collapse:collapse;color:var(--color-cream)}.admin-table th,.admin-table td{padding:var(--space-3);text-align:left;border-bottom:1px solid var(--border-light)}.admin-table th{font-weight:var(--font-semibold);color:var(--color-gold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em}.admin-table tbody tr:hover{background:#d4883a1a}.tag-pills{display:flex;gap:var(--space-1);flex-wrap:wrap}.tag-pill{padding:2px 8px;background:var(--color-turquoise);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-navy)}.link-icons{display:flex;gap:var(--space-2)}.link-icons span{font-size:var(--text-xs);color:var(--color-gold);font-weight:var(--font-bold)}.btn-sm{padding:var(--space-1) var(--space-2);border:1px solid var(--color-gold);border-radius:var(--radius-sm);background:transparent;color:var(--color-cream);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);margin-right:var(--space-1)}.btn-sm:hover{background:var(--color-gold);color:var(--color-navy)}.btn-sm.btn-danger{border-color:var(--error);color:#ff9090}.btn-sm.btn-danger:hover{background:var(--error);color:#fff}.tags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}.tag-card{background:var(--color-bordeaux);border:2px solid;border-radius:var(--radius-md);padding:var(--space-4)}.tag-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.tag-color{width:16px;height:16px;border-radius:var(--radius-full);flex-shrink:0}.tag-header strong{color:var(--color-cream)}.tag-header code{font-size:var(--text-xs);color:var(--text-muted);background:var(--color-bordeaux-dark);padding:2px 6px;border-radius:var(--radius-sm)}.tag-compat{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-3)}.tag-actions{display:flex;gap:var(--space-2)}@media(max-width:768px){.admin-table{display:block;overflow-x:auto}}.users-view{width:100%}.users-table-container{overflow-x:auto}.role-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold)}.role-user{background:var(--color-gray-600);color:var(--color-cream)}.role-admin{background:var(--color-turquoise);color:var(--color-navy)}.role-superadmin{background:var(--color-gold);color:var(--color-navy)}.role-edit{display:flex;align-items:center;gap:var(--space-2)}.role-edit select{padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--color-gold);background:var(--color-bordeaux);color:var(--color-cream)}.btn-icon{padding:4px 8px;background:transparent;border:1px solid var(--color-gold);border-radius:var(--radius-sm);color:var(--color-cream);cursor:pointer}.btn-icon:hover{background:var(--color-gold);color:var(--color-navy)}.btn-delete{padding:4px 10px;background:transparent;border:1px solid var(--error);border-radius:var(--radius-sm);color:#ff9090;cursor:pointer}.btn-delete:hover{background:var(--error);color:#fff}.current-user{background:#d4883a26}.no-username{color:var(--text-muted);font-style:italic}.no-results{text-align:center;padding:var(--space-6);color:var(--text-muted)}.notifications-view{width:100%}.notifications-stats{display:flex;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.stat-card{background:var(--color-bordeaux);border:2px solid var(--color-gold);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;min-width:100px}.stat-card.locations{align-items:flex-start;flex:1;min-width:200px}.stat-number{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-gold)}.stat-label{font-size:var(--text-sm);color:var(--color-cream);opacity:.8;margin-top:var(--space-1)}.stat-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}.stat-item{font-size:var(--text-sm);color:var(--color-cream);background:var(--color-bordeaux-dark);padding:2px 8px;border-radius:var(--radius-sm)}.notifications-list{overflow-x:auto}.notifications-list table{width:100%;border-collapse:collapse;color:var(--color-cream)}.notifications-list th,.notifications-list td{padding:var(--space-3);text-align:left;border-bottom:1px solid var(--border-light)}.notifications-list th{font-weight:var(--font-semibold);color:var(--color-gold);font-size:var(--text-sm);text-transform:uppercase}.notifications-list tbody tr:hover{background:#d4883a1a}.notifications-list tr.inactive{opacity:.5}.notifications-list .email-cell{font-family:var(--font-mono);font-size:var(--text-sm)}.notifications-list .empty-message{text-align:center;padding:var(--space-6);color:var(--text-muted)}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.modal-content{background:var(--color-bordeaux);border:2px solid var(--color-gold);border-radius:var(--radius-lg);padding:var(--space-6);width:100%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-content h2{font-family:var(--font-display);color:var(--color-cream);margin:0 0 var(--space-4)}.form-row{margin-bottom:var(--space-4)}.form-row label{display:block;color:var(--color-gold);font-weight:var(--font-medium);margin-bottom:var(--space-2);font-size:var(--text-sm)}.form-row input,.form-row select{width:100%;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gold);border-radius:var(--radius-md);background:var(--color-bordeaux-dark);color:var(--color-cream);font-family:var(--font-body)}.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--color-gold-light);box-shadow:0 0 0 3px #d4883a33}.form-row input:disabled{opacity:.5;cursor:not-allowed}.form-row input[type=color]{padding:var(--space-1);height:40px;cursor:pointer}.form-row-inline{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}.form-row-inline label{display:block;color:var(--color-gold);font-weight:var(--font-medium);margin-bottom:var(--space-2);font-size:var(--text-sm)}.form-row-inline select{width:100%;padding:var(--space-2) var(--space-3);border:2px solid var(--color-gold);border-radius:var(--radius-md);background:var(--color-bordeaux-dark);color:var(--color-cream);font-family:var(--font-body)}.tag-selector{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tag-btn{padding:var(--space-2) var(--space-3);border:2px solid;border-radius:var(--radius-md);background:transparent;color:var(--color-cream);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.tag-btn:hover{background:#ffffff1a}.tag-btn.selected{background:var(--color-turquoise);color:var(--color-navy);border-color:var(--color-turquoise)!important}.modal-actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-6)}.btn-cancel{padding:var(--space-2) var(--space-4);border:2px solid var(--color-gray-500);border-radius:var(--radius-md);background:transparent;color:var(--color-cream);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}.btn-cancel:hover{background:#ffffff1a}.btn-save{padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-md);background:var(--color-gold);color:var(--color-navy);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-fast)}.btn-save:hover{background:var(--color-gold-light)}@media(max-width:768px){.form-row-inline{grid-template-columns:1fr}}.jam-history-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.history-header{display:flex;align-items:center;gap:var(--space-3)}.history-header h1{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy)}.empty-state p{margin:0 0 var(--space-4);font-size:var(--text-lg);color:var(--color-gray-600)}.btn-start-jam{padding:var(--space-2) var(--space-4);background:var(--color-gold);color:var(--color-navy);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:var(--font-bold);cursor:pointer;transition:all .2s;box-shadow:3px 3px 0 var(--color-navy)}.btn-start-jam:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--color-navy)}.history-list{display:flex;flex-direction:column;gap:var(--space-3)}.history-item{padding:var(--space-3);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:3px 3px 0 var(--color-navy)}.item-header{display:flex;gap:var(--space-2);margin-bottom:var(--space-2)}.status-badge{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;border-radius:var(--radius-sm)}.status-badge.ended{background:var(--color-gray-200);color:var(--color-gray-600)}.status-badge.scheduled{background:var(--color-turquoise);color:var(--color-white)}.status-badge.active{background:var(--color-green, #22c55e);color:var(--color-white);animation:pulse 1.5s ease-in-out infinite}.status-badge.waiting{background:var(--color-gold);color:var(--color-navy)}.public-badge{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-bold);background:var(--color-bordeaux);color:var(--color-white);border-radius:var(--radius-sm)}.item-title{margin:0 0 var(--space-1);font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-navy)}.item-date{font-size:var(--text-sm);color:var(--color-gray-500);margin-bottom:var(--space-2)}.item-stats{display:flex;gap:var(--space-4);padding-top:var(--space-2);border-top:1px dashed var(--color-gray-300)}.item-stats span{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-gray-600)}.item-stats svg{color:var(--color-turquoise)}.btn-reactivate{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);width:100%;background:var(--color-turquoise);color:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:var(--text-sm);cursor:pointer;transition:all .2s;box-shadow:2px 2px 0 var(--color-navy)}.btn-reactivate:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-navy);background:var(--color-navy)}.btn-reactivate:disabled{opacity:.6;cursor:not-allowed}@media(max-width:480px){.history-header h1{font-size:var(--text-xl)}.history-item{padding:var(--space-2);border-width:2px}.item-stats{gap:var(--space-3)}}.jam-schedule-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%}.schedule-header{display:flex;align-items:center;gap:var(--space-3)}.schedule-header h1{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy)}.schedule-form{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy)}.form-group{display:flex;flex-direction:column;gap:var(--space-1)}.form-group label{font-weight:var(--font-semibold);color:var(--color-navy);font-size:var(--text-sm)}.form-group input[type=text],.form-group input[type=datetime-local],.form-group textarea{padding:var(--space-2) var(--space-3);background:var(--color-white);border:2px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-base);font-family:inherit;transition:all .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-turquoise);box-shadow:0 0 0 3px #40e0d033}.form-group textarea{resize:vertical;min-height:80px}.toggle-group{padding:var(--space-2) 0}.toggle-label{display:flex;align-items:center;gap:var(--space-3);cursor:pointer}.toggle-label input{display:none}.toggle-switch{position:relative;width:48px;height:28px;background:var(--color-gray-300);border-radius:var(--radius-full);border:2px solid var(--color-navy);transition:all .2s}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--color-white);border-radius:50%;border:2px solid var(--color-navy);transition:all .2s}.toggle-label input:checked+.toggle-switch{background:var(--color-turquoise)}.toggle-label input:checked+.toggle-switch:after{transform:translate(20px)}.toggle-text{display:flex;flex-direction:column;font-weight:var(--font-semibold);color:var(--color-navy)}.toggle-text small{font-weight:400;font-size:var(--text-xs);color:var(--color-gray-500)}.form-error{padding:var(--space-2) var(--space-3);background:var(--color-bordeaux);color:var(--color-white);border-radius:var(--radius-md);font-size:var(--text-sm)}.btn-create{padding:var(--space-3) var(--space-4);background:var(--color-gold);color:var(--color-navy);border:3px solid var(--color-navy);border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all .2s;box-shadow:4px 4px 0 var(--color-navy)}.btn-create:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--color-navy)}.btn-create:active:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 var(--color-navy)}.btn-create:disabled{opacity:.6;cursor:not-allowed}.schedule-info{padding:var(--space-3);background:var(--color-cream);border:2px dashed var(--color-turquoise);border-radius:var(--radius-md)}.schedule-info h3{margin:0 0 var(--space-2);font-size:var(--text-base);color:var(--color-turquoise)}.schedule-info ul{margin:0;padding-left:var(--space-4);font-size:var(--text-sm);color:var(--color-gray-600)}.schedule-info li{margin-bottom:var(--space-1)}@media(max-width:480px){.schedule-header h1{font-size:var(--text-xl)}.schedule-form{padding:var(--space-3);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}.btn-create{font-size:var(--text-base);border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}}.upcoming-jams-container{display:flex;flex-direction:column;gap:var(--space-4);width:100%;min-height:calc(100vh - 100px)}.jams-header{display:flex;align-items:center;gap:var(--space-3)}.jams-header h1{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-navy)}.loading-state,.empty-state{text-align:center;padding:var(--space-8) var(--space-4);background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--color-navy)}.empty-icon{display:block;font-size:3rem;margin-bottom:var(--space-3)}.empty-state p{margin:0;font-size:var(--text-lg);color:var(--color-gray-600)}.empty-sub{font-size:var(--text-sm)!important;margin-top:var(--space-1)!important}.jams-list{display:flex;flex-direction:column;gap:var(--space-4)}.jam-card{background:var(--color-cream);border:3px solid var(--color-navy);border-radius:var(--radius-lg);box-shadow:4px 4px 0 var(--color-navy);overflow:hidden}.jam-countdown-section{background:var(--color-navy);padding:var(--space-4);display:flex;justify-content:center}.countdown{display:flex;gap:var(--space-2)}.countdown-unit{display:flex;flex-direction:column;align-items:center;background:var(--color-cream);border:3px solid var(--color-gold);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-width:60px;box-shadow:2px 2px 0 var(--color-gold-dark)}.countdown-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-bordeaux);line-height:1}.countdown-label{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-navy);text-transform:uppercase;letter-spacing:.1em}.countdown-started{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-gold);text-transform:uppercase;letter-spacing:.1em;animation:pulse 1s ease-in-out infinite}.jam-info{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.jam-title{margin:0;font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-navy)}.jam-host,.jam-date{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-gray-600)}.jam-host svg,.jam-date svg{color:var(--color-turquoise)}.jam-description{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--color-gray-700);line-height:1.5}.jam-address{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);margin-top:var(--space-2);background:var(--color-white);border:2px solid var(--color-turquoise);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-navy);cursor:pointer;transition:all .2s;text-align:left}.jam-address:hover{background:var(--color-turquoise);color:var(--color-white)}.jam-address svg{flex-shrink:0;color:var(--color-bordeaux)}.jam-address:hover svg{color:var(--color-white)}.btn-join-jam{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-gold);color:var(--color-navy);border:none;border-top:3px solid var(--color-navy);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all .2s}.btn-join-jam:hover{background:var(--color-turquoise);color:var(--color-white)}.jams-footer{display:flex;justify-content:center;padding:var(--space-4);margin-top:auto}.jams-footer .footer-logo{width:120px;height:auto;opacity:.5}@media(max-width:480px){.jams-header h1{font-size:var(--text-xl)}.jam-card{border-width:2px;box-shadow:3px 3px 0 var(--color-navy)}.jam-countdown-section{padding:var(--space-3)}.countdown-unit{min-width:50px;padding:var(--space-2);border-width:2px}.countdown-value{font-size:var(--text-2xl)}.jam-info{padding:var(--space-3)}.btn-join-jam{font-size:var(--text-base);border-top-width:2px}}