/* SQR identity: same palette as salla.sa/sqr.r1 — deep navy, chrome silver, royal purple */
:root {
  --sqr-fg: #fff;
  --sqr-btn: #ffffff;
  --sqr-btn2: #e6e9f2;
  --sqr-btn3: #b9bfcd;
  --sqr-btn2h: #f1f3f8;
  --sqr-btn3h: #cdd2de;
  --sqr-btn-text: #0b0e24;
  --sqr-a: #7a6bc4;
  --sqr-name: "SQR Store";
  --rgb-122-107-196: 122, 107, 196;
  --rgb-122-108-192: 122, 108, 192;
  --rgb-108-97-170: 108, 97, 170;
  --rgb-110-94-190: 110, 94, 190;
  --rgb-83-74-130: 83, 74, 130;
  --rgb-98-88-158: 98, 88, 158;
  --rgb-50-45-98: 50, 45, 98;
  --rgb-58-52-108: 58, 52, 108;
  --rgb-52-46-112: 52, 46, 112;
  --rgb-24-22-62: 24, 22, 62;
  --rgb-40-36-86: 40, 36, 86;
  --rgb-62-56-128: 62, 56, 128;
  --rgb-96-82-160: 96, 82, 160;
  --rgb-70-58-140: 70, 58, 140;
  --rgb-66-58-122: 66, 58, 122;
  --rgb-9-12-30: 9, 12, 30;
  --rgb-10-12-32: 10, 12, 32;
  --rgb-10-13-34: 10, 13, 34;
  --rgb-12-15-38: 12, 15, 38;
  --rgb-14-16-42: 14, 16, 42;
  --rgb-14-17-44: 14, 17, 44;
  --rgb-15-22-56: 15, 22, 56;
  --rgb-17-20-48: 17, 20, 48;
  --rgb-18-20-50: 18, 20, 50;
  --rgb-20-22-54: 20, 22, 54;
  --rgb-9-14-36: 9, 14, 36;
  --rgb-150-175-235: 150, 175, 235;
  --rgb-156-178-232: 156, 178, 232;
  --rgb-170-192-240: 170, 192, 240;
  --rgb-24-40-110: 24, 40, 110;
  --rgb-28-46-112: 28, 46, 112;
  --rgb-36-58-136: 36, 58, 136;
  --rgb-38-74-168: 38, 74, 168;
  --rgb-42-78-180: 42, 78, 180;
  --rgb-44-86-190: 44, 86, 190;
  --rgb-52-92-196: 52, 92, 196;
  --rgb-64-110-230: 64, 110, 230;
  --rgb-70-112-220: 70, 112, 220;
  --rgb-70-116-236: 70, 116, 236;
  --hex-534a82: #534a82;
  --hex-7a6bc4: #7a6bc4;
  --hex-6c61aa: #6c61aa;
  --hex-4a4278: #4a4278;
  --hex-8f86d8: #8f86d8;
  --hex-2f2a5c: #2f2a5c;
  --hex-a99cf0: #a99cf0;
  --hex-b9b0ee: #b9b0ee;
  --hex-e8e4ff: #e8e4ff;
  --hex-090c1e: #090c1e;
  --hex-070916: #070916;
  --hex-070918: #070918;
  --hex-0c0f27: #0c0f27;
  --hex-6f9bff: #6f9bff;
  --hex-9db8ff: #9db8ff;
  --hex-eef3ff: #eef3ff;
  --background: 231 54% 8%;
  --foreground: 0 0% 100%;
  --card: 232 46% 12%;
  --card-foreground: 0 0% 100%;
  --popover: 232 50% 10%;
  --popover-foreground: 0 0% 100%;
  --primary: 223 26% 88%;
  --primary-foreground: 231 54% 8%;
  --secondary: 249 27% 22%;
  --secondary-foreground: 0 0% 100%;
  --muted: 232 38% 14%;
  --muted-foreground: 224 19% 77%;
  --accent: 250 27% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 230 20% 36%;
  --input: 232 38% 16%;
  --ring: 250 45% 68%;
  --neon-cyan: 222 72% 64%;
  --neon-purple: 252 45% 62%;
  --neon-pink: 268 42% 66%;
  --neon-green: 170 35% 48%;
  --neon-orange: 25 80% 60%;
  --sidebar-background: 232 50% 10%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 223 26% 88%;
  --sidebar-primary-foreground: 231 54% 8%;
  --sidebar-accent: 232 38% 14%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 230 20% 30%;
  --sidebar-ring: 250 45% 68%;
  --sqr-text: #bac0d0;
  --sqr-frame: inset 0 0 0 3px rgba(var(--rgb-9-12-30), .55), inset 0 0 0 4px rgba(176, 182, 197, .1), inset 0 1px 0 rgba(255, 255, 255, .06);
}

