/* ==========================================================================
   SNS LEAGUE HUB — PHASE 8.9B
   CYBER LIME + CYAN FULL-SITE THEME
   Built around the user-selected SNS Motorsports artwork.
   Presentation only.
   ========================================================================== */

:root {
  color-scheme: dark;

  --sns-bg: #030608;
  --sns-bg-2: #060b0e;
  --sns-shell: #070d11;
  --sns-panel: #0a1116;
  --sns-panel-2: #0d171d;
  --sns-panel-3: #122027;

  --sns-text: #f4f8fa;
  --sns-text-2: #d2dde2;
  --sns-muted: #82939b;
  --sns-dim: #58686f;

  --sns-cyan: #10e7f4;
  --sns-cyan-2: #49f4ff;
  --sns-cyan-soft: rgba(16, 231, 244, 0.12);
  --sns-cyan-glow: rgba(16, 231, 244, 0.26);

  --sns-lime: #a8ff00;
  --sns-lime-2: #c5ff46;
  --sns-lime-soft: rgba(168, 255, 0, 0.105);
  --sns-lime-glow: rgba(168, 255, 0, 0.22);

  --sns-red: #ef3c48;
  --sns-red-soft: rgba(239, 60, 72, 0.12);
  --sns-green: #48d67c;
  --sns-amber: #f3ad35;

  --sns-line: #17303a;
  --sns-line-2: #235061;
  --sns-line-cyan: rgba(16, 231, 244, 0.42);
  --sns-line-lime: rgba(168, 255, 0, 0.34);

  --sns-radius: 4px;
  --sns-radius-lg: 7px;
  --sns-shadow: 0 16px 45px rgba(0, 0, 0, 0.42);
  --sns-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3);

  --sns-font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --sns-condensed: "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
}

/* Base ------------------------------------------------------------------ */

html {
  background: var(--sns-bg) !important;
}

body.sns-iracing-ui {
  margin: 0 !important;
  min-height: 100vh;
  color: var(--sns-text) !important;
  font-family: var(--sns-font) !important;
  background:
    radial-gradient(circle at 75% -10%, rgba(16, 231, 244, 0.09), transparent 32rem),
    radial-gradient(circle at 5% 25%, rgba(168, 255, 0, 0.055), transparent 25rem),
    linear-gradient(180deg, #05090c 0%, #030608 48%, #020406 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.sns-iracing-ui *,
body.sns-iracing-ui *::before,
body.sns-iracing-ui *::after {
  box-sizing: border-box;
}

body.sns-iracing-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.25;
  background:
    linear-gradient(120deg, transparent 0 72%, rgba(16,231,244,0.022) 72% 72.25%, transparent 72.25%),
    repeating-linear-gradient(
      135deg,
      transparent 0 76px,
      rgba(255,255,255,0.012) 76px 77px
    );
}

body.sns-iracing-ui ::selection {
  background: rgba(16, 231, 244, 0.5);
  color: #fff;
}

body.sns-iracing-ui a {
  color: #cfdade;
  text-decoration-color: rgba(16, 231, 244, 0.35);
  text-underline-offset: 3px;
}

/* Header + selected logo ------------------------------------------------ */

body.sns-iracing-ui .site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(4, 9, 12, 0.985), rgba(3, 7, 10, 0.985)) !important;
  border-bottom: 1px solid var(--sns-line-cyan) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(168, 255, 0, 0.15) !important;
  backdrop-filter: blur(14px);
}

body.sns-iracing-ui .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      var(--sns-cyan) 0 22%,
      rgba(16,231,244,0.25) 22% 54%,
      var(--sns-lime) 54% 74%,
      rgba(168,255,0,0.08) 74% 100%
    );
  box-shadow:
    0 0 15px rgba(16,231,244,0.24),
    0 0 18px rgba(168,255,0,0.13);
}

body.sns-iracing-ui .header-inner {
  width: min(1500px, calc(100% - 40px)) !important;
  max-width: 1500px !important;
  min-height: 94px !important;
  gap: 24px !important;
}

/* 8.9B1: the header brand is now a true logo slot, not a cropped banner box. */
body.sns-iracing-ui .site-header .brand {
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 300px !important;
  max-width: 360px !important;
  height: 90px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/*
  The tight 8.9B1 crop contains only SNS + MOTORSPORTS.
  screen blending makes the near-black artwork merge into the site's header
  instead of reading as a rectangular image tile.
*/
body.sns-iracing-ui .site-header .brand img,
body.sns-iracing-ui .sns-cyber-logo {
  content: url("sns_logo_cyber_header_clean.png") !important;
  display: block !important;
  width: 330px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 88px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 4px rgba(16, 231, 244, 0.15))
    drop-shadow(0 0 5px rgba(168, 255, 0, 0.10));
}

