:root {
  --bg: #ffffff;
  --bg-2: #fbfbfd;
  --text: #14141a;
  --text-soft: #7a7a86;
  --card: #ffffff;
  --card-2: #f5f5f8;
  --card-3: #ececf1;
  --card-text: #14141a;
  --card-soft: #7a7a86;
  --muted: #f6f6f9;
  --muted-2: #eeeef3;
  --border: #ececef;
  --border-2: #e0e0e6;
  --accent: #ec4899;
  --accent-2: #ff8ac2;
  --accent-ring: #ff5fae;
  --accent-deep: #db2777;
  --accent-soft: #fdeaf3;
  --accent-ink: #ffffff;
  --danger: #ef4444;
  --danger-soft: #fdeaea;
  --top-h: 58px;
  --nav-h: 62px;
  --side-w: 240px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(20,20,50,.05), 0 10px 30px rgba(20,20,50,.06);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
}
* {
  box-sizing:border-box
}
html,
body {
  margin:0;
  padding:0
}
body {
  font-family:var(--font);
  background:radial-gradient(1000px 520px at 85% -8%,var(--accent-soft),transparent 60%),radial-gradient(760px 420px at 0% 0%,#fff0f7,transparent 55%),var(--bg);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font-family:inherit;
  cursor:pointer
}
img {
  display:block
}
input,
textarea,
select {
  font-family:inherit;
  font-size:15px
}
::placeholder {
  color:#161515;
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
.topbar {
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:12px;
  height:var(--top-h);
  padding:0 16px;
  background:#ffffffd1;
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border)
}
.brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 22px;
  font-weight: bold;
}
.brand .logo {
  display:block
}
.brandname {
  font-weight:900;
  font-size:20px;
  letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--accent-2),var(--accent-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.topbar .spacer {
  flex:1
}
#topbar-actions {
  display:flex;
  align-items:center;
  gap:6px
}
.container {
  max-width:1120px;
  margin:0 auto;
  padding:20px 16px calc(24px + var(--nav-h))
}
.ad-slot {
  margin:0 0 18px;
  border-radius:var(--radius-sm);
  border:1px dashed var(--border-2);
  background:var(--muted);
  overflow:hidden
}
.ad-slot:empty {
  display:none
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border-2);
  background:var(--card);
  color:var(--text);
  padding:10px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  transition:transform .06s ease,background .15s ease,border-color .15s ease,box-shadow .15s
}
.btn:active {
  transform:scale(.97)
}
.btn:hover {
  background:var(--card-2)
}
.btn.primary {
  background:var(--text);
  color:#fff;
  border-color:var(--text)
}
.btn.primary:hover {
  background:#000
}
.btn.green {
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
  font-weight:700;
  box-shadow:0 6px 18px #ec489947
}
.btn.green:hover {
  background:var(--accent-deep)
}
.btn.danger {
  background:var(--danger);
  color:#fff;
  border-color:var(--danger)
}
.btn.danger:hover {
  background:#dc2626
}
.btn.ghost {
  background:transparent;
  border-color:transparent;
  color:var(--text-soft)
}
.btn.ghost:hover {
  background:var(--card-2);
  color:var(--text)
}
.btn.small {
  padding:6px 12px;
  font-size:13px
}
.btn.block {
  width:100%
}
.btn[disabled] {
  opacity:.5;
  pointer-events:none
}
.field {
  margin-bottom:14px
}
.field label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-soft);
  margin-bottom:6px
}
.input,
textarea.input,
select.input {
  width:100%;
  padding:11px 14px;
  border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--text)
}
.input:focus {
  border-color:var(--accent)
}
textarea.input {
  resize:vertical;
  min-height:80px
}
.pw-field {
  position:relative
}
.pw-field .input {
  padding-right:44px
}
.pw-eye {
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  font-size:17px;
  color:var(--text-soft);
  border-radius:8px
}
.pw-eye:hover {
  background:var(--card-2)
}
.auth-wrap {
  max-width:400px;
  margin:7vh auto;
  padding:0 16px
}
.auth-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow)
}
.auth-brand {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin-bottom:14px
}
.auth-card h1 {
  margin:0 0 4px;
  font-size:24px;
  letter-spacing:-.02em;
  text-align:center
}
.auth-card p.sub {
  margin:0 0 20px;
  color:var(--card-soft);
  font-size:14px;
  text-align:center
}
.auth-tabs {
  display:flex;
  gap:4px;
  margin-bottom:20px;
  background:#131313;
  padding:4px;
  border-radius:999px
}
.auth-tabs button {
  flex:1;
  border:none;
  background:#111;
  color:#fff;
  padding:8px;
  border-radius:999px;
  font-weight:600
}
.auth-tabs button.active {
  background:var(--accent);
  color:var(--accent-ink)
}
.landing {
  min-height:calc(100dvh - var(--top-h));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px 60px
}
.hero {
  max-width:760px;
  text-align:center
}
.hero .badge-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent-soft);
  color:var(--accent-deep);
  font-weight:700;
  font-size:13px;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:22px
}
.hero h1 {
  font-size:clamp(38px,8vw,68px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0 0 18px;
  font-weight:900
}
.hero h1 .grad {
  background:linear-gradient(120deg,var(--accent-2),var(--accent-deep));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.hero p.lead {
  font-size:clamp(16px,3.5vw,20px);
  color:var(--text-soft);
  max-width:540px;
  margin:0 auto 30px
}
.hero .cta {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap
}
.hero .cta .btn {
  padding:14px 26px;
  font-size:16px
}
.hero .features {
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:46px
}
.hero .feat {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text-soft);
  font-size:14px;
  font-weight:600
}
.hero .feat .fico {
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:24px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow)
}
.section-title {
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  margin:4px 0 16px
}
.chips {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:12px;
  margin-bottom:8px;
  scrollbar-width:none
}
.chips::-webkit-scrollbar {
  display:none
}
.chip {
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border-2);
  font-size:14px;
  font-weight:600;
  color:var(--text-soft)
}
.chip.active {
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent)
}
.room-list {
  display:flex;
  flex-direction:column;
  gap:12px
}
.room-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .12s ease,border-color .12s ease
}
.room-row:hover {
  transform:translateY(-2px);
  border-color:var(--accent-2)
}
.room-row .room-av {
  position:relative;
  width:66px;
  height:66px;
  flex:0 0 auto
}
.room-row .room-av img,
.room-row .room-av .ph {
  width:66px;
  height:66px;
  border-radius:50%;
  object-fit:cover;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  display:grid;
  place-items:center;
  color:#fff;
  font-size:26px
}
.room-row .room-av .live-ring {
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid var(--accent);
  animation:pulse 1.6s ease-out infinite
}
.room-row .r-main {
  flex:1;
  min-width:0
}
.room-row .r-cat {
  font-size:11px;
  font-weight:800;
  color:var(--accent-deep);
  text-transform:uppercase;
  letter-spacing:.05em
}
.room-row h3 {
  margin:2px 0;
  font-size:17px;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.room-row .desc {
  color:var(--card-soft);
  font-size:13px;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.room-row .meta {
  display:flex;
  gap:14px;
  font-size:13px;
  color:var(--card-soft);
  margin-top:4px
}
.room-row .r-join {
  flex:0 0 auto
}
.empty {
  text-align:center;
  color:var(--text-soft);
  padding:40px 16px
}
.cams-section {
  margin-bottom:26px
}
.cams-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px
}
.cam-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px
}
@media(min-width:620px) {
  .cam-grid {
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr))
  }
}
.cam-empty {
  grid-column:1 / -1;
  color:#cdcdcd;
  background:#28282b;
  border:1px dashed var(--border-2);
  border-radius:var(--radius-sm);
  padding:22px;
  text-align:center;
  font-size:14px
}
.cam-tile {
  display:flex;
  flex-direction:column;
  gap:6px
}
.cam-tile .cam-thumb {
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  border:1px solid var(--border);
  transition:transform .12s ease
}
.cam-tile:hover .cam-thumb {
  transform:translateY(-2px)
}
.cam-tile .cam-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}
.cam-tile .cam-thumb .ph {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:34px;
  color:#fff;
  opacity:.85
}
.cam-tile .live-badge {
  position:absolute;
  top:7px;
  left:7px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#e5202e;
  color:#fff;
  font-size:10px;
  font-weight:800;
  padding:3px 7px;
  border-radius:999px
}
.cam-tile .live-badge .live-dot,
.live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  animation:blink 1.2s infinite
}
.room-row .live-dot {
  background:var(--accent)
}
@keyframes blink {
  50% {
    opacity:.35
  }
}
.cam-tile .watch-badge {
  position:absolute;
  bottom:7px;
  right:7px;
  background:#0009;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px
}
.cam-tile .you-badge {
  position:absolute;
  top:7px;
  right:7px;
  background:var(--accent);
  color:#fff;
  font-size:10px;
  font-weight:800;
  padding:3px 7px;
  border-radius:999px
}
.cam-tile .cam-name {
  font-size:13px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.room-head {
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px
}
.room-head .room-img {
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  background:var(--card-2);
  flex:0 0 auto
}
.room-head .info h2 {
  margin:0;
  font-size:22px;
  letter-spacing:-.02em
}
.room-head .info p {
  margin:4px 0 0;
  color:var(--text-soft);
  font-size:14px
}
.room-head .cat-badge {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  color:var(--accent-deep);
  background:var(--accent-soft);
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:6px
}
.room-body {
  display:grid;
  grid-template-columns:1fr;
  gap:20px
}
@media(min-width:860px) {
  .room-body {
    grid-template-columns:1.4fr 1fr
  }
}
.stage {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow)
}
.stage h4 {
  margin:0 0 14px;
  font-size:13px;
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.05em
}
.speakers-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:18px 10px
}
.pax {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  position:relative
}
.avatar-wrap {
  position:relative;
  width:60px;
  height:60px
}
.avatar {
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--card-2);
  object-fit:cover;
  border:2px solid var(--border-2)
}
.pax.speaking .avatar {
  border-color:var(--accent);
  box-shadow:0 0 16px var(--accent-soft)
}
.pax.speaking .avatar-wrap:after {
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--accent);
  animation:pulse 1.4s ease-out infinite
}
@keyframes pulse {
  0% {
    transform:scale(1);
    opacity:.8
  }
  to {
    transform:scale(1.28);
    opacity:0
  }
}
.pax .name {
  font-size:12px;
  font-weight:600;
  max-width:74px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.pax .role-tag {
  font-size:10px;
  color:#fff;
  background:var(--accent);
  border-radius:999px;
  padding:1px 6px;
  font-weight:700
}
.pax .mic-badge {
  position:absolute;
  bottom:16px;
  right:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  color:var(--text);
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  font-size:11px;
  border:1px solid var(--border-2)
}
.pax .mic-badge.on {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.pax .mic-badge.muted-mod {
  background:var(--danger);
  color:#fff;
  border-color:var(--danger)
}
.pax .mod-menu {
  position:absolute;
  top:0;
  right:-4px
}
.mod-btn {
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--border-2);
  background:#fff;
  color:var(--text);
  font-size:12px;
  display:none
}
.pax:hover .mod-btn {
  display:block
}
.menu {
  position:absolute;
  z-index:30;
  right:0;
  top:26px;
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  padding:6px;
  min-width:150px
}
.menu button {
  display:flex;
  width:100%;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:none;
  background:transparent;
  color:var(--text);
  border-radius:8px;
  font-size:14px;
  text-align:left
}
.menu button:hover {
  background:var(--card-2)
}
.menu button.danger {
  color:var(--danger)
}
.speaking-bar {
  position:fixed;
  left:0;
  right:0;
  bottom:calc(var(--nav-h) + 84px);
  z-index:30;
  display:flex;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  flex-wrap:wrap;
  pointer-events:none
}
.speaking-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 4px 20px #ec489966
}
.speaking-pill .wave {
  display:inline-flex;
  gap:2px;
  align-items:flex-end;
  height:12px
}
.speaking-pill .wave i {
  width:2px;
  background:#fff;
  border-radius:2px;
  animation:wave 1s ease-in-out infinite
}
.speaking-pill .wave i:nth-child(2) {
  animation-delay:.15s
}
.speaking-pill .wave i:nth-child(3) {
  animation-delay:.3s
}
@keyframes wave {
  0%,
  to {
    height:4px
  }
  50% {
    height:12px
  }
}
.dock {
  position:fixed;
  left:0;
  right:0;
  bottom:var(--nav-h);
  z-index:35;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 16px;
  background:#ffffffe6;
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border)
}
.mic-btn {
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:var(--card-3);
  color:var(--text);
  font-size:22px;
  box-shadow:var(--shadow)
}
.mic-btn.live {
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 24px var(--accent-soft)
}
.mic-btn.blocked {
  background:var(--muted-2);
  color:var(--text-soft)
}
.dock .status {
  font-size:13px;
  color:var(--text-soft)
}
.chat {
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  height:440px;
  box-shadow:var(--shadow)
}
.chat .messages {
  flex:1;
  overflow-y:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.msg {
  display:flex;
  gap:8px;
  align-items:flex-start
}
.msg img {
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--card-2)
}
.msg .bubble {
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 12px;
  max-width:82%
}
.msg .who {
  font-size:12px;
  font-weight:700;
  margin-bottom:2px;
  color:var(--accent-deep)
}
.msg .who a {
  color:var(--accent-deep)
}
.msg .body {
  font-size:14px;
  word-break:break-word;
  color:var(--card-text)
}
.msg .body a {
  color:var(--accent-deep);
  text-decoration:underline
}
.chat .typing {
  height:18px;
  padding:0 14px;
  font-size:12px;
  color:var(--text-soft)
}
.chat .compose {
  display:flex;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--border);
  background:var(--bg-2)
}
.chat .compose input {
  flex:1;
  border:1px solid var(--border-2);
  border-radius:999px;
  padding:10px 14px;
  background:#fff;
  color:var(--text)
}
.chat-tools {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  background:var(--bg-2)
}
.chat-tools .t {
  font-size:13px;
  color:var(--text-soft);
  font-weight:600
}
.tc-wrap {
  display:flex;
  flex-direction:column;
  height:calc(100dvh - var(--top-h) - var(--nav-h));
  max-width:820px;
  margin:0 auto
}
.tc-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border)
}
.tc-head .tc-title {
  font-weight:800;
  font-size:18px
}
.tc-head .tc-online {
  margin-left:auto;
  font-size:13px;
  color:#fff;
  font-weight:700;
  background:rgb(199, 4, 104);
  padding:4px 10px;
  border-radius:999px
}
.tc-messages {
  flex:1;
  overflow-y:auto;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.tc-msg {
  display:flex;
  gap:10px;
  align-items:flex-start
}
.tc-msg img {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--card-2);
  flex:0 0 auto
}
.tc-msg .tc-b .who {
  font-size:12px;
  font-weight:700;
  color:var(--accent-deep)
}
.tc-msg .tc-b .who a {
  color:var(--accent-deep)
}
.tc-msg .tc-b .txt {
  font-size:15px;
  color:#bebdbe;
  word-break:break-word
}
.tc-sys {
  text-align:center;
  font-size:12px;
  color:var(--text-soft)
}
.tc-sys span {
  background:#1b1b1c;
  padding:4px 12px;
  border-radius:999px
}
.tc-typing {
  height:18px;
  padding:0 16px;
  font-size:12px;
  color:var(--text-soft)
}
.tc-compose {
  display:flex;
  gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:#000;
}
.tc-compose input {
  flex:1;
  border:1px solid var(--border-2);
  border-radius:999px;
  padding:12px 16px;
  background:#fff
}
.profile-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  max-width:520px;
  margin:0 auto
}
.profile-card .big-avatar {
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--card-2);
  object-fit:cover;
  margin-bottom:14px;
  border:3px solid var(--accent-soft)
}
.profile-card h2 {
  margin:0;
  font-size:24px
}
.profile-card .handle {
  color:var(--card-soft);
  font-size:14px
}
.profile-card .bio {
  margin:14px 0 8px;
  color:var(--card-soft)
}
.profile-card .plink {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent-deep);
  font-weight:700;
  font-size:14px;
  margin-bottom:12px;
  word-break:break-all
}
.profile-card .counts {
  display:flex;
  gap:24px;
  margin:16px 0
}
.profile-card .counts b {
  font-size:18px
}
.profile-card .counts span {
  color:var(--card-soft);
  font-size:13px
}
.profile-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.tag {
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  background:var(--card-2);
  color:var(--text)
}
.tag.admin {
  background:var(--text);
  color:#fff
}
.tag.moderator {
  background:var(--accent-soft);
  color:var(--accent-deep)
}
.tag.banned {
  background:var(--danger-soft);
  color:var(--danger)
}
.tabs {
  display:flex;
  gap:6px;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
  margin-bottom:18px
}
.tabs button {
  border:none;
  background:transparent;
  padding:10px 14px;
  font-weight:600;
  color:var(--text-soft);
  border-bottom:2px solid transparent;
  white-space:nowrap
}
.tabs button.active {
  color:var(--text);
  border-bottom-color:var(--accent)
}
.table {
  width:100%;
  border-collapse:collapse;
  font-size:14px
}
.table th,
.table td {
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border)
}
.table th {
  color:var(--text-soft);
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em
}
.room-thumb-sm {
  width:40px;
  height:40px;
  border-radius:8px;
  object-fit:cover;
  background:var(--card-2)
}
.inbox-btn {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  color:var(--text)
}
.inbox-btn:hover {
  background:var(--card-2)
}
.inbox-btn .ico {
  font-size:20px
}
.inbox-btn .badge,
.nav-badge {
  position:absolute;
  top:2px;
  right:2px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:800;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:2px solid var(--bg)
}
.conv-list {
  display:flex;
  flex-direction:column;
  gap:4px
}
.conv {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:var(--radius-sm);
  background:var(--card);
  border:1px solid var(--border);
  cursor:pointer
}
.conv:hover {
  border-color:var(--border-2)
}
.conv-av {
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  background:var(--card-2);
  flex:0 0 auto
}
.conv-main {
  flex:1;
  min-width:0
}
.conv-top {
  display:flex;
  align-items:center;
  gap:8px
}
.conv-name {
  font-weight:700;
  font-size:15px
}
.conv-unread {
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:1px 7px;
  border-radius:999px
}
.conv-snip {
  color:var(--text-soft);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.conv-menu-btn {
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--text-soft);
  font-size:18px
}
.conv-menu-btn:hover {
  background:var(--card-2);
  color:var(--text)
}
.conv .menu-pop {
  top:48px;
  right:12px
}
.dm-wrap {
  display:flex;
  flex-direction:column;
  height:calc(100dvh - var(--top-h) - var(--nav-h));
  max-width:720px;
  margin:0 auto
}
.dm-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  position:relative
}
.dm-head .cam-ic {
  background:var(--card-2);
  color:var(--text)
}
.dm-peer {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px
}
.dm-peer img {
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  background:var(--card-2)
}
.dm-head .menu-pop {
  top:52px;
  right:14px
}
.dm-messages {
  flex:1;
  overflow-y:auto;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:8px
}
.dm-msg {
  display:flex
}
.dm-msg.me {
  justify-content:flex-end
}
.dm-bubble {
  max-width:78%;
  padding:9px 13px;
  border-radius:16px;
  font-size:15px;
  word-break:break-word
}
.dm-msg.them .dm-bubble {
  background:var(--card-2);
  border:1px solid var(--border);
  border-bottom-left-radius:5px
}
.dm-msg.me .dm-bubble {
  background:var(--accent);
  color:#fff;
  border-bottom-right-radius:5px
}
.dm-msg .dm-bubble a {
  color:inherit;
  text-decoration:underline
}
.dm-compose {
  display:flex;
  gap:8px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--bg-2)
}
.dm-compose input {
  flex:1;
  border:1px solid var(--border-2);
  border-radius:999px;
  padding:12px 16px;
  background:#fff;
  color:var(--text)
}
.dm-compose input:disabled {
  opacity:.6
}
.cam-room {
  position:relative;
  width:100%;
  height:calc(100dvh - var(--top-h) - var(--nav-h));
  background:#000;
  overflow:hidden
}
.cam-stage {
  position:absolute;
  inset:0
}
.cam-video-wrap {
  position:absolute;
  inset:0;
  background:#000
}
#cam-video {
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  display:block
}
.cam-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#cfcfd6;
  font-size:14px;
  pointer-events:none;
  text-align:center
}
.cam-topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:6;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:linear-gradient(to bottom,#0009,#0000)
}
.cam-ic {
  width:38px;
  height:38px;
  flex:0 0 auto;
  border:none;
  border-radius:50%;
  background:#00000073;
  color:#fff;
  font-size:18px;
  display:grid;
  place-items:center;
  backdrop-filter:blur(6px)
}
.cam-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#00000073;
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:13px;
  font-weight:700;
  border:none
}
.cam-pill.live {
  color:#ff5a75;
  animation:blink 1.4s infinite
}
.cam-pill.stop {
  background:#e5202e;
  cursor:pointer
}
.cam-unmute {
  position:absolute;
  bottom:calc(50% + 20px);
  left:50%;
  transform:translate(-50%);
  z-index:6;
  background:#000000b3;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:600
}
.cam-chat {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  height:52%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:none;
  border:none;
  border-radius:0;
  pointer-events:none;
  box-shadow:none
}
.cam-chat .messages {
  flex:0 1 auto;
  max-height:100%;
  overflow-y:auto;
  padding:12px 12px 6px;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 34px)
}
.cam-chat .msg .bubble {
  background:#0000006b;
  border:none;
  backdrop-filter:blur(3px);
  border-radius:12px;
  padding:6px 10px;
  max-width:88%
}
.cam-chat .msg .who,
.cam-chat .msg .who a {
  color:#ffd0e6
}
.cam-chat .msg .body {
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.cam-chat .msg .body a {
  color:#9be7ff
}
.cam-chat .typing {
  color:#fff;
  padding:0 14px;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none
}
.cam-chat .compose {
  pointer-events:auto;
  display:flex;
  gap:8px;
  padding:10px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.3) 70%,transparent);
  border:none
}
.cam-chat .compose input {
  flex:1;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:12px 16px;
  background:#ffffff24;
  color:#fff
}
.cam-chat .compose input::placeholder {
  color:#ffffffb3
}
.cam-send {
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  padding:0;
  font-size:18px
}
@media(min-width:860px) {
  .cam-room {
    display:flex;
    gap:16px;
    padding:16px;
    height:calc(100dvh - var(--top-h) - var(--nav-h));
    background:transparent
  }
  .cam-stage {
    position:relative;
    flex:1;
    min-width:0;
    height:100%
  }
  .cam-video-wrap {
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border)
  }
  .cam-chat {
    position:relative;
    z-index:1;
    width:360px;
    flex:0 0 360px;
    height:100%;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    justify-content:flex-start;
    overflow:hidden;
    pointer-events:auto;
    box-shadow:var(--shadow)
  }
  .cam-chat .messages {
    flex:1;
    max-height:none;
    padding:14px;
    -webkit-mask-image:none;
    mask-image:none
  }
  .cam-chat .msg .bubble {
    background:var(--card-2);
    border:1px solid var(--border);
    backdrop-filter:none
  }
  .cam-chat .msg .who,
  .cam-chat .msg .who a {
    color:var(--accent-deep)
  }
  .cam-chat .msg .body {
    color:var(--card-text);
    text-shadow:none
  }
  .cam-chat .msg .body a {
    color:var(--accent-deep)
  }
  .cam-chat .typing {
    color:var(--text-soft);
    text-shadow:none
  }
  .cam-chat .compose {
    background:var(--bg-2);
    border-top:1px solid var(--border);
    padding:10px
  }
  .cam-chat .compose input {
    background:#fff;
    border-color:var(--border-2);
    color:var(--text)
  }
  .cam-chat .compose input::placeholder {
    color:#a6a6b0
  }
}
.bottom-nav {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:45;
  height:var(--nav-h);
  display:flex;
  align-items:stretch;
  background:#ffffffeb;
  backdrop-filter:saturate(180%) blur(16px);
  padding-bottom:env(safe-area-inset-bottom)
}
.nav-item {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#fff;
  font-size:11px;
  font-weight:600
}
.nav-item .ni-ico {
  font-size:20px;
  filter:grayscale(1) opacity(.7)
}
.nav-item.active {
  color:#fff;
}
.nav-item.active .ni-ico {
  filter:none
}
.nav-item .nav-badge {
  top:6px;
  right:calc(50% - 22px)
}
.toast-wrap {
  position:fixed;
  top:72px;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:60;
  pointer-events:none
}
.toast {
  background:var(--text);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  box-shadow:var(--shadow);
  animation:slidein .2s ease
}
.toast.danger {
  background:var(--danger)
}
@keyframes slidein {
  0% {
    transform:translateY(-8px);
    opacity:0
  }
}
.avatar-menu {
  position:relative
}
.avatar-menu .av {
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--card-2);
  object-fit:cover;
  border:1px solid var(--border-2);
  cursor:pointer
}
.menu-pop {
  position:absolute;
  right:0;
  top:46px;
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  padding:6px;
  min-width:180px;
  z-index:50
}
.menu-pop a,
.menu-pop button {
  display:flex;
  width:100%;
  gap:8px;
  align-items:center;
  padding:9px 11px;
  border:none;
  background:transparent;
  color:var(--text);
  border-radius:8px;
  font-size:14px;
  text-align:left;
  font-weight:500
}
.menu-pop a:hover,
.menu-pop button:hover {
  background:var(--card-2)
}
.menu-pop .sep {
  height:1px;
  background:var(--border);
  margin:4px 0
}
.menu-pop .who {
  padding:8px 11px;
  font-size:13px;
  color:var(--text-soft)
}
.menu-pop button.danger {
  color:var(--danger)
}
.hidden {
  display:none!important
}
.row {
  display:flex;
  gap:8px;
  align-items:center
}
.link {
  color:var(--accent-deep);
  font-weight:600
}
.spinner {
  width:28px;
  height:28px;
  border:3px solid var(--border-2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:40px auto
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }
}
.brandname .tld {
  color:var(--accent);
  -webkit-text-fill-color:var(--accent);
  font-weight:800
}
.nav-item .ni-ico {
  width:24px;
  height:24px;
  filter:none;
  color:var(--text-soft)
}
.logo {
  border-radius:8px
}
.cam-grid {
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px
}
.cam-tile.empty-slot {
  opacity:.5;
  pointer-events:none
}
.cam-tile.empty-slot .cam-thumb {
  background:var(--muted-2)
}
.cam-tile {
  cursor:pointer
}
.chat-fab {
  display:block;
  width:100%;
  margin:18px 0 4px;
  padding:14px;
  border:none;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:15px;
  box-shadow:0 8px 22px #ec489952
}
.chat-fab:active {
  transform:scale(.98)
}
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:80;
  background:#0a0a0fb8;
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  animation:fadein .15s ease
}
@keyframes fadein {
  0% {
    opacity:0
  }
}
.cam-modal {
  width:100%;
  max-width:1000px;
  max-height:92dvh;
  display:flex;
  gap:0;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px #00000080
}
.cm-video-wrap {
  position:relative;
  flex:1;
  min-width:0;
  background:#000;
  display:flex
}
#cm-video {
  width:100%;
  height:100%;
  max-height:92dvh;
  object-fit:contain;
  background:#000
}
.cm-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ccc;
  font-size:14px;
  pointer-events:none
}
.cm-top {
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
  z-index:3
}
.cm-top .cam-ic {
  pointer-events:auto
}
.cm-chat {
  width:320px;
  flex:0 0 320px;
  background:var(--card);
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--border)
}
.cm-messages {
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px
}
.cm-compose {
  display:flex;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--border);
  background:var(--bg-2)
}
.cm-compose input {
  flex:1;
  border:1px solid var(--border-2);
  border-radius:999px;
  padding:10px 14px;
  background:#fff
}
@media(max-width:760px) {
  .cam-modal {
    flex-direction:column;
    max-width:520px
  }
  .cm-video-wrap {
    aspect-ratio:3/4;
    flex:none;
    width:100%
  }
  #cm-video {
    height:100%
  }
  .cm-chat {
    width:100%;
    flex:1 1 auto;
    border-left:none;
    border-top:1px solid var(--border);
    min-height:34dvh
  }
}
.chat-modal {
  width:100%;
  max-width:560px;
  height:82dvh;
  background:var(--bg);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px #0006
}
.chat-modal .tc-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border)
}
.chat-modal .tc-messages {
  flex:1;
  overflow-y:auto;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.chat-modal .tc-compose {
  display:flex;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:var(--bg-2)
}
.chat-modal .tc-compose input {
  flex:1;
  border:1px solid var(--border-2);
  border-radius:999px;
  padding:12px 16px;
  background:#fff
}
.sound-gate {
  position:fixed;
  left:50%;
  transform:translate(-50%);
  bottom:calc(var(--nav-h) + 92px);
  z-index:36;
  border:none;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:10px 18px;
  box-shadow:0 8px 22px #ec489959
}
.cam-tile.self .cam-thumb {
  background:#000
}
.cam-tile.self video[data-selfview] {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1)
}
.cam-stop-mini {
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translate(-50%);
  z-index:3;
  border:none;
  border-radius:999px;
  background:#e5202e;
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:5px 12px;
  box-shadow:0 4px 12px #00000059
}
.cam-tile.self {
  outline:2px solid var(--accent);
  border-radius:var(--radius-sm)
}
.cam-grid {
  grid-template-columns:repeat(2,1fr)!important;
  gap:12px
}
.cam-tile .cam-thumb {
  aspect-ratio:3 / 4;
  border-radius:16px
}
.cam-tile .cam-name-ov {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:22px 12px 10px;
  color:#fff;
  font-weight:700;
  font-size:15px;
  z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.cam-tile .watch-badge {
  z-index:2
}
.cam-tile.self {
  outline:3px solid var(--accent)
}
.cam-name-ov {
  pointer-events:none
}
@media(min-width:900px) {
  .cam-tile .cam-thumb {
    aspect-ratio:1 / 1
  }
}
:root {
  --bg: #0b0b0f;
  --bg-2: #131318;
  --text: #f2f2f5;
  --text-soft: #9a9aa6;
  --card: #17171d;
  --card-2: #202028;
  --card-3: #2b2b35;
  --card-text: #f2f2f5;
  --card-soft: #9a9aa6;
  --muted: #16161c;
  --muted-2: #20202a;
  --border: #262630;
  --border-2: #34343f;
  --accent: #ec4899;
  --accent-2: #ff8ac2;
  --accent-ring: #ff5fae;
  --accent-deep: #ff6fb1;
  --accent-soft: rgba(236,72,153,.16);
  --accent-ink: #ffffff;
  --danger: #f0555b;
  --danger-soft: rgba(240,85,91,.16);
  --shadow: 0 2px 8px rgba(0,0,0,.45), 0 12px 40px rgba(0,0,0,.4)
}
body {
  background:radial-gradient(1000px 520px at 85% -8%,rgba(236,72,153,.14),transparent 60%),radial-gradient(760px 420px at 0% 0%,rgba(236,72,153,.08),transparent 55%),var(--bg)
}
.topbar {
  background:#0b0b0fcc
}
.bottom-nav {
  background:#0b0b0feb
}
.dock {
  background:#0b0b0fe6
}
.input,
textarea.input,
select.input,
.chat .compose input,
.cm-compose input,
.tc-compose input,
.dm-compose input,
.chat-modal .tc-compose input {
  background:var(--muted-2);
  color:var(--text);
  border-color:var(--border-2)
}
option {
  background:var(--card);
  color:var(--text)
}
.menu,
.menu-pop {
  background:var(--card)
}
.mic-badge,
.mod-btn {
  background:var(--card-2);
  color:var(--text)
}
.toast {
  background:var(--card-3);
  color:#fff
}
.btn.primary {
  background:#fff;
  color:#111;
  border-color:#fff
}
.ad-slot {
  border-color:var(--border-2)
}
.cam-modal.video-only {
  max-width:760px;
  width:100%;
  background:#000;
  border-radius:18px;
  overflow:hidden
}
.cam-modal.video-only .cm-video-wrap {
  width:100%;
  aspect-ratio:3 / 4;
  max-height:92dvh
}
.cam-modal.video-only #cm-video {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000
}
@media(min-width:760px) {
  .cam-modal.video-only {
    max-width:520px
  }
  .cam-modal.video-only .cm-video-wrap {
    aspect-ratio:3 / 4
  }
}
.cam-tile .cam-thumb img[data-camimg] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  background:transparent
}
.cam-tile .cam-thumb .ph {
  z-index:0
}
#app {
  min-height:calc(100dvh - var(--top-h))
}
.ad-slot:not(:empty) {
  min-height:96px
}
.cams-section {
  min-height:60dvh
}
.cam-tile .cam-thumb {
  background:var(--muted-2)
}
.side-nav {
  display:none
}
@media(min-width:1000px) {
  .side-nav {
    display:flex;
    flex-direction:column;
    gap:6px;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--side-w);
    z-index:46;
    padding:16px 12px;
    background:var(--bg-2);
    border-right:1px solid var(--border)
  }
  .side-nav.hidden {
    display:none
  }
  .side-brand {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px 14px
  }
  .side-items {
    display:flex;
    flex-direction:column;
    gap:4px
  }
  .side-item {
    flex-direction:row!important;
    justify-content:flex-start!important;
    gap:12px!important;
    padding:12px 14px;
    border-radius:12px;
    font-size:15px!important;
    font-weight:600
  }
  .side-item .ni-ico {
    width:22px;
    height:22px
  }
  .side-item span {
    color:inherit
  }
  .side-item:hover {
    background:var(--card-2)
  }
  .side-item.active {
    background:var(--accent-soft);
    color:var(--accent-deep)
  }
  .side-item .nav-badge {
    position:static;
    margin-left:auto;
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    padding:0 5px
  }
  .side-sep {
    height:1px;
    background:var(--border);
    margin:10px 6px
  }
  .side-foot {
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 8px 4px;
    border-top:1px solid var(--border)
  }
  .side-user {
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0;
    padding:6px;
    border-radius:10px;
    color:var(--text);
    font-weight:600
  }
  .side-user:hover {
    background:var(--card-2)
  }
  .side-user img {
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    background:var(--card-2);
    border:1px solid var(--border-2);
    flex:none
  }
  .side-user .su-name {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .side-logout {
    flex:none;
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid var(--border-2);
    background:var(--card);
    color:var(--text-soft);
    display:grid;
    place-items:center
  }
  .side-logout:hover {
    color:var(--danger);
    border-color:var(--danger)
  }
  .topbar,
  #app {
    margin-left:var(--side-w)
  }
  .bottom-nav {
    display:none!important
  }
  .container {
    max-width:1000px;
    padding-bottom:28px
  }
  .cam-grid {
    grid-template-columns:repeat(3,1fr)!important;
    max-width:860px
  }
  .dock,
  .speaking-bar {
    left:var(--side-w)
  }
  .sound-gate {
    left:calc(50% + 120px)
  }
  .topbar .brand {
    display:none
  }
}
.cam-float {
  position:fixed;
  z-index:90;
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:14px;
  overflow:hidden;
  touch-action:none;
  user-select:none
}
.cf-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 8px 8px 12px;
  background:#040404;
  border-bottom:1px solid var(--border);
  cursor:grab
}
.cf-head:active {
  cursor:grabbing
}
.cf-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff3b5c;
  box-shadow:0 0 0 3px #ff3b5c40;
  flex:none
}
.cf-name {
  font-weight:700;
  font-size:13px;
  color:#fff;
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.cf-views {
  font-size:12px;
  color:var(--text-soft)
}
.cf-ic {
  width:30px;
  height:30px;
  border-radius:8px;
  border:none;
  background:#ffffff14;
  color:#fff;
  font-size:14px;
  display:grid;
  place-items:center;
  cursor:pointer
}
.cf-ic:hover {
  background:#ffffff29
}
.cf-ic.danger {
  background:#f0555b2e;
  color:#ff9098
}
.cf-body {
  position:relative;
  background:#fff;
  aspect-ratio:4 / 3
}
#cf-video {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#131212;
  display:block
}
.cf-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#bbb;
  font-size:13px;
  pointer-events:none
}
.cam-float .cam-unmute {
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translate(-50%)
}
.cam-float.expanded {
  left:8px!important;
  right:8px;
  top:8px!important;
  bottom:8px;
  width:auto!important;
  height:auto;
  border-radius:16px
}
.cam-float.expanded .cf-body {
  aspect-ratio:auto;
  height:calc(100% - 47px)
}
.cam-float.expanded #cf-video {
  height:100%
}
@media(min-width:1000px) {
  .cam-float.expanded {
    left:calc(var(--side-w) + 24px)!important;
    right:24px
  }
}
.brand-logo {
  height:30px;
  width:auto;
  display:block
}
.side-brand .brand-logo {
  height:34px
}
@media(min-width:1000px) {
  .topbar .brand {
    display:none
  }
}
.tip-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:6px auto 2px;
  background:linear-gradient(120deg,#ff8ac2,#ec4899);
  color:#fff!important;
  border:none;
  font-weight:800;
  box-shadow:0 6px 18px #ec489959
}
.tip-btn:hover {
  filter:brightness(1.05)
}
:root {
  --bg: #1a1616;
  --bg-2: #060606;
  --text: #eaeaec;
  --text-soft: #e2e2e3;
  --card: #000;
  --card-2: #201f20;
  --card-3: #090809;
  --card-text: #fff;
  --card-soft: #6c6c78;
  --muted: #f7f7fa;
  --muted-2: #f1f1f5;
  --border: #161616;
  --border-2: #000;
  --accent: #F9007F;
  --accent-2: #ff92cd;
  --accent-ring: #FF69B4;
  --accent-deep: #ff00bf;
  --accent-soft: rgba(255,105,180,.14);
  --accent-ink: #ffffff;
  --danger: #e5484d;
  --danger-soft: rgba(229,72,77,.12);
  --shadow: 0 2px 8px rgba(20,20,50,.06), 0 12px 40px rgba(20,20,50,.1);
}
body {
  background:radial-gradient(1000px 520px at 85% -8%,rgb(0, 0, 0),black 60%),radial-gradient(760px 420px at 0% 0%,rgb(0, 0, 0),black 55%),#fff;
  color:#fff;
}
.topbar {
  background:#ffffffd9;
  border-bottom:1px solid var(--border)
}
.bottom-nav {
  background:#000;
}
.dock {
  background:#ffffffeb
}
.input,
textarea.input,
select.input,
.chat .compose input,
.cm-compose input,
.tc-compose input,
.dm-compose input,
.chat-modal .tc-compose input {
  background:#fff;
  color:#090909;
  border-color:var(--border-2)
}
option {
  background:#fff;
  color:var(--text)
}
.menu,
.menu-pop {
  background:#0b0b0b;
  border:1px solid var(--border);
  box-shadow:var(--shadow)
}
.mic-badge,
.mod-btn {
  background:#fff;
  color:var(--text)
}
.toast {
  background:#17171d;
  color:#fff
}
.btn.primary {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.tag.admin {
  background:var(--accent);
  color:#fff
}
.nav-item .ni-ico {
  filter:none;
  color:#fff;
}
.nav-item.active .ni-ico {
  color:#fff;
}
.pw-eye {
  color:#000;
}
.busy-pop {
  position:fixed;
  inset:0;
  z-index:200;
  background:#fff0f8d9;
  backdrop-filter:blur(6px);
  display:grid;
  place-items:center;
  padding:20px
}
.busy-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:30px 26px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 24px 70px #d81b8333
}
.busy-emoji {
  font-size:46px;
  margin-bottom:6px
}
.busy-card h2 {
  font-size:20px;
  margin:6px 0 8px;
  color:var(--text)
}
.busy-card p {
  color:var(--text-soft);
  margin:0 0 18px
}
.busy-card .btn.primary {
  width:100%;
  padding:13px;
  font-size:15px
}
.cam-float {
  display:flex;
  flex-direction:column
}
.cam-float .cf-head {
  flex:none
}
.cam-float .cf-body {
  aspect-ratio:auto!important;
  flex:1 1 auto;
  min-height:0
}
.cam-float #cf-video {
  width:100%;
  height:100%
}
.cf-resize {
  position:absolute;
  right:0;
  bottom:0;
  width:30px;
  height:30px;
  z-index:20;
  cursor:nwse-resize;
  touch-action:none;
  background:#ffffff2e;
  border-top-left-radius:10px;
  box-shadow:inset 0 0 0 1px #ffffff40
}
.cf-resize:after {
  content:"";
  position:absolute;
  right:5px;
  bottom:5px;
  width:12px;
  height:12px;
  background:linear-gradient(135deg,#000000c4 0 40%,#fffefe 40% 52%,#000000bd 52% 64%,#fff 64% 76%,#000000f5 76%);
  opacity:.9
}
.cf-resize:hover {
  background:#ffffff52
}
.cam-float.expanded .cf-resize {
  display:none
}
.cam-float.expanded .cf-body {
  height:auto
}
.home-layout {
  display:flex;
  flex-direction:column;
  height:calc(100dvh - var(--top-h) - var(--nav-h));
  max-width:1000px;
  margin:0 auto;
  width:100%;
  padding:0;
  overflow:hidden
}
.home-cams {
  flex:none;
  padding:10px 12px 8px
}
.home-cams .cams-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px
}
.home-cams .section-title {
  font-size:15px
}
.home-cams .cam-grid {
  display:grid!important;
  grid-auto-flow:column;
  grid-auto-columns:104px;
  grid-template-columns:none!important;
  gap:10px;
  max-width:none!important;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch
}
.home-cams .cam-tile {
  scroll-snap-align:start
}
.home-cams .cam-tile .cam-thumb {
  aspect-ratio:1 / 1;
  border-radius:14px
}
.home-cams .cam-empty {
  grid-auto-columns:auto;
  white-space:nowrap;
  padding:18px
}
.home-chat {
  flex:1 1 auto;
  min-height:0;
  display:flex;
  border-top:1px solid var(--border)
}
.home-chat .tc-wrap {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  height:auto;
  max-width:none;
  border:none;
  border-radius:0
}
.home-chat .tc-messages {
  flex:1;
  min-height:0
}
@media(min-width:1000px) {
  .home-cams .cam-grid {
    grid-auto-columns:126px;
  }
  .home-cams .cam-tile .cam-thumb {
    aspect-ratio:1 / 1
  }
  .home-layout {
    height:calc(100dvh - var(--top-h))
  }
}
.golive-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:13px;
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap
}
.golive-btn.live {
  background:#e5202e;
}
.golive-btn:active {
  transform:scale(.97)
}
.topbar {
  background:var(--accent)!important;
  color:#fff;
  border-bottom:none!important;
  z-index:60;
  -webkit-backdrop-filter:none;
  backdrop-filter:none
}
.topbar .brand {
  display:flex!important
}
.brand-logo {
  height:30px
}
.hdr-burger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:none;
  background:#ffffff26;
  color:#fff;
  border-radius:10px;
  margin-right:6px;
  cursor:pointer
}
.hdr-link {
  display:none;
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none
}
.hdr-link:hover {
  background:#ffffff29
}
.topbar .inbox-btn,
.topbar .inbox-btn .ico {
  color:#fff
}
.golive-btn {
  background:#3f3d3d;
  color:var(--accent-deep)
}
.golive-btn.live {
  background:#0f0e0e;
  color:#fff
}
.avatar-menu .av {
  border:2px solid rgba(255,255,255,.75)
}
@media(min-width:1000px) {
  .topbar {
    margin-left:0!important
  }
  .hdr-burger {
    display:none
  }
  .hdr-link {
    display:inline-flex;
    align-items:center
  }
  .topbar .inbox-btn {
    display:none
  }
}
.side-scrim {
  position:fixed;
  inset:0;
  z-index:55;
  background:#0006
}
.side-users-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:700;
  font-size:13px;
  color:var(--text-soft)
}
.side-close {
  display:none;
  border:none;
  background:transparent;
  font-size:18px;
  color:var(--text-soft);
  cursor:pointer
}
.side-users {
  flex:1;
  overflow-y:auto;
  padding:6px;
  -webkit-overflow-scrolling:touch
}
.ou {
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:10px
}
.ou:hover {
  background:var(--card-2)
}
.ou-av {
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
  background:var(--card-2);
  border:2px solid var(--border-2)
}
.ou.g-male .ou-av {
  border-color:#3aa0ff
}
.ou.g-female .ou-av {
  border-color:#ff5fb0
}
.ou-name {
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:14px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-decoration:none
}
.ou.g-male .ou-name {
  color:#1f77d0
}
.ou.g-female .ou-name {
  color:#d81b83
}
.ou-cam {
  flex:none;
  width:30px;
  height:30px;
  border:none;
  border-radius:8px;
  background:#972861;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer
}
.ou-cam:hover {
  filter:brightness(1.08)
}
.ou-empty {
  padding:20px;
  text-align:center;
  color:var(--text-soft);
  font-size:13px
}
.side-nav {
  display:flex;
  flex-direction:column;
  position:fixed;
  top:var(--top-h);
  left:0;
  bottom:0;
  width:280px;
  max-width:84vw;
  z-index:58;
  background:#000;
  border-right:1px solid var(--border);
  transform:translate(-100%);
  transition:transform .22s ease
}
.side-nav.open {
  transform:translate(0);
  box-shadow:0 10px 40px #00000040
}
.side-nav.hidden {
  display:none
}
.side-users-head .side-close {
  display:block
}
@media(min-width:1000px) {
  .side-nav {
    top:var(--top-h);
    transform:none;
    width:250px;
    box-shadow:none
  }
  .side-scrim {
    display:none!important
  }
  .side-users-head .side-close {
    display:none
  }
  #app {
    margin-left:250px
  }
}
.home-cams .cam-grid {
  scrollbar-width:thin
}
.home-cams .cam-grid::-webkit-scrollbar {
  height:7px
}
.home-cams .cam-grid::-webkit-scrollbar-thumb {
  background:var(--accent-soft);
  border-radius:999px
}
.home-cams .cam-grid::-webkit-scrollbar-track {
  background:transparent
}
body.logged-out .topbar {
  display:none
}
body.logged-out #app {
  margin-left:0!important
}
.landing-page {
  min-height:100dvh;
  color:#fff;
  font-family:Poppins,Inter,sans-serif;
  background:radial-gradient(1100px 620px at 78% -6%,rgba(255,105,180,.28),transparent 58%),radial-gradient(900px 500px at 8% 12%,rgba(120,30,90,.35),transparent 55%),linear-gradient(180deg,#14020c,#0a0a0f 60%,#08080c);
  display:flex;
  flex-direction:column;
  overflow-x:hidden
}
.lp-nav {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 26px;
  max-width:1180px;
  width:100%;
  margin:0 auto
}
.lp-brand img {
  height:30px;
  display:block
}
.lp-links {
  display:flex;
  gap:26px;
  margin:0 auto
}
.lp-links a {
  color:#ffffffd1;
  text-decoration:none;
  font-weight:600;
  font-size:14px
}
.lp-links a:hover {
  color:#fff
}
.lp-cta-top {
  background:#fff;
  color:#111;
  font-weight:800;
  font-size:14px;
  padding:10px 20px;
  border-radius:8px;
  text-decoration:none
}
.lp-cta-top:hover {
  background:#ffe6f3
}
.lp-hero {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 22px 30px;
  max-width:900px;
  margin:0 auto
}
.lp-eyebrow {
  letter-spacing:.34em;
  font-size:13px;
  font-weight:700;
  color:#ffffffbf;
  margin:0 0 18px
}
.lp-eyebrow span {
  color:var(--accent)
}
.lp-title {
  font-family:Poppins,sans-serif;
  font-weight:900;
  font-size:clamp(46px,9vw,104px);
  line-height:.96;
  letter-spacing:-.02em;
  margin:0;
  text-shadow:0 8px 40px rgba(0,0,0,.4)
}
.lp-title .grad {
  background:linear-gradient(100deg,#ff8ac2,var(--accent) 55%,#ff3d9a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.lp-sub {
  max-width:560px;
  margin:22px auto 0;
  color:#ffffffc7;
  font-size:clamp(15px,2.4vw,18px);
  font-weight:400;
  font-family:Inter,sans-serif;
  line-height:1.5
}
.lp-actions {
  display:flex;
  gap:14px;
  margin-top:30px;
  flex-wrap:wrap;
  justify-content:center
}
.lp-btn {
  padding:15px 30px;
  border-radius:10px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  transition:transform .1s ease
}
.lp-btn:active {
  transform:scale(.97)
}
.lp-btn.primary {
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 30px #ff69b466
}
.lp-btn.primary:hover {
  filter:brightness(1.06)
}
.lp-btn.ghost {
  background:#ffffff14;
  color:#fff;
  border:1px solid rgba(255,255,255,.22)
}
.lp-btn.ghost:hover {
  background:#ffffff24
}
.lp-trust {
  margin-top:52px;
  width:100%
}
.lp-trust-label {
  display:block;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:#ffffff80;
  margin-bottom:16px
}
.lp-features {
  display:flex;
  gap:26px 40px;
  justify-content:center;
  flex-wrap:wrap
}
.lp-feat {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:15px;
  color:#ffffffe6
}
.lp-fi {
  font-size:20px
}
.lp-foot {
  display:flex;
  justify-content:space-between;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:20px 26px;
  color:#ffffff73;
  font-size:13px;
  font-family:Inter,sans-serif
}
@media(max-width:720px) {
  .lp-links {
    display:none
  }
  .lp-nav {
    padding:16px 18px
  }
  .lp-hero {
    padding-top:24px
  }
  .lp-features {
    gap:16px 26px
  }
}
.gender-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  font-size:15px;
  font-weight:900;
  vertical-align:middle;
  color:#fff;
  margin-left:4px
}
.gender-badge.male {
  background:#3aa0ff
}
.gender-badge.female {
  background:#ff5fb0
}
.profile-card.g-male .big-avatar {
  border-color:#3aa0ff!important;
  box-shadow:0 0 0 3px #3aa0ff40
}
.profile-card.g-female .big-avatar {
  border-color:#ff5fb0!important;
  box-shadow:0 0 0 3px #ff5fb040
}
.profile-card.g-male h2 {
  color:#1f77d0
}
.profile-card.g-female h2 {
  color:#d81b83
}
.site-footer {
  display:none
}
body.logged-out .site-footer {
  display:block
}
body:not(.logged-out) #app {
  min-height:0
}

