:root {
  color-scheme: dark;
}

html {
  background: var(--theme-page-bg);
  scrollbar-color: var(--theme-primary) var(--theme-page-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--theme-text);
  background: var(--theme-page-bg);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Complete scenes share the same ink surfaces and localized neon lighting. */
.site-body { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/song-library-stage.webp'); }
.scene-auth { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/auth-arcade.webp'); }
.scene-settings { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/settings-rooftop.webp'); }
.scene-inbox { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/inbox-steps.webp'); }
.scene-community { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/community-street.webp'); }
.scene-skins { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/skins-studio.webp'); }
.scene-results { --page-scene: url('/_content/Beatori.Server.UI/images/cohesion/gym-results-rooftop.webp'); }
body::before {
  z-index: 0;
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
  background: linear-gradient(180deg, rgb(from var(--theme-page-bg) r g b / .6), rgb(from var(--theme-page-bg) r g b / .9)), var(--page-scene) center top / cover no-repeat;
}
.scene-auth::before { opacity: 1; background: var(--page-scene) center / cover no-repeat; }
.scene-auth::after { display: none; }
.scene-settings::before { background: linear-gradient(90deg, rgb(from var(--theme-page-bg) r g b / .55), rgb(from var(--theme-page-bg) r g b / .15)), var(--page-scene) center / cover no-repeat; }

.scene-inbox::before { background: linear-gradient(90deg, rgb(from var(--theme-page-bg) r g b / .68), rgb(from var(--theme-page-bg) r g b / .28)), var(--page-scene) center / cover no-repeat; }
.scene-results::before { background: linear-gradient(180deg, rgb(from var(--theme-page-bg) r g b / .5), rgb(from var(--theme-page-bg) r g b / .85)), var(--page-scene) center / cover no-repeat; }

body::after {
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0 760px, color-mix(in srgb, var(--theme-page-bg) 82%, transparent) 1500px),
    radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--theme-primary) 12%, transparent), transparent 50%);
}

a {
  color: inherit;
}

a,
button,
input,
select,
textarea {
  transition:
    color var(--theme-transition),
    border-color var(--theme-transition),
    background-color var(--theme-transition),
    box-shadow var(--theme-transition),
    transform var(--theme-transition);
}

:focus-visible {
  outline: 2px solid var(--theme-primary-bright);
  outline-offset: 3px;
}

.site-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  background: transparent;
}

.page-shell {
  min-height: calc(100vh - var(--theme-header-height));
  padding: var(--theme-header-height) 0 var(--theme-space-8);
  background: transparent;
}

.has-status-banner .page-shell {
  padding-top: 0;
}

.has-status-banner .beatori-public-header {
  position: sticky;
  top: 0;
}

.page-shell.home-shell {
  padding-bottom: 0;
}

.shell {
  width: min(var(--theme-content-max), calc(100% - (var(--theme-page-gutter) * 2)));
  margin-inline: auto;
}

.page-content {
  display: grid;
  gap: var(--theme-space-6);
  padding-top: var(--theme-space-6);
}

[data-async-page] {
  transition: opacity var(--theme-transition), filter var(--theme-transition);
}

[data-async-page].is-loading {
  opacity: .56;
  filter: saturate(.6);
  pointer-events: none;
}

.surface-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--theme-tube-unlit);
  border-radius: var(--theme-radius-frame);
  background: var(--theme-surface);
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 3%, transparent);
}

/* Interactive disclosure panels must escape decorative card clipping. */
.catalog-filters,
.leaderboard-controls {
  overflow: visible;
}

.legal-document{width:100%;max-width:1120px;margin-inline:auto;min-width:0;}
.page-content:has(.legal-document,.score-appeals) > .beatori-hero-container { max-width:1120px;margin-inline:auto; }
.page-content:has(.authenticator-layout) > .beatori-hero-container { max-width:760px;margin-inline:auto; }
.page-content:has(.notifications-layout) > .beatori-hero-container { max-width:1080px;margin-inline:auto; }
.legal-document-prose{min-width:0;display:grid;gap:16px;}
.legal-document-prose .legal-updated{font-size:14px;color:var(--theme-text-muted)}

.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-space-2);
  width: max-content;
  min-height: 28px;
  padding-inline: 11px;
  border: 1px solid color-mix(in srgb, var(--theme-primary-bright) 45%, transparent);
  border-radius: var(--theme-radius-sm);
  background: color-mix(in srgb, var(--theme-primary) 16%, transparent);
  color: var(--skill-ln);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.neon-button,
