html,body,#root{min-height:100vh;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{color:#fff;background:#0a0a0f;margin:0;font-family:system-ui,-apple-system,sans-serif}.app{max-width:800px;margin:0 auto;padding:2rem}.nav{border-bottom:1px solid #1a1a2e;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem 0;display:flex}.nav-brand{align-items:center;gap:.5rem;display:flex}.nav-version{color:#888;background:#ffffff1a;border-radius:4px;margin-left:.5rem;padding:2px 6px;font-size:.65rem}.nav-logo{font-size:1.5rem}.nav-title{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:700}.nav-links{gap:.5rem;display:flex}.nav-link{color:#888;border-radius:6px;padding:.5rem 1rem;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover{color:#fff;background:#1a1a2e}.nav-link.active{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.page{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-header{text-align:center;margin-bottom:2rem}.page-header h1{margin-bottom:.5rem}.coming-soon{text-align:center;background:#1a1a2e;border-radius:12px;padding:4rem 2rem}.coming-soon-icon{margin-bottom:1rem;font-size:4rem}.coming-soon h2{color:#fff;text-transform:none;letter-spacing:normal;font-size:1.5rem}.coming-soon p{color:#888;margin:.5rem 0}.coming-soon ul{text-align:left;margin-top:1.5rem;padding:0;list-style:none;display:inline-block}.coming-soon li{color:#aaa;padding:.25rem 0}.coming-soon li:before{content:"→ ";color:#667eea}header{text-align:center;margin-bottom:3rem}h1{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.5rem}.subtitle{color:#888;margin-top:.5rem}main{flex-direction:column;gap:2rem;display:flex}section{background:#1a1a2e;border-radius:12px;padding:1.5rem}h2{color:#888;text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem;font-size:1rem}.btn{cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-play{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.btn-play:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #667eea66}.btn-stop{color:#fff;background:#ef4444}.btn-stop:hover:not(:disabled){background:#dc2626}.btn-record{color:#fff;background:linear-gradient(135deg,#f56565 0%,#e53e3e 100%);width:100%;padding:1rem;font-size:1.25rem}.btn-record:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #f5656566}.btn-save{color:#fff;background:#10b981}.btn-save:hover{background:#059669}.btn-rerecord{color:#fff;background:#6b7280}.btn-rerecord:hover{background:#4b5563}.btn-small{padding:.4rem .8rem;font-size:.875rem}.btn-delete{color:#fff;background:#ef4444}.beat-player{flex-direction:column;gap:1rem;display:flex}.beat-info{justify-content:space-between;align-items:center;display:flex}.beat-title{font-weight:600}.beat-position{color:#667eea;font-family:monospace;font-size:.875rem}.beat-controls{gap:1rem;display:flex}.beat-volume{align-items:center;gap:1rem;display:flex}.beat-volume label{color:#888;font-size:.875rem}.beat-volume input[type=range]{flex:1}.recorder{flex-direction:column;gap:1rem;display:flex}.recorder-status{align-items:center;gap:.5rem;display:flex}.status-label{color:#888}.status-value{font-weight:600}.status-idle{color:#10b981}.status-countdown{color:#f59e0b}.status-recording{color:#ef4444}.status-review{color:#667eea}.recorder-hint{color:#888;text-align:center;margin:0;font-size:.875rem}.countdown-overlay{z-index:100;background:#000000e6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.countdown-number{color:#667eea;font-size:10rem;font-weight:700;animation:.5s ease-out pulse}@keyframes pulse{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.playback-review{flex-direction:column;gap:1rem;display:flex}.playback-progress{background:#2d2d44;border-radius:4px;height:8px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);height:100%;transition:width .1s}.playback-controls{gap:1rem;display:flex}.effects-preview{background:#0a0a0f;border-radius:8px;padding:1rem}.effects-preview h4{color:#888;text-transform:uppercase;margin:0 0 .5rem;font-size:.75rem}.effect-item{color:#aaa;margin:.25rem 0;font-size:.875rem}.playback-actions{gap:1rem;display:flex}.recordings-list{flex-direction:column;gap:.75rem;display:flex}.recording-item{background:#0a0a0f;border-radius:8px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.recording-title{font-weight:600}.recording-meta{color:#888;margin-top:.25rem;font-size:.875rem;display:block}.recording-actions{gap:.5rem;display:flex}.login-page{justify-content:center;align-items:center;min-height:70vh;display:flex}.login-container{text-align:center;width:100%;max-width:360px}.login-header{margin-bottom:2rem}.login-logo{margin-bottom:1rem;font-size:4rem}.login-header h1{margin:0 0 .5rem;font-size:2rem}.login-header p{color:#888;margin:0}.login-actions{flex-direction:column;gap:1rem;display:flex}.btn-google{color:#1a1a2e;cursor:pointer;background:#fff;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.75rem;width:100%;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.btn-google:hover{background:#f5f5f5}.google-icon{flex-shrink:0}.login-divider{color:#666;align-items:center;gap:1rem;font-size:.875rem;display:flex}.login-divider:before,.login-divider:after{content:"";background:#2d2d44;flex:1;height:1px}.btn-demo{color:#fff;cursor:pointer;background:#2d2d44;border:none;border-radius:8px;width:100%;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.btn-demo:hover{background:#3d3d5c}.login-terms{color:#666;margin-top:2rem;font-size:.75rem}.user-menu{position:relative}.user-menu-trigger{cursor:pointer;background:#1a1a2e;border:none;border-radius:999px;align-items:center;gap:.5rem;padding:.375rem .75rem .375rem .375rem;transition:all .2s;display:flex}.user-menu-trigger:hover{background:#2d2d44}.user-avatar{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-avatar span{color:#fff;font-size:.75rem;font-weight:600}.user-name{color:#fff;font-size:.875rem;font-weight:500}.dropdown-arrow{color:#888}.user-dropdown{z-index:100;background:#1a1a2e;border-radius:12px;min-width:200px;position:absolute;top:calc(100% + .5rem);right:0;overflow:hidden;box-shadow:0 10px 40px #00000080}.user-dropdown-header{padding:1rem}.user-dropdown-name{color:#fff;font-weight:600}.user-dropdown-email{color:#888;margin-top:.25rem;font-size:.875rem}.user-dropdown-divider{background:#2d2d44;height:1px}.user-dropdown-item{color:#ccc;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;font-size:.875rem;transition:all .2s;display:flex}.user-dropdown-item:hover{color:#fff;background:#2d2d44}.nav-auth{align-items:center;display:flex}.nav-login{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.nav-login:hover{opacity:.9}.admin-tabs{border-bottom:1px solid #1a1a2e;gap:.5rem;margin-bottom:2rem;padding-bottom:1rem;display:flex}.admin-tab{color:#888;cursor:pointer;background:0 0;border:1px solid #2d2d44;border-radius:8px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;transition:all .2s}.admin-tab:hover{color:#fff;border-color:#667eea}.admin-tab.active{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#0000}.admin-loading{text-align:center;color:#888;padding:4rem}.section-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.section-header h2{color:#fff;margin:0;font-size:1.25rem}.user-table{background:#1a1a2e;border-radius:12px;overflow:hidden}.table-header{text-transform:uppercase;letter-spacing:.05em;color:#888;background:#0a0a0f;grid-template-columns:2fr 2fr 1fr 1fr;padding:1rem;font-size:.75rem;display:grid}.table-row{border-bottom:1px solid #2d2d44;grid-template-columns:2fr 2fr 1fr 1fr;align-items:center;padding:1rem;display:grid}.table-row:last-child{border-bottom:none}.user-name-cell{align-items:center;gap:.75rem;display:flex}.user-avatar-small{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex;overflow:hidden}.user-avatar-small img{object-fit:cover;width:100%;height:100%}.user-avatar-small span{color:#fff;font-size:.75rem;font-weight:600}.role-badge{border-radius:4px;padding:.25rem .5rem;font-size:.75rem;font-weight:500;display:inline-block}.role-badge.admin{color:#fff;background:#764ba2}.role-badge.user{color:#aaa;background:#2d2d44}.battles-list{flex-direction:column;gap:1rem;display:flex}.battle-card{background:#1a1a2e;border-radius:12px;padding:1.5rem}.battle-card-header{justify-content:space-between;align-items:flex-start;margin-bottom:1rem;display:flex}.battle-card-header h3{color:#fff;margin:0;font-size:1.125rem}.battle-description{color:#888;margin:.5rem 0 0;font-size:.875rem}.status-badge{text-transform:uppercase;border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-block}.status-badge.draft{color:#888;background:#2d2d44}.status-badge.open{color:#10b981;background:#065f46}.status-badge.live{color:#fff;background:#dc2626}.status-badge.completed{color:#60a5fa;background:#1e40af}.status-badge.cancelled{color:#888;background:#374151}.battle-card-meta{color:#888;gap:1.5rem;margin-bottom:1rem;font-size:.875rem;display:flex}.battle-card-actions{flex-wrap:wrap;gap:.5rem;display:flex}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600;transition:all .2s}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 20px #667eea66}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{color:#fff;cursor:pointer;background:#2d2d44;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600;transition:all .2s}.btn-secondary:hover{background:#3d3d5c}.btn-live{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600}.btn-complete{color:#fff;cursor:pointer;background:#10b981;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600}.btn-delete{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600}.btn-delete:hover{background:#b91c1c}.battle-participants{border-top:1px solid #2d2d44;margin-top:1.5rem;padding-top:1.5rem}.battle-participants h4{color:#888;text-transform:uppercase;letter-spacing:.05em;margin:0 0 1rem;font-size:.875rem}.participants-list{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.participant-item{background:#0a0a0f;border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem;display:flex}.participant-status{text-transform:uppercase;border-radius:4px;padding:.2rem .5rem;font-size:.75rem}.participant-status.pending{color:#888;background:#2d2d44}.participant-status.ready{color:#10b981;background:#065f46}.participant-status.recorded{color:#60a5fa;background:#1e40af}.participant-status.winner{color:#fff;background:#764ba2}.no-participants{color:#888;text-align:center;padding:1rem;font-size:.875rem}.add-participant{gap:.5rem;display:flex}.participant-select{color:#fff;background:#0a0a0f;border:1px solid #2d2d44;border-radius:8px;flex:1;padding:.75rem;font-size:.875rem}.modal-overlay{z-index:200;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#1a1a2e;border-radius:16px;width:100%;max-width:480px;padding:2rem}.modal h3{color:#fff;margin:0 0 1.5rem;font-size:1.25rem}.form-group{margin-bottom:1rem}.form-group label{color:#888;margin-bottom:.5rem;font-size:.875rem;display:block}.form-group input,.form-group textarea,.form-group select{color:#fff;background:#0a0a0f;border:1px solid #2d2d44;border-radius:8px;width:100%;padding:.75rem;font-size:.875rem}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#667eea;outline:none}.form-row{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.modal-actions{justify-content:flex-end;gap:.75rem;margin-top:1.5rem;display:flex}.settings-manager{flex-direction:column;gap:2rem;display:flex}.settings-section{background:#1a1a2e;border-radius:12px;padding:1.5rem}.settings-section h3{color:#fff;margin:0 0 1.5rem;font-size:1rem}.table-row{cursor:pointer;transition:background .15s}.table-row:hover{background:#0a0a0f}.table-row.selected{background:linear-gradient(135deg,#667eea33 0%,#764ba233 100%)}.row-action{color:#666;transition:color .15s}.table-row:hover .row-action,.table-row.selected .row-action{color:#667eea}.user-detail-panel{background:#1a1a2e;border-radius:12px;margin-top:1.5rem;animation:.2s slideUp;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-detail-header{background:#0a0a0f;align-items:center;gap:1rem;padding:1.5rem;display:flex}.user-detail-avatar{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex;overflow:hidden}.user-detail-avatar img{object-fit:cover;width:100%;height:100%}.user-detail-avatar span{color:#fff;font-size:1.5rem;font-weight:700}.user-detail-info{flex:1}.user-detail-info h3{color:#fff;margin:0;font-size:1.125rem}.user-detail-info p{color:#888;margin:.25rem 0 .5rem;font-size:.875rem}.detail-close{color:#666;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:.5rem;transition:all .15s}.detail-close:hover{color:#fff;background:#1a1a2e}.user-detail-meta{border-bottom:1px solid #2d2d44;grid-template-columns:1fr 1fr;gap:1rem;padding:1.5rem;display:grid}.meta-item{flex-direction:column;gap:.25rem;display:flex}.meta-label{text-transform:uppercase;letter-spacing:.05em;color:#888;font-size:.75rem}.meta-value{color:#fff;font-family:monospace;font-size:.875rem}.user-detail-actions{padding:1.5rem}.user-detail-actions h4{color:#888;text-transform:uppercase;letter-spacing:.05em;margin:0 0 1rem;font-size:.875rem}.action-buttons{flex-wrap:wrap;gap:.75rem;display:flex}.action-buttons .btn{align-items:center;gap:.5rem;display:flex}.btn-promote{color:#fff;cursor:pointer;background:#764ba2;border:none;border-radius:8px;padding:.75rem 1.25rem;font-weight:600;transition:all .2s}.btn-promote:hover{background:#8b5faf}.btn-demote{color:#fff;cursor:pointer;background:#2d2d44;border:none;border-radius:8px;padding:.75rem 1.25rem;font-weight:600;transition:all .2s}.btn-demote:hover{background:#3d3d5c}.table-header span:last-child{text-align:right;width:30px}.beats-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.beat-card{background:#1a1a2e;border-radius:12px;flex-direction:column;gap:1rem;padding:1.25rem;display:flex}.beat-card-header{align-items:flex-start;gap:1rem;display:flex}.beat-icon{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.beat-info{flex:1;min-width:0}.beat-info h3{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1rem;overflow:hidden}.beat-info p{color:#888;margin:.25rem 0 0;font-size:.875rem}.beat-tags{flex-wrap:wrap;gap:.5rem;display:flex}.beat-tag{color:#aaa;background:#0a0a0f;border-radius:4px;padding:.2rem .6rem;font-size:.75rem}.beat-card-footer{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.beat-duration{color:#667eea;font-family:monospace;font-size:.875rem}.beat-actions{gap:.5rem;display:flex}.file-upload{text-align:center;cursor:pointer;border:2px dashed #2d2d44;border-radius:8px;padding:2rem;transition:all .2s}.file-upload:hover{background:#667eea0d;border-color:#667eea}.file-upload input{display:none}.file-upload p{color:#888;margin:0;font-size:.875rem}.beat-manager .section-header h2{color:#fff;margin:0;font-size:1.25rem}.btn-play{color:#fff;cursor:pointer;background:#2d2d44;border:none;border-radius:6px;align-items:center;gap:.3rem;padding:.5rem .75rem;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.btn-play:hover{background:#3d3d5c}.btn-play-active{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;align-items:center;gap:.3rem;padding:.5rem .75rem;font-size:.75rem;font-weight:600;animation:1.5s ease-in-out infinite pulse-glow;display:flex}@keyframes pulse-glow{0%,to{box-shadow:0 0 #667eea66}50%{box-shadow:0 0 12px 2px #667eea99}}.fighter-creator-page{max-width:1100px}.fighter-creator-layout{grid-template-columns:360px 1fr;align-items:start;gap:2rem;display:grid}.fighter-preview-panel{text-align:center;background:#1a1a2e;border-radius:16px;padding:2rem;position:sticky;top:2rem}.fighter-preview-panel canvas{background:linear-gradient(#0a0a0f 0%,#1a1a2e 100%);max-width:100%}.fighter-preview-name{margin-top:1.5rem}.fighter-preview-name h2{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.5rem}.fighter-tagline{color:#888;margin:.5rem 0 0;font-size:.875rem;font-style:italic}.fighter-stats{justify-content:center;gap:2rem;margin:1rem 0;display:flex}.stat{flex-direction:column;display:flex}.stat-value{color:#fff;font-size:1.5rem;font-weight:700}.stat-label{color:#888;text-transform:uppercase;font-size:.75rem}.fighter-preview-panel .btn{width:100%;margin-top:1rem}.fighter-customize-panel{background:#1a1a2e;border-radius:16px;overflow:hidden}.customize-tabs{border-bottom:1px solid #2d2d44;display:flex}.customize-tab{color:#888;cursor:pointer;background:0 0;border:none;flex:1;padding:1rem;font-size:.875rem;font-weight:600;transition:all .2s}.customize-tab:hover{color:#fff;background:#667eea1a}.customize-tab.active{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.customize-content{padding:1.5rem}.customize-section{flex-direction:column;gap:1.5rem;display:flex}.option-group{flex-direction:column;gap:.75rem;display:flex}.option-group label{color:#888;font-size:.875rem;font-weight:500}.option-label-text{color:#667eea;font-size:.75rem}.option-selector{flex-wrap:wrap;gap:.5rem;display:flex}.option-btn{color:#aaa;cursor:pointer;background:#0a0a0f;border:1px solid #2d2d44;border-radius:8px;padding:.5rem 1rem;font-size:.875rem;transition:all .15s}.option-btn:hover{color:#fff;border-color:#667eea}.option-btn.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#0000}.color-selector{flex-wrap:wrap;gap:.5rem;display:flex}.color-btn{cursor:pointer;border:2px solid #0000;border-radius:50%;width:36px;height:36px;transition:all .15s}.color-btn:hover{transform:scale(1.1)}.color-btn.selected{border-color:#fff;box-shadow:0 0 0 2px #667eea}.accessory-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem;display:grid}.accessory-btn{color:#aaa;cursor:pointer;background:#0a0a0f;border:1px solid #2d2d44;border-radius:8px;padding:.75rem;font-size:.75rem;transition:all .15s}.accessory-btn:hover{color:#fff;border-color:#667eea}.accessory-btn.selected{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#0000}.text-input{color:#fff;background:#0a0a0f;border:1px solid #2d2d44;border-radius:8px;width:100%;padding:.875rem 1rem;font-size:1rem}.text-input:focus{border-color:#667eea;outline:none}.text-input::placeholder{color:#555}.fighter-preview-info{border-top:1px solid #2d2d44;margin-top:1rem;padding-top:1.5rem}.fighter-preview-info h3{color:#888;text-transform:uppercase;margin:0 0 1rem;font-size:.875rem}.summary-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.summary-item{flex-direction:column;gap:.25rem;display:flex}.summary-label{color:#666;text-transform:uppercase;font-size:.75rem}.summary-value{color:#fff;font-size:.875rem;font-weight:500}