:root{
  --bg:#05070d;
  --bg-2:#0a0e1a;
  --panel:rgba(16,22,38,0.76);
  --panel-strong:rgba(18,26,46,0.92);
  --text:#e9f3ff;
  --muted:#8aa0bc;
  --cyan:#00eaff;
  --violet:#8a5cff;
  --pink:#ff3b8d;
  --green:#3cff9a;
  --gold:#ffd84d;
  --border:rgba(0,234,255,0.22);
  --border-dim:rgba(255,255,255,0.08);
  --cut:22px;
  --cut-sm:10px;
  --font-display:"Oxanium",sans-serif;
  --font-mono:"Share Tech Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  background:
    linear-gradient(180deg, rgba(0,234,255,0.06) 0%, transparent 22%),
    linear-gradient(90deg, rgba(138,92,255,0.08) 0%, transparent 40%),
    radial-gradient(1200px 600px at 70% -10%, rgba(0,234,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(138,92,255,0.14), transparent 60%),
    var(--bg);
  font-family:var(--font-display);
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(0,234,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:100% 26px, 26px 100%;
  opacity:0.22;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.015) 2px 3px);
  mix-blend-mode:overlay;
}

/* utilities - NO ROUNDED */
*{border-radius:0 !important}

/* HEADER */
.hub-header{
  padding:2.2rem 0 1.4rem; text-align:center;
  border-bottom:1px solid var(--border-dim);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  position:relative;
}
.hub-brand{display:grid; justify-items:center; gap:0.7rem; max-width:960px; margin:0 auto}
.hub-logo-main{
  width:min(380px, 84vw); height:auto;
  filter:drop-shadow(0 0 20px rgba(138,92,255,0.32)) drop-shadow(0 0 14px rgba(0,234,255,0.22));
  transition:transform .2s ease;
}
.hub-logo-main:hover{transform:translateY(-2px)}
.hub-overline{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#bfefff; padding:.38rem .9rem;
  border:1px solid var(--border); background:rgba(0,234,255,0.08);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  display:inline-flex; align-items:center; gap:.5rem;
}
.hub-overline::before{content:""; width:7px; height:7px; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.8s infinite}
.hub-subtitle{color:var(--muted); font-family:var(--font-mono); font-size:.9rem; max-width:720px; margin:0; opacity:.9}