.icon-button,
.circle-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-2);
  min-height: var(--theme-control-height);
  padding-inline: 18px;
  border: 1px solid var(--theme-tube-dim);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-gradient-rim);
  color: var(--theme-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  cursor: var(--beatori-cursor-pointer, pointer);
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 14%, transparent), var(--theme-glow);
}

.neon-button:hover,
.icon-button:hover,
.circle-action:hover {
  border-color: var(--theme-primary-bright);
  color: var(--theme-text);
  box-shadow: inset 0 1px color-mix(in srgb, var(--theme-text) 18%, transparent), var(--theme-glow-strong);
  transform: translateY(-1px);
}

.neon-button.compact {
  min-height: 42px;
  padding-inline: 15px;
}

.icon-button,
.circle-action {
  width: var(--theme-control-height);
  flex: 0 0 var(--theme-control-height);
  padding: 0;
  border-color: var(--theme-tube-unlit);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-surface-raised);
  box-shadow: none;
}

.circle-action {
  border-radius: var(--theme-radius-pill);
}

.site-shell input:not(.beatori-input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.site-shell select:not(.beatori-input),
.site-shell textarea:not(.beatori-input) {
  width: 100%;
  min-height: var(--theme-control-height);
  padding: 0 14px;
  border: 1px solid var(--theme-tube-unlit);
  border-radius: var(--theme-radius-sm);
  outline: none;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--theme-text) 2%, transparent);
}

.site-shell select:not(.beatori-input) {
  appearance: none;
  padding-right: 38px;
  padding-left: 12px;
  background-color: var(--theme-surface-raised);
  background-image: linear-gradient(45deg, transparent 50%, var(--theme-text-muted) 50%), linear-gradient(135deg, var(--theme-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.site-shell textarea:not(.beatori-input) {
  min-height: 128px;
  padding-block: 12px;
  resize: vertical;
}

.site-shell input:not(.beatori-input)::placeholder,
.site-shell textarea:not(.beatori-input)::placeholder {
  color: var(--theme-text-dim);
}

.site-shell input:not(.beatori-input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):focus,
.site-shell select:not(.beatori-input):focus,
.site-shell textarea:not(.beatori-input):focus {
  border-color: var(--theme-primary-bright);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary) 17%, transparent), var(--theme-glow);
}

.control-field {
  display: grid;
  gap: 5px;
}

.control-field > span,
.catalog-filter-group > legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--theme-text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.control-field > span i {
  color: var(--theme-primary-bright);
  font-size: 0.9rem;
}

.neo-empty-state,
.ranked-empty,
.mini-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--theme-space-2);
  min-width: 0;
  min-height: 190px;
  padding: var(--theme-space-7);
  color: var(--theme-text-muted);
  text-align: center;
}

.neo-empty-state > i,
.ranked-empty > i,
.mini-empty > i {
  color: var(--theme-primary-bright);
  font-size: 2.1rem;
  filter: drop-shadow(0 0 13px color-mix(in srgb, var(--theme-primary-bright) 48%, transparent));
}

.neo-empty-state strong,
.ranked-empty strong,
.mini-empty strong {
  color: var(--theme-text);
}

.neo-empty-state span,
.ranked-empty span,
.mini-empty span {
  max-width: 50ch;
  font-size: 0.8rem;
  line-height: 1.5;
}

.neo-empty-state.compact,
.ranked-empty.compact,
.mini-empty.compact {
  min-height: 90px;
  padding: var(--theme-space-4);
}

