/*
  ABP 3.0 — TRON / Neon revamp (VIBRANT / INTERACTIVE)
  Final behavior:
  - NO red anywhere (replaced with neon blue)
  - Each card gets ONE solid neon blue border
  - A SINGLE small glow spot travels around the OUTSIDE border line, completing full loops
  - No multi-color rotating gradients, no interior fill

  Inline CSS in earn_points.php remains, but is visually overridden here.
*/

/* =========================
   Base (original) styles
   ========================= */
:root {
  --bg:#0f1115;
  --panel:#151922;
  --text:#e8ecf1;
  --muted:#9aa3b2;
  --primary:#6ea8fe;
  --accent:#7effbe;
}
*{box-sizing:border-box}
body.neo{background:var(--bg); color:var(--text); font:16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0;}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.neo-header{position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#0d1016; border-bottom:1px solid #222835}
.neo-header .brand a{font-weight:700; font-size:18px; color:#fff}
.neo-header nav a, .linklike{margin:0 8px; color:#cfe3ff}
.neo-header nav .cta{background:var(--primary); color:#0b0d12; padding:8px 12px; border-radius:10px; font-weight:700}
.content{max-width:1080px; margin:24px auto; padding:0 16px}
.card{background:var(--panel); border:1px solid #202637; border-radius:14px; padding:16px; margin-bottom:16px; box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.25)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #2a3142; background:#1a1f2b; color:#e8ecf1; cursor:pointer}
.btn:hover{background:#22293a}
.input, select, textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a3142; background:#0f141e; color:#e8ecf1}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #232a3a}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.kpi{background:#131824; padding:12px; border-radius:12px; border:1px solid #202637}
.site-footer{padding:24px 16px; border-top:1px solid #222835; text-align:center; color:var(--muted)}
.notice{padding:10px 12px; border-radius:10px; border:1px solid #31415a; background:#111827}
.success{border-color:#2a6d4b; background:#0d1a14}
.error{border-color:#7a2a2a; background:#1a0f0f}
small.muted{color:var(--muted)}

/* =========================
   TRON theme (opt-in)
   ========================= */
body.tron{
  --tron-bg-0:#03040a;
  --tron-bg-1:#050a14;

  /* Primary neon blues */
  --tron-blue-1:#12d7ff;     /* bright cyan */
  --tron-blue-2:#2f6bff;     /* deeper neon blue */
  --tron-blue-deep:#0a2cff;  /* deep electric */

  --tron-text:#eaf7ff;
  --tron-muted:rgba(234,247,255,.70);

  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(18,215,255,.22), transparent 55%),
    radial-gradient(900px 520px at 110% 0%, rgba(47,107,255,.16), transparent 62%),
    radial-gradient(800px 520px at 55% 120%, rgba(18,215,255,.10), transparent 55%),
    linear-gradient(180deg, var(--tron-bg-0), var(--tron-bg-1));
  color:var(--tron-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Cinematic scan + grid overlay */
body.tron::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.00) 0 6px, rgba(0,0,0,.20) 6px 7px);
  opacity:.72;
  transform: translateZ(0);
  animation: tron-grid 18s linear infinite;
}
@keyframes tron-grid{
  0%{background-position: 0 0, 0 0, 0 0}
  100%{background-position: 0 340px, 460px 0, 0 0}
}

/* Soft ambient glow */
body.tron::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(18,215,255,.12), transparent 65%),
    radial-gradient(900px 520px at 75% 30%, rgba(47,107,255,.10), transparent 66%);
  filter: blur(10px);
  animation: tron-breathe 7.2s ease-in-out infinite;
  opacity:.88;
}
@keyframes tron-breathe{
  0%,100%{transform: scale(1) translateY(0)}
  50%{transform: scale(1.02) translateY(-6px)}
}

body.tron a{color:var(--tron-blue-1); text-decoration:none;}
body.tron a:hover{filter: drop-shadow(0 0 14px rgba(18,215,255,.35));}

/* Header */
body.tron .neo-header{
  background: rgba(3,6,14,.70);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(18,215,255,.20);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
body.tron .neo-header .brand a{
  color: var(--tron-text);
  letter-spacing:.6px;
  text-shadow: 0 0 18px rgba(18,215,255,.35);
}
body.tron .neo-header nav a,
body.tron .linklike{color: rgba(234,247,255,.86);}
body.tron .neo-header nav a:hover{color: var(--tron-blue-1);}
body.tron .neo-header nav .cta{
  background: linear-gradient(90deg, rgba(18,215,255,.95), rgba(47,107,255,.95));
  color:#05101c;
  border: 1px solid rgba(18,215,255,.55);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 14px 34px rgba(18,215,255,.16);
}

/* =========================
   Cards — single-color border + single hotspot runner (ALL BLUE)
   ========================= */
body.tron .card{
  /* one color everywhere */
  --edge: rgba(18,215,255,.72);
  --edgeSolid: rgba(18,215,255,.38);
  --spot: rgba(18,215,255,.98);
  --spotSoft: rgba(18,215,255,.42);
  --spotGlow: rgba(18,215,255,.22);

  position: relative;
  overflow: hidden;
  border-radius: 18px;

  background:
    radial-gradient(900px 240px at 15% 0%, rgba(18,215,255,.11), transparent 55%),
    radial-gradient(700px 260px at 110% 25%, rgba(47,107,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(8,18,42,.92), rgba(5,13,32,.92));

  border: 1px solid rgba(18,215,255,.16);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 18px 60px rgba(0,0,0,.60);

  transform: translateZ(0);
  transition: transform .14s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Static border ring (single blue) */
body.tron .card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  padding:1px;

  background: linear-gradient(0deg, var(--edge), var(--edge));

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:.98;
  pointer-events:none;
  filter: drop-shadow(0 0 10px var(--spotGlow));
}

/* Hotspot runner — ONE blue glow spot that travels the perimeter */
body.tron .card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  padding:2px;
  pointer-events:none;

  background:
    /* TOP strip */
    linear-gradient(90deg,
      transparent 0%,
      transparent 44%,
      var(--spotSoft) 47%,
      var(--spot) 50%,
      var(--spotSoft) 53%,
      transparent 56%,
      transparent 100%
    ),
    /* RIGHT strip */
    linear-gradient(180deg,
      transparent 0%,
      transparent 44%,
      var(--spotSoft) 47%,
      var(--spot) 50%,
      var(--spotSoft) 53%,
      transparent 56%,
      transparent 100%
    ),
    /* BOTTOM strip */
    linear-gradient(90deg,
      transparent 0%,
      transparent 44%,
      var(--spotSoft) 47%,
      var(--spot) 50%,
      var(--spotSoft) 53%,
      transparent 56%,
      transparent 100%
    ),
    /* LEFT strip */
    linear-gradient(180deg,
      transparent 0%,
      transparent 44%,
      var(--spotSoft) 47%,
      var(--spot) 50%,
      var(--spotSoft) 53%,
      transparent 56%,
      transparent 100%
    );

  background-repeat:no-repeat;
  background-size:
    220% 2px,
    2px 220%,
    220% 2px,
    2px 220%;
  background-position:
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:0;
  filter:
    drop-shadow(0 0 8px var(--spotGlow))
    drop-shadow(0 0 16px var(--spotGlow));
  transform: translateZ(0);
}

/* Hover: lift + enable runner */
body.tron .card:hover{
  transform: translateY(-2px);
  border-color: var(--edgeSolid);
  box-shadow:
    0 0 0 1px var(--edgeSolid),
    0 0 46px var(--spotGlow),
    0 24px 90px rgba(0,0,0,.72);
}
body.tron .card:hover::after{
  opacity:1;
  animation: border-hotspot 7.2s linear infinite; /* slow loop */
}

@keyframes border-hotspot{
  0%{
    background-position:
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%;
  }
  25%{
    background-position:
      100% 0%,
      100% 0%,
      100% 100%,
      0% 100%;
  }
  50%{
    background-position:
      100% 0%,
      100% 100%,
      100% 100%,
      0% 100%;
  }
  75%{
    background-position:
      100% 0%,
      100% 100%,
      0% 100%,
      0% 100%;
  }
  100%{
    background-position:
      0% 0%,
      100% 0%,
      100% 100%,
      0% 0%;
  }
}

/* Typography */
body.tron h1, body.tron h2, body.tron h3, body.tron h4{color: var(--tron-text); letter-spacing: .4px;}
body.tron h3{margin-top:0; text-shadow: 0 0 20px rgba(18,215,255,.14);}
body.tron p{color: rgba(234,247,255,.82)}
body.tron small.muted{color: var(--tron-muted)}

/* KPIs */
body.tron .kpi{
  background:
    radial-gradient(520px 160px at 30% 0%, rgba(18,215,255,.11), transparent 62%),
    linear-gradient(180deg, rgba(6,16,36,.92), rgba(5,13,32,.92));
  border: 1px solid rgba(18,215,255,.18);
  box-shadow: 0 0 26px rgba(18,215,255,.08);
}
body.tron .kpi .value, body.tron .kpi [data-pts]{
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(18,215,255,.22);
}

/* Buttons: shimmer + glow */
body.tron .btn{
  position: relative;
  overflow:hidden;
  border-radius: 12px;
  border: 1px solid rgba(18,215,255,.32);
  background: linear-gradient(180deg, rgba(8,18,42,.92), rgba(5,13,32,.92));
  color: rgba(234,247,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 10px 26px rgba(0,0,0,.40);
  transition: transform .10s ease, filter .18s ease, box-shadow .18s ease;
}
body.tron .btn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(18,215,255,.24), rgba(47,107,255,.18), transparent);
  transform: rotate(18deg);
  opacity:0;
}
body.tron .btn:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 18px rgba(18,215,255,.22));
  box-shadow: 0 0 0 1px rgba(18,215,255,.22), 0 14px 34px rgba(0,0,0,.50), 0 0 22px rgba(18,215,255,.10);
}
body.tron .btn:hover::before{opacity:.95; animation: btn-shimmer .75s ease-out 1;}
@keyframes btn-shimmer{
  from{transform: translateX(0) rotate(18deg)}
  to{transform: translateX(260%) rotate(18deg)}
}
body.tron .btn:active{transform: translateY(0px) scale(.99);}

/* Primary CTAs */
body.tron .btn-lg, body.tron .neo-header nav .cta{border-radius: 12px;}
body.tron .btn-lg{
  border: 1px solid rgba(18,215,255,.55) !important;
  background: linear-gradient(90deg, rgba(18,215,255,.98), rgba(47,107,255,.98)) !important;
  color: #04101a !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 16px 44px rgba(18,215,255,.16) !important;
}
body.tron .btn-lg:hover{filter: drop-shadow(0 0 22px rgba(18,215,255,.30));}

/* Ghost button */
body.tron .btn.ghost, body.tron .btn-ghost{
  background: linear-gradient(180deg, rgba(18,215,255,.08), rgba(8,18,42,.92)) !important;
  border: 1px solid rgba(18,215,255,.45) !important;
  color: rgba(234,247,255,.94) !important;
  box-shadow: 0 0 24px rgba(18,215,255,.10);
}
body.tron .btn.ghost:hover, body.tron .btn-ghost:hover{
  filter: drop-shadow(0 0 22px rgba(18,215,255,.22));
}

/* Inputs */
body.tron .input, body.tron select, body.tron textarea{
  border: 1px solid rgba(18,215,255,.28);
  background: rgba(5,12,26,.88);
  box-shadow: 0 0 22px rgba(18,215,255,.06);
}
body.tron .input:focus, body.tron select:focus, body.tron textarea:focus{
  outline: none;
  border-color: rgba(18,215,255,.55);
  box-shadow: 0 0 0 3px rgba(18,215,255,.14), 0 0 34px rgba(18,215,255,.10);
}

/* Footer */
body.tron .site-footer{
  color: rgba(234,247,255,.62);
  border-top: 1px solid rgba(18,215,255,.14);
  background: rgba(3,6,14,.55);
}

/* =========================
   earn_points.php overrides (still honored)
   ========================= */
body.tron .hero-card{
  color: var(--tron-text) !important;
  background:
    radial-gradient(1000px 520px at 18% -10%, rgba(18,215,255,.28), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(47,107,255,.18), transparent 62%),
    radial-gradient(820px 420px at 55% 120%, rgba(18,215,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(8,18,42,.92), rgba(5,13,32,.92)) !important;
  border: 1px solid rgba(18,215,255,.42) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 22px 70px rgba(0,0,0,.62),
    0 0 52px rgba(18,215,255,.14),
    0 0 34px rgba(18,215,255,.10) !important;
}
body.tron .hero-card h2{
  color: var(--tron-text) !important;
  text-shadow: 0 0 22px rgba(18,215,255,.22), 0 0 36px rgba(47,107,255,.16) !important;
}
body.tron .hero-sub{color: rgba(234,247,255,.84) !important}
body.tron .hero-pills .pill{
  background: rgba(4,10,22,.70) !important;
  border: 1px solid rgba(18,215,255,.22) !important;
  color: rgba(234,247,255,.92) !important;
}
body.tron .hero-pills .pill b{color: var(--tron-blue-1) !important}
body.tron .divider{
  background: linear-gradient(90deg, rgba(18,215,255,.65), rgba(47,107,255,.35), transparent) !important;
  opacity: .95;
}
body.tron .sponsor-card{
  background:
    radial-gradient(650px 220px at 10% 0%, rgba(18,215,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(6,16,36,.88), rgba(5,13,32,.88)) !important;
  border: 1px solid rgba(18,215,255,.30) !important;
  color: rgba(234,247,255,.86) !important;
}
body.tron [style*="display:flex"]{gap: 10px !important;}
body.tron hr[style]{
  background: linear-gradient(90deg, rgba(18,215,255,.65), rgba(47,107,255,.35), transparent) !important;
  opacity: .95;
}

/* =========================
   TRON Button Consistency Upgrade
   - Ensures ALL button-like elements get the shimmer / moving color sweep.
   - Unifies "tab buttons" and hero CTAs to match the tron theme.
   ========================= */

/* Treat these as "buttons" in Tron mode */
body.tron .btn,
body.tron .btn-lg,
body.tron .btn-ghost,
body.tron .neo-header nav .cta,
body.tron .abpTabBtn,
body.tron .tabBtn,
body.tron button.btn,
body.tron a.btn,
body.tron a.btn-lg,
body.tron a.btn-ghost{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Make tab buttons feel like real tron buttons */
body.tron .abpTabBtn,
body.tron .tabBtn{
  border: 1px solid rgba(18,215,255,.34) !important;
  background: linear-gradient(180deg, rgba(8,18,42,.92), rgba(5,13,32,.92)) !important;
  color: rgba(234,247,255,.92) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 10px 26px rgba(0,0,0,.36) !important;
  transition: transform .10s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* Active tab = stronger glow */
body.tron .abpTabBtn.active,
body.tron .tabBtn.active{
  border-color: rgba(18,215,255,.62) !important;
  box-shadow:
    0 0 0 1px rgba(18,215,255,.22),
    0 0 18px rgba(18,215,255,.14),
    0 14px 34px rgba(0,0,0,.45) !important;
}

/* --- Shimmer sweep (applied to every "button" type above) --- */
body.tron .btn::before,
body.tron .btn-lg::before,
body.tron .btn-ghost::before,
body.tron .neo-header nav .cta::before,
body.tron .abpTabBtn::before,
body.tron .tabBtn::before{
  content:"";
  position:absolute;
  top:-45%;
  left:-70%;
  width:70%;
  height:220%;
  background: linear-gradient(90deg,
    transparent,
    rgba(18,215,255,.28),
    rgba(47,107,255,.22),
    rgba(18,215,255,.18),
    transparent
  );
  transform: rotate(18deg);
  opacity: 0;
  pointer-events:none;
}

/* Hover / focus-visible triggers */
body.tron .btn:hover::before,
body.tron .btn-lg:hover::before,
body.tron .btn-ghost:hover::before,
body.tron .neo-header nav .cta:hover::before,
body.tron .abpTabBtn:hover::before,
body.tron .tabBtn:hover::before,
body.tron .btn:focus-visible::before,
body.tron .btn-lg:focus-visible::before,
body.tron .btn-ghost:focus-visible::before,
body.tron .neo-header nav .cta:focus-visible::before,
body.tron .abpTabBtn:focus-visible::before,
body.tron .tabBtn:focus-visible::before{
  opacity:.95;
  animation: btn-shimmer .75s ease-out 1;
}

/* Hover glow consistency */
body.tron .btn:hover,
body.tron .btn-lg:hover,
body.tron .btn-ghost:hover,
body.tron .neo-header nav .cta:hover,
body.tron .abpTabBtn:hover,
body.tron .tabBtn:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 18px rgba(18,215,255,.22));
  box-shadow:
    0 0 0 1px rgba(18,215,255,.22),
    0 14px 34px rgba(0,0,0,.50),
    0 0 22px rgba(18,215,255,.10) !important;
}

/* Active press feedback */
body.tron .btn:active,
body.tron .btn-lg:active,
body.tron .btn-ghost:active,
body.tron .neo-header nav .cta:active,
body.tron .abpTabBtn:active,
body.tron .tabBtn:active{
  transform: translateY(0px) scale(.99);
}

/* Keyboard focus ring */
body.tron .btn:focus-visible,
body.tron .btn-lg:focus-visible,
body.tron .btn-ghost:focus-visible,
body.tron .neo-header nav .cta:focus-visible,
body.tron .abpTabBtn:focus-visible,
body.tron .tabBtn:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 1px rgba(18,215,255,.28),
    0 0 0 4px rgba(18,215,255,.14),
    0 18px 50px rgba(0,0,0,.55) !important;
}

/* =========================
   Landing Page — WOW Layer
   (Append to bottom of style.css)
   ========================= */

body.tron .landing-hero{
  position:relative;
  border-radius:22px;
  margin: 10px 0 18px;
  overflow:hidden;
  padding: 26px 18px;
}
body.tron .landing-hero__bg{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(18,215,255,.24), transparent 62%),
    radial-gradient(800px 520px at 110% 20%, rgba(47,107,255,.18), transparent 65%),
    radial-gradient(900px 520px at 60% 120%, rgba(18,215,255,.10), transparent 60%);
  filter: blur(6px);
  opacity:.95;
  transform: translateZ(0);
  animation: landingBreathe 8.4s ease-in-out infinite;
}
@keyframes landingBreathe{
  0%,100%{transform: scale(1) translateY(0)}
  50%{transform: scale(1.03) translateY(-8px)}
}
body.tron .landing-hero__grid{
  position:relative;
  max-width: 1080px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items:stretch;
}
@media (max-width: 980px){
  body.tron .landing-hero__grid{grid-template-columns:1fr;}
}

body.tron .landing-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(18,215,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(234,247,255,.88);
  font-weight:800;
  letter-spacing:.4px;
}
body.tron .landing-badge__dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(18,215,255,.98);
  box-shadow: 0 0 18px rgba(18,215,255,.32);
}

body.tron .landing-title{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing:.6px;
  text-shadow:
    0 0 18px rgba(18,215,255,.22),
    0 0 42px rgba(47,107,255,.14);
}
body.tron .landing-subtitle{
  margin: 0 0 14px;
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(234,247,255,.76);
}

body.tron .landing-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 10px;
}

body.tron .btn.btn-hero{
  position:relative;
  overflow:hidden;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing:.35px;
  border: 1px solid rgba(18,215,255,.28);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(18,215,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(8,18,42,.92), rgba(5,13,32,.92));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.24),
    0 18px 52px rgba(0,0,0,.60);
  transition: transform .12s ease, box-shadow .22s ease, filter .22s ease;
}
body.tron .btn.btn-hero::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(18,215,255,.28), rgba(47,107,255,.18), transparent);
  transform: rotate(18deg);
  opacity:0;
  pointer-events:none;
}
body.tron .btn.btn-hero:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 18px rgba(18,215,255,.18));
  box-shadow:
    0 0 0 1px rgba(18,215,255,.14),
    0 22px 64px rgba(0,0,0,.66),
    0 0 26px rgba(18,215,255,.10);
}
body.tron .btn.btn-hero:hover::before{
  opacity:.95;
  animation: landingShimmer .85s ease-out 1;
}
@keyframes landingShimmer{
  from{transform: translateX(0) rotate(18deg)}
  to{transform: translateX(280%) rotate(18deg)}
}
body.tron .btn.btn-hero.ghost{
  background: rgba(0,0,0,.18);
  border-color: rgba(234,247,255,.18);
}
body.tron .btn.btn-hero.small{padding:10px 12px; border-radius:12px;}

