/* ══════════════════════════════════════════════════════
   BotNoob — Ultra Modern Gaming Dark/Violet
   ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&family=JetBrains+Mono:wght@400;600&display=swap');

@property --glow-size { syntax:'<length>'; initial-value:0px; inherits:false; }
@property --border-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root {
  --xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --sm:clamp(.875rem,.8rem + .35vw,1rem);
  --base:clamp(1rem,.95rem + .25vw,1.125rem);
  --lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;--sp5:1.25rem;
  --sp6:1.5rem;--sp8:2rem;--sp10:2.5rem;--sp12:3rem;--sp16:4rem;
  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-2xl:1.5rem;--r-full:9999px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.4,0,1,1);
  --t:200ms var(--ease);
  --font:"Inter","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",monospace;
  --bg:#070710;
  --s0:#0c0c1a;
  --s1:#101022;
  --s2:#15152e;
  --s3:#1a1a38;
  --bd:rgba(139,92,246,.13);
  --bdh:rgba(139,92,246,.45);
  --tx:#e8e6f8;
  --txm:#7a78a8;
  --txf:#3c3a60;
  --pr:#7c3aed;
  --prh:#6d28d9;
  --prl:#a78bfa;
  --prd:#4c1d95;
  --prg:rgba(124,58,237,.2);
  --prgg:rgba(124,58,237,.07);
  --ok:#10b981;--okb:rgba(16,185,129,.12);
  --wa:#f59e0b;--wab:rgba(245,158,11,.12);
  --er:#ef4444;--erb:rgba(239,68,68,.12);
  --cyan:#06b6d4;
  --sh1:0 2px 8px rgba(0,0,0,.6);
  --sh2:0 8px 32px rgba(0,0,0,.6);
  --sh3:0 20px 60px rgba(0,0,0,.7);
  --glow:0 0 30px rgba(124,58,237,.35),0 0 60px rgba(124,58,237,.15);
  --glow-sm:0 0 14px rgba(124,58,237,.25);
  --glow-cyan:0 0 20px rgba(6,182,212,.3);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font);font-size:var(--sm);color:var(--tx);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none;color:inherit}
img{display:block;max-width:100%;height:auto}
input,select,textarea,button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pr);outline-offset:3px;border-radius:var(--r-sm)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--prg);border-radius:var(--r-full)}
::-webkit-scrollbar-track{background:transparent}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ════════════════════════════════
   CANVAS PARTICLES BACKGROUND
   ════════════════════════════════ */
#particles-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.6;
}

/* ════════════════════════════════
   AMBIENT GLOW ORBS
   ════════════════════════════════ */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orb-drift linear infinite}
.orb-1{
  width:700px;height:700px;top:-200px;left:-100px;
  background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);
  animation-duration:18s;
}
.orb-2{
  width:500px;height:500px;top:30%;right:-150px;
  background:radial-gradient(circle,rgba(167,139,250,.09),transparent 70%);
  animation-duration:24s;animation-delay:-8s;
}
.orb-3{
  width:400px;height:400px;bottom:-100px;left:40%;
  background:radial-gradient(circle,rgba(6,182,212,.07),transparent 70%);
  animation-duration:20s;animation-delay:-4s;
}
@keyframes orb-drift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.05)}
  66%{transform:translate(-20px,40px) scale(.95)}
  100%{transform:translate(0,0) scale(1)}
}

/* ════════════════════════════════
   NAVBAR
   ════════════════════════════════ */
