/* ZDASH — thème arcade néon.
   Un seul thème sombre assumé : c'est un dashboard de soirée, pas un site corporate. */

:root {
  --bg: #07070d;
  --bg-2: #0d0d18;
  --panel: #12121f;
  --panel-2: #191929;
  --line: #262640;
  --line-soft: #1c1c2e;

  --txt: #eceaff;
  --txt-2: #9d9ac0;
  --txt-3: #6b6890;

  --neon: #b4ff3d;      /* accent principal, façon borne d'arcade */
  --neon-2: #ff3d92;    /* dons, célébrations */
  --neon-3: #3de0ff;    /* live, info */
  --gold: #ffcc33;      /* paliers */
  --danger: #ff5470;

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 10px;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --glow: 0 0 12px rgba(180, 255, 61, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 14px;
  overflow: hidden;
}

/* Grain CRT très léger : la texture arcade sans gêner la lecture des flux. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.016) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}

button, input { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
b { color: var(--txt); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a45; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a5e; }

.is-hidden { display: none !important; }

/* ---------------- Boutons ---------------- */

.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--txt);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: border-color .15s, background .15s, transform .06s;
  white-space: nowrap;
}
.btn:hover { border-color: #3d3d63; background: #1f1f34; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(180deg, #c6ff5a, #93e01c);
  color: #0b1400;
  border-color: #7fc300;
  box-shadow: var(--glow);
}
.btn--primary:hover { background: linear-gradient(180deg, #d4ff7d, #a4f02c); }
.btn--ghost { background: transparent; }
.btn--danger { border-color: #55223a; color: #ff8ea6; }
.btn--danger:hover { background: #2a1220; border-color: #7a2f4c; }
.btn--sm { padding: 5px 9px; font-size: 12px; }
.btn--lg { padding: 11px 20px; font-size: 15px; }

/* ---------------- Segmented control ---------------- */

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel);
}
.seg__btn {
  border: 0;
  background: transparent;
  color: var(--txt-2);
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  border-right: 1px solid var(--line-soft);
}
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { color: var(--txt); background: #1b1b2c; }
.seg__btn.is-on { background: #23233c; color: var(--neon); }
.seg--sm .seg__btn { padding: 5px 9px; font-size: 11px; }

/* ---------------- Barres d'XP (paliers) ---------------- */

.xpbar {
  position: relative;
  height: 16px;
  border-radius: 9px;
  background: #14142a;
  border: 1px solid var(--line);
  overflow: hidden;
}
.xpbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #6ecf00, var(--neon));
  box-shadow: 0 0 14px rgba(180, 255, 61, .45);
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.xpbar__fill--alt { background: linear-gradient(90deg, #b8630a, var(--gold)); box-shadow: none; }
.xpbar__text {
  position: relative;
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .04em;
  /* Le texte chevauche la partie remplie ET la partie vide : une ombre portée
     reste lisible sur les deux, là où un blend mode en perdait la moitié. */
  color: #f2ffe0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .8);
}
.xpbar--slim { height: 6px; }

/* ---------------- Divers ---------------- */

.tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #22223a;
  color: var(--txt-2);
}
.tag--live { background: rgba(255, 61, 146, .16); color: #ff7ab3; }
.tag--goal { background: rgba(255, 204, 51, .14); color: var(--gold); }
.tag--done { background: rgba(180, 255, 61, .14); color: var(--neon); }

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #23233c;
  object-fit: cover;
  flex: none;
}

.num { font-variant-numeric: tabular-nums; }

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.pop { animation: pop .5s cubic-bezier(.22, 1, .36, 1); }

@keyframes slidein {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  body::after { display: none; }
}