body.tron .landing-micro{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}
body.tron .landing-micro__chip{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:baseline;
  gap:8px;
}
body.tron .landing-micro__chip b{
  color: rgba(234,247,255,.92);
  font-weight: 900;
}
body.tron .landing-micro__chip span{
  color: rgba(234,247,255,.68);
  font-size: 12px;
}

body.tron .landing-trustrow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 980px){
  body.tron .landing-trustrow{grid-template-columns:1fr;}
}
body.tron .landing-trustrow__item{
  border-radius: 16px;
  border:1px solid rgba(18,215,255,.12);
  background: rgba(0,0,0,.14);
  padding: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
}
body.tron .landing-ic{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(18,215,255,.10);
  border: 1px solid rgba(18,215,255,.16);
  box-shadow: 0 0 18px rgba(18,215,255,.10);
}
body.tron .landing-trustrow__title{font-weight: 900;}
body.tron .landing-trustrow__text{color: rgba(234,247,255,.70); font-size: 12px;}

body.tron .holo-card{
  height: 100%;
  border-radius: 20px;
  border: 1px solid rgba(18,215,255,.18);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(18,215,255,.12), transparent 58%),
    radial-gradient(900px 240px at 120% 40%, rgba(47,107,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,18,42,.92), rgba(5,13,32,.92));
  box-shadow: 0 18px 60px rgba(0,0,0,.62);
  position:relative;
  overflow:hidden;
  padding: 16px;
}
body.tron .holo-card::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(90deg, transparent, rgba(18,215,255,.10), transparent);
  transform: rotate(14deg);
  opacity:.55;
  animation: holoSweep 6.8s ease-in-out infinite;
}
@keyframes holoSweep{
  0%,100%{transform: translateX(-14%) rotate(14deg)}
  50%{transform: translateX(14%) rotate(14deg)}
}
body.tron .holo-card > *{position:relative; z-index:1}

