:root{--color-yellow: #F9E8A2;--color-cyan: #B4E1EB;--color-blue-sea: #95BDD7;--color-blue-deep: #78A4CB;--bg-primary: #090e17;--bg-secondary: #111a29;--bg-card: rgba(17, 26, 41, .85);--bg-card-hover: rgba(26, 38, 59, .9);--glass-border: rgba(180, 225, 235, .15);--glass-border-light: rgba(180, 225, 235, .3);--accent-gradient: linear-gradient(135deg, #78A4CB 0%, #95BDD7 50%, #B4E1EB 100%);--accent-gradient-hover: linear-gradient(135deg, #8ab5dc 0%, #a6cfe6 50%, #c4ebf3 100%);--accent-gradient-warm: linear-gradient(135deg, #F9E8A2 0%, #B4E1EB 100%);--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--role-host: #F9E8A2;--role-mod: #B4E1EB;--role-user: #95BDD7;--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-heading: "Outfit", sans-serif}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(at 0% 0%,rgba(120,164,203,.18) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(249,232,162,.12) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(180,225,235,.08) 0px,transparent 50%);background-attachment:fixed}.glass-panel{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 12px 40px #00000073;transition:border-color .2s ease,box-shadow .2s ease}.glass-panel:hover{border-color:#b4e1eb40}.recent-room-item:hover{background:#b4e1eb1f!important;border-color:#b4e1eb66!important}.glass-input{background:#090e17b3;border:1px solid var(--glass-border);color:var(--text-primary);border-radius:10px;padding:12px 16px;font-size:14px;outline:none;transition:all .2s ease}.glass-input:focus{border-color:var(--color-cyan);box-shadow:0 0 0 3px #b4e1eb33}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#95bdd74d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#b4e1eb80}.btn-primary{background:var(--accent-gradient);color:#090e17;font-weight:700;border:none;border-radius:10px;padding:12px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #78a4cb59}.btn-primary:hover{background:var(--accent-gradient-hover);transform:translateY(-2px);box-shadow:0 6px 24px #b4e1eb73}.btn-secondary{background:#95bdd71f;color:var(--text-primary);font-weight:600;border:1px solid var(--glass-border);border-radius:10px;padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease}.btn-secondary:hover{background:#b4e1eb33;border-color:var(--glass-border-light);color:#fff}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:6px 12px;cursor:pointer;transition:all .2s ease}.btn-danger:hover{background:#ef44444d;color:#fff}.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;display:inline-flex;align-items:center;gap:4px}.badge-host{background:#f9e8a226;color:var(--role-host);border:1px solid rgba(249,232,162,.35)}.badge-mod{background:#b4e1eb26;color:var(--role-mod);border:1px solid rgba(180,225,235,.35)}.badge-participant{background:#95bdd726;color:var(--role-user);border:1px solid rgba(149,189,215,.3)}@keyframes floatUpFade{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-130px) scale(1.5)}}.floating-reaction{position:absolute;pointer-events:none;font-size:28px;animation:floatUpFade 2s cubic-bezier(.1,.8,.3,1) forwards;z-index:100}.watchparty-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}@media (max-width: 1024px){.watchparty-grid{grid-template-columns:1fr}}@media (max-width: 640px){.watchparty-container{padding:12px!important}.watchparty-header{padding:12px 16px!important;flex-wrap:wrap;gap:12px}}