:root {
  /* Palette lifted from the PVM smoke banner */
  --bg:#151a20; --card:#242d35; --input:#1b222a; --border:#3a4854;
  --fg:#f5f8fa; --muted:#aebdc7;
  --silver:#e1e9ed; --silver2:#bdccd5; --steel:#526571; --steel2:#35434e;
  --ok:#5cb383; --warn:#d6b45c; --bad:#c96a58;
  /* Ember accent - a warm red echoing the undertones in the PVM smoke, used
     sparingly for CTAs, active tab underline and highlight badges. Expanded
     shade ramp for more depth/flare across the site. */
  --ember:#e14b4b; --ember2:#ff6a5c; --ember-dim:#7a2f2f;
  --ember-deep:#8f1f2b; --ember-bright:#ff8a70; --ember-crimson:#b8283f;
  --radius:14px;
}
* { box-sizing: border-box; }
html, body { cursor:url('/crosshair-cursor.svg') 16 16, crosshair; }
button, a, input, select, textarea, label, [role="button"] { cursor:url('/crosshair-cursor-green.svg') 16 16, pointer !important; }
::selection { background:var(--ember); color:#fff; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--steel2); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--ember-dim); }

body { margin:0; font-family:"Inter","Segoe UI", system-ui, sans-serif; background:var(--bg); color:var(--fg);
  min-height:100vh; position:relative;
  background-image:
    radial-gradient(1100px 480px at 78% -12%, #ff716247, transparent 60%),
    radial-gradient(900px 460px at 8% 0%, #d9405140, transparent 60%),
    radial-gradient(650px 420px at 50% 100%, #b62d4030, transparent 65%),
    radial-gradient(700px 380px at 50% 100%, #28384288, transparent 65%);
}
/* top-of-page ember accent line */
body::after {
  content:''; position:fixed; top:0; left:0; right:0; height:3px; z-index:30; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--ember-crimson), var(--ember2), var(--ember-bright), var(--ember2), var(--ember-crimson), transparent);
  background-size:200% auto; animation:sheen 8s linear infinite; opacity:.85;
}
/* faint animated ember glow drifting behind everything */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.65;
  background:
    radial-gradient(500px 260px at 15% 20%, #e14b4b1c, transparent 70%),
    radial-gradient(600px 300px at 85% 75%, #ff6a5c1a, transparent 70%),
    radial-gradient(420px 240px at 60% 40%, #b8283f16, transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
/* small drifting embers - purely decorative sparks rising from the bottom */
.embers { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.embers span { position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, var(--ember-bright), var(--ember2) 60%, transparent 75%);
  box-shadow:0 0 8px 2px #ff6a5c66; opacity:0; animation:emberRise linear infinite; }
.embers span:nth-child(1) { left:8%; animation-duration:14s; animation-delay:0s; }
.embers span:nth-child(2) { left:22%; animation-duration:18s; animation-delay:3s; width:3px; height:3px; }
.embers span:nth-child(3) { left:38%; animation-duration:12s; animation-delay:6s; }
.embers span:nth-child(4) { left:54%; animation-duration:20s; animation-delay:1s; width:4px; height:4px; }
.embers span:nth-child(5) { left:68%; animation-duration:15s; animation-delay:8s; }
.embers span:nth-child(6) { left:80%; animation-duration:17s; animation-delay:4s; width:3px; height:3px; }
.embers span:nth-child(7) { left:92%; animation-duration:13s; animation-delay:10s; }
@keyframes emberRise {
  0% { transform:translateY(0) translateX(0); opacity:0; }
  8% { opacity:.9; }
  85% { opacity:.5; }
  100% { transform:translateY(-105vh) translateX(24px); opacity:0; }
}
@keyframes drift {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(2%, -3%) scale(1.06); }
}
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation:none; } .embers { display:none; } * { animation-duration:.01ms !important; } }

header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 28px;
  border-bottom:1px solid #ffffff1c; background:linear-gradient(105deg,#202831f5 0%,#303d47f2 52%,#222b33f5 100%);
  backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; box-shadow:0 10px 30px #0008, 0 1px 0 #ff8a7066; overflow:hidden; }
header::before { background:linear-gradient(90deg,transparent,#ff8a7038,transparent); content:''; height:1px; left:15%; position:absolute; right:15%; top:0; }
header::after { background:radial-gradient(ellipse at center,#ff6a5c2b,transparent 68%); content:''; height:130px; pointer-events:none; position:absolute; right:8%; top:-86px; width:350px; }
.brandwrap { align-items:center; display:flex; gap:14px; position:relative; text-decoration:none; color:inherit; z-index:1; }
.brand { height:44px; width:80px; object-fit:cover; object-position:center 40%;
  border-radius:8px; border:1px solid #ffffff33; display:block;
  box-shadow:0 0 0 1px #0008, 0 5px 20px #e14b4b44; transition:box-shadow .2s, transform .2s;
  animation:brandGlow 4s ease-in-out infinite; }
@keyframes brandGlow {
  0%,100% { box-shadow:0 0 0 1px #0006, 0 4px 16px #e14b4b22; }
  50% { box-shadow:0 0 0 1px #0006, 0 4px 26px #e14b4b55, 0 0 30px -6px #ff6a5c40; }
}
.brandwrap:hover .brand { box-shadow:0 0 0 1px #0006, 0 7px 25px #e14b4b66; transform:translateY(-1px); animation-play-state:paused; }
h1 { font-family:"Sora","Segoe UI",sans-serif; font-size:18px; margin:0; letter-spacing:.09em; font-weight:700; text-shadow:0 2px 12px #0008; }
.vapor { background:linear-gradient(90deg,#ffffff,#ff8f83 55%,#e14b4b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:sheen 6s linear infinite; }
@keyframes sheen { to { background-position:200% center; } }
nav { align-items:center; display:flex; gap:14px; position:relative; z-index:1; }
nav a { color:var(--silver); text-decoration:none; position:relative; }
nav a:hover { color:var(--ember2); }
nav a::after { content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:linear-gradient(90deg, var(--ember2), var(--ember-crimson)); transition:right .2s ease; }
nav a:hover::after { right:0; }
nav .account-action { background:linear-gradient(180deg,var(--ember2),var(--ember)); border:1px solid #ff8a7066; border-radius:7px;
  box-shadow:0 4px 14px #e14b4b38,inset 0 1px 0 #ffffff42; color:#210a08; font-family:"Sora","Segoe UI",sans-serif;
  cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.04em; padding:9px 13px; text-transform:uppercase; }
nav .account-action::after { display:none; }
nav .account-action:hover { box-shadow:0 6px 20px #e14b4b5c,inset 0 1px 0 #ffffff42; color:#210a08; filter:brightness(1.08); }
nav .discord-community { align-items:center; border:1px solid #ff8a7044; border-radius:7px; color:var(--silver); display:inline-flex; gap:7px; padding:7px 10px; }
nav .discord-community svg { height:16px; width:16px; }
nav .discord-community::after { display:none; }
nav .discord-community:hover { background:#e14b4b14; border-color:#ff8a7088; color:var(--ember-bright); }
header #who { background:#10161b70; border:1px solid #ffffff18; border-radius:99px; color:var(--silver); max-width:210px; overflow:hidden;
  padding:7px 11px; text-overflow:ellipsis; white-space:nowrap; }
header #logout { background:linear-gradient(180deg,#3c4b56,#2c3943); border-color:#ffffff2b; color:#f5f8fa; margin:0; padding:8px 12px; }
header #logout:hover { background:linear-gradient(180deg,#4d5e6a,#35444f); border-color:#ff8a7080; box-shadow:0 0 18px #ff6a5c35; filter:none; }
@media (max-width:560px) { header { padding:11px 14px; flex-wrap:wrap; row-gap:10px; } header nav { flex:1 1 100%; flex-wrap:wrap; justify-content:flex-start; gap:8px; } header #who { display:none; } h1 { font-size:14px; } .brand { height:38px; width:64px; } }

/* hero */
#hero { margin:28px 0 8px; animation:fadeUp .5s ease both; position:relative; max-width:640px; margin-left:auto; margin-right:auto; }
.hero-banner { width:100%; aspect-ratio: 1672 / 720; object-fit:cover; object-position:center 50%;
  border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:0 24px 60px #000c, 0 0 80px -20px #e14b4b40 inset; display:block;
  transition:transform .6s ease, box-shadow .6s ease; }
#hero:hover .hero-banner { transform:scale(1.015); box-shadow:0 28px 70px #000e, 0 0 110px -18px #e14b4b60 inset; }
#hero::after { content:''; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, #0d1013cc 100%),
             linear-gradient(90deg, #b8283f22, transparent 30%, transparent 70%, #e14b4b22);
  mix-blend-mode:multiply; opacity:.9; }
.tagline { text-align:center; color:var(--muted); margin:16px 0 0; letter-spacing:.03em; font-size:15px;
  text-shadow:0 0 24px #e14b4b2a; }
.tagline { background:#07111bb8; border:1px solid #00c8ff2e; border-radius:7px; color:#d9f7ff; font-weight:500;
  line-height:1.45; margin:16px auto 0; max-width:700px; padding:9px 14px; text-shadow:0 0 14px #00c8ff66; }
.auth-entry { align-items:center; background:linear-gradient(100deg,#1d252b,#151a1e); border:1px solid var(--border); border-left:3px solid var(--ember-dim); border-radius:10px;
  display:flex; justify-content:space-between; gap:18px; padding:16px 18px; }
.auth-entry h2 { margin:0 0 7px; }
.auth-entry p { margin:0; }
body:has(.auth-entry) #auth > h2,
body:has(.auth-entry) #auth > #discord-email,
body:has(.auth-entry) #auth > #discordlogin,
body:has(.auth-entry) #auth > .authnote { display:none; }
.register-card { background:linear-gradient(165deg,#1d252b,#151a1e); border:1px solid var(--border); border-top:2px solid var(--ember); border-radius:12px;
  box-shadow:0 20px 60px #0009,0 0 38px -18px #e14b4b66; margin:54px auto; max-width:460px; padding:28px; }
.register-card h2 { border:0; color:var(--fg); font-size:24px; letter-spacing:0; margin:5px 0 12px; padding:0; text-transform:none; }
.register-card h2::after { display:none; }
.register-card > input { display:block; margin:7px 0 14px; width:100%; }
.register-card > button { width:100%; }
.password-meter { align-items:center; display:flex; gap:9px; margin:-6px 0 12px; }
.password-meter::before { background:#26313b; border-radius:99px; content:''; flex:1; height:5px; overflow:hidden; }
.password-meter span:first-child { background:#ff5353; border-radius:99px; height:5px; left:0; position:absolute; width:0; }
.password-meter { position:relative; }
.password-meter #strength-label { color:var(--muted); font-size:11px; min-width:100px; text-align:right; }
.password-meter #strength-bar.strength-1 { width:25%; background:#ff5353; }
.password-meter #strength-bar.strength-2 { width:50%; background:#ff9e29; }
.password-meter #strength-bar.strength-3 { width:75%; background:#ffdf3e; }
.password-meter #strength-bar.strength-4 { width:100%; background:#62e8ff; }
.confirmation-card { text-align:center; }
.confirmation-card > button { margin-top:20px; }
.field-label { color:var(--silver); display:block; font-family:"Sora","Segoe UI",sans-serif; font-size:12px; font-weight:600; margin-top:20px; }
.register-result { color:var(--ember-bright); line-height:1.5; min-height:20px; margin:16px 0 0; }
.register-foot { border-top:1px solid var(--border); line-height:1.5; margin:22px 0 0; padding-top:16px; }
.verify-popup { align-items:center; background:#080b0dbe; display:flex; inset:0; justify-content:center; padding:20px; position:fixed; z-index:60; }
.verify-popup[hidden] { display:none; }
.verify-popup-card { background:linear-gradient(165deg,#252e35,#151a1e); border:1px solid #ff8a7070; border-radius:12px; box-shadow:0 22px 70px #000c,0 0 46px #e14b4b30;
  max-width:430px; padding:30px; position:relative; text-align:center; }
.verify-popup-card::before { background:linear-gradient(90deg,transparent,var(--ember),var(--ember-bright),var(--ember),transparent); content:''; height:2px; left:0; position:absolute; right:0; top:0; }
.verify-popup-card h2 { border:0; color:var(--fg); font-size:24px; letter-spacing:0; margin:7px 0 13px; padding:0; text-transform:none; }
.verify-popup-card h2::after { display:none; }
.verify-popup-card > p { color:var(--silver2); line-height:1.55; }
.verify-popup-card > p.muted { font-size:12px; margin:18px 0 22px; }
.verify-mark { align-items:center; background:#253d2f; border:1px solid #5cb383; border-radius:50%; box-shadow:0 0 22px #5cb38345; color:#9ce5bd; display:inline-flex; font-size:21px; height:46px; justify-content:center; width:46px; }
.verify-popup-card .eyebrow { color:var(--ember-bright); font-family:"Sora","Segoe UI",sans-serif; font-size:11px; font-weight:700; letter-spacing:.13em; margin:16px 0 0; text-transform:uppercase; }
.verify-popup-card button { margin:0; }
.review-card { max-width:600px; }
.review-card > textarea { background:var(--input); border:1px solid var(--border); border-radius:8px; color:var(--fg); display:block; font:inherit; line-height:1.5; margin:7px 0 16px; min-height:145px; padding:11px 12px; resize:vertical; width:100%; }
.review-card > textarea:focus { border-color:var(--ember2); box-shadow:0 0 0 3px #e14b4b26; outline:none; }
/* Commissions tab: the request form lives inside a tab page, so it sits left-aligned under the intro. */
.commission-form { margin:18px 0 0; max-width:680px; }
.commission-form .two-col { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.commission-form input, .commission-form select, .commission-form textarea { display:block; margin:7px 0 0; width:100%; }
.commission-form textarea { background:var(--input); border:1px solid var(--border); border-radius:8px; color:var(--fg); font:inherit; line-height:1.5; min-height:150px; padding:11px 12px; resize:vertical; }
.commission-form textarea:focus { border-color:var(--ember2); box-shadow:0 0 0 3px #e14b4b26; outline:none; }
.commission-form .field-label:first-child, .commission-form .two-col > div:nth-child(-n+2) > .field-label { margin-top:0; }
.commission-form .optional { color:var(--muted, #8a9aa5); font-weight:400; }
.commission-form > button { margin-top:22px; width:100%; }
.commission-form .hp { left:-9999px; opacity:0; position:absolute; pointer-events:none; }
@media (max-width:560px) { .commission-form .two-col { grid-template-columns:1fr; } .commission-form .two-col > div > .field-label { margin-top:20px; } }
.owned-mods { background:#12191f72; border:1px solid #ffffff10; border-radius:8px; display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 4px; padding:11px; }
.owned-mods .field-label { flex-basis:100%; margin:0 0 2px; }
.owned-mod { background:transparent; border:1px solid var(--border); color:var(--muted); font-size:12px; margin:0; padding:7px 10px; }
.owned-mod.active { background:#e14b4b22; border-color:var(--ember2); color:var(--fg); box-shadow:0 0 14px #e14b4b38; }
.review-dl { background:#40262c; border:1px solid var(--ember-dim); color:#ffd4cd; }
.review-dl:hover { background:#542d33; border-color:var(--ember2); color:#fff; filter:none; }
@media (max-width:560px) { .auth-entry { align-items:stretch; flex-direction:column; } .auth-entry .btn-link { margin:0; } .register-card { margin:28px auto; padding:22px; } }

main { max-width:960px; margin:0 auto; padding:24px; position:relative; z-index:1; }
main.wide { max-width:1400px; }
section { margin-bottom:36px; animation:fadeUp .45s ease both; }
h2 { font-family:"Sora","Segoe UI",sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700;
  border-left:3px solid var(--ember-dim); padding-left:10px; position:relative;
  background:linear-gradient(90deg, #e14b4b12, transparent 65%); }
h2::after { content:''; position:absolute; left:0; bottom:-8px; width:52px; height:2px;
  background:linear-gradient(90deg, var(--ember), var(--ember-crimson), transparent); border-radius:2px; }
h3 { font-family:"Sora","Segoe UI",sans-serif; font-size:14px; color:var(--muted); }
.home-intro { max-width:760px; padding:18px 0 34px; }
.home-intro .eyebrow { color:var(--ember-bright); font-family:"Sora","Segoe UI",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; margin:0 0 12px; text-transform:uppercase; }
.home-intro h2 { border:0; background:none; color:var(--fg); font-size:30px; letter-spacing:0; line-height:1.2; padding:0; text-transform:none; }
.home-intro h2::after { display:none; }
.home-intro > p:not(.eyebrow) { color:var(--silver2); font-size:16px; line-height:1.65; margin:18px 0; max-width:620px; }
.catalogue-strip { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 20px; }
.catalogue-strip div { border-left:1px solid var(--border); display:flex; flex-direction:column; gap:3px; padding:4px 18px; }
.catalogue-strip div:first-child { border-left:0; padding-left:0; }
.catalogue-strip strong { color:var(--ember-bright); font-family:"Sora","Segoe UI",sans-serif; font-size:20px; line-height:1; }
.catalogue-strip span { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.home-features { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:10px; margin:0 0 40px;
  overflow:hidden; background:#12171b9c; }
.home-features article { min-height:148px; padding:20px; position:relative; }
.home-features article + article { border-left:1px solid var(--border); }
.home-features span { color:var(--ember); font-family:"Sora","Segoe UI",sans-serif; font-size:11px; font-weight:700; }
.home-features h3 { color:var(--fg); font-size:15px; margin:12px 0 7px; }
.home-features p { color:var(--muted); font-size:13px; line-height:1.5; margin:0; }
.home-heading { align-items:center; display:flex; justify-content:space-between; margin-bottom:16px; }
.home-heading h2 { margin:0; }
.featured-grid { margin-bottom:8px; }

/* about us */
.about-us { background:linear-gradient(160deg,#2b353f,#171d24 62%,#12171d); border:1px solid #ff8a7040; border-radius:var(--radius);
  box-shadow:0 26px 66px #000b, 0 0 70px -28px #e14b4b99, inset 0 1px 0 #ffffff12; display:grid; gap:38px; grid-template-columns:1.55fr 1fr;
  margin:8px 0 40px; overflow:hidden; padding:40px 42px; position:relative; }
.about-us::before { background:linear-gradient(90deg,transparent,var(--ember-crimson),var(--ember2),var(--ember-bright),var(--ember2),var(--ember-crimson),transparent);
  background-size:200% auto; animation:sheen 9s linear infinite; content:''; height:3px; left:0; position:absolute; right:0; top:0; }
.about-us::after { background:radial-gradient(620px 280px at 88% 0%, #e14b4b2e, transparent 70%),
  radial-gradient(420px 220px at 4% 100%, #b8283f24, transparent 70%); content:''; inset:0; pointer-events:none; position:absolute; }
.about-copy, .about-track { position:relative; z-index:1; }
.about-copy .eyebrow { color:var(--ember-bright); font-family:"Sora","Segoe UI",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.18em; margin:0 0 14px; text-transform:uppercase; }
.about-copy .eyebrow::before { background:linear-gradient(90deg,var(--ember),var(--ember-bright)); border-radius:2px; content:''; display:inline-block;
  height:2px; margin:0 10px 4px 0; vertical-align:middle; width:26px; }
.about-copy h2 { background:none; border:0; color:var(--fg); font-size:32px; letter-spacing:0; line-height:1.18; margin:0 0 22px; padding:0;
  text-shadow:0 0 34px #e14b4b4d; text-transform:none; }
.about-copy h2::after { display:none; }
.about-copy p:not(.eyebrow):not(.detail-label) { color:var(--silver2); font-size:15px; line-height:1.72; margin:0 0 16px; }
.about-copy .about-lead { color:var(--silver); font-size:16.5px; line-height:1.68; }
.about-copy strong { color:var(--fg); }
.about-support { background:#12191fa8; border:1px solid #ff8a7033; border-left:3px solid var(--ember2); border-radius:10px;
  box-shadow:0 0 30px -16px #e14b4b99; margin-top:26px; padding:20px 22px; }
.about-support p:last-child { margin:0 !important; }
.about-track { background:#12191f8c; border:1px solid #ffffff14; border-radius:12px; padding:24px; }
.about-servers { display:grid; gap:2px; list-style:none; margin:0 0 22px; padding:0; }
.about-servers li { border-top:1px solid #ffffff10; padding:13px 0; }
.about-servers li:first-child { border-top:0; padding-top:4px; }
.about-servers strong { color:var(--ember-bright); display:block; font-family:"Sora","Segoe UI",sans-serif; font-size:14px; }
.about-servers span { color:var(--muted); display:block; font-size:12.5px; line-height:1.5; margin-top:5px; }
.about-owners { border-top:1px solid #ffffff12; padding-top:18px; text-align:center; }
.about-owners span { color:var(--muted); display:block; font-size:10px; font-family:"Sora","Segoe UI",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.about-owners strong { color:var(--fg); display:block; font-family:"Sora","Segoe UI",sans-serif; font-size:17px; margin-top:8px; text-shadow:0 0 22px #e14b4b80; }
@media (max-width:860px) { .about-us { grid-template-columns:1fr; gap:26px; padding:28px 22px; } .about-copy h2 { font-size:24px; } .about-copy .about-lead { font-size:15px; } }
@media (max-width:760px) { .home-intro h2 { font-size:24px; } .catalogue-strip { margin-bottom:18px; } .catalogue-strip div { padding:4px 10px; } .catalogue-strip strong { font-size:17px; } .home-features { grid-template-columns:1fr; } .home-features article + article { border-left:0; border-top:1px solid var(--border); } }

/* tabs */
.tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:10px 0 28px; }
.tabs button { background:transparent; color:var(--muted); border:0; border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0; padding:10px 16px; margin:0; font-size:12px; box-shadow:none;
  letter-spacing:.08em; text-transform:uppercase; transition:color .15s, background .15s, border-color .15s; }
.tabs button:hover { color:var(--fg); background:#ffffff08; filter:none; }
.tabs button.active { color:var(--fg); border-bottom-color:var(--ember); background:#ffffff0a;
  text-shadow:0 0 18px #e14b4b55; }

/* left-sidebar tab layout (main page) */
.page-layout { display:block; margin:10px 0 0 238px; min-height:420px; }
.side-tabs { background:linear-gradient(90deg,#242d35a8,transparent); border:0; border-left:1px solid var(--border); border-radius:0; display:flex; flex-direction:column; gap:4px;
  left:22px; padding:8px 0 8px 10px; position:fixed; top:92px; width:190px; z-index:15; box-shadow:none; }
.side-tabs::before { color:var(--muted); content:'NAVIGATION'; font-family:"Sora","Segoe UI",sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.15em; padding:8px 10px 7px; }
.side-tabs button { background:transparent; color:var(--muted); border:1px solid transparent; border-radius:6px;
  padding:11px 12px 11px 14px; margin:0; text-align:left; font-family:"Sora","Segoe UI",sans-serif; font-size:11px; letter-spacing:.07em; text-transform:uppercase; width:100%;
  box-shadow:none; font-weight:600; transition:color .15s, background .15s, border-color .15s, transform .15s; }
.side-tabs button:hover { color:var(--fg); background:#ffffff08; filter:none; border-color:#ffffff12; transform:translateX(2px); }
.side-tabs button.active { color:var(--fg); border-color:#e14b4b38; background:linear-gradient(90deg,#e14b4b2e,#b8283f12);
  text-shadow:0 0 18px #e14b4b55; box-shadow:inset 3px 0 0 var(--ember2); }
.page-content { flex:1; min-width:0; }
@media (max-width: 760px) {
  .page-layout { margin-left:0; }
  .side-tabs { border:0; border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; flex-direction:row; flex-wrap:nowrap;
    left:auto; overflow-x:auto; padding:0 0 8px; position:static; top:auto; width:100%; }
  .side-tabs::before { display:none; }
  .side-tabs button { flex:0 0 auto; padding:9px 11px; width:auto; }
}

input, select { background:var(--input); border:1px solid var(--border); color:var(--fg);
  padding:11px 12px; border-radius:8px; margin:2px 6px 2px 0; font-size:14px; transition:border-color .15s, box-shadow .15s; }
input::placeholder { color:#5f707a; }
input:focus, select:focus { outline:none; border-color:var(--ember2); box-shadow:0 0 0 3px #e14b4b26, 0 0 18px -4px #ff6a5c4d; }
button { background:linear-gradient(180deg,var(--silver),var(--silver2)); color:#12161a; font-weight:600;
  border:0; padding:11px 18px; border-radius:8px; cursor:pointer; margin:2px 4px 2px 0;
  transition:filter .15s, box-shadow .15s, transform .1s; letter-spacing:.01em;
  position:relative; overflow:hidden; isolation:isolate; }
button::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, #ffffff55 48%, #ffffff00 66%);
  background-size:250% 250%; background-position:150% 0; transition:background-position .5s ease; }
button:hover::before { background-position:-50% 0; }
button:active { transform:translateY(1px); }
button.secondary { background:var(--steel2); color:var(--fg); font-weight:500; border:1px solid var(--border); }
button.ghost { background:transparent; border:1px solid var(--border); color:var(--muted); font-weight:500; }
button.ghost:hover { color:var(--fg); border-color:var(--silver2); }
button.danger { background:linear-gradient(180deg,#5c2b25,#3a1a17); color:#f3c9be; font-weight:600; border:1px solid var(--ember-deep);
  box-shadow:0 3px 12px #8f1f2b33; }
button.danger:hover { box-shadow:0 5px 18px #8f1f2b55; }
button.mini { padding:5px 11px; font-size:12px; }
button:hover { filter:brightness(1.15); }
button.discord { background:linear-gradient(180deg,#6f77f5,#5865F2); color:#fff; font-weight:600;
  box-shadow:0 4px 16px #5865f24d; }
button.discord:hover { box-shadow:0 6px 22px #5865f270; filter:none; }
/* Buttons rendered as <a> links (e.g. Discord OAuth-driven navigations) - same look as <button>. */
a.btn-link { display:inline-block; text-decoration:none; text-align:center; font-weight:600;
  border:0; padding:11px 18px; border-radius:8px; cursor:pointer; margin:2px 4px 2px 0;
  letter-spacing:.01em; transition:filter .15s, box-shadow .15s, transform .1s; }
a.btn-link:active { transform:translateY(1px); }
a.btn-link.discord { background:linear-gradient(180deg,#6f77f5,#5865F2); color:#fff;
  box-shadow:0 4px 16px #5865f24d; }
a.btn-link.discord:hover { box-shadow:0 6px 22px #5865f270; filter:none; }
a.btn-link.secondary { background:var(--steel2); color:var(--fg); font-weight:500; border:1px solid var(--border); }
a.btn-link.secondary:hover { filter:brightness(1.15); }
.or { color:var(--muted); text-align:center; font-size:12px; margin:10px 0; position:relative; }
.or::before, .or::after { content:''; position:absolute; top:50%; width:38%; height:1px; background:var(--border); }
.or::before { left:0; } .or::after { right:0; }
/* Primary call-to-action buttons (buy / save / submit) get the ember highlight. */
.card button:not(.secondary):not(.ghost),
#step1 button:not(.secondary):not(.ghost), #step2 button:not(.secondary):not(.ghost),
#pay, #submit, #create, #login, #p_save, #c_save {
  background:linear-gradient(180deg,var(--ember2),var(--ember)); color:#210a08;
  box-shadow:0 4px 16px #e14b4b3d, inset 0 1px 0 #ffffff40;
}
.card button:not(.secondary):not(.ghost):hover,
#step1 button:not(.secondary):not(.ghost):hover, #step2 button:not(.secondary):not(.ghost):hover,
#pay:hover, #submit:hover, #create:hover, #login:hover, #p_save:hover, #c_save:hover {
  box-shadow:0 8px 26px #e14b4b60, inset 0 1px 0 #ffffff40;
}
.card-bot button:not(.secondary):not(.ghost) {
  background:linear-gradient(180deg,#7b86ff,#5865F2); color:#fff;
  box-shadow:0 4px 16px #5865f24d, inset 0 1px 0 #ffffff40;
}
.card-bot button:not(.secondary):not(.ghost):hover { box-shadow:0 8px 26px #5865f270, inset 0 1px 0 #ffffff40; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.grid.stats { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.card { background:linear-gradient(165deg,#2a353e,#1d252c); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; position:relative; overflow:hidden;
  box-shadow:0 12px 34px #0007, inset 0 1px 0 #ffffff0d; backdrop-filter:blur(6px); transition:border-color .2s, box-shadow .2s, transform .2s; }
.card[role="link"] { cursor:url('/crosshair-cursor-green.svg') 16 16, pointer; }
.card[role="link"]:focus-visible { border-color:var(--ember2); box-shadow:0 0 0 3px #e14b4b3d, 0 12px 34px #0007; outline:0; }
.card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg,#ffffff14,transparent 40%); pointer-events:none; }
.card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, transparent, var(--ember-crimson), var(--ember2), transparent);
  opacity:0; transition:opacity .25s; }
.card:hover { border-color:#ff8a7073; box-shadow:0 18px 48px #0009, 0 0 0 1px #ff8a7033, 0 0 44px -12px #e14b4b55; transform:translateY(-3px); }
.card:hover::after { opacity:1; }
.card-bot { background:linear-gradient(165deg,#1b2036,#12162a); border-color:#39448a; }
.card-bot::before { background:linear-gradient(160deg,#7d8bff22,transparent 40%); }
.card-bot:hover { border-color:#5865F2; box-shadow:0 16px 44px #000a, 0 0 0 1px #5865f244; }
.card h3 { margin:0 0 6px; color:var(--fg); font-size:16px; font-weight:700; }
.badge.cat { margin:0 0 10px; display:inline-block; }
.badge.cat-mod { background:var(--steel2); color:var(--silver); }
.badge.cat-bot { background:#2d3a6b; color:#aebdf7; box-shadow:0 0 12px #5865f255; }
.bots-heading { margin-top:36px; }
.card .desc { color:var(--muted); font-size:14px; min-height:56px; line-height:1.45; }
.card-preview { aspect-ratio:16/9; background:#07111b; border:1px solid #426987; border-radius:7px; margin:15px 0; overflow:hidden; }
.card-preview video { display:block; height:100%; object-fit:cover; width:100%; }
.card-preview iframe,.product-media iframe { border:0; display:block; height:100%; pointer-events:none; width:100%; }
.product-media { aspect-ratio:16 / 9; background:#090b0d; border:1px solid var(--border); border-radius:8px; margin:18px 0; overflow:hidden; }
.product-media video { display:block; height:100%; width:100%; }
.product-highlights { background:#07111b78; border:1px solid #00c8ff24; border-radius:8px; margin:18px 0; padding:15px 16px; }
.detail-label { color:var(--ember-bright); font-family:"Sora","Segoe UI",sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; margin:0 0 10px; text-transform:uppercase; }
.product-highlights ul { display:grid; gap:8px; list-style:none; margin:0; padding:0; }
.product-highlights li { color:var(--silver); font-size:13px; line-height:1.45; padding-left:18px; position:relative; }
.product-highlights li::before { color:var(--ok); content:'+'; font-family:"Sora","Segoe UI",sans-serif; font-weight:800; left:0; position:absolute; }
.product-flow { border-top:1px solid #ffffff13; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0 16px; padding-top:15px; }
.product-flow span { color:var(--ember); font-family:"Sora","Segoe UI",sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; }
.product-flow b { color:var(--muted); display:block; font-size:11px; letter-spacing:0; margin-top:4px; }
.price { font-size:19px; font-weight:700; color:var(--silver); margin:4px 0; letter-spacing:.02em; }
.coupon { border-style:dashed; border-color:var(--ember-dim); font-size:13px; padding:9px 10px; width:100%; max-width:220px; }
.stat { text-align:center; }
.statval { font-size:28px; font-weight:800; color:var(--silver); text-shadow:0 0 24px #ffffff18; }
.muted { color:var(--muted); font-size:13px; }
.note { background:#20242c; border:1px solid #3d4453; color:#c5cede; font-size:13px; padding:12px; border-radius:8px; margin:12px 0; }

.lic { background:linear-gradient(165deg,#2a353e,#1d252c); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; margin-bottom:16px; overflow:hidden; box-shadow:0 8px 26px #0006, inset 0 1px 0 #ffffff0d;
  border-left:3px solid var(--ember-dim); position:relative; transition:border-color .2s, box-shadow .2s, transform .2s; }
.lic::before { background:linear-gradient(90deg,var(--ember),var(--ember-bright),transparent); content:''; height:2px; left:0; opacity:.55; position:absolute; right:0; top:0; }
.lic:hover { border-color:var(--ember-dim); border-left-color:var(--ember2); box-shadow:0 14px 36px #0008, 0 0 30px -14px #e14b4b40; }
.lic-head { align-items:center; border-bottom:1px solid #ffffff12; display:flex; justify-content:space-between; margin:-2px 0 16px; padding:0 0 13px; }
.lic-head h3 { color:var(--fg); font-size:17px; margin:0; }
.lic > p { margin:10px 0; }
.lic > p:first-of-type { align-items:center; display:flex; gap:8px; }
.key { font-family:ui-monospace,Consolas,monospace; background:var(--input); padding:5px 9px; border-radius:6px;
  border:1px solid #ff8a705c; color:var(--ember-bright); letter-spacing:.03em; text-shadow:0 0 12px #e14b4b40; }
.lic .row { background:#12191f72; border:1px solid #ffffff10; border-radius:8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:16px; padding:8px; }
.lic .row input { flex:1 1 155px; margin:0; }
.lic .row button, .lic .row .btn-link { margin:0; }
.release-downloads { display:flex; flex-wrap:wrap; gap:6px; }
.release-downloads button { margin:0; }
.basket-toggle { align-items:center; background:#0c1c2b9c; border:1px solid #8af3ff55; border-radius:7px; color:#d0fbff !important; display:inline-flex; font-family:"Sora","Segoe UI",sans-serif; font-size:10px; font-weight:700; gap:7px; letter-spacing:.06em; padding:8px 10px; text-decoration:none; text-transform:uppercase; }.basket-toggle:hover { background:#22d3ee1c; border-color:#8af3ff; color:#fff !important; }.basket-toggle::after { display:none; }.basket-toggle span { background:#ffe45c; border-radius:99px; color:#172331; font-size:10px; font-weight:800; min-width:18px; padding:2px 5px; text-align:center; }
.basket { background:linear-gradient(165deg,#213a52,#13263a); border:1px solid #8af3ff; box-shadow:0 22px 56px #000c,0 0 36px -12px #22d3ee8a; padding:16px; position:fixed; right:24px; top:80px; width:min(370px,calc(100vw - 32px)); z-index:40; }
.basket-head,.basket-total { align-items:center; display:flex; justify-content:space-between; }.basket-head h2 { border:0; font-size:14px; margin:0; padding:0; text-transform:uppercase; }.basket-head h2::after { display:none; }
.basket-items { border-bottom:1px solid #426987; margin:13px 0; max-height:320px; overflow-y:auto; }.basket-item { align-items:center; border-top:1px solid #ffffff12; display:flex; gap:10px; justify-content:space-between; padding:11px 0; }.basket-item:first-child { border-top:0; }.basket-item strong,.basket-item span { display:block; }.basket-item strong { font-size:13px; }.basket-item span { color:var(--muted); font-size:12px; margin-top:3px; }.basket-item button { flex:0 0 auto; margin:0; }
.basket > input { margin:0 0 12px; max-width:none; width:100%; }.basket-total { color:var(--silver); margin:13px 0; }.basket-total strong { color:#ffe45c; font-family:"Sora","Segoe UI",sans-serif; font-size:20px; }.basket > #basket-checkout { margin:0; width:100%; }
@media (max-width:560px) { .basket { right:16px; top:70px; }.basket-toggle { padding:7px 9px !important; } }
.mail-inbox { border:1px solid var(--border); display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.8fr); margin:18px 0; min-height:420px; }
.mail-list { background:#07111b8c; border-right:1px solid var(--border); overflow-y:auto; }
.mail-item { background:transparent; border:0; border-bottom:1px solid #ffffff12; border-radius:0; color:var(--fg); display:block; margin:0; padding:13px 14px; text-align:left; width:100%; }
.mail-item:hover,.mail-item.active { background:#00c8ff12; filter:none; }
.mail-item.unread { border-left:3px solid var(--ok); }
.mail-item strong,.mail-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-item strong { font-size:12px; }.mail-item span { color:var(--muted); font-size:11px; margin-top:4px; }
.mail-reader { background:#0b1725a8; padding:20px; }.mail-reader h3 { color:var(--fg); margin:0 0 6px; }.mail-reader pre { font:13px/1.6 "Segoe UI",sans-serif; margin:18px 0 0; white-space:pre-wrap; word-break:break-word; }
.mail-compose { margin-top:18px; }.mail-compose input,.mail-compose textarea { display:block; margin:8px 0; width:100%; }.mail-compose textarea { background:var(--input); border:1px solid var(--border); border-radius:8px; color:var(--fg); font:inherit; min-height:130px; padding:10px; resize:vertical; }
.contact-row { align-items:center; border-bottom:1px solid #ffffff12; display:flex; gap:8px; justify-content:space-between; padding:5px 0; }
.contact-use { background:transparent; border:0; border-radius:6px; box-shadow:none; color:var(--fg); flex:1; margin:0; padding:8px 10px; text-align:left; }
.contact-use:hover { background:#00c8ff12; filter:none; }
.contact-use strong { display:block; font-size:13px; }
.contact-use span { color:var(--muted); font-size:11px; }
@media (max-width:700px) { .mail-inbox { grid-template-columns:1fr; }.mail-list { border-bottom:1px solid var(--border); border-right:0; max-height:260px; }.mail-reader { min-height:240px; } }
.ip { align-items:center; background:#12191f55; border:1px solid #ffffff0d; border-radius:7px; display:flex; justify-content:space-between; margin:7px 0 0; padding:8px 9px 8px 12px; }
.ip::before { background:var(--ok); border-radius:50%; box-shadow:0 0 8px #5cb38388; content:''; height:6px; margin-right:8px; width:6px; }
.ip span { flex:1; }
.ip .remove-ip { background:linear-gradient(180deg,#743840,#54272e); border:1px solid #df6b72; box-shadow:0 2px 10px #8f1f2b4d;
  color:#fff2f1; font-size:11px; font-weight:700; margin:0; min-width:82px; padding:6px 10px; }
.ip .remove-ip:hover { background:linear-gradient(180deg,#91434c,#6a2d35); box-shadow:0 4px 16px #8f1f2b70; filter:none; }
.badge { font-size:12px; padding:3px 11px; border-radius:99px; background:var(--ok); color:#0d1512; font-weight:600; }
.badge.suspended { background:var(--warn); color:#221c0a; }
.badge.revoked, .badge.expired { background:var(--ember-crimson); color:#fff; box-shadow:0 0 12px #b8283f4d; }
.badge.online { background:#1d3a2c; color:#8fe0b3; border:1px solid #2f5d45; box-shadow:0 0 12px #2f5d4566; }
.badge.online::before { content:'●'; margin-right:5px; font-size:9px; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (max-width:560px) { .lic { padding:16px; } .lic-head h3 { font-size:15px; } .lic .row { padding:7px; } .lic .row input { flex-basis:100%; } }

.tablewrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.08em; background:#161c21; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:#e14b4b0d; }
.st-active { color:#8fe0b3; } .st-suspended { color:#e6cd82; } .st-revoked, .st-disabled { color:#e79b86; }
.formgrid { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:14px; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:28px; border-top:1px solid var(--border);
  margin-top:24px; position:relative; z-index:1; }
footer::before { content:''; position:absolute; top:-1px; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--ember-crimson), var(--ember2), var(--ember-crimson), transparent); opacity:.7; }
#msg { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#0d1114f5; padding:11px 20px;
  border-radius:10px; border:1px solid var(--ember-dim); z-index:50; box-shadow:0 10px 30px #000a; font-size:14px;
  transition:opacity .2s; }
#msg:empty { display:none; }
code { background:var(--input); padding:2px 6px; border-radius:4px; }

/* Neon cyberpunk palette overrides */
:root {
  --bg:#090713; --card:#171329; --input:#100d20; --border:#39305f;
  --fg:#f5f2ff; --muted:#b5aed2; --silver:#e2ddfa; --silver2:#c3b9e6;
  --steel:#56447c; --steel2:#2c2549; --ok:#42f5bd; --warn:#ffd166; --bad:#ff5d8f;
  --ember:#ff3cac; --ember2:#ff75c8; --ember-dim:#7c245e; --ember-deep:#4d153c;
  --ember-bright:#ffb0df; --ember-crimson:#d82492;
}
body {
  background-image:
    radial-gradient(900px 520px at 88% -10%, #ff3cac38, transparent 62%),
    radial-gradient(760px 520px at 4% 8%, #18e0ff2b, transparent 63%),
    radial-gradient(740px 500px at 50% 100%, #783cff26, transparent 68%),
    linear-gradient(135deg,#090713,#100b21 52%,#070b18);
}
body::before { background:
  radial-gradient(500px 280px at 12% 25%, #18e0ff20, transparent 70%),
  radial-gradient(600px 320px at 88% 72%, #ff3cac21, transparent 70%),
  radial-gradient(420px 260px at 54% 42%, #783cff1c, transparent 70%); }
body::after { background:linear-gradient(90deg,transparent,#18e0ff,#ff3cac,#a855f7,#18e0ff,transparent); }
header { background:linear-gradient(105deg,#111025f7 0%,#1b1537f5 52%,#0c1730f7 100%); border-bottom-color:#5b4a80;
  box-shadow:0 10px 32px #000a, 0 1px 0 #18e0ff7a; }
header::before { background:linear-gradient(90deg,transparent,#18e0ff88,#ff3cac88,transparent); }
header::after { background:radial-gradient(ellipse at center,#18e0ff2a,transparent 68%); }
.vapor { background:linear-gradient(90deg,#f7f5ff,#18e0ff 42%,#ff75c8 78%,#ffb0df); -webkit-background-clip:text; background-clip:text; }
nav a:hover { color:#18e0ff; }
nav a::after { background:linear-gradient(90deg,#18e0ff,#ff3cac); }
header #who { background:#0907139c; border-color:#18e0ff3d; }
header #logout { background:linear-gradient(180deg,#34224e,#211633); border-color:#ff75c866; }
header #logout:hover { background:linear-gradient(180deg,#4c2b69,#2f1a47); border-color:#18e0ff9c; box-shadow:0 0 18px #18e0ff55; }
.hero-banner { border-color:#65518d; box-shadow:0 24px 60px #000c,0 0 80px -20px #18e0ff4d inset; }
#hero:hover .hero-banner { box-shadow:0 28px 70px #000e,0 0 110px -18px #ff3cac6b inset; }
#hero::after { background:linear-gradient(180deg,transparent 55%,#090713cc 100%),linear-gradient(90deg,#18e0ff22,transparent 30%,transparent 70%,#ff3cac28); }
h2 { border-left-color:#18e0ff; background:linear-gradient(90deg,#18e0ff16,transparent 65%); }
h2::after { background:linear-gradient(90deg,#18e0ff,#ff3cac,transparent); }
.home-intro .eyebrow,.catalogue-strip strong { color:#18e0ff; }
.home-features { background:#120e249c; border-color:#45366a; }
.side-tabs { background:linear-gradient(90deg,#18112fa8,transparent); border-left-color:#5b4a80; }
.side-tabs button.active { background:linear-gradient(90deg,#18e0ff2a,#ff3cac16); border-color:#18e0ff48; box-shadow:inset 3px 0 0 #18e0ff,0 0 18px #18e0ff18; text-shadow:0 0 16px #18e0ff88; }
.side-tabs button:hover { border-color:#18e0ff28; }
input,select { background:#100d20; border-color:#4a3c72; }
input:focus,select:focus { border-color:#18e0ff; box-shadow:0 0 0 3px #18e0ff25,0 0 20px -4px #18e0ff8a; }
button.discord,a.btn-link.discord { background:linear-gradient(180deg,#6474ff,#4558db); }
.card { background:linear-gradient(165deg,#211a38,#120f23); border-color:#44366a; box-shadow:0 12px 34px #0008,inset 0 1px 0 #ffffff14; }
.card::after { background:linear-gradient(90deg,transparent,#18e0ff,#ff3cac,transparent); }
.card:hover { border-color:#18e0ff8c; box-shadow:0 18px 48px #000a,0 0 0 1px #18e0ff3b,0 0 44px -12px #ff3cac62; }
.card-bot { background:linear-gradient(165deg,#1b1d48,#111331); border-color:#5365bc; }
.badge.cat-mod { background:#203c54; color:#9beeff; }
.badge.cat-bot { background:#38337a; color:#c9c9ff; }
.lic { background:linear-gradient(165deg,#211a38,#120f23); border-color:#44366a; border-left-color:#18e0ff; }
.lic::before { background:linear-gradient(90deg,#18e0ff,#ff3cac,transparent); }
.lic:hover { border-color:#18e0ff7a; border-left-color:#ff3cac; box-shadow:0 14px 38px #0009,0 0 34px -14px #18e0ff66; }
.lic-head { border-bottom-color:#ffffff19; }
.key { background:#0d0a1a; border-color:#18e0ff68; color:#7df3ff; text-shadow:0 0 12px #18e0ff66; }
.lic .row,.ip { background:#0d0a1a8a; border-color:#ffffff14; }
.ip::before { background:#42f5bd; box-shadow:0 0 9px #42f5bd99; }
.ip .remove-ip { background:linear-gradient(180deg,#7a285a,#4d1839); border-color:#ff75c8; box-shadow:0 2px 12px #ff3cac52; }
.ip .remove-ip:hover { background:linear-gradient(180deg,#a13278,#651d4c); box-shadow:0 4px 18px #ff3cac7a; }
.badge.online { background:#123c3a; border-color:#2aa88c; color:#78ffdc; box-shadow:0 0 14px #42f5bd55; }
th { background:#15102a; }
tbody tr:hover { background:#18e0ff12; }
footer::before { background:linear-gradient(90deg,transparent,#18e0ff,#ff3cac,#18e0ff,transparent); }
#msg { background:#100d20f5; border-color:#18e0ff70; box-shadow:0 10px 34px #000a,0 0 24px #18e0ff2e; }

body::before {
  background-image:
    linear-gradient(#18e0ff08 1px,transparent 1px),
    linear-gradient(90deg,#18e0ff08 1px,transparent 1px),
    radial-gradient(500px 280px at 12% 25%,#18e0ff20,transparent 70%),
    radial-gradient(600px 320px at 88% 72%,#ff3cac21,transparent 70%),
    radial-gradient(420px 260px at 54% 42%,#783cff1c,transparent 70%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
}
h2 { color:#d7f9ff; text-shadow:0 0 18px #18e0ff38; }
.home-intro h2 { text-shadow:0 0 28px #18e0ff2b,0 0 42px #ff3cac18; }
.home-features article { transition:background .2s ease,box-shadow .2s ease; }
.home-features article:hover { background:#18e0ff0b; box-shadow:inset 0 0 22px #18e0ff12; }
.home-features article:hover span { color:#ffb0df; text-shadow:0 0 12px #ff3cac; }
button:not(.ghost),a.btn-link:not(.secondary) { box-shadow:0 4px 18px #ff3cac4d,inset 0 1px 0 #ffffff4d; }
button:not(.ghost):hover,a.btn-link:not(.secondary):hover { box-shadow:0 7px 26px #ff3cac6b,0 0 14px #18e0ff42,inset 0 1px 0 #ffffff55; }
button.ghost,a.btn-link.secondary { position:relative; }
button.ghost:hover,a.btn-link.secondary:hover { box-shadow:0 0 16px #18e0ff38,inset 0 0 12px #18e0ff16; }
.card-bot { box-shadow:0 12px 34px #0008,0 0 24px #6374ff24,inset 0 1px 0 #ffffff14; }
.badge { box-shadow:0 0 12px #42f5bd33; }
.badge.cat { box-shadow:0 0 13px #18e0ff24; }

/* Cyan signal palette: replaces the earlier pink and violet neon accents. */
:root {
  --bg:#071312; --card:#102321; --input:#091917; --border:#24544e;
  --fg:#edfffb; --muted:#9bc2b9; --silver:#d6f3ea; --silver2:#a8d2c6;
  --steel:#35736a; --steel2:#173f3a; --ok:#7dff7a; --warn:#ffe66d; --bad:#ff6b4a;
  --ember:#18e0ff; --ember2:#64f7ff; --ember-dim:#176d6c; --ember-deep:#104743;
  --ember-bright:#b6ffff; --ember-crimson:#1db8a9;
}
body { background-image:
  radial-gradient(900px 520px at 88% -10%,#18e0ff28,transparent 62%),
  radial-gradient(760px 520px at 4% 8%,#7dff7a1e,transparent 63%),
  radial-gradient(740px 500px at 50% 100%,#ffe66d12,transparent 68%),
  linear-gradient(135deg,#071312,#091e1b 52%,#050d0c); }
body::before { background-image:
  linear-gradient(#64f7ff08 1px,transparent 1px),linear-gradient(90deg,#64f7ff08 1px,transparent 1px),
  radial-gradient(500px 280px at 12% 25%,#18e0ff1e,transparent 70%),
  radial-gradient(600px 320px at 88% 72%,#7dff7a18,transparent 70%),
  radial-gradient(420px 260px at 54% 42%,#ffe66d12,transparent 70%); }
body::after { background:linear-gradient(90deg,transparent,#18e0ff,#7dff7a,#ffe66d,#18e0ff,transparent); }
header { background:linear-gradient(105deg,#0c211ef7 0%,#12332ef5 52%,#09201ef7 100%); border-bottom-color:#35736a; box-shadow:0 10px 32px #000a,0 1px 0 #18e0ff78; }
header::before { background:linear-gradient(90deg,transparent,#18e0ff88,#7dff7a88,transparent); }
header::after { background:radial-gradient(ellipse at center,#18e0ff24,transparent 68%); }
.vapor { background:linear-gradient(90deg,#edfffb,#64f7ff 42%,#7dff7a 78%,#e9ffd1); -webkit-background-clip:text; background-clip:text; }
nav a::after,h2::after,.lic::before,.card::after { background:linear-gradient(90deg,#18e0ff,#7dff7a,transparent); }
nav a:hover { color:#7dff7a; }
header #logout { background:linear-gradient(180deg,#19544d,#103832); border-color:#64f7ff66; }
header #logout:hover { background:linear-gradient(180deg,#217168,#154a43); border-color:#7dff7a9c; box-shadow:0 0 18px #7dff7a4d; }
h2 { color:#d9fffb; text-shadow:0 0 18px #18e0ff42; }
.home-intro h2 { text-shadow:0 0 28px #18e0ff29,0 0 42px #7dff7a16; }
.home-intro .eyebrow,.catalogue-strip strong { color:#7dff7a; }
.side-tabs { background:linear-gradient(90deg,#0f2c27a8,transparent); border-left-color:#35736a; }
.side-tabs button.active { background:linear-gradient(90deg,#18e0ff25,#7dff7a12); border-color:#18e0ff48; box-shadow:inset 3px 0 0 #18e0ff,0 0 18px #18e0ff18; text-shadow:0 0 16px #18e0ff88; }
input,select { background:#091917; border-color:#28655d; }
.card,.lic { background:linear-gradient(165deg,#15332e,#0b1d1a); border-color:#286057; }
.card:hover,.lic:hover { border-color:#64f7ff8c; box-shadow:0 18px 48px #000a,0 0 0 1px #18e0ff3b,0 0 44px -12px #7dff7a4d; }
.lic { border-left-color:#18e0ff; }
.lic:hover { border-left-color:#7dff7a; }
.key { background:#071312; border-color:#18e0ff68; color:#8cffff; text-shadow:0 0 12px #18e0ff66; }
.lic .row,.ip { background:#0713128a; }
.ip .remove-ip { background:linear-gradient(180deg,#773622,#4d2117); border-color:#ff9b6a; box-shadow:0 2px 12px #ff6b4a52; }
.ip .remove-ip:hover { background:linear-gradient(180deg,#985036,#632a1e); box-shadow:0 4px 18px #ff6b4a7a; }
button:not(.ghost),a.btn-link:not(.secondary) { box-shadow:0 4px 18px #18e0ff4d,inset 0 1px 0 #ffffff4d; }
button:not(.ghost):hover,a.btn-link:not(.secondary):hover { box-shadow:0 7px 26px #18e0ff6b,0 0 14px #7dff7a42,inset 0 1px 0 #ffffff55; }
.badge.cat-mod { background:#164d4c; color:#aafff8; }
.badge.cat-bot { background:#1b4a46; color:#b9fff1; }
footer::before { background:linear-gradient(90deg,transparent,#18e0ff,#7dff7a,#18e0ff,transparent); }

/* Black and orange industrial palette. */
:root {
  --bg:#0c0c0b; --card:#201d18; --input:#15130f; --border:#564633;
  --fg:#fff9ef; --muted:#c3b69f; --silver:#f4e6cf; --silver2:#d7c3a4;
  --steel:#806445; --steel2:#3a3023; --ok:#ffa32b; --warn:#ffe16a; --bad:#ff6547;
  --ember:#ff7a18; --ember2:#ffae42; --ember-dim:#894315; --ember-deep:#4a2510;
  --ember-bright:#ffd091; --ember-crimson:#d95812;
}
body { background-image:
  radial-gradient(900px 520px at 88% -10%,#ff7a182d,transparent 62%),
  radial-gradient(760px 520px at 4% 8%,#ffae421b,transparent 63%),
  radial-gradient(740px 500px at 50% 100%,#ffcf5c12,transparent 68%),
  linear-gradient(135deg,#0c0c0b,#17130e 52%,#080807); }
body::before { background-image:
  linear-gradient(#ffae4208 1px,transparent 1px),linear-gradient(90deg,#ffae4208 1px,transparent 1px),
  radial-gradient(500px 280px at 12% 25%,#ff7a181d,transparent 70%),
  radial-gradient(600px 320px at 88% 72%,#ffae4219,transparent 70%),
  radial-gradient(420px 260px at 54% 42%,#ffcf5c10,transparent 70%); }
body::after { background:linear-gradient(90deg,transparent,#ff7a18,#ffcf5c,#ffae42,#ff7a18,transparent); }
header { background:linear-gradient(105deg,#1a1712f7 0%,#312417f5 52%,#17130ef7 100%); border-bottom-color:#806445; box-shadow:0 10px 32px #000a,0 1px 0 #ff7a1878; }
header::before { background:linear-gradient(90deg,transparent,#ff7a1888,#ffcf5c88,transparent); }
header::after { background:radial-gradient(ellipse at center,#ff7a1824,transparent 68%); }
.vapor { background:linear-gradient(90deg,#fff9ef,#ffcf8b 40%,#ff7a18 76%,#ffe0a4); -webkit-background-clip:text; background-clip:text; }
nav a::after,h2::after,.lic::before,.card::after { background:linear-gradient(90deg,#ff7a18,#ffcf5c,transparent); }
nav a:hover { color:#ffcf5c; }
header #logout { background:linear-gradient(180deg,#59391c,#382311); border-color:#ffae4266; }
header #logout:hover { background:linear-gradient(180deg,#764923,#4e2d14); border-color:#ffcf5c9c; box-shadow:0 0 18px #ff7a184d; }
h2 { color:#fff0d9; text-shadow:0 0 18px #ff7a1842; }
.home-intro h2 { text-shadow:0 0 28px #ff7a1829,0 0 42px #ffcf5c16; }
.home-intro .eyebrow,.catalogue-strip strong { color:#ffcf5c; }
.side-tabs { background:linear-gradient(90deg,#2b2016a8,transparent); border-left-color:#806445; }
.side-tabs button.active { background:linear-gradient(90deg,#ff7a1825,#ffcf5c12); border-color:#ff7a1848; box-shadow:inset 3px 0 0 #ff7a18,0 0 18px #ff7a1818; text-shadow:0 0 16px #ff7a1888; }
input,select { background:#15130f; border-color:#705333; }
.card,.lic { background:linear-gradient(165deg,#2a241b,#17140f); border-color:#5b4933; }
.card:hover,.lic:hover { border-color:#ffae428c; box-shadow:0 18px 48px #000a,0 0 0 1px #ff7a183b,0 0 44px -12px #ff7a184d; }
.lic { border-left-color:#ff7a18; }
.lic:hover { border-left-color:#ffcf5c; }
.key { background:#0c0c0b; border-color:#ffae4268; color:#ffd28f; text-shadow:0 0 12px #ff7a1866; }
.lic .row,.ip { background:#0c0c0b8a; }
.ip::before { background:#ffcf5c; box-shadow:0 0 9px #ffcf5c99; }
button:not(.ghost),a.btn-link:not(.secondary) { box-shadow:0 4px 18px #ff7a184d,inset 0 1px 0 #ffffff4d; }
button:not(.ghost):hover,a.btn-link:not(.secondary):hover { box-shadow:0 7px 26px #ff7a186b,0 0 14px #ffcf5c42,inset 0 1px 0 #ffffff55; }
.badge.cat-mod { background:#4e351d; color:#ffe0a7; }
.badge.cat-bot { background:#493522; color:#ffe5bd; }
footer::before { background:linear-gradient(90deg,transparent,#ff7a18,#ffcf5c,#ff7a18,transparent); }

/* Original Project Vapor black and red theme. */
:root {
  --bg:#0d1013; --card:#1a2126; --input:#10151a; --border:#2b353d;
  --fg:#e9eef1; --muted:#93a4ae; --silver:#cfdae0; --silver2:#9fb2bc;
  --steel:#3d4d58; --steel2:#2c3840; --ok:#5cb383; --warn:#d6b45c; --bad:#c96a58;
  --ember:#e14b4b; --ember2:#ff6a5c; --ember-dim:#7a2f2f; --ember-deep:#8f1f2b;
  --ember-bright:#ff8a70; --ember-crimson:#b8283f;
}
body { background-image:
  radial-gradient(1100px 480px at 78% -12%,#e14b4b22,transparent 60%),
  radial-gradient(900px 460px at 8% 0%,#b8283f1c,transparent 60%),
  radial-gradient(650px 420px at 50% 100%,#8f1f2b16,transparent 65%),
  radial-gradient(700px 380px at 50% 100%,#1c242a55,transparent 65%); }
body::before { background:
  radial-gradient(500px 260px at 15% 20%,#e14b4b1c,transparent 70%),
  radial-gradient(600px 300px at 85% 75%,#ff6a5c1a,transparent 70%),
  radial-gradient(420px 240px at 60% 40%,#b8283f16,transparent 70%); background-size:auto; }
body::after { background:linear-gradient(90deg,transparent,var(--ember-crimson),var(--ember2),var(--ember-bright),var(--ember2),var(--ember-crimson),transparent); }
header { background:linear-gradient(90deg,#12161bf0,#1b2229f0); border-bottom-color:var(--border); box-shadow:0 6px 24px #0007,0 1px 0 #e14b4b30; }
header::before { background:linear-gradient(90deg,transparent,#e14b4b44,transparent); }
header::after { background:radial-gradient(ellipse at center,#e14b4b20,transparent 68%); }
.vapor { background:linear-gradient(90deg,#ffffff,#ff8f83 55%,#e14b4b); -webkit-background-clip:text; background-clip:text; }
nav a:hover { color:var(--ember2); }
nav a::after,h2::after,.lic::before,.card::after { background:linear-gradient(90deg,var(--ember),var(--ember-crimson),transparent); }
header #logout { background:var(--steel2); border-color:var(--border); }
header #logout:hover { background:var(--steel2); border-color:var(--silver2); box-shadow:none; filter:brightness(1.15); }
h2 { color:var(--muted); text-shadow:none; }
.home-intro h2 { text-shadow:none; }
.home-intro .eyebrow,.catalogue-strip strong { color:var(--ember-bright); }
.side-tabs { background:linear-gradient(90deg,#12171b88,transparent); border-left-color:var(--border); }
.side-tabs button.active { background:linear-gradient(90deg,#e14b4b2e,#b8283f12); border-color:#e14b4b38; box-shadow:inset 3px 0 0 var(--ember2); text-shadow:0 0 18px #e14b4b55; }
input,select { background:var(--input); border-color:var(--border); }
.card,.lic { background:linear-gradient(165deg,#1d252b,#151a1e); border-color:var(--border); }
.card:hover { border-color:var(--ember-dim); box-shadow:0 16px 44px #000a,0 0 0 1px #e14b4b22,0 0 40px -12px #e14b4b3d; }
.lic { border-left-color:var(--ember-dim); }
.lic:hover { border-color:var(--ember-dim); border-left-color:var(--ember2); box-shadow:0 14px 36px #0008,0 0 30px -14px #e14b4b40; }
.key { background:var(--input); border-color:var(--ember-dim); color:var(--ember2); text-shadow:0 0 12px #e14b4b40; }
.lic .row,.ip { background:#12191f55; border-color:#ffffff0d; }
.ip::before { background:var(--ok); box-shadow:0 0 8px #5cb38388; }
.ip .remove-ip { background:linear-gradient(180deg,#743840,#54272e); border-color:#df6b72; box-shadow:0 2px 10px #8f1f2b4d; }
.ip .remove-ip:hover { background:linear-gradient(180deg,#91434c,#6a2d35); box-shadow:0 4px 16px #8f1f2b70; }
button:not(.ghost),a.btn-link:not(.secondary) { box-shadow:0 4px 16px #e14b4b3d,inset 0 1px 0 #ffffff40; }
button:not(.ghost):hover,a.btn-link:not(.secondary):hover { box-shadow:0 8px 26px #e14b4b60,inset 0 1px 0 #ffffff40; }
.badge.cat-mod { background:var(--steel2); color:var(--silver); }
.badge.cat-bot { background:#2d3a6b; color:#aebdf7; }
footer::before { background:linear-gradient(90deg,transparent,var(--ember-crimson),var(--ember2),var(--ember-crimson),transparent); }

/* Final vivid neon palette. */
:root {
  --bg:#0a1322; --card:#1a2b40; --input:#101e30; --border:#426987;
  --fg:#f7fcff; --muted:#b9d0df; --silver:#e2f5ff; --silver2:#bfd9e9;
  --steel:#4b7da0; --steel2:#25435e; --ok:#ffe45c; --warn:#ffae45; --bad:#ff6d62;
  --ember:#22d3ee; --ember2:#8af3ff; --ember-dim:#247ca0; --ember-deep:#124c68;
  --ember-bright:#d0fbff; --ember-crimson:#ff8a3d;
}
body { background-image:
  radial-gradient(900px 560px at 88% -10%,#22d3ee46,transparent 62%),
  radial-gradient(720px 520px at 5% 13%,#ff8a3d32,transparent 63%),
  radial-gradient(820px 500px at 48% 105%,#ffe45c20,transparent 70%),
  linear-gradient(135deg,#0a1322,#10253a 52%,#0c1725); }
body::before { background:
  linear-gradient(#8af3ff0c 1px,transparent 1px),linear-gradient(90deg,#8af3ff0c 1px,transparent 1px),
  radial-gradient(510px 270px at 15% 22%,#22d3ee26,transparent 70%),
  radial-gradient(610px 330px at 86% 75%,#ff8a3d26,transparent 70%); background-size:38px 38px,38px 38px,auto,auto; }
body::after { background:linear-gradient(90deg,transparent,#22d3ee,#ffe45c,#ff8a3d,#22d3ee,transparent); }
header { background:linear-gradient(105deg,#142941f7,#1d4158f5 54%,#172b3df7); border-bottom-color:#4b7da0; box-shadow:0 10px 34px #0009,0 1px 0 #22d3eea8; }
header::before { background:linear-gradient(90deg,transparent,#22d3eeaa,#ffe45caa,transparent); }
header::after { background:radial-gradient(ellipse at center,#22d3ee35,transparent 68%); }
.brandwrap::before { background:linear-gradient(180deg,#00c8ff,#ffdf3e); box-shadow:0 0 12px #00c8ff99; content:''; height:34px; left:-11px; position:absolute; top:50%; transform:translateY(-50%); width:2px; }
.brand-status { background:#06111bb8; border-left:1px solid #ffdf3e; color:#e1f7ff; display:table; font-family:"Sora","Segoe UI",sans-serif; font-size:8px; font-weight:700;
  letter-spacing:.18em; margin-top:4px; padding:2px 5px; text-shadow:0 0 10px #00c8ff99; }
header nav { background:#0c1c2b9c; border:1px solid #8af3ff42; border-radius:9px; gap:8px; padding:5px; }
header nav > a:not(.account-action):not(.discord-community) { padding:6px 8px; }
header #who { background:#00c8ff12; border-color:#00c8ff38; }
header .discord-community { border-color:#ffdf3e54; color:#ffdf3e; }
header .discord-community:hover { background:#ffdf3e14; border-color:#ffdf3e; color:#fff4b5; }
header .account-action { background:linear-gradient(135deg,#8af3ff,#38bdf8); border-color:#d0fbff; box-shadow:0 4px 16px #22d3ee66,inset 0 1px 0 #ffffff8a; color:#062036; }
header .account-action:hover { background:linear-gradient(135deg,#d0fbff,#22d3ee); box-shadow:0 6px 23px #22d3ee88,0 0 16px #ffe45c66; color:#062036; }
@media (max-width:560px) { .brandwrap::before,.brand-status { display:none; } header nav { background:transparent; border:0; padding:0; } }
.vapor { background:linear-gradient(90deg,#f2fbff,#62e8ff 40%,#ffdf3e 70%,#ff8d42); -webkit-background-clip:text; background-clip:text; }
nav a:hover { color:#ffdf3e; }
nav a::after,h2::after,.lic::before,.card::after { background:linear-gradient(90deg,#00c8ff,#ffdf3e,#ff731c,transparent); }
header #logout { background:linear-gradient(180deg,#244b69,#162f45); border-color:#62e8ff80; }
header #logout:hover { background:linear-gradient(180deg,#326588,#1d405b); border-color:#ffdf3e; box-shadow:0 0 20px #00c8ff55; }
h2 { color:#c8f5ff; text-shadow:0 0 20px #00c8ff47; }
.home-intro h2 { text-shadow:0 0 30px #00c8ff30,0 0 48px #ff731c22; }
.home-intro .eyebrow,.catalogue-strip strong { color:#ffdf3e; }
.side-tabs { background:linear-gradient(90deg,#101d2ca8,transparent); border-left-color:#315b7b; }
.side-tabs button.active { background:linear-gradient(90deg,#00c8ff2c,#ffdf3e16); border-color:#00c8ff68; box-shadow:inset 3px 0 0 #00c8ff,0 0 18px #00c8ff24; text-shadow:0 0 16px #62e8ff99; }
input,select,.review-card > textarea,.commission-form textarea { background:#0a111b; border-color:#315b7b; }
.card,.lic { background:linear-gradient(165deg,#213a52,#13263a); border-color:#426987; }
.card:hover,.lic:hover { border-color:#8af3ff; box-shadow:0 18px 52px #000a,0 0 0 1px #22d3ee5c,0 0 48px -12px #ff8a3d7a; }
.lic { border-left-color:#00c8ff; }
.lic:hover { border-left-color:#ffdf3e; }
.key { background:#07111b; border-color:#00c8ff80; color:#b9f8ff; text-shadow:0 0 14px #00c8ff7a; }
.lic .row,.ip { background:#07111b9c; }
.ip::before { background:#ffdf3e; box-shadow:0 0 10px #ffdf3eaa; }
.ip .remove-ip { background:linear-gradient(180deg,#8e342f,#5d201e); border-color:#ff7866; box-shadow:0 3px 14px #ff53535c; }
button:not(.ghost),a.btn-link:not(.secondary) { box-shadow:0 5px 20px #00c8ff50,0 0 13px #ff731c2d,inset 0 1px 0 #ffffff55; }
button:not(.ghost):hover,a.btn-link:not(.secondary):hover { box-shadow:0 8px 28px #00c8ff70,0 0 18px #ffdf3e4a,inset 0 1px 0 #ffffff66; }
.badge { box-shadow:0 0 14px #ffdf3e38; }
.badge.cat-mod { background:#16445e; color:#bbf5ff; }
.badge.cat-bot { background:#2b4963; color:#d4efff; }
footer::before { background:linear-gradient(90deg,transparent,#00c8ff,#ffdf3e,#ff731c,#00c8ff,transparent); }

/* Storefront refinement layer. */
#hero { max-width:780px; }
#hero::before { content:''; position:absolute; inset:10px -14px -18px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,#00c8ff22 2.2%,transparent 2.5%,transparent 97.5%,#ffdf3e22 97.8%,transparent 98%);
  opacity:.8; }
.hero-banner { border-radius:8px; filter:saturate(1.08) contrast(1.04); }
.hero-signal { align-items:center; border-bottom:1px solid #315b7b; color:#9db5c8; display:flex; flex-wrap:wrap; font-family:"Sora","Segoe UI",sans-serif;
  font-size:9px; font-weight:700; gap:0; letter-spacing:.13em; margin:13px auto 0; max-width:620px; text-transform:uppercase; }
.hero-signal span { padding:8px 14px; position:relative; }
.hero-signal span + span { border-left:1px solid #315b7b; }
.signal-live { color:#ffef8a; }
.signal-live i { background:#ffdf3e; border-radius:50%; box-shadow:0 0 0 3px #ffdf3e20,0 0 12px #ffdf3e; display:inline-block; height:6px; margin:0 7px 1px 0; vertical-align:middle; width:6px; animation:signalPulse 1.8s ease-in-out infinite; }
@keyframes signalPulse { 50% { box-shadow:0 0 0 6px #ffdf3e08,0 0 15px #ffdf3e; } }
.home-intro { border-bottom:1px solid #28415a; position:relative; }
.home-intro::after { background:linear-gradient(90deg,#00c8ff,#ffdf3e,transparent); bottom:-1px; content:''; height:1px; left:0; position:absolute; width:180px; }
.home-features { border-radius:8px; }
.home-features article { overflow:hidden; }
.home-features article::after { background:linear-gradient(135deg,transparent 42%,#00c8ff0d); content:''; inset:0; opacity:0; pointer-events:none; position:absolute; transition:opacity .25s ease; }
.home-features article:hover::after { opacity:1; }
.grid .card { animation:cardReveal .45s ease both; }
.grid .card:nth-child(2) { animation-delay:.06s; }
.grid .card:nth-child(3) { animation-delay:.12s; }
.grid .card:nth-child(4) { animation-delay:.18s; }
@keyframes cardReveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.card h3 a { transition:color .18s ease; }
.card:hover h3 a { color:#b9f8ff !important; }
.card .price { align-items:baseline; border-top:1px solid #ffffff12; display:flex; margin-top:18px; padding-top:13px; }
.card .price::before { color:#9db5c8; content:'ACCESS'; font-family:"Sora","Segoe UI",sans-serif; font-size:9px; font-weight:700; letter-spacing:.12em; margin-right:auto; }
.card .term { border:1px solid #315b7b; border-radius:99px; display:table; font-family:"Sora","Segoe UI",sans-serif; font-size:9px; font-weight:700; letter-spacing:.08em; margin-top:10px; padding:5px 8px; text-transform:uppercase; }
.card:focus-visible { outline:2px solid #ffdf3e; outline-offset:3px; }
@media (max-width:560px) {
  #hero { margin-top:18px; }
  .hero-signal { font-size:8px; justify-content:center; }
  .hero-signal span { padding:8px 9px; }
  .home-intro { padding-bottom:27px; }
}
@media (prefers-reduced-motion:reduce) { .grid .card,.signal-live i { animation:none; } }

/* Product and payment panels share the storefront's operational styling. */
.product-card { margin-top:38px !important; }
.product-card::before { background:linear-gradient(120deg,#00c8ff18,transparent 34%,transparent 68%,#ffdf3e12); }
.product-card-top { align-items:center; display:flex; gap:10px; justify-content:space-between; }
.product-ready,.checkout-kicker { align-items:center; color:#b9f8ff; display:inline-flex; font-family:"Sora","Segoe UI",sans-serif; font-size:9px; font-weight:700; gap:7px; letter-spacing:.13em; margin:0; text-transform:uppercase; }
.product-ready i,.checkout-kicker i { background:#7dff7a; border-radius:50%; box-shadow:0 0 10px #7dff7a; height:6px; width:6px; }
.product-card #p-name { color:#f2fbff !important; line-height:1.2; text-shadow:0 0 24px #00c8ff26; }
.product-card #p-desc { color:#b7cfe0; line-height:1.65; }
.product-card .product-media { box-shadow:0 16px 30px #0009,0 0 0 1px #00c8ff18; }
.product-preview { border-color:#ffdf3e88 !important; color:#fff0a7 !important; margin:0 0 18px !important; }
.product-preview[hidden] { display:none !important; }
.product-preview:hover { border-color:#ffdf3e !important; color:#fff9d6 !important; }
.product-planned { border-color:#ff731c54; background:#1d130b8c; }
.product-planned .detail-label { color:#ffcf8b; }
.product-planned li::before { color:#ffdf3e; }
/* A planned item that has since shipped: ticked, with an "Added" tag, rather than silently dropped. */
.product-planned li.done { color:var(--silver); }
.product-planned li.done::before { color:#7dff7a; content:'✓'; }
.product-planned li.done::after { background:#7dff7a1f; border:1px solid #7dff7a66; border-radius:99px; color:#c9ffc7; content:'Added'; font-size:10px; font-weight:700; letter-spacing:.08em; margin-left:8px; padding:1px 7px; text-transform:uppercase; vertical-align:middle; }
.product-purchase-meta { align-items:flex-end; border-top:1px solid #315b7b; display:flex; justify-content:space-between; margin:24px 0 15px; padding-top:15px; }
.product-flow[hidden],.product-purchase-meta[hidden] { display:none !important; }
.product-purchase-meta .price { border:0; margin:0; padding:0; }
.product-purchase-meta .price::before { content:'LICENCE'; display:block; font-size:9px; margin:0 0 4px; }
.product-purchase-meta .muted { background:#00c8ff0d; border:1px solid #315b7b; border-radius:99px; font-family:"Sora","Segoe UI",sans-serif; font-size:9px; font-weight:700; letter-spacing:.08em; margin:0; padding:6px 9px; text-transform:uppercase; }
.product-card .row { border:1px solid #315b7b; border-radius:8px; margin-top:12px; padding:8px; }
.product-card .row input { margin:0 6px 0 0; }
.product-card .row button,.product-card .row .btn-link { margin:0; }
.checkout-card { border-top:2px solid #00c8ff; box-shadow:0 22px 64px #000b,0 0 54px -18px #00c8ff70; }
.checkout-card h2 { border:0; color:#f2fbff; font-size:25px; letter-spacing:0; margin:8px 0 20px; padding:0; text-transform:none; }
.checkout-card h2::after { display:none; }
.checkout-card #summary { background:#07111b9c; border:1px solid #315b7b; border-radius:8px; margin:18px 0; padding:14px; }
.checkout-card #summary p { margin:5px 0; }
.checkout-card #summary .price { border-top:1px solid #315b7b; margin:13px 0 0; padding-top:12px; }
.checkout-card #devnote { border-left:2px solid #ffdf3e; }
.paypal-checkout { align-items:center; background:linear-gradient(135deg,#003087,#0070ba) !important; border:1px solid #55c8ff !important; box-shadow:0 7px 20px #00308788,inset 0 1px 0 #ffffff3d !important; color:#fff !important; display:flex; font-family:"Sora","Segoe UI",sans-serif; font-size:13px; gap:11px; justify-content:center; margin:12px 4px 8px 0 !important; min-height:48px; width:100%; }
.paypal-checkout::before { background:linear-gradient(110deg,transparent 30%,#ffffff36 48%,transparent 66%); }
.paypal-checkout:hover { background:linear-gradient(135deg,#004a99,#008bd2) !important; box-shadow:0 9px 26px #003087aa,0 0 18px #55c8ff55,inset 0 1px 0 #ffffff55 !important; filter:none !important; }
.paypal-wordmark { color:#ffc439; font-size:17px; font-style:italic; font-weight:800; letter-spacing:0; text-shadow:1px 1px 0 #002b5c; }
@media (max-width:560px) { .product-card { margin-top:22px !important; } .product-purchase-meta { align-items:flex-start; flex-direction:column; gap:10px; } .product-card .row input,.product-card .row button,.product-card .row .btn-link { margin:0 0 7px; width:100%; } }

/* Discord products use a separate indigo signal from the cyan/gold mod catalogue. */
.card-bot { background:linear-gradient(155deg,#332361,#1c1740 66%,#14132e) !important; border-color:#856ee8 !important;
  box-shadow:0 14px 36px #08051a99,0 0 28px -12px #a855f766,inset 0 1px 0 #ffffff1f !important; }
.card-bot::before { background:linear-gradient(135deg,#d8b4fe28,transparent 38%,#818cf822 100%) !important; }
.card-bot::after { background:linear-gradient(90deg,transparent,#818cf8,#d946ef,transparent) !important; opacity:.72; }
.card-bot:hover { border-color:#d8b4fe !important; box-shadow:0 20px 52px #08051acc,0 0 0 1px #a855f788,0 0 52px -12px #d946ef8a !important; }
.card-bot:hover h3 a { color:#f3e8ff !important; }
.badge.cat-bot { background:#573b9b !important; border:1px solid #b794f4; color:#f3e8ff !important; box-shadow:0 0 16px #a855f775 !important; }
.card-bot .price::before { color:#d8b4fe; }
.card-bot .term { background:#a855f718; border-color:#a855f766; color:#eadcff; }
.card-bot button:not(.secondary):not(.ghost) { background:linear-gradient(135deg,#818cf8,#d946ef) !important; box-shadow:0 5px 20px #a855f766,0 0 14px #818cf844,inset 0 1px 0 #ffffff75 !important; color:#16051d !important; }
.card-bot button:not(.secondary):not(.ghost):hover { box-shadow:0 9px 28px #a855f799,0 0 20px #d946ef66,inset 0 1px 0 #ffffff80 !important; }

/* Native select menus keep the same operational blue surface as inputs and panels. */
select { background-color:#10263c !important; border-color:#4b7da0 !important; box-shadow:inset 0 1px 0 #ffffff12,0 3px 10px #0004; color:#e7f8ff !important; font-family:"Sora","Segoe UI",sans-serif; font-size:12px; font-weight:600; letter-spacing:.03em; min-height:40px; }
select:hover { border-color:#8af3ff !important; box-shadow:inset 0 1px 0 #ffffff1c,0 0 16px -5px #22d3ee99; }
select:focus { border-color:#ffe45c !important; box-shadow:0 0 0 3px #ffe45c2e,0 0 20px -4px #22d3eea0 !important; }
select option { background:#10263c; color:#f7fcff; font-family:"Segoe UI",sans-serif; font-weight:500; }
select option:checked { background:#1d587b; color:#fff; }

/* ---------- Background effects layer (.bg-fx) ----------
   Sits behind everything (main is z-index:1). Every animation here moves only transform or
   opacity so it stays on the compositor and costs the page nothing measurable. Static under
   prefers-reduced-motion. */
.bg-fx { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-fx > * , .bg-fx .fx-floor > i { position:absolute; display:block; }

/* Two fog banks echoing the smoke in the logo - cyan and amber, drifting on different clocks. */
.bg-fx .fx-fog { width:140vmax; height:140vmax; left:50%; top:50%; margin:-70vmax 0 0 -70vmax; border-radius:50%;
  mix-blend-mode:screen; opacity:.75; will-change:transform;
  background:radial-gradient(closest-side, #22d3ee26, #22d3ee0e 42%, transparent 70%); animation:fxFogA 48s ease-in-out infinite alternate; }
.bg-fx .fx-fog-b { background:radial-gradient(closest-side, #ff8a3d22, #ff8a3d0b 42%, transparent 70%); animation:fxFogB 61s ease-in-out infinite alternate; }
@keyframes fxFogA { from { transform:translate(-18%,-14%) scale(1); } to { transform:translate(14%,10%) scale(1.25); } }
@keyframes fxFogB { from { transform:translate(16%,14%) scale(1.15); } to { transform:translate(-12%,-16%) scale(.95); } }

/* Perspective grid floor rolling toward the viewer along the bottom of the screen. The child grid
   slides one cell (80px) per loop, so the motion is seamless; the mask fades it into the horizon. */
.bg-fx .fx-floor { left:-40%; right:-40%; bottom:-4vh; height:56vh; overflow:hidden; opacity:.5;
  transform-origin:50% 100%; transform:perspective(460px) rotateX(63deg);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 62%, #000 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 62%, #000 100%); }
.bg-fx .fx-floor > i { left:0; right:0; top:-160px; bottom:0; will-change:transform;
  background:linear-gradient(90deg, #22d3ee3a 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(#22d3ee3a 1px, transparent 1px) 0 0 / 80px 80px;
  animation:fxGridScroll 2.6s linear infinite; }
@keyframes fxGridScroll { to { transform:translateY(80px); } }
.bg-fx .fx-horizon { left:0; right:0; bottom:38vh; height:2px; opacity:.45;
  background:linear-gradient(90deg, transparent, #22d3ee88 30%, #ffe45caa 50%, #22d3ee88 70%, transparent); box-shadow:0 0 18px 2px #22d3ee55; }

/* A soft light beam that sweeps the page every so often. */
.bg-fx .fx-sweep { top:-30%; bottom:-30%; left:0; width:26vw; mix-blend-mode:screen; opacity:0; will-change:transform, opacity;
  background:linear-gradient(90deg, transparent, #8af3ff14 44%, #ffe45c1c 50%, #8af3ff14 56%, transparent);
  animation:fxSweep 18s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes fxSweep { 0% { transform:rotate(16deg) translateX(-70vw); opacity:0; } 8% { opacity:1; }
  55% { transform:rotate(16deg) translateX(180vw); opacity:1; } 56%, 100% { transform:rotate(16deg) translateX(180vw); opacity:0; } }

/* Faint specks that twinkle out of phase - two layers so the pattern never repeats visibly. */
.bg-fx .fx-specks { inset:0; opacity:.6; animation:fxTwinkle 7s ease-in-out infinite alternate; background-image:
  radial-gradient(1.6px 1.6px at 8% 22%, #d0fbffd0, transparent 70%), radial-gradient(1.2px 1.2px at 23% 61%, #8af3ffc0, transparent 70%),
  radial-gradient(1.8px 1.8px at 37% 14%, #ffe45cb0, transparent 70%), radial-gradient(1.3px 1.3px at 52% 47%, #d0fbffc0, transparent 70%),
  radial-gradient(1.5px 1.5px at 66% 28%, #8af3ffc8, transparent 70%), radial-gradient(1.2px 1.2px at 78% 66%, #ffd0a8b0, transparent 70%),
  radial-gradient(1.7px 1.7px at 91% 19%, #d0fbffd0, transparent 70%), radial-gradient(1.3px 1.3px at 14% 82%, #8af3ffb0, transparent 70%); }
.bg-fx .fx-specks-b { animation-duration:9s; animation-delay:-4s; background-image:
  radial-gradient(1.4px 1.4px at 18% 38%, #ffe45cb0, transparent 70%), radial-gradient(1.6px 1.6px at 31% 76%, #d0fbffc8, transparent 70%),
  radial-gradient(1.2px 1.2px at 45% 9%, #8af3ffc0, transparent 70%), radial-gradient(1.7px 1.7px at 59% 63%, #ffd0a8b0, transparent 70%),
  radial-gradient(1.3px 1.3px at 72% 42%, #d0fbffd0, transparent 70%), radial-gradient(1.5px 1.5px at 85% 84%, #8af3ffb8, transparent 70%),
  radial-gradient(1.2px 1.2px at 96% 51%, #ffe45cb0, transparent 70%), radial-gradient(1.6px 1.6px at 5% 57%, #d0fbffc0, transparent 70%); }
@keyframes fxTwinkle { from { opacity:.25; } to { opacity:.9; } }

@media (max-width:560px) { .bg-fx .fx-floor { height:40vh; } .bg-fx .fx-horizon { bottom:28vh; } .bg-fx .fx-sweep { display:none; } }
@media (prefers-reduced-motion: reduce) { .bg-fx * { animation:none !important; } .bg-fx .fx-sweep { display:none; } }

/* ---------- Offers (automatic promotions) ---------- */
.offers { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin:6px 0 22px; }
.offer { background:linear-gradient(165deg,#1b3550,#112438); border:1px solid #22d3ee55; border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden;
  box-shadow:0 12px 34px #0008, inset 0 1px 0 #ffffff14; }
.offer::before { content:''; position:absolute; inset:0; background:radial-gradient(420px 140px at 100% 0%, #22d3ee22, transparent 70%); pointer-events:none; }
.offer-tag { display:inline-block; font-family:"Sora","Segoe UI",sans-serif; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#8af3ff;
  background:#22d3ee1a; border:1px solid #22d3ee55; border-radius:99px; padding:3px 9px; }
.offer h3 { margin:10px 0 6px; font-size:17px; color:var(--fg); }
.offer p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.offer-hot { border-color:#ffe45c88; background:linear-gradient(165deg,#3a2c14,#1e1a12); }
.offer-hot::before { background:radial-gradient(420px 140px at 100% 0%, #ffe45c2a, transparent 70%); }
.offer-hot .offer-tag { color:#ffe45c; background:#ffe45c1a; border-color:#ffe45c66; animation:pulse 2.4s ease-in-out infinite; }
.basket-nudge { background:#ffe45c14; border:1px solid #ffe45c55; border-radius:10px; color:#ffefa8; font-size:12px; margin:0 0 10px; padding:8px 10px; }
.basket-breakdown { display:grid; gap:4px; margin:10px 0 6px; }
.basket-line { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
.basket-line strong { white-space:nowrap; }
.basket-line.saving { color:#c9ffc7; }
.basket-line.saving strong { color:#7dff7a; }
.coupon.invalid { border-color:var(--bad); }
.product-offers { margin-top:10px; }

/* Repack-rights products: amber badge, and a little breathing room for the section blurb. */
.badge.cat-repack { background:#4a3313; color:#ffd9a8; }
.repack-blurb { margin:-6px 0 14px; max-width:720px; }