/* PrimeMC V32 — UI Revolution
   Presentation-only layer for WEB_UPLOAD. No payment or database logic. */

:root {
  --v32-bg: #05110b;
  --v32-bg-soft: #0a1d12;
  --v32-panel: rgba(8, 29, 17, .84);
  --v32-panel-solid: #0d2818;
  --v32-border: rgba(194, 255, 190, .13);
  --v32-border-strong: rgba(194, 255, 190, .24);
  --v32-text: #f5fff7;
  --v32-muted: #9daf9f;
  --v32-green: #8ef2a0;
  --v32-cyan: #70dae8;
  --v32-gold: #ffd876;
  --v32-pink: #f1a4c0;
  --v32-violet: #bea1ef;
  --v32-radius-xl: 30px;
  --v32-radius-lg: 22px;
  --v32-radius-md: 15px;
  --v32-shadow: 0 24px 72px rgba(0, 0, 0, .28);
  --v32-shadow-soft: 0 13px 36px rgba(0, 0, 0, .18);
  --v32-ease: cubic-bezier(.2, .78, .2, 1);
  --v32-width: 1220px;
}

html {
  background: var(--v32-bg);
  scrollbar-color: rgba(126, 231, 149, .42) rgba(255, 255, 255, .035);
}

body,
button,
input,
select,
textarea {
  font-family: Inter, Quicksand, "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.auth-page):not(.shop-page):not(.tarot-page) {
  background-color: var(--v32-bg);
  background-image:
    radial-gradient(circle at 8% 2%, rgba(76, 226, 131, .12), transparent 28rem),
    radial-gradient(circle at 94% 16%, rgba(105, 214, 231, .09), transparent 31rem),
    linear-gradient(155deg, #05110b 0%, #091b11 48%, #06130d 100%);
  background-attachment: fixed;
}

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

:where(a,button,input,select,textarea):focus-visible {
  outline: 3px solid rgba(112, 218, 232, .58) !important;
  outline-offset: 3px;
}

::selection { color: #04130a; background: #a9f5ae; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.025); }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: linear-gradient(#609f6c,#47795a) padding-box; }

/* Shared navigation */
.cozy-nav {
  top: 14px !important;
  width: min(var(--v32-width), calc(100% - 28px)) !important;
  max-width: var(--v32-width) !important;
  min-height: 66px;
  padding: 9px 11px 9px 17px !important;
  border: 1px solid var(--v32-border) !important;
  border-radius: 21px !important;
  background: rgba(5, 20, 12, .82) !important;
  box-shadow: 0 16px 52px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(17px) saturate(122%) !important;
  backdrop-filter: blur(17px) saturate(122%) !important;
}

.cozy-nav.is-scrolled,
.site-header.is-scrolled {
  border-color: rgba(194,255,190,.21) !important;
  background-color: rgba(4,17,10,.95) !important;
  box-shadow: 0 19px 58px rgba(0,0,0,.37), inset 0 1px rgba(255,255,255,.045) !important;
}

.prime-logo {
  color: #f7fff8 !important;
  font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
  font-size: 1.09rem !important;
  font-weight: 920 !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}

.nav-link,
:is(.nav-menu,.main-nav,.nav-links) > a:not(.btn):not(.btn-cozy) {
  border: 1px solid transparent;
  border-radius: 12px !important;
  color: #afc1b2 !important;
  font-size: .84rem !important;
  font-weight: 760 !important;
  line-height: 1.2;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease !important;
}

.nav-link:hover,
:is(.nav-menu,.main-nav,.nav-links) > a:not(.btn):not(.btn-cozy):hover {
  color: #fff !important;
  border-color: rgba(194,255,190,.10) !important;
  background: rgba(255,255,255,.052) !important;
  transform: translateY(-1px);
}

.btn-cozy,
.btn:not(.btn-outline),
.auth-primary {
  border: 1px solid rgba(213,255,210,.36) !important;
  border-radius: 13px !important;
  color: #062212 !important;
  background: linear-gradient(135deg,#b5f7aa,#68e596) !important;
  box-shadow: 0 10px 25px rgba(67,217,126,.16), inset 0 1px rgba(255,255,255,.5) !important;
  font-weight: 850 !important;
  transition: transform .16s var(--v32-ease), box-shadow .16s ease, filter .16s ease !important;
}

.btn-cozy:hover,
.btn:not(.btn-outline):hover,
.auth-primary:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04);
  box-shadow: 0 14px 31px rgba(67,217,126,.22), inset 0 1px rgba(255,255,255,.56) !important;
}
.btn-cozy:active,.btn:active,.auth-primary:active { transform: translateY(0) scale(.98) !important; }
.btn-outline { color:#eaffed !important; border-color:rgba(194,255,190,.17) !important; background:rgba(255,255,255,.04) !important; box-shadow:none !important; }

/* Utilities dropdown */
.prime-tools-toggle {
  min-height: 40px !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: .84rem !important;
  font-weight: 780 !important;
}
.prime-tools-spark {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(163,244,155,.13);
  border-radius: 8px !important;
  color: #caffc5 !important;
  background: linear-gradient(145deg,rgba(113,233,142,.17),rgba(112,218,232,.08)) !important;
}
.prime-tools-menu {
  width: 372px !important;
  padding: 10px !important;
  gap: 6px !important;
  border-color: rgba(194,255,190,.15) !important;
  border-radius: 19px !important;
  background: linear-gradient(155deg,rgba(7,27,16,.99),rgba(4,18,11,.99)) !important;
  box-shadow: 0 26px 68px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04) !important;
}
.prime-tools-heading { padding: 6px 8px 10px !important; }
.prime-tools-heading span { font-size: .68rem !important; letter-spacing: .1em !important; }
.prime-tools-menu .prime-tool-card {
  min-height: 66px !important;
  grid-template-columns: 44px minmax(0,1fr) auto !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.018) !important;
}
.prime-tools-menu .prime-tool-card:hover { background:rgba(139,242,156,.07) !important; transform:translateX(2px); }
.prime-tool-icon { width:44px !important; height:44px !important; border-radius:14px !important; }