.top{
  display:flex;align-items:center;gap:var(--sp4);padding:0 var(--sp8);height:64px;
  background:rgba(7,7,16,.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:500;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.top.scrolled{
  background:rgba(7,7,16,.92);border-color:rgba(124,58,237,.25);
  box-shadow:0 4px 32px rgba(0,0,0,.5),0 1px 0 rgba(124,58,237,.1);
}
.logo{
  display:flex;align-items:center;gap:var(--sp2);font-weight:900;
  font-size:1.1rem;letter-spacing:-.035em;margin-right:auto;color:var(--tx);
  transition:color .2s;
}
.logo-text span{color:var(--prl)}
.logo:hover{color:var(--prl)}
.logo-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 10px var(--ok),0 0 20px rgba(16,185,129,.4);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.4}}
.top-nav{display:flex;gap:4px}
.top-link{
  padding:var(--sp2) var(--sp3);border-radius:var(--r-md);color:var(--txm);
  font-size:var(--sm);font-weight:500;border:1px solid transparent;
  transition:all .2s var(--ease);position:relative;overflow:hidden;
}
.top-link::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pr),var(--prl));
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s var(--ease);
}
.top-link:hover::before,.top-link.on::before{transform:scaleX(1)}
.top-link:hover,.top-link.on{background:var(--prgg);color:var(--prl)}
.av{
  width:36px;height:36px;border-radius:50%;border:2px solid var(--pr);
  object-fit:cover;box-shadow:var(--glow-sm);
  transition:all .2s var(--ease);
}
.av:hover{transform:scale(1.1);box-shadow:var(--glow)}

/* ════════════════════════════════
   BUTTONS
   ════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp2);
  padding:var(--sp2) var(--sp5);border-radius:var(--r-lg);
  font-size:var(--sm);font-weight:700;border:1px solid transparent;
  transition:all .2s var(--ease);cursor:pointer;white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  opacity:0;transition:opacity .2s;
}
.btn:hover::after{opacity:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
/* Primary — glowing */
.btn-p{
  background:linear-gradient(135deg,var(--pr),var(--prh));color:#fff;
  box-shadow:0 4px 20px rgba(124,58,237,.3);
}
.btn-p:hover{box-shadow:0 8px 32px rgba(124,58,237,.5),var(--glow-sm)}
/* Ghost */
.btn-g{background:rgba(255,255,255,.04);color:var(--txm);border-color:var(--bd)}
.btn-g:hover{background:var(--prgg);color:var(--prl);border-color:var(--bdh)}
/* Danger */
.btn-d{background:var(--erb);color:var(--er);border-color:rgba(239,68,68,.2)}
.btn-d:hover{background:var(--er);color:#fff;box-shadow:0 4px 20px rgba(239,68,68,.4)}
/* Success */
.btn-s{background:var(--okb);color:var(--ok);border-color:rgba(16,185,129,.2)}
.btn-s:hover{background:var(--ok);color:#fff}
.btn-sm{padding:calc(var(--sp1)*1.5) var(--sp3);font-size:var(--xs)}
.btn-xs{padding:var(--sp1) var(--sp3);font-size:var(--xs)}

/* ════════════════════════════════
   CARDS — Glassmorphism
   ════════════════════════════════ */
.card{
  background:rgba(12,12,26,.7);backdrop-filter:blur(12px);
  border:1px solid var(--bd);border-radius:var(--r-2xl);padding:var(--sp6);
  box-shadow:var(--sh1);transition:all .3s var(--ease);position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse at 0% 0%,rgba(124,58,237,.08),transparent 55%);
  pointer-events:none;
}
.card:hover{border-color:rgba(124,58,237,.3);box-shadow:var(--sh2),0 0 0 1px rgba(124,58,237,.1)}
.card-t{font-weight:800;font-size:var(--base);margin-bottom:var(--sp5);display:flex;align-items:center;gap:var(--sp2);color:var(--prl);letter-spacing:-.01em}

/* ════════════════════════════════
   NEON BORDER CARD (animée)
   ════════════════════════════════ */
.card-neon{
  position:relative;background:rgba(12,12,26,.8);border-radius:var(--r-2xl);padding:var(--sp6);
}
.card-neon::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(var(--border-angle),var(--pr),var(--prl),var(--cyan),var(--pr));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  animation:border-rotate 4s linear infinite;
}
@keyframes border-rotate{to{--border-angle:360deg}}

/* ════════════════════════════════
   FORMS
   ════════════════════════════════ */
