:root{
  --bg:#050608;
  --bg2:#07090d;
  --surface:#090b0f;
  --surface2:#0d1016;
  --surface3:#111620;
  --line:rgba(255,255,255,.065);
  --line-strong:rgba(255,255,255,.12);
  --text:#f5f7fa;
  --text2:#b5bdc9;
  --muted:#6f7887;
  --accent:#3b82f6;
  --accent2:#60a5fa;
  --danger:#ef4444;
  --warning:#f59e0b;
  --success:#22c55e;
  --radius:16px;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% -10%,rgba(59,130,246,.12),transparent 28rem),
    radial-gradient(circle at 90% 20%,rgba(37,99,235,.07),transparent 34rem),
    linear-gradient(180deg,#050608 0%,#06070a 100%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}
.subtle{color:var(--text2)}
.good{color:var(--success)}
.warn{color:var(--warning)}
.bad{color:var(--danger)}
.mono{font-family:"SFMono-Regular",Consolas,monospace}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 16px;
  border-right:1px solid var(--line);
  background:rgba(5,6,8,.88);
  backdrop-filter:blur(22px);
  z-index:5;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:0 8px 22px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#17233b,#0a0d13);
  border:1px solid rgba(96,165,250,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 30px rgba(59,130,246,.10);
  color:#8ab8ff;font-weight:800;
}
.brand-copy strong{display:block;font-size:14px;letter-spacing:.02em}
.brand-copy span{display:block;font-size:11px;color:var(--muted);margin-top:3px}

.nav{display:grid;gap:4px}
.nav button{
  width:100%;
  border:0;
  color:var(--text2);
  background:transparent;
  padding:11px 12px;
  border-radius:11px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  transition:.18s ease;
}
.nav button:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav button.active{
  color:white;
  background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(59,130,246,.05));
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.12);
}
.nav .dot{
  width:7px;height:7px;border-radius:999px;
  background:#434a57;transition:.18s ease;
}
.nav button.active .dot{background:var(--accent2);box-shadow:0 0 16px rgba(96,165,250,.7)}

.sidebar-foot{
  position:absolute;left:16px;right:16px;bottom:18px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.actor-card{
  padding:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.actor-card strong{font-size:13px}
.actor-card small{display:block;color:var(--muted);margin-top:3px}

.main{min-width:0;padding:0 30px 50px}
.topbar{
  height:78px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;
  background:linear-gradient(180deg,rgba(5,6,8,.96),rgba(5,6,8,.82));
  backdrop-filter:blur(18px);
  z-index:4;
}
.topbar h1{font-size:20px;margin:0;letter-spacing:-.02em}
.topbar .crumb{font-size:12px;color:var(--muted);margin-top:4px}

.page{display:none;padding-top:28px}
.page.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.page-head{
  display:flex;justify-content:space-between;gap:20px;align-items:end;
  margin-bottom:20px;
}
.page-head h2{margin:0;font-size:23px;letter-spacing:-.035em}
.page-head p{margin:7px 0 0;color:var(--muted);font-size:13px;max-width:650px}

.grid{display:grid;gap:14px}
.grid.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  background:linear-gradient(180deg,rgba(13,16,22,.96),rgba(9,11,15,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.card.pad{padding:18px}
.card-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.card-title h3{margin:0;font-size:14px;letter-spacing:-.01em}
.stat{padding:18px}
.stat span{display:block;color:var(--muted);font-size:12px}
.stat strong{display:block;font-size:28px;margin-top:10px;letter-spacing:-.05em}
.stat small{display:block;color:var(--text2);font-size:11px;margin-top:7px}

.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-bottom:14px;
}
.grow{flex:1}

.input,.select,.textarea{
  width:100%;
  border:1px solid var(--line);
  background:#080a0e;
  color:var(--text);
  border-radius:11px;
  padding:11px 12px;
  outline:none;
  transition:.16s ease;
}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(96,165,250,.45);
  box-shadow:0 0 0 3px rgba(59,130,246,.09);
}
label.field{display:grid;gap:7px;font-size:12px;color:var(--text2)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.btn{
  border:1px solid var(--line);
  color:var(--text);
  background:#0c0f15;
  padding:10px 13px;
  border-radius:10px;
  font-weight:650;
  font-size:12px;
  transition:.16s ease;
}
.btn:hover{transform:translateY(-1px);border-color:var(--line-strong);background:#11151d}
.btn.primary{
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border-color:rgba(96,165,250,.6);
  color:white;
  box-shadow:0 10px 30px rgba(37,99,235,.20);
}
.btn.primary:hover{background:linear-gradient(180deg,#4a8df7,#2f6eee)}
.btn.danger{color:#ffb4b4;border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.07)}
.btn.ghost{background:transparent}
.btn.small{padding:7px 9px;font-size:11px}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:12px}
th{color:var(--muted);font-weight:650;background:#080a0e;position:sticky;top:0}
td{color:var(--text2)}
tr:hover td{background:rgba(255,255,255,.018)}
tr:last-child td{border-bottom:0}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;
  padding:5px 8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:10px;font-weight:700;
}
.badge:before{content:"";width:6px;height:6px;border-radius:99px;background:#64748b}
.badge.green:before{background:var(--success)}
.badge.red:before{background:var(--danger)}
.badge.orange:before{background:var(--warning)}
.badge.blue:before{background:var(--accent2)}

.modal-backdrop{
  position:fixed;inset:0;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.68);backdrop-filter:blur(10px);
  z-index:100;
}
.modal{
  width:min(680px,100%);
  max-height:88vh;overflow:auto;
  padding:20px;
  background:#090b10;
  border:1px solid var(--line-strong);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:16px}
.modal-head h3{margin:0;font-size:17px}
.modal-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:200;
  min-width:260px;max-width:420px;
  padding:13px 15px;
  border-radius:12px;
  border:1px solid var(--line-strong);
  background:#0d1118;
  box-shadow:var(--shadow);
  font-size:12px;color:var(--text2);
  animation:toastIn .22s ease;
}
.toast.ok{border-color:rgba(34,197,94,.25)}
.toast.error{border-color:rgba(239,68,68,.28)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.login-shell{
  min-height:100vh;
  display:grid;place-items:center;padding:24px;
}
.login-card{
  width:min(430px,100%);
  padding:26px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(13,16,22,.96),rgba(7,9,13,.98));
  box-shadow:var(--shadow);
}
.login-card h1{font-size:26px;margin:18px 0 8px;letter-spacing:-.04em}
.login-card p{color:var(--muted);font-size:13px;line-height:1.65;margin:0 0 20px}
.login-logo{display:flex;align-items:center;gap:11px}

.public-wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.public-nav{height:82px;display:flex;align-items:center;justify-content:space-between}
.public-nav .actions{display:flex;gap:10px}
.hero{padding:84px 0 60px;max-width:780px}
.hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent2);font-weight:800}
.hero h1{font-size:clamp(42px,7vw,78px);line-height:.96;letter-spacing:-.065em;margin:18px 0 22px}
.hero p{font-size:16px;color:var(--text2);line-height:1.75;max-width:650px}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-bottom:90px}
.product{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:19px;
  background:linear-gradient(180deg,#0d1016,#080a0e);
}
.product-media{
  aspect-ratio:16/10;
  background:#080a0e center/cover no-repeat;
  border-bottom:1px solid var(--line);
  position:relative;
}
.product-media:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,8,.38),transparent)}
.product-body{padding:18px}
.product-top{display:flex;justify-content:space-between;gap:12px}
.product h3{margin:0;font-size:17px}
.product p{color:var(--muted);font-size:12px;line-height:1.65;min-height:40px}
.price{font-size:18px;font-weight:800}
.purchase{
  margin-top:16px;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 13px;border-radius:11px;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border:1px solid rgba(96,165,250,.55);
  color:white;font-weight:750;font-size:12px;
  box-shadow:0 12px 30px rgba(37,99,235,.16);
}
.purchase span:last-child{font-size:17px;opacity:.85}

.preview-shell{padding:20px;background:var(--bg);min-height:100vh}
.preview-shell .products{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:20px}
.preview-shell .hero{padding:30px 0 28px}
.preview-shell .hero h1{font-size:38px}

.empty{
  text-align:center;padding:35px 18px;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:14px;
}

@media(max-width:1050px){
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .sidebar-foot{position:static;margin-top:14px}
  .nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main{padding:0 16px 40px}
  .topbar{position:relative}
  .grid.two,.grid.three,.field-row,.field-row.three{grid-template-columns:1fr}
}
@media(max-width:620px){
  .grid.stats,.products{grid-template-columns:1fr}
  .public-wrap{width:min(100% - 24px,1180px)}
  .hero{padding-top:56px}
}