body.sns-iracing-ui .site-header .brand .brand-mark,
body.sns-iracing-ui .site-header .brand .brand-copy,
body.sns-iracing-ui .site-header .brand > div:not(:has(img)) {
  color: #e8eff1;
}

body.sns-iracing-ui .sns-brand-original-hidden {
  display: none !important;
}

/* Navigation ------------------------------------------------------------- */

body.sns-iracing-ui .site-header nav {
  align-self: stretch;
  display: flex;
  align-items: stretch !important;
}

body.sns-iracing-ui .site-header .nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  padding: 0 13px !important;
  color: #a6b4ba !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--sns-condensed) !important;
  font-size: 0.79rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
  text-decoration: none !important;
}

body.sns-iracing-ui .site-header .nav-link:hover {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(16,231,244,0.04), rgba(16,231,244,0.012)) !important;
}

body.sns-iracing-ui .site-header .nav-link.active,
body.sns-iracing-ui .site-header .nav-link.sns-current,
body.sns-iracing-ui .site-header .nav-link[aria-current="page"] {
  color: var(--sns-cyan-2) !important;
  background:
    linear-gradient(180deg, rgba(16,231,244,0.11), rgba(16,231,244,0.018)) !important;
}

body.sns-iracing-ui .site-header .nav-link.active::after,
body.sns-iracing-ui .site-header .nav-link.sns-current::after,
body.sns-iracing-ui .site-header .nav-link[aria-current="page"]::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 0 !important;
  height: 3px !important;
  background: var(--sns-cyan) !important;
  box-shadow:
    0 0 12px rgba(16,231,244,0.5),
    0 -3px 18px rgba(16,231,244,0.14);
}

/* Race operations strip ------------------------------------------------- */

body.sns-iracing-ui .sns-race-strip {
  border-bottom: 1px solid rgba(16,231,244,0.2) !important;
  background:
    linear-gradient(180deg, #081015, #050a0e) !important;
}

body.sns-iracing-ui .sns-race-strip-inner {
  width: min(1500px, calc(100% - 40px));
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

body.sns-iracing-ui .sns-race-strip-item {
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-right: 1px solid rgba(114, 144, 154, 0.13);
}

body.sns-iracing-ui .sns-race-strip-item:first-child {
  padding-left: 0;
}

body.sns-iracing-ui .sns-race-strip-label {
  color: #65777e;
  font: 900 0.63rem/1 var(--sns-condensed);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.sns-iracing-ui .sns-race-strip-value {
  color: #dce5e8;
  font: 900 0.73rem/1 var(--sns-condensed);
  white-space: nowrap;
}

body.sns-iracing-ui .sns-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sns-lime);
  box-shadow: 0 0 12px rgba(168, 255, 0, 0.72);
}

/* Content width --------------------------------------------------------- */

body.sns-iracing-ui .content-inner,
body.sns-iracing-ui .header-inner {
  width: min(1500px, calc(100% - 44px)) !important;
  max-width: 1500px !important;
}

/* Beta banner ----------------------------------------------------------- */

body.sns-iracing-ui .beta-banner,
body.sns-iracing-ui [class*="beta-banner"] {
  border: 1px solid rgba(168,255,0,0.22) !important;
  border-left: 3px solid var(--sns-lime) !important;
  border-radius: var(--sns-radius) !important;
  background:
    linear-gradient(90deg, rgba(168,255,0,0.08), rgba(7,14,18,0.96) 36%, rgba(16,231,244,0.035)) !important;
  color: #cbd6da !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.015),
    0 6px 18px rgba(0,0,0,0.24) !important;
}

/* Heroes ---------------------------------------------------------------- */

body.sns-iracing-ui .hero,
body.sns-iracing-ui .page-hero {
  position: relative;
  overflow: hidden !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(16,231,244,0.28) !important;
  background-color: #061015 !important;
}

body.sns-iracing-ui .hero::before,
body.sns-iracing-ui .page-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,6,8,0.99) 0%, rgba(3,8,11,0.92) 29%, rgba(3,8,11,0.53) 58%, rgba(3,8,11,0.14) 100%),
    linear-gradient(180deg, rgba(3,7,10,0.04), rgba(3,7,10,0.62)) !important;
  pointer-events: none;
}

