/* ==================================================================== */
/*  NINJA BOOST — modern layer                                           */
/*  Loaded AFTER the base stylesheets. Red / black / white, with         */
/*  animated gradients, glow, glass and micro-interactions.              */
/*  Pure CSS: safe under the strict CSP, respects reduced-motion.        */
/* ==================================================================== */

@property --fx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* Theme tokens. Defaults = Ninja red. A reseller page overrides them
     (inline on <html>) from one chosen colour — see theme.js. */
  --accent-rgb:      255, 45, 63;
  --accent-dark-rgb: 196, 16, 32;
  --accent-deep:     #8a1018;
  --accent-hi:       #ff5c6a;
  --accent-tint:     #ffd0d4;
  --fx-glow:   0 0 24px rgba(var(--accent-rgb), .45), 0 0 64px rgba(var(--accent-rgb), .18);
  --fx-ease:   cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }

/* ------------------------------------------------------------------ */
/* Animated atmosphere (fixed layers behind everything)               */
/* ------------------------------------------------------------------ */
body {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -25%, rgba(var(--accent-rgb), .30) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 105% 55%, rgba(var(--accent-dark-rgb), .16) 0%, transparent 62%),
    radial-gradient(ellipse 40% 35% at -5% 85%, rgba(var(--accent-rgb), .12) 0%, transparent 60%);
  position: relative;
}

/* drifting red orbs */
body::before {
  content: "";
  position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgba(var(--accent-rgb), .20) 0, transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(var(--accent-dark-rgb), .22) 0, transparent 30%),
    radial-gradient(circle at 55% 105%, rgba(var(--accent-rgb), .16) 0, transparent 26%);
  animation: fx-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* fine grid, fades out toward the edges */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  animation: fx-grid 30s linear infinite;
}

@keyframes fx-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0)  scale(1.12); }
  100% { transform: translate3d(-2%, 5%, 0) scale(1.05); }
}
@keyframes fx-grid { to { background-position: 54px 54px, 54px 54px; } }

/* cursor-follow spotlight (driven by fx.js, harmless without it) */
.fx-spot {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; z-index: -1;
  margin: -260px 0 0 -260px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .16) 0%, transparent 62%);
  transition: opacity .4s ease;
  will-change: transform;
}
.fx-spot.on { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */
.header { position: sticky; }
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), #fff, var(--accent), transparent);
  background-size: 200% 100%;
  animation: fx-line 5s linear infinite;
  opacity: .8;
}
@keyframes fx-line { to { background-position: -200% 0; } }

.logo-img { animation: fx-pulse 3.2s ease-in-out infinite; }
.logo-word {
  background: linear-gradient(90deg, #fff 0%, var(--accent-tint) 50%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes fx-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .45)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .85)); transform: scale(1.06); }
}

/* ------------------------------------------------------------------ */
/* Brand heading                                                      */
/* ------------------------------------------------------------------ */
.brand-title { position: relative; padding-bottom: 18px; animation: fx-rise .8s var(--fx-ease) both; }
.brand-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 120px; height: 3px;
  transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), #fff, var(--accent), transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .8);
  animation: fx-line 3.5s linear infinite;
}
.brand-top { filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .35)); }

/* ------------------------------------------------------------------ */
/* Entrance animations                                                */
/* ------------------------------------------------------------------ */
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.chips   { animation: fx-rise .8s .08s var(--fx-ease) both; }
.booster > * { animation: fx-rise .8s var(--fx-ease) both; }
.booster > *:nth-child(1) { animation-delay: .12s; }
.booster > *:nth-child(2) { animation-delay: .20s; }
.booster > *:nth-child(3) { animation-delay: .28s; }
.booster > *:nth-child(4) { animation-delay: .36s; }
.booster > *:nth-child(5) { animation-delay: .44s; }
.auth-card, .result-card { animation: fx-rise .7s var(--fx-ease) both; }

/* ------------------------------------------------------------------ */
/* Chips                                                              */
/* ------------------------------------------------------------------ */
.chip { position: relative; overflow: hidden; }
.chip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: fx-shine 5s ease-in-out infinite;
}
.chip:nth-child(2)::after { animation-delay: 1.2s; }
.chip:nth-child(3)::after { animation-delay: 2.4s; }
.chip:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(var(--accent-rgb), .22); transform: translateY(-3px); }
.chip-accent {
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-dark), var(--accent), var(--accent-bright));
  background-size: 250% 100%;
  animation: fx-flow 6s ease-in-out infinite;
}
@keyframes fx-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes fx-flow  { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ------------------------------------------------------------------ */
/* Cards: glass + animated gradient border                            */
/* ------------------------------------------------------------------ */
.sec-card, .auth-card, .result-card, .card, .status-box {
  position: relative;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.sec-card, .auth-card, .result-card {
  background:
    linear-gradient(180deg, rgba(24, 24, 24, .88) 0%, rgba(10, 10, 10, .94) 100%),
    radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), .10), transparent 60%);
  background-blend-mode: normal;
}

