/* ==========================================================================
   VidPlaza — Main Stylesheet
   Zero-dependency SPA | Pure black dark theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --bg-color: #000000;
  --user-bg-color: #000000;
  --user-wallpaper-image: none;
  --user-wallpaper-size: cover;
  --user-wallpaper-position: center;
  --user-wallpaper-repeat: no-repeat;
  --text-color: #e8e8e8;
  --text-muted: #8a8a8a;
  --accent-cyan: #00e5ff;
  --accent-cyan-dim: rgba(0, 229, 255, 0.18);
  --accent-amber: #ffc107;
  --accent-blue: #2196f3;
  --border-grey: #333333;
  --border-subtle: #222222;
  --modal-bg: #111111;
  --card-bg: #0d0d0d;
  --surface-dark: #0a0a0a;
  --surface-raised: #141414;
  --nav-bg: #000000;
  --footer-height: 3rem;
  --sidebar-width: 13.75rem;
  --main-frame-size: min(52vw, 22rem);
  --peer-frame-size: min(18vw, 7.5rem);
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#main-app,
#app-shell,
#main-content,
#view-home,
#view-feeds,
#view-uploads,
.settings-page {
  background-color: var(--user-bg-color);
  background-image: var(--user-wallpaper-image);
  background-size: var(--user-wallpaper-size);
  background-position: var(--user-wallpaper-position);
  background-repeat: var(--user-wallpaper-repeat);
}

html, body {
  width: 100%;
  height: 100%;
  color: var(--text-color);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

#main-content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   8. ANIMATIONS & KEYFRAMES
   -------------------------------------------------------------------------- */

/* --- 8.3 / 8.4  fadeIn — views (200ms) and Video_Cards (250ms) ----------- */
/* Usage:
     Views:       animation: fadeIn 200ms ease forwards;
     Video_Cards: animation: fadeIn 250ms ease forwards;
*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- 8.2  borderHighlight — node connected state at 300ms ---------------- */
/* Applied via .animate-connected on a Peer_Node or My_Video_Node border
   overlay element. Opacity 0 + scale 0.8 → opacity 1 + scale 1.0. */
@keyframes borderHighlight {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1.0);
  }
}

/* --- 8.5  pulse — pulsing ring on My_Video_Node (1000ms infinite) -------- */
/* Applied via .pulsing-ring child element inside #my-video-node. */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* --- 8.6  spin — 360° rotation for Approval_Modal spinner (1s infinite) -- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- 8.1  drawLine — SVG line draw-on via stroke-dasharray/dashoffset ----- */
/* The JS sets stroke-dasharray and stroke-dashoffset to the line length,
   then adds .animate-draw which animates dashoffset → 0 over 600ms.      */
@keyframes drawLine {
  from {
    stroke-dashoffset: var(--line-length, 1000);
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   Animation Helper Classes
   -------------------------------------------------------------------------- */

/* View fade-in (200ms) — added by NavigationModule.showView() */
.view-enter {
  animation: fadeIn 200ms ease forwards;
}

/* Video_Card fade-in (250ms) — added when a card is inserted into the feed */
.card-enter {
  animation: fadeIn 250ms ease forwards;
}

/* Connected border highlight (300ms, fires once) */
.animate-connected {
  animation: borderHighlight 300ms ease forwards;
}

/* Pulsing ring on My_Video_Node — continuous 1000ms cycle */
.pulsing-ring {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 3px solid var(--accent-cyan);
  pointer-events: none;
  animation: pulse 1000ms ease-in-out infinite;
}

/* Approval_Modal spinner — 1s linear infinite */
.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 16px auto;
}

/* SVG connection line — draw-on animation (600ms, fires once) */
.connection-line {
  stroke: var(--accent-cyan);
  stroke-width: 2;
  fill: none;
  /* JS sets stroke-dasharray and stroke-dashoffset to the computed line length */
}

.connection-line.animate-draw {
  animation: drawLine 600ms ease forwards;
}

/* --------------------------------------------------------------------------
   Layout — Top Navigation Bar (brand + groups · search & actions)
   -------------------------------------------------------------------------- */
#nav-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--nav-bg);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-grey);
  position: sticky;
  top: 0;
  z-index: 100200;
  min-height: 3.25rem;
  overflow: visible;
  padding-top: max(0.5rem, env(safe-area-inset-top));
}

.nav-bar-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

/* Same-account multi-window multitask — Multitask + ⋮ menu */
.vp-workspace-toolbar {
  display: flex;
  align-items: center;
  margin-right: 0.4rem;
  position: relative;
  z-index: 100250;
}
.vp-ws-cluster {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  border-radius: 0.45rem;
  gap: 0;
}
.vp-ws-btn {
  appearance: none;
  border: 1px solid var(--border-grey, #3a3a3a);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  padding: 0.3rem 0.55rem;
  border-radius: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
}
.vp-ws-btn:hover,
.vp-ws-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
/* Multitask primary matches header chrome (not bright blue) */
.vp-ws-btn-primary {
  border-color: var(--border-grey, #3a3a3a);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.vp-ws-btn-primary:hover,
.vp-ws-btn-primary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.vp-ws-menu-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-width: 1.85rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.05em;
}
.vp-ws-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 11.5rem;
  padding: 0.3rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-grey, #3a3a3a);
  background: var(--nav-bg, #141414);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 100260;
}
.vp-ws-menu[hidden] {
  display: none !important;
}
.vp-ws-menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.vp-ws-menu-item:hover,
.vp-ws-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.vp-ws-menu-item-muted {
  opacity: 0.78;
  font-weight: 500;
}
.multistream-extra-destinations--toolbar {
  margin: 0 0 0.85rem;
}
.multistream-extra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0.35rem;
}
/* Horizontal: group card | RTMP editor ·2 | editor ·3 */
.multistream-assign-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  width: 100%;
}
.multistream-group-assignment {
  flex: 0 1 14rem;
  min-width: 12.5rem;
  max-width: 18rem;
}
.multistream-extra-card--editor {
  flex: 1 1 16rem;
  min-width: 15rem;
  max-width: 22rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 0.55rem;
  padding: 0.65rem 0.75rem;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.multistream-extra-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.multistream-extra-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.multistream-extra-editor-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--settings-muted, #94a3b8);
}
.multistream-extra-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.multistream-group-assignment-option--extra {
  opacity: 0.95;
  flex: 1 1 auto;
  min-width: 0;
}
.multistream-group-assignment-extra-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.multistream-slot-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}
.multistream-slot-menu-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 0.35rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 0.35rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.multistream-slot-menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.multistream-slot-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 20;
  min-width: 8.5rem;
  padding: 0.25rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.multistream-slot-menu[hidden] {
  display: none !important;
}
.multistream-slot-menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
}
.multistream-slot-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.multistream-slot-menu-item--danger {
  color: #fca5a5;
}
.multistream-x-live-checklist {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.35);
  font-size: 0.82rem;
  line-height: 1.4;
}
.multistream-x-live-checklist strong {
  display: block;
  margin-bottom: 0.35rem;
}
.multistream-x-live-checklist ol {
  margin: 0.25rem 0 0;
  padding-left: 1.15rem;
}
.multistream-x-live-checklist li {
  margin: 0.2rem 0;
}
.multistream-x-live-checklist a {
  color: #93c5fd;
}
@media (max-width: 900px) {
  .vp-workspace-toolbar {
    display: none;
  }
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-spaces-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.nav-tool-btn {
  padding: 0.4rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 999px;
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-height: 2.25rem;
  white-space: nowrap;
}

.nav-tool-btn:hover {
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--accent-cyan);
}

.nav-tool-create {
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--accent-cyan);
}

.space-item-create #btn-create-group {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
}

.nav-mobile-space-btn-create {
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--accent-cyan);
}

.friend-requests-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Mobile header customs (up to 3 groups after Square) */
.nav-mobile-header-customs {
  display: none;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav-mobile-header-customs[hidden] {
  display: none !important;
}

.nav-mobile-header-custom {
  flex: 0 0 auto;
  max-width: 5.5rem;
  min-height: 2.05rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.nav-mobile-header-custom.is-active,
.nav-mobile-header-custom.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.1);
}

/* Mobile header Square — only shown ≤768px / short landscape (see media queries) */
.nav-mobile-header-square {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  min-width: 4.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.55);
  background: rgba(0, 229, 255, 0.14);
  color: var(--accent-cyan, #67e8f9);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.1;
}

.nav-mobile-header-square.is-active {
  background: rgba(0, 229, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.45);
  color: #ecfeff;
}

.nav-mobile-menu-btn {
  display: none;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.nav-mobile-menu-btn[aria-expanded="true"] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.nav-mobile-panel {
  width: 100%;
  min-width: 0;
}

body.nav-mobile-open {
  overflow: hidden;
}

.nav-mobile-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

.nav-mobile-spaces-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nav-mobile-space-item {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.nav-mobile-space-btn,
.nav-mobile-space-menu,
.nav-mobile-action-btn,
.nav-mobile-friend-requests,
.nav-mobile-search-input {
  font-family: inherit;
}

.nav-mobile-space-btn {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-grey);
  background: var(--surface-base, #0a0a0a);
  color: var(--text-color);
  font-size: 0.92rem;
  cursor: pointer;
}

.nav-mobile-space-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
}

.nav-mobile-space-btn.space-pill-beta-creators {
  border-color: rgba(0, 229, 255, 0.35);
}

.nav-mobile-space-menu {
  flex: 0 0 auto;
  width: 2.75rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.nav-mobile-search-hint {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  line-height: 1.35;
}

.nav-mobile-search-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-grey);
  background: var(--surface-base, #0a0a0a);
  color: var(--text-color);
  font-size: 16px;
  margin-bottom: 0.45rem;
}

.nav-mobile-friend-requests-wrap {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(51, 65, 85, 0.55);
}

.nav-mobile-section-title--nested {
  margin-bottom: 0.35rem;
}

.nav-mobile-friend-requests {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 0.88rem;
  cursor: pointer;
}

.nav-mobile-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.nav-mobile-action-btn {
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.nav-mobile-action-btn.nav-mobile-action-wide {
  grid-column: 1 / -1;
}

.nav-mobile-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#nav-bar .nav-brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-cyan);
  flex: 0 0 auto;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#nav-bar .nav-brand#nav-brand-home {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

#nav-bar .nav-brand#nav-brand-home:hover,
#nav-bar .nav-brand#nav-brand-home:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
  outline: none;
}

/* VidMarket pill — match Square/space-pill (light cyan outline); ⋮ is separate like space-menu-btn */
#nav-bar .nav-vidmarket {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: var(--surface-raised);
  color: var(--text-color);
  font: 500 0.82rem/1.2 Inter, Segoe UI, sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: default;
  min-height: 2.25rem;
  box-shadow: none;
  outline: none;
}
#nav-bar .nav-vidmarket:hover,
#nav-bar .nav-vidmarket:focus-visible {
  color: var(--accent-cyan);
  border-color: rgba(0, 229, 255, 0.55);
  background: var(--surface-raised);
  outline: none;
}

.spaces-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.join-groups-search-label {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.join-groups-search-input {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.65);
  color: var(--text-color);
  font-size: 0.9rem;
  box-sizing: border-box;
}

.join-groups-search-input::placeholder {
  color: var(--text-muted);
}

.join-groups-search-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px var(--accent-cyan-dim);
}

.join-groups-search-status {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.join-groups-search-status[hidden] {
  display: none !important;
}

.join-groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(50vh, 20rem);
  overflow-y: auto;
  margin: 0.75rem 0 0.5rem;
}

.join-groups-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
}

.join-groups-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.join-groups-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color);
}

.join-groups-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.join-groups-action {
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.join-groups-action:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.join-groups-action:disabled {
  opacity: 0.6;
  cursor: default;
}

.join-groups-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0;
}

.join-groups-invites {
  margin-bottom: 0.85rem;
}

.join-groups-section-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.join-groups-invite-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.join-groups-action-muted {
  background: transparent;
  color: var(--text-muted);
}

.group-management-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-cyan);
  margin: 0 0 0.75rem;
}

.group-management-count--over-limit {
  color: var(--warning, #e8a838);
}

.group-management-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
}

.group-management-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  pointer-events: auto;
  position: relative;
  isolation: isolate;
}

.group-management-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.group-management-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.group-management-row--locked {
  background: color-mix(in srgb, var(--surface-raised) 82%, var(--text-muted) 18%);
  border-color: color-mix(in srgb, var(--border-grey) 70%, var(--text-muted) 30%);
  opacity: 1;
}

/* Free-slot styling lives on header group pills (see .space-pill-free-slot). */

.space-name-lock-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0.5rem;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}

.group-management-interactive {
  pointer-events: auto;
  position: relative;
  z-index: 4;
  touch-action: manipulation;
}

.group-management-owner-tools {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.15rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border-subtle);
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.group-management-row--locked .group-management-name {
  color: var(--text-muted);
}

.group-management-locked-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.group-management-renew-btn {
  white-space: nowrap;
}

.group-management-transfer {
  flex: 1 1 100%;
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border-subtle);
}

.group-management-transfer-title {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-color);
}

.group-management-transfer-hint {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.group-management-transfer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.group-management-transfer-select {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.55rem;
  background: rgba(15, 23, 42, 0.92);
  color: var(--settings-text, var(--text-color));
  font-size: 0.82rem;
  color-scheme: dark;
  cursor: pointer;
}

.group-management-transfer-select option {
  background: #111827;
  color: #e2e8f0;
}

.group-management-transfer-pending {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #86efac;
}

.group-management-transfer-btn {
  white-space: nowrap;
}

.group-management-takeover-toggle {
  width: 100%;
  min-width: 0;
}

.group-management-takeover-toggle-row {
  width: 100%;
  margin: 0;
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 3;
}

.group-management-takeover-toggle .settings-toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

.group-management-takeover-toggle-row .settings-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
}

.group-management-takeover-toggle-row .settings-toggle-switch {
  flex: 0 0 auto;
}

.group-management-transfer-member-btn {
  min-height: 2.45rem;
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
  z-index: 5;
}

.group-management-takeover-toggle-hint {
  margin: 0;
}

.group-management-invite {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.group-management-invite-summary,
.group-management-invite-heading {
  cursor: default;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--settings-text);
  margin: 0 0 0.45rem;
}

.group-management-invite-summary::-webkit-details-marker {
  color: var(--settings-muted);
}

.group-management-invite[open] .group-management-invite-summary {
  margin-bottom: 0.55rem;
}

.group-management-invite .space-invite-row {
  margin-top: 0.15rem;
  width: 100%;
  min-width: 0;
}

.group-management-invite .space-invite-input {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.65);
  color: var(--settings-text);
  font-size: 0.86rem;
}

.group-management-invite .space-invite-input:focus {
  outline: none;
  border-color: rgba(103, 232, 249, 0.55);
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.12);
}

.group-management-members {
  flex: 1 1 100%;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle);
}

.group-management-members-summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-color);
  list-style: none;
}

.group-management-members-summary::-webkit-details-marker {
  display: none;
}

.group-management-members[open] .group-management-members-summary {
  margin-bottom: 0.45rem;
}

.group-management-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.group-management-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.group-management-member-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.group-management-member-role {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #9aa0a6);
  white-space: nowrap;
}

.group-management-kick-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.group-locked-modal .modal-content {
  max-width: 28rem;
}

.group-locked-message {
  line-height: 1.5;
}

.friends-settings-status-label--locked {
  color: var(--text-muted);
}

.friends-settings-takeover-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.friends-takeover-request-btn {
  white-space: nowrap;
}

.group-management-takeover-review,
.group-management-join-request-review {
  flex: 1 1 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, var(--border-grey) 65%);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent-cyan) 12%);
}

.group-management-join-request-review {
  border-color: color-mix(in srgb, var(--accent-cyan) 45%, #1a3a52 55%);
  background: color-mix(in srgb, var(--surface-raised) 82%, #1a3a52 18%);
}

.group-management-row--takeover-highlight {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-cyan) 55%, transparent 45%);
}

.group-management-takeover-title,
.group-management-join-request-title {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-color);
}

.group-management-takeover-detail,
.group-management-takeover-note,
.group-management-join-request-detail {
  margin: 0 0 0.45rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.group-management-takeover-controls,
.group-management-join-request-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.group-management-takeover-accept-btn {
  white-space: nowrap;
}

.friend-request-row--takeover {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.friend-request-row--takeover .friend-request-actions {
  justify-content: stretch;
}

.friend-request-row--transfer .friend-transfer-accept,
.friend-request-row--transfer .friend-transfer-decline,
.friend-request-row--transfer .friend-transfer-cancel,
.friend-request-row--takeover .friend-takeover-review,
.friend-request-row--takeover .friend-takeover-cancel {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  pointer-events: auto;
  touch-action: manipulation;
}

.friend-request-row--takeover .friend-takeover-review,
.friend-request-row--takeover .friend-takeover-cancel {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.group-live-destinations {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 0.15rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
}

.group-live-destinations-title {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.group-live-destinations-inherit,
.group-live-destinations-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-color);
  margin-bottom: 0.35rem;
}

.group-live-destinations-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.group-live-destinations-note {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.group-live-destinations-inherit-hint {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.group-live-destinations-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.55rem;
}

.group-live-destinations-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.group-live-announcement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: min(100%, 56rem);
  margin: 0 auto 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.group-live-announcement[hidden] {
  display: none !important;
}

.group-live-announcement-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-color);
}

.group-live-announcement-dismiss {
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-grey);
  background: rgba(15, 15, 15, 0.8);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.group-live-announcement-dismiss:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.stage-audio-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: min(100%, 56rem);
  margin: 0 auto 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 193, 7, 0.45);
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stage-audio-notice[hidden] {
  display: none !important;
}

.stage-audio-notice-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-color);
}

.stage-audio-notice-dismiss {
  flex: 0 0 auto;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 193, 7, 0.55);
  background: rgba(15, 15, 15, 0.8);
  color: #ffd88a;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.stage-header-controls:not([hidden]) {
  display: contents;
}

.stage-header-controls[hidden] {
  display: none !important;
}

.stage-header-size {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.18rem 0.4rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 999px;
  background: rgba(8, 12, 14, 0.72);
}

.stage-header-size-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent-cyan);
}

.stage-header-slider {
  width: 4.25rem;
  min-width: 4.25rem;
  min-height: 1.5rem;
  margin: 0;
  accent-color: var(--accent-cyan);
}

.stage-header-size-value {
  min-width: 2.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-color);
  text-align: right;
}

.stage-header-size--width,
.stage-header-size--width[hidden],
.stage-header-size--height,
.stage-header-size--height[hidden] {
  display: none !important;
}

.peer-strip-mute-btn {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  min-height: auto;
  min-width: auto;
}

.peer-strip-mute-btn[hidden] {
  display: none !important;
}

.peer-strip-mute-btn:hover {
  color: var(--text-color);
  border-color: var(--border-grey);
}

.peer-strip-mute-btn[aria-pressed="true"] {
  border-color: rgba(255, 193, 7, 0.55);
  color: #ffd88a;
  background: rgba(255, 193, 7, 0.08);
}

.peer-strip-meta-divider {
  color: var(--border-grey);
  font-size: 0.82rem;
  line-height: 1;
  user-select: none;
}

.peer-strip-meta-divider[hidden] {
  display: none !important;
}

.stage-frame-center-wrap {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0;
  box-sizing: border-box;
  /* Clip so packed stage never pushes page wider than the viewport (VPFB 80percent_zoom_out) */
  overflow-x: hidden;
  overflow-y: visible;
  min-width: 0;
}

/* Flank ads must not shrink stage shell vs ad-free viewers (Gala ad-free vs Cent ads).
 * Stage keeps design width; flanks share the row without rewriting freeform geometry. */
@media (min-width: 1101px) {
  .stage-frame-center-wrap:has(.ad-slot-stage-flank:not([hidden])) .stage-frame-shell {
    width: min(var(--stage-frame-width-px, 2327px), 100%);
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
}

.stage-frame-shell {
  --stage-frame-width-in: 166.2;
  --stage-frame-width-px: 2327px;
  --stage-frame-height-in: 60.8;
  --stage-frame-height-px: 851px;
  --stage-grid-cols: 1;
  --stage-grid-rows: 1;
  /* Square tile inset inside grid cell — overridden by Tile size bar (viewer preference) */
  --stage-tile-scale: 1;
  --stage-video-inset: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  /* Prefer parent width (100%) so 100% browser zoom never clips row‑1 Pull / stage edge */
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  box-sizing: border-box;
}

.stage-frame-shell[hidden] {
  display: none !important;
}

.stage-frame-body {
  width: 100%;
  height: min(var(--stage-frame-height-px, 851px), calc(100dvh - 20rem));
  min-height: 0;
  max-height: min(var(--stage-frame-height-px, 851px), calc(100dvh - 20rem));
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
  background-color: #05080e;
}

/*
 * Group admin wallpaper — CLIPPED to stage-frame-body only (not shell/page).
 * cover + overflow hidden keeps image inside the stage rectangle for Live composite.
 */
.stage-frame-body.stage-frame-body--wallpaper,
.stage-frame-body.stage-has-wallpaper {
  /* Solid base so gaps between freeform tiles show wallpaper, not page chrome */
  background-color: #05080e !important;
  background-image: var(--vp-stage-wallpaper) !important;
  /* Fit modes: cover | contain | center | tile (set by StageWallpaperModule) */
  background-size: var(--vp-stage-wallpaper-size, cover) !important;
  background-position: var(--vp-stage-wallpaper-position, center center) !important;
  background-repeat: var(--vp-stage-wallpaper-repeat, no-repeat) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
  isolation: isolate;
  /* Ensure body has paint area even before freeform pins height */
  min-height: min(var(--stage-frame-height-px, 480px), 50dvh);
}
/* Default grid fills body — keep grid transparent so wallpaper shows in any gaps */
#main-stage-grid.stage-has-wallpaper,
.stage-frame-body.stage-has-wallpaper > #main-stage-grid {
  background: transparent !important;
  background-image: none !important;
}
/* Dedicated wallpaper veil so freeform absolute tiles never “erase” the cat image */
.stage-frame-body.stage-frame-body--wallpaper::before,
.stage-frame-body.stage-has-wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--vp-stage-wallpaper);
  background-size: var(--vp-stage-wallpaper-size, cover);
  background-position: var(--vp-stage-wallpaper-position, center center);
  background-repeat: var(--vp-stage-wallpaper-repeat, no-repeat);
  background-color: transparent;
  /* Light dim so name tags stay readable; image still visible */
  box-shadow: inset 0 0 0 9999px rgba(2, 6, 12, 0.12);
}
/* Do NOT force freeform grid / design overlay to position:relative — that collapses absolute tiles off-stage. */
.stage-frame-body.stage-frame-body--wallpaper > *:not(#main-stage-grid):not(#stage-layout-design-overlay),
.stage-frame-body.stage-has-wallpaper > *:not(#main-stage-grid):not(#stage-layout-design-overlay) {
  position: relative;
  z-index: 1;
}
.stage-frame-body.stage-has-wallpaper > #main-stage-grid.stage-grid--freeform,
.stage-frame-body.stage-body--freeform > #main-stage-grid {
  position: absolute !important;
  z-index: 2 !important; /* above wallpaper ::before (0) so freeform + share are on top */
}
/* Empty stage cells stay translucent so wallpaper reads through */
.stage-frame-body.stage-has-wallpaper .main-stage-slot:empty,
.stage-frame-body.stage-has-wallpaper .main-stage-slot:not(:has(.frame-media)) {
  background: rgba(5, 8, 14, 0.35) !important;
}
/*
 * Tile size + shape (viewer cog — local only):
 *   Compact  = smaller square
 *   Standard = full square in cell (no overlap, never under row 1)
 *   Signing  = landscape rectangle (16:9) — same ratio at 2×2 / 3×3 / 6-up
 * Shape must NOT stretch with stage shell aspect (StreamYard-stable tiles).
 */
.stage-frame-shell {
  --stage-tile-aspect-w: 1;
  --stage-tile-aspect-h: 1;
}
.stage-frame-shell[data-tile-size="compact"] {
  --stage-tile-scale: 0.62;
  --stage-tile-aspect-w: 1;
  --stage-tile-aspect-h: 1;
}
.stage-frame-shell[data-tile-size="standard"] {
  --stage-tile-scale: 1;
  --stage-tile-aspect-w: 1;
  --stage-tile-aspect-h: 1;
  /* Never paint over row‑1 peer strip; never let tiles escape the stage */
  overflow: hidden;
}
/* Signing = max fill + landscape frame for hands / torso (ASL) */
.stage-frame-shell[data-tile-size="signing"] {
  --stage-tile-scale: 1;
  --stage-tile-aspect-w: 16;
  --stage-tile-aspect-h: 9;
}

.stage-frame-shell[data-on-stage="1"] .stage-frame-body,
.stage-frame-shell[data-on-stage="2"] .stage-frame-body {
  height: min(var(--stage-frame-height-px, 851px), calc(100dvh - 18rem));
  max-height: min(var(--stage-frame-height-px, 851px), calc(100dvh - 18rem));
}

.stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame > video,
.stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame > img {
  /* Default: Fit (full camera). Override via body.vp-video-frame-fit-* when Fill is on. */
  object-fit: contain;
  object-position: center center;
}

/*
 * Always-hugged packing (p211) — Square + groups, same rules.
 * Standard = packed squares · Signing = packed 16:9 · no unhug toggle · Compact off.
 * Width uses 100% of parent (not 100vw) so chrome padding never clips the right edge.
 */
.stage-frame-shell[data-tile-size="standard"] {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
}
.stage-frame-shell[data-tile-size="standard"] .stage-frame-body {
  width: 100%;
  height: auto;
  max-height: min(calc(100dvh - 11rem), 100%);
  min-height: 0;
  aspect-ratio: var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1);
  overflow: hidden;
}
.stage-frame-shell[data-tile-size="standard"] .main-stage-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: clamp(0.12rem, 0.28vw, 0.3rem);
  padding: 0;
  margin: 0;
  align-content: stretch;
  overflow: hidden;
  background: #000;
}
.stage-frame-shell[data-tile-size="standard"] .main-stage-slot {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-frame-shell[data-tile-size="standard"] .main-stage-slot .frame-media.polygon-frame {
  width: min(100cqw, 100cqh) !important;
  height: min(100cqw, 100cqh) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  border-radius: 0;
}

/* Signing: always packed 16:9 rectangles */
.stage-frame-shell[data-tile-size="signing"] {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
}
.stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
  width: 100%;
  height: auto;
  max-height: min(calc(100dvh - 11rem), 100%);
  min-height: 0;
  aspect-ratio: calc(var(--stage-grid-cols, 1) * 16)
    / calc(var(--stage-grid-rows, 1) * 9);
  overflow: hidden;
}

/*
 * Stage fill-screen control (Square + groups) — same idea as 1:1 pop-out.
 * TOP-LEFT so it never covers tile × (remove sits top-right of each tile).
 * Idle: faint; wake on hover / focus / near corner (JS is-expand-chrome-awake).
 */
.stage-viewport-expand-btn {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  right: auto;
  z-index: 14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(245, 247, 251, 0.55);
  cursor: pointer;
  box-shadow: none;
  opacity: 0.16;
  transition:
    opacity 0.4s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.stage-viewport-expand-btn .stage-viewport-expand-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  transition: transform 0.2s ease;
}
/* Fully visible when awake or keyboard focus */
.stage-frame-shell.is-expand-chrome-awake .stage-viewport-expand-btn,
.stage-viewport-expand-btn:hover,
.stage-viewport-expand-btn:focus-visible,
.stage-viewport-expand-btn.is-awake {
  opacity: 1;
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(8, 12, 18, 0.9);
  color: var(--accent-cyan, #00e5ff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Keep tile × clear of any residual top-right chrome */
.main-stage-slot .main-slot-remove-zone {
  z-index: 22;
}
.stage-viewport-expand-btn:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.65);
  outline-offset: 2px;
}
.stage-viewport-expand-btn.is-expanded .stage-viewport-expand-icon {
  transform: scale(0.92);
}

/*
 * Stage viewport expand — true monitor fullscreen (Fullscreen API) + in-page fallback.
 * Hides nav / strip / admin under-stage pills; keeps Studio dock.
 */
body.stage-viewport-expanded #nav-bar,
body.stage-viewport-expanded #app-footer,
body.stage-viewport-expanded .peer-strip,
body.stage-viewport-expanded .current-space-bar,
body.stage-viewport-expanded #ad-slot-stage-banner-top,
body.stage-viewport-expanded #ad-slot-stage-banner,
body.stage-viewport-expanded .ad-slot-stage-flank {
  display: none !important;
}

body.stage-viewport-expanded #main-content {
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* In-page fallback when Fullscreen API is blocked */
body.stage-viewport-expanded .video-call-layout,
.video-call-layout.is-stage-fullscreen-host {
  position: fixed !important;
  inset: 0 !important;
  z-index: 11500 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000 !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Native Fullscreen API — every corner of the monitor (no browser chrome) */
.video-call-layout:fullscreen,
.video-call-layout:-webkit-full-screen,
.video-call-layout:-ms-fullscreen,
.main-stage-section:fullscreen,
.main-stage-section:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #000 !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

/* Hide page chrome while any stage host is in browser fullscreen */
:fullscreen body #nav-bar,
:-webkit-full-screen body #nav-bar {
  display: none !important;
}

body.stage-viewport-expanded .main-stage-section {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.stage-viewport-expanded .stage-frame-center-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

body.stage-viewport-expanded .stage-frame-shell,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="standard"],
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="signing"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  /* visible so admin row is not clipped to 1/3; body still clips video */
  overflow: hidden !important;
}

/* Slot label chrome — hide in pop-out so the stage is pure video */
body.stage-viewport-expanded .stage-frame-header {
  display: none !important;
}
body.stage-viewport-expanded .stage-frame-resize-handle {
  display: none !important;
}

/*
 * Stage body fills remaining shell height (not 100% of shell — that ate the
 * Wallpaper/Style/Sharescreen/Layout row and clipped it).
 */
body.stage-viewport-expanded .stage-frame-body,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="standard"] .stage-frame-body,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="signing"] .stage-frame-body,
body.stage-viewport-expanded .stage-frame-body.stage-body--freeform,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="standard"] .stage-frame-body.stage-body--freeform,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="signing"] .stage-frame-body.stage-body--freeform {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

body.stage-viewport-expanded .stage-frame-shell[data-tile-size="standard"] .main-stage-grid,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="signing"] .main-stage-grid,
body.stage-viewport-expanded #main-stage-grid,
body.stage-viewport-expanded #main-stage-grid.stage-grid--freeform {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

/*
 * Pop-out = pure stage to the corners. Hide Wallpaper/Style/Sharescreen/Layout
 * under-stage row (Studio dock stays). Re-open those menus after pop-in.
 */
body.stage-viewport-expanded .stage-admin-decor,
body.stage-viewport-expanded .stage-frame-shell .stage-admin-decor,
.video-call-layout:fullscreen .stage-admin-decor,
.video-call-layout:-webkit-full-screen .stage-admin-decor {
  display: none !important;
}

/* Stage body fills the full shell in pop-out (no admin strip eating height) */
body.stage-viewport-expanded .stage-frame-shell,
.video-call-layout:fullscreen .stage-frame-shell,
.video-call-layout:-webkit-full-screen .stage-frame-shell {
  height: 100% !important;
  max-height: 100% !important;
}
body.stage-viewport-expanded .stage-frame-body,
body.stage-viewport-expanded .stage-frame-body.stage-body--freeform,
.video-call-layout:fullscreen .stage-frame-body,
.video-call-layout:-webkit-full-screen .stage-frame-body {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* Studio dock stays in pop-out / native fullscreen (admin pills are hidden) */
body.stage-viewport-expanded .stage-bottom-chrome,
.video-call-layout:fullscreen .stage-bottom-chrome,
.video-call-layout:-webkit-full-screen .stage-bottom-chrome {
  position: absolute !important;
  left: 0.35rem !important;
  right: auto !important;
  bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 11600 !important;
  width: auto !important;
  max-width: calc(100vw - 0.7rem) !important;
  margin: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

body.stage-viewport-expanded .stage-bottom-chrome .stage-session-dock,
.video-call-layout:fullscreen .stage-bottom-chrome .stage-session-dock,
.video-call-layout:-webkit-full-screen .stage-bottom-chrome .stage-session-dock {
  pointer-events: auto !important;
}

body.stage-viewport-expanded .stage-viewport-expand-btn {
  top: max(0.35rem, env(safe-area-inset-top, 0px));
  right: max(0.35rem, env(safe-area-inset-right, 0px));
  z-index: 11650;
  /* Still fades when idle while full-screen — wake on hover/touch */
  opacity: 0.14;
  background: transparent;
  border-color: transparent;
  color: rgba(245, 247, 251, 0.55);
  box-shadow: none;
}
body.stage-viewport-expanded .stage-frame-shell.is-expand-chrome-awake .stage-viewport-expand-btn,
body.stage-viewport-expanded .stage-viewport-expand-btn:hover,
body.stage-viewport-expanded .stage-viewport-expand-btn:focus-visible,
body.stage-viewport-expanded .stage-viewport-expand-btn.is-awake {
  opacity: 1;
  background: rgba(0, 40, 48, 0.92);
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--accent-cyan, #00e5ff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.stage-frame-shell[data-tile-size="signing"] .main-stage-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: clamp(0.12rem, 0.28vw, 0.3rem);
  padding: 0;
  margin: 0;
  align-content: stretch;
  overflow: hidden;
  background: #000;
}
.stage-frame-shell[data-tile-size="signing"] .main-stage-slot {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame {
  width: min(100cqw, calc(100cqh * 16 / 9)) !important;
  height: min(100cqh, calc(100cqw * 9 / 16)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
  border-radius: 0;
}

@media (min-width: 1101px) {
  .stage-frame-center-wrap:has(.ad-slot-stage-flank:not([hidden]))
    .stage-frame-shell[data-tile-size="standard"] {
    width: min(
      calc(100% - 24rem),
      calc((100dvh - 11rem) * var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1))
    );
    max-width: calc(100% - 24rem);
  }
  .stage-frame-center-wrap:has(.ad-slot-stage-flank:not([hidden]))
    .stage-frame-shell[data-tile-size="signing"] {
    width: min(
      calc(100% - 24rem),
      calc(
        (100dvh - 11rem)
        * var(--stage-grid-cols, 1)
        * 16
        / (var(--stage-grid-rows, 1) * 9)
      )
    );
    max-width: calc(100% - 24rem);
  }
}

/* Tile size controls — under stage, never burned into the live/composite video */
.stage-tile-size-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.75rem;
  margin: 0.45rem auto 0.15rem;
  padding: 0.35rem 0.55rem;
  max-width: min(36rem, 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(8, 14, 22, 0.72);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.stage-tile-size-bar[hidden] {
  display: none !important;
}

.stage-tile-size-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
}

.stage-tile-size-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.stage-tile-size-btn {
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 18, 26, 0.9);
  color: rgba(230, 240, 245, 0.88);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.stage-tile-size-btn:hover {
  border-color: rgba(0, 229, 255, 0.45);
  color: #f4fbff;
}

.stage-tile-size-btn.is-active,
.stage-tile-size-btn[aria-pressed="true"] {
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 229, 255, 0.12);
  color: #c8f7ff;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.15);
}

.stage-frame-resize-handle {
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(0, 229, 255, 0.75) 38% 44%, transparent 44% 56%, rgba(0, 229, 255, 0.75) 56% 62%, transparent 62% 100%);
  cursor: ew-resize;
  z-index: 6;
}

.stage-frame-resize-handle[hidden] {
  display: none !important;
}

.stage-frame-resize-handle.is-dragging {
  border-color: rgba(0, 229, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2);
}

.stage-frame-header {
  display: none;
}

.stage-frame-slot-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-cyan);
  text-align: center;
}

.stage-frame-shell .main-stage-grid {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  /* Unhug (default): breathing room between tiles */
  gap: clamp(0.3rem, 0.65vw, 0.65rem);
  grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(0, 1fr));
  align-content: stretch;
}

/*
 * Hug toggle: applies to Standard only (see Standard block above).
 * Signing is intentionally excluded — leave 16:9 rectangle layout alone.
 */

.stage-frame-shell .main-stage-slot {
  container-type: size;
  container-name: stage-slot;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Stage tile media sizing — object-fit set via Video frame preference (default cover) */
.stage-frame-shell .main-stage-grid .frame-media video,
.stage-frame-shell .main-stage-grid .frame-media img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.stage-frame-shell .main-stage-slot .frame-media.polygon-frame {
  position: relative;
  inset: unset;
  top: unset;
  right: unset;
  bottom: unset;
  left: unset;
  /*
   * Largest tile of the configured aspect that fits the slot × scale.
   * Uses container query units so Standard/Compact stay true squares and
   * Signing stays 16:9 even when the stage shell is landscape (viewport clamp).
   * Fallback % path if cqw/cqh do not resolve (rare).
   */
  --_tile-ar: calc(var(--stage-tile-aspect-w, 1) / var(--stage-tile-aspect-h, 1));
  /* Fit aspect inside cell × scale. Cap at cell (scale ≤ 1) so tiles never overlap. */
  width: min(
    calc(100cqw * var(--stage-tile-scale, 1)),
    calc(100cqh * var(--stage-tile-scale, 1) * var(--_tile-ar, 1))
  );
  height: min(
    calc(100cqh * var(--stage-tile-scale, 1)),
    calc(100cqw * var(--stage-tile-scale, 1) / var(--_tile-ar, 1))
  );
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--stage-tile-aspect-w, 1) / var(--stage-tile-aspect-h, 1);
  flex: 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--stage-video-inset);
  background: var(--surface-raised);
}

/* Standard: hard clip in cell — no overlap, no paint under row 1 */
.stage-frame-shell[data-tile-size="standard"] .main-stage-slot {
  overflow: hidden;
}
.stage-frame-shell[data-tile-size="standard"] .main-stage-grid {
  overflow: hidden;
}

/* Fallback when container queries unavailable: % of slot (may stretch slightly) */
@supports not (width: 1cqw) {
  .stage-frame-shell .main-stage-slot .frame-media.polygon-frame {
    --stage-tile-size: calc(var(--stage-tile-scale, 0.88) * 100%);
    width: var(--stage-tile-size);
    height: auto;
    aspect-ratio: var(--stage-tile-aspect-w, 1) / var(--stage-tile-aspect-h, 1);
    max-height: 100%;
  }
  .stage-frame-shell:not([data-tile-size="signing"]) .main-stage-slot .frame-media.polygon-frame {
    height: var(--stage-tile-size);
    aspect-ratio: 1;
  }
}

.stage-frame-shell .main-stage-slot .frame-media.polygon-frame > video,
.stage-frame-shell .main-stage-slot .frame-media.polygon-frame > img,
.stage-frame-shell .main-stage-slot .frame-media.polygon-frame > .video-placeholder,
.stage-frame-shell .main-stage-slot .frame-media.polygon-frame > .camera-active-placeholder,
.stage-frame-shell .main-stage-slot .frame-media.polygon-frame > .mux-live-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  box-sizing: border-box;
}

.stage-frame-shell .main-stage-grid .frame-media video,
.stage-frame-shell .main-stage-grid .frame-media img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Pointer drag-to-swap (HTML5 DnD fails on live <video> tiles) */
.main-stage-slot-draggable {
  cursor: grab;
  touch-action: none; /* allow pointer capture drag without page scroll fighting */
  user-select: none;
  -webkit-user-select: none;
}

.main-stage-slot-draggable:active {
  cursor: grabbing;
}

.main-stage-slot-draggable video,
.main-stage-slot-draggable img,
.main-stage-slot-draggable canvas,
.main-stage-slot-draggable .vp-tile-badge-stack,
.main-stage-slot-draggable .vp-brand-chip,
.main-stage-slot-draggable .frame-label,
.main-stage-slot-draggable .stage-name-badge,
.main-stage-slot-draggable .video-placeholder,
.main-stage-slot-draggable .camera-active-placeholder,
.main-stage-slot-draggable .mux-live-preview {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.main-stage-slot-draggable button,
.main-stage-slot-draggable a,
.main-stage-slot-draggable input,
.main-stage-slot-draggable .stage-slot-admin,
.main-stage-slot-draggable .main-slot-remove-zone,
.main-stage-slot-draggable .participant-tile-chrome-host {
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-drag: none;
}

.main-stage-slot-dragging {
  opacity: 0.55;
  outline: 2px dashed rgba(0, 229, 255, 0.75);
  outline-offset: 2px;
  z-index: 5;
}

.main-stage-slot-drop-target {
  outline: 2px solid rgba(0, 229, 255, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18);
  z-index: 4;
}

/*
 * Stage tile chrome (mute / × / headset) MUST live inside .frame-media at any count.
 * Outer .main-stage-slot is often larger than the scaled media box — controls on the
 * slot float in gutters. Global 44×44 tap targets (below) must NOT win here.
 */
.stage-frame-shell .main-stage-slot,
.stage-frame-shell .main-stage-slot .frame-media.polygon-frame,
.main-stage-slot .frame-media.polygon-frame {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
}

.stage-frame-shell .main-stage-slot .frame-media.polygon-frame,
.main-stage-slot .frame-media.polygon-frame {
  position: relative !important;
  /* stacking context so absolute mute/× stay in this box, not the cell */
  z-index: 0;
  transform: translateZ(0);
}

/* Legacy: never show admin chrome hung on the outer slot */
.main-stage-slot > .stage-slot-admin {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Pin mute to bottom-right of the painted media box (not the grid cell). */
.main-stage-slot .frame-media > .stage-slot-admin,
.stage-frame-shell .main-stage-slot .frame-media > .stage-slot-admin {
  position: absolute !important;
  right: max(0.18rem, 2%) !important;
  bottom: max(0.18rem, 2%) !important;
  left: auto !important;
  top: auto !important;
  inset: auto max(0.18rem, 2%) max(0.18rem, 2%) auto !important;
  z-index: 14 !important;
  pointer-events: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: auto !important;
  height: auto !important;
  max-width: min(2rem, calc(100% - 0.3rem)) !important;
  max-height: min(2rem, calc(100% - 0.3rem)) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: visible;
  transform: none !important;
}

/* × remove stays top-right inside the same media box */
.main-stage-slot .frame-media > .main-slot-remove-zone {
  position: absolute !important;
  top: max(0.14rem, 1.5%) !important;
  right: max(0.14rem, 1.5%) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 15 !important;
  width: auto !important;
  height: auto !important;
  max-width: 40%;
  max-height: 30%;
}

/*
 * Friend/wave/headset: tight bottom-right on Square (and group) stage tiles.
 * Sit just above the compact mute (≈1.2rem) — avoid large % bottoms that float
 * mid-tile on tall slots (audio_handwave.png).
 */
.main-stage-slot .frame-media.participant-tile-chrome-host > .participant-tile-chrome-cluster {
  position: absolute !important;
  right: max(0.14rem, 1.5%) !important;
  bottom: 1.28rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 13 !important;
  max-width: calc(100% - 0.28rem);
  overflow: visible;
  gap: 0.16rem;
}

/*
 * Compact mute control — sizes MUST beat the global 44px tap-target rule
 * (see “Tap Targets” later in this file).
 */
.main-stage-slot .stage-audio-mute-btn,
.stage-frame-shell .main-stage-slot .stage-audio-mute-btn,
button.stage-audio-mute-btn {
  pointer-events: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: clamp(1.05rem, 11cqmin, 1.35rem) !important;
  height: clamp(1.05rem, 11cqmin, 1.35rem) !important;
  min-width: 1.05rem !important;
  min-height: 1.05rem !important;
  max-width: 1.4rem !important;
  max-height: 1.4rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 12, 16, 0.78);
  color: rgba(230, 240, 245, 0.92);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.stage-audio-mute-btn:hover {
  background: rgba(12, 18, 22, 0.82);
  border-color: rgba(255, 255, 255, 0.32);
}

.stage-audio-mute-btn[aria-pressed="true"] {
  border-color: rgba(255, 193, 7, 0.55);
  color: #ffd88a;
  background: rgba(40, 28, 8, 0.72);
}

.stage-audio-mute-icon {
  width: 0.78rem !important;
  height: 0.78rem !important;
  display: block;
  flex: 0 0 auto;
}

.group-management-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.group-management-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
}

.group-management-rename-btn,
.group-management-delete-btn {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
}

.group-management-rename-btn {
  background: rgba(103, 232, 249, 0.08);
  border-color: rgba(103, 232, 249, 0.35);
  color: var(--settings-accent, #67e8f9);
}

.group-management-rename-btn:hover {
  background: rgba(103, 232, 249, 0.16);
  border-color: rgba(103, 232, 249, 0.55);
}

.group-management-rename-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.group-management-name-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.name-lock-checkbox,
.group-management-name-lock-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 0.7rem;
  height: 0.7rem;
  min-width: 0.7rem;
  min-height: 0.7rem;
  margin: 0;
  flex: 0 0 0.7rem;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.15rem;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}

.name-lock-checkbox:checked,
.group-management-name-lock-input:checked {
  background-color: var(--settings-accent, #67e8f9);
  border-color: var(--settings-accent, #67e8f9);
}

.name-lock-checkbox:checked::after,
.group-management-name-lock-input:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.18rem;
  height: 0.34rem;
  border: solid #071018;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.name-lock-checkbox:focus-visible,
.group-management-name-lock-input:focus-visible {
  outline: 2px solid var(--settings-accent, #67e8f9);
  outline-offset: 1px;
}

.settings-name-lock-row,
.settings-display-name-lock-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  width: fit-content;
  max-width: 100%;
}

.group-management-name-lock-text {
  line-height: 1.1;
}

.space-rename-locked-note {
  margin: 0;
  padding: 0.35rem 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

.group-management-delete-btn {
  background: rgba(255, 82, 82, 0.1);
  border-color: rgba(255, 82, 82, 0.45);
  color: #ff8a80;
}

.group-management-delete-btn:hover {
  background: rgba(255, 82, 82, 0.18);
  border-color: rgba(255, 82, 82, 0.7);
}

.group-management-delete-all {
  width: 100%;
  margin-top: 0.85rem;
  min-height: 2.75rem;
  background: rgba(255, 82, 82, 0.1);
  border-color: rgba(255, 82, 82, 0.45);
  color: #ff8a80;
}

.group-management-delete-all:hover {
  background: rgba(255, 82, 82, 0.18);
  border-color: rgba(255, 82, 82, 0.7);
}

.group-management-delete-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.group-management-protected {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  max-width: 8.5rem;
  line-height: 1.35;
}

.delete-group-simple-modal .modal-content {
  text-align: left;
  align-items: stretch;
  max-width: 24rem;
}

.group-name-modal .modal-content {
  text-align: left;
  align-items: stretch;
  max-width: 24rem;
}

.group-name-modal-desc {
  margin: 0 0 1rem;
}

.group-name-modal-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.group-name-modal-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-grey);
  border-radius: 0.75rem;
  padding: 0.75rem 0.95rem;
  color: var(--text-color);
  font-size: 1rem;
  min-height: 2.75rem;
}

.group-name-modal-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.group-name-modal-error {
  min-height: 1.25rem;
  margin: 0.5rem 0 0;
}

.group-name-modal-flags,
.group-name-modal-flags-readonly {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.85rem 0 0.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-grey);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
}

.group-name-modal-flags[hidden],
.group-name-modal-flags-readonly[hidden] {
  display: none !important;
}

.group-name-modal-flags-readonly-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-color);
}

.group-name-modal-flags-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.group-name-modal-flag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--text-color);
  cursor: pointer;
}

.group-name-modal-flag input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent-cyan);
}

.group-name-modal-flags-hint {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.group-join-warning-modal .modal-content {
  text-align: left;
  align-items: stretch;
  max-width: 26rem;
}

.group-join-warning-message {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.group-join-warning-message p {
  margin: 0;
  text-align: left;
  line-height: 1.5;
  color: var(--text-muted);
}

#group-join-warning-modal {
  z-index: 1002;
}

.beta-management-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.beta-mgmt-empty {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.beta-mgmt-list-header {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.15rem 0.65rem;
  border-bottom: 1px solid var(--border-grey);
  margin-bottom: 0.35rem;
}

.beta-mgmt-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.beta-mgmt-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
}

.beta-mgmt-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}

.beta-mgmt-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-grey);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.18);
}

.beta-demoted-links {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  text-align: left;
  line-height: 1.6;
}

.beta-mgmt-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.beta-mgmt-name {
  font-weight: 700;
  color: var(--text-color);
}

.beta-mgmt-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.beta-mgmt-status-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  margin-top: 0.15rem;
}

.beta-mgmt-status-pending { background: rgba(255, 193, 7, 0.18); color: #ffc107; }
.beta-mgmt-status-approved { background: rgba(0, 200, 150, 0.18); color: var(--accent-cyan); }
.beta-mgmt-status-rejected { background: rgba(255, 80, 80, 0.15); color: #ff8a8a; }
.beta-mgmt-status-suspended { background: rgba(150, 150, 150, 0.2); color: #bdbdbd; }

.beta-mgmt-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  color: var(--accent-cyan);
}

.beta-mgmt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.beta-mgmt-btn-danger {
  border-color: rgba(255, 80, 80, 0.45);
  color: #ff9f9f;
}

.beta-mgmt-manual-invite {
  margin: 0.85rem 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(103, 232, 249, 0.35);
  border-radius: 0.65rem;
  background: rgba(8, 47, 73, 0.22);
}

.beta-mgmt-manual-invite-hint {
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.beta-mgmt-manual-invite-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
}

.beta-mgmt-manual-invite-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 12rem;
  min-width: 10rem;
}

.beta-mgmt-manual-invite-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--settings-muted, var(--text-muted));
  letter-spacing: 0.02em;
}

.beta-mgmt-invite-input,
.beta-mgmt-access-days-select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--settings-border, rgba(148, 163, 184, 0.35));
  border-radius: 0.45rem;
  background: rgba(15, 23, 42, 0.72);
  color: var(--settings-text, var(--text-color, #f1f5f9));
  font-size: 0.88rem;
  color-scheme: dark;
}

/* Kill browser autofill white box on email field */
.beta-mgmt-invite-input:-webkit-autofill,
.beta-mgmt-invite-input:-webkit-autofill:hover,
.beta-mgmt-invite-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9;
  caret-color: #f1f5f9;
  box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.95) inset;
  transition: background-color 99999s ease-in-out 0s;
}

.beta-mgmt-invite-input::placeholder {
  color: var(--text-muted, #94a3b8);
  opacity: 0.85;
}

.beta-mgmt-invite-input:focus,
.beta-mgmt-access-days-select:focus {
  outline: 2px solid rgba(103, 232, 249, 0.45);
  outline-offset: 1px;
  background: rgba(15, 23, 42, 0.9);
}

.settings-panel-live-addons {
  border-color: rgba(103, 232, 249, 0.28);
}

.products-addon-shell {
  position: relative;
  overflow: visible;
  /* Shop card — a few rem wider; flyout still anchors off the right edge */
  max-width: min(100%, 62rem);
  width: 100%;
}

.products-addon-shell .products-addon-main {
  min-width: 0;
  max-width: 100%;
}

.products-addon-shell.is-active-products-open {
  max-width: min(100%, 62rem);
}

.settings-panel-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.settings-panel-title-row .settings-panel-title {
  margin: 0;
}

.active-products-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
}

.active-products-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.7rem;
}

.products-addon-shell.is-active-products-open .active-products-toggle-icon {
  transform: rotate(90deg);
}

/* Square join modal — longer privacy copy */
.square-join-modal-content {
  max-width: min(28rem, 92vw);
  text-align: left;
}

.square-join-message {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 0.35rem;
}

.square-join-message p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-color, #e8e8e8);
}

.square-join-settings-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--accent-cyan, #00e5ff);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.square-join-settings-link:hover,
.square-join-settings-link:focus-visible {
  color: #7df9ff;
}

/* My Active Products — cool flyout off the right edge of the shop card */
.active-products-popout {
  position: absolute;
  top: 0;
  left: calc(100% + 0.75rem);
  z-index: 12;
  /* Taller flyout for multi-SKU lists (~few more inches) */
  width: min(28rem, 40vw);
  height: auto;
  max-height: min(88vh, 52rem);
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.75rem 0.9rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: var(--settings-panel-bg, rgba(15, 23, 42, 0.96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateX(-0.75rem);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.products-addon-shell.is-active-products-open .active-products-popout {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.active-products-popout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.active-products-popout-header .settings-panel-title {
  margin: 0;
  font-size: 1.05rem;
}

.active-products-popout-close {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--settings-border, rgba(148, 163, 184, 0.28));
  border-radius: 0.4rem;
  background: transparent;
  color: var(--settings-muted, var(--text-muted));
  cursor: pointer;
  line-height: 1;
}

.active-products-popout-close:hover {
  color: var(--settings-text, var(--text-color));
  border-color: rgba(167, 139, 250, 0.45);
}

.active-products-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.active-products-popout .settings-panel-desc--compact {
  flex-shrink: 0;
}

/*
 * Tablet / mobile: keep Active Products as a second column (not buried under the shop).
 * Horizontal scroll on the shell shows shop | Active Products side by side.
 */
@media (max-width: 1100px) {
  /* Parent section cards often clip absolute children — allow horizontal pan */
  .settings-panel-live-addons.products-addon-shell,
  .settings-main,
  .settings-page-layout--sectioned .settings-main {
    overflow-x: auto;
    overflow-y: visible;
  }

  .products-addon-shell {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    max-width: 100%;
    scroll-snap-type: x proximity;
  }

  .products-addon-shell.is-active-products-open {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    width: max-content;
    min-width: 100%;
    max-width: none;
    padding-bottom: 0.35rem;
    padding-right: 1rem;
  }

  .products-addon-shell.is-active-products-open .products-addon-main {
    flex: 0 0 auto;
    width: min(92vw, 26rem);
    min-width: min(88vw, 22rem);
    max-width: min(92vw, 28rem);
    scroll-snap-align: start;
  }

  .active-products-popout {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    width: min(88vw, 22rem);
    min-width: min(80vw, 18rem);
    max-width: min(90vw, 24rem);
    max-height: min(72vh, 34rem);
    min-height: 16rem;
    transform: none;
    opacity: 0;
    pointer-events: none;
    scroll-snap-align: start;
  }

  .products-addon-shell.is-active-products-open .active-products-popout {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .active-products-list-wrap {
    max-height: none;
    flex: 1 1 auto;
  }
}

.active-products-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.active-products-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--settings-border, rgba(148, 163, 184, 0.22));
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.35);
}

.active-products-item-label {
  font-size: 0.88rem;
  color: var(--settings-text, var(--text-color));
}

.active-products-item-detail {
  font-size: 0.8rem;
  color: var(--settings-muted, var(--text-muted));
  line-height: 1.4;
}

.active-products-item-countdown {
  font-size: 0.76rem;
  font-weight: 600;
  color: #a5f3fc;
}

.active-products-empty {
  margin: 0.75rem 0 0;
  font-size: 0.84rem;
  color: var(--settings-muted, var(--text-muted));
  line-height: 1.45;
}

.active-products-onetime-summary {
  flex-shrink: 0;
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #c4b5fd;
}

.active-products-monthly-total {
  flex-shrink: 0;
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--settings-text, var(--text-color));
}

.active-products-recent-wrap {
  flex-shrink: 0;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.active-products-recent-title {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--settings-text, var(--text-color));
}

.active-products-recent-note {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--settings-muted, var(--text-muted));
}

.active-products-recent-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--settings-muted, var(--text-muted));
}

.active-products-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 9.5rem;
  overflow-y: auto;
}

.active-products-recent-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.active-products-recent-label {
  font-size: 0.8rem;
  color: var(--settings-text, var(--text-color));
}

.active-products-recent-meta {
  font-size: 0.74rem;
  color: var(--settings-muted, var(--text-muted));
}

.active-products-recent-status {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fcd34d;
}

.ad-slot-frame--mock {
  flex-direction: column;
  gap: 0.35rem;
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
}

.ad-slot-dev-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--footer-height, 3.25rem) + 0.65rem);
  transform: translateX(-50%);
  z-index: 60;
  width: min(42rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.ad-slot-dev-bar .ad-slot-frame--mock {
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.ad-slot-mock-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.live-addons-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.65rem 0 1rem;
}

.live-addons-shop-empty {
  padding: 1.25rem 1rem;
  border: 1px dashed rgba(248, 113, 113, 0.45);
  border-radius: 0.55rem;
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
}

.live-addons-shop-empty-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.live-addons-shop-empty-copy {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #fca5a5;
}

.live-addons-shop-section {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.live-addons-shop-section:first-child {
  border-top: none;
}

.live-addons-shop-section-header {
  padding: 0.75rem 0.75rem 0.35rem;
  background: rgba(8, 47, 73, 0.22);
}

.live-addons-shop-section-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8ee4ff;
}

.live-addons-shop-section-desc {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--settings-muted, var(--text-muted));
}

.live-addons-shop-section-body .live-addons-row-group:last-child .live-addons-row,
.live-addons-shop-section-body > .live-addons-row:last-child {
  border-bottom: none;
}

.live-addons-picker-table {
  border: 1px solid var(--settings-border, rgba(148, 163, 184, 0.28));
  border-radius: 0.55rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.live-addons-picker-header,
.live-addons-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.7fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem 0.75rem;
}

.live-addons-picker-header {
  background: rgba(15, 23, 42, 0.55);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--settings-muted, var(--text-muted));
}

.live-addons-row {
  border-top: 1px solid var(--settings-border, rgba(148, 163, 184, 0.18));
  font-size: 0.88rem;
}

.live-addons-row-label {
  display: block;
  font-weight: 600;
  color: var(--settings-text, var(--text-color));
}

.live-addons-row-free {
  display: block;
  font-size: 0.78rem;
  color: var(--settings-muted, var(--text-muted));
  margin-top: 0.2rem;
  line-height: 1.4;
}

.live-addons-privilege-badge {
  display: inline-flex;
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  background: rgba(103, 232, 249, 0.12);
  color: #a5f3fc;
  border: 1px solid rgba(103, 232, 249, 0.25);
}

.live-addons-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
}

.live-addons-stepper {
  margin-bottom: 0.35rem;
}

.live-addons-recording-15-check {
  display: flex;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.live-addons-row-group {
  border-top: 1px solid var(--settings-border, rgba(148, 163, 184, 0.18));
}

.live-addons-row-group .live-addons-row--destinations {
  border-top: none;
}

.live-addons-dest-platforms {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.live-addons-dest-platform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.live-addons-dest-connect {
  flex-shrink: 0;
}

.live-addons-dest-tier {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

.live-addons-dest-tier.is-free {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.live-addons-dest-tier.is-paid {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.live-addons-dest-note {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: var(--settings-muted, var(--text-muted));
}

.live-addons-col-price--toggle {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.live-addons-price-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(103, 232, 249, 0.35);
  border-radius: 0.4rem;
  background: rgba(8, 47, 73, 0.35);
  color: #a5f3fc;
  font-size: 0.78rem;
  cursor: pointer;
  text-align: right;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.live-addons-price-toggle:hover {
  background: rgba(8, 47, 73, 0.55);
  border-color: rgba(103, 232, 249, 0.55);
}

.live-addons-price-toggle[aria-expanded="true"] {
  background: rgba(103, 232, 249, 0.14);
  border-color: rgba(103, 232, 249, 0.5);
}

.live-addons-price-toggle-amount {
  font-weight: 700;
  color: var(--settings-text, var(--text-color));
}

.live-addons-price-toggle-label {
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.live-addons-dest-pricing-panel {
  padding: 0.65rem 0.75rem 0.8rem;
  background: rgba(15, 23, 42, 0.45);
  border-top: 1px dashed rgba(103, 232, 249, 0.2);
  font-size: 0.8rem;
  color: var(--settings-muted, var(--text-muted));
}

.live-addons-dest-pricing-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--settings-text, var(--text-color));
  font-size: 0.82rem;
}

.live-addons-dest-pricing-list {
  margin: 0 0 0.45rem;
  padding-left: 1.1rem;
  line-height: 1.45;
}

.live-addons-dest-pricing-list li {
  margin-bottom: 0.2rem;
}

.live-addons-dest-pricing-active {
  margin: 0;
  font-size: 0.78rem;
}

.live-addons-dest-pricing-active span {
  font-weight: 600;
  color: var(--settings-text, var(--text-color));
}

.live-addons-cart {
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
  border-radius: 0.5rem;
  background: rgba(8, 47, 73, 0.2);
  border: 1px dashed rgba(103, 232, 249, 0.22);
  font-size: 0.88rem;
}

.live-addons-cart p {
  margin: 0.2rem 0;
}

.live-addons-cart-total-line {
  margin-top: 0.45rem !important;
  font-size: 1rem;
}

.live-addons-cart-hint {
  font-size: 0.78rem;
  color: var(--settings-muted, var(--text-muted));
  margin-top: 0.45rem !important;
}

.live-addons-recording-queue-banner {
  margin: 0.85rem 0 0.5rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 0.65rem;
  background: rgba(15, 23, 42, 0.45);
}

.live-addons-recording-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.live-addons-recording-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.live-addons-recording-status--armed {
  color: #8ff7ff;
  background: rgba(0, 229, 255, 0.14);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.live-addons-recording-status--armed .live-addons-recording-status-dot {
  background: #00e5ff;
  box-shadow: 0 0 0.45rem rgba(0, 229, 255, 0.75);
}

.live-addons-recording-status--paused {
  color: #f0c27a;
  background: rgba(240, 194, 122, 0.1);
  border: 1px solid rgba(240, 194, 122, 0.28);
}

.live-addons-recording-status--paused .live-addons-recording-status-dot {
  background: #f0c27a;
}

.live-addons-recording-status--live {
  color: #b6f5c8;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.28);
}

.live-addons-recording-status--live .live-addons-recording-status-dot {
  background: #66bb6a;
}

.live-addons-recording-queue-note {
  margin: 0 0 0.65rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--settings-text, var(--text-color));
}

.live-addons-recording-queue-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.live-addons-recording-queue-actions .settings-panel-btn {
  pointer-events: auto;
  cursor: pointer;
}

.beta-mgmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.beta-user-modal .modal-content {
  text-align: left;
  align-items: stretch;
  max-width: 28rem;
}

.beta-user-modal p {
  text-align: left;
  line-height: 1.55;
  color: var(--text-muted);
}

.beta-user-modal a {
  color: var(--accent-cyan);
}

#beta-rejected-modal,
#beta-pending-modal {
  z-index: 1003;
}

.delete-group-simple-message {
  margin: 0 0 1rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.delete-groups-modal {
  z-index: 1002;
}

.delete-groups-modal-content {
  text-align: left;
  align-items: stretch;
  max-width: 28rem;
}

.group-management-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.group-management-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.group-management-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.spaces-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.spaces-scroll::-webkit-scrollbar {
  display: none;
}

.spaces-list {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  padding: 0.15rem 0.1rem;
  margin: 0;
  white-space: nowrap;
}

.space-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 0 0 auto;
}

.space-item-create {
  margin-right: 0.45rem;
}

.space-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 999px;
  color: var(--text-color);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  min-height: 2.25rem;
  min-width: auto;
  max-width: 12rem;
}

.space-pill--has-thumb {
  padding-left: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Owner-set icon replaces display name on the nav button (+1 size step for readability) */
.space-pill--icon-only {
  padding: 0.22rem;
  min-width: 2.55rem;
  max-width: 2.85rem;
  justify-content: center;
}

.space-pill--icon-only .space-pill-thumb {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.5rem;
}

.space-pill-thumb {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-sunken, #0f172a);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.space-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Owner ⋮ → Button icon (between Group name and Invite) */
.space-button-icon-note {
  margin-bottom: 0.45rem !important;
}
.space-button-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.15rem;
}
.space-button-icon-preview-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.85);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.space-button-icon-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.space-button-icon-placeholder {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.space-button-icon-controls {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  flex: 1;
}
.space-button-icon-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.space-button-icon-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.space-button-icon-status {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--accent-cyan, #67e8f9);
  min-height: 1rem;
}
.space-button-icon-remove {
  padding: 0.28rem 0.45rem !important;
  font-size: 0.72rem !important;
  width: auto !important;
  opacity: 0.9;
}
.space-button-icon-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.space-button-icon-upload {
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
}

.nav-mobile-space-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
}

.nav-mobile-space-btn .space-pill-thumb {
  width: 1.35rem;
  height: 1.35rem;
}

.group-management-thumbnail {
  margin: 0.65rem 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(51, 65, 85, 0.65);
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.45);
}

.group-management-thumbnail-title {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color, #e2e8f0);
}

.group-management-thumbnail-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted, #94a3b8);
}

.group-management-thumbnail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem;
}

.group-management-thumbnail-preview-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.8);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.group-management-thumbnail-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-management-thumbnail-placeholder {
  font-size: 0.65rem;
  color: var(--text-muted, #64748b);
  text-align: center;
  padding: 0.25rem;
}

.group-management-thumbnail-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: min(100%, 14rem);
  flex: 1;
}

.group-management-thumbnail-input {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

.group-management-thumbnail-status {
  margin: 0;
  min-height: 1.1rem;
  font-size: 0.78rem;
  color: var(--accent-cyan, #67e8f9);
}

.group-management-thumbnail-remove:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.space-pill:hover:not(:disabled) {
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--accent-cyan);
}

.space-pill.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.1);
  box-shadow: 0 0 12px var(--accent-cyan-dim);
  font-weight: 600;
}

.space-pill.space-opted-out {
  opacity: 0.45;
  cursor: not-allowed;
}

.space-pill.space-pill-beta-creators {
  border-color: rgba(255, 193, 7, 0.45);
  color: #ffd54f;
  background: rgba(255, 193, 7, 0.08);
}

.space-pill.space-pill-beta-creators.active {
  border-color: #ffc107;
  color: #ffe082;
  background: rgba(255, 193, 7, 0.16);
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.2);
}

/* Free-slot owned groups in header (and mirrored mobile nav buttons) */
.space-pill.space-pill-free-slot,
.nav-mobile-space-btn.space-pill-free-slot {
  border-color: rgba(46, 204, 113, 0.65);
  background: rgba(46, 204, 113, 0.16);
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.12);
}

.space-pill.space-pill-free-slot:hover:not(:disabled),
.nav-mobile-space-btn.space-pill-free-slot:hover:not(:disabled) {
  border-color: rgba(46, 204, 113, 0.9);
  color: #7dffb2;
}

.space-pill.space-pill-free-slot.active,
.nav-mobile-space-btn.space-pill-free-slot.active {
  border-color: rgba(46, 204, 113, 0.95);
  color: #9dffc4;
  background: rgba(46, 204, 113, 0.22);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.22);
  font-weight: 600;
}

/* Friend search (nav) */
.friend-search-wrap {
  position: relative;
  flex: 0 1 220px;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.friend-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 999px;
  color: var(--text-color);
  font-size: 0.8rem;
  min-height: 2.25rem;
}

.friend-search-input::placeholder {
  color: var(--text-muted);
}

.friend-search-input:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 0 2px var(--accent-cyan-dim);
}

.friend-search-input:-webkit-autofill,
.friend-search-input:-webkit-autofill:hover,
.friend-search-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-raised) inset !important;
  box-shadow: 0 0 0 1000px var(--surface-raised) inset !important;
  -webkit-text-fill-color: var(--text-color) !important;
  caret-color: var(--text-color);
}

.friend-requests-btn {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 999px;
  color: var(--text-color);
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
}

.friend-requests-btn:hover,
.friend-requests-btn[aria-expanded="true"] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.friend-requests-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0;
  background: #ff5252;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.friend-search-results,
.friend-requests-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, 92vw);
  max-height: none;
  overflow-y: visible;
  background: var(--modal-bg);
  border: 1px solid var(--border-grey);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  z-index: 10001;
  padding: 0.5rem;
  pointer-events: auto;
}

.friend-requests-panel.friend-requests-panel--bounded {
  max-height: 360px;
  overflow-y: auto;
}

.friend-dropdown-floating {
  position: fixed !important;
  z-index: 100210 !important;
  pointer-events: auto !important;
}

.nav-mobile-search-results {
  position: static;
  width: 100%;
  max-height: 240px;
  margin-top: 0.45rem;
  box-shadow: none;
}

.nav-mobile-friend-requests {
  margin-top: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 0.85rem;
  cursor: pointer;
}

.nav-mobile-friend-requests-panel {
  position: static;
  width: 100%;
  max-height: none;
  overflow-y: visible;
  margin-top: 0.45rem;
  box-shadow: none;
}

.nav-mobile-friend-requests-panel.friend-requests-panel--bounded {
  max-height: 280px;
  overflow-y: auto;
}

.friend-search-result,
.friend-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.45rem;
  border-radius: 6px;
}

.friend-search-result:hover,
.friend-request-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.friend-search-info,
.friend-request-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.friend-search-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
}

.friend-search-id {
  font-size: 0.75rem;
  color: var(--accent-cyan);
}

.friend-search-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.friend-search-block {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2rem;
  border: 1px solid var(--border-grey);
  background: #1a1a1a;
  color: var(--text-muted);
}

.friend-search-block:hover {
  border-color: #ff5252;
  color: #ff5252;
}

.friend-search-action,
.friend-request-accept,
.friend-request-decline {
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2rem;
  border: 1px solid var(--border-grey);
  background: #1a1a1a;
  color: var(--text-color);
}

.friend-search-action:hover:not(:disabled),
.friend-request-accept:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.friend-search-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.friend-request-accept,
.friend-group-invite-accept,
.friend-join-request-accept,
.friend-request-row--transfer .friend-transfer-accept {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
}

.friend-request-accept:hover:not(:disabled),
.friend-group-invite-accept:hover:not(:disabled),
.friend-join-request-accept:hover:not(:disabled),
.friend-request-row--transfer .friend-transfer-accept:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.18);
  color: var(--accent-cyan);
}

.friend-group-invite-decline,
.friend-join-request-decline,
.friend-request-decline,
.friend-request-row--transfer .friend-transfer-decline,
.friend-request-row--transfer .friend-transfer-cancel,
.friend-request-row--takeover .friend-takeover-cancel {
  border-color: rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.08);
  color: #ff5252;
}

.friend-group-invite-decline:hover:not(:disabled),
.friend-join-request-decline:hover:not(:disabled),
.friend-request-decline:hover:not(:disabled),
.friend-request-row--transfer .friend-transfer-decline:hover:not(:disabled),
.friend-request-row--transfer .friend-transfer-cancel:hover:not(:disabled),
.friend-request-row--takeover .friend-takeover-cancel:hover:not(:disabled) {
  border-color: #ff5252;
  background: rgba(255, 82, 82, 0.14);
  color: #ff5252;
}

.friends-takeover-request-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.friend-request-row {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.friend-request-actions {
  display: flex;
  gap: 0.35rem;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.friend-request-accept,
.friend-request-decline {
  position: relative;
  z-index: 4;
  touch-action: manipulation;
  pointer-events: auto;
  cursor: pointer;
}

.friend-request-status {
  font-size: 0.78rem;
  color: var(--text-muted, #9aa0a6);
  white-space: nowrap;
}

.friend-requests-section {
  padding: 0.35rem 0.15rem;
}

.friend-requests-section + .friend-requests-section {
  border-top: 1px solid var(--border-grey);
  margin-top: 0.35rem;
  padding-top: 0.65rem;
}

.friend-requests-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem 0.35rem;
}

.friend-panel-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.35rem;
  margin: 0;
}

.friend-toast {
  position: fixed;
  bottom: calc(var(--footer-height, 36px) + 1rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: min(calc(100vw - 2rem), 22rem);
  max-width: calc(100vw - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid var(--accent-cyan);
  color: var(--text-color);
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  z-index: 10002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.friend-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.space-pill-create {
  flex: 0 0 auto;
  border-style: dashed;
  color: var(--accent-cyan);
  background: transparent;
}

.space-pill-create:hover {
  background: var(--accent-cyan-dim);
}

.space-pill-future {
  flex: 0 0 auto;
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.space-menu-btn {
  margin-left: -0.55rem;
  padding: 0.35rem 0.2rem;
  min-width: 1.75rem;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.22em;
  cursor: pointer;
  line-height: 1;
}

.space-menu-btn:hover,
.space-menu-btn[aria-expanded="true"] {
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.1);
}

.space-dropdown {
  min-width: 14.5rem;
  max-width: 17rem;
  background: var(--modal-bg);
  border: 1px solid var(--border-grey);
  border-radius: 10px;
  padding: 0.45rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.space-dropdown[hidden] {
  display: none !important;
}

.space-dropdown-section {
  padding: 0.35rem 0.25rem 0.5rem;
}

.space-dropdown-section + .space-dropdown-section {
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.2rem;
  padding-top: 0.55rem;
}

.space-dropdown-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.space-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.48rem 0.6rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-color);
  font-size: 0.84rem;
  cursor: pointer;
  min-height: 2.1rem;
  min-width: auto;
}

.space-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--accent-cyan);
}

.space-dropdown-item.active {
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  font-weight: 600;
}

.space-dropdown-item.active::before {
  content: '✓ ';
  opacity: 0.85;
}

.space-dropdown-danger {
  color: #ff8a80;
}

.space-dropdown-danger:hover {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.1);
}

.space-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.35rem 0.15rem;
}

.space-rename-row {
  display: flex;
  gap: 0.35rem;
}

.space-rename-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 0.84rem;
  min-height: 2.1rem;
}

.space-rename-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px var(--accent-cyan-dim);
}

.space-rename-save {
  flex: 0 0 auto;
  padding: 0.4rem 0.65rem;
  background: var(--accent-cyan-dim);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 6px;
  color: var(--accent-cyan);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-width: auto;
  min-height: 2.1rem;
}

.space-rename-save:hover {
  background: rgba(0, 229, 255, 0.22);
}

.space-invite-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.space-invite-input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 0.84rem;
  min-height: 2.1rem;
}

.space-invite-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px var(--accent-cyan-dim);
}

.space-invite-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.space-invite-results {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 11rem;
  overflow-y: auto;
}

.space-invite-empty {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.space-invite-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  background: #141414;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
}

.space-invite-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.space-invite-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-invite-user-id {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-invite-action {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.space-invite-action:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

.space-invite-action:disabled {
  opacity: 0.65;
  cursor: default;
  color: var(--text-muted);
}

.nav-requests-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 4px;
  margin-left: 0.35rem;
  background: #ff5252;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
}

.nav-requests-badge[hidden],
.friend-requests-badge[hidden] {
  display: none;
}

.friend-search-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.45rem 0.35rem 0.25rem;
}

.friend-search-group-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.35rem 0.25rem;
}

.group-requests-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.group-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.55rem;
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  background: #141414;
}

.group-request-info {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.group-request-name {
  font-size: 0.92rem;
  font-weight: 600;
}

.group-request-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.group-request-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.group-request-accept,
.group-request-reject {
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2rem;
  touch-action: manipulation;
  pointer-events: auto;
  border: 1px solid var(--border-grey);
  background: #1a1a1a;
  color: var(--text-color);
}

.group-request-accept {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.group-request-accept:hover {
  background: var(--accent-cyan-dim);
}

.group-request-reject:hover {
  border-color: #ff5252;
  color: #ff5252;
}

.group-requests-empty {
  margin: 0;
}

.community-feedback-desc {
  margin-bottom: 1rem;
}

.community-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.community-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  background: #141414;
  color: var(--text-color);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  min-height: 44px;
}

a.community-link:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.06);
  color: var(--accent-cyan);
}

.community-link-soon {
  opacity: 0.55;
  cursor: not-allowed;
}

.community-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 6px;
  background: var(--surface-raised);
}

.community-icon-facebook {
  color: #1877f2;
}

.community-icon-youtube {
  color: #ff0000;
}

.community-icon-x {
  color: var(--text-color);
}

.community-link-label {
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 500;
}

.coming-soon-badge {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.space-toggle-row {
  display: flex;
  gap: 0.35rem;
}

.space-toggle-btn {
  flex: 1;
  padding: 0.42rem 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 0.8rem;
  cursor: pointer;
  min-width: auto;
  min-height: 2.1rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.space-toggle-btn:hover {
  border-color: rgba(0, 229, 255, 0.4);
  color: var(--accent-cyan);
}

.space-toggle-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  font-weight: 600;
}

.spaces-scroll-btn {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 50%;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.spaces-scroll-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.spaces-scroll-btn[hidden] {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.nav-action-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-color);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color 0.15s, color 0.15s;
  min-width: auto;
}

.nav-action-btn:hover,
.nav-action-btn.nav-active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

#btn-logout {
  background: none;
  border: 1px solid var(--border-grey);
  color: var(--text-color);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color 0.15s, color 0.15s;
  min-width: auto;
}

#btn-logout:hover {
  border-color: #ff5252;
  color: #ff5252;
}

/* Legacy nav links (feeds view etc.) */
.nav-link {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-color);
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}

.nav-link.nav-active {
  color: var(--accent-cyan);
  border-bottom: 2px solid var(--accent-cyan);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Layout — Main App Shell
   -------------------------------------------------------------------------- */
#app-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: var(--footer-height);
}



/* --------------------------------------------------------------------------
   Layout — Feeds View (sidebar + feed-area)
   -------------------------------------------------------------------------- */


#view-feeds {
  display: none;
  flex-direction: column;
  height: 100%;
  position: relative;
}

#view-feeds.primary-view {
  /* When shown, display is set to flex by JS or override below */
}

/* --------------------------------------------------------------------------
   Layout — Feeds filter bar (horizontal, top — matches VPFB vidplaza_feeds art)
   -------------------------------------------------------------------------- */
#sidebar {
  width: 100%;
  min-width: 0;
  background: rgba(6, 10, 16, 0.96);
  border-right: none;
  border-bottom: 1px solid var(--border-grey, #334155);
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
}

.sidebar-heading {
  margin: 0 0.35rem 0 0;
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-feeds-hint {
  display: none; /* bar stays compact; rules live in empty-state copy */
}

#sidebar label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.82rem;
  color: #e2e8f0;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  font-size: 0.95rem;
  user-select: none;
}

#sidebar input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-cyan);
}

/* --------------------------------------------------------------------------
   Layout — Main Content Area
   -------------------------------------------------------------------------- */
#main-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0.75rem 0.75rem 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Views — toggled by NavigationModule (only one visible at a time)
   -------------------------------------------------------------------------- */
.primary-view {
  display: none;
}

#view-settings,
#view-uploads {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Landing Page
   -------------------------------------------------------------------------- */
.landing-page {
  --landing-bg: #000000;
  --landing-card: #1e293b;
  --landing-border: #334155;
  --landing-text: #f8fafc;
  --landing-muted: #94a3b8;
  --landing-accent: #67e8f9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--footer-height));
  min-height: calc(100dvh - var(--footer-height));
  padding: max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: var(--landing-bg);
}

.landing-page[hidden] {
  display: none !important;
}

/* Customer readiness map — status cycle + full page (8080) */
.home-hub-readiness-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.home-hub-readiness-open-page {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(103, 232, 249, 0.4);
  background: rgba(8, 47, 73, 0.55);
  color: #67e8f9;
  cursor: pointer;
}

.home-hub-readiness-open-page--primary {
  display: inline-flex;
  margin-top: 0.65rem;
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.85);
}

.home-hub-card--readiness-compact .vp-skeleton-home-list {
  display: none !important;
}

.home-hub-card--readiness-compact .vp-skeleton-home-map-body {
  padding-bottom: 0.5rem;
  gap: 0.35rem;
}

/* Same solid card treatment as VidMaster Visibility — readable over stage wallpaper */
.home-hub-card--readiness-map,
.home-hub-card.home-hub-card--readiness-map {
  background: var(--surface-raised, #14161c) !important;
  background-color: #12141a !important;
  border: 1px solid rgba(148, 163, 184, 0.28);
  max-width: 100%;
  box-sizing: border-box;
}

.home-hub-card--readiness-map .vp-skeleton-home-readiness-headline {
  font-size: 0.82rem;
}

.home-hub-card--readiness-map .vp-skeleton-home-readiness-detail,
.home-hub-card--readiness-map .vp-skeleton-home-readiness-counts,
.home-hub-card--readiness-map .vp-skeleton-home-footer {
  font-size: 0.74rem;
}

.home-hub-card--readiness-map .home-hub-readiness-open-page--primary {
  width: 100%;
  justify-content: center;
  margin-top: 0.45rem;
  box-sizing: border-box;
}

.vp-skeleton-home-item {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.vp-skeleton-home-item .vp-skeleton-home-jump {
  flex: 1;
  min-width: 0;
}

.vp-skeleton-home-status-btn {
  flex: 0 0 auto;
  align-self: center;
  min-width: 6.5rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.vp-skeleton-home-status-btn--red {
  background: rgba(127, 29, 29, 0.45);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

.vp-skeleton-home-status-btn--yellow {
  background: rgba(113, 63, 18, 0.45);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
}

.vp-skeleton-home-status-btn--green {
  background: rgba(6, 78, 59, 0.45);
  border-color: rgba(52, 211, 153, 0.5);
  color: #a7f3d0;
}

/* Full map page — solid panels so stage wallpaper does not wash out status */
.readiness-map-view {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  box-sizing: border-box;
  min-height: 70vh;
  background: #0a0b0e;
}

.readiness-map-page-header {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #12141a;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.readiness-map-page-title {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  color: #f8fafc;
}

.readiness-map-page-sub {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.readiness-map-page-summary {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  margin-bottom: 1rem;
  background: #12141a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.readiness-map-page-summary--blocked {
  border-color: rgba(248, 113, 113, 0.55);
  background: #1a1012;
}

.readiness-map-page-summary--caution {
  border-color: rgba(251, 191, 36, 0.5);
  background: #1a160e;
}

.readiness-map-page-summary--ready {
  border-color: rgba(52, 211, 153, 0.45);
  background: #0e1814;
}

.readiness-map-page-headline {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #f8fafc;
}

.readiness-map-page-detail,
.readiness-map-page-counts,
.readiness-map-page-hint {
  margin: 0.25rem 0;
  font-size: 0.88rem;
  color: #cbd5e1;
}

.readiness-map-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.readiness-map-page-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.readiness-map-page-item {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #14161c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.readiness-map-page-item--red {
  border-color: rgba(248, 113, 113, 0.45);
  background: #1a1214;
}

.readiness-map-page-item--yellow {
  border-color: rgba(251, 191, 36, 0.4);
  background: #1a1710;
}

.readiness-map-page-item--green {
  border-color: rgba(52, 211, 153, 0.4);
  background: #101816;
}

.readiness-map-page-jump {
  flex: 1;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.25rem;
}

.readiness-map-page-jump-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: #94a3b8;
}

.readiness-map-page-jump-copy strong {
  color: #f8fafc;
  font-size: 0.92rem;
}

.readiness-map-changelog {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #12141a;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.readiness-map-changelog-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #f8fafc;
}

.readiness-map-changelog-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.45;
}

/* Header VidMarket + ⋮ — same pattern as Square pill + space-menu-btn (no double box on ⋮) */
.nav-vidmarket-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-right: 0.45rem;
  border: none;
  background: transparent;
  overflow: visible;
}

.nav-vidmarket-wrap .nav-vidmarket {
  margin: 0;
}

.nav-vidmarket-menu {
  margin-left: -0.45rem;
  padding: 0.35rem 0.2rem;
  min-width: 1.75rem;
  min-height: 44px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.22em;
  line-height: 1;
  cursor: pointer;
}

.nav-vidmarket-menu:hover,
.nav-vidmarket-menu:focus-visible,
.nav-vidmarket-menu[aria-expanded="true"] {
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.1);
  border: none;
  outline: none;
}

.my-feeds-uploads-block {
  margin: 0.65rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #12141a;
}

.my-feeds-uploads-block .settings-panel-subtitle {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: #f8fafc;
}

.my-feeds-upload-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.65rem;
}

/* Single Upload Video card — fit panel width, not full stretch */
.my-feeds-upload-cards--single {
  grid-template-columns: minmax(12rem, 18rem);
  max-width: 18rem;
}

.my-feeds-upload-card {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #0e1016;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-sizing: border-box;
  max-width: 100%;
}

.my-feeds-upload-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
}

.my-feeds-upload-card-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #94a3b8;
}

.my-feeds-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.my-feeds-file-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: fit-content;
}

.my-feeds-embed-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #0a0b0e;
  color: #f8fafc;
}

.my-feeds-upload-error {
  margin: 0;
  font-size: 0.78rem;
  color: #fca5a5;
  min-height: 1.1em;
}

.settings-panel-bullets {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.2rem;
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
  line-height: 1.45;
}

.settings-panel-bullets li {
  margin-bottom: 0.25rem;
}

/* Instant first paint — inline bootstrap sets data-vp-auth before app JS loads */
html[data-vp-auth='0'] #landing-page {
  display: flex;
}

html[data-vp-auth='0'] #main-app {
  display: none !important;
}

/* Google OAuth return: same shell as landing, but “Signing you in” — not Welcome CTAs */
html[data-vp-auth='signing'] #landing-page {
  display: flex;
}

html[data-vp-auth='signing'] #main-app {
  display: none !important;
}

html[data-vp-auth='signing'] #landing-welcome-panel {
  display: none !important;
}

html[data-vp-auth='signing'] #landing-google-signin {
  display: flex !important;
}

html[data-vp-auth='signing'] #app-footer {
  display: none !important;
}

html[data-vp-auth='1'] #landing-page {
  display: none !important;
}

html[data-vp-auth='1'] #main-app {
  display: flex !important;
  flex-direction: column;
  min-height: 100dvh;
}

.landing-google-signin {
  display: none;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.landing-google-signin-card {
  width: 100%;
  text-align: center;
  padding: 1.75rem 1.25rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(103, 232, 249, 0.28);
  background: rgba(30, 41, 59, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.landing-google-signin-spinner {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: #67e8f9;
  animation: landing-google-spin 0.75s linear infinite;
}

@keyframes landing-google-spin {
  to { transform: rotate(360deg); }
}

.landing-google-signin-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: #f8fafc;
}

.landing-google-signin-status {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #e2e8f0;
}

.landing-google-signin-hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #94a3b8;
}

.landing-google-signin.is-error .landing-google-signin-spinner {
  display: none;
}

.landing-google-signin.is-error .landing-google-signin-status {
  color: #fecaca;
}

html[data-vp-auth='1'] #main-app.app-booting {
  visibility: visible;
}

html[data-vp-auth='1'] #main-app.app-booting #view-home {
  opacity: 0.92;
}

.app-boot-status {
  display: none;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.35rem 0.75rem 0.75rem;
}

html[data-vp-auth='1'] #main-app.app-booting .app-boot-status {
  display: block;
}

.landing-inner {
  width: 100%;
  max-width: 40rem;
  text-align: center;
  padding: 1.5rem 1rem 2.5rem;
  box-sizing: border-box;
}

/* Conversion-first welcome: title + CTAs only (no essay card). */
.landing-inner--compact {
  max-width: 26rem;
  padding: 2rem 1rem 2.75rem;
}

/* One VidPlaza only — cyan wordmark inside the welcome title (no separate brand line). */
.landing-title {
  font-size: clamp(1.85rem, 5vw, 2.5rem);
  font-weight: 600;
  color: var(--landing-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

.landing-title-accent {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--landing-accent, var(--accent-cyan, #00e5ff));
  text-shadow: 0 0 24px rgba(0, 229, 255, 0.28);
}

.landing-tagline {
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  line-height: 1.55;
  color: var(--landing-muted);
  max-width: 26rem;
  margin: 0 auto 2rem;
}

.landing-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 18rem;
  margin: 0 auto;
}

/* Products Add-on: Remove VidAdsense sleep (grey, no yellow callouts) */
.live-addons-check--sleep {
  opacity: 0.55;
  cursor: not-allowed;
}
.live-addons-sleep-hint {
  display: none !important;
}
/* Remove VidAdsense product card — quiet grey, no yellow highlight */
.settings-panel-remove-ads .settings-save-highlight {
  background: rgba(51, 65, 85, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  color: #94a3b8;
}
.settings-panel-remove-ads .settings-save-price,
.settings-panel-remove-ads .settings-save-note {
  color: #94a3b8;
}
.settings-panel-remove-ads .settings-panel-btn {
  opacity: 0.72;
  filter: grayscale(0.25);
}
.settings-panel-remove-ads #remove-adsense-status {
  color: #94a3b8;
}

/* Activity Hub — centered pills (activity_analyze) + sub-pages */
.feeds-hub-view {
  padding: 1rem 1.1rem 2.75rem;
  max-width: 64rem;
  margin: 0 auto;
  box-sizing: border-box;
}
.feeds-hub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.1rem;
}
/* Readable title card over bright wallpapers */
.feeds-hub-header-card {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(8, 12, 18, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.feeds-hub-header-copy {
  min-width: 0;
  flex: 1 1 12rem;
}
.feeds-hub-back {
  appearance: none;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent-cyan, #00e5ff);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.feeds-hub-title {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.feeds-hub-sub {
  margin: 0;
  font-size: 0.9rem;
  color: #cbd5e1;
  max-width: 40rem;
  line-height: 1.45;
}

/* Landing: centered cyan pill buttons (2-row mock) */
.activity-hub-landing {
  display: flex;
  justify-content: center;
  padding: 1.25rem 0.5rem 2rem;
}
.activity-hub-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem 1rem;
  width: 100%;
  max-width: 36rem;
}
.activity-hub-pills-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 0.75rem;
  width: 100%;
}
.activity-hub-pill {
  appearance: none;
  min-height: 2.55rem;
  padding: 0.5rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 229, 255, 0.65);
  background: rgba(6, 14, 24, 0.88);
  color: #67e8f9;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.activity-hub-pill:hover,
.activity-hub-pill:focus-visible {
  background: rgba(0, 229, 255, 0.12);
  border-color: #22d3ee;
  color: #ecfeff;
  outline: none;
  transform: translateY(-1px);
}
.activity-hub-pill--secondary {
  border-color: rgba(148, 163, 184, 0.45);
  color: #cbd5e1;
}
.activity-hub-pill[hidden] {
  display: none !important;
}

/* Sub-pages: Groups-Friends stack · Analyze cards */
.activity-hub-subpage {
  margin-top: 0.35rem;
}
.activity-hub-subpage[hidden] {
  display: none !important;
}
.activity-hub-subpage-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.activity-hub-page-card {
  width: 100%;
}
.activity-hub-empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: #94a3b8;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  border-radius: 12px;
}

.activity-hub-analyze-intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #cbd5e1;
  max-width: 40rem;
}
.activity-hub-analyze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.activity-hub-analyze-card {
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  background: rgba(8, 14, 22, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.activity-hub-analyze-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #67e8f9;
}
.activity-hub-analyze-card-desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #94a3b8;
}
.activity-hub-analyze-card-status {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: #7dd3fc;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.activity-hub-analyze-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Legacy stack helpers (if any leftover markup) */
.feeds-hub-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.activity-hub-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-height: min(52vh, 28rem);
}
.activity-hub-reorder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.3rem;
  padding-top: 0.65rem;
  flex: 0 0 auto;
}
.activity-hub-arrow {
  appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(8, 12, 18, 0.92);
  color: #67e8f9;
  font-size: 0.78rem;
  cursor: pointer;
  line-height: 1;
}
.activity-hub-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.activity-hub-arrow:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.14);
}
.activity-hub-row-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.activity-hub-card {
  min-height: min(48vh, 26rem);
  max-height: min(58vh, 32rem);
  display: flex;
  flex-direction: column;
  font-size: 1.02rem;
}
.activity-hub-card .home-hub-card-title {
  font-size: 1.15rem;
}
.activity-hub-card .home-hub-card-body,
.activity-hub-card-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
  padding-bottom: 0.75rem;
}
.home-hub-empty--coming-soon {
  font-size: 0.95rem;
  color: #fde68a;
}
.home-hub-card-body--hub-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}
/* Home Activity Hub card — centered pills (activity_analyze mock) */
.home-hub-card--activity-hub {
  min-height: 10.5rem;
}
.home-hub-card-header--activity {
  margin-bottom: 0.35rem;
}
.home-hub-card-body--activity-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  padding: 0.35rem 0.5rem 0.85rem;
  box-sizing: border-box;
}
.activity-hub-home-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}
.activity-hub-home-pills-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
  width: 100%;
}
.activity-hub-home-pill {
  appearance: none;
  min-height: 2.35rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 229, 255, 0.65);
  background: rgba(6, 14, 24, 0.92);
  color: #67e8f9;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.activity-hub-home-pill:hover,
.activity-hub-home-pill:focus-visible {
  background: rgba(0, 229, 255, 0.14);
  border-color: #22d3ee;
  color: #ecfeff;
  outline: none;
  transform: translateY(-1px);
}
.activity-hub-home-pill[hidden] {
  display: none !important;
}

/* Groups · Friends · Followers + Analyze destination pages */
.feeds-hub-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: flex-start;
}

/* Same card size as Analyze: 1000 × 600 */
.activity-hub-page-card,
.feeds-hub-stack > .home-hub-card,
.feeds-hub-stack > .activity-hub-card,
.feeds-hub-stack > .activity-hub-page-card,
.feeds-hub-stack > .home-hub-card.activity-hub-card {
  width: 1000px;
  max-width: 100%;
  height: 600px;
  max-height: 600px;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.2rem 1.15rem;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 12px;
  background: rgba(8, 12, 18, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

.feeds-hub-stack > .activity-hub-card .home-hub-card-title,
.feeds-hub-stack > .activity-hub-page-card .home-hub-card-title {
  font-size: 1.08rem;
}

.feeds-hub-stack > .activity-hub-card .home-hub-card-body,
.feeds-hub-stack > .activity-hub-page-card .home-hub-card-body,
.feeds-hub-stack > .home-hub-card .home-hub-card-body {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Empty state fills remaining card height so short lists still look large */
.feeds-hub-stack .home-hub-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 6rem;
  font-size: 0.95rem;
}

.activity-hub-empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: #94a3b8;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  border-radius: 12px;
}

/* Analyze scope cards — same 1000 × 600 as Groups · Friends · Followers */
.activity-hub-analyze-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
}

.home-hub-card--analyze-scope {
  width: 1000px;
  max-width: 100%;
  height: 600px;
  max-height: 600px;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.2rem 1.15rem;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 12px;
  background: rgba(8, 14, 22, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.home-hub-card--analyze-scope .home-hub-card-title {
  color: #67e8f9;
  font-size: 1.08rem;
}

.home-hub-card--analyze-scope .home-hub-card-body {
  flex: 1 1 auto;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0.35rem;
}

.home-hub-card--analyze-scope .home-hub-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 6rem;
}

/* —— Analyze · My Feeds dashboard (mock analyze_card) —— */
.analyze-myfeeds-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.analyze-myfeeds {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.analyze-myfeeds-toolbar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.analyze-search-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: min(22rem, 100%);
  padding: 0.2rem 0.3rem 0.2rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(2, 12, 22, 0.92);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.12), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.analyze-filter-btn,
.analyze-search-go {
  appearance: none;
  border: none;
  background: transparent;
  color: #67e8f9;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.analyze-filter-btn:hover,
.analyze-search-go:hover {
  background: rgba(34, 211, 238, 0.12);
}
.analyze-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.15rem;
}
.analyze-search-input::placeholder {
  color: #64748b;
}
.analyze-insight-icon {
  display: block;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55));
}
.analyze-search-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 12rem;
  overflow-y: auto;
  border-radius: 0.65rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(8, 14, 22, 0.98);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  padding: 0.25rem;
}
.analyze-search-hit {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  border: none;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.45rem;
  cursor: pointer;
}
.analyze-search-hit:hover {
  background: rgba(34, 211, 238, 0.12);
}
.analyze-search-hit-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analyze-search-hit-action {
  flex: 0 0 auto;
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 700;
}
.analyze-search-empty {
  padding: 0.55rem 0.6rem;
  color: #94a3b8;
  font-size: 0.8rem;
}
.analyze-chart-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.analyze-chart-type-btn {
  appearance: none;
  border: 1px solid rgba(100, 116, 139, 0.45);
  background: rgba(15, 23, 42, 0.75);
  color: #cbd5e1;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}
.analyze-chart-type-btn.is-active,
.analyze-chart-type-btn:hover {
  border-color: rgba(34, 211, 238, 0.55);
  color: #ecfeff;
  background: rgba(14, 165, 233, 0.15);
}
.analyze-chart-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-radius: 0.65rem;
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: rgba(2, 8, 16, 0.55);
  padding: 0.55rem 0.65rem;
}
.analyze-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}
.analyze-active-title {
  color: #f8fafc;
  font-size: 0.92rem;
}
.analyze-active-meta {
  color: #64748b;
  font-size: 0.72rem;
}
.analyze-chart-body {
  min-height: 9rem;
}
.analyze-bars,
.analyze-spark {
  width: 100%;
  max-height: 12rem;
  display: block;
}
.analyze-donut-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.analyze-donut {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 42%, #000 43%);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.analyze-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: #cbd5e1;
  display: grid;
  gap: 0.25rem;
}
.analyze-donut-legend strong {
  color: #f8fafc;
  margin-left: 0.25rem;
}
.analyze-swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.analyze-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.analyze-kpi-cell {
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--kpi-accent, #38bdf8) 45%, transparent);
  background: rgba(15, 23, 42, 0.65);
  padding: 0.55rem 0.45rem;
  text-align: center;
}
.analyze-kpi-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--kpi-accent, #67e8f9);
  line-height: 1.1;
}
.analyze-kpi-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 650;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.analyze-metric-hints {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #64748b;
}
.analyze-tabs-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(51, 65, 85, 0.55);
}
.analyze-tabs-scroller {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.analyze-tabs-scroller::-webkit-scrollbar {
  display: none;
}
.analyze-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.1rem;
}
.analyze-tab {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 9.5rem;
  padding: 0.28rem 0.45rem 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, 0.5);
  background: rgba(15, 23, 42, 0.85);
  color: #cbd5e1;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.analyze-tab.is-active {
  border-color: rgba(34, 211, 238, 0.65);
  color: #ecfeff;
  background: rgba(14, 165, 233, 0.18);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15);
}
.analyze-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7rem;
}
.analyze-tab-close {
  opacity: 0.65;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.1rem;
}
.analyze-tab-close:hover {
  opacity: 1;
  color: #fca5a5;
}
.analyze-tabs-add,
.analyze-tabs-arrow {
  appearance: none;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(8, 14, 22, 0.95);
  color: #67e8f9;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.analyze-tabs-add:hover,
.analyze-tabs-arrow:hover:not(:disabled) {
  background: rgba(14, 165, 233, 0.15);
}
.analyze-tabs-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.analyze-tabs-empty {
  font-size: 0.75rem;
  color: #64748b;
  padding: 0.25rem 0.15rem;
}

.activity-hub-analyze-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Followers hub card */
.home-hub-followers-hint {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #94a3b8;
}
.home-hub-followers-count {
  font-weight: 600;
  color: #67e8f9;
  font-size: 0.85em;
}
.home-hub-followers-row {
  align-items: center;
  gap: 0.45rem;
}
.home-hub-followers-action {
  appearance: none;
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.home-hub-followers-action--follow {
  border-color: rgba(0, 229, 255, 0.5);
  color: #67e8f9;
}
.home-hub-followers-action:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.12);
  border-color: #22d3ee;
}
.home-hub-followers-action:disabled {
  opacity: 0.5;
  cursor: wait;
}
.home-hub-analyze-metric {
  margin: 0;
  font-size: 0.95rem;
  color: #e2e8f0;
  line-height: 1.45;
}
.home-hub-analyze-metric strong {
  color: #67e8f9;
  font-size: 1.15rem;
}

@media (max-width: 640px) {
  .feeds-hub-stack > .activity-hub-card,
  .feeds-hub-stack > .activity-hub-page-card,
  .feeds-hub-stack > .home-hub-card.activity-hub-card,
  .feeds-hub-stack > .home-hub-card,
  .home-hub-card--analyze-scope {
    width: 100%;
    height: min(600px, 70vh);
    max-height: min(600px, 70vh);
  }
}
/* Legacy hub action rows (if any remain) */
.home-hub-card-body--hub-actions {
  align-items: center;
}
.home-hub-hub-btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
}
.home-hub-news-list--scroll {
  max-height: calc(5 * 5.4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.15rem;
}
.home-hub-news-item {
  cursor: pointer;
}
.home-hub-news-item--has-video {
  border-left: 3px solid rgba(56, 189, 248, 0.65);
  padding-left: 0.55rem;
}
.home-hub-news-item-video-badge {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #7dd3fc;
}
.home-hub-compose-file {
  display: block;
  width: 100%;
  margin: 0.35rem 0 0.5rem;
  font-size: 0.82rem;
  color: #cbd5e1;
}
.home-hub-compose-video-preview {
  display: block;
  width: 100%;
  max-height: 12rem;
  margin: 0.35rem 0 0.5rem;
  border-radius: 0.5rem;
  background: #0b1220;
}
.home-hub-compose-label--file {
  margin-top: 0.45rem;
}
.home-hub-announce-popup {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.home-hub-announce-popup[hidden] {
  display: none !important;
}
.home-hub-announce-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.72);
}
.home-hub-announce-popup-card {
  position: relative;
  z-index: 1;
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 40rem);
  overflow: auto;
  border-radius: 0.85rem;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(8, 12, 18, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 1rem 1.1rem 1.15rem;
}
.home-hub-announce-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.home-hub-announce-popup-title {
  margin: 0;
  font-size: 1.15rem;
  color: #e0f2fe;
}
.home-hub-announce-popup-close {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
}
.home-hub-announce-popup-video {
  width: 100%;
  max-height: 18rem;
  border-radius: 0.55rem;
  background: #000;
  margin-bottom: 0.65rem;
}
.home-hub-announce-popup-text {
  margin: 0 0 0.5rem;
  color: #e2e8f0;
  white-space: pre-wrap;
  line-height: 1.45;
}
.home-hub-announce-popup-meta {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
}
.home-hub-all-users-body,
.home-hub-all-users-list {
  max-height: 18rem;
  overflow-y: auto;
}
.home-hub-group-observe-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}
/* Merged Announcements (top-left): list + compose in one card */
.home-hub-card--announcements-merged .home-hub-news-list--scroll {
  max-height: calc(5 * 5.2rem);
}
/* Screen share above wallpaper, BELOW people freeform tiles (host must stay visible).
 * People freeform use inline z-index 30–50; share stays ~10–20 so PiPs win. */
.main-stage-slot--sharescreen,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] {
  z-index: 15 !important;
  isolation: isolate;
  overflow: hidden !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  /* Stay inside stage — freeform % can still paint a hair past without this */
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}
/* Explicit people freeform above share (covers designs that overlap the share box) */
#main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]),
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) {
  z-index: 30 !important;
}
/* No VPL brand / name tags on sharescreen (local + Live composite) */
.main-stage-slot--sharescreen .vp-tile-badge-stack,
.main-stage-slot--sharescreen .vp-brand-chip,
.main-stage-slot--sharescreen .frame-label,
.main-stage-slot--sharescreen .stage-name-badge,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .vp-tile-badge-stack,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .vp-brand-chip,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .frame-label,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .stage-name-badge {
  display: none !important;
}
/*
 * Sharescreen frame = full freeform design box (often full stage corners).
 * Must beat freeform Standard square / Signing 16:9 rules that force people
 * frame-media to cqw/cqh — those were shrinking the share “frame” on VPL and Mux.
 */
.main-stage-slot--sharescreen .frame-media.polygon-frame,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="standard"] .stage-body--freeform .main-stage-slot--sharescreen .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="signing"] .stage-body--freeform .main-stage-slot--sharescreen .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="standard"] #main-stage-grid.stage-grid--freeform .main-stage-slot--sharescreen .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="signing"] #main-stage-grid.stage-grid--freeform .main-stage-slot--sharescreen .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="standard"] .stage-body--freeform .main-stage-slot[data-participant-id="sharescreen"] .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="signing"] .stage-body--freeform .main-stage-slot[data-participant-id="sharescreen"] .frame-media.polygon-frame {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  flex: none !important;
}
/*
 * Sharescreen picture: always fill its tile the same way at any size
 * (small / large / full stage) — contain so full shared tab stays readable
 * (default_sharescreen look). Never square-crop like Standard people tiles.
 */
/*
 * Sharescreen video: ALWAYS contain (full shared tab in frame) — never cover/crop.
 * Must beat freeform Fill-frame cover rules (body.vp-video-frame-fit-fill + stage-slot--freeform).
 * Mux already paints contain; VPL stage must match (vpl_stage was zoomed, vpl_mux fitted).
 */
.main-stage-slot--sharescreen .stage-sharescreen-video,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .stage-sharescreen-video,
.main-stage-slot--sharescreen .frame-media > video,
#main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .frame-media > video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot--sharescreen .frame-media > video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .frame-media > video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform.main-stage-slot--sharescreen .frame-media > video,
body.vp-video-frame-fit-fill .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot--sharescreen .frame-media > video,
body.vp-video-frame-fit-fill .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .frame-media > video,
body.vp-video-frame-fit-fill .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform.main-stage-slot--sharescreen .frame-media > video,
body.vp-video-frame-fit-fill #main-stage-grid.stage-grid--freeform .main-stage-slot--sharescreen .frame-media > video,
body.vp-video-frame-fit-fit .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot--sharescreen .frame-media > video {
  object-fit: contain !important;
  object-position: center center !important;
  background: #0a0e14 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
}
/* Grid-pack share-only / share cell: fill the cell completely */
#main-stage-grid.stage-grid--freeform-pack .main-stage-slot--sharescreen,
#main-stage-grid.stage-grid--freeform-pack .main-stage-slot[data-participant-id="sharescreen"] {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
/* Freeform grid clips anything that would stick out the right edge */
#main-stage-grid.stage-grid--freeform,
.stage-frame-body.stage-body--freeform #main-stage-grid {
  overflow: hidden !important;
}
/* Grid itself above wallpaper wash (::before z-index 0) */
.stage-frame-body.stage-has-wallpaper > #main-stage-grid,
.stage-frame-body.stage-body--freeform > #main-stage-grid {
  z-index: 2 !important;
}
.home-hub-compose-btn--secondary {
  background: transparent;
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: #67e8f9;
}
/* My Feeds: side-by-side public shelf + video replies toggles */
#past-feeds-settings-panel .my-feeds-public-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem 0.75rem;
  max-width: 100%;
  margin: 0.35rem 0 0.15rem;
}
#past-feeds-settings-panel .my-feeds-public-prefs .settings-toggle-row--compact {
  flex: 1 1 12.5rem;
  max-width: 17.5rem;
  min-width: 11.5rem;
  width: auto;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  box-sizing: border-box;
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 10px;
  background: rgba(8, 25, 40, 0.45);
}
#past-feeds-settings-panel .my-feeds-public-prefs .settings-toggle-label {
  max-width: 11rem;
  line-height: 1.3;
  font-size: 0.82rem;
}
#past-feeds-settings-panel .my-feeds-public-prefs + .settings-toggle-hint {
  max-width: 36rem;
  font-size: 0.78rem;
}

/* Guide legal links — light cyan (readable on dark settings) */
.settings-guide-link,
.settings-panel-desc a.settings-guide-link {
  color: #7dd3fc !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-guide-link:hover {
  color: #bae6fd !important;
}

/* Guide card — one button per top-bar control */
.guide-hint-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}
.guide-target-btn {
  margin: 0 !important;
  min-height: 2.4rem !important;
  min-width: auto !important;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.8rem !important;
}

/* Interface hint popover (from Guide buttons) */
.nav-coach-hint,
.guide-hint-tooltip.nav-coach-hint {
  position: fixed;
  z-index: 100500;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.65rem 0.8rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(125, 211, 252, 0.55);
  background: rgba(8, 12, 18, 0.97);
  color: #e0f2fe;
  font-size: 0.84rem;
  line-height: 1.4;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  pointer-events: auto;
}
.nav-coach-hint[hidden],
.guide-hint-tooltip.nav-coach-hint[hidden] {
  display: none !important;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.8rem 1.25rem;
  border-radius: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.landing-btn-primary {
  background: var(--landing-accent);
  color: #0f172a;
  border: 1px solid var(--landing-accent);
}

.landing-btn-primary:hover {
  background: #22d3ee;
  border-color: #22d3ee;
}

.landing-btn-secondary {
  background: transparent;
  color: var(--landing-text);
  border: 1px solid var(--landing-border);
}

.landing-btn-secondary:hover {
  border-color: var(--landing-accent);
  color: var(--landing-accent);
}

@media (min-width: 480px) {
  .landing-actions {
    flex-direction: row;
    max-width: 24rem;
  }

  .landing-btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Auth View
   -------------------------------------------------------------------------- */
#view-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--footer-height));
  background: #000000;
}

.auth-container {
  background: var(--modal-bg);
  border: 1px solid var(--border-grey);
  border-radius: 10px;
  padding: 36px 40px;
  width: 100%;
  max-width: 420px;
}

.welcome-title {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
  font-weight: 600;
}

.welcome-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.auth-entry-links {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.auth-entry-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  min-height: 44px;
}

.auth-entry-primary {
  background: var(--accent-cyan);
  color: #000;
}

.auth-entry-primary:hover {
  opacity: 0.9;
}

.auth-entry-secondary {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-grey);
}

.auth-entry-secondary:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.welcome-divider-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.auth-tab-btn {
  flex: 1;
  padding: 8px;
  background: none;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s, color 0.15s;
}

.auth-tab-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-form input[type="text"],
.auth-form input[type="url"] {
  width: 100%;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.95rem;
  transition: border-color 0.15s;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.error-msg {
  color: #ff5252;
  font-size: 0.82rem;
  display: none;
}

.error-msg.visible {
  display: block;
}

.auth-form button[type="submit"] {
  padding: 11px;
  background: var(--accent-cyan);
  border: none;
  border-radius: 4px;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.auth-form button[type="submit"]:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Polygon Frames
   -------------------------------------------------------------------------- */
.polygon-frame {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.shape-hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.shape-square   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.shape-circle   { clip-path: circle(50% at 50% 50%); }
.shape-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
/* --------------------------------------------------------------------------
   Video Call Screen — Live session layout
   -------------------------------------------------------------------------- */
.video-call-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding-bottom: 0;
  width: 100%;
  overflow: hidden;
}

.video-call-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0;
  box-sizing: border-box;
}

.current-space-bar {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0.15rem 0 0.1rem;
}

.current-space-bar:not(:has(.current-space-label:not([hidden]))):not(:has(#stage-controls:not([hidden]))) {
  display: none;
}

.current-space-bar:has(#stage-controls:not([hidden])) {
  min-height: 2rem;
  padding-top: 0.2rem;
}

.session-controls-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.current-space-label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-color);
  margin: 0.35rem 0 0;
  text-align: center;
}

.current-space-label[hidden] {
  display: none !important;
}

.current-space-actions,
.session-controls-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.session-controls-row > * {
  flex: 0 0 auto;
}

.session-controls-extra[hidden] {
  display: none !important;
}

.call-control-btn--header {
  padding: 0.32rem 0.7rem;
  min-width: auto;
  font-size: 0.74rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Mute / Camera / Cog — compact circular icons (override header padding) */
#mute-toggle.call-control-btn--icon,
#camera-toggle.call-control-btn--icon,
#btn-stage-session-cog.call-control-btn--icon,
.call-control-btn--icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 0;
  box-sizing: border-box;
}

.call-control-btn--icon-sm,
#mute-toggle.call-control-btn--icon-sm,
#btn-stage-session-cog.call-control-btn--icon-sm,
#btn-red-flag-strip.call-control-btn--icon-sm {
  width: 1.7rem !important;
  min-width: 1.7rem !important;
  max-width: 1.7rem !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
}

/* Red Flag strip — Square only; same footprint as mic */
#btn-red-flag-strip {
  border-color: rgba(255, 107, 122, 0.55);
  color: #ffb4bc;
  background: rgba(40, 12, 16, 0.55);
  padding: 0;
  flex-shrink: 0;
}

#btn-red-flag-strip:hover {
  border-color: rgba(255, 120, 130, 0.85);
  color: #ffd0d5;
  background: rgba(60, 16, 22, 0.7);
}

#btn-red-flag-strip[hidden] {
  display: none !important;
}

.red-flag-strip-icon {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
}

.red-flag-modal-content {
  width: min(96vw, 26rem);
  max-height: min(88vh, 36rem);
  overflow: auto;
  padding: 1rem 1.1rem 1.1rem;
}

.red-flag-parties {
  display: grid;
  gap: 0.25rem;
  margin: 0.4rem 0 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
}

.red-flag-party {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-color, #f5f7fb);
}

.red-flag-party-label {
  display: inline-block;
  min-width: 3.2rem;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}

.red-flag-modal-context,
.red-flag-modal-hint,
.red-flag-priority-hint,
.red-flag-block-hint {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted, rgba(245, 247, 251, 0.72));
}

.red-flag-priority-hint {
  color: #ffb4bc;
}

.red-flag-reasons {
  border: none;
  margin: 0 0 0.55rem;
  padding: 0;
}

/* 2 columns × 4 rows (radio “dot checks”) — shorter card */
.red-flag-reasons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.45rem;
}

.red-flag-reason {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.3;
  cursor: pointer;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  min-height: 2.15rem;
}

.red-flag-reason:hover {
  background: rgba(255, 107, 122, 0.08);
}

.red-flag-reason input {
  margin-top: 0.12rem;
  flex-shrink: 0;
}

/* VidMaster Red Flag System — Group Management–style nested buckets */
.settings-panel-red-flag-system {
  border-color: rgba(255, 107, 122, 0.28);
}

.red-flag-system-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem 0 0.85rem;
}

.red-flag-system-summary {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin-left: auto;
}

.red-flag-system-buckets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.red-flag-system-bucket {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  padding: 0.65rem 0.75rem 0.75rem;
}

.red-flag-system-bucket--priority {
  border-color: rgba(255, 107, 122, 0.45);
  background: rgba(255, 70, 90, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 107, 122, 0.12);
}

.red-flag-system-bucket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.red-flag-system-bucket-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.red-flag-system-bucket--priority .red-flag-system-bucket-title {
  color: #ffb4bc;
}

.red-flag-system-bucket-count {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-color, #f5f7fb);
}

.red-flag-system-bucket--priority .red-flag-system-bucket-count {
  background: rgba(255, 107, 122, 0.28);
  color: #ffe4e8;
}

.red-flag-system-bucket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.red-flag-system-bucket-empty {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

.red-flag-system-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.45);
}

.red-flag-system-row-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.red-flag-system-row-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.red-flag-system-row-title {
  font-size: 0.86rem;
  font-weight: 600;
}

.red-flag-system-row-status {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.red-flag-system-row-meta,
.red-flag-system-row-note {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-muted, #94a3b8);
}

.red-flag-system-row-handler {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #e2e8f0;
}

.red-flag-system-row-handler--missing {
  color: #fca5a5;
  font-weight: 600;
}

.red-flag-system-handler-label {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
}

.red-flag-system-handler {
  font-size: 0.86rem;
  font-weight: 700;
  color: #67e8f9;
  background: rgba(8, 47, 73, 0.55);
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
}

.red-flag-system-cid {
  margin-left: 0.4rem;
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
}

.red-flag-system-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

.red-flag-person-label {
  display: block;
  margin: 0.55rem 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
  text-align: left;
  width: 100%;
}

.red-flag-person-select {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.25rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
}

.red-flag-person-hint {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted, #94a3b8);
  text-align: left;
  width: 100%;
}

.red-flag-handler-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.25rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(103, 232, 249, 0.45);
  background: rgba(8, 47, 73, 0.35);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
}

.red-flag-handler-input::placeholder {
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}

.vm-feeds-search-row {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(103, 232, 249, 0.28);
  background: rgba(8, 47, 73, 0.22);
}

.vm-feeds-search-row[hidden] {
  display: none !important;
}

.vm-feeds-search-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a5f3fc;
}

.vm-feeds-search-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.vm-feeds-handler-search {
  flex: 1 1 12rem;
  min-width: 10rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: inherit;
  font: inherit;
}

.vm-feeds-archive-row {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.45);
  margin-bottom: 0.4rem;
}

.vm-feeds-archive-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.vm-feeds-archive-meta {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.35;
}

.age-proof-notice-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 14000;
  width: min(28rem, calc(100vw - 1.5rem));
  padding: 0;
  pointer-events: auto;
}

.age-proof-notice-banner[hidden] {
  display: none !important;
}

.age-proof-notice-inner {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(12, 16, 24, 0.97);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.age-proof-notice-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fcd34d;
}

.age-proof-notice-body,
.age-proof-notice-foot {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted, #cbd5e1);
}

.age-proof-notice-dismiss {
  margin-top: 0.25rem;
}

/* Toast duration (Getting Started — second column) */
.toast-prefs-shell {
  position: relative;
  overflow: visible;
}

.toast-prefs-shell.is-toast-history-open {
  z-index: 14;
}

.toast-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
}

.toast-history-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.7rem;
}

.toast-prefs-shell.is-toast-history-open .toast-history-toggle-icon,
.toast-history-toggle.is-open .toast-history-toggle-icon {
  transform: rotate(90deg);
}

.toast-duration-fieldset {
  margin: 0.75rem 0 0.35rem;
  padding: 0;
  border: none;
}

.toast-duration-legend {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
}

.toast-duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.toast-duration-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
}

.toast-duration-option--off:has(.toast-duration-input:checked) {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(69, 10, 10, 0.45);
  color: #fecaca;
}

.toast-duration-option:has(.toast-duration-input:checked) {
  border-color: rgba(103, 232, 249, 0.65);
  background: rgba(8, 47, 73, 0.55);
  color: #a5f3fc;
}

.toast-duration-input {
  accent-color: #22d3ee;
}

/* Toast's history — flyout like My Active Products */
.toast-history-popout {
  position: absolute;
  top: 0;
  left: calc(100% + 0.75rem);
  z-index: 16;
  width: min(24rem, 42vw);
  max-height: min(80vh, 36rem);
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.75rem 0.9rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  border: 1px solid rgba(103, 232, 249, 0.32);
  background: var(--settings-panel-bg, rgba(15, 23, 42, 0.97));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateX(-0.75rem);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast-prefs-shell.is-toast-history-open .toast-history-popout:not([hidden]) {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.toast-history-popout[hidden] {
  display: none !important;
}

.toast-history-popout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
}

.toast-history-popout-header .settings-panel-title {
  margin: 0;
  font-size: 1.05rem;
}

.toast-history-popout-close {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--settings-border, rgba(148, 163, 184, 0.28));
  border-radius: 0.4rem;
  background: transparent;
  color: var(--settings-muted, var(--text-muted));
  cursor: pointer;
  line-height: 1;
}

.toast-history-popout-close:hover {
  color: var(--settings-text, var(--text-color));
  border-color: rgba(103, 232, 249, 0.45);
}

.toast-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.35rem 0;
}

.toast-history-item {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(8, 15, 28, 0.65);
  text-align: left;
}

.toast-history-item--error,
.toast-history-item.is-sticky {
  border-color: rgba(251, 191, 36, 0.4);
}

.toast-history-item-message {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--settings-text, #e2e8f0);
  word-break: break-word;
}

.toast-history-item-meta {
  margin: 0.28rem 0 0;
  font-size: 0.72rem;
  color: var(--settings-muted, #94a3b8);
}

.toast-history-empty {
  margin: 0.5rem 0;
  font-size: 0.82rem;
  color: var(--settings-muted, #94a3b8);
}

.toast-history-vault-meta {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.74rem;
  color: var(--settings-muted, #94a3b8);
  flex-shrink: 0;
}

.toast-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.toast-history-actions .settings-panel-btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.55rem;
}

@media (max-width: 900px) {
  .toast-history-popout {
    position: static;
    width: 100%;
    max-height: min(50vh, 22rem);
    margin-top: 0.75rem;
    left: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .toast-prefs-shell.is-toast-history-open .toast-history-popout:not([hidden]) {
    display: flex !important;
  }
}

.red-flag-note-label {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.red-flag-note {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(8, 10, 14, 0.85);
  color: inherit;
  resize: vertical;
  min-height: 2.75rem;
}

.red-flag-note-count {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
}

.red-flag-block-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: inherit;
  color: var(--accent-cyan, #67e8f9);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.red-flag-block-link:hover {
  color: #a5f3fc;
}

.red-flag-modal-status {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--accent-cyan, #00e5ff);
  min-height: 1.1em;
}

.red-flag-modal-status.is-error {
  color: #ffb4bc;
}

@media (max-width: 420px) {
  .red-flag-reasons-grid {
    grid-template-columns: 1fr;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#camera-toggle.call-control-btn--cam-play {
  width: 1.95rem !important;
  min-width: 1.95rem !important;
  max-width: 1.95rem !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
  border-radius: 0.45rem !important;
}

.call-control-btn--icon .call-control-icon {
  display: block;
  width: 1.05rem !important;
  height: 1.05rem !important;
  flex: 0 0 auto;
  color: currentColor;
}

#camera-toggle .call-control-icon--cam-unified {
  width: 1.25rem !important;
  height: 0.92rem !important;
}

/* Legacy global hide removed — name tags are per-person (vault hides only your tile).
   Kept no-op data-attr for any stale localStorage/scripts. */
html[data-vp-name-tags="off"] {
  /* intentionally empty — do not hide everyone's badges */
}

.group-start-live-btn.is-live-disabled,
.group-start-live-btn:disabled.is-live-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.call-control-btn--icon .call-control-icon[hidden] {
  display: none !important;
}

/* Mute: small cyan circle when live; amber when muted */
#mute-toggle[data-state="live"] {
  border-color: rgba(0, 229, 255, 0.45);
  color: #c8f7ff;
  background: rgba(0, 229, 255, 0.08);
}

#mute-toggle[data-state="muted"] {
  border-color: rgba(255, 193, 7, 0.5);
  color: #ffe08a;
  background: rgba(40, 28, 8, 0.55);
}

/* Camera unified: slash only when off; filled when on */
#camera-toggle[data-state="off"] {
  border-color: rgba(0, 229, 255, 0.55);
  color: #00e5ff;
  background: rgba(6, 18, 28, 0.75);
}

#camera-toggle[data-state="on"] {
  border-color: rgba(0, 229, 255, 0.75);
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12);
}

#camera-toggle[data-state="on"] .cam-body {
  fill: currentColor;
  stroke: currentColor;
}

#camera-toggle[data-state="on"] .cam-lens {
  fill: currentColor;
  stroke: currentColor;
}

#camera-toggle[data-state="on"] .cam-play {
  fill: #0a1218;
}

#camera-toggle[data-state="on"] .cam-slash {
  display: none !important;
}

#camera-toggle[data-state="off"] .cam-body,
#camera-toggle[data-state="off"] .cam-lens {
  fill: none;
  stroke: currentColor;
}

#camera-toggle[data-state="off"] .cam-play {
  fill: currentColor;
}

#camera-toggle[data-state="off"] .cam-slash {
  display: block !important;
}

#btn-stage-session-cog {
  color: rgba(200, 230, 240, 0.9);
  border-color: rgba(0, 229, 255, 0.28);
  background: rgba(8, 14, 22, 0.55);
}

#camera-toggle.is-group-camera-locked,
#camera-toggle.is-group-camera-locked:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.hand-waves-toggle--roomy,
.past-feeds-toggle-btn--roomy {
  padding: 0.38rem 0.85rem;
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Audio strip label — tighter pad; label centered in the pill */
.square-audio-toggle--roomy {
  padding: 0.38rem 0.70rem;
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.square-audio-toggle--roomy .square-audio-toggle-label {
  line-height: 1;
  text-align: center;
}

.past-feeds-toggle-btn--roomy {
  max-width: min(14rem, 42vw);
  /* overflow must stay visible so the red ! is not clipped */
  overflow: visible;
}

/* Stage My Feeds / Group's Feeds — red ! when unread video replies (not nav Feeds/Settings) */
.past-feeds-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding-right: 0.7rem;
}

.past-feeds-toggle-btn .past-feeds-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

/* Inline badge (like Hand Waves count) — not absolute, so strip overflow cannot hide it */
.past-feeds-toggle-btn .past-feeds-btn-bang {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.18rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.9), 0 0 10px rgba(239, 68, 68, 0.85);
  pointer-events: none;
  z-index: 2;
  animation: past-feeds-bang-pulse 1.15s ease-in-out infinite;
}

.past-feeds-toggle-btn.has-feeds-notify .past-feeds-btn-bang:not([hidden]),
.past-feeds-toggle-btn .past-feeds-btn-bang:not([hidden]) {
  display: inline-flex;
}

.past-feeds-toggle-btn .past-feeds-btn-bang[hidden] {
  display: none !important;
}

@keyframes past-feeds-bang-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.9), 0 0 8px rgba(239, 68, 68, 0.7); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.95), 0 0 14px rgba(239, 68, 68, 1); }
}

/* Stage session cog — panel uses position:fixed from JS (escapes strip overflow) */
.stage-session-cog-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.stage-session-cog-shell[hidden] {
  display: none !important;
}

.stage-session-cog-btn.is-open,
.stage-session-cog-btn[aria-expanded="true"] {
  border-color: rgba(0, 229, 255, 0.65) !important;
  color: #c8f7ff !important;
  background: rgba(0, 229, 255, 0.12) !important;
}

.stage-session-cog-panel {
  position: fixed;
  z-index: 100400;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: 0.75rem 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(10, 16, 24, 0.98);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 229, 255, 0.1);
}

.stage-session-cog-panel[hidden] {
  display: none !important;
}

.stage-session-cog-header {
  margin-bottom: 0.55rem;
}

.stage-session-cog-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #f4fbff;
}

.stage-session-cog-hint,
.stage-cog-foot-hint {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(200, 214, 222, 0.72);
}

.stage-cog-section {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stage-cog-section-title {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
}

.stage-cog-toggle {
  margin: 0.2rem 0;
  gap: 0.55rem;
}

.stage-cog-toggle.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.stage-cog-toggle.is-locked .settings-toggle-input {
  pointer-events: none;
}

.stage-cog-toggle .settings-toggle-label {
  font-size: 0.78rem;
  line-height: 1.3;
}

.settings-toggle-hint--relocated {
  border-left: 3px solid rgba(0, 229, 255, 0.45);
  padding-left: 0.55rem;
  margin-top: 0.65rem;
}

.session-brand-vidplaza {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-cyan);
  white-space: nowrap;
  padding: 0 0.15rem;
}

.session-brand-vidplaza[hidden] {
  display: none !important;
}

.past-feeds-toggle-btn.is-active {
  border-color: rgba(0, 229, 255, 0.65);
  background: rgba(0, 229, 255, 0.18);
  color: #b8f4ff;
}

.past-feeds-pane {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  max-width: min(100%, 56rem);
  margin: 0 auto;
  padding: 0.35rem 0.75rem 1rem;
  min-height: 12rem;
}

.past-feeds-pane.is-stage-playback-active {
  max-width: min(var(--stage-frame-width-px, 56rem), calc(100vw - 1.5rem));
}

.past-feeds-pane.is-stage-playback-active #past-feeds-list,
.past-feeds-pane.is-stage-playback-active #past-feeds-empty,
.past-feeds-pane.is-stage-playback-active .past-feeds-toolbar {
  display: none !important;
}

.past-feeds-stage-player {
  width: 100%;
}

.past-feeds-stage-player-shell {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  border: 1px solid var(--border-grey);
  border-radius: 12px;
  background: var(--surface-raised);
  padding: 0.75rem;
  box-sizing: border-box;
}

.past-feeds-stage-player-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.85rem;
}

.past-feeds-stage-player-close {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #d8e2f2;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

.past-feeds-stage-player-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.past-feeds-stage-player-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-color);
}

.past-feeds-stage-player-meta {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.past-feeds-stage-player-host {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 12rem;
  border-radius: 10px;
  overflow: hidden;
  background: #020617;
}

.past-feeds-stage-player-host video,
.past-feeds-stage-player-host mux-player {
  width: 100%;
  height: 100%;
  display: block;
}

.past-feeds-stage-player-unavailable {
  margin: 0;
  font-size: 0.88rem;
  color: #fbbf24;
}

.past-feeds-pane[hidden] {
  display: none !important;
}

.past-feeds-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.past-feeds-header .past-feeds-open-settings-btn {
  margin-left: auto;
}

.past-feeds-context-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color);
}

.past-feeds-context-hint {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 36rem;
  line-height: 1.45;
}

.past-feeds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.past-feeds-view-toggle,
.past-feeds-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem;
  border-radius: 999px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
}

.past-feeds-tool-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}

.past-feeds-tool-btn.is-active,
.past-feeds-tool-btn[aria-pressed="true"] {
  background: rgba(33, 150, 243, 0.2);
  color: var(--accent-blue);
}

.past-feeds-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--border-grey);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.past-feeds-list {
  display: grid;
  gap: 0.65rem;
}

.past-feeds-list--list {
  grid-template-columns: 1fr;
}

.past-feeds-list--canvas {
  display: block;
  padding: 0.35rem 0 1rem;
}

.past-feeds-canvas-host {
  width: 100%;
  max-width: 100%;
}

.past-feeds-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.past-feeds-select-all-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
}

.past-feeds-select-checkbox.name-lock-checkbox {
  /* Same size as Lock display name / Lock group name */
  width: 0.7rem;
  height: 0.7rem;
  min-width: 0.7rem;
  min-height: 0.7rem;
}

.past-feeds-bulk-btn:disabled,
.past-feeds-delete-selected-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.past-feeds-delete-selected-btn.is-ready:not(:disabled) {
  opacity: 1;
  filter: none;
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--accent-cyan, #00e5ff);
  background: rgba(0, 229, 255, 0.1);
}

.past-feeds-selection-count {
  font-size: 0.78rem;
  color: var(--text-muted, #9aa3ab);
}

.past-feeds-card {
  position: relative;
}

/* Select in title/meta box — native checkbox (same idea as Select all) */
.video-card-meta,
.past-feeds-card-meta,
.card-meta {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.past-feeds-card-select-row,
.past-feeds-card-select-row--meta {
  position: relative;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  padding: 0.4rem 0.6rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 0.4rem;
  border: 1px solid rgba(103, 232, 249, 0.5);
  background: rgba(8, 16, 28, 0.92);
  color: rgba(245, 247, 251, 0.92);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
}

.past-feeds-card-select-row:hover,
.past-feeds-card-select-row.is-selected {
  border-color: rgba(103, 232, 249, 0.95);
  background: rgba(8, 47, 73, 0.96);
  color: #a5f3fc;
}

.past-feeds-select-native.past-feeds-card-select,
.past-feeds-card-select-row .past-feeds-select-native {
  position: static !important;
  width: 0.9rem !important;
  height: 0.9rem !important;
  min-width: 0.9rem !important;
  min-height: 0.9rem !important;
  margin: 0 !important;
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
}

.past-feeds-card-select-text {
  user-select: none;
  pointer-events: none;
}

.video-card.is-feed-selected {
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.55);
}

/* Thumbnail = play; title box Select = multi-select */
.video-card-play-hit,
.video-card--expandable .video-card-preview {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.video-card {
  position: relative;
}

.past-feeds-list--grid {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.past-feeds-open-settings-btn {
  align-self: flex-start;
  border: 1px solid rgba(33, 150, 243, 0.35);
  background: rgba(33, 150, 243, 0.1);
  color: var(--accent-blue);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.past-feeds-open-settings-btn:hover {
  background: rgba(33, 150, 243, 0.18);
}

.past-feeds-settings-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0.85rem;
}

.past-feeds-settings-filter {
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.past-feeds-settings-filter.is-active,
.past-feeds-settings-filter[aria-pressed="true"] {
  border-color: rgba(33, 150, 243, 0.45);
  background: rgba(33, 150, 243, 0.16);
  color: var(--accent-blue);
}

.past-feeds-settings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.past-feeds-settings-empty {
  margin-top: 0;
}

.past-feeds-count {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-blue);
}

.past-feeds-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-grey);
  border-radius: 12px;
  background: var(--surface-raised);
}

.past-feeds-card--list {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
}

.past-feeds-card--grid {
  grid-template-columns: 1fr;
}

.past-feeds-card-thumb--playable,
.past-feeds-card-thumb--unavailable {
  cursor: pointer;
}

.past-feeds-card-thumb--playable:hover,
.past-feeds-card-thumb--playable:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.65);
  outline-offset: 2px;
}

.past-feeds-card-thumb--unavailable {
  opacity: 0.72;
}

.past-feeds-card-thumb--unavailable .past-feeds-card-play {
  background: rgba(120, 120, 120, 0.45);
}

.past-feeds-card-thumb--unavailable:hover,
.past-feeds-card-thumb--unavailable:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.55);
  outline-offset: 2px;
}

#view-home.is-past-feeds-mode .past-feeds-pane {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

#view-home.is-past-feeds-mode .main-stage-section {
  pointer-events: none !important;
}

.past-feeds-playback-content {
  max-width: min(52rem, 96vw);
}

.past-feeds-playback-meta {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  color: var(--settings-muted, #94a3b8);
}

.past-feeds-playback-player {
  width: 100%;
  min-height: 12rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #020617;
}

.past-feeds-playback-unavailable {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: #fbbf24;
}

.past-feeds-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0a0a0a;
}

.past-feeds-card-thumb--has-still {
  background-repeat: no-repeat;
}

.past-feeds-card-thumb--pending-still::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  animation: past-feeds-still-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes past-feeds-still-shimmer {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

.past-feeds-card-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.85rem;
}

.past-feeds-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.past-feeds-card-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-color);
}

.past-feeds-card-description {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted, #b0b8c0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.past-feeds-card-meta {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.past-feeds-card-tag {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(33, 150, 243, 0.14);
  color: var(--accent-blue);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.past-feeds-card-actions {
  margin-top: 0.35rem;
}

.past-feeds-card-status {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted, #9aa3b2);
  background: rgba(255, 255, 255, 0.06);
}

.past-feeds-card-approve,
.past-feeds-card-reject {
  border: 1px solid transparent;
  border-radius: 0.45rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.past-feeds-card-approve {
  color: #dff8ea;
  background: rgba(46, 160, 98, 0.22);
}

.past-feeds-card-reject {
  color: #ffd8d8;
  background: rgba(180, 56, 56, 0.18);
}

.group-past-feed-shares {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.group-past-feed-shares-title {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.group-past-feed-shares-hint {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted, #9aa3b2);
}

.group-past-feed-shares-list {
  gap: 0.55rem;
}

.group-feed-share-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Text-first share approval — no player; easy scroll in Group Management */
.group-feed-share-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
}

.group-feed-share-card-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-color, #f2f4f7);
}

.group-feed-share-card-desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted, #b0b8c0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.group-feed-share-card-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted, #9aa3b2);
}

.group-feed-share-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.group-feed-share-open-link {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--accent-blue, #42a5f5);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
  padding: 0.25rem 0.15rem;
}

.group-feed-share-open-link:hover {
  color: #90caf9;
}

/* Live title / description — above stage expand + inside fullscreen when portaled */
.live-meta-modal.app-modal,
.app-confirm-modal.app-modal,
.mux-preview-modal.app-modal {
  z-index: 220010 !important;
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
}

/*
 * Only force-open when intentionally shown via [hidden] removal + JS display:flex.
 * Do NOT use .app-modal:not([hidden]) alone — legacy modals use style="display:none"
 * without a hidden attribute (approval-modal, square-join-modal) and would stick open.
 */
.live-meta-modal.app-modal:not([hidden]),
.app-confirm-modal.app-modal:not([hidden]),
.mux-preview-modal.app-modal:not([hidden]) {
  display: flex !important;
}
.app-modal[hidden] {
  display: none !important;
}
/* Closed by inline style (legacy Connection Request / Join Square) */
.app-modal[style*="display: none"],
.app-modal[style*="display:none"] {
  display: none !important;
}

.live-meta-modal .modal-backdrop {
  z-index: 0;
}

.live-meta-modal .live-meta-modal-content {
  position: relative;
  z-index: 1;
  max-width: 22rem;
  width: min(22rem, calc(100vw - 2rem));
}

.live-meta-group-label {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color, #f2f4f7);
}

.live-meta-hint {
  margin: 0 0 0.85rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted, #9aa3b2);
}

.live-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.7rem;
}

.live-meta-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #c5ccd4);
}

.live-meta-optional {
  font-weight: 500;
  opacity: 0.8;
}

.live-meta-count {
  float: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.live-meta-input,
.live-meta-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-color, #f2f4f7);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.65rem;
  resize: none;
}

.live-meta-input:focus,
.live-meta-textarea:focus {
  outline: 2px solid rgba(33, 150, 243, 0.45);
  outline-offset: 1px;
}

.live-meta-textarea {
  min-height: 4.2rem;
  line-height: 1.35;
}

.settings-vault-sync {
  margin-top: 0.75rem;
}

.past-feeds-card-delete {
  border: 1px solid rgba(244, 67, 54, 0.35);
  background: rgba(244, 67, 54, 0.08);
  color: #ff8a80;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}

#view-home.is-past-feeds-mode .main-stage-section,
#view-home.is-past-feeds-mode .peer-strip,
#view-home.is-past-feeds-mode #stage-audio-notice,
#view-home.is-past-feeds-mode #current-space-bar {
  display: none !important;
}

.past-feeds-header .past-feeds-back-stage-btn {
  flex: 1 1 100%;
}

.past-feeds-back-stage-btn {
  align-self: flex-start;
  margin-bottom: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #d8e2f2;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  cursor: pointer;
}

.past-feeds-back-stage-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.past-feeds-save-message {
  margin-bottom: 0.35rem;
}

.past-feeds-save-warning {
  margin: 0 0 0.85rem;
  color: #ffb4a9;
  font-size: 0.88rem;
}

.past-feeds-save-actions.is-discard-phase {
  justify-content: flex-end;
}

.square-video-chat-btn {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.1);
  color: #7ee9ff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.square-video-chat-btn:hover {
  background: rgba(0, 229, 255, 0.18);
  border-color: rgba(0, 229, 255, 0.7);
}

.square-video-chat-btn.is-active {
  background: rgba(0, 229, 255, 0.24);
  border-color: rgba(0, 229, 255, 0.85);
  color: #fff;
}

.square-video-chat-btn.needs-join {
  animation: square-video-chat-pulse 2.2s ease-in-out infinite;
}

@keyframes square-video-chat-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.22);
  }
}

.square-video-chat-btn:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.65);
  outline-offset: 2px;
}

.square-video-chat-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.square-video-chat-btn[aria-busy="true"] {
  cursor: wait;
}

.group-start-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem 0.32rem 0.45rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 70, 70, 0.65);
  background: linear-gradient(180deg, rgba(255, 70, 70, 0.95), rgba(210, 35, 45, 0.95));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(200, 30, 40, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* display:inline-flex above must not win over HTML [hidden] (Square / chat groups). */
.group-start-live-btn[hidden] {
  display: none !important;
}

.group-start-live-btn--play .group-start-live-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.group-start-live-btn:hover {
  background: linear-gradient(180deg, #ff5a5a, #d81f2c);
  border-color: rgba(255, 120, 120, 0.9);
  transform: translateY(-1px);
}

.group-start-live-btn:focus-visible {
  outline: 2px solid rgba(255, 120, 120, 0.75);
  outline-offset: 2px;
}

.group-start-live-btn.is-live {
  background: linear-gradient(180deg, #ff4d4d, #c41a24);
  border-color: rgba(255, 140, 140, 0.95);
  color: #fff;
  animation: end-live-pulse 1.35s ease-in-out infinite;
}

.group-start-live-btn.is-live .group-start-live-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.12;
  gap: 0.05rem;
}

.group-start-live-btn.is-live .group-start-live-label::before {
  content: none;
}

.go-live-elapsed {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

@keyframes end-live-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.35);
    background: rgba(255, 82, 82, 0.28);
  }
  50% {
    box-shadow: 0 0 14px 2px rgba(255, 82, 82, 0.55);
    background: rgba(255, 82, 82, 0.42);
  }
}

.group-18plus-indicator {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0b429;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 180, 41, 0.45);
  background: rgba(240, 180, 41, 0.1);
}

.group-18plus-indicator[hidden] {
  display: none;
}

.group-live-indicator {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #ff6b6b;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.1);
  /* Compact: YOU ARE LIVE · timer only — leave room for Mute / On stage / Pull */
  max-width: min(28vw, 11.5rem);
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-live-indicator[hidden] {
  display: none;
}

.participant-tile.is-realtime .participant-frame {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35);
}

.no-space-message,
.no-space-empty-state {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 28rem;
  margin: 2rem auto;
  line-height: 1.5;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--border-grey);
  border-radius: 10px;
  background: var(--surface-raised);
}

.no-space-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-color);
}

.no-space-empty-copy {
  margin: 0 0 1rem;
}

.no-space-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.no-space-empty-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.no-space-empty-btn:hover {
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--accent-cyan);
}

.no-space-empty-btn--primary {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
}

#view-home.is-home-hub {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: calc(100% + 1rem);
  margin: 0 -0.5rem;
  align-items: stretch;
}

#view-home.is-home-hub #no-space-message:not(.home-hub-grid-no-space) {
  order: -20;
  flex-shrink: 0;
}

#view-home.is-home-hub #no-space-message.home-hub-grid-no-space {
  margin: 0;
  max-width: none;
  width: auto;
  grid-column: 5 / span 4;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

#view-home.is-home-hub #home-hub-dashboard {
  order: -10;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.home-hub-dashboard {
  display: grid;
  gap: 1rem;
  width: min(100%, 52rem);
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  position: relative;
  box-sizing: border-box;
}

.home-hub-dashboard--free-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(2.75rem, auto);
  width: 100%;
  max-width: none;
}

.home-hub-dashboard--drag-active {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  background-size: calc(100% / 12) 3.25rem;
  background-position: 0 0;
}

/*
 * Phone hub:
 *  - Portrait (≤768 and tall enough): one column
 *  - Landscape / short height: two columns (1:1 cards side by side)
 */
@media (max-width: 768px) {
  .home-hub-dashboard--free-grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    grid-template-columns: none !important;
    grid-auto-rows: auto;
  }

  .home-hub-dashboard--free-grid .home-hub-card,
  .home-hub-dashboard--free-grid .home-hub-call-stage-slot,
  #view-home.is-home-hub #no-space-message.home-hub-grid-no-space {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    inset: auto !important;
  }

  /* “You’re not in a Space/Group yet” leads the stack */
  #view-home.is-home-hub #no-space-message.home-hub-grid-no-space {
    order: -100;
    margin: 0;
  }

  .home-hub-dashboard--free-grid .home-hub-card--groups-feeds { order: 10; }
  .home-hub-dashboard--free-grid .home-hub-card--friends-feeds { order: 20; }
  .home-hub-dashboard--free-grid .home-hub-card--video-messages { order: 30; }
  .home-hub-dashboard--free-grid .home-hub-call-stage-slot { order: 40; }
  .home-hub-dashboard--free-grid .home-hub-card--video-calls { order: 50; }
  .home-hub-dashboard--free-grid .home-hub-card--newsfeed { order: 60; }
  .home-hub-dashboard--free-grid .home-hub-card--webmaster-visibility { order: 70; }
  .home-hub-dashboard--free-grid .home-hub-card--beta-status { order: 80; }
  .home-hub-dashboard--free-grid .home-hub-card--readiness-map { order: 90; }
}

/*
 * Hub landscape / short: true 2-column card grid (pairs: 2×2×2…).
 * Free-grid 12-col spans are cleared so each card is one cell — not 3-across.
 */
@media (max-height: 520px), ((max-width: 900px) and (orientation: landscape)) {
  #view-home.is-home-hub .home-hub-dashboard--free-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, auto) !important;
    gap: 0.55rem 0.65rem !important;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.65rem !important;
  }

  #view-home.is-home-hub .home-hub-dashboard--free-grid .home-hub-card,
  #view-home.is-home-hub .home-hub-dashboard--free-grid .home-hub-call-stage-slot {
    grid-column: auto / span 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    inset: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  #view-home.is-home-hub .home-hub-dashboard--free-grid .home-hub-card--video-messages,
  #view-home.is-home-hub .home-hub-dashboard--free-grid .home-hub-card--video-calls {
    /* Keep inbox cards square in landscape 2-col so pairs align */
    aspect-ratio: 1 / 1;
  }

  #view-home.is-home-hub #no-space-message.home-hub-grid-no-space {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: -100 !important; /* always above other hub cards */
    aspect-ratio: auto;
    width: 100% !important;
  }
}

.home-hub-dashboard[hidden] {
  display: none !important;
}

#view-home:not(.is-home-hub) #home-hub-dashboard {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

#view-home.is-home-hub .home-hub-dashboard {
  display: grid;
  visibility: visible;
  pointer-events: auto;
}

.home-hub-nested-section {
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

.home-hub-nested-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.home-hub-nested-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
}

.home-hub-nested-section-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.home-hub-card--groups,
.home-hub-card--friends-feeds {
  display: flex;
  flex-direction: column;
}

.home-hub-card {
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border-grey);
  border-radius: 10px;
  background: var(--surface-raised);
}

.home-hub-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.home-hub-card-header--pager {
  align-items: center;
}

.home-hub-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.home-hub-card-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.home-hub-unread-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  background: rgba(0, 229, 255, 0.08);
}

.home-hub-card-body {
  display: grid;
  gap: 0.65rem;
}

.home-hub-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.home-hub-empty--inline {
  margin-top: 0.35rem;
}

.home-hub-news-item {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(8, 12, 14, 0.55);
  cursor: pointer;
}

.home-hub-news-item--unread {
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: inset 3px 0 0 var(--accent-cyan);
}

.home-hub-news-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.home-hub-news-item-title {
  font-size: 0.9rem;
}

.home-hub-news-item-time,
.home-hub-news-item-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.home-hub-news-item-body {
  margin: 0.35rem 0;
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.home-hub-compose {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}

.home-hub-compose-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.home-hub-compose-hint {
  margin: -0.15rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-muted, #9ca3af);
}

.home-hub-compose-input,
.home-hub-compose-textarea {
  width: 100%;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(8, 12, 14, 0.75);
  color: var(--text-color);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.home-hub-compose-btn {
  justify-self: start;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
  cursor: pointer;
}

.home-hub-compose-count {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted, #9ca3af);
  text-align: right;
}

.home-hub-compose-status {
  margin: 0;
  min-height: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.home-hub-feed-section + .home-hub-feed-section {
  margin-top: 0.35rem;
}

.home-hub-feed-section-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-hub-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.home-hub-feed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
}

.home-hub-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border-grey);
}

.home-hub-status-dot.is-online {
  background: #3ddc84;
  box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.2);
}

.home-hub-status-dot.is-away {
  background: #f5c542;
}

.home-hub-status-dot.is-busy {
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.22);
}

.home-hub-status-dot.is-offline {
  background: #6b7280;
}

.home-hub-feed-label {
  font-weight: 600;
  color: var(--text-color);
}

.home-hub-feed-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.home-hub-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.home-hub-pager-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.home-hub-pager-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 3.5rem;
  text-align: center;
}

.home-hub-group-summary {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.home-hub-soon-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.home-hub-soon-badge--inline {
  font-size: 0.58rem;
  padding: 0.1rem 0.35rem;
}

.home-hub-video-bridge {
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  border-left: 3px solid rgba(103, 232, 249, 0.45);
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.home-hub-card--video-inbox .home-hub-nested-section + .home-hub-nested-section {
  margin-top: 0.85rem;
}

.home-hub-video-hint {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.home-hub-video-more {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.home-hub-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.home-hub-video-btn,
.home-hub-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.home-hub-video-btn--soon,
.home-hub-call-btn--soon {
  opacity: 0.72;
  cursor: not-allowed;
}

.home-hub-call-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.55rem;
  min-width: 4.75rem;
  justify-content: center;
}

/* Fixed right column so Call → Cancel never jumps layout. */
.home-hub-call-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  min-width: 4.75rem;
  flex-shrink: 0;
}

/* Incoming: Accept | Decline on one row (less clutter than stacked). */
.home-hub-call-actions--incoming {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 9.25rem;
}

.home-hub-call-actions--incoming .home-hub-call-btn {
  min-width: 4.35rem;
  flex: 0 0 auto;
}

.home-hub-call-actions--incoming .home-hub-call-status {
  flex: 1 0 100%;
  text-align: right;
  margin: 0;
}

.home-hub-feed-row--call {
  gap: 0.5rem;
  flex-wrap: nowrap;
  align-items: center;
}

.home-hub-call-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.15;
}

.home-hub-call-status--calling {
  color: var(--accent-cyan, #00e5ff);
}

.home-hub-call-status--incoming {
  color: #3dff9a;
  animation: home-hub-call-pulse 1s ease-in-out infinite;
}

.home-hub-call-status--declined,
.home-hub-feed-row--call.is-call-declined .home-hub-feed-label {
  color: #ff6b7a;
}

.home-hub-call-status--declined {
  animation: home-hub-call-decline-flash 0.7s ease-in-out 3;
}

.home-hub-call-status--canceled,
.home-hub-call-status--missed {
  color: rgba(245, 247, 251, 0.72);
}

.home-hub-call-status--active {
  color: #3dff9a;
}

.home-hub-call-btn--cancel {
  border-color: rgba(255, 107, 122, 0.45);
  color: #ffb4bc;
}

.home-hub-call-btn--accept {
  border-color: rgba(61, 255, 154, 0.45);
  color: #3dff9a;
}

.home-hub-call-btn--decline {
  border-color: rgba(255, 107, 122, 0.4);
  color: #ffb4bc;
}

.home-hub-status-dot--call-pulse {
  box-shadow: 0 0 0 0 rgba(61, 255, 154, 0.55);
  animation: home-hub-call-dot-pulse 1s ease-in-out infinite;
}

.home-hub-feed-row--call.is-incoming-call {
  border-radius: 8px;
  background: rgba(61, 255, 154, 0.06);
}

.home-hub-feed-row--call.is-calling {
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.06);
}

@keyframes home-hub-call-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes home-hub-call-decline-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes home-hub-call-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 255, 154, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(61, 255, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 255, 154, 0); }
}

/* Video Messages + Video Calls: same tall free-grid cells, top-pinned scroll lists */
.home-hub-dashboard--free-grid .home-hub-card--video-calls,
.home-hub-dashboard--free-grid .home-hub-card--video-messages {
  height: 100%;
  min-height: 18rem;
  align-self: stretch;
}

.home-hub-card--video-calls,
.home-hub-card--video-messages {
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}

.home-hub-card--video-calls .home-hub-card-body--video-calls,
.home-hub-card--video-messages .home-hub-card-body--video-messages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

/* Nested sections inside Messages/Calls should not add a second “card top” gap */
.home-hub-card--video-calls .home-hub-nested-section--video-calls,
.home-hub-card--video-messages .home-hub-nested-section--video-messages {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.home-hub-card--video-calls .home-hub-nested-section-body,
.home-hub-card--video-messages .home-hub-nested-section-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

/* Hints / toggle stay at top; only the friend list flex-grows + scrolls */
.home-hub-card--video-calls .home-hub-call-availability,
.home-hub-card--video-calls .home-hub-call-availability-hint,
.home-hub-card--video-calls .home-hub-video-hint,
.home-hub-card--video-calls .home-hub-video-quota,
.home-hub-card--video-calls .home-hub-empty,
.home-hub-card--video-messages .home-hub-video-hint,
.home-hub-card--video-messages .home-hub-video-quota,
.home-hub-card--video-messages .home-hub-empty {
  flex: 0 0 auto;
}

/* Scroll lists: pin rows to the TOP of the list (never vertically center a lone friend). */
.home-hub-card--video-calls .home-hub-feed-list--calls,
.home-hub-card--video-messages .home-hub-feed-list--video-messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0.15rem 0 0;
  margin: 0;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 0.35rem;
  list-style: none;
}

.home-hub-card--video-calls .home-hub-feed-list--calls .home-hub-feed-row--call,
.home-hub-card--video-messages .home-hub-feed-list--video-messages .home-hub-feed-row--video-inbox {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Name + Call: top of row, not mid-button / mid-card */
.home-hub-feed-row--call {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.home-hub-card--video-calls .home-hub-feed-list--calls .home-hub-feed-row--call {
  align-items: flex-start;
}

.home-hub-feed-row--call .home-hub-feed-label {
  align-self: flex-start;
  padding-top: 0.4rem; /* optical align with Call button text */
  line-height: 1.25;
}

.home-hub-feed-row--call .home-hub-call-actions,
.home-hub-feed-row--call .home-hub-status-dot {
  align-self: flex-start;
}

.home-hub-video-quota--incoming {
  color: #86efac;
  font-weight: 600;
}

.home-hub-link-btn {
  margin-top: 0.35rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--accent-cyan);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-hub-feed-list--video-messages .home-hub-feed-row--video-inbox {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  padding-right: 0;
}

.home-hub-feed-row-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0.45rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}

.home-hub-feed-row-main:hover {
  background: rgba(103, 232, 249, 0.06);
}

.home-hub-video-row-record,
.home-hub-call-btn--message {
  flex-shrink: 0;
  min-width: 4.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
  font: inherit;
  font-size: 0.74rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.home-hub-video-row-record--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.home-hub-call-availability {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.home-hub-call-availability.settings-toggle-row {
  gap: 0.65rem;
}

.home-hub-call-availability .settings-toggle-label {
  font-size: 0.82rem;
}

.settings-account-identity-grid {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}

.settings-account-identity-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 11rem) 1fr;
  gap: 0.65rem;
  align-items: baseline;
  font-size: 0.84rem;
}

/* Account section: matched card width (identity + delete) — not tiny/uneven */
.settings-page-layout--sectioned .settings-panel-account-identity.settings-panel-card--half-width,
.settings-page-layout--sectioned .settings-panel-delete.settings-panel-card--half-width,
.settings-page-layout--webmaster .settings-panel-account-identity.settings-panel-card--half-width,
.settings-page-layout--webmaster .settings-panel-delete.settings-panel-card--half-width {
  grid-column: 1 / -1;
  max-width: min(36rem, 100%);
  justify-self: start;
  width: 100%;
}

/* Analyze → Red Flag */
.analyze-red-flag-section {
  margin-top: 0.35rem;
}

.analyze-red-flag-section--spaced {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.analyze-viewing-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.45rem 0 0.65rem;
}

.analyze-viewing-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 18rem;
}

.analyze-viewing-select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(8, 10, 14, 0.85);
  color: inherit;
}

.analyze-viewing-list,
.analyze-reports-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.analyze-viewing-row,
.analyze-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(0, 0, 0, 0.22);
}

.analyze-viewing-row-main,
.analyze-report-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.analyze-viewing-label,
.analyze-report-title {
  font-size: 0.86rem;
  font-weight: 600;
}

.analyze-viewing-meta,
.analyze-report-meta,
.analyze-report-note {
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.35;
}

.analyze-report-row.is-priority {
  border-color: rgba(255, 107, 122, 0.4);
  background: rgba(255, 70, 90, 0.07);
}

.settings-panel-coming-soon-line {
  margin-top: 1rem;
}

.red-flag-hide-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.35rem 0 0.35rem;
  font-size: 0.8rem;
  line-height: 1.35;
  cursor: pointer;
}

.red-flag-hide-row input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.red-flag-hide-duration-row {
  margin: 0 0 0.45rem 1.35rem;
}

.settings-panel-coming-soon {
  display: inline-block;
  margin: 0 0 0.65rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e7490;
  background: rgba(103, 232, 249, 0.16);
  border: 1px solid rgba(103, 232, 249, 0.35);
}

.settings-panel-analyze-list {
  margin: 0 0 0.75rem 1.1rem;
  padding: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 0.84rem;
  line-height: 1.45;
}

.settings-panel-analyze-list li {
  margin-bottom: 0.35rem;
}

.settings-account-identity-row dt {
  margin: 0;
  color: var(--text-muted);
}

.settings-account-identity-row dd {
  margin: 0;
  word-break: break-word;
}

.settings-account-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.settings-account-password-section {
  margin-top: 0.35rem;
}

.settings-account-password-label {
  display: block;
  margin: 0.45rem 0 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.home-hub-call-availability-hint {
  margin: 0 0 0.65rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.home-hub-feed-row--call-away .home-hub-feed-meta,
.home-hub-feed-row--call-away .home-hub-call-btn--message {
  margin-left: auto;
}

.home-hub-feed-unread-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0f172a;
  background: var(--accent-cyan);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.home-hub-video-quota {
  margin: 0 0 0.65rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Record card: keep compact so 100% zoom fits (was 720px + always-on 16:9 preview). */
.video-message-record-modal .modal-content {
  width: min(92vw, 28rem);
  max-width: min(92vw, 28rem);
  max-height: min(88vh, 36rem);
  overflow: auto;
  text-align: left;
  align-items: stretch;
  padding: 1rem 1.1rem 0.9rem;
  box-sizing: border-box;
}

/* Thread modal stays roomier for list + player */
.video-message-thread-modal .modal-content {
  width: min(96vw, 720px);
  max-width: min(96vw, 720px);
  max-height: 92vh;
  overflow: auto;
  text-align: left;
  align-items: stretch;
}

/* Thread modal: roomy outer card so list + square player fit (not postage-stamp) */
.video-message-thread-modal .modal-content.video-message-thread-content {
  width: min(96vw, 1280px);
  max-width: min(96vw, 1280px);
  max-height: min(96vh, 920px);
  min-height: min(78vh, 640px);
  padding: 1.35rem 1.5rem 1.25rem;
  box-sizing: border-box;
}

.video-message-thread-header,
.private-call-active-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  position: relative;
  z-index: 6;
}

.private-call-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.private-call-active-header .btn-primary,
.private-call-active-header .btn-private-call-hang-up,
.private-call-active-header .btn-private-call-camera,
.private-call-active-header .btn-private-call-mute {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.private-call-active-header .btn-private-call-hang-up {
  background: var(--accent-cyan);
  color: #000;
  border: none;
}

.private-call-active-header .btn-private-call-camera,
.private-call-active-header .btn-private-call-mute {
  background: rgba(15, 18, 24, 0.9);
  color: var(--text-color, #f5f7fb);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Full-screen pop-out: keep Mic | Camera | Hang up always visible on a bar */
.private-call-active-overlay.is-stage-expanded .private-call-active-header {
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.25rem 0.5rem;
  background: rgba(2, 6, 23, 0.92);
  border-bottom: 1px solid rgba(103, 232, 249, 0.2);
  align-items: center;
}

.private-call-active-overlay.is-stage-expanded .private-call-privacy-note {
  display: none;
}

.private-call-active-overlay.is-stage-expanded .private-call-header-actions {
  flex-wrap: nowrap;
}

.private-call-stage-controls {
  display: none;
}

.private-call-active-overlay.is-stage-expanded .private-call-stage-controls {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 8;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.82);
  border: 1px solid rgba(103, 232, 249, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none; /* bar itself; buttons re-enable */
}

.private-call-active-overlay.is-stage-expanded .private-call-stage-controls .btn-secondary,
.private-call-active-overlay.is-stage-expanded .private-call-stage-controls .btn-primary {
  pointer-events: auto;
  min-height: 40px;
  min-width: 5.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.private-call-active-overlay.is-stage-expanded .private-call-stage-controls .btn-private-call-mute,
.private-call-active-overlay.is-stage-expanded .private-call-stage-controls .btn-private-call-camera {
  background: rgba(15, 18, 24, 0.95);
  color: var(--text-color, #f5f7fb);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.private-call-active-overlay.is-stage-expanded .private-call-stage-controls .btn-private-call-hang-up {
  background: var(--accent-cyan);
  color: #000;
  border: none;
}

/* When expanded, primary controls live on the stage bar — hide duplicate header actions */
.private-call-active-overlay.is-stage-expanded .private-call-header-actions {
  display: none;
}

.private-call-active-header .btn-private-call-camera.is-camera-on {
  border-color: rgba(0, 229, 255, 0.5);
  color: var(--accent-cyan, #00e5ff);
}

.private-call-active-header .btn-private-call-mute.is-muted {
  border-color: rgba(255, 107, 122, 0.55);
  color: #ffb4bc;
}

.private-call-active-header .btn-primary:hover,
.private-call-active-header .btn-private-call-hang-up:hover,
.private-call-active-header .btn-private-call-camera:hover,
.private-call-active-header .btn-private-call-mute:hover {
  opacity: 0.85;
}

.private-call-privacy-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted, rgba(245, 247, 251, 0.72));
}

.private-call-remote-wrap,
.private-call-local-wrap {
  position: relative;
  min-height: 10rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #000;
}

.private-call-video-label {
  position: absolute;
  left: 0.45rem;
  bottom: 0.4rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.private-call-local-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(245, 247, 251, 0.78);
  background: rgba(12, 16, 22, 0.92);
}

.private-call-local-wrap[data-camera-on="1"] .private-call-local-placeholder {
  display: none;
}

.video-message-thread-subtitle,
.video-message-record-hint,
.video-message-thread-status,
.video-message-record-status,
.private-call-active-status,
.private-call-incoming-message {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.video-message-thread-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.55fr);
  gap: 1.15rem;
  align-items: start;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.video-message-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  max-height: min(74vh, 40rem);
  overflow: auto;
  padding-right: 0.15rem;
}

.video-message-thread-player-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 0.45rem;
}

.video-message-thread-player-shell {
  position: relative;
  /* Landscape 16:9 — matches phone/webcam messages; square shell left huge black bars */
  width: min(100%, 56vw, 720px);
  max-width: 720px;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: min(52vh, 420px);
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Legacy blue corner expand removed from markup — keep rule so stray nodes stay hidden */
.video-message-thread-expand-btn {
  display: none !important;
}

.video-message-thread-player {
  cursor: zoom-in;
}

.video-message-thread-player video {
  cursor: zoom-in;
}

.video-message-thread-expand-hint {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.35;
}

/* Full-size enlarge overlay (thread modal stays open underneath).
   Must sit ABOVE .app-modal (z-index 220000) or enlarge looks like a no-op. */
.video-message-thread-lightbox {
  position: fixed;
  inset: 0;
  z-index: 230500 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.video-message-thread-lightbox[hidden] {
  display: none !important;
}

.video-message-thread-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.88);
}

.video-message-thread-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1100px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #0a0a0a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.video-message-thread-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
}

.video-message-thread-lightbox-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.video-message-thread-lightbox-host {
  position: relative;
  width: 100%;
  min-height: min(70vh, 640px);
  max-height: min(78vh, 720px);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.video-message-thread-lightbox-host video {
  width: 100%;
  height: 100%;
  max-height: min(78vh, 720px);
  /* Enlarged: full frame of the clip (letterbox OK); in-thread uses cover */
  object-fit: contain !important;
  object-position: center center;
  background: #000;
  display: block;
}

.video-message-thread-lightbox-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}

.video-message-thread-player.is-expanded-away::after {
  content: 'Playing enlarged — close enlarge to dock back here';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245, 247, 251, 0.78);
  background: rgba(8, 10, 14, 0.92);
  pointer-events: none;
}

body.video-message-lightbox-open {
  overflow: hidden;
}

.video-message-thread-item-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}

.video-message-thread-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.45);
  color: inherit;
  font: inherit;
  padding: 0.7rem 0.8rem;
  min-height: 3.4rem;
  cursor: pointer;
}

.video-message-thread-item.is-active {
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(103, 232, 249, 0.08);
}

.video-message-thread-item.is-unread .video-message-thread-item-label {
  font-weight: 700;
}

.video-message-thread-item-label {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.video-message-thread-item-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.video-message-thread-item-reply {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #a5f3fc;
  line-height: 1.3;
  word-break: break-word;
}

.video-message-thread-item.is-feed-reply {
  border-color: rgba(103, 232, 249, 0.28);
}

.video-message-thread-item-delete {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 4.5rem;
  max-width: 5.75rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.25);
  color: #fecaca;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.25;
  padding: 0.45rem 0.45rem;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}

.video-message-thread-player,
.video-message-record-live,
.video-message-record-review {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(32vh, 14rem);
  border-radius: 10px;
  background: #000;
  object-fit: cover;
}

.video-message-record-live[hidden],
.video-message-record-timer[hidden] {
  display: none !important;
}

/* In-thread player fills the 16:9 shell (no postage stamp in a tall black square) */
.video-message-thread-player {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: unset;
  max-height: none;
}

.video-message-thread-player video,
.video-message-thread-player .vp-inbox-video-media {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #000;
  /* Cover uses the frame; slight crop beats 2/3 empty black for face messages */
  object-fit: cover;
  object-position: center center;
  display: block;
}

.video-message-thread-unavailable {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #fca5a5;
}

.video-message-record-friend {
  width: 100%;
  margin: 0.5rem 0 0.75rem;
  font: inherit;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
}

.video-message-record-timer {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Center hub chrome between Video Messages and Video Calls — solid dark, no blue wash */
.home-hub-call-stage-slot {
  min-height: 12rem;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #050505;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Placeholder only if panel failed to mount — normally the live stage panel fills this slot. */
.home-hub-call-stage-slot:empty::after {
  content: '1:1 stage';
  margin: auto;
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.home-hub-call-stage-slot {
  cursor: default;
}

.private-call-active-panel.is-stage-idle .btn-private-call-hang-up[hidden] {
  display: none !important;
}

/* Legacy cover — never show translucent friend overlay on the 1:1 stage. */
.private-call-remote-preview-note,
.private-call-remote-wrap .private-call-remote-preview-note,
.private-call-remote-wrap.is-preview-empty::before,
.private-call-remote-wrap.is-preview-empty::after,
.private-call-remote-wrap::before,
.private-call-remote-wrap::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

.private-call-remote-wrap.is-preview-empty .private-call-remote-video,
.private-call-remote-video {
  opacity: 1 !important;
}

.home-hub-call-stage-slot.is-call-active {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.14);
  background: #000;
}

.home-hub-call-stage-slot.is-call-active::after {
  display: none;
}

.home-hub-call-stage-slot .private-call-active-panel {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 100%;
  border: none;
  border-radius: 14px;
  /* Solid — no semi-transparent panel that shows a blue wash through video */
  background: #050505;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
}

/* Expanded (pop-out) shell — true fill of the browser viewport */
.private-call-active-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.private-call-active-overlay[hidden] {
  display: none !important;
}

.private-call-active-overlay.is-docked {
  /* Shell unused while panel is docked in hub */
  display: none !important;
}

.private-call-active-overlay.is-stage-expanded {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.private-call-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
}

.private-call-active-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: #050505;
  padding: 1rem;
  transition: width 0.2s ease, max-height 0.2s ease;
}

.private-call-active-overlay.is-stage-expanded .private-call-active-panel {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: none;
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.private-call-stage-frame {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Clear black stage — no blue translucent wash over live or idle video */
  background: #000;
  padding: 0.75rem;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 10rem;
}

.private-call-active-panel.is-stage-live .private-call-stage-frame,
.private-call-active-panel.is-stage-idle .private-call-stage-frame,
.private-call-active-panel:not(.is-stage-idle) .private-call-stage-frame {
  border-color: rgba(255, 255, 255, 0.1);
  background: #000;
}

.private-call-remote-wrap {
  background: #000;
}

/* 1:1 Enlarge — top-left; monitor fullscreen target is the active panel */
.private-call-popout-icon {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  right: auto;
  z-index: 5;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0.45rem;
  border: 1px solid rgba(103, 232, 249, 0.45);
  background: rgba(2, 6, 23, 0.72);
  color: #67e8f9;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* When OS fullscreen is on the call panel, paint edge-to-edge */
.private-call-active-panel:fullscreen,
.private-call-active-panel:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: #000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.75rem 1rem 1rem;
}

.private-call-active-panel:fullscreen .private-call-stage-frame,
.private-call-active-panel:-webkit-full-screen .private-call-stage-frame {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.private-call-popout-icon:hover {
  background: rgba(8, 47, 73, 0.9);
  border-color: #67e8f9;
  color: #ecfeff;
}

.private-call-popout-icon.is-expanded .private-call-popout-icon-svg {
  transform: scale(0.92);
}

.private-call-active-overlay.is-stage-expanded .private-call-stage-frame {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  /* Room for bottom Mic | Camera bar */
  padding-bottom: 4.25rem;
}

.private-call-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  position: relative;
  min-height: 8rem;
}

.private-call-active-overlay.is-stage-expanded .private-call-video-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-hub-call-stage-slot .private-call-video-grid {
  min-height: 9rem;
}

.private-call-remote-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 10;
  max-height: min(48vh, 420px);
}

.home-hub-call-stage-slot .private-call-remote-wrap {
  max-height: min(36vh, 280px);
  background: #000;
}

.private-call-active-overlay.is-stage-expanded .private-call-remote-wrap {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: #000;
}

/* Clear friend video — no wash, no dim, black letterbox only */
.private-call-remote-video,
.home-hub-call-stage-slot .private-call-remote-video,
.private-call-active-overlay .private-call-remote-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  opacity: 1;
  filter: none;
}

.private-call-local-wrap {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: min(28vw, 160px);
  z-index: 2;
  cursor: pointer;
  user-select: none;
}

.home-hub-call-stage-slot .private-call-local-wrap {
  width: min(26vw, 120px);
  right: 0.55rem;
  bottom: 0.55rem;
}

.private-call-local-video {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: #000;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: block;
}

/*
 * 1:1 self-preview (Vinny): double-click You → self in large Friend frame
 * (local-only layout). Double-click You again → restore.
 * Streams unchanged — only which wrap is large vs pip.
 */
.private-call-video-grid.is-self-in-friend-frame .private-call-local-wrap {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  top: auto;
  width: 100%;
  max-width: none;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 10;
  max-height: min(48vh, 420px);
  border: 1px solid rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12);
}

.home-hub-call-stage-slot .private-call-video-grid.is-self-in-friend-frame .private-call-local-wrap {
  max-height: min(36vh, 280px);
  width: 100%;
  right: auto;
  bottom: auto;
}

.private-call-active-overlay.is-stage-expanded
  .private-call-video-grid.is-self-in-friend-frame
  .private-call-local-wrap {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.private-call-video-grid.is-self-in-friend-frame .private-call-local-video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border: none;
  border-radius: 0;
  /* Unmirrored — match how the friend sees you (not selfie mirror) */
  transform: none;
}

.private-call-video-grid.is-self-in-friend-frame .private-call-remote-wrap {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: min(28vw, 160px);
  z-index: 3;
  aspect-ratio: 3 / 4;
  max-height: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.home-hub-call-stage-slot
  .private-call-video-grid.is-self-in-friend-frame
  .private-call-remote-wrap {
  width: min(26vw, 120px);
  right: 0.55rem;
  bottom: 0.55rem;
}

.private-call-active-overlay.is-stage-expanded
  .private-call-video-grid.is-self-in-friend-frame
  .private-call-remote-wrap {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

.private-call-video-grid.is-self-in-friend-frame .private-call-remote-video {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.private-call-video-grid.is-self-in-friend-frame .private-call-video-label {
  background: rgba(0, 40, 48, 0.82);
  color: var(--accent-cyan, #00e5ff);
}

.home-hub-call-stage-slot .private-call-privacy-note {
  font-size: 0.72rem;
  margin: 0.35rem 0 0.5rem;
}

.home-hub-call-stage-slot .private-call-active-header {
  gap: 0.5rem;
}

.home-hub-call-stage-slot .private-call-header-actions {
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .video-message-thread-modal .modal-content.video-message-thread-content {
    width: min(100vw - 0.75rem, 100%);
    max-width: none;
    min-height: 0;
    max-height: min(92dvh, calc(100dvh - 1rem));
  }

  .video-message-thread-player-shell {
    width: min(100%, 92vw, 720px);
    height: auto;
    max-height: min(42vh, 360px);
    aspect-ratio: 16 / 9;
  }

  .video-message-thread-layout {
    grid-template-columns: 1fr;
  }

  .video-message-thread-item-delete {
    min-width: 3.5rem;
    min-height: 44px;
  }

  .home-hub-video-btn,
  .home-hub-call-btn,
  .home-hub-feed-row--video-inbox {
    min-height: 44px;
  }
}

.home-hub-link-btn:hover {
  color: #8ee4ff;
}

.home-hub-layout-chrome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.home-hub-layout-edit,
.home-hub-layout-done {
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border-grey);
  background: var(--surface-raised);
  color: var(--text-color);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.home-hub-layout-edit:hover,
.home-hub-layout-done:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.home-hub-reorder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px dashed rgba(0, 229, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.06);
  grid-column: 1 / -1;
}

.home-hub-reorder-hint {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.home-hub-reorder-reset {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
  cursor: pointer;
}

.home-hub-reorder-reset:hover {
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--accent-cyan);
}

.home-hub-drag-handle[draggable="true"] {
  cursor: grab;
}

.home-hub-drag-handle[draggable="true"]:active {
  cursor: grabbing;
}

.home-hub-card--dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.home-hub-card--drag-ghost {
  position: fixed;
  top: -1000px;
  left: -1000px;
  pointer-events: none;
  opacity: 0.88;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.home-hub-drop-indicator {
  position: absolute;
  border-radius: 10px;
  border: 2px dashed rgba(0, 229, 255, 0.85);
  background: rgba(0, 229, 255, 0.12);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.25);
  pointer-events: none;
  z-index: 3;
}

.home-hub-card-header--readiness {
  align-items: flex-start;
}

.home-hub-card-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.home-hub-readiness-toggle,
.home-hub-readiness-collapsed-summary {
  flex-shrink: 0;
}

.home-hub-readiness-toggle {
  font: inherit;
  font-size: 0.74rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-color);
  cursor: pointer;
}

.home-hub-readiness-toggle:hover {
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--accent-cyan);
}

.home-hub-readiness-collapsed-summary {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.home-hub-card--readiness-collapsed.home-hub-card--collapsed {
  padding: 0.5rem 0.8rem;
}

.home-hub-card--readiness-collapsed.home-hub-card--collapsed .home-hub-card-header {
  margin-bottom: 0;
  align-items: center;
}

.home-hub-card--readiness-collapsed.home-hub-card--collapsed .home-hub-card-title {
  margin: 0;
  font-size: 0.86rem;
}

.home-hub-card--readiness-collapsed.home-hub-card--collapsed .home-hub-readiness-collapsed-summary {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.home-hub-card--collapsed .home-hub-card-subtitle {
  margin-bottom: 0;
}

.home-hub-drag-handle {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 15, 15, 0.55);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: grab;
  padding: 0;
}

.home-hub-drag-handle:active {
  cursor: grabbing;
}

.home-hub-card-body--role-panel {
  padding-top: 0;
}

.home-hub-embedded-panel {
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.home-hub-embedded-panel .settings-panel-title {
  display: none;
}

.home-hub-embedded-panel .settings-panel-desc:first-of-type {
  margin-top: 0;
}

.home-hub-embedded-panel .settings-toggle-row {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.home-hub-embedded-panel .live-settings-status {
  min-height: 1.25rem;
}

.beta-mgmt-access-days-field,
.beta-mgmt-access-days-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.beta-mgmt-access-days-wrap--inline {
  margin-left: 0.15rem;
}

.beta-mgmt-access-days-select {
  min-width: 4.5rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-elevated, #1a1a1a);
  color: var(--text-color);
}

.beta-mgmt-code-requests {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 64, 0.35);
  background: rgba(255, 196, 64, 0.08);
}

.beta-mgmt-code-requests-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.beta-mgmt-code-requests-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.beta-mgmt-code-request-row {
  padding: 0.65rem 0;
  border-top: 1px solid var(--border-subtle);
}

.beta-mgmt-code-request-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.beta-mgmt-code-request-meta,
.beta-mgmt-code-request-note {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
}

.beta-mgmt-code-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.beta-tester-inbox-list {
  min-height: 4rem;
  margin-bottom: 0.75rem;
}

.beta-tester-inbox-empty {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.beta-tester-inbox-item {
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}

.beta-tester-inbox-item--unread {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
}

.beta-tester-inbox-item-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.beta-tester-inbox-item-title {
  font-size: 0.9rem;
}

.beta-tester-inbox-item-time,
.beta-tester-inbox-item-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.beta-tester-inbox-item-body {
  margin: 0;
  font-size: 0.84rem;
  white-space: pre-wrap;
}

.beta-tester-inbox-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* WebMaster-only skeleton build map (8080 / dev tunnel) — hard to ignore on purpose */
body.vp-skeleton-map-blocked #main-app {
  box-shadow: inset 0 3px 0 0 #ef4444;
}

body.vp-skeleton-map-caution #main-app {
  box-shadow: inset 0 3px 0 0 #eab308;
}

.vp-skeleton-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  z-index: 99989;
}

.vp-skeleton-banner--blocked {
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.95), rgba(153, 27, 27, 0.88));
  color: #fff;
}

.vp-skeleton-banner--caution {
  background: linear-gradient(90deg, rgba(113, 63, 18, 0.95), rgba(133, 77, 14, 0.88));
  color: #fff;
}

.vp-skeleton-banner--ready {
  background: linear-gradient(90deg, rgba(20, 83, 45, 0.92), rgba(22, 101, 52, 0.85));
  color: #fff;
}

.vp-skeleton-banner-headline {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vp-skeleton-banner-detail {
  margin: 0.2rem 0 0;
  opacity: 0.92;
  max-width: 52rem;
}

.vp-skeleton-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vp-skeleton-banner-btn {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.vp-skeleton-banner-btn--ghost {
  background: transparent;
  font-weight: 500;
}

.vp-skeleton-target {
  position: relative;
}

.vp-skeleton-target--red {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.vp-skeleton-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 99990;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 16px rgba(239, 68, 68, 0.75);
  animation: vp-skeleton-pulse 1.2s ease-in-out infinite;
}

.vp-skeleton-dot--red {
  background: #ef4444;
  animation: vp-skeleton-pulse-red 1s ease-in-out infinite;
}

.vp-skeleton-dot--yellow {
  background: #eab308;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(234, 179, 8, 0.55);
}

.vp-skeleton-dot--green {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(34, 197, 94, 0.45);
  animation: vp-skeleton-pulse 2.4s ease-in-out infinite;
}

@keyframes vp-skeleton-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes vp-skeleton-pulse-red {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 12px rgba(239, 68, 68, 0.65);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 22px rgba(239, 68, 68, 1);
  }
}

.vp-skeleton-target-flash {
  outline: 3px solid rgba(250, 204, 21, 0.95);
  outline-offset: 3px;
}

.vp-skeleton-legend {
  position: fixed;
  right: 12px;
  top: calc(3.25rem + max(0.5rem, env(safe-area-inset-top, 0px)) + 0.75rem);
  bottom: auto;
  z-index: 99991;
  width: min(340px, calc(100vw - 24px));
  max-height: min(40vh, 320px);
  overflow: auto;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 2px solid rgba(239, 68, 68, 0.55);
  background: rgba(12, 14, 20, 0.97);
  color: #f3f4f6;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  font-size: 0.78rem;
}

/* Home hub readiness map (replaces floating overlay dots Jul 10) */
.vp-skeleton-home-map--blocked {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}

.vp-skeleton-home-map--caution {
  border-color: rgba(234, 179, 8, 0.45);
}

.vp-skeleton-home-map--ready {
  border-color: rgba(34, 197, 94, 0.35);
}

.vp-skeleton-home-map-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.vp-skeleton-home-readiness-headline {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fecaca;
}

.vp-skeleton-home-map--caution .vp-skeleton-home-readiness-headline {
  color: #fde68a;
}

.vp-skeleton-home-map--ready .vp-skeleton-home-readiness-headline {
  color: #86efac;
}

.vp-skeleton-home-readiness-detail,
.vp-skeleton-home-readiness-counts,
.vp-skeleton-home-footer {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.vp-skeleton-home-readiness-counts {
  font-weight: 600;
  color: #fca5a5;
}

.vp-skeleton-home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: none;
  overflow: visible;
}

.vp-skeleton-home-jump {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.vp-skeleton-home-jump:hover {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.06);
}

.vp-skeleton-home-item--red .vp-skeleton-home-jump {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 29, 29, 0.18);
}

.vp-skeleton-home-jump .vp-skeleton-dot {
  position: static;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 0.2rem;
  border-width: 1px;
  animation: none;
  box-shadow: none;
}

.vp-skeleton-home-jump-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.vp-skeleton-home-jump-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-color);
}

.vp-skeleton-home-jump-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.vp-skeleton-home-jump-status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fca5a5;
}

.vp-skeleton-home-item--red .vp-skeleton-home-jump-status {
  color: #f87171;
}

body.vp-skeleton-map-active .vp-skeleton-legend {
  top: calc(3.25rem + max(0.5rem, env(safe-area-inset-top, 0px)) + 5.25rem);
}

.vp-skeleton-legend--nag {
  animation: vp-skeleton-legend-nag 0.45s ease-in-out 3;
}

@keyframes vp-skeleton-legend-nag {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.vp-skeleton-legend-header {
  margin-bottom: 0.45rem;
}

.vp-skeleton-legend-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.vp-skeleton-legend-toggle-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 0.85rem;
  color: #fca5a5;
}

.vp-skeleton-legend-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vp-skeleton-legend-title {
  font-size: 0.92rem;
  color: #fecaca;
}

.vp-skeleton-legend-subtitle {
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 600;
}

.vp-skeleton-legend--collapsed {
  max-height: none;
  overflow: visible;
}

.vp-skeleton-legend--collapsed .vp-skeleton-legend-body,
.vp-skeleton-legend--collapsed .vp-skeleton-legend-actions {
  display: none;
}

.vp-skeleton-legend-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.vp-skeleton-legend-action-btn {
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.08);
  color: #a5f3fc;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.vp-skeleton-legend-action-btn:hover {
  background: rgba(0, 229, 255, 0.16);
}

.vp-skeleton-legend-stance {
  margin: 0 0 0.5rem;
  color: #e5e7eb;
  line-height: 1.45;
}

.vp-skeleton-legend-key {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.45rem;
}

.vp-skeleton-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.vp-skeleton-legend-key .vp-skeleton-dot {
  position: static;
  width: 10px;
  height: 10px;
  border-width: 1px;
  animation: none;
  box-shadow: none;
}

.vp-skeleton-legend-counts {
  margin: 0 0 0.5rem;
  color: #fecaca;
  font-weight: 600;
}

.vp-skeleton-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.vp-skeleton-legend-item--red .vp-skeleton-legend-btn-label {
  color: #fecaca;
  font-weight: 600;
}

.vp-skeleton-legend-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.vp-skeleton-legend-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.vp-skeleton-legend-btn .vp-skeleton-dot {
  position: static;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-width: 1px;
  animation: none;
  box-shadow: none;
}

.vp-skeleton-legend-footer {
  margin: 0.55rem 0 0;
  color: #9ca3af;
  font-size: 0.72rem;
}

.vp-skeleton-legend-footer code {
  color: #fde68a;
}

.no-space-empty-btn--soon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0.72;
  cursor: not-allowed;
}

.no-space-empty-btn--soon:hover {
  border-color: var(--border-subtle);
  color: var(--text-color);
}

.no-space-empty-soon-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.no-space-empty-footer {
  margin: 0;
  font-size: 0.78rem;
}

.no-space-empty-link {
  font: inherit;
  font-size: inherit;
  color: var(--accent-cyan);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.no-space-empty-link:hover {
  color: #8ee4ff;
}

.session-badge {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  max-width: none;
  text-align: center;
  white-space: nowrap;
}

.session-badge-square {
  color: var(--accent-cyan);
}

.session-badge-group {
  color: #8ee4ff;
}

.session-badge-muted {
  color: var(--text-muted);
  border-color: var(--border-grey);
  background: var(--surface-raised);
}

.main-stage-section,
.main-video-section {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 0.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  /* Clear Studio dock so tiles aren't covered (YT composite never includes the dock) */
  padding: 0;
  padding-bottom: calc(5.75rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

.self-media-source {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
  z-index: -1;
}

.self-media-source video#webcam-feed {
  width: 2px;
  height: 2px;
  display: block;
  object-fit: cover;
}

.main-stage-grid {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 12rem;
}

.main-stage-grid[data-count="1"] {
  grid-template-columns: 1fr;
  max-width: var(--main-frame-size);
}

/* Empty stage: quiet — no dashed box, no “Stage is empty…” copy (admins know). */
.main-stage-grid.is-empty {
  min-height: 0;
  border: none;
  color: transparent;
  font-size: 0;
}
.main-stage-grid.is-empty::after {
  content: none;
  display: none;
}

#view-home.is-home-hub .video-call-layout,
#view-home.is-home-hub .peer-strip {
  display: none !important;
}

#view-home.is-home-hub .app-boot-status {
  display: none;
}

.camera-transition-status {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-cyan);
  text-align: center;
  letter-spacing: 0.04em;
}

.camera-transition-status[hidden] {
  display: none;
}

/* TEMP camera debug — asleep by default (opt-in ?cameraDebug=1); hide when sleeping */
#camera-debug-panel[data-camera-debug="sleep"],
#camera-debug-panel[hidden] {
  display: none !important;
}

/* TEMP — re-enable with CameraDebugModule opt-in only */
.camera-debug-panel {
  position: fixed;
  left: 12px;
  bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 100050;
  width: min(320px, calc(100vw - 24px));
  max-height: min(42vh, 320px);
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed rgba(0, 229, 255, 0.45);
  border-radius: 8px;
  background: rgba(8, 12, 14, 0.96);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.camera-debug-panel:not(.camera-debug-panel--collapsed) {
  width: min(440px, calc(100vw - 24px));
  max-height: min(72dvh, calc(100dvh - 5rem));
  cursor: default;
}

.camera-debug-panel.is-above-peer-strip {
  bottom: var(--camera-debug-bottom, 220px);
}

.camera-debug-panel[hidden] {
  display: none;
}

.camera-debug-panel[data-level="ok"] {
  border-color: rgba(76, 175, 80, 0.65);
}

.camera-debug-panel[data-level="warn"] {
  border-color: rgba(255, 193, 7, 0.65);
}

.camera-debug-header {
  margin: 0;
  flex: 0 0 auto;
}

.camera-debug-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.camera-debug-toggle-btn {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent-cyan);
  cursor: pointer;
}

.camera-debug-toggle-btn:hover {
  background: rgba(0, 229, 255, 0.16);
}

.camera-debug-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  cursor: default;
  padding-right: 0.15rem;
}

.camera-debug-title {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.camera-debug-timer {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-color);
}

.camera-debug-display {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted, #8a8a9a);
}

.camera-debug-storm {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: #b42318;
}

.camera-debug-events-live {
  margin: 0 0 0.65rem;
  padding: 0.4rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.camera-debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.camera-debug-clear-rounds {
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  min-height: auto;
}

.camera-debug-panel[data-level="fail"] {
  border-color: #b42318;
  box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.35);
}

.camera-debug-rounds-history li[data-end="pipeline-battle"],
.camera-debug-rounds-history li[data-storm="1"] {
  color: #b42318;
  font-weight: 600;
}

.camera-debug-round {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.camera-debug-rounds-title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.camera-debug-rounds-history {
  margin: 0 0 0.65rem;
  padding-left: 1.25rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-color);
  max-height: 6.5rem;
  overflow-y: auto;
}

.camera-debug-rounds-history li {
  margin: 0.15rem 0;
}

.camera-debug-rounds-history li[data-end="desync"] {
  color: #ffab91;
}

.camera-debug-rounds-history li[data-end="force-release"] {
  color: #ffd43b;
}

.camera-debug-panel--collapsed .camera-debug-rounds-title,
.camera-debug-panel--collapsed .camera-debug-rounds-history {
  display: none;
}

.camera-debug-collapse-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.85;
}

.camera-debug-panel--collapsed .camera-debug-body {
  display: none;
}

.camera-debug-panel:not(.camera-debug-panel--collapsed) .camera-debug-collapse-hint {
  display: none;
}

.camera-debug-panel--collapsed {
  padding-bottom: 0.5rem;
}

.camera-debug-signals {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.camera-debug-signal {
  margin: 0.12rem 0;
}

.camera-debug-signal--pass {
  color: #8ce99a;
}

.camera-debug-signal--fail {
  color: #ffab91;
}

.camera-debug-verdict {
  margin: 0;
  font-weight: 600;
  color: var(--text-color);
}

.camera-debug-copy-report,
.camera-debug-force-release {
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  min-height: auto;
}

.camera-debug-panel--collapsed .camera-debug-display,
.camera-debug-panel--collapsed .camera-debug-storm,
.camera-debug-panel--collapsed .camera-debug-events-live {
  display: none;
}

.main-stage-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 36rem;
}

.main-stage-grid[data-count="3"],
.main-stage-grid[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.main-stage-grid[data-count="5"],
.main-stage-grid[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 48rem;
}

.main-stage-grid[data-count="7"],
.main-stage-grid[data-count="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 52rem;
}

.main-stage-grid[data-count="9"],
.main-stage-grid[data-count="10"],
.main-stage-grid[data-count="11"],
.main-stage-grid[data-count="12"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 56rem;
}

.main-stage-grid[data-count="13"],
.main-stage-grid[data-count="14"],
.main-stage-grid[data-count="15"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: min(100%, calc(100vw - 1.5rem));
}

.stage-frame-shell .main-stage-grid[data-count] {
  max-width: none;
}

.main-stage-slot {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.main-stage-slot .frame-media.polygon-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface-raised);
  border: 2px solid var(--border-grey);
  box-shadow: 0 0 0 1px var(--border-subtle), 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.main-stage-slot .frame-media.polygon-frame > video,
.main-stage-slot .frame-media.polygon-frame > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.main-slot-remove-zone {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.65rem;
  height: 1.65rem;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.2rem;
  pointer-events: auto;
}

/* Soft-visible × — keep small (global 44px button rule must not win here) */
.main-slot-remove {
  opacity: 0.55;
  pointer-events: auto;
  width: 1.05rem !important;
  height: 1.05rem !important;
  min-width: 1.05rem !important;
  min-height: 1.05rem !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: rgba(14, 16, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.18s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.frame-media.polygon-frame:hover .main-slot-remove,
.main-slot-remove-zone:hover .main-slot-remove,
.main-slot-remove:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.main-slot-remove:hover,
.main-slot-remove:focus-visible {
  color: rgba(255, 160, 160, 0.95);
  border-color: rgba(255, 140, 140, 0.55);
  background: rgba(40, 14, 14, 0.72);
  outline: none;
}

.call-control-btn--header:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.main-video-frame {
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  background: var(--surface-raised);
  border: 2px solid var(--border-grey);
  box-shadow: 0 0 0 1px var(--border-subtle), 0 12px 40px rgba(0, 0, 0, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.main-video-frame.main-swap-flash {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 24px var(--accent-cyan-dim), 0 12px 40px rgba(0, 0, 0, 0.55);
}

.main-stage-slot.main-stage-slot-focus {
  animation: main-stage-focus-pulse 0.7s ease;
}

@keyframes main-stage-focus-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 1px var(--border-subtle), 0 8px 28px rgba(0, 0, 0, 0.45);
  }
  35% {
    transform: scale(1.02);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 24px var(--accent-cyan-dim), 0 12px 36px rgba(0, 0, 0, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px var(--border-subtle), 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

.frame-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.frame-media video,
.frame-media img {
  width: 100%;
  height: 100%;
  display: block;
  background: #0a0a0a;
}

/* Video frame fit — default fill (cover, edge-to-edge); toggle Fit in Live Session Preferences */
body:not([data-vp-video-frame-fit="fit"]) .video-call-layout .main-stage-grid .frame-media video,
body:not([data-vp-video-frame-fit="fit"]) .video-call-layout .main-stage-grid .frame-media img,
body:not([data-vp-video-frame-fit="fit"]) .stage-frame-shell .main-stage-grid .frame-media video,
body:not([data-vp-video-frame-fit="fit"]) .stage-frame-shell .main-stage-grid .frame-media img,
body:not([data-vp-video-frame-fit="fit"]) .video-call-layout .participant-frame .frame-media video,
body:not([data-vp-video-frame-fit="fit"]) .video-call-layout .participant-frame .frame-media img {
  object-fit: cover;
  object-position: center 38%;
}

body[data-vp-video-frame-fit="fit"] .video-call-layout .main-stage-grid .frame-media video,
body[data-vp-video-frame-fit="fit"] .video-call-layout .main-stage-grid .frame-media img,
body[data-vp-video-frame-fit="fit"] .stage-frame-shell .main-stage-grid .frame-media video,
body[data-vp-video-frame-fit="fit"] .stage-frame-shell .main-stage-grid .frame-media img,
body[data-vp-video-frame-fit="fit"] .video-call-layout .participant-frame .frame-media video,
body[data-vp-video-frame-fit="fit"] .video-call-layout .participant-frame .frame-media img,
body[data-vp-video-frame-fit="fit"] .private-call-remote-video,
body[data-vp-video-frame-fit="fit"] .private-call-local-video,
body[data-vp-video-frame-fit="fit"] .private-call-stage-frame video,
body[data-vp-video-frame-fit="fit"] .participants-list .frame-media video,
body[data-vp-video-frame-fit="fit"] .participants-list .frame-media img {
  object-fit: contain !important;
  object-position: center center !important;
}

body:not([data-vp-video-frame-fit="fit"]) .private-call-remote-video,
body:not([data-vp-video-frame-fit="fit"]) .private-call-local-video,
body:not([data-vp-video-frame-fit="fit"]) .private-call-stage-frame video,
body:not([data-vp-video-frame-fit="fit"]) .participants-list .frame-media video,
body:not([data-vp-video-frame-fit="fit"]) .participants-list .frame-media img {
  object-fit: cover !important;
  object-position: center 38% !important;
}

.stage-cog-section-title--spaced {
  margin-top: 0.85rem;
}

body:not([data-vp-video-frame-fit="fit"]) .main-stage-slot .frame-media.polygon-frame,
body:not([data-vp-video-frame-fit="fit"]) .participant-frame .frame-media {
  padding: 0;
}

/* Past Feeds playback + future video messages */
body:not([data-vp-video-frame-fit="fit"]) .vp-playback-media,
body:not([data-vp-video-frame-fit="fit"]) .past-feeds-playback-player mux-player,
body:not([data-vp-video-frame-fit="fit"]) .vp-inbox-video-media {
  --media-object-fit: cover;
  --media-object-position: center 38%;
  object-fit: cover;
  object-position: center 38%;
}

body[data-vp-video-frame-fit="fit"] .vp-playback-media,
body[data-vp-video-frame-fit="fit"] .past-feeds-playback-player mux-player,
body[data-vp-video-frame-fit="fit"] .vp-inbox-video-media {
  --media-object-fit: contain;
  --media-object-position: center center;
  object-fit: contain;
  object-position: center center;
}

.video-frame-fit-heading {
  margin-top: 1.15rem;
}

.frame-media video.selfie-mirror {
  transform: scaleX(-1);
}

.main-stage-grid.is-go-live-preview .main-stage-slot[data-participant-id="self"] .frame-media.polygon-frame {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px var(--accent-cyan-dim), 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* In-tile badge stack: VidPlaza.Live (cyan) above display name — bottom-left
   z-index above video/img (1) so VPL stage matches Mux burn-in. */
.vp-tile-badge-stack {
  position: absolute;
  bottom: 0.28rem;
  left: 0.28rem;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  max-width: calc(100% - 1.6rem);
  pointer-events: none;
}
.vp-tile-badge-stack--stage {
  z-index: 16 !important;
}

.vp-tile-badge-stack--expand {
  bottom: 0.65rem;
  left: 0.65rem;
  max-width: min(70%, 16rem);
  z-index: 6;
}

/* Brand chip — VidPlaza (cyan bold) + .Live (white)
   Sizes (readable, small tiles): brand ~11–12px · name ~12–13px desktop; tighter on phone. */
.vp-brand-chip {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  padding: 0.1rem 0.32rem 0.1rem 0.28rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.38);
  background: linear-gradient(
    105deg,
    rgba(4, 22, 34, 0.94) 0%,
    rgba(8, 18, 28, 0.9) 100%
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(0, 229, 255, 0.06);
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}

.vp-brand-chip-name {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-cyan, #00e5ff);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.vp-brand-chip-tld {
  font-weight: 700;
  color: #f4fbff;
  letter-spacing: 0.01em;
}

.vp-tile-badge-stack--expand .vp-brand-chip {
  font-size: 0.75rem; /* 12px on expand */
  padding: 0.14rem 0.4rem 0.14rem 0.35rem;
}

/* Name row under brand chip (inside stack) */
.vp-tile-badge-stack .frame-label,
.vp-tile-badge-stack .stage-name-badge,
.vp-tile-badge-stack .feed-name-badge {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0.14rem 0.38rem 0.14rem 0.32rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-left: 2px solid var(--accent-cyan, #00e5ff);
  background: linear-gradient(
    105deg,
    rgba(6, 28, 40, 0.92) 0%,
    rgba(10, 22, 34, 0.88) 100%
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 229, 255, 0.08);
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #f4fbff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  line-height: 1.2;
}

/* Standalone fallback (legacy single badge without stack) */
.frame-label,
.stage-name-badge {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  right: auto;
  transform: none;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 2.4rem);
  margin: 0;
  padding: 0.28rem 0.55rem 0.28rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-left: 3px solid var(--accent-cyan, #00e5ff);
  background: linear-gradient(
    105deg,
    rgba(6, 28, 40, 0.92) 0%,
    rgba(10, 22, 34, 0.88) 100%
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 229, 255, 0.08);
  font-size: 0.75rem; /* 12px — match stack name row */
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #f4fbff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  line-height: 1.2;
}

.vp-tile-badge-stack .frame-label,
.vp-tile-badge-stack .stage-name-badge {
  position: static;
  bottom: auto;
  left: auto;
}

/* Phone / short landscape: tiny tags so face is not covered (Vinny stage shot) */
@media (max-width: 768px), (max-height: 520px) {
  .vp-tile-badge-stack {
    bottom: 0.12rem;
    left: 0.12rem;
    gap: 0.05rem;
    max-width: min(72%, 5.5rem);
  }

  .vp-brand-chip {
    font-size: 0.5rem; /* 8px */
    padding: 0.04rem 0.16rem 0.04rem 0.14rem;
    border-radius: 2px;
  }

  .vp-tile-badge-stack .frame-label,
  .vp-tile-badge-stack .stage-name-badge,
  .vp-tile-badge-stack .feed-name-badge,
  .frame-label,
  .stage-name-badge {
    font-size: 0.5625rem; /* 9px */
    padding: 0.05rem 0.2rem 0.05rem 0.16rem;
    border-radius: 2px;
    border-left-width: 1.5px;
  }

  .main-slot-remove-zone {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.12rem;
  }

  .main-slot-remove {
    width: 0.95rem !important;
    height: 0.95rem !important;
    min-width: 0.95rem !important;
    min-height: 0.95rem !important;
    font-size: 0.65rem;
  }

  /* Camera debug: hide on small / short viewports (dev-only box; not product UI) */
  #camera-debug-panel {
    display: none !important;
  }
}

/* Landscape short: same [ ☰ ] [ Square ] VidPlaza chrome as phone */
@media (max-height: 520px) and (min-width: 769px) {
  .nav-mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .nav-spaces-wrap,
  .nav-desktop-tools {
    display: none !important;
  }

  .nav-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
  }

  .nav-mobile-header-square {
    display: inline-flex !important;
  }

  .nav-mobile-header-square[hidden] {
    display: none !important;
  }

  /* Match vertical: brand left, then ☰ Square customs (not centered brand) */
  #nav-bar .nav-brand {
    flex: 0 0 auto !important;
    text-align: left !important;
    order: 0;
  }

  .nav-left {
    justify-content: flex-start;
  }

  .nav-mobile-menu-btn { order: 1; }
  .nav-mobile-header-square { order: 2; }
  .nav-mobile-header-customs { order: 3; }

  .nav-mobile-header-customs:not([hidden]) {
    display: flex !important;
  }

  #nav-bar {
    padding: 0.3rem max(0.5rem, env(safe-area-inset-right)) 0.3rem
      max(0.5rem, env(safe-area-inset-left));
    padding-top: max(0.3rem, env(safe-area-inset-top));
  }

  .peer-strip-heading {
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.35rem 0.5rem;
  }

  .peer-strip-heading .call-control-btn,
  .peer-strip-heading .pull-all-toggle-btn {
    min-width: 0;
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
  }
}

.stage-name-badge-text,
.frame-label .stage-name-badge-text,
.frame-label .name-line-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: #f4fbff;
  text-transform: none;
  font-weight: 700;
}

.frame-label .name-line {
  max-width: 100%;
  text-transform: none;
}

/* Hide legacy chips if any sneak onto the in-tile badge */
.stage-name-badge .webmaster-badge,
.stage-name-badge .beta-badge,
.frame-label.stage-name-badge .webmaster-badge,
.frame-label.stage-name-badge .beta-badge {
  display: none !important;
}

/* Future vault-combo toggle can set data-name-badge="off" to hide */
.stage-frame-shell[data-name-badge="off"] .vp-tile-badge-stack,
.stage-frame-shell[data-name-badge="off"] .stage-name-badge,
.stage-frame-shell[data-name-badge="off"] .frame-label,
[data-name-badge="off"].stage-name-badge,
[data-name-badge="off"].vp-tile-badge-stack {
  display: none !important;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(160deg, #1a1a1a 0%, #0f0f0f 100%);
  color: var(--text-muted);
  text-align: center;
  padding: 0.75rem;
}

.video-placeholder .placeholder-icon {
  font-size: 1.4rem;
  color: var(--accent-cyan);
  opacity: 0.7;
  line-height: 1;
}

.video-placeholder .placeholder-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.self-placeholder p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.self-placeholder button {
  padding: 8px 16px;
  background: var(--accent-cyan);
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

/* Call controls — Mute / Camera Off */
.call-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: nowrap;
}

.call-control-btn {
  padding: 0.65rem 1.5rem;
  min-width: 7.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}

.call-control-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan-dim);
}

.call-control-btn[aria-pressed="true"] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
}

.call-control-go-live.is-live,
.call-control-go-live[aria-pressed="true"] {
  border-color: #ff5252;
  color: #fff;
  background: rgba(255, 82, 82, 0.2);
  box-shadow: 0 0 14px rgba(255, 82, 82, 0.25);
}

.call-control-go-live.is-live:hover {
  border-color: #ff8a80;
  color: #fff;
}

.call-control-btn:disabled,
.call-control-btn.is-controls-locked,
.call-control-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Soft-lock stays mouse-clickable so we can explain Join Square / HTTPS. */
.call-control-btn.is-controls-locked {
  cursor: help;
}

/* Overlay — do not push stage/frame shorter on Lenovo LAN (stage size stays shared). */
.vp-insecure-media-banner {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, 0.55);
  background: rgba(60, 45, 10, 0.94);
  color: #ffe9a8;
  font-size: 0.86rem;
  line-height: 1.4;
  width: min(36rem, calc(100vw - 1.5rem));
  max-width: min(36rem, calc(100vw - 1.5rem));
  z-index: 100200;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.vp-insecure-media-banner strong {
  color: #ffd54f;
}

.vp-insecure-media-banner code {
  font-size: 0.82em;
  color: #fff3c4;
}

#video-controls {
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Connection_Map SVG (hidden in call UI)
   -------------------------------------------------------------------------- */
#connection-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Peer strip — under session header
   -------------------------------------------------------------------------- */
.peer-strip {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  min-width: 0;
  flex: 0 0 auto;
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  box-sizing: border-box;
}

.peer-strip[hidden] {
  display: none;
}

.peer-strip-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color);
  cursor: pointer;
  white-space: nowrap;
}

.peer-strip-waiting {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

/*
 * Row 1 (top strip heading) — single row:
 *   LEFT  — Live participants + Minimize
 *   MID   — Private group / Invite only (+ 18+ / LIVE chips)
 *   RIGHT — Mute all / On stage / Pull all
 * Row 2 (bottom) lives in .stage-session-dock under the stage (studio / future sharescreen).
 */
.peer-strip-view {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  column-gap: 0.45rem;
}

.peer-strip-view-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.peer-strip-view-zone--lead {
  grid-column: 1;
  justify-self: start;
  justify-content: flex-start;
}

.peer-strip-view-zone--mid {
  grid-column: 2;
  justify-self: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.peer-strip-view-zone--mid .session-badge {
  max-width: min(42vw, 14rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.peer-strip-view-trail-group {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding-right: 0.5rem;
}

.peer-strip-view-zone--trail {
  justify-content: flex-end;
}

.peer-strip-view-trail-group .peer-strip-meta {
  min-width: 0;
  flex-wrap: nowrap;
}

/* Bottom chrome: Studio/Hide pinned top-left of footer band (all viewports) */
.stage-bottom-chrome {
  position: fixed;
  left: 0.35rem;
  right: auto;
  bottom: calc(var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px) + 0.15rem);
  z-index: 55; /* above #app-footer (50) so Studio is always tappable */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.25rem;
  width: auto;
  max-width: calc(100vw - 0.7rem);
  margin: 0;
  padding: 0.15rem 0.2rem;
  box-sizing: border-box;
  background: transparent;
  pointer-events: none;
}

.stage-bottom-chrome .stage-session-dock {
  pointer-events: auto;
  margin: 0;
  margin-right: auto;
  width: auto;
  max-width: min(100vw - 0.75rem, 42rem);
}

/* Legacy tile bar — permanently retired from bottom chrome */
.stage-tile-size-bar--legacy,
#stage-tile-size-bar.stage-tile-size-bar--legacy {
  display: none !important;
}

.stage-tile-size-options--cog {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.stage-tile-size-options--cog .stage-tile-size-btn {
  flex: 1 1 auto;
  min-width: 4.5rem;
}

/* Studio / Hide — always high contrast (wallpaper + sharescreen can wash a pale pill) */
.stage-dock-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.65);
  background: rgba(6, 10, 16, 0.94);
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 229, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

/* Admin stage decor — flush under stage-frame-body, right-aligned; menus open down */
.stage-frame-shell .stage-admin-decor {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.28rem 0.4rem 0.35rem;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 229, 255, 0.12);
  background: rgba(6, 10, 16, 0.55);
  position: relative;
  z-index: 30;
  overflow: visible;
}
.stage-admin-decor[hidden] {
  display: none !important;
}
.stage-admin-decor-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.35rem;
  overflow: visible;
}
.stage-admin-menu {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}
.stage-admin-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent-cyan, #00e5ff);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.stage-admin-trigger:hover,
.stage-admin-menu.is-open .stage-admin-trigger {
  background: rgba(0, 229, 255, 0.14);
}
.stage-admin-trigger-icon {
  font-size: 0.65rem;
  opacity: 0.85;
}
/* Wallpaper / Sharescreen / Layout — parked with hover tip */
.stage-admin-menu--soon {
  position: relative;
}
.stage-admin-trigger--soon {
  opacity: 0.48;
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.72);
  background: rgba(15, 23, 42, 0.45);
}
.stage-admin-trigger--soon:hover,
.stage-admin-trigger--soon:focus-visible {
  opacity: 0.62;
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.88);
}
/* Custom CSS tooltip so “Coming soon” is readable (title alone is easy to miss) */
.stage-admin-menu--soon::after {
  content: "Coming soon — thank you for checking";
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 95;
  min-width: 11.5rem;
  max-width: 14rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(253, 230, 138, 0.45);
  background: rgba(12, 16, 24, 0.98);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.stage-admin-menu--soon:hover::after,
.stage-admin-menu--soon:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}
/* Lift-up panels — open above the pill so you don't scroll past Studio/footer */
.stage-admin-panel {
  position: absolute;
  right: 0;
  top: auto;
  bottom: calc(100% + 0.32rem);
  z-index: 80;
  min-width: 11.5rem;
  padding: 0.3rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(8, 12, 18, 0.98);
  /* Shadow opens upward (panel sits above the triggers) */
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* No inner scroll — group page scrolls instead */
  overflow: visible;
  max-height: none;
}
/* Style card: wider so Small · Default · Large fit one row */
.stage-admin-panel--style {
  min-width: 17.5rem;
  width: 17.5rem;
  max-width: min(17.5rem, calc(100vw - 1.25rem));
  padding: 0.45rem 0.45rem 0.5rem;
  gap: 0.35rem;
  z-index: 90; /* above fixed Studio / footer chrome */
}
.stage-admin-panel--wallpaper {
  /* Same throw-up as Style / Sharescreen / Layout (open above the pill) */
  top: auto;
  bottom: calc(100% + 0.32rem);
  min-width: 16.5rem;
  width: min(18rem, calc(100vw - 1.25rem));
  max-width: min(18rem, calc(100vw - 1.25rem));
  z-index: 120;
  /* Shadow opens upward */
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  overflow: visible;
}
.stage-admin-wallpaper-note {
  margin: 0 0.2rem 0.35rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.75);
}
/* Fit modes between Upload and Clear — always visible 4-way picker */
.stage-admin-wallpaper-fit {
  display: flex !important;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0.2rem 0 0.3rem;
  padding: 0.4rem 0.35rem 0.45rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(6, 12, 20, 0.75);
  visibility: visible !important;
  opacity: 1 !important;
}
.stage-admin-wallpaper-fit.is-disabled {
  opacity: 0.72 !important;
}
.stage-admin-wallpaper-fit-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(103, 232, 249, 0.9);
  padding: 0 0.15rem;
}
.stage-admin-wallpaper-fit-hint {
  margin: 0;
  padding: 0 0.15rem 0.1rem;
  font-size: 0.65rem;
  line-height: 1.3;
  color: rgba(148, 163, 184, 0.95);
}
.stage-admin-wallpaper-fit-hint.is-ready {
  color: rgba(167, 243, 208, 0.9);
}
.stage-admin-wallpaper-fit-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}
.stage-wallpaper-fit-btn {
  appearance: none;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.4rem 0.15rem 0.35rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(10, 16, 26, 0.95);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  pointer-events: auto;
}
.stage-wallpaper-fit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.stage-wallpaper-fit-btn:hover {
  border-color: rgba(0, 229, 255, 0.55);
  color: #fff;
  background: rgba(0, 36, 44, 0.85);
}
.stage-wallpaper-fit-btn.is-active,
.stage-wallpaper-fit-btn[aria-pressed="true"] {
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 48, 56, 0.9);
  color: #67e8f9;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.2);
}
.stage-wallpaper-fit-name {
  line-height: 1.1;
  white-space: nowrap;
}
/* Shape previews — square/rect glyphs for cover/contain/center/tile */
.stage-wallpaper-fit-icon {
  position: relative;
  width: 1.55rem;
  height: 1.15rem;
  border-radius: 0.15rem;
  border: 1px solid rgba(125, 211, 252, 0.55);
  background: rgba(15, 23, 42, 0.9);
  box-sizing: border-box;
  flex-shrink: 0;
}
.stage-wallpaper-fit-icon--cover::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 0.08rem;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.75), rgba(56, 189, 248, 0.45));
}
.stage-wallpaper-fit-icon--contain::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 10%;
  bottom: 10%;
  border-radius: 0.06rem;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.7), rgba(56, 189, 248, 0.4));
}
.stage-wallpaper-fit-icon--center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 48%;
  transform: translate(-50%, -50%);
  border-radius: 0.06rem;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.75), rgba(56, 189, 248, 0.45));
}
.stage-wallpaper-fit-icon--tile {
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.75), rgba(56, 189, 248, 0.4)) 2px 2px / calc(50% - 3px) calc(50% - 3px) no-repeat,
    linear-gradient(135deg, rgba(0, 229, 255, 0.55), rgba(56, 189, 248, 0.35)) right 2px top 2px / calc(50% - 3px) calc(50% - 3px) no-repeat,
    linear-gradient(135deg, rgba(0, 229, 255, 0.6), rgba(56, 189, 248, 0.35)) 2px bottom 2px / calc(50% - 3px) calc(50% - 3px) no-repeat,
    linear-gradient(135deg, rgba(0, 229, 255, 0.75), rgba(56, 189, 248, 0.45)) right 2px bottom 2px / calc(50% - 3px) calc(50% - 3px) no-repeat,
    rgba(15, 23, 42, 0.9);
}
.stage-wallpaper-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.stage-admin-panel[hidden] {
  display: none !important;
}
.stage-admin-item {
  appearance: none;
  border: none;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  padding: 0.42rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.stage-admin-item:hover {
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
}
.stage-admin-item--toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.stage-admin-toggle-state {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-cyan, #00e5ff);
  opacity: 0.9;
}
.stage-admin-item--sub {
  padding-left: 1rem;
  font-size: 0.74rem;
}
.stage-admin-item.is-active {
  background: rgba(0, 229, 255, 0.16);
  color: #fff;
}
.stage-admin-item.is-locked,
.stage-admin-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.stage-admin-chevron {
  margin-left: 0.35rem;
  opacity: 0.75;
  font-size: 0.7rem;
}
.stage-admin-style-section {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.stage-admin-style-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.78);
  padding: 0 0.15rem;
}
/* Text size: Small · Default · Large in one row */
.stage-admin-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.28rem;
  width: 100%;
}
.stage-admin-size-btn {
  appearance: none;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(0, 229, 255, 0.06);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.48rem 0.2rem;
  border-radius: 0.4rem;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
}
.stage-admin-size-btn:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.14);
  color: #fff;
}
.stage-admin-size-btn.is-active {
  background: rgba(0, 229, 255, 0.22);
  border-color: rgba(0, 229, 255, 0.55);
  color: #fff;
}
.stage-admin-size-btn.is-locked,
.stage-admin-size-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Font list: opens down under Font style, same width as Style card (vertical list) */
.stage-admin-font-row {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.stage-admin-item--fly {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stage-admin-font-flyout {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Full list visible — no inner scrollbar; group page scrolls the Style card */
  max-height: none;
  overflow: visible;
  margin-top: 0.2rem;
  padding: 0.25rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(6, 10, 16, 0.98);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.stage-admin-font-flyout[hidden] {
  display: none !important;
}
.stage-admin-item--font {
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.48rem 0.55rem;
}
.stage-admin-lock-note {
  margin: 0.25rem 0.2rem 0.1rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #fde68a;
}

/*
 * When Style is open, let the panel paint past the shell (tiles still clip in body)
 * and grow page scroll room so VPL/Name are not stuck behind footer/Studio.
 */
.stage-frame-shell:has(.stage-admin-menu.is-open),
.stage-frame-shell[data-tile-size="standard"]:has(.stage-admin-menu.is-open),
.stage-frame-shell[data-tile-size="signing"]:has(.stage-admin-menu.is-open) {
  overflow: visible !important;
}
.stage-frame-center-wrap:has(.stage-admin-menu.is-open) {
  overflow: visible !important;
}
body.stage-admin-style-open .main-stage-section {
  padding-bottom: calc(
    var(--vp-style-scroll-pad, 16rem)
    + var(--footer-height, 3rem)
    + env(safe-area-inset-bottom, 0px)
  ) !important;
}

/* Name tag size / font (admin Style) — default & large stepped up for readability */
html[data-vp-tag-size="small"] .vp-tile-badge-stack .vp-brand-chip {
  font-size: 0.6875rem; /* 11px */
}
html[data-vp-tag-size="small"] .vp-tile-badge-stack .frame-label,
html[data-vp-tag-size="small"] .vp-tile-badge-stack .stage-name-badge {
  font-size: 0.75rem; /* 12px */
}
html[data-vp-tag-size="default"] .vp-tile-badge-stack .vp-brand-chip,
html:not([data-vp-tag-size]) .vp-tile-badge-stack .vp-brand-chip {
  font-size: 0.9375rem; /* 15px — was 13px */
  padding: 0.16rem 0.44rem 0.16rem 0.38rem;
}
html[data-vp-tag-size="default"] .vp-tile-badge-stack .frame-label,
html[data-vp-tag-size="default"] .vp-tile-badge-stack .stage-name-badge,
html:not([data-vp-tag-size]) .vp-tile-badge-stack .frame-label,
html:not([data-vp-tag-size]) .vp-tile-badge-stack .stage-name-badge {
  font-size: 1rem; /* 16px — was 14px */
  padding: 0.18rem 0.46rem 0.18rem 0.4rem;
}
html[data-vp-tag-size="large"] .vp-tile-badge-stack .vp-brand-chip {
  font-size: 1.125rem; /* 18px — was 16px */
  padding: 0.2rem 0.52rem 0.2rem 0.44rem;
}
html[data-vp-tag-size="large"] .vp-tile-badge-stack .frame-label,
html[data-vp-tag-size="large"] .vp-tile-badge-stack .stage-name-badge {
  font-size: 1.25rem; /* 20px — was 17px */
  padding: 0.22rem 0.54rem 0.22rem 0.46rem;
}
.vp-tile-badge-stack .vp-brand-chip,
.vp-tile-badge-stack .frame-label,
.vp-tile-badge-stack .stage-name-badge,
.vp-tile-badge-stack .feed-name-badge {
  font-family: var(--vp-tag-font, "Inter", system-ui, sans-serif);
}
.vp-tile-badge-stack[data-show-vpl="0"] .vp-brand-chip {
  display: none !important;
}
.vp-tile-badge-stack[data-show-name="0"] .frame-label,
.vp-tile-badge-stack[data-show-name="0"] .stage-name-badge,
.vp-tile-badge-stack[data-show-name="0"] .feed-name-badge {
  display: none !important;
}

.stage-dock-toggle:hover,
.stage-dock-toggle:focus-visible {
  background: rgba(0, 40, 48, 0.98);
  border-color: rgba(0, 229, 255, 0.9);
  color: #a5f3fc;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(0, 229, 255, 0.35);
}

/* Minimized = only a floating Studio tab (bar disappears for stage viewing) */
.stage-session-dock.is-minimized .stage-session-dock-controls {
  display: none !important;
}

.stage-session-dock.is-minimized {
  width: auto;
  max-width: none;
  margin: 0;
  margin-left: 0.35rem;
  margin-right: auto; /* left-bottom Studio tab near footer */
  padding: 0.15rem;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start;
  z-index: 60;
}

.stage-session-dock.is-minimized .stage-dock-toggle {
  margin: 0;
  padding: 0.5rem 1rem;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 229, 255, 0.35);
  background: rgba(6, 10, 16, 0.96);
  border: 1px solid rgba(0, 229, 255, 0.7);
  color: #67e8f9;
}

/* Expanded dock: HIDE pill stays readable over blood/wallpaper wash */
.stage-session-dock:not(.is-minimized) .stage-dock-toggle {
  background: rgba(6, 10, 16, 0.96);
  border-color: rgba(0, 229, 255, 0.7);
  color: #67e8f9;
  z-index: 2;
}

.stage-session-dock {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
}

/*
 * Keep Studio dock from covering stage tiles (VPL local view).
 * Mux/YT composite never includes the dock — that is why YT looked “taller”
 * while VPL looked cut off at the bottom.
 */
.main-stage-section {
  padding-bottom: calc(5.75rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
body.stage-dock-minimized .main-stage-section {
  /* more room for video when studio dock is collapsed to a Studio tab */
  padding-bottom: calc(2.75rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
}

/* Bottom session dock — Studio/Hide + controls; shell itself is clear (no full-width black stripe) */
.stage-session-dock {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.2rem 0.35rem;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 0.35rem;
}

.stage-session-dock-controls,
.stage-session-dock .peer-strip-view-center {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
  /* Dark chrome only around the control chips — not a full-width stripe */
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  scroll-padding-inline: 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  background: linear-gradient(180deg, rgba(12, 16, 22, 0.92) 0%, rgba(8, 10, 14, 0.88) 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* When dock is minimized, hide the controls chrome entirely (Studio tab only) */
.stage-session-dock.is-minimized .stage-session-dock-controls,
.stage-session-dock.is-minimized .peer-strip-view-center {
  display: none !important;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.stage-session-dock-controls > *,
.stage-session-dock .peer-strip-view-center > * {
  flex: 0 0 auto;
}

/* Label long/short variants (mobile uses short) */
.peer-strip-label-short,
.pull-all-label-short {
  display: none;
}

.peer-strip-label-long,
.pull-all-label-long {
  display: inline;
}

.peer-strip-view-divider {
  flex: 0 0 auto;
  padding: 0 0.35rem;
  color: var(--border-grey);
  font-size: 0.82rem;
  line-height: 1;
  user-select: none;
}

.peer-strip-view-divider[hidden] {
  display: none;
}

.peer-strip-inline-divider {
  color: var(--border-grey);
  font-size: 0.82rem;
  line-height: 1;
  user-select: none;
  flex: 0 0 auto;
}

.peer-strip-inline-divider[hidden] {
  display: none;
}

.peer-strip-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.peer-strip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  min-width: auto;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-grey);
  background: rgba(20, 20, 20, 0.85);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.peer-strip-toggle:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
}

.peer-strip-toggle:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.55);
  outline-offset: 2px;
}

.peer-strip-toggle-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.peer-strip-heading {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  min-height: 2.85rem;
  margin: 0;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.96) 0%, rgba(10, 10, 10, 0.55) 100%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
  transition: box-shadow 0.2s ease, padding 0.2s ease;
}

/* Desktop/default: scroll track grows; Pull stays pinned on the right */
.peer-strip-heading > .peer-strip-view {
  flex: 1 1 auto;
  min-width: 0;
}

.peer-strip-heading > .peer-strip-pull-pinned,
.peer-strip-heading > #btn-pull-all-toggle {
  flex: 0 0 auto;
  position: relative;
  z-index: 60;
  pointer-events: auto !important;
  cursor: pointer;
  min-height: 2.35rem;
  min-width: 6.75rem;
  white-space: nowrap;
}
.peer-strip {
  overflow-x: visible;
}
.peer-strip-heading {
  overflow: visible;
  position: relative;
  /* Reserve room so Pull all is never crushed by the scroll track */
  padding-right: max(1rem, 7.5rem);
}

.peer-strip.is-minimized .peer-strip-heading {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.peer-strip-body {
  padding: 0.55rem 1.25rem 0.75rem;
}

.peer-strip-body[hidden],
.peer-strip-body.is-collapsed,
.peer-strip.is-minimized .peer-strip-body {
  display: none !important;
}

#peer-strip.vp-skeleton-target .vp-skeleton-dot {
  top: 6px;
  bottom: auto;
  left: 6px;
  right: auto;
}

.peer-strip-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.participant-slot-counter {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pull-all-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.55);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pull-all-toggle-btn.is-pull-down,
.pull-all-toggle-btn[aria-pressed="true"] {
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
}

.pull-all-toggle-btn:hover {
  color: var(--text-color);
  border-color: rgba(0, 229, 255, 0.35);
}

.participant-slot-counter[hidden] {
  display: none;
}

.participants-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

.participants-scroll-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}

.participants-scroll {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 7.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-grey) transparent;
  padding: 0.25rem 0.25rem 0.65rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.participants-scroll::-webkit-scrollbar {
  height: 6px;
}

.participants-scroll::-webkit-scrollbar-thumb {
  background: var(--border-grey);
  border-radius: 3px;
}

.participants-scroll.is-scrollable {
  cursor: grab;
}

.participants-scroll.is-scrollable:active {
  cursor: grabbing;
}

.participants-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.85rem;
  align-items: flex-start;
  min-width: min-content;
  padding: 0.15rem 0.25rem;
}

.participants-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.5rem;
  margin: 0;
}

.participant-tile {
  flex: 0 0 auto;
  width: var(--peer-frame-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s ease;
}

/* On stage during Live: must beat display:flex so strip does not mirror stage tiles. */
.participant-tile.is-on-stage-in-strip,
.participant-tile.is-on-stage-in-strip[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.participant-tile.is-view-only {
  cursor: default;
}

.participant-tile:hover:not(.is-view-only) {
  transform: translateY(-2px);
}

.participant-tile.is-live .participant-frame {
  border-color: #ff5252;
  box-shadow: 0 0 16px rgba(255, 82, 82, 0.35);
}

.participant-tile.is-live:hover {
  transform: translateY(-3px);
}

.participant-tile.is-previewing .participant-frame {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan-dim);
}

.participant-tile.in-main-stage .participant-frame {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan-dim);
}

.participant-tile.is-live.in-main-stage .participant-frame {
  border-color: #ff8a80;
  box-shadow: 0 0 18px rgba(255, 82, 82, 0.4), 0 0 10px var(--accent-cyan-dim);
}

.participants-scroll.has-live-participants {
  scroll-padding-inline: 0.5rem;
}

.participant-tile.state-connected .participant-frame {
  border-color: rgba(0, 229, 255, 0.55);
}

.participant-tile.state-unconnected .participant-frame {
  border-color: var(--border-grey);
}

.participant-tile.is-camera-active .participant-frame {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan-dim);
}

.participant-tile-camera-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

.participant-tile-camera-btn {
  position: static;
  z-index: 3;
  padding: 0.2rem 0.45rem;
  min-height: auto;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(8, 12, 14, 0.88);
  color: var(--accent-cyan);
  cursor: pointer;
}

.participant-tile-camera-btn:hover {
  background: rgba(0, 229, 255, 0.12);
}

.participant-tile-camera-btn[aria-pressed="true"] {
  border-color: rgba(255, 152, 0, 0.55);
  color: #ffb74d;
}

.camera-active-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 100%;
  color: var(--accent-cyan);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.08) 0%, rgba(10, 10, 10, 0.95) 100%);
}

.camera-active-placeholder .placeholder-icon {
  color: var(--accent-cyan);
  font-size: 1.35rem;
  line-height: 1;
}

.camera-active-placeholder .placeholder-text {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-color);
}

.camera-active-placeholder .placeholder-sub {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  max-width: 12rem;
  text-align: center;
  color: var(--text-muted);
}

.participant-frame {
  width: var(--peer-frame-size);
  height: var(--peer-frame-size);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--surface-raised);
  border: 2px solid var(--border-grey);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.participant-frame .frame-media {
  inset: 2px;
}

.participant-tile.is-camera-active .participant-frame .frame-media,
.participant-tile .participant-frame .frame-media:has(video) {
  inset: 0;
}

.participant-name {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color);
  max-width: min(100%, calc(var(--peer-frame-size) + 2.5rem));
  text-align: center;
}

.participant-name .name-line {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.participant-name .webmaster-invisible-note {
  flex-basis: 100%;
  justify-content: center;
  margin-top: 0.12rem;
}

.participant-name .webmaster-invisible-note-text {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  max-width: 11rem;
}

.peer-name .name-line {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.peer-name .webmaster-invisible-note {
  flex-basis: 100%;
  justify-content: center;
}

.peer-name .webmaster-invisible-note-text {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 10rem;
}

.friend-search-name-row .webmaster-invisible-note {
  flex-basis: 100%;
}

.friend-search-name-row .webmaster-invisible-note-text {
  white-space: normal;
  line-height: 1.35;
}

.name-line {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
}

.name-line-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.webmaster-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c8f7ff;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 999px;
}

.beta-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f6e6ff;
  background: rgba(186, 104, 255, 0.16);
  border: 1px solid rgba(186, 104, 255, 0.42);
  border-radius: 999px;
}

.webmaster-invisible-note {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.webmaster-invisible-hint {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}

.webmaster-invisible-note-text {
  font-size: 0.62rem;
  line-height: 1.25;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.frame-label .name-line {
  text-transform: none;
}

.frame-label .name-line-text {
  text-transform: none;
}

.friend-search-name-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.friend-search-name-row .name-line {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
}

.participant-preview-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  padding: 0.15rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 229, 255, 0.85);
  border-radius: 4px;
}

.participant-live-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  padding: 0.12rem 0.4rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #ff5252;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.45);
}

.participant-mock-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  left: auto;
  z-index: 2;
  padding: 0.1rem 0.35rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0b1214;
  background: rgba(0, 229, 255, 0.88);
  border-radius: 4px;
}

.mux-live-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
  color: #fff;
  text-align: center;
  padding: 0.5rem;
}

.mux-live-preview mux-player {
  width: 100%;
  height: 100%;
}

.mux-sim-icon {
  font-size: 1.35rem;
  color: var(--accent-cyan);
}

.mux-sim-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.mux-sim-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.go-live-preview-bar {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.85);
  text-align: center;
}
/* When stage is popped out, pin preview bar over the stage (not buried under it) */
body.stage-viewport-expanded .go-live-preview-bar:not([hidden]),
.video-call-layout:fullscreen .go-live-preview-bar:not([hidden]),
.video-call-layout:-webkit-full-screen .go-live-preview-bar:not([hidden]) {
  position: fixed !important;
  left: 50% !important;
  bottom: max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 4rem)) !important;
  transform: translateX(-50%) !important;
  z-index: 220050 !important;
  width: min(44rem, calc(100vw - 1.5rem)) !important;
  max-width: calc(100vw - 1.5rem) !important;
  margin: 0 !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.past-feeds-save-dont-ask-status {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-muted, #a8b0c0);
}

.past-feeds-save-dont-ask {
  margin: 0.65rem 0 0.15rem;
  text-align: left;
}

.past-feeds-save-dont-ask-hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
}

.platform-connect-youtube-ingest {
  margin: 0.75rem 0 0.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(8, 18, 28, 0.55);
  text-align: left;
}

.platform-connect-ingest-intro,
.platform-connect-ingest-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.platform-connect-ingest-hint {
  margin: 0.45rem 0 0;
}

.go-live-preview-bar[hidden] {
  display: none;
}

.go-live-preview-hint {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.go-live-preview-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mux-preview-modal .modal-content {
  max-width: 520px;
}

.mux-preview-status {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.mux-preview-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--border-subtle);
  margin-bottom: 1rem;
}

.mux-preview-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mux-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  text-align: center;
}

.mux-preview-placeholder[hidden] {
  display: none;
}

.mux-stream-modal .modal-content {
  max-width: 34rem;
}

.mux-stream-modal label {
  display: block;
  margin: 0.75rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mux-stream-mode {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.mux-copy-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.mux-copy-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  color: var(--text-color);
  font-size: 0.8rem;
}

.app-modal[hidden] {
  display: none !important;
}

.stripe-checkout-modal.app-modal {
  z-index: 100250;
  pointer-events: auto;
}

.stripe-checkout-modal .modal-content {
  width: min(100%, 420px);
  max-height: min(90vh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.stripe-checkout-modal .modal-backdrop {
  z-index: 1;
  pointer-events: auto;
}

.stripe-checkout-modal .modal-actions {
  position: relative;
  z-index: 5;
  margin-top: 0.75rem;
  pointer-events: auto;
  isolation: isolate;
}

.stripe-checkout-modal .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.stripe-checkout-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  color: #aaa;
  font-size: 0.9rem;
}

.stripe-checkout-loading[hidden] {
  display: none !important;
}

.stripe-checkout-form {
  width: 100%;
  margin: 0;
}

.stripe-checkout-save-card {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.35rem 0 0.15rem;
  font-size: 0.9rem;
  color: var(--text-secondary, #bbb);
  cursor: pointer;
}

.stripe-checkout-save-card input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 0.85rem;
  height: 0.85rem;
  min-width: 0.85rem;
  min-height: 0.85rem;
  margin: 0.1rem 0 0;
  flex: 0 0 0.85rem;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.15rem;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  position: relative;
}

.stripe-checkout-save-card input[type="checkbox"]:checked {
  background-color: var(--settings-accent, #67e8f9);
  border-color: var(--settings-accent, #67e8f9);
}

.stripe-checkout-save-card input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  width: 0.2rem;
  height: 0.38rem;
  border: solid #0a0a0a;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.stripe-checkout-save-card input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--settings-accent, #67e8f9);
  outline-offset: 1px;
}

.stripe-checkout-save-hint {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted, #888);
}

.stripe-checkout-save-card input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.stripe-checkout-policy-agree--pre-pay {
  margin: 0.45rem 0 0.15rem;
}

.stripe-checkout-policy-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.65rem 0 0.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary, #bbb);
  cursor: pointer;
  line-height: 1.4;
}

.stripe-checkout-policy-agree input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 0.85rem;
  height: 0.85rem;
  min-width: 0.85rem;
  min-height: 0.85rem;
  margin: 0.15rem 0 0;
  flex: 0 0 0.85rem;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.15rem;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  position: relative;
}

.stripe-checkout-policy-agree input[type="checkbox"]:checked {
  background-color: var(--settings-accent, #67e8f9);
  border-color: var(--settings-accent, #67e8f9);
}

.stripe-checkout-policy-agree input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  width: 0.2rem;
  height: 0.38rem;
  border: solid #0a0a0a;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.stripe-payment-element {
  margin: 12px 0;
  min-height: 120px;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.stripe-payment-element.is-loading {
  visibility: hidden;
  min-height: 0;
  margin: 0;
}

.participant-main-badge {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

#peer-nodes-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  margin-top: 0;
}

.peer-node {
  width: var(--peer-frame-size);
  height: var(--peer-frame-size);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  background: var(--surface-raised);
  border: 2px solid var(--border-grey);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  padding-bottom: 1.25rem;
}

.peer-node:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 10px var(--accent-cyan-dim);
}

.peer-node:active {
  transform: scale(0.97);
  border-color: var(--accent-cyan);
}

.peer-node.peer-slot-active {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan-dim);
}

.peer-node.peer-swap-flash {
  border-color: var(--accent-cyan);
}

.peer-name {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* Four visually distinct peer states (Req 3.10) */
.state-unconnected    { border: 3px solid var(--border-grey); box-shadow: none; }
.state-pending-sent   { border: 3px dashed var(--accent-amber); box-shadow: 0 0 8px rgba(255,193,7,0.4); }
.state-pending-received { border: 3px solid var(--accent-blue); box-shadow: 0 0 8px rgba(33,150,243,0.5); animation: pulse 1000ms ease-in-out infinite; }
.state-connected      { border: 3px solid var(--accent-cyan); box-shadow: 0 0 14px rgba(0,229,255,0.6); }

/* Peer states via data-state attribute (ConnectionModule) — Req 3.4, 3.6 */
.peer-node[data-state="unconnected"] { border: 3px solid var(--border-grey); box-shadow: none; }
.peer-node[data-state="pending"]     { border: 3px dashed var(--accent-amber); box-shadow: 0 0 8px rgba(255,193,7,0.4); }
.peer-node[data-state="connected"]   { border: 3px solid var(--accent-cyan); box-shadow: 0 0 14px rgba(0,229,255,0.6); }

.settings-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}

/* Peer info overlay */
.peer-overlay {
  position: absolute;
  z-index: 20;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  padding: 14px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

#peer-overlay-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#btn-connect {
  padding: 8px 18px;
  background: var(--accent-cyan);
  border: none;
  border-radius: 4px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  min-width: 44px;
  min-height: 44px;
  transition: opacity 0.15s;
}

#btn-connect:hover {
  opacity: 0.85;
}

.peer-node .peer-name {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   App Modals (approval, Square join warning, Live title, confirms, etc.)
   Must sit ABOVE stage pop-out (11500) and Studio dock (11600).
   Fullscreen hosts still need ModalLayerModule.present() reparent.
   -------------------------------------------------------------------------- */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 220000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#square-join-modal {
  z-index: 1001;
}

.app-modal .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: -1;
}

.app-modal .modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--border-grey);
  border-radius: 10px;
  padding: 32px 36px;
  min-width: 300px;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.app-modal h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.app-modal p {
  font-size: 0.92rem;
  color: #aaa;
  margin: 0;
  line-height: 1.5;
}

.app-modal .modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.app-modal .btn-primary {
  padding: 10px 24px;
  background: var(--accent-cyan);
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  transition: opacity 0.15s;
}

.app-modal .btn-primary:hover {
  opacity: 0.85;
}

.app-modal .btn-secondary {
  padding: 10px 24px;
  background: #333;
  color: var(--text-color);
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.app-modal .btn-secondary:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.app-modal .btn-danger {
  padding: 10px 24px;
  background: #ff5252;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  transition: opacity 0.15s;
}

/* In-app text prompt (layout Name & save, etc.) — no browser window.prompt */
.app-confirm-input-wrap {
  display: block;
  margin: 0.35rem 0 0.75rem;
}
.app-confirm-input-wrap[hidden] {
  display: none !important;
}
.app-confirm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(8, 14, 22, 0.95);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}
.app-confirm-input:focus {
  outline: 2px solid rgba(0, 229, 255, 0.55);
  outline-offset: 1px;
  border-color: rgba(0, 229, 255, 0.7);
}
.app-confirm-input-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
}

.app-modal .btn-danger:hover {
  opacity: 0.88;
}

.modal-content-warning h3 {
  color: #ff8a80;
}

#groups-delete-modal {
  z-index: 1001;
}

#square-join-modal .modal-content {
  text-align: left;
  align-items: stretch;
}

#square-join-modal #square-join-title {
  color: var(--accent-cyan);
}

#square-join-modal #square-join-message {
  color: var(--text-muted);
}

#square-join-modal .modal-actions {
  justify-content: flex-end;
}

/* Camera-off thumbnail in main frame and peer tiles */
.camera-off-thumbnail {
  position: relative;
  z-index: 2;
}

.self-participant-node {
  border: 3px solid var(--accent-cyan);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
  cursor: default;
}

.self-participant-node:hover,
.self-participant-node:active {
  transform: none;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
}

/* --------------------------------------------------------------------------
   Feed Area
   -------------------------------------------------------------------------- */
#feed-area {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.25rem 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  box-sizing: border-box;
}

.feed-viewport-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  flex-shrink: 1;
  box-sizing: border-box;
  padding: 12px;
  border: 2px solid rgba(0, 229, 255, 0.38);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(10, 16, 22, 0.96), rgba(6, 10, 14, 0.98)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 24px
    );
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.feed-viewport-frame--ghost {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

.feed-canvas-host {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: stretch;
}

.feed-viewport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-content: start;
  width: 100%;
  max-width: 100%;
  padding-right: 2px;
  padding-bottom: 8px;
}

.feed-empty-state {
  text-align: center;
  color: #666;
  padding: 60px 20px;
  font-size: 1rem;
}

/* Category group connector */
.category-group-border {
  position: absolute;
  border: 1px dashed rgba(0, 229, 255, 0.25);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Video Cards
   -------------------------------------------------------------------------- */
.video-card {
  position: relative;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  /* visible so corner select (card-root sibling of preview) stays clickable */
  overflow: visible;
}

.video-card .video-card-preview {
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.feed-viewport-grid .video-card {
  max-width: none;
  width: 100%;
  justify-self: stretch;
}

/* VidPlaza's Feeds cards: clip + readable meta (not anonymous video tiles) */
.video-card--video-only {
  padding: 0;
  background: var(--card-bg, #121820);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.video-card--video-only .video-card-preview {
  position: relative;
  border-radius: 8px 8px 0 0;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}

/* Video reply — person + play (bright cyan) in title row */
.video-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.video-card-title-row .video-card-title {
  flex: 1 1 auto;
  min-width: 0;
}

.video-card-title-row .feed-reply-btn {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
}

.feed-meta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

/* Bright cyan person+play — high contrast on dark tile meta */
.feed-reply-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.22rem 0.32rem;
  border-radius: 9px;
  border: 1px solid rgba(34, 211, 238, 0.75);
  background: rgba(6, 40, 58, 0.92);
  color: #22d3ee;
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
  font: inherit;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 10px rgba(34, 211, 238, 0.45);
  transition: color 0.15s, background 0.15s, transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}

.feed-reply-btn:hover,
.feed-reply-btn:focus-visible {
  border-color: #67e8f9;
  background: rgba(14, 116, 144, 0.95);
  color: #ecfeff;
  outline: none;
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.55), 0 0 14px rgba(103, 232, 249, 0.75);
}

.feed-reply-btn .feed-reply-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  stroke: currentColor;
}

/* Red ! — only when .has-reply-notify (unread replies for owner) */
.feed-reply-bang {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.12rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.9), 0 0 8px rgba(239, 68, 68, 0.75);
  pointer-events: none;
}

.feed-reply-btn.has-reply-notify .feed-reply-bang,
.feed-reply-bang:not([hidden]) {
  display: inline-flex;
}

.feed-reply-bang[hidden] {
  display: none !important;
}

.feed-reply-btn-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: inherit;
}

.feed-reply-btn--expand {
  margin-left: auto;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  flex: 0 0 auto;
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(8, 47, 73, 0.55);
}

.feed-reply-btn--expand .feed-reply-bang {
  top: -0.28rem;
  right: -0.28rem;
}

/* Grid must NOT host the reply dropdown (that was replybutton_dropdown).
   Replies only mount under #feed-expand-reply-host in the large player. */
.video-card.is-reply-open {
  /* legacy class cleaned — no grid expansion */
  z-index: auto;
  max-height: none;
  overflow: visible;
  border: none;
  box-shadow: none;
}

.feed-tile-reply-stack {
  display: block;
  border-top: 1px solid rgba(34, 211, 238, 0.28);
  background: linear-gradient(180deg, rgba(8, 22, 36, 0.98), rgba(6, 14, 24, 0.98));
}

.feed-tile-reply-stack[hidden] {
  display: none !important;
}

.feed-tile-reply-stack-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem 0.7rem;
}

.feed-tile-reply-stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.feed-tile-reply-stack-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a5f3fc;
  letter-spacing: 0.02em;
}

.feed-tile-reply-collapse {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  cursor: pointer;
  line-height: 1;
}

.feed-tile-reply-stack-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #94a3b8;
}

.feed-tile-reply-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.feed-tile-reply-empty {
  margin: 0;
  padding: 0.65rem 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.4);
}

.feed-tile-reply-empty[hidden] {
  display: none !important;
}

.feed-tile-reply-item {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 0.45rem;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.7);
  overflow: hidden;
}

.feed-tile-reply-item-media {
  position: relative;
  min-height: 4.5rem;
  background: #1e293b;
}

.feed-tile-reply-item-video {
  width: 100%;
  height: 100%;
  min-height: 4.5rem;
  object-fit: cover;
  display: block;
  background: #000;
}

.feed-tile-reply-item-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.45rem 0.4rem 0;
  min-width: 0;
}

.feed-tile-reply-item-name {
  font-size: 0.78rem;
  font-weight: 650;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-tile-reply-item-tag {
  font-size: 0.68rem;
  color: #67e8f9;
  font-weight: 600;
}

.feed-tile-reply-compose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.feed-tile-reply-record-open,
.feed-tile-reply-close {
  min-height: 2.15rem;
  font-size: 0.8rem;
}

.feed-tile-reply-status {
  margin: 0;
  min-height: 1.05rem;
  font-size: 0.72rem;
  color: #94a3b8;
}

/* Bigger self-record popout (only while recording / reviewing) */
/* Must honor [hidden] — display:flex would otherwise paint on hard-refresh before login. */
.feed-video-reply-record-backdrop[hidden],
.feed-video-reply-record-shell[hidden],
.feed-video-reply-record-backdrop:not(.is-open),
.feed-video-reply-record-shell:not(.is-open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Must sit ABOVE .app-modal (z-index 220000 !important) — expand player is an app-modal. */
.feed-video-reply-record-backdrop.is-open {
  position: fixed;
  inset: 0;
  z-index: 230600 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(2, 8, 16, 0.78);
  backdrop-filter: blur(3px);
}

.feed-video-reply-record-shell.is-open {
  position: fixed;
  z-index: 230610 !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(42rem, calc(100vw - 1.25rem));
  max-height: min(90vh, 36rem);
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: linear-gradient(165deg, rgba(10, 24, 38, 0.99), rgba(6, 12, 22, 0.99));
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6);
  color: #e8f4f8;
}

body.feed-video-reply-recording {
  overflow: hidden;
}

.feed-video-reply-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.feed-video-reply-record-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ecfeff;
}

.feed-video-reply-record-close {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.feed-video-reply-record-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.35;
}

.feed-video-reply-record-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: #000;
  aspect-ratio: 16 / 10;
  min-height: 14rem;
  max-height: 55vh;
}

.feed-video-reply-live,
.feed-video-reply-review {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.feed-video-reply-timer {
  position: absolute;
  left: 0.65rem;
  bottom: 0.55rem;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.9);
  color: #fecaca;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Record row: [Record / Stop / Post] | [owner auto-tag + friend multi-select] */
.feed-video-reply-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 0.75rem;
}

.feed-video-reply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-items: center;
}

.feed-video-reply-tag-panel {
  flex: 1 1 12rem;
  min-width: min(14rem, 100%);
  max-width: 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  background: rgba(6, 18, 32, 0.92);
}

.feed-video-reply-tag-owner {
  margin: 0;
  font-size: 0.76rem;
  color: #e2e8f0;
  line-height: 1.3;
}

.feed-video-reply-tag-owner-name {
  color: #67e8f9;
  font-weight: 700;
}

.feed-video-reply-tag-auto {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
}

.feed-video-reply-tag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.feed-video-reply-tag-label {
  font-size: 0.74rem;
  font-weight: 650;
  color: #a5f3fc;
}

.feed-video-reply-tag-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.feed-video-reply-tag-bulk-btn {
  min-height: 1.55rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(103, 232, 249, 0.4);
  background: rgba(8, 47, 73, 0.85);
  color: #a5f3fc;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
  line-height: 1.2;
}

.feed-video-reply-tag-bulk-btn:hover:not(:disabled) {
  border-color: #67e8f9;
  color: #ecfeff;
  background: rgba(14, 116, 144, 0.75);
}

.feed-video-reply-tag-bulk-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.feed-video-reply-tag-hint {
  margin: 0;
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.3;
}

.feed-video-reply-tag-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 6.5rem;
  overflow-y: auto;
  padding: 0.25rem;
  border-radius: 8px;
  border: 1px solid rgba(103, 232, 249, 0.25);
  background: rgba(2, 6, 23, 0.9);
}

.feed-video-reply-tag-list.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.feed-video-reply-tag-empty {
  margin: 0;
  padding: 0.35rem 0.25rem;
  font-size: 0.72rem;
  color: #94a3b8;
}

.feed-video-reply-tag-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: #e2e8f0;
  user-select: none;
  min-height: 1.75rem;
}

.feed-video-reply-tag-item:hover {
  background: rgba(14, 116, 144, 0.25);
}

.feed-video-reply-tag-check {
  /* Small but tappable — not tiny hit targets */
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  min-height: 1.15rem;
  accent-color: #22d3ee;
  flex: 0 0 auto;
  cursor: pointer;
  margin: 0;
}

.feed-video-reply-tag-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-video-reply-action {
  min-height: 2.4rem;
  min-width: 5.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.45rem 0.85rem;
  transition: filter 0.12s, transform 0.12s, opacity 0.12s;
}

.feed-video-reply-action:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.feed-video-reply-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Record / Re-record — light blue */
.feed-video-reply-action--record,
.feed-video-reply-action--retry {
  background: #7dd3fc;
  border-color: #38bdf8;
  color: #0c4a6e;
}

/* Stop — light red */
.feed-video-reply-action--stop {
  background: #fca5a5;
  border-color: #f87171;
  color: #7f1d1d;
}

/* Post reply — light green */
.feed-video-reply-action--post {
  background: #86efac;
  border-color: #4ade80;
  color: #14532d;
}

.feed-video-reply-status {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Reply item chrome: enlarge + delete */
.feed-tile-reply-item-media {
  position: relative;
}

.feed-tile-reply-item-chrome {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: flex;
  gap: 0.25rem;
  z-index: 2;
}

.feed-tile-reply-enlarge,
.feed-tile-reply-delete {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(2, 6, 23, 0.72);
  color: #e2e8f0;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.feed-tile-reply-enlarge:hover,
.feed-tile-reply-delete:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: #67e8f9;
  color: #ecfeff;
}

.feed-tile-reply-delete {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
  font-size: 1.05rem;
  font-weight: 700;
}

.feed-tile-reply-delete:hover {
  border-color: #f87171;
  color: #fee2e2;
  background: rgba(127, 29, 29, 0.75);
}

/* Enlarge lightbox for a reply video */
.feed-video-reply-lightbox {
  position: fixed;
  inset: 0;
  z-index: 230700 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.feed-video-reply-lightbox.is-open,
.feed-video-reply-lightbox:not([hidden]) {
  display: flex !important;
}

.feed-video-reply-lightbox[hidden] {
  display: none !important;
}

.feed-video-reply-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 16, 0.82);
}

.feed-video-reply-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(48rem, calc(100vw - 1.5rem));
  max-height: min(90vh, 36rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: #020617;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
}

.feed-video-reply-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.feed-video-reply-lightbox-title {
  font-weight: 650;
  color: #e0f2fe;
  font-size: 0.9rem;
}

.feed-video-reply-lightbox-close {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 1.25rem;
  cursor: pointer;
}

.feed-video-reply-lightbox-video {
  width: 100%;
  max-height: min(70vh, 28rem);
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

.feed-expand-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.feed-expand-caption-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Compact share control on feed tiles (export-from-tile icon — not a big Share pill) */
.feed-share-btn,
.video-card-share-btn {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.55);
  background: rgba(2, 8, 16, 0.82);
  color: #a5f3fc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  pointer-events: auto;
  /* Always visible on Group's Feeds (was hover-only → easy to miss on black thumbs). */
  opacity: 0.95;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}

.feed-share-btn .feed-share-icon,
.video-card-share-btn .feed-share-icon {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
}

.video-card:hover .feed-share-btn,
.video-card:focus-within .feed-share-btn,
.past-feeds-card:hover .feed-share-btn,
.past-feeds-card:focus-within .feed-share-btn,
.feed-share-btn:hover,
.video-card-share-btn:hover,
.feed-share-btn:focus-visible,
.video-card-share-btn:focus-visible {
  opacity: 1;
  border-color: rgba(103, 232, 249, 0.85);
  background: rgba(8, 47, 73, 0.92);
  transform: scale(1.05);
  outline: none;
}

/* Keep share clear of select checkbox (usually top-left) */
.past-feeds-card-thumb {
  position: relative;
}

.video-card-preview {
  position: relative;
}

/* Desktop share menu (when Web Share API is missing) */
.feed-share-menu {
  position: fixed;
  z-index: 12500;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(103, 232, 249, 0.35);
  background: rgba(8, 12, 20, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.feed-share-menu-title {
  margin: 0 0.25rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #a5f3fc;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.feed-share-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.feed-share-menu-item:hover,
.feed-share-menu-item:focus-visible {
  background: rgba(103, 232, 249, 0.12);
  outline: none;
}

.feed-share-menu-note {
  margin: 0.35rem 0.25rem 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted, #94a3b8);
}

/* Feed name row (used inside vp-tile-badge-stack) */
.feed-name-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.28rem 0.55rem 0.28rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-left: 3px solid var(--accent-cyan, #00e5ff);
  background: linear-gradient(
    105deg,
    rgba(6, 28, 40, 0.92) 0%,
    rgba(10, 22, 34, 0.88) 100%
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 229, 255, 0.08);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f4fbff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.feed-name-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.vp-tile-badge-stack--feed .feed-name-badge {
  font-size: 0.82rem;
}

.vp-tile-badge-stack--expand .feed-name-badge {
  font-size: 0.95rem;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
}

.video-card--video-only .card-meta,
.video-card--video-only .video-card-source {
  display: block;
}

.video-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem 0.65rem;
}

.video-card-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color, #eee);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-sub {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted, #9aa3ab);
  line-height: 1.35;
}

.video-card-source {
  color: var(--accent-cyan, #00e5ff);
  font-weight: 500;
}

.video-card--dev-mock .video-card-source::after {
  content: ' · preview';
  color: var(--text-muted, #9aa3ab);
  font-weight: 400;
}

/* Feeds page shell */
#view-feeds {
  min-height: 0;
  overflow: hidden;
}

.feeds-page-header {
  margin: 0 0 0.85rem;
  padding: 0 0.15rem;
}

.feeds-page-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text-color, #eee);
}

.feeds-page-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: var(--text-muted, #9aa3ab);
  line-height: 1.45;
  max-width: 42rem;
}

.video-card--expandable:hover {
  border-color: rgba(0, 229, 255, 0.45);
}

.video-card--click-play {
  cursor: pointer;
}

/* Feed grid: static stills only — never live video (prevents reloop/flicker) */
.feed-viewport-grid .video-card video {
  display: none !important;
}

.video-card--click-play:focus-visible,
.video-card--hover-play:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.55);
  outline-offset: 2px;
}

.video-card video,
.video-card iframe {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  background: #000;
  border: none;
}

.video-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(18, 28, 38, 0.95), rgba(8, 12, 18, 0.98)),
    #0a0a0a;
}

.video-card-preview--pending-still {
  background:
    linear-gradient(145deg, hsl(200 28% 18%), hsl(220 24% 12%));
}

.video-card-preview video {
  display: none !important;
}

.video-card-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 0;
  user-select: none;
}

.video-card-play-badge {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 12, 18, 0.72);
  color: #f5f7fb;
  font-size: 0.72rem;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.video-card--expandable:hover .video-card-play-badge {
  border-color: rgba(0, 229, 255, 0.55);
  color: var(--accent-cyan, #00e5ff);
}

.video-card--dev-mock {
  border-color: rgba(255, 209, 102, 0.35);
}

/* Above #nav-bar (100200) so expand play is not under Home/Settings clicks */
.feed-expand-modal.app-modal {
  z-index: 100300;
}

.feed-expand-modal .modal-content.feed-expand-content {
  position: relative;
  width: min(96vw, 72rem);
  max-width: min(96vw, 72rem);
  max-height: min(94vh, 56rem);
  padding: 0;
  /* Allow scroll so Video replies under the player are reachable */
  overflow-x: hidden;
  overflow-y: auto;
  background: #020617;
  border-radius: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  z-index: 2;
}

/* Replies dock under large expand player (not under grid tile) */
.feed-expand-reply-host {
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid rgba(34, 211, 238, 0.28);
  background: linear-gradient(180deg, rgba(8, 22, 36, 0.98), rgba(6, 14, 24, 0.99));
}

.feed-expand-reply-host[hidden] {
  display: none !important;
}

.feed-expand-reply-host .feed-tile-reply-stack {
  border-top: none;
}

.feed-expand-reply-host .feed-tile-reply-stack-inner {
  padding: 0.75rem 1rem 1rem;
}

.feed-expand-reply-host .feed-tile-reply-list {
  max-height: min(28vh, 14rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.55rem;
  overflow-y: auto;
}

.feed-expand-reply-host .feed-tile-reply-item {
  grid-template-columns: 1fr;
}

.feed-expand-reply-host .feed-tile-reply-item-media {
  min-height: 6.5rem;
  aspect-ratio: 16 / 10;
}

.feed-expand-reply-host .feed-tile-reply-item-video {
  min-height: 6.5rem;
}

.feed-expand-reply-host .feed-tile-reply-item-meta {
  padding: 0.4rem 0.5rem 0.55rem;
}

.feed-expand-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
  color: #e2e8f0;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.feed-expand-close:hover,
.feed-expand-close:focus-visible {
  background: rgba(15, 23, 42, 0.92);
  outline: 2px solid rgba(148, 163, 184, 0.45);
}

.feed-expand-player-host {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  /* Room for native controls + caption without forcing a crop box */
  max-height: min(78vh, 46rem);
}

.feed-expand-player-host video,
.feed-expand-player-host .feed-expand-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78vh, 46rem);
  min-width: 0;
  min-height: 0;
  /* Full clip visible — never crop recorded feed expand (cover was cutting frames) */
  object-fit: contain !important;
  object-position: center center !important;
  background: #000;
}

.feed-expand-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.25rem 1.1rem;
  color: #a5f3fc;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  background: rgba(2, 6, 23, 0.88);
  border-radius: 0.5rem;
  pointer-events: none;
}

/* Transport: ±10s seek + playback rate (Group Feeds / VidPlaza expand) */
.feed-expand-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.45rem 0.85rem;
  background: rgba(2, 10, 20, 0.96);
  border-top: 1px solid rgba(103, 232, 249, 0.12);
}

.feed-expand-transport[hidden] {
  display: none !important;
}

.feed-expand-transport-btn {
  min-width: 3.1rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.4);
  background: rgba(8, 47, 73, 0.55);
  color: #a5f3fc;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.feed-expand-transport-btn:hover,
.feed-expand-transport-btn:focus-visible {
  border-color: rgba(103, 232, 249, 0.85);
  background: rgba(14, 70, 100, 0.75);
  outline: none;
}

.feed-expand-rate-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
}

.feed-expand-playback-rate {
  min-height: 1.75rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
}

.feed-expand-buffer-status {
  margin-left: auto;
  font-size: 0.72rem;
  color: #86efac;
  font-weight: 600;
}

.feed-expand-caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0.65rem 0.85rem 0.8rem;
  background: rgba(2, 6, 23, 0.96);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.feed-expand-caption-title {
  font-size: 0.88rem;
  color: #e2e8f0;
  line-height: 1.35;
}

.feed-expand-caption-meta {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.3;
}

body.feed-expand-open {
  overflow: hidden;
}

.card-meta .card-owner {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.card-meta {
  padding: 8px 10px 4px;
  font-size: 0.8rem;
  color: #888;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-share {
  display: flex;
  gap: 6px;
  padding: 4px 10px 10px;
  flex-wrap: wrap;
}

.card-share button {
  padding: 5px 10px;
  background: #1a1a1a;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.78rem;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s;
}

.card-share button:hover {
  border-color: var(--accent-cyan);
}

/* Copy-link tooltip */
.copy-tooltip {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-cyan);
  color: #000;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 500;
}

.copy-tooltip.visible {
  opacity: 1;
}

/* Copy-link fallback input */
.copy-fallback-input {
  padding: 6px 8px;
  background: #1a1a1a;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Uploads View
   -------------------------------------------------------------------------- */
#view-uploads {
  max-width: 700px;
  margin: 0 auto;
}

.upload-section {
  background: var(--card-bg);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.upload-section h2 {
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: var(--accent-cyan);
}

/* Hide the native file input; use styled label instead */
.upload-section input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* File picker label styled as a button */
.file-picker-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent-cyan);
  border: none;
  border-radius: 4px;
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  line-height: 24px;
  text-align: center;
  transition: opacity 0.15s;
  margin-bottom: 10px;
}

.file-picker-btn:hover {
  opacity: 0.85;
}

.file-picker-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.upload-section input[type="url"],
.upload-section input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.upload-section input[type="text"]:focus,
.upload-section input[type="url"]:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.upload-section button {
  padding: 10px 20px;
  background: var(--accent-cyan);
  border: none;
  border-radius: 4px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: opacity 0.15s;
}

.upload-section button:hover {
  opacity: 0.85;
}

/* Error messages in uploads view */
.upload-section .error-msg {
  display: none;
  color: #ff5252;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.upload-section .error-msg.visible {
  display: block;
}

/* Video cards container */
#video-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Generic upload-error (used in Settings view) */
.upload-error {
  color: #ff5252;
  font-size: 0.85rem;
  margin-top: 6px;
  display: none;
}

.upload-error.visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Settings View
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Settings Page — 3-column creator layout
   -------------------------------------------------------------------------- */
.settings-page {
  --settings-bg: var(--user-bg-color);
  --settings-card: #1e293b;
  --settings-border: #334155;
  --settings-text: #f8fafc;
  --settings-muted: #94a3b8;
  --settings-accent: #67e8f9;
  min-height: calc(100vh - var(--footer-height));
  padding: 1.5rem 1.25rem 2rem;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.settings-page-layout {
  display: block;
}

.settings-page-layout--sectioned,
.settings-page-layout--webmaster {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.settings-section-nav {
  position: sticky;
  top: 0.75rem;
  align-self: start;
}

html[data-vp-wallpaper='1'] .settings-section-nav {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  padding: 0.85rem 0.65rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

html[data-vp-wallpaper='1'] .settings-section-nav-label,
html[data-vp-wallpaper='1'] .settings-section-nav-btn {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

html[data-vp-wallpaper='1'] .settings-section-nav-btn.is-active {
  color: #a5f3fc;
}

html[data-vp-wallpaper='1'] .settings-page-header {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-vp-wallpaper='1'] .settings-panel-card {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(148, 163, 184, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html[data-vp-wallpaper='1'] .settings-panel-title,
html[data-vp-wallpaper='1'] .settings-panel-desc,
html[data-vp-wallpaper='1'] .settings-subheading,
html[data-vp-wallpaper='1'] .settings-toggle-label,
html[data-vp-wallpaper='1'] .settings-toggle-hint,
html[data-vp-wallpaper='1'] .live-settings-status {
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-vp-wallpaper='1'] .settings-panel-desc,
html[data-vp-wallpaper='1'] .settings-toggle-hint,
html[data-vp-wallpaper='1'] .live-settings-status {
  color: #e2e8f0;
}

.settings-section-nav[hidden] {
  display: none !important;
}

.settings-section-nav-label {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--settings-muted);
}

.settings-section-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-section-nav-btn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--settings-text);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.35;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.settings-section-nav-btn:hover {
  background: rgba(148, 163, 184, 0.12);
}

.settings-section-nav-btn.is-active {
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(103, 232, 249, 0.12);
  color: var(--settings-accent);
  font-weight: 600;
}

.settings-main {
  min-width: 0;
}

.settings-panel-desc--compact {
  font-size: 0.82rem;
  margin-top: -0.35rem;
}

.settings-panel-beta-feedback-wm {
  border-color: rgba(103, 232, 249, 0.35);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.1), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.settings-panel-beta-mgmt {
  border-color: rgba(96, 165, 250, 0.35);
}

.settings-panel-social .settings-panel-title {
  margin: 0;
}

.settings-social-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.settings-social-card-head .community-icon {
  flex-shrink: 0;
}

.settings-social-visit-btn {
  margin-top: 0.35rem;
  display: inline-flex;
  text-decoration: none;
  justify-content: center;
}

a.settings-social-visit-btn:hover {
  text-decoration: none;
}

.community-icon-discord {
  color: #5865f2;
}

.settings-page-inner {
  /* Use more horizontal room so Products + Active Products fit at 100% zoom */
  max-width: min(100%, 100rem);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Desktop default — must come BEFORE mobile override (cascade was breaking phones). */
.settings-page-layout--sectioned,
.settings-page-layout--webmaster {
  /* Slightly tighter nav column → more shop width */
  grid-template-columns: minmax(11.5rem, 13.5rem) minmax(0, 1fr);
  gap: 1rem;
}

/* Phone / tablet: single column so every card is fully readable */
@media (max-width: 900px) {
  .settings-page {
    padding: 0.85rem 0.75rem 1.5rem;
  }

  .settings-page-layout--sectioned,
  .settings-page-layout--webmaster {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
  }

  .settings-section-nav {
    position: static;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    order: 0;
  }

  .settings-section-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.4rem;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .settings-section-nav-btn {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .settings-page-main,
  .settings-grid,
  #settings-panels-host,
  .settings-page-layout--sectioned > *:not(.settings-section-nav),
  .settings-page-layout--webmaster > *:not(.settings-section-nav) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .settings-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0.85rem;
    grid-template-columns: none !important;
  }

  .settings-panel-card,
  .settings-page-layout--sectioned .settings-panel-card--half-width,
  .settings-page-layout--webmaster .settings-panel-card--half-width,
  .settings-page-layout--sectioned .settings-panel-card--full-width,
  .settings-page-layout--webmaster .settings-panel-card--full-width {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .settings-panel-card {
    padding: 0.9rem 0.85rem;
  }

  .settings-panel-title {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .settings-panel-desc,
  .settings-toggle-hint,
  .live-settings-status {
    font-size: 0.84rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .settings-panel-desc code,
  .settings-toggle-hint code {
    display: inline;
    font-size: 0.78em;
    word-break: break-all;
  }

  /* Toast duration chips: 2×2 readable, not crushed */
  .toast-duration-options,
  .settings-panel-toast-prefs .toast-duration-grid,
  .settings-radio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    width: 100%;
  }

  .settings-panel-card input,
  .settings-panel-card select,
  .settings-panel-card textarea,
  .settings-panel-card button.settings-panel-btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  .products-addon-shell,
  .live-addons-picker,
  .active-products-popout {
    max-width: 100%;
    min-width: 0;
  }
}

/* Short landscape (e.g. 761×438): same full-card rules */
@media (max-height: 520px) and (min-width: 901px) {
  .settings-page-layout--sectioned,
  .settings-page-layout--webmaster {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
  }

  .settings-section-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .settings-panel-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.settings-page-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.settings-page-title {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--settings-text);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.settings-page-subtitle {
  font-size: 0.92rem;
  color: var(--settings-muted);
  font-weight: 400;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: start;
}

.settings-panel-card--full-width {
  grid-column: 1 / -1;
}

.settings-page-layout--sectioned .settings-panel-card--half-width,
.settings-page-layout--webmaster .settings-panel-card--half-width {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.58rem);
  justify-self: start;
}

.settings-page-layout--sectioned .settings-panel-friends.settings-panel-card--half-width,
.settings-page-layout--webmaster .settings-panel-friends.settings-panel-card--half-width {
  min-height: 12rem;
}

.settings-page-layout--sectioned .settings-panel-friends.settings-panel-card--half-width .friends-connected-list,
.settings-page-layout--webmaster .settings-panel-friends.settings-panel-card--half-width .friends-connected-list {
  --settings-scroll-max: 9rem;
  min-height: 5rem;
}

.settings-page-layout--sectioned .settings-panel-friends.settings-panel-card--half-width .friends-incoming-list,
.settings-page-layout--sectioned .settings-panel-friends.settings-panel-card--half-width .friends-outgoing-list,
.settings-page-layout--sectioned .settings-panel-friends.settings-panel-card--half-width .friends-settings-search-results,
.settings-page-layout--webmaster .settings-panel-friends.settings-panel-card--half-width .friends-incoming-list,
.settings-page-layout--webmaster .settings-panel-friends.settings-panel-card--half-width .friends-outgoing-list,
.settings-page-layout--webmaster .settings-panel-friends.settings-panel-card--half-width .friends-settings-search-results {
  --settings-scroll-max: 6.5rem;
  min-height: 4rem;
}

.settings-page-layout--webmaster .settings-panel-friends.settings-panel-card--half-width .friends-requests-settings-panel {
  max-height: 14rem;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--settings-border) transparent;
}

.settings-panel-beta-feedback {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 45, 20, 0.55));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.14), 0 14px 30px rgba(0, 0, 0, 0.28);
}

.beta-feedback-label {
  font-size: 0.88rem;
  color: var(--settings-text);
  margin: 0.5rem 0 0.35rem;
}

.beta-feedback-textarea {
  width: 100%;
  min-height: 6.5rem;
  resize: vertical;
  border-radius: 0.75rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.65);
  color: var(--settings-text);
  padding: 0.75rem 0.85rem;
  font: inherit;
}

.beta-feedback-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0;
}

.beta-feedback-file-label {
  font-size: 0.85rem;
  color: var(--settings-muted);
}

.beta-feedback-screenshot-preview {
  max-width: 7rem;
  max-height: 5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--settings-border);
}

.beta-feedback-submit-btn {
  align-self: flex-start;
}

.beta-feedback-recent-wrap {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--settings-border);
}

.beta-feedback-recent-title {
  font-size: 0.9rem;
  color: var(--settings-muted);
  margin-bottom: 0.5rem;
}

.beta-feedback-recent-list {
  display: grid;
  gap: 0.55rem;
}

.beta-feedback-recent-item {
  border: 1px solid var(--settings-border);
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
  background: rgba(15, 23, 42, 0.45);
}

.beta-feedback-recent-meta {
  font-size: 0.78rem;
  color: var(--settings-muted);
  margin-bottom: 0.2rem;
}

.beta-feedback-recent-text {
  font-size: 0.86rem;
  color: var(--settings-text);
  white-space: pre-wrap;
}

.beta-feedback-recent-empty,
.beta-mgmt-feedback-empty,
.beta-mgmt-feedback-loading {
  font-size: 0.84rem;
  color: var(--settings-muted);
}

.beta-mgmt-feedback-count {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--settings-muted);
}

.beta-mgmt-feedback-heading {
  font-size: 0.92rem;
  margin: 0.85rem 0 0.45rem;
  color: var(--settings-text);
}

.beta-feedback-wm-steps {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.beta-feedback-wm-step {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 0.65rem;
  background: rgba(8, 47, 73, 0.22);
}

.beta-feedback-wm-step-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--settings-text);
}

.beta-feedback-wm-step-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--settings-muted);
  line-height: 1.45;
}

.beta-feedback-wm-export-toolbar {
  margin-bottom: 0.35rem;
}

.beta-mgmt-feedback-type {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(103, 232, 249, 0.16);
  color: #a5f3fc;
}

.beta-feedback-wm-notify {
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 193, 7, 0.35);
  background: rgba(255, 193, 7, 0.1);
}

.beta-feedback-wm-notify-title {
  margin: 0 0 0.25rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #ffd86b;
}

.beta-feedback-wm-notify-desc {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  color: var(--settings-muted);
}

.beta-feedback-wm-notify-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--settings-text);
}

.beta-feedback-wm-notify-item + .beta-feedback-wm-notify-item {
  margin-top: 0.15rem;
}

.beta-feedback-limit-body {
  color: var(--settings-muted);
}

.beta-feedback-management-list {
  min-height: 8rem;
  max-height: 14rem;
}

.beta-mgmt-feedback-row {
  border: 1px solid var(--settings-border);
  border-radius: 0.55rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.45rem;
  background: rgba(15, 23, 42, 0.35);
}

.beta-mgmt-feedback-meta {
  font-size: 0.74rem;
  color: var(--settings-muted);
  margin-bottom: 0.2rem;
}

.beta-mgmt-feedback-text {
  font-size: 0.8rem;
  color: var(--settings-text);
  white-space: pre-wrap;
}

.beta-mgmt-feedback-thumb {
  display: block;
  margin-top: 0.35rem;
  max-width: 100%;
  max-height: 4.5rem;
  border-radius: 0.35rem;
}

:root[data-vp-theme="light"] {
  --text-color: #1a1a1a;
  --text-muted: #5a5a5a;
  --border-grey: #c8c8c8;
  --border-subtle: #e0e0e0;
  --modal-bg: #f5f5f5;
  --card-bg: #ffffff;
  --surface-dark: #f0f0f0;
  --surface-raised: #fafafa;
  --nav-bg: #f7f7f7;
}

:root[data-vp-theme="light"] .settings-page {
  --settings-card: #f8fafc;
  --settings-border: #cbd5e1;
  --settings-text: #0f172a;
  --settings-muted: #475569;
  --settings-accent: #0e7490;
}

:root[data-vp-theme="light"] .settings-panel-beta-feedback {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(254, 243, 199, 0.85));
}

:root[data-vp-theme="light"] .beta-feedback-textarea,
:root[data-vp-theme="light"] .beta-feedback-recent-item,
:root[data-vp-theme="light"] .beta-mgmt-feedback-row {
  background: rgba(255, 255, 255, 0.9);
}

:root[data-vp-theme="light"] #app-nav,
:root[data-vp-theme="light"] .app-footer {
  color: var(--text-color);
}

.contrast-consent-body {
  margin: 0.5rem 0 1rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.settings-grid [data-settings-card][hidden] {
  display: none;
}

/* Nested list scroll (search dropdowns only). Body lists should NOT use this —
   contain + max-height steals the mouse wheel from #view-settings page scroll. */
.settings-panel-scroll {
  --settings-scroll-max: 10rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--settings-scroll-max);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.35rem;
  margin-right: -0.15rem;
  scrollbar-width: thin;
  scrollbar-color: var(--settings-border) transparent;
  -webkit-overflow-scrolling: touch;
  /* Chain to Settings page when list is at edge or short */
  overscroll-behavior-y: auto;
}

/* Explicit opt-in when a nested pane must trap wheel (rare). */
.settings-panel-scroll--trap {
  overscroll-behavior-y: contain;
}

.settings-panel-scroll::-webkit-scrollbar {
  width: 6px;
}

.settings-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--settings-border);
  border-radius: 3px;
}

.settings-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--settings-muted);
}

.settings-panel-scroll--md {
  --settings-scroll-max: 14rem;
}

.settings-panel-scroll--sm {
  --settings-scroll-max: 9rem;
}

.settings-panel-scroll--lg {
  --settings-scroll-max: 22rem;
}

.settings-panel-blocked .settings-subheading,
.settings-panel-join-requests .settings-subheading {
  font-size: 0.78rem;
  margin: 0.35rem 0 0.25rem;
}

.settings-panel-theme,
.settings-panel-community,
.settings-panel-delete {
  min-height: auto;
}

.settings-panel-delete {
  border-color: rgba(248, 113, 113, 0.35);
}

@media (max-width: 1200px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-panel-card {
    min-height: auto;
  }
}

/*
 * Mobile settings — LAST so it wins over half-width 50% / 3-col grid defaults.
 * Vinny: cards must be fully readable (cannotseecardsinfull / typo spill).
 */
@media (max-width: 900px) {
  .settings-page-layout--sectioned,
  .settings-page-layout--webmaster {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
  }

  .settings-section-nav {
    position: static !important;
    width: 100%;
    max-width: 100%;
  }

  .settings-section-nav-list {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 0.4rem;
    -webkit-overflow-scrolling: touch;
  }

  .settings-section-nav-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  .settings-main,
  .settings-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0.85rem;
  }

  .settings-panel-card,
  .settings-page-layout--sectioned .settings-panel-card--half-width,
  .settings-page-layout--webmaster .settings-panel-card--half-width,
  .settings-page-layout--sectioned .settings-panel-card--full-width,
  .settings-page-layout--webmaster .settings-panel-card--full-width,
  .settings-page-layout--sectioned .settings-panel-account-identity.settings-panel-card--half-width,
  .settings-page-layout--sectioned .settings-panel-delete.settings-panel-card--half-width,
  .settings-page-layout--webmaster .settings-panel-account-identity.settings-panel-card--half-width,
  .settings-page-layout--webmaster .settings-panel-delete.settings-panel-card--half-width {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .settings-panel-desc,
  .settings-toggle-hint,
  .live-settings-status,
  .settings-panel-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
}

.settings-panel-card {
  background: var(--settings-card);
  border: 1px solid var(--settings-border);
  border-radius: 1.1rem;
  padding: 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 18rem;
}

.settings-panel-profile,
.settings-panel-dev-tools,
.settings-panel-group-management,
.settings-panel-friends,
.settings-panel-blocked,
.settings-panel-join-requests {
  min-height: auto;
}

.settings-handler-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.55);
}

.settings-handler-label {
  font-size: 0.78rem;
  color: var(--settings-muted);
}

.settings-handler-value {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--settings-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.settings-handler-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--settings-muted);
}

.settings-panel-friends .settings-subheading {
  font-size: 0.78rem;
  margin: 0.35rem 0 0.25rem;
}

.friends-settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.7rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.55);
  color: var(--settings-text);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.friends-settings-toggle::after {
  content: '▸';
  color: var(--settings-muted);
  transition: transform 0.15s ease;
}

.friends-settings-toggle.is-open::after {
  transform: rotate(90deg);
}

.friends-settings-toggle.has-pending {
  border-color: rgba(103, 232, 249, 0.45);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.08);
}

.friends-settings-toggle:disabled {
  opacity: 0.55;
  cursor: default;
}

.friends-requests-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding: 0.55rem 0.15rem 0;
  border-top: 1px solid rgba(51, 65, 85, 0.45);
}

.friends-settings-section-label {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--settings-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.friends-settings-add {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}

.friends-settings-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.65);
  color: var(--settings-text);
  font-size: 0.86rem;
}

.friends-settings-search-input:focus {
  outline: none;
  border-color: rgba(103, 232, 249, 0.55);
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.12);
}

.friends-settings-search-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.friends-settings-search-results .friend-search-section-label,
.friends-settings-search-results .friend-search-result,
.friends-settings-search-results .friend-panel-empty {
  font-size: 0.82rem;
}

.friends-settings-search-results .friend-search-results,
.friends-settings-search-results.friend-search-results {
  position: static;
  width: 100%;
  max-height: none;
  box-shadow: none;
  border: 1px solid rgba(51, 65, 85, 0.55);
  border-radius: 0.65rem;
  margin-top: 0.45rem;
  padding: 0.35rem 0.5rem;
}

.friends-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.55);
}

.friends-settings-row:last-child {
  border-bottom: none;
}

.friends-settings-info {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.friends-settings-name-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.friends-settings-name-wrap {
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--settings-text);
}

.friends-settings-meta {
  font-size: 0.74rem;
  color: var(--settings-accent);
}

.friends-settings-count {
  color: var(--settings-muted);
  font-weight: 500;
}

.friends-settings-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.friends-settings-action,
.friends-settings-accept,
.friends-settings-decline {
  padding: 0.35rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.55);
  color: var(--settings-text);
  font-size: 0.74rem;
  cursor: pointer;
}

.friends-settings-accept {
  border-color: rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
}

.friends-settings-decline {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

.friends-settings-action:hover,
.friends-settings-accept:hover,
.friends-settings-decline:hover {
  border-color: var(--settings-accent);
}

.settings-delete-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.1);
  color: #ff8a80;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
}

.settings-delete-icon-btn:hover {
  background: rgba(255, 82, 82, 0.18);
  border-color: rgba(255, 82, 82, 0.7);
}

.settings-delete-icon-btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none;
}

.friends-settings-remove {
  min-height: 2rem;
  min-width: 4.5rem;
  touch-action: manipulation;
}

.friends-settings-remove-icon {
  min-height: 2rem;
  min-width: 2rem;
}

.friends-remove-toolbar[hidden] {
  display: none !important;
}

.friends-remove-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 0.65rem;
  background: rgba(127, 29, 29, 0.22);
  position: relative;
  z-index: 1;
  pointer-events: auto;
  min-height: 4.75rem;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.08);
}

.friends-remove-toolbar-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #fecaca;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.friends-remove-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.friends-remove-select {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid var(--settings-border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--settings-text);
  font-size: 0.82rem;
}

.friends-remove-confirm {
  flex: 0 0 auto;
  min-height: 2.25rem;
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}

.settings-panel-friends .friends-connected-list .friends-settings-row {
  position: relative;
  z-index: 2;
}

.friends-requests-settings-panel,
.friends-incoming-list,
.friends-outgoing-list {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.friends-settings-accept,
.friends-settings-decline {
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  pointer-events: auto;
}

.friend-search-action,
.friend-request-accept,
.friend-request-decline {
  touch-action: manipulation;
  pointer-events: auto;
}

.group-management-delete-btn.settings-delete-icon-btn {
  min-height: 2rem;
  min-width: 2rem;
}

.friends-settings-status-label {
  font-size: 0.72rem;
  color: #6ee7b7;
}

.friends-settings-empty {
  margin: 0;
}

.friends-online-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: #64748b;
}

.friends-online-dot--online {
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2);
}

.friends-online-dot--away {
  background: #fbbf24;
}

.friends-online-dot--offline {
  background: #64748b;
}

.settings-panel-dev-tools {
  border-color: rgba(255, 193, 7, 0.35);
}

.settings-dev-tools-note {
  color: var(--text-muted, #8a8f98);
  font-size: 0.92rem;
}

.settings-panel-group-management .group-management-count {
  flex-shrink: 0;
}

.settings-panel-group-management .group-management-delete-all {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.settings-panel-group-management.settings-panel-card--full-width .group-management-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.group-live-destinations-shortcut {
  align-self: flex-start;
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
}

.group-live-multistream-hint {
  color: var(--accent-cyan);
  margin-top: 0.35rem;
}

.settings-panel-group-management.settings-panel-card--full-width .group-management-row {
  padding: 0.75rem 0.9rem;
  background: rgba(15, 23, 42, 0.45);
  border-color: var(--settings-border);
}

.settings-panel-group-management.settings-panel-card--full-width .group-management-name {
  font-size: 0.92rem;
  color: var(--settings-text);
}

.settings-panel-group-management.settings-panel-card--full-width .group-management-meta {
  font-size: 0.78rem;
  color: var(--settings-muted);
}

.settings-panel-span-full {
  grid-column: 1 / -1;
  min-height: auto;
}

.settings-panel-camera {
  border-color: rgba(103, 232, 249, 0.35);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.08);
}

.settings-toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--settings-border);
  border-radius: 0.85rem;
  cursor: pointer;
  min-height: 3.25rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.settings-toggle-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--settings-text);
  flex: 1;
  line-height: 1.35;
}

.settings-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.settings-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 3.1rem;
  height: 1.75rem;
  background: #334155;
  border-radius: 999px;
  transition: background 0.2s ease;
  pointer-events: none;
}

.settings-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.4rem;
  height: 1.4rem;
  background: #f8fafc;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.settings-toggle-input:checked + .settings-toggle-switch {
  background: var(--settings-accent);
}

.settings-toggle-input:checked + .settings-toggle-switch::after {
  transform: translateX(1.35rem);
}

.settings-toggle-input:focus-visible + .settings-toggle-switch {
  outline: 2px solid var(--settings-accent);
  outline-offset: 2px;
}

.settings-toggle-hint {
  font-size: 0.78rem;
  color: var(--settings-muted);
  margin: 0;
  line-height: 1.45;
}

.settings-panel-profile {
  border-color: rgba(103, 232, 249, 0.28);
}

.settings-display-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}

.settings-display-name-input {
  flex: 1 1 12rem;
  min-width: 0;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--settings-border);
  border-radius: 0.85rem;
  padding: 0.75rem 1rem;
  color: var(--settings-text);
  font-size: 1rem;
  min-height: 2.75rem;
}

.settings-display-name-input:focus {
  outline: none;
  border-color: var(--settings-accent);
}

.settings-display-name-save {
  flex: 0 0 auto;
  min-width: 5.5rem;
  margin-top: 0;
}

.live-settings-status.is-error {
  color: #f87171;
}

.live-settings-status.is-success {
  color: #4ade80;
}

.settings-panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--settings-accent);
  margin: 0;
  letter-spacing: -0.01em;
}

.settings-panel-desc {
  font-size: 0.82rem;
  color: var(--settings-muted);
  line-height: 1.45;
  margin: 0;
}

.settings-platform-connects {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.65);
}

.settings-platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: nowrap;
  font-size: 0.82rem;
  color: var(--settings-text);
  padding: 0.65rem 0.85rem;
  border-radius: 0.55rem;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(51, 65, 85, 0.55);
}

.multistream-platform-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.multistream-platform-brand .community-icon {
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
}

.multistream-platform-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.multistream-platform-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--settings-text);
}

.multistream-platform-url {
  font-size: 0.72rem;
  color: var(--settings-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.multistream-platform-example-desc {
  font-size: 0.72rem;
  color: var(--settings-muted);
}

.community-icon-example {
  color: var(--settings-muted);
  background: rgba(148, 163, 184, 0.12);
}

.settings-platform-row--example {
  opacity: 0.88;
}

.platform-connect-modal {
  z-index: 1004;
}

.platform-connect-modal-content {
  max-width: 28rem;
  text-align: left;
  align-items: stretch;
}

.platform-connect-modal-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.platform-connect-modal-head .community-icon {
  width: 2.35rem;
  height: 2.35rem;
}

.platform-connect-modal-desc {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  color: var(--settings-muted, #94a3b8);
  line-height: 1.45;
}

.platform-connect-youtube-oauth,
.multistream-setup-disconnect-wrap {
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 120, 120, 0.28);
  border-radius: 8px;
  background: rgba(80, 20, 24, 0.25);
}

.multistream-setup-disconnect-wrap[hidden] {
  display: none !important;
}

.multistream-setup-disconnect-btn {
  width: 100%;
}

.multistream-setup-disconnect-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 220, 220, 0.78);
}

.multistream-setup-youtube-oauth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}

.platform-connect-youtube-oauth[hidden],
.multistream-setup-youtube-oauth[hidden] {
  display: none !important;
}

.platform-connect-oauth-btn {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  padding: 0.4rem 0.9rem;
  min-height: 2.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.45);
  background: rgba(255, 0, 0, 0.12);
  color: #ff6b6b;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.platform-connect-oauth-btn:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 80, 80, 0.75);
  color: #ff8a8a;
}

.platform-connect-oauth-btn.is-connected {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.45);
  color: #86efac;
}

.platform-connect-oauth-btn.is-connected:hover {
  background: rgba(6, 95, 70, 0.55);
  border-color: rgba(74, 222, 128, 0.7);
  color: #bbf7d0;
}

.platform-connect-oauth-btn--facebook {
  border-color: rgba(66, 103, 178, 0.55);
  background: rgba(24, 48, 96, 0.45);
  color: #93c5fd;
}

.platform-connect-oauth-btn--facebook:hover {
  background: rgba(37, 70, 130, 0.55);
  border-color: rgba(96, 165, 250, 0.75);
  color: #bfdbfe;
}

.platform-connect-oauth-btn--facebook[hidden],
#btn-multistream-setup-facebook-oauth[hidden],
#btn-platform-connect-facebook-oauth[hidden] {
  display: none !important;
}

.platform-connect-oauth-btn--x {
  border-color: rgba(226, 232, 240, 0.45);
  background: rgba(15, 23, 42, 0.75);
  color: #f8fafc;
}
.platform-connect-oauth-btn--x:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(248, 250, 252, 0.65);
  color: #fff;
}
.platform-connect-oauth-btn--x.is-connected {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.45);
  color: #86efac;
}
/* Never leave X Connect invisible when step is X (attribute fights). */
#multistream-setup-step-2:not([hidden]) #btn-multistream-setup-x-oauth:not([hidden]) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#multistream-setup-step-2:not([hidden]) #multistream-setup-youtube-oauth:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
}

/* Stage wallpaper pre-upload adjust (Fit entire vs Fill/crop) */
.vp-wallpaper-adjust {
  position: fixed;
  inset: 0;
  z-index: 100600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
}
.vp-wallpaper-adjust-card {
  width: min(36rem, 100%);
  max-height: min(90vh, 40rem);
  overflow: auto;
  padding: 1.1rem 1.15rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: #e2e8f0;
}
.vp-wallpaper-adjust-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
}
.vp-wallpaper-adjust-hint {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #94a3b8;
}
.vp-wallpaper-adjust-preview-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
@media (max-width: 560px) {
  .vp-wallpaper-adjust-preview-wrap {
    grid-template-columns: 1fr;
  }
}
.vp-wallpaper-adjust-preview {
  position: relative;
  appearance: none;
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  border: 2px solid rgba(71, 85, 105, 0.7);
  background: #0f172a;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.vp-wallpaper-adjust-status {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #67e8f9;
}
.vp-wallpaper-adjust-preview.is-selected {
  border-color: rgba(34, 211, 238, 0.85);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35);
}
.vp-wallpaper-adjust-preview img {
  width: 100%;
  height: 100%;
  display: block;
}
.vp-wallpaper-adjust-preview--fit img {
  object-fit: contain;
  background: #020617;
}
.vp-wallpaper-adjust-preview--fill img {
  object-fit: cover;
}
.vp-wallpaper-adjust-preview span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.35rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e0f2fe;
  background: linear-gradient(transparent, rgba(2, 6, 23, 0.88));
  pointer-events: none;
}
.vp-wallpaper-adjust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}
.vp-wallpaper-adjust-btn {
  border-radius: 0.45rem;
  border: 1px solid rgba(100, 116, 139, 0.55);
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}
.vp-wallpaper-adjust-btn:hover {
  border-color: rgba(148, 163, 184, 0.7);
}
.vp-wallpaper-adjust-btn--primary {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(8, 47, 73, 0.95);
  color: #a5f3fc;
}
.vp-wallpaper-adjust-btn--secondary {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(6, 40, 32, 0.9);
  color: #86efac;
}

/* Multitask memory confirm — soft top-right */
.vp-multitask-memory-prompt {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 100500;
  width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.85rem 0.95rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
  font-size: 0.84rem;
  line-height: 1.4;
}
.vp-mt-mem-title {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
}
.vp-mt-mem-body {
  margin: 0 0 0.75rem;
  color: #cbd5e1;
}
.vp-mt-mem-body strong {
  color: #fde68a;
}
.vp-mt-mem-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
.vp-mt-mem-btn {
  appearance: none;
  border-radius: 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.vp-mt-mem-cancel {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
  color: #e2e8f0;
}
.vp-mt-mem-continue {
  border: 1px solid rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.45);
  color: #eff6ff;
}
.vp-mt-mem-cancel:hover,
.vp-mt-mem-continue:hover {
  filter: brightness(1.08);
}

.platform-connect-oauth-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--settings-muted, #94a3b8);
  line-height: 1.35;
  max-width: 22rem;
}

.platform-connect-oauth-or {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--settings-muted, #94a3b8);
  text-align: center;
}

/* YouTube OAuth Live privacy (Phase A · p285) */
.multistream-youtube-privacy {
  margin: 0.35rem 0 0.15rem;
  padding: 0.55rem 0.7rem 0.65rem;
  border: 1px solid rgba(255, 80, 80, 0.28);
  border-radius: 0.65rem;
  background: rgba(40, 10, 10, 0.35);
  max-width: 22rem;
}

.multistream-youtube-privacy[hidden] {
  display: none !important;
}

.multistream-youtube-privacy-legend {
  padding: 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fecaca;
}

.multistream-youtube-privacy-option {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.28rem 0;
  font-size: 0.82rem;
  color: #f8fafc;
  cursor: pointer;
}

.multistream-youtube-privacy-option input {
  margin: 0;
  accent-color: #ef4444;
}

.multistream-youtube-privacy-hint {
  font-size: 0.72rem;
  color: var(--settings-muted, #94a3b8);
  font-weight: 500;
}

.multistream-youtube-privacy-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--settings-muted, #94a3b8);
}

.platform-connect-modal-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--settings-text);
}

.platform-connect-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: rgba(15, 23, 42, 0.55);
  color: var(--settings-text);
  font-size: 0.86rem;
}

.platform-connect-modal-input:focus {
  outline: none;
  border-color: rgba(103, 232, 249, 0.55);
}

.platform-connect-modal-error,
#multistream-setup-error {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: 1.4;
  text-align: left;
}

.platform-connect-modal-error {
  min-height: 1.1rem;
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: #fca5a5;
}

.platform-connect-modal-actions {
  margin-top: 0.85rem;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-platform-connects .platform-connect-btn {
  flex-shrink: 0;
  min-width: 7.25rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(103, 232, 249, 0.75);
  background: var(--settings-accent);
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.settings-platform-connects .platform-connect-btn:hover {
  background: #7df0fa;
  border-color: #7df0fa;
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(103, 232, 249, 0.28);
  transform: translateY(-1px);
}

.settings-platform-connects .platform-connect-btn:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.85);
  outline-offset: 2px;
}

.settings-platform-connects .platform-connect-btn.is-connected {
  background: rgba(103, 232, 249, 0.12);
  border-color: var(--settings-accent);
  color: var(--settings-accent);
  box-shadow: none;
  transform: none;
}

.settings-platform-connects .platform-connect-btn.is-connected:hover {
  background: rgba(103, 232, 249, 0.2);
  border-color: #7df0fa;
  color: #7df0fa;
  box-shadow: 0 2px 10px rgba(103, 232, 249, 0.15);
  transform: translateY(-1px);
}

.settings-panel-upsell {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(51, 65, 85, 0.65);
}

.settings-panel-upsell p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--settings-text);
  line-height: 1.4;
}

.participant-slots-summary {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(51, 65, 85, 0.75);
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.55);
}

.participant-slots-limit-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--settings-muted);
}

.participant-slots-current {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}

.participant-slots-current-count {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--settings-accent);
  line-height: 1;
}

.participant-slots-limit-separator,
.participant-slots-max-count {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--settings-muted);
  line-height: 1;
}

.participant-slots-extra-heading {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--settings-text);
}

.participant-slots-pricing-note {
  margin: 0 0 0.75rem;
  font-size: 0.76rem;
  color: var(--settings-muted);
  line-height: 1.45;
}

.participant-slots-included-note {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  color: var(--settings-muted);
}

.participant-slots-detail {
  margin: 0;
  font-size: 0.8rem;
  color: var(--settings-muted);
  line-height: 1.45;
}

.participant-slots-max-badge {
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.08);
}

.participant-slots-bundles {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.participant-slots-bundles-heading {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--settings-text);
}

.participant-slots-bundle-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "info price"
    "btn btn";
  gap: 0.45rem 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(51, 65, 85, 0.75);
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.55);
}

.participant-slots-bundle-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.participant-slots-bundle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--settings-text);
}

.participant-slots-bundle-total {
  font-size: 0.74rem;
  color: var(--settings-muted);
}

.participant-slots-bundle-price {
  grid-area: price;
  align-self: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--settings-accent);
}

.participant-slots-bundle-btn {
  grid-area: btn;
  width: 100%;
  align-self: stretch;
}

.participant-slots-bundle-card.is-unavailable {
  opacity: 0.55;
}

.participant-slots-bundle-card.is-unavailable .participant-slots-bundle-btn:disabled {
  opacity: 1;
}

.settings-panel-btn {
  align-self: flex-start;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 0.7rem;
  background: var(--settings-accent);
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
  min-height: 44px;
}

.settings-panel-btn:hover:not(:disabled) {
  opacity: 0.92;
}

.settings-panel-btn:disabled,
.settings-panel-btn.is-active {
  background: rgba(103, 232, 249, 0.15);
  color: var(--settings-accent);
  border: 1px solid rgba(103, 232, 249, 0.45);
  cursor: default;
}

.settings-panel-btn-wide {
  align-self: stretch;
  width: 100%;
}

.settings-panel-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.settings-panel-btn-secondary {
  background: transparent;
  color: var(--settings-muted);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.settings-panel-btn-secondary:hover:not(:disabled) {
  color: var(--settings-text);
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(148, 163, 184, 0.08);
  opacity: 1;
}

.settings-save-highlight {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings-save-price {
  margin: 0;
  font-size: 0.92rem;
  color: var(--settings-text);
  line-height: 1.45;
}

.settings-recording-upgrade-controls {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.settings-recording-upgrade-controls[hidden] {
  display: none;
}

.settings-recording-upgrade-note {
  margin-top: 0.15rem;
}

.settings-recording-reset-btn {
  display: block;
  width: 100%;
  padding: 0.55rem 1rem;
  background: rgba(148, 163, 184, 0.12);
  color: var(--settings-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.55rem;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 44px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.settings-recording-reset-btn:hover {
  color: var(--settings-text);
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.18);
}

.settings-save-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--settings-muted);
  line-height: 1.45;
}

.settings-save-note--muted {
  color: rgba(148, 163, 184, 0.82);
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.addon-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0.35rem 0 0.5rem;
}

.addon-stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 0.55rem;
  border: 1px solid rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.08);
  color: #00e5ff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.addon-stepper-btn:hover:not(:disabled) {
  border-color: rgba(0, 229, 255, 0.6);
  background: rgba(0, 229, 255, 0.14);
}

.addon-stepper-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.addon-stepper-value-wrap {
  min-width: 4.5rem;
  text-align: center;
  font-size: 1rem;
  color: var(--settings-text);
}

.addon-stepper-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: #00e5ff;
}

.settings-vault-placeholder .settings-panel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-page-error {
  display: block;
  text-align: center;
  margin-top: 1rem;
}

.settings-panel-delete {
  margin-top: 1.5rem;
  border-color: rgba(255, 82, 82, 0.28);
  background: rgba(20, 12, 14, 0.75);
}

#delete-account-settings-panel[hidden] {
  display: none !important;
}

.settings-panel-beta-mgmt {
  margin-top: 1.5rem;
  min-height: auto;
  border-color: rgba(103, 232, 249, 0.24);
  background: rgba(12, 20, 30, 0.72);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.06);
}

.settings-panel-beta-mgmt .settings-panel-title {
  color: #a5f3fc;
}

.settings-beta-mgmt-placeholder {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--settings-muted);
}

#beta-management-settings-panel[hidden] {
  display: none !important;
}

#webmaster-settings-panel[hidden] {
  display: none !important;
}

.settings-panel-delete .settings-panel-title {
  color: #ff8a80;
}

.settings-panel-delete--compact {
  padding: 0.85rem 1rem;
  grid-column: 1 / -1;
  max-width: 26rem;
  width: 100%;
  justify-self: start;
  min-height: auto;
}

.settings-panel-delete-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.settings-panel-delete-header .settings-panel-title {
  margin: 0;
}

.settings-panel-delete--compact .settings-panel-desc {
  margin-top: 0.45rem;
  margin-bottom: 0;
}

.settings-delete-account-btn {
  margin-top: 0;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ff8a80;
  background: transparent;
  border: 1px solid rgba(255, 82, 82, 0.45);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.settings-delete-account-btn:hover {
  color: #fff;
  background: rgba(255, 82, 82, 0.14);
  border-color: rgba(255, 82, 82, 0.7);
}

.delete-account-modal {
  z-index: 1002;
}

.delete-account-modal-content {
  text-align: left;
  align-items: stretch;
  max-width: 28rem;
}

.delete-account-step-indicator {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 138, 128, 0.85);
}

.delete-account-step h3 {
  margin: 0 0 0.65rem;
  color: #ff8a80;
}

.delete-account-lead {
  margin: 0 0 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.delete-account-warning-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-color);
  line-height: 1.55;
}

.delete-account-warning-list li + li {
  margin-top: 0.45rem;
}

.delete-account-confirm-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.delete-account-confirm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  color: var(--text-color);
  background: #000;
  border: 1px solid rgba(255, 82, 82, 0.45);
  border-radius: 0.45rem;
}

.delete-account-confirm-input:focus {
  outline: none;
  border-color: rgba(255, 82, 82, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 82, 82, 0.18);
}

.delete-account-error {
  min-height: 1.25rem;
  margin: 0.55rem 0 0;
}

.delete-account-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.settings-more {
  margin-top: 1.5rem;
  border: 1px solid var(--settings-border);
  border-radius: 0.85rem;
  background: rgba(30, 41, 59, 0.55);
  overflow: hidden;
}

.settings-more-summary {
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--settings-muted);
  list-style: none;
}

.settings-more-summary::-webkit-details-marker {
  display: none;
}

.settings-more-content {
  padding: 0 1rem 1rem;
}

.settings-more-content .settings-section {
  background: rgba(15, 23, 42, 0.55);
  border-color: var(--settings-border);
}

.shape-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.shape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--settings-border);
  border-radius: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  min-height: 5.5rem;
}

.shape-card:hover {
  border-color: rgba(103, 232, 249, 0.55);
}

.shape-card.active {
  border-color: var(--settings-accent);
  background: rgba(103, 232, 249, 0.08);
  box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.2);
}

.shape-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--settings-muted);
  letter-spacing: 0.03em;
}

.shape-card.active .shape-card-label {
  color: var(--settings-accent);
}

.shape-card-preview {
  width: 2.25rem;
  height: 2.25rem;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.35), rgba(103, 232, 249, 0.08));
  border: 1px solid rgba(103, 232, 249, 0.45);
}

.shape-preview-square {
  border-radius: 0.35rem;
}

.shape-preview-circle {
  border-radius: 50%;
}

.shape-preview-hexagon {
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.shape-preview-pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.settings-page .live-settings-option {
  font-size: 0.84rem;
  color: var(--settings-text);
}

.settings-page .live-settings-option input {
  accent-color: var(--settings-accent);
}

.settings-page .live-settings-status,
.settings-page .live-settings-limit-hint {
  font-size: 0.72rem;
  color: var(--settings-muted);
}

.settings-page .live-settings-limit-hint {
  color: #fbbf24;
}

.settings-page .platform-connect-btn.is-connected {
  background: rgba(103, 232, 249, 0.12);
  border-color: var(--settings-accent);
  color: var(--settings-accent);
}

#view-settings {
  max-width: none;
  margin: 0;
  padding: 0;
}

.settings-section-wide {
  border-radius: 1rem;
}

.settings-section {
  background: var(--card-bg);
  border: 1px solid var(--border-grey);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.settings-section h2 {
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: var(--accent-cyan);
}

.live-settings-heading {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 1rem;
}

.live-settings-intro {
  margin-bottom: 1.25rem;
}

.live-settings-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 1rem;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
}

.live-settings-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.live-settings-card-head {
  margin-bottom: 0.85rem;
}

.live-settings-card-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.live-settings-options {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.live-settings-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-color);
  min-height: 44px;
}

.live-settings-option-label {
  flex: 1 1 auto;
}

.multistream-live-only-note,
.multistream-upgrade-note {
  margin: 0.25rem 0 0.4rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  background: rgba(103, 232, 249, 0.08);
  border: 1px solid rgba(103, 232, 249, 0.22);
  color: var(--settings-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.multistream-upgrade-note {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.22);
}

.multistream-platform-request-note {
  margin: 0 0 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: var(--settings-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.multistream-note--compact {
  max-width: 36rem;
}

.multistream-inline-link-btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--settings-accent, #67e8f9);
  text-decoration: underline;
  cursor: pointer;
}

.multistream-inline-link-btn:hover {
  color: #a5f3fc;
}

.settings-panel-profile-look,
.settings-panel-shape.settings-panel-card--full-width,
.settings-panel-camera.settings-panel-card--full-width {
  min-height: auto;
}

.settings-panel-profile-look {
  gap: 0.35rem;
}

.settings-panel-shape.settings-panel-card--full-width .shape-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  max-width: 42rem;
}

.profile-look-section {
  padding: 0.85rem 0 0.95rem;
  border-top: 1px solid rgba(51, 65, 85, 0.55);
}

.profile-look-section:first-of-type {
  border-top: none;
  padding-top: 0.15rem;
}

.profile-look-section-heading {
  margin-top: 0;
}

.profile-look-wallpaper-note {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
  background: rgba(103, 232, 249, 0.08);
  border: 1px solid rgba(103, 232, 249, 0.2);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--settings-text);
}

.multistream-section-heading {
  margin-top: 1rem;
}

.multistream-setup-progress {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(14, 116, 144, 0.12);
  max-width: 28rem;
}

.multistream-setup-progress-title {
  margin: 0 0 0.3rem;
  font-weight: 600;
  font-size: 0.88rem;
}

.multistream-setup-connected-summary {
  margin: 0 0 0.35rem;
  color: #86efac;
  font-size: 0.8rem;
}

.multistream-setup-progress-hint {
  margin: 0 0 0.4rem;
  color: var(--settings-text-muted, #94a3b8);
  font-size: 0.78rem;
  line-height: 1.35;
}

.multistream-setup-progress-list {
  margin: 0 0 0.45rem 1rem;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.multistream-setup-progress-list .is-done {
  color: #86efac;
}

.multistream-setup-progress-list .is-pending {
  color: var(--settings-text-muted, #94a3b8);
}

.multistream-setup-progress-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.multistream-action-btn,
.settings-panel-live .multistream-action-btn.settings-panel-btn-wide {
  width: auto !important;
  max-width: 100%;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.84rem;
  border-radius: 999px;
}

.multistream-setup-wizard-content,
.platform-connect-modal-content {
  max-width: min(26rem, 94vw);
  max-height: min(90dvh, 40rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.1rem 0.9rem;
  align-items: stretch;
  text-align: left;
  box-sizing: border-box;
  /* Allow free scroll; JS scrolls to top on step change (not RTMP bottom). */
  scroll-behavior: auto;
}

/* Sticky-ish step chrome: actions stay reachable without trapping scroll mid-panel */
#multistream-setup-wizard .multistream-setup-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent, var(--modal-bg) 28%);
  padding-top: 0.65rem;
  margin-top: 0.35rem;
  width: 100%;
  justify-content: flex-start;
}

/*
 * RTMP block must stay visible after disconnect / refill.
 * Default HTML no longer uses [hidden] on multistream wizard ingest.
 */
#multistream-setup-youtube-ingest.multistream-setup-rtmp-ingest,
#multistream-setup-youtube-ingest:not([hidden]),
#platform-connect-youtube-ingest:not([hidden]),
.platform-connect-youtube-ingest:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
}

#multistream-setup-youtube-ingest[hidden],
#platform-connect-youtube-ingest[hidden] {
  display: none !important;
}

.platform-connect-youtube-ingest .platform-connect-modal-input,
#multistream-setup-youtube-ingest .platform-connect-modal-input,
#multistream-setup-url.platform-connect-modal-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
}

#multistream-setup-step-2 {
  width: 100%;
  text-align: left;
}

#multistream-setup-step-2 .platform-connect-modal-label {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0.55rem 0 0.25rem;
}

.multistream-setup-step-label {
  margin: 0.2rem 0 0.35rem;
  color: #7dd3fc;
  font-size: 0.82rem;
}

.multistream-setup-intro,
.multistream-setup-step-desc,
.multistream-setup-paste-note {
  margin: 0 0 0.5rem;
  color: var(--settings-text-muted, #94a3b8);
  font-size: 0.82rem;
  line-height: 1.35;
}

.multistream-setup-paste-note {
  color: #fde68a;
}

.multistream-setup-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.multistream-setup-platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.4rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: inherit;
  cursor: pointer;
}

.multistream-setup-platform-card.is-selected {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}

.multistream-setup-platform-card.is-connected .multistream-setup-platform-status {
  color: #86efac;
}

.multistream-setup-platform-name {
  font-weight: 600;
}

.multistream-setup-platform-status {
  font-size: 0.78rem;
  color: var(--settings-text-muted, #94a3b8);
}

.multistream-setup-assign-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.multistream-setup-assign-card {
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.35);
}

.multistream-setup-assign-card.is-focused {
  border-color: rgba(56, 189, 248, 0.55);
}

.multistream-setup-assign-card h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}

.multistream-setup-assign-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
}

.multistream-setup-assign-note {
  font-size: 0.78rem;
  color: var(--settings-text-muted, #94a3b8);
}

.multistream-setup-assign-empty {
  margin: 0;
  color: #fde68a;
}

.multistream-setup-actions {
  justify-content: flex-end;
}

.multistream-platform-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-bottom: 0.85rem;
}

.settings-platform-row--coming-soon {
  opacity: 0.72;
}

.multistream-platform-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.multistream-group-assignments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.4rem 0 0.65rem;
  max-width: min(56rem, 100%);
}

.multistream-group-assignment {
  padding: 0.5rem 0.6rem;
  border-radius: 0.45rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(51, 65, 85, 0.65);
  /* flex size set earlier with .multistream-assign-strip > .multistream-group-assignment */
}

.multistream-group-assignment-title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--settings-text);
}

.multistream-group-assignment-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.multistream-group-assignment-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--settings-text);
}

.multistream-group-assignment-note {
  font-size: 0.72rem;
  color: var(--settings-muted);
}

.multistream-group-assignments-empty {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.82rem;
  color: var(--settings-muted);
}

.settings-panel-live.settings-panel-card--full-width {
  min-height: auto;
}

.settings-panel-live .settings-platform-row {
  padding: 0.45rem 0.6rem;
}

.settings-panel-live .multistream-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.settings-panel-live .live-settings-action-btn.multistream-action-btn {
  width: auto;
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 999px;
}

.multistream-slots-summary {
  max-width: 28rem;
  font-size: 0.8rem;
}

.settings-panel-friends.settings-panel-card--full-width .friends-connected-list {
  --settings-scroll-max: 12rem;
  min-height: 6rem;
}

.settings-panel-friends.settings-panel-card--full-width .friends-incoming-list,
.settings-panel-friends.settings-panel-card--full-width .friends-outgoing-list,
.settings-panel-friends.settings-panel-card--full-width .friends-settings-search-results {
  --settings-scroll-max: 8rem;
  min-height: 4.5rem;
}

.multistream-slots-summary {
  margin: 0.65rem 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  background: rgba(8, 47, 73, 0.28);
  border: 1px solid rgba(103, 232, 249, 0.22);
  font-size: 0.84rem;
  color: var(--text-color);
  line-height: 1.45;
}

.multistream-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.multistream-platform-row-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.multistream-platform-guide-link {
  padding: 0;
  border: none;
  background: none;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--settings-accent, #67e8f9);
  text-decoration: underline;
  cursor: pointer;
}

.multistream-platform-guide-link:hover {
  color: #a5f3fc;
}

.multistream-partner-guide-heading {
  margin: 0.85rem 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color, #f1f5f9);
}

.multistream-partner-guide-intro,
.multistream-partner-guide-footnote {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: var(--text-muted, #b0b0b0);
  line-height: 1.45;
}

.multistream-partner-guide-steps {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.multistream-partner-guide-steps a {
  color: var(--accent-cyan, #00e5ff);
}

.live-settings-action-btn-secondary {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid rgba(103, 232, 249, 0.45);
}

.live-settings-action-btn-secondary:hover:not(:disabled) {
  background: rgba(103, 232, 249, 0.1);
  opacity: 1;
}

.multistream-dest-tier {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  flex-shrink: 0;
}

.multistream-dest-tier.is-free {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.multistream-dest-tier.is-paid {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.live-settings-status.is-error {
  color: #fca5a5;
  margin-top: 0.65rem;
  min-height: 1rem;
}

.live-settings-status.is-success {
  color: #4ade80;
  margin-top: 0.65rem;
  min-height: 1rem;
}

.live-settings-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.live-settings-option input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent-cyan);
  flex: 0 0 auto;
}

.live-settings-upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.live-settings-upsell-inline {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.live-settings-upsell-copy {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.45;
}

.live-settings-action-btn {
  padding: 0.55rem 1.1rem;
  border-radius: 0.65rem;
  border: none;
  background: var(--accent-cyan);
  color: #000;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
  min-height: 44px;
  white-space: nowrap;
}

.live-settings-action-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.live-settings-action-btn:disabled,
.live-settings-action-btn.is-active {
  background: rgba(0, 229, 255, 0.18);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  cursor: default;
}

.live-settings-footnote,
.live-settings-limit-hint,
.live-settings-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.85rem;
  line-height: 1.4;
}

.live-settings-limit-hint {
  color: var(--accent-amber);
  margin-top: 0.5rem;
  min-height: 1rem;
}

.platform-connections-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.platform-connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-grey);
  border-radius: 0.75rem;
}

.platform-connection-name {
  font-size: 0.92rem;
}

.platform-connect-btn {
  padding: 0.45rem 0.9rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border-grey);
  background: transparent;
  color: var(--text-color);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  min-height: 44px;
  min-width: 6.5rem;
}

.platform-connect-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.platform-connect-btn.is-connected {
  background: rgba(0, 229, 255, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.settings-row label {
  font-size: 0.92rem;
  min-width: 120px;
}

.settings-theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.settings-theme-save-btn {
  margin-top: 0;
}

.settings-theme-reset-btn {
  margin-top: 0;
  color: var(--settings-muted);
  background: transparent;
  border: 1px solid var(--settings-border);
}

.settings-theme-reset-btn:hover {
  color: var(--settings-text);
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(103, 232, 249, 0.08);
}

.settings-more-content .live-settings-status {
  margin-top: 0.45rem;
  min-height: 1.1rem;
}

#bg-color-picker {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  background: #1a1a1a;
  cursor: pointer;
  min-height: 44px;
}

.bg-size-radios,
.wallpaper-size-radios {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.bg-size-radios label,
.wallpaper-size-radios label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.settings-wallpaper-remove-btn {
  margin-top: 0.35rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ff8a80;
  background: transparent;
  border: 1px solid rgba(255, 82, 82, 0.45);
  border-radius: 0.55rem;
  cursor: pointer;
  min-height: 44px;
}

.settings-wallpaper-remove-btn:hover:not(:disabled) {
  background: rgba(255, 82, 82, 0.1);
}

.settings-wallpaper-remove-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.thumbnail-preview-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.thumbnail-preview {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-grey);
  background: #1a1a1a;
}

#thumbnail-upload {
  font-size: 0.9rem;
  color: var(--text-color);
}

.settings-thumbnail-remove-btn {
  margin-top: 0.75rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ff8a80;
  background: transparent;
  border: 1px solid rgba(255, 82, 82, 0.45);
  border-radius: 0.55rem;
  cursor: pointer;
  min-height: 44px;
}

.settings-thumbnail-remove-btn:hover:not(:disabled) {
  background: rgba(255, 82, 82, 0.1);
}

.settings-thumbnail-remove-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.manage-groups-select-all-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  min-height: 44px;
}

.manage-groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
  max-height: 280px;
  overflow-y: auto;
}

.manage-groups-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  background: #141414;
  cursor: pointer;
  min-height: 44px;
}

.manage-groups-row:hover {
  border-color: rgba(0, 229, 255, 0.35);
}

.manage-groups-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.manage-groups-name {
  font-size: 0.92rem;
  font-weight: 600;
}

.manage-groups-role {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-groups-empty {
  margin-bottom: 0.5rem;
}

.btn-delete-groups {
  padding: 10px 20px;
  background: none;
  border: 1px solid #ff5252;
  border-radius: 4px;
  color: #ff5252;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.btn-delete-groups:hover:not(:disabled) {
  background: rgba(255, 82, 82, 0.12);
}

.btn-delete-groups:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-subheading {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1rem 0 0.5rem;
}

.settings-subheading:first-of-type {
  margin-top: 0;
}

.settings-subheading--spaced {
  margin-top: 1.35rem;
}

.blocked-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.blocked-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--border-grey);
  border-radius: 6px;
  background: #141414;
}

.blocked-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.blocked-item-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.blocked-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.blocked-list-empty {
  margin: 0 0 0.5rem;
}

.blocked-unblock-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  background: transparent;
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2rem;
}

.blocked-unblock-btn:hover {
  background: var(--accent-cyan-dim);
}

.blocked-add-controls {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
  margin-top: 0.35rem;
}

.blocked-add-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.block-target-search-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: #1a1a1a;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.88rem;
  min-height: 44px;
}

.block-target-search-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.block-target-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #141414;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.block-target-search-section-label {
  margin: 0;
  padding: 0.45rem 0.65rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9aa0a6);
}

.block-target-search-empty {
  margin: 0;
  padding: 0.65rem;
}

.block-target-search-result {
  display: flex;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
}

.block-target-search-result:last-child {
  border-bottom: 0;
}

.block-target-search-result:hover,
.block-target-search-result:focus-visible {
  background: rgba(0, 229, 255, 0.08);
  outline: none;
}

.block-target-search-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.block-target-search-name {
  font-size: 0.88rem;
  font-weight: 600;
}

.block-target-search-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #9aa0a6);
}

.btn-block-target {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid #ff5252;
  border-radius: 4px;
  color: #ff5252;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  flex: 0 0 auto;
}

.btn-block-target:hover {
  background: rgba(255, 82, 82, 0.1);
}

/* Legacy shape selector fallback (more settings) */
#settings-shape-selector:not(.shape-card-grid) {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#settings-shape-selector:not(.shape-card-grid) button {
  padding: 8px 16px;
  background: #1a1a1a;
  border: 1px solid var(--border-grey);
  border-radius: 4px;
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 0.15s, color 0.15s;
  min-width: 44px;
  min-height: 44px;
}

/* Wallpaper file input in Settings */
#wallpaper-upload {
  font-size: 0.9rem;
  color: var(--text-color);
}

/* Wallpaper size controls */
#wallpaper-size-controls {
  margin-top: 10px;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Ad slots — Partner Spotlight / AdSense placements
   -------------------------------------------------------------------------- */
.ad-slot {
  max-width: 64rem;
  width: 100%;
  margin: 0.85rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.ad-slot-top {
  max-width: 100%;
  margin: 0.5rem auto 0.25rem;
  padding: 0 0.75rem;
}

.ad-slot-feeds {
  margin: 0 0 1rem;
  padding: 0;
}

.ad-slot-stage-flank {
  flex: 0 0 10rem;
  width: 10rem;
  max-width: 10rem;
  margin: 0;
  padding: 0 0.15rem;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

.ad-slot-stage-flank[hidden] {
  display: none !important;
}

.ad-slot-stage-flank .ad-slot-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(var(--stage-frame-height-px, 851px), calc(100dvh - 20rem));
  padding: 0.65rem 0.5rem;
  flex-direction: column;
  justify-content: center;
}

.ad-slot-stage-flank .ad-slot-frame--mock {
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
}

.ad-slot-stage-flank .ad-slot-mock-hint {
  font-size: 0.65rem;
  line-height: 1.3;
}

/* Portrait phone only: hide side flanks (use top/under banners). Landscape keeps flanks. */
@media (max-width: 768px) and (orientation: portrait) {
  .ad-slot-stage-flank {
    display: none !important;
  }
}

@media (max-width: 768px) and (max-height: none) {
  /* no-op placeholder kept for cascade clarity */
}

/* Landscape / short: flanks visible (like desktop left/right); hide top/under banners */
@media (orientation: landscape), (max-height: 520px) {
  .ad-slot-stage-banner {
    display: none !important;
  }

  .stage-frame-center-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
  }

  .ad-slot-stage-flank:not([hidden]) {
    display: flex !important;
    flex: 0 0 min(5.5rem, 14vw);
    width: min(5.5rem, 14vw);
    max-width: min(5.5rem, 14vw);
    align-self: stretch;
  }

  .ad-slot-stage-flank .ad-slot-frame {
    min-height: 100%;
    padding: 0.35rem 0.25rem;
  }

  .ad-slot-stage-flank .ad-slot-mock-hint {
    font-size: 0.55rem;
    line-height: 1.2;
  }

  .stage-frame-center-wrap .stage-frame-shell {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Portrait phone: top + under banners */
.ad-slot-stage-banner {
  max-width: min(36rem, 100%);
  width: 100%;
  margin: 0.35rem auto 0.15rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.ad-slot-stage-banner--top {
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
}

.ad-slot-stage-banner--under {
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
}

.ad-slot-stage-banner[hidden] {
  display: none !important;
}

.ad-slot-stage-banner .ad-slot-frame {
  min-height: 3.25rem;
  padding: 0.45rem 0.65rem;
}

@media (min-width: 1101px) {
  .ad-slot-stage-banner {
    display: none !important;
  }
}

/* Portrait only show banners; landscape media above already hides them */
@media (max-width: 768px) and (orientation: portrait) {
  .ad-slot-stage-banner:not([hidden]) {
    display: block;
  }
}

.ad-slot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid var(--border-grey);
  border-radius: 1rem;
  overflow: hidden;
}

.ad-slot-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ad-slot iframe,
.ad-slot ins,
.ad-slot-frame iframe,
.ad-slot-frame ins {
  border-radius: 12px;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
}

.native-ad-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.native-ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.35);
}

/* Hide placeholder label once real ad markup is injected */
.ad-slot-frame:has(iframe) .ad-slot-label,
.ad-slot-frame:has(ins) .ad-slot-label,
.ad-slot-frame:has([data-ad]) .ad-slot-label {
  display: none;
}

.ad-slot-frame--mock .ad-slot-label {
  display: block;
  color: #fcd34d;
}

.ad-slot-frame:has(iframe),
.ad-slot-frame:has(ins),
.ad-slot-frame:has([data-ad]) {
  min-height: auto;
  padding: 0.5rem;
}

/* --------------------------------------------------------------------------
   Footer (Req 10)
   -------------------------------------------------------------------------- */
#app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
  background: #000000;
  border-top: 1px solid #334155;
  z-index: 50;
  pointer-events: auto;
}

.app-footer-line {
  margin: 0;
  line-height: 1.5;
  max-width: 100%;
}

.app-footer-line a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
  min-height: auto;
  min-width: auto;
}

.app-footer-line a:hover {
  color: #67e8f9;
}

.auth-legal-note {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

.auth-legal-note a {
  color: var(--accent-cyan);
  text-decoration: none;
}

.auth-legal-note a:hover {
  text-decoration: underline;
}

.legal-prompt-modal {
  z-index: 1002;
}

.legal-prompt-content {
  max-width: 28rem;
  text-align: left;
  align-items: stretch;
}

.legal-prompt-content h3 {
  text-align: center;
}

.legal-prompt-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.25rem 0 0.5rem;
}

.legal-prompt-links a {
  color: var(--accent-cyan);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  min-height: auto;
  min-width: auto;
}

.legal-prompt-links a:hover {
  text-decoration: underline;
}

.legal-prompt-content .modal-actions {
  justify-content: center;
  width: 100%;
}

.onboarding-welcome-modal,
.vidplaza-help-modal {
  z-index: 1003;
}

.onboarding-welcome-content,
.vidplaza-help-content {
  max-width: 32rem;
  text-align: left;
  align-items: stretch;
  position: relative;
}

.multistream-partner-guide-modal .vidplaza-help-content {
  width: min(100%, 36rem);
  max-width: 36rem;
  max-height: min(78vh, 34rem);
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1rem;
  gap: 0.35rem;
}

.multistream-partner-guide-modal .vidplaza-help-list,
.multistream-partner-guide-modal .multistream-partner-guide-steps {
  font-size: 0.86rem;
  line-height: 1.5;
}

.multistream-partner-guide-modal .vidplaza-help-humor {
  font-size: 0.86rem;
  line-height: 1.45;
}

.modal-close-btn {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-muted, #aaa);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  min-width: auto;
  min-height: auto;
}

.modal-close-btn:hover {
  color: var(--text-primary, #e8e8e8);
}

.onboarding-welcome-intro,
.onboarding-square-explainer,
.vidplaza-help-humor {
  font-size: 0.92rem;
  color: var(--text-muted, #b0b0b0);
  margin: 0 0 0.75rem;
}

.onboarding-choice-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

#onboarding-beta-options[hidden] {
  display: none !important;
}

.onboarding-choice-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan, #00e5ff);
  margin: 0;
}

.onboarding-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  min-height: auto;
}

.onboarding-choice:hover {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.06);
}

.onboarding-choice--recommended {
  border-color: rgba(0, 229, 255, 0.35);
}

.onboarding-choice-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-cyan, #00e5ff);
}

.onboarding-choice-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.onboarding-choice-desc {
  font-size: 0.82rem;
  color: var(--text-muted, #b0b0b0);
}

.onboarding-welcome-actions {
  justify-content: center;
  width: 100%;
  margin-top: 0.25rem;
}

.vidplaza-help-list {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.9rem;
}

.vidplaza-help-list a {
  color: var(--accent-cyan, #00e5ff);
}

.vidplaza-guide-mode .guide-hint-target {
  outline: 2px dashed rgba(0, 229, 255, 0.85);
  outline-offset: 3px;
  border-radius: 6px;
  /* Keep the real control above the tip so Square/etc stay clickable */
  position: relative;
  z-index: 100520 !important;
}

.guide-hint-tooltip {
  position: fixed;
  z-index: 10050;
  max-width: min(18rem, calc(100vw - 24px));
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.96);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #e8e8e8;
  font-size: 0.82rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.settings-panel-getting-started .settings-panel-btn {
  margin-bottom: 0.5rem;
}

.settings-panel-early-access .early-access-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.early-access-code-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-color);
}

.early-access-code-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border-grey);
  background: rgba(8, 12, 14, 0.9);
  color: var(--text-color);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Tap Targets — all interactive controls ≥44×44px (Req 8.4)
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea,
a[role="button"],
.nav-link,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/*
 * Stage tile overlays are exempt: 44×44 overflows 2–6-up media boxes and
 * lands in gutters. Keep compact, in-tile controls (mute / × / headset / +).
 */
.main-stage-slot button.stage-audio-mute-btn,
.main-stage-slot .stage-audio-mute-btn,
.main-stage-slot button.main-slot-remove,
.main-stage-slot .main-slot-remove,
.main-stage-slot button.participant-tile-add-friend,
.main-stage-slot button.participant-tile-square-wave,
.main-stage-slot button.participant-tile-square-audio,
.main-stage-slot .participant-tile-add-friend,
.main-stage-slot .participant-tile-square-wave,
.main-stage-slot .participant-tile-square-audio {
  min-width: 1.05rem !important;
  min-height: 1.05rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
}

.main-stage-slot button.stage-audio-mute-btn,
.main-stage-slot .stage-audio-mute-btn {
  width: clamp(1.05rem, 11cqmin, 1.35rem) !important;
  height: clamp(1.05rem, 11cqmin, 1.35rem) !important;
}

.main-stage-slot button.main-slot-remove,
.main-stage-slot .main-slot-remove {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

.main-stage-slot button.participant-tile-add-friend,
.main-stage-slot button.participant-tile-square-wave,
.main-stage-slot button.participant-tile-square-audio,
.main-stage-slot .participant-tile-add-friend,
.main-stage-slot .participant-tile-square-wave,
.main-stage-slot .participant-tile-square-audio {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

.stage-header-slider {
  min-height: 1.5rem;
  min-width: 4.75rem;
  width: 4.75rem;
}

/* --------------------------------------------------------------------------
   Responsive — ≤768px (Req 8)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #app-shell {
    flex-direction: column;
  }

  /* Feeds view stacks vertically on mobile */
  #view-feeds {
    flex-direction: column;
  }

  /* 8.2 — sidebar hidden by default on mobile, overlaid when .sidebar-open */
  #sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 150;
    width: 75vw;
    max-width: 260px;
    padding-top: 60px;
  }

  #sidebar.sidebar-open {
    display: flex;
  }

  /* Hamburger button visible on mobile */
  .hamburger-btn {
    display: flex;
  }

  #hamburger-btn {
    display: flex;
  }

  :root {
    --main-frame-size: min(78vw, 20rem);
    --peer-frame-size: min(20vw, 5.5rem);
  }

  .main-stage-grid {
    max-width: 100%;
    gap: 0.65rem;
  }

  .participant-frame,
  .participant-tile {
    width: min(22vw, 5.5rem);
  }

  .participant-frame {
    height: min(22vw, 5.5rem);
  }

  .call-control-btn {
    min-width: 6.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .nav-mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
  }

  #nav-bar {
    padding: 0.35rem max(0.55rem, env(safe-area-inset-right)) 0.35rem
      max(0.55rem, env(safe-area-inset-left));
    padding-top: max(0.35rem, env(safe-area-inset-top));
    min-height: 0;
  }

  .nav-bar-row {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .nav-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-spaces-wrap,
  .nav-desktop-tools {
    display: none !important;
  }

  /* VidPlaza | ☰ | Square | customs — brand first (Square + HRnLI) */
  .nav-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
  }

  #nav-bar .nav-brand {
    order: 0;
    flex: 0 0 auto;
    text-align: left;
  }

  .nav-mobile-menu-btn { order: 1; }
  .nav-mobile-header-square { order: 2; }
  .nav-mobile-header-customs { order: 3; }

  .nav-mobile-header-square {
    display: inline-flex !important;
  }

  .nav-mobile-header-square[hidden] {
    display: none !important;
  }

  /* Space ⋯ dropdown above mobile panel (opt-in / group options) */
  body.nav-mobile-open .space-dropdown:not([hidden]) {
    z-index: 100300 !important;
  }

  .nav-mobile-spaces-list .nav-mobile-space-item {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
  }

  .nav-mobile-spaces-list .nav-mobile-space-btn {
    flex: 1 1 auto;
  }

  .nav-mobile-space-menu {
    flex: 0 0 auto;
    min-width: 2.35rem;
    min-height: 2.35rem;
    border-radius: 0.65rem;
    border: 1px solid var(--border-grey);
    background: var(--surface-raised);
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  #nav-bar .nav-brand {
    font-size: 1.05rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-left: 0.15rem;
  }

  /* Footer: less height on phone — legal still reachable via About */
  #app-footer {
    min-height: 0;
    padding: 0.35rem 0.65rem calc(0.35rem + env(safe-area-inset-bottom));
    font-size: 0.65rem;
    line-height: 1.35;
  }

  .app-footer-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hub: room for content between chrome */
  #view-home.is-home-hub #home-hub-dashboard {
    padding-bottom: 0.5rem;
  }

  .home-hub-dashboard--free-grid .home-hub-card--video-calls,
  .home-hub-dashboard--free-grid .home-hub-card--video-messages {
    min-height: 11rem;
  }

  .home-hub-card--video-calls,
  .home-hub-card--video-messages {
    min-height: 11rem;
  }

  /* Docked 1:1 stage: room for local camera (pop-out already fine) */
  .private-call-privacy-note {
    display: none;
  }

  .home-hub-call-stage-slot {
    min-height: 14rem;
  }

  .home-hub-call-stage-slot .private-call-active-panel,
  .private-call-active-overlay.is-docked .private-call-active-panel {
    max-height: none;
    min-height: 14rem;
  }

  .home-hub-call-stage-slot .private-call-video-grid {
    min-height: 11rem;
    flex: 1 1 auto;
  }

  .home-hub-call-stage-slot .private-call-remote-wrap,
  .home-hub-call-stage-slot .private-call-local-wrap {
    max-height: none;
    min-height: 5.5rem;
  }

  .home-hub-call-stage-slot .private-call-local-video,
  .home-hub-call-stage-slot .private-call-remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-hub-call-stage-slot .private-call-active-header {
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
  }

  .home-hub-call-stage-slot .private-call-active-header h3 {
    font-size: 0.85rem;
  }

  .home-hub-call-stage-slot .private-call-header-actions {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .home-hub-call-stage-slot .private-call-header-actions button {
    min-height: 2rem;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
  }

  /* Join Public Square modal above mobile nav */
  #square-join-modal {
    z-index: 100400 !important;
  }

  #square-join-modal .modal-content,
  #square-join-modal .square-join-modal-content {
    max-width: min(22rem, calc(100vw - 1.5rem));
    margin: 1rem auto;
  }

  .nav-mobile-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.65rem max(0.65rem, env(safe-area-inset-right))
      calc(0.85rem + env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-grey);
    max-height: min(78dvh, calc(100dvh - 3.5rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-mobile-open #nav-bar {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .peer-strip-heading {
    padding: 0.45rem 0.75rem;
    min-height: 2.65rem;
  }

  .peer-strip-body {
    padding: 0.5rem 0.75rem 0.7rem;
  }

  /*
   * Row 1 mobile (from row_stage.mp4):
   * After Pull all → 6 tiles, flex pin still got shoved off-screen to the right.
   * Fix: ABSOLUTE pin Pull to the heading’s right edge + reserve padding so the
   * scroll track never eats its space. Scroll track = Tiles…On stage only.
   */
  .peer-strip {
    position: relative;
    z-index: 40;
    flex: 0 0 auto !important;
    min-height: 0;
    max-width: 100%;
    overflow: visible;
  }

  .peer-strip-heading {
    display: block !important;
    position: relative !important;
    z-index: 41;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
    /* Reserve right strip for pinned Pull (always on-screen) */
    padding: 0.4rem 6.5rem 0.4rem 0.35rem !important;
    min-height: 2.85rem;
  }

  /* Scroller = only the left track */
  .peer-strip-view {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 0.1rem 0.5rem 0.1rem 0.25rem !important;
  }

  .peer-strip-view > .peer-strip-view-zone,
  .peer-strip-view > .peer-strip-view-trail-group,
  .peer-strip-view-trail-group > .peer-strip-view-zone,
  .peer-strip-view .peer-strip-meta {
    display: contents !important;
  }

  .peer-strip-view .peer-strip-label,
  .peer-strip-view .peer-strip-waiting,
  .peer-strip-view .peer-strip-toggle,
  .peer-strip-view .session-badge,
  .peer-strip-view .group-18plus-indicator,
  .peer-strip-view .group-live-indicator,
  .peer-strip-view .peer-strip-mute-btn,
  .peer-strip-view .peer-strip-inline-divider,
  .peer-strip-view .peer-strip-view-divider,
  .peer-strip-view .participant-slot-counter {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    white-space: nowrap !important;
    max-width: none !important;
  }

  .peer-strip-view .peer-strip-mute-btn[hidden],
  .peer-strip-view .peer-strip-inline-divider[hidden],
  .peer-strip-view .peer-strip-view-divider[hidden],
  .peer-strip-view .session-badge[hidden],
  .peer-strip-view .group-18plus-indicator[hidden],
  .peer-strip-view .group-live-indicator[hidden],
  .peer-strip-view .participant-slot-counter[hidden] {
    display: none !important;
  }

  .peer-strip-view .participant-slot-counter {
    min-width: 6.5rem !important;
    box-sizing: border-box;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }

  .peer-strip-view .peer-strip-mute-btn:not([hidden]) {
    min-width: 6.75rem !important;
    box-sizing: border-box;
    justify-content: center;
  }

  /*
   * Pull: absolute to the heading — cannot be pushed off-screen by 6-up reflow.
   * (row_stage.mp4: after fill, Pull was gone; only “On stage: 6/6” remained.)
   */
  .peer-strip-heading > .peer-strip-pull-pinned,
  .peer-strip-heading > #btn-pull-all-toggle {
    position: absolute !important;
    right: 0.35rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 50 !important;
    flex: none !important;
    width: auto !important;
    min-width: 5.5rem !important;
    max-width: 6.25rem !important;
    margin: 0 !important;
    padding: 0.4rem 0.65rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    background: rgba(8, 12, 18, 0.96) !important;
  }

  .peer-strip-heading > .peer-strip-pull-pinned[hidden],
  .peer-strip-heading > #btn-pull-all-toggle[hidden] {
    display: none !important;
  }

  .peer-strip-heading > .peer-strip-pull-pinned.is-pull-down,
  .peer-strip-heading > #btn-pull-all-toggle.is-pull-down,
  .peer-strip-heading > #btn-pull-all-toggle[aria-pressed="true"] {
    border-color: rgba(0, 229, 255, 0.55) !important;
    color: var(--accent-cyan) !important;
    background: rgba(0, 40, 48, 0.95) !important;
  }

  .peer-strip-label-long {
    display: none;
  }

  .peer-strip-label-short {
    display: inline;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pull-all-label-long {
    display: none;
  }

  .pull-all-label-short {
    display: inline;
  }

  .peer-strip-toggle-text {
    display: none;
  }

  .peer-strip-view-trail-group .peer-strip-view-divider {
    display: none;
  }

  /* Landscape/portrait: inherit Studio-style row-1 scroller from ≤768 block above (no second layout). */

  /*
   * Pin Studio / dock top-left of footer — NO full-width shaded stripe over stage tiles.
   */
  .stage-bottom-chrome {
    position: fixed;
    left: 0.35rem;
    right: auto;
    bottom: calc(var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px) + 0.15rem);
    z-index: 55;
    width: auto;
    max-width: calc(100vw - 0.7rem);
    margin: 0;
    padding: 0.15rem 0.2rem;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    gap: 0.25rem;
    pointer-events: none;
    align-items: flex-start;
  }

  .stage-bottom-chrome .stage-session-dock {
    pointer-events: auto;
    margin: 0;
    width: auto;
    max-width: min(100vw - 0.75rem, 100%);
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0.1rem;
  }

  /* Expanded: controls chip keeps its own dark pill; dock shell stays clear */
  .stage-bottom-chrome .stage-session-dock:not(.is-minimized) {
    max-width: min(100vw - 0.5rem, 36rem);
  }

  .stage-session-dock {
    max-width: 100%;
    margin: 0;
    padding: 0.15rem;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.stage-dock-minimized .stage-bottom-chrome {
    background: transparent !important;
    width: auto;
    right: auto;
  }

  /* Mobile header: VidPlaza | ☰ | Square | up to 3 customs */
  .nav-mobile-header-customs:not([hidden]) {
    display: flex !important;
  }

  #nav-bar .nav-brand {
    flex: 0 0 auto;
    text-align: left;
    font-size: 1rem;
    order: 0;
  }

  .nav-left {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .nav-mobile-menu-btn {
    order: 1;
  }

  .nav-mobile-header-square {
    order: 2;
  }

  .nav-mobile-header-customs {
    order: 3;
  }

  .stage-session-dock-controls,
  .stage-session-dock .peer-strip-view-center {
    justify-content: flex-start;
    gap: 0.3rem;
    padding-right: 1.25rem; /* scroll last control fully into view */
  }

  /* Leave room so fixed chrome does not cover stage tile */
  .main-stage-section {
    padding-bottom: calc(5.5rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  }

  body.stage-dock-minimized .main-stage-section {
    padding-bottom: calc(3rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  }

  /*
   * Nested overflow-x:hidden on #main-content causes iOS "rubber glue" —
   * row 1 / stage pan bounce instead of scrolling after Square↔group hops.
   */
  #main-content,
  #view-home,
  .video-call-layout,
  .main-stage-section,
  .stage-frame-center-wrap {
    overflow-x: visible;
    overflow-y: visible;
  }

  /* Dedicated scroll surfaces — always panable on phone */
  .peer-strip-heading {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    overscroll-behavior-x: none;
  }

  .stage-frame-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y !important;
    overscroll-behavior: none;
  }

  .ad-slot-stage-banner {
    margin-bottom: 0.25rem;
  }

  .ad-slot-stage-banner--top {
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
  }

  .stage-frame-shell {
    width: 100%;
    max-width: 100%;
  }

  /*
   * Portrait only: large fixed cells + pan stage left/right (Acer touch).
   * Horizontal phone stage left alone (see landscape short block).
   */
  @media (orientation: portrait) {
    .stage-frame-center-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }

    .stage-frame-shell {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
    }

    .stage-frame-body {
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      height: auto;
      max-height: calc(100dvh - 11rem - var(--footer-height, 3rem));
      min-height: 14rem;
    }

    .stage-frame-shell[data-on-stage="1"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="2"] .stage-frame-body,
    .stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
      height: auto;
      max-height: calc(100dvh - 11rem - var(--footer-height, 3rem));
    }

    /* Video must not steal pan gestures from the stage scroller */
    .stage-frame-body,
    .stage-frame-shell .main-stage-slot,
    .stage-frame-shell .main-stage-slot .frame-media,
    .stage-frame-shell .main-stage-slot video,
    .stage-frame-shell .main-stage-slot img {
      touch-action: pan-x pan-y;
    }

    /*
     * Portrait stage stack (Vinny): force 2 columns, rows top→bottom.
     * Square tiles; no landscape 3-col band with half tiles on the right.
     * 2 on stage → 2×1 · 3–4 → 2×2 · 5–6 → 2×3 · 7–8 → 2×4 · 9 → 2×5
     */
    .stage-frame-shell {
      --stage-gap: 0.4rem;
      --stage-pad-x: 0.5rem;
      /*
       * 2-col portrait stack; cell ~half width so both columns fully fit
       * when scrolled to origin; extra grid padding enables L↔R pan to
       * clear any clipped edge (row_stage.mp4: half Ben/Casey tiles).
       */
      --stage-cell-base: calc((100vw - 2 * var(--stage-pad-x) - var(--stage-gap) - 0.5rem) / 2);
      --stage-cell: var(--stage-cell-base);
      --portrait-stage-cols: 2;
      --portrait-stage-rows: 2;
    }

    .stage-frame-shell[data-tile-size="compact"] {
      --stage-cell: calc(var(--stage-cell-base) * 0.88);
    }
    .stage-frame-shell[data-tile-size="standard"] {
      --stage-cell: var(--stage-cell-base);
    }
    .stage-frame-shell[data-tile-size="signing"] {
      --stage-cell: calc(var(--stage-cell-base) * 1.08);
    }

    .stage-frame-shell[data-on-stage="2"] {
      --portrait-stage-rows: 1;
    }
    .stage-frame-shell[data-on-stage="3"],
    .stage-frame-shell[data-on-stage="4"] {
      --portrait-stage-rows: 2;
    }
    .stage-frame-shell[data-on-stage="5"],
    .stage-frame-shell[data-on-stage="6"] {
      --portrait-stage-rows: 3;
    }
    .stage-frame-shell[data-on-stage="7"],
    .stage-frame-shell[data-on-stage="8"] {
      --portrait-stage-rows: 4;
    }
    .stage-frame-shell[data-on-stage="9"],
    .stage-frame-shell[data-on-stage="10"],
    .stage-frame-shell[data-on-stage="11"],
    .stage-frame-shell[data-on-stage="12"],
    .stage-frame-shell[data-on-stage="13"],
    .stage-frame-shell[data-on-stage="14"],
    .stage-frame-shell[data-on-stage="15"] {
      --portrait-stage-rows: 5;
    }

    /* Multi-up only — force 2-col portrait stack (override inline --stage-grid-*) */
    .stage-frame-shell[data-on-stage="2"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="3"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="4"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="5"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="6"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="7"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="8"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="9"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="10"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="11"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="12"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="13"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="14"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="15"] .main-stage-grid {
      display: grid !important;
      grid-template-columns: repeat(2, var(--stage-cell)) !important;
      grid-template-rows: repeat(var(--portrait-stage-rows, 2), var(--stage-cell)) !important;
      gap: var(--stage-gap, 0.4rem);
      /* Wider than viewport → pan left/right to clear full tiles */
      width: max(
        100%,
        calc(
          2 * var(--stage-cell)
          + var(--stage-gap, 0.4rem)
          + 2 * var(--stage-pad-x, 0.75rem)
          + 1.25rem
        )
      ) !important;
      min-width: max(
        100%,
        calc(
          2 * var(--stage-cell)
          + var(--stage-gap, 0.4rem)
          + 2 * var(--stage-pad-x, 0.75rem)
          + 1.25rem
        )
      ) !important;
      max-width: none !important;
      height: auto !important;
      min-height: calc(
        var(--portrait-stage-rows, 2) * var(--stage-cell)
        + (var(--portrait-stage-rows, 2) - 1) * var(--stage-gap, 0.4rem)
        + 1rem
      ) !important;
      aspect-ratio: auto !important;
      max-height: none !important;
      padding: 0.25rem var(--stage-pad-x, 0.75rem) 1rem;
      box-sizing: border-box;
      align-content: start;
      justify-content: start;
    }

    .stage-frame-shell[data-on-stage="2"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="3"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="4"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="5"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="6"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="7"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="8"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="9"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="10"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="11"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="12"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="13"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="14"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="15"] .main-stage-slot {
      width: var(--stage-cell);
      height: var(--stage-cell);
      min-width: var(--stage-cell);
      min-height: var(--stage-cell);
    }

    /* Portrait multi-up: always pan L↔R and U↔D over full stage (Vinny) */
    .stage-frame-shell[data-on-stage="2"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="3"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="4"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="5"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="6"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="7"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="8"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="9"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="10"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="11"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="12"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="13"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="14"] .stage-frame-body,
    .stage-frame-shell[data-on-stage="15"] .stage-frame-body {
      overflow-x: auto !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y !important;
      overscroll-behavior: none;
      scroll-padding: 0.65rem;
      max-height: calc(100dvh - 11.5rem - var(--footer-height, 3rem));
    }

    /* Wider track so L→R scroll can reveal full tile edges */
    .stage-frame-shell[data-on-stage="2"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="3"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="4"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="5"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="6"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="7"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="8"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="9"] .main-stage-grid {
      padding-right: 1.5rem !important;
      padding-bottom: 1.25rem !important;
    }

    .stage-frame-shell .main-stage-slot {
      width: var(--stage-cell, 7.5rem);
      height: var(--stage-cell, 7.5rem);
      min-width: var(--stage-cell, 7.5rem);
      min-height: var(--stage-cell, 7.5rem);
    }

    .stage-frame-shell .main-stage-slot .frame-media.polygon-frame {
      --stage-tile-size: calc(var(--stage-tile-scale, 1) * 100%);
      width: var(--stage-tile-size);
      height: var(--stage-tile-size);
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 1;
    }
    .stage-frame-shell[data-tile-size="standard"] .main-stage-slot {
      overflow: hidden;
    }

    /* 1-up: fill portrait width, no need to pan */
    .stage-frame-shell[data-on-stage="0"] .main-stage-grid,
    .stage-frame-shell[data-on-stage="1"] .main-stage-grid {
      --stage-cell: min(88vw, 26rem);
      width: 100%;
      min-width: 100%;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(min(88vw, 26rem), auto);
      justify-items: center;
    }

    .stage-frame-shell[data-on-stage="0"] .main-stage-slot,
    .stage-frame-shell[data-on-stage="1"] .main-stage-slot {
      width: min(88vw, 26rem);
      height: min(88vw, 26rem);
      min-width: min(88vw, 26rem);
      min-height: min(88vw, 26rem);
    }

    /* Standard + Signing always-hugged on mobile */
    .stage-frame-shell[data-tile-size="standard"],
    .stage-frame-shell[data-tile-size="signing"] {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
    .stage-frame-shell[data-tile-size="standard"] .stage-frame-body {
      width: 100% !important;
      height: auto !important;
      max-height: min(52dvh, calc(100dvh - 12rem)) !important;
      aspect-ratio: var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1) !important;
      overflow: hidden !important;
    }
    .stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
      width: 100% !important;
      height: auto !important;
      max-height: min(52dvh, calc(100dvh - 12rem)) !important;
      aspect-ratio: calc(var(--stage-grid-cols, 1) * 16)
        / calc(var(--stage-grid-rows, 1) * 9) !important;
      overflow: hidden !important;
    }
    .stage-frame-shell[data-tile-size="standard"] .main-stage-grid,
    .stage-frame-shell[data-tile-size="standard"][data-on-stage] .main-stage-grid,
    .stage-frame-shell[data-tile-size="signing"] .main-stage-grid,
    .stage-frame-shell[data-tile-size="signing"][data-on-stage] .main-stage-grid {
      display: grid !important;
      grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(0, 1fr)) !important;
      grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(0, 1fr)) !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 100% !important;
      min-height: 0 !important;
      gap: clamp(0.12rem, 0.28vw, 0.3rem) !important;
      padding: 0 !important;
      aspect-ratio: auto !important;
      overflow: hidden !important;
      background: #000;
    }
    .stage-frame-shell[data-tile-size="standard"] .main-stage-slot,
    .stage-frame-shell[data-tile-size="standard"][data-on-stage] .main-stage-slot,
    .stage-frame-shell[data-tile-size="signing"] .main-stage-slot,
    .stage-frame-shell[data-tile-size="signing"][data-on-stage] .main-stage-slot {
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    .stage-frame-shell[data-tile-size="standard"] .main-stage-slot .frame-media.polygon-frame {
      width: min(100cqw, 100cqh) !important;
      height: min(100cqw, 100cqh) !important;
      aspect-ratio: 1 / 1 !important;
      max-width: 100% !important;
      max-height: 100% !important;
    }
    .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame {
      width: min(100cqw, calc(100cqh * 16 / 9)) !important;
      height: min(100cqh, calc(100cqw * 9 / 16)) !important;
      aspect-ratio: 16 / 9 !important;
      max-width: 100% !important;
      max-height: 100% !important;
    }
  }

  /*
   * Landscape phone ≤768: packed stage only (VPFB tile_stage).
   * Fixed --stage-cell rows left a large black band between tile rows — removed.
   */
  @media (orientation: landscape) {
    .stage-frame-center-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
    }

    .stage-frame-shell {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .stage-frame-shell[data-tile-size="standard"] .stage-frame-body {
      width: 100%;
      height: auto;
      max-height: none;
      aspect-ratio: var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1);
      overflow: hidden;
    }

    .stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
      width: 100%;
      height: auto;
      max-height: none;
      aspect-ratio: calc(var(--stage-grid-cols, 1) * 16)
        / calc(var(--stage-grid-rows, 1) * 9);
      overflow: hidden;
    }

    .stage-frame-shell[data-tile-size="standard"] .main-stage-grid,
    .stage-frame-shell[data-tile-size="signing"] .main-stage-grid {
      display: grid !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0.12rem !important;
      background: #000 !important;
      box-sizing: border-box;
      grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(0, 1fr)) !important;
      grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(0, 1fr)) !important;
      align-content: stretch !important;
      justify-content: stretch !important;
      aspect-ratio: auto !important;
      max-width: none !important;
    }

    .stage-frame-shell[data-tile-size="standard"] .main-stage-slot,
    .stage-frame-shell[data-tile-size="signing"] .main-stage-slot {
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;
      max-height: none !important;
      overflow: hidden !important;
    }

    .stage-frame-shell[data-tile-size="standard"] .main-stage-slot .frame-media.polygon-frame {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      aspect-ratio: 1 / 1 !important;
      border-radius: 0 !important;
    }

    .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      aspect-ratio: 16 / 9 !important;
      border-radius: 0 !important;
    }

    .stage-frame-body,
    .stage-frame-shell .main-stage-slot,
    .stage-frame-shell .main-stage-slot .frame-media,
    .stage-frame-shell .main-stage-slot video,
    .stage-frame-shell .main-stage-slot img {
      touch-action: pan-y;
    }
  }

  .peer-strip-meta {
    gap: 0.65rem;
  }

  .pull-all-toggle-btn {
    font-size: 0.72rem;
  }

  .participants-hint {
    font-size: 0.72rem;
    padding: 0 0.35rem;
  }

  .go-live-preview-bar {
    padding: 0.7rem 0.65rem;
  }

  .video-call-layout {
    padding: 0 0.35rem;
  }

  .ad-slot-top {
    margin: 0.35rem auto 0.15rem;
    padding: 0 0.5rem;
  }

  .ad-slot-frame {
    min-height: 2.25rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
  }

  .ad-slot-label {
    font-size: 0.68rem;
  }

  .settings-page {
    padding: 1rem 0.85rem calc(1.5rem + env(safe-area-inset-bottom));
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
    width: 100%;
    max-width: 100%;
  }

  .settings-page-inner {
    width: 100%;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .settings-panel-card {
    min-height: auto;
    padding: 1.15rem 1rem;
  }

  .settings-panel-span-full {
    grid-column: auto;
  }

  .settings-toggle-row {
    min-height: 3.5rem;
    padding: 1rem;
  }

  .settings-toggle-switch {
    width: 3.25rem;
    height: 1.9rem;
  }

  .settings-toggle-switch::after {
    width: 1.5rem;
    height: 1.5rem;
  }

  .settings-toggle-input:checked + .settings-toggle-switch::after {
    transform: translateX(1.4rem);
  }

  .settings-panel-btn,
  .settings-platform-connects .platform-connect-btn,
  .settings-recording-reset-btn {
    min-height: 2.75rem;
    font-size: 0.9rem;
  }

  .settings-display-name-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .settings-display-name-save {
    width: auto;
    flex: 0 0 auto;
    min-height: 2.5rem;
  }

  /* Compact display-name field — not a full-height textarea-looking box */
  .settings-display-name-input {
    flex: 1 1 10rem;
    max-width: min(18rem, 100%);
    width: auto;
    min-height: 2.5rem;
    height: 2.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 16px; /* iOS: avoid input zoom */
    border-radius: 0.55rem;
    line-height: 1.25;
  }

  /* Products Add-on: stack columns so labels do not paint vertical single-letter strips */
  .live-addons-picker-header {
    display: none;
  }

  .live-addons-row,
  .live-addons-shop-section-body .live-addons-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.75rem 0.65rem;
    grid-template-columns: none;
  }

  .live-addons-col,
  .live-addons-col-product,
  .live-addons-col-control,
  .live-addons-col-price {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .live-addons-row-label,
  .live-addons-row-free {
    white-space: normal;
    line-height: 1.4;
  }

  .live-addons-col-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .live-addons-col-price {
    text-align: left;
    font-weight: 600;
  }

  /* Multistream: buttons wrap full label — no spill past cyan pill */
  .live-settings-action-btn,
  .live-settings-action-btn-secondary,
  #btn-open-products-from-multistream,
  #btn-open-dvtv-partner-guide {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .live-settings-upsell,
  .settings-panel-live-addons .live-settings-upsell {
    flex-direction: column;
    align-items: stretch;
  }

  /* Account identity: readable stack on narrow phones */
  .settings-account-identity-row {
    grid-template-columns: 1fr;
    gap: 0.2rem 0;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .settings-account-identity-row dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--settings-muted, var(--text-muted));
  }

  .settings-account-identity-row dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .settings-account-identity-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .settings-account-identity-actions .settings-panel-btn {
    width: 100%;
  }

  .settings-panel-account-identity .settings-panel-desc,
  .settings-panel-account-identity .settings-subheading {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  .group-management-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .group-management-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.45rem;
  }

  .group-management-rename-btn,
  .group-management-delete-btn,
  .group-management-delete-all {
    width: 100%;
    min-height: 2.75rem;
  }

  .group-management-protected {
    max-width: none;
    text-align: left;
  }

  .settings-panel-scroll--lg {
    --settings-scroll-max: 18rem;
  }

  .group-name-modal-input {
    font-size: 16px;
  }

  .group-name-modal .modal-actions,
  .delete-group-simple-modal .modal-actions,
  .delete-groups-modal .modal-actions {
    width: 100%;
    flex-direction: column-reverse;
    gap: 0.55rem;
  }

  .group-name-modal .modal-actions button,
  .delete-group-simple-modal .modal-actions button,
  .delete-groups-modal .modal-actions button {
    width: 100%;
    min-height: 2.75rem;
  }

  .delete-groups-modal,
  .group-name-modal,
  .delete-group-simple-modal {
    z-index: 1003;
  }

  body.nav-mobile-open .app-modal {
    z-index: 1004;
  }

  .shape-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .shape-card {
    min-height: 4.5rem;
    padding: 0.55rem 0.35rem;
  }

  .app-modal {
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    align-items: flex-end;
  }

  .app-modal .modal-content {
    width: 100%;
    max-width: none;
    max-height: min(88dvh, calc(100dvh - 1.5rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem 1rem 0.5rem 0.5rem;
    margin: 0;
  }

  .stripe-checkout-modal.app-modal {
    align-items: center;
  }

  .stripe-checkout-modal .modal-content {
    border-radius: 1rem;
    max-height: min(92dvh, calc(100dvh - 2rem));
  }

  .video-call-screen,
  .video-call-layout {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .current-space-bar {
    padding: 0.3rem max(0.65rem, env(safe-area-inset-right)) 0.35rem
      max(0.65rem, env(safe-area-inset-left));
  }

  .current-space-actions,
  .session-controls-row {
    justify-content: flex-start;
    gap: 0.28rem;
  }

  .session-badge {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }

  .stage-header-slider {
    width: 3.5rem;
    min-width: 3.5rem;
  }

  .app-footer-line {
    font-size: 0.68rem;
  }

  #storage-warning-banner {
    font-size: 12px !important;
    padding: 8px 10px !important;
    top: env(safe-area-inset-top) !important;
  }

  .self-placeholder {
    padding: 1rem 0.85rem;
    gap: 0.75rem;
  }

  .self-placeholder p {
    font-size: 0.8rem;
    line-height: 1.45;
    max-width: 18rem;
  }

  .call-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.35rem calc(0.5rem + env(safe-area-inset-bottom));
  }

  .peer-node {
    width: 30vw;
    height: 30vw;
    max-width: 120px;
    max-height: 120px;
  }

  .video-card {
    width: calc(100vw - 2.5rem);
    position: static;
    margin-bottom: 1.25rem;
  }

  #feed-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

  /* Auth container fluid on mobile */
  .auth-container {
    padding: 1.5rem;
    max-width: 90vw;
  }

  /* Settings/Uploads fluid width */
  #view-settings,
  #view-uploads {
    width: 100%;
    max-width: 100%;
  }
}


/* Tablet landscape / short height (e.g. 819×431 DevTools): same bottom pin + ☰ panel as phone */
@media (max-height: 520px) and (min-width: 769px) {
  .peer-strip-label-long { display: none; }
  .peer-strip-label-short {
    display: inline;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .pull-all-label-long { display: none; }
  .pull-all-label-short { display: inline; }
  .peer-strip-heading {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .peer-strip-view {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    column-gap: 0.4rem;
    padding-right: 1.5rem;
  }
  .peer-strip-view-zone--lead,
  .peer-strip-view-zone--mid,
  .peer-strip-view-trail-group {
    flex: 0 0 auto;
    min-width: max-content;
  }
  .peer-strip-view-zone--mid .session-badge {
    max-width: none;
    font-size: 0.6rem;
    white-space: nowrap;
  }
  .stage-bottom-chrome {
    position: fixed;
    left: 0.35rem;
    right: auto;
    bottom: calc(var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px) + 0.15rem);
    z-index: 55;
    width: auto;
    max-width: calc(100vw - 0.7rem);
    margin: 0;
    padding: 0.15rem 0.2rem;
    background: transparent !important;
    gap: 0.25rem;
    pointer-events: none;
    align-items: flex-start;
  }
  .stage-bottom-chrome .stage-session-dock {
    pointer-events: auto;
  }
  .stage-session-dock-controls,
  .stage-session-dock .peer-strip-view-center {
    justify-content: flex-start;
    padding-right: 1.25rem;
    touch-action: pan-x;
  }
  .main-stage-section {
    padding-bottom: calc(5.5rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  }
  body.stage-dock-minimized .main-stage-section {
    padding-bottom: calc(2.75rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  }

  /* ☰ expanded panel must work in short landscape (was only styled ≤768) */
  .nav-mobile-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.5rem max(0.65rem, env(safe-area-inset-right))
      calc(0.65rem + env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-grey);
    max-height: min(72dvh, calc(100dvh - 3rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Landscape: large cells + tile-scale; flanks take side ads (see ad-slot-stage-flank rules) */
  .stage-frame-body {
    overflow: auto;
    max-height: calc(100dvh - 9rem - var(--footer-height, 3rem));
    min-height: 12rem;
    height: auto;
  }
  .stage-frame-shell .main-stage-grid {
    display: grid;
    grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(10.5rem, 1fr));
    grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(10.5rem, 1fr));
    width: 100%;
    min-height: min(100%, calc(var(--stage-grid-rows, 1) * 11rem));
    aspect-ratio: var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1);
    gap: 0.35rem;
    padding: 0.2rem;
    align-content: stretch;
  }
  .stage-frame-shell .main-stage-slot {
    width: 100%;
    height: 100%;
    min-height: 10.5rem;
  }
  /* Keep aspect from shell data-tile-size (square Standard/Compact, 16:9 Signing) */
  .stage-frame-shell .main-stage-slot .frame-media.polygon-frame {
    width: min(
      calc(100cqw * var(--stage-tile-scale, 0.88)),
      calc(100cqh * var(--stage-tile-scale, 0.88) * (var(--stage-tile-aspect-w, 1) / var(--stage-tile-aspect-h, 1)))
    );
    height: min(
      calc(100cqh * var(--stage-tile-scale, 0.88)),
      calc(100cqw * var(--stage-tile-scale, 0.88) / (var(--stage-tile-aspect-w, 1) / var(--stage-tile-aspect-h, 1)))
    );
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--stage-tile-aspect-w, 1) / var(--stage-tile-aspect-h, 1);
  }
  .stage-frame-shell[data-tile-size="standard"] .main-stage-slot,
  .stage-frame-shell[data-tile-size="standard"] .main-stage-grid,
  .stage-frame-shell[data-tile-size="signing"] .main-stage-slot,
  .stage-frame-shell[data-tile-size="signing"] .main-stage-grid {
    overflow: hidden;
  }
  .stage-frame-shell[data-tile-size="standard"] .stage-frame-body,
  .stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
    overflow: hidden;
  }
  .stage-frame-shell[data-tile-size="standard"] .main-stage-grid,
  .stage-frame-shell[data-tile-size="signing"] .main-stage-grid {
    grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(0, 1fr)) !important;
    gap: clamp(0.12rem, 0.28vw, 0.3rem) !important;
    background: #000;
  }
  .stage-frame-shell[data-tile-size="standard"] .main-stage-slot .frame-media.polygon-frame {
    width: min(100cqw, 100cqh) !important;
    height: min(100cqw, 100cqh) !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame {
    width: min(100cqw, calc(100cqh * 16 / 9)) !important;
    height: min(100cqh, calc(100cqw * 9 / 16)) !important;
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .stage-bottom-chrome {
    align-items: flex-start;
    padding-left: 0.45rem;
  }
  .stage-bottom-chrome .stage-session-dock {
    margin-left: 0;
    margin-right: auto;
  }

  .nav-mobile-header-customs:not([hidden]) {
    display: flex !important;
  }

  #nav-bar .nav-brand {
    flex: 0 0 auto !important;
    text-align: left !important;
  }
}
/* Short phone landscape: slightly shorter bottom chrome pad */
@media (max-width: 768px) and (max-height: 520px) {
  .main-stage-section {
    padding-bottom: calc(6.25rem + var(--footer-height, 3rem) + env(safe-area-inset-bottom, 0px));
  }

  .stage-bottom-chrome {
    padding-top: 0.2rem;
    padding-bottom: 0.25rem;
  }
}

/*
 * Mobile LANDSCAPE (horizontal) — Vinny p212→p213:
 * Full column scroll: row 1 → stage → Studio.
 *
 * p212 miss: #view-home.video-call-screen is height:100% + overflow:hidden
 * so #main-content never got a scrollHeight > clientHeight (stuck). Nested
 * .stage-frame-body { overflow:auto } also stole vertical gestures.
 */
@media (max-width: 900px) and (orientation: landscape) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  #main-app,
  #app-shell {
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* THE scroll surface for the live stack */
  #main-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-y: contain;
  }

  /*
   * Critical: video-call-screen defaults height:100% + overflow:hidden —
   * that traps the stack at viewport height so the page cannot grow/scroll.
   */
  #view-home,
  #view-home.video-call-screen,
  .video-call-screen {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: min-content !important;
    overflow: visible !important;
  }

  .video-call-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 0.25rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .peer-strip {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 40;
  }

  .main-stage-section {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0.25rem !important;
  }

  body.stage-dock-minimized .main-stage-section {
    padding-bottom: 0.25rem !important;
  }

  /* Studio in document flow — scroll to it */
  .stage-bottom-chrome {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.15rem 0 0.75rem !important;
    padding: 0.2rem 0.35rem 0.65rem !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: flex-start !important;
  }

  .stage-bottom-chrome .stage-session-dock {
    pointer-events: auto !important;
    max-width: 100% !important;
  }

  /* Full stage height (no inner scrollbar that steals pan) */
  .stage-frame-shell,
  .stage-frame-shell[data-tile-size="standard"],
  .stage-frame-shell[data-tile-size="signing"] {
    max-width: 100% !important;
    width: min(100%, 100%) !important;
    margin-inline: auto;
    overflow: visible !important;
  }

  .stage-frame-body,
  .stage-frame-shell[data-tile-size="standard"] .stage-frame-body,
  .stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    /* Let vertical pan go to #main-content (no nested Y scroll) */
    touch-action: pan-y !important;
  }

  .stage-frame-center-wrap {
    overflow: visible !important;
    width: 100%;
    height: auto !important;
  }

  /*
   * Stage tile hug (VPFB tile_stage): kill fixed --stage-cell layout that left a
   * huge black band between row 1 and row 2. Body aspect = cols:rows so each
   * 1fr cell is square; tiles fill 100% of the cell (no centered letterbox).
   */
  .stage-frame-shell[data-tile-size="standard"] {
    width: min(
      100%,
      calc((100dvh - 5.5rem) * var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1))
    ) !important;
    max-width: 100% !important;
  }

  .stage-frame-shell[data-tile-size="standard"] .stage-frame-body {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--stage-grid-cols, 1) / var(--stage-grid-rows, 1) !important;
    overflow: hidden !important;
  }

  .stage-frame-shell[data-tile-size="standard"] .main-stage-grid {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.12rem !important;
    background: #000 !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(0, 1fr)) !important;
    /* cancel fixed-cell landscape rules */
    --stage-cell: unset;
    aspect-ratio: auto !important;
  }

  .stage-frame-shell[data-tile-size="standard"] .main-stage-slot {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* Fill the square cell completely — no min(cqw,cqh) letterbox gutters between rows */
  .stage-frame-shell[data-tile-size="standard"] .main-stage-slot .frame-media.polygon-frame {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 1 1 auto !important;
    border-radius: 0 !important;
    align-self: stretch !important;
  }

  .stage-frame-shell[data-tile-size="signing"] {
    width: min(
      100%,
      calc(
        (100dvh - 5.5rem)
        * var(--stage-grid-cols, 1)
        * 16
        / (var(--stage-grid-rows, 1) * 9)
      )
    ) !important;
    max-width: 100% !important;
  }

  .stage-frame-shell[data-tile-size="signing"] .stage-frame-body {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: calc(var(--stage-grid-cols, 1) * 16)
      / calc(var(--stage-grid-rows, 1) * 9) !important;
    overflow: hidden !important;
  }

  .stage-frame-shell[data-tile-size="signing"] .main-stage-grid {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.12rem !important;
    background: #000 !important;
    grid-template-columns: repeat(var(--stage-grid-cols, 1), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--stage-grid-rows, 1), minmax(0, 1fr)) !important;
    aspect-ratio: auto !important;
  }

  .stage-frame-shell[data-tile-size="signing"] .main-stage-slot {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-width: none !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    border-radius: 0 !important;
  }

  .stage-frame-shell .main-stage-slot,
  .stage-frame-shell .main-stage-slot .frame-media,
  .stage-frame-shell .main-stage-slot video,
  .stage-frame-shell .main-stage-slot img,
  .stage-frame-shell .main-stage-slot canvas {
    touch-action: pan-y !important;
  }

  /* Row-1: horizontal only on the strip controls */
  .peer-strip-heading,
  .peer-strip-view {
    touch-action: pan-x !important;
  }
}

@media (max-width: 480px) {
  .shape-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-page-title {
    font-size: 1.4rem;
  }

  .call-control-btn {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    min-height: 2.75rem;
  }

  #btn-go-live {
    flex: 1 1 100%;
  }

  .participant-frame,
  .participant-tile {
    width: min(28vw, 5rem);
  }

  .participant-frame {
    height: min(28vw, 5rem);
  }
}

/* Feeds hamburger button — hidden on desktop, visible at ≤768px */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 160;
}

/* Nav hamburger hidden on desktop */
#hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Sidebar overlay backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 140;
}

.sidebar-backdrop.visible {
  display: block;
}
.hand-waves-shell,
.square-audio-shell {
  display: inline-flex;
  align-items: center;
}

.hand-waves-shell[hidden],
.square-audio-shell[hidden] {
  display: none;
}

.hand-waves-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hand-waves-toggle.has-waves,
.hand-waves-toggle.is-open,
.member-hand-wave-btn.is-waving {
  color: #ffd166;
}

.hand-waves-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ffd166;
  color: #1a1200;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.hand-waves-badge[hidden] {
  display: none;
}

.hand-waves-shell.has-pending-waves .hand-waves-badge {
  animation: hand-wave-badge-pulse 1.1s ease-in-out infinite;
}

.peer-strip {
  position: relative;
}

.hand-waves-dropdown {
  position: fixed;
  z-index: 120;
  width: min(16.5rem, calc(100vw - 1.5rem));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem 0.8rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 209, 102, 0.4);
  background: rgba(12, 16, 24, 0.98);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
}

.hand-waves-dropdown[hidden] {
  display: none !important;
}

.hand-waves-dropdown-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  flex: 0 0 auto;
}

.hand-waves-dropdown-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.hand-waves-dropdown-count {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.hand-waves-dropdown-clear,
.hand-waves-dropdown-close {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  cursor: pointer;
}

.hand-waves-dropdown-close {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.hand-waves-dropdown-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.hand-waves-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 13.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
  scrollbar-width: thin;
}

/* Square Audio strip control + dropdown (mirrors Hand Waves chrome) */
.square-audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.square-audio-toggle.has-pending,
.square-audio-toggle.is-open {
  color: #67e8f9;
}

.square-audio-toggle.has-active:not(.has-pending) {
  color: #a5f3fc;
}

.square-audio-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #67e8f9;
  color: #042f2e;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.square-audio-badge[hidden] {
  display: none;
}

.square-audio-dropdown {
  position: fixed;
  z-index: 120;
  /* Wider so name + status + Accept|Decline fit one row */
  width: min(22rem, calc(100vw - 1.25rem));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem 0.8rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  border: 1px solid rgba(103, 232, 249, 0.4);
  background: rgba(12, 16, 24, 0.98);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
}

.square-audio-dropdown[hidden] {
  display: none !important;
}

.square-audio-dropdown-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'title close'
    'count count';
  gap: 0.2rem 0.5rem;
  align-items: center;
  flex: 0 0 auto;
}

.square-audio-dropdown-title {
  grid-area: title;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.square-audio-dropdown-count {
  grid-area: count;
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.square-audio-dropdown-close {
  grid-area: close;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-radius: 8px;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  justify-self: end;
}

.square-audio-dropdown-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.square-audio-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 15.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
  scrollbar-width: thin;
}

/* One horizontal row: Name · status · buttons */
.square-audio-item,
.square-audio-item--row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.square-audio-item-name {
  flex: 0 1 auto;
  max-width: 5.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.square-audio-item-status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.square-audio-item-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.square-audio-item-btn {
  padding: 0.28rem 0.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* Accept = light green */
.square-audio-item-btn--accept {
  background: rgba(74, 222, 128, 0.22) !important;
  border-color: rgba(74, 222, 128, 0.55) !important;
  color: #bbf7d0 !important;
}

.square-audio-item-btn--accept:hover {
  background: rgba(74, 222, 128, 0.35) !important;
}

/* Decline / Cancel / Disconnect = light red */
.square-audio-item-btn--decline,
.square-audio-item-btn--disconnect {
  background: rgba(248, 113, 113, 0.18) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #fecaca !important;
}

.square-audio-item-btn--decline:hover,
.square-audio-item-btn--disconnect:hover {
  background: rgba(248, 113, 113, 0.3) !important;
}

.hand-waves-item {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
}

.hand-waves-item-focus {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 10px;
  background: rgba(255, 209, 102, 0.08);
  color: inherit;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  text-align: left;
}

.hand-waves-item-focus:hover {
  background: rgba(255, 209, 102, 0.14);
}

.hand-waves-item-clear {
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid rgba(255, 209, 102, 0.28);
  border-radius: 8px;
  background: rgba(255, 209, 102, 0.12);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}

.hand-waves-item-clear:hover {
  background: rgba(255, 209, 102, 0.22);
}

.hand-waves-item-lead {
  font-size: 1rem;
  flex: 0 0 auto;
}

.hand-waves-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.hand-waves-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hand-waves-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.stage-audio-shell {
  display: inline-flex;
  align-items: center;
}

.stage-audio-shell[hidden] {
  display: none;
}

.stage-audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.stage-audio-toggle.has-muted,
.stage-audio-toggle.is-open {
  color: #ffd88a;
}

.stage-audio-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ffc107;
  color: #1a1200;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.stage-audio-badge[hidden] {
  display: none;
}

.stage-audio-dropdown {
  position: fixed;
  z-index: 120;
  width: min(17rem, calc(100vw - 1.5rem));
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem 0.8rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 193, 7, 0.42);
  background: rgba(12, 16, 24, 0.98);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48);
}

.stage-audio-dropdown[hidden] {
  display: none !important;
}

.stage-audio-dropdown-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  flex: 0 0 auto;
}

.stage-audio-dropdown-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.stage-audio-dropdown-count {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.stage-audio-dropdown-close {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 0.15rem 0.45rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.stage-audio-dropdown-action {
  width: 100%;
  border: 1px solid rgba(255, 193, 7, 0.28);
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.1);
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  text-align: left;
}

.stage-audio-dropdown-action:hover:not(:disabled) {
  background: rgba(255, 193, 7, 0.18);
}

.stage-audio-dropdown-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stage-audio-dropdown-action[aria-pressed="true"] {
  border-color: rgba(255, 193, 7, 0.55);
  background: rgba(255, 193, 7, 0.22);
}

.stage-audio-dropdown-empty {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.stage-audio-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 13.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
  scrollbar-width: thin;
}

.stage-audio-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  border: 1px solid rgba(255, 193, 7, 0.22);
  border-radius: 10px;
  background: rgba(255, 193, 7, 0.06);
  padding: 0.45rem 0.55rem;
}

.stage-audio-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.stage-audio-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-audio-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.stage-audio-item-toggle {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 193, 7, 0.28);
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.12);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}

.stage-audio-item-toggle:hover {
  background: rgba(255, 193, 7, 0.22);
}

.stage-audio-item-toggle[aria-pressed="true"] {
  border-color: rgba(255, 193, 7, 0.55);
  background: rgba(255, 193, 7, 0.24);
}

#mute-toggle.is-admin-locked {
  opacity: 0.72;
  border-color: rgba(255, 193, 7, 0.45);
}

.participant-tile.is-hand-wave-priority {
  order: -1;
}

.participant-tile.hand-wave-attention-bump {
  animation: hand-wave-tile-bump 0.85s ease-in-out 2;
}

.participants-list.has-hand-wave-priority {
  /* flex order handles left bump; keep row direction */
}

.participant-hand-wave-overlay {
  position: absolute;
  top: 0.18rem;
  right: 0.18rem;
  left: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  animation: hand-wave-shake 0.9s ease-in-out infinite;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
  opacity: 0.92;
}

/* Bottom-right cluster: [headset] [+ or 👋] — clear of name tags (bottom-left) */
.participant-tile-chrome-cluster {
  position: absolute;
  right: 0.22rem;
  bottom: 0.22rem;
  left: auto;
  z-index: 8;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.22rem;
  pointer-events: none;
}

.participant-tile-add-friend,
.participant-tile-square-wave,
.participant-tile-square-audio {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 12, 18, 0.88);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  flex-shrink: 0;
}

.participant-tile-add-friend {
  color: var(--accent-cyan);
  border-color: rgba(0, 229, 255, 0.55);
}

.participant-tile-square-wave {
  font-size: 0.78rem;
  border-color: rgba(255, 209, 102, 0.5);
}

.participant-tile-square-audio {
  color: rgba(244, 251, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.5);
}

.participant-tile-square-audio--active {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.65);
  background: rgba(8, 47, 73, 0.9);
}

.participant-tile-square-audio--pending_out,
.participant-tile-square-audio--pending_in {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.55);
  animation: square-audio-pending-pulse 1.4s ease-in-out infinite;
}

@keyframes square-audio-pending-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.participant-tile-add-friend:hover,
.participant-tile-square-wave:hover,
.participant-tile-square-audio:hover {
  background: rgba(18, 24, 32, 0.94);
}

.square-audio-headset-icon {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
}

.participant-frame,
.participant-tile-chrome-host {
  position: relative;
}

/*
 * Strip tiles may show chrome slightly past the frame; stage tiles must NOT —
 * overflow:visible was letting mute/headset paint into multi-up gutters.
 */
.participant-tile .participant-frame.participant-tile-chrome-host {
  overflow: visible;
}

.main-stage-slot .frame-media.participant-tile-chrome-host,
.stage-frame-shell .main-stage-slot .frame-media.participant-tile-chrome-host {
  overflow: hidden !important;
}


.participant-tile.has-hand-wave .participant-frame {
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.35);
}

@keyframes hand-wave-shake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(14deg) scale(1.05); }
  40% { transform: rotate(-10deg) scale(1.02); }
  60% { transform: rotate(12deg) scale(1.06); }
  80% { transform: rotate(-8deg) scale(1.03); }
}

@keyframes hand-wave-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes hand-wave-tile-bump {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-10px); }
  70% { transform: translateX(4px); }
}

/* Compact stage REC pill — below go-live bar / modals so it never covers Start Live. */
/* Retired — stage camera still records; no floating REC chrome (all personas). */
.stage-rec-indicator {
  display: none !important;
  position: fixed;
  left: 50%;
  bottom: 4.1rem;
  transform: translateX(-50%);
  z-index: 40;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(12, 16, 24, 0.92);
  color: #fecaca;
  font: 700 0.72rem/1 Inter, Segoe UI, sans-serif;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.stage-rec-indicator[hidden] {
  display: none !important;
}
.stage-rec-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55);
  animation: stage-rec-pulse 1.2s ease-out infinite;
}
@keyframes stage-rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5); }
  70% { box-shadow: 0 0 0 0.45rem rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

/* VPL Products Add-on frozen — grey shop, no checkout abuse */
.products-addon-shell.is-products-frozen .live-addons-picker-table,
.products-addon-shell.is-products-frozen .live-addons-shortcuts,
.products-addon-shell.is-products-frozen .live-addons-cart {
  opacity: 0.55;
  filter: grayscale(0.35);
  pointer-events: none;
  user-select: none;
}
.products-addon-frozen-banner {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(30, 41, 59, 0.9);
  color: #cbd5e1;
  font: 600 0.88rem/1.4 Inter, Segoe UI, sans-serif;
}
.products-addon-shell.is-products-frozen #btn-live-addons-checkout {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Go Live sticky banner retired — keep hidden if any leftover node exists */
.go-live-status-banner,
.go-live-status-banner[hidden] {
  display: none !important;
}

/* Soft toasts — bottom center; exact 3/5/7/9s; small × to dismiss early */
/* Toasts above stage expand (11500) and under/over modals as needed */
.vp-toast,
#vp-toast-host,
.vp-toast-host{
  z-index: 230000 !important;
}
.vp-toast{
  position:fixed;
  left:50%;
  right:auto;
  top:auto;
  bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(120%);
  z-index:2147482990;
  max-width:min(28rem,calc(100vw - 1.5rem));
  width:max-content;
  box-sizing:border-box;
  padding:0.75rem 1.85rem 0.75rem 1rem;
  border-radius:0.75rem;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(12,16,24,0.96);
  color:#f5f7fb;
  font:600 0.86rem/1.4 Inter,Segoe UI,sans-serif;
  box-shadow:0 14px 32px rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
  overflow:visible;
  transition:transform .22s ease,opacity .22s ease;
}
.vp-toast.visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.vp-toast-message{
  display:block;
  padding-right:0.15rem;
}
.vp-toast-close{
  position:absolute;
  top:0.2rem;
  right:0.28rem;
  width:1.15rem;
  height:1.15rem;
  padding:0;
  margin:0;
  border:none;
  border-radius:4px;
  background:transparent;
  color:rgba(245,247,251,0.72);
  font:700 0.95rem/1 system-ui,Segoe UI,sans-serif;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.vp-toast-close:hover,
.vp-toast-close:focus-visible{
  color:#fff;
  background:rgba(255,255,255,0.12);
  outline:none;
}
.vp-toast--info{border-color:rgba(0,229,255,0.45);background:rgba(8,18,28,0.97);box-shadow:0 14px 32px rgba(0,0,0,0.45),0 0 0 1px rgba(0,229,255,0.12)}
.vp-toast--warning{border-color:rgba(255,193,7,0.45)}
.vp-toast--hand-wave{border-color:rgba(0,229,255,0.45);background:rgba(8,18,28,0.97)}
/* Legacy dismiss chrome */
.vp-toast-dismiss,.vp-toast--dismissible .vp-toast-dismiss{display:none!important}

/* ── Stage freeform layouts (Layout button) ───────────────────────────────
 * Spread bugs (VPFB spread_three vs three_by_three):
 *  1) stage body aspect changed with on-stage count → freeform % warped
 *  2) square frame-media (cqw/cqh) letterboxed inside freeform cells
 *  3) auto-grid reasserted after stage paint
 */
.stage-body--freeform,
.stage-frame-body.stage-body--freeform,
.stage-frame-shell[data-tile-size="standard"] .stage-frame-body.stage-body--freeform,
.stage-frame-shell[data-tile-size="signing"] .stage-frame-body.stage-body--freeform {
  position: relative !important;
  /* Stable designer-sized canvas — not cols/rows from live count */
  aspect-ratio: auto !important;
  width: 100% !important;
  height: min(var(--stage-frame-height-px, 720px), calc(100dvh - 11rem)) !important;
  max-height: min(var(--stage-frame-height-px, 720px), calc(100dvh - 11rem)) !important;
  min-height: min(360px, calc(100dvh - 14rem)) !important;
  overflow: hidden !important;
}
/* Pop-out: freeform body fills shell (admin row keeps its own strip) */
body.stage-viewport-expanded .stage-body--freeform,
body.stage-viewport-expanded .stage-frame-body.stage-body--freeform,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="standard"] .stage-frame-body.stage-body--freeform,
body.stage-viewport-expanded .stage-frame-shell[data-tile-size="signing"] .stage-frame-body.stage-body--freeform {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
#main-stage-grid.stage-grid--freeform,
.stage-frame-body.stage-body--freeform #main-stage-grid,
.stage-frame-body.stage-body--freeform #main-stage-grid.stage-grid--freeform,
.stage-frame-shell[data-tile-size="standard"] .stage-body--freeform #main-stage-grid {
  display: block !important;
  position: absolute !important;
  /* Do NOT force inset:0 alone without sized parent — JS stamps explicit px size.
   * inset:0 is OK when body has height; left/top/right/bottom explicit for safety. */
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 200px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  align-content: unset !important;
  overflow: hidden !important;
  /* Absolute children position against this box */
  transform: none !important;
}
/* Freeform absolute tiles — left/top/width/height come from inline styles (Layout).
 * Never set left/top:0 here or every tile stacks in one corner. */
#main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.stage-slot--freeform-pack),
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.stage-slot--freeform-pack) {
  position: absolute !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  flex: none !important;
  /* Center Standard square / Signing 16:9 media inside the freeform design box */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  container-type: size !important;
  /* Leave left/top/width/height to JS — only neutralize cascade stack traps */
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
/*
 * Freeform people: outer slot = designer % box (layout_custom).
 * Inner frame-media = largest Standard square OR Signing 16:9 that fits that box
 * (tile-size cog must change shape again — p104 fill-100% killed Standard↔Signing).
 * Sharescreen stays full design box (rules below).
 */
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media.polygon-frame,
#main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media.polygon-frame {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
/* Standard (square) — largest square inside freeform design cell */
.stage-frame-shell[data-tile-size="standard"] .stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="standard"] #main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="standard"] #main-stage-grid.stage-grid--freeform-pack .main-stage-slot:not(.main-stage-slot--sharescreen) .frame-media.polygon-frame {
  width: min(100cqw, 100cqh) !important;
  height: min(100cqw, 100cqh) !important;
  aspect-ratio: 1 / 1 !important;
  --_tile-ar: 1 !important;
}
/* Signing (16:9) — largest landscape inside freeform design cell (often fills wider boxes) */
.stage-frame-shell[data-tile-size="signing"] .stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="signing"] #main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media.polygon-frame,
.stage-frame-shell[data-tile-size="signing"] #main-stage-grid.stage-grid--freeform-pack .main-stage-slot:not(.main-stage-slot--sharescreen) .frame-media.polygon-frame {
  width: min(100cqw, calc(100cqh * 16 / 9)) !important;
  height: min(100cqh, calc(100cqw * 9 / 16)) !important;
  aspect-ratio: 16 / 9 !important;
  --_tile-ar: 1.777 !important;
}
/* Freeform-pack grid: relative centering inside CSS grid cells */
.stage-frame-shell #main-stage-grid.stage-grid--freeform-pack .main-stage-slot:not(.main-stage-slot--sharescreen) .frame-media.polygon-frame {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
/* People freeform media fills the Standard/Signing frame (not the outer design box alone). */
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > .video-placeholder,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > .camera-active-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
}
/* Studio Fill frame toggle — people only (never sharescreen). */
body.vp-video-frame-fit-fill .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
body.vp-video-frame-fit-fill .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img,
body.vp-video-frame-fit-fill #main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
body.vp-video-frame-fit-fill #main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img {
  object-fit: cover !important;
  object-position: center 38% !important;
}
body.vp-video-frame-fit-fit .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
body.vp-video-frame-fit-fit .stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img,
body.vp-video-frame-fit-fit #main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
body.vp-video-frame-fit-fit #main-stage-grid.stage-grid--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img {
  object-fit: contain !important;
  object-position: center center !important;
}
/* Signing + Fit: full camera in 16:9 (hands/torso) */
body.vp-video-frame-fit-fit .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame > video,
body.vp-video-frame-fit-fit .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame > img {
  object-fit: contain !important;
  object-position: center center !important;
}
body.vp-video-frame-fit-fill .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame > video,
body.vp-video-frame-fit-fill .stage-frame-shell[data-tile-size="signing"] .main-stage-slot .frame-media.polygon-frame > img {
  object-fit: cover !important;
  object-position: center 38% !important;
}
/*
 * Sharescreen MUST win over freeform cover — cover was cropping left/right of
 * the shared YouTube tab on VPL stage while Mux/YT (contain) showed the full page.
 */
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot--sharescreen .frame-media > video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .frame-media > video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot--sharescreen .stage-sharescreen-video,
.stage-frame-body.stage-body--freeform #main-stage-grid .main-stage-slot[data-participant-id="sharescreen"] .stage-sharescreen-video,
.stage-frame-shell[data-tile-size="standard"] .stage-body--freeform .main-stage-slot--sharescreen .frame-media > video,
.stage-frame-shell[data-tile-size="signing"] .stage-body--freeform .main-stage-slot--sharescreen .frame-media > video,
#main-stage-grid.stage-grid--freeform-pack .main-stage-slot--sharescreen .frame-media > video {
  object-fit: contain !important;
  object-position: center center !important;
}
/* Signing prefers contain so full hands stay in frame (same as non-freeform signing) */
.stage-frame-shell[data-tile-size="signing"] .stage-body--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
.stage-frame-shell[data-tile-size="signing"] .stage-body--freeform .main-stage-slot.stage-slot--freeform:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img,
.stage-frame-shell[data-tile-size="signing"] #main-stage-grid.stage-grid--freeform-pack .main-stage-slot:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > video,
.stage-frame-shell[data-tile-size="signing"] #main-stage-grid.stage-grid--freeform-pack .main-stage-slot:not(.main-stage-slot--sharescreen):not([data-participant-id="sharescreen"]) .frame-media > img {
  object-fit: contain !important;
}

/* Layout design mode — full stage body (not a 1/3 flex strip).
 * Wallpaper rule forces > * to position:relative; overlay must win with !important. */
.stage-frame-body.stage-body--layout-design,
.stage-frame-shell[data-tile-size="standard"] .stage-frame-body.stage-body--layout-design,
.stage-frame-shell[data-tile-size="signing"] .stage-frame-body.stage-body--layout-design {
  position: relative !important;
  /* Use full locked stage height, not short aspect-ratio strip */
  height: min(var(--stage-frame-height-px, 720px), calc(100dvh - 11rem)) !important;
  max-height: min(var(--stage-frame-height-px, 720px), calc(100dvh - 11rem)) !important;
  min-height: min(420px, calc(100dvh - 12rem)) !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}
.stage-frame-body.stage-body--layout-design > #main-stage-grid {
  /* Keep in DOM for size, but hide so overlay owns the full rectangle */
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Only show overlay while design mode is active (body class). */
.stage-frame-body.stage-body--layout-design > #stage-layout-design-overlay,
#stage-layout-design-overlay.stage-layout-design-overlay.is-open {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 90 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: block !important;
  background: rgba(4, 8, 14, 0.62);
  pointer-events: auto;
  visibility: visible !important;
}
/* Exit must always win over display:block !important above */
#stage-layout-design-overlay.stage-layout-design-overlay[hidden],
#stage-layout-design-overlay.stage-layout-design-overlay:not(.is-open),
.stage-layout-design-overlay[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
/* Canvas = full stage; Pack tray top + toolbar bottom float over canvas */
.stage-layout-design-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 2px dashed rgba(125, 211, 252, 0.5);
  border-radius: 0;
  box-sizing: border-box;
  background:
    linear-gradient(rgba(8, 16, 28, 0.4), rgba(8, 16, 28, 0.4)),
    var(--vp-stage-wallpaper, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.stage-layout-design-mocks {
  position: absolute;
  inset: 0;
}
.stage-layout-design-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.72);
  pointer-events: none;
  z-index: 1;
}
.stage-layout-design-empty[hidden] {
  display: none !important;
}

/* Pack tray — storage for You / Screen / guests before placing */
.stage-layout-pack-tray {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 0.4rem 0.5rem 0.45rem;
  background: rgba(6, 10, 16, 0.96);
  border-bottom: 1px solid rgba(125, 211, 252, 0.28);
  pointer-events: auto;
  /* Compact so chips don't cover half the stage / block resize */
  max-height: min(28%, 9.5rem);
  overflow-y: auto;
}
/* Hard close (class + hidden) — Pack button must be able to hide tray while designing */
.stage-layout-pack-tray[hidden],
.stage-layout-pack-tray:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: none !important;
}
.stage-layout-pack-tray.is-open:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: min(28%, 9.5rem) !important;
  height: auto !important;
  opacity: 1 !important;
}
.stage-layout-pack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.stage-layout-pack-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #67e8f9;
  letter-spacing: 0.02em;
}
.stage-layout-pack-status {
  font-size: 0.72rem;
  color: #94a3b8;
}
.stage-layout-pack-help {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.3;
}
.stage-layout-pack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.stage-layout-pack-empty {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}
.stage-layout-pack-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(125, 211, 252, 0.4);
  background: rgba(12, 24, 36, 0.92);
  color: #e0f2fe;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.stage-layout-pack-chip:hover {
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 40, 48, 0.9);
  transform: translateY(-1px);
}
.stage-layout-pack-chip--self {
  border-color: rgba(52, 211, 153, 0.55);
}
.stage-layout-pack-chip--share {
  border-color: rgba(251, 191, 36, 0.6);
}
.stage-layout-pack-chip-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.18);
  color: #67e8f9;
  font-weight: 800;
  line-height: 1;
}
.stage-layout-pack-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.2);
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 800;
}
.stage-layout-mock-return {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 0.3rem;
  background: rgba(8, 12, 18, 0.88);
  color: #e2e8f0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.stage-layout-mock-return:hover {
  border-color: rgba(248, 113, 113, 0.65);
  color: #fca5a5;
}
.stage-layout-design-btn--pack.is-active {
  border-color: rgba(0, 229, 255, 0.55);
  background: rgba(0, 229, 255, 0.14);
  color: #67e8f9;
}
.stage-layout-design-btn--exit {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(6, 40, 32, 0.75);
  color: #6ee7b7;
  font-weight: 700;
}
.stage-layout-design-btn--exit:hover {
  background: rgba(6, 60, 45, 0.9);
  border-color: rgba(52, 211, 153, 0.75);
}
.stage-layout-mock {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border-radius: 0.4rem;
  border: 2px solid rgba(0, 229, 255, 0.55);
  background: rgba(12, 24, 36, 0.88);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.35rem 0.45rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.stage-layout-mock.is-dragging {
  z-index: 20;
  cursor: grabbing;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.stage-layout-mock:active {
  cursor: grabbing;
}
.stage-layout-mock--self {
  border-color: rgba(52, 211, 153, 0.7);
  background: linear-gradient(145deg, rgba(6, 40, 32, 0.92), rgba(10, 22, 28, 0.9));
  z-index: 8;
}
.stage-layout-mock--share {
  border-color: rgba(251, 191, 36, 0.75);
  background: linear-gradient(145deg, rgba(40, 28, 6, 0.92), rgba(18, 14, 8, 0.9));
  /* Under people mocks so “You” / guests stay grabable when stacked on share */
  z-index: 2;
}
.stage-layout-mock--guest {
  border-color: rgba(125, 211, 252, 0.55);
  z-index: 6;
}
.stage-layout-mock-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e0f2fe;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.stage-layout-mock-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.65rem;
  height: 1.65rem;
  z-index: 3;
  border-radius: 0.25rem 0 0.3rem 0;
  background:
    linear-gradient(135deg, transparent 48%, rgba(0, 229, 255, 0.25) 48%, rgba(0, 229, 255, 0.25) 52%, transparent 52%),
    linear-gradient(135deg, transparent 58%, rgba(0, 229, 255, 0.95) 58%);
  cursor: nwse-resize;
  touch-action: none;
  pointer-events: auto;
}
.stage-layout-mock-resize:hover {
  background:
    linear-gradient(135deg, transparent 48%, rgba(103, 232, 249, 0.35) 48%, rgba(103, 232, 249, 0.35) 52%, transparent 52%),
    linear-gradient(135deg, transparent 58%, rgba(103, 232, 249, 1) 58%);
}
.stage-layout-design-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 10, 16, 0.92) 28%, rgba(6, 10, 16, 0.98) 100%);
  border-top: 1px solid rgba(125, 211, 252, 0.28);
  pointer-events: auto;
}
.stage-layout-design-hint {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.3;
}
.stage-layout-design-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.stage-layout-design-btn {
  appearance: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  cursor: pointer;
}
.stage-layout-design-btn--primary {
  border-color: rgba(0, 229, 255, 0.5);
  background: rgba(0, 229, 255, 0.12);
  color: #67e8f9;
}
.stage-layout-design-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Layout admin dropdown rows */
.stage-admin-panel--layout {
  min-width: min(16rem, 78vw);
  max-height: min(22rem, 55vh);
  overflow-y: auto;
}
.stage-admin-layout-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.stage-admin-item--custom-plus {
  border: 1px dashed rgba(0, 229, 255, 0.45) !important;
  color: #67e8f9 !important;
  font-weight: 700 !important;
}
.stage-admin-layout-meta {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 0.1rem;
}
.stage-admin-layout-row {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
}
.stage-admin-layout-row.is-active .stage-admin-layout-apply {
  border-color: rgba(0, 229, 255, 0.45);
  color: #67e8f9;
}
.stage-admin-layout-apply {
  flex: 1 1 auto;
  text-align: left;
}
.stage-admin-layout-delete {
  flex: 0 0 auto;
  width: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.4rem;
  background: transparent;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.stage-admin-layout-delete:hover {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
}
.stage-admin-layout-count {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: #64748b;
  text-align: right;
}
.stage-admin-item.is-active {
  border-color: rgba(0, 229, 255, 0.4);
  color: #67e8f9;
}

/* Freeform pack — CSS grid fallback only (stacked/missing design). Prefer custom freeform. */
#main-stage-grid.stage-grid--freeform-pack {
  display: grid !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  gap: 4px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}
#main-stage-grid.stage-grid--freeform-pack .stage-slot--freeform-pack {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  /* Needed for Standard square / Signing 16:9 cqw·cqh inside grid cells */
  container-type: size !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}