*{box-sizing:border-box}body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#050816;color:#f9fafb}#app{min-height:100vh;display:flex;flex-direction:column}.top-bar{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.user-block{display:flex;align-items:center;gap:8px}#user-name{font-size:14px;color:#e5e7eb;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-img,.avatar-placeholder{width:40px;height:40px;border-radius:50%;object-fit:cover}.avatar-placeholder{display:flex;align-items:center;justify-content:center;background:#111827;color:#f9fafb}.play-container{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px}#play-button{padding:14px 36px;border-radius:999px;border:none;background:linear-gradient(135deg,#22c55e,#16a34a);color:#f9fafb;font-size:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 25px #22c55e66;transition:transform .1s ease,box-shadow .1s ease,background .1s ease}#play-button:active{transform:translateY(1px) scale(.98);box-shadow:0 4px 10px #22c55e4d;background:linear-gradient(135deg,#16a34a,#15803d)}#debug{padding:8px 12px;margin:0 8px 8px;border-radius:6px;background:#020617;color:#9ca3af;font-size:11px;overflow:auto;max-height:120px}