/* =====================================================================
   ez-final.css — the chosen redesign (single-screen app over the black
   hole), polished and wired to the real site.
     · The home "app" (/, /games, /scripts, /#keys, /#buy) loads ONLY this
       file and runs on public/js/ez.js.
     · Every other page (product, keys, account, admin...) loads styles.css
       first, then this file: the :root tokens recolour them and the
       .e-shell layout gives them the same header, background and footer.
   All new classes are prefixed `e-` so nothing collides with styles.css.
   ===================================================================== */

@font-face {
  font-family: "Manrope"; src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --t: #f5f3ff; --t2: #a9a6c6; --t3: #7d7a9c;
  --p: #7c3cff; --b: #4f8cff; --pb: #a855f7; --c: #22d3ee; --gold: #ffcf6e; --red: #ff7a95;
  --gl: rgba(12, 10, 26, .62); --gl2: rgba(20, 18, 40, .5);
  --bd: rgba(139, 92, 246, .24); --bdh: rgba(168, 120, 255, .55);
  --grad: linear-gradient(120deg, var(--p), var(--b));
  --r: 18px;

  /* styles.css tokens, re-pointed so the existing pages match. */
  --bg: #04040a; --bg-2: #0a0916; --panel: rgba(12, 10, 26, .72); --panel-2: rgba(20, 18, 40, .7);
  --border: rgba(139, 92, 246, .24); --text: #f5f3ff; --muted: #a9a6c6;
  --accent: #7c3cff; --accent-2: #4f8cff; --radius: 18px; --maxw: 1180px;
  color-scheme: dark;
}

/* Padding inside the stated size. Without it the home app (100% tall + padding)
   ran 20px past the screen and cut the footer line in half. */
*, *::before, *::after { box-sizing: border-box; }
html { background: #04040a; }
body {
  margin: 0; color: var(--t); background: transparent;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(124, 60, 255, .45); color: #fff; }
.e-app-mode, .e-app-mode body { height: 100%; overflow: hidden; }
.e-app-mode { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
a { color: inherit; text-decoration: none; }
svg.e-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 8px; }
.e-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Background: black hole, slow drift, swirl, particles ---------- */
/* The black hole photo, drifting slowly. Only `transform` is animated (no
   filter, no blend mode) and each moving layer is promoted with will-change,
   so the GPU just slides already-drawn layers instead of repainting the page
   and re-blurring every glass panel on each frame. */
/* Space across the whole page: a seamless starfield and a dim purple haze, so
   the black hole photo (right side) fades into more space instead of a hard
   edge into black. Static: drawn once. */
.e-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background-color: #04040a;
  background-image:
    radial-gradient(1.1px 1.1px at 0px 94px, rgba(196,181,253,0.78), transparent),
    radial-gradient(1.1px 1.1px at 86px 109px, rgba(236,232,255,0.49), transparent),
    radial-gradient(1.7px 1.7px at 46px 151px, rgba(236,232,255,0.64), transparent),
    radial-gradient(1.7px 1.7px at 174px 81px, rgba(196,181,253,0.72), transparent),
    radial-gradient(1.1px 1.1px at 125px 117px, rgba(196,181,253,0.50), transparent),
    radial-gradient(1.7px 1.7px at 168px 2px, rgba(236,232,255,0.71), transparent),
    radial-gradient(1.1px 1.1px at 3px 81px, rgba(236,232,255,0.40), transparent),
    radial-gradient(1.1px 1.1px at 129px 202px, rgba(236,232,255,0.36), transparent),
    radial-gradient(1.1px 1.1px at 151px 170px, rgba(236,232,255,0.43), transparent),
    radial-gradient(1.1px 1.1px at 169px 200px, rgba(236,232,255,0.75), transparent),
    radial-gradient(1.1px 1.1px at 91px 54px, rgba(196,181,253,0.83), transparent),
    radial-gradient(1.1px 1.1px at 255px 108px, rgba(196,181,253,0.58), transparent),
    radial-gradient(1.1px 1.1px at 292px 169px, rgba(236,232,255,0.65), transparent),
    radial-gradient(1.1px 1.1px at 133px 285px, rgba(236,232,255,0.63), transparent),
    radial-gradient(1.7px 1.7px at 156px 69px, rgba(196,181,253,0.64), transparent),
    radial-gradient(1.1px 1.1px at 33px 108px, rgba(236,232,255,0.52), transparent),
    radial-gradient(1.7px 1.7px at 33px 116px, rgba(236,232,255,0.54), transparent),
    radial-gradient(1.1px 1.1px at 284px 30px, rgba(236,232,255,0.62), transparent),
    radial-gradient(1.1px 1.1px at 173px 113px, rgba(236,232,255,0.53), transparent),
    radial-gradient(1.1px 1.1px at 94px 164px, rgba(236,232,255,0.55), transparent),
    radial-gradient(1.7px 1.7px at 279px 45px, rgba(236,232,255,0.59), transparent),
    radial-gradient(1.1px 1.1px at 88px 254px, rgba(236,232,255,0.52), transparent),
    radial-gradient(1.7px 1.7px at 156px 71px, rgba(236,232,255,0.66), transparent),
    radial-gradient(1.1px 1.1px at 81px 233px, rgba(236,232,255,0.50), transparent),
    radial-gradient(1.7px 1.7px at 0px 9px, rgba(236,232,255,0.42), transparent),
    radial-gradient(1.1px 1.1px at 363px 142px, rgba(236,232,255,0.47), transparent),
    radial-gradient(1.1px 1.1px at 340px 78px, rgba(236,232,255,0.41), transparent),
    radial-gradient(1.1px 1.1px at 119px 223px, rgba(236,232,255,0.43), transparent),
    radial-gradient(1.7px 1.7px at 221px 229px, rgba(236,232,255,0.55), transparent),
    radial-gradient(1.1px 1.1px at 223px 251px, rgba(236,232,255,0.44), transparent),
    radial-gradient(1.1px 1.1px at 47px 257px, rgba(196,181,253,0.48), transparent),
    radial-gradient(1.7px 1.7px at 414px 177px, rgba(236,232,255,0.56), transparent),
    radial-gradient(1.1px 1.1px at 326px 108px, rgba(196,181,253,0.43), transparent),
    radial-gradient(1.1px 1.1px at 412px 310px, rgba(236,232,255,0.48), transparent),
    radial-gradient(1.7px 1.7px at 199px 333px, rgba(236,232,255,0.55), transparent),
    radial-gradient(1.1px 1.1px at 8px 352px, rgba(236,232,255,0.35), transparent),
    radial-gradient(1.1px 1.1px at 379px 438px, rgba(196,181,253,0.39), transparent),
    radial-gradient(1.1px 1.1px at 165px 214px, rgba(236,232,255,0.47), transparent),
    radial-gradient(1.1px 1.1px at 83px 254px, rgba(236,232,255,0.43), transparent),
    radial-gradient(ellipse 60% 55% at 8% 88%, rgba(76, 29, 149, .32), transparent 70%),
    radial-gradient(ellipse 55% 45% at 22% 10%, rgba(91, 33, 182, .22), transparent 70%),
    radial-gradient(ellipse 45% 40% at 2% 45%, rgba(56, 70, 200, .1), transparent 70%),
    radial-gradient(ellipse 35% 30% at 38% 60%, rgba(124, 60, 255, .08), transparent 70%);
  background-size: 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 211px 211px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 307px 307px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 449px 449px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.e-bg i {
  position: absolute; top: -6%; bottom: -6%; left: 22%; right: -12%;
  background: #04040a url("/img/final/blackhole.jpg") 50% 50% / cover no-repeat;
  will-change: transform; animation: e-zoom 40s ease-in-out infinite alternate;
  /* Its left edge fades out into the starfield (no straight cut). */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 12%, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 12%, #000 28%);
}
.e-bg i::after {
  content: ""; position: absolute; width: 190vmax; height: 190vmax; left: calc(50% - 95vmax); top: calc(50% - 95vmax);
  background: conic-gradient(transparent 0 6%, rgba(124, 60, 255, .14) 14%, transparent 27%, rgba(79, 140, 255, .1) 56%, transparent 72%, rgba(168, 85, 247, .09) 86%, transparent 96%);
  will-change: transform; animation: e-swirl 50s linear infinite;
}
.e-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 10, .28) 0, rgba(4, 4, 10, .32) 38%, rgba(4, 4, 10, .1) 100%),
    radial-gradient(ellipse at 62% 50%, transparent 40%, rgba(2, 2, 8, .72) 100%);
}
.e-shell-mode .e-bg::after { background: linear-gradient(180deg, rgba(4, 4, 10, .72), rgba(4, 4, 10, .88)), radial-gradient(ellipse at 62% 30%, transparent 30%, rgba(2, 2, 8, .7) 100%); }
@keyframes e-zoom { 0% { transform: scale(1.03); } 50% { transform: scale(1.09) translate(-1.2%, .8%); } 100% { transform: scale(1.05) translate(1%, -.8%); } }
@keyframes e-swirl { to { transform: rotate(360deg); } }
/* The old brightness swell, as an opacity fade (cheap) instead of a filter. */
.e-bg i::before { content: ""; position: absolute; inset: 0; background: rgba(180, 150, 255, .1); opacity: 0; will-change: opacity; animation: e-swell 40s ease-in-out infinite alternate; }
@keyframes e-swell { 50% { opacity: 1; } }
#e-pt { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Primitives ---------- */
.e-glass {
  background: var(--gl); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--bd); border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.e-hv:hover { border-color: var(--bdh); box-shadow: 0 20px 70px rgba(124, 58, 237, .25), inset 0 1px 0 rgba(255, 255, 255, .06); transform: translateY(-3px); }