.product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.purchase.disabled {
  pointer-events: none;
  opacity: .48;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.modal .table-wrap {
  max-height: 360px;
  overflow: auto;
}

/* ========================================================================== */
/* V62 — Deep dark visual system + verified Discord feedback marquee          */
/* ========================================================================== */

:root{
  --bg:#030406;
  --bg2:#05070a;
  --surface:#080a0e;
  --surface2:#0b0e14;
  --surface3:#10151e;
  --line:rgba(255,255,255,.058);
  --line-strong:rgba(255,255,255,.115);
  --text:#f7f9fc;
  --text2:#b7c0cd;
  --muted:#717b8c;
  --accent:#3b82f6;
  --accent2:#72adff;
  --deep-shadow:0 34px 110px rgba(0,0,0,.58);
  --inner-highlight:inset 0 1px 0 rgba(255,255,255,.045);
}

html{scroll-behavior:smooth;background:#030406}

body{
  background:
    radial-gradient(circle at 14% -12%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 30rem),
    radial-gradient(circle at 88% 18%,rgba(40,92,190,.09),transparent 34rem),
    radial-gradient(circle at 52% 110%,rgba(37,99,235,.055),transparent 38rem),
    linear-gradient(180deg,#030406 0%,#050609 48%,#030406 100%);
}

body:before{
  opacity:.1;
  background-size:42px 42px;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.45) 56%,transparent 92%);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* Panel polish */
.sidebar{
  background:
    linear-gradient(180deg,rgba(6,8,12,.97),rgba(3,4,6,.96)),
    radial-gradient(circle at 20% 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 18rem);
  box-shadow:16px 0 70px rgba(0,0,0,.18);
}

.brand-mark{
  background:
    radial-gradient(circle at 30% 20%,rgba(120,174,255,.22),transparent 45%),
    linear-gradient(145deg,#111a2a,#07090d);
  border-color:color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -10px 26px rgba(0,0,0,.3),
    0 0 32px color-mix(in srgb,var(--accent) 12%,transparent);
}

.card,
.modal,
.login-card{
  position:relative;
  background:
    radial-gradient(circle at 10% 0,rgba(255,255,255,.025),transparent 13rem),
    linear-gradient(180deg,rgba(13,16,22,.985),rgba(6,8,11,.985));
  border-color:rgba(255,255,255,.07);
  box-shadow:var(--inner-highlight),0 18px 65px rgba(0,0,0,.18);
}

.card:before,
.login-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 38%,color-mix(in srgb,var(--accent) 9%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.stat{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.stat:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:var(--inner-highlight),0 18px 55px rgba(0,0,0,.26),0 0 40px color-mix(in srgb,var(--accent) 5%,transparent);
}

.topbar{
  background:linear-gradient(180deg,rgba(3,4,6,.97),rgba(3,4,6,.8));
  border-bottom-color:rgba(255,255,255,.052);
}

.input,.select,.textarea{
  background:linear-gradient(180deg,#07090d,#06080b);
  border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}

.btn{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#0d1118,#090c11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.btn.primary{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,white 8%),color-mix(in srgb,var(--accent) 82%,#103c90 18%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 12px 36px color-mix(in srgb,var(--accent) 21%,transparent);
}

.table-wrap{
  background:rgba(4,6,9,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

th{background:#07090d;color:#7f8999}

/* Public storefront */
.public-body{overflow-x:hidden}
.public-main{position:relative;z-index:2}
.public-wrap{width:min(1240px,calc(100% - 48px))}

.public-ambient{
  position:fixed;
  pointer-events:none;
  z-index:0;
  border-radius:999px;
  filter:blur(20px);
  opacity:.55;
}
.public-ambient-a{
  width:38rem;height:38rem;left:-18rem;top:-20rem;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 66%);
}
.public-ambient-b{
  width:32rem;height:32rem;right:-18rem;top:19rem;
  background:radial-gradient(circle,rgba(37,99,235,.1),transparent 68%);
}

.public-nav{
  height:94px;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.public-nav:after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 24%,transparent),transparent);
}
.public-brand{border:0;margin:0;padding:0}
.public-brand-mark{width:42px;height:42px;border-radius:14px}
.public-discord-button{display:flex;align-items:center;gap:9px;padding:11px 15px}
.discord-pulse{
  width:7px;height:7px;border-radius:99px;background:#9bc4ff;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent);
  animation:discordPulse 2.4s ease-out infinite;
}
@keyframes discordPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 38%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.public-hero{
  position:relative;
  max-width:900px;
  padding:116px 0 108px;
}
.public-hero:before{
  content:"";
  position:absolute;
  width:28rem;height:28rem;
  left:-15rem;top:0;
  border:1px solid rgba(255,255,255,.035);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.012),0 0 0 140px rgba(255,255,255,.006);
  pointer-events:none;
}
.hero-orbit{
  position:absolute;
  width:10px;height:10px;
  left:-8px;top:158px;
  border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 32px color-mix(in srgb,var(--accent) 78%,transparent);
  opacity:.7;
}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:#90bbff;
  background:rgba(59,130,246,.055);
  border:1px solid rgba(96,165,250,.14);
  padding:7px 10px;
  border-radius:999px;
  letter-spacing:.17em;
}
.hero .eyebrow span{width:5px;height:5px;border-radius:99px;background:#8dbbff;box-shadow:0 0 14px rgba(96,165,250,.75)}
.public-hero h1{
  max-width:880px;
  font-size:clamp(48px,7.4vw,92px);
  line-height:.92;
  letter-spacing:-.075em;
  margin:24px 0 26px;
  text-wrap:balance;
  background:linear-gradient(180deg,#fff 0%,#f3f6fb 48%,#aab5c5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 12px 50px rgba(0,0,0,.42));
}
.public-hero p{font-size:17px;line-height:1.8;color:#929dab;max-width:670px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.hero-cta,.hero-secondary{padding:12px 16px}
.hero-cta{display:inline-flex;align-items:center;gap:18px}
.hero-secondary{border-color:rgba(255,255,255,.09)}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:29px;color:#727d8d;font-size:11px;font-weight:650}
.hero-trust span{display:flex;align-items:center;gap:7px}
.hero-trust i{width:5px;height:5px;border-radius:99px;background:#28c76f;box-shadow:0 0 12px rgba(34,197,94,.48)}

.public-section{padding:20px 0 102px}
.section-head{display:flex;justify-content:space-between;gap:26px;align-items:end;margin-bottom:26px}
.section-head h2{margin:7px 0 0;font-size:clamp(28px,4vw,44px);letter-spacing:-.055em}
.section-head p{max-width:470px;margin:0;color:#737e8d;font-size:13px;line-height:1.75;text-align:right}
.section-kicker{text-transform:uppercase;letter-spacing:.18em;color:#78aaf3;font-size:10px;font-weight:800}

.products{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding-bottom:0;
}
.product-premium{
  position:relative;
  border-radius:22px;
  border-color:rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 12% 0,rgba(255,255,255,.028),transparent 14rem),
    linear-gradient(180deg,#0b0e13 0%,#06080b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 70px rgba(0,0,0,.22);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease;
}
.product-premium:before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 34%,color-mix(in srgb,var(--accent) 3%,transparent));
}
.product-premium:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 32px 90px rgba(0,0,0,.38),0 0 55px color-mix(in srgb,var(--accent) 5%,transparent);
}
.product-media{aspect-ratio:16/10.4;background:#06080b;overflow:hidden}
.product-media img{transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease;filter:saturate(.88) contrast(1.03)}
.product-premium:hover .product-media img{transform:scale(1.035);filter:saturate(1) contrast(1.04)}
.product-media-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,4,6,.48) 100%);z-index:1}
.product-status{position:absolute;top:14px;right:14px;z-index:2;backdrop-filter:blur(14px)}
.product-placeholder{height:100%;display:grid;place-items:center;font-size:70px;font-weight:900;color:rgba(255,255,255,.035);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 56%)}
.product-body{padding:21px}
.product-top h3{font-size:19px;letter-spacing:-.025em}
.product-top p{font-size:12px;color:#7d8796;min-height:48px;margin:10px 0 0;line-height:1.72}
.product-meta-row{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.055)}
.product-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#596474;font-weight:700}
.price{font-size:21px;letter-spacing:-.035em}
.purchase{
  position:relative;
  overflow:hidden;
  margin-top:16px;
  padding:13px 14px;
  border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 95%,white 5%),color-mix(in srgb,var(--accent) 75%,#173d80 25%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 40px color-mix(in srgb,var(--accent) 17%,transparent);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.purchase:before{
  content:"";
  position:absolute;top:-120%;left:-35%;width:30%;height:340%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:rotate(20deg);
  transition:left .6s ease;
}
.purchase:hover:before{left:120%}
.purchase:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 50px color-mix(in srgb,var(--accent) 24%,transparent)}
.purchase-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.11);font-size:15px}

