@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&display=swap');

/*  Global  */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: white;
  line-height: 1.6;
  background: linear-gradient(180deg, #0e1525 0%, #090f1c 100%);
}

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/*  Navbar  */
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.7);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 20px;
}

nav .logo {
  height: 40px;
  width: auto;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 20px;
  font-weight: bold;
  padding: 6px 12px;
  transition: background-color 0.3s, border-radius 0.3s;
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

/*  Hero Section  */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
}

/*  About Section  */
.about {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 12px;
  margin-bottom: 60px;
}

.about h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 28px;
}

.about p {
  margin-bottom: 20px;
  color: #ddd;
}

/*  Social Section  */
.nav-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 8px;
}
.nav-socials a {
  display: flex;
  align-items: center;
  opacity: 0.45;
  transition: opacity 0.2s;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
}
.nav-socials a:hover {
  opacity: 1;
  background: none;
}
.nav-socials img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.social a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background-color: #5865F2;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.social a:hover {
  background-color: #4752c4;
}

.social img {
  display: block;
  width: 24px;
  height: 24px;
}

/*Fade Animation*/
.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade.show {
  opacity: 1;
  transform: translateY(0);
}

/*  Container  */
.container {
  max-width: 700px;
  margin: 60px auto;
  padding: 0 20px;
}

/*  Toggle Buttons  */
.toggle-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.toggle-buttons button {
  flex: 1;
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  background-color: #161616;
  color: #eaeaea;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-buttons button.active {
  background-color: #5865F2;
  color: #fff;
}

.toggle-buttons button:hover {
  background-color: #333333;
}

/*  Pack Styling  */
.pack {
  background-color: #161616;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.pack-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pack-text {
  flex: 1 1 300px;
}

.pack-image {
  flex: 0 0 200px;
}

.pack-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.pack h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
}

.pack ul {
  margin: 10px 0 10px 20px;
  color: #ccc;
}

.pack-label {
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 10px;
  color: #fff;
  border-bottom: 2px solid #5865F2;
  padding-bottom: 4px;
}

.other-info {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 12px;
}

.download-buttons > a,
.download {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;

  padding: 12px 18px;
  background: linear-gradient(135deg, #5865F2, #7b83ff);
  color: #fff;
  text-decoration: none;

  border-radius: 12px;
  border: 1px solid rgba(140, 160, 255, 0.28);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;

  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Sweep shimmer on hover */
.download-buttons > a::after,
.download::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transition: left 0.38s ease;
  pointer-events: none;
}

.download-buttons > a:hover,
.download:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 12px 28px rgba(88, 101, 242, 0.45);
}

.download-buttons > a:hover::after,
.download:hover::after {
  left: 130%;
}

.download-buttons > a:active,
.download:active {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(88, 101, 242, 0.3);
}


/*  Hidden Class  */
.hidden {
  display: none;
}

/*  Categories  */
.category {
  margin-bottom: 40px;
}

.category h2 {
  font-size: 24px;
  margin-bottom: 16px;
  border-bottom: 2px solid #5865F2;
  padding-bottom: 6px;
}

/*  FAQ Section  */
.faq {
  background-color: rgba(0,0,0,0.4);
  border-radius: 12px;
  padding: 40px 20px;
  margin-bottom: 60px;
}

.faq h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  border-bottom: 2px solid #5865F2;
  padding-bottom: 6px;
}

.faq-item {
  margin-bottom: 30px;
}

.faq-item h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.faq-item p,
.faq-item ul {
  margin-left: 20px;
  color: #ccc;
}

.faq-item ul li {
  margin-bottom: 6px;
}

.faq-item .other-info {
  color: #aaa;
  margin-top: 8px;
}

/* Sheep Video */
.Sheep {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.Sheep video {
  max-width: 100%;
  width: 560px;
  height: 315px;
  border-radius: 12px;
  pointer-events: none;
  object-fit: cover;  
}

/*  Responsive  */
@media (max-width: 600px) {
  nav a {
    margin: 0 10px;
    font-size: 14px;
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 48px);
  }
  .about {
    padding: 40px 15px;
  }
  .social a {
    font-size: 14px;
    padding: 10px 14px;
  }
  .social img {
    width: 20px;
    height: 20px;
  }
  .toggle-buttons button {
    font-size: 14px;
  }
  .fun-video iframe {
    width: 100%;
    height: auto;
  }
}

/*  Download Stats Section */
.download-stats {
  max-width: 800px;
  margin: 40px auto;
  padding: 40px 20px;
  background-color: rgba(0,0,0,0.5);
  border-radius: 12px;
  text-align: center;
}

.download-stats h2 {
  font-size: 32px;
  margin-bottom: 30px;
  color: #fff;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.stat-box {
  background-color: #161616;
  border-radius: 10px;
  padding: 15px 20px;
  min-width: 120px;
  text-align: center;
  font-weight: bold;
}

.stat-box span {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
}

.pack-box {
  margin-bottom: 10px;
}

.pack-box .stat-box a {
  color: #fff;
  text-decoration: none;
}

.pack-box .download-count {
  display: block;
  color: #ccc;
  margin-top: 4px;
}

.leaderboard {
  margin: 20px 0 30px 0;
  font-size: 18px;
  color: #ccc;
}

.toggle-view {
  padding: 10px 20px;
  background: rgba(61, 139, 255, 0.12);
  color: #a8bdff;
  border: 1px solid rgba(61, 139, 255, 0.3);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  margin: 5px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.toggle-view:hover {
  background: rgba(61, 139, 255, 0.22);
  color: #c8d8ff;
  border-color: rgba(61, 139, 255, 0.5);
  transform: translateY(-1px);
}

/* Vouch System */
.vouch-panel {
  position: relative;
  max-width: 1040px;
  margin: 18px auto 18px;
  padding: 22px 24px 18px;
  background: linear-gradient(150deg, rgba(10, 20, 40, 0.97), rgba(8, 16, 32, 0.97));
  border: 1px solid rgba(126, 178, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.vouch-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 140px at -8% -40%, rgba(125, 150, 255, 0.12), transparent 72%),
    radial-gradient(320px 120px at 105% 120%, rgba(83, 170, 255, 0.1), transparent 72%);
  pointer-events: none;
}

.vouch-panel h2 {
  position: relative;
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: 0;
}

.vouch-meta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dce7ff;
  margin-bottom: 10px;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(132, 164, 255, 0.18);
  background: rgba(11, 24, 47, 0.56);
}

.vouch-form {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.vouch-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(61, 139, 255, 0.28);
  background: rgba(8, 15, 30, 0.9);
  color: #e0e8ff;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.vouch-form input::placeholder { color: rgba(168, 189, 255, 0.38); }
.vouch-form input:focus {
  border-color: rgba(61, 139, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.1);
  outline: none;
}

.vouch-form button {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #5865F2, #7b83ff);
}

.vouch-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.vouch-status {
  position: relative;
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(61, 139, 255, 0.06);
  border: 1px solid rgba(61, 139, 255, 0.12);
  color: rgba(168, 189, 255, 0.65);
  font-weight: 600;
}

.vouch-status.ok {
  color: #98f0b2;
}

.vouch-status.err {
  color: #ff9aa8;
}

.vouch-ticker {
  margin: 18px auto 22px;
  width: min(96vw, 1040px);
}

.vouch-ticker-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8bce8;
  margin-bottom: 8px;
}

.vouch-ticker-track-wrap {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(110, 144, 255, 0.2);
  background: rgba(7, 13, 25, 0.9);
  position: relative;
}

.vouch-ticker-track {
  display: inline-flex;
  gap: 10px;
  padding: 12px 0;
  white-space: nowrap;
  min-width: max-content;
  will-change: transform;
}

.vouch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(110, 144, 255, 0.26);
  background: rgba(22, 34, 58, 0.9);
  color: #e4edff;
  font-size: 13px;
}

.vouch-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(152, 180, 255, 0.4);
}

.vouch-chip-name {
  font-weight: 700;
  color: #f2f7ff;
}

.vouch-chip-sep {
  opacity: 0.7;
}

.vouch-chip-msg {
  color: #d8e6ff;
}

@media (max-width: 700px) {
  .vouch-panel {
    margin: 18px 14px 22px;
    padding: 16px;
  }

  .vouch-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vouch-form button {
    width: 100%;
    min-width: 0;
  }
}

.toggle-view.hidden {
  display: none;
}


/* Remove bullets from leaderboard */
.leaderboard ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Hidden elements remain hidden even with fade */
.fade.hidden {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}

/* Ensure packs container stays hidden initially */
#packsContainer.hidden {
  display: none !important;
}

/* Section title styling */
.leaderboard h3 {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12px;
}

/* Java / Bedrock labels */
.leaderboard > div {
  font-size: 20px;
  font-weight: bold;
  color: #eaeaea;
  margin-top: 14px;
  margin-bottom: 6px;
}

/* Pack list items */
.leaderboard li {
  font-size: 16px;
  font-weight: normal;
  color: #ccc;
}

#popularJava,
#popularBedrock {
  list-style: none;
  padding: 0;
  margin: 0;
}

#popularJava li,
#popularBedrock li {
  margin: 6px 0;
}

.countdown {
  max-width: 1100px;
  margin: 60px auto 40px;
  display: flex;
  justify-content: center;
}

.countdown-box {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  padding: 40px 60px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.countdown-box h2 {
  margin-bottom: 16px;
  font-size: 24px;
}

.countdown-display {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: transform 0.12s ease;
}

.countdown {
  position: relative;
}

.online-box {
    position: fixed;
    top: 20px;
    left: 20px;

    background: #0f1b3d;
    padding: 12px 18px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    font-weight: 600;
}

.online-text {
    color: white;
}

.online-indicator {
    width: 10px;
    height: 10px;
    background: #00ff66;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff66;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 5px #00ff66;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 15px #00ff66;
        transform: scale(1.2);
    }
    100% {
        box-shadow: 0 0 5px #00ff66;
        transform: scale(1);
    }
}

.online-box {
    position: fixed;
    top: 100px;
    left: 40px;

    background: #0f1b3d;
    padding: 10px 18px;
    border-radius: 14px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;

    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    z-index: 99999;
}

.login-btn {
  background: linear-gradient(135deg, #5865F2, #7b83ff);
  color: white;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(130, 165, 255, 0.26);
  box-shadow: 0 4px 14px rgba(31, 53, 128, 0.3);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.login-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

#auth-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

#auth-area img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

#auth-area span {
  font-weight: 600;
}

#auth-area a {
  font-weight: 600;
  text-decoration: none;
  color: #d9e7ff;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(130, 162, 245, 0.22);
  background: rgba(89, 108, 187, 0.14);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

#auth-area a:hover {
  color: #ffffff;
  border-color: rgba(171, 191, 255, 0.4);
  background: rgba(104, 124, 255, 0.2);
}

#announcementBar {
  display: none;
  background: #0f172a; /* dark navy */
  color: #e2e8f0;
  padding: 14px;
  text-align: center;
  font-size: 15px;
  border-bottom: 2px solid #1e293b;
}

.profile-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 80px 0;
}

.profile-card {
  width: 100%;
  max-width: 1100px;
  background: #182233;
  padding: 50px;
  border-radius: 18px;
  color: white;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

/* Force true visual centering */
body {
  overflow-x: hidden;
}

textarea {
  resize: none;
}

.response-box {
  margin-top: 15px;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
}

.response-success {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.response-error {
  background: rgba(255, 77, 77, 0.15);
  color: #ff4d4d;
  border: 1px solid rgba(255, 77, 77, 0.4);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: white;
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

.role-badge svg {
  width: 14px;
  height: 14px;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ROLE COLORS */

.role-staff {
  background-image: linear-gradient(90deg, #ff4d4d, #b30000);
}

.role-verified {
  background-image: linear-gradient(90deg, #1da1f2, #0d8ddb);
}

.role-contributor {
  background-image: linear-gradient(90deg, #22c55e, #15803d);
}

.role-owner {
  background-image: linear-gradient(90deg, #00e5ff, #0099cc);
}

.role-bedrock {
  background-image: linear-gradient(90deg, #ff8c00, #ff4500);
}

/* <---// 2026 UI Refresh //---> */
:root {
  /* Palette taken from the logo: cobalt donut, warm cream, no purple.
     Warm ground on purpose, so the single cool accent is the thing that pops. */
  --bg-top: #1d2636;
  --bg-mid: #16151a;
  --bg-bottom: #0f0e0c;
  --card-bg: linear-gradient(160deg, rgba(30, 27, 23, 0.95), rgba(20, 18, 16, 0.95));
  --card-border: rgba(61, 139, 255, 0.18);
  --text-main: #f5f1e8;
  --text-soft: #cdc4b6;
  --brand: #3d8bff;
  --brand-strong: #2f6fe0;
}

body {
  font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif;
  color: var(--text-main);
}

html.mods-page, body.mods-page {
  min-height: 100vh;
}

nav {
  width: min(1120px, calc(100% - 22px));
  margin: 10px auto 8px;
  padding: 9px 12px;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  background:
    linear-gradient(180deg, rgba(34, 58, 94, 0.42), rgba(16, 29, 52, 0.32)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(202, 226, 255, 0.2);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    0 16px 40px rgba(4, 8, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
  position: relative;
  overflow: hidden;
}

nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 34%, transparent 62%),
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at 84% 0%, rgba(255, 214, 231, 0.12), transparent 20%);
  opacity: 0.95;
}

nav::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 1px;
  height: 42%;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 72%);
  filter: blur(8px);
  opacity: 0.7;
}

nav .logo {
  height: 32px;
  margin: 0 6px 0 2px;
}

nav a {
  margin: 0;
  position: relative;
  border-radius: 10px;
  color: #d8e7ff;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

nav a:hover {
  background-color: rgba(61, 139, 255, 0.2);
  border-color: rgba(159, 183, 255, 0.26);
  color: #ffffff;
  transform: translateY(-1px);
}

nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7f95ff, #5fc0ff);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

nav a:hover::after,
nav a.nav-active::after {
  transform: scaleX(1);
}

nav a.nav-active {
  background: rgba(104, 124, 255, 0.26);
  border-color: rgba(150, 177, 255, 0.28);
  color: #ffffff;
}

#auth-area {
  margin-left: 0;
  padding-left: 10px;
  border-left: 1px solid rgba(130, 162, 245, 0.2);
}

#announcementBar {
  position: fixed;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  width: min(92vw, 980px);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(142, 176, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(18, 33, 63, 0.96), rgba(11, 22, 44, 0.96));
  color: #edf3ff;
  box-shadow:
    0 14px 34px rgba(6, 11, 24, 0.5),
    0 0 0 1px rgba(144, 176, 255, 0.12) inset;
  backdrop-filter: blur(8px);
  z-index: 1400;
  animation: announcementPulse 3s ease-in-out infinite;
}

#announcementBar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-weight: 700;
}

#announcementBar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(175, 198, 255, 0.36);
}

@keyframes announcementPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(6, 11, 24, 0.5), 0 0 0 1px rgba(144, 176, 255, 0.12) inset; }
  50% { box-shadow: 0 18px 42px rgba(8, 13, 28, 0.56), 0 0 0 1px rgba(173, 201, 255, 0.18) inset; }
}

@media (max-width: 700px) {
  #announcementBar {
    bottom: 40px;
    width: calc(100vw - 16px);
    padding: 10px 12px;
    border-radius: 12px;
  }

  #announcementBar > div {
    gap: 8px;
    font-size: 13px;
  }
}

