/* IMB SHELL CONSOLIDATION KIT V1.1 — shell-consolidation-v1-1-20260503 */
/* Preserves current feature rendering; shell-only cleanup. */

/* Shell-ready loader contract */
body.shell-ready #imb-global-loader { display:none !important; }

/* =====================================================
   IMB SECURITY CORE: FAIL-CLOSED STATES
===================================================== */

/* Global Loader prevents interaction while Firebase boots */
.global-auth-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at top, #101020, #050509 55%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f5f5ff;
  transition: opacity 0.3s ease-out;
}

/* The locked class completely removes the main app from the flow */
.imb-locked {
  display: none !important;
}

/* Auth-only elements remain hidden until auth verification. */
.auth-only {
  display: none !important;
}
.auth-verified .auth-only {
  display: block !important;
}

/* BASE: adminworkspace */

/* Base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at top, #101020, #050509 55%);
  color: #f5f5ff;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* Layout */
.main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 48px;
  padding: 40px 16px 24px;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  background: rgba(5, 5, 13, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  flex-wrap: nowrap;
}

.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Desktop logo: bigger, but inside a shorter bar */
.topbar .logo .logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;

  /* 🔥 Optical scaling */
  transform: scale(1.15);
  transform-origin: left center;
}

/* Keep nav centered and on one line */
.nav {
  display: flex;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav-btn {
  border: none;
  background: transparent;
  color: #d5d5ff;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

/* Right side stays on one line */
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10, 10, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: nowrap;
}

.auth-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Mobile logo: make it bigger too */
.mobile-topbar .mobile-logo-btn .logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;

  transform: scale(1.15);
  transform-origin: center;
}

/* Medium desktop/laptop tuning */
@media (max-width: 1180px) {
  .topbar {
    gap: 10px;
    padding: 6px 12px;
  }

  .topbar .logo .logo-img {
    height: 46px;
  }

  .nav {
    gap: 4px;
  }

  .nav-btn {
    padding: 6px 8px;
    font-size: 0.82rem;
  }

  .search-form input[type="search"] {
    min-width: 120px;
  }
}

/* Phone-only fine tune */
@media (max-width: 640px) {
  .mobile-topbar .mobile-logo-btn .logo-img {
    height: 30px;
  }
}

/* Admin nav indicator */
.nav-btn-admin {
  position: relative;
}

.admin-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3b30;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #ff3b30;
  color: #fff;
}

/* Admin workspace */
.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.admin-tab {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

.admin-tab.active {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}

.admin-panels {
  margin-top: 14px;
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

.admin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-panel-actions {
  display: flex;
  gap: 8px;
}

.admin-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-btn.active {
  background: #ff6b6b;
  color: #050509;
}

.search-form input[type="search"] {
  border: none;
  background: transparent;
  color: #f5f5ff;
  font-size: 0.8rem;
  padding: 4px 6px;
  outline: none;
  min-width: 160px;
}

.search-btn {
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #ff6b6b;
  color: #050509;
  cursor: pointer;
}

.search-btn:hover {
  background: #ff7d7d;
}

.auth-email {
  font-size: 0.75rem;
  color: #b0b0d0;
}

/* Buttons */
.btn {
  border-radius: 999px;
  border: none;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn.primary {
  background: #ff6b6b;
  color: #050509;
}

.btn.primary:hover {
  background: #ff7d7d;
}

.btn.ghost {
  background: transparent;
  color: #f5f5ff;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.04);
}

.btn.danger {
  background: #ff3b3b;
  color: #fff;
}

.btn.secondary {
  background: transparent;
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.7);
}

.btn.secondary:hover {
  background: rgba(255, 107, 107, 0.12);
}

/* Views */
.view {
  display: none;
}

.view.active {
  display: block;
}

/* Hero */
.hero {
  margin: 8px 0 32px;
  padding: 32px 24px;
  border-radius: 20px;
  background: radial-gradient(circle at top left, #24243e, #050509 65%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-copy h1 {
  font-family: "Space Grotesk", system-ui;
  font-size: 2.1rem;
  margin: 0 0 8px;
}

.subtitle {
  margin: 0 0 14px;
  color: #b4b4d4;
  font-size: 0.95rem;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Sections */
.home-section {
  margin: 28px 0;
  padding: 20px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #151522, #050509 60%);
  border: 1px solid #1f1f2b;
}

.block {
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.block:first-of-type {
  border-top: none;
}

.block-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}


/* Profile/Blocks: header rows with tabs + actions (align like "My Works") */
.block-header-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.block-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Tabs left, actions (View all, etc.) right */
.block-actions .community-tabs{ margin-right:auto; }
.block-actions .section-link{ white-space:nowrap; }

/* Notifications header inline action (e.g., "Mark all read") */
.header-inline-actions{
  display:inline-flex;
  align-items:center;
  margin-left:10px;
}
.header-inline-actions .pill{ margin:0; }

.block-title {
  margin: 0 0 8px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.section-header h2 {
  margin: 0;
}

.section-header .muted {
  font-size: 0.8rem;
}

/* Links & section buttons */
.link,
.view-all-btn,
.section-link,
.footer-link,
.inline-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  color: #ff6b6b;
  cursor: pointer;
}

.view-all-btn,
.section-link {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 107, 107, 0.5);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
}

.view-all-btn:hover,
.section-link:hover,
.footer-link:hover,
.inline-link:hover {
  text-decoration: underline;
  background: rgba(255, 107, 107, 0.08);
}

/* Text helpers */
.muted {
  color: #9a9ab8;
  font-size: 0.85rem;
}

/* Rows & cards */
.row-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.row-scroll::-webkit-scrollbar {
  height: 6px;
}

.row-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.poster-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.card {
  background: rgba(8, 8, 22, 0.95);
  border-radius: 16px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.card.small {
  padding: 8px;
}

.card:hover {
  border-color: rgba(255, 107, 107, 0.6);
}

.card-title {
  font-size: 0.95rem;
  margin: 4px 0 4px;
}

.card-body {
  font-size: 0.85rem;
  color: #d4d4f0;
}

.card-meta {
  font-size: 0.8rem;
  color: #9a9ab8;
}

.card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  display: block;
  border-radius: 12px;
  background-color: #181828;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 8px;
}

.poster-card.tall .poster-img {
  width: 100%;
  border-radius: 12px;
  background: #181828;
  aspect-ratio: 2 / 3;
  margin-bottom: 6px;
}

.poster-meta {
  font-size: 0.85rem;
}

/* Profile cards */
.profile-card .profile-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b6b, #ffd26f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #050509;
}

.avatar-lg {
  width: 40px;
  height: 40px;
}

#profile-detail-avatar {
  position: relative;
  overflow: hidden;
}

#profile-detail-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #d5d5ff;
}

.pill.accent {
  border-color: rgba(255, 107, 107, 0.9);
  color: #ff9b9b;
}

/* Lounge filter active state (matches other tab/pill patterns) */
.pill.is-active{
  border-color: rgba(255, 107, 107, 0.85);
  background: rgba(255, 107, 107, 0.12);
  color: #ffe3e3;
}

/* View headers */
.view-header {
  margin: 24px 0 12px;
}

.view-header h1 {
  margin: 0 0 6px;
  font-family: "Space Grotesk", system-ui;
  font-size: 1.4rem;
}

/* Forms */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.form input,
.form textarea,
.form select {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 22, 0.96);
  color: #f5f5ff;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.form textarea {
  resize: vertical;
}

.form-status {
  min-height: 18px;
  font-size: 0.8rem;
  color: #b0b0d0;
}

.error {
  color: #ff6b6b;
  font-size: 0.8rem;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.modal-content {
  position: relative;
  z-index: 1;
  max-width: 360px;
  width: 100%;
  padding: 20px 18px 18px;
  border-radius: 18px;
  background: #080818;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* IMANI widget */
.imani-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  border-radius: 999px;
  border: none;
  background: #ff6b6b;
  color: #050509;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  z-index: 60;
}

/* =========================
   IMANI Premium Expand
   - single source of truth
   - compact by default
   - expands for tour / first AI reply
   - full readable tour copy
========================= */

.imani-panel{
  position: fixed !important;
  right: 16px !important;
  bottom: 72px !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: min(520px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 220px !important;
  max-height: 240px !important;
  border-radius: 18px !important;
  background: rgba(8, 8, 24, 0.42) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28) !important;
  transition: max-height 260ms ease, transform 260ms ease, opacity 180ms ease !important;
  transform: translateY(0) !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 9998 !important;
}

.imani-panel.open{
  display:flex !important;
}

.imani-panel.open.imani-expanded{
  max-height: min(86vh, 920px) !important;
}

@media (max-width: 640px){
  .imani-panel{
    right: 12px !important;
    left: 12px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

.imani-header{
  flex: 0 0 auto !important;
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.imani-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  scrollbar-gutter: stable both-edges !important;
}

.imani-msg{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.65 !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

.imani-msg.user{
  background: rgba(255, 107, 107, 0.14) !important;
  border: 1px solid rgba(255,107,107,0.16) !important;
  align-self: stretch !important;
}

.imani-msg.ai{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
  align-self: stretch !important;
}

.imani-tour-slide{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.imani-tour-meta{
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
}

.imani-tour-title{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
}

.imani-tour-copy{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.92) !important;
}

.imani-tour-actions{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

.imani-input-row{
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.10) !important;
}

.imani-input-row textarea{
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(10,10,24,0.45) !important;
  color: #f5f5ff !important;
  padding: 10px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  resize: none !important;
  min-height: 56px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#imani-send{
  align-self: end !important;
  white-space: nowrap !important;
  min-height: 44px !important;
}

@media (max-width: 640px){
  .imani-input-row{
    grid-template-columns: 1fr !important;
  }

  #imani-send{
    width: 100% !important;
  }
}

/* Hide empty transcript only while compact */
.imani-messages:empty{
  display:none !important;
}

.imani-panel.open.imani-expanded .imani-messages:empty{
  display:block !important;
}

/* Detail views */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 18px;
  margin: 16px 0 8px;
}

.detail-media {
  min-height: 220px;
  background: #101022;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.detail-media iframe,
.detail-media audio,
.detail-media video {
  width: 100%;
  height: 100%;
  border: none;
}

.detail-body {
  font-size: 0.9rem;
  color: #d4d4f0;
}

.detail-links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.back-link {
  border: none;
  background: none;
  color: #9a9ab8;
  font-size: 0.8rem;
  cursor: pointer;
  margin-bottom: 8px;
}

.back-link:hover {
  color: #ff6b6b;
}

/* Ratings */
.rating-section {
  margin: 4px 0 12px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rating-label {
  font-size: 0.8rem;
  color: #b0b0d0;
}

.rating-value {
  font-weight: 600;
}

.rating-count {
  font-size: 0.8rem;
  color: #9a9ab8;
}

.rating-stars {
  display: flex;
  gap: 4px;
}

.rating-star {
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #55556b;
  padding: 0;
}

.rating-star.active {
  color: #ffcc4d;
}

.rating-star:hover {
  transform: translateY(-1px);
}

/* Media lock panel */
.locked-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.locked-panel .muted {
  margin-bottom: 8px;
}

/* Footer */
.footer {
  padding: 18px 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #050509;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}


/* Footer: keep all columns on one row on desktop */
@media (min-width: 1024px){
  .footer-inner{
    grid-template-columns: repeat(6, 1fr);
  }
}

.footer-col h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #b6b6d6;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 4px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 0.75rem;
  color: #8080a0;
  text-align: center;
}

/* Legal blocks */
.legal-block {
  padding-bottom: 24px;
}

.legal-block h2 {
  margin: 16px 0 6px;
  font-size: 1rem;
}

.legal-block p,
.legal-block li {
  font-size: 0.9rem;
}



/* ========== Lounge: Facebook-style layout ========== */
.lounge-shell { padding-top: 6px; }

.lounge-layout{
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: start;
}

.lounge-rail{ position: relative; }

.lounge-rail-card{
  cursor: default;
}

/* Rail panel rotation (additive) */
#lounge-rail-panels .lounge-rail-panel{ display:none; }
#lounge-rail-panels .lounge-rail-panel.is-active{ display:block; }

.lounge-rail-links{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Left rail: personal metrics (no navigation shortcuts) */
.lounge-left-panel .rail-metrics{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lounge-left-panel .rail-metric-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.lounge-left-panel .rail-metric-k{
  font-size: 12px;
  opacity: 0.85;
}
.lounge-left-panel .rail-metric-v{
  font-size: 12px;
  font-weight: 650;
  opacity: 0.95;
}

.lounge-center{
  min-width: 0;
}

/* Force lounge feed into a single, familiar “post stack” */
#lounge-feed.lounge-feed{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Make lounge cards feel like feed posts */
#lounge-feed .card{
  cursor: pointer;
  border-radius: 16px;
  padding: 14px 14px 16px;
}

#lounge-feed .card:hover{
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Composer */
.lounge-composer{
  padding: 14px;
  border-radius: 16px;
  margin-bottom: 12px;
}

/* Responsive: collapse rails */
@media (max-width: 980px){
  .lounge-layout{
    grid-template-columns: 1fr;
  }
  .lounge-rail-left,
  .lounge-rail-right{
    display: none;
  }
}


/* Lounge create */
.lounge-create {
  margin-bottom: 6px;
  font-size: 0.85rem;
}

/* Responsive tweaks */
@media (max-width: 800px) {
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .nav {
    order: 3;
    flex-wrap: wrap;
    justify-content: center;
  }

  .topbar-right {
    order: 2;
    width: 100%;
    justify-content: flex-end;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }
}

/* ========== Events Calendar (IMB) ========== */

.calendar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calendar-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(15, 15, 25, 0.96);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.calendar-month-label {
  font-weight: 600;
  font-size: 1rem;
}

.calendar-header-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Use existing pill styles + a ghost variant */

.pill-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.pill-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Grid */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.75rem 0.25rem 0.25rem;
}

.calendar-day-name {
  font-size: 0.7rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.calendar-day {
  border-radius: 999px;
  padding: 0.35rem 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.08s ease;
}

.calendar-day--empty {
  background: transparent;
  border: none;
  cursor: default;
}

.calendar-day-number {
  display: block;
  margin-bottom: 0.15rem;
  color: #ffffff;
}

.calendar-day-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-color, #ff6b6b);
}

/* States */

.calendar-day--has-event {
  border-color: rgba(255, 107, 107, 0.7);
}

.calendar-day--selected {
  background: var(--accent-color, #ff6b6b);
  border-color: var(--accent-color, #ff6b6b);
  color: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.calendar-day--selected .calendar-day-number {
  color: #000;
}

.calendar-day--selected .calendar-day-dot {
  background: #000;
}

.calendar-day:hover:not(.calendar-day--empty) {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive tweaks */

@media (max-width: 640px) {
  .calendar-header {
    padding: 0.75rem;
  }

  .calendar-header-main {
    gap: 0.5rem;
  }

  .calendar-month-label {
    font-size: 0.95rem;
  }

  .calendar-grid {
    gap: 0.2rem;
  }

  .calendar-day {
    font-size: 0.75rem;
  }
}

.btn-small {
  font-size: 0.75rem;
  padding: 4px 10px;
}

.calendar-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#events-selected-date-label {
  font-weight: 500;
  color: var(--accent);
  margin-left: 4px;
  margin-bottom: 8px;
}

/* ========== Global Sponsor Bar ========== */

.sponsor-bar {
  width: 100%;
  background: rgba(10, 10, 24, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.sponsor-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.8rem;
}

.sponsor-bar-logo {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
}

.sponsor-bar-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sponsor-bar-headline {
  font-weight: 600;
}

.sponsor-bar-subheadline {
  color: #9a9ab8;
  font-size: 0.75rem;
}

.sponsor-bar-cta {
  border-radius: 999px;
  border: 1px solid rgba(255, 107, 107, 0.8);
  padding: 4px 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: #ff6b6b;
  background: transparent;
  white-space: nowrap;
}

.sponsor-bar-cta:hover {
  background: rgba(255, 107, 107, 0.16);
}

/* ---------- Lounge reaction buttons ---------- */
.reaction-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--muted, rgba(255,255,255,0.65)) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.reaction-btn.active {
  border-color: rgba(255, 90, 90, 0.6) !important;
}

/* =========================================
   Lounge: Modern Feed Enhancements (Additive)
   Priorities: engagement + paint safety + modern polish
   NOTE: Scoped to .lounge-center to avoid regressions.
========================================= */

.lounge-center{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* For You header */
.lounge-feed-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 0;
}

.lfh-h{
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

.lfh-sub{
  margin-top: 2px;
  font-size: 0.78rem;
  opacity: 0.82;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.lfh-legend{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill{
  font-size: 0.7rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.pill-soft{ background: rgba(255,255,255,0.05); }

/* Onboarding nudge */
.lounge-onboarding .onboard-card{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.onboard-h{ font-weight: 650; font-size: 0.95rem; margin-bottom: 4px; }
.onboard-p{ font-size: 0.8rem; opacity: 0.85; }
.onboard-actions{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Blocks */
.lounge-block{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}

.block-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
}

.block-title{ font-weight: 650; font-size: 0.85rem; opacity: 0.95; }

/* Reels row (paint-safe) */
.reels-row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 190px);
  gap: 10px;
  overflow-x: auto;
  padding: 0 12px 12px;
  scroll-snap-type: x mandatory;
}

.reel-tile{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  scroll-snap-align: start;
  min-height: 200px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.reel-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
}

.reel-thumb{
  width: 100%;
  height: 200px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}

.reel-meta{
  position: relative;
  margin-top: -34px;
  padding: 0 10px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.meta-muted{ font-size: 0.72rem; opacity: 0.8; }

/* Community moments */
.moments-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.moment-card{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  min-height: 120px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.moment-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
}

.moment-media{
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}

.moment-foot{
  position: absolute;
  transform: translateY(-38px);
  padding: 0 10px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.badge.featured{
  font-size: 0.68rem;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.moment-user{ font-size: 0.75rem; opacity: 0.85; }

/* Tabs + filters */
.lounge-tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px;
}

.tab{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: inherit;
  padding: 10px 12px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.tab.is-active{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.tab:hover{ transform: translateY(-1px); }

.lounge-filters{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px 4px;
}

.chip{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: inherit;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  min-height: 40px;
}

.chip.is-active{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

/* Meta badges (for future post-type indicators) */
.meta-badge{
  font-size: 0.68rem;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,10,16,0.45);
  backdrop-filter: blur(6px);
}

.meta-video{}

/* Links */
.link-btn{
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-btn:hover{ opacity: 1; }

/* Responsive tweaks for enhancements */
@media (max-width: 900px){
  .moments-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .moments-grid{ grid-template-columns: 1fr; }
  .reels-row{ grid-auto-columns: minmax(240px, 1fr); }
  .lounge-feed-header{ flex-direction: column; align-items: flex-start; }
  .lfh-legend{ justify-content: flex-start; }
}

/* Lounge rail mini components (additive, paint-safe) */
.live-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(255, 89, 102, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 89, 102, 0.18);
  margin-right: 8px;
  transform: translateY(-1px);
}
.rail-mini-row{ display:flex; gap:10px; align-items:center; }
.rail-avatar{
  width:36px; height:36px; border-radius:999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.rail-mini-name{ font-weight: 650; font-size: 13px; }
.rail-mini-sub{ font-size: 12px; opacity: 0.85; }


/* =========================================
   Lounge: Left Rail Panels (Additive)
   Replaces Community / What belongs here
========================================= */
.lounge-rail-panel .lounge-rail-sub{ line-height: 1.35; }
.lounge-rail-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lounge-rail-filters .chip{
  min-height: 44px;
  padding: 10px 12px;
}
@media (max-width: 1100px){
  .lounge-rail-filters .chip{ width:100%; justify-content:center; }
}



/* =========================
   CONNECT / COMMUNITY HUB (additive)
   - No selector breakage
   ========================= */
.community-hub-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.community-hub-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.community-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.tab-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,0.78);
  font:inherit;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.tab-btn:hover{ background:rgba(255,255,255,0.06); transform:translateY(-1px); }
.tab-btn:active{ transform:translateY(0); }
.tab-btn.active{
  background:rgba(255,255,255,0.10);
  color:#fff;
}
.community-panels{ margin-top:12px; }
.community-panel{ display:none; }
.community-panel.active{ display:block; }

/* better tap targets on mobile */
@media (max-width: 640px){
  .community-tabs{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
  .tab-btn{ padding:10px 12px; white-space:nowrap; }
}


/* ============================
   Home: Featured Community Rotator
   Single owner
   - desktop: 4-up
   - mobile landscape / wider phones: 2-up
   - mobile portrait / narrow phones: 1-up
============================ */
#home-featured-community{
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: visible;
  padding: 0;
  margin: 0;
}

#home-featured-community .home-community-rotator{
  display: grid;
  gap: 12px;
  padding: 2px 2px 6px;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: visible;
}

#home-featured-community .home-community-slot{
  transition: opacity 160ms ease;
  opacity: 1;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

#home-featured-community .home-community-slot.is-swapping{
  opacity: 0.35;
}

#home-featured-community .home-community-card,
#home-featured-community .profile-card,
#home-featured-community .card{
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
}

#home-featured-community .home-community-meta{
  margin-top: 10px;
}

#home-featured-community .meta-badge{
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

/* Desktop */
@media (min-width: 641px){
  #home-featured-community .home-community-rotator{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Narrow mobile / portrait phones */
@media (max-width: 520px){
  #home-featured-community .home-community-rotator{
    grid-template-columns: 1fr !important;
  }
}

/* Wider mobile / landscape phones */
@media (min-width: 521px) and (max-width: 640px){
  #home-featured-community .home-community-rotator{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ============================
   Lounge rails: scope to Lounge view only
   Safety guard in case markup nesting shifts
============================ */
.lounge-rail-left,
.lounge-rail-right {
  display: none;
}
#view-lounge.active .lounge-rail-left,
#view-lounge.active .lounge-rail-right {
  display: block;
}


/* ============================
   Rotate4 helper (non-breaking)
============================ */
.rotate4-hidden{display:none !important;}


/* ---------- Lounge inline threads (scoped; no impact outside Lounge) ---------- */
#view-lounge .lounge-inline-thread { margin-top: 10px; }
#view-lounge .lounge-inline-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
}
#view-lounge .lounge-inline-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
#view-lounge .lounge-inline-replies{ display:block; }
#view-lounge .lounge-inline-row{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  margin: 8px 0;
}
#view-lounge .lounge-inline-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
#view-lounge .lounge-inline-who{ font-weight:600; }
#view-lounge .lounge-inline-body{ margin-top:8px; white-space:pre-wrap; }
#view-lounge .lounge-inline-actions{ margin-top:10px; display:flex; justify-content:flex-end; }
#view-lounge .lounge-inline-compose{ margin-top:12px; }
#view-lounge .lounge-inline-compose-actions{ display:flex; justify-content:flex-end; margin-top:8px; }
#view-lounge .lounge-inline-replybox{ display:none; margin-top:10px; }
#view-lounge [data-inline-reply-row].show-replybox .lounge-inline-replybox{ display:block; }
#view-lounge .lounge-inline-children{ margin-top:10px; padding-left: 10px; border-left: 2px solid rgba(255,255,255,0.08); }
#view-lounge .lounge-inline-child{ padding: 10px 0 0 10px; }


/* Utility: global hidden */
.hidden{display:none !important;}


/* ============================
   Footer Link Alignment Fix
   (handles multi-line links)
============================ */

.footer-section a{
  line-height:1.4;
  min-height:2.8em;      /* forces consistent vertical rhythm */
  display:flex;
  align-items:flex-start;
}

/* Footer long-link alignment fix (buttons wrap centered by default) */
.footer-col .footer-link{
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  white-space: normal;     /* allow wrapping */
}


/* Directory pages should not show Profile "View all" buttons */
.view[data-profile-directory="1"] [data-profile-viewall="1"]{display:none !important;}

/* =========================
   IMB PATCH — HIDE NETWORK DIRECTORY "VIEW ALL" CTA ONLY
   Keeps Profile → Network block CTA intact.
   (Some builds inject a View All button without data-profile-viewall;
   this rule scopes the hide to the Network directory view only.)
========================= */
#view-profile-network .section-link#profile-network-viewall{display:none !important;}
#view-profile-network .section-link[data-view="profile-network"]{display:none !important;}



/* =========================
   Create Work view helpers
========================= */
#view-create-work .form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

#view-create-work select,
#view-create-work input,
#view-create-work textarea{
  width:100%;
}

#view-create-work .form-status.ok{ color: var(--ok, #2e7d32); }
#view-create-work .form-status.error{ color: var(--danger, #c62828); }


/* Lounge post actions (Co-Sign + Share) */
.actions-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.actions-row .btn.active{
  outline: 1px solid rgba(255,255,255,.25);
}

/* Reports hardening */
.card.highlight {
  outline: 2px solid rgba(255, 59, 48, 0.85);
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.14);
}

#report-modal textarea.input {
  width: 100%;
  resize: vertical;
}

/* Admin Reports Filters */
.admin-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin:10px 0 12px;
}
.admin-filters .chip{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.admin-filters .chip.active{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
}

/* Reports queue action hardening */
#admin-reports-list .btn{
  width:100%;
}

/* =========================================================
   PHASE 1 — MOBILE SHELL SPLIT
   Safe rules:
   - desktop shell remains canonical above 640px
   - phone shell activates at 640px and below
   - no shared IDs are duplicated
========================================================= */

.mobile-only{ display:none !important; }
.desktop-only{ display:inherit; }

body.is-mobile{
  overflow-x:hidden;
}

body.is-mobile #imb-app-root{
  padding-bottom: 92px;
}

.mobile-topbar{
  position: sticky;
  top: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(5, 5, 13, 0.96);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
}

.mobile-logo-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  cursor:pointer;
}

.mobile-icon-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color:#f5f5ff;
  border-radius:999px;
  min-height:44px;
  padding: 0 14px;
  font-size: 0.82rem;
  cursor:pointer;
}

.mobile-search-sheet{
  position: sticky;
  top: 57px;
  z-index: 69;
  padding: 10px 12px 12px;
  background: rgba(5, 5, 13, 0.98);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
}

.mobile-search-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-search-form input[type="search"]{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,24,0.92);
  color:#f5f5ff;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline:none;
}

