.device-select{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.95rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.nav-settings{background:transparent;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s}.nav-settings:hover{color:#fff;background:#ffffff1a}@media (max-width: 768px){.nav-links{display:none}.top-nav{padding:16px 20px}}.floating-mini-player{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(99,102,241,.3);border-radius:16px;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff0d inset;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.floating-mini-player:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000080,0 0 0 1px #6366f166 inset;border-color:#6366f180}.mini-player-status{display:flex;align-items:center}.status-indicator{font-size:12px;font-weight:600;padding:4px 8px;border-radius:8px;white-space:nowrap}.status-indicator.live{color:#4ade80;background:#4ade8026;animation:pulse-live 2s infinite}.status-indicator.connecting{color:#facc15;background:#facc1526}.status-indicator.idle{color:#9ca3af;background:#9ca3af26}@keyframes pulse-live{0%,to{opacity:1}50%{opacity:.7}}.mini-player-info{display:flex;flex-direction:column;gap:4px}.performers-preview{display:flex;align-items:center;gap:4px}.performer-icon{font-size:18px;transition:transform .2s}.performer-icon:hover{transform:scale(1.2)}.more-performers{font-size:11px;color:#9ca3af;padding:2px 6px;background:#9ca3af33;border-radius:10px}.room-stats{display:flex;gap:8px;font-size:11px;color:#9ca3af}.stat-item{display:flex;align-items:center;gap:2px}.mini-player-controls{display:flex;align-items:center;gap:6px;margin-left:8px;padding-left:12px;border-left:1px solid rgba(255,255,255,.1)}.floating-mini-player .control-btn{width:32px!important;height:32px!important;min-width:unset!important;padding:0!important;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:#ffffff1a;color:#fff;font-size:14px;cursor:pointer;transition:all .2s}.floating-mini-player .control-btn:hover{background:#fff3;transform:scale(1.1)}.floating-mini-player .control-btn.mic{background:#4ade8033;position:relative}.floating-mini-player .control-btn.mic:hover{background:#4ade8066}.floating-mini-player .control-btn.mic.muted{background:#ef444433}.floating-mini-player .control-btn.mic.muted:hover{background:#ef444466}.floating-mini-player .control-btn.mic.muted:after{content:"";position:absolute;top:50%;left:50%;width:45%;height:.5px;background:#ef4444;transform:translate(-50%,-50%) rotate(45deg);border-radius:1px}.floating-mini-player .control-btn.mute{background:#4ade8033}.floating-mini-player .control-btn.mute:hover{background:#4ade8066}.floating-mini-player .control-btn.mute.muted{background:#ef444433}.floating-mini-player .control-btn.mute.muted:hover{background:#ef444466}.floating-mini-player .control-btn.exit{background:#ef444433}.floating-mini-player .control-btn.exit:hover{background:#ef444466}.mini-player-hint{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:10px;color:#6b7280;opacity:0;transition:opacity .2s;white-space:nowrap}.floating-mini-player:hover .mini-player-hint{opacity:1}@media (max-width: 480px){.floating-mini-player{bottom:16px;right:16px;left:16px;padding:10px 14px;border-radius:12px}.mini-player-info{flex:1}.status-indicator{font-size:11px;padding:3px 6px}.performer-icon{font-size:16px}.floating-mini-player .control-btn{width:28px!important;height:28px!important;font-size:12px}}.live-body{display:grid;grid-template-columns:280px 1fr 280px;gap:1px;flex:1;background:var(--border);overflow:visible}.change-instrument-btn{margin-top:4px;padding:2px 8px;font-size:.7rem;background:#6366f133;border:1px solid rgba(99,102,241,.4);border-radius:10px;color:var(--primary);cursor:pointer;transition:all .2s}.change-instrument-btn:hover{background:#6366f14d;border-color:var(--primary)}.my-instrument-change-status{margin-top:4px;padding:2px 8px;font-size:.7rem;border-radius:8px;display:flex;align-items:center;gap:6px}.my-instrument-change-status.pending{background:#facc1526;color:#facc15}.my-instrument-change-status.approved{background:#4ade8026;color:#4ade80}.my-instrument-change-status.rejected{background:#f8717126;color:#f87171}.my-instrument-change-status .cancel-btn.small{padding:1px 6px;font-size:.65rem;background:#f8717133;border:1px solid rgba(248,113,113,.4);border-radius:6px;color:#f87171;cursor:pointer}.my-instrument-change-status .cancel-btn.small:hover{background:#f8717166}.instrument-change-request{margin-top:4px;padding:4px 8px;background:#facc1526;border:1px solid rgba(250,204,21,.3);border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}.change-request-text{font-size:.7rem;color:#facc15}.change-request-actions{display:flex;gap:4px}.change-request-actions .approve-btn.small,.change-request-actions .reject-btn.small{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.change-request-actions .approve-btn.small{background:#4ade8033;color:#4ade80}.change-request-actions .approve-btn.small:hover{background:#4ade8066}.change-request-actions .reject-btn.small{background:#f8717133;color:#f87171}.change-request-actions .reject-btn.small:hover{background:#f8717166}.instrument-option.current{border-color:var(--primary);background:#6366f11a}.inst-slots.current{background:var(--primary);color:#fff}.performer-item-wrapper{position:relative}.instrument-change-bubble{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);z-index:9999;animation:bubble-pop .3s ease-out}.instrument-change-bubble.fixed{position:fixed;left:auto;top:auto;transform:translateY(-50%);z-index:50;pointer-events:auto}@keyframes bubble-pop{0%{opacity:0;transform:translateY(-50%) scale(.8)}to{opacity:1;transform:translateY(-50%) scale(1)}}.bubble-arrow{position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid rgba(141,123,255,.6)}.bubble-arrow:after{content:"";position:absolute;left:2px;top:-6px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid rgba(18,22,45,.95)}.bubble-content{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#12162df2;border:1px solid rgba(141,123,255,.6);border-radius:8px;box-shadow:0 2px 8px #0000004d;white-space:nowrap;color:#fff}.bubble-text{font-size:.75rem;font-weight:500;color:#fff}.bubble-actions{display:flex;gap:4px}.bubble-btn{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.bubble-btn.approve{background:#4ade80;color:#1a1a2e}.bubble-btn.approve:hover{background:#22c55e;transform:scale(1.15)}.bubble-btn.reject{background:#f87171;color:#1a1a2e}.bubble-btn.reject:hover{background:#ef4444;transform:scale(1.15)}.modal-body{padding:20px;overflow-y:auto;max-height:calc(80vh - 60px)}.room-info-modal .modal-body,.pending-requests-modal .modal-body,.room-settings-modal .modal-body{flex:1!important;overflow-y:auto!important;max-height:none!important}@media (max-width: 1024px){.entrance-content,.session-content{grid-template-columns:1fr}.session-sidebar{order:-1}}@media (max-width: 768px){.entrance-title{font-size:2.5rem}.entrance-stats{grid-template-columns:1fr}}.profile-page{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:2rem}.profile-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:2rem}.profile-sidebar{background:#ffffff0d;border-radius:16px;padding:2rem;height:fit-content;position:sticky;top:2rem}.profile-sidebar h2{margin:0 0 1.5rem;font-size:1.5rem;color:#fff}.profile-nav{display:flex;flex-direction:column;gap:.5rem}.profile-nav-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background:transparent;border:none;border-radius:12px;color:#ffffffb3;font-size:1rem;cursor:pointer;transition:all .3s ease;text-align:left;position:relative}.profile-nav-item:hover{background:#ffffff1a;color:#fff}.profile-nav-item.active{background:linear-gradient(135deg,#8d7bff,#a89fff);color:#fff}.nav-icon{font-size:1.25rem}.coming-soon{margin-left:auto;font-size:.75rem;padding:.25rem .5rem;background:#fff3;border-radius:6px}.profile-main{background:#ffffff0d;border-radius:16px;padding:2rem;min-height:600px}.profile-info-section{color:#fff}.profile-header{display:flex;align-items:center;gap:2rem;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.profile-photo-wrapper{position:relative;cursor:pointer}.profile-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#8d7bff,#a89fff);display:flex;align-items:center;justify-content:center}.profile-photo img{width:100%;height:100%;object-fit:cover}.default-avatar{font-size:3rem}.photo-edit-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;background:#0009;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.edit-icon{font-size:2rem}.profile-header-info h1{margin:0 0 .5rem;font-size:2rem}.profile-email{margin:0;color:#fff9;font-size:1rem}.profile-details{display:flex;flex-direction:column;gap:2rem}.detail-section{display:flex;flex-direction:column;gap:1.5rem}.detail-section h3{margin:0 0 1rem;font-size:1.25rem;color:#fff;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}.detail-item{display:flex;flex-direction:column;gap:.5rem}.detail-item label{font-size:.9rem;color:#fffc;display:flex;align-items:center;gap:.5rem}.sns-icon{font-size:1.1rem}.detail-item input,.detail-item textarea{padding:.75rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;transition:all .3s ease}.detail-item input:focus,.detail-item textarea:focus{outline:none;border-color:#8d7bff;background:#ffffff26}.detail-item input:disabled,.detail-item textarea:disabled{opacity:.6;cursor:not-allowed}.detail-item textarea{resize:vertical;font-family:inherit}.char-count{align-self:flex-end;color:#ffffff80;font-size:.85rem}.detail-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.btn-primary,.btn-secondary{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#8d7bff,#a89fff);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #8d7bff66}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover:not(:disabled){background:#fff3}.coming-soon-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:#fff;text-align:center}.coming-soon-icon{font-size:4rem;margin-bottom:1rem}.coming-soon-section h2{margin:0 0 .5rem;font-size:2rem}.coming-soon-section p{margin:0;color:#fff9;font-size:1.1rem}.profile-icon-link{display:flex;align-items:center;margin-right:1rem}.nav-profile-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3);transition:all .3s ease}.nav-profile-photo:hover{border-color:#8d7bff;transform:scale(1.05)}.nav-profile-default{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#8d7bff,#a89fff);display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:2px solid rgba(255,255,255,.3);transition:all .3s ease}.nav-profile-default:hover{border-color:#8d7bff;transform:scale(1.05)}.plan-section{color:#fff}.plan-section h2{margin:0 0 2rem;font-size:1.75rem}.current-plan-card{background:#ffffff14;border-radius:16px;padding:2rem;margin-bottom:2rem}.plan-status{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.plan-label{color:#fff9;font-size:.9rem}.plan-badge{padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}.plan-badge.free{background:linear-gradient(135deg,#6b7280,#9ca3af)}.plan-badge.standard{background:linear-gradient(135deg,#8d7bff,#a89fff)}.plan-badge.pro{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#1a1a2e}.plan-details{margin-bottom:1.5rem}.plan-description{margin:0 0 1rem;color:#fffc;font-size:1rem}.plan-features-list{margin:0;padding-left:1.5rem;color:#ffffffb3}.plan-features-list li{margin-bottom:.5rem}.plan-actions{display:flex;gap:1rem}.subscription-info{background:#ffffff0d;border-radius:16px;padding:2rem;border:1px solid rgba(255,255,255,.1)}.subscription-info h3{margin:0 0 1.5rem;font-size:1.25rem;color:#fff}.info-row{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.info-row:last-of-type{border-bottom:none;margin-bottom:1.5rem}.info-label{color:#fff9}.info-value{color:#fff;font-weight:500}@media (max-width: 1024px){.profile-container{grid-template-columns:1fr}.profile-sidebar{position:static}.profile-nav{flex-direction:row;overflow-x:auto}.profile-nav-item{white-space:nowrap}}@media (max-width: 768px){.profile-page{padding:1rem}.profile-header{flex-direction:column;text-align:center}.profile-photo{width:100px;height:100px}.detail-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}.karaoke-container{padding:2rem;max-width:1400px;margin:0 auto;min-height:calc(100vh - 60px)}.karaoke-header{text-align:center;margin-bottom:3rem}.karaoke-header h1{font-size:2.5rem;color:#fff;margin-bottom:.5rem}.karaoke-subtitle{color:#888;font-size:1.1rem}.karaoke-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid rgba(255,255,255,.1)}.tab-button{padding:1rem 2rem;background:transparent;border:none;border-bottom:3px solid transparent;color:#888;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;bottom:-2px}.tab-button:hover{color:#fff;background:#ffffff0d}.tab-button.active{color:#00d4ff;border-bottom-color:#00d4ff;background:#00d4ff0d}.karaoke-tab-content{width:100%}.karaoke-content{display:grid;grid-template-columns:1fr 2fr;gap:2rem}.upload-section{background:#ffffff0d;padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.upload-section h2{color:#fff;margin-bottom:1.5rem;font-size:1.5rem}.upload-area{margin-bottom:1.5rem}.file-input{display:none}.file-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;border:2px dashed rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;background:#ffffff05}.file-label:hover{border-color:#00d4ff;background:#00d4ff0d}.upload-icon{font-size:3rem;margin-bottom:1rem}.file-label p{color:#fff;font-size:1.1rem;margin-bottom:.5rem}.file-types{color:#888;font-size:.9rem}.status-message{padding:1rem;border-radius:8px;margin-bottom:1rem;text-align:center}.status-message.processing{background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);display:flex;align-items:center;justify-content:center;gap:.5rem}.status-message.success{background:#00ff881a;border:1px solid rgba(0,255,136,.3);color:#0f8}.status-message.error{background:#ff44441a;border:1px solid rgba(255,68,68,.3);color:#f44}.upload-button{width:100%;padding:1rem;background:linear-gradient(135deg,#00d4ff,#09f);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.upload-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff66}.upload-button:disabled{opacity:.5;cursor:not-allowed}.file-upload-component{width:100%}.selected-file-info{text-align:center}.file-name{color:#fff;font-weight:600;margin-bottom:.5rem;word-break:break-all}.file-size{color:#888;font-size:.9rem}.upload-actions{display:flex;gap:.5rem}.clear-button{flex:1;padding:1rem;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.clear-button:hover{background:#ffffff26}.current-file-info{margin-top:1.5rem;padding:1rem;background:#00d4ff0d;border:1px solid rgba(0,212,255,.2);border-radius:8px}.info-label{color:#888;font-size:.9rem;margin-bottom:.25rem}.info-value{color:#00d4ff;font-weight:600;word-break:break-all}.score-display{background:#ffffffe6;border-radius:8px;padding:3rem;margin-bottom:2rem;min-height:400px;display:flex;align-items:center;justify-content:center}.placeholder-text{color:#666;font-size:1.1rem;text-align:center}.player-controls{display:flex;flex-direction:column;gap:1.5rem}.instrument-selector{display:flex;align-items:center;gap:1rem}.instrument-selector label{color:#fff;font-weight:600}.instrument-select{flex:1;padding:.75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:1rem;cursor:pointer}.instrument-select option{background:#1a1a1a}.playback-controls{display:flex;gap:1rem;justify-content:center}.control-btn{padding:.75rem 1.5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin:1rem 0}.tempo-control{display:flex;flex-direction:column;gap:.5rem}.tempo-control label{color:#fff;font-weight:600;display:flex;justify-content:space-between}.tempo-slider{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;-webkit-appearance:none}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#00d4ff;border-radius:50%;cursor:pointer}.tempo-slider::-moz-range-thumb{width:18px;height:18px;background:#00d4ff;border-radius:50%;cursor:pointer;border:none}@media (max-width: 1024px){.karaoke-content{grid-template-columns:1fr}}@media (max-width: 768px){.karaoke-container{padding:1rem}.karaoke-header h1{font-size:2rem}.playback-controls{flex-wrap:wrap}.control-btn{flex:1;min-width:120px}}.music-room-container{display:flex;flex-direction:column;gap:2rem;padding:1rem}.music-room-upload{background:#ffffff0d;padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.music-room-upload h2{color:#fff;margin-bottom:1.5rem;font-size:1.5rem}.upload-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.file-input-hidden{display:none}.file-select-btn{flex:1;min-width:200px;padding:1rem;background:#ffffff1a;border:2px dashed rgba(255,255,255,.3);border-radius:8px;color:#fff;text-align:center;cursor:pointer;transition:all .3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-select-btn:hover{border-color:#00d4ff;background:#00d4ff0d}.upload-btn{padding:1rem 2rem;background:linear-gradient(135deg,#00d4ff,#09f);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.upload-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff66}.upload-btn:disabled{opacity:.5;cursor:not-allowed}.upload-status{margin-top:1rem;padding:1rem;border-radius:8px;display:flex;align-items:center;gap:.5rem}.upload-status.processing{background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);color:#00d4ff}.upload-status.success{background:#00ff881a;border:1px solid rgba(0,255,136,.3);color:#0f8}.spinner{width:20px;height:20px;border:2px solid rgba(0,212,255,.3);border-top-color:#00d4ff;border-radius:50%;animation:spin 1s linear infinite}.stems-section{background:#ffffff0d;padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.stems-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;gap:1rem}.stems-section h2{color:#fff;font-size:1.5rem;margin:0}.download-all-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#00d4ff,#09f);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.download-all-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff66}.stems-hint{color:#888;margin-bottom:1.5rem;font-size:.95rem}.stems-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stem-item{display:flex;gap:.5rem;align-items:stretch}.stem-button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.2);border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative;flex:1}.download-stem-btn{padding:.5rem;background:#00d4ff1a;border:1px solid rgba(0,212,255,.3);border-radius:8px;color:#00d4ff;font-size:1.5rem;cursor:pointer;transition:all .3s ease;width:50px;display:flex;align-items:center;justify-content:center}.download-stem-btn:hover{background:#00d4ff33;transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff4d}.download-icon:before{content:"↓";font-size:1.5rem}.stem-button:hover{transform:translateY(-4px);box-shadow:0 6px 20px #0000004d}.stem-button.active{background:linear-gradient(135deg,#00d4ff33,#09f3);border-color:#00d4ff}.stem-button.muted{background:#ff44441a;border-color:#ff44444d;opacity:.6}.stem-icon{font-size:2.5rem}.stem-label{color:#fff;font-weight:600;font-size:1rem;text-align:center}.stem-status{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:700;text-transform:uppercase}.stem-button.active .stem-status{background:#00d4ff;color:#000}.stem-button.muted .stem-status{background:#f44;color:#fff}.player-section{background:#ffffff0d;padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.player-section h2{color:#fff;margin-bottom:1.5rem;font-size:1.5rem}.playback-controls{display:flex;gap:1rem;margin-bottom:2rem;justify-content:center;flex-wrap:wrap}.control-btn{padding:1rem 2rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:140px}.control-btn:hover:not(:disabled){background:#fff3;transform:translateY(-2px)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.play:not(:disabled){background:linear-gradient(135deg,#00d4ff,#09f)}.progress-section{margin-bottom:2rem}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-bar.clickable{cursor:pointer;transition:height .2s ease}.progress-bar.clickable:hover,.progress-bar.clickable.dragging{height:12px;background:#ffffff26}.progress-bar.clickable.dragging{cursor:grabbing}.progress-fill{height:100%;background:linear-gradient(90deg,#00d4ff,#09f);border-radius:4px;transition:width .1s linear}.progress-bar.dragging .progress-fill{transition:none}.time-display{display:flex;justify-content:space-between;color:#888;font-size:.9rem}.control-group{margin-bottom:1.5rem}.control-group label{display:flex;justify-content:space-between;color:#fff;font-weight:600;margin-bottom:.5rem}.control-slider{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;-webkit-appearance:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#00d4ff;border-radius:50%;cursor:pointer}.control-slider::-moz-range-thumb{width:18px;height:18px;background:#00d4ff;border-radius:50%;cursor:pointer;border:none}.control-slider:disabled{opacity:.3;cursor:not-allowed}.control-note{color:#888;font-size:.85rem;margin-top:.5rem;font-style:italic}@media (max-width: 768px){.music-room-container{padding:.5rem}.music-room-upload,.stems-section,.player-section{padding:1.5rem}.upload-controls{flex-direction:column}.file-select-btn,.upload-btn{width:100%}.stems-header{flex-direction:column;align-items:stretch}.download-all-btn{width:100%}.stems-buttons{grid-template-columns:1fr}.playback-controls{flex-direction:column}.control-btn{width:100%}}:root{--bg-app: #02040c;--bg-panel: rgba(10, 13, 30, .85);--bg-panel-strong: rgba(18, 22, 45, .95);--border: rgba(255, 255, 255, .08);--text-muted: rgba(244, 247, 255, .65);--accent: #8d7bff;--accent-strong: #ff7ab8;--success: #4ade80;--warning: #facc15;--error: #f87171}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(95,77,255,.18),transparent 60%),radial-gradient(circle at 80% 0%,rgba(255,118,175,.25),transparent 55%),var(--bg-app);color:#f5f7ff;display:flex;flex-direction:column}.app-content{flex:1}.top-nav{max-width:1400px;width:100%;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0d1e99;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.brand a{display:flex;flex-direction:column;text-decoration:none;color:inherit}.brand span{font-weight:700;font-size:1.25rem;background:linear-gradient(135deg,var(--accent),var(--accent-strong));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.brand small{color:var(--text-muted);font-size:.75rem;font-weight:500}.nav-links{display:flex;gap:28px;align-items:center}.nav-links a{color:#fffc;text-decoration:none;font-weight:500;font-size:.95rem;transition:color .2s;position:relative}.nav-links a:hover{color:#fff}.nav-links a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width .3s}.nav-links a:hover:after{width:100%}.nav-actions{display:flex;align-items:center;gap:16px}.user-menu{display:flex;align-items:center;gap:12px}.user-email{font-size:.9rem;color:var(--text-muted)}.nav-cta{padding:8px 20px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;border-radius:20px;color:#fff;font-weight:600;cursor:pointer;text-decoration:none;font-size:.9rem;transition:transform .2s,box-shadow .2s}.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px #8d7bff66}.home-page{max-width:1400px;margin:0 auto;padding:0 32px 80px}.hero{text-align:center;padding:80px 20px 60px;max-width:900px;margin:0 auto}.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:700;margin-bottom:16px}.hero h1{font-size:3.5rem;font-weight:800;line-height:1.2;margin-bottom:24px;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lead{font-size:1.15rem;line-height:1.7;color:var(--text-muted);margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto}.hero-actions{display:flex;gap:16px;justify-content:center;margin-bottom:60px}.primary-cta,.ghost-cta{padding:14px 32px;font-size:1rem;font-weight:600;border-radius:28px;text-decoration:none;cursor:pointer;transition:all .2s;border:none}.primary-cta{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff}.primary-cta:hover{transform:translateY(-2px);box-shadow:0 12px 24px #8d7bff66}.ghost-cta{background:transparent;border:2px solid var(--border);color:#fff}.ghost-cta:hover{border-color:var(--accent);background:#8d7bff1a}.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px;max-width:700px;margin:0 auto}.hero-stats>div{display:flex;flex-direction:column;gap:4px}.hero-stats strong{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-strong));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-stats span{font-size:.85rem;color:var(--text-muted)}.panel{margin:60px 0}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.feature-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:32px;transition:all .3s}.feature-card:hover{background:var(--bg-panel-strong);border-color:var(--accent);transform:translateY(-4px)}.pill{display:inline-block;padding:4px 12px;background:#8d7bff33;border:1px solid var(--accent);border-radius:12px;font-size:.75rem;font-weight:600;color:var(--accent);margin-bottom:16px}.feature-card h3{font-size:1.4rem;margin-bottom:12px}.feature-card p{color:var(--text-muted);line-height:1.6;margin-bottom:12px}.feature-card small{color:#ffffff80;font-size:.85rem}.roadmap-section{padding:40px 0}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.section-head h2{font-size:2rem;font-weight:700}.roadmap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.roadmap-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:32px}.roadmap-card h3{font-size:1.5rem;margin-bottom:12px;color:var(--accent)}.roadmap-card p{color:var(--text-muted);margin-bottom:20px;line-height:1.6}.roadmap-card ul{list-style:none;display:flex;flex-direction:column;gap:8px}.roadmap-card li{padding-left:20px;position:relative;color:#fffc;font-size:.95rem}.roadmap-card li:before{content:"→";position:absolute;left:0;color:var(--accent)}.auth-page{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:60px 20px}.auth-container{max-width:900px;width:100%}.auth-header{text-align:center;margin-bottom:40px}.auth-header h1{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-strong));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.auth-header p{color:var(--text-muted);font-size:1.1rem}.auth-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:20px;padding:40px;margin-bottom:32px}.auth-tabs{display:flex;gap:8px;margin-bottom:32px;background:#0000004d;padding:4px;border-radius:12px}.auth-tabs button{flex:1;padding:12px;background:transparent;border:none;color:var(--text-muted);font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s}.auth-tabs button.active{background:var(--accent);color:#fff}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;font-size:.9rem}.form-group input{padding:14px 16px;background:#0000004d;border:1px solid var(--border);border-radius:10px;color:#fff;font-size:1rem;transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--accent)}.form-group input:disabled{opacity:.5;cursor:not-allowed}.form-group select{padding:14px 16px;background:#0000004d;border:1px solid var(--border);border-radius:10px;color:#fff;font-size:1rem;transition:border-color .2s;cursor:pointer}.form-group select:focus{outline:none;border-color:var(--accent)}.form-group select:disabled{opacity:.5;cursor:not-allowed}.form-group select option{background:var(--dark-bg);color:#fff}.form-group input[type=date]{color-scheme:dark}.form-group input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}.auth-submit{padding:14px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;border-radius:12px;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s}.auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #8d7bff66}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-alert{padding:12px 16px;border-radius:10px;font-size:.9rem}.auth-alert.success{background:#4ade801a;border:1px solid var(--success);color:var(--success)}.auth-alert.error{background:#f871711a;border:1px solid var(--error);color:var(--error)}.auth-alert.info{background:#8d7bff1a;border:1px solid var(--accent);color:var(--accent)}.auth-info{text-align:center;color:var(--text-muted);font-size:.9rem}.auth-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.feature-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px}.feature-item h3{font-size:1.2rem;margin-bottom:8px}.feature-item p{color:var(--text-muted);font-size:.9rem;line-height:1.6}.rooms-page{max-width:1400px;margin:0 auto;padding:60px 32px}.rooms-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.rooms-header h1{font-size:2.5rem;font-weight:800}.rooms-header p{color:var(--text-muted);font-size:1.1rem}.create-room-btn{padding:12px 24px;background:linear-gradient(135deg,var(--success),#22c55e);border:none;border-radius:24px;color:#fff;font-weight:700;cursor:pointer;font-size:1rem;transition:all .2s}.create-room-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #4ade8066}.room-filters{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap}.filter-chip{padding:8px 20px;background:#ffffff0d;border:1px solid var(--border);border-radius:20px;color:var(--text-muted);font-weight:600;cursor:pointer;transition:all .2s;font-size:.9rem}.filter-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.filter-chip:hover{border-color:var(--accent)}.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:24px;margin-bottom:40px}.room-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;gap:16px}.room-card:hover{background:var(--bg-panel-strong);border-color:var(--accent);transform:translateY(-4px);box-shadow:0 12px 30px #0000004d}.room-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.room-info h3{font-size:1.3rem;margin-bottom:4px}.room-genre{font-size:.85rem;color:var(--accent);font-weight:600}.status-badge{padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:700;white-space:nowrap}.status-badge.open{background:#4ade8033;color:var(--success)}.status-badge.recording{background:#facc1533;color:var(--warning)}.status-badge.locked{background:#f8717133;color:var(--error)}.room-vibe{color:var(--text-muted);line-height:1.5;font-size:.95rem}.room-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.stat-value{font-weight:700;font-size:1rem}.room-card-footer{padding-top:8px;border-top:1px solid var(--border)}.room-enter-btn{width:100%;padding:10px;background:transparent;border:1px solid var(--accent);border-radius:10px;color:var(--accent);font-weight:700;cursor:pointer;transition:all .2s}.room-enter-btn:hover{background:var(--accent);color:#fff}.room-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.room-card-tag{padding:3px 10px;background:#ffffff0d;border-radius:12px;font-size:.75rem;color:var(--text-muted)}.room-card-tag.more{background:#8d7bff1a;color:var(--accent)}.room-card-tag.more.clickable{cursor:pointer;transition:all .2s ease;position:relative}.room-card-tag.more.clickable:hover{background:#8d7bff40}.tags-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;min-width:150px;max-width:250px;box-shadow:0 4px 16px #0000004d;z-index:100}.tags-popup:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--border)}.popup-tag{padding:4px 8px;background:#ffffff14;border-radius:6px;font-size:.75rem;color:var(--text-secondary);white-space:nowrap}.room-card-tag.empty{font-style:italic;opacity:.5}.room-card-instruments{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.room-card-inst{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#ffffff0d;border-radius:8px;font-size:1rem}.room-card:hover .room-card-inst{background:#ffffff14}.inst-slot-count{font-size:.8rem;color:var(--text-muted)}.stat-value.free{color:var(--success)}.stat-value.approval{color:var(--warning)}.login-prompt{text-align:center;padding:32px;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px}.login-prompt a{color:var(--accent);text-decoration:none;font-weight:700}.login-prompt a:hover{text-decoration:underline}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:1.1rem}.room-entrance{min-height:calc(100vh - 100px);position:relative;display:flex;align-items:center;justify-content:center;padding:40px 20px}.entrance-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(141,123,255,.15),transparent 70%),radial-gradient(circle at 80% 20%,rgba(255,122,184,.2),transparent 50%);z-index:0}.entrance-content{position:relative;z-index:1;max-width:1200px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.entrance-info{display:flex;flex-direction:column;gap:24px}.breadcrumb a{color:var(--text-muted);text-decoration:none;font-size:.9rem;transition:color .2s}.breadcrumb a:hover{color:#fff}.entrance-title{font-size:4rem;font-weight:900;line-height:1.1;background:linear-gradient(135deg,#fff,var(--accent-strong));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.entrance-genre{font-size:1.2rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:2px}.entrance-vibe{font-size:1.25rem;color:var(--text-muted);line-height:1.6}.entrance-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:20px}.entrance-stat{display:flex;gap:16px;align-items:center;padding:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px}.stat-icon{font-size:2.5rem}.stat-value{font-size:1.8rem;font-weight:800;color:#fff}.stat-label{font-size:.9rem;color:var(--text-muted)}.entrance-instruments{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px}.entrance-instruments h3{font-size:1.2rem;margin-bottom:16px}.instrument-list{display:flex;flex-wrap:wrap;gap:10px}.instrument-tag{padding:8px 16px;background:#8d7bff33;border:1px solid var(--accent);border-radius:20px;font-size:.9rem;font-weight:600;color:var(--accent)}.entrance-actions{display:flex;flex-direction:column;gap:24px}.entrance-card{background:var(--bg-panel-strong);border:2px solid var(--accent);border-radius:20px;padding:32px;box-shadow:0 20px 40px #8d7bff33}.entrance-card h2{font-size:1.8rem;margin-bottom:24px;text-align:center}.join-btn{width:100%;padding:20px;background:var(--bg-panel);border:2px solid var(--border);border-radius:16px;cursor:pointer;transition:all .3s;margin-bottom:16px;position:relative}.join-btn:hover:not(:disabled){border-color:var(--accent);background:var(--bg-panel-strong);transform:translate(4px)}.join-btn:disabled{opacity:.5;cursor:not-allowed}.join-btn.participant{border-color:var(--success)}.join-btn.participant:hover:not(:disabled){border-color:var(--success);background:#4ade801a}.join-btn-content{display:flex;gap:16px;align-items:center;color:#fff;text-align:left}.join-icon{font-size:2.5rem}.join-text strong{display:block;font-size:1.2rem;margin-bottom:4px}.join-text small{color:var(--text-muted);font-size:.9rem}.join-badge{position:absolute;top:16px;right:16px;padding:4px 12px;background:var(--warning);color:#000;border-radius:12px;font-size:.75rem;font-weight:700}.entrance-error,.entrance-loading{padding:16px;border-radius:12px;text-align:center;font-weight:600}.entrance-error{background:#f871711a;border:1px solid var(--error);color:var(--error)}.entrance-loading{background:#8d7bff1a;border:1px solid var(--accent);color:var(--accent)}.entrance-schedule{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px}.entrance-schedule h3{font-size:1.2rem;margin-bottom:16px}.schedule-item{display:flex;gap:16px;padding:16px;border-left:3px solid var(--accent);margin-bottom:12px;background:#0003;border-radius:8px}.schedule-time{font-weight:700;color:var(--accent);font-size:1rem;min-width:60px}.schedule-content strong{display:block;margin-bottom:4px;font-size:1rem}.schedule-content small{color:var(--text-muted);font-size:.85rem}.room-session{max-width:1600px;margin:0 auto;padding:40px 32px}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--border)}.session-info{display:flex;align-items:center;gap:16px}.session-info h1{font-size:2rem;font-weight:800}.session-status{padding:6px 16px;border-radius:16px;font-size:.85rem;font-weight:700}.session-status.live{background:#4ade8033;color:var(--success);animation:pulse 2s infinite}.leave-btn{padding:10px 24px;background:#f8717133;border:1px solid var(--error);border-radius:20px;color:var(--error);font-weight:700;cursor:pointer;transition:all .2s}.leave-btn:hover{background:var(--error);color:#fff}.session-content{display:grid;grid-template-columns:1fr 350px;gap:32px}.session-main{display:flex;flex-direction:column;gap:24px}.audio-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.section-header h2{font-size:1.4rem;font-weight:700}.connection-info{font-size:.85rem;color:var(--text-muted);font-family:monospace}.participant-count{padding:4px 12px;background:#4ade8033;border-radius:12px;color:var(--success);font-size:.85rem;font-weight:700}.viewer-notice{text-align:center;padding:40px 20px;background:#8d7bff1a;border:1px dashed var(--accent);border-radius:12px}.viewer-notice p{font-size:1.2rem;font-weight:700;margin-bottom:8px}.viewer-notice small{color:var(--text-muted)}.local-controls{display:flex;flex-direction:column;gap:16px}.audio-controls{display:flex;gap:16px;align-items:center}.audio-controls button{padding:12px 24px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;border-radius:20px;color:#fff;font-weight:700;cursor:pointer;transition:all .2s}.audio-controls button.active{background:var(--error)}.audio-controls button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #8d7bff66}.audio-controls audio{flex:1;height:40px}.error-message{padding:12px;background:#f871711a;border:1px solid var(--error);border-radius:10px;color:var(--error);font-size:.9rem}.mic-hint{padding:12px;background:#8d7bff1a;border:1px solid var(--accent);border-radius:10px;color:var(--accent);font-size:.9rem;text-align:center}.participants-grid{display:grid;gap:16px}.empty-participants{text-align:center;padding:40px 20px}.empty-participants p{font-size:1.1rem;margin-bottom:8px;color:var(--text-muted)}.empty-participants small{color:#fff6}.participant-card{display:flex;align-items:center;gap:16px;padding:16px;background:#0000004d;border:1px solid var(--border);border-radius:12px}.participant-avatar{width:50px;height:50px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.participant-info{flex:1}.participant-info strong{display:block;margin-bottom:2px}.participant-info small{color:var(--text-muted);font-size:.85rem}.participant-card audio{width:200px}.session-sidebar{display:flex;flex-direction:column;gap:20px}.room-details-card,.feedback-card,.peers-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px}.room-details-card h3,.feedback-card h3,.peers-card h3{font-size:1.2rem;margin-bottom:16px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.detail-item:last-child{border-bottom:none}.detail-item span{color:var(--text-muted);font-size:.9rem}.detail-item strong{font-size:1rem;font-weight:700}.feedback-card p{color:var(--text-muted);font-size:.95rem;line-height:1.5}.empty-peers{color:var(--text-muted);font-size:.9rem;text-align:center;padding:12px}.peers-list{display:flex;flex-direction:column;gap:8px}.peer-item{display:flex;align-items:center;gap:10px;padding:10px;background:#0003;border-radius:8px;font-size:.9rem;font-family:monospace}.peer-dot{width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 2s infinite}.recording-page{max-width:1400px;margin:0 auto;padding:60px 32px}.recording-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.recording-header h1{font-size:2.5rem;font-weight:800}.recording-header p{color:var(--text-muted);font-size:1.1rem}.recording-status-badge{padding:8px 16px;background:#8d7bff33;border:1px solid var(--accent);border-radius:16px;font-size:.9rem;font-weight:700;color:var(--accent)}.recording-content{display:grid;grid-template-columns:1fr 400px;gap:32px}.recording-main{display:flex;flex-direction:column;gap:24px}.recording-controls-card,.recording-tips-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px}.recording-meta{margin-bottom:20px}.status-pill{display:inline-block;padding:6px 16px;border-radius:16px;font-size:.85rem;font-weight:700;margin-bottom:8px}.status-pill.idle{background:#ffffff1a;color:var(--text-muted)}.status-pill.recording{background:#f8717133;color:var(--error);animation:pulse 1.5s infinite}.status-pill.preview{background:#4ade8033;color:var(--success)}.recording-meta p{color:var(--text-muted);font-size:.95rem}.recording-actions{display:flex;gap:12px;margin-bottom:20px}.rec-btn{flex:1;padding:14px;border:1px solid var(--border);border-radius:12px;font-weight:700;cursor:pointer;transition:all .2s;background:var(--bg-panel);color:#fff}.rec-btn:hover:not(:disabled){border-color:var(--accent);background:var(--bg-panel-strong)}.rec-btn:disabled{opacity:.5;cursor:not-allowed}.rec-btn.start:not(:disabled){background:linear-gradient(135deg,var(--success),#22c55e);border:none}.rec-btn.stop:not(:disabled){background:linear-gradient(135deg,var(--error),#dc2626);border:none}.error-text{padding:12px;background:#f871711a;border:1px solid var(--error);border-radius:10px;color:var(--error);font-size:.9rem}.level-meter{position:relative;height:40px;background:#0000004d;border-radius:20px;overflow:hidden;display:flex;align-items:center;padding:0 16px;margin-bottom:20px}.level-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--success),var(--warning),var(--error));transition:width .1s;border-radius:20px}.level-value{position:relative;z-index:1;font-weight:700;font-size:.9rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.waveform{display:flex;align-items:center;justify-content:space-between;height:80px;gap:2px;margin-bottom:20px;padding:8px;background:#0000004d;border-radius:12px}.wave-bar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-strong));border-radius:2px;transition:height .1s}.preview-card{padding:20px;background:#8d7bff1a;border:1px solid var(--accent);border-radius:12px}.preview-card h3{margin-bottom:16px;font-size:1.2rem}.preview-card audio{width:100%;margin-bottom:16px}.download-btn{display:block;width:100%;padding:12px;background:var(--accent);color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:700;transition:all .2s}.download-btn:hover{background:var(--accent-strong);transform:translateY(-2px)}.recording-tips-card h3{margin-bottom:16px;font-size:1.2rem}.recording-tips-card ul{list-style:none;display:flex;flex-direction:column;gap:12px}.recording-tips-card li{padding-left:24px;position:relative;color:var(--text-muted);line-height:1.5}.recording-tips-card li:before{content:"💡";position:absolute;left:0}.recording-sidebar{display:flex;flex-direction:column}.take-board{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px;max-height:800px;overflow-y:auto}.take-board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.take-board-head h3{font-size:1.3rem}.take-count{padding:4px 12px;background:#8d7bff33;border-radius:12px;font-size:.85rem;font-weight:700;color:var(--accent)}.empty-takes{text-align:center;padding:40px 20px;color:var(--text-muted)}.take-card{background:#0000004d;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}.take-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.take-card-head strong{font-size:1.1rem}.take-card-head small{color:var(--text-muted);font-size:.8rem}.take-card audio{width:100%;margin-bottom:12px}.take-download{display:block;width:100%;padding:8px;background:transparent;border:1px solid var(--accent);color:var(--accent);text-align:center;text-decoration:none;border-radius:8px;font-weight:600;font-size:.85rem;transition:all .2s}.take-download:hover{background:var(--accent);color:#fff}.mixlab-page{max-width:1400px;margin:0 auto;padding:60px 32px}.mixlab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.mixlab-header h1{font-size:2.5rem;font-weight:800}.mixlab-header p{color:var(--text-muted);font-size:1.1rem}.mix-insight{display:flex;flex-direction:column;gap:4px;text-align:right}.insight-score{font-size:1.2rem;font-weight:700;color:var(--accent)}.insight-details{font-size:.85rem;color:var(--text-muted)}.mix-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:32px}.preset-btn{padding:20px;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s;text-align:left}.preset-btn:hover{border-color:var(--accent);background:var(--bg-panel-strong)}.preset-btn.active{border-color:var(--accent);background:#8d7bff1a}.preset-btn strong{display:block;font-size:1.1rem;margin-bottom:4px;color:#fff}.preset-btn span{font-size:.9rem;color:var(--text-muted)}.mixlab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.mix-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px}.mix-card-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.mix-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}.mix-track-info{flex:1}.track-name{font-size:1.1rem;font-weight:700;margin-bottom:2px}.track-role{font-size:.85rem;color:var(--text-muted)}.mix-value{font-weight:700;font-size:1rem;color:var(--accent)}.mix-control{margin-bottom:20px}.mix-control:last-child{margin-bottom:0}.mix-control label{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px;color:var(--text-muted)}.slider-display{display:flex;align-items:center;gap:12px}.slider-display input[type=range]{flex:1;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none}.slider-display input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;transition:all .2s}.slider-display input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-strong);transform:scale(1.2)}.slider-display input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;transition:all .2s}.slider-display input[type=range]::-moz-range-thumb:hover{background:var(--accent-strong);transform:scale(1.2)}.slider-display span{min-width:50px;text-align:right;font-weight:700;font-size:.9rem;color:#fff}.community-page{max-width:1400px;margin:0 auto;padding:60px 32px}.community-header{margin-bottom:40px}.community-header h1{font-size:2.5rem;font-weight:800;margin-bottom:8px}.community-header p{color:var(--text-muted);font-size:1.1rem}.community-layout{display:grid;grid-template-columns:1fr 400px;gap:32px}.community-main{display:flex;flex-direction:column;gap:24px}.community-form-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px}.community-form-card h3{font-size:1.3rem;margin-bottom:16px}.community-form-card textarea{width:100%;padding:14px 16px;background:#0000004d;border:1px solid var(--border);border-radius:12px;color:#fff;font-size:1rem;font-family:inherit;resize:vertical;margin-bottom:12px;transition:border-color .2s}.community-form-card textarea:focus{outline:none;border-color:var(--accent)}.form-row{display:flex;gap:12px}.form-row select{flex:1;padding:12px 16px;background:#0000004d;border:1px solid var(--border);border-radius:12px;color:#fff;font-size:.95rem;cursor:pointer}.form-row select:focus{outline:none;border-color:var(--accent)}.form-row button{padding:12px 32px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;transition:all .2s}.form-row button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #8d7bff66}.form-row button:disabled{opacity:.5;cursor:not-allowed}.login-required{text-align:center;padding:32px;background:#8d7bff1a;border:1px dashed var(--accent);border-radius:12px;color:var(--text-muted)}.community-feed{display:flex;flex-direction:column;gap:16px}.post-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .2s}.post-card:hover{background:var(--bg-panel-strong);border-color:var(--accent)}.post-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.post-author{display:flex;flex-direction:column;gap:2px}.post-author strong{font-size:1.05rem}.post-author span{font-size:.85rem;color:var(--text-muted)}.post-tag{padding:4px 12px;background:#8d7bff33;border:1px solid var(--accent);border-radius:12px;font-size:.75rem;font-weight:700;color:var(--accent)}.post-message{color:#ffffffe6;line-height:1.6;margin-bottom:12px}.post-footer{font-size:.85rem;color:var(--text-muted)}.community-sidebar{display:flex;flex-direction:column;gap:24px}.tag-cloud-card,.upcoming-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:24px}.tag-cloud-card h3,.upcoming-card h3{font-size:1.2rem;margin-bottom:16px}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}.tag-pill{padding:8px 16px;background:#8d7bff33;border:1px solid var(--accent);border-radius:16px;font-size:.9rem;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:6px}.tag-pill small{color:var(--text-muted);font-size:.8rem}.upcoming-list{list-style:none;display:flex;flex-direction:column;gap:16px}.upcoming-item{padding:16px;background:#0000004d;border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:6px}.upcoming-item strong{font-size:1.05rem}.session-time{color:var(--accent);font-size:.9rem;font-weight:600}.session-details{color:var(--text-muted);font-size:.85rem}.app-footer{max-width:1400px;margin:0 auto;padding:40px 32px;text-align:center;color:var(--text-muted);border-top:1px solid var(--border);font-size:.9rem}@media (max-width: 1024px){.entrance-content,.session-content,.recording-content,.community-layout{grid-template-columns:1fr}.session-sidebar,.recording-sidebar,.community-sidebar{order:-1}}@media (max-width: 768px){.hero h1,.entrance-title{font-size:2.5rem}.rooms-grid{grid-template-columns:1fr}.nav-links{display:none}.top-nav{padding:16px 20px}}.create-room-page{min-height:calc(100vh - 100px);padding:60px 20px;display:flex;justify-content:center}.create-room-container{max-width:700px;width:100%}.create-room-header{text-align:center;margin-bottom:40px}.create-room-header h1{font-size:2.5rem;margin-bottom:12px;background:linear-gradient(135deg,#fff,var(--accent-strong));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.create-room-header p{color:var(--text-muted);font-size:1.1rem}.create-room-form{background:#ffffff08;border:1px solid var(--border);border-radius:20px;padding:40px}.create-room-form .form-group{margin-bottom:24px}.create-room-form .form-group label{display:block;font-weight:600;margin-bottom:8px;color:#fff}.create-room-form .form-group input,.create-room-form .form-group select,.create-room-form .form-group textarea{width:100%;padding:14px 16px;background:#0000004d;border:1px solid var(--border);border-radius:10px;color:#fff;font-size:1rem;transition:border-color .2s;font-family:inherit}.create-room-form .form-group textarea{resize:vertical;min-height:100px}.create-room-form .form-group input:focus,.create-room-form .form-group select:focus,.create-room-form .form-group textarea:focus{outline:none;border-color:var(--accent)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tags-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.tag-btn{padding:8px 16px;background:#ffffff0d;border:1px solid var(--border);border-radius:20px;color:var(--text-muted);font-size:.9rem;cursor:pointer;transition:all .2s}.tag-btn:hover{background:#ffffff14;border-color:var(--accent)}.tag-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.custom-tag-input{display:flex;gap:8px;margin-bottom:12px}.custom-tag-input input{flex:1}.custom-tag-input button{padding:12px 20px;background:#ffffff1a;border:1px solid var(--border);border-radius:8px;color:#fff;cursor:pointer;transition:all .2s}.custom-tag-input button:hover{background:#ffffff26}.selected-tags{display:flex;flex-wrap:wrap;gap:8px}.selected-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-radius:16px;color:#fff;font-size:.85rem}.selected-tag button{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.selected-tag button:hover{background:#0003}.form-hint{font-size:.85rem;color:var(--text-muted);margin-bottom:16px}.instrument-slots{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.instrument-slot{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff08;border:1px solid var(--border);border-radius:12px;transition:all .2s}.instrument-slot:hover{border-color:var(--accent)}.slot-icon{font-size:1.5rem;width:40px;text-align:center}.slot-name{flex:1;font-size:.95rem;font-weight:500}.slot-count-control{display:flex;align-items:center;gap:8px}.slot-count-control button{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:#ffffff0d;color:#fff;font-size:1.2rem;cursor:pointer;transition:all .2s}.slot-count-control button:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.slot-count-control button:disabled{opacity:.3;cursor:not-allowed}.slot-count{width:32px;text-align:center;font-size:1.1rem;font-weight:600}.slot-remove{width:28px;height:28px;border:none;border-radius:6px;background:#f871711a;color:var(--error);font-size:1.2rem;cursor:pointer;transition:all .2s}.slot-remove:hover{background:#f8717133}.add-instrument select{width:100%;padding:12px 16px;background:var(--bg-input);border:1px dashed var(--border);border-radius:12px;color:var(--text-muted);font-size:.9rem;cursor:pointer;transition:all .2s}.add-instrument select:hover{border-color:var(--accent);color:#fff}.add-instrument select option{background:var(--bg-panel);color:#fff}.toggle-option{display:flex;align-items:flex-start;gap:16px;padding:16px;background:#ffffff08;border-radius:12px;border:1px solid var(--border)}.toggle-switch{position:relative;width:52px;height:28px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:#ffffff1a;border-radius:28px;transition:.3s}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}.toggle-switch input:checked+.toggle-slider{background:var(--accent)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-label{display:flex;flex-direction:column;gap:4px}.toggle-label strong{font-size:.95rem}.toggle-label span{font-size:.85rem;color:var(--text-muted)}.form-error{padding:12px 16px;background:#f871711a;border:1px solid var(--error);border-radius:10px;color:var(--error);font-size:.9rem;margin-bottom:16px}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:32px}.btn-primary,.btn-secondary{padding:14px 32px;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #8d7bff66}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#ffffff0d;border:1px solid var(--border);color:#fff}.btn-secondary:hover:not(:disabled){background:#ffffff1a}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.create-room-form{padding:24px}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.btn-primary,.btn-secondary{width:100%}}.audio-settings{width:100%;max-width:600px;margin:0 auto}.audio-settings.modal{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.audio-settings-content{background:var(--bg-panel-strong);border:1px solid var(--border);border-radius:16px;padding:32px;position:relative;z-index:1;max-height:90vh;overflow-y:auto}.audio-settings.modal .audio-settings-content{width:100%;max-width:600px;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.settings-header h2{font-size:1.5rem;font-weight:600;color:#fff}.close-btn{width:36px;height:36px;border-radius:50%;background:#ffffff1a;border:none;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.close-btn:hover{background:#fff3}.settings-section{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}.settings-section:last-of-type{border-bottom:none}.settings-section h3{font-size:1rem;font-weight:600;color:var(--accent);margin-bottom:16px}.settings-hint{font-size:.85rem;color:var(--text-muted);margin-bottom:12px}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.preset-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#ffffff0d;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s}.preset-btn:hover{background:#ffffff1a}.preset-btn.active{background:#8d7bff26;border-color:var(--accent)}.preset-icon{font-size:1.5rem}.preset-label{font-size:.85rem;color:#fff;font-weight:500}.device-select{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.95rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.device-select:focus{outline:none;border-color:var(--accent)}.device-select option{background:#1a1d2e;color:#fff;padding:8px}.refresh-btn{margin-top:12px;padding:8px 16px;background:#ffffff1a;border:none;border-radius:6px;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .2s}.refresh-btn:hover{background:#ffffff26;color:#fff}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.settings-row label{font-size:.95rem;color:var(--text-muted)}.settings-row select{padding:8px 12px;background:#ffffff0d;border:1px solid var(--border);border-radius:6px;color:#fff;font-size:.9rem;cursor:pointer}.settings-row select:focus{outline:none;border-color:var(--accent)}.settings-row select option{background:#1a1d2e;color:#fff;padding:8px}.settings-toggle{margin-bottom:12px}.settings-toggle label{display:flex;align-items:center;gap:12px;cursor:pointer}.settings-toggle input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}.settings-toggle span{font-size:.95rem;color:#fff}.test-section{display:flex;align-items:center;gap:16px}.test-btn{padding:12px 24px;background:#8d7bff33;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.test-btn:hover{background:#8d7bff4d}.test-btn.testing{background:var(--accent);color:#fff}.level-meter{flex:1;display:flex;align-items:center;gap:12px}.level-bar{flex:1;height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden}.level-fill{height:100%;background:linear-gradient(90deg,var(--success),var(--warning),var(--error));border-radius:6px;transition:width .1s ease}.level-value{font-size:.85rem;color:var(--text-muted);min-width:40px;text-align:right}.test-hint{margin-top:12px;font-size:.85rem;color:var(--text-muted)}.settings-footer{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}.auto-save-notice{font-size:.85rem;color:var(--success)}.permission-request,.permission-denied{text-align:center;padding:40px 24px}.permission-icon{font-size:3rem;margin-bottom:16px}.permission-request h3,.permission-denied h3{font-size:1.25rem;color:#fff;margin-bottom:12px}.permission-request p,.permission-denied p{color:var(--text-muted);margin-bottom:24px}.permission-hint{font-size:.85rem;color:var(--warning);padding:12px;background:#facc151a;border-radius:8px}.audio-settings-page{max-width:1200px;margin:0 auto;padding:32px}.audio-settings-page h1{font-size:2rem;margin-bottom:24px}.nav-settings{font-size:1.25rem;padding:8px;text-decoration:none;opacity:.8;transition:opacity .2s;background:none;border:none;cursor:pointer;color:inherit}.nav-settings:hover{opacity:1}.session-actions{display:flex;align-items:center;gap:12px}.settings-btn{padding:10px 16px;background:#ffffff1a;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.settings-btn:hover{background:#ffffff26;border-color:var(--accent)}.current-device-info{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff0d;border-radius:8px;margin-bottom:16px}.device-label{font-size:.85rem;color:var(--text-muted)}.device-name{flex:1;font-size:.9rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.change-device-btn{padding:6px 12px;background:#8d7bff33;border:none;border-radius:6px;color:var(--accent);font-size:.8rem;cursor:pointer;transition:all .2s}.change-device-btn:hover{background:#8d7bff4d}.actual-settings-section{background:#8d7bff14;border:1px solid rgba(141,123,255,.2);border-radius:12px;padding:20px}.actual-settings-grid{display:flex;flex-direction:column;gap:12px}.setting-comparison{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#ffffff0d;border-radius:8px;transition:all .2s}.setting-comparison.mismatch{background:#facc151a;border:1px solid rgba(250,204,21,.3)}.setting-label{font-size:.9rem;color:var(--text-muted);min-width:120px}.setting-values{display:flex;align-items:center;gap:8px}.setting-value{font-size:.9rem;padding:4px 10px;border-radius:4px}.setting-value.requested{background:#ffffff1a;color:var(--text-muted)}.setting-value.actual{background:#8d7bff33;color:var(--accent);font-weight:500}.setting-arrow{color:var(--text-muted);font-size:.85rem}.setting-status{font-size:1rem;margin-left:4px}.actual-stream-info{margin-top:16px;padding:16px;background:#8d7bff14;border:1px solid rgba(141,123,255,.2);border-radius:10px}.actual-stream-info h4{font-size:.85rem;color:var(--text-muted);margin-bottom:12px;font-weight:500}.stream-settings-grid{display:flex;flex-wrap:wrap;gap:16px}.stream-setting{display:flex;align-items:center;gap:8px}.setting-name{font-size:.8rem;color:var(--text-muted)}.setting-val{font-size:.85rem;color:var(--accent);font-weight:500;display:flex;align-items:center;gap:4px}.setting-val.mismatch{color:var(--warning)}.setting-warning{cursor:help}.entrance-tags{margin-top:24px}.entrance-tags h3{font-size:.9rem;color:var(--text-muted);margin-bottom:12px}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.tag-item{padding:6px 12px;background:#8d7bff26;border-radius:20px;font-size:.85rem;color:var(--accent)}.loading-state{display:flex;align-items:center;justify-content:center;min-height:400px;font-size:1.1rem;color:var(--text-muted)}@media (max-width: 768px){.preset-grid{grid-template-columns:repeat(2,1fr)}.test-section{flex-direction:column;align-items:stretch}.level-meter{order:-1}.settings-row{flex-direction:column;align-items:flex-start;gap:8px}.settings-row select{width:100%}.settings-footer{flex-direction:column;gap:16px;text-align:center}.session-actions{flex-direction:column}}.live-room{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-app)}.live-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--bg-panel-strong);border-bottom:1px solid var(--border)}.live-header-left{display:flex;align-items:center;gap:16px}.back-link{font-size:1.5rem;color:var(--text-muted);text-decoration:none;padding:8px;transition:color .2s}.back-link:hover{color:#fff}.live-title-area h1{font-size:1.25rem;margin-bottom:4px}.live-meta{display:flex;align-items:center;gap:12px}.live-badge{padding:4px 10px;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase}.live-badge.live{background:var(--error);color:#fff;animation:pulse 2s infinite}.live-badge.connecting{background:var(--warning);color:#000}.live-badge.idle{background:#fff3;color:var(--text-muted)}.live-badge.error{background:#f871714d;color:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.genre-badge{padding:4px 10px;background:#8d7bff33;border-radius:12px;font-size:.75rem;color:var(--accent)}.viewer-count{font-size:.85rem;color:var(--text-muted)}.host-info{font-size:.85rem;color:var(--accent);font-weight:500}.live-header-right{display:flex;gap:12px}.header-btn{padding:10px 20px;background:#ffffff1a;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s}.header-btn:hover{background:#ffffff26}.header-btn.leave{background:#f8717133;border-color:#f8717166;color:var(--error)}.header-btn.leave:hover{background:#f871714d}.live-body{display:grid;grid-template-columns:280px 1fr 280px;gap:1px;flex:1;background:var(--border)}.performers-panel{background:var(--bg-panel);display:flex;flex-direction:column;height:calc(100vh - 73px)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.panel-header h2{font-size:1rem;font-weight:600}.performer-count{background:var(--accent);color:#fff;padding:2px 8px;border-radius:10px;font-size:.75rem;font-weight:600}.performers-list{flex:1;overflow-y:auto;padding:12px}.performer-item{display:flex;align-items:center;gap:12px;padding:12px;background:#ffffff08;border-radius:12px;margin-bottom:8px;transition:all .2s}.performer-item.me{background:#8d7bff1a;border:1px solid rgba(141,123,255,.3)}.performer-item.active{background:#4ade801a;border:1px solid rgba(74,222,128,.3)}.performer-item.muted{opacity:.6}.performer-avatar{position:relative}.host-crown{position:absolute;top:-8px;left:50%;transform:translate(-50%);font-size:.8rem}.avatar-circle{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-strong));display:flex;align-items:center;justify-content:center;font-size:1.2rem}.live-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;background:var(--success);border-radius:50%;border:2px solid var(--bg-panel);animation:pulse 2s infinite}.performer-info{flex:1;min-width:0}.performer-name{display:block;font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.performer-status{font-size:.75rem;color:var(--text-muted)}.performer-item.active .performer-status{color:var(--success)}.performer-latency{display:flex;align-items:center;gap:4px;font-size:.7rem;padding:2px 6px;background:#0000004d;border-radius:10px;margin-left:auto}.performer-latency .latency-value{font-family:Monaco,Consolas,monospace;font-weight:500}.performer-latency .quality-indicator{font-size:.8rem}.mic-toggle{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;font-size:1rem;transition:all .2s}.mic-toggle.on{background:var(--success);color:#fff}.mic-toggle.off{background:#ffffff1a;color:var(--text-muted)}.mic-toggle:hover{transform:scale(1.1)}.performer-item audio{display:none}.no-performers{text-align:center;padding:40px 20px;color:var(--text-muted)}.no-performers p{margin-bottom:8px}.no-performers small{font-size:.8rem;opacity:.7}.participation-toggle{padding:16px;border-top:1px solid var(--border)}.toggle-btn{width:100%;padding:14px;border-radius:10px;border:none;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.toggle-btn.performer{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff}.toggle-btn.performer:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #8d7bff66}.toggle-btn.performer:disabled{opacity:.6;cursor:not-allowed}.toggle-btn.viewer{background:#ffffff1a;color:var(--text-muted);border:1px solid var(--border)}.toggle-btn.viewer:hover{background:#ffffff26;color:#fff}.approval-notice{margin-top:12px;font-size:.8rem;color:var(--warning);text-align:center}.request-status{text-align:center;padding:16px;border-radius:10px;background:#ffffff0d}.request-status p{font-weight:600;margin-bottom:8px}.request-status small{color:var(--text-muted);display:block;margin-bottom:12px}.request-status.pending{border:1px solid var(--warning)}.request-status.approved{border:1px solid var(--success)}.request-status.approved p{color:var(--success)}.request-status.rejected{border:1px solid var(--error)}.request-status.rejected p{color:var(--error)}.cancel-request-btn{background:transparent;border:1px solid var(--text-muted);color:var(--text-muted);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.cancel-request-btn:hover{background:#ffffff1a;color:#fff}.pending-requests-alert{margin-top:12px;padding:12px 16px;background:linear-gradient(135deg,#facc1533,#ff7ab833);border:1px solid var(--warning);border-radius:10px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s}.pending-requests-alert:hover{background:linear-gradient(135deg,#facc154d,#ff7ab84d);transform:translateY(-2px)}.pending-requests-alert .alert-badge{background:var(--warning);color:#000;font-weight:700;font-size:.85rem;padding:4px 10px;border-radius:20px}.pending-requests-alert span:last-child{font-weight:500}.pending-requests-modal .modal-content{max-width:450px}.pending-requests-modal .no-requests{text-align:center;color:var(--text-muted);padding:24px}.requests-list{display:flex;flex-direction:column;gap:12px}.request-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#ffffff0d;border-radius:10px;border:1px solid var(--border)}.request-info{display:flex;align-items:center;gap:12px}.request-icon{font-size:1.5rem}.request-details{display:flex;flex-direction:column;gap:2px}.request-nickname{font-weight:600}.request-instrument{font-size:.85rem;color:var(--text-muted)}.request-actions{display:flex;gap:8px}.approve-btn,.reject-btn{padding:8px 14px;border-radius:6px;border:none;font-weight:600;cursor:pointer;transition:all .2s}.approve-btn{background:var(--success);color:#000}.approve-btn:hover{background:#22c55e;transform:translateY(-1px)}.reject-btn{background:#f8717133;color:var(--error);border:1px solid var(--error)}.reject-btn:hover{background:#f871714d}.main-stage{background:var(--bg-app);display:flex;flex-direction:column;height:calc(100vh - 73px)}.stage-content{flex:1;display:flex;align-items:center;justify-content:center}.stage-visualizer,.stage-empty{text-align:center;padding:40px}.stage-visualizer{position:relative}.visualizer-bg{position:absolute;top:-100px;right:-100px;bottom:-100px;left:-100px;background:radial-gradient(circle,rgba(141,123,255,.2) 0%,transparent 70%);animation:breathe 4s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.now-playing{position:relative;z-index:1}.music-icon{font-size:4rem;display:block;margin-bottom:16px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.now-playing p{font-size:1.5rem;font-weight:600;margin-bottom:8px}.now-playing small,.stage-empty{color:var(--text-muted)}.empty-icon{font-size:4rem;display:block;margin-bottom:16px;opacity:.5}.stage-empty p{font-size:1.25rem;margin-bottom:8px}.my-audio-status{padding:16px 24px;background:var(--bg-panel);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:24px}.status-item{display:flex;align-items:center;gap:8px}.status-label{font-size:.8rem;color:var(--text-muted)}.status-value{font-size:.85rem;color:var(--accent);font-weight:500}.change-btn{padding:4px 10px;background:#8d7bff33;border:none;border-radius:4px;color:var(--accent);font-size:.75rem;cursor:pointer;transition:all .2s}.change-btn:hover{background:#8d7bff4d}.error-notice{width:100%;padding:10px;background:#f871711a;border-radius:6px;color:var(--error);font-size:.85rem}.viewer-guide{padding:16px 24px;background:#ffffff08;border-top:1px solid var(--border);text-align:center}.viewer-guide p{font-size:.95rem;margin-bottom:4px}.viewer-guide small{color:var(--text-muted);font-size:.8rem}.info-panel{background:var(--bg-panel);height:calc(100vh - 73px);overflow-y:auto;padding:16px}.info-card{background:#ffffff08;border-radius:12px;padding:16px;margin-bottom:16px}.info-card h3{font-size:.9rem;margin-bottom:16px;color:var(--text-muted)}.info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}.info-row:last-of-type{border-bottom:none}.info-row span{color:var(--text-muted);font-size:.85rem}.info-row strong{font-size:.85rem}.room-description{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-muted);line-height:1.5}.tags-list{display:flex;flex-wrap:wrap;gap:8px}.tags-list .tag{padding:4px 10px;background:#8d7bff26;border-radius:12px;font-size:.8rem;color:var(--accent)}.info-title-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}.info-title-section h3{font-size:1.2rem;font-weight:600;margin-bottom:8px;color:var(--text)}.info-title-section .room-description{margin-top:8px;padding-top:0;border-top:none}.info-section{margin-bottom:16px}.info-section h4{font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.info-tags-list{display:flex;flex-wrap:wrap;gap:8px}.info-tag{padding:5px 12px;background:#8d7bff26;border-radius:16px;font-size:.8rem;color:var(--accent)}.info-instrument-list{display:flex;flex-wrap:wrap;gap:8px}.info-instrument-item{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#ffffff0d;border-radius:10px;border:1px solid var(--border)}.info-inst-icon{font-size:1.1rem}.info-inst-name{font-size:.85rem;color:var(--text)}.info-inst-slots{font-size:.75rem;padding:2px 8px;background:#4ade8033;color:#4ade80;border-radius:10px;font-weight:500}.info-inst-slots.full{background:#f8717133;color:#f87171}.recording-section{margin-top:16px;padding:12px;background:#ffffff08;border-radius:12px;border:1px solid var(--border)}.recording-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.recording-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#ffffff1a;border:none;border-radius:8px;color:var(--text);font-size:.9rem;cursor:pointer;transition:all .2s}.recording-btn:hover{background:#ffffff26}.recording-btn.recording{background:#ef444433;color:#ef4444;animation:recording-pulse 1.5s infinite}@keyframes recording-pulse{0%,to{opacity:1}50%{opacity:.7}}.recording-time{font-size:.9rem;font-weight:600;color:#ef4444;font-family:monospace}.recordings-list-btn{padding:8px 14px;background:#8d7bff26;border:none;border-radius:8px;color:var(--accent);font-size:.85rem;cursor:pointer;transition:all .2s}.recordings-list-btn:hover{background:#8d7bff40}.recordings-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center}.recordings-modal>.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3}.recordings-modal .modal-content{position:relative;background:var(--bg-panel);border-radius:16px;width:90%;max-width:550px;max-height:85vh;overflow-y:auto}.no-recordings{text-align:center;padding:32px 16px;color:var(--text-muted)}.no-recordings p{font-size:1rem;margin-bottom:8px}.no-recordings small{font-size:.85rem;opacity:.7}.recordings-list{display:flex;flex-direction:column;gap:12px}.recording-item{padding:12px;background:#ffffff08;border-radius:10px;border:1px solid var(--border)}.recording-info{display:flex;align-items:center;gap:12px;margin-bottom:10px}.recording-time{font-size:.9rem;color:var(--text)}.recording-duration{font-size:.85rem;color:var(--text-muted);font-family:monospace;padding:2px 8px;background:#ffffff1a;border-radius:4px}.recording-format{font-size:.75rem;color:var(--accent);padding:2px 6px;background:#8d7bff26;border-radius:4px;text-transform:uppercase}.recording-controls{margin-bottom:10px}.recording-audio{width:100%;height:36px;border-radius:6px}.recording-audio::-webkit-media-controls-panel{background:#ffffff1a}.recording-actions{display:flex;gap:8px;justify-content:flex-end}.recording-actions button{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s}.download-btn{background:#4ade8033;color:#4ade80}.download-btn:hover{background:#4ade804d}.delete-btn{background:#f8717133;color:#f87171}.delete-btn:hover{background:#f871714d}.users-list{display:flex;flex-direction:column;gap:8px}.user-item{display:flex;align-items:center;gap:10px;padding:8px;background:#ffffff05;border-radius:8px}.user-item.me{background:#8d7bff1a}.user-dot{width:8px;height:8px;border-radius:50%}.user-dot.online{background:var(--success)}.user-item span{font-size:.85rem}.role-badge{margin-left:auto;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:600}.role-badge.performer{background:#4ade8033;color:var(--success)}.role-badge.host{background:#facc1533;color:var(--warning)}.feedback-notice{padding:12px;background:#8d7bff1a;border-radius:8px;font-size:.85rem;color:var(--accent)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px;color:var(--text-muted)}.error-state button{padding:10px 24px;background:var(--accent);border:none;border-radius:8px;color:#fff;cursor:pointer}.connecting-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.mixer-panel{background:var(--bg-app);display:flex;flex-direction:column;height:calc(100vh - 73px)}.mixer-hint{font-size:.75rem;color:var(--text-muted)}.mixer-content{flex:1;overflow-y:auto;padding:16px}.mixer-master{background:#8d7bff1a;border:1px solid rgba(141,123,255,.3);border-radius:12px;padding:16px;margin-bottom:20px}.mixer-master label{display:block;font-size:.85rem;font-weight:600}.master-control-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.master-control-row label{width:40px;flex-shrink:0;font-size:.75rem;color:var(--text-secondary)}.master-control-row input[type=range]{flex:1}.master-control-row span{width:45px;text-align:right;font-size:.85rem;font-weight:600;color:var(--accent)}.mixer-master.muted{opacity:.6}.mixer-master.muted .master-control-row span{color:var(--text-muted)}.master-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.master-header label{margin-bottom:0}.master-mute-btn{background:#ffffff1a;border:none;border-radius:8px;padding:6px 10px;font-size:1rem;cursor:pointer;transition:all .2s}.master-mute-btn:hover{background:#fff3}.master-mute-btn.active{background:#dc26264d;color:#f87171}.level-meter{width:100%;margin-top:8px}.level-meter .level-bar{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.level-meter .level-fill{height:100%;background:linear-gradient(90deg,#4ade80,#4ade80);border-radius:4px;transition:width .05s ease-out}.level-meter .level-fill.mid{background:linear-gradient(90deg,#4ade80,#facc15)}.level-meter .level-fill.high{background:linear-gradient(90deg,#4ade80,#facc15,#f87171)}.master-level{margin-top:12px}.master-level .level-bar{height:12px}.channel-level{margin:8px 0}.channel-level .level-bar{height:6px}.mixer-channels{display:flex;flex-direction:column;gap:12px}.mixer-channel{background:#ffffff08;border-radius:12px;padding:16px;border:1px solid var(--border);transition:all .2s}.mixer-channel.me{background:#8d7bff14;border-color:#8d7bff4d}.mixer-channel.muted{opacity:.5}.channel-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.channel-icon{font-size:1.5rem}.channel-name{flex:1;font-size:.9rem;font-weight:600}.mute-btn{width:32px;height:32px;border:none;border-radius:6px;background:#ffffff1a;cursor:pointer;font-size:1rem;transition:all .2s}.mute-btn:hover{background:#fff3}.mute-btn.active{background:#f8717133}.channel-info{display:flex;gap:12px;margin-bottom:12px;font-size:.75rem;color:var(--text-muted)}.channel-latency{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#0003;border-radius:6px;font-size:.75rem;margin-bottom:8px}.channel-latency .quality-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.channel-latency .latency-text{font-family:Monaco,Consolas,monospace;color:var(--text-secondary)}.channel-latency .latency-text small{color:var(--text-muted);font-size:.65rem}.channel-error{padding:8px;background:#f871711a;border-radius:6px;font-size:.8rem;color:var(--error)}.channel-controls{display:flex;flex-direction:column;gap:12px}.control-row{display:flex;align-items:center;gap:12px}.control-row label{width:40px;font-size:.8rem;color:var(--text-muted)}.control-row input[type=range]{flex:1;height:6px;background:var(--border);border-radius:3px;cursor:pointer}.control-row input[type=range]:disabled{opacity:.3;cursor:not-allowed}.control-row span{width:50px;text-align:right;font-size:.8rem;font-weight:500}.mixer-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}.mixer-empty p{margin-bottom:8px}.mixer-empty small{font-size:.8rem;opacity:.7}.chat-panel{background:var(--bg-panel);display:flex;flex-direction:column;height:calc(100vh - 73px)}.nickname-area{display:flex;align-items:center}.nickname-btn{background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.nickname-btn:hover{background:#ffffff1a;color:#fff}.nickname-input{background:var(--bg-input);border:1px solid var(--accent);border-radius:4px;padding:4px 8px;font-size:.8rem;color:#fff;width:100px}.nickname-display{color:var(--text-muted);font-size:.85rem;padding:4px 8px;background:#ffffff0d;border-radius:4px}.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.9rem}.chat-message{padding:8px 12px;background:#ffffff08;border-radius:8px;max-width:85%}.chat-message.me{background:#8d7bff26;margin-left:auto}.chat-nickname{display:block;font-size:.7rem;color:var(--accent);margin-bottom:4px;font-weight:600}.chat-message.me .chat-nickname{color:var(--accent-strong)}.chat-text{font-size:.85rem;line-height:1.4;word-break:break-word}.chat-input-area{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}.chat-input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:.9rem;color:#fff;transition:border-color .2s}.chat-input:focus{outline:none;border-color:var(--accent)}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{padding:10px 16px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.chat-send-btn:hover{background:var(--accent-strong)}.room-info-modal,.pending-requests-modal,.room-settings-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center}.room-info-modal>.modal-backdrop,.instrument-select-modal>.modal-backdrop,.pending-requests-modal>.modal-backdrop,.room-settings-modal>.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3}.room-info-modal .modal-content,.pending-requests-modal .modal-content,.room-settings-modal .modal-content{position:relative;background:var(--bg-panel);border-radius:16px;width:90%;max-width:550px!important;max-height:90vh!important;overflow:hidden!important;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:1.1rem;font-weight:600}.close-btn{width:32px;height:32px;border:none;border-radius:8px;background:#ffffff1a;color:var(--text-muted);font-size:1.2rem;cursor:pointer;transition:all .2s}.close-btn:hover{background:#fff3;color:#fff}.modal-body{padding:20px;flex:1;overflow-y:auto}.host-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}.sync-btn{width:100%;padding:12px 16px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s}.sync-btn:hover{background:#1d4ed8}.delete-room-btn{width:100%;padding:12px 16px;background:#dc2626;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s}.delete-room-btn:hover{background:#b91c1c}.performer-instrument{display:block;font-size:.75rem;color:var(--text-muted);text-transform:capitalize}.instrument-select-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center}.instrument-select-modal .modal-content{position:relative;background:var(--bg-panel);border-radius:16px;width:90%;max-width:650px!important;max-height:none!important;overflow:visible!important}.modal-description{color:var(--text-muted);font-size:.9rem;margin-bottom:20px}.instrument-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.instrument-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;background:#ffffff08;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s}.instrument-option:hover:not(.disabled){border-color:var(--accent);background:#8d7bff1a;transform:translateY(-2px)}.instrument-option.disabled{opacity:.4;cursor:not-allowed}.inst-icon{font-size:2.5rem}.inst-name{font-size:.95rem;font-weight:600}.inst-slots{font-size:.8rem;padding:4px 12px;background:#4ade8033;color:var(--success);border-radius:12px}.inst-slots.full{background:#f8717133;color:var(--error)}@media (max-width: 1200px){.live-body{grid-template-columns:240px 1fr 240px}}@media (max-width: 1024px){.live-body{grid-template-columns:200px 1fr}.chat-panel{display:none}}@media (max-width: 768px){.live-body{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.performers-panel{height:auto;max-height:200px;order:1}.mixer-panel{height:auto;min-height:200px;order:2}.chat-panel{display:flex;height:250px;order:3}.live-header{padding:12px 16px}.live-title-area h1{font-size:1rem}.live-meta{gap:8px}.header-btn{padding:6px 10px;font-size:.75rem}}.rooms-header-buttons{display:flex;gap:12px;align-items:center}.my-rooms-btn{padding:12px 20px;background:#ffffff0d;border:1px solid var(--border);border-radius:10px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.my-rooms-btn:hover{background:#ffffff1a;border-color:var(--accent)}.my-rooms-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center}.my-rooms-modal>.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3}.my-rooms-modal .modal-content{position:relative;background:var(--bg-panel);border-radius:16px;width:90%;max-width:480px;max-height:80vh;overflow:hidden}.my-rooms-loading,.my-rooms-empty{padding:40px 20px;text-align:center;color:var(--text-muted)}.my-rooms-empty p{margin-bottom:16px}.create-room-btn-small{padding:10px 20px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;border-radius:8px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.create-room-btn-small:hover{transform:translateY(-2px);box-shadow:0 8px 20px #8d7bff66}.my-rooms-list{display:flex;flex-direction:column;gap:12px}.my-room-item{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px;background:#ffffff08;border:1px solid var(--border);border-radius:12px;transition:all .2s}.my-room-item:hover{border-color:var(--accent);background:#8d7bff0d}.my-room-info{flex:1;min-width:0}.my-room-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.my-room-info h4{font-size:1rem;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.my-room-status{flex-shrink:0;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:600}.my-room-status.open{background:#4ade8033;color:var(--success)}.my-room-status.recording{background:#f8717133;color:var(--error)}.my-room-status.locked{background:#ffffff1a;color:var(--text-muted)}.my-room-desc{font-size:.85rem;color:var(--text-muted);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.my-room-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--text-muted);margin-bottom:8px}.my-room-genre{padding:2px 8px;background:#8d7bff26;color:var(--accent);border-radius:8px}.my-room-participants{display:flex;align-items:center;gap:4px}.my-room-date{opacity:.7}.my-room-tags{display:flex;flex-wrap:wrap;gap:4px}.my-room-tag{padding:2px 8px;background:#ffffff0d;border-radius:6px;font-size:.75rem;color:var(--text-muted)}.my-room-tag.more{background:#8d7bff1a;color:var(--accent)}.my-room-tag.more.clickable{cursor:pointer;transition:all .2s ease;position:relative}.my-room-tag.more.clickable:hover{background:#8d7bff40}.my-room-instruments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.my-room-inst{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#ffffff0d;border-radius:8px;font-size:.8rem}.my-room-join-type{margin-top:8px;font-size:.8rem;color:var(--text-muted)}.my-room-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.my-room-enter-btn{padding:8px 16px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.my-room-enter-btn:hover{background:var(--accent-strong)}.my-room-edit-btn{padding:8px 12px;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.my-room-edit-btn:hover{background:#ffffff1a;border-color:var(--accent)}.my-room-delete-btn{padding:8px 12px;background:#f871711a;border:1px solid rgba(248,113,113,.3);border-radius:8px;color:var(--error);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.my-room-delete-btn:hover{background:#f8717133;border-color:var(--error)}.room-edit-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1001;display:flex;align-items:center;justify-content:center}.room-edit-modal>.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c}.room-edit-modal .modal-content{position:relative;background:var(--bg-panel);border-radius:16px;width:90%;max-width:550px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.room-edit-modal .modal-body{flex:1;overflow-y:auto;padding:20px}.edit-form-group{margin-bottom:16px}.edit-form-group label{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px;color:var(--text-muted)}.edit-form-group input,.edit-form-group textarea,.edit-form-group select{width:100%;padding:12px;background:#0000004d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.95rem;transition:border-color .2s}.edit-form-group input:focus,.edit-form-group textarea:focus,.edit-form-group select:focus{outline:none;border-color:var(--accent)}.edit-form-group textarea{resize:vertical;min-height:80px}.edit-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edit-toggle-option{display:flex;align-items:center;gap:12px;padding:12px;background:#0003;border-radius:8px}.edit-toggle-option .toggle-label{display:flex;flex-direction:column;gap:2px}.edit-toggle-option .toggle-label strong{font-size:.9rem}.edit-toggle-option .toggle-label span{font-size:.8rem;color:var(--text-muted)}.edit-form-actions{display:flex;gap:12px;margin-top:20px}.edit-cancel-btn{flex:1;padding:12px;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.edit-cancel-btn:hover:not(:disabled){background:#ffffff1a}.edit-save-btn{flex:1;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));border:none;border-radius:8px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.edit-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #8d7bff66}.edit-cancel-btn:disabled,.edit-save-btn:disabled{opacity:.5;cursor:not-allowed}.edit-tags-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.edit-tag-btn{padding:6px 14px;background:#ffffff0d;border:1px solid var(--border);border-radius:16px;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .2s}.edit-tag-btn:hover{border-color:var(--accent);color:#fff}.edit-tag-btn.active{background:#8d7bff33;border-color:var(--accent);color:var(--accent)}.edit-custom-tag-input{display:flex;gap:8px;margin-bottom:12px}.edit-custom-tag-input input{flex:1;padding:10px 12px;background:#0000004d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.9rem}.edit-custom-tag-input input:focus{outline:none;border-color:var(--accent)}.edit-custom-tag-input button{padding:10px 16px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s}.edit-custom-tag-input button:hover{background:var(--accent-strong)}.edit-selected-tags{display:flex;flex-wrap:wrap;gap:8px}.edit-selected-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#8d7bff26;border-radius:12px;font-size:.85rem;color:var(--accent)}.edit-selected-tag button{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:1rem;line-height:1;opacity:.7;transition:opacity .2s}.edit-selected-tag button:hover{opacity:1}.edit-form-hint{font-size:.85rem;color:var(--text-muted);margin-bottom:12px}.edit-instrument-slots{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.edit-instrument-slot{display:flex;align-items:center;gap:12px;padding:12px;background:#0003;border:1px solid var(--border);border-radius:10px}.edit-slot-icon{font-size:1.5rem}.edit-slot-name{flex:1;font-size:.95rem;font-weight:500}.edit-slot-count-control{display:flex;align-items:center;gap:8px}.edit-slot-count-control button{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:#ffffff0d;color:#fff;font-size:1rem;cursor:pointer;transition:all .2s}.edit-slot-count-control button:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.edit-slot-count-control button:disabled{opacity:.3;cursor:not-allowed}.edit-slot-count{width:24px;text-align:center;font-weight:600}.edit-slot-remove{width:28px;height:28px;border:none;border-radius:6px;background:#f871711a;color:var(--error);font-size:1.1rem;cursor:pointer;transition:background .2s}.edit-slot-remove:hover{background:#f8717133}.edit-add-instrument select{width:100%;padding:10px 12px;background:#0000004d;border:1px solid var(--border);border-radius:8px;color:#fff;font-size:.9rem;cursor:pointer}.edit-add-instrument select:focus{outline:none;border-color:var(--accent)}@media (max-width: 768px){.rooms-header-buttons{flex-direction:column;width:100%;gap:8px}.my-rooms-btn,.create-room-btn{width:100%}.my-room-item{flex-direction:column;align-items:stretch;gap:12px}.my-room-actions{flex-direction:row;width:100%}.my-room-enter-btn,.my-room-edit-btn,.my-room-delete-btn{flex:1}.edit-form-row{grid-template-columns:1fr}}.pricing-page{max-width:1200px;margin:0 auto;padding:2rem}.pricing-hero{text-align:center;margin-bottom:4rem}.pricing-hero .eyebrow{color:#7b7bff;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.pricing-hero h1{font-size:3rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(120deg,#7b7bff,#ff7ab8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pricing-hero .lead{font-size:1.25rem;color:#a0a8b8;max-width:600px;margin:0 auto}.pricing-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:4rem}.plan-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2rem;position:relative;transition:transform .3s ease,box-shadow .3s ease}.plan-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #7b7bff1a}.plan-card.recommended{border-color:#7b7bff;box-shadow:0 0 30px #7b7bff33}.plan-badge{position:absolute;top:-10px;right:20px;background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600}.plan-header{text-align:center;margin-bottom:2rem}.plan-header h3{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.plan-subtitle{color:#a0a8b8;margin-bottom:1rem}.plan-price{display:flex;align-items:baseline;justify-content:center;gap:.5rem}.plan-price .price{font-size:2.5rem;font-weight:700;background:linear-gradient(120deg,#7b7bff,#ff7ab8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.plan-price .period{color:#a0a8b8;font-size:1rem}.plan-features{margin-bottom:2rem}.feature-highlight h4,.feature-limitations h4{font-size:1rem;font-weight:600;margin-bottom:1rem}.feature-highlight ul,.feature-limitations ul{list-style:none;padding:0;margin:0}.feature-highlight li,.feature-limitations li{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.feature-highlight li:last-child,.feature-limitations li:last-child{border-bottom:none}.plan-button{width:100%;padding:1rem;font-size:1rem;font-weight:600;border-radius:12px;border:none;cursor:pointer;transition:all .3s ease;margin-bottom:1rem}.free-button{background:#ffffff1a;color:#f5f7ff;border:1px solid rgba(255,255,255,.2)}.free-button:hover{background:#ffffff26}.standard-button{background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505}.standard-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #7b7bff4d}.pro-button{background:linear-gradient(120deg,#ff7ab8,#ffb347);color:#050505}.pro-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #ff7ab84d}.plan-recommendation{text-align:center;color:#a0a8b8;font-size:.875rem;margin:0}.comparison-table{margin-bottom:4rem}.comparison-table h2{text-align:center;margin-bottom:2rem;font-size:2rem;font-weight:700}.table-container{overflow-x:auto;border-radius:12px;background:#ffffff0d}.comparison-table table{width:100%;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:1rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}.comparison-table th{background:#ffffff1a;font-weight:600;text-align:center}.comparison-table td{text-align:center}.feature-name{text-align:left!important;font-weight:500}.faq-section{margin-bottom:4rem}.faq-section h2{text-align:center;margin-bottom:2rem;font-size:2rem;font-weight:700}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.faq-item{background:#ffffff0d;border-radius:12px;padding:1.5rem}.faq-item h3{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:#7b7bff}.faq-item p{color:#a0a8b8;line-height:1.6}.getting-started{text-align:center}.getting-started h2{margin-bottom:2rem;font-size:2rem;font-weight:700}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.step{background:#ffffff0d;border-radius:12px;padding:2rem}.step-number{width:40px;height:40px;border-radius:50%;background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 1rem}.step h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.step p{color:#a0a8b8;line-height:1.6}@media (max-width: 768px){.pricing-page{padding:1rem}.pricing-hero h1{font-size:2rem}.pricing-plans{grid-template-columns:1fr}.plan-price .price{font-size:2rem}}.plan-button.current-plan{background:#22c55e33;border:2px solid #22c55e;color:#22c55e;cursor:default}.plan-button.current-plan:hover{transform:none;box-shadow:none}.plan-card.current-plan{border-color:#22c55e;box-shadow:0 0 20px #22c55e33}.plan-card.current-plan:before{content:"현재 플랜";position:absolute;top:-10px;left:20px;background:#22c55e;color:#050505;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.plan-status-compact{display:flex;align-items:center}.plan-badge-compact{padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:600;color:#fff;white-space:nowrap}.plan-status-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:16px}.plan-status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.plan-status-header .plan-info{display:flex;align-items:center;gap:8px}.plan-status-header h3{font-size:1rem;font-weight:600;margin:0}.plan-badge{padding:2px 8px;border-radius:8px;font-size:.7rem;font-weight:600;color:#fff}.upgrade-link{font-size:.85rem;color:var(--accent);text-decoration:none;font-weight:500}.upgrade-link:hover{text-decoration:underline}.plan-limits{display:flex;flex-direction:column;gap:8px}.limit-item{display:flex;justify-content:space-between;align-items:center;font-size:.85rem}.limit-label{color:var(--text-muted)}.limit-value{font-weight:500}.limit-item.warning .limit-value{color:var(--warning)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.premium-modal{background:#02040c;border:1px solid rgba(123,123,255,.3);border-radius:20px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 40px #7b7bff33}.modal-close{position:absolute;top:1rem;right:1rem;background:#ffffff1a;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#f5f7ff;font-size:1.25rem;transition:background .2s ease}.modal-close:hover{background:#fff3}.modal-header{text-align:center;padding:2rem 2rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}.premium-icon{font-size:3rem;margin-bottom:1rem}.modal-header h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(120deg,#7b7bff,#ff7ab8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.feature-description{color:#a0a8b8;line-height:1.6}.feature-description strong{color:#7b7bff}.modal-content{padding:2rem}.plan-selector{margin-bottom:2rem}.plan-tabs{display:flex;background:#ffffff0d;border-radius:12px;padding:4px;margin-bottom:1.5rem}.plan-tab{flex:1;padding:.75rem;border:none;background:transparent;color:#a0a8b8;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500}.plan-tab.active{background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;font-weight:600}.selected-plan-details{background:#ffffff0d;border-radius:12px;padding:1.5rem}.plan-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.plan-info h3{font-size:1.25rem;font-weight:600;margin:0}.plan-price .price{font-size:1.5rem;font-weight:700;background:linear-gradient(120deg,#7b7bff,#ff7ab8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.plan-price .period{color:#a0a8b8;font-size:.875rem}.plan-features h4{font-size:1rem;font-weight:600;margin-bottom:1rem;color:#f5f7ff}.plan-features ul{list-style:none;padding:0;margin:0}.plan-features li{padding:.5rem 0;color:#a0a8b8;font-size:.875rem}.modal-actions{margin-bottom:2rem}.upgrade-button{width:100%;padding:1rem;background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:1rem}.upgrade-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #7b7bff4d}.view-all-plans{display:block;text-align:center;color:#7b7bff;text-decoration:none;font-weight:500;transition:color .2s ease}.view-all-plans:hover{color:#ff7ab8}.modal-benefits{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem}.benefit-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.benefit-item:last-child{margin-bottom:0}.benefit-icon{font-size:1.25rem;flex-shrink:0}.benefit-item strong{display:block;font-weight:600;margin-bottom:.25rem;color:#f5f7ff}.benefit-item p{color:#a0a8b8;font-size:.875rem;margin:0;line-height:1.4}@media (max-width: 768px){.premium-modal{margin:1rem;max-width:none}.modal-header,.modal-content{padding:1.5rem}.plan-info{flex-direction:column;align-items:flex-start;gap:.5rem}.benefit-item{flex-direction:column;gap:.5rem}}.payment-page{min-height:100vh;background:linear-gradient(135deg,#02040c,#0a0f1c);padding:1rem}.payment-container{max-width:600px;margin:0 auto}.payment-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:0 .5rem}.back-button{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#f5f7ff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.875rem;display:flex;align-items:center;gap:.5rem}.back-button:hover{background:#ffffff1f;transform:translate(-2px)}.payment-header h1{font-size:1.75rem;font-weight:600;margin:0;color:#f5f7ff}.payment-content{display:flex;flex-direction:column;gap:1rem}.plan-summary{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.plan-summary-header h2{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#f5f7ff}.plan-summary-content{display:flex;flex-direction:column;gap:1rem}.plan-info{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff0a;border-radius:12px;border:1px solid rgba(255,255,255,.08)}.plan-info h3{font-size:1.25rem;font-weight:600;margin:0;color:#f5f7ff}.plan-price{display:flex;align-items:baseline;gap:.25rem}.plan-price .price{font-size:1.5rem;font-weight:700;color:#f5f7ff}.plan-price .period{color:#94a3b8;font-size:.875rem}.plan-features h4{margin:0 0 .75rem;font-size:.875rem;font-weight:600;color:#cbd5e1}.plan-features ul{list-style:none;padding:0;margin:0;display:grid;gap:.375rem}.plan-features li{font-size:.8rem;color:#94a3b8;display:flex;align-items:center;gap:.5rem}.payment-methods{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.payment-methods h3{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#f5f7ff}.payment-method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.payment-method-btn{background:#ffffff0a;border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;color:#f5f7ff;position:relative;overflow:hidden;text-align:left}.payment-method-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.payment-method-btn:hover:before{left:100%}.payment-method-btn:hover{border-color:#7b7bff66;background:#7b7bff14;transform:translateY(-1px)}.payment-method-btn.active{border-color:#7b7bff;background:#7b7bff26;box-shadow:0 0 20px #7b7bff33}.method-icon{width:40px;height:40px;object-fit:contain;border-radius:6px;flex-shrink:0;background:#ffffff1a;padding:4px}.method-name{font-weight:500;font-size:.875rem;color:#f5f7ff;flex:1}.payment-summary{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.payment-summary h3{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#f5f7ff}.payment-details{display:flex;flex-direction:column;gap:.75rem}.payment-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#ffffff0a;border-radius:8px;font-size:.875rem}.payment-row:last-child{border-bottom:none}.payment-row.total{font-weight:600;font-size:1rem;background:linear-gradient(135deg,#7b7bff1a,#ff7ab81a);border:1px solid rgba(123,123,255,.2);color:#f5f7ff}.agreement-section{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.agreement-checkbox{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;flex-direction:row-reverse;justify-content:flex-end}.agreement-checkbox input[type=checkbox]{display:none}.checkmark{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;margin-top:1px}.checkmark:hover{border-color:#7b7bff99;background:#7b7bff1a}.agreement-checkbox input[type=checkbox]:checked+.checkmark{background:#7b7bff;border-color:#7b7bff}.agreement-checkbox input[type=checkbox]:checked+.checkmark:hover{background:#6b6bef}.agreement-checkbox input[type=checkbox]:checked+.checkmark:after{content:"✓";color:#fff;font-weight:700;font-size:.75rem}.agreement-text{font-size:.8rem;line-height:1.5;color:#94a3b8}.agreement-text a{color:#7b7bff;text-decoration:none;border-bottom:1px solid rgba(123,123,255,.3);transition:all .2s ease}.agreement-text a:hover{color:#ff7ab8;border-bottom-color:#ff7ab880}.payment-submit-btn{width:100%;background:linear-gradient(135deg,#7b7bff,#ff7ab8);color:#fff;border:none;border-radius:16px;padding:1rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;overflow:hidden;margin-top:.5rem}.payment-submit-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s ease}.payment-submit-btn:hover:not(:disabled):before{left:100%}.payment-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #7b7bff66}.payment-submit-btn:active:not(:disabled){transform:translateY(0)}.payment-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.payment-notice{background:#3b82f614;border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.payment-notice h4{margin:0 0 .75rem;color:#60a5fa;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.payment-notice ul{margin:0;padding:0;list-style:none;color:#94a3b8}.payment-notice li{font-size:.8rem;line-height:1.4;margin-bottom:.375rem;display:flex;align-items:flex-start;gap:.5rem}.payment-notice li:before{content:"•";color:#60a5fa;font-weight:700;flex-shrink:0}.payment-success-page{min-height:100vh;background:#02040c;display:flex;align-items:center;justify-content:center;padding:2rem}.success-container{max-width:600px;width:100%;text-align:center}.success-icon{margin-bottom:2rem}.checkmark{width:20px;height:20px;border-radius:50%;background:linear-gradient(120deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:2.5rem;color:#fff;font-weight:700;animation:checkmarkPop .6s ease-out}@keyframes checkmarkPop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.success-content h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(120deg,#7b7bff,#ff7ab8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.success-message{font-size:1.25rem;color:#a0a8b8;margin-bottom:2rem}.payment-info{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;margin-bottom:2rem}.info-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.info-row:last-child{border-bottom:none}.next-steps{margin-bottom:2rem}.next-steps h3{margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:2rem}.feature-item{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;display:flex;align-items:flex-start;gap:.75rem;text-align:left}.feature-icon{font-size:1.5rem;flex-shrink:0}.feature-item strong{display:block;font-weight:600;margin-bottom:.25rem}.feature-item p{margin:0;font-size:.875rem;color:#a0a8b8}.action-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.primary-action{background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;padding:1rem 2rem;border-radius:12px;text-decoration:none;font-weight:600;transition:all .3s ease}.primary-action:hover{transform:translateY(-2px);box-shadow:0 10px 20px #7b7bff4d}.secondary-action{background:#ffffff1a;color:#f5f7ff;padding:1rem 2rem;border-radius:12px;text-decoration:none;font-weight:500;border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.secondary-action:hover{background:#ffffff26}.support-info{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem}.support-info h4{margin:0 0 .75rem;font-size:1rem;font-weight:600}.support-info p{margin:0;font-size:.875rem;color:#a0a8b8;line-height:1.5}.support-info a{color:#7b7bff;text-decoration:none}.support-info a:hover{color:#ff7ab8;text-decoration:underline}@media (max-width: 768px){.payment-page{padding:.75rem}.payment-container{max-width:100%}.payment-header{margin-bottom:1rem;padding:0}.payment-header h1{font-size:1.5rem}.plan-info{flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left}.payment-method-grid{grid-template-columns:1fr;gap:.5rem}.payment-method-btn{flex-direction:row;justify-content:flex-start;padding:.75rem 1rem;text-align:left}.plan-summary,.payment-methods,.payment-summary,.agreement-section,.payment-notice{padding:1rem}.payment-submit-btn{padding:.875rem 1.25rem;font-size:.9rem}}.payment-fail-page{min-height:100vh;background:#02040c;display:flex;align-items:center;justify-content:center;padding:2rem}.fail-container{max-width:600px;width:100%;text-align:center}.fail-icon{margin-bottom:2rem}.error-mark{width:80px;height:80px;border-radius:50%;background:linear-gradient(120deg,#ef4444,#dc2626);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:2.5rem;color:#fff;font-weight:700;animation:errorPop .6s ease-out}@keyframes errorPop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.fail-content h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:#ef4444}.fail-message{font-size:1.25rem;color:#a0a8b8;margin-bottom:2rem}.order-info{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;margin-bottom:2rem}.order-id{margin:0;font-size:.875rem;color:#a0a8b8;font-family:monospace}.fail-details{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;margin-bottom:2rem;text-align:left}.fail-details h3{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#fbbf24}.fail-details ul{margin:0;padding-left:1.25rem;color:#a0a8b8}.fail-details li{font-size:.875rem;line-height:1.5;margin-bottom:.5rem}.support-hours{font-size:.75rem!important;color:#6b7280!important;margin-top:.5rem!important}.loading-spinner{width:40px;height:40px;border:4px solid rgba(123,123,255,.3);border-top:4px solid #7b7bff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.error-icon{margin-bottom:2rem}.error-message{font-size:1.125rem;color:#ef4444;margin-bottom:2rem}*,*:before,*:after{box-sizing:border-box}:root{font-family:Space Grotesk,Pretendard Variable,Spoqa Han Sans Neo,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#f5f7ff;background-color:#02040c;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body{margin:0;min-height:100vh;background-color:#02040c}a{color:inherit}button{border:none;border-radius:14px;padding:12px 18px;font-size:1rem;font-weight:600;font-family:inherit;background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;cursor:pointer;transition:transform .2s ease,opacity .2s ease}button:hover{transform:translateY(-1px)}#root{min-height:100vh}.premium-badge{display:inline-block;background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:8px;margin-left:.5rem;vertical-align:middle}input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.mix-control input:disabled{background:#ffffff1a}.mix-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.plan-status-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;margin-bottom:1rem}.plan-status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.plan-info{display:flex;align-items:center;gap:.75rem}.plan-badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;color:#050505}.plan-badge-compact{padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;color:#050505;transition:all .2s ease}.upgrade-link{color:#7b7bff;text-decoration:none;font-weight:500;font-size:.875rem}.upgrade-link:hover{color:#ff7ab8}.plan-limits{display:grid;gap:.75rem}.limit-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.limit-item:last-child{border-bottom:none}.limit-item.warning{color:#fbbf24}.limit-label{color:#a0a8b8;font-size:.875rem}.limit-value{font-weight:500;color:#f5f7ff}.feature-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:2rem}.lock-icon{font-size:4rem;margin-bottom:1rem;opacity:.7}.feature-restriction{background:#ffc1071a;border:1px solid rgba(255,193,7,.3);border-radius:6px;padding:.75rem;margin-top:.5rem;font-size:.875rem;color:#fbbf24}.feature-info{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:6px;padding:.75rem;margin-top:.5rem;font-size:.875rem;color:#60a5fa}.plan-limit-info{font-size:.75rem;color:#a0a8b8;font-weight:400;margin-left:.5rem}.toggle-option.disabled{opacity:.6;pointer-events:none}.preset-btn.locked{position:relative;opacity:.6;cursor:not-allowed}.preset-btn.locked .preset-content{filter:blur(1px)}.lock-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;opacity:.8}.cloud-save-btn.disabled,.take-share.disabled{opacity:.6;cursor:not-allowed;background:#ffffff1a}.cloud-save-btn.disabled:hover,.take-share.disabled:hover{transform:none;box-shadow:none}.user-plan-section{margin-top:2rem}.user-plan-section .section-head{margin-bottom:1.5rem}.user-menu{display:flex;align-items:center;gap:1rem}.plan-status-compact{display:flex;align-items:center;text-decoration:none;cursor:pointer;transition:all .2s ease}.plan-status-compact:hover .plan-badge-compact{transform:scale(1.05);box-shadow:0 2px 8px #0003}@media (max-width: 768px){.plan-status-header{flex-direction:column;align-items:flex-start;gap:.75rem}.plan-buttons{flex-wrap:wrap}.user-menu{flex-direction:column;align-items:flex-start;gap:.5rem}}.ad-banner{background:linear-gradient(135deg,#7b7bff1a,#ff7ab81a);border:1px solid rgba(123,123,255,.3);border-radius:12px;padding:1.5rem;margin:2rem 0;position:relative;overflow:hidden}.ad-banner:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7b7bff,#ff7ab8)}.ad-banner.compact{padding:1rem;margin:1rem 0}.ad-content{display:flex;align-items:center;gap:1rem}.ad-banner.compact .ad-content{flex-direction:column;text-align:center;gap:.75rem}.ad-label{background:#7b7bff33;color:#7b7bff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.ad-text{flex:1}.ad-text h4{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;color:#f5f7ff}.ad-text p{margin:0;color:#a0a8b8;font-size:.875rem;line-height:1.4}.ad-banner.compact .ad-text p{font-size:.8rem}.ad-cta{background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;padding:.75rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.875rem;transition:all .3s ease;flex-shrink:0}.ad-cta:hover{transform:translateY(-2px);box-shadow:0 8px 16px #7b7bff4d}.ad-cta-compact{background:linear-gradient(120deg,#7b7bff,#ff7ab8);color:#050505;padding:.5rem 1rem;border-radius:6px;text-decoration:none;font-weight:600;font-size:.75rem;transition:all .3s ease}.ad-cta-compact:hover{transform:translateY(-1px);box-shadow:0 4px 8px #7b7bff4d}.ad-banner.top{margin-top:0;margin-bottom:3rem}.ad-banner.bottom{margin-top:3rem;margin-bottom:0}.ad-banner.sidebar{margin:1rem 0}@media (max-width: 768px){.ad-content{flex-direction:column;text-align:center;gap:1rem}.ad-text h4{font-size:1rem}.ad-text p{font-size:.8rem}.ad-cta{padding:.625rem 1.25rem;font-size:.8rem}}