/* Homepage */
body.home-page {
  background:
    radial-gradient(circle at 18% -5%, rgba(83, 234, 139, .16), transparent 28rem),
    radial-gradient(circle at 93% 19%, rgba(103, 213, 232, .10), transparent 33rem),
    linear-gradient(150deg,#041009 0%,#071a0f 52%,#06130d 100%);
  overflow-x: hidden;
}

body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(rgba(178,255,185,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(178,255,185,.024) 1px,transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom,#000,transparent 78%);
  mask-image: linear-gradient(to bottom,#000,transparent 78%);
}

.home-page .home-shell {
  width: min(var(--v32-width), calc(100% - 30px)) !important;
  max-width: var(--v32-width) !important;
  padding-top: 108px !important;
  padding-bottom: 54px !important;
}

.home-nav { max-width: var(--v32-width) !important; }
.home-brand-copy { gap: 2px !important; }
.home-brand-copy small { color:#7f9685 !important; font-size:.54rem !important; letter-spacing:.15em !important; }
.home-nav .nav-menu { gap: 2px !important; }
.home-nav .nav-link { padding: 9px 10px !important; }
.home-nav .nav-link.is-current { color:#f6fff7 !important; background:rgba(118,235,145,.07) !important; border-color:rgba(142,241,157,.10) !important; }

.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 600px !important;
  margin-bottom: 15px !important;
  padding: clamp(32px,5vw,62px) !important;
  grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr) !important;
  gap: clamp(30px,4vw,56px) !important;
  overflow: hidden;
  border: 1px solid rgba(194,255,190,.16) !important;
  border-radius: 34px !important;
  background-image:
    linear-gradient(105deg,rgba(2,15,8,.92) 0%,rgba(5,24,13,.78) 49%,rgba(4,18,11,.61) 100%),
    url('frog-pond-bg.jpg') !important;
  background-position: center 43% !important;
  background-size: cover !important;
  box-shadow: 0 35px 92px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.045) !important;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 21% 20%,rgba(135,255,160,.10),transparent 26rem),
    linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px);
  background-size: auto,42px 42px,42px 42px;
  -webkit-mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.48) 60%,transparent);
  mask-image: linear-gradient(90deg,#000,rgba(0,0,0,.48) 60%,transparent);
}
.home-hero::after {
  content: "PRIME" !important;
  inset: auto -1.5% -7% auto !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.018);
  background: none !important;
  font-size: clamp(7rem,16vw,13rem);
  font-weight: 950;
  letter-spacing: -.08em;
  line-height: 1;
}
.home-hero > * { position:relative; z-index:2; }
.home-hero-copy { max-width:760px !important; }
.home-eyebrow {
  margin-bottom: 20px !important;
  padding: 7px 10px !important;
  border-color: rgba(184,244,191,.13) !important;
  background: rgba(255,255,255,.035) !important;
  color:#a8c2ad !important;
  font-size:.62rem !important;
  letter-spacing:.1em !important;
}
.home-hero h1 {
  max-width: 790px !important;
  color:#fff !important;
  font-family:Inter,"Segoe UI",system-ui,sans-serif !important;
  font-size:clamp(3.35rem,6.7vw,6.65rem) !important;
  font-weight:920 !important;
  line-height:.91 !important;
  letter-spacing:-.075em !important;
  text-shadow:0 8px 34px rgba(0,0,0,.28) !important;
}
.home-hero h1 span {
  color:#aaf5aa !important;
  background:linear-gradient(100deg,#caffc3 0%,#78eca0 48%,#73dae8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.home-hero-copy > p { max-width:690px !important; margin-top:21px !important; color:#c1d0c3 !important; font-size:clamp(.94rem,1.45vw,1.06rem) !important; line-height:1.72 !important; }
.home-hero-actions { margin-top:26px !important; gap:9px !important; }
.home-hero-actions .btn-cozy { min-height:47px !important; padding:11px 17px !important; }
.home-proof { margin-top:24px !important; border-top:1px solid rgba(255,255,255,.065); padding-top:18px; }
.home-proof > span { border-left-color:rgba(255,255,255,.07) !important; }
.home-proof b { color:#ecffed !important; font-size:.76rem !important; }
.home-proof small { color:#73877a !important; }

.home-server-card {
  position:relative;
  min-height:410px;
  padding:22px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid rgba(194,255,190,.15) !important;
  border-radius:27px !important;
  background:linear-gradient(160deg,rgba(13,48,27,.75),rgba(3,17,10,.92)) !important;
  box-shadow:0 25px 60px rgba(0,0,0,.31),inset 0 1px rgba(255,255,255,.05) !important;
}
.home-server-card::before {
  content:"P";
  position:absolute;
  top:72px;
  left:50%;
  width:144px;
  height:144px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border:1px solid rgba(177,255,175,.13);
  border-radius:36px;
  color:#caffc3;
  background:linear-gradient(145deg,rgba(148,249,158,.15),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 24px 50px rgba(0,0,0,.18);
  font-size:4rem;
  font-weight:950;
  letter-spacing:-.08em;
}
.home-server-card::after {
  content:"";
  position:absolute;
  top:-80px;
  right:-80px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(109,238,147,.22),rgba(109,238,147,.03) 48%,transparent 70%);
  pointer-events:none;
}
.home-server-card > * { position:relative; z-index:2; }
.home-server-head { position:absolute !important; top:18px; left:18px; right:18px; }
.home-server-icon { display:none !important; }
.home-server-address { margin-top:auto; }
.home-server-address .ip-text { color:#fff !important; font-size:clamp(1.25rem,2.6vw,1.75rem) !important; letter-spacing:-.035em; }
.home-server-state { font-size:.65rem !important; }
.home-server-metrics > span { border-color:rgba(255,255,255,.055) !important; background:rgba(255,255,255,.032) !important; }
.home-mini-copy { border-radius:11px !important; }

.home-welcome-strip {
  margin:0 0 34px !important;
  border-color:rgba(194,255,190,.10) !important;
  border-radius:18px !important;
  background:rgba(7,27,16,.63) !important;
  box-shadow:var(--v32-shadow-soft) !important;
}

.home-section { margin-top:44px !important; content-visibility:auto; contain-intrinsic-size:1px 900px; }
.home-section-heading { margin-bottom:16px !important; }
.home-section-kicker { color:var(--v32-green) !important; font-size:.64rem !important; letter-spacing:.15em !important; }
.home-section-heading h2,.home-journey-copy h2 { color:#fff !important; font-size:clamp(1.9rem,4vw,3.1rem) !important; letter-spacing:-.055em !important; }
.home-section-heading > p,.home-journey-copy > p { color:#849789 !important; font-size:.81rem !important; }
.home-feature-grid { gap:13px !important; }
.home-feature-card {
  --feature-accent:var(--v32-green);
  min-height:300px !important;
  padding:23px !important;
  contain:layout paint;
  overflow:hidden;
  border-color:rgba(194,255,190,.11) !important;
  border-radius:22px !important;
  background:linear-gradient(145deg,rgba(12,44,26,.81),rgba(5,24,14,.92)) !important;
  box-shadow:0 17px 43px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.035) !important;
  transition:transform .18s var(--v32-ease),border-color .18s ease,box-shadow .18s ease !important;
}
.home-feature-card.feature-story { --feature-accent:var(--v32-pink); background:linear-gradient(145deg,rgba(56,27,41,.78),rgba(18,23,24,.93)) !important; }
.home-feature-card.feature-tarot { --feature-accent:var(--v32-violet); background:linear-gradient(145deg,rgba(43,30,74,.76),rgba(13,24,25,.93)) !important; }
.home-feature-card.feature-gift { --feature-accent:var(--v32-gold); background:linear-gradient(145deg,rgba(59,45,21,.77),rgba(22,24,17,.93)) !important; }
.home-feature-card::before { width:210px !important; height:210px !important; right:-85px !important; top:-95px !important; background:radial-gradient(circle,color-mix(in srgb,var(--feature-accent) 18%,transparent),transparent 67%) !important; }
.home-feature-card:hover { transform:translateY(-4px) !important; border-color:color-mix(in srgb,var(--feature-accent) 30%,transparent) !important; box-shadow:0 25px 54px rgba(0,0,0,.27) !important; }
.home-feature-icon {
  width:56px !important;
  height:56px !important;
  border:1px solid color-mix(in srgb,var(--feature-accent) 25%,transparent) !important;
  border-radius:17px !important;
  color:var(--feature-accent) !important;
  background:color-mix(in srgb,var(--feature-accent) 8%,transparent) !important;
  font-size:1rem !important;
  font-weight:950 !important;
}
.home-feature-badge { color:color-mix(in srgb,var(--feature-accent) 82%,#8d998f) !important; }
.home-feature-card h3 { color:#fff !important; letter-spacing:-.035em !important; }
.home-feature-card p { color:#8fa195 !important; font-size:.76rem !important; }
.home-feature-link { color:var(--feature-accent) !important; }

.home-journey-panel {
  margin-top:18px !important;
  padding:30px !important;
  content-visibility:auto;
  contain-intrinsic-size:1px 480px;
  border-color:rgba(194,255,190,.13) !important;
  border-radius:24px !important;
  background:linear-gradient(112deg,rgba(13,49,28,.9),rgba(11,38,31,.74)) !important;
  box-shadow:0 19px 48px rgba(0,0,0,.19) !important;
}
.home-step-list article { border-color:rgba(255,255,255,.065) !important; background:rgba(255,255,255,.03) !important; }
.home-step-list article > b { color:#082514 !important; background:linear-gradient(145deg,#a8f5a5,#67e497) !important; }

.home-footer { border-color:rgba(194,255,190,.08) !important; background:rgba(4,15,9,.58) !important; }

/* Global cards/forms */
:where(.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.item-card,.featured-card,
  .stat-card,.stat-box,.package-card,.charge-card,.form-card,.order-card,.quick-link,.helper-item,
  .recent-order,.shop-sidebar,.shop-main-card,.balance-section,.method-card,.qr-display-area) {
  border-color:var(--v32-border) !important;
  box-shadow:var(--v32-shadow-soft),inset 0 1px rgba(255,255,255,.035);
}
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  min-height:44px;
  border-radius:13px !important;
  border-color:rgba(194,255,190,.14) !important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
  border-color:rgba(112,218,232,.50) !important;
  box-shadow:0 0 0 4px rgba(112,218,232,.08) !important;
}
:where(.shop-grid,.items-grid,.admin-grid,.table-wrap,.home-feature-grid) { content-visibility:auto; contain-intrinsic-size:1px 650px; }
:where(.item,.item-card,.package-card,.home-feature-card) { contain:layout paint; }

/* Page loader */
.prime-page-loader {
  gap:0 !important;
  background:rgba(4,15,9,.72) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:opacity .18s ease,visibility 0s linear .18s !important;
}
.prime-page-loader-card {
  min-width:156px;
  padding:22px 24px 18px;
  display:grid;
  justify-items:center;
  gap:10px;
  border:1px solid rgba(194,255,190,.15);
  border-radius:22px;
  color:#eaffed;
  background:rgba(7,26,15,.94);
  box-shadow:0 23px 60px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.04);
}
.prime-page-loader-ring { width:42px !important; height:42px !important; border-color:rgba(255,255,255,.09) !important; border-top-color:var(--v32-green) !important; border-right-color:var(--v32-cyan) !important; }
.prime-page-loader strong { color:#f2fff4; font-size:.74rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.prime-page-loader small { margin-top:-5px; color:#78907f !important; font-size:.64rem !important; }

@media (max-width:900px) {
  body:not(.auth-page):not(.shop-page):not(.tarot-page),body.home-page { background-attachment:scroll; }
  .cozy-nav { top:9px !important; width:calc(100% - 18px) !important; min-height:60px; padding:8px 9px 8px 13px !important; border-radius:18px !important; -webkit-backdrop-filter:blur(11px) saturate(110%) !important; backdrop-filter:blur(11px) saturate(110%) !important; }
  .home-page .home-shell { width:min(100% - 20px,var(--v32-width)) !important; padding-top:83px !important; }
  .home-nav .nav-menu { border-radius:18px !important; background:rgba(5,20,12,.985) !important; }
  .home-nav .prime-tools-menu { background:rgba(7,26,15,.98) !important; }
  .home-hero { min-height:0 !important; grid-template-columns:1fr !important; padding:36px 30px 26px !important; }
  .home-server-card { max-width:none !important; min-height:365px; }
  .home-feature-card { min-height:275px !important; }
  :where(.cozy-card,.glass-panel,.profile-card,.admin-card,.settings-card,.panel,.item-card,.package-card,.charge-card,.form-card,.shop-sidebar,.shop-main-card,.method-card,.qr-display-area) { -webkit-backdrop-filter:blur(8px) saturate(104%) !important; backdrop-filter:blur(8px) saturate(104%) !important; }
}

@media (max-width:640px) {
  .home-hero { padding:27px 19px 19px !important; border-radius:25px !important; background-position:59% center !important; }
  .home-hero h1 { font-size:clamp(3rem,15.2vw,4.75rem) !important; }
  .home-hero-copy > p { font-size:.88rem !important; }
  .home-hero-actions { display:grid !important; grid-template-columns:1fr !important; }
  .home-hero-actions .btn-cozy { width:100% !important; }
  .home-proof { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .home-server-card { min-height:355px; padding:18px !important; border-radius:22px !important; }
  .home-server-card::before { top:64px; width:124px; height:124px; border-radius:30px; font-size:3.4rem; }
  .home-server-head { top:14px; left:14px; right:14px; }
  .home-feature-grid { grid-template-columns:1fr !important; }
  .home-feature-card { min-height:255px !important; padding:20px !important; }
  .home-journey-panel { padding:23px 18px !important; }
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size:16px !important; }
  .prime-page-loader { -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
  .prime-page-loader-card { min-width:138px; padding:18px 20px 15px; }
}

@media (hover:none),(pointer:coarse) {
  .home-feature-card:hover,.btn-cozy:hover,.nav-link:hover { transform:none !important; }
  .prime-pond-ambient { display:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  .prime-page-loader { display:none !important; }
  .home-feature-card,.btn-cozy,.nav-link { transition:none !important; }
}

:root[data-theme="light"] body.home-page,
:root[data-theme="light"] body:not(.auth-page):not(.shop-page):not(.tarot-page) {
  background-color:#e7f1e5;
  background-image:
    radial-gradient(circle at 8% 2%,rgba(94,189,104,.18),transparent 27rem),
    radial-gradient(circle at 94% 14%,rgba(84,174,190,.11),transparent 30rem),
    linear-gradient(155deg,#edf5eb 0%,#dae9d9 52%,#e7f0e5 100%);
}
:root[data-theme="light"] .cozy-nav { border-color:rgba(41,91,56,.17) !important; background:rgba(241,249,240,.88) !important; box-shadow:0 16px 48px rgba(36,68,44,.14),inset 0 1px rgba(255,255,255,.7) !important; }
:root[data-theme="light"] .prime-logo { color:#183d25 !important; }
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] :is(.nav-menu,.main-nav,.nav-links) > a:not(.btn):not(.btn-cozy) { color:#4a6752 !important; }
:root[data-theme="light"] .home-section-heading h2,
:root[data-theme="light"] .home-journey-copy h2 { color:#173923 !important; }
:root[data-theme="light"] .home-section-heading > p { color:#506c57 !important; }
:root[data-theme="light"] .home-welcome-strip { border-color:rgba(45,92,54,.15) !important; background:rgba(239,248,237,.78) !important; }



/* ---------------------------------------------------
   V34 UI hotfix
   - Center the decorative "P" badge inside the server card.
   - Increase homepage hero text/background contrast in light mode.
---------------------------------------------------- */
.home-server-card::before {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:Inter,"Segoe UI",system-ui,sans-serif !important;
  line-height:1 !important;
  text-align:center !important;
  text-indent:-0.04em;
}

:root[data-theme="light"] .home-hero {
  background-image:
    linear-gradient(108deg,rgba(4,18,10,.90) 0%,rgba(7,25,15,.76) 52%,rgba(4,18,10,.82) 100%),
    url('frog-pond-bg.jpg') !important;
  box-shadow:0 35px 92px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.055) !important;
}
:root[data-theme="light"] .home-hero::before {
  background:
    radial-gradient(circle at 18% 18%,rgba(174,255,171,.16),transparent 24rem),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) !important;
  background-size:auto,42px 42px,42px 42px !important;
}
:root[data-theme="light"] .home-hero h1 {
  color:#fbfffb !important;
  text-shadow:0 10px 30px rgba(0,0,0,.44), 0 2px 8px rgba(0,0,0,.24) !important;
}
:root[data-theme="light"] .home-hero h1 span {
  background:linear-gradient(100deg,#f2ffe7 0%,#ccffba 44%,#95ecff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
:root[data-theme="light"] .home-hero-copy > p,
:root[data-theme="light"] .home-proof small,
:root[data-theme="light"] .home-server-card > p {
  color:rgba(239,248,241,.86) !important;
}
:root[data-theme="light"] .home-proof b,
:root[data-theme="light"] .home-server-head strong,
:root[data-theme="light"] .home-server-metrics strong,
:root[data-theme="light"] .home-server-address .ip-text {
  color:#fbfffb !important;
}
:root[data-theme="light"] .home-eyebrow {
  color:#f0fff2 !important;
  border-color:rgba(220,255,223,.18) !important;
  background:rgba(8,30,16,.32) !important;
}
:root[data-theme="light"] .home-server-card {
  background:linear-gradient(160deg,rgba(10,35,19,.78),rgba(5,22,12,.84)) !important;
  border-color:rgba(214,255,218,.18) !important;
}
:root[data-theme="light"] .home-server-state,
:root[data-theme="light"] .home-server-address,
:root[data-theme="light"] .home-server-metrics > span {
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.09) !important;
}



/* =========================================================
   V37 HOMEPAGE PRECISION FIX
   1) Replace pseudo P with a real optically-centered mark.
   2) Keep the hero/server panel dark and readable in light mode.
   3) Give the lower homepage real light surfaces so text never
      disappears into the frog background image.
   ========================================================= */

/* Kill the old pseudo-letter entirely. */
.home-server-card::before {
  content:none !important;
  display:none !important;
}

/* Stable server-card layout: header -> centered mark -> address -> metrics -> note. */
.home-server-card {
  display:grid !important;
  grid-template-rows:auto minmax(118px,1fr) auto auto auto !important;
  align-content:stretch !important;
  gap:12px !important;
  min-height:410px !important;
}
.home-server-head {
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  align-items:start !important;
  gap:9px !important;
  padding:0 !important;
}
.home-server-head > span:nth-child(2) {
  display:grid !important;
  gap:3px !important;
}
.home-server-state {
  grid-column:1 !important;
  width:max-content !important;
  max-width:100% !important;
}
.home-server-mark {
  align-self:center;
  justify-self:center;
  width:126px;
  height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(177,255,175,.15);
  border-radius:32px;
  background:linear-gradient(145deg,rgba(148,249,158,.15),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.075),0 22px 46px rgba(0,0,0,.17);
  overflow:hidden;
}
.home-server-mark > span {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  color:#caffc3;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:3.85rem;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  text-align:center;
  /* Optical correction for the asymmetric capital P glyph. */
  transform:translate(-1px,-2px);
}
.home-server-address {
  margin-top:0 !important;
}

/* Hero always stays a dark image island, even when the site theme is light. */
:root[data-theme="light"] .home-hero {
  background-image:
    linear-gradient(108deg,rgba(2,15,8,.94) 0%,rgba(5,22,13,.84) 50%,rgba(3,16,9,.82) 100%),
    url('frog-pond-bg.jpg') !important;
  border-color:rgba(202,255,204,.22) !important;
}
:root[data-theme="light"] .home-hero h1 {
  color:#ffffff !important;
  text-shadow:0 10px 32px rgba(0,0,0,.52),0 2px 7px rgba(0,0,0,.35) !important;
}
:root[data-theme="light"] .home-hero h1 span {
  color:#caffc3 !important;
  background:linear-gradient(100deg,#efffe8 0%,#bfffaa 47%,#8eeaf3 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.28));
}
:root[data-theme="light"] .home-eyebrow,
:root[data-theme="light"] .home-hero-copy > p,
:root[data-theme="light"] .home-proof b,
:root[data-theme="light"] .home-proof small {
  color:#eef9f0 !important;
}
:root[data-theme="light"] .home-hero-copy > p {
  opacity:.94 !important;
}
:root[data-theme="light"] .home-proof small {
  color:#b9cbbd !important;
}

/* The server status panel remains dark for legibility. */
:root[data-theme="light"] .home-server-card {
  color:#f5fff6 !important;
  background:linear-gradient(160deg,rgba(10,42,23,.92),rgba(4,22,12,.95)) !important;
  border-color:rgba(205,255,211,.22) !important;
  box-shadow:0 25px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06) !important;
}
:root[data-theme="light"] .home-server-head small,
:root[data-theme="light"] .home-server-address small,
:root[data-theme="light"] .home-server-metrics small {
  color:#a9c0ae !important;
}
:root[data-theme="light"] .home-server-head strong,
:root[data-theme="light"] .home-server-state b,
:root[data-theme="light"] .home-server-address .ip-text,
:root[data-theme="light"] .home-server-metrics strong {
  color:#f8fff9 !important;
}
:root[data-theme="light"] .home-server-card > p {
  color:#afc3b3 !important;
}
:root[data-theme="light"] .home-server-state,
:root[data-theme="light"] .home-server-address,
:root[data-theme="light"] .home-server-metrics > span {
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.10) !important;
}
:root[data-theme="light"] .home-server-mark {
  border-color:rgba(185,255,190,.20) !important;
  background:linear-gradient(145deg,rgba(143,244,148,.17),rgba(255,255,255,.035)) !important;
}
:root[data-theme="light"] .home-server-mark > span {
  color:#d9ffd2 !important;
}

/* Light mode lower homepage: actual bright glass, not dark cards + dark text. */
:root[data-theme="light"] .home-section-heading {
  padding:20px 22px !important;
  border:1px solid rgba(255,255,255,.68) !important;
  border-radius:22px !important;
  background:rgba(244,250,245,.86) !important;
  -webkit-backdrop-filter:blur(16px) saturate(112%) !important;
  backdrop-filter:blur(16px) saturate(112%) !important;
  box-shadow:0 18px 42px rgba(22,55,32,.12),inset 0 1px rgba(255,255,255,.88) !important;
}
:root[data-theme="light"] .home-section-kicker {
  color:#2f7840 !important;
}
:root[data-theme="light"] .home-section-heading h2,
:root[data-theme="light"] .home-journey-copy h2 {
  color:#163923 !important;
  text-shadow:none !important;
}
:root[data-theme="light"] .home-section-heading > p,
:root[data-theme="light"] .home-journey-copy > p {
  color:#4b6654 !important;
}

/* Per-card light surfaces override the dark V32 feature backgrounds. */
:root[data-theme="light"] .home-feature-card {
  border-color:rgba(62,112,72,.16) !important;
  background:linear-gradient(145deg,rgba(242,251,244,.94),rgba(222,240,226,.91)) !important;
  box-shadow:0 18px 42px rgba(21,54,31,.13),inset 0 1px rgba(255,255,255,.90) !important;
}
:root[data-theme="light"] .home-feature-card.feature-story {
  background:linear-gradient(145deg,rgba(255,244,249,.95),rgba(242,225,235,.92)) !important;
}
:root[data-theme="light"] .home-feature-card.feature-tarot {
  background:linear-gradient(145deg,rgba(248,244,255,.95),rgba(230,224,244,.92)) !important;
}
:root[data-theme="light"] .home-feature-card.feature-gift {
  background:linear-gradient(145deg,rgba(255,251,235,.96),rgba(242,233,199,.92)) !important;
}
:root[data-theme="light"] .home-feature-card h3 {
  color:#173b25 !important;
  text-shadow:none !important;
}
:root[data-theme="light"] .home-feature-card p {
  color:#4d6856 !important;
  opacity:1 !important;
}
:root[data-theme="light"] .home-feature-badge {
  color:#3f6348 !important;
  border-color:rgba(53,102,64,.14) !important;
  background:rgba(255,255,255,.46) !important;
}
:root[data-theme="light"] .home-feature-icon {
  color:#245f37 !important;
  border-color:rgba(55,111,67,.20) !important;
  background:rgba(255,255,255,.52) !important;
}
:root[data-theme="light"] .feature-story .home-feature-icon,
:root[data-theme="light"] .feature-story .home-feature-link { color:#8a3d63 !important; }
:root[data-theme="light"] .feature-tarot .home-feature-icon,
:root[data-theme="light"] .feature-tarot .home-feature-link { color:#65449a !important; }
:root[data-theme="light"] .feature-gift .home-feature-icon,
:root[data-theme="light"] .feature-gift .home-feature-link { color:#866717 !important; }
:root[data-theme="light"] .feature-shop .home-feature-link { color:#276f3c !important; }

/* Journey block gets the same readable light treatment. */
:root[data-theme="light"] .home-journey-panel {
  border-color:rgba(57,108,69,.15) !important;
  background:linear-gradient(118deg,rgba(239,249,241,.95),rgba(222,239,226,.92)) !important;
  box-shadow:0 20px 48px rgba(20,53,30,.13),inset 0 1px rgba(255,255,255,.90) !important;
}
:root[data-theme="light"] .home-step-list article {
  border-color:rgba(55,105,65,.13) !important;
  background:rgba(255,255,255,.60) !important;
}
:root[data-theme="light"] .home-step-list strong {
  color:#183c26 !important;
}
:root[data-theme="light"] .home-step-list small {
  color:#56705e !important;
}
:root[data-theme="light"] .home-step-list article > b {
  color:#174b2a !important;
  background:linear-gradient(145deg,#bdf3bf,#8fdda0) !important;
}

@media (max-width:640px) {
  .home-server-card {
    grid-template-rows:auto minmax(104px,1fr) auto auto auto !important;
  }
  .home-server-mark {
    width:108px;
    height:108px;
    border-radius:27px;
  }
  .home-server-mark > span {
    font-size:3.35rem;
  }
  :root[data-theme="light"] .home-section-heading {
    padding:17px 16px !important;
    border-radius:18px !important;
  }
}


/* =========================================================
   V38 SERVER CARD + MOTION POLISH
   ========================================================= */
.home-server-card {
  position:relative !important; min-height:0 !important; padding:22px !important;
  display:grid !important; grid-template-rows:auto auto auto auto !important; gap:13px !important;
  align-self:center !important; overflow:hidden !important; border-radius:26px !important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease !important;
}
.home-server-card:hover { transform:translateY(-4px) !important; border-color:rgba(188,255,195,.25) !important; box-shadow:0 32px 72px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.07) !important; }
.home-server-card::after { content:"" !important; position:absolute !important; inset:-45% auto auto -15% !important; width:72% !important; aspect-ratio:1 !important; border-radius:50% !important; background:radial-gradient(circle,rgba(122,239,142,.12),transparent 67%) !important; pointer-events:none !important; transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease !important; }
.home-server-card:hover::after { transform:translate(20px,14px) scale(1.08) !important; }
.home-server-top { position:relative; z-index:2; display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:14px; }
.home-server-mark { width:68px !important; height:68px !important; justify-self:start !important; align-self:center !important; border-radius:20px !important; background:linear-gradient(145deg,rgba(154,252,162,.17),rgba(255,255,255,.025)) !important; box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 32px rgba(0,0,0,.17) !important; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease !important; }
.home-server-card:hover .home-server-mark { transform:translateY(-2px) rotate(-2deg) !important; box-shadow:inset 0 1px rgba(255,255,255,.10),0 17px 36px rgba(0,0,0,.23),0 0 30px rgba(115,234,136,.08) !important; }
.home-server-mark > span { font-size:2.2rem !important; line-height:1 !important; transform:none !important; letter-spacing:-.045em !important; font-weight:900 !important; }
.home-server-identity { min-width:0; display:grid; gap:4px; }
.home-server-identity > small { color:#90a897 !important; font-size:.60rem !important; font-weight:850 !important; letter-spacing:.09em !important; text-transform:uppercase !important; }
.home-server-identity > strong { color:#f7fff8 !important; font-size:1rem !important; line-height:1.25 !important; letter-spacing:-.025em !important; }
.home-server-identity > strong span { color:#a9efab !important; }
.home-server-state { grid-column:auto !important; margin-top:4px !important; padding:7px 10px !important; gap:8px !important; width:max-content !important; max-width:100% !important; border-radius:999px !important; background:rgba(255,255,255,.045) !important; }
.home-server-state i.is-online { animation:prime-online-pulse 2.2s ease-in-out infinite; }
@keyframes prime-online-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(134,239,120,.12),0 0 10px rgba(134,239,120,.52)} 50%{box-shadow:0 0 0 5px rgba(134,239,120,0),0 0 16px rgba(134,239,120,.72)} }
.home-server-address { position:relative; z-index:2; padding:14px 15px !important; min-height:78px !important; border-radius:17px !important; transition:background .28s ease,border-color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1) !important; }
.home-server-address:hover { transform:translateY(-1px); border-color:rgba(204,255,211,.16) !important; background:rgba(255,255,255,.052) !important; }
.home-server-address .ip-text { font-size:clamp(1.22rem,2vw,1.62rem) !important; line-height:1.1 !important; }
.home-mini-copy { flex:0 0 auto; width:41px !important; height:41px !important; transition:transform .24s cubic-bezier(.2,.8,.2,1),background .24s ease,border-color .24s ease !important; }
.home-mini-copy:hover { transform:translateY(-2px) scale(1.04) !important; }
.home-mini-copy:active { transform:scale(.94) !important; }
.home-server-metrics { position:relative; z-index:2; gap:10px !important; }
.home-server-metrics > span { min-height:64px; padding:12px 13px !important; border-radius:15px !important; transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease !important; }
.home-server-metrics > span:hover { transform:translateY(-2px); background:rgba(255,255,255,.050) !important; }
.home-server-card > p { position:relative; z-index:2; margin:1px 2px 0 !important; display:flex; align-items:center; gap:7px; }
.home-server-card > p::before { content:""; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#73d58a; box-shadow:0 0 10px rgba(115,213,138,.52); }
@media (max-width:900px){ .home-server-card{max-width:520px !important;width:100% !important;justify-self:center !important;padding:20px !important;} }
@media (max-width:640px){ .home-server-top{grid-template-columns:58px minmax(0,1fr);gap:12px}.home-server-mark{width:58px !important;height:58px !important;border-radius:17px !important}.home-server-mark>span{font-size:1.9rem !important}.home-server-card{padding:17px !important;gap:11px !important;border-radius:22px !important}.home-server-address{min-height:72px !important;padding:12px 13px !important} }
@media (prefers-reduced-motion:reduce){ .home-server-card,.home-server-mark,.home-server-address,.home-mini-copy,.home-server-metrics>span{transition:none !important}.home-server-state i.is-online{animation:none !important} }
:root[data-theme="light"] .home-server-card { background:linear-gradient(158deg,rgba(8,40,21,.94),rgba(3,19,10,.97)) !important; border-color:rgba(182,236,190,.20) !important; }
:root[data-theme="light"] .home-server-identity>small{color:#a5baaa !important}
:root[data-theme="light"] .home-server-identity>strong{color:#fbfffb !important}
:root[data-theme="light"] .home-server-identity>strong span{color:#baf2b8 !important}
:root[data-theme="light"] .home-server-state b,:root[data-theme="light"] .home-server-address .ip-text,:root[data-theme="light"] .home-server-metrics strong{color:#f9fff9 !important}


/* =====================================================================
   V39 PRIME VIP SYNC — premium motion, discover mega-menu, homepage depth
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:prime-v39-old .16s ease both; }
::view-transition-new(root) { animation:prime-v39-new .28s cubic-bezier(.16,.84,.2,1) both; }
@keyframes prime-v39-old { to { opacity:.76; filter:saturate(.96); } }
@keyframes prime-v39-new { from { opacity:.55; transform:translateY(5px); } to { opacity:1; transform:none; } }

.prime-route-progress {
  position:fixed; z-index:200000; left:0; top:0; height:2px; width:0;
  pointer-events:none; opacity:0;
  background:linear-gradient(90deg,#74ec93,#90f2d9 58%,#d8ff8d);
  box-shadow:0 0 16px rgba(116,236,147,.45);
  transition:width .42s cubic-bezier(.2,.75,.2,1),opacity .16s ease;
}
.prime-route-progress.is-active { width:72%; opacity:1; }
.prime-route-progress.is-done { width:100%; opacity:0; transition:width .16s ease,opacity .24s ease .08s; }

/* Route changes no longer dim the whole page: instant navigation feels faster. */
body.prime-route-leaving-fast > main,
body.prime-route-leaving-fast > .container,
body.prime-route-leaving-fast > .site-footer {
  opacity:.985 !important; transform:translate3d(0,1px,0) !important;
  transition:opacity .10s ease,transform .10s ease !important;
  pointer-events:none;
}
body.prime-route-entering > main,
body.prime-route-entering > .container { animation-duration:.27s !important; }
body.prime-route-entering > .site-footer { animation-duration:.24s !important; }
body.prime-route-entering .prime-route-veil { animation-duration:.30s !important; }

/* More premium nav glass without expensive continuous filters. */
.cozy-nav {
  box-shadow:0 18px 58px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.07) !important;
  transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s cubic-bezier(.2,.8,.2,1) !important;
}
.cozy-nav.is-scrolled { box-shadow:0 16px 42px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.055) !important; }

/* Explore becomes a real compact mega menu. */
.prime-tools-menu.prime-tools-mega {
  width:480px !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:11px !important;
  transform:translate(-50%,-8px) scale(.985) !important;
  transform-origin:50% 0;
  transition:opacity .18s ease,transform .24s cubic-bezier(.16,.84,.2,1),visibility 0s linear .24s !important;
  overflow:hidden;
}
.prime-tools-menu.prime-tools-mega::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--vip-x,25%) var(--vip-y,10%),rgba(134,239,172,.11),transparent 35%);
}
.prime-tools.is-open .prime-tools-menu.prime-tools-mega { transform:translate(-50%,0) scale(1) !important; }
@media (hover:hover) and (min-width:901px) {
  .prime-tools:hover .prime-tools-menu.prime-tools-mega { transform:translate(-50%,0) scale(1) !important; }
}
.prime-tools-heading { grid-column:1/-1; display:flex !important; align-items:flex-end; justify-content:space-between; gap:14px; padding:8px 9px 11px !important; }
.prime-tools-heading > span { display:grid; gap:2px; }
.prime-tools-heading b { color:#f3fff4; font-size:.73rem; letter-spacing:.10em; text-transform:uppercase; }
.prime-tools-heading em { color:#839b89; font-size:.62rem; font-style:normal; font-weight:700; letter-spacing:0; text-transform:none; }
.prime-tools-heading small { white-space:nowrap; }
.prime-tools-menu .prime-tool-card {
  position:relative; min-height:78px !important; padding:11px 12px !important;
  border:1px solid rgba(207,255,213,.07) !important;
  background:rgba(255,255,255,.025) !important;
  transition:transform .22s cubic-bezier(.16,.84,.2,1),border-color .20s ease,background .20s ease,box-shadow .22s ease !important;
}
.prime-tools-menu .prime-tool-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 45%);
  transition:opacity .20s ease;
}
.prime-tools-menu .prime-tool-card:hover { transform:translateY(-2px) !important; border-color:rgba(150,239,163,.18) !important; background:rgba(119,225,139,.055) !important; box-shadow:0 12px 25px rgba(0,0,0,.18) !important; }
.prime-tools-menu .prime-tool-card:hover::after { opacity:1; }
.prime-tools-menu .prime-tool-card.is-featured { grid-column:1/-1; min-height:104px !important; grid-template-columns:50px minmax(0,1fr) auto !important; background:linear-gradient(135deg,rgba(104,47,77,.34),rgba(57,36,76,.28)) !important; border-color:rgba(245,166,197,.14) !important; }
.prime-tools-menu .prime-tool-card.is-featured:hover { border-color:rgba(245,166,197,.28) !important; box-shadow:0 15px 34px rgba(52,19,39,.24) !important; }
.prime-tools-menu .prime-tool-icon { display:grid; place-items:center; color:#d8ffcf; font-size:.86rem !important; font-weight:950; background:rgba(117,232,139,.08) !important; border:1px solid rgba(167,247,177,.14) !important; }
.prime-tool-story .prime-tool-icon { color:#ffd4e4 !important; background:rgba(242,165,192,.10) !important; border-color:rgba(242,165,192,.18) !important; }
.prime-tool-tarot .prime-tool-icon { color:#dfd0ff !important; background:rgba(190,161,238,.10) !important; border-color:rgba(190,161,238,.18) !important; }
.prime-tool-gift .prime-tool-icon { color:#ffe79b !important; background:rgba(246,214,114,.09) !important; border-color:rgba(246,214,114,.17) !important; }
.prime-tool-kicker { color:#f3a9c5; font-size:.52rem; font-weight:900; letter-spacing:.12em; }
.prime-tool-arrow { transition:transform .22s cubic-bezier(.16,.84,.2,1),opacity .2s ease; opacity:.72; }
.prime-tool-card:hover .prime-tool-arrow { transform:translate(2px,-1px); opacity:1; }

/* Homepage gets the same level of motion/detail as TruyenVN. */
.home-hero { --vip-x:22%; --vip-y:18%; }
.home-hero::before {
  background:
    radial-gradient(circle at var(--vip-x) var(--vip-y),rgba(159,255,169,.16),transparent 25rem),
    linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px) !important;
  transition:background-position .12s linear;
}
.home-eyebrow { box-shadow:inset 0 1px rgba(255,255,255,.055),0 8px 22px rgba(0,0,0,.12); }
.home-hero h1 { text-wrap:balance; }
.home-hero-actions .btn-cozy { position:relative; overflow:hidden; }
.home-hero-actions .btn-cozy::after {
  content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28) 45%,transparent 70%);
  transform:translateX(-90%); transition:opacity .2s ease;
}
.home-hero-actions .btn-cozy:hover::after { opacity:.8; animation:prime-v39-sheen .7s ease both; }
@keyframes prime-v39-sheen { to { transform:translateX(90%); } }

.home-feature-card {
  position:relative; isolation:isolate;
  transition:transform .28s cubic-bezier(.16,.84,.2,1),border-color .24s ease,box-shadow .28s ease !important;
}
.home-feature-card::after {
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.7;
  background:radial-gradient(circle at var(--vip-x,18%) var(--vip-y,10%),color-mix(in srgb,var(--feature-accent) 12%,transparent),transparent 34%);
}
.home-feature-card:hover { transform:translateY(-6px) scale(1.008) !important; }
.home-feature-icon { transition:transform .30s cubic-bezier(.16,.84,.2,1),box-shadow .26s ease !important; }
.home-feature-card:hover .home-feature-icon { transform:translateY(-2px) rotate(-2deg); box-shadow:0 12px 26px color-mix(in srgb,var(--feature-accent) 13%,transparent); }
.home-feature-link b { display:inline-block; transition:transform .22s ease; }
.home-feature-card:hover .home-feature-link b { transform:translateX(4px); }
.home-journey-panel { position:relative; overflow:hidden; }
.home-journey-panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--vip-x,78%) var(--vip-y,20%),rgba(126,240,156,.09),transparent 30%); }

/* Better reveal: smaller distance + faster duration = premium, not floaty/laggy. */
.motion-reveal-v4 { transform:translate3d(0,6px,0) !important; transition-duration:.27s,.31s !important; }
.motion-reveal-v4.is-visible { transform:translate3d(0,0,0) !important; }

/* Server status: checking state is visible immediately and subtle. */
.home-server-state i.is-checking { background:#b6c7bb; animation:prime-v39-check 1s ease-in-out infinite; }
@keyframes prime-v39-check { 50% { opacity:.38; transform:scale(.78); } }

:root[data-theme="light"] .prime-tools-menu.prime-tools-mega { background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(241,249,243,.99)) !important; }
:root[data-theme="light"] .prime-tools-heading b { color:#173a25; }
:root[data-theme="light"] .prime-tools-heading em { color:#67806e; }
:root[data-theme="light"] .prime-tools-menu .prime-tool-card { border-color:rgba(34,87,51,.08) !important; background:rgba(28,83,46,.025) !important; }
:root[data-theme="light"] .prime-tools-menu .prime-tool-card.is-featured { background:linear-gradient(135deg,rgba(255,238,245,.96),rgba(245,238,255,.96)) !important; border-color:rgba(157,76,112,.12) !important; }

@media(max-width:900px) {
  .prime-tools-menu.prime-tools-mega { width:auto !important; grid-template-columns:1fr !important; transform:none !important; }
  .prime-tools-menu .prime-tool-card.is-featured { grid-column:auto; min-height:86px !important; }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) { animation:none !important; }
  .prime-route-progress { display:none !important; }
  .home-hero-actions .btn-cozy:hover::after { animation:none !important; }
}

/* V44 shared account avatar/frame in PrimeMC navigation */
.main-account-pill{display:inline-flex!important;align-items:center!important;gap:7px!important;min-height:38px;padding:4px 10px 4px 5px!important;border-radius:999px!important;white-space:nowrap}.main-account-avatar{position:relative;width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;overflow:visible}.main-account-avatar-base{width:25px;height:25px;border-radius:50%;object-fit:cover;object-position:center;background:rgba(255,255,255,.08);box-shadow:0 3px 10px rgba(0,0,0,.16)}.main-account-avatar.has-frame .main-account-avatar-base{width:21px;height:21px}.main-account-avatar-frame{position:absolute;inset:0;width:30px;height:30px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.main-account-pill:hover .main-account-avatar{transform:translateY(-1px)}.main-account-avatar{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
:root[data-theme="light"] .main-account-avatar-base{background:rgba(31,83,45,.07);box-shadow:0 3px 10px rgba(29,70,39,.12)}
@media(max-width:720px){.main-account-pill{padding:5px 8px!important}.main-account-avatar{width:28px;height:28px;flex-basis:28px}.main-account-avatar-frame{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.main-account-avatar{transition:none!important}}