html, body {
  min-height: 100%;
  color: var(--sqr-fg) !important;
  background-color: var(--hex-090c1e) !important;
  background-image: none !important;
  -webkit-font-smoothing: antialiased;
}
html { scrollbar-color: var(--hex-534a82) var(--hex-070916); }
::selection { background: rgba(var(--rgb-122-107-196), .55); color: #fff; }

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

.sqr-sky {
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% 10%, rgba(var(--rgb-62-56-128), .55), transparent 70%),
    radial-gradient(ellipse 42% 38% at 8% 26%, rgba(var(--rgb-38-74-168), .3), transparent 62%),
    radial-gradient(ellipse 44% 40% at 94% 30%, rgba(var(--rgb-96-82-160), .34), transparent 62%),
    radial-gradient(ellipse 70% 38% at 50% 96%, rgba(var(--rgb-42-78-180), .3), transparent 66%),
    linear-gradient(180deg, var(--hex-0c0f27) 0%, var(--hex-090c1e) 48%, var(--hex-070918) 100%);
}

.sqr-nebula {
  position: absolute;
  inset: -20%;
  will-change: transform, opacity;
}

.sqr-nebula.n1 {
  background:
    radial-gradient(ellipse 50% 42% at 14% 30%, rgba(var(--rgb-44-86-190), .28), transparent 60%),
    radial-gradient(ellipse 36% 44% at 30% 80%, rgba(var(--rgb-24-40-110), .3), transparent 58%);
  animation: nebula-a 42s ease-in-out infinite alternate;
}

.sqr-nebula.n2 {
  background:
    radial-gradient(ellipse 50% 46% at 86% 26%, rgba(var(--rgb-110-94-190), .32), transparent 60%),
    radial-gradient(ellipse 46% 40% at 76% 80%, rgba(var(--rgb-70-58-140), .3), transparent 58%),
    radial-gradient(ellipse 28% 28% at 62% 50%, rgba(176, 182, 197, .07), transparent 64%);
  animation: nebula-b 54s ease-in-out infinite alternate;
}

