/* IRG design system
   Instant Reality Gaming — League custom 5v5 inhouses
   Include on every page: <link rel="stylesheet" href="css/styles.css">
*/

@import url("tokens.css");
@import url("themes.css");

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-panel[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
}

.skip-link:focus {
  top: var(--space-4);
}

.container {
  width: min(100% - var(--space-8), var(--container));
  margin-inline: auto;
}

main,
#content {
  flex: 1;
  /* Clear fixed .site-header. Do not rely on this alone when .section is present —
     .section's padding shorthand overrides padding-top (higher specificity). */
  padding-top: var(--header-offset);
}

/* Typography scale */
.display {
  font-size: clamp(2rem, 6vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.display--brand {
  color: var(--color-accent);
}

.h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.lede {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.muted {
  color: var(--color-text-muted);
}

.subtle {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.center {
  text-align: center;
}

.irg-readonly-banner {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: var(--text-sm);
  color: #1a1a12;
  background: #e8c547;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--irg-btn-padding-y, 0) var(--irg-btn-padding-x, var(--space-4));
  border: none;
  border-radius: var(--irg-btn-radius, var(--radius-md));
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--irg-btn-font-weight, var(--weight-medium));
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-float-sm);
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease), filter var(--ease);
}

.btn:hover {
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-float-sm-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-lg {
  min-height: 2.75rem;
  padding: 0 var(--space-5);
}

.btn-ghost {
  background: var(--color-surface);
  border: none;
  box-shadow: var(--shadow-float-sm);
}

.btn-ghost:hover {
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-float-sm-hover);
}

.btn-discord {
  background: var(--color-discord);
  box-shadow: var(--shadow-float-sm);
}

.btn-discord:hover {
  background: var(--color-discord-hover);
  box-shadow: var(--shadow-float-sm-hover), 0 0 0 1px rgba(88, 101, 242, 0.5);
  transform: translateY(-1px);
}

.btn-discord:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-float-sm), 0 0 0 4px rgba(88, 101, 242, 0.35);
}

.btn-accent {
  background: var(--irg-btn-primary-bg, var(--color-accent));
  color: var(--irg-btn-primary-text, #111);
  box-shadow: var(--shadow-float-sm);
}

.btn-accent:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-float-sm-hover), 0 0 0 1px rgba(182, 255, 42, 0.45);
  transform: translateY(-1px);
}

.btn-accent:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-float-sm), 0 0 0 4px var(--color-accent-dim);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  border: none;
  background: rgba(16, 16, 20, 0.78);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-nav);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: min(100% - var(--space-8), var(--container));
  margin-inline: auto;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 0;
}

.brand img {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.brand__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-accent-deep);
  white-space: nowrap;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.nav a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: inherit;
  cursor: pointer;
  transition: background var(--ease-ui), color var(--ease-ui);
}

.nav .irg-icon,
.nav-trigger .irg-icon {
  opacity: 0.75;
  transition: opacity var(--ease-ui), color var(--ease-ui);
}

.nav a:hover .irg-icon,
.nav a[aria-current="page"] .irg-icon,
.nav-trigger:hover .irg-icon,
.nav-item:hover > .nav-trigger .irg-icon,
.nav-trigger[aria-current="page"] .irg-icon {
  opacity: 1;
  color: var(--color-accent);
}

.nav a:hover,
.nav a[aria-current="page"],
.nav-trigger:hover,
.nav-item:hover > .nav-trigger,
.nav-item:focus-within > .nav-trigger,
.nav-trigger[aria-current="page"] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.nav a:focus-visible,
.nav-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 12rem;
  padding-top: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease), visibility var(--ease);
}

.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown__inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  border: none;
  border-radius: var(--radius-md);
  background: rgba(18, 18, 20, 0.98);
  box-shadow: var(--shadow-float);
}

.nav-dropdown a,
.nav-dropdown .nav-trigger {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: left;
}

.nav-item--nested .nav-dropdown--nested {
  top: 0;
  left: 100%;
  padding-top: 0;
  padding-left: var(--space-1);
}

.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  box-shadow: var(--shadow-float-sm);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1rem;
  height: 1.5px;
  background: var(--color-text);
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -5px;
}

.nav-toggle span::after {
  top: 5px;
}

.mobile-panel {
  display: none;
  position: fixed;
  top: var(--header-offset);
  right: 0;
  left: 0;
  z-index: var(--z-header);
  border: none;
  background: var(--color-bg);
  padding: var(--space-4);
  box-shadow: var(--shadow-nav);
  max-height: calc(100svh - var(--header-offset));
  overflow: auto;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity var(--ease-out), transform var(--ease-out);
}

.mobile-panel.is-open {
  display: block;
  opacity: 1;
  transform: none;
}

.mobile-panel a,
.mobile-panel .btn {
  width: 100%;
  margin-bottom: var(--space-2);
  text-align: left;
}

.mobile-panel .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.mobile-panel .nav-link--toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mobile-panel .nav-link--toggle[aria-expanded="true"],
.mobile-panel .nav-link[aria-current="page"] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.mobile-subnav {
  margin: 0 0 var(--space-2) var(--space-4);
  padding-left: var(--space-3);
  border: none;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.08);
}

.mobile-subnav .nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: min(40rem, 88svh);
  padding: var(--space-16) var(--space-4) var(--space-12);
  overflow: hidden;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.2) 42%, var(--color-bg) 100%),
    url("../assets/cosmetics/banners/banner-summoners-rift.png") center / cover no-repeat;
  filter: saturate(1.05) brightness(0.72);
}

/* Homepage: centered logo only — no background image */
.hero--home {
  justify-content: flex-start;
  min-height: min(28rem, 60svh);
  padding: calc(var(--header-offset) + var(--space-10)) 0 var(--space-12);
  background: var(--color-bg);
}

.hero--home .hero__media {
  display: none;
}

.hero--home .hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
}

.hero--home .hero__brand {
  width: clamp(7rem, 20vw, 12rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}

.hero--home .hero__subtitle {
  margin: 0;
  max-width: 36rem;
  line-height: 1.5;
  text-align: center;
}

.hero--home .hero__actions {
  margin: 0;
}

.hero--home .hero__meta {
  margin: 0;
}

.queue-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.queue-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.h1.display,
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin-top: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.hero__meta {
  margin-top: var(--space-4);
}

.sides {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.side-blue {
  color: var(--color-blue-side);
}

.side-red {
  color: var(--color-red-side);
}

/* Sections / cards */
.section {
  padding: var(--space-section-y) var(--space-4);
}

/* Restore header clearance wiped by .section { padding } shorthand */
main.section,
#content.section,
main#content.section {
  padding-top: calc(var(--header-offset) + var(--space-section-y));
}

.section-head {
  max-width: 36rem;
  margin: 0 auto var(--space-section-head);
  text-align: center;
}

.section-head p {
  margin-top: var(--space-3);
}

.section-head--left {
  max-width: none;
  margin: 0 0 var(--space-6);
  text-align: left;
}

.section-head__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.section-head--left .section-head__title {
  justify-content: flex-start;
}

.section-head__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.9;
}

.home-split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

/* Home sections: horizontal inset comes from .container (matches header / other pages) */
#announcements.section {
  padding-inline: 0;
}

#current-games.section {
  padding-inline: 0;
}

/* Announcements (2× prior width) + Discord under header Sign in (right of container) */
#announcements .container.home-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  width: min(100% - var(--space-8), var(--container));
  max-width: var(--container);
  margin-inline: auto;
}

#announcements .home-split > :first-child {
  flex: 1 1 44rem;
  max-width: 44rem;
  width: 100%;
}

#announcements .home-split > .discord-widget,
#announcements .home-split > aside.discord-widget {
  flex: 0 0 16rem;
  max-width: 16rem;
  width: 100%;
  margin-left: auto;
}

.home-split > * {
  position: relative;
  inset: auto;
  float: none;
  min-width: 0;
  box-sizing: border-box;
}

.home-split > :first-child {
  flex: 1 1 20rem;
  max-width: 100%;
}

.home-split > .discord-widget,
.home-split > aside.discord-widget {
  flex: 1 1 16rem;
  max-width: min(22rem, 100%);
  width: 100%;
  position: static;
  top: auto;
}

@media (min-width: 1024px) {
  .home-split > .discord-widget,
  .home-split > aside.discord-widget {
    position: sticky;
    top: calc(var(--header-offset) + var(--space-6));
    flex: 0 1 22rem;
  }

  #announcements .home-split > .discord-widget,
  #announcements .home-split > aside.discord-widget {
    flex: 0 0 16rem;
    max-width: 16rem;
    margin-left: auto;
  }
}


.eyebrow {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.activity-grid {
  display: grid;
  gap: var(--space-4);
}

.activity-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-card);
  box-shadow: var(--shadow-float);
  transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.activity-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float-hover);
}

.activity-card .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

.activity-card--name {
  place-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.announcement-list {
  display: grid;
  gap: var(--space-4);
}

.announcement-card {
  display: grid;
  gap: var(--space-3);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-card);
  box-shadow: var(--shadow-float);
  transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.announcement-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float-hover);
}

.announcement-card__body {
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 9.9em;
}

.announcement-card.is-open .announcement-card__body {
  max-height: none;
}

.announcement-card__more {
  display: none;
  justify-self: start;
}

.announcement-card.has-overflow .announcement-card__more {
  display: inline-flex;
}

.discord-widget {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  box-shadow: var(--shadow-float);
}

.discord-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.discord-widget__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-surface);
  flex-shrink: 0;
}

.discord-widget__header h3 {
  margin: 0.15rem 0 0;
}

.discord-widget__channels {
  display: grid;
  gap: var(--space-3);
  max-height: 22rem;
  overflow: auto;
}

.discord-channel {
  display: grid;
  gap: var(--space-2);
}

.discord-channel__name {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discord-channel__name::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5L6 9H3v6h3l5 4V5zm7.5 7c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5L6 9H3v6h3l5 4V5zm7.5 7c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -0.05rem;
}

.discord-people {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-5);
  display: grid;
  gap: 0.35rem;
}

.discord-people li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.discord-people img {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-surface);
  flex-shrink: 0;
}

.discord-people span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-people .is-mute {
  color: var(--color-text-subtle);
}

.discord-empty {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  padding-left: var(--space-5);
}

.discord-widget .btn {
  width: 100%;
}

.activity-card__tag {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activity-card__tag.is-live {
  color: var(--color-accent);
}

.activity-card__tag.is-soon {
  color: var(--color-text-muted);
}

.grid-4 {
  display: grid;
  gap: var(--space-6);
}

.card-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
}

.card-icon--join {
  background: #1f3d2b;
}

.card-icon--queue {
  background: #1b2a44;
}

.card-icon--compete {
  background: #3b1d24;
}

.card-icon--history {
  background: #3d3420;
}

.placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}

.placeholder--rich {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.placeholder__icon {
  display: inline-flex;
  color: var(--color-accent);
  opacity: 0.85;
}

.placeholder__body {
  max-width: 28rem;
}

.lb-toolbar {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.lb-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.lb-toolbar__controls {
  justify-content: space-between;
}

.lb-toolbar__search-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
  max-width: 36rem;
}

.lb-search--compact {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 14rem;
}

.lb-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-float-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lb-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-text-subtle);
}

.lb-status[data-state="live"]::before {
  background: var(--color-accent);
  animation: irg-live-pulse 2.4s ease-in-out infinite;
}

.lb-status[data-state="offline"]::before {
  background: var(--color-red-side);
}

.lb-status[data-state="loading"]::before {
  background: var(--color-blue-side);
}

.lb-status[data-state="misconfigured"]::before {
  background: #fb923c;
}

.lb-search,
.lb-season {
  min-width: 12rem;
}

.lb-search input,
.lb-season select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lb-seg {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: none;
  box-shadow: var(--shadow-float-sm);
}

.lb-seg button {
  min-height: 2.1rem;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.lb-seg button.is-active,
.lb-seg button[aria-pressed="true"] {
  background: var(--color-text);
  color: #111;
}

.lb-th {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-medium);
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.lb-th:hover,
.lb-th.is-active {
  color: var(--color-text);
}

.lb-th::after {
  content: "";
  width: 0.65rem;
  font-size: 0.65rem;
  color: var(--color-accent);
}

.lb-th[aria-sort="ascending"]::after {
  content: "▲";
}

.lb-th[aria-sort="descending"]::after {
  content: "▼";
}

.lb-name {
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.lb-name__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.lb-name__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
  line-height: 1.2;
}

.lb-name__badges {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-self: flex-start;
  gap: 0.2rem;
  margin: 0;
  padding-top: 0.05rem;
  line-height: 0;
  flex-shrink: 0;
}

.lb-name__badges .irg-badge {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.lb-name__link {
  display: block;
  min-width: 0;
}

.lb-name__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
  text-align: left;
  min-width: 0;
}

.lb-name__identity .irg-name {
  display: block;
}

.lb-name__identity .irg-title {
  margin-top: 0;
  line-height: 1.15;
}

.lb-podium__card.has-cosmetic-banner {
  background-image:
    linear-gradient(rgba(5, 7, 12, 0.72), rgba(5, 7, 12, 0.78)),
    var(--irg-banner-image) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: #f4f4f5;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85);
}

/* Scrim + cover so any banner stays readable (inline bg uses --irg-banner-image). */
.lb-table tbody tr.has-cosmetic-banner {
  background-image:
    linear-gradient(
      90deg,
      rgba(5, 7, 12, 0.88) 0%,
      rgba(5, 7, 12, 0.78) 42%,
      rgba(5, 7, 12, 0.82) 100%
    ),
    var(--irg-banner-image) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank,
.lb-table tbody tr.has-cosmetic-banner .lb-name,
.lb-table tbody tr.has-cosmetic-banner .lb-name__identity,
.lb-table tbody tr.has-cosmetic-banner .lb-ign,
.lb-table tbody tr.has-cosmetic-banner .lb-solo,
.lb-table tbody tr.has-cosmetic-banner .lb-wr,
.lb-table tbody tr.has-cosmetic-banner td {
  color: #f4f4f5;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 1);
}

.lb-table tbody tr.has-cosmetic-banner .lb-ign {
  color: #e4e4e7;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank {
  color: #fafafa;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank--gold {
  color: #fde68a;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank--silver {
  color: #f4f4f5;
}

.lb-table tbody tr.has-cosmetic-banner .lb-rank--bronze {
  color: #fdba74;
}

.lb-table tbody tr.has-cosmetic-banner .irg-title {
  color: #fde68a;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 10px rgba(0, 0, 0, 0.9);
}

/* Gradient / effect names stay readable on banner backgrounds without stripping shop colors. */
.lb-table tbody tr.has-cosmetic-banner .irg-name--cosmetic {
  text-shadow: none !important;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.55));
}

.lb-table tbody tr.has-cosmetic-banner .irg-name:not(.irg-name--cosmetic),
.lb-table tbody tr.has-cosmetic-banner .lb-name__identity .irg-name:not(.irg-name--cosmetic) {
  color: #fafafa !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 1);
}

.lb-table tbody tr.has-cosmetic-banner .lb-wr {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.95),
    0 0 3px rgba(0, 0, 0, 1);
}

.lb-table tbody tr.has-cosmetic-banner .lb-solo {
  color: #f4f4f5;
}

.shop-card__visual--shop-art {
  position: relative;
  aspect-ratio: 4 / 1;
  width: auto;
  align-self: stretch;
  min-height: 0 !important;
  height: auto;
  margin-inline: calc(var(--space-4) * -1);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: 0.55rem;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  background: #0a0a0c;
  place-items: unset;
  border-radius: 0;
}

.shop-card__shop-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.shop-list-row__visual .shop-card__visual--shop-art,
.shop-list-row__visual .shop-card__visual--border {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.shop-list-row__visual .shop-card__shop-art,
.shop-list-row__visual .shop-border-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lb-ign {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: 1.15;
  margin: 0;
}

.lb-rank {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.lb-rank--gold {
  color: #fbbf24;
}

.lb-rank--silver {
  color: #d4d4d8;
}

.lb-rank--bronze {
  color: #d97706;
}

.lb-solo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.lb-solo img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
}

.lb-wr {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.lb-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-10) var(--space-4);
}

.lb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.table-wrap {
  overflow-x: auto;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

th {
  color: var(--color-text-subtle);
  font-weight: var(--weight-medium);
}

.form {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
  margin-inline: auto;
}

.form label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.queue-board {
  display: grid;
  gap: var(--space-6);
}

.queue-board--single {
  grid-template-columns: 1fr;
}

.game-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.queue-card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: 0;
  display: grid;
  box-shadow: var(--shadow-float), inset 4px 0 0 var(--color-accent);
}

.queue-card__header {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-card) var(--space-card) var(--space-4);
}

.queue-card__header .h3 {
  margin: 0;
}

.queue-card__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.queue-card__header .queue-count {
  margin-top: var(--space-2);
}

.queue-card__header .queue-meter {
  margin: var(--space-3) 0 0;
}