body.tron .holo-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}
body.tron .holo-card__tag{
  font-weight: 900;
  letter-spacing:.5px;
  font-size: 12px;
  color: rgba(234,247,255,.78);
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.18);
}
body.tron .holo-card__status{
  color: rgba(234,247,255,.86);
  font-weight: 800;
  font-size: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}
body.tron .pulse-dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(18,215,255,.92);
  box-shadow: 0 0 14px rgba(18,215,255,.32);
  animation: pulseDot 1.2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{transform:scale(1); opacity:.85}50%{transform:scale(1.5); opacity:1}}

body.tron .holo-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 980px){
  body.tron .holo-kpis{grid-template-columns:1fr;}
}
body.tron .holo-kpi{
  border-radius: 16px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
body.tron .holo-kpi__label{color: rgba(234,247,255,.72); font-size: 12px; font-weight: 800;}
body.tron .holo-kpi__value{font-size: 22px; font-weight: 1000; letter-spacing:.3px; margin-top:4px;}
body.tron .holo-kpi__hint{color: rgba(234,247,255,.60); font-size: 12px;}

body.tron .holo-graph{
  margin-top: 12px;
  border-radius: 16px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
body.tron .holo-graph__title{font-weight: 900; margin-bottom: 8px;}
body.tron .holo-bars{
  height: 92px;
  display:flex;
  gap: 8px;
  align-items:flex-end;
}
body.tron .holo-bars span{
  flex: 1;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(18,215,255,.92), rgba(47,107,255,.25));
  box-shadow: 0 0 18px rgba(18,215,255,.10);
}
body.tron .holo-graph__foot{margin-top: 8px; color: rgba(234,247,255,.68); font-size: 12px;}

body.tron .holo-card__bottom{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
body.tron .holo-note{color: rgba(234,247,255,.72); font-size: 12px;}

body.tron .landing-section{
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: 0 16px;
}
body.tron .landing-section__head{
  margin: 10px 0 12px;
}
body.tron .landing-section__head h2{
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing:.3px;
}
body.tron .landing-section__head p{
  margin: 0;
  color: rgba(234,247,255,.72);
}

body.tron .landing-card{
  padding: 18px;
}
body.tron .landing-card--tight{padding: 18px;}

body.tron .landing-how .landing-step{
  font-weight: 1000;
  font-size: 14px;
  letter-spacing: .8px;
  color: rgba(234,247,255,.72);
  margin-bottom: 8px;
}

body.tron .landing-pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}
body.tron .landing-pill{
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.14);
  color: rgba(234,247,255,.74);
}

