/* ================================================================
   phosphorOS — The Nightlife Operating System
   Neon Yellow + Lavender on Deep Navy
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display: 'Quicksand', sans-serif;
  --bg: #12122B;
  --surface: #1A1A38;
  --surface-2: #222248;
  --border: rgba(150, 61, 151, 0.1);
  --border-2: rgba(150, 61, 151, 0.2);
  --white: #F0EEF5;
  --text: #8B8AAF;
  --text-dim: #5E5D80;
  --text-faint: #3A3960;
  --yellow: #F2D264;
  --yellow-dark: #D4B84E;
  --yellow-glow: rgba(242, 210, 100, 0.2);
  --lavender: #963D97;
  --lavender-dark: #7A3280;
  --lavender-glow: rgba(150, 61, 151, 0.15);
  --radius: 16px;
  --radius-sm: 10px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lavender); color: var(--bg); }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--white); }
a.domain-card, a.feature-card, a.module-card { color: inherit; }
a.domain-card:hover, a.feature-card:hover, a.module-card:hover { color: inherit; }
img { max-width: 100%; display: block; }
strong { color: var(--white); font-weight: 600; }

.contain {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(18, 18, 43, 0.8);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 26px;
  width: auto;
}

nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dim);
}
nav a:hover { color: var(--white); }
nav a.active { color: var(--white); }

.nav-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bg) !important;
  -webkit-text-fill-color: var(--bg) !important;
  background: var(--lavender);
  padding: 9px 24px;
  border-radius: 100px;
  transition: all 0.2s;
}
.nav-cta:hover {
  background: var(--lavender-dark);
  color: var(--bg) !important;
  -webkit-text-fill-color: var(--bg) !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text);
}

/* ===== Nav Dropdowns ===== */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-chevron {
  font-size: 0.55rem;
  transition: transform 0.2s;
}
.nav-dropdown:hover .nav-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: var(--surface-2);
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.nav-dropdown-label {
  padding: 8px 16px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== Nav User Dropdown ===== */
.nav-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border-2);
  transition: all 0.2s;
}
.nav-user:hover { border-color: var(--lavender); }
.nav-user-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.nav-user-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}
.nav-user-chevron {
  font-size: 0.55rem;
  color: var(--text-dim);
  transition: transform 0.2s;
}
.nav-user.open .nav-user-chevron { transform: rotate(180deg); }
.nav-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
}
.nav-user.open .nav-user-dropdown { display: block; }
.nav-user-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: all 0.15s;
}
.nav-user-dropdown a:hover {
  background: var(--surface-2);
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.dropdown-role-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 6px 16px 2px;
}
.nav-user-dropdown a.dropdown-role {
  font-size: 0.78rem;
  padding: 7px 16px;
}
.nav-user-dropdown a.dropdown-role-active {
  color: var(--yellow) !important;
  -webkit-text-fill-color: var(--yellow) !important;
}
.nav-user-dropdown a.dropdown-signout {
  color: var(--lavender) !important;
  -webkit-text-fill-color: var(--lavender) !important;
}
.nav-user-dropdown a.dropdown-signout:hover {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  background: rgba(150,61,151,0.15);
}

/* ===== Venue Switcher ===== */
.venue-switcher {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 12px;
}
.venue-switcher-current {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border-2);
  transition: all 0.2s;
  white-space: nowrap;
}
.venue-switcher-current:hover { border-color: var(--lavender); }
.venue-switcher.open .venue-switcher-current { border-color: var(--lavender); }
.venue-switcher-current-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--yellow);
}
.venue-switcher-chevron {
  font-size: 0.55rem;
  color: var(--text-dim);
  transition: transform 0.2s;
}
.venue-switcher.open .venue-switcher-chevron { transform: rotate(180deg); }
.venue-switcher-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
}
.venue-switcher.open .venue-switcher-dropdown { display: block; }
.venue-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.venue-switcher-item:hover { background: var(--surface-2); }
.venue-switcher-item.active { background: rgba(242,210,100,0.04); }
.venue-switcher-item-logo {
  width: 32px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--lavender);
  padding: 2px;
}
.venue-switcher-item-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  background: var(--lavender);
  flex-shrink: 0;
}
.venue-switcher-item-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.venue-switcher-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-switcher-item-role {
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-switcher-item.active .venue-switcher-item-name { color: var(--yellow); }
.venue-switcher-check {
  font-size: 0.75rem;
  color: var(--yellow);
  flex-shrink: 0;
}
.venue-switcher-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  padding: 8px 14px 4px;
}
.venue-switcher-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 0 0 100px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -150px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(242,210,100,0.1) 0%, rgba(150,61,151,0.08) 45%, transparent 70%);
  border-radius: 50%;
  animation: drift 25s ease-in-out infinite;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(150,61,151,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,61,151,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 30%, black 20%, transparent 70%);
  pointer-events: none;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  33% { transform: translate(50px, -30px) scale(1.08); opacity: 1; }
  66% { transform: translate(-30px, 25px) scale(0.95); opacity: 0.7; }
}

.hero .contain { position: relative; }

.hero-banner {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 60px 0;
  text-align: center;
}
.hero-banner .contain {
  position: relative;
  z-index: 1;
}
.hero-banner::before {
  content: '';
  position: absolute;
  top: 30%; left: 25%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242,210,100,0.2) 0%, rgba(242,210,100,0) 70%);
  animation: glow-yellow 6s ease-in-out infinite;
  pointer-events: none;
}
.hero-banner::after {
  content: '';
  position: absolute;
  top: 40%; left: 75%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(150,61,151,0.25) 0%, rgba(150,61,151,0) 70%);
  animation: glow-purple 6s ease-in-out infinite;
  pointer-events: none;
}
.hero-banner-logo {
  height: 320px;
  width: auto;
  margin: 0 auto 48px;
  display: block;
}

.hero-banner--side .contain {
  display: flex;
  align-items: center;
  gap: 0;
}
.hero-banner--side .hero-banner-logo {
  height: 240px;
  width: auto;
  margin: auto;
  flex-shrink: 0;
  display: block;
}
.hero-banner--side .hero-content {
  text-align: left;
}
.hero-banner--side .hero-sub {
  margin-left: 0;
}
.hero-content .label,
.hero-banner .label {
  font-size: 1.25rem;
  font-family: var(--display);
}

@keyframes glow-yellow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-45%, -55%) scale(1.2); opacity: 1; }
}
@keyframes glow-purple {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-55%, -45%) scale(1.15); opacity: 1; }
}
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(150,61,151,0.3), 0 0 60px rgba(150,61,151,0.1); }
  50% { box-shadow: 0 0 30px rgba(242,210,100,0.3), 0 0 60px rgba(242,210,100,0.1); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.hero-badge .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F2D264;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 4px #F2D264, 0 0 12px rgba(242,210,100,0.6), 0 0 20px rgba(242,210,100,0.3); }
  50% { box-shadow: 0 0 2px #F2D264, 0 0 4px rgba(242,210,100,0.2); }
}

.hero-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero h1,
.hero-banner h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.gradient-text {
  background: linear-gradient(135deg, var(--yellow), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-reverse {
  background: linear-gradient(135deg, var(--lavender), var(--yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto 40px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-metrics {
  display: inline-flex;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(26, 26, 56, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 72px auto 0;
  position: relative;
  z-index: 1;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 40px var(--lavender-glow);
}
.metric {
  padding: 20px 28px;
  text-align: center;
}
.metric + .metric {
  border-left: 1px solid var(--border);
}
.metric-value {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 4px;
}
.metric-label {
  font-size: 0.72rem;
  color: var(--lavender);
  letter-spacing: 0.02em;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 100px;
  transition: all 0.25s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn-primary {
  color: var(--bg);
  background: var(--yellow);
  box-shadow: 0 0 24px var(--yellow-glow);
}
.btn-primary:hover {
  background: var(--yellow-dark);
  box-shadow: 0 0 36px rgba(242, 210, 100, 0.35);
  color: var(--bg);
  transform: translateY(-1px);
}
.btn-ghost {
  color: var(--lavender);
  background: transparent;
  border: 1px solid var(--lavender);
  box-shadow: 0 0 20px var(--lavender-glow);
}
.btn-ghost:hover {
  background: rgba(150, 61, 151, 0.1);
  border-color: var(--lavender);
  color: var(--white);
  box-shadow: 0 0 30px rgba(150, 61, 151, 0.25);
}
.btn-lavender {
  color: var(--bg);
  background: var(--lavender);
  font-weight: 700;
  box-shadow: 0 0 24px var(--lavender-glow);
}
.btn-lavender:hover {
  background: var(--lavender-dark);
  color: var(--bg);
  box-shadow: 0 0 36px rgba(150, 61, 151, 0.3);
  transform: translateY(-1px);
}
.btn-block { width: 100%; text-align: center; }

/* ===== Sections ===== */
.section {
  padding: 100px 0;
  border-top: 1px solid var(--border);
}
.label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lavender);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--yellow);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.section-title a { color: var(--yellow); border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; }
.section-title a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
.module-explore {
  display: inline-block;
  margin-top: 28px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}
.module-explore:hover { background: var(--yellow); color: var(--bg); }
.section-desc {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
  max-width: 520px;
}

/* ===== Comparison (Before / After) ===== */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.comparison-col {
  border-radius: var(--radius);
  padding: 36px 32px;
}
.comparison-col.before {
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 40px rgba(150, 61, 151, 0.08);
}
.comparison-col.after {
  background: rgba(150, 61, 151, 0.05);
  border: 1px solid rgba(150, 61, 151, 0.12);
  box-shadow: 0 0 40px var(--lavender-glow);
}
.comparison-col h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.comparison-col.before h3 { color: var(--text-dim); }
.comparison-col.after h3 { color: var(--lavender); }
.comparison-col ul { list-style: none; }
.comparison-col li {
  font-size: 0.9rem;
  padding: 10px 0 10px 24px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.comparison-col.before li { color: var(--text-dim); }
.comparison-col.after li { color: var(--text); }
.comparison-col.before li::before {
  content: '\00d7';
  position: absolute;
  left: 0;
  color: rgba(239, 68, 68, 0.4);
  font-weight: 700;
}
.comparison-col.after li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--yellow);
  font-weight: 600;
}

/* ===== Domain Cards ===== */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.domain-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: all 0.3s;
  box-shadow: 0 0 40px var(--lavender-glow);
}
.domain-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  animation: card-glow 3s ease-in-out infinite;
}
.domain-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(242, 210, 100, 0.1);
  color: var(--yellow);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.domain-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.domain-list {
  list-style: none;
}
.domain-list li {
  font-size: 0.88rem;
  color: var(--text);
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

/* ===== Feature Grid ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.feature-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: all 0.3s;
  box-shadow: 0 0 40px var(--lavender-glow);
}
.feature-card:hover {
  border-color: var(--border-2);
  animation: card-glow 3s ease-in-out infinite;
}
.feature-name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.feature-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ===== Quote ===== */
.quote {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.quote-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.quote-inner::before {
  content: '\201C';
  font-family: var(--display);
  font-size: 6rem;
  line-height: 1;
  position: relative;
  display: block;
  background: linear-gradient(135deg, var(--yellow), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.3;
}
.quote-text {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.quote-text em {
  font-style: italic;
  color: var(--yellow);
}

/* ===== Roles (Who It's For) ===== */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 0 40px var(--lavender-glow);
  transition: all 0.3s;
}
.role-card:hover { border-color: var(--border-2); animation: card-glow 3s ease-in-out infinite; }
.role-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 14px;
}
.role-name {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.role-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ===== Markets ===== */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.market-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: all 0.3s;
  box-shadow: 0 0 40px var(--lavender-glow);
}
.market-card:hover { border-color: var(--border-2); animation: card-glow 3s ease-in-out infinite; }
.market-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.market-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ===== CTA ===== */
.cta {
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(242,210,100,0.06) 0%, rgba(150,61,151,0.05) 40%, transparent 70%);
  pointer-events: none;
}
.cta .section-title {
  max-width: 600px;
  margin: 0 auto 16px;
}
.cta .section-desc {
  max-width: 460px;
  margin: 0 auto 40px;
  text-align: center;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-heading {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.footer-text {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.65;
}
.footer-app-store {
  display: inline-block;
  margin-top: 16px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.footer-app-store:hover { opacity: 1; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
  font-size: 0.88rem;
  color: var(--text-dim);
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.footer-bottom a { color: var(--text-faint); }
.footer-bottom a:hover { color: var(--white); }

/* ===== Page Header ===== */
.page-header {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.page-header .page-desc {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
  max-width: 560px;
}
.page-header.centered { text-align: center; }
.page-header.centered .page-desc {
  margin-left: auto;
  margin-right: auto;
}

/* ===== Module Sections (Platform) ===== */
.module-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.module-head {
  margin-bottom: 32px;
}
.module-head h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.module-head p {
  font-size: 0.95rem;
  color: var(--text-dim);
  max-width: 520px;
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: all 0.3s;
  box-shadow: 0 0 40px var(--lavender-glow);
}
.module-card:hover { border-color: var(--border-2); animation: card-glow 3s ease-in-out infinite; }
.module-card-name {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.module-card-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 0 40px;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 0 40px var(--lavender-glow);
  position: relative;
  transition: all 0.3s;
}
.price-card:hover { border-color: var(--border-2); animation: card-glow 3s ease-in-out infinite; }
.price-card.featured {
  border-color: var(--yellow);
  box-shadow: 0 0 40px var(--yellow-glow);
}
.price-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(242, 210, 100, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
}
.price-name {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.price-target {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.price-amount {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.price-period {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: 32px;
}
.price-features {
  list-style: none;
  text-align: left;
  margin-bottom: 32px;
}
.price-features li {
  font-size: 0.88rem;
  color: var(--text);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

/* ===== Contact ===== */
.contact-section {
  padding: 80px 0;
}
.contact-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.contact-card h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
}
.contact-card p {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.7;
}

/* ===== Demo Form ===== */
.demo-form { text-align: left; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field {
  margin-bottom: 16px;
}
.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--body);
  font-size: 0.9rem;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B8AAF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.form-field textarea {
  resize: vertical;
  min-height: 80px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

/* ===== About ===== */
.about-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.about-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 72px;
}
.about-body p {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 1.4em;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 0 40px var(--lavender-glow);
}
.value-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 10px;
}
.value-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ===== Legal ===== */
.legal {
  max-width: 680px;
  padding: 72px 0 88px;
}
.legal h1 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.legal-date {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-bottom: 40px;
}
.legal h2 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin: 40px 0 12px;
}
.legal p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* ===== Dashboard Nav ===== */
.dash-header-nav nav { gap: 16px; flex: 1; min-width: 0; margin-left: 20px; }

.dash-ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  border-radius: 100px;
  background: rgba(242, 210, 100, 0.03);
  border: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}
.dash-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  padding: 0 24px;
  animation: ticker-scroll 30s linear infinite;
}
.dash-ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ticker-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ticker-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--yellow);
  font-family: var(--display);
}
.ticker-sep {
  color: var(--text-faint);
  font-size: 0.65rem;
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Dashboard ===== */
.dash-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 64px;
}
/* Website Builder page: full-width with a small margin (matches russwhite's
   builder inset), instead of the default 1200px-centered, 40px-padded content. */
.dash-content-builder { max-width: none; padding: 18px 22px 24px; }
.dash-content-builder .dash-header { margin-bottom: 12px; }
.dash-header {
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.dash-header .label { display: none; }
.dash-header-action {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 16px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: 4px;
}
.dash-header-action:hover {
  color: var(--white);
  border-color: var(--lavender);
}
.dash-header h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.dash-header-logo {
  max-width: 200px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.loading {
  text-align: center;
  padding: 64px 0;
}
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border-2);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 12px;
}
.loading p { font-size: 0.88rem; color: var(--text-faint); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Account Page ===== */
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.account-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.account-info-row:last-child { border-bottom: none; }
.account-info-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  flex-shrink: 0;
}
.account-info-value {
  font-size: 0.85rem;
  color: var(--white);
  text-align: right;
}
.account-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--lavender);
  background: rgba(150, 61, 151, 0.12);
  padding: 3px 10px;
  border-radius: 100px;
  margin: 2px 4px 2px 0;
}
.account-badge-active {
  color: var(--yellow);
  background: rgba(242, 210, 100, 0.1);
}

/* -- Account: Panel Header (title + action) -- */
.account-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.account-panel-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}
.btn-sm {
  font-size: 0.78rem;
  padding: 7px 16px;
  border-radius: 100px;
}

/* -- Account: Social Cards -- */
.account-social-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.account-social-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.account-social-card:last-child { border-bottom: none; }
.account-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.account-social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.account-social-info {
  flex: 1;
  min-width: 0;
}
.account-social-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}
.account-social-handle {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-social-card.connected .account-social-handle { color: var(--text); }
.account-social-action { flex-shrink: 0; }

/* -- Account: Email Rows -- */
.account-email-list {
  display: flex;
  flex-direction: column;
}
.account-email-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.account-email-row:last-child { border-bottom: none; }
.account-email-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.account-email-info {
  flex: 1;
  min-width: 0;
}
.account-email-address {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.account-email-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.account-email-provider {
  text-transform: capitalize;
}
.account-email-status {
  display: flex;
  align-items: center;
  gap: 4px;
}
.account-email-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.account-email-default {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--yellow);
  background: rgba(242, 210, 100, 0.1);
  padding: 2px 8px;
  border-radius: 100px;
}
.account-email-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.account-email-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  border-radius: 6px;
  transition: all 0.15s;
}
.account-email-actions button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}
.account-email-actions button.danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.account-email-empty {
  text-align: center;
  padding: 24px 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* -- Account: Modal -- */
.account-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: accountModalFadeIn 0.15s ease;
}
@keyframes accountModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.account-modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: accountModalSlideUp 0.2s ease;
}
@keyframes accountModalSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.account-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.account-modal-title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.account-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.15s;
}
.account-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
}
.account-provider-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.account-provider-option:hover {
  border-color: var(--border-2);
  background: rgba(255, 255, 255, 0.03);
}
.account-provider-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.account-provider-option-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}
.account-provider-option-arrow {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* -- Account: IMAP / Password Form -- */
.account-form-group {
  margin-bottom: 14px;
}
.account-form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.account-form-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 0.88rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
}
.account-form-input:focus {
  border-color: var(--lavender);
}
.account-form-input::placeholder {
  color: var(--text-dim);
}
.account-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.account-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ===== Domain Dashboard ===== */
.dash-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  font-size: 0.82rem;
  position: relative;
  z-index: 1;
}
.dash-breadcrumb a {
  color: var(--lavender);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.dash-breadcrumb a:hover {
  color: var(--yellow);
  text-decoration: underline;
}
.dash-breadcrumb .bc-sep {
  color: var(--text-faint);
  font-size: 0.7rem;
}
.dash-breadcrumb .bc-current {
  color: var(--white);
  font-weight: 600;
}
.dash-breadcrumb .bc-venue { cursor: default; }

.domain-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.domain-dash-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.domain-dash-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(150,61,151,0.15);
}

/* Data-status outline:
   .ddc-real     gold outline — card surfaces real venue/operational data
   .ddc-mock     lavender outline — card is structural/seeded/placeholder */
.domain-dash-card.ddc-real {
  border-color: var(--yellow);
  box-shadow: inset 0 0 0 1px var(--yellow);
}
.domain-dash-card.ddc-real:hover {
  box-shadow: inset 0 0 0 1px var(--yellow), 0 8px 32px rgba(242,210,100,0.18);
}
.domain-dash-card.ddc-mock {
  border-color: var(--lavender);
  box-shadow: inset 0 0 0 1px rgba(196,160,224,0.6);
}
.domain-dash-card.ddc-mock:hover {
  box-shadow: inset 0 0 0 1px var(--lavender), 0 8px 32px rgba(196,160,224,0.18);
}
.domain-dash-card .ddc-name {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.domain-dash-card .ddc-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ── Favorite star on domain cards ─────────────────────────────────────── */
.domain-dash-card .ddc-fav {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  color: var(--text-faint); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, color 0.15s, transform 0.1s, background 0.15s;
}
.domain-dash-card:hover .ddc-fav,
.domain-dash-card .ddc-fav.ddc-fav-on {
  opacity: 1;
}
.domain-dash-card .ddc-fav:hover { background: rgba(0,0,0,0.25); color: var(--yellow); transform: scale(1.08); }
.domain-dash-card .ddc-fav.ddc-fav-on { color: var(--yellow); }
.domain-dash-card .ddc-fav.ddc-fav-on:hover { color: var(--lavender); }

/* ── Dashboard favorites section (home) ────────────────────────────────── */
.dash-fav-section { margin-bottom: 28px; }
.dash-fav-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
}
.dash-fav-title {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--white); text-transform: uppercase; letter-spacing: 0.04em;
}
.dash-fav-sub { font-size: 0.78rem; color: var(--text-faint); }
.dash-fav-grid .domain-dash-card { cursor: grab; }
.dash-fav-grid .domain-dash-card:active { cursor: grabbing; }
.dash-fav-grid .ddc-grip {
  position: absolute; bottom: 8px; right: 10px;
  font-size: 0.85rem; color: var(--text-faint);
  letter-spacing: -2px; user-select: none; pointer-events: none;
}
.dash-fav-grid .ddc-dragging { opacity: 0.45; }
.dash-fav-grid .ddc-drop-before { box-shadow: inset 3px 0 0 var(--yellow); }
.dash-fav-grid .ddc-drop-after  { box-shadow: inset -3px 0 0 var(--yellow); }

.dash-fav-empty {
  padding: 16px 20px;
  background: var(--surface); border: 1px dashed var(--border-2);
  border-radius: var(--radius);
}
.dash-fav-empty .dash-fav-head { margin-bottom: 6px; }
.dash-fav-empty-hint {
  font-size: 0.82rem; color: var(--text-dim);
}

.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dash-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  text-align: center;
}
.dash-stat-value {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
}
.dash-stat-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 6px;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.dash-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-2);
}
.dash-table td {
  padding: 10px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.dash-table tr:hover td {
  background: rgba(150,61,151,0.04);
}
.dash-table .cell-white { color: var(--white); font-weight: 500; }

/* Staff directory name cell: small headshot thumbnail before the name. */
.staff-name-cell {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.staff-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; display: inline-block; flex-shrink: 0;
  background: var(--bg-input, #1a1a2e);
}
.staff-thumb-empty {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim, rgba(255,255,255,0.6));
  background: var(--bg-input, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
}
.dash-table .staff-row { cursor: pointer; }

/* Staff Directory detail modal */
.staff-detail-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.staff-detail-modal {
  background: var(--panel-bg, #15152a); border: 1px solid var(--border, #2a2a3e);
  border-radius: 12px; width: min(96vw, 720px); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.staff-detail-header {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--border, #2a2a3e);
}
.staff-detail-photo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--bg-input, #1a1a2e);
}
.staff-detail-photo-empty {
  font-size: 1.2rem; font-weight: 600; color: var(--text-dim, rgba(255,255,255,0.6));
  border: 1px solid var(--border, #2a2a3e);
}
.staff-detail-name { flex: 1; min-width: 0; }
.staff-detail-name h2 { margin: 0 0 4px; font-size: 1.25rem; }
.staff-detail-role { color: var(--text-dim, rgba(255,255,255,0.6)); font-size: 0.85rem; }
.staff-detail-venues { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.staff-detail-x {
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  font-size: 1.8rem; line-height: 1; padding: 0 6px;
}
.staff-detail-body {
  padding: 18px 22px; overflow-y: auto; max-height: 60vh;
}
.staff-detail-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.staff-detail-row:last-child { border-bottom: 0; }
.staff-detail-row label {
  color: var(--text-dim, rgba(255,255,255,0.6)); font-size: 0.85rem;
}
.staff-detail-value { color: var(--text); font-size: 0.9rem; min-width: 0; }
.staff-detail-input {
  width: 100%; padding: 6px 8px; font-size: 0.88rem;
  background: var(--bg-input, #1a1a2e); border: 1px solid var(--border, #2a2a3e);
  border-radius: 4px; color: var(--text);
}
.staff-detail-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border, #2a2a3e);
}
.staff-detail-status { margin-right: auto; font-size: 0.82rem; color: var(--text-dim, rgba(255,255,255,0.6)); }
.dash-table .cell-yellow { color: var(--yellow); font-weight: 600; }
.dash-table .cell-dim { color: var(--text-dim); }

.pb-role-tab {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.pb-role-tab:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot.active { background: #34D399; }
.status-dot.warning { background: #FBBF24; }
.status-dot.danger { background: #F87171; }
.status-dot.neutral { background: var(--text-dim); }

/* ===== App Showcase ===== */
.app-showcase {
  padding: 40px 0 80px;
  overflow: hidden;
}
.app-showcase-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
}
.app-showcase-ipad {
  flex: 0 0 auto;
  max-width: 520px;
  filter: drop-shadow(0 24px 80px rgba(0, 0, 0, 0.5));
}
.app-showcase-ipad img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.app-showcase-iphone {
  flex: 0 0 auto;
  max-width: 200px;
  margin-top: 60px;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}
.app-showcase-iphone img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.app-showcase-caption {
  text-align: center;
  margin-top: 32px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .contain { padding: 0 24px; }
  .header-inner { padding: 0 24px; }
  .app-showcase { padding: 24px 0 48px; }
  .app-showcase-inner { gap: 20px; }
  .app-showcase-ipad { max-width: 340px; }
  .app-showcase-iphone { max-width: 140px; margin-top: 40px; }
  .footer-inner { padding: 56px 24px 28px; }

  .dash-ticker { display: none; }
  .nav-toggle { display: flex; }
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 16px 24px 24px;
    gap: 14px;
    border-bottom: 1px solid var(--border);
  }
  nav.open { display: flex; }
  .nav-dropdown { flex-direction: column; align-items: flex-start; }
  .nav-dropdown-menu {
    display: none;
    position: static;
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 0 16px;
    box-shadow: none;
    min-width: 0;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a {
    padding: 8px 0;
    color: var(--text-dim) !important;
    -webkit-text-fill-color: var(--text-dim) !important;
  }
  .nav-dropdown-divider { display: none; }
  .nav-chevron { transition: transform 0.2s; }
  .nav-dropdown.open .nav-chevron { transform: rotate(180deg); }

  .nav-user { border: none; padding: 0; }
  .nav-user-dropdown {
    position: static;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    box-shadow: none;
  }

  .hero { padding: 0 0 64px; }
  .hero-banner { padding: 48px 0 56px; }
  .hero-banner-logo { height: 140px; margin-bottom: 32px; }
  .hero-banner--side .contain { flex-direction: column; }
  .hero-banner--side .hero-banner-logo { margin: 0 auto 32px; height: 140px; }
  .hero-banner--side .hero-content { text-align: center; }
  .hero-banner--side .hero-sub { margin-left: auto; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-metrics { flex-direction: column; margin-top: 48px; }
  .metric + .metric { border-left: none; border-top: 1px solid var(--border); }

  .comparison { grid-template-columns: 1fr; }
  .domain-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: 1fr; }
  .markets-grid { grid-template-columns: 1fr; }
  .domain-dash-grid { grid-template-columns: 1fr; }
  .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
  .dash-content { padding: 0 24px 48px; }
  .dash-table { font-size: 0.78rem; }
  .dash-table th, .dash-table td { padding: 8px 8px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 4px; text-align: center; }

  .pricing-grid { padding: 0 24px; grid-template-columns: 1fr; }
}

/* ===== Rotation Scheduler ===== */
.rot-controls { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.rot-toggle { display: inline-flex; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-2); }
.rot-toggle-btn {
  padding: 8px 18px; background: transparent; border: none; color: var(--text);
  cursor: pointer; font-family: var(--font); font-size: 0.82rem; font-weight: 500; transition: all 0.2s;
}
.rot-toggle-btn:hover { color: var(--white); }
.rot-toggle-btn.active { background: var(--lavender); color: var(--white); }

/* Venue Schedule (draggable day-column week calendar of open hours) */
.dash-empty { padding: 24px; color: var(--text-dim); text-align: center; border: 1px dashed var(--border-2); border-radius: var(--radius-sm); }
.vs-cal { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.vs-cal-head { display: flex; border-bottom: 1px solid var(--border); }
.vs-cal-body { display: flex; }
.vs-gutter-spacer { flex: 0 0 44px; border-right: 1px solid var(--border); background: var(--surface-2); }
.vs-gutter { position: relative; flex: 0 0 44px; border-right: 1px solid var(--border); }
.vs-hour { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.68rem; color: var(--text-dim); }
.vs-cols { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; }
.vs-col-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-left: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.vs-col-head:first-child { border-left: none; }
.vs-col-day { font-weight: 700; color: var(--white); font-size: 0.82rem; }
.vs-col-closed-lbl { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; color: var(--text-dim); cursor: pointer; }
.vs-col-add { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg); color: var(--yellow); font-size: 1rem; line-height: 1; cursor: pointer; }
.vs-col-add:disabled { opacity: 0.3; cursor: default; }
.vs-col-track { position: relative; border-left: 1px solid var(--border); min-width: 0; background:
  repeating-linear-gradient(to bottom, transparent, transparent 37px, var(--border) 37px, var(--border) 38px); }
.vs-col-track:first-child { border-left: none; }
.vs-col-track-closed { opacity: 0.25; pointer-events: none; }
.vs-win {
  position: absolute; left: 3px; right: 3px; box-sizing: border-box;
  background: var(--yellow-glow, rgba(242,210,100,0.18)); border: 1px solid var(--yellow);
  border-radius: 5px; cursor: grab; overflow: hidden; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.vs-win:active { cursor: grabbing; }
.vs-win-time { font-size: 0.66rem; color: var(--white); font-weight: 600; pointer-events: none; padding: 0 2px; text-align: center; }
.vs-win-del { position: absolute; top: 1px; right: 2px; border: none; background: transparent; color: var(--white); font-size: 0.8rem; line-height: 1; cursor: pointer; opacity: 0.7; }
.vs-win-del:hover { opacity: 1; color: #f55; }
.vs-win-rs { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; }
.vs-win-rs-top { top: 0; } .vs-win-rs-bot { bottom: 0; }
.vs-schedule-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.vs-save-status { font-size: 0.85rem; color: var(--text-dim); }
.vs-save-status.vs-save-ok { color: var(--yellow); }
.vs-save-status.vs-save-err { color: #f55; }

.rot-tabs { display: flex; border-bottom: 1px solid var(--border-2); margin-bottom: 20px; }
.rot-tab {
  padding: 10px 20px; border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; font-family: var(--font); font-size: 0.88rem; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.rot-tab:hover { color: var(--white); }
.rot-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }

.rot-grid-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.rot-grid { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
.rot-grid th, .rot-grid td {
  padding: 5px 8px; border: 1px solid var(--border); text-align: center; white-space: nowrap;
}
.rot-grid thead th {
  background: var(--surface-2); color: var(--text); font-weight: 600;
  position: sticky; top: 0; z-index: 2;
}
.rot-time {
  background: var(--surface) !important; color: var(--text-dim) !important; font-weight: 500;
  text-align: right !important; padding-right: 12px !important;
  position: sticky; left: 0; z-index: 3; min-width: 80px;
}
.rot-corner { z-index: 4 !important; }
.rot-venue-header { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; }
.rot-venue-gipsy { color: var(--yellow) !important; }
.rot-venue-piranha { color: var(--lavender) !important; }

.rot-on { background: rgba(242, 210, 100, 0.08); color: var(--white); font-weight: 500; }
.rot-break { color: var(--text-faint); }
.rot-show { background: rgba(150, 61, 151, 0.12); color: var(--lavender); font-weight: 600; }
.rot-inactive { background: rgba(0, 0, 0, 0.15); color: var(--text-faint); }
.rot-away { color: var(--text-faint); font-style: italic; }
.rot-personal-grid tr.rot-away td { color: var(--text-faint); font-style: italic; }

/* Staff chips */
.rot-staff-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px;
}
.rot-staff-chip {
  display: flex; align-items: center;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  font-size: 0.85rem; transition: all 0.2s;
}
.rot-staff-chip:hover { border-color: var(--border-2); color: var(--white); }
.rot-staff-chip.selected { background: var(--lavender); border-color: var(--lavender); color: var(--white); font-weight: 600; }
.rot-staff-chip[draggable] { cursor: grab; }
.rot-staff-chip[draggable]:active { cursor: grabbing; }

/* Unscheduled / Available area */
.rot-unscheduled { margin-bottom: 16px; }
.rot-unscheduled-label {
  color: var(--text-faint); font-size: 0.78rem; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Drag and drop */
.rot-dragging { opacity: 0.35; }
.rot-drag-over { background: rgba(194, 160, 224, 0.25) !important; outline: 2px dashed var(--lavender); outline-offset: -2px; }
.rot-drop-target { transition: background 0.15s; }
td.rot-on[draggable] { cursor: grab; }
td.rot-on[draggable]:active { cursor: grabbing; }
td.rot-empty { color: var(--text-faint); }
td.rot-highlight { background: rgba(194, 160, 224, 0.25); box-shadow: inset 0 0 0 1px var(--lavender); }
td.rot-warn-multi { background: rgba(249, 115, 22, 0.2) !important; box-shadow: inset 0 0 0 1px #F97316; color: #F97316; }
td.rot-warn-rule { border-bottom: 2px solid #EF4444; }
.rot-reset-btn { color: var(--text-faint) !important; border-color: var(--border) !important; }
.rot-reset-btn:hover { color: var(--white) !important; }

/* Personal schedule */
.rot-personal-header {
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  color: var(--white); margin-bottom: 12px; padding: 16px 16px 0;
}
.rot-personal-stats {
  font-family: var(--font); font-size: 0.82rem; font-weight: 400;
  color: var(--text-dim); margin-top: 4px;
}
.rot-stat-sep { margin: 0 6px; color: var(--text-faint); }
.rot-personal-grid th { text-align: left; }
.rot-personal-grid tr.rot-on td { color: var(--white); }
.rot-personal-grid tr.rot-on td:first-child { font-weight: 600; }
.rot-personal-grid tr.rot-break td { color: var(--text-faint); }
.rot-personal-grid tr.rot-show td { color: var(--lavender); }

/* Show times */
.rot-show-grid th { text-align: left; }
.rot-show-grid tr.rot-show td { color: var(--white); }

.rot-select-prompt { text-align: center; padding: 32px; color: var(--text-dim); font-size: 0.88rem; }

/* Role selector bar */
.rot-role-bar {
  display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.rot-role-pill {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-2);
  background: transparent; color: var(--text-dim); cursor: pointer;
  font-family: var(--font); font-size: 0.82rem; font-weight: 500;
  transition: all 0.2s; white-space: nowrap;
}
.rot-role-pill:hover { color: var(--white); border-color: var(--text-dim); }
.rot-role-pill.active {
  background: var(--lavender); border-color: var(--lavender);
  color: var(--white); font-weight: 600;
}

/* Venue schedule timeline */
.rot-timeline { padding: 0; }
.rot-tl-entry {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.rot-tl-entry:last-child { border-bottom: none; }
.rot-tl-time {
  flex-shrink: 0; width: 80px; font-weight: 600;
  color: var(--text-dim); font-size: 0.82rem;
}
.rot-tl-body { flex: 1; min-width: 0; }
.rot-tl-label { color: var(--white); font-weight: 500; }
.rot-tl-dur { color: var(--text-dim); font-size: 0.78rem; margin-left: 4px; }
.rot-tl-roles { color: var(--text-faint); font-size: 0.75rem; }
.rot-tl-venue {
  flex-shrink: 0; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px;
  border-radius: 4px; background: var(--surface-2); color: var(--text-dim);
}
.rot-tl-mile { background: rgba(242, 210, 100, 0.04); }
.rot-tl-mile .rot-tl-label { color: var(--yellow); font-weight: 600; }
.rot-tl-event { background: rgba(150, 61, 151, 0.06); }
.rot-tl-event .rot-tl-label { color: var(--lavender); }

@media (max-width: 600px) {
  .rot-controls { gap: 8px; }
  .rot-toggle-btn { padding: 6px 12px; font-size: 0.78rem; }
  .rot-tab { padding: 8px 14px; font-size: 0.82rem; }
  .rot-staff-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
  .rot-staff-chip { padding: 8px 10px; font-size: 0.8rem; }
  .rot-grid { font-size: 0.72rem; }
  .rot-grid th, .rot-grid td { padding: 4px 5px; }
  .rot-role-bar { gap: 6px; }
  .rot-role-pill { padding: 6px 12px; font-size: 0.78rem; }
  .rot-tl-entry { gap: 10px; padding: 10px 12px; font-size: 0.8rem; }
  .rot-tl-time { width: 65px; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .hero { padding: 64px 0 48px; }
  .roles-grid { grid-template-columns: 1fr; }
}

/* ===== Private Events Module ===== */

.pe-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  overflow-x: auto;
}
.pe-tab {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.pe-tab:hover { color: var(--text); }
.pe-tab-active {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* Pipeline Kanban */
.pe-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.pe-pipeline-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pe-pipeline-header {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  padding: 10px 14px;
  border-top: 3px solid var(--text-dim);
  background: var(--surface);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.pe-count {
  float: right;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 100px;
}
.pe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  transition: border-color 0.2s;
}
.pe-card:hover { border-color: var(--lavender); }
.pe-card-confirmed { border-left: 3px solid #4CAF50; }
.pe-card-title {
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.pe-card-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.pe-card-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 4px;
}
.pe-card-source {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.pe-card-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--text);
  margin-top: 6px;
}

/* Quote Builder */
.pe-quote-wrap {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  margin-top: 8px;
}
.pe-quote-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
}
.pe-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pe-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pe-form-group label {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pe-input {
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
.pe-input:focus { border-color: var(--lavender); }
.pe-input option { background: var(--surface-2); color: var(--white); }

/* Generic form controls (incident tracking, etc.) */
.form-label {
  display: block;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.form-input {
  width: 100%;
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.form-input:focus { border-color: var(--lavender); }
.form-input option { background: var(--surface-2); color: var(--white); }
.form-input::placeholder { color: var(--text-dim); }
select.form-input { appearance: auto; }
textarea.form-input { resize: vertical; }

.pe-form-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* Quote Summary */
.pe-quote-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.pe-summary-title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.pe-summary-section {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pe-line-items { margin-bottom: 16px; }
.pe-li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.pe-li-cat {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--lavender);
  background: var(--lavender-glow);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
}
.pe-li-name { flex: 1; color: var(--text); }
.pe-li-price { color: var(--white); font-weight: 600; white-space: nowrap; }
.pe-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text);
  padding: 4px 0;
}
.pe-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
  color: var(--yellow);
  padding: 10px 0;
  margin-top: 4px;
  border-top: 2px solid var(--yellow);
}
.pe-summary-deposit {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  padding: 8px 0;
}
.pe-summary-margin {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.pe-summary-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.pe-btn {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.pe-btn-primary {
  background: var(--lavender);
  color: var(--white);
  flex: 1;
}
.pe-btn-primary:hover { background: var(--lavender-dark); }
.pe-btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.pe-btn-secondary:hover { border-color: var(--lavender); color: var(--white); }
.pe-btn-sm {
  padding: 6px 12px;
  font-size: 0.78rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pe-btn-sm:hover { border-color: var(--yellow); color: var(--yellow); }

/* Calendar */
.pe-cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}
.pe-cal-month {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.pe-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pe-cal-day-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  padding: 8px 0;
  text-transform: uppercase;
}
.pe-cal-cell {
  min-height: 90px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
}
.pe-cal-empty { background: transparent; border-color: transparent; }
.pe-cal-num {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
}
.pe-cal-event {
  margin-top: 4px;
  padding: 3px 6px;
  background: var(--surface-2);
  border-radius: 3px;
  font-size: 0.68rem;
}
.pe-cal-ev-name {
  display: block;
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-cal-ev-time {
  display: block;
  color: var(--text-dim);
  font-size: 0.65rem;
}
.pe-cal-legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text);
}
.pe-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* P&L Breakdown Bars */
.pe-breakdown { margin-top: 8px; }
.pe-breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.pe-breakdown-label {
  font-size: 0.82rem;
  color: var(--text);
  min-width: 180px;
}
.pe-breakdown-bar {
  flex: 1;
  height: 20px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.pe-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}
.pe-breakdown-value {
  font-size: 0.82rem;
  color: var(--text-dim);
  min-width: 120px;
  text-align: right;
}

/* Responsive */
@media (max-width: 1100px) {
  .pe-pipeline { grid-template-columns: repeat(2, 1fr); }
  .pe-quote-wrap { grid-template-columns: 1fr; }
  .pe-quote-summary { position: static; }
}
@media (max-width: 768px) {
  .pe-pipeline { grid-template-columns: 1fr; }
  .pe-form-grid { grid-template-columns: 1fr; }
  .pe-cal-grid { font-size: 0.72rem; }
  .pe-cal-cell { min-height: 60px; }
  .pe-breakdown-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pe-breakdown-label { min-width: auto; }
  .pe-breakdown-value { min-width: auto; }
}

/* Pricing Config CRUD */
.pe-cfg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  margin-bottom: 8px;
}
.pe-cfg-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--surface-2);
  color: var(--white);
}
.pe-cfg-btn:hover { border-color: var(--lavender); }
.pe-cfg-add {
  background: transparent;
  border-color: var(--yellow);
  color: var(--yellow);
  font-size: 0.78rem;
}
.pe-cfg-add:hover { background: rgba(242,210,100,0.1); }
.pe-cfg-edit { margin-right: 4px; }
.pe-cfg-del {
  border-color: #e05c5c;
  color: #e05c5c;
}
.pe-cfg-del:hover { background: rgba(224,92,92,0.12); }
.pe-cfg-refresh {
  background: transparent;
  border-color: var(--lavender);
  color: var(--lavender);
}
.pe-cfg-refresh:hover { background: rgba(196,160,224,0.1); }
.pe-cfg-save {
  background: var(--yellow);
  color: var(--bg);
  border-color: var(--yellow);
  padding: 7px 20px;
  font-size: 0.82rem;
}
.pe-cfg-save:hover { background: #e6c84e; }
.pe-cfg-cancel {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-dim);
  padding: 7px 20px;
  font-size: 0.82rem;
}
.pe-cfg-cancel:hover { border-color: var(--text-dim); }
.pe-cfg-form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
  margin-bottom: 16px;
}
.pe-cfg-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.pe-cfg-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--yellow);
  cursor: pointer;
}
.pe-label-section { margin-bottom: 24px; }
.pe-label-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px;
  cursor: pointer; margin-bottom: 4px;
}
.pe-label-header:hover { background: rgba(255,255,255,0.06); }
.pe-label-title { font-family: var(--font); font-size: 0.82rem; font-weight: 600; color: var(--white); }
.pe-label-chevron { color: var(--text-dim); font-size: 0.7rem; transition: transform 0.2s; }
.pe-label-chevron.open { transform: rotate(180deg); }
.pe-label-body { padding: 8px 0; display: none; }
.pe-label-body.open { display: block; }
.pe-label-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px;
  font-size: 0.8rem; color: var(--text-dim);
}
.pe-label-row:hover { background: rgba(255,255,255,0.02); }
.pe-label-key {
  min-width: 140px; font-family: monospace; font-size: 0.75rem;
  color: var(--lavender); white-space: nowrap;
}
.pe-label-arrow { color: var(--text-dim); }
.pe-label-input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; padding: 4px 8px; color: var(--white); font-size: 0.8rem;
  font-family: var(--font);
}
.pe-label-input:focus { border-color: var(--lavender); outline: none; }
.pe-label-add-row { padding: 6px 12px; }
.pe-label-add-key {
  width: 140px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; padding: 4px 8px; color: var(--white); font-size: 0.8rem;
  font-family: monospace;
}
.pe-label-add-key::placeholder, .pe-label-input::placeholder { color: var(--text-dim); opacity: 0.5; }
.pe-label-save-row { text-align: right; margin-top: 12px; }

/* ===== Login Page ===== */
.login-page {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(-45deg, #06060A, #1a0a2e, #0a0a1a, #2a1040, #12122B);
  background-size: 300% 300%;
  animation: loginGrad 15s ease infinite;
  padding: 40px 20px;
}
@keyframes loginGrad {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.login-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.12;
}
.login-glow-purple {
  width: 300px; height: 300px;
  background: var(--lavender);
  top: 10%; left: 15%;
}
.login-glow-yellow {
  width: 300px; height: 300px;
  background: var(--yellow);
  bottom: 10%; right: 15%;
}
.login-glow-center {
  width: 250px; height: 250px;
  background: var(--lavender);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.06;
}
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: #0D0D1A;
  border: 1px solid rgba(150,61,151,0.12);
  border-radius: 12px;
  padding: 44px 40px 36px;
  animation: loginFadeUp 0.5s ease;
  box-shadow:
    0 0 80px rgba(150,61,151,0.06),
    0 20px 60px rgba(0,0,0,0.5);
}
@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-brand {
  text-align: center;
  margin-bottom: 6px;
}
.login-app-icon {
  display: block;
  margin: 0 auto 16px;
  width: 80px;
  height: 80px;
}
.login-cta {
  text-align: center;
  font-family: var(--font);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  line-height: 1.5;
  margin-bottom: 32px;
}
.login-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.login-btn:hover { transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }
.login-btn-apple {
  background: #000;
  color: #fff;
}
.login-btn-apple:hover {
  background: #1a1a1a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}
.login-or span {
  font-family: var(--font);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 1px;
}
.login-or::before,
.login-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(150,61,151,0.12);
}
.login-btn-email {
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(150,61,151,0.15);
}
.login-btn-email:hover {
  border-color: rgba(150,61,151,0.3);
  color: var(--white);
  background: rgba(150,61,151,0.04);
}
.login-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(150,61,151,0.08);
}
.login-footer a {
  font-family: var(--font);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.2);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.login-footer a:hover { color: rgba(255,255,255,0.4); }
.login-footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(150,61,151,0.2);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(150,61,151,0.12);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.login-input:focus { border-color: var(--lavender); }
.login-input::placeholder { color: var(--text-dim); }
.login-btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(135deg, var(--lavender), var(--lavender-dark));
  color: #fff;
}
.login-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(150,61,151,0.25);
}
.login-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.login-error {
  font-family: var(--font);
  font-size: 0.8rem;
  color: #ef4444;
  text-align: center;
  min-height: 1.2em;
}
.login-link {
  font-family: var(--font);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-link:hover { color: var(--text); }
.login-back {
  font-family: var(--font);
  font-size: 0.8rem;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 0;
}
.login-back:hover { color: var(--text); }
@media (max-width: 480px) {
  .login-card { padding: 32px 24px 28px; }
  .login-glow-purple { width: 200px; height: 200px; }
  .login-glow-yellow { width: 200px; height: 200px; }
  .login-glow-center { display: none; }
}

/* ===== Website Builder ===== */
.wb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wb-tab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.wb-tab:hover { color: var(--white); }
.wb-tab.active { background: var(--surface-2); color: var(--white); }
.wb-status {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--surface-2);
}
.wb-layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 12px;
  min-height: 600px;
}
.wb-sidebar {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  max-height: 80vh;
}
.wb-canvas {
  background: var(--surface);
  border-radius: 8px;
  padding: 16px;
  overflow-y: auto;
  max-height: 80vh;
  min-height: 400px;
}
.wb-props {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  max-height: 80vh;
}
.wb-section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.wb-page-item {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s;
}
.wb-page-item:hover { background: var(--surface-2); }
.wb-page-item.active { background: var(--surface-2); color: var(--white); font-weight: 600; }
.wb-page-add {
  padding: 8px 10px;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 6px;
}
.wb-page-add:hover { background: var(--surface-2); }
.wb-widget-drag {
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text);
  font-size: 0.8rem;
  cursor: grab;
  margin-bottom: 2px;
  transition: background 0.15s;
}
.wb-widget-drag:hover { background: var(--surface-2); color: var(--white); }
.wb-widget-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wb-widget-block:hover { border-color: var(--text-dim); }
.wb-widget-block.wb-widget-selected { border-color: var(--yellow); background: rgba(242, 210, 100, 0.05); }
.wb-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.wb-widget-icon { font-size: 1rem; }
.wb-widget-label { font-size: 0.85rem; font-weight: 600; color: var(--white); }
.wb-widget-preview { font-size: 0.78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.wb-widget-move {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.wb-widget-move:hover { color: var(--white); background: var(--surface-2); }
.wb-widget-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.wb-widget-del:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.wb-props-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.wb-prop-group { margin-bottom: 12px; }
.wb-prop-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 4px;
  font-weight: 600;
}
.wb-prop-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--white);
  border-radius: 5px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
}
.wb-prop-input:focus { border-color: var(--accent); }
textarea.wb-prop-input { resize: vertical; }
.wb-prop-toggle { accent-color: var(--yellow); width: 16px; height: 16px; cursor: pointer; }
.wb-prop-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.wb-page-option {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wb-page-option:hover { border-color: var(--yellow); background: rgba(242, 210, 100, 0.05); }
.wb-theme-card:hover { border-color: var(--text-dim) !important; }
@media (max-width: 900px) {
  .wb-layout { grid-template-columns: 1fr; }
  .wb-sidebar, .wb-props { max-height: none; }
}

/* ===== Email Builder ===== */
.eb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.eb-tab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.eb-tab:hover { color: var(--white); }
.eb-tab.active { background: var(--surface-2); color: var(--white); }
.eb-btn {
  padding: 6px 16px;
  border: none;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.eb-btn-primary { background: var(--yellow); color: #000; }
.eb-btn-primary:hover { filter: brightness(1.1); }
.eb-btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.eb-btn-ghost:hover { color: var(--white); border-color: var(--text-dim); }
.eb-btn-danger { background: transparent; color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.eb-btn-danger:hover { background: rgba(239,68,68,0.1); }
.eb-save-indicator { font-size: 0.75rem; color: var(--text-dim); }
.eb-layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 12px;
  min-height: 600px;
}
.eb-sidebar {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  max-height: 80vh;
}
.eb-canvas {
  background: var(--surface);
  border-radius: 8px;
  padding: 16px;
  overflow-y: auto;
  max-height: 80vh;
  min-height: 400px;
}
.eb-props {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
  max-height: 80vh;
}
.eb-section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.eb-block-drag {
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text);
  font-size: 0.8rem;
  cursor: grab;
  margin-bottom: 2px;
  transition: background 0.15s;
}
.eb-block-drag:hover { background: var(--surface-2); color: var(--white); }
.eb-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.eb-block:hover { border-color: var(--text-dim); }
.eb-block.eb-block-selected { border-color: var(--yellow); background: rgba(242, 210, 100, 0.05); }
.eb-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.eb-block-icon { font-size: 1rem; }
.eb-block-label { font-size: 0.85rem; font-weight: 600; color: var(--white); }
.eb-block-preview { font-size: 0.78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.eb-block-actions { margin-left: auto; display: flex; gap: 2px; }
.eb-block-move {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.eb-block-move:hover { color: var(--white); background: var(--surface-2); }
.eb-block-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.eb-block-del:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.eb-props-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.eb-prop-group { margin-bottom: 12px; }
.eb-prop-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 4px;
  font-weight: 600;
}
.eb-prop-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--white);
  border-radius: 5px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.eb-prop-input:focus { border-color: var(--accent); }
textarea.eb-prop-input { resize: vertical; min-height: 60px; }
.eb-prop-toggle { accent-color: var(--yellow); width: 16px; height: 16px; cursor: pointer; }
.eb-prop-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.eb-drop-gap {
  height: 4px;
  border-radius: 2px;
  transition: all 0.15s;
  margin: 2px 0;
}
.eb-drop-gap.active { height: 32px; background: rgba(242, 210, 100, 0.15); border: 2px dashed var(--yellow); }
/* Campaign list view */
.eb-action-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.eb-campaign-row { cursor: pointer; transition: background 0.1s; }
.eb-campaign-row:hover { background: var(--surface-2); }

/* Email list tabs (Campaigns / Automatic Emails) */
.eb-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border-2); }
.eb-tab { background: none; border: none; color: var(--text-dim); font-weight: 600; font-size: 0.9rem; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.eb-tab:hover { color: var(--white); }
.eb-tab-active { color: var(--white); border-bottom-color: var(--yellow, #F2D264); }

/* Transactional (automatic) emails section */
.eb-section-title { font-family: var(--display); font-weight: 700; color: var(--white); font-size: 1rem; margin-bottom: 10px; }
.eb-section-sub { font-weight: 400; color: var(--text-dim); font-size: 0.8rem; }
.eb-txn-panel { padding: 6px 16px; }
.eb-txn-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-2); }
.eb-txn-row:last-child { border-bottom: 0; }
.eb-txn-info { flex: 1; }
.eb-txn-name { font-weight: 600; color: var(--white); font-size: 0.9rem; }
.eb-txn-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }
.eb-txn-actions { display: inline-flex; align-items: center; gap: 10px; }
.eb-txn-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; }
.eb-txn-on  { background: color-mix(in srgb, #4ade80 22%, transparent); color: #4ade80; }
.eb-txn-off { background: rgba(255,255,255,0.1); color: var(--text-dim); }
/* Template gallery */
.eb-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.eb-template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.eb-template-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.eb-template-card h4 { margin: 0 0 6px; color: var(--white); font-size: 0.95rem; }
.eb-template-card p { margin: 0; color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }
/* Settings form */
.eb-settings-form { max-width: 640px; }
.eb-settings-form .eb-prop-group { margin-bottom: 20px; }
.eb-settings-form .eb-prop-label { font-size: 0.82rem; margin-bottom: 6px; }
.eb-settings-form .eb-prop-input { padding: 10px 14px; font-size: 0.9rem; }
/* Preview frame */
.eb-preview-container { text-align: center; }
.eb-preview-toggle { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.eb-preview-toggle button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 5px;
  font-family: var(--body);
}
.eb-preview-toggle button.active { background: var(--surface-2); color: var(--white); border-color: var(--text-dim); }
.eb-preview-frame {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 auto;
  transition: width 0.3s;
  background: #fff;
}
/* Venue checkboxes */
.eb-venue-checks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.eb-venue-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: all 0.15s;
}
.eb-venue-check:hover { border-color: var(--text-dim); }
.eb-venue-check.checked { border-color: var(--yellow); background: rgba(242, 210, 100, 0.08); color: var(--white); }
.eb-venue-check input { accent-color: var(--yellow); }
/* Char counter */
.eb-char-count { font-size: 0.7rem; color: var(--text-dim); text-align: right; margin-top: 2px; }
.eb-char-count.warning { color: #f59e0b; }
.eb-char-count.danger { color: #ef4444; }
/* Theme cards */
.eb-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.eb-theme-card {
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s;
}
.eb-theme-card:hover { border-color: var(--text-dim); }
.eb-theme-card.eb-theme-active { border-color: var(--yellow); }
.eb-theme-card-preview { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; }
.eb-theme-card-preview span { width: 20px; height: 20px; border-radius: 50%; }
.eb-theme-card-name { font-size: 0.75rem; color: var(--text); }
/* Analytics */
.eb-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.eb-metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.eb-metric-card .value { font-size: 1.4rem; font-weight: 700; color: var(--white); }
.eb-metric-card .label { font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; }
@media (max-width: 900px) {
  .eb-layout { grid-template-columns: 1fr; }
  .eb-sidebar, .eb-props { max-height: none; }
}

/* ===== StratusBuilder UI (sb-) — dashboard website builder ===== */
.sb-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  position: relative;
}
.sb-toolbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--yellow), var(--lavender), var(--yellow));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  opacity: 0.7;
}
.sb-site-id {
  display: flex; flex-direction: column;
  padding-right: 14px;
  border-right: 1px solid var(--border-2);
  margin-right: 6px;
  min-width: 0;
}
.sb-site-name { font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.sb-site-sub { font-size: 0.7rem; color: var(--text-dim); margin-top: 1px; }
.sb-breadcrumb { display: flex; align-items: center; gap: 4px; }
.sb-crumb-sep { color: var(--text-faint); padding: 0 4px; }
.sb-crumb-page { font-size: 0.85rem; color: var(--text); font-weight: 500; }
.sb-status-pill {
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 999px;
}
.sb-status-published { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.sb-status-draft { background: var(--border-2); color: var(--text-dim); }
.sb-tab {
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.sb-tab:hover { color: var(--white); background: var(--border-2); }
.sb-tab.active { color: var(--yellow); background: var(--yellow-glow); border-color: var(--yellow-dark); }
.sb-save-indicator { font-size: 0.78rem; color: var(--text-dim); padding: 0 8px; min-width: 60px; text-align: right; }
.sb-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.lf-chip {
  padding: 5px 12px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.lf-chip:hover { border-color: var(--lavender); color: var(--white); }
.lf-chip.active { background: var(--yellow-glow); border-color: var(--yellow-dark); color: var(--yellow); }
.sb-btn {
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface-2);
  color: var(--text);
}
.sb-btn:hover { border-color: var(--lavender); color: var(--white); }
.sb-btn-primary { background: var(--yellow); color: var(--bg); border-color: var(--yellow-dark); }
.sb-btn-primary:hover { background: var(--yellow-dark); color: var(--bg); }
.sb-btn-ghost { background: transparent; }
.sb-btn-danger { color: #f87171; border-color: rgba(248, 113, 113, 0.3); }
.sb-btn-danger:hover { background: rgba(248, 113, 113, 0.1); color: #fca5a5; }

.sb-layout {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  gap: 12px;
  min-height: 600px;
}
.sb-layout-preview {
  grid-template-columns: 220px 1fr 1.1fr;
}
.sb-preview-pane {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 220px);
}
.sb-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}
.sb-preview-iframe { flex: 1; border: 0; width: 100%; background: #fff; }
.sb-sidebar, .sb-canvas, .sb-props {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 14px;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.sb-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin: 4px 0 8px;
}
.sb-page-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.1s;
}
.sb-page-item:hover { background: var(--border-2); color: var(--white); }
.sb-page-item.active { background: var(--lavender-glow); color: var(--white); border-left: 2px solid var(--yellow); padding-left: 8px; }
/* Team / staff_roster widget */
.vs-team-grid { display: grid; gap: 24px; }
.vs-team-card {
  text-align: center;
  background: var(--vs-card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.08));
  border-radius: 10px; padding: 20px 16px;
}
.vs-team-photo {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto 14px; overflow: hidden;
  background: var(--vs-card-bg, rgba(255,255,255,0.05));
}
.vs-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-team-info h3 {
  margin: 0 0 4px; font-family: var(--vs-heading-font, inherit);
  font-size: 1.05rem; font-weight: 700; color: var(--vs-heading);
}
.vs-team-role {
  font-size: 0.82rem; color: var(--vs-accent);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 6px;
}
.vs-team-bio { font-size: 0.85rem; color: var(--vs-text); line-height: 1.5; }

/* Menu editor */
.me-section {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; margin-bottom: 14px;
}
.me-section-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 0.92rem;
  color: var(--lavender); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-2);
  user-select: none;
}
.me-section-handle {
  cursor: grab; color: var(--text-faint); padding: 2px 4px;
  font-size: 0.9rem; line-height: 1;
}
.me-section-handle:active { cursor: grabbing; }
.me-section-toggle {
  background: transparent; border: 0; padding: 0 4px;
  color: var(--text-dim); cursor: pointer; font-size: 0.85rem;
  font-family: inherit;
}
.me-section-toggle:hover { color: var(--lavender); }
.me-section-title { flex: 1 1 auto; min-width: 0; }
.me-section-title-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 1px solid transparent;
  color: var(--lavender); font: inherit;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
}
.me-section-title-input:hover { border-color: var(--border-2); }
.me-section-title-input:focus { outline: none; border-color: var(--yellow); background: var(--surface-2); }
.me-section-handle-disabled { opacity: 0.25; cursor: default; }
.me-section-avail {
  font-family: var(--font); font-weight: 400; font-size: 0.72rem;
  color: var(--text-dim); background: var(--surface-2);
  padding: 2px 8px; border-radius: 999px;
  text-transform: none; letter-spacing: 0;
}
.me-section-settings,
.me-section-delete {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-dim); padding: 0 6px; font-size: 0.95rem;
  line-height: 1; font-family: inherit;
}
.me-section-settings:hover { color: var(--lavender); }
.me-section-delete:hover { color: #f55; }
.me-section-add-row { margin-top: 10px; }

/* + New ▾ dropdown in the menus toolbar */
.me-new-wrap { position: relative; }
.me-new-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  min-width: 200px;
  background: var(--surface-1, var(--surface));
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  padding: 4px;
  display: flex; flex-direction: column;
}
/* The `hidden` attribute loses to display:flex above without this override. */
.me-new-menu[hidden] { display: none; }
.me-new-menu button {
  background: transparent; border: 0;
  color: var(--text); text-align: left;
  padding: 8px 12px; font-size: 0.88rem;
  cursor: pointer; border-radius: 4px;
  font-family: var(--font);
}
.me-new-menu button:hover:not(:disabled) { background: var(--surface-2); }
.me-new-menu button:disabled { color: var(--text-faint); cursor: not-allowed; }

/* Per-item inventory chip */
.me-stock-chip {
  flex: 0 0 auto;
  padding: 4px 10px; font-size: 0.74rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.me-stock-chip:hover { border-color: var(--text); }
.me-stock-untracked { color: var(--text-dim); border-style: dashed; }
.me-stock-ok       { color: var(--text); }
.me-stock-low      { color: #FFB454; border-color: #FFB454; }
.me-stock-out      { color: #F66; border-color: #F66; background: rgba(255,80,80,0.12); }
.me-status-select {
  flex: 0 0 auto;
  padding: 4px 10px; font-size: 0.74rem; font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  appearance: none; -webkit-appearance: none;
  color: var(--text-dim);
}
.me-item[data-status="published"]    .me-status-select { color: #6EDBA8; border-color: #6EDBA8; background: rgba(110,219,168,0.10); }
.me-item[data-status="coming_soon"]  .me-status-select { color: #F2D264; border-color: rgba(242,210,100,0.45); background: rgba(242,210,100,0.08); }
.me-item[data-status="hidden"]       .me-status-select { color: var(--text-dim); border-style: dashed; }
.me-item[data-status="hidden"]      { opacity: 0.55; }
.me-item[data-status="coming_soon"] { opacity: 0.75; }
.me-section-count {
  font-family: var(--font); font-weight: 400; font-size: 0.74rem;
  color: var(--text-dim); letter-spacing: 0;
  text-transform: none;
}
.me-section-body { display: block; }

/* Empty-state inside the items pane */
.me-empty-items {
  color: var(--text-dim); font-size: 0.88rem; padding: 16px 0;
}

.me-item {
  display: flex; gap: 12px; align-items: stretch;
  padding: 12px; margin-bottom: 10px;
  border: 1.5px solid rgba(196,160,224,0.45); border-radius: 8px;
  background: rgba(196,160,224,0.03);
}
.me-item:hover { border-color: rgba(196,160,224,0.8); }
.me-item-handle {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  cursor: grab; color: var(--text-dim); padding: 0 2px; margin: -12px 0 -12px -4px;
  font-size: 1.05rem; user-select: none; border-radius: 6px 0 0 6px;
  background: rgba(255,255,255,0.02);
}
.me-item-handle:hover { color: var(--yellow); background: rgba(242,210,100,0.08); }
.me-item-handle:active { cursor: grabbing; }

/* DnD visual feedback */
.me-dragging { opacity: 0.45; }
body.me-dragging-active { cursor: grabbing !important; user-select: none !important; }
body.me-dragging-active .me-item-handle { cursor: grabbing; }
.me-drop-before { box-shadow: inset 0 3px 0 0 var(--yellow); }
.me-drop-after  { box-shadow: inset 0 -3px 0 0 var(--yellow); }
.me-drop-into   { background: rgba(242,210,100,0.08); outline: 2px dashed var(--yellow); outline-offset: -2px; }
.me-section-head.me-drop-before { box-shadow: inset 0 3px 0 0 var(--yellow); }
.me-section-head.me-drop-after  { box-shadow: inset 0 -3px 0 0 var(--yellow); }
.me-section-head.me-drop-into   { background: rgba(242,210,100,0.08); }
.me-item-thumb {
  flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 6px; overflow: hidden;
  background: var(--surface-2);
}
.me-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-item-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--text-faint); font-size: 1.2rem;
}
.me-item-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.me-item-row1 { display: flex; gap: 6px; align-items: center; }
.me-item-row1 input { padding: 6px 8px; font-size: 0.85rem; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 4px; color: var(--white); font-family: var(--font); }
.me-item-name    { flex: 1 1 40%; min-width: 0; font-weight: 600; }
.me-item-price   { flex: 0 0 80px; }
.me-item-section { flex: 0 0 140px; }
.me-item-del {
  flex: 0 0 auto; padding: 4px 10px !important; font-size: 1rem !important;
}
.me-item-desc {
  width: 100%; padding: 6px 8px; font-size: 0.82rem;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--white); font-family: var(--font); resize: vertical; min-height: 36px;
}
.me-item-desc-wrap { position: relative; }
.me-item-desc-wrap .me-item-desc { padding-right: 96px; }
.me-ai-desc {
  position: absolute; top: 6px; right: 6px;
  padding: 3px 9px; font-size: 0.7rem; font-weight: 700;
  background: rgba(196,160,224,0.14); color: var(--lavender, #C4A0E0);
  border: 1px solid rgba(196,160,224,0.35); border-radius: 999px;
  cursor: pointer; font-family: var(--font); white-space: nowrap;
}
.me-ai-desc:hover:not(:disabled) { background: rgba(196,160,224,0.24); }
.me-ai-desc:disabled { opacity: 0.6; cursor: default; }

/* Per-item recipe (internal only) */
.me-recipe { margin-top: 4px; border: 1px solid var(--border-2); border-radius: 6px; background: rgba(255,255,255,0.015); }
.me-recipe-summary {
  cursor: pointer; padding: 7px 10px; font-size: 0.8rem; font-weight: 600;
  color: var(--text); list-style: none; user-select: none;
}
.me-recipe-summary::-webkit-details-marker { display: none; }
.me-recipe-summary::before { content: '▸ '; color: var(--text-dim); }
.me-recipe[open] .me-recipe-summary::before { content: '▾ '; }
.me-recipe-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.me-recipe-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.me-recipe-meta-field { flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px; }
.me-recipe-meta-field span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.me-recipe-body input, .me-recipe-body textarea {
  padding: 5px 8px; font-size: 0.8rem; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 4px; color: var(--white); font-family: var(--font);
}
.me-recipe-ing-label, .me-recipe-instr-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.me-recipe-rows { display: flex; flex-direction: column; gap: 5px; }
.me-recipe-row { display: flex; gap: 6px; align-items: center; }
.me-recipe-amt  { flex: 0 0 56px; }
.me-recipe-unit { flex: 0 0 72px; }
.me-recipe-name { flex: 1 1 auto; min-width: 0; }
.me-recipe-del  { flex: 0 0 auto; padding: 3px 9px !important; font-size: 0.95rem !important; }
.me-recipe-add  { align-self: flex-start; font-size: 0.74rem !important; padding: 4px 10px !important; }
.me-recipe-instr { width: 100%; resize: vertical; min-height: 48px; }

/* Per-item videos (internal + external) */
.me-item-videos { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.me-video-field { flex: 1 1 200px; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.me-video-label { font-size: 0.72rem; color: var(--text-dim); }
.me-video-field .sb-image-thumb { width: 100%; height: 100px; }
/* Menu public-display toggles */
.me-toggle-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text); padding: 4px 0;
  cursor: pointer;
}
.me-toggle-row input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--yellow);
}

/* Menu header — cover photo + name + actions on one row */
.me-edit-header.ee-edit-header { align-items: center; gap: 14px; }
.me-cover-photo { flex: 0 0 72px; width: 72px; }
.me-cover-photo .sb-image-field { gap: 0; margin: 0; }
.me-cover-photo .sb-image-thumb { width: 72px; height: 72px; }
.me-cover-photo .sb-image-field-input,
.me-cover-photo .sb-image-actions { display: none; }
.me-cover-photo .sb-image-thumb-hint { font-size: 0.62rem; gap: 2px; }
.me-cover-photo .sb-image-thumb-icon { width: 22px; height: 22px; font-size: 1.1rem; }

/* Item photo column */
.me-item-photo-col { flex: 0 0 96px; width: 96px; }
.me-item-photo-col .sb-image-field { gap: 0; margin: 0; }
.me-item-photo-col .sb-image-thumb { width: 96px; height: 96px; }
.me-item-photo-col .sb-image-field-input,
.me-item-photo-col .sb-image-actions { display: none; }

/* Per-item add-on options */
.me-item-addons { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; align-items: flex-start; }
.me-item-addons-label {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.me-item-addons-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.me-addon-row { display: flex; align-items: center; gap: 6px; }
.me-addon-row .me-addon-label { flex: 1; min-width: 0; }
.me-addon-prefix { color: var(--text-dim); font-size: 0.85rem; }
.me-addon-row .me-addon-price { width: 80px; flex: 0 0 auto; }
.me-addon-del { flex: 0 0 auto; }

/* Alternative price tiers (Regular / Holiday / …) */
.me-item-prices { margin-top: 4px; }
.me-item-prices-summary {
  font-size: 0.72rem; color: var(--text-dim); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.me-item-prices-summary .ee-section-sub { text-transform: none; letter-spacing: 0; }
.me-item-prices-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 6px; }
.me-item-prices-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.me-price-row { display: flex; align-items: center; gap: 6px; }
.me-price-row .me-price-label { flex: 1; min-width: 0; }
.me-price-row .me-price-amt { width: 90px; flex: 0 0 auto; }
.me-price-del { flex: 0 0 auto; }

/* Per-item gallery */
.me-item-gallery { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.me-item-gallery-label {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.me-item-gallery-row { display: flex; flex-wrap: wrap; gap: 8px; }
.me-item-gallery-add { width: 80px; }
.me-item-gallery-add .sb-image-field { gap: 0; margin: 0; }
.me-item-gallery-add .sb-image-thumb { width: 80px; height: 80px; border-style: dashed; }
.me-item-gallery-add .sb-image-field-input,
.me-item-gallery-add .sb-image-actions { display: none; }
.me-item-gallery-add .sb-image-thumb-hint { font-size: 0.68rem; gap: 2px; }
.me-item-gallery-add .sb-image-thumb-icon { width: 24px; height: 24px; font-size: 1.2rem; }

.me-item-gallery-item {
  position: relative; width: 80px; height: 80px;
  border-radius: 6px; overflow: hidden; background: var(--surface-2);
}
.me-item-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-item-gallery-item { cursor: grab; }
.me-item-gallery-item:active { cursor: grabbing; }

.me-item-gallery-remove,
.me-item-gallery-zoom {
  position: absolute;
  width: 20px; height: 20px; line-height: 18px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
}
.me-item-gallery-remove { top: 3px; right: 3px; font-size: 1rem; }
.me-item-gallery-zoom   { top: 3px; left: 3px;  font-size: 0.78rem; }
.me-item-gallery-item:hover .me-item-gallery-remove,
.me-item-gallery-item:hover .me-item-gallery-zoom { opacity: 1; }
.me-item-gallery-remove:hover { background: rgba(220,0,0,0.85); }
.me-item-gallery-zoom:hover   { background: rgba(0,0,0,0.85); }

/* ── Gallery lightbox ──────────────────────────────────────────────────── */
.me-lightbox-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.me-lightbox {
  background: var(--surface-1, #1a1a2e);
  border: 1px solid var(--border-2, rgba(255,255,255,0.12));
  border-radius: 10px;
  max-width: min(90vw, 1100px);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.me-lightbox-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-2);
  font-weight: 600; color: var(--white);
}
.me-lightbox-x {
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.me-lightbox-x:hover { color: var(--white); }
.me-lightbox-body {
  padding: 16px; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.me-lightbox-body img {
  max-width: 100%; max-height: 70vh; display: block; object-fit: contain;
}
.me-lightbox-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border-2);
}

/* ── Add-item modal ─────────────────────────────────────────────────────── */
.me-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.me-modal {
  background: var(--surface-1, #1a1a2e);
  border: 1px solid var(--border-2, rgba(255,255,255,0.12));
  border-radius: 10px;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.me-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-2);
  font-weight: 600; color: var(--white);
}
.me-modal-x {
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.me-modal-x:hover { color: var(--white); }
.me-modal-body { padding: 16px; overflow-y: auto; }
.me-modal-grid {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  align-items: start;
}
.me-modal-photo { width: 140px; }
.me-modal-photo .sb-image-thumb { width: 140px; height: 140px; }
.me-modal-photo .sb-image-field { gap: 0; margin: 0; }
.me-modal-photo .sb-image-field-input,
.me-modal-photo .sb-image-actions { display: none; }
.me-modal-fields { display: grid; gap: 10px; }
.me-modal-field { display: flex; flex-direction: column; gap: 4px; }
.me-modal-field > span {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.me-modal-field input,
.me-modal-field textarea {
  padding: 8px 10px; font-size: 0.9rem; color: var(--white);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 4px; font-family: var(--font);
}
.me-modal-field textarea { resize: vertical; min-height: 64px; }
.me-modal-field-full { grid-column: 1 / -1; }
.me-modal-libnote {
  font-size: 0.78rem; color: var(--text-dim); line-height: 1.4;
}
.me-modal-libnote em { color: var(--text-faint); font-style: italic; }
.me-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border-2);
}
@media (max-width: 540px) {
  .me-modal-grid { grid-template-columns: 1fr; }
  .me-modal-photo { width: 100%; max-width: 220px; }
  .me-modal-photo .sb-image-thumb { width: 100%; aspect-ratio: 1/1; height: auto; }
}

/* ── Placements: which menus an item appears on ─────────────────────────── */
/* Chip sits with the stock + status chips in the item's top row. The accent
   variant only appears once an item is genuinely shared, so the common
   one-menu case stays visually quiet. */
.me-item-menus-chip {
  flex: 0 0 auto;
  padding: 4px 10px; font-size: 0.74rem;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  font-family: var(--font);
}
.me-item-menus-chip:hover { border-color: var(--text); color: var(--text); }
.me-item-menus-chip-multi {
  color: #C4A0E0;
  border-color: rgba(196,160,224,0.7);
  background: rgba(196,160,224,0.14);
}
.me-item-places {
  margin-top: 6px; padding: 10px;
  background: rgba(196,160,224,0.06);
  border: 1px solid rgba(196,160,224,0.35);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.me-item-places[hidden] { display: none; }
.me-item-places-label {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.me-item-places-label .ee-section-sub { text-transform: none; letter-spacing: 0; }
.me-place-rows { display: flex; flex-direction: column; gap: 6px; }
.me-place-row { display: flex; align-items: center; gap: 8px; }
.me-place-menu {
  flex: 1 1 40%; min-width: 0;
  font-size: 0.86rem; color: var(--text);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-place-here {
  flex: 0 0 auto;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bg); background: var(--yellow);
  border-radius: 999px; padding: 1px 7px;
}
.me-place-row .me-place-section { flex: 1 1 40%; min-width: 0; }
.me-place-del { flex: 0 0 auto; }
.me-place-del:disabled { opacity: 0.35; cursor: not-allowed; }
.me-place-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.me-place-add select { flex: 1 1 30%; min-width: 120px; }
.me-place-loading { font-size: 0.82rem; color: var(--text-dim); }

/* Add-existing-items picker */
.me-modal-wide { width: min(760px, calc(100vw - 32px)); }
.me-modal-narrow { width: min(460px, calc(100vw - 32px)); }
.me-modal-note { font-size: 0.86rem; color: var(--text); line-height: 1.5; margin: 0 0 10px; }
.me-modal-note:last-child { margin-bottom: 0; }
.me-pick-controls { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.me-pick-controls .ee-search { flex: 1 1 auto; }
.me-pick-section { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.me-pick-section > span {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.me-pick-list {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border-2); border-radius: 6px;
}
.me-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; cursor: pointer;
  border-bottom: 1px solid var(--border-2);
}
.me-pick-row:last-child { border-bottom: 0; }
.me-pick-row:hover { background: var(--surface-2); }
.me-pick-thumb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 4px;
  overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.me-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.me-pick-thumb-empty { color: var(--text-faint); font-size: 0.8rem; }
.me-pick-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-pick-name {
  font-size: 0.9rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-pick-meta {
  font-size: 0.72rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-pick-price { flex: 0 0 auto; font-size: 0.86rem; color: var(--text-dim); }
.me-pick-count { flex: 1 1 auto; font-size: 0.8rem; color: var(--text-dim); }
@media (max-width: 620px) {
  .me-pick-controls { flex-direction: column; align-items: stretch; }
  .me-place-row { flex-wrap: wrap; }
}

/* ── Menu image library ─────────────────────────────────────────────────── */
.me-library {
  margin: 16px 0 24px;
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 16px;
}
.me-library-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.me-library-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: 0.9rem; padding: 0 4px;
}
.me-library-count {
  font-size: 0.78rem; color: var(--text-dim);
  background: var(--surface-2); padding: 2px 8px; border-radius: 999px;
}
.me-library-tools {
  margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap;
}
.me-library-tools input,
.me-library-tools select {
  padding: 6px 8px; font-size: 0.82rem;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 4px; color: var(--white); font-family: var(--font);
}
.me-library-tools input { min-width: 180px; }

.me-lib-dropzone {
  border: 2px dashed var(--border-2); border-radius: 8px;
  padding: 14px; margin-bottom: 12px;
  background: rgba(255,255,255,0.02);
  transition: background 0.15s, border-color 0.15s;
}
.me-lib-drop-hot {
  background: rgba(242,210,100,0.08);
  border-color: var(--yellow);
}
.me-lib-drop-hint {
  font-size: 0.86rem; color: var(--text-dim); line-height: 1.5;
}
.me-lib-drop-hint strong { color: var(--text); }
.me-lib-pick {
  color: var(--yellow); cursor: pointer; text-decoration: underline;
}
.me-lib-progress {
  margin-top: 8px; font-size: 0.8rem; color: var(--text-dim);
}

/* One-row horizontally-scrollable rail so the library never pushes items
   out of view. Tiles keep a fixed width; the rail itself scrolls. The rail
   sits OUTSIDE `.me-library` (as a sibling) so its containing block is the
   edit pane's inner content, not the library body — that extends the sticky
   range all the way through the items below. */
.me-lib-grid {
  position: sticky; top: 0; z-index: 5;
  margin: 0 -24px 16px;             /* bleed into edit pane's 24px padding */
  padding: 8px 24px;
  background: var(--surface);
  box-shadow: 0 6px 12px -10px rgba(0,0,0,0.6);
  display: flex; flex-wrap: nowrap; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
}
.me-lib-grid::-webkit-scrollbar { height: 8px; }
.me-lib-grid::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.me-lib-empty {
  width: 100%;
  color: var(--text-dim); font-size: 0.88rem;
  padding: 18px 0; text-align: center;
}
.me-lib-group {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
.me-lib-group-head {
  font-size: 0.78rem; color: var(--lavender);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.me-lib-group-count {
  color: var(--text-dim); margin-left: 6px;
  text-transform: none; letter-spacing: 0; font-size: 0.7rem;
}
.me-lib-group-body {
  display: flex; gap: 10px;
}

.me-lib-tile {
  position: relative;
  flex: 0 0 160px; width: 160px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-2);
  border-radius: 8px; overflow: hidden;
  background: var(--surface-2);
  cursor: grab;
  scroll-snap-align: start;
  transition: transform 0.1s, box-shadow 0.1s;
}
.me-lib-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.35); }
.me-lib-tile:active { cursor: grabbing; }
.me-lib-dragging { opacity: 0.5; }
.me-lib-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-1);
  background: linear-gradient(135deg, var(--surface-1), var(--lib-swatch, var(--surface-2)));
  overflow: hidden;
}
.me-lib-thumb img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.me-lib-meta {
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.me-lib-meta input {
  width: 100%; box-sizing: border-box;
  padding: 4px 6px; font-size: 0.78rem;
  background: var(--surface-1); border: 1px solid var(--border-2);
  border-radius: 4px; color: var(--white); font-family: var(--font);
}
.me-lib-name { font-weight: 600; }
.me-lib-shoot { color: var(--text-dim) !important; font-size: 0.74rem !important; }
.me-lib-badges {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 4px;
}
.me-lib-used {
  background: rgba(0,0,0,0.65); color: var(--white);
  font-size: 0.7rem; padding: 2px 6px; border-radius: 999px;
}
.me-lib-del {
  background: rgba(0,0,0,0.65); color: var(--white);
  border: 0; border-radius: 50%;
  width: 22px; height: 22px; line-height: 20px;
  padding: 0; cursor: pointer; font-size: 1rem;
}
.me-lib-del:hover { background: rgba(220,0,0,0.85); }

/* ── Fuzzy-match modal ──────────────────────────────────────────────────── */
.me-fm-modal { width: min(720px, calc(100vw - 32px)); }
.me-fm-intro { font-size: 0.86rem; color: var(--text-dim); margin: 0 0 12px; }
.me-fm-list { display: flex; flex-direction: column; gap: 4px; }
.me-fm-row {
  display: grid;
  grid-template-columns: auto 56px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 4px;
  cursor: pointer;
}
.me-fm-row:hover { background: var(--surface-2); }
.me-fm-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--yellow); }
.me-fm-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 4px; background: var(--surface-2);
}
.me-fm-text {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; min-width: 0; font-size: 0.86rem;
}
.me-fm-file { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-fm-item { color: var(--white); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-fm-arrow { color: var(--text-faint); }
.me-fm-score {
  font-size: 0.72rem; color: var(--text-dim);
  background: var(--surface-2); padding: 2px 8px; border-radius: 999px;
}

/* SB image-field square aspect-ratio variants — outranks the default 16/9 thumb */
.sb-image-field[data-aspect-ratio="1"] .sb-image-thumb { aspect-ratio: 1 / 1; }

/* Floating X overlay to clear a populated image (replaces the old text "Clear" button) */
.sb-image-clear-x {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; line-height: 22px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.sb-image-thumb:hover .sb-image-clear-x { opacity: 1; }
.sb-image-clear-x:hover { background: rgba(220,0,0,0.85); }

/* Image field lightbox */
.sb-img-lb-overlay { animation: sb-lb-in 0.15s ease; }
@keyframes sb-lb-in { from { opacity: 0; } to { opacity: 1; } }
.sb-img-lb-img { border-radius: 6px; box-shadow: 0 12px 60px rgba(0,0,0,0.7); }
.sb-img-lb-close { font-family: var(--font); }
.sb-img-lb-close:hover { opacity: 1 !important; }

/* Floating zoom/view icon — opens image in lightbox */
.sb-image-zoom-btn {
  position: absolute; top: 6px; left: 6px;
  width: 24px; height: 24px; line-height: 22px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.sb-image-thumb:hover .sb-image-zoom-btn { opacity: 1; }
.sb-image-zoom-btn:hover { background: rgba(30,30,30,0.85); }

/* ── Forms Manager (dashboard) ─────────────────────────────────────────── */
.fm-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border-2);
  margin-bottom: 16px;
}
.fm-tab {
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600; color: var(--text-dim);
  background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--font);
}
.fm-tab:hover { color: var(--white); }
.fm-tab-active { color: var(--yellow); border-bottom-color: var(--yellow); }

/* Actions tab */
.fm-actions-tab { padding: 4px 2px; }
.fm-hint { font-size: 0.82rem; color: var(--text-dim); margin: 4px 0 16px; line-height: 1.5; }
.fm-hint code {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px;
  padding: 1px 5px; font-size: 0.78rem; color: var(--yellow);
}
.fm-action-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.fm-action-add {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; font-size: 0.82rem; font-weight: 600; font-family: var(--font);
  color: var(--white); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fm-action-add:hover { border-color: var(--yellow); background: var(--surface-2, var(--surface)); }
.fm-action-icon { font-size: 1rem; line-height: 1; }
.fm-action-list { display: flex; flex-direction: column; gap: 12px; }
.fm-action-empty {
  padding: 28px; text-align: center; color: var(--text-dim); font-size: 0.85rem;
  border: 1px dashed var(--border-2); border-radius: 10px;
}
.fm-action-card {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
  padding: 14px 16px;
}
.fm-action-card.fm-action-off { opacity: 0.55; }
.fm-action-head { display: flex; align-items: center; gap: 10px; }
.fm-action-enable { display: inline-flex; align-items: center; cursor: pointer; }
.fm-action-title { flex: 1; font-weight: 600; font-size: 0.92rem; color: var(--white); }
.fm-action-remove {
  background: transparent; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.fm-action-remove:hover { color: #ff6b6b; background: rgba(255,107,107,0.08); }
.fm-action-hint { font-size: 0.78rem; color: var(--text-dim); margin: 6px 0 0; }
.fm-action-config { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.fm-act-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
.fm-act-field input, .fm-act-field textarea, .fm-act-field select {
  font-family: var(--font); font-size: 0.9rem; font-weight: 400;
  padding: 9px 11px; color: var(--white);
  background: var(--bg, rgba(0,0,0,0.2)); border: 1px solid var(--border-2); border-radius: 7px;
}
.fm-act-field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.fm-act-field input:focus, .fm-act-field textarea:focus, .fm-act-field select:focus {
  outline: none; border-color: var(--yellow);
}

/* Builder */
.fm-builder { display: grid; grid-template-columns: 200px 1fr; gap: 16px; min-height: 320px; }
.fm-palette {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 12px; position: sticky; top: 12px; align-self: start;
}
.fm-palette-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin-bottom: 10px;
}
.fm-palette-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fm-palette-row:last-child { margin-bottom: 0; }
.fm-palette-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 6px;
  color: var(--text); font-size: 0.82rem; cursor: grab;
  font-family: var(--font); text-align: left;
}
.fm-palette-item:active { cursor: grabbing; }
.fm-palette-item:hover { border-color: var(--yellow); background: var(--yellow-glow); color: var(--white); }
.fm-palette-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--surface-1); color: var(--text-dim);
  font-weight: 700; font-size: 0.85rem;
}
.fm-palette-label { flex: 1; }
.fm-palette-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 9px; background: var(--lavender-glow);
  color: var(--lavender); font-size: 0.68rem; font-weight: 700;
}
.fm-palette-group .fm-palette-icon { background: var(--lavender-glow); color: var(--lavender); }

.fm-canvas {
  background: var(--surface-1); border: 1px dashed var(--border-2); border-radius: 8px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  min-height: 280px;
}
.fm-canvas-empty {
  padding: 56px 24px; text-align: center;
  color: var(--text-dim); font-size: 0.88rem;
}

.fm-field {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 12px; transition: border-color 0.15s, box-shadow 0.15s;
}
.fm-field:hover { border-color: var(--lavender); }
.fm-field-dragging { opacity: 0.5; }
.fm-field-drop-before { box-shadow: 0 -3px 0 var(--yellow); }
.fm-field-drop-after  { box-shadow: 0  3px 0 var(--yellow); }

.fm-field-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fm-field-grip {
  font-size: 0.9rem; color: var(--text-faint); letter-spacing: -2px;
  cursor: grab; user-select: none; padding: 0 2px;
}
.fm-field-type-tag {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
  background: var(--lavender-glow); color: var(--lavender);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  white-space: nowrap;
}
.fm-field-label {
  flex: 1; min-width: 160px; padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--white); font-family: var(--font); font-size: 0.9rem; font-weight: 600;
}
.fm-field-req {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-dim); white-space: nowrap;
}
.fm-field-del {
  flex: 0 0 auto; padding: 4px 10px !important; font-size: 1rem !important;
}

.fm-field-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px;
}
.fm-field-meta label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.72rem; color: var(--text-dim);
}
.fm-field-meta input,
.fm-field-meta select {
  padding: 6px 8px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--text); font-family: var(--font); font-size: 0.82rem;
}
.fm-field-extra { grid-template-columns: 1fr; margin-top: 4px; }

.fm-field-options {
  margin-top: 10px; padding: 10px; border-top: 1px dashed var(--border-2);
}
.fm-field-options-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); margin-bottom: 6px;
}
.fm-field-opt-row {
  display: flex; gap: 6px; margin-bottom: 4px; align-items: center;
}
.fm-field-opt-row input {
  padding: 4px 8px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--text); font-family: var(--font); font-size: 0.8rem; flex: 1;
}
.fm-field-opt-del { padding: 2px 8px !important; font-size: 0.9rem !important; }
.fm-field-opt-add { margin-top: 6px; font-size: 0.78rem; padding: 4px 10px !important; }

/* Options tab */
.fm-options { display: flex; flex-direction: column; gap: 18px; }
.fm-opt-row { display: flex; flex-direction: column; gap: 6px; }
.fm-opt-row label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.85rem; color: var(--text); font-weight: 500;
}
.fm-opt-row input[type="text"],
.fm-opt-row input[type="datetime-local"],
.fm-opt-row textarea {
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--white); font-family: var(--font); font-size: 0.88rem;
  resize: vertical;
}
.fm-opt-toggles { padding: 6px 0; }
.fm-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: var(--text); cursor: pointer;
}
.fm-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--yellow); }
.fm-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-opt-hint { font-size: 0.78rem; color: var(--text-dim); }

/* Submissions tab */
.fm-submissions { display: flex; flex-direction: column; gap: 12px; }
.fm-sub-toolbar { display: flex; gap: 8px; }
.fm-sub-table { background: var(--surface-1); border: 1px solid var(--border-2); border-radius: 6px; overflow: auto; }
.fm-sub-tbl { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fm-sub-tbl th, .fm-sub-tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-2); }
.fm-sub-tbl th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); background: var(--surface); }
.fm-sub-row { cursor: pointer; }
.fm-sub-row:hover { background: var(--surface-2); }
.fm-sub-detail { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; }
.fm-sub-detail dt { font-weight: 600; color: var(--text-dim); }
.fm-sub-detail dd { margin: 0; color: var(--white); word-break: break-word; }

@media (max-width: 800px) {
  .fm-builder { grid-template-columns: 1fr; }
  .fm-palette { position: static; }
  .fm-field-meta { grid-template-columns: 1fr; }
}

/* ── Public Form widget ────────────────────────────────────────────────── */
/* Space the description off the form/button below it. */
.vs-form-section .vs-form-description { margin-bottom: 28px; }
.vs-form-section .vs-form {
  max-width: 540px; margin: 0 auto;
}
.vs-form-summary { color: var(--vs-text); font-size: 0.92rem; margin-bottom: 6px; }
.vs-form-field { display: flex; flex-direction: column; gap: 6px; }
.vs-form-label { font-size: 0.84rem; font-weight: 600; color: var(--vs-heading); }
.vs-form-req { color: var(--vs-primary); }
.vs-form-field input[type="text"],
.vs-form-field input[type="email"],
.vs-form-field input[type="tel"],
.vs-form-field input[type="number"],
.vs-form-field input[type="date"],
.vs-form-field select,
.vs-form-field textarea {
  padding: 10px 12px;
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  color: var(--vs-text); font-family: inherit; font-size: 0.95rem;
}
.vs-form-field input:focus,
.vs-form-field select:focus,
.vs-form-field textarea:focus {
  outline: none; border-color: var(--vs-primary, #f59e0b);
}
.vs-form-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--vs-text); cursor: pointer; }
.vs-form-radio-group, .vs-form-check-group { display: flex; flex-direction: column; gap: 6px; }
.vs-form-radio-group label, .vs-form-check-group label {
  display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--vs-text); cursor: pointer;
}
.vs-form-actions { display: flex; justify-content: center; margin-top: 6px; }
.vs-form-error { color: #ff6b6b; font-size: 0.85rem; padding: 8px 12px; background: rgba(255,107,107,0.08); border-radius: 4px; }
.vs-form-field-err {
  display: block; font-size: 0.78rem; color: #ff6b6b; margin-top: 4px;
}
.vs-form-field-err:empty { display: none; }
.vs-form-invalid { border-color: #ff6b6b !important; }
.vs-form-success {
  max-width: 540px; margin: 0 auto;
  padding: 32px 24px; text-align: center;
  background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); border-radius: 8px;
  color: var(--vs-text);
}

/* Modal layout */
.vs-form-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.vs-form-modal {
  background: var(--vs-bg, #14142a);
  border: 1px solid var(--vs-card-border);
  border-radius: 12px;
  max-width: 560px; width: calc(100% - 32px);
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.vs-form-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--vs-card-border);
  font-family: var(--vs-heading-font); font-weight: 700; color: var(--vs-heading);
}
.vs-form-modal-x {
  background: transparent; border: 0; color: var(--vs-text-dim, rgba(255,255,255,0.55));
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.vs-form-modal-x:hover { color: var(--vs-heading); }
.vs-form-modal-body { padding: 20px 22px 24px; overflow-y: auto; }

/* ── Crop modal (SB.cropFile) ────────────────────────────────────────── */
.sb-crop-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.sb-crop-modal {
  background: var(--surface-1, #1a1a2e); border: 1px solid var(--border-2, rgba(255,255,255,0.12));
  border-radius: 10px; max-width: 640px; width: calc(100% - 32px);
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.sb-crop-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-2, rgba(255,255,255,0.08));
  font-weight: 600; color: var(--white, #fff);
}
.sb-crop-x {
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sb-crop-x:hover { color: var(--white, #fff); }
.sb-crop-body { padding: 16px; min-height: 360px; max-height: 60vh; overflow: hidden; }
.sb-crop-img { max-width: 100%; max-height: 56vh; display: block; }
.sb-crop-footer {
  padding: 12px 16px; border-top: 1px solid var(--border-2, rgba(255,255,255,0.08));
  display: flex; justify-content: flex-end; gap: 8px;
}

.sb-page-item-child { padding-left: 22px; font-size: 0.84rem; color: var(--text-dim); }
.sb-page-item-child.active { padding-left: 20px; }
.sb-page-indent { color: var(--text-faint); font-size: 0.78rem; margin-right: 2px; }
.sb-page-item[draggable="true"] { cursor: grab; }
.sb-page-item[draggable="true"]:active { cursor: grabbing; }
.sb-page-item.sb-page-dragging { opacity: 0.45; }
.sb-page-item.sb-page-drop-before { box-shadow: inset 0 2px 0 var(--yellow); }
.sb-page-item.sb-widget-drop-target { background: rgba(196,160,224,0.18); box-shadow: inset 0 0 0 2px var(--lavender); }
.sb-page-add {
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--yellow);
  cursor: pointer;
  border: 1px dashed var(--border-2);
  border-radius: 6px;
  text-align: center;
}
.sb-page-add:hover { border-color: var(--yellow-dark); background: var(--yellow-glow); }
.sb-draft-badge {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--border-2);
  color: var(--text-dim);
  border-radius: 4px;
}
.sb-template-badge {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--lavender-glow);
  color: var(--lavender);
  border-radius: 4px;
  font-weight: 600;
}
.sb-templates-empty {
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
}
/* Widget-palette search box + category accordion — matches russwhite's builder
   (heroui/StratusUI input + accordion header look in the builder theme vars). */
.sb-widget-search-wrap { position: relative; margin: 4px 0 10px; }
.sb-widget-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); pointer-events: none;
}
.sb-widget-search {
  width: 100%; box-sizing: border-box; padding: 8px 12px 8px 33px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  color: var(--white); font-family: var(--font); font-size: 0.86rem;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.sb-widget-search::placeholder { color: var(--text-dim); }
.sb-widget-search:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-glow); }
.sb-cat-label {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  margin: 8px 0 2px; padding: 9px 12px; border: none; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; text-align: left; color: var(--text);
  font-family: var(--display, var(--font)); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px;
  transition: background 0.14s ease, color 0.14s ease;
}
.sb-cat-label:hover { background: var(--surface-2); color: var(--white); }
.sb-cat-label:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--yellow-glow); }
.sb-cat-label.open { color: var(--white); }
.sb-cat-chev {
  display: inline-flex; align-items: center; justify-content: center; width: 14px;
  font-size: 0.72rem; color: var(--text-dim); transition: color 0.14s ease;
}
.sb-cat-label.open .sb-cat-chev { color: var(--yellow); }
.sb-cat-count {
  margin-left: auto; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px;
}
.sb-cat-label.open .sb-cat-count { background: var(--yellow-glow); border-color: transparent; color: var(--yellow); }
.sb-widget-drag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 2px 0;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: grab;
  background: var(--surface-2);
  transition: all 0.1s;
}
.sb-widget-drag:hover { border-color: var(--yellow-dark); color: var(--white); transform: translateX(2px); }
.sb-widget-drag:active { cursor: grabbing; }

.sb-canvas { background: var(--bg); padding: 20px; }
.sb-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-sm);
}

/* Empty page state — invitation, not a form prompt */
.sb-blank {
  padding: 60px 20px 80px;
  text-align: center;
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 0%, var(--lavender-glow), transparent 60%),
    var(--surface);
  transition: all 0.2s;
}
.sb-blank.sb-drop-zone:hover, .sb-blank.dragover {
  border-color: var(--yellow);
  background:
    radial-gradient(ellipse at 50% 0%, var(--yellow-glow), transparent 60%),
    var(--surface);
}
.sb-blank-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--lavender);
  margin-bottom: 18px;
  border: 1px solid var(--border-2);
}
.sb-blank-title { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--white); margin-bottom: 8px; font-style: normal; }
.sb-blank-sub { font-size: 0.95rem; color: var(--text); margin-bottom: 6px; font-style: normal; }
.sb-blank-sub strong { color: var(--yellow); font-weight: 600; }
.sb-blank-hint { font-size: 0.82rem; color: var(--text-dim); font-style: normal; }
.sb-drop-zone { transition: all 0.15s; }
.sb-drop-gap {
  height: 8px;
  border-radius: 4px;
  margin: 4px 0;
  transition: all 0.1s;
}
.sb-drop-gap.active { height: 24px; background: var(--yellow-glow); border: 2px dashed var(--yellow); }
.sb-widget-block {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  margin: 4px 0;
  cursor: grab;
  transition: all 0.15s;
  overflow: hidden;
}
.sb-widget-block:hover { border-color: var(--lavender-dark); }
.sb-widget-block.sb-widget-selected { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-glow); }
/* Visibility: "hidden" widgets stay listed for editing but are dimmed + badged
   to signal they aren't rendered on the live site. */
.sb-widget-block.sb-widget-hidden { opacity: 0.5; }
.sb-widget-block.sb-widget-hidden .sb-widget-preview { filter: grayscale(1); }
.sb-widget-hidden-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bg); background: var(--text-faint, #8a8aa0);
  padding: 2px 7px; border-radius: 999px; margin-left: 8px;
}
.sb-widget-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
}
.sb-widget-icon { font-size: 1rem; }
.sb-widget-label { flex: 1; }
.sb-widget-action {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.1s;
}
.sb-widget-action:hover { color: var(--white); background: var(--border-2); }
.sb-widget-del:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.sb-widget-preview { padding: 0; color: var(--text); font-size: 0.85rem; line-height: 1.5; }

/* Editor previews — type-specific skeletons rendered into each widget block */
.sb-ep { padding: 16px 20px; color: var(--text); }
.sb-ep-section-h { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--white); margin: 0 0 10px; }
.sb-ep-h1 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--white); line-height: 1.15; margin-bottom: 6px; }
.sb-ep-h2 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--white); margin-bottom: 6px; }
.sb-ep-sub { font-size: 0.85rem; color: var(--text); margin-bottom: 10px; opacity: 0.9; }
.sb-ep-text { font-size: 0.85rem; color: var(--text); line-height: 1.55; }
.sb-ep-desc { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; }
.sb-ep-tag { position: absolute; top: 8px; right: 8px; padding: 3px 8px; background: rgba(0,0,0,0.5); color: var(--text-dim); font-size: 0.68rem; border-radius: 4px; }

.sb-ep-btn {
  display: inline-block;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--yellow), var(--lavender));
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  margin-top: 6px;
}

/* Hero */
.sb-ep-hero {
  position: relative;
  min-height: 160px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(150,61,151,0.25), rgba(242,210,100,0.12));
  background-color: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.sb-ep-hero-inner { position: relative; z-index: 1; max-width: 80%; }
.sb-ep-play, .sb-ep-play-big {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  z-index: 2;
}
.sb-ep-play-big { position: static; width: 56px; height: 56px; font-size: 1.2rem; margin: 0 auto; }

/* Generic grids */
.sb-ep-grid { display: grid; gap: 8px; }
.sb-ep-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sb-ep-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sb-ep-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sb-ep-grid-5 { grid-template-columns: repeat(5, 1fr); }
.sb-ep-grid-6 { grid-template-columns: repeat(6, 1fr); }
.sb-ep-grid-8 { grid-template-columns: repeat(4, 1fr); }
.sb-ep-grid-9 { grid-template-columns: repeat(3, 1fr); }
.sb-ep-grid-12 { grid-template-columns: repeat(4, 1fr); }
.sb-ep-cell {
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
}
/* Per-item CTA pill in the Media Collection canvas preview */
.sb-ep-vc-cta {
  position: absolute;
  left: 50%; bottom: 6px; transform: translateX(-50%);
  max-width: calc(100% - 8px);
  padding: 2px 8px;
  font-size: 0.6rem; font-weight: 700; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 999px;
  background: var(--yellow, #F2D264); color: var(--bg, #12122B);
  pointer-events: none;
}
.sb-ep-tile {
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

/* Event-style cards */
.sb-ep-card {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sb-ep-card-img { aspect-ratio: 3/4; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
.sb-ep-card-body { padding: 10px; }
.sb-ep-card-meta { font-size: 0.7rem; color: var(--lavender); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.sb-ep-card-title { font-size: 0.85rem; font-weight: 600; color: var(--white); }

.sb-ep-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  color: var(--text-faint);
  font-size: 0.7rem;
}

/* Person cards (entertainer / staff) */
.sb-ep-person {
  text-align: center;
  padding: 8px 4px;
}
.sb-ep-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-2), var(--bg));
  border: 1px solid var(--border-2);
  margin-bottom: 6px;
}
.sb-ep-person-name { font-size: 0.78rem; color: var(--white); font-weight: 600; }

/* Leaderboard preview (ranked bar rows) */
.sb-ep-leaderboard { display: flex; flex-direction: column; gap: 8px; }
.sb-ep-lb-row { display: flex; align-items: center; gap: 10px; }
.sb-ep-lb-rank { width: 16px; text-align: center; font-weight: 700; font-size: 0.75rem; color: var(--text-faint); flex-shrink: 0; }
.sb-ep-lb-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--surface-2), var(--bg)); border: 1px solid var(--border-2); flex-shrink: 0; }
.sb-ep-lb-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sb-ep-lb-bar { height: 100%; border-radius: 999px; background: var(--lavender); }
.sb-ep-lb-win .sb-ep-lb-rank { color: var(--yellow); }
.sb-ep-lb-win .sb-ep-lb-bar { background: var(--yellow); }

/* Menu list */
.sb-ep-menu-list { display: flex; flex-direction: column; gap: 6px; }
.sb-ep-menu-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-2);
  font-size: 0.85rem;
  color: var(--text);
}
.sb-ep-menu-row span:first-child { color: var(--white); }
.sb-ep-price { color: var(--yellow); font-weight: 600; }

/* VIP tier cards */
.sb-ep-tier { padding: 14px; text-align: center; }
.sb-ep-tier-name { font-family: var(--display); font-size: 0.95rem; font-weight: 700; color: var(--yellow); margin-bottom: 4px; }
.sb-ep-tier-desc { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 8px; }
.sb-ep-tier-price { font-size: 1rem; font-weight: 700; color: var(--white); }

/* Forms */
.sb-ep-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.sb-ep-input {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: capitalize;
}

/* FAQ */
.sb-ep-faq { display: flex; flex-direction: column; gap: 8px; }
.sb-ep-faq-row { padding: 8px 0; border-bottom: 1px solid var(--border-2); }
.sb-ep-faq-q { font-weight: 600; color: var(--white); font-size: 0.85rem; margin-bottom: 4px; }
.sb-ep-faq-a { font-size: 0.78rem; color: var(--text-dim); }

/* CTA banner */
.sb-ep-banner {
  padding: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(242,210,100,0.18), rgba(150,61,151,0.18));
  border: 1px solid var(--border-2);
  text-align: center;
}

/* Timeline */
.sb-ep-timeline { position: relative; padding: 12px 0; }
.sb-ep-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border-2); transform: translateX(-50%); }
.sb-ep-tl-row { position: relative; padding: 6px 0; display: grid; grid-template-columns: 1fr 14px 1fr; gap: 12px; align-items: center; }
.sb-ep-tl-l { direction: rtl; }
.sb-ep-tl-l > * { direction: ltr; }
.sb-ep-tl-year { font-family: var(--display); font-weight: 700; color: var(--yellow); font-size: 0.85rem; }
.sb-ep-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); justify-self: center; }
.sb-ep-tl-card { font-size: 0.85rem; color: var(--white); }

/* Press */
.sb-ep-press { display: flex; flex-direction: column; gap: 8px; }
.sb-ep-press-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-2); font-size: 0.85rem; }
.sb-ep-press-src { color: var(--white); font-weight: 600; }
.sb-ep-press-date { color: var(--text-dim); }

/* Showtimes */
.sb-ep-times { display: flex; flex-direction: column; gap: 6px; }
.sb-ep-time-row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border-2); }
.sb-ep-time { color: var(--yellow); font-family: var(--display); font-weight: 600; min-width: 80px; }
.sb-ep-act { color: var(--text); }

/* Info / hours */
.sb-ep-info-row { display: flex; gap: 12px; padding: 6px 0; align-items: center; font-size: 0.85rem; color: var(--text); }
.sb-ep-icon { width: 28px; text-align: center; font-size: 1rem; }
.sb-ep-map {
  margin-top: 10px;
  height: 100px;
  background: linear-gradient(135deg, var(--surface-2), var(--bg));
  border: 1px solid var(--border-2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  font-size: 0.78rem;
}
.sb-ep-map::before { content: '📍'; font-size: 1.4rem; }

/* Quote / testimonial */
.sb-ep-quote { padding: 14px; }
.sb-ep-stars { color: var(--yellow); margin-bottom: 6px; font-size: 0.85rem; }
.sb-ep-quote-text { font-size: 0.78rem; color: var(--text); font-style: italic; margin-bottom: 6px; }
.sb-ep-quote-name { font-size: 0.72rem; color: var(--text-dim); }

/* Social feed */
.sb-ep-social .sb-ep-cell { background: linear-gradient(135deg, var(--surface-2), var(--lavender-glow)); }

/* Video / 360 */
.sb-ep-video {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--surface-2), var(--bg));
  border: 1px solid var(--border-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sb-ep-360 .sb-ep-play-big { font-size: 0.8rem; }

/* App download */
.sb-ep-app { display: grid; grid-template-columns: 1fr 80px; gap: 16px; align-items: center; padding: 14px; background: var(--surface-2); border-radius: 8px; }
.sb-ep-app-badges { display: flex; gap: 6px; margin-top: 8px; }
.sb-ep-app-badges span { padding: 4px 8px; background: var(--bg); border-radius: 4px; font-size: 0.7rem; color: var(--text-dim); }
.sb-ep-phone { aspect-ratio: 9/19; background: linear-gradient(135deg, var(--bg), #000); border-radius: 12px; border: 2px solid var(--border-2); }

/* Floor plan */
.sb-ep-floor {
  height: 140px;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--bg) 10px, var(--bg) 20px);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

/* Recurring event banner */
.sb-ep-recurring {
  padding: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--surface-2), rgba(242,210,100,0.08));
  border: 1px solid var(--border-2);
  text-align: center;
}
.sb-ep-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--lavender-glow);
  color: var(--lavender);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Properties panel */
.sb-props-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-2);
}
.sb-prop-group { margin-bottom: 14px; }
/* Advanced → Padding: 4-up compact grid of numeric side inputs */
.sb-adv-pad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.sb-adv-pad-cell { display: flex; flex-direction: column; gap: 3px; }
.sb-adv-pad-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  text-align: center;
}
.sb-adv-pad-cell .sb-prop-input { text-align: center; padding-left: 4px; padding-right: 4px; }
.sb-prop-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
/* Builder taglist (token chips) — e.g. voting slugs */
.sb-taglist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 9px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px;
}
.sb-taglist-chips { display: contents; }
.sb-taglist-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600;
  line-height: 1; padding: 5px 6px 5px 10px; border-radius: 13px; text-transform: lowercase;
  background: rgba(196,160,224,0.16); color: var(--lavender); border: 1px solid rgba(196,160,224,0.35);
}
.sb-taglist-x { background: none; border: none; color: var(--lavender); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; opacity: 0.75; }
.sb-taglist-x:hover { opacity: 1; color: #fff; }
.sb-taglist-input { flex: 1; min-width: 110px; background: none; border: none; outline: none; color: var(--white); font-family: var(--font); font-size: 0.86rem; padding: 4px 2px; }

.sb-prop-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.1s;
}
.sb-prop-input:focus { border-color: var(--yellow-dark); }
.sb-prop-input[type="color"], .sb-prop-color { width: 48px; height: 32px; padding: 2px; cursor: pointer; }
textarea.sb-prop-input { font-family: var(--font); resize: vertical; }
.sb-prop-hint { font-size: 0.72rem; color: var(--text-faint); margin-top: 4px; }

/* Rich text (WYSIWYG) property field */
.sb-richtext {
  border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden; background: var(--bg);
}
.sb-rt-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 5px;
  background: var(--bg-2, rgba(255,255,255,0.03)); border-bottom: 1px solid var(--border-2);
}
.sb-rt-btn {
  min-width: 28px; height: 26px; padding: 0 7px;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--white); font-size: 0.78rem; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-rt-btn:hover { background: var(--border-2); border-color: var(--border-2); }
.sb-rt-editable {
  min-height: 160px; max-height: 460px; overflow-y: auto;
  padding: 12px 14px; color: var(--white); font-family: var(--font);
  font-size: 0.9rem; line-height: 1.6; outline: none;
}
.sb-rt-editable:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.sb-rt-editable:focus { box-shadow: inset 0 0 0 2px var(--yellow-dark); }
.sb-rt-editable h2 { font-size: 1.25rem; font-weight: 700; margin: 0.6em 0 0.3em; }
.sb-rt-editable h3 { font-size: 1.05rem; font-weight: 700; margin: 0.6em 0 0.3em; }
.sb-rt-editable p { margin: 0 0 0.7em; }
.sb-rt-editable ul, .sb-rt-editable ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.sb-rt-editable blockquote {
  margin: 0 0 0.7em; padding-left: 12px; border-left: 3px solid var(--yellow-dark);
  color: var(--text-faint); font-style: italic;
}
.sb-rt-editable a { color: var(--yellow-dark); }
/* Expand button pushed to the right edge of the toolbar */
.sb-rt-expand { margin-left: auto; }
/* Fullscreen lightbox editor */
.sb-rt-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.sb-rt-modal {
  display: flex; flex-direction: column;
  width: min(900px, 94vw); height: min(85vh, 900px);
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: 10px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.sb-rt-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border-2);
  background: var(--bg-2, rgba(255,255,255,0.03));
}
.sb-rt-modal-title { font-weight: 700; color: var(--white); font-size: 0.95rem; }
.sb-rt-modal-close {
  background: transparent; border: none; color: var(--white); opacity: 0.7;
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sb-rt-modal-close:hover { opacity: 1; }
.sb-rt-modal .sb-rt-toolbar { border-bottom: 1px solid var(--border-2); }
.sb-rt-editable-lg {
  flex: 1 1 auto; max-height: none; min-height: 0;
  padding: 24px clamp(20px, 6%, 64px); font-size: 1rem; line-height: 1.7;
}

/* Image upload field — used for any URL field that holds an image/video */
.sb-image-field { display: flex; flex-direction: column; gap: 8px; }
.sb-image-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg);
  border: 2px dashed var(--border-2);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-image-thumb:hover, .sb-image-thumb.dragover {
  border-color: var(--yellow);
  background: var(--yellow-glow);
}
.sb-image-thumb-empty { background: linear-gradient(135deg, var(--bg), var(--surface-2)); }
/* `contain` — show the full image at its natural aspect ratio inside the thumb box,
   so editors see the actual content (letterboxed where necessary) instead of a
   center-cropped thumbnail. The thumb container itself stays a fixed 16:9 so the
   image-field grid remains predictable. */
.sb-image-thumb-media {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  background: var(--bg);
}
.sb-image-thumb-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.82rem; pointer-events: none; }
.sb-image-thumb-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lavender-glow);
  color: var(--lavender);
  font-size: 1.4rem; font-weight: 300;
  line-height: 1;
}
.sb-image-thumb:hover .sb-image-thumb-icon { background: var(--yellow-glow); color: var(--yellow); }
.sb-image-actions { display: flex; align-items: center; gap: 6px; }
/* Upload state stays put and can run to two lines — it carries the filename and,
   for a video the web can't play, the reason. */
.sb-image-progress {
  font-size: 0.78rem; color: var(--text-dim); margin-left: auto;
  text-align: right; line-height: 1.35; max-width: 100%;
}
/* Shown when a video thumb fails to decode (a .mov in Chrome), so the slot reads
   as "holds a file we can't preview" rather than as empty. */
.sb-image-thumb-novideo {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 8px;
  text-align: center; font-size: 0.72rem; color: var(--text-dim);
  background: rgba(255,255,255,0.03); pointer-events: none;
}
.sb-image-thumb-novideo .sb-image-thumb-icon { font-size: 1.4rem; }
.sb-image-field-input { font-family: monospace; font-size: 0.78rem !important; }

/* Compact variant for site-settings (logo/favicon are smaller) */
.sb-image-field-site .sb-image-thumb { aspect-ratio: 3/1; max-height: 100px; }

/* Insert Field button + popover — for {{object.X}} binding on template pages */
.sb-insert-field {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: var(--lavender-glow);
  color: var(--lavender);
  border: 1px solid color-mix(in srgb, var(--lavender) 30%, transparent);
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}
.sb-insert-field:hover { background: var(--yellow-glow); color: var(--yellow); border-color: var(--yellow-dark); }
.sb-prop-label { display: flex; align-items: center; gap: 6px; }

.sb-insert-field-popover {
  width: 280px;
  max-height: 360px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 1100;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sb-insert-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
}
.sb-insert-field-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.sb-insert-field-close:hover { color: var(--white); }
.sb-insert-field-list { overflow-y: auto; }
.sb-insert-field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font);
}
.sb-insert-field-row:first-child { border-top: none; }
.sb-insert-field-row:hover { background: var(--lavender-glow); }
.sb-insert-field-label { font-size: 0.85rem; color: var(--white); font-weight: 600; }
.sb-insert-field-type { font-size: 0.65rem; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.5px; padding-top: 4px; font-weight: 700; }
.sb-insert-field-hint { grid-column: 1 / -1; font-size: 0.72rem; color: var(--text-dim); font-style: italic; }

/* Dynamic multi-select (checkbox list) — used for picker-style multi filters */
.sb-dynamic-multi {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  overflow: hidden;
}
.sb-dynamic-multi-loading, .sb-dynamic-multi-empty { padding: 12px; color: var(--text-dim); font-size: 0.82rem; text-align: center; }
.sb-dynamic-multi-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
}
.sb-dynamic-multi-actions button {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
}
.sb-dynamic-multi-actions button:hover { border-color: var(--yellow-dark); color: var(--white); }
.sb-dynamic-multi-count { margin-left: auto; font-size: 0.72rem; color: var(--text-dim); }
.sb-dynamic-multi-list { max-height: 220px; overflow-y: auto; }
.sb-dynamic-multi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
}
.sb-dynamic-multi-row:hover { background: var(--surface-2); color: var(--white); }
.sb-dynamic-multi-row input { cursor: pointer; accent-color: var(--yellow); }

.sb-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.sb-toggle input { opacity: 0; width: 0; height: 0; }
.sb-toggle span {
  position: absolute;
  inset: 0;
  background: var(--border-2);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.sb-toggle span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.15s;
}
.sb-toggle input:checked + span { background: var(--yellow-dark); }
.sb-toggle input:checked + span::after { transform: translateX(16px); }

/* Settings panel — themes, font pairs, colors */
.sb-settings-panel h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 4px 0 10px;
}
.sb-theme-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin: 16px 0 6px;
}
.sb-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.sb-theme-card {
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
}
.sb-theme-card:hover { border-color: var(--lavender); transform: translateY(-1px); }
.sb-theme-card.sb-theme-active { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-glow); }
.sb-theme-mockup {
  position: relative;
  height: 90px;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.sb-theme-mock-h { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.sb-theme-mock-p { font-size: 0.7rem; opacity: 0.85; margin-top: 4px; }
.sb-theme-mock-btn { position: absolute; bottom: 10px; right: 12px; width: 36px; height: 12px; }
.sb-theme-name { font-size: 0.85rem; font-weight: 600; color: var(--white); padding: 0 4px; }
.sb-theme-fonts { font-size: 0.65rem; color: var(--text-faint); padding: 2px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Legacy swatch row (used in setup screen — keep working) */
.sb-theme-swatches { display: flex; gap: 4px; margin-bottom: 8px; }
.sb-theme-swatches span { flex: 1; height: 20px; border-radius: 4px; }

.sb-fontpair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.sb-fontpair-card {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.sb-fontpair-card:hover { border-color: var(--lavender); }
.sb-fontpair-card.sb-theme-active { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-glow); }
.sb-fontpair-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 6px; }
.sb-fontpair-sample { font-size: 1.1rem; font-weight: 700; color: var(--white); line-height: 1.2; }
.sb-fontpair-sample-body { font-size: 0.82rem; color: var(--text); margin-top: 2px; }

.sb-color-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.sb-color-input { width: 36px; height: 28px; border: 1px solid var(--border-2); border-radius: 4px; cursor: pointer; padding: 0; }
.sb-color-row span { font-size: 0.85rem; color: var(--text); }

.sb-domain-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; margin: 6px 0; font-size: 0.85rem; color: var(--white); }
.sb-badge { padding: 2px 8px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; background: var(--lavender-glow); color: var(--lavender); border-radius: 4px; }
/* Read-only CloudFront details in the Domains settings tab */
.sb-cf-readonly { border-left: 2px solid var(--lavender-glow); padding-left: 12px; margin-top: 4px; }
.sb-cf-readonly .sb-prop-input[disabled] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; opacity: 0.8; cursor: default; }
.sb-cf-liveurl { display: inline-block; color: var(--lavender); font-size: 0.85rem; word-break: break-all; }
.sb-cf-liveurl:hover { text-decoration: underline; }

/* Modal */
.sb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.sb-modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.sb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-2); font-family: var(--display); font-weight: 700; color: var(--white); font-size: 1.05rem; }
.sb-modal-close { background: transparent; border: none; color: var(--text-dim); font-size: 1.4rem; cursor: pointer; padding: 0 4px; }
.sb-modal-close:hover { color: var(--white); }
.sb-modal-body { padding: 20px; overflow-y: auto; }
.sb-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sb-page-option { padding: 12px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.sb-page-option:hover { border-color: var(--yellow-dark); background: var(--bg); }

/* Toolbar undo/redo icon buttons */
.sb-icon-btn { font-size: 1.05rem; line-height: 1; padding: 6px 10px; min-width: 34px; }
.sb-icon-btn:disabled { opacity: 0.35; cursor: default; }
.sb-icon-btn:disabled:hover { background: transparent; }

/* Version-history modal list */
.sb-history-list { display: flex; flex-direction: column; gap: 8px; }
.sb-history-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 8px;
}
.sb-history-row:hover { border-color: var(--yellow-dark); }
.sb-history-when { font-weight: 600; color: var(--white); font-size: 0.92rem; }
.sb-history-detail { font-size: 0.78rem; opacity: 0.6; margin-top: 2px; }
.sb-history-latest {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--yellow-dark) 26%, transparent); color: var(--yellow-dark);
}
.sb-history-restore { flex: none; }

/* Loading state */
.sb-loading { text-align: center; padding: 120px 40px; color: var(--text-dim); font-size: 0.95rem; font-family: var(--font); }

/* Wide dashboard content (events editor uses full width) */
.dash-content-wide { max-width: 1500px; }

/* Events editor */
.ee-layout { display: grid; grid-template-columns: 360px 1fr; gap: 16px; min-height: 600px; }
.ee-list-pane { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 12px; max-height: calc(100vh - 220px); overflow-y: auto; }
.ee-edit-pane { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 24px; max-height: calc(100vh - 220px); overflow-y: auto; }
.ee-list-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
/* Full-width toolbar sitting ABOVE the two-column layout — gives the role
   filter + search room to breathe without being clipped by the list pane. */
.ee-toolbar-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ee-toolbar-bar .ee-search { flex: 1 1 220px; min-width: 200px; max-width: 360px; }
.ee-toolbar-bar #en-type-filter, .ee-toolbar-bar #se-status-filter { flex: 0 0 auto; min-width: 160px; }
.ee-toolbar-bar #en-new, .ee-toolbar-bar #se-new, .ee-toolbar-bar #ee-new { margin-left: auto; }
.sd-status-toggle { display:flex; border:1px solid var(--border-2); border-radius:6px; overflow:hidden; flex-shrink:0; }
.sd-stbtn { background:none; border:none; border-right:1px solid var(--border-2); color:var(--text-dim); cursor:pointer; font-size:.78rem; padding:6px 14px; transition:background .15s; white-space:nowrap; font-family:var(--font); }
.sd-stbtn:last-child { border-right:none; }
.sd-stbtn:hover { background:var(--surface-2); color:var(--white); }
.sd-stbtn.sd-stbtn-on { background:var(--lavender); color:#111; font-weight:600; }
.ee-search { flex: 1; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.85rem; font-family: var(--font); }
.ee-list { display: flex; flex-direction: column; gap: 4px; }
.ee-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; transition: background 0.15s; align-items: center; }
.ee-row--flat { grid-template-columns: 1fr; }
.ee-row:hover { background: var(--surface-2); }
.ee-row-active { background: var(--lavender-glow); }
.ee-row-sub { font-size: 0.78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px; }
#se-list-rows .ee-row { grid-template-columns: 18px 56px 1fr; }
.se-drag-handle { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.9rem; cursor: grab; line-height: 1; opacity: 0.5; transition: opacity 0.1s; user-select: none; }
.se-drag-handle:hover { opacity: 1; color: var(--white); }
.ee-row.se-row-dragging { opacity: 0.4; }
.ee-row.se-row-drop-before { box-shadow: 0 -2px 0 var(--yellow); }
.ee-row.se-row-drop-after  { box-shadow: 0 2px 0 var(--yellow); }
.ee-row-thumb { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--surface-2); flex: 0 0 auto; }
.ee-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Event / series list thumbnails are portrait (4:5) — they prioritize the
   portrait crop and the image scales to fill the frame (object-fit: cover above). */
.ee-row-thumb-portrait { width: 48px; height: 60px; }
.ee-row-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.85rem; }
.ee-row-title { font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.ee-row-meta { font-size: 0.75rem; color: var(--text-dim); }
.ee-gallery-badge { color: var(--yellow-dark); font-weight: 600; }

.ee-empty { padding: 80px 20px; text-align: center; color: var(--text-dim); }
.ee-edit-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-2); }
.ee-edit-title { flex: 1; min-width: 0; margin: 0; font-size: 1.1rem; font-weight: 700; font-family: var(--display); color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-name-input { width: 100%; padding: 10px 12px; background: transparent; border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 1rem; font-weight: 600; font-family: var(--display); }
.ee-name-input:hover { border-color: var(--border-2); }
.ee-name-input:focus { border-color: var(--yellow-dark); outline: none; background: var(--surface-2); }
/* AI Assist as a full-width action above name/summary/description */
.ee-ai-row { display: flex; }
.ee-ai-btn-block { align-self: stretch; width: 100%; margin: 0; padding: 9px 14px; font-size: 0.82rem; }
.ee-actions { display: flex; align-items: center; gap: 12px; }
.ee-save-status { font-size: 0.78rem; color: var(--text-dim); min-width: 60px; }
.ee-save-error { color: #f55; }
.ee-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }
.ee-field { display: flex; flex-direction: column; gap: 6px; }
.ee-field-full { grid-column: span 2; }
.ee-field label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.ee-field input, .ee-field select, .ee-field textarea { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.88rem; font-family: var(--font); }
.ee-field input:focus, .ee-field select:focus, .ee-field textarea:focus { border-color: var(--yellow-dark); outline: none; }
.ee-section-h { font-family: var(--display); font-size: 1rem; color: var(--white); margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-2); }
.ee-section-sub { font-family: var(--font); font-size: 0.78rem; font-weight: 400; color: var(--text-dim); }
/* Default + Staged image rails share the same 5 columns so the staged zones
   line up directly under their primaries. align-items:start keeps each zone
   pinned to the top of its (aspect-driven) cell. */
.ee-image-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 8px; align-items: start; }
.ee-image-grid-staged { margin-top: 4px; }
.ee-image-block { display: flex; flex-direction: column; gap: 6px; }
.ee-image-block label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.ee-image-size-hint { display: block; font-size: 0.68rem; font-weight: 400; color: var(--text-faint); text-transform: none; letter-spacing: 0; margin-top: 2px; }
/* AI Assist button above the description rich-text editor */
.ee-desc-wrap { display: flex; flex-direction: column; }
.ee-ai-btn { align-self: flex-end; margin-bottom: 6px; padding: 4px 11px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--lavender, #C4A0E0); border-radius: 6px; background: rgba(196,160,224,0.12); color: var(--lavender, #C4A0E0); cursor: pointer; transition: all 0.15s; }
.ee-ai-btn:hover { background: var(--lavender, #C4A0E0); color: var(--bg, #12122B); }
.ee-ai-btn:disabled { opacity: 0.55; cursor: default; }
/* Each drop zone takes the aspect ratio of the image it targets. */
.ee-image-block .sb-image-field { gap: 4px; margin: 0; }
.ee-image-block .sb-image-thumb { height: auto; }
.ee-ar-1    .sb-image-thumb { aspect-ratio: 1 / 1; }
.ee-ar-4-5  .sb-image-thumb { aspect-ratio: 4 / 5; }
.ee-ar-16-9 .sb-image-thumb { aspect-ratio: 16 / 9; }
.ee-ar-9-16 .sb-image-thumb { aspect-ratio: 9 / 16; max-height: 220px; }
.ee-image-block .sb-image-thumb-hint { font-size: 0.64rem; gap: 3px; }
.ee-image-block .sb-image-thumb-icon { width: 26px; height: 26px; font-size: 1.1rem; }
/* Blank primary-image slot whose parent series supplies the artwork. The image is
   shown at the slot's own aspect ratio so the editor reads like the art is there,
   while the event's field stays empty (an event value would override the series
   and stop tracking it). */
.ee-inherit-hint { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 6px; padding: 6px; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: 6px; font-size: 0.72rem; }
.ee-inherit-thumb { width: 100%; height: auto; object-fit: cover; border-radius: 4px; opacity: 0.75; }
.ee-ar-1    .ee-inherit-thumb { aspect-ratio: 1 / 1; }
.ee-ar-4-5  .ee-inherit-thumb { aspect-ratio: 4 / 5; }
.ee-ar-16-9 .ee-inherit-thumb { aspect-ratio: 16 / 9; }
.ee-ar-9-16 .ee-inherit-thumb { aspect-ratio: 9 / 16; max-height: 220px; }
.ee-inherit-meta { display: flex; flex-direction: column; }
.ee-inherit-label { color: var(--text-dim); text-transform: uppercase; font-weight: 600; letter-spacing: 0.4px; font-size: 0.66rem; }
.ee-inherit-name { color: var(--white); font-size: 0.78rem; margin-top: 1px; }

.ee-gallery-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ee-gallery-item { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.ee-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ee-gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity 0.18s; }
.ee-gallery-item:hover .ee-gallery-overlay { opacity: 1; }
/* Per-image gallery tags: thumbnail on top, tokenized tag field below.
   Overrides the clipped tile so the tag editor is visible under the image.
   Thumbnails size-to-fit (contain, no crop) inside a portrait 4:5 frame — event
   flyers are usually portrait, so this shows them whole; landscape images
   letterbox within the same portrait frame for a tidy uniform grid. */
.ee-gallery-item { aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; }
.ee-gallery-item > img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; background: var(--surface-2); border-radius: 8px; display: block; }
.ee-gallery-overlay { inset: 0; bottom: auto; height: auto; aspect-ratio: 4/5; border-radius: 8px; }
.ee-gallery-actions { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.ee-gallery-tags.en-tagedit { margin-top: 6px; padding: 5px 7px; }
.ee-gallery-tags .en-tagedit-input { min-width: 50px; font-size: 0.78rem; padding: 2px; }
.ee-gallery-tags .en-tagedit-chip { font-size: 0.68rem; padding: 3px 5px 3px 8px; }
.ee-gal-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ee-gal-btn:hover { background: var(--yellow-dark); color: #000; }
.ee-gal-btn-danger:hover { background: #f55; color: #fff; }
.ee-gallery-add { border-radius: 8px; margin-bottom: 12px; }
/* Compact the empty-state drop zone — it spans 100% and defaults to 16:9 which is huge */
.ee-gallery-add:not(.ee-gallery-add-tile) .sb-image-thumb { aspect-ratio: unset; height: 64px; }
.ee-gallery-add:not(.ee-gallery-add-tile) .sb-image-field-input,
.ee-gallery-add:not(.ee-gallery-add-tile) .sb-image-actions { display: none; }
/* Once images exist, the add field is a compact 1:1 tile inside the gallery
   grid (matching thumbnails) instead of a full-width drop zone above it. */
.ee-gallery-add-tile { margin-bottom: 0; }
.ee-gallery-add-tile .sb-image-field { gap: 0; margin: 0; }
.ee-gallery-add-tile .sb-image-thumb { aspect-ratio: 1/1; }
.ee-gallery-add-tile .sb-image-field-input,
.ee-gallery-add-tile .sb-image-actions { display: none; }
.ee-gallery-dropzone { border: 2px dashed var(--border-2); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ee-gallery-dropzone.dragover { border-color: var(--yellow); background: rgba(242,210,100,0.06); }
.ee-gallery-dz-label { font-size: 0.82rem; color: var(--text-dim); }
.ee-gallery-dz-pick { color: var(--yellow); text-decoration: underline; cursor: pointer; }
.ee-gallery-dz-status { margin-top: 6px; font-size: 0.75rem; color: var(--text-dim); min-height: 1em; }
.ee-image-library-panel { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.07); }

.ee-staged-row { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.ee-staged-label { font-size: 0.66rem; font-weight: 600; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.5px; }
.ee-staged-gallery-heading { font-size: 0.7rem; font-weight: 600; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.ee-staged-gallery-heading span { text-transform: none; font-weight: 400; opacity: 0.7; }
.ee-staged-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin-bottom: 12px; background: rgba(196, 160, 224, 0.12); border: 1px solid rgba(196, 160, 224, 0.3); border-radius: 8px; font-size: 0.82rem; color: var(--lavender); }
.ee-section-staged { color: var(--lavender); }
.sb-btn-sm { padding: 4px 12px; font-size: 0.78rem; }

.se-events-summary { margin-top: 28px; padding: 14px 16px; background: var(--surface-2); border-radius: 8px; font-size: 0.85rem; color: var(--text-dim); }

/* Event-series → Dates tab */
.se-dates-toolbar { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.se-dates-count { font-size: 0.8rem; color: var(--text-dim); }
.se-dates-table th.se-sortable { user-select: none; }
.se-dates-table th.se-sortable:hover { color: var(--white); }
.se-date-row:hover td { background: var(--surface-2); }
.se-date-past td { opacity: 0.5; }

/* ── Tables & Floor Plans admin (Reservations module) ───────────────────── */
.ee-list-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.ee-list-row:hover { background: var(--surface-2); }
.ee-list-row.active { background: var(--lavender-glow); }
.ee-list-row-name { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.ra-pill { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; color: #111; background: var(--lavender); padding: 2px 7px; border-radius: 10px; }
.ra-pill-off { background: color-mix(in srgb, var(--text-dim, #9aa) 45%, transparent); color: #fff; }
.ra-pill-on { background: #3ecf8e; color: #06231a; }
.ra-pill-warn { background: var(--neon-yellow, #F2D264); color: #2a2205; }

/* Inventory & Procurement — new-item button, segmented control, PO line items */
.ee-toolbar-bar #vn-new, .ee-toolbar-bar #po-new, .ee-toolbar-bar #inv-new { margin-left: auto; }
.ra-seg { display: inline-flex; border: 1px solid var(--border-2, rgba(255,255,255,0.12)); border-radius: 8px; overflow: hidden; }
.ra-seg-btn { background: transparent; border: none; color: var(--text-dim, #9aa); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.ra-seg-btn + .ra-seg-btn { border-left: 1px solid var(--border-2, rgba(255,255,255,0.12)); }
.ra-seg-btn.on { background: var(--lavender-glow, rgba(196,160,224,0.18)); color: var(--white, #fff); }

.po-line { display: grid; grid-template-columns: 108px 1fr 72px 92px 88px 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.po-line select, .po-line input { width: 100%; }
.po-line-total { font-size: 0.85rem; font-weight: 600; color: var(--white, #fff); text-align: right; }
@media (max-width: 640px) { .po-line { grid-template-columns: 1fr 1fr; } .po-line-item { grid-column: 1 / -1; } }
.po-totals { margin: 12px 0; padding: 12px 14px; border-radius: 8px; background: var(--surface-2, rgba(255,255,255,0.04)); max-width: 320px; margin-left: auto; }
.po-total-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-dim, #9aa); padding: 2px 0; }
.po-total-grand { font-size: 1rem; font-weight: 700; color: var(--white, #fff); border-top: 1px solid var(--border-2, rgba(255,255,255,0.12)); margin-top: 6px; padding-top: 8px; }
.ra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.ra-f { display: flex; flex-direction: column; gap: 5px; }
.ra-f label { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.ra-f input, .ra-f select { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.86rem; font-family: var(--font); }
.ra-f input:focus, .ra-f select:focus { border-color: var(--yellow-dark); outline: none; }
.ra-check { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--white); cursor: pointer; }
.ra-check input { width: auto; }
.ra-img { display: flex; flex-direction: column; gap: 8px; }
.ra-img img { max-width: 100%; max-height: 240px; border-radius: 8px; border: 1px solid var(--border-2); display: block; }
.ra-img-empty { padding: 28px; text-align: center; color: var(--text-dim); background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: 8px; font-size: 0.82rem; }
.ra-img-actions { display: flex; gap: 8px; }
.ra-img-drop { position: relative; border-radius: 8px; transition: box-shadow .12s ease, background .12s ease; }
.ra-img-dropnote { display: none; }
.ra-img-drop.ra-img-dragover { box-shadow: 0 0 0 2px var(--accent, #F2D264); background: rgba(242,210,100,0.06); }
.ra-img-drop.ra-img-dragover .ra-img-dropnote {
  display: flex; align-items: center; justify-content: center;
  position: absolute; inset: 0; z-index: 2; border-radius: 8px;
  background: rgba(18,18,43,0.72); color: var(--accent, #F2D264);
  font-size: 0.9rem; font-weight: 600; pointer-events: none;
}
.ra-img-drop.ra-img-uploading { opacity: 0.6; pointer-events: none; }
.ra-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-2); }
.ra-sec-head h3 { font-family: var(--display); font-size: 1rem; color: var(--white); margin: 0; }
.ra-table { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.ra-table-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ra-table-title { font-weight: 700; color: var(--white); font-size: 0.95rem; }
.ra-table-hint { flex: 1; font-size: 0.76rem; color: var(--yellow); }
.ra-table-active { margin-left: auto; }
.ra-avail { margin-top: 6px; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-2); border-radius: 8px; }
.ra-avail-head { font-size: 0.8rem; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.ra-dim { font-weight: 400; color: var(--text-dim); }
.ra-avail-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ra-avail-dates { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ra-avail-dates-head { margin-top: 16px; }
.ra-date-field { min-width: 180px; flex: 0 0 auto; }
.ra-date-field .sui-date-wrap { width: 180px; }
.ra-avail-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ra-day { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 5px 4px; border: 1px solid var(--border-2); border-radius: 6px; font-size: 0.72rem; color: var(--text-dim); cursor: pointer; user-select: none; }
.ra-day input { display: none; }
.ra-day.on { background: var(--lavender); color: #111; font-weight: 700; border-color: var(--lavender); }
.ra-time { font-size: 0.76rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
.ra-time input { padding: 5px 7px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-family: var(--font); }
.ra-row-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: 4px 8px; }
.ra-row-del:hover { color: #f55; }
@media (max-width: 900px) { .ra-grid { grid-template-columns: repeat(2, 1fr); } }
.ra-f-full { margin-bottom: 16px; }
.ra-f textarea { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.86rem; font-family: var(--font); resize: vertical; }
.ra-f textarea:focus { border-color: var(--yellow-dark); outline: none; }

/* Table photo gallery */
.ra-gallery { margin-top: 8px; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-2); border-radius: 8px; }
.ra-gallery-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ra-gallery-empty { font-size: 0.78rem; color: var(--text-dim); padding: 6px 0; }
.ra-thumb { position: relative; width: 96px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-2); background: var(--surface-2); }
.ra-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-thumb-badge { position: absolute; left: 4px; bottom: 4px; font-size: 0.62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--yellow); color: #111; }
.ra-thumb-del, .ra-thumb-act { position: absolute; top: 3px; width: 20px; height: 20px; border: none; border-radius: 50%; cursor: pointer; font-size: 0.72rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.ra-thumb-del { right: 3px; background: rgba(0,0,0,0.6); color: #fff; }
.ra-thumb-del:hover { background: #c33; }
.ra-thumb-act { left: 3px; background: rgba(0,0,0,0.6); color: var(--yellow); }
.ra-thumb-act:hover { background: rgba(0,0,0,0.85); }

/* Table view switcher (list / cards / map) */
.ra-viewbar { display: inline-flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; }
.ra-viewbtn { padding: 7px 16px; background: var(--surface-2); border: none; border-right: 1px solid var(--border-2); color: var(--text-dim); font-size: 0.8rem; font-weight: 600; font-family: var(--font); cursor: pointer; }
.ra-viewbtn:last-child { border-right: none; }
.ra-viewbtn.active { background: var(--lavender); color: #111; }
.ra-viewbtn:not(.active):hover { color: var(--white); }

/* List view */
.ra-tlist { display: flex; flex-direction: column; gap: 6px; }
.ra-trow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: 8px; background: rgba(255,255,255,0.02); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ra-trow:hover { border-color: var(--lavender); background: rgba(196,160,224,0.06); }
.ra-trow.off { opacity: 0.55; }
.ra-trow-thumb { flex: 0 0 52px; height: 40px; border-radius: 5px; background-size: cover; background-position: center; background-color: var(--surface-2); }
.ra-trow-thumb-empty { border: 1px dashed var(--border-2); }
.ra-trow-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ra-trow-name { font-weight: 600; color: var(--white); font-size: 0.9rem; }
.ra-trow-sub { font-size: 0.76rem; color: var(--text-dim); }
.ra-trow-go { font-size: 0.8rem; color: var(--lavender); font-weight: 600; white-space: nowrap; }

/* Card view */
.ra-tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ra-tcard { border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.02); cursor: pointer; transition: border-color 0.12s, transform 0.1s; }
.ra-tcard:hover { border-color: var(--lavender); transform: translateY(-1px); }
.ra-tcard.off { opacity: 0.55; }
.ra-tcard-photo { height: 110px; background-size: cover; background-position: center; background-color: var(--surface-2); }
.ra-tcard-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.74rem; border-bottom: 1px dashed var(--border-2); }
.ra-tcard-body { padding: 10px 12px; }
.ra-tcard-name { font-weight: 700; color: var(--white); font-size: 0.92rem; }
.ra-tcard-label { font-size: 0.78rem; color: var(--text-dim); margin-top: 1px; }
.ra-tcard-meta { font-size: 0.74rem; color: var(--text-dim); margin-top: 4px; text-transform: capitalize; }
.ra-tcard-price { font-size: 0.78rem; color: var(--yellow); margin-top: 4px; }

/* Room map view */
.ra-map-wrap { display: flex; flex-direction: column; gap: 8px; }
.ra-map { position: relative; width: 100%; background-size: cover; background-position: center; border: 1px solid var(--border-2); border-radius: 10px; background-color: var(--surface-2); }
.ra-map-blank { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; }
.ra-mark { position: absolute; transform: translate(-50%, -50%); min-width: 30px; height: 30px; padding: 0 6px; border-radius: 16px; border: 2px solid #111; background: var(--lavender); color: #111; font-size: 0.74rem; font-weight: 800; cursor: grab; touch-action: none; box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: transform 0.1s, box-shadow 0.1s; }
.ra-mark:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 2; }
.ra-mark.off { background: var(--text-dim); opacity: 0.7; }
.ra-mark.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.2); z-index: 3; box-shadow: 0 6px 16px rgba(0,0,0,0.55); transition: none; }
.ra-mark.saving { opacity: 0.6; }
.ra-mark.saved { box-shadow: 0 0 0 3px var(--yellow); }
/* Image markers: the table's own top-down graphic, sized over the floor plan */
.ra-mark-img { background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; border: none; border-radius: 6px; padding: 0; box-shadow: none; }
.ra-mark-img .ra-mark-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.7rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); pointer-events: none; }
.ra-map-hint { font-size: 0.76rem; color: var(--text-dim); }
.ra-map-note { font-size: 0.76rem; color: var(--text-dim); }

/* Click-to-edit modal */
.ra-modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 4000; overflow-y: auto; }
.ra-modal { position: relative; width: 100%; max-width: 760px; background: var(--surface, #1a1a32); border: 1px solid var(--border-2); border-radius: 12px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.ra-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--white); font-size: 0.95rem; cursor: pointer; z-index: 1; }
.ra-modal-close:hover { background: #c33; }
.ra-modal-body .ra-table { border: none; padding: 0; margin: 0; background: none; }

/* ── Staff Reservation Desk (rd-) ───────────────────────────────────────── */
.rd-toolbar { gap: 10px; flex-wrap: wrap; }
.rd-filter-sel, .rd-filter-date, .rd-filter-q { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.85rem; font-family: var(--font); }
.rd-filter-q { flex: 1 1 220px; min-width: 180px; max-width: 340px; }
.rd-toolbar-spacer { flex: 1; }
.rd-row { gap: 10px; }
.rd-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-row-meta { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-status { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.rd-status.rd-pending { background: rgba(242,210,100,0.16); color: var(--yellow); }
.rd-status.rd-seated  { background: rgba(120,220,150,0.16); color: #7fe0a0; }
.rd-status.rd-done    { background: rgba(196,160,224,0.16); color: var(--lavender); }
.rd-status.rd-bad     { background: rgba(255,107,107,0.16); color: #ff8b8b; }
.rd-price { margin: 8px 0 18px; padding: 14px 16px; background: rgba(196,160,224,0.06); border: 1px solid var(--border-2); border-radius: 10px; }
.rd-price-head { font-size: 0.8rem; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.rd-price-head .ra-dim { margin-left: 8px; }
.rd-price .ra-grid { margin-bottom: 6px; }
.rd-price-note { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }
.rd-actions-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 24px; }
.rd-actions-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--border-2); margin: 0 4px; }

/* Party guests (R2) */
.rd-guests { margin: 4px 0 18px; padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-2); border-radius: 10px; }
.rd-guests-head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--white); margin-bottom: 10px; flex-wrap: wrap; }
.rd-guests-actions { margin-left: auto; display: flex; gap: 6px; }
.rd-guests-rows { display: flex; flex-direction: column; gap: 8px; }
.rd-guest-row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto auto; gap: 8px; align-items: center; }
.rd-guest-row input[type=text], .rd-guest-row input[type=tel], .rd-guest-row input[type=email] { padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.84rem; font-family: var(--font); }
.rd-g-mkt { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); cursor: pointer; }
.rd-g-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.95rem; padding: 4px 8px; }
.rd-g-del:hover { color: #f55; }
@media (max-width: 720px) { .rd-guest-row { grid-template-columns: 1fr 1fr; } }
.rd-issue-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-2); font-size: 0.86rem; color: var(--white); cursor: pointer; }
.rd-issue-toggle input { margin-top: 2px; flex: 0 0 auto; }

/* Unified ticketing calendar (tc-) */
.tc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-range { font-weight: 600; color: var(--white); font-size: 0.86rem; }
.tc-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tc-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 11px; }
.tc-free { background: rgba(110,210,140,0.18); color: #7fe0a0; border: 1px solid rgba(110,210,140,0.4); }
.tc-cover { background: rgba(242,210,100,0.16); color: var(--yellow); border: 1px solid rgba(242,210,100,0.4); }
.tc-event { background: rgba(196,160,224,0.18); color: var(--lavender); border: 1px solid rgba(196,160,224,0.4); }
.tc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tc-day { background: rgba(255,255,255,0.02); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px; min-height: 130px; display: flex; flex-direction: column; }
.tc-day-head { display: flex; align-items: baseline; justify-content: space-between; }
.tc-dow { font-weight: 700; color: var(--white); font-size: 0.84rem; }
.tc-md { font-size: 0.72rem; color: var(--text-dim); }
.tc-hours { font-size: 0.72rem; color: var(--text-dim); margin: 2px 0 8px; }
.tc-blocks { display: flex; flex-direction: column; gap: 6px; }
.tc-block { border-radius: 7px; padding: 7px 8px; background: var(--surface-2); border-left: 3px solid var(--border-2); }
.tc-block-event { border-left-color: var(--lavender); }
.tc-block-access { border-left-color: var(--yellow); }
.tc-block-free { border-left-color: rgba(110,210,140,0.6); }
.tc-block-time { font-size: 0.7rem; color: var(--text-dim); }
.tc-block-name { font-size: 0.8rem; color: var(--white); font-weight: 600; margin-top: 1px; }
.tc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tc-muted { font-size: 0.7rem; color: var(--text-dim); margin-top: 3px; }
.tc-draft { opacity: 0.72; }
.tc-draft-tag { font-size: 0.64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 4px; padding: 0 4px; }
.tc-recip { color: var(--lavender); font-weight: 700; }
@media (max-width: 900px) { .tc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tc-grid { grid-template-columns: 1fr; } }

/* Ticketing time-grid — vertical timeslot axis (6am→6am) with events aligned by time. */
.tc-cal { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: 10px; overflow-x: auto; background: rgba(255,255,255,0.02); }
.tc-cal-head { display: flex; border-bottom: 1px solid var(--border-2); }
.tc-cal-body { display: flex; }
.tc-gutter-spacer { flex: 0 0 46px; border-right: 1px solid var(--border-2); }
.tc-gutter { position: relative; flex: 0 0 46px; border-right: 1px solid var(--border-2); }
.tc-hour { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.66rem; color: var(--text-dim); }
.tc-cols { display: grid; grid-template-columns: repeat(7, minmax(82px, 1fr)); flex: 1; }
.tc-col-head { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-left: 1px solid var(--border-2); min-width: 0; }
.tc-col-head:first-child { border-left: none; }
.tc-col-hours { font-size: 0.6rem; color: var(--text-dim); text-align: center; line-height: 1.2; }
.tc-track { position: relative; border-left: 1px solid var(--border-2); min-width: 0;
  background: repeating-linear-gradient(to bottom, transparent, transparent 45px, var(--border) 45px, var(--border) 46px); }
.tc-track:first-child { border-left: none; }
.tc-track-closed { opacity: 0.5; }
.tc-open-bg { position: absolute; left: 0; right: 0; background: rgba(242,210,100,0.06);
  border-top: 1px dashed rgba(242,210,100,0.25); border-bottom: 1px dashed rgba(242,210,100,0.25); }
.tc-acc { position: absolute; left: 0; width: 4px; border-radius: 2px; }
.tc-acc-free { background: rgba(110,210,140,0.7); }
.tc-acc-cover { background: rgba(242,210,100,0.8); }
.tc-ev { position: absolute; left: 8px; right: 4px; box-sizing: border-box; background: var(--surface-2);
  border: 1px solid var(--lavender); border-left-width: 3px; border-radius: 6px; padding: 4px 6px; overflow: hidden;
  cursor: grab; touch-action: none; transition: outline-color 0.2s, opacity 0.2s; }
.tc-ev:active { cursor: grabbing; }
.tc-ev-rs { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 4; }
.tc-ev-rs-top { top: 0; } .tc-ev-rs-bot { bottom: 0; }
.tc-ev-saving { opacity: 0.55; }
.tc-ev-saved { outline: 2px solid var(--yellow); outline-offset: -1px; }
.tc-ev-time { font-size: 0.62rem; color: var(--text-dim); }
.tc-ev-name { font-size: 0.74rem; color: var(--white); font-weight: 600; line-height: 1.15; }
.tc-ev .tc-badges { margin-top: 3px; }
.tc-closed-label { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 0.7rem; color: var(--text-dim); }
.tc-empty { padding: 24px; color: var(--text-dim); text-align: center; }

/* Staff Schedules grid — shift blocks plotted on the open-hours time-grid (ss-) */
.ss-today { background: rgba(196,160,224,0.04); }
.ss-chip-shift { background: rgba(168,216,168,0.18); color: #a8d8a8; border: 1px solid rgba(168,216,168,0.45); }
.ss-shift { position: absolute; box-sizing: border-box; background: var(--surface-2);
  border: 1px solid rgba(168,216,168,0.7); border-left-width: 3px; border-radius: 6px;
  padding: 3px 5px; overflow: hidden; cursor: pointer; display: flex; gap: 5px; align-items: flex-start;
  transition: outline-color 0.15s, transform 0.05s; }
.ss-shift:hover { outline: 1px solid rgba(168,216,168,0.9); }
.ss-shift-pic { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ss-shift-body { min-width: 0; flex: 1; }
.ss-shift-name { font-size: 0.72rem; color: var(--white); font-weight: 600; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-shift-role { font-size: 0.62rem; color: var(--lavender); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-shift-time { font-size: 0.62rem; color: var(--text-dim); }
.ss-none { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; font-size: 0.66rem; color: var(--text-dim); opacity: 0.5; }

/* Creation chips (drag onto a night to create an event/series) */
.tc-chiprail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 14px; }
.tc-chiprail-label { font-size: 0.78rem; color: var(--text-dim); }
.tc-newchip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--lavender); color: var(--lavender);
  background: rgba(196,160,224,0.08); cursor: grab; user-select: none; }
.tc-newchip-tk { border-color: var(--yellow); color: var(--yellow); background: rgba(242,210,100,0.08); }
.tc-newchip-free { border-color: rgba(110,210,140,0.7); color: #7fe0a0; background: rgba(110,210,140,0.08); }
.tc-newchip-cover { border-color: var(--yellow); color: var(--yellow); background: rgba(242,210,100,0.08); }
.tc-newchip:active { cursor: grabbing; }
.tc-chiprail-sep { width: 1px; align-self: stretch; background: var(--border-2); margin: 2px 4px; }

/* Venue-access bands (cover / RSVP) on the time-grid — sit behind event blocks */
.tc-accband { position: absolute; left: 0; right: 0; border-radius: 5px; cursor: pointer; z-index: 0;
  border: 1px solid transparent; transition: outline-color 0.15s; }
.tc-accband-free { background: rgba(110,210,140,0.10); border-color: rgba(110,210,140,0.35); }
.tc-accband-cover { background: rgba(242,210,100,0.10); border-color: rgba(242,210,100,0.35); }
.tc-accband:hover { outline: 1px solid currentColor; }
.tc-accband-lbl { position: absolute; top: 2px; left: 4px; font-size: 0.6rem; font-weight: 700;
  padding: 0 5px; border-radius: 8px; white-space: nowrap; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; }
.tc-accband-free .tc-accband-lbl { color: #7fe0a0; background: rgba(110,210,140,0.18); }
.tc-accband-cover .tc-accband-lbl { color: var(--yellow); background: rgba(242,210,100,0.18); }

/* Access modal extras */
.tc-a-freel { flex-direction: row !important; align-items: center; gap: 7px !important; font-size: 0.82rem; color: var(--white); }
.tc-a-nights { display: flex; flex-direction: column; gap: 6px; }
.tc-a-nights-lbl { font-size: 0.78rem; color: var(--text-dim); }
.tc-a-del { color: #f08; border-color: rgba(255,0,136,0.4); }
.tc-track-drop { background-color: rgba(242,210,100,0.12) !important; outline: 2px dashed var(--yellow); outline-offset: -2px; }
.tc-cmodal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.tc-cmodal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.tc-cmodal-card h3 { margin: 0; color: var(--white); }
.tc-cmodal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-dim); }
.tc-cmodal-card input { background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); padding: 8px; font-family: var(--font); font-size: 0.9rem; }
.tc-cmodal-times { display: flex; gap: 10px; } .tc-cmodal-times label { flex: 1; }
.tc-cmodal-note { font-size: 0.72rem; color: var(--text-dim); margin: 0; }
.tc-cmodal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tc-cmodal-status { font-size: 0.78rem; color: var(--text-dim); }

/* Ticket-type night picker (tk-dow) */
.tk-dow { display: flex; gap: 5px; flex-wrap: wrap; }
.tk-dow-day { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 5px 4px; border: 1px solid var(--border-2); border-radius: 6px; font-size: 0.72rem; color: var(--text-dim); cursor: pointer; user-select: none; }
.tk-dow-day input { display: none; }
.tk-dow-day.on { background: var(--lavender); color: #111; font-weight: 700; border-color: var(--lavender); }

/* VIP comp list (cg-) */
.cg-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.cg-in { padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-size: 0.86rem; font-family: var(--font); min-width: 160px; }
.cg-in-wide { flex: 1; min-width: 220px; }
.cg-list { border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.cg-row { display: grid; grid-template-columns: 1.6fr 1fr 1.8fr 0.7fr 40px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-2); font-size: 0.86rem; }
.cg-row:last-child { border-bottom: none; }
.cg-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; background: rgba(255,255,255,0.02); }
.cg-row.cg-off { opacity: 0.5; }
.cg-email { font-weight: 600; color: var(--white); word-break: break-all; }
.cg-note { color: var(--text-dim); }
.cg-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-dim); cursor: pointer; }
.cg-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; }
.cg-del:hover { color: #f55; }
@media (max-width: 720px) { .cg-row { grid-template-columns: 1fr 1fr; } .cg-head { display: none; } }

/* ── FOH Floor Board (fb-) ─────────────────────────────────────────────────── */
.fb-toolbar { gap: 12px; flex-wrap: wrap; align-items: center; }
.fb-datel { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); }
.fb-datel input { padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--white); font-family: var(--font); }
.fb-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.fb-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-dim); }
.fb-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fb-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.fb-board { min-height: 200px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 18px 8px; }
.fb-room { margin-bottom: 20px; }
.fb-room:last-child { margin-bottom: 10px; }
.fb-room-name { font-family: var(--display); font-size: 0.78rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); }
.fb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.fb-tile { border-radius: 12px; padding: 12px 13px; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface-2); transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s; min-height: 92px; display: flex; flex-direction: column; gap: 5px; }
.fb-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.fb-tile-sel { box-shadow: 0 0 0 2px var(--yellow); border-color: var(--yellow) !important; }
.fb-tile-top { display: flex; align-items: center; justify-content: space-between; }
.fb-tile-num { font-weight: 800; color: var(--white); font-size: 1.05rem; letter-spacing: 0.3px; }
.fb-tile-tier { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.4px; background: var(--yellow); color: #111; padding: 1px 5px; border-radius: 8px; }
.fb-tile-status { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.fb-tile-sub { display: flex; gap: 8px; font-size: 0.72rem; color: var(--text-dim); flex-wrap: wrap; }
.fb-tile-party { font-weight: 700; color: var(--white); }
.fb-tile-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; margin-top: auto; }
.fb-tile-bar i { display: block; height: 100%; background: var(--yellow); }
/* status palette — shared by tiles, legend swatches, and detail buttons */
.fb-avail { --fbc: #7fe0a0; } .fb-resv { --fbc: #f2d264; } .fb-seat { --fbc: #8ab4ff; }
.fb-occ { --fbc: #c4a0e0; } .fb-chk { --fbc: #ffaa5b; } .fb-bus { --fbc: #9aa3b2; } .fb-blk { --fbc: #ff6b6b; }
.fb-leg.fb-avail i, .fb-leg.fb-resv i, .fb-leg.fb-seat i, .fb-leg.fb-occ i, .fb-leg.fb-chk i, .fb-leg.fb-bus i, .fb-leg.fb-blk i { background: var(--fbc); }
.fb-tile.fb-avail, .fb-tile.fb-resv, .fb-tile.fb-seat, .fb-tile.fb-occ, .fb-tile.fb-chk, .fb-tile.fb-bus, .fb-tile.fb-blk {
  border: 1px solid color-mix(in srgb, var(--fbc) 32%, var(--border-2));
  border-left: 4px solid var(--fbc);
  background: color-mix(in srgb, var(--fbc) 9%, var(--surface-2));
}
.fb-tile .fb-tile-status { color: var(--fbc); }
/* detail panel */
.fb-detail { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 16px; }
.fb-d-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.fb-d-title { font-weight: 800; color: var(--white); font-size: 1rem; }
.fb-d-room { font-size: 0.75rem; color: var(--text-dim); }
.fb-d-statuses { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.fb-d-st { font-size: 0.68rem; font-weight: 700; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-dim); cursor: pointer; }
.fb-d-st.on { background: var(--fbc); color: #111; border-color: var(--fbc); }
.fb-d-advance { width: 100%; margin-bottom: 12px; }
.fb-d-resv { font-size: 0.72rem; color: var(--lavender); margin-bottom: 10px; }
.fb-d-grid { grid-template-columns: 1fr 1fr; }
.fb-d-taps { margin: 6px 0 14px; }
.fb-d-taps-h { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.fb-tap { display: inline-block; margin: 0 6px 6px 0; font-size: 0.7rem; padding: 5px 9px; border-radius: 14px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-dim); cursor: pointer; }
.fb-tap.on { background: rgba(127,224,160,0.18); color: #7fe0a0; border-color: #7fe0a0; }
.fb-d-save { width: 100%; margin-top: 6px; }
/* spatial floor map */
.fb-map { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--border-2); border-radius: 12px; background-color: var(--surface-2); }
.fb-map-blank { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; }
/* plan underlay — object-fit:cover mirrors the editor; brighten faint line-art on the dark board */
.fb-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none; filter: brightness(1.35) contrast(1.15); opacity: 0.9; }
.fb-mark { position: absolute; transform: translate(-50%, -50%); min-width: 36px; height: 36px; padding: 0 9px; border-radius: 18px; border: 2px solid rgba(0,0,0,0.55); background: var(--fbc, var(--lavender)); color: #111; font-size: 0.8rem; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.45); transition: transform 0.1s, box-shadow 0.1s; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.fb-mark:hover { transform: translate(-50%, -50%) scale(1.12); z-index: 3; }
.fb-mark-sel { box-shadow: 0 0 0 3px var(--yellow); z-index: 4; }
.fb-mark-img { background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; border: 2px solid var(--fbc, var(--lavender)); border-radius: 8px; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
.fb-mark-img .fb-mark-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.95); pointer-events: none; }
/* detail-panel fields: consistent full-width controls, no confusing number steppers */
.fb-detail .ra-f input, .fb-detail .ra-f select, .fb-detail .ra-f textarea { width: 100%; box-sizing: border-box; }
.fb-detail .ra-f input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.fb-detail .ra-f input[type=number]::-webkit-inner-spin-button,
.fb-detail .ra-f input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 900px) { .fb-layout { grid-template-columns: 1fr; } .fb-detail { position: static; } }

/* ── Self-serve table booking widget (vs-rb-, on the public venue site) ────── */
.vs-rb { max-width: 640px; margin: 0 auto; }
.vs-rb-steps { display: flex; list-style: none; padding: 0; margin: 0 0 20px; gap: 6px; }
.vs-rb-step { flex: 1; text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 4px; border-radius: var(--vs-button-radius); background: color-mix(in srgb, var(--vs-card-border) 40%, transparent); color: var(--vs-text); opacity: 0.6; }
.vs-rb-step-on { background: var(--vs-primary); color: var(--vs-on-primary, #fff); opacity: 1; font-weight: 700; }
.vs-rb-step-done { opacity: 0.9; }
.vs-rb-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.vs-rb-row label { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--vs-text); }
.vs-rb input, .vs-rb select { padding: 11px 12px; border-radius: var(--vs-input-radius); border: 1px solid var(--vs-card-border); background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-heading); font-size: 0.95rem; font-family: inherit; }
.vs-rb-tables { display: grid; gap: 10px; margin-bottom: 14px; }
.vs-rb-table { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border-radius: var(--vs-card-radius); border: 1px solid var(--vs-card-border); background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-text); cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.vs-rb-table:hover { border-color: var(--vs-primary); transform: translateY(-1px); }
/* Hero photo runs across the TOP of the card. As a side strip it was a tall
   narrow crop of a wide room shot — a slice of one banquette rather than the
   table. min-height carries browsers without aspect-ratio. */
.vs-rb-table.has-photo { gap: 0; padding: 0; overflow: hidden; }
.vs-rb-table-photo { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 150px; background-size: cover; background-position: center; }
.vs-rb-table-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 14px 0; flex: 1; }
.vs-rb-table.has-photo .vs-rb-table-body { padding: 14px 16px; }
@media (max-width: 560px) { .vs-rb-table-photo { aspect-ratio: 3 / 2; min-height: 130px; } }
.vs-rb-table-name { font-weight: 700; color: var(--vs-heading); font-size: 1rem; }
.vs-rb-table-meta { font-size: 0.82rem; color: var(--vs-text); }
.vs-rb-after { opacity: 0.7; font-size: 0.92em; }
.vs-rb-table-dep { font-size: 0.8rem; color: var(--vs-primary); font-weight: 600; }
.vs-rb-sel { padding: 12px 14px; border-radius: var(--vs-card-radius); background: color-mix(in srgb, var(--vs-primary) 12%, transparent); color: var(--vs-heading); margin-bottom: 16px; font-weight: 600; }
.vs-rb-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--vs-text); margin-bottom: 16px; }
.vs-rb-check input { width: auto; }
.vs-rb-card { padding: 14px; border-radius: var(--vs-input-radius); border: 1px solid var(--vs-card-border); background: rgba(255,255,255,0.04); margin-bottom: 14px; }
.vs-rb-err { color: #ff8b8b; font-size: 0.84rem; min-height: 18px; margin-bottom: 8px; }
.vs-rb-backlink { display: inline-block; margin-top: 12px; color: var(--vs-text); opacity: 0.8; font-size: 0.85rem; }
.vs-rb-done { text-align: center; padding: 24px 8px; }
.vs-rb-check-big { width: 56px; height: 56px; line-height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--vs-primary); color: #fff; font-size: 1.6rem; }
.vs-rb-empty { color: var(--vs-text); opacity: 0.8; text-align: center; padding: 20px; }
.vs-rb-shares-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.vs-rb-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--vs-card-radius); border: 1px solid var(--vs-card-border); color: var(--vs-heading); }
.vs-rb-share-paid { opacity: 0.7; }
.vs-rb-sharelink { font-family: monospace; font-size: 0.82rem; padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--vs-heading); word-break: break-all; margin-top: 8px; }

@media (max-width: 1100px) {
  .ee-layout { grid-template-columns: 280px 1fr; }
  .ee-image-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ee-layout { grid-template-columns: 1fr; }
  .ee-list-pane { max-height: 300px; }
  .ee-form-grid { grid-template-columns: 1fr; }
  .ee-field-full { grid-column: span 1; }
}

/* Setup screen (no website yet) */
.sb-setup { max-width: 760px; margin: 40px auto; padding: 32px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); }
.sb-setup h2 { font-family: var(--display); color: var(--white); margin-bottom: 8px; }
.sb-setup p { color: var(--text-dim); margin-bottom: 20px; }

@media (max-width: 1100px) {
  .sb-layout { grid-template-columns: 220px 1fr; }
  .sb-props { display: none; }
}
@media (max-width: 768px) {
  .sb-layout { grid-template-columns: 1fr; }
  .sb-sidebar { max-height: 300px; }
}

/* ===== Public Venue Site (vs-) ===== */
:root {
  --vs-button-radius: 999px;
  --vs-card-radius: 10px;
  --vs-section-pad-y: 56px;
  --vs-header-bg: var(--vs-bg);
  --vs-primary-bg: var(--vs-primary);
  --vs-hero-overlay: rgba(0, 0, 0, 0.5);
  --vs-input-radius: var(--vs-button-radius);
}
/* Subtle radial backdrop on the body so flat dark themes get some depth */
body:has(.vs-header) {
  overflow-x: hidden; /* prevent any hero/widget from creating horizontal scroll */
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--vs-primary) 8%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 60%, color-mix(in srgb, var(--vs-accent) 8%, transparent), transparent 65%),
    var(--vs-bg);
  background-attachment: fixed;
}
.vs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--vs-header-bg) 85%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--vs-card-border) 60%, transparent);
  transition: background 0.2s, border-color 0.2s;
}
:root[data-vs-header="transparent"] .vs-header { background: transparent; border-bottom: none; }
:root[data-vs-header="bordered"] .vs-header { background: color-mix(in srgb, var(--vs-header-bg) 90%, transparent); border-bottom: 2px solid var(--vs-primary); }
.vs-nav-link {
  position: relative;
}
.vs-nav-link::before {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--vs-primary-bg);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.25s cubic-bezier(.22,.94,.4,1);
}
.vs-nav-link:hover::before, .vs-nav-link.vs-nav-active::before { transform: scaleX(1); }
.vs-header-inner {
  max-width: var(--vs-content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 20px;
}
/* flex-shrink:0 + max-width:none keep the logo at its true aspect ratio even
   when the nav is crowded — otherwise the global `img{max-width:100%}` lets the
   flex row squish it horizontally while height stays fixed. */
.vs-logo { text-decoration: none; flex-shrink: 0; }
.vs-logo img { height: 40px; width: auto; max-width: none; flex-shrink: 0; display: block; }
.vs-logo-text { font-family: var(--vs-heading-font); font-weight: 700; font-size: 1.2rem; color: var(--vs-heading); text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 16px rgba(0,0,0,0.25); }
.vs-nav { display: flex; gap: 4px; flex: 1; }
[data-vs-nav-align="right"] .vs-logo { margin-right: auto; }
[data-vs-nav-align="right"] .vs-nav  { flex: 0 0 auto; justify-content: flex-end; }
[data-vs-nav-caps="1"] .vs-nav-link { text-transform: uppercase; letter-spacing: 0.06em; }
.vs-nav-link {
  padding: 6px 14px;
  color: var(--vs-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.15s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 16px rgba(0,0,0,0.25);
}
.vs-nav-link:hover { color: var(--vs-heading); background: rgba(255,255,255,0.05); }
.vs-nav-link.vs-nav-active { color: var(--vs-primary); }
.vs-nav-group { position: relative; display: inline-block; }
.vs-nav-caret { font-size: 0.7em; opacity: 0.7; margin-left: 2px; }
.vs-nav-label { cursor: default; }
.vs-nav-label:hover { background: transparent !important; color: var(--vs-text) !important; }
.vs-nav-submenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 180px;
  background: var(--vs-bg, #12122B);
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
}
.vs-nav-group:hover .vs-nav-submenu,
.vs-nav-group:focus-within .vs-nav-submenu { display: flex; }
.vs-nav-sublink {
  display: block;
  padding: 8px 12px;
  color: var(--vs-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s;
}
.vs-nav-sublink:hover { color: var(--vs-heading); background: rgba(255,255,255,0.05); }
.vs-nav-sublink.vs-nav-active { color: var(--vs-primary); }
.vs-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.vs-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--vs-text); margin: 4px 0; transition: all 0.2s; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
/* Venue toggle */
.vs-venue-toggle { display: flex; gap: 8px; }
.vs-venue-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--vs-card-border);
  border-radius: 20px;
  color: var(--vs-text);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.15s;
}
.vs-venue-toggle-btn:hover { border-color: var(--vs-primary); color: var(--vs-heading); }
.vs-venue-toggle-logo { height: 18px; width: auto; }
/* Container */
.vs-container { max-width: var(--vs-content-width); margin: 0 auto; padding: 0 20px; }
.vs-section { padding: var(--vs-section-pad-y) 0; position: relative; }
/* Sections fade-in as they enter the viewport (toggled by IntersectionObserver) */
.vs-section { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.94,.4,1); }
.vs-section.vs-in { opacity: 1; transform: translateY(0); }
.vs-section-heading {
  font-family: var(--vs-heading-font);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  color: var(--vs-heading);
  text-align: center;
  margin: 0 0 36px;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
  width: 100%;
}
.vs-section-heading::after {
  content: '';
  display: block;
  width: 60px; height: 3px;
  margin: 14px auto 0;
  background: var(--vs-primary-bg);
  border-radius: 2px;
}
.vs-text { color: var(--vs-text); line-height: 1.7; font-size: 0.95rem; }
.vs-text p { margin: 0 0 1.1em; }
.vs-text p:last-child { margin-bottom: 0; }
.vs-empty { color: var(--vs-text); text-align: center; font-style: italic; opacity: 0.6; }

/* Ticket checkout modal — opened by the "Get Tickets" CTA */
.vs-ticket-modal { display: none; position: fixed; inset: 0; z-index: 9000; }
.vs-ticket-modal.vs-ticket-modal-open { display: block; }
.vs-ticket-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); }
.vs-ticket-modal-dialog {
  position: relative;
  width: calc(100% - 32px); max-width: 560px;
  margin: 6vh auto; max-height: 86vh; overflow-y: auto;
  background: var(--vs-bg, #12122b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: vsTicketModalIn 0.22s cubic-bezier(.22,.94,.4,1) both;
}
@keyframes vsTicketModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vs-ticket-modal-dialog .vs-section-heading { margin-bottom: 24px; }
.vs-ticket-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none; cursor: pointer;
  color: var(--vs-text, rgba(255,255,255,0.7)); opacity: 0.7;
  font-size: 2rem; line-height: 1; padding: 4px 10px;
}
.vs-ticket-modal-close:hover { opacity: 1; }
body.vs-modal-open { overflow: hidden; }
@media (max-width: 600px) { .vs-ticket-modal-dialog { margin: 0; width: 100%; min-height: 100%; max-height: 100%; border-radius: 0; border: none; } }

/* Reservation booking modal (Book a Table) — mirrors the ticket modal */
.vs-rsv-modal { display: none; position: fixed; inset: 0; z-index: 9000; }
.vs-rsv-modal.vs-rsv-modal-open { display: block; }
.vs-rsv-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); }
.vs-rsv-modal-dialog {
  position: relative;
  width: calc(100% - 32px); max-width: 560px;
  margin: 6vh auto; max-height: 86vh; overflow-y: auto;
  background: var(--vs-bg, #12122b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: vsTicketModalIn 0.22s cubic-bezier(.22,.94,.4,1) both;
  text-align: left;
}
.vs-rsv-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none; cursor: pointer;
  color: var(--vs-text, rgba(255,255,255,0.7)); opacity: 0.7;
  font-size: 2rem; line-height: 1; padding: 4px 10px;
}
.vs-rsv-modal-close:hover { opacity: 1; }
@media (max-width: 600px) { .vs-rsv-modal-dialog { margin: 0; width: 100%; min-height: 100%; max-height: 100%; border-radius: 0; border: none; } }
/* Desktop: give the booking widget more room — the 560px dialog is cramped for
   the night calendar + table cards. Widen the dialog, let the inner .vs-rb fill
   it, and lay tables out two-up so the extra width is actually used. */
@media (min-width: 768px) {
  .vs-rsv-modal-dialog { max-width: 860px; padding: 40px 44px; }
  .vs-rsv-modal-dialog .vs-rb { max-width: 100%; }
  .vs-rsv-modal-dialog .vs-rb-tables { grid-template-columns: 1fr 1fr; }
}

/* Venue map (Apple MapKit JS) */
.vs-map {
  width: 100%; height: 360px; margin: 0 0 20px;
  border-radius: var(--vs-card-radius, 10px); overflow: hidden;
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.08));
}
.vs-map.vs-map-failed { height: auto; padding: 16px; text-align: center; }
.vs-map-fallback { color: var(--vs-primary); text-decoration: underline; font-weight: 600; }
@media (max-width: 640px) { .vs-map { height: 260px; } }

/* Open-in-Maps buttons */
.vs-map-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.vs-map-btn {
  background: transparent; color: var(--vs-heading);
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.2));
  padding: 10px 18px; font-size: 0.85rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.vs-map-btn::before { content: "📍"; font-size: 0.95em; }
.vs-map-btn:hover { border-color: var(--vs-primary); color: var(--vs-primary); transform: translateY(-1px); }

/* Long-form rich text widget */
.vs-richtext { color: var(--vs-text); line-height: 1.75; font-size: 1rem; }
.vs-richtext-narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.vs-richtext-wide { max-width: none; }
.vs-richtext > :first-child { margin-top: 0; }
.vs-richtext > :last-child { margin-bottom: 0; }
.vs-richtext h2 { font-family: var(--vs-heading-font); color: var(--vs-heading); font-size: 1.5rem; font-weight: 700; margin: 1.6em 0 0.5em; }
.vs-richtext h3 { font-family: var(--vs-heading-font); color: var(--vs-heading); font-size: 1.2rem; font-weight: 700; margin: 1.4em 0 0.4em; }
.vs-richtext h4 { color: var(--vs-heading); font-size: 1.05rem; font-weight: 700; margin: 1.2em 0 0.4em; }
.vs-richtext p { margin: 0 0 1.1em; }
.vs-richtext ul, .vs-richtext ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.vs-richtext li { margin: 0.25em 0; }
.vs-richtext a { color: var(--vs-primary); text-decoration: underline; }
.vs-richtext blockquote {
  margin: 0 0 1.1em; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--vs-primary); color: var(--vs-heading); font-style: italic;
}
.vs-richtext hr { border: none; border-top: 1px solid var(--vs-card-border); margin: 2em 0; }
.vs-richtext pre, .vs-richtext code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.vs-richtext pre { background: var(--vs-card-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; }
/* Buttons */
.vs-btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--vs-font);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--vs-button-radius);
  transition: all 0.15s;
  cursor: pointer;
  border: none;
}
.vs-btn-primary { background: var(--vs-primary-bg); color: #000; }
.vs-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vs-btn-lg { padding: 16px 36px; font-size: 0.95rem; }
/* Hero */
.vs-hero {
  position: relative;
  min-height: 75vh;  /* default — overridden by .vs-hero-h-* modifiers */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  max-width: 100%;   /* never wider than the viewport even if a child overflows */
  background-color: var(--vs-bg);
  /* Promote to a compositing layer so iOS Safari correctly clips
     absolutely-positioned animated children (the Ken Burns ::before and
     the video element). Without this, overflow:hidden can leak on mobile. */
  transform: translateZ(0);
}
.vs-hero-h-compact    { min-height: 40vh; }
.vs-hero-h-medium     { min-height: 60vh; }
.vs-hero-h-large      { min-height: 75vh; }
.vs-hero-h-fullscreen { min-height: 100vh; }
/* `auto` lets the hero shrink to its image's natural height — useful when the
   background is a poster/flyer that should be shown in full without cropping. */
.vs-hero-h-auto       { min-height: auto; aspect-ratio: 16 / 9; }
.vs-hero-h-auto       .vs-hero-content { padding: 32px 20px; }
.vs-hero::before {
  /* Full-bleed background-image animation — slow Ken Burns when image is set */
  content: '';
  position: absolute;
  inset: -8%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: vsHeroZoom 20s ease-in-out infinite alternate;
}
@keyframes vsHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ── StratusBuilder motion on the hero backdrop ─────────────────────────────
   The layer that actually moves is `.vs-hero::before` — a pseudo-element, so
   sb-effects.js can't put a class on it. The hero renders with
   data-sb-fx-plate="self", which makes the runtime write --sb-fx-py (parallax
   offset) and --sb-fx-pscale (Ken Burns zoom) onto the SECTION and tag it
   .sb-fx-plate-host. These rules forward those values to ::before.

   The blanket `animation: vsHeroZoom` above is the hardcoded always-on drift.
   When a builder opts into a StratusBuilder motion effect it takes over, so
   the two don't fight for the same transform. */
.vs-hero.sb-fx-plate-host.sb-fx-parallax-slow::before,
.vs-hero.sb-fx-plate-host.sb-fx-parallax-medium::before,
.vs-hero.sb-fx-plate-host.sb-fx-kenburns::before {
  animation: none;
  transform: translate3d(0, var(--sb-fx-py, 0), 0) scale(var(--sb-fx-pscale, 1));
  will-change: transform;
}
/* Parallax travel is a % of the plate's own height and ::before is only inset
   8%, so a pronounced setting would expose the section behind it. Deepen the
   bleed to cover the full excursion. */
.vs-hero.sb-fx-plate-host.sb-fx-parallax-medium::before { inset: -18%; }

@media (prefers-reduced-motion: reduce) {
  .vs-hero::before,
  .vs-hero.sb-fx-plate-host.sb-fx-parallax-slow::before,
  .vs-hero.sb-fx-plate-host.sb-fx-parallax-medium::before,
  .vs-hero.sb-fx-plate-host.sb-fx-kenburns::before {
    animation: none;
    transform: none;
  }
}

/* StratusBuilder's scrim effects paint an ::after at z-index 1 over the whole
   widget. The shared module deliberately doesn't lift children generically —
   doing so would force position:relative onto .vs-hero-video and
   .vs-hero-bg-stack and drop them out of their absolute layout. Lift only the
   content wrappers, which are already in normal flow. */
.sb-fx-scrim-bottom > .vs-container,
.sb-fx-scrim-cinematic > .vs-container,
.sb-fx-scrim-bottom > .vs-hero-content,
.sb-fx-scrim-cinematic > .vs-hero-content {
  position: relative;
  z-index: 2;
}
.vs-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* `contain` heroes (flyers/posters): show the whole image, never crop. The
   section's own background renders the flyer contained + centered; the ::before
   becomes a blurred, darkened cover backdrop so the letterbox area around the
   flyer reads as a soft glow instead of a flat band. Disable the zoom so the
   contained image doesn't drift and clip at the edges. */
/* Preview-mode banner (draft content visible on the live site). */
.vs-preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(90deg, #7a4dd6, #b07be0);
  color: #fff; font-size: 0.82rem; font-weight: 600;
  text-align: center; padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.vs-has-preview-banner body { padding-top: 36px; }

.vs-hero-scale-contain {
  display: block;            /* drop the flex centering — the <img> defines height */
  aspect-ratio: auto;        /* override .vs-hero-h-auto's fixed 16/9 box */
  min-height: 0;
  max-height: 94vh;
  overflow: hidden;
  position: relative;
}
/* Suppress the inherited cover-zoom ::before — for contain it would paint a
   second (cropped) copy of the flyer behind the image. */
.vs-hero-scale-contain::before { display: none; }
/* Single blurred backdrop, absolutely filling the hero (= image height). */
.vs-hero-contain-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(46px) saturate(150%) brightness(0.55);
  transform: scale(1.15);
}
/* A contain hero draws the sharp flyer in flow at z-index 1 — it's what gives
   the section its height. A background video sits at z-index 0, i.e. BEHIND
   that flyer, so a hero with both played its video invisibly and looked like a
   still. Lift the video over the flyer, which keeps setting the height and now
   doubles as the poster/fallback underneath. object-fit:contain is already set
   inline for this scale, so the video fills the same box. */
.vs-hero-scale-contain .vs-hero-video { z-index: 1; }
.vs-hero-contain-img {
  position: relative; z-index: 1;
  display: block;
  width: 100%; height: auto;
  max-height: 94vh;
  object-fit: contain;
  margin: 0 auto;
}
/* Any hero text stays overlaid (absolute) so it never adds height below the
   flyer; for flyer heroes this is usually empty anyway. */
.vs-hero-scale-contain .vs-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
}

/* ── Hero slideshow (SmugMug-backed) ───────────────────────────────────── */
/* When bgSource is smugmug-*, the hero renders no inline background-image so
   the section's ::before zoom kicks off blank; suppress it. The two stacked
   .vs-hero-bg-layer divs (one active, one preloading the next image) handle
   the slideshow instead, with the active layer cross-fading per the chosen
   transition variant. */
.vs-hero-slideshow::before { display: none; }

.vs-hero-bg-stack {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.vs-hero-bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, transform;
  /* The transform transition matters when an animation gets cut short by the
     class swap — the layer smoothly returns to base instead of snapping. */
  transition: opacity 1200ms ease-in-out, transform 1200ms ease-in-out;
}
.vs-hero-bg-layer.vs-hero-bg-active { opacity: 1; }

/* Transition variants — each tweaks the layer's CSS transition so the
   .vs-hero-bg-active toggle animates in the chosen style. */

/* Cross-fade (default) */
.vs-hero-trans-fade .vs-hero-bg-layer { transition: opacity 1200ms ease-in-out; }

/* Slide — inactive layer sits 8% to the right, slides in as it activates */
.vs-hero-trans-slide .vs-hero-bg-layer { transition: opacity 1200ms ease-in-out, transform 1200ms cubic-bezier(.22,.94,.4,1); transform: translateX(8%); }
.vs-hero-trans-slide .vs-hero-bg-layer.vs-hero-bg-active { transform: translateX(0); }

/* Zoom — inactive layer is slightly scaled down, scales up + fades as it activates */
.vs-hero-trans-zoom .vs-hero-bg-layer { transition: opacity 1400ms ease-in-out, transform 1400ms ease-out; transform: scale(0.92); }
.vs-hero-trans-zoom .vs-hero-bg-layer.vs-hero-bg-active { transform: scale(1); }

/* Ken Burns — cross-fade like the default, but the active layer continually
   drifts and zooms while it's on screen for a documentary feel.
   The animation duration is bound to a CSS variable the JS sets from the
   slideshow interval, so each photo gets a full Ken Burns pass per cycle
   instead of an interrupted partial zoom (which read like a "double loop"). */
.vs-hero-trans-kenburns .vs-hero-bg-layer.vs-hero-bg-active {
  animation: vsHeroKenburns var(--vs-hero-kb-duration, 16s) ease-in-out forwards;
}
@keyframes vsHeroKenburns {
  0%   { transform: scale(1)    translate(0,       0); }
  100% { transform: scale(1.18) translate(-1.5%,  -1.5%); }
}
.vs-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 30% 10%, color-mix(in srgb, var(--vs-primary) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at 70% 90%, color-mix(in srgb, var(--vs-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85));
}
.vs-hero-content {
  position: relative; z-index: 2;
  padding: 40px 24px; max-width: 920px;
  width: 100%; box-sizing: border-box;
  animation: vsFadeUp 1.1s 0.1s both cubic-bezier(.22,.94,.4,1);
}
.vs-hero-content h1 {
  font-family: var(--vs-heading-font); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800;
  color: #fff; margin: 0 0 14px; line-height: 1.04; letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.vs-hero-content p {
  font-size: clamp(1rem, 1.4vw, 1.25rem); color: rgba(255,255,255,0.92); margin: 0 0 28px;
  max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.55;
}
.vs-hero .vs-btn {
  padding: 16px 36px; font-size: 0.95rem;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--vs-primary) 70%, transparent);
  animation: vsPulseBtn 2.4s ease-in-out infinite;
}
@keyframes vsPulseBtn {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vs-primary) 60%, transparent); }
  50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--vs-primary) 0%, transparent); }
}
@keyframes vsFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Subtle scroll cue */
.vs-hero::after {
  content: '';
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, var(--vs-primary), transparent);
  z-index: 2; opacity: 0.6;
  animation: vsScrollCue 2.2s ease-in-out infinite;
}
@keyframes vsScrollCue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.4; }
  50% { transform: translate(-50%, 12px); opacity: 0.85; }
}
/* Event detail */
.vs-event-hero { min-height: 70vh; }
.vs-event-hero-img {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  filter: blur(40px) saturate(140%);
  opacity: 0.35;
}
.vs-event-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.vs-event-hero .vs-hero-content { max-width: 760px; }
/* Rotating hero on event / series detail pages: a full-bleed carousel layer
   behind the overlay + content. Reuses the .vs-event-carousel slide machinery
   (two-layer blur-fit per slide), so any aspect ratio fits without cropping.
   The descendant selector outranks the later `.vs-event-carousel { position:
   relative }` rule so the container stays full-bleed. */
.vs-event-hero .vs-event-hero-carousel { position: absolute; inset: 0; z-index: 0; }
.vs-event-hero .vs-event-hero-carousel .vs-carousel-dots { bottom: 16px; z-index: 3; }
.vs-event-detail-series {
  display: inline-block; padding: 4px 14px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--vs-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vs-primary) 40%, transparent);
  color: var(--vs-primary); border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.vs-event-detail-date {
  font-size: clamp(1rem, 1.6vw, 1.3rem); color: rgba(255,255,255,0.95);
  margin: 8px 0 24px; font-weight: 500; letter-spacing: 0.02em;
}
.vs-event-detail-body { max-width: 760px; }
.vs-event-detail-body .vs-text { font-size: 1.05rem; line-height: 1.7; }
.vs-event-detail-meta {
  margin-top: 32px;
  padding: 20px;
  background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.vs-event-meta-row { display: flex; flex-direction: column; gap: 4px; }
.vs-event-meta-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--vs-text); opacity: 0.8; }
.vs-event-meta-v { font-size: 0.95rem; color: var(--vs-heading); font-weight: 600; }

/* Event filters */
.vs-event-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px;
  background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius);
}
.vs-span-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-chip {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--vs-card-border);
  border-radius: 999px;
  color: var(--vs-text);
  font-family: var(--vs-font);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.vs-chip:hover { border-color: var(--vs-primary); color: var(--vs-heading); }
.vs-chip-active { background: var(--vs-primary-bg); color: #000; border-color: transparent; }
.vs-filter-series {
  padding: 6px 12px;
  background: var(--vs-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: 6px;
  color: var(--vs-heading);
  font-family: var(--vs-font);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}
.vs-filter-series:focus { border-color: var(--vs-primary); }
.vs-filter-dates { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vs-filter-from, .vs-filter-to {
  padding: 6px 10px;
  background: var(--vs-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: 6px;
  color: var(--vs-heading);
  font-family: var(--vs-font);
  font-size: 0.82rem;
  outline: none;
  color-scheme: dark;
}
.vs-filter-from:focus, .vs-filter-to:focus { border-color: var(--vs-primary); }
.vs-filter-sep { color: var(--vs-text); }

/* ─── Events widget: view switcher ─────────────────────────────────────── */
.vs-event-widget-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.vs-event-widget-header .vs-section-heading { margin: 0; }
/* Alignment variants — header stacks vertically and aligns the heading +
   view-toggle to the chosen edge. `split` is the default flex-row layout. */
.vs-evw-align-split   { /* default */ }
.vs-evw-align-left,
.vs-evw-align-center,
.vs-evw-align-right {
  flex-direction: column;
}
.vs-evw-align-left    { align-items: flex-start; text-align: left; }
.vs-evw-align-center  { align-items: center;     text-align: center; }
.vs-evw-align-right   { align-items: flex-end;   text-align: right; }

/* View-format selector row (Grid/List/Carousel) — sits beside the heading. */
.vs-event-controls { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Featured / All filter on its own centred row below heading + format selector. */
.vs-event-filter-row { width: 100%; display: flex; justify-content: center; }
/* Featured / All filter pills — sit alongside the layout toggle in the header. */
.vs-event-filter-toggle {
  display: inline-flex; gap: 4px;
  background: var(--vs-card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.1));
  border-radius: 8px; padding: 3px;
}
.vs-filter-btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px; font-size: 0.78rem; font-weight: 600;
  color: var(--vs-text-dim, rgba(255,255,255,0.7));
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.vs-filter-btn:hover { color: var(--vs-text, #fff); }
.vs-filter-btn.vs-filter-active {
  background: var(--vs-primary, #fbbf24);
  color: var(--vs-bg, #12122B);
}
/* Hide non-featured cards/rows/calendar entries when filter=featured. */
.vs-event-widget[data-filter="featured"] .vs-event-card:not([data-featured="1"]),
.vs-event-widget[data-filter="featured"] .vs-event-row:not([data-featured="1"]) {
  display: none;
}
.vs-event-featured-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--vs-primary, #fbbf24); color: var(--vs-bg, #12122B);
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
}

/* ─── Staff Directory editor: PublicProfile cards in the detail pane ──── */
.sd-pp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.sd-pp-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2a2a3e);
}
.sd-pp-card img,
.sd-pp-card .sd-pp-thumb-empty {
  width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
  background: var(--bg-input, #1a1a2e);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim, rgba(255,255,255,0.5));
}
.sd-pp-body { flex: 1; min-width: 0; }
.sd-pp-name { font-weight: 600; font-size: 0.92rem; color: var(--white); }
.sd-pp-role { font-size: 0.78rem; color: var(--text-dim, rgba(255,255,255,0.6)); margin-top: 2px; }
.sd-pp-active { color: var(--yellow, #F2D264); }
.sd-pp-hidden { color: var(--text-dim, rgba(255,255,255,0.5)); }
.sd-pp-actions { display: flex; gap: 4px; align-items: center; }
.sd-pp-actions .sb-btn { padding: 4px 10px; font-size: 0.78rem; }

/* Read-only meta blocks (Account, User) in the staff detail pane */
.sd-meta-block {
  border: 1px solid var(--border, #2a2a3e); border-radius: 8px;
  padding: 6px 14px; margin-bottom: 18px;
  background: rgba(255,255,255,0.02);
}

/* ─── Entertainer editor: linked staff Profile thumbnail in header ────── */
.en-linked-thumb {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--bg-input, #1a1a2e);
  margin-right: 16px;
}
.en-linked-thumb-empty {
  font-size: 1.4rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim, rgba(255,255,255,0.6));
  border: 1px solid var(--border, #2a2a3e);
}
.en-name-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.en-staff-name { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; padding-left: 2px; }
.en-staff-dir-link { color: inherit; text-decoration: none; }
.en-staff-dir-link:hover { color: var(--accent); }

/* ─── Entertainer headshot field + crop modal ─────────────────────────── */
/* Public Profiles drag-and-drop intake zone */
.en-dropzone {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 18px; cursor: pointer;
  border: 2px dashed var(--border-2); border-radius: 12px;
  background: rgba(196,160,224,0.04); transition: border-color .15s, background .15s;
}
.en-dropzone:hover { border-color: var(--lavender); background: rgba(196,160,224,0.07); }
.en-dz-over { border-color: var(--yellow) !important; background: rgba(242,210,100,0.10) !important; }
.en-dz-inner { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; }
.en-dz-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,160,224,0.14); color: var(--lavender); font-size: 1.1rem;
}
.en-dz-text { display: flex; flex-direction: column; gap: 2px; }
.en-dz-text strong { color: var(--white); font-size: 0.9rem; }
.en-dz-sub { color: var(--text-dim); font-size: 0.76rem; line-height: 1.4; }
.en-dz-status { font-size: 0.8rem; color: var(--text-dim); min-width: 0; }

/* Tag chips on profile list rows */
.en-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.en-tag-chip { font-size: 0.62rem; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 10px;
  background: rgba(196,160,224,0.14); color: var(--lavender); border: 1px solid rgba(196,160,224,0.3); text-transform: lowercase; }

/* Multi-select tag filter bar (grid) */
.en-tagfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; }
.en-tagfilter-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; margin-right: 2px; }
.en-tagfilter-chip { font-size: 0.74rem; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 14px; cursor: pointer;
  background: none; color: var(--text-dim); border: 1px solid var(--border-2); transition: all 0.12s; text-transform: lowercase; }
.en-tagfilter-chip:hover { color: var(--white); border-color: var(--lavender); }
.en-tagfilter-chip.on { background: var(--lavender); color: #111; border-color: var(--lavender); }
.en-tagfilter-clear { font-size: 0.72rem; color: var(--text-dim); background: none; border: none; cursor: pointer; text-decoration: underline; }
.en-tagfilter-clear:hover { color: var(--white); }

/* Tags token-chip editor field */
.en-tagedit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 9px; background: var(--bg-input, #1a1a2e); border: 1px solid var(--border-2); border-radius: 8px; }
.en-tagedit-chips { display: contents; }
.en-tagedit-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600;
  line-height: 1; padding: 5px 6px 5px 10px; border-radius: 14px; text-transform: lowercase;
  background: rgba(196,160,224,0.16); color: var(--lavender); border: 1px solid rgba(196,160,224,0.35); }
.en-tagedit-x { background: none; border: none; color: var(--lavender); cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 0 2px; opacity: 0.7; }
.en-tagedit-x:hover { opacity: 1; color: #fff; }
.en-tagedit-input { flex: 1; min-width: 120px; background: none; border: none; outline: none;
  color: var(--white); font-family: var(--font); font-size: 0.86rem; padding: 4px 2px; }

.en-headshot {
  display: flex; flex-direction: column; gap: 8px;
}
.en-headshot-thumb {
  width: 180px; height: 180px; border-radius: 8px;
  background: var(--bg-input, #1a1a2e);
  border: 2px dashed var(--border, #2a2a3e);
  overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.en-headshot-thumb.dragover { border-color: var(--accent, #F2D264); }
.en-headshot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.en-empty-hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-dim, rgba(255,255,255,0.6)); font-size: 0.8rem;
}
.en-empty-hint span:first-child { font-size: 1.6rem; line-height: 1; }
.en-headshot-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.en-progress { font-size: 0.78rem; color: var(--text-dim, rgba(255,255,255,0.6)); }

.en-crop-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.en-crop-modal {
  background: var(--panel-bg, #15152a); border: 1px solid var(--border, #2a2a3e);
  border-radius: 12px; width: min(92vw, 720px); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.en-crop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border, #2a2a3e);
  font-weight: 600;
}
.en-crop-x {
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  font-size: 1.6rem; line-height: 1;
}
.en-crop-body { padding: 16px; max-height: 70vh; }
.en-crop-body img { max-width: 100%; max-height: 60vh; display: block; }
.en-crop-circle { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.65); pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); }
.en-crop-footer {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border, #2a2a3e);
}

/* ─── Hero overlay image (logo / artwork) ──────────────────────────────── */
.vs-hero-overlay-img {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; padding: 32px;
}
.vs-hero-overlay-img img {
  max-height: 70%; height: auto; display: block;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.45));
}
.vs-hero-oi-top         { align-items: flex-start; }
.vs-hero-oi-bottom      { align-items: flex-end; }
.vs-hero-oi-top-left    { align-items: flex-start; justify-content: flex-start; }
.vs-hero-oi-top-right   { align-items: flex-start; justify-content: flex-end; }
.vs-hero-oi-bottom-left { align-items: flex-end;   justify-content: flex-start; }
.vs-hero-oi-bottom-right{ align-items: flex-end;   justify-content: flex-end; }

/* ─── Video embed ───────────────────────────────────────────────────────── */
.vs-video-frame {
  position: relative; width: 100%; height: 0;
  background: var(--vs-card-bg, rgba(0,0,0,0.4));
  border-radius: 10px; overflow: hidden;
}
.vs-video-frame > iframe,
.vs-video-frame > video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.vs-video-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--vs-text-dim, rgba(255,255,255,0.6)); font-size: 0.9rem;
}

/* ─── Hero Carousel ─────────────────────────────────────────────────────── */
.vs-hero-carousel {
  position: relative; overflow: hidden;
  background-color: var(--vs-bg, #12122B);
  min-height: 75vh;
}
.vs-hero-carousel.vs-hero-h-compact    { min-height: 40vh; }
.vs-hero-carousel.vs-hero-h-medium     { min-height: 60vh; }
.vs-hero-carousel.vs-hero-h-large      { min-height: 75vh; }
.vs-hero-carousel.vs-hero-h-fullscreen { min-height: 100vh; }
.vs-hc-track { position: absolute; inset: 0; }
.vs-hc-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; text-align: center;
  opacity: 0; transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}
.vs-hc-slide.vs-hc-active { opacity: 1; pointer-events: auto; z-index: 1; }
.vs-hc-overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 10%, color-mix(in srgb, var(--vs-primary) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at 70% 90%, color-mix(in srgb, var(--vs-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85));
}
.vs-hc-content {
  position: relative; z-index: 1;
  padding: 40px 24px; max-width: 920px;
}
.vs-hc-content h1 {
  font-family: var(--vs-heading-font); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800;
  color: #fff; margin: 0 0 14px; line-height: 1.04; letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.vs-hc-content p {
  font-size: clamp(1rem, 1.4vw, 1.25rem); color: rgba(255,255,255,0.92); margin: 0 0 28px;
  max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.55;
}
.vs-hc-content .vs-btn { padding: 16px 36px; font-size: 0.95rem; }
/* Per-slide CTA position override (default: centered with the text). */
.vs-hc-content a.vs-hc-cta-left   { display: block; width: fit-content; margin-left: 0;    margin-right: auto; }
.vs-hc-content a.vs-hc-cta-center { display: block; width: fit-content; margin-left: auto;  margin-right: auto; }
.vs-hc-content a.vs-hc-cta-right  { display: block; width: fit-content; margin-left: auto;  margin-right: 0; }
.vs-hc-content a.vs-hc-cta-full   { display: block; width: 100%; text-align: center; }
/* "Below image" CTA strip — sits under the carousel, syncs to the active slide. */
.vs-hc-ctabar { display: flex; padding: 18px 24px; }
.vs-hc-ctabar:empty { display: none; }
.vs-hc-ctabar-left   { justify-content: flex-start; }
.vs-hc-ctabar-center { justify-content: center; }
.vs-hc-ctabar-right  { justify-content: flex-end; }

/* Per-slide entrance animations — applied while .vs-hc-active is set. */
.vs-hc-slide.vs-hc-anim-fade.vs-hc-active        { animation: vsHCFade 1s ease forwards; }
.vs-hc-slide.vs-hc-anim-slide-left.vs-hc-active  { animation: vsHCSlideLeft 1s ease forwards; }
.vs-hc-slide.vs-hc-anim-slide-right.vs-hc-active { animation: vsHCSlideRight 1s ease forwards; }
.vs-hc-slide.vs-hc-anim-slide-up.vs-hc-active    { animation: vsHCSlideUp 1s ease forwards; }
.vs-hc-slide.vs-hc-anim-zoom-in.vs-hc-active     { animation: vsHCZoomIn 1s ease forwards; }
.vs-hc-slide.vs-hc-anim-zoom-out.vs-hc-active    { animation: vsHCZoomOut 1s ease forwards; }
.vs-hc-slide.vs-hc-anim-ken-burns.vs-hc-active   { animation: vsHCKenBurns 14s ease-in-out infinite alternate; }
@keyframes vsHCFade        { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsHCSlideLeft   { from { opacity: 0; transform: translateX( 80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vsHCSlideRight  { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vsHCSlideUp     { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vsHCZoomIn      { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes vsHCZoomOut     { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes vsHCKenBurns    { from { transform: scale(1); }                 to { transform: scale(1.10); } }

/* Nav controls */
.vs-hc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,0.4); color: #fff;
  font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.15s;
}
.vs-hc-arrow:hover { background: rgba(0,0,0,0.6); transform: translateY(-50%) scale(1.05); }
.vs-hc-prev { left: 16px; }
.vs-hc-next { right: 16px; }
.vs-hc-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 8px;
}
.vs-hc-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.4); transition: background 0.15s, transform 0.15s;
}
.vs-hc-dot:hover { background: rgba(255,255,255,0.7); }
.vs-hc-dot-active { background: var(--vs-primary, #fbbf24); transform: scale(1.2); }

/* Slides editor in the dashboard */
.sb-slides { display: flex; flex-direction: column; gap: 14px; }
.sb-slide {
  border: 1px solid var(--border-2, #2a2a3e); border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.025); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* Header bar — pronounced, doubles as the drag handle. Accent left rule. */
.sb-slide-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.82rem; color: var(--white, #fff);
  padding: 9px 12px; cursor: grab;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--border-2, #2a2a3e);
  border-left: 3px solid var(--accent, #F2D264);
}
.sb-slide-head:active { cursor: grabbing; }
.sb-slide-drag { color: var(--text-dim, #888); font-size: 0.95rem; line-height: 1; user-select: none; }
.sb-slide-title { flex: 1; }
.sb-slide-skip-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.12); color: var(--text-dim, #bbb);
}
.sb-slide-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.sb-slide-head-actions button { background: rgba(255,255,255,0.06); color: var(--text); border: 0; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-weight: 600; }
.sb-slide-head-actions button:hover { background: rgba(255,255,255,0.14); }
.sb-slide-skip-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--text-dim, #aaa); cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.sb-slide-skip-toggle input { margin: 0; cursor: pointer; }
.sb-slide-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
/* Skipped: collapse the body, dim + neutralize the header accent. */
.sb-slide-skipped { opacity: 0.75; }
.sb-slide-skipped .sb-slide-head { border-left-color: var(--text-dim, #666); background: rgba(255,255,255,0.02); }
.sb-slide-skipped .sb-slide-body { display: none; }
/* Drag-and-drop feedback. */
.sb-slide-dragging { opacity: 0.4; }
.sb-slide-dragover { outline: 2px dashed var(--accent, #F2D264); outline-offset: 1px; }
.sb-slide-input { width: 100%; padding: 6px 8px; font-size: 0.85rem;
  background: var(--bg-input, #1a1a2e); border: 1px solid var(--border, #2a2a3e); border-radius: 4px; color: var(--text); }
.sb-slide-row { display: flex; gap: 6px; }
.sb-slide-row .sb-slide-input { flex: 1; }
.sb-slide-add {
  background: var(--accent-bg, rgba(242,210,100,0.12)); color: var(--accent, #F2D264);
  border: 1px dashed var(--accent, #F2D264); border-radius: 6px;
  padding: 8px; cursor: pointer; font-weight: 600;
}
.vs-view-toggle {
  display: inline-flex; gap: 0;
  background: var(--vs-card-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.1));
  border-radius: 8px; padding: 3px;
}
.vs-view-toggle-btn {
  padding: 6px 14px; font-size: 0.78rem; font-weight: 600;
  color: var(--vs-text); background: transparent; border: 0; cursor: pointer;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.vs-view-toggle-btn:hover { color: var(--vs-heading); }
.vs-view-toggle-btn.vs-view-toggle-active {
  background: var(--vs-primary); color: var(--vs-bg);
}
.vs-event-views .vs-event-view { display: none; }
.vs-event-widget[data-active-view="grid"]     .vs-event-view-grid     { display: block; }
.vs-event-widget[data-active-view="list"]     .vs-event-view-list     { display: block; }
.vs-event-widget[data-active-view="carousel"] .vs-event-view-carousel { display: block; }
.vs-event-widget[data-active-view="calendar"] .vs-event-view-calendar { display: block; }

/* ─── Media collection multi-view ──────────────────────────────────────── */
.vs-vc-views .vs-vc-view { display: none; }
.vs-media-widget[data-active-view="grid"]     .vs-vc-view-grid     { display: block; }
.vs-media-widget[data-active-view="carousel"] .vs-vc-view-carousel { display: block; }
.vs-vc-cols-1 { grid-template-columns: 1fr !important; }

/* ─── List view ─────────────────────────────────────────────────────────── */
.vs-event-list { display: flex; flex-direction: column; gap: 12px; }
.vs-event-row {
  display: flex; gap: 16px; padding: 14px;
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.08));
  border-radius: 10px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.vs-event-row:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--vs-primary);
  transform: translateY(-1px);
}
.vs-event-row-thumb {
  flex: 0 0 88px; width: 88px; height: 88px;
  border-radius: 8px; overflow: hidden;
  background: var(--vs-card-bg, rgba(255,255,255,0.05));
}
.vs-event-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-event-row-body { flex: 1; min-width: 0; }
.vs-event-row-title {
  font-family: var(--vs-heading-font, inherit); font-weight: 700; font-size: 1.05rem;
  color: var(--vs-heading); margin-bottom: 2px;
}
.vs-event-row-date {
  font-size: 0.85rem; color: var(--vs-accent);
  font-weight: 600; margin-bottom: 6px;
}
.vs-event-row-desc {
  font-size: 0.85rem; color: var(--vs-text); opacity: 0.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Favorites star + heart ────────────────────────────────────────────── */
.vs-fav-star, .vs-fav-heart {
  background: rgba(0,0,0,0.4);
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(255,255,255,0.55);
  padding: 6px 9px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.vs-fav-star:hover, .vs-fav-heart:hover { transform: scale(1.12); background: rgba(0,0,0,0.55); }
.vs-fav-star:hover { color: var(--vs-primary, #fbbf24); }
.vs-fav-star.active { color: var(--vs-primary, #f59e0b); }
.vs-fav-heart { padding: 8px; line-height: 0; }
.vs-fav-heart svg { width: 22px; height: 22px; display: block; overflow: visible; fill: none; stroke: #fff; stroke-width: 42; }
.vs-fav-heart:hover svg { stroke: #ff6b8a; }
.vs-fav-heart.active svg { fill: #ff3b6e; stroke: none; }
.vs-event-card { position: relative; }
.vs-event-card-title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.vs-event-card-title h3 { flex: 1; min-width: 0; }
.vs-event-card-fav { flex: 0 0 auto; margin-top: -2px; }
.vs-event-card-fav .vs-fav-star {
  background: transparent; backdrop-filter: none; padding: 2px 4px;
  color: var(--vs-text-dim, rgba(255,255,255,0.45));
}
.vs-event-card-fav .vs-fav-star:hover { background: transparent; }
/* Re-state active gold at higher specificity than the inline placement
   override above, otherwise the dim-text color wins and favorited cards
   look identical to unfavorited ones. */
.vs-event-card-fav .vs-fav-star.active,
.vs-event-card-fav .vs-fav-star.active:hover {
  color: var(--vs-primary, #f59e0b);
}
.vs-event-row-fav {
  display: flex; align-items: center; padding-right: 10px;
}
.vs-event-row-fav .vs-fav-star { background: transparent; backdrop-filter: none; }
.vs-event-row-fav .vs-fav-star.active { color: var(--vs-primary, #f59e0b); }

/* "Get Tickets" CTA (Upcoming Events widget — Show CTA). On cards the button is
   pinned bottom-trailing; in list rows it sits right-aligned below the body. */
.vs-event-cta-row { margin-top: auto; padding-top: 12px; display: flex; justify-content: flex-end; }
.vs-event-row-cta { margin-top: 10px; text-align: right; }
/* Card footer: recurrence chip (left) + Get Tickets CTA (right) on one row. */
.vs-event-footer { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vs-event-footer .vs-recurrence-chip { margin: 0; }
/* Match the recurrence chip's size — a compact pill, not a full-size button. */
.vs-event-cta {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; line-height: 1.3; min-width: 0;
}
.vs-btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.vs-entertainer-card { position: relative; }
.vs-entertainer-card-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
}

/* ─── Voting (checkbox on profile cards / rows) ─────────────────────────── */
.vs-vote-prompt {
  font-size: 0.9rem; color: var(--vs-text-dim, rgba(255,255,255,0.7));
  margin: 6px 0 0;
}
.vs-vote-prompt strong { color: var(--vs-heading, #fff); }
/* Non-linked cards (widget's "Link to profile pages" off) shouldn't look clickable. */
.vs-entertainer-card-nolink, .vs-entertainer-row-nolink { cursor: default; }
/* Vote control sits centered at the bottom of each profile card, below the name. */
.vs-entertainer-vote { text-align: center; margin-top: 12px; }
.vs-vote { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
/* Hide the native checkbox with !important so a global input[type=checkbox]
   rule (equal specificity) can't win and re-expose it. */
.vs-vote input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; -webkit-appearance: none; appearance: none; }
.vs-vote-ico { position: relative; width: 22px; height: 22px; flex-shrink: 0; color: rgba(255,255,255,0.8); }
.vs-vote-ico svg { width: 22px; height: 22px; }
/* display lives on the square/check rules (not the shared svg rule) so the
   show/hide toggle isn't outranked by `.vs-vote-ico svg` specificity — that
   bug left the check icon permanently visible beside the square. */
.vs-vote-square { display: block; }
.vs-vote-check { display: none; color: var(--vs-accent, #F2D264); }
.vs-vote:hover .vs-vote-ico { color: var(--vs-accent, #F2D264); }
.vs-vote input:checked ~ .vs-vote-ico .vs-vote-square { display: none; }
.vs-vote input:checked ~ .vs-vote-ico .vs-vote-check { display: block; }
.vs-vote-txt {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.7));
}
.vs-vote input:checked ~ .vs-vote-txt { color: var(--vs-accent, #F2D264); }
/* Row view: vote control sits in the same trailing slot as the favorite. */
.vs-entertainer-row-fav { display: flex; align-items: center; gap: 10px; }
.vs-fav-subhead {
  font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
  margin: 24px 0 12px;
}

/* ─── Public Profile Leaderboard (voting results) ───────────────────────── */
.vs-lb-status {
  text-align: center; color: var(--vs-text-dim, rgba(255,255,255,0.65));
  font-size: 0.95rem; padding: 28px 12px;
}
.vs-lb-list { display: flex; flex-direction: column; gap: 10px; }
/* One ranked row: rank | avatar | (name + bar) */
.vs-lb-row {
  display: grid; grid-template-columns: 34px 52px 1fr; align-items: center; gap: 14px;
  padding: 10px 14px; text-decoration: none;
  background: var(--vs-card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.08));
  border-radius: var(--vs-card-radius, 12px);
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
a.vs-lb-row:hover { border-color: var(--vs-primary); transform: translateY(-1px); }
.vs-lb-row-nolink { cursor: default; }
.vs-lb-rank {
  font-family: var(--vs-heading-font, inherit); font-weight: 800; font-size: 1.15rem;
  text-align: center; color: var(--vs-text-dim, rgba(255,255,255,0.55));
}
.vs-lb-crown { font-size: 1.35rem; }
.vs-lb-avatar {
  position: relative; width: 52px; overflow: hidden; flex-shrink: 0;
  border-radius: 10px; background: var(--vs-card-border, rgba(255,255,255,0.08));
}
.vs-lb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Live tally celebration ────────────────────────────────────────────────
   Added to a row/podium entry (.vs-lb-gained) for ~1.2s when that entry's vote
   count goes UP during a live re-tally. Only the entry that actually gained
   animates, so on a busy poll the board points at where the vote landed rather
   than strobing all over. Everything is transform/opacity so it composites on
   the GPU and never reflows the row — which matters because these fire while
   someone is reading the board. All of it is inside a reduce-motion guard at the
   end of this block; the tally itself always updates either way. */
.vs-lb-gained .vs-lb-avatar,
.vs-lb-gained .vs-lb-pod-avatar {
  animation: vs-lb-pop 900ms cubic-bezier(0.22, 1, 0.36, 1);
  /* The glow ring is drawn with box-shadow rather than an extra element so no
     markup changes are needed and nothing can affect layout. */
  z-index: 1;
}
@keyframes vs-lb-pop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--vs-accent, #f0abfc); }
  28%  { transform: scale(1.13); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vs-accent, #f0abfc) 45%, transparent); }
  60%  { transform: scale(0.98); box-shadow: 0 0 0 12px color-mix(in srgb, var(--vs-accent, #f0abfc) 0%, transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--vs-accent, #f0abfc) 0%, transparent); }
}

/* The bar slides to its new length instead of snapping. */
.vs-lb-gained .vs-lb-bar { animation: vs-lb-bar-sweep 900ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes vs-lb-bar-sweep {
  0%   { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

/* The count lifts, and the gain (+1, +3) floats up out of it. `data-lb-gain`
   is set by the renderer; ::after is free of layout because it's absolute. */
.vs-lb-gained .vs-lb-count,
.vs-lb-gained .vs-lb-pod-count {
  animation: vs-lb-count-lift 900ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
@keyframes vs-lb-count-lift {
  0%   { transform: translateY(0);     color: var(--vs-accent, #f0abfc); }
  30%  { transform: translateY(-3px);  color: var(--vs-accent, #f0abfc); }
  100% { transform: translateY(0); }
}
.vs-lb-gained .vs-lb-count[data-lb-gain]::after,
.vs-lb-gained .vs-lb-pod-count[data-lb-gain]::after {
  content: attr(data-lb-gain);
  position: absolute; left: 50%; bottom: 100%;
  font-weight: 800; color: var(--vs-accent, #f0abfc);
  pointer-events: none; white-space: nowrap;
  animation: vs-lb-gain-float 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes vs-lb-gain-float {
  0%   { opacity: 0; transform: translate(-50%, 4px)   scale(0.8); }
  25%  { opacity: 1; transform: translate(-50%, -6px)  scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}

/* The board's height is set per render by the renderer (see _lbRender): it
   shrinks as entries move from the list up onto the podium, so it is NOT fixed.
   Transitioning min-height turns that change into a glide instead of a jump for
   anyone watching. Growth is instant — content taller than min-height sets its
   own height — which is the right way round, since new content shouldn't be
   revealed slowly. */
.vs-lb-body { transition: min-height 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .vs-lb-body { transition: none; } }

/* An entry with no votes isn't ranked — the marker stands in for a position. */
.vs-lb-unranked { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .vs-lb-gained .vs-lb-avatar,
  .vs-lb-gained .vs-lb-pod-avatar,
  .vs-lb-gained .vs-lb-bar,
  .vs-lb-gained .vs-lb-count,
  .vs-lb-gained .vs-lb-pod-count,
  .vs-lb-gained .vs-lb-count[data-lb-gain]::after,
  .vs-lb-gained .vs-lb-pod-count[data-lb-gain]::after { animation: none; }
}
.vs-lb-main { min-width: 0; }
.vs-lb-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.vs-lb-name {
  font-weight: 700; color: var(--vs-heading, #fff); font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vs-lb-count { font-size: 0.82rem; font-weight: 600; color: var(--vs-text-dim, rgba(255,255,255,0.65)); white-space: nowrap; }
.vs-lb-track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--vs-card-border, rgba(255,255,255,0.12)) 70%, transparent);
}
.vs-lb-bar {
  height: 100%; border-radius: 999px; min-width: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--vs-primary, #F2D264) 70%, transparent), var(--vs-primary, #F2D264));
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Winner row: accent border + glow, gold bar. */
.vs-lb-winner {
  border-color: var(--vs-accent, #F2D264);
  background: color-mix(in srgb, var(--vs-accent, #F2D264) 10%, var(--vs-card-bg, rgba(255,255,255,0.03)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vs-accent, #F2D264) 30%, transparent);
}
.vs-lb-winner .vs-lb-name { color: var(--vs-accent, #F2D264); }
.vs-lb-winner .vs-lb-bar { background: linear-gradient(90deg, var(--vs-accent, #F2D264), color-mix(in srgb, var(--vs-accent, #F2D264) 60%, #fff)); }
.vs-lb-total {
  text-align: center; margin-top: 16px; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.5));
}

/* Daily results — per-day boards below the running totals. */
.vs-lb-daily { margin-top: 28px; }
.vs-lb-daily-heading {
  text-align: center; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
  padding-top: 20px; margin-bottom: 20px;
  border-top: 1px solid var(--vs-card-border, rgba(255,255,255,0.12));
}
.vs-lb-day { margin-bottom: 24px; }
.vs-lb-day:last-child { margin-bottom: 0; }
.vs-lb-day-label {
  font-weight: 700; font-size: 0.95rem; margin-bottom: 12px;
  color: var(--vs-heading, #fff);
}
.vs-lb-day .vs-lb-total { margin-top: 12px; }

/* Momentum chips (▲▼) + Rising badge. */
.vs-lb-delta {
  font-size: 0.72rem; font-weight: 700; margin-left: 8px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.vs-lb-delta-up { color: #2ecc71; }
.vs-lb-delta-down { color: #e66767; }
.vs-lb-delta-flat { color: var(--vs-text-dim, rgba(255,255,255,0.45)); }
.vs-lb-rising {
  font-size: 0.66rem; font-weight: 800; margin-left: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  color: #ffcf4d; background: rgba(255,207,77,0.14);
}
.vs-lb-pod-delta { margin-top: 2px; }

/* Tonight / Overall segmented control. */
.vs-lb-modes {
  display: inline-flex; gap: 2px; margin: 0 auto 20px; padding: 3px;
  border-radius: 999px; background: var(--vs-card-border, rgba(255,255,255,0.08));
}
.vs-leaderboard .vs-lb-modes { display: flex; width: fit-content; }
.vs-lb-mode {
  border: 0; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700;
  padding: 7px 18px; border-radius: 999px; background: transparent;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
  letter-spacing: 0.02em; transition: background .15s, color .15s;
}
.vs-lb-mode-on {
  background: var(--vs-accent, #F2D264);
  color: var(--vs-accent-contrast, #12122B);
}

/* Unique-voter line. */
.vs-lb-unique {
  text-align: center; margin-top: 8px; font-size: 0.82rem;
  color: var(--vs-text-dim, rgba(255,255,255,0.55));
}

/* Chart block wrapper. */
.vs-lb-chart {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--vs-card-border, rgba(255,255,255,0.12));
}
.vs-lb-chart-title {
  text-align: center; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.6)); margin-bottom: 16px;
}
.vs-lb-svg { width: 100%; height: auto; display: block; overflow: visible; }
.vs-lb-grid { stroke: var(--vs-card-border, rgba(255,255,255,0.12)); stroke-width: 1; }
.vs-lb-axis { fill: var(--vs-text-dim, rgba(255,255,255,0.5)); font-size: 12px; }
.vs-lb-serieslabel { fill: var(--vs-heading, #fff); font-size: 12px; font-weight: 600; }
.vs-lb-barval { fill: var(--vs-text-dim, rgba(255,255,255,0.7)); font-size: 12px; font-weight: 700; }
.vs-lb-dot { transition: r .1s; }
.vs-lb-dot:hover { r: 5; }
.vs-lb-barmark { transition: opacity .12s; }
.vs-lb-barmark:hover { opacity: 0.82; }

/* Legend (line/donut charts). */
.vs-lb-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  margin-bottom: 14px;
}
.vs-lb-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--vs-heading, #fff);
}
.vs-lb-swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
}
.vs-lb-legend-pct { color: var(--vs-text-dim, rgba(255,255,255,0.55)); font-weight: 600; }

/* Share donut. */
.vs-lb-donut-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 28px;
}
.vs-lb-donut-svg { width: 180px; height: 180px; flex: 0 0 auto; }
.vs-lb-donut-num { fill: var(--vs-heading, #fff); font-size: 34px; font-weight: 800; }
.vs-lb-donut-lbl {
  fill: var(--vs-text-dim, rgba(255,255,255,0.55)); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.vs-lb-donut-legend { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 0; }

/* Hourly heat strip. */
.vs-lb-heat {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px;
  max-width: 640px; margin: 0 auto;
}
.vs-lb-heat-cell {
  position: relative; aspect-ratio: 1 / 2.2; border-radius: 3px;
  background: var(--vs-card-border, rgba(255,255,255,0.08));
  overflow: hidden;
}
.vs-lb-heat-fill {
  position: absolute; inset: 0; background: var(--vs-accent, #F2D264);
}
.vs-lb-heat-axis {
  display: flex; justify-content: space-between; max-width: 640px;
  margin: 6px auto 0; font-size: 0.72rem;
  color: var(--vs-text-dim, rgba(255,255,255,0.5));
}

/* Podium — top 3, silver·gold·bronze visual order. */
.vs-lb-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end;
  gap: 12px; max-width: 640px; margin: 0 auto 24px;
}
.vs-lb-pod {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; gap: 6px;
}
.vs-lb-pod-nolink, .vs-lb-pod.vs-lb-row-nolink { cursor: default; }
.vs-lb-pod-medal { font-size: 1.6rem; line-height: 1; }
.vs-lb-pod-avatar {
  position: relative; width: 84px; overflow: hidden; border-radius: 12px;
  border: 2px solid var(--vs-card-border, rgba(255,255,255,0.12));
  background: var(--vs-card-border, rgba(255,255,255,0.08));
}
.vs-lb-pod-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-lb-pod-name { font-weight: 700; color: var(--vs-heading, #fff); font-size: 0.95rem; }
.vs-lb-pod-count { font-size: 0.8rem; color: var(--vs-text-dim, rgba(255,255,255,0.65)); }
.vs-lb-pod-stand {
  width: 100%; margin-top: 6px; border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--vs-card-border, rgba(255,255,255,0.12)) 80%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8px;
  font-weight: 800; font-family: var(--vs-heading-font, inherit); color: var(--vs-text-dim, rgba(255,255,255,0.5));
}
.vs-lb-pod-1 .vs-lb-pod-avatar { width: 104px; border-color: var(--vs-accent, #F2D264); }
.vs-lb-pod-1 .vs-lb-pod-name { color: var(--vs-accent, #F2D264); }
.vs-lb-pod-1 .vs-lb-pod-stand { height: 88px; background: linear-gradient(180deg, color-mix(in srgb, var(--vs-accent, #F2D264) 40%, transparent), transparent); color: var(--vs-accent, #F2D264); }
.vs-lb-pod-2 .vs-lb-pod-stand { height: 62px; }
.vs-lb-pod-3 .vs-lb-pod-stand { height: 44px; }
@media (max-width: 560px) {
  .vs-lb-pod-avatar { width: 66px; }
  .vs-lb-pod-1 .vs-lb-pod-avatar { width: 80px; }
  .vs-lb-row { grid-template-columns: 28px 44px 1fr; gap: 10px; padding: 8px 10px; }
  .vs-lb-avatar { width: 44px; }
}

/* ─── Carousel view ─────────────────────────────────────────────────────── */
.vs-event-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px);
  gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Generous vertical padding — overflow-y:hidden would clip the card's
     hover translateY + box-shadow otherwise. */
  padding: 20px 4px 24px;
  -webkit-overflow-scrolling: touch;
}
.vs-event-rail .vs-event-card { scroll-snap-align: start; }
.vs-event-rail::-webkit-scrollbar { height: 8px; }
.vs-event-rail::-webkit-scrollbar-track { background: transparent; }
.vs-event-rail::-webkit-scrollbar-thumb {
  background: var(--vs-card-border, rgba(255,255,255,0.15));
  border-radius: 4px;
}

/* ─── Calendar view ─────────────────────────────────────────────────────── */
.vs-cal {
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.08));
  border-radius: 10px; padding: 16px;
}
.vs-cal-header {
  font-family: var(--vs-heading-font, inherit); font-weight: 700; font-size: 1.2rem;
  color: var(--vs-heading); text-align: center; flex: 1 1 auto; min-width: 0;
}
/* Toolbar: ‹ prev · month/week label · next › ·· [Month][Week] */
.vs-cal-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.vs-cal-nav {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12));
  color: var(--vs-heading); font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.vs-cal-nav:hover { border-color: var(--vs-primary); color: var(--vs-primary); }
.vs-cal-modes {
  flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12)); border-radius: 999px;
}
.vs-cal-mode-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--vs-text); opacity: 0.7; padding: 5px 14px; border-radius: 999px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.vs-cal-mode-btn:hover { opacity: 1; }
.vs-cal-mode-btn.vs-cal-mode-active {
  background: var(--vs-primary); color: var(--vs-bg); opacity: 1;
}
/* Week view: a single row of taller cells reads better than forced squares. */
.vs-cal-grid-week .vs-cal-cell { aspect-ratio: auto; min-height: 130px; }

@media (max-width: 700px) {
  .vs-cal-header { order: -1; flex-basis: 100%; margin-bottom: 4px; }
  .vs-cal-grid-week { grid-template-columns: 1fr; }
  .vs-cal-grid-week .vs-cal-dow { display: none; }
  .vs-cal-grid-week .vs-cal-cell { aspect-ratio: auto; min-height: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .vs-cal-grid-week .vs-cal-events { flex-direction: row; flex-wrap: wrap; }
}
.vs-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.vs-cal-dow {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--vs-text); opacity: 0.55;
  text-align: center; padding: 8px 0;
}
.vs-cal-cell {
  /* aspect-ratio:1 + grid-template-columns: repeat(7, 1fr) gives identical squares
     regardless of how many events any single day holds. The cell is a flex column
     so the day number sits at the top and event chips flow underneath, clipped if
     they overflow. */
  aspect-ratio: 1 / 1;
  padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent; border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}
.vs-cal-cell.vs-cal-empty { background: transparent; }
.vs-cal-cell.vs-cal-has-events { border-color: var(--vs-card-border, rgba(255,255,255,0.1)); }
.vs-cal-cell.vs-cal-today {
  background: rgba(255,255,255,0.06);
  border-color: var(--vs-primary);
}
.vs-cal-num {
  font-size: 0.75rem; font-weight: 700; color: var(--vs-text); flex: 0 0 auto;
}
.vs-cal-cell.vs-cal-today .vs-cal-num { color: var(--vs-primary); }
.vs-cal-events {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0; flex: 1 1 auto; overflow: hidden;
}
.vs-cal-event {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.7rem; line-height: 1.2; padding: 2px 4px;
  background: var(--vs-primary); color: var(--vs-bg); border-radius: 3px;
  text-decoration: none; font-weight: 600;
  min-width: 0;  /* let title shrink so ellipsis kicks in */
}
.vs-cal-event-thumb {
  flex: 0 0 18px; width: 18px; height: 18px;
  border-radius: 2px; object-fit: cover; display: block;
}
.vs-cal-event-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs-cal-event:hover { opacity: 0.85; }
.vs-cal-event-fav { flex: 0 0 auto; display: inline-flex; }
.vs-cal-event-fav .vs-fav-star {
  font-size: 0.7rem; padding: 0 2px; background: transparent; backdrop-filter: none;
  color: rgba(0,0,0,0.45);
}
.vs-cal-event-fav .vs-fav-star:hover,
.vs-cal-event-fav .vs-fav-star.active { color: rgba(0,0,0,0.95); transform: none; background: transparent; }
.vs-cal-more {
  font-size: 0.65rem; color: var(--vs-text); opacity: 0.6; padding: 0 4px; flex: 0 0 auto;
}

@media (max-width: 700px) {
  .vs-filter-dates { margin-left: 0; width: 100%; }
  .vs-cal-cell { padding: 2px; gap: 1px; }
  .vs-cal-event { font-size: 0.55rem; padding: 1px 3px; gap: 2px; }
  .vs-cal-event-thumb { flex: 0 0 12px; width: 12px; height: 12px; }
  .vs-cal-num { font-size: 0.65rem; }
  .vs-cal-dow { font-size: 0.6rem; padding: 4px 0; }
  .vs-cal-more { font-size: 0.55rem; padding: 0 2px; }
  .vs-event-row-thumb { flex: 0 0 64px; width: 64px; height: 64px; }
}

/* Event grid */
.vs-event-grid { display: grid; gap: 20px; }
.vs-grid-2 { grid-template-columns: repeat(2, 1fr); }
.vs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.vs-grid-4 { grid-template-columns: repeat(4, 1fr); }
.vs-event-card {
  display: flex;
  flex-direction: column;
  background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(.22,.94,.4,1), border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.vs-event-card::before {
  /* Brand-colored glow that swells on hover */
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent));
  opacity: 0;
  transition: opacity 0.25s;
  z-index: -1;
}
.vs-event-card:hover {
  transform: translateY(-6px);
  border-color: var(--vs-primary);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--vs-primary) 50%, transparent);
}
.vs-event-image {
  position: relative; overflow: hidden;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--vs-primary) 22%, var(--vs-card-bg)), color-mix(in srgb, var(--vs-accent) 22%, var(--vs-card-bg)));
}
/* Image-variant aspect-ratio overrides (set by widget Image Variant control). */
.vs-event-image-ar-1    { aspect-ratio: 1 / 1; }
.vs-event-image-ar-4-5  { aspect-ratio: 4 / 5; }
.vs-event-image-ar-16-9 { aspect-ratio: 16 / 9; }
.vs-event-image-ar-9-16 { aspect-ratio: 9 / 16; }

/* Fallback render: the editor asked for a specific aspect ratio (e.g. Portrait
   4:5) but only an image of a different shape was uploaded (e.g. Square). To
   avoid cropping important parts of a flyer/photo, fit the actual image inside
   the slot and fill the surrounding bars with a blurred copy of the same image
   so the card still feels seamless. */
.vs-event-image.vs-event-image-fallback { background: var(--vs-card-bg, #111); }
.vs-event-image.vs-event-image-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vs-event-image.vs-event-image-fallback .vs-event-image-bg {
  object-fit: cover;
  /* scale + blur — scale prevents bare edges where the blur kernel runs off the source */
  filter: blur(24px) saturate(1.2);
  transform: scale(1.18);
  opacity: 0.85;
}
.vs-event-image.vs-event-image-fallback .vs-event-image-fg {
  object-fit: contain;
}
/* Suppress the bottom gradient on fallback slots — the blurred bg already
   provides enough contrast and the gradient looks like a defect against
   letterbox bars. */
.vs-event-image.vs-event-image-fallback::after { display: none; }
.vs-event-image::after {
  /* Subtle gradient fade at bottom of image so date text reads on busy flyers */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.vs-event-image img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: filter 0.3s ease;
}
/* No image scale — most flyers fill edge-to-edge, scaling crops important info.
   Use a brightness/saturation pump on hover instead so the card still feels alive.
   `:not(.vs-event-image-bg)` keeps the fallback's blurred background intact —
   without it, the generic `filter:` rule would replace the blur on hover. */
.vs-event-card:hover .vs-event-image img:not(.vs-event-image-bg) {
  filter: brightness(1.06) saturate(1.1);
}
/* Hover state for the fallback blurred bg: keep the blur, just nudge it
   brighter/more saturated so the card still reads as interactive. */
.vs-event-card:hover .vs-event-image .vs-event-image-bg {
  filter: blur(24px) saturate(1.35) brightness(1.04);
}

/* Card carousel: stacked images cross-fade. Dots overlay bottom edge. */
.vs-event-carousel { position: relative; }
/* Each slide is a two-layer blur-fit slot: a blurred copy fills the box, the
   actual image is contained on top so any aspect ratio fits without cropping.
   The container's aspect-ratio gives the box its height; slides overlay it. */
.vs-event-carousel .vs-carousel-img {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.vs-event-carousel .vs-carousel-img.vs-carousel-active { opacity: 1; }
.vs-event-carousel .vs-carousel-img > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vs-event-carousel .vs-carousel-img .vs-event-image-bg {
  object-fit: cover; filter: blur(24px) saturate(1.2); transform: scale(1.18); opacity: 0.85;
}
.vs-event-carousel .vs-carousel-img .vs-event-image-fg { object-fit: contain; }
/* Blurred bg already provides contrast; suppress the bottom gradient bar. */
.vs-event-image.vs-event-carousel::after { display: none; }
/* Real iOS devices cap WebKit filter/compositing memory far below desktop and
   the simulator; a large blur radius at Retina DPR allocates a big offscreen
   backing store per card, and a grid of them (rasterized together when the
   section scrolls in) crashed the tab. Shrink the radius + scale on phones —
   visually near-identical on a small screen, dramatically cheaper to raster. */
@media (max-width: 768px) {
  .vs-event-image.vs-event-image-fallback .vs-event-image-bg,
  .vs-event-carousel .vs-carousel-img .vs-event-image-bg {
    filter: blur(12px) saturate(1.2);
    transform: scale(1.1);
  }
  .vs-event-card:hover .vs-event-image .vs-event-image-bg {
    filter: blur(12px) saturate(1.35) brightness(1.04);
  }
}
.vs-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 10; pointer-events: none;
}
.vs-carousel-dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background 0.3s, width 0.3s;
  pointer-events: all; cursor: pointer;
}
/* Enlarged invisible hit area so the tiny dots are easy to tap */
.vs-carousel-dot::before {
  content: ''; position: absolute;
  inset: -8px;
}
.vs-carousel-dot-active { background: #fff; width: 18px; border-radius: 3px; }

/* Event detail page: gallery section */
.vs-event-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.vs-event-gallery-item {
  cursor: pointer; overflow: hidden;
  border-radius: var(--vs-card-radius);
  aspect-ratio: 1/1;
  background: var(--vs-card-bg);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vs-event-gallery-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.vs-event-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lightbox */
.vs-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: vs-fade-in 0.18s ease-out;
}
.vs-lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.vs-lightbox-close {
  position: absolute; top: 20px; right: 24px;
  background: transparent; border: none; color: #fff;
  font-size: 2.2rem; cursor: pointer; line-height: 1;
}
/* SmugMug lightbox nav */
.vs-smugmug-lightbox { flex-direction: column; gap: 12px; cursor: default; }
.vs-smugmug-lb-caption { color: rgba(255,255,255,.65); font-size: .85rem; text-align: center; min-height: 1.2em; }
.vs-smugmug-lb-prev, .vs-smugmug-lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 2.8rem; line-height: 1; padding: 4px 14px; border-radius: 6px;
  cursor: pointer; transition: background .15s;
}
.vs-smugmug-lb-prev:hover, .vs-smugmug-lb-next:hover { background: rgba(255,255,255,.25); }
.vs-smugmug-lb-prev { left: 16px; }
.vs-smugmug-lb-next { right: 16px; }
@keyframes vs-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Video Collection widget ─────────────────────────────────────────── */
.vs-vc-grid { display: grid; gap: 18px; }
.vs-vc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.vs-vc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.vs-vc-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .vs-vc-cols-3, .vs-vc-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vs-vc-grid { grid-template-columns: 1fr; } }

.vs-vc-list { display: flex; flex-direction: column; gap: 14px; }
.vs-vc-list .vs-vc-card { flex-direction: row; align-items: center; text-align: left; gap: 16px; }
.vs-vc-list .vs-vc-thumb { width: 240px; flex: 0 0 240px; }
.vs-vc-list .vs-vc-meta { padding: 0; }
@media (max-width: 560px) { .vs-vc-list .vs-vc-card { flex-direction: column; align-items: stretch; } .vs-vc-list .vs-vc-thumb { width: 100%; flex: none; } }

/* Carousel — horizontal scroll-snap rail (mirrors .vs-event-rail) */
.vs-vc-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px);
  gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; padding: 8px 4px 20px;
  -webkit-overflow-scrolling: touch;
}
.vs-vc-rail .vs-vc-card { scroll-snap-align: start; }
.vs-vc-rail::-webkit-scrollbar { height: 8px; }
.vs-vc-rail::-webkit-scrollbar-track { background: transparent; }
.vs-vc-rail::-webkit-scrollbar-thumb { background: var(--vs-card-border, rgba(255,255,255,0.15)); border-radius: 4px; }

/* Card — wrapper holding the lightbox trigger + optional CTA link */
.vs-vc-card {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
}
/* Trigger (a <button> reset to a media tile) */
.vs-vc-trigger {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0; border: none; background: none; text-align: left;
  color: inherit; font: inherit; cursor: pointer; width: 100%;
}
.vs-vc-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--vs-card-radius, 10px);
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.10));
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
}
.vs-vc-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.vs-vc-card:hover .vs-vc-poster { transform: scale(1.04); }
.vs-vc-scale-contain .vs-vc-poster { object-fit: contain; background: var(--vs-card-bg, #111); }
.vs-vc-scale-contain .vs-vc-card:hover .vs-vc-poster { transform: none; }
.vs-vc-scale-fill .vs-vc-poster { object-fit: fill; }
.vs-vc-ratio-4-3  .vs-vc-thumb { aspect-ratio: 4 / 3; }
.vs-vc-ratio-1-1  .vs-vc-thumb { aspect-ratio: 1 / 1; }
.vs-vc-ratio-3-4  .vs-vc-thumb { aspect-ratio: 3 / 4; }
.vs-vc-ratio-9-16 .vs-vc-thumb { aspect-ratio: 9 / 16; }
/* Adaptive — each thumbnail keeps its own media's natural proportions (no crop).
   The image drives the card height, so a row becomes a ragged/masonry-ish set of
   true-to-source tiles instead of uniformly cropped frames. */
.vs-vc-ratio-auto .vs-vc-thumb  { aspect-ratio: auto; height: auto; }
.vs-vc-ratio-auto .vs-vc-poster { height: auto; object-fit: contain; }
/* Fixed card heights — override aspect-ratio when set (grid, list, carousel) */
.vs-vc-ch-sm .vs-vc-thumb { height: 200px; aspect-ratio: unset; }
.vs-vc-ch-md .vs-vc-thumb { height: 300px; aspect-ratio: unset; }
.vs-vc-ch-lg .vs-vc-thumb { height: 400px; aspect-ratio: unset; }
.vs-vc-ch-xl .vs-vc-thumb { height: 520px; aspect-ratio: unset; }

/* Play-button overlay (circle + CSS triangle) */
.vs-vc-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease;
}
.vs-vc-play::before {
  content: ""; display: block;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.vs-vc-card:hover .vs-vc-play, .vs-vc-card:focus-visible .vs-vc-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: color-mix(in srgb, var(--vs-accent) 80%, rgba(0,0,0,0.55));
}
.vs-vc-trigger:focus-visible { outline: none; }
.vs-vc-trigger:focus-visible .vs-vc-thumb { outline: 2px solid var(--vs-accent); outline-offset: 2px; }

.vs-vc-meta { display: flex; flex-direction: column; gap: 4px; }
.vs-vc-title { font-weight: 600; color: var(--vs-heading); line-height: 1.3; }
.vs-vc-desc { font-size: 0.88rem; color: var(--vs-text); opacity: 0.8; line-height: 1.45; }

/* Per-item CTA link — pinned to the bottom of the card so a whole row of CTAs
   lines up, regardless of how tall each image/title/description runs. The card
   stretches to fill its grid cell (grid items stretch by default); margin-top:
   auto on the CTA eats the leftover vertical space. */
.vs-vc-card { height: 100%; }
.vs-vc-cta { align-self: flex-start; margin-top: auto; }

/* ── Video lightbox ──────────────────────────────────────────────────── */
.vs-video-lightbox { cursor: default; }
.vs-video-lightbox-inner { position: relative; width: min(90vw, 1100px); }
.vs-lightbox-video {
  width: 100%; max-height: 85vh; aspect-ratio: 16 / 9;
  border-radius: 6px; background: #000; display: block; border: none;
}
.vs-video-lightbox .vs-lightbox-close { top: -8px; right: 0; transform: translateY(-100%); }
@media (max-width: 640px) { .vs-video-lightbox .vs-lightbox-close { top: -12px; } }

.vs-event-info { padding: 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
/* Series cards: flex column so the recurrence chip pins to the card bottom
   (scoped to series cards — event cards keep their default block layout). */
.vs-series-card { display: flex; flex-direction: column; }
.vs-series-card .vs-event-info { flex: 1 1 auto; display: flex; flex-direction: column; }
.vs-series-recurrence { margin-top: auto; padding-top: 12px; }
.vs-recurrence-chip {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--vs-card-border); color: var(--vs-text);
}
.vs-event-info h3 { margin: 0 0 6px; font-family: var(--vs-heading-font); font-size: 1rem; font-weight: 700; color: var(--vs-heading); }
.vs-event-date { margin: 0 0 4px; font-size: 0.82rem; color: var(--vs-accent); font-weight: 500; }
/* Custom per-night name shown above the description (series name is the h3). */
.vs-event-name { margin: 8px 0 0; font-size: 0.92rem; font-weight: 700; color: var(--vs-heading); line-height: 1.3; }
.vs-event-desc { margin: 6px 0 0; font-size: 0.82rem; color: var(--vs-text); line-height: 1.4; }
/* Gallery grid + lightbox base now live in the shared sb-gallery.css
   (.vs-gallery-grid / .vs-gallery-item / .vs-gallery-lightbox / .vs-lightbox).
   SmugMug album-browser chrome below stays here — it's the phosphorOS provider. */
/* phosphorOS gallery tiles default to portrait 4:5, not the shared square.
   Venue galleries are overwhelmingly event flyers and vertical show photography,
   so a square tile crops the top and bottom off most of them. Kept on `cover`
   so the grid stays uniformly filled — landscape shots center-crop.
   Scoped through .vs-gallery-grid on purpose: sb-gallery.css is a symlink into
   the shared StratusBuilder module and loads AFTER this file, so a bare
   `.vs-gallery-item img` rule here would lose on source order. Overriding
   locally rather than editing the shared default leaves ThreeClicks (the other
   live consumer of that symlink) on square. */
.vs-gallery-grid .vs-gallery-item img { aspect-ratio: 4 / 5; }
/* SmugMug album browser */
.vs-smugmug-albums { display: grid; gap: 16px; }
.vs-smugmug-album-card { border-radius: 10px; overflow: hidden; background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); transition: transform .15s, box-shadow .15s; cursor: pointer; }
.vs-smugmug-album-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.vs-smugmug-album-thumb { position: relative; aspect-ratio: 4/3; background: var(--vs-card-border); display: flex; align-items: flex-end; padding: 8px; overflow: hidden; }
.vs-smugmug-carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s ease; }
.vs-smugmug-album-count { position: relative; z-index: 1; font-size: .75rem; background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: 20px; }
.vs-smugmug-album-label { padding: 10px 12px; font-size: .9rem; font-weight: 600; color: var(--vs-heading); line-height: 1.3; }
.vs-smugmug-album-event { padding: 0 12px 8px; font-size: .78rem; color: var(--vs-accent); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-smugmug-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.vs-smugmug-back-btn { background: none; border: none; cursor: pointer; color: var(--vs-text); opacity: .7; font-size: .9rem; padding: 0; }
.vs-smugmug-back-btn:hover { opacity: 1; }
/* Entertainer grid */
.vs-entertainer-grid { display: grid; gap: 20px; }
.vs-entertainer-card {
  display: block;
  background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.22,.94,.4,1), border-color 0.25s, box-shadow 0.25s;
  position: relative;
}
.vs-entertainer-card:hover {
  transform: translateY(-6px);
  border-color: var(--vs-primary);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--vs-primary) 50%, transparent);
}
.vs-entertainer-photo {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, color-mix(in srgb, var(--vs-primary) 22%, var(--vs-card-bg)), color-mix(in srgb, var(--vs-accent) 22%, var(--vs-card-bg)));
}
.vs-entertainer-photo img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: filter 0.3s ease;
}

/* Fit-not-crop for profile photos whose shape doesn't match the widget's chosen
   Image Variant — the same problem .vs-event-image-fallback solves for events,
   which profile cards never got. The backdrop is the same image blurred and
   covering; the foreground is contained on top. A matching image fills the slot
   and hides the backdrop entirely, so correctly-shaped photos look unchanged. */
.vs-entertainer-photo-fit::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--vs-photo);
  background-size: cover;
  background-position: center;
  /* scale past the edges so the blur kernel never runs off the source */
  filter: blur(24px) saturate(1.2);
  transform: scale(1.18);
  opacity: 0.85;
}
.vs-entertainer-photo-fit img {
  position: relative;   /* above the blurred backdrop */
  object-fit: contain;
}
.vs-entertainer-card:hover .vs-entertainer-photo img { filter: brightness(1.06) saturate(1.1); }
.vs-entertainer-eliminated .vs-entertainer-photo img,
.vs-entertainer-eliminated .vs-entertainer-row-thumb img { filter: grayscale(1); opacity: 0.65; }
.vs-entertainer-eliminated:hover .vs-entertainer-photo img { filter: grayscale(1); opacity: 0.65; }
.vs-entertainer-eliminated-ribbon {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(110,0,0,0.88); color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; text-align: center; padding: 5px 0;
  border-radius: 0 0 6px 6px;
}
.vs-entertainer-row-thumb { position: relative; }
/* Card image size — selectable per widget (defaults to portrait). Two-class
   selectors override the default aspect-ratio: 3/4 on .vs-entertainer-photo. */
.vs-entertainer-photo.vs-ar-portrait { aspect-ratio: 4 / 5; }
.vs-entertainer-photo.vs-ar-square   { aspect-ratio: 1 / 1; }
.vs-entertainer-photo.vs-ar-flyer    { aspect-ratio: 16 / 9; }
.vs-entertainer-photo.vs-ar-story    { aspect-ratio: 9 / 16; }
.vs-entertainer-info { padding: 16px; text-align: center; }
.vs-entertainer-info h3 {
  margin: 0 0 4px; font-family: var(--vs-heading-font); font-size: 1.05rem; font-weight: 700;
  color: var(--vs-heading); transition: color 0.2s;
}
.vs-entertainer-card:hover .vs-entertainer-info h3 { color: var(--vs-primary); }
.vs-entertainer-type { font-size: 0.75rem; color: var(--vs-accent); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.vs-entertainer-info p { margin: 6px 0 0; font-size: 0.82rem; color: var(--vs-text); }
/* Entertainer profile detail */
.vs-entertainer-detail { text-align: center; max-width: 700px; margin: 0 auto; }
.vs-entertainer-hero img { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; margin: 0 auto 24px; display: block; border: 3px solid var(--vs-primary); }
.vs-entertainer-name { font-family: var(--vs-heading-font); font-size: 2.2rem; font-weight: 800; color: var(--vs-heading); margin: 0 0 8px; }
.vs-entertainer-type-badge { display: inline-block; padding: 4px 14px; border: 1px solid var(--vs-accent); border-radius: 20px; font-size: 0.75rem; color: var(--vs-accent); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 20px; }
.vs-entertainer-social { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.vs-social-icon {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--vs-card-border);
  border-radius: 20px;
  color: var(--vs-text);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.15s;
}
.vs-social-icon:hover { border-color: var(--vs-primary); color: var(--vs-primary); }
.vs-entertainer-bio { color: var(--vs-text); line-height: 1.7; font-size: 0.95rem; text-align: left; margin-bottom: 24px; }
.vs-entertainer-gallery { margin-top: 24px; }
/* History timeline */
.vs-timeline { position: relative; padding: 20px 0; }
.vs-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--vs-card-border); transform: translateX(-50%); }
.vs-timeline-item { position: relative; margin-bottom: 40px; display: flex; }
.vs-timeline-left { justify-content: flex-end; padding-right: calc(50% + 30px); }
.vs-timeline-right { justify-content: flex-start; padding-left: calc(50% + 30px); }
.vs-timeline-dot { position: absolute; left: 50%; top: 6px; width: 14px; height: 14px; background: var(--vs-primary); border-radius: 50%; transform: translateX(-50%); z-index: 1; }
.vs-timeline-content { max-width: 400px; }
.vs-timeline-year { font-family: var(--vs-heading-font); font-weight: 700; font-size: 0.85rem; color: var(--vs-primary); text-transform: uppercase; letter-spacing: 1px; }
.vs-timeline-content h3 { margin: 4px 0 8px; font-family: var(--vs-heading-font); font-size: 1.1rem; font-weight: 700; color: var(--vs-heading); }
.vs-timeline-content p { margin: 0; font-size: 0.88rem; color: var(--vs-text); line-height: 1.6; }
.vs-timeline-img { width: 100%; border-radius: 8px; margin: 10px 0; }
/* Ticket CTA */
.vs-ticket-cta {
  background: linear-gradient(135deg, var(--vs-card-bg), color-mix(in srgb, var(--vs-primary) 8%, var(--vs-card-bg)));
  border-top: 1px solid var(--vs-card-border);
  border-bottom: 1px solid var(--vs-card-border);
  padding: var(--vs-section-pad-y) 0;
  text-align: center;
}
:root[data-vs-mode="light"] .vs-ticket-cta { background: var(--vs-card-bg); }
.vs-ticket-cta h2 { font-family: var(--vs-heading-font); font-size: 1.8rem; font-weight: 800; color: var(--vs-heading); margin: 0 0 12px; }
.vs-ticket-cta p { color: var(--vs-text); font-size: 1rem; margin: 0 0 24px; }
/* CTA banner */
.vs-cta-banner { background: var(--vs-card-bg); padding: var(--vs-section-pad-y) 0; text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.vs-cta-banner h2 { font-family: var(--vs-heading-font); font-size: 1.6rem; font-weight: 700; color: var(--vs-heading); margin: 0 0 12px; position: relative; z-index: 1; }
.vs-cta-banner p { color: var(--vs-text); margin: 0 0 20px; position: relative; z-index: 1; }
.vs-cta-banner .vs-btn { position: relative; z-index: 1; }
/* Newsletter form */
.vs-newsletter { background: var(--vs-card-bg); }
.vs-newsletter-form { display: flex; gap: 10px; max-width: 440px; margin: 20px auto 0; }
.vs-newsletter-input { flex: 1; padding: 12px 16px; background: var(--vs-bg); border: 1px solid var(--vs-card-border); color: var(--vs-heading); border-radius: var(--vs-input-radius); font-size: 0.9rem; outline: none; font-family: var(--vs-font); }
.vs-newsletter-input:focus { border-color: var(--vs-primary); }
/* Venue info */
.vs-venue-info { text-align: center; }
.vs-venue-logo { max-width: 200px; height: auto; margin: 0 auto 20px; display: block; }
.vs-venue-address { color: var(--vs-text); font-size: 0.9rem; }
/* Menu */
.vs-menu { margin-bottom: 32px; }
.vs-menu-heading { font-family: var(--vs-heading-font); font-size: 1.4rem; font-weight: 700; color: var(--vs-heading); margin: 0 0 8px; text-align: center; }
.vs-menu-desc { color: var(--vs-text); text-align: center; font-size: 0.92rem; margin: 0 auto 20px; max-width: 640px; line-height: 1.55; }
.vs-menu-cover {
  width: 240px; max-width: 100%; aspect-ratio: 1 / 1;
  margin: 0 auto 18px; border-radius: 12px; overflow: hidden;
  background: var(--vs-card-bg);
}
.vs-menu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hero-style cover above the section heading: a touch bigger, breathing room
   below the image. The default `.vs-menu-cover` stays 240px for per-menu use. */
.vs-menu-cover-top {
  width: 320px;
  margin-bottom: 24px;
}
.vs-menu-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--vs-card-border); }
.vs-menu-item-with-image { align-items: flex-start; }
.vs-menu-item-thumb {
  flex: 0 0 80px; width: 80px; height: 80px;
  border-radius: 8px; overflow: hidden; background: var(--vs-card-bg);
}
.vs-menu-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-menu-item-gallery {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.vs-menu-item-gallery-thumb {
  width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
  background: var(--vs-card-bg); display: block;
}
.vs-menu-item-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-menu-item-info { flex: 1; min-width: 0; }

/* ── Menu display modes: cards + carousel ─────────────────────────────── */
.vs-menu-card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-bottom: 24px;
}
.vs-menu-card-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px);
  gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Padding absorbs the card hover translateY + 20px box-shadow that would
     otherwise be clipped by overflow-y:hidden. */
  padding: 20px 4px 24px;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
}
.vs-menu-card-rail::-webkit-scrollbar { height: 8px; }
.vs-menu-card-rail::-webkit-scrollbar-thumb { background: var(--vs-card-border); border-radius: 4px; }
.vs-menu-card-rail .vs-menu-card { scroll-snap-align: start; }

.vs-menu-card {
  display: flex; flex-direction: column; gap: 0;
  background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border);
  border-radius: 10px; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.vs-menu-card:hover { border-color: var(--vs-primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.vs-menu-card-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--vs-card-border); position: relative;
  overflow: hidden;
}
.vs-menu-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-menu-card-thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700; color: var(--vs-text-dim, rgba(255,255,255,0.4));
  background: var(--vs-card-bg);
}
.vs-menu-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.vs-menu-card-name { font-family: var(--vs-heading-font); font-weight: 700; color: var(--vs-heading); font-size: 0.96rem; }
.vs-menu-card-desc { font-size: 0.82rem; color: var(--vs-text); line-height: 1.45; }
.vs-menu-card-price { margin-top: auto; padding-top: 6px; color: var(--vs-primary); font-weight: 700; font-size: 0.95rem; }

/* Add-on options (paid extras) */
.vs-menu-item-addons { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-menu-card .vs-menu-item-addons { margin-top: 4px; }
.vs-menu-addon { display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.82rem; color: var(--vs-text); opacity: 0.92; line-height: 1.4; }
.vs-menu-addon-price { color: var(--vs-primary); font-weight: 600; white-space: nowrap; }

/* Menu-item promo video "Watch" button */
.vs-menu-video-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 12px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--vs-primary); background: transparent;
  border: 1px solid var(--vs-primary); border-radius: 999px;
  cursor: pointer; font-family: var(--vs-body-font, inherit);
  transition: background 0.15s, color 0.15s;
}
.vs-menu-video-btn:hover { background: var(--vs-primary); color: var(--vs-bg, #0d0d1a); }
.vs-menu-video-btn svg { display: block; }

@media (max-width: 640px) {
  .vs-menu-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .vs-menu-card-rail { grid-auto-columns: minmax(180px, 200px); }
}
.vs-menu-item-name { font-family: var(--vs-heading-font); font-weight: 600; color: var(--vs-heading); font-size: 1rem; margin-bottom: 2px; }
.vs-menu-item-desc { color: var(--vs-text); font-size: 0.85rem; line-height: 1.5; }
.vs-menu-item-price { color: var(--vs-primary); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.vs-menu-section {
  font-family: var(--vs-heading-font); font-size: 1rem; font-weight: 700;
  color: var(--vs-primary); text-transform: uppercase; letter-spacing: 0.08em;
  margin: 24px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--vs-card-border);
}
.vs-menu-section:first-child { margin-top: 0; }
/* Active pricing-scenario banner (e.g. "Holiday pricing in effect"). */
.vs-menu-price-note {
  display: inline-block; margin: 0 0 12px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vs-accent, #F2D264);
  background: color-mix(in srgb, var(--vs-accent, #F2D264) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--vs-accent, #F2D264) 35%, transparent);
}
.vs-menu-pdf-wrap {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 28px;
}
.vs-menu-pdf-wrap.vs-menu-pdf-wrap-top {
  margin-top: 0; margin-bottom: 28px;
}
.vs-menu-pdf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-size: 0.95rem; font-weight: 600;
  background: var(--vs-primary); color: var(--vs-bg);
  border: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--vs-button-radius, 6px);
  text-decoration: none; transition: opacity 0.15s, transform 0.1s;
}
.vs-menu-pdf-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.vs-menu-flip-btn {
  background: transparent; color: var(--vs-primary);
  border: 1px solid var(--vs-primary);
}
.vs-menu-flip-btn:hover {
  background: var(--vs-primary); color: var(--vs-bg);
}
.vs-menu-intro {
  text-align: center; color: var(--vs-text); font-size: 0.95rem; line-height: 1.55;
  max-width: 720px; margin: 0 auto 28px;
}

/* Flipbook overlay */
body.vs-flip-active { overflow: hidden; }
.vs-flip-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.vs-flip-stage {
  position: relative; perspective: 1800px;
  width: 100%; max-width: 800px; height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
}
/* Spread mode — used for short PDFs (≤2 pages). Pages sit side-by-side,
   no flip animation, no nav UI. The stage widens to give both pages room. */
.vs-flip-overlay.vs-flip-spread .vs-flip-stage {
  max-width: min(1600px, calc(100vw - 60px));
  perspective: none;
  gap: 12px;
}
.vs-flip-spread-page {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  max-width: 50%; max-height: 100%; width: auto; height: auto;
  flex: 0 1 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  background: #fff;
}
@media (max-width: 700px) {
  /* On phone-width screens a true side-by-side spread is unreadable —
     stack the two pages vertically instead. */
  .vs-flip-overlay.vs-flip-spread .vs-flip-stage {
    flex-direction: column;
    overflow-y: auto;
    align-items: center;
    height: calc(100vh - 80px);
  }
  .vs-flip-spread-page { max-width: 100%; max-height: none; }
}
.vs-flip-loading { color: rgba(255,255,255,0.7); font-size: 1rem; }
.vs-flip-page {
  position: absolute; max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  background: #fff; opacity: 0; pointer-events: none;
  transform: rotateY(0deg); transform-origin: center center;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.22,.7,.4,1);
}
.vs-flip-page.vs-flip-page-active { opacity: 1; pointer-events: auto; transform: rotateY(0deg); }
.vs-flip-page.vs-flip-out-left  { opacity: 0; transform: rotateY(-25deg) translateX(-12%); }
.vs-flip-page.vs-flip-out-right { opacity: 0; transform: rotateY( 25deg) translateX( 12%); }
.vs-flip-page.vs-flip-in-left   { opacity: 0; transform: rotateY( 25deg) translateX( 12%); }
.vs-flip-page.vs-flip-in-right  { opacity: 0; transform: rotateY(-25deg) translateX(-12%); }
.vs-flip-close {
  position: absolute; top: 16px; right: 20px; z-index: 10;
  background: transparent; color: #fff; border: 0;
  font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 4px 12px;
  border-radius: 50%;
}
.vs-flip-close:hover { background: rgba(255,255,255,0.12); }
.vs-flip-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); color: #fff; border: 0;
  width: 48px; height: 64px; font-size: 1.8rem; line-height: 1;
  cursor: pointer; border-radius: 8px; transition: background 0.15s;
  z-index: 10;
}
.vs-flip-nav:hover { background: rgba(255,255,255,0.18); }
.vs-flip-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.vs-flip-prev { left: 20px; }
.vs-flip-next { right: 20px; }
.vs-flip-pageno {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600;
  background: rgba(0,0,0,0.5); padding: 6px 14px; border-radius: 999px;
}
@media (max-width: 600px) {
  .vs-flip-nav { width: 36px; height: 48px; font-size: 1.4rem; }
  .vs-flip-prev { left: 8px; }
  .vs-flip-next { right: 8px; }
  .vs-flip-stage { padding: 0 56px; }
}

/* VIP packages */
.vs-vip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.vs-vip-card { background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius); padding: 24px 20px; text-align: center; }
.vs-vip-name { font-family: var(--vs-heading-font); font-size: 1.2rem; font-weight: 700; color: var(--vs-primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.vs-vip-desc { color: var(--vs-text); font-size: 0.9rem; line-height: 1.5; margin-bottom: 12px; }
.vs-vip-price { color: var(--vs-heading); font-weight: 700; font-size: 1.05rem; }

/* Press */
.vs-press-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.vs-press-item { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.vs-press-item:hover { border-color: var(--vs-primary); box-shadow: 0 4px 24px rgba(0,0,0,0.25); }
.vs-press-img { display: none; }
.vs-press-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.vs-press-source { font-size: 0.72rem; color: var(--vs-accent); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; }
.vs-press-title { font-family: var(--vs-heading-font); font-weight: 700; font-size: 1rem; color: var(--vs-heading); line-height: 1.45; flex: 1; }
.vs-press-summary { font-size: 0.85rem; color: var(--vs-text); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vs-press-meta { font-size: 0.75rem; color: var(--vs-text-dim, var(--vs-text)); margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; }
.vs-press-meta-date { opacity: 0.6; }
.vs-press-read { font-size: 0.8rem; color: var(--vs-primary); font-weight: 600; }
.vs-press-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: calc(var(--vs-card-radius) - 2px) calc(var(--vs-card-radius) - 2px) 0 0; margin: -22px -20px 12px; width: calc(100% + 40px); }
.vs-press-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-press-thumb-yt { position: relative; cursor: pointer; }
.vs-press-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); font-size: 2rem; color: #fff; transition: background 0.2s; }
.vs-press-item:hover .vs-press-play { background: rgba(0,0,0,0.15); }
.vs-press-source { font-size: 0.72rem; color: var(--vs-accent); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; }

/* ─── Reviews widget ───────────────────────────────────────────────────── */
.vs-reviews-section .vs-section-heading { margin-bottom: 8px; }
.vs-review-summary {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 32px;
  margin: 0 0 24px; padding: 14px 18px;
  background: var(--vs-card-bg); border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius);
}
.vs-review-summary-platform { display: inline-flex; align-items: center; gap: 8px; color: var(--vs-text); font-size: 0.92rem; }
.vs-review-summary-num { font-weight: 700; color: var(--vs-heading); }
.vs-review-summary-count { font-weight: 400; color: var(--vs-text-dim, rgba(255,255,255,0.55)); margin-left: 4px; }

.vs-reviews-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.vs-reviews-list { display: flex; flex-direction: column; gap: 14px; }
.vs-reviews-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px);
  gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
}
.vs-reviews-carousel::-webkit-scrollbar { height: 8px; }
.vs-reviews-carousel::-webkit-scrollbar-thumb { background: var(--vs-card-border); border-radius: 4px; }
.vs-reviews-carousel .vs-review-card { scroll-snap-align: start; }

.vs-review-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 16px;
  background: var(--vs-card-bg); border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.vs-review-card:hover { border-color: var(--vs-primary); box-shadow: 0 8px 28px rgba(0,0,0,0.25); transform: translateY(-2px); }
.vs-review-card:focus-visible { outline: 2px solid var(--vs-primary); outline-offset: 2px; }
.vs-review-more {
  margin-top: auto; font-size: 0.78rem; font-weight: 600; color: var(--vs-primary);
  letter-spacing: 0.3px;
}
.vs-review-more::after { content: " →"; }
.vs-reviews-list .vs-review-card { flex-direction: row; gap: 16px; align-items: flex-start; }

.vs-review-head { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; }
.vs-review-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--vs-card-border); flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--vs-heading); font-size: 0.95rem;
}
.vs-review-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-review-author { font-weight: 600; color: var(--vs-heading); font-size: 0.95rem; }
.vs-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--vs-text-dim, rgba(255,255,255,0.55)); }

.vs-review-stars { display: inline-flex; gap: 1px; font-size: 0.95rem; }
.vs-review-star { display: inline-block; width: 1em; text-align: center; }
.vs-review-star-full  { color: #f59e0b; }
.vs-review-star-half  { color: #f59e0b; opacity: 0.6; }
.vs-review-star-empty { color: var(--vs-card-border); }

.vs-review-source {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--vs-card-border); color: var(--vs-text);
}
.vs-review-source-yelp   { background: #d32323; color: #fff; }
.vs-review-source-google { background: #4285f4; color: #fff; }

.vs-review-date::before { content: "·"; margin-right: 6px; opacity: 0.6; }

.vs-review-text {
  color: var(--vs-text); font-size: 0.9rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vs-reviews-list .vs-review-text { -webkit-line-clamp: 3; }

/* Review letterbox (full review modal) */
.vs-review-lightbox { cursor: default; align-items: flex-start; overflow-y: auto; }
/* Leave-a-Review (star capture → Yelp/Google funnel or feedback form) */
.vs-leave-review {
  margin: 28px auto; max-width: 560px; text-align: center;
  padding: 22px 24px 26px; background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius);
}
.vs-lr-heading { margin: 0 0 4px; font-size: 1.15rem; color: var(--vs-heading); }
.vs-lr-prompt { margin: 0 0 12px; font-size: 0.9rem; color: var(--vs-text); opacity: 0.85; }
.vs-lr-stars { display: inline-flex; gap: 6px; margin-bottom: 6px; }
.vs-lr-star {
  background: none; border: 0; cursor: pointer; padding: 2px;
  font-size: 2rem; line-height: 1; color: var(--vs-card-border);
  transition: color 0.12s, transform 0.12s;
}
.vs-lr-star:hover { transform: scale(1.12); }
.vs-lr-star.vs-lr-on { color: #f5b301; }
.vs-lr-star:focus-visible { outline: 2px solid var(--vs-primary); border-radius: 4px; }
.vs-lr-thanks { text-align: center; }
.vs-lr-thanks h3 { margin: 6px 0; color: var(--vs-heading); }
.vs-lr-hearts { font-size: 2rem; letter-spacing: 4px; }
.vs-lr-extbtns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.vs-lr-modal-card { max-width: 420px; text-align: center; }

.vs-review-modal {
  position: relative; margin: auto; max-width: 560px; width: 100%;
  background: var(--vs-card-bg); border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-card-radius); padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.vs-review-modal .vs-lightbox-close { top: 12px; right: 16px; font-size: 1.8rem; }
.vs-review-modal-text {
  color: var(--vs-text); font-size: 0.95rem; line-height: 1.65; white-space: pre-line;
}
.vs-review-modal-link {
  align-self: flex-start; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.3px;
  color: #000; background: var(--vs-primary-bg);
  text-decoration: none; padding: 9px 16px; border-radius: 999px;
  transition: filter 0.2s, transform 0.2s;
}
.vs-review-modal-link:hover { filter: brightness(1.1); transform: translateY(-1px); }

@media (max-width: 640px) {
  .vs-reviews-grid { grid-template-columns: 1fr; }
  .vs-reviews-list .vs-review-card { flex-direction: column; }
}

/* FAQ */
.vs-faq-item { border-bottom: 1px solid var(--vs-card-border); padding: 16px 0; }
.vs-faq-q { font-family: var(--vs-heading-font); font-weight: 700; font-size: 1rem; color: var(--vs-heading); margin: 0 0 8px; }
.vs-faq-a { color: var(--vs-text); margin: 0; font-size: 0.9rem; line-height: 1.6; }
/* Footer */
.vs-footer { background: rgba(0,0,0,0.3); border-top: 1px solid var(--vs-card-border); padding: 40px 0; }
.vs-footer-inner { max-width: var(--vs-content-width); margin: 0 auto; padding: 0 20px; text-align: center; }
.vs-footer-social { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.vs-social-link { color: var(--vs-primary); text-decoration: none; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px; }
.vs-social-link:hover { text-decoration: underline; }
/* Footer social in icon mode: the shared .vs-social-icon is a text pill, so an
   SVG sat off-center. Make the footer icon a flex-centered circle with a
   normalized glyph size. (Footer-scoped so entertainer text pills are unchanged.) */
.vs-footer-social .vs-social-link.vs-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; line-height: 0;
  border: 1px solid var(--vs-card-border); border-radius: 50%;
  color: var(--vs-text);
}
.vs-footer-social .vs-social-link.vs-social-icon svg { width: 18px; height: 18px; display: block; }
.vs-footer-social .vs-social-link.vs-social-icon:hover {
  border-color: var(--vs-primary); color: var(--vs-primary); background: rgba(255,255,255,0.05);
}
.vs-footer-nav {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  margin-bottom: 16px;
}
.vs-footer-link {
  color: var(--vs-text); text-decoration: none; font-size: 0.85rem;
  font-weight: 500; transition: color 0.15s;
}
.vs-footer-link:hover { color: var(--vs-primary); }
.vs-footer-address { color: var(--vs-text); font-size: 0.85rem; margin-bottom: 8px; }
.vs-footer-contact { margin-bottom: 12px; }
.vs-footer-contact a { color: var(--vs-text); text-decoration: none; font-size: 0.85rem; margin: 0 8px; }
.vs-footer-contact a:hover { color: var(--vs-primary); }
.vs-footer-copy { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
/* Responsive */
@media (max-width: 768px) {
  .vs-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--vs-bg); border-bottom: 1px solid var(--vs-card-border); padding: 12px 20px; }
  .vs-nav.open { display: flex; }
  .vs-nav-toggle { display: block; }
  .vs-venue-toggle { display: none; }
  .vs-hero-content h1 { font-size: 1.8rem; }
  .vs-hero { min-height: 360px; }
  .vs-grid-3, .vs-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .vs-timeline::before { left: 20px; }
  .vs-timeline-left, .vs-timeline-right { padding-left: 50px; padding-right: 0; justify-content: flex-start; }
  .vs-timeline-dot { left: 20px; }
  .vs-newsletter-form { flex-direction: column; }
  .vs-entertainer-hero img { width: 200px; height: 200px; }
}
@media (max-width: 480px) {
  .vs-grid-2, .vs-grid-3, .vs-grid-4 { grid-template-columns: 1fr; }
}

/* Floor plan widget */
.vs-floor-plan { }
.vs-floor-plan-wrap { border-radius: var(--vs-card-radius); overflow: hidden; border: 1px solid var(--vs-card-border); }
.vs-floor-plan-img { width: 100%; display: block; }

/* Chatbot widget */
.vs-chatbot-bubble-trigger { position: fixed; bottom: 28px; right: 28px; z-index: 999; }
.vs-chatbot-bubble-btn { background: var(--vs-primary); color: var(--vs-button-text, #000); font-weight: 700; padding: 14px 22px; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.4); font-size: 0.95rem; }
.vs-chatbot-popup { display: none; position: absolute; bottom: 62px; right: 0; width: 320px; background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); border-radius: 12px; padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.vs-chatbot-bubble-trigger.open .vs-chatbot-popup { display: block; }
.vs-chatbot-msg { padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 12px; }
.vs-chatbot-msg-bot { background: var(--vs-section-bg, #1a1a2e); color: var(--vs-text); }
.vs-chatbot-input-row { display: flex; gap: 8px; }
.vs-chatbot-input { flex: 1; background: transparent; border: 1px solid var(--vs-card-border); border-radius: 6px; padding: 8px 10px; color: var(--vs-text); font-size: 0.85rem; }
.vs-chatbot-inline .vs-chatbot-window { max-width: 560px; margin: 0 auto; background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); border-radius: 12px; padding: 20px; }

/* Builder chatbot preview */
.sb-ep-chatbot { text-align: center; }
.sb-ep-chatbot-bubble { display: inline-block; background: var(--yellow-dark); color: #000; padding: 10px 20px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }

/* ── Nightly Tip Reporting ─────────────────────────────────────────────── */
.tip-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tip-tab { background: var(--border-2); color: var(--text-dim); border: 1px solid var(--border-2); padding: 8px 16px; border-radius: 8px; cursor: pointer; font: 600 0.85rem var(--display); }
.tip-tab:hover { color: var(--white); }
.tip-tab-active { background: var(--yellow-glow); color: var(--yellow); border-color: var(--yellow-dark); }
.tip-date-picker { margin-left: auto; color: var(--text-dim); font-size: 0.85rem; }
.tip-date-picker input { background: var(--border-2); color: var(--white); border: 1px solid var(--border-2); padding: 6px 10px; border-radius: 6px; font: inherit; }

.tip-empty { color: var(--text-dim); padding: 32px; text-align: center; }
.tip-card { background: var(--border-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 16px; margin-bottom: 12px; position: relative; }
.tip-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.tip-card-title { font: 600 1rem var(--display); color: var(--white); }
.tip-card-status { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.tip-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tip-field { display: flex; flex-direction: column; gap: 4px; }
.tip-field-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.tip-field input { background: var(--bg); color: var(--white); border: 1px solid var(--border-2); padding: 8px 10px; border-radius: 6px; font: inherit; }
.tip-field input:disabled { opacity: 0.55; cursor: not-allowed; }
.tip-card-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.tip-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.tip-pill-draft               { background: var(--border-2); color: var(--text-dim); }
.tip-pill-signed              { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.tip-pill-manager_overridden  { background: rgba(196, 160, 224, 0.20); color: var(--lavender); }
.tip-pill-locked              { background: rgba(242, 210, 100, 0.18); color: var(--yellow); }
.tip-pill-paid                { background: rgba(74, 222, 128, 0.30); color: #4ade80; }
.tip-pill-disputed            { background: rgba(255, 100, 100, 0.20); color: #ff7676; }
.tip-pill-in_progress         { background: var(--border-2); color: var(--text-dim); }
.tip-pill-ready_for_manager   { background: rgba(242, 210, 100, 0.20); color: var(--yellow); }
.tip-pill-manager_signed      { background: rgba(74, 222, 128, 0.18); color: #4ade80; }

.tip-sig { font-size: 0.75rem; color: var(--text-dim); }
.tip-flash { position: absolute; top: 8px; right: 8px; background: var(--yellow-dark); color: #000; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; }

.tip-recon-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 12px 16px; background: var(--border-2); border-radius: 8px; gap: 12px; flex-wrap: wrap; }
.tip-section { margin-bottom: 24px; }
.tip-section-head { background: var(--border-2); padding: 10px 14px; font: 700 0.8rem var(--display); letter-spacing: 0.08em; color: var(--white); border-radius: 8px 8px 0 0; }
.tip-table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--border-2); border-top: none; }
.tip-table th, .tip-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-2); text-align: left; font-size: 0.85rem; vertical-align: middle; }
.tip-table th { background: var(--border-2); color: var(--text-dim); font: 600 0.7rem var(--display); text-transform: uppercase; letter-spacing: 0.05em; }
.tip-table td input { width: 100%; background: transparent; color: var(--white); border: 1px solid transparent; padding: 5px 6px; border-radius: 4px; font: inherit; }
.tip-table td input:focus { background: var(--border-2); border-color: var(--yellow-dark); outline: none; }
.tip-table td input:disabled { color: var(--text-dim); cursor: not-allowed; }
.tip-row-total td { background: var(--border-2); color: var(--yellow); }
.tip-sig-ok { color: #4ade80; font-size: 0.78rem; }
.tip-sig-pending { color: var(--text-dim); font-size: 0.78rem; font-style: italic; }

.tip-recon-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 16px; padding: 16px; background: var(--border-2); border-radius: 8px; flex-wrap: wrap; }
.tip-recon-totals { display: flex; gap: 18px; flex-wrap: wrap; }
.tip-total { display: flex; flex-direction: column; gap: 2px; }
.tip-total-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.tip-total-val { font: 700 1rem var(--display); color: var(--yellow); }
.tip-recon-signed { font-size: 0.85rem; color: #4ade80; }

/* Tip section head with add-row button */
.tip-section-head { display: flex; justify-content: space-between; align-items: center; }
.tip-add-row { font-size: 0.75rem !important; padding: 4px 10px !important; }

/* Add-row overlay */
.tip-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.tip-overlay-card { background: var(--bg); border: 1px solid var(--border-2); border-radius: 12px; padding: 24px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; }
.tip-overlay-head { font: 600 1.1rem var(--display); color: var(--white); margin-bottom: 16px; }
.tip-overlay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.tip-overlay-card select { background: var(--border-2); color: var(--white); border: 1px solid var(--border-2); padding: 8px 10px; border-radius: 6px; font: inherit; width: 100%; margin-top: 4px; }
.tip-overlay-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Profile-claim prompt (shown when /tips/mine returns no StaffMember) */
.tip-claim-prompt { background: var(--border-2); padding: 24px; border-radius: 10px; }
.tip-claim-prompt h3 { font: 700 1.1rem var(--display); color: var(--white); margin: 0 0 8px 0; }
.tip-claim-prompt p { color: var(--text-dim); margin: 0 0 16px 0; }

/* Venue tag pill — used in staff directory's Venue column for multi-venue staff */
.venue-tag { display: inline-block; padding: 2px 8px; margin: 1px 2px 1px 0; border-radius: 999px; background: rgba(196, 160, 224, 0.15); color: var(--lavender); font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }

/* Staff directory search bar */
.staff-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.staff-search-input { flex: 1; max-width: 480px; background: var(--border-2); color: var(--white); border: 1px solid var(--border-2); padding: 10px 14px; border-radius: 8px; font: inherit; }
.staff-search-input:focus { outline: none; border-color: var(--yellow-dark); background: var(--bg); }
.staff-search-input::placeholder { color: var(--text-faint); }
.staff-search-hits { color: var(--text-dim); font-size: 0.85rem; }

/* Schedule toolbar */
.schedule-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.schedule-range { font-family: var(--display); font-weight: 700; color: var(--white); padding: 0 8px; }

/* Toggle-style btn-ghost for the Sling schedule view filters */
.btn-ghost.sched-toggle.active { background: var(--yellow-glow); color: var(--yellow); border-color: var(--yellow-dark); }

/* ─────────────────────────────────────────────────────────────────────
   Venue-site form primitives (phosphorOS styling)
   Reusable across any widget that needs inputs/textareas/selects/labels
   so customer-facing forms always inherit the venue's theme variables.
   ───────────────────────────────────────────────────────────────────── */
.vs-form { display: block; }
.vs-field { display: block; margin-bottom: 14px; }
.vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.vs-row .vs-field { margin-bottom: 0; }
@media (max-width: 540px) { .vs-row { grid-template-columns: 1fr; } }

.vs-label {
  display: block;
  font-family: var(--vs-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--vs-accent);
  margin-bottom: 6px;
}
.vs-help {
  font-size: 0.78rem;
  color: var(--vs-text);
  opacity: 0.8;
  margin: 4px 0 12px;
}

.vs-input,
.vs-textarea,
.vs-select,
.vs-field input:not([type="radio"]):not([type="checkbox"]),
.vs-field select,
.vs-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--vs-font);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 13px 16px;
  background: var(--vs-card-bg);
  color: var(--vs-heading);
  border: 1px solid var(--vs-card-border);
  border-radius: var(--vs-input-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.vs-input:focus,
.vs-textarea:focus,
.vs-select:focus,
.vs-field input:not([type="radio"]):not([type="checkbox"]):focus,
.vs-field select:focus,
.vs-field textarea:focus {
  outline: none;
  border-color: var(--vs-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-primary) 18%, transparent);
}
.vs-input::placeholder,
.vs-textarea::placeholder,
.vs-field input::placeholder,
.vs-field textarea::placeholder { color: var(--vs-text); opacity: 0.55; }

.vs-textarea,
.vs-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.vs-select,
.vs-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--vs-accent) 50%),
                    linear-gradient(135deg, var(--vs-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.vs-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.vs-msg-ok,
.vs-msg-err {
  font-family: var(--vs-font);
  font-size: 0.92rem;
  padding: 14px 16px;
  border-radius: var(--vs-input-radius);
  margin-top: 16px;
  word-break: break-word;
}
.vs-msg-ok {
  background: color-mix(in srgb, var(--vs-primary) 12%, transparent);
  color: var(--vs-primary);
  border: 1px solid color-mix(in srgb, var(--vs-primary) 35%, transparent);
}
.vs-msg-ok a { color: inherit; text-decoration: underline; font-weight: 600; }
.vs-msg-err {
  background: rgba(255, 85, 85, 0.10);
  color: #ff8585;
  border: 1px solid rgba(255, 85, 85, 0.30);
}

/* Disabled / busy submit button — pairs with .vs-btn */
.vs-btn[disabled],
.vs-btn:disabled { opacity: 0.55; cursor: default; transform: none !important; filter: none !important; }

/* ---------- Platform admin: users & accounts (pua-*) ---------- */
.pua-flag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}
.pua-flag-no-cognito   { background: rgba(196, 160, 224, 0.15); color: #c4a0e0; }
.pua-flag-dupe-email   { background: rgba(255, 85, 85, 0.15);  color: #ff8585; }
.pua-flag-dupe-phone   { background: rgba(255, 85, 85, 0.15);  color: #ff8585; }
.pua-flag-no-account   { background: rgba(242, 210, 100, 0.15); color: #f2d264; }
.pua-flag-multi-account{ background: rgba(242, 210, 100, 0.15); color: #f2d264; }

.pua-acct-block {
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
}
.pua-acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pua-acct-id {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.pua-acct-actions { display: flex; gap: 6px; }

.pua-btn-danger { border-color: #f55 !important; color: #f55 !important; }
.pua-btn-danger:hover { background: #f55 !important; color: #fff !important; }

.pua-link-section { margin-bottom: 14px; }
.pua-link-h {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.pua-link-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.pua-link-row {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  text-decoration: none;
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}
.pua-link-row:hover { border-color: var(--yellow-dark); background: var(--surface); }
.pua-link-name { font-size: 0.88rem; font-weight: 600; color: var(--white); }
.pua-link-meta { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

/* ---------- Public Profile Grid widget — list + carousel layouts ---------- */
.vs-entertainer-list { display: flex; flex-direction: column; gap: 8px; }
.vs-entertainer-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--vs-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  background: var(--vs-card-bg, rgba(255,255,255,0.03));
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.vs-entertainer-row:hover {
  border-color: var(--vs-primary, #f2d264);
  background: var(--vs-card-bg-hover, rgba(255,255,255,0.06));
  transform: translateY(-1px);
}
.vs-entertainer-row-thumb {
  width: 88px; height: 88px;
  border-radius: 8px; overflow: hidden;
  background: var(--vs-card-bg-deep, rgba(0,0,0,0.25));
}
.vs-entertainer-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-entertainer-row-body { min-width: 0; }
.vs-entertainer-row-title { font-family: var(--vs-display, var(--display)); font-weight: 700; font-size: 1.05rem; color: var(--vs-heading, #fff); }
.vs-entertainer-row-role { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--vs-primary, #f2d264); margin-top: 2px; }
.vs-entertainer-row-desc { font-size: 0.85rem; color: var(--vs-text, rgba(255,255,255,0.7)); margin-top: 4px; line-height: 1.4; }
.vs-entertainer-row-fav { padding-left: 8px; }

.vs-entertainer-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 240px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.vs-entertainer-rail .vs-entertainer-card { scroll-snap-align: start; }
.vs-entertainer-rail::-webkit-scrollbar { height: 6px; }
.vs-entertainer-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }

@media (max-width: 600px) {
  .vs-entertainer-row { grid-template-columns: 64px 1fr auto; gap: 10px; }
  .vs-entertainer-row-thumb { width: 64px; height: 64px; }
}

/* ── Experience carousel / grid ─────────────────────────────────────────── */
.vs-exp-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px);
  gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; padding: 8px 4px 24px;
  -webkit-overflow-scrolling: touch;
}
.vs-exp-rail::-webkit-scrollbar { height: 6px; }
.vs-exp-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.vs-exp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.vs-exp-card {
  display: flex; flex-direction: column;
  background: var(--vs-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-border, rgba(255,255,255,0.1));
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  scroll-snap-align: start;
  transition: transform 0.18s, box-shadow 0.18s;
}
.vs-exp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.vs-exp-card-img { width: 100%; aspect-ratio: 4/5; overflow: hidden; }
.vs-exp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-exp-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vs-exp-card-emoji { font-size: 1.5rem; line-height: 1; }
.vs-exp-card-title { font-size: 1.05rem; font-weight: 700; color: var(--vs-heading, #fff); line-height: 1.3; }
.vs-exp-card-tagline { font-size: 0.82rem; font-weight: 600; color: var(--vs-accent, #F2D264); text-transform: uppercase; letter-spacing: 0.04em; }
.vs-exp-card-desc { font-size: 0.85rem; color: var(--vs-text-dim, rgba(255,255,255,0.65)); line-height: 1.5; margin-top: 2px; }
.vs-exp-card-cta { margin-top: auto; padding-top: 12px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vs-accent, #F2D264); }

/* ── Venue settings sidebar layout ──────────────────────────────────────── */
.vs-set { display: flex; gap: 24px; align-items: flex-start; }
.vs-set-nav {
  flex: 0 0 216px; position: sticky; top: 16px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 8px;
}
.vs-set-navbtn {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 9px 14px; border: none; background: none;
  color: var(--text-dim); border-radius: 9px; cursor: pointer;
  font-size: 0.88rem; font-weight: 500; font-family: inherit; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background 0.12s ease, color 0.12s ease;
}
.vs-set-navbtn:hover { background: var(--surface-2); color: var(--white); }
.vs-set-navbtn.active { background: var(--yellow-glow); color: var(--yellow); font-weight: 600; }
.vs-set-navbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yellow-glow); }
.vs-set-main { flex: 1; min-width: 0; }
.vs-set-sec { display: none; }
.vs-set-sec.active { display: block; }
.vs-set-actions { display: flex; gap: 12px; margin-top: 8px; }
/* Legible placeholders across all settings inputs (was browser-default grey on a dark field) */
.vs-set input::placeholder, .vs-set textarea::placeholder { color: var(--text-dim); opacity: 1; }
@media (max-width: 760px) {
  .vs-set { flex-direction: column; }
  .vs-set-nav { position: static; flex: none; flex-direction: row; flex-wrap: wrap; }
}

/* ── Editor tabs (event / event-series: Info / Ticketing / Reporting) ────── */
.ee-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-2, rgba(255,255,255,0.12)); margin: 4px 0 16px; }
.ee-tab { padding: 8px 16px; border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.ee-tab:hover { color: var(--white); }
.ee-tab.active { color: var(--white); border-bottom-color: var(--accent, #F2D264); font-weight: 600; }
.ee-tabpane { display: none; }
.ee-tabpane.active { display: block; }
.ee-ticketing-mount { margin-top: 16px; }

/* ── Embeddable ticketing panel (ticketing-panel.js) ────────────────────── */
.tp-msg { color: var(--text-dim); padding: 16px 0; font-size: 0.88rem; }
.tp-err { color: #f88; }
.tp-subhead { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 14px 0 8px; }
.tp-list { display: flex; flex-direction: column; gap: 6px; }
.tp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-2, rgba(255,255,255,0.1)); border-radius: 8px; }
.tp-row[data-tp-edit]:hover { border-color: var(--accent, #F2D264); }
.tp-row-name { flex: 1; min-width: 0; }
.tp-row-price { font-variant-numeric: tabular-nums; }
.tp-row-tag { font-size: 0.72rem; color: var(--text-dim); }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); display: inline-block; flex: none; }
.tp-dot.ok { background: #4ec77a; }
.tp-formbox { margin-top: 14px; padding: 16px; border: 1px solid var(--border-2, rgba(255,255,255,0.14)); border-radius: 10px; }
.tp-formtitle { font-weight: 600; margin-bottom: 12px; }
.tp-f { margin-bottom: 11px; }
.tp-f label { display: block; font-size: 0.76rem; color: var(--text-dim); margin-bottom: 3px; }
.tp-f input, .tp-f select { width: 100%; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border-2, #333); background: var(--surface-2, rgba(255,255,255,0.05)); color: var(--text, #fff); box-sizing: border-box; font-size: 0.85rem; }
.tp-frow { display: flex; gap: 8px; }
.tp-frow .tp-f { flex: 1; }
.tp-check { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 0.85rem; cursor: pointer; }
.tp-formactions { display: flex; gap: 8px; margin-top: 14px; }
.tp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-stat { flex: 1; min-width: 90px; padding: 14px; border: 1px solid var(--border-2, rgba(255,255,255,0.1)); border-radius: 10px; text-align: center; }
.tp-stat-val { font-size: 1.3rem; font-weight: 700; }
.tp-stat-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* ───────────────────────────────────────────────────────────────────────
   Haunted Manor theme treatment (preset-scoped, venue-agnostic).
   Applies to any site whose theme _presetId starts with "haunted-manor"
   (the gold "haunted-manor" and the "haunted-manor-oxblood" wine variant).
   Gilt damask wallpaper + edge vignette + drifting fog + ornate dividers.
   ─────────────────────────────────────────────────────────────────────── */
/* Wallpaper lives on <html> (not <body>) so the drifting fog — body::before/
   ::after at z-index:-1 — paints above the wallpaper but beneath page content,
   reading as atmosphere behind the page rather than an overlay on top of it. */
html[data-vs-preset^="haunted-manor"]:has(.vs-header) {
  background-color: var(--vs-bg);
  background-image:
    radial-gradient(ellipse 120% 95% at 50% 38%, transparent 48%, rgba(0,0,0,0.58) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E %3Cg fill='none' stroke='%23AEA9A1' stroke-width='1.1' stroke-opacity='0.2'%3E %3Ccircle cx='70.0' cy='55.0' r='16'/%3E%3Ccircle cx='70.0' cy='85.0' r='16'/%3E%3Ccircle cx='55.0' cy='70.0' r='16'/%3E%3Ccircle cx='85.0' cy='70.0' r='16'/%3E %3Ccircle cx='0' cy='-15' r='16'/%3E%3Ccircle cx='0' cy='15' r='16'/%3E%3Ccircle cx='-15' cy='0' r='16'/%3E%3Ccircle cx='15' cy='0' r='16'/%3E%3Ccircle cx='140' cy='-15' r='16'/%3E%3Ccircle cx='140' cy='15' r='16'/%3E%3Ccircle cx='125' cy='0' r='16'/%3E%3Ccircle cx='155' cy='0' r='16'/%3E%3Ccircle cx='0' cy='125' r='16'/%3E%3Ccircle cx='0' cy='155' r='16'/%3E%3Ccircle cx='-15' cy='140' r='16'/%3E%3Ccircle cx='15' cy='140' r='16'/%3E%3Ccircle cx='140' cy='125' r='16'/%3E%3Ccircle cx='140' cy='155' r='16'/%3E%3Ccircle cx='125' cy='140' r='16'/%3E%3Ccircle cx='155' cy='140' r='16'/%3E %3Ccircle cx='70.0' cy='70.0' r='3' fill='%23AEA9A1' fill-opacity='0.2' stroke='none'/%3E %3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--vs-primary) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%, color-mix(in srgb, var(--vs-accent) 9%, transparent), transparent 60%);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-size: cover, 140px 140px, auto, auto;
  background-position: center, center, center, center;
  background-attachment: fixed, fixed, fixed, fixed;
}
/* Body stays transparent so html's wallpaper + the fog behind it show through. */
html[data-vs-preset^="haunted-manor"] body:has(.vs-header) {
  background: transparent;
}

/* Drifting fog — fractal-noise (feTurbulence) texture on two parallax layers
   that pan at different speeds/scales, masked to fade upward. Reads as
   volumetric mist rather than a gradient. pointer-events:none. Sits behind
   page content (negative z-index) so it reads as a background, not an overlay. */
html[data-vs-preset^="haunted-manor"] body::before,
html[data-vs-preset^="haunted-manor"] body::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: -1;
  background-repeat: repeat;
  will-change: background-position;
  -webkit-mask: linear-gradient(to top, #000 0%, rgba(0,0,0,0.65) 38%, transparent 90%);
          mask: linear-gradient(to top, #000 0%, rgba(0,0,0,0.65) 38%, transparent 90%);
}
html[data-vs-preset^="haunted-manor"] body::before {
  height: 46vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='340'%3E %3Cfilter id='f' x='0' y='0' width='100%' height='100%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.016' numOctaves='4' seed='11' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.55'/%3E %3CfeGaussianBlur stdDeviation='1.1'/%3E %3C/filter%3E %3Crect width='700' height='340' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 700px 340px;
  opacity: 0.3;
  animation: hmFogA 75s linear infinite;
}
html[data-vs-preset^="haunted-manor"] body::after {
  height: 32vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='300'%3E %3Cfilter id='f' x='0' y='0' width='100%' height='100%'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.013' numOctaves='4' seed='29' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.55'/%3E %3CfeGaussianBlur stdDeviation='1.1'/%3E %3C/filter%3E %3Crect width='960' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 960px 300px;
  opacity: 0.2;
  animation: hmFogB 115s linear infinite reverse;
}
@keyframes hmFogA { from { background-position: 0 0; } to { background-position: -40px -340px; } }
@keyframes hmFogB { from { background-position: 0 0; } to { background-position: 30px -300px; } }
@media (prefers-reduced-motion: reduce) {
  html[data-vs-preset^="haunted-manor"] body::before,
  html[data-vs-preset^="haunted-manor"] body::after { animation: none; }
}

/* EB Garamond has a small x-height and reads smaller than the sans defaults at
   the same size, so type feels cramped EVERYWHERE on Haunted-Manor sites, not
   just in prose blocks. Scale the whole theme up at the root: the font-size on
   <html> grows every rem-based size proportionally, and the body rule lifts the
   text that inherits the global 16px base directly. Preset-scoped, so other
   themes (and the dashboard) keep their sizes. Nav is pinned a touch smaller so
   it doesn't balloon at the larger root. */
html[data-vs-preset^="haunted-manor"] { font-size: 18px; }
html[data-vs-preset^="haunted-manor"] body { font-size: 1rem; }

/* Nav + chips run in a sans-serif (Montserrat — already loaded by the shell)
   rather than the Garamond body font: cleaner and far more legible at these
   small, letter-spaced sizes. */
html[data-vs-preset^="haunted-manor"] .vs-nav-link,
html[data-vs-preset^="haunted-manor"] .vs-nav-sublink,
html[data-vs-preset^="haunted-manor"] .vs-nav-label,
html[data-vs-preset^="haunted-manor"] .vs-nav-caret,
html[data-vs-preset^="haunted-manor"] .vs-chip,
html[data-vs-preset^="haunted-manor"] .vs-recurrence-chip,
html[data-vs-preset^="haunted-manor"] .vs-event-featured-badge,
html[data-vs-preset^="haunted-manor"] .vs-entertainer-type-badge {
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
html[data-vs-preset^="haunted-manor"] .vs-nav-link,
html[data-vs-preset^="haunted-manor"] .vs-nav-sublink { font-size: 0.92rem; }
/* Nav items in small caps for a refined, gilded feel. */
html[data-vs-preset^="haunted-manor"] .vs-nav-link,
html[data-vs-preset^="haunted-manor"] .vs-nav-sublink,
html[data-vs-preset^="haunted-manor"] .vs-nav-label {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* Floor readable body/content copy at 18px (1rem) — EB Garamond is too small
   below this. Micro-chrome (calendar cells, badges, eyebrow labels, legal fine
   print, form micro-labels) is intentionally left smaller; 18px there would
   break those layouts. */
html[data-vs-preset^="haunted-manor"] .vs-text,
html[data-vs-preset^="haunted-manor"] .vs-team-bio,
html[data-vs-preset^="haunted-manor"] .vs-event-meta-v,
html[data-vs-preset^="haunted-manor"] .vs-event-date,
html[data-vs-preset^="haunted-manor"] .vs-event-desc,
html[data-vs-preset^="haunted-manor"] .vs-entertainer-info p,
html[data-vs-preset^="haunted-manor"] .vs-entertainer-bio,
html[data-vs-preset^="haunted-manor"] .vs-entertainer-row-desc,
html[data-vs-preset^="haunted-manor"] .vs-timeline-content p,
html[data-vs-preset^="haunted-manor"] .vs-menu-desc,
html[data-vs-preset^="haunted-manor"] .vs-menu-card-name,
html[data-vs-preset^="haunted-manor"] .vs-menu-item-desc,
html[data-vs-preset^="haunted-manor"] .vs-vip-desc,
html[data-vs-preset^="haunted-manor"] .vs-press-summary,
html[data-vs-preset^="haunted-manor"] .vs-review-summary-platform,
html[data-vs-preset^="haunted-manor"] .vs-review-author,
html[data-vs-preset^="haunted-manor"] .vs-faq-a,
html[data-vs-preset^="haunted-manor"] .vs-venue-address,
html[data-vs-preset^="haunted-manor"] .vs-lr-prompt,
html[data-vs-preset^="haunted-manor"] .vs-footer-address,
html[data-vs-preset^="haunted-manor"] .vs-footer-contact a { font-size: 1rem; }

/* Ornate gilt divider under section headings (replaces the plain bar).
   Masked SVG so it inherits the theme's primary color (gold / wine). */
html[data-vs-preset^="haunted-manor"] .vs-section-heading::after {
  width: 210px; height: 18px;
  margin: 18px auto 0;
  background: var(--vs-primary-bg);
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='22' viewBox='0 0 220 22'%3E %3Cg fill='black' stroke='none'%3E %3Ccircle cx='110' cy='6.2' r='4.4'/%3E %3Ccircle cx='110' cy='15.8' r='4.4'/%3E %3Ccircle cx='104.2' cy='11' r='4.4'/%3E %3Ccircle cx='115.8' cy='11' r='4.4'/%3E %3Ccircle cx='21' cy='15' r='2.3'/%3E %3Cg transform='translate(220,0) scale(-1,1)'%3E%3Ccircle cx='21' cy='15' r='2.3'/%3E%3C/g%3E %3C/g%3E %3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E %3Cpath d='M101,11 Q 84,3 66,11 Q 50,18 34,11'/%3E %3Cpath d='M34,11 q -8,-3 -11,3 q -1.5,4 3,4.5'/%3E %3Cg transform='translate(220,0) scale(-1,1)'%3E %3Cpath d='M101,11 Q 84,3 66,11 Q 50,18 34,11'/%3E %3Cpath d='M34,11 q -8,-3 -11,3 q -1.5,4 3,4.5'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='22' viewBox='0 0 220 22'%3E %3Cg fill='black' stroke='none'%3E %3Ccircle cx='110' cy='6.2' r='4.4'/%3E %3Ccircle cx='110' cy='15.8' r='4.4'/%3E %3Ccircle cx='104.2' cy='11' r='4.4'/%3E %3Ccircle cx='115.8' cy='11' r='4.4'/%3E %3Ccircle cx='21' cy='15' r='2.3'/%3E %3Cg transform='translate(220,0) scale(-1,1)'%3E%3Ccircle cx='21' cy='15' r='2.3'/%3E%3C/g%3E %3C/g%3E %3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E %3Cpath d='M101,11 Q 84,3 66,11 Q 50,18 34,11'/%3E %3Cpath d='M34,11 q -8,-3 -11,3 q -1.5,4 3,4.5'/%3E %3Cg transform='translate(220,0) scale(-1,1)'%3E %3Cpath d='M101,11 Q 84,3 66,11 Q 50,18 34,11'/%3E %3Cpath d='M34,11 q -8,-3 -11,3 q -1.5,4 3,4.5'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── VIP Host Management — horse-race pipeline + table board (vh-) ─────────── */
.vh-toolbar { gap: 10px; flex-wrap: wrap; align-items: center; }
.vh-toolbar-spacer { flex: 1; }
.vh-tabs { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 3px; }
.vh-tab { background: transparent; border: 0; color: var(--text-dim); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 7px; cursor: pointer; }
.vh-tab:hover { color: var(--white); }
.vh-tab.active { background: var(--lavender); color: var(--white); }
.vh-filter-sel, .vh-filter-q, .vh-filter-date { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; font-size: 0.82rem; }
.vh-filter-q { min-width: 220px; }

/* Layout: board + detail pane */
.vh-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-top: 14px; align-items: start; }
.vh-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.vh-col { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); display: flex; flex-direction: column; min-height: 120px; }
.vh-col-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.vh-col-name { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 0.86rem; }
.vh-col-count { font-size: 0.7rem; color: var(--text-dim); }
.vh-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; max-height: calc(100vh - 280px); overflow-y: auto; transition: background 0.12s; }
.vh-col-body.drop { background: var(--lavender-glow); outline: 1px dashed var(--lavender); outline-offset: -4px; border-radius: 8px; }

.vh-card { background: var(--surface-2); border: 1px solid var(--border-2); border-left: 3px solid var(--text-faint); border-radius: 8px; padding: 9px 10px; cursor: pointer; transition: border-color 0.12s, transform 0.06s; }
.vh-card:hover { border-color: var(--lavender); }
.vh-card.sel { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow-glow); }
.vh-card.dragging { opacity: 0.5; }
.vh-card.temp-hot { border-left-color: #f87171; }
.vh-card.temp-warm { border-left-color: var(--yellow); }
.vh-card.temp-cold { border-left-color: var(--text-faint); }
.vh-card-top { display: flex; align-items: center; gap: 6px; }
.vh-temp-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); }
.temp-hot .vh-temp-dot { background: #f87171; }
.temp-warm .vh-temp-dot { background: var(--yellow); }
.vh-card-name { flex: 1; font-weight: 600; color: var(--white); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-owner { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--lavender); color: var(--white); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; }
.vh-owner-none { background: transparent; border: 1px dashed var(--border-2); color: var(--text-faint); }
.vh-card-occ { margin-top: 5px; }
.vh-occ { font-size: 0.68rem; color: var(--yellow); background: var(--yellow-glow); padding: 2px 7px; border-radius: 8px; }
.vh-card-meta { margin-top: 5px; font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-lost-note { margin-top: 10px; font-size: 0.74rem; color: var(--text-faint); }

/* Detail pane */
.vh-detail { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 14px; position: sticky; top: 80px; }
.vh-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vh-detail-head .ee-name-input { flex: 1; }
.vh-stage-row { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 12px; }
.vh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vh-f { display: flex; flex-direction: column; gap: 4px; }
.vh-f-full { grid-column: 1 / -1; margin-top: 10px; }
.vh-f label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); font-weight: 600; }
.vh-f input, .vh-f select, .vh-f textarea { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 0.82rem; width: 100%; }
.vh-f textarea { resize: vertical; }
.vh-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vh-convert { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.vh-convert-head { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 0.86rem; margin-bottom: 4px; }
.vh-convert-note { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 10px; }
.vh-converted { font-size: 0.8rem; color: var(--yellow); }

/* Table board */
.vh-board-summary { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; margin: 16px 0 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
.vh-bs-date { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 1.05rem; }
.vh-bs-stat { font-size: 0.86rem; color: var(--text); }
.vh-bs-open { margin-left: auto; font-size: 0.84rem; color: var(--yellow); font-weight: 600; }
.vh-board-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vh-room { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; }
.vh-room-name { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 0.9rem; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.vh-trow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.vh-trow:last-child { border-bottom: 0; }
.vh-tdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.vh-trow.sold .vh-tdot { background: var(--yellow); }
.vh-trow.open .vh-tdot { background: var(--text-faint); }
.vh-tname { flex: 0 0 auto; min-width: 84px; color: var(--white); font-weight: 600; }
.vh-tguest { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-topen { color: var(--text-faint); }
.vh-tmin { flex: 0 0 auto; color: var(--text-dim); font-size: 0.76rem; }

@media (max-width: 900px) {
  .vh-layout { grid-template-columns: 1fr; }
  .vh-detail { position: static; }
}

/* ── VIP host landing page (venue site, Phase 2) — vs-host- ───────────────── */
.vs-host { max-width: 600px; margin: 0 auto; }
.vs-host-card { display: flex; gap: 18px; align-items: center; margin-bottom: 28px; }
.vs-host-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--vs-primary); }
.vs-host-initials { display: flex; align-items: center; justify-content: center; background: var(--vs-card-bg); color: var(--vs-primary); font-family: var(--vs-heading-font); font-weight: 700; font-size: 2rem; }
.vs-host-hi { font-family: var(--vs-heading-font); font-size: 1.5rem; font-weight: 700; color: var(--vs-heading); }
.vs-host-title { color: var(--vs-primary); font-size: 0.92rem; font-weight: 600; margin-top: 2px; }
.vs-host-pitch { color: var(--vs-text); font-size: 0.95rem; margin-top: 8px; line-height: 1.5; }
.vs-host-form { display: flex; flex-direction: column; gap: 14px; }
.vs-host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs-host-form input, .vs-host-form select, .vs-host-form textarea {
  background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); color: var(--vs-text);
  border-radius: var(--vs-input-radius); padding: 11px 13px; font: inherit; font-size: 0.95rem; width: 100%;
}
.vs-host-form textarea { resize: vertical; }
.vs-host-submit { margin-top: 4px; }
.vs-host-err { color: #f87171; font-size: 0.88rem; min-height: 1em; }
.vs-host-fine { color: var(--vs-text); opacity: 0.6; font-size: 0.8rem; text-align: center; margin-top: 4px; }
.vs-host-done { text-align: center; padding: 30px 10px; }
.vs-host-done-check { width: 64px; height: 64px; border-radius: 50%; background: var(--vs-primary); color: var(--vs-primary-bg, #fff); font-size: 2rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vs-host-done p { color: var(--vs-text); line-height: 1.6; }
@media (max-width: 540px) {
  .vs-host-card { flex-direction: column; text-align: center; }
  .vs-host-grid { grid-template-columns: 1fr; }
}

/* VIP host landing — book-a-table primary + message-form secondary (Phase 2) */
.vs-host-book { margin-top: 26px; }
.vs-host-bookhdr { font-family: var(--vs-heading-font); font-size: 1.25rem; color: var(--vs-heading); margin: 0 0 14px; }
.vs-host-leadcta { text-align: center; margin-top: 20px; }
.vs-host-leadtoggle { background: none; border: 0; color: var(--vs-primary); font: inherit; font-size: 0.9rem; cursor: pointer; text-decoration: underline; padding: 6px; }
.vs-host-leadwrap { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--vs-card-border); }

/* Booking widget — table vibe / perks / trade-offs / view-from (VIP Phase 2) */
.vs-rb-table-vibe { display:block; color: var(--vs-text); font-size: 0.86rem; line-height: 1.45; margin: 8px 0 6px; opacity: 0.92; }
.vs-rb-table-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.vs-rb-perk, .vs-rb-trade { font-size: 0.74rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.vs-rb-perk { background: rgba(120,200,120,0.14); color: #9fd49f; }
.vs-rb-trade { background: rgba(242,210,100,0.12); color: var(--vs-primary); }
.vs-rb-table-vf { display: inline-flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; }
.vs-rb-vf-img { display: block; width: 100%; max-width: 280px; height: 120px; border-radius: 10px; background-size: cover; background-position: center; }
.vs-rb-vf-cap { font-size: 0.72rem; color: var(--vs-text); opacity: 0.6; text-transform: lowercase; letter-spacing: 0.3px; }

/* Smart table matcher — recommendation badge + highlight (VIP Phase 2) */
.vs-rb-opt { font-weight: 400; opacity: 0.6; font-size: 0.82rem; }
.vs-rb-table.is-rec { outline: 2px solid var(--vs-primary); outline-offset: -1px; }
.vs-rb-rec { display: inline-block; background: var(--vs-primary); color: #12122B; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; padding: 2px 9px; border-radius: 10px; margin-bottom: 6px; }

/* VIP host landing — conversational lead chat (VIP Phase 2) */
.vs-host-chat { margin-top: 4px; }
.vs-chat { display: flex; flex-direction: column; max-height: 480px; }
.vs-chat-log { overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 10px; }
.vs-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.vs-chat-me { justify-content: flex-end; }
.vs-chat-bub { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 0.92rem; line-height: 1.42; }
.vs-chat-bot .vs-chat-bub { background: var(--vs-card-bg); color: var(--vs-text); border-bottom-left-radius: 4px; }
.vs-chat-me .vs-chat-bub { background: var(--vs-primary); color: var(--vs-primary-bg, #12122B); border-bottom-right-radius: 4px; }
.vs-chat-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.vs-chat-av-i { display: inline-flex; align-items: center; justify-content: center; background: var(--vs-primary); color: var(--vs-primary-bg, #12122B); font-size: 0.7rem; font-weight: 700; }
.vs-chat-input { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vs-chat-field { flex: 1; min-width: 160px; background: var(--vs-card-bg); border: 1px solid var(--vs-card-border); color: var(--vs-text); border-radius: 10px; padding: 10px 12px; font: inherit; }
.vs-chat-chip { font-size: 0.85rem; }
.vs-chat-sending { color: var(--vs-text); opacity: 0.6; font-size: 0.9rem; padding: 8px; }

/* Reservation desk — funds panel: ticket credit apply + credit-&-cancel (VIP Phase 2) */
.rd-funds { margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 12px; }
.rd-funds-line { font-size: 0.86rem; color: var(--text); }
.rd-ticket-apply label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; }
.rd-ticket-apply textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 0.85rem; resize: vertical; }
.rd-ticket-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rd-creditcancel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }

/* Reservation desk — comp workflow panel (VIP Phase 2) */
.rd-comp { margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
.rd-comp-head { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.rd-comp-denied { color: #f87171; font-weight: 400; font-size: 0.8rem; }
.rd-comp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rd-comp-status { font-size: 0.92rem; font-weight: 600; color: var(--white); }
.rd-comp-approved { color: #9fd49f; }
.rd-comp-requested { color: var(--yellow); }
.rd-comp-notes-disp { font-size: 0.82rem; color: var(--text-dim); margin-top: 6px; }
/* Collapsed-by-default comp workflow */
.rd-comp-collapse > summary.rd-comp-head { cursor: pointer; margin-bottom: 0; list-style: none; display: flex; align-items: center; gap: 7px; user-select: none; }
.rd-comp-collapse > summary.rd-comp-head::-webkit-details-marker { display: none; }
.rd-comp-collapse > summary.rd-comp-head::before { content: '\25B8'; color: var(--text-dim); font-size: 0.85rem; transition: transform 0.15s ease; }
.rd-comp-collapse[open] > summary.rd-comp-head::before { transform: rotate(90deg); }
.rd-comp-collapse[open] > summary.rd-comp-head { margin-bottom: 10px; }

/* Reservation desk — close-out & commissions panel (VIP Phase 2) */
.rd-closeout { margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
.rd-comm-result { margin-top: 8px; }
.rd-comm-result .rd-funds-line { font-weight: 600; color: var(--white); margin-bottom: 4px; }

/* AI Pre-Shift page (VIP Operations) — ps- */
.ps-toolbar { gap: 10px; }
.ps-msg { color: var(--text-dim); font-size: 0.85rem; }
.ps-date-head { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 1.3rem; margin: 14px 0; }
.ps-brief { background: var(--surface); border: 1px solid var(--border-2); border-left: 3px solid var(--yellow); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.ps-brief-label { color: var(--yellow); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.ps-brief-body { color: var(--text); line-height: 1.6; font-size: 0.92rem; }
.ps-brief-off { color: var(--text-dim); border-left-color: var(--text-faint); }
.ps-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ps-stat { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 14px; }
.ps-stat-val { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 1.5rem; }
.ps-stat-label { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.ps-stat-sub { color: var(--text); font-size: 0.8rem; margin-top: 6px; }
.ps-up { color: #9fd49f; } .ps-down { color: #f87171; }
.ps-section-h { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--white); font-size: 1rem; margin: 18px 0 10px; }
.ps-parties { display: flex; flex-direction: column; gap: 8px; }
.ps-party { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.ps-party-comp { border-left: 3px solid var(--yellow); }
.ps-party-arr { color: var(--yellow); font-weight: 600; min-width: 54px; }
.ps-party-name { color: var(--white); font-weight: 600; }
.ps-comp-tag { background: var(--yellow); color: var(--bg); font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.ps-party-meta { color: var(--text-dim); font-size: 0.82rem; }
.ps-party-req { color: var(--text); font-size: 0.82rem; font-style: italic; flex-basis: 100%; }
.ps-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-roster-chip { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 4px 12px; font-size: 0.82rem; color: var(--text); }

/* Booking widget — completed step chips are clickable to go back */
.vs-rb-step-nav { cursor: pointer; }
.vs-rb-step-nav:hover { color: var(--vs-primary); text-decoration: underline; }

/* Booking widget — multi-select table cards + map/photos lightbox (VIP) */
.vs-rb-table { cursor: default; }
.vs-rb-table.is-sel { outline: 2px solid var(--vs-primary); outline-offset: -1px; }
.vs-rb-table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.vs-rb-sel-btn, .vs-rb-map-btn { font-size: 0.82rem; }
.vs-rb-table-actions .vs-rb-table-dep { margin-left: auto; }
.vs-rb-selbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vs-card-border); }
.vs-rb-selsum { color: var(--vs-heading); font-weight: 600; }
.vs-map-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vs-map-lb-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.78); }
.vs-map-lb-box { position: relative; max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; background: var(--vs-bg, #12122B); border: 1px solid var(--vs-card-border, rgba(255,255,255,0.15)); border-radius: 14px; padding: 22px; }
.vs-map-lb-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--vs-text); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.vs-map-lb-title { font-family: var(--vs-heading-font); color: var(--vs-heading); margin: 0 0 6px; padding-right: 28px; }
.vs-map-lb-vibe { color: var(--vs-text); margin: 0 0 14px; line-height: 1.5; }
.vs-map-wrap { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.vs-map-img { width: 100%; display: block; }
.vs-map-marker { position: absolute; border: 3px solid var(--vs-primary); background: rgba(242,210,100,0.2); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.4); }
.vs-map-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.vs-map-photos img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }

/* ── Festival Map widget ── booth markers over an uploaded site-plan image ── */
.vs-fm-wrap { position: relative; border-radius: 12px; overflow: hidden; }
.vs-fm-wrap.vs-fm-blank { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px),
  var(--vs-card-bg, rgba(255,255,255,0.04)); }
.vs-fm-mark {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  background: var(--vs-primary, #F2D264); color: var(--vs-bg, #12122B);
  border: 2px solid rgba(0,0,0,0.35); border-radius: 999px;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.35); z-index: 2;
}
.vs-fm-mark:hover { filter: brightness(1.08); z-index: 3; }
.vs-fm-mark-img {
  border-radius: 8px; background-size: cover; background-position: center;
  padding: 0; min-width: 0;
}
.vs-fm-mark-img .vs-fm-tag {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: var(--vs-primary, #F2D264); color: var(--vs-bg, #12122B);
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
}
.vs-fm-pop-logo { max-height: 90px; max-width: 200px; display: block; margin: 0 0 12px; border-radius: 8px; }

/* ── Business Directory widget ── Apple Map + filterable list ── */
.vs-bd-map { width: 100%; height: 380px; border-radius: 12px; overflow: hidden; margin-bottom: 18px; background: var(--vs-card-bg, rgba(255,255,255,0.04)); }
.vs-bd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.vs-bd-search {
  flex: 1; min-width: 200px; padding: 10px 14px; font: inherit;
  background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-text);
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.15)); border-radius: 999px;
}
.vs-bd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-bd-chip {
  padding: 6px 13px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--vs-text);
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.2)); border-radius: 999px;
}
.vs-bd-chip.active { background: var(--vs-primary, #F2D264); color: var(--vs-bg, #12122B); border-color: var(--vs-primary, #F2D264); }
.vs-bd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vs-bd-item {
  display: flex; gap: 12px; padding: 14px;
  background: var(--vs-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12)); border-radius: 12px;
}
.vs-bd-logo { flex: none; width: 52px; height: 52px; border-radius: 10px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.06); }
.vs-bd-logo-empty { display: flex; align-items: center; justify-content: center; font-family: var(--vs-heading-font); font-weight: 700; font-size: 1.3rem; color: var(--vs-primary, #F2D264); text-transform: uppercase; }
.vs-bd-item-main { min-width: 0; }
.vs-bd-item-name { font-weight: 700; color: var(--vs-heading); }
.vs-bd-item-cat { font-size: 0.72rem; font-weight: 600; color: var(--vs-primary, #F2D264); text-transform: uppercase; letter-spacing: 0.4px; margin-left: 4px; }
.vs-bd-item-desc { font-size: 0.85rem; color: var(--vs-text); margin: 4px 0; line-height: 1.4; }
.vs-bd-item-addr { font-size: 0.8rem; color: var(--vs-text); opacity: 0.75; }
.vs-bd-item-links { display: flex; gap: 12px; margin-top: 6px; }
.vs-bd-item-links a { font-size: 0.82rem; font-weight: 600; color: var(--vs-primary, #F2D264); text-decoration: none; }
.vs-bd-item-links a:hover { text-decoration: underline; }

/* VIP host management — shared date-range control + night-by-night board */
.vh-range { display: inline-flex; align-items: center; gap: 6px; }
.vh-range .vh-filter-date { min-width: 0; }
.vh-range-sep { color: var(--text-dim, #9aa); opacity: 0.7; }
.vh-range-reset { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: inherit; border-radius: 6px; padding: 4px 8px; font-size: 0.75rem; cursor: pointer; }
.vh-range-reset:hover { background: rgba(255,255,255,0.12); }
.vh-nights { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.vh-night { border: 1px solid var(--card-border, rgba(255,255,255,0.1)); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.02); }
.vh-night.open { border-color: rgba(242,210,100,0.4); }
.vh-night.empty .vh-night-fill { background: rgba(255,255,255,0.18); }
.vh-night-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.vh-night-row:hover { background: rgba(255,255,255,0.04); }
.vh-night-cap { width: 12px; color: var(--text-dim, #9aa); flex: 0 0 auto; }
.vh-night-date { flex: 0 0 130px; font-weight: 600; }
.vh-night-bar { flex: 1 1 auto; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 60px; }
.vh-night-fill { display: block; height: 100%; background: linear-gradient(90deg, #F2D264, #C4A0E0); border-radius: 5px; }
.vh-night-sold { flex: 0 0 64px; text-align: right; font-variant-numeric: tabular-nums; }
.vh-night-book { flex: 0 0 80px; text-align: right; color: var(--accent, #F2D264); font-variant-numeric: tabular-nums; }
.vh-night-open { flex: 0 0 64px; text-align: right; font-size: 0.8rem; color: var(--text-dim, #9aa); }
.vh-night-body { padding: 4px 14px 14px; border-top: 1px solid rgba(255,255,255,0.07); }
@media (max-width: 640px) { .vh-night-book, .vh-night-open { display: none; } .vh-night-date { flex-basis: 96px; } }

/* Table Management (venue operations) — operational night dashboard */
.tm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.tm-kpi { background: rgba(255,255,255,0.03); border: 1px solid var(--card-border, rgba(255,255,255,0.1)); border-radius: 12px; padding: 14px 16px; }
.tm-kpi-val { font-family: var(--font-display, 'Quicksand', sans-serif); font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.1; }
.tm-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim, #9aa); margin-top: 4px; }
.tm-kpi-rev .tm-kpi-val { color: var(--yellow, #F2D264); }
.tm-kpi-open .tm-kpi-val { color: var(--lavender, #C4A0E0); }
.tm-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tm-room { background: rgba(255,255,255,0.02); border: 1px solid var(--card-border, rgba(255,255,255,0.1)); border-radius: 10px; padding: 11px 13px; }
.tm-room-name { font-weight: 600; color: #fff; margin-bottom: 7px; }
.tm-room-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tm-room-bar span { display: block; height: 100%; background: linear-gradient(90deg, #F2D264, #C4A0E0); }
.tm-room-meta { font-size: 0.78rem; color: var(--text-dim, #9aa); margin-top: 6px; }
.tm-date-row { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 8px; }
.tm-date-label { font-weight: 600; color: #fff; }
.tm-count { font-size: 0.82rem; color: var(--text-dim, #9aa); }
.tm-table-wrap { overflow-x: auto; border: 1px solid var(--card-border, rgba(255,255,255,0.1)); border-radius: 12px; }
.tm-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tm-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim, #9aa); padding: 10px 12px; border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.12)); white-space: nowrap; }
.tm-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #d7d7e6; vertical-align: middle; }
.tm-table tr:last-child td { border-bottom: 0; }
.tm-table .tm-num { text-align: right; font-variant-numeric: tabular-nums; }
.tm-tname { font-weight: 600; color: #fff; white-space: nowrap; }
.tm-dim { color: var(--text-dim, #6b6b80); }
.tm-empty-cell { text-align: center; color: var(--text-dim, #9aa); padding: 24px 12px; }
.tm-party { display: inline-block; font-size: 0.74rem; color: var(--lavender, #C4A0E0); margin-left: 2px; }
.tm-tier { display: inline-block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; background: rgba(242,210,100,0.16); color: var(--yellow, #F2D264); border-radius: 4px; padding: 1px 5px; margin-left: 2px; }
.tm-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tm-avail { background: rgba(255,255,255,0.08); color: #c7c7d6; }
.tm-resv { background: rgba(196,160,224,0.18); color: #d9bff0; }
.tm-seat { background: rgba(122,210,160,0.18); color: #8ee0ac; }
.tm-occ { background: rgba(242,210,100,0.18); color: #f2d264; }
.tm-chk { background: rgba(240,150,100,0.2); color: #f0a070; }
.tm-bus { background: rgba(140,160,240,0.18); color: #9aa8f0; }
.tm-blk { background: rgba(230,90,90,0.18); color: #e87a7a; }

/* Table Management — venue-closed night state */
.tm-closed { text-align: center; }
.tm-closed-day { font-family: var(--font-display, 'Quicksand', sans-serif); font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.tm-closed p { max-width: 460px; margin: 0 auto; }

/* Booking widget — soft over-capacity suggestion (non-blocking) */
.vs-rb-overcap { margin: 10px 0 0; padding: 10px 13px; border-radius: 10px; font-size: 0.88rem; line-height: 1.45; background: rgba(242,210,100,0.12); border: 1px solid rgba(242,210,100,0.4); color: var(--vs-heading, #fff); }

/* Booking widget — night calendar (venue open dates only) */
.vs-rb-calwrap { margin-bottom: 14px; }
.vs-cal { background: rgba(255,255,255,0.03); border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12)); border-radius: 12px; padding: 12px 14px; }
.vs-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vs-cal-title { font-family: var(--vs-heading-font); font-weight: 600; color: var(--vs-heading, #fff); }
.vs-cal-nav { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--vs-card-border, rgba(255,255,255,0.18)); background: transparent; color: var(--vs-heading, #fff); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.vs-cal-nav:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.vs-cal-nav:disabled { opacity: 0.3; cursor: default; }
.vs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vs-cal-dow { text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--vs-text-dim, #9aa); padding-bottom: 4px; }
.vs-cal-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; border-radius: 8px; }
.vs-cal-empty { background: none; }
.vs-cal-day { border: 1px solid transparent; background: rgba(255,255,255,0.05); color: var(--vs-heading, #fff); cursor: pointer; font: inherit; font-size: 0.9rem; padding: 0; }
.vs-cal-day:hover:not(.is-off) { border-color: var(--vs-primary, #F2D264); }
.vs-cal-day.is-off { color: var(--vs-text-dim, #5a5a6e); background: transparent; cursor: default; text-decoration: line-through; opacity: 0.45; }
.vs-cal-day.is-sel { background: var(--vs-primary, #F2D264); color: #12122B; font-weight: 700; }
.vs-rb-night-pick { margin-bottom: 12px; color: var(--vs-text, #c7c7d6); font-size: 0.92rem; }
.vs-rb-night-pick strong { color: var(--vs-heading, #fff); }

/* VIP host — table board open-row booking + host override modal */
.vh-trow-book { width: 100%; text-align: left; font: inherit; cursor: pointer; border: 1px solid transparent; }
.vh-trow-book:hover { border-color: var(--accent, #F2D264); background: rgba(242,210,100,0.06); }
.vh-modal-wrap { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vh-modal-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.vh-modal { position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: var(--panel-bg, #1a1730); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); border-radius: 14px; padding: 22px; }
.vh-modal-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--text-dim, #9aa); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.vh-modal-title { font-family: var(--font-display, 'Quicksand', sans-serif); color: #fff; margin: 0 0 4px; }
.vh-modal-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow, #F2D264); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; }
.vh-modal-note { color: var(--text-dim, #9aa); font-size: 0.85rem; margin: 0 0 14px; line-height: 1.45; }
.vh-modal .vh-f { margin-bottom: 11px; }
.vh-modal .vh-f label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim, #9aa); margin-bottom: 4px; }
.vh-modal .vh-f input, .vh-modal .vh-f select { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--card-border, rgba(255,255,255,0.18)); background: rgba(255,255,255,0.04); color: #fff; font: inherit; }
.vh-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vhb-datenote { font-size: 0.82rem; color: var(--yellow, #F2D264); margin: -6px 0 12px; }
.vh-modal-err { color: #e87a7a; font-size: 0.85rem; min-height: 1em; margin-bottom: 8px; }
.vh-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* VIP host — reservation management modal + walk-in/notify */
.vh-trow-manage { width: 100%; text-align: left; font: inherit; cursor: pointer; border: 1px solid transparent; }
.vh-trow-manage:hover { border-color: var(--accent, #F2D264); background: rgba(242,210,100,0.06); }
.vhm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vhm-move { display: flex; gap: 8px; }
.vhm-move select { flex: 1 1 auto; }
.vhm-notify { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.vhb-check { display: flex; align-items: center; gap: 8px; margin: 8px 0 11px; color: var(--text-dim, #9aa); font-size: 0.88rem; }
.vhb-check input { width: auto; }

/* Public reservation status — guest self-cancel */
.vs-rb-cancel { margin-top: 14px; }
.vs-rb-cancelled { margin-top: 14px; padding: 10px 13px; border-radius: 10px; background: rgba(230,90,90,0.12); border: 1px solid rgba(230,90,90,0.4); color: var(--vs-heading, #fff); }
.vs-rb-fine { margin-top: 12px; color: var(--vs-text-dim, #9aa); font-size: 0.86rem; }

/* Shared "VIP & Tables" sub-navigation (hub) */
.vip-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding-bottom: 4px; }
.vip-subnav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yellow, #F2D264); font-weight: 700; margin-right: 6px; }
.vip-subnav-link { font-size: 0.9rem; font-weight: 600; color: var(--text-dim, #9aa); text-decoration: none; padding: 6px 13px; border-radius: 999px; border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s; }
.vip-subnav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.vip-subnav-link.active { color: #12122B; background: var(--yellow, #F2D264); border-color: var(--yellow, #F2D264); }

/* VIP realtime presence chip */
.vh-presence { font-size: 0.78rem; font-weight: 600; color: #8ee0ac; margin-left: 8px; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   StratusUI token map — phosphorOS brand → --sui-* contract.
   Components live in the shared stratus-ui.css (sui- classes); this maps the
   neutral tokens they read onto phosphorOS's palette.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --sui-font: var(--font);
  --sui-font-display: var(--display);
  --sui-surface: var(--surface);
  --sui-surface-2: var(--surface-2);
  --sui-border: var(--border-2);
  --sui-fg: var(--white);
  --sui-text: var(--text);
  --sui-text-dim: var(--text-dim);
  --sui-text-faint: var(--text-faint);
  --sui-accent: var(--yellow);
  --sui-accent-contrast: #14142B;
  --sui-accent-soft: var(--yellow-glow);
  --sui-accent-2: var(--lavender);
  --sui-radius: var(--radius);
  --sui-radius-sm: var(--radius-sm);
  --sui-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Floor toolbar keeps the date inline, not full width */
.fb-datel .sui-date-wrap { display: inline-block; width: auto; vertical-align: middle; }
.fb-datel .sui-date-trigger { min-width: 160px; }

/* StratusUI controls sized for the StratusBuilder property panel (sb-props) */
.sb-props .sui-sel-wrap, .sb-props .sui-date-wrap, .sb-props .sui-time-wrap { width: 100%; }
.sb-props .sui-sel-trigger, .sb-props .sui-date-trigger, .sb-props .sui-time-trigger { padding: 6px 10px; font-size: 0.82rem; border-radius: 8px; }
.sb-props .sui-num { border-radius: 8px; }
.sb-props .sui-switch { vertical-align: middle; }

/* ── Guest tickets (/tickets) ───────────────────────────────────────────────
   The QR is deliberately large and on a white plate regardless of theme: door
   scanners read reflected light off a phone screen, and a dark-themed code with
   low contrast is the difference between a clean scan and holding up the line. */
.vs-tickets { max-width: 560px; margin: 0 auto; }
.vs-tickets-sub { color: var(--vs-text-dim, rgba(255,255,255,0.65)); margin: 0 0 24px; }
.vs-ticket-card {
  display: flex; align-items: center; gap: 18px;
  padding: 18px; margin-bottom: 16px;
  border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius);
  background: var(--vs-card-bg);
}
.vs-ticket-qr {
  width: 132px; height: 132px; flex: 0 0 132px;
  background: #fff; padding: 8px; border-radius: 8px;
  box-sizing: border-box;
}
/* Raster only: the guest's own codes are re-drawn as SVG (with their photo in
   the middle), where pixelation would fight the vector edges. */
img.vs-ticket-qr { image-rendering: pixelated; }
.vs-ticket-meta { min-width: 0; }
.vs-ticket-event { font-weight: 700; color: var(--vs-text); }
.vs-ticket-holder { color: var(--vs-text-dim, rgba(255,255,255,0.65)); margin-top: 2px; }
.vs-ticket-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem; color: var(--vs-text-dim, rgba(255,255,255,0.5));
  margin-top: 8px; overflow-wrap: anywhere;
}
.vs-ticket-flag {
  margin-top: 8px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #f66;
}
/* Purchase history groups (Tonight / Coming up / Past events) */
.vs-tickets-group { margin-bottom: 34px; }
.vs-tickets-group-title {
  font-family: var(--vs-display, inherit); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
  margin: 0 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid var(--vs-card-border);
}
/* Tonight's ticket is the one the guest needs at the door, so it gets the accent
   and the others stay quiet. */
.vs-tickets-live .vs-tickets-group-title { color: var(--vs-primary); }
.vs-tickets-order { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.vs-tickets-order-img {
  width: 54px; height: 54px; flex: 0 0 54px;
  object-fit: cover; border-radius: 8px;
  border: 1px solid var(--vs-card-border);
}
/* Past nights are receipts — de-emphasised, and they carry no QR at all. */
.vs-tickets-group:last-child .vs-tickets-order { opacity: .62; }

/* Apple-supplied badge. No background, border, radius or filter may be added —
   their guidelines forbid altering or obstructing the artwork, and it already
   carries its own outline for dark backgrounds. The 4px inset keeps Apple's
   minimum clear space of .1x the badge height. */
.vs-ticket-wallet {
  display: inline-block; margin-top: 12px; padding: 4px;
  line-height: 0; text-decoration: none;
}
.vs-ticket-wallet img { display: block; width: 139px; height: auto; }
.vs-ticket-wallet:hover { opacity: .85; }
.vs-ticket-used .vs-ticket-qr { opacity: .35; }
@media (max-width: 520px) {
  .vs-ticket-card { flex-direction: column; align-items: flex-start; }
  .vs-ticket-qr { width: 100%; height: auto; aspect-ratio: 1; flex: none; }
}

/* ── My Account (/account) ──────────────────────────────────────────────────
   Same column width as /tickets so the two guest screens feel like one place.
   The editable profile leads; what's on file with us sits below it, visibly
   quieter, because it's information rather than something to act on. */
.vs-account { max-width: 560px; margin: 0 auto; }
.vs-account-photo-row { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }
.vs-account-photo {
  width: 96px; height: 96px; flex: 0 0 96px;
  border: 1px dashed var(--vs-card-border); border-radius: 50%;
  background: var(--vs-card-bg); overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.vs-account-photo:hover, .vs-account-photo:focus-visible,
.vs-account-photo-over { border-color: var(--vs-primary); }
.vs-account-photo img { width: 100%; height: 100%; object-fit: cover; }
.vs-account-photo-empty {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vs-text-dim, rgba(255,255,255,0.55)); text-align: center; padding: 0 8px;
}
.vs-account-photo-help { font-size: 0.85rem; color: var(--vs-text-dim, rgba(255,255,255,0.6)); }
.vs-account-photo-status { margin-top: 6px; font-size: 0.8rem; color: var(--vs-primary); min-height: 1em; }
.vs-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs-account-grid label, .vs-account-label {
  display: block; margin-bottom: 14px;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
}
.vs-account-grid label { margin-bottom: 0; }
.vs-account-field {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
  padding: 12px 13px; font-family: inherit; font-size: 1rem;
  color: var(--vs-text); background: var(--vs-card-bg);
  border: 1px solid var(--vs-card-border); border-radius: 8px;
}
.vs-account-field:focus { outline: none; border-color: var(--vs-primary); }
.vs-account-err { color: #ff9a9a; font-size: 0.85rem; min-height: 1em; margin: 2px 0 10px; }
.vs-account-ro { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--vs-card-border); }
.vs-account-ro-title {
  font-family: var(--vs-display, inherit); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.6)); margin: 0 0 10px;
}
.vs-account-ro-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 0.9rem;
  border-bottom: 1px solid var(--vs-card-border);
}
.vs-account-ro-row span:first-child { color: var(--vs-text-dim, rgba(255,255,255,0.6)); }
.vs-account-ro-note {
  margin: 12px 0 0; font-size: 0.82rem;
  color: var(--vs-text-dim, rgba(255,255,255,0.5));
}
/* Cards on file — rendered by guest-auth's shared manager, so this styles the
   frame around it rather than the rows themselves. */
.vs-account-pm { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--vs-card-border); }
.vs-account-pm-sub {
  margin: 0 0 10px; font-size: 0.85rem;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
}
/* ── Refund request (guest) ────────────────────────────────────────────────
   Always leads with the policy, so a guest reads the rule before asking rather
   than after being refused. */
.vs-tickets-actions { display: flex; justify-content: flex-end; margin: 4px 0 18px; }
.vs-refund-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px;
}
.vs-refund-modal {
  background: var(--vs-card-bg, #161625); color: var(--vs-text);
  border: 1px solid var(--vs-card-border); border-radius: 16px;
  max-width: 440px; width: 100%; max-height: 90vh; overflow: auto; padding: 24px;
}
.vs-refund-title {
  font-family: var(--vs-display, inherit); font-size: 1.15rem; font-weight: 700;
  color: var(--vs-heading, #fff); margin: 0 0 12px;
}
.vs-refund-policy {
  margin: 0 0 14px; padding: 12px 14px;
  border-left: 3px solid var(--vs-primary); border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.04); font-size: 0.9rem;
}
.vs-refund-note { margin: 0 0 14px; font-size: 0.88rem; color: var(--vs-text-dim, rgba(255,255,255,.7)); }
.vs-refund-warn { color: #ffb020; }
.vs-refund-err { color: #ff9a9a; font-size: 0.85rem; min-height: 1em; margin: 8px 0; }
.vs-refund-modal .vs-btn-lg { width: 100%; margin-bottom: 10px; }
.vs-refund-modal textarea.vs-account-field { margin-bottom: 12px; }

/* Spoken, never shown — e.g. the user menu's label while it is still an icon. */
.vs-nav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Chips: secondary jumps between the guest's own pages. Deliberately small —
   they're navigation, not the point of the page. */
.vs-account-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.vs-chip {
  display: inline-block; cursor: pointer;
  padding: 6px 12px; font-size: 0.72rem; font-weight: 600;
  font-family: var(--vs-font); letter-spacing: 0.3px; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  background: transparent; color: var(--vs-text-dim, rgba(255,255,255,0.7));
  border: 1px solid var(--vs-card-border);
  transition: color .15s, border-color .15s;
}
.vs-chip:hover { border-color: var(--vs-primary); color: var(--vs-primary); }

/* Accordion sections */
.vs-acc { border-bottom: 1px solid var(--vs-card-border); }
.vs-acc:first-of-type { border-top: 1px solid var(--vs-card-border); }
.vs-acc-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px; cursor: pointer; list-style: none;
  font-family: var(--vs-display, inherit); font-size: 0.95rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--vs-heading, #fff);
}
.vs-acc-sum::-webkit-details-marker { display: none; }
.vs-acc-sum:hover { color: var(--vs-primary); }
.vs-acc-caret { transition: transform .15s; opacity: .6; font-size: 0.9rem; }
.vs-acc[open] .vs-acc-caret { transform: rotate(180deg); }
.vs-acc-body { padding: 2px 2px 26px; }
.vs-acc-danger .vs-acc-sum { color: #ff9a9a; }
.vs-acc-danger .vs-acc-sum:hover { color: #ff7a7a; }

/* Pass section */
.vs-pass-lead { margin: 0 0 14px; color: var(--vs-text); }
.vs-pass-locs { list-style: none; margin: 0 0 18px; padding: 0; }
.vs-pass-locs li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 0; border-bottom: 1px solid var(--vs-card-border);
}
.vs-pass-loc-name { font-weight: 700; color: var(--vs-heading, #fff); }
.vs-pass-loc-where { font-size: 0.82rem; color: var(--vs-text-dim, rgba(255,255,255,0.55)); }
.vs-pass-note {
  padding: 14px 16px; margin: 0 0 18px;
  border-left: 3px solid var(--vs-primary); border-radius: 0 8px 8px 0;
  background: var(--vs-card-bg); font-size: 0.88rem;
}
.vs-pass-note p { margin: 0 0 8px; }
.vs-pass-note p:last-child { margin: 0; color: var(--vs-text-dim, rgba(255,255,255,0.65)); }

/* Delete section */
.vs-del-lead { margin: 0 0 16px; color: #ff9a9a; font-weight: 600; }
.vs-del-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.vs-del-h {
  margin: 0 0 8px; font-size: 0.78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vs-text-dim, rgba(255,255,255,0.6));
}
.vs-del-cols ul { margin: 0; padding-left: 18px; font-size: 0.86rem; }
.vs-del-cols li { margin-bottom: 7px; }
/* The confirm prompt reads as a sentence, not a field label — uppercasing it
   would swallow the one word the guest has to type exactly. */
.vs-del-label { text-transform: none; letter-spacing: normal; font-size: 0.88rem; }
.vs-del-label b { color: var(--vs-heading, #fff); letter-spacing: .08em; }
.vs-btn-danger { background: #c0392b; color: #fff; }
.vs-btn-danger:hover:not(:disabled) { filter: brightness(1.12); }
.vs-btn-danger:disabled { opacity: .45; cursor: default; }
@media (max-width: 520px) {
  .vs-del-cols { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 520px) {
  .vs-account-grid { grid-template-columns: 1fr; gap: 0; }
  .vs-account-grid label { margin-bottom: 14px; }
}

/* ── SMS opt-in widget (venue site, A2P 10DLC) ──────────────────────────────
   The consent text is intentionally full-size and adjacent to the checkbox
   rather than shrunk to fine print — carrier vetting reviews this form, and
   burying the disclosure is a rejection. Only the policy links are de-emphasized. */
.vs-sms-section { text-align: center; }
.vs-sms-widget { margin-top: 8px; }
.vs-sms-card { max-width: 460px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.vs-sms-card input[type="tel"],
.vs-sms-card input[type="text"],
.vs-sms-card input[type="email"] { width: 100%; padding: 13px 14px; border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius); background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-text); font: inherit; }
.vs-sms-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; line-height: 1.45; color: var(--vs-text); cursor: pointer; }
.vs-sms-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vs-primary); cursor: pointer; }
.vs-sms-age { font-weight: 600; }
.vs-sms-err { color: #f66; font-size: 0.85rem; min-height: 1em; }
.vs-sms-fine { font-size: 0.78rem; color: var(--vs-text-dim, rgba(255,255,255,0.6)); margin: 0; text-align: center; }
.vs-sms-fine a { color: inherit; text-decoration: underline; }
.vs-sms-done { align-items: center; text-align: center; gap: 10px; }
.vs-sms-check { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--vs-primary); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }

/* ── Donate widget (venue site) ─────────────────────────────────────────────── */
.vs-donate-section { text-align: center; }
.vs-donate-widget { margin-top: 8px; }
.vs-don-card { max-width: 460px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.vs-don-freq { display: inline-flex; align-self: center; background: color-mix(in srgb, var(--vs-card-border) 40%, transparent); border-radius: 999px; padding: 4px; gap: 2px; }
.vs-don-freqbtn { border: none; background: transparent; color: var(--vs-text); font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.vs-don-freqbtn.on { background: var(--vs-primary); color: #fff; }
.vs-don-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.vs-don-chip { padding: 14px 8px; border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius); background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-heading); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.vs-don-chip:hover { transform: translateY(-1px); }
.vs-don-chip.on { border-color: var(--vs-primary); box-shadow: inset 0 0 0 1px var(--vs-primary); color: var(--vs-primary); }
.vs-don-customwrap { position: relative; display: flex; align-items: center; }
.vs-don-cur { position: absolute; left: 14px; color: var(--vs-text); font-weight: 700; }
.vs-don-custom { width: 100%; box-sizing: border-box; padding: 12px 12px 12px 28px; border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius); background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-heading); font: inherit; font-size: 1.05rem; }
.vs-don-fields { display: flex; flex-direction: column; gap: 10px; }
.vs-don-fields input, .vs-don-fields textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--vs-card-border); border-radius: var(--vs-card-radius); background: var(--vs-card-bg, rgba(255,255,255,0.04)); color: var(--vs-heading); font: inherit; }
.vs-don-fields input::placeholder, .vs-don-fields textarea::placeholder, .vs-don-custom::placeholder { color: var(--vs-text); opacity: 0.6; }
.vs-don-continue, .vs-don-pay { padding: 14px; border: none; border-radius: var(--vs-button-radius); background: var(--vs-primary); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.vs-don-continue:disabled, .vs-don-pay:disabled { opacity: 0.6; cursor: default; }
.vs-don-err { color: #ff6b6b; font-size: 0.85rem; min-height: 1em; }
.vs-don-summary { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--vs-heading); }
.vs-don-card-el { padding: 4px 0; }
.vs-don-thanks { text-align: center; align-items: center; }
.vs-don-thanks-ic { font-size: 2.6rem; }
.vs-don-thanks p { color: var(--vs-text); font-size: 1.05rem; line-height: 1.5; }

/* ============================================================= */
/* Permissions editor (permissions-editor.js) — pe-* namespace   */
/* ============================================================= */
.pe-root { display: flex; flex-direction: column; gap: 18px; }
.pe-sub { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 15px; color: #C4A0E0; margin-top: 4px; }
.pe-hint { font-size: 12px; color: var(--text-dim); margin: -6px 0 2px; }
.pe-hint.pe-readonly { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border-2); }
.pe-tier { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 10px 0 6px; }

.pe-role-grid, .pe-feat-grid, .pe-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.pe-role, .pe-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .15s, border-color .15s; }
.pe-role:hover, .pe-card:hover { border-color: var(--lavender); }
.pe-role.pe-on, .pe-card.pe-on { background: var(--lavender-glow); border-color: var(--lavender); color: #E8DBF5; }
.pe-role input, .pe-card input, .pe-feat input { accent-color: var(--lavender); }

.pe-feat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; cursor: pointer; }
.pe-feat.pe-on { background: var(--lavender-glow); border-color: var(--lavender); }
.pe-feat input { grid-row: 1 / span 2; align-self: center; }
.pe-feat-lbl { font-size: 13px; font-weight: 600; color: #E8DBF5; }
.pe-feat-lbl em { font-style: normal; font-size: 10px; color: var(--yellow); border: 1px solid rgba(242,210,100,.4); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.pe-feat-desc { font-size: 11px; color: var(--text-dim); grid-column: 2; }

.pe-domain { background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 4px 12px; }
.pe-domain > summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pe-domain > summary::-webkit-details-marker { display: none; }
.pe-domain > summary::before { content: '▸'; margin-right: 8px; color: var(--lavender); transition: transform .15s; display: inline-block; }
.pe-domain[open] > summary::before { transform: rotate(90deg); }
.pe-count { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.pe-card-grid { padding: 4px 0 12px; }

.pe-advanced .pe-adv { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 6px 0 12px; }
.pe-adv-mod { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.pe-adv-mod-h { font-size: 12px; font-weight: 600; color: #C4A0E0; margin-bottom: 6px; }
.pe-adv-mod-h em { font-style: normal; font-size: 10px; color: var(--text-dim); float: right; }
.pe-adv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.pe-adv-perm { font-size: 12px; color: var(--text); }
.pe-adv-row select { font-size: 11px; padding: 3px 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-radius: 6px; }

.pe-preview { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 12px; }
.pe-chips { font-size: 11px; color: var(--text-dim); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pe-chip { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-family: monospace; }
.pe-chip-grant { background: rgba(88, 190, 130, .15); color: #6FD79A; border: 1px solid rgba(88,190,130,.35); }
.pe-chip-deny { background: rgba(224, 96, 96, .15); color: #E88; border: 1px solid rgba(224,96,96,.35); }

.pe-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.pe-status { font-size: 12px; color: var(--text-dim); }
.pe-status-ok { color: #6FD79A; }
.pe-status-err { color: #E88; }

/* Platform users — per-Profile permission row + modal host */
.pua-link-row-flex { display: flex; align-items: center; gap: 10px; }
.pua-link-row-flex .pua-link-main { flex: 1; min-width: 0; text-decoration: none; }
.pua-perm-btn { flex: 0 0 auto; font-size: 0.78rem; padding: 5px 10px; }
.pua-perm-host { max-height: 70vh; overflow: auto; text-align: left; }
.sui-modal:has(.pua-perm-host) { max-width: 840px; width: 92vw; }

/* ===== Event editor — Social (Facebook) tab ===== */
.ee-social-mount { padding: 4px 2px; }
.ee-social-loading, .ee-social-err, .ee-fb-msg-out { font-size: 0.9rem; color: var(--text-dim); padding: 6px 0; }
.ee-social-err { color: #ff6b6b; }
.ee-btn, .ee-btn-primary {
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--white);
  border-radius: 8px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.ee-btn:hover { background: var(--surface); border-color: var(--lavender); }
.ee-btn-primary { background: var(--yellow); border-color: var(--yellow); color: #12122B; }
.ee-btn-primary:hover { background: var(--yellow-dark); }
.ee-btn:disabled, .ee-btn-primary:disabled { opacity: 0.45; cursor: default; }
.ee-fb-connect label, .ee-fb-composer label {
  display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin: 10px 0 4px;
}
.ee-fb-connect input, .ee-fb-composer textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border-2); border-radius: 8px;
  padding: 8px 10px; font-family: inherit; font-size: 0.9rem;
  color: var(--white); background: var(--surface);
}
.ee-fb-composer textarea { resize: vertical; line-height: 1.4; }
.ee-fb-composer textarea:focus, .ee-fb-connect input:focus { outline: none; border-color: var(--yellow); }
.ee-fb-head { font-size: 0.95rem; margin: 4px 0 12px; color: var(--white); }
.ee-fb-meta { font-size: 0.8rem; color: var(--text-dim); margin: 6px 0 10px; }
.ee-fb-meta a, .ee-fb-post-top a, .ee-fb-arow a { color: var(--lavender-light, #C4A0E0); }
.ee-fb-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.ee-fb-sched { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.ee-fb-sched input {
  border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 10px; font-family: inherit;
  color: var(--white); background: var(--surface);
}
.ee-fb-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ee-fb-badge-ok { background: rgba(46,160,67,0.18); color: #4ade80; }
.ee-fb-badge-sched { background: var(--yellow-glow); color: var(--yellow); }
.ee-fb-badge-err { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.ee-fb-posts { margin: 6px 0 4px; }
.ee-fb-post { border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.ee-fb-post-top { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text); flex-wrap: wrap; }
.ee-fb-del { margin-left: auto; border: 1px solid var(--border-2); background: transparent; color: #ff6b6b; border-radius: 6px; padding: 3px 10px; font-size: 0.78rem; cursor: pointer; }
.ee-fb-del:hover { background: rgba(255,107,107,0.1); }
.ee-fb-post-msg { font-size: 0.88rem; color: var(--white); margin-top: 6px; white-space: pre-wrap; }
.ee-fb-metrics { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ee-fb-metric { border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 16px; text-align: center; min-width: 76px; background: var(--surface); }
.ee-fb-metric-n { display: block; font-size: 1.3rem; font-weight: 700; color: var(--yellow); }
.ee-fb-metric-l { display: block; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.ee-fb-arow { font-size: 0.82rem; color: var(--text); padding: 3px 0; }

/* Crop-modal aspect toggle. The circular guide means "avatar" and only tells the
   truth at 1:1 — at 4:5 it would imply a round crop that isn't happening. */
.en-crop-aspects { display: flex; gap: 8px; padding: 10px 14px 0; }
.en-crop-aspects .en-crop-ar.is-active {
  border-color: var(--accent, #6c5ce7);
  color: var(--text-1, #fff);
  background: color-mix(in srgb, var(--accent, #6c5ce7) 18%, transparent);
}
.en-crop-overlay.en-crop-noncircular .en-crop-circle { display: none; }