/*
 * Shared MyDancr visual language.
 *
 * This stylesheet is intentionally scoped to content surfaces. Primary
 * navigation is owned by its existing components and is not styled here.
 */

:root {
  --mydancr-verified-cyan: var(--dancr-color-info);
  --mydancr-verified-blue: var(--dancr-color-info);
  --mydancr-verified-violet: var(--dancr-color-brand-primary);
  --mydancr-verified-magenta: var(--dancr-color-brand-primary);
}

/*
 * The trust mark comes directly from the hero: white against the electric-blue
 * pole light, with a restrained violet halo. Sizes remain owned by each
 * surface so dense cards, TV, and full profiles retain their existing layout.
 */

/*
 * Repeating each class gives this shared rule enough specificity to supersede
 * the legacy device-targeted badge colors in the live shell. It changes no
 * geometry and keeps the same treatment on iOS, Android, and desktop.
 */
:root :is(
  .verified-mark.verified-mark.verified-mark,
  .verified-check.verified-check.verified-check,
  .home-tv-feed-verified.home-tv-feed-verified.home-tv-feed-verified,
  .profile-modal-verified.profile-modal-verified.profile-modal-verified,
  .profile-verified.profile-verified.profile-verified,
  .tv-verified-mark.tv-verified-mark.tv-verified-mark
) {
  border: 1px solid var(--dancr-color-info-strong) !important;
  color: var(--dancr-color-text-primary) !important;
  background: color-mix(
    in srgb,
    var(--dancr-color-info) 24%,
    var(--dancr-color-surface)
  ) !important;
  box-shadow: inset 0 0 0 1px var(--dancr-color-info-soft) !important;
  text-shadow: none !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) {
  --mydancr-bg: var(--dancr-color-background);
  --mydancr-surface: var(--dancr-color-surface-translucent);
  --mydancr-surface-raised: var(--dancr-color-surface-raised);
  --mydancr-line: var(--dancr-color-border-subtle);
  --mydancr-line-accent: var(--dancr-color-brand-primary-medium);
  --mydancr-text: var(--dancr-color-text-primary);
  --mydancr-muted: var(--dancr-color-text-muted);
  --mydancr-cyan: var(--dancr-color-info);
  --mydancr-violet: var(--dancr-color-brand-primary);
  --mydancr-pink: var(--dancr-color-brand-primary);
  color: var(--mydancr-text) !important;
  background: var(--mydancr-bg) !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(h1, h2, h3) {
  color: var(--mydancr-text);
  font-weight: 950;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(.eyebrow, label, legend) {
  color: var(--dancr-color-text-secondary);
  font-weight: 900;
  letter-spacing: 0.12em;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(p, small, .muted, .empty) {
  color: var(--mydancr-muted);
}

:is(
  .account-shell .account-panel,
  .dashboard-shell .info-panel,
  .admin-shell .admin-panel,
  .dmca-shell .dmca-card,
  .counter-shell .counter-card,
  .redeem-shell .scanner-card,
  .deal-pass-page .deal-pass-card,
  .tv-studio-page .tv-upload-form,
  .tv-studio-page .tv-video-manager,
  .tv-studio-page .tv-studio-lock,
  .tv-studio-page .tv-studio-incognito
) {
  overflow: hidden;
  border: 1px solid var(--mydancr-line) !important;
  border-radius: 18px !important;
  background: var(--mydancr-surface) !important;
  box-shadow:
    var(--dancr-shadow-surface),
    inset 0 1px 0 var(--dancr-color-white-soft) !important;
}

:is(
  .dashboard-shell .metric,
  .dashboard-shell .dashboard-shift,
  .dashboard-shell .photo-review-card,
  .dashboard-shell .saved-deal-item,
  .dashboard-shell .support-thread,
  .dashboard-shell .notification-row,
  .dashboard-shell .event-row,
  .dashboard-shell .commission-tier-table,
  .admin-shell .approval-row,
  .admin-shell .dancer-directory-row,
  .admin-shell .submission-section,
  .admin-shell .submission-value,
  .admin-shell .submission-review-card,
  .admin-shell .submitted-social-review,
  .admin-shell .venue-admin-row,
  .admin-shell .report-row,
  .admin-shell .support-inbox-thread,
  .admin-shell .support-inbox-message,
  .account-shell .signup-benefits,
  .account-shell .dancer-signup-note,
  .account-shell .customer-benefit-tile
) {
  border: 1px solid var(--mydancr-line) !important;
  border-radius: 14px !important;
  background: var(--dancr-color-surface-subtle) !important;
  box-shadow: none !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(input, select, textarea) {
  border: 1px solid var(--dancr-color-border) !important;
  border-radius: 12px !important;
  color: var(--mydancr-text) !important;
  background: var(--dancr-color-surface-raised) !important;
  box-shadow: none !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(input, select, textarea):focus {
  border-color: var(--dancr-color-brand-primary) !important;
  outline: 0 !important;
  box-shadow: var(--dancr-focus-ring) !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(
  button,
  .primary-link,
  .primary-action,
  .secondary-action,
  .venue-sign-in
) {
  border: 1px solid var(--dancr-color-border) !important;
  border-radius: 12px !important;
  color: var(--mydancr-text) !important;
  background: var(--dancr-color-surface-raised) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(
  button[type="submit"],
  .submit,
  .continue-signup,
  .counter-submit,
  .dmca-submit,
  .primary-link,
  .primary-action
) {
  border-color: var(--dancr-color-brand-primary-strong) !important;
  color: var(--dancr-color-text-primary) !important;
  background: linear-gradient(
    135deg,
    var(--dancr-color-brand-primary),
    var(--dancr-color-brand-primary-deep)
  ) !important;
  box-shadow:
    var(--dancr-shadow-brand-control) !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(button, a):hover {
  border-color: var(--mydancr-line-accent) !important;
  filter: none !important;
}

:is(
  .account-shell .segmented,
  .admin-shell .segmented,
  .dashboard-shell .segmented
) {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--mydancr-line) !important;
  border-radius: 14px !important;
  background: var(--dancr-color-background) !important;
}

:is(
  .account-shell .segmented,
  .admin-shell .segmented,
  .dashboard-shell .segmented
) button {
  border: 0 !important;
  background: transparent !important;
}

:is(
  .account-shell .segmented,
  .admin-shell .segmented,
  .dashboard-shell .segmented
) button.active {
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-brand-primary) !important;
  box-shadow:
    inset 0 0 0 1px var(--dancr-color-brand-primary-medium),
    var(--dancr-shadow-brand-subtle) !important;
}

:is(
  .account-shell,
  .dashboard-shell,
  .admin-shell,
  .dmca-shell,
  .counter-shell,
  .redeem-shell,
  .deal-pass-page,
  .tv-studio-page
) :is(
  button[class*="close"],
  button[aria-label*="password" i]
) {
  border-radius: 999px !important;
  background: var(--dancr-color-surface-soft) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.account-shell .account-copy {
  align-content: start;
}

.account-shell .account-copy h1,
.dashboard-shell .dashboard-head h1,
.admin-shell .admin-head h1,
.dmca-shell .dmca-hero h1 {
  max-width: 760px;
  font-size: clamp(40px, 7vw, 72px) !important;
  line-height: 0.96 !important;
}

.account-shell .account-panel {
  padding: clamp(18px, 3vw, 24px) !important;
}

.dashboard-shell .dashboard-grid,
.admin-shell .admin-grid {
  gap: 14px !important;
}

.dashboard-shell .info-panel,
.admin-shell .admin-panel {
  padding: clamp(16px, 2.4vw, 22px) !important;
}

.dashboard-shell .info-panel > h2,
.admin-shell .admin-panel-head h2 {
  font-size: clamp(20px, 3vw, 27px) !important;
}

.dashboard-shell .visibility-panel.is-incognito {
  border-color: var(--dancr-color-border) !important;
  background: var(--dancr-color-surface-translucent) !important;
}

.dashboard-shell .deal-panel,
.dashboard-shell .venue-deal-panel {
  border-color: var(--dancr-color-success-medium) !important;
}

.admin-shell .admin-panel-badge,
.dashboard-shell .deal-state.active,
.redeem-shell .status-pill.success {
  border: 1px solid var(--dancr-color-info-medium) !important;
  color: var(--dancr-color-info) !important;
  background: var(--dancr-color-info-soft) !important;
}

.admin-shell :is(
  .submission-review-card.is-approved,
  .submitted-social-review.is-approved
) {
  border-color: var(--dancr-color-success-medium) !important;
  background: var(--dancr-color-success-soft) !important;
}

.admin-shell :is(
  .submission-review-card.is-rejected,
  .submitted-social-review.is-rejected
) {
  border-color: var(--dancr-color-danger-medium) !important;
  background: var(--dancr-color-danger-soft) !important;
}

.tv-studio-page .tv-managed-video {
  overflow: hidden;
  border: 1px solid var(--mydancr-line) !important;
  border-radius: 16px !important;
  background: var(--mydancr-surface) !important;
  box-shadow: none !important;
}

/*
 * Homepage content surfaces. The fixed discovery navigation is intentionally
 * outside every selector in this section.
 */

/*
 * One device-neutral foundation is shared by iPhone, Android, and desktop.
 * Media and semantic status colors remain untouched above these neutral layers.
 */
body.dancr-button-system,
body > .app,
body > .app main.stack {
  background: var(--dancr-color-background) !important;
}

/*
 * Scrolling discovery gutters are part of the neutral foundation, not a brand
 * accent. This removes legacy violet washes between cards on iOS and Android.
 */
body > .app main.stack > section.stack,
body > .app main.stack > section.stack > #results:is(
  .home-dancer-grid,
  .home-discovery-feed,
  .home-tv-feed,
  .card-grid,
  .venue-card-grid
) {
  background-color: var(--dancr-color-background) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body > .app main.stack > section.stack > #results:is(
  .home-dancer-grid,
  .home-discovery-feed,
  .home-tv-feed,
  .card-grid,
  .venue-card-grid
)::before,
body > .app main.stack > section.stack > #results:is(
  .home-dancer-grid,
  .home-discovery-feed,
  .home-tv-feed,
  .card-grid,
  .venue-card-grid
)::after {
  content: none !important;
  display: none !important;
}

/* Keep the vertical gutters purely near-black while giving each feed item one
 * readable neutral edge and a small downward lift. The shadow is black-only so
 * inactive cards never create a brand-colored halo between items. */
body.dancr-button-system > .app main.stack > section.stack > #results.home-dancer-grid > .home-dancer-grid-card,
body.dancr-button-system > .app main.stack > section.stack > #results.home-tv-feed > .home-tv-feed-slide,
body.dancr-button-system > .app main.stack > section.stack > #results.home-discovery-feed > .home-discovery-feed-slide,
body.dancr-button-system > .app main.stack > section.stack > #results.card-grid > .dancer-card,
body.dancr-button-system > .app main.stack > section.stack > #results.venue-card-grid > .venue-card {
  border: 1px solid rgba(248, 250, 252, 0.15) !important;
  box-shadow:
    0 14px 32px rgba(5, 5, 7, 0.38),
    inset 0 1px 0 rgba(248, 250, 252, 0.035) !important;
  filter: none !important;
}

/* The venue identity panel stays quieter than the card perimeter so nested
 * boxes cannot compete with the boundary between one venue and the next. */
body.dancr-button-system > .app main.stack > section.stack > #results.home-discovery-feed > .home-venue-discovery-slide .home-discovery-feed-copy {
  border-color: rgba(248, 250, 252, 0.07) !important;
}

body > .app main.stack > .hero.reference-hero {
  position: relative;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Preserve the supplied hero pixels exactly. Device-specific brightness,
 * contrast, saturation, blending, or zoom must never recolor or crop it. */
body > .app main.stack > .hero.reference-hero::before,
body > .app main.stack > .hero.reference-hero::after {
  content: none !important;
  display: none !important;
}

body > .app main.stack > .hero.reference-hero > .hero-art {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  transform: none !important;
  transform-origin: center center !important;
}

body > .app main.stack > .home-discovery-controls {
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body > .app main.stack > .home-discovery-controls label {
  color: var(--dancr-color-text-secondary) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

body > .app main.stack > .home-discovery-controls .home-city-filter {
  gap: 7px !important;
}

body > .app main.stack > .home-discovery-controls .home-city-select-shell {
  position: relative;
  min-width: 0;
}

body > .app main.stack > .home-discovery-controls .home-city-select-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 1;
  width: 19px;
  height: 19px;
  color: var(--dancr-color-text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: translateY(-50%);
  pointer-events: none;
}

body > .app main.stack > .home-discovery-controls :is(select, button) {
  min-height: 44px !important;
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 14px !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-surface-raised) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body > .app main.stack > .home-discovery-controls #citySelect {
  padding-left: 44px !important;
  font-weight: 850 !important;
}

body > .app main.stack > .home-discovery-controls .home-filter-toggle {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
  padding-inline: 12px !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-surface-subtle) !important;
}

body > .app main.stack > .home-discovery-controls .home-filter-toggle-icon {
  width: 19px;
  height: 19px;
  color: var(--dancr-color-text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body > .app main.stack > .home-discovery-controls .home-filter-toggle-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border: 1px solid var(--dancr-color-info-soft);
  border-radius: 999px;
  color: var(--dancr-color-info);
  background: color-mix(in srgb, var(--dancr-color-info) 13%, transparent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

body > .app main.stack > .home-discovery-controls .home-filter-toggle-count[hidden] {
  display: none !important;
}

body > .app main.stack > .home-discovery-controls .home-advanced-filters.is-open {
  padding: 12px !important;
  border: 1px solid var(--dancr-color-border-subtle);
  border-radius: 14px;
  background: var(--dancr-color-surface-translucent);
  box-shadow: none;
}

body > .app main.stack > .home-discovery-controls :is(select, button):focus-visible {
  border-color: var(--dancr-color-brand-primary) !important;
  outline: 0 !important;
  box-shadow: var(--dancr-focus-ring) !important;
}

body > .app main.stack > .home-live-summary {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 20px !important;
  padding: 0 2px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--dancr-color-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body > .app main.stack > .home-live-summary :is(span, strong) {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit !important;
  text-overflow: ellipsis;
  text-shadow: none !important;
  white-space: nowrap;
}

body > .app main.stack > .home-live-summary .home-live-summary-divider {
  flex: 0 0 auto;
  color: var(--dancr-color-text-disabled) !important;
}

body > .app main.stack > .home-live-summary #homeLiveRadius {
  flex: 0 1 auto;
  text-align: left !important;
}

body > .app main.stack > .home-live-summary #homeLiveWorking {
  flex: 0 1 auto;
  color: var(--dancr-color-text-primary) !important;
  font-weight: 900 !important;
}

body > .app main.stack > .home-tv-launch {
  border: 1px solid var(--dancr-color-brand-primary-medium) !important;
  border-radius: 18px !important;
  background: var(--dancr-color-surface-translucent) !important;
  box-shadow: var(--dancr-shadow-surface) !important;
}

body > .app main.stack > .home-tv-launch .home-tv-launch-icon {
  border: 1px solid var(--dancr-color-brand-primary-medium) !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-brand-primary) !important;
  box-shadow: none !important;
}

body > .app main.stack > :is(.home-results-header, .section-title) h2,
body > .app main.stack > #results :is(h2, h3) {
  color: var(--dancr-color-text-primary) !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

body > .app main.stack > #results :is(
  .home-feed-card,
  .dancer-card,
  .venue-card,
  .empty-state,
  .home-discovery-feed-slide,
  .home-tv-feed-slide
) {
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 20px !important;
  background: var(--dancr-color-surface-translucent) !important;
  box-shadow:
    var(--dancr-shadow-surface),
    inset 0 1px 0 var(--dancr-color-white-soft) !important;
}

body > .app main.stack > #results .home-venue-discovery-art,
body > .app main.stack > #results .home-discovery-feed-photo.is-photo-unavailable {
  background:
    radial-gradient(circle at 72% 18%, rgba(248, 250, 252, 0.055), transparent 34%),
    linear-gradient(145deg, var(--dancr-color-surface-raised), var(--dancr-color-background) 72%) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body > .app main.stack > #results :is(
  .info-tile,
  .venue-offer,
  .venue-hours,
  .home-feed-context,
  .home-dancer-grid-context
) {
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 14px !important;
  background: var(--dancr-color-black-soft) !important;
  box-shadow: none !important;
}

body > .app main.stack > #results :is(
  .home-dancer-grid-action-rail,
  .home-venue-discovery-action-rail
) {
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 18px !important;
  background: var(--dancr-color-surface-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

body > .app main.stack > #results :is(
  .home-dancer-grid-action-rail,
  .home-venue-discovery-action-rail
) :is(button, a) {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body > .app main.stack > #results :is(
  .home-dancer-grid-action-rail,
  .home-venue-discovery-action-rail
) :is(button, a).is-active {
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-brand-primary) !important;
  box-shadow: inset 0 0 0 1px var(--dancr-color-brand-primary-medium) !important;
}

body.dancr-button-system #profileBackdrop.modal-backdrop,
body.dancr-button-system #profileBackdrop.modal-backdrop.show,
body.dancr-button-system #profileBackdrop .profile-modal,
body.dancr-button-system #results.venue-profile-overlay,
body.dancr-button-system #results.venue-profile-overlay .venue-detail,
.public-profile-shell {
  background-color: var(--dancr-color-background) !important;
  background-image: none !important;
}

body.dancr-button-system #profileBackdrop.modal-backdrop,
body.dancr-button-system #profileBackdrop.modal-backdrop.show,
body.dancr-button-system #profileBackdrop .profile-modal,
body.dancr-button-system #results.venue-profile-overlay,
body.dancr-button-system #results.venue-profile-overlay .venue-detail {
  box-shadow: none !important;
}

/* Venue details use the same neutral hierarchy as a full dancer profile:
 * near-black page and gutters, charcoal content panels, and no ambient color
 * wash. Real profile media and semantic deal/action colors remain untouched. */
body.dancr-button-system #results.venue-profile-overlay :is(
  .venue-hero,
  .venue-sign,
  .venue-quick-stat,
  .venue-info .info-tile,
  .venue-shift-row,
  .locked
) {
  background-color: var(--dancr-color-surface-subtle) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.dancr-button-system #results.venue-profile-overlay :is(
  .venue-main-photo,
  .venue-art
) {
  background-color: var(--dancr-color-background) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.dancr-button-system #results.venue-profile-overlay .venue-main-photo::before,
body.dancr-button-system #results.venue-profile-overlay .venue-main-photo::after,
body.dancr-button-system #results.venue-profile-overlay .venue-art::before,
body.dancr-button-system #results.venue-profile-overlay .venue-art::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

body.dancr-button-system #results.venue-profile-overlay :is(
  .venue-hero-body,
  .venue-shift-list,
  .list.card-grid
) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#profileBackdrop .profile-modal,
#results.venue-profile-overlay .venue-detail,
.modal-card {
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 22px !important;
  color: var(--dancr-color-text-primary) !important;
}