.fg{margin-bottom:var(--sp4)}
.lbl{display:block;font-size:var(--xs);font-weight:700;color:var(--txm);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp2)}
.inp,.sel,.ta{
  width:100%;background:rgba(21,21,46,.8);border:1px solid var(--bd);
  border-radius:var(--r-lg);padding:var(--sp3) var(--sp4);
  color:var(--tx);font-size:var(--sm);outline:none;
  transition:all .2s var(--ease);
}
.inp:hover,.sel:hover{border-color:rgba(124,58,237,.3)}
.inp:focus,.sel:focus,.ta:focus{
  border-color:var(--pr);box-shadow:0 0 0 3px rgba(124,58,237,.15),var(--glow-sm);
  background:rgba(21,21,46,.95);
}
.ta{resize:vertical;min-height:88px}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:var(--sp10)}
.hint{font-size:var(--xs);color:var(--txf);margin-top:var(--sp1)}

/* ════════════════════════════════
   BADGES
   ════════════════════════════════ */
.bx{display:inline-flex;align-items:center;gap:3px;padding:3px var(--sp2);border-radius:var(--r-full);font-size:var(--xs);font-weight:700}
.bx-ok{background:var(--okb);color:var(--ok);box-shadow:0 0 8px rgba(16,185,129,.15)}
.bx-er{background:var(--erb);color:var(--er)}
.bx-pr{background:var(--prg);color:var(--prl)}
.bx-wa{background:var(--wab);color:var(--wa)}

/* ════════════════════════════════
   TABLE
   ════════════════════════════════ */
.tw{overflow-x:auto;border-radius:var(--r-xl);border:1px solid var(--bd)}
table{width:100%;border-collapse:collapse}
thead{background:rgba(21,21,46,.9)}
th{padding:var(--sp3) var(--sp4);text-align:left;font-size:var(--xs);font-weight:700;color:var(--txm);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:var(--sp3) var(--sp4);font-size:var(--sm);border-bottom:1px solid var(--bd)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--prgg)}

/* ════════════════════════════════
   TAGS
   ════════════════════════════════ */
.tags{display:flex;flex-wrap:wrap;gap:var(--sp2);padding:var(--sp2) var(--sp3);background:rgba(21,21,46,.8);border:1px solid var(--bd);border-radius:var(--r-lg);min-height:44px;align-items:center;cursor:text;transition:all .2s}
.tags:focus-within{border-color:var(--pr);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.tag{background:var(--erb);color:var(--er);border-radius:var(--r-full);padding:3px var(--sp2);font-size:var(--xs);font-weight:700;display:flex;align-items:center;gap:4px;animation:tag-pop .2s var(--ease)}
@keyframes tag-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.tag button{opacity:.5;font-size:14px;line-height:1;transition:opacity .15s}.tag button:hover{opacity:1}
.tag-in{border:none;outline:none;background:transparent;color:var(--tx);font-size:var(--sm);min-width:80px;flex:1}

/* ════════════════════════════════
   LOGS
   ════════════════════════════════ */
.logs{display:flex;flex-direction:column;gap:var(--sp2);overflow-y:auto;padding-right:2px}
.le{
  display:flex;gap:var(--sp3);padding:var(--sp2) var(--sp3);
  background:rgba(16,16,34,.8);border-radius:var(--r-md);font-size:var(--xs);
  border-left:2px solid var(--pr);animation:slide-in-left .25s var(--ease);
  transition:background .15s;
}
.le:hover{background:var(--prgg)}
@keyframes slide-in-left{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}
.lt{font-family:var(--mono);color:var(--txf);flex-shrink:0;min-width:56px}
.la{color:var(--txm);word-break:break-word}

/* ════════════════════════════════
   KPI CARDS
   ════════════════════════════════ */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp4);margin-bottom:var(--sp8)}