.mobile-search-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mobile-search-actions .btn{
  min-height:44px;
}

.mobile-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display:none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 5, 13, 0.98);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}

.mobile-tab-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:#cfcfe8;
  min-height:52px;
  padding: 8px 6px;
  border-radius:14px;
  font-size: 0.72rem;
  font-weight:600;
  cursor:pointer;
}

.mobile-tab-btn.active{
  background: rgba(255,107,107,0.14);
  color:#fff;
}

@media (max-width: 640px){
  .desktop-only{
    display:none !important;
  }

  .mobile-only{
    display:block !important;
  }

  .mobile-topbar{
    display:flex;
  }

  .mobile-bottom-nav{
    display:grid !important;
  }

  .view.active{
    padding-left: 14px;
    padding-right: 14px;
  }

  .main{
    padding-top: 18px;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }

  .section-header,
  .block-header,
  .block-header-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .topbar-right,
  .nav{
    width:auto;
  }
}

@media (min-width: 641px){
  #mobile-search-sheet.hidden{
    display:none !important;
  }
}

/* =========================================================
   PHASE 2 — MOBILE HEADER / ACTION STACKING
========================================================= */

@media (max-width: 640px){

  .view-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:16px;
  }

  .view-header h1{
    margin:0;
    line-height:1.08;
    font-size: clamp(1.55rem, 6vw, 2rem);
  }

  .view-header .subtitle{
    margin:0;
    max-width:100%;
    font-size:0.98rem;
    line-height:1.45;
  }

  .view-header .back-link{
    align-self:flex-start;
    margin-bottom:2px;
  }

  .section-header,
  .block-header,
  .block-header-row,
  .community-hub-header,
  .shop-category-header,
  .work-detail-header-row,
  .imb-header-row{
    display:flex;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px;
  }

  .section-header > div:first-child,
  .block-header > div:first-child,
  .block-header-row > div:first-child,
  .community-hub-header > div:first-child,
  .shop-category-header > div:first-child,
  .work-detail-header-row > div:first-child,
  .imb-header-row > div:first-child{
    min-width:0;
    width:100%;
  }

  .section-header h2,
  .block-header h2,
  .block-header-row h2,
  .community-hub-header h2,
  .shop-category-header h3,
  .work-detail-header-row h1,
  .imb-header-row h1{
    margin:0;
    line-height:1.12;
  }

  .section-header .muted,
  .block-header .muted,
  .block-header-row .muted,
  .community-hub-header .muted,
  .shop-category-header .muted{
    display:block;
    line-height:1.4;
  }

  .block-actions,
  .header-inline-actions,
  .community-hub-actions,
  .profile-myworks-right,
  .profile-hero-actions,
  .hero-actions,
  .work-detail-header-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    width:100%;
  }

  .community-hub-actions,
  .block-actions,
  .header-inline-actions{
    justify-content:flex-start;
  }

  .section-link{
    max-width:100%;
    white-space:normal;
    text-align:left;
  }

  .community-tabs,
  .work-tab-row,
  .pillbar,
  .lounge-rail-filters,
  .profile-hero-actions,
  #profile-network-tabs,
  #profile-library-tabs,
  #profile-myworks-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .community-tabs::-webkit-scrollbar,
  .work-tab-row::-webkit-scrollbar,
  .pillbar::-webkit-scrollbar,
  .lounge-rail-filters::-webkit-scrollbar,
  .profile-hero-actions::-webkit-scrollbar,
  #profile-network-tabs::-webkit-scrollbar,
  #profile-library-tabs::-webkit-scrollbar,
  #profile-myworks-tabs::-webkit-scrollbar{
    display:none;
  }

  .community-tabs .tab-btn,
  .work-tab-row .tab-btn,
  .pillbar .pill,
  .community-tabs .pill,
  .lounge-rail-filters .chip,
  .profile-hero-actions .pill{
    flex:0 0 auto;
    white-space:nowrap;
    min-height:44px;
  }

  .directory-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .directory-header > div{
    width:100%;
    min-width:0;
  }

  .work-detail-header{
    gap:10px;
  }

  .work-detail-header-row{
    width:100%;
  }

  .work-detail-header-actions{
    justify-content:flex-start;
  }

  .work-detail-header-actions .btn{
    min-height:44px;
  }

  .hero{
    padding-top:8px;
  }

  .hero-copy{
    max-width:100%;
  }

  .hero-copy h1{
    line-height:1.02;
    margin-bottom:10px;
  }

  .hero-actions .btn{
    min-height:46px;
  }

  .profile-hero{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .profile-hero-main,
  .profile-hero-stats{
    width:100%;
  }

  .shop-category-header{
    margin-bottom:10px;
  }

  .home-section,
  .block,
  .shop-category{
    margin-bottom:18px;
  }

  .view > .block:first-of-type,
  .view > .home-section:first-of-type{
    margin-top:0;
  }
}

/* =========================================================
   PHASE 3 — MOBILE BROWSE SURFACES
========================================================= */

@media (max-width: 640px){

  #home-featured-works,
  #home-featured-community,
  #home-upcoming-events,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    overflow:visible !important;
    padding:0 !important;
    scroll-snap-type:none !important;
  }

  .row-scroll,
  .poster-row{
    overflow:visible !important;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:0 !important;
    scroll-snap-type:none !important;
  }

  .row-scroll > *,
  .poster-row > *{
    min-width:0 !important;
    width:100% !important;
    scroll-snap-align:none !important;
  }

  #home-featured-works > *,
  #home-featured-community > *,
  #home-upcoming-events > *,
  #discover-watch-row > *,
  #discover-listen-row > *,
  #discover-read-row > *,
  #connect-creators > *,
  #connect-members > *,
  #connect-institutions > *,
  #connect-groups > *,
  #connect-events > *,
  #connect-lounge-feed > *,
  .row-scroll > *,
  .poster-row > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
  }

  .card img,
  .poster-card img,
  .work-card img,
  .product-card img,
  .event-card img{
    width:100%;
    height:auto;
    display:block;
  }

  .poster-card,
  .work-card[data-format*="video"],
  .work-card[data-type*="video"]{
    width:100%;
  }

  .poster-card .poster,
  .poster-card .thumb,
  .work-card .poster,
  .work-card .thumb{
    aspect-ratio: 2 / 3;
    width:100%;
    overflow:hidden;
    border-radius:14px;
  }

  .card,
  .product-card,
  .event-card,
  .work-card,
  .community-card{
    width:100%;
    min-width:0;
  }

  .card .card-body,
  .product-card .card-body,
  .event-card .card-body,
  .work-card .card-body{
    padding:12px;
  }

  .card h3,
  .product-card h3,
  .event-card h3,
  .work-card h3{
    line-height:1.2;
    word-break:break-word;
  }

  .card .muted,
  .product-card .muted,
  .event-card .muted,
  .work-card .muted{
    line-height:1.35;
  }

  #view-home .home-section,
  #view-discover .home-section,
  #view-connect .block{
    padding-top:0;
  }

  #connect-lounge-feed .card,
  #connect-events .card{
    min-width:0;
  }

  #search-results-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  #home-featured-works > p,
  #home-featured-community > p,
  #home-upcoming-events > p,
  #discover-watch-row > p,
  #discover-listen-row > p,
  #discover-read-row > p,
  #connect-creators > p,
  #connect-members > p,
  #connect-institutions > p,
  #connect-groups > p,
  #connect-events > p,
  #connect-lounge-feed > p,
  #search-results-grid > p{
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px){
  #home-featured-works,
  #home-upcoming-events,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed,
  #search-results-grid,
  .row-scroll,
  .poster-row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #home-featured-community{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #home-featured-community > .home-community-rotator,
  #home-featured-community .home-community-rotator{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #home-featured-community .home-community-slot{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   PHASE 4 — LOUNGE MOBILE-FIRST CLEANUP
========================================================= */

@media (max-width: 640px){

  .lounge-shell{
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
  }

  .lounge-layout{
    display:flex !important;
    flex-direction:column;
    gap:14px;
  }

  .lounge-center,
  .lounge-rail-left,
  .lounge-rail-right{
    width:100%;
    min-width:0;
  }

  .lounge-center{ order:1; }
  .lounge-rail-left{ order:2; }
  .lounge-rail-right{ order:3; }

  .lounge-feed-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;
  }

  .lfh-title{
    width:100%;
    min-width:0;
  }

  .lfh-h{
    margin:0;
    line-height:1.08;
    font-size: clamp(1.25rem, 5vw, 1.55rem);
  }

  .lfh-sub{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:4px;
    line-height:1.35;
  }

  .lfh-legend{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .lfh-legend::-webkit-scrollbar{ display:none; }

  .lfh-legend .pill{
    flex:0 0 auto;
    min-height:36px;
    white-space:nowrap;
  }

  #lounge-page-create-wrapper{
    border:1px solid rgba(255,255,255,0.10);
    border-radius:16px;
    padding:12px;
    margin-bottom:10px;
  }

  #lounge-page-form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  #lounge-page-form label{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  #lounge-page-form textarea,
  #lounge-page-form input[type="url"],
  #lounge-page-form input[type="file"]{
    width:100%;
  }

  #lounge-page-form .btn{ min-height:46px; }
  #lounge-page-status{ width:100%; }

  #lounge-feed{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  #lounge-feed > *{
    width:100%;
    min-width:0;
  }

  .lounge-rail-left{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .lounge-rail-left .lounge-rail-card{ margin:0; }

  .lounge-rail-filters{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .lounge-rail-filters::-webkit-scrollbar{ display:none; }

  .lounge-rail-filters .chip{
    flex:0 0 auto;
    min-height:40px;
    white-space:nowrap;
  }

  .rail-metrics{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .rail-metric-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
  }

  .lounge-rail-right{ display:block; }

  #lounge-rail-panels{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .lounge-rail-panel{ display:block !important; }
  .lounge-rail-panel:not(.is-active){ opacity:0.94; }

  .lounge-rail-right .lounge-rail-card{ margin:0; }

  .lounge-rail-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .lounge-rail-links .section-link{ min-height:40px; }

  .lounge-onboarding .onboard-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .onboard-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }

  .onboard-actions .btn{ min-height:44px; }

  .lounge-rail-card .card-title,
  .lounge-feed .card-title{ line-height:1.2; }

  .lounge-rail-card .muted,
  .lounge-feed .muted{ line-height:1.35; }

  .rail-mini,
  .rail-mini-row{
    display:flex;
    gap:10px;
    align-items:flex-start;
  }

  .rail-mini{ flex-direction:column; }
  .rail-mini-row{ min-width:0; }

  .rail-mini-name,
  .rail-mini-sub{ word-break:break-word; }

  .lounge-center .card,
  #lounge-feed > .card{
    border-color: rgba(255,255,255,0.12);
  }

  .lounge-rail-left .card,
  .lounge-rail-right .card{
    border-color: rgba(255,255,255,0.08);
  }
}

@media (max-width: 420px){
  .lounge-feed-header{ gap:6px; }
  .lfh-sub{ gap:6px; }
  #lounge-page-create-wrapper{ padding:10px; }
  .lounge-rail-left,
  #lounge-rail-panels{ gap:10px; }
}

/* =========================================================
   PROFILE IMAGES — detail hero + community cards
========================================================= */

.profile-detail-hero-card{
  overflow: hidden;
  padding: 0;
}

.profile-detail-cover{
  width: 100%;
  min-height: 180px;
  background-color: #141424;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.profile-detail-hero-top,
.profile-detail-bio,
#profile-detail-tags{
  padding-left: 18px;
  padding-right: 18px;
}

.profile-detail-hero-top{
  padding-top: 18px;
}

.profile-detail-bio{
  padding-top: 8px;
}

#profile-detail-tags{
  padding-top: 6px;
  padding-bottom: 18px;
}

.profile-avatar-shell{
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.profile-avatar-img,
.avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.avatar.has-image{
  background: #11111c;
  color: transparent;
}

.avatar .avatar-fallback,
#profile-detail-avatar-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-xl{
  width: 56px;
  height: 56px;
  font-size: 1.1rem;
}