/* Verified feedback ticker — deliberately moves from left to right. */
.feedback-section{
  position:relative;
  z-index:2;
  padding:82px 0 92px;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 28rem),
    linear-gradient(180deg,rgba(6,8,12,.72),rgba(3,4,6,.92));
  overflow:hidden;
}
.feedback-section:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.feedback-heading-wrap{position:relative;z-index:2}
.feedback-head{margin-bottom:32px}
.feedback-marquee-shell{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:4px 0 20px;
}
.feedback-track{
  --marquee-duration:80s;
  display:flex;
  width:max-content;
  will-change:transform;
  animation:feedbackMoveRight var(--marquee-duration) linear infinite;
}
.feedback-marquee-shell:hover .feedback-track{animation-play-state:paused}
.feedback-group{display:flex;gap:16px;padding-right:16px}
@keyframes feedbackMoveRight{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.feedback-fade{position:absolute;top:0;bottom:0;width:min(13vw,170px);z-index:4;pointer-events:none}
.feedback-fade-left{left:0;background:linear-gradient(90deg,#05070a 0%,rgba(5,7,10,.86) 28%,transparent 100%)}
.feedback-fade-right{right:0;background:linear-gradient(270deg,#05070a 0%,rgba(5,7,10,.86) 28%,transparent 100%)}
.feedback-card{
  position:relative;
  flex:0 0 390px;
  min-height:250px;
  overflow:hidden;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 8% 0,rgba(255,255,255,.035),transparent 12rem),
    linear-gradient(155deg,rgba(15,19,27,.98),rgba(7,9,13,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 22px 70px rgba(0,0,0,.24);
}
.feedback-card:after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 34%,rgba(255,255,255,.015));
}
.feedback-card-glow{
  position:absolute;width:170px;height:170px;right:-100px;top:-95px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%,transparent);filter:blur(30px);pointer-events:none;
}
.feedback-user-row{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.feedback-avatar{
  position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:13px;overflow:visible;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#172033,#090c11);
  border:1px solid rgba(255,255,255,.09);
  color:#9dc5ff;font-weight:850;
}
.feedback-avatar img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.feedback-online{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#23c96e;border:2px solid #0a0d12;box-shadow:0 0 12px rgba(34,197,94,.45)}
.feedback-user-copy{min-width:0;flex:1}
.feedback-user-copy strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedback-user-copy span{display:block;margin-top:3px;color:#687384;font-size:10px}
.feedback-verified{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:rgba(59,130,246,.1);border:1px solid rgba(96,165,250,.18);color:#7db2ff;font-size:12px;font-weight:900}
.feedback-card blockquote{position:relative;z-index:1;margin:20px 0 22px;color:#c5ccd6;font-size:13px;line-height:1.75;min-height:68px}
.feedback-product-row{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.055)}
.feedback-product-media{width:38px;height:38px;flex:0 0 38px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#0b0e14;border:1px solid rgba(255,255,255,.065);color:#6fa6f5}
.feedback-product-media img{width:100%;height:100%;object-fit:cover}
.feedback-product-copy{min-width:0;flex:1}
.feedback-product-copy span{display:block;color:#5e6877;font-size:9px;text-transform:uppercase;letter-spacing:.11em;font-weight:750}
.feedback-product-copy strong{display:block;margin-top:4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedback-product-row time{font-size:9px;color:#596373;white-space:nowrap}

.public-footer{position:relative;z-index:2;padding:28px 0 34px;background:#030406}
.public-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#596474;font-size:11px}
.footer-brand{display:flex;align-items:center;gap:8px;color:#8993a2}
.footer-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
.premium-empty{background:linear-gradient(180deg,rgba(13,16,22,.7),rgba(7,9,13,.78));padding:60px 20px}

/* Login depth */
.login-shell:before{
  content:"";position:fixed;width:36rem;height:36rem;border-radius:50%;left:50%;top:44%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 9%,transparent),transparent 67%);pointer-events:none;
}
.login-card{backdrop-filter:blur(18px);box-shadow:var(--deep-shadow),var(--inner-highlight)}

@media(max-width:1050px){
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-hero{padding-top:88px}
}

@media(max-width:780px){
  .public-wrap{width:min(100% - 28px,1240px)}
  .public-nav{height:82px}
  .public-brand .brand-copy span{display:none}
  .public-hero{padding:72px 0 78px}
  .public-hero h1{font-size:clamp(46px,15vw,72px)}
  .section-head{display:block}
  .section-head p{margin-top:10px;text-align:left}
  .feedback-card{flex-basis:330px}
  .feedback-fade{width:42px}
  .public-footer-inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:620px){
  .products{grid-template-columns:1fr}
  .public-discord-button{padding:10px 12px}
  .public-discord-button .discord-pulse{display:none}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn{justify-content:center}
  .hero-trust{gap:12px}
  .feedback-section{padding:64px 0 72px}
  .feedback-card{flex-basis:300px;padding:17px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .feedback-marquee-shell{overflow-x:auto;scrollbar-width:thin}
  .feedback-track{transform:none!important;animation:none!important}
  .feedback-group[aria-hidden="true"]{display:none}
}

/* V62 CMS preview polish */
.preview-stage{max-width:1180px;margin:0 auto}
.preview-shell .preview-hero{padding:38px 0 34px}
.preview-shell .preview-section-head{margin:10px 0 22px}
.preview-shell .preview-section-head h2{margin:.35rem 0 0;font-size:clamp(24px,4vw,38px);letter-spacing:-.04em}
.preview-shell .preview-feedback-section{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:28px;
  padding:58px 0 66px;
}
.preview-shell .preview-feedback-section .feedback-heading-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.preview-shell .preview-feedback-section .feedback-card{flex-basis:340px;min-height:235px}

/* ========================================================================== */
/* V64 — Energetic midnight interface                                         */
/* ========================================================================== */

:root{
  --bg:#080b14;
  --bg2:#0b1020;
  --surface:#101623;
  --surface2:#141c2c;
  --surface3:#192337;
  --line:rgba(184,199,255,.10);
  --line-strong:rgba(201,211,255,.19);
  --text:#f8f9ff;
  --text2:#c4cbe0;
  --muted:#818ba6;
  --accent:#ff4d6d;
  --accent2:#8b7cff;
  --accent3:#3dd9eb;
  --danger:#ff5a72;
  --warning:#ffb84d;
  --success:#3ddc97;
  --shadow:0 28px 90px rgba(1,3,12,.42);
  --deep-shadow:0 38px 120px rgba(1,3,12,.52);
  --inner-highlight:inset 0 1px 0 rgba(255,255,255,.065);
}

html{background:#080b14}
body{
  isolation:isolate;
  background:
    radial-gradient(circle at 10% -8%,rgba(255,77,109,.18),transparent 29rem),
    radial-gradient(circle at 92% 10%,rgba(139,124,255,.16),transparent 34rem),
    radial-gradient(circle at 58% 104%,rgba(61,217,235,.10),transparent 36rem),
    linear-gradient(135deg,#080b14 0%,#0a0f1d 45%,#090d18 100%);
}

body:before{
  opacity:.16;
  background-size:44px 44px;
  background-image:
    linear-gradient(rgba(186,202,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(186,202,255,.035) 1px,transparent 1px);
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.55) 58%,transparent 96%);
}

.shell:before,
.login-shell:after,
.public-main:before{
  content:"";
  position:fixed;
  width:26rem;
  height:26rem;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  left:32%;
  top:12%;
  opacity:.24;
  filter:blur(54px);
  background:linear-gradient(135deg,rgba(255,77,109,.78),rgba(139,124,255,.68),rgba(61,217,235,.44));
  animation:v64AuroraFloat 14s ease-in-out infinite alternate;
}

@keyframes v64AuroraFloat{
  0%{transform:translate3d(-4vw,-2vh,0) scale(.94) rotate(-7deg)}
  100%{transform:translate3d(10vw,8vh,0) scale(1.12) rotate(12deg)}
}

.sidebar{
  background:
    linear-gradient(180deg,rgba(12,17,31,.94),rgba(8,11,20,.94)),
    radial-gradient(circle at 18% 0,rgba(255,77,109,.13),transparent 19rem);
  border-right-color:rgba(198,207,255,.10);
  box-shadow:18px 0 70px rgba(1,3,12,.22);
}

.brand-mark{
  color:#fff;
  background:
    radial-gradient(circle at 28% 18%,rgba(255,255,255,.26),transparent 34%),
    linear-gradient(145deg,#ff4d6d 0%,#8b5cf6 58%,#3dd9eb 125%);
  border-color:rgba(255,255,255,.19);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 32px rgba(255,77,109,.17),
    0 0 42px rgba(139,124,255,.12);
}

.nav button{
  position:relative;
  border:1px solid transparent;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.nav button:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.05);
  border-color:rgba(205,214,255,.08);
}
.nav button.active{
  background:
    linear-gradient(90deg,rgba(255,77,109,.17),rgba(139,124,255,.105),rgba(61,217,235,.04));
  border-color:rgba(255,115,139,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(1,3,12,.12);
}
.nav button.active:before{
  content:"";
  position:absolute;
  left:-1px;
  top:21%;
  bottom:21%;
  width:2px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--accent),var(--accent2),var(--accent3));
  box-shadow:0 0 14px rgba(255,77,109,.58);
}
.nav button.active .dot{
  background:var(--accent);
  box-shadow:0 0 16px rgba(255,77,109,.76);
}

.main{position:relative}
.topbar{
  background:linear-gradient(180deg,rgba(8,11,20,.92),rgba(8,11,20,.74));
  border-bottom-color:rgba(198,207,255,.085);
}
.topbar:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,77,109,.26),rgba(139,124,255,.18),transparent 72%);
}

.card,
.modal,
.login-card{
  background:
    radial-gradient(circle at 12% 0,rgba(255,255,255,.055),transparent 14rem),
    linear-gradient(155deg,rgba(20,28,45,.94),rgba(12,17,30,.96));
  border-color:rgba(198,207,255,.105);
  box-shadow:var(--inner-highlight),0 24px 72px rgba(1,3,12,.22);
}
.card:before,
.login-card:before{
  background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 34%,rgba(139,124,255,.13),transparent 76%,rgba(61,217,235,.07));
}

.stat{
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.stat:after{
  content:"";
  position:absolute;
  width:9rem;
  height:9rem;
  right:-5rem;
  top:-5rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(139,124,255,.16),transparent 67%);
  pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;
}
.stat:hover{
  transform:translateY(-4px);
  border-color:rgba(255,112,138,.24);
  box-shadow:var(--inner-highlight),0 28px 80px rgba(1,3,12,.3),0 0 45px rgba(139,124,255,.07);
}
.stat:hover:after{transform:scale(1.22);opacity:1}
.stat strong{
  background:linear-gradient(110deg,#fff 20%,#e8e8ff 55%,#a8eff6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.input,.select,.textarea{
  background:linear-gradient(180deg,rgba(10,15,28,.92),rgba(8,12,23,.96));
  border-color:rgba(197,208,255,.105);
}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(197,208,255,.17)}
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(139,124,255,.52);
  box-shadow:0 0 0 3px rgba(139,124,255,.11),0 12px 28px rgba(1,3,12,.12);
}

.btn{
  background:linear-gradient(180deg,rgba(24,33,53,.95),rgba(15,22,38,.98));
  border-color:rgba(198,207,255,.11);
  transition:transform .18s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:after{
  content:"";
  position:absolute;
  top:-170%;
  left:-45%;
  width:26%;
  height:440%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover:not(:disabled):after{left:125%}
.btn:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:rgba(209,216,255,.22);
  background:linear-gradient(180deg,rgba(31,42,68,.98),rgba(18,26,45,.98));
  box-shadow:0 12px 28px rgba(1,3,12,.19);
}
.btn.primary,
.btn.accent{
  color:white;
  border-color:rgba(255,255,255,.19);
  background:linear-gradient(120deg,#ff4d6d 0%,#9b5cff 56%,#5e7bff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 14px 38px rgba(255,77,109,.15),0 8px 34px rgba(139,124,255,.12);
}
.btn.primary:hover:not(:disabled),
.btn.accent:hover:not(:disabled){
  filter:brightness(1.07) saturate(1.05);
  background:linear-gradient(120deg,#ff5977 0%,#a56cff 56%,#6684ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 48px rgba(255,77,109,.19),0 10px 38px rgba(139,124,255,.16);
}
.btn:disabled{cursor:not-allowed;opacity:.45;filter:grayscale(.25)}

.table-wrap{
  background:rgba(8,12,23,.48);
  border-color:rgba(198,207,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 20px 52px rgba(1,3,12,.12);
}
th{
  color:#929db7;
  background:rgba(10,15,28,.94);
}
tr:hover td{background:linear-gradient(90deg,rgba(255,77,109,.035),rgba(139,124,255,.035),transparent)}

.badge.blue:before{background:var(--accent3)}
.badge.blue{border-color:rgba(61,217,235,.18);background:rgba(61,217,235,.06)}

.toast{
  background:linear-gradient(145deg,rgba(22,30,49,.97),rgba(11,17,30,.98));
  border-color:rgba(198,207,255,.17);
  box-shadow:var(--deep-shadow),inset 0 1px 0 rgba(255,255,255,.06);
}
.toast.ok{border-color:rgba(61,220,151,.36)}
.toast.error{border-color:rgba(255,90,114,.42)}

/* Discord operations status */
.discord-status-wrap{margin-bottom:14px}
.status-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border:1px solid rgba(198,207,255,.115);
  border-radius:18px;
  background:
    radial-gradient(circle at 8% -30%,rgba(255,77,109,.18),transparent 19rem),
    radial-gradient(circle at 94% 0,rgba(61,217,235,.12),transparent 18rem),
    linear-gradient(145deg,rgba(21,29,48,.95),rgba(11,17,30,.97));
  box-shadow:var(--inner-highlight),0 26px 80px rgba(1,3,12,.2);
}
.status-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.035) 48%,transparent 72%);
}
.status-hero-copy{position:relative;z-index:1;min-width:0}
.status-hero-copy h3{margin:0;font-size:16px;letter-spacing:-.025em}
.status-hero-copy p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.status-actions{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.status-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.status-check{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(198,207,255,.09);
  border-radius:12px;
  background:rgba(7,11,21,.52);
  color:var(--text2);
  font-size:11px;
}
.status-led{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#606a82;box-shadow:0 0 0 3px rgba(96,106,130,.08)}
.status-check.ready .status-led{background:var(--success);box-shadow:0 0 16px rgba(61,220,151,.6)}
.status-check.warn .status-led{background:var(--warning);box-shadow:0 0 16px rgba(255,184,77,.48)}
.status-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:10px}
.status-meta span{padding:6px 8px;border:1px solid rgba(198,207,255,.08);border-radius:999px;background:rgba(7,11,21,.4)}
.discord-guild-card{overflow:hidden}
.delivery-callout{
  margin-bottom:14px;
  padding:12px 13px;
  border:1px solid rgba(61,217,235,.18);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(61,217,235,.07),rgba(139,124,255,.06));
  color:var(--text2);
  font-size:11px;
  line-height:1.6;
}
.empty-action{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}

/* Loading feedback for panel navigation and refresh operations */
.panel-loading .topbar h1:after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:9px;
  vertical-align:middle;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px rgba(255,77,109,.7);
  animation:v64Pulse 1s ease-in-out infinite alternate;
}
.nav button.loading{pointer-events:none;opacity:.72}
.nav button.loading .dot{animation:v64Pulse .7s ease-in-out infinite alternate}
@keyframes v64Pulse{from{transform:scale(.72);opacity:.55}to{transform:scale(1.2);opacity:1}}

/* Public storefront — brighter midnight depth without losing the dark theme */
.public-ambient-a{
  background:radial-gradient(circle,rgba(255,77,109,.19),rgba(139,124,255,.08) 38%,transparent 69%);
  animation:v64AmbientA 12s ease-in-out infinite alternate;
}
.public-ambient-b{
  background:radial-gradient(circle,rgba(61,217,235,.14),rgba(139,124,255,.08) 40%,transparent 70%);
  animation:v64AmbientB 15s ease-in-out infinite alternate;
}
@keyframes v64AmbientA{to{transform:translate(6vw,5vh) scale(1.08)}}
@keyframes v64AmbientB{to{transform:translate(-7vw,-4vh) scale(.95)}}

.public-nav{
  background:linear-gradient(180deg,rgba(8,11,20,.58),rgba(8,11,20,.2));
  backdrop-filter:blur(16px);
}
.hero .eyebrow,.section-kicker{color:#ff8097}
.public-hero h1,
.hero h1{
  background:linear-gradient(110deg,#fff 7%,#f5eafa 42%,#b6b8ff 70%,#9ceff4 108%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.product-premium,
.product{
  background:
    radial-gradient(circle at 12% 0,rgba(255,255,255,.055),transparent 13rem),
    linear-gradient(155deg,rgba(20,28,45,.96),rgba(11,16,29,.985));
  border-color:rgba(198,207,255,.105);
}
.product-premium:hover{
  border-color:rgba(255,112,138,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 34px 100px rgba(1,3,12,.38),0 0 58px rgba(139,124,255,.08);
}
.purchase{
  background:linear-gradient(120deg,#ff4d6d 0%,#9b5cff 58%,#5478ff 100%);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 44px rgba(255,77,109,.14),0 10px 38px rgba(139,124,255,.12);
}
.purchase:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 20px 56px rgba(255,77,109,.2),0 12px 44px rgba(139,124,255,.16)}
.feedback-section{
  background:
    radial-gradient(circle at 20% 0,rgba(255,77,109,.08),transparent 25rem),
    radial-gradient(circle at 80% 0,rgba(61,217,235,.07),transparent 24rem),
    linear-gradient(180deg,rgba(14,20,34,.78),rgba(8,11,20,.94));
}
.feedback-card{
  background:
    radial-gradient(circle at 8% 0,rgba(255,255,255,.055),transparent 12rem),
    linear-gradient(155deg,rgba(22,30,49,.98),rgba(11,16,29,.99));
  border-color:rgba(198,207,255,.11);
}
.feedback-verified{background:rgba(139,124,255,.12);border-color:rgba(164,151,255,.22);color:#b4aaff}
.public-footer{background:#080b14}
.feedback-fade-left{background:linear-gradient(90deg,#0d1322 0%,rgba(13,19,34,.86) 28%,transparent 100%)}
.feedback-fade-right{background:linear-gradient(270deg,#0d1322 0%,rgba(13,19,34,.86) 28%,transparent 100%)}

@media(max-width:900px){
  .status-hero{display:block}
  .status-actions{justify-content:flex-start;margin-top:14px}
  .status-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  .status-checks{grid-template-columns:1fr}
  .status-actions .btn{flex:1;min-width:140px}
  .shell:before,.login-shell:after,.public-main:before{width:18rem;height:18rem;opacity:.18}
}

@media(prefers-reduced-motion:reduce){
  .shell:before,.login-shell:after,.public-main:before,.public-ambient-a,.public-ambient-b{animation:none!important}
}

/* Status class aliases used by the Discord runtime renderer. */
.status-check.ok .status-led{background:var(--success);box-shadow:0 0 16px rgba(61,220,151,.6)}
.status-check.missing .status-led{background:var(--warning);box-shadow:0 0 16px rgba(255,184,77,.48)}
.status-check small{margin-left:auto;color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.status-check.ok small{color:var(--success)}
.status-check.missing small{color:var(--warning)}

.diagnostic-stat .diagnostic-value{font-size:21px;letter-spacing:-.035em}
.diagnostic-stat small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.5}
.diagnostic-stat small .badge{flex:0 0 auto}

.delivery-callout{display:flex;align-items:flex-start;gap:10px}
.delivery-callout .status-led{margin-top:4px}
.delivery-callout.is-ready .status-led{background:var(--success);box-shadow:0 0 16px rgba(61,220,151,.6)}
.delivery-callout.needs-attention .status-led{background:var(--warning);box-shadow:0 0 16px rgba(255,184,77,.48)}
.delivery-callout strong{display:block;color:var(--text);font-size:12px}
.delivery-callout small{display:block;margin-top:4px;color:var(--muted);line-height:1.55}

/* V64 Discord discovery and guided setup */
.discord-discovery-banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(139,124,255,.22);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(139,124,255,.10),rgba(61,217,235,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.discord-discovery-banner>div{display:grid;gap:3px;min-width:0}
.discord-discovery-banner strong{font-size:13px;color:var(--text)}
.discord-discovery-banner small{font-size:12px;line-height:1.5;color:var(--muted)}
.discord-discovery-banner.ready{border-color:rgba(61,217,235,.22);background:linear-gradient(135deg,rgba(61,217,235,.09),rgba(139,124,255,.06))}
.discord-discovery-banner.loading{border-color:rgba(139,124,255,.34);background:linear-gradient(135deg,rgba(139,124,255,.13),rgba(255,77,109,.05))}
.discord-discovery-banner.loading .status-led{animation:statusPulse 1s ease-in-out infinite}
.discord-discovery-banner.missing{border-color:rgba(255,170,77,.24);background:linear-gradient(135deg,rgba(255,170,77,.09),rgba(255,77,109,.045))}
.modal-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 0 4px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
}
.modal-section-title>span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#dce6ff}
.modal-section-title>small{font-size:11px;color:var(--muted);text-align:right}
.discovery-help{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px dashed rgba(139,124,255,.20);
  border-radius:12px;
  background:rgba(139,124,255,.045);
}
.discovery-help small{color:var(--muted);line-height:1.5}
@keyframes statusPulse{0%,100%{transform:scale(.82);opacity:.45}50%{transform:scale(1.2);opacity:1}}

/* V64 status hero layout refinement */
.status-hero{flex-wrap:wrap}
.status-hero-copy{flex:1 1 420px}
.status-actions{flex:0 1 auto}
.status-checks,.status-meta{flex:1 0 100%;width:100%}

/* V65 product categories, admin actions and public feedback visibility */
.product-management-grid{grid-template-columns:minmax(300px,.72fr) minmax(520px,1.55fr);align-items:start}
.category-admin-list{display:grid;gap:10px}
.category-admin-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 14px;border:1px solid rgba(198,207,255,.09);border-radius:14px;
  background:linear-gradient(145deg,rgba(20,28,45,.78),rgba(10,15,27,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
.category-admin-card>div:first-child{min-width:0;display:grid;gap:4px}
.category-admin-card strong{font-size:13px;color:var(--text)}
.category-admin-card small{font-size:11px;color:var(--muted);line-height:1.45}
.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.form-note{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.55}

.product-category-stack.products{display:block}
.product-category-stack{display:grid!important;gap:32px!important}
.product-category-section{
  position:relative;padding:20px;border:1px solid rgba(198,207,255,.085);border-radius:22px;
  background:
    radial-gradient(circle at 10% 0,rgba(255,77,109,.065),transparent 18rem),
    radial-gradient(circle at 90% 0,rgba(61,217,235,.055),transparent 20rem),
    linear-gradient(155deg,rgba(15,22,37,.72),rgba(8,12,22,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 24px 70px rgba(1,3,12,.24)
}
.product-category-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:0 2px 15px;border-bottom:1px solid rgba(198,207,255,.075)}
.product-category-head>div{display:flex;align-items:center;gap:12px;min-width:0}
.product-category-index{
  display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;
  color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,rgba(255,77,109,.92),rgba(139,92,255,.88),rgba(84,120,255,.82));
  box-shadow:0 12px 30px rgba(139,92,255,.18)
}
.product-category-head h3{margin:0;font-size:18px;letter-spacing:-.025em}
.product-category-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.product-category-head>span:last-child{flex:0 0 auto;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.category-products{margin:0}
.compact-category-section{padding:14px;border-radius:17px}
.compact-category-section .product-category-head{margin-bottom:12px;padding-bottom:11px}
.compact-category-section .product-category-head h3{font-size:15px}

.feedback-empty-state{
  width:min(760px,calc(100vw - 40px));margin:8px auto 0;padding:24px 26px;
  display:flex;align-items:center;justify-content:center;gap:16px;
  border:1px dashed rgba(164,151,255,.22);border-radius:20px;
  background:linear-gradient(135deg,rgba(139,124,255,.07),rgba(61,217,235,.035));
  color:var(--text2);text-align:left
}
.feedback-empty-icon{
  display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:15px;
  color:#d8d1ff;background:rgba(139,124,255,.11);border:1px solid rgba(164,151,255,.19);
  box-shadow:0 16px 40px rgba(139,124,255,.08);font-size:18px
}
.feedback-empty-state strong{display:block;color:var(--text);font-size:13px}
.feedback-empty-state p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.6}

@media(max-width:1100px){.product-management-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .product-category-section{padding:14px;border-radius:18px}
  .product-category-head{align-items:flex-start}
  .product-category-head>span:last-child{display:none}
  .feedback-empty-state{padding:18px;align-items:flex-start}
  .category-admin-card{align-items:flex-start;flex-direction:column}
  .table-actions{justify-content:flex-start}
}

/* ================================================================
   X4nSystem V68.0 FINAL VISUAL SYSTEM
   Dark, energetic and layered without oppressive black-on-black UI.
   ================================================================ */
:root{
  --bg:#050711;
  --bg2:#080b16;
  --surface:#0c1020;
  --surface2:#11172a;
  --surface3:#171e35;
  --line:rgba(174,188,255,.095);
  --line-strong:rgba(195,205,255,.18);
  --text:#f6f7ff;
  --text2:#b8c2df;
  --muted:#7884a6;
  --accent:#6D5DFC;
  --accent-2:#13C8FF;
  --accent-3:#FF4D8D;
  --accent2:var(--accent-2);
  --success:#4de0a2;
  --warning:#ffbd66;
  --danger:#ff657a;
  --radius:18px;
  --shadow:0 30px 90px rgba(0,0,0,.38);
}

body{
  background:
    radial-gradient(circle at 15% -8%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 31rem),
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 34rem),
    radial-gradient(circle at 48% 110%,color-mix(in srgb,var(--accent-3) 8%,transparent),transparent 38rem),
    linear-gradient(155deg,#050711 0%,#070a15 48%,#050814 100%);
}
body:before{
  opacity:.2;
  background-image:
    linear-gradient(rgba(146,159,220,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(146,159,220,.025) 1px,transparent 1px);
  background-size:42px 42px;
}

.panel-body:after,.login-body:after,.x4n-public:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,transparent 0 42%,rgba(109,93,252,.025) 50%,transparent 58%);
  background-size:280% 100%;animation:x4nSweep 16s linear infinite;
}
@keyframes x4nSweep{to{background-position:-280% 0}}

.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:
    linear-gradient(145deg,rgba(109,93,252,.28),rgba(19,200,255,.08)),
    #0b1020;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 36px color-mix(in srgb,var(--accent) 18%,transparent);
  color:#fff;font-size:12px;letter-spacing:-.04em;
}
.brand-copy strong{font-size:15px;font-weight:850;letter-spacing:-.02em}

.sidebar{
  padding:20px 14px;
  background:linear-gradient(180deg,rgba(8,11,23,.94),rgba(6,8,18,.91));
  border-right:1px solid rgba(164,177,243,.09);
  box-shadow:20px 0 70px rgba(0,0,0,.16);
}
.nav{gap:5px}
.nav button{position:relative;padding:11px 13px;border-radius:12px;overflow:hidden}
.nav button:before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:99px;
  background:linear-gradient(var(--accent-2),var(--accent));opacity:0;transform:scaleY(.25);transition:.2s ease;
}
.nav button:hover{background:rgba(146,159,220,.05)}
.nav button.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,transparent),rgba(19,200,255,.035));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 12px 34px rgba(0,0,0,.12);
}
.nav button.active:before{opacity:1;transform:scaleY(1)}
.nav button.active .dot{background:var(--accent-2);box-shadow:0 0 18px color-mix(in srgb,var(--accent-2) 70%,transparent)}
.actor-card{background:linear-gradient(145deg,rgba(17,23,42,.95),rgba(9,13,27,.96));border-color:rgba(164,177,243,.1)}

.topbar{
  height:82px;
  background:linear-gradient(180deg,rgba(5,7,17,.96),rgba(5,7,17,.76));
  border-color:rgba(164,177,243,.08);
}
.topbar h1{font-size:21px;font-weight:820}
.main{padding-left:34px;padding-right:34px}

.page{padding-top:30px}
.page-head h2{font-size:25px;font-weight:820}
.page-head p{font-size:12.5px;line-height:1.7;color:#8792b2}
.sticky-page-head{
  position:sticky;top:82px;z-index:3;margin:-1px -8px 20px;padding:15px 8px 15px;
  background:linear-gradient(180deg,rgba(5,7,17,.96),rgba(5,7,17,.84),rgba(5,7,17,0));
  backdrop-filter:blur(14px);
}

.card{
  position:relative;
  background:
    radial-gradient(circle at 95% 0,color-mix(in srgb,var(--accent) 5%,transparent),transparent 16rem),
    linear-gradient(155deg,rgba(17,23,42,.91),rgba(8,12,25,.95));
  border-color:rgba(174,188,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 55px rgba(0,0,0,.12);
}
.card:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.035),transparent 24%,transparent 70%,color-mix(in srgb,var(--accent-2) 3%,transparent));
}
.card.pad{padding:20px}
.card-title h3{font-size:14px;font-weight:780}
.stat{overflow:hidden;min-height:130px}
.stat:after{content:"";position:absolute;right:-30px;bottom:-45px;width:110px;height:110px;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,transparent);filter:blur(6px)}
.stat strong{font-size:31px}

.input,.select,.textarea{
  background:rgba(6,9,20,.76);
  border-color:rgba(174,188,255,.1);
  border-radius:12px;padding:11px 13px;
}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(174,188,255,.17)}
.input:focus,.select:focus,.textarea:focus{
  border-color:color-mix(in srgb,var(--accent) 65%,white 4%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 30px rgba(0,0,0,.12);
}
.field small{color:var(--muted);line-height:1.55}
.color-input{font-family:"SFMono-Regular",Consolas,monospace;font-weight:700}

.btn{
  border-color:rgba(174,188,255,.11);
  background:linear-gradient(180deg,rgba(19,25,45,.92),rgba(10,14,29,.96));
  border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.btn:hover{background:linear-gradient(180deg,rgba(25,33,58,.96),rgba(13,18,36,.98));border-color:rgba(174,188,255,.2)}
.btn.primary{
  background:linear-gradient(115deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--accent-3)));
  border-color:color-mix(in srgb,var(--accent) 62%,white 8%);
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 14px 38px color-mix(in srgb,var(--accent) 24%,transparent)}
.btn.ghost{background:rgba(255,255,255,.025)}

.badge.blue{background:color-mix(in srgb,var(--accent) 12%,transparent);color:#c9c2ff;border-color:color-mix(in srgb,var(--accent) 24%,transparent)}
.badge.green{background:rgba(77,224,162,.08);color:#79edbd;border-color:rgba(77,224,162,.16)}

.table-wrap{border-color:rgba(174,188,255,.09);background:rgba(5,8,18,.34)}
thead th{background:rgba(12,17,32,.94);color:#8996b8;border-color:rgba(174,188,255,.08)}
tbody td{border-color:rgba(174,188,255,.06)}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 3%,transparent)}

/* Site editor */
.site-editor-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(360px,.72fr);gap:18px;align-items:start}
.site-editor-controls{display:grid;gap:15px}
.editor-card{overflow:hidden}
.editor-card .card-title>div{display:flex;align-items:center;gap:10px}
.editor-index{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;font:800 10px/1 monospace;color:#d8d4ff;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.site-preview-column{position:sticky;top:178px}
.site-preview-card{overflow:hidden}
.site-preview-card:after{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-2),var(--accent),transparent);opacity:.65}
#sitePreview{width:100%;height:720px;border:1px solid rgba(174,188,255,.1);border-radius:15px;background:#050711;box-shadow:0 22px 65px rgba(0,0,0,.28)}
.code-area{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;line-height:1.65}
.placeholder-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.placeholder-row code{padding:5px 8px;border-radius:8px;background:rgba(109,93,252,.08);border:1px solid rgba(109,93,252,.16);color:#bbb2ff;font-size:10px}
.isolation-callout{display:flex!important;justify-content:center;padding:11px 13px;border-radius:12px;background:linear-gradient(135deg,rgba(77,224,162,.065),rgba(19,200,255,.035));border:1px solid rgba(77,224,162,.13)}
.isolation-callout strong{color:#8ef0c5;font-size:12px}.isolation-callout small{color:var(--muted)}

/* Public storefront */
.x4n-public{overflow-x:hidden;background:#050711}
.x4n-grid{position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.55;background-image:linear-gradient(rgba(164,177,243,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(164,177,243,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black 0%,transparent 82%)}
.public-ambient{filter:blur(18px)}
.public-ambient-a{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 28%,transparent),transparent 68%)}
.public-ambient-b{background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 17%,transparent),transparent 68%)}
.public-ambient-c{position:fixed;width:34rem;height:34rem;left:38%;top:38%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent-3) 8%,transparent),transparent 68%);pointer-events:none;z-index:-1}
.announcement-bar{width:min(1240px,calc(100% - 32px));margin:14px auto 0;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:9px;color:#cdd5ef;font-size:11px;font-weight:650;letter-spacing:.02em;border:1px solid rgba(174,188,255,.1);border-radius:12px;background:linear-gradient(90deg,rgba(109,93,252,.08),rgba(19,200,255,.05),rgba(255,77,141,.06));box-shadow:0 12px 40px rgba(0,0,0,.12)}
.announcement-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 14px var(--accent-2)}
.x4n-nav{margin-top:18px;border:1px solid rgba(174,188,255,.09);border-radius:17px;padding:10px 11px;background:rgba(8,11,24,.66);backdrop-filter:blur(22px);box-shadow:0 18px 60px rgba(0,0,0,.16)}
.public-brand{border:0;margin:0;padding:0}
.public-brand-mark{width:40px;height:40px}
.nav-signal{display:flex;gap:4px;align-items:center;opacity:.45}.nav-signal span{width:4px;height:4px;border-radius:50%;background:var(--accent-2)}.nav-signal span:nth-child(2){background:var(--accent)}.nav-signal span:nth-child(3){background:var(--accent-3)}
.x4n-hero{min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;isolation:isolate;padding:90px 20px 80px}
.x4n-hero:before{content:"";position:absolute;width:min(780px,90vw);height:min(420px,60vw);border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 17%,transparent),transparent 66%);filter:blur(8px);z-index:-2}
.hero-beam{position:absolute;width:1px;height:330px;background:linear-gradient(transparent,var(--accent-2),transparent);opacity:.17;transform:rotate(42deg)}.hero-beam-a{left:24%;top:10%}.hero-beam-b{right:23%;top:18%;transform:rotate(-46deg);background:linear-gradient(transparent,var(--accent-3),transparent)}
.hero-code-mark{position:absolute;font-size:min(24vw,280px);font-weight:950;letter-spacing:-.12em;color:transparent;-webkit-text-stroke:1px rgba(174,188,255,.035);z-index:-3;user-select:none}
.x4n-hero h1{max-width:950px;font-size:clamp(46px,7.4vw,98px);line-height:.96;letter-spacing:-.075em;background:linear-gradient(110deg,#fff 0%,#e8e9ff 38%,#aab8f0 70%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.x4n-hero>p{max-width:720px;font-size:clamp(15px,1.8vw,19px);line-height:1.75;color:#929fbe}
.eyebrow{border:1px solid rgba(174,188,255,.11);background:rgba(10,15,30,.64);border-radius:999px;padding:7px 11px;backdrop-filter:blur(12px)}
.hero-trust{gap:10px;flex-wrap:wrap;justify-content:center}.hero-trust span{padding:8px 11px;border-radius:10px;border:1px solid rgba(174,188,255,.075);background:rgba(10,14,28,.55)}.hero-trust b{font-weight:650}
.x4n-section-head{align-items:end}.x4n-section-head h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.055em}.x4n-section-head p{max-width:490px;line-height:1.7}
.section-kicker{color:var(--accent-2);letter-spacing:.12em;font-size:10px;font-weight:850;text-transform:uppercase}
.product-category-section{border-color:rgba(174,188,255,.08);background:radial-gradient(circle at 8% 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 20rem),radial-gradient(circle at 95% 0,color-mix(in srgb,var(--accent-2) 5%,transparent),transparent 20rem),linear-gradient(155deg,rgba(13,18,34,.76),rgba(7,10,22,.9))}
.product{border-color:rgba(174,188,255,.09);background:linear-gradient(160deg,rgba(17,24,43,.93),rgba(8,12,25,.98));transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.product:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:0 28px 70px rgba(0,0,0,.26),0 0 35px color-mix(in srgb,var(--accent) 7%,transparent)}
.purchase{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent-2) 6%,transparent));border-color:color-mix(in srgb,var(--accent) 18%,transparent)}
.x4n-feedback{position:relative;border-top:1px solid rgba(174,188,255,.06);border-bottom:1px solid rgba(174,188,255,.06);background:radial-gradient(circle at 15% 50%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 26rem),radial-gradient(circle at 85% 40%,color-mix(in srgb,var(--accent-2) 5%,transparent),transparent 28rem),rgba(6,9,19,.58)}
.feedback-card{border-color:rgba(174,188,255,.09);background:linear-gradient(155deg,rgba(17,23,42,.94),rgba(8,12,25,.96));box-shadow:0 22px 60px rgba(0,0,0,.18)}
.feedback-verified{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.x4n-footer{background:rgba(5,7,17,.8)}

/* Login */
.login-body{display:grid;place-items:center;padding:28px}
.login-shell{width:min(100%,520px)}
.login-card{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 18rem),linear-gradient(155deg,rgba(18,24,44,.96),rgba(7,10,22,.98));border:1px solid rgba(174,188,255,.11);border-radius:24px;box-shadow:0 40px 120px rgba(0,0,0,.42)}
.login-card:before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-2),var(--accent),var(--accent-3),transparent)}
.login-card h1{font-size:34px;letter-spacing:-.055em}