.sqr-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent),
    radial-gradient(1px 1px at 18% 42%, #d6dceb, transparent),
    radial-gradient(1.5px 1.5px at 32% 16%, #fff, transparent),
    radial-gradient(1px 1px at 41% 58%, var(--hex-b9b0ee), transparent),
    radial-gradient(2px 2px at 12% 72%, #fff, transparent),
    radial-gradient(1px 1px at 27% 88%, #c5cde4, transparent),
    radial-gradient(1px 1px at 52% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 63% 8%, #d6dceb, transparent),
    radial-gradient(1px 1px at 74% 36%, #fff, transparent),
    radial-gradient(2px 2px at 86% 18%, var(--hex-e8e4ff), transparent),
    radial-gradient(1px 1px at 92% 62%, var(--hex-b9b0ee), transparent),
    radial-gradient(1px 1px at 81% 84%, #fff, transparent);
  animation: stars-drift 22s linear infinite alternate;
  opacity: .6;
}

@keyframes nebula-a {
  from { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(6%, 5%, 0) scale(1.12); opacity: 1; }
}
@keyframes nebula-b {
  from { transform: translate3d(5%, 3%, 0) scale(1.05); opacity: .7; }
  to   { transform: translate3d(-7%, -4%, 0) scale(1.18); opacity: 1; }
}
@keyframes stars-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3%, 2%, 0); }
}

.sqr-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.sqr-haze {
  position: absolute;
  height: 22vh;
  width: 70vw;
  border-radius: 50%;
  filter: blur(46px);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 50%, rgba(176, 182, 197, .13), transparent 68%);
  animation: drift-r 90s linear infinite;
  opacity: 0;
}
.sqr-haze.h1 { top: 8%; }
.sqr-haze.h2 { top: 38%; width: 58vw; animation-duration: 110s; animation-delay: -40s; }
.sqr-haze.h3 { top: 68%; width: 64vw; animation-duration: 100s; animation-delay: -20s; }

@keyframes drift-r {
  0% { transform: translate3d(-6vw, 1vh, 0); opacity: 0; }
  10% { opacity: .42; }
  30% { opacity: .5; }
  80% { opacity: .22; }
  100% { transform: translate3d(8vw, -2vh, 0); opacity: 0; }
}

.sqr-glow,
.sqr-storm,
.sqr-bank,
.sqr-dark,
.sqr-rain,
.sqr-bolt,
.sqr-strike,
.sqr-waves,
.sqr-ribbon {
  display: none !important;
}

#root {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

.min-h-screen.bg-background,
.min-h-screen,
[class*="bg-[hsl(230"],
.builder-studio {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.builder-panel {
  background: rgba(var(--rgb-14-17-44), .5) !important;
  border-color: rgba(176, 182, 197, .18) !important;
  box-shadow: var(--sqr-frame) !important;
}

.builder-game-card {
  background: transparent !important;
}
.builder-game-image {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.builder-game-shade {
  background: linear-gradient(180deg, transparent 52%, rgba(var(--rgb-9-12-30), .55) 78%, rgba(var(--rgb-9-12-30), .85) 100%) !important;
}

.text-yellow-300,
.text-yellow-400,
.text-yellow-500,
.text-yellow-600,
.text-amber-300,
.text-amber-400,
.text-amber-500,
[class*="text-yellow"],
[class*="text-amber"],
[class*="D9AA3C"],
[class*="F5E6A8"],
[class*="B8912E"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .85));
}

[class*="fill-yellow"],
[class*="fill-amber"] { fill: #f1f3f8 !important; }

[class*="border-yellow"],
[class*="border-amber"],
[class*="D9AA3C"] {
  border-color: rgba(255, 255, 255, .62) !important;
}

.glass-card .text-emerald-400 { color: var(--hex-9db8ff) !important; }
.glass-card .bg-emerald-500\/15 {
  background: rgba(var(--rgb-64-110-230), .2) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--rgb-150-175-235), .35);
}

[class*="from-yellow"],
[class*="to-yellow"],
[class*="from-amber"],
[class*="to-orange"] {
  --tw-gradient-from: rgba(255, 255, 255, .34) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 255, 255, .08) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

#root canvas,
canvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[dir="ltr"] body { direction: ltr !important; }
html[dir="rtl"] body { direction: rtl !important; }

/* navigation */
header, nav, [class*="navbar"] {
  background: rgba(var(--rgb-9-12-30), .72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(176, 182, 197, .14) !important;
}
nav { z-index: 80 !important; }
nav.fixed {
  background: linear-gradient(180deg, rgba(var(--rgb-10-13-34), .95), rgba(var(--rgb-9-12-30), .8)) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38) !important;
}
nav.fixed::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--hex-2f2a5c), var(--hex-8f86d8) 30%, #d6dceb 50%, var(--hex-8f86d8) 70%, var(--hex-2f2a5c));
}
nav.fixed::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 220, 235, .55) 25%, rgba(214, 220, 235, .55) 75%, transparent);
}
nav.fixed img { filter: drop-shadow(0 0 10px rgba(176, 182, 197, .4)); }
nav .rounded-full.border {
  background: rgba(var(--rgb-14-17-44), .72) !important;
  border-color: rgba(176, 182, 197, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .25);
}
nav .rounded-full.border button:not([class*="D9AA3C"]) { color: var(--sqr-text) !important; }
nav .rounded-full.border button:hover {
  color: #fff !important;
  background: rgba(var(--rgb-83-74-130), .4) !important;
}
nav .rounded-full.border button.bg-white\/10,
nav .rounded-full.border button[class*="bg-[#D9AA3C]"] {
  color: #fff !important;
  background: linear-gradient(180deg, var(--hex-6c61aa), var(--hex-4a4278)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(214, 220, 235, .3), 0 6px 18px rgba(var(--rgb-83-74-130), .5);
}

/* type */
h1, h2, h2.glitch-text, .glitch-text {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  text-shadow: 0 0 30px rgba(var(--rgb-122-107-196), .35), 0 2px 16px rgba(0, 0, 0, .6) !important;
}

h2.glitch-text { position: relative; z-index: 10; }

.glitch-text::before { color: var(--hex-a99cf0) !important; -webkit-text-fill-color: var(--hex-a99cf0) !important; }
.glitch-text::after { color: var(--hex-6f9bff) !important; -webkit-text-fill-color: var(--hex-6f9bff) !important; }

.text-muted-foreground { color: rgba(186, 192, 208, .92) !important; }
.text-foreground,
.text-card-foreground { color: #fff !important; }

main .text-center > h2:first-child:not(.glitch-text):not(.flex):not(.inline-flex):not(.sr-only)::before {
  content: "";
  display: block;
  width: min(380px, 86%);
  height: 30px;
  margin: 0 auto 14px;
  background:
    url("/assets/nkzf-logo-transparent-B-VxvTDf.png") center / 30px 30px no-repeat,
    linear-gradient(90deg, transparent, rgba(214, 220, 235, .7)) left center / calc(50% - 28px) 1px no-repeat,
    linear-gradient(270deg, transparent, rgba(214, 220, 235, .7)) right center / calc(50% - 28px) 1px no-repeat;
  filter: drop-shadow(0 0 8px rgba(176, 182, 197, .35));
}

/* hero: indigo panel framed by the chrome wave */
section.min-h-\[80vh\] {
  padding-bottom: 9rem !important;
  background: radial-gradient(ellipse 58% 62% at 50% 42%, rgba(var(--rgb-52-46-112), .5), rgba(var(--rgb-24-22-62), .22) 55%, transparent 78%);
}
section.min-h-\[80vh\]::after {
  --gap: 199px;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 0 6px rgba(176, 182, 197, .35));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 12C100 12 130 22 159 55C176 75 189 90 200 90C211 90 224 75 241 55C270 22 300 12 400 12' stroke='%23eef1f7' stroke-width='2'/%3E%3Cpath d='M0 20C98 20 126 30 154 61C172 82 186 98 200 98C214 98 228 82 246 61C274 30 302 20 400 20' stroke='%239aa0b0' stroke-width='1.5'/%3E%3Cpath d='M0 28C95 28 122 38 149 68C169 90 184 106 200 106C216 106 231 90 251 68C278 38 305 28 400 28' stroke='%23d6dceb' stroke-width='2'/%3E%3C/svg%3E") center top / 400px 120px no-repeat,
    linear-gradient(90deg, transparent 2%, #eef1f7 calc(50% - 460px), #eef1f7 calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #eef1f7 calc(50% + var(--gap)), #eef1f7 calc(50% + 460px), transparent 98%) 0 11px / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 2%, #9aa0b0 calc(50% - 460px), #9aa0b0 calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #9aa0b0 calc(50% + var(--gap)), #9aa0b0 calc(50% + 460px), transparent 98%) 0 19.25px / 100% 1.5px no-repeat,
    linear-gradient(90deg, transparent 2%, #d6dceb calc(50% - 460px), #d6dceb calc(50% - var(--gap)), transparent calc(50% - var(--gap)), transparent calc(50% + var(--gap)), #d6dceb calc(50% + var(--gap)), #d6dceb calc(50% + 460px), transparent 98%) 0 27px / 100% 2px no-repeat;
}
@media (max-width: 640px) {
  section.min-h-\[80vh\] { padding-bottom: 7rem !important; }
  section.min-h-\[80vh\]::after {
    --gap: 149px;
    height: 90px;
    background-size: 300px 90px, 100% 1.5px, 100% 1.1px, 100% 1.5px;
    background-position: center top, 0 8.25px, 0 14.45px, 0 20.25px;
  }
}
section.min-h-\[80vh\] h2.glitch-text {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f7 30%, #b9bfcd 58%, #7f8597 74%, #dfe3ec 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 26px rgba(var(--rgb-122-107-196), .55)) drop-shadow(0 6px 14px rgba(0, 0, 0, .6)) !important;
  padding-bottom: .06em;
}
section.min-h-\[80vh\] .gap-5 > a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(176, 182, 197, .3);
  background: rgba(var(--rgb-14-17-44), .6);
  box-shadow: var(--sqr-frame);
  transition: all .25s ease;
}
section.min-h-\[80vh\] .gap-5 > a:hover {
  color: #fff !important;
  border-color: rgba(214, 220, 235, .7);
  background: rgba(var(--rgb-83-74-130), .55);
}

.inline-flex.rounded-full.border.border-primary\/30,
.inline-flex.rounded-full[class*="bg-[#D9AA3C]"] {
  background: linear-gradient(180deg, rgba(var(--rgb-108-97-170), .6), rgba(var(--rgb-58-52-108), .6)) !important;
  border-color: rgba(214, 220, 235, .5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 22px rgba(var(--rgb-122-107-196), .35);
}
.inline-flex.rounded-full.border.border-primary\/30 .text-primary { color: var(--sqr-btn-text) !important; }

/* buttons: chrome primary, royal-purple secondary */
.bg-primary,
button.bg-primary,
a.bg-primary {
  background: linear-gradient(180deg, var(--sqr-btn) 0%, var(--sqr-btn2) 45%, var(--sqr-btn3) 100%) !important;
  color: var(--sqr-btn-text) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: 0 0 0 1px rgba(176, 182, 197, .28), 0 10px 26px rgba(var(--rgb-83-74-130), .45), inset 0 -2px 6px rgba(var(--rgb-83-74-130), .22) !important;
}
.bg-primary:hover,
button.bg-primary:hover,
a.bg-primary:hover {
  background: linear-gradient(180deg, var(--sqr-btn) 0%, var(--sqr-btn2h) 45%, var(--sqr-btn3h) 100%) !important;
  color: var(--sqr-btn-text) !important;
  box-shadow: 0 0 0 1px rgba(214, 220, 235, .5), 0 12px 32px rgba(var(--rgb-122-107-196), .55), inset 0 -2px 6px rgba(var(--rgb-83-74-130), .18) !important;
}

button.border-primary\/50.bg-transparent,
a.border-primary\/50.bg-transparent {
  background: linear-gradient(180deg, rgba(var(--rgb-98-88-158), .62), rgba(var(--rgb-50-45-98), .62)) !important;
  border-color: rgba(214, 220, 235, .5) !important;
  color: var(--sqr-btn-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px rgba(0, 0, 0, .3);
}
button.border-primary\/50.bg-transparent:hover,
a.border-primary\/50.bg-transparent:hover {
  background: linear-gradient(180deg, rgba(var(--rgb-122-108-192), .75), rgba(var(--rgb-66-58-122), .75)) !important;
  border-color: #eef1f7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 28px rgba(var(--rgb-83-74-130), .5);
}

button.border-emerald-500\/30 {
  background: linear-gradient(180deg, rgba(var(--rgb-52-92-196), .55), rgba(var(--rgb-28-46-112), .55)) !important;
  border-color: rgba(var(--rgb-170-192-240), .5) !important;
  color: var(--hex-eef3ff) !important;
}
button.border-emerald-500\/30:hover {
  background: linear-gradient(180deg, rgba(var(--rgb-70-112-220), .7), rgba(var(--rgb-36-58-136), .7)) !important;
}

/* framed tiles, alternating purple / blue like the store categories */
.glass-card,
.script-card {
  background: linear-gradient(160deg, rgba(var(--rgb-122-107-196), .16) 0%, rgba(var(--rgb-17-20-48), .8) 45%, rgba(var(--rgb-10-13-34), .9) 100%) !important;
  border: 1px solid rgba(176, 182, 197, .28) !important;
  box-shadow: var(--sqr-frame), 0 16px 36px rgba(0, 0, 0, .32) !important;
  backdrop-filter: blur(12px);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease !important;
}
.grid > .glass-card:nth-child(even) {
  background: linear-gradient(160deg, rgba(var(--rgb-70-116-236), .16) 0%, rgba(var(--rgb-15-22-56), .8) 45%, rgba(var(--rgb-9-14-36), .9) 100%) !important;
  border-color: rgba(var(--rgb-156-178-232), .3) !important;
}
.glass-card:hover,
.script-card:hover {
  border-color: rgba(214, 220, 235, .62) !important;
  box-shadow: inset 0 0 0 3px rgba(var(--rgb-9-12-30), .55), inset 0 0 0 4px rgba(214, 220, 235, .16), inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 44px rgba(0, 0, 0, .4), 0 0 32px rgba(var(--rgb-122-107-196), .3) !important;
}
a.glass-card:hover { transform: translateY(-3px); }

.glass-card.border-2.border-primary\/50 {
  background: linear-gradient(165deg, rgba(var(--rgb-122-107-196), .34) 0%, rgba(var(--rgb-40-36-86), .82) 40%, rgba(var(--rgb-14-16-42), .92) 100%) !important;
  border: 1px solid rgba(238, 241, 247, .75) !important;
  box-shadow: inset 0 0 0 3px rgba(var(--rgb-9-12-30), .55), inset 0 0 0 4px rgba(214, 220, 235, .22), 0 0 0 1px rgba(var(--rgb-122-107-196), .35), 0 24px 54px rgba(0, 0, 0, .45), 0 0 46px rgba(var(--rgb-122-107-196), .35) !important;
}

section.border-y {
  border-color: rgba(176, 182, 197, .16) !important;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-83-74-130), .14) 50%, transparent);
}
section.border-y .grid .font-bold {
  background: linear-gradient(180deg, #ffffff 15%, #c3c8d5 70%, #8a909f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(var(--rgb-122-107-196), .4));
}

/* fields */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,
select {
  background-color: rgba(var(--rgb-9-12-30), .6) !important;
  border-color: rgba(176, 182, 197, .32) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35);
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(214, 220, 235, .85) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 3px rgba(var(--rgb-122-107-196), .38) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(186, 192, 208, .55) !important; }

/* overlays */
[role="dialog"],
[role="alertdialog"] {
  background: linear-gradient(180deg, rgba(var(--rgb-20-22-54), .97), rgba(var(--rgb-10-12-32), .98)) !important;
  border: 1px solid rgba(176, 182, 197, .3) !important;
  box-shadow: var(--sqr-frame), 0 30px 80px rgba(0, 0, 0, .6) !important;
}
[role="menu"],
[role="listbox"] {
  background: rgba(var(--rgb-12-15-38), .97) !important;
  border: 1px solid rgba(176, 182, 197, .26) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5) !important;
}
[role="tablist"] {
  background: rgba(var(--rgb-14-17-44), .7) !important;
  border: 1px solid rgba(176, 182, 197, .2);
}
[role="tab"][data-state="active"] {
  background: linear-gradient(180deg, var(--hex-6c61aa), var(--hex-4a4278)) !important;
  color: var(--sqr-btn-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px rgba(var(--rgb-83-74-130), .45) !important;
}
button[role="switch"][data-state="checked"] { background: var(--hex-6c61aa) !important; }

footer {
  background: transparent !important;
  border-top-color: transparent !important;
}
footer.relative::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 220, 235, .55) 30%, rgba(214, 220, 235, .55) 70%, transparent);
}
footer img { opacity: .9 !important; filter: drop-shadow(0 0 10px rgba(176, 182, 197, .35)); }