.e-grad {
  background: linear-gradient(95deg, var(--pb), var(--b), var(--c), var(--b), var(--pb)); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: e-shine 9s linear infinite;
}
@keyframes e-shine { to { background-position: 200% center; } }
.e-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 13px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--t); background: none; transition: .2s;
}
.e-btn.e-sm { padding: 8px 14px; font-size: .86rem; border-radius: 11px; }
.e-btn.e-pr { background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(124, 60, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.e-btn.e-pr:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124, 60, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.e-btn.e-pr::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s; }
.e-btn.e-pr:hover::after { left: 130%; }
.e-btn.e-gh { border-color: var(--bd); background: var(--gl2); }
.e-btn.e-gh:hover { border-color: var(--bdh); }
.e-btn.e-dn { border-color: rgba(255, 122, 149, .45); background: rgba(255, 122, 149, .1); color: #ffc2cf; }
.e-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.e-tag {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t2);
  border: 1px solid var(--bd); background: var(--gl2);
}
.e-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: e-pulse 2.4s infinite; flex: none; }
@keyframes e-pulse { 50% { opacity: .35; } }
.e-bd { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 700; }
.e-bd.free { color: var(--c); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .28); }
.e-bd.premium { color: #e0c9ff; background: rgba(168, 85, 247, .2); border: 1px solid rgba(168, 85, 247, .5); }
.e-bd.owner { color: var(--gold); background: rgba(255, 207, 110, .1); border: 1px solid rgba(255, 207, 110, .35); }
.e-bd.off { color: var(--t3); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.e-lg {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; overflow: hidden;
  background: rgba(10, 8, 22, .8); border: 1px solid var(--bd); font-weight: 800; font-size: .82rem; letter-spacing: -.02em;
}
.e-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e-lg.e-l { width: 64px; height: 64px; border-radius: 17px; font-size: 1.1rem; }
.e-lg.e-s { width: 30px; height: 30px; border-radius: 9px; }
.e-lg.e-al { background: linear-gradient(135deg, rgba(124, 60, 255, .4), rgba(79, 140, 255, .2)); color: #d6c4ff; }
.e-mono {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; overflow: hidden;
  font-weight: 800; font-size: .82rem; color: #e6dcff; border: 1px solid var(--bd);
  background: linear-gradient(135deg, hsl(var(--h, 262) 80% 55% / .45), hsl(var(--h, 262) 80% 35% / .2));
}
.e-mono img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header ---------- */
.e-hd { position: relative; z-index: 30; flex: none; display: flex; align-items: center; gap: 18px; padding: 9px 12px 9px 14px; }
.e-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }
.e-ez {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: .92rem; color: #fff; background: linear-gradient(135deg, var(--p), var(--b));
  box-shadow: 0 0 22px rgba(124, 60, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .35); animation: e-ezp 4s ease-in-out infinite;
}
@keyframes e-ezp { 50% { box-shadow: 0 0 34px rgba(124, 60, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .35); } }
.e-nav { display: flex; gap: 2px; margin-left: 14px; }
.e-tab { position: relative; padding: 8px 14px; color: var(--t2); font-weight: 600; font-size: .92rem; transition: color .2s; }
.e-tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; border-radius: 2px;
  background: var(--grad); box-shadow: 0 0 10px var(--p); transform: scaleX(0); transition: transform .25s;
}
.e-tab:hover, .e-tab.on { color: var(--t); }
.e-tab.on::after { transform: scaleX(1); }
.e-au { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.e-admin {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(34, 211, 238, .32); background: rgba(34, 211, 238, .09); color: var(--c);
  font: inherit; font-size: .82rem; font-weight: 700; transition: .2s;
}
.e-admin:hover { background: rgba(34, 211, 238, .16); }
.e-admin svg.e-i { width: 15px; height: 15px; }
.e-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--bd); background: none; color: var(--t); font: inherit; font-size: .86rem; font-weight: 700; transition: .2s;
}
.e-chip:hover, .e-chip[aria-expanded="true"] { border-color: var(--bdh); }
.e-chip svg.e-i { width: 14px; height: 14px; color: var(--t2); transition: transform .2s; }
.e-chip[aria-expanded="true"] svg.e-i { transform: rotate(180deg); }
.e-av { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; color: #fff; text-transform: uppercase; background: linear-gradient(135deg, var(--pb), var(--c)); }
.e-chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The header's Admin button opens the drawer; the drawer's floating button can go. */
#ez-admin-trigger { display: none !important; }

/* Profile pop-over */
.e-pop {
  position: absolute; right: 0; top: calc(100% + 14px); width: min(320px, 92vw); padding: 0 0 16px; overflow: hidden; z-index: 40;
  background: rgba(12, 10, 26, .97); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: e-pin .25s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes e-pin { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.e-pb { height: 88px; background: radial-gradient(120% 150% at 0% 0%, rgba(124, 60, 255, .7), transparent 60%), radial-gradient(120% 150% at 100% 100%, rgba(34, 211, 238, .4), transparent 60%), linear-gradient(135deg, #1b1250, #0b1a3d); }
.e-pav {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 20px; border-radius: 22px;
  font-size: 1.7rem; font-weight: 800; color: #fff; text-transform: uppercase; border: 3px solid rgba(12, 10, 26, .95);
  box-shadow: 0 0 0 1px var(--bdh), 0 10px 30px rgba(0, 0, 0, .45);
}
.e-pn { padding: 10px 20px 0; }
.e-pn h4 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.e-pn p { margin: 0; font-size: .82rem; color: var(--t2); overflow: hidden; text-overflow: ellipsis; }
.e-tg { display: flex; gap: 6px; margin-top: 10px; }
.e-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 20px 0; }
.e-st div { padding: 10px; border-radius: 12px; background: rgba(124, 60, 255, .1); border: 1px solid rgba(139, 92, 246, .2); }
.e-st b { display: block; font-size: 1rem; }
.e-st span { font-size: .68rem; color: var(--t2); }
.e-sws { display: flex; align-items: center; gap: 8px; padding: 14px 20px 0; font-size: .76rem; color: var(--t2); }
.e-sws span { margin-right: auto; }
.e-sws button { width: 22px; height: 22px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; transition: .2s; }
.e-sws button:hover { scale: 1.12; }
.e-sws button.on { border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .35); }
.e-pac { display: flex; gap: 8px; padding: 14px 20px 0; }
.e-pac .e-btn { flex: 1; }
.e-plinks { display: flex; flex-direction: column; margin: 12px 12px 0; padding-top: 8px; border-top: 1px solid rgba(139, 92, 246, .14); }
.e-plinks a, .e-plinks button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--t2); text-align: left; transition: .2s;
}
.e-plinks a:hover, .e-plinks button:hover { color: var(--t); background: rgba(124, 60, 255, .12); }
.e-plinks .e-out:hover { color: var(--red); background: rgba(255, 122, 149, .08); }
.e-plinks form { margin: 0; }

/* ---------- App layout ---------- */
#e-app { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 12px clamp(12px, 2.5vw, 32px) 8px; }
#e-mn { flex: 1; min-height: 0; position: relative; }
.e-view { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; }
.e-view.on { display: flex; animation: e-in .35s ease both; }
.e-view.q { animation: none; }
@keyframes e-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes e-inr { from { opacity: 0; transform: translateX(26px); } }
.e-foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 0 6px; font-size: .78rem; color: var(--t2); }
.e-foot a { color: var(--t2); font-weight: 600; }
.e-foot a:hover { color: var(--t); }
.e-foot .r { margin-left: auto; display: flex; gap: 16px; }