.kpi{
  background:rgba(12,12,26,.8);border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:var(--sp5);position:relative;overflow:hidden;
  transition:all .3s var(--ease);
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pr),var(--prl),var(--pr),transparent);
  background-size:300% 100%;animation:kpi-shine 3s linear infinite;
}
@keyframes kpi-shine{0%{background-position:100% 0}100%{background-position:-200% 0}}
.kpi::after{
  content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;
  border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);
  transition:transform .3s var(--ease),opacity .3s;opacity:0;
}
.kpi:hover::after{transform:scale(2);opacity:1}
.kpi:hover{border-color:rgba(124,58,237,.4);box-shadow:var(--glow),inset 0 0 30px rgba(124,58,237,.03);transform:translateY(-4px)}
.kl{font-size:10px;color:var(--txm);font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--sp2)}
.kv{font-family:var(--mono);font-size:var(--xl);font-weight:900;line-height:1;color:var(--prl)}

/* ════════════════════════════════
   GRID
   ════════════════════════════════ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp6)}
@media(max-width:860px){.g2{grid-template-columns:1fr}}

/* ════════════════════════════════
   TOAST
   ════════════════════════════════ */
#tc{position:fixed;bottom:var(--sp6);right:var(--sp6);display:flex;flex-direction:column;gap:var(--sp2);z-index:9999;pointer-events:none}
.toast{
  background:rgba(12,12,26,.95);backdrop-filter:blur(16px);
  border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:var(--sp3) var(--sp5);font-size:var(--sm);font-weight:500;
  box-shadow:var(--sh3);display:flex;align-items:center;gap:var(--sp3);
  pointer-events:auto;min-width:240px;animation:toast-in .4s var(--ease);
}
.toast.out{animation:toast-out .25s var(--ease-out) forwards}
@keyframes toast-in{from{transform:translateX(120%) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-out{to{transform:translateX(120%) scale(.85);opacity:0}}
.tok{border-left:3px solid var(--ok)}.ter{border-left:3px solid var(--er)}.twa{border-left:3px solid var(--wa)}
.toast-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--pr);border-radius:var(--r-full);animation:toast-progress 3.5s linear forwards}
@keyframes toast-progress{from{width:100%}to{width:0%}}

/* ════════════════════════════════
   CODE
   ════════════════════════════════ */
code{background:rgba(21,21,46,.9);border:1px solid var(--bd);padding:2px 6px;border-radius:var(--r-sm);font-family:var(--mono);font-size:.82em;color:var(--prl)}

/* ════════════════════════════════
   SIDEBAR
   ════════════════════════════════ */
.sidebar{
  background:rgba(12,12,26,.85);backdrop-filter:blur(16px);
  border-right:1px solid var(--bd);padding:var(--sp4) 0;
  position:sticky;top:64px;height:calc(100dvh - 64px);overflow-y:auto;
  display:flex;flex-direction:column;
}
.si{
  display:flex;align-items:center;gap:var(--sp3);padding:var(--sp2) var(--sp5);
  color:var(--txm);width:100%;text-align:left;font-size:var(--sm);
  border-left:2px solid transparent;border:none;background:none;cursor:pointer;
  transition:all .2s var(--ease);border-left:2px solid transparent;
}
.si:hover{background:rgba(124,58,237,.08);color:var(--prl);padding-left:calc(var(--sp5) + 4px);border-left-color:rgba(124,58,237,.4)}
.si.active{background:rgba(124,58,237,.1);color:var(--prl);border-left-color:var(--pr);font-weight:700;padding-left:calc(var(--sp5) + 4px)}
.si-icon{font-size:1.1rem;width:20px;text-align:center}

/* ════════════════════════════════
   HERO
   ════════════════════════════════ */