.modal-card {
  background: var(--dancr-color-surface-translucent) !important;
  box-shadow: var(--dancr-shadow-modal) !important;
}

#profileBackdrop .profile-modal :is(.info-tile, .social-tile, .modal-actions),
#results.venue-profile-overlay .venue-detail :is(.info-tile, .venue-section, .venue-offer) {
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 15px !important;
  background: var(--dancr-color-surface-subtle) !important;
  box-shadow: none !important;
}

/* Full profiles keep one quiet, device-independent edge system. Persistent
 * purple/cyan outlines are reserved for focus and real semantic states. */
#profileBackdrop .profile-modal :is(
  .modal-identity,
  .profile-modal-summary,
  .social-link,
  .modal-actions .action-btn,
  .profile-share-trigger
),
#results.venue-profile-overlay .venue-detail :is(
  .venue-hero,
  .venue-sign,
  .venue-main-photo,
  .venue-art,
  .venue-quick-stat,
  .venue-info .info-tile,
  .venue-section,
  .venue-shift-row,
  .venue-offer,
  .locked,
  .action-btn:not(.venue-directions-btn):not(.venue-qr-launcher)
) {
  border-color: var(--dancr-color-border-subtle) !important;
  box-shadow: none !important;
}

#profileBackdrop .profile-modal :is(
  .social-link,
  .modal-actions .action-btn,
  .profile-share-trigger
):focus-visible,
#results.venue-profile-overlay .venue-detail :is(
  a,
  button
):focus-visible {
  border-color: var(--dancr-color-beam-violet-medium) !important;
  outline-color: var(--dancr-color-beam-violet) !important;
  box-shadow: var(--dancr-focus-ring) !important;
}

