:root {
  --bg: #050712;
  --surface: #0b1020;
  --surface2: #0f162b;
  --surface3: #131d36;
  --cyan: #35e7ff;
  --blue: #4d72ff;
  --violet: #9b5cff;
  --white: #f5f8ff;
  --muted: #8793ad;
  --line: rgba(80, 145, 255, .22);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  color: var(--white) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(73, 102, 255, .27), transparent 34%),
    radial-gradient(circle at 10% 45%, rgba(0, 225, 255, .11), transparent 26%),
    radial-gradient(circle at 95% 70%, rgba(156, 65, 255, .12), transparent 28%),
    #050712 !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0 0 2rem 0;
  overflow-x: hidden;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(80, 130, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 130, 255, .07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 95%);
}

.container {
  max-width: 820px !important;
  margin: 0 auto;
  padding: 0 1rem;
}

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

button {
  cursor: pointer;
  font-family: inherit;
}

.animated-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-item-img {
  position: absolute;
  top: 12%;
  opacity: 0.08;
  animation: floatBg var(--duration, 18s) infinite alternate ease-in-out;
  animation-delay: var(--delay, 0s);
  width: 70px;
}

@keyframes floatBg {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  100% { transform: translateY(80px) rotate(12deg) scale(1.1); }
}

.main-container {
  position: relative;
  z-index: 2;
  padding-top: 8px;
}

.lang-switcher {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  background: rgba(10, 17, 34, .9) !important;
  border: 1px solid rgba(75, 126, 220, .3) !important;
  border-radius: 40px;
  padding: 4px 10px 4px 6px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .4) !important;
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-label, .lang-select {
  color: #b5c4df !important;
  font-weight: 600;
  font-size: 0.75rem;
}

.lang-select {
  background: transparent;
  border: none;
  outline: none;
}

.page-hero {
  position: relative;
  overflow: hidden;
  margin: 28px 0 22px !important;
  padding: 42px 24px 30px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(65, 205, 255, .32) !important;
  background: linear-gradient(145deg, rgba(17, 27, 55, .97), rgba(6, 10, 22, .98)) !important;
  box-shadow: 0 25px 80px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.08), 0 0 45px rgba(58,115,255,.07) !important;
  text-align: center;
}

.page-hero:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -190px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 228, 255, .25), transparent 68%);
  pointer-events: none;
}

.hero-logo {
  position: relative;
  width: 108px !important;
  margin: 0 auto 0.8rem;
  filter: drop-shadow(0 0 14px rgba(53, 231, 255, .55)) drop-shadow(0 10px 25px rgba(75, 90, 255, .3)) !important;
}

.hero-title {
  position: relative;
  font-family: 'Luckiest Guy', cursive !important;
  letter-spacing: 1.5px !important;
  background: linear-gradient(90deg, #fff, #70eaff 45%, #a979ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important; /* <-- ADD THIS LINE */
  -webkit-text-fill-color: transparent !important;
}

.hero-sub {
  color: #a8b5ce !important;
  font-size: .95rem !important;
  margin-top: 0.25rem;
}

.social-proof {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(38, 61, 111, .28) !important;
  color: #b9c7df !important;
  border: 1px solid rgba(76, 152, 255, .28) !important;
  padding: 6px 18px;
  border-radius: 60px;
  margin-top: 12px;
  font-size: 0.85rem;
}

.dot {
  width: 8px;
  height: 8px;
  background: var(--cyan) !important;
  box-shadow: 0 0 12px var(--cyan);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.8s infinite;
}

@keyframes pulse { 0% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } }

.shop-panel {
  border-radius: 24px !important;
  overflow: hidden;
  background: rgba(9, 14, 28, .94) !important;
  border: 1px solid rgba(75, 130, 255, .26) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .58) !important;
  margin-bottom: 2.5rem;
}

.store-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px !important;
  background: linear-gradient(90deg, rgba(30, 46, 91, .58), rgba(19, 23, 48, .55)) !important;
  border-bottom: 1px solid rgba(74, 134, 255, .22) !important;
  flex-wrap: wrap;
}

.store-banner-left { display: flex; align-items: center; gap: 10px; }
.store-logo { width: 48px; height: 48px; object-fit: contain; background: #101a34 !important; border: 1px solid rgba(66, 211, 255, .3); border-radius: 16px; padding: 4px; }
.store-banner-tabs { display: flex; gap: 7px !important; }

.store-tab {
  background: #111a31 !important;
  color: #8d9bb8 !important;
  border: 1px solid rgba(90, 124, 194, .2) !important;
  border-radius: 10px !important;
  padding: 8px 15px !important;
  font-weight: 700;
  font-size: 0.8rem;
  transition: .2s ease;
}

.store-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, #2469ff, #5142d8) !important;
  border-color: #5d8bff !important;
  box-shadow: 0 0 22px rgba(70, 104, 255, .3) !important;
}

.shop-items-list {
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 11px !important;
}