.hero {
  min-height: clamp(220px, 38vh, 430px);
  height: auto;
  padding: 24px 20px 10px;
}

.hero h1 {
  letter-spacing: 0.02em;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.container {
  max-width: 1040px;
  margin: 24px auto 48px;
  padding: 0 18px;
}

.pack,
.about,
.faq,
.download-stats,
.countdown-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.pack {
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
}

.pack h3,
.about h2,
.faq h2 {
  color: #f5f8ff;
}

.pack p,
.pack li,
.about p,
.faq-item p,
.faq-item ul,
.other-info {
  color: var(--text-soft);
}

.download-stats {
  border-radius: 16px;
}

.stat-box {
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.95), rgba(8, 15, 27, 0.95));
  border: 1px solid rgba(132, 171, 255, 0.18);
  border-radius: 12px;
}

.toggle-view,
.vouch-form button,
.social a,
.login-btn {
  border-radius: 10px;
  border: 1px solid rgba(130, 165, 255, 0.26);
  box-shadow: 0 8px 20px rgba(31, 53, 128, 0.34);
}

.social {
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 14px;
}

.social a {
  background: linear-gradient(135deg, #5f71ff, #7584ff);
  transition: transform 0.16s ease, filter 0.2s ease;
}

.social a:hover {
  background: linear-gradient(135deg, #6c7dff, #8794ff);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.vouch-ticker-track-wrap {
  border-radius: 14px;
}

.Sheep video {
  border: 1px solid rgba(126, 178, 255, 0.25);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
}

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(132, 164, 255, 0.34);
  border-radius: 12px;
  background: linear-gradient(135deg, #6075ff, #8190ff);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31, 53, 128, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  filter: brightness(1.06);
}

.legal-links {
  width: min(96vw, 1040px);
  margin: 8px auto 26px;
  text-align: center;
  font-size: 12px;
  color: rgba(226, 236, 255, 0.7);
}

.legal-links a {
  color: rgba(226, 236, 255, 0.75);
  text-decoration: none;
}

.legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.legal-links .dot {
  margin: 0 8px;
  opacity: 0.6;
}

@media (max-width: 900px) {
  nav {
    width: calc(100% - 16px);
    margin: 8px auto 6px;
    justify-content: flex-start;
    border-radius: 12px;
  }

  #auth-area {
    margin-left: 0;
    width: 100%;
    border-left: 0;
    border-top: 1px solid rgba(130, 162, 245, 0.2);
    padding-top: 8px;
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 180px;
    padding-top: 16px;
  }

  .container {
    padding: 0 12px;
  }

  .pack {
    padding: 16px;
  }
}

/* <---// DYNAMIC LAYOUT & BUTTON REDESIGN — 2026 //---> */

/* ── Pack cards: hover lift + top accent glow ── */
.pack {
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.8s ease-out;
}
.pack::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #3d8bff 35%, #5fc0ff 65%, transparent 95%);
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 1;
  pointer-events: none;
}
.pack:hover {
  transform: translateY(-4px);
  border-color: rgba(140, 175, 255, 0.38);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
}
.pack:hover::before { opacity: 1; }

/* ── Hero: pulsing radial glow ── */
.hero { position: relative; overflow: hidden; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 55%, rgba(61, 139, 255, 0.16), transparent 72%);
  animation: heroPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
@keyframes heroPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1;    }
}

/* ── Hero tagline ── */
.hero-tagline {
  font-size: clamp(13px, 1.8vw, 16px);
  color: rgba(196, 215, 255, 0.65);
  font-weight: 500;
  margin: 10px 0 0;
  letter-spacing: 0.03em;
}

/* ── Stat boxes: gradient numbers + hover ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-box {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 16px;
}
.stat-box:hover {
  transform: translateY(-3px);
  border-color: rgba(140, 175, 255, 0.3);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}
.stat-box span {
  background: linear-gradient(135deg, #aac4ff, #79daff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 30px;
  font-weight: 800;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(168, 189, 255, 0.55);
  font-weight: 700;
  margin-bottom: 2px;
}
.stats-header {
  text-align: center;
  margin-bottom: 20px;
}
.stats-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #f3f7ff;
  margin: 0 0 4px;
}
.stats-subtitle {
  font-size: 13px;
  color: rgba(168, 189, 255, 0.55);
  margin: 0;
}

/* ── About section: left accent ── */
.about { border-left: 3px solid rgba(61, 139, 255, 0.5); }

/* ── Category headers: gradient text ── */
.category h2 {
  background: linear-gradient(90deg, #c6d8ff, #90eade);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-image: linear-gradient(90deg, rgba(61, 139, 255, 0.7), rgba(95, 192, 255, 0.5)) 1;
}

/* ── FAQ items: dividers ── */
.faq-item + .faq-item {
  border-top: 1px solid rgba(61, 139, 255, 0.12);
  padding-top: 24px;
}
.faq-item h3 { color: #c8d9ff; }

/* ── Social: per-platform hover shadows ── */
.social a:nth-child(1):hover { box-shadow: 0 10px 28px rgba(88, 101, 242, 0.5); }
.social a:nth-child(2):hover { box-shadow: 0 10px 28px rgba(220, 40, 40, 0.35); }
.social a:nth-child(3):hover { box-shadow: 0 10px 28px rgba(230, 100, 20, 0.35); }
.social a:nth-child(4):hover { box-shadow: 0 10px 28px rgba(145, 70, 255, 0.35); }

/* ── Download stats inner glow ── */
.download-stats { position: relative; overflow: hidden; }
.download-stats::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 200px at 50% 0%, rgba(61, 139, 255, 0.08), transparent 75%);
  pointer-events: none;
}

/* <---// BUTTON REDESIGN — ALL BUTTONS //---> */

/* Java / Bedrock toggle tabs */
.toggle-buttons {
  background: rgba(8, 14, 26, 0.8);
  border: 1px solid rgba(61, 139, 255, 0.2);
  border-radius: 12px;
  padding: 5px;
  gap: 5px;
}
.toggle-buttons button {
  padding: 9px 20px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(168, 189, 255, 0.7);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.toggle-buttons button.active {
  background: linear-gradient(135deg, #5865F2, #7b83ff);
  color: #fff;
  border-color: rgba(130, 165, 255, 0.26);
  box-shadow: 0 4px 14px rgba(31, 53, 128, 0.35);
}
.toggle-buttons button:hover:not(.active) {
  background: rgba(61, 139, 255, 0.12);
  color: #c8d8ff;
  border-color: rgba(61, 139, 255, 0.2);
}

/* Show All Packs / Collapse button */
.toggle-view {
  padding: 11px 24px;
  background: rgba(61, 139, 255, 0.1);
  color: #a8bdff;
  border: 1px solid rgba(61, 139, 255, 0.28);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.toggle-view:hover {
  background: rgba(61, 139, 255, 0.2);
  color: #c8d8ff;
  border-color: rgba(61, 139, 255, 0.48);
  transform: translateY(-1px);
}

/* Login button */
.login-btn {
  background: linear-gradient(135deg, #5865F2, #7b83ff);
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(130, 165, 255, 0.26);
  box-shadow: 0 4px 14px rgba(31, 53, 128, 0.3);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.login-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  opacity: 1;
}

/* Vouch submit button */
.vouch-form button {
  background: linear-gradient(135deg, #5865F2, #7b83ff);
  border: 1px solid rgba(130, 165, 255, 0.26);
  box-shadow: 0 4px 14px rgba(31, 53, 128, 0.3);
  font-size: 14px;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.vouch-form button:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Commission card pay button */
.commission-pay-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.28), rgba(123, 131, 255, 0.18));
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(140, 160, 255, 0.42);
  box-shadow: 0 6px 18px rgba(31, 53, 128, 0.22);
  font-size: 15px;
  font-weight: 700;
  margin-top: 12px;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.commission-pay-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.commission-pay-btn-price {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.commission-pay-btn-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  color: #071a0e;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* <---// POPULAR PACKS CAROUSEL //---> */
.pop-packs-section {
  width: min(96vw, 1040px);
  margin: 0 auto 28px;
}
.pop-packs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.pop-packs-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: rgba(168, 189, 255, 0.7);
}
.pop-packs-viewall {
  color: #a8bdff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(61, 139, 255, 0.28);
  padding: 4px 12px;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pop-packs-viewall:hover {
  background: rgba(61, 139, 255, 0.14);
  color: #fff;
  border-color: rgba(61, 139, 255, 0.5);
}
.pop-packs-wrap {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(61, 139, 255, 0.18);
  background: rgba(7, 13, 25, 0.88);
  padding: 16px 0;
}
.pop-packs-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 14px;
  width: max-content;
  will-change: transform;
}
.pop-pack-card {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 16px;
  min-width: 175px;
  background: linear-gradient(160deg, rgba(14, 24, 44, 0.95), rgba(9, 17, 33, 0.95));
  border: 1px solid rgba(61, 139, 255, 0.2);
  border-radius: 12px;
  text-decoration: none;
  vertical-align: top;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pop-pack-card:hover {
  border-color: rgba(61, 139, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.pop-pack-platform {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 9px;
  border-radius: 999px;
  width: fit-content;
}
.pop-pack-platform.java {
  background: rgba(95, 192, 255, 0.14);
  color: #5fc0ff;
  border: 1px solid rgba(95, 192, 255, 0.28);
}
.pop-pack-platform.bedrock {
  background: rgba(255, 160, 64, 0.12);
  color: #ffaa44;
  border: 1px solid rgba(255, 160, 64, 0.28);
}
.pop-pack-name {
  font-size: 13px;
  font-weight: 700;
  color: #e0e8ff;
  white-space: normal;
  max-width: 175px;
  line-height: 1.35;
}
.pop-pack-count {
  font-size: 11px;
  color: rgba(168, 189, 255, 0.55);
  font-weight: 600;
}

/* ── Site footer ── */
.site-footer {
  text-align: center;
  padding: 28px 20px 130px;
  font-size: 13px;
  color: rgba(168, 189, 255, 0.4);
}
.site-footer a {
  color: rgba(168, 189, 255, 0.55);
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.15s;
}
.site-footer a:hover {
  color: rgba(168, 189, 255, 0.9);
}
.site-footer .footer-sep {
  opacity: 0.3;
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pop-packs-section {
    margin-bottom: 20px;
  }
}

/* Shared cleanup pass */
:root {
  --bg-top: #1a2940;
  --bg-mid: #111a2b;
  --bg-bottom: #09111d;
  --card-bg: linear-gradient(180deg, rgba(15, 23, 36, 0.94), rgba(10, 17, 28, 0.96));
  --card-border: rgba(148, 180, 216, 0.14);
  --text-main: #eff5ff;
  --text-soft: #aebdd2;
  --brand: #6da6d9;
  --brand-strong: #8fc6f0;
}

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top, rgba(109, 166, 217, 0.12), transparent 30%),
    linear-gradient(180deg, var(--bg-top), var(--bg-mid) 34%, var(--bg-bottom));
}

nav {
  background:
    linear-gradient(180deg, rgba(76, 102, 142, 0.32), rgba(22, 39, 67, 0.24)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 40%, rgba(255, 214, 231, 0.05) 100%);
  border-color: rgba(214, 232, 255, 0.26);
  box-shadow:
    0 16px 42px rgba(4, 8, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(148, 196, 255, 0.1);
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
}

nav a {
  color: #e7f0ff;
}

nav a:hover,
nav a.nav-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(214, 232, 255, 0.24);
  color: #ffffff;
}

.hero {
  min-height: clamp(220px, 30vh, 360px);
  padding-top: 38px;
}

.hero::after {
  background: radial-gradient(ellipse 50% 34% at 50% 40%, rgba(109, 166, 217, 0.13), transparent 72%);
  animation: none;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
}

.hero-tagline,
.stats-subtitle,
.other-info,
.site-footer,
.pop-pack-count {
  color: rgba(214, 226, 241, 0.72);
}

.pack,
.about,
.faq,
.download-stats,
.countdown-box,
.pop-packs-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 38px rgba(4, 8, 15, 0.26);
}

.pack {
  border-radius: 18px;
}

.pack::before {
  background: linear-gradient(90deg, transparent 8%, rgba(143, 198, 240, 0.85), transparent 92%);
}

.pack:hover {
  transform: translateY(-2px);
  border-color: rgba(143, 198, 240, 0.24);
  box-shadow: 0 20px 42px rgba(4, 8, 15, 0.3);
}

.category h2 {
  color: #eff5ff;
  background: none;
  -webkit-text-fill-color: currentColor;
  border-bottom-color: rgba(109, 166, 217, 0.3);
}

.stat-box {
  background: linear-gradient(180deg, rgba(18, 28, 44, 0.92), rgba(10, 17, 27, 0.94));
  border-color: rgba(148, 180, 216, 0.15);
}

.stat-box span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #f1f7ff;
}

.download-buttons > a,
.download,
.social a,
.login-btn,
.toggle-view,
.vouch-form button,
.commission-pay-btn {
  background: linear-gradient(180deg, rgba(84, 130, 168, 0.95), rgba(66, 106, 141, 0.95));
  border-color: rgba(143, 198, 240, 0.18);
  box-shadow: 0 10px 24px rgba(20, 42, 61, 0.22);
}

.toggle-view {
  color: #eef6ff;
}

.download-buttons > a:hover,
.download:hover,
.social a:hover,
.login-btn:hover,
.toggle-view:hover,
.vouch-form button:not(:disabled):hover,
.commission-pay-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(20, 42, 61, 0.26);
}

.pack-image img {
  display: block;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.03);
}

#announcementBar {
  animation: none;
  background:
    linear-gradient(180deg, rgba(34, 58, 94, 0.42), rgba(16, 29, 52, 0.32)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(202, 226, 255, 0.2);
  box-shadow:
    0 16px 40px rgba(4, 8, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

.pop-pack-card {
  background: linear-gradient(180deg, rgba(16, 26, 40, 0.96), rgba(9, 16, 27, 0.96));
  border-color: rgba(148, 180, 216, 0.15);
}

.pop-pack-card:hover {
  border-color: rgba(143, 198, 240, 0.28);
  box-shadow: 0 14px 28px rgba(4, 8, 15, 0.24);
}

.pop-packs-viewall,
#auth-area a {
  background:
    linear-gradient(180deg, rgba(86, 116, 158, 0.28), rgba(18, 33, 58, 0.24)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 42%, rgba(255, 214, 231, 0.04));
  border-color: rgba(214, 232, 255, 0.22);
  box-shadow:
    0 10px 22px rgba(4, 8, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.global-sale-banner {
  width: min(1120px, calc(100% - 22px));
  margin: 8px auto 22px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(34, 58, 94, 0.42), rgba(16, 29, 52, 0.32)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(202, 226, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 16px 40px rgba(4, 8, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
  position: relative;
  top: 0;
  z-index: 40;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

.global-sale-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.global-sale-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.global-sale-banner__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 198, 215, 0.82);
}

.global-sale-banner__title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: #f4f8ff;
}

.global-sale-banner__meta {
  font-size: 14px;
  color: rgba(214, 226, 241, 0.76);
}

.global-sale-banner::before,
.global-sale-banner::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.global-sale-banner::before {
  top: -26px;
  left: -18px;
  width: 180px;
  height: 180px;
  background:
    radial-gradient(circle at 45% 45%, rgba(255, 184, 205, 0.36), transparent 34%),
    radial-gradient(circle at 58% 48%, rgba(255, 232, 170, 0.18), transparent 58%);
  filter: blur(10px);
  opacity: 0.85;
}

.global-sale-banner::after {
  right: -10px;
  bottom: -40px;
  width: 220px;
  height: 140px;
  background:
    radial-gradient(circle at 30% 45%, rgba(170, 255, 196, 0.16), transparent 26%),
    radial-gradient(circle at 58% 38%, rgba(255, 194, 214, 0.16), transparent 24%),
    radial-gradient(circle at 72% 62%, rgba(255, 225, 163, 0.14), transparent 24%);
  opacity: 0.8;
}

.global-sale-banner__countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 10px;
  min-width: min(100%, 320px);
}

.global-sale-banner__unit {
  padding: 10px 12px;
  text-align: center;
  background: rgba(104, 124, 255, 0.12);
  border: 1px solid rgba(150, 177, 255, 0.2);
  border-radius: 10px;
}

.global-sale-banner__unit strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: #f4f8ff;
}

.global-sale-banner__unit span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 200, 255, 0.55);
}

