:root {
  --bg: #08090b;
  --panel: #101216;
  --panel-2: #15181e;
  --panel-3: #1b1e24;
  --line: #252930;
  --line-soft: rgba(255, 255, 255, 0.07);
  --text: #f5f5f3;
  --muted: #959ba5;
  --faint: #666c76;
  --red: #f0443e;
  --red-bright: #ff5a52;
  --red-dark: #931e1a;
  --blue: #4287ff;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  --topbar: 72px;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

button,
input,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

a { color: inherit; }

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 999;
  left: 16px;
  top: -60px;
  border-radius: 8px;
  background: white;
  color: #111;
  padding: 10px 16px;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus { top: 12px; }

.topbar {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--topbar);
  display: grid;
  grid-template-columns: 238px minmax(260px, 560px) 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 11, 0.9);
  backdrop-filter: blur(18px);
  padding: 0 26px;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 11px;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: var(--red);
  clip-path: polygon(0 13%, 100% 0, 81% 100%, 9% 84%);
  transform: skew(-7deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  transform: rotate(-28deg);
}

.brand-mark span {
  position: relative;
  z-index: 1;
  font: 900 12px/1 "Arial Black", Impact, sans-serif;
  letter-spacing: -1px;
  transform: skew(7deg);
}

.brand-copy {
  display: grid;
  line-height: 0.92;
  transform: skew(-5deg);
}

.brand-copy strong,
.brand-copy b {
  font-family: "Arial Black", Impact, sans-serif;
  letter-spacing: 0.02em;
}

