:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-tertiary: #2a2a2a;--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--accent-red: #cc0000;--accent-red-hover: #e60000;--accent-green: #00cc44;--accent-orange: #ff8800;--radius: 12px;--btn-min-size: 56px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100dvh;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{max-width:480px;margin:0 auto;padding:16px;min-height:100dvh;display:flex;flex-direction:column}button{min-width:var(--btn-min-size);min-height:var(--btn-min-size);border:none;border-radius:var(--radius);background:var(--bg-tertiary);color:var(--text-primary);font-size:16px;font-weight:600;cursor:pointer;transition:background .15s}button:active{background:var(--accent-red)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent-red);width:100%}button.primary:active{background:var(--accent-red-hover)}button.danger{background:#800;width:100%}button.danger:active{background:var(--accent-red)}.icon-btn{min-width:44px;min-height:44px;width:44px;height:44px;background:transparent;display:flex;align-items:center;justify-content:center}.login-page{flex:1;display:flex;flex-direction:column;justify-content:center;gap:40px}.login-header{text-align:center}.logo{font-size:36px;font-weight:900;letter-spacing:4px;color:var(--accent-red)}.subtitle{color:var(--text-secondary);margin-top:8px;font-size:14px}.login-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;color:var(--text-secondary);font-weight:500}input[type=email],input[type=password],input[type=text],input[type=url]{background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--radius);color:var(--text-primary);font-size:16px;padding:14px 16px;outline:none;transition:border-color .15s}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus,input[type=url]:focus{border-color:var(--accent-red)}.error-msg{color:var(--accent-red);font-size:14px;text-align:center}.player-page{flex:1;display:flex;flex-direction:column;gap:24px}.player-header{display:flex;align-items:center;justify-content:space-between}.logo-small{font-size:20px;font-weight:900;letter-spacing:3px;color:var(--accent-red)}.header-actions{display:flex;gap:4px}.status-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius);font-size:14px}.status-dot{width:10px;height:10px;min-width:10px;border-radius:50%;display:inline-block}.status-dot.connected{background:var(--accent-green)}.status-dot.disconnected{background:var(--accent-red)}.status-dot.buffering{background:var(--accent-orange);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.play-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0}.play-btn{width:88px;height:88px;border-radius:50%;background:var(--accent-red);display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s}.play-btn svg[hidden]{display:none}.play-btn:active{transform:scale(.92)}.play-btn.playing{background:var(--bg-tertiary)}.play-btn:disabled{background:var(--bg-tertiary);opacity:.4}.match-label{font-size:14px;color:var(--text-secondary);text-align:center}.control-group{padding:16px;background:var(--bg-secondary);border-radius:var(--radius)}.control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px}.control-header label{font-weight:600}.control-value{color:var(--text-secondary);font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--accent-red);cursor:pointer}input[type=range]:disabled::-webkit-slider-thumb{background:var(--text-secondary)}.admin-page{flex:1;display:flex;flex-direction:column;gap:24px}.admin-section{display:flex;flex-direction:column;gap:12px}.admin-section h2{font-size:16px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.info-card{padding:14px 16px;background:var(--bg-secondary);border-radius:var(--radius);font-size:14px;line-height:1.6}.status-active{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}.status-active .status-dot{margin-top:5px}.users-list{display:flex;flex-direction:column;gap:8px}.user-card{padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius);display:flex;flex-direction:column;gap:4px}.user-info{display:flex;justify-content:space-between;align-items:center}.user-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:var(--bg-tertiary)}.user-role.admin{background:var(--accent-red);color:#fff}.user-email{font-size:13px;color:var(--text-secondary)}.invite-form{display:flex;gap:8px}.invite-form input{flex:1}.invite-form button{min-width:auto;padding:0 20px}.info-msg{font-size:13px;padding:10px 14px;border-radius:var(--radius);background:var(--bg-secondary)}.info-msg.success{color:var(--accent-green)}.info-msg.error{color:var(--accent-red)}