@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-bg: #07070a;--color-bg-2: #0c0c12;--color-surface: #101015;--color-surface-elevated: #16161d;--color-surface-hover: #1c1c25;--color-text-primary: #f4f1ea;--color-text-secondary: #8a8a92;--color-text-disabled: #4a4a52;--color-accent: #b2ff1a;--color-accent-hover: #c6ff3a;--color-accent-glow: rgba(178, 255, 26, .25);--color-accent-subtle: rgba(178, 255, 26, .08);--color-energy: #b2ff1a;--color-energy-glow: rgba(178, 255, 26, .22);--gh-green: #b2ff1a;--gh-red: #ff3a3a;--gh-yellow: #ffd400;--gh-blue: #2a9bff;--gh-orange: #ff7a1a;--color-success: #b2ff1a;--color-warning: #ffd400;--color-error: #ff3a3a;--color-easy: #b2ff1a;--color-intermediate: #ffd400;--color-hard: #ff7a1a;--color-vhard: #ff3a3a;--color-border: rgba(255, 255, 255, .08);--color-border-accent: rgba(178, 255, 26, .28);--color-line: rgba(255, 255, 255, .08);--font-display: "Oswald", "Montserrat", sans-serif;--font-primary: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--text-xs: clamp(11px, 1.5vw, 12px);--text-sm: clamp(13px, 2vw, 14px);--text-base: clamp(15px, 2.5vw, 16px);--text-lg: clamp(17px, 2.8vw, 20px);--text-xl: clamp(20px, 3.5vw, 24px);--text-2xl: clamp(24px, 4vw, 32px);--text-hero: clamp(28px, 5.5vw, 52px);--leading-tight: 1.2;--leading-normal: 1.5;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--duration-fast: .12s;--duration-normal: .2s;--duration-slow: .35s;--ease-out: cubic-bezier(.25, .46, .45, .94);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-primary);touch-action:pan-x pan-y}:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-glow)}#app{width:100%;height:100%;position:relative}#youtube-container{position:absolute;top:50%;left:50%;z-index:1;width:140%;height:140%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .8s ease}#youtube-container.video-bg{opacity:1;visibility:hidden}#youtube-container iframe{width:100%!important;height:100%!important}#video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:radial-gradient(ellipse at 50% 50%,#00000073,#000000b3);pointer-events:none;opacity:0;transition:opacity .8s ease}#video-overlay.active{opacity:0}#artist-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:transparent;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(30px) brightness(.3) saturate(1.4);transform:scale(1.15)}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;touch-action:none}#canvas-container canvas{display:block;width:100%!important;height:100%!important;will-change:contents}#canvas-container.hidden,#app.chord-sequence-mode #canvas-container{display:none}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}#ui-overlay>*{pointer-events:auto}#search-panel,#editor-panel,#admin-panel,#library-panel,#bookings-panel,#lessons-panel,#difficulty-panel,#track-selector,#tuner-panel,#quiz-panel,#chord-trainer-panel,#more-panel,#leaderboard-panel,#achievements-panel,#home-panel,#account-panel,#avatar-panel{position:absolute;top:var(--header-height);left:0;width:100%;height:calc(100% - var(--header-height) - var(--tab-bar-height));background:transparent;padding:clamp(16px,3vw,28px) clamp(16px,3vw,32px);overflow-y:auto;z-index:10}#search-panel>*,#editor-panel>*,#admin-panel>*,#library-panel>*,#bookings-panel>*,#lessons-panel>*,#difficulty-panel>*,#tuner-panel>*,#quiz-panel>*,#chord-trainer-panel>*,#more-panel>*,#track-selector>*,#leaderboard-panel>*,#achievements-panel>*,#home-panel>*,#account-panel>*,#avatar-panel>*{max-width:540px;margin-left:auto;margin-right:auto}#app.play-mode #search-panel,#app.play-mode #editor-panel,#app.play-mode #admin-panel,#app.play-mode #library-panel,#app.play-mode #bookings-panel,#app.play-mode #lessons-panel,#app.play-mode #difficulty-panel,#app.play-mode #track-selector,#app.play-mode #tuner-panel,#app.play-mode #quiz-panel{top:0;height:100%}#search-panel.hidden,#editor-panel.hidden,#more-panel.hidden,#library-panel.hidden,#bookings-panel.hidden,#lessons-panel.hidden,#leaderboard-panel.hidden,#achievements-panel.hidden,#home-panel.hidden,#account-panel.hidden,#avatar-panel.hidden,#chord-trainer-panel.hidden{display:none}#admin-panel>*{max-width:600px;margin-left:auto;margin-right:auto}#admin-panel.hidden{display:none}#admin-panel h2,#search-panel h2,#editor-panel h2,#bookings-panel h2,#lessons-panel h2,#difficulty-panel h2,#track-selector h2,#tuner-panel h2,#quiz-panel h2,#chord-trainer-panel h2,#more-panel h2,#leaderboard-panel h2,#achievements-panel h2,#home-panel h2,#account-panel h2,#avatar-panel h2{font-family:var(--font-display);font-style:italic;font-size:clamp(36px,8vw,56px);font-weight:600;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--color-text-primary);margin-bottom:clamp(18px,4vw,28px)}#admin-search{width:100%;padding:14px 2px;font-size:16px;font-family:var(--font-primary);background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;color:var(--color-text-primary);outline:none;margin-bottom:16px;transition:border-color .3s ease}#admin-search:focus{border-bottom-color:var(--color-accent);box-shadow:0 1px 0 0 var(--color-accent)}#admin-search::placeholder{color:var(--color-text-disabled);font-style:italic}#admin-user-list{display:flex;flex-direction:column;gap:8px}.admin-user-card{display:flex;align-items:center;gap:var(--space-3);background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.admin-user-card:hover{background:var(--color-accent-subtle);border-color:var(--color-border-accent);transform:translate(4px);box-shadow:0 4px 12px var(--color-accent-glow)}.admin-user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-energy));display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-weight:var(--font-weight-bold);font-size:14px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px var(--color-accent-glow)}.admin-user-info{flex:1;min-width:0}.admin-user-name{font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-user-email{font-family:Montserrat,sans-serif;font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-user-arrow{color:#475569;font-size:18px}.admin-loading{text-align:center;padding:32px;color:#9ca3af;font-family:Montserrat,sans-serif;font-size:14px}.admin-empty{text-align:center;padding:24px;color:#64748b;font-family:Montserrat,sans-serif;font-size:14px}#admin-profile{display:none}#admin-profile.active{display:block}.admin-profile-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.admin-profile-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-energy));display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-weight:var(--font-weight-bold);font-size:22px;color:#fff;flex-shrink:0;box-shadow:0 4px 12px var(--color-accent-glow)}.admin-profile-name{font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;color:#fff}.admin-profile-email{font-family:Montserrat,sans-serif;font-size:13px;color:#9ca3af}.admin-profile-section{margin-top:20px}.admin-profile-section h3{font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.admin-profile-placeholder{background:#ffffff0a;border:1px dashed rgba(100,116,139,.3);border-radius:10px;padding:24px;text-align:center;color:#64748b;font-family:Montserrat,sans-serif;font-size:13px}.admin-level-section{margin-bottom:var(--space-5)}.admin-level-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent-subtle),rgba(255,255,255,.03));box-shadow:0 4px 16px var(--color-accent-glow)}.admin-level-summary-title{font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:var(--leading-tight)}.admin-level-summary-copy{margin-top:var(--space-1);font-family:var(--font-primary);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.admin-level-summary-badge{flex-shrink:0;border:1px solid var(--color-border-accent);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);background:var(--color-surface);color:var(--color-energy);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.admin-level-list{display:grid;gap:var(--space-2);padding-top:var(--space-3)}.admin-level-row{display:grid;grid-template-columns:1fr 96px;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}.admin-level-row-copy{min-width:0;display:grid;gap:var(--space-1)}.admin-level-row-title{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-level-row-meta{font-family:var(--font-primary);font-size:var(--text-xs);color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-level-input-wrap{display:grid;gap:var(--space-1)}.admin-level-input-wrap span{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase}.admin-level-input{width:100%;min-height:38px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-weight-semibold);text-align:center;outline:none;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.admin-level-input:focus{border-color:var(--color-border-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.booking-feed-card,.booking-import-card,.booking-form,.booking-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#ffffff09}.booking-feed-card{display:grid;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-4);border-color:var(--color-border-accent);background:linear-gradient(135deg,var(--color-accent-subtle),rgba(255,255,255,.03));box-shadow:0 4px 16px var(--color-accent-glow)}.booking-import-card{display:grid;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-4)}.booking-import-row{display:grid;grid-template-columns:1fr minmax(148px,auto) auto;gap:var(--space-2);align-items:center}.booking-feed-title{font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:var(--leading-tight)}.booking-feed-copy{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);line-height:var(--leading-normal)}.booking-feed-row{display:flex;gap:var(--space-2);align-items:center}.booking-feed-row input,.booking-import-row input,.booking-import-row select,.booking-form input,.booking-form select,.booking-form textarea{width:100%;min-height:42px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.booking-feed-row input:focus,.booking-import-row input:focus,.booking-import-row select:focus,.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:var(--color-border-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.booking-form{display:grid;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-4)}.booking-import-status{min-height:20px;color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);line-height:var(--leading-normal)}.booking-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.booking-field{display:grid;gap:var(--space-1)}.booking-field.full{grid-column:1 / -1}.booking-field label{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.booking-form textarea{min-height:84px;resize:vertical}.booking-actions-row{display:flex;gap:var(--space-2);justify-content:flex-end;flex-wrap:wrap}.booking-list{display:grid;gap:var(--space-3)}.booking-card{display:grid;gap:var(--space-3);padding:var(--space-4);transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.booking-card.cancelled,.booking-card.completed,.booking-card.past{opacity:.78}.booking-card-main{display:flex;gap:var(--space-3);min-width:0}.booking-date{width:116px;flex-shrink:0;display:grid;gap:var(--space-1);align-content:start;color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs)}.booking-date strong{color:var(--color-energy);font-size:var(--text-sm);line-height:var(--leading-tight)}.booking-copy{min-width:0;display:grid;gap:var(--space-1)}.booking-title{color:var(--color-text-primary);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight)}.booking-meta,.booking-notes{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);line-height:var(--leading-normal)}.booking-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}.booking-status{margin-right:auto;border:1px solid var(--color-border-accent);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);color:var(--color-energy);background:var(--color-accent-subtle);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);text-transform:capitalize}.booking-action-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);padding:var(--space-2) var(--space-3);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.booking-action-btn:hover{transform:translateY(-1px);border-color:var(--color-border-accent);background:var(--color-accent-subtle)}@media(max-width:520px){.admin-level-summary{align-items:flex-start;flex-direction:column}.admin-level-row{grid-template-columns:1fr 82px}.booking-feed-row,.booking-import-row,.booking-card-main{display:flex;flex-direction:column;align-items:stretch}.booking-form-grid{grid-template-columns:1fr}.booking-date{width:auto}}.admin-activity-stats{display:flex;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}.admin-activity-stat{flex:1 1 100px;min-width:100px;background:#ffffff0a;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);text-align:center;font-family:var(--font-primary)}.admin-activity-stat-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1.2}.admin-activity-stat-label{font-size:var(--text-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.admin-activity-list{display:flex;flex-direction:column;gap:var(--space-2)}.admin-activity-card{background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-family:var(--font-primary);transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.admin-activity-card:hover{border-color:var(--color-border-accent);background:var(--color-surface)}.admin-activity-card-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-1)}.admin-activity-song{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.admin-activity-artist{font-size:var(--text-sm);color:var(--color-text-secondary);margin-left:var(--space-2)}.admin-activity-date{font-size:var(--text-xs);color:var(--color-text-secondary);white-space:nowrap}.admin-activity-metrics{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-1)}.admin-activity-metric{font-size:var(--text-sm);color:var(--color-text-secondary)}.admin-activity-metric strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.admin-activity-sections{font-size:var(--text-xs);color:var(--color-text-disabled);margin-top:var(--space-1)}.admin-tab-bar{display:flex;gap:var(--space-1);margin-bottom:var(--space-4);background:#0a0a0e99;border-radius:var(--radius-md);padding:var(--space-1);border:1px solid var(--color-border)}.admin-tab-btn{flex:1;padding:var(--space-2) var(--space-4);border:none;border-radius:calc(var(--radius-md) - 2px);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);background:transparent;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.admin-tab-btn.active{background:#b2ff1a33;color:#fff;box-shadow:0 0 8px var(--color-accent-glow)}.admin-tab-btn:hover:not(.active){color:var(--color-text-primary);background:#ffffff0a}#admin-library-view{display:none}#admin-library-view h2{font-family:Montserrat,sans-serif;font-size:clamp(18px,4vw,24px);font-weight:700;letter-spacing:.5px;color:#fff;margin-bottom:16px}.admin-upload-row{display:flex;gap:8px;margin-bottom:10px;align-items:center;flex-wrap:wrap}.admin-category-select{flex:1;min-width:120px;padding:10px 12px;background:#0e0e12d9;border:1px solid rgba(100,116,139,.3);border-radius:10px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:500;color:#fff;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='%239ca3af' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.admin-category-select option{background:#16161d;color:#fff}.admin-add-cat-btn{padding:10px 14px;background:#0e0e12d9;border:1px solid rgba(100,116,139,.3);border-radius:10px;font-family:Montserrat,sans-serif;font-size:20px;font-weight:600;color:#94a3b8;cursor:pointer;transition:all .2s ease;line-height:1;white-space:nowrap}.admin-add-cat-btn:hover{color:#fff;border-color:#b2ff1a80;background:#b2ff1a26}#admin-add-track-form{background:#ffffff0d;border:1px solid rgba(178,255,26,.25);border-radius:12px;padding:16px;margin-bottom:14px;display:none}#admin-add-track-form.open{display:block}.admin-form-row{display:flex;gap:8px;margin-bottom:10px;align-items:flex-end;flex-wrap:wrap}.admin-form-row label{font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}.admin-form-field{flex:1;min-width:100px}.admin-form-input{width:100%;padding:9px 12px;background:#0e0e12cc;border:1px solid rgba(100,116,139,.3);border-radius:8px;font-family:Montserrat,sans-serif;font-size:13px;color:#fff;outline:none;transition:border-color .2s ease}.admin-form-input:focus{border-color:#b2ff1a}.admin-form-input::placeholder{color:#475569}.admin-source-tabs{display:flex;border-radius:8px;overflow:hidden;border:1px solid rgba(100,116,139,.25);margin-bottom:10px}.admin-source-tab{flex:1;padding:8px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;transition:background .15s ease,color .15s ease}.admin-source-tab.active{background:#b2ff1a40;color:#fff}.admin-source-tab:hover:not(.active){background:#ffffff0a;color:#cbd5e1}.admin-source-pane{display:none;margin-bottom:10px}.admin-source-pane.active{display:block}.admin-audio-pick-row{display:flex;align-items:center;gap:8px}.admin-audio-pick-btn{padding:8px 14px;background:#0e0e12d9;border:1px solid rgba(100,116,139,.3);border-radius:8px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;color:#94a3b8;cursor:pointer;white-space:nowrap;transition:all .2s ease}.admin-audio-pick-btn:hover{color:#fff;border-color:#b2ff1a80;background:#b2ff1a1f}.admin-audio-pick-name{font-family:Montserrat,sans-serif;font-size:12px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.admin-form-actions{display:flex;gap:8px}.admin-upload-btn{flex:1;padding:11px;background:linear-gradient(135deg,#b2ff1a,#ff7a1a);border:none;border-radius:10px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#fff;cursor:pointer;transition:opacity .2s ease}.admin-upload-btn:hover{opacity:.85}.admin-upload-btn:disabled{opacity:.5;cursor:not-allowed}.admin-cancel-btn{padding:11px 18px;background:transparent;border:1px solid rgba(100,116,139,.3);border-radius:10px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s ease}.admin-cancel-btn:hover{color:#fff;border-color:#64748b99}.admin-tab-card{display:flex;align-items:center;gap:12px;background:#ffffff0a;border:1px solid rgba(100,116,139,.2);border-radius:10px;padding:12px 16px;margin-bottom:8px;transition:all .2s ease}.admin-tab-card:hover{background:#b2ff1a1a;border-color:#b2ff1a4d}.admin-tab-icon{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#059669,#10b981);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.admin-tab-info{flex:1;min-width:0}.admin-tab-title{font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-tab-artist{font-family:Montserrat,sans-serif;font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-tab-actions{display:flex;gap:4px;flex-shrink:0}.admin-tab-action-btn{background:none;border:none;color:#64748b;font-size:15px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s ease}.admin-tab-action-btn:hover{color:#fff;background:#b2ff1a26}.admin-tab-delete{background:none;border:none;color:#64748b;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s ease}.admin-tab-delete:hover{color:#ef4444;background:#ef444426}#admin-tab-list{display:flex;flex-direction:column;gap:clamp(12px,2.5vw,18px)}.admin-library-card{margin-bottom:var(--space-2)}.admin-library-card.dragging{opacity:.55;border-color:var(--color-border-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.admin-library-card.drag-over{border-color:var(--color-accent)}.admin-tab-drag-handle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated);color:var(--color-text-secondary);font-size:18px;line-height:1;cursor:grab;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.admin-tab-drag-handle:hover,.admin-tab-drag-handle:focus-visible{color:var(--color-text-primary);border-color:var(--color-border-accent);background:var(--color-accent-subtle);outline:none;transform:translateY(-1px)}.admin-tab-drag-handle:active{cursor:grabbing;transform:translateY(0)}.admin-folder-picker{display:flex;flex-direction:column;gap:var(--space-1);min-width:132px;cursor:default}.admin-folder-picker span{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase}.admin-folder-picker select{width:100%;min-height:34px;padding:var(--space-1) var(--space-8) var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface-elevated);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-sm);cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-text-secondary) 50%),linear-gradient(135deg,var(--color-text-secondary) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.admin-folder-picker select:focus{outline:none;border-color:var(--color-border-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.admin-library-card .admin-tab-audio-btn,.admin-library-card .admin-tab-export-btn,.admin-library-card .admin-tab-delete{flex-shrink:0;min-height:34px;border-radius:var(--radius-sm);font-family:var(--font-primary);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.admin-library-card .admin-tab-export-btn{padding:var(--space-1) var(--space-2);border:1px solid var(--color-border-accent);background:var(--color-accent-subtle);color:var(--color-accent-hover);cursor:pointer;font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.admin-library-card .admin-tab-export-btn:hover{border-color:var(--color-accent);background:var(--color-accent-subtle);color:var(--color-text-primary)}.admin-library-card .admin-tab-audio-btn:hover,.admin-library-card .admin-tab-export-btn:hover,.admin-library-card .admin-tab-delete:hover{transform:translateY(-1px)}@media(max-width:640px){.admin-library-card{align-items:stretch;flex-wrap:wrap}.admin-library-card .lesson-card-info{flex-basis:calc(100% - 56px)}.admin-tab-drag-handle{width:34px;height:34px}.admin-folder-picker{order:4;width:100%}}.admin-unlock-song{background:#ffffff0a;border:1px solid rgba(100,116,139,.2);border-radius:10px;margin-bottom:8px;overflow:hidden;transition:border-color .2s ease}.admin-unlock-song.has-unlocks{border-color:#b2ff1a66}.admin-unlock-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .2s ease}.admin-unlock-header:hover{background:#b2ff1a14}.admin-unlock-arrow{color:#64748b;font-size:12px;transition:transform .2s ease;flex-shrink:0}.admin-unlock-song.expanded .admin-unlock-arrow{transform:rotate(90deg)}.admin-unlock-info{flex:1;min-width:0}.admin-unlock-title{font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-unlock-artist{font-family:Montserrat,sans-serif;font-size:11px;color:#9ca3af;display:block}.admin-unlock-badge{font-family:Montserrat,sans-serif;font-size:10px;font-weight:600;color:#b2ff1a;background:#b2ff1a26;border-radius:10px;padding:2px 8px;flex-shrink:0}.admin-unlock-sections{display:none;padding:0 16px 12px;border-top:1px solid rgba(100,116,139,.1)}.admin-unlock-song.expanded .admin-unlock-sections{display:block}.admin-folder-unlock .admin-unlock-header{flex-wrap:wrap}.admin-folder-unlock-all{flex-shrink:0}.admin-folder-song-list{display:grid;gap:var(--space-2);padding-top:var(--space-3)}.admin-folder-song{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);overflow:hidden;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.admin-folder-song.unlocked{border-color:var(--color-energy);background:#06d6a01f;box-shadow:0 0 12px var(--color-energy-glow)}.admin-folder-song.partial{border-color:var(--color-border-accent);background:var(--color-accent-subtle)}.admin-folder-song-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3)}.admin-folder-song-main{display:flex;align-items:center;gap:var(--space-3);min-width:0}.admin-folder-song-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--color-accent-subtle);border:1px solid var(--color-border-accent);color:var(--color-text-primary)}.admin-folder-song-copy{min-width:0;display:grid;gap:var(--space-1)}.admin-folder-song-title{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-folder-song-meta{font-family:var(--font-primary);font-size:var(--text-xs);color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-folder-song-sections{padding:0 var(--space-3) var(--space-2);border-top:1px solid var(--color-border)}.admin-unlock-section-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(100,116,139,.08)}.admin-unlock-section-row:last-child{border-bottom:none}.admin-unlock-section-name{flex:1;font-family:Montserrat,sans-serif;font-size:12px;color:#cbd5e1}.admin-chord-unlock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:var(--space-2);padding-top:var(--space-3)}.admin-chord-unlock-actions{display:flex;justify-content:flex-end;padding-top:var(--space-3)}.admin-chord-unlock-all{border:1px solid var(--color-border-accent);border-radius:var(--radius-sm);background:var(--color-accent-subtle);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);padding:var(--space-2) var(--space-3);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.admin-chord-unlock-all:hover{transform:translateY(-1px);border-color:var(--color-accent);background:var(--color-surface-hover)}.admin-chord-unlock-card{display:grid;gap:var(--space-1);min-height:56px;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);font-family:var(--font-primary);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.admin-chord-unlock-card:hover{transform:translateY(-1px);border-color:var(--color-border-accent);background:var(--color-accent-subtle)}.admin-chord-unlock-card.unlocked{border-color:var(--color-energy);background:#06d6a024;color:var(--color-text-primary);box-shadow:0 0 14px var(--color-energy-glow)}.admin-chord-unlock-name{font-size:var(--text-sm);font-weight:var(--font-weight-bold);line-height:var(--leading-tight)}.admin-chord-unlock-type{font-size:var(--text-xs);text-transform:capitalize;line-height:var(--leading-tight)}.admin-unlock-select-all{display:flex;align-items:center;gap:10px;padding:10px 0 4px;margin-bottom:4px;border-bottom:1px solid rgba(100,116,139,.15)}.admin-unlock-select-all-label{flex:1;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;color:#93c5fd}.admin-toggle{position:relative;width:44px;height:24px;flex-shrink:0}.admin-toggle input{opacity:0;width:0;height:0}.admin-toggle-slider{position:absolute;inset:0;background:#64748b66;border-radius:24px;cursor:pointer;transition:background .3s ease}.admin-toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s ease}.admin-toggle input:checked+.admin-toggle-slider{background:#b2ff1a}.admin-toggle input:checked+.admin-toggle-slider:before{transform:translate(20px)}#lessons-panel.hidden{display:none}#lessons-list{display:flex;flex-direction:column;gap:clamp(12px,2.5vw,18px)}.lesson-level-panel{display:grid;gap:var(--space-3);padding:clamp(16px,3vw,22px);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-accent-subtle),var(--color-surface-elevated));box-shadow:0 4px 20px var(--color-accent-glow)}.lesson-level-main{display:flex;align-items:center;gap:var(--space-4);min-width:0}.lesson-level-badge{width:clamp(72px,18vw,88px);height:clamp(72px,18vw,88px);display:grid;place-items:center;flex-shrink:0;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-accent),var(--color-energy));box-shadow:0 0 0 4px var(--color-accent-glow),0 8px 24px var(--color-energy-glow);color:var(--color-text-primary)}.lesson-level-label,.lesson-level-number{display:block;line-height:1}.lesson-level-label{align-self:end;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:0;color:var(--color-text-primary)}.lesson-level-number{align-self:start;font-family:var(--font-display);font-size:clamp(30px,8vw,42px);font-style:italic;font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.lesson-level-copy{min-width:0}.lesson-level-title{font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight);color:var(--color-text-primary)}.lesson-level-subtitle,.lesson-level-next{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);line-height:var(--leading-normal)}.lesson-level-progress{position:relative;height:10px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface)}.lesson-level-progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-accent),var(--color-energy));transition:width var(--duration-slow) var(--ease-out)}.lessons-category{border:1px solid var(--color-line);border-radius:var(--radius-lg);background:#ffffff05;overflow:hidden}.lessons-category-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);padding:clamp(16px,3vw,22px) clamp(14px,2.6vw,18px);background:transparent;border-bottom:1px solid var(--color-line);color:var(--color-text-primary);min-height:108px;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.lessons-category:hover .lessons-category-head{border-color:var(--color-border-accent);background:#b2ff1a0a}.lessons-category.locked{border-style:dashed;background:#ffffff03}.lessons-category.locked .lessons-category-head{cursor:default;border-bottom:0}.lessons-category.locked .lessons-category-icon,.lessons-category.locked .lessons-category-arrow{color:var(--color-text-disabled)}.lessons-category.locked .lessons-category-title{color:var(--color-text-secondary)}.lessons-category.locked:hover .lessons-category-head,.lessons-category.locked:active .lessons-category-head{border-color:var(--color-line);background:transparent}.lessons-category-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.lessons-category-icon{font-size:clamp(22px,4vw,26px);line-height:1;color:var(--color-text-secondary);margin-bottom:clamp(16px,3vw,22px)}.lessons-category-title{font-family:var(--font-display);font-style:italic;font-size:clamp(18px,3.2vw,22px);font-weight:600;letter-spacing:-.005em;color:var(--color-text-primary);line-height:1.1}.lessons-category-meta{font-size:12px;color:var(--color-text-secondary);margin-top:3px}.lessons-category-arrow{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--color-accent);transition:transform var(--duration-fast) var(--ease-out)}.chord-shapes-category .lessons-category-head,.lesson-track-category .lessons-category-head,.scale-reference-category .lessons-category-head,.scale-family-category .lessons-category-head,.theory-reference-category .lessons-category-head{cursor:pointer}.chord-shapes-category .lessons-category-head:focus-visible,.lesson-track-category .lessons-category-head:focus-visible,.scale-reference-category .lessons-category-head:focus-visible,.scale-family-category .lessons-category-head:focus-visible,.theory-reference-category .lessons-category-head:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-glow)}.chord-shapes-category:not(.collapsed)>.lessons-category-head .lessons-category-arrow,.lesson-track-category:not(.collapsed)>.lessons-category-head .lessons-category-arrow,.scale-reference-category:not(.collapsed)>.lessons-category-head .lessons-category-arrow,.scale-family-category:not(.collapsed)>.lessons-category-head .lessons-category-arrow,.theory-reference-category:not(.collapsed)>.lessons-category-head .lessons-category-arrow{transform:rotate(90deg)}.chord-shapes-category.collapsed .chord-shape-groups,.lesson-track-category.collapsed .lessons-category-list,.scale-reference-category.collapsed .scale-family-list,.scale-family-category.collapsed .scale-shape-grid,.theory-reference-category.collapsed .theory-topic-list{display:none}.lessons-category-list{padding:var(--space-3)}.lesson-subcategory{margin-bottom:var(--space-3);background:#ffffff05;border-color:var(--color-border)}.lesson-subcategory .lessons-category-head{min-height:76px;padding:var(--space-3) var(--space-4)}.lesson-subcategory .lessons-category-icon{width:38px;height:38px;font-size:18px;background:var(--color-surface-elevated);box-shadow:none}.lesson-subcategory.locked .lessons-category-icon{color:var(--color-text-secondary);background:var(--color-surface-elevated);border:1px solid var(--color-border)}.lesson-subcategory.locked .lessons-category-title{color:var(--color-text-secondary)}.scale-reference-category.locked>.lessons-category-head,.scale-family-category.locked>.lessons-category-head{cursor:not-allowed}.lesson-subcategory.locked>.lessons-category-head{cursor:pointer}.lesson-subcategory.locked:not(.collapsed)>.lessons-category-head{border-bottom:1px solid var(--color-line)}.scale-reference-category.locked>.lessons-category-head .lessons-category-arrow,.scale-family-category.locked>.lessons-category-head .lessons-category-arrow{display:none}.lesson-subcategory .lessons-category-title{font-size:var(--text-lg)}.scale-reference-category,.theory-reference-category{margin-bottom:var(--space-3);background:#ffffff06;border-color:var(--color-border)}.scale-reference-category.locked .lessons-category-icon,.scale-family-category.locked .lessons-category-icon,.theory-reference-category.locked .lessons-category-icon{color:var(--color-text-secondary);background:var(--color-surface-elevated);border:1px solid var(--color-border)}.scale-reference-category.locked .lessons-category-title,.scale-family-category.locked .lessons-category-title,.theory-reference-category.locked .lessons-category-title{color:var(--color-text-secondary)}.scale-family-list{display:grid;gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--color-border)}.scale-family-category{background:#ffffff05;border-color:var(--color-border)}.scale-family-category .lessons-category-head{min-height:76px;padding:var(--space-3) var(--space-4)}.scale-shape-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--color-border)}.scale-shape-card{min-width:0;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff0a;text-align:center}.scale-shape-card.locked{background:#ffffff05;border-color:var(--color-border)}.scale-shape-diagram{display:block;width:100%;aspect-ratio:360 / 398;object-fit:contain;border-radius:var(--radius-sm);background:#07070adb}.scale-shape-placeholder{display:grid;place-items:center;width:100%;aspect-ratio:360 / 398;border-radius:var(--radius-sm);background:var(--color-surface-elevated);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-2xl);border:1px solid var(--color-border)}.scale-shape-name{margin-top:var(--space-2);color:var(--color-text-primary);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight)}.scale-shape-meta{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs)}.theory-topic-list{display:grid;gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--color-border)}.theory-topic-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(135deg,#2563eb1a,#06d6a00d);padding:var(--space-4)}.theory-topic-card.locked{background:#ffffff06;opacity:.82}.theory-topic-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.theory-topic-title{font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:var(--leading-tight)}.theory-topic-subtitle{margin-top:var(--space-1);color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-normal)}.theory-topic-badge{flex-shrink:0;border:1px solid var(--color-border-accent);border-radius:var(--radius-full);padding:var(--space-1) var(--space-2);color:var(--color-energy);background:#06d6a014;font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.theory-topic-badge.locked{color:var(--color-text-secondary);background:#94a3b814;border-color:var(--color-border)}.theory-note-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:var(--space-2);margin:var(--space-3) 0}.theory-note-strip span{border:1px solid var(--color-border-accent);border-radius:var(--radius-sm);padding:var(--space-2);background:var(--color-accent-subtle);color:var(--color-text-primary);text-align:center;font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}.theory-topic-steps{margin:var(--space-3) 0 0;padding-left:var(--space-5);color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-normal)}.theory-topic-steps li+li{margin-top:var(--space-2)}.theory-topic-locked-message{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-normal)}.lesson-card{display:flex;align-items:center;gap:var(--space-3);background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.lesson-card:hover{background:var(--color-accent-subtle);border-color:var(--color-border-accent);box-shadow:0 4px 12px var(--color-accent-glow)}.lesson-card.locked{background:#ffffff05;border-color:var(--color-border)}.lesson-card.locked:hover{background:#ffffff05;border-color:var(--color-border);box-shadow:none}.lesson-card.locked .lesson-card-icon{background:var(--color-surface-elevated);color:var(--color-text-disabled);box-shadow:none}.lesson-card-icon{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-energy),#10b981);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 2px 8px var(--color-energy-glow)}.lesson-card-info{flex:1;min-width:0}.lesson-card-title{font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-card-artist{font-family:Montserrat,sans-serif;font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-play-btn{background:linear-gradient(135deg,var(--color-accent),var(--color-energy));border:none;border-radius:var(--radius-sm);padding:6px 14px;font-family:var(--font-primary);font-size:12px;font-weight:var(--font-weight-semibold);color:#fff;cursor:pointer;flex-shrink:0;transition:opacity var(--duration-fast) ease,transform var(--duration-fast) var(--ease-bounce)}.lesson-play-btn:hover{opacity:.9;transform:translateY(-1px)}.lesson-play-btn:disabled{background:var(--color-surface-elevated);color:var(--color-text-secondary);cursor:not-allowed;opacity:.78}.lesson-play-btn:disabled:hover{opacity:.78;transform:none}.lessons-category-empty{font-family:Montserrat,sans-serif;font-size:13px;color:#64748b;padding:8px 0}.chord-shape-groups{display:grid;gap:var(--space-4);padding:var(--space-4);border-top:1px solid var(--color-border)}.chord-shape-subgroup{min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff06;overflow:hidden}.chord-shape-subgroup-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-accent-subtle)}.chord-shape-subgroup-title{color:var(--color-text-primary);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight)}.chord-shape-subgroup-meta{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);white-space:nowrap}.chord-shape-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--space-3);padding:var(--space-3)}.chord-shape-card{min-width:0;position:relative;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff0a;text-align:center}.chord-shape-card.locked{background:#ffffff05;border-color:var(--color-border)}.chord-shape-card.locked .chord-shape-diagram{filter:grayscale(.65);opacity:.62}.chord-shape-diagram{display:block;width:100%;aspect-ratio:360 / 430;object-fit:contain;border-radius:var(--radius-sm);background:#07070adb}.chord-shape-name{margin-top:var(--space-2);color:var(--color-text-primary);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight)}.chord-shape-meta{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);text-transform:capitalize}.chord-shape-lock{margin-top:var(--space-2);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.lessons-locked-message,.avatar-locked-message{padding:var(--space-8) var(--space-4);color:var(--color-text-secondary);font-family:var(--font-display);font-style:italic;font-size:clamp(20px,4vw,26px);font-weight:600;line-height:var(--leading-tight);text-align:center}.editor-field-group{margin-bottom:16px}.editor-field-group:last-child{margin-bottom:0}.editor-field-group label{font-size:14px;color:var(--color-text-secondary);display:block;margin-bottom:6px;font-family:var(--font-primary)}.editor-input{width:100%;padding:10px 14px;font-size:14px;font-family:var(--font-primary);background:#0e0e12cc;border:1px solid var(--color-border-accent);border-radius:var(--radius-md);color:var(--color-text-primary);outline:none;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.editor-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.editor-input-lg{padding:12px 16px;font-size:16px}.editor-row{display:flex;gap:12px}.editor-row-item{flex:1}.editor-mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.editor-mode-option{background:#0e0e12c7;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);color:var(--color-text-secondary);font-family:var(--font-primary);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.editor-mode-option:hover{color:var(--color-text-primary);border-color:var(--color-border-accent);background:var(--color-accent-subtle);transform:translateY(-1px)}.editor-mode-option.active{color:var(--color-text-primary);border-color:var(--color-accent);background:#b2ff1a1f;box-shadow:0 0 14px var(--color-accent-glow)}.editor-mode-title{display:block;font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1)}.editor-mode-desc{display:block;font-size:var(--text-xs);line-height:var(--leading-normal)}.editor-divider-text{text-align:center;margin-bottom:12px;color:var(--color-text-disabled);font-size:13px;font-family:var(--font-primary)}.editor-audio-row{display:flex;gap:10px;align-items:center}.editor-audio-name{font-size:13px;color:var(--color-text-secondary);font-family:var(--font-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-actions{display:flex;gap:12px}.editor-actions .ctrl-btn{flex:1;padding:12px;font-size:15px}.editor-toolbar-toggle{background:#0e0e12d9;color:var(--color-text-secondary);border:1px solid rgba(100,116,139,.3);border-radius:var(--radius-sm);padding:3px 8px;font-size:10px;font-family:var(--font-primary);cursor:pointer;margin-left:auto;transition:background var(--duration-fast) ease,color var(--duration-fast) ease}.editor-toolbar-toggle:hover{background:#b2ff1a4d;color:var(--color-text-primary)}#editor-toolbar{position:absolute;top:clamp(6px,1.5vw,10px);left:50%;transform:translate(-50%);z-index:25;background:#07070aeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:clamp(4px,1vw,8px) clamp(10px,2vw,16px);border-radius:var(--radius-md);font-size:var(--text-xs);font-family:var(--font-primary);max-width:96vw;border:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-1);box-shadow:0 4px 16px #0006}#editor-toolbar.hidden{display:none}.editor-toolbar-row{display:flex;align-items:center;gap:clamp(4px,.8vw,6px);flex-wrap:wrap}.editor-toolbar-section{display:flex;align-items:center;gap:clamp(3px,.6vw,4px);flex-wrap:wrap}.editor-toolbar-label{color:#64748b;font-size:clamp(9px,1.5vw,11px);text-transform:uppercase;letter-spacing:.5px;margin-right:2px}.editor-toolbar-divider{width:1px;height:24px;background:#64748b4d;margin:0 4px}.editor-tool-btn{background:#0e0e12d9;color:#e2e8f0;border:1px solid rgba(100,116,139,.3);border-radius:var(--radius-sm);padding:clamp(3px,.6vw,4px) clamp(6px,1.2vw,10px);font-size:clamp(10px,1.8vw,12px);font-family:var(--font-primary);cursor:pointer;transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.editor-tool-btn:hover{background:#b2ff1a4d;border-color:#b2ff1a80}.editor-tool-btn.active{background:#b2ff1a66;border-color:var(--color-accent);color:#fff;box-shadow:0 0 8px var(--color-accent-glow)}.editor-fx-btn{background:#0e0e12d9;color:var(--color-text-secondary);border:1px solid rgba(100,116,139,.25);border-radius:5px;padding:clamp(2px,.5vw,3px) clamp(5px,1vw,8px);font-size:clamp(9px,1.5vw,11px);font-family:var(--font-primary);cursor:pointer;transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.editor-fx-btn:hover{background:#b2ff1a40;border-color:#b2ff1a66;color:#e2e8f0}.editor-fx-btn.active{background:#b2ff1a33;border-color:#b2ff1a80;color:var(--color-energy);box-shadow:0 0 6px var(--color-energy-glow)}#editor-hud,#editor-hud.hidden{display:none}.chord-sequence-panel{position:absolute;left:clamp(var(--space-3),3vw,var(--space-6));right:clamp(var(--space-3),3vw,var(--space-6));top:calc(var(--header-height) + var(--space-3));bottom:calc(118px + env(safe-area-inset-bottom));z-index:24;display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:var(--space-4);pointer-events:none}.chord-sequence-panel.hidden{display:none}.chord-sequence-panel.editing{pointer-events:auto}.chord-sequence-panel.playback{grid-template-columns:1fr;align-items:center;justify-items:center}.chord-sequence-builder,.chord-sequence-stage{background:#07070ad1;border:1px solid var(--color-border);border-radius:var(--radius-lg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 28px #00000061,0 0 18px var(--color-accent-glow)}.chord-sequence-builder{padding:var(--space-4);overflow:hidden;display:flex;flex-direction:column;gap:var(--space-3);min-height:0}.chord-sequence-builder.hidden{display:none}.chord-sequence-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.chord-sequence-tools label{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs)}.chord-sequence-tools input,.chord-sequence-tools select{width:100%;margin-top:var(--space-1);background:#0e0e12db;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-family:var(--font-primary);padding:var(--space-2)}.chord-sequence-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.chord-sequence-actions button{background:#b2ff1a1a;border:1px solid var(--color-border-accent);border-radius:var(--radius-sm);color:var(--color-text-primary);font-family:var(--font-primary);font-weight:var(--font-weight-semibold);padding:var(--space-2);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.chord-sequence-actions button:hover{background:#b2ff1a2e;transform:translateY(-1px)}.chord-loop-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);align-items:center;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff09}.chord-loop-toggle{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);cursor:pointer}.chord-loop-toggle input{accent-color:var(--color-accent)}.chord-loop-panel button{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-xs);padding:var(--space-2);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.chord-loop-panel button:hover{background:var(--color-accent-subtle);border-color:var(--color-border-accent);transform:translateY(-1px)}.chord-loop-time{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);text-align:center}.chord-sequence-list{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2);padding-right:var(--space-1)}.chord-shape-editor{display:grid;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-accent-subtle)}.chord-shape-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.chord-shape-editor-title{color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}.chord-shape-editor-hint{margin-top:var(--space-1);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);line-height:var(--leading-normal)}.chord-shape-editor-actions,.chord-shape-finger-row{display:flex;gap:var(--space-2);flex-wrap:wrap}.chord-shape-editor-actions button,.chord-shape-finger{border:1px solid var(--color-border-accent);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.chord-shape-editor-actions button{padding:var(--space-2) var(--space-3)}.chord-shape-finger{width:34px;height:34px}.chord-shape-editor-actions button:hover,.chord-shape-finger:hover{transform:translateY(-1px);border-color:var(--color-accent);background:var(--color-surface-hover)}.chord-shape-finger.active{border-color:var(--color-energy);background:var(--color-energy);color:var(--color-bg)}.chord-shape-editor-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border)}.chord-shape-string-column{display:grid;grid-template-rows:30px repeat(5,42px) 18px;gap:var(--space-1);min-width:0}.chord-shape-top-toggle,.chord-shape-fret-cell{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated);color:var(--color-text-secondary);font-family:var(--font-primary);font-weight:var(--font-weight-bold);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.chord-shape-top-toggle.open{color:var(--color-energy);border-color:var(--color-energy)}.chord-shape-top-toggle.muted{color:var(--color-text-disabled)}.chord-shape-fret-cell{position:relative;color:var(--color-bg);font-size:var(--text-sm)}.chord-shape-fret-cell:before{content:"";position:absolute;inset:50% auto auto 50%;width:1px;height:calc(100% + var(--space-1));background:var(--color-border);transform:translate(-50%,-50%);pointer-events:none}.chord-shape-fret-cell.active{border-color:var(--color-energy);background:var(--color-energy)}.chord-shape-top-toggle:hover,.chord-shape-fret-cell:hover{transform:translateY(-1px);border-color:var(--color-accent)}.chord-shape-string-label{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);text-align:center}.chord-shape-editor.is-empty .chord-shape-editor-grid,.chord-shape-editor.is-empty .chord-shape-finger-row,.chord-shape-editor.is-empty .chord-shape-editor-actions{opacity:.45;pointer-events:none}.chord-cue-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 34px;gap:var(--space-2);align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#ffffff09;padding:var(--space-2)}.chord-cue-row.active{border-color:var(--color-accent);box-shadow:0 0 10px var(--color-accent-glow)}.chord-cue-row input{min-width:0;background:transparent;border:0;color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-sm);outline:none}.chord-cue-row .cue-time,.chord-cue-row .cue-beats{color:var(--color-text-secondary);font-size:var(--text-xs);text-align:center}.chord-cue-row button{background:#ff3a3a1f;border:1px solid rgba(255,58,58,.25);border-radius:var(--radius-sm);color:var(--gh-red);cursor:pointer;padding:var(--space-1)}.chord-sequence-stage{align-self:stretch;min-height:0;padding:clamp(var(--space-5),4vw,var(--space-10));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);text-align:center;pointer-events:none}.chord-sequence-panel.playback .chord-sequence-stage{width:min(92vw,760px);min-height:min(52vh,460px)}.chord-stage-label{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase}.chord-stage-current{font-family:var(--font-display);font-style:italic;font-size:clamp(64px,15vw,164px);font-weight:700;line-height:.9;color:var(--color-text-primary);text-shadow:0 0 26px var(--color-accent-glow);word-break:break-word}.chord-stage-current.chord-loop-landing{color:var(--color-accent)}.chord-stage-diagram{width:min(220px,46vw);margin:calc(var(--space-3) * -1) auto 0}.chord-stage-diagram.hidden{display:none}.chord-stage-diagram img{display:block;width:100%;aspect-ratio:360 / 430;object-fit:contain;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.chord-stage-next{color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-lg);min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-4);border:1px solid transparent;border-radius:var(--radius-full);transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.chord-stage-next.chord-change-soon{color:var(--color-text-primary);background:color-mix(in srgb,var(--gh-yellow) 18%,transparent);border-color:color-mix(in srgb,var(--gh-yellow) 42%,transparent);box-shadow:0 0 18px var(--color-accent-glow)}.chord-count-ring{width:min(320px,64vw);height:12px;border-radius:var(--radius-full);background:#ffffff14;overflow:hidden;border:1px solid var(--color-border)}.chord-count-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--gh-green),var(--gh-yellow));box-shadow:0 0 14px var(--color-accent-glow);transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.chord-count-fill.chord-change-soon{background:linear-gradient(90deg,var(--gh-yellow),var(--gh-orange));box-shadow:0 0 18px var(--color-energy-glow)}.chord-beat-dots{display:flex;justify-content:center;gap:var(--space-2);min-height:18px}.chord-beat-dot{width:10px;height:10px;border-radius:var(--radius-full);background:#ffffff29;border:1px solid var(--color-border)}.chord-beat-dot.active{background:var(--color-accent);box-shadow:0 0 10px var(--color-accent-glow)}.chord-beat-dots.chord-change-soon .chord-beat-dot.active{background:var(--gh-yellow)}.ctrl-btn.hidden,select.hidden{display:none!important}#search-input{width:100%;padding:clamp(10px,2vw,14px) clamp(14px,2.5vw,18px);font-size:var(--text-base);font-family:var(--font-primary);letter-spacing:.02em;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);outline:none;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}#search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow),0 4px 12px var(--color-accent-glow)}#search-input::placeholder{color:var(--color-text-disabled)}#search-results{margin-top:var(--space-4)}.search-result{padding:clamp(12px,2vw,16px);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-2);cursor:pointer;background:#ffffff08;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.search-result:hover{background:var(--color-accent-subtle);border-color:var(--color-border-accent);box-shadow:0 4px 12px var(--color-accent-glow);transform:translate(4px)}.search-result .title{font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-weight-semibold);letter-spacing:.02em;color:var(--color-text-primary)}.search-result .artist{font-family:var(--font-primary);font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:2px}.instrument-toggle{display:flex;gap:8px;margin-bottom:var(--space-5);background:transparent;border:0}.instrument-btn{flex:1;padding:10px 14px;text-align:center;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:500;font-style:italic;letter-spacing:.14em;text-transform:uppercase;background:#ffffff0a;color:var(--color-text-secondary);border:1px solid var(--color-line);border-radius:999px;outline:none;transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}.instrument-btn:hover{color:var(--color-text-primary);border-color:#ffffff2e}.instrument-btn.active{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);box-shadow:0 0 18px var(--color-accent-glow)}#difficulty-panel.hidden{display:none}.difficulty-list{display:flex;flex-direction:column;margin-bottom:var(--space-4);border-top:1px solid var(--color-line)}.difficulty-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);padding:clamp(14px,2.5vw,18px) 4px;background:transparent;border:0;border-bottom:1px solid var(--color-line);cursor:pointer;font-family:var(--font-primary);position:relative;transition:padding-left var(--duration-normal) var(--ease-out),color var(--duration-fast)}.difficulty-item:before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--d-color, var(--color-accent));transform-origin:center;transition:transform var(--duration-normal) var(--ease-out);border-radius:2px}.difficulty-item:hover,.difficulty-item:active{padding-left:16px;background:#ffffff06}.difficulty-item:hover:before,.difficulty-item:active:before{transform:translateY(-50%) scaleY(1);box-shadow:0 0 12px var(--d-color, var(--color-accent))}.diff-item-label{font-family:var(--font-display);font-style:italic;font-size:clamp(20px,4vw,26px);font-weight:500;letter-spacing:0;text-transform:uppercase;line-height:1;color:var(--d-color, var(--color-text-primary))}.diff-item-desc{font-size:var(--text-xs);color:var(--color-text-secondary);letter-spacing:.02em}.diff-item-arrow{font-size:20px;color:var(--color-text-secondary);font-family:var(--font-primary)}.difficulty-item.easy{--d-color: var(--color-easy)}.difficulty-item.intermediate{--d-color: var(--color-intermediate)}.difficulty-item.hard{--d-color: var(--color-hard)}.difficulty-item.vhard{--d-color: var(--color-vhard)}#learn-search,#search-input{display:block;width:100%;padding:14px 2px;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;color:var(--color-text-primary);font-family:var(--font-primary);font-size:16px;text-align:center;margin-bottom:var(--space-4);box-sizing:border-box;transition:border-color var(--duration-fast)}#learn-search:focus,#search-input:focus{outline:none;border-bottom-color:var(--color-accent);box-shadow:0 1px 0 0 var(--color-accent)}#learn-search::placeholder,#search-input::placeholder{color:var(--color-text-disabled);font-style:italic}#song-list{display:flex;flex-direction:column;border-top:1px solid var(--color-line);margin-top:var(--space-3)}.song-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:clamp(12px,2vw,16px) 4px;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;cursor:pointer;font-family:var(--font-primary);min-height:56px;position:relative;transition:padding-left var(--duration-normal) var(--ease-out),background var(--duration-fast)}.song-list-item:before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--color-accent);border-radius:2px;transition:transform var(--duration-normal) var(--ease-out)}.song-list-item:hover,.song-list-item:active{padding-left:14px;background:#ffffff06}.song-list-item:hover:before,.song-list-item:active:before{transform:translateY(-50%) scaleY(1);box-shadow:0 0 10px var(--color-accent)}.song-list-info{min-width:0}.song-list-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--space-2);min-width:0}.song-list-title{font-family:var(--font-display);font-style:italic;font-size:clamp(17px,3.4vw,21px);font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--color-text-primary);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-list-artist{font-size:12px;color:var(--color-text-secondary);letter-spacing:.02em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-diff-badge{flex-shrink:0;padding:3px 9px;border-radius:var(--radius-full);font-family:var(--font-display);font-style:italic;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor}.song-diff-badge.diff-easy{color:var(--color-easy)}.song-diff-badge.diff-medium{color:var(--color-intermediate)}.song-diff-badge.diff-hard{color:var(--color-hard)}.song-diff-badge.diff-vhard{color:var(--color-vhard)}.song-export-btn{flex-shrink:0;min-height:30px;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent-hover);font-family:var(--font-display);font-style:italic;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.song-export-btn:hover,.song-export-btn:focus-visible{border-color:var(--color-accent);color:var(--color-text-primary);transform:translateY(-1px)}.song-export-btn:disabled{cursor:wait;color:var(--color-text-secondary);border-color:var(--color-border);background:#ffffff0a;transform:none}@media(max-width:520px){.song-list-actions{flex-direction:column;align-items:flex-end;gap:var(--space-1)}.song-export-btn{min-height:28px;padding-inline:var(--space-2)}}.tab-export-modal{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--space-3);padding:var(--space-4);background:#07070ae0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.tab-export-modal.hidden{display:none}.tab-export-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#101015eb;box-shadow:0 8px 32px var(--color-accent-glow)}.tab-export-title{min-width:0;font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:500;color:var(--color-text-primary);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-export-subtitle{margin-top:var(--space-1);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-export-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}.tab-export-zoom{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-full);background:#ffffff0a}.tab-export-zoom-btn{width:34px;height:34px;border:1px solid var(--color-border-accent);border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent-hover);font-family:var(--font-display);font-style:italic;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.tab-export-zoom-btn:hover,.tab-export-zoom-btn:focus-visible{border-color:var(--color-accent);color:var(--color-text-primary);transform:translateY(-1px)}.tab-export-zoom-value{min-width:54px;color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);text-align:center}.tab-export-action{min-height:38px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent-hover);font-family:var(--font-display);font-style:italic;font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.tab-export-action:hover,.tab-export-action:focus-visible{border-color:var(--color-accent);color:var(--color-text-primary);transform:translateY(-1px)}.tab-export-action.secondary{color:var(--color-text-secondary);border-color:var(--color-border);background:transparent}.tab-export-preview{--tab-preview-zoom: 1;min-height:0;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:var(--space-4)}.tab-export-preview svg{display:block;width:calc(1180px * var(--tab-preview-zoom));max-width:none;height:auto;margin:0 auto var(--space-4);border-radius:var(--radius-sm);box-shadow:0 8px 32px #00000073}.tab-export-preview svg:last-child{margin-bottom:0}@media(max-width:720px){.tab-export-modal{padding:var(--space-2)}.tab-export-header{grid-template-columns:1fr}.tab-export-actions{justify-content:stretch}.tab-export-zoom{order:-1;width:100%;justify-content:center}.tab-export-action{flex:1 1 auto}}.song-list-loading{text-align:center;padding:var(--space-8);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm)}.song-list-heading{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2)}#track-selector.hidden{display:none}#track-selector>h2{margin-bottom:clamp(12px,3vw,18px)!important}#track-selector .ts-song{font-family:var(--font-display);font-style:italic;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:clamp(12px,3vw,20px);padding-bottom:clamp(12px,3vw,16px);border-bottom:1px solid var(--color-line)}#track-selector .ts-list{display:flex;flex-direction:column;border-top:1px solid var(--color-line)}.track-option{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-3);padding:clamp(14px,2.5vw,18px) 4px;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;cursor:pointer;font-family:var(--font-primary);position:relative;transition:padding-left var(--duration-normal) var(--ease-out),background var(--duration-fast)}.track-option:before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--color-accent);border-radius:2px;transition:transform var(--duration-normal) var(--ease-out)}.track-option:hover,.track-option:active{padding-left:14px;background:#ffffff06}.track-option:hover:before,.track-option:active:before{transform:translateY(-50%) scaleY(1);box-shadow:0 0 10px var(--color-accent)}.track-option .to-name{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(17px,3.4vw,20px);text-transform:uppercase;letter-spacing:0;color:var(--color-text-primary);line-height:1.15}.track-option .to-tuning{font-family:var(--font-primary);font-size:11px;color:var(--color-text-secondary);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}.track-option-info{min-width:0}.track-option-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--space-2);min-width:0}.track-export-btn{flex-shrink:0;min-height:30px;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent-hover);font-family:var(--font-display);font-style:italic;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.track-export-btn:hover,.track-export-btn:focus-visible{border-color:var(--color-accent);color:var(--color-text-primary);transform:translateY(-1px)}.track-export-btn:disabled{cursor:wait;color:var(--color-text-secondary);border-color:var(--color-border);background:#ffffff0a;transform:none}.track-option .to-arrow{font-family:var(--font-primary);font-size:20px;color:var(--color-text-secondary)}@media(max-width:520px){.track-option{grid-template-columns:minmax(0,1fr) auto}.track-option-actions{flex-direction:column;align-items:flex-end;gap:var(--space-1)}.track-export-btn{min-height:28px;padding-inline:var(--space-2)}}#loading-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-family:Montserrat,sans-serif;font-size:clamp(14px,3vw,18px);letter-spacing:.5px}#loading-overlay.hidden{display:none}.loading-spinner{border:3px solid rgba(148,163,184,.1);border-top:3px solid var(--color-accent);border-radius:50%;width:44px;height:44px;animation:spin .8s linear infinite;margin:0 auto var(--space-4);box-shadow:0 0 12px var(--color-accent-glow)}@keyframes spin{to{transform:rotate(360deg)}}#hud{position:absolute;top:clamp(6px,1.5vw,10px);left:clamp(6px,1.5vw,10px);right:clamp(6px,1.5vw,10px);z-index:20;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(4px,1vw,8px)}#hud.hidden{display:none}.hud-item{font-family:var(--font-display);font-style:italic;font-size:clamp(11px,2.2vw,14px);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-primary);background:#0a0a0eb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:4px 12px;border:1px solid var(--color-line);border-bottom:2px solid var(--color-accent);border-radius:999px;white-space:nowrap}#count-in-overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#00000080;pointer-events:none}#count-in-overlay.hidden{display:none}#count-in-label{font-family:var(--font-display);font-style:italic;font-size:clamp(80px,22vw,180px);font-weight:700;letter-spacing:-.02em;color:var(--color-accent);text-shadow:0 0 40px var(--color-accent-glow),0 0 80px rgba(178,255,26,.3);opacity:0;transform:scale(.5)}@keyframes countInPop{0%{opacity:1;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}80%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(.8)}}#count-in-label.count-in-pop{animation:countInPop .5s ease-out forwards}#hit-feedback{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-style:italic;font-size:clamp(32px,8vw,56px);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:var(--color-accent);text-shadow:0 0 16px var(--color-accent-glow),0 0 32px var(--color-accent-glow);opacity:0;z-index:25;pointer-events:none}@keyframes hitPop{0%{transform:translate(-50%,-50%) scale(1.4);opacity:1}40%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(.9);opacity:0}}#hit-feedback.hit-animate{animation:hitPop .5s ease-out forwards}#controls-bar{position:absolute;bottom:0;left:0;width:100%;z-index:30;background:#0a0a0ed9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(178,255,26,.15);padding:var(--space-3) clamp(10px,2vw,24px) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);box-shadow:0 -4px 20px #0000004d}.controls-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,12px);flex-wrap:wrap}#controls-bar.hidden{display:none}.ctrl-btn{font-family:var(--font-display);font-style:italic;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:transparent;border:1px solid var(--color-line);color:var(--color-text-secondary);border-radius:999px;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.ctrl-btn:hover,.ctrl-btn:active{color:var(--color-text-primary);border-color:#ffffff2e;background:#ffffff0a}.ctrl-btn.active{color:#05240a;background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 14px var(--color-accent-glow)}#btn-play{background:var(--color-accent);border-color:var(--color-accent);color:#05240a;width:clamp(40px,6vw,48px);height:clamp(40px,6vw,48px);min-width:clamp(40px,6vw,48px);padding:0;font-size:clamp(14px,2.5vw,18px);border-radius:var(--radius-full);box-shadow:0 0 0 4px #b2ff1a26,0 4px 16px var(--color-accent-glow);transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}#btn-play:hover{background:var(--color-accent-hover);box-shadow:0 0 0 6px #b2ff1a33,0 6px 24px var(--color-accent-glow);transform:translateY(-2px)}#btn-play:active{transform:translateY(0)}#btn-metronome{min-width:44px;border-radius:var(--radius-full)}#btn-metronome.active{color:#05240a;background:var(--gh-yellow);border-color:var(--gh-yellow);box-shadow:0 0 14px #ffd40047}#btn-metronome.beat{transform:translateY(-1px) scale(1.06);box-shadow:0 0 0 4px #ffd40029,0 0 18px #ffd40057}#btn-metronome.beat.accent-beat{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 5px var(--color-accent-glow),0 0 22px var(--color-accent-glow)}#seek-bar{width:100%;height:5px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--color-accent) var(--seek-progress, 0%),rgba(255,255,255,.08) var(--seek-progress, 0%));border-radius:var(--radius-full);cursor:pointer;outline:none;transition:height var(--duration-fast) ease}#seek-bar:hover{height:7px}#seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 0 8px var(--color-accent-glow),0 1px 4px #0000004d;transition:transform var(--duration-fast) var(--ease-bounce)}#seek-bar:hover::-webkit-slider-thumb{transform:scale(1.25)}#time-display{font-family:Montserrat,sans-serif;font-size:clamp(10px,1.8vw,12px);font-weight:500;letter-spacing:.3px;color:#ffffff80;min-width:clamp(70px,12vw,90px);text-align:center}.zoom-group{display:flex;align-items:center;gap:clamp(4px,.8vw,6px);margin-left:4px}.zoom-label{font-family:Montserrat,sans-serif;font-size:clamp(9px,1.5vw,11px);letter-spacing:.3px;color:#ffffff59;text-transform:uppercase;white-space:nowrap}#zoom-slider{width:clamp(50px,10vw,80px);height:4px;-webkit-appearance:none;appearance:none;background:#ffffff1f;border-radius:10px;cursor:pointer;outline:none}#zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 4px #0000004d}.zoom-group,#tool-zoom-in,#tool-zoom-out,#tool-zoom-reset,#editor-zoom-level{display:none!important}#speed-select{font-family:Montserrat,sans-serif;background:#ffffff14;border:1px solid rgba(255,255,255,.1);color:#e2e8f0;border-radius:10px;padding:clamp(6px,1.2vw,8px) clamp(8px,1.5vw,10px);font-size:clamp(11px,2vw,13px);cursor:pointer;outline:none;transition:all .25s ease}#speed-select:hover{background:#ffffff24;border-color:#fff3}#speed-select option{background:#16161d;color:#fff}#app.play-mode #hud{top:calc(max(var(--space-2),env(safe-area-inset-top)) + 88px);left:var(--space-2);right:var(--space-2);justify-content:space-between;gap:var(--space-2);pointer-events:none}#app.play-mode .hud-item{background:#0a0f1eb8;border:1px solid var(--color-border);border-bottom-color:var(--color-border-accent);box-shadow:0 4px 16px #0000004d,0 0 18px var(--color-accent-glow);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);max-width:calc(50vw - var(--space-4));overflow:hidden;text-overflow:ellipsis}#play-top-controls{display:none}#app.play-mode #play-top-controls{position:absolute;top:max(var(--space-3),env(safe-area-inset-top));left:var(--space-3);right:var(--space-3);z-index:35;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"speed . back" "title title title";align-items:center;row-gap:var(--space-2);column-gap:var(--space-3);pointer-events:none}#app.play-mode #play-top-controls>*{pointer-events:auto}#app.play-mode #controls-bar{left:50%;bottom:max(var(--space-3),env(safe-area-inset-bottom));width:min(560px,calc(100% - var(--space-4)));transform:translate(-50%);border:0;border-radius:0;padding:0;background:transparent;box-shadow:none;gap:var(--space-2);overflow:visible}#app.play-mode .controls-row{position:relative;display:block;width:100%;height:88px;margin-top:var(--space-3);padding:0;border:0;border-radius:var(--radius-lg);background:transparent;box-shadow:none}#app.play-mode #time-display{align-self:flex-start;min-width:0;padding-inline:var(--space-1);text-align:left;color:var(--color-text-secondary);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#app.play-mode #seek-bar{height:8px;background-color:#0a0f1eb8;box-shadow:0 0 0 1px var(--color-border),0 4px 16px #0000004d}#app.play-mode #seek-bar::-webkit-slider-thumb{width:22px;height:22px}#app.play-mode #speed-select,#app.play-mode .ctrl-btn{min-height:44px;min-width:44px;padding:0 var(--space-3);font-size:var(--text-xs);letter-spacing:.08em;white-space:nowrap}#app.play-mode #speed-select{grid-area:speed;justify-self:start;background:#0a0f1ec7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000004d,0 0 18px var(--color-accent-glow)}#app.play-mode #btn-play{position:absolute;left:50%;top:0;transform:translate(-50%);justify-self:center;width:76px;height:76px;min-width:76px;margin:0;font-size:var(--text-2xl);padding:0;box-shadow:0 0 0 6px #b2ff1a29,0 8px 32px var(--color-accent-glow);z-index:2}#app.play-mode #btn-play:hover{transform:translate(-50%) translateY(-2px)}#app.play-mode #btn-play:active{transform:translate(-50%)}#app.play-mode #btn-metronome{position:absolute;left:calc(50% + 58px);top:14px;width:52px;height:52px;min-width:52px;padding:0;z-index:2;background:#0a0f1ec7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#app.play-mode #btn-metronome.active{background:var(--gh-yellow)}#app.play-mode #btn-back{grid-area:back;justify-self:end;padding-inline:var(--space-3);background:#0a0f1ec7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000004d,0 0 18px var(--color-accent-glow)}#play-track-title{display:none}#app.play-mode #play-track-title{grid-area:title;justify-self:center;display:block;max-width:min(520px,calc(100vw - (var(--space-3) * 2)));padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-full);background:#0a0f1ea3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 16px #0000004d;pointer-events:none}@media(orientation:landscape){#app.play-mode #play-top-controls{top:max(var(--space-2),env(safe-area-inset-top));grid-template-areas:"speed title back";row-gap:0}#app.play-mode #play-track-title{align-self:center;max-width:min(420px,calc(100vw - 220px));padding:var(--space-1) var(--space-2)}}@media(max-width:640px){#app.play-mode #controls-bar{width:calc(100% - var(--space-4));gap:var(--space-2)}#app.play-mode .controls-row{height:92px;margin-top:var(--space-3)}#app.play-mode #speed-select,#app.play-mode #btn-back{padding-inline:var(--space-2)}#app.play-mode #btn-play{width:80px;height:80px;min-width:80px;top:0}#app.play-mode #btn-metronome{left:calc(50% + 62px);top:16px;width:54px;height:54px;min-width:54px}#app.play-mode #hud{justify-content:center}#app.play-mode .hud-item{max-width:calc(50vw - var(--space-3));padding-inline:var(--space-2)}}#debug-panel{display:none!important}:root{--header-height: 52px;--tab-bar-height: 88px}#app:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse 100% 55% at 50% 105%,rgba(178,255,26,.08) 0%,transparent 55%),radial-gradient(ellipse 100% 45% at 50% -5%,rgba(42,155,255,.05) 0%,transparent 50%),linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-2) 100%)}#app:after{content:"";position:absolute;left:0;right:0;top:54%;height:1px;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 40%,rgba(255,255,255,.14) 60%,transparent)}.stage-floor{position:absolute;left:50%;bottom:-28%;width:260%;height:72%;z-index:0;pointer-events:none;transform:translate(-50%) rotateX(72deg);transform-origin:50% 0;background-image:linear-gradient(90deg,transparent 0 19.5%,rgba(255,255,255,.09) 19.5% 20.5%,transparent 20.5%),linear-gradient(90deg,transparent 0 39.5%,rgba(255,255,255,.09) 39.5% 40.5%,transparent 40.5%),linear-gradient(90deg,transparent 0 59.5%,rgba(255,255,255,.09) 59.5% 60.5%,transparent 60.5%),linear-gradient(90deg,transparent 0 79.5%,rgba(255,255,255,.09) 79.5% 80.5%,transparent 80.5%),linear-gradient(90deg,transparent 0 99.5%,rgba(255,255,255,.09) 99.5% 100%),linear-gradient(0deg,transparent 0 calc(100% - 1px),rgba(255,255,255,.09) 100%);background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 56px;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-y;animation:stage-scroll 6s linear infinite;mask-image:linear-gradient(0deg,transparent 0%,black 28%,black 82%,transparent 100%);-webkit-mask-image:linear-gradient(0deg,transparent 0%,black 28%,black 82%,transparent 100%);opacity:.9}@keyframes stage-scroll{0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,0 0,0 0,0 0,0 56px}}.stage-beacon{position:absolute;left:50%;top:54%;width:260px;height:260px;z-index:0;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 50%,rgba(178,255,26,.18) 0%,transparent 60%);filter:blur(8px)}#app.play-mode:before,#app.play-mode:after,#app.play-mode .stage-floor,#app.play-mode .stage-beacon{display:none}#app.home-mode:before,#app.home-mode:after,#app.home-mode .stage-floor{display:none}#app.home-mode .stage-beacon{top:auto;left:0;bottom:0;width:100%;height:60%;transform:none;filter:none;background:linear-gradient(180deg,transparent 0%,rgba(178,255,26,.07) 100%)}#app-header{position:absolute;top:0;left:0;width:100%;height:var(--header-height);z-index:25;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);background:linear-gradient(180deg,#07070ad9,#07070a8c);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--color-line)}#app-header.hidden{display:none}.app-header-title{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,2.4vw,19px);font-weight:600;letter-spacing:0;text-transform:uppercase;color:var(--color-text-primary);flex-shrink:0;white-space:nowrap}.app-header-right{display:flex;align-items:center;gap:var(--space-2);min-width:0;overflow:hidden}#tab-bar{position:absolute;left:50%;bottom:calc(var(--space-6) + env(safe-area-inset-bottom));width:min(calc(100% - var(--space-4)),520px);z-index:30;min-height:60px;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;transform:translate(-50%);background:linear-gradient(180deg,#111827d1,#0a0f1ee0),var(--color-surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:6px;box-shadow:0 8px 28px #00000052,0 0 0 1px #ffffff05,0 0 18px var(--color-accent-glow)}#tab-bar:before{content:"";position:absolute;left:16%;right:16%;top:4px;height:2px;background:linear-gradient(90deg,var(--gh-green) 0 20%,var(--gh-red) 20% 40%,var(--gh-yellow) 40% 60%,var(--gh-blue) 60% 80%,var(--gh-orange) 80% 100%);opacity:.32;border-radius:2px;mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent);pointer-events:none}#tab-bar.hidden{display:none}.tab-bar-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 6px;background:transparent;border:none;cursor:pointer;border-radius:var(--radius-full);color:var(--color-text-secondary);font-family:var(--font-primary);-webkit-tap-highlight-color:transparent;min-height:48px;position:relative;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce);--tab-glow: var(--gh-green);--tab-tint: var(--color-accent-subtle)}.tab-bar-item:nth-child(1){--tab-glow: var(--color-text-primary);--tab-tint: rgba(244, 241, 234, .08)}.tab-bar-item:nth-child(2){--tab-glow: var(--gh-green);--tab-tint: rgba(178, 255, 26, .08)}.tab-bar-item:nth-child(3){--tab-glow: var(--gh-yellow);--tab-tint: rgba(255, 212, 0, .08)}.tab-bar-item:nth-child(4){--tab-glow: var(--gh-blue);--tab-tint: rgba(42, 155, 255, .08)}.tab-bar-item:nth-child(5){--tab-glow: var(--gh-red);--tab-tint: rgba(255, 58, 58, .08)}.tab-bar-item:nth-child(6){--tab-glow: var(--gh-orange);--tab-tint: rgba(255, 122, 26, .08)}.tab-bar-item:hover{color:var(--color-text-primary);background:var(--tab-tint)}.tab-bar-item:active{transform:translateY(1px)}.tab-bar-item.active{color:var(--color-text-primary);background:var(--tab-tint)}.tab-bar-item.active .tab-bar-icon{color:var(--tab-glow);text-shadow:0 0 12px var(--tab-glow)}.tab-bar-item.active:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:20px;height:3px;border-radius:2px;background:var(--tab-glow);box-shadow:0 0 10px var(--tab-glow)}.tab-bar-icon{font-size:clamp(19px,3vw,21px);line-height:1;transition:color var(--duration-fast),text-shadow var(--duration-fast)}.tab-bar-label{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.home-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:clamp(18px,3.5vw,28px)}.home-top h2{margin-bottom:0}.home-account-btn{flex-shrink:0;background:transparent;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;margin-top:4px}.home-account-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-energy));color:#05240a;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:17px;box-shadow:0 2px 10px var(--color-accent-glow);transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.home-account-btn:hover .home-account-avatar,.home-account-btn:active .home-account-avatar{transform:translateY(-2px);box-shadow:0 6px 16px var(--color-accent-glow)}#home-panel h2{margin-bottom:clamp(18px,3.5vw,28px)}.home-continue{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);padding:clamp(16px,3.5vw,22px) clamp(16px,3vw,22px);background:linear-gradient(135deg,#b2ff1a1a,#b2ff1a05);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);color:var(--color-text-primary);cursor:pointer;margin-bottom:clamp(18px,4vw,28px);text-align:left;font:inherit;width:100%;-webkit-tap-highlight-color:transparent;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.home-continue:hover,.home-continue:active{transform:translateY(-2px);border-color:var(--color-accent);box-shadow:0 8px 24px var(--color-accent-glow)}.home-continue-main{min-width:0}.home-continue-label{font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:6px}.home-continue-title{font-family:var(--font-display);font-style:italic;font-size:clamp(20px,4vw,26px);font-weight:600;line-height:1.1;letter-spacing:-.01em;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-continue-artist{font-family:var(--font-primary);font-size:13px;color:var(--color-text-secondary);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-continue-arrow{font-family:var(--font-display);font-size:28px;color:var(--color-accent);line-height:1}.home-continue-empty{background:transparent;border:1px dashed var(--color-line)}.home-continue-empty .home-continue-label{color:var(--color-text-secondary)}.home-continue-empty .home-continue-title{font-style:normal;font-family:var(--font-primary);font-size:14px;font-weight:400;color:var(--color-text-secondary);line-height:1.4;white-space:normal}.home-continue-empty .home-continue-arrow{color:var(--color-text-disabled)}.home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vw,14px)}.home-tile{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(16px,3vw,22px) clamp(14px,2.6vw,18px);background:transparent;border:1px solid var(--color-line);border-radius:var(--radius-lg);color:var(--color-text-primary);text-align:left;cursor:pointer;font-family:var(--font-primary);min-height:116px;-webkit-tap-highlight-color:transparent;transition:transform var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.home-tile:hover,.home-tile:active{border-color:var(--color-border-accent);background:#b2ff1a0a;transform:translateY(-2px)}.home-tile.locked{cursor:default;border-style:dashed;background:#ffffff03;color:var(--color-text-secondary)}.home-tile.locked:hover,.home-tile.locked:active{transform:none;border-color:var(--color-line);background:#ffffff03}.home-tile.locked .home-tile-icon,.home-tile.locked .home-tile-label,.home-tile.locked .home-tile-desc{color:var(--color-text-disabled)}.home-tile-icon{font-size:clamp(22px,4vw,26px);line-height:1;color:var(--color-text-secondary);margin-bottom:auto}.home-tile-label{font-family:var(--font-display);font-style:italic;font-size:clamp(17px,3vw,20px);font-weight:600;letter-spacing:-.005em;color:var(--color-text-primary);margin-top:18px}.home-tile-desc{font-size:12px;color:var(--color-text-secondary);margin-top:2px}.account-avatar-large{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-energy));color:#05240a;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:36px;box-shadow:0 6px 20px var(--color-accent-glow);margin:0 auto clamp(20px,4vw,28px)}.account-field{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(14px,3vw,20px)}.account-field label{font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary)}.account-field input{width:100%;padding:12px 2px;font-size:16px;font-family:var(--font-primary);background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;color:var(--color-text-primary);outline:none;transition:border-color .3s ease}.account-field input:focus{border-bottom-color:var(--color-accent);box-shadow:0 1px 0 0 var(--color-accent)}.account-readonly{padding:12px 2px;font-size:15px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-line);word-break:break-all}.account-actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:clamp(16px,4vw,28px)}#account-save{width:100%}.btn-ghost-full{width:100%;padding:var(--space-3);background:transparent;border:1px solid var(--color-line);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-display);font-style:italic;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.btn-ghost-full:hover{color:var(--color-error);border-color:var(--color-error)}.account-status{margin-top:var(--space-4);text-align:center;font-size:13px;min-height:18px}.account-status.ok{color:var(--color-accent)}.account-status.err{color:var(--color-error)}.account-avatar-action{width:100%;margin-top:clamp(12px,3vw,18px);padding:var(--space-3);background:var(--color-accent-subtle);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);color:var(--color-accent);font-family:var(--font-display);font-style:italic;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast),transform var(--duration-fast)}.account-avatar-action:hover{background:var(--color-accent);color:#fff;transform:translateY(-1px)}#avatar-panel{display:flex;flex-direction:column;overflow:hidden;padding-bottom:clamp(8px,2vw,14px)}#avatar-panel>*{flex:0 0 auto;width:100%;max-width:540px;margin-left:auto;margin-right:auto}#avatar-panel .back-btn{margin-bottom:4px}#avatar-panel h2{margin:0 auto 8px!important;font-size:clamp(20px,4vw,28px)!important}.avatar-preview{width:100%;height:clamp(180px,30vh,320px);margin:0 auto 10px;border-radius:var(--radius-lg);background:radial-gradient(ellipse at 50% 40%,rgba(37,99,235,.18),transparent 65%),linear-gradient(160deg,#0f1730,#0a0f1e 70%);border:1px solid var(--color-border);box-shadow:0 8px 28px #00000073,inset 0 0 0 1px #ffffff05;overflow:hidden;position:relative}.avatar-preview canvas{display:block;width:100%!important;height:100%!important}.avatar-tabs{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:5px;padding:4px 0;max-height:32vh;overflow-y:auto;scrollbar-width:none}.avatar-tabs::-webkit-scrollbar{display:none}.avatar-tab{flex:0 0 auto;padding:5px 10px;background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-full);font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}.avatar-tab:hover{color:var(--color-text-primary);border-color:var(--color-border-accent)}.avatar-tab.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:0 4px 14px var(--color-accent-glow)}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:6px 0;flex:1 1 0;min-height:0;overflow-y:auto;align-content:start;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--color-border-accent) transparent}.avatar-grid::-webkit-scrollbar{width:6px}.avatar-grid::-webkit-scrollbar-thumb{background:var(--color-border-accent);border-radius:3px}@media(min-width:500px){.avatar-grid{grid-template-columns:repeat(6,1fr)}}.avatar-thumb{aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;padding:4px;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;position:relative;overflow:hidden;transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.avatar-thumb:hover{transform:translateY(-2px);border-color:var(--color-border-accent)}.avatar-thumb.selected{border-color:var(--color-accent);background:var(--color-accent-subtle);box-shadow:0 0 0 2px var(--color-accent-glow),0 6px 18px var(--color-accent-glow)}.avatar-thumb svg{width:100%;height:100%;display:block}.avatar-thumb .avatar-swatch{width:70%;height:70%;border-radius:50%;border:2px solid rgba(255,255,255,.22);box-shadow:0 3px 10px #0006}.avatar-colors{display:none;flex:0 0 auto;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 4px;margin-top:4px}.avatar-colors-active{display:flex}.avatar-color-label{font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-secondary);margin-right:4px;flex:0 0 auto}.avatar-color{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.18);cursor:pointer;padding:0;flex:0 0 auto;transition:transform var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast)}.avatar-color:hover{transform:scale(1.1)}.avatar-color.selected{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-glow),0 4px 12px var(--color-accent-glow)}.avatar-sliders{display:none;flex:0 0 auto;flex-direction:column;gap:6px;padding:8px 10px;margin:6px 0;background:#1118278c;border:1px solid var(--color-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-height:30vh;overflow-y:auto}.avatar-sliders-active{display:flex}.avatar-slider-row{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px}.avatar-slider-label{font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-secondary)}.avatar-slider-track{display:flex;align-items:center;gap:8px}.avatar-slider-cap{width:22px;text-align:center;font-size:14px;color:var(--color-text-secondary);opacity:.8;flex:0 0 auto}.avatar-slider-track input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;background:var(--color-border);border-radius:4px;outline:none;cursor:pointer}.avatar-slider-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--color-accent);border:3px solid var(--color-bg);border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--color-accent),0 0 12px var(--color-accent-glow);transition:transform .12s ease}.avatar-slider-track input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}.avatar-slider-track input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--color-accent);border:3px solid var(--color-bg);border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--color-accent),0 0 12px var(--color-accent-glow)}.avatar-field{display:flex;flex-direction:column;gap:8px;padding:10px 4px}.avatar-field-label{font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary)}.avatar-field input[type=text]{width:100%;padding:10px 2px;font-size:16px;font-family:var(--font-primary);background:transparent;border:0;border-bottom:1.5px solid var(--color-line);color:var(--color-text-primary);outline:none;transition:border-color .2s ease}.avatar-field input[type=text]:focus{border-bottom-color:var(--color-accent)}.avatar-reset{margin:10px 4px 0;padding:var(--space-2) var(--space-3);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-family:var(--font-display);font-style:italic;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color var(--duration-fast),border-color var(--duration-fast)}.avatar-reset:hover{color:var(--color-warning);border-color:var(--color-warning)}.avatar-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;flex:0 0 auto}#avatar-panel #avatar-status{margin-top:4px;min-height:16px}#avatar-save{width:100%;padding:10px 12px}#avatar-random{width:100%;padding:10px 12px;background:transparent;border:1px solid var(--color-border-accent);border-radius:var(--radius-md);color:var(--color-accent);font-family:var(--font-display);font-style:italic;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast)}#avatar-random:hover{background:var(--color-accent-subtle)}#avatar-status{margin-top:var(--space-3);text-align:center;min-height:18px;font-size:13px}.more-menu-list{display:flex;flex-direction:column;margin-top:var(--space-4);border-top:1px solid var(--color-line)}.more-menu-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:var(--space-4);padding:clamp(14px,2.5vw,18px) 4px;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;color:var(--color-text-primary);font-family:var(--font-display);font-style:italic;font-size:clamp(18px,3.4vw,22px);font-weight:500;letter-spacing:0;text-transform:uppercase;cursor:pointer;position:relative;transition:padding-left var(--duration-normal) var(--ease-out),background var(--duration-fast)}.more-menu-item:before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--color-accent);border-radius:2px;transition:transform var(--duration-normal) var(--ease-out)}.more-menu-item:hover,.more-menu-item:active{padding-left:14px;background:#ffffff06}.more-menu-item:hover:before,.more-menu-item:active:before{transform:translateY(-50%) scaleY(1);box-shadow:0 0 10px var(--color-accent)}.admin-preview-toggle{margin:var(--space-3) 0;padding:var(--space-4);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);background:var(--color-accent-subtle);grid-template-columns:28px 1fr auto}.admin-preview-toggle:after{content:"";width:42px;height:24px;border-radius:var(--radius-full);background:#94a3b838;border:1px solid var(--color-border);box-shadow:inset 0 0 0 2px #0000001f;transition:background var(--duration-fast),border-color var(--duration-fast)}.admin-preview-toggle small{justify-self:end;color:var(--color-text-secondary);font-family:var(--font-primary);font-style:normal;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);text-transform:none}.admin-preview-toggle.preview-on{border-color:#06d6a073;background:#06d6a014}.admin-preview-toggle.preview-on:after{background:var(--color-energy);border-color:#06d6a0b3;box-shadow:inset 18px 0 #05240a47,0 0 16px var(--color-energy-glow)}.admin-editable-label{cursor:text;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:4px}.more-item-icon{font-size:18px;text-align:center;color:var(--color-text-secondary)}.more-profile-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) 4px;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0}.more-profile-avatar{width:44px;height:44px;border-radius:var(--radius-full);background:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-size:18px;font-weight:600;color:#05240a;flex-shrink:0;box-shadow:0 0 18px var(--color-accent-glow)}.more-profile-name{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:18px;text-transform:uppercase;letter-spacing:0;color:var(--color-text-primary)}.more-profile-email{color:var(--color-text-secondary);font-size:12px;letter-spacing:.02em}.more-sign-in-prompt{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-text-secondary);font-size:13px;line-height:1.5}.more-sign-in-prompt .ctrl-btn{margin-top:var(--space-3)}.install-banner{position:fixed;left:50%;top:50%;width:min(calc(100vw - var(--space-8)),420px);z-index:10000;background:#1e293bf5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:0 4px 20px var(--color-accent-glow);animation:install-slide-in .3s ease-out;transform:translate(-50%,-50%)}.install-banner:before{content:"";position:fixed;inset:-100vh -100vw;z-index:-1;background:#0307129e;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}@keyframes install-slide-in{0%{opacity:0;transform:translate(-50%,calc(-50% + 16px))}to{opacity:1;transform:translate(-50%,-50%)}}.install-banner-content{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}.install-banner-icon{font-size:32px;flex-shrink:0;line-height:1}.install-banner-text{display:flex;flex-direction:column;gap:var(--space-2)}.install-banner-text strong{color:var(--color-text-primary);font-size:var(--text-lg);line-height:var(--leading-tight)}.install-banner-text span{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-normal)}.install-banner-benefits{margin:var(--space-1) 0 0;padding-left:var(--space-4);color:var(--color-text-secondary);font-size:var(--text-xs);line-height:var(--leading-normal)}.install-banner-benefits li{margin:2px 0}.install-banner-actions{display:flex;gap:var(--space-2);justify-content:flex-end}.install-banner-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);border:none;background:var(--color-accent);color:#fff;font-weight:var(--font-weight-semibold);font-size:var(--text-sm);cursor:pointer;transition:background var(--duration-fast)}.install-banner-btn:hover{background:var(--color-accent-hover)}.install-banner-dismiss{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:border-color var(--duration-fast)}.install-banner-dismiss:hover{border-color:var(--color-text-secondary)}@media(min-width:769px){.install-banner{display:none!important}}.lb-tab-bar{display:flex;gap:8px;margin-bottom:var(--space-5);background:transparent;border:0;padding:0}.lb-tab-btn{flex:1;padding:9px 14px;border:1px solid var(--color-line);border-radius:999px;background:transparent;color:var(--color-text-secondary);font-family:var(--font-display);font-style:italic;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.lb-tab-btn.active{background:var(--color-accent);color:#05240a;border-color:var(--color-accent);box-shadow:0 0 16px var(--color-accent-glow)}.lb-tab-btn:hover:not(.active){color:var(--color-text-primary);border-color:#ffffff2e}.lb-list{display:flex;flex-direction:column;gap:var(--space-2)}.lb-card{display:flex;align-items:center;gap:var(--space-3);background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-family:var(--font-primary);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.lb-card:hover{background:var(--color-accent-subtle);border-color:var(--color-border-accent);transform:translate(4px)}.lb-card.lb-me{background:#b2ff1a1a;border-color:var(--color-border-accent);box-shadow:0 0 12px var(--color-accent-glow)}.lb-rank{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);font-size:var(--text-sm);flex-shrink:0;color:#fff;background:#47556980}.lb-rank-1{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 2px 8px #fbbf2466}.lb-rank-2{background:linear-gradient(135deg,#94a3b8,#64748b);box-shadow:0 2px 8px #94a3b84d}.lb-rank-3{background:linear-gradient(135deg,#cd7f32,sienna);box-shadow:0 2px 8px #cd7f324d}.lb-info{flex:1;min-width:0}.lb-name{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-sessions{font-size:var(--text-xs);color:var(--color-text-secondary)}.lb-time{font-family:var(--font-display);font-style:italic;font-size:18px;font-weight:600;color:var(--color-accent);text-align:right;white-space:nowrap;letter-spacing:-.01em}.lb-empty,.lb-loading{text-align:center;padding:var(--space-8);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm)}.ach-level-bar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);font-family:var(--font-primary)}.ach-level-badge{width:48px;height:48px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-accent),var(--color-energy));display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:#fff;flex-shrink:0;box-shadow:0 4px 12px var(--color-accent-glow)}.ach-level-info{flex:1;min-width:0}.ach-level-label{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:4px}.ach-xp-track{height:8px;border-radius:var(--radius-full);background:#ffffff0a;overflow:hidden}.ach-xp-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-accent),var(--color-energy));transition:width .4s var(--ease-out)}.ach-xp-text{font-size:10px;color:var(--color-text-disabled);margin-top:2px}.ach-section-title{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-bold);color:var(--color-text-disabled);text-transform:uppercase;letter-spacing:1px;margin:var(--space-5) 0 var(--space-3)}#ach-skins{display:flex;flex-direction:column;gap:var(--space-4)}.ach-skin-group-title{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.ach-skin-list{display:flex;gap:var(--space-2);flex-wrap:wrap}.ach-skin-card{width:80px;padding:var(--space-2);border-radius:var(--radius-md);border:2px solid var(--color-border);background:#ffffff08;cursor:pointer;text-align:center;font-family:var(--font-primary);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}.ach-skin-card:hover{border-color:var(--color-text-secondary)}.ach-skin-card.active{border-color:var(--color-energy);box-shadow:0 0 10px var(--color-energy-glow)}.ach-skin-card.locked{opacity:.35;cursor:default}.ach-skin-swatch{width:100%;height:32px;border-radius:calc(var(--radius-md) - 4px);margin-bottom:4px}.ach-skin-name{font-size:10px;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ach-skin-unlock{font-size:9px;color:var(--color-text-disabled)}.ach-toast.level-up{background:#b2ff1a26;border-color:#b2ff1a66}.ach-toast.level-up .ach-toast-title{color:var(--color-accent-hover)}#ach-stats{display:flex;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}.ach-stat{flex:1 1 80px;min-width:80px;background:#ffffff0a;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);text-align:center;font-family:var(--font-primary)}.ach-stat-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1.2}.ach-stat-label{font-size:var(--text-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}#ach-grid{display:flex;flex-direction:column;gap:var(--space-2)}.ach-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-primary);transition:background var(--duration-fast),border-color var(--duration-fast)}.ach-card.unlocked{background:#b2ff1a0f;border-color:#b2ff1a33}.ach-card.locked{opacity:.45}.ach-icon{font-size:28px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-md);background:#ffffff0a}.ach-card.unlocked .ach-icon{background:#b2ff1a26}.ach-info{flex:1;min-width:0}.ach-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.ach-card.unlocked .ach-title{color:var(--color-energy)}.ach-desc{font-size:var(--text-xs);color:var(--color-text-secondary)}.ach-date{font-size:10px;color:var(--color-text-disabled);white-space:nowrap}.ach-lock{font-size:16px;color:var(--color-text-disabled);flex-shrink:0}.ach-toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-120px);z-index:9999;padding:var(--space-3) var(--space-5);background:#b2ff1a26;border:1px solid rgba(178,255,26,.4);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-family:var(--font-primary);text-align:center;pointer-events:none;opacity:0;transition:transform .4s var(--ease-bounce),opacity .4s ease}.ach-toast.visible{transform:translate(-50%) translateY(0);opacity:1}.ach-toast-icon{font-size:24px}.ach-toast-title{font-size:var(--text-sm);font-weight:var(--font-weight-bold);color:var(--color-energy)}.ach-toast-subtitle{font-size:var(--text-xs);color:var(--color-text-secondary)}#app.play-mode #app-header,#app.play-mode #tab-bar{display:none}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.auth-hidden{display:none!important}.back-btn{font-family:var(--font-display);font-style:italic;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:transparent;border:1px solid var(--color-line);color:var(--color-text-secondary);border-radius:999px;padding:8px 14px;cursor:pointer;margin-bottom:clamp(12px,3vw,20px);transition:color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.back-btn:hover,.back-btn:active{color:var(--color-text-primary);border-color:#ffffff2e;background:#ffffff0a}#tuner-panel{text-align:center}#tuner-panel.hidden{display:none}.tuner-note{font-family:var(--font-display);font-style:italic;font-size:clamp(96px,22vw,140px);font-weight:600;line-height:.9;letter-spacing:-.02em;text-transform:uppercase;color:var(--color-text-primary);text-shadow:0 0 30px var(--color-accent-glow);transition:color var(--duration-fast),text-shadow var(--duration-fast)}.tuner-note.in-tune{color:var(--color-accent);text-shadow:0 0 40px var(--color-accent)}.tuner-octave{font-family:var(--font-primary);font-size:14px;color:var(--color-text-secondary);letter-spacing:.18em;text-transform:uppercase;margin-top:-4px;margin-bottom:var(--space-1)}.tuner-freq{font-family:var(--font-primary);font-size:12px;color:var(--color-text-secondary);letter-spacing:.14em;text-transform:uppercase;margin-bottom:clamp(24px,5vw,36px)}.tuner-meter{margin:0 auto;width:min(320px,92%)}.tuner-meter-bar{position:relative;height:2px;background:#ffffff14;border-radius:0;overflow:visible}.tuner-meter-bar:before{display:none}.tuner-meter-center{position:absolute;top:-6px;left:50%;width:1px;height:14px;background:var(--color-accent);transform:translate(-50%);box-shadow:0 0 8px var(--color-accent-glow)}.tuner-meter-needle{position:absolute;top:-10px;width:3px;height:22px;background:var(--color-text-primary);border-radius:1px;left:50%;transform:translate(-50%);transition:left .08s ease-out,background .2s ease,box-shadow .2s ease;box-shadow:0 0 10px #fff6}.tuner-meter-labels{display:flex;justify-content:space-between;margin-top:var(--space-2);font-size:10px;letter-spacing:.14em;color:var(--color-text-disabled);font-family:var(--font-primary);text-transform:uppercase}.tuner-cents{font-family:var(--font-display);font-style:italic;font-size:clamp(20px,4vw,26px);font-weight:500;margin-top:clamp(16px,3vw,20px);letter-spacing:0;color:var(--color-text-primary)}.tuner-status{min-height:20px;margin-top:var(--space-1);font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-weight-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary);transition:color var(--duration-fast) var(--ease-out),text-shadow var(--duration-fast) var(--ease-out)}.tuner-status.in-tune{color:var(--color-success);text-shadow:0 0 14px var(--color-energy-glow)}.tuner-signal{display:flex;align-items:center;gap:var(--space-3);margin-top:clamp(18px,3vw,24px);justify-content:center}.tuner-signal-label{font-family:var(--font-primary);font-size:10px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.16em;min-width:40px;text-align:right}.tuner-signal-track{width:140px;height:2px;border-radius:0;background:#ffffff14;overflow:hidden}.tuner-signal-fill{height:100%;width:0%;background:var(--color-text-disabled);transition:width 80ms linear,background .15s ease}#quiz-panel{text-align:center}#quiz-panel.hidden{display:none}.quiz-select-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}.quiz-select-grid.hidden,.quiz-display.hidden{display:none}.quiz-select-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"icon title" "icon desc";gap:var(--space-1) var(--space-4);min-height:112px;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff0a;color:var(--color-text-primary);text-align:left;cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.quiz-select-card:hover{transform:translateY(-3px);border-color:var(--color-border-accent);background:var(--color-accent-subtle);box-shadow:0 0 18px var(--color-accent-glow)}.quiz-select-icon{grid-area:icon;width:56px;height:56px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--color-accent);color:#05240a;font-size:28px;box-shadow:0 0 14px var(--color-accent-glow)}.quiz-select-title{grid-area:title;font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);font-weight:var(--font-weight-semibold);letter-spacing:0;text-transform:uppercase;min-width:0}.quiz-select-desc{grid-area:desc;color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);line-height:var(--leading-normal)}@media(min-width:760px){.quiz-select-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quiz-select-card{grid-template-columns:1fr;grid-template-areas:"icon" "title" "desc";justify-items:start}}.quiz-active-bar{display:flex;justify-content:flex-start;margin-bottom:var(--space-4)}.quiz-back-btn{min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.quiz-back-btn:hover{color:var(--color-text-primary);border-color:var(--color-border-accent);background:var(--color-accent-subtle)}.quiz-string,.quiz-fret{font-family:var(--font-display);font-style:italic;font-size:clamp(28px,6vw,40px);font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--color-text-primary)}.quiz-prompt{margin-bottom:clamp(20px,4vw,32px);background:transparent;border:0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:0;padding:var(--space-6) var(--space-2)}.quiz-image-card{margin:0 auto var(--space-5);width:min(100%,440px)}.quiz-image-card.hidden{display:none}.quiz-image-card img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:contain;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#07070adb;box-shadow:0 0 22px var(--color-accent-glow)}.quiz-image-credit{display:inline-block;margin-top:var(--space-2);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-xs);text-decoration:none}.quiz-image-credit.hidden{display:none}.quiz-answer{font-family:var(--font-display);font-style:italic;font-size:clamp(64px,16vw,110px);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:var(--color-accent);text-shadow:0 0 30px var(--color-accent-glow);margin-bottom:clamp(14px,3vw,20px);min-height:clamp(80px,18vw,120px)}.quiz-answer.hidden{visibility:hidden}@keyframes quizReveal{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:0 auto var(--space-4);width:min(100%,440px)}.quiz-choices.hidden{display:none}.quiz-choice{min-height:48px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff0d;color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-bounce)}.quiz-choice:hover:not(:disabled){background:var(--color-accent-subtle);border-color:var(--color-border-accent);transform:translateY(-2px)}.quiz-choice.correct{color:#05240a;background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 16px var(--color-accent-glow)}.quiz-choice.wrong{color:var(--color-text-primary);background:#ef444438;border-color:#ef44448c}.quiz-choice:disabled{cursor:default}.quiz-buttons{display:flex;flex-wrap:wrap;gap:clamp(8px,2vw,12px);justify-content:center}.quiz-btn{min-width:clamp(100px,20vw,140px);font-size:var(--text-sm)!important;padding:clamp(10px,1.5vw,12px) clamp(16px,3vw,24px)!important}.quiz-score{margin-top:clamp(16px,3vw,20px);font-family:var(--font-display);font-style:italic;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-secondary)}#chord-trainer-panel{text-align:center}#chord-trainer-setup.hidden,#chord-trainer-drill.hidden,#chord-trainer-results.hidden{display:none}.chord-trainer-copy{margin:calc(var(--space-4) * -1) auto var(--space-5);color:var(--color-text-secondary);font-family:var(--font-primary);font-size:var(--text-sm);line-height:var(--leading-normal);text-align:left}.chord-trainer-presets{display:grid;gap:var(--space-3);margin-bottom:var(--space-5)}.chord-trainer-preset{display:grid;gap:var(--space-1);min-height:104px;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-primary);text-align:left;cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.chord-trainer-preset:hover,.chord-trainer-preset.active{transform:translateY(-2px);border-color:var(--color-border-accent);background:var(--color-accent-subtle);box-shadow:0 0 18px var(--color-accent-glow)}.chord-trainer-preset-title{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);text-transform:uppercase;line-height:var(--leading-tight)}.chord-trainer-preset-chords{color:var(--color-accent);font-family:var(--font-display);font-style:italic;font-size:var(--text-base);font-weight:var(--font-weight-semibold)}.chord-trainer-preset-desc{color:var(--color-text-secondary);font-size:var(--text-xs);line-height:var(--leading-normal)}.chord-trainer-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-5);text-align:left}.chord-trainer-field{display:grid;gap:var(--space-2)}.chord-trainer-field label{color:var(--color-text-secondary);font-family:var(--font-display);font-style:italic;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:.12em;text-transform:uppercase}.chord-trainer-field input,.chord-trainer-field select{width:100%;min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated);color:var(--color-text-primary);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.chord-trainer-field input:focus,.chord-trainer-field select:focus{border-color:var(--color-border-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.chord-trainer-primary,.chord-trainer-secondary{min-height:48px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-family:var(--font-display);font-style:italic;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),box-shadow var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.chord-trainer-primary{border:0;background:var(--color-accent);color:var(--color-bg);box-shadow:0 0 18px var(--color-accent-glow)}.chord-trainer-secondary{border:1px solid var(--color-border);background:var(--color-surface-elevated);color:var(--color-text-secondary)}.chord-trainer-primary:hover,.chord-trainer-secondary:hover{transform:translateY(-2px);box-shadow:0 0 20px var(--color-accent-glow)}.chord-trainer-secondary:hover{border-color:var(--color-border-accent);background:var(--color-accent-subtle);color:var(--color-text-primary)}.chord-trainer-topbar,.chord-trainer-scorebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin-bottom:var(--space-4)}.chord-trainer-stat{display:grid;gap:var(--space-1);min-height:64px;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.chord-trainer-stat span:first-child{color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase}.chord-trainer-stat span:last-child{color:var(--color-text-primary);font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-tight)}.chord-trainer-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:var(--space-4);align-items:stretch;margin-bottom:var(--space-4)}.chord-trainer-card{min-height:320px;padding:var(--space-4);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-accent-subtle),var(--color-surface));box-shadow:0 0 22px var(--color-accent-glow)}.chord-trainer-card.next{border-color:var(--color-border);background:var(--color-surface);box-shadow:none}.chord-trainer-card-title{font-family:var(--font-display);font-style:italic;font-size:clamp(34px,8vw,64px);font-weight:var(--font-weight-semibold);line-height:.95;text-transform:uppercase;color:var(--color-text-primary);margin-bottom:var(--space-3)}.chord-trainer-diagram{min-height:220px;display:grid;place-items:center}.chord-trainer-diagram img{display:block;width:min(100%,320px);aspect-ratio:4 / 3;object-fit:contain;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg)}.chord-trainer-progress{height:8px;overflow:hidden;border-radius:var(--radius-full);background:var(--color-line);margin-bottom:var(--space-3)}.chord-trainer-progress-fill{width:0%;height:100%;border-radius:inherit;background:var(--color-accent);box-shadow:0 0 14px var(--color-accent-glow);transition:width 60ms linear}.chord-trainer-beats{display:flex;justify-content:center;gap:var(--space-2);min-height:20px;margin-bottom:var(--space-4)}.chord-trainer-beat{width:12px;height:12px;border-radius:var(--radius-full);background:var(--color-line);transition:transform var(--duration-fast) var(--ease-bounce),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.chord-trainer-beat.accent{width:18px}.chord-trainer-beat.active{transform:scale(1.35);background:var(--color-accent);box-shadow:0 0 12px var(--color-accent-glow)}.chord-trainer-tap{width:min(100%,360px);min-height:76px;margin:0 auto;font-size:var(--text-lg)}.chord-trainer-feedback{min-height:32px;margin-top:var(--space-3);font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);text-transform:uppercase}.chord-trainer-feedback.ready{color:var(--color-text-secondary)}.chord-trainer-feedback.hit{color:var(--color-accent);text-shadow:0 0 14px var(--color-accent-glow)}.chord-trainer-feedback.late{color:var(--color-error)}.chord-trainer-results-card{display:grid;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-accent-subtle),var(--color-surface));box-shadow:0 0 22px var(--color-accent-glow)}.chord-trainer-result-main{font-family:var(--font-display);font-style:italic;font-size:clamp(64px,16vw,108px);font-weight:var(--font-weight-semibold);line-height:.95;color:var(--color-accent);text-shadow:0 0 24px var(--color-accent-glow)}.chord-trainer-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.chord-trainer-result-summary{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-normal)}.chord-trainer-actions{display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap}@media(max-width:720px){.chord-trainer-controls,.chord-trainer-stage,.chord-trainer-scorebar,.chord-trainer-topbar{grid-template-columns:1fr}.chord-trainer-card{min-height:260px}}#controls-bar,#hud{transition:opacity .2s ease;will-change:opacity}#controls-bar.ui-hidden,#hud.ui-hidden{opacity:0;pointer-events:none}.auth-btn{font-family:var(--font-display);font-style:italic;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:transparent;border:1px solid var(--color-line);color:var(--color-text-secondary);border-radius:999px;padding:8px 14px;cursor:pointer;transition:color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.auth-btn:hover,.auth-btn:active{color:var(--color-text-primary);border-color:#ffffff2e;background:#ffffff0a}.auth-user-name{font-family:var(--font-primary);font-size:12px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.auth-overlay{display:none;position:fixed;inset:0;z-index:99999;background:#000000b3;justify-content:center;align-items:center}.auth-overlay.active{display:flex}.auth-modal{background:#0a0a0ef0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-8);max-width:400px;width:90%;color:var(--color-text-primary);font-family:var(--font-primary);box-shadow:0 20px 60px #0009,0 0 40px var(--color-accent-glow)}.auth-modal h2{margin:0 0 6px;font-size:22px;color:#fff;font-weight:700}.auth-modal p{margin:0 0 20px;font-size:14px;color:#9ca3af}.auth-modal label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#cbd5e1}.auth-modal input[type=email],.auth-modal input[type=password],.auth-modal input[type=text]{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text-primary);font-size:var(--text-base);margin-bottom:var(--space-4);box-sizing:border-box;outline:none;font-family:var(--font-primary);transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.auth-modal input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.auth-modal .auth-error{color:#ff7a1a;font-size:13px;margin:-10px 0 14px;display:none}.auth-modal button{width:100%;padding:var(--space-3);border:none;border-radius:var(--radius-md);background:var(--color-accent);color:#fff;font-size:var(--text-base);font-weight:var(--font-weight-semibold);cursor:pointer;font-family:var(--font-primary);transition:background var(--duration-fast) ease,transform var(--duration-fast) var(--ease-bounce),box-shadow var(--duration-fast) ease}.auth-modal button:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px var(--color-accent-glow)}.auth-modal button:active{transform:translateY(0)}.auth-modal button:disabled{opacity:.5;cursor:not-allowed;transform:none}.auth-modal .auth-links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.auth-modal .auth-link{background:none;border:none;color:#b2ff1a;font-size:13px;cursor:pointer;text-decoration:underline;padding:0;width:auto;font-family:Montserrat,system-ui,sans-serif;font-weight:400}.auth-modal .auth-link:hover{color:#93bbfc;background:none}.auth-modal .auth-checkbox-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px}.auth-modal .auth-checkbox-row input[type=checkbox]{width:auto;margin:3px 0 0;flex-shrink:0}.auth-modal .auth-checkbox-row label{margin:0;font-size:13px;cursor:pointer}@media(max-width:768px){.ctrl-btn,#speed-select,.back-btn,.instrument-btn{min-height:44px}#seek-bar{height:10px}#seek-bar::-webkit-slider-thumb{width:22px;height:22px}.zoom-group{display:none}.editor-row{flex-direction:column;gap:8px}.editor-actions{flex-direction:column}.editor-actions .ctrl-btn{width:100%}#editor-toolbar{left:0;right:0;top:0;transform:none;max-width:100%;border-radius:0;border-left:none;border-right:none;border-top:none;padding:4px 8px}#editor-toolbar:not(.toolbar-expanded) .editor-toolbar-row.collapsible{display:none!important}.editor-toolbar-divider{display:none}.editor-tool-btn,.editor-fx-btn{min-height:36px;min-width:36px;padding:6px 10px}#editor-fx-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}#editor-onset-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;gap:4px}#editor-sections-row{flex-wrap:nowrap;overflow-x:auto}#app.editor-mode #editor-toolbar{left:var(--space-2);right:var(--space-2);top:auto;bottom:calc(max(var(--space-3),env(safe-area-inset-bottom)) + 156px);transform:none;max-width:none;max-height:min(42vh,360px);overflow-y:auto;overscroll-behavior:contain;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#0a0f1ee0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 32px #00000080}#app.editor-mode .editor-toolbar-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;gap:var(--space-2);padding-bottom:var(--space-1);scrollbar-width:thin}#app.editor-mode .editor-toolbar-row:first-child{position:sticky;top:0;z-index:2;padding-bottom:var(--space-2);background:linear-gradient(180deg,#0a0f1efa,#0a0f1ec7)}#app.editor-mode .editor-tool-btn,#app.editor-mode .editor-fx-btn,#app.editor-mode .editor-toolbar-toggle{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);white-space:nowrap}#app.editor-mode #editor-toolbar-expand{position:sticky;right:0;margin-left:var(--space-2);background:#0a0f1ef5;border-color:var(--color-border-accent);color:var(--color-text-primary)}#app.editor-mode #editor-state-text{display:none}#app.editor-mode #editor-note-count,#app.editor-mode #editor-zoom-level,#app.editor-mode #onset-status{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-full);background:#ffffff0f}#app.editor-mode #editor-toolbar input,#app.editor-mode #editor-toolbar select{flex:0 0 auto;min-height:40px;min-width:72px;font-size:16px!important;border-radius:var(--radius-md)!important}#app.editor-mode #detect-sensitivity{width:112px!important}#app.editor-mode #editor-chord-name{width:88px!important}#app.editor-mode #section-marker-list{flex-wrap:nowrap!important;max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important}#app.editor-mode #controls-bar{width:calc(100% - var(--space-4))}#app.editor-mode .controls-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);height:136px;padding-top:84px}#app.editor-mode #btn-editor-save,#app.editor-mode #btn-editor-load,#app.editor-mode #btn-editor-export,#app.editor-mode #btn-editor-audio{position:static;width:100%;min-width:0;min-height:40px;padding:0 var(--space-2);font-size:11px;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis}#editor-panel .editor-audio-row{align-items:stretch;flex-direction:column}#editor-panel .editor-audio-row .ctrl-btn{width:100%}#editor-panel .editor-audio-name{min-height:20px;white-space:normal}#editor-bpm{width:100%!important}.editor-mode-picker{grid-template-columns:1fr}.chord-sequence-panel.editing{grid-template-columns:1fr;top:var(--space-3);bottom:128px;overflow-y:auto}.chord-sequence-builder{max-height:42vh}.chord-sequence-stage{min-height:34vh;padding:var(--space-5) var(--space-4)}.chord-stage-current{font-size:clamp(52px,18vw,96px)}.chord-cue-row{grid-template-columns:minmax(0,1fr) 52px 50px 32px}.chord-loop-panel{grid-template-columns:1fr}#app.editor-mode #play-top-controls{top:max(var(--space-2),env(safe-area-inset-top));grid-template-areas:"speed title back";row-gap:0}#app.editor-mode #play-track-title{max-width:min(46vw,280px);padding:var(--space-1) var(--space-2)}#app.editor-mode #controls-bar{left:var(--space-2);right:var(--space-2);bottom:max(var(--space-2),env(safe-area-inset-bottom));width:auto;transform:none;display:grid;grid-template-rows:auto auto auto;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#0a0f1ee6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 32px #00000080}#app.editor-mode #time-display{width:100%;text-align:center;font-size:11px}#app.editor-mode #seek-bar{height:10px}#app.editor-mode .controls-row{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);grid-template-areas:"save play load" "metro export audio";gap:var(--space-2);width:100%;height:auto;margin:0;padding:0;align-items:center}#app.editor-mode #btn-play{position:static;grid-area:play;place-self:center;width:68px;height:68px;min-width:68px;transform:none}#app.editor-mode #btn-play:hover,#app.editor-mode #btn-play:active{transform:none}#app.editor-mode #btn-metronome{position:static;grid-area:metro;width:100%;height:44px;min-width:0;transform:none}#app.editor-mode #btn-editor-save{grid-area:save}#app.editor-mode #btn-editor-load{grid-area:load}#app.editor-mode #btn-editor-export{grid-area:export}#app.editor-mode #btn-editor-audio{grid-area:audio}#app.editor-mode #btn-editor-save,#app.editor-mode #btn-editor-load,#app.editor-mode #btn-editor-export,#app.editor-mode #btn-editor-audio{min-height:48px;border-radius:var(--radius-md);background:#ffffff0f}#app.editor-mode #editor-toolbar{left:var(--space-2);right:var(--space-2);bottom:calc(max(var(--space-2),env(safe-area-inset-bottom)) + 168px);max-height:82px;padding:var(--space-2);overflow:hidden;border-radius:var(--radius-lg);transition:max-height var(--duration-normal) var(--ease-smooth),bottom var(--duration-normal) var(--ease-smooth)}#app.editor-mode #editor-toolbar.toolbar-expanded{max-height:min(54vh,440px);overflow-y:auto}#app.editor-mode #editor-toolbar:not(.toolbar-expanded) #editor-tempo-row,#app.editor-mode #editor-toolbar:not(.toolbar-expanded) #editor-onset-row,#app.editor-mode #editor-toolbar:not(.toolbar-expanded) #editor-sections-row{display:none!important}#app.editor-mode #editor-toolbar .editor-toolbar-row:first-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;align-items:center;gap:var(--space-2);overflow:visible}#app.editor-mode #editor-toolbar:not(.toolbar-expanded) #tool-zoom-in,#app.editor-mode #editor-toolbar:not(.toolbar-expanded) #tool-zoom-out,#app.editor-mode #editor-toolbar:not(.toolbar-expanded) #tool-zoom-reset{display:none}#app.editor-mode #tool-note,#app.editor-mode #tool-select,#app.editor-mode #tool-scrub{width:100%;min-width:0;justify-content:center;background:#ffffff12}#app.editor-mode #tool-zoom-in,#app.editor-mode #tool-zoom-out,#app.editor-mode #tool-zoom-reset{width:44px;padding:0}#app.editor-mode #editor-zoom-level{display:none}#app.editor-mode #editor-note-count{min-width:56px}#app.editor-mode #editor-toolbar-expand{position:static;min-width:64px;margin:0}#app.editor-mode #editor-fx-row,#app.editor-mode #editor-onset-row,#app.editor-mode #editor-tempo-row,#app.editor-mode #editor-sections-row{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border)}#app.editor-mode #editor-toolbar.toolbar-expanded .editor-toolbar-row{min-height:48px}}@media(max-width:768px)and (orientation:portrait){.tuner-meter-bar{height:10px}.tuner-meter-needle{height:28px;top:-10px;width:5px}.tuner-meter-center{height:20px;top:-6px}}.tuner-presets-container{margin-top:32px;display:flex;flex-direction:column;align-items:center;width:100%}#tuner-preset-select{margin-bottom:18px;font-family:var(--font-display);font-style:italic;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:9px 32px 9px 14px;width:80%;max-width:300px;background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-line);border-radius:999px;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a8a92' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center}#tuner-preset-select option{background:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-primary);letter-spacing:0;text-transform:none}.tuner-targets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%;max-width:420px}.tuner-target-badge{background:transparent;border:1px solid var(--color-line);border-radius:999px;padding:7px 14px;font-family:var(--font-display);font-style:italic;font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--color-text-secondary);min-width:48px;transition:color .2s,border-color .2s,background .2s,box-shadow .2s}.tuner-target-badge.active{background:var(--color-accent);color:#05240a;border-color:var(--color-accent);box-shadow:0 0 16px var(--color-accent-glow)}