/* rotating conic border, revealed on hover / focus */
.sec-card::before, .auth-card::before, .result-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--fx-angle),
              transparent 0deg, rgba(var(--accent-rgb), 0) 40deg,
              var(--accent) 110deg, #ffffff 150deg, var(--accent) 190deg,
              rgba(var(--accent-rgb), 0) 260deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
  animation: fx-spin 5s linear infinite;
  pointer-events: none;
}
.sec-card:hover::before, .sec-card:focus-within::before,
.auth-card::before, .result-card::before { opacity: 1; }
.sec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 40px rgba(var(--accent-rgb), .10), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sec-card { transition: transform .3s var(--fx-ease), box-shadow .3s ease, border-color .2s ease; }
@keyframes fx-spin { to { --fx-angle: 360deg; } }

.sec-badge {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .06));
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff;
}
.sec-title {
  background: linear-gradient(90deg, #fff, var(--accent-tint));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------------------------------------------ */
/* Inputs                                                             */
/* ------------------------------------------------------------------ */
.sec-input, .field input, .field textarea, .field select,
.auth-form input, .token-input {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease, transform .2s ease;
}
.sec-input:focus, .field input:focus, .field textarea:focus, .auth-form input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25), 0 0 28px rgba(var(--accent-rgb), .22);
  background: #121012;
}

/* ------------------------------------------------------------------ */
/* Buttons: flowing gradient + glow                                   */
/* ------------------------------------------------------------------ */
.btn-primary, .start-btn {
  background: linear-gradient(120deg, var(--accent-bright) 0%, var(--accent) 30%, var(--accent-dark) 60%, var(--accent) 100%);
  background-size: 260% 100%;
  animation: fx-flow 7s ease-in-out infinite;
}
.btn-primary:hover:not(:disabled), .start-btn:hover:not(:disabled) {
  background: linear-gradient(120deg, var(--accent-hi) 0%, var(--accent-bright) 30%, var(--accent) 60%, var(--accent-bright) 100%);
  background-size: 260% 100%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 14px 40px rgba(var(--accent-rgb), .6), 0 0 60px rgba(var(--accent-rgb), .25);
  transform: translateY(-2px);
}
.start-btn:not(:disabled) { animation: fx-flow 7s ease-in-out infinite, fx-glow 3s ease-in-out infinite; }
@keyframes fx-glow {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 12px 32px rgba(var(--accent-dark-rgb), .42); }
  50%      { box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 14px 44px rgba(var(--accent-rgb), .62), 0 0 50px rgba(var(--accent-rgb), .22); }
}

.btn-ghost, .buy-pill, .acc-btn, .auth-tab { position: relative; overflow: hidden; }
.btn-ghost:hover:not(:disabled), .buy-pill:hover, .acc-btn:hover {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25), 0 8px 26px rgba(var(--accent-rgb), .22);
  transform: translateY(-2px);
}

/* click ripple (spawned by fx.js) */
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0); animation: fx-ripple .6s ease-out forwards;
}
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------------ */
/* Cost box / progress / ring / status                                */
/* ------------------------------------------------------------------ */
.cost-note {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .10), rgba(12, 12, 12, .9) 55%);
  border-color: rgba(var(--accent-rgb), .28);
}
.cost-price {
  background: linear-gradient(90deg, #fff 0%, var(--accent-2) 60%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .35));
}
.cost-note.insufficient .cost-price { -webkit-text-fill-color: var(--red); color: var(--red); background: none; filter: none; }

.progress { position: relative; background: #111; border: 1px solid rgba(255, 255, 255, .05); }
.progress-bar {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .7);
}
.progress-bar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px);
  background-size: 28px 100%;
  animation: fx-stripes 1s linear infinite;
}
@keyframes fx-stripes { to { background-position: 28px 0; } }

.rr-ring-wrap { filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), .35)); }
.rr-ring-wrap.completed { filter: drop-shadow(0 0 22px rgba(74, 222, 128, .35)); }
.rr-ring-count { text-shadow: 0 0 18px rgba(var(--accent-rgb), .6); }

.ts-row, .invite-preview, .rr-info { transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.ts-row:hover, .invite-preview:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateX(2px); }
.ts-badge.joined { box-shadow: 0 0 14px rgba(var(--accent-rgb), .25); }
.ip-icon { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35), 0 0 18px rgba(var(--accent-rgb), .3); }