.hero{
  min-height:calc(100dvh - 64px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:var(--sp16) var(--sp6);position:relative;z-index:2;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:var(--sp2);
  padding:var(--sp2) var(--sp5);border-radius:var(--r-full);
  background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);
  font-size:var(--xs);color:var(--prl);font-weight:700;
  margin-bottom:var(--sp6);letter-spacing:.06em;text-transform:uppercase;
  animation:badge-in .7s var(--ease) both;
  box-shadow:0 0 20px rgba(124,58,237,.1),inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes badge-in{from{opacity:0;transform:translateY(-12px) scale(.95)}to{opacity:1;transform:none}}

.hero h1{
  font-size:clamp(3rem,8vw,6.5rem);font-weight:900;
  letter-spacing:-.055em;line-height:1.0;margin-bottom:var(--sp6);
  animation:hero-title .9s var(--ease) .1s both;
}
.hero h1 .grad{
  background:linear-gradient(135deg,#fff 0%,var(--prl) 40%,var(--cyan) 80%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% 200%;animation:grad-shift 5s ease infinite;
}
@keyframes grad-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hero-title{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero p{
  font-size:var(--base);color:var(--txm);max-width:580px;margin-bottom:var(--sp10);
  line-height:1.75;animation:hero-sub .9s var(--ease) .22s both;
}
@keyframes hero-sub{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-btns{display:flex;gap:var(--sp3);flex-wrap:wrap;justify-content:center;animation:hero-btns .9s var(--ease) .38s both}
@keyframes hero-btns{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:var(--sp8);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp2);
  color:var(--txf);font-size:var(--xs);animation:hero-btns .9s var(--ease) .7s both;
}
.scroll-hint-line{
  width:1px;height:40px;background:linear-gradient(to bottom,var(--pr),transparent);
  animation:scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.1)}}

/* ════════════════════════════════
   STATS BAND
   ════════════════════════════════ */
.stats-band{
  display:flex;justify-content:center;gap:var(--sp10);flex-wrap:wrap;
  padding:var(--sp10) var(--sp6);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(6,182,212,.03));
  position:relative;z-index:2;
}
.stat-item{text-align:center}
.stat-num{font-family:var(--mono);font-size:var(--xl);font-weight:900;color:var(--prl);line-height:1}
.stat-lbl{font-size:var(--xs);color:var(--txm);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;font-weight:600}

/* ════════════════════════════════
   FEATURES
   ════════════════════════════════ */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--sp5);padding:var(--sp12) var(--sp6) var(--sp16);
  max-width:1100px;margin:0 auto;position:relative;z-index:2;
}
.feat{
  padding:var(--sp6);border-radius:var(--r-2xl);
  background:rgba(12,12,26,.7);border:1px solid var(--bd);
  transition:all .3s var(--ease);position:relative;overflow:hidden;
  backdrop-filter:blur(10px);
}
.feat::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(124,58,237,.12),transparent 50%,rgba(6,182,212,.06));
  opacity:0;transition:opacity .3s;
}
.feat:hover::after{opacity:1}
.feat:hover{border-color:rgba(124,58,237,.35);box-shadow:var(--glow);transform:translateY(-6px)}
.feat>*{position:relative;z-index:1}
.feat-icon{
  font-size:2.4rem;margin-bottom:var(--sp4);display:inline-block;
  transition:transform .35s var(--ease);
}
.feat:hover .feat-icon{transform:scale(1.25) rotate(-8deg)}
.feat h3{font-size:var(--base);font-weight:800;margin-bottom:var(--sp2);color:var(--prl);letter-spacing:-.015em}
.feat p{font-size:var(--sm);color:var(--txm);line-height:1.65}

/* Fade-in au scroll */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.visible{opacity:1;transform:none}

/* ════════════════════════════════
   COMMANDS SECTION
   ════════════════════════════════ */
.commands-section{
  max-width:900px;margin:0 auto;padding:0 var(--sp6) var(--sp16);
  position:relative;z-index:2;
}
.section-title{
  font-size:var(--xl);font-weight:900;letter-spacing:-.04em;text-align:center;
  margin-bottom:var(--sp3);color:var(--tx);
}
.section-sub{font-size:var(--base);color:var(--txm);text-align:center;margin-bottom:var(--sp10)}
.cmd-grid{display:flex;flex-direction:column;gap:var(--sp2)}
.cmd{
  display:flex;align-items:center;gap:var(--sp4);padding:var(--sp3) var(--sp4);
  background:rgba(12,12,26,.7);border:1px solid var(--bd);border-radius:var(--r-lg);
  transition:all .2s var(--ease);
}
.cmd:hover{border-color:var(--bdh);background:var(--prgg);transform:translateX(4px)}
.cmd-name{font-family:var(--mono);font-size:var(--sm);color:var(--prl);font-weight:600;min-width:120px}
.cmd-desc{font-size:var(--sm);color:var(--txm)}

