/* =====================================================================
   PrimeMC Frog Swamp UI 2026
   Unified visual layer loaded AFTER legacy page styles.
   Theme: frog green / moss / lily pad / misty swamp glass
   ===================================================================== */

:root {
  --bg-forest: #07130d;
  --bg-deep: #040b07;
  --bg-swamp: #0b1c12;
  --bg-moss: #102719;
  --frog: #76df67;
  --frog-bright: #a6f48a;
  --frog-soft: #d3ffb5;
  --moss: #4e9b57;
  --moss-deep: #235a35;
  --lily: #bce77c;
  --reed: #8eb45d;
  --mud: #b59767;
  --warm-sun: #d8f28a;
  --sage-green: #86e875;
  --cyan-mist: #8bd9bb;
  --text-main: #f4fff5;
  --text-muted: #a9c7b0;
  --text-dim: #789381;
  --glass-bg: rgba(13, 34, 22, .72);
  --glass-bg-strong: rgba(10, 29, 18, .90);
  --glass-border: rgba(166, 244, 138, .14);
  --glass-border-strong: rgba(166, 244, 138, .28);
  --line: rgba(199, 244, 180, .10);
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, .28);
  --shadow-card: 0 14px 35px rgba(0, 0, 0, .20);
  --shadow-frog: 0 10px 30px rgba(118, 223, 103, .16);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --font-ui: 'Quicksand', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mc: 'Quicksand', 'Inter', system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-forest: #eef8f1;
  --bg-deep: #f7fcf8;
  --bg-swamp: #dff0e5;
  --bg-moss: #d4ead9;
  --frog: #4fae57;
  --frog-bright: #2e8b47;
  --frog-soft: #f4ffea;
  --moss: #4a8d52;
  --moss-deep: #3a7142;
  --lily: #cde98c;
  --reed: #9ebb6f;
  --mud: #8a6e49;
  --warm-sun: #c59a24;
  --sage-green: #4fae57;
  --cyan-mist: #4ab6a0;
  --text-main: #173420;
  --text-muted: #486454;
  --text-dim: #6d8876;
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-bg-strong: rgba(255, 255, 255, .92);
  --glass-border: rgba(74, 141, 82, .16);
  --glass-border-strong: rgba(74, 141, 82, .28);
  --line: rgba(37, 78, 49, .10);
  --shadow-soft: 0 18px 55px rgba(31, 71, 45, .12);
  --shadow-card: 0 14px 35px rgba(31, 71, 45, .10);
  --shadow-frog: 0 10px 30px rgba(79, 174, 87, .12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  color-scheme: light dark;
  background: var(--bg-deep);
  scroll-behavior: smooth;
  scrollbar-color: var(--moss) var(--bg-deep);
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--text-main);
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 12% 5%, rgba(118,223,103,.13), transparent 26rem),
    radial-gradient(circle at 90% 22%, rgba(139,217,187,.08), transparent 25rem),
    radial-gradient(circle at 46% 105%, rgba(78,155,87,.16), transparent 34rem),
    linear-gradient(155deg, #06110b 0%, #0a1b11 44%, #07130d 100%) !important;
  background-attachment: fixed !important;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .30;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(188,231,124,.12) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 80px 58px, rgba(139,217,187,.10) 0 1px, transparent 1.4px);
  background-size: 110px 110px, 145px 145px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

body::after {
  content: '';
  position: fixed;
  left: -15vw;
  right: -15vw;
  bottom: -22vh;
  height: 45vh;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(67,134,75,.22), rgba(31,78,48,.10) 45%, transparent 70%);
  filter: blur(22px);
}

::selection { background: var(--frog); color: #092110; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #06100a; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--moss), #336f43); border: 3px solid #06100a; border-radius: 999px; }

img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

/* Ambient layers from homepage / payment pages */
.forest-ambient {
  position: fixed !important;
  inset: -25vh -15vw auto auto !important;
  width: 72vw !important;
  height: 72vh !important;
  z-index: -1 !important;
  opacity: .9;
  background:
    radial-gradient(circle, rgba(118,223,103,.15) 0%, rgba(78,155,87,.06) 40%, transparent 72%) !important;
  filter: blur(55px) !important;
}
.sun-mote { background: var(--frog-soft) !important; box-shadow: 0 0 10px rgba(166,244,138,.35); }
.falling-leaf { opacity: .44; filter: saturate(.8) drop-shadow(0 3px 5px rgba(0,0,0,.28)) !important; }

/* =====================================================================
   Navigation
   ===================================================================== */
.site-header,
.cozy-nav {
  width: min(1180px, calc(100% - 28px)) !important;
  min-height: 68px;
  margin: 14px auto 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 22px !important;
  background: rgba(7, 25, 15, .80) !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
  backdrop-filter: blur(22px) saturate(135%) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035) !important;
  z-index: 1000 !important;
}

.site-header {
  position: sticky !important;
  top: 12px !important;
}

.cozy-nav {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  row-gap: 10px;
}

.header-inner {
  width: 100% !important;
  max-width: none !important;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 18px;
}