.global-sale-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(104, 124, 255, 0.26), rgba(95, 192, 255, 0.18));
  color: #eff7ff;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(150, 177, 255, 0.28);
  box-shadow: 0 10px 20px rgba(20, 42, 61, 0.24);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.global-sale-banner__cta:hover {
  filter: brightness(1.05);
}

.packs-toolbar,
#modTabBar,
.toggle-buttons {
  background:
    linear-gradient(180deg, rgba(34, 58, 94, 0.42), rgba(16, 29, 52, 0.32)) !important,
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(202, 226, 255, 0.2) !important;
  box-shadow:
    0 16px 40px rgba(4, 8, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

#modTabBar {
  gap: 6px !important;
  padding: 5px !important;
  border-radius: 12px !important;
}

#modTabBar button {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

#modTabBar button:hover {
  background: rgba(61, 139, 255, 0.2) !important;
  border-color: rgba(159, 183, 255, 0.26) !important;
}

#modTabLogin {
  background: rgba(104, 124, 255, 0.26) !important;
  color: #ffffff !important;
  border-color: rgba(150, 177, 255, 0.28) !important;
}

#modTabRegister {
  color: #d8e5f6 !important;
}

.toggle-buttons {
  overflow: hidden;
}

.toggle-buttons button {
  color: #d8e5f6 !important;
}

.toggle-buttons button.active {
  color: #f7fbff !important;
}

.toggle-thumb {
  background: linear-gradient(135deg, rgba(104, 124, 255, 0.26), rgba(95, 192, 255, 0.18)) !important;
  border: 1px solid rgba(150, 177, 255, 0.28) !important;
  box-shadow: 0 10px 20px rgba(20, 42, 61, 0.24) !important;
}

body.spring-sale-live::before,
body.spring-sale-live::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

body.spring-sale-live::before {
  top: 84px;
  left: -48px;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 196, 219, 0.18), transparent 16%),
    radial-gradient(circle at 36% 18%, rgba(255, 231, 170, 0.1), transparent 12%),
    radial-gradient(circle at 21% 37%, rgba(191, 255, 204, 0.08), transparent 13%),
    radial-gradient(circle at 66% 34%, rgba(255, 194, 220, 0.14), transparent 14%),
    radial-gradient(circle at 74% 26%, rgba(255, 228, 164, 0.08), transparent 10%),
    radial-gradient(circle at 61% 44%, rgba(190, 255, 205, 0.07), transparent 12%),
    radial-gradient(circle at 50% 50%, rgba(255, 194, 220, 0.08), transparent 52%);
  filter: blur(28px);
  opacity: 0.82;
}

body.spring-sale-live::after {
  right: -58px;
  bottom: 80px;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 192, 217, 0.16), transparent 16%),
    radial-gradient(circle at 41% 22%, rgba(255, 228, 165, 0.09), transparent 11%),
    radial-gradient(circle at 24% 40%, rgba(185, 255, 203, 0.08), transparent 12%),
    radial-gradient(circle at 68% 60%, rgba(255, 194, 220, 0.14), transparent 15%),
    radial-gradient(circle at 76% 52%, rgba(255, 232, 173, 0.08), transparent 10%),
    radial-gradient(circle at 60% 69%, rgba(189, 255, 206, 0.07), transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(255, 194, 220, 0.07), transparent 54%);
  filter: blur(30px);
  opacity: 0.78;
}

body.spring-sale-live .hero::after {
  background:
    radial-gradient(ellipse 46% 32% at 50% 40%, rgba(255, 192, 214, 0.12), transparent 70%),
    radial-gradient(ellipse 30% 22% at 60% 44%, rgba(184, 255, 205, 0.08), transparent 72%),
    radial-gradient(circle at 38% 34%, rgba(255, 244, 248, 0.08) 0 1.4%, transparent 1.8%),
    radial-gradient(circle at 62% 28%, rgba(255, 244, 248, 0.07) 0 1.3%, transparent 1.7%),
    radial-gradient(circle at 58% 48%, rgba(255, 231, 170, 0.08) 0 1.6%, transparent 2%);
}

body.spring-sale-live {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 198, 218, 0.13), transparent 18%),
    radial-gradient(circle at 86% 16%, rgba(186, 255, 205, 0.08), transparent 17%),
    radial-gradient(circle at 52% 88%, rgba(255, 229, 165, 0.1), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(145, 190, 255, 0.12), transparent 36%),
    radial-gradient(circle at 18% 46%, rgba(255, 238, 243, 0.08) 0 1.1%, transparent 1.6%),
    radial-gradient(circle at 82% 58%, rgba(255, 238, 243, 0.07) 0 1.1%, transparent 1.6%),
    radial-gradient(circle at 38% 76%, rgba(255, 236, 177, 0.06) 0 1.2%, transparent 1.8%),
    linear-gradient(180deg, #29446d 0%, #21385c 34%, #1a3150 68%, #162b45 100%);
}

body.spring-sale-live nav {
  background:
    linear-gradient(180deg, rgba(82, 111, 154, 0.34), rgba(22, 39, 67, 0.24)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 232, 239, 0.07) 42%, rgba(193, 255, 210, 0.05) 100%),
    radial-gradient(circle at 18% 18%, rgba(255, 206, 224, 0.1), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(193, 255, 210, 0.06), transparent 15%);
  border-color: rgba(214, 232, 255, 0.28);
  box-shadow:
    0 16px 42px rgba(4, 8, 20, 0.2),
    0 0 0 1px rgba(186, 255, 205, 0.05) inset,
    inset 0 1px 0 rgba(255, 244, 248, 0.34),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
}

body.spring-sale-live nav a {
  color: #eef5ff;
}

body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 225, 234, 0.3);
  color: #ffffff;
}

body.spring-sale-live nav a::after {
  background: linear-gradient(90deg, #ffbad3, #ffe3a4, #b3f8c4);
}

body.spring-sale-live .global-sale-banner {
  background:
    linear-gradient(180deg, rgba(82, 111, 154, 0.34), rgba(22, 39, 67, 0.24)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 232, 239, 0.07) 42%, rgba(193, 255, 210, 0.05) 100%),
    radial-gradient(circle at 18% 18%, rgba(255, 206, 224, 0.11), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(193, 255, 210, 0.06), transparent 15%);
  border-color: rgba(214, 232, 255, 0.28);
  box-shadow:
    0 16px 42px rgba(4, 8, 20, 0.2),
    0 0 0 1px rgba(186, 255, 205, 0.05) inset,
    inset 0 1px 0 rgba(255, 244, 248, 0.34),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
}

body.spring-sale-live .global-sale-banner__eyebrow {
  color: rgba(255, 198, 215, 0.86);
}

body.spring-sale-live .global-sale-banner__title,
body.spring-sale-live .global-sale-banner__unit strong {
  color: #f4f8ff;
}

body.spring-sale-live .global-sale-banner__meta,
body.spring-sale-live .global-sale-banner__unit span {
  color: rgba(214, 226, 241, 0.76);
}

body.spring-sale-live .global-sale-banner__unit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(61, 139, 255, 0.08));
  border-color: rgba(214, 232, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 20px rgba(4, 8, 20, 0.12);
}

body.spring-sale-live .global-sale-banner__cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(95, 155, 220, 0.2)),
    linear-gradient(135deg, rgba(255, 206, 224, 0.12), rgba(193, 255, 210, 0.06));
  border-color: rgba(214, 232, 255, 0.3);
  color: #eff7ff;
}

body.spring-sale-live .hero h1 {
  text-shadow:
    0 10px 32px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(255, 198, 218, 0.06);
}

body.spring-sale-live .hero-tagline,
body.spring-sale-live .stats-subtitle,
body.spring-sale-live .other-info,
body.spring-sale-live .site-footer,
body.spring-sale-live .pop-pack-count {
  color: rgba(240, 229, 233, 0.82);
}

body.spring-sale-live .pack,
body.spring-sale-live .about,
body.spring-sale-live .faq,
body.spring-sale-live .download-stats,
body.spring-sale-live .countdown-box,
body.spring-sale-live .pop-packs-wrap {
  border-color: rgba(255, 198, 218, 0.18);
  box-shadow:
    0 18px 38px rgba(4, 8, 15, 0.26),
    0 0 0 1px rgba(186, 255, 205, 0.04) inset;
  position: relative;
  overflow: hidden;
}

body.spring-sale-live .pack::after,
body.spring-sale-live .about::after,
body.spring-sale-live .faq::after,
body.spring-sale-live .download-stats::after,
body.spring-sale-live .countdown-box::after,
body.spring-sale-live .pop-packs-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 198, 218, 0.07), transparent 16%),
    radial-gradient(circle at 84% 16%, rgba(184, 255, 205, 0.05), transparent 14%),
    radial-gradient(circle at 50% 0%, rgba(255, 229, 165, 0.04), transparent 24%),
    radial-gradient(circle at 11% 14%, rgba(255, 244, 248, 0.12) 0 1.1%, transparent 1.6%),
    radial-gradient(circle at 85% 19%, rgba(255, 244, 248, 0.1) 0 1%, transparent 1.5%);
}

body.spring-sale-live .pack::before {
  background: linear-gradient(90deg, transparent 6%, rgba(255, 189, 210, 0.9), rgba(255, 231, 170, 0.78), rgba(175, 247, 192, 0.85), transparent 94%);
}

body.spring-sale-live .pack:hover {
  border-color: rgba(255, 198, 218, 0.28);
  box-shadow:
    0 20px 42px rgba(4, 8, 15, 0.3),
    0 0 26px rgba(255, 198, 218, 0.08);
}

body.spring-sale-live .category h2 {
  border-bottom-color: rgba(255, 198, 218, 0.34);
}

body.spring-sale-live .stat-box {
  border-color: rgba(255, 198, 218, 0.16);
  background:
    linear-gradient(180deg, rgba(21, 31, 46, 0.95), rgba(12, 20, 31, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(255, 198, 218, 0.04), transparent 40%);
}

body.spring-sale-live .stat-box span {
  color: #fff6f9;
  text-shadow: 0 0 10px rgba(255, 198, 218, 0.06);
}

body.spring-sale-live .download-buttons > a,
body.spring-sale-live .download,
body.spring-sale-live .social a,
body.spring-sale-live .login-btn,
body.spring-sale-live .toggle-view,
body.spring-sale-live .vouch-form button,
body.spring-sale-live .commission-pay-btn {
  background:
    linear-gradient(180deg, rgba(106, 150, 201, 0.96), rgba(74, 116, 168, 0.94));
  border-color: rgba(255, 223, 232, 0.2);
  box-shadow: 0 12px 28px rgba(29, 55, 92, 0.24);
}

body.spring-sale-live .download-buttons > a:hover,
body.spring-sale-live .download:hover,
body.spring-sale-live .social a:hover,
body.spring-sale-live .login-btn:hover,
body.spring-sale-live .toggle-view:hover,
body.spring-sale-live .vouch-form button:not(:disabled):hover,
body.spring-sale-live .commission-pay-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 28px rgba(29, 55, 92, 0.28);
}

