:root{
  --bg: #070707;
  --bg-2: #0D0D0D;
  --panel: rgba(16, 16, 16, 0.82);
  --panel-2: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.08);

  --text: #F2F2F2;
  --muted: #B8B8B8;

  --red: #D62828;
  --red-deep: #8F1414;
  --yellow: #F4B400;
  --yellow-soft: #FFD24A;
  --green: #2ECC71;
  --green-deep: #1D8F4F;

  --glow-red: rgba(214, 40, 40, 0.35);
  --glow-yellow: rgba(244, 180, 0, 0.35);
  --glow-green: rgba(46, 204, 113, 0.30);

  --shadow: rgba(0, 0, 0, 0.55);
}

/* Base globale */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text)
}
body{overflow-x:hidden}

/* Fond animé du site */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(214,40,40,.18), transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(244,180,0,.14), transparent 18%),
    radial-gradient(circle at 75% 80%, rgba(46,204,113,.13), transparent 20%),
    linear-gradient(180deg, #090909, #050505);
  z-index:-2;
}

.bg::before,
.bg::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}

.bg::before{
  background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.03) 35% 36%, transparent 36% 100%);
  mix-blend-mode:screen;
  opacity:.2;
}

.bg::after{
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 35%);
  opacity:.5;
}

/* Structure générale */
.app-shell{
  min-height:100vh;
  display:flex;
}

/* Barre latérale */
.rail{
  width:86px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  border-right:1px solid rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 10px;
  gap:18px;
}

.crest{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(214,40,40,.16), rgba(46,204,113,.14));
  border:1px solid rgba(255,255,255,.08);
  color:#ffd84d;
  font-size:24px;
  box-shadow:0 0 18px rgba(255,200,0,.12);
}

.rail-icons{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  justify-content:center;
}

.rail-btn{
  width:50px;
  height:50px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}

.rail-btn.active{
  box-shadow:0 0 0 1px rgba(244,180,0,.45), 0 0 18px rgba(214,40,40,.12);
}

.rail-foot{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  letter-spacing:.35em;
  color:var(--muted);
  font-size:12px;
}

/* Contenu principal */
.page{
  flex:1;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Bloc hero */
.hero{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:24px;
  align-items:center;
  min-height:320px;
}

.eyebrow{
  letter-spacing:.3em;
  color:var(--muted);
  font-size:12px;
  margin-bottom:14px;
}

h1{
  margin:0;
  font-size:clamp(52px,8vw,108px);
  line-height:.92;
  letter-spacing:.02em;
}

.lg-red{color:var(--red)}
.lg-yellow{color:var(--yellow)}

.hero-copy p{
  margin:14px 0 22px;
  color:#dedede;
  font-size:18px;
}

.search-wrap{max-width:620px}

#search{
  width:100%;
  padding:18px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
  box-shadow:var(--shadow);
}

#search::placeholder{color:#9a9a9a}

.stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.stat{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  padding:12px 16px;
  border-radius:14px;
  min-width:120px;
  box-shadow:var(--shadow);
}

.stat b{
  display:block;
  font-size:28px;
  margin-top:4px;
}

/* Illustration à droite */
.hero-art{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:300px;
}

.hero-glow{
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,40,40,.18), rgba(244,180,0,.12) 42%, rgba(46,204,113,.12) 60%, transparent 70%);
  filter:blur(6px);
}

.hero-card{
  position:relative;
  width:min(100%,360px);
  aspect-ratio:1/1.15;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  overflow:hidden;
}

.hero-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, rgba(214,40,40,.22), transparent 35%, rgba(244,180,0,.18) 62%, rgba(46,204,113,.18));
  mix-blend-mode:screen;
}

.hero-avatar{
  position:relative;
  width:138px;
  height:138px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:62px;
  background:linear-gradient(135deg, rgba(214,40,40,.18), rgba(244,180,0,.12), rgba(46,204,113,.16));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 45px rgba(0,0,0,.35);
}

.hero-lines{
  position:relative;
  width:70%;
  display:grid;
  gap:10px;
}

.hero-lines span{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(214,40,40,.55), rgba(244,180,0,.55), rgba(46,204,113,.55));
  opacity:.8;
}

/* Grille des cartes */
.grid-wrap{padding-top:8px}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}

/* Carte de service */
.card{
  --glow:#f4b400;
  --title: color-mix(in srgb, var(--glow) 92%, white);
  --soft: color-mix(in srgb, var(--glow) 22%, transparent);
  --hard: color-mix(in srgb, var(--glow) 52%, rgba(255,255,255,.08));

  display:block;
  text-decoration:none;
  color:inherit;
  min-height:220px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid var(--hard);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 18px var(--soft),
    0 20px 60px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.card[data-name="sonarr"]{ --glow:#35c5f4; }
.card[data-name="radarr"]{ --glow:#f6c343; }
.card[data-name="whisparr"]{ --glow:#ef476f; }
.card[data-name="jelysseer"]{ --glow:#9b5de5; }
.card[data-name="prowlarr"]{ --glow:#ff9f1c; }
.card[data-name="jackett"]{ --glow:#2ec4b6; }
.card[data-name="navidrome"]{ --glow:#7b2cbf; }
.card[data-name="qbittorrent"]{ --glow:#3a86ff; }

.card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--glow) 25%, transparent),
    transparent 35%,
    color-mix(in srgb, var(--glow) 18%, transparent) 70%,
    transparent
  );
  opacity:.45;
  pointer-events:none;
}

.card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--glow) 65%, rgba(255,255,255,.12));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--glow) 38%, rgba(255,255,255,.12)),
    0 0 34px color-mix(in srgb, var(--glow) 35%, transparent),
    0 24px 70px rgba(0,0,0,.72);
}

.card{
  position: relative;
  overflow: hidden;
}

.card-top{
  position: relative;
  margin-bottom: 14px;
  padding-right: 86px;
}

.card-status-badge{
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #eaeaea;
  z-index: 2;
}

.card.online .card-status-badge{
  background:rgba(46, 204, 113, .12);
  border-color:rgba(46, 204, 113, .28);
  color:#7cf0a6;
}

.card.offline .card-status-badge{
  background:rgba(214, 40, 40, .12);
  border-color:rgba(214, 40, 40, .28);
  color:#ff8a8a;
}

.card-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--glow) 28%, transparent), transparent 55%),
    rgba(0,0,0,.38);
  border:1px solid color-mix(in srgb, var(--glow) 28%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 16px color-mix(in srgb, var(--glow) 18%, transparent);
  overflow:hidden;
}

.service-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--glow) 40%, transparent));
}

.card-name{
  font-size:20px;
  font-weight:700;
  color:var(--title);
  text-shadow:0 0 10px color-mix(in srgb, var(--glow) 35%, transparent);
}

.card-desc{
  color:color-mix(in srgb, var(--title) 22%, #d0d0d0);
  line-height:1.5;
  min-height:72px;
  font-size:14px;
}

/* Pied de page */
.footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 2px 0;
  color:var(--muted);
  font-size:13px;
}

/* Responsive */
@media (max-width: 920px){
  .rail{display:none}
  .page{padding:18px}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-art{order:-1;min-height:240px}
}

@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .footer{flex-direction:column}
}