/* NAV - centered + badge left, quicks right */
.hub-nav-shell{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(18px) saturate(1.3);
  background:rgba(5,7,13,0.86);
  border-bottom:1px solid var(--border-dim);
  box-shadow:0 8px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hub-nav-layout{
  display:grid;
  grid-template-columns: 200px 1fr 320px;
  align-items:center;
  gap:1rem;
  padding:.75rem 0;
  max-width:1360px; margin:0 auto;
}
.hub-nav-left{display:flex; align-items:center; gap:.6rem}
.hub-nav{
  list-style:none; margin:0; padding:0;
  display:flex; gap:.45rem; justify-content:center; flex-wrap:wrap;
}
.hub-link-v2{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.62rem 1.1rem;
  font-family:var(--font-mono); font-size:.80rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--muted);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-dim);
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition:all .16s ease;
}
.hub-link-v2:hover{color:#fff; background:rgba(255,255,255,0.08); border-color:rgba(0,234,255,0.28); transform:translateY(-1px)}
.hub-link-v2.active{
  color:#06101a;
  background:linear-gradient(90deg, var(--violet), var(--cyan));
  border-color:transparent;
  box-shadow:0 0 18px rgba(0,234,255,0.28);
}
.hub-nav-right{display:flex; align-items:center; gap:.5rem; justify-content:flex-end; flex-wrap:wrap}
.hub-quick{
  font-family:var(--font-mono); font-size:.76rem; font-weight:800;
  padding:.58rem .9rem; text-decoration:none;
  border:1px solid var(--border-dim); transition:all .16s;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.hub-quick:hover{transform:translateY(-1px)}
.hub-quick-shop{background:linear-gradient(90deg,#ffd166,#ffef9a); color:#1a1300; border-color:rgba(255,209,102,0.35)}
.hub-quick-discord{background:rgba(138,92,255,0.16); color:#dde6ff; border-color:rgba(138,92,255,0.28)}
.hub-quick-tiktok{background:#000; color:#fff; border-color:rgba(255,255,255,0.18)}
.hub-quick-twitch{background:rgba(145,70,255,0.15); color:#e8d9ff; border-color:rgba(145,70,255,0.3)}
.hub-quick-youtube{background:rgba(255,0,0,0.12); color:#ffbaba; border-color:rgba(255,0,0,0.25)}

.stream-badge{
  font-family:var(--font-mono); font-size:.72rem; font-weight:800; letter-spacing:.08em;
  padding:.55rem .85rem;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-dim);
  display:inline-flex; align-items:center; gap:.45rem; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.stream-badge::before{content:""; width:8px; height:8px; background:currentColor}
.stream-badge.is-live{color:var(--green); border-color:rgba(60,255,154,0.35); box-shadow:0 0 12px rgba(60,255,154,0.2)}
.stream-badge.is-live::before{animation:pulse 1.2s infinite}
.stream-badge.is-offline{color:#ff8da2}
.stream-badge.is-loading{color:var(--gold)}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.5); opacity:.6}}

/* SHELL - datapad cut top-right bottom-left + glass vista */
.shell{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--panel);
  border:1px solid var(--border-dim);
  backdrop-filter:blur(14px) saturate(1.2);
  padding:clamp(1.2rem,2.2vw,1.8rem);
  box-shadow:0 18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  overflow:hidden;
}
.shell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 18%, transparent 32%),
    linear-gradient(135deg, rgba(138,92,255,0.10), transparent 40%, rgba(0,234,255,0.08));
  opacity:.9;
}
.shell::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.6;
}
.kicker{
  font-family:var(--font-mono); font-size:.70rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.32rem .7rem; background:rgba(0,234,255,0.10); border:1px solid var(--border); color:#bfefff;
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
h2{font-size:clamp(2rem,3.8vw,3rem); margin:.6rem 0 .4rem}
.lead{color:var(--muted); font-size:1.02rem; line-height:1.5}

/* GRIDS */
.container{max-width:1360px; margin:0 auto; padding:0 1rem}
main.container{padding:2rem 1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--border-dim);
  padding:1.1rem; position:relative;
  backdrop-filter:blur(10px);
  clip-path:polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.card:hover{transform:translateY(-2px); border-color:rgba(0,234,255,0.22); box-shadow:0 10px 24px rgba(0,0,0,0.3)}
.card::before{content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(255,255,255,0.08), transparent 30%); pointer-events:none}

/* TWITCH - player left chat right separated by 1.5mm ~ 5.7px */
.twitch-layout{
  display:grid; grid-template-columns: 1.65fr .9fr;
  gap:6px; margin-top:1.4rem;
}
.player-box{
  background:#0b1020; border:1px solid var(--border-dim);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  overflow:hidden; position:relative;
}
.player-box::after{content:"REC • TWITCH"; position:absolute; top:8px; left:10px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; background:rgba(0,0,0,0.7); border:1px solid rgba(255,0,80,0.4); color:#ff5a7a; padding:.2rem .45rem; z-index:2}
.player-box iframe{width:100%; aspect-ratio:16/9; border:0; display:block}
#twitch-chat{aspect-ratio:auto; height:100%; min-height:480px}

/* planning special */
.mini-chip{font-family:var(--font-mono); font-size:.68rem; padding:.25rem .55rem; background:rgba(255,255,255,0.06); border:1px solid var(--border-dim); color:var(--muted); display:inline-flex; clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px))}
.planning-card{border-left:2px solid var(--violet); display:grid; gap:.4rem}
.planning-card.active{border-left-color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(0,234,255,0.12)}
.planning-card.off{opacity:.6}
.btn{
  font-family:var(--font-mono); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:.68rem 1rem; border:1px solid var(--border-dim);
  background:rgba(255,255,255,0.06); color:#fff; cursor:pointer; transition:all .16s;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.btn-primary{background:linear-gradient(90deg,var(--violet),var(--cyan)); color:#06101a; border-color:transparent; box-shadow:0 0 16px rgba(0,234,255,0.22)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,0.04)}
.btn-small{padding:.42rem .7rem; font-size:.72rem}

/* forms */
input,textarea,select{
  width:100%; background:rgba(8,12,22,0.92) !important;
  border:1px solid var(--border-dim) !important; color:var(--text) !important;
  font-family:var(--font-mono) !important; padding:.9rem !important;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--cyan) !important; box-shadow:0 0 0 2px rgba(0,234,255,0.15)}

/* bio */
.bio-hero{display:grid; grid-template-columns: 360px 1fr; gap:1.2rem; align-items:start}
.bio-photo-wrap{position:relative; border:1px solid var(--border-dim); background:#0a0f1e; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); padding:6px}
.bio-photo-wrap img{width:100%; height:auto; display:block; filter:saturate(1.05) contrast(1.05)}
.bio-flag{position:absolute; top:10px; right:10px; width:44px; height:30px; border:1px solid rgba(255,255,255,0.4); box-shadow:0 4px 12px rgba(0,0,0,0.5); background:linear-gradient(90deg,#002395 0 33%, #fff 33% 66%, #ED2939 66% 100%); display:flex; align-items:center; justify-content:center}
.bio-stats{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}

/* reveal */
.reveal{opacity:0; transform:translateY(12px); transition:all .45s ease}
.reveal.visible{opacity:1; transform:translateY(0)}

/* livre d'or dynamic */
.guestbook-grid{display:grid; grid-template-columns: 380px 1fr; gap:1rem; align-items:start}
.guestbook-rating-wrap{display:grid; gap:.35rem}
.guestbook-stars{display:flex; gap:.25rem}
.guestbook-star{appearance:none; border:0; background:transparent; font-size:2rem; line-height:1; cursor:pointer; color:#444; opacity:.55; transition:all .12s; padding:.1rem}
.guestbook-star.is-active{color:#ffd54a; opacity:1; text-shadow:0 0 12px rgba(255,213,74,.55)}
.guestbook-star:hover{transform:scale(1.15)}

/* contact */
.contact-grid{display:grid; grid-template-columns: 1fr 380px; gap:1rem}

/* admin */
.admin-login{max-width:420px; margin:3rem auto}
.admin-panel{display:none}
.admin-panel.is-open{display:block}
.admin-tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}

/* stats */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.stat{padding:1rem; background:rgba(255,255,255,0.03); border:1px solid var(--border-dim); clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))}
.stat strong{display:block; font-size:1.6rem; color:var(--cyan)}

/* responsive */
@media(max-width:1100px){
  .hub-nav-layout{grid-template-columns:1fr; gap:.6rem}
  .hub-nav-left{justify-content:center}
  .hub-nav-right{justify-content:center}
  .twitch-layout{grid-template-columns:1fr}
  #twitch-chat{min-height:420px}
  .bio-hero{grid-template-columns:1fr}
  .guestbook-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
}


/* NAV FIX V3.2 - socials inline + shop far right */
.hub-nav-right{display:flex; align-items:center; gap:.5rem; justify-content:flex-end}
.quick-socials{display:flex; gap:.45rem; align-items:center; flex-wrap:nowrap}
.hub-quick-shop{margin-left:14px; position:relative}
.hub-quick-shop::before{content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:1px; height:18px; background:rgba(255,255,255,0.12)}
@media(max-width:1100px){
  .hub-nav-right{flex-wrap:wrap; justify-content:center}
  .hub-quick-shop{margin-left:0}
  .hub-quick-shop::before{display:none}
}


/* === DROPDOWN BIO -> SETUP + LEGAL MODAL + ADMIN FIX V3.4 === */
.has-sub{position:relative}
.has-sub > a::after{content:" ▾"; font-size:.65rem; margin-left:.3rem; opacity:.7}
.submenu{
  list-style:none; margin:0; padding:.45rem;
  position:absolute; top:100%; left:0; min-width:210px;
  background:rgba(5,7,13,0.97);
  border:1px solid rgba(0,234,255,0.22);
  box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 18px rgba(0,234,255,0.12);
  backdrop-filter:blur(14px) saturate(1.2);
  display:none; z-index:300;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.has-sub:hover > .submenu, .has-sub:focus-within > .submenu{display:grid; gap:.35rem}
.submenu li{list-style:none}
.submenu a{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem;
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  background:rgba(255,255,255,0.03); border:1px solid var(--border-dim);
}
.submenu a:hover{color:#fff; background:rgba(0,234,255,0.10); border-color:rgba(0,234,255,0.28)}
.submenu a::before{content:"▶"; font-size:.55rem; color:var(--cyan)}

.legal-modal{position:fixed; inset:0; display:none; z-index:9999; place-items:center; padding:1rem}
.legal-modal.is-open{display:grid}
.legal-modal-bg{position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(6px)}
.legal-modal-box{position:relative; max-width:640px; width:100%; max-height:85vh; overflow:auto; animation:legalIn .35s ease}
@keyframes legalIn{from{transform:translateY(18px) scale(.98); opacity:0}to{transform:translateY(0) scale(1); opacity:1}}

/* Admin panel fix - override inline display:none */
.admin-panel.is-open{display:block !important}
.admin-panel{position:relative}


/* === SETUP MOTHERBOARD V4 - Unique layout inside PC === */
.motherboard-shell{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,234,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(138,92,255,0.03) 1px, transparent 1px),
    radial-gradient(800px 400px at 20% 10%, rgba(0,234,255,0.08), transparent 60%),
    radial-gradient(600px 300px at 80% 90%, rgba(138,92,255,0.10), transparent 60%),
    #080c18;
  border-color: rgba(0,234,255,0.22);
}
.motherboard-shell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(0,234,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,234,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity:0.15;
}
.motherboard{
  position:relative;
  display:grid;
  grid-template-columns: 340px 1fr 160px;
  grid-template-rows: 340px 180px 200px;
  grid-template-areas:
    "cpu chipset ram"
    "ssd io ram"
    "gpu gpu gpu";
  gap:14px;
  padding:14px;
  background: 
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2)),
    repeating-linear-gradient(90deg, rgba(0,234,255,0.03) 0 2px, transparent 2px 40px),
    #0d1326;
  border:1px solid rgba(0,234,255,0.18);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 30px rgba(0,0,0,0.6);
}
.mobo-block{
  position:relative;
  background: linear-gradient(180deg, rgba(16,22,38,0.88), rgba(10,14,28,0.96));
  border:1px solid var(--border-dim);
  padding:14px;
  overflow:hidden;
}
.mobo-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  opacity:0.8;
}
.mobo-cpu{ grid-area:cpu; display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1/1; }
.mobo-cpu .cpu-socket{
  width:210px; height:210px; position:relative;
  background: radial-gradient(circle at 50% 50%, #1a233f 0%, #0e152b 70%);
  border:2px solid rgba(0,234,255,0.25);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05);
  display:grid; place-items:center;
}
.mobo-cpu .cpu-socket::before{
  content:""; position:absolute; inset:8px; border:1px dashed rgba(0,234,255,0.18);
}
.mobo-ram{ grid-area:ram; display:flex; flex-direction:column; gap:12px; }
.mobo-ram-stack{ display:flex; gap:12px; height:100%; justify-content:center; }
.ram-stick-v{
  width:58px; height:100%; background: linear-gradient(180deg, #111a33, #0a0f1e);
  border:1px solid rgba(255,255,255,0.08); position:relative; display:flex; flex-direction:column; align-items:center; padding:6px 4px;
}
.ram-stick-v::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:70%; height:3px; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.ram-bar-v{ width:12px; flex:1; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.08); margin-top:8px; position:relative; overflow:hidden; }
.ram-fill-v{ position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(180deg, var(--cyan), var(--violet)); box-shadow:0 0 10px rgba(0,234,255,0.5); transition:height 0.2s; }
.mobo-chipset{ grid-area:chipset; }
.mobo-ssd{ grid-area:ssd; }
.mobo-io{ grid-area:io; }
.mobo-gpu{ grid-area:gpu; display:grid; grid-template-columns: 1fr 180px; gap:12px; align-items:center; min-height:180px; }
.gpu-board{ height:120px; background: linear-gradient(90deg, #0f1832, #121c3a); border:1px solid rgba(0,234,255,0.15); position:relative; display:flex; align-items:center; padding:0 16px; gap:16px; }
.gpu-fans-h{ display:flex; gap:18px; }
.gpu-fan-h{ width:74px; height:74px; border-radius:50%; background:radial-gradient(circle, #1e2a4a, #0a0f1e); border:1px solid rgba(255,255,255,0.08); position:relative; overflow:hidden; }
.fan-blades-h{ position:absolute; inset:6px; background: conic-gradient(from 0deg, rgba(0,234,255,0.8) 0deg 30deg, transparent 30deg 90deg, rgba(138,92,255,0.8) 90deg 120deg, transparent 120deg 180deg, rgba(0,234,255,0.6) 180deg 210deg, transparent 210deg 270deg, rgba(255,59,141,0.6) 270deg 300deg, transparent 300deg 360deg); border-radius:50%; animation:spin 0.9s linear infinite; }
.ventirad-outer{ width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, #1a2545, #0a0f1e); border:2px solid rgba(0,234,255,0.18); display:grid; place-items:center; position:relative; }
.ventirad-blades{ width:88%; height:88%; border-radius:50%; background: conic-gradient(from 0deg, #00eaff 0deg 40deg, transparent 40deg 120deg, #8a5cff 120deg 160deg, transparent 160deg 240deg, #00eaff 240deg 280deg, transparent 280deg 360deg); animation:spin 0.8s linear infinite; }
.ventirad-center{ position:absolute; width:44px; height:44px; background:#05070d; border:1px solid var(--border); display:grid; place-items:center; font-family:var(--font-mono); font-size:.75rem; color:var(--cyan); }
.ssd-bar{ width:100%; height:10px; background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.08); margin-top:8px; position:relative; overflow:hidden; }
.ssd-fill{ height:100%; background:linear-gradient(90deg, var(--cyan), var(--green)); box-shadow:0 0 10px rgba(0,234,255,0.4); }
.pcb-trace{ position:absolute; top:12px; left:0; width:100%; height:2px; background:linear-gradient(90deg, transparent, rgba(0,234,255,0.3), transparent); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(max-width:1100px){
  .motherboard{ grid-template-columns:1fr; grid-template-areas:"cpu" "ram" "chipset" "ssd" "io" "gpu"; grid-template-rows:auto; }
  .mobo-ram-stack{ flex-direction:row; height:220px; }
  .ram-stick-v{ width:50%; height:200px; }
  .mobo-gpu{ grid-template-columns:1fr; }
}


/* === SEASONAL SKINS AUTO - V3.5 === */
#seasonal-banner{
  position:fixed; top:0; left:0; right:0; z-index:9998;
  text-align:center; padding:.35rem .8rem;
  font-family:var(--font-mono); font-size:.78rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; pointer-events:none;
  backdrop-filter: blur(8px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,0.12);
  animation:seasonalSlide .6s ease;
}
@keyframes seasonalSlide{ from{ transform:translateY(-100%); opacity:0 } to{ transform:translateY(0); opacity:1 } }

#seasonal-particles{
  position:fixed; inset:0; pointer-events:none; z-index:9997; overflow:hidden;
}
.season-particle{
  position:absolute; top:-10%; font-size:1.2rem; line-height:1;
  animation:particleFall linear infinite;
  will-change:transform;
}
@keyframes particleFall{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0deg); opacity:0 }
  10%{ opacity:1 }
  90%{ opacity:1 }
  100%{ transform:translateY(110vh) translateX(40px) rotate(360deg); opacity:0 }
}

/* THEME OVERRIDES PER SEASON */
body[data-season="printemps"]{
  --cyan:#2dff8a; --violet:#ff8ad6; --pink:#ff5ca1;
}
body[data-season="printemps"] .hub-overline{ background:rgba(45,255,138,0.12); border-color:rgba(45,255,138,0.28); color:#b6ffda; }
body[data-season="printemps"] #seasonal-banner{ background:linear-gradient(90deg, rgba(45,255,138,0.18), rgba(255,138,214,0.18)); color:#0a2a1a; border-color:rgba(45,255,138,0.35); }

body[data-season="ete"]{
  --cyan:#ffd84d; --violet:#ff8a3d; --gold:#ffe87a;
}
body[data-season="ete"]{ background: radial-gradient(1200px 600px at 70% -10%, rgba(255,216,77,0.14), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(255,138,61,0.14), transparent 60%), var(--bg); }
body[data-season="ete"] .hub-overline{ background:rgba(255,216,77,0.14); border-color:rgba(255,216,77,0.35); color:#fff6b0; }
body[data-season="ete"] #seasonal-banner{ background:linear-gradient(90deg, rgba(255,216,77,0.22), rgba(255,138,61,0.22)); color:#2a1f00; }

body[data-season="automne"]{
  --cyan:#ff9a3d; --violet:#c85c14; --pink:#ff6b2d;
}
body[data-season="automne"]{ background: radial-gradient(1000px 500px at 20% 0%, rgba(255,154,61,0.12), transparent 60%), radial-gradient(800px 400px at 80% 10%, rgba(200,92,20,0.12), transparent 60%), #0c0704; }
body[data-season="automne"] #seasonal-banner{ background:linear-gradient(90deg, rgba(255,154,61,0.22), rgba(200,92,20,0.22)); color:#fff; }

body[data-season="hiver"]{
  --cyan:#7de2ff; --violet:#a5b8ff;
}
body[data-season="hiver"]{ background: radial-gradient(1200px 600px at 50% -10%, rgba(125,226,255,0.10), transparent 60%), linear-gradient(180deg, rgba(165,184,255,0.06), transparent 40%), #050a14; }
body[data-season="hiver"] #seasonal-banner{ background:linear-gradient(90deg, rgba(125,226,255,0.18), rgba(165,184,255,0.18)); color:#06101a; }

body[data-season="halloween"]{
  --cyan:#ff8a1a; --violet:#8a2cff; --pink:#ff3b1f;
}
body[data-season="halloween"]{ background: radial-gradient(900px 500px at 10% 0%, rgba(255,138,26,0.16), transparent 60%), radial-gradient(700px 400px at 90% 0%, rgba(138,44,255,0.18), transparent 60%), #0d0600; }
body[data-season="halloween"] .hub-logo-main{ filter:drop-shadow(0 0 22px rgba(255,138,26,0.45)) drop-shadow(0 0 14px rgba(138,44,255,0.35)); }
body[data-season="halloween"] #seasonal-banner{ background:linear-gradient(90deg, rgba(255,138,26,0.28), rgba(138,44,255,0.28)); color:#fff; text-shadow:0 0 8px rgba(0,0,0,0.6); }

body[data-season="noel"]{
  --cyan:#3cff9a; --violet:#ff3b3b; --green:#3cff9a;
}
body[data-season="noel"]{ background: radial-gradient(800px 400px at 30% -10%, rgba(60,255,154,0.12), transparent 60%), radial-gradient(800px 400px at 70% -10%, rgba(255,59,59,0.10), transparent 60%), #05100a; }
body[data-season="noel"] .hub-overline{ background:rgba(60,255,154,0.12); border-color:rgba(60,255,154,0.28); }
body[data-season="noel"] #seasonal-banner{ background:linear-gradient(90deg, rgba(60,255,154,0.22), rgba(255,59,59,0.22)); color:#fff; }

body[data-season="nouvel-an"]{
  --cyan:#ffd84d; --violet:#8a5cff; --gold:#ffe87a;
}
body[data-season="nouvel-an"]{ background: radial-gradient(600px 300px at 20% 0%, rgba(255,216,77,0.18), transparent 60%), radial-gradient(600px 300px at 80% 0%, rgba(138,92,255,0.18), transparent 60%), #0a0814; }
body[data-season="nouvel-an"] #seasonal-banner{ background:linear-gradient(90deg, rgba(255,216,77,0.28), rgba(138,92,255,0.28)); color:#1a1300; }

body[data-season="saint-valentin"]{
  --cyan:#ff8ab8; --violet:#ff3b8d; --pink:#ff2d6b;
}
body[data-season="saint-valentin"]{ background: radial-gradient(800px 400px at 50% -10%, rgba(255,59,141,0.16), transparent 60%), radial-gradient(600px 300px at 0% 0%, rgba(255,138,184,0.14), transparent 60%), #14050a; }
body[data-season="saint-valentin"] .hub-logo-main{ filter:drop-shadow(0 0 20px rgba(255,59,141,0.45)) drop-shadow(0 0 14px rgba(255,138,184,0.32)); }
body[data-season="saint-valentin"] #seasonal-banner{ background:linear-gradient(90deg, rgba(255,59,141,0.22), rgba(255,138,184,0.22)); color:#fff; }

body[data-season="fete-musique"]{
  --cyan:#00eaff; --violet:#ff3b8d; --pink:#ffd84d;
}
body[data-season="fete-musique"]{ background: radial-gradient(900px 500px at 20% 0%, rgba(0,234,255,0.14), transparent 60%), radial-gradient(900px 500px at 80% 0%, rgba(255,59,141,0.14), transparent 60%), radial-gradient(600px 300px at 50% 0%, rgba(255,216,77,0.12), transparent 60%), var(--bg); }
body[data-season="fete-musique"] #seasonal-banner{ background:linear-gradient(90deg, rgba(0,234,255,0.22), rgba(255,59,141,0.22), rgba(255,216,77,0.22)); color:#06101a; font-weight:900; }