button.fixed.rounded-full.bg-primary {
  box-shadow: 0 0 0 4px rgba(var(--rgb-83-74-130), .35), 0 12px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(var(--rgb-122-107-196), .5) !important;
}
div.fixed.rounded-2xl.border.backdrop-blur-xl {
  background: linear-gradient(180deg, rgba(var(--rgb-18-20-50), .97), rgba(var(--rgb-9-12-30), .98)) !important;
  border-color: rgba(176, 182, 197, .3) !important;
  box-shadow: var(--sqr-frame), 0 30px 70px rgba(0, 0, 0, .6) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sqr-haze, .sqr-nebula, .sqr-stars { animation: none !important; }
}

/* VIP / login card */
.min-h-screen.flex.items-center .max-w-md > .relative.rounded-3xl {
  background: linear-gradient(165deg, rgba(var(--rgb-122-107-196), .22) 0%, rgba(var(--rgb-18-20-50), .88) 45%, rgba(var(--rgb-10-12-32), .94) 100%) !important;
  border: 1px solid rgba(214, 220, 235, .4) !important;
  box-shadow: var(--sqr-frame), 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(var(--rgb-83-74-130), .3) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px);
}
.min-h-screen.flex.items-center .max-w-md .rounded-3xl > .absolute,
.min-h-screen.flex.items-center .max-w-md .h-\[2px\] {
  display: none !important;
}
.min-h-screen.flex.items-center .max-w-md h1 {
  font-size: clamp(2.75rem, 7vw, 4.75rem) !important;
  letter-spacing: -0.045em !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f7 30%, #b9bfcd 62%, #dfe3ec 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 22px rgba(var(--rgb-122-107-196), .5)) !important;
}
.min-h-screen.flex.items-center .max-w-md .w-20 {
  border-radius: 999px !important;
  background: rgba(var(--rgb-83-74-130), .35) !important;
  border: 1px solid rgba(214, 220, 235, .45) !important;
  box-shadow: 0 0 24px rgba(var(--rgb-122-107-196), .4) !important;
}
.min-h-screen.flex.items-center .max-w-md button {
  border-radius: 999px !important;
  background-image: none !important;
}
.min-h-screen.flex.items-center .max-w-md button[style*="88, 101, 242"] {
  background: linear-gradient(180deg, var(--sqr-btn) 0%, var(--sqr-btn2) 45%, var(--sqr-btn3) 100%) !important;
  color: var(--sqr-btn-text) !important;
  box-shadow: 0 10px 26px rgba(var(--rgb-83-74-130), .45) !important;
}
.min-h-screen.flex.items-center .max-w-md button[style*="34, 197, 94"] {
  background: linear-gradient(180deg, rgba(var(--rgb-98-88-158), .62), rgba(var(--rgb-50-45-98), .62)) !important;
  color: #fff !important;
  border: 1px solid rgba(214, 220, 235, .5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 22px rgba(0, 0, 0, .3) !important;
}

/* language flags */
button[aria-label="language"] img,
button[aria-label="ar"] img,
button[aria-label="en"] img,
button[aria-label="es"] img,
button[aria-label="pt"] img,
button[aria-label="fr"] img,
button[aria-label="de"] img,
button[aria-label="tr"] img,
button[aria-label="ru"] img,
button[aria-label="id"] img,
button[aria-label="zh"] img {
  opacity: 0 !important;
}
button[aria-label="language"] {
  width: 34px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(214, 220, 235, .5) !important;
  background-size: cover !important;
  box-shadow: 0 0 12px rgba(var(--rgb-122-107-196), .35);
}
button[aria-label="language"] + div {
  background: rgba(var(--rgb-12-15-38), .94) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(176, 182, 197, .26) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  gap: 8px !important;
  box-shadow: var(--sqr-frame), 0 18px 46px rgba(0, 0, 0, .5) !important;
  left: auto !important;
  right: 0 !important;
}
html[dir="rtl"] button[aria-label="language"] + div {
  left: 0 !important;
  right: auto !important;
}
button[aria-label="ar"],
button[aria-label="en"],
button[aria-label="es"],
button[aria-label="pt"],
button[aria-label="fr"],
button[aria-label="de"],
button[aria-label="tr"],
button[aria-label="ru"],
button[aria-label="id"],
button[aria-label="zh"] {
  width: 36px !important;
  height: 26px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(176, 182, 197, .2) !important;
  background-color: transparent !important;
  background-size: cover !important;
}
button[aria-label="ar"]:hover,
button[aria-label="en"]:hover,
button[aria-label="es"]:hover,
button[aria-label="pt"]:hover,
button[aria-label="fr"]:hover,
button[aria-label="de"]:hover,
button[aria-label="tr"]:hover,
button[aria-label="ru"]:hover,
button[aria-label="id"]:hover,
button[aria-label="zh"]:hover,
button[class*="bg-white/15"] {
  border-color: #fff !important;
}
button[aria-label="language"],
button[aria-label="ar"],
button[aria-label="en"],
button[aria-label="es"],
button[aria-label="pt"],
button[aria-label="fr"],
button[aria-label="de"],
button[aria-label="tr"],
button[aria-label="ru"],
button[aria-label="id"],
button[aria-label="zh"] {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
html[lang="ar"] button[aria-label="language"],
button[aria-label="ar"] { background-image: url("/flags/sa.png") !important; }
html[lang="en"] button[aria-label="language"],
button[aria-label="en"] { background-image: url("/flags/gb.png") !important; }
html[lang="es"] button[aria-label="language"],
button[aria-label="es"] { background-image: url("/flags/es.png") !important; }
html[lang="pt"] button[aria-label="language"],
button[aria-label="pt"] { background-image: url("/flags/br.png") !important; }
html[lang="fr"] button[aria-label="language"],
button[aria-label="fr"] { background-image: url("/flags/fr.png") !important; }
html[lang="de"] button[aria-label="language"],
button[aria-label="de"] { background-image: url("/flags/de.png") !important; }
html[lang="tr"] button[aria-label="language"],
button[aria-label="tr"] { background-image: url("/flags/tr.png") !important; }
html[lang="ru"] button[aria-label="language"],
button[aria-label="ru"] { background-image: url("/flags/ru.png") !important; }
html[lang="id"] button[aria-label="language"],
button[aria-label="id"] { background-image: url("/flags/id.png") !important; }
html[lang="zh"] button[aria-label="language"],
button[aria-label="zh"] { background-image: url("/flags/cn.png") !important; }