.profile-detail-identity{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.profile-detail-hero-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-detail-identity-copy{
  min-width: 0;
}

.profile-detail-identity-copy h2{
  margin: 6px 0 4px;
}

.profile-detail-bio{
  margin: 0;
  line-height: 1.55;
}

.profile-card .profile-header .avatar{
  flex: 0 0 auto;
}

.person-card .profile-header{
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-subtitle{
  font-size: 0.82rem;
  color: #9a9ab8;
}

.card-text{
  font-size: 0.85rem;
  color: #d4d4f0;
  margin-top: 8px;
  line-height: 1.45;
}

.quest-row{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  margin-bottom: 8px;
}

@media (max-width: 640px){
  .profile-detail-cover{
    min-height: 130px;
  }

  .profile-detail-hero-top{
    flex-direction: column;
    align-items: flex-start;
  }

  #profile-detail-actions{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   PHASE 5 — MOBILE DETAIL PAGES
========================================================= */

@media (max-width: 640px){

  #view-work-detail{
    gap:0;
  }

  .work-detail-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }

  .work-detail-header .back-link{ margin-bottom:0; }

  .work-detail-header-row{
    display:flex;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px;
    width:100%;
  }

  .work-detail-header-row > div:first-child{
    width:100%;
    min-width:0;
  }

  #work-detail-title{
    margin:0;
    line-height:1.06;
    font-size: clamp(1.45rem, 6vw, 2rem);
  }

  #work-detail-meta{
    margin:4px 0 0;
    line-height:1.4;
  }

  .work-detail-header-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    justify-content:flex-start;
  }

  .work-detail-header-actions .btn{ min-height:44px; }

  .work-hero{
    margin-bottom:14px;
  }

  .work-hero-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:14px;
  }

  .work-hero-left,
  .work-hero-right{
    width:100%;
    min-width:0;
  }

  #work-hero-poster,
  .work-poster{
    width:100%;
    max-width:none;
    margin:0 auto;
  }

  #work-hero-poster img,
  .work-poster img{
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
  }

  #work-hero-logline{ line-height:1.45; }

  #work-hero-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  #work-hero-chips > *{ min-height:34px; }

  .work-mini-stats{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:10px;
  }

  .mini-stat{
    min-width:0;
    padding:10px 10px;
    border-radius:14px;
  }

  .mini-stat-v{ line-height:1.1; }

  #work-rating-section{ width:100%; }

  .rating-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    align-items:center;
  }

  #work-detail-save,
  #work-detail-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }

  #work-detail-save > *,
  #work-detail-links > *{
    min-height:40px;
  }

  .work-overview-fixed,
  .work-primary-media-fixed,
  .work-related-fixed{
    margin-top:0;
    margin-bottom:14px;
  }

  #work-detail-description{ line-height:1.5; }

  #work-detail-media{
    width:100%;
    min-width:0;
  }

  #work-detail-media iframe,
  #work-detail-media video,
  #work-detail-media audio,
  #work-detail-media canvas,
  #work-detail-media img{
    max-width:100%;
  }

  .work-tabs{
    margin:4px 0 12px;
  }

  .work-tab-row{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    width:100%;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .work-tab-row::-webkit-scrollbar{ display:none; }

  .work-tab-row .tab-btn{
    flex:0 0 auto;
    min-height:44px;
    white-space:nowrap;
  }

  .work-panels{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .work-panel .block{ margin-bottom:0; }

  #work-contributors-cards,
  #work-comments-list,
  #work-detail-related{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }

  #work-details-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }

  #work-comment-form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  #work-comment-form label{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  #work-comment-input{
    width:100%;
    min-height:110px;
  }

  #work-comment-form .btn{
    min-height:46px;
    align-self:flex-start;
  }

  #work-comment-status{ width:100%; }

  #view-event-detail .view-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }

  #event-detail-title{
    margin:0;
    line-height:1.08;
    font-size: clamp(1.4rem, 6vw, 1.85rem);
  }

  #event-detail-meta{
    margin:0;
    line-height:1.4;
  }

  .detail-layout{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:12px;
  }

  .detail-body{
    width:100%;
    min-width:0;
  }

  #event-detail-description{
    line-height:1.5;
    margin-bottom:12px;
  }

  #event-detail-save,
  #event-detail-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }

  #event-detail-save > *,
  #event-detail-links > *{
    min-height:40px;
  }

  #event-comments-list{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }

  #event-comment-form{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }

  #event-comment-form label{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  #event-comment-input{
    width:100%;
    min-height:110px;
  }

  #event-comment-form .btn{
    min-height:46px;
    align-self:flex-start;
  }

  #event-comment-status{ width:100%; }
}

@media (max-width: 420px){
  .work-mini-stats{
    grid-template-columns: 1fr;
  }

  .work-detail-header-actions{
    display:grid;
    grid-template-columns: 1fr;
    width:100%;
  }

  .work-detail-header-actions .btn{
    width:100%;
  }
}

/* =========================================================
   PHASE 6 — MOBILE STICKY DETAIL ACTION BARS
========================================================= */

.mobile-detail-bar{
  display:none;
}

@media (max-width: 640px){
  .mobile-detail-bar{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 85;
    display:none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:8px;
    padding:10px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:18px;
    background: rgba(8, 8, 20, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  }

  .mobile-detail-bar.is-visible{
    display:grid !important;
  }

  .mobile-detail-bar .btn{
    min-height:44px;
    width:100%;
  }

  body.is-mobile #view-work-detail,
  body.is-mobile #view-event-detail{
    padding-bottom: 170px;
  }
}

@media (max-width: 420px){
  .mobile-detail-bar{
    grid-template-columns: 1fr;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   PHASE 7 — FINAL MOBILE POLISH
   Goal:
   - final spacing / rhythm / tap-target polish
   - preserve desktop
   - no new DOM ownership
   - no JS changes required
========================================================= */

@media (max-width: 640px){

  /* ---------- Global rhythm / safe spacing ---------- */
  body.is-mobile .main{
    padding-bottom: 28px;
  }

  .view{
    scroll-margin-top: 72px;
  }

  .view.active > .view-header:first-child,
  .view.active > .hero:first-child,
  .view.active > .home-section:first-child,
  .view.active > .block:first-child{
    margin-top: 0;
  }

  .home-section,
  .block,
  .shop-category,
  .legal-block,
  .calendar-header,
  .card-grid{
    margin-bottom: 16px;
  }

  .block + .block,
  .home-section + .home-section{
    margin-top: 0;
  }

  .subtitle,
  .muted,
  .card-meta,
  .form-status{
    line-height: 1.45;
  }

  /* ---------- Universal tap-target polish ---------- */
  .btn,
  .view-all-btn,
  .section-link,
  .tab-btn,
  .chip,
  .pill,
  .nav-btn,
  .footer-link,
  .inline-link{
    min-height: 44px;
  }

  .btn,
  .view-all-btn,
  .section-link,
  .tab-btn,
  .chip{
    touch-action: manipulation;
  }

  .btn,
  .mobile-tab-btn,
  .mobile-icon-btn,
  .tab-btn,
  .chip,
  .pill{
    -webkit-tap-highlight-color: rgba(255,255,255,0.08);
  }

  /* ---------- Buttons / action rows ---------- */
  .hero-actions,
  .block-actions,
  .community-hub-actions,
  .header-inline-actions,
  .detail-actions,
  .detail-links,
  .work-detail-header-actions,
  .profile-hero-actions,
  .actions-row{
    gap: 10px;
  }

  .hero-actions .btn,
  .block-actions .btn,
  .community-hub-actions .btn,
  .detail-actions .btn,
  .detail-links .btn,
  .work-detail-header-actions .btn,
  .profile-hero-actions .btn,
  .actions-row .btn{
    min-height: 46px;
  }

  /* ---------- Hero polish ---------- */
  .hero{
    padding: 22px 16px;
    border-radius: 18px;
    margin: 0 0 20px;
  }

  .hero-copy h1{
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.02;
    margin-bottom: 10px;
  }

  .hero .subtitle{
    font-size: 0.96rem;
    margin-bottom: 12px;
  }

  /* ---------- Section / header polish ---------- */
  .section-header,
  .block-header,
  .block-header-row,
  .community-hub-header,
  .view-header{
    gap: 8px;
    margin-bottom: 12px;
  }

  .section-header h2,
  .block-header h2,
  .block-header-row h2,
  .community-hub-header h2{
    line-height: 1.12;
  }

  .view-header h1{
    letter-spacing: -0.01em;
  }

  /* ---------- Home / Discover / Connect cards ---------- */
  .card,
  .poster-card,
  .work-card,
  .community-card,
  .event-card,
  .product-card,
  .profile-card{
    border-radius: 16px;
    overflow: hidden;
  }

  .card,
  .work-card,
  .event-card,
  .product-card{
    padding: 10px 10px 12px;
  }

  .card-thumb,
  .poster-img,
  .work-poster img,
  .work-card img,
  .event-card img,
  .product-card img{
    border-radius: 12px;
  }

  .card-title,
  .work-card h3,
  .event-card h3,
  .product-card h3{
    line-height: 1.22;
    margin-bottom: 4px;
  }

  .card-body,
  .work-card .card-body,
  .event-card .card-body,
  .product-card .card-body{
    font-size: 0.84rem;
    line-height: 1.42;
  }

  /* ---------- Browse grid polish ---------- */
  #home-featured-works,
  #home-featured-community,
  #home-upcoming-events,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed,
  #search-results-grid{
    gap: 12px;
  }

  /* ---------- Community / Connect polish ---------- */
  .community-hub-header{
    margin-bottom: 10px;
  }

  .community-tabs{
    padding: 4px;
    gap: 6px;
  }

  .community-tabs .tab-btn{
    min-height: 42px;
    padding: 10px 12px;
  }

  .community-panels{
    margin-top: 10px;
  }

  /* ---------- Profile mobile polish ---------- */
  .profile-hero{
    gap: 12px;
    margin-bottom: 14px;
  }

  .profile-hero-main{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .profile-hero-stats{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-hero-stats > *{
    min-width: 0;
  }

  #profile-network-tabs,
  #profile-library-tabs,
  #profile-myworks-tabs{
    gap: 8px;
    margin-top: 2px;
  }

  .profile-card .profile-header{
    align-items: flex-start;
  }

  /* ---------- Lounge final polish ---------- */
  .lounge-shell{
    margin-top: 0;
  }

  .lounge-feed-header{
    margin-bottom: 8px;
  }

  #lounge-page-create-wrapper{
    border-radius: 16px;
    padding: 12px;
  }

  #lounge-feed{
    gap: 10px;
  }

  #lounge-feed .card,
  .lounge-rail-card,
  .lounge-block{
    border-radius: 16px;
  }

  #lounge-feed .card{
    padding: 12px 12px 14px;
  }

  .lounge-rail-left,
  #lounge-rail-panels{
    gap: 10px;
  }

  .lounge-rail-links{
    gap: 8px;
  }

  .lounge-rail-links .section-link{
    min-height: 40px;
  }

  /* ---------- Work detail final polish ---------- */
  .work-detail-header{
    margin-bottom: 10px;
  }

  .work-hero{
    margin-bottom: 12px;
  }

  .work-hero-grid{
    gap: 12px;
  }

  #work-hero-logline,
  #work-detail-description{
    font-size: 0.94rem;
    line-height: 1.52;
  }

  #work-hero-chips{
    gap: 8px;
  }

  .work-mini-stats{
    gap: 8px;
  }

  .mini-stat{
    padding: 10px 12px;
  }

  .work-tabs{
    margin-bottom: 10px;
  }

  .work-panels{
    gap: 12px;
  }

  #work-comments-list,
  #work-detail-related,
  #event-comments-list{
    gap: 10px;
  }

  /* ---------- Event detail final polish ---------- */
  #event-detail-description{
    font-size: 0.94rem;
    line-height: 1.52;
  }

  /* ---------- Forms ---------- */
  .form,
  #work-comment-form,
  #event-comment-form,
  #lounge-page-form{
    gap: 10px;
  }

  .form input,
  .form textarea,
  .form select,
  #work-comment-input,
  #event-comment-input,
  #lounge-page-form textarea,
  #lounge-page-form input[type="url"]{
    min-height: 46px;
  }

  #work-comment-input,
  #event-comment-input{
    min-height: 120px;
  }

  .form label{
    gap: 6px;
  }

  /* ---------- Footer polish ---------- */
  .footer{
    padding-left: 14px;
    padding-right: 14px;
  }

  .footer-inner{
    gap: 12px;
  }

  .footer-col h4{
    margin-bottom: 4px;
  }

  /* ---------- Mobile detail bars ---------- */
  .mobile-detail-bar{
    left: 10px;
    right: 10px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    gap: 8px;
    border-radius: 16px;
  }

  .mobile-detail-bar .btn{
    min-height: 44px;
    font-size: 0.82rem;
  }

  body.is-mobile #view-work-detail,
  body.is-mobile #view-event-detail{
    padding-bottom: 178px;
  }
}

@media (max-width: 420px){

  .hero{
    padding: 18px 14px;
  }

  .profile-hero-stats{
    grid-template-columns: 1fr;
  }

  .home-section,
  .block,
  .shop-category{
    margin-bottom: 14px;
  }

  .card,
  .work-card,
  .event-card,
  .product-card{
    padding: 10px;
  }

  .mobile-detail-bar{
    left: 8px;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================
   MOBILE HARD LOCK (FINAL)
   SAFE ALIGNMENT PATCH
   - keeps phone breakpoint aligned to JS (640px)
   - preserves Phase 3–7 mobile layouts
   - prevents bottom-nav overlap globally
   - avoids forcing full-width buttons or collapsing all grids
========================= */

@media (max-width: 640px){

  /* Single source of truth */
  .desktop-only{
    display: none !important;
  }

  .mobile-only{
    display: block !important;
  }

  .mobile-topbar{
    display: flex !important;
  }

  .mobile-bottom-nav{
    display: grid !important;
  }

  body,
  html{
    overflow-x: hidden;
  }

  /* Global mobile shell spacing */
  body.is-mobile #imb-app-root{
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.is-mobile .main{
    padding-top: 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 28px !important;
    margin-bottom: 0 !important;
  }

  .view.active{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Keep non-detail screens clear of the fixed bottom nav */
  body.is-mobile .view:not(#view-work-detail):not(#view-event-detail){
    padding-bottom: 18px;
  }

  /* Mobile search sheet behavior */
  #mobile-search-sheet.hidden{
    display: none !important;
  }

  #mobile-search-sheet:not(.hidden){
    display: block !important;
  }

  /* Prevent accidental overflow from media/cards/forms */
  img,
  video,
  iframe,
  canvas,
  audio,
  input,
  textarea,
  select{
    max-width: 100%;
  }

  input,
  textarea,
  select{
    font-size: 16px;
  }

  /* Keep buttons tap-friendly without forcing every button full width */
  .btn,
  .view-all-btn,
  .section-link,
  .tab-btn,
  .chip,
  .pill,
  .mobile-tab-btn,
  .mobile-icon-btn{
    min-height: 44px;
  }

  /* Preserve the intended mobile browse layouts */
  .card-grid{
    width: 100%;
  }

  .row-scroll,
  .poster-row{
    width: 100%;
  }
}

@media (max-width: 420px){
  body.is-mobile #imb-app-root{
    padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =========================
   UNIVERSAL CARD SYSTEM
========================= */

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* IMAGE / POSTER AREA */
.card-media {
  width: 100%;
  aspect-ratio: 2 / 3; /* SAME AS FEATURED WORKS */
  overflow: hidden;
  border-radius: 12px;
  background: #111;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT AREA */
.card-body {
  flex: 1;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* =========================================================
   FINAL DISCOVER DESKTOP CARD LIMIT
   - show only first 4 cards on desktop
========================================================= */
@media (min-width: 641px){
  #discover-watch-row > :nth-child(n+5),
  #discover-listen-row > :nth-child(n+5),
  #discover-read-row > :nth-child(n+5){
    display: none !important;
  }
}

/* =========================================================
   IMB PDF FLIPBOOK LAYOUT SYSTEM
   STEP 1 — spread layout / cover centering / usable reader
========================================================= */

#work-detail-media .imb-pdf-flipbook{
  width: 100%;
  max-width: 100%;
}

#work-detail-media .imb-pdf-flipbook-shell{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.05), rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.22) 100%),
    #111;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

#work-detail-media .imb-pdf-flipbook-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#work-detail-media .imb-pdf-flipbook-status{
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.9rem;
  color: #d9d9f4;
}

#work-detail-media .imb-pdf-flipbook-stage{
  position: relative;
  display: block;
  width: 100%;
  min-height: 760px;
  padding: 22px 24px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.28) 100%);
}

#work-detail-media .imb-pdf-flipbook-spread{
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 680px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
}

#work-detail-media .imb-pdf-page-canvas{
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  display: block;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.28),
    0 0 0 1px rgba(0,0,0,0.08);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

#work-detail-media .imb-pdf-page-canvas.is-hidden{
  display: none !important;
}

#work-detail-media .imb-pdf-flipbook-stage.single-page .imb-pdf-flipbook-spread{
  justify-content: center;
  gap: 0;
}

#work-detail-media .imb-pdf-flipbook-stage.single-page .imb-pdf-page-canvas{
  max-width: min(100%, 860px) !important;
}

#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-flipbook-spread{
  justify-content: center;
  gap: 20px;
}

#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas{
  max-width: calc(50% - 10px) !important;
}

#work-detail-media .imb-pdf-flipbook-stage.is-cover-spread .imb-pdf-flipbook-spread{
  justify-content: center;
  gap: 0;
}

#work-detail-media .imb-pdf-flipbook-stage.is-cover-spread .imb-pdf-page-canvas{
  max-width: min(100%, 860px) !important;
}

#work-detail-media .imb-pdf-flipbook-stage.is-cover-spread .imb-pdf-page-canvas.is-secondary{
  display: none !important;
}

#work-detail-media .imb-pdf-hitzone{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16%;
  min-width: 72px;
  z-index: 4;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#work-detail-media .imb-pdf-hitzone-prev{
  left: 0;
}

#work-detail-media .imb-pdf-hitzone-next{
  right: 0;
}

#work-detail-media .imb-pdf-hitzone:disabled{
  cursor: default;
  pointer-events: none;
}

@media (max-width: 980px){
  #work-detail-media .imb-pdf-flipbook-stage{
    min-height: 580px;
    padding: 18px 12px 22px;
  }

  #work-detail-media .imb-pdf-flipbook-spread{
    min-height: 500px;
    gap: 0;
  }

  #work-detail-media .imb-pdf-page-canvas,
  #work-detail-media .imb-pdf-flipbook-stage.single-page .imb-pdf-page-canvas{
    max-width: 100% !important;
  }

  #work-detail-media .imb-pdf-page-canvas.is-secondary{
    display: none !important;
  }

  #work-detail-media .imb-pdf-hitzone{
    width: 20%;
    min-width: 56px;
  }
}

/* =========================================================
   IMB PDF FLIPBOOK TURN POLISH
   STEP 2 — light fake-flip feel (CSS only)
========================================================= */

#work-detail-media .imb-pdf-flipbook-stage{
  perspective: 1800px;
  perspective-origin: center center;
}

#work-detail-media .imb-pdf-flipbook-spread{
  transform-style: preserve-3d;
  transition: filter 220ms ease, transform 220ms ease;
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning .imb-pdf-flipbook-spread{
  filter: saturate(0.98) brightness(0.99);
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-next .imb-pdf-flipbook-spread{
  transform: translateX(-2px);
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-prev .imb-pdf-flipbook-spread{
  transform: translateX(2px);
}

#work-detail-media .imb-pdf-page-canvas{
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease,
    opacity 220ms ease;
  transform-origin: center center;
}

#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas:first-child{
  transform-origin: right center;
}

#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas.is-secondary{
  transform-origin: left center;
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-next .imb-pdf-page-canvas:first-child,
#work-detail-media .imb-pdf-flipbook-stage.is-turning-next .imb-pdf-page-canvas.is-secondary{
  box-shadow:
    0 18px 34px rgba(0,0,0,0.32),
    0 0 0 1px rgba(0,0,0,0.08);
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-prev .imb-pdf-page-canvas:first-child,
#work-detail-media .imb-pdf-flipbook-stage.is-turning-prev .imb-pdf-page-canvas.is-secondary{
  box-shadow:
    0 18px 34px rgba(0,0,0,0.32),
    0 0 0 1px rgba(0,0,0,0.08);
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-next::after,
#work-detail-media .imb-pdf-flipbook-stage.is-turning-prev::after{
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 120px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(10px);
  transition: opacity 220ms ease;
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-next::after{
  right: calc(50% - 60px);
  background: linear-gradient(to left, rgba(0,0,0,0.28), rgba(0,0,0,0));
}