.preview-shell{background:#050711!important}.preview-stage{padding:18px}.preview-nav{margin-bottom:10px}.preview-hero{min-height:360px;padding:48px 18px}.preview-hero h1{font-size:clamp(34px,7vw,64px)}

@media(max-width:1180px){
  .site-editor-layout{grid-template-columns:1fr}.site-preview-column{position:static}.site-preview-card{max-width:none}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}.sidebar-foot{position:static;margin-top:14px}.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.main{padding:0 18px 40px}.topbar{top:0}.sticky-page-head{top:82px}
  .page-head{align-items:flex-start;flex-direction:column}.field-row,.field-row.three,.grid.two,.grid.three{grid-template-columns:1fr}
}
@media(max-width:680px){
  .grid.stats{grid-template-columns:1fr}.nav{grid-template-columns:1fr}.x4n-nav{margin-top:10px}.nav-signal{display:none}.x4n-hero{min-height:540px;padding:70px 8px 55px}.x4n-hero h1{font-size:clamp(42px,14vw,68px)}.hero-actions{flex-direction:column;width:100%}.hero-actions .btn{width:100%;justify-content:center}.x4n-section-head{align-items:flex-start;flex-direction:column}.sticky-page-head{position:static}.site-preview-column{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* ===== Storefront scale and product presentation ===== */
.public-body .public-wrap{
  width:min(1440px,calc(100% - 56px));
}

.public-body .product-category-stack.products{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:42px!important;
  width:100%;
}

.public-body .product-category-section{
  width:100%;
  padding:28px;
  border-radius:26px;
}

.public-body .product-category-head{
  margin-bottom:24px;
  padding:0 4px 20px;
}

.public-body .product-category-index{
  flex-basis:48px;
  width:48px;
  height:48px;
  border-radius:15px;
  font-size:12px;
}

.public-body .product-category-head h3{
  font-size:22px;
}

.public-body .product-category-head p{
  margin-top:6px;
  font-size:13px;
}

.public-body .product-category-head>span:last-child{
  font-size:11px;
}

.public-body .category-products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  width:100%;
}

.public-body .category-products .product{
  min-width:0;
  border-radius:24px;
}

.public-body .category-products .product-media{
  aspect-ratio:16/9.4;
  min-height:210px;
}

.public-body .category-products .product-body{
  padding:24px;
}

.public-body .category-products .product-top h3{
  font-size:22px;
}

.public-body .category-products .product-top p{
  min-height:52px;
  font-size:13px;
}

.public-body .category-products .price{
  font-size:24px;
}

.public-body .category-products .purchase{
  min-height:48px;
  padding:14px 16px;
  font-size:13px;
}

.public-footer-credit{
  width:100%;
  margin-top:22px;
  padding-top:12px;
  text-align:center;
  color:rgba(200,208,230,.20);
  font-size:8px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  user-select:none;
}

@media(max-width:1100px){
  .public-body .category-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
  .public-body .public-wrap{width:min(100% - 24px,1440px)}
  .public-body .product-category-section{padding:18px;border-radius:20px}
  .public-body .product-category-head{align-items:flex-start}
  .public-body .category-products{grid-template-columns:1fr;gap:16px}
  .public-body .category-products .product-media{min-height:190px}
}


/* X4nSystem unified brand logo + redesigned public footer */
.brand-logo-shell{
  overflow:hidden;
  padding:0;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(18,24,43,.96),rgba(8,11,22,.98));
  border:1px solid rgba(174,188,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.22);
}
.brand-logo-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.public-brand-mark.brand-logo-shell{border-radius:14px}
.footer-logo-shell{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
}

