:root {
  --bg: #080808;
  --panel: #111;
  --panel-2: #151515;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #f5f5f5;
  --muted: rgba(245, 245, 245, 0.58);
  --faint: rgba(245, 245, 245, 0.34);
  --accent: #ffde59;
  --yellow: #ffde59;
  --accent-rgb: 255, 222, 89;
  --green: #34d399;
  --red: #f87171;
  --orange: #fb923c;
  --blue: #60a5fa;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #admin-root { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 8%, rgba(var(--accent-rgb),0.07), transparent 26rem),
    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb),0.08), transparent 30rem),
    linear-gradient(180deg, #0b0b0b 0%, var(--bg) 38%, #050505 100%);
  color: var(--text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 8%, #000, transparent 72%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 300;
  height: 100vh;
  padding: 26px 18px;
  border-right: 1px solid var(--line);
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(18px);
  overflow: visible;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.club-menu { position: relative; margin-bottom: 30px; }
.club-menu .brand { margin-bottom: 0; }
.club-menu::before {
  content: "";
  position: absolute;
  left: 100%;
  top: -12px;
  width: 30px;
  height: calc(100% + 24px);
  pointer-events: none;
}
.club-menu:hover::before,
.club-menu:focus-within::before {
  pointer-events: auto;
}
.club-menu-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
}
.club-menu-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg);
  margin-left: auto;
}
.club-menu-flyout {
  position: absolute;
  left: calc(100% + 14px);
  top: -8px;
  min-width: 244px;
  display: grid;
  grid-auto-rows: minmax(42px, auto);
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    linear-gradient(180deg, #171714, #0b0b0a);
  box-shadow: 0 30px 90px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.04) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 220ms;
  z-index: 340;
  isolation: isolate;
}
.club-menu:hover .club-menu-flyout,
.club-menu:focus-within .club-menu-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 0ms;
}
.club-menu-flyout button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  color: var(--muted);
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 850;
  font-family: inherit;
  cursor: pointer;
}
.club-menu-flyout button:hover,
.club-menu-flyout button:focus {
  color: var(--text);
  border-color: rgba(var(--accent-rgb),0.24);
  background: rgba(var(--accent-rgb),0.11);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #000;
  font-weight: 950;
  letter-spacing: -0.04em;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 5px; background: rgba(0,0,0,0.16); }
.brand-title { font-size: 16px; font-weight: 900; letter-spacing: 0.08em; }
.brand-sub { margin-top: 2px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.12em; }

.nav { display: grid; gap: 7px; }
.nav-item { position: relative; }
.nav-item.has-flyout { z-index: 1; }
.nav-item.has-flyout:hover,
.nav-item.has-flyout:focus-within { z-index: 220; }
.nav-item > a {
  color: var(--muted);
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 750;
}
.nav-item > a.active {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.055);
}
.nav-item.has-flyout > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
  margin-left: auto;
}
.nav-item.has-flyout > a .nav-dot { margin-left: 8px; }
.nav-item.has-flyout::before {
  content: "";
  position: absolute;
  left: 100%;
  top: -10px;
  width: 28px;
  height: calc(100% + 20px);
  pointer-events: none;
}
.nav-item.has-flyout:hover::before,
.nav-item.has-flyout:focus-within::before {
  pointer-events: auto;
}
.nav-flyout {
  position: absolute;
  left: calc(100% + 12px);
  top: -8px;
  min-width: 238px;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    linear-gradient(180deg, #171714, #0b0b0a);
  box-shadow: 0 28px 80px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.035) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 220ms;
  z-index: 240;
  isolation: isolate;
}
.nav-flyout::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: #11110f;
  transform: rotate(45deg);
}
.nav-item:hover .nav-flyout,
.nav-item:focus-within .nav-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 0ms;
}
.nav-flyout-title {
  padding: 4px 7px 6px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-flyout a {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.025);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
}
.nav-flyout a:hover,
.nav-flyout a:focus {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.11);
  border-color: rgba(var(--accent-rgb), 0.24);
}
.nav-flyout a.active {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.34);
}
.nav-flyout small {
  color: rgba(var(--accent-rgb), 0.9);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.settings-subnav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(0,0,0,0.2);
}
.settings-subnav a {
  min-width: 132px;
  white-space: nowrap;
  padding: 11px 16px;
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}
.settings-subnav a.active {
  background: rgba(var(--accent-rgb), 0.95);
  color: #050505;
  box-shadow: 0 12px 34px rgba(var(--accent-rgb), 0.14);
}
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--yellow);
  opacity: 0;
}
.nav a.active .nav-dot { opacity: 1; }

.side-footer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 22px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.role-pill {
  display: inline-flex;
  border: 1px solid rgba(var(--accent-rgb),0.22);
  background: rgba(var(--accent-rgb),0.09);
  color: var(--yellow);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-email { margin-top: 8px; font-size: 12px; color: var(--faint); word-break: break-word; }
.text-button {
  margin-top: 12px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}

.main { padding: 30px 34px 52px; min-width: 0; }
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.topbar-heading {
  min-width: 0;
  flex: 1;
}
.global-search {
  position: relative;
  width: min(520px, 100%);
  margin-bottom: 18px;
}
.global-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yellow);
  font-size: 18px;
  font-weight: 950;
  pointer-events: none;
  z-index: 2;
}
.global-search input {
  width: 100%;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  padding: 0 18px 0 44px;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.16);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.global-search input::placeholder { color: var(--faint); }
.global-search input:focus {
  border-color: rgba(var(--accent-rgb),0.55);
  background: rgba(255,255,255,0.075);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.10), 0 22px 70px rgba(0,0,0,0.30);
}
.global-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(620px, calc(100vw - 360px));
  max-height: min(68vh, 620px);
  overflow: auto;
  z-index: 120;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(25,25,25,0.96), rgba(10,10,10,0.96));
  box-shadow: 0 30px 90px rgba(0,0,0,0.48);
  backdrop-filter: blur(18px);
}
.global-search-group + .global-search-group {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}
.global-search-group-title {
  padding: 5px 8px 8px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.global-search-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.global-search-result:hover,
.global-search-result:focus-visible {
  background: rgba(var(--accent-rgb),0.12);
  outline: none;
}
.global-search-result-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),0.14);
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
}
.global-search-result strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}
.global-search-result small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.global-search-empty {
  padding: 15px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.eyebrow {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
h1 { margin: 6px 0 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.04em; }
.subtitle { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 780px; }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 850;
}
.btn.primary { background: var(--yellow); color: #050505; border-color: var(--yellow); }
.btn.danger { color: var(--red); background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.28); }
.btn.danger.subtle { color: var(--muted); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.compact {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11px;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)), var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.28);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 26px 90px rgba(0,0,0,0.34); }
.metric-value { font-size: 32px; font-weight: 950; letter-spacing: -0.04em; }
.metric-label { margin-top: 4px; color: var(--faint); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; }
.metric-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% 12%, rgba(var(--accent-rgb),0.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018));
  box-shadow: 0 16px 48px rgba(0,0,0,0.20);
}
.metric-card span,
.metric-card strong,
.metric-card small {
  display: block;
  min-width: 0;
}
.metric-card span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1.15;
  text-transform: uppercase;
}
.metric-card strong {
  margin-top: 10px;
  color: var(--text);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 0.95;
  overflow-wrap: anywhere;
}
.metric-card small {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.customer-delete-back {
  margin-bottom: 16px;
}
.customer-delete-page {
  min-height: 54vh;
  display: grid;
  place-items: center;
}
.customer-delete-card {
  width: min(720px, 100%);
  padding: 28px;
  border: 1px solid rgba(248,113,113,0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 8%, rgba(248,113,113,0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
    var(--panel);
  box-shadow: 0 28px 90px rgba(0,0,0,0.34);
}
.customer-delete-card h2 {
  margin: 10px 0;
  color: var(--text);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.06em;
}
.customer-delete-card p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
}
.customer-delete-card p strong {
  color: var(--text);
}
.customer-delete-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 14px;
}
.customer-delete-summary div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.customer-delete-summary span,
.customer-delete-summary strong {
  display: block;
  min-width: 0;
}
.customer-delete-summary span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.customer-delete-summary strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.customer-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.section { margin-top: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-title { color: var(--faint); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.16em; }
.section-copy { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.table-card { padding: 0; overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  color: var(--faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.table-sort-btn {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.table-sort-btn:hover,
.table-sort-btn.active {
  color: var(--text);
}
.table-sort-btn.active {
  text-shadow: 0 0 18px rgba(var(--accent-rgb),0.16);
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.table tr:last-child td { border-bottom: 0; }
.pt-admin-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: 18px;
  align-items: start;
}
.pt-admin-form,
.pt-admin-list {
  min-width: 0;
}
.pt-admin-form .field textarea {
  width: 100%;
  resize: vertical;
}
.pt-block-list {
  display: grid;
  gap: 10px;
}
.pt-block-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.pt-block-row strong,
.pt-block-row span {
  display: block;
}
.pt-block-row strong {
  color: var(--text);
  font-size: 14px;
}
.pt-block-row span {
  margin-top: 5px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.pt-block-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 170px;
}
.pt-block-meta span {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.appointment-schedule-hero,
.appointment-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.appointment-schedule-hero h2,
.appointment-section-head h2 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.05;
}
.appointment-schedule-summary,
.appointment-board-meta,
.appointment-card-actions,
.appointment-calendar-legend,
.appointment-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.appointment-schedule-summary {
  margin-top: 16px;
}
.appointment-schedule-summary span,
.appointment-board-meta span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.appointment-calendar-card {
  overflow: hidden;
  padding: 18px;
}
.appointment-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.appointment-calendar-legend {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.appointment-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
}
.appointment-calendar-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.appointment-calendar-legend .available { background: #65d98a; }
.appointment-calendar-legend .booked { background: var(--accent); }
.appointment-calendar-legend .requested { background: #f2a23a; }
.appointment-calendar-legend .blocked { background: #ff6969; }
.appointment-calendar-legend .completed { background: #858585; }
.appointment-calendar-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
}
.appointment-calendar-head {
  display: grid;
  grid-template-columns: 72px repeat(var(--appointment-days), minmax(150px, 1fr));
  min-width: calc(72px + var(--appointment-days) * 150px);
  border-bottom: 1px solid var(--line);
}
.appointment-time-spacer {
  border-right: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.appointment-day-head {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 12px 14px;
  min-height: 64px;
  background: rgba(255,255,255,0.025);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.appointment-day-head:last-child {
  border-right: 0;
}
.appointment-day-head strong,
.appointment-day-head span {
  display: block;
}
.appointment-day-head strong {
  font-size: 13px;
  font-weight: 950;
}
.appointment-day-head span {
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
}
.appointment-day-head.today {
  background: rgba(var(--accent-rgb),0.10);
}
.appointment-calendar-grid {
  display: grid;
  grid-template-columns: 72px repeat(var(--appointment-days), minmax(150px, 1fr));
  min-width: calc(72px + var(--appointment-days) * 150px);
}
.appointment-time-rail,
.appointment-day-column {
  position: relative;
}
.appointment-time-rail {
  border-right: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
}
.appointment-time-rail span {
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
}
.appointment-day-column {
  border-right: 1px solid var(--line);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.035) 0,
      rgba(255,255,255,0.035) 1px,
      transparent 1px,
      transparent calc(100% / var(--appointment-hours))
    );
}
.appointment-day-column:last-child {
  border-right: 0;
}
.appointment-calendar-block {
  position: absolute;
  left: 8px;
  right: 8px;
  min-height: 34px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.22);
}
.appointment-calendar-block span,
.appointment-calendar-block strong,
.appointment-calendar-block small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointment-calendar-block span {
  color: rgba(255,255,255,0.78);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.appointment-calendar-block strong {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 950;
}
.appointment-calendar-block small {
  margin-top: 3px;
  color: rgba(255,255,255,0.68);
  font-size: 10px;
  font-weight: 800;
}
.appointment-calendar-block.available {
  background: linear-gradient(135deg, rgba(101,217,138,0.18), rgba(101,217,138,0.075));
  border-color: rgba(101,217,138,0.42);
}
.appointment-calendar-block.booked {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.38), rgba(var(--accent-rgb),0.13));
  border-color: rgba(var(--accent-rgb),0.62);
}
.appointment-calendar-block.blocked {
  background: linear-gradient(135deg, rgba(255,105,105,0.22), rgba(255,105,105,0.08));
  border-color: rgba(255,105,105,0.45);
}
.appointment-calendar-block.requested {
  background: linear-gradient(135deg, rgba(242,162,58,0.25), rgba(242,162,58,0.08));
  border-color: rgba(242,162,58,0.50);
}
.appointment-calendar-block.completed {
  background: linear-gradient(135deg, rgba(133,133,133,0.25), rgba(133,133,133,0.08));
  border-color: rgba(180,180,180,0.28);
}
.appointment-service-grid,
.appointment-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.appointment-service-card,
.appointment-board-card {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.appointment-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.appointment-card-top h3 {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.12;
}
.appointment-service-card p,
.appointment-board-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.appointment-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.appointment-card-metrics span {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}
.appointment-card-metrics strong,
.appointment-card-metrics small {
  display: block;
}
.appointment-card-metrics strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}
.appointment-card-metrics small {
  margin-top: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.appointment-card-actions {
  margin-top: 2px;
}
.appointment-empty-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(255,255,255,0.025));
}
.appointment-empty-card.compact {
  margin-top: 14px;
  padding: 16px;
}
.appointment-empty-card strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}
.appointment-empty-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.crm-table-card {
  max-height: calc(100vh - 320px);
  overflow: auto;
}
.crm-table {
  min-width: 980px;
}
.crm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(17,17,17,0.96);
  backdrop-filter: blur(14px);
}
.crm-table th {
  padding: 15px 20px;
}
.crm-table td {
  padding: 20px 20px;
  vertical-align: middle;
}
.crm-table tbody tr {
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.crm-table tbody tr:hover {
  background: rgba(255,255,255,0.042);
}
.crm-table tbody tr:hover td {
  color: var(--text);
}
.crm-member-cell {
  gap: 13px;
  min-width: 230px;
}
.member-name-stack {
  min-width: 0;
}
.member-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}
.member-subline {
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-cell,
.number-cell,
.last-seen-cell {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.email-cell {
  max-width: 290px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.number-cell {
  white-space: nowrap;
}
.last-seen-cell {
  color: var(--text);
  font-weight: 850;
  white-space: nowrap;
}
.crm-actions {
  text-align: right;
  white-space: nowrap;
}
.premium-crm {
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018));
}
.premium-crm .table tr {
  transition: background .18s ease, transform .18s ease;
}
.premium-crm .table tbody tr:hover {
  background: rgba(255,255,255,0.055);
}
.membership-pill {
  display: inline-flex;
  margin: 3px 5px 3px 0;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.membership-pill.active {
  color: var(--green);
  border-color: rgba(52,211,153,0.22);
  background: rgba(52,211,153,0.08);
}
.membership-pill.cancelling {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),0.28);
  background: rgba(var(--accent-rgb),0.10);
}
.membership-pill.paused {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.26);
  background: rgba(251,191,36,0.08);
}
.membership-pill.expired {
  color: var(--red);
  border-color: rgba(248,113,113,0.28);
  background: rgba(248,113,113,0.08);
}
.membership-pill.pt {
  color: #f0abfc;
  border-color: rgba(240,171,252,0.24);
  background: rgba(240,171,252,0.08);
}
.profile-completion-cell {
  display: inline-flex;
  min-width: 150px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb),0.28);
  background: rgba(var(--accent-rgb),0.08);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.profile-completion-cell strong {
  font-size: 0.78rem;
  color: var(--text);
}
.profile-completion-cell small {
  max-width: 190px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}
.profile-completion-cell.complete {
  border-color: rgba(52,211,153,0.28);
  background: rgba(52,211,153,0.08);
}
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),0.24);
  background: rgba(var(--accent-rgb),0.09);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  text-transform: uppercase;
  white-space: nowrap;
}
.compliance-badge span {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.2);
  color: #fbbf24;
  font-size: 9px;
}
.compliance-badge.issue {
  border-color: rgba(248,113,113,0.3);
  background: rgba(248,113,113,0.09);
  color: var(--red);
}
.compliance-badge.issue span { background: rgba(248,113,113,0.16); color: var(--red); }
.compliance-badge.warning {
  border-color: rgba(var(--accent-rgb),0.24);
  background: rgba(var(--accent-rgb),0.09);
  color: rgb(var(--accent-rgb));
}
.compliance-badge.warning span {
  background: rgba(var(--accent-rgb),0.18);
  color: rgb(var(--accent-rgb));
}
.compliance-badge.complete {
  border-color: rgba(52,211,153,0.22);
  background: rgba(52,211,153,0.075);
  color: var(--green);
}
.compliance-badge.neutral {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: var(--muted);
}
.compliance-badge.muted {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  color: var(--faint);
}
.streak-cell,
.credits-cell {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}
.streak-cell small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.strong { color: var(--text); font-weight: 850; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.055);
  color: var(--muted);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pill.green { color: var(--green); border-color: rgba(52,211,153,0.22); background: rgba(52,211,153,0.08); }