#work-detail-media .imb-pdf-flipbook-stage.is-turning-prev::after{
  left: calc(50% - 60px);
  background: linear-gradient(to right, rgba(0,0,0,0.28), rgba(0,0,0,0));
}

#work-detail-media [data-pdf-turn-sheet="1"]{
  pointer-events: none;
  will-change: transform, opacity, filter;
}

#work-detail-media .imb-pdf-flipbook-stage.is-cover-spread .imb-pdf-page-canvas{
  box-shadow:
    0 22px 44px rgba(0,0,0,0.34),
    0 0 0 1px rgba(0,0,0,0.08);
}

/* =========================================================
   IMB PDF MOBILE TURN EXPERIENCE
   - single-page flip illusion
   - no spread, no layout conflict
   - uses existing JS turn classes
========================================================= */

@media (max-width: 980px){

  /* Ensure proper 3D space */
  #work-detail-media .imb-pdf-flipbook-stage{
    perspective: 1400px;
    perspective-origin: center center;
  }

  #work-detail-media .imb-pdf-flipbook-spread{
    position: relative;
    transform-style: preserve-3d;
  }

  /* Base page behavior */
  #work-detail-media .imb-pdf-page-canvas{
    transform-origin: center center;
    backface-visibility: hidden;
    transition:
      transform 260ms cubic-bezier(.2,.6,.2,1),
      opacity 220ms ease,
      filter 220ms ease,
      box-shadow 220ms ease;
  }

  /* TURN: NEXT (page goes left, slight rotate) */
  #work-detail-media .imb-pdf-flipbook-stage.is-turning-next .imb-pdf-page-canvas{
    transform: translateX(-18px) rotateY(-6deg) scale(0.98);
    opacity: 0.85;
    filter: brightness(0.96);
    box-shadow:
      0 22px 40px rgba(0,0,0,0.35);
  }

  /* TURN: PREV (page goes right, mirrored) */
  #work-detail-media .imb-pdf-flipbook-stage.is-turning-prev .imb-pdf-page-canvas{
    transform: translateX(18px) rotateY(6deg) scale(0.98);
    opacity: 0.85;
    filter: brightness(0.96);
    box-shadow:
      0 22px 40px rgba(0,0,0,0.35);
  }

  /* Soft directional shadow (center fold illusion) */
  #work-detail-media .imb-pdf-flipbook-stage.is-turning-next::after,
  #work-detail-media .imb-pdf-flipbook-stage.is-turning-prev::after{
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    width: 90px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.55;
    filter: blur(12px);
    transition: opacity 200ms ease;
  }

  #work-detail-media .imb-pdf-flipbook-stage.is-turning-next::after{
    right: calc(50% - 45px);
    background: linear-gradient(to left, rgba(0,0,0,0.32), rgba(0,0,0,0));
  }

  #work-detail-media .imb-pdf-flipbook-stage.is-turning-prev::after{
    left: calc(50% - 45px);
    background: linear-gradient(to right, rgba(0,0,0,0.32), rgba(0,0,0,0));
  }

  /* Subtle resting polish */
  #work-detail-media .imb-pdf-flipbook-stage .imb-pdf-page-canvas{
    box-shadow:
      0 20px 42px rgba(0,0,0,0.32),
      0 0 0 1px rgba(0,0,0,0.08);
  }

  /* Prevent interaction jitter during turn */
  #work-detail-media .imb-pdf-flipbook-stage.is-turning .imb-pdf-hitzone{
    pointer-events: none;
  }
}

/* =========================================================
   DESKTOP BROWSE ROWS — FILL FULL WIDTH
   - 4-up desktop rows
   - keeps mobile Phase 3 behavior
========================================================= */
@media (min-width: 641px){
  #home-featured-works,
  #home-upcoming-events,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  #home-featured-works > *,
  #home-upcoming-events > *,
  #discover-watch-row > *,
  #discover-listen-row > *,
  #discover-read-row > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   UNIVERSAL ROW WIDTH SYSTEM
   - fixes inconsistent card widths across home/discover/connect
   - desktop: 4 equal columns
   - mobile: 2 equal columns
   - very small phones: 1 column
========================================================= */

/* ---------- DESKTOP / TABLET ---------- */
@media (min-width: 641px){
  #home-featured-works,
  #home-upcoming-events,
  #home-featured-merch,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed,
  #search-results-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  #home-featured-works > *,
  #home-upcoming-events > *,
  #home-featured-merch > *,
  #discover-watch-row > *,
  #discover-listen-row > *,
  #discover-read-row > *,
  #connect-creators > *,
  #connect-members > *,
  #connect-institutions > *,
  #connect-groups > *,
  #connect-events > *,
  #connect-lounge-feed > *,
  #search-results-grid > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Featured Community keeps its rotator but gets equal columns */
  #home-featured-community{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #home-featured-community > .home-community-rotator,
  #home-featured-community .home-community-rotator{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #home-featured-community .home-community-slot{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px){
  #home-featured-works,
  #home-upcoming-events,
  #home-featured-merch,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed,
  #search-results-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  #home-featured-works > *,
  #home-upcoming-events > *,
  #home-featured-merch > *,
  #discover-watch-row > *,
  #discover-listen-row > *,
  #discover-read-row > *,
  #connect-creators > *,
  #connect-members > *,
  #connect-institutions > *,
  #connect-groups > *,
  #connect-events > *,
  #connect-lounge-feed > *,
  #search-results-grid > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #home-featured-community{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #home-featured-community > .home-community-rotator,
  #home-featured-community .home-community-rotator{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #home-featured-community .home-community-slot{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 420px){
  #home-featured-works,
  #home-upcoming-events,
  #home-featured-merch,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed,
  #search-results-grid{
    grid-template-columns: 1fr !important;
  }

  #home-featured-community > .home-community-rotator,
  #home-featured-community .home-community-rotator{
    grid-template-columns: 1fr !important;
  }
}

/* ---------- UNIVERSAL CARD WIDTH ---------- */
#home-featured-works .card,
#home-upcoming-events .card,
#home-featured-merch .card,
#discover-watch-row .card,
#discover-listen-row .card,
#discover-read-row .card,
#connect-creators .card,
#connect-members .card,
#connect-institutions .card,
#connect-groups .card,
#connect-events .card,
#connect-lounge-feed .card,
#search-results-grid .card,
#home-featured-community .home-community-card,
#home-featured-community .profile-card,
#home-featured-community .card{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   SHOP PAGE — REAL WIDTH OWNER
   Target the containers that are actually present:
   .shop-category with .card-grid / .row-scroll / .poster-row
========================================================= */

/* Desktop / tablet */
@media (min-width: 641px){
  .shop-category .card-grid,
  .shop-category .row-scroll,
  .shop-category .poster-row{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  .shop-category .card-grid > *,
  .shop-category .row-scroll > *,
  .shop-category .poster-row > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .shop-category .card-grid,
  .shop-category .row-scroll,
  .shop-category .poster-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  .shop-category .card-grid > *,
  .shop-category .row-scroll > *,
  .shop-category .poster-row > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Very small phones */
@media (max-width: 420px){
  .shop-category .card-grid,
  .shop-category .row-scroll,
  .shop-category .poster-row{
    grid-template-columns: 1fr !important;
  }
}

/* Universal shop card width */
.shop-category .card,
.shop-category .product-card,
.shop-category .poster-card,
.shop-category .work-card{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   PROFILE DETAIL DEPTH
========================================================= */

.profile-detail-hero-card{
  padding: 18px;
}

.profile-detail-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.profile-detail-identity{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

.profile-detail-identity-copy{
  min-width:0;
}

#profile-detail-name{
  margin:6px 0 4px;
  font-size:1.5rem;
}

#profile-detail-handle{
  margin:0;
}

.profile-detail-bio{
  margin:14px 0 10px;
  font-size:0.95rem;
  color:#d4d4f0;
  line-height:1.55;
}

.profile-detail-grid{
  display:grid;
  gap:14px;
}

.profile-detail-grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-detail-grid-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-stat-card{
  cursor:default;
}

.profile-stat-value{
  margin-top:6px;
  font-size:1.35rem;
  font-weight:700;
  color:#f5f5ff;
}

.profile-detail-quest-list,
.profile-detail-activity-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.profile-detail-quest-item,
.profile-detail-activity-item{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}

.profile-detail-activity-item .muted{
  display:block;
  margin-top:4px;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  font-size:0.78rem;
  color:#e7e7ff;
}

.tag-chip.is-soft{
  color:#bfbfe6;
}

@media (max-width: 800px){
  .profile-detail-grid-2,
  .profile-detail-grid-4{
    grid-template-columns: 1fr;
  }

  .profile-detail-hero-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .profile-detail-identity{
    align-items:flex-start;
  }
}

/* =========================================================
   IMB PATCH — Lounge liveliness polish
========================================================= */

#view-lounge .lounge-card {
  border-color: rgba(255,255,255,0.12);
}

#view-lounge .lounge-card .card-subtitle {
  font-size: 0.8rem;
  color: #b8b8d4;
  margin-top: 4px;
}

#view-lounge .lounge-card .actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#view-lounge .lounge-reply-count {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #9a9ab8;
}

#view-lounge .lounge-preview-thread {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#view-lounge .lounge-preview-reply {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}

#view-lounge .lounge-preview-who {
  display: inline-block;
  font-weight: 600;
  color: #f2f2ff;
  margin-right: 6px;
}

#view-lounge .lounge-preview-body {
  color: #c8c8df;
  line-height: 1.4;
}

#view-lounge .lounge-inline-thread {
  margin-top: 12px;
}

#view-lounge #lounge-feed > .lounge-card {
  width: 100%;
  min-width: 0;
}

@media (max-width: 640px) {
  #view-lounge .lounge-card .actions-row .btn {
    min-height: 40px;
  }

  #view-lounge .lounge-preview-reply {
    padding: 9px 10px;
  }
}

/* =========================================================
   IMB PROFILE DETAIL IMAGE FIX — 2026-04-24
   Fixes avatar overwrite recovery + banner crop height
========================================================= */

#profile-detail-cover.profile-detail-cover{
  min-height: clamp(220px, 28vw, 340px) !important;
  height: clamp(220px, 28vw, 340px) !important;
  background-size: cover !important;
  background-position: center center !important;
}

#profile-detail-avatar.profile-avatar-shell{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}

#profile-detail-avatar-img.profile-avatar-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: inherit !important;
}

#profile-detail-avatar.has-image #profile-detail-avatar-fallback{
  display: none !important;
}

#profile-detail-avatar:not(.has-image) #profile-detail-avatar-fallback,
#profile-detail-avatar.image-failed #profile-detail-avatar-fallback{
  display: flex !important;
}

@media (max-width: 640px){
  #profile-detail-cover.profile-detail-cover{
    min-height: 190px !important;
    height: 190px !important;
  }

  #profile-detail-avatar.profile-avatar-shell{
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
}

/* =========================================================
   IMB HERO FINAL SYSTEM
   - welcome + brand eyebrow hierarchy
   - headline + CTA hierarchy
   - mobile-optimized
========================================================= */

/* Eyebrow */
.hero-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

/* "Welcome to" */
.hero-welcome {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* "The IMB Network" */
.hero-brand {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
}

/* Headline */
.hero-copy h1 {
  font-family: "Space Grotesk", system-ui;
  font-size: 2.2rem;
  line-height: 1.05;
  margin: 0 0 10px;
  max-width: 760px;
}

/* Subheadline */
.hero .subtitle {
  margin: 0 0 14px;
  max-width: 720px;
  line-height: 1.5;
}

/* CTA row */
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Secondary button */
.btn.secondary {
  background: transparent;
  color: #f5f5ff;
  border: 1px solid rgba(255,255,255,0.28);
}

.btn.secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
}

/* Mobile */
@media (max-width: 640px) {
  .hero-eyebrow {
    gap: 5px;
  }

  .hero-brand {
    font-size: 0.95rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.04;
    max-width: 100%;
  }

  .hero .subtitle {
    max-width: 100%;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   IMB HERO COPY WIDTH FIX
   Lets hero copy use the full desktop hero width
   without changing font size or mobile layout.
========================================================= */

@media (min-width: 641px) {
  #view-home .hero-copy {
    width: 100% !important;
    max-width: none !important;
  }

  #view-home .hero-copy h1 {
    max-width: 100% !important;
    width: 100% !important;
  }

  #view-home .hero .subtitle {
    max-width: 920px !important;
  }
}

/* =========================================================
   IMB LAUNCH TRUST PATCH v1
   Trust, routing, admin containment, skeletons, mobile admin
========================================================= */

/* Debug/system artifacts stay hidden unless explicitly enabled by verified admin state. */
#imb-debug,
.imb-debug,
[data-debug="1"] {
  display: none !important;
}

/* Clickable cards should feel intentional */
[data-detail-type][data-id] {
  cursor: pointer;
}

[data-detail-type][data-id]:focus-visible {
  outline: 2px solid rgba(255, 107, 107, 0.95);
  outline-offset: 3px;
}

/* Skeleton loading instead of layout-jumping text spinners */
.imb-skeleton-card {
  min-height: 220px;
  pointer-events: none;
  cursor: default;
}

.imb-skeleton-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.13),
    rgba(255,255,255,0.06)
  );
  background-size: 220% 100%;
  animation: imbSkeletonPulse 1.2s ease-in-out infinite;
}

.imb-skeleton-line {
  height: 12px;
  width: 64%;
  border-radius: 999px;
  margin: 8px 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.13),
    rgba(255,255,255,0.06)
  );
  background-size: 220% 100%;
  animation: imbSkeletonPulse 1.2s ease-in-out infinite;
}

.imb-skeleton-line.wide {
  width: 88%;
}

.imb-detail-loading {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}

@keyframes imbSkeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Stabilize empty/loading rows */
#home-featured-works,
#home-featured-community,
#home-upcoming-events,
#discover-watch-row,
#discover-listen-row,
#discover-read-row,
#connect-creators,
#connect-members,
#connect-institutions,
#connect-groups,
#connect-events {
  min-height: 220px;
}

/* Keep avatar and banner rendering consistent */
.profile-avatar-shell,
.avatar-shell,
.profile-avatar,
.profile-card .avatar,
.profile-card img {
  flex-shrink: 0;
}

#profile-detail-cover,
.profile-detail-cover {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Mobile admin fallback: do not let reports tables break layout */
@media (max-width: 700px) {
  #view-admin table,
  #view-admin-reports table,
  .admin-panel table,
  .reports-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 12px;
  }

  #view-admin th,
  #view-admin td,
  #view-admin-reports th,
  #view-admin-reports td,
  .admin-panel th,
  .admin-panel td {
    min-width: 120px;
  }
}

/* =========================================================
   IMB PATCH: Launch Trust Fail-Closed UI
========================================================= */


/* Known debug/system artifacts stay hidden unless explicitly enabled */
#imb-debug,
.imb-debug,
[data-debug="1"],
#imb-recovery-banner {
  display: none !important;
}

body.admin-verified.imb-debug-enabled #imb-debug,
body.admin-verified.imb-debug-enabled .imb-debug,
body.admin-verified.imb-debug-enabled [data-debug="1"],
body.admin-verified.imb-debug-enabled #imb-recovery-banner {
  display: block !important;
}

/* Global loader only appears during actual auth-loading state */
#imb-global-loader {
  display: none !important;
}

body.auth-loading #imb-global-loader {
  display: flex !important;
}

/* Safety fallback: hidden modal must never flash at boot */
#imb-global-error.hidden,
.modal.hidden {
  display: none !important;
}

/* =========================================================
   IMB PERCEPTION LOCK + TRUST LOCK v2 + ALIVE FEED KIT
   Additive launch-stabilization layer. Do not remove before launch.
   Goals:
   - no blank sections
   - no silent clicks
   - no admin flicker
   - no broken media trust leaks
   - no dead Lounge perception
========================================================= */

:root {
  --imb-trust-border: rgba(255,255,255,0.10);
  --imb-trust-bg: rgba(255,255,255,0.035);
  --imb-trust-bg-strong: rgba(255,255,255,0.06);
  --imb-trust-accent: #ff6b6b;
}

/* Protected controls remain visually unavailable while boot/auth is settling */
body.auth-loading [data-nav-protected="true"],
body.auth-loading [data-boot-disabled="true"],
body.auth-loading .search-form,
body.auth-loading .mobile-bottom-nav,
body.auth-loading .mobile-topbar [data-nav-protected="true"] {
  opacity: 0.48;
  pointer-events: none;
}

body.imb-ui-ready [data-nav-protected="true"],
body.imb-ui-ready [data-boot-disabled="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent hidden views from visually leaking during class sync */
.view:not(.active) {
  display: none !important;
}

/* ---------- Perception Lock: skeletons and empty states ---------- */
.imb-skeleton-row,
.row-scroll .imb-skeleton-row,
.poster-row .imb-skeleton-row {
  display: flex;
  gap: 12px;
  min-width: 100%;
}

.card-grid .imb-skeleton-row {
  display: contents;
}

.imb-skeleton-card,
.imb-perception-skeleton-card {
  flex: 0 0 210px;
  min-width: 180px;
  min-height: 214px;
  border-radius: 16px;
  border: 1px solid var(--imb-trust-border);
  background: rgba(8,8,22,0.88);
  padding: 12px;
  pointer-events: none !important;
  cursor: default !important;
  overflow: hidden;
}

.card-grid > .imb-perception-skeleton-card,
.card-grid > .imb-skeleton-card {
  flex: initial;
  min-width: 0;
}

.imb-skeleton-media,
.imb-perception-skeleton-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  background-size: 220% 100%;
  animation: imbSkeletonPulse 1.15s ease-in-out infinite;
}

.imb-skeleton-line,
.imb-perception-skeleton-line {
  height: 12px;
  width: 66%;
  border-radius: 999px;
  margin: 8px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  background-size: 220% 100%;
  animation: imbSkeletonPulse 1.15s ease-in-out infinite;
}

.imb-skeleton-line.wide,
.imb-perception-skeleton-line.wide { width: 88%; }
.imb-skeleton-line.short,
.imb-perception-skeleton-line.short { width: 42%; }

@keyframes imbSkeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.imb-empty-state,
.imb-perception-empty {
  width: 100%;
  min-height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.13);
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  padding: 18px;
  color: rgba(245,245,255,0.82);
}

.imb-empty-inner { max-width: 520px; }
.imb-empty-kicker {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  margin-bottom: 8px;
}
.imb-empty-title { font-weight: 800; font-size: 0.98rem; margin-bottom: 5px; }
.imb-empty-copy { font-size: 0.85rem; line-height: 1.45; color: rgba(213,213,255,0.76); }

/* ---------- Click feedback: every action acknowledges touch/click ---------- */
button,
.btn,
.section-link,
.nav-btn,
.mobile-tab-btn,
.card[data-detail-type][data-id] {
  transition: transform 120ms ease, opacity 120ms ease, border-color 160ms ease, background 160ms ease;
}

.imb-clicked {
  transform: scale(0.975) !important;
  opacity: 0.78 !important;
}

button[aria-busy="true"],
.btn[aria-busy="true"] {
  cursor: progress !important;
  opacity: 0.72 !important;
}

/* ---------- Broken image fallback polish ---------- */
img[data-fallback-applied="1"],
.imb-image-fallback {
  object-fit: cover;
  background: radial-gradient(circle at 30% 20%, rgba(255,107,107,0.34), rgba(255,255,255,0.05) 42%, rgba(8,8,22,0.95));
}

.imb-bg-fallback {
  background-image: radial-gradient(circle at 30% 20%, rgba(255,107,107,0.22), rgba(255,255,255,0.04) 42%, rgba(8,8,22,0.95)) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ---------- Alive Feed Kit ---------- */
.imb-alive-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.imb-alive-card {
  cursor: default !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}

.imb-alive-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.imb-alive-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--imb-trust-accent);
  box-shadow: 0 0 0 6px rgba(255,107,107,0.10);
}