/* Header utility links (Updates, Discord) — compact, always visible so the
   update page and the Discord are reachable from every page, not just a footer
   that mobile used to hide entirely. */
.e-util { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 9px; color: var(--t2); font-weight: 700; font-size: .9rem; border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.e-util:hover { color: var(--t); background: rgba(255, 255, 255, .05); border-color: var(--bd, #2a2a45); }
.e-util-icon { width: 36px; padding: 0; justify-content: center; }
.e-util .e-i { width: 18px; height: 18px; }
.e-util-icon .e-i { width: 21px; height: 21px; }

/* Admin Keys filter bar (see views/admin/keys.ejs + /js/admin-keys-filter.js). */
.kf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--bd, #2a2a45); border-radius: 12px; background: rgba(20, 18, 40, .4); }
.kf-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kf-search { flex: 1; min-width: 180px; height: 38px; padding: 0 12px; border-radius: 9px; background: rgba(0, 0, 0, .25); border: 1px solid var(--bd, #2a2a45); color: var(--t, #f5f3ff); font-size: .92rem; }
.kf-search:focus { outline: none; border-color: var(--bdh, #7c5cff); }
.kf-count { color: var(--t3, #7d7a9c); font-size: .82rem; font-weight: 700; }
.kf-clear { margin-left: auto; }
.kf-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kf-label { width: 92px; flex: none; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t3, #7d7a9c); }
.kf-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bd, #2a2a45); background: rgba(255, 255, 255, .03); color: var(--t2, #a9a6c6); font-size: .84rem; font-weight: 700; cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.kf-chip:hover { color: var(--t, #f5f3ff); border-color: var(--bdh, #7c5cff); }
.kf-chip.is-active { color: #fff; background: rgba(124, 60, 255, .28); border-color: var(--bdh, #7c5cff); }
.kf-empty { padding: 20px; text-align: center; }
@media (max-width: 760px) { .kf-label { width: 100%; } .kf-clear { margin-left: 0; } }

/* Home */
.e-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.e-hero > div > * { animation: e-in .65s cubic-bezier(.2, .7, .2, 1) both; }
.e-hero > div > :nth-child(2) { animation-delay: .08s; }
.e-hero > div > :nth-child(3) { animation-delay: .16s; }
.e-hero > div > :nth-child(4) { animation-delay: .24s; }
.e-h1 { font-size: clamp(2.3rem, min(5.6vw, 9vh), 5rem); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; margin: 18px 0; }
.e-sub { margin: 0; color: var(--t2); font-size: 1.05rem; max-width: 32em; }
.e-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.e-qa { justify-self: end; width: min(420px, 100%); padding: 14px; animation: e-inr .8s .25s cubic-bezier(.2, .7, .2, 1) both; }
.e-qa > span { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 10px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--t2); }
.e-qa > span em { font-style: normal; letter-spacing: 0; font-weight: 600; color: var(--c); display: inline-flex; align-items: center; gap: 6px; }
.e-qi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 13px; text-align: left; transition: .2s; }
.e-qi:hover { background: rgba(124, 60, 255, .16); box-shadow: 0 0 24px rgba(124, 60, 255, .22); translate: 3px 0; }
.e-qi h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.e-qi p { margin: 0; font-size: .8rem; color: var(--t2); }
.e-qi .go { margin-left: auto; color: var(--t2); }
.e-qi .e-rank { font-size: .72rem; font-weight: 800; color: var(--pb); width: 22px; text-align: center; flex: none; }
.e-ben { display: grid; grid-template-columns: repeat(4, 1fr); flex: none; animation: e-in .7s .45s both; }
.e-bi { display: flex; gap: 12px; padding: 14px 18px; align-items: center; }
.e-bi + .e-bi { border-left: 1px solid var(--bd); }
.e-bi svg.e-i { width: 22px; height: 22px; color: var(--pb); }
.e-bi h4 { margin: 0; font-size: .9rem; font-weight: 700; }
.e-bi p { margin: 0; font-size: .78rem; color: var(--t2); line-height: 1.35; }

/* Section heads */
.e-sh h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; }
.e-sh p { margin: 4px 0 0; color: var(--t2); }

/* Games */
.e-games { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
.e-gc { padding: 28px; display: flex; flex-direction: column; gap: 6px; min-height: min(300px, 46vh); text-align: left; cursor: pointer; color: var(--t); font: inherit; animation: e-in .6s both; animation-delay: calc(var(--i, 0) * 90ms); }
.e-gc h3 { margin: 14px 0 0; font-size: 1.45rem; font-weight: 800; }
.e-gc p { margin: 0; color: var(--t2); }
.e-gc .n { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e-gstats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.e-cnt { font-size: .85rem; font-weight: 700; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.e-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--bd); font-size: .85rem; font-weight: 700; transition: .2s; }
.e-gc:hover .e-pill { background: var(--grad); border-color: transparent; color: #fff; }
.e-games.single .e-gc { flex-direction: row; align-items: center; gap: 24px; min-height: 0; padding: 32px; }
.e-games.single .e-gc > div { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.e-games.single .e-gc h3 { margin: 0; font-size: 1.8rem; }
.e-games.single .e-gc .n { flex: none; margin: 0; padding: 0; flex-direction: column; align-items: flex-end; }
.e-games.single .e-lg.e-l { width: 96px; height: 96px; border-radius: 24px; }

/* Scripts */
.e-tb { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.e-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.e-chip2 {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 13px; border: 1px solid var(--bd); cursor: pointer;
  background: var(--gl); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: inherit; font-weight: 700; font-size: .88rem; color: var(--t2); transition: .2s;
}
.e-chip2:hover { border-color: var(--bdh); color: var(--t); }
.e-chip2.on { color: #fff; border-color: var(--bdh); background: linear-gradient(120deg, rgba(124, 60, 255, .55), rgba(79, 140, 255, .35)); box-shadow: 0 0 26px rgba(124, 60, 255, .35); }
.e-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.e-srch {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px; width: 240px; border-radius: 13px; border: 1px solid var(--bd);
  background: var(--gl); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--t2); transition: .2s;
}
.e-srch:focus-within { border-color: var(--bdh); box-shadow: 0 0 0 3px rgba(124, 60, 255, .2); }
.e-srch input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--t); font: inherit; outline: 0; }
.e-sw2 { display: flex; align-items: center; gap: 4px; height: 44px; padding: 4px; border-radius: 13px; border: 1px solid var(--bd); background: var(--gl); }
.e-sw2 button { height: 100%; padding: 0 16px; border-radius: 10px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .86rem; color: var(--t2); transition: .2s; }
.e-sw2 button.on { background: var(--grad); color: #fff; }
.e-sw2 button em { font-style: normal; font-size: .7rem; margin-left: 7px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.e-sc { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch; min-height: 0; }
.e-sc.nf { grid-template-columns: 1fr; }
.e-feat { position: relative; overflow: hidden; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
/* The pulsing glow fades a pre-drawn shadow in and out instead of repainting one. */
.e-feat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 60px rgba(124, 58, 237, .28); opacity: 0; pointer-events: none; will-change: opacity; animation: e-glow 5s ease-in-out infinite; }
@keyframes e-glow { 50% { opacity: 1; } }
.e-feat .big { position: absolute; right: 16px; top: 4px; font-size: 8rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: rgba(168, 130, 255, .09); pointer-events: none; }
.e-feat .art { position: absolute; inset: 0; opacity: .32; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 75%); mask-image: linear-gradient(180deg, #000 0, transparent 75%); }
.e-feat > :not(.big):not(.art) { position: relative; }
.e-feat h3 { margin: 14px 0 0; font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.e-feat p { margin: 4px 0 0; color: var(--t2); }
.e-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.e-lp { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 344px; }
.e-rg { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--r, 4), 62px); align-content: start; gap: 8px; }
.e-rw {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; border: 1px solid rgba(139, 92, 246, .14);
  background: rgba(20, 18, 40, .45); transition: .2s; animation: e-in .45s both; animation-delay: calc(var(--i, 0) * 45ms);
}
.e-rw:hover { border-color: var(--bdh); background: rgba(124, 60, 255, .14); translate: 2px 0; }
.e-rw > a { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.e-rw > a > div { min-width: 0; }
.e-rw h4 { margin: 0; font-size: .94rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-rw p { margin: 0; font-size: .76rem; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-rw .e-bd { margin-left: auto; }
.e-cp, .e-pgr button {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; cursor: pointer;
  border: 1px solid var(--bd); background: none; color: var(--t2); transition: .2s;
}
.e-cp:hover, .e-pgr button:hover:not(:disabled) { color: #fff; border-color: var(--bdh); background: rgba(124, 60, 255, .3); }
.e-pgr button:disabled { opacity: .35; cursor: default; }
.e-cp.locked { color: var(--t3); }
.e-pgr { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--t2); }
.e-pgr div { display: flex; align-items: center; gap: 10px; }
.e-none { margin: auto; text-align: center; color: var(--t2); padding: 40px; }
.e-none h3 { margin: 0 0 4px; color: var(--t); font-size: 1.3rem; }

/* Keys + Buy */
.e-empty { margin: auto; max-width: 460px; width: 100%; padding: 38px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.e-empty h3 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.e-empty p { margin: 0; color: var(--t2); }
.e-keys { width: min(860px, 100%); margin: 0 auto; padding: 8px 10px 12px; display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.e-keys-hd { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.e-keys-hd h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.e-keys-hd .e-btn { margin-left: auto; }
.e-klist { overflow-y: auto; min-height: 0; }
.e-kr { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 13px; }
.e-kr + .e-kr { border-top: 1px solid rgba(139, 92, 246, .12); }
.e-kr h4 { margin: 0; font-size: .96rem; font-weight: 700; }
.e-kr p { margin: 0; font-size: .8rem; color: var(--t2); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.e-kr .e-left { margin-left: auto; text-align: right; font-size: .8rem; color: var(--t2); white-space: nowrap; }
.e-kr .e-left b { display: block; color: var(--t); font-size: .9rem; }
.e-kr.dead { opacity: .5; }
.e-two { display: grid; grid-template-columns: 1fr 1.05fr; gap: 18px; align-items: stretch; min-height: 0; max-height: 100%; }
.e-list { padding: 8px 10px; display: flex; flex-direction: column; min-height: 0; }
.e-list > h3 { margin: 0; padding: 14px 14px 6px; font-size: 1.08rem; font-weight: 800; }
.e-list > p { margin: 0; padding: 0 14px 8px; font-size: .82rem; color: var(--t2); }
.e-blist { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; }
.e-br { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 13px; }
.e-br > div { min-width: 0; }
.e-br + .e-br { border-top: 1px solid rgba(139, 92, 246, .12); }
.e-br h4 { margin: 0; font-size: .96rem; font-weight: 700; }
.e-br p { margin: 0; font-size: .78rem; color: var(--t2); }
.e-br .e-btn { margin-left: auto; }
.e-cd { padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: linear-gradient(135deg, rgba(124, 60, 255, .28), rgba(79, 140, 255, .1), var(--gl)); }
.e-cd .code { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; border: 1px solid var(--bdh); background: rgba(124, 60, 255, .18); box-shadow: 0 0 44px rgba(124, 60, 255, .45); color: #d6c4ff; }
.e-cd .code svg { width: 36px; height: 36px; }
.e-cd h3 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.e-cd p { margin: 0; color: var(--t2); }
.e-cd .e-btn { align-self: flex-start; margin-top: 6px; }

/* ---------- Modal + toast ---------- */
.e-ov { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 16px; background: rgba(2, 2, 8, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.e-ov.on { display: grid; }
.e-md { position: relative; width: min(400px, 100%); padding: 28px; animation: e-in .25s ease both; background: rgba(12, 10, 26, .9); }
.e-md h3 { margin: 14px 0 4px; font-size: 1.5rem; font-weight: 800; }
.e-md > p { margin: 0; color: var(--t2); font-size: .9rem; }
.e-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 18px 0 6px; border-radius: 13px; border: 1px solid var(--bd); background: rgba(10, 8, 22, .6); }
.e-sw button { padding: 8px; border-radius: 10px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .88rem; color: var(--t2); }
.e-sw button.on { background: var(--grad); color: #fff; }
.e-fl { margin-top: 14px; }
.e-fl label { display: block; font-size: .8rem; font-weight: 700; color: var(--t2); }
.e-in { position: relative; margin-top: 6px; }
.e-in > svg.e-i { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--t2); width: 17px; height: 17px; pointer-events: none; }
.e-in input {
  width: 100%; margin: 0; padding: 12px 44px 12px 40px; border-radius: 12px; border: 1px solid var(--bd);
  background: rgba(10, 8, 22, .7); color: var(--t); font: inherit; outline: 0; box-sizing: border-box;
}
.e-in input:focus { border-color: var(--bdh); box-shadow: 0 0 0 3px rgba(124, 60, 255, .2); }
.e-in.bad input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 122, 149, .15); }
/* Multi-line box in a pop-up form (Request a script). */
.e-in-ta textarea {
  width: 100%; min-height: 96px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bd); resize: vertical;
  background: rgba(10, 8, 22, .7); color: var(--t); font: inherit; outline: 0; box-sizing: border-box;
}
.e-in-ta textarea:focus { border-color: var(--bdh); box-shadow: 0 0 0 3px rgba(124, 60, 255, .2); }
.e-in.bad textarea { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 122, 149, .15); }
.e-ey { position: absolute; right: 5px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; display: grid; place-items: center; color: var(--t2); border-radius: 9px; border: 0; background: none; cursor: pointer; }
.e-ey:hover { color: var(--t); }
.e-fe { display: block; min-height: 16px; margin-top: 4px; font-size: .76rem; color: var(--red); }
.e-er { min-height: 0; margin-top: 8px; font-size: .84rem; color: var(--red); }
.e-ok { margin-top: 8px; font-size: .86rem; color: var(--c); }
.e-md > .e-btn { width: 100%; margin-top: 10px; }
.e-nt { margin: 12px 0 0; font-size: .76rem; color: var(--t2); text-align: center; }
.e-nt a { color: var(--t); text-decoration: underline; text-underline-offset: 2px; }
.e-x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bd); background: none; color: var(--t2); cursor: pointer; transition: .2s; }
.e-x:hover { color: var(--t); border-color: var(--bdh); }
.e-toast { position: fixed; left: 50%; bottom: 44px; translate: -50% 0; z-index: 120; padding: 10px 16px; font-size: .86rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.e-toast.on { opacity: 1; }

/* ---------- Scripts grouped per script: rows, chooser, buy ---------- */
#e-ov { z-index: 110; }   /* log in can open from inside the chooser */
button.e-qi { border: 0; background: none; color: var(--t); font: inherit; cursor: pointer; }
button.e-rw { width: 100%; text-align: left; cursor: pointer; color: var(--t); font: inherit; }
.e-rw > div { flex: 1; min-width: 0; }
.e-bds { margin-left: auto; display: flex; gap: 6px; flex: none; }
.e-rw .e-cp { pointer-events: none; }
.e-rw:hover .e-cp { color: #fff; border-color: var(--bdh); background: rgba(124, 60, 255, .3); }
.e-chv {
  position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px;
  background: rgba(12, 10, 26, .92); animation: e-in .25s ease both;
}
.e-ch-hd { display: flex; align-items: center; gap: 18px; padding-right: 44px; }
.e-mono.e-big { width: 76px; height: 76px; border-radius: 20px; font-size: 1.4rem; }
.e-ch-hd h3 { margin: 10px 0 2px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.e-ch-hd p { margin: 0; color: var(--t2); }
.e-ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.e-tc { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; border: 1px solid var(--bd); background: rgba(20, 18, 40, .55); }
.e-tc.free { border-color: rgba(34, 211, 238, .3); background: linear-gradient(160deg, rgba(34, 211, 238, .1), rgba(20, 18, 40, .55) 55%); }
.e-tc.premium {
  border-color: rgba(168, 85, 247, .55); box-shadow: 0 0 44px rgba(124, 60, 255, .2);
  background: linear-gradient(160deg, rgba(124, 60, 255, .26), rgba(79, 140, 255, .08) 60%, rgba(20, 18, 40, .55));
}
.e-tc.none { border-style: dashed; opacity: .75; }
.e-tc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.e-tc-price { font-size: 1.05rem; font-weight: 800; }
.e-tc h4 { margin: 2px 0 0; font-size: 1.2rem; font-weight: 800; }
.e-tc p { margin: 0; color: var(--t2); font-size: .9rem; }
.e-tc-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.e-tc-list li { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.e-tc-list svg.e-i { width: 16px; height: 16px; color: var(--c); }
.e-tc.premium .e-tc-list svg.e-i { color: var(--pb); }
.e-tc-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.e-tc-act .e-btn { flex: 1; }
.e-btn.e-pr.e-free { background: linear-gradient(120deg, #0ea5b7, var(--b)); box-shadow: 0 8px 26px rgba(34, 211, 238, .28), inset 0 1px 0 rgba(255, 255, 255, .25); }
.e-tc-more { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--t2); }
.e-tc-more:hover { color: var(--t); }
.e-tc-more svg.e-i { width: 15px; height: 15px; }
.e-br-name { border: 0; background: none; padding: 0; font: inherit; font-size: .96rem; font-weight: 700; color: var(--t); cursor: pointer; text-align: left; }
.e-br-name:hover { color: #d6c4ff; text-decoration: underline; text-underline-offset: 3px; }
.e-br-act { margin-left: auto; display: flex; gap: 8px; flex: none; }
.e-br-act .e-btn { margin-left: 0; }

/* The product page's Free | Premium switch */
.ez-tierswitch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 13px; border: 1px solid var(--bd); background: var(--gl); }
.ez-tierswitch a { padding: 7px 18px; border-radius: 10px; font-size: .88rem; font-weight: 700; color: var(--t2); transition: .2s; }
.ez-tierswitch a:hover { color: var(--t); }
.ez-tierswitch a.is-on { color: #fff; background: var(--grad); }
.ez-tierswitch a.is-on.free { background: linear-gradient(120deg, #0ea5b7, var(--b)); }
.ez-price small { font-size: .8rem; font-weight: 600; color: var(--t2); }

/* ---------- Every other page: scrolling shell ---------- */
.e-shell { min-height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 12px clamp(12px, 2.5vw, 32px) 10px; }
.e-shell > .e-hd { position: sticky; top: 12px; }
.e-shell > .main { flex: 1; }
.e-shell > .e-foot { padding: 14px 6px 4px; }
.flash { max-width: var(--maxw); margin: 6px auto 0; border-radius: 13px; font-size: .9rem; }
.page-head { background: transparent; border: 0; padding-top: 36px; }
.page-head-inner, .container { max-width: var(--maxw); }
.page-head h1 { letter-spacing: -.03em; font-weight: 800; }
.btn { font-family: inherit; border-radius: 13px; font-weight: 700; }
.btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 8px 26px rgba(124, 60, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-ghost { background: var(--gl2); border: 1px solid var(--bd); color: var(--t); }
.btn-ghost:hover { border-color: var(--bdh); }
.auth-card, .card-form, .admin-row, .key-box, .tier-card, .script-box, .empty, .balance-card, .coin-card, .mykey-row, .key-strip, .product-card {
  background: var(--gl); border-color: var(--bd);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.auth-card, .card-form, .key-box, .tier-card { border-radius: var(--r); }
.form input, .form textarea, .form select, .card-form select { background: rgba(10, 8, 22, .7); border-color: var(--bd); border-radius: 12px; font-family: inherit; }
.form input:focus, .form textarea:focus { border-color: var(--bdh); box-shadow: 0 0 0 3px rgba(124, 60, 255, .2); }
.verify-banner { max-width: var(--maxw); margin: 0 auto; border-radius: 13px; background: rgba(255, 207, 110, .1); color: var(--gold); border: 1px solid rgba(255, 207, 110, .3); }

/* The shared inner-page components (.ez-*) used by product, game, updates, development */
.ez-page { position: relative; padding: 36px 0 24px; }
.ez-page-inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.ez-watermark { display: none; }
.ez-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
.ez-page-head h1 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ez-page-title p { margin: 6px 0 0; }
.ez-muted { color: var(--t2); }
.ez-mono { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.ez-mono-inline { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--t); }
.ez-crumbs { margin-bottom: 10px; font-size: .8rem; font-weight: 600; color: var(--t2); }
.ez-crumbs a:hover { color: var(--t); }
.ez-crumbs span { margin: 0 6px; opacity: .5; }
.ez-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ez-card {
  position: relative; display: block; background: var(--gl); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--bd); border-radius: var(--r); box-shadow: 0 20px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
a.ez-card:hover { border-color: var(--bdh); box-shadow: 0 20px 70px rgba(124, 58, 237, .25); transform: translateY(-3px); }
.ez-card.is-hidden { opacity: .55; }
.ez-empty { padding: 38px; text-align: center; color: var(--t2); }
.ez-empty p { margin: 0 0 12px; }
.ez-grid { display: grid; gap: 16px; }
.ez-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ez-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ez-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 3px 9px; border-radius: 99px; font-size: .7rem; font-weight: 700; color: var(--c); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .28); }
.ez-tag-premium { color: #e0c9ff; background: rgba(168, 85, 247, .2); border-color: rgba(168, 85, 247, .5); }
.ez-tag-muted { color: var(--t3); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.ez-meta { display: block; font-size: .8rem; font-weight: 600; color: var(--t2); }
.ez-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; font-size: .85rem; font-weight: 700; color: var(--t2); }
.ez-script-card { display: flex; flex-direction: column; padding: 22px; min-height: 220px; }
.ez-script-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ez-script-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #d6c4ff; border: 1px solid var(--bd); background: linear-gradient(135deg, rgba(124, 60, 255, .4), rgba(79, 140, 255, .2)); flex: none; }
.ez-script-thumb { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bd); }
.ez-script-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ez-script-card h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; }
.ez-script-card p { margin: 12px 0 0; font-size: .88rem; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ez-card-wrap { position: relative; display: flex; flex-direction: column; }
.ez-card-wrap > .ez-card { flex: 1; }
.ez-card-admin { position: absolute; right: 14px; top: 14px; z-index: 2; margin: 0; }
.ez-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 13px; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: .92rem; color: var(--t); white-space: nowrap; transition: .2s; }
.ez-btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(124, 60, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ez-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124, 60, 255, .55); }
.ez-btn-ghost { background: var(--gl2); border-color: var(--bd); }
.ez-btn-ghost:hover { border-color: var(--bdh); }
.ez-btn-danger { background: rgba(255, 122, 149, .1); border-color: rgba(255, 122, 149, .45); color: #ffc2cf; }
.ez-btn-sm { padding: 8px 14px; font-size: .86rem; border-radius: 11px; }
.ez-btn-xs { padding: 5px 10px; font-size: .78rem; border-radius: 9px; }
.ez-key-strip { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 20px; }
.ez-key-strip-text { flex: 1; font-size: .92rem; color: var(--t2); }
.ez-key-strip-text strong { color: var(--t); margin-right: 8px; }
.ez-key-strip-go { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; }
.ez-product-hero { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 30px; margin-bottom: 16px; }
.ez-product-hero.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; }
.ez-product-main .ez-meta { margin: 16px 0 8px; }
.ez-product-main h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.ez-product-main h1 .ez-tag { margin-left: 6px; position: relative; top: -5px; }
.ez-product-summary { margin: 0 0 14px; color: var(--t2); max-width: 620px; }
.ez-price { display: inline-block; margin-bottom: 8px; font-size: 1.15rem; font-weight: 800; }
.ez-product-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(139, 92, 246, .16); }
.ez-product-cta p { flex-basis: 100%; margin: 0 0 4px; font-size: .9rem; }
.ez-product-main .ez-admin-actions { margin-top: 18px; }
.ez-product-image { border-radius: 14px; overflow: hidden; border: 1px solid var(--bd); }
.ez-product-image img { display: block; width: 100%; height: auto; }
.ez-script-box { padding: 20px 22px; margin-bottom: 16px; }
.ez-script-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ez-script-box-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.ez-code { margin: 0; padding: 14px 16px; border-radius: 12px; overflow-x: auto; background: rgba(4, 4, 10, .75); border: 1px solid rgba(139, 92, 246, .16); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .84rem; color: #d8d5ed; }
.ez-script-hint { margin: 12px 0 0; font-size: .86rem; }
.ez-guide { padding: 26px 28px; }
.ez-guide h2 { margin: 0 0 12px; font-size: 1.1rem; font-weight: 800; }
.ez-guide-body { white-space: pre-wrap; font-size: .92rem; line-height: 1.75; color: #d8d5ed; }
.ez-update-card { padding: 22px; }
.ez-update-date { display: block; margin-bottom: 14px; font-size: .8rem; color: var(--t2); }
.ez-update-cat { display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pb); }
.ez-update-card h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; }
.ez-update-card p { margin: 0; font-size: .9rem; color: var(--t2); }
.ez-dev-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 34px; }
.ez-dev-intro h1 { margin: 18px 0 12px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.ez-dev-intro p { margin: 0 0 12px; color: var(--t2); max-width: 400px; }
.ez-dev-intro a { color: var(--t); text-decoration: underline; text-underline-offset: 2px; }
.ez-form { display: flex; flex-direction: column; gap: 14px; }
.ez-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--t2); }
.ez-form input, .ez-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bd); background: rgba(10, 8, 22, .7); color: var(--t); font: inherit; box-sizing: border-box; }
.ez-form textarea { resize: vertical; min-height: 120px; }
.ez-form input:focus, .ez-form textarea:focus { outline: none; border-color: var(--bdh); box-shadow: 0 0 0 3px rgba(124, 60, 255, .2); }
.ez-form .ez-btn { align-self: flex-start; }
.ez-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ez-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ez-form-row select { width: 100%; padding: 10px 12px; color: var(--t); border: 1px solid var(--bd); background: rgba(10, 8, 22, .7); border-radius: 12px; font: inherit; margin-top: 6px; }
.ez-request-text { margin: 8px 0 0; white-space: pre-wrap; font-size: .86rem; color: #d8d5ed; }
.ez-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ez-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 11px; font-size: .86rem; font-weight: 700; color: var(--t2); border: 1px solid var(--bd); background: var(--gl2); }
.ez-chip.is-active { color: #fff; background: var(--grad); border-color: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .e-sc { grid-template-columns: 1fr; }
  .e-sc .e-feat { display: none; }
  .e-hero { grid-template-columns: 1fr 1fr; gap: 20px; }
  .e-ben { grid-template-columns: 1fr 1fr; }
  .e-bi:nth-child(3) { border-left: 0; }
  .e-two { grid-template-columns: minmax(0, 1fr); }
  .e-two .e-cd { display: none; }
  .ez-product-hero.has-image, .ez-dev-card { grid-template-columns: 1fr; }
  .ez-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .e-hd { flex-wrap: wrap; gap: 8px; }
  .e-nav { order: 3; width: 100%; margin: 0; }
  .e-tab { flex: 1; padding: 8px 2px; text-align: center; font-size: .76rem; }
  .e-tab::after { left: 6px; right: 6px; }
  .e-chip { padding: 4px; }
  .e-chip-name, .e-chip svg.e-i, .e-admin span { display: none; }
  .e-hero { grid-template-columns: 1fr; align-content: center; }
  .e-sub, .e-ben, .e-gc p, .e-gc .n .e-pill { display: none; }
  .e-qa { justify-self: stretch; }
  .e-h1 { margin: 12px 0; }
  .e-cta { margin-top: 16px; }
  .e-games, .e-games.single { grid-template-columns: 1fr; }
  .e-gc, .e-games.single .e-gc { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
  .e-gc h3 { margin: 0; }
  .e-gc .n { margin: 0 0 0 auto; padding: 0; }
  .e-gc .e-lg.e-l, .e-games.single .e-lg.e-l { width: 52px; height: 52px; }
  .e-rg { grid-template-columns: 1fr; }
  .e-lp { min-height: 284px; }
  .e-srch { width: 100%; flex: 1; }
  .e-tools { width: 100%; }
  .e-chip2 { padding-right: 10px; font-size: .8rem; }
  .e-sw2 button { padding: 0 11px; }
  .e-rw .e-bds, .e-kr .e-bd { display: none; }
  .e-ch-grid { grid-template-columns: 1fr; }
  .e-chv { padding: 20px; }
  .e-mono.e-big { width: 56px; height: 56px; }
  .e-br-act .e-btn { padding: 7px 10px; }
  /* Phones: the buttons get their own line under the name, so names never break mid-word. */
  .e-br { flex-wrap: wrap; row-gap: 8px; }
  .e-br > div { flex: 1 1 0; }
  .e-br-act { flex-basis: calc(100% - 58px); margin-left: 58px; }
  .e-br-act .e-btn { flex: 1; justify-content: center; }
  /* Footer links used to be hidden on phones, which left Updates, Custom
     scripts and Discord with no way in at all. Stack them onto their own
     centred, tappable line instead. */
  .e-foot { flex-wrap: wrap; justify-content: center; text-align: center; gap: 8px 14px; }
  .e-foot .r { margin-left: 0; width: 100%; justify-content: center; gap: 20px; }
  .e-foot .r a { padding: 6px 2px; }
  /* Keep the header "Updates" label; the Discord icon stays an icon. */
  .e-util-updates .e-util-txt { display: none; }
  .ez-grid-2, .ez-grid-3, .ez-form-row { grid-template-columns: 1fr; }
}
@media (max-height: 620px) { .e-sub, .e-ben { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Key page buttons carry a product name ("Free key for <script>"), which can
   be longer than a phone is wide. Let them wrap instead of running off-card. */
.e-shell-mode .key-cta .btn { white-space: normal; max-width: 100%; text-align: center; }