body.tron .landing-split{
  max-width: 1080px;
  margin: 0 auto 18px;
  padding: 0 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  body.tron .landing-split{grid-template-columns:1fr;}
}

body.tron .landing-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin: 12px 0 14px;
}
body.tron .landing-list__item{
  display:flex;
  gap: 10px;
  align-items:center;
  border-radius: 16px;
  padding: 12px;
  border:1px solid rgba(18,215,255,.12);
  background: rgba(0,0,0,.14);
}
body.tron .landing-list__item b{font-weight: 1000;}

body.tron .landing-faq{
  padding: 0;
  overflow:hidden;
}
body.tron .landing-faq .faq-q{
  width:100%;
  text-align:left;
  border:0;
  background: transparent;
  color: rgba(234,247,255,.92);
  padding: 16px 18px;
  font-weight: 1000;
  cursor:pointer;
  border-bottom: 1px solid rgba(18,215,255,.12);
}
body.tron .landing-faq .faq-q:hover{
  background: rgba(18,215,255,.06);
}
body.tron .landing-faq .faq-q.open{
  background: rgba(18,215,255,.08);
}
body.tron .landing-faq .faq-a{
  max-height: 0;
  overflow:hidden;
  opacity: 0;
  transition: max-height .28s ease, opacity .20s ease;
  padding: 0 18px;
  color: rgba(234,247,255,.72);
  border-bottom: 1px solid rgba(18,215,255,.12);
}
body.tron .landing-faq .faq-a:last-child{border-bottom:0}
body.tron .landing-faq .faq-a{
  padding-bottom: 14px;
}

body.tron .landing-final{
  max-width: 1080px;
  margin: 0 auto 26px;
  padding: 0 16px;
}
body.tron .landing-final__inner{
  text-align:center;
  padding: 22px;
}
body.tron .landing-final__inner h2{
  margin: 0 0 8px;
  font-size: 28px;
}
/* FIX: keep KPI labels from wrapping (aligns "5 tiers" with the others) */
body.tron .holo-kpi__label{
  white-space: nowrap;
}

/* =========================
   Landing Page — Brand WOW + cleaner flow
   ========================= */

/* Center CTA helper (replaces inline style) */
body.tron .landing-cta--center{
  justify-content: center;
}

/* Calm the top stack slightly (less chaotic) */
body.tron .landing-hero__left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 12px;
}

/* Bigger, poppier logo wordmark + subtle red edge glow */
body.tron .landing-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 2px;
}

body.tron .landing-brand__name{
  position: relative;
  display:inline-block;
  font-weight: 1100;
  letter-spacing: .5px;
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 1;

  /* neon gradient */
  background: linear-gradient(90deg,
    rgba(18,215,255,.98),
    rgba(47,107,255,.96),
    rgba(234,247,255,.96)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* “border/glow” feel (includes a *slight* red edge) */
  -webkit-text-stroke: 1px rgba(255, 70, 70, .18);
  text-shadow:
    0 0 10px rgba(18,215,255,.22),
    0 0 22px rgba(47,107,255,.14),
    0 0 16px rgba(255, 70, 70, .08);
}

/* Add a thin neon frame behind the logo text (very subtle) */
body.tron .landing-brand__name::after{
  content:"";
  position:absolute;
  inset: -8px -10px -9px -10px;
  border-radius: 14px;
  border: 1px solid rgba(18,215,255,.16);
  box-shadow:
    0 0 18px rgba(18,215,255,.10),
    0 0 18px rgba(255,70,70,.06);
  background: rgba(0,0,0,.08);
  z-index:-1;
  pointer-events:none;
}

body.tron .landing-brand__tag{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .65px;
  color: rgba(234,247,255,.72);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  box-shadow: 0 0 18px rgba(18,215,255,.06);
}

@media (max-width: 520px){
  body.tron .landing-brand{flex-wrap:wrap; gap:8px;}
  body.tron .landing-brand__tag{font-size: 11px;}
  body.tron .landing-brand__name{font-size: clamp(34px, 8.2vw, 48px);}
}

/* ==========================================================
   LANDING PAGE (index.php) — Proper CSS (NO inline)
   Restores the “cool” formatting + reduces chaos
   ========================================================== */

body.tron .landing-hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  padding:26px 18px;
  border:1px solid rgba(18,215,255,.16);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(18,215,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,18,42,.52), rgba(5,13,32,.52));
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
}

body.tron .landing-hero__bg{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(1100px 520px at 18% 10%, rgba(18,215,255,.18), transparent 62%),
    radial-gradient(900px 520px at 110% 10%, rgba(47,107,255,.12), transparent 65%);
  filter: blur(10px);
  opacity:.9;
  animation: landingBreathe 14s ease-in-out infinite;
}
@keyframes landingBreathe{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.02) translateY(-10px)}
}

body.tron .landing-hero__grid{
  position:relative;
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  body.tron .landing-hero__grid{grid-template-columns:1fr;}
}

/* --- Brand (stacked) --- */
body.tron .landing-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 6px;
}
body.tron .landing-brand__name{
  font-weight:1000;
  letter-spacing:.4px;
  font-size: clamp(30px, 3.0vw, 44px);
  line-height:1.0;

  background: linear-gradient(90deg,
    rgba(18,215,255,.98),
    rgba(47,107,255,.96),
    rgba(234,247,255,.96)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* subtle glow “border” + tiny red hint */
  -webkit-text-stroke: 1px rgba(255,70,70,.14);
  text-shadow:
    0 0 12px rgba(18,215,255,.22),
    0 0 28px rgba(47,107,255,.14),
    0 0 14px rgba(255,70,70,.07);
}

body.tron .landing-brand__tag{
  display:inline-flex;
  width:fit-content;
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  color: rgba(234,247,255,.72);
  padding: 7px 10px;
  border-radius:999px;
  border:1px solid rgba(18,215,255,.16);
  background: rgba(0,0,0,.14);
}

/* --- Headline: smaller & cleaner --- */
body.tron .landing-title{
  margin: 6px 0 8px;
  font-size: clamp(28px, 3.2vw, 44px); /* reduced from huge */
  line-height:1.06;
  letter-spacing:.35px;
  text-shadow:
    0 0 14px rgba(18,215,255,.18),
    0 0 34px rgba(47,107,255,.10);
}

body.tron .landing-subtitle{
  margin:0 0 10px;
  max-width: 60ch;
  color: rgba(234,247,255,.74);
}

/* badge */
body.tron .landing-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(18,215,255,.18);
  background: rgba(0,0,0,.14);
  color: rgba(234,247,255,.88);
  font-weight:900;
  letter-spacing:.25px;
}
body.tron .landing-badge__dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(18,215,255,.95);
  box-shadow: 0 0 16px rgba(18,215,255,.28);
}