/* Emoji picker in chat */
.tc-compose{position:relative}
.tc-emoji-btn{flex:none;width:40px;height:40px;border:1px solid var(--border-2);background:#fff;border-radius:999px;font-size:19px;cursor:pointer;line-height:1}
.tc-emoji-btn:hover{background:var(--muted-2)}
.emoji-panel{position:absolute;bottom:calc(100% + 8px);left:8px;right:8px;max-width:340px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(20,20,50,.18);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:230px;overflow-y:auto;z-index:70}
.emoji-item{border:none;background:transparent;font-size:20px;line-height:1;padding:6px 0;border-radius:8px;cursor:pointer}
.emoji-item:hover{background:var(--accent-soft)}
@media (max-width:520px){.emoji-panel{grid-template-columns:repeat(7,1fr)}}

/* Brand text (replaces logo image) */
.brand-text{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1}
@media (min-width:1000px){.topbar .brand{display:flex!important}}

/* Mobile: pin the home layout so the page can't scroll and no gap above the nav */
@media (max-width:999px){
  .home-layout{position:fixed;top:var(--top-h);left:0;right:0;bottom:var(--nav-h);height:auto!important;width:auto;max-width:none;margin:0;overflow:hidden}
}

/* Cam popup mute button uses existing .cf-ic styling; no extra rules needed */

/* Room tabs (above the cam strip) */
.room-tabs{display:flex;gap:8px;overflow-x:auto;padding:8px 12px 2px;-webkit-overflow-scrolling:touch;flex:none}
.room-tab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;color:var(--text);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;border:1px solid var(--border)}
.room-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Room list in the sidebar */
.side-rooms{padding:8px;border-bottom:1px solid var(--border)}
.side-rooms-head{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-soft);padding:4px 8px 6px;font-weight:700}
.side-room{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:#afafaf;font-weight:700;font-size:14px}
.side-room:hover{background:var(--card-2)}
.side-room.active{background:rgb(17, 17, 17);color:#fff;}
.sr-emoji{font-size:17px}

/* Online indicator dots */
.ou-avwrap{position:relative;flex:none;width:34px;height:34px}
.ou-avwrap .ou-av{width:34px;height:34px}
.online-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--bg-2);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.pa-wrap{position:relative;display:inline-block}
.online-dot.big{width:18px;height:18px;right:4px;bottom:4px;border:3px solid var(--card)}
.presence{font-size:13px;font-weight:600;margin:2px 0 2px;display:inline-flex;align-items:center;gap:6px}
.presence.online{color:#16a34a}
.presence.offline{color:var(--text-soft)}
.presence .online-dot{position:static;border:none;box-shadow:none;width:9px;height:9px}

/* Welcome bot messages + admin bot panel */
.tc-bot .bot-name{font-weight:800;color:var(--accent-deep)}
.tc-bot .bot-tag{font-size:9px;font-weight:800;background:var(--accent);color:#fff;padding:1px 5px;border-radius:5px;vertical-align:middle;letter-spacing:.04em}
.tc-bot .txt{background:rgb(19, 17, 17);border-radius:10px;padding:6px 10px;display:inline-block}
.tc-bot img{outline:2px solid var(--accent)}
.admin-card{max-width:520px}
.bot-row{display:flex;align-items:center;gap:14px;margin:10px 0 14px}
.bot-av-preview{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;margin-top:8px}
.bot-preview{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.muted{color:var(--text-soft);font-size:13px}


/* GIF button + picker + chat gif + lightbox */
.tc-gif-btn{flex:none;height:40px;padding:0 12px;border:1px solid var(--border-2);background:#fff;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--accent-deep);cursor:pointer}
.tc-gif-btn:hover{background:var(--muted-2)}
.gif-panel{position:absolute;bottom:calc(100% + 8px);left:8px;right:8px;max-width:360px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(20,20,50,.18);padding:8px;z-index:71;display:flex;flex-direction:column;max-height:320px}
.gif-search input{width:100%;border:1px solid var(--border-2);border-radius:999px;padding:9px 14px;background:#fff;margin-bottom:8px}
.gif-results{overflow-y:auto;overflow-x:hidden;column-count:3;column-gap:6px;padding:2px}
.gif-item{display:block;width:100%;border:none;background:var(--muted-2);border-radius:8px;overflow:hidden;cursor:pointer;padding:0;margin:0 0 6px;break-inside:avoid;-webkit-column-break-inside:avoid;line-height:0}
.gif-item img{width:100%;height:auto;display:block}.gif-ph{position:relative;display:block;width:100%;height:0;background:var(--muted-2)}.gif-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gif-loading{text-align:center;color:var(--text-soft);padding:20px;font-size:13px}
.gif-credit{text-align:center;font-size:10px;color:var(--text-soft);padding-top:6px;letter-spacing:.05em}
.chat-gif{max-width:160px;max-height:160px;border-radius:10px;margin-top:4px;cursor:pointer;display:block;background:var(--muted-2)}
.gif-lightbox{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.8);display:grid;place-items:center;padding:20px}
.gif-lb-inner{position:relative;max-width:92vw;max-height:88vh}
.gif-lb-inner img{max-width:92vw;max-height:88vh;border-radius:12px;display:block}
.gif-lb-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:none;background:#fff;color:#111;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cf-ic.tip{background:linear-gradient(120deg,#ff8ac2,var(--accent));color:#fff}
@media (max-width:520px){.gif-results{column-count:2}.chat-gif{max-width:130px;max-height:130px}}

/* Compose: single + button with Emojis/GIFs menu (mobile-friendly) */
.tc-emoji-btn,.tc-gif-btn{display:none!important}
.tc-plus-wrap{position:relative;flex:none}
.tc-plus-btn{width:40px;height:40px;border:1px solid var(--border-2);background:#111;border-radius:999px;color:var(--accent-deep);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tc-plus-btn:hover{background:var(--muted-2)}
.tc-plus-menu{position:absolute;bottom:calc(100% + 8px);left:0;background:#0b0b0b;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(20,20,50,.16);padding:6px;z-index:72;min-width:150px}
.tc-plus-item{display:block;width:100%;text-align:left;border:none;background:black;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.tc-plus-item:hover{background:var(--accent-soft);color:var(--accent-deep)}
/* Panels anchor to the left (near the + button) */
.emoji-panel,.gif-panel{left:8px;right:8px}


/* Sidebar external promo link */
.side-promo{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px;padding:12px 14px;border-radius:12px;background:linear-gradient(120deg,#000,#000);color:#fff;font-weight:800;font-size:14px;text-decoration:none;}
.side-promo:hover{filter:brightness(1.05)}
/* ===== Home wall (activity start page) ===== */
.wall{max-width:1000px;margin:0 auto;padding:16px 14px 40px;width:100%}
.w-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(120deg,rgba(255, 250, 253, 0.14),transparent);border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.w-hero h1{margin:0 0 4px;font-size:22px}
.w-hero p{margin:0;color:var(--text-soft);font-size:14px}
.w-stats{display:flex;gap:10px;flex:none}
.w-stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 16px;text-align:center;min-width:78px}
.w-stat b{display:block;font-size:22px;line-height:1;color:var(--accent-deep)}
.w-stat span{font-size:11px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.06em}
.w-stat.live b{color:#e5202e}
.w-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.w-col{display:flex;flex-direction:column;gap:18px}
.w-sec{background:#000;border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.w-sec h2{margin:0 0 12px;font-size:15px}
.w-rooms{display:flex;flex-direction:column;gap:8px}
.w-room{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#fff;background:#060606;}
.w-room:hover{background:var(--accent-soft)}
.w-room-emoji{font-size:22px;flex:none}
.w-room-main{flex:1;display:flex;flex-direction:column;min-width:0}
.w-room-main b{font-size:14px}
.w-room-meta{font-size:12px;color:var(--text-soft)}
.w-join{flex:none;background:var(--accent);color:#fff;font-weight:800;font-size:12px;padding:6px 14px;border-radius:999px}
.w-list{display:flex;flex-direction:column;gap:8px}
.w-card{display:flex;align-items:center;gap:10px;padding:6px 4px}
.w-card-user{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:var(--text)}
.w-card-user b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-sub{font-size:12px;color:var(--text-soft)}
.w-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--card-2);border:2px solid var(--border-2)}
.w-av.g-male{border-color:#3aa0ff}
.w-av.g-female{border-color:#ff5fb0}
.wall .empty{color:var(--text-soft);font-size:13px;padding:10px 4px}
@media (max-width:820px){.w-grid{grid-template-columns:1fr}.w-hero{flex-direction:column;align-items:flex-start}}

/* ===== Right ad rail (desktop only) ===== */
.ad-rail{display:none}
@media (min-width:1280px){
  .ad-rail.ad-right{display:block;position:fixed;top:calc(var(--top-h) + 12px);right:12px;z-index:30;width:120px}
  #app{margin-right:150px}
  body.logged-out #app{margin-right:0}
}

/* Room icons (sidebar + wall + admin) */
.sr-icon{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.sr-icon img{width:26px;height:26px;border-radius:7px;object-fit:cover}
.sr-emoji{font-size:17px}
.w-room-emoji img{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block}
.ri-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.ri-row{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--border);border-radius:12px}
.ri-preview{width:48px;height:48px;flex:none;border-radius:10px;background:var(--card-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ri-preview img{width:48px;height:48px;object-fit:cover}
.ri-emoji{font-size:24px}
.ri-main{flex:1;display:flex;flex-direction:column;min-width:0}
.ri-main .muted{font-size:12px}

/* Header gradient */
.topbar{background:linear-gradient(90deg,#000 0%,#000 50%,#2d2d2d 100%) !important;}

/* Round room avatars — sidebar (voice-room style) */
.side-room{align-items:center}
.sr-avatar{position:relative;width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;background:var(--card-2);display:flex;align-items:center;justify-content:center}
.sr-avatar img{width:100%;height:100%;object-fit:cover}
.sr-ph{font-weight:800;color:var(--accent-deep);font-size:16px}

/* Round room avatars — wall */
.w-room{align-items:center}
.w-room-av{position:relative;width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;background:var(--card-2);display:flex;align-items:center;justify-content:center}
.w-room-av img{width:100%;height:100%;object-fit:cover}
.w-room-ph{font-weight:900;font-size:22px;color:var(--accent-deep)}
.w-room-av .live-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);opacity:.5}

/* Wall hero image */
.w-hero.has-img{padding:0;border:none;min-height:180px;background-size:cover;background-position:center;border-radius:16px;position:relative;overflow:hidden}
.w-hero.has-img .w-hero-stats{position:absolute;left:14px;bottom:14px;display:flex;gap:8px}
.w-hchip{background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.w-hchip.live{background:rgba(13, 13, 13, 0.02);}
@media (max-width:820px){.w-hero.has-img{min-height:130px}}

/* Age badge on profile */
.age-badge{display:inline-block;background:var(--card-2);color:var(--text);font-size:13px;font-weight:800;padding:2px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* Admin: rooms + wall image */
.ri-create{display:flex;gap:8px;margin:10px 0 14px}
.ri-create .input{flex:1}
.ri-hero{border:1px dashed var(--border-2);border-radius:12px;min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--card-2)}
.ri-hero img{width:100%;max-height:220px;object-fit:cover;display:block}
.ri-preview{border-radius:50%}
.ri-preview img{border-radius:50%}

/* Sidebar room online count + unread badge */
.side-room{position:relative}
.sr-count{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:var(--text-soft);background:var(--card-2);border-radius:999px;padding:2px 9px;min-width:26px;text-align:center}
.side-room.active .sr-count{background:rgba(255,255,255,.25);color:#fff}
.sr-badge{flex:none;margin-left:6px;background:#e5202e;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}

/* Whisper (private message in a room) */
.tc-whisper .txt{background:rgba(124,58,237,.12);border-radius:10px;padding:6px 10px;display:inline-block;border:1px dashed rgba(124,58,237,.4)}
.whisper-tag{font-size:10px;font-weight:800;color:#7c3aed;background:rgba(124,58,237,.14);padding:1px 6px;border-radius:6px;margin-left:4px}