.imb-alive-title {
  font-weight: 800;
  font-size: 0.94rem;
}

.imb-alive-copy {
  color: rgba(213,213,255,0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}

.imb-alive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.imb-alive-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(245,245,255,0.88);
  font-size: 0.72rem;
  padding: 6px 10px;
}

#lounge-feed .imb-alive-card:hover {
  border-color: rgba(255,107,107,0.34) !important;
}

/* ---------- Layout stability locks ---------- */
#home-featured-works,
#home-featured-community,
#home-upcoming-events,
#discover-watch-row,
#discover-listen-row,
#discover-read-row,
#connect-creators,
#connect-members,
#connect-institutions,
#connect-groups,
#connect-events,
#connect-lounge-feed,
#events-directory-grid,
#watch-directory-grid,
#listen-directory-grid,
#read-directory-grid,
#visualart-directory-grid,
#products-directory-grid,
#creators-directory-grid,
#members-directory-grid,
#institutions-directory-grid,
#groups-directory-grid {
  min-height: 160px;
}

#lounge-feed {
  min-height: 220px;
}

body.imb-ready .hero {
  animation: imbHeroReady 0.52s ease-out both;
}

@keyframes imbHeroReady {
  from { opacity: 0.72; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Loader copy should not cause layout jitter */
#imb-global-loader p {
  min-width: 220px;
  text-align: center;
}

@media (max-width: 640px) {
  .imb-skeleton-card,
  .imb-perception-skeleton-card {
    flex-basis: 178px;
    min-height: 190px;
  }

  .imb-empty-state,
  .imb-perception-empty {
    min-height: 120px;
    padding: 16px 12px;
  }

  .imb-alive-actions { gap: 6px; }
}

/* =========================================================
   IMB PHASE 1 SAFE LAUNCH PERCEPTION LOCK v1
   Scope: CSS-only trust hardening. No auth/routing/Firebase changes.
========================================================= */


a[href="#"].btn,
a[href="#"].pill,
a[href="#"].sponsor-bar-cta,
button:empty,
.btn:empty,
.pill:empty {
  display: none !important;
}

[data-launch-hide="true"],
.launch-hide,
.v1-skeleton,
.skeleton-copy,
[data-skeleton="true"] {
  display: none !important;
}

body:not(.is-authed) #lounge-page-form,
body:not(.is-authed) #lounge-form,
body:not(.is-authed) #submit-work-form,
body:not(.is-authed) #submit-event-form,
body:not(.is-authed) [data-auth-required-form="true"] {
  display: none !important;
}

body:not(.is-authed) .auth-required-action,
body:not(.is-authed) [data-auth-required="true"],
body:not(.is-authed) .comment-box,
body:not(.is-authed) .comment-form {
  display: none !important;
}

#view-product-detail .product-actions:empty,
#view-product-detail .product-buy:empty,
#view-work-detail .media-gallery:empty,
#view-work-detail .contributors-list:empty,
#view-profile-detail .profile-module:empty,
#view-event-detail .event-actions:empty {
  display: none !important;
}

.card,
.person-card,
.profile-card,
.work-card,
.product-card,
.event-card {
  min-height: 100%;
}

.card img,
.person-card img,
.profile-card img,
.work-card img,
.product-card img,
.event-card img {
  background: rgba(255,255,255,0.04);
}

.card-avatar,
.profile-avatar,
.avatar,
.person-avatar {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.profile-banner,
.group-banner,
.institution-banner,
.profile-detail-cover,
#profile-detail-cover,
.cover-image {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  object-position: center;
}

.hero-actions-phase1 {
  align-items: center;
}

.hero-actions-phase1 .btn.primary {
  box-shadow: 0 10px 28px rgba(255,107,107,0.18);
}

.hero-eyebrow .hero-welcome {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.imb-empty-state,
.imb-perception-empty,
.empty-state,
.muted-empty {
  border-style: solid;
  background: rgba(255,255,255,0.035);
}


/* =========================================================
   IMB PATCH — Profile Edit Page v1
========================================================= */
.profile-edit-shell {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.profile-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.profile-edit-form {
  max-width: none;
  width: 100%;
}

.profile-edit-card {
  cursor: default;
  margin-bottom: 14px;
}

.profile-edit-card:hover,
.profile-edit-imani:hover {
  border-color: rgba(255,255,255,0.12);
}

.profile-edit-card h2,
.profile-edit-imani h2 {
  margin: 0 0 6px;
  font-family: "Space Grotesk", system-ui;
  font-size: 1.05rem;
}

.profile-edit-card label {
  margin-top: 12px;
}

.profile-edit-media-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.profile-edit-media-row.is-banner {
  grid-template-columns: 180px minmax(0, 1fr);
}

.profile-edit-preview {
  background: rgba(255,255,255,0.06);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}

.profile-edit-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 999px;
}

.profile-edit-banner-preview {
  width: 180px;
  height: 72px;
  border-radius: 14px;
}

.profile-edit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.profile-edit-imani {
  position: sticky;
  top: 86px;
  cursor: default;
}

.profile-edit-imani-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.profile-edit-note {
  margin-top: 12px;
}

@media (max-width: 860px) {
  .profile-edit-grid {
    grid-template-columns: 1fr;
  }

  .profile-edit-imani {
    position: static;
  }
}

@media (max-width: 640px) {
  .profile-edit-media-row,
  .profile-edit-media-row.is-banner {
    grid-template-columns: 1fr;
  }

  .profile-edit-banner-preview {
    width: 100%;
    max-width: 360px;
    height: 120px;
  }

  .profile-edit-avatar-preview {
    width: 88px;
    height: 88px;
  }

  .profile-edit-actions .btn,
  .profile-edit-imani-actions .btn {
    width: 100%;
  }
}


/* =========================================================
   IMB LAUNCH STABILITY LOCK v1 — 2026-04-27
   Purpose: pre-launch trust fixes only.
   - fail-closed admin visibility
   - stable async rows / no blank sections
   - consistent avatar/banner rendering
   - visible click/failure feedback
========================================================= */

/* Prevent async content from collapsing and jumping during Firestore reads. */
#home-featured-works,
#home-featured-community,
#home-upcoming-events,
#home-featured-merch,
#discover-watch-row,
#discover-listen-row,
#discover-read-row,
#connect-creators,
#connect-members,
#connect-institutions,
#connect-groups,
#connect-events,
#connect-lounge-feed,
#lounge-feed,
#events-directory-grid,
#watch-directory-grid,
#listen-directory-grid,
#read-directory-grid,
#shop-products,
#shop-products-grid,
.card-grid[data-rotate4="true"],
.row-scroll[data-rotate4="true"],
.poster-row[data-rotate4="true"] {
  min-height: 168px;
}

.imb-launch-empty,
.imb-launch-error,
.imb-launch-loading {
  width: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  color: #d8d8ee;
}

.imb-launch-empty strong,
.imb-launch-error strong,
.imb-launch-loading strong {
  color: #f5f5ff;
  font-size: 0.95rem;
}

.imb-launch-error {
  border-color: rgba(255,107,107,0.35);
}

.imb-launch-skeleton {
  position: relative;
  overflow: hidden;
  min-width: 210px;
  min-height: 168px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.07), rgba(255,255,255,0.035));
}

/* Unified visual contract for cards, avatars and banners. */
.card,
.person-card,
.profile-card,
.work-card,
.product-card,
.event-card,
.lounge-card {
  position: relative;
}

.card[data-detail-type],
.person-card[data-detail-type],
.profile-card[data-detail-type],
.work-card[data-detail-type],
.product-card[data-detail-type],
.event-card[data-detail-type],
.lounge-card[data-detail-type],
[data-clickable="true"] {
  cursor: pointer;
}

.card[data-detail-type]:focus-visible,
.person-card[data-detail-type]:focus-visible,
.profile-card[data-detail-type]:focus-visible,
.work-card[data-detail-type]:focus-visible,
.product-card[data-detail-type]:focus-visible,
.event-card[data-detail-type]:focus-visible,
.lounge-card[data-detail-type]:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(255,107,107,0.9);
  outline-offset: 3px;
}

.avatar,
.profile-avatar,
.person-avatar,
.card-avatar,
.profile-card .avatar,
#profile-detail-avatar {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

.avatar img,
.profile-avatar img,
.person-avatar img,
.card-avatar img,
.profile-card .avatar img,
#profile-detail-avatar img,
.profile-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

#profile-detail-cover,
.profile-detail-cover,
.group-banner,
.institution-banner,
.profile-banner,
.cover-image {
  width: 100%;
  min-height: clamp(190px, 26vw, 340px);
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

img.imb-img-failed {
  opacity: 0 !important;
}

/* Broken placeholder anchors should not look like valid actions. */
a[href="#"]:not([data-view]):not([data-open-report]),
button[disabled],
[aria-disabled="true"] {
  cursor: not-allowed !important;
}

/* Toast used by the launch stability layer. */
#imb-launch-toast-root {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.imb-launch-toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(8,8,22,0.96);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42);
  font-size: 0.86rem;
  line-height: 1.35;
  pointer-events: auto;
}

.imb-launch-toast.warn,
.imb-launch-toast.error {
  border-color: rgba(255,107,107,0.45);
}

@media (max-width: 640px) {
  #imb-launch-toast-root {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .imb-launch-toast {
    max-width: none;
  }

  #profile-detail-cover,
  .profile-detail-cover,
  .group-banner,
  .institution-banner,
  .profile-banner,
  .cover-image {
    min-height: 180px;
  }
}


/* =========================================================
   IMB CLEAN STABILIZATION NAV/CURSOR FIX — 20260428-clean-stabilization-nav-cursor-v1
========================================================= */
.nav,
.nav-btn,
.mobile-bottom-nav,
.mobile-tab-btn,
[data-view].nav-btn,
[data-view].mobile-tab-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.nav [aria-disabled="true"],
.mobile-bottom-nav [aria-disabled="true"],
.nav-btn[aria-disabled="true"],
.mobile-tab-btn[aria-disabled="true"] {
  cursor: pointer !important;
}

.nav[data-nav-locked="false"] .nav-btn,
.mobile-bottom-nav .mobile-tab-btn {
  opacity: 1 !important;
}

#imb-global-error.hidden,
#imb-global-error[aria-hidden="true"] {
  display: none !important;
}

#view-work-detail:not(.active),
#view-product-detail:not(.active),
#view-profile-detail:not(.active),
#view-event-detail:not(.active) {
  display: none !important;
}


/* =========================================================
   IMB CONNECT CLEAN LAUNCH FIX v1
   - Nav cursor/unlock
   - Admin/detail static shell containment
   - Connect page category/directory layout mirroring Shop
========================================================= */
.nav,
.mobile-bottom-nav,
.nav-btn,
.mobile-tab-btn,
[data-view] {
  cursor: pointer !important;
}

.nav[aria-disabled="true"],
.nav [aria-disabled="true"],
.mobile-bottom-nav [aria-disabled="true"],
.nav-btn[aria-disabled="true"],
.mobile-tab-btn[aria-disabled="true"] {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.nav[data-nav-locked="true"] .nav-btn,
.nav[data-nav-locked="false"] .nav-btn,
.mobile-bottom-nav .mobile-tab-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}

#imb-global-error.hidden,
#imb-global-error[aria-hidden="true"] {
  display: none !important;
}

.connect-category-shell,
.connect-directory-shell,
.connect-events-shell {
  margin-top: 24px;
}

.connect-category-grid {
  align-items: stretch;
}

.connect-category-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.connect-category-card .muted {
  line-height: 1.45;
}

.connect-category-link {
  width: max-content;
  margin-top: auto;
}

.connect-directory-category + .connect-directory-category {
  margin-top: 24px;
}

@media (max-width: 700px) {
  .connect-category-card {
    min-height: 145px;
  }
}


/* =========================================================
   IMB LAUNCH STATE LOCK v1
   Purpose: fail-closed auth/private UI and hide empty launch shells.
========================================================= */
#auth-open-modal[hidden],
#auth-signout[hidden],
#mobile-auth-open-modal[hidden],
#mobile-auth-signout[hidden],
.auth-only.is-auth-hidden,
[data-requires-auth="true"].is-auth-hidden,
.auth-only-private.is-auth-hidden,
.imb-launch-hidden,
.shop-category.imb-launch-empty,
.launch-private-empty[hidden] {
  display: none !important;
}

body:not(.auth-verified) .auth-only,
body:not(.auth-verified) [data-requires-auth="true"],
body:not(.auth-verified) .auth-only-private {
  display: none !important;
}

body:not(.auth-verified) #auth-signout,
body:not(.auth-verified) #mobile-auth-signout {
  display: none !important;
}

body.auth-verified #auth-open-modal,
body.auth-verified #mobile-auth-open-modal {
  display: none !important;
}

.launch-signin-card {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.launch-signin-card .btn {
  margin-top: 10px;
}

#view-events-directory .block-header h2:empty,
#view-events-directory .block-header h3:empty,
#view-events-directory .block-header p:empty,
#view-profile-detail h2:empty,
#view-profile-detail h3:empty,
#view-profile-detail .muted:empty {
  display: none !important;
}

/* =========================================================
   IMB LAUNCH STATE LOCK v2 CSS
   Browser-visible fail-closed state isolation.
========================================================= */
.imb-launch-hidden,
body:not(.auth-verified) [data-requires-auth="true"],
body:not(.auth-verified) .auth-only-private {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body:not(.auth-verified) #profile-dashboard[data-guest-sample-profile="true"] {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body:not(.auth-verified) #profile-edit-profile-btn,
body:not(.auth-verified) #profile-dashboard [data-view="membership"],
body:not(.auth-verified) #lounge-page-form,
body:not(.auth-verified) #lounge-page-create-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body:not(.auth-verified) #auth-signout,
body:not(.auth-verified) #mobile-auth-signout,
body.auth-verified #auth-open-modal,
body.auth-verified #mobile-auth-open-modal {
  display: none !important;
  visibility: hidden !important;
}
body:not(.auth-verified) #auth-open-modal,
body:not(.auth-verified) #mobile-auth-open-modal {
  visibility: visible !important;
}
.guest-profile-sample-mode #profile-dashboard .profile-hero {
  border-style: dashed;
}
.guest-profile-sample-mode #profile-dashboard::before {
  content: "Guest sample profile";
  display: inline-flex;
  margin: 0 0 0.75rem 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.76);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shop-category.imb-launch-empty,
section.imb-launch-empty {
  display: none !important;
}

/* =========================================================
   IMB PHASE 1 AD LAYER — Surgical Overlay v1
   Keeps existing sponsor bar intact. Scoped to media/discover only.
========================================================= */
.imb-pause-ad {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(260px, calc(100% - 32px));
  background: rgba(8, 8, 10, 0.88);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 10px;
  z-index: 30;
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}

.imb-pause-ad.hidden { display: none !important; }

.imb-pause-ad-link {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.imb-pause-ad img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

.imb-pause-ad-label,
.sponsored-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

.imb-pause-ad-label {
  margin: 0 0 8px;
}

.imb-pause-ad-close {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

.imb-sponsored-card {
  cursor: pointer;
  border-style: dashed;
}

.imb-sponsored-card .thumb {
  position: relative;
}

.imb-sponsored-card .sponsored-label {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}

video[data-imb-ad-playing="1"] {
  cursor: default;
}

@media (max-width: 640px) {
  .imb-pause-ad {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* =========================================================
   IMB SHELL CONSOLIDATION V1 — fail-closed shell contract
   Purpose: one fail-closed shell contract for boot, auth, admin, nav.
   This is intentionally last so it resolves older patch-layer conflicts.
========================================================= */
:root {
  --imb-shell-version: "shell-consolidation-v1-1-20260503";
}

/* Boot contract */
#imb-app-root.imb-locked,
body.auth-loading #imb-app-root {
  display: none !important;
}
body:not(.auth-loading) #imb-global-loader,
body.shell-ready #imb-global-loader {
  display: none !important;
}
body.auth-loading #imb-global-loader {
  display: flex !important;
}

/* Auth visibility contract */
.auth-only,
[data-requires-auth="true"] {
  display: none !important;
}
body.auth-verified .auth-only,
body.auth-verified [data-requires-auth="true"] {
  display: block !important;
}

/* View contract */
.view { display: none; }
.view.active { display: block; }
.view[aria-hidden="true"] { display: none !important; }
.view.active[aria-hidden="false"] { display: block; }

/* Nav contract: never show stop-sign cursor after shell unlock */
body.shell-ready .nav,
body.shell-ready .nav-btn,
body.shell-ready .mobile-bottom-nav,
body.shell-ready .mobile-tab-btn,
body.shell-ready [data-view] {
  cursor: pointer !important;
}
body.shell-ready .nav[data-nav-locked="false"] .nav-btn,
body.shell-ready .mobile-bottom-nav .mobile-tab-btn {
  pointer-events: auto !important;
  opacity: 1 !important;
}
.nav-btn.active,
.mobile-tab-btn.active {
  cursor: default !important;
}

/* Mobile shell sync */
@media (max-width: 640px) {
  body.is-mobile .desktop-only { display: none !important; }
  body.is-mobile .mobile-only { display: block !important; }
  body.is-mobile .mobile-topbar { display: flex !important; }
  body.is-mobile .mobile-bottom-nav { display: grid !important; }
}
@media (min-width: 641px) {
  body.is-desktop .desktop-only { display: flex !important; }
  body.is-desktop .mobile-only { display: none !important; }
}


/* =========================================================
   IMB PRODUCTION CONSOLIDATION V8.2 — SINGLE ADMIN FAIL-CLOSED CONTRACT
   Single CSS owner for admin visibility. JS owner: imbApplyAdminOnlyUI().
========================================================= */
html:not(.admin-verified) .admin-only,
body:not(.admin-verified) .admin-only,
html:not(.admin-verified) [data-admin-only],
body:not(.admin-verified) [data-admin-only],
html:not(.admin-verified) [data-admin-only="1"],
body:not(.admin-verified) [data-admin-only="1"],
html:not(.admin-verified) [data-admin-only="true"],
body:not(.admin-verified) [data-admin-only="true"],
html:not(.admin-verified) #nav-admin-ads,
body:not(.admin-verified) #nav-admin-ads,
html:not(.admin-verified) #view-admin,
body:not(.admin-verified) #view-admin,
html:not(.admin-verified) #view-admin-reports,
body:not(.admin-verified) #view-admin-reports,
html:not(.admin-verified) #view-admin-ads,
body:not(.admin-verified) #view-admin-ads {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.admin-verified .admin-only:not([hidden]),
body.admin-verified [data-admin-only]:not([hidden]),
body.admin-verified [data-admin-only="1"]:not([hidden]),
body.admin-verified [data-admin-only="true"]:not([hidden]),
body.admin-verified #nav-admin-ads {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.admin-verified #view-admin.active,
body.admin-verified #view-admin-reports.active,
body.admin-verified #view-admin-ads.active {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* =========================================================
   IMB V8.2 REGRESSION FIX — visible launch-critical controls
========================================================= */
#auth-open-modal:not([hidden]),
#auth-signout:not([hidden]),
#mobile-auth-open-modal:not([hidden]),
#mobile-auth-signout:not([hidden]) { visibility: visible !important; pointer-events: auto !important; }
.product-actions { display: flex !important; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
#product-add-to-cart:not([hidden]),
#product-buy-now:not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; }
#work-comment-form:not([hidden]),
#product-comment-form:not([hidden]),
#event-comment-form:not([hidden]) { visibility: visible !important; }

/* Profile Edit Route Isolation v1 */
#view-profile-edit:not(.active){display:none!important;visibility:hidden!important;pointer-events:none!important;}
#view-profile-edit.active{display:block!important;visibility:visible!important;pointer-events:auto!important;}
body.auth-verified .view.auth-only:not(.active){display:none!important;visibility:hidden!important;pointer-events:none!important;}
body.auth-verified .view.auth-only.active{display:block!important;visibility:visible!important;pointer-events:auto!important;}

/* IMB V8.2 Profile workspace toggle fix
   Auth-only blocks are force-shown after login, so profile workspace pills need
   their own stronger hidden state. */
#view-profile .profile-workarea-hidden,
#view-profile [data-profile-workspace-hidden="1"] {
  display: none !important;
}

#profile-workarea-pills .pill,
#profile-workarea-pills button {
  cursor: pointer;
}