#profileBackdrop .profile-modal :is(.close-btn, button[class*="close"]),
#results.venue-profile-overlay .venue-detail :is(.close-btn, button[class*="close"]),
.modal-card :is(.close-btn, button[class*="close"]) {
  border: 1px solid var(--dancr-color-border-subtle) !important;
  border-radius: 999px !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-surface-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

@media (max-width: 720px) {
  :is(
    .account-shell,
    .dashboard-shell,
    .admin-shell,
    .dmca-shell,
    .counter-shell,
    .redeem-shell,
    .deal-pass-page,
    .tv-studio-page
  ) {
    background: var(--dancr-color-background) !important;
  }

  :is(
    .account-shell .account-panel,
    .dashboard-shell .info-panel,
    .admin-shell .admin-panel,
    .dmca-shell .dmca-card,
    .counter-shell .counter-card,
    .redeem-shell .scanner-card,
    .deal-pass-page .deal-pass-card,
    .tv-studio-page .tv-upload-form,
    .tv-studio-page .tv-video-manager
  ) {
    border-radius: 16px !important;
  }

  .account-shell .account-copy h1,
  .dashboard-shell .dashboard-head h1,
  .admin-shell .admin-head h1,
  .dmca-shell .dmca-hero h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
  }

  body > .app main.stack > .hero.reference-hero,
  body > .app main.stack > #results :is(
    .home-feed-card,
    .dancer-card,
    .venue-card,
    .empty-state,
    .home-discovery-feed-slide,
    .home-tv-feed-slide
  ) {
    border-radius: 18px !important;
  }

  body > .app main.stack > .hero.reference-hero {
    width: auto !important;
    margin-inline: 12px !important;
  }

  /* The full-profile shell is the mobile scroll viewport. Keep its fixed outer
     edge square and transparent so it cannot leave a rounded glow sliver over
     profile media as the inner content scrolls. */
  #profileBackdrop.modal-backdrop.show .profile-modal {
    border-top-color: transparent !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .account-shell,
    .dashboard-shell,
    .admin-shell,
    .dmca-shell,
    .counter-shell,
    .redeem-shell,
    .deal-pass-page,
    .tv-studio-page
  ) * {
    transition: none !important;
  }
}