body.sns-iracing-ui .hero::after,
body.sns-iracing-ui .page-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: min(680px, 48%);
  height: 3px;
  background:
    linear-gradient(90deg, var(--sns-cyan) 0 54%, var(--sns-lime) 54% 100%);
  box-shadow:
    0 0 15px rgba(16,231,244,0.3),
    0 0 12px rgba(168,255,0,0.17);
}

body.sns-iracing-ui .hero .content-inner,
body.sns-iracing-ui .page-hero .content-inner {
  position: relative !important;
  z-index: 3 !important;
}

body.sns-iracing-ui .hero .content-inner {
  padding-top: 80px !important;
  padding-bottom: 78px !important;
}

body.sns-iracing-ui .page-hero .content-inner {
  padding-top: 52px !important;
  padding-bottom: 44px !important;
}

body.sns-iracing-ui .hero .eyebrow,
body.sns-iracing-ui .page-hero .eyebrow,
body.sns-iracing-ui .section-heading .eyebrow,
body.sns-iracing-ui .event-card .eyebrow {
  color: var(--sns-cyan) !important;
  font-family: var(--sns-condensed) !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase;
}

body.sns-iracing-ui .hero h1,
body.sns-iracing-ui .page-hero h1 {
  color: #f5f8f9 !important;
  font-family: var(--sns-condensed) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  letter-spacing: -0.038em !important;
  text-transform: uppercase;
  text-shadow:
    0 10px 30px rgba(0,0,0,0.5),
    0 0 16px rgba(16,231,244,0.05);
}

body.sns-iracing-ui .hero h1 {
  font-size: clamp(3rem, 6vw, 5.25rem) !important;
  line-height: 0.92 !important;
}

body.sns-iracing-ui .page-hero h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.9rem) !important;
  line-height: 0.96 !important;
}

body.sns-iracing-ui .hero p,
body.sns-iracing-ui .page-hero p {
  color: #aebcc1 !important;
}

/* Class pills ----------------------------------------------------------- */

body.sns-iracing-ui .hero-pills span,
body.sns-iracing-ui .class-badge {
  border-radius: 999px !important;
  background: rgba(4, 10, 13, 0.84) !important;
  font-family: var(--sns-condensed) !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em;
}

body.sns-iracing-ui .class-badge.gtp,
body.sns-iracing-ui .hero-pills .gtp {
  border-color: rgba(16,231,244,0.58) !important;
  color: var(--sns-cyan-2) !important;
  box-shadow: inset 0 0 14px rgba(16,231,244,0.05);
}

body.sns-iracing-ui .class-badge.gtd-pro,
body.sns-iracing-ui .hero-pills .gtd-pro {
  border-color: rgba(239,60,72,0.58) !important;
  color: #ff929a !important;
}

body.sns-iracing-ui .class-badge.gtd,
body.sns-iracing-ui .hero-pills .gtd {
  border-color: rgba(168,255,0,0.5) !important;
  color: var(--sns-lime-2) !important;
  box-shadow: inset 0 0 14px rgba(168,255,0,0.045);
}

/* Buttons --------------------------------------------------------------- */

body.sns-iracing-ui .button,
body.sns-iracing-ui button {
  position: relative;
  overflow: hidden;
  border-radius: 3px !important;
  font-family: var(--sns-condensed) !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  box-shadow: none !important;
}