/* CTA alignment helper */
body.tron .landing-cta--center{ justify-content:center; }

/* micro chips */
body.tron .landing-micro{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
body.tron .landing-micro__chip{
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
}
body.tron .landing-micro__chip b{font-weight:900;}
body.tron .landing-micro__chip span{color: rgba(234,247,255,.62); font-size:12px;}

/* --- Card system (restores “real card” feel) --- */
body.tron .cardx{
  border-radius:20px;
  border:1px solid rgba(18,215,255,.16);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(18,215,255,.10), transparent 62%),
    radial-gradient(900px 260px at 120% 30%, rgba(47,107,255,.08), transparent 64%),
    linear-gradient(180deg, rgba(8,18,42,.72), rgba(5,13,32,.62));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 22px 84px rgba(0,0,0,.55);
  overflow:hidden;
}
body.tron .cardx-hover{
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
body.tron .cardx-hover:hover{
  transform: translateY(-2px);
  border-color: rgba(18,215,255,.22);
  box-shadow:
    0 0 0 1px rgba(18,215,255,.12),
    0 32px 110px rgba(0,0,0,.62),
    0 0 22px rgba(18,215,255,.08);
}

/* trust minis */
body.tron .landing-trustrow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
@media (max-width: 980px){
  body.tron .landing-trustrow{grid-template-columns:1fr;}
}
body.tron .landing-mini{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
}
body.tron .landing-ic{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(18,215,255,.08);
  border:1px solid rgba(18,215,255,.14);
}
body.tron .landing-trustrow__title{font-weight:900;}
body.tron .landing-trustrow__text{color: rgba(234,247,255,.66); font-size:12px;}

/* --- WHAT TO EXPECT card: restore compact styling --- */
body.tron .holo-card{ padding:16px; }
body.tron .holo-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
body.tron .holo-card__tag{
  font-weight:900;
  font-size:12px;
  letter-spacing:.6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(18,215,255,.16);
  background: rgba(0,0,0,.14);
}
body.tron .holo-card__status{
  font-weight:800;
  font-size:12px;
  color: rgba(234,247,255,.78);
  display:flex;
  align-items:center;
  gap:8px;
}
body.tron .pulse-dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(18,215,255,.92);
  box-shadow: 0 0 12px rgba(18,215,255,.26);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{transform:scale(1); opacity:.82}
  50%{transform:scale(1.35); opacity:1}
}

body.tron .holo-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 980px){
  body.tron .holo-kpis{grid-template-columns:1fr;}
}
body.tron .holo-kpi{
  border-radius:16px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  padding:12px;
}
body.tron .holo-kpi__label{ white-space:nowrap; font-weight:900; font-size:12px; color: rgba(234,247,255,.72); }
body.tron .holo-kpi__value{ font-size:22px; font-weight:1000; margin-top:4px; }
body.tron .holo-kpi__hint{ color: rgba(234,247,255,.60); font-size:12px; }

/* advertiser section stays compact */
body.tron .holo-adv{
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  padding:12px;
}
body.tron .holo-adv__title{ font-weight:1000; }
body.tron .holo-adv__sub{ color: rgba(234,247,255,.66); font-size:12px; margin-top:4px; }
body.tron .holo-adv__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
body.tron .holo-chip{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(234,247,255,.70);
  font-size:12px;
}
body.tron .holo-adv__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media (max-width: 520px){
  body.tron .holo-adv__grid{grid-template-columns:1fr;}
}
body.tron .holo-metric{
  border-radius:14px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  padding:12px;
}
body.tron .holo-metric__k{ font-size:12px; font-weight:900; color: rgba(234,247,255,.62); }
body.tron .holo-metric__v{ margin-top:6px; font-weight:1000; font-size:18px; }
body.tron .holo-metric__h{ margin-top:4px; font-size:12px; color: rgba(234,247,255,.56); }

body.tron .holo-card__bottom{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
body.tron .holo-note{ color: rgba(234,247,255,.68); font-size:12px; }

/* landing sections */
body.tron .landing-section,
body.tron .landing-split,
body.tron .landing-final{
  max-width:1140px;
  margin: 0 auto 18px;
  padding: 0 16px;
}
body.tron .landing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){
  body.tron .landing-grid{grid-template-columns:1fr;}
}
body.tron .landing-card{ padding:18px; }
body.tron .landing-step{ font-weight:1000; font-size:12px; letter-spacing:.9px; color: rgba(234,247,255,.66); margin-bottom:8px; }
body.tron .landing-pillrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
body.tron .landing-pill{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(234,247,255,.68);
  font-size:12px;
}
body.tron .landing-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 980px){
  body.tron .landing-split{grid-template-columns:1fr;}
}
body.tron .landing-list{ display:flex; flex-direction:column; gap:10px; margin: 12px 0 14px; }
body.tron .landing-list__item{
  display:flex;
  gap:10px;
  align-items:center;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
}
body.tron .landing-final__inner{ padding:22px; text-align:center; }

/* ==========================================================
   LOGO WOW FIX (Landing) — bigger + CRISPER (no “pixel/stroke” look)
   ========================================================== */

/* Make the brand block consume more of the left column (fills that “empty space”) */
body.tron .landing-brand{
  width: 100%;
  max-width: 760px;          /* a touch wider */
  margin-bottom: 10px;
}