.pill.red { color: var(--red); border-color: rgba(248,113,113,0.26); background: rgba(248,113,113,0.08); }
.pill.yellow { color: var(--yellow); border-color: rgba(var(--accent-rgb),0.24); background: rgba(var(--accent-rgb),0.08); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.members-page {
  display: grid;
  gap: 24px;
}
.crm-metric-grid {
  margin-top: 0;
}
.crm-controls {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
    rgba(0,0,0,0.12);
}
.crm-search-wrap .search {
  width: 100%;
  min-height: 44px;
}
.crm-segmented {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.crm-segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.crm-segmented button.active {
  background: var(--yellow);
  color: #050505;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb),0.12);
}
.crm-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.columns-menu {
  position: relative;
}
.columns-popover {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(16,16,16,0.98);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}
.columns-popover.open { display: grid; gap: 4px; }
.popover-title {
  padding: 8px 9px 7px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.columns-popover label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.columns-popover label:hover { background: rgba(255,255,255,0.055); color: var(--text); }
.filters-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 12px;
  padding: 10px 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.filters-popover button:hover {
  background: rgba(255,255,255,0.055);
  color: var(--text);
}
.filters-popover button.active {
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.08);
}
.plan-cell strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}
.plan-cell span {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
}
.entitlement-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0 10px;
  color: var(--muted);
  background: rgba(255,255,255,0.045);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.entitlement-pill.unlimited {
  color: var(--yellow);
  border-color: rgba(var(--accent-rgb),0.28);
  background: rgba(var(--accent-rgb),0.09);
}
.entitlement-pill.trial {
  color: var(--blue);
  border-color: rgba(96,165,250,0.24);
  background: rgba(96,165,250,0.08);
}
.entitlement-pill.none { opacity: .55; }
.crm-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-weight: 850;
}
.search {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  padding: 12px 14px;
  outline: none;
}
.segmented { display: inline-flex; gap: 5px; padding: 4px; border: 1px solid var(--line); background: rgba(255,255,255,0.035); border-radius: 999px; }
.segmented button { border: 0; border-radius: 999px; background: transparent; color: var(--muted); padding: 8px 12px; font-weight: 850; font-size: 12px; }
.segmented button.active { background: var(--yellow); color: #050505; }

.sessions-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.session-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.session-filter-row button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.session-filter-row button.active {
  border-color: rgba(var(--accent-rgb),0.42);
  background: rgba(var(--accent-rgb),0.11);
  color: var(--yellow);
}
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb),0.09), transparent 34%),
    rgba(255,255,255,0.026);
}
.calendar-nav strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
  letter-spacing: -0.02em;
}
.calendar-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn.icon-btn {
  width: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
  font-size: 20px;
}
.calendar-jump-input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  color-scheme: dark;
}
.session-control-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 20px;
  background: rgba(255,255,255,0.022);
}
.session-date-filter {
  min-width: 0;
  color-scheme: dark;
}
.session-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  padding: 0 9px;
  color: var(--muted);
  background: rgba(255,255,255,0.055);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.session-tag.training { color: var(--yellow); border-color: rgba(var(--accent-rgb),0.28); background: rgba(var(--accent-rgb),0.08); }
.session-tag.community { color: var(--green); border-color: rgba(52,211,153,0.24); background: rgba(52,211,153,0.08); }
.session-tag.recovery { color: var(--blue); border-color: rgba(96,165,250,0.24); background: rgba(96,165,250,0.08); }
.session-tag.event,
.session-tag.events { color: var(--orange); border-color: rgba(251,146,60,0.26); background: rgba(251,146,60,0.08); }
.session-tag.pt { color: #f0abfc; border-color: rgba(240,171,252,0.24); background: rgba(240,171,252,0.08); }
.club-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 10%, rgba(var(--accent-rgb),0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.022));
  box-shadow: 0 28px 100px rgba(0,0,0,0.36);
}
.club-hero h2 { margin: 10px 0 12px; font-size: clamp(34px, 4vw, 56px); line-height: .98; letter-spacing: -0.045em; }
.club-hero p { margin: 0; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.quick-actions-card {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  background: rgba(0,0,0,0.24);
}
.quick-actions-card .btn { width: 100%; justify-content: center; }
.pulse-grid,
.member-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.pulse-card {
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.022));
  box-shadow: 0 18px 60px rgba(0,0,0,0.24);
}
.pulse-card.wide { grid-column: span 2; }
.pulse-card span { display: block; color: var(--faint); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.pulse-card strong { display: block; margin-top: 12px; color: var(--text); font-size: 30px; line-height: 1; letter-spacing: -0.035em; }
.pulse-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.occupancy-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
  margin-top: 12px;
}
.occupancy-track span { display: block; height: 100%; border-radius: inherit; }
.occupancy-track .calm { background: var(--green); }
.occupancy-track .warm { background: var(--yellow); }
.occupancy-track .hot { background: var(--red); }
.session-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.session-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.021));
  box-shadow: 0 20px 70px rgba(0,0,0,0.28);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.session-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.25); background: rgba(255,255,255,0.06); }
.session-card.selected {
  border-color: color-mix(in srgb, var(--accent) 58%, rgba(255,255,255,0.18));
  box-shadow: 0 22px 76px rgba(0,0,0,0.32), 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}
.session-select-control {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(0,0,0,0.64);
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
}
.session-select-control input { position: absolute; opacity: 0; pointer-events: none; }
.session-select-control span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.26);
}
.session-select-control input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
}
.session-select-control input:checked + span::after {
  content: "";
  display: block;
  width: 8px;
  height: 4px;
  margin: 4px 0 0 3px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(-45deg);
}
.session-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.062), rgba(255,255,255,0.025));
  box-shadow: 0 18px 54px rgba(0,0,0,0.2);
}
.session-bulk-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.session-bulk-select input { accent-color: var(--accent); }
.session-bulk-meta {
  flex: 1;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}
.session-bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-bulk-bar {
  margin: 4px 0 18px;
}
.bulk-card-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.07);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}
.bulk-card-select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}
.guidance-live-card.selection-enabled {
  cursor: default;
}
.guidance-live-card.bulk-selected {
  border-color: rgba(var(--accent-rgb),0.42);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(255,255,255,0.035));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.12), 0 20px 60px rgba(0,0,0,0.26);
}
.session-card-media {
  position: relative;
  height: 126px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(255,255,255,0.04));
}
.session-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.session-card-media > div {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 32px;
  font-weight: 950;
}
.session-card-time {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.62);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}
.session-card-body { padding: 16px; }
.session-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.session-card-title { color: var(--text); font-size: 18px; font-weight: 950; letter-spacing: -0.015em; }
.session-card-meta,
.session-card-details {
  margin-top: 5px;
  color: var(--faint);
  font-size: 12px;
}
.session-card-details { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.session-card-details span,
.session-tags span {
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.occupancy-row { margin-top: 14px; }
.occupancy-label { display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 12px; font-weight: 850; }
.occupancy-label strong { color: var(--text); }
.session-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.session-card-actions { margin-top: 14px; }
.session-card[data-session-detail-row],
.compact-schedule-table tr[data-session-detail-row] {
  cursor: pointer;
}
.session-card[data-session-detail-row]:hover {
  border-color: rgba(var(--accent-rgb),0.32);
}
.session-detail-back {
  margin: -8px 0 16px;
}
.session-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--accent-rgb),0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.02);
  box-shadow: 0 26px 90px rgba(0,0,0,0.28);
}
.session-detail-hero h2 {
  margin: 4px 0 8px;
  color: var(--text);
  font-size: clamp(34px, 5vw, 64px);
  line-height: .92;
  letter-spacing: -0.06em;
}
.session-detail-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}
.session-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.session-detail-meta span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.session-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  max-width: 430px;
}
.session-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.session-alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(251,191,36,0.22);
  border-radius: 18px;
  background: rgba(var(--accent-rgb),0.08);
  color: var(--muted);
}
.session-alert-card strong {
  color: var(--text);
}
.session-detail-section {
  margin-top: 18px;
}
.session-attendee-table-wrap {
  overflow-x: auto;
}
.session-attendee-table {
  min-width: 1040px;
}
.attendee-member {
  display: flex;
  align-items: center;
  gap: 12px;
}
.attendee-member strong {
  display: block;
  color: var(--text);
}
.attendee-member small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
}
.attendee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.session-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}
.session-note-form textarea {
  min-height: 86px;
  resize: vertical;
}
.session-note-list {
  display: grid;
  gap: 10px;
}
.session-note-item {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.session-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.session-note-actions,
.session-note-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.session-note-edit-form {
  display: grid;
  gap: 10px;
}
.session-note-edit-form textarea {
  min-height: 88px;
  resize: vertical;
}
.session-note-edit-actions .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}
.inline-field-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.inline-field-action .btn {
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}
.session-note-item strong {
  color: var(--text);
  font-size: 13px;
}
.session-note-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.session-note-item small {
  color: var(--faint);
  font-size: 11px;
}
.compact-schedule-card {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(0,0,0,0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,0.24);
}
.compact-table-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}
.compact-schedule-table {
  width: 100%;
  min-width: 1220px;
  border-collapse: separate;
  border-spacing: 0;
}
.compact-schedule-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 13px 11px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(12,12,12,0.96);
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.compact-schedule-table td {
  padding: 12px 11px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  color: var(--muted);
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
}
.compact-schedule-table tbody tr {
  transition: background .16s ease;
}
.compact-schedule-table tbody tr:hover {
  background: rgba(255,255,255,0.04);
}
.compact-schedule-table tbody tr.selected {
  background: rgba(var(--accent-rgb),0.055);
}
.compact-check {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.compact-check input { position: absolute; opacity: 0; pointer-events: none; }
.compact-check span {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
}
.compact-check input:checked + span {
  border-color: var(--yellow);
  background: var(--yellow);
}
.compact-session-title {
  max-width: 220px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.fill-chip,
.signal-chip,
.recurring-chip,
.muted-cell {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}
.fill-chip {
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
  background: rgba(255,255,255,0.045);
}
.fill-chip.calm { color: var(--green); }
.fill-chip.warm { color: var(--yellow); }
.fill-chip.hot { color: var(--red); }
.signal-chip.steady { color: var(--muted); background: rgba(255,255,255,0.04); }
.signal-chip.strong { color: var(--green); background: rgba(52,211,153,0.08); }
.signal-chip.low { color: var(--yellow); background: rgba(var(--accent-rgb),0.08); }
.signal-chip.full { color: var(--red); background: rgba(248,113,113,0.08); }
.signal-chip.cancelled { color: var(--red); background: rgba(248,113,113,0.10); }
.recurring-chip {
  color: var(--blue);
  background: rgba(96,165,250,0.08);
}
.muted-cell {
  color: var(--faint);
  background: rgba(255,255,255,0.035);
}
.compact-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.activity-card { padding: 10px; }
.activity-feed { display: grid; gap: 6px; }
.activity-item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border-radius: 16px;
  transition: background .18s ease;
}
.activity-item:hover { background: rgba(255,255,255,0.045); }
.activity-item strong { display: block; color: var(--text); font-size: 13px; }
.activity-item small { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; }
.activity-item time { color: var(--faint); font-size: 11px; white-space: nowrap; }
.activity-badge {
  justify-self: start;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.activity-badge.cancellation { color: var(--red); border-color: rgba(248,113,113,0.25); background: rgba(248,113,113,0.08); }
.activity-badge.credits { color: var(--green); border-color: rgba(52,211,153,0.24); background: rgba(52,211,153,0.08); }
.commerce-snapshot { display: grid; gap: 12px; }
.commerce-snapshot div {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
}
.commerce-snapshot strong { display: block; font-size: 28px; color: var(--text); }
.commerce-snapshot span { display: block; margin-top: 5px; color: var(--faint); font-size: 12px; text-transform: uppercase; font-weight: 850; }

.calendar-week-shell,
.calendar-month-shell { display: grid; gap: 14px; }
.calendar-view-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: rgba(255,255,255,0.024);
}
.calendar-view-summary strong {
  color: var(--text);
  font-size: 15px;
}
.calendar-view-summary span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 850;
}
.calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day-col { min-height: 250px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,0.025); padding: 10px; }
.day-col.today {
  border-color: rgba(var(--accent-rgb),0.28);
  background: rgba(var(--accent-rgb),0.045);
}
.day-title {
  width: 100%;
  margin-bottom: 8px;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.calendar-session { width: 100%; text-align: left; border: 1px solid var(--line-2); border-radius: 14px; padding: 9px; margin-bottom: 8px; background: rgba(255,255,255,0.055); }
.calendar-session[draggable="true"] { cursor: grab; }
.calendar-session.dragging { opacity: .45; transform: scale(.98); }
.calendar-session.training { border-left: 3px solid var(--yellow); }
.calendar-session.community { border-left: 3px solid var(--green); }
.calendar-session.recovery { border-left: 3px solid var(--blue); }
.calendar-session.event,
.calendar-session.events { border-left: 3px solid var(--orange); }
.calendar-session.pt { border-left: 3px solid #f0abfc; }
.calendar-session.cancelled {
  opacity: .72;
  background: rgba(248,113,113,0.07);
  border-color: rgba(248,113,113,0.24);
  text-decoration: none;
}
.calendar-session .session-tag { margin-bottom: 7px; }
.session-tag.cancelled { background: rgba(248,113,113,0.13); color: var(--red); border-color: rgba(248,113,113,0.32); }
.calendar-session-title { font-size: 12px; font-weight: 900; color: var(--text); }
.calendar-session-meta { margin-top: 3px; color: var(--faint); font-size: 11px; }
.session-delete-bin {
  min-height: 82px;
  border: 1px dashed rgba(248,113,113,0.38);
  border-radius: 22px;
  background: rgba(248,113,113,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--text);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.session-delete-bin.active {
  border-color: var(--red);
  background: rgba(248,113,113,0.14);
  transform: translateY(-1px);
}
.session-delete-bin-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(248,113,113,0.14);
  color: var(--red);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.session-delete-bin strong { display: block; font-size: 13px; font-weight: 950; }
.session-delete-bin span { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; }
.calendar-month-weekdays,
.calendar-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.calendar-month-weekdays span {
  padding: 0 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.month-day {
  min-height: 154px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.024);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.month-day.outside {
  opacity: .45;
}
.month-day.today {
  border-color: rgba(var(--accent-rgb),0.34);
  background: rgba(var(--accent-rgb),0.05);
}
.month-day.has-sessions:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),0.24);
  background: rgba(255,255,255,0.04);
}
.month-day-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  padding: 0;
  cursor: pointer;
}
.month-day-head strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.12);
  color: var(--yellow);
  font-size: 11px;
}
.month-day-sessions {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.month-session,
.month-more {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.046);
  color: var(--text);
  padding: 7px 8px;
  text-align: left;
}
.month-session {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border-left-width: 3px;
}
.month-session span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
}
.month-session strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.month-session.training { border-left-color: var(--yellow); }
.month-session.community { border-left-color: var(--green); }
.month-session.recovery { border-left-color: var(--blue); }
.month-session.event,
.month-session.events { border-left-color: var(--orange); }
.month-session.pt { border-left-color: #f0abfc; }
.month-session.cancelled {
  opacity: .7;
  background: rgba(248,113,113,0.07);
}
.month-more {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.month-empty-dot {
  width: 5px;
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.calendar-empty {
  margin-top: 2px;
}
.calendar-empty h3 {
  margin: 0 0 6px;
  color: var(--text);
}
.calendar-empty p {
  margin: 0 0 14px;
  color: var(--muted);
}

.analytics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.analytics-range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}
.analytics-range-buttons button {
  min-height: 36px;
  border: 0;
  border-radius: 13px;
  padding: 0 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.analytics-range-buttons button.active {
  background: var(--yellow);
  color: #050505;
}
.custom-range-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.custom-range-row input {
  min-height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  padding: 0 10px;
  background: var(--panel-2);
  color: var(--text);
  color-scheme: dark;
}
.custom-range-row span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.analytics-summary-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.analytics-mode-tabs {
  margin: 0 0 16px;
  width: fit-content;
  max-width: 100%;
}
.analytics-metric,
.analytics-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    var(--panel);
  box-shadow: 0 20px 70px rgba(0,0,0,0.22);
}
.analytics-metric {
  min-height: 132px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.analytics-metric span,
.stat-panel span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.analytics-metric strong,
.stat-panel strong {
  display: block;
  margin-top: 14px;
  color: var(--text);
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
}
.analytics-metric small,
.stat-panel small {
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.analytics-trend {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.analytics-trend.up {
  border-color: rgba(98, 211, 155, 0.26);
  background: rgba(98, 211, 155, 0.08);
  color: #62d39b;
}
.analytics-trend.down {
  border-color: rgba(255, 116, 116, 0.26);
  background: rgba(255, 116, 116, 0.08);
  color: #ff8a8a;
}
.analytics-section { margin-top: 28px; }
.section-copy { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.analytics-reports-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: 18px;
  align-items: end;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--accent-rgb),0.11), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    var(--panel);
}
.analytics-report-search {
  width: 100%;
  max-width: none;
}
.analytics-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.analytics-report-grid > .analytics-empty {
  grid-column: 1 / -1;
}
.analytics-report-category-section {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.analytics-recommended-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.analytics-recommended-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 170px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 94% 0%, rgba(var(--accent-rgb),0.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.022);
}
.analytics-recommended-card span,
.analytics-report-meta small {
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.analytics-recommended-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.analytics-recommended-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.analytics-recommended-card .btn {
  width: fit-content;
  margin-top: auto;
}
.analytics-report-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  min-height: 184px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.02);
}
.analytics-report-card.is-favourite {
  border-color: rgba(var(--accent-rgb),0.34);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.06);
}
.analytics-report-main {
  min-width: 0;
}
.analytics-report-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.analytics-report-meta small {
  text-align: right;
  line-height: 1.25;
}
.analytics-report-meta small.ready {
  color: rgba(98, 211, 155, 0.95);
}
.analytics-report-meta small.empty {
  color: var(--muted);
}
.analytics-report-card h3 {
  margin: 12px 0 6px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 0;
}
.analytics-report-card p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}
.report-category {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.08);
  color: var(--yellow);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.analytics-report-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.report-actions-menu {
  position: relative;
}
.report-actions-menu summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  list-style: none;
}
.report-actions-menu summary::-webkit-details-marker {
  display: none;
}
.report-actions-menu[open] summary,
.report-actions-menu summary:hover {
  border-color: rgba(var(--accent-rgb),0.34);
  background: rgba(var(--accent-rgb),0.11);
}
.report-actions-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  background: rgba(15,15,14,0.98);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45);
}
.report-actions-popover button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 10px 11px;
  text-align: left;
  font-size: 12px;
  font-weight: 900;
}
.report-actions-popover button:hover {
  background: rgba(var(--accent-rgb),0.12);
}
.analytics-report-dialog {
  width: min(980px, calc(100vw - 32px));
}
.analytics-report-dialog-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 14px;
}
.analytics-report-dialog-summary span {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
}
.analytics-report-table-wrap {
  max-height: 54vh;
  overflow: auto;
  margin: 0 22px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
}
.analytics-report-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.analytics-report-table th,
.analytics-report-table td {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 11px 12px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
.analytics-report-table th {
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.analytics-report-table td {
  color: var(--muted);
}
.analytics-grid-2,
.analytics-grid-3,
.analytics-grid-4 {
  display: grid;
  gap: 14px;
}
.analytics-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analytics-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-panel {
  padding: 17px;
  min-width: 0;
}
.analytics-panel h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.analytics-bars { display: grid; gap: 13px; }
.analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(100px, 1.2fr) 54px;
  gap: 12px;
  align-items: center;
}
.analytics-bar-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.07);
}
.analytics-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), rgba(255,255,255,0.48));
}
.analytics-bar-value {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}
.analytics-empty {
  min-height: 96px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 13px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.mini-list { display: grid; gap: 10px; }
.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.mini-row:last-child { border-bottom: 0; }
.analytics-member-row {
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
}
.analytics-member-row:hover,
.analytics-member-row:focus {
  background: rgba(255,255,255,0.04);
  outline: none;
}
.analytics-session-row {
  align-items: flex-start;
}
.metric-chip {
  border: 1px solid rgba(var(--accent-rgb),0.22);
  background: rgba(var(--accent-rgb),0.08);
  color: var(--yellow);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.risk-grid div {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  padding: 13px;
}
.risk-grid strong {
  display: block;
  font-size: 24px;
  font-weight: 950;
}
.risk-grid span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.mini-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.mini-stat {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  padding: 13px;
}
.mini-stat strong {
  display: block;
  color: var(--text);
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
}
.mini-stat span {
  display: block;
  margin-top: 7px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.analytics-grid-2.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.panel-actions.split {
  margin-top: 16px;
}
.future-panel p,
.insight-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.insight-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.035);
  padding: 15px;
  min-height: 150px;
}
.insight-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--yellow);
  margin-bottom: 14px;
}
.suggestion-section {
  margin: 24px 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb),0.09), transparent 36%),
    rgba(255,255,255,0.02);
}
.suggestion-section.compact {
  padding: 18px;
}
.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.analytics-section .suggestion-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.analytics-section .analytics-insight-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.suggestion-card {
  position: relative;
  min-height: 158px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.026)),
    rgba(0,0,0,0.18);
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
}
.suggestion-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.suggestion-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),0.45);
}
.confidence-pill {
  padding: 5px 8px;
  border: 1px solid rgba(var(--accent-rgb),0.24);
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.08);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.suggestion-dismiss {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: var(--faint);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
}
.suggestion-card strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}
.suggestion-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.suggestion-card small {
  display: block;
  margin-top: 12px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.suggestion-actions {
  margin-top: 14px;
}
.btn.small {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
}
.suggestion-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 18px;
  color: var(--faint);
  background: rgba(255,255,255,0.025);
}
.analytics-search { max-width: 280px; }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
}
.avatar-fallback {
  display: grid;
  place-items: center;
  color: #050505;
  background: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}