body.sns-iracing-ui .button:not(.primary),
body.sns-iracing-ui button:not(.primary):not(.tab-button) {
  border: 1px solid #24414b !important;
  background:
    linear-gradient(180deg, #101b20, #091116) !important;
  color: #d9e3e6 !important;
}

body.sns-iracing-ui .button:not(.primary):hover,
body.sns-iracing-ui button:not(.primary):not(.tab-button):hover {
  border-color: rgba(16,231,244,0.6) !important;
  background:
    linear-gradient(180deg, #112229, #0a161b) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

body.sns-iracing-ui .button.primary,
body.sns-iracing-ui .sns-primary-action {
  border: 1px solid rgba(16,231,244,0.78) !important;
  background:
    linear-gradient(180deg, #1be7f3, #08bfcf) !important;
  color: #011014 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 18px rgba(16,231,244,0.12) !important;
}

body.sns-iracing-ui .button.primary::after,
body.sns-iracing-ui .sns-primary-action::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--sns-lime);
  opacity: 0.7;
}

body.sns-iracing-ui .button.primary:hover,
body.sns-iracing-ui .sns-primary-action:hover {
  background:
    linear-gradient(180deg, #52f4ff, #10d6e5) !important;
  box-shadow:
    0 0 24px rgba(16,231,244,0.18),
    0 0 10px rgba(168,255,0,0.08) !important;
}

/* Sections -------------------------------------------------------------- */

body.sns-iracing-ui .content-section {
  background: transparent !important;
}

body.sns-iracing-ui .content-section.alt {
  background:
    linear-gradient(180deg, rgba(9,17,22,0.5), rgba(3,8,11,0.22)) !important;
  border-top: 1px solid rgba(16,231,244,0.09) !important;
  border-bottom: 1px solid rgba(168,255,0,0.06) !important;
}

body.sns-iracing-ui .content-section .content-inner {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

body.sns-iracing-ui .section-heading h2 {
  color: #f2f6f7 !important;
  font-family: var(--sns-condensed) !important;
  font-size: clamp(1.7rem, 2.5vw, 2.35rem) !important;
  font-style: italic;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase;
}

body.sns-iracing-ui .section-heading p,
body.sns-iracing-ui .muted {
  color: var(--sns-muted) !important;
}

/* Panels / cards -------------------------------------------------------- */

body.sns-iracing-ui .event-card,
body.sns-iracing-ui .leader-card,
body.sns-iracing-ui .feature-card,
body.sns-iracing-ui .driver-card,
body.sns-iracing-ui .team-card,
body.sns-iracing-ui .profile-card,
body.sns-iracing-ui .number-card,
body.sns-iracing-ui .registration-card,
body.sns-iracing-ui .account-card,
body.sns-iracing-ui .card,
body.sns-iracing-ui .panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sns-line) !important;
  border-radius: var(--sns-radius-lg) !important;
  background:
    linear-gradient(180deg, rgba(12,23,29,0.97), rgba(6,13,17,0.98)) !important;
  box-shadow:
    var(--sns-shadow-soft),
    inset 0 1px 0 rgba(255,255,255,0.014) !important;
}

body.sns-iracing-ui .event-card::before,
body.sns-iracing-ui .leader-card::before,
body.sns-iracing-ui .feature-card::before,
body.sns-iracing-ui .driver-card::before,
body.sns-iracing-ui .team-card::before,
body.sns-iracing-ui .profile-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background:
    linear-gradient(180deg, var(--sns-cyan), rgba(16,231,244,0.15) 62%, var(--sns-lime));
  box-shadow: 0 0 10px rgba(16,231,244,0.15);
}

body.sns-iracing-ui .event-card::after,
body.sns-iracing-ui .leader-card::after,
body.sns-iracing-ui .feature-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(16,231,244,0.35), rgba(168,255,0,0.22), transparent);
}

body.sns-iracing-ui .event-card:hover,
body.sns-iracing-ui .leader-card:hover,
body.sns-iracing-ui .feature-card:hover,
body.sns-iracing-ui .driver-card:hover,
body.sns-iracing-ui .team-card:hover {
  border-color: rgba(16,231,244,0.36) !important;
}

body.sns-iracing-ui .event-number {
  color: var(--sns-lime) !important;
  font-family: var(--sns-condensed) !important;
  font-style: italic;
  font-weight: 900 !important;
}

body.sns-iracing-ui .event-card h3,
body.sns-iracing-ui .leader-card h3,
body.sns-iracing-ui .feature-card h3 {
  color: #fff !important;
  font-family: var(--sns-condensed) !important;
  font-weight: 900 !important;
}

/* Tables ---------------------------------------------------------------- */

body.sns-iracing-ui .sns-table-wrap {
  overflow-x: auto;
  width: 100%;
}

body.sns-iracing-ui table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid var(--sns-line) !important;
  border-radius: var(--sns-radius) !important;
  background: #050b0f !important;
  color: var(--sns-text-2) !important;
  font-variant-numeric: tabular-nums;
}