/* ------------------------------------------------------------------ */
/* Dashboard (logged in) + tabs                                       */
/* ------------------------------------------------------------------ */
#app-view .dash-side {
  background: linear-gradient(180deg, rgba(14, 8, 9, .92), rgba(5, 5, 5, .96));
  border-right: 1px solid rgba(var(--accent-rgb), .16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.acc-btn.active, .ts-tab.active, .auth-tab.active {
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-dark), var(--accent));
  background-size: 250% 100%; animation: fx-flow 6s ease-in-out infinite;
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), .4);
}
.tab-panel.active { animation: fx-rise .4s var(--fx-ease) both; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover td { background: rgba(var(--accent-rgb), .07); }
.wallet-balance strong { text-shadow: 0 0 16px rgba(var(--accent-rgb), .5); }

/* ------------------------------------------------------------------ */
/* Footer — Discord support                                           */
/* ------------------------------------------------------------------ */
.site-watermark {
  position: relative; padding: 30px 16px 34px; color: #b9aeb2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
}
.site-watermark::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(560px, 84%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), #fff, rgba(var(--accent-rgb), .7), transparent);
  background-size: 200% 100%; animation: fx-line 6s linear infinite;
}
.site-watermark a, .discord-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; color: #fff;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-dark), var(--accent));
  background-size: 250% 100%; animation: fx-flow 6s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 22px rgba(var(--accent-dark-rgb), .4);
  transition: transform .2s var(--fx-ease), box-shadow .2s ease;
}
.site-watermark a:hover, .discord-link:hover {
  text-decoration: none; transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 32px rgba(var(--accent-rgb), .6), 0 0 40px rgba(var(--accent-rgb), .25);
}
.site-watermark a svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ */
/* Toast + scrollbar                                                  */
/* ------------------------------------------------------------------ */
.toast { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 36px rgba(0, 0, 0, .6), 0 0 28px rgba(var(--accent-rgb), .2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-2), var(--accent-dark)); }

/* ------------------------------------------------------------------ */
/* Admin panel                                                        */
/* ------------------------------------------------------------------ */
.side { background: linear-gradient(180deg, #0d0709 0%, #070707 100%) !important; border-right: 1px solid rgba(var(--accent-rgb), .16) !important; }
.brand span {
  background: linear-gradient(90deg, #fff, var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand img, .login-logo { animation: fx-pulse 3.2s ease-in-out infinite; }
.nav-link { transition: background .2s ease, color .2s ease, transform .2s var(--fx-ease), box-shadow .2s ease; }
.nav-link:hover { transform: translateX(3px); }
.nav-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .03)) !important;
  box-shadow: inset 3px 0 0 var(--accent), 0 0 24px rgba(var(--accent-rgb), .12);
}
.login-card { position: relative; animation: fx-rise .7s var(--fx-ease) both; box-shadow: 0 24px 64px rgba(0, 0, 0, .7), 0 0 60px rgba(var(--accent-rgb), .12); }
.card { transition: border-color .25s ease, transform .3s var(--fx-ease), box-shadow .3s ease; }
.card:hover { border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 30px rgba(var(--accent-rgb), .08); }
.kpi b {
  background: linear-gradient(90deg, #fff, var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kpi.warn b, .kpi.bad b { background: none; }
.kpi.warn b { -webkit-text-fill-color: var(--warn); color: var(--warn); }
.kpi.bad b  { -webkit-text-fill-color: var(--red);  color: var(--red); }
.live i { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); animation: fx-ping 1.8s ease-out infinite; }
@keyframes fx-ping { to { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); } }

/* ------------------------------------------------------------------ */
/* Phones: lighter effects                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body::after { background-size: 40px 40px; }
  .sec-card, .auth-card, .result-card, .card, .status-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fx-spot { display: none; }
}

/* ------------------------------------------------------------------ */
/* Respect reduced motion                                             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fx-spot { display: none; }
}

/* ==================================================================== */
/*  App-shell scrolling (desktop): the menu and top bar stay put, only   */
/*  the selected page scrolls — not the whole document. Phones keep the  */
/*  normal page scroll; their menu is a drawer (see drawer.css).        */
/* ==================================================================== */
@media (min-width: 861px) {
  /* Admin panel */
  #shell.shell:not(.hidden) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  #shell .side { height: 100%; overflow-y: auto; }
  #shell .content { height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
}

/* ---------- link embed editor: live preview of the card Discord shows ---------- */
.emb { --emb-color: #ff2d3f; max-width: 460px; }
.emb-card {
  position: relative; display: grid; gap: 4px; padding: 10px 14px 12px 16px; border-radius: 6px;
  background: #2b2d31; border-left: 4px solid var(--emb-color); color: #dbdee1;
  font: 14px/1.35 "gg sans", "Segoe UI", system-ui, sans-serif; text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.emb-site { font-size: 12px; color: #b5bac1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.emb-title { font-weight: 600; font-size: 16px; color: #00a8fc; overflow-wrap: anywhere; }
.emb-desc { font-size: 14px; color: #dbdee1; white-space: pre-wrap; overflow-wrap: anywhere; }
.emb-img { display: block; margin-top: 8px; width: 100%; max-height: 260px; object-fit: cover; border-radius: 4px; background: #1e1f22; }
.emb-thumb { position: absolute; top: 12px; right: 12px; width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #1e1f22; }
.emb-card.has-thumb { padding-right: 82px; }
.emb-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.emb-fields { display: grid; gap: 12px; }
.emb-fields textarea { min-height: 76px; resize: vertical; }
.emb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emb-img-prev { width: 84px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg-2); flex: 0 0 auto; }