.avatar.small {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  font-size: 10px;
}
.avatar.tiny {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 9px;
}
.member-cell { display: flex; align-items: center; gap: 10px; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.74);
  backdrop-filter: blur(10px);
}
.modal.open { display: flex; }
.dialog {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: 26px;
  background: #0d0d0d;
  box-shadow: 0 30px 100px rgba(0,0,0,0.6);
}
.dialog-head {
  position: sticky;
  top: 0;
  background: rgba(13,13,13,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-title { font-size: 18px; font-weight: 950; }
.dialog-body { padding: 18px 20px 22px; }
.drawer-modal {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.member-drawer {
  width: min(720px, 100vw);
  height: 100vh;
  overflow: auto;
  padding: 20px;
  border-left: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb),0.12), transparent 34%),
    linear-gradient(180deg, rgba(22,22,22,0.98), rgba(7,7,7,0.98));
  box-shadow: -30px 0 100px rgba(0,0,0,0.55);
  animation: drawerIn 180ms ease-out;
}
@keyframes drawerIn {
  from { transform: translateX(24px); opacity: .85; }
  to { transform: translateX(0); opacity: 1; }
}
.member-drawer-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.member-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  background: rgba(255,255,255,0.045);
}
.avatar.xl {
  width: 84px;
  height: 84px;
  font-size: 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
.member-profile-hero h2 {
  margin: 6px 0 7px;
  color: var(--text);
  font-size: 30px;
  letter-spacing: -0.035em;
}
.member-contact-line {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.drawer-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.member-drawer-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(0,0,0,0.22);
}
.member-drawer-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.member-drawer-tabs button.active {
  background: rgba(var(--accent-rgb), 0.95);
  color: #050505;
  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.16);
}
.drawer-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 22px;
  background: rgba(255,255,255,0.028);
}
.message-thread-section {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.customer-message-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 4px;
}
.customer-message-row {
  display: flex;
}
.customer-message-row.outbound {
  justify-content: flex-end;
}
.customer-message-bubble {
  width: min(86%, 520px);
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
}
.customer-message-row.outbound .customer-message-bubble {
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--accent-rgb), 0.12), transparent 42%),
    rgba(var(--accent-rgb), 0.075);
}
.customer-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.customer-message-meta strong {
  color: var(--text);
  font-size: 12px;
}
.customer-message-meta span,
.customer-message-bubble small,
.message-empty-state span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.customer-message-bubble p {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.message-empty-state {
  padding: 18px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(0,0,0,0.16);
}
.message-empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}
.customer-message-composer textarea {
  min-height: 112px;
}
.customer-profile-page {
  display: grid;
  gap: 18px;
}
.customer-profile-back {
  justify-self: start;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.customer-profile-back:hover {
  color: var(--text);
}
.customer-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}
.customer-profile-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 42%),
    rgba(255,255,255,0.035);
}
.customer-profile-summary div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
}
.customer-profile-summary span,
.customer-action-group span,
.customer-timeline-row > span,
.customer-record-meta span {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.customer-profile-summary strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  overflow-wrap: anywhere;
}
.customer-profile-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.customer-profile-status-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.10), transparent 48%),
    rgba(255,255,255,0.028);
  text-align: left;
  color: inherit;
}
button.customer-profile-status-card {
  cursor: pointer;
}
.customer-profile-status-card.success {
  border-color: rgba(52,211,153,0.20);
  background:
    radial-gradient(circle at 100% 0%, rgba(52,211,153,0.12), transparent 48%),
    rgba(52,211,153,0.045);
}
.customer-profile-status-card.warning {
  border-color: rgba(251,191,36,0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(251,191,36,0.14), transparent 48%),
    rgba(251,191,36,0.05);
}
.customer-profile-status-card.danger {
  border-color: rgba(248,113,113,0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(248,113,113,0.12), transparent 48%),
    rgba(248,113,113,0.05);
}
.customer-profile-status-card span {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.customer-profile-status-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}
.customer-profile-status-card small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.profile-completion-meter {
  height: 9px;
  margin: 14px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.profile-completion-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(var(--accent-rgb), 0.95);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.20);
}
.customer-profile-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.customer-action-group {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 20px;
  background: rgba(255,255,255,0.028);
}
.customer-profile-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 20px;
  background: rgba(0,0,0,0.22);
}
.customer-profile-tabs button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.customer-profile-tabs button.active {
  background: rgba(var(--accent-rgb), 0.95);
  color: #050505;
  box-shadow: 0 12px 36px rgba(var(--accent-rgb), 0.16);
}
.customer-profile-panel-tab {
  display: none;
}
.customer-profile-panel-tab.active {
  display: block;
}
.customer-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.customer-profile-panel,
.customer-profile-panel-stack {
  min-width: 0;
}
.compliance-alert {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(248,113,113,0.22);
  border-radius: 18px;
  background: rgba(248,113,113,0.08);
}
.compliance-alert strong {
  color: var(--text);
}
.compliance-alert span {
  color: var(--muted);
  font-size: 13px;
}
.customer-timeline,
.customer-record-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.customer-timeline-row,
.customer-record-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
}
.customer-record-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.customer-timeline-row strong,
.customer-record-row strong,
.customer-record-meta strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}
.customer-timeline-row small,
.customer-record-row div > span,
.customer-timeline-row time {
  display: block;
  margin-top: 5px;
  color: var(--faint);
  font-size: 12px;
}
.customer-timeline-row time {
  margin-top: 0;
  white-space: nowrap;
}
.customer-record-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}
.inbox-page {
  display: grid;
  gap: 18px;
}
.inbox-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: min(760px, calc(100vh - 210px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.08), transparent 38%),
    rgba(255,255,255,0.028);
  box-shadow: 0 28px 90px rgba(0,0,0,0.22);
}
.inbox-sidebar-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.inbox-filter-stack {
  display: grid;
  gap: 8px;
  padding: 16px;
}
.inbox-filter-stack button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-weight: 900;
  text-align: left;
}
.inbox-filter-stack button.active {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.95);
  color: #050505;
}
.inbox-filter-stack strong {
  font-size: 12px;
}
.inbox-search-wrap {
  padding: 0 16px 16px;
}
.inbox-search-wrap .search {
  width: 100%;
}
.inbox-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 0 12px 16px;
}
.inbox-conversation {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.inbox-conversation:hover,
.inbox-conversation.active {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
}
.inbox-conversation.unread .inbox-conversation-head strong {
  color: var(--text);
}
.inbox-conversation-copy,
.inbox-conversation-head,
.inbox-conversation-meta {
  display: flex;
  min-width: 0;
}
.inbox-conversation-copy {
  flex-direction: column;
  gap: 4px;
}
.inbox-conversation-head {
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.inbox-conversation-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-conversation-head small,
.inbox-preview,
.inbox-conversation-meta {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
}
.inbox-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-conversation-meta {
  gap: 8px;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.inbox-conversation-meta em {
  color: rgb(var(--accent-rgb));
  font-style: normal;
}
.inbox-unread-count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.95);
  color: #050505;
  font-size: 11px;
  font-weight: 950;
}
.inbox-main-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}
.inbox-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.inbox-member-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.inbox-member-title h2 {
  margin: 4px 0 8px;
  color: var(--text);
  font-size: 24px;
  letter-spacing: -0.03em;
}
.inbox-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.inbox-member-meta span,
.inbox-actions-bar span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.inbox-quick-actions,
.inbox-composer-actions,
.inbox-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inbox-actions-bar {
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.12);
}
.inbox-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}
.inbox-message-row .customer-message-bubble {
  width: min(76%, 620px);
}
.inbox-composer {
  display: grid;
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.16);
}
.inbox-composer textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
}
.inbox-composer-actions {
  justify-content: flex-end;
}
.inbox-empty,
.inbox-detail-empty {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 18px;
  color: var(--muted);
}
.inbox-detail-empty {
  place-content: center;
  min-height: 420px;
  margin: 20px;
  text-align: center;
}
.inbox-empty strong,
.inbox-detail-empty strong {
  color: var(--text);
}
.inbox-empty span,
.inbox-detail-empty span {
  color: var(--faint);
  line-height: 1.5;
}
.inbox-top-tabs {
  width: fit-content;
}
.messaging-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.messaging-action-grid button {
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.13), transparent 42%),
    rgba(255,255,255,0.035);
  color: var(--text);
  text-align: left;
}
.messaging-action-grid button:hover {
  border-color: rgba(var(--accent-rgb), 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 45%),
    rgba(255,255,255,0.052);
}
.messaging-action-grid span {
  display: block;
  margin-bottom: 8px;
  color: rgb(var(--accent-rgb));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.messaging-action-grid strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.inbox-broadcast-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
}
.inbox-broadcast-card,
.inbox-broadcast-history {
  min-width: 0;
}
.broadcast-tracking-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.broadcast-tracking-grid div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.broadcast-tracking-grid strong {
  display: block;
  color: var(--text);
  font-size: 22px;
}
.broadcast-tracking-grid span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.broadcast-history-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.broadcast-history-list > div:not(.inbox-empty) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.16);
}
.broadcast-history-list strong {
  color: var(--text);
  font-size: 13px;
}
.broadcast-history-list span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}
.messaging-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.messaging-automation-layout {
  display: grid;
  gap: 18px;
}

.messaging-automation-builder,
.messaging-automation-list-card {
  min-width: 0;
}

.automation-active-field {
  align-self: end;
}

.automation-trigger-examples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.automation-trigger-examples div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), .055);
}

.automation-trigger-examples strong,
.automation-trigger-examples span {
  display: block;
}

.automation-trigger-examples strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.automation-trigger-examples span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.automation-trigger-description {
  border-color: rgba(var(--accent-rgb), .2);
  background: rgba(var(--accent-rgb), .06);
}

.automation-custom-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.automation-custom-fields[hidden] {
  display: none;
}

.automation-row .email-template-copy em {
  max-width: 780px;
}

.messaging-row-toggle {
  align-self: center;
  justify-self: start;
}

.inbox-composer select,
.customer-message-composer select {
  min-height: 40px;
  width: min(340px, 100%);
}

.inbox-composer select {
  justify-self: start;
}

.messaging-template-list-card,
.messaging-template-side {
  min-width: 0;
}
.broadcast-tracking-grid.single-column {
  grid-template-columns: 1fr;
}
.campaign-workflow-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.campaign-workflow-strip div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.campaign-workflow-strip span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .20);
  color: rgb(var(--accent-rgb));
  font-size: 11px;
  font-weight: 950;
}
.campaign-workflow-strip strong {
  color: var(--text);
  font-size: 13px;
}
.campaign-builder-layout {
  margin-bottom: 18px;
}
.campaign-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.campaign-channel-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}
.campaign-channel-option input {
  width: 16px;
  height: 16px;
  accent-color: rgb(var(--accent-rgb));
}
.campaign-channel-option small {
  margin-left: auto;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.campaign-channel-option.disabled {
  opacity: .5;
}
.field-populated-highlight {
  animation: field-populated-highlight 1.8s ease;
}
@keyframes field-populated-highlight {
  0% {
    border-color: rgba(var(--accent-rgb), .95);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18), 0 0 24px rgba(var(--accent-rgb), .12);
  }
  100% {
    border-color: rgba(255,255,255,.12);
    box-shadow: none;
  }
}
.campaign-preview-panel {
  position: sticky;
  top: 18px;
}
.campaign-email-preview {
  margin-top: 16px;
}
.campaign-preview-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.campaign-preview-brand img,
.campaign-preview-brand span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.campaign-preview-brand img {
  object-fit: cover;
}
.campaign-preview-brand span {
  display: grid;
  place-items: center;
  background: rgb(var(--accent-rgb));
  color: #111;
  font-size: 11px;
  font-weight: 950;
}
.campaign-preview-brand strong {
  color: var(--text);
}
.campaign-preview-card {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: #f6f6f7;
  color: #18181b;
}
.campaign-preview-card small {
  display: block;
  margin-bottom: 12px;
  color: #71717a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.campaign-preview-card h3 {
  margin: 0 0 12px;
  color: #111;
  font-size: 28px;
  line-height: 1.05;
}
.campaign-preview-card p {
  margin: 0 0 16px;
  color: #3f3f46;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}
.campaign-preview-card .btn.primary {
  background: var(--campaign-accent, rgb(var(--accent-rgb)));
  color: #111;
}
.campaign-preview-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 16px;
}
.campaign-template-library {
  margin-bottom: 18px;
}
.campaign-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.campaign-template-category {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.campaign-template-category button {
  width: 100%;
  text-align: left;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: inherit;
  cursor: pointer;
}
.campaign-template-category button:hover {
  border-color: rgba(var(--accent-rgb), .32);
  background: rgba(var(--accent-rgb), .08);
}
.campaign-template-category strong,
.campaign-template-category span,
.campaign-template-category b,
.campaign-template-category em {
  display: block;
}
.campaign-template-title-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.campaign-template-category strong {
  color: var(--text);
  font-size: 13px;
}
.campaign-template-category em {
  flex: 0 0 auto;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb), .08);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.campaign-template-category span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.campaign-template-category b {
  margin-top: 10px;
  color: rgb(var(--accent-rgb));
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.campaign-row-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.campaign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(0,0,0,.16);
}
.campaign-row strong,
.campaign-row span,
.campaign-row small {
  display: block;
}
.campaign-row strong {
  color: var(--text);
  font-size: 14px;
}
.campaign-row span,
.campaign-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.campaign-row small {
  text-align: right;
}

.notifications-page,
.notifications-settings-form {
  display: grid;
  gap: 16px;
}

.notifications-hero {
  margin-bottom: 0;
}

.notification-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.notification-settings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.notification-toggle-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.035);
}

.notification-toggle-card.enabled {
  border-color: rgba(var(--accent-rgb), .24);
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-rgb), .12), transparent 35%),
    rgba(255,255,255,.04);
}