/* Production brand palette: content surfaces only. Navigation is excluded. */

:is(.public-profile-shell, .tv-shell) {
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-background) !important;
}

:is(.public-profile-shell, .tv-shell) :is(h1, h2, h3, strong) {
  color: var(--dancr-color-text-primary);
}

.public-profile-shell :is(p, small, .profile-action-requirement),
.tv-shell :is(.tv-card-venue-line, .tv-no-shifts-state, .tv-empty p) {
  color: var(--dancr-color-text-secondary) !important;
}

.public-profile-shell :is(
  .profile-titlebar,
  .profile-titlebar-avatar,
  .profile-media,
  .profile-working-card,
  .profile-social-card,
  .profile-social-section,
  .profile-info-card,
  .club-deal-card,
  .profile-deal-availability .venue-qr-unavailable,
  .profile-media-tabs,
  .profile-media-feature,
  .profile-schedule-section,
  .shift-row,
  .profile-account-gate,
  .profile-share-panel
),
.tv-shell :is(.tv-header, .tv-player, .tv-empty, .tv-status, .tv-loading) {
  border-color: var(--dancr-color-border-subtle) !important;
  background: var(--dancr-color-surface-translucent) !important;
  box-shadow: none !important;
}

.public-profile-shell :is(.profile-metrics, .social-list a, .live-actions > button),
.tv-shell :is(.tv-sound, .tv-playback-retry, .tv-empty button, .tv-empty a) {
  border-color: var(--dancr-color-border-subtle) !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-surface-raised) !important;
  box-shadow: none !important;
}