body.spring-sale-live .pop-pack-card {
  border-color: rgba(255, 198, 218, 0.16);
  background:
    linear-gradient(180deg, rgba(18, 28, 41, 0.97), rgba(10, 17, 27, 0.98)),
    radial-gradient(circle at 82% 18%, rgba(184, 255, 205, 0.03), transparent 18%),
    radial-gradient(circle at 14% 14%, rgba(255, 209, 226, 0.06), transparent 10%);
}

body.spring-sale-live .pop-pack-card:hover {
  border-color: rgba(255, 198, 218, 0.28);
  box-shadow: 0 14px 28px rgba(77, 36, 68, 0.1);
}

body.spring-sale-live .pop-pack-platform.java {
  background: rgba(255, 190, 210, 0.14);
  color: #ffc1d5;
  border-color: rgba(255, 190, 210, 0.24);
}

body.spring-sale-live .pop-pack-platform.bedrock {
  background: rgba(190, 255, 207, 0.12);
  color: #b9f7c9;
  border-color: rgba(190, 255, 207, 0.22);
}

body.spring-sale-live #announcementBar {
  background:
    linear-gradient(180deg, rgba(17, 29, 52, 0.84), rgba(11, 20, 37, 0.86)),
    radial-gradient(circle at 18% 18%, rgba(255, 206, 224, 0.1), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(193, 255, 210, 0.06), transparent 15%);
  border-color: rgba(255, 198, 218, 0.22);
  box-shadow:
    0 10px 28px rgba(4, 8, 20, 0.36),
    0 0 0 1px rgba(186, 255, 205, 0.04) inset,
    inset 0 1px 0 rgba(255, 232, 238, 0.08);
}

body.spring-sale-live .pack::before,
body.spring-sale-live .about::before,
body.spring-sale-live .faq::before,
body.spring-sale-live .download-stats::before,
body.spring-sale-live .countdown-box::before {
  background-size: 180px 180px;
}

body.spring-sale-live .site-footer a:hover {
  color: #ffd6e3;
}

.terms-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(61, 139, 255, 0.2);
  background: rgba(9, 16, 29, 0.58);
}

.terms-consent input[type="checkbox"] {
  margin: 2px 0 0;
  accent-color: #7f95ff;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.terms-consent label {
  font-size: 12px;
  line-height: 1.5;
  color: #b9c8e8;
}

.terms-consent a {
  color: #d6e2ff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-consent a:hover {
  color: #ffffff;
}

.terms-consent--global {
  margin-bottom: 18px;
}

.texture-page .terms-consent--global {
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(202, 226, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(34, 58, 94, 0.42), rgba(16, 29, 52, 0.32)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 16px 40px rgba(4, 8, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

.texture-page .terms-consent--global input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  border: 3px solid #8fc6f0;
  background: rgba(8, 14, 24, 0.35);
  box-shadow: 0 0 0 3px rgba(143, 198, 240, 0.1);
  cursor: pointer;
  flex: 0 0 auto;
}

.texture-page .terms-consent--global input[type="checkbox"]:checked {
  background:
    radial-gradient(circle at 50% 50%, #8fc6f0 0 42%, transparent 45%);
}

.texture-page .terms-consent--global label {
  font-size: 14px;
  font-weight: 700;
  color: #e8f2ff;
}

.texture-page .terms-consent--global a {
  color: #bfe1ff;
}

.terms-consent--mod {
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}

.terms-consent--mod input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 999px;
  border: 3px solid #9a4dff;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(154, 77, 255, 0.12);
  cursor: pointer;
}

.terms-consent--mod input[type="checkbox"]:checked {
  background:
    radial-gradient(circle at 50% 50%, #9a4dff 0 42%, transparent 45%);
}

.terms-consent--mod label {
  font-size: 15px;
  line-height: 1.35;
  color: #f4d7ea;
}

.terms-consent--mod a {
  color: #ff9dc8;
  text-decoration: underline;
  text-decoration-color: rgba(255, 157, 200, 0.6);
  text-underline-offset: 3px;
}

.terms-consent--mod a:hover {
  color: #ffd6e8;
}

.terms-consent--mod + .terms-gated-link {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(219, 142, 180, 0.98), rgba(186, 116, 153, 0.98)) !important;
  border-color: rgba(255, 211, 228, 0.34) !important;
  box-shadow: 0 12px 28px rgba(112, 47, 91, 0.26) !important;
}

.terms-consent--mod + .terms-gated-link > div {
  width: 100%;
  text-align: center;
}

.terms-consent--mod + .terms-gated-link > div > div:first-child {
  color: rgba(255, 234, 243, 0.8) !important;
}

.terms-consent--mod + .terms-gated-link > div > div:last-child {
  color: #fff7fb !important;
  letter-spacing: 0.01em;
}

.terms-consent--mod + .terms-gated-link span {
  display: none !important;
}

.terms-gated-link[aria-disabled="true"] {
  opacity: 0.45;
  cursor: pointer !important;
  filter: saturate(0.7);
}

@keyframes tos-flash {
  0%   { border-color: rgba(255, 80, 80, 0.9); background: rgba(255, 60, 60, 0.18); box-shadow: 0 0 0 3px rgba(255, 60, 60, 0.35); }
  60%  { border-color: rgba(255, 80, 80, 0.9); background: rgba(255, 60, 60, 0.18); box-shadow: 0 0 0 3px rgba(255, 60, 60, 0.35); }
  100% { border-color: inherit; background: inherit; box-shadow: inherit; }
}

.tos-highlight {
  animation: tos-flash 1.8s ease forwards !important;
  border-radius: 12px;
}

.terms-gated-link[aria-disabled="true"]:hover {
  transform: none !important;
  filter: saturate(0.7) !important;
  box-shadow: none !important;
}

body.spring-sale-live .terms-consent {
  border-color: rgba(255, 198, 218, 0.18);
  background:
    linear-gradient(180deg, rgba(28, 38, 58, 0.88), rgba(18, 28, 44, 0.9)),
    radial-gradient(circle at 0% 0%, rgba(255, 198, 218, 0.06), transparent 35%);
}

body.spring-sale-live .terms-consent a {
  color: #ffe2ea;
}

body.spring-sale-live .terms-consent--mod label {
  color: #ffe3ee;
}

body.spring-sale-live .terms-consent--mod a {
  color: #ffadd1;
}

body.spring-sale-live .pack,
body.spring-sale-live .about,
body.spring-sale-live .faq,
body.spring-sale-live .download-stats,
body.spring-sale-live .countdown-box,
body.spring-sale-live .pop-packs-wrap,
body.spring-sale-live .packs-toolbar,
body.spring-sale-live #modAccountPanel,
body.spring-sale-live .box {
  background:
    linear-gradient(180deg, rgba(82, 111, 154, 0.3), rgba(21, 37, 64, 0.22)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 232, 239, 0.06) 42%, rgba(193, 255, 210, 0.04) 100%) !important;
  border-color: rgba(214, 232, 255, 0.26) !important;
  box-shadow:
    0 18px 42px rgba(4, 8, 20, 0.2),
    0 0 0 1px rgba(186, 255, 205, 0.04) inset,
    inset 0 1px 0 rgba(255, 244, 248, 0.28),
    inset 0 -1px 0 rgba(148, 196, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

body.spring-sale-live .pack {
  border-radius: 18px !important;
}

body.spring-sale-live .pack img,
body.spring-sale-live .pack-image img {
  border: 1px solid rgba(214, 232, 255, 0.18);
  box-shadow: 0 14px 28px rgba(4, 8, 20, 0.16);
}

body.spring-sale-live .stat-box,
body.spring-sale-live .pop-pack-card,
body.spring-sale-live .terms-consent,
body.spring-sale-live #v2CountdownWrap > div:last-child > div,
body.spring-sale-live [id$="LockedMsg"],
body.spring-sale-live [id$="ClosedMsg"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(61, 139, 255, 0.07)),
    linear-gradient(135deg, rgba(255, 206, 224, 0.08), rgba(193, 255, 210, 0.04)) !important;
  border: 1px solid rgba(214, 232, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 22px rgba(4, 8, 20, 0.12) !important;
}

body.spring-sale-live .stat-box span,
body.spring-sale-live #v2CountdownWrap [id^="v2"] {
  color: #fff7fb !important;
}

body.spring-sale-live .stat-label,
body.spring-sale-live #v2CountdownWrap div,
body.spring-sale-live .pop-packs-label {
  color: rgba(235, 243, 255, 0.72) !important;
}

body.spring-sale-live .pop-pack-platform.java,
body.spring-sale-live [data-sale-price] {
  background:
    linear-gradient(180deg, rgba(255, 206, 224, 0.18), rgba(255, 255, 255, 0.08)) !important;
  color: #ffd3e3 !important;
  border-color: rgba(255, 214, 231, 0.32) !important;
}

body.spring-sale-live .pop-pack-platform.bedrock,
body.spring-sale-live [data-sale-badge] {
  background:
    linear-gradient(180deg, rgba(193, 255, 210, 0.14), rgba(255, 255, 255, 0.07)) !important;
  color: #d8ffe2 !important;
  border-color: rgba(193, 255, 210, 0.28) !important;
}

body.spring-sale-live .terms-consent {
  align-items: center;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

body.spring-sale-live .terms-consent--mod {
  margin: 0 0 4px !important;
}

body.spring-sale-live .terms-consent label,
body.spring-sale-live .terms-consent--mod label,
body.spring-sale-live .texture-page .terms-consent--global label {
  color: #f4f8ff !important;
}

body.spring-sale-live .terms-consent a,
body.spring-sale-live .terms-consent--mod a,
body.spring-sale-live .texture-page .terms-consent--global a {
  color: #ffd0e0 !important;
  text-decoration-color: rgba(255, 208, 224, 0.7);
}

body.spring-sale-live .terms-consent input[type="checkbox"],
body.spring-sale-live .terms-consent--mod input[type="checkbox"],
body.spring-sale-live .texture-page .terms-consent--global input[type="checkbox"] {
  border-color: #bfe1ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 0 0 3px rgba(191, 225, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body.spring-sale-live .terms-consent input[type="checkbox"]:checked,
body.spring-sale-live .terms-consent--mod input[type="checkbox"]:checked,
body.spring-sale-live .texture-page .terms-consent--global input[type="checkbox"]:checked {
  background:
    radial-gradient(circle at 50% 50%, #ffd0e0 0 40%, transparent 43%),
    rgba(255, 255, 255, 0.08) !important;
}

body.spring-sale-live .terms-consent--mod + .terms-gated-link,
body.spring-sale-live .commission-pay-btn,
body.spring-sale-live .download-buttons > a,
body.spring-sale-live .download,
body.spring-sale-live .toggle-view,
body.spring-sale-live .pop-packs-viewall {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(95, 155, 220, 0.18)),
    linear-gradient(135deg, rgba(255, 206, 224, 0.16), rgba(193, 255, 210, 0.06)) !important;
  border-color: rgba(214, 232, 255, 0.3) !important;
  box-shadow:
    0 12px 28px rgba(4, 8, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #fff8fb !important;
}

body.spring-sale-live .terms-consent--mod + .terms-gated-link > div > div:first-child,
body.spring-sale-live .terms-consent--mod + .terms-gated-link > div > div:last-child {
  color: #fff8fb !important;
}

body.spring-sale-live .terms-gated-link[aria-disabled="true"] {
  opacity: 0.58;
  filter: saturate(0.9);
}

body.spring-sale-live {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 171, 208, 0.3), transparent 18%),
    radial-gradient(circle at 86% 14%, rgba(255, 215, 231, 0.22), transparent 18%),
    radial-gradient(circle at 50% 88%, rgba(255, 196, 221, 0.18), transparent 26%),
    radial-gradient(circle at 28% 36%, rgba(255, 244, 248, 0.16) 0 0.55%, transparent 0.95%),
    radial-gradient(circle at 31% 38%, rgba(255, 189, 214, 0.15) 0 0.72%, transparent 1.05%),
    radial-gradient(circle at 25% 38%, rgba(255, 189, 214, 0.13) 0 0.72%, transparent 1.05%),
    radial-gradient(circle at 28% 41%, rgba(255, 189, 214, 0.14) 0 0.72%, transparent 1.05%),
    radial-gradient(circle at 73% 31%, rgba(255, 244, 248, 0.15) 0 0.55%, transparent 0.95%),
    radial-gradient(circle at 76% 33%, rgba(255, 189, 214, 0.13) 0 0.7%, transparent 1.05%),
    radial-gradient(circle at 70% 33%, rgba(255, 189, 214, 0.12) 0 0.7%, transparent 1.05%),
    radial-gradient(circle at 73% 36%, rgba(255, 189, 214, 0.13) 0 0.7%, transparent 1.05%),
    linear-gradient(180deg, #3f5f8c 0%, #344f78 34%, #294466 68%, #213855 100%) !important;
}

body.spring-sale-live::before,
body.spring-sale-live::after {
  content: none;
}

body.spring-sale-live nav,
body.spring-sale-live .global-sale-banner,
body.spring-sale-live .pack,
body.spring-sale-live .about,
body.spring-sale-live .faq,
body.spring-sale-live .download-stats,
body.spring-sale-live .countdown-box,
body.spring-sale-live .pop-packs-wrap,
body.spring-sale-live .packs-toolbar,
body.spring-sale-live #modAccountPanel {
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 244, 248, 0.14) 0 1.3%, transparent 1.8%),
    radial-gradient(circle at 14% 21%, rgba(255, 189, 214, 0.11) 0 1.8%, transparent 2.4%),
    radial-gradient(circle at 88% 17%, rgba(255, 244, 248, 0.12) 0 1.2%, transparent 1.7%),
    radial-gradient(circle at 84% 20%, rgba(255, 189, 214, 0.1) 0 1.7%, transparent 2.3%),
    linear-gradient(180deg, rgba(255, 211, 230, 0.2), rgba(82, 111, 154, 0.18)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 216, 232, 0.11) 45%, rgba(207, 255, 218, 0.05) 100%) !important;
  border-color: rgba(255, 214, 231, 0.34) !important;
}

body.spring-sale-live .global-sale-banner__eyebrow,
body.spring-sale-live .pop-packs-label,
body.spring-sale-live .stat-label,
body.spring-sale-live .category h2 {
  color: #ffc3da !important;
  -webkit-text-fill-color: currentColor;
}