.notification-toggle-card.disabled {
  opacity: .72;
}

.notification-toggle-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.notification-toggle-control {
  width: 38px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.notification-toggle-control::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  transition: transform .18s ease, background .18s ease;
}

.notification-toggle-card input:checked + .notification-toggle-control {
  border-color: rgba(var(--accent-rgb), .44);
  background: rgba(var(--accent-rgb), .22);
}

.notification-toggle-card input:checked + .notification-toggle-control::after {
  transform: translateX(16px);
  background: rgb(var(--accent-rgb));
}

.notification-toggle-card strong,
.notification-toggle-card small {
  display: block;
}

.notification-toggle-card strong {
  color: var(--text);
  font-size: 13px;
}

.notification-toggle-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.notification-toggle-card em {
  align-self: start;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--faint);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.notification-toggle-card.enabled em {
  border-color: rgba(52,211,153,.25);
  color: var(--green);
  background: rgba(52,211,153,.08);
}

.notification-template-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.message-preview-card {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.08), transparent 38%),
    rgba(255,255,255,0.04);
}
.message-preview-card h3 {
  margin: 6px 0 10px;
  color: var(--text);
  font-size: 22px;
}
.message-preview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.session-recipient-picker .promotion-product-picker {
  max-height: 220px;
  overflow: auto;
}
.progress-summary-panel {
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    rgba(255,255,255,0.032);
}
.identity-grid,
.drawer-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.identity-grid div,
.drawer-metric-grid div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
}
.identity-grid span,
.drawer-metric-grid span {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.identity-grid strong,
.drawer-metric-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  overflow-wrap: anywhere;
}
.drawer-metric-grid strong {
  font-size: 26px;
}
.drawer-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.drawer-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.drawer-list div {
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 15px;
  background: rgba(0,0,0,0.16);
}
.drawer-list strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}
.drawer-list span {
  display: block;
  margin-top: 5px;
  color: var(--faint);
  font-size: 12px;
}
.compliance-panel {
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--accent-rgb),0.09), transparent 34%),
    rgba(255,255,255,0.028);
}
.compliance-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.compliance-reminder-setup {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 12px;
  background: rgba(var(--accent-rgb),0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.compliance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
}
.compliance-row.missing {
  border-color: rgba(var(--accent-rgb),0.22);
  background: rgba(var(--accent-rgb),0.055);
}
.compliance-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}
.compliance-row span {
  display: block;
  margin-top: 5px;
  color: var(--faint);
  font-size: 12px;
}
.compliance-row div > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.compliance-row-status {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.compliance-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  max-width: 360px;
}
.compliance-row-status .btn {
  margin-top: 4px;
}
.compliance-row-status small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
}
.compliance-state-pill {
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}
.compliance-state-pill.signed {
  color: var(--green);
  border-color: rgba(52,211,153,0.22);
  background: rgba(52,211,153,0.075);
}
.compliance-state-pill.missing {
  color: #fbbf24;
  border-color: rgba(var(--accent-rgb),0.24);
  background: rgba(var(--accent-rgb),0.08);
}
.btn.ghost {
  background: rgba(255,255,255,0.035);
  color: var(--muted);
}
.agreement-card-focused {
  border-color: rgba(var(--accent-rgb),0.42) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.2), 0 24px 70px rgba(var(--accent-rgb),0.1);
}
.agreement-audit-dialog {
  width: min(820px, calc(100vw - 28px));
}
.agreement-audit-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.agreement-audit-meta > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}
.agreement-audit-meta span,
.agreement-audit-copy .mini-label {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.agreement-audit-meta strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}
.agreement-audit-meta small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.agreement-audit-copy {
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background: rgba(0,0,0,0.2);
}
.agreement-audit-copy p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.workout-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.workout-template-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
}
.workout-template-card h3 {
  margin: 8px 0 6px;
  color: var(--text);
  font-size: 15px;
}
.workout-template-card p {
  min-height: 34px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid > * { min-width: 0; }
.form-grid > .full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--faint); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.1em; }
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  padding: 12px;
  outline: none;
}
.field textarea { min-height: 96px; resize: vertical; }
.field-helper {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 15px;
  background: rgba(255,255,255,0.035);
  color: var(--text);
}
.setting-row.full { grid-column: 1 / -1; }
.setting-row div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.setting-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}
.setting-row small {
  display: block;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.setting-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.waitlist-settings {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
}
.payment-settings-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(var(--accent-rgb),0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb),0.08), transparent 36%),
    rgba(255,255,255,0.028);
}
.payment-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.payment-settings-head .section-title {
  margin-bottom: 4px;
}
.segmented.compact {
  width: auto;
  padding: 4px;
  gap: 4px;
}
.segmented.compact label {
  cursor: pointer;
}
.segmented.compact input {
  display: none;
}
.segmented.compact span {
  display: block;
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}
.segmented.compact label.active span {
  color: #090909;
  background: rgb(var(--accent-rgb));
  box-shadow: 0 0 24px rgba(var(--accent-rgb),0.18);
}
.payment-settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.payment-toggle-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.payment-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.payment-field-grid .field {
  min-width: 0;
}
.payment-field-grid .field label {
  min-height: 24px;
  line-height: 1.2;
}
.payment-toggle-stack .check-field {
  min-height: 88px;
  height: 100%;
  padding: 15px;
}
.payment-toggle-stack .check-field strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.payment-toggle-stack .check-field small {
  max-width: 25ch;
}
.waitlist-advanced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.waitlist-advanced .field {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(0,0,0,0.14);
}
.waitlist-advanced label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mini-help {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}
.mini-help:hover {
  border-color: rgba(var(--accent-rgb),0.44);
  color: var(--accent);
}
.mini-help-popover {
  display: none;
  margin-top: 2px;
  padding: 10px 11px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 12px;
  background: rgba(var(--accent-rgb),0.07);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.mini-help-popover.open {
  display: block;
}
.check-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  padding: 13px;
}
.check-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--yellow);
}
.check-field strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}
.check-field small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.brand-lockup-field {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.12), transparent 34%),
    rgba(255,255,255,0.028);
}
.brand-lockup-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: stretch;
}
.brand-lockup-editor {
  display: grid;
  gap: 14px;
}
.brand-display-toggle {
  margin-top: 2px;
}
.brand-lockup-preview-card {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 210px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.09);
  background:
    radial-gradient(circle at 74% 16%, rgba(var(--accent-rgb), 0.15), transparent 38%),
    rgba(0,0,0,0.28);
}
.brand-lockup-preview {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
}
.brand-lockup-primary {
  max-width: 100%;
  color: var(--text);
  font-size: 34px;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-lockup-secondary {
  min-height: 14px;
  color: var(--yellow);
  font-size: 11px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.brand-lockup-primary.accent,
.brand-lockup-secondary.accent { color: var(--yellow); }
.brand-lockup-primary.muted,
.brand-lockup-secondary.muted { color: var(--faint); }
.brand-lockup-primary.white,
.brand-lockup-secondary.white { color: var(--text); }
.image-upload-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  padding: 10px;
}
.image-preview,
.image-preview-empty {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
}
.image-preview {
  display: block;
  object-fit: cover;
}
.image-preview-empty {
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 13px;
  font-weight: 800;
}
.image-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
}
.image-upload-guidance {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.image-upload-guidance strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.image-upload-guidance small {
  color: var(--faint);
}
.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.upload-btn input { display: none; }
.upload-btn.is-loading { pointer-events: none; opacity: 0.6; }
.image-upload-status {
  min-height: 18px;
  margin-top: 7px;
  color: var(--faint);
  font-size: 12px;
}
.image-upload-status.success { color: var(--green); }
.image-upload-status.error { color: var(--red); }
.image-upload-status.warning { color: var(--accent); }
.accent-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 44%),
    rgba(255,255,255,0.025);
}
.accent-picker-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}
.accent-picker-shell {
  position: relative;
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: rgba(0,0,0,0.18);
  cursor: pointer;
}
.accent-picker-shell input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.accent-picker-orb {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 22px;
  background: var(--yellow);
  border: 1px solid var(--yellow);
  box-shadow: 0 0 34px color-mix(in srgb, var(--yellow) 24%, transparent);
}
.accent-picker-shell strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}
.accent-picker-shell small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.accent-hex-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}
.accent-hex-row span {
  color: var(--yellow);
  font-weight: 950;
}
.accent-hex-row input {
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
}
.accent-preview-card {
  min-height: 220px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  padding: 12px;
  background: rgba(0,0,0,0.22);
}
.accent-preview-mobile {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 12px;
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--yellow) 20%, transparent), transparent 38%),
    #0b0b0b;
  border: 1px solid rgba(255,255,255,0.08);
}
.accent-preview-nav {
  display: flex;
  gap: 7px;
  align-items: center;
}
.accent-preview-nav span {
  width: 28px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.14);
}
.accent-preview-hero {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--yellow);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}
.accent-preview-hero strong {
  color: var(--yellow);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.accent-preview-hero small,
.accent-preview-badge small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
}
.accent-preview-mobile button {
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: #000;
  font-weight: 950;
}
.accent-preview-badge {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid var(--yellow);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.accent-preview-badge span {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}
.accent-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.accent-preset {
  min-height: 88px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  color: var(--text);
  text-align: left;
}
.accent-preset:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.055);
}
.accent-preset span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
}
.accent-preset strong {
  font-size: 12px;
  font-weight: 950;
}
.accent-preset small {
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.logo-control {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}
.logo-preview {
  min-height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(var(--accent-rgb),0.14), transparent 38%),
    rgba(0,0,0,0.20);
}
.logo-preview img {
  max-width: 88%;
  max-height: 116px;
  object-fit: contain;
  display: block;
}
.logo-preview div {
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.logo-actions { display: grid; gap: 10px; align-content: start; }
.logo-button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-url-label {
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.logo-helper {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}
.loading-screen-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}
.loading-screen-editor {
  display: grid;
  gap: 12px;
  align-content: start;
}
.loading-screen-preview-card {
  display: grid;
  gap: 10px;
  align-content: start;
}
.loading-screen-preview {
  --loading-preview-accent: var(--yellow);
  --loading-preview-overlay: rgba(0,0,0,0.35);
  position: relative;
  min-height: 430px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  background:
    linear-gradient(rgba(0,0,0,0.34), rgba(0,0,0,0.34)),
    var(--loading-preview-accent);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.loading-screen-preview.image-mode {
  background-size: cover;
  background-position: center;
}
.loading-preview-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 26px;
  text-align: center;
}
.loading-preview-content img {
  max-width: 150px;
  max-height: 72px;
  object-fit: contain;
  display: block;
}
.loading-preview-content strong {
  color: #fff;
  font-size: 22px;
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.loading-preview-content span {
  color: rgba(255,255,255,0.74);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.loading-preview-content small {
  margin-top: 18px;
  color: rgba(255,255,255,0.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.template-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.template-status {
  min-height: 18px;
  color: var(--green);
  font-size: 12px;
}
.template-status.error { color: var(--red); }
.access-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  padding: 14px;
}
.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.admin-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb),0.09), transparent 34%),
    rgba(0,0,0,0.72);
  backdrop-filter: blur(14px);
  animation: adminDialogFade 160ms ease both;
}
.admin-dialog-layer.closing {
  animation: adminDialogFadeOut 140ms ease both;
}
.admin-dialog-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(28,28,28,0.98), rgba(9,9,9,0.98)),
    var(--panel);
  box-shadow: 0 28px 80px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.07);
  color: var(--text);
  outline: none;
  transform-origin: center;
  animation: adminDialogRise 180ms cubic-bezier(.2,.8,.2,1) both;
}
.admin-dialog-card.danger {
  border-color: rgba(255,116,96,0.28);
}
.admin-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.admin-dialog-close:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.09);
}
.admin-dialog-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: rgba(var(--accent-rgb),0.14);
  color: var(--accent);
  font-weight: 950;
  box-shadow: 0 0 24px rgba(var(--accent-rgb),0.12);
}
.admin-dialog-card.danger .admin-dialog-mark {
  background: rgba(255,116,96,0.14);
  color: #ff8b79;
  box-shadow: 0 0 24px rgba(255,116,96,0.12);
}
.admin-dialog-content h2 {
  margin: 0;
  max-width: 90%;
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: 0;
}
.admin-dialog-content p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.admin-dialog-details {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}
.admin-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.admin-dialog-primary,
.admin-dialog-tertiary,
.admin-dialog-secondary {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.admin-dialog-primary {
  border: 1px solid rgba(var(--accent-rgb),0.72);
  background: rgba(var(--accent-rgb),0.14);
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb),0.18);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb),0.16);
}
.admin-dialog-primary.danger {
  border-color: rgba(255,116,96,0.62);
  background: #ff7d6d;
  color: #170605;
  box-shadow: 0 12px 28px rgba(255,116,96,0.18);
}
.admin-dialog-secondary {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.admin-dialog-tertiary {
  border: 1px solid rgba(var(--accent-rgb),0.22);
  background: rgba(var(--accent-rgb),0.08);
  color: var(--text);
}
.admin-dialog-primary:hover,
.admin-dialog-tertiary:hover,
.admin-dialog-secondary:hover {
  transform: translateY(-1px);
}
.admin-input-field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.admin-input-field span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-input-field input {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  color: var(--text);
  padding: 13px 14px;
  font: inherit;
}
.admin-input-field input:focus {
  border-color: rgba(var(--accent-rgb),0.52);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1);
  outline: none;
}
.admin-dialog-status {
  min-height: 18px;
  margin-top: 8px;
  color: #ffad9f;
  font-size: 12px;
}
@keyframes adminDialogFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes adminDialogFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes adminDialogRise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hidden { display: none !important; }
.create-type-block {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}
.create-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.create-type-card {
  display: block;
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  padding: 13px;
  min-height: 104px;
}
.create-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.create-type-card span {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}
.create-type-card small {
  display: block;
  margin-top: 7px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}
.create-type-card.active {
  border-color: rgba(var(--accent-rgb),0.42);
  background: rgba(var(--accent-rgb),0.09);
}
.template-panel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.022);
}
.recurrence-card {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}
.recurrence-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.recurrence-option {
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  padding: 12px;
}
.recurrence-option span {
  display: block;
  color: var(--text);
  font-weight: 900;
  line-height: 1.2;
}
.recurrence-option small {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}
.recurrence-option.active {
  border-color: rgba(var(--accent-rgb),0.42);
  background: rgba(var(--accent-rgb),0.09);
}
.recurrence-fields { margin-top: 12px; }
.recurrence-mini-label {
  display: block;
  margin-bottom: 8px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.weekday-picker label {
  display: block;
}
.weekday-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.weekday-picker span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}
.weekday-picker input:checked + span {
  border-color: rgba(var(--accent-rgb),0.48);
  background: rgba(var(--accent-rgb),0.11);
  color: var(--text);
  box-shadow: 0 0 20px rgba(var(--accent-rgb),0.08);
}
.recurrence-visibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.recurrence-summary {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--accent-rgb),0.16);
  border-radius: 16px;
  background: rgba(var(--accent-rgb),0.065);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.template-command-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.template-command-bar .toolbar {
  flex: 1;
  align-items: center;
}
.template-hero-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.template-suggestion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: center;
  margin: 0 0 26px;
  padding: 20px;
  border: 1px solid rgba(var(--accent-rgb),0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb),0.11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.template-suggestion-panel h3 {
  margin: 6px 0 6px;
  font-size: 20px;
}
.template-suggestion-panel p {
  margin: 0;
  color: var(--muted);
  max-width: 680px;
  line-height: 1.45;
}
.template-suggestion-steps {
  display: grid;
  gap: 8px;
}
.template-suggestion-steps span {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 10px 12px;
}
.template-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.class-template-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1.2fr) minmax(250px, 0.7fr) 158px;
  align-items: stretch;
  gap: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.class-template-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),0.2);
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.026));
}
.class-template-card.archived {
  opacity: 0.62;
}
.template-card-image {
  min-height: 104px;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--accent-rgb),0.18), transparent 34%),
    rgba(255,255,255,0.05);
  color: var(--accent);
  font-size: 26px;
  font-weight: 950;
}
.template-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.template-card-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}
.template-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.template-card-top h3 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.1;
}
.template-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-insight-strip {
  grid-column: 1 / -1;
  padding: 11px;
  border: 1px solid rgba(var(--accent-rgb),0.16);
  border-radius: 16px;
  background: rgba(var(--accent-rgb),0.055);
}
.template-insight-strip strong,
.template-insight-strip span {
  display: block;
}
.template-insight-strip strong {
  color: var(--text);
  font-size: 13px;
}
.template-insight-strip span {
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.35;
}
.template-facts,
.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.template-actions {
  align-content: start;
  justify-content: flex-end;
}
.template-actions .btn {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
}
.template-actions .template-used-label {
  width: 100%;
  min-height: 34px;
  margin-top: 0;
  padding: 0 10px;
  font-size: 10px;
}
.template-facts span {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}
.template-linked-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 8px;
}
.template-linked-strip strong {
  color: var(--text);
  font-size: 12px;
}
.template-linked-strip span {
  color: var(--faint);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-metric-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}