.public-profile-shell .live-actions .profile-action-primary {
  border-color: var(--dancr-color-border-subtle) !important;
  color: var(--dancr-color-text-primary) !important;
  background: linear-gradient(
    135deg,
    var(--dancr-color-brand-primary),
    var(--dancr-color-brand-primary-deep)
  ) !important;
  box-shadow: none !important;
}

.public-profile-shell :is(.club-deal-action > button, .venue-qr-launcher) {
  border-color: var(--dancr-color-success-medium) !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-success-soft) !important;
  box-shadow: none !important;
}

.public-profile-shell :is(
  .public-profile-close,
  .social-list-toggle,
  .profile-action-share-slot .profile-share button
) {
  border-color: var(--dancr-color-border-subtle) !important;
  color: var(--dancr-color-text-primary) !important;
  background: var(--dancr-color-surface-raised) !important;
  box-shadow: none !important;
}

.public-profile-shell :is(
  .public-profile-close,
  .social-list-toggle,
  .profile-action-share-slot .profile-share button,
  .profile-media-grid-item
):focus-visible,
.tv-shell :is(
  .tv-player video,
  .tv-card-stage-link,
  .tv-card-venue-line,
  .tv-playback-retry
):focus-visible {
  border-color: var(--dancr-color-beam-violet-medium) !important;
  outline-color: var(--dancr-color-beam-violet) !important;
  box-shadow: var(--dancr-focus-ring) !important;
}