body.spring-sale-live .global-sale-banner__cta,
body.spring-sale-live .terms-consent--mod + .terms-gated-link,
body.spring-sale-live .commission-pay-btn,
body.spring-sale-live .download-buttons > a,
body.spring-sale-live .download,
body.spring-sale-live .toggle-view,
body.spring-sale-live .pop-packs-viewall,
body.spring-sale-live .login-btn {
  background:
    linear-gradient(180deg, rgba(255, 214, 231, 0.5), rgba(218, 132, 177, 0.28)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(204, 255, 216, 0.06)) !important;
  border-color: rgba(255, 214, 231, 0.48) !important;
}

body.spring-sale-live .stat-box,
body.spring-sale-live .pop-pack-card,
body.spring-sale-live .terms-consent,
body.spring-sale-live .global-sale-banner__unit,
body.spring-sale-live #v2CountdownWrap > div:last-child > div,
body.spring-sale-live .info {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 244, 248, 0.13) 0 1.4%, transparent 2%),
    linear-gradient(180deg, rgba(255, 222, 235, 0.2), rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 218, 233, 0.32) !important;
}

.terms-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(92vw, 460px);
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 126, 126, 0.38);
  background:
    linear-gradient(180deg, rgba(76, 16, 25, 0.98), rgba(48, 11, 18, 0.98)),
    radial-gradient(circle at 0% 0%, rgba(255, 120, 120, 0.16), transparent 42%);
  color: #fff1f1;
  box-shadow: 0 22px 48px rgba(46, 7, 14, 0.42);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  z-index: 1200;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.terms-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.terms-toast a {
  color: #ffd4d4;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-toast a:hover {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 700px) {
  .global-sale-banner {
    width: calc(100% - 16px);
    margin: 0 auto 14px;
    padding: 16px;
  }

  .global-sale-banner__countdown {
    width: 100%;
  }

  .global-sale-banner__cta {
    width: 100%;
  }
}

/* Spring floral refresh */
:root {
  --spring-bg-top: #25192d;
  --spring-bg-mid: #191d30;
  --spring-bg-bottom: #111420;
  --spring-card-top: rgba(58, 36, 63, 0.84);
  --spring-card-bottom: rgba(23, 27, 43, 0.9);
  --spring-border: rgba(255, 206, 226, 0.18);
  --spring-border-strong: rgba(255, 214, 232, 0.32);
  --spring-text: #fff7fb;
  --spring-text-soft: rgba(243, 229, 237, 0.78);
  --spring-nav-text: rgba(255, 246, 250, 0.94);
  --spring-nav-muted: rgba(246, 231, 239, 0.82);
  --spring-menu-top: rgba(52, 34, 60, 0.96);
  --spring-menu-bottom: rgba(33, 24, 42, 0.98);
  --spring-menu-solid: #2f2238;
  --spring-pink: #f3a8c6;
  --spring-rose: #d97aa6;
  --spring-sage: #98caa6;
  --spring-gold: #f1d59a;
  --spring-shadow: 0 22px 48px rgba(8, 8, 18, 0.34);
}

body,
body.spring-sale-live {
  color: var(--spring-text) !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 196, 222, 0.2), transparent 16%),
    radial-gradient(circle at 86% 18%, rgba(173, 226, 186, 0.12), transparent 16%),
    radial-gradient(circle at 50% 78%, rgba(241, 213, 154, 0.11), transparent 18%),
    radial-gradient(circle at 22% 32%, rgba(255, 243, 248, 0.12) 0 0.55%, transparent 0.95%),
    radial-gradient(circle at 25% 34%, rgba(243, 168, 198, 0.13) 0 0.85%, transparent 1.2%),
    radial-gradient(circle at 19% 35%, rgba(243, 168, 198, 0.11) 0 0.8%, transparent 1.15%),
    radial-gradient(circle at 22% 38%, rgba(243, 168, 198, 0.12) 0 0.85%, transparent 1.2%),
    radial-gradient(circle at 76% 28%, rgba(255, 243, 248, 0.11) 0 0.5%, transparent 0.9%),
    radial-gradient(circle at 79% 30%, rgba(243, 168, 198, 0.12) 0 0.82%, transparent 1.16%),
    radial-gradient(circle at 73% 31%, rgba(243, 168, 198, 0.1) 0 0.75%, transparent 1.1%),
    radial-gradient(circle at 76% 34%, rgba(243, 168, 198, 0.11) 0 0.78%, transparent 1.12%),
    linear-gradient(180deg, var(--spring-bg-top) 0%, var(--spring-bg-mid) 42%, var(--spring-bg-bottom) 100%) !important;
}

body::before,
body::after {
  content: none;
}

nav,
body.spring-sale-live nav,
.global-sale-banner,
body.spring-sale-live .global-sale-banner,
.pack,
.about,
.faq,
.download-stats,
.countdown-box,
.pop-packs-wrap,
.packs-toolbar,
#modAccountPanel,
.box,
.terms-consent,
.pop-pack-card,
.stat-box,
.global-sale-banner__unit {
  border-color: var(--spring-border) !important;
  background:
    radial-gradient(circle at 11% 18%, rgba(255, 247, 250, 0.13) 0 1.2%, transparent 1.8%),
    radial-gradient(circle at 15% 21%, rgba(243, 168, 198, 0.1) 0 1.8%, transparent 2.5%),
    radial-gradient(circle at 86% 17%, rgba(255, 247, 250, 0.1) 0 1.15%, transparent 1.7%),
    radial-gradient(circle at 82% 20%, rgba(152, 202, 166, 0.08) 0 1.7%, transparent 2.3%),
    linear-gradient(180deg, rgba(255, 214, 232, 0.14), rgba(60, 40, 76, 0.1)),
    linear-gradient(160deg, var(--spring-card-top), var(--spring-card-bottom)) !important;
  box-shadow:
    var(--spring-shadow),
    inset 0 1px 0 rgba(255, 245, 249, 0.16),
    inset 0 -1px 0 rgba(152, 202, 166, 0.06) !important;
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.terms-consent--mod {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

nav,
body.spring-sale-live nav {
  width: min(1140px, calc(100% - 24px));
  margin: 10px auto 8px;
  padding: 8px 12px;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  position: sticky;
  top: 8px;
  z-index: 200;
  border-color: rgba(255, 214, 232, 0.14) !important;
  background:
    linear-gradient(180deg, var(--spring-menu-top), var(--spring-menu-bottom)),
    radial-gradient(circle at 14% 18%, rgba(243, 168, 198, 0.08), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(152, 202, 166, 0.05), transparent 16%) !important;
  box-shadow:
    0 12px 28px rgba(7, 8, 16, 0.34),
    inset 0 1px 0 rgba(255, 246, 250, 0.08) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

nav::before,
nav::after {
  opacity: 0.32;
}

nav .logo {
  height: 28px;
  margin: 0;
  flex: 0 0 auto;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--spring-border-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 220, 235, 0.2), rgba(116, 74, 124, 0.16));
  box-shadow: 0 10px 22px rgba(16, 10, 22, 0.26);
  cursor: pointer;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--spring-text);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

nav.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

nav.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

nav.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-utility {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

nav a,
body.spring-sale-live nav a {
  color: var(--spring-nav-muted);
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

nav a:hover,
nav a.nav-active,
body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active {
  color: var(--spring-nav-text) !important;
  background: linear-gradient(180deg, rgba(255, 226, 238, 0.1), rgba(243, 168, 198, 0.04)) !important;
  border-color: rgba(255, 214, 232, 0.18) !important;
}

nav a::after,
body.spring-sale-live nav a::after {
  background: linear-gradient(90deg, var(--spring-pink), var(--spring-gold), var(--spring-sage)) !important;
}

.nav-socials {
  gap: 6px;
  margin: 0;
}

.nav-socials a {
  width: 32px;
  height: 32px;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 232, 241, 0.04);
  border: 1px solid rgba(255, 214, 232, 0.1);
  opacity: 0.92;
}

.nav-socials a:hover {
  opacity: 1;
  border-color: rgba(255, 214, 232, 0.18);
  background: rgba(255, 232, 241, 0.1);
}

.nav-socials img {
  width: 14px;
  height: 14px;
}

#auth-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 2px;
  border: 0;
}

#auth-area img {
  width: 28px;
  height: 28px;
}

#auth-area span {
  color: var(--spring-nav-text);
  font-size: 13px;
}

#auth-area a {
  color: var(--spring-nav-text) !important;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 232, 241, 0.05) !important;
  border-color: rgba(255, 214, 232, 0.14) !important;
  box-shadow: none !important;
}

#auth-area a,
.login-btn,
.download-buttons > a,
.download,
.social a,
.toggle-view,
.vouch-form button,
.commission-pay-btn,
.pop-packs-viewall,
.global-sale-banner__cta,
body.spring-sale-live .download-buttons > a,
body.spring-sale-live .download,
body.spring-sale-live .social a,
body.spring-sale-live .toggle-view,
body.spring-sale-live .vouch-form button,
body.spring-sale-live .commission-pay-btn,
body.spring-sale-live .pop-packs-viewall,
body.spring-sale-live .global-sale-banner__cta,
body.spring-sale-live .login-btn {
  color: var(--spring-text) !important;
  border-color: rgba(255, 221, 235, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 220, 235, 0.3), rgba(206, 110, 154, 0.16)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(152, 202, 166, 0.06)) !important;
  box-shadow:
    0 14px 30px rgba(23, 14, 31, 0.24),
    inset 0 1px 0 rgba(255, 249, 251, 0.16) !important;
}

nav .login-btn {
  padding: 7px 11px;
  font-size: 13px;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(226, 131, 173, 0.24), rgba(156, 102, 147, 0.18)),
    rgba(255, 255, 255, 0.04) !important;
}

nav #auth-area a,
nav .login-btn,
body.spring-sale-live nav #auth-area a,
body.spring-sale-live nav .login-btn {
  color: var(--spring-nav-text) !important;
  border-color: rgba(255, 214, 232, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 226, 238, 0.06), rgba(243, 168, 198, 0.04)),
    rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
}

.download-buttons > a:hover,
.download:hover,
.social a:hover,
.login-btn:hover,
.toggle-view:hover,
.vouch-form button:not(:disabled):hover,
.commission-pay-btn:hover,
.pop-packs-viewall:hover,
.global-sale-banner__cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.pack,
.pop-pack-card,
.countdown-box,
.download-stats,
.about,
.faq {
  border-radius: 18px !important;
}

.pack h3,
.about h2,
.faq h2,
.global-sale-banner__title,
.stats-header h2,
.pop-packs-label,
.category h2,
.hero h1,
.pack-label {
  color: var(--spring-text) !important;
}

.pack p,
.pack li,
.other-info,
.hero-tagline,
.stats-subtitle,
.global-sale-banner__meta,
.global-sale-banner__unit span,
.stat-label,
.pop-pack-count,
.site-footer,
.terms-consent label,
.faq-item p,
.faq-item ul,
body.spring-sale-live .hero-tagline,
body.spring-sale-live .stats-subtitle,
body.spring-sale-live .other-info,
body.spring-sale-live .pop-pack-count {
  color: var(--spring-text-soft) !important;
}

.category h2,
body.spring-sale-live .category h2,
.global-sale-banner__eyebrow,
body.spring-sale-live .global-sale-banner__eyebrow,
.pop-packs-label,
body.spring-sale-live .pop-packs-label {
  color: #ffc7db !important;
  border-bottom-color: rgba(255, 199, 219, 0.26) !important;
  -webkit-text-fill-color: currentColor;
}

.stat-box span,
.global-sale-banner__unit strong {
  color: #fffafc !important;
}

#announcementBar,
body.spring-sale-live #announcementBar {
  border: 1px solid rgba(255, 214, 232, 0.18);
  background:
    linear-gradient(180deg, rgba(41, 27, 49, 0.96), rgba(20, 22, 35, 0.96)),
    radial-gradient(circle at 10% 18%, rgba(243, 168, 198, 0.14), transparent 24%) !important;
  box-shadow: 0 18px 38px rgba(12, 9, 18, 0.42);
}

.hero {
  min-height: clamp(220px, 34vh, 380px);
  padding-top: 28px;
}

.hero::after,
body.spring-sale-live .hero::after {
  background: radial-gradient(ellipse 50% 36% at 50% 44%, rgba(243, 168, 198, 0.14), transparent 72%) !important;
  animation: none;
}

.pack::before,
body.spring-sale-live .pack::before {
  background: linear-gradient(90deg, transparent 6%, rgba(243, 168, 198, 0.92), rgba(241, 213, 154, 0.8), rgba(152, 202, 166, 0.82), transparent 94%) !important;
}

#springSaleBanner h2,
#springSaleBanner p,
#springSaleBanner strong,
#springSaleBanner [id^="sale"] {
  color: var(--spring-text) !important;
}

#springSaleBanner [style*="background:rgba(61,139,255,0.08)"],
#springSaleCountdown > div {
  background: linear-gradient(180deg, rgba(255, 228, 238, 0.14), rgba(78, 55, 92, 0.18)) !important;
  border-color: rgba(255, 214, 232, 0.2) !important;
}

#modTabBar {
  width: min(100%, 420px) !important;
}

#modTabBar button {
  flex: 1 1 0;
}

@media (max-width: 900px) {
  body::before,
  body::after {
    opacity: 0.5;
    filter: blur(22px);
  }

  nav,
  body.spring-sale-live nav {
    width: calc(100% - 16px);
    padding: 10px 12px;
    gap: 10px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--spring-border);
    background:
      radial-gradient(circle at 10% 14%, rgba(255, 247, 250, 0.08) 0 1.2%, transparent 1.8%),
      linear-gradient(180deg, var(--spring-menu-top), var(--spring-menu-bottom));
    box-shadow: 0 22px 40px rgba(7, 8, 16, 0.42);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease;
  }

  nav.is-open .nav-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav-links,
  .nav-utility,
  #auth-area {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
  }

  .nav-links {
    gap: 8px;
  }

  .nav-links a,
  #auth-area a,
  .login-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  .nav-socials {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #auth-area {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 214, 232, 0.14);
  }

  .global-sale-banner {
    margin-top: 6px;
  }
}

nav a:hover,
nav a.nav-active,
body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active,
.nav-socials a:hover,
nav #auth-area a:hover,
nav .login-btn:hover,
body.spring-sale-live nav #auth-area a:hover,
body.spring-sale-live nav .login-btn:hover {
  background-color: var(--spring-menu-solid) !important;
}