.x4n-feedback:has(.feedback-empty-state){
  padding-bottom:64px;
}
.x4n-feedback:has(.feedback-empty-state) .feedback-head{
  margin-bottom:22px;
}
.x4n-feedback:has(.feedback-empty-state) .feedback-marquee-shell{
  padding-bottom:0;
}
.x4n-feedback:has(.feedback-empty-state) .feedback-track{
  width:100%;
}
.x4n-feedback:has(.feedback-empty-state) .feedback-empty-state{
  width:min(980px,calc(100vw - 40px));
  margin:0 auto;
  padding:20px 24px;
  justify-content:flex-start;
  border-style:solid;
  border-color:rgba(174,188,255,.11);
  background:
    radial-gradient(circle at 0 50%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 20rem),
    linear-gradient(135deg,rgba(14,20,37,.82),rgba(7,11,22,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 55px rgba(0,0,0,.14);
}

.public-footer{
  position:relative;
  z-index:2;
  padding:22px 0 24px;
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent-2) 5%,transparent),transparent 24rem),
    linear-gradient(180deg,#050814 0%,#03050c 100%);
  border-top:1px solid rgba(174,188,255,.07);
}
.public-footer:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.public-footer-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(174,188,255,.09);
  border-radius:22px;
  background:
    radial-gradient(circle at 8% 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 17rem),
    radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--accent-2) 5%,transparent),transparent 20rem),
    linear-gradient(145deg,rgba(14,19,35,.84),rgba(7,10,21,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 60px rgba(0,0,0,.16);
}
.public-footer-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 20px 16px;
}
.footer-brand-block{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.footer-brand-copy{min-width:0}
.footer-brand-copy strong{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:850;
  letter-spacing:-.01em;
}
.footer-brand-copy span{
  display:block;
  margin-top:3px;
  color:rgba(172,184,210,.52);
  font-size:9px;
  letter-spacing:.035em;
}
.footer-message-wrap{
  display:flex;
  align-items:center;
  gap:9px;
  max-width:520px;
  color:rgba(172,184,210,.56);
  font-size:10px;
  line-height:1.5;
  text-align:right;
}
.footer-status-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent-2) 72%,transparent);
}
.public-footer-divider{
  height:1px;
  margin:0 20px;
  background:linear-gradient(90deg,transparent,rgba(174,188,255,.10) 18%,rgba(174,188,255,.10) 82%,transparent);
}
.public-footer-credit{
  width:100%;
  margin:0;
  padding:11px 20px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(200,208,230,.22);
  font-size:7.5px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  user-select:none;
}
.footer-credit-label{white-space:nowrap}
.footer-credit-separator{
  width:1px;
  height:9px;
  background:linear-gradient(180deg,transparent,rgba(164,151,255,.46),transparent);
  box-shadow:0 0 10px rgba(109,93,252,.18);
}