.shop-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 92px !important;
  padding: 12px 14px !important;
  border-radius: 17px !important;
  background: linear-gradient(110deg, rgba(18, 28, 53, .96), rgba(10, 17, 34, .96)) !important;
  border: 1px solid rgba(79, 121, 205, .18) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 8px 25px rgba(0, 0, 0, .2) !important;
  transition: .2s ease !important;
  cursor: pointer;
}

.shop-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(65, 200, 255, .4) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .38), 0 0 25px rgba(45, 104, 255, .07) !important;
}

.shop-item-img-box {
  width: 76px !important;
  height: 76px !important;
  border-radius: 15px !important;
  background: #080e1d !important;
  border: 1px solid rgba(70, 170, 255, .28) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
}

.shop-item-info { flex: 1; min-width: 0; }
.shop-item-name { color: #f2f6ff !important; font-size: 1.05rem !important; font-weight: 700; margin-bottom: 2px; }
.shop-item-stock { color: #7888a5 !important; font-size: 0.8rem; margin-bottom: 3px; }

.shop-item-rarity {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: #1d2944 !important;
  color: #b9c8e6 !important;
}

.rarity-mythic { background: rgba(153, 75, 255, .22) !important; color: #dcbcff !important; border-color: rgba(169, 92, 255, .3) !important; }
.rarity-legendary { background: rgba(255, 164, 50, .16) !important; color: #ffd28f !important; border-color: rgba(255, 174, 68, .28) !important; }
.rarity-epic { background: rgba(61, 126, 255, .17) !important; color: #a9d0ff !important; border-color: rgba(75, 145, 255, .28) !important; }

.roblox-claim-btn {
  min-width: 88px !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #267dff, #4d45d9) !important;
  border: 1px solid rgba(116, 163, 255, .4) !important;
  box-shadow: 0 4px 0 #182d70, 0 8px 22px rgba(48, 86, 255, .2) !important;
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
}

.roblox-claim-btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 0 #182d70, 0 0 25px rgba(65, 132, 255, .25) !important;
}

.site-footer {
  text-align: center;
  padding: 2rem 0 1rem;
  color: #5e6c84 !important;
  border-top: 1px solid rgba(75, 117, 190, .13) !important;
  font-size: 0.8rem;
  margin-top: 1rem;
}

/* Modal UI */
.gen-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gen-modal.active { display: flex; }

.gen-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 14, .86) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}

.gen-box {
  position: relative;
  z-index: 10;
  max-width: 510px !important;
  width: 100%;
  border-radius: 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(160deg, #111a31, #080d1c 80%) !important;
  border: 1px solid rgba(70, 185, 255, .34) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.8), 0 0 55px rgba(54,90,255,.12) !important;
}

.gen-header {
  margin: 0 !important;
  padding: 17px 18px !important;
  background: linear-gradient(90deg, rgba(33, 64, 129, .32), rgba(100, 55, 180, .16)) !important;
  border-bottom: 1px solid rgba(75, 139, 255, .2) !important;
  display: flex;
  align-items: center;
}

.gen-logo-row { display: flex; align-items: center; gap: 10px; }
.gen-logo-img { width: 44px; height: 44px; background: #0a1225 !important; border: 1px solid rgba(53, 231, 255, .25) !important; border-radius: 16px; padding: 4px; }
.gen-label { color: #f2f6ff !important; font-size: 1.05rem !important; font-weight: 800; }

.gen-screen { display: none; padding: 20px !important; }
.gen-screen.active { display: block; }

.gen-item-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #152341, #0d162b) !important;
  border: 1px solid rgba(80, 142, 255, .23) !important;
  margin-bottom: 1.2rem;
}

.gen-item-thumb { width: 56px; height: 56px; object-fit: contain; background: #080f20 !important; border-radius: 16px; padding: 6px; }
.gen-item-name { color: #f5f8ff !important; font-weight: 700; font-size: 1.1rem; }

.gen-item-badge {
  font-size: 0.65rem;
  background: linear-gradient(90deg, #277dff, #7048db) !important;
  padding: 4px 11px !important;
  border-radius: 6px !important;
  font-weight: 700;
  display: inline-block;
  margin-top: 4px;
}

.gen-desc { color: #9caac3 !important; line-height: 1.6 !important; font-size: 0.9rem; margin-bottom: 1rem; }

.gen-input-wrap {
  display: flex;
  align-items: center;
  background: #070d1a !important;
  border: 1px solid rgba(84, 139, 220, .25) !important;
  border-radius: 12px !important;
  padding: 0 16px;
  margin-bottom: 1rem;
}

.gen-input-wrap:focus-within {
  border-color: rgba(53, 231, 255, .55) !important;
  box-shadow: 0 0 0 4px rgba(53, 231, 255, .06) !important;
}

.gen-input {
  background: transparent;
  border: none;
  padding: 14px 0;
  width: 100%;
  color: #fff !important;
  font-size: 1rem;
  outline: none;
}

.gen-input::placeholder { color: #53617b !important; }
.gen-error-msg { color: #f7a1a1; font-size: 0.8rem; min-height: 1.4rem; margin-bottom: 0.6rem; }

.gen-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #267eff, #5148dc) !important;
  border: 1px solid rgba(119, 165, 255, .3) !important;
  border-radius: 12px !important;
  padding: 15px !important;
  box-shadow: 0 5px 0 #192b6a, 0 10px 28px rgba(50, 91, 255, .2) !important;
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
}

.gen-security-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #65758f !important;
  margin-top: 12px;
  justify-content: center;
}

.gen-security-dot {
  width: 6px;
  height: 6px;
  background: #5cb85c;
  border-radius: 50%;
  display: inline-block;
}

.gen-progress-header { text-align: center; margin-bottom: 1.2rem; }

.avatar-scanner-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #0d1730 !important;
  border: 1px solid rgba(53, 231, 255, .4) !important;
  box-shadow: 0 0 30px rgba(53, 231, 255, .08);
  overflow: hidden;
}

.scanner-avatar-img { width: 100%; height: 100%; object-fit: cover; }

.scanner-laser {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, transparent, #35e7ff, transparent) !important;
  box-shadow: 0 0 15px #35e7ff;
  animation: scan 2s infinite linear;
}

@keyframes scan { 0% { bottom: 0; opacity: 0.3; } 50% { bottom: 80%; opacity: 1; } 100% { bottom: 0; opacity: 0.3; } }

.gen-progress-label { font-weight: 600; color: #c8d4e9 !important; }

.gen-steps { display: flex; flex-direction: column; gap: 8px; margin: 1rem 0; }

.gen-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(22, 34, 62, .62) !important;
  border: 1px solid rgba(77, 124, 205, .13) !important;
  border-left: 3px solid #263b66 !important;
  padding: 8px 14px;
  border-radius: 40px;
}

.gen-step-icon {
  width: 28px;
  height: 28px;
  background: #172746 !important;
  color: #9db9e8 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
}

.gen-step-title { font-weight: 600; font-size: 0.9rem; }
.gen-step-sub { font-size: 0.7rem; color: #657794 !important; }

.gen-progress-bar-wrap {
  height: 7px !important;
  background: #070e1d !important;
  border-radius: 20px;
  overflow: hidden;
  margin: 10px 0 6px;
}

.gen-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #35e7ff, #4d72ff, #9b5cff) !important;
  box-shadow: 0 0 12px rgba(53, 150, 255, .45);
  border-radius: 20px;
  transition: width 0.3s;
}

/* API Offer List UI */
.api-offers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.api-offer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(110deg, rgba(18, 28, 53, .96), rgba(10, 17, 34, .96));
  border: 1px solid rgba(79, 121, 205, .18);
  border-radius: 16px;
  padding: 12px;
  text-decoration: none;
  transition: .2s ease;
}

.api-offer-item:hover {
  transform: translateY(-2px);
  border-color: rgba(65, 200, 255, .4);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .38), 0 0 20px rgba(45, 104, 255, .1);
}

.api-offer-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(70, 170, 255, .28);
}

.api-offer-details { flex: 1; text-align: left; }
.api-offer-title { color: #f2f6ff; font-size: 1rem; margin: 0 0 4px 0; font-weight: 700; }
.api-offer-desc { color: #8793ad; font-size: 0.75rem; margin: 0; line-height: 1.3; }

.api-offer-btn {
  background: linear-gradient(135deg, #267dff, #4d45d9);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: bold;
  border: 1px solid rgba(116, 163, 255, .4);
  white-space: nowrap;
}

#captcha-container {
  min-height: 85px;
  border-radius: 15px;
  background: #080e1c !important;
  border: 1px solid rgba(77, 128, 218, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

/* Alert Box */
.alert-icon {
  color: #ff0022;
  font-size: 2.4rem;
  filter: drop-shadow(0 0 15px rgba(255, 0, 34, 0.8));
  animation: warning-beat 0.8s infinite alternate ease-in-out; 
}

@keyframes warning-beat {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 0, 34, 0.5)); }
  100% { transform: scale(1.15) rotate(-8deg); filter: drop-shadow(0 0 25px rgba(255, 0, 34, 1)); color: #ff4d66; }
}

.alert-text strong {
  color: #ff0022;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255, 0, 34, 0.8);
  display: block;
  margin-bottom: 4px;
}

@media(max-width: 480px) {
  .page-hero { margin-top: 12px !important; padding: 31px 15px 26px !important; }
  .hero-logo { width: 92px !important; }
  .shop-panel { border-radius: 21px !important; }
  .store-banner { padding: 13px !important; }
  .store-banner-tabs { width: 100%; margin-top: 9px; }
  .store-tab { flex: 1; }
  .shop-items-list { padding: 11px !important; }
  .shop-item { min-height: 88px !important; padding: 11px !important; gap: 11px !important; }
  .shop-item-img-box { width: 68px !important; height: 68px !important; }
  .shop-item-name { font-size: 1rem !important; }
  .roblox-claim-btn { min-width: 74px !important; padding: 11px 13px !important; font-size: .9rem !important; }
  .gen-box { border-radius: 21px !important; }
}