.public-profile-shell .profile-media-tabs button {
  color: var(--dancr-color-text-muted) !important;
}

.public-profile-shell .profile-media-tabs button.active,
.tv-shell .tv-filters button.active {
  border-color: var(--dancr-color-beam-violet-medium) !important;
  color: var(--dancr-color-text-primary) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--dancr-color-beam-violet) 62%, var(--dancr-color-surface)),
      color-mix(in srgb, var(--dancr-color-beam-blue) 34%, var(--dancr-color-surface))
    ) !important;
  box-shadow: var(--dancr-shadow-beam-active) !important;
  text-shadow: none !important;
}

/* The hero beam is a state signal, reserved for active, selected, and keyboard-focused UI. */
#profileBackdrop .profile-modal-media-tabs button.active,
#profileBackdrop .gallery .thumb.active,
.profile-tv-viewer-gallery button.active,
.public-profile-shell .profile-media-grid-item.active {
  border-color: var(--dancr-color-beam-violet-medium) !important;
  outline-color: var(--dancr-color-beam-violet-medium) !important;
  box-shadow: var(--dancr-shadow-beam-active) !important;
}

#profileBackdrop .profile-modal-media-tabs button.active {
  color: var(--dancr-color-text-primary) !important;
  background:
    linear-gradient(
      135deg,
      rgba(91, 19, 255, 0.48),
      rgba(52, 110, 255, 0.24)
    ) !important;
}

