@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100%;
  /* Reserve scrollbar space so layout stays stable when content height changes (e.g. filtered lists) */
  scrollbar-gutter: stable;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: var(--bg-void);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

a {
  color: var(--text-primary);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
a:hover {
  color: var(--color-accent);
}
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

::-moz-selection {
  background: var(--color-primary);
  color: var(--text-primary);
}

::selection {
  background: var(--color-primary);
  color: var(--text-primary);
}

h1, .h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
}

h2, .h2, .events-article__title, .news-article__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
}

h3, .h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

h4, .h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

h5, .h5 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

h6, .h6 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}
p:last-child {
  margin-bottom: 0;
}

small, .text-sm {
  font-size: 0.8125rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

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

.text-accent {
  color: var(--color-accent) !important;
}

.text-xp {
  color: var(--color-xp) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.font-mono {
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 150ms ease, color 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
}

.btn--primary, .btn--upload {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover, .btn--upload:hover {
  background: var(--color-primary-hover);
  color: #fff;
  -webkit-box-shadow: var(--shadow-glow);
          box-shadow: var(--shadow-glow);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.btn--primary:focus-visible, .btn--upload:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn--primary:disabled, .btn--upload:disabled {
  opacity: 0.4;
  pointer-events: none;
  -webkit-transform: none;
          transform: none;
}

.btn--upload i {
  font-size: 0.8125rem;
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn--secondary {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border: 1px solid var(--border-glow);
}
.btn--secondary:hover {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  -webkit-box-shadow: 0 0 16px var(--color-accent-muted);
          box-shadow: 0 0 16px var(--color-accent-muted);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.btn--secondary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
}
.btn--danger:hover {
  background: var(--color-danger);
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
  -webkit-box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
          box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.btn--danger:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-grid {
  display: -ms-grid !important;
  display: grid !important;
}

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.gap-xs {
  gap: 0.25rem;
}

.gap-sm {
  gap: 0.5rem;
}

.gap-md {
  gap: 1rem;
}

.gap-lg {
  gap: 1.5rem;
}

.gap-xl {
  gap: 2rem;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-md {
  margin-top: 1rem;
}

.mb-md {
  margin-bottom: 1rem;
}

.mt-lg {
  margin-top: 1.5rem;
}

.mb-lg {
  margin-bottom: 1.5rem;
}

.mt-xl {
  margin-top: 2rem;
}

.mb-xl {
  margin-bottom: 2rem;
}

.w-100 {
  width: 100%;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.pointer {
  cursor: pointer;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

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

body.mce-content-body {
  margin: 0;
  padding: 12px 14px;
  min-height: 100%;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #f4f4f5;
  background: #141414;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body.mce-content-body a {
  color: #3b82f6;
}
body.mce-content-body a:hover {
  color: #60a5fa;
}
body.mce-content-body p {
  margin: 0 0 1em;
}
body.mce-content-body p:last-child {
  margin-bottom: 0;
}
body.mce-content-body blockquote {
  border-left: 3px solid #00d4ff;
  margin: 1em 0;
  padding: 0.25em 0 0.25em 1em;
  color: #a1a1aa;
}
body.mce-content-body hr {
  border: none;
  border-top: 1px solid #27272a;
  margin: 1.25em 0;
}
body.mce-content-body code,
body.mce-content-body kbd {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: #1a1a1a;
  border: 1px solid #27272a;
}
body.mce-content-body pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: #1a1a1a;
  border: 1px solid #27272a;
  overflow-x: auto;
}
body.mce-content-body img {
  max-width: 100%;
  height: auto;
}
body.mce-content-body ul,
body.mce-content-body ol {
  list-style-position: outside;
  margin: 0 0 1em;
  padding-left: 1.75em;
  -webkit-padding-start: 1.75em;
          padding-inline-start: 1.75em;
}
body.mce-content-body ul {
  list-style-type: disc;
}
body.mce-content-body ol {
  list-style-type: decimal;
}
body.mce-content-body li {
  display: list-item;
  margin: 0.2em 0;
}
body.mce-content-body ul ul,
body.mce-content-body ol ol {
  margin-bottom: 0.35em;
}
body.mce-content-body ul ul {
  list-style-type: circle;
}
body.mce-content-body *::-moz-selection {
  background: rgba(0, 212, 255, 0.25);
}
body.mce-content-body *::selection {
  background: rgba(0, 212, 255, 0.25);
}

[data-theme=dark] {
  --bg-void: #0a0a0a;
  --bg-surface: #141414;
  --bg-elevated: #1a1a1a;
  --bg-panel: rgba(20, 20, 20, 0.92);
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-muted: rgba(59, 130, 246, 0.12);
  --color-accent: #00d4ff;
  --color-accent-muted: rgba(0, 212, 255, 0.08);
  --color-xp: #fbbf24;
  --color-xp-muted: rgba(251, 191, 36, 0.12);
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-inverse: #0a0a0a;
  --border-color: #27272a;
  --border-glow: rgba(0, 212, 255, 0.35);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px rgba(0, 212, 255, 0.2);
  --grid-color: rgba(255, 255, 255, 0.02);
  --grid-color-active: rgba(0, 212, 255, 0.06);
  --particle-color: rgba(0, 212, 255, 0.25);
  --hero-overlay-edge: var(--bg-void);
  --hero-overlay-mid: rgba(10, 10, 10, 0.55);
  --hero-text: #f4f4f5;
  --hero-text-sub: rgba(244, 244, 245, 0.7);
  --hero-text-muted: rgba(244, 244, 245, 0.45);
  --hero-text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  --shimmer-highlight: rgba(255, 255, 255, 0.06);
  --item-hover-bg: rgba(0, 212, 255, 0.05);
  --item-hover-glow: rgba(0, 212, 255, 0.15);
  --section-bg: #0f0f0f;
  --section-bg-alt: #141414;
  --card-bg: #1a1a1a;
  --card-border: #27272a;
  --step-icon-bg: rgba(0, 212, 255, 0.08);
  --step-icon-color: #00d4ff;
  --step-line: #27272a;
  --stat-bar-bg: rgba(255, 255, 255, 0.04);
  --scrollbar-track: #141414;
  --scrollbar-thumb: #27272a;
  --scrollbar-hover: #3b82f6;
}

[data-theme=light] {
  --bg-void: #f2f5f9;
  --bg-surface: #ffffff;
  --bg-elevated: #e8edf4;
  --bg-panel: rgba(255, 255, 255, 0.9);
  --color-primary: #1b6ef5;
  --color-primary-hover: #0d5ad4;
  --color-primary-muted: rgba(27, 110, 245, 0.08);
  --color-accent: #0094b3;
  --color-accent-muted: rgba(0, 148, 179, 0.08);
  --color-xp: #d4870a;
  --color-xp-muted: rgba(212, 135, 10, 0.1);
  --color-success: #0ea85e;
  --color-danger: #dc2e4a;
  --color-warning: #d4870a;
  --text-primary: #0d1424;
  --text-secondary: #5a6a80;
  --text-muted: #8899b4;
  --text-inverse: #f0f2f5;
  --border-color: #d0dae8;
  --border-glow: rgba(27, 110, 245, 0.15);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 20, 60, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 20, 60, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 20, 60, 0.12);
  --shadow-glow: 0 0 20px rgba(27, 110, 245, 0.1);
  --grid-color: rgba(27, 110, 245, 0.03);
  --grid-color-active: rgba(27, 110, 245, 0.06);
  --particle-color: rgba(27, 110, 245, 0.2);
  --hero-overlay-edge: rgba(242, 245, 249, 0.75);
  --hero-overlay-mid: rgba(15, 20, 35, 0.5);
  --hero-text: #f4f4f5;
  --hero-text-sub: rgba(244, 244, 245, 0.75);
  --hero-text-muted: rgba(244, 244, 245, 0.5);
  --hero-text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  --shimmer-highlight: rgba(0, 0, 0, 0.04);
  --item-hover-bg: rgba(27, 110, 245, 0.06);
  --item-hover-glow: rgba(27, 110, 245, 0.12);
  --section-bg: #f2f5f9;
  --section-bg-alt: #ffffff;
  --card-bg: #ffffff;
  --card-border: #d0dae8;
  --step-icon-bg: rgba(0, 148, 179, 0.08);
  --step-icon-color: #0094b3;
  --step-line: #d0dae8;
  --stat-bar-bg: rgba(0, 20, 60, 0.04);
  --scrollbar-track: #e8edf4;
  --scrollbar-thumb: #d0dae8;
  --scrollbar-hover: #1b6ef5;
}

.site {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.site__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 992px) {
  .site__content,
  .site-footer {
    margin-left: 60px;
  }
  .home .site__content,
  .home .site-footer {
    margin-left: 0;
  }
}
.sidebar {
  display: none;
}
@media (min-width: 992px) {
  .sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    z-index: 201;
    overflow: hidden;
  }
}

.sidebar__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 56px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 992px) {
  .sidebar__head {
    height: 64px;
  }
}

.sidebar__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-secondary);
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.sidebar__toggle:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
}
.sidebar__toggle i {
  font-size: 1.125rem;
}

.sidebar__nav {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.sidebar__nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sidebar__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 100%;
  height: 42px;
  padding-left: calc((60px - 20px) / 2);
  color: var(--text-secondary);
  white-space: nowrap;
  position: relative;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.sidebar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--color-accent);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}
.sidebar__item:hover {
  color: var(--text-primary);
  background: var(--item-hover-bg);
}
.sidebar__item:hover::before {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.sidebar__item.is-active::before {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.sidebar__icon {
  width: 20px;
  text-align: center;
  font-size: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1;
}

.sidebar__label {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  width: 0;
  overflow: hidden;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.sidebar.is-expanded .sidebar__label, .sidebar.is-peeking .sidebar__label {
  opacity: 1;
  width: auto;
}

.sidebar__arrow {
  font-size: 0.5rem;
  margin-left: auto;
  margin-right: 1.5rem;
  opacity: 0;
  width: 0;
  overflow: hidden;
  -webkit-transition: opacity 150ms ease, -webkit-transform 250ms ease;
  transition: opacity 150ms ease, -webkit-transform 250ms ease;
  transition: opacity 150ms ease, transform 250ms ease;
  transition: opacity 150ms ease, transform 250ms ease, -webkit-transform 250ms ease;
}
.sidebar.is-expanded .sidebar__arrow, .sidebar.is-peeking .sidebar__arrow {
  opacity: 0.4;
  width: auto;
}
.sidebar__group.is-open .sidebar__arrow {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  opacity: 1;
}

.sidebar__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #ff3b5c;
  border-radius: 9px;
  margin-left: auto;
  margin-right: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.sidebar.is-expanded .sidebar__badge, .sidebar.is-peeking .sidebar__badge {
  opacity: 1;
  width: auto;
}
.sidebar__badge--pin {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  min-width: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  opacity: 1;
  overflow: hidden;
  border: 2px solid var(--bg-void);
}
.sidebar.is-expanded .sidebar__badge--pin, .sidebar.is-peeking .sidebar__badge--pin {
  display: none;
}

.sidebar__subitem--with-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
}

.sidebar__subitem-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #ff3b5c;
  border-radius: 9px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.sidebar__group {
  position: relative;
}

.sidebar__submenu {
  display: none;
  overflow: hidden;
}
.sidebar.is-expanded .sidebar__submenu, .sidebar.is-peeking .sidebar__submenu {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 250ms ease;
  transition: grid-template-rows 250ms ease;
  transition: grid-template-rows 250ms ease, -ms-grid-rows 250ms ease;
}
.sidebar.is-expanded .sidebar__group.is-open .sidebar__submenu, .sidebar.is-peeking .sidebar__group.is-open .sidebar__submenu {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
}

.sidebar__submenu-inner {
  min-height: 0;
}

.sidebar__subitem {
  display: block;
  padding: 7px 1.5rem 7px calc(calc((60px - 20px) / 2) + 20px + 1rem);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
  position: relative;
}
.sidebar__subitem::before {
  content: "";
  position: absolute;
  left: calc(calc((60px - 20px) / 2) + 20px / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
}
.sidebar__subitem:hover {
  color: var(--color-accent);
  background: var(--item-hover-bg);
}

.sidebar__divider {
  height: 1px;
  margin: 0.5rem calc((60px - 20px) / 2);
  background: var(--border-subtle);
}
.sidebar.is-expanded .sidebar__divider, .sidebar.is-peeking .sidebar__divider {
  margin-inline: 1.5rem;
}

.sidebar__foot {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-subtle);
}

.sidebar__backdrop {
  display: none;
}
@media (min-width: 992px) {
  .sidebar__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 250ms ease, visibility 250ms ease;
    transition: opacity 250ms ease, visibility 250ms ease;
  }
  .sidebar__backdrop.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  min-height: 56px;
}
@media (min-width: 992px) {
  .site-header {
    min-height: 64px;
  }
}

.site-header__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  min-height: 56px;
  min-width: 0;
  overflow: visible;
}
@media (min-width: 992px) {
  .site-header__inner {
    gap: 1rem;
    min-height: 64px;
    padding-left: 60px;
  }
}

.site-header__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 0;
}
.site-header__logo img {
  height: 26px;
  width: auto;
}
@media (min-width: 768px) {
  .site-header__logo img {
    height: 32px;
  }
}
@media (min-width: 992px) {
  .site-header__logo img {
    height: 36px;
  }
}

.site-header__search {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  max-width: 560px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: 0.5rem;
  overflow: visible;
}
@media (min-width: 576px) {
  .site-header__search {
    padding-inline: 1rem;
  }
}
.site-header__search .search-bar {
  max-width: 100%;
  width: 100%;
}

.site-header__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 0;
}
@media (min-width: 768px) {
  .site-header__actions {
    gap: 0.5rem;
  }
}
@media (min-width: 992px) {
  .site-header__actions {
    gap: 1rem;
  }
}

.nav-search__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, box-shadow 150ms ease;
  transition: color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.nav-search__toggle:hover {
  color: var(--color-accent);
  -webkit-box-shadow: 0 0 16px var(--color-accent-muted);
          box-shadow: 0 0 16px var(--color-accent-muted);
}
@media (min-width: 992px) {
  .nav-search__toggle {
    display: none;
  }
}

.nav-search--expandable {
  width: 0;
  overflow: hidden;
  -webkit-transition: width 250ms ease;
  transition: width 250ms ease;
}
.nav-search--expandable.is-open {
  width: 200px;
}

.nav-search__input {
  width: 100%;
  min-width: 180px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.nav-search__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.nav-search__input::-moz-placeholder {
  color: var(--text-muted);
}
.nav-search__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.nav-search__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.nav-search__input::placeholder {
  color: var(--text-muted);
}

.nav-icon-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, box-shadow 150ms ease;
  transition: color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.nav-icon-btn:hover {
  color: var(--color-accent);
  -webkit-box-shadow: 0 0 16px var(--color-accent-muted);
          box-shadow: 0 0 16px var(--color-accent-muted);
}

.site-header__user {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  margin-left: 0.25rem;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
  min-width: 0;
}
@media (min-width: 768px) {
  .site-header__user {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    gap: 0.5rem;
  }
}
@media (min-width: 992px) {
  .site-header__user {
    padding: 0.25rem 1rem 0.25rem 0.5rem;
    gap: 1rem;
  }
}
.site-header__user:hover {
  border-color: var(--border-glow);
  -webkit-box-shadow: 0 0 16px var(--color-accent-muted);
          box-shadow: 0 0 16px var(--color-accent-muted);
}

.show-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 992px) {
  .show-mobile {
    display: none !important;
  }
}

.nav-menu-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  font-size: 1rem;
  -webkit-transition: color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, box-shadow 150ms ease;
  transition: color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.nav-menu-mobile:hover {
  color: var(--color-accent);
  -webkit-box-shadow: 0 0 16px var(--color-accent-muted);
          box-shadow: 0 0 16px var(--color-accent-muted);
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 250ms ease, visibility 250ms ease;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.nav-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 992px) {
  .nav-drawer-overlay {
    display: none !important;
  }
}

.nav-drawer-overlay[hidden] {
  display: none !important;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  max-width: 320px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-color);
  -webkit-box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  z-index: 401;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
  overflow: hidden;
}
.nav-drawer.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
@media (min-width: 992px) {
  .nav-drawer {
    display: none !important;
  }
}

.nav-drawer[hidden] {
  display: none !important;
}

.nav-drawer__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.nav-drawer__logo img {
  height: 32px;
  width: auto;
}

.nav-drawer__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.nav-drawer__close:hover {
  color: var(--color-accent);
}

.nav-drawer__nav {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.nav-drawer__link {
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  -webkit-transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.nav-drawer__link:hover {
  background: var(--color-accent-muted);
  border-left-color: var(--color-accent);
}

.nav-drawer__accordion {
  border-bottom: 1px solid var(--border-subtle);
}

.nav-drawer__accordion-trigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.nav-drawer__accordion-trigger:hover {
  background: var(--color-accent-muted);
}
.nav-drawer__accordion-trigger[aria-expanded=true] {
  border-left-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.nav-drawer__accordion-panel {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 250ms ease;
  transition: grid-template-rows 250ms ease;
  transition: grid-template-rows 250ms ease, -ms-grid-rows 250ms ease;
}
.nav-drawer__accordion-panel.is-open {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
}

.nav-drawer__accordion-inner {
  min-height: 0;
  overflow: hidden;
}
.nav-drawer__accordion-inner a {
  display: block;
  padding: 0.5rem 1.5rem 0.5rem 2rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.nav-drawer__accordion-inner a:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
}

.nav-drawer__footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.nav-drawer__identity {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease, color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.nav-drawer__identity:hover {
  border-color: var(--border-glow);
  color: var(--color-accent);
  -webkit-box-shadow: 0 0 12px var(--color-accent-muted);
          box-shadow: 0 0 12px var(--color-accent-muted);
}

.nav-drawer__accordion--footer {
  border-bottom: none;
}

.nav-drawer__accordion-trigger .nav-drawer__mod-badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.nav-drawer__mod-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: #ff3b5c;
  border-radius: 10px;
}

.nav-drawer__logout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  -webkit-transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.nav-drawer__logout:hover {
  color: var(--color-danger);
  border-color: rgba(255, 59, 92, 0.4);
  background: rgba(255, 59, 92, 0.08);
}

.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding-block: 3rem;
}

.site-footer__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.site-footer__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  padding-bottom: 3rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 576px) {
  .site-footer__top {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.site-footer__sml {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  color: var(--text-secondary);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.site-footer__sml:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.site-footer__sml-logo {
  height: 36px;
  width: auto;
  opacity: 0.9;
}

[data-theme=light] .site-footer__sml-logo {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.site-footer__sml-text {
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-footer__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}

.site-footer__social-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.site-footer__social-link:hover {
  color: var(--color-accent);
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
  text-decoration: none;
}
.site-footer__social-link .fa-brands {
  color: inherit;
}

.site-footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 576px) {
  .site-footer__nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.site-footer__quick,
.site-footer__legal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem 1.5rem;
}
.site-footer__quick a,
.site-footer__legal a {
  color: var(--text-muted);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.site-footer__quick a:hover,
.site-footer__legal a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.site-footer__legal {
  gap: 1.5rem;
}

.site-footer__copy {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
}
.upload-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.upload-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.upload-modal__panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}
.upload-modal__panel::-webkit-scrollbar {
  width: 4px;
}
.upload-modal__panel::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.upload-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.upload-modal__step-indicator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
}

.upload-modal__step-dot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border-color);
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
.upload-modal__step-dot.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-muted);
}
.upload-modal__step-dot.is-complete {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.upload-modal__step-line {
  width: 32px;
  height: 2px;
  background: var(--border-color);
  -webkit-transition: background 250ms ease;
  transition: background 250ms ease;
}
.upload-modal__step-dot.is-active + .upload-modal__step-line, .upload-modal__step-dot.is-complete + .upload-modal__step-line {
  background: var(--color-accent);
}

.upload-modal__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text-muted);
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.upload-modal__close:hover {
  color: var(--text-primary);
  background: var(--item-hover-bg);
}
.upload-modal__close i {
  font-size: 1rem;
}

.upload-modal__step {
  display: none;
}
.upload-modal__step.is-active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.upload-modal__step-content {
  padding: 3rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.upload-modal__icon-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent-muted);
  color: var(--color-accent);
  font-size: 1.375rem;
}

.upload-modal__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.upload-modal__subtitle {
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.5;
}

.upload-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem 2rem;
  border-top: 1px solid var(--border-subtle);
}

.upload-modal__trophy-search {
  width: 100%;
  max-width: 520px;
  position: relative;
}

.upload-modal__search-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.upload-modal__search-icon {
  position: absolute;
  left: 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

.upload-modal__search-input {
  width: 100%;
  padding: 1rem 1.5rem 1rem 2.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.upload-modal__search-input:focus {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 1px var(--border-glow);
          box-shadow: 0 0 0 1px var(--border-glow);
}
.upload-modal__search-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.upload-modal__search-input::-moz-placeholder {
  color: var(--text-muted);
}
.upload-modal__search-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.upload-modal__search-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.upload-modal__search-input::placeholder {
  color: var(--text-muted);
}

.upload-modal__search-spinner {
  position: absolute;
  right: 1rem;
  color: var(--color-accent);
  display: none;
}

.upload-modal__search-results {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: 320;
  pointer-events: auto;
  display: none;
}
.upload-modal__search-results.is-visible {
  display: block;
}

.upload-modal__catalogue-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-void);
  position: sticky;
  top: 0;
  z-index: 2;
}

.upload-modal__catalogue-back {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}
.upload-modal__catalogue-back:hover {
  text-decoration: underline;
}

.upload-modal__catalogue-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-modal__suggested-cta {
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.upload-modal__suggested-btn {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.upload-modal__result-rows {
  min-height: 0;
}

.upload-modal__load-more {
  padding: 0.5rem 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.upload-modal__result-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 10px 1.5rem;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
  -webkit-animation: uploadResultEnter 200ms ease forwards;
          animation: uploadResultEnter 200ms ease forwards;
  -webkit-animation-delay: calc(var(--i, 0) * 30ms);
          animation-delay: calc(var(--i, 0) * 30ms);
  opacity: 0;
}
.upload-modal__result-item:hover {
  background: var(--item-hover-bg);
}
.upload-modal__result-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

@-webkit-keyframes uploadResultEnter {
  from {
    opacity: 0;
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes uploadResultEnter {
  from {
    opacity: 0;
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.upload-modal__result-img {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

.upload-modal__result-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.upload-modal__result-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: left;
}

.upload-modal__result-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-modal__result-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.upload-modal__no-results {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.upload-modal__no-results i {
  margin-right: 0.25rem;
}

.upload-modal__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.upload-modal__badge i {
  font-size: 0.5rem;
}
.upload-modal__badge--platinum {
  color: #7ab7e8;
  background: rgba(122, 183, 232, 0.12);
  border: 1px solid rgba(122, 183, 232, 0.2);
}
.upload-modal__badge--gold {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.18);
}
.upload-modal__badge--silver {
  color: #c0c0c0;
  background: rgba(192, 192, 192, 0.08);
  border: 1px solid rgba(192, 192, 192, 0.15);
}
.upload-modal__badge--bronze {
  color: #cd7f32;
  background: rgba(205, 127, 50, 0.1);
  border: 1px solid rgba(205, 127, 50, 0.18);
}

.upload-modal__selected-trophy {
  width: 100%;
  max-width: 520px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.upload-modal__selected-trophy::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.upload-modal__selected-trophy:hover::before {
  opacity: 1;
}
.upload-modal__selected-trophy {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.upload-modal__selected-trophy-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.upload-modal__selected-trophy-img {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

.upload-modal__selected-trophy-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: left;
}

.upload-modal__selected-trophy-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-modal__selected-trophy-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.upload-modal__change-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.upload-modal__change-btn:hover {
  opacity: 0.7;
}
.upload-modal__change-btn i {
  font-size: 0.625rem;
  margin-right: 2px;
}

.upload-modal__dropzone {
  width: 100%;
  max-width: 520px;
  min-height: 240px;
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
  position: relative;
  overflow: hidden;
}
.upload-modal__dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.upload-modal__dropzone-idle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-muted);
}
.upload-modal__dropzone-idle > i {
  font-size: 2.5rem;
  color: var(--color-accent);
  opacity: 0.6;
}
.upload-modal__dropzone-idle span {
  font-size: 0.875rem;
}

.upload-modal__dropzone-or {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.6;
}

.upload-modal__dropzone-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.upload-modal__dropzone-preview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
}
.upload-modal__dropzone-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 320px;
  padding: 0.5rem;
}

.upload-modal__remove-img {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.upload-modal__remove-img:hover {
  background: var(--color-danger);
}

.upload-modal__review {
  width: 100%;
  max-width: 520px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.upload-modal__review-preview {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
}
.upload-modal__review-preview img {
  width: 100%;
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

.upload-modal__review-trophy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  text-align: left;
}
.upload-modal__review-trophy img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.upload-modal__review-trophy-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.upload-modal__review-trophy-game {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.upload-modal__fields {
  width: 100%;
  max-width: 520px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.upload-modal__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.upload-modal__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.upload-modal__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.upload-modal__input,
.upload-modal__textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.upload-modal__input:focus,
.upload-modal__textarea:focus {
  border-color: var(--color-accent);
}
.upload-modal__input::-webkit-input-placeholder, .upload-modal__textarea::-webkit-input-placeholder {
  color: var(--text-muted);
}
.upload-modal__input::-moz-placeholder, .upload-modal__textarea::-moz-placeholder {
  color: var(--text-muted);
}
.upload-modal__input:-ms-input-placeholder, .upload-modal__textarea:-ms-input-placeholder {
  color: var(--text-muted);
}
.upload-modal__input::-ms-input-placeholder, .upload-modal__textarea::-ms-input-placeholder {
  color: var(--text-muted);
}
.upload-modal__input::placeholder,
.upload-modal__textarea::placeholder {
  color: var(--text-muted);
}

.upload-modal__textarea {
  resize: vertical;
  min-height: 80px;
}

.upload-modal__staff {
  width: 100%;
  max-width: 520px;
  text-align: left;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.upload-modal__staff-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.upload-modal__staff-heading i {
  color: var(--color-accent);
}

.upload-modal__staff-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.45;
}

.upload-modal__target-picked {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-surface);
  border-radius: 4px;
  font-size: 0.8125rem;
}

.upload-modal__user-results {
  margin-top: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  display: none;
}
.upload-modal__user-results.is-visible {
  display: block;
}
.upload-modal__user-results .upload-modal__no-results {
  padding: 1rem;
}

.upload-modal__user-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
}
.upload-modal__user-result:last-child {
  border-bottom: 0;
}
.upload-modal__user-result:hover {
  background: var(--bg-elevated);
}

.upload-modal__user-result-name {
  font-weight: 600;
  font-size: 0.8125rem;
}

.upload-modal__user-result-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

.upload-modal__success {
  padding: 3rem 2rem;
}

.upload-modal__success-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 229, 118, 0.12);
  color: var(--color-success);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.upload-modal__xp-award {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 1rem;
  background: var(--color-xp-muted);
  color: var(--color-xp);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
}
.upload-modal__xp-award i {
  font-size: 0.875rem;
}

.mod-media-modal {
  position: fixed;
  inset: 0;
  z-index: 315;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
}
.mod-media-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mod-media-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}

.mod-media-modal__panel {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mod-media-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.mod-media-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mod-media-modal__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 36rem;
}

.mod-media-modal__close {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.mod-media-modal__close:hover, .mod-media-modal__close:focus-visible {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-color);
  outline: none;
}

.mod-media-modal__body {
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-media-modal__upload {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-media-modal__dropzone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 120px;
  padding: 1.5rem;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-media-modal__dropzone:hover, .mod-media-modal__dropzone:focus-visible {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--bg-elevated));
  color: var(--text-primary);
  outline: none;
}
.mod-media-modal__dropzone.is-dragover {
  border-color: var(--color-accent);
  border-style: solid;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--bg-elevated));
}

.mod-media-modal__dropzone-icon {
  font-size: 1.75rem;
  color: var(--color-accent);
  opacity: 0.9;
}

.mod-media-modal__dropzone-text {
  font-weight: 600;
  text-align: center;
}

.mod-media-modal__dropzone-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-media-modal__upload-status {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.mod-media-modal__upload-status.is-error {
  color: #ff3b5c;
}
.mod-media-modal__upload-status.is-success {
  color: #00e576;
}

.mod-media-modal__section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mod-media-modal__section-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.mod-media-modal__grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.5rem;
}

.mod-media-modal__tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.mod-media-modal__tile img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.mod-media-modal__tile:hover, .mod-media-modal__tile:focus-visible {
  border-color: var(--color-accent);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
          box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  outline: none;
}

.mod-media-modal__empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem;
}

.mod-media-modal__pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

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

.jpsnt-select {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
}

.jpsnt-select__trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  -webkit-transition: border-color 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
}
.jpsnt-select__trigger:hover {
  border-color: var(--border-glow);
  background: var(--bg-surface);
}
.jpsnt-select__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.jpsnt-select__trigger--placeholder .jpsnt-select__trigger-text {
  color: var(--text-muted);
}

.jpsnt-select--open .jpsnt-select__trigger {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow);
          box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow);
}

.jpsnt-select__trigger-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jpsnt-select--flags .jpsnt-select__trigger-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.jpsnt-select__trigger-flag-img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 22px;
  height: 16px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
[data-theme=light] .jpsnt-select__trigger-flag-img {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.jpsnt-select__trigger-label-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jpsnt-select--flags .jpsnt-select__option-flag-img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 22px;
  height: 16px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
[data-theme=light] .jpsnt-select--flags .jpsnt-select__option-flag-img {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.jpsnt-select--flags .jpsnt-select__option-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jpsnt-select--country .jpsnt-select__trigger-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.jpsnt-select--country .jpsnt-select__option {
  gap: 0.5rem;
}

.jpsnt-select__option-flag-emoji,
.jpsnt-select__trigger-flag-emoji {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  height: 18px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.0625rem;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Inter", system-ui, -apple-system, sans-serif, sans-serif;
}

.jpsnt-select--country .jpsnt-select__option-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jpsnt-select--country .jpsnt-select__trigger-label-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jpsnt-select__trigger-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.625rem;
  color: var(--text-muted);
  -webkit-transition: color 150ms ease, -webkit-transform 150ms ease;
  transition: color 150ms ease, -webkit-transform 150ms ease;
  transition: transform 150ms ease, color 150ms ease;
  transition: transform 150ms ease, color 150ms ease, -webkit-transform 150ms ease;
}

.jpsnt-select--open .jpsnt-select__trigger-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--color-accent);
}

.jpsnt-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  padding: 0.25rem 0;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.jpsnt-select__panel::-webkit-scrollbar {
  width: 6px;
}
.jpsnt-select__panel::-webkit-scrollbar-track {
  background: transparent;
}
.jpsnt-select__panel::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
.jpsnt-select__panel::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}
.jpsnt-select__panel[hidden] {
  display: none;
}

.jpsnt-select--above .jpsnt-select__panel {
  top: auto;
  bottom: calc(100% + 4px);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.jpsnt-select--flags .jpsnt-select__option:not(.jpsnt-select__option--placeholder) {
  gap: 0.5rem;
}

.jpsnt-select__option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.jpsnt-select__option:hover, .jpsnt-select__option--focused {
  background: var(--item-hover-bg);
  color: var(--text-primary);
}
.jpsnt-select__option--selected {
  color: var(--color-accent);
  font-weight: 600;
}
.jpsnt-select__option--selected::after {
  content: "\f00c";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.625rem;
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--color-accent);
}
.jpsnt-select__option--placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.jpsnt-select__option--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.filter-checklist {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
}

.filter-checklist__trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  -webkit-transition: border-color 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
}
.filter-checklist__trigger:hover {
  border-color: var(--border-glow);
  background: var(--bg-surface);
}
.filter-checklist__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.filter-checklist__trigger--placeholder .filter-checklist__trigger-text {
  color: var(--text-muted);
}

.filter-checklist--open .filter-checklist__trigger {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow);
          box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow);
}

.filter-checklist__trigger-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-checklist__trigger-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.625rem;
  color: var(--text-muted);
  -webkit-transition: color 150ms ease, -webkit-transform 150ms ease;
  transition: color 150ms ease, -webkit-transform 150ms ease;
  transition: transform 150ms ease, color 150ms ease;
  transition: transform 150ms ease, color 150ms ease, -webkit-transform 150ms ease;
}

.filter-checklist--open .filter-checklist__trigger-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--color-accent);
}

.filter-checklist__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.filter-checklist__panel::-webkit-scrollbar {
  width: 6px;
}
.filter-checklist__panel::-webkit-scrollbar-track {
  background: transparent;
}
.filter-checklist__panel::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
.filter-checklist__panel::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}
.filter-checklist__panel[hidden] {
  display: none;
}

.filter-checklist--above .filter-checklist__panel {
  top: auto;
  bottom: calc(100% + 4px);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.filter-checklist__option {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 4px;
}
.filter-checklist__option:hover {
  background: var(--item-hover-bg);
  color: var(--text-primary);
}
.filter-checklist__option input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.filter-checklist__option::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 2px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-elevated);
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.filter-checklist__option:hover::before {
  border-color: var(--border-glow);
}
.filter-checklist__option:has(input[type=checkbox]:checked)::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.filter-checklist__option::after {
  content: "";
  position: absolute;
  left: calc(1rem + 5px);
  top: 50%;
  margin-top: -5px;
  width: 5px;
  height: 9px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg) scale(0);
          transform: rotate(45deg) scale(0);
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
  pointer-events: none;
}
.filter-checklist__option:has(input[type=checkbox]:checked)::after {
  border-color: var(--bg-surface);
  -webkit-transform: rotate(45deg) scale(1);
          transform: rotate(45deg) scale(1);
}

.jpsnt-toasts {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 400px;
  width: calc(100% - 4rem);
}
@media (min-width: 768px) {
  .jpsnt-toasts {
    width: auto;
    min-width: 320px;
  }
}

.jpsnt-toast {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
.jpsnt-toast--visible {
  opacity: 1;
}

.jpsnt-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: var(--color-accent);
}

.jpsnt-toast {
  position: relative;
  overflow: hidden;
  padding-left: calc(1rem + 4px);
}

.jpsnt-toast--success::before {
  background: #00e576;
}

.jpsnt-toast--error::before {
  background: #ff3b5c;
}

.jpsnt-toast--info::before {
  background: var(--color-primary);
}

.jpsnt-toast--warning::before {
  background: #ffb020;
}

.jpsnt-toast__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.9375rem;
  line-height: 1;
}

.jpsnt-toast--default .jpsnt-toast__icon {
  color: var(--color-accent);
}

.jpsnt-toast--success .jpsnt-toast__icon {
  color: #00e576;
}

.jpsnt-toast--error .jpsnt-toast__icon {
  color: #ff3b5c;
}

.jpsnt-toast--info .jpsnt-toast__icon {
  color: var(--color-primary);
}

.jpsnt-toast--warning .jpsnt-toast__icon {
  color: #ffb020;
}

.jpsnt-toast__msg {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.jpsnt-toast__action {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background: var(--color-accent-muted);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
}
.jpsnt-toast__action:hover {
  background: var(--color-accent);
  color: var(--text-inverse);
}

.jpsnt-toast__close {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.625rem;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.jpsnt-toast__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.jpsnt-toast--message {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  min-width: 280px;
}
.jpsnt-toast--message .jpsnt-toast__avatar-wrap {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.jpsnt-toast--message .jpsnt-toast__avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.jpsnt-toast--message .jpsnt-toast__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.jpsnt-toast--message .jpsnt-toast__message-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}
.jpsnt-toast--message .jpsnt-toast__message-name {
  font-weight: 600;
  color: var(--text-primary);
}
.jpsnt-toast--message .jpsnt-toast__message-preview {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jpsnt-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  -webkit-box-shadow: var(--shadow-md), 0 0 0 1px var(--border-glow);
          box-shadow: var(--shadow-md), 0 0 0 1px var(--border-glow);
  max-width: 280px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 150ms ease, visibility 150ms ease;
  transition: opacity 150ms ease, visibility 150ms ease;
}
.jpsnt-tooltip--visible {
  opacity: 1;
  visibility: visible;
}

.jpsnt-comments {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color);
  position: relative;
}
.jpsnt-comments::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, var(--border-glow)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, var(--border-glow) 50%, transparent 100%);
  opacity: 0.5;
}

.jpsnt-comments__header {
  margin-bottom: 1.5rem;
}

.jpsnt-comments__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}
.jpsnt-comments__title > i {
  color: var(--color-accent);
  font-size: 1rem;
}

.jpsnt-comments__count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-radius: 16px;
}

.jpsnt-comments__compose {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 2rem;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.jpsnt-comments__compose:focus-within {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 3px var(--color-accent-muted);
          box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.jpsnt-comments__compose-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.jpsnt-comments__compose-avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.jpsnt-comments__compose-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.jpsnt-comments__compose-input {
  width: 100%;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: transparent;
  border: none;
  resize: none;
  min-height: 24px;
  line-height: 1.5;
}
.jpsnt-comments__compose-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__compose-input::-moz-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__compose-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__compose-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__compose-input::placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__compose-input:focus {
  outline: none;
}

.jpsnt-comments__compose-send {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.jpsnt-comments__login-prompt {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.jpsnt-comments__closed-note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.jpsnt-comments__closed-note > i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--text-muted);
  opacity: 0.85;
}

.jpsnt-comments__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.jpsnt-comments__item {
  position: relative;
}

.jpsnt-comments__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.jpsnt-comments__card:hover {
  border-color: var(--border-glow);
}

.jpsnt-comments__card-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 0;
  padding: 0.5rem 0 0.5rem 0.5rem;
}

.jpsnt-comments__replies .jpsnt-comments__thread-line {
  display: none;
}

.jpsnt-comments__card-right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding: 0.5rem 1rem;
}

.jpsnt-comments__card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
}
@media (max-width: 575px) {
  .jpsnt-comments__card-header {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

.jpsnt-comments__author {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
}
@media (max-width: 575px) {
  .jpsnt-comments__author {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.jpsnt-comments__level {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-muted);
  padding: 1px 0.25rem;
  border-radius: 4px;
  line-height: 1.4;
}
@media (max-width: 575px) {
  .jpsnt-comments__level {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.jpsnt-comments__badge--staff {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2px;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1;
}
@media (max-width: 575px) {
  .jpsnt-comments__badge--staff {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
.jpsnt-comments__badge--staff-mod {
  color: #c0c0c0;
}
.jpsnt-comments__badge--staff-mod i {
  color: inherit;
}
.jpsnt-comments__badge--staff-admin {
  color: #ffd700;
}
.jpsnt-comments__badge--staff-admin i {
  color: inherit;
}

.jpsnt-comments__time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}
@media (max-width: 575px) {
  .jpsnt-comments__time {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.jpsnt-comments__card-body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.jpsnt-comments__card-body--removed {
  color: var(--text-muted);
}

.jpsnt-comments__removed {
  font-style: italic;
  color: var(--text-muted);
}

.jpsnt-comments__card-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.25rem;
  opacity: 0;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.jpsnt-comments__card-actions .jpsnt-comments__card:hover ~ .jpsnt-comments__card-actions, .jpsnt-comments__card-right:hover > .jpsnt-comments__card-actions, .jpsnt-comments__card-actions:focus-within {
  opacity: 1;
}
@media (hover: none) {
  .jpsnt-comments__card-actions {
    opacity: 1;
  }
}

.jpsnt-comments__action-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.jpsnt-comments__action-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}
@media (hover: none) {
  .jpsnt-comments__action-btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
}

.jpsnt-comments__delete-btn:hover {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.08);
}

.jpsnt-comments__avatar-wrap {
  position: relative;
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.jpsnt-comments__avatar-wrap--online::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid #00e576;
  pointer-events: none;
}

.jpsnt-comments__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.jpsnt-comments__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.jpsnt-comments__avatar--sm {
  width: 28px;
  height: 28px;
}
.jpsnt-comments__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.625rem;
}

.jpsnt-comments__replies {
  margin-left: 28px;
  padding-left: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
}
@media (min-width: 576px) {
  .jpsnt-comments__replies {
    margin-left: 48px;
    padding-left: 4rem;
  }
}
@media (min-width: 768px) {
  .jpsnt-comments__replies {
    margin-left: 56px;
    padding-left: 6rem;
  }
}

.jpsnt-comments__reply {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.jpsnt-comments__reply:hover {
  border-color: var(--border-glow);
}
.jpsnt-comments__reply::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 50%;
  width: 2rem;
  height: 1px;
  background: var(--border-color);
  pointer-events: none;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.jpsnt-comments__card:hover ~ .jpsnt-comments__replies .jpsnt-comments__reply::before {
  background: var(--border-glow);
}
.jpsnt-comments__reply::after {
  content: "";
  position: absolute;
  left: -2rem;
  top: calc(0.5rem * -1 - 2px);
  bottom: 0;
  width: 1px;
  background: var(--border-color);
  pointer-events: none;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.jpsnt-comments__reply:first-of-type::after {
  top: calc(0.5rem * -1 - 2px);
}
.jpsnt-comments__reply:last-child::after {
  bottom: auto;
  height: calc(50% + 0.5rem + 2px);
}
.jpsnt-comments__card:hover ~ .jpsnt-comments__replies .jpsnt-comments__reply::after {
  background: var(--border-glow);
}
@media (min-width: 576px) {
  .jpsnt-comments__reply::before {
    left: -4rem;
    width: 4rem;
  }
  .jpsnt-comments__reply::after {
    left: -4rem;
  }
}
@media (min-width: 768px) {
  .jpsnt-comments__reply::before {
    left: -6rem;
    width: 6rem;
  }
  .jpsnt-comments__reply::after {
    left: -6rem;
  }
}
.jpsnt-comments__reply .jpsnt-comments__card-right {
  padding: 0.5rem 1rem;
}

.jpsnt-comments__inline-compose {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.jpsnt-comments__inline-compose:focus-within {
  border-color: var(--color-accent);
}

.jpsnt-comments__inline-input {
  width: 100%;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: transparent;
  border: none;
  resize: none;
  min-height: 20px;
  line-height: 1.5;
}
.jpsnt-comments__inline-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__inline-input::-moz-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__inline-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__inline-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__inline-input::placeholder {
  color: var(--text-muted);
}
.jpsnt-comments__inline-input:focus {
  outline: none;
}

.jpsnt-comments__inline-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.jpsnt-comments__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.jpsnt-comments__empty > i {
  font-size: 2rem;
  opacity: 0.3;
}
.jpsnt-comments__empty p {
  font-size: 0.875rem;
}

.jpsnt-comments__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.jpsnt-comments__page-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  cursor: pointer;
  -webkit-transition: color 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.jpsnt-comments__page-btn:hover:not(:disabled) {
  color: var(--color-accent);
  border-color: var(--border-glow);
  -webkit-box-shadow: 0 0 12px var(--color-accent-muted);
          box-shadow: 0 0 12px var(--color-accent-muted);
}
.jpsnt-comments__page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jpsnt-comments__page-info {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.report-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 250ms ease, opacity 250ms ease;
  transition: visibility 250ms ease, opacity 250ms ease;
}
.report-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.report-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.report-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.report-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.report-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.report-modal__title i {
  color: #ff3b5c;
  opacity: 0.9;
}

.report-modal__close {
  padding: 0.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.report-modal__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.report-modal__body {
  padding: 2rem;
}

.report-modal__desc {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.report-modal__field {
  margin-bottom: 1.5rem;
}
.report-modal__field:last-of-type {
  margin-bottom: 0;
}

.report-modal__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.report-modal__optional {
  font-weight: 400;
  color: var(--text-muted);
}

.report-modal__select {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.report-modal__select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.report-modal__textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.report-modal__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.report-modal__char-count {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.report-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-color);
}

.block-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 250ms ease, opacity 250ms ease;
  transition: visibility 250ms ease, opacity 250ms ease;
}
.block-confirm-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.block-confirm-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.block-confirm-modal__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.block-confirm-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.block-confirm-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.block-confirm-modal__title i {
  color: #ff3b5c;
  opacity: 0.9;
}

.block-confirm-modal__close {
  padding: 0.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.block-confirm-modal__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.block-confirm-modal__body {
  padding: 2rem;
}

.block-confirm-modal__desc {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.block-confirm-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-color);
}

.message-compose-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: visibility 250ms ease, opacity 250ms ease;
  transition: visibility 250ms ease, opacity 250ms ease;
}
.message-compose-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.message-compose-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.message-compose-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.message-compose-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.message-compose-modal__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.message-compose-modal__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.125rem;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.message-compose-modal__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.message-compose-modal__form {
  padding: 1.5rem 2rem 2rem;
}

.message-compose-modal__input {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  min-height: 120px;
  margin-bottom: 1rem;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.message-compose-modal__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.message-compose-modal__input::-moz-placeholder {
  color: var(--text-muted);
}
.message-compose-modal__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.message-compose-modal__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.message-compose-modal__input::placeholder {
  color: var(--text-muted);
}
.message-compose-modal__input:focus {
  outline: none;
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 3px var(--color-accent-muted);
          box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.message-compose-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.message-compose-modal__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.nav-icon-btn--bell {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--color-danger);
  border-radius: 9px;
}
.notification-badge[hidden] {
  display: none !important;
}

.notification-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 250ms ease, visibility 250ms ease;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.notification-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.notification-drawer-overlay[hidden] {
  display: none !important;
}

.notification-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  max-width: 380px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  z-index: 1101;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
  overflow: hidden;
}
.notification-drawer.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.notification-drawer[hidden] {
  display: none !important;
}

.notification-drawer__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.notification-drawer__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.notification-drawer__count {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.notification-drawer__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.notification-drawer__close:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
}

.notification-drawer__actions {
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.notification-drawer__list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.notification-drawer__list::-webkit-scrollbar {
  display: none;
}

.notification-drawer__empty,
.notification-drawer__loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.notification-drawer__empty i,
.notification-drawer__loading i {
  font-size: 2rem;
  opacity: 0.6;
}

.notification-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  text-decoration: none;
  border-left: 3px solid transparent;
  -webkit-transition: background 150ms ease, border-color 150ms ease;
  transition: background 150ms ease, border-color 150ms ease;
  cursor: pointer;
}
.notification-item:hover {
  background: var(--item-hover-bg);
}
.notification-item--unread {
  border-left-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.notification-item__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}

.notification-item__author {
  display: inline;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}
.notification-item__author:hover {
  text-decoration: underline;
}
.notification-item__author.jpsnt-user {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.notification-item__author.jpsnt-user .jpsnt-user__avatar {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.25rem;
}

.notification-item__avatar {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.notification-item__avatar--ph {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.7em;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.notification-item__name {
  vertical-align: middle;
}

.notification-item__author-plain {
  font-weight: 600;
  margin-right: 0.25rem;
  color: var(--text-primary);
}

.notification-item__action {
  font-weight: 500;
  color: var(--text-primary);
}

.notification-item__time {
  font-size: 0.75rem;
  color: var(--text-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.nav-icon-btn--messages {
  position: relative;
}

.messages-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 250ms ease, visibility 250ms ease;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.messages-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.messages-drawer-overlay[hidden] {
  display: none !important;
}

.messages-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  max-width: 380px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  z-index: 1101;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
  overflow: hidden;
}
.messages-drawer.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.messages-drawer[hidden] {
  display: none !important;
}

.messages-drawer__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.messages-drawer__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.messages-drawer__count {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.messages-drawer__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.messages-drawer__close:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
}

.messages-drawer__list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.messages-drawer__list::-webkit-scrollbar {
  display: none;
}

.messages-drawer__empty,
.messages-drawer__loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-align: center;
}
.messages-drawer__empty i,
.messages-drawer__loading i {
  font-size: 2rem;
  opacity: 0.6;
}

.messages-drawer__empty-hint {
  font-size: 0.8125rem;
  opacity: 0.8;
}

.messages-drawer-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.5rem;
  color: var(--text-primary);
  text-decoration: none;
  border-left: 3px solid transparent;
  -webkit-transition: background 150ms ease, border-color 150ms ease;
  transition: background 150ms ease, border-color 150ms ease;
}
.messages-drawer-item:hover {
  background: var(--item-hover-bg);
}
.messages-drawer-item--unread {
  border-left-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.messages-drawer-item__avatar-wrap {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.messages-drawer-item__avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.messages-drawer-item__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 1rem;
}

.messages-drawer-item__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.messages-drawer-item__name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
}

.messages-drawer-item__preview {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-drawer-item__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.messages-drawer-item__unread {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border-radius: 9px;
}

.verify-email-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid var(--color-accent);
}

.verify-email-bar__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 0.5rem 1rem;
  max-width: 1280px;
  margin: 0 auto;
}

.verify-email-bar__icon {
  font-size: 1rem;
  color: var(--color-accent);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.verify-email-bar__msg {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.verify-email-bar__resend {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border: 1px solid var(--border-glow);
}
.verify-email-bar__resend:hover {
  background: var(--item-hover-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.verify-email-bar__resend:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ss-card--hero {
  margin: 0 0 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  -webkit-transition: -webkit-box-shadow 250ms ease;
  transition: -webkit-box-shadow 250ms ease;
  transition: box-shadow 250ms ease;
  transition: box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.ss-card--hero:hover {
  -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), var(--shadow-glow);
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), var(--shadow-glow);
}
.ss-card--hero:hover .ss-card__tools {
  opacity: 1;
}

.ss-card__image--hero {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.ss-card__tools {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
  z-index: 2;
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
}

.ss-card__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  font-size: 0.875rem;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
}
.ss-card__btn:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.ss-card--hero .ss-card__caption {
  padding: 1rem 1.5rem;
  font-size: 0.8125rem;
}

.ss-card--hero .ss-card__cap-meta {
  gap: 1rem 1.5rem;
}

.ss-card--hero .ss-card__cap-avatar {
  width: 28px;
  height: 28px;
}
.ss-card--hero .ss-card__cap-avatar--ph {
  font-size: 0.625rem;
}

.ss-card--hero .ss-card__cap-icon {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

.ss-card--hero .ss-card__cap-cover {
  width: 28px;
  height: 38px;
  border-radius: 4px;
}

.ss-card--hero .ss-card__score {
  bottom: 1rem;
  right: 1rem;
}

.ss-card--feed .ss-card__caption {
  padding: 1rem 1.5rem;
  font-size: 0.8125rem;
}

.ss-card--feed .ss-card__cap-meta {
  gap: 0.25rem 1rem;
}

.ss-card--feed .ss-card__cap-avatar {
  width: 28px;
  height: 28px;
}
.ss-card--feed .ss-card__cap-avatar--ph {
  font-size: 0.625rem;
}

.ss-card--feed .ss-card__cap-icon {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

.ss-card--feed .ss-card__cap-cover {
  width: 28px;
  height: 38px;
  border-radius: 4px;
}

.ss-card--feed .ss-card__score {
  bottom: 1rem;
  right: 1rem;
}

.ss-card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  transition: box-shadow 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
}
.ss-card:hover {
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  color: inherit;
}
.ss-card:hover .ss-card__image-wrap .ss-card__image {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.ss-card--feed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  visibility: hidden;
  -webkit-transition: -webkit-box-shadow 250ms ease;
  transition: -webkit-box-shadow 250ms ease;
  transition: box-shadow 250ms ease;
  transition: box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.ss-card--feed:hover {
  -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.ss-card--feed:not(.ss-card--feed).ss-card--platinum {
  border-left: 3px solid #7ab7e8;
}
.ss-card--feed:not(.ss-card--feed).ss-card--gold {
  border-left: 3px solid #ffd700;
}
.ss-card--feed:not(.ss-card--feed).ss-card--silver {
  border-left: 3px solid #c0c0c0;
}
.ss-card--feed:not(.ss-card--feed).ss-card--bronze {
  border-left: 3px solid #cd7f32;
}

.ss-card__main {
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.ss-card__image-link {
  display: block;
}

.ss-card__image-wrap:not(.ss-card__image-wrap--feed) .ss-card__image-link {
  position: absolute;
  inset: 0;
}

.ss-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-void);
}

.ss-card__image-wrap--feed {
  aspect-ratio: auto;
}

.ss-card__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.ss-card__image--feed {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.ss-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.75rem;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ss-card__badge--platinum {
  background: #7ab7e8;
  color: #fff;
}
.ss-card__badge--gold {
  background: #ffd700;
  color: #1a1a2e;
}
.ss-card__badge--silver {
  background: #c0c0c0;
  color: #1a1a2e;
}
.ss-card__badge--bronze {
  background: #cd7f32;
  color: #fff;
}

.ss-card__score {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 56px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.ss-card__score-label {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
  margin-bottom: 1px;
}

.ss-card__score-num {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.ss-card__score-outof {
  font-size: 0.5625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
}

.ss-card__score--standalone {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 64px;
  height: 64px;
  margin: 1rem auto 0;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-void));
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--border-color));
}
.ss-card__score--standalone .ss-card__score-label {
  color: var(--text-muted);
}
.ss-card__score--standalone .ss-card__score-num {
  color: var(--color-accent);
}
.ss-card__score--standalone .ss-card__score-outof {
  color: var(--text-muted);
}

.ss-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  direction: ltr;
  text-align: left;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 1rem;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.85)), color-stop(70%, rgba(0, 0, 0, 0.4)), to(transparent));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
  color: #fff;
  font-size: 0.75rem;
}

.ss-card__caption--has-score {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.ss-card__cap-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  line-height: 1.2;
}

.ss-card__caption--has-score .ss-card__score--inline {
  position: static;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

.ss-card__cap-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  line-height: 1;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.ss-card__cap-item:hover {
  opacity: 0.9;
  color: inherit;
}

.ss-card--feed .ss-card__cap-item + .ss-card__cap-item::before,
.ss-card--feed a.ss-card__cap-item + .ss-card__cap-item::before,
.ss-card--feed .ss-card__cap-item + a.ss-card__cap-item::before,
.ss-card--feed a.ss-card__cap-item + a.ss-card__cap-item::before {
  content: "·";
  margin-right: 0.25rem;
  opacity: 0.5;
  font-weight: 900;
  font-size: 1.1em;
}

.ss-card__cap-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.ss-card__cap-avatar--ph {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.5rem;
}

.ss-card__cap-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-card__cap-level {
  font-size: 0.625rem;
  opacity: 0.85;
  font-weight: 600;
}

.ss-card__cap-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.625rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
}

.ss-card__cap--platinum .ss-card__cap-icon,
.ss-card__cap--platinum .ss-card__cap-label {
  color: #7ab7e8;
}

.ss-card__cap--gold .ss-card__cap-icon,
.ss-card__cap--gold .ss-card__cap-label {
  color: #ffd700;
}

.ss-card__cap--silver .ss-card__cap-icon,
.ss-card__cap--silver .ss-card__cap-label {
  color: #c0c0c0;
}

.ss-card__cap--bronze .ss-card__cap-icon,
.ss-card__cap--bronze .ss-card__cap-label {
  color: #cd7f32;
}

.ss-card__cap-label {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-card__cap-cover {
  width: 20px;
  height: 27px;
  border-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ss-card__cap-time {
  opacity: 0.7;
}
.ss-card__cap-time i {
  font-size: 0.85em;
}

.ss-card__image-wrap:has(> .ss-card__score) .ss-card__caption:not(.ss-card__caption--has-score),
.ss-card--hero.ss-card--has-score .ss-card__caption {
  padding-right: 72px;
}

.ss-card__standalone-wrap {
  position: relative;
  min-height: 120px;
  background: var(--bg-void);
}

.ss-card__standalone-wrap .ss-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.ss-card--feed .ss-card__body {
  margin-top: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.ss-card__body {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.ss-card__body-caption {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.ss-card__body-caption i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--color-accent);
  opacity: 0.9;
}

.ss-card__body-snippet {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
  background: color-mix(in srgb, var(--color-accent) 6%, var(--bg-void));
  border-left: 3px solid var(--color-accent);
  border-radius: 0 4px 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-card--feed .ss-card__body-snippet {
  display: none;
}

.game-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  -webkit-transition: border-color 150ms ease, -webkit-transform 250ms ease;
  transition: border-color 150ms ease, -webkit-transform 250ms ease;
  transition: transform 250ms ease, border-color 150ms ease;
  transition: transform 250ms ease, border-color 150ms ease, -webkit-transform 250ms ease;
}
.game-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--border-glow);
}

.game-card__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--bg-void);
}
.game-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 400ms ease;
  transition: -webkit-transform 400ms ease;
  transition: transform 400ms ease;
  transition: transform 400ms ease, -webkit-transform 400ms ease;
}
.game-card:hover .game-card__cover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.game-card__placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 3/4;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 2rem;
}

.game-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.7)));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.game-card__cover-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
}

.game-card__trophy-breakdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.game-card__meta {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
}
.game-card__meta i {
  margin-right: 4px;
  color: #ffd700;
}
.game-card__meta--screenshots {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.game-card__meta--screenshots .fa-camera {
  color: rgba(255, 255, 255, 0.9);
}

.game-card__trophy-type {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
}
.game-card__trophy-type i {
  font-size: 0.5625rem;
}
.game-card__trophy-type--platinum i {
  color: #7ab7e8;
}
.game-card__trophy-type--gold i {
  color: #ffd700;
}
.game-card__trophy-type--silver i {
  color: #c0c0c0;
}
.game-card__trophy-type--bronze i {
  color: #cd7f32;
}

.game-card__body {
  padding: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.game-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.trophy-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  -webkit-transition: border-color 150ms ease, -webkit-transform 250ms ease;
  transition: border-color 150ms ease, -webkit-transform 250ms ease;
  transition: transform 250ms ease, border-color 150ms ease;
  transition: transform 250ms ease, border-color 150ms ease, -webkit-transform 250ms ease;
}
.trophy-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--border-glow);
}

.trophy-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-void);
}
.trophy-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 400ms ease;
  transition: -webkit-transform 400ms ease;
  transition: transform 400ms ease;
  transition: transform 400ms ease, -webkit-transform 400ms ease;
}
.trophy-card:hover .trophy-card__image img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.trophy-card__placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 1;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 2rem;
}
.trophy-card__placeholder--platinum {
  color: #7ab7e8;
}
.trophy-card__placeholder--gold {
  color: #ffd700;
}
.trophy-card__placeholder--silver {
  color: #c0c0c0;
}
.trophy-card__placeholder--bronze {
  color: #cd7f32;
}

.trophy-card__badge {
  position: absolute;
  bottom: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.trophy-card__badge--claims {
  left: 0.5rem;
}
.trophy-card__badge--claims .fa-camera {
  margin-right: 2px;
}
.trophy-card__badge--platinum, .trophy-card__badge--gold, .trophy-card__badge--silver, .trophy-card__badge--bronze {
  right: 0.5rem;
}
.trophy-card__badge--platinum {
  color: #7ab7e8;
}
.trophy-card__badge--gold {
  color: #ffd700;
}
.trophy-card__badge--silver {
  color: #c0c0c0;
}
.trophy-card__badge--bronze {
  color: #cd7f32;
}

.trophy-card__body {
  padding: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.trophy-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trophy-card__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.jpsnt-user {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.jpsnt-user:hover {
  color: inherit;
}

.jpsnt-user__avatar {
  display: block;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.jpsnt-user__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.jpsnt-user__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2px;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1;
}
.jpsnt-user__badge--mod {
  color: #c0c0c0;
}
.jpsnt-user__badge--mod i {
  color: inherit;
}
.jpsnt-user__badge--admin {
  color: #ffd700;
}
.jpsnt-user__badge--admin i {
  color: inherit;
}
.jpsnt-user__badge--platinum {
  color: #7ab7e8;
}
.jpsnt-user__badge--platinum i {
  color: inherit;
}

.jpsnt-user__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jpsnt-user__level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.jpsnt-user__country-flag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 2px;
  line-height: 0;
}
.jpsnt-user__country-flag img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
[data-theme=light] .jpsnt-user__country-flag img {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.leaderboard__user .jpsnt-user--compact.jpsnt-user--leaderboard-flag {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.leaderboard__user .jpsnt-user--compact.jpsnt-user--leaderboard-flag .jpsnt-user__level,
.leaderboard__user .jpsnt-user--compact.jpsnt-user--leaderboard-flag .jpsnt-user__country-flag {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 380px) {
  .leaderboard__user .jpsnt-user--compact.jpsnt-user--leaderboard-flag .jpsnt-user__country-flag img {
    width: 16px;
    height: 12px;
  }
}

.jpsnt-user--online .jpsnt-user__avatar {
  -webkit-box-shadow: 0 0 0 1px #00e576;
          box-shadow: 0 0 0 1px #00e576;
}

.jpsnt-user--inline .jpsnt-user__level {
  display: none;
}

.jpsnt-user--compact {
  gap: 0.5rem;
}
.jpsnt-user--compact .jpsnt-user__avatar {
  width: 28px;
  height: 28px;
}
.jpsnt-user--compact .jpsnt-user__avatar--ph {
  font-size: 0.75rem;
}
.jpsnt-user--compact .jpsnt-user__name {
  font-size: 0.8125rem;
}

.site-header__actions .jpsnt-user--compact .jpsnt-user__name,
.site-header__actions .jpsnt-user--compact .jpsnt-user__level {
  display: none;
}
@media (min-width: 992px) {
  .site-header__actions .jpsnt-user--compact .jpsnt-user__name,
  .site-header__actions .jpsnt-user--compact .jpsnt-user__level {
    display: block;
  }
}

@media (min-width: 992px) {
  .site-header__user.jpsnt-user--compact .jpsnt-user__avatar {
    width: 32px;
    height: 32px;
  }
}

.site-header__actions .jpsnt-user--compact .jpsnt-user__name {
  max-width: 120px;
}
@media (min-width: 992px) {
  .site-header__actions .jpsnt-user--compact .jpsnt-user__name {
    max-width: 140px;
  }
}

.nav-drawer__identity.jpsnt-user--compact .jpsnt-user__avatar {
  width: 32px;
  height: 32px;
}

.nav-drawer__identity.jpsnt-user--compact .jpsnt-user__name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.jpsnt-user--caption {
  color: #fff;
  gap: 0.25rem;
}
.jpsnt-user--caption .jpsnt-user__avatar {
  width: 20px;
  height: 20px;
}
.jpsnt-user--caption .jpsnt-user__avatar--ph {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.5rem;
}
.jpsnt-user--caption .jpsnt-user__name {
  font-size: 0.75rem;
}
.jpsnt-user--caption .jpsnt-user__level {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.85);
}

.ss-card--hero .jpsnt-user--caption .jpsnt-user__avatar,
.ss-card--feed .jpsnt-user--caption .jpsnt-user__avatar {
  width: 28px;
  height: 28px;
}
.ss-card--hero .jpsnt-user--caption .jpsnt-user__avatar--ph,
.ss-card--feed .jpsnt-user--caption .jpsnt-user__avatar--ph {
  font-size: 0.625rem;
}

.ss-card--hero .jpsnt-user--caption .jpsnt-user__name,
.ss-card--feed .jpsnt-user--caption .jpsnt-user__name {
  font-size: 0.8125rem;
}

.ss-card--hero .jpsnt-user--caption .jpsnt-user__level,
.ss-card--feed .jpsnt-user--caption .jpsnt-user__level {
  font-size: 0.625rem;
}

.jpsnt-reactions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.jpsnt-reactions__bar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.jpsnt-reactions__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-right: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  line-height: 1;
  white-space: nowrap;
  position: relative;
}
.jpsnt-reactions__btn:last-child {
  border-right: none;
}
.jpsnt-reactions__btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-surface);
}
.jpsnt-reactions__btn:disabled {
  cursor: default;
  opacity: 0.5;
}
.jpsnt-reactions__btn i {
  font-size: 0.9375rem;
  line-height: 1;
}
.jpsnt-reactions__btn--active {
  font-weight: 600;
  background: var(--bg-surface);
}
.jpsnt-reactions__btn--active[data-reaction=like] {
  color: var(--color-primary);
}
.jpsnt-reactions__btn--active[data-reaction=fire] {
  color: #ff6b35;
}
.jpsnt-reactions__btn--active[data-reaction=nice] {
  color: #1b6ef5;
}
.jpsnt-reactions__btn--active[data-reaction=lol] {
  color: #ffb020;
}
.jpsnt-reactions__btn--active[data-reaction=heart] {
  color: #ff3b5c;
}
.jpsnt-reactions__btn--active[data-reaction=gg] {
  color: #00e576;
}
.jpsnt-reactions__btn-count {
  font-size: 0.75rem;
  min-width: 0;
}
.jpsnt-reactions__btn-count:empty {
  display: none;
}

.jpsnt-reactions__popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

.jpsnt-reactions__popup-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.jpsnt-reactions__popup-header h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.jpsnt-reactions__popup-close {
  padding: 0.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.jpsnt-reactions__popup-close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.jpsnt-reactions__popup-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.jpsnt-reactions__popup-tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.jpsnt-reactions__popup-tab:hover {
  background: var(--bg-elevated);
}
.jpsnt-reactions__popup-tab--active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
}
.jpsnt-reactions__popup-tab .tab-count {
  font-size: 0.75rem;
  opacity: 0.7;
}

.jpsnt-reactions__popup-list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  min-height: 100px;
  max-height: 50vh;
}

.jpsnt-reactions__popup-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border-radius: 4px;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.jpsnt-reactions__popup-user:hover {
  background: var(--bg-elevated);
}
.jpsnt-reactions__popup-user .jpsnt-username {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.jpsnt-reactions__popup-reaction-icon {
  font-size: 0.8125rem;
  width: 20px;
  text-align: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.jpsnt-reactions__popup-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  font-size: 0.875rem;
}

.jpsnt-reactions__popup-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.jpsnt-reactions__overlay {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
}

.jpsnt-reactions__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

@media (max-width: 767px) {
  .jpsnt-reactions__popup {
    width: 95%;
  }
}
.jpsnt-engage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-color);
}

.jpsnt-engage__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.jpsnt-engage__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.jpsnt-engage__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  text-decoration: none;
}
.jpsnt-engage__btn i {
  font-size: 0.875rem;
}
.jpsnt-engage__btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-color);
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--section-bg)));
  background: linear-gradient(to bottom, transparent, var(--section-bg));
  z-index: 2;
  pointer-events: none;
}

.hero__background {
  position: absolute;
  inset: -2rem;
  z-index: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
}
.hero__slide.is-active {
  opacity: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--hero-overlay-edge)), color-stop(30%, var(--hero-overlay-mid)), color-stop(70%, var(--hero-overlay-mid)), to(var(--hero-overlay-edge)));
  background: linear-gradient(180deg, var(--hero-overlay-edge) 0%, var(--hero-overlay-mid) 30%, var(--hero-overlay-mid) 70%, var(--hero-overlay-edge) 100%);
  pointer-events: none;
}

.hero__caption {
  position: absolute;
  bottom: 1.5rem;
  left: 2rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--hero-text-muted);
  letter-spacing: 0.03em;
  text-shadow: var(--hero-text-shadow);
  opacity: 0;
}
.hero__caption i {
  font-size: 0.5625rem;
  color: var(--color-accent);
}
@media (min-width: 768px) {
  .hero__caption {
    bottom: 2rem;
    left: 3rem;
  }
}

.hero__content {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: min(800px, 100%);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  will-change: transform, opacity;
}
@media (min-width: 576px) {
  .hero__content {
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
}
@media (min-width: 768px) {
  .hero__content {
    padding: 2rem 1.5rem;
  }
}

.hero__logo-wrap {
  display: block;
  line-height: 0;
}

.hero__logo {
  width: min(180px, 52vw);
  height: auto;
  display: block;
}
@media (min-width: 576px) {
  .hero__logo {
    width: 200px;
  }
}
@media (min-width: 768px) {
  .hero__logo {
    width: 280px;
  }
}

.hero__tagline {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--hero-text-sub);
  text-shadow: var(--hero-text-shadow);
  max-width: 500px;
}

.hero__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
@media (min-width: 576px) {
  .hero__stats {
    gap: 1.5rem;
  }
}
@media (min-width: 768px) {
  .hero__stats {
    gap: 3rem;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

.hero__stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.hero__stat-value {
  font-size: clamp(1.25rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--hero-text);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  text-shadow: var(--hero-text-shadow);
}
@media (min-width: 768px) {
  .hero__stat-value {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
  }
}

.hero__stat-label {
  font-size: 0.6875rem;
  color: var(--hero-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: var(--hero-text-shadow);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .hero__stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
}

.hero__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
}

.hero__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
.hero__button--primary {
  background: var(--color-primary);
  color: #fff;
}
.hero__button--primary:hover {
  background: var(--color-primary-hover);
  color: #fff;
  -webkit-box-shadow: var(--shadow-glow);
          box-shadow: var(--shadow-glow);
}
.hero__button--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hero-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}
.hero__button--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.search-bar {
  width: 100%;
  max-width: 600px;
  position: relative;
  z-index: 100;
}

.search-bar__input-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.search-bar__input-wrap:focus-within {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 1px var(--border-glow), var(--shadow-glow);
          box-shadow: 0 0 0 1px var(--border-glow), var(--shadow-glow);
}

.search-bar__icon {
  position: absolute;
  left: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  pointer-events: none;
  z-index: 1;
  -webkit-transition: color 250ms ease;
  transition: color 250ms ease;
}
.search-bar__input-wrap:focus-within .search-bar__icon {
  color: var(--color-accent);
}

.search-bar__input {
  width: 100%;
  padding: 1rem 1.5rem 1rem 3rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: transparent;
}
.search-bar__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.search-bar__input::-moz-placeholder {
  color: var(--text-muted);
}
.search-bar__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.search-bar__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.search-bar__input::placeholder {
  color: var(--text-muted);
}

.search-bar__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--bg-panel);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-subtle);
          box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-subtle);
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(8px) scale(0.98);
          transform: translateY(8px) scale(0.98);
  -webkit-transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
  transition: opacity 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease;
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease, -webkit-transform 250ms ease;
}
.search-bar__results.is-active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}
.search-bar__results::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, var(--color-accent)), to(transparent));
  background: linear-gradient(90deg, transparent, var(--color-accent) 50%, transparent);
  z-index: 1;
  pointer-events: none;
}
.search-bar__results::-webkit-scrollbar {
  width: 4px;
}
.search-bar__results::-webkit-scrollbar-track {
  background: transparent;
}
.search-bar__results::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
.search-bar__results::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.search-bar__group {
  padding: 0.25rem 0;
}
.search-bar__group:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
}
.search-bar__group:first-child {
  padding-top: 0.5rem;
}

.search-bar__group-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1.5rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
.search-bar__group-label i {
  font-size: 0.5625rem;
  opacity: 0.7;
}
.search-bar__group-label::after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(var(--border-glow)), to(transparent));
  background: linear-gradient(90deg, var(--border-glow), transparent);
  margin-left: 0.5rem;
}

.search-bar__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 10px 1.5rem;
  cursor: pointer;
  position: relative;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
  opacity: 0;
  -webkit-animation: searchItemEnter 280ms ease forwards;
          animation: searchItemEnter 280ms ease forwards;
  -webkit-animation-delay: calc(var(--i, 0) * 40ms);
          animation-delay: calc(var(--i, 0) * 40ms);
}
.search-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--color-accent);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}
.search-bar__item:hover, .search-bar__item.is-focused {
  background: var(--item-hover-bg);
}
.search-bar__item:hover::before, .search-bar__item.is-focused::before {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.search-bar__item:hover .search-bar__item-name, .search-bar__item.is-focused .search-bar__item-name {
  color: var(--color-accent);
}
.search-bar__item:hover .search-bar__item-image, .search-bar__item.is-focused .search-bar__item-image {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 8px var(--item-hover-glow);
          box-shadow: 0 0 8px var(--item-hover-glow);
}

@-webkit-keyframes searchItemEnter {
  from {
    opacity: 0;
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes searchItemEnter {
  from {
    opacity: 0;
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.search-bar__item-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg-void);
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.search-bar__item[data-type=user] .search-bar__item-image {
  border-radius: 50%;
}

.search-bar__item-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.875rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.search-bar__item[data-type=user] .search-bar__item-icon {
  border-radius: 50%;
}

.search-bar__item-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.search-bar__item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-bar__item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-bar__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.5;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
}
.search-bar__badge i {
  font-size: 0.5625rem;
}
.search-bar__badge--platinum {
  color: #7ab7e8;
  background: rgba(122, 183, 232, 0.12);
  border: 1px solid rgba(122, 183, 232, 0.2);
}
.search-bar__badge--gold {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.18);
}
.search-bar__badge--silver {
  color: #c0c0c0;
  background: rgba(192, 192, 192, 0.08);
  border: 1px solid rgba(192, 192, 192, 0.15);
}
.search-bar__badge--bronze {
  color: #cd7f32;
  background: rgba(205, 127, 50, 0.1);
  border: 1px solid rgba(205, 127, 50, 0.18);
}

.search-bar__count {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
}
.search-bar__count i {
  font-size: 0.5625rem;
  color: #ffd700;
}

.search-bar__loading {
  padding: 1rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.search-bar__skeleton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.25rem 0;
}

.search-bar__skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(110deg, var(--border-color) 30%, var(--shimmer-highlight) 50%, var(--border-color) 70%);
  background-size: 200% 100%;
  -webkit-animation: skeletonShimmer 1.5s ease-in-out infinite;
          animation: skeletonShimmer 1.5s ease-in-out infinite;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.search-bar__skeleton-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.search-bar__skeleton-line {
  height: 10px;
  border-radius: 4px;
  width: 65%;
  background: linear-gradient(110deg, var(--border-color) 30%, var(--shimmer-highlight) 50%, var(--border-color) 70%);
  background-size: 200% 100%;
  -webkit-animation: skeletonShimmer 1.5s ease-in-out infinite;
          animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.search-bar__skeleton-line--short {
  width: 40%;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

@-webkit-keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.search-bar__empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.search-bar__empty i {
  font-size: 1.75rem;
  opacity: 0.3;
}

.search-bar__footer {
  padding: 0.5rem 1.5rem 1rem;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}
.search-bar__footer a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}
.search-bar__footer a i {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}
.search-bar__footer a:hover i {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}

.hiw {
  background: var(--section-bg);
  padding: 6rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.hiw__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hiw__header {
  text-align: center;
  margin-bottom: 4rem;
}

.hiw__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.hiw__title {
  color: var(--text-primary);
}

.hiw__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .hiw__steps {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
  }
}

.hiw__step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  max-width: 260px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.hiw__icon-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.hiw__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--step-icon-bg);
  border: 1px solid var(--border-subtle);
  -webkit-transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
}
.hiw__icon i {
  font-size: 1.5rem;
  color: var(--step-icon-color);
}
.hiw__step:hover .hiw__icon {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: var(--shadow-glow);
          box-shadow: var(--shadow-glow);
}

.hiw__number {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--color-accent);
  color: var(--text-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

.hiw__step-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.hiw__step-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.hiw__connector {
  display: none;
}
@media (min-width: 768px) {
  .hiw__connector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 80px;
            flex: 0 0 80px;
    margin-top: 36px;
    padding: 0 0.25rem;
  }
  .hiw__connector svg {
    width: 100%;
    height: 2px;
  }
}

.proof {
  background: var(--section-bg-alt);
  padding: 6rem 1.5rem;
  position: relative;
}

.proof__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.proof__header {
  text-align: center;
  margin-bottom: 4rem;
}

.proof__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.proof__title {
  color: var(--text-primary);
}

.proof__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .proof__grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.proof__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.proof__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.proof__card:hover::before {
  opacity: 1;
}
.proof__card {
  padding: 2rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.5rem;
  -webkit-transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
}
.proof__card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.proof__card-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--step-icon-bg);
  margin-bottom: 0.25rem;
}
.proof__card-icon i {
  font-size: 1.125rem;
  color: var(--accent);
}

.proof__card-value {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-primary);
  line-height: 1;
}

.proof__card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proof__card-bar {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--stat-bar-bg);
  margin-top: 0.25rem;
  overflow: hidden;
}

.proof__card-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--accent);
  -webkit-transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-news {
  background: var(--section-bg);
  padding: 4rem 1.5rem;
  border-top: 1px solid var(--border-color);
}
@media (min-width: 768px) {
  .home-news {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.home-news__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.home-news__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.home-news__header-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.home-news__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.home-news__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.home-news__view-all {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  -webkit-transition: gap 150ms ease, color 150ms ease;
  transition: gap 150ms ease, color 150ms ease;
}
.home-news__view-all:hover {
  gap: 0.5rem;
  color: var(--text-primary);
}
.home-news__view-all i {
  font-size: 0.625rem;
}

.home-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .home-news__list {
    -ms-grid-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.home-news__item {
  margin: 0;
  min-width: 0;
}

.home-news__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
}
.home-news__card:hover {
  border-color: var(--border-glow);
  -webkit-box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
          box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.home-news__card:hover .home-news__card-title {
  color: var(--color-accent);
}
.home-news__card:hover .home-news__card-cta {
  color: var(--color-accent);
}
.home-news__card:hover .home-news__card-img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.home-news__card-media {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-elevated);
}

.home-news__card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.home-news__card-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: linear-gradient(145deg, var(--color-accent-muted) 0%, var(--bg-elevated) 45%, var(--bg-void) 100%);
}
.home-news__card-media-placeholder i {
  font-size: 2.25rem;
  color: var(--color-accent);
  opacity: 0.55;
  -webkit-filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
          filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.home-news__card-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 1.5rem;
  min-width: 0;
}

.home-news__card-meta {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.home-news__card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}

.home-news__card-excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.home-news__card-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.home-news__card-cta i {
  font-size: 0.625rem;
}

.trending {
  background: var(--section-bg);
  padding: 6rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.trending__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.trending__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.trending__header-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.trending__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.trending__title {
  color: var(--text-primary);
}

.trending__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
}

.trending__pips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
}

.trending__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  -webkit-transition: background 250ms ease, -webkit-transform 250ms ease;
  transition: background 250ms ease, -webkit-transform 250ms ease;
  transition: background 250ms ease, transform 250ms ease;
  transition: background 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
  cursor: pointer;
}
.trending__pip.is-active {
  background: var(--color-accent);
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}
.trending__pip:hover:not(.is-active) {
  background: var(--text-muted);
}

.trending__view-all {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-transition: gap 150ms ease, color 150ms ease;
  transition: gap 150ms ease, color 150ms ease;
}
.trending__view-all:hover {
  gap: 0.5rem;
}
.trending__view-all i {
  font-size: 0.625rem;
}

.trending__carousel {
  position: relative;
  min-height: 320px;
}
@media (min-width: 768px) {
  .trending__carousel {
    min-height: 360px;
  }
}

.trending__page {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.trending__page.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
@media (min-width: 576px) {
  .trending__page {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .trending__page {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.leaderboard {
  background: var(--section-bg-alt);
  padding: 6rem 1.5rem;
  position: relative;
}

.leaderboard__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.leaderboard__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 3rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.leaderboard__header-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.leaderboard__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.leaderboard__title {
  color: var(--text-primary);
}

.leaderboard__view-all {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-transition: gap 150ms ease, color 150ms ease;
  transition: gap 150ms ease, color 150ms ease;
}
.leaderboard__view-all:hover {
  gap: 0.5rem;
}
.leaderboard__view-all i {
  font-size: 0.625rem;
}

.leaderboard__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}
@media (min-width: 768px) {
  .leaderboard__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4rem;
  }
}

.leaderboard__podium {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
@media (min-width: 768px) {
  .leaderboard__podium {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
            flex: 0 0 40%;
  }
}
.leaderboard__podium {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  min-height: 220px;
}
@media (max-width: 380px) {
  .leaderboard__podium {
    gap: 0.5rem;
  }
}

.leaderboard__step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  max-width: 120px;
  padding: 1.5rem 0.5rem 1rem;
  border-radius: 8px 8px 0 0;
  position: relative;
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
  text-decoration: none;
  color: inherit;
}
.leaderboard__step:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

.leaderboard__step--gold {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 215, 0, 0.2)), to(rgba(255, 215, 0, 0.08)));
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.08) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  min-height: 200px;
}
@media (min-width: 768px) {
  .leaderboard__step--gold {
    min-height: 240px;
  }
}

.leaderboard__step--silver {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, 0.25)), to(rgba(192, 192, 192, 0.1)));
  background: linear-gradient(180deg, rgba(192, 192, 192, 0.25) 0%, rgba(192, 192, 192, 0.1) 100%);
  border: 1px solid rgba(192, 192, 192, 0.5);
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  min-height: 170px;
}
@media (min-width: 768px) {
  .leaderboard__step--silver {
    min-height: 205px;
  }
}

.leaderboard__step--bronze {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(205, 127, 50, 0.2)), to(rgba(205, 127, 50, 0.08)));
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.2) 0%, rgba(205, 127, 50, 0.08) 100%);
  border: 1px solid rgba(205, 127, 50, 0.4);
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  min-height: 140px;
}
@media (min-width: 768px) {
  .leaderboard__step--bronze {
    min-height: 170px;
  }
}

.leaderboard__step-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.leaderboard__step--gold .leaderboard__step-avatar {
  width: 72px;
  height: 72px;
}
.leaderboard__step-avatar img,
.leaderboard__step-avatar .leaderboard__step-avatar-ph {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.leaderboard__step-avatar .leaderboard__step-avatar-ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.leaderboard__step-crown {
  position: absolute;
  top: -6px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 1rem;
  color: #ffd700;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.leaderboard__step-name.jpsnt-user--inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}
.leaderboard__step-name.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.leaderboard__step-level {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

.leaderboard__step-level-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  margin-top: 2px;
}

.leaderboard__step-flag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 0;
}
.leaderboard__step-flag img {
  width: 16px;
  height: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
[data-theme=light] .leaderboard__step-flag img {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
  .leaderboard__step-flag img {
    width: 18px;
    height: 14px;
  }
}

.leaderboard__step-xp {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  margin-top: 2px;
}

.leaderboard__list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
@media (min-width: 768px) {
  .leaderboard__list {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 60%;
            flex: 1 1 60%;
  }
}
.leaderboard__list {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.leaderboard__list::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.leaderboard__list:hover::before {
  opacity: 1;
}
.leaderboard__list {
  padding: 1rem;
}

.leaderboard__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.leaderboard__row:hover {
  background: var(--bg-elevated);
}
.leaderboard__row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.leaderboard__rank {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
}

.leaderboard__user {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.leaderboard__user .jpsnt-user--compact {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.leaderboard__user .jpsnt-user__avatar {
  width: 32px;
  height: 32px;
}
.leaderboard__user .jpsnt-user__name {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
}
.leaderboard__user .jpsnt-user__level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.6875rem;
}

.leaderboard__xp {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
}

.latest {
  background: var(--section-bg);
  padding: 6rem 1.5rem;
  position: relative;
}

.latest__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.latest__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.latest__header-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.latest__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.latest__title {
  color: var(--text-primary);
}

.latest__view-all {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-transition: gap 150ms ease, color 150ms ease;
  transition: gap 150ms ease, color 150ms ease;
}
.latest__view-all:hover {
  gap: 0.5rem;
}
.latest__view-all i {
  font-size: 0.625rem;
}

.latest__track-wrap {
  position: relative;
  overflow: hidden;
}
.latest__track-wrap::before, .latest__track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.latest__track-wrap::before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(var(--section-bg)), to(transparent));
  background: linear-gradient(to right, var(--section-bg), transparent);
}
.latest__track-wrap::after {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(var(--section-bg)), to(transparent));
  background: linear-gradient(to left, var(--section-bg), transparent);
}

.latest__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}

.latest__card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 280px;
}
@media (min-width: 576px) {
  .latest__card {
    width: 300px;
  }
}
@media (min-width: 768px) {
  .latest__card {
    width: 320px;
  }
}

.latest__card .ss-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  -webkit-transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
}
.latest__card .ss-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

.error-404 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  padding: 3rem 1.5rem 6rem;
  overflow: hidden;
}
@media (min-width: 992px) {
  .error-404 {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
  }
}

.error-404__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--color-accent-muted), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 100%, var(--color-accent-muted), transparent 45%);
  opacity: 0.4;
}

.error-404__ghost-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  will-change: transform;
}

.error-404__ghost {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 120px;
  height: 120px;
  font-size: 4.5rem;
  color: var(--color-accent);
  -webkit-filter: drop-shadow(0 0 20px var(--color-accent-muted)) drop-shadow(0 0 48px rgba(0, 212, 255, 0.15));
          filter: drop-shadow(0 0 20px var(--color-accent-muted)) drop-shadow(0 0 48px rgba(0, 212, 255, 0.15));
  opacity: 0;
  will-change: transform;
}
@media (min-width: 768px) {
  .error-404__ghost {
    width: 140px;
    height: 140px;
    font-size: 5.5rem;
  }
}

.error-404__content {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  max-width: 480px;
}

.error-404__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.05em;
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 800;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 0 40px var(--color-accent-muted);
  margin: 0;
}

.error-404__digit {
  display: inline-block;
  opacity: 0;
  will-change: transform;
}
.error-404__digit--zero {
  color: var(--color-accent);
}

.error-404__subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  opacity: 0;
}

.error-404__hint {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  opacity: 0;
}

.error-404__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
  opacity: 0;
}

.page-standard {
  padding: 4rem 0 6rem;
  min-height: 40vh;
}

.page-standard__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.page-standard__header {
  margin-bottom: 2rem;
}

.page-standard__title {
  margin: 0;
  color: var(--text-primary);
}

.page-standard__content {
  color: var(--text-secondary);
}
.page-standard__content > *:first-child {
  margin-top: 0;
}
.page-standard__content ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
  list-style-position: outside;
}
.page-standard__content ol ol {
  list-style-type: lower-alpha;
}
.page-standard__content ol > li {
  margin-bottom: 0.5rem;
}
.page-standard__content ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.page-standard__content ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}
.page-standard__content ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.page-standard__content ul > li::before {
  content: "\f054";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-accent);
}
.page-standard__content ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.page-standard__content ul ul > li {
  padding-left: 1.1rem;
}
.page-standard__content ul ul > li::before {
  font-size: 0.48em;
  top: 0.45em;
  opacity: 0.9;
}
.page-standard__content li:last-child {
  margin-bottom: 0;
}
.page-standard__content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.page-standard__content a:hover {
  color: var(--text-primary);
}

.page-legal {
  padding: 4rem 0 6rem;
  min-height: 40vh;
}

.page-legal__inner {
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.page-legal__header {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.page-legal__title {
  margin: 0;
  color: var(--text-primary);
}

.page-legal__content {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.page-legal__content h2,
.page-legal__content h3,
.page-legal__content h4 {
  color: var(--text-primary);
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.page-legal__content h2:first-child,
.page-legal__content h3:first-child,
.page-legal__content h4:first-child {
  margin-top: 0;
}
.page-legal__content h2 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}
.page-legal__content h3 {
  font-size: 1.0625rem;
}
.page-legal__content ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
  list-style-position: outside;
}
.page-legal__content ol ol {
  list-style-type: lower-alpha;
}
.page-legal__content ol > li {
  margin-bottom: 0.5rem;
}
.page-legal__content ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.page-legal__content ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}
.page-legal__content ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.page-legal__content ul > li::before {
  content: "\f054";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-accent);
}
.page-legal__content ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.page-legal__content ul ul > li {
  padding-left: 1.1rem;
}
.page-legal__content ul ul > li::before {
  font-size: 0.48em;
  top: 0.45em;
  opacity: 0.9;
}
.page-legal__content li:last-child {
  margin-bottom: 0;
}
.page-legal__content p {
  margin-bottom: 1rem;
}
.page-legal__content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.page-legal__content a:hover {
  color: var(--text-primary);
}

.screenshot-rate {
  position: relative;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  padding: 0;
}
@media (min-width: 992px) {
  .screenshot-rate {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
  }
}

.screenshot-rate__loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  padding: 3rem;
}
@media (min-width: 992px) {
  .screenshot-rate__loading {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
  }
}
.screenshot-rate__loading.is-hidden, .screenshot-rate__loading[hidden] {
  display: none !important;
}

.screenshot-rate__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-accent-muted);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  -webkit-animation: screenshot-rate-spin 0.8s linear infinite;
          animation: screenshot-rate-spin 0.8s linear infinite;
}

@-webkit-keyframes screenshot-rate-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes screenshot-rate-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.screenshot-rate__loading-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.screenshot-rate__active.is-hidden, .screenshot-rate__active[hidden] {
  display: none !important;
}

.screenshot-rate__hero {
  position: relative;
  width: 100%;
  min-height: 38vh;
  max-height: 50vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-void);
}
@media (min-width: 768px) {
  .screenshot-rate__hero {
    min-height: 42vh;
    max-height: 55vh;
  }
}
.screenshot-rate__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.screenshot-rate__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1100px;
  margin-top: -6rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .screenshot-rate__body {
    margin-top: -8rem;
    padding-inline: 1.5rem;
  }
}

.screenshot-rate__context-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1rem;
  margin-bottom: 2rem;
}

.screenshot-rate__game-card,
.screenshot-rate__trophy-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  -webkit-transition: border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.screenshot-rate__game-card:hover,
.screenshot-rate__trophy-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  border-color: var(--color-accent);
}
.screenshot-rate__game-card:hover .screenshot-rate__card-arrow,
.screenshot-rate__trophy-card:hover .screenshot-rate__card-arrow {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.screenshot-rate__game-card {
  min-width: 200px;
}

.screenshot-rate__game-cover {
  width: 56px;
  height: 74px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.screenshot-rate__game-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.screenshot-rate__trophy-card {
  min-width: 220px;
}

.screenshot-rate__trophy-img {
  width: 56px;
  height: 56px;
  -o-object-fit: contain;
     object-fit: contain;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.screenshot-rate__trophy-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.screenshot-rate__trophy-type {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 4px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.screenshot-rate__trophy-type--platinum {
  background: rgba(122, 183, 232, 0.25);
  color: #7ab7e8;
}
.screenshot-rate__trophy-type--gold {
  background: rgba(255, 215, 0, 0.25);
  color: rgb(193.8, 163.4, 0);
}
.screenshot-rate__trophy-type--silver {
  background: rgba(192, 192, 192, 0.25);
  color: #8d8d8d;
}
.screenshot-rate__trophy-type--bronze {
  background: rgba(205, 127, 50, 0.25);
  color: rgb(213, 147.48, 82.8);
}

.screenshot-rate__trophy-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screenshot-rate__card-arrow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--color-accent);
  opacity: 0.6;
  -webkit-transform: translateX(-2px);
          transform: translateX(-2px);
  -webkit-transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}

.screenshot-rate__layout {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (min-width: 992px) {
  .screenshot-rate__layout {
    -ms-grid-columns: minmax(0, 1fr) 3rem 400px;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 3rem;
  }
}
@media (min-width: 1200px) {
  .screenshot-rate__layout {
    -ms-grid-columns: minmax(0, 1fr) 432px;
    grid-template-columns: minmax(0, 1fr) 432px;
  }
}

.screenshot-rate__media-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.screenshot-rate__panel-col {
  position: relative;
  min-width: 0;
}
@media (min-width: 992px) {
  .screenshot-rate__panel-col {
    position: sticky;
    top: calc(64px + 1rem);
  }
}

.screenshot-rate__shot-stage {
  width: 100%;
}

.screenshot-rate__shot-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-void);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 48px rgba(0, 0, 0, 0.55);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 48px rgba(0, 0, 0, 0.55);
}
.screenshot-rate__shot-wrap:has(.screenshot-rate__image[src]:not([src=""])) {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.screenshot-rate__image {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.screenshot-rate__lightbox-trigger {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-transition: background 150ms ease, border-color 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}
.screenshot-rate__lightbox-trigger:hover {
  background: rgba(0, 0, 0, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
}
.screenshot-rate__lightbox-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 575px) {
  .screenshot-rate__lightbox-trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.screenshot-rate__lightbox {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(0, 0, 0, 0.95);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  isolation: isolate;
}
.screenshot-rate__lightbox[hidden] {
  display: none;
}

.screenshot-rate__lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.screenshot-rate__lightbox-close:hover {
  background: rgba(255, 255, 255, 0.18);
}
.screenshot-rate__lightbox-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.screenshot-rate__lightbox-img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  cursor: default;
}

.screenshot-rate__criteria-block {
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  -webkit-border-start: 3px solid var(--color-accent-muted);
          border-inline-start: 3px solid var(--color-accent-muted);
}
.screenshot-rate__criteria-block[hidden] {
  display: none;
}

.screenshot-rate__criteria-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.screenshot-rate__criteria {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
  font-style: italic;
}

.screenshot-rate__panel {
  padding: 2rem;
  background: var(--bg-surface);
  border-radius: 12px;
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.screenshot-rate__progress-strip {
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 212, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.screenshot-rate__progress-strip[hidden] {
  display: none;
}

.screenshot-rate__progress-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.screenshot-rate__progress-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.screenshot-rate__progress-track {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  min-width: 120px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.screenshot-rate__progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-transition: background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.screenshot-rate__progress-dot.is-done {
  background: var(--color-accent);
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 10px rgba(0, 212, 255, 0.35);
          box-shadow: 0 0 10px rgba(0, 212, 255, 0.35);
}
.screenshot-rate__progress-dot.is-qualified {
  background: rgba(255, 215, 0, 0.85);
  border-color: rgba(255, 215, 0, 0.9);
  -webkit-box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
          box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.screenshot-rate__progress-count {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.screenshot-rate__progress-badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.screenshot-rate__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.screenshot-rate__badge--mult {
  color: var(--color-accent);
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.1);
}
.screenshot-rate__badge--streak .fa-fire-flame-curved {
  color: #ff9f43;
  font-size: 0.875rem;
}

.screenshot-rate__badge-suffix {
  font-weight: 600;
  font-size: 0.75rem;
  opacity: 0.85;
  text-transform: lowercase;
}

.screenshot-rate__panel-title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.screenshot-rate__panel-lead {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.screenshot-rate__stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.screenshot-rate__stepper-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.screenshot-rate__stepper-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.screenshot-rate__stepper-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-transition: background 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, transform 150ms ease;
  transition: background 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}
.screenshot-rate__stepper-dot.is-done {
  background: var(--color-accent);
  border-color: var(--color-accent);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.screenshot-rate__criteria-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.screenshot-rate__criterion {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.screenshot-rate__criterion:focus-within {
  border-color: rgba(0, 212, 255, 0.35);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15);
          box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15);
}

.screenshot-rate__criterion-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.screenshot-rate__criterion-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
}

.screenshot-rate__criterion-value {
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  min-width: 2ch;
  text-align: right;
}

.screenshot-rate__criterion-hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.screenshot-rate__slider-wrap {
  position: relative;
  margin-bottom: 0.5rem;
}

.screenshot-rate__slider {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.screenshot-rate__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.08)), to(rgba(0, 212, 255, 0.25)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 212, 255, 0.25) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.screenshot-rate__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--bg-surface);
  -webkit-box-shadow: 0 2px 12px rgba(0, 212, 255, 0.45);
          box-shadow: 0 2px 12px rgba(0, 212, 255, 0.45);
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}
.screenshot-rate__slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 212, 255, 0.25) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.screenshot-rate__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.45);
}
.screenshot-rate__slider:hover::-webkit-slider-thumb {
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}
.screenshot-rate__slider:focus-visible {
  outline: none;
}
.screenshot-rate__slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.screenshot-rate__slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.screenshot-rate__slider-ticks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 4px;
  padding-inline: 2px;
  pointer-events: none;
}

.screenshot-rate__slider-tick {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.65;
  width: 1.4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.screenshot-rate__presets {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.screenshot-rate__presets-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.screenshot-rate__preset {
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.screenshot-rate__preset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.screenshot-rate__preset:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.screenshot-rate__panel-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .screenshot-rate__panel-actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.screenshot-rate__submit-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
@media (min-width: 768px) {
  .screenshot-rate__submit-hint {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-right: 1rem;
  }
}

.screenshot-rate__submit-btn {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 768px) {
  .screenshot-rate__submit-btn {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.screenshot-rate__empty.is-hidden, .screenshot-rate__empty[hidden] {
  display: none !important;
}

.screenshot-rate-empty {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  padding: 3rem 1.5rem 6rem;
  overflow: hidden;
}
@media (min-width: 992px) {
  .screenshot-rate-empty {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
  }
}

.screenshot-rate-empty__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--color-accent-muted), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 100%, var(--color-accent-muted), transparent 45%);
  opacity: 0.4;
}

.screenshot-rate-empty__icon-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  will-change: transform;
}

.screenshot-rate-empty__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 120px;
  height: 120px;
  font-size: 4.5rem;
  color: var(--color-accent);
  -webkit-filter: drop-shadow(0 0 20px var(--color-accent-muted)) drop-shadow(0 0 48px rgba(0, 212, 255, 0.15));
          filter: drop-shadow(0 0 20px var(--color-accent-muted)) drop-shadow(0 0 48px rgba(0, 212, 255, 0.15));
  opacity: 0;
  will-change: transform;
}
@media (min-width: 768px) {
  .screenshot-rate-empty__icon {
    width: 140px;
    height: 140px;
    font-size: 5.5rem;
  }
}

.screenshot-rate-empty__content {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  max-width: 480px;
}

.screenshot-rate-empty__summary {
  width: 100%;
  max-width: 400px;
  padding: 1rem 1.5rem;
  margin-bottom: 0.5rem;
  text-align: left;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.screenshot-rate-empty__summary[hidden] {
  display: none;
}

.screenshot-rate-empty__summary-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.screenshot-rate-empty__summary-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.screenshot-rate-empty__summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.screenshot-rate-empty__summary-track {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  min-width: 100px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.screenshot-rate-empty__summary-count {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.screenshot-rate-empty__summary-badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.screenshot-rate-empty__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
  opacity: 0;
}

.screenshot-rate-empty__subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  opacity: 0;
}

.screenshot-rate-empty__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
  opacity: 0;
}

.screenshot-rate-empty__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.ss-display__notice {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
}
.ss-display__notice--pending {
  color: #ffb020;
}
.ss-display__notice--rejected {
  color: #ff3b5c;
}

.ss-display__hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  max-height: 55vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .ss-display__hero {
    min-height: 48vh;
    max-height: 60vh;
  }
}

.ss-display__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ss-display__hero-fade {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.ss-display__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-top: -8rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .ss-display__body {
    margin-top: -10rem;
    padding-inline: 1.5rem;
  }
}

.ss-display--no-hero .ss-display__body {
  margin-top: 0;
  padding-top: 2rem;
}

.ss-display__pagetitle {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .ss-display__pagetitle {
    margin-bottom: 2rem;
  }
}

.ss-display__pagetitle .ss-display__title {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.ss-display__info {
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 1;
}
.ss-display__info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, var(--border-glow)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, var(--border-glow) 50%, transparent 100%);
  opacity: 0.5;
}

.ss-display__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1rem;
  max-width: 56ch;
}

.ss-display__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.ss-display__meta-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.ss-display__meta-chip i {
  font-size: 0.6875rem;
  color: var(--color-accent);
}
.ss-display__meta-chip:hover {
  border-color: var(--border-glow);
  -webkit-box-shadow: 0 0 12px var(--color-accent-muted);
          box-shadow: 0 0 12px var(--color-accent-muted);
}

.ss-display__meta-chip-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.ss-display__meta-chip--status {
  color: var(--text-secondary);
}
.ss-display__meta-chip--status-approved i {
  color: var(--color-success, #22c55e);
}
.ss-display__meta-chip--status-pending i {
  color: var(--color-warning, #f59e0b);
}
.ss-display__meta-chip--status-rejected i {
  color: var(--color-danger, #ef4444);
}

.ss-display__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.ss-display__meta-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ss-display__copy-wrap {
  display: none;
}
@media (min-width: 768px) {
  .ss-display__copy-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
}

.ss-display__copy-url {
  display: inline-block;
  max-width: 280px;
  padding: 0.25rem 0.5rem;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: border-color 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, color 150ms ease;
}
@media (min-width: 992px) {
  .ss-display__copy-url {
    max-width: 360px;
    font-size: 0.8125rem;
  }
}

.ss-display__kebab {
  position: relative;
}

.ss-display__kebab-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  -webkit-transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.ss-display__kebab-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-glow);
  background: var(--bg-surface);
}

.ss-display__kebab-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 200;
  min-width: 160px;
  padding: 0.25rem 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.ss-display__kebab-menu[hidden] {
  display: none;
}

.ss-display__body:has(.ss-display__kebab-menu:not([hidden])) .jpsnt-engage {
  pointer-events: none;
}

.ss-display .jpsnt-engage {
  padding: 1rem 0;
}

.ss-display .jpsnt-comments {
  margin-top: 0;
  padding-top: 1.5rem;
}

.ss-display__kebab-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
  text-align: left;
}
.ss-display__kebab-item i {
  width: 14px;
  text-align: center;
  font-size: 0.75rem;
}
.ss-display__kebab-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.ss-display__kebab-item--danger:hover {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.08);
}

.ss-display__edit-wrap {
  margin-top: 0;
}
.ss-display__edit-wrap:has(.ss-display__edit-form:not([hidden])) {
  margin-top: 3rem;
}

.ss-display__edit-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.ss-display__edit-form::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.ss-display__edit-form:hover::before {
  opacity: 1;
}
.ss-display__edit-form {
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.ss-display__edit-form[hidden] {
  display: none;
}

.ss-display__edit-field {
  margin-bottom: 1rem;
}
.ss-display__edit-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.ss-display__input,
.ss-display__textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.ss-display__input:focus,
.ss-display__textarea:focus {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 3px var(--color-accent-muted);
          box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.ss-display__textarea {
  resize: vertical;
  min-height: 88px;
}

.ss-display__edit-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}

.ss-display__more {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color);
}

.ss-display__more-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.ss-display__more-title .ss-display__more-title-user.jpsnt-user--inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  vertical-align: baseline;
  font: inherit;
  font-weight: 700;
  color: var(--color-accent);
}
.ss-display__more-title .ss-display__more-title-user.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
  font-weight: 700;
  color: inherit;
}

.ss-display__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 576px) {
  .ss-display__grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.ss-display__grid .ss-card {
  border: 1px solid var(--border-color);
}
.ss-display__grid .ss-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--border-glow);
  -webkit-box-shadow: var(--shadow-glow);
          box-shadow: var(--shadow-glow);
}

.ss-lightbox {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(0, 0, 0, 0.95);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  isolation: isolate;
}
.ss-lightbox[hidden] {
  display: none;
}

.ss-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.25rem;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.ss-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.ss-lightbox__img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  cursor: default;
}

.ss-display__confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(0, 0, 0, 0.65);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
}
.ss-display__confirm-overlay[hidden] {
  display: none;
}

.ss-display__confirm {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.ss-display__confirm::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.ss-display__confirm:hover::before {
  opacity: 1;
}
.ss-display__confirm {
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.ss-display__confirm h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.ss-display__confirm p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.ss-display__confirm-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}

.ss-display__mod-bar {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.ss-display__mod-bar-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ss-display__mod-status-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.ss-display__mod-status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.ss-display__mod-status i {
  font-size: 0.875rem;
}
.ss-display__mod-status--approved {
  color: var(--color-success, #22c55e);
}
.ss-display__mod-status--pending {
  color: #ffb020;
}
.ss-display__mod-status--rejected {
  color: #ff3b5c;
}

.ss-display__mod-rejection-notes {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.ss-display__mod-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ss-display__mod-decline-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.ss-display__mod-decline-form[hidden] {
  display: none;
}

.ss-display__mod-decline-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ss-display__mod-decline-notes {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.ss-display__mod-decline-notes:focus {
  outline: none;
  border-color: var(--color-accent);
}

.ss-display__mod-decline-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}

.mod-queue {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-queue {
    padding: 3rem 2rem;
  }
}

.mod-queue__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-queue__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-queue__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-queue__title i {
  color: var(--color-accent);
}

.mod-queue__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.mod-queue__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.mod-queue__filter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-queue__filter:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mod-queue__filter:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-glow);
}
.mod-queue__filter--active {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.4);
}
.mod-queue__filter--active:hover {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.12);
}

.mod-queue__filter-count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 1.25rem;
  text-align: center;
  background: var(--bg-elevated);
  border-radius: 8px;
  color: var(--text-muted);
}
.mod-queue__filter--active .mod-queue__filter-count {
  background: rgba(0, 212, 255, 0.2);
  color: var(--color-accent);
}

.mod-queue__empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.mod-queue__empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.mod-queue__empty:hover::before {
  opacity: 1;
}
.mod-queue__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding: 6rem 2rem;
  color: var(--text-muted);
  text-align: center;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.mod-queue__empty i {
  font-size: 3rem;
  color: #00e576;
  opacity: 0.85;
}
.mod-queue__empty p {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mod-queue__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  overflow: visible;
}

.mod-queue__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.mod-queue__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.mod-queue__card:hover::before {
  opacity: 1;
}
.mod-queue__card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 120px 1.5rem 1fr;
  grid-template-columns: 120px 1fr;
  -ms-grid-rows: auto 1.5rem auto;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 12px;
  overflow: hidden;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.mod-queue__card > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.mod-queue__card > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.mod-queue__card > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.mod-queue__card > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
@media (min-width: 768px) {
  .mod-queue__card {
    -ms-grid-columns: 180px 1fr 180px;
    grid-template-columns: 180px 1fr 180px;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    padding: 2rem 3rem;
  }
  .mod-queue__card > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .mod-queue__card > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .mod-queue__card > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

.mod-queue__card--reported {
  overflow: visible;
}

.mod-queue__card--pending {
  -ms-grid-columns: 1fr 160px;
  grid-template-columns: 1fr 160px;
}
@media (min-width: 768px) {
  .mod-queue__card--pending {
    -ms-grid-columns: 1fr 360px 180px;
    grid-template-columns: 1fr 360px 180px;
  }
}

.mod-queue__card-header {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.mod-queue__card-header .mod-queue__type-badge {
  margin-bottom: 0;
}

.mod-queue__type-badge {
  grid-column: 1/-1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.25rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.mod-queue__card-header .mod-queue__type-badge {
  grid-column: auto;
}
.mod-queue__type-badge--pending {
  color: #ffb020;
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.3);
}
.mod-queue__type-badge--comment {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
}
.mod-queue__type-badge--screenshot {
  color: #1b6ef5;
  background: rgba(27, 110, 245, 0.1);
  border: 1px solid rgba(27, 110, 245, 0.25);
}
.mod-queue__type-badge--user {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.08);
  border: 1px solid rgba(255, 59, 92, 0.25);
}
.mod-queue__type-badge--conversation {
  color: #1b6ef5;
  background: rgba(27, 110, 245, 0.1);
  border: 1px solid rgba(27, 110, 245, 0.25);
}

.mod-queue__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mod-queue__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
}

.mod-queue__meta-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.25rem;
}

.mod-queue__report-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mod-queue__reasons {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.mod-queue__waiting {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-queue__status {
  font-size: 0.8125rem;
}
.mod-queue__status--online {
  color: #00e576;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
}
.mod-queue__status--online i {
  font-size: 0.5rem;
}

.mod-queue__notes {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  padding: 1rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-border-start: 3px solid var(--color-accent);
          border-inline-start: 3px solid var(--color-accent);
}

.mod-queue__quote {
  margin: 0;
  padding: 2rem 1.5rem;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-border-start: 3px solid var(--color-accent);
          border-inline-start: 3px solid var(--color-accent);
  line-height: 1.5;
}

.mod-queue__context {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.mod-queue__excerpt {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}

.mod-queue__link {
  font-size: 0.875rem;
  color: var(--color-accent);
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-weight: 500;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.mod-queue__link:hover {
  opacity: 0.9;
  text-decoration: underline;
}

.mod-queue__card--comment {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mod-queue__card--comment {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .mod-queue__card--screenshot,
  .mod-queue__card--user {
    -ms-grid-columns: 180px 1fr;
    grid-template-columns: 180px 1fr;
  }
}

@media (min-width: 768px) {
  .mod-queue__card--conversation {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.mod-queue__conversation-snapshot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mod-queue__snapshot-messages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.8125rem;
}

.mod-queue__snapshot-msg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 0.5rem;
  line-height: 1.4;
}
.mod-queue__snapshot-msg--you .mod-queue__snapshot-sender {
  color: var(--color-accent);
}
.mod-queue__snapshot-msg--them .mod-queue__snapshot-sender {
  color: var(--text-secondary);
}

.mod-queue__snapshot-sender {
  font-weight: 600;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-queue__snapshot-content {
  color: var(--text-primary);
}

.mod-queue__thumb--ph {
  aspect-ratio: 16/9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 1.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.mod-queue__user-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-queue__user-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.mod-queue__user-name:hover {
  color: var(--color-accent);
}
.mod-queue__user-name .mod-queue__author-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
.mod-queue__user-name .mod-queue__username {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-queue__author--large {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2px;
}

.mod-queue__username {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 400;
}

.mod-queue__thumb {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid var(--border-color);
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.mod-queue__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
}
.mod-queue__thumb:hover img {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.mod-queue__thumb--preview {
  min-height: 180px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.mod-queue__thumb--avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
}
.mod-queue__thumb--avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 50%;
}
.mod-queue__thumb--avatar .mod-queue__avatar--ph {
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  color: var(--text-muted);
  background: var(--bg-void);
}

.mod-queue__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.mod-queue__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.mod-queue__author {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 2px 0.5rem 2px 2px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.mod-queue__author:hover {
  border-color: var(--border-glow);
  -webkit-box-shadow: 0 0 12px var(--color-accent-muted);
          box-shadow: 0 0 12px var(--color-accent-muted);
}

.mod-queue__meta .jpsnt-user.mod-queue__author .jpsnt-user__avatar,
.mod-queue__meta .jpsnt-user.mod-queue__author .jpsnt-user__avatar--ph,
.mod-queue__meta-row .jpsnt-user.mod-queue__author .jpsnt-user__avatar,
.mod-queue__meta-row .jpsnt-user.mod-queue__author .jpsnt-user__avatar--ph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.mod-queue__meta .jpsnt-user.mod-queue__author .jpsnt-user__avatar--ph,
.mod-queue__meta-row .jpsnt-user.mod-queue__author .jpsnt-user__avatar--ph {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.625rem;
}
.mod-queue__meta .jpsnt-user.mod-queue__author .jpsnt-user__level,
.mod-queue__meta-row .jpsnt-user.mod-queue__author .jpsnt-user__level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 3px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.mod-queue__user-block .jpsnt-user.mod-queue__author--large {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.mod-queue__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.mod-queue__avatar--ph {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.625rem;
}

.mod-queue__author-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.mod-queue__level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 3px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.mod-queue__date {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-queue__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.mod-queue__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 4px 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  white-space: nowrap;
}
.mod-queue__chip--platinum {
  border-color: rgba(122, 183, 232, 0.5);
  color: #7ab7e8;
  background: rgba(122, 183, 232, 0.08);
}
.mod-queue__chip--gold {
  border-color: rgba(255, 215, 0, 0.5);
  color: rgb(214.2, 180.6, 0);
  background: rgba(255, 215, 0, 0.08);
}
.mod-queue__chip--silver {
  border-color: rgba(192, 192, 192, 0.5);
  color: rgb(153.75, 153.75, 153.75);
  background: rgba(192, 192, 192, 0.08);
}
.mod-queue__chip--bronze {
  border-color: rgba(205, 127, 50, 0.5);
  color: rgb(210, 139.8, 70.5);
  background: rgba(205, 127, 50, 0.08);
}
.mod-queue__chip--link {
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.mod-queue__chip--link:hover {
  border-color: var(--border-glow);
  background: var(--bg-elevated);
  -webkit-box-shadow: 0 0 12px var(--color-accent-muted);
          box-shadow: 0 0 12px var(--color-accent-muted);
}

.mod-queue__chip-icon {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

.mod-queue__item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-queue__item-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.mod-queue__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  grid-column: 1/-1;
  padding: 2rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-border-start: 4px solid var(--color-accent);
          border-inline-start: 4px solid var(--color-accent);
}
@media (min-width: 768px) {
  .mod-queue__actions {
    grid-column: auto;
    -ms-grid-row-align: stretch;
        align-self: stretch;
    padding: 2rem 2rem;
    -webkit-margin-start: 2rem;
            margin-inline-start: 2rem;
    border-radius: 12px;
    min-width: 200px;
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
  }
  .mod-queue__actions .btn {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    white-space: nowrap;
    padding-inline: 1.5rem;
    min-height: 2.5rem;
  }
}
@media (min-width: 768px) {
  .mod-queue__actions--menu {
    min-width: auto;
    padding: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.mod-queue__actions:not(.mod-queue__actions--menu)::before {
  content: "Mod actions";
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.mod-queue__actions .btn {
  font-weight: 600;
  -webkit-transition: background 150ms ease, border-color 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}
.mod-queue__actions .btn:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}
.mod-queue__actions .btn--secondary {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
.mod-queue__actions .btn--secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-glow);
}
.mod-queue__actions .btn--danger {
  border-color: rgba(255, 59, 92, 0.5);
}
.mod-queue__actions .btn--danger:hover {
  border-color: #ff3b5c;
  -webkit-box-shadow: 0 0 12px rgba(255, 59, 92, 0.25);
          box-shadow: 0 0 12px rgba(255, 59, 92, 0.25);
}
.mod-queue__actions .btn--primary:hover, .mod-queue__actions .btn--upload:hover {
  -webkit-box-shadow: 0 0 12px var(--color-accent-muted);
          box-shadow: 0 0 12px var(--color-accent-muted);
}

.mod-queue__actions-menu {
  position: relative;
}

.mod-queue__actions-trigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.mod-queue__actions-trigger:hover {
  background: var(--bg-elevated);
  border-color: var(--border-glow);
  color: var(--text-primary);
}
.mod-queue__actions-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.mod-queue__actions-trigger i {
  font-size: 1rem;
}

.mod-queue__actions-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 180px;
  padding: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  z-index: 100;
}
.mod-queue__actions-dropdown.mod-queue__actions-dropdown--above {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.mod-queue__actions-dropdown[hidden] {
  display: none !important;
}

.mod-queue__actions-group {
  padding: 0.25rem 0;
}
.mod-queue__actions-group:not(:first-child) {
  border-top: 1px solid var(--border-color);
}

.mod-queue__actions-group-label {
  display: block;
  padding: 0.25rem 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.mod-queue__actions-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
}
.mod-queue__actions-item:hover {
  background: var(--bg-surface);
  color: var(--color-accent);
}
.mod-queue__actions-item--danger:hover {
  color: #ff3b5c;
}
.mod-queue__actions-item i {
  width: 1em;
  opacity: 0.9;
}

.mod-queue__decline-form,
.mod-queue__reject-form,
.mod-queue__warn-form,
.mod-queue__mute-form,
.mod-queue__ban-form {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 1rem;
}
.mod-queue__decline-form[hidden],
.mod-queue__reject-form[hidden],
.mod-queue__warn-form[hidden],
.mod-queue__mute-form[hidden],
.mod-queue__ban-form[hidden] {
  display: none;
}

.mod-queue__decline-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mod-queue__decline-select {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.mod-queue__decline-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-queue__decline-notes {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.mod-queue__decline-notes:focus {
  outline: none;
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 3px var(--color-accent-muted);
          box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.mod-queue__decline-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}

.mod-queue__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}

.mod-queue__page-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mod-queue__card--removing {
  overflow: hidden;
}

.mod-home.mod-dashboard,
.mod-dashboard {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-home.mod-dashboard,
  .mod-dashboard {
    padding: 3rem 2rem;
  }
}

.mod-dashboard__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-dashboard__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-dashboard__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.mod-dashboard__title i {
  color: var(--color-accent);
}

.mod-dashboard__lead {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 56ch;
}

.mod-dashboard__updated {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-dashboard__priority {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mod-dashboard__priority-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
}

.mod-dashboard__stat-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.mod-dashboard__stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.mod-dashboard__stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-dashboard__cta-queue {
  white-space: nowrap;
}

.mod-dashboard__priority-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
  max-width: 36ch;
}

.mod-dashboard__urgency {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-dashboard__urgency i {
  opacity: 0.85;
}
.mod-dashboard__urgency--ok {
  color: var(--color-success, #4ade80);
}
.mod-dashboard__urgency--warn {
  color: #fbbf24;
}
.mod-dashboard__urgency--bad {
  color: #f87171;
}

.mod-dashboard__section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.mod-dashboard__attention-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.mod-dashboard__attention-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-dashboard__attention-card:hover {
  border-color: var(--color-accent);
  background: var(--item-hover-bg);
}

.mod-dashboard__attention-icon {
  color: var(--color-accent);
}

.mod-dashboard__attention-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.mod-dashboard__attention-count {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mod-dashboard__next-up-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mod-dashboard__next-up-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-dashboard__next-up-card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(120px, 200px) 1.5rem 1fr 1.5rem auto;
  grid-template-columns: minmax(120px, 200px) 1fr auto;
  gap: 1.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
@media (max-width: 720px) {
  .mod-dashboard__next-up-card {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.mod-dashboard__next-up-thumb img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.mod-dashboard__next-up-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-dashboard__next-up-chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.mod-dashboard__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8125rem;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
}
.mod-dashboard__chip--platinum {
  border-color: rgba(185, 242, 255, 0.35);
}
.mod-dashboard__chip--gold {
  border-color: rgba(255, 215, 120, 0.35);
}
.mod-dashboard__chip--silver {
  border-color: rgba(200, 210, 220, 0.35);
}
.mod-dashboard__chip--bronze {
  border-color: rgba(205, 155, 120, 0.35);
}

.mod-dashboard__next-up-actions {
  -ms-grid-column-align: end;
      justify-self: end;
}
@media (max-width: 720px) {
  .mod-dashboard__next-up-actions {
    -ms-grid-column-align: stretch;
        justify-self: stretch;
  }
}

.mod-dashboard__charts-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mod-dashboard__charts-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.mod-dashboard__period {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 4px;
}

.mod-dashboard__period-btn--active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mod-dashboard__charts-link {
  font-size: 0.875rem;
  font-weight: 600;
}

.mod-dashboard__charts {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.mod-dashboard__charts[hidden] {
  display: none;
}

.mod-dashboard__charts--extra {
  margin-top: 1.5rem;
}

.mod-dashboard__chart-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.5rem 1.5rem;
}

.mod-dashboard__chart-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.mod-dashboard__chart-canvas {
  position: relative;
  min-height: 200px;
}

.mod-dashboard__charts-more {
  margin-top: 1rem;
}

.mod-dashboard__charts-empty {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.mod-dashboard__site-head {
  margin-bottom: 1.5rem;
}

.mod-dashboard__site-sub {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 56ch;
}

.mod-dashboard__site-link {
  font-size: 0.875rem;
  font-weight: 600;
}

.mod-dashboard__site-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.mod-dashboard__site-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.mod-dashboard__site-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-dashboard__site-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mod-dashboard__today-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  cursor: help;
}
.mod-dashboard__today-chip i {
  font-size: 0.75rem;
}
.mod-dashboard__today-chip--zero {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border-color);
}
.mod-dashboard__today-chip--zero i {
  opacity: 0.7;
}

.mod-dashboard__site-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.mod-dashboard__telemetry {
  padding: 1.5rem 2rem;
  background: var(--bg-void);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.mod-dashboard__telemetry-lead {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mod-dashboard__telemetry-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.mod-dashboard__telemetry-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}

.mod-dashboard__telemetry-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mod-dashboard__telemetry-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-dashboard__telemetry-note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-dashboard__admin-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.mod-dashboard__admin-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  position: relative;
}
.mod-dashboard__admin-card i {
  color: var(--color-accent);
}
.mod-dashboard__admin-card:hover {
  border-color: var(--color-accent);
}

.mod-dashboard__admin-badge {
  margin-left: auto;
  min-width: 1.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
}

.mod-dashboard__cron {
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
}
.mod-dashboard__cron--error, .mod-dashboard__cron--never {
  border-color: rgba(248, 113, 113, 0.45);
}
.mod-dashboard__cron--partial {
  border-color: rgba(251, 191, 36, 0.45);
}

.mod-dashboard__cron-label {
  font-weight: 600;
}

.mod-dashboard__cron-status {
  font-variant-numeric: tabular-nums;
}

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

.mod-dashboard__tools-head {
  margin-bottom: 1.5rem;
}

.mod-dashboard__tools-sub {
  margin: -0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.mod-dashboard__tools-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.mod-dashboard__tool-card {
  --tool-accent: 0, 212, 255;
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1rem 1fr 1rem auto;
  grid-template-columns: auto 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--tool-accent), 0.08) 0%, rgba(var(--tool-accent), 0) 60%), var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  -webkit-transition: border-color 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.mod-dashboard__tool-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--tool-accent), 0.95)), to(rgba(var(--tool-accent), 0.25)));
  background: linear-gradient(180deg, rgba(var(--tool-accent), 0.95), rgba(var(--tool-accent), 0.25));
  opacity: 0.85;
}
.mod-dashboard__tool-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  border-color: rgba(var(--tool-accent), 0.55);
  -webkit-box-shadow: 0 16px 32px -22px rgba(var(--tool-accent), 0.55);
          box-shadow: 0 16px 32px -22px rgba(var(--tool-accent), 0.55);
}
.mod-dashboard__tool-card:hover .mod-dashboard__tool-arrow {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
  opacity: 1;
}
.mod-dashboard__tool-card:hover .mod-dashboard__tool-icon {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.mod-dashboard__tool-card--queue {
  --tool-accent: 0, 212, 255;
}
.mod-dashboard__tool-card--users {
  --tool-accent: 129, 140, 248;
}
.mod-dashboard__tool-card--bans {
  --tool-accent: 248, 113, 113;
}
.mod-dashboard__tool-card--activity {
  --tool-accent: 45, 212, 191;
}
.mod-dashboard__tool-card--news {
  --tool-accent: 251, 191, 36;
}
.mod-dashboard__tool-card--events {
  --tool-accent: 244, 114, 182;
}
.mod-dashboard__tool-card--import-review {
  --tool-accent: 124, 211, 165;
}
.mod-dashboard__tool-card--import {
  --tool-accent: 96, 165, 250;
}
.mod-dashboard__tool-card--email {
  --tool-accent: 167, 139, 250;
}
.mod-dashboard__tool-card--options {
  --tool-accent: 156, 163, 175;
}

.mod-dashboard__tool-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(var(--tool-accent), 0.14);
  color: rgb(var(--tool-accent));
  font-size: 1.0625rem;
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}

.mod-dashboard__tool-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mod-dashboard__tool-title {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.mod-dashboard__tool-desc {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mod-dashboard__tool-badge {
  min-width: 1.75rem;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  background: rgba(var(--tool-accent), 0.18);
  color: rgb(var(--tool-accent));
  border: 1px solid rgba(var(--tool-accent), 0.35);
}

.mod-dashboard__tool-arrow {
  color: var(--text-muted);
  opacity: 0.55;
  font-size: 0.875rem;
  -webkit-transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: transform 150ms ease, opacity 150ms ease;
  transition: transform 150ms ease, opacity 150ms ease, -webkit-transform 150ms ease;
}

.mod-import-control {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-import-control {
    padding: 3rem 2rem;
  }
}

.mod-import-control__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-import-control__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-import-control__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-import-control__title i {
  color: var(--color-accent);
}

.mod-import-control__intro {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}

.mod-import-control__connection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.mod-import-control__led {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: default;
}
.mod-import-control__led--checking .mod-import-control__led-dot {
  background: var(--color-accent);
  opacity: 0.85;
  -webkit-animation: mod-import-control-pulse 1.2s ease-in-out infinite;
          animation: mod-import-control-pulse 1.2s ease-in-out infinite;
}
.mod-import-control__led--ok .mod-import-control__led-dot {
  background: var(--color-success);
}
.mod-import-control__led--error .mod-import-control__led-dot {
  background: var(--color-danger);
}
.mod-import-control__led--idle .mod-import-control__led-dot {
  background: var(--text-muted);
  opacity: 0.6;
}

.mod-import-control__led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-import-control__led-label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@-webkit-keyframes mod-import-control-pulse {
  0%, 100% {
    opacity: 0.85;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

@keyframes mod-import-control-pulse {
  0%, 100% {
    opacity: 0.85;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0.5;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
.mod-import-control__mode-selector {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.mod-import-control__mode-card {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2rem 1.5rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  position: relative;
  overflow: hidden;
}
.mod-import-control__mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent-muted) 0%, transparent 60%);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
}
.mod-import-control__mode-card i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--color-accent);
  background: var(--color-accent-muted);
  border-radius: 8px;
  -webkit-transition: background 250ms ease, -webkit-transform 250ms ease;
  transition: background 250ms ease, -webkit-transform 250ms ease;
  transition: transform 250ms ease, background 250ms ease;
  transition: transform 250ms ease, background 250ms ease, -webkit-transform 250ms ease;
}
.mod-import-control__mode-card span {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  position: relative;
}
.mod-import-control__mode-card small {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
  position: relative;
}
.mod-import-control__mode-card:hover {
  border-color: var(--color-accent);
  -webkit-box-shadow: var(--shadow-glow);
          box-shadow: var(--shadow-glow);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.mod-import-control__mode-card:hover::before {
  opacity: 0.08;
}
.mod-import-control__mode-card:hover i {
  background: var(--color-accent);
  color: #fff;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.mod-import-control__mode-card.is-active {
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 2px var(--color-accent-muted), var(--shadow-glow);
          box-shadow: 0 0 0 2px var(--color-accent-muted), var(--shadow-glow);
}
.mod-import-control__mode-card.is-active::before {
  opacity: 0.06;
}
.mod-import-control__mode-card.is-active i {
  background: var(--color-accent);
  color: #fff;
}
.mod-import-control__mode-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.mod-import-control__mode-card--psn i {
  font-size: 1.25rem;
}

.mod-import-control__mode-card--json i {
  font-size: 1.25rem;
}

.mod-import-control__mode-prompt {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.mod-import-control__mode-content {
  margin-top: 1rem;
}

.mod-import-control__json-placeholder {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.mod-import-control__json-dropzone {
  width: 100%;
  min-height: 240px;
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
  position: relative;
  overflow: hidden;
}
.mod-import-control__json-dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.mod-import-control__json-dropzone-idle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-muted);
}
.mod-import-control__json-dropzone-idle > i {
  font-size: 2.5rem;
  color: var(--color-accent);
  opacity: 0.6;
}
.mod-import-control__json-dropzone-idle span {
  font-size: 0.875rem;
}

.mod-import-control__json-dropzone-or {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.6;
}

.mod-import-control__json-dropzone-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.mod-import-control__json-results {
  margin-top: 1.5rem;
}

.mod-import-control__fetch {
  margin-bottom: 1.5rem;
}

.mod-import-control__fetch-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.mod-import-control__fetch-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mod-import-control__fetch-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 180px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.mod-import-control__fetch-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.mod-import-control__fetch-input::-moz-placeholder {
  color: var(--text-muted);
}
.mod-import-control__fetch-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-import-control__fetch-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-import-control__fetch-input::placeholder {
  color: var(--text-muted);
}
.mod-import-control__fetch-input:focus {
  outline: none;
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 2px var(--color-accent-muted);
          box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.mod-import-control__fetch-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.mod-import-control__fetch-btn:disabled {
  cursor: not-allowed;
}

.mod-import-control__results {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.mod-import-control__results-placeholder {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.mod-import-control__results-placeholder i {
  margin-right: 0.25rem;
}
.mod-import-control__results-placeholder--loading {
  color: var(--text-secondary);
}
.mod-import-control__results-placeholder--loading i {
  color: var(--color-accent);
}
.mod-import-control__results-placeholder--error {
  color: var(--color-danger);
}
.mod-import-control__results-placeholder--empty {
  color: var(--text-muted);
}

.mod-import-control__table-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-import-control__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
}
.mod-import-control__filters .mod-import-control__filter-btn {
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.mod-import-control__filters .mod-import-control__filter-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.mod-import-control__results[data-filter=new] .mod-import-control__table tbody tr[data-exists=true] {
  display: none;
}

.mod-import-control__results[data-filter=existing] .mod-import-control__table tbody tr[data-exists=false] {
  display: none;
}

.mod-import-control__import-all-btn i {
  margin-right: 0.25rem;
}

.mod-import-control__import-all-counter {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.mod-import-control__import-all-counter strong {
  color: var(--text-primary);
}

.mod-import-control__import-all-stop {
  margin-left: auto;
}

.mod-import-control__table-wrap {
  overflow-x: auto;
}

.mod-import-control__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.mod-import-control__table th {
  text-align: left;
  padding: 1rem 1.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}
.mod-import-control__table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}
.mod-import-control__table tbody tr {
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.mod-import-control__table tbody tr:hover {
  background: var(--bg-elevated);
}
.mod-import-control__table tbody tr:last-child td {
  border-bottom: none;
}

.mod-import-control__failed {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-danger);
  cursor: default;
}
.mod-import-control__failed i {
  opacity: 0.9;
}

.mod-import-control__cell--game {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.mod-import-control__cell--game .mod-import-control__game-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}
.mod-import-control__cell--id code {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.mod-import-control__cell--platform {
  color: var(--text-secondary);
}
.mod-import-control__cell--trophies {
  font-variant-numeric: tabular-nums;
}
.mod-import-control__cell--actions {
  white-space: nowrap;
  text-align: right;
}
.mod-import-control__cell--actions .mod-import-control__import-btn {
  text-decoration: none;
}

.mod-import-control__picker-cell {
  padding: 1rem !important;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}

.mod-import-control__picker {
  max-width: 100%;
}

.mod-import-control__picker-head {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}
.mod-import-control__picker-head code {
  font-size: 0.75rem;
  margin-left: 0.25rem;
  padding: 2px 6px;
  background: var(--bg-base);
  border-radius: 4px;
}

.mod-import-control__picker-label {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-import-control__picker-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.mod-import-control__picker-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-align: left;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-import-control__picker-option:hover {
  border-color: var(--color-accent);
  background: var(--bg-elevated);
}

.mod-import-control__picker-option-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.mod-import-control__picker-year {
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.mod-import-control__picker-option-score {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-import-control__picker-reject {
  margin-top: 0.25rem;
}

.mod-import-control__results-count {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-import-review {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-import-review {
    padding: 3rem 2rem;
  }
}

.mod-import-review__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-import-review__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-import-review__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-import-review__title i {
  color: var(--color-accent);
}

.mod-import-review__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.mod-import-review__empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.mod-import-review__empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.mod-import-review__empty:hover::before {
  opacity: 1;
}
.mod-import-review__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding: 6rem 2rem;
  color: var(--text-muted);
  text-align: center;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.mod-import-review__empty i {
  font-size: 3rem;
  color: #00e576;
  opacity: 0.85;
}
.mod-import-review__empty p {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.mod-import-review__empty[hidden] {
  display: none !important;
}

.mod-import-review__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.mod-import-review__dup-stack {
  grid-column: 1/-1;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--jpsnt-radius, 8px);
  background: color-mix(in srgb, var(--jpsnt-color-warning, #c9a227) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--jpsnt-color-warning, #c9a227) 35%, transparent);
}

.mod-import-review__dup-stack strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.mod-import-review__dup-stack-text {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.95;
}

.mod-import-review__dup-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-import-review__dup-np code {
  font-size: 0.75rem;
  opacity: 0.9;
}

.mod-import-review__card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
@media (min-width: 768px) {
  .mod-import-review__card {
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
  }
  .mod-import-review__card > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .mod-import-review__card > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .mod-import-review__card > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .mod-import-review__card > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
}

.mod-import-review__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5rem;
}

.mod-import-review__game-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mod-import-review__np-id {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  background: var(--bg-base);
  border-radius: 4px;
}

.mod-import-review__date {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-import-review__candidates {
  grid-column: 1/-1;
}

.mod-import-review__candidates-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-import-review__candidates-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  max-height: 240px;
  overflow-y: auto;
}

.mod-import-review__pick-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-align: left;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-import-review__pick-btn:hover {
  border-color: var(--color-accent);
  background: var(--bg-elevated);
}

.mod-import-review__pick-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.mod-import-review__pick-year {
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.mod-import-review__pick-score {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-import-review__actions {
  -ms-flex-item-align: start;
      -ms-grid-row-align: start;
      align-self: start;
}

.mod-import-review__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-import-review__page-info {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mod-email-templates {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-email-templates {
    padding: 3rem 2rem;
  }
}

.mod-email-templates__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-email-templates__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-email-templates__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-email-templates__title i {
  color: var(--color-accent);
}

.mod-email-templates__intro {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}
.mod-email-templates__intro code {
  font-family: var(--font-mono, monospace);
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background: var(--bg-surface);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.mod-email-templates__layout {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
  min-height: 0; /* Allow grid children to shrink */
}
@media (min-width: 992px) {
  .mod-email-templates__layout {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    min-height: calc(100vh - 280px); /* Fill viewport, reduce page scroll */
  }
}

.mod-email-templates__editor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  min-height: 0;
  overflow: hidden;
}

.mod-email-templates__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-email-templates__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mod-email-templates__select {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-width: 280px;
}

.mod-email-templates__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.mod-email-templates__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.mod-email-templates__field--body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

.mod-email-templates__input {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.mod-email-templates__textarea {
  padding: 1rem;
  font-size: 0.8125rem;
  font-family: var(--font-mono, monospace);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  min-height: 280px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.mod-email-templates__placeholders {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.mod-email-templates__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.mod-email-templates__preview-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  min-height: 0;
}

.mod-email-templates__preview-header {
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-email-templates__preview-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.mod-email-templates__preview {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 280px;
  border: none;
  background: #141414;
  width: 100%;
}

.mod-site-options {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-site-options {
    padding: 3rem 2rem;
  }
}

.mod-site-options__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-site-options__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-site-options__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-site-options__title i {
  color: var(--color-accent);
}

.mod-site-options__intro {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}

.mod-site-options__section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.mod-site-options__section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}
.mod-site-options__section-title i {
  color: var(--color-accent);
  font-size: 0.9375rem;
}

.mod-site-options__fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mod-site-options__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.mod-site-options__field:last-child {
  border-bottom: none;
}
.mod-site-options__field:hover {
  background: rgba(255, 255, 255, 0.015);
}
.mod-site-options__field--readonly {
  background: transparent;
}
.mod-site-options__field--readonly:hover {
  background: transparent;
}

.mod-site-options__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mod-site-options__input-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-site-options__input-row .mod-site-options__input-wrap,
.mod-site-options__input-row .mod-site-options__input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.mod-site-options__input-row .mod-site-options__input--number {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  max-width: 120px;
}

.mod-site-options__restore {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.mod-site-options__restore:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}

.mod-site-options__input {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.mod-site-options__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.mod-site-options__input::-moz-placeholder {
  color: var(--text-muted);
}
.mod-site-options__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-site-options__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-site-options__input::placeholder {
  color: var(--text-muted);
}
.mod-site-options__input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mod-site-options__input--number {
  font-variant-numeric: tabular-nums;
}
.mod-site-options__input--number::-webkit-outer-spin-button, .mod-site-options__input--number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mod-site-options__input--number {
  -moz-appearance: textfield;
}
.mod-site-options__input--password {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
}

.mod-site-options__input-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mod-site-options__input-wrap .mod-site-options__input {
  padding-right: 3rem;
}

.mod-site-options__reveal {
  position: absolute;
  right: 0.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.mod-site-options__reveal:hover:not(:disabled) {
  color: var(--color-accent);
}
.mod-site-options__reveal:disabled {
  cursor: wait;
  opacity: 0.6;
}

.mod-site-options__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.mod-site-options__status {
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 1rem;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.mod-site-options__status--saving {
  color: var(--color-accent);
}
.mod-site-options__status--saved {
  color: var(--color-success);
}
.mod-site-options__status--error {
  color: var(--color-danger);
}

.mod-site-options__psn-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-site-options__psn-led {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.mod-site-options__psn-led--ok {
  color: var(--color-success);
}
.mod-site-options__psn-led--ok .mod-site-options__psn-led-dot {
  background: var(--color-success);
}
.mod-site-options__psn-led--expired {
  color: #ffb020;
}
.mod-site-options__psn-led--expired .mod-site-options__psn-led-dot {
  background: #ffb020;
}
.mod-site-options__psn-led--missing {
  color: var(--text-muted);
}
.mod-site-options__psn-led--missing .mod-site-options__psn-led-dot {
  background: var(--text-muted);
  opacity: 0.6;
}

.mod-site-options__psn-led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-site-options__psn-detail {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-site-options__blocked-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 2rem;
}

.mod-site-options__list-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-site-options__list-add {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-site-options__list-add .mod-site-options__list-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.mod-site-options__list-add .mod-site-options__list-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-site-options__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
}

.mod-site-options__list-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.8125rem;
}

.mod-site-options__list-remove {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.mod-site-options__list-remove:hover:not(:disabled) {
  color: var(--color-danger);
}
.mod-site-options__list-remove:disabled {
  cursor: wait;
  opacity: 0.6;
}

.mod-site-options__list-status {
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 1rem;
}
.mod-site-options__list-status--error {
  color: var(--color-danger);
}

.mod-bans {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .mod-bans {
    padding: 1.5rem;
    overflow-x: hidden;
  }
}
@media (min-width: 768px) {
  .mod-bans {
    padding: 3rem 2rem;
  }
}

.mod-bans__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.mod-bans__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-bans__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
}
@media (max-width: 767px) {
  .mod-bans__title {
    font-size: 1.25rem;
  }
}
.mod-bans__title i {
  color: var(--color-accent);
}

.mod-bans__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.mod-bans__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
@media (max-width: 767px) {
  .mod-bans__filters {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .mod-bans__filter {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    min-height: 44px;
    padding: 0.5rem 0.5rem;
    font-size: 0.8125rem;
  }
}
.mod-bans__filter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-bans__filter:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mod-bans__filter:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-glow);
}
.mod-bans__filter--active {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.4);
}
.mod-bans__filter--active:hover {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.12);
}

.mod-bans__filter-count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 1.25rem;
  text-align: center;
  background: var(--bg-elevated);
  border-radius: 8px;
  color: var(--text-muted);
}
.mod-bans__filter--active .mod-bans__filter-count {
  background: rgba(0, 212, 255, 0.2);
  color: var(--color-accent);
}

.mod-bans__toolbar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.mod-bans__new-ban-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-bans__type-wrap {
  min-width: 120px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 767px) {
  .mod-bans__type-wrap {
    min-width: 0;
  }
}
.mod-bans__type-wrap .jpsnt-select {
  width: auto;
  min-width: 120px;
}
@media (max-width: 767px) {
  .mod-bans__type-wrap .jpsnt-select {
    min-width: 80px;
    max-width: 120px;
  }
}

.mod-bans__search-wrap {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 767px) {
  .mod-bans__search-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    overflow: hidden;
  }
}

.mod-bans__search-input {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-width: 140px;
}
@media (max-width: 767px) {
  .mod-bans__search-input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
  }
}
.mod-bans__search-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.mod-bans__search-input::-moz-placeholder {
  color: var(--text-muted);
}
.mod-bans__search-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-bans__search-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-bans__search-input::placeholder {
  color: var(--text-muted);
}
.mod-bans__search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-bans__search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.mod-bans__search-suggestions--visible {
  display: block;
}

.mod-bans__suggestion-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
  border-bottom: 1px solid var(--border-color);
}
@media (max-width: 767px) {
  .mod-bans__suggestion-item {
    min-height: 44px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.mod-bans__suggestion-item:last-child {
  border-bottom: none;
}
.mod-bans__suggestion-item:hover, .mod-bans__suggestion-item:focus {
  background: var(--bg-elevated);
  outline: none;
}

.mod-bans__suggestion-login {
  font-weight: 600;
  color: var(--text-primary);
}

.mod-bans__suggestion-display {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-bans__empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.mod-bans__empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.mod-bans__empty:hover::before {
  opacity: 1;
}
.mod-bans__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding: 6rem 2rem;
  color: var(--text-muted);
  text-align: center;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.mod-bans__empty i {
  font-size: 3rem;
  color: #00e576;
  opacity: 0.85;
}
.mod-bans__empty p {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mod-bans__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.mod-bans__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.mod-bans__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.mod-bans__card:hover::before {
  opacity: 1;
}
.mod-bans__card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto 1.5rem auto 1.5rem auto;
  grid-template-rows: auto auto auto;
      grid-template-areas: "main" "details" "actions";
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
@media (max-width: 767px) {
  .mod-bans__card {
    padding: 1.5rem;
    gap: 1rem;
  }
}
@media (min-width: 768px) {
  .mod-bans__card {
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
        grid-template-areas: "main actions" "details details";
  }
}

.mod-bans__card-main {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: main;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .mod-bans__card-main {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.mod-bans__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
  min-width: 0;
}
.mod-bans__user:hover {
  opacity: 0.9;
}

.mod-bans__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.mod-bans__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.mod-bans__user-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mod-bans__user-name {
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}

.mod-bans__user-level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.mod-bans__card-main .jpsnt-user.mod-bans__user .jpsnt-user__avatar,
.mod-bans__card-main .jpsnt-user.mod-bans__user .jpsnt-user__avatar--ph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.mod-bans__card-main .jpsnt-user.mod-bans__user .jpsnt-user__avatar--ph {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.25rem;
}
.mod-bans__card-main .jpsnt-user.mod-bans__user .jpsnt-user__name {
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.mod-bans__card-main .jpsnt-user.mod-bans__user .jpsnt-user__level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.mod-bans__card-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  .mod-bans__card-meta {
    margin-top: 0.5rem;
  }
}

.mod-bans__type-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 8px;
}
.mod-bans__type-badge--full_ban {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.1);
  border: 1px solid rgba(255, 59, 92, 0.3);
}
.mod-bans__type-badge--messaging {
  color: #ffb020;
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.3);
}
.mod-bans__type-badge--comment {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
}
.mod-bans__type-badge--upload {
  color: #1b6ef5;
  background: rgba(27, 110, 245, 0.1);
  border: 1px solid rgba(27, 110, 245, 0.25);
}

.mod-bans__status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.mod-bans__status--active {
  color: #00e576;
  background: rgba(0, 229, 118, 0.12);
}
.mod-bans__status--expired, .mod-bans__status--revoked {
  color: var(--text-muted);
  background: var(--bg-elevated);
}

.mod-bans__card-details {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: details;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.mod-bans__reason {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.mod-bans__revoked-reason {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  margin-top: 0.25rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--color-accent);
}

.mod-bans__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-bans__meta-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.mod-bans__meta-item i {
  font-size: 0.75rem;
  opacity: 0.8;
}

.mod-bans__card-actions {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: actions;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
}
@media (max-width: 767px) {
  .mod-bans__card-actions {
    -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
            justify-content: stretch;
  }
  .mod-bans__card-actions .mod-bans__revoke-btn {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media (min-width: 768px) {
  .mod-bans__card-actions {
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
  }
}

.mod-bans__revoke-btn {
  white-space: nowrap;
}

.mod-bans__pagination-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mod-bans__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
}

.mod-bans__page-info {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.revoke-ban-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 250ms ease, opacity 250ms ease;
  transition: visibility 250ms ease, opacity 250ms ease;
}
.revoke-ban-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.revoke-ban-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.revoke-ban-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.revoke-ban-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.revoke-ban-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.revoke-ban-modal__title i {
  color: var(--color-accent);
  opacity: 0.9;
}

.revoke-ban-modal__close {
  padding: 0.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.revoke-ban-modal__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.revoke-ban-modal__body {
  padding: 2rem;
}

.revoke-ban-modal__desc {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.revoke-ban-modal__field {
  margin-bottom: 0;
}

.revoke-ban-modal__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.revoke-ban-modal__required {
  font-weight: 400;
  color: var(--text-muted);
}

.revoke-ban-modal__textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.revoke-ban-modal__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.revoke-ban-modal__char-count {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.revoke-ban-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-color);
}

.disciplinary-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 250ms ease, opacity 250ms ease;
  transition: visibility 250ms ease, opacity 250ms ease;
}
.disciplinary-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.disciplinary-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.disciplinary-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.disciplinary-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.disciplinary-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.disciplinary-modal__title i {
  color: var(--color-accent);
  opacity: 0.9;
}

.disciplinary-modal__close {
  padding: 0.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.disciplinary-modal__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.disciplinary-modal__body {
  padding: 2rem;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.disciplinary-modal__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.disciplinary-modal__user .jpsnt-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.disciplinary-modal__user .jpsnt-user:hover {
  opacity: 0.9;
}
.disciplinary-modal__user .jpsnt-user .jpsnt-user__avatar,
.disciplinary-modal__user .jpsnt-user .jpsnt-user__avatar--ph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.disciplinary-modal__user .jpsnt-user .jpsnt-user__avatar--ph {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.25rem;
}
.disciplinary-modal__user .jpsnt-user .jpsnt-user__name {
  font-weight: 600;
  color: var(--text-primary);
}
.disciplinary-modal__user .jpsnt-user .jpsnt-user__level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.disciplinary-modal__user-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.disciplinary-modal__user-link:hover {
  opacity: 0.9;
}

.disciplinary-modal__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.disciplinary-modal__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.disciplinary-modal__user-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.disciplinary-modal__user-name {
  font-weight: 600;
  color: var(--text-primary);
}

.disciplinary-modal__user-level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 2px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.disciplinary-modal__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.disciplinary-modal__history {
  min-height: 80px;
}

.disciplinary-modal__loading {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.disciplinary-modal__history-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.disciplinary-modal__history-item {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.disciplinary-modal__history-item .disciplinary-modal__history-label {
  font-weight: 600;
  color: var(--text-primary);
}
.disciplinary-modal__history-item .disciplinary-modal__history-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.disciplinary-modal__empty {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.add-ban-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 250ms ease, opacity 250ms ease;
  transition: visibility 250ms ease, opacity 250ms ease;
}
.add-ban-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.add-ban-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.add-ban-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.add-ban-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.add-ban-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.add-ban-modal__title i {
  color: #ff3b5c;
  opacity: 0.9;
}

.add-ban-modal__close {
  padding: 0.5rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.add-ban-modal__close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.add-ban-modal__body {
  padding: 2rem;
}

.add-ban-modal__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.add-ban-modal__field {
  margin-bottom: 0;
}

.add-ban-modal__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.add-ban-modal__required {
  font-weight: 400;
  color: var(--text-muted);
}

.add-ban-modal__user-wrap {
  position: relative;
}

.add-ban-modal__input {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.add-ban-modal__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.add-ban-modal__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.add-ban-modal__suggestions--visible {
  display: block;
}

.add-ban-modal__suggestion-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
  border-bottom: 1px solid var(--border-color);
}
.add-ban-modal__suggestion-item:last-child {
  border-bottom: none;
}
.add-ban-modal__suggestion-item:hover, .add-ban-modal__suggestion-item:focus {
  background: var(--bg-elevated);
  outline: none;
}

.add-ban-modal__hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.add-ban-modal__select {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.add-ban-modal__textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.add-ban-modal__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.add-ban-modal__char-count {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.add-ban-modal__form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mod-activity {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .mod-activity {
    padding: 1.5rem;
    overflow-x: hidden;
  }
}
@media (min-width: 768px) {
  .mod-activity {
    padding: 3rem 2rem;
  }
}

.mod-activity__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.mod-activity__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-activity__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
}
@media (max-width: 767px) {
  .mod-activity__title {
    font-size: 1.25rem;
  }
}
.mod-activity__title i {
  color: var(--color-accent);
}

.mod-activity__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.mod-activity__stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.mod-activity__stat:hover {
  border-color: var(--border-glow);
}

.mod-activity__stat--queue:hover {
  border-color: var(--color-accent);
}

.mod-activity__stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mod-activity__stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mod-activity__filters-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  z-index: 10;
}

.mod-activity__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.mod-activity__filter-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.mod-activity__filter-group--search {
  min-width: 180px;
  position: relative;
}

.mod-activity__search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}
.mod-activity__search-suggestions--visible {
  display: block;
}

.mod-activity__suggestion-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.mod-activity__suggestion-item:hover, .mod-activity__suggestion-item:focus {
  background: var(--bg-elevated);
  outline: none;
}

.mod-activity__suggestion-login {
  font-weight: 600;
}

.mod-activity__suggestion-display {
  margin-left: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.mod-activity__filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mod-activity__filter-select {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-width: 140px;
}

.mod-activity__date-range-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.mod-activity__date-range-wrap[hidden] {
  display: none !important;
}

.mod-activity__filter-group--date-range {
  min-width: 0;
}

.mod-activity__date-input {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-width: 140px;
}
.mod-activity__date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

.mod-activity__search-input {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
}
.mod-activity__search-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.mod-activity__search-input::-moz-placeholder {
  color: var(--text-muted);
}
.mod-activity__search-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-activity__search-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-activity__search-input::placeholder {
  color: var(--text-muted);
}

.mod-activity__stats-block {
  margin-bottom: 0;
}

.mod-activity__stats-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  -webkit-transition: background 250ms ease, border-color 250ms ease;
  transition: background 250ms ease, border-color 250ms ease;
}
.mod-activity__stats-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-glow);
}
.mod-activity__stats-toggle i:first-child {
  color: var(--color-accent);
  font-size: 1rem;
}

.mod-activity__stats-hint {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.mod-activity__stats-toggle[aria-expanded=true] .mod-activity__stats-hint {
  display: none;
}

.mod-activity__stats-chevron {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-activity__stats-panel {
  margin-top: 0.5rem;
  padding: 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
}

.mod-activity__charts {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-height: 0;
}
@media (max-width: 767px) {
  .mod-activity__charts {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.mod-activity__chart-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.mod-activity__chart-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-activity__chart-canvas {
  position: relative;
  min-height: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  aspect-ratio: 16/9;
}

.mod-activity__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-activity__card {
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-activity__card:hover {
  border-color: var(--border-glow);
}
.mod-activity__card--high {
  border-left: 3px solid var(--color-accent);
}

.mod-activity__card-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}

.mod-activity__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  border-radius: 8px;
  color: var(--color-accent);
  font-size: 0.875rem;
}

.mod-activity__card-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5rem;
}

.mod-activity__label {
  font-weight: 600;
  color: var(--text-primary);
}

.mod-activity__by {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.mod-activity__actor {
  color: var(--color-accent);
  text-decoration: none;
}
.mod-activity__actor:hover {
  text-decoration: underline;
}

.mod-activity__time {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-activity__link {
  font-size: 0.8125rem;
  color: var(--color-accent);
  text-decoration: none;
}
.mod-activity__link:hover {
  text-decoration: underline;
}

.mod-activity__expand-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.25rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.mod-activity__expand-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.mod-activity__card-meta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.mod-activity__meta-list {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-activity__meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
}

.mod-activity__meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 5em;
}
.mod-activity__meta-label::after {
  content: ":";
}

.mod-activity__meta-value {
  font-size: 0.8125rem;
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
}

.mod-activity__meta-json {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.mod-activity__empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.mod-activity__empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.mod-activity__empty:hover::before {
  opacity: 1;
}
.mod-activity__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding: 6rem 2rem;
  color: var(--text-muted);
  text-align: center;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.mod-activity__empty i {
  font-size: 3rem;
  color: #00e576;
  opacity: 0.85;
}
.mod-activity__empty p {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mod-activity__pagination-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mod-activity__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.mod-activity__page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mod-activity__page-info {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.mod-users {
  padding: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .mod-users {
    padding: 1.5rem;
    overflow-x: hidden;
  }
}
@media (min-width: 768px) {
  .mod-users {
    padding: 3rem 2rem;
  }
}

.mod-users__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.mod-users__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.mod-users__top--detail {
  gap: 1rem;
}

.mod-users__top--detail .mod-users__breadcrumb {
  margin-bottom: 0;
}

.mod-users__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mod-users__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
}
@media (max-width: 767px) {
  .mod-users__title {
    font-size: 1.25rem;
  }
}
.mod-users__title i {
  color: var(--color-accent);
}

.mod-users__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.mod-users__intro {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

.mod-users__breadcrumb {
  margin: 0 0 0.25rem;
}

.mod-users__crumb {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.mod-users__crumb:hover {
  color: var(--color-accent);
}

.mod-users__header--card,
.mod-users__panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2rem;
  min-width: 0;
}

.mod-users__identity {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
}

.mod-users--detail .mod-users__identity {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.mod-users--detail .mod-users__username-block {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 1.125rem;
}

.mod-users__username-block {
  font-size: 1.125rem;
}

.mod-users__profile-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.mod-users__profile-link:hover {
  text-decoration: underline;
}
.mod-users__profile-link i {
  font-size: 0.7rem;
  opacity: 0.85;
}

.mod-users--detail .mod-users__profile-link.btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-decoration: none;
  color: var(--text-primary);
}
.mod-users--detail .mod-users__profile-link.btn:hover {
  color: var(--color-accent);
  text-decoration: none;
}
.mod-users--detail .mod-users__profile-link.btn i {
  font-size: 0.75rem;
  opacity: 0.9;
}

.mod-users--detail .mod-users__header--card {
  padding: 1.5rem 2rem;
}

@media (max-width: 575px) {
  .mod-users--detail .mod-users__identity {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .mod-users--detail .mod-users__profile-link.btn {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}
.mod-users__grid {
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mod-users__grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.mod-users__panel-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.mod-users__panel-desc {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.mod-users__panel-desc code {
  font-size: 0.75rem;
}
.mod-users__panel-desc a {
  color: var(--color-accent);
  font-weight: 600;
}

.mod-users__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mod-users__search-wrap {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .mod-users__search-wrap {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 100%;
  }
}

.mod-users__search-input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-height: 44px;
}
.mod-users__search-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.mod-users__search-input::-moz-placeholder {
  color: var(--text-muted);
}
.mod-users__search-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-users__search-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-users__search-input::placeholder {
  color: var(--text-muted);
}
.mod-users__search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-users__search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.mod-users__search-suggestions--visible {
  display: block;
}

.mod-users__suggestion-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
  border-bottom: 1px solid var(--border-color);
}
@media (max-width: 767px) {
  .mod-users__suggestion-item {
    min-height: 44px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.mod-users__suggestion-item:last-child {
  border-bottom: none;
}
.mod-users__suggestion-item:hover, .mod-users__suggestion-item:focus {
  background: var(--bg-elevated);
  outline: none;
}

.mod-users__suggestion-login {
  font-weight: 600;
  color: var(--text-primary);
}

.mod-users__suggestion-display {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-users__list-wrap {
  min-width: 0;
}

.mod-users__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mod-users__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-users__row:hover {
  border-color: var(--border-glow);
  background: var(--bg-elevated);
}

.mod-users__row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.mod-users__row-avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.mod-users__row-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.mod-users__row-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-users__row-login {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-users__row-level {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
}

.mod-users__row-chevron {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  opacity: 0.7;
}

.mod-users__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-void);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
}
.mod-users__empty i {
  font-size: 2rem;
  opacity: 0.45;
}
.mod-users__empty p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mod-users__pagination-wrap {
  margin-top: 1.5rem;
}

.mod-users__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}

.mod-users__page-info {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mod-users__page-link--disabled {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.5;
  padding: 0.5rem 1rem;
}

.mod-users__stats {
  margin: 0;
  display: -ms-grid;
  display: grid;
  gap: 0.5rem;
}

.mod-users__stat {
  display: -ms-grid;
  display: grid;
  gap: 2px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}
.mod-users__stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mod-users__stat dt {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mod-users__stat dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mod-users__note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.mod-users__note code {
  font-size: 0.6875rem;
}

.mod-users__placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-void);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
}
.mod-users__placeholder i {
  font-size: 2rem;
  opacity: 0.45;
}
.mod-users__placeholder p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mod-users__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-users__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-decoration: none;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-users__link:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-glow);
}
.mod-users__link i {
  width: 1.25rem;
  text-align: center;
  color: var(--color-accent);
}

.mod-users__timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  min-width: 0;
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-void);
}

.mod-users__tl-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1rem 1fr 1rem auto;
  grid-template-columns: auto 1fr auto;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.mod-users__tl-item:last-child {
  border-bottom: none;
}
.mod-users__tl-item--high {
  background: color-mix(in srgb, var(--color-warning, #f5a623) 8%, transparent);
  -webkit-box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--color-warning, #f5a623) 55%, transparent);
          box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--color-warning, #f5a623) 55%, transparent);
}

.mod-users__tl-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.5rem;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--color-accent);
  font-size: 0.75rem;
  opacity: 0.9;
}

.mod-users__tl-main {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
}

.mod-users__tl-primary {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.mod-users__tl-secondary {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-users__tl-end {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  text-align: right;
}

.mod-users__tl-time {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.mod-users__tl-view {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.6875rem;
}
.mod-users__tl-view:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.mod-users__panel-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.mod-users__panel-actions .mod-users__muted {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mod-users__status {
  font-weight: 700;
}
.mod-users__status--ok {
  color: var(--color-success, #5dce8c);
}
.mod-users__status--warn {
  color: var(--color-warning, #f5a623);
}
.mod-users__status--staff {
  color: var(--color-accent);
}

.mod-users__stat-muted {
  font-weight: 600;
  color: var(--text-muted);
}

.mod-users__stat-email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-users__email {
  font-weight: 600;
  word-break: break-word;
  color: var(--text-primary);
}

.mod-users__country {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.mod-users__flag {
  border-radius: 2px;
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-users__country-name {
  font-weight: 600;
  color: var(--text-primary);
}

.mod-users__action-groups {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

.mod-users__panel--actions .mod-users__action-groups {
  margin-top: 0;
}
.mod-users__panel--actions .mod-users__action-group {
  padding: 1rem 1.5rem;
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.mod-users__panel--actions .mod-users__action-group-hint {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.mod-users__action-buttons {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.5rem;
  width: 100%;
}
.mod-users__action-buttons--compact {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  max-width: 22rem;
}
@media (max-width: 575px) {
  .mod-users__action-buttons--compact {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    max-width: none;
  }
}
.mod-users__action-buttons > .btn,
.mod-users__action-buttons > a.btn {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.mod-users__action-buttons .btn i {
  margin-right: 0.4em;
  opacity: 0.92;
}

.mod-users__action-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.mod-users__action-group .mod-users__action-row {
  margin-top: 0;
}

.mod-users__action-group-hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.mod-users__identity-form {
  max-width: 32rem;
}
.mod-users__identity-form .mod-users__identity-intro,
.mod-users__identity-form .mod-users__identity-note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.mod-users__identity-form .mod-users__identity-input {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 1rem;
}
.mod-users__identity-form .mod-users__identity-actions {
  margin-top: 0.5rem;
}

.mod-users__closure-box {
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 3px solid var(--color-danger, #ef4444);
  background: var(--bg-void);
  max-width: 32rem;
}
.mod-users__closure-box[hidden] {
  display: none !important;
}
.mod-users__closure-box--reopen {
  border-left-color: var(--color-accent);
}

.mod-users__closure-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.mod-users__closure-form[hidden] {
  display: none !important;
}

.mod-users__closure-label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.mod-users__closure-required {
  font-weight: 500;
  color: var(--text-muted);
}

.mod-users__closure-textarea {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  resize: vertical;
  min-height: 5rem;
}
.mod-users__closure-textarea::-webkit-input-placeholder {
  color: var(--text-muted);
}
.mod-users__closure-textarea::-moz-placeholder {
  color: var(--text-muted);
}
.mod-users__closure-textarea:-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-users__closure-textarea::-ms-input-placeholder {
  color: var(--text-muted);
}
.mod-users__closure-textarea::placeholder {
  color: var(--text-muted);
}
.mod-users__closure-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-users__closure-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mod-users__closure-hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.mod-users__closure-box--reopen .mod-users__closure-hint {
  margin-bottom: 0.5rem;
}

.mod-users__xp-panel {
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 3px solid var(--color-accent);
  background: var(--bg-void);
  max-width: 26rem;
}
.mod-users__xp-panel[hidden] {
  display: none !important;
}

.mod-users__xp-panel[data-mod-users-xp-panel=remove] {
  border-left-color: var(--text-muted);
}

.mod-users__xp-stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.mod-users__xp-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mod-users__xp-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.mod-users__xp-input,
.mod-users__xp-textarea {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.mod-users__xp-input:focus,
.mod-users__xp-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-users__xp-input {
  max-width: 12rem;
}

.mod-users__xp-textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.45;
}

.mod-users__xp-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.mod-users__action-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mod-users__role-form {
  margin-top: 0.5rem;
}

.mod-users__role-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-users__role-select {
  min-width: 180px;
}

.mod-users__empty--compact {
  padding: 1.5rem;
  background: var(--bg-void);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  text-align: center;
}
.mod-users__empty--compact p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mod-users__report-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-users__report-item {
  padding: 0.5rem 1rem;
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.mod-users__report-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mod-users__report-meta {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.mod-users__report-status {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mod-users__report-status--pending {
  color: var(--color-warning, #f5a623);
}
.mod-users__report-status--resolved {
  color: var(--color-success, #5dce8c);
}
.mod-users__report-status--dismissed {
  color: var(--text-muted);
}

.mod-users__report-sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mod-users__report-queue-link {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.mod-users__report-queue-link:hover {
  text-decoration: underline;
}

.mod-users__bio-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1rem;
}
.mod-users__bio-head .mod-users__panel-title {
  margin: 0;
}

.mod-users__bio-surface {
  min-width: 0;
}

.mod-users__bio-static {
  padding: 1.5rem;
}
.mod-users__bio-static .mod-users__bio-body {
  margin-top: 0.5rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.game-page__hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  max-height: 55vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .game-page__hero {
    min-height: 48vh;
    max-height: 60vh;
  }
}

.game-page__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.game-page__hero-fade {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.game-page__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-top: -8rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .game-page__body {
    margin-top: -10rem;
    padding-inline: 1.5rem;
  }
}

.game-page--no-hero .game-page__body {
  margin-top: 0;
  padding-top: 2rem;
}

.game-page__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
  visibility: hidden;
}
@media (min-width: 768px) {
  .game-page__header {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 2rem;
  }
}

.game-page__cover {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100px;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media (min-width: 768px) {
  .game-page__cover {
    width: 160px;
  }
}
@media (min-width: 992px) {
  .game-page__cover {
    width: 180px;
  }
}

.game-page__cover-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
}

.game-page__header-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.game-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
@media (min-width: 768px) {
  .game-page__title {
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  .game-page__title {
    font-size: 2.5rem;
  }
}

.game-page__stats {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .game-page__stats {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    gap: 0.5rem;
  }
}

.game-page__stat-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.game-page__stat-chip i {
  color: var(--color-accent);
  font-size: 0.7rem;
}
.game-page__stat-chip--platform {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
}
@media (min-width: 768px) {
  .game-page__stat-chip {
    font-size: 0.8125rem;
    padding: 0.25rem 1rem;
  }
  .game-page__stat-chip i {
    font-size: 0.75rem;
  }
}

.game-page__collection-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  font: inherit;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.game-page__collection-btn i {
  color: var(--color-accent);
  font-size: 0.7rem;
}
.game-page__collection-btn:hover:not(:disabled) {
  border-color: var(--border-glow);
  color: var(--text-primary);
}
.game-page__collection-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.game-page__collection-btn:disabled {
  cursor: wait;
  opacity: 0.75;
}
.game-page__collection-btn--in {
  border-color: rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.08);
  color: var(--text-primary);
}
.game-page__collection-btn--in i {
  color: var(--color-accent);
}
.game-page__collection-btn--guest {
  cursor: pointer;
}
.game-page__collection-btn.is-loading {
  pointer-events: none;
}
@media (min-width: 768px) {
  .game-page__collection-btn {
    font-size: 0.8125rem;
    padding: 0.25rem 1rem;
  }
  .game-page__collection-btn i {
    font-size: 0.75rem;
  }
}

.game-page__section {
  margin-bottom: 3rem;
  visibility: hidden;
}

.game-page__section-title, .game-page__stats-achievers-title, .game-page__stats-chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.game-page__section-title i, .game-page__stats-achievers-title i, .game-page__stats-chart-title i {
  color: var(--color-accent);
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .game-page__section-title, .game-page__stats-achievers-title, .game-page__stats-chart-title {
    font-size: 1.25rem;
  }
}

.game-page__info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.game-page__info-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.game-page__info-card:hover::before {
  opacity: 1;
}
.game-page__info-card {
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .game-page__info-card {
    padding: 2rem;
  }
}

.game-page__description {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.game-page__info-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem 3rem;
}

.game-page__info-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.game-page__info-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.game-page__info-value {
  font-size: 0.875rem;
  color: var(--text-primary);
}

.game-page__info-link {
  color: var(--text-secondary);
  text-decoration: none;
  -webkit-transition: color 250ms ease;
  transition: color 250ms ease;
}
.game-page__info-link:hover {
  color: var(--color-accent);
}

.game-page__description--empty,
.game-page__info-value--empty {
  color: var(--text-muted);
  font-style: italic;
}

.game-page__info-block {
  margin-bottom: 1.5rem;
}

.game-page__info-desc-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.game-page__info-desc-row .game-page__description {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin: 0;
}
.game-page__info-desc-row .game-page__edit-trigger--desc {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 0;
}

.game-page__info-value-row {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.game-page__info-value-row .game-page__edit-trigger {
  margin-left: 0;
}

.game-page__edit-trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 0.25rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-transition: color 250ms ease, background 250ms ease;
  transition: color 250ms ease, background 250ms ease;
  vertical-align: middle;
}
.game-page__edit-trigger:hover {
  color: var(--color-accent);
  background: var(--bg-hover);
}
.game-page__edit-trigger i {
  font-size: 0.7rem;
}
.game-page__edit-trigger--title {
  margin-left: 0.5rem;
}
.game-page__edit-trigger--chip {
  margin-left: 2px;
}
.game-page__edit-trigger--slug {
  width: 18px;
  height: 18px;
  margin-left: 0.25rem;
}
.game-page__edit-trigger--slug i {
  font-size: 0.55rem;
}

.game-page__mod-pills {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.game-page__mod-info {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}

.game-page__title-edit-wrap {
  display: inline;
}

.game-page__stat-chip-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
}

.game-page__stat-chip--empty {
  color: var(--text-muted);
}

.game-page__edit-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.game-page__edit-form::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.game-page__edit-form:hover::before {
  opacity: 1;
}
.game-page__edit-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  padding: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.game-page__edit-form--full-width {
  max-width: none;
}
.game-page__edit-form--title {
  max-width: min(100%, 640px);
  padding: 0.5rem 1rem;
}
.game-page__edit-form--inline {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0;
}
.game-page__edit-form--inline .game-page__edit-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.game-page__edit-form--inline .game-page__edit-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.game-page__edit-form--inline .game-page__edit-actions {
  margin-top: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.game-page__edit-form--slug {
  max-width: none;
}
.game-page__edit-form--slug .game-page__edit-row--slug {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.game-page__edit-form--slug .game-page__edit-input--slug {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 380px;
  min-width: 380px;
}
.game-page__edit-form--chip {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  max-width: none;
  width: auto;
  padding: 0.25rem 0.5rem;
  margin-top: 0;
}
.game-page__edit-form--chip .game-page__edit-input--year {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 6ch;
  max-width: 12ch;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
}
.game-page__edit-form--chip .game-page__edit-actions {
  margin-top: 0;
  gap: 0.25rem;
}
.game-page__edit-form--chip .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.game-page__edit-form--chip .btn.btn--icon {
  padding: 0.25rem;
  min-width: 28px;
  min-height: 28px;
}
.game-page__edit-form--chip .btn.btn--icon i {
  font-size: 0.75rem;
}

.game-page__edit-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
.game-page__edit-row .game-page__edit-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.game-page__edit-row .game-page__edit-actions {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0;
}

.game-page__edit-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.game-page__edit-input,
.game-page__edit-textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-family: inherit;
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.game-page__edit-input:focus,
.game-page__edit-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 3px var(--color-accent-muted);
          box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.game-page__edit-input::-webkit-input-placeholder, .game-page__edit-textarea::-webkit-input-placeholder {
  color: var(--text-muted);
}
.game-page__edit-input::-moz-placeholder, .game-page__edit-textarea::-moz-placeholder {
  color: var(--text-muted);
}
.game-page__edit-input:-ms-input-placeholder, .game-page__edit-textarea:-ms-input-placeholder {
  color: var(--text-muted);
}
.game-page__edit-input::-ms-input-placeholder, .game-page__edit-textarea::-ms-input-placeholder {
  color: var(--text-muted);
}
.game-page__edit-input::placeholder,
.game-page__edit-textarea::placeholder {
  color: var(--text-muted);
}

.game-page__edit-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.game-page__edit-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.game-page__edit-actions .btn--icon {
  padding: 0.5rem;
  min-width: 36px;
  min-height: 36px;
}
.game-page__edit-actions .btn--icon i {
  font-size: 0.875rem;
}

.game-page__stats-block {
  margin-bottom: 3rem;
}

.game-page__stats-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  -webkit-transition: background 250ms ease, border-color 250ms ease;
  transition: background 250ms ease, border-color 250ms ease;
}
.game-page__stats-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-glow);
}
.game-page__stats-toggle i:first-child {
  color: var(--color-accent);
  font-size: 1rem;
}

.game-page__stats-hint {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.game-page__stats-toggle[aria-expanded=true] .game-page__stats-hint {
  display: none;
}

.game-page__stats-chevron {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.game-page__stats-panel {
  margin-top: 0.5rem;
  padding: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.game-page__stats-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.game-page__stats-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2px;
  padding: 1rem 1.5rem;
  padding-top: 1.5rem;
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.game-page__stats-card-icon-wrap {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent-muted);
  border-radius: 4px;
}

.game-page__stats-card-icon {
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.game-page__stats-card-num {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.game-page__stats-card-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.game-page__stats-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .game-page__stats-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 3rem;
  }
}

.game-page__stats-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.game-page__stats-chart {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 180px;
}
@media (min-width: 768px) {
  .game-page__stats-chart {
    min-height: 0;
  }
}

.game-page__stats-chart-title {
  margin: 0 0 1rem;
}

.game-page__stats-chart-wrap {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  min-height: 180px;
}

.game-page__stats-achievers {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .game-page__stats-achievers {
    width: 260px;
  }
}

.game-page__stats-achievers-title {
  margin: 0 0 1rem;
}

.game-page__stats-achievers-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.game-page__stats-achiever {
  margin-bottom: 0.25rem;
}
.game-page__stats-achiever:last-child {
  margin-bottom: 0;
}

.game-page__stats-achiever-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.game-page__stats-achiever-link:hover {
  background: var(--bg-hover);
}

.game-page__stats-achiever-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.game-page__stats-achiever-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.75rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.game-page__stats-achiever-name.jpsnt-user--inline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  font-weight: 500;
  color: var(--color-accent);
}
.game-page__stats-achiever-name.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
  font-weight: 500;
  color: inherit;
}

.game-page__stats-achiever-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.game-page__stats-block .game-page__charts-grid {
  margin-top: 0;
  margin-bottom: 0;
}

.game-page__charts-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .game-page__charts-grid {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

.game-page__chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.game-page__chart-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.game-page__chart-card:hover::before {
  opacity: 1;
}
.game-page__chart-card {
  padding: 1.5rem;
  visibility: hidden;
  overflow: visible;
}

.game-page__chart-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.game-page__chart-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
}
.game-page__chart-wrap--doughnut {
  max-width: 260px;
  margin: 0 auto;
}
.game-page__chart-wrap--bar {
  min-height: 180px;
}

.game-page__chart-card:has(.game-page__chart-empty) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 320px;
}
@media (min-width: 768px) {
  .game-page__chart-card:has(.game-page__chart-empty) {
    min-height: 360px;
  }
}

.game-page__chart-card .game-page__chart-empty {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 260px;
}
@media (min-width: 768px) {
  .game-page__chart-card .game-page__chart-empty {
    min-height: 300px;
  }
}

.game-page__chart-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

.game-page__chart-legend-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.game-page__chart-legend-dot {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.game-page__chart-legend-label {
  white-space: nowrap;
}

.jpsnt-chart-tooltip {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.12s ease-out;
  transition: opacity 0.12s ease-out;
}
.jpsnt-chart-tooltip__inner {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.jpsnt-chart-tooltip__inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.jpsnt-chart-tooltip__inner:hover::before {
  opacity: 1;
}
.jpsnt-chart-tooltip__inner {
  padding: 0;
  min-width: 140px;
  overflow: hidden;
  -webkit-box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-glow);
          box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-glow);
}
.jpsnt-chart-tooltip__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.jpsnt-chart-tooltip__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem calc(1rem + 4px);
}
.jpsnt-chart-tooltip__icon {
  font-size: 0.9375rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  opacity: 0.95;
}
.jpsnt-chart-tooltip__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}
.jpsnt-chart-tooltip__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.jpsnt-chart-tooltip__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.game-page__chart-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  min-height: 220px;
  padding: 2rem 1.5rem;
  text-align: center;
}

.game-page__chart-empty-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  font-size: 2.5rem;
  color: var(--color-accent);
  opacity: 0.7;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.game-page__chart-empty-icon i {
  display: block;
}

.game-page__chart-empty-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.game-page__chart-empty-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.game-page__chart-empty-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin: 0;
}

.game-page__trophies {
  padding-top: 1.5rem;
}
@media (min-width: 768px) {
  .game-page__trophies {
    padding-top: 2rem;
  }
}

.game-page__trophy-group {
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  visibility: hidden;
  border: 1px solid var(--border-color);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.game-page__trophy-group:first-child {
  margin-top: 0;
}
.game-page__trophy-group[data-trophy-type=platinum] {
  border-left: 4px solid #7ab7e8;
}
.game-page__trophy-group[data-trophy-type=platinum] .game-page__trophy-group-header {
  background: rgba(122, 183, 232, 0.06);
}
.game-page__trophy-group[data-trophy-type=platinum] .game-page__trophy-group-icon-wrap {
  background: rgba(122, 183, 232, 0.2);
  color: #7ab7e8;
}
.game-page__trophy-group[data-trophy-type=platinum] .game-page__trophy-group-count {
  background: rgba(122, 183, 232, 0.2);
  color: #7ab7e8;
}
.game-page__trophy-group[data-trophy-type=gold] {
  border-left: 4px solid #ffd700;
}
.game-page__trophy-group[data-trophy-type=gold] .game-page__trophy-group-header {
  background: rgba(255, 215, 0, 0.06);
}
.game-page__trophy-group[data-trophy-type=gold] .game-page__trophy-group-icon-wrap {
  background: rgba(255, 215, 0, 0.2);
  color: rgb(193.8, 163.4, 0);
}
.game-page__trophy-group[data-trophy-type=gold] .game-page__trophy-group-count {
  background: rgba(255, 215, 0, 0.2);
  color: rgb(193.8, 163.4, 0);
}
.game-page__trophy-group[data-trophy-type=silver] {
  border-left: 4px solid #c0c0c0;
}
.game-page__trophy-group[data-trophy-type=silver] .game-page__trophy-group-header {
  background: rgba(192, 192, 192, 0.08);
}
.game-page__trophy-group[data-trophy-type=silver] .game-page__trophy-group-icon-wrap {
  background: rgba(192, 192, 192, 0.25);
  color: rgb(128.25, 128.25, 128.25);
}
.game-page__trophy-group[data-trophy-type=silver] .game-page__trophy-group-count {
  background: rgba(192, 192, 192, 0.25);
  color: rgb(128.25, 128.25, 128.25);
}
.game-page__trophy-group[data-trophy-type=bronze] {
  border-left: 4px solid #cd7f32;
}
.game-page__trophy-group[data-trophy-type=bronze] .game-page__trophy-group-header {
  background: rgba(205, 127, 50, 0.08);
}
.game-page__trophy-group[data-trophy-type=bronze] .game-page__trophy-group-icon-wrap {
  background: rgba(205, 127, 50, 0.25);
  color: rgb(223, 173.08, 123.8);
}
.game-page__trophy-group[data-trophy-type=bronze] .game-page__trophy-group-count {
  background: rgba(205, 127, 50, 0.25);
  color: rgb(223, 173.08, 123.8);
}

.game-page__trophy-group-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  -webkit-transition: background 250ms ease;
  transition: background 250ms ease;
}
.game-page__trophy-group-header:hover {
  background: var(--bg-hover);
}

.game-page__trophy-group-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.game-page__trophy-group-icon-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.game-page__trophy-type-icon {
  font-size: 1rem;
}
.game-page__trophy-type-icon--platinum {
  color: #7ab7e8;
}
.game-page__trophy-type-icon--gold {
  color: #ffd700;
}
.game-page__trophy-type-icon--silver {
  color: #c0c0c0;
}
.game-page__trophy-type-icon--bronze {
  color: #cd7f32;
}

.game-page__trophy-group-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.game-page__trophy-group-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 99px;
}

.game-page__trophy-group-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
}
[aria-expanded=false] .game-page__trophy-group-chevron {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.game-page__trophy-group-body {
  overflow: hidden;
  padding: 0.5rem 1rem 1rem;
}
.game-page__trophy-group-header[aria-expanded=false] + .game-page__trophy-group-body {
  display: none;
}

.game-page__trophy-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
@media (min-width: 768px) {
  .game-page__trophy-grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

.game-page__trophy-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: border-color 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  position: relative;
}
.game-page__trophy-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.game-page__trophy-card--platinum:hover {
  border-color: rgba(122, 183, 232, 0.5);
}
.game-page__trophy-card--gold:hover {
  border-color: rgba(255, 215, 0, 0.5);
}
.game-page__trophy-card--silver:hover {
  border-color: rgba(192, 192, 192, 0.5);
}
.game-page__trophy-card--bronze:hover {
  border-color: rgba(205, 127, 50, 0.5);
}

.game-page__trophy-card-img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-void);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 2px solid var(--border-color);
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.game-page__trophy-card-img--flip {
  -webkit-perspective: 120px;
          perspective: 120px;
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-front,
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  background: var(--bg-void);
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-front img,
.game-page__trophy-card-img--flip .game-page__trophy-card-img-front .game-page__trophy-card-fallback {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  background: rgba(0, 0, 0, 0.55);
  padding: 6px;
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back .game-page__trophy-psn-pct {
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  display: block;
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back .game-page__trophy-psn-label {
  font-size: 0.4375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back.game-page__trophy-card-img-back--platinum {
  border-top: 1px solid rgba(122, 183, 232, 0.6);
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back.game-page__trophy-card-img-back--gold {
  border-top: 1px solid rgba(255, 215, 0, 0.6);
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back.game-page__trophy-card-img-back--silver {
  border-top: 1px solid rgba(192, 192, 192, 0.6);
}
.game-page__trophy-card-img--flip .game-page__trophy-card-img-back.game-page__trophy-card-img-back--bronze {
  border-top: 1px solid rgba(205, 127, 50, 0.6);
}
.game-page__trophy-card-img:not(.game-page__trophy-card-img--flip) .game-page__trophy-card-img-inner,
.game-page__trophy-card-img:not(.game-page__trophy-card-img--flip) .game-page__trophy-card-img-front {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.game-page__trophy-card-img:not(.game-page__trophy-card-img--flip) .game-page__trophy-card-img-front img,
.game-page__trophy-card-img:not(.game-page__trophy-card-img--flip) .game-page__trophy-card-img-front .game-page__trophy-card-fallback {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.game-page__trophy-card--platinum .game-page__trophy-card-img {
  border-color: rgba(122, 183, 232, 0.4);
  -webkit-box-shadow: 0 0 0 1px rgba(122, 183, 232, 0.15);
          box-shadow: 0 0 0 1px rgba(122, 183, 232, 0.15);
}
.game-page__trophy-card--gold .game-page__trophy-card-img {
  border-color: rgba(255, 215, 0, 0.4);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.15);
          box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.15);
}
.game-page__trophy-card--silver .game-page__trophy-card-img {
  border-color: rgba(192, 192, 192, 0.4);
  -webkit-box-shadow: 0 0 0 1px rgba(192, 192, 192, 0.15);
          box-shadow: 0 0 0 1px rgba(192, 192, 192, 0.15);
}
.game-page__trophy-card--bronze .game-page__trophy-card-img {
  border-color: rgba(205, 127, 50, 0.4);
  -webkit-box-shadow: 0 0 0 1px rgba(205, 127, 50, 0.15);
          box-shadow: 0 0 0 1px rgba(205, 127, 50, 0.15);
}
.game-page__trophy-card:hover .game-page__trophy-card-img {
  border-color: #7ab7e8;
  -webkit-box-shadow: 0 0 0 2px rgba(122, 183, 232, 0.25);
          box-shadow: 0 0 0 2px rgba(122, 183, 232, 0.25);
}
.game-page__trophy-card--gold:hover .game-page__trophy-card-img {
  border-color: #ffd700;
  -webkit-box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
          box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
}
.game-page__trophy-card--silver:hover .game-page__trophy-card-img {
  border-color: #c0c0c0;
  -webkit-box-shadow: 0 0 0 2px rgba(192, 192, 192, 0.25);
          box-shadow: 0 0 0 2px rgba(192, 192, 192, 0.25);
}
.game-page__trophy-card--bronze:hover .game-page__trophy-card-img {
  border-color: #cd7f32;
  -webkit-box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.25);
          box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.25);
}
.game-page__trophy-card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.game-page__trophy-card-fallback {
  font-size: 1.25rem;
  color: var(--text-muted);
}

.game-page__trophy-card-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.game-page__trophy-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-page__trophy-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-page__trophy-card-ss-count {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
  padding: 4px 8px;
  background: var(--bg-void);
  border-radius: 99px;
  border: 1px solid var(--border-color);
}
.game-page__trophy-card-ss-count i {
  font-size: 0.65rem;
  opacity: 0.9;
}

.game-page__ss-empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.game-page__ss-empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.game-page__ss-empty:hover::before {
  opacity: 1;
}
.game-page__ss-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 360px;
  padding: 3rem 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .game-page__ss-empty {
    min-height: 420px;
    padding: 4rem;
  }
}

.game-page__ss-empty-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  max-width: 320px;
  min-height: 240px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .game-page__ss-empty-inner {
    min-height: 280px;
  }
}

.game-page__ss-empty-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0;
  font-size: 2.5rem;
  color: var(--color-accent);
  opacity: 0.7;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.game-page__ss-empty-icon i {
  display: block;
}

.game-page__ss-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.game-page__ss-empty-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.game-page__ss-empty-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin: 0;
}

.game-page__ss-group {
  margin-bottom: 3rem;
  visibility: hidden;
}

.game-page__ss-group-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.game-page__ss-group-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}

.game-page__ss-group-name {
  color: var(--text-primary);
}
.game-page__ss-group-name--platinum {
  color: #7ab7e8;
}
.game-page__ss-group-name--gold {
  color: #ffd700;
}
.game-page__ss-group-name--silver {
  color: #c0c0c0;
}
.game-page__ss-group-name--bronze {
  color: #cd7f32;
}

.game-page__ss-group-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: auto;
}

.game-page__ss-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .game-page__ss-grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .game-page__ss-grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.game-page__ss-grid .ss-card {
  visibility: hidden;
}
.game-page__ss-grid .ss-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.game-page__ss-group-more {
  text-align: center;
  margin-top: 1rem;
}

.trophy-page--dummy .trophy-page__body {
  padding-top: 2.5rem;
}

.trophy-page__dummy-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: -webkit-gradient(linear, left top, right top, from(#7c3aed), to(#a855f7));
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.trophy-page__dummy-banner code {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.trophy-page__hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  max-height: 55vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .trophy-page__hero {
    min-height: 48vh;
    max-height: 60vh;
  }
}

.trophy-page__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.trophy-page__hero-fade {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.trophy-page__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-top: -8rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .trophy-page__body {
    margin-top: -10rem;
    padding-inline: 1.5rem;
  }
}

.trophy-page--no-hero .trophy-page__body {
  margin-top: 0;
  padding-top: 2rem;
}

.trophy-page__breadcrumb {
  margin-bottom: 1.5rem;
}

.trophy-page__breadcrumb-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.trophy-page__breadcrumb-link:hover {
  opacity: 0.9;
}

.trophy-page__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.trophy-page__image {
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media (min-width: 768px) {
  .trophy-page__image {
    width: 100px;
    height: 100px;
  }
}

.trophy-page__title-block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.trophy-page__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.trophy-page__type {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.trophy-page__type--platinum {
  background: rgba(122, 183, 232, 0.2);
  color: #7ab7e8;
}
.trophy-page__type--gold {
  background: rgba(255, 215, 0, 0.2);
  color: rgb(193.8, 163.4, 0);
}
.trophy-page__type--silver {
  background: rgba(192, 192, 192, 0.2);
  color: #8d8d8d;
}
.trophy-page__type--bronze {
  background: rgba(205, 127, 50, 0.2);
  color: rgb(213, 147.48, 82.8);
}

.trophy-page__mod-pills {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.trophy-page__mod-info {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}

.trophy-page__rarity {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.trophy-page__rarity--platinum {
  background: rgba(122, 183, 232, 0.2);
  color: #7ab7e8;
}
.trophy-page__rarity--gold {
  background: rgba(255, 215, 0, 0.2);
  color: rgb(193.8, 163.4, 0);
}
.trophy-page__rarity--silver {
  background: rgba(192, 192, 192, 0.2);
  color: #8d8d8d;
}
.trophy-page__rarity--bronze {
  background: rgba(205, 127, 50, 0.2);
  color: rgb(213, 147.48, 82.8);
}

.trophy-page__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.trophy-page__meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.trophy-page__meta-user {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.trophy-page__meta-user:hover {
  opacity: 0.9;
}

.trophy-page__meta-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.trophy-page__meta-name.jpsnt-user--inline {
  color: var(--color-accent);
}
.trophy-page__meta-name.jpsnt-user--inline .jpsnt-user__name {
  color: inherit;
}

.trophy-page__meta-sep {
  color: var(--text-muted);
  font-weight: 400;
}

.trophy-page__meta-date {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

.trophy-page__desc-block {
  margin-bottom: 3rem;
}

.trophy-page__description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}
.trophy-page__description--empty {
  color: var(--text-muted);
  font-style: italic;
}

.trophy-page__edit-trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 0.25rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-transition: color 250ms ease, background 250ms ease;
  transition: color 250ms ease, background 250ms ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.trophy-page__edit-trigger:hover {
  color: var(--color-accent);
  background: var(--bg-hover);
}
.trophy-page__edit-trigger i {
  font-size: 0.7rem;
}
.trophy-page__edit-trigger--title {
  margin-left: 0.5rem;
}
.trophy-page__edit-trigger--desc {
  margin-top: 2px;
}
.trophy-page__edit-trigger--slug {
  width: 18px;
  height: 18px;
  margin-left: 0.25rem;
}
.trophy-page__edit-trigger--slug i {
  font-size: 0.55rem;
}

.trophy-page__edit-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.trophy-page__edit-form::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.trophy-page__edit-form:hover::before {
  opacity: 1;
}
.trophy-page__edit-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  padding: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.trophy-page__edit-form--full-width {
  max-width: none;
}
.trophy-page__edit-form--inline {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0;
}
.trophy-page__edit-form--inline .trophy-page__edit-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.trophy-page__edit-form--inline .trophy-page__edit-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.trophy-page__edit-form--inline .trophy-page__edit-actions {
  margin-top: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.trophy-page__edit-form--slug {
  max-width: none;
}
.trophy-page__edit-form--slug .trophy-page__edit-row--slug {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.trophy-page__edit-form--slug .trophy-page__edit-input--slug {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 380px;
  min-width: 380px;
}

.trophy-page__edit-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.trophy-page__edit-input {
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.trophy-page__edit-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.trophy-page__edit-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.trophy-page__edit-input::-moz-placeholder {
  color: var(--text-muted);
}
.trophy-page__edit-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.trophy-page__edit-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.trophy-page__edit-input::placeholder {
  color: var(--text-muted);
}

.trophy-page__edit-textarea {
  resize: vertical;
  min-height: 80px;
}

.trophy-page__edit-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.trophy-page__stats {
  margin-bottom: 3rem;
}

.trophy-page__stats-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  -webkit-transition: background 250ms ease, border-color 250ms ease;
  transition: background 250ms ease, border-color 250ms ease;
}
.trophy-page__stats-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-glow);
}
.trophy-page__stats-toggle i:first-child {
  color: var(--color-accent);
  font-size: 1rem;
}

.trophy-page__stats-hint {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.trophy-page__stats-toggle[aria-expanded=true] .trophy-page__stats-hint {
  display: none;
}

.trophy-page__stats-chevron {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  -webkit-transition: -webkit-transform 250ms ease;
  transition: -webkit-transform 250ms ease;
  transition: transform 250ms ease;
  transition: transform 250ms ease, -webkit-transform 250ms ease;
}

.trophy-page__stats-panel {
  margin-top: 0.5rem;
  padding: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.trophy-page__stats-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  min-height: 60px;
}
@media (min-width: 768px) {
  .trophy-page__stats-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 3rem;
  }
}

.trophy-page__stats-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.trophy-page__stats-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.trophy-page__stats-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2px;
  padding: 1rem 1.5rem;
  padding-top: 1.5rem;
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.trophy-page__stats-card-icon-wrap {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent-muted);
  border-radius: 4px;
}

.trophy-page__stats-card-icon {
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.trophy-page__stats-card-num {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.trophy-page__stats-card-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.trophy-page__stats-achievers {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .trophy-page__stats-achievers {
    width: 260px;
  }
}

.trophy-page__stats-achievers-list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

.trophy-page__stats-achievers-title {
  margin: 0 0 1rem;
}

.trophy-page__stats-achievers-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trophy-page__stats-achiever {
  margin-bottom: 0.25rem;
}
.trophy-page__stats-achiever:last-child {
  margin-bottom: 0;
}

.trophy-page__stats-achiever-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.trophy-page__stats-achiever-link:hover {
  background: var(--bg-hover);
}

.trophy-page__stats-achiever-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.trophy-page__stats-achiever-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 0.75rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.trophy-page__stats-achiever-name.jpsnt-user--inline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  font-weight: 500;
  color: var(--color-accent);
}
.trophy-page__stats-achiever-name.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
  font-weight: 500;
  color: inherit;
}

.trophy-page__stats-achiever-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.trophy-page__stats-chart {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 180px;
}
@media (min-width: 768px) {
  .trophy-page__stats-chart {
    min-height: 0;
  }
}

.trophy-page__stats-chart-title {
  margin: 0 0 1rem;
}

.trophy-page__stats-chart-wrap {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  min-height: 180px;
}

.trophy-page__game-context {
  margin-bottom: 3rem;
}

.trophy-page__game-context-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: border-color 250ms ease, background 150ms ease;
  transition: border-color 250ms ease, background 150ms ease;
}
.trophy-page__game-context-link:hover {
  border-color: var(--border-glow);
  background: var(--bg-hover);
}

.trophy-page__game-context-cover {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}

.trophy-page__game-context-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.trophy-page__game-context-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.trophy-page__game-context-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.trophy-page__game-context-icon {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.trophy-page__other-trophies {
  margin-bottom: 3rem;
}

.trophy-page__other-trophies-title {
  margin: 0 0 1rem;
}

.trophy-page__other-trophies-viewport {
  overflow: hidden;
}

.trophy-page__other-trophies-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-bottom: 0.5rem;
}

.trophy-page__other-trophies-track .trophy-card {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 150px;
}

.trophy-page__other-trophies-track .trophy-card__name {
  font-size: 0.8125rem;
  -webkit-line-clamp: 2;
}

.trophy-page__section {
  margin-top: 3rem;
}

.trophy-page__section-title, .trophy-page__stats-achievers-title, .trophy-page__stats-chart-title, .trophy-page__other-trophies-title {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.trophy-page__section-title i, .trophy-page__stats-achievers-title i, .trophy-page__stats-chart-title i, .trophy-page__other-trophies-title i {
  margin-right: 0.5rem;
  color: var(--color-accent);
}

.trophy-page__ss-empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.trophy-page__ss-empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.trophy-page__ss-empty:hover::before {
  opacity: 1;
}
.trophy-page__ss-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.trophy-page__ss-empty-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 1rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.trophy-page__ss-empty-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.trophy-page__ss-empty-cta.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.trophy-page__ss-empty-inner {
  max-width: 320px;
  margin: 0 auto;
}

.trophy-page__ss-empty-title {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.trophy-page__ss-empty-desc {
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.trophy-page__ss-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.profile-page--dummy .profile-page__body {
  padding-top: 2.5rem;
}

.profile-page__dummy-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: -webkit-gradient(linear, left top, right top, from(#7c3aed), to(#a855f7));
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.profile-page__dummy-banner code {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.profile-page__dummy-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin: 0 0.5rem;
}

.profile-page__dummy-toggle-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  -webkit-transition: background 0.15s, color 0.15s;
  transition: background 0.15s, color 0.15s;
}
.profile-page__dummy-toggle-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.profile-page__dummy-toggle-link.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 600;
}

.profile-page__dummy-toggle-sep {
  opacity: 0.6;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.profile-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.profile-page__hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  max-height: 55vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .profile-page__hero {
    min-height: 48vh;
    max-height: 60vh;
  }
}
.profile-page__hero--gradient {
  background: linear-gradient(135deg, var(--color-accent-muted) 0%, var(--bg-surface) 100%);
}

.profile-page__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-page__hero-fade {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.profile-page__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-top: -8rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .profile-page__body {
    margin-top: -10rem;
    padding-inline: 1.5rem;
  }
}

.profile-page--no-hero .profile-page__body {
  margin-top: 0;
  padding-top: 2rem;
}

.profile-page__main-layout {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .profile-page__main-layout {
    -ms-grid-columns: 1fr 280px;
    grid-template-columns: 1fr 280px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.profile-page__main-content {
  min-width: 0;
}

@media (min-width: 992px) {
  .profile-page__sidebar {
    position: sticky;
    top: calc(var(--header-height, 64px) + 1rem);
  }
}

.profile-follower-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.profile-follower-widget__counts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.profile-follower-widget__count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: var(--text-primary);
  text-decoration: none;
  -webkit-transition: color 250ms ease;
  transition: color 250ms ease;
}
.profile-follower-widget__count:hover {
  color: var(--color-accent);
}

.profile-follower-widget__num {
  font-size: 1.25rem;
  font-weight: 700;
}

.profile-follower-widget__label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.profile-follower-widget__section {
  margin-bottom: 1.5rem;
}
.profile-follower-widget__section:last-child {
  margin-bottom: 0;
}

.profile-follower-widget__heading {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-follower-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-follower-widget__item {
  margin-bottom: 0.5rem;
}

.profile-follower-widget__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  -webkit-transition: background 250ms ease;
  transition: background 250ms ease;
}
.profile-follower-widget__user:hover {
  background: var(--bg-hover);
}

.profile-follower-widget__avatar-wrap {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.profile-follower-widget__avatar-wrap--online .profile-follower-widget__online-dot {
  display: block;
}

.profile-follower-widget__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-follower-widget__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.profile-follower-widget__online-dot {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--bg-surface);
}

.profile-follower-widget__name.jpsnt-user--inline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}
.profile-follower-widget__name.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
  font-weight: 500;
}

.profile-follower-widget__level {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.profile-follower-widget__empty {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}
.profile-follower-widget__empty a {
  color: var(--color-accent);
  text-decoration: none;
}
.profile-follower-widget__empty a:hover {
  text-decoration: underline;
}

.profile-follow-btn--following .profile-follow-btn__text {
  font-weight: 600;
}

.profile-page__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
  visibility: hidden;
}
@media (min-width: 768px) {
  .profile-page__header {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 2rem;
  }
}

.profile-page__avatar-wrap {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.profile-page__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: block;
}
@media (min-width: 768px) {
  .profile-page__avatar {
    width: 120px;
    height: 120px;
  }
}
.profile-page__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  font-size: 2rem;
}
@media (min-width: 768px) {
  .profile-page__avatar--ph {
    font-size: 2.5rem;
  }
}

.profile-page__header-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.profile-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .profile-page__title {
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  .profile-page__title {
    font-size: 2.25rem;
  }
}
.profile-page__title .jpsnt-user--inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  font: inherit;
  color: inherit;
  min-width: 0;
}
.profile-page__title .jpsnt-user__name {
  font: inherit;
  font-weight: 700;
  color: inherit;
}

.profile-page__staff-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.profile-page__staff-badge--mod {
  color: #c0c0c0;
}
.profile-page__staff-badge--mod i {
  color: inherit;
}
.profile-page__staff-badge--admin {
  color: #ffd700;
}
.profile-page__staff-badge--admin i {
  color: inherit;
}

.profile-page__staff-badge-label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.profile-page__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.profile-page__meta-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
  padding: 2px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}
.profile-page__meta-pill i {
  font-size: 0.5rem;
}
.profile-page__meta-pill--level {
  color: var(--color-xp);
  font-weight: 600;
}
.profile-page__meta-pill--level i {
  display: none;
}
.profile-page__meta-pill--online {
  color: #00e576;
}
.profile-page__meta-pill--online i {
  font-size: 0.4rem;
}
.profile-page__meta-pill--offline {
  color: var(--text-muted);
}
.profile-page__meta-pill--platinum {
  color: var(--profile-platinum, #94a3b8);
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.08);
}
.profile-page__meta-pill--platinum i {
  font-size: 0.6rem;
  color: inherit;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.profile-page__level {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-xp);
}

.profile-page__status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.profile-page__status--online {
  color: #00e576;
}
.profile-page__status--online i {
  font-size: 0.5rem;
}
.profile-page__status--offline {
  color: var(--text-muted);
}

.profile-page__meta-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.profile-page__gender {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.875rem;
}
.profile-page__gender--male {
  color: #3b82f6;
}
.profile-page__gender--female {
  color: #ec4899;
}

.profile-page__country {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.profile-page__flag {
  border-radius: 2px;
  display: block;
}

.profile-page__member-since,
.profile-page__first-capture {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
}
.profile-page__member-since i,
.profile-page__first-capture i {
  font-size: 0.75rem;
  opacity: 0.8;
}

.profile-page__header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.profile-page__header-actions .btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.profile-page__header-actions .profile-follow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-page__section {
  margin-bottom: 3rem;
  visibility: hidden;
}

.profile-page__section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.profile-page__section-title i {
  color: var(--color-accent);
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .profile-page__section-title {
    font-size: 1.25rem;
  }
}

.profile-page__section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.profile-page__section-head .profile-page__section-title {
  margin: 0;
}

.profile-page__section-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.profile-page__section-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}
.profile-page__section-link:hover {
  color: var(--color-accent-hover, var(--color-accent));
  text-decoration: underline;
}

.profile-page__showcase-empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.profile-page__showcase-empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.profile-page__showcase-empty:hover::before {
  opacity: 1;
}
.profile-page__showcase-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 180px;
  padding: 2rem;
  text-align: center;
}

.profile-page__showcase-empty-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.profile-page__view-all {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-top: 1.5rem;
}

.profile-page__stats-block {
  margin-bottom: 3rem;
}

.profile-page__stats-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  -webkit-transition: background 250ms ease, border-color 250ms ease;
  transition: background 250ms ease, border-color 250ms ease;
}
.profile-page__stats-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-glow);
}
.profile-page__stats-toggle i:first-child {
  color: var(--color-accent);
  font-size: 1rem;
}

.profile-page__stats-hint {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.profile-page__stats-toggle[aria-expanded=true] .profile-page__stats-hint {
  display: none;
}

.profile-page__stats-chevron {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.profile-page__stats-panel {
  margin-top: 0.5rem;
  padding: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.profile-page__stats-panel--low-data .profile-page__stats-low-data-hint {
  display: block;
}

.profile-page__stats-low-data-hint {
  display: none;
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--bg-void));
  border: 1px solid color-mix(in srgb, var(--color-accent) 15%, var(--border-color));
  border-radius: 4px;
  text-align: center;
}

.profile-page__stats-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.profile-page__stats-bar-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2px;
  padding: 1rem 0.5rem;
  border-right: 1px solid var(--border-color);
}
.profile-page__stats-bar-item:last-child {
  border-right: none;
}
@media (min-width: 576px) {
  .profile-page__stats-bar-item {
    min-width: 0;
  }
}
.profile-page__stats-bar-item--country {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.profile-page__stats-bar-item--country .profile-page__stats-bar-flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0.25;
  z-index: -1;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}

.profile-page__stats-bar-item--zero .profile-page__stats-bar-num {
  color: var(--text-muted);
  font-weight: 600;
}

.profile-page__stats-bar-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
@media (min-width: 576px) {
  .profile-page__stats-bar-num {
    font-size: 1.0625rem;
  }
}

.profile-page__stats-bar-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.2;
  text-align: center;
}

.profile-page__stats-scope-note {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: -0.25rem 0 1rem;
}

.profile-page__stats-compact-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .profile-page__stats-compact-row {
    -ms-grid-columns: 1fr 1.5rem minmax(160px, 220px);
    grid-template-columns: 1fr minmax(160px, 220px);
    gap: 1.5rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (min-width: 768px) {
  .profile-page__stats-compact-row:has(.profile-page__activity-grid-wrap:only-child) {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.profile-page__stats-chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
}
.profile-page__stats-chart--timeline {
  min-height: 0;
}

.profile-page__stats-chart-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-page__stats-chart-wrap {
  position: relative;
  width: 100%;
  min-height: 64px;
  height: 64px;
}

.profile-page__stats-chart-overlay {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
}

.profile-page__stats-chart-overlay-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.profile-page__stats-block .profile-page__charts-grid {
  margin-top: 0;
  margin-bottom: 0;
}

.profile-page__charts-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .profile-page__charts-grid {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

.profile-page__chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.profile-page__chart-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.profile-page__chart-card:hover::before {
  opacity: 1;
}
.profile-page__chart-card {
  padding: 1rem;
  visibility: hidden;
  overflow: visible;
}

.profile-page__chart-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-page__chart-wrap {
  position: relative;
  width: 100%;
  min-height: 140px;
}
.profile-page__chart-wrap--doughnut {
  max-width: 180px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.profile-page__chart-wrap--bar {
  min-height: 120px;
}

.profile-page__chart-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.profile-page__chart-legend-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.profile-page__chart-legend-dot {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.profile-page__chart-legend-label {
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.profile-page__chart-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 120px;
  padding: 1rem;
  text-align: center;
}

.profile-page__chart-empty-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--color-accent);
  opacity: 0.6;
}

.profile-page__chart-empty-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.profile-page__chart-empty-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

.profile-page__activity-grid-wrap {
  position: relative;
  min-width: 0;
}
.profile-page__activity-grid-wrap--empty .profile-page__activity-grid-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.profile-page__activity-grid-empty {
  display: none;
  position: absolute;
  inset: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
  pointer-events: none;
}

.profile-page__activity-grid-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.profile-page__activity-grid-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-page__activity-grid-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.profile-page__activity-grid-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  color: var(--text-muted);
}

.profile-page__activity-grid-legend .profile-page__activity-grid-cell {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
}

.profile-page__activity-grid-legend-label {
  margin: 0 2px 0 0;
}
.profile-page__activity-grid-legend-label:last-of-type {
  margin: 0 0 0 2px;
}

.profile-page__activity-grid-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1px;
}

.profile-page__activity-grid-btn {
  padding: 2px 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-void);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 2px;
  -webkit-transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.profile-page__activity-grid-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-glow);
}
.profile-page__activity-grid-btn.is-active {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.profile-page__activity-grid-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* allow tooltip on hover */
}
.profile-page__activity-grid-btn.is-disabled:hover {
  background: var(--bg-void);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.profile-page__activity-grid {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
  grid-template-columns: repeat(52, 1fr);
  -ms-grid-rows: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 52/7;
}

.profile-page__activity-grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(2) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(3) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(4) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(5) {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(6) {
  -ms-grid-row: 11;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(7) {
  -ms-grid-row: 13;
  -ms-grid-column: 1;
}

.profile-page__activity-grid > *:nth-child(8) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(9) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(11) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(12) {
  -ms-grid-row: 9;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(13) {
  -ms-grid-row: 11;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(14) {
  -ms-grid-row: 13;
  -ms-grid-column: 3;
}

.profile-page__activity-grid > *:nth-child(15) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(16) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(17) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(18) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(19) {
  -ms-grid-row: 9;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(20) {
  -ms-grid-row: 11;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(21) {
  -ms-grid-row: 13;
  -ms-grid-column: 5;
}

.profile-page__activity-grid > *:nth-child(22) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(23) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(24) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(25) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(26) {
  -ms-grid-row: 9;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(27) {
  -ms-grid-row: 11;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(28) {
  -ms-grid-row: 13;
  -ms-grid-column: 7;
}

.profile-page__activity-grid > *:nth-child(29) {
  -ms-grid-row: 1;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(30) {
  -ms-grid-row: 3;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(31) {
  -ms-grid-row: 5;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(32) {
  -ms-grid-row: 7;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(33) {
  -ms-grid-row: 9;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(34) {
  -ms-grid-row: 11;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(35) {
  -ms-grid-row: 13;
  -ms-grid-column: 9;
}

.profile-page__activity-grid > *:nth-child(36) {
  -ms-grid-row: 1;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(37) {
  -ms-grid-row: 3;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(38) {
  -ms-grid-row: 5;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(39) {
  -ms-grid-row: 7;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(40) {
  -ms-grid-row: 9;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(41) {
  -ms-grid-row: 11;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(42) {
  -ms-grid-row: 13;
  -ms-grid-column: 11;
}

.profile-page__activity-grid > *:nth-child(43) {
  -ms-grid-row: 1;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(44) {
  -ms-grid-row: 3;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(45) {
  -ms-grid-row: 5;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(46) {
  -ms-grid-row: 7;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(47) {
  -ms-grid-row: 9;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(48) {
  -ms-grid-row: 11;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(49) {
  -ms-grid-row: 13;
  -ms-grid-column: 13;
}

.profile-page__activity-grid > *:nth-child(50) {
  -ms-grid-row: 1;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(51) {
  -ms-grid-row: 3;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(52) {
  -ms-grid-row: 5;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(53) {
  -ms-grid-row: 7;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(54) {
  -ms-grid-row: 9;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(55) {
  -ms-grid-row: 11;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(56) {
  -ms-grid-row: 13;
  -ms-grid-column: 15;
}

.profile-page__activity-grid > *:nth-child(57) {
  -ms-grid-row: 1;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(58) {
  -ms-grid-row: 3;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(59) {
  -ms-grid-row: 5;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(60) {
  -ms-grid-row: 7;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(61) {
  -ms-grid-row: 9;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(62) {
  -ms-grid-row: 11;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(63) {
  -ms-grid-row: 13;
  -ms-grid-column: 17;
}

.profile-page__activity-grid > *:nth-child(64) {
  -ms-grid-row: 1;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(65) {
  -ms-grid-row: 3;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(66) {
  -ms-grid-row: 5;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(67) {
  -ms-grid-row: 7;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(68) {
  -ms-grid-row: 9;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(69) {
  -ms-grid-row: 11;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(70) {
  -ms-grid-row: 13;
  -ms-grid-column: 19;
}

.profile-page__activity-grid > *:nth-child(71) {
  -ms-grid-row: 1;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(72) {
  -ms-grid-row: 3;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(73) {
  -ms-grid-row: 5;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(74) {
  -ms-grid-row: 7;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(75) {
  -ms-grid-row: 9;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(76) {
  -ms-grid-row: 11;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(77) {
  -ms-grid-row: 13;
  -ms-grid-column: 21;
}

.profile-page__activity-grid > *:nth-child(78) {
  -ms-grid-row: 1;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(79) {
  -ms-grid-row: 3;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(80) {
  -ms-grid-row: 5;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(81) {
  -ms-grid-row: 7;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(82) {
  -ms-grid-row: 9;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(83) {
  -ms-grid-row: 11;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(84) {
  -ms-grid-row: 13;
  -ms-grid-column: 23;
}

.profile-page__activity-grid > *:nth-child(85) {
  -ms-grid-row: 1;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(86) {
  -ms-grid-row: 3;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(87) {
  -ms-grid-row: 5;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(88) {
  -ms-grid-row: 7;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(89) {
  -ms-grid-row: 9;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(90) {
  -ms-grid-row: 11;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(91) {
  -ms-grid-row: 13;
  -ms-grid-column: 25;
}

.profile-page__activity-grid > *:nth-child(92) {
  -ms-grid-row: 1;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(93) {
  -ms-grid-row: 3;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(94) {
  -ms-grid-row: 5;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(95) {
  -ms-grid-row: 7;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(96) {
  -ms-grid-row: 9;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(97) {
  -ms-grid-row: 11;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(98) {
  -ms-grid-row: 13;
  -ms-grid-column: 27;
}

.profile-page__activity-grid > *:nth-child(99) {
  -ms-grid-row: 1;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(100) {
  -ms-grid-row: 3;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(101) {
  -ms-grid-row: 5;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(102) {
  -ms-grid-row: 7;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(103) {
  -ms-grid-row: 9;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(104) {
  -ms-grid-row: 11;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(105) {
  -ms-grid-row: 13;
  -ms-grid-column: 29;
}

.profile-page__activity-grid > *:nth-child(106) {
  -ms-grid-row: 1;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(107) {
  -ms-grid-row: 3;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(108) {
  -ms-grid-row: 5;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(109) {
  -ms-grid-row: 7;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(110) {
  -ms-grid-row: 9;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(111) {
  -ms-grid-row: 11;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(112) {
  -ms-grid-row: 13;
  -ms-grid-column: 31;
}

.profile-page__activity-grid > *:nth-child(113) {
  -ms-grid-row: 1;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(114) {
  -ms-grid-row: 3;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(115) {
  -ms-grid-row: 5;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(116) {
  -ms-grid-row: 7;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(117) {
  -ms-grid-row: 9;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(118) {
  -ms-grid-row: 11;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(119) {
  -ms-grid-row: 13;
  -ms-grid-column: 33;
}

.profile-page__activity-grid > *:nth-child(120) {
  -ms-grid-row: 1;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(121) {
  -ms-grid-row: 3;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(122) {
  -ms-grid-row: 5;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(123) {
  -ms-grid-row: 7;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(124) {
  -ms-grid-row: 9;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(125) {
  -ms-grid-row: 11;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(126) {
  -ms-grid-row: 13;
  -ms-grid-column: 35;
}

.profile-page__activity-grid > *:nth-child(127) {
  -ms-grid-row: 1;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(128) {
  -ms-grid-row: 3;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(129) {
  -ms-grid-row: 5;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(130) {
  -ms-grid-row: 7;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(131) {
  -ms-grid-row: 9;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(132) {
  -ms-grid-row: 11;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(133) {
  -ms-grid-row: 13;
  -ms-grid-column: 37;
}

.profile-page__activity-grid > *:nth-child(134) {
  -ms-grid-row: 1;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(135) {
  -ms-grid-row: 3;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(136) {
  -ms-grid-row: 5;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(137) {
  -ms-grid-row: 7;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(138) {
  -ms-grid-row: 9;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(139) {
  -ms-grid-row: 11;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(140) {
  -ms-grid-row: 13;
  -ms-grid-column: 39;
}

.profile-page__activity-grid > *:nth-child(141) {
  -ms-grid-row: 1;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(142) {
  -ms-grid-row: 3;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(143) {
  -ms-grid-row: 5;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(144) {
  -ms-grid-row: 7;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(145) {
  -ms-grid-row: 9;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(146) {
  -ms-grid-row: 11;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(147) {
  -ms-grid-row: 13;
  -ms-grid-column: 41;
}

.profile-page__activity-grid > *:nth-child(148) {
  -ms-grid-row: 1;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(149) {
  -ms-grid-row: 3;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(150) {
  -ms-grid-row: 5;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(151) {
  -ms-grid-row: 7;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(152) {
  -ms-grid-row: 9;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(153) {
  -ms-grid-row: 11;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(154) {
  -ms-grid-row: 13;
  -ms-grid-column: 43;
}

.profile-page__activity-grid > *:nth-child(155) {
  -ms-grid-row: 1;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(156) {
  -ms-grid-row: 3;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(157) {
  -ms-grid-row: 5;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(158) {
  -ms-grid-row: 7;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(159) {
  -ms-grid-row: 9;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(160) {
  -ms-grid-row: 11;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(161) {
  -ms-grid-row: 13;
  -ms-grid-column: 45;
}

.profile-page__activity-grid > *:nth-child(162) {
  -ms-grid-row: 1;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(163) {
  -ms-grid-row: 3;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(164) {
  -ms-grid-row: 5;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(165) {
  -ms-grid-row: 7;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(166) {
  -ms-grid-row: 9;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(167) {
  -ms-grid-row: 11;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(168) {
  -ms-grid-row: 13;
  -ms-grid-column: 47;
}

.profile-page__activity-grid > *:nth-child(169) {
  -ms-grid-row: 1;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(170) {
  -ms-grid-row: 3;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(171) {
  -ms-grid-row: 5;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(172) {
  -ms-grid-row: 7;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(173) {
  -ms-grid-row: 9;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(174) {
  -ms-grid-row: 11;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(175) {
  -ms-grid-row: 13;
  -ms-grid-column: 49;
}

.profile-page__activity-grid > *:nth-child(176) {
  -ms-grid-row: 1;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(177) {
  -ms-grid-row: 3;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(178) {
  -ms-grid-row: 5;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(179) {
  -ms-grid-row: 7;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(180) {
  -ms-grid-row: 9;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(181) {
  -ms-grid-row: 11;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(182) {
  -ms-grid-row: 13;
  -ms-grid-column: 51;
}

.profile-page__activity-grid > *:nth-child(183) {
  -ms-grid-row: 1;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(184) {
  -ms-grid-row: 3;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(185) {
  -ms-grid-row: 5;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(186) {
  -ms-grid-row: 7;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(187) {
  -ms-grid-row: 9;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(188) {
  -ms-grid-row: 11;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(189) {
  -ms-grid-row: 13;
  -ms-grid-column: 53;
}

.profile-page__activity-grid > *:nth-child(190) {
  -ms-grid-row: 1;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(191) {
  -ms-grid-row: 3;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(192) {
  -ms-grid-row: 5;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(193) {
  -ms-grid-row: 7;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(194) {
  -ms-grid-row: 9;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(195) {
  -ms-grid-row: 11;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(196) {
  -ms-grid-row: 13;
  -ms-grid-column: 55;
}

.profile-page__activity-grid > *:nth-child(197) {
  -ms-grid-row: 1;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(198) {
  -ms-grid-row: 3;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(199) {
  -ms-grid-row: 5;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(200) {
  -ms-grid-row: 7;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(201) {
  -ms-grid-row: 9;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(202) {
  -ms-grid-row: 11;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(203) {
  -ms-grid-row: 13;
  -ms-grid-column: 57;
}

.profile-page__activity-grid > *:nth-child(204) {
  -ms-grid-row: 1;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(205) {
  -ms-grid-row: 3;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(206) {
  -ms-grid-row: 5;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(207) {
  -ms-grid-row: 7;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(208) {
  -ms-grid-row: 9;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(209) {
  -ms-grid-row: 11;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(210) {
  -ms-grid-row: 13;
  -ms-grid-column: 59;
}

.profile-page__activity-grid > *:nth-child(211) {
  -ms-grid-row: 1;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(212) {
  -ms-grid-row: 3;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(213) {
  -ms-grid-row: 5;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(214) {
  -ms-grid-row: 7;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(215) {
  -ms-grid-row: 9;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(216) {
  -ms-grid-row: 11;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(217) {
  -ms-grid-row: 13;
  -ms-grid-column: 61;
}

.profile-page__activity-grid > *:nth-child(218) {
  -ms-grid-row: 1;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(219) {
  -ms-grid-row: 3;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(220) {
  -ms-grid-row: 5;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(221) {
  -ms-grid-row: 7;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(222) {
  -ms-grid-row: 9;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(223) {
  -ms-grid-row: 11;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(224) {
  -ms-grid-row: 13;
  -ms-grid-column: 63;
}

.profile-page__activity-grid > *:nth-child(225) {
  -ms-grid-row: 1;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(226) {
  -ms-grid-row: 3;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(227) {
  -ms-grid-row: 5;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(228) {
  -ms-grid-row: 7;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(229) {
  -ms-grid-row: 9;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(230) {
  -ms-grid-row: 11;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(231) {
  -ms-grid-row: 13;
  -ms-grid-column: 65;
}

.profile-page__activity-grid > *:nth-child(232) {
  -ms-grid-row: 1;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(233) {
  -ms-grid-row: 3;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(234) {
  -ms-grid-row: 5;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(235) {
  -ms-grid-row: 7;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(236) {
  -ms-grid-row: 9;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(237) {
  -ms-grid-row: 11;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(238) {
  -ms-grid-row: 13;
  -ms-grid-column: 67;
}

.profile-page__activity-grid > *:nth-child(239) {
  -ms-grid-row: 1;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(240) {
  -ms-grid-row: 3;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(241) {
  -ms-grid-row: 5;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(242) {
  -ms-grid-row: 7;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(243) {
  -ms-grid-row: 9;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(244) {
  -ms-grid-row: 11;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(245) {
  -ms-grid-row: 13;
  -ms-grid-column: 69;
}

.profile-page__activity-grid > *:nth-child(246) {
  -ms-grid-row: 1;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(247) {
  -ms-grid-row: 3;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(248) {
  -ms-grid-row: 5;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(249) {
  -ms-grid-row: 7;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(250) {
  -ms-grid-row: 9;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(251) {
  -ms-grid-row: 11;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(252) {
  -ms-grid-row: 13;
  -ms-grid-column: 71;
}

.profile-page__activity-grid > *:nth-child(253) {
  -ms-grid-row: 1;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(254) {
  -ms-grid-row: 3;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(255) {
  -ms-grid-row: 5;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(256) {
  -ms-grid-row: 7;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(257) {
  -ms-grid-row: 9;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(258) {
  -ms-grid-row: 11;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(259) {
  -ms-grid-row: 13;
  -ms-grid-column: 73;
}

.profile-page__activity-grid > *:nth-child(260) {
  -ms-grid-row: 1;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(261) {
  -ms-grid-row: 3;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(262) {
  -ms-grid-row: 5;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(263) {
  -ms-grid-row: 7;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(264) {
  -ms-grid-row: 9;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(265) {
  -ms-grid-row: 11;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(266) {
  -ms-grid-row: 13;
  -ms-grid-column: 75;
}

.profile-page__activity-grid > *:nth-child(267) {
  -ms-grid-row: 1;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(268) {
  -ms-grid-row: 3;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(269) {
  -ms-grid-row: 5;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(270) {
  -ms-grid-row: 7;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(271) {
  -ms-grid-row: 9;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(272) {
  -ms-grid-row: 11;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(273) {
  -ms-grid-row: 13;
  -ms-grid-column: 77;
}

.profile-page__activity-grid > *:nth-child(274) {
  -ms-grid-row: 1;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(275) {
  -ms-grid-row: 3;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(276) {
  -ms-grid-row: 5;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(277) {
  -ms-grid-row: 7;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(278) {
  -ms-grid-row: 9;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(279) {
  -ms-grid-row: 11;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(280) {
  -ms-grid-row: 13;
  -ms-grid-column: 79;
}

.profile-page__activity-grid > *:nth-child(281) {
  -ms-grid-row: 1;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(282) {
  -ms-grid-row: 3;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(283) {
  -ms-grid-row: 5;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(284) {
  -ms-grid-row: 7;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(285) {
  -ms-grid-row: 9;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(286) {
  -ms-grid-row: 11;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(287) {
  -ms-grid-row: 13;
  -ms-grid-column: 81;
}

.profile-page__activity-grid > *:nth-child(288) {
  -ms-grid-row: 1;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(289) {
  -ms-grid-row: 3;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(290) {
  -ms-grid-row: 5;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(291) {
  -ms-grid-row: 7;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(292) {
  -ms-grid-row: 9;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(293) {
  -ms-grid-row: 11;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(294) {
  -ms-grid-row: 13;
  -ms-grid-column: 83;
}

.profile-page__activity-grid > *:nth-child(295) {
  -ms-grid-row: 1;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(296) {
  -ms-grid-row: 3;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(297) {
  -ms-grid-row: 5;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(298) {
  -ms-grid-row: 7;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(299) {
  -ms-grid-row: 9;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(300) {
  -ms-grid-row: 11;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(301) {
  -ms-grid-row: 13;
  -ms-grid-column: 85;
}

.profile-page__activity-grid > *:nth-child(302) {
  -ms-grid-row: 1;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(303) {
  -ms-grid-row: 3;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(304) {
  -ms-grid-row: 5;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(305) {
  -ms-grid-row: 7;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(306) {
  -ms-grid-row: 9;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(307) {
  -ms-grid-row: 11;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(308) {
  -ms-grid-row: 13;
  -ms-grid-column: 87;
}

.profile-page__activity-grid > *:nth-child(309) {
  -ms-grid-row: 1;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(310) {
  -ms-grid-row: 3;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(311) {
  -ms-grid-row: 5;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(312) {
  -ms-grid-row: 7;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(313) {
  -ms-grid-row: 9;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(314) {
  -ms-grid-row: 11;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(315) {
  -ms-grid-row: 13;
  -ms-grid-column: 89;
}

.profile-page__activity-grid > *:nth-child(316) {
  -ms-grid-row: 1;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(317) {
  -ms-grid-row: 3;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(318) {
  -ms-grid-row: 5;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(319) {
  -ms-grid-row: 7;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(320) {
  -ms-grid-row: 9;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(321) {
  -ms-grid-row: 11;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(322) {
  -ms-grid-row: 13;
  -ms-grid-column: 91;
}

.profile-page__activity-grid > *:nth-child(323) {
  -ms-grid-row: 1;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(324) {
  -ms-grid-row: 3;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(325) {
  -ms-grid-row: 5;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(326) {
  -ms-grid-row: 7;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(327) {
  -ms-grid-row: 9;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(328) {
  -ms-grid-row: 11;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(329) {
  -ms-grid-row: 13;
  -ms-grid-column: 93;
}

.profile-page__activity-grid > *:nth-child(330) {
  -ms-grid-row: 1;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(331) {
  -ms-grid-row: 3;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(332) {
  -ms-grid-row: 5;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(333) {
  -ms-grid-row: 7;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(334) {
  -ms-grid-row: 9;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(335) {
  -ms-grid-row: 11;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(336) {
  -ms-grid-row: 13;
  -ms-grid-column: 95;
}

.profile-page__activity-grid > *:nth-child(337) {
  -ms-grid-row: 1;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(338) {
  -ms-grid-row: 3;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(339) {
  -ms-grid-row: 5;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(340) {
  -ms-grid-row: 7;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(341) {
  -ms-grid-row: 9;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(342) {
  -ms-grid-row: 11;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(343) {
  -ms-grid-row: 13;
  -ms-grid-column: 97;
}

.profile-page__activity-grid > *:nth-child(344) {
  -ms-grid-row: 1;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(345) {
  -ms-grid-row: 3;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(346) {
  -ms-grid-row: 5;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(347) {
  -ms-grid-row: 7;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(348) {
  -ms-grid-row: 9;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(349) {
  -ms-grid-row: 11;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(350) {
  -ms-grid-row: 13;
  -ms-grid-column: 99;
}

.profile-page__activity-grid > *:nth-child(351) {
  -ms-grid-row: 1;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(352) {
  -ms-grid-row: 3;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(353) {
  -ms-grid-row: 5;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(354) {
  -ms-grid-row: 7;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(355) {
  -ms-grid-row: 9;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(356) {
  -ms-grid-row: 11;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(357) {
  -ms-grid-row: 13;
  -ms-grid-column: 101;
}

.profile-page__activity-grid > *:nth-child(358) {
  -ms-grid-row: 1;
  -ms-grid-column: 103;
}

.profile-page__activity-grid > *:nth-child(359) {
  -ms-grid-row: 3;
  -ms-grid-column: 103;
}

.profile-page__activity-grid > *:nth-child(360) {
  -ms-grid-row: 5;
  -ms-grid-column: 103;
}

.profile-page__activity-grid > *:nth-child(361) {
  -ms-grid-row: 7;
  -ms-grid-column: 103;
}

.profile-page__activity-grid > *:nth-child(362) {
  -ms-grid-row: 9;
  -ms-grid-column: 103;
}

.profile-page__activity-grid > *:nth-child(363) {
  -ms-grid-row: 11;
  -ms-grid-column: 103;
}

.profile-page__activity-grid > *:nth-child(364) {
  -ms-grid-row: 13;
  -ms-grid-column: 103;
}

.profile-page__activity-grid-cell {
  min-width: 0;
  min-height: 0;
  border-radius: 1px;
  -webkit-transition: -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: transform 150ms ease, box-shadow 150ms ease;
  transition: transform 150ms ease, box-shadow 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.profile-page__activity-grid-cell:hover {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-box-shadow: 0 0 0 1px var(--border-glow);
          box-shadow: 0 0 0 1px var(--border-glow);
}
.profile-page__activity-grid-cell--0 {
  background: var(--bg-void);
  border: 1px solid var(--border-color);
}
.profile-page__activity-grid-cell--1 {
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.profile-page__activity-grid-cell--2 {
  background: color-mix(in srgb, var(--color-accent) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.profile-page__activity-grid-cell--3 {
  background: color-mix(in srgb, var(--color-accent) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 85%, transparent);
}
.profile-page__activity-grid-cell--4 {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.profile-page__activity-grid-wrap[data-range="84"] .profile-page__activity-grid {
  -ms-grid-columns: (1fr)[12];
  grid-template-columns: repeat(12, 1fr);
  aspect-ratio: 12/7;
}

.profile-page__activity-grid-wrap[data-range="182"] .profile-page__activity-grid {
  -ms-grid-columns: (1fr)[26];
  grid-template-columns: repeat(26, 1fr);
  aspect-ratio: 26/7;
}

.profile-page__activity-grid-wrap[data-range="365"] .profile-page__activity-grid {
  -ms-grid-columns: (1fr)[52];
  grid-template-columns: repeat(52, 1fr);
  aspect-ratio: 52/7;
}

.profile-page__activity-grid-cell--hidden {
  display: none !important;
}

.profile-page__stats-breakdown {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.profile-page__stats-breakdown::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.profile-page__stats-breakdown:hover::before {
  opacity: 1;
}
.profile-page__stats-breakdown {
  padding: 1rem;
  margin-top: 1.5rem;
}

.profile-page__breakdown-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-page__xp-bar-wrap {
  height: 8px;
  background: var(--stat-bar-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.profile-page__xp-bar {
  height: 100%;
  width: var(--xp-progress, 0%);
  max-width: 100%;
  background: -webkit-gradient(linear, left top, right top, from(var(--color-xp)), to(var(--color-xp-muted)));
  background: linear-gradient(90deg, var(--color-xp) 0%, var(--color-xp-muted) 100%);
  border-radius: 4px;
  -webkit-transition: width 250ms ease;
  transition: width 250ms ease;
}

.profile-page__xp-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.profile-page__trophy-breakdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.profile-page__trophy-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.profile-page__trophy-chip--platinum {
  background: rgba(122, 183, 232, 0.2);
  color: #7ab7e8;
}
.profile-page__trophy-chip--gold {
  background: rgba(255, 215, 0, 0.2);
  color: rgb(193.8, 163.4, 0);
}
.profile-page__trophy-chip--silver {
  background: rgba(192, 192, 192, 0.2);
  color: #8d8d8d;
}
.profile-page__trophy-chip--bronze {
  background: rgba(205, 127, 50, 0.2);
  color: rgb(213, 147.48, 82.8);
}

.profile-page__bio-content {
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .profile-page__bio-content {
    padding: 2rem;
  }
}

.staff-bio-editor__view {
  line-height: 1.55;
  color: var(--text-primary);
}
.staff-bio-editor__empty {
  margin: 0;
  font-style: italic;
  color: var(--text-secondary);
}
.staff-bio-editor__textarea {
  width: 100%;
  max-width: 100%;
  min-height: 7rem;
  resize: vertical;
  line-height: 1.45;
}
.staff-bio-editor__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.staff-bio-editor__actions {
  margin-top: 0;
}

.profile-page__activity-feed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.profile-page__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .profile-page__grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .profile-page__grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.profile-page__grid .ss-card {
  visibility: hidden;
}

.profile-page__empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.profile-page__empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.profile-page__empty:hover::before {
  opacity: 1;
}
.profile-page__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 360px;
  padding: 3rem 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .profile-page__empty {
    min-height: 420px;
    padding: 4rem;
  }
}

.profile-page__empty-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  max-width: 320px;
  min-height: 240px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .profile-page__empty-inner {
    min-height: 280px;
  }
}

.profile-page__empty-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0;
  font-size: 2.5rem;
  color: var(--color-accent);
  opacity: 0.7;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.profile-page__empty-icon i {
  display: block;
}

.profile-page__empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.profile-page__empty-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.profile-page__empty-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin: 0;
}

.profile-page__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

.profile-page__page-info {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.profile-page__page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-page__collection-intro {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.profile-page__grid--collection {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 576px) {
  .profile-page__grid--collection {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .profile-page__grid--collection {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.profile-page__collection-track-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 -1rem;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .profile-page__collection-track-wrap {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }
}
.profile-page__collection-track-wrap::before, .profile-page__collection-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.profile-page__collection-track-wrap::before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(var(--bg-surface)), to(transparent));
  background: linear-gradient(to right, var(--bg-surface), transparent);
}
.profile-page__collection-track-wrap::after {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(var(--bg-surface)), to(transparent));
  background: linear-gradient(to left, var(--bg-surface), transparent);
}

.profile-page__collection-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}

.profile-page__collection-slide {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 200px;
}
@media (min-width: 576px) {
  .profile-page__collection-slide {
    width: 220px;
  }
}
@media (min-width: 768px) {
  .profile-page__collection-slide {
    width: 240px;
  }
}

.profile-page__collection-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.profile-page__collection-added {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-left: 2px;
}

.profile-page__collection-empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.profile-page__collection-empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.profile-page__collection-empty:hover::before {
  opacity: 1;
}
.profile-page__collection-empty {
  padding: 2rem;
  text-align: center;
}

.profile-page__collection-empty-text {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.profile-page__section-title--collection {
  font-size: 1.5rem;
}

.profile-page__collection-full .profile-page__section-head {
  margin-bottom: 0.5rem;
}

.profile-edit {
  padding: 1.5rem 1rem;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (min-width: 768px) {
  .profile-edit {
    padding: 3rem 2rem;
  }
}

.profile-edit__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.profile-edit__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.profile-edit__breadcrumb {
  margin-bottom: 0;
}

.profile-edit__breadcrumb-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.profile-edit__breadcrumb-link:hover {
  opacity: 0.9;
}

.profile-edit__title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.profile-edit__title i {
  color: var(--color-accent);
}

.profile-edit__intro {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}

.profile-edit__section--blocked {
  margin-top: 3rem;
  border-top: 1px solid var(--border-color);
}

.profile-edit__field--blocked {
  border-bottom: none;
}

.profile-edit__blocked-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-edit__blocked-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}
.profile-edit__blocked-item:last-child {
  border-bottom: none;
}

.profile-edit__blocked-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.profile-edit__blocked-user:hover {
  color: var(--color-accent);
}

.profile-edit__blocked-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.profile-edit__blocked-avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.profile-edit__blocked-name.jpsnt-user--inline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
}
.profile-edit__blocked-name.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
}

.profile-edit__blocked-level {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.profile-edit__blocked-empty {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
}

.profile-edit__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.profile-edit__section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.profile-edit__section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 768px) {
  .profile-edit__section-title {
    padding: 1.5rem 2rem;
    font-size: 1.0625rem;
  }
}
.profile-edit__section-title i {
  color: var(--color-accent);
  font-size: 0.9375rem;
}

.profile-edit__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 768px) {
  .profile-edit__field {
    padding: 1.5rem 2rem;
  }
}
.profile-edit__field:last-child {
  border-bottom: none;
}
.profile-edit__field--country .login-page__country-select {
  width: 100%;
  max-width: none;
}
.profile-edit__field--gender {
  border-bottom: none;
}

.profile-edit__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-edit__textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  resize: vertical;
  min-height: 120px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.profile-edit__textarea::-webkit-input-placeholder {
  color: var(--text-muted);
}
.profile-edit__textarea::-moz-placeholder {
  color: var(--text-muted);
}
.profile-edit__textarea:-ms-input-placeholder {
  color: var(--text-muted);
}
.profile-edit__textarea::-ms-input-placeholder {
  color: var(--text-muted);
}
.profile-edit__textarea::placeholder {
  color: var(--text-muted);
}
.profile-edit__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.profile-edit__input {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.profile-edit__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.profile-edit__input::-moz-placeholder {
  color: var(--text-muted);
}
.profile-edit__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.profile-edit__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.profile-edit__input::placeholder {
  color: var(--text-muted);
}
.profile-edit__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.profile-edit__char-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.profile-edit__field-error {
  font-size: 0.8125rem;
  color: var(--color-danger);
  min-height: 0;
}
.profile-edit__field-error:empty {
  display: none;
}

.profile-edit .login-page__country-select {
  width: 100%;
}

.profile-edit .login-page__country-trigger {
  width: 100%;
}

.profile-edit .login-page__country-panel {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.profile-edit .login-page__country-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
@media (min-width: 768px) {
  .profile-edit .login-page__country-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

.profile-edit .login-page__country-item span {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.profile-edit__radio-group {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}
@media (max-width: 360px) {
  .profile-edit__radio-group {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.profile-edit__radio-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: var(--bg-elevated);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.profile-edit__radio-wrap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.profile-edit__radio-wrap:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}
.profile-edit__radio-wrap:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);
  color: var(--text-primary);
}
.profile-edit__radio-wrap .profile-edit__radio-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.profile-edit__radio-wrap--male:has(input:checked) {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

.profile-edit__radio-wrap--female:has(input:checked) {
  border-color: #ec4899;
  background: rgba(236, 72, 153, 0.08);
}

.profile-edit__field--media {
  border-bottom: none;
}

.profile-edit__media-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  .profile-edit__media-layout {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 3rem;
  }
}
@media (min-width: 768px) {
  .profile-edit__media-layout:not(.profile-edit__media-layout--header) .profile-edit__preview {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .profile-edit__media-layout:not(.profile-edit__media-layout--header) .profile-edit__dropzone {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 75%;
            flex: 1 1 75%;
    min-width: 0;
  }
}
@media (min-width: 768px) {
  .profile-edit__media-layout--header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.profile-edit__preview {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
}

.profile-edit__preview-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-color);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-color);
}
.profile-edit__preview-frame--avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .profile-edit__preview-frame--avatar {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;
    height: auto;
  }
}
.profile-edit__preview-frame--avatar .profile-edit__preview-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.profile-edit__preview-frame--header {
  width: 100%;
  aspect-ratio: 21/9;
  min-height: 100px;
  max-height: 180px;
}
@media (min-width: 768px) {
  .profile-edit__preview-frame--header {
    min-height: 120px;
    max-height: 200px;
  }
}
.profile-edit__preview-frame--header .profile-edit__preview-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.profile-edit__preview-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(var(--color-primary-rgb, 59, 130, 246), 0.06) 100%);
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.profile-edit__preview-placeholder i {
  font-size: 2rem;
  opacity: 0.5;
  color: var(--color-accent);
}

.profile-edit__preview-placeholder--banner {
  min-height: 100px;
  aspect-ratio: 21/9;
}
.profile-edit__preview-placeholder--banner i {
  font-size: 2.5rem;
}

.profile-edit__preview-frame--avatar .profile-edit__preview-placeholder {
  min-height: 120px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .profile-edit__preview-frame--avatar .profile-edit__preview-placeholder {
    min-height: 140px;
  }
}

.profile-edit__preview-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.profile-edit__preview-remove:hover {
  background: var(--color-danger);
}

.profile-edit__preview-frame--avatar .profile-edit__preview-remove {
  top: auto;
  right: 0.25rem;
  bottom: 0.25rem;
}

.profile-edit__preview-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.profile-edit__dropzone {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.profile-edit__dropzone.profile-edit__dropzone--avatar {
  min-height: 160px;
  max-width: none;
}
@media (min-width: 768px) {
  .profile-edit__dropzone.profile-edit__dropzone--avatar {
    min-height: 140px;
  }
}
.profile-edit__dropzone.profile-edit__dropzone--header {
  min-height: 140px;
  max-width: none;
}
@media (min-width: 768px) {
  .profile-edit__dropzone.profile-edit__dropzone--header {
    min-height: 160px;
  }
}

.profile-edit .upload-modal__dropzone {
  max-width: none;
}

.profile-edit__dropzone-preview--avatar {
  min-height: 120px;
}
.profile-edit__dropzone-preview--avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  max-height: none;
}

.profile-edit__dropzone-preview--header {
  min-height: 100px;
  aspect-ratio: 21/9;
}
.profile-edit__dropzone-preview--header img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-height: none;
}

.profile-edit__browse-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.profile-edit__browse-btn:hover {
  color: var(--color-primary);
}

.profile-edit__section--showcase {
  margin-top: 3rem;
  border-top: 1px solid var(--border-color);
}

.profile-edit__field--showcase {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.profile-edit__section-desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.profile-edit__section-link {
  color: var(--color-accent);
  text-decoration: none;
}
.profile-edit__section-link:hover {
  text-decoration: underline;
}

.profile-edit__showcase-manager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.profile-edit__showcase-subtitle {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.profile-edit__showcase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.profile-edit__showcase-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.profile-edit__showcase-item.is-dragging {
  opacity: 0.5;
}

.profile-edit__showcase-drag {
  color: var(--text-muted);
  cursor: -webkit-grab;
  cursor: grab;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.profile-edit__showcase-drag:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.profile-edit__showcase-thumb {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  width: 80px;
  height: 45px;
}
.profile-edit__showcase-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-edit__showcase-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.profile-edit__showcase-game {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.profile-edit__showcase-trophy {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.profile-edit__showcase-empty {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}

.profile-edit__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.login-page {
  min-height: 60vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3rem 1rem;
}

.login-page__inner {
  width: 100%;
  max-width: 420px;
}

.login-page__brand {
  text-align: center;
  margin-bottom: 2rem;
}

.login-page__logo {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.login-page__logo img {
  display: block;
  height: 48px;
  width: auto;
}

.login-page__tagline {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.login-page__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.login-page__tab {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  -webkit-transition: color 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, border-color 150ms ease;
}
.login-page__tab:hover {
  color: var(--text-primary);
}
.login-page__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.login-page__back {
  margin-bottom: 2rem;
  text-align: center;
}

.login-page__back-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.login-page__back-link:hover {
  color: var(--color-primary);
}

.login-page__forms {
  position: relative;
}

.login-page__form-panel {
  display: none;
  -webkit-animation: login-panel-fade 0.3s ease;
          animation: login-panel-fade 0.3s ease;
}
.login-page__form-panel--active {
  display: block;
}

.login-page__signin-state,
.login-page__forgot-state {
  display: none;
}
.login-page__signin-state.login-page__state--active,
.login-page__forgot-state.login-page__state--active {
  display: block;
}

.login-page__forgot-link-wrap {
  margin: 1rem 0 0;
  text-align: center;
}

.login-page__forgot-trigger,
.login-page__back-trigger {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.login-page__forgot-trigger:hover,
.login-page__back-trigger:hover {
  text-decoration: underline;
}

.login-page__back-trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}
.login-page__back-trigger:hover {
  color: var(--color-primary);
}

@-webkit-keyframes login-panel-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes login-panel-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.login-page__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.login-page__form--register {
  position: relative;
}

.login-page__register-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.login-page__register-step--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.login-page__register-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login-page__register-actions .login-page__submit {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.login-page__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.login-page__field--row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
}
.login-page__field--row > .login-page__checkbox:first-child {
  margin-top: 0.2em;
}
.login-page__field--error .login-page__input {
  border-color: var(--color-danger);
  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-danger-rgb, 239, 68, 68), 0.2);
          box-shadow: 0 0 0 2px rgba(var(--color-danger-rgb, 239, 68, 68), 0.2);
}
.login-page__field--error .login-page__input:focus {
  border-color: var(--color-danger);
  -webkit-box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.2);
          box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.2);
}

.login-page__field-error {
  font-size: 0.8125rem;
  color: var(--color-danger);
  margin-top: 2px;
  min-height: 1.25em;
}

.login-page__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.login-page__input {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}
.login-page__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.login-page__input::-moz-placeholder {
  color: var(--text-muted);
}
.login-page__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.login-page__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.login-page__input::placeholder {
  color: var(--text-muted);
}
.login-page__input:focus {
  outline: none;
  border-color: var(--color-primary);
  -webkit-box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
          box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

.login-page__checkbox-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.login-page__checkbox-label:hover {
  color: var(--text-primary);
}
.login-page__checkbox-label a {
  color: var(--color-primary);
  text-decoration: none;
}
.login-page__checkbox-label a:hover {
  text-decoration: underline;
}

.login-page__checkbox-label--multiline {
  display: block;
  line-height: 1.5;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.login-page__character-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

.login-page__character-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
}

.login-page__character-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
}

.login-page__character-option-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
}

.login-page__character-avatar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.login-page__character-regenerate {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  font-size: 0.75rem;
}
.login-page__character-regenerate:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.login-page__character-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 1rem;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  font-family: inherit;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}
.login-page__character-option:hover {
  border-color: var(--color-primary);
  color: var(--text-primary);
}
.login-page__character-option--selected {
  border-color: var(--color-primary);
  color: var(--color-primary);
  -webkit-box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.25);
          box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.25);
}

.login-page__character-avatar {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-base);
}
.login-page__character-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.login-page__country-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.login-page__country-trigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  transition: border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
  text-align: left;
}
.login-page__country-trigger:hover {
  border-color: var(--color-primary);
}
.login-page__country-trigger:focus {
  outline: none;
  border-color: var(--color-primary);
  -webkit-box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
          box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

.login-page__country-trigger-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: var(--text-secondary);
}

.login-page__country-trigger:not([aria-expanded=false]) .login-page__country-trigger-text {
  color: var(--text-primary);
}

.login-page__country-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}

.login-page__country-trigger[aria-expanded=true] .login-page__country-chevron {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.login-page__country-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.login-page__country-search {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.login-page__country-search::-webkit-input-placeholder {
  color: var(--text-muted);
}
.login-page__country-search::-moz-placeholder {
  color: var(--text-muted);
}
.login-page__country-search:-ms-input-placeholder {
  color: var(--text-muted);
}
.login-page__country-search::-ms-input-placeholder {
  color: var(--text-muted);
}
.login-page__country-search::placeholder {
  color: var(--text-muted);
}
.login-page__country-search:focus {
  outline: none;
  border-color: var(--color-primary);
}

.login-page__country-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.25rem;
  max-height: 220px;
  overflow-y: auto;
}

.login-page__country-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  text-align: left;
}
.login-page__country-item img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
.login-page__country-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-page__country-item:hover {
  color: var(--text-primary);
  background: var(--bg-base);
  border-color: var(--border-color);
}
.login-page__country-item[aria-selected=true] {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
}

.login-page__checkbox {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
  position: relative;
}
.login-page__checkbox:hover {
  border-color: var(--color-primary);
}
.login-page__checkbox:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
          box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
}
.login-page__checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.login-page__checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: translate(-50%, -55%) rotate(45deg);
          transform: translate(-50%, -55%) rotate(45deg);
}

.login-page__turnstile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 65px;
}

.login-page__submit {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
}

.login-page__message {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.login-page__message--error {
  color: var(--color-danger);
}
.login-page__message a,
.login-page__message button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}
.login-page__message a:hover,
.login-page__message button:hover {
  text-decoration: underline;
}

.main-content--messages-conversation {
  overflow-x: hidden;
  max-width: 100%;
}

.messages-page__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 1rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .messages-page__body {
    padding-inline: 1.5rem;
  }
}

.messages-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  min-height: 60vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1.5rem 1rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .messages-page {
    padding: 2rem 1.5rem;
  }
}
.messages-page--conversation {
  max-width: none;
  padding-inline: 0;
  overflow-x: hidden;
  min-height: 0;
}
@media (min-width: 992px) {
  .messages-page--conversation {
    padding-inline: 0;
  }
}

.messages-page__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 992px) {
  .messages-page__layout {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.messages-page--conversation .messages-page__layout {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.messages-page__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 720px;
}
@media (min-width: 992px) {
  .messages-page__main {
    max-width: none;
    min-width: 0;
  }
}

.messages-page--conversation .messages-page__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.messages-page__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}

.messages-page__head {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 1.5rem;
}
.messages-page__head--conversation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.messages-page__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.messages-page__verify-hint {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.messages-page__verify-hint i {
  margin-right: 0.25rem;
}

.messages-page__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-text);
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.messages-page__back:hover {
  background: var(--bg-elevated);
}

.messages-page__other.jpsnt-user .jpsnt-user__avatar {
  width: 40px;
  height: 40px;
}
.messages-page__other.jpsnt-user:hover .jpsnt-user__name {
  text-decoration: underline;
}

.messages-page__info-username.jpsnt-user .jpsnt-user__avatar {
  width: 48px;
  height: 48px;
}

.messages-page__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.messages-page__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--color-muted);
  font-size: 1rem;
}

.messages-page__other-name {
  font-weight: 600;
}

.messages-page__list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 200px;
}
.messages-page__list > [hidden] {
  display: none !important;
}

.messages-page__loading,
.messages-page__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 3rem;
  color: var(--color-muted);
  text-align: center;
}
.messages-page__loading i,
.messages-page__empty i {
  font-size: 2rem;
  opacity: 0.6;
}

.messages-page__empty-hint {
  font-size: 0.875rem;
  opacity: 0.8;
}

.messages-page__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.messages-page__item {
  display: block;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--color-text);
  text-decoration: none;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.messages-page__item:hover {
  background: var(--bg-elevated);
}

.messages-page__item-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}

.messages-page__item-user {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.messages-page__item-user .jpsnt-user__avatar {
  width: 48px;
  height: 48px;
}

.messages-page__item-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.messages-page__item-avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--color-muted);
  font-size: 1.25rem;
}

.messages-page__item-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.messages-page__item-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.messages-page__item-preview {
  font-size: 0.875rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-page__item-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.messages-page__item-unread {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border-radius: 10px;
}

.messages-page__thread {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 1rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.messages-page--conversation .messages-page__thread {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.messages-page__message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5rem;
}
.messages-page__message--own {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.messages-page__message--own .messages-page__msg-bubble {
  background: color-mix(in srgb, var(--color-accent) 55%, var(--bg-void));
  color: #fff;
}
.messages-page__message--own .messages-page__msg-time {
  color: rgba(255, 255, 255, 0.85);
}

.messages-page__msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.messages-page__msg-bubble {
  max-width: 75%;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
}

.messages-page__message--own .messages-page__msg-bubble {
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
}

.messages-page__msg-content {
  font-size: 0.9375rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.messages-page__msg-time {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.messages-page__info-toggle {
  display: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  margin-left: auto;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.messages-page__info-toggle:hover {
  color: var(--color-accent);
  background: var(--bg-elevated);
}
.messages-page__info-toggle.show-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 992px) {
  .messages-page__info-toggle.show-mobile {
    display: none;
  }
}

.messages-page__info {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  max-width: 280px;
  min-width: 0;
  position: sticky;
  top: calc(56px + 1rem);
}
@media (min-width: 992px) {
  .messages-page__info {
    top: calc(64px + 1rem);
  }
}

.messages-page__info-inner {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  overflow: hidden;
}

@media (max-width: 991px) {
  .messages-page__info {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: min(320px, 85vw);
    z-index: 401;
    -webkit-box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
            box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  }
  .messages-page__info.is-open {
    display: block;
  }
  .messages-page__info-inner {
    height: 100%;
    border-radius: 0;
    border-right: 1px solid var(--border-color);
  }
}
.messages-page__info-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.messages-page__info-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.messages-page__info-avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.messages-page__info-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.messages-page__info-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.messages-page__info-level {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: 600;
}

.messages-page__info-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.messages-page__info-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.messages-page__info-link:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
}
.messages-page__info-link--danger {
  color: var(--text-muted);
}
.messages-page__info-link--danger:hover {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.08);
}
.messages-page__info-link i {
  font-size: 0.875rem;
  opacity: 0.8;
}

.messages-page__info-divider {
  height: 1px;
  margin: 0.5rem 0;
  background: var(--border-subtle);
}

.messages-page__info-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 400;
  display: none;
  pointer-events: none;
}
.messages-page__info-backdrop.is-open {
  display: block;
  pointer-events: auto;
}

.messages-page__compose {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border-color);
}
.messages-page__compose--disabled {
  padding: 1rem;
  text-align: center;
}

.messages-page__compose-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5rem;
}

.messages-page__compose-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  resize: none;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}
.messages-page__compose-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.messages-page__compose-input::-webkit-input-placeholder {
  color: var(--color-muted);
}
.messages-page__compose-input::-moz-placeholder {
  color: var(--color-muted);
}
.messages-page__compose-input:-ms-input-placeholder {
  color: var(--color-muted);
}
.messages-page__compose-input::-ms-input-placeholder {
  color: var(--color-muted);
}
.messages-page__compose-input::placeholder {
  color: var(--color-muted);
}

.messages-page__compose-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
}

.search-page {
  padding: 2rem 1.5rem;
  min-height: 60vh;
}
@media (min-width: 768px) {
  .search-page {
    padding: 3rem 1.5rem;
  }
}

.search-page__container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.search-page__hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.search-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.search-page__title i {
  color: var(--color-accent);
}

.search-page__hero-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .search-page__hero-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.search-page__input-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
}
@media (min-width: 768px) {
  .search-page__input-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 200px;
  }
}

.search-page__input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

.search-page__input {
  width: 100%;
  padding: 1rem 1rem 1rem 2.5rem;
  font-size: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.search-page__input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.search-page__input::-moz-placeholder {
  color: var(--text-muted);
}
.search-page__input:-ms-input-placeholder {
  color: var(--text-muted);
}
.search-page__input::-ms-input-placeholder {
  color: var(--text-muted);
}
.search-page__input::placeholder {
  color: var(--text-muted);
}
.search-page__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.search-page__tabs {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .search-page__tabs {
    width: auto;
  }
}

.search-page__tab-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-page__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .search-page__tab {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: auto;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}
.search-page__tab {
  text-decoration: none;
  border-radius: 8px;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.search-page__tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.search-page__tab.is-active {
  color: var(--color-accent);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}
.search-page__tab i {
  font-size: 0.7rem;
}
@media (min-width: 768px) {
  .search-page__tab i {
    font-size: 0.75rem;
  }
}

.search-page__filters-accordion {
  position: relative;
  z-index: 100;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-elevated);
  overflow: visible;
}

.search-page__filters-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.search-page__filters-summary::-webkit-details-marker {
  display: none;
}
.search-page__filters-summary:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.search-page__filters-summary i:first-child {
  color: var(--color-accent);
  font-size: 0.875rem;
}

.search-page__filters-chevron {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--text-muted);
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}

.search-page__filters-accordion[open] .search-page__filters-chevron {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.search-page__filters-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  overflow: visible;
}

.search-page__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: visible;
}

.search-page__filter-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 180px;
          flex: 1 1 180px;
  overflow: visible;
}
@media (min-width: 768px) {
  .search-page__filter-group {
    min-width: 220px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

.search-page__filter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.search-page__filter-select {
  min-width: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .search-page__filter-select {
    min-width: 220px;
    width: auto;
  }
}

.search-page__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 576px) {
  .search-page__grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .search-page__grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767px) {
  .search-page__grid[data-results-type=hunters] {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.search-page__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  -webkit-transition: border-color 150ms ease, -webkit-transform 250ms ease;
  transition: border-color 150ms ease, -webkit-transform 250ms ease;
  transition: transform 250ms ease, border-color 150ms ease;
  transition: transform 250ms ease, border-color 150ms ease, -webkit-transform 250ms ease;
}
.search-page__card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: var(--border-glow);
}

.search-page__card--hunter {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem;
  min-height: 56px;
}
@media (max-width: 767px) {
  .search-page__card--hunter {
    padding: 1rem 1.5rem;
    gap: 1.5rem;
  }
}

.search-page__card-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 1;
  background: var(--bg-void);
  color: var(--text-muted);
  font-size: 2rem;
}

.search-page__card-body {
  padding: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.search-page__card-avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-void);
}
.search-page__card-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767px) {
  .search-page__grid[data-results-type=hunters] .search-page__card-avatar {
    width: 56px;
    height: 56px;
  }
}

.search-page__card--hunter .search-page__card-body {
  padding: 0;
  min-width: 0;
}

.search-page__user-block {
  font-size: 0.875rem;
}
@media (max-width: 767px) {
  .search-page__user-block {
    font-size: 0.9375rem;
  }
}

.search-page__empty[hidden],
.search-page__filters[hidden],
.search-page__grid[hidden],
.search-page__pagination[hidden] {
  display: none !important;
}

.search-page__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 280px;
  padding: 3rem;
}

.search-page__empty-inner {
  text-align: center;
  max-width: 320px;
}

.search-page__empty-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  opacity: 0.6;
}

.search-page__empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.search-page__empty-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.search-page__loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  min-height: 50vh;
  grid-column: 1/-1;
  color: var(--text-muted);
}

.search-page__loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  -webkit-animation: search-page-spin 0.8s linear infinite;
          animation: search-page-spin 0.8s linear infinite;
}

@-webkit-keyframes search-page-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes search-page-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.search-page__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
}

.search-page__page-info {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.browse-page {
  min-height: 60vh;
}

.browse-page__body {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-top: -6rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .browse-page__body {
    margin-top: -8rem;
    padding-inline: 1.5rem;
  }
}

.browse-page__container {
  margin-top: 2rem;
}

.browse-page__hero {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .browse-page__hero {
    min-height: 260px;
  }
}

.browse-page__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-void);
}

.browse-page__hero-overlay {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.browse-page__hero-pattern {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent) 0%, transparent 50%);
  opacity: 0.15;
}

.browse-page__hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.browse-page__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.browse-page__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
  .browse-page__title {
    font-size: 2.25rem;
  }
}

.browse-page__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
}

.browse-page__nav-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-radius: 8px;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.browse-page__nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
.browse-page__nav-link.is-active {
  color: #fff;
  background: var(--color-accent);
}

.browse-page__hero-strip {
  position: absolute;
  inset: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.browse-page__hero-thumb {
  display: block;
  overflow: hidden;
  background: var(--bg-void);
}
.browse-page__hero-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.browse-page__hero--screenshots .browse-page__hero-overlay {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.browse-page__filters-accordion {
  position: relative;
  z-index: 100;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-elevated);
  margin-bottom: 2rem;
  overflow: visible;
}

.browse-page__filters-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}
.browse-page__filters-summary::-webkit-details-marker {
  display: none;
}
.browse-page__filters-summary:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.browse-page__filters-summary i:first-child {
  color: var(--color-accent);
}

.browse-page__filters-chevron {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--text-muted);
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
}

.browse-page__filters-accordion[open] .browse-page__filters-chevron {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.browse-page__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
}

.browse-page__filter-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 180px;
          flex: 1 1 180px;
}

.browse-page__filter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.browse-page__filter-select {
  min-width: 140px;
}

.browse-page__results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.browse-page__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 576px) {
  .browse-page__grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .browse-page__grid {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}
.browse-page__grid[data-animate-initial] > .game-card, .browse-page__grid[data-animate-initial] > .trophy-card, .browse-page__grid[data-animate-initial] > .ss-card {
  opacity: 0;
}

.browse-page__grid--screenshots {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) {
  .browse-page__grid--screenshots {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .browse-page__grid--screenshots {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.browse-page__empty {
  text-align: center;
  padding: 4rem 1.5rem;
}

.browse-page__empty-inner {
  max-width: 320px;
  margin: 0 auto;
}

.browse-page__empty-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.browse-page__empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.browse-page__empty-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.browse-page__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.browse-page__page-info {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.browse-page__grid[hidden],
.browse-page__pagination[hidden],
.browse-page__empty[hidden] {
  display: none !important;
}

.hunters-page {
  min-height: 60vh;
}

.hunters-page__modules {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}

.hunters-page__hero-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
}
@media (min-width: 768px) {
  .hunters-page__hero-head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 1rem 2rem;
  }
}
.hunters-page__hero-head .browse-page__title {
  margin-bottom: 0;
}

.hunters-page__hero-text {
  min-width: 0;
}

.hunters-page__tabs {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hunters-page__shell {
  width: 100%;
}

.browse-page__container.hunters-page__shell--directory {
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .browse-page__container.hunters-page__shell--directory {
    margin-top: 1.5rem;
  }
}

.hunters-directory-intro {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.hunters-directory-intro::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.hunters-directory-intro:hover::before {
  opacity: 1;
}
.hunters-directory-intro {
  padding: 3rem 2rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.hunters-directory-intro__text {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.hunters-directory-intro__cta {
  margin-bottom: 0;
}

.hunters-directory {
  width: 100%;
}

.hunters-directory__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
}
@media (min-width: 768px) {
  .hunters-directory__intro {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem 2rem;
  }
}

.hunters-directory__intro-lede {
  margin: 0;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.hunters-directory__intro-search {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}

.hunters-directory__inline-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.hunters-directory__inline-link:hover {
  text-decoration: underline;
}
.hunters-directory__inline-link i {
  font-size: 0.65rem;
  margin-left: 0.15rem;
}

.hunters-directory__filters {
  margin-bottom: 1.5rem;
}

.hunters-directory__filters-grid {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
@media (min-width: 576px) {
  .hunters-directory__filters-grid {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .hunters-directory__filters-grid {
    -ms-grid-columns: (minmax(0, 1fr))[5];
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .hunters-directory__field--submit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

.hunters-directory__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.hunters-directory__select {
  width: 100%;
}

.hunters-directory__apply {
  width: 100%;
}
@media (min-width: 992px) {
  .hunters-directory__apply {
    width: auto;
    min-width: 8rem;
  }
}

.hunters-directory__summary {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.hunters-directory__empty {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.hunters-directory__empty::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.hunters-directory__empty:hover::before {
  opacity: 1;
}
.hunters-directory__empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.hunters-directory__empty-text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.hunters-directory__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.hunters-directory__row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2.5rem 1rem minmax(0, 1fr) 1rem auto;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
}
.hunters-directory__row:last-child {
  border-bottom: none;
}

.hunters-directory__rank {
  font-size: 1.125rem;
  font-weight: 800;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
  line-height: 1;
  opacity: 0.7;
}

.hunters-directory__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  min-width: 0;
}

.hunters-directory__avatar-link {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  text-decoration: none;
  border-radius: 50%;
  overflow: hidden;
  width: 48px;
  height: 48px;
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, var(--border-color));
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, var(--border-color));
}

.hunters-directory__avatar {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hunters-directory__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  font-size: 1.125rem;
}

.hunters-directory__identity {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.hunters-directory__user.jpsnt-user--inline {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.hunters-directory__user.jpsnt-user--inline:hover .jpsnt-user__name, .hunters-directory__user.jpsnt-user--inline:focus-visible .jpsnt-user__name {
  color: var(--color-accent);
}
.hunters-directory__user.jpsnt-user--inline .jpsnt-user__name {
  font-weight: 700;
  color: var(--text-primary);
}
.hunters-directory__user.jpsnt-user--inline .jpsnt-user__level {
  font-size: 0.75rem;
}

.hunters-directory__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.hunters-directory__xp {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
}

.hunters-directory__flag img {
  border-radius: 2px;
  vertical-align: middle;
}

.hunters-directory__actions {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hunters-directory__follow {
  white-space: nowrap;
}

.hunters-directory__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.hunters-directory__page-info {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.hunters-directory__page-btn--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.hunters-stats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .hunters-stats {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.hunters-stats__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.hunters-stats__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.hunters-stats__card:hover::before {
  opacity: 1;
}
.hunters-stats__card {
  padding: 1.5rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.25rem;
  -webkit-transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
}
.hunters-stats__card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}

.hunters-stats__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--step-icon-bg);
  margin-bottom: 0.25rem;
}
.hunters-stats__icon i {
  font-size: 1rem;
  color: var(--accent);
}

.hunters-stats__value {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-primary);
  line-height: 1;
}

.hunters-stats__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@-webkit-keyframes hunters-marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes hunters-marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.hunters-rising__header {
  margin-bottom: 1.5rem;
}

.hunters-rising__header-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.hunters-rising__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.hunters-rising__title {
  color: var(--text-primary);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.hunters-rising__marquee {
  overflow: hidden;
  mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(6%, black), color-stop(94%, black), to(transparent));
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(6%, black), color-stop(94%, black), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.hunters-rising__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: hunters-marquee 40s linear infinite;
          animation: hunters-marquee 40s linear infinite;
}
.hunters-rising__track:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.hunters-rising__set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
  padding-top: 4px;
  padding-bottom: 4px;
}

.hunters-rising__card {
  --hr-banner-h: 3.25rem;
  --hr-avatar: 3rem;
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 158px;
          flex: 0 0 158px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 10px 32px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 10px 32px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  -webkit-transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease;
  transition: transform 250ms ease, box-shadow 250ms ease, -webkit-transform 250ms ease, -webkit-box-shadow 250ms ease;
}
.hunters-rising__card:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .hunters-rising__card {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 168px;
            flex: 0 0 168px;
  }
}

.hunters-rising__top {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hunters-rising__banner {
  position: relative;
  height: var(--hr-banner-h);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 12px 12px 0 0;
}
.hunters-rising__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(color-mix(in srgb, var(--bg-surface) 35%, transparent)));
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg-surface) 35%, transparent) 100%);
  pointer-events: none;
}
.hunters-rising__banner--fallback {
  background-image: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 28%, var(--bg-elevated)) 0%, color-mix(in srgb, var(--color-accent) 18%, var(--bg-surface)) 100%);
}
.hunters-rising__banner--fallback::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), to(color-mix(in srgb, var(--bg-surface) 55%, transparent)));
  background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg-surface) 55%, transparent) 100%);
}

.hunters-rising__avatar-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: var(--hr-avatar);
  height: var(--hr-avatar);
  padding: 3px;
  border-radius: 50%;
  background: var(--bg-surface);
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--border-color)), 0 8px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--border-color)), 0 8px 20px rgba(0, 0, 0, 0.12);
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hunters-rising__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hunters-rising__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.125rem;
}

.hunters-rising__online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--bg-surface);
  z-index: 1;
}

.hunters-rising__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: calc(var(--hr-avatar) / 2 + 0.25rem) 0.5rem 0.5rem;
  min-width: 0;
}

.hunters-rising__user.jpsnt-user--compact {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2px;
  width: 100%;
}
.hunters-rising__user.jpsnt-user--compact .jpsnt-user__name {
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}
.hunters-rising__user.jpsnt-user--compact .jpsnt-user__level {
  font-size: 0.6875rem;
}

.hunters-rising__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.hunters-rising__flag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hunters-rising__flag img {
  border-radius: 2px;
}

.hunters-rising__xp {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.hunters-play {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 3rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.hunters-play__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.hunters-play__backdrop-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 0.55s ease;
  transition: opacity 0.55s ease;
}
.hunters-play__backdrop-layer.is-active {
  opacity: 1;
  z-index: 1;
}
.hunters-play__backdrop-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.38)), color-stop(42%, rgba(0, 0, 0, 0.52)), to(color-mix(in srgb, var(--section-bg-alt) 94%, transparent)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.52) 42%, color-mix(in srgb, var(--section-bg-alt) 94%, transparent) 100%);
  pointer-events: none;
}
.hunters-play__backdrop-layer--fallback {
  background-image: none !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 24%, var(--bg-elevated)) 0%, color-mix(in srgb, var(--color-accent) 16%, var(--bg-surface)) 100%);
}

.hunters-play__rotor {
  position: relative;
  z-index: 1;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  -ms-grid-rows: minmax(0, auto);
  grid-template-rows: minmax(0, auto);
}

.hunters-play__rotor > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.hunters-play__slide {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-transition: opacity 0.55s ease;
  transition: opacity 0.55s ease;
}
.hunters-play__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hunters-play__backdrop-layer,
  .hunters-play__slide {
    -webkit-transition: none;
    transition: none;
  }
}
.hunters-play__header {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  max-width: 36rem;
}

.hunters-play__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.hunters-play__title {
  color: var(--text-primary);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom: 0.5rem;
}

.hunters-play__lede {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.hunters-play__grid {
  position: relative;
  display: -ms-grid;
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .hunters-play__grid {
    -ms-grid-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
    grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.hunters-play__featured {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .hunters-play__featured {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 2rem;
  }
}

.hunters-play__featured-cover-link {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 100%;
  max-width: 200px;
  margin-inline: auto;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  -webkit-transition: -webkit-box-shadow 250ms ease;
  transition: -webkit-box-shadow 250ms ease;
  transition: box-shadow 250ms ease;
  transition: box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.hunters-play__featured-cover-link:hover .hunters-play__featured-cover, .hunters-play__featured-cover-link:focus-visible .hunters-play__featured-cover {
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  .hunters-play__featured-cover-link {
    margin-inline: 0;
    max-width: 220px;
  }
}

.hunters-play__featured-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.hunters-play__featured-rank {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  min-width: 2.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-void) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  font-size: 1.125rem;
  font-weight: 800;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-primary);
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.hunters-play__featured-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hunters-play__featured-cover-ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  font-size: 2.5rem;
}

.hunters-play__featured-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.hunters-play__featured-name {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.2;
}
.hunters-play__featured-name:hover {
  color: var(--color-accent);
}

.hunters-play__platforms {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hunters-play__platform-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.hunters-play__trophy-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
}

.hunters-play__trophy-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
}
.hunters-play__trophy-pill i {
  font-size: 0.625rem;
}
.hunters-play__trophy-pill--plat i {
  color: #7ab7e8;
}
.hunters-play__trophy-pill--gold i {
  color: #ffd700;
}
.hunters-play__trophy-pill--silver i {
  color: #c0c0c0;
}
.hunters-play__trophy-pill--bronze i {
  color: #cd7f32;
}

.hunters-play__social {
  padding-top: 0.25rem;
}

.hunters-play__stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.hunters-play__stack-face {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  margin-left: -12px;
  overflow: hidden;
  background: var(--bg-surface);
  z-index: 1;
  text-decoration: none;
  -webkit-transition: z-index 0s, -webkit-transform 150ms ease;
  transition: z-index 0s, -webkit-transform 150ms ease;
  transition: transform 150ms ease, z-index 0s;
  transition: transform 150ms ease, z-index 0s, -webkit-transform 150ms ease;
}
.hunters-play__stack-face:first-child {
  margin-left: 0;
}
.hunters-play__stack-face:nth-child(1) {
  z-index: 1;
}
.hunters-play__stack-face:nth-child(2) {
  z-index: 2;
}
.hunters-play__stack-face:nth-child(3) {
  z-index: 3;
}
.hunters-play__stack-face:nth-child(4) {
  z-index: 4;
}
.hunters-play__stack-face:nth-child(5) {
  z-index: 5;
}
.hunters-play__stack-face:nth-child(6) {
  z-index: 6;
}
.hunters-play__stack-face:nth-child(7) {
  z-index: 7;
}
.hunters-play__stack-face:nth-child(8) {
  z-index: 8;
}
.hunters-play__stack-face:hover {
  -webkit-transform: translateY(-3px) scale(1.05);
          transform: translateY(-3px) scale(1.05);
  z-index: 10;
}
.hunters-play__stack-face img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hunters-play__stack--sm .hunters-play__stack-face {
  width: 30px;
  height: 30px;
  margin-left: -9px;
  border-width: 2px;
}

.hunters-play__stack-face-ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.hunters-play__stack-more {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 40px;
  height: 40px;
  margin-left: -12px;
  border-radius: 50%;
  border: 2px dashed var(--border-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--color-accent);
  background: var(--bg-surface);
  z-index: 6;
}

.hunters-play__stack--sm .hunters-play__stack-more {
  min-width: 30px;
  height: 30px;
  margin-left: -9px;
  font-size: 0.625rem;
}

.hunters-play__count-line {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.hunters-play__chart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.hunters-play__chart-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2rem 1rem 44px 1rem 1fr;
  grid-template-columns: 2rem 44px 1fr;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
}
.hunters-play__chart-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.hunters-play__chart-row:first-child {
  padding-top: 0;
}

.hunters-play__chart-rank {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-muted);
  line-height: 1;
  opacity: 0.65;
}

.hunters-play__chart-thumb {
  display: block;
  width: 44px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-shadow: var(--shadow-sm);
          box-shadow: var(--shadow-sm);
}
.hunters-play__chart-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hunters-play__chart-thumb-ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.hunters-play__chart-main {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.hunters-play__chart-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunters-play__chart-name:hover {
  color: var(--color-accent);
}

.hunters-play__chart-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.hunters-play__chart-hunters {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.hunters-play__foot {
  position: relative;
  z-index: 1;
  margin: 2rem 0 0;
  text-align: center;
}
.hunters-play__foot a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.hunters-play__foot a:hover {
  color: var(--color-accent);
}
.hunters-play__foot a i {
  font-size: 0.625rem;
}

.hunters-active {
  background: var(--section-bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 3rem 1.5rem;
  position: relative;
}

.hunters-active__head-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.hunters-active__header {
  margin-bottom: 0;
  max-width: 36rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 12rem;
          flex: 1 1 12rem;
  min-width: 0;
}

.hunters-active__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.hunters-active__title {
  color: var(--text-primary);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom: 0.5rem;
}

.hunters-active__lede {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.hunters-active__pips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-top: 0.125rem;
}

.hunters-active__pip {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  -webkit-transition: background 250ms ease, -webkit-transform 250ms ease;
  transition: background 250ms ease, -webkit-transform 250ms ease;
  transition: background 250ms ease, transform 250ms ease;
  transition: background 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.hunters-active__pip.is-active {
  background: var(--color-accent);
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}
.hunters-active__pip:hover:not(.is-active) {
  background: var(--text-muted);
}
.hunters-active__pip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.hunters-active__carousel {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
@media (min-width: 768px) {
  .hunters-active__carousel {
    min-height: 280px;
  }
}
@media (min-width: 992px) {
  .hunters-active__carousel {
    min-height: 260px;
  }
}

.hunters-active__page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.hunters-active__page.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.hunters-active__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .hunters-active__grid {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .hunters-active__grid {
    -ms-grid-columns: (minmax(0, 1fr))[3];
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hunters-active__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.hunters-active__card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--border-color));
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.hunters-active__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 767px) {
  .hunters-active__inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.hunters-active__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 10rem;
          flex: 1 1 10rem;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.hunters-active__avatar {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card-hover);
  -webkit-box-shadow: 0 0 0 2px var(--border-color);
          box-shadow: 0 0 0 2px var(--border-color);
}
.hunters-active__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hunters-active__avatar-ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: 1.125rem;
}

.hunters-active__online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00e576;
  border: 2px solid var(--bg-surface);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.hunters-active__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.2rem;
}

.hunters-active__name.jpsnt-user--inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.hunters-active__name.jpsnt-user--inline .jpsnt-user__name {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.hunters-active__main:hover .hunters-active__name.jpsnt-user--inline {
  color: var(--color-accent);
}
.hunters-active__main:hover .hunters-active__name.jpsnt-user--inline .jpsnt-user__name {
  color: inherit;
}

.hunters-active__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}

.hunters-active__sep {
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.hunters-active__level {
  font-weight: 600;
  color: var(--text-muted);
}

.hunters-active__when {
  font-weight: 500;
  color: var(--text-muted);
}

.hunters-active__flag-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 0;
}

.hunters-active__toolbar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}
@media (max-width: 767px) {
  .hunters-active__toolbar {
    width: 100%;
    margin-left: 0;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border-color);
  }
}

.hunters-active__toolbar .hunters-active__follow {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
  gap: 0.35rem;
}
.hunters-active__toolbar .hunters-active__follow i {
  font-size: 0.75rem;
  opacity: 0.9;
}
.hunters-active__toolbar .hunters-active__follow:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border-color));
  color: var(--text-primary);
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
}
.hunters-active__toolbar .hunters-active__follow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.hunters-active__toolbar .hunters-active__follow.profile-follow-btn--following {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--border-color));
  color: var(--color-accent);
}

.hunters-active__msg-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1;
  color: #fff;
  background: var(--color-primary);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-transition: background 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
}
.hunters-active__msg-icon:hover {
  background: var(--color-primary-hover);
  -webkit-box-shadow: var(--shadow-glow);
          box-shadow: var(--shadow-glow);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.hunters-active__msg-icon:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.hunters-active__msg-icon:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.hunters-new {
  position: relative;
  border-radius: 12px;
  padding: 3rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--border-color));
  background: radial-gradient(120% 80% at 10% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 55%), radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 50%), var(--section-bg-alt);
  overflow: visible;
}

.hunters-new__head {
  margin-bottom: 2rem;
  max-width: 38rem;
}

.hunters-new__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.hunters-new__title {
  color: var(--text-primary);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.hunters-new__lede {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hunters-new__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  overflow: visible;
}
@media (min-width: 576px) {
  .hunters-new__grid {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .hunters-new__grid {
    -ms-grid-columns: (minmax(0, 1fr))[4];
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hunters-new__cell {
  margin: 0;
  min-width: 0;
  overflow: visible;
}

.hunters-new__card {
  --hn-banner-h: 5rem;
  --hn-avatar: 4.5rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  overflow: visible;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--border-color));
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 10px 32px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 10px 32px rgba(0, 0, 0, 0.1);
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
}
.hunters-new__card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--border-color));
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 16px 40px rgba(0, 0, 0, 0.14);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 16px 40px rgba(0, 0, 0, 0.14);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

.hunters-new__card-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  text-decoration: none;
  color: inherit;
}
.hunters-new__card-link:only-child {
  border-radius: 12px;
}
.hunters-new__card-link:hover {
  color: inherit;
}
.hunters-new__card-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.hunters-new__top {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hunters-new__banner {
  position: relative;
  height: var(--hn-banner-h);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 12px 12px 0 0;
}
.hunters-new__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(color-mix(in srgb, var(--bg-surface) 35%, transparent)));
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg-surface) 35%, transparent) 100%);
  pointer-events: none;
}
.hunters-new__banner--fallback {
  background-image: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 28%, var(--bg-elevated)) 0%, color-mix(in srgb, var(--color-accent) 18%, var(--bg-surface)) 100%);
}
.hunters-new__banner--fallback::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), to(color-mix(in srgb, var(--bg-surface) 55%, transparent)));
  background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg-surface) 55%, transparent) 100%);
}

.hunters-new__avatar-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: var(--hn-avatar);
  height: var(--hn-avatar);
  padding: 3px;
  border-radius: 50%;
  background: var(--bg-surface);
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--border-color)), 0 8px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--border-color)), 0 8px 20px rgba(0, 0, 0, 0.12);
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hunters-new__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hunters-new__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.hunters-new__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: calc(var(--hn-avatar) / 2 + 0.5rem) 1rem 1rem;
  min-width: 0;
}

.hunters-new__user.jpsnt-user--compact {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  width: 100%;
}
.hunters-new__user.jpsnt-user--compact .jpsnt-user__name {
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}
.hunters-new__user.jpsnt-user--compact .jpsnt-user__level {
  font-size: 0.75rem;
}

.hunters-new__joined {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.hunters-new__toolbar {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  padding: 0 1rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hunters-new__follow {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.hunters-new__follow:hover {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border-color));
}
.hunters-new__follow.profile-follow-btn--following {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--border-color));
  color: var(--color-accent);
}

.hunters-suggested {
  position: relative;
  border-radius: 12px;
  padding: 3rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border-color));
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 55%), radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 50%), var(--section-bg-alt);
  overflow: visible;
}

.hunters-suggested__head {
  margin-bottom: 2rem;
  max-width: 38rem;
}

.hunters-suggested__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.hunters-suggested__title {
  color: var(--text-primary);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.hunters-suggested__lede {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hunters-suggested__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  overflow: visible;
}
@media (min-width: 576px) {
  .hunters-suggested__grid {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .hunters-suggested__grid {
    -ms-grid-columns: (minmax(0, 1fr))[3];
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hunters-suggested__cell {
  margin: 0;
  min-width: 0;
  overflow: visible;
}

.hunters-suggested__card {
  --hs-banner-h: 5rem;
  --hs-avatar: 4.5rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  overflow: visible;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 10px 32px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 10px 32px rgba(0, 0, 0, 0.1);
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
  -webkit-transform-origin: center 45%;
          transform-origin: center 45%;
}
.hunters-suggested__card:hover:not(.hunters-suggested__card--nudging) {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.08), 0 14px 28px rgba(0, 0, 0, 0.12), 0 0 24px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 48px color-mix(in srgb, var(--color-accent) 35%, transparent);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.08), 0 14px 28px rgba(0, 0, 0, 0.12), 0 0 24px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 48px color-mix(in srgb, var(--color-accent) 35%, transparent);
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
}

.hunters-suggested__card.hunters-suggested__card--nudging {
  z-index: 2;
  -webkit-transition: none;
  transition: none;
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.08), 0 14px 28px rgba(0, 0, 0, 0.12), 0 0 24px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 48px color-mix(in srgb, var(--color-accent) 35%, transparent);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.08), 0 14px 28px rgba(0, 0, 0, 0.12), 0 0 24px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 48px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.hunters-suggested__card-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  text-decoration: none;
  color: inherit;
}
.hunters-suggested__card-link:only-child {
  border-radius: 12px;
}
.hunters-suggested__card-link:hover {
  color: inherit;
}
.hunters-suggested__card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hunters-suggested__top {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hunters-suggested__banner {
  position: relative;
  height: var(--hs-banner-h);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 12px 12px 0 0;
}
.hunters-suggested__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(color-mix(in srgb, var(--bg-surface) 35%, transparent)));
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg-surface) 35%, transparent) 100%);
  pointer-events: none;
}
.hunters-suggested__banner--fallback {
  background-image: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 28%, var(--bg-elevated)) 0%, color-mix(in srgb, var(--color-accent) 18%, var(--bg-surface)) 100%);
}
.hunters-suggested__banner--fallback::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), to(color-mix(in srgb, var(--bg-surface) 55%, transparent)));
  background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg-surface) 55%, transparent) 100%);
}

.hunters-suggested__avatar-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: var(--hs-avatar);
  height: var(--hs-avatar);
  padding: 3px;
  border-radius: 50%;
  background: var(--bg-surface);
  -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--border-color)), 0 8px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--border-color)), 0 8px 20px rgba(0, 0, 0, 0.12);
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hunters-suggested__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hunters-suggested__avatar--ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.hunters-suggested__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: calc(var(--hs-avatar) / 2 + 0.5rem) 1rem 1rem;
  min-width: 0;
}

.hunters-suggested__user.jpsnt-user--compact {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
  width: 100%;
}
.hunters-suggested__user.jpsnt-user--compact .jpsnt-user__name {
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}
.hunters-suggested__user.jpsnt-user--compact .jpsnt-user__level {
  font-size: 0.75rem;
}

.hunters-suggested__why {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.hunters-suggested__toolbar {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  padding: 0 1rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hunters-suggested__follow {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.hunters-suggested__follow:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border-color));
}
.hunters-suggested__follow.profile-follow-btn--following {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-color));
  color: var(--color-primary);
}

.leaderboard-page--dummy .browse-page__body {
  padding-top: 2.5rem;
}

.leaderboard-page__dummy-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: -webkit-gradient(linear, left top, right top, from(#7c3aed), to(#a855f7));
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.leaderboard-page__dummy-banner code {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.leaderboard-page__pagination .leaderboard-page__page-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.leaderboard-page.browse-page {
  min-height: 60vh;
}

.leaderboard-page .leaderboard.leaderboard--full {
  background: transparent;
  padding: 0;
  margin: 0;
}
.leaderboard-page .leaderboard.leaderboard--full .leaderboard__inner {
  padding: 0;
  max-width: none;
}

.leaderboard-page__month-form,
.leaderboard-page__country-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 100%;
}

.leaderboard-page__month-select,
.leaderboard-page__country-select {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  max-width: 22rem;
}

.leaderboard-page__month-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.leaderboard-page__toolbar {
  margin-top: 2rem;
}

.leaderboard-page__page-summary {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 1rem;
}

.leaderboard-page__note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.leaderboard-page__content.leaderboard {
  margin: 0;
  padding: 0;
  background: transparent;
}

.leaderboard-page__podium-wrap {
  margin-bottom: 2rem;
}

.leaderboard-page__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

.leaderboard-page__empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 4rem 0;
}

.leaderboard-page__list-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.pc-hero {
  position: relative;
  min-height: 60vh;
  min-height: 60dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .pc-hero {
    min-height: 55vh;
  }
}

.pc-hero__background {
  position: absolute;
  inset: -2rem;
  z-index: 0;
  overflow: hidden;
}

.pc-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-void);
  opacity: 0;
  -webkit-transition: opacity 1.2s ease-in-out;
  transition: opacity 1.2s ease-in-out;
}
.pc-hero__slide.is-active {
  opacity: 1;
}

.pc-hero__overlay--platinum {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 10, 10, 0.3)), color-stop(40%, rgba(10, 10, 10, 0.7)), to(rgba(10, 10, 10, 0.92)));
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.7) 40%, rgba(10, 10, 10, 0.92) 100%);
  pointer-events: none;
}

.pc-hero__caption {
  position: absolute;
  bottom: 1.5rem;
  left: 2rem;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--hero-text-muted);
  letter-spacing: 0.03em;
  text-shadow: var(--hero-text-shadow);
}
.pc-hero__caption i {
  font-size: 0.5625rem;
  color: #7ab7e8;
}
@media (min-width: 768px) {
  .pc-hero__caption {
    bottom: 2rem;
    left: 3rem;
  }
}

.pc-hero__content {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  width: 100%;
  max-width: min(700px, 100%);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.pc-hero__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pc-hero__nav-link {
  padding: 0.25rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hero-text-muted);
  text-decoration: none;
  border-radius: 8px;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.pc-hero__nav-link:hover {
  color: var(--hero-text);
  background: rgba(255, 255, 255, 0.06);
}
.pc-hero__nav-link.is-active {
  color: #7ab7e8;
  background: rgba(122, 183, 232, 0.15);
  border: 1px solid rgba(122, 183, 232, 0.3);
}

.pc-hero__badge-wrap {
  margin-bottom: 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.pc-hero__founder-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hero-text);
  background: rgba(245, 166, 35, 0.2);
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: 9999px;
  text-shadow: none;
}
.pc-hero__founder-pill i {
  color: #f5a623;
}

.pc-hero__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #000;
  background: #7ab7e8;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 20px rgba(122, 183, 232, 0.25);
          box-shadow: 0 0 20px rgba(122, 183, 232, 0.25);
}

.pc-hero__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--hero-text);
  text-shadow: var(--hero-text-shadow);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.pc-hero__tagline {
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  color: var(--hero-text-sub);
  text-shadow: var(--hero-text-shadow);
  margin: 0 0 1rem;
}

.pc-hero__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.pc-hero__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
.pc-hero__btn--primary {
  background: #7ab7e8;
  color: #000;
}
.pc-hero__btn--primary:hover {
  background: rgb(156.7846153846, 201.8307692308, 238.0153846154);
  -webkit-box-shadow: 0 0 24px rgba(122, 183, 232, 0.25);
          box-shadow: 0 0 24px rgba(122, 183, 232, 0.25);
}
.pc-hero__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hero-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}
.pc-hero__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}
.pc-hero__btn--disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.pc-hero__member-note {
  margin: 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  color: var(--hero-text-muted);
  line-height: 1.45;
}

.pc-hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--section-bg)));
  background: linear-gradient(to bottom, transparent, var(--section-bg));
  z-index: 2;
  pointer-events: none;
}

.pc-section {
  background: var(--section-bg);
  padding: 6rem 1.5rem;
  position: relative;
}

.pc-section__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.pc-section__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7ab7e8;
  margin-bottom: 0.5rem;
}

.pc-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 3rem;
}

.pc-section__lead {
  margin: -1.5rem 0 2rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pc-section--pricing .pc-section__title {
  margin-bottom: 0.5rem;
}

.pc-section--pricing .pc-section__lead {
  margin-top: 0;
  margin-bottom: 2rem;
}

.pc-section--pricing .pc-pricing {
  margin-top: 1rem;
}

.pc-section__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #7ab7e8;
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.pc-section__link:hover {
  color: rgb(174.1769230769, 211.2461538462, 241.0230769231);
}

.pc-section__cta {
  text-align: center;
  margin-top: 3rem;
}

.pc-promo-banner {
  background: -webkit-gradient(linear, left top, right top, from(rgba(122, 183, 232, 0.12)), color-stop(50%, rgba(245, 166, 35, 0.1)), to(rgba(122, 183, 232, 0.12)));
  background: linear-gradient(90deg, rgba(122, 183, 232, 0.12) 0%, rgba(245, 166, 35, 0.1) 50%, rgba(122, 183, 232, 0.12) 100%);
  border-bottom: 1px solid rgba(122, 183, 232, 0.25);
  padding: 1.5rem 1.5rem;
}

.pc-promo-banner--compact {
  padding: 1rem 1.5rem;
}
.pc-promo-banner--compact .pc-promo-banner__text {
  margin: 0;
  font-size: 0.875rem;
}
.pc-promo-banner--compact a {
  color: #7ab7e8;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pc-promo-banner__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pc-promo-banner__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a0a0a;
  background: linear-gradient(135deg, rgb(148.0884615385, 197.1230769231, 236.5115384615), #7ab7e8);
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 12px rgba(122, 183, 232, 0.25);
          box-shadow: 0 2px 12px rgba(122, 183, 232, 0.25);
}

.pc-promo-banner__text {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
}
.pc-promo-banner__text strong {
  color: #7ab7e8;
  font-weight: 700;
}

.pc-promo-banner__sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.pc-promo-banner__strike {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  opacity: 0.9;
}

.pc-pricing {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .pc-pricing {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.pc-pricing__card {
  position: relative;
  padding: 3rem;
  padding-top: 4rem;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease;
}
.pc-pricing__card:hover {
  border-color: var(--border-subtle);
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}
.pc-pricing__card--featured {
  border-color: rgba(122, 183, 232, 0.4);
  -webkit-box-shadow: 0 0 0 1px rgba(122, 183, 232, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4);
          box-shadow: 0 0 0 1px rgba(122, 183, 232, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.pc-pricing__card--featured:hover {
  -webkit-box-shadow: 0 0 24px rgba(122, 183, 232, 0.25), 0 8px 32px rgba(0, 0, 0, 0.4);
          box-shadow: 0 0 24px rgba(122, 183, 232, 0.25), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.pc-pricing__card--featured .pc-pricing__deal {
  margin-top: 1.5rem;
}

.pc-pricing__deal {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 2px 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f5a623;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 4px;
}
.pc-pricing__deal--accent {
  color: #0a0a0a;
  background: rgba(122, 183, 232, 0.35);
  border-color: rgba(122, 183, 232, 0.5);
}

.pc-pricing__price-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2px;
  margin-bottom: 0.25rem;
}

.pc-pricing__was {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.pc-pricing__legal {
  margin: 2rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 42rem;
}

.pc-pricing__legal sup {
  font-size: 0.65em;
}

.pc-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0.25rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #7ab7e8;
  color: #000;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pc-pricing__plan {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.pc-pricing__price {
  font-size: 2.25rem;
  font-weight: 700;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: var(--text-primary);
  margin: 0;
}
.pc-pricing__price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.pc-pricing__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0 0 2rem;
}

.pc-pricing__btn {
  display: block;
  width: 100%;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
.pc-pricing__btn--primary {
  background: #7ab7e8;
  color: #000;
}
.pc-pricing__btn--primary:hover {
  background: rgb(156.7846153846, 201.8307692308, 238.0153846154);
  -webkit-box-shadow: 0 0 20px rgba(122, 183, 232, 0.25);
          box-shadow: 0 0 20px rgba(122, 183, 232, 0.25);
}
.pc-pricing__btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.pc-pricing__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-subtle);
}
.pc-pricing__btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.pc-benefits-teaser {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .pc-benefits-teaser {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}

.pc-benefits-teaser__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.pc-benefits-teaser__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(122, 183, 232, 0.12);
  border: 1px solid rgba(122, 183, 232, 0.2);
}
.pc-benefits-teaser__icon i {
  font-size: 1.25rem;
  color: #7ab7e8;
}

.pc-benefits-teaser__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.pc-comparison {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.pc-comparison__row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 48px 1rem 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: 48px 1fr 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-elevated);
}
.pc-comparison__row:last-child {
  border-bottom: none;
}
.pc-comparison__row--header {
  background: var(--bg-surface);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.pc-comparison__row--header .pc-comparison__platinum {
  color: #7ab7e8;
}
@media (max-width: 768px) {
  .pc-comparison__row {
    -ms-grid-columns: 40px 1fr 1fr 1fr;
    grid-template-columns: 40px 1fr 1fr 1fr;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
  .pc-comparison__row .pc-comparison__free,
  .pc-comparison__row .pc-comparison__platinum {
    text-align: right;
  }
}

.pc-comparison__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(122, 183, 232, 0.1);
}
.pc-comparison__icon i {
  font-size: 1rem;
  color: #7ab7e8;
}
.pc-comparison__icon--empty {
  background: transparent;
}

.pc-comparison__label {
  font-weight: 500;
  color: var(--text-primary);
}

.pc-comparison__free {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.pc-comparison__platinum {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #7ab7e8;
}

.news-page--single {
  padding-bottom: 0;
}

.news-page__hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  max-height: 55vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .news-page__hero {
    min-height: 48vh;
    max-height: 60vh;
  }
}

.news-page__hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--bg-void);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.news-page__hero-fade {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.news-page__body--single {
  position: relative;
  z-index: 1;
  margin-top: -8rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .news-page__body--single {
    margin-top: -10rem;
    padding-bottom: 4rem;
  }
}

.news-page--no-hero .news-page__body--single {
  margin-top: 0;
  padding-top: 1.5rem;
}

.news-page__hero-head .news-page__hero-tagline {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.news-page__shell {
  margin-top: 1rem;
}

.news-page__container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 960px;
  margin-inline: auto;
}

.news-page__single-shell {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .news-page__single-shell {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 992px) {
  .news-page__single-shell--aside {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 3rem minmax(260px, 320px);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 3rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.news-page__main {
  min-width: 0;
}
.news-page__main .jpsnt-engage {
  width: 100%;
  max-width: 45rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1rem 1rem;
}

.news-page__aside {
  margin-top: 3rem;
}
@media (min-width: 992px) {
  .news-page__aside {
    margin-top: 0;
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
    position: sticky;
    top: calc(64px + 1rem);
  }
}

.news-aside {
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.news-aside__title {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.news-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.news-aside__link {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 72px 0.5rem minmax(0, 1fr);
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.5rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  text-decoration: none;
  color: inherit;
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: 8px;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.news-aside__link:hover {
  background: var(--bg-elevated);
}
.news-aside__link:hover .news-aside__headline {
  color: var(--color-accent);
}

.news-aside__thumb {
  width: 72px;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.news-aside__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.news-aside__thumb--placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: linear-gradient(155deg, var(--color-accent-muted) 0%, var(--bg-elevated) 55%, var(--bg-void) 100%);
}
.news-aside__thumb--placeholder i {
  font-size: 1.25rem;
  color: var(--color-accent);
  opacity: 0.7;
}

.news-aside__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.news-aside__date {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.news-aside__headline {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}

.news-aside__all {
  margin-top: 1.5rem;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.news-page__comments-wrap {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
  padding: 0;
}
.news-page__comments-wrap .jpsnt-comments {
  margin-top: 0;
  padding-top: 1.5rem;
  padding-inline: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.news-page__feed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3rem;
}

.news-page__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .news-page__grid {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .news-page__grid {
    -ms-grid-columns: (minmax(0, 1fr))[3];
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.news-page__grid-item {
  margin: 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.news-page__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 4rem 1rem;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
}

.news-page__pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.news-page__pager-status {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 0.5rem;
}

.news-page__comments-muted {
  max-width: 45rem;
  margin: 3rem auto 0 0;
  padding: 0 1rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-align: left;
}

.news-card__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news-card--lead {
  display: -ms-grid;
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  -webkit-transition: -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: box-shadow 150ms ease, transform 150ms ease;
  transition: box-shadow 150ms ease, transform 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
}
@media (min-width: 768px) {
  .news-card--lead {
    -ms-grid-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    min-height: 280px;
  }
}
.news-card--lead:hover {
  -webkit-box-shadow: 0 20px 56px rgba(0, 0, 0, 0.38);
          box-shadow: 0 20px 56px rgba(0, 0, 0, 0.38);
}
.news-card--lead:hover .news-card__title a {
  color: var(--color-accent);
}
.news-card--lead .news-card__media-link {
  min-height: 200px;
}
@media (min-width: 768px) {
  .news-card--lead .news-card__media-link {
    min-height: 100%;
  }
}

.news-card__media--lead {
  position: relative;
  height: 100%;
  min-height: 200px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.news-card__media--lead img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 768px) {
  .news-card__media--lead {
    min-height: 280px;
  }
}

.news-card__body--lead {
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 768px) {
  .news-card__body--lead {
    padding: 3rem;
  }
}

.news-card__title--lead {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.25;
}

.news-card--tile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  -webkit-transition: border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.news-card--tile:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
          box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  border-color: var(--border-glow);
}
.news-card--tile:hover .news-card__title a {
  color: var(--color-accent);
}
.news-card--tile .news-card__media-link {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.news-card__media {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-elevated);
  overflow: hidden;
}
.news-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
}
.news-card--tile:hover .news-card__media img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.news-card__media--placeholder {
  aspect-ratio: 16/9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: linear-gradient(155deg, var(--color-accent-muted) 0%, var(--bg-elevated) 48%, var(--bg-void) 100%);
}

.news-card__placeholder-icon {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.65;
  -webkit-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
          filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.news-card__body {
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.news-card--tile .news-card__body {
  padding: 1rem 1.5rem 1.5rem;
}

.news-card__date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.news-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}
.news-card__title a {
  color: var(--text-primary);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.news-card__title a:hover {
  color: var(--color-accent);
}

.news-card__excerpt {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.news-card__readmore {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}
.news-card__readmore:hover {
  text-decoration: underline;
}

.news-card__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.news-card__stat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
}
.news-card__stat i {
  font-size: 0.6875rem;
  color: var(--color-accent);
}

.news-article__header {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
  padding: 1.5rem 1rem 0;
}
@media (min-width: 768px) {
  .news-article__header {
    padding-top: 2rem;
  }
}

.news-article__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.news-article__back:hover {
  color: var(--color-accent);
}

.news-article__date {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.news-article__title {
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}

.news-article__byline {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.news-article__byline a {
  color: var(--text-secondary);
}
.news-article__byline a:hover {
  color: var(--color-accent);
}

.news-article__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.news-article__meta-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}
.news-article__meta-chip i {
  font-size: 0.6875rem;
  color: var(--color-accent);
}

.news-article__meta--over-hero .news-article__meta-chip {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--hero-text-sub);
}
.news-article__meta--over-hero .news-article__meta-chip i {
  color: var(--color-accent);
}

.news-article__header--over-hero {
  padding-top: 0.5rem;
}
@media (min-width: 768px) {
  .news-article__header--over-hero {
    padding-top: 1rem;
  }
}
.news-article__header--over-hero .news-article__back {
  color: var(--hero-text-muted);
}
.news-article__header--over-hero .news-article__back:hover {
  color: var(--color-accent);
}
.news-article__header--over-hero .news-article__date {
  color: var(--hero-text-muted);
}
.news-article__header--over-hero .news-article__title {
  color: var(--hero-text);
  text-shadow: var(--hero-text-shadow);
}
.news-article__header--over-hero .news-article__byline {
  color: var(--hero-text-sub);
}
.news-article__header--over-hero .news-article__byline a.jpsnt-user--inline {
  color: var(--hero-text-sub);
}
.news-article__header--over-hero .news-article__byline a.jpsnt-user--inline:hover {
  color: var(--color-accent);
}
.news-article__header--over-hero .news-article__byline a.jpsnt-user--inline:hover .jpsnt-user__name {
  color: inherit;
}
.news-article__header--over-hero .news-article__byline .jpsnt-user__name {
  color: inherit;
}
.news-article__header--over-hero .news-article__byline .jpsnt-user__level {
  color: var(--hero-text-muted);
}

.news-article__header--over-hero + .news-article__content {
  padding-top: 1.5rem;
}

.news-article__figure {
  margin: 1.5rem auto 0 0;
  max-width: 45rem;
  padding: 0 1rem;
}
.news-article__figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--border-color);
}

.news-article__content {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
  padding: 1rem 1rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.news-article__content > *:first-child {
  margin-top: 0;
}
.news-article__content h2 {
  font-size: 1.125rem;
  margin: 1.5rem 0 0.5rem;
}
.news-article__content h3 {
  font-size: 1.0625rem;
  margin: 1rem 0 0.25rem;
}
.news-article__content h4 {
  font-size: 1rem;
  margin: 1rem 0 0.25rem;
}
.news-article__content h2, .news-article__content h3, .news-article__content h4 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.35;
}
.news-article__content p {
  margin: 0 0 0.75rem;
}
.news-article__content pre {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
}
.news-article__content a {
  color: var(--color-accent);
}
.news-article__content ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
  list-style-position: outside;
}
.news-article__content ol ol {
  list-style-type: lower-alpha;
}
.news-article__content ol > li {
  margin-bottom: 0.5rem;
}
.news-article__content ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.news-article__content ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}
.news-article__content ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.news-article__content ul > li::before {
  content: "\f054";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-accent);
}
.news-article__content ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.news-article__content ul ul > li {
  padding-left: 1.1rem;
}
.news-article__content ul ul > li::before {
  font-size: 0.48em;
  top: 0.45em;
  opacity: 0.9;
}
.news-article__content li:last-child {
  margin-bottom: 0;
}
.news-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.news-article__content blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.news-article__content hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1.5rem 0;
}
.news-article__content > *:last-child {
  margin-bottom: 0;
}
.news-article__content > hr:last-child {
  display: none;
}

.events-page__hero {
  position: relative;
  width: 100%;
  min-height: 42vh;
  max-height: 55vh;
  overflow: hidden;
}
@media (min-width: 768px) {
  .events-page__hero {
    min-height: 42vh;
    max-height: 52vh;
  }
}

.events-page__hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--bg-void);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.events-page--calendar .events-page__hero-bg {
  background-image: linear-gradient(135deg, #0d1321 0%, #1a0a2e 40%, #0a1628 100%);
}

.events-page__hero-fade {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
}

.events-page__hero-head .events-page__hero-tagline {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.events-page__shell {
  margin-top: 1rem;
}

.events-page__layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 992px) {
  .events-page__layout {
    -ms-grid-columns: 1fr 320px;
    grid-template-columns: 1fr 320px;
  }
}

.events-cal {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.events-cal__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.events-cal__nav-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.events-cal__nav-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.events-cal__month-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.events-cal__grid {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .events-cal__grid {
    padding: 1rem;
  }
}

.events-cal__dow-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.25rem;
}

.events-cal__dow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0;
}

.events-cal__days {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.events-cal__cell {
  position: relative;
  min-height: 80px;
  padding: 0.25rem;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
@media (min-width: 768px) {
  .events-cal__cell {
    min-height: 100px;
    padding: 0.5rem;
  }
}
.events-cal__cell--empty {
  background: transparent;
  border: none;
}
.events-cal__cell--today {
  border-color: var(--color-accent);
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.15);
          box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.15);
}
.events-cal__cell--has-events {
  background: rgba(0, 212, 255, 0.03);
}
.events-cal__cell:hover:not(.events-cal__cell--empty) {
  background: var(--bg-surface);
}

.events-cal__day-num {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.events-cal__cell--today .events-cal__day-num {
  color: var(--color-accent);
}

.events-cal__day-events {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.events-cal__pill {
  display: block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--pill-color, #b388ff);
  background: color-mix(in srgb, var(--pill-color, #b388ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill-color, #b388ff) 25%, transparent);
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
@media (min-width: 768px) {
  .events-cal__pill {
    font-size: 0.6875rem;
    padding: 2px 8px;
  }
}
.events-cal__pill:hover {
  background: color-mix(in srgb, var(--pill-color, #b388ff) 20%, transparent);
  border-color: var(--pill-color, #b388ff);
}
.events-cal__pill--active {
  -webkit-animation: events-live-pulse 2s ease-in-out infinite;
          animation: events-live-pulse 2s ease-in-out infinite;
}

@-webkit-keyframes events-live-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes events-live-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.events-page__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.events-page__legend-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.events-page__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.events-page__aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.events-page__upcoming-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.events-page__upcoming-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.events-page__upcoming-panel:hover::before {
  opacity: 1;
}
.events-page__upcoming-panel {
  padding: 1.5rem;
}

.events-page__aside-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.events-page__aside-title i {
  color: var(--color-accent);
}

.events-page__aside-empty {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.events-page__upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.events-page__upcoming-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  text-decoration: none;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.events-page__upcoming-item a:hover {
  border-color: var(--border-glow);
  background: var(--bg-surface);
}
.events-page__upcoming-item--active a {
  border-color: rgba(0, 229, 118, 0.4);
  background: rgba(0, 229, 118, 0.04);
}

.events-page__upcoming-type {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--type-color, #b388ff);
}

.events-page__upcoming-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.events-page__upcoming-dates {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
}

.events-page__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e576;
  -webkit-animation: events-live-pulse 2s ease-in-out infinite;
          animation: events-live-pulse 2s ease-in-out infinite;
}

.events-page__body--single {
  position: relative;
  z-index: 1;
  margin-top: -8rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .events-page__body--single {
    margin-top: -10rem;
    padding-bottom: 4rem;
  }
}

.events-page--no-hero .events-page__body--single {
  margin-top: 0;
  padding-top: 1.5rem;
}

.events-page__single-shell {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .events-page__single-shell {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 992px) {
  .events-page__single-shell--aside {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 3rem minmax(260px, 320px);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 3rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.events-page--single .events-article__header {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
}
.events-page--single .events-updates__pinned {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
}
.events-page--single .events-updates {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
}
.events-page--single .jpsnt-engage {
  width: 100%;
  max-width: 45rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1rem 1rem;
}

.events-article__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}
.events-article__header--over-hero {
  padding-top: 0.5rem;
}
@media (min-width: 768px) {
  .events-article__header--over-hero {
    padding-top: 1rem;
  }
}
.events-article__header--over-hero .events-article__back {
  color: var(--hero-text-muted);
}
.events-article__header--over-hero .events-article__back:hover {
  color: var(--color-accent);
}
.events-article__header--over-hero .events-article__title {
  color: var(--hero-text);
  text-shadow: var(--hero-text-shadow);
}
.events-article__header--over-hero .events-article__byline {
  color: var(--hero-text-sub);
}
.events-article__header--over-hero .events-article__byline a.jpsnt-user--inline {
  color: var(--hero-text-sub);
}
.events-article__header--over-hero .events-article__byline a.jpsnt-user--inline:hover {
  color: var(--color-accent);
}
.events-article__header--over-hero .events-article__byline a.jpsnt-user--inline:hover .jpsnt-user__name {
  color: inherit;
}
.events-article__header--over-hero .events-article__byline .jpsnt-user__name {
  color: inherit;
}
.events-article__header--over-hero .events-article__byline .jpsnt-user__level {
  color: var(--hero-text-muted);
}
.events-article__header--over-hero .events-article__dates {
  color: var(--hero-text-sub);
}
.events-article__header--over-hero .events-article__meta .events-article__meta-chip {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--hero-text-sub);
}
.events-article__header--over-hero .events-article__meta .events-article__meta-chip i {
  color: var(--color-accent);
}

.events-article__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.events-article__back:hover {
  color: var(--color-accent);
}

.events-article__badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.events-article__type-badge {
  display: inline-block;
  padding: 3px 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--type-color, #b388ff);
  background: color-mix(in srgb, var(--type-color, #b388ff) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-color, #b388ff) 30%, transparent);
}

.events-article__live-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 3px 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #00e576;
  background: rgba(0, 229, 118, 0.12);
  border: 1px solid rgba(0, 229, 118, 0.3);
  -webkit-animation: events-live-pulse 2s ease-in-out infinite;
          animation: events-live-pulse 2s ease-in-out infinite;
}

.events-article__upcoming-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
}

.events-article__past-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}

.events-article__title {
  color: var(--text-primary);
  margin: 0;
}

.events-article__dates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--text-secondary);
}
.events-article__dates i {
  color: var(--color-accent);
}

.events-article__byline {
  padding-top: 0.25rem;
}

.events-article__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.events-article__meta-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.events-article__meta-chip i {
  font-size: 0.8125rem;
}

.events-article__content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
  padding-bottom: 2rem;
}
.events-article__content > *:first-child {
  margin-top: 0;
}
.events-article__content h2, .events-article__content h3, .events-article__content h4 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.35;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.events-article__content p {
  margin: 0 0 1em;
}
.events-article__content ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
  list-style-position: outside;
}
.events-article__content ol ol {
  list-style-type: lower-alpha;
}
.events-article__content ol > li {
  margin-bottom: 0.5rem;
}
.events-article__content ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.events-article__content ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}
.events-article__content ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.events-article__content ul > li::before {
  content: "\f054";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-accent);
}
.events-article__content ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.events-article__content ul ul > li {
  padding-left: 1.1rem;
}
.events-article__content ul ul > li::before {
  font-size: 0.48em;
  top: 0.45em;
  opacity: 0.9;
}
.events-article__content li:last-child {
  margin-bottom: 0;
}
.events-article__content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.events-article__content a:hover {
  color: rgb(51, 220.6, 255);
}
.events-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.events-article__content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--text-muted);
  font-style: italic;
}
.events-article__content hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1.5rem 0;
}
.events-article__content > *:last-child {
  margin-bottom: 0;
}
.events-article__content > hr:last-child {
  display: none;
}

.events-page__comments-wrap {
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
  padding: 0;
}
.events-page__comments-wrap .jpsnt-comments {
  margin-top: 0;
  padding-top: 1.5rem;
  padding-inline: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.events-page__comments-muted {
  font-size: 0.875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
  max-width: 45rem;
  margin-left: 0;
  margin-right: auto;
  padding-inline: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.events-page__aside--single {
  padding-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 992px) {
  .events-page__aside--single {
    padding-top: 2rem;
  }
}

.events-page__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.events-page__related-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  text-decoration: none;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.events-page__related-item a:hover {
  border-color: var(--border-glow);
}

.events-page__related-thumb {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.events-page__related-thumb img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.events-page__related-type {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--type-color, #b388ff);
}

.events-page__related-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.events-page__related-dates {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.events-participants {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.events-participants::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.events-participants:hover::before {
  opacity: 1;
}
.events-participants {
  padding: 1.5rem;
}

.events-participants__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.events-participants__title i {
  color: var(--color-accent);
}

.events-participants__count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.5rem;
  padding: 0 0.25rem;
  height: 1.25rem;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.events-participants__join-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  color: var(--color-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  margin-bottom: 1rem;
}
.events-participants__join-btn:hover {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgb(40.8, 218.88, 255);
}
.events-participants__join-btn--joined {
  border-color: #00e576;
  color: #00e576;
  background: rgba(0, 229, 118, 0.08);
}
.events-participants__join-btn--joined:hover {
  background: rgba(0, 229, 118, 0.15);
  border-color: rgb(14.8, 255, 138.5711790393);
}
.events-participants__join-btn--login {
  border-color: var(--border-color);
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.events-participants__join-btn--login:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.events-participants__join-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.events-participants__ended {
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 0.25rem 0;
  margin-bottom: 1rem;
}

.events-participants__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  max-height: 420px;
  overflow-y: auto;
}

.events-participants__user {
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.events-participants__user:hover {
  background: var(--bg-elevated);
}

.events-participants__empty {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  padding: 1rem 0;
}

.events-participants__load-more {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.25rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.events-participants__load-more:hover {
  border-color: var(--color-accent);
  background: rgba(0, 212, 255, 0.06);
}
.events-participants__load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.events-page__related-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.events-page__related-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.events-page__related-panel:hover::before {
  opacity: 1;
}
.events-page__related-panel {
  padding: 1.5rem;
}

.events-updates__pinned {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.events-updates__pinned::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.events-updates__pinned:hover::before {
  opacity: 1;
}
.events-updates__pinned {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--color-accent);
  position: relative;
}

.events-updates__pinned-label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4em;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.events-updates__pinned-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.25rem;
}

.events-updates__pinned-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.events-updates__pinned-body ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
  list-style-position: outside;
}
.events-updates__pinned-body ol ol {
  list-style-type: lower-alpha;
}
.events-updates__pinned-body ol > li {
  margin-bottom: 0.5rem;
}
.events-updates__pinned-body ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.events-updates__pinned-body ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}
.events-updates__pinned-body ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.events-updates__pinned-body ul > li::before {
  content: "\f054";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-accent);
}
.events-updates__pinned-body ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.events-updates__pinned-body ul ul > li {
  padding-left: 1.1rem;
}
.events-updates__pinned-body ul ul > li::before {
  font-size: 0.48em;
  top: 0.45em;
  opacity: 0.9;
}
.events-updates__pinned-body li:last-child {
  margin-bottom: 0;
}
.events-updates__pinned-body {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.events-updates__pinned-body > *:last-child {
  margin-bottom: 0;
}

.events-updates {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.events-updates__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 1.5rem;
}
.events-updates__heading i {
  color: var(--color-accent);
}

.events-updates__heading-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.events-updates__compose-toggle {
  margin-bottom: 1rem;
}

.events-updates__compose {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.events-updates__compose::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.events-updates__compose:hover::before {
  opacity: 1;
}
.events-updates__compose .wp-editor-wrap {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.events-updates__compose .wp-editor-tools {
  padding-top: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}
.events-updates__compose .wp-media-buttons {
  padding: 0.5rem 0.5rem 0;
}
.events-updates__compose .insert-media {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  background: rgba(0, 212, 255, 0.06) !important;
  border-radius: 4px !important;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.events-updates__compose .insert-media:hover, .events-updates__compose .insert-media:focus {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.55) !important;
  background: rgba(0, 212, 255, 0.12) !important;
}
.events-updates__compose .wp-editor-tabs {
  float: right;
  padding: 0.5rem 0.5rem 0;
}
.events-updates__compose .wp-editor-tabs .wp-switch-editor {
  margin: 0 0 0 4px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--bg-surface);
  color: var(--text-muted);
}
.events-updates__compose .wp-editor-tabs .wp-switch-editor:hover {
  color: var(--text-primary);
}
.events-updates__compose .wp-editor-tabs .switch-tmce.active,
.events-updates__compose .wp-editor-tabs .switch-html.active {
  background: var(--bg-elevated);
  color: var(--color-accent);
  border-color: var(--border-color);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
}
.events-updates__compose .mce-tinymce {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: none !important;
  background: var(--bg-surface) !important;
}
.events-updates__compose .mce-top-part::before {
  border-bottom-color: var(--border-color) !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.events-updates__compose .mce-toolbar-grp,
.events-updates__compose .mce-panel:not(.mce-floatpanel) {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
.events-updates__compose .mce-toolbar .mce-btn-group {
  border-color: var(--border-color) !important;
}
.events-updates__compose .mce-btn {
  background: transparent !important;
  border-color: transparent !important;
}
.events-updates__compose .mce-btn:hover, .events-updates__compose .mce-btn:focus, .events-updates__compose .mce-btn.mce-active {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: transparent !important;
}
.events-updates__compose .mce-btn i,
.events-updates__compose .mce-ico {
  color: var(--text-secondary) !important;
}
.events-updates__compose .mce-btn:hover i,
.events-updates__compose .mce-btn.mce-active i,
.events-updates__compose .mce-btn:focus i {
  color: var(--color-accent) !important;
}
.events-updates__compose .mce-btn.mce-active {
  background: rgba(0, 212, 255, 0.1) !important;
}
.events-updates__compose .mce-statusbar {
  background: var(--bg-surface) !important;
  border-top-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
.events-updates__compose .mce-path-item {
  color: var(--text-muted) !important;
}
.events-updates__compose .mce-resizehandle {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}
.events-updates__compose .wp-editor-container {
  border: none !important;
}
.events-updates__compose textarea.wp-editor-area {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  padding: 1rem !important;
}
.events-updates__compose .quicktags-toolbar {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.25rem 0.5rem !important;
}
.events-updates__compose .quicktags-toolbar .ed_button {
  margin: 2px !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  border-radius: 4px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.events-updates__compose .quicktags-toolbar .ed_button:hover {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
  background: rgba(0, 212, 255, 0.06) !important;
}
.events-updates__compose {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.events-updates__compose-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.events-updates__compose-title {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.events-updates__compose-title::-webkit-input-placeholder {
  color: var(--color-text-muted);
}
.events-updates__compose-title::-moz-placeholder {
  color: var(--color-text-muted);
}
.events-updates__compose-title:-ms-input-placeholder {
  color: var(--color-text-muted);
}
.events-updates__compose-title::-ms-input-placeholder {
  color: var(--color-text-muted);
}
.events-updates__compose-title::placeholder {
  color: var(--color-text-muted);
}
.events-updates__compose-title:focus {
  outline: none;
  border-color: var(--color-accent);
}

.events-updates__compose-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 1rem;
}

.events-updates__compose-submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4em;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, -webkit-transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease;
  transition: opacity 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}
.events-updates__compose-submit:hover {
  opacity: 0.9;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.events-updates__compose-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  -webkit-transform: none;
          transform: none;
}

.events-updates__timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.events-updates__item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.events-updates__item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.events-updates__item:hover::before {
  opacity: 1;
}
.events-updates__item {
  padding: 1.5rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.events-updates__item--pinned {
  border-left: 3px solid var(--color-accent);
}

.events-updates__item-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.events-updates__item-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.events-updates__time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.events-updates__item-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.25rem;
}

.events-updates__item-body ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
  list-style-position: outside;
}
.events-updates__item-body ol ol {
  list-style-type: lower-alpha;
}
.events-updates__item-body ol > li {
  margin-bottom: 0.5rem;
}
.events-updates__item-body ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.events-updates__item-body ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding-left: 0;
}
.events-updates__item-body ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.events-updates__item-body ul > li::before {
  content: "\f054";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.4em;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-accent);
}
.events-updates__item-body ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.events-updates__item-body ul ul > li {
  padding-left: 1.1rem;
}
.events-updates__item-body ul ul > li::before {
  font-size: 0.48em;
  top: 0.45em;
  opacity: 0.9;
}
.events-updates__item-body li:last-child {
  margin-bottom: 0;
}
.events-updates__item-body {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.events-updates__item-body > *:last-child {
  margin-bottom: 0;
}

.events-updates__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.events-updates__action-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.events-updates__action-btn:hover {
  color: var(--color-accent);
  border-color: var(--border-color);
  background: rgba(0, 212, 255, 0.06);
}
.events-updates__action-btn--danger:hover {
  color: var(--color-danger, #e53935);
  border-color: color-mix(in srgb, var(--color-danger, #e53935) 30%, transparent);
  background: rgba(229, 57, 53, 0.06);
}

.events-updates__load-more {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.events-updates__load-more:hover {
  border-color: var(--color-accent);
  background: rgba(0, 212, 255, 0.06);
}
.events-updates__load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 575px) {
  .events-cal__cell {
    min-height: 52px;
    padding: 3px;
  }
  .events-cal__day-num {
    font-size: 0.6875rem;
  }
  .events-cal__pill {
    font-size: 0;
    width: 100%;
    height: 4px;
    padding: 0;
    border-radius: 2px;
  }
  .events-cal__day-events {
    gap: 1px;
  }
  .events-updates__item-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .events-updates__compose {
    padding: 1rem;
  }
  .events-updates__pinned {
    padding: 1rem;
  }
}
.dashboard-hero {
  position: relative;
  height: 260px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
@media (min-width: 576px) {
  .dashboard-hero {
    height: 300px;
  }
}
@media (min-width: 768px) {
  .dashboard-hero {
    height: 340px;
  }
}
.dashboard-hero__background {
  position: absolute;
  inset: -2rem;
  z-index: 0;
  overflow: hidden;
}
.dashboard-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
}
.dashboard-hero__slide.is-active {
  opacity: 1;
}
.dashboard-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), color-stop(35%, rgba(0, 0, 0, 0.5)), to(var(--bg-void)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, var(--bg-void) 100%);
  pointer-events: none;
}
.dashboard-hero__caption {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--hero-text-muted);
  letter-spacing: 0.03em;
  text-shadow: var(--hero-text-shadow);
  opacity: 0;
}
.dashboard-hero__caption i {
  font-size: 0.5rem;
  color: var(--color-accent);
}
@media (min-width: 768px) {
  .dashboard-hero__caption {
    top: 1.5rem;
    left: 3rem;
    font-size: 0.6875rem;
  }
}
.dashboard-hero__content {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: min(700px, 100%);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  will-change: transform, opacity;
}
@media (min-width: 576px) {
  .dashboard-hero__content {
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
}
.dashboard-hero__greeting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.dashboard-hero__hello {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--hero-text);
  text-shadow: var(--hero-text-shadow);
  margin: 0;
}
.dashboard-hero__double-xp {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffb020;
  background: color-mix(in srgb, #ffb020 18%, transparent);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: none;
  -webkit-animation: dashboard-pulse 2s ease-in-out infinite;
          animation: dashboard-pulse 2s ease-in-out infinite;
}
.dashboard-hero__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 42rem;
}
.dashboard-hero__stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--hero-text-sub);
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.dashboard-hero__stat:hover {
  color: var(--hero-text);
}
.dashboard-hero__stat--plain {
  cursor: default;
  text-decoration: none;
}
.dashboard-hero__stat--plain:hover {
  color: var(--hero-text-sub);
}
.dashboard-hero__stat-num {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: var(--hero-text);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  text-shadow: var(--hero-text-shadow);
}
.dashboard-hero__stat-label {
  font-size: 0.65rem;
  color: var(--hero-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: var(--hero-text-shadow);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .dashboard-hero__stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
}

.dashboard-page {
  min-height: 100vh;
}
.dashboard-page__body {
  position: relative;
  z-index: 1;
  margin-top: -4rem;
  padding: 2rem 0 4rem;
}
@media (min-width: 768px) {
  .dashboard-page__body {
    margin-top: -5rem;
  }
}
.dashboard-page__container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.dashboard-page__layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 992px) {
  .dashboard-page__layout {
    -ms-grid-columns: 1fr 340px;
    grid-template-columns: 1fr 340px;
  }
}
@media (min-width: 1200px) {
  .dashboard-page__layout {
    -ms-grid-columns: 1fr 380px;
    grid-template-columns: 1fr 380px;
  }
}
.dashboard-page__main {
  min-width: 0;
}
.dashboard-page__sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
}

.dashboard-feed__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
  position: relative;
}
.dashboard-feed__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  -webkit-transition: color 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, border-color 150ms ease;
  margin-bottom: -1px;
}
.dashboard-feed__tab:hover {
  color: var(--text-secondary);
}
.dashboard-feed__tab--active {
  color: var(--text-primary);
  border-bottom-color: var(--color-primary);
}
.dashboard-feed__tab i {
  font-size: 0.8rem;
}
.dashboard-feed__new-pill {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
  cursor: pointer;
}
.dashboard-feed__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.dashboard-feed__sentinel {
  height: 1px;
}
.dashboard-feed__loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem 0;
}
.dashboard-feed__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  -webkit-animation: dashboard-spin 0.8s linear infinite;
          animation: dashboard-spin 0.8s linear infinite;
}
.dashboard-feed__item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.dashboard-feed__item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.dashboard-feed__item:hover::before {
  opacity: 1;
}
.dashboard-feed__item {
  padding: 0;
  overflow: hidden;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.dashboard-feed__item:hover {
  border-color: color-mix(in srgb, var(--border-color) 60%, var(--text-muted));
}
.dashboard-feed__item-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.dashboard-feed__item-actor {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.dashboard-feed__item-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.dashboard-feed__item-verb {
  color: var(--text-secondary);
}
.dashboard-feed__item-verb a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}
.dashboard-feed__item-verb a:hover {
  color: var(--color-accent);
}
.dashboard-feed__item-time {
  white-space: nowrap;
}
.dashboard-feed__item-body .ss-card--feed {
  margin: 0;
  visibility: visible;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.dashboard-feed__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}
.dashboard-feed__actions-left, .dashboard-feed__actions-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.dashboard-feed__action-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease;
  transition: color 150ms ease, background 150ms ease;
}
.dashboard-feed__action-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}
.dashboard-feed__action-btn i {
  font-size: 0.9rem;
}
.dashboard-feed__action-btn span {
  font-size: 0.75rem;
}
.dashboard-feed__thread {
  padding: 1rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.dashboard-feed__thread-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.dashboard-feed__comment-more {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.dashboard-feed__comment-more:hover {
  color: var(--color-accent);
}
.dashboard-feed__comment-more--top {
  padding-bottom: 0.25rem;
}
.dashboard-feed__compose {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.dashboard-feed__compose-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.dashboard-feed__compose-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding: 0.25rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 0.8125rem;
  line-height: 1.5;
  outline: none;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}
.dashboard-feed__compose-input::-webkit-input-placeholder {
  color: var(--text-muted);
}
.dashboard-feed__compose-input::-moz-placeholder {
  color: var(--text-muted);
}
.dashboard-feed__compose-input:-ms-input-placeholder {
  color: var(--text-muted);
}
.dashboard-feed__compose-input::-ms-input-placeholder {
  color: var(--text-muted);
}
.dashboard-feed__compose-input::placeholder {
  color: var(--text-muted);
}
.dashboard-feed__compose-input:focus {
  border-color: var(--color-accent);
}
.dashboard-feed__compose-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  -webkit-transition: opacity 150ms ease, background 150ms ease;
  transition: opacity 150ms ease, background 150ms ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.dashboard-feed__compose-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.dashboard-feed__compose-btn:not(:disabled):hover {
  background: var(--color-accent);
}

.dfeed-comment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.dfeed-comment__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 2px;
}
.dfeed-comment__avatar--sm {
  width: 22px;
  height: 22px;
}
.dfeed-comment__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.dfeed-comment__bubble {
  display: inline;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.dfeed-comment__name {
  font-weight: 600;
}
.dfeed-comment__name .jpsnt-user {
  color: var(--text-primary);
}
.dfeed-comment__text {
  word-break: break-word;
}
.dfeed-comment__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-top: 2px;
  font-size: 0.7rem;
}
.dfeed-comment__time {
  color: var(--text-muted);
}
.dfeed-comment__action {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.dfeed-comment__action:hover {
  color: var(--color-accent);
}
.dfeed-comment__replies {
  margin-top: 0.5rem;
  margin-left: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border-color);
}
.dfeed-comment__reply-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.dfeed-comment__reply-form .dashboard-feed__compose-input {
  font-size: 0.75rem;
  padding: 4px 0.5rem;
}
.dfeed-comment__reply-form .dashboard-feed__compose-btn {
  width: 26px;
  height: 26px;
  font-size: 0.65rem;
}
.dfeed-comment--reply .dfeed-comment__avatar {
  width: 22px;
  height: 22px;
}
.dfeed-comment--reply .dfeed-comment__bubble {
  font-size: 0.75rem;
}

.dashboard-feed__content-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: var(--bg-void);
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.dashboard-feed__content-card:hover {
  background: color-mix(in srgb, var(--bg-void) 85%, var(--text-muted));
}
.dashboard-feed__content-image {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 160px;
  min-height: 100px;
}
.dashboard-feed__content-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 576px) {
  .dashboard-feed__content-image {
    width: 200px;
    min-height: 120px;
  }
}
.dashboard-feed__content-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding: 1rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}
.dashboard-feed__content-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.dashboard-feed__content-badge i {
  margin-right: 2px;
}
.dashboard-feed__content-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dashboard-feed__content-excerpt {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dashboard-feed__generic-body {
  padding: 0 1.5rem 1rem;
}
.dashboard-feed__generic-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.dashboard-feed__item-xp {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-xp, #fbbf24);
  background: color-mix(in srgb, var(--color-xp, #fbbf24) 12%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.dashboard-feed__trophy-type {
  font-weight: 700;
  white-space: nowrap;
}
.dashboard-feed__trophy-type i {
  margin-right: 2px;
  font-size: 0.7em;
}
.dashboard-feed__trophy-type--platinum {
  color: #7ab7e8;
}
.dashboard-feed__trophy-type--gold {
  color: #ffd700;
}
.dashboard-feed__trophy-type--silver {
  color: #c0c0c0;
}
.dashboard-feed__trophy-type--bronze {
  color: #cd7f32;
}
.dashboard-feed__item--cta {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--bg-surface)), var(--bg-surface));
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--border-color));
}
.dashboard-feed__cta-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.dashboard-feed__cta-icon {
  width: 44px;
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-size: 1.1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.dashboard-feed__cta-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.dashboard-feed__cta-heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.dashboard-feed__cta-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.dashboard-feed__empty {
  text-align: center;
  padding: 4rem 1.5rem;
}
.dashboard-feed__empty-icon {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}
.dashboard-feed__empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.dashboard-feed__empty-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  max-width: 400px;
  margin-inline: auto;
  line-height: 1.5;
}
.dashboard-feed__empty-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.dashboard-feed__generic-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

.dashboard-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
.dashboard-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--border-glow);
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.dashboard-panel:hover::before {
  opacity: 1;
}
.dashboard-panel {
  padding: 1rem;
}
.dashboard-panel__title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.dashboard-panel__title i {
  font-size: 0.75rem;
  color: var(--color-accent);
}
.dashboard-panel__level-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
}
.dashboard-panel__level-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.dashboard-panel__level-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.dashboard-panel__xp-bar {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.dashboard-panel__xp-fill {
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(var(--color-accent)), to(var(--color-primary)));
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius: 3px;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.dashboard-panel__xp-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.dashboard-panel__xp-monthly {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}
.dashboard-panel__xp-monthly i {
  color: var(--text-muted);
}
.dashboard-panel__xp-boost {
  color: #ffb020;
  font-weight: 700;
  font-size: 0.75rem;
  margin-left: auto;
}
.dashboard-panel__actions-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.dashboard-panel__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  background: var(--bg-base, #0a0a0a);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}
.dashboard-panel__action:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  background: var(--bg-surface);
}
.dashboard-panel__action i {
  font-size: 1rem;
  color: var(--color-accent);
}
.dashboard-panel__events-section {
  margin-bottom: 1rem;
}
.dashboard-panel__events-section:last-of-type {
  margin-bottom: 0.5rem;
}
.dashboard-panel__events-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.dashboard-panel__events-badge--live {
  color: #00e576;
}
.dashboard-panel__events-badge--live i {
  font-size: 6px;
  -webkit-animation: dashboard-pulse 1.5s ease-in-out infinite;
          animation: dashboard-pulse 1.5s ease-in-out infinite;
}
.dashboard-panel__event {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-secondary);
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.dashboard-panel__event:hover {
  background: var(--bg-base, #0a0a0a);
}
.dashboard-panel__event > i {
  font-size: 0.85rem;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
}
.dashboard-panel__event--live > i {
  color: #00e576;
}
.dashboard-panel__event-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
}
.dashboard-panel__event-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-panel__event-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.dashboard-panel__event-joined {
  margin-left: auto;
  color: #00e576;
  font-size: 0.85rem;
}
.dashboard-panel__events-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.dashboard-panel__events-all:hover {
  color: var(--text-primary);
}
.dashboard-panel__events-all i {
  font-size: 0.65rem;
}
.dashboard-panel__rate-preview {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
  text-decoration: none;
}
.dashboard-panel__rate-preview:hover .dashboard-panel__rate-overlay {
  opacity: 1;
}
.dashboard-panel__rate-preview:hover .dashboard-panel__rate-img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.dashboard-panel__rate-img {
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 400ms ease;
  transition: -webkit-transform 400ms ease;
  transition: transform 400ms ease;
  transition: transform 400ms ease, -webkit-transform 400ms ease;
}
.dashboard-panel__rate-overlay {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}
.dashboard-panel__rate-text {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
.dashboard-panel__rate-text i {
  margin-left: 0.25rem;
}
.dashboard-panel__rate-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.dashboard-panel__rate-trophy {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.dashboard-panel__rate-game {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.dashboard-panel__rank-display {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 2px;
  margin-bottom: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.dashboard-panel__rank-hash {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 600;
}
.dashboard-panel__rank-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.dashboard-panel__rank-of {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}
.dashboard-panel__rank-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffd700;
  background: color-mix(in srgb, #ffd700 12%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}
.dashboard-panel__lb-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.dashboard-panel__lb-link:hover {
  color: var(--text-primary);
}
.dashboard-panel__lb-link i {
  font-size: 0.65rem;
}

@-webkit-keyframes dashboard-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes dashboard-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dashboard-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes dashboard-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media (max-width: 991px) {
  .dashboard-page__sidebar {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .dashboard-page__quick-stats {
    gap: 1rem;
  }
  .dashboard-panel__actions-grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@-webkit-keyframes stats-story-glow {
  0%, 100% {
    border-left-color: color-mix(in srgb, var(--color-accent) 55%, var(--border-color));
    -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 80%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 80%, transparent);
  }
  50% {
    border-left-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-color));
    -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 12%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
@keyframes stats-story-glow {
  0%, 100% {
    border-left-color: color-mix(in srgb, var(--color-accent) 55%, var(--border-color));
    -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 80%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 80%, transparent);
  }
  50% {
    border-left-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-color));
    -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 12%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 28px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}
@-webkit-keyframes stats-kpi-pulse {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
            box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  50% {
    -webkit-box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 8%, transparent);
            box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
}
@keyframes stats-kpi-pulse {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
            box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  50% {
    -webkit-box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 8%, transparent);
            box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
}
@-webkit-keyframes stats-title-breathe {
  0% {
    text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  100% {
    text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }
}
@keyframes stats-title-breathe {
  0% {
    text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
  100% {
    text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 18%, transparent);
  }
}
.stats-page.browse-page {
  position: relative;
  overflow-x: clip;
}
.stats-page.browse-page > .browse-page__hero,
.stats-page.browse-page > .browse-page__body {
  position: relative;
  z-index: 1;
}
.stats-page.browse-page > .browse-page__hero {
  min-height: 42vh;
  max-height: 55vh;
}
@media (min-width: 768px) {
  .stats-page.browse-page > .browse-page__hero {
    min-height: 48vh;
    max-height: 60vh;
  }
}
.stats-page.browse-page > .browse-page__body {
  margin-top: -8rem;
}
@media (min-width: 768px) {
  .stats-page.browse-page > .browse-page__body {
    margin-top: -10rem;
  }
}

.stats-page__intro {
  margin-bottom: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .stats-page .browse-page__title {
    -webkit-animation: stats-title-breathe 5.5s ease-in-out infinite alternate;
            animation: stats-title-breathe 5.5s ease-in-out infinite alternate;
  }
}

.stats-page__lede {
  max-width: 42rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.55;
  margin-top: 0.5rem;
}

.stats-page__story-rotator {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 65%, var(--border-color));
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--bg-surface) 40%, transparent);
  -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 80%, transparent);
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 80%, transparent);
  min-height: 3.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .stats-page__story-rotator {
    -webkit-animation: stats-story-glow 14s ease-in-out infinite;
            animation: stats-story-glow 14s ease-in-out infinite;
  }
}

.stats-page__story-line {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-style: italic;
  color: color-mix(in srgb, var(--text-primary) 88%, var(--color-accent));
}

.stats-page__generated {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.stats-page__kpis {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .stats-page__kpis {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr);
  }
}

.stats-page__kpi {
  position: relative;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-transition: border-color 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
  transition: border-color 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease, -webkit-box-shadow 250ms ease, -webkit-transform 250ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .stats-page__kpi {
    -webkit-animation: stats-kpi-pulse 12s ease-in-out infinite;
            animation: stats-kpi-pulse 12s ease-in-out infinite;
  }
  .stats-page__kpi:nth-child(2) {
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
  }
  .stats-page__kpi:nth-child(3) {
    -webkit-animation-delay: -4s;
            animation-delay: -4s;
  }
  .stats-page__kpi:nth-child(4) {
    -webkit-animation-delay: -6s;
            animation-delay: -6s;
  }
  .stats-page__kpi:nth-child(5) {
    -webkit-animation-delay: -8s;
            animation-delay: -8s;
  }
}
@media (hover: hover) {
  .stats-page__kpi:hover {
    -webkit-animation: none;
            animation: none;
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border-color));
    -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 12px 28px rgba(0, 0, 0, 0.12);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 12px 28px rgba(0, 0, 0, 0.12);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stats-page__kpi:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
}

.stats-page__kpi-value {
  display: block;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.stats-page__kpi-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.stats-page__panel {
  margin-bottom: 3rem;
  background: var(--bg-surface);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  -webkit-transition: border-color 0.35s ease, -webkit-box-shadow 0.35s ease;
  transition: border-color 0.35s ease, -webkit-box-shadow 0.35s ease;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, -webkit-box-shadow 0.35s ease;
}
@media (min-width: 768px) {
  .stats-page__panel {
    padding: 2rem;
  }
}
@media (hover: hover) {
  .stats-page__panel:hover {
    border-color: color-mix(in srgb, var(--color-accent) 22%, var(--border-color));
    -webkit-box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 16px 40px rgba(0, 0, 0, 0.08);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 16px 40px rgba(0, 0, 0, 0.08);
  }
}

.stats-page__panel-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.stats-page__panel-desc {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  max-width: 48rem;
}
.stats-page__panel-desc--tight {
  margin-bottom: 1rem;
}

.stats-page__grid2 {
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .stats-page__grid2 {
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

.stats-page__panel--tier-chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}

.stats-page__tier-stack {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.stats-page__tier-chart-block {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.stats-page__tier-breakdown {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  gap: clamp(1rem, 2vh, 2rem);
  padding-top: 1.5rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border-color);
  min-height: 10rem;
}

.stats-page__tier-bar-block {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.stats-page__tier-bar-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5rem 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.stats-page__tier-bar-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 6rem;
          flex: 1 1 6rem;
  min-width: 0;
}

.stats-page__tier-bar-count {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.stats-page__tier-bar-pct {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.stats-page__tier-bar-track {
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-color) 75%, transparent);
  overflow: hidden;
}

.stats-page__tier-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.stats-page__tier-bar-fill--bronze {
  background: #cd7f32;
}
.stats-page__tier-bar-fill--silver {
  background: #c0c0c0;
}
.stats-page__tier-bar-fill--gold {
  background: #ffd700;
}
.stats-page__tier-bar-fill--platinum {
  background: #7ab7e8;
}

.stats-page__chart-wrap {
  position: relative;
  height: 220px;
}
.stats-page__chart-wrap--tall {
  height: 300px;
}
.stats-page__chart-wrap--doughnut {
  height: 240px;
  max-width: 280px;
  margin-inline: auto;
}

.stats-page__chart-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1rem;
}

.stats-page__chart-legend-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.stats-page__chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.stats-page__heatmap-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.stats-page__heatmap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.stats-page__heatmap-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-width: min(100%, 28rem);
}

.stats-page__heatmap-dow {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 0.25rem;
}

.stats-page__heatmap-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  aspect-ratio: 1;
  min-width: 5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-accent) calc(var(--stats-heat, 0) * 85%), transparent);
  outline: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.stats-page__heatmap-cell:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}

.stats-page__map-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stats-page__map-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.stats-page__map-toggle-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  cursor: pointer;
}
.stats-page__map-toggle-btn:hover {
  color: var(--text-primary);
}
.stats-page__map-toggle-btn.is-active {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--text-primary);
}
.stats-page__map-toggle-btn + .stats-page__map-toggle-btn {
  border-left: 1px solid var(--border-color);
}

.stats-page__map-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.stats-page__map-legend-bar {
  width: 72px;
  height: 8px;
  border-radius: 4px;
  background: -webkit-gradient(linear, left top, right top, from(color-mix(in srgb, var(--color-accent) 8%, transparent)), to(color-mix(in srgb, var(--color-accent) 88%, transparent)));
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent), color-mix(in srgb, var(--color-accent) 88%, transparent));
}

.stats-page__map-svg-wrap {
  position: relative;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-void) 88%, var(--bg-surface));
  overflow: hidden;
}
.stats-page__map-svg-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.stats-page__map-loading {
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.stats-page__map-path {
  stroke: color-mix(in srgb, var(--border-color) 55%, transparent);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  -webkit-transition: fill 0.25s ease, opacity 0.25s ease;
  transition: fill 0.25s ease, opacity 0.25s ease;
  cursor: default;
}
.stats-page__map-path:hover {
  opacity: 0.92;
  -webkit-filter: brightness(1.08);
          filter: brightness(1.08);
}

@-webkit-keyframes stats-games-marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes stats-games-marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.stats-page__panel--games-marquee {
  overflow: hidden;
}

.stats-page__games-marquee {
  overflow: hidden;
  margin-inline: -0.5rem;
}
@media (min-width: 768px) {
  .stats-page__games-marquee {
    margin-inline: -1rem;
  }
}
.stats-page__games-marquee {
  mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent));
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .stats-page__games-marquee {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-page__games-set--duplicate {
    display: none;
  }
}

.stats-page__games-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: stats-games-marquee 30s linear infinite;
          animation: stats-games-marquee 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stats-page__games-track {
    -webkit-animation: none;
            animation: none;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    row-gap: 1rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .stats-page__games-track:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
}

.stats-page__games-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  padding: 4px 0.5rem 0.5rem;
}
@media (min-width: 768px) {
  .stats-page__games-set {
    padding-inline: 1rem;
  }
}

.stats-page__games-slide {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 7.75rem;
          flex: 0 0 7.75rem;
}
@media (min-width: 768px) {
  .stats-page__games-slide {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.75rem;
            flex: 0 0 8.75rem;
  }
}
.stats-page__games-slide .game-card {
  height: 100%;
}
.stats-page__games-slide .game-card__body {
  padding: 0.5rem 0.5rem 1rem;
}
.stats-page__games-slide .game-card__name {
  font-size: 0.8125rem;
}

.stats-page__games-rank {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-void) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--border-color));
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.stats-page__rare-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stats-page__rare-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-color);
}
.stats-page__rare-item:last-child {
  border-bottom: 0;
}

.stats-page__rare-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3.75rem 1rem 1fr 1rem auto;
  grid-template-columns: 3.75rem 1fr auto;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
  -webkit-transition: background 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  transition: background 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  transition: background 150ms ease, box-shadow 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease;
  outline: none;
}
@media (min-width: 768px) {
  .stats-page__rare-row {
    -ms-grid-columns: 4rem 1.5rem 1fr 1.5rem auto;
    grid-template-columns: 4rem 1fr auto;
    gap: 1rem 1.5rem;
  }
}
.stats-page__rare-row:hover {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, var(--border-color));
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, var(--border-color));
}
.stats-page__rare-row:focus-visible {
  -webkit-box-shadow: inset 0 0 0 2px var(--color-accent);
          box-shadow: inset 0 0 0 2px var(--color-accent);
}

.stats-page__rare-visual {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-void);
  border: 1px solid var(--border-color);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
@media (min-width: 768px) {
  .stats-page__rare-visual {
    width: 4rem;
    height: 4rem;
  }
}
.stats-page__rare-visual--bronze {
  border-color: color-mix(in srgb, #cd7f32 45%, var(--border-color));
}
.stats-page__rare-visual--silver {
  border-color: color-mix(in srgb, #c0c0c0 45%, var(--border-color));
}
.stats-page__rare-visual--gold {
  border-color: color-mix(in srgb, #ffd700 45%, var(--border-color));
}
.stats-page__rare-visual--platinum {
  border-color: color-mix(in srgb, #7ab7e8 45%, var(--border-color));
}

.stats-page__rare-sway {
  display: block;
  width: 100%;
  height: 100%;
}
.stats-page__rare-sway img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.stats-page__rare-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 1.35rem;
  aspect-ratio: auto;
}

.stats-page__rare-tier {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  line-height: 1.2;
  pointer-events: none;
  max-width: calc(100% - 6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-page__rare-visual--bronze .stats-page__rare-tier {
  color: #cd7f32;
}

.stats-page__rare-visual--silver .stats-page__rare-tier {
  color: #c0c0c0;
}

.stats-page__rare-visual--gold .stats-page__rare-tier {
  color: #ffd700;
}

.stats-page__rare-visual--platinum .stats-page__rare-tier {
  color: #7ab7e8;
}

.stats-page__rare-main {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.stats-page__rare-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stats-page__rare-game {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-page__rare-row:hover .stats-page__rare-name {
  color: var(--color-accent);
}

.stats-page__rare-metrics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.stats-page__rare-metric {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.stats-page__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.stats-page__platinum-grid {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .stats-page__platinum-grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

.stats-page__platinum-card {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.stats-page__platinum-value {
  display: block;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stats-page__platinum-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.stats-page__platinum-foot {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
}
.stats-page__platinum-foot a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.stats-page__platinum-foot a:hover {
  text-decoration: underline;
}

.stats-page__hall {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .stats-page__hall {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .stats-page__hall {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}
.stats-page__hall .ss-card {
  margin: 0;
}

.mod-news {
  padding: 2rem 1rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-news {
    padding: 3rem 2rem 4rem;
  }
}

.mod-news__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-news__container--form {
  max-width: 920px;
}

.mod-news__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.mod-news__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.mod-news__title i {
  color: var(--color-accent);
}

.mod-news__intro {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.mod-news__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.mod-news__back:hover {
  color: var(--color-accent);
}

.mod-news__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-news__filter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-news__filter:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-glow);
}
.mod-news__filter:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mod-news__filter.is-active {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.4);
}
.mod-news__filter.is-active:hover {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.12);
}

.mod-news__count {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.mod-news__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-muted);
  text-align: center;
}
.mod-news__empty i {
  font-size: 2rem;
  color: var(--text-muted);
  opacity: 0.6;
}
.mod-news__empty p {
  margin: 0;
  font-size: 0.9375rem;
}

.mod-news__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-news__card {
  --card-accent: #8b8d91;
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 2fr) 1.5rem minmax(0, auto) 1.5rem minmax(0, auto) 1.5rem minmax(0, auto);
  grid-template-columns: minmax(0, 2fr) minmax(0, auto) minmax(0, auto) minmax(0, auto);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem 1rem calc(1.5rem + 6px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  -webkit-transition: border-color 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.mod-news__card--published {
  --card-accent: #00e576;
}
.mod-news__card--draft {
  --card-accent: #eab308;
}
.mod-news__card:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--card-accent) 45%, var(--border-color));
  background: var(--bg-elevated);
  -webkit-box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--card-accent) 18%, transparent);
          box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--card-accent) 18%, transparent);
}
@media (max-width: 767px) {
  .mod-news__card {
    -ms-grid-columns: minmax(0, 1fr) 1rem minmax(0, auto);
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    -ms-grid-rows: auto 0.5rem auto;
        grid-template-areas: "title   actions" "status  updated";
    row-gap: 0.5rem;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
  }
  .mod-news__card > .mod-bans__card-actions {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

.mod-news__card-rail {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-accent);
  border-radius: 12px 0 0 12px;
}

.mod-news__card-title {
  min-width: 0;
}
@media (max-width: 767px) {
  .mod-news__card-title {
    grid-area: title;
  }
}

.mod-news__card-link {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.mod-news__card-link:hover, .mod-news__card-link:focus {
  color: var(--color-accent);
}

.mod-news__card-slug {
  margin-top: 2px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .mod-news__card-status {
    grid-area: status;
  }
}

.mod-news__card-updated {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.mod-news__card-updated i {
  font-size: 0.8125rem;
}
@media (max-width: 767px) {
  .mod-news__card-updated {
    grid-area: updated;
    -ms-grid-column-align: end;
        justify-self: end;
    font-size: 0.75rem;
  }
}

.mod-news__card-actions {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}
@media (max-width: 767px) {
  .mod-news__card-actions {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: actions;
    -ms-grid-column-align: end;
        justify-self: end;
  }
}

.mod-news__action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.mod-news__action:hover, .mod-news__action:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  outline: none;
}
.mod-news__action--danger:hover, .mod-news__action--danger:focus-visible {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.1);
  border-color: rgba(255, 59, 92, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .mod-news__card {
    -webkit-transition: none;
    transition: none;
  }
  .mod-news__card:hover {
    -webkit-transform: none;
            transform: none;
  }
}
.mod-news__pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mod-news__pill--draft {
  color: #eab308;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.28);
}
.mod-news__pill--published {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.mod-news__pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mod-news-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem;
}
@media (min-width: 768px) {
  .mod-news-form {
    padding: 3rem;
  }
}

.mod-news-form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-news-form__row--inline {
  max-width: 280px;
}

.mod-news-form__row--check {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-news-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mod-news-form__input,
.mod-news-form__textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.9375rem;
}
.mod-news-form__input:focus,
.mod-news-form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-news-form__textarea {
  resize: vertical;
  min-height: 80px;
}

.mod-news-form__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.mod-news-form__hint code {
  font-size: 0.75em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
}

.mod-news-form__featured {
  width: 100%;
}

.mod-news-form__featured-shell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-elevated);
}

.mod-news-form__featured-preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.mod-news-form__featured-preview-frame {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  max-width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}

.mod-news-form__featured-thumb {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  max-height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}

.mod-news-form__featured-clear {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.mod-news-form__featured-modes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-news-form__featured-tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-news-form__featured-tab i {
  font-size: 0.8125rem;
  opacity: 0.9;
}
.mod-news-form__featured-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
  border-color: var(--border-glow);
}
.mod-news-form__featured-tab:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mod-news-form__featured-tab.is-active {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.4);
}

.mod-news-form__featured-panels {
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.mod-news-form__featured-panel[hidden] {
  display: none !important;
}
.mod-news-form__featured-panel .btn {
  margin-top: 2px;
}

.mod-news-form__featured-panel-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 42rem;
}

.mod-news-form__featured-url-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mod-news-form__check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.mod-news-form__check input {
  width: 1rem;
  height: 1rem;
}

.mod-news-form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.mod-news--edit .wp-editor-wrap {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.mod-news--edit .wp-editor-tools {
  padding-top: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}
.mod-news--edit .wp-media-buttons {
  padding: 0.5rem 0.5rem 0;
}
.mod-news--edit .insert-media {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  background: rgba(0, 212, 255, 0.06) !important;
  border-radius: 4px !important;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-news--edit .insert-media:hover, .mod-news--edit .insert-media:focus {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.55) !important;
  background: rgba(0, 212, 255, 0.12) !important;
}
.mod-news--edit .wp-editor-tabs {
  float: right;
  padding: 0.5rem 0.5rem 0;
}
.mod-news--edit .wp-editor-tabs .wp-switch-editor {
  margin: 0 0 0 4px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--bg-surface);
  color: var(--text-muted);
}
.mod-news--edit .wp-editor-tabs .wp-switch-editor:hover {
  color: var(--text-primary);
}
.mod-news--edit .wp-editor-tabs .switch-tmce.active,
.mod-news--edit .wp-editor-tabs .switch-html.active {
  background: var(--bg-elevated);
  color: var(--color-accent);
  border-color: var(--border-color);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
}
.mod-news--edit .mce-tinymce {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: none !important;
  background: var(--bg-surface) !important;
}
.mod-news--edit .mce-top-part::before {
  border-bottom-color: var(--border-color) !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.mod-news--edit .mce-toolbar-grp,
.mod-news--edit .mce-panel:not(.mce-floatpanel) {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
.mod-news--edit .mce-toolbar .mce-btn-group {
  border-color: var(--border-color) !important;
}
.mod-news--edit .mce-btn {
  background: transparent !important;
  border-color: transparent !important;
}
.mod-news--edit .mce-btn:hover, .mod-news--edit .mce-btn:focus, .mod-news--edit .mce-btn.mce-active {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: transparent !important;
}
.mod-news--edit .mce-btn i,
.mod-news--edit .mce-ico {
  color: var(--text-secondary) !important;
}
.mod-news--edit .mce-btn:hover i,
.mod-news--edit .mce-btn.mce-active i,
.mod-news--edit .mce-btn:focus i {
  color: var(--color-accent) !important;
}
.mod-news--edit .mce-btn.mce-active {
  background: rgba(0, 212, 255, 0.1) !important;
}
.mod-news--edit .mce-statusbar {
  background: var(--bg-surface) !important;
  border-top-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
.mod-news--edit .mce-path-item {
  color: var(--text-muted) !important;
}
.mod-news--edit .mce-resizehandle {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}
.mod-news--edit .wp-editor-container {
  border: none !important;
}
.mod-news--edit textarea.wp-editor-area {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  padding: 1rem !important;
}
.mod-news--edit .quicktags-toolbar {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.25rem 0.5rem !important;
}
.mod-news--edit .quicktags-toolbar .ed_button {
  margin: 2px !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  border-radius: 4px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.mod-news--edit .quicktags-toolbar .ed_button:hover {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
  background: rgba(0, 212, 255, 0.06) !important;
}

body.jpsnt-mod-news-editor .mce-floatpanel,
body.jpsnt-mod-news-editor .mce-window {
  border-radius: 8px !important;
  border-color: var(--border-color) !important;
  -webkit-box-shadow: var(--shadow-lg) !important;
          box-shadow: var(--shadow-lg) !important;
}
body.jpsnt-mod-news-editor .mce-floatpanel .mce-panel,
body.jpsnt-mod-news-editor .mce-window-head {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
body.jpsnt-mod-news-editor .mce-window-head .mce-title {
  color: var(--text-primary) !important;
}
body.jpsnt-mod-news-editor .mce-menu {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
body.jpsnt-mod-news-editor .mce-menu-item {
  color: var(--text-primary) !important;
}
body.jpsnt-mod-news-editor .mce-menu-item:hover, body.jpsnt-mod-news-editor .mce-menu-item:focus, body.jpsnt-mod-news-editor .mce-menu-item.mce-selected {
  background: rgba(0, 212, 255, 0.1) !important;
  color: var(--color-accent) !important;
}
body.jpsnt-mod-news-editor .mce-menu-item-sep {
  background: var(--border-color) !important;
}
body.jpsnt-mod-news-editor .mce-textbox {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.jpsnt-mod-news-editor .mce-btn.mce-primary {
  background: rgba(0, 212, 255, 0.15) !important;
  border-color: rgba(0, 212, 255, 0.45) !important;
  color: var(--color-accent) !important;
}

.mod-events {
  padding: 2rem 1rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .mod-events {
    padding: 3rem 2rem 4rem;
  }
}

.mod-events__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.mod-events__container--form {
  max-width: 920px;
}

.mod-events__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.mod-events__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.mod-events__title i {
  color: var(--color-accent);
}

.mod-events__intro {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.mod-events__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.mod-events__back:hover {
  color: var(--color-accent);
}

.mod-events__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-events__filter {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  cursor: pointer;
  -webkit-transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.mod-events__filter:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-glow);
}
.mod-events__filter:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mod-events__filter.is-active {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.4);
}
.mod-events__filter.is-active:hover {
  color: var(--color-accent);
  background: rgba(0, 212, 255, 0.12);
}

.mod-events__count {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.mod-events__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-muted);
  text-align: center;
}
.mod-events__empty i {
  font-size: 2rem;
  color: var(--text-muted);
  opacity: 0.6;
}
.mod-events__empty p {
  margin: 0;
  font-size: 0.9375rem;
}

.mod-events__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-events__card {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1.45fr) 1.5rem minmax(10.25rem, 11.5rem) 1.5rem minmax(16.5rem, 1.35fr) 1.5rem minmax(5.5rem, auto) 1.5rem minmax(5.25rem, auto) 1.5rem auto;
  grid-template-columns: minmax(0, 1.45fr) minmax(10.25rem, 11.5rem) minmax(16.5rem, 1.35fr) minmax(5.5rem, auto) minmax(5.25rem, auto) auto;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 1.5rem;
  padding: 1rem 1.5rem 1rem calc(1.5rem + 6px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  -webkit-transition: border-color 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: border-color 150ms ease, background 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, -webkit-transform 150ms ease, -webkit-box-shadow 150ms ease;
}
.mod-events__card:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--card-accent, #b388ff) 45%, var(--border-color));
  background: var(--bg-elevated);
  -webkit-box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--card-accent, #b388ff) 18%, transparent);
          box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--card-accent, #b388ff) 18%, transparent);
}
.mod-events__card.is-live {
  border-color: color-mix(in srgb, #00e576 45%, var(--border-color));
  background: -webkit-gradient(linear, left top, right top, from(color-mix(in srgb, #00e576 6%, var(--bg-surface))), color-stop(40%, var(--bg-surface)));
  background: linear-gradient(90deg, color-mix(in srgb, #00e576 6%, var(--bg-surface)), var(--bg-surface) 40%);
}
.mod-events__card.is-live:hover {
  border-color: color-mix(in srgb, #00e576 60%, var(--border-color));
}
@media (max-width: 991px) {
  .mod-events__card {
    -ms-grid-columns: minmax(0, 1fr) 1rem minmax(0, auto);
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    -ms-grid-rows: auto 0.5rem auto 0.5rem auto 0.5rem auto;
        grid-template-areas: "title   actions" "type    status" "dates   dates" "updated updated";
    row-gap: 0.5rem;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
  }
  .mod-events__card > .mod-bans__card-actions {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .mod-events__card > .mod-news__card-title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .mod-events__card > .mod-news__card-status {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .mod-events__card > .mod-news__card-updated {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .mod-events__card > .mod-news__card-actions {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}

.mod-events__card-rail {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-accent, #b388ff);
  border-radius: 12px 0 0 12px;
}
.mod-events__card.is-live .mod-events__card-rail {
  width: 4px;
  background: #00e576;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 229, 118, 0.6);
          box-shadow: 0 0 10px 0 rgba(0, 229, 118, 0.6);
}

.mod-events__card-title {
  min-width: 0;
}
@media (max-width: 991px) {
  .mod-events__card-title {
    grid-area: title;
  }
}

.mod-events__card-link {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}
.mod-events__card-link:hover, .mod-events__card-link:focus {
  color: var(--color-accent);
}

.mod-events__card-slug {
  margin-top: 2px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-events__card-type {
  -ms-grid-column-align: stretch;
      justify-self: stretch;
  -ms-flex-item-align: start;
      -ms-grid-row-align: start;
      align-self: start;
  width: 100%;
  max-width: 11.5rem;
}
.mod-events__card-type .mod-events__type-badge {
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: left;
}
@media (max-width: 991px) {
  .mod-events__card-type {
    grid-area: type;
    max-width: none;
  }
}

.mod-events__card-dates {
  min-width: 0;
}
@media (max-width: 991px) {
  .mod-events__card-dates {
    grid-area: dates;
  }
}

.mod-events__schedule {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  -webkit-column-gap: 1.5rem;
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
  row-gap: 6px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.mod-events__schedule .mod-events__schedule-date {
  grid-column: 1/-1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.mod-events__schedule--multi-day .mod-events__schedule-v {
  white-space: normal;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.mod-events__schedule-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mod-events__schedule-k {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.2;
}

.mod-events__schedule-v {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  line-height: 1.25;
  white-space: nowrap;
}

.mod-events__schedule-fallback {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.mod-events__card-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 6px;
  -ms-grid-column-align: end;
      justify-self: end;
}
@media (max-width: 991px) {
  .mod-events__card-status {
    grid-area: status;
  }
}

.mod-events__card-updated {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  -ms-grid-column-align: end;
      justify-self: end;
  text-align: right;
}
@media (max-width: 991px) {
  .mod-events__card-updated {
    grid-area: updated;
    font-size: 0.75rem;
  }
}

.mod-events__card-actions {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  -ms-grid-column-align: end;
      justify-self: end;
}
@media (max-width: 991px) {
  .mod-events__card-actions {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: actions;
  }
  @media (min-width: 768px){
  .mod-bans__card-main {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  .mod-bans__card-details {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
  }
  .mod-bans__card-actions {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
  }
  .mod-news__card-actions {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
  }
  .mod-events__card-actions {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
  }
  }
  @media (max-width: 767px){
  .mod-news__card-title {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  .mod-news__card-status {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
  }
  .mod-news__card-updated {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
  }
  .mod-news__card > .mod-news__card-actions {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
  }
  .mod-events__card-title {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  .mod-events__card-status {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
  }
  .mod-events__card-updated {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
  }
  .mod-news__card > .mod-events__card-actions {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
  }
  }
  @media (max-width: 991px){
  .mod-events__card > .mod-events__card-title {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  .mod-events__card-type {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
  }
  .mod-events__card-dates {
      -ms-grid-row: 5;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
  }
  .mod-events__card > .mod-events__card-status {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
  }
  .mod-events__card > .mod-events__card-updated {
      -ms-grid-row: 7;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
  }
  .mod-events__card > .mod-events__card-actions {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
  }
  }
}

.mod-events__action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.mod-events__action:hover, .mod-events__action:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  outline: none;
}
.mod-events__action--danger:hover, .mod-events__action--danger:focus-visible {
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.1);
  border-color: rgba(255, 59, 92, 0.3);
}

.mod-events__type-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 3px 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--type-color, #b388ff);
  background: color-mix(in srgb, var(--type-color, #b388ff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-color, #b388ff) 28%, transparent);
  white-space: nowrap;
}

.mod-events__type-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--type-color, #b388ff);
  -webkit-box-shadow: 0 0 6px 0 color-mix(in srgb, var(--type-color, #b388ff) 60%, transparent);
          box-shadow: 0 0 6px 0 color-mix(in srgb, var(--type-color, #b388ff) 60%, transparent);
}

.mod-events__live-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  padding: 3px 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00e576;
  background: rgba(0, 229, 118, 0.12);
  border: 1px solid rgba(0, 229, 118, 0.28);
}

.mod-events__live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00e576;
  -webkit-box-shadow: 0 0 0 0 rgba(0, 229, 118, 0.7);
          box-shadow: 0 0 0 0 rgba(0, 229, 118, 0.7);
  -webkit-animation: mod-events-live-pulse 1.8s ease-out infinite;
          animation: mod-events-live-pulse 1.8s ease-out infinite;
}

@-webkit-keyframes mod-events-live-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 229, 118, 0.7);
            box-shadow: 0 0 0 0 rgba(0, 229, 118, 0.7);
  }
  70% {
    -webkit-box-shadow: 0 0 0 6px rgba(0, 229, 118, 0);
            box-shadow: 0 0 0 6px rgba(0, 229, 118, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 229, 118, 0);
            box-shadow: 0 0 0 0 rgba(0, 229, 118, 0);
  }
}

@keyframes mod-events-live-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 229, 118, 0.7);
            box-shadow: 0 0 0 0 rgba(0, 229, 118, 0.7);
  }
  70% {
    -webkit-box-shadow: 0 0 0 6px rgba(0, 229, 118, 0);
            box-shadow: 0 0 0 6px rgba(0, 229, 118, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 229, 118, 0);
            box-shadow: 0 0 0 0 rgba(0, 229, 118, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mod-events__live-dot {
    -webkit-animation: none;
            animation: none;
  }
  .mod-events__card {
    -webkit-transition: none;
    transition: none;
  }
  .mod-events__card:hover {
    -webkit-transform: none;
            transform: none;
  }
}
.mod-events__pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mod-events__pill--draft {
  color: #eab308;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.28);
}
.mod-events__pill--published {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.mod-events__pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mod-events-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem;
}
@media (min-width: 768px) {
  .mod-events-form {
    padding: 3rem;
  }
}

.mod-events-form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-events-form__row--inline {
  max-width: 280px;
}

.mod-events-form__row--dates {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1.5rem;
}
@media (max-width: 575px) {
  .mod-events-form__row--dates {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.mod-events-form__date-field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.mod-events-form__row--check {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.mod-events-form__featured {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.mod-events-form__featured-url-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.mod-events-form__featured-url-row .mod-events-form__input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 200px;
}

.mod-events-form__featured-preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.mod-events-form__featured-preview-frame {
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.mod-events-form__featured-thumb {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.mod-events-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mod-events-form__input,
.mod-events-form__textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.9375rem;
  color-scheme: dark;
}
.mod-events-form__input:focus,
.mod-events-form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mod-events-form__textarea {
  resize: vertical;
  min-height: 80px;
}

.mod-events-form__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.mod-events-form__hint code {
  font-size: 0.75em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
}

.mod-events-form__check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.mod-events-form__check input {
  width: 1rem;
  height: 1rem;
}

.mod-events-form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.mod-events--edit .wp-editor-wrap {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.mod-events--edit .wp-editor-tools {
  padding-top: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}
.mod-events--edit .wp-media-buttons {
  padding: 0.5rem 0.5rem 0;
}
.mod-events--edit .insert-media {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  background: rgba(0, 212, 255, 0.06) !important;
  border-radius: 4px !important;
  -webkit-transition: border-color 150ms ease, background 150ms ease;
  transition: border-color 150ms ease, background 150ms ease;
}
.mod-events--edit .insert-media:hover, .mod-events--edit .insert-media:focus {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.55) !important;
  background: rgba(0, 212, 255, 0.12) !important;
}
.mod-events--edit .wp-editor-tabs {
  float: right;
  padding: 0.5rem 0.5rem 0;
}
.mod-events--edit .wp-editor-tabs .wp-switch-editor {
  margin: 0 0 0 4px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--bg-surface);
  color: var(--text-muted);
}
.mod-events--edit .wp-editor-tabs .wp-switch-editor:hover {
  color: var(--text-primary);
}
.mod-events--edit .wp-editor-tabs .switch-tmce.active,
.mod-events--edit .wp-editor-tabs .switch-html.active {
  background: var(--bg-elevated);
  color: var(--color-accent);
  border-color: var(--border-color);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
}
.mod-events--edit .mce-tinymce {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: none !important;
  background: var(--bg-surface) !important;
}
.mod-events--edit .mce-top-part::before {
  border-bottom-color: var(--border-color) !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.mod-events--edit .mce-toolbar-grp,
.mod-events--edit .mce-panel:not(.mce-floatpanel) {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
.mod-events--edit .mce-toolbar .mce-btn-group {
  border-color: var(--border-color) !important;
}
.mod-events--edit .mce-btn {
  background: transparent !important;
  border-color: transparent !important;
}
.mod-events--edit .mce-btn:hover, .mod-events--edit .mce-btn:focus, .mod-events--edit .mce-btn.mce-active {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: transparent !important;
}
.mod-events--edit .mce-btn i,
.mod-events--edit .mce-ico {
  color: var(--text-secondary) !important;
}
.mod-events--edit .mce-btn:hover i,
.mod-events--edit .mce-btn.mce-active i,
.mod-events--edit .mce-btn:focus i {
  color: var(--color-accent) !important;
}
.mod-events--edit .mce-btn.mce-active {
  background: rgba(0, 212, 255, 0.1) !important;
}
.mod-events--edit .mce-statusbar {
  background: var(--bg-surface) !important;
  border-top-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
.mod-events--edit .mce-path-item {
  color: var(--text-muted) !important;
}
.mod-events--edit .mce-resizehandle {
  -webkit-filter: brightness(0.85);
          filter: brightness(0.85);
}
.mod-events--edit .wp-editor-container {
  border: none !important;
}
.mod-events--edit textarea.wp-editor-area {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  padding: 1rem !important;
}
.mod-events--edit .quicktags-toolbar {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.25rem 0.5rem !important;
}
.mod-events--edit .quicktags-toolbar .ed_button {
  margin: 2px !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  border-radius: 4px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.mod-events--edit .quicktags-toolbar .ed_button:hover {
  color: var(--color-accent) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
  background: rgba(0, 212, 255, 0.06) !important;
}

body.jpsnt-mod-events-editor .mce-floatpanel,
body.jpsnt-mod-events-editor .mce-window {
  border-radius: 8px !important;
  border-color: var(--border-color) !important;
  -webkit-box-shadow: var(--shadow-lg) !important;
          box-shadow: var(--shadow-lg) !important;
}
body.jpsnt-mod-events-editor .mce-floatpanel .mce-panel,
body.jpsnt-mod-events-editor .mce-window-head {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
body.jpsnt-mod-events-editor .mce-window-head .mce-title {
  color: var(--text-primary) !important;
}
body.jpsnt-mod-events-editor .mce-menu {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
body.jpsnt-mod-events-editor .mce-menu-item {
  color: var(--text-primary) !important;
}
body.jpsnt-mod-events-editor .mce-menu-item:hover, body.jpsnt-mod-events-editor .mce-menu-item:focus, body.jpsnt-mod-events-editor .mce-menu-item.mce-selected {
  background: rgba(0, 212, 255, 0.1) !important;
  color: var(--color-accent) !important;
}
body.jpsnt-mod-events-editor .mce-menu-item-sep {
  background: var(--border-color) !important;
}
body.jpsnt-mod-events-editor .mce-textbox {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.jpsnt-mod-events-editor .mce-btn.mce-primary {
  background: rgba(0, 212, 255, 0.15) !important;
  border-color: rgba(0, 212, 255, 0.45) !important;
  color: var(--color-accent) !important;
}