.brand-copy strong { font-size: 11px; color: #a8adb6; }
.brand-copy b { font-size: 19px; }

.search-box {
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #111318;
  color: var(--muted);
  padding: 0 13px 0 16px;
  transition: border-color 0.2s, background 0.2s;
}

.search-box:focus-within {
  border-color: #515762;
  background: #15181d;
}

.search-box > span:first-child { font-size: 22px; transform: rotate(-15deg); }

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.search-box input::placeholder { color: #737985; }

kbd {
  border: 1px solid #30343c;
  border-bottom-color: #3e434d;
  border-radius: 6px;
  background: #1c1f25;
  color: #868c96;
  padding: 2px 7px;
  font: 10px/1.5 monospace;
  white-space: nowrap;
}

.search-results {
  position: absolute;
  display: none;
  inset: 50px 0 auto;
  z-index: 140;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #15171c;
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 8px;
}

.search-results.open { display: grid; }
.search-results button { border: 0; border-radius: 9px; background: transparent; text-align: left; padding: 10px; cursor: pointer; }
.search-results button:hover { background: #20232a; }
.search-results strong { display: block; font-size: 13px; }
.search-results small { color: var(--muted); }

.top-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 11px;
}

.icon-button,
.avatar-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #13151a;
  cursor: pointer;
}

.icon-button span { color: #c7cbd2; font-size: 11px; }
.icon-button::before { content: ""; position: absolute; width: 11px; height: 13px; border: 1.5px solid #c7cbd2; border-radius: 8px 8px 5px 5px; }
.notification-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border: 2px solid var(--bg); border-radius: 50%; background: var(--red); }

.avatar-button {
  border-color: #4b5059;
  background: linear-gradient(135deg, #606773, #1d2026 60%);
  font-weight: 900;
  font-size: 11px;
}

.online-dot { position: absolute; right: -1px; bottom: 1px; width: 10px; height: 10px; border: 2px solid var(--bg); border-radius: 50%; background: #43c476; }

.layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 306px;
  max-width: 1500px;
  min-height: 100vh;
  margin: 0 auto;
  padding-top: var(--topbar);
}

.sidebar {
  position: fixed;
  top: var(--topbar);
  bottom: 0;
  width: 238px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: var(--bg);
  padding: 25px 20px;
}

.primary-nav { display: grid; gap: 4px; }

.nav-item {
  position: relative;
  height: 45px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #a2a7b0;
  text-align: left;
  padding: 0 12px;
  cursor: pointer;
  transition: 0.18s ease;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: -20px;
  width: 3px;
  height: 20px;
  border-radius: 4px;
  background: var(--red);
  opacity: 0;
}

.nav-item:hover { background: #111318; color: white; }
.nav-item.active { background: #17191e; color: white; font-weight: 700; }
.nav-item.active::before { opacity: 1; }
.nav-item em { min-width: 21px; border-radius: 999px; background: var(--red); color: white; padding: 1px 6px; text-align: center; font-size: 9px; font-style: normal; }
.nav-glyph { width: 22px; color: #8b919b; text-align: center; font-size: 18px; }
.nav-item.active .nav-glyph { color: var(--red-bright); }

.create-button {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  box-shadow: 0 10px 25px rgba(240, 68, 62, 0.18);
  margin: 20px 0;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.create-button:hover,
.primary-action:hover { background: var(--red-bright); transform: translateY(-1px); }
.create-button span { font-size: 20px; font-weight: 400; }

.sidebar-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #292d34;
  border-radius: 14px;
  background: radial-gradient(circle at 90% 0, rgba(240, 68, 62, 0.24), transparent 45%), #121419;
  padding: 16px;
}

.sidebar-card::after { content: ""; position: absolute; right: -20px; bottom: -35px; width: 80px; height: 80px; border: 1px solid rgba(240, 68, 62, 0.24); transform: rotate(35deg); }
.eyebrow { color: var(--red-bright); font-size: 9px; font-weight: 900; letter-spacing: 0.14em; }
.sidebar-card strong { display: block; margin: 7px 0 3px; font-size: 14px; }
.sidebar-card p { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.sidebar-card button { position: relative; z-index: 1; border: 0; background: transparent; color: white; padding: 0; font-size: 11px; font-weight: 800; cursor: pointer; }
.sidebar-card button span { color: var(--red-bright); }

.sidebar-footer { margin: auto 0 0; color: #4f545e; font-size: 9px; line-height: 1.8; }
.sidebar-footer a { color: #626873; text-decoration: none; }

.content {
  grid-column: 2;
  min-width: 0;
  border-right: 1px solid var(--line-soft);
  padding: 30px clamp(24px, 4vw, 50px) 80px;
}

.view { display: none; max-width: 780px; margin: 0 auto; animation: viewIn 0.35s ease both; }
.view.active { display: block; }

@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.mobile-heading,
.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mobile-heading h1,
.section-title h1 {
  margin: 2px 0 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transform: skew(-3deg);
}

.small-create,
.filter-button {
  border: 1px solid #343840;
  border-radius: 9px;
  background: #15171c;
  padding: 9px 13px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.story-row {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 27px;
  padding-bottom: 2px;
}

.story-row::-webkit-scrollbar { display: none; }

.story {
  flex: 0 0 auto;
  width: 64px;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.story b { width: 70px; overflow: hidden; color: #a9aeb7; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 600; }
.story-ring { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid #343840; border-radius: 50%; background: #17191e; }
.story-photo { border-color: var(--red); background: linear-gradient(145deg, #494e58, #191b20); box-shadow: inset 0 0 0 3px var(--bg); }
.story-photo i { font-style: normal; font-size: 12px; font-weight: 900; }
.story-2 { background: linear-gradient(145deg, #a33139, #291a22); }
.story-3 { background: linear-gradient(145deg, #1b67a7, #1b2028); }
.story-4 { background: linear-gradient(145deg, #9a6935, #2d2520); }
.story-5 { background: linear-gradient(145deg, #6252a5, #24202c); }
.add-story .story-ring { border-style: dashed; }
.add-story i { width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: white; font-style: normal; line-height: 21px; }

.scene-picker { margin: -5px 0 22px; }
.scene-picker-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 10px; }
.scene-picker-heading h2 { margin: 3px 0 0; font: 900 17px/1 "Arial Black", Impact, sans-serif; text-transform: uppercase; }
.scene-picker-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.scene-card { position: relative; min-width: 0; height: 150px; overflow: hidden; border: 1px solid #30343b; border-radius: 12px; background: #15171c; padding: 0; text-align: left; cursor: pointer; }
.scene-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.04); transition: transform .35s ease, filter .35s ease; }
.scene-card::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, rgba(5,6,8,.96)); }
.scene-card:hover img { filter: saturate(1.05) contrast(1.05); transform: scale(1.045); }
.scene-card > span { position: absolute; z-index: 2; inset: auto 9px 9px; }
.scene-card > span i,.discover-tile > span > i { display: block; color: var(--red-bright); font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .1em; }
.scene-card > span b,.scene-card > span small { display: block; }
.scene-card > span b { margin-top: 3px; font: 900 10px/1.05 "Arial Black", Impact, sans-serif; text-transform: uppercase; }
.scene-card > span small { overflow: hidden; margin-top: 4px; color: #afb4bc; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.scene-card.offroad > span i { color: #ff8557; }.scene-card.ebikes > span i { color: #70d6ff; }.scene-card.watercraft > span i { color: #60b7ff; }.scene-card.auto > span i { color: #f0c66f; }

.spotlight-card {
  position: relative;
  height: clamp(360px, 49vw, 480px);
  overflow: hidden;
  border: 1px solid #2c3037;
  border-radius: 21px;
  background: #1a1c21;
  box-shadow: var(--shadow);
}

.spotlight-card > img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 8, 0.94) 0, rgba(5, 6, 8, 0.72) 45%, rgba(5, 6, 8, 0.12) 80%), linear-gradient(0deg, rgba(5, 6, 8, 0.45), transparent 50%); }
.spotlight-copy { position: absolute; inset: auto auto 35px 35px; width: min(510px, calc(100% - 60px)); }
.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(12,13,16,.75); padding: 6px 10px; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.live-pill i,
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 5px rgba(240,68,62,.14); }
.spotlight-copy h2 { margin: 14px 0 10px; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(32px, 5vw, 56px); line-height: .94; letter-spacing: -.045em; text-transform: uppercase; transform: skew(-2deg); }
.spotlight-copy p { max-width: 500px; margin: 0 0 22px; color: #c0c4cb; font-size: 13px; line-height: 1.6; }
.spotlight-actions { display: flex; align-items: center; gap: 19px; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border: 0; border-radius: 9px; background: var(--red); padding: 0 16px; font-size: 11px; font-weight: 900; cursor: pointer; transition: .2s ease; }
.rider-stack { display: flex; align-items: center; }
.rider-stack i { width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #111; border-radius: 50%; background: #40454f; margin-left: -7px; font-size: 7px; font-style: normal; font-weight: 900; }
.rider-stack i:first-child { margin-left: 0; background: var(--red-dark); }
.rider-stack b { margin-left: 7px; color: #c4c8cf; font-size: 9px; }

.composer-inline { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); margin: 20px 0 27px; padding: 10px 12px; }
.mini-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #666d78, #24272d); font-size: 9px; font-weight: 900; }
.composer-inline > button:nth-child(2) { border: 0; background: transparent; color: #707681; text-align: left; font-size: 11px; cursor: text; }
.composer-media { width: 31px; height: 31px; border: 0; border-radius: 7px; background: #1b1e24; color: #9aa0aa; cursor: pointer; }

.feed-heading,
.subheading,
.rail-heading { display: flex; align-items: center; justify-content: space-between; }
.feed-heading { margin: 0 0 13px; }
.feed-heading h2,
.subheading h2 { margin: 0; font-size: 14px; }
.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px; background: #0d0f12; padding: 2px; }
.segmented button { border: 0; border-radius: 6px; background: transparent; color: #6e747e; padding: 5px 9px; font-size: 9px; cursor: pointer; }
.segmented button.active { background: #22252b; color: white; }

.feed { display: grid; gap: 18px; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 17px; }
.post-header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.post-avatar,
.suggestion-avatar { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; font-size: 9px; font-weight: 900; }
.suggestion-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-red,
.suggestion-avatar.red { background: linear-gradient(145deg, #c04042, #35191e); }
.avatar-blue,
.suggestion-avatar.blue { background: linear-gradient(145deg, #3679b8, #172a3b); }
.suggestion-avatar.silver { background: linear-gradient(145deg, #747b85, #282b31); }
.post-header strong { display: block; font-size: 11px; }
.post-header div > span { display: block; color: var(--muted); font-size: 9px; }
.creator-badge,.verified { display:inline-grid; place-items:center; width:14px; height:14px; flex:0 0 14px; margin-left:2px; background:linear-gradient(145deg,#35a8ff,#1269d3 72%); color:#fff; clip-path:polygon(50% 0,61% 12%,78% 8%,83% 25%,100% 32%,92% 50%,100% 68%,83% 75%,78% 92%,61% 88%,50% 100%,39% 88%,22% 92%,17% 75%,0 68%,8% 50%,0 32%,17% 25%,22% 8%,39% 12%); filter:drop-shadow(0 1px 2px rgba(0,70,170,.45)); font-size:8px; font-style:normal; font-weight:950; line-height:1; vertical-align:-2px; }
h1 .creator-badge { width:19px; height:19px; flex-basis:19px; font-size:11px; vertical-align:-2px; }
.map-user-label .creator-badge,.chat-messages .creator-badge,.voice-invite-picker .creator-badge,.discover-tile small .creator-badge,.live-stream-card small .creator-badge,.priority-queue small .creator-badge { width:11px; height:11px; flex-basis:11px; font-size:6px; vertical-align:-2px; }
@media (forced-colors:active) { .creator-badge,.verified { border:1px solid ButtonText; background:ButtonFace; color:ButtonText; clip-path:none; border-radius:50%; filter:none; } }
.more-button { border: 0; background: transparent; color: #757b85; cursor: pointer; letter-spacing: 1px; }
.post-copy { margin: 14px 0; color: #d1d4d9; font-size: 11px; line-height: 1.6; }
.post-copy a { color: #ff6a63; text-decoration: none; }
.post-media { position: relative; display: block; width: 100%; overflow: hidden; border: 0; border-radius: 12px; background: #22252a; padding: 0; cursor: pointer; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.post-media:hover img { transform: scale(1.025); }
.portrait-media { height: min(68vw, 580px); }
.portrait-media img { object-position: center 43%; }
.wide-media { aspect-ratio: 16 / 9; }
.media-badge,
.photo-count { position: absolute; right: 10px; top: 10px; border-radius: 6px; background: rgba(8,9,11,.78); padding: 4px 7px; color: white; font-size: 8px; font-weight: 800; backdrop-filter: blur(8px); }
.play-button { position: absolute; inset: 50% auto auto 50%; width: 51px; height: 51px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(8,9,11,.62); transform: translate(-50%,-50%); font-size: 15px; backdrop-filter: blur(8px); }
.post-actions { display: flex; align-items: center; gap: 4px; padding-top: 12px; }
.reaction-button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: #7f858f; padding: 5px 8px; font-size: 10px; cursor: pointer; }
.reaction-button:hover { background: #1b1e24; color: white; }
.reaction-button span { font-size: 18px; font-weight: 400; line-height: 1; }
.reaction-button b { font-size: 9px; font-weight: 600; }
.reaction-button.liked { color: var(--red-bright); }
.save-button { margin-left: auto; }
.save-button.saved { color: white; background: #24272e; }

.topic-tabs,
.profile-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.topic-tabs button,
.profile-tabs button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: #111318; color: #8b919b; padding: 8px 13px; font-size: 10px; font-weight: 700; cursor: pointer; }
.topic-tabs button.active,
.profile-tabs button.active { border-color: var(--red); background: rgba(240,68,62,.1); color: white; }

.discover-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 235px; gap: 12px; }
.discover-tile { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #17191d; padding: 0; text-align: left; cursor: pointer; }
.discover-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.discover-tile:hover img { transform: scale(1.035); }
.discover-tile::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(5,6,8,.92)); }
.discover-tile > span { position: absolute; z-index: 2; inset: auto 16px 14px; }
.discover-tile b { display: block; font-family: "Arial Black", Impact, sans-serif; font-size: 20px; line-height: 1; text-transform: uppercase; }
.discover-tile small { display: block; margin-top: 5px; color: #adb2ba; font-size: 9px; }
.discover-tile > span > i { margin-bottom: 5px; }
.tile-tall { grid-row: span 2; }
.tile-wide { grid-column: span 2; }
.gradient-tile::after { background: linear-gradient(transparent 10%, rgba(0,0,0,.6)); }
.red-grid { background: radial-gradient(circle at 85% 10%, rgba(240,68,62,.65), transparent 40%), repeating-linear-gradient(-12deg, #17191d 0, #17191d 12px, #1c1f24 13px); }
.steel-grid { background: radial-gradient(circle at 10% 90%, rgba(66,135,255,.35), transparent 46%), linear-gradient(135deg, #333841, #111317); }

.featured-video { position: relative; height: 430px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #191b20; }
.featured-video > img { width: 100%; height: 100%; object-fit: cover; }
.featured-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,8,.95), transparent 75%); }
.featured-overlay { position: absolute; z-index: 2; inset: auto 28px 27px; }
.video-kicker { color: var(--red-bright); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.featured-overlay h2 { max-width: 560px; margin: 8px 0 5px; font-family: "Arial Black", Impact, sans-serif; font-size: 35px; line-height: 1.02; text-transform: uppercase; }
.featured-overlay p { margin: 0 0 15px; color: #c1c5cc; font-size: 11px; }
.featured-overlay button { border: 0; border-radius: 8px; background: white; color: #101114; padding: 10px 14px; font-size: 10px; font-weight: 900; cursor: pointer; }
.subheading { margin: 27px 0 13px; }
.subheading button,
.rail-heading button { border: 0; background: transparent; color: var(--red-bright); font-size: 9px; cursor: pointer; }
.video-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.video-card { border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }
.video-thumb { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 11px; background: #1c1f24; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.video-card:hover img { transform: scale(1.035); }
.video-thumb i { position: absolute; right: 7px; bottom: 7px; border-radius: 4px; background: rgba(0,0,0,.75); padding: 2px 5px; font-size: 7px; font-style: normal; }
.video-card > b { display: block; margin-top: 8px; font-size: 10px; line-height: 1.35; }
.video-card > small { color: var(--muted); font-size: 8px; }

.section-intro { max-width: 520px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.tracking-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: #121419; padding: 12px 14px; }
.tracking-toolbar > div:first-child strong,.tracking-toolbar > div:first-child small { display: block; }.tracking-toolbar > div:first-child strong { margin-top: 3px; font-size: 10px; }.tracking-toolbar > div:first-child strong i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #40c474; box-shadow: 0 0 0 4px rgba(64,196,116,.12); }.tracking-toolbar > div:first-child small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.tracking-toolbar-actions { display: flex; align-items: end; gap: 6px; }.tracking-toolbar-actions label { display: grid; gap: 3px; color: #777e88; font-size: 6px; font-weight: 800; }.tracking-toolbar-actions select,.tracking-toolbar-actions button { min-height: 33px; border: 1px solid #343943; border-radius: 8px; background: #1a1d23; color: white; padding: 7px 9px; font-size: 7px; font-weight: 800; cursor: pointer; }.tracking-toolbar-actions select { min-width: 116px; }.tracking-toolbar-actions button[aria-pressed="true"] { border-color: #5c636f; background: #292d35; }.tracking-toolbar-actions .share-location-button { border-color: rgba(64,196,116,.35); color: #67db91; }.tracking-toolbar-actions .share-location-button[aria-pressed="true"] { background: #25623e; color: white; }
.ride-map { position: relative; height: 455px; overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 18px 18px; background: #11141a; }
.map-grid,
.cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 35px 35px; transform: rotate(-8deg) scale(1.2); }
.map-road { position: absolute; height: 9px; border: 1px solid #333842; border-radius: 50%; }
.road-a { width: 660px; left: -100px; top: 170px; transform: rotate(20deg); }
.road-b { width: 600px; left: 180px; top: 210px; transform: rotate(-32deg); }
.road-c { width: 400px; left: 70px; top: 75px; transform: rotate(-12deg); }
.map-pin { position: absolute; display: grid; justify-items: center; border: 0; background: transparent; cursor: pointer; }
.map-pin span { width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid #15171b; border-radius: 50% 50% 50% 7px; background: #343942; color: white; transform: rotate(-45deg); font-size: 9px; font-weight: 900; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.map-pin span::first-line { transform: rotate(45deg); }
.map-pin b { margin-top: 9px; border-radius: 5px; background: rgba(7,8,10,.75); padding: 3px 6px; font-size: 7px; letter-spacing: .05em; }
.map-pin.active span { background: var(--red); }
.pin-1 { left: 46%; top: 39%; }
.pin-2 { left: 18%; top: 63%; }
.pin-3 { right: 18%; top: 24%; }
.event-map-label { position: absolute; z-index: 1; border: 1px solid #343943; border-radius: 5px; background: rgba(9,10,12,.66); color: #737a84; padding: 3px 6px; font-size: 6px; font-weight: 900; letter-spacing: .06em; }
.live-user-pin { --map-x: 50%; --map-y: 50%; position: absolute; z-index: 4; left: var(--map-x); top: var(--map-y); display: flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 0; text-align: left; transform: translate(-50%,-50%); transition: left 1.15s linear, top 1.15s linear, opacity .2s; cursor: pointer; }
.map-profile-picture { position: relative; width: 36px; height: 36px; flex: 0 0 auto; border: 3px solid #14171b; border-radius: 50%; background: #242932; box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.map-profile-picture img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }.map-profile-picture i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid #13161a; border-radius: 50%; background: #48d17c; }.map-profile-picture::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(72,209,124,.32); border-radius: 50%; animation: mapPulse 2.2s ease-out infinite; }
.live-user-pin.active { z-index: 7; }.live-user-pin.active .map-profile-picture { width: 43px; height: 43px; border-color: white; box-shadow: 0 0 0 4px rgba(240,68,62,.28),0 10px 22px rgba(0,0,0,.58); }.live-user-pin.you .map-profile-picture { border-color: var(--red-bright); }.map-user-label { opacity: 0; border: 1px solid #343943; border-radius: 7px; background: rgba(8,9,11,.88); padding: 5px 7px; transform: translateX(-4px); transition: opacity .2s, transform .2s; white-space: nowrap; backdrop-filter: blur(8px); }.live-user-pin:hover .map-user-label,.live-user-pin.active .map-user-label { opacity: 1; transform: translateX(0); }.map-user-label b,.map-user-label small { display: block; }.map-user-label b { font-size: 8px; }.map-user-label small { margin-top: 1px; color: #8b929c; font-size: 6px; }
.ride-map.tracking-paused .live-user-pin { transition: none; }.ride-map.tracking-paused .map-profile-picture::after { animation-play-state: paused; }
.tracking-user-card { position: absolute; z-index: 8; right: 13px; top: 13px; width: 225px; display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center; border: 1px solid #383d46; border-radius: 12px; background: rgba(9,10,13,.9); box-shadow: 0 12px 30px rgba(0,0,0,.4); padding: 9px; backdrop-filter: blur(12px); }.tracking-user-card > img { width: 46px; height: 46px; grid-row: span 2; border: 2px solid #4b515c; border-radius: 12px; object-fit: cover; }.tracking-user-card strong,.tracking-user-card small { display: block; }.tracking-user-card strong { margin-top: 2px; font-size: 11px; }.tracking-user-card small { color: #999fa8; font-size: 7px; }.tracking-user-card > button { grid-column: 2; justify-self: start; border: 0; background: transparent; color: var(--red-bright); padding: 0; font-size: 7px; font-weight: 900; cursor: pointer; }
.map-status { position: absolute; left: 15px; bottom: 15px; display: flex; align-items: center; gap: 8px; border: 1px solid #333842; border-radius: 8px; background: rgba(8,9,11,.82); padding: 8px 11px; font-size: 9px; backdrop-filter: blur(8px); }
.map-status i { width: 7px; height: 7px; border-radius: 50%; background: #40c474; box-shadow: 0 0 0 4px rgba(64,196,116,.12); }
.tracking-privacy-note { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; border: 1px solid rgba(64,196,116,.2); border-radius: 11px; background: rgba(64,196,116,.04); margin-top: 10px; padding: 9px 11px; }.tracking-privacy-note > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(64,196,116,.12); color: #62d98d; }.tracking-privacy-note p { margin: 0; color: #858c96; font-size: 7px; line-height: 1.5; }.tracking-privacy-note strong { color: #c7ccd2; }
@keyframes mapPulse { 0% { opacity: .75; transform: scale(.75); } 80%,100% { opacity: 0; transform: scale(1.35); } }
.voice-room-hub { border:1px solid #2f343d; border-radius:15px; background:linear-gradient(145deg,rgba(66,135,255,.08),rgba(20,22,27,.94) 45%); margin-top:16px; padding:14px; }.voice-room-hub > header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }.voice-room-hub h2,.group-voice-lounge h2 { margin:3px 0 2px; font-size:15px; }.voice-room-hub header p { margin:0; color:var(--muted); font-size:8px; }.voice-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#52d783; box-shadow:0 0 0 4px rgba(82,215,131,.12); animation:voicePulse 1.5s ease-in-out infinite; }.voice-create-button { border:1px solid rgba(82,215,131,.35); border-radius:8px; background:rgba(82,215,131,.08); color:#65df91; padding:8px 10px; font-size:8px; font-weight:900; cursor:pointer; white-space:nowrap; }.voice-room-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.voice-room-card { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:9px; border:1px solid #313640; border-radius:11px; background:#171a20; padding:10px; }.voice-room-card.live { border-color:rgba(82,215,131,.3); }.voice-room-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#285c41; color:#77efa2; font-size:10px; font-weight:900; }.voice-room-icon.blue { background:#254768; color:#79b6f5; }.voice-room-card strong,.voice-room-card small { display:block; }.voice-room-card strong { margin:2px 0; font-size:9px; }.voice-room-card small { color:#808792; font-size:7px; }.voice-room-card > button,.voice-feature-button { border:0; border-radius:7px; background:#f1f3f5; color:#121419; padding:7px 9px; font-size:7px; font-weight:900; cursor:pointer; white-space:nowrap; }.voice-avatar-stack { display:flex; align-items:center; margin-top:6px; }.voice-avatar-stack img,.voice-avatar-stack b { width:22px; height:22px; border:2px solid #171a20; border-radius:50%; margin-left:-5px; object-fit:cover; }.voice-avatar-stack img:first-child { margin-left:0; }.voice-avatar-stack b { display:grid; place-items:center; background:#303640; color:#b9bec6; font-size:6px; }
.ride-list { display: grid; gap: 11px; margin-top: 18px; }
.ride-card { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 15px; }
.ride-card.featured { border-color: rgba(240,68,62,.48); }
.date-block { width: 54px; height: 54px; display: grid; place-content: center; border: 1px solid #353942; border-radius: 10px; background: #171a1f; text-align: center; }
.date-block b { font: 900 16px/1 "Arial Black", sans-serif; }
.date-block small { margin-top: 3px; color: var(--red-bright); font-size: 7px; font-weight: 900; }
.ride-card h3 { margin: 3px 0; font-size: 13px; }
.ride-card p { margin: 0 0 3px; color: var(--muted); font-size: 9px; }
.ride-meta { color: #6d737d; font-size: 8px; }
.join-button { border: 1px solid #3a3f48; border-radius: 8px; background: #1a1d22; padding: 9px 11px; font-size: 9px; font-weight: 800; cursor: pointer; }
.join-button.joined { border-color: rgba(64,196,116,.35); color: #5bd789; }
.ride-actions { display:grid; justify-items:stretch; gap:5px; }.voice-mini-button { border:1px solid rgba(82,215,131,.28); border-radius:7px; background:rgba(82,215,131,.06); color:#66da90; padding:7px 9px; font-size:7px; font-weight:900; cursor:pointer; white-space:nowrap; }.voice-mini-button.active,.voice-room-card > button.active,.voice-feature-button.active,.group-voice-row > button.active { border-color:#52d783; background:#285c41; color:white; }

.crew-feature { position: relative; height: 350px; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.crew-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crew-feature-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,8,.95), rgba(5,6,8,.05) 80%); }
.crew-logo { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(15,17,21,.76); font: 900 16px "Arial Black", sans-serif; backdrop-filter: blur(10px); }
.crew-copy { position: relative; z-index: 2; }
.crew-copy h2 { margin: 2px 0; font: 900 27px/1 "Arial Black", sans-serif; text-transform: uppercase; }
.crew-copy p { margin: 0; font-size: 10px; }
.crew-copy > span:last-child { color: #aeb3bb; font-size: 8px; }
.section-title-actions { display:flex; align-items:center; gap:7px; }.crew-feature-actions { position:relative; z-index:2; display:grid; gap:6px; }.crew-feature-actions > button { border:0; border-radius:8px; background:white; color:#121317; padding:9px 12px; font-size:9px; font-weight:900; cursor:pointer; }.crew-feature-actions > .voice-feature-button { background:#2b6a49; color:white; }
.group-voice-lounge { border:1px solid #303640; border-radius:14px; background:#14171c; margin-top:12px; padding:13px; }.group-voice-lounge > header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }.group-voice-lounge > header > small { max-width:270px; color:#777e88; font-size:7px; text-align:right; }.group-voice-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.group-voice-row > button { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:8px; border:1px solid #30353e; border-radius:10px; background:#1a1d23; color:white; padding:8px; text-align:left; cursor:pointer; }.group-voice-row .crew-card-mark { width:35px; height:35px; border-radius:9px; font-size:8px; }.group-voice-row b,.group-voice-row small { display:block; }.group-voice-row b { font-size:8px; }.group-voice-row small { margin-top:2px; color:#838a94; font-size:6px; }.group-voice-row i { color:#62d98d; font-size:7px; font-style:normal; font-weight:900; }
.crew-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.crew-card { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); padding: 13px; }
.crew-card-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; font: 900 11px "Arial Black", sans-serif; }
.crew-card-mark.red { background: #692328; }.crew-card-mark.blue { background: #23496b; }.crew-card-mark.silver { background: #4a4f57; }.crew-card-mark.gold { background: #735528; }
.crew-card h3 { margin: 0; font-size: 11px; }.crew-card p { margin: 1px 0; color: var(--muted); font-size: 8px; }.crew-card small { color: #666d77; font-size: 8px; }
.crew-card button { border: 1px solid #343941; border-radius: 7px; background: transparent; padding: 6px 8px; font-size: 8px; cursor: pointer; }
.crew-card button.following,
[data-follow].following { border-color: transparent; color: #747b86; }

.profile-cover { position: relative; height: 210px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: radial-gradient(circle at 80% 25%, rgba(240,68,62,.38), transparent 30%), linear-gradient(135deg,#262a31,#101216); }
.profile-cover::after { content: "RYDESOCIAL"; position: absolute; right: 25px; bottom: -18px; color: rgba(255,255,255,.045); font: 900 74px "Arial Black", sans-serif; letter-spacing: -.08em; transform: skew(-6deg); }
.profile-cover button { position: absolute; z-index: 2; right: 13px; top: 13px; border: 1px solid #414650; border-radius: 7px; background: rgba(8,9,11,.58); padding: 7px 9px; font-size: 8px; cursor: pointer; }
.profile-head { position: relative; display: grid; grid-template-columns: 104px 1fr auto; gap: 18px; margin-bottom: 26px; padding: 0 14px; }
.profile-avatar { width: 104px; height: 104px; display: grid; place-items: center; border: 5px solid var(--bg); border-radius: 50%; background: linear-gradient(145deg,#7a828e,#272b32); margin-top: -46px; object-fit: cover; font: 900 20px "Arial Black", sans-serif; }
.profile-identity { padding-top: 12px; }
.profile-identity h1 { margin: 0; font: 900 23px/1 "Arial Black", sans-serif; text-transform: uppercase; }
.profile-identity > span { color: var(--muted); font-size: 9px; }
.profile-identity p { margin: 8px 0; color: #c1c5cb; font-size: 10px; }
.profile-stats { display: flex; gap: 15px; color: var(--muted); font-size: 9px; }
.profile-stats b { color: white; }
.edit-profile { align-self: start; border: 1px solid #343942; border-radius: 8px; background: #17191e; margin-top: 12px; padding: 8px 11px; font-size: 9px; cursor: pointer; }
.garage-panel { border: 1px solid var(--line); border-radius: 15px; background: var(--panel); padding: 17px; }
.garage-panel .subheading { margin: 0 0 13px; }
.bike-card { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 15px; border-radius: 12px; background: #181b20; padding: 13px; }
.bike-silhouette { height: 85px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: radial-gradient(circle,#3a3e46,#181a1e 70%); }
.bike-silhouette span { font: 900 35px "Arial Black",sans-serif; color: rgba(255,255,255,.1); transform: skew(-10deg); }
.bike-card h3 { margin: 3px 0; font-size: 13px; }.bike-card p { margin: 0 0 7px; color: var(--muted); font-size: 8px; }
.mod-list { display: flex; flex-wrap: wrap; gap: 4px; }.mod-list span { border-radius: 5px; background: #24272d; color: #989ea8; padding: 3px 5px; font-size: 7px; }
.bike-card > button { border: 0; background: transparent; color: var(--red-bright); font-size: 8px; cursor: pointer; }
.collection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.machine-card { overflow: hidden; display: grid; grid-template-rows: 110px 1fr auto; border: 1px solid var(--line); border-radius: 12px; background: #181b20; }
.machine-card > img { width: 100%; height: 110px; object-fit: cover; }
.machine-card > div { padding: 11px 11px 6px; }
.machine-card h3 { margin: 4px 0; font-size: 12px; }.machine-card p { margin: 0 0 8px; color: var(--muted); font-size: 8px; }
.machine-card > button { justify-self: start; border: 0; background: transparent; color: var(--red-bright); padding: 5px 11px 12px; font-size: 8px; cursor: pointer; }
.machine-add-card { min-height: 88px; display: grid; grid-column: 1 / -1; place-content: center; justify-items: center; gap: 4px; border: 1px dashed #3a3f48; border-radius: 12px; background: #15171b; color: #a8aeb7; cursor: pointer; }
.machine-add-card:hover { border-color: var(--red); color: white; }.machine-add-card span { color: var(--red-bright); font-size: 20px; }.machine-add-card b { font-size: 9px; }.machine-add-card small { color: var(--muted); font-size: 7px; }
.profile-tabs { margin: 24px 0 13px; border-bottom: 1px solid var(--line); }
.profile-tabs button { border: 0; border-radius: 0; background: transparent; padding: 9px 13px; }
.profile-tabs button.active { border-bottom: 2px solid var(--red); background: transparent; }
.profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.profile-grid button { position: relative; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 9px; background: #181b20; padding: 0; cursor: pointer; }
.profile-grid img { width: 100%; height: 100%; object-fit: cover; }
.profile-grid span { position: absolute; left: 8px; bottom: 7px; border-radius: 5px; background: rgba(0,0,0,.66); padding: 3px 5px; font-size: 7px; }

.right-rail { grid-column: 3; width: 306px; padding: 30px 24px; }
.rail-section { border-bottom: 1px solid var(--line-soft); margin-bottom: 21px; padding-bottom: 21px; }
.rail-heading { margin-bottom: 12px; }
.rail-heading h2 { margin: 0; font-size: 12px; }
.live-ride { width: 100%; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px; text-align: left; cursor: pointer; }
.live-map-thumb { position: relative; width: 62px; height: 54px; overflow: hidden; border-radius: 8px; background: #1c2027; }
.map-line { position: absolute; width: 80px; height: 2px; background: #3d434d; transform: rotate(31deg); }.map-line.two { transform: rotate(-35deg); top: 32px; }
.live-map-thumb b { position: absolute; inset: 50% auto auto 50%; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--red); transform: translate(-50%,-50%); font-size: 7px; }
.live-ride strong { display: block; font-size: 10px; }.live-ride small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }.live-ride small i { width: 6px; height: 6px; border-radius: 50%; background: #46c576; }.live-ride em { color: var(--red-bright); font-style: normal; }
.suggestion { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; margin-top: 12px; }
.suggestion-avatar { width: 36px; height: 36px; }
.suggestion > span:nth-child(2) strong { display: block; font-size: 9px; }.suggestion > span:nth-child(2) small { display: block; color: var(--muted); font-size: 8px; }
.suggestion button { border: 0; background: transparent; color: var(--red-bright); padding: 3px; font-size: 8px; font-weight: 800; cursor: pointer; }
.trend-section > button { width: 100%; display: grid; grid-template-columns: 23px 1fr; border: 0; background: transparent; color: white; padding: 8px 0; text-align: left; cursor: pointer; }
.trend-section > button > span { color: #4d535d; font: 900 10px monospace; }.trend-section strong { display: block; font-size: 9px; }.trend-section small { display: block; color: var(--muted); font-size: 8px; }
.right-rail blockquote { border-left: 2px solid var(--red); margin: 28px 0; color: #8c929c; padding-left: 13px; font: italic 11px/1.5 Georgia, serif; }.right-rail cite { display: block; margin-top: 3px; color: #555b65; font-size: 8px; }

.mobile-nav { display: none; }

.notification-drawer { position: fixed; z-index: 300; top: 0; right: -390px; width: min(380px, 90vw); height: 100vh; border-left: 1px solid var(--line); background: #111318; box-shadow: -30px 0 80px rgba(0,0,0,.55); padding: 19px; transition: right .28s ease; }
.notification-drawer.open { right: 0; }
.drawer-backdrop { position: fixed; z-index: 290; inset: 0; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: .28s; }.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 13px; }.drawer-head h2 { margin: 0; font-size: 17px; }.drawer-head button,.modal-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #202329; color: white; font-size: 20px; cursor: pointer; }
.notification-item { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 10px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; padding: 14px 3px; text-align: left; cursor: pointer; }.notification-item.unread::after { content: ""; position: absolute; right: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }.notification-item > span:last-child { font-size: 10px; }.notification-item small { display: block; color: var(--muted); font-size: 8px; }

.modal { width: min(620px, calc(100vw - 30px)); max-width: none; border: 1px solid #30343b; border-radius: 18px; background: #13151a; color: white; box-shadow: 0 30px 100px rgba(0,0,0,.72); padding: 0; }
.modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.modal[open] { animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-shell { padding: 21px; }
.modal-shell header { display: flex; align-items: start; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 15px; }.modal-shell h2 { margin: 3px 0 0; font-size: 18px; }
.author-row { display: flex; gap: 9px; align-items: center; margin: 16px 0; }.author-row strong,.author-row small { display: block; font-size: 9px; }.author-row small { color: var(--muted); }
.modal textarea { width: 100%; min-height: 115px; resize: vertical; border: 0; outline: 0; background: transparent; color: white; padding: 3px 0; font-size: 15px; }
.upload-zone { position: relative; min-height: 150px; display: grid; place-content: center; justify-items: center; border: 1px dashed #3b4049; border-radius: 12px; background: #17191e; cursor: pointer; }.upload-zone:hover { border-color: #606773; }.upload-zone span { font-size: 25px; color: #8e949d; }.upload-zone strong { font-size: 10px; }.upload-zone small { color: var(--muted); font-size: 8px; }.upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone.has-file { border-style: solid; border-color: rgba(64,196,116,.45); background: rgba(64,196,116,.07); }
.composer-options { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding: 11px 0; }.composer-options button { border: 0; border-radius: 7px; background: #1b1e24; color: #a1a7b0; padding: 6px 8px; font-size: 8px; cursor: pointer; }.composer-options span { margin-left: auto; color: var(--faint); font-size: 8px; }
.modal-shell footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; }.secondary-action { border: 1px solid #353a43; border-radius: 8px; background: transparent; padding: 8px 13px; font-size: 9px; cursor: pointer; }
.media-modal { width: min(970px, calc(100vw - 28px)); background: #0d0f12; }.media-modal-shell { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 270px; min-height: 560px; }.media-modal-shell > img { width: 100%; height: 100%; max-height: 80vh; object-fit: contain; background: #060708; }.media-close { position: absolute; z-index: 3; top: 10px; right: 10px; }.media-details { display: grid; grid-template-columns: 38px 1fr; align-content: start; gap: 10px; border-left: 1px solid var(--line); padding: 55px 18px 18px; }.media-details strong { font-size: 11px; }.media-details p { color: var(--muted); font-size: 9px; }.media-details .reaction-button { grid-column: 1 / -1; justify-content: center; border: 1px solid var(--line); margin-top: 10px; }

.toast { position: fixed; z-index: 500; left: 50%; bottom: -80px; display: flex; align-items: center; gap: 9px; border: 1px solid #333842; border-radius: 10px; background: #1b1e23; box-shadow: var(--shadow); padding: 10px 15px; transform: translateX(-50%); transition: bottom .25s ease; }.toast.show { bottom: 25px; }.toast span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #40c474; color: #08110b; font-size: 10px; font-weight: 900; }.toast p { margin: 0; font-size: 10px; font-weight: 700; }

.nav-glyph.live-glyph { color: var(--red-bright); font-size: 12px; text-shadow: 0 0 12px rgba(240,68,62,.8); }

.live-wordmark { display: inline-flex; align-items: center; gap: 6px; color: var(--red-bright); font: 900 9px/1 "Arial Black", sans-serif; letter-spacing: .08em; }
.live-wordmark i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 4px rgba(240,68,62,.12); animation: livePulse 1.8s ease infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 8px rgba(240,68,62,0); } }

.live-home-strip { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, rgba(240,68,62,.07), transparent 32%), #101216; margin: 0 0 20px; padding: 14px; }
.live-home-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.live-home-heading > div { display: flex; align-items: center; gap: 10px; }
.live-home-heading h2 { margin: 0; font-size: 12px; }
.live-home-heading > button { border: 0; background: transparent; color: #9ba1aa; padding: 4px; font-size: 8px; cursor: pointer; }
.live-home-heading > button span { color: var(--red-bright); }
.live-home-grid { display: grid; grid-template-columns: 1fr 1fr 125px; gap: 8px; }
.home-live-card { position: relative; height: 108px; overflow: hidden; border: 1px solid #2b2f36; border-radius: 11px; background: #17191e; padding: 0; text-align: left; cursor: pointer; }
.home-live-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.home-live-card:hover > img { transform: scale(1.04); }
.home-live-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,8,.9), transparent 68%); }
.live-card-top { position: absolute; z-index: 2; inset: 7px 7px auto; display: flex; justify-content: space-between; }
.live-card-top b { border-radius: 4px; background: var(--red); padding: 3px 5px; font-size: 6px; letter-spacing: .08em; }
.live-card-top i { border-radius: 4px; background: rgba(5,6,8,.68); padding: 3px 5px; font-size: 6px; font-style: normal; backdrop-filter: blur(7px); }
.live-card-copy { position: absolute; z-index: 2; inset: auto 9px 8px; }
.live-card-copy strong,.live-card-copy small { display: block; }.live-card-copy strong { font-size: 9px; }.live-card-copy small { color: #b2b7bf; font-size: 7px; }
.go-live-home { display: grid; place-content: center; justify-items: center; border: 1px dashed #3b4049; border-radius: 11px; background: #17191e; padding: 8px; cursor: pointer; }
.go-live-home:hover { border-color: var(--red); background: rgba(240,68,62,.06); }
.go-live-home strong { margin-top: 6px; font-size: 9px; }.go-live-home small { color: var(--muted); font-size: 6px; }
.broadcast-rings { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(240,68,62,.28); border-radius: 50%; }
.broadcast-rings::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(240,68,62,.55); border-radius: 50%; }
.broadcast-rings i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); }

.title-actions { display: flex; gap: 7px; }
.live-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(240,68,62,.42); border-radius: 9px; background: rgba(240,68,62,.1); color: white; padding: 9px 12px; font-size: 9px; font-weight: 900; cursor: pointer; }
.live-action:hover { background: var(--red); }.live-action > i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 4px rgba(240,68,62,.12); }.live-action:hover > i { background: white; }.live-action.large { min-height: 42px; padding-inline: 16px; }
.watch-live-banner { width: 100%; display: grid; grid-template-columns: 72px 1fr auto auto; align-items: center; gap: 13px; border: 1px solid rgba(240,68,62,.35); border-radius: 13px; background: linear-gradient(90deg, rgba(240,68,62,.12), transparent 55%), #121419; margin-bottom: 13px; padding: 8px; text-align: left; cursor: pointer; }
.watch-live-thumb { position: relative; width: 72px; height: 54px; overflow: hidden; border-radius: 8px; }.watch-live-thumb img { width: 100%; height: 100%; object-fit: cover; }.watch-live-thumb i { position: absolute; left: 5px; top: 5px; border-radius: 3px; background: var(--red); padding: 2px 4px; font-size: 6px; font-style: normal; font-weight: 900; }
.watch-live-banner > span:nth-child(2) b,.watch-live-banner > span:nth-child(2) small { display: block; }.watch-live-banner > span:nth-child(2) b { font-size: 10px; }.watch-live-banner > span:nth-child(2) small { color: var(--muted); font-size: 8px; }
.watch-live-avatars { display: flex; }.watch-live-avatars i { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #121419; border-radius: 50%; background: #3c424b; margin-left: -6px; font-size: 6px; font-style: normal; font-weight: 900; }.watch-live-avatars i:first-child { margin-left: 0; background: #23496b; }
.watch-live-banner > em { color: var(--red-bright); padding-right: 8px; font-size: 8px; font-style: normal; font-weight: 800; }

.live-section-title { align-items: center; }.live-section-title > div { max-width: 580px; }.live-section-title p { max-width: 540px; margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.live-stage { display: grid; grid-template-columns: minmax(0,1fr) 225px; overflow: hidden; border: 1px solid #2e323a; border-radius: 18px; background: #101216; box-shadow: var(--shadow); }
.live-video-wrap { position: relative; min-width: 0; aspect-ratio: 16/10; overflow: hidden; background: #060708; }.live-placeholder-image,.live-camera-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.live-camera-feed { display: none; }.live-camera-feed.active { display: block; }.live-camera-feed.active + .live-video-shade { background: linear-gradient(0deg, rgba(5,6,8,.8), transparent 45%); }.live-video-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,8,.82), transparent 48%), linear-gradient(90deg, rgba(5,6,8,.2), transparent 35%); }
.live-overlay-top { position: absolute; inset: 13px 13px auto; display: flex; align-items: center; gap: 7px; }.on-air-badge,.viewer-count,.signal-meter { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; background: rgba(7,8,10,.72); padding: 5px 7px; font-size: 7px; font-weight: 800; backdrop-filter: blur(8px); }.on-air-badge { background: var(--red); }.on-air-badge i { width: 5px; height: 5px; border-radius: 50%; background: white; }.on-air-badge b { padding-left: 3px; border-left: 1px solid rgba(255,255,255,.28); }.signal-meter { margin-left: auto; }.signal-meter i { width: 2px; background: #62dd90; align-self: end; }.signal-meter i:nth-child(1){height:3px}.signal-meter i:nth-child(2){height:5px}.signal-meter i:nth-child(3){height:7px}.signal-meter i:nth-child(4){height:9px}
.live-route-chip { position: absolute; left: 13px; top: 51px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(7,8,10,.62); padding: 7px 9px; backdrop-filter: blur(8px); }.live-route-chip > span { color: var(--red-bright); font-size: 14px; }.live-route-chip b,.live-route-chip small { display: block; }.live-route-chip b { font-size: 8px; }.live-route-chip small { color: #aeb3bb; font-size: 6px; }
.live-rider-card { position: absolute; inset: auto 14px 13px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; }.live-rider-card strong,.live-rider-card small { display: block; }.live-rider-card strong { font-size: 10px; }.live-rider-card small { color: #c3c7cd; font-size: 7px; }.live-rider-card > button { border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: rgba(8,9,11,.55); padding: 6px 9px; font-size: 7px; cursor: pointer; backdrop-filter: blur(7px); }
.reaction-burst { position: absolute; right: 16px; bottom: 72px; width: 80px; height: 150px; pointer-events: none; }.reaction-burst i { position: absolute; right: 12px; bottom: 0; color: var(--red-bright); font-size: 18px; font-style: normal; animation: floatHeart 1.2s ease forwards; }@keyframes floatHeart { to { opacity: 0; transform: translateY(-120px) translateX(var(--drift,0)) scale(1.5); } }
.live-chat { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #111318; }.live-chat header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 13px; }.live-chat header strong,.live-chat header small { display: block; }.live-chat header strong { font-size: 10px; }.live-chat header small { color: var(--muted); font-size: 7px; }.live-chat header button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.chat-messages { flex: 1; overflow-y: auto; display: grid; align-content: end; gap: 12px; max-height: 350px; padding: 13px; scrollbar-width: thin; }.chat-messages p { display: grid; grid-template-columns: 27px 1fr; gap: 7px; align-items: start; margin: 0; color: #b8bdc5; font-size: 7px; line-height: 1.5; }.chat-messages p b { display: block; color: white; font-size: 7px; }.chat-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-size: 6px; font-weight: 900; }.chat-avatar.red { background: #692328; }.chat-avatar.blue { background:#23496b }.chat-avatar.silver { background:#4a4f57 }.chat-messages .system-chat { grid-template-columns: 24px 1fr; border-radius: 7px; background: #1a1d22; padding: 7px; color: #7c828c; }.system-chat > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: var(--red-dark); color: white; font-size: 6px; font-weight: 900; }
.chat-form { display: grid; grid-template-columns: 1fr 30px; gap: 6px; border-top: 1px solid var(--line); padding: 10px; }.chat-form input { min-width: 0; border: 1px solid #30343c; border-radius: 8px; background: #181a20; color: white; padding: 8px; outline: 0; font-size: 8px; }.chat-form button { border: 0; border-radius: 8px; background: var(--red); font-weight: 900; cursor: pointer; }
.live-stage-actions { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 13px 13px; background: #0f1115; padding: 9px 12px; }.live-stage-actions > div { display: flex; gap: 4px; }.live-stage-actions button { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 7px; background: transparent; color: #9096a0; padding: 6px 8px; font-size: 8px; cursor: pointer; }.live-stage-actions button:hover { background: #1a1d23; color: white; }.live-stage-actions button span { font-size: 13px; }.replay-status { color: #676e78; font-size: 7px; }
.live-stage-actions .end-live-button { display: none; border: 1px solid rgba(240,68,62,.4); color: var(--red-bright); }.live-stage-actions .end-live-button.active { display: inline-flex; }
.live-safety { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; border: 1px solid rgba(244,185,76,.25); border-radius: 11px; background: rgba(244,185,76,.05); margin: 14px 0 0; padding: 10px 12px; }.live-safety > span,.preflight-safety > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(244,185,76,.14); color: #f4b94c; font-weight: 900; }.live-safety strong { font-size: 9px; }.live-safety p { margin: 1px 0 0; color: #9c9484; font-size: 7px; }
.live-stream-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.live-stream-card { border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }.live-stream-card > span { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }.live-stream-card.active > span { border-color: var(--red); }.live-stream-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }.live-stream-card:hover img { transform: scale(1.04); }.live-stream-card i { position: absolute; top: 7px; left: 7px; border-radius: 4px; background: var(--red); padding: 3px 5px; font-size: 6px; font-style: normal; font-weight: 900; }.live-stream-card > b,.live-stream-card > small { display: block; }.live-stream-card > b { margin-top: 7px; font-size: 9px; }.live-stream-card > small { color: var(--muted); font-size: 7px; }
.pov-map-pin { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: center; border: 1px solid rgba(240,68,62,.42); border-radius: 9px; background: rgba(8,9,11,.85); padding: 7px 9px; text-align: left; cursor: pointer; backdrop-filter: blur(9px); }.pov-map-pin > span { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--red); }.pov-map-pin b { font-size: 7px; }.pov-map-pin small { color: var(--muted); font-size: 6px; }
.rail-live-section .rail-heading h2 { display: flex; align-items: center; gap: 6px; }.rail-live-section .rail-heading h2 > i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(240,68,62,.12); }
.rail-live-card { width: 100%; display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 9px; border: 1px solid rgba(240,68,62,.3); border-radius: 11px; background: #121419; padding: 7px; text-align: left; cursor: pointer; }.rail-live-card > span { position: relative; width: 72px; height: 48px; overflow: hidden; border-radius: 7px; }.rail-live-card img { width: 100%; height: 100%; object-fit: cover; }.rail-live-card span b { position: absolute; left: 4px; top: 4px; border-radius: 3px; background: var(--red); padding: 2px 4px; font-size: 5px; }.rail-live-card div strong,.rail-live-card div small { display: block; }.rail-live-card div strong { font-size: 9px; }.rail-live-card div small { color: var(--muted); font-size: 7px; }.rail-live-card > em { color: var(--red-bright); font-style: normal; }
.rail-go-live { width: 100%; display: grid; grid-template-columns: 29px 1fr; align-items: center; gap: 9px; border: 0; border-radius: 9px; background: transparent; margin-top: 7px; padding: 7px; text-align: left; cursor: pointer; }.rail-go-live:hover { background: #17191e; }.broadcast-mini { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(240,68,62,.42); border-radius: 50%; color: var(--red-bright); }.rail-go-live strong,.rail-go-live small { display: block; }.rail-go-live strong { font-size: 8px; }.rail-go-live small { color: var(--muted); font-size: 7px; }

.live-setup-modal { width: min(780px, calc(100vw - 28px)); }.live-setup-shell { padding: 22px; }.live-setup-header { display: flex; align-items: start; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }.live-setup-header h2 { margin: 8px 0 2px; font-size: 20px; }.live-setup-header p { margin: 0; color: var(--muted); font-size: 9px; }
.live-source-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0; }.live-source-tabs button { display: grid; grid-template-columns: 35px 1fr; align-items: center; column-gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: #17191e; padding: 10px; text-align: left; cursor: pointer; }.live-source-tabs button.active { border-color: var(--red); background: rgba(240,68,62,.07); }.live-source-tabs button > span { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #22252b; color: #b8bdc5; font-size: 17px; }.live-source-tabs button.active > span { background: rgba(240,68,62,.14); color: var(--red-bright); }.live-source-tabs b,.live-source-tabs small { display: block; }.live-source-tabs b { font-size: 10px; }.live-source-tabs small { color: var(--muted); font-size: 7px; }
.source-panel { display: none; }.source-panel.active { display: block; }.camera-preview { position: relative; height: 230px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #090a0c; }.camera-preview video,.camera-preview > img { width: 100%; height: 100%; object-fit: cover; }.camera-preview video { position: absolute; z-index: 2; display: none; }.camera-preview video.active { display: block; }.camera-preview-overlay { position: absolute; z-index: 3; inset: auto 10px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(8,9,11,.72); padding: 7px 9px; backdrop-filter: blur(8px); }.camera-preview-overlay span { color: #c1c6cd; font-size: 8px; }.camera-preview-overlay button { border: 0; border-radius: 6px; background: white; color: #111317; padding: 6px 9px; font-size: 7px; font-weight: 900; cursor: pointer; }.source-help { margin: 6px 0 14px; color: var(--muted); font-size: 7px; }
.action-connect-card { border: 1px solid var(--line); border-radius: 13px; background: #17191e; padding: 14px; }.action-connect-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }.camera-device-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #24272e; color: var(--red-bright); font-size: 19px; }.action-connect-head strong { font-size: 10px; }.action-connect-head p { margin: 1px 0 0; color: var(--muted); font-size: 7px; }.connection-state { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; }.connection-state i { width: 6px; height: 6px; border-radius: 50%; background: #737983; }.connection-state.connected { color: #61d78c; }.connection-state.connected i { background: #40c474; box-shadow: 0 0 0 4px rgba(64,196,116,.12); }
.action-connect-card > label { display: block; color: #8f959f; margin-top: 8px; font-size: 7px; font-weight: 800; }.stream-credential { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 4px; }.stream-credential code { overflow: hidden; border: 1px solid #30343c; border-radius: 7px; background: #101216; color: #c9cdd3; padding: 8px; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }.stream-credential button { border: 1px solid #343943; border-radius: 7px; background: #21242a; padding: 0 10px; font-size: 7px; cursor: pointer; }.camera-support { display: flex; align-items: center; gap: 5px; margin-top: 11px; }.camera-support span { border-radius: 5px; background: #25282f; color: #aeb4bd; padding: 4px 6px; font-size: 6px; }.camera-support button { margin-left: auto; border: 1px solid rgba(240,68,62,.4); border-radius: 7px; background: rgba(240,68,62,.08); color: white; padding: 6px 9px; font-size: 7px; cursor: pointer; }
.live-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }.live-field { display: grid; gap: 4px; color: #8f959f; font-size: 7px; font-weight: 800; }.live-field.full { grid-column: span 2; }.live-field input,.live-field select { width: 100%; border: 1px solid #30343c; border-radius: 8px; background: #181a20; color: white; outline: 0; padding: 9px; font-size: 9px; }.live-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }.live-options label { display: grid; grid-template-columns: 15px 1fr; align-items: start; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: #17191e; padding: 8px; cursor: pointer; }.live-options input { accent-color: var(--red); }.live-options b,.live-options small { display: block; }.live-options b { font-size: 8px; }.live-options small { color: var(--muted); font-size: 6px; }
.preflight-safety { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; border: 1px solid rgba(244,185,76,.25); border-radius: 9px; background: rgba(244,185,76,.05); margin-top: 10px; padding: 8px 10px; }.preflight-safety p { margin: 0; color: #a39a88; font-size: 7px; }.preflight-safety strong { color: #e0d7c4; }.live-setup-shell > footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); margin-top: 13px; padding-top: 13px; }.live-setup-shell > footer .secondary-action { margin-right: auto; }.preflight-status { display: flex; align-items: center; gap: 5px; color: #808792; font-size: 7px; }.preflight-status i { width: 6px; height: 6px; border-radius: 50%; background: #40c474; }.start-live-button i { width: 6px; height: 6px; border-radius: 50%; background: white; }

/* RydeLIVE switching + multiview */
.live-control-deck { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: #111318; padding: 10px 12px; }
.live-control-copy strong { display: block; margin-top: 2px; font-size: 9px; }.view-mode-switch { display: flex; gap: 3px; border: 1px solid #30343c; border-radius: 9px; background: #0c0e11; padding: 3px; }.view-mode-switch button { display: flex; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: transparent; color: #7e8590; padding: 6px 8px; font-size: 7px; font-weight: 800; cursor: pointer; }.view-mode-switch button span { letter-spacing: -2px; }.view-mode-switch button.active { background: #252932; color: white; }.stream-stepper { display: flex; gap: 4px; }.stream-stepper button { width: 31px; height: 31px; border: 1px solid #343943; border-radius: 8px; background: #1a1d23; color: white; cursor: pointer; }.stream-stepper button:hover { border-color: var(--red); }
.live-quick-switch { display: grid; grid-template-columns: repeat(4,minmax(135px,1fr)); gap: 6px; overflow-x: auto; border: 1px solid var(--line); background: #0e1014; padding: 8px; scrollbar-width: thin; }.live-quick-switch > button { min-width: 0; display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; background: #17191e; padding: 6px; text-align: left; cursor: pointer; }.live-quick-switch > button:hover,.live-quick-switch > button.active { border-color: rgba(240,68,62,.5); background: rgba(240,68,62,.07); }.live-quick-switch b,.live-quick-switch small { display: block; white-space: nowrap; }.live-quick-switch b { font-size: 8px; }.live-quick-switch small { overflow: hidden; color: var(--muted); font-size: 6px; text-overflow: ellipsis; }.quick-avatar { position: relative; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #29313d; font-size: 7px; font-weight: 900; }.quick-avatar.red { background:#692328 }.quick-avatar.silver { background:#464c55 }.quick-avatar.gold { background:#675124 }.quick-avatar i { position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border: 2px solid #17191e; border-radius: 50%; background: #49d17d; }.subscriber-stream .quick-avatar i { background: #f4b94c; }
.quick-avatar img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.live-control-deck + .live-quick-switch + .live-stage { border-radius: 0; }.live-view-area { min-width: 0; background: #060708; }.multiview-grid { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; min-height: 100%; padding: 3px; }.live-stage[data-layout="two"] .live-video-wrap,.live-stage[data-layout="four"] .live-video-wrap { display: none; }.live-stage[data-layout="two"] .multiview-grid,.live-stage[data-layout="four"] .multiview-grid { display: grid; }.live-stage[data-layout="two"] .multiview-grid { grid-template-columns: 1fr 1fr; }.live-stage[data-layout="two"] .multiview-tile:nth-child(n+3) { display: none; }
.multiview-tile { position: relative; min-width: 0; aspect-ratio: 16/10; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #111318; padding: 0; text-align: left; }.multiview-tile.active { border-color: var(--red); }.multiview-tile.audio-enabled { box-shadow: inset 0 0 0 1px rgba(82,215,131,.48); }.multiview-focus { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; border:0; background:#111318; padding:0; color:white; text-align:left; cursor:pointer; }.multiview-focus > img { width: 100%; height: 100%; object-fit: cover; }.multiview-focus::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,4,6,.88),transparent 58%); }.multiview-top { position:absolute; z-index:2; inset:7px 7px auto; display:flex; justify-content:space-between; }.multiview-top b,.multiview-top i { border-radius:4px; padding:3px 5px; font-size:6px; font-style:normal; }.multiview-top b { background:var(--red); }.multiview-top i { background:rgba(5,6,8,.7); }.multiview-copy { position:absolute; z-index:2; inset:auto 8px 7px; padding-right:78px; }.multiview-copy strong,.multiview-copy small { display:block; }.multiview-copy strong { font-size:9px; }.multiview-copy small { color:#b8bdc5; font-size:6px; }.multiview-audio-toggle { position:absolute; z-index:5; right:7px; bottom:7px; display:flex; align-items:center; gap:4px; border:1px solid rgba(255,255,255,.2); border-radius:6px; background:rgba(6,7,9,.78); color:#c8cdd4; padding:5px 7px; font-size:6px; font-weight:900; cursor:pointer; backdrop-filter:blur(8px); }.multiview-audio-toggle:hover,.multiview-audio-toggle[aria-pressed="true"] { border-color:rgba(82,215,131,.58); background:rgba(31,91,57,.88); color:white; }.multiview-audio-toggle span { font-size:9px; line-height:1; }.multiview-audio-toggle[hidden] { display:none; }.multiview-tile.locked .multiview-focus img { filter:brightness(.34) blur(2px); }.multiview-tile.locked .multiview-top b { background:#8d6a21; }.multiview-lock { position:absolute; z-index:3; inset:50% 10px auto; text-align:center; transform:translateY(-50%); }.multiview-lock b,.multiview-lock small { display:block; }.multiview-lock b { font-size:10px; }.multiview-lock small { color:#c7b785; font-size:6px; }

/* Creator channels */
.creator-avatar { object-fit: cover; }
.creator-channel-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.creator-channel-row > button { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; background:#121419; padding:10px; text-align:left; cursor:pointer; }.creator-channel-row > button:hover { border-color:#424853; }.creator-channel-row b,.creator-channel-row small { display:block; }.creator-channel-row b { font-size:10px; }.creator-channel-row small { color:var(--muted); font-size:7px; }.creator-channel-row em { color:var(--red-bright); font-size:7px; font-style:normal; }.creator-row-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#244d72; font-size:10px; font-weight:900; }.creator-row-avatar.gold { background:#675124; }
.creator-hero { position:relative; min-height:330px; overflow:hidden; display:grid; grid-template-columns:74px 1fr auto; align-items:end; gap:14px; border:1px solid var(--line); border-radius:18px; padding:24px; }.creator-hero > img,.creator-hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.creator-hero-shade { background:linear-gradient(0deg,rgba(6,7,9,.96) 0,rgba(6,7,9,.48) 66%,rgba(6,7,9,.08)); }.creator-avatar,.creator-identity,.creator-actions { position:relative; z-index:2; }.creator-avatar { width:72px; height:72px; display:grid; place-items:center; border:3px solid rgba(255,255,255,.18); border-radius:19px; background:#244d72; font-size:19px; font-weight:950; }.creator-identity h1 { margin:3px 0 0; font-size:28px; letter-spacing:-.03em; }.creator-identity p { margin:0; color:#c0c5cc; font-size:9px; }.creator-identity small { display:block; max-width:390px; margin-top:5px; color:#a2a8b1; font-size:8px; }.creator-actions { display:flex; align-items:center; gap:7px; }.membership-button { display:grid; grid-template-columns:27px 1fr; column-gap:7px; align-items:center; border:1px solid rgba(244,185,76,.46); border-radius:10px; background:#f4b94c; color:#141006; padding:7px 11px; text-align:left; cursor:pointer; }.membership-button > span { grid-row:span 2; font-size:19px; }.membership-button b,.membership-button small { display:block; }.membership-button b { font-size:8px; }.membership-button small { font-size:6px; opacity:.75; }.channel-stats { display:flex; gap:22px; border-bottom:1px solid var(--line); padding:13px 5px; }.channel-stats span { color:var(--muted); font-size:8px; }.channel-stats b { color:white; font-size:10px; }
.channel-membership-panel { display:grid; grid-template-columns:1.3fr 1fr auto; align-items:center; gap:18px; border:1px solid rgba(244,185,76,.25); border-radius:15px; background:linear-gradient(110deg,rgba(244,185,76,.1),transparent 52%),#121419; margin-top:18px; padding:18px; }.channel-membership-panel h2 { margin:4px 0; font-size:20px; }.channel-membership-panel p { max-width:420px; margin:0; color:var(--muted); font-size:8px; }.channel-membership-panel ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; font-size:8px; }.channel-membership-panel li span { display:inline-block; width:18px; color:#f4b94c; }.channel-membership-panel > button { border:0; border-radius:9px; background:#f4b94c; color:#171105; padding:10px 13px; font-size:8px; font-weight:900; cursor:pointer; }.channel-tabs { margin-top:18px; }.exclusive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.exclusive-card { border:0; background:transparent; padding:0; text-align:left; cursor:pointer; }.exclusive-card > span { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); border-radius:11px; }.exclusive-card img { width:100%; height:100%; object-fit:cover; filter:brightness(.45); transition:.3s; }.exclusive-card:hover img { transform:scale(1.04); filter:brightness(.55); }.exclusive-card i { position:absolute; left:8px; top:8px; border-radius:5px; background:rgba(15,12,5,.86); color:#f4d27c; padding:4px 6px; font-size:6px; font-style:normal; font-weight:900; }.exclusive-card > b,.exclusive-card > small { display:block; }.exclusive-card > b { margin-top:7px; font-size:9px; }.exclusive-card > small { color:var(--muted); font-size:7px; }
.owner-channel-actions { display:flex; gap:7px; }.owner-channel-actions .edit-profile { position:static; }.edit-profile.primary { border-color:var(--red); background:var(--red); }.creator-payment-setup { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; border:1px solid rgba(82,215,131,.28); border-radius:15px; background:linear-gradient(135deg,rgba(82,215,131,.08),rgba(17,19,24,.96) 48%); margin-bottom:12px; padding:14px; }.payment-setup-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:#285c41; color:#79eca2; font-size:18px; }.creator-payment-setup h2 { margin:3px 0; font-size:14px; }.creator-payment-setup p { max-width:510px; margin:0; color:#8a919b; font-size:7px; line-height:1.45; }.payment-readiness { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }.payment-readiness span { border:1px solid #343a43; border-radius:999px; background:#181b20; color:#818893; padding:4px 7px; font-size:6px; font-weight:800; }.payment-readiness span.ready { border-color:rgba(82,215,131,.35); color:#62d98d; }.payment-readiness span.attention { border-color:rgba(244,185,76,.35); color:#f4b94c; }.payment-setup-actions { display:grid; gap:5px; }.payment-setup-actions button { border:1px solid #343a43; border-radius:8px; background:#1b1e24; padding:7px 9px; font-size:7px; font-weight:850; cursor:pointer; }.payment-setup-actions button.primary { border-color:#52d783; background:#2b6a49; color:white; }.creator-dashboard { border:1px solid var(--line); border-radius:16px; background:#111318; margin-bottom:17px; padding:16px; }.dashboard-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.dashboard-heading h2 { margin:3px 0 0; font-size:16px; }.payout-status { display:flex; align-items:center; gap:6px; color:#7f8791; font-size:7px; }.payout-status i { width:7px; height:7px; border-radius:50%; background:#48ca78; }.payout-status.attention i { background:#f4b94c; }.earnings-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.earnings-grid article { border:1px solid var(--line); border-radius:10px; background:#17191e; padding:11px; }.earnings-grid small,.earnings-grid strong,.earnings-grid span { display:block; }.earnings-grid small { color:var(--muted); font-size:7px; }.earnings-grid strong { margin:5px 0 2px; font-size:16px; }.earnings-grid span { color:#737a84; font-size:6px; }.earnings-grid .fee-card { border-color:rgba(240,68,62,.28); background:rgba(240,68,62,.06); }.fee-card strong { color:var(--red-bright); }.fee-explainer { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }.fee-explainer > span { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:rgba(240,68,62,.12); color:var(--red-bright); font-size:13px; font-weight:950; }.fee-explainer p { margin:0; color:var(--muted); font-size:7px; }.fee-explainer p strong { display:block; color:white; font-size:8px; }.fee-explainer button,.channel-access-settings button { border:0; background:transparent; color:var(--red-bright); font-size:8px; cursor:pointer; }.channel-access-settings { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid rgba(244,185,76,.2); border-radius:13px; background:rgba(244,185,76,.04); margin-bottom:17px; padding:14px 16px; }.channel-access-settings h2 { margin:3px 0; font-size:14px; }.channel-access-settings p { margin:0; color:var(--muted); font-size:7px; }

/* Membership and channel dialogs */
.subscriber-access-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; border:1px solid rgba(244,185,76,.25); border-radius:10px; background:rgba(244,185,76,.05); margin-top:10px; padding:10px; }.subscriber-access-card > div { display:flex; align-items:center; gap:8px; }.subscriber-access-card > div > span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(244,185,76,.13); color:#f4b94c; }.subscriber-access-card p { margin:0; }.subscriber-access-card strong,.subscriber-access-card small { display:block; }.subscriber-access-card strong { font-size:8px; }.subscriber-access-card small { color:#9d9481; font-size:6px; }.subscriber-access-card > small { grid-column:1/-1; }.access-toggle { display:flex; align-items:center; gap:6px; cursor:pointer; }.access-toggle input { position:absolute; opacity:0; }.access-toggle > span { position:relative; width:30px; height:17px; border-radius:999px; background:#30343c; }.access-toggle > span::after { content:""; position:absolute; left:3px; top:3px; width:11px; height:11px; border-radius:50%; background:white; transition:.2s; }.access-toggle input:checked + span { background:#f4b94c; }.access-toggle input:checked + span::after { transform:translateX(13px); }.access-toggle b { font-size:7px; }
.subscription-modal { width:min(570px,calc(100vw - 28px)); }.subscription-shell,.channel-setup-shell { padding:22px; }.subscription-shell header,.channel-setup-shell header { display:flex; align-items:start; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; }.subscription-shell h2,.channel-setup-shell h2 { margin:4px 0 2px; font-size:21px; }.subscription-shell header p,.channel-setup-shell header p { margin:0; color:var(--muted); font-size:8px; }.membership-summary { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; border:1px solid rgba(244,185,76,.28); border-radius:12px; background:rgba(244,185,76,.06); margin-top:15px; padding:12px; }.membership-star { width:41px; height:41px; display:grid; place-items:center; border-radius:11px; background:#f4b94c; color:#171105; font-size:20px; }.membership-summary strong,.membership-summary small { display:block; }.membership-summary strong { font-size:9px; }.membership-summary small { color:var(--muted); font-size:7px; }.membership-summary > b { font-size:16px; }.membership-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; padding:0; list-style:none; }.membership-benefits li { border:1px solid var(--line); border-radius:8px; background:#17191e; padding:8px; color:#b1b7c0; font-size:7px; }.membership-benefits li span { color:#52d783; margin-right:4px; }.checkout-fields { display:grid; gap:9px; }.checkout-fields label,.channel-form-grid label { display:grid; gap:4px; color:#969ca6; font-size:7px; font-weight:800; }.checkout-fields input,.channel-form-grid input,.channel-form-grid textarea,.channel-form-grid select { width:100%; border:1px solid #30343c; border-radius:8px; background:#181a20; color:white; outline:0; padding:9px; font-size:9px; }.channel-form-grid textarea { min-height:72px; resize:vertical; }.payment-placeholder { display:grid; grid-template-columns:28px 1fr; align-items:center; column-gap:8px; border:1px solid #30343c; border-radius:8px; background:#181a20; padding:8px; }.payment-placeholder > span { grid-row:span 2; }.payment-placeholder b,.payment-placeholder small { display:block; }.payment-placeholder b { color:white; font-size:8px; }.payment-placeholder small { color:var(--muted); font-size:6px; }.fee-breakdown { display:grid; gap:5px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:12px; padding:10px 0; }.fee-breakdown > div { display:flex; justify-content:space-between; color:#a8aeb7; font-size:8px; }.fee-breakdown > div:first-child { color:white; font-size:9px; }.fee-breakdown > small { color:#6f7680; font-size:6px; line-height:1.45; }.checkout-consent { display:flex; gap:7px; margin-top:10px; color:#8f959f; font-size:7px; }.checkout-consent input { accent-color:var(--red); }.subscription-shell footer,.channel-setup-shell footer { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.billing-provider-status { border:1px solid rgba(82,215,131,.2); border-radius:8px; background:rgba(82,215,131,.045); margin:10px 0 0; padding:8px; color:#7f8790; font-size:7px; text-align:center; }.billing-provider-status.error { border-color:rgba(240,68,62,.3); background:rgba(240,68,62,.06); color:#ff8b86; }.billing-provider-status.loading { color:#f4b94c; }
.channel-setup-modal { width:min(700px,calc(100vw - 28px)); }.channel-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }.channel-form-grid .full { grid-column:1/-1; }.handle-field,.price-field { display:grid; grid-template-columns:auto 1fr; align-items:center; border:1px solid #30343c; border-radius:8px; background:#181a20; padding-left:9px; }.handle-field span,.price-field span { color:#7e8590; }.handle-field input,.price-field input { border:0; background:transparent; }.paid-content-settings { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; border:0; margin:12px 0 0; padding:0; }.paid-content-settings legend { margin-bottom:6px; color:#969ca6; font-size:7px; font-weight:800; }.paid-content-settings label { display:grid; grid-template-columns:15px 1fr; gap:6px; border:1px solid var(--line); border-radius:9px; background:#17191e; padding:9px; cursor:pointer; }.paid-content-settings input { accent-color:var(--red); }.paid-content-settings b,.paid-content-settings small { display:block; }.paid-content-settings b { font-size:8px; }.paid-content-settings small { color:var(--muted); font-size:6px; }.channel-fee-preview { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; border:1px solid rgba(240,68,62,.25); border-radius:10px; background:rgba(240,68,62,.05); margin-top:10px; padding:10px; }.channel-fee-preview > span { color:#9ca2ab; font-size:6px; font-weight:900; }.channel-fee-preview > span b { display:block; color:var(--red-bright); font-size:18px; }.channel-fee-preview p { margin:0; }.channel-fee-preview strong,.channel-fee-preview small { display:block; }.channel-fee-preview strong { font-size:8px; }.channel-fee-preview small { color:var(--muted); font-size:6px; }

/* Creator promo codes */
.promo-dashboard { border:1px solid var(--line); border-radius:16px; background:linear-gradient(125deg,rgba(66,135,255,.06),transparent 38%),#111318; margin-bottom:17px; padding:16px; }.promo-dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); padding-bottom:12px; }.promo-dashboard-head h2 { margin:3px 0; font-size:16px; }.promo-dashboard-head p { margin:0; color:var(--muted); font-size:7px; }.promo-dashboard-head > div:last-child { display:flex; gap:6px; }.promo-dashboard-head button { border:1px solid #343943; border-radius:8px; background:#181a20; padding:8px 10px; font-size:7px; cursor:pointer; }.promo-dashboard-head .primary-action { border-color:var(--red); background:var(--red); }.promo-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:11px 0; }.promo-summary > span { border:1px solid var(--line); border-radius:9px; background:#17191e; padding:9px; }.promo-summary small,.promo-summary b { display:block; }.promo-summary small { color:var(--muted); font-size:6px; }.promo-summary b { margin-top:3px; font-size:13px; }.promo-code-list { display:grid; gap:6px; }.promo-code-row { display:grid; grid-template-columns:105px 1fr auto auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px; background:#15171c; padding:8px; }.promo-code-row.inactive { opacity:.58; }.promo-code-row > code { display:grid; place-items:center; min-height:34px; border:1px dashed rgba(66,135,255,.45); border-radius:8px; background:rgba(66,135,255,.07); color:#7eabff; font-size:9px; font-weight:900; }.promo-code-row b,.promo-code-row small { display:block; }.promo-code-row b { font-size:8px; }.promo-code-row small { color:var(--muted); font-size:6px; }.promo-code-row > span { color:#858c96; font-size:6px; }.promo-code-row > span b { color:white; font-size:9px; }.promo-code-row > div:last-child { display:flex; gap:4px; }.promo-code-row button { border:0; border-radius:6px; background:#24272e; padding:5px 7px; font-size:6px; cursor:pointer; }.promo-code-row button.danger { color:#ff716a; }.promo-empty { border:1px dashed #343943; border-radius:9px; color:var(--muted); padding:15px; text-align:center; font-size:8px; }
.promo-redeem { display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px; border:1px solid rgba(66,135,255,.25); border-radius:10px; background:rgba(66,135,255,.05); margin:10px 0; padding:10px; }.promo-redeem label { display:grid; gap:4px; color:#969ca6; font-size:7px; font-weight:800; }.promo-redeem label > div { display:grid; grid-template-columns:1fr auto; border:1px solid #30343c; border-radius:8px; background:#181a20; }.promo-redeem input { min-width:0; border:0; outline:0; background:transparent; color:white; padding:9px; text-transform:uppercase; font-size:9px; }.promo-redeem label button { border:0; border-left:1px solid #30343c; background:#22262d; color:#76a6ff; padding:0 12px; font-size:7px; font-weight:900; cursor:pointer; }.promo-redeem > p { margin:0; color:#78808b; font-size:6px; }.promo-redeem > p.success { color:#62d990; }.promo-redeem > p.error { color:#ff716a; }.promo-redeem > p button { border:0; background:transparent; color:#77a8ff; padding:0; font:800 7px monospace; cursor:pointer; }.promo-discount-line { color:#76a6ff !important; }.promo-discount-line[hidden] { display:none; }
.promo-code-modal { width:min(720px,calc(100vw - 28px)); }.promo-code-shell { padding:22px; }.promo-code-shell header { display:flex; align-items:start; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:13px; }.promo-code-shell h2 { margin:4px 0 2px; font-size:20px; }.promo-code-shell header p { margin:0; color:var(--muted); font-size:8px; }.promo-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }.promo-form-grid label { display:grid; gap:4px; color:#969ca6; font-size:7px; font-weight:800; }.promo-form-grid label.full { grid-column:1/-1; }.promo-form-grid input,.promo-form-grid select { width:100%; border:1px solid #30343c; border-radius:8px; background:#181a20; color:white; outline:0; padding:9px; font-size:9px; }.promo-code-field,.promo-value-field { display:grid; grid-template-columns:1fr auto; border:1px solid #30343c; border-radius:8px; background:#181a20; }.promo-code-field input,.promo-value-field input { border:0; background:transparent; }.promo-code-field button { border:0; border-left:1px solid #30343c; background:#22262d; color:#76a6ff; padding:0 11px; font-size:7px; font-weight:800; cursor:pointer; }.promo-value-field { grid-template-columns:auto 1fr; }.promo-value-field > span { display:grid; place-items:center; min-width:31px; color:#76a6ff; font-size:10px; font-weight:900; }.promo-form-grid label > small { color:#6d747e; font-size:6px; font-weight:400; }.promo-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }.promo-options label { display:grid; grid-template-columns:15px 1fr; align-items:start; gap:6px; border:1px solid var(--line); border-radius:9px; background:#17191e; padding:9px; cursor:pointer; }.promo-options input { accent-color:var(--red); }.promo-options b,.promo-options small { display:block; }.promo-options b { font-size:8px; }.promo-options small { color:var(--muted); font-size:6px; }.promo-preview { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; border:1px solid rgba(66,135,255,.28); border-radius:10px; background:rgba(66,135,255,.05); margin-top:10px; padding:10px; }.promo-preview > span { border-radius:7px; background:#4287ff; padding:7px 9px; font-size:8px; font-weight:950; }.promo-preview p { margin:0; }.promo-preview strong,.promo-preview small { display:block; }.promo-preview strong { font-size:8px; }.promo-preview small { color:var(--muted); font-size:6px; }.promo-code-shell footer { display:flex; justify-content:flex-end; gap:7px; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }

/* Event, community, and custom voice chat */
.voice-session-modal { width:min(720px,calc(100vw - 28px)); }.voice-session-shell { padding:22px; }.voice-session-shell > header { display:flex; align-items:start; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:13px; }.voice-session-shell h2 { margin:4px 0 2px; font-size:20px; }.voice-session-shell header p { margin:0; color:var(--muted); font-size:8px; }.voice-session-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }.voice-session-fields label { display:grid; gap:4px; color:#969ca6; font-size:7px; font-weight:800; }.voice-session-fields input,.voice-session-fields select { width:100%; border:1px solid #30343c; border-radius:8px; background:#181a20; color:white; outline:0; padding:9px; font-size:9px; }.voice-invite-picker { display:grid; grid-template-columns:1fr 1fr; gap:7px; border:0; margin:14px 0 0; padding:0; }.voice-invite-picker legend { width:100%; display:flex; justify-content:space-between; margin-bottom:7px; color:#a5abb5; font-size:8px; font-weight:900; }.voice-invite-picker legend small { color:#62d98d; font-size:7px; }.voice-invite-picker label { position:relative; display:grid; grid-template-columns:35px 1fr 18px; align-items:center; gap:8px; border:1px solid #30353e; border-radius:9px; background:#181b20; padding:8px; cursor:pointer; }.voice-invite-picker input { position:absolute; opacity:0; }.voice-invite-picker img { width:34px; height:34px; border-radius:10px; object-fit:cover; }.voice-invite-picker b,.voice-invite-picker small { display:block; }.voice-invite-picker b { font-size:8px; }.voice-invite-picker small { margin-top:2px; color:#7c838e; font-size:6px; }.voice-invite-picker i { width:17px; height:17px; display:grid; place-items:center; border:1px solid #3c424c; border-radius:50%; color:transparent; font-size:8px; font-style:normal; }.voice-invite-picker label:has(input:checked) { border-color:rgba(82,215,131,.45); background:rgba(82,215,131,.055); }.voice-invite-picker input:checked ~ i { border-color:#52d783; background:#52d783; color:#0d1a12; }.voice-session-options { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }.voice-session-options label { display:grid; grid-template-columns:15px 1fr; gap:7px; border:1px solid var(--line); border-radius:9px; background:#17191e; padding:9px; cursor:pointer; }.voice-session-options input { accent-color:#52d783; }.voice-session-options b,.voice-session-options small { display:block; }.voice-session-options b { font-size:8px; }.voice-session-options small { color:var(--muted); font-size:6px; }.voice-safety-note { display:grid; grid-template-columns:31px 1fr; align-items:center; gap:9px; border:1px solid rgba(66,135,255,.22); border-radius:10px; background:rgba(66,135,255,.05); margin-top:10px; padding:9px; }.voice-safety-note > span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:rgba(66,135,255,.14); color:#76a6ff; }.voice-safety-note p { margin:0; }.voice-safety-note strong,.voice-safety-note small { display:block; }.voice-safety-note strong { font-size:8px; }.voice-safety-note small { margin-top:2px; color:#7e8590; font-size:6px; }.voice-session-shell footer { display:flex; justify-content:flex-end; gap:7px; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
.voice-room-dock[hidden] { display:none; }.voice-room-dock { position:fixed; z-index:270; right:20px; bottom:20px; width:min(470px,calc(100vw - 40px)); border:1px solid #3a404a; border-radius:17px; background:rgba(17,19,24,.96); box-shadow:0 24px 70px rgba(0,0,0,.72); padding:13px; backdrop-filter:blur(18px); }.voice-room-dock > header { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; }.voice-room-dock header strong,.voice-room-dock header small { display:block; }.voice-room-dock header strong { margin-top:3px; font-size:12px; }.voice-room-dock header small { margin-top:2px; color:#888f99; font-size:7px; }.voice-signal { color:#52d783; font-size:9px; letter-spacing:1px; }.voice-participants { display:flex; align-items:start; gap:10px; overflow-x:auto; padding:12px 2px 10px; }.voice-person { position:relative; flex:0 0 auto; display:grid; justify-items:center; gap:3px; }.voice-person img { width:42px; height:42px; border:2px solid #343a43; border-radius:50%; object-fit:cover; transition:border-color .2s,box-shadow .2s; }.voice-person > i { position:absolute; right:1px; top:29px; width:10px; height:10px; border:2px solid #15171c; border-radius:50%; background:#52d783; }.voice-person small { color:#9198a2; font-size:6px; }.voice-person.speaking img { border-color:#52d783; box-shadow:0 0 0 4px rgba(82,215,131,.16); }.voice-person.you img { border-color:var(--red-bright); }.voice-person.muted > i { background:#f4b94c; }.voice-controls { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }.voice-controls button { display:grid; place-items:center; gap:2px; border:1px solid #343a43; border-radius:9px; background:#1c1f25; color:white; padding:7px 4px; cursor:pointer; }.voice-controls button span { font-size:12px; }.voice-controls button b { font-size:6px; }.voice-controls button[aria-pressed="true"] { border-color:#626a76; background:#343942; color:#a9afb8; }.voice-controls .leave { border-color:rgba(240,68,62,.35); background:rgba(240,68,62,.1); color:#ff817b; }.voice-mic-status { margin:8px 0 0; color:#777f89; font-size:6px; text-align:center; }.voice-mic-status.ready { color:#58d485; }.voice-mic-status.warning { color:#f4b94c; }.voice-room-dock audio { display:none; }
@keyframes voicePulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.85); } }

/* Control Room */
.admin-entry { width:100%; display:grid; grid-template-columns:31px 1fr auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:10px; background:#121419; margin-top:10px; padding:8px; text-align:left; cursor:pointer; }.admin-entry:hover,.admin-entry.active { border-color:rgba(240,68,62,.45); background:rgba(240,68,62,.07); }.admin-entry > span:first-child { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#252932; color:var(--red-bright); font-size:13px; }.admin-entry b,.admin-entry small { display:block; }.admin-entry b { font-size:8px; }.admin-entry small { color:var(--muted); font-size:6px; }.admin-entry em { color:var(--red-bright); font-style:normal; }
.admin-mode .layout { grid-template-columns:238px minmax(0,1fr); }.admin-mode .right-rail { display:none; }.admin-mode .content { border-right:0; }.admin-view { max-width:1180px; }
.admin-login-gate { width:min(620px,100%); border:1px solid #2e333c; border-radius:20px; background:linear-gradient(145deg,rgba(240,68,62,.08),transparent 35%),#101216; box-shadow:var(--shadow); margin:5vh auto; padding:28px; }.admin-login-brand { display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:18px; }.admin-shield { width:56px; height:56px; display:grid; place-items:center; background:var(--red); clip-path:polygon(0 9%,100% 0,88% 83%,50% 100%,10% 83%); font:900 14px/1 "Arial Black",sans-serif; }.admin-login-brand h1 { margin:3px 0 0; font:900 28px/1 "Arial Black",sans-serif; text-transform:uppercase; }.admin-login-brand p { margin:5px 0 0; color:var(--muted); font-size:9px; }.admin-login-form { display:grid; gap:11px; margin-top:18px; }.admin-login-form > label,.admin-password-shell > label { display:grid; gap:5px; color:#a0a6af; font-size:8px; font-weight:800; }.admin-login-form input,.admin-password-shell input { width:100%; border:1px solid #343943; border-radius:9px; background:#181a20; color:white; outline:0; padding:11px; font-size:10px; }.password-field { display:grid; grid-template-columns:1fr auto; border:1px solid #343943; border-radius:9px; background:#181a20; }.password-field input { border:0; background:transparent; }.password-field button { border:0; background:transparent; color:var(--red-bright); padding:0 11px; font-size:8px; font-weight:800; cursor:pointer; }.admin-signin { width:100%; min-height:42px; margin-top:2px; }.admin-login-error { min-height:16px; margin:0; color:#ff7771; font-size:8px; }.demo-credentials { display:grid; grid-template-columns:auto 1fr 1fr; gap:8px; align-items:center; border:1px dashed #3b414b; border-radius:11px; background:#15171c; margin-top:17px; padding:11px; }.demo-credentials > span { grid-row:span 2; color:#777e89; font-size:6px; font-weight:900; letter-spacing:.12em; writing-mode:vertical-rl; transform:rotate(180deg); }.demo-credentials p { margin:0; }.demo-credentials b,.demo-credentials code { display:block; }.demo-credentials b { color:#777e89; font-size:6px; }.demo-credentials code { color:#e9ebee; font-size:9px; }.demo-credentials small { grid-column:2/-1; color:#6f7680; font-size:6px; }.admin-security-note { display:grid; grid-template-columns:27px 1fr; align-items:center; gap:9px; margin-top:12px; color:#8e949e; }.admin-security-note > span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:rgba(244,185,76,.12); color:#f4b94c; font-weight:900; }.admin-security-note p { margin:0; font-size:7px; }.admin-security-note strong { display:block; color:#c4bda9; font-size:8px; }
.admin-console[hidden],.admin-password-alert[hidden] { display:none; }.admin-topline { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:16px; }.admin-topline h1 { margin:4px 0 0; font:900 30px/1 "Arial Black",sans-serif; text-transform:uppercase; }.admin-topline p { margin:5px 0 0; color:var(--muted); font-size:8px; }.admin-session { display:flex; align-items:center; gap:8px; }.admin-role { display:flex; align-items:center; gap:6px; border:1px solid rgba(82,215,131,.25); border-radius:8px; background:rgba(82,215,131,.06); color:#9eb3a5; padding:7px 9px; font-size:7px; font-weight:800; }.admin-role i { width:7px; height:7px; border-radius:50%; background:#52d783; }.admin-session button { border:1px solid #343943; border-radius:8px; background:#17191e; padding:7px 10px; font-size:8px; cursor:pointer; }.admin-password-alert { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; border:1px solid rgba(244,185,76,.25); border-radius:10px; background:rgba(244,185,76,.05); margin-top:14px; padding:9px 11px; }.admin-password-alert > span { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:rgba(244,185,76,.14); color:#f4b94c; font-weight:900; }.admin-password-alert p { margin:0; color:#a69e8c; font-size:7px; }.admin-password-alert strong { display:block; color:#ded7c8; font-size:8px; }.admin-password-alert button { border:0; background:transparent; color:#f4c660; font-size:8px; font-weight:800; cursor:pointer; }
.admin-tabs { display:flex; gap:4px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#0f1115; margin:14px 0; padding:5px; scrollbar-width:thin; }.admin-tabs button { min-width:max-content; display:flex; align-items:center; gap:6px; border:0; border-radius:8px; background:transparent; color:#7e8590; padding:8px 10px; font-size:7px; font-weight:800; cursor:pointer; }.admin-tabs button > span { font-size:11px; }.admin-tabs button > i { min-width:16px; border-radius:999px; background:#30343c; color:#aaaeb6; padding:1px 4px; font-size:6px; font-style:normal; text-align:center; }.admin-tabs button.active { background:#252932; color:white; }.admin-tabs button.active > i { background:var(--red); color:white; }.admin-panel { display:none; }.admin-panel.active { display:block; animation:viewIn .25s ease; }
.admin-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }.admin-metrics article,.finance-summary article { border:1px solid var(--line); border-radius:11px; background:#111318; padding:11px; }.admin-metrics small,.admin-metrics strong,.admin-metrics span,.finance-summary small,.finance-summary strong { display:block; }.admin-metrics small,.finance-summary small { color:#858c96; font-size:7px; }.admin-metrics strong,.finance-summary strong { margin:5px 0 3px; font-size:17px; letter-spacing:-.03em; }.admin-metrics span { color:#707782; font-size:6px; }.admin-metrics .metric-up { color:#52d783; }.admin-metrics .metric-live { color:var(--red-bright); }.admin-metrics .metric-warn { color:#f4b94c; }
.admin-overview-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:10px; margin-top:10px; }.admin-card { border:1px solid var(--line); border-radius:13px; background:#111318; padding:13px; }.admin-card > header { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:10px; }.admin-card > header h2 { margin:3px 0 0; font-size:12px; }.admin-card > header button { border:0; background:transparent; color:var(--red-bright); font-size:7px; cursor:pointer; }.revenue-chart-card header > strong { font-size:18px; }.admin-bar-chart { height:170px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:9px; border-bottom:1px solid #333842; padding:18px 8px 0; }.admin-bar-chart > span { position:relative; height:var(--bar); border-radius:4px 4px 0 0; background:linear-gradient(0deg,#6d1714,var(--red)); }.admin-bar-chart > span::after { content:""; position:absolute; left:0; right:0; top:20%; height:20%; background:rgba(255,255,255,.09); }.admin-bar-chart > span.today { background:linear-gradient(0deg,#8e641d,#f4b94c); }.admin-bar-chart i { position:absolute; left:50%; bottom:-18px; color:#6e7580; font-size:6px; font-style:normal; transform:translateX(-50%); }.revenue-chart-card footer { display:flex; gap:13px; padding-top:24px; color:#7e8590; font-size:6px; }.revenue-chart-card footer i { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:4px; }.creator-key { background:var(--red); }.platform-key { background:#f4b94c; }
.priority-queue > button { width:100%; display:grid; grid-template-columns:39px 1fr auto; align-items:center; gap:8px; border:0; border-bottom:1px solid var(--line-soft); background:transparent; padding:11px 0; text-align:left; cursor:pointer; }.priority-queue > button:last-child { border-bottom:0; }.priority-queue b,.priority-queue small { display:block; }.priority-queue b { font-size:8px; }.priority-queue small { color:var(--muted); font-size:6px; }.priority-queue em { color:var(--red-bright); font-size:6px; font-style:normal; }.priority { display:inline-grid; place-items:center; min-height:22px; border-radius:5px; padding:3px 5px; font-size:5px; font-style:normal; font-weight:900; }.priority.red { background:rgba(240,68,62,.13); color:var(--red-bright); }.priority.gold { background:rgba(244,185,76,.12); color:#f4c660; }.priority.blue { background:rgba(66,135,255,.12); color:#6ea1ff; }.admin-status-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }.admin-status-row article { display:grid; grid-template-columns:32px 1fr; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; background:#101216; padding:9px; }.status-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; font-weight:900; }.status-icon.good { background:rgba(82,215,131,.1); color:#52d783; }.status-icon.warn { background:rgba(244,185,76,.1); color:#f4b94c; }.admin-status-row b,.admin-status-row small { display:block; }.admin-status-row b { font-size:8px; }.admin-status-row small { color:var(--muted); font-size:6px; }

.admin-panel-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:13px; }.admin-panel-heading h2 { margin:4px 0 0; font-size:20px; }.admin-panel-heading p { margin:3px 0 0; color:var(--muted); font-size:8px; }.admin-panel-tools { display:flex; gap:6px; }.admin-panel-tools select,.admin-panel-tools button,.admin-export { border:1px solid #343943; border-radius:8px; background:#17191e; color:white; padding:8px 10px; font-size:7px; cursor:pointer; }.admin-search { min-width:240px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px; border:1px solid #343943; border-radius:9px; background:#17191e; color:#7f8690; padding:0 10px; }.admin-search input { min-width:0; border:0; outline:0; background:transparent; color:white; padding:9px 0; font-size:8px; }
.moderation-list,.stream-admin-list { display:grid; gap:8px; }.moderation-list > article { position:relative; display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:11px; border:1px solid var(--line); border-radius:12px; background:#111318; padding:10px; }.report-preview { width:72px; height:62px; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#1d2026; }.report-preview i { border-radius:4px; background:rgba(5,6,8,.72); color:white; padding:4px 6px; font-size:6px; font-style:normal; font-weight:900; }.record-meta { color:#747b86; font-size:6px; }.record-meta .priority { display:inline-flex; margin-right:5px; }.moderation-list h3 { margin:4px 0 2px; font-size:10px; }.moderation-list p { margin:0; color:var(--muted); font-size:7px; }.moderation-list article > div > small { color:#6d747e; font-size:6px; }.record-actions { display:flex; gap:5px; }.record-actions button,.stream-admin-list article > div:nth-child(3) button,.content-admin-grid footer button { border:1px solid #343943; border-radius:7px; background:#181b20; padding:6px 8px; font-size:6px; cursor:pointer; }.record-actions button.primary { border-color:var(--red); background:var(--red); }.record-actions button.danger,.stream-admin-list button.danger { border-color:rgba(240,68,62,.4); color:var(--red-bright); }.record-status { position:absolute; right:8px; top:7px; color:#777e89; font-size:5px; font-style:normal; }
.admin-table { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#111318; }.admin-table-head,.admin-table-row { display:grid; grid-template-columns:1.7fr .7fr .8fr .8fr 1fr; align-items:center; gap:9px; padding:9px 12px; }.admin-table-head { background:#17191e; color:#747b85; font-size:6px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }.admin-table-row { border-top:1px solid var(--line-soft); font-size:8px; }.admin-table-row[hidden] { display:none; }.admin-table-row > span:first-child { display:flex; align-items:center; gap:8px; }.admin-table-row b,.admin-table-row small { display:block; }.admin-table-row small { color:var(--muted); font-size:6px; }.table-avatar { flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:#3e444e; font-size:7px; font-style:normal; font-weight:900; }.table-avatar.red { background:#692328; }.table-avatar.blue { background:#23496b; }.table-avatar.silver { background:#494f58; }.table-avatar.gold { background:#675124; }.state { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:3px 6px; font-size:6px; font-style:normal; }.state.active { background:rgba(82,215,131,.1); color:#62d990; }.state.review { background:rgba(244,185,76,.1); color:#f4c660; }.state.warn { background:rgba(240,68,62,.1); color:#ff6d66; }.admin-table-row > span:last-child { display:flex; gap:4px; }.admin-table-row > span:last-child button { border:0; border-radius:6px; background:#23262c; padding:5px 6px; font-size:6px; cursor:pointer; }
.verification-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.verification-grid > article { position:relative; border:1px solid var(--line); border-radius:12px; background:#111318; padding:12px; }.verification-head { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding-bottom:9px; }.verification-head b,.verification-head small { display:block; }.verification-head b { font-size:9px; }.verification-head small { color:var(--muted); font-size:6px; }.verification-head > i { color:#f4c660; font-size:6px; font-style:normal; }.verification-grid ul { display:grid; gap:5px; margin:10px 0; padding:0; list-style:none; color:#8b929c; font-size:7px; }.verification-grid li.done { color:#aeb5bd; }.verification-grid footer { display:flex; justify-content:flex-end; gap:5px; }.verification-grid footer button { border:1px solid #343943; border-radius:7px; background:#181b20; padding:6px 8px; font-size:6px; cursor:pointer; }.verification-grid footer button.approve { border-color:#347f51; background:#205737; }.creator-policy { margin-top:10px; }.split-badge { border-radius:8px; background:var(--red); padding:6px 9px; font-size:11px; font-weight:900; }.creator-policy > div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:10px; }.creator-policy p { border:1px solid var(--line); border-radius:9px; background:#17191e; margin:0; padding:10px; }.creator-policy p b,.creator-policy p strong,.creator-policy p small { display:block; }.creator-policy p b { color:#858c96; font-size:7px; }.creator-policy p strong { margin:3px 0; font-size:16px; }.creator-policy p small { color:#6f7680; font-size:6px; }
.danger-action { border:1px solid rgba(240,68,62,.45); border-radius:8px; background:rgba(240,68,62,.08); color:var(--red-bright); padding:8px 10px; font-size:7px; font-weight:800; cursor:pointer; }.liveops-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:9px; }.liveops-summary span { border:1px solid var(--line); border-radius:9px; background:#111318; color:var(--muted); padding:9px; font-size:7px; }.liveops-summary b { color:white; font-size:12px; margin-right:4px; }.stream-admin-list > article { position:relative; display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; background:#111318; padding:8px; }.stream-monitor { position:relative; width:100px; height:62px; overflow:hidden; border-radius:8px; }.stream-monitor img { width:100%; height:100%; object-fit:cover; }.stream-monitor > i { position:absolute; left:5px; top:5px; border-radius:4px; background:var(--red); padding:3px 5px; font-size:5px; font-style:normal; font-weight:900; }.stream-admin-list article > div:nth-child(2) b,.stream-admin-list article > div:nth-child(2) small { display:block; }.stream-admin-list article > div:nth-child(2) b { font-size:9px; }.stream-admin-list article > div:nth-child(2) small { color:var(--muted); font-size:6px; }.stream-admin-list article > div:nth-child(3) { display:flex; gap:5px; }.health { display:flex; align-items:center; gap:5px; margin-top:5px; font-size:6px; }.health i { width:6px; height:6px; border-radius:50%; }.health.good { color:#62d990; }.health.good i { background:#52d783; }.health.warn { color:#f4c660; }.health.warn i { background:#f4b94c; }.health.bad { color:#ff6d66; }.health.bad i { background:var(--red); }

.finance-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:10px; }.payout-queue,.transaction-ledger { margin-top:10px; }.payout-queue > header > span { color:var(--muted); font-size:7px; }.payout-row { position:relative; display:grid; grid-template-columns:34px 1fr auto auto auto; align-items:center; gap:9px; border-bottom:1px solid var(--line-soft); padding:9px 0; }.payout-row:last-child { border-bottom:0; }.payout-row b,.payout-row small { display:block; }.payout-row b { font-size:8px; }.payout-row small { color:var(--muted); font-size:6px; }.payout-row > strong { font-size:10px; }.payout-row > button { border:0; border-radius:6px; background:#23262c; padding:5px 7px; font-size:6px; cursor:pointer; }.payout-row .record-status { position:static; }.ledger-row { display:grid; grid-template-columns:.8fr 1.6fr .5fr .8fr .5fr; gap:8px; border-bottom:1px solid var(--line-soft); padding:9px 0; color:#8c939d; font-size:7px; }.ledger-row:last-child { border-bottom:0; }.ledger-row b { color:white; }.ledger-row i { font-style:normal; }.ledger-row .positive { color:#62d990; }.ledger-row .negative { color:#ff716a; }
.billing-exception-queue { margin-top:10px; }.billing-exception-queue > header > button { border:1px solid #343942; border-radius:7px; background:#1b1e24; padding:6px 8px; font-size:7px; cursor:pointer; }.exception-queue-note { margin:0 0 8px; color:#7f8690; font-size:7px; line-height:1.45; }.billing-exception-queue #billingExceptionQueue { display:grid; gap:6px; }.billing-exception-queue #billingExceptionQueue > article { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:9px; border:1px solid var(--line-soft); border-radius:9px; background:#17191e; padding:9px; }.billing-exception-queue article b,.billing-exception-queue article small { display:block; }.billing-exception-queue article b { font-size:8px; }.billing-exception-queue article small { margin-top:2px; color:#7e8590; font-size:6px; }.billing-exception-queue article em { color:#9299a3; font-size:6px; font-style:normal; }.billing-exception-queue article button { border:0; border-radius:6px; background:#292d34; padding:5px 7px; font-size:6px; cursor:pointer; }
.content-admin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.content-admin-grid article { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#111318; }.content-admin-grid article > span { position:relative; display:block; aspect-ratio:16/9; }.content-admin-grid img { width:100%; height:100%; object-fit:cover; }.content-admin-grid article > span i { position:absolute; left:7px; top:7px; border-radius:4px; background:rgba(6,7,9,.78); padding:4px 6px; font-size:5px; font-style:normal; font-weight:900; }.content-admin-grid article > div { padding:8px 9px 4px; }.content-admin-grid article > div b,.content-admin-grid article > div small { display:block; }.content-admin-grid article > div b { font-size:8px; }.content-admin-grid article > div small { color:var(--muted); font-size:6px; }.content-admin-grid footer { display:flex; gap:5px; padding:5px 9px 9px; }.featured-controls { margin-top:10px; }.featured-controls > label { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line-soft); padding:10px 0; }.featured-controls > label:last-child { border-bottom:0; }.featured-controls label b,.featured-controls label small { display:block; }.featured-controls label b { font-size:8px; }.featured-controls label small { color:var(--muted); font-size:6px; }.featured-controls input,.system-setting input { width:32px; height:17px; accent-color:var(--red); }
.system-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.admin-person { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; border-bottom:1px solid var(--line-soft); padding:9px 0; }.admin-person:last-child { border-bottom:0; }.admin-person b,.admin-person small { display:block; }.admin-person b { font-size:8px; }.admin-person small { color:var(--muted); font-size:6px; }.system-setting { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line-soft); padding:9px 0; }.system-setting:last-child { border-bottom:0; }.system-setting b,.system-setting small { display:block; }.system-setting b { font-size:8px; }.system-setting small { color:var(--muted); font-size:6px; }.system-setting strong { color:var(--red-bright); font-size:12px; }.audit-log { margin-top:10px; }.audit-log #adminAuditLog p { display:grid; grid-template-columns:60px 90px 1fr auto; gap:8px; border-bottom:1px solid var(--line-soft); margin:0; padding:8px 0; font-size:7px; }.audit-log #adminAuditLog p:last-child { border-bottom:0; }.audit-log p span { color:#666d77; font-family:monospace; }.audit-log p em,.audit-log p i { font-style:normal; }.audit-log p i { color:#6e7580; text-align:right; }
.admin-password-modal { width:min(520px,calc(100vw - 28px)); }.admin-password-shell { padding:22px; }.admin-password-shell header { display:flex; align-items:start; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); margin-bottom:14px; padding-bottom:13px; }.admin-password-shell h2 { margin:4px 0 2px; font-size:19px; }.admin-password-shell header p { margin:0; color:var(--muted); font-size:7px; }.admin-password-shell > label { margin-top:9px; }.admin-password-shell label small { color:#6f7680; font-size:6px; }.admin-password-shell footer { display:flex; justify-content:flex-end; gap:7px; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 205px minmax(260px, 1fr) auto; }
  .layout { grid-template-columns: 205px minmax(0,1fr); }
  .admin-mode .layout { grid-template-columns:205px minmax(0,1fr); }
  .sidebar { width: 205px; }
  .right-rail { display: none; }
  .content { border-right: 0; }
  .admin-metrics { grid-template-columns:repeat(3,1fr); }.admin-overview-grid { grid-template-columns:1fr; }
  .finance-summary { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 820px) {
  :root { --topbar: 61px; }
  .topbar { grid-template-columns: 1fr auto; gap: 10px; padding: 0 16px; }
  .search-box { display: none; }
  .brand-copy strong { font-size: 9px; }.brand-copy b { font-size: 16px; }
  .brand-mark { width: 33px; height: 33px; }
  .layout { display: block; padding-top: var(--topbar); }
  .sidebar { display: none; }
  .content { padding: 23px 15px 96px; }
  .view { max-width: 680px; }
  .mobile-nav { position: fixed; z-index: 190; left: 12px; right: 12px; bottom: 10px; height: 61px; display: grid; grid-template-columns: repeat(6,1fr); align-items: center; border: 1px solid #30343b; border-radius: 16px; background: rgba(15,17,21,.92); box-shadow: 0 12px 45px rgba(0,0,0,.6); padding: 4px 7px; backdrop-filter: blur(18px); }
  .mobile-nav button { height: 49px; display: grid; place-content: center; justify-items: center; gap: 1px; border: 0; background: transparent; color: #727985; cursor: pointer; }.mobile-nav button.active { color: white; }.mobile-nav button span { font-size: 18px; line-height: 1; }.mobile-nav button b { font-size: 7px; }.mobile-nav .mobile-create { width: 45px; height: 45px; justify-self: center; border-radius: 14px; background: var(--red); color: white; transform: rotate(-4deg); }.mobile-nav .mobile-create span { font-size: 26px; transform: rotate(4deg); }
  .mobile-nav .mobile-live span { color: var(--red-bright); font-size: 11px; text-shadow: 0 0 10px rgba(240,68,62,.7); }
  .spotlight-card { height: 455px; }.spotlight-shade { background: linear-gradient(0deg,rgba(5,6,8,.96) 0,rgba(5,6,8,.56) 57%,rgba(5,6,8,.08) 100%); }.spotlight-copy { inset: auto 21px 24px; width: auto; }.spotlight-copy h2 { font-size: 39px; }.spotlight-copy p { font-size: 11px; }
  .story-row { gap: 13px; }
  .scene-picker-grid { grid-template-columns: repeat(5,145px); overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
  .discover-grid { grid-auto-rows: 200px; }
  .featured-video { height: 390px; }
  .live-stage { grid-template-columns: 1fr; }.live-chat { border-top: 1px solid var(--line); border-left: 0; }.chat-messages { min-height: 190px; max-height: 220px; }.live-video-wrap { aspect-ratio: 16/9; }
  .live-quick-switch { grid-template-columns:repeat(4,155px); }.channel-membership-panel { grid-template-columns:1fr 1fr; }.channel-membership-panel > button { grid-column:1/-1; }.earnings-grid { grid-template-columns:1fr 1fr; }.creator-channel-row { grid-template-columns:1fr; }
  .tracking-toolbar { grid-template-columns:1fr; align-items:start; }.tracking-toolbar-actions { width:100%; }.tracking-toolbar-actions label { flex:1; }.tracking-toolbar-actions select { width:100%; }
  .group-voice-row { grid-template-columns:repeat(3,180px); overflow-x:auto; padding-bottom:4px; }.voice-room-dock { right:12px; bottom:12px; width:min(470px,calc(100vw - 24px)); }
  .promo-code-row { grid-template-columns:95px 1fr auto; }.promo-code-row > div:last-child { grid-column:2/-1; justify-self:end; }
  .admin-view { max-width:760px; }.admin-tabs { margin-inline:-5px; }.moderation-list > article,.stream-admin-list > article { grid-template-columns:72px 1fr; }.moderation-list .record-actions,.stream-admin-list article > div:nth-child(3) { grid-column:2; justify-self:start; }.stream-monitor { width:72px; }.verification-grid,.system-grid { grid-template-columns:1fr; }.admin-table { overflow-x:auto; }.admin-table-head,.admin-table-row { min-width:700px; }.content-admin-grid { grid-template-columns:1fr 1fr; }.audit-log #adminAuditLog p { grid-template-columns:55px 80px 1fr; }.audit-log #adminAuditLog p i { display:none; }
  .crew-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .mobile-heading h1,.section-title h1 { font-size: 27px; }
  .small-create,.filter-button { padding: 8px 10px; font-size: 9px; }
  .spotlight-card { height: 430px; border-radius: 16px; }.spotlight-copy h2 { font-size: 33px; }.spotlight-actions { align-items: flex-start; flex-direction: column; gap: 13px; }
  .scene-picker-heading h2 { font-size: 14px; }.scene-card { height: 138px; }
  .live-home-heading > div { display: block; }.live-home-heading h2 { margin-top: 5px; }.live-home-grid { grid-template-columns: 1fr 92px; }.home-live-card { height: 120px; }.home-live-card:nth-child(2) { display: none; }
  .composer-inline { grid-template-columns: 33px 1fr auto; }.composer-inline .composer-media:last-child { display: none; }
  .post-card { border-left: 0; border-right: 0; border-radius: 0; margin-inline: -15px; padding-inline: 15px; }
  .portrait-media { height: 118vw; }
  .discover-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }.tile-tall { grid-row: span 1; }.tile-wide { grid-column: span 1; }
  .featured-video { height: 420px; }.featured-overlay { inset: auto 18px 19px; }.featured-overlay h2 { font-size: 28px; }
  .title-actions .small-create { display: none; }.watch-live-banner { grid-template-columns: 62px 1fr auto; }.watch-live-thumb { width: 62px; }.watch-live-avatars { display: none; }.watch-live-banner > em { font-size: 0; }.watch-live-banner > em::after { content: "→"; font-size: 13px; }
  .live-section-title { align-items: end; }.live-section-title p { font-size: 8px; }.live-section-title .live-action { padding-inline: 10px; white-space: nowrap; }.live-control-deck { grid-template-columns:1fr auto; margin-inline:-15px; border-left:0; border-right:0; border-radius:0; }.live-control-copy { display:none; }.view-mode-switch button { padding:6px 7px; }.stream-stepper button { width:29px; }.live-quick-switch { margin-inline:-15px; padding-inline:15px; border-left:0; border-right:0; }.live-stage { margin-inline: -15px; border-left: 0; border-right: 0; border-radius: 0; }.live-video-wrap { aspect-ratio: 4/5; }.live-stage[data-layout="two"] .multiview-grid { grid-template-columns:1fr; }.multiview-grid { min-height:540px; }.multiview-tile { aspect-ratio:auto; min-height:230px; }.live-route-chip { top: 49px; }.live-rider-card { grid-template-columns: 35px 1fr auto; }.live-stage-actions { margin-inline: -15px; border-left: 0; border-right: 0; border-radius: 0; }.live-stage-actions > div button:nth-child(3) { display: none; }.replay-status { display: none; }.live-safety { grid-template-columns: 27px 1fr; }.live-stream-grid { grid-template-columns: 1fr 1fr; }.live-stream-card:last-child { display: none; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .tracking-toolbar { margin-inline:-15px; border-right:0; border-left:0; border-radius:0; padding:10px 15px; }.tracking-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; }.tracking-toolbar-actions label { grid-column:1/-1; }.ride-map { height: 440px; margin-inline:-15px; border-right:0; border-left:0; border-radius:0; }.tracking-user-card { top:9px; right:9px; left:9px; width:auto; }.event-map-label,.map-user-label { display:none; }.live-user-pin.active .map-profile-picture { width:38px; height:38px; }.map-status { right:9px; bottom:9px; left:9px; max-width:calc(100% - 18px); font-size:7px; }.tracking-privacy-note { grid-template-columns:26px 1fr; margin-inline:-15px; border-right:0; border-left:0; border-radius:0; }.voice-room-hub { margin-inline:-15px; border-right:0; border-left:0; border-radius:0; }.voice-room-hub > header { align-items:start; flex-direction:column; }.voice-room-grid { grid-template-columns:1fr; }.voice-room-card { grid-template-columns:36px 1fr; }.voice-room-card > button { grid-column:2; justify-self:start; }.ride-card { grid-template-columns: 50px 1fr; }.ride-actions { grid-column:2; grid-template-columns:1fr 1fr; justify-self:start; }.date-block { width: 48px; height: 48px; }
  .section-title-actions { align-items:flex-end; flex-direction:column; }.crew-feature { height: 420px; grid-template-columns: 50px 1fr; padding: 18px; }.crew-feature-actions { grid-column:2; justify-self:start; }.crew-logo { width: 48px; height: 48px; }.crew-copy h2 { font-size: 23px; }.group-voice-lounge { margin-inline:-15px; border-right:0; border-left:0; border-radius:0; }.group-voice-lounge > header { align-items:start; flex-direction:column; }.group-voice-lounge > header > small { text-align:left; }.voice-session-modal { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }.voice-session-shell { padding:15px; }.voice-session-fields,.voice-invite-picker,.voice-session-options { grid-template-columns:1fr; }.voice-room-dock { right:8px; bottom:82px; width:calc(100vw - 16px); padding:11px; }.voice-person img { width:38px; height:38px; }.voice-person > i { top:26px; }.voice-controls button b { font-size:5px; }
  .profile-cover { height: 160px; }.profile-head { grid-template-columns: 78px 1fr; gap: 11px; }.profile-avatar { width: 78px; height: 78px; margin-top: -30px; }.owner-channel-actions { grid-column:1/-1; justify-content:flex-end; }.owner-channel-actions .edit-profile { position:static; }.profile-identity p { max-width: 260px; }.profile-stats { flex-wrap: wrap; gap: 9px; }.creator-payment-setup { grid-template-columns:42px 1fr; }.payment-setup-icon { width:40px; height:40px; }.payment-setup-actions { grid-column:2; grid-template-columns:1fr 1fr; }.payment-setup-actions .primary { grid-column:1/-1; }.earnings-grid { grid-template-columns:1fr 1fr; }.fee-explainer { grid-template-columns:40px 1fr; }.fee-explainer button { grid-column:2; justify-self:start; }.channel-access-settings { align-items:flex-start; flex-direction:column; }.creator-hero { min-height:430px; grid-template-columns:58px 1fr; padding:17px; }.creator-avatar { width:56px; height:56px; border-radius:15px; }.creator-actions { grid-column:1/-1; }.channel-stats { overflow-x:auto; gap:16px; }.channel-stats span { white-space:nowrap; }.channel-membership-panel { grid-template-columns:1fr; }.channel-membership-panel > button { grid-column:auto; }.exclusive-grid { grid-template-columns:1fr 1fr; }.exclusive-card:last-child { display:none; }
  .admin-login-gate { margin:0 auto; padding:18px; }.admin-login-brand { grid-template-columns:47px 1fr; }.admin-shield { width:45px; height:48px; }.admin-login-brand h1 { font-size:23px; }.demo-credentials { grid-template-columns:auto 1fr; }.demo-credentials > span { grid-row:span 3; }.demo-credentials small { grid-column:2; }.admin-topline { align-items:start; flex-direction:column; }.admin-topline h1 { font-size:25px; }.admin-password-alert { grid-template-columns:28px 1fr; }.admin-password-alert button { grid-column:2; justify-self:start; }.admin-metrics { grid-template-columns:1fr 1fr; }.admin-status-row,.finance-summary,.liveops-summary { grid-template-columns:1fr 1fr; }.admin-panel-heading { align-items:start; flex-direction:column; }.admin-panel-tools,.admin-search { width:100%; }.moderation-list > article,.stream-admin-list > article { grid-template-columns:62px 1fr; }.report-preview,.stream-monitor { width:62px; height:56px; }.record-actions { flex-wrap:wrap; }.creator-policy > div { grid-template-columns:1fr; }.content-admin-grid { grid-template-columns:1fr; }.payout-row { grid-template-columns:34px 1fr auto; }.payout-row > strong { grid-column:2; }.payout-row > .state { grid-column:3; grid-row:1; }.payout-row > button { grid-column:3; }.ledger-row { grid-template-columns:1fr 1fr; }.ledger-row > * { min-width:0; }.audit-log #adminAuditLog p { grid-template-columns:52px 1fr; }.audit-log p em { grid-column:2; }.admin-password-shell { padding:15px; }
  .promo-dashboard-head { align-items:start; flex-direction:column; }.promo-dashboard-head > div:last-child { width:100%; }.promo-dashboard-head button { flex:1; }.promo-summary { grid-template-columns:1fr 1fr; }.promo-code-row { grid-template-columns:1fr; }.promo-code-row > div:last-child { grid-column:auto; justify-self:start; }.promo-redeem { grid-template-columns:1fr; }.promo-form-grid { grid-template-columns:1fr; }.promo-form-grid label.full { grid-column:auto; }.promo-options { grid-template-columns:1fr; }.promo-code-shell { padding:15px; }
  .collection-grid { grid-template-columns: 1fr; }.machine-add-card { grid-column: auto; }.bike-card { grid-template-columns: 1fr; }.bike-silhouette { height: 110px; }.bike-card > button { justify-self: start; }
  .media-modal-shell { grid-template-columns: 1fr; min-height: 0; }.media-modal-shell > img { height: 65vh; }.media-details { border-top: 1px solid var(--line); border-left: 0; padding: 14px; }
  .live-setup-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }.live-setup-shell { padding: 15px; }.live-setup-header h2 { font-size: 17px; }.live-source-tabs button { grid-template-columns: 29px 1fr; padding: 8px; }.live-source-tabs button > span { width: 29px; height: 29px; font-size: 14px; }.camera-preview { height: 190px; }.live-details-grid { grid-template-columns: 1fr; }.live-field.full { grid-column: span 1; }.live-options { grid-template-columns: 1fr; }.live-options label { grid-template-columns: 16px 1fr; }.subscriber-access-card { grid-template-columns:1fr; }.live-setup-shell > footer { position: sticky; bottom: -15px; background: #13151a; margin-inline: -15px; padding: 12px 15px 15px; }.preflight-status { display: none; }.membership-benefits { grid-template-columns:1fr; }.channel-form-grid { grid-template-columns:1fr; }.channel-form-grid .full { grid-column:auto; }.paid-content-settings { grid-template-columns:1fr; }.subscription-shell,.channel-setup-shell { padding:15px; }
  .toast.show { bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}