.template-metric-stack > div:not(.template-insight-strip) {
  min-height: 60px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  padding: 10px;
}
.template-metric-stack span,
.template-metric-stack small {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.template-metric-stack strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}
.template-empty-state {
  padding: 30px;
}
.template-empty-state h3 {
  margin: 0 0 8px;
}
.template-empty-state p {
  margin: 0 0 16px;
  color: var(--muted);
}
.template-preview-dialog {
  width: min(920px, calc(100vw - 36px));
}
.template-preview-dialog .dialog-body {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.template-phone-preview {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.32);
}
.template-phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.16em;
  padding: 8px 10px 14px;
}
.template-phone-top span {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}
.template-phone-card {
  display: grid;
  gap: 14px;
  border-radius: 24px;
  background: rgba(5,5,5,0.62);
  padding: 14px;
}
.template-phone-image {
  min-height: 180px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 28% 18%, rgba(var(--accent-rgb),0.24), transparent 34%),
    rgba(255,255,255,0.06);
  color: var(--accent);
  font-size: 36px;
  font-weight: 950;
}
.template-phone-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.template-phone-card h3,
.template-preview-notes h3 {
  margin: 0;
}
.template-phone-card p,
.template-preview-notes p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.template-preview-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.template-preview-facts span {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}
.template-preview-notes {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background: rgba(255,255,255,0.035);
  padding: 18px;
}
.template-dialog {
  width: min(1180px, calc(100vw - 36px));
}
.template-builder-grid {
  display: grid;
  gap: 14px;
}
.linked-template-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--accent-rgb),0.16);
  border-radius: 18px;
  background: rgba(var(--accent-rgb),0.055);
  padding: 14px;
}
.linked-template-panel.muted {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}
.linked-template-panel strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}
.linked-template-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.linked-template-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.template-propagation-options {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.template-propagation-options label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  padding: 12px;
}
.template-propagation-options strong,
.template-propagation-options small {
  display: block;
}
.template-propagation-options small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}
.inline-input {
  display: grid;
  grid-template-columns: auto minmax(84px, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.inline-input input { text-align: center; }
.date-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  align-items: center;
  margin-top: 10px;
}
.date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(var(--accent-rgb),0.24);
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.08);
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
}
.date-chip strong {
  color: var(--faint);
  font-size: 12px;
  line-height: 1;
}
.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.9fr);
  gap: 28px;
  align-items: stretch;
  padding: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb),0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.stripe-test-banner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  border-color: rgba(var(--accent-rgb),0.28);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.03) 42%, rgba(255, 255, 255, 0.04)),
    rgba(16, 16, 16, 0.88);
}
.stripe-test-banner h3 { margin: 4px 0 6px; font-size: 20px; letter-spacing: 0; }
.stripe-test-banner p { margin: 0; color: var(--muted); max-width: 680px; line-height: 1.55; }
.stripe-test-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.stripe-test-stats span,
.stripe-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.stripe-badge.ready {
  border-color: rgba(83, 211, 142, 0.38);
  background: rgba(83, 211, 142, 0.12);
  color: #85e3ae;
}
.stripe-badge.needed,
.stripe-badge.syncing {
  border-color: rgba(var(--accent-rgb),0.36);
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
}
.stripe-badge.failed {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}
.stripe-badge.not-connected {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--faint);
}

.payments-hero {
  align-items: center;
}

.payments-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  margin-top: 24px;
}

.payments-settings-main {
  display: grid;
  gap: 20px;
}

.payments-settings-side {
  position: sticky;
  top: 24px;
  align-self: start;
}

.payment-connection-card,
.payment-integration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.payment-connection-card div,
.payment-integration-grid article,
.payment-payout-list div {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  padding: 16px;
}

.payment-connection-card.connected div {
  border-color: color-mix(in srgb, var(--yellow) 26%, rgba(255,255,255,.12));
  background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 10%, transparent), rgba(255,255,255,.045));
}

.payment-connection-card span,
.payment-integration-grid span,
.payment-payout-list span {
  display: block;
  color: var(--faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}

.payment-connection-card strong,
.payment-integration-grid strong,
.payment-payout-list strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.payment-connection-card small,
.payment-integration-grid small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.4;
}

.payments-settings-side h3 {
  margin: 10px 0;
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0;
}

.payments-settings-side p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.payment-payout-list {
  display: grid;
  gap: 10px;
}

.email-hero {
  align-items: center;
}

.email-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.email-hero-stats span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 850;
}

.email-hero-stats strong {
  color: var(--text);
}

.email-settings-layout {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.email-template-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.email-template-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  padding: 14px;
}

.communication-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.variable-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.variable-strip code {
  color: var(--muted);
  font-size: 12px;
}

.communication-template-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, auto);
}

.communication-template-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.communication-template-title strong {
  margin-right: 2px;
}

.channel-pill,
.status-pill {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 4px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
}

.channel-pill.email {
  border-color: rgba(var(--accent-rgb), .34);
  color: var(--yellow);
  background: rgba(var(--accent-rgb), .1);
}

.channel-pill.sms {
  border-color: rgba(96,165,250,.32);
  color: #93c5fd;
  background: rgba(96,165,250,.1);
}

.status-pill.active {
  color: var(--green);
  border-color: rgba(52,211,153,.28);
  background: rgba(52,211,153,.1);
}

.status-pill.warning {
  color: rgb(var(--accent-rgb));
  border-color: rgba(var(--accent-rgb), .34);
  background: rgba(var(--accent-rgb), .12);
}

.channel-toggle-placeholder {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  display: inline-block;
}

.channel-toggle-placeholder.active {
  border-color: rgba(96,165,250,.32);
  background: rgba(96,165,250,.12);
}

.email-template-toggle {
  position: relative;
  width: 44px;
  height: 26px;
}

.email-template-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.email-template-toggle span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  transition: .18s ease;
}

.email-template-toggle span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: .18s ease;
}

.email-template-toggle input:checked + span {
  border-color: rgba(var(--accent-rgb), .42);
  background: rgba(var(--accent-rgb), .2);
}

.email-template-toggle input:checked + span::after {
  transform: translateX(18px);
  background: var(--yellow);
}

.email-template-copy strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.email-template-copy small,
.email-template-copy em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.email-template-copy em {
  color: var(--faint);
}

.email-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.email-template-action-note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.email-preview-dialog {
  width: min(760px, calc(100vw - 32px));
}

.communication-editor-dialog {
  width: min(1040px, calc(100vw - 32px));
}

.communication-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .8fr);
  gap: 16px;
  padding: 18px;
}

.communication-live-preview {
  align-self: stretch;
}

.variable-picker {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.variable-picker small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.variable-picker div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sms-preview-bubble {
  max-width: 360px;
  border-radius: 28px;
  background: #f4f4f5;
  color: #18181b;
  padding: 22px;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

.sms-preview-bubble span {
  display: block;
  margin-bottom: 10px;
  color: #71717a;
  font-size: 12px;
  font-weight: 900;
}

.sms-preview-bubble p {
  margin: 0;
  line-height: 1.45;
}

.email-preview-frame {
  border-radius: 26px;
  background: #f4f4f5;
  padding: 24px;
}

.email-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #18181b;
  font-weight: 900;
}

.email-preview-header img,
.email-preview-header span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--email-accent);
  color: #111;
  display: grid;
  place-items: center;
  object-fit: cover;
}

.email-preview-card {
  margin-top: 22px;
  border-radius: 22px;
  background: #fff;
  padding: 26px;
  color: #27272a;
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

.email-preview-card h2 {
  margin: 0 0 12px;
  color: #18181b;
  font-size: 26px;
  letter-spacing: 0;
}

.email-preview-card p {
  margin: 0;
  color: #52525b;
  line-height: 1.6;
  white-space: pre-wrap;
}

.email-preview-card button,
.email-preview-card .email-preview-cta {
  margin-top: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--email-accent);
  color: #111;
  padding: 13px 20px;
  font-weight: 900;
  display: inline-flex;
  text-decoration: none;
}

.email-preview-card button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.email-preview-card small {
  display: block;
  margin-top: 22px;
  color: #71717a;
  line-height: 1.45;
}
.product-badge-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}
.pricing-hero h2 {
  margin: 10px 0 14px;
  max-width: 720px;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: 0;
}
.pricing-hero p { margin: 0; max-width: 680px; color: var(--muted); line-height: 1.65; font-size: 15px; }
.pricing-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pricing-hero-stats div,
.pricing-panel,
.pricing-card {
  border: 1px solid rgba(255,255,255,0.105);
  background: rgba(255,255,255,0.047);
  border-radius: 20px;
}
.pricing-hero-stats div { padding: 18px; min-height: 96px; }
.pricing-hero-stats strong { display: block; font-size: 32px; color: var(--text); letter-spacing: 0; }
.pricing-hero-stats span { display: block; margin-top: 8px; color: var(--faint); font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.08em; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.product-group {
  margin-top: 30px;
  padding-top: 6px;
}
.product-group:first-child { margin-top: 0; }
.pricing-card {
  padding: 14px;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.pricing-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),0.26);
  background: rgba(255,255,255,0.062);
}
.reorder-hint {
  align-self: center;
  border: 1px solid rgba(var(--accent-rgb),0.16);
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.06);
  color: var(--yellow);
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.product-reorder-grid {
  border-radius: 22px;
  transition: background .18s ease, outline-color .18s ease;
}
.product-reorder-grid.drag-over {
  outline: 1px dashed rgba(var(--accent-rgb),0.34);
  outline-offset: 8px;
  background: rgba(var(--accent-rgb),0.025);
}
.product-reorder-grid.saving {
  opacity: .72;
  pointer-events: none;
}
.reorderable-product-card {
  padding-top: 46px;
}
.reorderable-product-card.dragging {
  opacity: .5;
  transform: scale(.985);
}
.reorderable-product-card.drag-over {
  border-color: rgba(var(--accent-rgb),0.38);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.14), 0 24px 70px rgba(0,0,0,0.32);
}
.clickable-card {
  cursor: pointer;
}
.clickable-card:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb),0.62);
  outline-offset: 3px;
}
.card-inline-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.challenge-card-actions {
  justify-content: flex-start;
}
.product-drag-handle {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  width: 34px;
  height: 26px;
  display: inline-grid;
  gap: 3px;
  align-content: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  cursor: grab;
}
.product-drag-handle:active {
  cursor: grabbing;
}
.product-drag-handle span {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--yellow);
  opacity: .86;
}
.product-card-visual {
  height: 132px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(255,255,255,0.035));
  margin-bottom: 16px;
}
.product-card-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-visual-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 28px;
  font-weight: 950;
}
.pricing-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.pricing-card-kicker,
.mini-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.pricing-card h3 { margin: 5px 0 0; font-size: 19px; letter-spacing: 0; }
.pricing-card p { margin: 8px 0 0; color: var(--faint); font-size: 13px; line-height: 1.45; }
.pricing-price { margin-top: 16px; font-size: 28px; font-weight: 950; letter-spacing: 0; }
.pricing-price span { margin-left: 4px; color: var(--faint); font-size: 13px; font-weight: 800; }
.product-includes,
.pricing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.product-includes .mini-label { flex-basis: 100%; margin-bottom: 2px; }
.product-includes span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--muted);
  background: rgba(255,255,255,0.026);
  font-size: 12px;
  font-weight: 750;
}
.product-includes span.yes {
  border-color: rgba(var(--accent-rgb),0.22);
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.07);
}
.product-includes span.no { opacity: .62; }
.product-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.product-card-stats div {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}
.product-card-stats strong { display: block; color: var(--text); font-size: 16px; }
.product-card-stats span { color: var(--faint); font-size: 11px; }
.product-member-visibility-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb),0.24);
  border-radius: 14px;
  background: rgba(var(--accent-rgb),0.08);
}
.product-member-visibility-note.ready {
  border-color: rgba(83, 211, 142, 0.32);
  background: rgba(83, 211, 142, 0.09);
}
.product-member-visibility-note strong,
.product-member-visibility-note span {
  display: block;
}
.product-member-visibility-note strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}
.product-member-visibility-note span {
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.product-lifecycle-note {
  margin-top: 12px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}
.visibility-badge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--muted);
  background: rgba(255,255,255,0.045);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.visibility-badge.active {
  color: #7CFFB2;
  border-color: rgba(124,255,178,0.22);
  background: rgba(124,255,178,0.08);
}
.visibility-badge.inactive {
  color: #FF7A7A;
  border-color: rgba(255,122,122,0.26);
  background: rgba(255,122,122,0.09);
}
.product-status-control {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}
.product-status-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  min-width: 128px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(17,17,17,0.96);
  box-shadow: 0 18px 42px rgba(0,0,0,0.34);
}
.product-status-popover button {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 11px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.product-status-popover button.active {
  color: #7CFFB2;
  border-color: rgba(124,255,178,0.24);
  background: rgba(124,255,178,0.08);
}
.product-status-popover button.inactive {
  color: #FF7A7A;
  border-color: rgba(255,122,122,0.28);
  background: rgba(255,122,122,0.09);
}
.pricing-panel { padding: 16px; }
.compact-search {
  width: min(260px, 100%);
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  padding: 10px 13px;
  outline: none;
}
.promotions-section {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.075);
}
.guidance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
  gap: 22px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;
  background: radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb),.18), transparent 32%), linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
}
.guidance-hero h2 {
  margin: 10px 0;
  max-width: 760px;
  color: var(--text);
  font-size: clamp(36px, 5vw, 68px);
  line-height: .92;
  letter-spacing: 0;
}
.guidance-hero p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.guidance-metrics,
.guidance-insights,
.guidance-template-grid,
.guidance-live-grid {
  display: grid;
  gap: 14px;
}
.guidance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guidance-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; }
.guidance-template-grid,
.guidance-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guidance-template-grid.challenge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guidance-live-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guidance-metrics div,
.guidance-insights article,
.guidance-template-card,
.guidance-live-card,
.guided-empty {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.guidance-metrics div {
  min-height: 104px;
  border-radius: 20px;
  padding: 18px;
}
.guidance-metrics strong {
  display: block;
  color: var(--text);
  font-size: 34px;
  letter-spacing: 0;
}
.guidance-metrics span {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guidance-insights article {
  min-height: 142px;
  border-radius: 22px;
  padding: 20px;
}
.guidance-insights article span {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 28px rgba(var(--accent-rgb),.45);
}
.guidance-insights strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.18;
}
.guidance-insights p {
  margin: 10px 0 0;
  color: var(--faint);
  line-height: 1.5;
  font-size: 13px;
}
.rewards-subnav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.rewards-subnav button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.rewards-subnav button:hover {
  color: var(--text);
  background: rgba(255,255,255,.055);
}
.rewards-subnav button.active {
  color: #050505;
  background: var(--yellow);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), .22);
}
.guidance-section { display: grid; gap: 16px; }
.guidance-template-card,
.guidance-live-card,
.guided-empty {
  border-radius: 22px;
  padding: 18px;
}
.guidance-template-card {
  display: grid;
  min-height: 254px;
  gap: 10px;
  align-content: start;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.guidance-template-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),.28);
  background: rgba(255,255,255,.065);
}
.reward-live-card {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.reward-live-card:hover,
.reward-live-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),.26);
  background: rgba(255,255,255,.065);
  outline: none;
}
.challenge-edit-card {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.challenge-edit-card:hover,
.challenge-edit-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),.26);
  background: rgba(255,255,255,.065);
  outline: none;
}
.challenge-edit-hint {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
}
.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.card-actions .btn {
  min-height: 38px;
  padding: 0 14px;
}
.view-more-row {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.template-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.template-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb),.13);
  font-weight: 950;
}
.template-points {
  color: var(--yellow);
  border: 1px solid rgba(var(--accent-rgb),.2);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(var(--accent-rgb),.08);
  font-size: 12px;
  font-weight: 900;
}
.guidance-template-card h3,
.guidance-live-card h3,
.guided-empty h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.08;
  letter-spacing: 0;
}
.guidance-template-card p,
.guidance-live-card p,
.guided-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
}
.guidance-template-card small {
  display: block;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}
.guidance-template-card .btn { margin-top: auto; }
.template-action-stack {
  display: grid;
  gap: 8px;
  margin-top: auto;
}
.guidance-template-card .template-action-stack .btn,
.guidance-template-card .template-action-stack .template-used-label {
  margin-top: 0;
}
.template-used-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: auto;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb), .08);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.guidance-live-card strong {
  display: inline-flex;
  margin-top: 18px;
  color: var(--yellow);
  font-size: 22px;
}
.earn-rule-reversal-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr);
  gap: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb), .10), transparent 42%),
    rgba(255,255,255,.035);
}
.earn-rule-reversal-banner strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.earn-rule-reversal-banner p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}
.earn-rule-reversal-banner ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}
.earn-rule-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.earn-rule-health-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.035);
}
.earn-rule-health-grid article.warning {
  border-color: rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .07);
}
.earn-rule-health-grid span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.earn-rule-health-grid strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}
.earn-rule-health-grid small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.earn-rule-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.earn-rule-note {
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(var(--accent-rgb), .07);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}
.earn-rule-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.earn-rule-form {
  gap: 16px;
  padding: 20px;
}
.earn-rule-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: 14px;
  align-items: stretch;
}
.earn-rule-control-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.052), rgba(255,255,255,.026));
}
.earn-rule-points-card {
  grid-template-rows: auto 1fr;
}
.earn-rule-points-card input {
  align-self: end;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  padding: 14px;
  font-size: 20px;
  font-weight: 900;
  outline: none;
}
.earn-rule-control-label {
  display: block;
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.earn-rule-control-helper {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.earn-rule-check-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  padding: 13px;
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.earn-rule-check-row.is-disabled {
  opacity: .62;
}
.earn-rule-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.earn-rule-check-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}
.earn-rule-check-row small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.setting-row.is-disabled {
  opacity: .62;
}
.reward-rule-card small {
  display: block;
  margin-top: 14px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}
.agreement-disclaimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  border-color: rgba(var(--accent-rgb), .14);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .075), rgba(255,255,255,.032));
}
.agreement-disclaimer strong,
.agreement-disclaimer span {
  display: block;
}
.agreement-disclaimer strong {
  color: var(--text);
  font-size: 15px;
}
.agreement-disclaimer span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.agreement-card {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.agreement-card:hover,
.agreement-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .26);
  background: rgba(255,255,255,.065);
  outline: none;
}
.agreement-card small {
  display: block;
  margin-top: 10px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}