/* ════════════════════════════════
   DASHBOARD SERVER GRID
   ════════════════════════════════ */
.srv-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp4);padding:var(--sp8) var(--sp6);
}
.srv{
  background:rgba(12,12,26,.75);backdrop-filter:blur(10px);
  border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:var(--sp5);display:flex;align-items:center;gap:var(--sp4);
  transition:all .25s var(--ease);cursor:pointer;overflow:hidden;position:relative;
}
.srv::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 0% 50%,rgba(124,58,237,.08),transparent 60%);
  opacity:0;transition:opacity .25s;
}
.srv:hover::before{opacity:1}
.srv:hover{border-color:var(--bdh);box-shadow:var(--glow);transform:translateY(-4px)}
.srv-icon{width:52px;height:52px;border-radius:var(--r-lg);object-fit:cover;flex-shrink:0;border:1px solid var(--bd);transition:box-shadow .25s}
.srv:hover .srv-icon{box-shadow:0 0 16px rgba(124,58,237,.4)}
.srv-name{font-weight:800;font-size:var(--sm);margin-bottom:3px;letter-spacing:-.01em}
.srv-meta{font-size:var(--xs);color:var(--txm)}
.srv-arrow{color:var(--txf);transition:transform .25s var(--ease),color .2s}
.srv:hover .srv-arrow{transform:translateX(3px);color:var(--prl)}

/* ════════════════════════════════
   PAGE HEADER
   ════════════════════════════════ */
.page-hdr{
  padding:var(--sp10) var(--sp8) var(--sp6);
  border-bottom:1px solid var(--bd);
  background:linear-gradient(135deg,rgba(124,58,237,.04),transparent);
}
.page-hdr h1{font-size:var(--xl);font-weight:900;letter-spacing:-.04em;margin-bottom:6px}
.page-hdr p{color:var(--txm);font-size:var(--sm)}

/* ════════════════════════════════
   ERROR PAGE
   ════════════════════════════════ */
.err-page{min-height:calc(100dvh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp5);position:relative;z-index:2}
.err-code{font-family:var(--mono);font-size:8rem;font-weight:900;color:var(--pr);opacity:.2;line-height:1;animation:float-code 5s ease-in-out infinite}
@keyframes float-code{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
.err-msg{font-size:var(--lg);font-weight:800;color:var(--prl);letter-spacing:-.02em}

/* ════════════════════════════════
   FOOTER
   ════════════════════════════════ */
footer{
  position:relative;z-index:2;
  border-top:1px solid var(--bd);
  padding:var(--sp10) var(--sp8) var(--sp8);
  background:rgba(7,7,16,.8);backdrop-filter:blur(12px);
}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp10);margin-bottom:var(--sp10)}
.footer-brand{}
.footer-logo{display:flex;align-items:center;gap:var(--sp2);font-weight:900;font-size:1.05rem;color:var(--prl);margin-bottom:var(--sp3)}
.footer-desc{font-size:var(--sm);color:var(--txm);line-height:1.7;max-width:300px}
.footer-col h4{font-size:var(--xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--txf);margin-bottom:var(--sp4)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp2)}
.footer-col a{font-size:var(--sm);color:var(--txm);transition:color .2s}
.footer-col a:hover{color:var(--prl)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp4);
  padding-top:var(--sp6);border-top:1px solid var(--bd);
}
.footer-copy{font-size:var(--xs);color:var(--txf)}
.footer-copy span{color:var(--prl);font-weight:700}
.footer-status{display:flex;align-items:center;gap:var(--sp2);font-size:var(--xs);color:var(--txm)}
.dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse-dot 2s infinite;display:inline-block}
@media(max-width:700px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}}