.page-title-block h1 {
  margin: 0;
  color: var(--theme-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: var(--theme-space-3);
  color: var(--skill-ln);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-lead {
  max-width: 62ch;
  margin: var(--theme-space-3) 0 0;
  color: var(--theme-text-muted);
  line-height: 1.55;
}

@media (max-width: 900px) {
  :root {
    --theme-header-height: 58px;
  }

  body::before {
    background-position: 64% top;
    opacity: 0.34;
  }

  .page-content {
    padding-top: var(--theme-space-2);
  }
}

@media (max-width: 1023px) { :root { --theme-page-gutter: 24px; } }
@media (max-width: 639px) { :root { --theme-page-gutter: 16px; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.entity-art-fallback {
  --entity-hue: 270;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  background:
    radial-gradient(circle at 22% 18%, hsl(calc(var(--entity-hue) + 65) 100% 78% / .82), transparent 32%),
    linear-gradient(145deg, hsl(var(--entity-hue) 84% 54%), hsl(calc(var(--entity-hue) + 54) 82% 24%));
}

.entity-art-fallback::before,
.entity-art-fallback::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid hsl(calc(var(--entity-hue) + 120) 100% 85% / .55);
  transform: rotate(35deg);
}

.entity-art-fallback::before { width: 78%; height: 28%; }
.entity-art-fallback::after { width: 34%; height: 90%; }
.entity-art-artist { border-radius: 50% 18% 50% 18%; }
.entity-art-player { border-radius: 50%; }
.entity-art-map, .entity-art-song, .entity-art-pattern {
  color: transparent; text-shadow: none;
  background: url('/_content/Beatori.Server.UI/images/song-fallback.webp') center / cover no-repeat,
    linear-gradient(to bottom right, #17142b, #221b3c 55%, #12222e);
}
.entity-art-map::before, .entity-art-map::after,
.entity-art-song::before, .entity-art-song::after,
.entity-art-pattern::before, .entity-art-pattern::after { display: none; }
.surface-frame.settings-panel { padding: var(--theme-space-5); }
/* Razor-generated profile links do not inherit the page CSS-isolation marker. */
.profile-avatar-wrap.player-avatar-frame > .player-avatar-flag {
  position: absolute;
  right: -8px;
  bottom: -7px;
  width: 28px !important;
  height: 21px !important;
  border: 2px solid var(--theme-surface-raised);
  border-radius: 4px;
  object-fit: cover;
}
/* Shared leaderboard filters. */
.toggle-control { display: flex; align-items: center; gap: 8px; min-height: var(--theme-control-height); color: var(--theme-text); font-size: 0.75rem; cursor: var(--beatori-cursor-pointer, pointer); }
.toggle-control .toggle-input { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.toggle-control > i { position: relative; width: 34px; height: 18px; flex: 0 0 auto; border-radius: var(--theme-radius-pill); background: var(--theme-surface-raised); box-shadow: inset 0 0 0 1px var(--theme-tube-unlit); }
.toggle-control > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--theme-text-muted); transition: var(--theme-transition); }
.toggle-control input:checked + i { background: var(--theme-primary); box-shadow: 0 0 12px color-mix(in srgb, var(--theme-primary-bright) 34%, transparent); }
.toggle-control input:checked + i::after { left: 19px; background: var(--theme-text); }
.shared-comment-panel { display: grid; gap: var(--theme-space-4); min-width:0; }
.shared-comment-panel > header { display: flex; align-items: end; justify-content: space-between; padding-bottom: var(--theme-space-3); border-bottom: 1px solid var(--theme-tube-unlit); }
.shared-comment-panel > header span { color: var(--theme-primary-bright); font-size: 0.75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.shared-comment-panel h2 { margin: 4px 0 0; color: var(--theme-text); font: 850 1.5rem/1 var(--font-display); }
.shared-comment-list { display: grid; }
.shared-comment { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: var(--theme-space-3) 0; border-bottom: 1px solid var(--theme-tube-unlit); }
.shared-comment > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
.shared-comment-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shared-comment-author a { color: var(--theme-text); font-size:14px; font-weight:800; text-decoration:none; overflow-wrap:anywhere; }
.shared-comment-author a:hover { color: var(--theme-primary-bright); }
.shared-comment-author .player-country-flag { width: 20px; }
.shared-comment time { color: var(--theme-text-dim); font-size: 0.75rem; }
.shared-comment p { grid-column: 1 / -1; max-width:75ch; margin:0; color:var(--theme-text-muted); font-size:16px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.shared-comment.is-reply { padding: 10px 0 0; border-bottom: 0; }
.shared-comment-content { min-width: 0; }
.shared-comment-actions { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; min-width:0; }
.shared-comment-actions form { margin: 0; }
.shared-comment-actions > form { display:flex; }
.shared-comment-actions > form > .beatori-button { width:100%; }
.shared-comment-actions > :last-child:nth-child(odd) { grid-column:1/-1; }
.shared-comment-action-menu { min-width:0; }
.shared-comment-action-menu .beatori-dropdown-panel { width:min(340px,calc(100vw - 32px)); min-width:0; padding:16px; }
.shared-comment-action-menu form { display:grid; gap:12px; min-width:0; }
.shared-comment-actions .beatori-button { max-width:100%; white-space:normal; }
.shared-comment-replies { grid-column: 1 / -1; margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--theme-tube-unlit); }
.shared-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--theme-space-3); }
.shared-comment-form textarea { min-height: 92px; }
@media (max-width:620px) {
    .shared-comment-form { grid-template-columns:1fr; }
    .shared-comment > .shared-comment-content { display:contents; }
    .shared-comment > .player-avatar-frame { grid-column:1; grid-row:1/span 2; }
    .shared-comment-author, .shared-comment time { grid-column:2; }
    .shared-comment-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* App-local overrides only. Shared UI lives in Beatori.Server.UI. */
.ranked-pill {
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease, background 160ms ease;
}
.ranked-pill:hover,
.ranked-pill:focus-visible {
    border-color: var(--theme-tube-dim);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 22px rgba(168, 85, 247, 0.22);
    color: var(--theme-text);
    transform: translateY(-1px);
}
.ranked-pill.active {
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.18);
}
.profile-challenge-badge {
    border-color: var(--theme-tube-dim);
    color: var(--skill-ln);
}
.challenge-history-list {
    display: grid;
    gap: 1.25rem;
}
.challenge-history-card {
    overflow: hidden;
}
.challenge-table {
    margin-top: 1rem;
}
.challenge-table .ranked-table-head,
.challenge-table .ranked-table-row {
    grid-template-columns: 0.6fr 2fr 1fr 1fr 1fr;
}
.song-preview-player {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
}
/* Catalog grids keep the same reading plane as the shared table widget. */
.catalog-table,
.song-map-table {
    background: var(--theme-surface);
    border: 1px solid var(--theme-tube-unlit);
    border-radius: var(--theme-radius-frame);
    padding-inline: 16px;
}
body {
    background: var(--theme-page-bg);
}
html:has(.beatori-mobile-menu[open]),
body:has(.beatori-mobile-menu[open]) {
    overflow: hidden;
}

/* Policy and support share icon-led information sections. */
.policy-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:start; }
.policy-navigation { position:sticky; top:calc(var(--theme-header-height) + 20px); display:grid; gap:6px; padding:12px; background:var(--theme-surface); border:1px solid var(--theme-tube-unlit); border-radius:14px; }
.policy-navigation a { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 12px; border-radius:10px; font-size:14px; text-decoration:none; }
.policy-navigation a:hover { background:var(--theme-surface-raised); }
.policy-navigation i { color:var(--info-accent,var(--theme-primary-bright)); font-size:24px; }
.policy-updated { margin:0; color:var(--theme-text-muted); font-size:13px; padding:12px 18px; background:var(--theme-surface); border:1px solid var(--theme-tube-unlit); border-radius:12px; }
.contact-sections { display:grid; gap:16px; max-width:960px; margin-inline:auto; }
@media (max-width:900px) {
 .policy-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
 .policy-navigation { position:static; display:flex; flex-wrap:wrap; padding:8px; gap:4px; }
 .policy-navigation a { min-height:44px; font-size:13px; padding:8px 10px; }
 .policy-navigation i { font-size:20px; }
}
@media (max-width:1365px), (max-height:800px) {
 .page-content { gap:20px; padding-top:20px; }
 .page-shell { padding-bottom:32px; }
}
@media (max-width:639px) {
 .page-content { gap:16px; padding-top:16px; }
 .contact-sections,.legal-document-prose { gap:12px; }
}

.beatori-info-section { scroll-margin-top:calc(var(--theme-header-height) + 16px); }
@media (max-width:1100px), (max-height:800px) { .beatori-info-section { --info-padding:20px; } }
@media (max-width:639px) { .beatori-info-section { --info-padding:16px; } }

/* Headings above collections have the same protected reading plane as page rails. */
.site-shell :is(.home-section-heading,.global-search-group > header,.catalog-results-heading,.artist-directory-results > header,.skin-catalog-results > header,.stats-collection > .stats-section-heading,.artist-discography-heading) {
 padding:14px 18px; border:1px solid var(--theme-tube-unlit); border-radius:12px; background:var(--theme-surface);
}
@media (max-width:1365px), (max-height:800px) {
 .site-shell :is(.home-section-heading,.global-search-group > header,.catalog-results-heading,.artist-directory-results > header,.skin-catalog-results > header,.stats-collection > .stats-section-heading,.artist-discography-heading) h2 { font-size:24px; line-height:1.25; }
}
@media (max-width:639px) {
 .site-shell :is(.home-section-heading,.global-search-group > header,.catalog-results-heading,.artist-directory-results > header,.skin-catalog-results > header,.stats-collection > .stats-section-heading,.artist-discography-heading) { padding:12px 14px; }
 .site-shell :is(.home-section-heading,.global-search-group > header,.catalog-results-heading,.artist-directory-results > header,.skin-catalog-results > header,.stats-collection > .stats-section-heading,.artist-discography-heading) h2 { font-size:21px; }
}

.page-content:has(.contact-sections) > .beatori-hero-container { max-width:960px; }
@media (max-width:639px) {
 .policy-navigation { flex-wrap:nowrap; overflow-x:auto; min-width:0; max-width:100%; scrollbar-width:thin; }
 .policy-navigation a { flex:0 0 auto; white-space:nowrap; }
}