:root{--bg: #0E0E0E;--bg2: #171717;--bg3: #222222;--card: #171717;--border: #2E2E2E;--g: #52E300;--gd: #40B800;--gl: rgba(82,227,0,.15);--b: #6C8EFF;--bl: rgba(108,142,255,.15);--o: #FFB020;--ol: rgba(255,176,32,.15);--p: #7C5CFF;--pl: rgba(124,92,255,.15);--t1: #FFFFFF;--t2: #A3A3A3;--t3: #6B6B6B;--rad: 16px;--pill: 100px;--nav-h: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:-apple-system,BlinkMacSystemFont,SF Pro,Segoe UI,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}input{font-family:inherit}.app-shell{max-width:500px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:var(--nav-h)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:500px;height:var(--nav-h);background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:100;padding-bottom:env(safe-area-inset-bottom,0)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 20px;border-radius:12px;font-size:11px;color:var(--t3);transition:color .2s;cursor:pointer}.nav-item.active{color:var(--g)}.nav-item.disabled{opacity:.35;pointer-events:none;cursor:not-allowed}.nav-icon{width:24px;height:24px}.page{display:none}.page.active{display:block}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}.top-bar-left{display:flex;align-items:center;gap:12px}.top-logo{width:40px;height:40px;border-radius:12px;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#000}.top-title{font-size:18px;font-weight:700}.top-subtitle{font-size:12px;color:var(--t3);margin-top:2px}.avatar{width:40px;height:40px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--t1)}.search-bar{margin:0 20px 16px;display:flex;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:var(--pill);padding:12px 16px;gap:10px}.search-bar input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:15px}.search-bar input::placeholder{color:var(--t3)}.search-icon{color:var(--g);font-size:16px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 20px}.stat-card{background:var(--bg2);border-radius:var(--rad);padding:16px 12px;text-align:center;border:1px solid var(--border)}.stat-num{font-size:28px;font-weight:700;color:var(--t1)}.stat-label{font-size:12px;color:var(--t3);margin-top:4px}.stat-card.help{background:var(--ol);border-color:#ff96004d}.stat-card.help .stat-num,.stat-card.help .stat-label{color:var(--o)}.create-btn{margin:20px;padding:16px;width:calc(100% - 40px);background:var(--g);color:#000;font-size:16px;font-weight:700;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;gap:8px}.create-btn.classroom{background:transparent;color:var(--g);border:1.5px solid rgba(82,227,0,.5);font-weight:600}.section-header{display:flex;justify-content:space-between;align-items:center;padding:8px 20px 12px}.section-title{font-size:16px;font-weight:700}.section-count{font-size:14px;color:var(--t3)}.room-list-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;transition:background .15s}.room-list-item:hover{background:var(--bg2)}.room-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.room-icon.default{background:var(--bl)}.room-icon.help{background:var(--ol)}.room-icon.sheet{background:var(--pl)}.room-icon.follow{background:var(--gl)}.room-info{flex:1;min-width:0}.room-name{font-size:15px;font-weight:600;color:var(--t1)}.room-meta{font-size:12px;color:var(--t3);margin-top:2px}.room-arrow{color:var(--t3);font-size:18px}.room-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.help-badge-pulse{display:inline-block;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;animation:helpPulse 2s ease-in-out infinite}.mock-badge{display:inline-block;background:var(--bg3);color:var(--t3);font-size:10px;font-weight:600;padding:1px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;border:1px solid var(--border)}.room-list-item.is-mock{opacity:.6}.room-list-item.is-mock:active{opacity:.75}@keyframes helpPulse{0%,to{opacity:1}50%{opacity:.5}}.help-tag{font-size:18px;line-height:1}.help-room-item{background:#ef44440f;border-left:3px solid var(--red)}.pf-header{display:flex;align-items:center;gap:16px;padding:20px}.pf-avatar{width:56px;height:56px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#000;flex-shrink:0}.pf-header-info{flex:1}.pf-name{font-size:28px;font-weight:700;line-height:1.2}.pf-level-badge{display:inline-block;background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:4px 10px;font-size:12px;color:var(--t2);margin-top:6px}.pf-level-badge span{color:var(--g);font-weight:600}.pf-total-time{display:inline-block;font-size:13px;color:var(--t2);margin-top:8px}.pf-divider{height:1px;background:var(--border);margin:0 20px}.pf-badge-count{color:var(--t3);font-size:12px;font-weight:400;margin-left:4px}.pf-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}.pf-badge{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;text-align:center}.pf-badge.locked{opacity:.45}.pf-badge.got{border-color:var(--g);background:var(--gl)}.pf-badge-icon{font-size:24px;line-height:1}.pf-badge-name{font-size:11px;font-weight:600;color:var(--t1)}.pf-badge-desc{font-size:9px;color:var(--t3);line-height:1.2}.pf-rec-list{margin-top:8px;display:flex;flex-direction:column}.pf-rec-empty{font-size:13px;color:var(--t3);padding:10px 0}.pf-rec-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border)}.pf-rec-item:first-child{border-top:none}.pf-rec-icon{font-size:18px;flex-shrink:0}.pf-rec-info{flex:1;min-width:0}.pf-rec-name{font-size:14px;color:var(--t1)}.pf-rec-meta{font-size:11px;color:var(--t3)}.pf-rec-btn{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:transparent;cursor:pointer;flex-shrink:0;font-size:15px;color:var(--t2)}.pf-rec-btn:active{background:var(--border)}.pf-rec-btn.del{color:var(--t3)}.pf-section{padding:16px 20px}.pf-section-icon{display:inline-block;font-size:18px;margin-bottom:6px}.pf-section-label{font-size:13px;color:var(--t3);margin-bottom:4px}.pf-section-value{font-size:22px;font-weight:700}.pf-section-value.highlight{color:var(--o)}.pf-progress-track{height:8px;background:var(--bg3);border-radius:4px;margin-top:10px;overflow:hidden;border:1px solid var(--border)}.pf-progress-fill{height:100%;background:var(--g);border-radius:4px;transition:width .5s ease}.pf-guidance{font-size:12px;color:var(--t3);margin-top:8px}.pf-guidance-link{color:var(--b);text-decoration:none;font-weight:500}.pf-guidance-link:hover{text-decoration:underline}.pf-interact-inline{display:flex;gap:16px;font-size:14px}.pf-interact-item{font-weight:500;color:var(--t1)}.pf-interact-item span{font-weight:700;margin:0 2px}.pf-tags{display:flex;flex-wrap:wrap;gap:8px}.pf-tag{background:var(--bg3);border:1px solid var(--border);border-radius:var(--pill);padding:6px 14px;font-size:13px;color:var(--t2);font-weight:500}.pf-ai-msg{display:flex;align-items:flex-start;gap:10px;background:var(--bg2);border-radius:12px;padding:12px 16px;border:1px solid var(--border)}.pf-ai-icon{font-size:20px;flex-shrink:0}.pf-ai-text{font-size:14px;color:var(--t2);line-height:1.5}.profile-header{display:flex;align-items:center;gap:14px;padding:20px}.profile-avatar{width:64px;height:64px;border-radius:18px;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#000;flex-shrink:0}.profile-name{font-size:20px;font-weight:700}.profile-goal{font-size:13px;color:var(--t3);margin-top:2px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:200;display:flex;align-items:center;justify-content:center}.modal-overlay.hidden{display:none}.modal-content{background:var(--bg2);border-radius:20px;padding:32px 24px;width:300px;text-align:center}.modal-icon{font-size:48px;margin-bottom:12px}.modal-title-text{font-size:20px;font-weight:700;margin-bottom:8px}.modal-sub-text{font-size:14px;color:var(--t2);margin-bottom:20px}.modal-input{width:100%;padding:12px 16px;font-size:16px;border:2px solid var(--border);border-radius:14px;background:var(--bg3);color:var(--t1);outline:none;text-align:center}.modal-btn{width:100%;padding:14px;border-radius:var(--pill);background:var(--g);color:#000;font-size:15px;font-weight:700;border:none;cursor:pointer;margin-top:16px}.divider{height:1px;background:var(--border);margin:0 20px}.toast{position:fixed;top:60px;left:50%;transform:translate(-50%);background:var(--card);color:var(--t1);padding:12px 20px;border-radius:var(--pill);font-size:14px;z-index:300;box-shadow:0 4px 20px #0000004d;transition:opacity .3s;pointer-events:none}.toast.hidden{opacity:0}.wizard-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:300;display:flex;align-items:center;justify-content:center}.wizard-overlay.hidden{display:none}.wizard-card{background:var(--bg2);border-radius:20px;padding:32px 24px;width:320px;max-width:90vw;position:relative}.wizard-close{position:absolute;top:16px;right:16px;font-size:22px;color:var(--t3);cursor:pointer;background:none;border:none;line-height:1}.wizard-close:active{color:var(--t1)}.wizard-step{display:none;text-align:center}.wizard-step.active{display:block}.wizard-icon{font-size:48px;margin-bottom:12px}.wizard-title{font-size:20px;font-weight:700;margin-bottom:6px}.wizard-desc{font-size:14px;color:var(--t2);margin-bottom:20px;line-height:1.5}.wizard-input{width:100%;padding:14px 16px;font-size:16px;border:2px solid var(--border);border-radius:14px;background:var(--bg3);color:var(--t1);outline:none;text-align:center;box-sizing:border-box}.wizard-input:focus{border-color:var(--g)}.wizard-input::placeholder{color:var(--t3)}.wizard-choices{display:flex;gap:12px;margin-bottom:8px}.wizard-choice{flex:1;padding:16px 12px;border-radius:14px;border:2px solid var(--border);background:var(--bg3);cursor:pointer;transition:border-color .2s,background .2s;text-align:center}.wizard-choice:hover{border-color:var(--t3)}.wizard-choice.selected{border-color:var(--g);background:var(--gl)}.wizard-choice-icon{font-size:28px;margin-bottom:6px}.wizard-choice-label{font-size:14px;font-weight:600}.wizard-choice-hint{font-size:11px;color:var(--t3);margin-top:2px}.wizard-btn{width:100%;padding:14px;border-radius:var(--pill);background:var(--g);color:#000;font-size:15px;font-weight:700;border:none;cursor:pointer;margin-top:20px}.wizard-btn:disabled{opacity:.4;cursor:not-allowed}.wizard-btn.secondary{background:var(--bg3);color:var(--t1);border:1px solid var(--border)}.wizard-dots{display:flex;gap:8px;justify-content:center;margin-top:20px}.wizard-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s,width .2s}.wizard-dot.active{background:var(--g);width:24px;border-radius:4px}.midi-device-list{text-align:left;margin-bottom:12px}.midi-device-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);margin-bottom:8px;cursor:pointer;transition:border-color .2s}.midi-device-item:hover{border-color:var(--t3)}.midi-device-item.selected{border-color:var(--g);background:var(--gl)}.midi-device-icon{font-size:22px}.midi-device-name{flex:1;font-size:14px;font-weight:500}.midi-device-status{font-size:11px;padding:3px 10px;border-radius:100px}.midi-device-status.connected{background:var(--gl);color:var(--g)}.midi-device-status.disconnected{background:var(--bg2);color:var(--t3)}.midi-scan-btn{width:100%;padding:12px;border-radius:12px;background:var(--bg3);color:var(--t1);border:1px dashed var(--border);font-size:14px;cursor:pointer;margin-bottom:16px}.midi-scan-btn:hover{border-color:var(--t3)}.midi-skip{font-size:13px;color:var(--t3);cursor:pointer;margin-top:12px;display:block}.midi-skip:hover{color:var(--t1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.role-choices{display:flex;gap:12px;margin-top:16px;margin-bottom:8px}.role-choice{flex:1;padding:16px 12px;border-radius:14px;border:2px solid var(--border);background:var(--bg3);cursor:pointer;transition:border-color .2s,background .2s;text-align:center}.role-choice:hover{border-color:var(--t3)}.role-choice.selected{border-color:var(--g);background:var(--gl)}.role-choice-icon{font-size:28px;margin-bottom:6px}.role-choice-label{font-size:14px;font-weight:600}.role-choice-hint{font-size:11px;color:var(--t3);margin-top:2px}.wizard-password-wrap{margin-top:12px}.wizard-password-wrap.hidden{display:none}.modal-btn-secondary{width:100%;padding:12px;border-radius:var(--pill);background:var(--bg3);color:var(--t2);font-size:14px;font-weight:600;border:1px solid var(--border);cursor:pointer;margin-top:8px}.modal-btn-secondary:hover{color:var(--t1)}.filter-tags{display:flex;gap:8px;padding:0 20px 12px;flex-wrap:wrap}.filter-tag{padding:5px 14px;border-radius:var(--pill);font-size:12px;font-weight:600;background:var(--bg2);color:var(--t3);border:1px solid var(--border);cursor:pointer;transition:all .2s}.filter-tag.active{background:var(--gl);color:var(--g);border-color:var(--g)}.practice-badge{display:inline-flex;align-items:center;gap:3px;background:var(--gl);color:var(--g);font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--pill);margin-left:6px}.hidden{display:none!important}