.queue-section {
  padding: var(--space-4) var(--space-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.queue-section__title {
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.queue-list {
  list-style: decimal;
  margin: 0;
  padding: 0 0 0 1.25rem;
  display: grid;
  gap: var(--space-2);
}

.queue-list--plain {
  list-style: none;
  padding-left: 0;
}

.queue-list a {
  color: var(--color-text);
}

.queue-list a:hover {
  color: var(--color-accent);
}

.queue-card__footer {
  margin: 0;
  padding: var(--space-3) var(--space-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.queue-card__footer a,
.queue-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  vertical-align: middle;
}

.queue-card__footer a:hover {
  color: var(--color-accent);
}

.queue-card .btn-discord {
  margin: 0 var(--space-card) var(--space-5);
}

.queue-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.queue-meter {
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  overflow: hidden;
}

.queue-meter span {
  display: block;
  height: 100%;
  background: var(--color-accent);
}

.pill {
  display: inline-flex;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: none;
  box-shadow: var(--shadow-float-xs);
}

.pill-live {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.game-chip {
  display: grid;
  gap: 0.15rem;
  min-width: 8rem;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

.game-chip:hover {
  background: var(--color-surface-hover);
}

.member-grid,
.achieve-grid {
  display: grid;
  gap: var(--space-4);
}

.member-card,
.achieve-card,
.login-panel,
.profile,
.team-col {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-5);
  box-shadow: var(--shadow-float);
  transition: box-shadow var(--ease);
}

.member-card,
.profile {
  position: relative;
}
.member-card {
  overflow: visible;
}
.profile {
  overflow: hidden;
}
.profile.has-cosmetic-banner:has(.profile-hero.irg-border),
.profile.has-cosmetic-banner:has(.profile-hero.irg-border--image) {
  overflow: visible !important;
}

.member-card.has-player-bg,
.profile.has-player-bg {
  min-height: 11rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  background-color: var(--color-bg);
  isolation: isolate;
}

.member-card.has-player-bg::after,
.profile.has-player-bg::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background-image: var(--player-bg);
  background-size: cover;
  background-position: var(--player-bg-pos, center right);
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.member-card.has-player-bg::before,
.profile.has-player-bg::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(9, 9, 11, 0.88) 0%,
    rgba(9, 9, 11, 0.58) 42%,
    rgba(9, 9, 11, 0.22) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.member-card.has-player-bg > *,
.profile.has-player-bg > * {
  position: relative;
  z-index: 2;
}

.member-card:hover {
  box-shadow: var(--shadow-float-hover);
}

.achieve-card:hover {
  box-shadow: var(--shadow-float-hover);
}

.member-card__rank {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.roster-row {
  display: grid;
  grid-template-columns: 2rem minmax(10rem, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 0.5rem 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  font-size: var(--text-sm);
}

.roster-row.has-cosmetic-banner,
.roster-panel.has-cosmetic-banner {
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  padding-inline: 0.75rem;
}

.roster-row.has-cosmetic-banner .subtle,
.roster-panel.has-cosmetic-banner .subtle {
  color: #e4e4e7;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 1);
}

.roster-row.has-cosmetic-banner .roster-row__name strong,
.roster-panel.has-cosmetic-banner .roster-row__name strong {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.75);
}

.roster-row__details {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.discord-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.discord-role {
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--text-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.member-card__footer {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.member-card .discord-roles {
  justify-content: flex-start;
}

.roster-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-surface);
}

.roster-row__name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.roster-row strong {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-check {
  display: inline-flex;
  color: var(--color-accent);
  flex-shrink: 0;
}

.roster-level {
  flex-shrink: 0;
  padding: 0.05rem 0.4rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--lvl-tint-bg, var(--color-bg));
  color: var(--lvl-tint-color, #86efac);
  font-size: var(--text-xs);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px var(--lvl-tint-ring, rgba(134, 239, 172, 0.35));
}

.roster-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.roster-panel {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  padding: var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.roster-avatar--lg {
  width: 4rem;
  height: 4rem;
}

.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--space-3);
  align-items: end;
  margin: 0 0 var(--space-6);
}

.lb-podium__card {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.lb-podium__card .irg-frame {
  margin: 0 auto var(--space-3);
}

.lb-podium__card--gold {
  min-height: 10rem;
  border-color: rgba(245, 197, 66, 0.45);
}

.stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .lb-podium,
  .roster-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .roster-row {
    grid-template-columns: 2rem 1fr;
  }

  .roster-row .subtle {
    grid-column: 2;
  }
}

.achieve-card.is-locked {
  opacity: 0.45;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.stat-row dt {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-row dd {
  margin: 0.2rem 0 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.team-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.team-col--blue {
  box-shadow: var(--shadow-float), inset 3px 0 0 var(--color-blue-side);
}

.team-col--red {
  box-shadow: var(--shadow-float), inset 3px 0 0 var(--color-red-side);
}

.login-panel {
  max-width: 36rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}

.section--account-form {
  padding-bottom: var(--space-16);
}

main.section.section--account-form,
#content.section.section--account-form {
  padding-top: calc(var(--header-offset) + var(--space-10));
}

.account-form-wrap {
  width: min(100%, 28rem);
  margin-inline: auto;
}

.account-form-card {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-8) var(--space-6);
  display: grid;
  gap: var(--space-6);
  box-shadow: var(--shadow-float);
}

.account-form-card__hero {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.account-form-card__avatar {
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%);
  color: #fff;
  overflow: hidden;
}

.account-form-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-form-card__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.account-form-card__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.account-form {
  display: grid;
  gap: var(--space-5);
}

.account-form__row {
  display: grid;
  gap: var(--space-4);
}

.account-form__field {
  display: grid;
  gap: var(--space-2);
}

.account-form__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.account-form__field input,
.account-form__field select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.account-form__field input:disabled,
.account-form__field select:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.92;
}

.account-form__field select {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) calc(50% - 0.15rem),
    calc(100% - 0.65rem) calc(50% - 0.15rem);
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.account-form__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
}

.account-form__hint a {
  color: var(--color-accent);
}

.account-form__hint a:hover {
  text-decoration: underline;
}

.account-form__flash {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: none;
  background: rgba(182, 255, 42, 0.1);
  font-size: var(--text-sm);
  text-align: center;
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.35);
}

.account-form__flash--error {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}

.account-form__actions {
  display: grid;
  gap: var(--space-3);
}

.account-form__actions .btn {
  width: 100%;
  justify-content: center;
}

.account-form__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.account-form__footer a {
  color: var(--color-text-muted);
}

.account-form__footer a:hover {
  color: var(--color-text);
}

@media (min-width: 640px) {
  .account-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Footer */
.site-footer {
  margin-top: auto;
  border: none;
  padding: var(--space-12) var(--space-4) var(--space-8);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35), 0 -2px 8px rgba(0, 0, 0, 0.2);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.site-footer a {
  color: #c4c4cc;
  font-size: var(--text-sm);
}

.site-footer a:hover {
  color: var(--color-text);
}

.site-footer .muted,
.site-footer__meta,
.site-footer__legal {
  color: var(--color-text-muted);
}

.site-footer__meta {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
}

@media (min-width: 768px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
  }

  .nav,
  .header-actions {
    display: flex;
  }

  .header-actions {
    justify-self: end;
  }

  .nav-toggle {
    display: none;
  }

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

  .queue-board:not(.queue-board--single),
  .member-grid,
  .achieve-grid,
  .team-grid,
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .grid-4,
  .activity-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* In nested editor Live view, sticky can cover content — keep static there */
.page-editor__live-view-body .home-split > .discord-widget,
.page-editor__live-view-body .home-split > aside.discord-widget {
  position: static;
  top: auto;
}


[hidden] {
  display: none !important;
}

.header-actions.is-authed [data-sign-in],
.mobile-panel.is-authed [data-sign-in-mobile] {
  display: none !important;
}

.header-actions:not(.is-authed) [data-account-menu],
.mobile-panel:not(.is-authed) [data-account-menu-mobile] {
  display: none !important;
}

.header-actions:not(.is-authed) [data-header-hud] {
  display: none !important;
}

/* IRG account & profile */
.account-menu { position: relative; flex-shrink: 0; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: max-content;
  min-width: max-content;
  flex-shrink: 0;
  height: 2.4rem;
  padding: 0.25rem 0.55rem 0.25rem 0.25rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  overflow: visible;
}
.account-trigger__avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  position: relative;
  z-index: 1;
}
.account-trigger__name {
  display: none;
}
.account-trigger__level {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.55rem;
  min-width: 3.25rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--lvl-tint-color, var(--color-accent, #b6ff2a));
  border-radius: var(--radius-full);
  background: var(--lvl-tint-bg, rgba(163, 230, 53, 0.12));
  border: none;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px var(--lvl-tint-ring, rgba(163, 230, 53, 0.3));
}

.lvl-tint--base {
  --lvl-tint-color: #a3e635;
  --lvl-tint-bg: rgba(163, 230, 53, 0.12);
  --lvl-tint-ring: rgba(163, 230, 53, 0.3);
}
.lvl-tint--green {
  --lvl-tint-color: #4ade80;
  --lvl-tint-bg: rgba(74, 222, 128, 0.14);
  --lvl-tint-ring: rgba(74, 222, 128, 0.35);
}
.lvl-tint--teal {
  --lvl-tint-color: #2dd4bf;
  --lvl-tint-bg: rgba(45, 212, 191, 0.14);
  --lvl-tint-ring: rgba(45, 212, 191, 0.35);
}
.lvl-tint--blue {
  --lvl-tint-color: #60a5fa;
  --lvl-tint-bg: rgba(96, 165, 250, 0.14);
  --lvl-tint-ring: rgba(96, 165, 250, 0.35);
}
.lvl-tint--violet {
  --lvl-tint-color: #c084fc;
  --lvl-tint-bg: rgba(192, 132, 252, 0.14);
  --lvl-tint-ring: rgba(192, 132, 252, 0.35);
}
.lvl-tint--gold {
  --lvl-tint-color: #fbbf24;
  --lvl-tint-bg: rgba(251, 191, 36, 0.16);
  --lvl-tint-ring: rgba(251, 191, 36, 0.4);
}
.lvl-tint--orange {
  --lvl-tint-color: #fb923c;
  --lvl-tint-bg: rgba(251, 146, 60, 0.16);
  --lvl-tint-ring: rgba(251, 146, 60, 0.4);
}
.lvl-tint--mythic {
  --lvl-tint-color: #f0abfc;
  --lvl-tint-bg: rgba(240, 171, 252, 0.18);
  --lvl-tint-ring: rgba(240, 171, 252, 0.45);
}
.account-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 12rem;
  padding: calc(0.35rem + var(--space-2)) var(--space-2) var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
  z-index: 40;
  display: none;
  gap: 0.15rem;
}
.account-dropdown__level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.55rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.account-dropdown__level-label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-dropdown__level-value {
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: var(--lvl-tint-color, #86efac);
  font-variant-numeric: tabular-nums;
}
.account-mobile__level {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}
.account-mobile__level span {
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: #86efac;
}
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown {
  display: grid;
}

/* Header HUD: Points + Level */
.header-hud {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.header-hud__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.header-hud__label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.header-hud__value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  min-width: 1.25rem;
  text-align: right;
}

.btn-sm {
  min-height: 1.85rem;
  padding: 0 0.65rem;
  font-size: var(--text-xs);
}

/* Achievement groups (profile) */
.achieve-groups {
  display: grid;
  gap: var(--space-6);
}
.achieve-group__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}
.achieve-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.achieve-card--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 16rem;
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
}
.achieve-card__main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}
.achieve-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.achieve-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}
.achieve-card__desc {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.achieve-card__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.achieve-card__actions {
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.achieve-reward {
  font-size: var(--text-xs);
  color: #86efac;
  white-space: nowrap;
}
.achieve-reward--none {
  color: var(--color-text-subtle);
}
.achieve-claim {
  min-width: 4.25rem;
}
.achieve-claim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.achieve-claim.is-ready {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.achieve-claim.is-ready:hover {
  background: rgba(182, 255, 42, 0.2);
}
.achieve-claim.is-claimed:disabled {
  opacity: 0.65;
}
.xp-bar--compact {
  flex: 1 1 4rem;
  max-width: 6rem;
  height: 0.35rem;
  margin: 0;
}

.account-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.35rem;
}
.account-dropdown a,
.account-dropdown button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  min-height: 2.5rem;
}
.account-dropdown a:hover,
.account-dropdown button:hover { background: var(--color-surface-hover); }
.account-dropdown a[href="/admin"] {
  color: var(--color-accent);
}
.account-mobile {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.account-mobile__links {
  display: grid;
  gap: 0.15rem;
}
.account-mobile__links a,
.account-mobile__links button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-mobile__links a:hover,
.account-mobile__links button:hover {
  background: var(--color-surface-hover);
  color: var(--color-accent);
}
.profile-shell { display: grid; gap: var(--space-6); }
.profile-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-tab {
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: box-shadow var(--ease), background var(--ease), color var(--ease);
}

.profile-tab:hover,
.profile-tab.is-active,
.profile-tab[aria-selected="true"] {
  box-shadow: var(--shadow-float-sm);
  color: var(--color-text);
  background: var(--color-surface-hover);
}
.profile-achieve-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.match-card-list {
  display: grid;
  gap: var(--space-4);
}
.match-card-list--compact {
  gap: var(--space-3);
}
.match-card {
  display: block;
  padding: var(--space-4);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease), background var(--ease);
}
.match-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--color-surface);
  transform: translateY(-1px);
}
.match-card--static {
  cursor: default;
}
.match-card--static:hover {
  transform: none;
}
.match-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  margin-inline: calc(-1 * var(--space-5, 1.25rem));
  margin-top: calc(-1 * var(--space-5, 1.25rem));
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.match-card--win .match-card__head {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.55), rgba(22, 163, 74, 0.35));
  color: #ecfdf5;
}
.match-card--loss .match-card__head {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.55), rgba(185, 28, 28, 0.35));
  color: #fef2f2;
}
.match-card--win .match-card__meta,
.match-card--loss .match-card__meta {
  color: inherit;
  opacity: 0.92;
}
.match-roster__name.is-self {
  color: #f5c542;
  font-weight: var(--weight-semibold);
}
.match-card__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.match-card__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.match-meta__result--win { color: #86efac; }
.match-meta__result--loss { color: #fca5a5; }
.match-teams {
  display: grid;
  gap: var(--space-4);
}
.match-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.match-team-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.match-team-dot--blue { background: var(--color-blue-side); }
.match-team-dot--red { background: var(--color-red-side); }
.match-team--blue {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-blue-side);
}
.match-team--red {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-red-side);
}
.match-team--winner {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: calc(-1 * var(--space-2));
}
.match-team--blue.match-team--winner {
  background: rgba(59, 130, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
}
.match-team--red.match-team--winner {
  background: rgba(239, 68, 68, 0.14);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}
.match-card__number,
.match-meta__number {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.match-opgg-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.match-opgg-btn {
  padding: 0.2rem 0.55rem;
  font-size: var(--text-xs);
  line-height: 1.4;
}
.match-roster__opgg {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}
.match-roster__opgg:hover {
  color: var(--color-accent);
}
.match-sr-table-wrap {
  margin-top: var(--space-3);
}
.match-sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.match-sr-table th,
.match-sr-table td {
  padding: var(--space-2) var(--space-3);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}
.match-sr-table th:last-child,
.match-sr-table td:last-child {
  text-align: right;
}
.match-sr-delta--up { color: #86efac; }
.match-sr-delta--down { color: #fca5a5; }
.match-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.match-roster__player {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.6rem;
}
.match-role-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.match-role-icon--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
}
.match-roster__sep {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1;
}
.match-roster__name {
  font-size: var(--text-sm);
}
.match-roster__name a {
  color: var(--color-text);
  text-decoration: none;
}
.match-roster__name a:hover {
  color: var(--color-accent);
}
.match-champ-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.match-roster__kda {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.match-scoreboard-wrap {
  margin-top: 0.4rem;
}
.match-scoreboard {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.match-scoreboard th,
.match-scoreboard td {
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: middle;
}
.match-scoreboard th {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}
.match-scoreboard td:nth-child(4),
.match-scoreboard td:nth-child(5),
.match-scoreboard td:nth-child(6),
.match-scoreboard td:nth-child(7),
.match-scoreboard th:nth-child(4),
.match-scoreboard th:nth-child(5),
.match-scoreboard th:nth-child(6),
.match-scoreboard th:nth-child(7) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.match-detail__summary {
  margin-top: 0.35rem;
  margin-bottom: var(--space-5);
}
.match-detail .match-teams {
  margin-top: var(--space-4);
}
.achieve-card--unlocked {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.35);
}
.profile-panel {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-card);
  box-shadow: var(--shadow-float);
}
.profile-overview { display: grid; gap: var(--space-6); position: relative; }
.profile-overview.irg-theme,
.profile.irg-theme { position: relative; }
.profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: none;
  min-height: 12rem;
  padding: var(--space-16) var(--space-card) var(--space-card);
  display: flex;
  align-items: end;
  gap: var(--space-5);
  background-color: var(--color-bg-elevated);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-float);
}
.profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(9, 9, 11, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.profile-hero > * { position: relative; z-index: 2; }
.profile-hero__avatar { border-radius: 50%; border: 2px solid var(--color-border); }
.profile-hero__id { display: grid; gap: 0.2rem; min-width: 0; }
.profile-hero__id .h2 { margin: 0; }
.profile-hero__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.profile-hero__name-row .h2 { margin: 0; min-width: 0; }
.profile-hero__discord-roles { justify-content: flex-start; }
.profile-hero--compact {
  min-height: 0;
  padding: var(--space-5);
  align-items: center;
}
.profile-hero--compact::before { display: none; }
.profile.has-cosmetic-banner > .profile-hero,
.profile-overview.has-cosmetic-banner > .profile-hero {
  border: 0;
  border-radius: var(--radius-lg);
  min-height: 0;
  padding: 0;
  background-color: transparent;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}
/* Full-bleed flush banner on member profile (break out of .container gutters) */
#member-app.container .profile.has-cosmetic-banner {
  overflow: hidden;
}
/* Borders must bleed past the profile outline — never clip the frame ornaments */
.profile.has-cosmetic-banner:has(.profile-hero.irg-border),
.profile-overview.has-cosmetic-banner:has(.profile-hero.irg-border),
#member-app.container .profile.has-cosmetic-banner:has(.profile-hero.irg-border),
.profile.has-cosmetic-banner:has(.profile-hero.irg-border--image),
.profile-overview.has-cosmetic-banner:has(.profile-hero.irg-border--image),
#member-app.container .profile.has-cosmetic-banner:has(.profile-hero.irg-border--image),
.section:has(.profile-hero.irg-border--image),
.container:has(.profile-hero.irg-border--image),
#content:has(.profile-hero.irg-border--image) {
  overflow: visible !important;
}
.profile.has-cosmetic-banner > .profile-hero.irg-border,
.profile-overview.has-cosmetic-banner > .profile-hero.irg-border,
.profile.has-cosmetic-banner > .profile-hero.irg-border--image,
.profile-overview.has-cosmetic-banner > .profile-hero.irg-border--image {
  overflow: visible !important;
}
/* Room for top/bottom border ornaments outside the banner plane */
.profile.has-cosmetic-banner:has(.profile-hero.irg-border--image),
.profile-overview.has-cosmetic-banner:has(.profile-hero.irg-border--image) {
  padding-block: clamp(1.1rem, 3.2vw, 2rem);
}
#member-app.container .profile.has-cosmetic-banner > .profile-hero {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}
.profile-hero {
  position: relative;
}
.profile-hero__title-corner {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  margin: 0;
  text-align: right;
  max-width: 40%;
}
.profile-hero__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}
.member-card,
.panel-card {
  overflow: visible;
}
.member-card__avatar {
  overflow: visible;
}
.roster-row strong {
  overflow: visible;
}
.lb-podium__card .irg-frame,
.lb-name__avatar {
  overflow: visible;
}
.lb-name a,
.roster-row a,
.roster-panel a,
.member-card a,
.lb-podium__card a {
  color: inherit;
  text-decoration: none;
}
.member-card.has-cosmetic-banner {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.profile-level-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: none;
  box-shadow: var(--shadow-float);
}
.profile-level-card__label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.profile-level-card__value {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  margin: 0.25rem 0 0.75rem;
  color: var(--lvl-tint-color, inherit);
}
.xp-bar {
  height: 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.xp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e9d5ff 0%, #7c3aed 55%, #3b0764 100%);
}
.xp-count {
  color: #f5c542;
  font-variant-numeric: tabular-nums;
}
.profile-hero__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.profile-hero__avatar--empty {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: rgba(255,255,255,0.04);
}
.profile-hero__identity .h2 {
  margin: 0;
}
.profile-hero__featured {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  transform: none;
}
.profile-hero__featured .irg-badge,
.profile-hero__featured .irg-badge--empty {
  width: 32px;
  height: 32px;
}
.irg-badge {
  display: block;
  object-fit: contain;
  image-rendering: auto;
  background: transparent;
}
.irg-badge.is-locked {
  filter: grayscale(0.55) brightness(0.82);
  opacity: 0.88;
}
.irg-badge--sm { width: 36px; height: 36px; }
.irg-badge--md { width: 56px; height: 56px; }
.irg-badge--lg { width: 72px; height: 72px; }
.irg-badge--empty {
  width: 56px;
  height: 56px;
  border: 1px dashed var(--color-border);
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
.featured-board {
  display: grid;
  gap: var(--space-3);
}
.featured-board__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.featured-slot {
  width: 7.5rem;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: default;
}
button.featured-slot { cursor: pointer; }
.featured-slot.is-locked {
  opacity: 0.55;
}
.featured-slot.is-unlock {
  opacity: 1;
  border: 2px dashed rgba(182, 255, 42, 0.7);
  background: rgba(182, 255, 42, 0.08);
  box-shadow: inset 0 0 0 1px rgba(182, 255, 42, 0.18);
}
.featured-slot.is-unlock .featured-slot__unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0.2rem 0.55rem;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(9, 9, 11, 0.55);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(182, 255, 42, 0.65);
}
.featured-slot.is-locked .featured-slot__unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0.2rem 0.55rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.featured-slot--picker {
  justify-content: center;
  min-height: 4.5rem;
}
.featured-slot select {
  width: 100%;
  font-size: var(--text-xs);
  background: var(--color-bg);
  color: var(--color-text);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.3rem;
}
.loadout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}
.loadout-tile {
  min-height: 5.5rem;
  padding: var(--space-4);
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
}
.profile-stat-block {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    url("/assets/brand/irg-mark.png") right 0.6rem center / 5.5rem no-repeat;
  box-shadow: var(--shadow-float);
}
.profile-stat-block--cq { box-shadow: var(--shadow-float), inset 3px 0 0 #a78bfa; }
.profile-stat-block--nq { box-shadow: var(--shadow-float), inset 3px 0 0 #60a5fa; }
.stat-wl--win { color: #86efac; font-weight: 700; }
.stat-wl--loss { color: #fca5a5; font-weight: 700; }
.stat-wl--good { color: #86efac; }
.stat-wl--bad { color: #fca5a5; }
.achieve-groups { display: grid; gap: var(--space-10); }
.achieve-group__title {
  margin: 0 0 var(--space-4);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.achieve-group--green .achieve-group__title,
.achieve-group--green .achieve-card {
  color: #86efac;
}
.achieve-group--green .achieve-card {
  color: inherit;
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(74, 222, 128, 0.45);
}
.achieve-group--purple .achieve-group__title { color: #c4b5fd; }
.achieve-group--purple .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(167, 139, 250, 0.45);
}
.achieve-group--blue .achieve-group__title { color: #93c5fd; }
.achieve-group--blue .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(96, 165, 250, 0.45);
}
.achieve-group--gold .achieve-group__title { color: #f5c542; }
.achieve-group--gold .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(245, 197, 66, 0.4);
}
.achieve-group--orange .achieve-group__title { color: #fdba74; }
.achieve-group--orange .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(251, 146, 60, 0.45);
}
.achieve-group--silver .achieve-group__title { color: #e4e4e7; }
.achieve-group--silver .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(212, 212, 216, 0.4);
}
.achieve-group--teal .achieve-group__title { color: #5eead4; }
.achieve-group--teal .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(45, 212, 191, 0.4);
}
.achieve-group--pink .achieve-group__title { color: #f9a8d4; }
.achieve-group--pink .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(244, 114, 182, 0.4);
}
.achieve-group--discord .achieve-group__title { color: #a5b4fc; }
.achieve-group--discord .achieve-card {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(129, 140, 248, 0.45);
}
.achieve-card--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 1 1 18rem;
  max-width: 26rem;
  padding: var(--space-3) var(--space-4);
}
.badge-catalog {
  display: grid;
  gap: var(--space-8);
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-3);
}
.badge-cell {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
}
.badge-cell--admin,
.achieve-card--admin {
  position: relative;
}
.profile-badge-admin {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}
.shop-modal__panel--badge-editor {
  width: min(100%, 28rem);
}
.profile-badge-editor__preview {
  display: grid;
  place-items: center;
}
.profile-badge-editor__url {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  word-break: break-all;
}
.profile-badge-editor__library {
  display: grid;
  gap: var(--space-2);
}
.profile-badge-editor__library > input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  box-shadow: var(--shadow-float-sm);
}
.profile-badge-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 0.45rem;
  max-height: 13rem;
  overflow: auto;
  padding: 0.15rem;
}
.profile-badge-editor__card {
  padding: 0.35rem;
  gap: 0;
}
.profile-badge-editor__card .shop-asset-card__preview {
  aspect-ratio: 1;
  min-height: 0;
  padding: 0.25rem;
}
.profile-badge-editor__card strong,
.profile-badge-editor__card .subtle,
.profile-badge-editor__card .shop-asset-card__actions {
  display: none;
}
.badge-cell p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.profile-section { display: grid; gap: var(--space-3); }
.profile-inventory {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.profile-inventory__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: 0.5rem;
}
.profile-inventory__nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
}
.profile-inventory__nav button:hover,
.profile-inventory__nav button.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}
.profile-inventory__main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.profile-inventory__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
@media (max-width: 720px) {
  .profile-inventory {
    grid-template-columns: 1fr;
  }
  .profile-inventory__nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .profile-inventory__nav button {
    width: auto;
  }
}
.profile-stat-grid { display: grid; gap: var(--space-4); }
.profile-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.badge-chip, .badge-card {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.activity-list li {
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--space-3);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.irg-public-card {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-float);
}
@media (min-width: 768px) {
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .match-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.header-status {
  margin-right: 0.35rem;
}
.section--admin {
  padding-bottom: var(--space-8);
}

main.section.section--admin,
#content.section.section--admin {
  padding-top: calc(var(--header-offset) + var(--space-8));
}
.section--admin .section-head {
  margin-bottom: var(--space-5);
}
.section--admin .section-head p {
  margin-top: 0.35rem;
}
.admin-shell {
  display: grid;
  gap: var(--space-4);
  max-width: 80rem;
}
.container.admin-shell.admin-shell--wide {
  width: calc(100% - var(--space-8));
  max-width: none;
}
.admin-card,
.admin-section {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.025);
}
.admin-card h2,
.admin-card h3,
.admin-slide > .h3 {
  margin: 0;
  font-size: var(--text-md);
}
.admin-card p,
.admin-slide > .muted,
.admin-slide > .subtle {
  margin: 0;
}
.admin-card__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}
.admin-teams {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .admin-teams { grid-template-columns: 1fr 1fr; }
}
.admin-teams h4 {
  margin: 0 0 0.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.admin-players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-size: var(--text-sm);
}
.admin-actions,
.admin-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.admin-form {
  display: grid;
  gap: 0.65rem;
}
.admin-form input:not([type="checkbox"]):not([type="radio"]),
.admin-form select,
.admin-form textarea,
.admin-inline input:not([type="checkbox"]):not([type="radio"]),
.admin-inline select {
  width: 100%;
  min-height: 2.15rem;
  padding: 0.4rem 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.55rem;
  background: var(--color-bg-elevated);
  color: var(--color-text);
}
.admin-inline input,
.admin-inline select {
  width: auto;
  min-width: 9rem;
}
.admin-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.admin-flash,
.irg-toast {
  padding: 0.55rem 0.8rem;
  border-radius: 0.65rem;
  border: none;
  background: rgba(182, 255, 42, 0.1);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.35);
}
.irg-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 80;
  display: grid;
  gap: 0.45rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.irg-toast-stack .irg-toast {
  animation: irg-toast-in 0.25s ease-out, irg-toast-out 0.45s ease-in 2.3s forwards;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: rgba(12, 16, 22, 0.92);
  border-color: rgba(182, 255, 42, 0.45);
  color: var(--color-text);
}
.irg-toast--bad {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}
@keyframes irg-toast-in {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes irg-toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.admin-flash.is-busy {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.04);
}
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.admin-kpis div {
  padding: 0.55rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
}
.admin-kpis dt {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-kpis dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.admin-games {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .admin-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.admin-game-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  text-align: left;
  padding: 1rem 1.05rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  color: inherit;
  cursor: pointer;
  min-height: 8.5rem;
}
.admin-game-card:hover:not(:disabled) {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(182, 255, 42, 0.08);
}
.admin-game-card:disabled,
.admin-game-card.is-soon {
  cursor: not-allowed;
  opacity: 0.5;
}
.admin-game-card__kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.admin-game-card.is-soon .admin-game-card__kicker {
  color: var(--color-text-subtle);
}
.admin-console {
  display: grid;
  gap: 0.75rem;
}
.admin-console__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}
.admin-console__top h2 {
  margin: 0;
}
.admin-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-chip {
  border: none;
  box-shadow: var(--shadow-float-sm);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.7rem;
  font-size: var(--text-xs);
}
.admin-chip.is-on {
  border-color: rgba(182, 255, 42, 0.55);
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.admin-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-slider {
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 1rem;
  background: rgba(9, 9, 11, 0.55);
}
.admin-slider__nav {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  padding: 0.45rem 0.55rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
}
.admin-slider__nav::-webkit-scrollbar { display: none; }
.admin-slider__tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: 0.38rem 0.7rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-size: var(--text-sm);
}
.admin-slider__tab.is-on {
  background: rgba(182, 255, 42, 0.14);
  color: var(--color-text);
}
.admin-slider__stage {
  position: relative;
}
.admin-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.86);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.admin-slider__arrow.is-prev { left: 0.2rem; }
.admin-slider__arrow.is-next { right: 0.2rem; }
.admin-slider__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.admin-slider__viewport {
  height: min(34rem, calc(100dvh - 12.5rem));
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.admin-slider__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.admin-slider__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.admin-slider__track.is-animating {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0.75rem 1rem 0.85rem 0.85rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  scrollbar-width: thin;
}
.admin-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0 0.6rem;
}
.admin-slider__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
  padding: 0;
}
.admin-slider__dot.is-on {
  background: var(--color-accent);
  transform: scale(1.2);
}
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0 0.1rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.admin-pager button {
  min-width: 2rem;
  height: 2rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.admin-pager button:disabled {
  opacity: 0.35;
}
.admin-grid-2 {
  display: grid;
  gap: 0.65rem;
}
@media (min-width: 800px) {
  .admin-grid-2 { grid-template-columns: 1fr 1fr; }
}
.admin-cmd {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-cmd:last-child { border-bottom: 0; }
.admin-cmd__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
}
.admin-cmd select {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.45rem;
  background: var(--color-bg-elevated);
  color: var(--color-text);
}
.admin-form select[multiple],
.admin-cmd select[multiple] {
  min-height: 7rem;
}
.admin-toggle {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  font-size: var(--text-sm);
}
.admin-lol-stack {
  display: grid;
  gap: var(--space-3);
}
.admin-lol-card {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.admin-lol-card__lead {
  margin: 0.25rem 0 var(--space-3);
  font-size: var(--text-sm);
}
.admin-lol-card__note {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
}
.admin-lol-block__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-lol-grid-tight {
  gap: var(--space-3);
}
.admin-lol-field {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
}
.admin-lol-field__label {
  font-weight: 500;
  color: var(--color-text);
}
.admin-lol-field__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.admin-lol-field input,
.admin-lol-field select,
.admin-lol-field textarea,
.admin-form .admin-lol-field input,
.admin-form .admin-lol-field select,
.admin-form .admin-lol-field textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-float-sm);
  font: inherit;
}
.admin-lol-inline-field {
  margin-top: var(--space-3);
  max-width: 20rem;
}
.admin-lol-channel-editor {
  display: grid;
  gap: var(--space-2);
  max-width: 28rem;
}
.admin-lol-channel-current {
  margin: 0;
  font-size: var(--text-sm);
}
.admin-lol-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.admin-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.admin-check-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  text-align: left;
}
.admin-form label.admin-check-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.admin-check-card:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), var(--shadow-float-sm);
}
.admin-check-card--flat {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.admin-check-card--role {
  padding: 0.55rem 0.75rem;
}
.admin-check-card__text {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text);
}
.admin-check-card__box {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  max-width: 1rem;
  max-height: 1rem;
  flex: 0 0 1rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
  appearance: auto;
}
.admin-form .admin-check-card__box {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  max-width: 1rem;
  max-height: 1rem;
  padding: 0;
  box-shadow: none;
  border-radius: 0.2rem;
  background: transparent;
  flex: 0 0 1rem;
  align-self: center;
}
.admin-role-list > li.muted {
  padding: var(--space-2);
  font-size: var(--text-sm);
}
.admin-cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.admin-cmd-head .h3 {
  margin: 0;
}
.admin-cmd-head .admin-pager {
  flex: 0 0 auto;
  padding: 0;
}
.admin-lol-stack--commands .admin-lol-card {
  padding-inline: var(--space-2);
}
.admin-check-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}
.admin-check-option input[type="checkbox"] {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}
.admin-check-option span {
  color: var(--color-text);
}
.admin-check-option--inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0;
}
.admin-check-option--inline input[type="checkbox"] {
  margin: 0;
}
.admin-role-picks {
  display: grid;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.admin-role-picks--compact {
  max-height: 8rem;
}
.admin-cmd-list {
  display: grid;
  gap: var(--space-2);
}
.admin-cmd-acc {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.admin-cmd-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  user-select: none;
}
.admin-cmd-acc__summary::-webkit-details-marker {
  display: none;
}
.admin-cmd-acc__summary::before {
  content: "▸";
  margin-right: 0.35rem;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.admin-cmd-acc[open] .admin-cmd-acc__summary::before {
  transform: rotate(90deg);
}
.admin-cmd-acc__title {
  font-weight: 600;
  color: var(--color-text);
}
.admin-cmd-acc__status {
  font-size: 0.75rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
}
.admin-cmd-acc__status.is-on {
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.admin-cmd-acc__body {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-cmd-acc__enabled {
  margin-top: var(--space-2);
}
.admin-cmd-acc__note {
  margin: 0;
  font-size: 0.8125rem;
}
.admin-form label:not(.admin-lol-field):not(.admin-check-option):not(.admin-check-card) {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
}
.admin-form label:not(.admin-lol-field):not(.admin-check-option):not(.admin-check-card) select {
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-float-sm);
}
@media (prefers-reduced-motion: reduce) {
  .admin-slider__track.is-animating { transition: none; }
}
.match-card.is-highlight {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Shop + cosmetics — catalog pane scrolls; page can still scroll outside it.
   Beat main#content.section padding-top with matching ID specificity. */
main.section.section--shop,
#content.section.section--shop,
main#content.section.section--shop {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(100svh - var(--header-offset));
  height: calc(100svh - var(--header-offset));
  max-height: calc(100svh - var(--header-offset));
  margin-top: 0;
  padding-top: calc(var(--header-offset) + var(--space-2));
  padding-bottom: var(--space-3);
  overflow: hidden;
}
.section--shop .section-head--shop,
.section--shop .section-head.section-head--shop {
  flex: 0 0 auto;
  margin: 0 auto var(--space-2);
}
.shop-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  padding-inline: 0;
  overflow: hidden;
}
.shop-shell {
  /* Nav + catalog as one centered band — equal left/right page margins */
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: min(100% - var(--space-8), calc(var(--container) + 11.5rem + var(--space-5)));
  margin-inline: auto;
  padding-inline: 0;
}
.shop-float-nav {
  position: relative;
  top: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 11.5rem;
  max-height: 100%;
  min-height: 0;
  margin-left: 0;
  padding: var(--space-2);
  overflow-x: hidden;
  overflow-y: auto;
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.shop-float-nav::-webkit-scrollbar {
  width: 6px;
}
.shop-float-nav::-webkit-scrollbar-track {
  background: transparent;
}
.shop-float-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.shop-float-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}
.shop-float-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.shop-float-nav a:hover,
.shop-float-nav a.is-active {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.shop-float-nav__rule {
  display: block;
  height: 1px;
  margin: var(--space-2) var(--space-2);
  background: var(--color-border);
}
.shop-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-width: 0;
  min-height: 0;
  max-width: none;
  height: 100%;
  max-height: 100%;
  padding-bottom: 0;
  overflow: hidden;
}
.shop-main__top,
.shop-main__chrome {
  min-width: 0;
}
.shop-main__top {
  padding-bottom: var(--space-1);
}
.shop-main__chrome {
  padding-bottom: var(--space-3);
}
.shop-main__top .shop-main__chrome {
  padding-bottom: 0;
}
.shop-catalog {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: auto;
  padding-right: 4px;
  padding-bottom: var(--space-8);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) rgba(255, 255, 255, 0.04);
  -webkit-overflow-scrolling: touch;
}
.shop-catalog::-webkit-scrollbar {
  width: 8px;
}
.shop-catalog::-webkit-scrollbar-track {
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
.shop-catalog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.32);
}
.shop-catalog::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.48);
}
.shop-staff-toast {
  position: fixed;
  top: calc(var(--header-offset) + var(--space-3));
  left: 50%;
  z-index: 100;
  width: min(28rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.shop-staff-toast .admin-flash {
  pointer-events: auto;
  margin: 0;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
}
.shop-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.shop-main__chrome .shop-head {
  margin-bottom: var(--space-2);
}
.shop-balance strong { color: var(--color-accent); font-size: 1.4rem; }
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: 0;
}
.shop-toolbar__search {
  flex: 1 1 14rem;
  min-width: 10rem;
}
.shop-toolbar__search input,
.shop-toolbar__filter select,
.shop-toolbar__sort select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
}
.shop-toolbar__filter,
.shop-toolbar__sort {
  flex: 0 0 10rem;
}
.shop-toolbar__views {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: auto;
  padding: var(--space-1);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}