/* =====================================================
   IMB PERCEPTION DOMINATION KIT V1
   Public trust / perceived activity layer
===================================================== */
.imb-perception-card { opacity: 0.94; position: relative; overflow: hidden; }
.imb-perception-card::after {
  content: "Featured"; position: absolute; top: 10px; right: 10px;
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; padding: 3px 7px; background: rgba(0,0,0,0.32); pointer-events: none;
}
.imb-perception-card:hover { opacity: 1; }
.imb-perception-thumb {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 20%, rgba(255,107,107,0.20), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
}
.imb-perception-thumb span { font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: rgba(255,255,255,0.88); letter-spacing: 0.04em; }
.imb-perception-avatar { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.28), transparent 28%), linear-gradient(135deg, #ff6b6b, #24243e) !important; color: #fff !important; background-size: cover; background-position: center; }
.avatar[style*="background-image"] { background-size: cover; background-position: center; }
@media (max-width: 640px) {
  .imb-perception-card::after { position: static; display: inline-flex; margin-bottom: 8px; }
  .mobile-tab-btn, .chip, .pill, .section-link, .view-all-btn { min-height: 44px; align-items: center; }
}

/* IMB Perception Kit v1.2 cleanup polish */
.imb-perception-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.imb-perception-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
#auth-open-modal[hidden],
#auth-signout[hidden],
#mobile-auth-open-modal[hidden],
#mobile-auth-signout[hidden] {
  display: none !important;
}

/* =====================================================
   IMB PREMIUM WORK DETAIL UI KIT v1.1
   Premium release-page UI for audio, video, read, visual.
===================================================== */
#view-work-detail .work-detail-header{
  margin: 18px 0 12px;
}
#view-work-detail .work-detail-header .back-link::before{
  content: "← Back";
}
.imb-premium-work-detail{
  --imb-card: rgba(7, 7, 17, 0.78);
  --imb-line: rgba(255,255,255,0.10);
  --imb-soft: rgba(255,255,255,0.055);
  --imb-strong: #ffffff;
  --imb-muted: #aaaac8;
  --imb-accent: #ff6b6b;
  color: #f7f7ff;
}
.imb-premium-hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--imb-line);
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), rgba(10,10,22,0.92) 42%, rgba(5,5,10,0.98));
  box-shadow: 0 26px 90px rgba(0,0,0,0.42);
  margin: 12px 0 22px;
}
.imb-premium-backdrop{
  position:absolute;
  inset:-30%;
  background-size:cover;
  background-position:center;
  filter: blur(42px) saturate(0.85);
  opacity:.24;
  transform: scale(1.06);
}
.imb-premium-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,5,10,.86), rgba(5,5,10,.54), rgba(5,5,10,.9));
  pointer-events:none;
}
.imb-premium-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
  gap: 28px;
  padding: clamp(20px, 4vw, 44px);
  align-items:end;
}
.imb-premium-art-wrap{
  width:100%;
}
.imb-premium-art{
  width:100%;
  aspect-ratio:1/1;
  border-radius:22px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.025));
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 60px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
}
.imb-premium-identity{
  min-width:0;
  padding-bottom: 2px;
}
.imb-premium-kicker{
  color: var(--imb-accent);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.imb-premium-title-slot #work-detail-title{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size: clamp(2.05rem, 5vw, 4.8rem);
  line-height:.94;
  letter-spacing:-.055em;
  margin:0 0 12px;
  max-width: 980px;
}
.imb-premium-meta-slot #work-detail-meta{
  font-size: .98rem;
  color: rgba(245,245,255,.82);
  margin: 0 0 14px;
}
.imb-premium-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 16px;
}
.imb-premium-chips span,
.imb-premium-lock-note{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.82);
  border-radius:999px;
  padding: 6px 10px;
  font-size:.72rem;
  text-transform: uppercase;
  letter-spacing:.1em;
}
.imb-premium-logline{
  max-width: 780px;
  color: rgba(255,255,255,.88);
  font-size: 1rem;
  line-height:1.55;
  margin: 0 0 12px;
}
.imb-premium-rating-slot .rating-section{
  margin: 10px 0 14px !important;
}
.imb-premium-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.imb-premium-actions .work-detail-header-actions,
.imb-premium-actions #work-detail-links{
  display:flex !important;
  gap: 8px;
  flex-wrap:wrap;
  margin:0 !important;
}
.imb-premium-actions .btn{
  min-height: 38px;
  padding: 8px 16px;
  font-weight: 750;
}
.imb-premium-content-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items:start;
}
.imb-premium-main,
.imb-premium-side{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.imb-premium-player-card,
.imb-premium-overview-card,
.imb-premium-tabs-card,
.imb-premium-side-card,
.imb-premium-related-bottom{
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border:1px solid var(--imb-line);
  border-radius:24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  overflow:hidden;
}
.imb-premium-overview-card,
.imb-premium-side-card{
  padding: 18px;
}
.imb-premium-related-bottom{
  margin-top: 20px;
}
.imb-premium-overview-card h2,
.imb-premium-side-card h3,
.imb-premium-related-bottom h2,
.imb-premium-card-head h2{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  letter-spacing:-.02em;
}
.imb-premium-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.imb-premium-player-stage{
  padding: 18px;
}
.imb-premium-player-stage iframe,
.imb-premium-player-stage video{
  width:100%;
  min-height: min(58vw, 560px);
  border:0;
  border-radius:18px;
  background:#000;
  display:block;
}
.imb-premium-player-stage audio.imb-premium-audio{
  width:100%;
  margin-top:14px;
  filter: saturate(.9);
}
.imb-premium-cover-stage{
  position:relative;
  min-height: min(54vw, 520px);
  border-radius:20px;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.10), rgba(0,0,0,.9));
  background-size:cover;
  background-position:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.imb-premium-cover-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
}
.imb-premium-cover-sheen{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 42%);
  mix-blend-mode: screen;
  opacity:.65;
}
.imb-premium-image-view{
  width:100%;
  max-height: 720px;
  object-fit:contain;
  border-radius:18px;
  background:#050509;
  border:1px solid rgba(255,255,255,.1);
}
.imb-premium-tab-row{
  display:flex;
  gap:8px;
  padding: 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow-x:auto;
}
.imb-premium-tab-row button{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:#f5f5ff;
  border-radius:999px;
  padding: 9px 13px;
  font-size:.8rem;
  font-weight:750;
  cursor:pointer;
}
.imb-premium-tab-row button.active{
  background:#f5f5ff;
  color:#050509;
  border-color:#f5f5ff;
}
.imb-premium-tab-panel{
  display:none;
  padding: 16px;
}
.imb-premium-tab-panel.active{
  display:block;
}
.imb-premium-item-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.imb-premium-item{
  width:100%;
  display:grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 12px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:#fff;
  border-radius:16px;
  padding: 12px;
  cursor:pointer;
}
.imb-premium-item:hover,
.imb-premium-item.active{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,107,107,.48);
}
.imb-premium-item-num{
  color:rgba(255,255,255,.45);
  font-weight:800;
  font-variant-numeric: tabular-nums;
}
.imb-premium-item-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.imb-premium-item-main strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.imb-premium-item-main em{
  color:var(--imb-muted);
  font-style:normal;
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.imb-premium-item-duration{
  color:rgba(255,255,255,.58);
  font-size:.82rem;
  font-variant-numeric: tabular-nums;
}
.imb-premium-credit-list,
#imb-premium-contributors-slot,
#imb-premium-details-slot,
#imb-premium-community-slot{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.imb-credit-row,
#imb-premium-details-slot .detail-row{
  display:grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding: 10px 0;
}
.imb-credit-row span{
  color:var(--imb-muted);
  font-size:.82rem;
}
.imb-credit-row strong{
  color:#fff;
  font-size:.88rem;
}
.imb-premium-copy-block,
#work-detail-description{
  color:rgba(255,255,255,.9);
  line-height:1.7;
  white-space:pre-wrap;
  font-size:.94rem;
}
#imb-premium-details-slot .work-panel,
#imb-premium-contributors-slot .work-panel,
#imb-premium-community-slot .work-panel{
  display:block !important;
}
#imb-premium-details-slot .block-header,
#imb-premium-contributors-slot .block-header,
#imb-premium-community-slot .block-header{
  display:none !important;
}
#imb-premium-related-slot #work-detail-related{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:14px;
  padding: 16px;
}
#imb-premium-related-slot .card{
  cursor:pointer;
}
#view-work-detail audio::-webkit-media-controls-download-button,
#view-work-detail video::-webkit-media-controls-download-button{
  display:none !important;
}
#view-work-detail audio,
#view-work-detail video{
  -webkit-user-select:none;
  user-select:none;
}
@media (max-width: 980px){
  .imb-premium-hero-inner,
  .imb-premium-content-grid{
    grid-template-columns:1fr;
  }
  .imb-premium-art-wrap{
    max-width: 320px;
  }
  .imb-premium-side{
    display:grid;
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .imb-premium-hero{
    border-radius:20px;
  }
  .imb-premium-hero-inner{
    padding: 16px;
    gap: 18px;
  }
  .imb-premium-art-wrap{
    max-width:none;
  }
  .imb-premium-title-slot #work-detail-title{
    font-size: 2.2rem;
  }
  .imb-premium-content-grid{
    gap: 14px;
  }
  .imb-premium-player-card,
  .imb-premium-overview-card,
  .imb-premium-tabs-card,
  .imb-premium-side-card,
  .imb-premium-related-bottom{
    border-radius:18px;
  }
  .imb-premium-player-stage iframe,
  .imb-premium-player-stage video,
  .imb-premium-cover-stage{
    min-height: 280px;
  }
  .imb-premium-item{
    grid-template-columns: 34px minmax(0,1fr);
  }
  .imb-premium-item-duration{
    display:none;
  }
  .imb-credit-row,
  #imb-premium-details-slot .detail-row{
    grid-template-columns:1fr;
    gap:4px;
  }
}


/* IMB Premium Work Detail UI v1.1 — Watch card playable cue */
.work-card.imb-watch-card .card-thumb,
.work-card.has-video-media .card-thumb{
  position: relative;
}
.work-card.imb-watch-card .card-thumb::after,
.work-card.has-video-media .card-thumb::after{
  content: "▶";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(5,5,9,.68);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 14px 32px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}
.work-card.imb-watch-card .card-thumb::before,
.work-card.has-video-media .card-thumb::before{
  content: "";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28));
  pointer-events:none;
}


/* =========================================================
   IMB READER STABILIZATION KIT v1.2
   Real fix: target the premium player stage AND legacy work-detail media.
   v1 missed cases where the PDF is mounted inside #imb-premium-player-stage.
========================================================= */

#imb-premium-player-stage:has(.imb-pdf-flipbook),
#work-detail-media:has(.imb-pdf-flipbook){
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  min-height: auto !important;
  overflow: visible !important;
}

#imb-premium-player-stage .imb-pdf-flipbook,
#work-detail-media .imb-pdf-flipbook{
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  display: block !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-shell,
#work-detail-media .imb-pdf-flipbook-shell{
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(8,8,16,0.96) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 26px 78px rgba(0,0,0,0.44) !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-toolbar,
#work-detail-media .imb-pdf-flipbook-toolbar{
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(5,5,12,0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-toolbar button,
#work-detail-media .imb-pdf-flipbook-toolbar button{
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-status,
#work-detail-media .imb-pdf-flipbook-status{
  min-width: 0 !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  color: rgba(245,245,255,0.78) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage,
#work-detail-media .imb-pdf-flipbook-stage{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 560px !important;
  height: min(76vh, 780px) !important;
  max-height: 780px !important;
  padding: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.07), transparent 38%),
    linear-gradient(180deg, #11111b, #07070d) !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-spread,
#work-detail-media .imb-pdf-flipbook-spread{
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

#imb-premium-player-stage .imb-pdf-page-canvas,
#work-detail-media .imb-pdf-page-canvas{
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #f7f3eb !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.38), 0 0 0 1px rgba(0,0,0,0.12) !important;
}

#imb-premium-player-stage .imb-pdf-page-canvas.is-hidden,
#work-detail-media .imb-pdf-page-canvas.is-hidden{
  display: none !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas,
#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas{
  max-width: calc((100% - 28px) / 2) !important;
  max-height: 100% !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage.single-page .imb-pdf-page-canvas,
#imb-premium-player-stage .imb-pdf-flipbook-stage.is-cover-spread .imb-pdf-page-canvas,
#work-detail-media .imb-pdf-flipbook-stage.single-page .imb-pdf-page-canvas,
#work-detail-media .imb-pdf-flipbook-stage.is-cover-spread .imb-pdf-page-canvas{
  max-width: min(100%, 760px) !important;
  max-height: 100% !important;
}

#imb-premium-player-stage .imb-pdf-hitzone,
#work-detail-media .imb-pdf-hitzone{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 12% !important;
  z-index: 4 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

#imb-premium-player-stage .imb-pdf-hitzone-prev,
#work-detail-media .imb-pdf-hitzone-prev{ left: 0 !important; }
#imb-premium-player-stage .imb-pdf-hitzone-next,
#work-detail-media .imb-pdf-hitzone-next{ right: 0 !important; }

@media (max-width: 980px){
  #imb-premium-player-stage .imb-pdf-flipbook,
  #work-detail-media .imb-pdf-flipbook{
    max-width: 100% !important;
  }

  #imb-premium-player-stage .imb-pdf-flipbook-toolbar,
  #work-detail-media .imb-pdf-flipbook-toolbar{
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  #imb-premium-player-stage .imb-pdf-flipbook-status,
  #work-detail-media .imb-pdf-flipbook-status{
    order: -1 !important;
  }

  #imb-premium-player-stage .imb-pdf-flipbook-toolbar button,
  #work-detail-media .imb-pdf-flipbook-toolbar button{
    width: 100% !important;
  }

  #imb-premium-player-stage .imb-pdf-flipbook-stage,
  #work-detail-media .imb-pdf-flipbook-stage{
    min-height: 520px !important;
    height: min(72vh, 700px) !important;
    padding: 16px !important;
  }

  #imb-premium-player-stage .imb-pdf-flipbook-spread,
  #work-detail-media .imb-pdf-flipbook-spread{
    gap: 0 !important;
  }

  #imb-premium-player-stage .imb-pdf-page-canvas.is-secondary,
  #work-detail-media .imb-pdf-page-canvas.is-secondary{
    display: none !important;
  }

  #imb-premium-player-stage .imb-pdf-hitzone,
  #work-detail-media .imb-pdf-hitzone{
    display: none !important;
  }
}

@media (max-width: 560px){
  #imb-premium-player-stage .imb-pdf-flipbook-stage,
  #work-detail-media .imb-pdf-flipbook-stage{
    min-height: 460px !important;
    height: min(68vh, 620px) !important;
    padding: 12px !important;
  }
}

/* =====================================================
   IMB MEDIA TYPE PREMIUM POLISH KIT v1
   Baseline: Reader Stabilization v1.2
===================================================== */
.imb-premium-polished .imb-premium-overview-card{
  display:none !important;
}

.imb-premium-polished .imb-premium-content-grid{
  grid-template-columns: minmax(0, 1fr) !important;
}

.imb-premium-polished .imb-premium-player-card{
  overflow:hidden;
}

.imb-premium-polished .imb-premium-player-stage{
  border-radius:22px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.055), rgba(0,0,0,0.94) 58%);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 44px rgba(0,0,0,0.35);
}

.imb-premium-polished-video .imb-premium-player-stage,
.imb-premium-polished-visual .imb-premium-player-stage{
  min-height: min(64vh, 660px);
}

.imb-premium-polished-audio .imb-premium-player-stage{
  min-height: 440px;
}

.imb-premium-polished .imb-premium-tab-row{
  gap:8px;
  padding:6px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
}

.imb-premium-polished .imb-premium-tab-row button{
  border-radius:999px;
  min-height:38px;
}

.imb-premium-detail-summary{
  display:grid;
  gap:14px;
}

.imb-premium-detail-summary h3{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:1rem;
  letter-spacing:.01em;
}

.imb-premium-detail-summary-copy{
  color:#d4d4f0;
  line-height:1.65;
  max-width:78ch;
}

.imb-premium-detail-summary-copy #work-detail-description,
.imb-premium-detail-summary-copy p{
  margin:0;
}

.imb-premium-detail-metadata{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-top:2px;
}

.imb-premium-detail-row{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.075);
}

.imb-premium-detail-row span{
  color:#9a9ab8;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.imb-premium-detail-row strong{
  color:#f5f5ff;
  font-size:.9rem;
  font-weight:650;
}

.imb-watch-card .card-thumb,
.has-video-media .card-thumb{
  display:none !important;
}

.imb-watch-card-player{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
  background:#050509;
  border:1px solid rgba(255,255,255,0.08);
  position:relative;
}

.imb-watch-card-player video,
.imb-watch-card-player iframe{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
  background:#000;
}

.imb-watch-card-poster{
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.imb-watch-card-poster::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.48));
}

.imb-watch-play-badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  color:#050509;
  background:#ff6b6b;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 10px 28px rgba(0,0,0,.36);
}

#view-work-detail audio::-webkit-media-controls-download-button,
#view-work-detail video::-webkit-media-controls-download-button{
  display:none !important;
}

@media (max-width: 760px){
  .imb-premium-polished .imb-premium-tab-row{
    border-radius:18px;
    overflow-x:auto;
    justify-content:flex-start;
  }
  .imb-premium-polished .imb-premium-tab-row button{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .imb-premium-polished-video .imb-premium-player-stage,
  .imb-premium-polished-visual .imb-premium-player-stage,
  .imb-premium-polished-audio .imb-premium-player-stage{
    min-height:auto;
  }
}

/* =====================================================
   IMB MEDIA EXPERIENCE KIT v2 — Reader High-Impact Upgrades
   Adds page fade, zoom controls, fullscreen reader, and desktop double-page polish.
   Baseline: Media Type Premium Polish Kit v1 / Reader Stabilization v1.2
===================================================== */
#imb-premium-player-stage .imb-reader-toolbar-v2,
#work-detail-media .imb-reader-toolbar-v2{
  grid-template-columns: auto minmax(160px, 1fr) auto !important;
}

#imb-premium-player-stage .imb-reader-toolbar-group,
#work-detail-media .imb-reader-toolbar-group{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

#imb-premium-player-stage [data-pdf-zoom-out],
#imb-premium-player-stage [data-pdf-zoom-in],
#work-detail-media [data-pdf-zoom-out],
#work-detail-media [data-pdf-zoom-in]{
  min-width: 42px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage .imb-pdf-flipbook-spread,
#work-detail-media .imb-pdf-flipbook-stage .imb-pdf-flipbook-spread{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage.is-page-fading .imb-pdf-flipbook-spread,
#work-detail-media .imb-pdf-flipbook-stage.is-page-fading .imb-pdf-flipbook-spread{
  opacity: .72;
  transform: translateY(4px) scale(.995);
  filter: saturate(.96) brightness(.98);
}

#imb-premium-player-stage .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-flipbook-spread,
#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-flipbook-spread{
  gap: 18px !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas:first-child,
