.room-item{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px 14px;min-height:96px;padding:14px;border:1px solid rgba(148,163,184,.18);cursor:pointer;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));box-shadow:0 14px 28px rgba(15,23,42,.06);transition:transform .18s,box-shadow .18s,border-color .18s,background-color .18s}.room-item::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top right,rgba(var(--accent-rgb),.1),transparent 34%);opacity:.88}.room-item>*{position:relative;z-index:1}.room-item:hover{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(var(--accent-rgb),.08));transform:translateY(-2px);border-color:var(--accent-outline);box-shadow:0 18px 34px rgba(var(--accent-rgb),.14)}body.dark .room-item{background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.96));border-color:rgba(71,85,105,.38);box-shadow:0 16px 30px rgba(0,0,0,.22)}body.dark .room-item::before{background:radial-gradient(circle at top right,rgba(var(--accent-rgb),.18),transparent 36%);opacity:.72}body.dark .room-item:hover{border-color:var(--accent-outline);box-shadow:0 20px 36px rgba(0,0,0,.28),0 0 0 1px rgba(var(--accent-rgb),.12) inset}.room-item .info{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;width:100%}.room-owner-avatar-wrap{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--text-on-accent);font-weight:900;box-shadow:0 12px 24px rgba(var(--accent-rgb),.18),inset 0 1px 0 rgba(255,255,255,.24)}.room-owner-avatar-wrap img{width:100%;height:100%;display:block;object-fit:cover}.room-owner-avatar-fallback{font-size:.95rem;line-height:1}.room-item .room-item-primary{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0}.room-item .name{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:100%;font-weight:700;font-size:.98rem;color:var(--text-primary);line-height:1.38;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-item .room-owner-crown{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;color:#f59e0b;line-height:1}.room-owner-crown-svg{width:100%;height:100%;display:block;color:currentColor;filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .18))}.room-owner-crown-fill{fill:currentColor;stroke:currentColor;stroke-linejoin:round;stroke-width:1.2}.room-owner-crown-shine{fill:none;stroke:rgba(255,255,255,.78);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.room-item .room-item-meta{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}.room-item .creator-meta{color:var(--text-secondary);font-size:.82rem;font-weight:500;opacity:.82;line-height:1.45}.room-item .badge{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid var(--accent-outline);min-height:30px;padding:5px 10px;border-radius:999px;font-size:.76rem;color:var(--accent);font-weight:800;box-shadow:none}.room-item .lock{color:var(--accent);margin-left:0;display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:30px;padding:0 8px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-outline);box-shadow:0 10px 18px rgba(var(--accent-rgb),.12)}.room-item .quick-join{align-self:center;grid-column:3;min-width:0;padding:8px 14px;white-space:nowrap}.room-item[data-has-password=true]{border-color:rgba(var(--accent-rgb),.22)}body.dark .room-item .lock{box-shadow:0 10px 18px rgba(0,0,0,.22)}@media (max-width:560px){.room-item{grid-template-columns:42px minmax(0,1fr)}.room-owner-avatar-wrap{width:42px;height:42px}.room-item .quick-join{grid-column:1/-1;justify-self:stretch}}.create-form,.join-form{background:var(--bg-panel);border-radius:var(--radius-panel);padding:24px}.form-row{margin-bottom:16px}.form-row label{display:block;margin-bottom:6px;font-weight:500;color:var(--text-secondary)}.form-row input{width:100%;padding:12px 16px;border:1px solid var(--border-light);border-radius:var(--radius-pill);background:var(--input-bg);color:var(--text-primary)}.hidden-admin-join-row{margin-top:-6px;display:flex;flex-direction:column;gap:8px}.hidden-admin-join-row .hidden-admin-join-label{display:flex;align-items:center;gap:10px;margin-bottom:0;color:var(--text-primary);font-weight:600;line-height:1.5;cursor:pointer}.hidden-admin-join-row .hidden-admin-join-label input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--accent)}.hidden-admin-join-row .hidden-admin-join-text{display:inline-flex;align-items:center;min-width:0}.hidden-admin-join-row .hidden-admin-join-hint{padding-left:26px;color:var(--text-secondary);font-size:12px;line-height:1.6}.btn{padding:12px 28px;border:none;border-radius:var(--radius-pill);font-size:1rem;font-weight:500;cursor:pointer;background:var(--accent);color:#fff;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s}.btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 14px 28px rgba(var(--accent-rgb),.22)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-secondary{background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--border-light);transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.12)}