:is(
  .home-dancer-grid-link,
  .home-feed-card .dancer-card-link,
  .profile-modal .modal-image,
  .profile-photo-viewer-image,
  .public-profile-shell .profile-media-feature
):focus-visible {
  outline: 2px solid var(--dancr-color-beam-violet) !important;
  outline-offset: 3px !important;
  box-shadow: var(--dancr-focus-ring) !important;
}

@supports selector(:has(*)) {
  #results.home-dancer-grid > .home-dancer-grid-card:has(:focus-visible),
  #results.home-discovery-feed.home-venue-discovery-feed > .home-venue-discovery-slide:has(:focus-visible) {
    border-color: var(--dancr-color-beam-violet-medium) !important;
    box-shadow: var(--dancr-shadow-beam-card) !important;
  }
}

.public-profile-shell :is(.profile-live-state, .profile-working-head .eyebrow),
.tv-shell :is(.tv-status, .tv-loading, .tv-profile-destination) {
  color: var(--dancr-color-info) !important;
}

.public-profile-shell .profile-working-card.is-working,
.public-profile-shell .profile-live-state.is-working,
.tv-shell :is(
  .tv-schedule-row.is-tonight svg,
  .tv-card-schedule-text.tonight
),
.dashboard-shell :is(
  .photo-review-card.is-approved,
  .review-row.is-approved,
  .shift-checkin-card.ready,
  .deal-state.active
) {
  border-color: var(--dancr-color-success-medium) !important;
  color: var(--dancr-color-success) !important;
  background-color: var(--dancr-color-success-soft) !important;
}