#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas:first-child{
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
  box-shadow: -12px 20px 44px rgba(0,0,0,.34), inset -10px 0 18px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.12) !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas.is-secondary,
#work-detail-media .imb-pdf-flipbook-stage.is-two-page-spread .imb-pdf-page-canvas.is-secondary{
  border-top-left-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
  box-shadow: 12px 20px 44px rgba(0,0,0,.34), inset 10px 0 18px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.12) !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-shell:fullscreen,
#work-detail-media .imb-pdf-flipbook-shell:fullscreen{
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
  background: #050509 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#imb-premium-player-stage .imb-pdf-flipbook-shell:fullscreen .imb-pdf-flipbook-stage,
#work-detail-media .imb-pdf-flipbook-shell:fullscreen .imb-pdf-flipbook-stage{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 24px !important;
}

@media (max-width: 980px){
  #imb-premium-player-stage .imb-reader-toolbar-v2,
  #work-detail-media .imb-reader-toolbar-v2{
    grid-template-columns: 1fr !important;
  }
  #imb-premium-player-stage .imb-reader-toolbar-group,
  #work-detail-media .imb-reader-toolbar-group{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  #imb-premium-player-stage .imb-reader-toolbar-group:last-child,
  #work-detail-media .imb-reader-toolbar-group:last-child{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  #imb-premium-player-stage .imb-reader-toolbar-group:last-child,
  #work-detail-media .imb-reader-toolbar-group:last-child{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}



/* =========================================================
   IMB MEDIA EXPERIENCE V2.1 — Tracklist/Episode List Outside Pills
========================================================= */
#imb-visible-playable-list,
.imb-visible-playable-list{
  width: 100%;
  margin: 18px 0 20px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at top left, rgba(255,107,107,0.10), transparent 34%),
    rgba(255,255,255,0.035);
  box-shadow: 0 18px 54px rgba(0,0,0,0.24);
}

.imb-visible-playable-list-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}

.imb-visible-playable-list-title{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height:1.1;
}

.imb-visible-playable-list-sub{
  margin:0;
  max-width: 520px;
  text-align:right;
}

.imb-visible-playable-list-body{
  display:block;
  width:100%;
}

.imb-playable-list-primary,
#imb-visible-playable-list .imb-premium-tracklist,
#imb-visible-playable-list .imb-tracklist,
#imb-visible-playable-list .tracklist,
#imb-visible-playable-list .episode-list,
#imb-visible-playable-list .imb-episode-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}

#imb-visible-playable-list .imb-track-row,
#imb-visible-playable-list .track-row,
#imb-visible-playable-list .episode-row,
#imb-visible-playable-list [data-track-index],
#imb-visible-playable-list [data-episode-index]{
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.18);
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

#imb-visible-playable-list .imb-track-row:hover,
#imb-visible-playable-list .track-row:hover,
#imb-visible-playable-list .episode-row:hover,
#imb-visible-playable-list [data-track-index]:hover,
#imb-visible-playable-list [data-episode-index]:hover{
  transform: translateY(-1px);
  border-color:rgba(255,107,107,0.42);
  background:rgba(255,255,255,0.055);
}

#imb-visible-playable-list .is-active,
#imb-visible-playable-list .active,
#imb-visible-playable-list [aria-current="true"]{
  border-color:rgba(255,107,107,0.74) !important;
  background:rgba(255,107,107,0.12) !important;
}

.imb-track-num{
  opacity:.7;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  min-width:2.3em;
}

.imb-track-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.imb-track-title{
  font-weight:750;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.imb-track-meta,
.imb-track-credit-preview{
  color:rgba(255,255,255,0.60);
  font-size:.78rem;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.imb-track-duration{
  color:rgba(255,255,255,0.62);
  font-size:.78rem;
  font-weight:650;
  white-space:nowrap;
}

.imb-hidden-playable-list-tab,
.imb-hidden-playable-list-panel{
  display:none !important;
}

@media (max-width: 760px){
  #imb-visible-playable-list,
  .imb-visible-playable-list{
    padding:14px;
    border-radius:18px;
    margin:14px 0 16px;
  }

  .imb-visible-playable-list-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .imb-visible-playable-list-sub{
    text-align:left;
  }

  #imb-visible-playable-list .imb-track-row,
  #imb-visible-playable-list .track-row,
  #imb-visible-playable-list .episode-row,
  #imb-visible-playable-list [data-track-index],
  #imb-visible-playable-list [data-episode-index]{
    grid-template-columns:auto minmax(0,1fr);
  }

  .imb-track-duration{
    display:none;
  }
}




/* =========================================================
   IMB WORK DETAIL NAVIGATION + METADATA KIT v1
========================================================= */

#imb-work-metadata-strip,
.imb-work-metadata-strip{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:10px 0 14px;
  color:rgba(255,255,255,0.78);
}

#imb-work-metadata-strip span,
.imb-work-metadata-strip span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.045);
  font-size:.76rem;
  font-weight:650;
  letter-spacing:.02em;
}

#imb-work-metadata-strip span:first-child,
.imb-work-metadata-strip span:first-child{
  border-color:rgba(255,107,107,0.42);
  background:rgba(255,107,107,0.12);
  color:rgba(255,235,235,0.96);
}

.imb-primary-work-cta{
  box-shadow:0 10px 30px rgba(255,107,107,0.18);
}

.imb-credit-summary-card{
  width:100%;
  margin:18px 0 18px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(0,0,0,0.16);
}

.imb-credit-summary-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.imb-credit-summary-head h2{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:clamp(1rem, 1.8vw, 1.25rem);
}

.imb-credit-summary-head p{
  margin:0;
  text-align:right;
}

.imb-credit-summary-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.imb-credit-summary-row{
  min-width:0;
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.075);
  background:rgba(0,0,0,0.18);
}

.imb-credit-summary-label{
  color:rgba(255,255,255,0.58);
  font-size:.74rem;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.imb-credit-summary-value{
  min-width:0;
  color:rgba(255,255,255,0.90);
  font-size:.86rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}

#imb-prev-next-work-nav,
.imb-prev-next-work-nav{
  margin:24px 0 18px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at top right, rgba(255,107,107,0.10), transparent 34%),
    rgba(255,255,255,0.03);
}

.imb-prev-next-loading{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.62);
  font-size:.86rem;
}

.imb-prev-next-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.imb-prev-next-head h2{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
}

.imb-prev-next-head p{
  margin:0;
  text-align:right;
}

.imb-prev-next-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.imb-nav-work-card{
  min-width:0;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.20);
  cursor:pointer;
  transition:transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.imb-nav-work-card:hover,
.imb-nav-work-card:focus{
  transform:translateY(-1px);
  border-color:rgba(255,107,107,0.48);
  background:rgba(255,255,255,0.055);
  outline:none;
}

.imb-nav-work-thumb{
  width:96px;
  aspect-ratio:16/10;
  border-radius:14px;
  background:#111;
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.imb-nav-work-thumb.is-empty{
  background:linear-gradient(135deg, rgba(255,107,107,0.24), rgba(255,255,255,0.06));
}

.imb-nav-work-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.imb-nav-work-copy strong{
  display:block;
  color:rgba(255,255,255,0.94);
  font-size:.96rem;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.imb-nav-work-copy span{
  color:rgba(255,255,255,0.60);
  font-size:.78rem;
  line-height:1.25;
}

.imb-nav-work-kicker{
  color:rgba(255,107,107,0.92) !important;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.68rem !important;
}

.imb-related-rows-upgraded{
  margin-top:18px;
}

.imb-related-purpose-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}

.imb-related-purpose-row span{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.035);
  color:rgba(255,255,255,0.64);
  font-size:.72rem;
  font-weight:650;
}

@media (max-width: 860px){
  .imb-credit-summary-grid,
  .imb-prev-next-grid{
    grid-template-columns:1fr;
  }

  .imb-credit-summary-head,
  .imb-prev-next-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .imb-credit-summary-head p,
  .imb-prev-next-head p{
    text-align:left;
  }
}

@media (max-width: 620px){
  #imb-work-metadata-strip,
  .imb-work-metadata-strip{
    gap:6px;
  }

  #imb-work-metadata-strip span,
  .imb-work-metadata-strip span{
    min-height:28px;
    padding:5px 8px;
    font-size:.70rem;
  }

  .imb-credit-summary-card,
  #imb-prev-next-work-nav,
  .imb-prev-next-work-nav{
    padding:14px;
    border-radius:18px;
  }

  .imb-credit-summary-row{
    grid-template-columns:1fr;
    gap:5px;
  }

  .imb-nav-work-card{
    grid-template-columns:78px minmax(0,1fr);
    gap:11px;
  }

  .imb-nav-work-thumb{
    width:78px;
  }
}




/* =========================================================
   IMB WORK DETAIL NAVIGATION + METADATA KIT v1.1 — DIRECT PREMIUM SHELL FIXES
========================================================= */
#imb-premium-work-detail-root[data-nav-meta-v11-applied="1"] .imb-work-metadata-strip{
  display:flex !important;
}

#imb-premium-work-detail-root #imb-work-metadata-strip{
  margin-top: 10px;
  margin-bottom: 12px;
}

.imb-nav-meta-primary-cta{
  min-width: 132px;
  font-weight: 800;
}

.imb-nav-meta-live{
  animation: imbNavMetaFadeIn 220ms ease both;
}

@keyframes imbNavMetaFadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}




/* =========================================================
   IMB MEDIA EXPERIENCE v2.2 — Tracklist Orphan Panel Fix
========================================================= */
#imb-visible-playable-list{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

#imb-visible-playable-list[hidden],
#imb-visible-playable-list.hidden{
  display:block !important;
}

#imb-visible-playable-list .imb-visible-playable-list-body > *{
  display:flex;
}

.imb-tracklist-orphan-resolved,
.imb-hidden-playable-list-panel{
  display:none !important;
  visibility:hidden !important;
}

.imb-tracklist-tab-resolved,
.imb-hidden-playable-list-tab{
  display:none !important;
  visibility:hidden !important;
}

/* Keep the migrated list visually separated from explanation tabs */
#imb-visible-playable-list + .imb-premium-tabs-card,
#imb-visible-playable-list + .work-detail-tabs{
  margin-top:18px;
}

/* Prevent empty old panel shells from reserving height */
.imb-premium-tab-panel.imb-tracklist-orphan-resolved,
.tab-panel.imb-tracklist-orphan-resolved,
[role="tabpanel"].imb-tracklist-orphan-resolved{
  min-height:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}




/* =========================================================
   IMB MEDIA EXPERIENCE v2.3 — Source-Level Tracklist Outside Tabs
========================================================= */
#imb-premium-work-detail-root #imb-visible-playable-list{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  margin:18px 0 20px;
}

#imb-premium-work-detail-root .imb-premium-tabs-card [data-premium-tab="list"],
#imb-premium-work-detail-root .imb-premium-tabs-card [data-premium-panel="list"],
#imb-premium-work-detail-root .imb-hidden-playable-list-tab,
#imb-premium-work-detail-root .imb-hidden-playable-list-panel{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#imb-premium-work-detail-root .imb-visible-playable-list-body #imb-premium-item-list{
  display:flex !important;
  flex-direction:column;
  gap:8px;
}

#imb-premium-work-detail-root .imb-premium-tabs-card{
  margin-top:18px;
}



/* =========================================================
   IMB WORK DETAIL DISCOVERY LINKAGE KIT v1
   - Clickable creator/contributor names
   - Clickable credited-work count lines
   - Clickable metadata pills
   - Metadata-driven More Like This microcopy/cards
========================================================= */
.imb-creator-credit-card,
.imb-credit-summary-card,
.imb-work-activity-card{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
}

.imb-creator-credit-kicker,
.imb-credit-role,
.imb-work-activity-label{
  display:block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255,255,255,.52);
  margin-bottom: 5px;
}

.imb-creator-credit-name,
.imb-credit-name{
  color:#fff;
  font-weight: 800;
  text-decoration:none;
}

.imb-creator-credit-name:hover,
.imb-credit-name:hover,
.imb-credit-count-link:hover,
.imb-work-meta-pill:hover{
  color:#ff8f8f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.imb-credit-count-link,
.imb-credit-count-fallback{
  display:inline-flex;
  margin-top: 5px;
  color:#ff9b9b;
  font-size: .78rem;
  text-decoration:none;
}

.imb-work-metadata-strip,
#imb-work-metadata-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 12px;
}

.imb-work-meta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.035);
  color:#dedeff;
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}

.imb-work-meta-pill[data-filter-key="collection"]{
  border-color: rgba(255,107,107,.62);
  color:#ffb0b0;
}

.imb-work-activity-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.imb-work-activity-metrics{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.86);
  font-size:.84rem;
}

.imb-work-activity-metrics span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.imb-credit-summary-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.imb-credit-summary-item{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}

.contrib-card .imb-credit-count-link,
.contrib-row .imb-credit-count-link{
  display:flex;
  width:max-content;
  max-width:100%;
}

.imb-related-intent-copy{
  margin: -4px 0 12px;
  color: rgba(255,255,255,.58);
  font-size:.84rem;
  line-height:1.45;
}

#work-detail-related[data-related-mode="metadata"]{
  min-height: 80px;
}

@media (max-width:640px){
  .imb-work-activity-card{
    display:block;
  }
  .imb-work-activity-metrics{
    margin-top:8px;
  }
  .imb-work-meta-pill{
    min-height:28px;
    padding:5px 8px;
    font-size:.68rem;
  }
}


/* =====================================================
   IMB Work Detail Discovery Linkage Kit v1.1
   Clean hero/byline/metadata/credits pass
===================================================== */
#imb-premium-work-detail-root .imb-premium-kicker,
#imb-premium-work-detail-root .imb-premium-chips,
#imb-premium-work-detail-root .imb-creator-credit-card,
#imb-premium-work-detail-root [data-imb-creator-credit="1"] {
  display: none !important;
}

#imb-premium-work-detail-root .imb-clean-byline {
  margin: 8px 0 10px !important;
  color: rgba(245,245,255,0.72) !important;
  font-size: 0.95rem !important;
}

#imb-premium-work-detail-root .imb-byline-creator-link,
#imb-premium-work-detail-root .imb-credit-summary-name,
#imb-premium-work-detail-root .imb-credit-name,
#imb-premium-work-detail-root .contrib-name,
#imb-premium-work-detail-root .contrib-row-name {
  color: #f5f5ff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#imb-premium-work-detail-root .imb-byline-creator-link:hover,
#imb-premium-work-detail-root .imb-credit-summary-name:hover,
#imb-premium-work-detail-root .imb-credit-name:hover,
#imb-premium-work-detail-root .contrib-name:hover,
#imb-premium-work-detail-root .contrib-row-name:hover {
  color: #ff8a8a !important;
  text-decoration: underline !important;
}

#imb-premium-work-detail-root .imb-work-metadata-strip-clean {
  margin: 12px 0 18px !important;
}

#imb-premium-work-detail-root .imb-work-meta-pill,
#view-work-detail .imb-work-meta-pill {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.055);
  color: #f5f5ff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

#imb-premium-work-detail-root .imb-work-meta-pill:hover,
#view-work-detail .imb-work-meta-pill:hover {
  border-color: rgba(255,107,107,0.76);
  background: rgba(255,107,107,0.12);
  transform: translateY(-1px);
}

#imb-premium-work-detail-root .imb-credit-summary-clickable .imb-credit-summary-row {
  align-items: flex-start;
  gap: 6px;
}

#imb-premium-work-detail-root .imb-credit-summary-clickable .imb-credit-count-link {
  display: block;
  margin-top: 4px;
  color: #ff8a8a;
  font-size: 0.78rem;
  text-decoration: none;
}

#imb-premium-work-detail-root .imb-credit-summary-clickable .imb-credit-count-link:hover {
  text-decoration: underline;
}


/* =========================================================
   IMB WORK DETAIL DISCOVERY LINKAGE KIT v1.2 — CSS
========================================================= */
#imb-premium-work-detail-root .imb-premium-kicker{
  display:none !important;
}

/* Slightly smaller premium title so long titles do not overpower the hero. */
.imb-premium-title-slot #work-detail-title{
  font-size: clamp(1.95rem, 3.9vw, 3.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  max-width: 880px !important;
}

@media (max-width: 640px){
  .imb-premium-title-slot #work-detail-title{
    font-size: 2rem !important;
    line-height: 1.04 !important;
  }
}

#imb-premium-primary-play:empty,
#imb-premium-primary-play[hidden]{
  display:none !important;
}

.imb-credit-summary-expanded-v12 .imb-credit-summary-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.imb-credit-summary-expanded-v12 .imb-credit-summary-name{
  color: rgba(255,255,255,0.96);
  text-decoration: none;
  font-weight: 800;
}

.imb-credit-summary-expanded-v12 .imb-credit-summary-name:hover,
.imb-credit-count-link:hover{
  color: var(--imb-accent, #ff6b6b);
  text-decoration: underline;
}

.imb-premium-item-expanded{
  margin: -2px 0 10px 42px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  color: rgba(245,245,255,0.88);
}

.imb-track-expanded-title{
  font-weight: 850;
  color: #fff;
  margin-bottom: 4px;
}

.imb-track-expanded-meta{
  margin-bottom: 8px;
}

.imb-track-expanded-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.imb-track-expanded-row{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.06);
}

.imb-track-expanded-row span{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.54);
}

.imb-track-expanded-row strong{
  font-size:.86rem;
  color:rgba(255,255,255,.9);
}

.imb-track-expanded-notes{
  margin-top:10px;
  color:rgba(255,255,255,.82);
}

.imb-track-expanded-notes summary{
  cursor:pointer;
  color:var(--imb-accent, #ff6b6b);
  font-weight:750;
}

.imb-related-purpose-row button{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.035);
  color:rgba(255,255,255,0.68);
  font: inherit;
  font-size:.76rem;
  font-weight:750;
  cursor:pointer;
}

.imb-related-purpose-row button:hover,
.imb-related-purpose-row button.is-active{
  border-color: rgba(255,107,107,0.70);
  background: rgba(255,107,107,0.12);
  color: rgba(255,225,225,0.96);
}

.imb-premium-related-bottom[data-more-explore-mode="creator"] .imb-nav-work-card:not([data-more-creator="1"]),
.imb-premium-related-bottom[data-more-explore-mode="format"] .imb-nav-work-card:not([data-more-format="1"]),
.imb-premium-related-bottom[data-more-explore-mode="recent"] .imb-nav-work-card:not([data-more-recent="1"]){
  /* Do not hard-hide until card tagging is added by the related loader. */
}

/* =========================================================
   IMB Work Detail Discovery Linkage Kit v1.3
========================================================= */
#imb-premium-work-detail-root .imb-premium-kicker,
#imb-premium-work-detail-root .imb-nav-work-kicker,
#imb-premium-work-detail-root #imb-premium-primary-play,
#imb-premium-work-detail-root .imb-community-tabs-source-hidden{
  display:none !important;
}

#imb-premium-work-detail-root .imb-premium-tabs-card{
  display:none !important;
}

#imb-premium-work-detail-root .imb-premium-title-slot h1,
#imb-premium-work-detail-root #work-detail-title{
  font-size: clamp(2.15rem, 5vw, 4.65rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.055em !important;
}

.imb-track-dropdown-merged{
  margin: 6px 0 10px 32px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
}

.imb-track-dropdown-title{
  font-weight: 800;
  color: #f7f7ff;
  margin-bottom: 3px;
}

.imb-track-dropdown-meta{
  margin-bottom: 10px;
}