.agreement-dialog {
  width: min(1040px, calc(100vw - 32px));
}
.form-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.form-segmented label {
  display: block;
  cursor: pointer;
}
.form-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form-segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.form-segmented label:hover span {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  color: var(--text);
}
.form-segmented input:checked + span {
  border-color: rgba(var(--accent-rgb), .46);
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), .1);
}
.agreement-product-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding: 4px;
}
.agreement-legal-note {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  color: var(--faint);
  background: rgba(255,255,255,.035);
  font-size: 12px;
  line-height: 1.5;
}
.rewards-activity-list {
  display: grid;
  gap: 10px;
}
.rewards-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 15px 16px;
  background: rgba(255,255,255,.04);
}
.rewards-activity-row strong,
.rewards-activity-row span {
  display: block;
}
.rewards-activity-row strong {
  color: var(--text);
  font-size: 14px;
}
.rewards-activity-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.rewards-activity-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}
.rewards-activity-meta span {
  margin: 0;
  font-weight: 950;
}
.rewards-activity-meta span.positive { color: var(--green); }
.rewards-activity-meta span.negative { color: var(--yellow); }
.rewards-activity-meta small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
}
.guided-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.09), rgba(255,255,255,.035));
}
.guidance-panel {
  padding: 20px;
  border-radius: 24px;
}
.partner-suggestion-list,
.membership-guidance-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.partner-builder-row,
.membership-guidance-list div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.partner-builder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.partner-suggestion-list strong,
.membership-guidance-list strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}
.partner-suggestion-list span,
.membership-guidance-list span {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.42;
}
.partner-builder-actions,
.template-partner-helper div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.template-partner-helper {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), .055);
}
.template-partner-helper strong {
  color: var(--text);
  font-size: 12px;
}
.partner-reward-dialog {
  width: min(1080px, 100%);
}
.partner-reward-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
  gap: 18px;
}
.partner-reward-guidance,
.partner-reward-form-panel,
.partner-modal-block {
  display: grid;
  gap: 12px;
}
.partner-modal-block,
.partner-reward-form-panel {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.partner-modal-block h3 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
}
.partner-modal-block p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.partner-offer-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.partner-offer-list span {
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .07);
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
}
.partner-email-template {
  min-height: 220px;
  resize: vertical;
  white-space: pre-wrap;
}
.section-head.compact {
  margin-bottom: 0;
}
.pricing-guidance-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 26px 0 48px;
  padding: 22px 24px;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, rgba(var(--accent-rgb),.12), transparent 35%), rgba(255,255,255,.04);
  box-shadow: none;
  position: relative;
  z-index: 0;
}
.pricing-products-section {
  margin-top: 0;
  padding: 26px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 0%, rgba(255,255,255,0.045), transparent 32%),
    rgba(255,255,255,0.018);
}
.pricing-products-section > .section-head {
  align-items: flex-start;
  margin-bottom: 22px;
}
.pricing-products-section .section-title {
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}
.pricing-products-section .section-copy {
  max-width: 520px;
}
.pricing-guidance-strip strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 17px;
  max-width: 780px;
}
.pricing-guidance-strip p {
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 13px;
  max-width: 760px;
}
.promotion-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
.promotion-pulse div,
.promotion-card,
.promotion-empty {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
    rgba(0,0,0,0.14);
}
.promotion-pulse div {
  padding: 16px;
}
.promotion-pulse strong { display: block; color: var(--text); font-size: 24px; letter-spacing: 0; }
.promotion-pulse span { display: block; margin-top: 7px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; }
.promotions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.promotion-card {
  padding: 18px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.promotion-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),0.25);
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--accent-rgb),0.10), transparent 42%),
    rgba(255,255,255,0.055);
}
.promotion-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.promotion-code {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(var(--accent-rgb),0.26);
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.075);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}
.promotion-card h3 { margin: 14px 0 7px; font-size: 24px; letter-spacing: 0; }
.promotion-card p { margin: 0; color: var(--faint); line-height: 1.45; font-size: 13px; }
.promotion-status {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.promotion-status.active { color: #7CFFB2; border-color: rgba(124,255,178,0.24); background: rgba(124,255,178,0.08); }
.promotion-status.scheduled { color: #93C5FD; border-color: rgba(147,197,253,0.24); background: rgba(147,197,253,0.08); }
.promotion-status.expired,
.promotion-status.archived { opacity: .58; }
.promotion-status.hidden { color: var(--yellow); border-color: rgba(var(--accent-rgb),0.24); background: rgba(var(--accent-rgb),0.08); }
.promotion-applies {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
}
.promotion-applies span { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; margin-bottom: 5px; }
.promotion-applies strong { color: var(--text); font-size: 13px; line-height: 1.35; }
.promotion-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.promotion-metrics div {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 14px;
  background: rgba(255,255,255,0.028);
}
.promotion-metrics strong { display: block; color: var(--text); font-size: 16px; }
.promotion-metrics span { color: var(--faint); font-size: 11px; }
.promotion-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  color: var(--faint);
  font-size: 12px;
}
.promotion-empty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px;
}
.promotion-empty h3 { margin: 8px 0 6px; font-size: 24px; }
.promotion-empty p { margin: 0; color: var(--muted); }
.promotion-dialog {
  width: min(1180px, calc(100vw - 48px));
}
.promotion-builder {
  display: grid;
  grid-template-columns: minmax(460px, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
.promotion-builder-main {
  display: grid;
  gap: 16px;
}
.compact-access {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.promotion-product-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.promotion-product-picker label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 15px;
  background: rgba(255,255,255,0.032);
  padding: 12px;
}
.promotion-product-picker input { margin-top: 3px; accent-color: var(--yellow); }
.promotion-product-picker strong { display: block; color: var(--text); font-size: 13px; }
.promotion-product-picker small { display: block; margin-top: 3px; color: var(--faint); font-size: 11px; }
.promotion-target-group {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.promotion-target-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.promotion-target-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.promotion-target-head strong { color: var(--text); font-size: 14px; }
.promotion-target-head small { color: var(--faint); font-size: 11px; line-height: 1.35; text-align: right; }
.promotion-target-actions { display: grid; gap: 10px; }
.promotion-target-all {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 15px;
  background: rgba(var(--accent-rgb), 0.08);
  padding: 12px;
}
.promotion-target-all input { margin-top: 3px; accent-color: var(--yellow); }
.promotion-target-all strong { display: block; color: var(--text); font-size: 13px; }
.promotion-target-all small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.promotion-session-picker {
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}
.promotion-preview {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
}
.promotion-preview-card {
  min-height: 330px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(var(--accent-rgb),0.20);
  background:
    radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb),0.24), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    #101010;
  box-shadow: 0 20px 70px rgba(0,0,0,0.30);
}
.promotion-preview-card span {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.13);
  color: var(--yellow);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.promotion-preview-card h3 { margin: 34px 0 14px; font-size: 30px; letter-spacing: .06em; color: var(--yellow); }
.promotion-preview-card strong { display: block; color: var(--text); font-size: 24px; line-height: 1.15; }
.promotion-preview-card p { color: var(--muted); line-height: 1.5; }
.promotion-preview-card small { display: block; margin-top: 24px; color: var(--faint); line-height: 1.45; }
.credit-rule-list {
  display: grid;
  gap: 12px;
}
.credit-rule-list label {
  display: grid;
  grid-template-columns: 1fr 94px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(0,0,0,0.15);
}
.credit-rule-list strong { display: block; color: var(--text); font-size: 13px; }
.credit-rule-list small { display: block; color: var(--faint); font-size: 11px; margin-top: 3px; }
.credit-rule-list input { text-align: center; }
.product-table-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.product-table-tool-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 850;
}
.product-table-tool-actions .btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 11px;
}
.product-table-wrap {
  overflow-x: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(0,0,0,0.18);
}
.product-table-wrap table {
  width: 100%;
  min-width: 1320px;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.product-table-wrap thead th {
  padding: 8px 16px 10px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
}
.product-table-wrap thead th.product-order-column {
  width: 62px;
}
.product-table-filter-row th {
  padding-top: 0;
  padding-bottom: 6px;
}
.product-table-filter-row input,
.product-table-filter-row select {
  min-height: 34px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(0,0,0,0.22);
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}
.product-table-filter-row input::placeholder {
  color: var(--faint);
}
.product-table-sort {
  justify-content: flex-start;
  text-align: left;
}
.product-table-wrap tbody tr {
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.product-table-wrap tbody tr:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.product-table-wrap tbody tr.dragging {
  opacity: .55;
  filter: brightness(1.2);
}
.product-table-wrap tbody tr.drag-over td {
  border-top-color: rgba(var(--accent-rgb),0.55);
  border-bottom-color: rgba(var(--accent-rgb),0.3);
}
.product-table-wrap td {
  padding: 17px 16px;
  color: var(--muted);
  font-size: 13px;
  vertical-align: middle;
  border-top: 1px solid rgba(255,255,255,0.085);
  border-bottom: 1px solid rgba(255,255,255,0.085);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024)),
    rgba(12,12,12,0.88);
}
.product-table-wrap td:first-child {
  border-left: 1px solid rgba(255,255,255,0.085);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.product-table-wrap td:last-child {
  border-right: 1px solid rgba(255,255,255,0.085);
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.product-table-wrap td small { display: block; margin-top: 5px; color: var(--faint); line-height: 1.35; }
.product-order-cell {
  width: 62px;
}
.table-drag-handle {
  position: static;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 12px;
}
.product-table-product {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 270px;
}
.product-table-image {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.13), rgba(255,255,255,0.035));
}
.product-table-image img,
.product-table-image .product-card-visual-fallback {
  width: 100%;
  height: 100%;
}
.product-table-image img { object-fit: cover; display: block; }
.product-table-image .product-card-visual-fallback {
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 15px;
  font-weight: 950;
}
.product-table-copy strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0;
}
.product-table-copy small {
  max-width: 420px;
}
.product-table-value {
  color: var(--text);
  font-size: 14px;
}
.product-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 260px;
}
.product-table-actions .btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}
.product-table-empty {
  min-height: 110px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
}
.product-type-pill,
.product-status-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.product-type-pill {
  color: var(--yellow);
  border-color: rgba(var(--accent-rgb),0.18);
  background: rgba(var(--accent-rgb),0.065);
}
.product-status-pill.active {
  color: #7CFFB2;
  border-color: rgba(124,255,178,0.22);
  background: rgba(124,255,178,0.08);
}
.product-status-pill.inactive,
.product-status-pill.hidden,
.product-status-pill.draft {
  color: #FF7A7A;
  border-color: rgba(255,122,122,0.24);
  background: rgba(255,122,122,0.08);
}
.pricing-empty {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.09), rgba(255,255,255,0.035));
}
.pricing-empty h3 { margin: 8px 0; font-size: 22px; }
.pricing-empty p { margin: 0; color: var(--muted); }
.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.product-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.product-action-cluster .btn:not(.primary) {
  background: rgba(255,255,255,0.035);
  color: var(--muted);
}
.product-action-cluster .btn:hover {
  border-color: rgba(var(--accent-rgb),0.24);
  color: var(--text);
}
.mode-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
}
.mode-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.mode-toggle button.active {
  color: var(--black);
  background: var(--yellow);
}
.custom-build-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.product-builder-dialog {
  width: min(1320px, calc(100vw - 48px));
  max-width: 1320px;
  max-height: min(92vh, 980px);
  overflow-x: hidden;
}
.product-builder-dialog .dialog-head {
  padding: 22px 28px;
}
.product-builder-dialog .dialog-body {
  padding: 26px 28px 30px;
}
.product-builder {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 360px;
  gap: 32px;
  align-items: start;
  overflow: visible;
  padding-bottom: 104px !important;
}
.product-builder *,
.product-builder *::before,
.product-builder *::after {
  box-sizing: border-box;
}
.product-builder-left,
.member-preview-includes {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.product-builder-savebar {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin: -8px 0 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(255,255,255,0.055)),
    rgba(10,10,10,0.94);
  box-shadow: 0 -18px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
}
.product-builder-savebar strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.product-builder-savebar span {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 12px;
}
.product-builder-actions {
  display: none;
}
.builder-card {
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,6,6,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.builder-card-title { margin-bottom: 12px; color: var(--text); font-size: 14px; font-weight: 900; }
.builder-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.builder-step > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.14);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}
.builder-step strong { display: block; color: var(--text); font-size: 15px; }
.builder-step small { display: block; margin-top: 2px; color: var(--faint); line-height: 1.35; }
.product-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 12px;
}
.product-type-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 104px;
  align-content: start;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.product-type-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),0.18);
  background: rgba(255,255,255,0.055);
}
.product-type-card.active {
  border-color: rgba(var(--accent-rgb),0.42);
  background: linear-gradient(145deg, rgba(var(--accent-rgb),0.16), rgba(255,255,255,0.045));
  box-shadow: 0 16px 38px rgba(var(--accent-rgb),0.08);
}
.product-type-card input { display: none; }
.product-type-card span {
  color: var(--text);
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.product-type-card small {
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.product-builder-left .form-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.product-builder-left .field input,
.product-builder-left .field select,
.product-builder-left .field textarea {
  width: 100%;
  min-width: 0;
}
.product-image-field { display: grid; gap: 10px; }
.product-image-control {
  display: grid;
  grid-template-columns: minmax(160px, 190px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}
.product-image-preview {
  min-height: 128px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(var(--accent-rgb),0.20), transparent 38%),
    rgba(255,255,255,0.04);
}
.product-image-preview img {
  width: 100%;
  height: 100%;
  min-height: 128px;
  object-fit: cover;
  display: block;
}
.product-image-preview div {
  min-height: 128px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.product-image-actions {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.product-image-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-image-actions small {
  min-height: 18px;
  color: var(--faint);
  font-size: 12px;
}
.product-image-actions small.success { color: var(--green); }
.product-image-actions small.error { color: var(--red); }
.publish-step { background: rgba(var(--accent-rgb),0.045); }
.publish-note {
  color: var(--muted);
  line-height: 1.45;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
}
.advanced-rules {
  display: block;
}
.advanced-rules summary,
.dev-settings summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.advanced-rules summary::-webkit-details-marker,
.dev-settings summary::-webkit-details-marker { display: none; }
.advanced-rules summary span {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.advanced-rules summary small,
.dev-settings summary {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}
.advanced-rule-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.reward-economics {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.reward-economics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: 14px;
}
.reward-economics-fields {
  display: grid;
  gap: 12px;
}
.reward-economics-summary {
  align-self: start;
  display: grid;
  gap: 7px;
  min-height: 130px;
  padding: 14px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(255,255,255,0.035));
}
.reward-economics-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}
.reward-economics-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.stripe-sync-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
}
.stripe-sync-panel strong,
.stripe-sync-panel span {
  display: block;
}
.stripe-sync-panel strong { color: var(--text); font-size: 14px; }
.stripe-sync-panel span { margin-top: 4px; color: var(--faint); font-size: 12px; line-height: 1.35; }
.stripe-sync-debug {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.16);
}
.stripe-sync-debug strong,
.stripe-sync-debug small {
  display: block;
}
.stripe-sync-debug strong {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stripe-sync-debug small {
  margin-top: 6px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.dev-settings {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 14px;
}
.dev-settings .field { margin-top: 12px; }
.member-preview-shell {
  position: sticky;
  top: 18px;
  align-self: start;
  width: 360px;
  max-width: 100%;
  min-width: 0;
}
.member-preview-card {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb),0.13), transparent 34%),
    linear-gradient(180deg, #151515, #060606 68%);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.035), 0 24px 70px rgba(0,0,0,0.45);
}
.preview-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 4px;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.preview-phone-status span {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.preview-phone-status strong {
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.member-preview-media {
  height: 198px;
  margin: 14px 14px 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 18%, rgba(var(--accent-rgb),0.38), transparent 30%),
    linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(255,255,255,0.04));
}
.member-preview-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-preview-media div {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 36px;
  font-weight: 950;
}
.member-preview-body { padding: 22px; }
.member-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.member-preview-badges span,
.preview-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.08);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.preview-status.hidden,
.preview-status.internal,
.preview-status.inactive {
  color: #FF7A7A;
  border-color: rgba(255,122,122,0.24);
  background: rgba(255,122,122,0.08);
}
.preview-status.active {
  color: #7CFFB2;
  border-color: rgba(124,255,178,0.22);
  background: rgba(124,255,178,0.08);
}
.preview-status.archived {
  color: #ffadad;
  border-color: rgba(255,173,173,0.22);
  background: rgba(255,173,173,0.08);
}
.member-preview-body h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.02; letter-spacing: 0; }
.member-preview-body p { color: var(--muted); line-height: 1.48; margin: 0 0 18px; }
.member-preview-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.member-preview-price strong { display: block; font-size: 32px; line-height: 1; }
.member-preview-price small { color: var(--faint); font-weight: 850; }
.member-preview-pack-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 20px;
}
.member-preview-pack-value span {
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.09);
  color: var(--yellow);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.member-preview-pack-value small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
}
.preview-perks-title {
  margin-bottom: 9px;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.member-preview-includes span {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
.member-preview-includes small {
  color: var(--faint);
  font-weight: 700;
  line-height: 1.25;
}
.preview-footer-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.security-hero {
  align-items: center;
}
.security-status-card {
  min-width: 260px;
  padding: 20px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),0.16), transparent 58%),
    rgba(255,255,255,0.045);
}
.security-status-card span,
.security-status-card small {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.security-status-card strong {
  display: block;
  margin: 8px 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.security-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.security-card.wide {
  grid-column: 1 / -1;
}
.permission-diagnostic-card {
  margin-top: 18px;
}
.permission-diagnostic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, .9fr);
  gap: 12px;
}
.permission-diagnostic-grid div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
}
.permission-diagnostic-grid span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.permission-diagnostic-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.permission-diagnostic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.permission-diagnostic-list span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.permission-diagnostic-list .allowed {
  color: var(--green);
  background: rgba(52,211,153,0.10);
}
.permission-diagnostic-list .blocked {
  color: var(--red);
  background: rgba(248,113,113,0.10);
}
.import-function-raw-diagnostic {
  display: grid;
  gap: 12px;
}
.import-function-raw-diagnostic div {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.import-function-raw-diagnostic span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.import-function-raw-diagnostic pre {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.32);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.import-function-raw-diagnostic > strong {
  color: var(--red);
  font-size: 13px;
}
.security-row,
.active-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.security-row span,
.active-session-row small,
.active-session-row span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
}
.active-session-row div {
  display: grid;
  gap: 4px;
}
.security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.staff-access-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.staff-access-list div,
.future-list span {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 15px;
  background: rgba(255,255,255,0.035);
}
.staff-access-list strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}
.staff-access-list span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.future-list {
  display: grid;
  gap: 8px;
}
.future-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.future-list em {
  color: var(--yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.developer-api-callout {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb),0.24);
  border-radius: 18px;
  background: rgba(var(--accent-rgb),0.08);
}
.developer-api-callout strong {
  color: var(--text);
  font-size: 18px;
  letter-spacing: -.02em;
}
.developer-api-callout span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.webhook-endpoint-list,
.webhook-delivery-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.webhook-endpoint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto) auto;
  gap: 16px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.032);
}
.webhook-endpoint-row strong,
.webhook-delivery-row strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}
.webhook-endpoint-row span,
.webhook-endpoint-row small,
.webhook-delivery-row small,
.webhook-delivery-row time,
.webhook-row-meta span,
.webhook-row-meta small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.webhook-row-meta {
  display: grid;
  justify-items: start;
  gap: 4px;
}
.webhook-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.webhook-delivery-row {
  display: grid;
  grid-template-columns: minmax(140px, .7fr) minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
}
.webhook-delivery-row > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}
.webhook-dialog {
  max-width: 860px;
}
.webhook-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.webhook-event-option {
  min-height: 50px;
}
.import-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.import-template-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),0.07), rgba(255,255,255,0.026)),
    rgba(0,0,0,0.18);
}
.import-template-card strong,
.import-template-card span {
  display: block;
}
.import-template-card strong {
  color: var(--text);
  font-size: 15px;
}
.import-template-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.import-template-card .btn {
  flex: 0 0 auto;
  min-width: 160px;
  justify-content: center;
}
@media (max-width: 780px) {
  .import-template-card {
    align-items: stretch;
    flex-direction: column;
  }
  .import-template-card .btn {
    width: 100%;
  }
  .campaign-workflow-strip,
  .campaign-template-grid,
  .campaign-row {
    grid-template-columns: 1fr;
  }
  .campaign-row small {
    text-align: left;
  }
}
.import-upload-zone {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 148px;
  padding: 24px;
  border: 1px dashed rgba(var(--accent-rgb), .30);
  border-radius: 22px;
  background: rgba(var(--accent-rgb), .055);
  text-align: center;
  cursor: pointer;
}
.import-upload-zone input {
  display: none;
}
.import-upload-zone strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}
.import-upload-zone span {
  max-width: 560px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.import-mapping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.import-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.import-summary-grid div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.import-summary-grid strong,
.import-summary-grid span,
.export-card strong,
.export-card span {
  display: block;
}
.import-summary-grid strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}
.import-summary-grid span,
.export-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.import-preview-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}
.export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.export-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.032);
}
.export-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}
.developer-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.developer-scope-card {
  position: relative;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}
