:root{
  --black:#05070A; --bg:#07090C;
  --panel:#0B0F18; --panel2:#0A0E16;
  --text:#EEF2FF; --muted:#9AA4B6;
  --accent:#E11D48; --violet:#7C3AED;
  --success:#22C55E; --danger:#EF4444;
  --border:rgba(255,255,255,.07);
}

/* Fond */
html,body{height:100%}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--black)}
.bg-blood{
  position:fixed; inset:0; z-index:1; overflow:hidden;
  /* IMPORTANT: pas de fond noir ici, pour laisser voir la photo */
  background:
    radial-gradient(1200px 700px at -10% -20%, rgba(124,58,237,.10) 0%, transparent 40%),
    radial-gradient(900px 600px at 110% 10%, rgba(241,65,108,.10) 0%, transparent 45%);
}
.bg-blood span{position:absolute;top:-25vh;width:220px;height:220px;border-radius:45% 55% 60% 40% / 55% 45% 55% 45%;
  background:radial-gradient(35% 35% at 30% 30%, rgba(255,40,80,.95), rgba(160,10,40,.8) 65%, rgba(120,0,30,0) 66%);
  filter:blur(10px) saturate(130%);opacity:.14;mix-blend-mode:screen;animation:drip 18s linear infinite}
@keyframes drip{0%{transform:translateY(-10vh) rotate(0)}50%{opacity:.22}100%{transform:translateY(140vh) rotate(360deg)}}
.bg-blood span:nth-child(1){left:2%;animation-duration:20s;animation-delay:-2s}
.bg-blood span:nth-child(2){left:14%;animation-duration:24s;animation-delay:-6s}
.bg-blood span:nth-child(3){left:28%;animation-duration:22s;animation-delay:-3s}
.bg-blood span:nth-child(4){left:42%;animation-duration:26s;animation-delay:-9s}
.bg-blood span:nth-child(5){left:56%;animation-duration:21s;animation-delay:-12s}
.bg-blood span:nth-child(6){left:68%;animation-duration:23s;animation-delay:-4s}
.bg-blood span:nth-child(7){left:78%;animation-duration:25s;animation-delay:-10s}
.bg-blood span:nth-child(8){left:86%;animation-duration:19s;animation-delay:-1s}
.bg-blood span:nth-child(9){left:35%;animation-duration:27s;animation-delay:-7s}
.bg-blood span:nth-child(10){left:72%;animation-duration:28s;animation-delay:-13s}

/* Layout */
.container{position:relative;z-index:2;max-width:1200px;margin:36px auto;padding:0 20px}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin:0 0 20px;
  border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);box-shadow:0 12px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px}
.brand img{width:28px;height:28px;border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.03)}
.user{display:flex;align-items:center;gap:10px}
.user img{width:32px;height:32px;border-radius:50%;border:1px solid var(--border)}

/* Boutons */
.btn{padding:11px 16px;border-radius:14px;border:1px solid var(--border);text-decoration:none;color:var(--text);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .1s ease, box-shadow .15s ease, border-color .15s;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--violet));border:none;
  box-shadow:0 10px 35px rgba(124,58,237,.28), 0 12px 45px rgba(225,29,72,.18)}
.btn.neon{border:none;background:linear-gradient(90deg,var(--accent),var(--violet));
  box-shadow:0 10px 30px rgba(124,58,237,.35), 0 8px 26px rgba(225,29,72,.25);font-weight:700}
.btn.success{background:linear-gradient(90deg,#16a34a,#22c55e);border:none}
.btn.danger{background:linear-gradient(90deg,#ef4444,#f43f5e);border:none}
.btn.ghost{background:transparent;border:1px solid var(--border)}
.btn.delete{border-color:rgba(244,63,94,.35)}
.btn.delete:hover{box-shadow:0 6px 22px rgba(244,63,94,.25)}
.btn.lg{padding:12px 18px}.btn.xl{padding:14px 22px;border-radius:16px}

/* Badges */
.badge{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);display:inline-flex;align-items:center}
.badge.pending{color:#FFD166;border-color:rgba(255,209,102,.45)}
.badge.approved{color:#7CFFB0;border-color:rgba(40,209,124,.45)}
.badge.rejected{color:#FF8894;border-color:rgba(255,136,148,.45)}

/* Cards / Hero */
.card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--border);
  border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 18px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02)}
.center{text-align:center}
.hero-neo{padding:26px 24px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:0 25px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02)}
.hero-neo h1{margin:0 0 6px;font-size:28px;font-weight:900;letter-spacing:.3px}
.hero-neo p{margin:0;opacity:.85}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table thead th{font-weight:800;color:#cfd7ea}
.table td .row{align-items:center}
.table td .avatar{margin-right:10px}

/* Inputs */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.label{font-size:13px;color:var(--muted);margin-bottom:6px}
.input, textarea, select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0B1320;color:var(--text);
  outline:0;transition:box-shadow .15s ease,border-color .15s ease}
textarea{min-height:120px;resize:vertical}
.input:focus, textarea:focus, select:focus{border-color:rgba(124,58,237,.35);box-shadow:0 0 0 4px rgba(124,58,237,.14),0 0 0 1px rgba(124,58,237,.22) inset}
.row{display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--border)}
.avatar.lg{width:60px;height:60px}

/* Footer */
footer{opacity:.65;font-size:12px;text-align:center;margin:30px 0}

/* Petites retouches */
.hero-neo a.btn{border-radius:999px;box-shadow:0 8px 22px rgba(124,58,237,.15),0 6px 18px rgba(225,29,72,.12)}
.hero-neo a.btn:hover{transform:translateY(-1px)}

/* ===== Background rotator (plein écran, sous les gouttes) ===== */
.bg-rotator{
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  /* noir en fond si pas d'image */
  background: var(--black);
}
.bg-rotator::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* léger voile coloré comme avant */
  background:
    radial-gradient(1200px 600px at 15% -20%, rgba(124,58,237,.16) 0%, transparent 45%),
    radial-gradient(900px 600px at 120% 0%, rgba(225,29,72,.16) 0%, transparent 48%);
}
/* chaque slide */
.bg-rotator .slide{
  position:absolute; inset:0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: brightness(.36) saturate(105%);
  opacity: 0; transition: opacity 900ms ease;
  will-change: opacity, transform; pointer-events: none;
}
.bg-rotator .slide.show{ opacity: 1; }

/* la couche gouttes reste au-dessus */
.bg-blood{ z-index: 1; }