/* extracted from home.phphtml{background:#0b0f1a}body{opacity:0;transition:opacity .2s ease} */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ==== THEME (Warm Plasma) ==== */
:root{
  --bg:#0b0f1a; --panel:rgba(12,18,28,0.90);
  --amber:#ffae00; --orange:#ff6a00; --text:#ffeedd;
  --muted:#c9b7a6; --muted-2:#e1d3c5;
  --chip:rgba(255,174,0,0.12); --chip-b:rgba(255,174,0,0.35); --chip-a:#ffae00;
  --card-b:rgba(255,174,0,0.22); --card-bh:rgba(255,106,0,0.45);
  --hot-a:#ffae00; --hot-b:#ff6a00;
  --ok:#28a745; --danger:#dc3545;

  /* Device-aware media defaults (JS will set *_current) */
  --media-aspect-current: 16/9;
  --media-maxh-current: 200px;
}

*{box-sizing:border-box}
body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; position:relative; z-index:0 }

/* Background */
.bg-plasma{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1000px 800px at 15% 20%, rgba(255,174,0,0.20), transparent 60%),
             radial-gradient(900px 700px at 85% 30%, rgba(255,106,0,0.18), transparent 65%),
             radial-gradient(1200px 900px at 50% 120%, rgba(255,140,0,0.12), transparent 70%), #0b0f1a;
  mask-image: radial-gradient(120% 120% at 50% 50%, #000 55%, transparent 100%);
  animation: bgDrift 28s linear infinite }
.bg-plasma::before{ content:""; position:absolute; inset:-20%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255,174,0,0.08), rgba(255,106,0,0.00) 25%, rgba(255,174,0,0.10) 50%, rgba(255,106,0,0.00) 75%, rgba(255,174,0,0.08) 100%);
  filter: blur(24px) saturate(120%); animation: bgSpin 40s linear infinite; opacity:.45 }
.bg-plasma::after{ content:""; position:absolute; inset:0; background-image:
  repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 2px),
  repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 2px);
  mix-blend-mode: overlay; opacity:.45 }
@keyframes bgDrift{ 0%{background-position:0 0,0 0,0 0} 50%{background-position:10% 4%,-8% 3%,0 0} 100%{background-position:0 0,0 0,0 0} }
@keyframes bgSpin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Shell */
.tg-shell{ position:relative; z-index:1; padding:24px 12px }
.tg-shell-inner{ max-width:1100px; margin:0 auto; background: linear-gradient(180deg, rgba(18,12,8,0.45), rgba(18,12,8,0.25)) , var(--panel);
  border-radius:20px; border:1px solid rgba(255,174,0,0.25);
  box-shadow: 0 10px 40px rgba(255,174,0,0.10), inset 0 0 30px rgba(255,174,0,0.06);
  backdrop-filter: blur(8px) saturate(130%); overflow:clip }