@media (max-width: 700px) {
  .hero {
    min-height: 170px;
    padding: 18px 14px 6px;
  }

  .container,
  .texture-page .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pack,
  .countdown-box,
  #modAccountPanel,
  .download-stats,
  .about,
  .faq,
  .packs-toolbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .global-sale-banner__inner {
    gap: 14px;
  }

  .global-sale-banner__countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #springSaleBanner {
    padding: 18px 16px !important;
  }

  #springSaleBanner > div {
    gap: 14px !important;
  }

  #springSaleBanner > div > div:last-child {
    min-width: 0 !important;
    width: 100%;
  }

  #springSaleCountdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #modTabBar {
    width: 100% !important;
  }

  .terms-toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* Per-page theme cleanup */
.credits-label,
.credits-section-title {
  color: rgba(255, 199, 219, 0.62) !important;
}

.credits-heading,
.credit-name,
.pack h2 {
  color: var(--spring-text) !important;
}

.credits-sub,
.credit-role,
.credit-desc,
.pack p.desc,
.pack label {
  color: var(--spring-text-soft) !important;
}

.credit-card {
  background:
    radial-gradient(circle at 10% 16%, rgba(255, 243, 248, 0.12) 0 1.3%, transparent 1.9%),
    linear-gradient(160deg, rgba(55, 35, 63, 0.86), rgba(18, 23, 38, 0.92)) !important;
  border-color: rgba(255, 214, 232, 0.16) !important;
  box-shadow: 0 16px 34px rgba(10, 9, 18, 0.28);
}

.credit-card:hover {
  border-color: rgba(255, 214, 232, 0.28) !important;
}

.credit-tag {
  color: rgba(255, 236, 244, 0.82) !important;
  border-color: rgba(255, 214, 232, 0.2) !important;
  background: rgba(243, 168, 198, 0.08) !important;
}

.credit-discord-btn {
  background: rgba(243, 168, 198, 0.14) !important;
  border-color: rgba(255, 214, 232, 0.26) !important;
}

.admin-input,
.admin-textarea {
  border-color: rgba(255, 214, 232, 0.18) !important;
  background: rgba(24, 20, 33, 0.74) !important;
  color: var(--spring-text) !important;
}

.admin-input:focus,
.admin-textarea:focus {
  border-color: rgba(255, 214, 232, 0.4) !important;
  background: rgba(30, 22, 38, 0.86) !important;
}

.abtn-primary {
  background: linear-gradient(135deg, rgba(226, 131, 173, 0.95), rgba(160, 102, 150, 0.92)) !important;
}

.abtn-success {
  background: linear-gradient(135deg, rgba(169, 216, 180, 0.96), rgba(121, 173, 140, 0.92)) !important;
  color: #102015 !important;
}

.abtn-danger {
  background: linear-gradient(135deg, rgba(194, 88, 113, 0.96), rgba(144, 55, 83, 0.92)) !important;
}

.status-badge.loading,
#userLookupResult {
  border-color: rgba(255, 214, 232, 0.18) !important;
  background: rgba(35, 27, 45, 0.62) !important;
}

/* Exact plum sweep across every HTML page */
:root {
  --credits-surface: linear-gradient(160deg, rgba(55, 35, 63, 0.86), rgba(18, 23, 38, 0.92));
  --credits-border: rgba(255, 214, 232, 0.16);
  --credits-border-strong: rgba(255, 214, 232, 0.28);
  --credits-shadow: 0 16px 34px rgba(10, 9, 18, 0.28);
  --credits-text: #fff7fb;
  --credits-soft: rgba(243, 229, 237, 0.72);
  --credits-pill-bg: rgba(243, 168, 198, 0.08);
  --credits-pill-border: rgba(255, 214, 232, 0.2);
}

.pack,
.commission-card,
.credit-card,
.profile-card,
.response-box,
.vouch-panel,
.warning-box,
.info-box,
.commission-faq-item,
.commission-support-box,
.live-card,
.card,
.box,
.discord-box,
.online-box,
.download-stats,
.countdown-box,
.pop-packs-wrap,
.packs-toolbar,
.global-sale-banner,
.global-sale-banner__unit,
.pop-pack-card,
.stat-box,
.terms-consent,
#modAccountPanel,
#userLookupResult,
#commissionClosedBanner,
#commissionClosedMsg,
#paymodLockedMsg,
#paymodClosedMsg,
#spawnerClosedMsg,
#v2CountdownWrap > div:last-child > div,
[id$="LockedMsg"],
[id$="ClosedMsg"] {
  background: linear-gradient(155deg, #261540 0%, #16102e 100%) !important;
  border: 1px solid rgba(255, 214, 232, 0.18) !important;
  box-shadow: 0 16px 34px rgba(10, 9, 18, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pack::after,
.pack::before,
.commission-card::before,
.credit-card::before,
.download-stats::before,
.download-stats::after,
.global-sale-banner::before,
.global-sale-banner::after,
body.spring-sale-live .pack::after,
body.spring-sale-live .pack::before,
body.spring-sale-live .global-sale-banner::before,
body.spring-sale-live .global-sale-banner::after {
  content: none !important;
  display: none !important;
}

.pack h2,
.pack h3,
.about h2,
.faq h2,
.commission-card h3,
.credit-name,
.credits-heading,
.global-sale-banner__title,
.stat-box span,
.commission-pay-btn-price,
.discord-box-title,
.dl-title,
.profile-card h2,
.response-box h3,
.vouch-panel h2,
.online-box,
.live-label {
  color: var(--credits-text) !important;
}

.pack p,
.pack li,
.about p,
.faq-item p,
.faq-item ul,
.commission-card p,
.commission-card ul,
.credit-desc,
.credit-role,
.credits-sub,
.global-sale-banner__meta,
.global-sale-banner__unit span,
.stat-label,
.info-box,
.warning-box,
.discord-box-desc,
.count-sub,
.refresh-note,
.other-info,
.pack label,
.pack p.desc,
.commissions-hero p,
.hero-tagline,
.site-footer,
.site-footer a,
.pop-pack-count,
.terms-consent label,
.terms-consent a,
.commission-faq-answer,
.commission-faq-summary {
  color: var(--credits-soft) !important;
}

.credits-label,
.credits-section-title,
.category h2,
.global-sale-banner__eyebrow,
.pop-packs-label,
.commissions-faq-heading,
.warning-box h4,
.info-box h4,
.pack label,
.credit-tag,
.commission-price,
[data-sale-price],
[data-sale-badge] {
  color: #ffd8e6 !important;
  border-color: var(--credits-border) !important;
}

.credit-tag,
.commission-price,
[data-sale-price],
[data-sale-badge],
.commission-pay-btn-tag,
.nav-socials a,
.terms-gated-link span,
.status-badge.loading,
#lookupIP {
  background: var(--credits-pill-bg) !important;
  border-color: var(--credits-pill-border) !important;
}

.commission-pay-btn,
.commission-tip-link,
.download-buttons > a,
.download,
.social a,
.toggle-view,
.vouch-form button,
.pop-packs-viewall,
.global-sale-banner__cta,
.login-btn,
.abtn-primary,
.abtn-success,
.abtn-danger,
.abtn,
#auth-area a,
nav .login-btn,
.terms-consent--mod + .terms-gated-link,
.mod-checkout-link,
#spawnerPayBtn .terms-gated-link,
#paymodPayBtn .terms-gated-link,
#v2PayBtn .terms-gated-link {
  background:
    linear-gradient(180deg, rgba(255, 221, 235, 0.06), rgba(243, 168, 198, 0.04)),
    rgba(50, 35, 57, 0.92) !important;
  border-color: var(--credits-pill-border) !important;
  color: var(--credits-text) !important;
  box-shadow: none !important;
}

.pack-image img,
.category .pack-image img,
.pop-pack-card,
.live-card,
.card,
.discord-box,
.warning-box,
.info-box,
.commission-faq-item,
.commission-support-box {
  border-color: var(--exact-plum-border) !important;
}

#packSearch,
.admin-input,
.admin-textarea,
.profile-card input,
.profile-card textarea,
.profile-card select {
  background: rgba(36, 29, 44, 0.92) !important;
  border-color: var(--credits-border) !important;
  color: var(--credits-text) !important;
}

#packSearch::placeholder,
.admin-input::placeholder,
.admin-textarea::placeholder {
  color: rgba(243, 229, 237, 0.42) !important;
}

.site-footer a,
footer a,
.pack a:not(.download):not(.commission-pay-btn):not(.terms-gated-link):not(.mod-buy-btn),
.info-box a,
.warning-box a,
.commission-faq-answer a,
.terms-consent a,
.credit-desc a {
  color: #ffd8e6 !important;
}

.site-footer a:hover,
footer a:hover,
.pack a:not(.download):not(.commission-pay-btn):not(.terms-gated-link):not(.mod-buy-btn):hover,
.info-box a:hover,
.warning-box a:hover,
.commission-faq-answer a:hover,
.terms-consent a:hover,
.credit-desc a:hover {
  color: #fff3f8 !important;
}

.pack:hover,
.commission-card:hover,
.credit-card:hover,
.pop-pack-card:hover,
.category .pack:hover,
body.spring-sale-live .pack:hover {
  transform: none !important;
  box-shadow: var(--credits-shadow) !important;
  border-color: var(--credits-border-strong) !important;
}

.global-sale-banner,
.packs-toolbar,
.download-stats,
.about,
.faq,
.pop-packs-wrap,
.commission-support-box,
.warning-box,
.info-box,
.profile-card,
.response-box,
.live-card,
.card,
.box,
.discord-box {
  border-radius: 16px !important;
}

.pack,
.commission-card,
.credit-card,
.profile-card,
.response-box,
.vouch-panel,
.warning-box,
.info-box,
.commission-faq-item,
.commission-support-box,
.live-card,
.card,
.box,
.discord-box,
.download-stats,
.countdown-box,
.pop-packs-wrap,
.packs-toolbar,
.global-sale-banner,
.pop-pack-card,
.stat-box,
.terms-consent,
#modAccountPanel {
  overflow: hidden !important;
}

.pack,
.about,
.faq,
.download-stats,
.countdown-box,
.commission-card,
.credit-card,
.commission-faq-item,
.commission-support-box,
.warning-box,
.info-box,
.live-card,
.card,
.box,
.discord-box,
.profile-card,
.response-box,
.vouch-panel,
.pop-pack-card,
.stat-box,
.terms-consent,
#modAccountPanel {
  position: relative !important;
}