.developer-scope-card strong,
.developer-scope-card span {
  display: block;
}
.developer-scope-card strong {
  color: var(--text);
  font-size: 15px;
}
.developer-scope-card span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.developer-scope-card em {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: var(--yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.booking-page-settings-layout {
  display: grid;
  gap: 24px;
}
.booking-page-hero {
  align-items: center;
}
.booking-page-url-card {
  display: grid;
  gap: 10px;
  min-width: 320px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
}
.booking-page-url-card span,
.booking-page-url-card small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.booking-page-url-card strong {
  color: var(--text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-page-url-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.booking-page-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 24px;
  align-items: start;
}
.booking-page-editor {
  display: grid;
  gap: 18px;
}
.booking-cover-control {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr);
  gap: 18px;
}
.booking-cover-preview {
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),0.16), transparent 58%),
    rgba(255,255,255,0.04);
  color: var(--faint);
  font-weight: 900;
}
.booking-cover-preview img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
.booking-cover-actions {
  display: grid;
  align-content: start;
  gap: 12px;
}
.booking-cover-actions input[type="file"] {
  display: none;
}
.booking-page-preview-panel {
  position: sticky;
  top: 22px;
}
.booking-page-preview {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px;
  background: #f7f7f8;
  color: #111;
  box-shadow: 0 30px 90px rgba(0,0,0,0.26);
}
.booking-page-preview-hero {
  min-height: 230px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),0.32), transparent 52%),
    linear-gradient(145deg, #171717, #050505);
  background-size: cover;
  background-position: center;
  color: white;
}
.booking-page-preview-hero .website-widget-logo {
  width: 42px;
  height: 42px;
}
.booking-page-preview-hero span {
  color: rgba(255,255,255,0.72);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.booking-page-preview-hero strong {
  font-size: 28px;
  line-height: 1;
}
.booking-page-preview-hero p {
  max-width: 340px;
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  line-height: 1.35;
}
.booking-page-preview-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 16px 4px;
}
.booking-page-preview-tabs span {
  border-radius: 999px;
  padding: 8px 11px;
  background: #ececee;
  color: #555;
  font-size: 11px;
  font-weight: 900;
}
.booking-page-preview-tabs span.active {
  background: var(--yellow);
  color: #111;
}
.booking-page-preview-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.booking-page-preview-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  background: white;
}
.booking-page-preview-list small {
  color: #71717a;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.booking-page-preview button {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--yellow);
  color: #111;
  padding: 13px;
  font-weight: 950;
}
@media (max-width: 1180px) {
  .product-builder {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-builder-savebar {
    align-items: stretch;
    flex-direction: column;
  }
  .member-preview-shell {
    position: relative;
    top: auto;
    width: min(420px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .product-builder-dialog {
    width: min(100vw - 16px, 100%);
    border-radius: 22px;
  }
  .product-builder-dialog .dialog-head,
  .product-builder-dialog .dialog-body {
    padding-left: 14px;
    padding-right: 14px;
  }
  .product-type-grid,
  .product-image-control {
    grid-template-columns: 1fr;
  }
  .product-type-card {
    min-height: auto;
  }
  .agreement-audit-meta {
    grid-template-columns: 1fr;
  }
  .compliance-row {
    grid-template-columns: 1fr;
  }
  .compliance-row-status,
  .compliance-action-row {
    justify-items: stretch;
    justify-content: flex-start;
  }
}

.announcement-dialog { max-width: 1040px; }
.announcement-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
}
.announcement-fields {
  display: grid;
  gap: 14px;
}
.announcement-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}
.announcement-options .field,
.announcement-options .check-field {
  min-width: 0;
}
.announcement-options select {
  width: 100%;
  min-width: 0;
}
.announcement-options .check-field {
  width: 100%;
}
.announcement-preview {
  position: sticky;
  top: 12px;
  align-self: start;
  display: grid;
  gap: 12px;
}
.feed-preview-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb),0.13), transparent 38%),
    rgba(255,255,255,0.04);
  padding: 18px;
  min-height: 280px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.30);
}
.feed-preview-image {
  height: 148px;
  margin: -6px -6px 16px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.10);
}
.feed-preview-card > span {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(var(--accent-rgb),0.22);
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(var(--accent-rgb),0.08);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.feed-preview-card h3 {
  margin: 14px 0 8px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.feed-preview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.feed-preview-card small {
  display: block;
  margin-top: 16px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.entitlement-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.entitlement-list div {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.entitlement-list div:last-child { border-bottom: 0; }
.entitlement-list strong { color: var(--text); font-size: 13px; }
.entitlement-list span { color: var(--faint); font-size: 12px; }

.community-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 22px;
  align-items: end;
  margin-bottom: 24px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--accent-rgb),0.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}
.community-hero h2 {
  max-width: 780px;
  margin: 8px 0 8px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.community-hero p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.community-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.community-metrics div {
  min-height: 92px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.08);
}
.community-metrics span {
  display: block;
  margin-bottom: 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.community-metrics strong {
  color: var(--text);
  font-size: 30px;
}
.community-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.community-main,
.community-settings-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,0.035);
  padding: 18px;
}
.community-settings-card {
  position: sticky;
  top: 22px;
}
.settings-stack {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.check-field.premium {
  align-items: flex-start;
  padding: 13px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}
.community-post-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.community-post-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
}
.community-post-image {
  height: 230px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.community-post-top,
.community-post-footer,
.post-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.community-post-top {
  justify-content: space-between;
  flex-wrap: wrap;
}
.community-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  min-width: 0;
}
.community-post-byline {
  min-width: 0;
}
.community-post-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.community-post-author-name {
  min-width: 0;
  max-width: min(360px, 54vw);
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-post-meta time {
  flex: 0 0 auto;
  color: var(--faint);
}
.community-post-meta-dot {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.34);
}
.community-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),0.30);
  background: rgba(var(--accent-rgb),0.10);
  color: var(--accent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-chip-row { flex-wrap: wrap; justify-content: flex-end; }
.community-post-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.1;
}
.community-post-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  margin: 20px 0 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb),0.07), transparent 32%),
    rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.community-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(14,14,14,0.78);
  color: var(--faint);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  opacity: 0.82;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.community-tab:hover {
  transform: translateY(-1px);
  opacity: 1;
  color: var(--text);
  border-color: rgba(var(--accent-rgb),0.20);
  background: rgba(255,255,255,0.065);
  box-shadow: 0 12px 34px rgba(0,0,0,0.20);
}
.community-tab.active {
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb),1), rgba(var(--accent-rgb),0.88));
  color: #090909;
  border-color: rgba(var(--accent-rgb),0.72);
  opacity: 1;
  box-shadow: 0 15px 38px rgba(var(--accent-rgb),0.18), inset 0 1px 0 rgba(255,255,255,0.42);
}
.community-tab strong {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: inherit;
  font-size: 11px;
  font-weight: 950;
}
.community-tab.active strong {
  background: rgba(0,0,0,0.13);
}
.community-tab-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.community-tab-icon.live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.10);
}
.community-tab.active .community-tab-icon.live::before {
  box-shadow: 0 0 0 4px rgba(0,0,0,0.10);
}
.community-tab-icon.calendar::before {
  content: "";
  width: 14px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.community-tab-icon.calendar::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.community-tab-icon.edit::before {
  content: "";
  width: 12px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-2deg);
}
.community-tab-icon.edit::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-32deg) translate(2px, -3px);
}
.community-post-footer {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
  flex-wrap: wrap;
}
.community-post-footer .text-button { margin-left: auto; }
.community-post-footer .text-button + .text-button { margin-left: 0; }
.text-button.compact {
  margin: 0;
  padding: 0;
  font-size: 11px;
}
.text-button.danger { color: var(--red); }
.community-interactions {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.065);
}
.community-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.community-reaction-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.community-reaction-button:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb),0.25);
  color: var(--text);
}
.community-reaction-button.active {
  border-color: rgba(var(--accent-rgb),0.48);
  background: rgba(var(--accent-rgb),0.14);
  color: var(--accent);
}
.community-reaction-button span {
  font-size: 14px;
}
.community-reaction-people {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.community-reaction-people > span {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.community-reaction-people strong {
  font-size: 12px;
}
.community-reaction-people em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}
.community-reaction-people .community-role-badge {
  min-height: 17px;
  padding: 0 6px;
  font-size: 8px;
}
.community-comments {
  display: grid;
  gap: 9px;
}
.community-comment-empty {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.10);
  color: var(--faint);
  font-size: 12px;
}
.community-comment {
  display: grid;
  gap: 8px;
}
.community-comment-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.community-comment-body {
  flex: 1;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 15px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
}
.community-comment-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.25;
}
.community-comment-meta strong {
  color: var(--text);
  font-size: 12px;
}
.community-comment-body p {
  margin: 6px 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.community-comment-replies {
  display: grid;
  gap: 8px;
  margin-left: 38px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.community-comment-form,
.community-reply-form {
  display: grid;
  gap: 8px;
}
.community-comment-form textarea,
.community-reply-form textarea {
  min-height: 56px;
  resize: vertical;
}
.community-comment-form > div,
.community-reply-form > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn.compact {
  min-height: 32px;
  padding: 0 13px;
  font-size: 12px;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.status-chip.yellow {
  color: #0c0c0c;
  background: var(--yellow);
}
.status-chip.green {
  color: var(--green);
  background: rgba(52,211,153,0.10);
}
.status-chip.red {
  color: var(--red);
  background: rgba(248,113,113,0.10);
}
.community-empty h3 {
  margin: 0 0 6px;
  color: var(--text);
}
.community-empty p {
  margin: 0 0 16px;
  color: var(--muted);
}
.poll-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}
.admin-poll-preview {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
}
.admin-poll-preview strong {
  color: var(--text);
  font-size: 14px;
}
.admin-poll-preview small,
.scheduled-note {
  color: var(--faint);
  font-size: 12px;
}
.poll-result-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.poll-result-line div {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}
.poll-result-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
}

.subscription-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb), .22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.subscription-hero h2 {
  margin: 8px 0;
  color: var(--text);
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0;
}

.subscription-hero p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.55;
}

.subscription-price-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(var(--accent-rgb), .26);
  border-radius: 22px;
  background: rgba(0,0,0,.24);
}

.subscription-price-card span,
.subscription-price-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.subscription-price-card strong {
  color: var(--text);
  font-size: 28px;
  letter-spacing: 0;
}

.subscription-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.subscription-main,
.subscription-side,
.usage-grid,
.addon-list {
  display: grid;
  gap: 16px;
}

.plan-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.plan-feature-grid div {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  padding: 13px;
}

.plan-feature-grid span {
  color: var(--yellow);
  font-weight: 950;
}

.plan-feature-grid strong {
  color: var(--text);
  font-size: 13px;
}

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

.usage-meter {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}

.usage-meter > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.usage-meter strong {
  color: var(--text);
}

.usage-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.usage-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .28);
}

.usage-meter small {
  color: var(--faint);
  font-size: 12px;
}

.subscription-table .empty-cell {
  padding: 24px;
  color: var(--faint);
  text-align: center;
}

.addon-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.addon-list strong {
  color: var(--text);
}

.addon-list small {
  grid-column: 1;
  color: var(--muted);
}

.addon-list span {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  border: 1px solid rgba(var(--accent-rgb), .24);
  border-radius: 999px;
  color: var(--yellow);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 950;
}

.platform-plan-dialog {
  position: relative;
  width: min(1220px, calc(100vw - 48px));
  background:
    radial-gradient(circle at 88% 0%, rgba(var(--accent-rgb), .11), transparent 28rem),
    linear-gradient(180deg, rgba(18,18,18,.98), rgba(10,10,10,.98));
}

.platform-plan-header {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 34px 64px 10px;
  text-align: center;
}

.platform-plan-header .dialog-title {
  font-size: 28px;
  letter-spacing: 0;
}

.platform-plan-header .faint {
  margin-top: 6px;
  max-width: 680px;
  line-height: 1.45;
}

.modal-x {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
}

.modal-x:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.plan-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  width: min(360px, 100%);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.plan-segment span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-radius: 999px;
  color: var(--faint);
  font-size: 13px;
  font-weight: 850;
}

.plan-segment span.active {
  background: rgba(255,255,255,.94);
  color: #0b0b0b;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
}

.plan-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.plan-choice-card {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  padding: 24px;
}

.plan-choice-card.active {
  border-color: rgba(var(--accent-rgb), .52);
  background:
    radial-gradient(circle at 82% 0%, rgba(var(--accent-rgb), .16), transparent 13rem),
    rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .16), 0 22px 70px rgba(0,0,0,.22);
}

.plan-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
}

.plan-card-top span,
.plan-choice-card > small {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.plan-card-top em {
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent);
  padding: 5px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.plan-choice-card h3 {
  margin: 14px 0 12px;
  color: var(--text);
  font-size: 28px;
  letter-spacing: 0;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.plan-price strong {
  color: var(--text);
  font-size: 34px;
  letter-spacing: 0;
}

.plan-price small {
  color: var(--muted);
  font-size: 12px;
}

.plan-strapline {
  min-height: 42px;
  margin: 0 0 18px;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
}

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

.plan-choice-card p:not(.plan-strapline) {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.45;
}

.plan-choice-card ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-choice-card li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.plan-choice-card li span {
  color: var(--accent);
  font-weight: 950;
}

.plan-choice-card > small {
  margin-top: auto;
  padding-top: 28px;
  color: var(--faint);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.plan-dialog-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 18px;
  background: rgba(var(--accent-rgb), .06);
  color: var(--muted);
}

.plan-dialog-note strong {
  color: var(--text);
  white-space: nowrap;
}

.btn.full {
  width: 100%;
}

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(460px, 100%); }
.login-card h1 { font-size: 34px; }
.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.message { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.error { color: var(--red); }
.empty { padding: 26px; text-align: center; color: var(--faint); }
.toast-region {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1200;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
  pointer-events: none;
}
.admin-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 18px;
  padding: 14px 14px 14px 16px;
  color: var(--text);
  background: linear-gradient(135deg, rgba(24,24,24,.96), rgba(10,10,10,.94));
  box-shadow: 0 22px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: auto;
  animation: toast-lifecycle 5.2s ease forwards;
}
.admin-toast span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}
.admin-toast button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  cursor: pointer;
}
.admin-toast button:hover {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .2);
  background: rgba(var(--accent-rgb), .1);
}
@keyframes toast-lifecycle {
  0% { opacity: 0; transform: translateY(10px) scale(.98); }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  84% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(.985); }
}