/* Hero */
.vaultenex-portal{ position:relative; z-index:2; min-height:60vh; padding:4rem 1rem 2rem; text-align:center }
.vault-logo{ width:200px; margin:0 auto; object-fit:contain; border-radius:12px; filter:drop-shadow(0 0 20px rgba(255,174,0,.5)) }
.vault-title{ font-size:2.2rem; font-weight:800; background:linear-gradient(90deg,var(--amber),var(--orange),var(--amber));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; animation:glowText 4s linear infinite; margin-top:15px }
@keyframes glowText{ 0%{background-position:0%}100%{background-position:200%} }
.vault-sub{ color:var(--muted); font-size:1.05rem; margin-top:8px; line-height:1.4 }
.auth-note{ color:#bfae9d; font-size:.85rem; margin-top:12px }
.vault-btn{ background:linear-gradient(90deg,var(--amber),var(--orange)); border:none; border-radius:14px; padding:14px 30px; color:#1b1200; font-weight:800;
  box-shadow:0 0 18px rgba(255,174,0,0.35); transition:.3s }
.vault-btn.secondary{ background:rgba(255,174,0,.12); color:#ffe9cf; border:1px solid rgba(255,174,0,.35); box-shadow:none }
.vault-btn:hover{ transform:translateY(-2px); box-shadow:0 0 28px rgba(255,174,0,0.55) }

/* Logged-in user capsule */
.vault-user{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; flex-wrap:wrap }
.vault-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,174,0,.45) }
.vault-username{ font-weight:900; color:#ffe9cf }

/* Points banner */
.points-banner{
  margin:18px auto 0; max-width:820px; padding:12px 16px;
  background:rgba(24,16,10,0.65); border:1px solid rgba(255,174,0,0.25); border-radius:14px;
  box-shadow:inset 0 0 12px rgba(255,174,0,0.08)
}
.points-banner .pb-title{ font-weight:900; color:#ffd79f; display:flex; align-items:center; gap:8px; margin-bottom:6px }
.points-banner .pb-list{ margin:0; padding-left:18px; text-align:left; color:#ffe9cf; font-size:.95rem; line-height:1.45 }
.points-banner .hi{ color:#ffce73; font-weight:900 }

/* Stats */
.vaultenex-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin-bottom:2rem; padding:0 14px }
.stat-box{ background:rgba(24,16,10,0.65); border:1px solid rgba(255,174,0,0.20); border-radius:14px; padding:12px 24px; min-width:150px; box-shadow:inset 0 0 15px rgba(255,174,0,0.07) }
.stat-box h4{ color:var(--amber); font-weight:800 }
.live-dot{ display:inline-block; width:8px; height:8px; background:var(--amber); border-radius:50%; margin-left:6px; animation:pulse 1.5s infinite; box-shadow:0 0 0 0 rgba(255,174,0,0.65) }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,174,0,.65)} 70%{box-shadow:0 0 0 8px rgba(255,174,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,174,0,0)} }

/* Section title */
.center-title{ position:relative; z-index:2 }
.section-title{ font-size:1.9rem; font-weight:800; background:linear-gradient(90deg,var(--amber),var(--orange),var(--amber));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:glowText 4s linear infinite; text-shadow:0 0 15px rgba(255,174,0,0.25) }
.section-underline{ width:140px; height:3px; margin:10px auto; background:linear-gradient(90deg,transparent,var(--amber),transparent); border-radius:2px; animation:beamSlide 5s infinite linear }
.glow-sub{ color:var(--muted-2); font-size:.95rem; letter-spacing:.3px }
@keyframes beamSlide{0%{background-position:0 0;}100%{background-position:200% 0;}}

