:root {
  /* Palette lifted from the PVM smoke banner */
  --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 accent — a warm red echoing the undertones in the PVM smoke, used
     sparingly for CTAs, active tab underline and highlight badges. */
  --ember:#e14b4b; --ember2:#ff6a5c; --ember-dim:#7a2f2f;
  --radius:14px;
}
* { box-sizing: border-box; }
::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: "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%, #e14b4b1c, transparent 60%),
    radial-gradient(900px 460px at 8% 0%, #2a3a4530, transparent 60%),
    radial-gradient(700px 380px at 50% 100%, #1c242a55, transparent 65%);
}
/* faint animated ember glow drifting behind everything */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background:
    radial-gradient(500px 260px at 15% 20%, #e14b4b14, transparent 70%),
    radial-gradient(600px 300px at 85% 75%, #ff6a5c12, transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
@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 { animation:none; } * { animation-duration:.01ms !important; } }

header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 28px;
  border-bottom:1px solid var(--border); background:linear-gradient(90deg,#12161bf0,#1b2229f0);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; box-shadow:0 6px 24px #0007; }
.brandwrap { display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.brand { height:44px; width:80px; object-fit:cover; object-position:center 40%;
  border-radius:10px; border:1px solid var(--border); display:block;
  box-shadow:0 0 0 1px #0006, 0 4px 16px #e14b4b22; transition:box-shadow .2s, transform .2s; }
.brandwrap:hover .brand { box-shadow:0 0 0 1px #0006, 0 6px 22px #e14b4b44; transform:translateY(-1px); }
h1 { font-size:18px; margin:0; letter-spacing:.09em; font-weight:700; }
.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 { display:flex; gap:14px; align-items:center; }
nav a { color:var(--silver); text-decoration:none; position:relative; }
nav a:hover { color:var(--ember2); }

/* hero */
#hero { margin:28px 0 8px; animation:fadeUp .5s ease both; }
.hero-banner { width:100%; aspect-ratio: 1365 / 560; object-fit:cover; object-position:center 34%;
  border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:0 24px 60px #000c, 0 0 80px -20px #e14b4b40 inset; display:block; }
.tagline { text-align:center; color:var(--muted); margin:16px 0 0; letter-spacing:.03em; font-size:15px; }

main { max-width:960px; margin:0 auto; padding:24px; position:relative; z-index:1; }
main.wide { max-width:1200px; }
section { margin-bottom:36px; animation:fadeUp .45s ease both; }
h2 { 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; }
h3 { font-size:14px; color:var(--muted); }

/* 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; }

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; }
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; }
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:#4d251f; color:#eec6bd; font-weight:500; border:1px solid #6a352c; }
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; }
.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;
}

.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,#1d252b,#151a1e); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; position:relative; overflow:hidden;
  box-shadow:0 10px 30px #0006; transition:border-color .2s, box-shadow .2s, transform .2s; }
.card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg,#ffffff14,transparent 40%); pointer-events:none; }
.card:hover { border-color:var(--ember-dim); box-shadow:0 16px 44px #000a, 0 0 0 1px #e14b4b22; transform:translateY(-3px); }
.card h3 { margin:0 0 6px; color:var(--fg); font-size:16px; font-weight:700; }
.card .desc { color:var(--muted); font-size:14px; min-height:56px; line-height:1.45; }
.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,#1d252b,#151a1e); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:0 8px 24px #0005;
  transition:border-color .2s, box-shadow .2s; }
.lic:hover { border-color:var(--ember-dim); box-shadow:0 14px 36px #0008; }
.lic-head { display:flex; justify-content:space-between; align-items:center; }
.lic-head h3 { margin:0; }
.key { font-family:ui-monospace,Consolas,monospace; background:var(--input); padding:5px 9px; border-radius:6px;
  border:1px solid var(--ember-dim); color:var(--ember2); letter-spacing:.03em; text-shadow:0 0 12px #e14b4b40; }
.row { display:flex; flex-wrap:wrap; align-items:center; margin-top:10px; }
.ip { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-top:1px solid var(--border); }
.ip button { background:#40262c; color:#e8c9cf; padding:4px 10px; font-size:12px; font-weight:500; }
.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(--bad); color:#fff; }
.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; } }

.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; }
#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; }