.dashboard-shell :is(.photo-review-card.is-pending, .review-row.is-pending) {
  border-color: var(--dancr-color-featured-medium) !important;
  background-color: var(--dancr-color-featured-soft) !important;
  box-shadow: inset 3px 0 0 var(--dancr-color-featured) !important;
}

:is(.dashboard-shell, .admin-shell) :is(
  .photo-review-card.is-rejected,
  .review-row.is-rejected,
  .submission-review-card.is-rejected,
  .submitted-social-review.is-rejected,
  .error,
  [role="alert"]
) {
  border-color: var(--dancr-color-danger-medium) !important;
  color: var(--dancr-color-danger) !important;
  background-color: var(--dancr-color-danger-soft) !important;
}

.tv-shell :is(.tv-verified-mark, .verified-mark),
.public-profile-shell :is(.profile-verified, .verified-mark) {
  border-color: var(--dancr-color-info-strong) !important;
  color: var(--dancr-color-text-primary) !important;
  background: color-mix(
    in srgb,
    var(--dancr-color-info) 24%,
    var(--dancr-color-surface)
  ) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.tv-shell :is(.tv-card-venue-name, .tv-card-schedule-text.upcoming) {
  color: var(--dancr-color-text-secondary) !important;
  text-shadow: none !important;
}

.tv-shell .tv-player-shade,
.tv-shell .tv-profile-body {
  background: linear-gradient(
    180deg,
    transparent,
    var(--dancr-color-black-medium) 44%,
    var(--dancr-color-background) 100%
  ) !important;
}

/* Full profiles carry one quiet violet side beam only on meaningful state cards. */
.public-profile-shell :is(
  .profile-working-card,
  .profile-schedule-section,
  .profile-working-card .club-deal-card
) {
  position: relative !important;
  overflow: hidden !important;
  border-color: var(--dancr-color-border-subtle) !important;
  box-shadow: none !important;
}

.public-profile-shell :is(
  .profile-working-card,
  .profile-schedule-section,
  .profile-working-card .club-deal-card
)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--dancr-color-beam-violet),
    color-mix(
      in srgb,
      var(--dancr-color-beam-violet) 62%,
      var(--dancr-color-beam-blue)
    )
  );
  box-shadow: 0 0 14px var(--dancr-color-beam-violet-soft);
  pointer-events: none;
}