/* Exact credits-style menus */
nav,
body.spring-sale-live nav,
.nav-menu,
.packs-toolbar,
.global-sale-banner,
.global-sale-banner__unit,
.pop-packs-wrap,
.pop-pack-card,
.download-stats,
.stat-box,
.terms-consent,
#modAccountPanel,
.commission-support-box,
.warning-box,
.info-box,
.card,
.box,
.discord-box,
.live-card,
#announcementBar {
  background: var(--credits-surface) !important;
  border: 1px solid var(--credits-border) !important;
  box-shadow: var(--credits-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

nav::before,
nav::after,
.global-sale-banner::before,
.global-sale-banner::after,
.download-stats::before,
.download-stats::after,
body.spring-sale-live nav::before,
body.spring-sale-live nav::after,
body.spring-sale-live .global-sale-banner::before,
body.spring-sale-live .global-sale-banner::after,
body.spring-sale-live .download-stats::before,
body.spring-sale-live .download-stats::after {
  content: none !important;
  display: none !important;
}

nav a,
body.spring-sale-live nav a,
.nav-socials a,
#auth-area a,
nav .login-btn,
body.spring-sale-live nav .login-btn,
.toggle-view,
.download-buttons > a,
.download,
.social a,
.commission-pay-btn,
.global-sale-banner__cta,
.pop-packs-viewall,
.terms-consent--mod + .terms-gated-link,
.mod-checkout-link,
.commission-tip-link,
.btn-discord,
.abtn,
.btn-skip {
  background:
    linear-gradient(180deg, rgba(255, 221, 235, 0.06), rgba(243, 168, 198, 0.03)),
    rgba(50, 35, 57, 0.92) !important;
  border: 1px solid var(--credits-pill-border) !important;
  color: var(--credits-text) !important;
  box-shadow: none !important;
}

nav a:hover,
nav a.nav-active,
body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active,
.nav-socials a:hover,
#auth-area a:hover,
nav .login-btn:hover,
body.spring-sale-live nav .login-btn:hover,
.toggle-view:hover,
.download-buttons > a:hover,
.download:hover,
.social a:hover,
.commission-pay-btn:hover,
.global-sale-banner__cta:hover,
.pop-packs-viewall:hover,
.terms-consent--mod + .terms-gated-link:hover,
.mod-checkout-link:hover,
.commission-tip-link:hover,
.btn-discord:hover,
.abtn:hover,
.btn-skip:hover {
  background:
    linear-gradient(180deg, rgba(255, 221, 235, 0.08), rgba(243, 168, 198, 0.04)),
    rgba(58, 40, 66, 0.94) !important;
  border-color: var(--credits-border-strong) !important;
  transform: none !important;
  filter: none !important;
}

.pop-packs-label,
.global-sale-banner__eyebrow,
.stat-label,
.commission-pay-btn-tag,
[data-sale-price],
[data-sale-badge],
.terms-gated-link span,
.credit-tag {
  color: #ffd8e6 !important;
}

.commission-pay-btn-tag,
[data-sale-price],
[data-sale-badge],
.terms-gated-link span,
.credit-tag {
  background: var(--credits-pill-bg) !important;
  border: 1px solid var(--credits-pill-border) !important;
  box-shadow: none !important;
}

.pop-packs-label,
.global-sale-banner__eyebrow,
.stat-label {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.global-sale-banner__title,
.global-sale-banner__meta,
.global-sale-banner__unit strong,
.global-sale-banner__unit span,
.pop-pack-name,
.pop-pack-count,
.stats-header h2,
.stats-subtitle,
.stat-box span,
.stat-label {
  color: var(--credits-text) !important;
}

/* Final navbar fix */
nav,
body.spring-sale-live nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(1140px, calc(100% - 24px)) !important;
  margin: 12px auto 10px !important;
  padding: 10px 14px !important;
  background: linear-gradient(160deg, rgba(55, 35, 63, 0.86), rgba(18, 23, 38, 0.92)) !important;
  border: 1px solid rgba(255, 214, 232, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px rgba(10, 9, 18, 0.28) !important;
  position: sticky !important;
  top: 8px !important;
  z-index: 300 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

nav::before,
nav::after,
body.spring-sale-live nav::before,
body.spring-sale-live nav::after {
  content: none !important;
  display: none !important;
}

nav .logo {
  height: 26px !important;
  width: auto !important;
  margin: 0 6px 0 0 !important;
  flex: 0 0 auto !important;
}

.nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.nav-utility {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

nav a,
body.spring-sale-live nav a,
.nav-socials a,
#auth-area a,
nav .login-btn,
body.spring-sale-live nav .login-btn,
.nav-toggle {
  background: rgba(66, 45, 74, 0.94) !important;
  border: 1px solid rgba(255, 214, 232, 0.2) !important;
  color: #fff7fb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

nav a,
body.spring-sale-live nav a {
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

nav a::after,
body.spring-sale-live nav a::after {
  content: none !important;
  display: none !important;
}

nav a:hover,
nav a.nav-active,
body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active,
.nav-socials a:hover,
#auth-area a:hover,
nav .login-btn:hover,
body.spring-sale-live nav .login-btn:hover,
.nav-toggle:hover {
  background: rgba(76, 52, 85, 0.96) !important;
  border-color: rgba(255, 214, 232, 0.28) !important;
  transform: none !important;
  filter: none !important;
}

.nav-socials {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.nav-socials a {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.nav-socials img {
  width: 15px !important;
  height: 15px !important;
}

#auth-area {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#auth-area img {
  width: 28px !important;
  height: 28px !important;
}

#auth-area span {
  color: #fff7fb !important;
  font-size: 13px !important;
}

.nav-toggle {
  display: none !important;
  width: 42px !important;
  height: 42px !important;
}

.nav-toggle span {
  background: #fff7fb !important;
}

@media (max-width: 900px) {
  nav,
  body.spring-sale-live nav {
    width: calc(100% - 16px) !important;
    padding: 10px 12px !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-left: auto !important;
  }

  .nav-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(160deg, rgba(55, 35, 63, 0.96), rgba(18, 23, 38, 0.98)) !important;
    border: 1px solid rgba(255, 214, 232, 0.16) !important;
    box-shadow: 0 16px 34px rgba(10, 9, 18, 0.28) !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  nav.is-open .nav-menu {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  .nav-links,
  .nav-utility,
  #auth-area {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .nav-links a,
  #auth-area a,
  .login-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .nav-socials {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Mobile polish */
@media (max-width: 600px) {
  .pack,
  .credit-card,
  .commission-card,
  .download-stats,
  .about,
  .faq,
  .countdown-box,
  #modAccountPanel {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .pack h2 {
    font-size: 20px !important;
  }

  .credits-heading {
    font-size: 26px !important;
  }

  .credits-grid {
    grid-template-columns: 1fr !important;
  }

  .terms-consent--mod + .terms-gated-link {
    padding: 12px 14px !important;
  }

  .terms-consent--mod + .terms-gated-link > div > div:last-child {
    font-size: 16px !important;
  }

  .stats-grid {
    gap: 10px !important;
  }

  .stat-box {
    padding: 14px 10px !important;
  }

  .global-sale-banner__inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .global-sale-banner__cta {
    width: 100% !important;
    text-align: center !important;
  }

  .pop-packs-wrap {
    padding: 10px 8px !important;
  }

  .terms-toast {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* Final sitewide purple menu sweep */
:root {
  --credits-pill-surface: rgba(66, 45, 74, 0.94);
  --credits-pill-surface-hover: rgba(76, 52, 85, 0.96);
}

nav,
body.spring-sale-live nav,
.packs-toolbar,
.global-sale-banner,
.download-stats,
.pop-packs-wrap,
#modAccountPanel,
.terms-consent,
.commission-support-box,
.warning-box,
.info-box,
.card,
.box,
.live-card,
.discord-box,
.stat-box,
.global-sale-banner__unit,
.pop-pack-card,
.commission-faq-item,
#announcementBar {
  background: var(--credits-surface) !important;
  border: 1px solid var(--credits-border) !important;
  box-shadow: var(--credits-shadow) !important;
}

nav a,
body.spring-sale-live nav a,
.nav-socials a,
#auth-area a,
nav .login-btn,
body.spring-sale-live nav .login-btn,
.toggle-view,
.download-buttons > a,
.download,
.social a,
.commission-pay-btn,
.global-sale-banner__cta,
.pop-packs-viewall,
.terms-consent--mod + .terms-gated-link,
.mod-checkout-link,
.commission-tip-link,
.btn-discord,
.btn-skip,
.abtn,
.nav-toggle,
[data-sale-price],
[data-sale-badge],
.commission-pay-btn-tag,
.terms-gated-link span,
.credit-tag,
.commission-price,
.pop-pack-platform,
.status-badge,
#lookupIP {
  background: var(--credits-pill-surface) !important;
  border: 1px solid var(--credits-pill-border) !important;
  color: #ffe8f1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

nav a:hover,
nav a.nav-active,
body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active,
.nav-socials a:hover,
#auth-area a:hover,
nav .login-btn:hover,
body.spring-sale-live nav .login-btn:hover,
.toggle-view:hover,
.download-buttons > a:hover,
.download:hover,
.social a:hover,
.commission-pay-btn:hover,
.global-sale-banner__cta:hover,
.pop-packs-viewall:hover,
.terms-consent--mod + .terms-gated-link:hover,
.mod-checkout-link:hover,
.commission-tip-link:hover,
.btn-discord:hover,
.btn-skip:hover,
.abtn:hover,
.nav-toggle:hover {
  background: var(--credits-pill-surface-hover) !important;
  border-color: var(--credits-border-strong) !important;
  filter: none !important;
  transform: none !important;
}

.global-sale-banner__eyebrow,
.pop-packs-label,
.stat-label,
.pack-label,
.credits-label,
.credits-section-title,
.commissions-faq-heading {
  color: #ffd0e0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.global-sale-banner__title,
.global-sale-banner__meta,
.global-sale-banner__unit strong,
.global-sale-banner__unit span,
.pop-pack-name,
.pop-pack-count,
.stats-header h2,
.stats-subtitle,
.stat-box span,
.stat-label,
nav a,
#auth-area a,
nav .login-btn,
.download,
.commission-pay-btn,
.global-sale-banner__cta,
.pop-packs-viewall,
.btn-discord,
.btn-skip,
.abtn {
  color: var(--credits-text) !important;
}

nav .logo {
  margin-right: 10px;
}

nav::before,
nav::after,
body.spring-sale-live nav::before,
body.spring-sale-live nav::after {
  content: none !important;
  display: none !important;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* ── NAV: solid dark surface, plain text links, icon boxes ── */
nav,
body.spring-sale-live nav {
  background: linear-gradient(160deg, rgba(55, 35, 63, 0.96), rgba(18, 23, 38, 0.98)) !important;
  border: 1px solid rgba(255, 214, 232, 0.16) !important;
  box-shadow: 0 16px 34px rgba(10, 9, 18, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: min(1160px, calc(100% - 32px));
  margin: 14px auto 10px;
  padding: 10px 16px;
  border-radius: 14px;
}

nav a,
.nav-links a,
body.spring-sale-live nav a,
body.spring-sale-live .nav-links a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 240, 248, 0.88) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

nav a:hover,
.nav-links a:hover,
nav a.nav-active,
.nav-links a.nav-active,
body.spring-sale-live nav a:hover,
body.spring-sale-live nav a.nav-active {
  background: rgba(255, 214, 232, 0.08) !important;
  border-radius: 8px !important;
  color: #fff7fb !important;
}

nav a::after,
.nav-links a::after,
body.spring-sale-live nav a::after {
  content: none !important;
  display: none !important;
}

.nav-socials a {
  background: rgba(255, 214, 232, 0.06) !important;
  border: 1px solid rgba(255, 214, 232, 0.18) !important;
  border-radius: 10px !important;
}

.nav-socials a:hover {
  background: rgba(255, 214, 232, 0.14) !important;
  border-color: rgba(255, 214, 232, 0.32) !important;
}

.nav-menu,
.nav-links,
.nav-utility {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  nav,
  body.spring-sale-live nav {
    width: calc(100% - 16px) !important;
    margin: 8px auto 6px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}

/* Universal card style — every card matches the credits/Durag_Frank look */
.pack,
.commission-card,
.credit-card,
.profile-card,
.stat-box,
.download-stats,
.about,
.faq,
.countdown-box,
.pop-pack-card,
.discord-box,
.live-card,
.card,
.box,
.terms-consent,
.packs-toolbar,
.pop-packs-wrap,
.global-sale-banner,
.global-sale-banner__unit,
.commission-faq-item,
.commission-support-box,
.warning-box,
.info-box,
#modAccountPanel {
  background:
    radial-gradient(circle at 11% 18%, rgba(255, 247, 250, 0.15) 0 1.2%, transparent 1.8%),
    radial-gradient(circle at 15% 21%, rgba(243, 168, 198, 0.12) 0 1.8%, transparent 2.5%),
    radial-gradient(circle at 86% 17%, rgba(255, 247, 250, 0.12) 0 1.15%, transparent 1.7%),
    radial-gradient(circle at 82% 20%, rgba(152, 202, 166, 0.09) 0 1.7%, transparent 2.3%),
    linear-gradient(155deg, #261540 0%, #16102e 100%) !important;
  border: 1px solid rgba(255, 214, 232, 0.18) !important;
  box-shadow: 0 16px 34px rgba(10, 9, 18, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Kill body pseudo-element orb blobs ── */
body::before,
body::after,
body.spring-sale-live::before,
body.spring-sale-live::after {
  content: none !important;
  display: none !important;
}

.hero::after,
body.spring-sale-live .hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.download-stats::before {
  content: none !important;
  display: none !important;
}

/* ── Force all cards to match the credits page purple — beats all spring-sale-live overrides ── */
body.spring-sale-live .pack,
body.spring-sale-live .commission-card,
body.spring-sale-live .credit-card,
body.spring-sale-live .profile-card,
body.spring-sale-live .stat-box,
body.spring-sale-live .download-stats,
body.spring-sale-live .about,
body.spring-sale-live .faq,
body.spring-sale-live .countdown-box,
body.spring-sale-live .pop-pack-card,
body.spring-sale-live .discord-box,
body.spring-sale-live .live-card,
body.spring-sale-live .card,
body.spring-sale-live .box,
body.spring-sale-live .terms-consent,
body.spring-sale-live .packs-toolbar,
body.spring-sale-live .pop-packs-wrap,
body.spring-sale-live .global-sale-banner__unit,
body.spring-sale-live .commission-faq-item,
body.spring-sale-live .commission-support-box,
body.spring-sale-live .warning-box,
body.spring-sale-live .info-box,
body.spring-sale-live #modAccountPanel,
body.spring-sale-live .global-sale-banner__unit,
body.spring-sale-live #v2CountdownWrap > div:last-child > div {
  background:
    radial-gradient(circle at 11% 18%, rgba(255, 247, 250, 0.15) 0 1.2%, transparent 1.8%),
    radial-gradient(circle at 15% 21%, rgba(243, 168, 198, 0.12) 0 1.8%, transparent 2.5%),
    radial-gradient(circle at 86% 17%, rgba(255, 247, 250, 0.12) 0 1.15%, transparent 1.7%),
    radial-gradient(circle at 82% 20%, rgba(152, 202, 166, 0.09) 0 1.7%, transparent 2.3%),
    linear-gradient(155deg, #261540 0%, #16102e 100%) !important;
  border: 1px solid rgba(255, 214, 232, 0.18) !important;
  box-shadow: 0 16px 34px rgba(10, 9, 18, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Universal hover effect — spring glow lift ── */
.pack,
.commission-card,
.credit-card,
.profile-card,
.stat-box,
.download-stats,
.about,
.faq,
.countdown-box,
.pop-pack-card,
.discord-box,
.live-card,
.card,
.box,
.terms-consent,
.commission-faq-item,
.commission-support-box,
.warning-box,
.info-box,
#modAccountPanel {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.pack:hover,
.commission-card:hover,
.credit-card:hover,
.profile-card:hover,
.stat-box:hover,
.pop-pack-card:hover,
.discord-box:hover,
.live-card:hover,
.card:hover,
.box:hover,
.commission-faq-item:hover,
.commission-support-box:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 28px 52px rgba(10, 9, 18, 0.5),
    0 0 0 1px rgba(255, 190, 220, 0.28),
    0 0 36px rgba(170, 110, 255, 0.18) !important;
  border-color: rgba(255, 190, 220, 0.38) !important;
}

/* ── Mobile: sale banners ── */
@media (max-width: 600px) {
  /* Page-level spring sale banner (mods.html) */
  #springSaleBanner {
    padding: 16px 14px !important;
    margin-bottom: 18px !important;
  }

  #springSaleBanner > div {
    flex-direction: column !important;
    gap: 12px !important;
  }

  #springSaleBanner > div > div:first-child h2 {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  #springSaleBanner > div > div:first-child p {
    font-size: 13px !important;
  }

  #springSaleBanner > div > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  #springSaleCountdown {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  #springSaleCountdown > div {
    padding: 8px 4px !important;
  }

  #springSaleCountdown [id^="sale"] {
    font-size: 20px !important;
  }

  /* Global sale banner (all pages, injected by promo-banner.js) */
  .global-sale-banner {
    padding: 14px 14px !important;
  }

  .global-sale-banner__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .global-sale-banner__title {
    font-size: 16px !important;
  }

  .global-sale-banner__meta {
    font-size: 12px !important;
  }

  .global-sale-banner__countdown {
    width: 100% !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  .global-sale-banner__unit {
    padding: 8px 4px !important;
  }

  .global-sale-banner__unit strong {
    font-size: 20px !important;
  }

  .global-sale-banner__unit span {
    font-size: 9px !important;
  }

  .global-sale-banner__cta {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 16px !important;
  }
}
.bm-pack-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* <---// SHARED DESIGN TOKENS //---> */
:root {
  --bg: #060608;
  --surf: rgba(11,13,26,.78);
  --surf2: rgba(15,18,36,.6);
  --b1: rgba(61,139,255,.18);
  --b2: rgba(255,255,255,.06);
  --accent: #3d8bff;
  --purple: #7fb4ff;
  --pink: #e8b45c;
  --green: #34d399;
  --txt: #f0f4ff;
  --muted: rgba(148,163,200,.55);
  --font: 'Inter',system-ui,-apple-system,sans-serif;
  --r: 18px;
}

/* <---// PAGE LOADER //---> */
#rp-loader {
  position: fixed; inset: 0; background: var(--bg,#060608); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease .1s, transform 1s cubic-bezier(.76,0,.24,1) .1s;
}
#rp-loader.out { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.loader-img { width: 52px; height: 52px; animation: lp 1.1s ease-in-out infinite; }
@keyframes lp {
  0%,100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.14); opacity: 1; }
}

/* <---// ANNOUNCEMENT //---> */
#announcementBar {
  display: none; position: relative; z-index: 400;
  background: rgba(61,139,255,.1); border-bottom: 1px solid rgba(61,139,255,.22);
  color: rgba(168,189,255,.9); padding: 10px 20px;
  text-align: center; font-size: 13px; font-weight: 500;
}

/* <---// NAV //---> */
/* <---// NAVBAR //--->
   One breakpoint decides everything: at 960px and below the bar is logo +
   hamburger and every other item moves into the panel. It used to be three
   different numbers (820 for the hamburger, 900 for the panel, 1100 for the
   socials), so between 820 and 1000 the full desktop row was on screen without
   the room to hold it and ran off the right edge. */
nav.rp-nav {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 500 !important;
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  margin: 0 !important;
  padding: 0 22px !important; height: 58px !important; gap: 4px !important;
  background: rgba(6,8,16,.7) !important; background-color: rgba(6,8,16,.7) !important;
  backdrop-filter: blur(24px) !important;
  border: none !important; border-bottom: 1px solid rgba(109,152,255,.1) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
nav.rp-nav .logo { height: 28px !important; width: auto !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; }

/* <---// LOADING SPINNER //---> */
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-spin {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(168,189,255,.18);
  border-top-color: rgba(168,189,255,.7);
  border-radius: 50%;
  animation: rp-spin .65s linear infinite;
  vertical-align: middle;
}
.rp-spin-sm { width: 12px; height: 12px; }
@keyframes rp-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.rp-loading-dash { animation: rp-pulse 1.4s ease-in-out infinite; }
/* <---// NAV LOGO //---> */
nav.rp-nav .rp-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #f0f4ff; font-weight: 800; font-size: 15px; flex-shrink: 0; }
nav.rp-nav .rp-nav-logo img { width: 28px; height: 28px; border-radius: 8px; margin: 0 !important; }

.rp-navlinks { display: flex; align-items: center; gap: 2px; margin-left: 14px; min-width: 0; }
.rp-navlinks a {
  color: rgba(200,215,255,.55); font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s; margin: 0 !important;
}
/* The logo is already the way home, so a Home link on the desktop row is a
   second copy of it costing ~62px. It stays in the mobile panel, where the
   space is vertical and free. */
.rp-navlinks > a[href="index.html"],
.rp-navlinks > a[href="/index.html"],
.rp-navlinks > a[href="/"] { display: none; }
.rp-navlinks a:hover { color: #f0f4ff; background: rgba(255,255,255,.07); }
.rp-navlinks a.active { color: #fbbf24; }
.rp-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rp-nav-socials { display: flex; align-items: center; gap: 10px; }
.rp-nav-socials a {
  opacity: .35; transition: opacity .2s;
  padding: 0 !important; margin: 0 !important;
  background: none !important; border-radius: 0 !important;
}
.rp-nav-socials a:hover { opacity: 1; background: none !important; }
.rp-nav-socials img { width: 16px; height: 16px; filter: brightness(0) invert(1); object-fit: contain; }
.rp-nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 9px;
  background: rgba(109,152,255,.12); border: 1px solid rgba(109,152,255,.25);
  color: #93b8e8; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: all .15s; white-space: nowrap;
}
.rp-nav-cta:hover { background: rgba(109,152,255,.2); color: #f0f4ff; }
.rp-nav-login-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 9px;
  background: rgba(109,152,255,.12); border: 1px solid rgba(109,152,255,.25);
  color: #93b8e8; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: all .15s;
}
.rp-nav-login-btn:hover { background: rgba(109,152,255,.2); color: #f0f4ff; }
/* This is filled in by JS after /api/me answers, so its width is not knowable
   from the markup. Left unconstrained it grew past the right edge of the bar
   (162px over at 390px wide, 596px over at 900px) and only looked fine because
   the bar clips. min-width:0 lets it shrink, and the clip is now a backstop
   rather than the thing holding the layout together. */
#auth-area {
  display: flex; align-items: center; gap: 8px;
  margin-left: 8px; min-width: 0; flex-shrink: 1; overflow: hidden;
}
#auth-area > * { min-width: 0; }
.rp-nav-login-btn, #auth-area a { white-space: nowrap; }

/* <---// NAV DROPDOWN //---> */
.rp-dropdown { position: relative; }
.rp-ddtrig {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(200,215,255,.55); font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  transition: color .15s, background .15s; cursor: pointer;
}
.rp-ddtrig:hover, .rp-dropdown:hover .rp-ddtrig { color: #f0f4ff; background: rgba(255,255,255,.07); }
.rp-ddtrig svg { transition: transform .2s; opacity: .5; }
.rp-dropdown:hover .rp-ddtrig svg { transform: rotate(180deg); opacity: .85; }
.rp-ddmenu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 200px; padding: 16px 8px 8px;
  background: rgba(10,12,24,.97); border: 1px solid rgba(61,139,255,.22);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(28px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
  z-index: 600;
}
.rp-dropdown:hover .rp-ddmenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
}
.rp-ddmenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: rgba(200,215,255,.75); font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
}
.rp-ddmenu a:hover { background: rgba(61,139,255,.12); color: var(--txt); }
.rp-dd-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: rgba(61,139,255,.12); border: 1px solid rgba(61,139,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.rp-dd-info { display: flex; flex-direction: column; gap: 1px; }
.rp-dd-name { font-size: 13px; font-weight: 600; color: rgba(220,230,255,.9); }
.rp-dd-sub { font-size: 11px; color: rgba(148,163,200,.55); }
.rp-ddmenu-divider { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }

/* <---// FOOTER //---> */
.rp-footer { padding: 0; border-top: 1px solid var(--b2); }
.footer-main {
  max-width: 1220px; margin: 0 auto;
  padding: 64px 40px 48px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px;
}
@media(max-width:960px) { .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media(max-width:480px) { .footer-main { grid-template-columns: 1fr; padding: 44px 24px 32px; } }
.footer-brand .footer-logo { height: 28px; width: auto; margin-bottom: 14px; }
.footer-tagline { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 240px; margin-bottom: 22px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s, transform .15s;
}
.footer-socials a:hover { background: rgba(61,139,255,.14); border-color: rgba(61,139,255,.35); transform: translateY(-2px); }
.footer-socials img { width: 15px; height: 15px; filter: brightness(0) invert(1); opacity: .6; }
.footer-socials a:hover img { opacity: 1; }
.footer-col-title {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(168,189,255,.4); margin-bottom: 16px;
}
.footer-col a {
  display: block; font-size: 13px; color: rgba(180,200,240,.5);
  padding: 5px 0; font-weight: 500; transition: color .15s;
}
.footer-col a:hover { color: var(--txt); }
.footer-bottom {
  border-top: 1px solid var(--b2);
  max-width: 1220px; margin: 0 auto; padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
@media(max-width:480px) { .footer-bottom { padding: 18px 24px; } }
.rp-fcopy { font-size: 12px; color: rgba(148,163,200,.28); }
.footer-bottom-links { display: flex; gap: 4px; }
.footer-bottom-links a {
  font-size: 12px; color: rgba(148,163,200,.3); padding: 3px 8px; border-radius: 5px;
  transition: color .15s, background .15s;
}
.footer-bottom-links a:hover { color: rgba(148,163,200,.7); background: rgba(255,255,255,.04); }

/* <---// SCROLL REVEALS //---> */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: translateY(0); }
.rv.d1 { transition-delay: .12s; } .rv.d2 { transition-delay: .24s; }
.rv.d3 { transition-delay: .36s; } .rv.d4 { transition-delay: .48s; }
.from-left { opacity: 0; transform: translateX(-44px); transition: opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1); }
.from-right { opacity: 0; transform: translateX(44px); transition: opacity .85s ease .14s, transform .85s cubic-bezier(.22,1,.36,1) .14s; }
.from-left.in, .from-right.in { opacity: 1; transform: translateX(0); }
.from-below { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.from-below.in { opacity: 1; transform: translateY(0); }
.scale-in { opacity: 0; transform: scale(.94); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.scale-in.in { opacity: 1; transform: scale(1); }

/* <---// PAGE BODY PADDING (accounts for fixed nav) //---> */
body { padding-top: 64px; background: #060608; font-family: 'Inter',system-ui,-apple-system,sans-serif; }

/* <---// MOBILE NAV HAMBURGER //---> */
.rp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .18s;
  -webkit-tap-highlight-color: transparent;
}
.rp-hamburger:hover { background: rgba(255,255,255,.07); }
.rp-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(240,244,255,.8);
  border-radius: 2px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
  transform-origin: center;
}
nav.rp-nav.rp-open .rp-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.rp-nav.rp-open .rp-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.rp-nav.rp-open .rp-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* <---// MOBILE NAV PANEL //--->
   Everything below is one breakpoint. Changing it means changing NAV_BP in
   mobile-nav.js too, which decides when a tap closes the menu. */
@media (max-width: 1180px) {
  .rp-nav-socials { display: none !important; }
}

@media (max-width: 960px) {
  .rp-hamburger { display: flex !important; }

  nav.rp-nav {
    height: 56px !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }
  nav.rp-nav.rp-open {
    height: auto !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    background: rgba(6,6,8,.97) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom-color: rgba(61,139,255,.2) !important;
    padding-bottom: 0 !important;
  }

  /* Closed, the bar is the logo and the hamburger. #auth-area used to stay in
     the row: it did not fit, so the login button was unreachable on a phone
     while still taking up the whole bar. It lives in the panel now. */
  nav.rp-nav .rp-navlinks,
  nav.rp-nav .rp-nav-right,
  nav.rp-nav #auth-area {
    display: none !important;
  }
  .rp-hamburger { margin-left: auto !important; }

  nav.rp-nav.rp-open .rp-navlinks {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    padding: 6px 8px !important;
    border-top: 1px solid rgba(255,255,255,.06);
    order: 10;
  }
  /* Home is hidden on the desktop row, but useful here. */
  nav.rp-nav.rp-open .rp-navlinks > a[href="index.html"],
  nav.rp-nav.rp-open .rp-navlinks > a[href="/index.html"],
  nav.rp-nav.rp-open .rp-navlinks > a[href="/"] { display: block; }

  nav.rp-nav.rp-open .rp-nav-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 14px !important;
    padding: 12px 14px 16px !important;
    border-top: 1px solid rgba(255,255,255,.06);
    order: 11;
  }
  nav.rp-nav.rp-open #auth-area {
    display: flex !important;
    order: 12;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 14px 16px !important;
    overflow: visible !important;
  }
  nav.rp-nav.rp-open #auth-area > * { width: 100%; }
  nav.rp-nav.rp-open .rp-nav-login-btn {
    justify-content: center; width: 100%; padding: 11px 16px !important; font-size: 14px !important;
  }

  /* Rows, not floating pills: a full-width tap target with a hairline between
     each one reads as a list and fits more in the same height. */
  nav.rp-nav.rp-open .rp-navlinks a {
    font-size: 15px !important;
    padding: 12px 12px !important;
    border-radius: 8px !important;
    width: 100%;
    color: rgba(214,226,255,.82);
  }
  nav.rp-nav.rp-open .rp-navlinks > a + a,
  nav.rp-nav.rp-open .rp-navlinks > .rp-dropdown { border-top: 1px solid rgba(255,255,255,.05); }
  nav.rp-nav.rp-open .rp-ddtrig {
    font-size: 15px !important;
    padding: 12px 12px !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
  }

  /* The CTA was a small text link floating in a 20px-padded strip. Full width
     and filled, it reads as the button it is. */
  nav.rp-nav.rp-open .rp-nav-cta {
    display: flex !important; justify-content: center; width: 100%;
    padding: 12px 16px !important; font-size: 14px !important;
    background: rgba(109,152,255,.18) !important;
    border-color: rgba(109,152,255,.42) !important;
    color: #dce8ff !important;
  }
  /* Socials were hidden by the 1180 rule above, which also hid them inside the
     panel where there is plenty of room. Bring them back as a compact row. */
  nav.rp-nav.rp-open .rp-nav-socials {
    display: flex !important;
    justify-content: center; gap: 22px !important;
    padding: 2px 0 4px;
  }
  nav.rp-nav.rp-open .rp-nav-socials img { width: 18px; height: 18px; }

  /* Mobile dropdowns: inline, not floating */
  nav.rp-nav.rp-open .rp-dropdown { width: 100%; }
  nav.rp-nav.rp-open .rp-ddmenu {
    position: static !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s !important;
    min-width: 0 !important;
    width: 100% !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(61,139,255,.14) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    /* max-height:0 collapses the content but not the box: padding, margin and
       border still reserved ~27px of empty space under Mods while it was shut. */
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
  }
  nav.rp-nav.rp-open .rp-dropdown.dd-open .rp-ddmenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: 400px !important;
    padding: 8px !important;
    margin: 4px 0 6px 12px !important;
    border-width: 1px !important;
    transition: max-height .3s ease, opacity .2s !important;
  }
  nav.rp-nav.rp-open .rp-ddtrig svg { transition: transform .25s; }
  nav.rp-nav.rp-open .rp-dropdown.dd-open .rp-ddtrig svg { transform: rotate(180deg); opacity: .85; }

  /* Mobile socials */
  nav.rp-nav.rp-open .rp-nav-socials a { opacity: .6; }
  nav.rp-nav.rp-open .rp-nav-cta { margin-left: 0 !important; }
}

/* <---// DOWNLOAD COUNT BADGE //---> */
.pack-dl-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(148,163,200,.5);
  margin-bottom: 10px;
}
.pack-dl-count::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(61,139,255,.55);
}