body.sns-iracing-ui table thead th {
  padding: 10px 11px !important;
  border-bottom: 1px solid rgba(16,231,244,0.22) !important;
  background:
    linear-gradient(180deg, #102027, #0a1419) !important;
  color: #aebfc5 !important;
  font-family: var(--sns-condensed) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sns-iracing-ui table thead th:first-child {
  box-shadow: inset 3px 0 0 var(--sns-cyan);
}

body.sns-iracing-ui table tbody td {
  padding: 10px 11px !important;
  border-bottom: 1px solid rgba(86,122,132,0.12) !important;
  color: #d6e0e3 !important;
}

body.sns-iracing-ui table tbody tr {
  background: rgba(6,13,17,0.93) !important;
}

body.sns-iracing-ui table tbody tr:nth-child(even) {
  background: rgba(10,19,24,0.93) !important;
}

body.sns-iracing-ui table tbody tr:hover {
  background: rgba(16,231,244,0.075) !important;
  box-shadow:
    inset 3px 0 0 var(--sns-cyan),
    inset -1px 0 0 rgba(168,255,0,0.17);
}

/* Tabs ------------------------------------------------------------------ */

body.sns-iracing-ui .tabs {
  border-bottom: 1px solid var(--sns-line) !important;
  gap: 4px !important;
}

body.sns-iracing-ui .tab-button {
  border: 1px solid transparent !important;
  border-radius: 3px 3px 0 0 !important;
  background: transparent !important;
  color: var(--sns-muted) !important;
  font-family: var(--sns-condensed) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
}

body.sns-iracing-ui .tab-button:hover {
  color: var(--sns-cyan-2) !important;
  background: rgba(16,231,244,0.035) !important;
}

body.sns-iracing-ui .tab-button.active {
  border-color: var(--sns-line) !important;
  border-bottom-color: var(--sns-panel) !important;
  background:
    linear-gradient(180deg, rgba(16,231,244,0.09), var(--sns-panel)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 2px 0 var(--sns-cyan),
    inset 0 -1px 0 rgba(168,255,0,0.12);
}

/* Forms ----------------------------------------------------------------- */

body.sns-iracing-ui input,
body.sns-iracing-ui select,
body.sns-iracing-ui textarea {
  border: 1px solid #24424c !important;
  border-radius: 3px !important;
  background: #050c10 !important;
  color: var(--sns-text) !important;
  outline: none !important;
}

body.sns-iracing-ui input:focus,
body.sns-iracing-ui select:focus,
body.sns-iracing-ui textarea:focus {
  border-color: var(--sns-cyan) !important;
  box-shadow:
    0 0 0 3px rgba(16,231,244,0.09),
    inset 0 -1px 0 rgba(168,255,0,0.16) !important;
}

body.sns-iracing-ui label {
  color: #c8d4d8;
}

body.sns-iracing-ui fieldset {
  border-color: var(--sns-line) !important;
  background: rgba(6,13,17,0.82) !important;
}

/* Status --------------------------------------------------------------- */

body.sns-iracing-ui .sns-status-good {
  border-color: rgba(168,255,0,0.35) !important;
  background: var(--sns-lime-soft) !important;
  color: var(--sns-lime-2) !important;
}

body.sns-iracing-ui .sns-status-info {
  border-color: rgba(16,231,244,0.42) !important;
  background: var(--sns-cyan-soft) !important;
  color: var(--sns-cyan-2) !important;
}

body.sns-iracing-ui .sns-status-warn {
  border-color: rgba(243,173,53,0.42) !important;
  background: rgba(243,173,53,0.1) !important;
  color: #ffc96b !important;
}

body.sns-iracing-ui .sns-status-bad {
  border-color: rgba(239,60,72,0.44) !important;
  background: var(--sns-red-soft) !important;
  color: #ff929a !important;
}

/* Timing / pace --------------------------------------------------------- */

body.sns-iracing-ui .lap-time,
body.sns-iracing-ui [class*="delta"],
body.sns-iracing-ui [class*="pace"] strong {
  color: var(--sns-cyan-2) !important;
  font-variant-numeric: tabular-nums;
}

body.sns-iracing-ui [class*="apex"] {
  --sns-local-accent: var(--sns-lime);
}

/* Alerts / empty states ------------------------------------------------- */

body.sns-iracing-ui .empty-state,
body.sns-iracing-ui .alert,
body.sns-iracing-ui [class*="notice"] {
  border-color: var(--sns-line) !important;
  border-left-color: var(--sns-cyan) !important;
  background: rgba(6,13,17,0.9) !important;
  color: var(--sns-muted) !important;
}

/* Footer ---------------------------------------------------------------- */

body.sns-iracing-ui footer,
body.sns-iracing-ui .site-footer {
  position: relative;
  border-top: 1px solid rgba(16,231,244,0.24) !important;
  background:
    linear-gradient(180deg, #04090c, #020405) !important;
  color: var(--sns-muted) !important;
}

body.sns-iracing-ui footer::before,
body.sns-iracing-ui .site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background:
    linear-gradient(90deg, var(--sns-cyan), transparent 35%, transparent 65%, var(--sns-lime));
  opacity: 0.5;
}

/* Scrollbars ------------------------------------------------------------ */

body.sns-iracing-ui {
  scrollbar-width: thin;
  scrollbar-color: #1e505d #04090c;
}

body.sns-iracing-ui ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.sns-iracing-ui ::-webkit-scrollbar-track {
  background: #04090c;
}

body.sns-iracing-ui ::-webkit-scrollbar-thumb {
  border: 2px solid #04090c;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #1d5f6b, #173b43);
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 980px) {
  body.sns-iracing-ui .site-header {
    position: relative !important;
  }

  body.sns-iracing-ui .site-header .brand {
    flex-basis: 250px !important;
    width: 250px !important;
    min-width: 210px !important;
    max-width: 260px !important;
    height: 76px !important;
  }

  body.sns-iracing-ui .site-header .brand img,
  body.sns-iracing-ui .sns-cyber-logo {
    width: 245px !important;
    height: auto !important;
    max-height: 72px !important;
  }

  body.sns-iracing-ui .sns-race-strip-inner {
    width: calc(100% - 28px);
  }
}

@media (max-width: 650px) {
  body.sns-iracing-ui .content-inner,
  body.sns-iracing-ui .header-inner {
    width: calc(100% - 26px) !important;
  }

  body.sns-iracing-ui .hero h1 {
    font-size: 3rem !important;
  }

  body.sns-iracing-ui .site-header .brand {
    flex-basis: 185px !important;
    width: 185px !important;
    min-width: 160px !important;
    max-width: 195px !important;
    height: 64px !important;
  }

  body.sns-iracing-ui .site-header .brand img,
  body.sns-iracing-ui .sns-cyber-logo {
    width: 182px !important;
    max-height: 60px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sns-iracing-ui *,
  body.sns-iracing-ui *::before,
  body.sns-iracing-ui *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   SNS PHASE 8.9B3 - LOGO ONLY + SEAMLESS HEADER BLEND
   ========================================================================== */

/* Remove the old textual brand copy beside the selected SNS artwork. */
body.sns-iracing-ui .site-header .brand > span,
body.sns-iracing-ui .site-header .brand > div,
body.sns-iracing-ui .site-header .brand > strong,
body.sns-iracing-ui .site-header .brand > small {
  display: none !important;
}

/* Make the brand area a clean logo-only slot. */
body.sns-iracing-ui .site-header .brand {
  flex: 0 0 370px !important;
  width: 370px !important;
  min-width: 330px !important;
  max-width: 390px !important;
  height: 92px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* The replacement PNG already contains a real alpha feather on all four edges. */
body.sns-iracing-ui .site-header .brand img,
body.sns-iracing-ui .sns-cyber-logo {
  content: url("sns_logo_cyber_header_clean.png?v=8.9B3") !important;
  display: block !important;
  width: 360px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 90px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.98;
  filter:
    drop-shadow(0 0 5px rgba(16, 231, 244, 0.12))
    drop-shadow(0 0 6px rgba(168, 255, 0, 0.08)) !important;
}

/* Do not let an earlier pseudo-element create another edge box. */
body.sns-iracing-ui .site-header .brand::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 980px) {
  body.sns-iracing-ui .site-header .brand {
    flex-basis: 275px !important;
    width: 275px !important;
    min-width: 235px !important;
    max-width: 285px !important;
    height: 76px !important;
  }

  body.sns-iracing-ui .site-header .brand img,
  body.sns-iracing-ui .sns-cyber-logo {
    width: 270px !important;
    max-height: 74px !important;
  }
}

@media (max-width: 650px) {
  body.sns-iracing-ui .site-header .brand {
    flex-basis: 205px !important;
    width: 205px !important;
    min-width: 180px !important;
    max-width: 215px !important;
    height: 64px !important;
  }

  body.sns-iracing-ui .site-header .brand img,
  body.sns-iracing-ui .sns-cyber-logo {
    width: 200px !important;
    max-height: 61px !important;
  }
}