.shop-toolbar__views button {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.shop-toolbar__views button.is-active,
.shop-toolbar__views button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.shop-toolbar__filters {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.shop-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.shop-filter-chip {
  min-height: 1.85rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.shop-filter-chip:hover,
.shop-filter-chip.is-active {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.shop-filter-chip.is-active {
  border-color: rgba(182, 255, 42, 0.45);
  color: var(--color-accent);
  background: rgba(182, 255, 42, 0.08);
}
.shop-filter-clear {
  min-height: 1.85rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.shop-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
  padding: var(--space-3) 0;
}
.shop-pager__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.shop-admin-dd {
  position: relative;
  flex: 0 0 auto;
}
.shop-admin-dd__btn {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.shop-admin-dd__btn.is-on {
  border-color: rgba(182, 255, 42, 0.4);
  color: var(--color-accent);
  background: rgba(182, 255, 42, 0.1);
}
.shop-admin-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 15rem;
  padding: var(--space-2);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: rgba(9, 9, 11, 0.96);
  display: grid;
  gap: 2px;
}
.shop-admin-dd__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.shop-admin-dd__toggle .is-on { color: var(--color-accent); font-weight: 700; }
.shop-admin-dd__toggle .is-off { color: #f87171; font-weight: 700; }
.shop-admin-dd__menu hr {
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin: var(--space-1) 0;
}
.shop-admin-dd__menu > button {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.shop-admin-dd__menu > button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.shop-admin-dd__menu > button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.06);
}
.shop-card-wrap {
  position: relative;
}
.shop-card-admin {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  display: flex;
  gap: 0.35rem;
}
.shop-card-admin__edit,
.shop-card-admin__x {
  height: 1.75rem;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(9, 9, 11, 0.9);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float-xs);
}
.shop-card-admin__edit { padding: 0 0.65rem; }
.shop-card-admin__x {
  width: 1.75rem;
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
  line-height: 1;
  font-size: 1rem;
}
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.68);
  isolation: isolate;
}
.shop-modal__panel {
  width: min(100%, 36rem);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float);
  transform: translateZ(0);
}
.shop-modal__panel--huge { width: min(100%, 62rem); }
.shop-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.shop-modal__close {
  width: 2rem;
  height: 2rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.shop-modal__body {
  padding: var(--space-4);
  overflow: auto;
}
.shop-modal__warn {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(248, 113, 113, 0.35);
}
.shop-manage-modal {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 28rem;
}
.shop-manage-modal__nav {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.shop-manage-modal__nav button {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.shop-manage-modal__nav button.is-active,
.shop-manage-modal__nav button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.shop-manage-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.25);
  color: var(--color-text);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.shop-manage-modal__page {
  min-width: 0;
}
/* Admin hub modal */
.admin-hub-modal__panel--mega {
  width: min(100%, 72rem);
  max-height: min(92vh, 52rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.admin-hub-modal__body {
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.admin-hub {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.admin-hub__nav {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: 100%;
  padding: var(--space-3);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.admin-hub__nav-group {
  display: grid;
  gap: var(--space-1);
}
.admin-hub__nav-group--sub {
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-hub__nav-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
}
.admin-hub__nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-hub__nav-btn--sub {
  padding-left: var(--space-3);
  font-size: 0.8125rem;
}
.admin-hub__nav-btn.is-active,
.admin-hub__nav-btn:hover:not(.is-disabled) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-hub__nav-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-hub__nav-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.admin-hub__nav-tag {
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold, #d4af37);
}
.admin-hub__main {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: 100%;
  padding: var(--space-4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.admin-hub-shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.admin-hub-shop-tabs button {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.admin-hub-shop-tabs button.is-active,
.admin-hub-shop-tabs button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-catalog__loading,
.admin-catalog__retry {
  margin-bottom: var(--space-3);
}
.admin-hub-shop-panel {
  min-width: 0;
  max-width: none;
}
.admin-hub-shop {
  max-width: none;
}
.admin-catalog {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 24rem;
  align-items: start;
}
.admin-catalog__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
  max-height: min(70vh, 36rem);
  overflow-y: auto;
  position: sticky;
  top: 0;
}
.admin-catalog__nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.admin-catalog__nav button.is-active,
.admin-catalog__nav button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}
.admin-catalog__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.admin-catalog__nav button.is-active .admin-catalog__count {
  color: var(--color-text);
}
.admin-catalog__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.25);
  color: var(--color-text);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.admin-catalog__rule {
  display: block;
  height: 1px;
  margin: var(--space-2) var(--space-1);
  background: var(--color-border);
}
.admin-catalog__main {
  min-width: 0;
}
.admin-catalog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-catalog__head .h3 {
  margin: 0 0 0.15rem;
}
.admin-catalog__toolbar {
  margin-bottom: var(--space-2);
}
.admin-catalog__filters {
  margin-bottom: var(--space-3);
}
.admin-catalog__subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.admin-catalog__subnav button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.admin-catalog__subnav button.is-active,
.admin-catalog__subnav button:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}
.admin-catalog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.admin-catalog-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float-sm);
}
.admin-catalog-list__row--visual {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}
.admin-catalog-list__visual {
  width: 4.75rem;
  height: 4.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.admin-catalog-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.admin-catalog-preview .shop-card__visual {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.admin-catalog-list__actions,
.admin-catalog-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.admin-catalog-list__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.admin-catalog-list__body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-catalog-list__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.admin-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3);
}
.admin-catalog-card {
  display: grid;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-float-sm);
  overflow: hidden;
}
.admin-catalog-card__visual {
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.admin-catalog-card__visual .admin-catalog-preview {
  height: 100%;
}
.admin-catalog-card__visual .shop-card__visual {
  height: 100%;
  min-height: 8rem;
}
.admin-catalog-card__body {
  display: grid;
  gap: 0.25rem;
  padding: 0 var(--space-3);
}
.admin-catalog-card__actions {
  padding: 0 var(--space-3) var(--space-3);
}
.admin-catalog-card__hit {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-catalog-card__hit:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-catalog-card.is-editing {
  box-shadow: var(--shadow-float);
}
.admin-catalog-card .admin-shop-panel {
  border-radius: 0;
  box-shadow: none;
}
.admin-catalog__add {
  margin-bottom: var(--space-3);
}
.admin-catalog__pager {
  margin-top: var(--space-3);
}
.pill--muted {
  opacity: 0.75;
}
@media (max-width: 860px) {
  .admin-catalog {
    grid-template-columns: 1fr;
  }
  .admin-catalog__nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .admin-catalog__rule {
    display: none;
  }
  .admin-catalog-list__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}
.shop-assets--embedded {
  min-height: 24rem;
}
.shop-assets--embedded .shop-assets__hint {
  margin-bottom: 0.75rem;
}
.admin-hub__main.is-transitioning {
  opacity: 0.65;
  transform: translateY(4px);
}
.admin-hub-page {
  animation: admin-hub-fade-in 0.22s ease;
}
@keyframes admin-hub-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.admin-hub-home__head {
  margin-bottom: var(--space-4);
}
.admin-hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-hub-stats--compact {
  margin-bottom: var(--space-3);
}
.admin-hub-stat {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-hub-stat__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.admin-hub-stat strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.admin-hub-stat strong.is-ok { color: #86efac; }
.admin-hub-stat strong.is-warn { color: #fca5a5; }
.admin-hub-quicklinks__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}
.admin-hub-quicklinks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.admin-hub-quicklink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-hub-quicklink:hover {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.06);
}
.admin-hub-quicklink__ext {
  opacity: 0.5;
  margin-top: auto;
}
.admin-games--compact {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.admin-hub-section {
  max-width: 42rem;
}
.admin-hub-section:has(.admin-role-perms) {
  max-width: 54rem;
}
.admin-hub-section--soon {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.admin-role-perms {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-role-perms__intro {
  margin-bottom: var(--space-4);
}
.admin-role-perms__intro .muted {
  margin: 0.35rem 0 0;
}
.admin-role-perms__layout {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .admin-role-perms__layout {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: start;
  }
}
.admin-role-perms__roles .admin-lol-field__label {
  display: block;
  margin-bottom: var(--space-2);
}
.admin-role-perms__role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-role-perms__role + .admin-role-perms__role {
  margin-top: 0.35rem;
}
.admin-role-perms__role.is-active,
.admin-role-perms__role:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
}
.admin-role-perms__role-name {
  font-weight: var(--weight-semibold);
}
.admin-role-perms__role-count {
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  text-align: center;
}
.admin-role-perms__editor-head {
  margin-bottom: var(--space-3);
}
.admin-role-perms__editor-title {
  margin: 0;
  font-size: 1.05rem;
}
.admin-role-perms__editor-head .muted {
  margin: 0.25rem 0 0;
}
.admin-role-perms__group {
  margin-bottom: var(--space-3);
}
.admin-role-perms__perm-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}
.admin-hub-link-cards {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.admin-hub-link-card {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.admin-hub-link-card:hover:not(.is-soon) {
  border-color: rgba(212, 175, 55, 0.35);
}
.admin-hub-link-card.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.admin-hub-link-card__action {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gold, #d4af37);
}
.admin-hub-link-card__kicker {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.admin-hub-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.admin-announce-editor__block {
  margin: var(--space-3) 0;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-announce-editor__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.admin-announce-editor__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: min(100%, 20rem);
}
.admin-announce-editor__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-start;
}
.admin-announce-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.admin-announce-pill.is-live {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
}
.admin-announce-editor__tabs {
  margin-bottom: 0.85rem;
}
.admin-announce-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.admin-announce-side {
  position: sticky;
  top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.admin-announce-side__title {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.admin-announce-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-announce-side__note,
.admin-announce-side__empty {
  font-size: 0.8rem;
  line-height: 1.4;
}
.admin-announce-side--list {
  max-height: min(70vh, 36rem);
  overflow: auto;
}
.admin-announce-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.admin-announce-card {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.admin-announce-card--empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 10rem;
  justify-content: center;
}
.admin-announce-card__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.admin-announce-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-announce-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.admin-announce-grid-2 label,
.admin-announce-span-2 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.admin-announce-span-2 {
  grid-column: 1 / -1;
}
.admin-announce-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.25rem 0;
  text-align: left;
}
.admin-announce-switch input {
  margin-top: 0.2rem;
}
.admin-announce-switch span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-announce-switch small {
  font-size: 0.75rem;
}
.admin-announce-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.55rem;
}
.admin-announce-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  cursor: pointer;
}
.admin-announce-feature:hover:not(:disabled) {
  border-color: rgba(182, 255, 42, 0.35);
}
.admin-announce-feature.is-on {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.28);
}
.admin-announce-feature:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-announce-feature__paths {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.admin-announce-banner-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-announce-banner-nav__item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.admin-announce-banner-nav__item:hover,
.admin-announce-banner-nav__item.is-active {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.admin-announce-banner-nav__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.admin-announce-banner-nav__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-announce-banner-nav__idx {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.admin-announce-sev {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #60a5fa;
}
.admin-announce-sev--warning {
  background: #f59e0b;
}
.admin-announce-sev--critical {
  background: #f87171;
}
.admin-announce-editor__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(9, 9, 11, 0.92) 30%);
  padding-bottom: 0.35rem;
}
.site-maintenance-gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-offset) + 2rem) 1.25rem 3rem;
  min-height: 50vh;
}
.site-maintenance-bypass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--header-offset);
  padding: 0.55rem 1rem;
  background: rgba(120, 40, 20, 0.92);
  color: #ffe4e4;
  font-size: 0.85rem;
  text-align: center;
  border-bottom: 1px solid rgba(248, 113, 113, 0.35);
}
.site-maintenance-bypass span {
  max-width: 52rem;
}
.site-maintenance-gate__card {
  width: min(100%, 34rem);
  padding: 1.75rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(40, 16, 18, 0.72);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.site-maintenance-gate__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.site-maintenance-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.site-maintenance-gate__note {
  margin-top: 1rem;
  font-size: 0.8rem;
}
@media (max-width: 860px) {
  .admin-announce-layout {
    grid-template-columns: 1fr;
  }
  .admin-announce-side {
    position: static;
  }
  .admin-announce-grid-2 {
    grid-template-columns: 1fr;
  }
}
.admin-announce-editor__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem 0.75rem;
  align-items: end;
}
.admin-announce-editor__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.admin-announce-editor__check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem !important;
  margin: 0.35rem 0;
}
.site-announce {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  /* Must stay below .site-header so Games / account menus aren’t covered. */
  z-index: var(--z-announce);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(12px);
}
.site-announce--info {
  background: rgba(39, 60, 90, 0.92);
  border-bottom-color: rgba(125, 180, 255, 0.25);
}
.site-announce--warning {
  background: rgba(72, 52, 20, 0.94);
  border-bottom-color: rgba(245, 158, 11, 0.35);
}
.site-announce--critical {
  background: rgba(72, 24, 28, 0.96);
  border-bottom-color: rgba(248, 113, 113, 0.4);
}
.site-announce__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.site-announce__copy {
  min-width: 0;
}
.site-announce__title {
  display: block;
  font-size: 0.95rem;
}
.site-announce__body {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}
.site-announce__link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-announce__dismiss {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  padding: 0.15rem;
}
.site-announce__dismiss:hover {
  opacity: 1;
}
.admin-nav-editor__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: var(--space-3) 0;
}
.admin-nav-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.admin-nav-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.admin-nav-row__fields {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.4fr) auto auto;
  gap: 0.5rem 0.75rem;
  align-items: end;
}
.admin-nav-row__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.admin-nav-row__meta {
  align-self: center;
  font-size: var(--text-sm);
}
.admin-nav-row__tag {
  align-self: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}