/* Bigger logo + keep it on one line so it stretches visually */
body.tron .landing-brand__name{
  display: inline-block;
  white-space: nowrap;

  /* slightly bigger (what you asked) */
  font-size: clamp(60px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: .2px;

  /* keep the HD neon look (less “pastel”) */
  background: linear-gradient(90deg,
    rgba(18,215,255,.98) 0%,
    rgba(47,107,255,.98) 55%,
    rgba(234,247,255,.96) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* IMPORTANT: remove the stroke that causes the “low-res” edge */
  -webkit-text-stroke: 0 transparent;

  /* crisp edge + controlled glow (tiny red accent only) */
  text-shadow:
    /* crisp dark edge for definition (makes it look “HD”) */
    0 1px 0 rgba(0,0,0,.45),
    0 0 0.6px rgba(0,0,0,.55),

    /* neon blue depth */
    0 0 10px rgba(18,215,255,.22),
    0 0 24px rgba(47,107,255,.16),

    /* VERY slight red edge glow (subtle, not loud) */
    0 0 10px rgba(255,70,70,.10);

  /* improve rasterization */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Keep the pill under the logo, but slightly larger (you said it’s part of the logo) */
body.tron .landing-brand__tag{
  margin-top: 10px;
  width: fit-content;

  font-size: 14px;            /* slightly bigger */
  font-weight: 950;
  letter-spacing: 1.05px;
  text-transform: uppercase;

  border: 1px solid rgba(18,215,255,.22);
  background:
    radial-gradient(700px 180px at 20% 0%, rgba(18,215,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(8,18,42,.82), rgba(5,13,32,.82));

  color: rgba(234,247,255,.88);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 0 14px rgba(18,215,255,.12),
    0 0 14px rgba(255,70,70,.06); /* tiny red accent */
}

/* On smaller screens: prevent overflow */
@media (max-width: 520px){
  body.tron .landing-brand__name{
    font-size: clamp(44px, 10vw, 66px);
    white-space: normal; /* allow wrap on tiny screens */
  }
  body.tron .landing-brand__tag{
    font-size: 12.5px;
    letter-spacing: .9px;
    padding: 9px 12px;
  }
}

/* ==========================================================
   Logo Tagline Match — "NEXT-GEN EARNINGS + GAMING"
   ========================================================== */

body.tron .landing-brand__tag{
  /* lock under logo + match vibe */
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 8px;
  padding: 10px 14px;

  font-weight: 950;
  letter-spacing: 1.05px;
  text-transform: uppercase;

  /* same “logo family” look */
  border: 1px solid rgba(255, 65, 65, .22);            /* thin red edge */
  background:
    radial-gradient(700px 180px at 20% 0%, rgba(18,215,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(8,18,42,.82), rgba(5,13,32,.82));

  color: rgba(234,247,255,.88);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 0 14px rgba(18,215,255,.12),
    0 0 18px rgba(255, 65, 65, .08);                   /* subtle red glow */
}

/* optional: make it slightly larger so it reads like a logo component */
body.tron .landing-brand__tag{
  font-size: 13px;
}

/* keep it clean on small screens */
@media (max-width: 520px){
  body.tron .landing-brand__tag{
    font-size: 12px;
    letter-spacing: .85px;
    padding: 9px 12px;
  }
}

/* ==========================================================
   FINAL LOGO OVERRIDE (HD / bold / clean) — fixes “muddy/embossed” look
   Put this at the VERY BOTTOM of the CSS file.
   ========================================================== */

body.tron .landing-brand{
  width:100%;
  max-width: 820px;
  margin-bottom: 12px;
}

/* Kill any “frame plate” that earlier rules added behind the logo text */
body.tron .landing-brand__name::after,
body.tron .landing-brand__name::before{
  content: none !important;
  display: none !important;
}

/* CRISP HD neon logo (no low-res stroke, no dark emboss) */
body.tron .landing-brand__name{
  display:inline-block !important;
  white-space: nowrap;
  font-weight: 1000 !important;
  letter-spacing: .15px !important;
  line-height: 1 !important;

  /* fills the space without turning into a billboard */
  font-size: clamp(56px, 5.4vw, 88px) !important;

  /* strong “tech” cyan→blue gradient (less pastel) */
  background: linear-gradient(90deg,
    rgba(18,215,255,1) 0%,
    rgba(47,107,255,1) 58%,
    rgba(234,247,255,.95) 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;

  /* IMPORTANT: remove stroke (it’s what was making it look “380p”) */
  -webkit-text-stroke: 0 transparent !important;

  /* clean neon glow + TINY red edge accent (barely) */
  text-shadow:
    0 0 10px rgba(18,215,255,.26),
    0 0 24px rgba(47,107,255,.18),
    0 0 42px rgba(18,215,255,.10),
    0 0 10px rgba(255,70,70,.06) !important;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Tagline: ONLY “a little bigger” (no style change), and stays part of the logo */
body.tron .landing-brand__tag{
  font-size: 14px !important;        /* just bigger */
  padding: 10px 14px !important;
  letter-spacing: 1.05px !important;
  font-weight: 900 !important;

  /* keep the same look as before (no forced red border) */
  border-color: rgba(18,215,255,.22) !important;
  box-shadow:
    0 0 14px rgba(18,215,255,.10),
    0 0 12px rgba(255,70,70,.04) !important; /* tiny red hint */
}

/* mobile safety */
@media (max-width: 520px){
  body.tron .landing-brand__name{
    font-size: clamp(44px, 10vw, 66px) !important;
    white-space: normal !important;
  }
}

/* ==========================================================
   Logo tweak: thin black border + slightly bigger
   ========================================================== */

/* Slightly bigger */
body.tron .landing-brand__name{
  font-size: clamp(62px, 5.9vw, 96px) !important;
}

/* Thin black border (crisp) */
body.tron .landing-brand__name{
  -webkit-text-stroke: 1px rgba(0,0,0,.70) !important;
  paint-order: stroke fill; /* helps keep the stroke crisp when supported */
}

/* Keep glow after the stroke so it still pops */
body.tron .landing-brand__name{
  text-shadow:
    0 0 10px rgba(18,215,255,.26),
    0 0 24px rgba(47,107,255,.18),
    0 0 42px rgba(18,215,255,.10),
    0 0 10px rgba(255,70,70,.06) !important;
}

/* ==========================================================
   Logo tweak: slightly thicker black border
   ========================================================== */

body.tron .landing-brand__name{
  -webkit-text-stroke: 2.9px rgba(0,0,0,.78) !important;
  paint-order: stroke fill;
}

/* ==========================================================
   Tagline pill: dark red glow border
   ========================================================== */

body.tron .landing-brand__tag{
  border-color: rgba(255, 70, 70, .30) !important; /* red edge */
  box-shadow:
    0 0 0 1px rgba(255, 70, 70, .14),            /* thin red ring */
    0 0 14px rgba(120, 0, 0, .22),               /* dark red glow */
    0 0 26px rgba(120, 0, 0, .14),               /* wider dark glow */
    0 0 14px rgba(18,215,255,.08) !important;    /* keep slight tron depth */
}

/* ==========================================================
   LOGO INTEGRATION FIX — make it feel native to the UI
   ========================================================== */

/* Step 1: calm the logo down and match system hierarchy */
body.tron .landing-brand__name{
  font-size: clamp(56px, 5.2vw, 82px) !important; /* slightly smaller, more natural */
  letter-spacing: .1px !important;

  /* Same gradient family as cards (less contrast spike) */
  background: linear-gradient(90deg,
    rgba(120,200,255,.95) 0%,
    rgba(70,130,220,.95) 55%,
    rgba(210,235,255,.92) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

  /* Step 2: thinner stroke = no “outlined sticker” look */
  -webkit-text-stroke: 1px rgba(0,0,0,.55) !important;

  /* Step 3: remove billboard glow, keep system glow */
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),             /* crisp edge */
    0 0 12px rgba(18,215,255,.18),       /* subtle Tron glow */
    0 0 18px rgba(47,107,255,.10) !important;

  /* Rendering quality */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Step 4: visually anchor the logo to the hero panel */
body.tron .landing-brand{
  padding: 14px 18px;
  border-radius: 18px;

  background:
    radial-gradient(600px 160px at 20% 0%, rgba(18,215,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(8,18,42,.35), rgba(5,13,32,.35));

  border: 1px solid rgba(18,215,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 40px rgba(18,215,255,.06);
}

/* Step 5: tagline becomes a supporting element, not a competing badge */
body.tron .landing-brand__tag{
  margin-top: 8px;
  font-size: 13px !important;
  letter-spacing: .9px !important;

  border-color: rgba(18,215,255,.18) !important;
  box-shadow:
    0 0 10px rgba(18,215,255,.10),
    0 0 10px rgba(120,0,0,.08) !important; /* restrained red */
}



/* =======================================================================
   HOMEPAGE (index.php) — REFRESH PASS (keeps other pages intact)
   NOTE: Does NOT alter the logo text styling (.landing-brand__name/.landing-brand__tag)
   ======================================================================= */

body.tron .landing-hero{
  position: relative;
  max-width: 1180px;
  margin: 22px auto 18px;
  padding: 26px 18px;
  border-radius: 26px;
  border: 1px solid rgba(18,215,255,.18);
  background:
    radial-gradient(1200px 520px at 18% -10%, rgba(18,215,255,.18), transparent 60%),
    radial-gradient(900px 520px at 110% 5%, rgba(47,107,255,.12), transparent 65%),
    linear-gradient(180deg, rgba(6,14,34,.88), rgba(5,12,30,.82));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 34px 140px rgba(0,0,0,.75),
    0 0 44px rgba(18,215,255,.10);
  overflow: hidden;
}

/* subtle animated energy (very slow, not chaotic) */
body.tron .landing-hero__bg{
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:
    conic-gradient(from 180deg at 55% 45%,
      rgba(18,215,255,.00) 0%,
      rgba(18,215,255,.10) 18%,
      rgba(47,107,255,.08) 32%,
      rgba(18,215,255,.00) 52%,
      rgba(18,215,255,.10) 70%,
      rgba(47,107,255,.07) 84%,
      rgba(18,215,255,.00) 100%);
  filter: blur(18px);
  opacity: .60;
  animation: homeAura 18s linear infinite;
}
@keyframes homeAura{
  0%{ transform: rotate(0deg) scale(1.05); }
  100%{ transform: rotate(360deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  body.tron .landing-hero__bg{ animation:none !important; }
}

body.tron .landing-hero__grid{
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  body.tron .landing-hero__grid{ grid-template-columns: 1fr; }
}

/* Keep logo as-is, but improve its placement/flow */
body.tron .landing-brand{
  margin-bottom: 14px;
}
body.tron .landing-hero__left{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Headline: punchy but not billboard */
body.tron .landing-title{
  margin: 4px 0 6px;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: .2px;
  text-shadow:
    0 0 16px rgba(18,215,255,.16),
    0 0 42px rgba(47,107,255,.10);
}
body.tron .landing-subtitle{
  margin: 0 0 8px;
  max-width: 62ch;
  color: rgba(234,247,255,.74);
}

/* Badge: more “premium chip” */
body.tron .landing-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18,215,255,.18);
  background: rgba(0,0,0,.16);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 20px rgba(18,215,255,.07);
}
body.tron .landing-badge__dot{
  width:10px; height:10px; border-radius: 999px;
  background: rgba(18,215,255,.95);
  box-shadow: 0 0 14px rgba(18,215,255,.30);
}

/* CTA: consistent “energy sweep” */
body.tron .landing-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
body.tron .btn.btn-hero{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(18,215,255,.24);
  background:
    radial-gradient(800px 180px at 20% 0%, rgba(18,215,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,18,42,.86), rgba(5,13,32,.86));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 18px 60px rgba(0,0,0,.60),
    0 0 18px rgba(18,215,255,.08);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  font-weight: 900;
  letter-spacing: .25px;
}
body.tron .btn.btn-hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, transparent 0%, rgba(18,215,255,.22) 45%, rgba(47,107,255,.16) 55%, transparent 100%);
  transform: rotate(18deg) translateX(-30%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events:none;
}
body.tron .btn.btn-hero:hover{
  transform: translateY(-1px);
  border-color: rgba(18,215,255,.34);
  box-shadow:
    0 0 0 1px rgba(18,215,255,.14),
    0 24px 80px rgba(0,0,0,.70),
    0 0 28px rgba(18,215,255,.10);
}
body.tron .btn.btn-hero:hover::after{
  opacity: 1;
  animation: btnSweep 1.05s ease-out 1;
}
@keyframes btnSweep{
  from{ transform: rotate(18deg) translateX(-35%); }
  to{ transform: rotate(18deg) translateX(55%); }
}
body.tron .btn.btn-hero.ghost{
  background: rgba(0,0,0,.12);
}

/* Micro chips: less flat, more “embedded” */
body.tron .landing-micro{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
body.tron .landing-micro__chip{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
body.tron .landing-micro__chip span{
  color: rgba(234,247,255,.62);
  font-size: 12px;
}

/* Trust row cards: make them feel like real cards */
body.tron .landing-trustrow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){
  body.tron .landing-trustrow{ grid-template-columns: 1fr; }
}

/* Only affect homepage cardx usage by scoping under .landing-hero */
body.tron .landing-hero .cardx{
  border-radius: 18px;
  border: 1px solid rgba(18,215,255,.16);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(18,215,255,.10), transparent 62%),
    radial-gradient(900px 260px at 120% 25%, rgba(47,107,255,.08), transparent 64%),
    linear-gradient(180deg, rgba(7,16,38,.86), rgba(5,12,30,.74));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 24px 92px rgba(0,0,0,.62);
  position: relative;
  overflow:hidden;
}
body.tron .landing-hero .cardx::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events:none;
  opacity:.65;
  background: radial-gradient(600px 140px at 20% 0%, rgba(18,215,255,.14), transparent 60%);
}
body.tron .landing-hero .cardx-hover{
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}
body.tron .landing-hero .cardx-hover:hover{
  transform: translateY(-2px);
  border-color: rgba(18,215,255,.26);
  box-shadow:
    0 0 0 1px rgba(18,215,255,.12),
    0 34px 120px rgba(0,0,0,.72),
    0 0 28px rgba(18,215,255,.10);
}

/* WHAT TO EXPECT panel: bring back “wow” without changing structure */
body.tron .holo-card{
  padding: 16px;
}
body.tron .holo-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
body.tron .holo-card__tag{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,215,255,.16);
  background: rgba(0,0,0,.14);
  font-weight: 950;
  letter-spacing: .65px;
  font-size: 12px;
}
body.tron .holo-card__status{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(234,247,255,.78);
  font-weight: 850;
  font-size: 12px;
}
body.tron .pulse-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(18,215,255,.95);
  box-shadow: 0 0 14px rgba(18,215,255,.30);
  animation: pulseDot2 1.7s ease-in-out infinite;
}
@keyframes pulseDot2{
  0%,100%{transform:scale(1); opacity:.82}
  50%{transform:scale(1.4); opacity:1}
}
@media (prefers-reduced-motion: reduce){
  body.tron .pulse-dot{ animation:none !important; }
}

body.tron .holo-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 980px){
  body.tron .holo-kpis{ grid-template-columns: 1fr; }
}
body.tron .holo-kpi{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}
body.tron .holo-kpi__label{ font-weight: 900; font-size: 12px; color: rgba(234,247,255,.70); white-space: nowrap; }
body.tron .holo-kpi__value{ font-weight: 1000; font-size: 22px; margin-top: 4px; }
body.tron .holo-kpi__hint{ font-size: 12px; color: rgba(234,247,255,.60); margin-top: 2px; }

/* Advertiser section: make it read like a module */
body.tron .holo-adv{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}
body.tron .holo-adv__title{ font-weight: 1000; margin-bottom: 4px; }
body.tron .holo-adv__sub{ color: rgba(234,247,255,.66); font-size: 12px; }
body.tron .holo-adv__chips{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
body.tron .holo-chip{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(234,247,255,.70);
  font-size: 12px;
}
body.tron .holo-adv__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 520px){
  body.tron .holo-adv__grid{ grid-template-columns: 1fr; }
}
body.tron .holo-metric{
  border-radius: 14px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}
body.tron .holo-metric__k{ font-size: 12px; font-weight: 900; color: rgba(234,247,255,.62); }
body.tron .holo-metric__v{ margin-top: 6px; font-weight: 1000; font-size: 18px; }
body.tron .holo-metric__h{ margin-top: 4px; font-size: 12px; color: rgba(234,247,255,.56); }

body.tron .holo-card__bottom{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
body.tron .holo-note{ color: rgba(234,247,255,.68); font-size: 12px; }

/* Below-the-fold sections: keep clean, add subtle rhythm */
body.tron .landing-section,
body.tron .landing-split,
body.tron .landing-final{
  max-width: 1120px;
  margin: 0 auto 18px;
  padding: 0 16px;
}
body.tron .landing-section__head h2,
body.tron .landing-final h2{
  text-shadow: 0 0 14px rgba(18,215,255,.10);
}
body.tron .landing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  body.tron .landing-grid{ grid-template-columns: 1fr; }
}
body.tron .landing-card{ padding: 18px; }
body.tron .landing-step{ font-weight: 1000; font-size: 12px; letter-spacing: .9px; color: rgba(234,247,255,.66); margin-bottom: 8px; }
body.tron .landing-pillrow{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
body.tron .landing-pill{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(234,247,255,.68);
  font-size: 12px;
}
body.tron .landing-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  body.tron .landing-split{ grid-template-columns: 1fr; }
}
body.tron .landing-list__item{
  display:flex;
  gap: 10px;
  align-items:center;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}
body.tron .landing-final__inner{
  padding: 22px;
  text-align: center;
}
body.tron .landing-cta--center{ justify-content:center; }

/* ==========================================================
   HOMEPAGE LOGO FIX (modern / vibrant / crisp)
   Scoped: ONLY inside the homepage hero
   ========================================================== */

/* remove any old “engraved/bevel” overlays */
body.tron .landing-hero .landing-brand__name::before,
body.tron .landing-hero .landing-brand__name::after{
  content: none !important;
  display: none !important;
}

/* Modern neon logo (no 1990 bevel) */
body.tron .landing-hero .landing-brand__name{
  display:inline-block !important;
  white-space: nowrap;
  font-weight: 1000 !important;
  letter-spacing: .08px !important;
  line-height: 1 !important;

  /* BIG, but not billboard */
  font-size: clamp(56px, 5.2vw, 88px) !important;

  /* crisp tron gradient */
  background: linear-gradient(90deg,
    rgba(40, 220, 255, 1) 0%,
    rgba(65, 140, 255, 1) 55%,
    rgba(234, 247, 255, .96) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

  /* thin dark edge for readability (NOT bevel) */
  -webkit-text-stroke: 1.2px rgba(0,0,0,.72) !important;
  paint-order: stroke fill;

  /* modern glow (tight + controlled) */
  text-shadow:
    0 0 10px rgba(40,220,255,.22),
    0 0 22px rgba(65,140,255,.16),
    0 0 40px rgba(40,220,255,.08) !important;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Make the logo block feel like a premium “glass header” */
body.tron .landing-hero .landing-brand{
  padding: 18px 22px !important;
  border-radius: 22px !important;

  border: 1px solid rgba(18,215,255,.14) !important;
  background:
    radial-gradient(900px 220px at 18% 0%, rgba(18,215,255,.10), transparent 60%),
    radial-gradient(800px 220px at 110% 10%, rgba(47,107,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(7,16,38,.68), rgba(5,12,30,.56)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 20px 80px rgba(0,0,0,.55),
    0 0 34px rgba(18,215,255,.08) !important;
}

/* Tagline stays part of logo, but cleaner + sharper */
body.tron .landing-hero .landing-brand__tag{
  margin-top: 12px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 1.1px !important;

  border: 1px solid rgba(120,0,0,.22) !important;
  box-shadow:
    0 0 12px rgba(120,0,0,.18),
    0 0 12px rgba(18,215,255,.08) !important;
}

/* mobile safety */
@media (max-width: 520px){
  body.tron .landing-hero .landing-brand__name{
    font-size: clamp(44px, 10vw, 66px) !important;
    white-space: normal !important;
  }
}

/* KPI unit text (small, inline, aligned) */
body.tron .holo-kpi__unit{
  font-size: 12px;
  font-weight: 800;
  margin-left: 6px;
  letter-spacing: .4px;
  color: rgba(234,247,255,.70);
}

/* =========================================================
   Admin internal message popup — FORCE true centered modal
   (global, used on user pages too)
   ========================================================= */
.admin-msg-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  /* true modal backdrop */
  background: rgba(0,0,0,.70) !important;

  /* true center */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* don’t pin to top */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  /* spacing on small screens */
  padding: 20px !important;
}

.admin-msg-box{
  width: min(560px, calc(100% - 40px)) !important;
  max-width: 560px !important;

  background: #111827 !important;
  color: #e5e7eb !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.75) !important;

  padding: 18px 18px 14px !important;
}

.admin-msg-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.admin-msg-title{
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.admin-msg-body{
  font-size: 14px !important;
  opacity: .92 !important;
  white-space: pre-line !important;
}




/* =========================
   Advertiser Hub (no inline CSS)
   ========================= */

/* Tabs */
.adv-tabs{gap:10px; margin:0 0 14px;}
.adv-tabs a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(18,215,255,.22);
  background:rgba(10,14,24,.65);
  color:rgba(234,247,255,.92);
}
.adv-tabs a:hover{background:rgba(18,215,255,.08); text-decoration:none}
.adv-tabs a.active{
  background:rgba(18,215,255,.12);
  border-color:rgba(18,215,255,.35);
  box-shadow:0 0 0 1px rgba(18,215,255,.18), 0 10px 26px rgba(0,0,0,.35);
}

/* Alerts */
.adv-alert{padding:10px 12px; border-radius:12px; border:1px solid rgba(18,215,255,.18); background:rgba(10,14,24,.65); margin:10px 0}
.adv-alert--ok{border-color:rgba(126,255,190,.38); background:rgba(10,28,20,.55)}
.adv-alert--error{border-color:rgba(255,140,140,.38); background:rgba(28,10,10,.55)}

/* Debug (only shown on ?debug=1) */
.adv-debug{padding:10px 12px; border-radius:12px; border:1px solid rgba(18,215,255,.18); background:rgba(10,14,24,.65); margin:10px 0}
.adv-debug--ok{border-color:rgba(126,255,190,.38); background:rgba(10,28,20,.55)}
.adv-debug--php,.adv-debug--fatal{border-color:rgba(255,140,140,.38); background:rgba(28,10,10,.55)}

/* Buttons */
.btn-xs{padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.1}
.btn-danger{border-color:rgba(255,140,140,.35); background:rgba(40,12,12,.55)}
.btn-danger:hover{background:rgba(255,140,140,.12)}

/* Balance row */
.adv-balance-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(18,215,255,.18);
  background:rgba(10,14,24,.55);
  margin:10px 0 16px;
}
.adv-balance-amt{font-weight:800; font-size:18px; letter-spacing:.2px}
.adv-balance-hint{margin-left:auto}

/* Table wrapper for horizontal overflow */
.adv-table-wrap{width:100%; overflow:auto; border-radius:14px; border:1px solid rgba(18,215,255,.12); background:rgba(5,8,18,.35)}
.adv-table{min-width:980px}
.adv-table th{position:sticky; top:0; background:rgba(3,6,14,.85); backdrop-filter:blur(10px)}
.adv-title{max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Status pill */
.adv-status{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid rgba(18,215,255,.22); background:rgba(18,215,255,.06); font-size:12px}
.adv-status--active{border-color:rgba(126,255,190,.28); background:rgba(126,255,190,.08)}
.adv-status--paused{border-color:rgba(255,219,140,.28); background:rgba(255,219,140,.08)}
.adv-status--pending{border-color:rgba(18,215,255,.28); background:rgba(18,215,255,.08)}
.adv-status--ended,.adv-status--rejected{border-color:rgba(255,140,140,.28); background:rgba(255,140,140,.06)}

/* Actions layout */
.adv-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.adv-inline{display:inline-flex; align-items:center; gap:8px}
.adv-money-input{width:110px; min-width:110px}
.adv-fund-form,.adv-withdraw-form{gap:6px}

/* Edit dropdown */
.adv-edit{position:relative}
.adv-edit summary{list-style:none}
.adv-edit summary::-webkit-details-marker{display:none}
.adv-edit[open] summary{background:rgba(18,215,255,.12)}
.adv-edit-form{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(18,215,255,.18);
  background:rgba(3,6,14,.85);
  min-width:320px;
}
.adv-label{margin:10px 0 6px; display:block}
.adv-edit-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.adv-edit-grid--wide{margin-top:10px}
.adv-save{margin-top:10px}

@media (max-width:720px){
  .adv-balance-hint{margin-left:0}
  .adv-money-input{width:100%; min-width:0}
  .adv-inline{width:100%}
  .adv-actions{align-items:stretch}
  .adv-edit-form{min-width:0; width:100%}
  .adv-edit-grid{grid-template-columns:1fr}
}

/* ==========================================================
   Advertiser Hub — Stats Modal + Alignment
   (no inline styles)
   ========================================================== */

body.modal-open{
  overflow:hidden;
}

/* Respect the HTML [hidden] attribute for the stats modal */
.adv-modal[hidden]{
  display:none !important;
}

.adv-modal.abp-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 14px;
  overflow: auto;
  backdrop-filter: blur(2px);
}

.adv-modal-panel{
  width: min(980px, 100%);
}

.adv-stats-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
  flex-wrap:wrap;
}

.adv-stats-sub{
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
}

.adv-stats-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

@media (max-width: 900px){
  .adv-stats-kpis{ grid-template-columns: 1fr; }
}

.adv-kpi{
  border-radius: 14px;
  border: 1px solid rgba(18,215,255,.14);
  background: rgba(0,0,0,.14);
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}

.adv-kpi__k{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  color: rgba(234,247,255,.72);
  text-transform: uppercase;
}

.adv-kpi__v{
  font-size: 22px;
  font-weight: 1000;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.adv-kpi__h{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(234,247,255,.62);
}

.adv-stats-table-wrap{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: auto;
}

.adv-stats-table{
  width: 100%;
  min-width: 520px;
}

.adv-stats-foot{
  margin-top: 10px;
  font-size: 12px;
  opacity: .78;
}