.imb-track-dropdown-section{
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.imb-track-dropdown-section:first-of-type{
  border-top: 0;
  padding-top: 4px;
  margin-top: 6px;
}

.imb-track-dropdown-section h4{
  margin: 0 0 8px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.imb-track-credit-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.imb-track-credit-row{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.16);
}

.imb-track-credit-row span{
  display:block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 3px;
}

.imb-credit-person-link,
.imb-track-credit-row a,
.imb-credit-summary-row a,
.imb-credit-row a{
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
}

.imb-credit-person-link:hover,
.imb-track-credit-row a:hover,
.imb-credit-summary-row a:hover,
.imb-credit-row a:hover{
  color: #ff7d7d !important;
  text-decoration: underline;
}

.imb-work-community-standalone{
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.025);
}

.imb-work-community-standalone .imb-premium-card-head{
  margin-bottom: 12px;
}

.imb-related-purpose-row button[data-more-explore-toggle]{
  cursor:pointer;
}

.imb-related-purpose-row button[data-more-explore-toggle].is-active{
  background: rgba(255,107,107,.17);
  border-color: rgba(255,107,107,.75);
  color: #ffe6e6;
}

@media (max-width: 720px){
  .imb-track-dropdown-merged{
    margin-left: 0;
  }
  #imb-premium-work-detail-root .imb-premium-title-slot h1,
  #imb-premium-work-detail-root #work-detail-title{
    font-size: clamp(2rem, 11vw, 3.25rem) !important;
  }
}

/* =========================================================
   IMB Work Detail Discovery Linkage Kit v1.4
   Purpose: compact hero, remove generic Work label, remove standalone Community,
   repair Community Activity spacing, and harden More to Explore population.
========================================================= */
#view-work-detail .imb-nav-work-kicker,
#view-work-detail .imb-premium-kicker,
#view-work-detail #imb-premium-primary-play,
#view-work-detail .imb-work-generic-kicker,
#view-work-detail [data-imb-generic-work-kicker="1"]{
  display:none !important;
}

/* Kill any leftover standalone community card; activity stays available as compact text. */
#view-work-detail #imb-work-community-standalone,
#view-work-detail .imb-work-community-standalone{
  display:none !important;
}

/* Compact the premium hero so the detail page stops feeling oversized. */
#imb-premium-work-detail-root .imb-premium-hero{
  border-radius: 22px !important;
  margin: 8px 0 18px !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.34) !important;
}

#imb-premium-work-detail-root .imb-premium-hero-inner{
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) !important;
  gap: clamp(18px, 3vw, 28px) !important;
  padding: clamp(18px, 3vw, 30px) !important;
  align-items: center !important;
}

#imb-premium-work-detail-root .imb-premium-art{
  border-radius: 18px !important;
  max-width: 240px !important;
}

#imb-premium-work-detail-root .imb-premium-title-slot h1,
#imb-premium-work-detail-root #work-detail-title{
  font-size: clamp(2rem, 4.35vw, 3.55rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 8px !important;
}

#imb-premium-work-detail-root .imb-premium-meta-slot #work-detail-meta{
  margin-bottom: 9px !important;
}

#imb-premium-work-detail-root .imb-work-metadata-strip,
#imb-premium-work-detail-root .imb-premium-chips{
  margin: 8px 0 12px !important;
  gap: 7px !important;
}

#imb-premium-work-detail-root .imb-premium-logline{
  max-width: 720px !important;
  font-size: .92rem !important;
  line-height: 1.45 !important;
  margin-bottom: 8px !important;
}

#imb-premium-work-detail-root .imb-premium-rating-slot .rating-section{
  margin: 6px 0 6px !important;
}

/* Community Activity inline spacing if any compact activity line remains visible. */
.imb-community-activity-inline,
.imb-work-activity-values,
#imb-work-community-subtitle{
  word-spacing: .18em;
}

.imb-community-activity-inline .imb-activity-sep,
.imb-work-activity-values .imb-activity-sep{
  margin: 0 .45em;
  opacity: .68;
}

/* More to Explore must feel like real toggles. */
#imb-premium-work-detail-root .imb-related-purpose-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin: 0 0 12px !important;
}

#imb-premium-work-detail-root .imb-related-purpose-row button[data-more-explore-toggle]{
  border:1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(245,245,255,.86) !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

#imb-premium-work-detail-root .imb-related-purpose-row button[data-more-explore-toggle].is-active{
  background: rgba(255,107,107,.18) !important;
  border-color: rgba(255,107,107,.72) !important;
  color: #ffe4e4 !important;
}

@media (max-width: 760px){
  #imb-premium-work-detail-root .imb-premium-hero-inner{
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
  #imb-premium-work-detail-root .imb-premium-art{
    max-width: 210px !important;
  }
  #imb-premium-work-detail-root .imb-premium-title-slot h1,
  #imb-premium-work-detail-root #work-detail-title{
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
}


/* IMB Work Detail Discovery Linkage v1.6 — stable More to Explore fallback */
#imb-premium-work-detail-root .imb-more-explore-fallback{
  cursor: default;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#imb-premium-work-detail-root .imb-related-intent-copy{
  margin-top: 8px;
  margin-bottom: 12px;
}


/* =====================================================
   IMB Work Detail Discovery Restore v1.8
   Scope: work detail only. Keeps Save / Share / Report inline with ratings.
===================================================== */
#view-work-detail .work-rating-inline-actions,
#view-work-detail #work-rating-section.work-rating-inline-actions{
  margin-top: 10px !important;
}
#view-work-detail .work-rating-main-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-bottom:6px !important;
}
#view-work-detail .work-rating-left{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
}
#view-work-detail .work-rating-main-row .work-detail-header-actions,
#imb-premium-work-detail-root #work-rating-section .work-detail-header-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  width:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
#view-work-detail .work-rating-main-row .work-detail-header-actions .btn,
#imb-premium-work-detail-root #work-rating-section .work-detail-header-actions .btn{
  min-height:32px !important;
  padding:5px 11px !important;
  font-size:.75rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#view-work-detail .work-rating-main-row .work-detail-header-actions #work-action-report,
#imb-premium-work-detail-root #work-rating-section .work-detail-header-actions #work-action-report{
  background:transparent !important;
  color:#ffb1b1 !important;
  border:1px solid rgba(255,107,107,.55) !important;
}
#view-work-detail .imb-related-purpose-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0 8px;
}
#view-work-detail .imb-related-purpose-row button{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
  color:#d5d5ff;
  border-radius:999px;
  padding:7px 11px;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
}
#view-work-detail .imb-related-purpose-row button.is-active{
  border-color:rgba(255,107,107,.75);
  background:rgba(255,107,107,.12);
  color:#ffe3e3;
}
#view-work-detail #work-detail-related .work-card{
  cursor:pointer;
}
#view-work-detail .imb-more-explore-status{
  grid-column:1/-1;
  margin:0;
}
@media (max-width:640px){
  #view-work-detail .work-rating-main-row{
    align-items:flex-start !important;
  }
  #view-work-detail .work-rating-main-row .work-detail-header-actions,
  #imb-premium-work-detail-root #work-rating-section .work-detail-header-actions{
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
  }
}

/* =====================================================
   IMB More to Explore Discover Card Mirror v2.0
   Scope: Work Detail > More to Explore only.
   Purpose: make related work cards use the same grid/card behavior as Discover rows.
   No routing, hero, media, save/share/report, or selection logic changes.
===================================================== */
#view-work-detail #work-detail-related,
#imb-premium-work-detail-root #work-detail-related,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
  padding:0 !important;
  margin:0 !important;
  scroll-snap-type:none !important;
}

#view-work-detail #work-detail-related > *,
#imb-premium-work-detail-root #work-detail-related > *,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related > *{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
}

#view-work-detail #work-detail-related .card,
#imb-premium-work-detail-root #work-detail-related .card,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .card{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

#view-work-detail #work-detail-related .card-thumb,
#imb-premium-work-detail-root #work-detail-related .card-thumb,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .card-thumb{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  display:block !important;
  border-radius:12px !important;
  background-color:#181828 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
  margin-bottom:8px !important;
}

#view-work-detail #work-detail-related .card-body,
#imb-premium-work-detail-root #work-detail-related .card-body,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .card-body{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

#view-work-detail #work-detail-related .card-title,
#imb-premium-work-detail-root #work-detail-related .card-title,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .card-title{
  font-size:.95rem !important;
  line-height:1.2 !important;
  margin:4px 0 2px !important;
}

#view-work-detail #work-detail-related .muted,
#imb-premium-work-detail-root #work-detail-related .muted,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .muted{
  font-size:.8rem !important;
  line-height:1.35 !important;
}

#view-work-detail #work-detail-related .pill,
#imb-premium-work-detail-root #work-detail-related .pill,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .pill{
  align-self:flex-start !important;
}

#view-work-detail #work-detail-related .imb-more-explore-status,
#imb-premium-work-detail-root #work-detail-related .imb-more-explore-status,
#imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related .imb-more-explore-status{
  grid-column:1 / -1 !important;
  margin:0 !important;
}

@media (max-width:640px){
  #view-work-detail #work-detail-related,
  #imb-premium-work-detail-root #work-detail-related,
  #imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
}

@media (max-width:420px){
  #view-work-detail #work-detail-related,
  #imb-premium-work-detail-root #work-detail-related,
  #imb-premium-work-detail-root #imb-premium-related-slot #work-detail-related{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   IMB Contributor Invite Strategy v1 — UI styles
   Append to public/styles.css
   ========================================================= */
.contrib-card-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contrib-actions,
.contrib-row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.contrib-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.contrib-invite-btn{
  white-space:nowrap;
}
.imb-contributor-invite-modal .modal-content{
  max-width:640px;
}
.imb-contrib-share-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}
.imb-claim-credit-card{
  max-width:760px;
  margin:0 auto;
}
@media (max-width: 720px){
  .contrib-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .contrib-row-actions,
  .contrib-actions{
    width:100%;
  }
  .contrib-invite-btn{
    width:100%;
    justify-content:center;
  }
}


/* =====================================================
   IMB MORE TO EXPLORE POSTER FIX v1
   Work Detail recommendations are passive poster/info cards.
   Even if a legacy renderer accidentally adds video/watch classes,
   suppress player/play overlays inside More to Explore only.
===================================================== */
.imb-more-explore-card.has-video-media .card-thumb::before,
.imb-more-explore-card.has-video-media .card-thumb::after,
.imb-more-explore-card.imb-watch-card .card-thumb::before,
.imb-more-explore-card.imb-watch-card .card-thumb::after,
.imb-more-explore-discover-card.has-video-media .card-thumb::before,
.imb-more-explore-discover-card.has-video-media .card-thumb::after,
.imb-more-explore-discover-card.imb-watch-card .card-thumb::before,
.imb-more-explore-discover-card.imb-watch-card .card-thumb::after {
  content: none !important;
  display: none !important;
}

.imb-more-explore-card .card-thumb,
.imb-more-explore-discover-card .card-thumb {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* =========================================================
   IMB DYNAMIC SHELL CLEANUP v1 — 2026-05-05
   Purpose: prevent unfinished detail shells from looking broken
   without changing routing, Firestore contracts, media, cart, or checkout.
========================================================= */
#view-work-detail .block-header h2:empty,
#view-product-detail .block-header h2:empty,
#view-event-detail .block-title:empty,
#view-work-detail .block-header .muted:empty,
#view-product-detail .block-header .muted:empty,
#view-event-detail .block .muted:empty {
  display: none !important;
}

#view-work-detail button:empty,
#view-product-detail button:empty,
#view-event-detail button:empty {
  display: none !important;
}

#view-work-detail .detail-actions:empty,
#view-work-detail .detail-links:empty,
#view-product-detail .detail-links:empty,
#view-event-detail .detail-actions:empty,
#view-event-detail .detail-links:empty {
  display: none !important;
}

#view-product-detail .product-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#view-product-detail .product-actions .btn,
.mobile-detail-bar .btn {
  white-space: nowrap;
}

#view-work-detail .work-mini-stats .muted,
#view-work-detail .rating-label {
  min-width: max-content;
}

#view-work-detail .work-poster:empty,
#view-product-detail .product-media:empty {
  min-height: 220px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}

/* =========================================================
   IMB VISUAL ARTS DETAIL REWRITE v1
   Protected preview + artist value layout
========================================================= */
#view-work-detail.is-visual-art-detail .work-primary-media-fixed {
  border-top-color: rgba(255, 255, 255, 0.12);
}

#view-work-detail.is-visual-art-detail .work-media,
#view-work-detail.is-visual-art-detail #work-detail-media {
  overflow: visible;
}

.imb-visual-art-detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  user-select: none;
  -webkit-user-select: none;
}

.imb-visual-gallery-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

.imb-visual-preview-card,
.imb-visual-collector-card,
.imb-visual-detail-crops,
.imb-visual-artist-statement {
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(circle at top left, rgba(255,255,255,0.06), rgba(255,255,255,0.025) 58%, rgba(0,0,0,0.14));
  border-radius: 22px;
  padding: 14px;
}

.imb-visual-preview-frame {
  position: relative;
  min-height: 360px;
  max-height: min(78vh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.035) 75%),
    #080812;
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

.imb-visual-preview-img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(76vh, 760px);
  object-fit: contain;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.imb-visual-preview-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), transparent 32%, rgba(0,0,0,0.08)),
    repeating-linear-gradient(-24deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 64px);
}

.imb-visual-watermark {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: none;
  color: rgba(255,255,255,0.78);
  font-size: 0.66rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}

.imb-visual-preview-note {
  margin: 10px 2px 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.82rem;
  line-height: 1.45;
}

.imb-visual-collector-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
}

.imb-visual-kicker {
  width: fit-content;
  border: 1px solid rgba(255,107,107,0.55);
  color: #ffabab;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.imb-visual-collector-card h2 {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.04;
}

.imb-visual-byline {
  margin: -6px 0 0;
  color: rgba(255,255,255,0.72);
}

.imb-visual-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.imb-visual-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.9);
}

.imb-visual-chip span {
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
}

.imb-visual-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.imb-visual-info-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.imb-visual-info-row span {
  color: rgba(255,255,255,0.50);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.imb-visual-info-row strong {
  color: rgba(255,255,255,0.88);
  font-size: 0.82rem;
  line-height: 1.38;
  font-weight: 600;
}

.imb-visual-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.imb-visual-section-head {
  margin-bottom: 12px;
}

.imb-visual-section-head h3 {
  margin: 0 0 4px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.05rem;
}

.imb-visual-section-head p,
.imb-visual-artist-statement p {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.86rem;
  line-height: 1.55;
}

.imb-visual-crop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.imb-visual-crop {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
}

.imb-visual-crop img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

.imb-visual-crop figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.62);
  color: rgba(255,255,255,0.82);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imb-visual-art-empty {
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}

@media (max-width: 900px) {
  .imb-visual-gallery-shell {
    grid-template-columns: 1fr;
  }

  .imb-visual-preview-frame {
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .imb-visual-preview-card,
  .imb-visual-collector-card,
  .imb-visual-detail-crops,
  .imb-visual-artist-statement {
    border-radius: 18px;
    padding: 12px;
  }

  .imb-visual-info-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .imb-visual-cta-row .btn {
    width: 100%;
  }

  .imb-visual-watermark {
    font-size: 0.58rem;
  }
}


/* =========================================================
   IMB RESPONSIVE SCREEN FIT KIT v1 — 2026-05-07
   Purpose: make desktop/laptop layouts use available screen width
   without touching routing, auth, Firestore, checkout, or render logic.
   Scope: global shell width, responsive section spacing, browse rows,
   directory grids, and safe mobile preservation.
========================================================= */
:root{
  --imb-shell-max: 1680px;
  --imb-shell-pad: clamp(18px, 3.4vw, 72px);
  --imb-section-pad: clamp(18px, 2vw, 32px);
  --imb-card-gap: clamp(14px, 1.25vw, 22px);
  --imb-card-min: 230px;
}

@media (min-width: 1680px){
  :root{
    --imb-shell-max: 1760px;
    --imb-shell-pad: clamp(32px, 4vw, 88px);
    --imb-card-min: 250px;
  }
}

/* Core shell: replaces the cramped 1200px desktop feel. */
.main{
  width: 100% !important;
  max-width: var(--imb-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--imb-shell-pad) !important;
  padding-right: var(--imb-shell-pad) !important;
}

.view.active,
.main > .view{
  width: 100% !important;
  min-width: 0 !important;
}

.footer-inner,
.footer-bottom,
.sponsor-bar-inner{
  width: 100% !important;
  max-width: var(--imb-shell-max) !important;
  padding-left: var(--imb-shell-pad) !important;
  padding-right: var(--imb-shell-pad) !important;
}

/* Sections scale up instead of looking like a phone layout centered on desktop. */
.hero,
.home-section,
.block,
.shop-category,
.calendar-header,
.lounge-block{
  padding-left: var(--imb-section-pad) !important;
  padding-right: var(--imb-section-pad) !important;
}

.hero{
  padding-top: clamp(34px, 4vw, 72px) !important;
  padding-bottom: clamp(34px, 4vw, 72px) !important;
}

.hero-copy h1{
  max-width: 1180px !important;
  font-size: clamp(2.15rem, 3.15vw, 4.05rem) !important;
  line-height: 1.04 !important;
}

.subtitle{
  max-width: 900px;
  font-size: clamp(0.96rem, 1vw, 1.12rem);
  line-height: 1.55;
}

.section-header h2,
.block-header h2,
.view-header h1{
  font-size: clamp(1.35rem, 1.55vw, 1.85rem);
  line-height: 1.15;
}

.card-title{
  font-size: clamp(0.98rem, 0.95vw, 1.14rem);
}

/* Home / Discover / Connect preview rows: if there are 4 cards, they now fill the row. */
@media (min-width: 641px){
  #home-featured-works,
  #home-upcoming-events,
  #home-featured-merch,
  #discover-watch-row,
  #discover-listen-row,
  #discover-read-row,
  #discover-visualart-row,
  #connect-creators,
  #connect-members,
  #connect-institutions,
  #connect-groups,
  #connect-events,
  #connect-lounge-feed,
  #search-results-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--imb-card-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: none !important;
  }

  #home-featured-works > *,
  #home-upcoming-events > *,
  #home-featured-merch > *,
  #discover-watch-row > *,
  #discover-listen-row > *,
  #discover-read-row > *,
  #discover-visualart-row > *,
  #connect-creators > *,
  #connect-members > *,
  #connect-institutions > *,
  #connect-groups > *,
  #connect-events > *,
  #connect-lounge-feed > *,
  #search-results-grid > *{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Directory pages can use more than 4 columns on wider desktops. */
@media (min-width: 900px){
  .card-grid,
  #events-directory-grid,
  #watch-directory-grid,
  #listen-directory-grid,
  #read-directory-grid,
  #visualart-directory-grid,
  #products-directory-grid,
  #creators-directory-grid,
  #members-directory-grid,
  #institutions-directory-grid,
  #groups-directory-grid{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--imb-card-min)), 1fr)) !important;
    gap: var(--imb-card-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Detail layouts breathe on desktop instead of sitting narrow in the middle. */
@media (min-width: 1024px){
  .detail-layout,
  .lounge-layout{
    gap: clamp(18px, 2vw, 36px) !important;
  }

  .detail-media{
    min-height: clamp(320px, 34vw, 620px) !important;
  }

  .imb-visual-gallery-shell{
    gap: clamp(16px, 2vw, 34px) !important;
  }
}

/* Preserve the existing mobile hard-lock behavior. */
@media (max-width: 640px){
  :root{
    --imb-shell-pad: 0px;
    --imb-section-pad: 14px;
    --imb-card-gap: 12px;
  }

  .main{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .view.active{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero,
  .home-section,
  .block,
  .shop-category{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-copy h1{
    font-size: clamp(1.95rem, 10vw, 2.55rem) !important;
    line-height: 1.05 !important;
  }
}