/* ════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════ */
.progress-bar{height:3px;background:var(--s2);border-radius:var(--r-full);overflow:hidden;margin-top:var(--sp2)}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--pr),var(--prl));border-radius:var(--r-full);transition:width .5s var(--ease),background .3s}

/* ════════════════════════════════
   DIVIDER
   ════════════════════════════════ */
.div{height:1px;background:var(--bd);margin:var(--sp4) 0}

/* ════════════════════════════════
   MISC
   ════════════════════════════════ */
.skeleton{background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 50%,var(--s1) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media(max-width:640px){
  .top{padding:0 var(--sp4)}.top-nav{display:none}
  .hero h1{font-size:2.6rem}.hero p{font-size:var(--sm)}
  .features,.commands-section{padding-left:var(--sp4);padding-right:var(--sp4)}
  .stats-band{gap:var(--sp6);padding:var(--sp8) var(--sp4)}
  .srv-grid{padding:var(--sp4)}
  .footer-top{grid-template-columns:1fr}
}

/* ════════════════════════════════
   DIFFUSION — Éditeur & Annonces
════════════════════════════════ */

.fmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  background: var(--s2);
  border-radius: var(--r-md);
  padding: .6rem;
  margin-bottom: .75rem;
  border: 1px solid var(--bd);
}

.fmt-btn {
  padding: .35rem .7rem;
  border-radius: var(--r-sm);
  background: var(--s3);
  color: var(--tx);
  border: 1px solid var(--bd);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.fmt-btn:hover {
  background: var(--pr);
  border-color: var(--pr);
  color: #fff;
  box-shadow: var(--glow-sm);
}

.fmt-btn.mono {
  font-family: var(--mono);
  font-size: .8rem;
}

.fmt-btn.fmt-mention {
  background: var(--prg);
  color: var(--prl);
  border-color: rgba(124,58,237,.4);
  font-weight: 600;
}

.fmt-btn.fmt-mention:hover {
  background: var(--pr);
  color: #fff;
}

.fmt-preview-label {
  font-size: .8rem;
  color: var(--txm);
  margin: .75rem 0 .35rem;
  font-weight: 500;
}

.fmt-preview {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  min-height: 64px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--tx);
  margin-bottom: .75rem;
  word-break: break-word;
  transition: border-color .2s;
}

.fmt-preview:hover {
  border-color: var(--bdh);
}

.fmt-preview pre {
  background: var(--s3);
  padding: .6rem;
  border-radius: var(--r-sm);
  margin: .4rem 0;
  overflow-x: auto;
}

.fmt-preview code {
  background: var(--s3);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--prl);
}

.fmt-preview blockquote {
  border-left: 3px solid var(--pr);
  padding-left: .75rem;
  color: var(--txm);
  margin: .3rem 0;
}

.spoiler-preview {
  background: var(--s3);
  color: var(--s3);
  border-radius: 3px;
  cursor: pointer;
  transition: color .2s;
  padding: .1rem .3rem;
  user-select: none;
}

.spoiler-preview:hover {
  color: var(--tx);
}

/* Ligne envoi manuel */
.broadcast-send-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Annonces automatiques */
.auto-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: .7rem 1rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
  transition: border-color .2s;
}

.auto-item:hover {
  border-color: var(--bdh);
}

.auto-info {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  flex: 1;
}

.auto-msg-preview {
  color: var(--txm);
  font-size: .85rem;
  font-style: italic;
}

.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
}

.badge-purple {
  background: var(--prg);
  color: var(--prl);
  border: 1px solid rgba(124,58,237,.3);
}

.badge-gray {
  background: var(--s3);
  color: var(--txm);
  border: 1px solid var(--bd);
}

/* Responsive */
@media(max-width:640px) {
  .fmt-toolbar { gap: .3rem; }
  .fmt-btn { padding: .3rem .5rem; font-size: .78rem; }
  .broadcast-send-row { flex-direction: column; }
  .auto-item { flex-direction: column; align-items: flex-start; }
}