.admin-nav-row__tag.is-hidden {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
}
.admin-nav-editor__add {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-nav-editor__add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}
@media (max-width: 720px) {
  .admin-nav-row__fields {
    grid-template-columns: 1fr;
  }
}
.admin-hub-shop__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-hub-planned__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.2rem;
}
@media (max-width: 860px) {
  .admin-hub {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .admin-hub__nav {
    max-height: 10rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .admin-hub-modal__panel--mega {
    width: min(100%, 100%);
    max-height: 96vh;
  }
  .shop-manage-modal {
    grid-template-columns: 1fr;
  }
}
.admin-manage__subtitle {
  margin: var(--space-3) 0 var(--space-2);
  font-weight: 600;
}
.admin-manage__stack {
  display: grid;
  gap: var(--space-2);
}
.admin-manage__pager {
  margin-top: var(--space-3);
}
.admin-review-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.admin-review-card {
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.admin-review-card.is-open {
  border-color: rgba(212, 175, 55, 0.35);
}
.admin-review-card__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-review-card__summary {
  margin: var(--space-2) 0;
}
.admin-review-card__notes {
  margin: 0 0 var(--space-2);
  white-space: pre-wrap;
}
.admin-review-card__form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.admin-review-card__form textarea {
  width: 100%;
  min-height: 3.5rem;
  resize: vertical;
}
.shop-assets {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 24rem;
}
.shop-assets__nav {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.shop-assets__nav button {
  padding: var(--space-2) var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.shop-assets__nav button.is-active {
  color: var(--color-text);
  border-color: rgba(182, 255, 42, 0.35);
}
.shop-assets__main { display: grid; gap: var(--space-3); align-content: start; }
.shop-assets__main > input[type="search"] {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
}
.shop-assets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}
.shop-asset-card {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-2);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.shop-asset-card.is-selected { border-color: var(--color-accent); }
.shop-asset-card__preview {
  height: 5.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-accent);
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
}
.shop-asset-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-asset-card strong {
  font-size: var(--text-xs);
  word-break: break-word;
}
.shop-asset-card__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.shop-item-form { display: grid; gap: var(--space-4); }
.shop-item-form__asset {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.shop-item-form__preview {
  height: 6rem;
  border-radius: var(--radius-sm);
  border: none;
  box-shadow: var(--shadow-float-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.shop-item-form__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.shop-item-form__preview .avatar-ring,
.shop-item-form__preview [class*="frame-"] {
  width: 4.5rem;
  height: 4.5rem;
}
.shop-item-form__preview .shop-theme-preview,
.shop-item-form__theme-preview {
  width: 100%;
  height: 100%;
}
.shop-item-form__theme-preview .shop-theme-preview {
  transform: scale(0.85);
  transform-origin: center;
}
.shop-item-form__asset-actions,
.shop-item-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-item-form__actions { justify-content: flex-end; }
.shop-border-editor {
  display: grid;
  gap: 0.85rem;
}
.shop-border-editor__preview {
  overflow: visible;
  padding: 1.25rem 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.28);
}
.shop-border-editor__stage {
  position: relative;
  overflow: visible;
}
.shop-border-editor__stage .profile-border-preview {
  margin: 0;
  width: 100%;
}
.shop-border-editor__stage .profile-border-preview .profile-hero {
  width: 100%;
}
.profile-hero > .profile-hero__outline-guide {
  position: absolute;
  inset: 0;
  border: 2px dotted rgba(255, 255, 255, 0.48);
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  box-sizing: border-box;
}
.shop-border-editor__guides {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 9;
  border-radius: inherit;
}
.shop-border-editor__sliders {
  display: grid;
  gap: 0.75rem;
}
.shop-border-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shop-border-editor__slider {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.shop-border-editor__slider strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.shop-border-editor__slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
}
.admin-games__note {
  grid-column: 1 / -1;
  margin: 0;
}
@media (max-width: 860px) {
  .shop-manage-modal,
  .shop-assets {
    grid-template-columns: 1fr;
  }
}
.shop-links, .shop-cats {
  display: none;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-3);
}
.shop-list {
  display: grid;
  gap: var(--space-2);
}
.shop-list-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: inherit;
  text-decoration: none;
}
.shop-list-row:has(.shop-card__visual--shop-art),
.shop-list-row:has(.shop-card__visual--border),
.shop-list-row:has(.shop-card__visual--banner) {
  grid-template-columns: 9rem minmax(0, 1fr) auto auto;
}
.shop-list-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1rem;
  text-align: right;
  min-width: 4.5rem;
}
.shop-price-block {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 0.1rem;
}
.shop-list-row__body .shop-level-req {
  margin-top: 0.2rem;
}
.shop-list-row:has(.shop-card__visual--shop-art) .shop-list-row__visual,
.shop-list-row:has(.shop-card__visual--border) .shop-list-row__visual,
.shop-list-row:has(.shop-card__visual--banner) .shop-list-row__visual {
  width: 9rem;
  height: 2.35rem;
}
.shop-list-row:hover {
  border-color: rgba(182, 255, 42, 0.35);
}
.shop-list-row.is-locked { opacity: 0.72; }
.shop-list-row__visual {
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}
.shop-list-row__visual .shop-card__visual {
  min-height: 4.5rem;
  margin: 0;
  padding: 0.35rem;
  border-bottom: 0;
}
.shop-list-row__visual .shop-card__visual--banner {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}
.shop-list-row__visual .shop-card__visual--banner .banner-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-list-row__body { min-width: 0; }
.shop-list-row__body .h3 { margin: 0; font-size: var(--text-md); }
.shop-list-row__desc {
  margin: 0.15rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-section { margin-bottom: var(--space-6); }
.shop-card {
  display: grid;
  gap: 0.4rem;
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-float);
  transition: box-shadow var(--ease);
}
.shop-card:has(.shop-card__visual--border) {
  overflow: visible;
}
.shop-list-row:has(.shop-card__visual--border) {
  overflow: visible;
}
.shop-card.is-locked { opacity: 0.72; }
.shop-card--legendary {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(245, 197, 66, 0.25);
}
.shop-card--mythic {
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(248, 113, 113, 0.28);
}
.shop-card__price { color: var(--color-accent); font-weight: 600; }
.shop-card__visual {
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0.55rem;
  padding: 1.1rem var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 860px) {
  main.section.section--shop,
  #content.section.section--shop,
  main#content.section.section--shop {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--space-8);
  }
  .shop-page {
    overflow: visible;
    flex: none;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .shop-shell {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    flex: none;
    width: min(100% - var(--space-8), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }
  .shop-float-nav {
    position: static;
    width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    overflow: visible;
  }
  .shop-float-nav__rule {
    display: none;
  }
  .shop-main {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .shop-catalog {
    overflow: visible;
    overflow-y: visible;
  }
  .shop-catalog:has(.shop-live-preview-layout) {
    display: block;
    overflow: visible;
    padding-bottom: var(--space-8);
  }
  .shop-live-preview-layout__scroll {
    flex: none;
    overflow: visible;
    border-top: 0;
    padding-top: var(--space-3);
    padding-bottom: 0;
    padding-right: 0;
  }
  .shop-toolbar__views {
    margin-left: 0;
  }
  .shop-list-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .shop-list-row .shop-rarity,
  .shop-list-row .shop-card__price,
  .shop-list-row .shop-lock,
  .shop-list-row .shop-list-row__meta,
  .shop-list-row .btn {
    grid-column: 2;
  }
}
.shop-card__visual--banner {
  /* Banner assets are ~4:1 — match that frame so the full art shows edge-to-edge. */
  position: relative;
  aspect-ratio: 4 / 1;
  width: auto;
  align-self: stretch;
  min-height: 0 !important;
  height: auto;
  margin-inline: calc(var(--space-4) * -1);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: 0.55rem;
  padding: 0 !important;
  display: block;
  overflow: hidden;
  background: #0a0a0c;
  place-items: unset;
  border-radius: 0;
}
.shop-card__visual--banner .banner-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-card--banner .shop-card__visual--banner {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.shop-card__visual--title {
  position: relative;
  min-height: 6rem;
  background: #000;
  background-image: none;
  overflow: hidden;
}
.shop-card__visual--title::before {
  content: none;
}
.shop-card__visual--title::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.shop-card__title-sample {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  text-align: center;
  color: var(--shop-title-color, #c9b896);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.shop-card .irg-title,
.shop-list-row .irg-title {
  color: var(--shop-title-color, #c9b896);
}
/* Legacy theme classes — keep selectors but force black panels. */
.title-bg-rift,
.title-bg-ranked,
.title-bg-prestige,
.title-bg-custom,
.title-bg-void,
.title-bg-darkin,
.title-bg-shadow,
.title-bg-blood,
.title-bg-demacia,
.title-bg-noxus,
.title-bg-freljord,
.title-bg-shurima,
.title-bg-ionia,
.title-bg-bilgewater,
.title-bg-targon,
.title-bg-zaun,
.title-bg-dragon,
.title-bg-baron,
.title-bg-lane,
.title-bg-highlight,
.title-bg-lobby {
  background: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.shop-section--custom-title,
.shop-section--custom-border {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.shop-grid--lead {
  grid-template-columns: minmax(0, 22rem);
}
.shop-catalog:has(.shop-live-preview-layout) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.shop-live-preview-layout {
  --shop-live-preview-hero-h: clamp(5.25rem, 11.5svh, 7rem);
  --shop-live-preview-bleed-x: clamp(0.35rem, 1.5vw, 0.85rem);
  --shop-live-preview-list-row: 3.35rem;
  --shop-live-preview-scroll-min: calc(
    4 * var(--shop-live-preview-list-row) + 3 * var(--space-2) + var(--space-2)
  );
  display: grid;
  grid-template-rows: auto minmax(var(--shop-live-preview-scroll-min), 1fr);
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin-bottom: 0;
}
.shop-live-preview-layout--grid {
  --shop-live-preview-scroll-min: calc(2 * 11rem + var(--space-3) + var(--space-2));
}
.shop-live-preview-layout__head {
  min-width: 0;
  background: var(--color-bg, #0a0a0c);
  padding: 0 var(--shop-live-preview-bleed-x);
  overflow: visible;
}
.shop-live-preview-layout__head .h3 {
  margin-bottom: var(--space-1);
}
.shop-live-preview-layout__desc {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  line-height: 1.35;
}
.shop-live-preview-layout__caption {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  text-align: center;
}
.shop-live-preview-layout__scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  padding-right: 2px;
  padding-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) rgba(255, 255, 255, 0.04);
  -webkit-overflow-scrolling: touch;
}
.shop-live-preview-layout__scroll .shop-pager {
  margin-top: var(--space-3);
  padding-bottom: 0;
}
.shop-live-preview-layout__scroll::-webkit-scrollbar {
  width: 8px;
}
.shop-live-preview-layout__scroll::-webkit-scrollbar-track {
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
.shop-live-preview-layout__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.32);
}
.shop-live-preview-layout__scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.48);
}
.shop-border-live-preview,
.shop-banner-live-preview {
  width: min(100%, calc(var(--shop-live-preview-hero-h) * 4));
  max-width: 100%;
  margin-inline: auto;
}
.shop-live-preview-layout .shop-preview.shop-preview--banner,
.shop-live-preview-layout .profile-border-preview {
  width: 100%;
  margin-inline: 0;
}
.shop-live-preview-layout .profile-border-preview > .profile-hero.irg-border--image,
.shop-live-preview-layout .profile-border-preview > .profile-hero.irg-border {
  width: 100%;
  max-height: var(--shop-live-preview-hero-h);
  aspect-ratio: 4 / 1;
  height: auto;
  min-height: 0;
  margin-inline: 0;
}
.shop-live-preview-layout .profile-border-preview > .profile-hero.irg-border--image {
  margin-block: clamp(0.35rem, 1vw, 0.55rem);
}
.shop-live-preview-layout .shop-preview.shop-preview--banner {
  max-height: var(--shop-live-preview-hero-h);
  aspect-ratio: 4 / 1;
  height: auto;
  min-height: 0;
  padding: 0;
}
.shop-live-preview-layout .shop-preview.shop-preview--banner.irg-border--image {
  margin-block: 0;
}
.shop-section--borders .shop-border-live-preview {
  overflow: visible;
  padding: clamp(0.35rem, 1vw, 0.55rem) 0 clamp(0.1rem, 0.5vw, 0.2rem);
}
.shop-section--borders .shop-border-live-preview .profile-border-preview {
  margin-bottom: var(--space-1);
  overflow: visible !important;
}
.shop-section--borders .shop-border-live-preview .profile-border-preview.has-cosmetic-banner:has(.profile-hero.irg-border--image) {
  padding-block: clamp(0.55rem, 1.4vw, 0.85rem);
  overflow: visible !important;
}
.shop-section--borders .shop-border-live-preview .profile-border-preview > .profile-hero.irg-border--image {
  overflow: visible !important;
}
.shop-section--banners .shop-banner-live-preview {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(182, 255, 42, 0.12);
}
.shop-section--banners .shop-banner-live-preview .shop-preview.shop-preview--banner {
  border-radius: inherit;
}
.shop-detail:has(.profile-border-preview) {
  overflow: visible;
}
.shop-detail .profile-border-preview {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  width: auto;
  max-width: none;
}
.shop-detail .profile-border-preview .profile-hero {
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border: 0;
}
.shop-list-row--text-only {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.shop-list-row--text-only .shop-list-row__body {
  grid-column: 1;
}
.shop-card--text-only {
  display: grid;
  gap: var(--space-2);
}
.shop-preview--border-plate .shop-preview__banner.irg-border-plate,
.shop-preview--border-plate .irg-border-plate {
  position: absolute;
  inset: 0;
}
.shop-list-row--button,
.shop-card--button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.shop-list-row--button.is-previewing,
.shop-card--button.is-previewing {
  border-color: rgba(232, 201, 122, 0.55);
  box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.25);
}
.shop-card__visual--border {
  position: relative;
  aspect-ratio: 4 / 1;
  width: auto;
  align-self: stretch;
  min-height: 0 !important;
  height: auto;
  margin-inline: calc(var(--space-4) * -1);
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: 0.55rem;
  padding: 0 !important;
  display: block;
  overflow: visible;
  background: transparent;
  place-items: unset;
  border-radius: 0;
}
.shop-border-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.shop-border-preview__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-card__visual--name .irg-name { font-size: 1.15rem; }
.shop-card__visual--theme { min-height: 4.5rem; width: 100%; }
.shop-card__theme-swatch,
.shop-card__fx-label,
.shop-card__collectible {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--color-accent);
}
.shop-card__collectible {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: radial-gradient(circle at 30% 30%, rgba(182, 255, 42, 0.25), #09090b);
}
.section-head--shop {
  max-width: none;
  margin: 0 auto var(--space-8);
}
.shop-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(52rem, 100%);
  margin: 0 auto;
}
.shop-hero-title h1 {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 18px rgba(182, 255, 42, 0.28);
  white-space: nowrap;
}
.shop-hero-title__rule {
  flex: 1 1 0;
  height: 2px;
  min-width: 2.5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--color-accent-deep), var(--color-accent), var(--color-accent-deep), transparent);
  box-shadow: 0 0 12px rgba(182, 255, 42, 0.35);
}
.shop-level-req {
  font-size: var(--text-xs);
  margin: 0.1rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-level-req--ok { color: var(--color-text-muted); }
.shop-level-req--locked { color: #f87171; }
.shop-lock {
  color: #f87171;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.shop-price-block .shop-card__price {
  margin: 0;
}
.shop-rarity { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: var(--color-text-muted); }
.shop-rarity--rare { color: #60a5fa; }
.shop-rarity--epic { color: #c084fc; }
.shop-rarity--legendary { color: #f5c542; }
.shop-rarity--mythic { color: #f87171; }
.shop-detail, .shop-custom, .shop-preview {
  padding: var(--space-5);
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  margin-bottom: var(--space-4);
}
.shop-detail:has(.irg-border--image) {
  overflow: visible;
}
.shop-preview {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 7rem;
}
.shop-preview.shop-preview--banner {
  display: block;
  aspect-ratio: 4 / 1;
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 0;
  background: #050506;
  overflow: hidden;
}
.shop-preview.shop-preview--banner.irg-border--image {
  overflow: visible;
  margin-block: clamp(0.5rem, 2vw, 0.85rem);
}
.shop-preview--border-plate .shop-preview__banner.irg-border-plate,
.shop-preview--border-plate .irg-border-plate {
  position: absolute;
  inset: 0;
}
.shop-preview--irg-sample .shop-preview__banner.irg-border-sample,
.shop-preview--irg-sample .irg-border-sample {
  position: absolute;
  inset: 0;
}
.shop-detail .shop-preview.shop-preview--banner {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  width: auto;
  max-width: none;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.shop-preview__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shop-preview__content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  height: 100%;
  padding: 0 var(--space-5);
  box-sizing: border-box;
}
.shop-preview.shop-preview--banner .shop-preview__id .subtle,
.shop-preview.shop-preview--banner .irg-name {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.shop-preview.shop-preview--banner .irg-avatar,
.shop-preview.shop-preview--banner .profile-hero__avatar,
.shop-preview.shop-preview--banner img.irg-avatar {
  width: clamp(2.25rem, 10vw, 3.5rem);
  height: clamp(2.25rem, 10vw, 3.5rem);
}
.shop-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.shop-custom { display: grid; gap: var(--space-3); max-width: 28rem; }
.admin-shop-workspace {
  display: grid;
  grid-template-columns: minmax(16.5rem, 18.75rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.admin-shop-add {
  position: sticky;
  top: calc(var(--header-offset) + 0.75rem);
  margin: 0;
}
.admin-shop-panel {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.85rem 0.9rem 1rem;
  border: none;
  border-radius: 1rem;
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float), 0 0 28px rgba(182, 255, 42, 0.12);
}
.admin-shop-panel__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-shop-panel__icon {
  flex: 0 0 auto;
  color: var(--color-text-subtle);
}
.admin-shop-group {
  margin: 0;
  padding: 0.65rem 0.7rem 0.75rem;
  border: none;
  border-radius: 0.7rem;
  box-shadow: var(--shadow-float-sm);
  min-width: 0;
}
.admin-shop-group legend {
  padding: 0 0.35rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.admin-shop-field {
  display: grid;
  gap: 0.28rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.admin-shop-field + .admin-shop-field { margin-top: 0.45rem; }
.admin-shop-field input,
.admin-shop-field select,
.admin-shop-field textarea {
  width: 100%;
  min-height: 2.15rem;
  padding: 0.4rem 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.6rem;
  background: #0c0c0e;
  color: var(--color-text);
}
.admin-shop-field textarea {
  min-height: 4.2rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
}
.admin-shop-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.8rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.admin-shop-switch + .admin-shop-switch { margin-top: 0.35rem; }
.admin-shop-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.55rem;
  height: 1.4rem;
  margin: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #3f3f46;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease;
}
.admin-shop-switch input::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}
.admin-shop-switch input:checked { background: var(--color-accent); }
.admin-shop-switch input:checked::after { transform: translateX(1.15rem); }
.admin-shop-switch input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.admin-shop-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.admin-shop-panel__actions .btn,
.admin-shop-submit {
  border-radius: var(--radius-full);
}
.admin-shop-panel__actions .btn {
  border-color: rgba(255, 255, 255, 0.28);
  background: #0a0a0a;
}
.admin-shop-submit {
  width: 100%;
  min-height: 2.55rem;
  background: #3f6212;
  color: #fff;
  border: 0;
}
.admin-shop-submit:hover { background: #4d7c16; }
.admin-shop-browse {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}
.admin-shop-browse__viewport {
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.admin-shop-browse__page {
  display: grid;
  grid-template-columns: repeat(var(--shop-cols, 2), minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.admin-shop-browse__page.is-in {
  animation: admin-shop-slide 280ms ease;
}
@keyframes admin-shop-slide {
  from { opacity: 0.45; transform: translateX(var(--shop-slide, 18px)); }
  to { opacity: 1; transform: none; }
}
.admin-shop-empty {
  display: grid;
  place-items: center;
  min-height: 14rem;
  margin: 0;
  border: 1px dashed var(--color-border);
  border-radius: 1rem;
  color: var(--color-text-muted);
}
.admin-shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-shop-pager .admin-slider__dots { padding: 0; }
.admin-shop-pager button[data-page] {
  width: 2rem;
  height: 2rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.86);
  color: var(--color-text);
  cursor: pointer;
}
.admin-shop-pager button[data-page]:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .admin-shop-browse__page.is-in { animation: none; }
}
@media (max-width: 900px) {
  .admin-shop-workspace { grid-template-columns: 1fr; }
  .admin-shop-add { position: static; }
}
.admin-manage { display: grid; gap: var(--space-4); }
.admin-form.admin-manage__row {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
}
.admin-shop-danger {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}
.admin-shop-danger:hover { background: rgba(239, 68, 68, 0.24); }
.admin-shop-backup {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: var(--space-3);
}
.admin-shop-backup__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 650;
}
.shop-item-form__missing {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  color: #fecaca;
  font-size: var(--text-sm);
  font-weight: 650;
  text-align: center;
}
.admin-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(4, 8, 6, 0.72);
}
.admin-confirm__dialog {
  width: min(28rem, 100%);
  display: grid;
  gap: 0.65rem;
  padding: 1.1rem 1.15rem 1rem;
  border: none;
  border-radius: 0.9rem;
  background: var(--color-bg-elevated, #121814);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}
.admin-confirm__kicker {
  margin: 0;
  color: #fecaca;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-confirm__body { margin: 0; color: var(--color-text-muted, #c7d2cc); }
.admin-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.45rem 0.5rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.admin-table th { color: var(--color-text-subtle); font-weight: var(--weight-medium); }
.admin-member-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.admin-member-list__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
}
.admin-member-list__btn.is-on,
.admin-member-list__btn:hover {
  border-color: rgba(182, 255, 42, 0.35);
}
.admin-member-editor {
  margin-top: 1rem;
  display: grid;
  gap: 0.7rem;
  padding-top: 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.flash { padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--color-accent-dim); color: var(--color-accent); }
.flash--bad { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }

/* Frames, banners, titles: see cosmetics.css */
.profile-achieve-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.profile-achieve-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
  width: 100%;
}
.reward-meter {
  padding: 0.85rem 1rem;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: var(--shadow-float-sm);
  display: grid;
  gap: 0.55rem;
}
.reward-meter--activity {
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.22);
}
.reward-meter--games {
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}
.reward-meter__head {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: flex-start;
}
.reward-meter__title-wrap {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  min-width: 0;
}
.reward-meter__icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.reward-meter__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.reward-meter__caption,
.reward-meter__rate {
  margin: 0.12rem 0 0;
  font-size: 0.78rem;
}
.reward-meter__bar {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.reward-meter__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(182, 255, 42, 0.35), var(--color-accent));
  transition: width 0.25s ease;
}
.reward-meter--games .reward-meter__bar-fill {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.35), #60a5fa);
}
.reward-meter__stat {
  margin: 0;
  font-size: 0.78rem;
}
.reward-meter__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.reward-meter__pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}
.reward-meter__pill--pts {
  background: rgba(182, 255, 42, 0.14);
  color: var(--color-accent);
}
.reward-meter__pill--xp {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
.reward-meter__note {
  font-size: 0.72rem;
}
.shop-customization {
  display: grid;
  gap: var(--space-8);
  max-width: 56rem;
}
.shop-customization__intro {
  display: grid;
  gap: var(--space-2);
}
.shop-customization__intro .h3 {
  margin: 0;
}
.shop-customization__intro .muted {
  margin: 0;
  max-width: 40rem;
}
.shop-customization__block {
  display: grid;
  gap: var(--space-4);
}
.shop-customization__block-head {
  display: grid;
  gap: var(--space-2);
}
.shop-customization__block-head .h3 {
  margin: 0;
}
.shop-customization__block-head .muted {
  margin: 0;
  max-width: 40rem;
}
.shop-customization__name-grid,
.shop-customization__review-grid {
  display: grid;
  gap: var(--space-4);
}
.shop-customization__name-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.shop-customization__review-grid {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
}
.shop-customization__card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-float-sm);
}
.shop-customization__card-title,
.shop-customization__card .h3 {
  margin: 0;
  font-size: var(--text-lg);
}
.shop-customization__card > .muted {
  margin: 0;
}
.shop-customization__card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.shop-customization__price {
  margin: 0;
}
.shop-customization__preview {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.shop-customization__preview .subtle {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shop-customization__swatch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.shop-customization__swatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.shop-customization__swatch input[type="color"] {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.shop-customization__hex {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.shop-custom.shop-custom--embedded {
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  max-width: none;
}
.shop-customization__requests {
  margin: var(--space-2) 0 0;
}
.shop-customization__status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.shop-customization__status p {
  margin: 0 0 var(--space-1);
}
.shop-customization__status p:last-child {
  margin-bottom: 0;
}
.shop-customization__rows {
  display: grid;
  gap: 0.55rem;
}
.shop-customization__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float-sm);
}
.shop-customization__visual {
  width: 3.5rem;
  flex-shrink: 0;
}
.shop-customization__body {
  flex: 1;
  min-width: 8rem;
}
.activity-reward {
  min-width: 14rem;
  padding: 0.55rem 0.8rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.activity-reward__top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.badge-origin { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.badge-origin--SHOP { color: var(--color-accent); }
.member-card__avatar { margin: 0.35rem 0 0.5rem; }
.member-card__avatar .irg-frame { transform: scale(0.92); transform-origin: left center; }
#member-identity { display: grid; gap: 0.4rem; }

.player-suggests {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.player-suggest {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.55rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  cursor: pointer;
}
.player-suggest img { border-radius: 50%; }
.player-suggest:hover { border-color: rgba(182, 255, 42, 0.4); }
.player-picked { margin: 0.35rem 0 0; }

/* ── Ticket system (compact list + heavy nav) ── */
.ticket-app,
.ticket-admin,
.ticket-detail-page,
.ticket-create-page {
  display: grid;
  gap: 0.85rem;
}

.ticket-app--profile {
  margin-top: 0;
}

.ticket-nav {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-nav__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: stretch;
}
.ticket-nav__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}
.ticket-nav__tab {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  padding: 0.55rem 0.8rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-float-xs);
  transition: box-shadow var(--ease), background var(--ease), color var(--ease);
}
.ticket-nav__tab:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-float-sm);
}
.ticket-nav__tab.is-active {
  color: var(--color-text);
  background: rgba(182, 255, 42, 0.08);
  box-shadow: var(--shadow-float-sm), inset 0 0 0 1px rgba(182, 255, 42, 0.4);
}
.ticket-nav__tab-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ticket-nav__tab-hint {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}
.ticket-nav__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ticket-nav__search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
}
.ticket-nav__search-field {
  display: grid;
  gap: 0.3rem;
  min-width: 12rem;
}
.ticket-nav__search-field--grow {
  flex: 1;
  min-width: 16rem;
}
.ticket-nav__search-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.ticket-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-subnav__sep { opacity: 0.45; margin: 0 0.15rem; }
.ticket-subnav__link {
  color: var(--color-text-muted);
  text-decoration: none;
}
.ticket-subnav__link:hover { color: var(--color-accent); }
.ticket-subnav__current { color: var(--color-text); font-weight: 600; }

.ticket-input,
.ticket-select,
.ticket-textarea {
  width: 100%;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  font: inherit;
  padding: 0.55rem 0.7rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ticket-input:focus,
.ticket-select:focus,
.ticket-textarea:focus {
  border-color: rgba(182, 255, 42, 0.45);
  background: rgba(0, 0, 0, 0.45);
}
.ticket-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.ticket-textarea { resize: vertical; min-height: 6rem; }

.ticket-app__meta,
.ticket-admin__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}
.ticket-app__counts {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-app__empty {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1.25rem 0;
}

.ticket-list-shell {
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.ticket-list-head {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-table {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticket-table--compact .ticket-row {
  border-radius: 0;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  background: transparent;
  padding: 0.65rem 0.85rem;
}
.ticket-table--compact .ticket-row:last-child {
  border-bottom: 0;
}
.ticket-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.ticket-row:hover,
.ticket-row.is-active {
  background: rgba(182, 255, 42, 0.05);
}
.ticket-row--button {
  cursor: pointer;
  font: inherit;
}
.ticket-row__id {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-text-subtle);
}
.ticket-row__main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.ticket-row__title {
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-row__meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-row__archived { color: var(--color-text-muted); }
.ticket-row__aside {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
}
.ticket-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
.ticket-row__time {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}

.ticket-status,
.ticket-priority,
.ticket-chip {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-float-sm);
  line-height: 1.2;
}
.ticket-status--open {
  color: var(--color-accent);
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(182, 255, 42, 0.45);
}
.ticket-status--in_progress {
  color: #f5c542;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(245, 197, 66, 0.45);
}
.ticket-status--closed { color: var(--color-text-muted); }
.ticket-priority--low { color: var(--color-text-muted); }
.ticket-priority--medium {
  color: #93c5fd;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(147, 197, 253, 0.4);
}
.ticket-priority--high {
  color: #fb923c;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(251, 146, 60, 0.45);
}
.ticket-priority--urgent {
  color: #f87171;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(248, 113, 113, 0.5);
}
.ticket-chip {
  color: var(--color-text-muted);
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ticket-pager {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
}
.ticket-pager__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-pager__total { color: var(--color-text-subtle); }

.ticket-detail {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-detail__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}
.ticket-detail__titles { display: grid; gap: 0.25rem; min-width: 0; }
.ticket-detail__eyebrow {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.ticket-detail__id {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-text-subtle);
}
.ticket-detail__title { margin: 0; font-size: var(--text-lg); }
.ticket-detail__meta,
.ticket-detail__times {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ticket-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.ticket-detail-page__toolbar,
.ticket-detail-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.ticket-section { display: grid; gap: 0.65rem; }
.ticket-section__bar {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}
.ticket-section__label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.ticket-section__count {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
}

.ticket-thread {
  display: grid;
  gap: 0.65rem;
}
.ticket-bubble {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.65rem;
  align-items: start;
}
.ticket-bubble__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  box-shadow: var(--shadow-float-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
}
.ticket-bubble--staff .ticket-bubble__avatar {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.18);
  color: #ddd6fe;
}
.ticket-bubble--user .ticket-bubble__avatar {
  border-color: rgba(182, 255, 42, 0.35);
  background: rgba(182, 255, 42, 0.12);
  color: var(--color-accent);
}
.ticket-bubble__body {
  padding: 0.65rem 0.8rem;
  border-radius: 0.85rem;
  border: none;
  box-shadow: var(--shadow-float-sm);
  background: rgba(255, 255, 255, 0.03);
}
.ticket-bubble--staff .ticket-bubble__body {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.08);
  border-top-left-radius: 0.25rem;
}
.ticket-bubble--user .ticket-bubble__body {
  border-color: rgba(182, 255, 42, 0.18);
  background: rgba(182, 255, 42, 0.05);
  border-top-left-radius: 0.25rem;
}
.ticket-bubble__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.ticket-bubble__author { font-weight: 600; color: var(--color-text-muted); }
.ticket-bubble p {
  margin: 0.35rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  white-space: pre-wrap;
}

.ticket-reply,
.ticket-staff-form {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ticket-reply--detail { grid-template-columns: 1fr; }
.ticket-staff-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.ticket-staff-form__actions {
  display: flex;
  justify-content: flex-end;
}
.ticket-staff-form label,
.ticket-reply label,
.ticket-create label {
  display: grid;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ticket-create {
  max-width: 72rem;
  width: 100%;
  margin-inline: auto;
  display: grid;
  gap: 0.85rem;
}
.ticket-create-page {
  max-width: 72rem;
  width: 100%;
  margin-inline: auto;
}
.ticket-detail-page {
  max-width: 52rem;
}
.container--wide { max-width: 72rem; }

.ticket-admin__title { margin: 0; }
.ticket-admin-detail { display: grid; gap: 0.75rem; }
.ticket-admin__hint { font-size: var(--text-sm); }

.admin-filter {
  display: grid;
  gap: 0.35rem;
  max-width: 14rem;
  margin: 0.75rem 0 1rem;
}

@media (max-width: 720px) {
  .ticket-list-head { display: none; }
  .ticket-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .ticket-row__aside,
  .ticket-row__badges {
    justify-items: start;
    justify-content: flex-start;
  }
  .ticket-nav__tab-hint { display: none; }
  .ticket-staff-form__row { grid-template-columns: 1fr; }
  .ticket-bubble { grid-template-columns: 1.75rem 1fr; }
}

/* ── Page editor (Craft.js) ── */
.craft-selected {
  outline: 2px solid var(--color-accent, #5b8def);
  outline-offset: 2px;
}
.page-editor {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 2rem;
}
.page-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg, #0f1115);
  padding: 0.75rem 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-editor__toolbar-left,
.page-editor__toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.page-editor__workspace {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(12rem, 16rem);
  gap: 0.75rem;
  align-items: start;
}
@media (max-width: 960px) {
  .page-editor__workspace { grid-template-columns: 1fr; }
}
.page-editor__panel {
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(0,0,0,0.2);
}
.page-editor__group { margin-top: 0.75rem; }
.page-editor__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.page-editor__chip {
  font-size: 0.8rem;
  padding: 0.35rem 0.55rem;
  cursor: grab;
}
.page-editor__canvas {
  min-height: 60vh;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.5rem;
  background: rgba(0,0,0,0.15);
}
.page-editor__fields { display: grid; gap: 0.65rem; }
.page-editor__field { display: grid; gap: 0.25rem; }
.page-editor__field .input {
  width: 100%;
  padding: 0.4rem 0.5rem;
}
.page-editor__status,
.page-editor__flash,
.page-editor__error {
  width: 100%;
  margin: 0;
  font-size: 0.9rem;
}
.page-editor__flash { color: var(--color-success, #6dca8a); }
.page-editor__error { color: var(--color-danger, #e57373); }
.page-editor__list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.page-editor__list a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.page-editor__list a:hover {
  border-color: rgba(255,255,255,0.2);
}

/* Advanced page editor */
.editor-bare-root {
  min-height: 100vh;
  height: 100vh;
  background: #0b0d11;
  overflow: hidden;
}
.page-editor--pro {
  min-height: 100vh;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0b0d11;
  color: var(--color-text, #e8eaed);
  overflow: hidden;
  padding: 0;
  gap: 0;
}
.page-editor__topbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  background: #12151c;
  position: sticky;
  top: 0;
  z-index: 40;
  overflow-x: auto;
}
.page-editor__topbar-left,
.page-editor__topbar-primary,
.page-editor__topbar-right {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}
.page-editor__topbar-primary {
  margin-left: auto;
}
.page-editor__topbar-right {
  margin-left: 0;
}
.page-editor__title { font-size: 1rem; }
.page-editor__badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: none;
  box-shadow: var(--shadow-float-sm);
  color: var(--color-text-muted, #9aa0a6);
}
.page-editor__badge.is-live {
  border-color: rgba(109, 202, 138, 0.5);
  color: #6dca8a;
}
.page-editor__badge.is-unsaved {
  border-color: rgba(240, 180, 80, 0.55);
  color: #f0b450;
}
.page-editor__publish {
  background: #3d6df2 !important;
  border-color: #3d6df2 !important;
  color: #fff !important;
  font-weight: 600;
}
.page-editor__devices {
  display: inline-flex;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  overflow: hidden;
}
.page-editor__devices button {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  text-transform: capitalize;
}
.page-editor__devices button.is-active { background: rgba(61,109,242,0.35); }
.page-editor__meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.35rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
}
.page-editor__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(15rem, 19rem);
  min-height: 0;
}
@media (max-width: 1100px) {
  .page-editor__body { grid-template-columns: 1fr; }
}
.page-editor__left,
.page-editor__right {
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  max-height: calc(100vh - 6rem);
  background: #0f1218;
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-editor__right { border-right: 0; border-left: 1px solid rgba(255,255,255,0.08); }
.page-editor__rail-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.page-editor__left-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
  gap: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-editor__left-tabs button,
.page-editor__tabs button {
  background: transparent;
  border: 0;
  color: var(--color-text-muted, #9aa0a6);
  padding: 0.55rem 0.25rem;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 0.78rem;
}
.page-editor__left-tabs button.is-active,
.page-editor__tabs button.is-active {
  color: #fff;
  box-shadow: inset 0 -2px 0 #3d6df2;
}
.page-editor__center {
  overflow: auto;
  padding: 0.5rem;
  max-height: calc(100vh - 6rem);
}
.page-editor__canvas-frame {
  margin: 0 auto;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 10px;
  background: #0b0d11;
  min-height: 70vh;
  /* overflow controlled below (.is-editing needs visible handles) */
  overflow: hidden;
}
.page-editor__crumbs { margin: 0 0 0.5rem; font-size: 0.85rem; }
.page-editor__crumb {
  background: none;
  border: 0;
  color: #9ec1ff;
  cursor: pointer;
  padding: 0;
}
.page-editor__layer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
}
.page-editor__layer.is-active,
.page-editor__layer:hover { background: rgba(255,255,255,0.06); }
.page-editor__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-editor__inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1rem;
}
.page-editor__image-field { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; }
.page-editor__search { margin: 0.5rem 0.75rem; width: calc(100% - 1.5rem); }
.page-editor__pages-rail,
.page-editor__revisions {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  display: grid;
  gap: 0.35rem;
}
.page-editor__pages-rail a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.page-editor__pages-rail a.is-active,
.page-editor__pages-rail a:hover { background: rgba(255,255,255,0.06); }
.page-editor__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
}
.page-editor__dot.is-live { background: #6dca8a; }
.page-editor__revisions li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 6px;
}
.page-editor__modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 1rem;
}
.page-editor__modal-card {
  background: #151922;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 12px;
  padding: 1.25rem;
  width: min(420px, 100%);
}
.page-editor__modal-card--wide { width: min(960px, 100%); max-height: 90vh; overflow: auto; }
.page-editor__modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.page-editor--index .page-editor__index-body { padding: 1.5rem; max-width: 52rem; }
.file-manager { padding: 0.5rem; }
.file-manager__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.file-manager__nav { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-bottom: 0.5rem; }
.file-manager__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.file-manager__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
}
.file-manager__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.45rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.file-manager__item.is-selected { border-color: #3d6df2; }
.file-manager__thumb {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}
.file-manager__icon { font-size: 1.5rem; }
.file-manager__name {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-manager__footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 0.5rem;
}
.file-manager__footer-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* �� Editor audit fixes �� */
.page-editor--preview .page-editor__body {
  grid-template-columns: 1fr;
}
.page-editor--left-collapsed:not(.page-editor--preview):not(.page-editor--right-collapsed) .page-editor__body {
  grid-template-columns: 1.25rem minmax(0, 1fr) minmax(15rem, 19rem);
}
.page-editor--right-collapsed:not(.page-editor--preview):not(.page-editor--left-collapsed) .page-editor__body {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) 1.25rem;
}
.page-editor--left-collapsed.page-editor--right-collapsed:not(.page-editor--preview) .page-editor__body {
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
}
.page-editor__left.is-collapsed,
.page-editor__right.is-collapsed {
  overflow: visible;
  min-width: 1.25rem;
  width: 1.25rem;
  padding: 0;
  border: 0;
}
.page-editor__rail-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 1.75rem;
  min-width: 28px;
  height: 2.75rem;
  min-height: 28px;
  padding: 0;
  border: none;
  box-shadow: var(--shadow-float-xs);
  background: #1a1f2a;
  color: #c5cad3;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.page-editor__rail-toggle--left { right: -0.85rem; }
.page-editor__rail-toggle--right { left: -0.85rem; }
.page-editor__left.is-collapsed .page-editor__rail-toggle--left {
  right: auto;
  left: 0;
}
.page-editor__right.is-collapsed .page-editor__rail-toggle--right {
  left: 0;
}
.page-editor__canvas-stage {
  min-height: 70vh;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(18, 21, 28, 0.55);
  display: flex;
  justify-content: center;
}
.page-editor__canvas-frame {
  position: relative;
  min-height: 70vh;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.page-editor__canvas-frame.is-editing {
  overflow: visible;
}
.page-editor__canvas-frame.is-editing a,
.page-editor__canvas-frame.is-editing button,
.page-editor__canvas-frame.is-editing input,
.page-editor__canvas-frame.is-editing select,
.page-editor__canvas-frame.is-editing textarea,
.page-editor__canvas-frame.is-editing [role='button'],
.page-editor__canvas-frame.is-editing [data-discord-invite] {
  pointer-events: none !important;
}
.page-editor__canvas-frame.is-editing [data-craft-node-id] {
  pointer-events: auto;
  min-height: 1.25rem;
}
.page-editor__canvas-frame.is-editing .page-editor__resize-handle,
.page-editor__canvas-frame.is-editing .page-editor__resize-layer,
.page-editor__canvas-frame.is-editing .page-editor__resize-box {
  pointer-events: none;
}
.page-editor__canvas-frame.is-editing .page-editor__resize-handle {
  pointer-events: auto !important;
}
.page-editor__canvas-frame.is-editing .craft-selected {
  outline: none;
  box-shadow: none;
}
.page-editor__canvas-frame.is-editing [data-craft-node-id][style*="display: none"],
.page-editor__canvas-frame.is-editing [data-craft-node-id][style*="display:none"] {
  display: block !important;
  opacity: 0.35 !important;
  outline: 1px dashed rgba(255, 255, 255, 0.28);
  pointer-events: none !important;
}
.page-editor__resize-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
.page-editor__resize-box {
  position: absolute;
  border: 1.5px solid rgba(61, 109, 242, 0.95);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.page-editor__resize-handle {
  pointer-events: auto !important;
  position: absolute;
  border: 0;
  background: #3d6df2;
  padding: 0;
  z-index: 41;
  box-sizing: border-box;
}
/* Full-edge hit targets so hovering the blue border works */
.page-editor__resize-handle--n,
.page-editor__resize-handle--s {
  left: 12px;
  right: 12px;
  width: auto;
  height: 12px;
  transform: none;
  border-radius: 2px;
  cursor: ns-resize;
  background: transparent;
}
.page-editor__resize-handle--n::after,
.page-editor__resize-handle--s::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 4px;
  transform: translate(-50%, -50%);
  background: #3d6df2;
  border-radius: 2px;
}
.page-editor__resize-handle--e,
.page-editor__resize-handle--w {
  top: 12px;
  bottom: 12px;
  height: auto;
  width: 12px;
  transform: none;
  border-radius: 2px;
  cursor: ew-resize;
  background: transparent;
}
.page-editor__resize-handle--e::after,
.page-editor__resize-handle--w::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: #3d6df2;
  border-radius: 2px;
}
.page-editor__resize-handle--n { top: -6px; }
.page-editor__resize-handle--s { bottom: -6px; }
.page-editor__resize-handle--e { right: -6px; }
.page-editor__resize-handle--w { left: -6px; }
.page-editor__resize-handle--ne,
.page-editor__resize-handle--nw,
.page-editor__resize-handle--se,
.page-editor__resize-handle--sw {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: #3d6df2;
  border: 2px solid #0b0d11;
}
.page-editor__resize-handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.page-editor__resize-handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.page-editor__resize-handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.page-editor__resize-handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.page-editor__layer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.page-editor__layer-select {
  flex: 1;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0.35rem 0.25rem;
}
.page-editor__layer-hide {
  font-size: 0.7rem;
  padding: 0.15rem 0.35rem;
}
.page-editor__template-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.page-editor__template-row a {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.page-editor__template-row a:hover {
  text-decoration: underline;
}

/* Grid section editor */
.irg-grid-section {
  display: grid;
  position: relative;
  width: 100%;
  min-height: 10rem;
  box-sizing: border-box;
  border: 1px dashed rgba(61, 109, 242, 0.35);
  border-radius: 8px;
}
.irg-grid-section.is-empty {
  background: rgba(61, 109, 242, 0.06);
}
.irg-grid-section.is-editing {
  background-image:
    linear-gradient(to right, rgba(61, 109, 242, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 109, 242, 0.12) 1px, transparent 1px);
  background-size: calc(100% / var(--irg-grid-cols, 12)) var(--irg-grid-row, 48px);
}
.irg-grid-section__handle {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: start;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #9ec1ff;
  background: rgba(26, 31, 42, 0.92);
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: grab;
  user-select: none;
  margin-bottom: 0.35rem;
  z-index: 2;
  box-shadow: var(--shadow-float-xs), inset 0 0 0 1px rgba(61, 109, 242, 0.45);
}
.irg-grid-section__handle:active {
  cursor: grabbing;
}
.irg-grid-section__placeholder {
  grid-column: 1 / -1;
  pointer-events: none;
  min-height: 6rem;
  display: grid;
  place-items: center;
  color: #8b93a7;
  font-size: 0.9rem;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 1rem;
}
.irg-grid-section__snap-ghost {
  pointer-events: none;
  position: absolute;
  background: rgba(61, 109, 242, 0.28);
  border: none;
  border-radius: 4px;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(61, 109, 242, 0.85);
}
.irg-grid-pad {
  margin: 0.5rem 0.75rem 0.75rem;
  padding: 0.65rem;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  background: #12151c;
}
.irg-grid-pad__label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.irg-grid-pad__hint {
  margin: 0.4rem 0;
  font-size: 0.75rem;
}
.irg-grid-pad__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  max-width: 9rem;
}
.irg-grid-pad__keys--span {
  grid-template-columns: 1fr 1fr;
  max-width: none;
  margin-top: 0.35rem;
}
.irg-grid-pad__keys .btn {
  min-height: 2rem;
  padding: 0.25rem;
}
.irg-grid-section > [data-craft-node-id] {
  min-width: 0;
  min-height: 1.5rem;
}
@media (max-width: 720px) {
  .irg-grid-section.stack-mobile {
    display: flex;
    flex-direction: column;
  }
  .irg-grid-section.stack-mobile > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Site theme tokens (fallbacks; overridden by ThemeProvider) */
:root {
  --irg-color-bg: var(--color-bg, #101014);
  --irg-color-surface: var(--color-surface, #18181b);
  --irg-color-text: var(--color-text, #fafafa);
  --irg-color-muted: var(--color-text-muted, #a1a1aa);
  --irg-color-accent: var(--color-accent, #b6ff2a);
  --irg-color-accent-hover: var(--color-accent-deep, #6ea810);
  --irg-btn-radius: 8px;
  --irg-btn-padding-y: 0.55rem;
  --irg-btn-padding-x: 1rem;
  --irg-btn-primary-bg: var(--color-accent, #b6ff2a);
  --irg-btn-primary-text: #111111;
}

/* GrapesJS editor shell */
.page-editor--gjs .page-editor__devices button.is-active,
.page-editor--gjs .page-editor__left-tabs button.is-active,
.page-editor--gjs .page-editor__tabs button.is-active {
  box-shadow: inset 0 -2px 0 var(--color-accent, #b6ff2a);
}
.page-editor--gjs .page-editor__devices button.is-active {
  background: rgba(182, 255, 42, 0.2);
}
.page-editor__body--gjs {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(15rem, 19rem);
  min-height: 0;
  flex: 1;
  height: auto;
  overflow: hidden;
}
.page-editor--left-collapsed:not(.page-editor--preview):not(.page-editor--right-collapsed) .page-editor__body--gjs {
  grid-template-columns: 1.25rem minmax(0, 1fr) minmax(15rem, 19rem);
}
.page-editor--right-collapsed:not(.page-editor--preview):not(.page-editor--left-collapsed) .page-editor__body--gjs {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) 1.25rem;
}
.page-editor--left-collapsed.page-editor--right-collapsed:not(.page-editor--preview) .page-editor__body--gjs {
  grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
}
.page-editor__center--gjs {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  max-height: none;
  height: auto;
  position: relative;
  background: #09090b;
}
.page-editor__wysiwyg {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #09090b;
}
.page-editor__wysiwyg--canvas-only {
  overflow: hidden;
}
.page-editor__wysiwyg-canvas {
  flex: 1;
  min-height: 0;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Floating surfaces (site-wide refinements) ── */
.table-wrap,
.admin-card,
.admin-section,
.match-card,
.lb-podium__card,
.lb-podium__stat,
.roster-panel,
.admin-game-card,
.ticket-list-shell,
.ticket-section,
.shop-detail,
.shop-custom,
.shop-preview,
.admin-slider,
.shop-float-nav,
.shop-list-row {
  box-shadow: var(--shadow-float);
}

.lb-search input,
.lb-season select,
.form input,
.form select,
.form textarea,
.admin-form input:not([type="checkbox"]):not([type="radio"]),
.admin-form select,
.admin-form textarea,
.admin-inline input:not([type="checkbox"]):not([type="radio"]),
.admin-inline select,
.account-form__field input,
.account-form__field select,
.shop-assets__main > input[type="search"],
.ticket-input,
.ticket-select,
.ticket-textarea,
.admin-cmd select,
.shop-admin-dd__btn,
.admin-shop-filters input,
.admin-shop-filters select {
  box-shadow: var(--shadow-input);
}

.lb-seg,
.lb-status,
.pill,
.admin-chip,
.discord-role,
.account-dropdown__level,
.account-trigger,
.header-status-chip {
  box-shadow: var(--shadow-float-xs);
}

.lb-seg button.is-active,
.lb-seg button[aria-pressed="true"] {
  box-shadow: var(--shadow-float-xs);
}

.queue-section,
.queue-card__footer,
.roster-row,
.profile-link-row,
.activity-list li,
.shop-card__visual {
  border: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.gjs-editor-host {
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}
.gjs-editor-host > .gjs-editor,
.gjs-editor-host .gjs-editor {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}
.page-editor--gjs .gjs-cv-canvas,
.page-editor--gjs .gjs-cv-canvas__frames,
.page-editor--gjs .gjs-frame-wrapper {
  height: 100% !important;
  min-height: 0;
}

/* Site CSS blows up Grapes SVG carets — pin them */
.page-editor--gjs .gjs-sm-sector-caret,
.page-editor--gjs .gjs-layer-caret,
.page-editor--gjs .gjs-caret-icon,
.page-editor--gjs .gjs-sm-sector-caret svg,
.page-editor--gjs .gjs-layer-caret svg,
.page-editor--gjs .gjs-caret-icon svg,
.page-editor--gjs .gjs-field-arrows,
.page-editor--gjs .gjs-field-arrow-u,
.page-editor--gjs .gjs-field-arrow-d {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.page-editor--gjs .gjs-field-arrow-u,
.page-editor--gjs .gjs-field-arrow-d {
  width: 0 !important;
  height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  border-left-width: 3px !important;
  border-right-width: 4px !important;
}
.page-editor--gjs .gjs-sm-sector .gjs-sm-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem;
  min-height: 2rem;
  max-height: 2.5rem;
  overflow: hidden;
}
.page-editor--gjs .gjs-sm-sector-label {
  flex: 1;
  min-width: 0;
}
.page-editor--gjs #gjs-styles,
.page-editor--gjs #gjs-traits,
.page-editor--gjs #gjs-layers,
.page-editor--gjs #gjs-blocks,
.page-editor--gjs #gjs-selectors {
  max-width: 100%;
  overflow-x: hidden;
}
.page-editor--gjs .gjs-sm-properties {
  max-width: 100%;
}
.page-editor--gjs .gjs-field input,
.page-editor--gjs .gjs-field select {
  max-width: 100%;
}
.page-editor--gjs .gjs-one-bg { background-color: #0f1218; }
.page-editor--gjs .gjs-two-color { color: #e8eaed; }
.page-editor--gjs .gjs-three-bg { background-color: #151922; }
.page-editor--gjs .gjs-four-color,
.page-editor--gjs .gjs-four-color-h:hover {
  color: var(--color-accent, #b6ff2a);
}
.page-editor--gjs .gjs-pn-panel,
.page-editor--gjs .gjs-blocks-c,
.page-editor--gjs .gjs-block {
  background: transparent;
  color: inherit;
}
.page-editor--gjs .gjs-block {
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 8px;
  min-height: 2.75rem;
}
.page-editor--gjs .gjs-block:hover {
  border-color: rgba(182, 255, 42, 0.45);
}
.page-editor--gjs .gjs-cv-canvas {
  background: #09090b;
  width: 100%;
  height: 100%;
  top: 0;
}
.page-editor--gjs .gjs-frame-wrapper {
  background: #09090b;
}
.page-editor--gjs .gjs-editor {
  height: 100%;
  background: #0b0d11 !important;
}
.page-editor--gjs .gjs-cv-canvas,
.page-editor--gjs .gjs-cv-canvas__frames,
.page-editor--gjs .gjs-frame-wrapper,
.page-editor--gjs .gjs-frames {
  background: #09090b !important;
}
.page-editor--gjs .gjs-frame {
  background: #09090b !important;
}
/* Grapes default chrome is light — force IRG dark shell */
.page-editor--gjs .gjs-one-bg,
.page-editor--gjs .gjs-two-color,
.page-editor--gjs .gjs-three-bg,
.page-editor--gjs .gjs-four-color,
.page-editor--gjs .gjs-pn-panel,
.page-editor--gjs .gjs-blocks-c,
.page-editor--gjs .gjs-block,
.page-editor--gjs .gjs-sm-sector,
.page-editor--gjs .gjs-trt-traits,
.page-editor--gjs .gjs-layer,
.page-editor--gjs .gjs-clm-tags,
.page-editor--gjs .gjs-sm-properties,
.page-editor--gjs .gjs-field,
.page-editor--gjs .gjs-field input,
.page-editor--gjs .gjs-field select,
.page-editor--gjs .gjs-select option,
.page-editor--gjs .gjs-sm-sector .gjs-sm-title,
.page-editor--gjs .gjs-category-title,
.page-editor--gjs .gjs-block-category .gjs-title {
  background-color: #0f1218 !important;
  color: #e8eaed !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.page-editor--gjs .gjs-four-color,
.page-editor--gjs .gjs-four-color-h:hover {
  color: var(--color-accent, #b6ff2a) !important;
}
.page-editor--gjs .gjs-block {
  border: none !important;
  box-shadow: var(--shadow-float-xs) !important;
  border-radius: 8px;
  min-height: 2.75rem;
  box-shadow: none !important;
}
.page-editor--gjs .gjs-block:hover {
  border-color: rgba(182, 255, 42, 0.45) !important;
}
.page-editor--gjs .gjs-mdl-dialog,
.page-editor--gjs .gjs-mdl-container {
  background: #151922 !important;
  color: #e8eaed !important;
  border: none;
  box-shadow: var(--shadow-float-xs);
}
.page-editor--gjs .gjs-am-assets {
  background: #0f1218 !important;
}
.page-editor__gjs-tools {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
}
.page-editor__gjs-tools .btn.is-active,
.page-editor--gjs .page-editor__devices button.is-active {
  background: rgba(182, 255, 42, 0.2);
  box-shadow: inset 0 -2px 0 var(--color-accent, #b6ff2a);
}
.gjs-editor-host .gjs-cv-canvas {
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.page-editor__live-view {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #09090b;
  overflow: hidden;
}
.page-editor__live-view-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(182, 255, 42, 0.3);
  background: #12151c;
}
.page-editor__live-view-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.page-editor__live-view .irg-grapes-page {
  min-height: 100%;
}
.irg-grapes-page .irg-island {
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.irg-draft-preview-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: #12151c;
  box-shadow: inset 0 -1px 0 rgba(182, 255, 42, 0.35);
  color: #e8eaed;
  font-size: 0.9rem;
}
.irg-draft-preview-bar__actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* ── Grapes native shell (full-viewport editor) ── */
.gjs-shell {
  /* High-contrast dark chrome — tools must stay readable */
  --gjs-main-color: #1c2330;
  --gjs-primary-color: #252d3b;
  --gjs-secondary-color: #f3f4f6;
  --gjs-tertiary-color: #d4ff5a;
  --gjs-quaternary-color: #ffffff;
  --gjs-font-color: #f3f4f6;
  --gjs-font-color-active: #ffffff;
  --gjs-main-dark-color: #0f131a;
  --gjs-secondary-dark-color: #161b24;
  --gjs-main-light-color: rgba(255, 255, 255, 0.14);
  --gjs-secondary-light-color: #e5e7eb;
  --gjs-soft-light-color: rgba(255, 255, 255, 0.06);
  --gjs-color-blue: #6b9aff;
  --gjs-color-highlight: #d4ff5a;
  --gjs-color-green: #7ddea0;
  --gjs-arrow-color: #d1d5db;
  --gjs-light-border: rgba(255, 255, 255, 0.18);
  --gjs-left-width: 280px;
  --gjs-canvas-top: 44px;
  --gjs-font-size: 0.8125rem;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0b0d11;
  color: #f3f4f6;
  overflow: hidden;
}
.gjs-shell__bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  background: #171c26;
  z-index: 20;
  color: #f3f4f6;
}
.gjs-shell__bar .btn,
.gjs-shell__bar .btn-ghost,
.gjs-shell__bar a.btn {
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: #252d3b !important;
}
.gjs-shell__bar .btn:hover,
.gjs-shell__bar .btn-ghost:hover,
.gjs-shell__bar a.btn:hover {
  background: #323b4d !important;
  border-color: rgba(212, 255, 90, 0.45) !important;
  color: #fff !important;
}
.gjs-shell__bar .page-editor__publish {
  background: #3d6df2 !important;
  border-color: #5b8def !important;
  color: #fff !important;
}
.gjs-shell__bar .page-editor__devices {
  border-color: rgba(255, 255, 255, 0.28);
  background: #1c2330;
}
.gjs-shell__bar .page-editor__devices button {
  color: #e5e7eb !important;
  background: transparent;
}
.gjs-shell__bar .page-editor__devices button.is-active {
  background: rgba(107, 154, 255, 0.35) !important;
  color: #fff !important;
}
.gjs-shell__bar .muted,
.gjs-shell__meta {
  color: #c5cad3 !important;
}
.gjs-shell__bar-left,
.gjs-shell__bar-center,
.gjs-shell__bar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.gjs-shell__title { font-size: 0.95rem; color: #fff; }
.gjs-shell__meta { font-size: 0.8rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gjs-shell__main {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #09090b;
}
.gjs-shell__mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gjs-shell__mount.gjs-editor,
.gjs-shell__mount > .gjs-editor {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* Grapes panels / fields — force readable contrast */
.gjs-shell .gjs-one-bg { background-color: #252d3b !important; }
.gjs-shell .gjs-two-color,
.gjs-shell .gjs-four-color,
.gjs-shell .gjs-pn-btn,
.gjs-shell .gjs-title,
.gjs-shell .gjs-label,
.gjs-shell .gjs-category-title,
.gjs-shell .gjs-sm-sector .gjs-sm-title,
.gjs-shell .gjs-sm-label,
.gjs-shell .gjs-layer-name,
.gjs-shell .gjs-trt-trait__label,
.gjs-shell .gjs-clm-tag,
.gjs-shell .gjs-block-label,
.gjs-shell .gjs-block-category .gjs-title {
  color: #f3f4f6 !important;
}
.gjs-shell .gjs-four-color-h:hover,
.gjs-shell .gjs-pn-btn:hover {
  color: #d4ff5a !important;
}
.gjs-shell .gjs-pn-panel,
.gjs-shell .gjs-pn-views,
.gjs-shell .gjs-pn-views-container,
.gjs-shell .gjs-pn-options,
.gjs-shell .gjs-pn-devices-c,
.gjs-shell .gjs-blocks-c,
.gjs-shell .gjs-sm-sectors,
.gjs-shell .gjs-sm-sector,
.gjs-shell .gjs-layers,
.gjs-shell .gjs-layer,
.gjs-shell .gjs-trt-traits,
.gjs-shell .gjs-clm-tags {
  background-color: #1c2330 !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.gjs-shell .gjs-block {
  background: #2a3344 !important;
  border: none !important;
  box-shadow: var(--shadow-float-sm) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 8px;
  min-height: 2.75rem;
}
.gjs-shell .gjs-block:hover {
  border-color: rgba(212, 255, 90, 0.55) !important;
  background: #323c50 !important;
}
.gjs-shell .gjs-field,
.gjs-shell .gjs-field input,
.gjs-shell .gjs-field select,
.gjs-shell .gjs-field textarea,
.gjs-shell .gjs-select,
.gjs-shell .gjs-clm-field {
  background: #0f131a !important;
  color: #f9fafb !important;
  border: none !important;
  box-shadow: var(--shadow-float-sm) !important;
}
.gjs-shell .gjs-field input::placeholder {
  color: #9ca3af !important;
}
.gjs-shell .gjs-sm-properties,
.gjs-shell .gjs-trt-trait {
  color: #f3f4f6 !important;
}
.gjs-shell .gjs-cv-canvas {
  background: #12151c !important;
}
.gjs-shell .gjs-frame-wrapper {
  background: #09090b !important;
}

/* Site CSS leaves Grapes SVGs at intrinsic ~300px — pin every chrome icon */
.gjs-shell .gjs-toolbar,
.gjs-shell .gjs-toolbar-item {
  max-width: none;
  line-height: 1;
}
.gjs-shell .gjs-toolbar {
  background: #3d6df2 !important;
}
.gjs-shell .gjs-toolbar-item {
  width: 26px !important;
  height: 26px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #fff !important;
}
.gjs-shell .gjs-toolbar-item svg,
.gjs-shell .gjs-pn-btn svg,
.gjs-shell .gjs-pn-buttons svg,
.gjs-shell .gjs-block svg,
.gjs-shell .gjs-layer-caret svg,
.gjs-shell .gjs-sm-sector-caret svg,
.gjs-shell .gjs-caret-icon svg,
.gjs-shell .gjs-fields svg,
.gjs-shell .gjs-clm-tags svg,
.gjs-shell .gjs-trt-trait svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block !important;
  fill: currentColor !important;
}
.gjs-shell .gjs-pn-btn {
  min-width: 30px;
  min-height: 30px;
  color: #f3f4f6 !important;
}
.gjs-shell .gjs-sm-sector-caret,
.gjs-shell .gjs-layer-caret,
.gjs-shell .gjs-caret-icon {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
  color: #e5e7eb !important;
}
.gjs-shell img {
  max-width: 100%;
  height: auto;
}
.gjs-shell .gjs-toolbar img,
.gjs-shell .gjs-pn-btn img {
  max-width: 16px !important;
  max-height: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* Grapes modals viewport-fixed — never force display:flex (locks grey overlay forever) */
.gjs-shell .gjs-mdl-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65) !important;
  pointer-events: auto;
}
.gjs-shell .gjs-mdl-container:not(:has(.gjs-mdl-dialog)),
.gjs-shell .gjs-mdl-container:empty {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
}
.gjs-shell .gjs-mdl-dialog {
  position: relative !important;
  max-width: min(920px, 94vw) !important;
  max-height: 86vh !important;
  overflow: auto !important;
  margin: auto !important;
  background: #151922 !important;
  color: #e8eaed !important;
  border: none;
  box-shadow: var(--shadow-float-xs);
  border-radius: 10px;
}
.gjs-shell__live {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #09090b;
}
.gjs-shell__live-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  box-shadow: inset 0 -1px 0 rgba(182, 255, 42, 0.3);
  background: #12151c;
}
.gjs-shell__live-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.gjs-shell__drawer {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  justify-content: flex-end;
}
.gjs-shell__drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}
.gjs-shell__drawer-panel {
  position: relative;
  width: min(26rem, 92vw);
  height: 100%;
  background: #0f1218;
  border-left: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.gjs-shell__drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  text-transform: capitalize;
}
.gjs-shell__drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem 1rem 1.5rem;
}
.gjs-shell__code { display: grid; gap: 0.5rem; }
.gjs-shell__code-area {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  min-height: 8rem;
}

/* Premium public motion + density */
.irg-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.btn .irg-icon {
  margin-inline: 0;
}

@keyframes irg-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes irg-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition: opacity var(--ease-out), transform var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition: opacity var(--ease-out), transform var(--ease-out);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--motion-stagger) * 6); }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--motion-stagger) * 7); }

.member-card,
.shop-card,
.achieve-card,
.queue-card {
  transition: transform var(--ease-out), box-shadow var(--ease-out);
}

.member-card:hover,
.shop-card:hover,
.achieve-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float-hover);
}

@media (max-width: 767px) {
  .section {
    padding: var(--space-10) var(--space-4);
  }

  main.section,
  #content.section,
  main#content.section {
    padding-top: calc(var(--header-offset) + var(--space-10));
  }

  .section-head {
    margin-bottom: var(--space-6);
  }

  .home-split {
    gap: var(--space-6);
  }

  #announcements .container.home-split {
    max-width: var(--container);
    justify-content: center;
  }

  #announcements .home-split > :first-child,
  #announcements .home-split > .discord-widget,
  #announcements .home-split > aside.discord-widget {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .home-split > .discord-widget,
  .home-split > aside.discord-widget {
    max-width: 100%;
    position: static;
  }

  .profile:not(.has-cosmetic-banner) > .profile-hero,
  .profile-overview:not(.has-cosmetic-banner) > .profile-hero {
    min-height: 10rem;
    padding: var(--space-12) var(--space-4) var(--space-4);
  }

  .hero--home {
    min-height: min(24rem, 56svh);
    padding: calc(var(--header-offset) + var(--space-8)) 0 var(--space-10);
  }

  .hero--home .hero__brand {
    width: clamp(6rem, 22vw, 10rem);
  }

  .hero--home .hero__content {
    padding: 0;
  }

  .btn,
  .btn-lg,
  .mobile-panel .nav-link {
    min-height: 2.75rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section {
    padding: var(--space-12) var(--space-4);
  }

  main.section,
  #content.section,
  main#content.section {
    padding-top: calc(var(--header-offset) + var(--space-12));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .reveal.is-visible,
  .reveal-stagger.is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lb-status[data-state="live"]::before {
    animation: none !important;
  }

  .activity-card:hover,
  .announcement-card:hover,
  .member-card:hover,
  .shop-card:hover,
  .achieve-card:hover,
  .btn-accent:hover,
  .btn-discord:hover {
    transform: none;
  }

  .mobile-panel {
    transition: none;
  }
}