.brand {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui) !important;
  font-size: 1.23rem !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  text-decoration: none;
  text-shadow: none !important;
}
.brand::before {
  content: '🐸';
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(166,244,138,.24);
  border-radius: 13px 13px 15px 15px;
  background: linear-gradient(145deg, rgba(118,223,103,.20), rgba(35,90,53,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 18px rgba(0,0,0,.20);
  font-size: 1.15rem;
}
.prime-logo {
  background: linear-gradient(110deg, #f4fff5 0%, var(--frog-bright) 55%, var(--lily) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.nav-links,
.nav-menu,
.main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px !important;
  min-width: 0;
}

.nav-links a,
.nav-menu .nav-link,
.main-nav a {
  position: relative;
  padding: 10px 12px !important;
  border-radius: 12px;
  color: var(--text-muted) !important;
  font-size: .91rem !important;
  font-weight: 750 !important;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a:hover,
.nav-menu .nav-link:hover,
.main-nav a:hover {
  color: #f7fff7 !important;
  background: rgba(118,223,103,.09);
  text-shadow: none !important;
  transform: translateY(-1px);
}

.nav-links a.btn,
.nav-menu .btn-cozy,
.main-nav a.btn {
  padding: 10px 15px !important;
}

/* =====================================================================
   Base buttons / form controls
   ===================================================================== */
.btn,
.btn-cozy,
.mini-btn,
.btn-mini,
.copybtn,
.btn-copy {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 17px !important;
  border: 1px solid rgba(166,244,138,.28) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #9bed7f, #66cb61) !important;
  color: #0b2a14 !important;
  box-shadow: 0 8px 22px rgba(91,199,89,.17), inset 0 1px 0 rgba(255,255,255,.30) !important;
  font-family: var(--font-ui) !important;
  font-size: .94rem;
  font-weight: 900 !important;
  line-height: 1.1;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .20s ease, box-shadow .20s ease, filter .20s ease !important;
}
.btn:hover,
.btn-cozy:hover,
.mini-btn:hover,
.btn-mini:hover,
.copybtn:hover,
.btn-copy:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(91,199,89,.24), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.btn:active,
.btn-cozy:active,
.mini-btn:active,
.btn-mini:active,
.copybtn:active,
.btn-copy:active { transform: translateY(0) scale(.985) !important; }

.btn-outline,
.btn-secondary {
  background: rgba(255,255,255,.035) !important;
  color: var(--text-main) !important;
  border-color: rgba(188,231,124,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.btn-outline:hover,
.btn-secondary:hover { background: rgba(118,223,103,.08) !important; border-color: rgba(166,244,138,.38) !important; }

.btn-red,
.bad-btn,
.cancel-btn { background: linear-gradient(135deg, #f29191, #dc6666) !important; color: #341010 !important; border-color: rgba(255,190,190,.25) !important; }
.btn-yellow { background: linear-gradient(135deg, #e7e594, #c4bd63) !important; color: #302f0e !important; border-color: rgba(247,242,166,.26) !important; }
.btn-success, .good { background-color: rgba(118,223,103,.12) !important; }

input:not([type='radio']):not([type='checkbox']),
select,
textarea,
.input-group input,
.form-row input,
.form-row select,
.form-group input,
.form-group select,
.form-group textarea,
.filter-bar input,
.filter-bar select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px !important;
  border: 1px solid rgba(188,231,124,.13) !important;
  border-radius: 13px !important;
  outline: none;
  background: rgba(2, 14, 8, .46) !important;
  color: var(--text-main) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
textarea { min-height: 104px; resize: vertical; }
select option { background: #0b1d12; color: var(--text-main); }
input::placeholder, textarea::placeholder { color: #6f8d78 !important; opacity: 1; }
input:focus, select:focus, textarea:focus,
.input-group input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(166,244,138,.55) !important;
  background: rgba(7, 25, 15, .72) !important;
  box-shadow: 0 0 0 4px rgba(118,223,103,.09) !important;
}
label { color: #c8dfcd; }

input[type='radio'], input[type='checkbox'] { accent-color: var(--frog); }

/* =====================================================================
   Generic layouts and surfaces
   ===================================================================== */
.container {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

.site-header > .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 18px;
  min-height: 46px;
}

.glass-panel,
.cozy-card,
.profile-card,
.admin-card,
.settings-card,
.box,
.panel,
.status-card,
.step-card,
.summary-card,
.notice-card,
.balance-card,
.featured-section {
  border: 1px solid var(--glass-border) !important;
  background: linear-gradient(145deg, rgba(16, 43, 27, .72), rgba(7, 24, 14, .78)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.028) !important;
}

.glass-panel,
.profile-card,
.admin-card,
.settings-card,
.box,
.panel,
.status-card,
.step-card,
.summary-card { border-radius: var(--radius-lg) !important; }

.glass-panel,
.profile-card,
.admin-card,
.settings-card { padding: clamp(20px, 3vw, 28px) !important; }

.glass-panel h1, .glass-panel h2, .glass-panel h3,
.profile-card h1, .profile-card h2, .profile-card h3,
.admin-card h1, .admin-card h2, .admin-card h3,
.settings-card h1, .settings-card h2, .settings-card h3 {
  color: #f5fff5 !important;
  letter-spacing: -.02em;
}

.text-gradient {
  background: linear-gradient(105deg, #ffffff, var(--frog-bright) 58%, var(--lily)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.text-warm { color: var(--lily) !important; }
.mc-font { font-family: var(--font-ui) !important; font-weight: 900; letter-spacing: -.02em !important; }

.help-text, .hint, .hero-sub, .info-line, .step-desc, .meta-tag { color: var(--text-muted) !important; }

/* notices */
.success-msg, .notice.success, .success-box, .status-ok, .good {
  background: rgba(118,223,103,.10) !important;
  border: 1px solid rgba(118,223,103,.26) !important;
  border-left: 4px solid var(--frog) !important;
  color: #bdf6b3 !important;
}
.error-msg, .notice.error, .status-error, .bad {
  background: rgba(239,104,104,.10) !important;
  border: 1px solid rgba(239,104,104,.25) !important;
  border-left: 4px solid #eb7777 !important;
  color: #ffc1c1 !important;
}
.warning-msg, .status-warn, .warn, .danger-note, .danger-zone {
  background: rgba(220,202,96,.08) !important;
  border-color: rgba(227,216,116,.22) !important;
  color: #e9e4a4 !important;
}
.info-box, .info-msg {
  background: rgba(139,217,187,.08) !important;
  border-color: rgba(139,217,187,.20) !important;
  color: #b4e5d2 !important;
}

.success-msg, .error-msg, .warning-msg, .info-msg, .info-box, .notice, .danger-note, .danger-zone {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  line-height: 1.55;
}

/* =====================================================================
   Home page
   ===================================================================== */
body:has(.hero-section) .container { padding-top: 150px !important; }
.hero-section {
  position: relative;
  max-width: 900px;
  margin: 0 auto 40px !important;
  padding: 46px 38px 34px;
  text-align: center;
}
.hero-section::before {
  content: '🐸';
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 26px 26px 31px 31px;
  border: 1px solid rgba(166,244,138,.25);
  background: radial-gradient(circle at 50% 28%, rgba(166,244,138,.24), rgba(35,90,53,.22) 62%, rgba(8,31,18,.65));
  box-shadow: 0 18px 50px rgba(118,223,103,.12), inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 2.3rem;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 42px;
  background: radial-gradient(circle at 50% 0%, rgba(118,223,103,.08), transparent 58%);
}
.badge-chill {
  margin-bottom: 16px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(166,244,138,.19) !important;
  background: rgba(118,223,103,.075) !important;
  color: #bff8b4 !important;
  font-size: .89rem !important;
}
.hero-title {
  margin-bottom: 16px !important;
  color: #f8fff8 !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(2.55rem, 7vw, 5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
  text-shadow: 0 8px 38px rgba(0,0,0,.24) !important;
}
.hero-desc {
  max-width: 720px !important;
  color: var(--text-muted) !important;
  font-size: clamp(1rem, 2vw, 1.16rem) !important;
  line-height: 1.75;
}

.chill-bento-grid { gap: 18px !important; }
.cozy-card {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 27px !important;
  border-radius: 26px !important;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.cozy-card::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  right: -65px;
  bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,223,103,.13), transparent 68%);
  pointer-events: none;
}
.cozy-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(166,244,138,.30) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(118,223,103,.04) inset !important;
}
.cozy-card h3 { font-size: 1.45rem !important; margin-bottom: 10px !important; text-shadow: none !important; }
.cozy-card p { color: var(--text-muted) !important; font-size: .98rem !important; line-height: 1.65 !important; margin-bottom: 22px !important; }
.card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px !important;
  border: 1px solid rgba(166,244,138,.16);
  border-radius: 17px;
  background: rgba(118,223,103,.08);
  font-size: 1.7rem !important;
  filter: none !important;
}
.server-card { min-height: 175px; background: linear-gradient(135deg, rgba(20,57,34,.80), rgba(8,28,16,.86)) !important; }
.ranking-card { background: linear-gradient(135deg, rgba(38,87,49,.44), rgba(10,33,20,.84)) !important; border-color: rgba(166,244,138,.19) !important; }
.status-box { background: rgba(2,12,7,.42) !important; border: 1px solid rgba(166,244,138,.11); }
.ip-container { background: rgba(2,14,8,.44) !important; border-color: rgba(166,244,138,.15) !important; }
.ip-text { color: var(--frog-bright) !important; }

/* =====================================================================
   Auth pages
   ===================================================================== */
body:has(main.container > .glass-panel) main.container {
  padding-top: 52px !important;
  padding-bottom: 48px !important;
}
body:has(main.container > .glass-panel) main.container > .glass-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  padding: clamp(24px, 5vw, 36px) !important;
}
body:has(main.container > .glass-panel) main.container > .glass-panel::before {
  content: '🐸  ·  🌿';
  display: block;
  margin-bottom: 13px;
  text-align: center;
  color: var(--frog-bright);
  letter-spacing: .24em;
  font-size: 1.06rem;
}

/* =====================================================================
   Profile
   ===================================================================== */
.profile-wrap,
.admin-wrap,
.wrap,
.charge-wrapper,
.admin-container,
.setup-container {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.profile-wrap, .admin-wrap { margin-top: 44px !important; }

.profile-hero,
.admin-hero,
.admin-banner,
.shop-banner,
.charge-header-title,
.setup-header {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  background:
    radial-gradient(circle at 86% 20%, rgba(166,244,138,.12), transparent 20rem),
    linear-gradient(135deg, rgba(26,67,39,.76), rgba(8,29,17,.86)) !important;
  box-shadow: var(--shadow-soft) !important;
}
.profile-hero::after,
.admin-hero::after,
.admin-banner::after,
.shop-banner::after,
.charge-header-title::after,
.setup-header::after {
  content: '🐸';
  position: absolute;
  right: clamp(18px, 5vw, 50px);
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  font-size: clamp(3.6rem, 8vw, 7rem);
  opacity: .13;
  filter: grayscale(.15);
  pointer-events: none;
}
.profile-hero { padding: clamp(25px, 4vw, 38px) !important; }
.avatar {
  border-radius: 25px !important;
  border-color: rgba(166,244,138,.36) !important;
  background: rgba(2,14,8,.50) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.25) !important;
}
.badge-bound {
  background: rgba(118,223,103,.09) !important;
  color: #bff5b5 !important;
  border-color: rgba(118,223,103,.25) !important;
}

.stats-grid,
.shop-stats,
.summary-grid { gap: 14px !important; }
.stat-card,
.stat-box,
.summary-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(15,43,26,.72), rgba(6,22,13,.78)) !important;
  box-shadow: 0 11px 28px rgba(0,0,0,.16) !important;
}
.stat-card::after, .stat-box::after, .summary-card::after {
  content: '';
  position: absolute;
  width: 75px;
  height: 75px;
  right: -30px;
  bottom: -32px;
  border-radius: 50%;
  background: rgba(118,223,103,.07);
}
.stat-value, .balance-amount, .summary-card strong { color: var(--frog-bright) !important; text-shadow: none !important; }
.stat-label { color: var(--text-dim) !important; }
.content-grid, .admin-grid { gap: 18px !important; }

/* =====================================================================
   Shop
   ===================================================================== */
.shop-banner {
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 32px auto 26px !important;
  padding: 38px 28px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.shop-banner::before { display: none !important; }
.shop-banner-content { max-width: 820px !important; margin: 0 !important; text-align: left; }
.shop-banner h1 { margin: 0 0 8px !important; font-size: clamp(2rem, 5vw, 3.25rem) !important; letter-spacing: -.045em; text-shadow: none !important; }
.shop-banner p { max-width: 680px; line-height: 1.65; }
.shop-stats { margin-bottom: 18px !important; }
.stat-box { padding: 17px 14px !important; }
.stat-box:hover { transform: translateY(-2px) !important; border-color: rgba(166,244,138,.28) !important; }
.balance-section {
  border: 1px solid rgba(166,244,138,.22) !important;
  border-radius: 22px !important;
  background: linear-gradient(125deg, rgba(47,105,54,.26), rgba(9,31,18,.82)) !important;
  box-shadow: var(--shadow-card) !important;
}
.balance-amount { font-size: clamp(1.8rem, 4vw, 2.45rem) !important; }
.categories-section {
  position: sticky;
  top: 94px;
  z-index: 40;
  padding: 9px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 17px !important;
  background: rgba(6,24,14,.86) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.category-btn {
  padding: 9px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: .9rem;
}
.category-btn:hover, .category-btn.active {
  border-color: rgba(166,244,138,.18) !important;
  background: rgba(118,223,103,.10) !important;
  color: var(--frog-soft) !important;
  box-shadow: none !important;
}
.featured-section {
  overflow: hidden;
  border-radius: 22px !important;
  background: linear-gradient(130deg, rgba(37,91,46,.35), rgba(9,29,17,.86)) !important;
}
.featured-title { color: var(--frog-bright) !important; }
.featured-item { background: rgba(2,15,8,.30) !important; border-color: rgba(166,244,138,.11) !important; }
.featured-price { color: var(--lily) !important; }

.shop-grid { gap: 17px !important; }
.item-card {
  overflow: hidden;
  border: 1px solid var(--glass-border) !important;
  border-radius: 23px !important;
  background: linear-gradient(155deg, rgba(15,45,26,.78), rgba(6,21,12,.86)) !important;
  box-shadow: 0 13px 32px rgba(0,0,0,.18) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.item-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(166,244,138,.30) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.26) !important;
}
.item-header { background: linear-gradient(145deg, rgba(52,112,58,.20), rgba(9,28,17,.18)) !important; border-bottom-color: var(--line) !important; }
.item-icon { filter: drop-shadow(0 8px 18px rgba(0,0,0,.24)); }
.item-name { color: #f4fff4 !important; }
.item-description { color: var(--text-muted) !important; }
.item-price { color: var(--frog-bright) !important; }
.item-footer { border-top-color: var(--line) !important; background: rgba(3,15,8,.26) !important; }
.item-badge, .meta-tag { border-color: rgba(166,244,138,.13) !important; background: rgba(118,223,103,.07) !important; color: #bdeeb5 !important; }

/* =====================================================================
   Charge / card topup
   ===================================================================== */
.charge-wrapper { margin-top: 110px !important; padding-bottom: 60px !important; }
.charge-header-title { margin-bottom: 20px !important; padding: 28px 30px !important; text-align: left !important; }
.charge-header-title h1 { font-size: clamp(2rem, 5vw, 3.1rem) !important; letter-spacing: -.04em; }
.charge-header-title p { max-width: 720px; }
.charge-grid { gap: 18px !important; }
.balance-card { border-radius: 20px !important; }
.pkg-grid, .method-grid { gap: 11px !important; }
.pkg-item, .method-card {
  border: 1px solid rgba(188,231,124,.12) !important;
  border-radius: 17px !important;
  background: rgba(4,19,11,.40) !important;
  box-shadow: none !important;
}
.pkg-radio input:checked + .pkg-item,
.pkg-item:hover,
.method-radio input:checked + .method-card,
.method-card:hover {
  border-color: rgba(166,244,138,.46) !important;
  background: rgba(45,105,50,.18) !important;
  box-shadow: 0 0 0 3px rgba(118,223,103,.06) !important;
}
.pkg-badge { background: var(--frog) !important; color: #0b2a14 !important; }
.pkg-points, .pkg-rate { color: var(--frog-bright) !important; }
.qr-display-area { background: transparent !important; }
.qr-wrapper {
  border: 9px solid rgba(255,255,255,.95) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.26) !important;
}
.transfer-code-box {
  background: rgba(118,223,103,.07) !important;
  border: 1px dashed rgba(166,244,138,.30) !important;
  border-radius: 17px !important;
}
.code-text, .code { color: var(--frog-bright) !important; }
.pro-status-card { border-color: rgba(166,244,138,.13) !important; background: rgba(3,18,10,.42) !important; }
.progress-shell { background: rgba(255,255,255,.05) !important; }
.progress-bar { background: linear-gradient(90deg, var(--moss), var(--frog-bright)) !important; }
.status {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px !important;
  font-weight: 900 !important;
}
.status-PENDING { background: rgba(218,202,91,.10) !important; color: #eee49a !important; }
.status-APPROVED, .status-ok { background: rgba(118,223,103,.11) !important; color: #bdf7b3 !important; }
.status-CANCELLED, .status-FAILED, .status-error { background: rgba(234,111,111,.10) !important; color: #ffc0c0 !important; }

/* =====================================================================
   Admin / settings / utility screens
   ===================================================================== */
.admin-hero { padding: clamp(26px, 4vw, 38px) !important; }
.admin-banner {
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 32px auto 24px !important;
  padding: 32px 28px !important;
  border-bottom: 1px solid var(--glass-border) !important;
  text-align: left !important;
}
.admin-banner h1 { margin: 0 0 7px !important; font-size: clamp(2rem, 5vw, 2.8rem) !important; }
.admin-container { padding: 0 0 60px !important; }
.quick-links { gap: 9px !important; }
.quick-link {
  padding: 13px 14px !important;
  border: 1px solid rgba(166,244,138,.09) !important;
  border-radius: 14px !important;
  background: rgba(3,17,9,.32) !important;
}
.quick-link:hover { border-color: rgba(166,244,138,.28) !important; background: rgba(118,223,103,.07) !important; transform: translateX(2px) !important; }
.rcon-box, .rcon-item { border-color: rgba(166,244,138,.11) !important; background: rgba(4,18,10,.32) !important; }
.rcon-box.ok { border-color: rgba(118,223,103,.24) !important; background: rgba(118,223,103,.08) !important; color: #bdf5b4 !important; }
.rcon-box.bad { border-color: rgba(238,107,107,.24) !important; background: rgba(238,107,107,.08) !important; color: #ffc0c0 !important; }
.rcon-box.warn { border-color: rgba(225,210,103,.22) !important; background: rgba(225,210,103,.07) !important; color: #eae2a1 !important; }

.settings-grid { gap: 18px !important; }
.preview-box, .preview {
  border: 1px solid rgba(166,244,138,.11) !important;
  border-radius: 15px !important;
  background: rgba(1,12,6,.34) !important;
}
.preview-qr { border-radius: 14px !important; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.qr-url { color: #a8dcc8 !important; background: rgba(2,15,8,.48) !important; border-color: rgba(166,244,138,.09) !important; }

.filter-bar {
  border: 1px solid var(--glass-border) !important;
  border-radius: 17px !important;
  padding: 12px !important;
  background: rgba(4,19,11,.42) !important;
}

/* Tables */
.table-wrap,
.glass-panel:has(> .table),
.glass-panel:has(> .request-table),
.admin-card:has(> .table),
.box:has(> .table) { overflow-x: auto; }
.table,
.request-table,
.pkg-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--text-muted) !important;
}
.table th, .table td,
.request-table th, .request-table td,
.pkg-table th, .pkg-table td {
  padding: 12px 11px !important;
  border-bottom: 1px solid rgba(188,231,124,.08) !important;
  vertical-align: middle !important;
}
.table th,
.request-table th,
.pkg-table th {
  color: #dff3e2 !important;
  background: rgba(118,223,103,.055) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.table tr:hover td,
.request-table tr:hover td,
.pkg-table tr:hover td { background: rgba(118,223,103,.035); }

/* Utility / setup screens */
.setup-container { max-width: 860px !important; margin-top: 38px !important; }
.setup-header { padding: 28px 26px !important; margin-bottom: 18px !important; text-align: left !important; }
.steps-container { gap: 13px !important; }
.step-card { padding: 20px !important; }
.step-number { background: rgba(118,223,103,.12) !important; color: var(--frog-bright) !important; border-color: rgba(166,244,138,.18) !important; }

/* Footer */
.site-footer {
  width: min(1180px, calc(100% - 28px));
  margin: 68px auto 14px !important;
  padding: 23px 18px !important;
  border: 1px solid rgba(166,244,138,.09) !important;
  border-radius: 20px !important;
  background: rgba(5,19,11,.62) !important;
  backdrop-filter: blur(16px);
  color: var(--text-muted);
}
.site-footer p { margin: 5px 0 !important; color: var(--text-muted) !important; }
.site-footer strong { color: var(--frog-bright); }

/* =====================================================================
   Theme toggle
   ===================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-strong);
  color: var(--text-main);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: var(--sage-green);
}
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--sage-green);
  outline-offset: 2px;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1000px) {
  .site-header, .cozy-nav { width: calc(100% - 20px) !important; }
  .nav-links, .nav-menu, .main-nav {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar, .nav-menu::-webkit-scrollbar, .main-nav::-webkit-scrollbar { display: none; }
  .stats-grid, .shop-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .content-grid, .admin-grid, .settings-grid, .charge-grid { grid-template-columns: 1fr !important; }
  .shop-banner-content { padding-right: 90px; }
}

@media (max-width: 760px) {
  .site-header, .cozy-nav {
    min-height: 60px;
    top: 7px !important;
    margin-top: 7px !important;
    padding: 7px 8px !important;
    border-radius: 18px !important;
  }
  .cozy-nav { top: 0 !important; }
  .header-inner { gap: 8px; }
  .brand::before { width: 34px; height: 34px; border-radius: 12px; }
  .brand { font-size: 1.04rem !important; }
  .nav-links a, .nav-menu .nav-link, .main-nav a { padding: 9px 10px !important; font-size: .83rem !important; }
  .nav-menu a.nav-link { display: inline-flex !important; }
  .container,
  .profile-wrap, .admin-wrap, .wrap, .charge-wrapper, .admin-container, .setup-container,
  .shop-banner, .admin-banner { width: min(100% - 20px, 1180px) !important; }
  body:has(.hero-section) .container { padding-top: 106px !important; }
  .hero-section { padding: 28px 10px 16px; }
  .hero-section::before { width: 64px; height: 64px; font-size: 1.85rem; border-radius: 21px 21px 26px 26px; }
  .hero-title { font-size: clamp(2.35rem, 13vw, 3.5rem) !important; }
  .chill-bento-grid { grid-template-columns: 1fr !important; }
  .card-wide, .server-card, .ranking-card { grid-column: span 1 !important; }
  .cozy-card { min-height: auto; }
  .profile-hero { grid-template-columns: 1fr !important; text-align: center; }
  .avatar { margin: 0 auto; }
  .shop-banner, .admin-banner, .charge-header-title, .setup-header { padding: 25px 20px !important; }
  .shop-banner-content { padding-right: 0; }
  .shop-banner::after, .admin-banner::after, .charge-header-title::after, .setup-header::after { opacity: .07; }
  .categories-section { top: 77px; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .categories-section::-webkit-scrollbar { display:none; }
  .category-btn { flex: 0 0 auto; white-space: nowrap; }
  .balance-section { align-items: flex-start !important; }
  .pkg-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 520px) {
  .stats-grid, .shop-stats, .summary-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-section { margin-bottom: 20px !important; }
  .cozy-card, .glass-panel, .profile-card, .admin-card, .settings-card { border-radius: 18px !important; padding: 18px !important; }
  .profile-wrap, .admin-wrap { padding: 0 !important; }
  .profile-hero { border-radius: 22px !important; }
  .pkg-grid, .method-grid { grid-template-columns: 1fr !important; }
  .ip-container { flex-direction: column; gap: 8px; align-items: stretch !important; padding: 10px !important; }
  .ip-text { margin-right: 0 !important; text-align: center; font-size: .95rem !important; }
  .btn-copy { width: 100%; }
  .footer-content { font-size: .88rem; }
}

/* Graceful reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .falling-leaf, .sun-mote { display: none !important; }
}

/* =====================================================================
   Frog Pond Illustration update (based on user reference image)
   ===================================================================== */
body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 80%, transparent), color-mix(in srgb, var(--bg-forest) 84%, transparent)),
    radial-gradient(circle at 18% 16%, rgba(248,255,173,.07), transparent 20rem),
    radial-gradient(circle at 74% 82%, rgba(64,195,166,.11), transparent 24rem),
    url('frog-pond-bg.jpg') center top / cover fixed no-repeat !important;
}

body::before {
  opacity: .22;
}

.hero-section,
.profile-hero,
.shop-banner,
.admin-banner,
.charge-header-title,
.setup-header,
.login-card,
.register-card {
  position: relative;
  overflow: hidden;
}

.hero-section::after,
.profile-hero::after,
.shop-banner::after,
.admin-banner::after,
.charge-header-title::after,
.setup-header::after,
.login-card::after,
.register-card::after {
  content: '';
  position: absolute;
  inset: auto -8% -18% auto;
  width: 220px;
  height: 220px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,224,235,.18), rgba(108,224,235,0) 68%);
  filter: blur(6px);
}

.cozy-card,
.glass-panel,
.profile-card,
.admin-card,
.settings-card,
.stat-box,
.stat-card,
.shop-item,
.item-card,
.package-card,
.charge-card,
.form-card,
.table-card {
  box-shadow: 0 20px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.02) !important;
}

@media (max-width: 760px) {
  .site-header,
  .cozy-nav {
    width: calc(100% - 12px) !important;
    border-radius: 16px !important;
  }

  .header-inner,
  .cozy-nav {
    align-items: flex-start !important;
  }

  .nav-links,
  .nav-menu,
  .main-nav {
    width: 100%;
    padding-bottom: 2px;
    gap: 4px !important;
  }

  .nav-links a,
  .nav-menu .nav-link,
  .main-nav a {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  body {
    background-position: center top;
    background-attachment: scroll !important;
  }

  .site-header,
  .cozy-nav {
    padding: 8px !important;
  }

  .brand span,
  .prime-logo {
    font-size: .98rem !important;
  }
}

/* =====================================================================
   PrimeMC Motion Layer v3
   Smooth, lightweight motion with reduced-motion support
   ===================================================================== */

html {
  view-transition-name: root;
}

@supports (view-transition-name: root) {
  ::view-transition-old(root) {
    animation: prime-page-out .22s ease both;
  }
  ::view-transition-new(root) {
    animation: prime-page-in .36s cubic-bezier(.22,.8,.28,1) both;
  }
}

body,
.site-header,
.cozy-nav,
.glass-panel,
.cozy-card,
.profile-card,
.admin-card,
.settings-card,
.panel,
.item-card,
.stat-card,
.stat-box,
.top-stat,
.featured-card,
input,
textarea,
select,
button,
a {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform, filter;
  transition-duration: .28s;
  transition-timing-function: cubic-bezier(.22,.75,.25,1);
}

html.theme-changing body,
html.theme-changing .site-header,
html.theme-changing .cozy-nav,
html.theme-changing .glass-panel,
html.theme-changing .cozy-card,
html.theme-changing .profile-card,
html.theme-changing .admin-card,
html.theme-changing .settings-card,
html.theme-changing .panel,
html.theme-changing input,
html.theme-changing textarea,
html.theme-changing select {
  transition-duration: .36s !important;
}

body {
  animation: prime-body-enter .44s cubic-bezier(.22,.8,.28,1) both;
}

.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.985);
  filter: saturate(.92) blur(1.5px);
  transition:
    opacity .55s cubic-bezier(.22,.8,.28,1) var(--motion-delay, 0ms),
    transform .62s cubic-bezier(.18,.82,.25,1) var(--motion-delay, 0ms),
    filter .55s ease var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: none;
}

.site-header,
.cozy-nav {
  transition: transform .34s cubic-bezier(.22,.8,.28,1), opacity .26s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

.site-header.is-scrolled,
.cozy-nav.is-scrolled {
  box-shadow: 0 18px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
}

.site-header.is-hidden-scroll {
  transform: translateY(-115%);
  opacity: .85;
}

.cozy-nav.is-hidden-scroll {
  transform: translate(-50%, -130%) !important;
  opacity: .86;
}

.brand::before {
  animation: prime-frog-float 4.6s ease-in-out infinite;
  transform-origin: 50% 70%;
}

.prime-logo {
  background-size: 180% 100% !important;
  animation: prime-logo-shimmer 8s ease-in-out infinite;
}

.btn,
.btn-cozy,
.btn-mini,
.theme-toggle-btn,
.cat-btn,
.category-btn,
.btn-copy {
  overflow: hidden;
  isolation: isolate;
}

.btn:hover,
.btn-cozy:hover,
.theme-toggle-btn:hover,
.cat-btn:hover,
.category-btn:hover,
.btn-copy:hover {
  transform: translateY(-2px) scale(1.012);
}

.btn:active,
.btn-cozy:active,
.theme-toggle-btn:active,
.cat-btn:active,
.category-btn:active,
.btn-copy:active {
  transform: translateY(0) scale(.985);
  transition-duration: .08s;
}

.prime-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.38) 0%, rgba(255,255,255,.16) 34%, transparent 70%);
  transform: scale(0);
  animation: prime-ripple .58s ease-out forwards;
}

.item-card,
.cozy-card,
.featured-card,
.stat-card,
.top-stat {
  transform-style: preserve-3d;
}

.item-card.is-tilting,
.cozy-card.is-tilting,
.featured-card.is-tilting,
.stat-card.is-tilting,
.top-stat.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px);
}

.item-card::after,
.cozy-card::after,
.featured-card::after,
.stat-card::after,
.top-stat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%), rgba(214,255,174,.12), transparent 38%);
  transition: opacity .25s ease;
}

.item-card.is-tilting::after,
.cozy-card.is-tilting::after,
.featured-card.is-tilting::after,
.stat-card.is-tilting::after,
.top-stat.is-tilting::after {
  opacity: 1;
}

.prime-pond-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .72;
}

body > *:not(.prime-pond-ambient) {
  position: relative;
  z-index: 1;
}

.pond-mote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(226,255,167,.86);
  box-shadow: 0 0 9px rgba(198,255,141,.52), 0 0 20px rgba(122,226,166,.18);
  opacity: 0;
  animation: prime-mote-drift var(--duration) ease-in-out var(--delay) infinite;
}

.pond-bubble {
  background: rgba(147,238,225,.16);
  border: 1px solid rgba(194,255,241,.34);
  box-shadow: inset 0 0 4px rgba(255,255,255,.25), 0 0 10px rgba(119,228,211,.08);
  animation-name: prime-bubble-rise;
}

.hero-section,
.shop-hero,
.admin-banner,
.profile-hero {
  background-position: center;
  transition: background-position .9s cubic-bezier(.22,.75,.25,1), box-shadow .36s ease;
}

.hero-section:hover,
.shop-hero:hover,
.admin-banner:hover,
.profile-hero:hover {
  background-position: center 48%;
}

.page-leaving body {
  opacity: .96;
  transform: translateY(-3px);
  filter: saturate(.96);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

@keyframes prime-body-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes prime-page-in {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to { opacity: 1; transform: none; }
}

@keyframes prime-page-out {
  from { opacity: 1; }
  to { opacity: .96; }
}

@keyframes prime-frog-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-2px) rotate(-2deg); }
  55% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes prime-logo-shimmer {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes prime-ripple {
  0% { transform: scale(0); opacity: .7; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes prime-mote-drift {
  0%,100% { transform: translate3d(0,10px,0) scale(.8); opacity: 0; }
  20% { opacity: .65; }
  52% { transform: translate3d(var(--drift),-24px,0) scale(1.05); opacity: .95; }
  82% { opacity: .38; }
}

@keyframes prime-bubble-rise {
  0% { transform: translate3d(0,28px,0) scale(.72); opacity: 0; }
  18% { opacity: .42; }
  80% { opacity: .22; }
  100% { transform: translate3d(var(--drift),-80px,0) scale(1.15); opacity: 0; }
}

@media (max-width: 760px) {
  .motion-reveal {
    transform: translate3d(0,12px,0) scale(.992);
  }

  .prime-pond-ambient {
    opacity: .5;
  }

  .item-card.is-tilting,
  .cozy-card.is-tilting,
  .featured-card.is-tilting,
  .stat-card.is-tilting,
  .top-stat.is-tilting {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body { animation: none !important; }
  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .prime-pond-ambient,
  .prime-ripple {
    display: none !important;
  }
  .brand::before,
  .prime-logo {
    animation: none !important;
  }
  .site-header,
  .cozy-nav {
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   PrimeMC Surface Theme v4 — stable light/dark, no white-page flash
   Light mode brightens the UI surfaces only; the frog pond stays dark.
   ===================================================================== */

:root[data-theme="light"] {
  /* Keep the page itself dark so light mode never becomes a white canvas. */
  --bg-deep: #06110b;
  --bg-forest: #07130d;
  --bg-swamp: #0b1c12;
  --bg-moss: #102719;
  --text-main: #f4fff5;
  --text-muted: #c9dbcc;
  --text-dim: #94aa99;
  --glass-bg: rgba(224, 238, 218, .88);
  --glass-bg-strong: rgba(231, 242, 226, .94);
  --glass-border: rgba(225, 255, 211, .34);
  --glass-border-strong: rgba(225, 255, 211, .52);
  --line: rgba(37, 78, 49, .14);
  --surface-text: #17351f;
  --surface-muted: #4e6855;
  --surface-soft: #e0eddc;
  --surface-strong: #edf5e9;
  --surface-line: rgba(34, 78, 44, .13);
  --surface-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

:root[data-theme="dark"] {
  --surface-text: #f4fff5;
  --surface-muted: #a9c7b0;
  --surface-soft: rgba(13, 34, 22, .72);
  --surface-strong: rgba(10, 29, 18, .90);
  --surface-line: rgba(166, 244, 138, .14);
  --surface-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}

html {
  background: #06110b !important;
  view-transition-name: none !important;
}

body {
  isolation: isolate;
  background: #06110b !important;
  background-image: none !important;
  background-attachment: scroll !important;
  animation: none !important;
  transition: none !important;
}

/* A single fixed backdrop is much smoother than background-attachment: fixed. */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background:
    linear-gradient(180deg, rgba(4, 15, 9, .64), rgba(4, 15, 9, .76)),
    url('frog-pond-bg.jpg') center center / cover no-repeat !important;
  transform: translateZ(0);
}

body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(209, 255, 164, .08), transparent 28rem),
    radial-gradient(circle at 78% 82%, rgba(88, 213, 195, .08), transparent 30rem),
    linear-gradient(180deg, rgba(2, 11, 7, .06), rgba(2, 11, 7, .22)) !important;
}

:root[data-theme="light"] body::before {
  /* Same pond, only a little more visible — never a bright/white page. */
  background:
    linear-gradient(180deg, rgba(6, 20, 12, .49), rgba(6, 20, 12, .61)),
    url('frog-pond-bg.jpg') center center / cover no-repeat !important;
}

/* Avoid expensive blur on dozens of cards. Keep it only on navigation. */
.cozy-card,
.glass-panel,
.profile-card,
.admin-card,
.settings-card,
.panel,
.item-card,
.featured-card,
.top-stat,
.stat-card,
.stat-box,
.package-card,
.charge-card,
.form-card,
.table-card,
.order-card,
.helper-item,
.quick-link,
.balance-section,
.hero-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-header,
.cozy-nav {
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
  backdrop-filter: blur(12px) saturate(118%) !important;
}

/* Light mode = light sage surfaces, not a light page. */
:root[data-theme="light"] :is(
  .site-header,
  .cozy-nav,
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .categories-section,
  .featured-section
) {
  color: var(--surface-text) !important;
  background: linear-gradient(145deg, rgba(232, 243, 227, .92), rgba(211, 229, 205, .87)) !important;
  border-color: rgba(231, 255, 219, .48) !important;
  box-shadow: var(--surface-shadow), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

:root[data-theme="light"] :is(.site-header, .cozy-nav) {
  background: rgba(225, 239, 219, .92) !important;
  border-color: rgba(245,255,240,.56) !important;
}

:root[data-theme="light"] :is(
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .categories-section,
  .featured-section
) :is(h1,h2,h3,h4,h5,strong,label,th,.item-name,.featured-title,.side-title,.stat-label,.profile-title) {
  color: #17351f !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .categories-section,
  .featured-section
) :is(p,small,.tiny,.item-description,.item-desc,.item-note,.info-line,.order-meta,.stat-label,.meta-tag) {
  color: #506b57 !important;
}

:root[data-theme="light"] :is(.stat-value,.item-price,.featured-price,.top-stat .value,.hero-points) {
  color: #315f37 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(.site-header,.cozy-nav) :is(a,.nav-link,.prime-logo) {
  color: #24492c !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .prime-logo {
  background: linear-gradient(105deg, #1c4929, #4f9b4d, #759e36) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

:root[data-theme="light"] :is(input,textarea,select) {
  background: rgba(255,255,255,.62) !important;
  color: #17351f !important;
  border-color: rgba(41, 87, 51, .17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52) !important;
}

:root[data-theme="light"] :is(input,textarea)::placeholder {
  color: #738578 !important;
}

:root[data-theme="light"] :is(table,thead,tbody,tr,td,th) {
  color: #274a30 !important;
  border-color: rgba(41,87,51,.12) !important;
}

/* Contrast islands inside light surfaces. */
:root[data-theme="light"] :is(.status-box,.ip-container,.rcon-box,.gift-code-box) {
  background: rgba(16, 51, 28, .90) !important;
  color: #efffeb !important;
  border-color: rgba(178, 238, 147, .18) !important;
}
:root[data-theme="light"] :is(.status-box,.ip-container,.rcon-box,.gift-code-box) :is(strong,span,small,.ip-text) {
  color: #efffeb !important;
}

:root[data-theme="light"] .btn-outline,
:root[data-theme="light"] .theme-toggle-btn {
  background: rgba(243, 249, 240, .72) !important;
  color: #204329 !important;
  border-color: rgba(41, 87, 51, .20) !important;
  box-shadow: 0 7px 18px rgba(32,67,41,.10) !important;
}

/* Themed hero/banner areas stay image-rich and dark for readability. */
:root[data-theme="light"] :is(.admin-banner,.shop-hero,.profile-hero,.admin-hero,.shop-banner,.charge-header-title,.setup-header) {
  color: #f5fff2 !important;
}
:root[data-theme="light"] :is(.admin-banner,.shop-hero,.profile-hero,.admin-hero,.shop-banner,.charge-header-title,.setup-header) :is(h1,h2,h3,p,strong,small) {
  color: inherit !important;
}

/* =====================================================================
   Motion v4 — short, compositor-friendly, no blur/whole-page fading.
   ===================================================================== */
body,
.site-header,
.cozy-nav,
.glass-panel,
.cozy-card,
.profile-card,
.admin-card,
.settings-card,
.panel,
.item-card,
.stat-card,
.stat-box,
.top-stat,
.featured-card,
input,
textarea,
select,
button,
a {
  filter: none;
}

/* Neutralize the old broad transition set. */
body { transition: none !important; }

.site-header,
.cozy-nav {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

:is(
  .glass-panel,
  .cozy-card,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .stat-card,
  .stat-box,
  .top-stat,
  .featured-card,
  .package-card,
  .charge-card,
  .form-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel
) {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

:is(input,textarea,select) {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

:is(.btn,.btn-cozy,.btn-mini,.theme-toggle-btn,.cat-btn,.category-btn,.btn-copy) {
  transition: transform .14s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}

html.theme-changing-v4 :is(
  .site-header,
  .cozy-nav,
  .glass-panel,
  .cozy-card,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .stat-card,
  .stat-box,
  .top-stat,
  .featured-card,
  .package-card,
  .charge-card,
  .form-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  input,
  textarea,
  select,
  .theme-toggle-btn
) {
  transition-duration: .19s !important;
}

/* Old reveal/tilt classes are neutralized so stale cache cannot cause blur/jank. */
.motion-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.item-card.is-tilting,
.cozy-card.is-tilting,
.featured-card.is-tilting,
.stat-card.is-tilting,
.top-stat.is-tilting {
  transform: none !important;
}

.item-card::after,
.cozy-card::after,
.featured-card::after,
.stat-card::after,
.top-stat::after {
  display: none !important;
}

.motion-reveal-v4 {
  opacity: 0;
  transform: translate3d(0, 9px, 0);
  transition:
    opacity .34s ease-out var(--motion-delay, 0ms),
    transform .38s cubic-bezier(.2,.72,.25,1) var(--motion-delay, 0ms) !important;
  will-change: opacity, transform;
}

.motion-reveal-v4.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
  will-change: auto;
}

.site-header.is-hidden-scroll,
.cozy-nav.is-hidden-scroll {
  transform: none !important;
  opacity: 1 !important;
}

.site-header.is-scrolled,
.cozy-nav.is-scrolled {
  box-shadow: 0 15px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
  backdrop-filter: blur(12px) saturate(118%) !important;
}

/* Ambient is deliberately subtle. */
.prime-pond-ambient {
  opacity: .38 !important;
  contain: strict;
}

.pond-mote {
  box-shadow: 0 0 7px rgba(198,255,141,.34) !important;
}

.brand::before {
  animation-duration: 6.8s !important;
}

.prime-logo {
  animation-duration: 11s !important;
}

@media (max-width: 760px) {
  .prime-pond-ambient { opacity: .24 !important; }
  .motion-reveal-v4 { transform: translate3d(0,6px,0); }
  .site-header,
  .cozy-nav {
    -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
    backdrop-filter: blur(8px) saturate(112%) !important;
  }
}

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

/* v4 surface coverage for legacy/admin pages */
:root[data-theme="light"] :is(
  .shop-sidebar,
  .shop-main-card,
  .fancy-card,
  .box,
  .stat,
  .preview-box,
  .banner-note,
  .card,
  .auth-card
) {
  color: #17351f !important;
  background: linear-gradient(145deg, rgba(232,243,227,.92), rgba(211,229,205,.87)) !important;
  border-color: rgba(231,255,219,.48) !important;
  box-shadow: var(--surface-shadow), inset 0 1px 0 rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root[data-theme="light"] :is(.shop-sidebar,.shop-main-card,.fancy-card,.box,.stat,.preview-box,.banner-note,.card,.auth-card)
:is(h1,h2,h3,h4,strong,label,th,.side-title,.item-name) {
  color: #17351f !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(.shop-sidebar,.shop-main-card,.fancy-card,.box,.stat,.preview-box,.banner-note,.card,.auth-card)
:is(p,small,span,.tiny,.help-text) {
  color: #506b57 !important;
}

/* Dark code/QR previews remain high contrast even inside light panels. */
:root[data-theme="light"] :is(.qr-url,.preview-qr,.code-block,.code) {
  border-color: rgba(34,78,44,.16) !important;
}

/* Text also eases with the surface, but only while changing theme. */
html.theme-changing-v4 :is(
  .site-header,.cozy-nav,.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,
  .panel,.item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,.charge-card,
  .form-card,.table-card,.order-card,.helper-item,.quick-link,.balance-section,.hero-panel,
  .shop-sidebar,.shop-main-card,.box,.stat,.preview-box,.banner-note
) :is(h1,h2,h3,h4,p,span,strong,small,label,td,th,.tiny,.item-name,.item-desc,.item-description) {
  transition: color .16s ease !important;
}

/* =====================================================================
   PrimeMC Refined Pond v5 — balanced luxury, compact page height
   ===================================================================== */

/* Keep the page height tied to real content. A short page pushes its footer
   to the bottom of the viewport instead of leaving a long empty tail. */
html {
  min-height: 100%;
  overflow-x: clip;
}
body {
  min-height: 100dvh !important;
  display: flex;
  flex-direction: column;
  overflow-x: clip !important;
  overflow-y: auto;
}
body > main {
  flex: 1 0 auto;
}
.site-footer {
  flex: 0 0 auto;
  margin-top: 42px !important;
  margin-bottom: 14px !important;
}

/* The old homepage particles were duplicated by Motion v4. Kill them at the
   CSS level as well so stale browser cache cannot bring the heavy layer back. */
#falling-leaves-container,
.falling-leaf,
.sun-mote,
.forest-ambient {
  display: none !important;
}

/* One subtle green frame gives the whole viewport a finished edge without
   creating layout size/overflow. */
body::after {
  box-shadow:
    inset 0 0 0 1px rgba(126, 205, 103, .20),
    inset 0 0 60px rgba(20, 79, 45, .08) !important;
}

/* Balanced dark surfaces: less black, more moss/teal depth. */
:root[data-theme="dark"] {
  --surface-soft: rgba(12, 36, 24, .84);
  --surface-strong: rgba(8, 29, 19, .92);
  --surface-line: rgba(141, 222, 116, .20);
  --surface-shadow: 0 18px 42px rgba(0,0,0,.25);
}

/* Light mode is now "sage glass", not milky white. The background image is
   unchanged; only UI surfaces become lighter. */
:root[data-theme="light"] {
  --glass-bg: rgba(198, 219, 190, .83);
  --glass-bg-strong: rgba(211, 229, 204, .90);
  --glass-border: rgba(109, 170, 91, .32);
  --glass-border-strong: rgba(100, 164, 81, .46);
  --surface-text: #153820;
  --surface-muted: #486651;
  --surface-soft: rgba(198, 219, 190, .84);
  --surface-strong: rgba(213, 230, 206, .91);
  --surface-line: rgba(74, 128, 66, .18);
  --surface-shadow: 0 16px 34px rgba(2, 22, 11, .20);
}

/* One consistent premium surface language. */
:is(
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .shop-sidebar,
  .shop-main-card,
  .fancy-card,
  .box,
  .stat,
  .preview-box,
  .banner-note,
  .auth-card
) {
  border: 1px solid rgba(136, 218, 111, .20) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(229,255,218,.055),
    inset 3px 0 0 rgba(111, 196, 91, .10) !important;
}

:root[data-theme="dark"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,
  .item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,
  .charge-card,.form-card,.table-card,.order-card,.helper-item,.quick-link,
  .balance-section,.hero-panel,.shop-sidebar,.shop-main-card,.fancy-card,
  .box,.stat,.preview-box,.banner-note,.auth-card
) {
  background:
    linear-gradient(145deg, rgba(20, 55, 36, .88), rgba(8, 31, 21, .90)) !important;
  border-color: rgba(136, 218, 111, .20) !important;
}

:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,
  .item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,
  .charge-card,.form-card,.table-card,.order-card,.helper-item,.quick-link,
  .balance-section,.hero-panel,.categories-section,.featured-section,
  .shop-sidebar,.shop-main-card,.fancy-card,.box,.stat,.preview-box,
  .banner-note,.card,.auth-card
) {
  background:
    linear-gradient(145deg, rgba(207, 226, 199, .88), rgba(180, 207, 173, .82)) !important;
  border-color: rgba(116, 180, 95, .38) !important;
  box-shadow:
    0 16px 34px rgba(2, 25, 12, .19),
    inset 0 1px 0 rgba(242,255,236,.42),
    inset 3px 0 0 rgba(79, 146, 68, .14) !important;
}

/* Header: wider breathing room and a fine green accent instead of a thick neon frame. */
.site-header,
.cozy-nav {
  width: min(1280px, calc(100% - 32px)) !important;
  border-color: rgba(123, 206, 99, .27) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(223,255,210,.08),
    0 0 0 1px rgba(67, 139, 64, .035) !important;
}

:root[data-theme="light"] :is(.site-header,.cozy-nav) {
  background: rgba(190, 214, 183, .91) !important;
  border-color: rgba(84, 150, 70, .38) !important;
}

/* Homepage hierarchy: slightly smaller/cleaner cards with better contrast. */
.chill-bento-grid {
  gap: 16px !important;
}
.cozy-card {
  min-height: 218px !important;
  padding: 24px !important;
  border-radius: 24px !important;
}
.server-card {
  min-height: 150px !important;
  padding: 22px 28px !important;
}
.ranking-card {
  min-height: 160px !important;
}
.cozy-card h3 {
  letter-spacing: -.015em;
}
:root[data-theme="light"] .cozy-card p {
  color: #496852 !important;
}

/* Footer should feel intentional and compact, not like another giant content card. */
.site-footer {
  width: min(1180px, calc(100% - 32px)) !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  border-color: rgba(123, 206, 99, .18) !important;
  background: rgba(5, 24, 15, .88) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Admin dashboard v5: turn the tool list into a calm bento control center. */
.admin-wrap {
  max-width: 1240px !important;
  margin: 102px auto 0 !important;
  padding: 0 18px 52px !important;
}
.admin-hero {
  padding: 30px 32px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(123, 206, 99, .24) !important;
  background:
    linear-gradient(110deg, rgba(7, 35, 22, .92), rgba(17, 62, 39, .75)),
    url('frog-pond-bg.jpg') center 44% / cover no-repeat !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.25) !important;
}
.admin-hero h1 {
  font-size: clamp(2rem, 4vw, 2.7rem) !important;
  letter-spacing: -.035em;
}
.stats-grid {
  gap: 12px !important;
  margin: 18px 0 !important;
}
.stat-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left !important;
  padding: 17px 18px !important;
  border-radius: 19px !important;
}
.stat-value {
  font-size: 1.55rem !important;
  margin-bottom: 5px !important;
}
.admin-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr) !important;
  gap: 16px !important;
}
.admin-card {
  padding: 20px !important;
  border-radius: 22px !important;
}
.quick-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}
.quick-link {
  min-height: 92px;
  align-items: flex-start !important;
  padding: 14px !important;
  border-radius: 16px !important;
}
.quick-link > strong {
  opacity: .62;
  margin-top: 2px;
}
.quick-link small {
  line-height: 1.45;
}

/* Admin shop: cleaner two-column editor/list rhythm. */
.admin-shell {
  max-width: 1320px !important;
  padding-bottom: 52px !important;
}
.admin-banner {
  border: 1px solid rgba(123, 206, 99, .26) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.25) !important;
}
.admin-grid > .panel,
.admin-grid > div > .panel {
  border-radius: 22px !important;
}
.table-wrap {
  border-radius: 15px;
}
table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 35, 22, .94);
}
:root[data-theme="light"] table thead th {
  background: rgba(179, 205, 171, .97) !important;
  color: #173820 !important;
}

/* Keep hover restrained and elegant. */
:is(.cozy-card,.admin-card,.panel,.item-card,.quick-link,.stat-card):hover {
  border-color: rgba(142, 225, 115, .34) !important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(230,255,219,.08),
    inset 3px 0 0 rgba(118, 206, 94, .16) !important;
}

/* Reduce ambient visual noise further. */
.prime-pond-ambient {
  opacity: .18 !important;
}
.pond-mote {
  opacity: .55 !important;
}

@media (max-width: 1050px) {
  .admin-grid {
    grid-template-columns: 1fr !important;
  }
  .quick-links {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  body { min-height: 100svh !important; }
  .site-header,
  .cozy-nav,
  .site-footer {
    width: calc(100% - 16px) !important;
  }
  .cozy-card {
    min-height: auto !important;
    padding: 19px !important;
  }
  .server-card,
  .ranking-card {
    min-height: auto !important;
  }
  .admin-wrap {
    margin-top: 90px !important;
    padding-inline: 10px !important;
  }
  .admin-hero {
    padding: 24px 20px !important;
  }
  .quick-links {
    grid-template-columns: 1fr;
  }
  .quick-link {
    min-height: auto;
  }
}

/* =====================================================================
   PrimeMC Luxury White Glass v6
   Frosted-white surfaces over the permanent frog-pond backdrop.
   ===================================================================== */

/* Never let the document itself become a bright canvas. */
html,
body {
  background-color: #06110b !important;
}

body {
  min-height: 100svh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body > main {
  flex: 1 0 auto !important;
  min-height: 0 !important;
}

.site-footer {
  flex: 0 0 auto !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}

/* Decorative layers are always fixed and never contribute to scroll height. */
.prime-pond-ambient,
#falling-leaves-container,
.forest-ambient {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  contain: strict !important;
}

/* Fine emerald frame, drawn inside the viewport so it cannot create overflow. */
body::after {
  inset: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(106, 211, 112, .16),
    inset 0 0 46px rgba(23, 107, 62, .055) !important;
}

:root[data-theme="light"] {
  /* Light mode changes surfaces only. The pond stays dark and cinematic. */
  --glass-bg: rgba(250, 255, 251, .61);
  --glass-bg-strong: rgba(253, 255, 253, .71);
  --glass-border: rgba(231, 255, 234, .62);
  --glass-border-strong: rgba(191, 244, 197, .76);
  --surface-text: #153620;
  --surface-muted: #51675a;
  --surface-soft: rgba(250, 255, 251, .61);
  --surface-strong: rgba(253, 255, 253, .71);
  --surface-line: rgba(79, 151, 86, .16);
  --surface-shadow: 0 18px 44px rgba(0, 22, 10, .22);
}

:root[data-theme="dark"] {
  --glass-bg: rgba(10, 28, 19, .66);
  --glass-bg-strong: rgba(8, 24, 16, .78);
  --glass-border: rgba(181, 245, 187, .18);
  --glass-border-strong: rgba(181, 245, 187, .29);
  --surface-text: #f4fff5;
  --surface-muted: #afc7b5;
  --surface-line: rgba(154, 224, 158, .15);
  --surface-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

/* Permanent darker pond. Light mode reveals a little more image but never turns white. */
body::before {
  background:
    linear-gradient(180deg, rgba(3, 14, 8, .58), rgba(3, 14, 8, .70)),
    url('frog-pond-bg.jpg') center center / cover no-repeat !important;
}

:root[data-theme="light"] body::before {
  background:
    linear-gradient(180deg, rgba(3, 15, 8, .40), rgba(3, 15, 8, .53)),
    url('frog-pond-bg.jpg') center center / cover no-repeat !important;
}

/* All important surfaces use one luxury glass language. */
:is(
  .site-header,
  .cozy-nav,
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .categories-section,
  .featured-section,
  .shop-sidebar,
  .shop-main-card,
  .fancy-card,
  .box,
  .stat,
  .preview-box,
  .banner-note,
  .auth-card
) {
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--surface-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 0 1px rgba(72, 170, 82, .045) !important;
}

:root[data-theme="light"] :is(
  .site-header,
  .cozy-nav,
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .categories-section,
  .featured-section,
  .shop-sidebar,
  .shop-main-card,
  .fancy-card,
  .box,
  .stat,
  .preview-box,
  .banner-note,
  .card,
  .auth-card
) {
  color: var(--surface-text) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(238, 249, 240, .48)) !important;
  border-color: rgba(226, 255, 230, .70) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
  box-shadow:
    0 18px 44px rgba(0, 24, 10, .21),
    inset 0 1px 0 rgba(255, 255, 255, .78),
    0 0 0 1px rgba(79, 164, 84, .10) !important;
}

:root[data-theme="dark"] :is(
  .site-header,
  .cozy-nav,
  .cozy-card,
  .glass-panel,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .item-card,
  .featured-card,
  .top-stat,
  .stat-card,
  .stat-box,
  .package-card,
  .charge-card,
  .form-card,
  .table-card,
  .order-card,
  .helper-item,
  .quick-link,
  .balance-section,
  .hero-panel,
  .categories-section,
  .featured-section,
  .shop-sidebar,
  .shop-main-card,
  .fancy-card,
  .box,
  .stat,
  .preview-box,
  .banner-note,
  .auth-card
) {
  background:
    linear-gradient(145deg, rgba(13, 38, 25, .70), rgba(7, 25, 17, .74)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(108%) !important;
  backdrop-filter: blur(10px) saturate(108%) !important;
}

/* Nested cards should not multiply blur cost. */
:is(.admin-card,.panel,.shop-main-card,.profile-card,.glass-panel) :is(
  .quick-link,.helper-item,.order-card,.top-stat,.stat-card,.stat-box,.featured-card
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Premium light-mode typography. */
:root[data-theme="light"] :is(
  .site-header,.cozy-nav,.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,
  .panel,.item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,.charge-card,
  .form-card,.table-card,.order-card,.helper-item,.quick-link,.balance-section,.hero-panel,
  .categories-section,.featured-section,.shop-sidebar,.shop-main-card,.fancy-card,.box,.stat,
  .preview-box,.banner-note,.card,.auth-card
) :is(h1,h2,h3,h4,h5,strong,label,th,.item-name,.featured-title,.side-title,.stat-label,.profile-title) {
  color: #163a22 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.item-card,
  .featured-card,.top-stat,.stat-card,.stat-box,.package-card,.charge-card,.form-card,
  .table-card,.order-card,.helper-item,.quick-link,.balance-section,.hero-panel,
  .categories-section,.featured-section,.shop-sidebar,.shop-main-card,.fancy-card,.box,
  .stat,.preview-box,.banner-note,.card,.auth-card
) :is(p,small,span,.tiny,.help-text,.item-description,.item-desc,.item-note,.info-line,.order-meta,.meta-tag) {
  color: #51675a !important;
}

:root[data-theme="light"] :is(.stat-value,.item-price,.featured-price,.top-stat .value,.hero-points) {
  color: #2d6f39 !important;
}

/* Inputs become translucent white capsules rather than solid white boxes. */
:root[data-theme="light"] :is(input,textarea,select) {
  background: rgba(255, 255, 255, .56) !important;
  color: #163820 !important;
  border-color: rgba(75, 145, 82, .20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 6px 18px rgba(16, 59, 28, .06) !important;
}

:root[data-theme="light"] :is(input,textarea)::placeholder {
  color: #72877a !important;
}

/* Header = clean floating white-glass strip in light mode. */
.site-header,
.cozy-nav {
  width: min(1280px, calc(100% - 28px)) !important;
  border-radius: 20px !important;
  padding: 9px 12px !important;
}

:root[data-theme="light"] :is(.site-header,.cozy-nav) {
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(237,249,239,.54)) !important;
  border-color: rgba(222,255,226,.75) !important;
  box-shadow:
    0 15px 36px rgba(0, 28, 11, .21),
    inset 0 1px 0 rgba(255,255,255,.82),
    0 0 0 1px rgba(73, 155, 80, .09) !important;
}

:root[data-theme="light"] :is(.site-header,.cozy-nav) :is(a,.nav-link) {
  color: #244a2d !important;
}

:root[data-theme="light"] .theme-toggle-btn,
:root[data-theme="light"] .btn-outline {
  background: rgba(255,255,255,.56) !important;
  border-color: rgba(73,145,80,.19) !important;
  color: #1d4928 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 7px 18px rgba(25,74,36,.08) !important;
}

/* Buttons: less neon, more premium emerald. */
:is(.btn,.btn-cozy,.btn-copy):not(.btn-outline) {
  background: linear-gradient(135deg, #9be77c, #63c96b) !important;
  border-color: rgba(205,255,190,.48) !important;
  color: #12351d !important;
  box-shadow:
    0 9px 22px rgba(44, 143, 67, .18),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

:is(.btn,.btn-cozy,.btn-copy):not(.btn-outline):hover {
  background: linear-gradient(135deg, #a9ec8c, #6fd276) !important;
  box-shadow:
    0 12px 26px rgba(44,143,67,.23),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

/* Homepage: compact, aligned, luxury spacing. */
body:has(.hero-section) main.container {
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
  padding: 126px 0 24px !important;
}

.chill-bento-grid {
  gap: 16px !important;
}

.cozy-card {
  border-radius: 24px !important;
  padding: 24px !important;
}

.server-card {
  min-height: 142px !important;
  padding: 22px 28px !important;
}

.ranking-card {
  min-height: 150px !important;
}

/* Admin v6: clearer hierarchy and denser professional dashboard. */
.admin-wrap {
  max-width: 1280px !important;
  margin: 102px auto 0 !important;
  padding: 0 16px 34px !important;
}

.admin-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 24px !important;
  align-items: end !important;
  padding: 28px 30px !important;
  border-radius: 26px !important;
  overflow: hidden;
}

:root[data-theme="light"] .admin-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(234,247,237,.48)),
    url('frog-pond-bg.jpg') center 43% / cover no-repeat !important;
  border-color: rgba(222,255,226,.74) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
}

:root[data-theme="light"] .admin-hero :is(h1,p,.admin-eyebrow) {
  color: #163a22 !important;
  text-shadow: none !important;
}

.admin-hero-copy {
  min-width: 0;
}

.admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  margin-bottom: 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--frog-bright);
  background: rgba(118, 223, 103, .10);
  border: 1px solid rgba(118,223,103,.15);
}

.admin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}

.stat-card {
  min-height: 104px !important;
  padding: 16px 17px !important;
  border-radius: 18px !important;
}

.admin-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr) !important;
  gap: 16px !important;
}

.admin-card {
  padding: 19px !important;
  border-radius: 22px !important;
}

.admin-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.quick-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.quick-link {
  min-height: 86px !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  align-items: flex-start !important;
}

.quick-link small {
  line-height: 1.42 !important;
}

/* Elegant green edge on hover, not a neon glow. */
:is(.cozy-card,.admin-card,.panel,.item-card,.quick-link,.stat-card,.profile-card,.glass-panel):hover {
  border-color: rgba(125, 215, 126, .46) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(72,170,82,.08) !important;
}

/* Compact footer: it ends the document instead of looking like another page. */
.site-footer {
  width: min(1180px, calc(100% - 28px)) !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
}

:root[data-theme="light"] .site-footer {
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(236,248,238,.46)) !important;
  border-color: rgba(221,255,225,.66) !important;
  -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
  backdrop-filter: blur(10px) saturate(110%) !important;
  box-shadow: 0 14px 32px rgba(0,24,10,.18), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

:root[data-theme="light"] .site-footer :is(p,strong,.footer-contact,.text-warm) {
  color: #24472d !important;
}

/* Table headers in light mode use translucent white instead of sage blocks. */
:root[data-theme="light"] table thead th {
  background: rgba(250,255,251,.82) !important;
  color: #173820 !important;
  border-bottom-color: rgba(75,145,82,.18) !important;
}

/* Theme changes only animate surfaces; backdrop image and body never flash. */
html.theme-changing-v4 :is(
  .site-header,.cozy-nav,.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,
  .panel,.item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,.charge-card,
  .form-card,.table-card,.order-card,.helper-item,.quick-link,.balance-section,.hero-panel,
  .shop-sidebar,.shop-main-card,.site-footer,input,textarea,select,.theme-toggle-btn
) {
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease !important;
}

@media (max-width: 1050px) {
  .admin-hero {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .admin-hero-actions {
    justify-content: flex-start;
  }
  .admin-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root[data-theme="light"] :is(
    .site-header,.cozy-nav,.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,
    .panel,.item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,.charge-card,
    .form-card,.table-card,.order-card,.helper-item,.quick-link,.balance-section,.hero-panel,
    .shop-sidebar,.shop-main-card,.site-footer
  ) {
    -webkit-backdrop-filter: blur(7px) saturate(106%) !important;
    backdrop-filter: blur(7px) saturate(106%) !important;
  }

  body:has(.hero-section) main.container {
    width: calc(100% - 18px) !important;
    padding-top: 98px !important;
  }

  .admin-wrap {
    margin-top: 88px !important;
    padding-inline: 9px !important;
  }

  .admin-hero {
    padding: 21px 18px !important;
  }

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

  .site-footer {
    margin-top: 18px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 520px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .stat-card {
    min-height: 92px !important;
    padding: 13px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="light"] :is(
    .site-header,.cozy-nav,.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,
    .panel,.item-card,.featured-card,.top-stat,.stat-card,.stat-box,.package-card,.charge-card,
    .form-card,.table-card,.order-card,.helper-item,.quick-link,.balance-section,.hero-panel,
    .shop-sidebar,.shop-main-card,.site-footer
  ) {
    background: rgba(248,253,249,.94) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =====================================================================
   V7 Readability + premium white glass balance
   ===================================================================== */
:root {
  --surface-white: rgba(255,255,255,.76);
  --surface-white-strong: rgba(255,255,255,.86);
  --surface-white-soft: rgba(255,255,255,.68);
  --surface-text-dark: #183427;
  --surface-text-main: #214735;
  --surface-text-muted: #4e6859;
  --surface-text-soft: #6f8678;
  --accent-line: rgba(103, 186, 117, .28);
}

:root[data-theme="light"] {
  --surface-white: rgba(255,255,255,.78);
  --surface-white-strong: rgba(255,255,255,.88);
  --surface-white-soft: rgba(255,255,255,.72);
  --surface-text-dark: #193628;
  --surface-text-main: #234434;
  --surface-text-muted: #536b5d;
  --surface-text-soft: #738679;
  --accent-line: rgba(95, 168, 108, .30);
}

/* smoother and more predictable body/background */
body {
  background:
    linear-gradient(180deg, rgba(7,14,10,.78), rgba(7,14,10,.82)),
    url('frog-pond-bg.jpg') center top / cover fixed no-repeat !important;
}

body::before {
  opacity: .18;
}

/* premium page shell fade */
body {
  opacity: 1;
  transition: opacity .18s ease, filter .18s ease;
}
body.page-entering {
  opacity: .02;
  filter: saturate(.96) blur(.2px);
}
body.page-leaving {
  opacity: .01;
  filter: saturate(.98) blur(.18px);
}
.page-transition-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(180deg, rgba(11,24,17,.02), rgba(11,24,17,.16));
  transition: opacity .18s ease;
}
html.page-transitioning .page-transition-overlay {
  opacity: 1;
}

/* professional motion pacing */
.motion-reveal-v4 {
  transition: opacity .48s cubic-bezier(.2,.8,.2,1), transform .48s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease !important;
}

/* white-glass surfaces need dark readable text */
:root[data-theme="light"] :is(
  .glass-panel,
  .cozy-card,
  .profile-card,
  .admin-card,
  .settings-card,
  .panel,
  .shop-sidebar,
  .shop-main-card,
  .item-card,
  .featured-card,
  .top-stat,
  .helper-item,
  .recent-order,
  .pkg-item,
  .method-card,
  .qr-display-area,
  .pay-info-list,
  .transfer-code-box,
  .pro-status-card,
  .balance-card,
  .notice-card,
  .status-card,
  .summary-card,
  .step-card,
  .charge-card,
  .form-card,
  .box,
  table,
  tbody tr,
  .order-card,
  .stat-card,
  .stat-box,
  .quick-link,
  .hero-panel
) {
  color: var(--surface-text-main) !important;
  background: linear-gradient(180deg, var(--surface-white), rgba(255,255,255,.69)) !important;
  border-color: rgba(255,255,255,.46) !important;
  box-shadow: 0 18px 40px rgba(14, 28, 21, .14), inset 0 1px 0 rgba(255,255,255,.48) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
}

:root[data-theme="light"] :is(.site-header, .cozy-nav) {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.46) !important;
  box-shadow: 0 12px 28px rgba(10, 20, 16, .14), inset 0 1px 0 rgba(255,255,255,.56) !important;
}

:root[data-theme="light"] :is(
  h1,h2,h3,h4,h5,h6,
  .item-name,
  .pkg-name,
  .pro-status-title,
  .side-title,
  .hero-player,
  .pro-status-title,
  .item-name,
  .item-price,
  .hero-copy h1,
  .charge-header-title h1,
  .top-stat .value,
  .brand,
  .pay-info-list strong,
  .request-table th,
  .notice-box,
  .order-card strong,
  .recent-order strong,
  label,
  .form-grid label
) {
  color: var(--surface-text-dark) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(
  p,
  small,
  .pkg-vnd,
  .pkg-rate,
  .item-desc,
  .item-note,
  .helper-item,
  .helper-item strong + *,
  .hero-copy p,
  .top-stat .label,
  .hero-balance,
  .balance-card .label,
  .pro-status-message,
  .request-table,
  .request-table td,
  .recent-order small,
  .item-cat,
  .pay-info-list,
  .form-hint,
  .notice-card,
  .help-text,
  .hint,
  .meta-tag,
  .text-muted,
  .sub,
  .desc,
  .info-line
) {
  color: var(--surface-text-muted) !important;
}

:root[data-theme="light"] :is(
  input:not([type='radio']):not([type='checkbox']),
  select,
  textarea,
  .search-box input,
  .search-box select,
  .gift-code-box input
) {
  background: rgba(255,255,255,.88) !important;
  color: var(--surface-text-dark) !important;
  border-color: rgba(92,155,109,.17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: #7b9184 !important;
}
:root[data-theme="light"] select option {
  background: #f7fbf8;
  color: #183427;
}

:root[data-theme="light"] :is(
  .cat-btn,
  .pkg-item,
  .method-card,
  .top-stat,
  .item-card,
  .featured-card,
  .helper-item,
  .recent-order,
  .order-card
):hover {
  border-color: var(--accent-line) !important;
}

:root[data-theme="light"] :is(.btn-outline, .btn-secondary) {
  background: rgba(255,255,255,.78) !important;
  color: var(--surface-text-dark) !important;
  border-color: rgba(87, 151, 101, .22) !important;
}

:root[data-theme="light"] .btn,
:root[data-theme="light"] .btn-cozy,
:root[data-theme="light"] .btn-mini,
:root[data-theme="light"] .mini-btn,
:root[data-theme="light"] .copybtn,
:root[data-theme="light"] .btn-copy {
  background: linear-gradient(135deg, #8fe47b, #69cc67) !important;
  color: #12301f !important;
  border-color: rgba(102,188,118,.28) !important;
  box-shadow: 0 10px 24px rgba(89, 170, 98, .18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

:root[data-theme="light"] .prime-logo {
  background: linear-gradient(110deg, #255540 0%, #3c8a5a 55%, #74b86f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

:root[data-theme="light"] :is(.nav-links a, .nav-menu .nav-link, .main-nav a, .theme-toggle-btn) {
  color: #254437 !important;
}
:root[data-theme="light"] :is(.nav-links a:hover, .nav-menu .nav-link:hover, .main-nav a:hover) {
  background: rgba(113, 180, 117, .10) !important;
  color: #183427 !important;
}

/* fix especially hard-to-read charge/shop/admin blocks */
:root[data-theme="light"] .charge-header-title p,
:root[data-theme="light"] .balance-card div[style*='color:var(--text-muted)'],
:root[data-theme="light"] .glass-panel p[style*='color:var(--text-muted)'],
:root[data-theme="light"] .glass-panel small,
:root[data-theme="light"] .pkg-rate,
:root[data-theme="light"] .request-table,
:root[data-theme="light"] .request-table td,
:root[data-theme="light"] .request-table th,
:root[data-theme="light"] .code-text,
:root[data-theme="light"] .status,
:root[data-theme="light"] .top-stat .label,
:root[data-theme="light"] .helper-item,
:root[data-theme="light"] .item-desc,
:root[data-theme="light"] .item-note {
  filter: none !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .code-text,
:root[data-theme="light"] .pkg-points,
:root[data-theme="light"] .amount,
:root[data-theme="light"] .top-stat .value,
:root[data-theme="light"] .item-price {
  color: #2b7a47 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .status-PENDING { color: #8b6a12 !important; background: rgba(253,224,71,.20) !important; }
:root[data-theme="light"] .status-APPROVED { color: #1e7c43 !important; background: rgba(74,222,128,.16) !important; }
:root[data-theme="light"] .status-CANCELLED,
:root[data-theme="light"] .status-FAILED { color: #a43c3c !important; background: rgba(239,68,68,.14) !important; }

/* stronger contrast in shop cards / admin tables */
:root[data-theme="light"] .item-top {
  background: linear-gradient(180deg, rgba(130, 205, 133, .10), rgba(255,255,255,.12)) !important;
}
:root[data-theme="light"] .mini-badge.badge-direct { color: #26563a !important; background: rgba(118,223,103,.18) !important; }
:root[data-theme="light"] .mini-badge.badge-code { color: #26566a !important; background: rgba(95,190,255,.18) !important; }
:root[data-theme="light"] .mini-badge.badge-featured { color: #6f5717 !important; background: rgba(255,223,94,.20) !important; }
:root[data-theme="light"] .cat-btn.active {
  background: linear-gradient(135deg, rgba(173,224,158,.34), rgba(255,255,255,.70)) !important;
  color: #214735 !important;
}

/* glass accent borders */
:root[data-theme="light"] :is(.shop-sidebar, .shop-main-card, .panel, .glass-panel, .item-card, .pkg-item, .method-card, .top-stat, .featured-card, .helper-item, .qr-display-area) {
  outline: 1px solid rgba(114, 185, 125, .12);
  outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .page-transition-overlay,
  .motion-reveal-v4 {
    transition: none !important;
  }
}

/* =====================================================================
   V8 Contrast rescue + lighter glass + native page transitions
   ===================================================================== */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .16s;
  animation-timing-function: cubic-bezier(.22,.8,.2,1);
}

:root[data-theme="light"] {
  --surface-white: rgba(255,255,255,.62);
  --surface-white-strong: rgba(255,255,255,.72);
  --surface-white-soft: rgba(255,255,255,.56);
}

/* lighter and more transparent glass on bright mode */
:root[data-theme="light"] :is(
  .glass-panel,.cozy-card,.profile-card,.admin-card,.settings-card,.panel,
  .shop-sidebar,.shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,
  .recent-order,.pkg-item,.method-card,.qr-display-area,.pay-info-list,
  .transfer-code-box,.pro-status-card,.balance-card,.notice-card,.status-card,
  .summary-card,.step-card,.charge-card,.form-card,.box,.order-card,.stat-card,
  .stat-box,.quick-link,.hero-panel
) {
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.52)) !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 16px 34px rgba(12, 27, 20, .12), inset 0 1px 0 rgba(255,255,255,.54) !important;
  -webkit-backdrop-filter: blur(16px) saturate(116%) !important;
  backdrop-filter: blur(16px) saturate(116%) !important;
}

:root[data-theme="light"] :is(.site-header,.cozy-nav) {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(255,255,255,.46) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
}

/* dark image heroes must always use light text */
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.admin-banner,
.charge-header-title,
.setup-header {
  position: relative;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg, rgba(5,18,11,.56), rgba(8,22,15,.42)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(108%) !important;
  backdrop-filter: blur(14px) saturate(108%) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.hero-section::before,
.shop-hero::before,
.profile-hero::before,
.admin-hero::before,
.admin-banner::before,
.charge-header-title::before,
.setup-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}

:is(.hero-section,.shop-hero,.profile-hero,.admin-hero,.admin-banner,.charge-header-title,.setup-header) :is(
  h1,h2,h3,h4,.hero-title,.hero-sub,.hero-desc,.hero-copy h1,.hero-copy p,
  .admin-eyebrow,.badge-chill,.eyebrow,.hero-player,strong,p,small,span,label
) {
  position: relative;
  z-index: 1;
}

:root[data-theme="light"] :is(.hero-section,.shop-hero,.profile-hero,.admin-hero,.admin-banner,.charge-header-title,.setup-header) :is(
  h1,h2,h3,h4,.hero-title,.hero-copy h1,.mc-font,.text-warm,.admin-banner h1,.admin-hero h1,.charge-header-title h1
),
:is(.hero-section,.shop-hero,.profile-hero,.admin-hero,.admin-banner,.charge-header-title,.setup-header) :is(
  h1,h2,h3,h4,.hero-title,.hero-copy h1,.mc-font,.text-warm,.admin-banner h1,.admin-hero h1,.charge-header-title h1
) {
  color: rgba(244,255,245,.98) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.22) !important;
}

:root[data-theme="light"] :is(.hero-section,.shop-hero,.profile-hero,.admin-hero,.admin-banner,.charge-header-title,.setup-header) :is(
  p,.hero-sub,.hero-desc,.hero-copy p,small,.admin-eyebrow,.badge-chill,.eyebrow,.hero-balance
),
:is(.hero-section,.shop-hero,.profile-hero,.admin-hero,.admin-banner,.charge-header-title,.setup-header) :is(
  p,.hero-sub,.hero-desc,.hero-copy p,small,.admin-eyebrow,.badge-chill,.eyebrow,.hero-balance
) {
  color: rgba(226,243,228,.88) !important;
}

/* keep white-glass side panels readable */
.shop-hero .hero-panel,
.charge-grid .glass-panel,
.profile-wrap .stat-card,
.profile-wrap .profile-card,
.admin-wrap .admin-card,
.admin-wrap .stat-card,
.admin-wrap .quick-link,
.admin-wrap .rcon-box {
  position: relative;
  z-index: 2;
}

:root[data-theme="light"] .shop-hero .hero-panel,
:root[data-theme="light"] .profile-wrap .stat-card,
:root[data-theme="light"] .profile-wrap .profile-card,
:root[data-theme="light"] .admin-wrap .admin-card,
:root[data-theme="light"] .admin-wrap .stat-card,
:root[data-theme="light"] .admin-wrap .quick-link,
:root[data-theme="light"] .admin-wrap .rcon-box,
:root[data-theme="light"] .charge-grid .glass-panel {
  color: var(--surface-text-main) !important;
}

/* stronger readable text on all white glass cards */
:root[data-theme="light"] :is(
  .stat-label,.item-note,.item-desc,.item-cat,.pkg-rate,.pkg-vnd,.helper-item,.help-text,
  .info-line,.form-group label,.balance-card .label,.top-stat .label,.recent-order small,
  .order-card small,.request-table td,.request-table,.hero-panel .hero-balance
) {
  color: #50695c !important;
}

:root[data-theme="light"] :is(
  .stat-value,.item-price,.pkg-points,.amount,.top-stat .value,.code-text,
  .request-table th,.item-name,.pkg-name,.side-title,h3,h2
) {
  color: #214735 !important;
}

:root[data-theme="light"] .item-footer small,
:root[data-theme="light"] .item-footer,
:root[data-theme="light"] .gift-code-box,
:root[data-theme="light"] .pay-info-list strong,
:root[data-theme="light"] .pro-status-message,
:root[data-theme="light"] .pro-status-title,
:root[data-theme="light"] .badge-bound,
:root[data-theme="light"] .badge-warn {
  color: #3e5a4b !important;
}

:root[data-theme="light"] .badge-bound {
  background: rgba(105, 196, 120, .14) !important;
  border-color: rgba(105, 196, 120, .22) !important;
}

/* navigation readability */
:root[data-theme="light"] :is(.site-header,.cozy-nav) :is(a,.nav-link,.brand,.prime-logo,.theme-toggle-btn) {
  color: #244334 !important;
}

/* remove over-dark text inherited in homepage cards */
:root[data-theme="light"] .cozy-card :is(h3,p,.mc-font),
:root[data-theme="light"] .server-card :is(h3,span,.ip-text),
:root[data-theme="light"] .profile-wrap .stat-card :is(.stat-value,.stat-label),
:root[data-theme="light"] .profile-wrap .profile-card :is(h3,p,strong,label),
:root[data-theme="light"] .admin-wrap .stat-card :is(.stat-value,.stat-label),
:root[data-theme="light"] .admin-wrap .quick-link :is(span,strong,small),
:root[data-theme="light"] .admin-banner .panel :is(h3,p,strong,code),
:root[data-theme="light"] .hero-panel :is(.hero-points,.hero-player,p,strong,small) {
  color: inherit !important;
}

/* premium page transitions: no JS delay, just native fade */
body.page-entering,
body.page-leaving,
html.page-transitioning .page-transition-overlay {
  opacity: 1 !important;
  filter: none !important;
}
.page-transition-overlay {
  display: none !important;
}

/* reduce visual heaviness */
.falling-leaf { opacity: .22 !important; }
.prime-pond-ambient { opacity: .46 !important; }

@media (max-width: 900px) {
  :root[data-theme="light"] :is(
    .glass-panel,.cozy-card,.profile-card,.admin-card,.settings-card,.panel,
    .shop-sidebar,.shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,
    .recent-order,.pkg-item,.method-card,.qr-display-area,.pay-info-list,
    .transfer-code-box,.pro-status-card,.balance-card,.notice-card,.status-card,
    .summary-card,.step-card,.charge-card,.form-card,.box,.order-card,.stat-card,
    .stat-box,.quick-link,.hero-panel
  ) {
    -webkit-backdrop-filter: blur(12px) saturate(110%) !important;
    backdrop-filter: blur(12px) saturate(110%) !important;
  }
}

/* =====================================================================
   V9 Global contrast audit + framed hero sections
   ===================================================================== */

/* shared framed hero shell for places missing a proper box */
.page-title-hero,
.wrap > .title,
.admin-banner,
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.charge-header-title,
.setup-header {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 42px rgba(7, 20, 14, .18), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.wrap > .title,
.page-title-hero {
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 34px 30px !important;
  min-height: 170px;
  display: grid;
  align-content: end;
  background: linear-gradient(135deg, rgba(6,18,12,.62), rgba(10,24,16,.42)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  backdrop-filter: blur(14px) saturate(110%);
}

.wrap > .title::before,
.page-title-hero::before,
.hero-section::before,
.shop-hero::before,
.profile-hero::before,
.admin-hero::before,
.admin-banner::before,
.charge-header-title::before,
.setup-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(4,11,8,.10), rgba(4,11,8,.04));
}

/* dark hero content must stay bright in all themes */
.title h1,
.title p,
.page-title-hero h1,
.page-title-hero p,
.hero-section .badge-chill,
.hero-section .hero-title,
.hero-section .hero-desc,
.shop-hero .eyebrow,
.shop-hero .hero-copy h1,
.shop-hero .hero-copy p,
.profile-hero .hero-title,
.profile-hero .hero-sub,
.profile-hero .badge-bound,
.profile-hero .badge-warn,
.admin-hero .admin-eyebrow,
.admin-hero h1,
.admin-hero p,
.admin-banner h1,
.admin-banner > p,
.charge-header-title h1,
.charge-header-title p {
  position: relative;
  z-index: 2;
  color: #f5fff7 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.22) !important;
}

.hero-section .hero-desc,
.shop-hero .hero-copy p,
.profile-hero .hero-sub,
.admin-hero p,
.admin-banner > p,
.charge-header-title p,
.title p,
.page-title-hero p {
  color: rgba(233, 245, 236, .92) !important;
}

.profile-hero .badge-bound,
.profile-hero .badge-warn,
.hero-section .badge-chill,
.shop-hero .eyebrow,
.admin-hero .admin-eyebrow {
  background: rgba(83, 160, 93, .18) !important;
  border: 1px solid rgba(151, 226, 161, .18) !important;
  color: #f2fff6 !important;
}

/* framed look like screenshot #6 */
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.charge-header-title,
.setup-header,
.admin-banner,
.wrap > .title,
.page-title-hero {
  outline: 1px solid rgba(156, 229, 170, .08);
  outline-offset: -12px;
}

/* light mode white-glass cards: lighter + darker text */
:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.shop-sidebar,
  .shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,.recent-order,
  .pkg-item,.method-card,.qr-display-area,.pay-info-list,.transfer-code-box,
  .pro-status-card,.balance-card,.notice-card,.status-card,.summary-card,.step-card,
  .charge-card,.form-card,.box,.order-card,.stat-card,.stat-box,.quick-link,.hero-panel,
  .rcon-box,.preview-box,.info-box,.warn-box,.success-msg,.error-msg
) {
  background: linear-gradient(180deg, rgba(255,255,255,.57), rgba(255,255,255,.49)) !important;
  color: #234233 !important;
  border-color: rgba(255,255,255,.40) !important;
  -webkit-backdrop-filter: blur(15px) saturate(116%) !important;
  backdrop-filter: blur(15px) saturate(116%) !important;
  box-shadow: 0 16px 34px rgba(10,20,15,.12), inset 0 1px 0 rgba(255,255,255,.56) !important;
}

:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.shop-sidebar,
  .shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,.recent-order,
  .pkg-item,.method-card,.qr-display-area,.pay-info-list,.transfer-code-box,
  .pro-status-card,.balance-card,.notice-card,.status-card,.summary-card,.step-card,
  .charge-card,.form-card,.box,.order-card,.stat-card,.stat-box,.quick-link,.hero-panel,
  .rcon-box,.preview-box,.info-box,.warn-box,.success-msg,.error-msg
) :is(h1,h2,h3,h4,strong,label,.stat-value,.item-name,.item-price,.pkg-name,.pkg-points,.amount,.code-text,.top-stat .value,.stat-label,.item-cat) {
  color: #1c3d2f !important;
  text-shadow: none !important;
}

:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.shop-sidebar,
  .shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,.recent-order,
  .pkg-item,.method-card,.qr-display-area,.pay-info-list,.transfer-code-box,
  .pro-status-card,.balance-card,.notice-card,.status-card,.summary-card,.step-card,
  .charge-card,.form-card,.box,.order-card,.stat-card,.stat-box,.quick-link,.hero-panel,
  .rcon-box,.preview-box,.info-box,.warn-box,.success-msg,.error-msg
) :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.hero-balance,.info-line,.label,.hero-player,.pro-status-message) {
  color: #4e685a !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .item-footer small,
:root[data-theme="light"] .profile-card .danger-note,
:root[data-theme="light"] .table,
:root[data-theme="light"] .table td,
:root[data-theme="light"] .table th,
:root[data-theme="light"] .request-table,
:root[data-theme="light"] .request-table td,
:root[data-theme="light"] .request-table th {
  color: #446252 !important;
}

/* keep action buttons readable */
:root[data-theme="light"] :is(.btn,.btn-cozy,.btn-mini,.btn-copy,.copybtn) {
  color: #173323 !important;
}

/* page-specific rescue */
:root[data-theme="light"] .profile-wrap .profile-card h3,
:root[data-theme="light"] .profile-wrap .stat-value,
:root[data-theme="light"] .profile-wrap .stat-label,
:root[data-theme="light"] .profile-wrap .info-line,
:root[data-theme="light"] .profile-wrap label,
:root[data-theme="light"] .profile-wrap input,
:root[data-theme="light"] .profile-wrap .danger-note,
:root[data-theme="light"] .card-topup-page .hint,
:root[data-theme="light"] .wrap .hint,
:root[data-theme="light"] .admin-container .help-text,
:root[data-theme="light"] .admin-container .qr-url,
:root[data-theme="light"] .admin-card-title-row small {
  color: #4c6658 !important;
}

/* admin shop embedded panel inside hero should be white-glass, not dark */
:root[data-theme="light"] .admin-banner .panel,
:root[data-theme="light"] .shop-hero .hero-panel,
:root[data-theme="light"] .profile-wrap .stat-card,
:root[data-theme="light"] .profile-wrap .profile-card,
:root[data-theme="light"] .admin-wrap .admin-card,
:root[data-theme="light"] .admin-wrap .stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.54)) !important;
}

/* navigation and theme button in light mode */
:root[data-theme="light"] .cozy-nav,
:root[data-theme="light"] .site-header {
  background: rgba(255,255,255,.56) !important;
}
:root[data-theme="light"] :is(.cozy-nav,.site-header) :is(a,.nav-link,.brand,.prime-logo,.theme-toggle-btn) {
  color: #244434 !important;
}

/* card topup page title and admin settings top spacing */
.card-topup-page .wrap > .title,
.wrap > .title.page-title-hero {
  margin-bottom: 28px !important;
}

/* ensure title sections don't inherit hidden/low-contrast styles from local pages */
.wrap > .title h1,
.wrap > .title .mc-font,
.wrap > .title .hint,
.wrap > .title p {
  color: #f4fff5 !important;
}
.wrap > .title .hint,
.wrap > .title p {
  color: rgba(231,243,234,.92) !important;
}

/* user profile status pill in all modes */
.profile-hero .badge-bound,
.profile-hero .badge-warn {
  font-weight: 800 !important;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* slightly darker dark-hero glass to separate from frog image */
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.admin-banner,
.charge-header-title,
.wrap > .title,
.page-title-hero {
  background: linear-gradient(135deg, rgba(4,17,11,.66), rgba(8,22,15,.46)) !important;
}

/* smoother perceived nav transition without blocking navigation */
.cozy-nav,
.site-header,
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.admin-banner,
.charge-header-title,
.wrap > .title,
.page-title-hero,
.glass-panel,
.cozy-card,
.profile-card,
.admin-card,
.settings-card,
.stat-card,
.item-card,
.pkg-item,
.quick-link {
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, backdrop-filter .14s ease, transform .14s ease !important;
}

@media (max-width: 760px) {
  .wrap > .title,
  .page-title-hero,
  .hero-section,
  .shop-hero,
  .profile-hero,
  .admin-hero,
  .admin-banner,
  .charge-header-title,
  .setup-header {
    border-radius: 24px !important;
    padding: 24px 18px !important;
    outline-offset: -10px;
  }
}

/* =====================================================================
   V10 Final polish - rounded premium frames, logo upgrade, full contrast
   ===================================================================== */
:root {
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --frame-border: rgba(255,255,255,.18);
  --frame-inner: rgba(255,255,255,.065);
  --glass-light: rgba(255,255,255,.54);
  --glass-light-strong: rgba(255,255,255,.62);
  --glass-dark: rgba(4, 18, 12, .62);
  --glass-dark-strong: rgba(6, 20, 14, .72);
}

/* cleaner premium radii */
.site-header,
.cozy-nav {
  border-radius: 24px !important;
}

.cozy-card,
.glass-panel,
.profile-card,
.admin-card,
.settings-card,
.panel,
.shop-sidebar,
.shop-main-card,
.item-card,
.featured-card,
.top-stat,
.helper-item,
.recent-order,
.pkg-item,
.method-card,
.qr-display-area,
.pay-info-list,
.transfer-code-box,
.pro-status-card,
.balance-card,
.notice-card,
.status-card,
.summary-card,
.step-card,
.charge-card,
.form-card,
.box,
.order-card,
.stat-card,
.stat-box,
.quick-link,
.hero-panel,
.rcon-box,
.preview-box,
.info-box,
.warn-box,
.success-msg,
.error-msg,
.notice,
.notice-box,
.status-box,
.ip-container,
.balance-section {
  border-radius: var(--radius-lg) !important;
}

.btn,
.btn-cozy,
.btn-mini,
.btn-copy,
.copybtn,
.theme-toggle-btn,
.cat-btn,
.category-btn,
input,
select,
textarea {
  border-radius: var(--radius-md) !important;
}

.badge-chill,
.eyebrow,
.badge-bound,
.badge-warn,
.status,
.pill,
.mini-badge,
.status-PENDING,
.status-APPROVED,
.status-CANCELLED,
.status-FAILED {
  border-radius: 999px !important;
}

/* logo refresh: replace emoji with a polished frog glyph */
.brand {
  gap: 12px !important;
}
.brand::before {
  content: '' !important;
  width: 42px;
  height: 42px;
  border-radius: 15px !important;
  border: 1px solid rgba(173, 232, 181, .24) !important;
  background-color: rgba(12, 31, 21, .42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%2379e969'/%3E%3Cstop offset='1' stop-color='%2348b75f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='21' cy='22' r='10' fill='url(%23g)'/%3E%3Ccircle cx='43' cy='22' r='10' fill='url(%23g)'/%3E%3Crect x='11' y='18' width='42' height='30' rx='16' fill='url(%23g)'/%3E%3Cellipse cx='32' cy='36' rx='15' ry='12' fill='%23ffd65c'/%3E%3Ccircle cx='22' cy='21' r='4.2' fill='%23ffffff'/%3E%3Ccircle cx='42' cy='21' r='4.2' fill='%23ffffff'/%3E%3Ccircle cx='22.5' cy='21.3' r='2.2' fill='%23112d1f'/%3E%3Ccircle cx='42.5' cy='21.3' r='2.2' fill='%23112d1f'/%3E%3Cpath d='M25 39c2.2 2 4.5 3 7 3s4.8-1 7-3' fill='none' stroke='%23112d1f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76% 76%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.18) !important;
  animation: none !important;
}
.prime-logo {
  letter-spacing: -.03em !important;
  font-weight: 900 !important;
}

/* all major top sections use one consistent rounded frame */
.wrap > .title,
.page-title-hero,
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.admin-banner,
.charge-header-title,
.setup-header {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--frame-border) !important;
  outline: none !important;
  background: linear-gradient(135deg, rgba(4,17,11,.69), rgba(8,21,15,.48)) !important;
  box-shadow: 0 20px 48px rgba(5, 18, 12, .18), inset 0 1px 0 rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: blur(15px) saturate(112%);
  backdrop-filter: blur(15px) saturate(112%);
}

.wrap > .title::after,
.page-title-hero::after,
.hero-section::after,
.shop-hero::after,
.profile-hero::after,
.admin-hero::after,
.admin-banner::after,
.charge-header-title::after,
.setup-header::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius-xl) - 10px);
  border: 1px solid rgba(172, 236, 180, .09);
  pointer-events: none;
}

/* protect hero text from sinking into background */
.wrap > .title > *,
.page-title-hero > *,
.hero-section > *,
.shop-hero > *,
.profile-hero > *,
.admin-hero > *,
.admin-banner > *,
.charge-header-title > *,
.setup-header > * {
  position: relative;
  z-index: 2;
}

.wrap > .title h1,
.wrap > .title h2,
.wrap > .title .mc-font,
.page-title-hero h1,
.page-title-hero h2,
.hero-section .hero-title,
.shop-hero .hero-copy h1,
.profile-hero .hero-title,
.admin-hero h1,
.admin-banner h1,
.charge-header-title h1,
.setup-header h1,
.logo-wordmark {
  color: #f7fff8 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.20) !important;
}

.wrap > .title p,
.wrap > .title .hint,
.page-title-hero p,
.page-title-hero .hint,
.hero-section .hero-desc,
.shop-hero .hero-copy p,
.profile-hero .hero-sub,
.admin-hero p,
.admin-banner > p,
.charge-header-title p,
.setup-header p {
  color: rgba(232, 244, 235, .95) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.15) !important;
}

.logo-wordmark {
  letter-spacing: -.045em;
  line-height: .96;
}

/* homepage / hero chips */
.badge-chill,
.eyebrow,
.profile-hero .badge-bound,
.profile-hero .badge-warn,
.admin-hero .admin-eyebrow {
  background: rgba(77, 156, 90, .18) !important;
  color: #f3fff5 !important;
  border: 1px solid rgba(162, 230, 170, .17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* light mode should brighten glass only, not the background image */
:root[data-theme="light"] .cozy-nav,
:root[data-theme="light"] .site-header {
  background: rgba(255,255,255,.60) !important;
  border-color: rgba(255,255,255,.46) !important;
}

:root[data-theme="light"] .cozy-card,
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .admin-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .shop-sidebar,
:root[data-theme="light"] .shop-main-card,
:root[data-theme="light"] .item-card,
:root[data-theme="light"] .featured-card,
:root[data-theme="light"] .top-stat,
:root[data-theme="light"] .helper-item,
:root[data-theme="light"] .recent-order,
:root[data-theme="light"] .pkg-item,
:root[data-theme="light"] .method-card,
:root[data-theme="light"] .qr-display-area,
:root[data-theme="light"] .pay-info-list,
:root[data-theme="light"] .transfer-code-box,
:root[data-theme="light"] .pro-status-card,
:root[data-theme="light"] .balance-card,
:root[data-theme="light"] .notice-card,
:root[data-theme="light"] .status-card,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .charge-card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .box,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .stat-box,
:root[data-theme="light"] .quick-link,
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .rcon-box,
:root[data-theme="light"] .preview-box,
:root[data-theme="light"] .info-box,
:root[data-theme="light"] .warn-box,
:root[data-theme="light"] .success-msg,
:root[data-theme="light"] .error-msg,
:root[data-theme="light"] .notice,
:root[data-theme="light"] .notice-box,
:root[data-theme="light"] .status-box,
:root[data-theme="light"] .ip-container,
:root[data-theme="light"] .balance-section {
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.43)) !important;
  border-color: rgba(255,255,255,.40) !important;
  color: #214032 !important;
  box-shadow: 0 16px 36px rgba(9, 20, 14, .11), inset 0 1px 0 rgba(255,255,255,.58) !important;
  -webkit-backdrop-filter: blur(16px) saturate(116%) !important;
  backdrop-filter: blur(16px) saturate(116%) !important;
}

/* hero frames stay dark even in light mode */
:root[data-theme="light"] .wrap > .title,
:root[data-theme="light"] .page-title-hero,
:root[data-theme="light"] .hero-section,
:root[data-theme="light"] .shop-hero,
:root[data-theme="light"] .profile-hero,
:root[data-theme="light"] .admin-hero,
:root[data-theme="light"] .admin-banner,
:root[data-theme="light"] .charge-header-title,
:root[data-theme="light"] .setup-header {
  background: linear-gradient(135deg, rgba(4,17,11,.69), rgba(8,21,15,.48)) !important;
}

/* full contrast audit: dark glass gets light text; white glass gets dark text */
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.admin-banner,
.charge-header-title,
.setup-header,
.wrap > .title,
.page-title-hero {
  color: #f7fff8 !important;
}

:root[data-theme="light"] .cozy-card,
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .admin-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .shop-sidebar,
:root[data-theme="light"] .shop-main-card,
:root[data-theme="light"] .item-card,
:root[data-theme="light"] .featured-card,
:root[data-theme="light"] .top-stat,
:root[data-theme="light"] .helper-item,
:root[data-theme="light"] .recent-order,
:root[data-theme="light"] .pkg-item,
:root[data-theme="light"] .method-card,
:root[data-theme="light"] .qr-display-area,
:root[data-theme="light"] .pay-info-list,
:root[data-theme="light"] .transfer-code-box,
:root[data-theme="light"] .pro-status-card,
:root[data-theme="light"] .balance-card,
:root[data-theme="light"] .notice-card,
:root[data-theme="light"] .status-card,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .charge-card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .box,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .stat-box,
:root[data-theme="light"] .quick-link,
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .rcon-box,
:root[data-theme="light"] .preview-box,
:root[data-theme="light"] .info-box,
:root[data-theme="light"] .warn-box,
:root[data-theme="light"] .success-msg,
:root[data-theme="light"] .error-msg,
:root[data-theme="light"] .notice,
:root[data-theme="light"] .notice-box,
:root[data-theme="light"] .status-box,
:root[data-theme="light"] .ip-container,
:root[data-theme="light"] .balance-section,
:root[data-theme="light"] .cozy-card *,
:root[data-theme="light"] .glass-panel *,
:root[data-theme="light"] .profile-card *,
:root[data-theme="light"] .admin-card *,
:root[data-theme="light"] .settings-card *,
:root[data-theme="light"] .panel *,
:root[data-theme="light"] .shop-sidebar *,
:root[data-theme="light"] .shop-main-card *,
:root[data-theme="light"] .item-card *,
:root[data-theme="light"] .featured-card *,
:root[data-theme="light"] .top-stat *,
:root[data-theme="light"] .helper-item *,
:root[data-theme="light"] .recent-order *,
:root[data-theme="light"] .pkg-item *,
:root[data-theme="light"] .method-card *,
:root[data-theme="light"] .qr-display-area *,
:root[data-theme="light"] .pro-status-card *,
:root[data-theme="light"] .balance-card *,
:root[data-theme="light"] .order-card *,
:root[data-theme="light"] .stat-card *,
:root[data-theme="light"] .hero-panel * {
  text-shadow: none !important;
}

:root[data-theme="light"] .cozy-card :is(h1,h2,h3,h4,strong,label,.stat-value,.item-name,.item-price,.pkg-name,.pkg-points,.amount,.code-text,.top-stat .value,.mc-font,.hero-points,.hero-player),
:root[data-theme="light"] .glass-panel :is(h1,h2,h3,h4,strong,label,.stat-value,.item-name,.item-price,.pkg-name,.pkg-points,.amount,.code-text,.top-stat .value,.mc-font),
:root[data-theme="light"] .profile-card :is(h1,h2,h3,h4,strong,label,.stat-value,.item-name,.item-price,.pkg-name,.pkg-points,.amount,.code-text,.top-stat .value),
:root[data-theme="light"] .admin-card :is(h1,h2,h3,h4,strong,label,.stat-value,.item-name,.item-price,.pkg-name,.pkg-points,.amount,.code-text,.top-stat .value),
:root[data-theme="light"] .settings-card :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .panel :is(h1,h2,h3,h4,strong,label,.code),
:root[data-theme="light"] .shop-sidebar :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .shop-main-card :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .item-card :is(h1,h2,h3,h4,strong,label,.item-name,.item-price),
:root[data-theme="light"] .featured-card :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .top-stat :is(h1,h2,h3,h4,strong,label,.value),
:root[data-theme="light"] .helper-item :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .recent-order :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .pkg-item :is(h1,h2,h3,h4,strong,label,.pkg-name,.pkg-points),
:root[data-theme="light"] .method-card :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .qr-display-area :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .pro-status-card :is(h1,h2,h3,h4,strong,label,.amount),
:root[data-theme="light"] .balance-card :is(h1,h2,h3,h4,strong,label,.amount),
:root[data-theme="light"] .order-card :is(h1,h2,h3,h4,strong,label),
:root[data-theme="light"] .stat-card :is(h1,h2,h3,h4,strong,label,.stat-value),
:root[data-theme="light"] .hero-panel :is(h1,h2,h3,h4,strong,label,.hero-points,.hero-player) {
  color: #1b3d2e !important;
}

:root[data-theme="light"] .cozy-card :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.hero-balance,.info-line,.label,.sub,.desc),
:root[data-theme="light"] .glass-panel :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.hero-balance,.info-line,.label,.sub,.desc),
:root[data-theme="light"] .profile-card :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.hero-balance,.info-line,.label,.sub,.desc,.danger-note),
:root[data-theme="light"] .admin-card :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.hero-balance,.info-line,.label,.sub,.desc),
:root[data-theme="light"] .settings-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .panel :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .shop-sidebar :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .shop-main-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .item-card :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.item-cat,.label),
:root[data-theme="light"] .featured-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .top-stat :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .helper-item :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .recent-order :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .pkg-item :is(p,small,span,li,td,th,.hint,.help-text,.label,.pkg-rate,.pkg-vnd),
:root[data-theme="light"] .method-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .qr-display-area :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .pro-status-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .balance-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .order-card :is(p,small,span,li,td,th,.hint,.help-text,.label),
:root[data-theme="light"] .stat-card :is(p,small,span,li,td,th,.hint,.help-text,.label,.stat-label),
:root[data-theme="light"] .hero-panel :is(p,small,span,li,td,th,.hint,.help-text,.label,.hero-balance) {
  color: #4b6658 !important;
}

/* override inline white text in light mode */
:root[data-theme="light"] h2[style*='color:#fff'],
:root[data-theme="light"] h3[style*='color:#fff'],
:root[data-theme="light"] strong[style*='color:#fff'],
:root[data-theme="light"] a[style*='color:#fff'],
:root[data-theme="light"] div[style*='color:#fff'],
:root[data-theme="light"] p[style*='color:var(--text-muted)'],
:root[data-theme="light"] small[style*='color:var(--text-muted)'],
:root[data-theme="light"] div[style*='color:var(--text-muted)'] {
  color: inherit !important;
}

/* special rescue for profile page and balance panel */
:root[data-theme="light"] .profile-hero .hero-title,
:root[data-theme="light"] .profile-hero .hero-sub,
:root[data-theme="light"] .profile-hero .badge-bound,
:root[data-theme="light"] .profile-hero .badge-warn,
:root[data-theme="light"] .shop-hero .hero-copy h1,
:root[data-theme="light"] .shop-hero .hero-copy p,
:root[data-theme="light"] .charge-header-title h1,
:root[data-theme="light"] .charge-header-title p,
:root[data-theme="light"] .admin-banner h1,
:root[data-theme="light"] .admin-banner > p,
:root[data-theme="light"] .page-title-hero h1,
:root[data-theme="light"] .page-title-hero p,
:root[data-theme="light"] .wrap > .title h1,
:root[data-theme="light"] .wrap > .title p {
  color: #f6fff7 !important;
}

/* smoother but non-blocking transitions */
html {
  scroll-behavior: smooth;
}
.cozy-nav,
.site-header,
.wrap > .title,
.page-title-hero,
.hero-section,
.shop-hero,
.profile-hero,
.admin-hero,
.admin-banner,
.charge-header-title,
.setup-header,
.cozy-card,
.glass-panel,
.profile-card,
.admin-card,
.settings-card,
.panel,
.item-card,
.pkg-item,
.quick-link,
.stat-card,
.hero-panel,
.btn,
.btn-cozy,
.btn-mini,
.btn-copy,
.copybtn,
.theme-toggle-btn,
.cat-btn,
.category-btn {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease !important;
}
.motion-reveal-v4 {
  transition: opacity .34s cubic-bezier(.2,.8,.2,1), transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease !important;
}

/* remove extra visual clutter */
.falling-leaf { opacity: .18 !important; }
.prime-pond-ambient { opacity: .32 !important; }

@media (max-width: 760px) {
  .site-header,
  .cozy-nav { border-radius: 20px !important; }

  .wrap > .title,
  .page-title-hero,
  .hero-section,
  .shop-hero,
  .profile-hero,
  .admin-hero,
  .admin-banner,
  .charge-header-title,
  .setup-header {
    border-radius: 26px !important;
  }

  .wrap > .title::after,
  .page-title-hero::after,
  .hero-section::after,
  .shop-hero::after,
  .profile-hero::after,
  .admin-hero::after,
  .admin-banner::after,
  .charge-header-title::after,
  .setup-header::after {
    inset: 10px;
    border-radius: 18px;
  }
}

/* =====================================================================
   V11 FINAL GLASS BALANCE
   - title divs own the frog background image
   - normal divs are softer / more transparent
   - restore classic frog emoji brand
   - remove stray circular pseudo decorations
   ===================================================================== */

/* Restore the simple original brand: frog + PrimeMC */
.brand::before {
  content: '🐸' !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  background: rgba(91, 179, 103, .12) !important;
  background-image: none !important;
  border: 1px solid rgba(133, 214, 144, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 7px 18px rgba(0,0,0,.12) !important;
  font-size: 1.18rem !important;
  line-height: 1 !important;
  animation: none !important;
}

/* One title component for every major page. It has its OWN image background. */
.prime-title-panel {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  border-radius: 32px !important;
  border: 1px solid rgba(213, 255, 220, .24) !important;
  background-image:
    linear-gradient(115deg, rgba(4, 18, 12, .56), rgba(6, 24, 16, .43) 56%, rgba(4, 16, 11, .50)),
    url('frog-pond-bg.jpg') !important;
  background-position: center 44% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 20px 48px rgba(4, 18, 12, .18),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Kill old decorative pseudo-elements that created circles / blotches. */
.prime-title-panel::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Keep only a clean inset frame. */
.prime-title-panel::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 11px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(212, 255, 220, .085) !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.prime-title-panel > * {
  position: relative !important;
  z-index: 2 !important;
}

/* All title text sits on dark image glass, so it must stay bright in both modes. */
.prime-title-panel :is(h1,h2,h3,.hero-title,.mc-font,.logo-wordmark) {
  color: #f7fff8 !important;
  text-shadow: 0 2px 15px rgba(0,0,0,.22) !important;
}
.prime-title-panel :is(p,.hint,.hero-sub,.hero-desc,.hero-copy p,.admin-eyebrow,.eyebrow,.badge-chill) {
  color: rgba(235, 247, 238, .91) !important;
}
.prime-title-panel :is(.badge-chill,.eyebrow,.admin-eyebrow,.badge-bound,.badge-warn) {
  background: rgba(15, 54, 31, .46) !important;
  border: 1px solid rgba(157, 230, 168, .18) !important;
  color: #f5fff7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Consistent spacing for standalone title rows on admin / payments. */
.admin-page-title,
.wrap > .prime-title-panel,
.charge-header-title.prime-title-panel {
  padding: clamp(28px, 4vw, 42px) !important;
  margin-bottom: 26px !important;
  min-height: 160px;
  display: grid;
  align-content: center;
}

/* Hero pages retain their page-specific layout but use the same background treatment. */
.hero-section.prime-title-panel,
.profile-hero.prime-title-panel,
.admin-hero.prime-title-panel,
.admin-banner.prime-title-panel,
.shop-hero.prime-title-panel {
  background-image:
    linear-gradient(115deg, rgba(4, 18, 12, .58), rgba(7, 24, 16, .40) 58%, rgba(4, 17, 11, .50)),
    url('frog-pond-bg.jpg') !important;
}

/* =====================================================================
   Softer glass surfaces: less color, more mist / transparency
   ===================================================================== */
.cozy-card,
.glass-panel,
.profile-card,
.admin-card,
.settings-card,
.panel,
.shop-sidebar,
.shop-main-card,
.item-card,
.featured-card,
.top-stat,
.helper-item,
.recent-order,
.pkg-item,
.method-card,
.qr-display-area,
.pay-info-list,
.transfer-code-box,
.pro-status-card,
.balance-card,
.notice-card,
.status-card,
.summary-card,
.step-card,
.charge-card,
.form-card,
.box,
.order-card,
.stat-card,
.stat-box,
.quick-link,
.hero-panel,
.rcon-box,
.preview-box,
.info-box,
.warn-box,
.notice,
.notice-box,
.status-box,
.ip-container,
.balance-section {
  background: linear-gradient(145deg, rgba(10, 32, 21, .42), rgba(5, 20, 13, .34)) !important;
  border-color: rgba(205, 247, 211, .12) !important;
  box-shadow: 0 14px 32px rgba(3, 15, 9, .13), inset 0 1px 0 rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(14px) saturate(108%) !important;
  backdrop-filter: blur(14px) saturate(108%) !important;
}

/* In light mode, the glass is white and misty but NOT opaque. */
:root[data-theme="light"] .cozy-card,
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .admin-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .shop-sidebar,
:root[data-theme="light"] .shop-main-card,
:root[data-theme="light"] .item-card,
:root[data-theme="light"] .featured-card,
:root[data-theme="light"] .top-stat,
:root[data-theme="light"] .helper-item,
:root[data-theme="light"] .recent-order,
:root[data-theme="light"] .pkg-item,
:root[data-theme="light"] .method-card,
:root[data-theme="light"] .qr-display-area,
:root[data-theme="light"] .pay-info-list,
:root[data-theme="light"] .transfer-code-box,
:root[data-theme="light"] .pro-status-card,
:root[data-theme="light"] .balance-card,
:root[data-theme="light"] .notice-card,
:root[data-theme="light"] .status-card,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .charge-card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .box,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .stat-box,
:root[data-theme="light"] .quick-link,
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .rcon-box,
:root[data-theme="light"] .preview-box,
:root[data-theme="light"] .info-box,
:root[data-theme="light"] .warn-box,
:root[data-theme="light"] .notice,
:root[data-theme="light"] .notice-box,
:root[data-theme="light"] .status-box,
:root[data-theme="light"] .ip-container,
:root[data-theme="light"] .balance-section {
  background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(244,251,246,.28)) !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: 0 14px 32px rgba(14, 31, 21, .09), inset 0 1px 0 rgba(255,255,255,.52) !important;
  -webkit-backdrop-filter: blur(16px) saturate(108%) !important;
  backdrop-filter: blur(16px) saturate(108%) !important;
}

/* Lighter navigation glass as well. */
.cozy-nav,
.site-header {
  background: rgba(7, 27, 17, .38) !important;
  border-color: rgba(206, 248, 214, .13) !important;
  -webkit-backdrop-filter: blur(16px) saturate(110%) !important;
  backdrop-filter: blur(16px) saturate(110%) !important;
}
:root[data-theme="light"] .cozy-nav,
:root[data-theme="light"] .site-header {
  background: rgba(255,255,255,.46) !important;
  border-color: rgba(255,255,255,.46) !important;
}

/* Keep light-mode text dark on misty cards. */
:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.shop-sidebar,
  .shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,.recent-order,.pkg-item,
  .method-card,.qr-display-area,.pay-info-list,.transfer-code-box,.pro-status-card,.balance-card,
  .notice-card,.status-card,.summary-card,.step-card,.charge-card,.form-card,.box,.order-card,
  .stat-card,.stat-box,.quick-link,.hero-panel,.rcon-box,.preview-box,.info-box,.warn-box,
  .notice,.notice-box,.status-box,.ip-container,.balance-section
) :is(h1,h2,h3,h4,strong,label,.stat-value,.item-name,.item-price,.pkg-name,.pkg-points,.amount,.code-text,.top-stat .value,.hero-points,.hero-player) {
  color: #1e3e30 !important;
  text-shadow: none !important;
}
:root[data-theme="light"] :is(
  .cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.shop-sidebar,
  .shop-main-card,.item-card,.featured-card,.top-stat,.helper-item,.recent-order,.pkg-item,
  .method-card,.qr-display-area,.pay-info-list,.transfer-code-box,.pro-status-card,.balance-card,
  .notice-card,.status-card,.summary-card,.step-card,.charge-card,.form-card,.box,.order-card,
  .stat-card,.stat-box,.quick-link,.hero-panel,.rcon-box,.preview-box,.info-box,.warn-box,
  .notice,.notice-box,.status-box,.ip-container,.balance-section
) :is(p,small,span,li,td,th,.hint,.help-text,.item-desc,.item-note,.hero-balance,.info-line,.label,.sub,.desc,.stat-label,.pkg-rate,.pkg-vnd) {
  color: #4a6657 !important;
  text-shadow: none !important;
}

/* Title panels override light card rules: always dark image + light text. */
:root[data-theme="light"] .prime-title-panel,
:root[data-theme="dark"] .prime-title-panel {
  background-image:
    linear-gradient(115deg, rgba(4, 18, 12, .56), rgba(6, 24, 16, .43) 56%, rgba(4, 16, 11, .50)),
    url('frog-pond-bg.jpg') !important;
  color: #f7fff8 !important;
}
:root[data-theme="light"] .prime-title-panel :is(h1,h2,h3,p,small,strong,span,.hint,.hero-title,.hero-sub,.hero-desc,.mc-font,.logo-wordmark),
:root[data-theme="dark"] .prime-title-panel :is(h1,h2,h3,p,small,strong,span,.hint,.hero-title,.hero-sub,.hero-desc,.mc-font,.logo-wordmark) {
  color: #f4fff6 !important;
}

/* Do not let inherited old circle decorations reappear anywhere in title panels. */
.prime-title-panel .decor-circle,
.prime-title-panel .glow-circle,
.prime-title-panel .orb,
.prime-title-panel .bubble-decoration {
  display: none !important;
}

@media (max-width: 760px) {
  .prime-title-panel {
    border-radius: 25px !important;
    background-position: center 40% !important;
  }
  .prime-title-panel::after {
    inset: 9px !important;
    border-radius: 18px !important;
  }
  .admin-page-title,
  .wrap > .prime-title-panel,
  .charge-header-title.prime-title-panel {
    min-height: 135px;
    padding: 24px 20px !important;
  }

  :root[data-theme="light"] .cozy-card,
  :root[data-theme="light"] .glass-panel,
  :root[data-theme="light"] .profile-card,
  :root[data-theme="light"] .admin-card,
  :root[data-theme="light"] .settings-card,
  :root[data-theme="light"] .panel,
  :root[data-theme="light"] .item-card,
  :root[data-theme="light"] .stat-card {
    -webkit-backdrop-filter: blur(11px) saturate(105%) !important;
    backdrop-filter: blur(11px) saturate(105%) !important;
  }
}

/* =====================================================================
   V10 Route motion — stable background, smooth content entry/exit
   ===================================================================== */
.prime-route-veil {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(174, 255, 191, .10), transparent 34%),
    linear-gradient(180deg, rgba(4, 16, 10, .02), rgba(4, 16, 10, .18));
  will-change: opacity;
}

html[data-route-to="tarot"] .prime-route-veil {
  background:
    radial-gradient(circle at 50% 32%, rgba(215, 176, 255, .16), transparent 29%),
    radial-gradient(circle at 52% 22%, rgba(255, 225, 157, .08), transparent 20%),
    linear-gradient(180deg, rgba(7, 9, 25, .02), rgba(7, 9, 25, .22));
}

body.prime-route-leaving > main,
body.prime-route-leaving > .container,
body.prime-route-leaving > .site-footer {
  opacity: .14;
  transform: translate3d(0, 7px, 0);
  transition: opacity .17s ease, transform .18s cubic-bezier(.2,.72,.2,1) !important;
  pointer-events: none;
}
body.prime-route-leaving .prime-route-veil {
  animation: primeRouteVeilOut .19s ease both;
}

body.prime-route-entering > main,
body.prime-route-entering > .container {
  animation: primeRouteContentIn .48s cubic-bezier(.16,.82,.18,1) both;
}
body.prime-route-entering > .site-footer {
  animation: primeRouteFooterIn .42s ease .05s both;
}
body.prime-route-entering .prime-route-veil {
  animation: primeRouteVeilIn .56s ease both;
}

html[data-route-to="tarot"] body.prime-route-entering > main,
html[data-route-to="tarot"] body.prime-route-entering > .container {
  animation: primeTarotRouteIn .56s cubic-bezier(.14,.84,.18,1) both;
}

@keyframes primeRouteVeilOut {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes primeRouteVeilIn {
  0% { opacity: .9; }
  100% { opacity: 0; }
}
@keyframes primeRouteContentIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes primeTarotRouteIn {
  0% { opacity: 0; transform: translate3d(0, 15px, 0); filter: brightness(.92) saturate(.94); }
  58% { opacity: 1; filter: brightness(1.025) saturate(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: none; }
}
@keyframes primeRouteFooterIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  body.prime-route-leaving > main,
  body.prime-route-leaving > .container,
  body.prime-route-leaving > .site-footer {
    transform: translate3d(0, 4px, 0);
  }
  body.prime-route-entering > main,
  body.prime-route-entering > .container,
  html[data-route-to="tarot"] body.prime-route-entering > main,
  html[data-route-to="tarot"] body.prime-route-entering > .container {
    animation-duration: .4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prime-route-veil { display: none !important; }
  body.prime-route-leaving > main,
  body.prime-route-leaving > .container,
  body.prime-route-leaving > .site-footer,
  body.prime-route-entering > main,
  body.prime-route-entering > .container,
  body.prime-route-entering > .site-footer {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* V11 route performance: no artificial exit hold; keep a short destination-only reveal. */
body.prime-route-entering > main,
body.prime-route-entering > .container { animation-duration: .38s !important; }
body.prime-route-entering > .site-footer { animation-duration: .32s !important; }
body.prime-route-entering .prime-route-veil { animation-duration: .42s !important; }
html[data-route-to="tarot"] body.prime-route-entering > main,
html[data-route-to="tarot"] body.prime-route-entering > .container { animation-duration: .42s !important; }
body.prime-route-leaving-fast > main,
body.prime-route-leaving-fast > .container,
body.prime-route-leaving-fast > .site-footer { pointer-events:none; }

/* V30 compact utilities menu and lightweight route loader. */
.prime-tools { position:relative; display:inline-flex; align-items:center; }
.prime-tools-toggle { appearance:none; border:0; cursor:pointer; font:inherit; }
.prime-tools-toggle span { display:inline-block; margin-left:4px; transition:transform .18s ease; }
.prime-tools.is-open .prime-tools-toggle span { transform:rotate(180deg); }
.prime-tools-menu { position:absolute; z-index:10020; top:calc(100% + 10px); left:50%; width:260px; padding:9px; display:grid; gap:5px; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-6px); border:1px solid var(--glass-border,rgba(255,255,255,.12)); border-radius:16px; background:rgba(8,25,17,.97); box-shadow:0 18px 48px rgba(0,0,0,.32); transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s; }
.prime-tools.is-open .prime-tools-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition:opacity .16s ease,transform .16s ease; }
.prime-tools-menu a { display:grid; gap:2px; padding:11px 12px; border-radius:11px; color:var(--text-main,#f4fbf6); text-decoration:none; background:transparent; }
.prime-tools-menu a:hover { background:rgba(134,239,172,.09); }
.prime-tools-menu b { font-size:.84rem; }
.prime-tools-menu small { color:var(--text-muted,#a8b9ad); font-size:.7rem; }
:root[data-theme="light"] .prime-tools-menu { background:rgba(250,253,248,.98); border-color:rgba(28,70,45,.14); box-shadow:0 18px 44px rgba(30,70,46,.16); }
:root[data-theme="light"] .prime-tools-menu a { color:#153322; }
:root[data-theme="light"] .prime-tools-menu small { color:#5f7668; }

.prime-page-loader { position:fixed; inset:0; z-index:120000; display:grid; place-content:center; justify-items:center; gap:11px; opacity:0; visibility:hidden; pointer-events:none; background:rgba(4,14,9,.5); transition:opacity .13s ease,visibility 0s linear .13s; }
.prime-page-loader.is-active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .11s ease; }
.prime-page-loader-ring { width:43px; height:43px; border-radius:50%; border:3px solid rgba(255,255,255,.16); border-top-color:#86efac; border-right-color:#fde68a; animation:primeLoaderSpin .72s linear infinite; box-shadow:0 0 26px rgba(134,239,172,.13); }
.prime-page-loader small { color:#ecfdf5; font-weight:800; letter-spacing:.02em; }
@keyframes primeLoaderSpin { to { transform:rotate(360deg); } }

@media (hover:hover) and (min-width:901px) {
  .prime-tools:hover .prime-tools-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
}
@media (max-width:900px) {
  .prime-tools { width:auto; display:inline-flex; flex:0 0 auto; }
  .prime-tools-toggle { width:auto; white-space:nowrap; }
  .prime-tools-menu { position:fixed; top:76px; left:10px; right:10px; width:auto; grid-template-columns:repeat(2,minmax(0,1fr)); transform:translateY(-5px)!important; }
  .prime-tools.is-open .prime-tools-menu { transform:none!important; }
}
@media (max-width:720px) {
  .prime-pond-ambient { display:none; }
  .prime-page-loader { background:rgba(4,14,9,.68); }
  .prime-page-loader-ring { width:38px; height:38px; }
  .motion-reveal-v4 { transition-duration:.24s!important; }
}
@media (prefers-reduced-motion:reduce) {
  .prime-page-loader-ring { animation:none; border-color:#86efac; }
}

/* =====================================================================
   V31 Homepage + unified navigation
   Premium presentation, compact mobile menu and low-cost motion.
   ===================================================================== */
.prime-tools-toggle {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:9px 11px !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:transparent !important;
  color:var(--text-muted) !important;
  box-shadow:none !important;
  font-family:var(--font-ui) !important;
  font-size:.91rem !important;
  font-weight:800 !important;
  line-height:1 !important;
}
.prime-tools-toggle:hover,
.prime-tools.is-open .prime-tools-toggle {
  color:#f8fff8 !important;
  border-color:rgba(166,244,138,.13) !important;
  background:rgba(118,223,103,.09) !important;
  transform:translateY(-1px);
}
.prime-tools-toggle > span { margin:0 !important; transform:none; }
.prime-tools-spark {
  display:grid !important;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:7px;
  color:#dfffc9;
  background:linear-gradient(145deg,rgba(139,231,113,.20),rgba(238,218,111,.11));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-size:.76rem;
}
.prime-tools-chevron { color:#97b7a1; font-size:.85rem; transition:transform .18s ease !important; }
.prime-tools.is-open .prime-tools-toggle > span { transform:none; }
.prime-tools.is-open .prime-tools-toggle .prime-tools-chevron { transform:rotate(180deg); }

.prime-tools-menu {
  left:50%;
  width:350px;
  padding:10px;
  gap:6px;
  border-radius:20px;
  border-color:rgba(204,247,210,.14);
  background:linear-gradient(155deg,rgba(9,31,19,.985),rgba(5,20,13,.985));
  box-shadow:0 24px 64px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
}
.prime-tools-heading {
  display:flex;
  grid-column:1 / -1;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:5px 8px 9px;
  border-bottom:1px solid rgba(205,247,211,.09);
}
.prime-tools-heading span { color:#f0fff2; font-size:.72rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.prime-tools-heading small { color:#80988a; font-size:.62rem; }
.prime-tools-menu .prime-tool-card {
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:62px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:14px;
  background:rgba(255,255,255,.018);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.prime-tools-menu .prime-tool-card:hover {
  border-color:rgba(190,237,196,.11);
  background:rgba(142,229,116,.075);
  transform:translateX(2px);
}
.prime-tool-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.045);
  font-size:1.15rem;
}
.prime-tool-tarot .prime-tool-icon { background:linear-gradient(145deg,rgba(165,110,238,.20),rgba(72,68,173,.12)); }
.prime-tool-story .prime-tool-icon { background:linear-gradient(145deg,rgba(67,181,122,.20),rgba(50,107,75,.12)); }
.prime-tool-gift .prime-tool-icon { background:linear-gradient(145deg,rgba(242,199,88,.20),rgba(187,117,48,.10)); }
.prime-tool-copy { display:grid; gap:3px; min-width:0; }
.prime-tools-menu .prime-tool-copy b { color:#f4fff5; font-size:.84rem; font-weight:900; }
.prime-tools-menu .prime-tool-copy small { color:#91a99a; font-size:.68rem; line-height:1.35; }
.prime-tool-arrow { color:#8bbd94; font-size:1rem; transition:transform .16s ease; }
.prime-tool-card:hover .prime-tool-arrow { transform:translateX(2px); }

:root[data-theme="light"] .prime-tools-toggle { color:#41604e !important; }
:root[data-theme="light"] .prime-tools-toggle:hover,
:root[data-theme="light"] .prime-tools.is-open .prime-tools-toggle { color:#173a25 !important; background:rgba(58,126,76,.08) !important; border-color:rgba(42,105,63,.10) !important; }
:root[data-theme="light"] .prime-tools-spark { color:#235b34; background:rgba(91,174,99,.13); }
:root[data-theme="light"] .prime-tools-menu { background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(244,250,245,.99)); border-color:rgba(30,82,48,.12); }
:root[data-theme="light"] .prime-tools-heading { border-color:rgba(36,84,52,.09); }
:root[data-theme="light"] .prime-tools-heading span,
:root[data-theme="light"] .prime-tools-menu .prime-tool-copy b { color:#193a26; }
:root[data-theme="light"] .prime-tools-heading small,
:root[data-theme="light"] .prime-tools-menu .prime-tool-copy small { color:#637c6b; }
:root[data-theme="light"] .prime-tools-menu .prime-tool-card { background:rgba(29,79,46,.025); }
:root[data-theme="light"] .prime-tools-menu .prime-tool-card:hover { background:rgba(57,128,75,.07); border-color:rgba(46,109,65,.10); }

.home-page { overflow-x:hidden; }
.home-page .home-shell {
  width:min(1240px,calc(100% - 32px)) !important;
  max-width:1240px !important;
  padding-top:112px !important;
  padding-bottom:72px !important;
}
.home-nav {
  width:min(1240px,calc(100% - 28px)) !important;
  max-width:1240px !important;
  min-height:70px;
  flex-wrap:nowrap !important;
  padding:9px 12px 9px 15px !important;
}
.home-brand { gap:10px !important; }
.home-brand-copy { display:grid; gap:1px; }
.home-brand-copy .prime-logo { font-size:1.25rem; line-height:1; }
.home-brand-copy small { color:#91aa99; font-family:var(--font-ui); font-size:.59rem; font-weight:900; letter-spacing:.16em; line-height:1; text-transform:uppercase; }
.home-nav .nav-menu { flex-wrap:nowrap; }
.home-nav .nav-link.is-current { color:#f8fff8 !important; background:rgba(118,223,103,.09); }
.home-nav-toggle { display:none; }
.home-nav-cta,.home-nav-logout { min-height:39px !important; padding:9px 14px !important; font-size:.85rem !important; }

.home-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  align-items:center;
  gap:clamp(28px,5vw,68px);
  min-height:560px;
  margin:0 0 26px;
  padding:clamp(38px,6vw,76px) !important;
  overflow:hidden;
  border-radius:34px !important;
  border:1px solid rgba(205,247,211,.13);
  text-align:left !important;
  background-image:linear-gradient(108deg,rgba(3,16,9,.78),rgba(5,22,13,.56) 55%,rgba(3,15,9,.66)),url('frog-pond-bg.jpg');
  background-position:center 46%;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 25px 70px rgba(1,12,6,.22),inset 0 1px 0 rgba(255,255,255,.055);
}
.home-hero::after { content:''; position:absolute; z-index:1; inset:12px; border:1px solid rgba(212,255,220,.085); border-radius:25px; pointer-events:none; }
.home-hero > * { position:relative; z-index:2; }
.home-hero-copy { max-width:720px; }
.home-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
  padding:8px 12px;
  border:1px solid rgba(186,239,196,.16);
  border-radius:999px;
  background:rgba(5,27,15,.38);
  color:#eaffec !important;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.home-live-pip { width:7px; height:7px; border-radius:50%; background:#8dea78; box-shadow:0 0 0 4px rgba(141,234,120,.11),0 0 14px rgba(141,234,120,.46); }
.home-hero h1 {
  max-width:760px;
  margin:0;
  color:#f7fff8 !important;
  font-family:var(--font-ui) !important;
  font-size:clamp(3.1rem,6.2vw,6rem);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.home-hero h1 span { color:#caffb6 !important; }
.home-hero-copy > p {
  max-width:650px;
  margin:24px 0 0;
  color:rgba(239,249,241,.84) !important;
  font-family:Inter,var(--font-ui);
  font-size:clamp(.98rem,1.6vw,1.13rem);
  line-height:1.72;
}
.home-hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }
.home-hero-actions .btn-cozy { min-height:48px; }
.home-copy-ip.is-copied { background:linear-gradient(135deg,#dff59b,#8ed77d) !important; }
.home-proof { display:flex; flex-wrap:wrap; gap:0; margin-top:34px; }
.home-proof > span { display:grid; gap:2px; min-width:126px; padding:0 22px; border-left:1px solid rgba(216,250,220,.13); }
.home-proof > span:first-child { padding-left:0; border-left:0; }
.home-proof b { color:#f7fff8 !important; font-size:.82rem; font-weight:900; }
.home-proof small { color:rgba(220,238,224,.65) !important; font-size:.64rem; }

.home-server-card {
  position:relative;
  display:grid;
  gap:13px;
  padding:18px;
  border:1px solid rgba(213,249,218,.15);
  border-radius:23px;
  background:linear-gradient(155deg,rgba(4,22,13,.72),rgba(8,35,20,.58));
  box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055);
}
.home-server-head { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:10px; padding:2px; }
.home-server-head > span:nth-child(2) { display:grid; gap:2px; }
.home-server-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(171,240,167,.17); border-radius:14px; background:rgba(115,206,99,.11); font-size:1.25rem; }
.home-server-head small,.home-server-address small,.home-server-metrics small { color:rgba(211,232,215,.58) !important; font-size:.61rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.home-server-head strong { color:#f2fff4 !important; font-size:.85rem; }
.home-server-state { grid-column:1/-1; display:inline-flex; align-items:center; gap:8px; width:max-content; padding:7px 9px; border:1px solid rgba(255,255,255,.065); border-radius:999px; background:rgba(255,255,255,.035); }
.home-server-state i { display:block; width:7px; height:7px; border-radius:50%; background:#80938a; }
.home-server-state i.is-online { background:#86ef78; box-shadow:0 0 12px rgba(134,239,120,.72); }
.home-server-state i.is-offline { background:#fb7b79; box-shadow:0 0 12px rgba(251,123,121,.52); }
.home-server-state b { color:#dff0e2 !important; font-size:.66rem; }
.home-server-address { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid rgba(209,246,215,.10); border-radius:16px; background:rgba(255,255,255,.035); }
.home-server-address > span { display:grid; gap:3px; }
.home-server-address .ip-text { margin:0; color:#ceffb8 !important; font-family:Inter,var(--font-ui); font-size:1.05rem; font-weight:900; letter-spacing:-.02em; }
.home-mini-copy { display:grid; place-items:center; width:39px; height:39px; border:1px solid rgba(190,242,194,.14); border-radius:12px; background:rgba(129,218,105,.10); color:#eaffdf; cursor:pointer; font-size:1.05rem; transition:transform .17s ease,background .17s ease; }
.home-mini-copy:hover { transform:translateY(-1px); background:rgba(129,218,105,.17); }
.home-mini-copy.is-copied { color:#193b22; background:#a8ee90; }
.home-server-metrics { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.home-server-metrics span { display:grid; gap:4px; padding:12px; border:1px solid rgba(210,246,216,.08); border-radius:14px; background:rgba(0,0,0,.10); }
.home-server-metrics strong { color:#f0fff2 !important; font-size:.77rem; overflow-wrap:anywhere; }
.home-server-card > p { margin:0; color:rgba(213,232,216,.62) !important; font-size:.67rem; line-height:1.55; }

.home-welcome-strip {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  margin:0 0 74px;
  padding:13px 15px;
  border:1px solid rgba(188,235,194,.12);
  border-radius:19px;
  background:linear-gradient(100deg,rgba(111,198,100,.08),rgba(255,255,255,.025));
}
.home-welcome-avatar { display:grid; place-items:center; width:41px; height:41px; border-radius:13px; background:rgba(126,216,108,.11); }
.home-welcome-strip > span:nth-child(2) { display:grid; gap:1px; }
.home-welcome-strip small { color:var(--text-muted); font-size:.65rem; }
.home-welcome-strip strong { color:var(--text-main); font-size:.85rem; }
.home-welcome-strip a { color:#bff4a9; font-size:.72rem; font-weight:900; text-decoration:none; }

.home-section { margin-top:clamp(64px,9vw,104px); content-visibility:auto; contain-intrinsic-size:800px; }
.home-section-heading { display:grid; grid-template-columns:minmax(0,.9fr) minmax(300px,.6fr); align-items:end; gap:clamp(22px,5vw,72px); margin-bottom:26px; }
.home-section-kicker { display:block; margin-bottom:8px; color:#9ae483; font-size:.68rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.home-section-heading h2,.home-journey-copy h2 { margin:0; color:var(--text-main); font-family:var(--font-ui); font-size:clamp(2rem,4.6vw,3.6rem); font-weight:900; line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.home-section-heading > p,.home-journey-copy > p { margin:0; color:var(--text-muted); font-family:Inter,var(--font-ui); font-size:.92rem; line-height:1.72; }

.home-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.home-feature-card {
  position:relative;
  isolation:isolate;
  min-height:295px;
  padding:25px;
  overflow:hidden;
  border:1px solid rgba(205,244,209,.11);
  border-radius:25px;
  background:linear-gradient(145deg,rgba(14,42,26,.66),rgba(7,24,15,.62));
  box-shadow:0 16px 38px rgba(2,15,8,.13),inset 0 1px 0 rgba(255,255,255,.035);
  color:var(--text-main);
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.home-feature-card::after { content:''; position:absolute; z-index:-1; right:-70px; bottom:-90px; width:240px; height:240px; border-radius:50%; opacity:.13; background:var(--feature-glow,#82e36d); filter:blur(8px); }
.home-feature-card:hover { transform:translateY(-4px); border-color:rgba(185,237,190,.22); box-shadow:0 24px 52px rgba(2,15,8,.21),inset 0 1px 0 rgba(255,255,255,.045); }
.feature-story { --feature-glow:#6bc889; }
.feature-tarot { --feature-glow:#a979e9; }
.feature-gift { --feature-glow:#e8bc5f; }
.home-feature-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:28px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.045); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); font-size:1.42rem; }
.home-feature-badge { position:absolute; top:27px; right:25px; padding:6px 8px; border:1px solid rgba(205,242,208,.10); border-radius:999px; color:#91b69a; font-size:.56rem; font-weight:950; letter-spacing:.095em; }
.home-feature-card h3 { max-width:420px; margin:0 0 10px; color:#f5fff6; font-size:clamp(1.2rem,2.3vw,1.55rem); font-weight:900; letter-spacing:-.03em; }
.home-feature-card p { max-width:480px; margin:0 0 26px; color:#9eb3a4; font-family:Inter,var(--font-ui); font-size:.79rem; line-height:1.65; }
.home-feature-link { position:absolute; left:25px; bottom:23px; display:inline-flex; align-items:center; gap:8px; color:#c9f8b6; font-size:.72rem; font-weight:900; }
.home-feature-link b { transition:transform .18s ease; }
.home-feature-card:hover .home-feature-link b { transform:translateX(3px); }

.home-journey-panel {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(390px,.7fr);
  gap:clamp(30px,7vw,90px);
  align-items:center;
  margin-top:clamp(70px,10vw,118px);
  padding:clamp(28px,5vw,56px);
  border:1px solid rgba(207,246,211,.11);
  border-radius:30px;
  background:linear-gradient(120deg,rgba(17,51,31,.60),rgba(7,25,15,.54));
  box-shadow:0 20px 50px rgba(2,15,8,.13),inset 0 1px 0 rgba(255,255,255,.035);
  content-visibility:auto;
  contain-intrinsic-size:500px;
}
.home-journey-copy > p { max-width:590px; margin:18px 0 24px; }
.home-step-list { display:grid; gap:10px; }
.home-step-list article { display:grid; grid-template-columns:43px minmax(0,1fr); align-items:center; gap:13px; padding:13px; border:1px solid rgba(210,246,215,.09); border-radius:16px; background:rgba(255,255,255,.025); }
.home-step-list article > b { display:grid; place-items:center; width:43px; height:43px; border-radius:13px; color:#d3ffc0; background:rgba(123,211,102,.10); font-size:.72rem; }
.home-step-list article > span { display:grid; gap:3px; }
.home-step-list strong { color:#effff1; font-size:.78rem; }
.home-step-list small { color:#8fa495; font-size:.66rem; line-height:1.4; }

.home-footer { margin-top:0; padding:36px 20px; background:rgba(4,17,10,.72); }
.home-footer .footer-content { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; max-width:1240px; text-align:left; }
.home-footer-brand { color:#eaffdf; text-decoration:none; white-space:nowrap; }
.home-footer p { margin:0; text-align:center; font-size:.76rem; }
.home-footer .footer-content > span { color:#789081; font-size:.65rem; white-space:nowrap; }

:root[data-theme="light"] .home-brand-copy small { color:#64796b; }
:root[data-theme="light"] .home-nav .nav-link.is-current { color:#183b25 !important; background:rgba(63,135,79,.08); }
:root[data-theme="light"] .home-section-kicker { color:#3e7d48; }
:root[data-theme="light"] .home-section-heading h2,
:root[data-theme="light"] .home-journey-copy h2 { color:#183a26; }
:root[data-theme="light"] .home-section-heading > p,
:root[data-theme="light"] .home-journey-copy > p { color:#587061; }
:root[data-theme="light"] .home-feature-card,
:root[data-theme="light"] .home-journey-panel { background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(242,250,244,.42)); border-color:rgba(255,255,255,.56); box-shadow:0 17px 38px rgba(18,46,27,.09),inset 0 1px 0 rgba(255,255,255,.62); }
:root[data-theme="light"] .home-feature-card h3,
:root[data-theme="light"] .home-step-list strong { color:#1d3d2a; }
:root[data-theme="light"] .home-feature-card p,
:root[data-theme="light"] .home-step-list small { color:#5c7464; }
:root[data-theme="light"] .home-feature-badge { color:#597260; border-color:rgba(45,101,61,.10); }
:root[data-theme="light"] .home-feature-link { color:#347044; }
:root[data-theme="light"] .home-step-list article { background:rgba(255,255,255,.32); border-color:rgba(45,101,61,.08); }
:root[data-theme="light"] .home-step-list article > b { color:#2c6b3c; background:rgba(78,153,85,.10); }
:root[data-theme="light"] .home-welcome-strip { background:rgba(255,255,255,.34); border-color:rgba(255,255,255,.48); }
:root[data-theme="light"] .home-welcome-strip a { color:#2f6c3d; }

@media (max-width:1050px) {
  .home-nav .nav-link { padding-inline:9px !important; font-size:.84rem !important; }
  .home-nav .nav-menu { gap:2px !important; }
  .home-hero { grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr); padding:48px 42px !important; }
  .home-hero h1 { font-size:clamp(3rem,7vw,5rem); }
}

@media (max-width:900px) {
  .home-page .home-shell { padding-top:94px !important; }
  .home-nav { top:0 !important; min-height:66px; flex-wrap:nowrap !important; }
  .home-nav-toggle {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:8px 11px;
    border:1px solid rgba(190,236,197,.12);
    border-radius:12px;
    background:rgba(255,255,255,.035);
    color:#eaffec;
    font-family:var(--font-ui);
    font-size:.73rem;
    font-weight:900;
    cursor:pointer;
  }
  .home-nav-toggle-icon { display:grid; gap:3px; width:15px; }
  .home-nav-toggle-icon i { display:block; width:15px; height:1.5px; border-radius:99px; background:currentColor; transition:transform .18s ease,opacity .18s ease; }
  .home-nav.is-menu-open .home-nav-toggle-icon i:nth-child(1) { transform:translateY(4.5px) rotate(45deg); }
  .home-nav.is-menu-open .home-nav-toggle-icon i:nth-child(2) { opacity:0; }
  .home-nav.is-menu-open .home-nav-toggle-icon i:nth-child(3) { transform:translateY(-4.5px) rotate(-45deg); }
  :root[data-theme="light"] .home-nav-toggle { color:#244b31; border-color:rgba(36,84,51,.11); background:rgba(31,83,47,.04); }

  .home-nav .nav-menu {
    position:fixed;
    top:76px;
    left:10px;
    right:10px;
    display:grid !important;
    align-content:start;
    gap:4px !important;
    max-height:calc(100dvh - 88px);
    padding:10px;
    overflow:auto;
    border:1px solid rgba(204,244,209,.14);
    border-radius:20px;
    background:rgba(6,24,14,.985);
    box-shadow:0 25px 65px rgba(0,0,0,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-7px) scale(.985);
    transform-origin:top right;
    transition:opacity .17s ease,transform .17s ease,visibility 0s linear .17s;
  }
  .home-nav.is-menu-open .nav-menu { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .17s ease,transform .17s ease; }
  .home-nav .nav-menu > .nav-link,
  .home-nav .nav-menu > .btn-cozy,
  .home-nav .theme-toggle-btn { width:100%; min-height:44px; justify-content:flex-start; padding:11px 12px !important; border-radius:13px !important; }
  .home-nav .theme-toggle-btn { position:static !important; }
  :root[data-theme="light"] .home-nav .nav-menu { background:rgba(250,253,249,.99); border-color:rgba(36,84,52,.12); box-shadow:0 25px 60px rgba(23,57,34,.18); }

  .home-nav .prime-tools { display:block; width:100%; }
  .home-nav .prime-tools-toggle { width:100%; min-height:44px; justify-content:flex-start; padding:11px 12px !important; }
  .home-nav .prime-tools-chevron { margin-left:auto !important; }
  .home-nav .prime-tools-menu {
    position:static;
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    max-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    border-width:0;
    border-radius:15px;
    opacity:0;
    visibility:hidden;
    transform:none !important;
    box-shadow:none;
    transition:max-height .2s ease,opacity .16s ease,padding .16s ease,margin .16s ease,visibility 0s linear .2s;
  }
  .home-nav .prime-tools.is-open .prime-tools-menu { max-height:330px; margin-top:4px; padding:8px; border-width:1px; opacity:1; visibility:visible; transform:none !important; transition:max-height .22s ease,opacity .16s ease,padding .16s ease,margin .16s ease; }
  .home-nav .prime-tools-heading { display:none; }

  .home-hero { grid-template-columns:1fr; gap:30px; min-height:0; padding:42px 34px !important; }
  .home-server-card { max-width:560px; }
  .home-section-heading,.home-journey-panel { grid-template-columns:1fr; }
  .home-section-heading { align-items:start; }
  .home-section-heading > p { max-width:650px; }
  .home-footer .footer-content { grid-template-columns:1fr; justify-items:center; gap:8px; text-align:center; }
  .home-footer .footer-content > span { white-space:normal; }
}

@media (max-width:640px) {
  .home-page .home-shell { width:min(100% - 20px,1240px) !important; padding-top:84px !important; padding-bottom:48px !important; }
  .home-nav { width:calc(100% - 16px) !important; margin-top:8px !important; padding:8px 9px 8px 11px !important; border-radius:18px !important; }
  .home-nav .brand::before { width:34px; height:34px; border-radius:11px; }
  .home-brand-copy .prime-logo { font-size:1.08rem; }
  .home-brand-copy small { font-size:.51rem; }
  .home-nav .nav-menu { top:69px; left:8px; right:8px; max-height:calc(100dvh - 78px); }
  .home-hero { padding:32px 22px 25px !important; border-radius:26px !important; background-position:44% center !important; }
  .home-hero::after { inset:9px !important; border-radius:19px !important; }
  .home-eyebrow { margin-bottom:17px; padding:7px 9px; font-size:.58rem; letter-spacing:.04em; }
  .home-hero h1 { font-size:clamp(2.65rem,13.5vw,4.15rem); line-height:.96; letter-spacing:-.06em; }
  .home-hero-copy > p { margin-top:18px; font-size:.86rem; line-height:1.62; }
  .home-hero-actions { display:grid; grid-template-columns:1fr; margin-top:22px; }
  .home-hero-actions .btn-cozy { width:100%; min-height:46px; }
  .home-proof { display:grid; grid-template-columns:repeat(3,1fr); width:100%; margin-top:27px; }
  .home-proof > span { min-width:0; padding:0 9px; }
  .home-proof b { font-size:.67rem; }
  .home-proof small { font-size:.53rem; line-height:1.3; }
  .home-server-card { padding:14px; border-radius:19px; }
  .home-server-head { grid-template-columns:40px minmax(0,1fr); }
  .home-server-icon { width:40px; height:40px; }
  .home-server-address .ip-text { font-size:.91rem; }
  .home-welcome-strip { grid-template-columns:auto minmax(0,1fr); margin-bottom:52px; }
  .home-welcome-strip a { grid-column:2; }
  .home-section { margin-top:58px; contain-intrinsic-size:1200px; }
  .home-section-heading { gap:14px; margin-bottom:19px; }
  .home-section-heading h2,.home-journey-copy h2 { font-size:clamp(2rem,10vw,2.75rem); }
  .home-section-heading > p,.home-journey-copy > p { font-size:.81rem; line-height:1.65; }
  .home-feature-grid { grid-template-columns:1fr; gap:11px; }
  .home-feature-card { min-height:260px; padding:21px; border-radius:21px; }
  .home-feature-icon { margin-bottom:22px; }
  .home-feature-badge { top:23px; right:21px; }
  .home-feature-link { left:21px; bottom:20px; }
  .home-journey-panel { margin-top:64px; padding:25px 19px; border-radius:24px; contain-intrinsic-size:720px; }
  .home-journey-copy .btn-cozy { width:100%; }
  .home-step-list article { grid-template-columns:39px minmax(0,1fr); padding:11px; }
  .home-step-list article > b { width:39px; height:39px; }
}

@media (max-width:540px) {
  body:not(.home-page) .prime-tools-menu { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .home-feature-card,.home-mini-copy,.prime-tool-card,.prime-tool-arrow,.home-nav-toggle-icon i { transition:none !important; transform:none !important; }
}


/* =====================================================================
   V40 Explore menu precision fix
   - optical alignment for icon / label / chevron
   - click-to-pin + hover bridge so moving into the panel never drops it
   ===================================================================== */
.prime-tools {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
}
.prime-tools-toggle {
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:24px auto 12px !important;
  align-items:center !important;
  justify-content:center !important;
  column-gap:8px !important;
  min-height:40px !important;
  padding:7px 11px 7px 8px !important;
  line-height:1 !important;
}
.prime-tools-spark {
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  align-self:center !important;
  transform:none !important;
  line-height:1 !important;
}
.prime-tools-label {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  transform:none !important;
}
.prime-tools-chevron {
  position:relative !important;
  display:block !important;
  width:8px !important;
  height:8px !important;
  margin:0 0 3px 0 !important;
  padding:0 !important;
  align-self:center !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  transform:rotate(45deg) !important;
  transform-origin:50% 50% !important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease !important;
}
.prime-tools-chevron::before {
  content:"";
  position:absolute;
  inset:0;
  box-sizing:border-box;
  border-right:2px solid #97b7a1;
  border-bottom:2px solid #97b7a1;
  border-radius:1px;
}
.prime-tools.is-open .prime-tools-chevron {
  margin:3px 0 0 0 !important;
  transform:rotate(225deg) !important;
}
.prime-tools-toggle:hover .prime-tools-chevron::before,
.prime-tools.is-open .prime-tools-chevron::before {
  border-color:#dfffc9;
}

/* Invisible hover bridge fills the physical gap between trigger and menu. */
@media (hover:hover) and (pointer:fine) and (min-width:901px) {
  .prime-tools::after {
    content:"";
    position:absolute;
    z-index:10019;
    top:100%;
    left:-28px;
    right:-28px;
    height:14px;
    pointer-events:auto;
  }
  .prime-tools-menu {
    top:calc(100% + 8px) !important;
  }
  .prime-tools:hover .prime-tools-toggle,
  .prime-tools.is-open .prime-tools-toggle {
    transform:none !important;
  }
}

/* Prevent old generic span rotation from touching icon or label. */
.prime-tools.is-open .prime-tools-toggle > .prime-tools-spark,
.prime-tools.is-open .prime-tools-toggle > .prime-tools-label {
  transform:none !important;
}

:root[data-theme="light"] .prime-tools-chevron::before {
  border-color:#587260;
}
:root[data-theme="light"] .prime-tools-toggle:hover .prime-tools-chevron::before,
:root[data-theme="light"] .prime-tools.is-open .prime-tools-chevron::before {
  border-color:#245b35;
}

@media (max-width:900px) {
  .home-nav .prime-tools-toggle {
    display:grid !important;
    grid-template-columns:24px 1fr 12px !important;
    justify-content:stretch !important;
    text-align:left !important;
  }
  .home-nav .prime-tools-chevron { justify-self:end !important; }
}