@media(max-width:720px){
  .x4n-feedback:has(.feedback-empty-state){padding-bottom:48px}
  .public-footer-main{align-items:flex-start;flex-direction:column;gap:14px;padding:16px}
  .footer-message-wrap{text-align:left}
  .public-footer-divider{margin:0 16px}
  .public-footer-credit{padding-left:16px;padding-right:16px}
}

/* X4nSystem V68.0 — ultimate production sizing, diagnostics and brand safety */
.brand > .brand-mark.brand-logo-shell,
.login-logo > .brand-mark.brand-logo-shell,
.public-brand-mark.brand-logo-shell{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  flex:0 0 42px !important;
  aspect-ratio:1/1;
  contain:layout paint;
}

.brand-logo-image{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}

.footer-logo-shell.brand-logo-shell{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  flex:0 0 38px !important;
}

.readiness-card{
  overflow:hidden;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 22rem),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--accent-2) 6%,transparent),transparent 24rem),
    linear-gradient(145deg,rgba(14,19,35,.96),rgba(7,10,21,.98));
}

.readiness-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.readiness-item{
  position:relative;
  min-width:0;
  padding:14px 15px;
  border:1px solid rgba(174,188,255,.09);
  border-radius:15px;
  background:rgba(7,11,23,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.readiness-item:before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:2px;
  border-radius:99px;
  opacity:.8;
}
.readiness-pass:before{background:#3ddc97;box-shadow:0 0 18px rgba(61,220,151,.28)}
.readiness-warning:before{background:#f4b860;box-shadow:0 0 18px rgba(244,184,96,.25)}
.readiness-critical:before{background:#ff5d7d;box-shadow:0 0 18px rgba(255,93,125,.28)}

.readiness-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.readiness-item-head strong{
  min-width:0;
  color:var(--text);
  font-size:12px;
  line-height:1.35;
}
.readiness-item p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}

@media(max-width:900px){
  .readiness-list{grid-template-columns:1fr}
}

/* X4nSystem V68 — unified Discord bot-suite control plane */
.suite-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:22px;
  border:1px solid rgba(123,108,255,.24);
  border-radius:22px;
  background:
    radial-gradient(circle at 10% 10%,rgba(19,200,255,.13),transparent 36%),
    radial-gradient(circle at 92% 12%,rgba(255,77,141,.12),transparent 34%),
    linear-gradient(135deg,rgba(109,93,252,.11),rgba(7,11,25,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 70px rgba(0,0,0,.24);
}
.suite-hero h4,.suite-section h4{margin:4px 0 7px;font-size:18px;color:#f4f6ff}
.suite-hero p,.suite-section p{margin:0;color:var(--muted);line-height:1.65}
.suite-hero-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:420px}
.suite-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0}
.suite-metric{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(9,14,31,.72)}
.suite-metric span{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}
.suite-metric strong{font-size:21px;color:#fff}
.suite-section{margin-top:14px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:rgba(7,11,24,.76)}
.suite-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.suite-toggle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.suite-toggle-card{position:relative;display:flex;align-items:center;gap:11px;min-height:72px;padding:12px 48px 12px 13px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(145deg,rgba(17,23,48,.82),rgba(8,12,27,.86));cursor:pointer;transition:.2s ease}
.suite-toggle-card:hover{transform:translateY(-1px);border-color:rgba(109,93,252,.36);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.suite-toggle-card input{position:absolute;opacity:0;pointer-events:none}
.suite-toggle-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.suite-toggle-copy strong{font-size:13px;color:#f3f5ff}
.suite-toggle-copy small{font-size:10px;color:var(--muted);line-height:1.35}
.suite-toggle-visual{position:absolute;right:13px;width:28px;height:16px;border-radius:999px;background:#222b45;border:1px solid rgba(255,255,255,.08);transition:.2s ease}
.suite-toggle-visual::after{content:"";position:absolute;width:10px;height:10px;top:2px;left:2px;border-radius:50%;background:#77809a;transition:.2s ease}
.suite-toggle-card input:checked~.suite-toggle-visual{background:linear-gradient(90deg,#6d5dfc,#13c8ff);box-shadow:0 0 20px rgba(19,200,255,.22)}
.suite-toggle-card input:checked~.suite-toggle-visual::after{left:14px;background:white}
.suite-inline-checks{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px;color:#c8cee4;font-size:12px}
.suite-inline-checks label,.suite-checkbox-line{display:flex;align-items:center;gap:8px;cursor:pointer}
.suite-subsystems{display:grid;grid-template-columns:1fr;gap:14px}
.suite-subsystem{padding:15px;border:1px solid rgba(255,255,255,.06);border-radius:17px;background:rgba(11,16,34,.72)}
.suite-health-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:16px;margin-bottom:12px}
.suite-health-summary.ready{background:rgba(38,208,124,.09);border:1px solid rgba(38,208,124,.22)}
.suite-health-summary.warning{background:rgba(255,166,67,.09);border:1px solid rgba(255,166,67,.24)}
.suite-health-list{display:grid;gap:7px;padding:14px;border-radius:14px;background:rgba(7,11,24,.72);color:#cbd1e6;line-height:1.55}

@media (max-width:1100px){
  .suite-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .suite-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .suite-hero{grid-template-columns:1fr}
  .suite-hero-actions{justify-content:flex-start;max-width:none}
  .suite-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite-toggle-grid{grid-template-columns:1fr}
}

/* V71 — loader/client build separation and live runtime telemetry */
.build-surface-card{
  position:relative;
  overflow:hidden;
}
.build-surface-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2),transparent);
  opacity:.8;
}
.runtime-app-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.runtime-app-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:88px;
  padding:16px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:
    radial-gradient(circle at 90% 0%,rgba(19,200,255,.08),transparent 48%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.runtime-app-card strong{display:block;font-size:15px}
.runtime-app-card small{display:block;margin-top:5px;color:var(--muted)}
.runtime-app-metrics{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.runtime-app-metrics span{
  min-width:84px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  text-align:center;
  font-size:12px;
}
.runtime-app-metrics b{display:block;color:var(--text);font-size:18px;line-height:1.15}
@media (max-width:760px){
  .runtime-app-card{align-items:flex-start;flex-direction:column}
  .runtime-app-metrics{width:100%;justify-content:stretch}
  .runtime-app-metrics span{flex:1}
}