.plugin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 26px;
  align-items: end;
  margin-bottom: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--accent-rgb), .14), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.plugin-hero h2 {
  margin: 8px 0 8px;
  max-width: 680px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: .96;
  letter-spacing: -.04em;
}
.plugin-hero p { margin: 0; max-width: 600px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.plugin-hero-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.plugin-hero-tabs span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0,0,0,.22);
  font-size: 12px;
  font-weight: 850;
}
.plugin-hero-tabs span.active {
  color: #090909;
  border-color: rgba(var(--accent-rgb), .85);
  background: rgb(var(--accent-rgb));
  box-shadow: 0 0 28px rgba(var(--accent-rgb), .18);
}

.settings-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 26px;
  align-items: end;
  margin-bottom: 24px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--accent-rgb), .16), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 26px 80px rgba(0,0,0,.34);
}
.settings-home-hero h2 {
  margin: 8px 0 10px;
  max-width: 760px;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: .94;
  letter-spacing: -.045em;
}
.settings-home-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.settings-home-search {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 22px;
  background: rgba(0,0,0,.22);
}
.settings-home-search > span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.settings-home-search div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-home-search a {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}
.settings-home-search a:hover {
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .1);
}
.settings-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.settings-category-card {
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb), .08), transparent 18rem),
    rgba(255,255,255,.035);
  box-shadow: 0 18px 54px rgba(0,0,0,.22);
}
.settings-category-links {
  display: grid;
  gap: 10px;
}
.settings-category-links a,
.future-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  color: var(--text);
  text-decoration: none;
}
.settings-category-links a:hover {
  border-color: rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .075);
}
.settings-category-links strong,
.future-setting-row strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}
.settings-category-links small,
.future-setting-row small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}
.settings-category-links em,
.future-setting-row em {
  flex: 0 0 auto;
  color: var(--yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.future-setting-row {
  opacity: .72;
}
.staff-permissions-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 22px;
  align-items: end;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 16%, rgba(var(--accent-rgb), .14), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
}
.staff-permissions-hero h2 {
  margin: 8px 0 10px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 52px);
  line-height: .96;
  letter-spacing: -.04em;
}
.staff-permissions-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.staff-current-role-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 20px;
  background: rgba(0,0,0,.22);
}
.staff-current-role-card > span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.staff-current-role-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.staff-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.staff-role-select {
  width: min(100%, 180px);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}
.staff-table td {
  vertical-align: middle;
}
.staff-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
  gap: 12px;
  align-items: end;
}
.staff-permission-matrix {
  min-width: 860px;
}
.staff-permission-matrix td:not(:first-child),
.staff-permission-matrix th:not(:first-child) {
  text-align: center;
}
.customer-settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 22px;
  align-items: end;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 14%, rgba(var(--accent-rgb), .13), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.074), rgba(255,255,255,.025));
}
.customer-settings-hero h2 {
  margin: 8px 0 10px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 52px);
  line-height: .96;
  letter-spacing: -.04em;
}
.customer-settings-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.customer-settings-summary,
.customer-settings-stats,
.customer-config-checks,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.customer-settings-summary {
  justify-content: flex-end;
}
.customer-settings-summary span,
.customer-settings-stats span {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.customer-settings-summary strong,
.customer-settings-stats strong {
  color: var(--text);
  font-weight: 950;
}
.customer-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.025);
}
.customer-settings-tabs button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}
.customer-settings-tabs button.active {
  border-color: rgba(var(--accent-rgb), .44);
  background: var(--accent);
  color: #050505;
}
.customer-settings-form {
  display: grid;
  gap: 16px;
}
.customer-settings-panel {
  display: none;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
}
.customer-settings-panel.active {
  display: grid;
  gap: 18px;
}
.customer-config-list,
.customer-tag-list,
.customer-policy-list {
  display: grid;
  gap: 12px;
}
.customer-config-row,
.customer-tag-row,
.customer-policy-row {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}
.customer-config-row {
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .7fr);
}
.customer-config-row .full {
  grid-column: 1 / -1;
}
.customer-config-row.is-inactive,
.customer-tag-row.is-inactive {
  opacity: .62;
}
.customer-config-checks {
  grid-column: 1 / -1;
}
.customer-config-checks label,
.customer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.customer-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.customer-settings-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.settings-check-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0,0,0,.16);
}
.settings-check-card input {
  margin-top: 3px;
}
.settings-check-card span,
.settings-check-card strong,
.settings-check-card small {
  display: block;
}
.settings-check-card strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}
.settings-check-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.customer-tag-row {
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 220px) auto auto;
  align-items: end;
}
.customer-policy-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.customer-policy-row strong,
.customer-policy-row small {
  display: block;
}
.customer-policy-row strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}
.customer-policy-row small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.customer-settings-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 20px;
  background: rgba(13,13,13,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.customer-settings-savebar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.website-plugin-layout {
  display: grid;
  grid-template-columns: minmax(460px, 1fr) minmax(380px, 520px);
  gap: 28px;
  align-items: start;
}
.website-plugin-controls {
  padding: 24px;
  display: grid;
  gap: 24px;
}
.plugin-control-section {
  display: grid;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.plugin-control-section:first-of-type { padding-top: 0; border-top: 0; }
.plugin-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
}
.plugin-choice input { display: none; }
.plugin-choice span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.plugin-choice.active span {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .11);
}
.plugin-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}
.check-field.compact { min-height: 54px; padding: 12px 13px; }
.embed-code {
  min-height: 230px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(245,245,245,.82);
}
.website-plugin-preview-panel {
  position: sticky;
  top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.booking-rules-page {
  display: grid;
  gap: 22px;
}
.booking-rules-hero {
  align-items: center;
}
.booking-rule-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 18px;
}
.booking-rule-type-card {
  display: grid;
  min-width: 0;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.026);
  padding: 20px;
}
.booking-rule-type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.booking-rule-type-head small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
}
.booking-rule-type-card .form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.booking-rule-type-card .field label {
  min-height: 26px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.booking-rule-type-card .check-field {
  min-height: 96px;
  padding: 14px;
}
.booking-rule-type-card .check-field span {
  min-width: 0;
}
.booking-rule-type-card .check-field small {
  max-width: 24ch;
}
.booking-rule-priority {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.booking-rule-priority span {
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), .055);
  color: var(--text);
  padding: 12px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.booking-rule-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}
.booking-rule-state span {
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .075);
  color: var(--accent);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 950;
}
.booking-rule-state span.custom {
  color: var(--text);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.booking-rule-state label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.website-widget-preview {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  color: var(--widget-text);
  background:
    radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--widget-accent) 22%, transparent), transparent 18rem),
    var(--widget-bg);
  overflow: hidden;
}
.website-widget-preview.light {
  border-color: rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.website-widget-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.website-widget-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #090909;
  background: var(--widget-accent);
  font-weight: 950;
}
.website-widget-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.website-widget-brand span,
.website-widget-mode {
  color: color-mix(in srgb, var(--widget-text) 55%, transparent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.website-widget-brand strong { display: block; margin-top: 2px; font-size: 22px; letter-spacing: -.04em; }
.website-widget-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.website-widget-tabs span {
  white-space: nowrap;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--widget-text) 12%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--widget-text) 60%, transparent);
  font-size: 11px;
  font-weight: 850;
}
.website-widget-tabs .active {
  color: #090909;
  border-color: var(--widget-accent);
  background: var(--widget-accent);
}
.website-widget-mode {
  margin-bottom: 12px;
  color: var(--widget-accent);
}
.website-widget-list { display: grid; gap: 12px; }
.widget-session-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--widget-text) 10%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--widget-text) 5%, transparent);
}
.widget-session-card.compact { grid-template-columns: 78px minmax(0, 1fr); }
.widget-session-image {
  min-height: 92px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #090909;
  background: linear-gradient(135deg, var(--widget-accent), rgba(255,255,255,.18));
  font-weight: 950;
}
.widget-session-card.compact .widget-session-image { min-height: 76px; }
.widget-session-image img { width: 100%; height: 100%; object-fit: cover; }
.widget-session-body { min-width: 0; display: grid; gap: 10px; }
.widget-session-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.widget-session-top h3 { margin: 4px 0 0; font-size: 17px; line-height: 1.1; }
.widget-session-top strong { color: var(--widget-accent); white-space: nowrap; }
.widget-session-type {
  color: var(--widget-accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.widget-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: color-mix(in srgb, var(--widget-text) 62%, transparent);
  font-size: 12px;
}
.widget-session-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: color-mix(in srgb, var(--widget-text) 60%, transparent);
  font-size: 12px;
  font-weight: 750;
}
.widget-session-footer a {
  color: #090909;
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--widget-accent);
  font-size: 12px;
  font-weight: 950;
}
.website-widget-preview.button-outline .widget-session-footer a {
  color: var(--widget-accent);
  border: 1px solid var(--widget-accent);
  background: transparent;
}
.website-widget-preview.button-minimal .widget-session-footer a {
  color: var(--widget-accent);
  padding-inline: 0;
  background: transparent;
}
.website-widget-empty {
  color: color-mix(in srgb, var(--widget-text) 70%, transparent);
}
.website-widget-empty {
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--widget-text) 16%, transparent);
  border-radius: 16px;
  text-align: center;
}

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .club-menu-flyout { display: none !important; }
  .side-footer { position: relative; left: auto; right: auto; bottom: auto; margin-top: 20px; }
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-item { position: static; }
  .nav-item > a { justify-content: center; }
  .nav-item.has-flyout > a::after,
  .nav-flyout { display: none !important; }
  .nav-dot { display: none; }
  .main { padding: 22px 18px 40px; }
  .toast-region { right: 18px; bottom: 18px; }
  .topbar { flex-direction: column; }
  .global-search,
  .global-search-results { width: 100%; }
  .grid-3, .grid-2, .form-grid, .calendar-week, .create-type-grid, .access-grid, .recurrence-options, .waitlist-advanced, .payment-settings-grid, .payment-field-grid, .template-hero-grid, .template-grid, .class-template-card, .template-suggestion-panel, .template-preview-dialog .dialog-body, .club-hero, .session-card-grid, .pulse-grid, .member-overview-grid, .product-image-control, .accent-control, .brand-lockup-panel, .loading-screen-control, .session-detail-hero, .session-detail-stats, .session-note-form, .earn-rule-control-grid { grid-template-columns: 1fr; }
  .calendar-month { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-control-panel { grid-template-columns: 1fr; }
  .calendar-month-weekdays { display: none; }
  .calendar-nav, .calendar-view-summary { align-items: stretch; flex-direction: column; }
  .calendar-nav-actions { justify-content: flex-start; }
  .weekday-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .template-command-bar, .linked-template-panel { align-items: stretch; flex-direction: column; }
  .session-detail-actions { justify-content: flex-start; max-width: none; }
  .session-alert-card { align-items: flex-start; flex-direction: column; }
  .payment-settings-head { align-items: stretch; flex-direction: column; }
  .template-actions { justify-content: stretch; }
  .template-card-image { min-height: 180px; }
  .pulse-card.wide { grid-column: auto; }
  .activity-item { grid-template-columns: 1fr; }
  .customer-profile-hero, .customer-profile-grid, .customer-profile-actions, .customer-profile-status-grid { grid-template-columns: 1fr; }
  .customer-timeline-row, .customer-record-row { grid-template-columns: 1fr; }
  .customer-record-meta { justify-items: start; text-align: left; }
  .analytics-toolbar, .section-head { align-items: stretch; flex-direction: column; }
  .appointment-schedule-hero,
  .appointment-section-head,
  .appointment-calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .appointment-calendar-legend,
  .appointment-card-actions,
  .appointment-schedule-summary {
    justify-content: flex-start;
  }
  .appointment-card-metrics {
    grid-template-columns: 1fr;
  }
  .staff-permissions-hero,
  .staff-summary-grid,
  .staff-add-form,
  .customer-settings-hero,
  .customer-settings-grid,
  .customer-settings-grid.compact,
  .customer-config-row,
  .customer-tag-row,
  .customer-policy-row {
    grid-template-columns: 1fr;
  }
  .crm-controls { grid-template-columns: 1fr; }
  .crm-segmented { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .crm-utilities { justify-content: flex-start; }
  .columns-popover { left: 0; right: auto; }
  .member-drawer { width: 100vw; }
  .member-profile-hero, .identity-grid, .drawer-metric-grid, .drawer-action-grid { grid-template-columns: 1fr; }
  .logo-control { grid-template-columns: 1fr; }
  .accent-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-range-buttons { width: 100%; }
  .custom-range-row { align-items: stretch; flex-direction: column; }
  .analytics-summary, .analytics-summary-5, .analytics-grid-2, .analytics-grid-3, .analytics-grid-4, .analytics-reports-hero, .analytics-recommended-grid, .analytics-report-grid, .analytics-report-card, .insight-grid, .suggestion-grid, .analytics-section .suggestion-grid, .analytics-section .analytics-insight-grid, .pricing-hero, .pricing-grid, .pricing-hero-stats, .promotion-pulse, .promotions-grid, .promotion-builder, .promotion-product-picker, .compact-access, .guidance-hero, .guidance-metrics, .guidance-insights, .guidance-template-grid, .guidance-template-grid.challenge-grid, .guidance-live-grid, .guidance-live-grid.compact, .plugin-hero, .website-plugin-layout, .booking-rule-priority, .payments-settings-layout, .payment-connection-card, .payment-integration-grid, .email-template-row, .communication-editor-grid, .subscription-hero, .subscription-grid, .usage-grid, .plan-choice-grid, .inbox-shell, .inbox-broadcast-layout, .broadcast-tracking-grid, .messaging-action-grid, .messaging-template-layout, .security-grid, .developer-scope-grid, .webhook-endpoint-row, .webhook-delivery-row, .webhook-event-grid, .import-step-grid, .import-mapping-grid, .import-summary-grid, .export-grid, .booking-page-builder, .booking-cover-control, .settings-home-hero, .settings-home-grid, .pt-admin-layout, .reward-economics-grid, .earn-rule-reversal-banner, .permission-diagnostic-grid { grid-template-columns: 1fr; }
  .partner-reward-modal-grid { grid-template-columns: 1fr; }
  .partner-builder-row { align-items: flex-start; flex-direction: column; }
  .platform-plan-dialog { width: min(760px, calc(100vw - 24px)); }
  .platform-plan-header { padding: 34px 24px 10px; }
  .plan-choice-card { min-height: auto; }
  .plan-dialog-note { align-items: flex-start; flex-direction: column; }
  .webhook-actions { justify-content: flex-start; }
  .export-card { align-items: flex-start; flex-direction: column; }
  .inbox-sidebar-panel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .inbox-filter-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-conversation-list { max-height: 360px; }
  .inbox-detail-head { align-items: stretch; flex-direction: column; }
  .inbox-quick-actions { justify-content: flex-start; }
  .inbox-message-row .customer-message-bubble { width: min(92%, 620px); }
  .email-template-actions { justify-content: flex-start; }
  .rewards-subnav { width: 100%; overflow-x: auto; }
  .rewards-subnav button { white-space: nowrap; }
  .rewards-activity-row { grid-template-columns: 1fr; }
  .rewards-activity-meta { justify-items: start; text-align: left; }
  .agreement-disclaimer { align-items: flex-start; flex-direction: column; }
  .agreement-product-picker { grid-template-columns: 1fr; }
  .pricing-guidance-strip, .guided-empty { align-items: stretch; flex-direction: column; }
  .stripe-test-banner { align-items: stretch; flex-direction: column; }
  .stripe-test-stats { justify-content: flex-start; }
  .payments-settings-side { position: relative; top: auto; }
  .product-badge-stack { align-items: flex-start; }
  .promotion-empty { align-items: stretch; flex-direction: column; }
  .promotion-preview { position: relative; top: auto; }
  .product-builder-dialog {
    width: min(100vw - 24px, 760px);
    max-height: 92vh;
  }
  .product-builder-dialog .dialog-head,
  .product-builder-dialog .dialog-body {
    padding-left: 18px;
    padding-right: 18px;
  }
  .product-builder {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .product-type-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .product-builder-left .form-grid.compact { grid-template-columns: 1fr; }
  .announcement-composer { grid-template-columns: 1fr; }
  .community-hero, .community-grid, .community-metrics { grid-template-columns: 1fr; }
  .community-settings-card { position: relative; top: auto; }
  .website-plugin-preview-panel { position: relative; top: auto; }
  .booking-page-preview-panel { position: relative; top: auto; }
  .plugin-hero-tabs { justify-content: flex-start; }
  .widget-session-card { grid-template-columns: 1fr; }
  .announcement-preview { position: relative; top: auto; }
.member-preview-shell { position: relative; top: auto; width: 100%; }
  .pricing-empty, .custom-build-panel, .section-actions { align-items: stretch; flex-direction: column; }
  .analytics-bar-row { grid-template-columns: 1fr; }
  .analytics-bar-value { text-align: left; }
  .analytics-search { max-width: none; }
}