:root{
  --bg:#020304;--panel:rgba(8,10,13,.88);--line:rgba(255,255,255,.12);
  --red:#ff1635;--purple:#a34cff;--green:#28e0a0;--text:#f5f5f7;--muted:#8a8d95;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);
  font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
body:before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,10,35,.22),transparent 32%),
    radial-gradient(ellipse at 88% 40%,rgba(70,30,120,.16),transparent 34%),
    linear-gradient(180deg,#090507 0%,#020304 56%,#010203 100%);
}
body:after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,0,30,.05),transparent 20%,transparent 80%,rgba(50,100,255,.04)),
    radial-gradient(ellipse at 50% 0%,transparent 0 30%,rgba(0,0,0,.42) 76%);
}
.page{
  width:min(1500px,94vw);height:100vh;margin:auto;
  display:flex;flex-direction:column;padding:26px 0 16px;
}
.hero{text-align:center;flex:0 0 auto}
.logo{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(60px,6.5vw,96px);line-height:.88;letter-spacing:2px;
  color:var(--red);transform:skew(-5deg);
  text-shadow:0 0 35px rgba(255,22,53,.18)
}
.tagline{margin-top:12px;font-size:10px;letter-spacing:5px;color:#ddd}

.actions{
  width:min(1120px,100%);margin:58px auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;flex:0 0 auto
}
.action{
  min-height:172px;padding:30px 38px;border-radius:22px;
  display:flex;align-items:center;gap:22px;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,rgba(18,18,22,.96),rgba(5,7,10,.94));
  border:1px solid var(--line);box-shadow:0 18px 55px rgba(0,0,0,.35);
  transition:transform .2s,border-color .2s,box-shadow .2s
}
.action:hover{transform:translateY(-3px);box-shadow:0 22px 65px rgba(0,0,0,.48)}
.watch:hover{border-color:rgba(255,22,53,.7)}
.request:hover{border-color:rgba(163,76,255,.7)}
.icon{
  width:88px;height:88px;border:2px solid;border-radius:19px;
  display:grid;place-items:center;font-size:40px;font-weight:800;flex:none
}
.watch .icon{border-color:var(--red);color:var(--red);box-shadow:0 0 22px rgba(255,22,53,.12)}
.request .icon{border-color:var(--purple);color:var(--purple);box-shadow:0 0 22px rgba(163,76,255,.12)}
.action-copy{flex:1}
.kicker{font-size:10px;font-weight:800;letter-spacing:2.5px;margin-bottom:6px}
.watch .kicker,.watch .arrow{color:var(--red)}
.request .kicker,.request .arrow{color:var(--purple)}
.action h2{
  margin:0;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:42px;letter-spacing:1.5px
}
.action p{margin:6px 0 0;color:#aaa;font-size:13px}
.arrow{font-size:34px}

.system{
  margin-top:auto;margin-bottom:22px;flex:0 0 auto;padding:24px 25px 22px;
  border:1px solid rgba(255,255,255,.13);border-radius:22px;
  background:linear-gradient(145deg,rgba(10,12,15,.94),rgba(4,5,7,.96));
  box-shadow:0 -5px 55px rgba(0,0,0,.4);position:relative
}
.system:before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:5px;
  border-radius:0 7px 7px 0;background:var(--red);
  box-shadow:0 0 18px rgba(255,22,53,.5)
}
.system-head{
  display:flex;justify-content:space-between;align-items:end;
  padding-left:16px;margin-bottom:18px
}
.system-title h2{
  margin:0;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:30px;letter-spacing:2px
}
.system-title p{margin:5px 0 0;color:#7e8189;font-size:10px;letter-spacing:2px}
.updated{font-size:10px;color:#858890}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  min-height:205px;padding:18px 18px 16px;border-radius:17px;
  background:rgba(2,3,5,.82);border:1px solid rgba(255,255,255,.10)
}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card h3{margin:0;font-size:15px}
.ok{font-size:10px;color:var(--green)}
.ok:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--green);margin-right:6px;box-shadow:0 0 10px rgba(40,224,160,.5)}
.storage{display:grid;grid-template-columns:125px 1fr;gap:18px;align-items:center;margin-top:10px}
.ring{
  width:116px;height:116px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--red) var(--pct),#292c32 0);position:relative
}
.ring:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#080a0d}
.ring-inner{position:relative;z-index:1;text-align:center}
.ring-value{font-size:20px;font-weight:800}.ring-label{font-size:8px;color:#777;margin-top:3px}
.bar{height:9px;border-radius:20px;background:#20242a;overflow:hidden;margin:8px 0 12px}
.fill{height:100%;background:var(--red);border-radius:20px;width:0}
.values{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.values>div+div{text-align:right}
.num{font-size:13px;font-weight:800}.sub{font-size:8px;color:#777;margin-top:3px}
.ratio-layout{display:grid;grid-template-columns:125px 1fr;gap:18px;align-items:center;margin-top:10px}
.ratio-ring{background:conic-gradient(var(--green) 72%,#292c32 0)}
.transfer{border-left:1px solid rgba(255,255,255,.09);padding-left:18px}
.transfer-row{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.transfer-row:last-child{border-bottom:0}
.transfer b{font-size:14px}.transfer small{display:block;color:#777;margin-top:3px;font-size:9px}
.up{color:var(--green)}.down{color:#ff4a68}

footer{text-align:center;color:#4f535b;font-size:9px;margin-top:0;flex:0 0 auto}

@media(max-width:1000px){
  body{overflow:auto}.page{height:auto;min-height:100vh;padding:25px 0}
  .system{margin-top:10px}.cards{grid-template-columns:1fr}
}
@media(max-width:650px){
  .page{width:92vw}.actions{grid-template-columns:1fr;gap:12px}
  .action{min-height:115px;padding:20px}.icon{width:62px;height:62px}
  .action h2{font-size:30px}.system-head{flex-direction:column;align-items:flex-start;gap:9px}
  .storage,.ratio-layout{grid-template-columns:1fr}.ring{margin:auto}
}


/* VERSION */
.logo-line{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:10px;
}
.version{
  margin-bottom:8px;
  color:#666a72;
  font-size:10px;
  letter-spacing:1px;
  font-weight:600;
}

/* TUTORIEL JELLYFIN */
.tutorial-page{
  overflow:auto;
}

.tutorial{
  width:min(1120px,100%);
  margin:42px auto 0;
}

.tutorial-back{
  display:inline-block;
  color:#8d929b;
  text-decoration:none;
  font-size:12px;
  margin-bottom:18px;
  transition:color .2s;
}
.tutorial-back:hover{color:#fff}

.tutorial-title{
  margin:0;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:clamp(30px,4vw,48px);
  letter-spacing:1.5px;
}
.tutorial-intro{
  color:#999da5;
  font-size:14px;
  line-height:1.6;
  max-width:760px;
  margin:10px 0 28px;
}

.server-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 22px;
  margin-bottom:22px;
  border:1px solid rgba(255,22,53,.25);
  border-left:4px solid var(--red);
  border-radius:14px;
  background:rgba(12,13,17,.88);
}
.server-label{
  display:block;
  color:#777b84;
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:6px;
}
.server-url{
  color:#f2f2f4;
  font-size:14px;
  font-weight:700;
  word-break:break-all;
}
.copy-server{
  flex:none;
  border:1px solid rgba(255,255,255,.15);
  background:#17191e;
  color:#fff;
  border-radius:9px;
  padding:10px 15px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.copy-server:hover{border-color:var(--red)}

.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.guide-card{
  position:relative;
  padding:24px;
  min-height:370px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(15,16,20,.96),rgba(5,7,10,.94));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.guide-number{
  position:absolute;
  top:18px;
  right:20px;
  color:#454850;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:28px;
}
.guide-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:#0b0d11;
  font-size:24px;
  margin-bottom:20px;
}
.guide-card h2{
  margin:0;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:30px;
  letter-spacing:1px;
}
.guide-card p{
  color:#999da5;
  font-size:12px;
  line-height:1.55;
  min-height:57px;
}
.guide-card ol{
  padding-left:20px;
  color:#c4c6cb;
  font-size:12px;
  line-height:1.8;
  margin:14px 0 20px;
}
.guide-button{
  display:inline-block;
  padding:11px 14px;
  border-radius:9px;
  background:#11151a;
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  text-decoration:none;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
}
.guide-button:hover{
  border-color:var(--red);
  color:#fff;
}

.tutorial-note{
  margin-top:18px;
  padding:17px 20px;
  border-radius:13px;
  background:rgba(10,11,14,.75);
  border:1px solid rgba(255,255,255,.08);
  color:#8f939b;
  font-size:11px;
  line-height:1.6;
}
.tutorial-note strong{color:#ddd}

.tutorial-page footer{
  margin:28px auto 20px;
}

@media(max-width:900px){
  .guide-grid{grid-template-columns:1fr}
  .guide-card{min-height:auto}
}
@media(max-width:650px){
  .logo-line{gap:7px}
  .version{font-size:9px;margin-bottom:5px}
  .tutorial{margin-top:30px}
  .server-box{align-items:flex-start;flex-direction:column}
  .copy-server{width:100%}
}


/* LOGOS PLATEFORMES */
.platform-logo img{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.platform-logo{color:#fff}

/* DERNIERS AJOUTS */
.latest{
  width:min(1120px,100%);
  margin:30px auto 0;
  flex:0 0 auto;
}
.latest-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}
.latest-head h2{
  margin:0;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:30px;
  letter-spacing:2px;
}
.latest-head p{
  margin:5px 0 0;
  color:#7e8189;
  font-size:10px;
  letter-spacing:2px;
}
.latest-more{
  color:#777b84;
  text-decoration:none;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
  white-space:nowrap;
}
.latest-more:hover{color:#fff}

.latest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.latest-item{
  min-width:0;
  overflow:hidden;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(14,16,20,.96),rgba(5,7,10,.94));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 35px rgba(0,0,0,.24);
  transition:transform .2s,border-color .2s;
}
.latest-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,22,53,.35);
}
.latest-poster{
  aspect-ratio:2/3;
  background:#0b0d11;
  overflow:hidden;
  position:relative;
}
.latest-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.latest-poster-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#343840;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  letter-spacing:2px;
  font-size:20px;
}
.latest-info{
  padding:13px 14px 15px;
}
.latest-type{
  color:var(--red);
  font-size:8px;
  font-weight:800;
  letter-spacing:1.6px;
}
.latest-info h3{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.latest-added{
  margin-top:7px;
  color:#666a72;
  font-size:8px;
  letter-spacing:1px;
}
.latest-loading .latest-poster{
  background:linear-gradient(90deg,#0b0d11,#15181d,#0b0d11);
  background-size:200% 100%;
  animation:latestShimmer 1.8s infinite;
}
.latest-loading .latest-info h3{
  color:#656971;
}
@keyframes latestShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.latest-empty{
  grid-column:1/-1;
  text-align:center;
  padding:24px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,10,13,.7);
}
.latest-empty-icon{
  width:38px;height:38px;margin:0 auto 9px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#777b84;
  font-size:20px;
}
.latest-empty h3{margin:0;font-size:14px}
.latest-empty p{margin:6px 0 0;color:#777b84;font-size:10px}

@media(max-width:1000px){
  .latest-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .latest{margin-top:22px}
  .latest-head{align-items:flex-start;flex-direction:column;gap:8px}
  .latest-grid{grid-template-columns:1fr 1fr;gap:10px}
  .latest-info{padding:10px}
  .latest-info h3{font-size:12px}
}

/* ÉTAT DU SYSTÈME — NAS_S / NAS_F */
.nas-system-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nas-system-card{min-width:0;padding:18px;border-radius:17px;background:linear-gradient(145deg,rgba(14,16,20,.97),rgba(5,7,10,.95));border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 38px rgba(0,0,0,.25)}
.nas-system-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.nas-name{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:27px;letter-spacing:1.5px}
.nas-subtitle{margin-top:3px;color:#666a72;font-size:8px;letter-spacing:1.7px;font-weight:800}
.nas-system-body{display:grid;grid-template-columns:1fr 145px;gap:16px;align-items:center;padding-top:13px}
.disk-panel-title,.storage-title{color:#777b84;font-size:8px;font-weight:800;letter-spacing:1.7px}
.disks-list{margin-top:5px}
.disk-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid rgba(255,255,255,.055)}
.disk-row:first-child{border-top:0}
.disk-icon{width:23px;height:23px;flex:none;border:1px solid rgba(255,255,255,.12);border-radius:6px;display:grid;place-items:center}
.disk-icon span{width:7px;height:7px;border-radius:50%;background:#777b84}
.disk-ok span{background:#aab4ae}.disk-warning span{background:#ff4355}
.disk-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.disk-main strong{font-size:8px;letter-spacing:1px}
.disk-main span{color:#6f737b;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disk-state{font-size:7px;font-weight:800;letter-spacing:.7px}.disk-state-ok{color:#8e9993}.disk-state-warning{color:#ff5263}
.disk-placeholder{color:#646871;font-size:9px;line-height:1.5;padding:13px 0 5px}
.storage-panel{display:flex;flex-direction:column;align-items:center}
.storage-chart{width:120px;height:120px;margin:10px auto 9px}
.donut{--used:50%;width:100%;height:100%;border-radius:50%;background:conic-gradient(#e9ebee 0 var(--used),#292d33 var(--used) 100%);display:grid;place-items:center}
.donut-hole{width:78%;height:78%;border-radius:50%;background:#0b0d11;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-hole strong{font-size:20px;line-height:1}.donut-hole span{margin-top:5px;color:#666a72;font-size:7px;font-weight:800;letter-spacing:1.3px}
.storage-meta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.storage-meta div{display:flex;flex-direction:column;gap:4px;padding-top:7px;border-top:1px solid rgba(255,255,255,.055)}
.storage-meta span{color:#666a72;font-size:7px;letter-spacing:1px}.storage-meta strong{font-size:9px}
.raid-status{display:inline-block;flex:none;padding:5px 8px;border-radius:6px;font-size:8px;font-weight:900;letter-spacing:1px}
.raid-ok{color:#d9dfe2;background:rgba(91,132,105,.14);border:1px solid rgba(91,132,105,.28)}
.raid-warning{color:#ff9da8;background:rgba(255,22,53,.10);border:1px solid rgba(255,22,53,.25)}
@media(max-width:900px){.nas-system-grid{grid-template-columns:1fr}}
@media(max-width:600px){.nas-system-body{grid-template-columns:1fr}.storage-panel{max-width:180px;margin:auto;width:100%}.nas-system-top{align-items:flex-start;flex-direction:column}}

/* ACCENTS COULEUR — touche Crobflix plus vivante, sans perdre le thème sombre */
:root{--red:#f00b18;--purple:#7b3ff2;--cyan:#20b8d8;--green:#49c78a}
.guide-card:nth-child(1){border-color:rgba(46,190,89,.18);box-shadow:0 14px 40px rgba(0,0,0,.25),0 0 0 1px rgba(46,190,89,.04)}
.guide-card:nth-child(1) .guide-number{color:#49c78a}
.guide-card:nth-child(2){border-color:rgba(88,166,255,.18);box-shadow:0 14px 40px rgba(0,0,0,.25),0 0 0 1px rgba(88,166,255,.04)}
.guide-card:nth-child(2) .guide-number{color:#58a6ff}
.guide-card:nth-child(3){border-color:rgba(0,174,239,.18);box-shadow:0 14px 40px rgba(0,0,0,.25),0 0 0 1px rgba(0,174,239,.04)}
.guide-card:nth-child(3) .guide-number{color:#00aeef}
.guide-button{background:linear-gradient(135deg,rgba(240,11,24,.95),rgba(123,63,242,.88));border-color:rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(123,63,242,.16)}
.guide-button:hover{box-shadow:0 10px 28px rgba(240,11,24,.22),0 0 22px rgba(123,63,242,.14)}
.server-box{border-color:rgba(123,63,242,.24);background:linear-gradient(120deg,rgba(240,11,24,.06),rgba(123,63,242,.08),rgba(32,184,216,.04))}
.copy-server{background:linear-gradient(135deg,#f00b18,#7b3ff2);border-color:transparent}
.latest-item:nth-child(1){border-top:2px solid rgba(240,11,24,.75)}
.latest-item:nth-child(2){border-top:2px solid rgba(123,63,242,.75)}
.latest-item:nth-child(3){border-top:2px solid rgba(32,184,216,.75)}
.latest-item:nth-child(4){border-top:2px solid rgba(73,199,138,.75)}
.latest-type{color:#ff4050}
.nas-system-card:first-child{border-top:2px solid rgba(240,11,24,.72)}
.nas-system-card:last-child{border-top:2px solid rgba(123,63,242,.72)}
.nas-system-card:first-child .nas-name{color:#ff4352}
.nas-system-card:last-child .nas-name{color:#a77cff}
.nas-system-card:first-child .donut{background:conic-gradient(#f00b18 0 var(--used),#2a1a21 var(--used) 100%)}
.nas-system-card:last-child .donut{background:conic-gradient(#7b3ff2 0 var(--used),#241b36 var(--used) 100%)}
.raid-ok{color:#72e1a7;background:rgba(73,199,138,.10);border-color:rgba(73,199,138,.28)}
.disk-ok span{background:#72e1a7}
.system-head h2{background:linear-gradient(90deg,#fff,#ff4352,#a77cff);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:650px){.guide-card:nth-child(1),.guide-card:nth-child(2),.guide-card:nth-child(3){box-shadow:none}}


/* ============================================================
   CROBFLIX — PALETTE UNIFORMISÉE
   Rouge = identité / action principale
   Violet = accent secondaire
   Vert = état système OK uniquement
   ============================================================ */

:root{
  --red:#f00b18;
  --purple:#7b3ff2;
  --green:#49c78a;
  --accent-red:#ff4050;
  --accent-purple:#a77cff;
  --dark-accent:#211018;
  --dark-purple:#1b1530;
}

/* Actions : même langage couleur */
.watch .icon{
  border-color:var(--red);
  color:var(--red);
  box-shadow:0 0 22px rgba(240,11,24,.14);
}
.request .icon{
  border-color:var(--purple);
  color:var(--purple);
  box-shadow:0 0 22px rgba(123,63,242,.14);
}
.watch .kicker,.watch .arrow{color:var(--accent-red)}
.request .kicker,.request .arrow{color:var(--accent-purple)}
.watch:hover{border-color:rgba(240,11,24,.65)}
.request:hover{border-color:rgba(123,63,242,.65)}

/* Derniers ajouts : alternance rouge/violet seulement */
.latest-item:nth-child(1),
.latest-item:nth-child(3){border-top-color:rgba(240,11,24,.75)}
.latest-item:nth-child(2),
.latest-item:nth-child(4){border-top-color:rgba(123,63,242,.75)}
.latest-type{color:var(--accent-red)}
.latest-more:hover{color:var(--accent-purple)}

/* Système : rouge pour l'identité, violet pour le second NAS.
   Le vert reste réservé aux états OK. */
.system:before{
  background:linear-gradient(180deg,var(--red),var(--purple));
  box-shadow:0 0 18px rgba(123,63,242,.22);
}
.system-title h2{
  background:linear-gradient(90deg,#fff,var(--accent-red),var(--accent-purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nas-system-card:first-child{
  border-top-color:rgba(240,11,24,.72);
}
.nas-system-card:last-child{
  border-top-color:rgba(123,63,242,.72);
}
.nas-system-card:first-child .nas-name{color:var(--accent-red)}
.nas-system-card:last-child .nas-name{color:var(--accent-purple)}

.nas-system-card:first-child .donut{
  background:conic-gradient(var(--red) 0 var(--used),var(--dark-accent) var(--used) 100%);
}
.nas-system-card:last-child .donut{
  background:conic-gradient(var(--purple) 0 var(--used),var(--dark-purple) var(--used) 100%);
}

/* RAID / disques : vert uniquement quand tout va bien */
.raid-ok{
  color:#72e1a7;
  background:rgba(73,199,138,.10);
  border-color:rgba(73,199,138,.28);
}
.disk-ok span{background:#72e1a7}
.disk-warning span{background:var(--red)}
.disk-state-warning{color:#ff5263}

/* Tutoriel : mêmes accents que l'accueil, pas de bleu/cyan/vert par plateforme */
.guide-card:nth-child(1),
.guide-card:nth-child(2),
.guide-card:nth-child(3){
  border-color:rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.guide-card:nth-child(1) .guide-number,
.guide-card:nth-child(3) .guide-number{color:var(--accent-red)}
.guide-card:nth-child(2) .guide-number{color:var(--accent-purple)}
.guide-card:nth-child(1) .guide-icon,
.guide-card:nth-child(3) .guide-icon{
  border-color:rgba(240,11,24,.30);
  box-shadow:0 0 18px rgba(240,11,24,.08);
}
.guide-card:nth-child(2) .guide-icon{
  border-color:rgba(123,63,242,.30);
  box-shadow:0 0 18px rgba(123,63,242,.08);
}
.guide-button{
  background:linear-gradient(135deg,var(--red),var(--purple));
  border-color:transparent;
}
.guide-button:hover{
  border-color:transparent;
  box-shadow:0 10px 28px rgba(123,63,242,.18);
}
.server-box{
  border-color:rgba(123,63,242,.24);
  background:linear-gradient(120deg,rgba(240,11,24,.06),rgba(123,63,242,.08));
}
.copy-server{
  background:linear-gradient(135deg,var(--red),var(--purple));
  border-color:transparent;
}
.copy-server:hover{border-color:transparent}

/* Logos plateformes : uniformisés, blancs avec halo de la palette */
.platform-logo{
  background:#0b0d11;
}
.guide-card:nth-child(1) .platform-logo{
  border-color:rgba(240,11,24,.35);
}
.guide-card:nth-child(2) .platform-logo{
  border-color:rgba(123,63,242,.35);
}
.guide-card:nth-child(3) .platform-logo{
  border-color:rgba(240,11,24,.35);
}
.platform-logo img{
  filter:brightness(0) invert(1);
}

/* Le texte de version reste discret */
.version{color:#666a72}

/* ============================================================
   CROBFLIX — PALETTE SOBRE ET UNIFORME
   Une seule couleur d'accent : rouge Crobflix.
   Violet retiré des éléments visuels principaux.
   Vert uniquement pour les états système OK.
   ============================================================ */

:root{
  --red:#c91522;
  --red-soft:#9f1822;
  --red-dark:#2a1115;
  --green:#5f9b78;
  --green-dark:#14231b;
  --surface:#101216;
  --surface-2:#0b0d10;
  --line:rgba(255,255,255,.075);
}

/* Tous les accents décoratifs deviennent rouges et discrets */
.watch .icon,
.request .icon{
  border-color:rgba(201,21,34,.45);
  color:#d23a45;
  box-shadow:0 0 18px rgba(201,21,34,.06);
}
.watch .kicker,.watch .arrow,
.request .kicker,.request .arrow{
  color:#c93440;
}
.watch:hover,.request:hover{
  border-color:rgba(201,21,34,.45);
}
.latest-item:nth-child(1),
.latest-item:nth-child(2),
.latest-item:nth-child(3),
.latest-item:nth-child(4){
  border-top-color:rgba(201,21,34,.45);
}
.latest-type{color:#c93440}
.latest-more:hover{color:#d23a45}

/* En-tête système */
.system-title h2{
  background:none;
  color:#f0f0f2;
}
.system:before{
  background:#c91522;
  box-shadow:none;
}

/* Les deux NAS utilisent exactement le même langage visuel */
.nas-system-card:first-child,
.nas-system-card:last-child{
  border-top-color:rgba(201,21,34,.50);
}
.nas-system-card:first-child .nas-name,
.nas-system-card:last-child .nas-name{
  color:#e2e2e5;
}

/* Camemberts : même rouge sur les deux NAS */
.nas-system-card:first-child .donut,
.nas-system-card:last-child .donut{
  background:conic-gradient(#c91522 0 var(--used),#29272a var(--used) 100%);
}

/* RAID et disques : vert réservé à l'état OK */
.raid-ok{
  color:#76aa8b;
  background:rgba(95,155,120,.08);
  border-color:rgba(95,155,120,.20);
}
.raid-warning{
  color:#d9656d;
  background:rgba(201,21,34,.08);
  border-color:rgba(201,21,34,.20);
}
.disk-ok span{background:#6c9d80}
.disk-warning span{background:#c91522}
.disk-state-ok{color:#718579}
.disk-state-warning{color:#d9656d}

/* Tutoriel : même rouge partout */
.guide-card:nth-child(1),
.guide-card:nth-child(2),
.guide-card:nth-child(3){
  border-color:rgba(255,255,255,.085);
}
.guide-card:nth-child(1) .guide-number,
.guide-card:nth-child(2) .guide-number,
.guide-card:nth-child(3) .guide-number{
  color:#c93440;
}
.guide-card:nth-child(1) .guide-icon,
.guide-card:nth-child(2) .guide-icon,
.guide-card:nth-child(3) .guide-icon{
  border-color:rgba(201,21,34,.22);
  box-shadow:none;
}
.guide-button{
  background:#b91521;
  border-color:#b91521;
  box-shadow:none;
}
.guide-button:hover{
  background:#c91522;
  border-color:#c91522;
  box-shadow:0 8px 22px rgba(201,21,34,.12);
}
.server-box{
  border-color:rgba(201,21,34,.18);
  background:rgba(201,21,34,.035);
}
.copy-server{
  background:#b91521;
  border-color:#b91521;
}
.copy-server:hover{
  background:#c91522;
  border-color:#c91522;
}

/* Logos : neutres, sans couleur propre à la plateforme */
.platform-logo{
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
.platform-logo img{
  filter:brightness(0) invert(1);
}

/* Pas de violet résiduel dans les éléments principaux */
[style*="#7b3ff2"],
[style*="#a77cff"],
[style*="123,63,242"],
[style*="123, 63, 242"]{
  color:#c91522 !important;
  border-color:rgba(201,21,34,.35) !important;
}

/* Version très discrète */
.version{
  color:#555860;
}


/* STATISTIQUES MÉDIATHÈQUE */
.library-stats{
  width:min(1120px,100%);
  margin:22px auto 0;
  padding:18px 22px 20px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(10,12,15,.92),rgba(4,5,7,.94));
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  position:relative;
}
.library-stats:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:4px;
  border-radius:0 6px 6px 0;
  background:var(--red);
  box-shadow:0 0 15px rgba(255,22,53,.45);
}
.library-stats-head{
  padding-left:13px;
  margin-bottom:14px;
}
.library-stats-head h2{
  margin:0;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:23px;
  letter-spacing:1.5px;
}
.library-stats-head p{
  margin:4px 0 0;
  color:#777b84;
  font-size:9px;
  letter-spacing:2px;
}
.library-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.library-stat{
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(2,3,5,.65);
}
.library-stat strong{
  font-size:27px;
  line-height:1;
  font-weight:800;
  letter-spacing:.5px;
}
.library-stat span{
  margin-top:7px;
  color:#777b84;
  font-size:8px;
  font-weight:800;
  letter-spacing:2px;
}

@media(max-width:650px){
  .library-stats{
    padding:16px 14px 17px;
  }
  .library-stats-grid{
    gap:7px;
  }
  .library-stat{
    min-height:66px;
  }
  .library-stat strong{
    font-size:22px;
  }
  .library-stat span{
    font-size:7px;
    letter-spacing:1.5px;
  }
}