/* ===== Premium Cards v4 ===== */
.vault-card.v4{
  position:relative; display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; height:100%;
  background:linear-gradient(180deg, rgba(18,12,8,.55), rgba(18,12,8,.38));
  border:1px solid rgba(255,174,0,.22); border-radius:18px; padding:14px;
  box-shadow:inset 0 0 18px rgba(255,174,0,.08);
  transition:transform .22s, box-shadow .22s, border-color .22s; backdrop-filter:blur(6px) saturate(120%);
  opacity:0; transform:translateY(24px);
}
.vault-card.v4.visible{ opacity:1; transform:translateY(0) }
.vault-card.v4:hover{ transform:translateY(-3px); border-color:rgba(255,174,0,.35); box-shadow:0 10px 28px rgba(255,174,0,0.18) }
.vault-card.v4.is-best{ border-color:rgba(255,138,0,.55); box-shadow:0 0 26px rgba(255,138,0,.18) }
.vault-card .badge-best{
  position:absolute; top:10px; right:10px; z-index:5; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-weight:900; font-size:.78rem;
  background:linear-gradient(135deg, #ffae00, #ff6a00); color:#1b1200; box-shadow:0 6px 20px rgba(255,120,0,.35);
}

/* Head */
.vc-head{ display:flex; align-items:center; gap:10px; justify-content:space-between }
.vc-tier{
  background:linear-gradient(180deg, rgba(255,174,0,.16), rgba(255,106,0,.10)); border:1px solid rgba(255,174,0,.30);
  padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:900; color:#ffd79f;
}
.vc-title{ margin:0; font-size:1.02rem; font-weight:800; color:#fff4e6; flex:1; text-align:center }
.vc-live{ display:flex; align-items:center; gap:6px; color:#ffe2a8; font-weight:800; font-size:.82rem;
  padding:4px 10px; border-radius:999px; background:rgba(255,174,0,.12); border:1px solid rgba(255,174,0,.30); }
.vc-live .dot{ width:8px; height:8px; border-radius:50%; background:#ffae00; box-shadow:0 0 0 0 rgba(255,174,0,.7); animation:livePulse 1.6s infinite }

/* Media */
.vc-media{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06);
  aspect-ratio: var(--media-aspect-current);
  background:#0e1420;
}
.vc-video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }

.vc-chip{
  position:absolute; z-index:3; bottom:10px; left:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-weight:900; font-size:.78rem; border-radius:10px;
  background:rgba(12,18,28,.65); border:1px solid rgba(255,255,255,.12); color:#ffe9cf; backdrop-filter: blur(4px);
}
.vc-chip-pts{ left:auto; right:10px }
.vc-chip i{ color:#ffce73 }

/* Metrics */
.vc-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; margin:0; padding:0 }
.vc-metrics li{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 12px; min-height:58px; display:flex; flex-direction:column; justify-content:center }
.vc-metrics .l{ color:#e9ccaa; font-size:.78rem; font-weight:700; margin-bottom:2px }
.vc-metrics .v{ color:#fff4e6; font-weight:900; font-size:1.02rem; letter-spacing:.2px }
.vc-metrics .v em{ opacity:.85; margin-left:4px; font-style:normal; font-weight:700; font-size:.9em }
.vc-metrics .v small{ display:block; color:#ffd199; font-weight:800; font-size:.72rem }

/* Actions */
.vc-actions{ display:flex; align-items:center; gap:10px; justify-content:space-between }
.vc-btn{ display:inline-block; width:100%; text-align:center; background:linear-gradient(90deg,#ffae00,#ff6a00); color:#1b1200;
  border:none; border-radius:12px; padding:10px 16px; font-weight:900; transition:.22s; box-shadow:0 0 16px rgba(255,174,0,.28) }
.vc-btn:hover{ transform:translateY(-2px); box-shadow:0 0 22px rgba(255,174,0,.45) }
.vc-btn[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(.2) }

/* VX Airdrop section */
.vx-airdrop .vx-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
@media (max-width: 992px){ .vx-airdrop .vx-wrap{ grid-template-columns:1fr; } }
.vx-left{ background:rgba(18,12,8,.65); border:1px solid rgba(255,174,0,.22); border-radius:18px; padding:18px; box-shadow:inset 0 0 18px rgba(255,174,0,.08) }
.vx-right{ display:flex; flex-direction:column; gap:12px }
.vx-kicker{ display:inline-flex; align-items:center; gap:8px; color:#ffd79f; font-weight:900; letter-spacing:.3px }
.vx-title{ margin:4px 0 6px; font-size:1.6rem; font-weight:900; color:#fff3e6 }
.vx-title span{ background:linear-gradient(90deg,var(--amber),var(--orange),var(--amber)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.vx-sub{ color:#e9ccaa; margin-bottom:10px }
.vx-steps{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.vx-steps li{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 12px; color:#ffe9cf; font-weight:600 }
.vx-steps i{ width:20px; text-align:center; margin-right:8px; color:#ffce73 }
.vx-targets{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.vx-pill{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,174,0,.12); border:1px solid rgba(255,174,0,.35); border-radius:999px; padding:8px 12px; color:#ffe9cf; font-weight:900 }
.vx-note{ color:#c9b7a6; font-size:.85rem; margin-top:6px }

.vx-card{ background:rgba(18,12,8,.65); border:1px solid rgba(255,174,0,.22); border-radius:18px; padding:14px; box-shadow:inset 0 0 18px rgba(255,174,0,.08) }
.vx-card-hd{ font-weight:900; color:#ffd79f; margin-bottom:8px }
.vx-card-bd{ display:grid; gap:8px }
.vx-metric{ display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 12px }
.vx-metric .l{ color:#e9ccaa; font-weight:700; font-size:.9rem }
.vx-metric .v{ color:#fff4e6; font-weight:900; font-size:1.05rem }
.vx-card-ft{ margin-top:10px }
.vx-btn{ display:block; width:100%; background:linear-gradient(90deg,#ffae00,#ff6a00); color:#1b1200; border:0; border-radius:12px; padding:10px 16px; font-weight:900 }
.vx-mini{ font-size:.9rem; color:#e1d3c5; padding:10px 12px; border:1px dashed rgba(255,174,0,.35); border-radius:12px; background:rgba(255,174,0,.06) }
.vx-range{ width:100%; appearance:none; height:6px; border-radius:999px; background:rgba(255,255,255,.08); outline:none }
.vx-range::-webkit-slider-thumb{ appearance:none; width:18px; height:18px; border-radius:50%; background:linear-gradient(90deg,#ffae00,#ff6a00); border:0; box-shadow:0 0 0 4px rgba(255,174,0,.25) inset }
.vx-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:linear-gradient(90deg,#ffae00,#ff6a00); border:0; box-shadow:0 0 0 4px rgba(255,174,0,.25) inset }
.vx-cap{ color:#c9b7a6; font-size:.85rem; margin-top:4px }

/* FAQ */
.vault-faq{ position:relative; z-index:2; margin-bottom:4rem; padding:0 14px }
.faq-container{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:14px }
.faq-card{ background:rgba(32,22,14,0.78); border:1px solid rgba(255,174,0,0.20); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 0 20px rgba(255,174,0,0.08);
  backdrop-filter:blur(6px); transition:all .3s ease; overflow:hidden }
.faq-card:hover{ border-color:rgba(255,174,0,0.34); box-shadow:0 10px 28px rgba(0,0,0,.28), 0 0 22px rgba(255,174,0,0.12) }
.faq-card.open{ box-shadow:0 10px 30px rgba(0,0,0,.32), 0 0 28px rgba(255,174,0,0.16); border-color:rgba(255,174,0,0.38) }
.faq-header{ display:flex; align-items:center; gap:12px; justify-content:space-between; padding:16px 18px; cursor:pointer }
.faq-icon{ display:flex; align-items:center; justify-content:center; margin-right:2px }
.icon-chip{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,174,0,.18), rgba(255,106,0,.12)); border:1px solid rgba(255,174,0,.30); box-shadow:inset 0 0 12px rgba(255,174,0,.18) }
.icon-chip i{ font-size:14px; color:var(--amber) }
.faq-header h5{ flex:1; text-align:left; color:#fff3e1; font-size:1rem; font-weight:900; margin:0; letter-spacing:.2px }
.faq-arrow i{ color:var(--amber); transition:transform .25s; opacity:.95 }
.faq-body{ max-height:0; overflow:hidden; transition:max-height .35s ease,padding .25s ease; padding:0 18px; color:#ffe8c9; text-align:left; font-size:.94rem; line-height:1.55; letter-spacing:.15px }
.faq-inner{ padding:10px 0 16px }
.faq-card.open .faq-body{ padding:0 18px }

/* Responsive tweaks */
@media (max-width: 768px){
  .tg-shell-inner{ border-radius:16px }
  .vault-card.v4{ padding:12px }
}
@media (prefers-reduced-motion: reduce){
  .bg-plasma, .bg-plasma::before, .live-dot, .vc-live .dot{ animation:none !important }
}

/* Keyframes */
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,174,0,.7)}70%{box-shadow:0 0 0 8px rgba(255,174,0,0)}100%{box-shadow:0 0 0 0 rgba(255,174,0,0)}}