@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#050609;
  --bg-rgb:5,6,9;
  --panel:#0a0b0f;
  --panel-rgb:10,11,15;
  --panel2:#0d0e13;
  --panel2-rgb:13,14,19;
  --border:#1a1d28;
  --border-rgb:26,29,40;
  --text:#f8f9fb;
  --muted:#8b90a0;
  --accent:#00e5ff;
  --accent-rgb:0,229,255;
  --accent2:#7c3aed;
  --accent2-rgb:124,58,237;
  --good:#10b981;
  --good-rgb:16,185,129;
  --bad:#ef4444;
  --bad-rgb:239,68,68;
  --warn:#f59e0b;
  --shadow:0 25px 50px -12px rgba(0,0,0,.85);
  --shadow-lg:0 35px 60px -15px rgba(0,0,0,.95);
  --radius:20px;
  --radius-sm:14px;
  --glow-accent:0 0 30px rgba(var(--accent-rgb),.3), 0 0 60px rgba(var(--accent-rgb),.15);
  --glow-accent2:0 0 30px rgba(var(--accent2-rgb),.3), 0 0 60px rgba(var(--accent2-rgb),.15);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Syne',ui-sans-serif,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  position:relative;
  line-height:1.5;
}

/* Background ultra moderne avec mesh gradient animé */
body::before{
  content:"";
  position:fixed;
  inset:-80px;
  background:
    radial-gradient(1000px 620px at 18% 12%, rgba(255,255,255,.035) 0%, transparent 62%),
    radial-gradient(980px 740px at 86% 18%, rgba(var(--accent-rgb),.075) 0%, transparent 64%),
    radial-gradient(980px 740px at 88% 82%, rgba(var(--border-rgb),.12) 0%, transparent 66%),
    radial-gradient(980px 740px at 14% 88%, rgba(var(--accent-rgb),.055) 0%, transparent 66%);
  opacity:.85;
  filter:blur(28px) saturate(120%);
  z-index:0;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0px, rgba(255,255,255,.008) 1px, transparent 2px),
    repeating-linear-gradient(90deg, transparent 0px, rgba(255,255,255,.008) 1px, transparent 2px);
  background-size:50px 50px;
  opacity:.4;
  z-index:0;
  pointer-events:none;
  animation:gridMove 30s linear infinite;
}

@keyframes gridMove{
  0%{
    transform:translate(0, 0);
  }
  100%{
    transform:translate(50px, 50px);
  }
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}

a:hover{
  color:var(--accent);
}

.container{
  max-width:1400px;
  margin:0 auto;
  padding:32px 24px;
  position:relative;
  z-index:1;
}

/* Topbar ultra premium */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 24px;
  background:rgba(var(--panel-rgb),.65);
  border:1px solid rgba(var(--border-rgb),1);
  border-radius:24px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px) saturate(180%);
  position:sticky;
  top:16px;
  z-index:100;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.3), rgba(var(--accent2-rgb),.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
}

.topbar:hover::before{
  opacity:1;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
}

.logo{
  width:44px;
  height:44px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.95), rgba(var(--accent2-rgb),.85));
  box-shadow:var(--glow-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  animation:logoFloat 3s ease-in-out infinite;
}

.logo::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(45deg, transparent, rgba(255,255,255,.4), transparent);
  animation:logoShine 3s ease-in-out infinite;
}

@keyframes logoFloat{
  0%, 100%{
    transform:translateY(0) rotate(0deg);
  }
  50%{
    transform:translateY(-4px) rotate(2deg);
  }
}

@keyframes logoShine{
  0%{
    transform:translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100%{
    transform:translateX(100%) translateY(100%) rotate(45deg);
  }
}

.brand h1{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.5px;
  margin:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.brand p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  font-family:'JetBrains Mono', monospace;
}

/* Boutons premium */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 20px;
  border-radius:14px;
  border:1px solid rgba(var(--border-rgb),1);
  background:rgba(var(--panel-rgb),.8);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  font-family:'Syne',sans-serif;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.2), rgba(var(--accent2-rgb),.1));
  opacity:0;
  transition:opacity .25s ease;
}

.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:0 10px 25px -5px rgba(var(--accent-rgb),.3);
}

.btn:hover::before{
  opacity:1;
}

.btn:active{
  transform:translateY(0);
}

.btn.primary{
  border:1px solid rgba(var(--accent-rgb),.8);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.25), rgba(var(--accent2-rgb),.15));
  box-shadow:var(--glow-accent);
  color:var(--text);
}

.btn.primary::after{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform:translateX(-100%);
  transition:transform .6s ease;
}

.btn.primary:hover::after{
  transform:translateX(100%);
}

.btn.primary:hover{
  box-shadow:var(--glow-accent), 0 15px 35px -10px rgba(var(--accent-rgb),.4);
}

.btn.secondary{
  border-color:rgba(var(--accent2-rgb),.6);
  background:linear-gradient(135deg, rgba(var(--accent2-rgb),.2), rgba(var(--panel-rgb),.8));
}

.btn.success{
  border-color:rgba(var(--good-rgb),.6);
  background:linear-gradient(135deg, rgba(var(--good-rgb),.2), rgba(var(--panel-rgb),.8));
}

.btn.success:hover{
  box-shadow:0 10px 25px -5px rgba(var(--good-rgb),.3);
}

.btn.danger{
  border-color:rgba(var(--bad-rgb),.6);
  background:linear-gradient(135deg, rgba(var(--bad-rgb),.2), rgba(var(--panel-rgb),.8));
}

.btn.danger:hover{
  box-shadow:0 10px 25px -5px rgba(var(--bad-rgb),.3);
}

.btn.ghost{
  background:transparent;
  border-color:transparent;
}

.btn.ghost:hover{
  background:rgba(var(--panel-rgb),.6);
  border-color:rgba(var(--border-rgb),.8);
}

.btn.sm{
  padding:8px 14px;
  font-size:12px;
  border-radius:12px;
}

/* Profile button stylé */
.profileBtn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px 8px 8px;
  border-radius:16px;
  border:1px solid rgba(var(--border-rgb),1);
  background:rgba(var(--panel2-rgb),.7);
  cursor:pointer;
  transition:all .25s ease;
}

.profileBtn:hover{
  background:rgba(var(--panel2-rgb),.9);
  border-color:rgba(var(--accent-rgb),.5);
  transform:scale(1.02);
}

.avatar{
  width:38px;
  height:38px;
  border-radius:14px;
  border:2px solid rgba(var(--accent-rgb),.4);
  object-fit:cover;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.2), rgba(var(--accent2-rgb),.2));
  box-shadow:0 0 15px rgba(var(--accent-rgb),.2);
}

.profileName{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  max-width:200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Dropdown menu amélioré */
.dropdown{
  position:relative;
}

.burgerBtn{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(var(--border-rgb),1);
  background:rgba(var(--panel2-rgb),.7);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  transition:all .25s ease;
}

.burgerBtn:hover{
  background:rgba(var(--panel2-rgb),.9);
  border-color:rgba(var(--accent-rgb),.5);
  transform:scale(1.02);
}

.burgerBtn span{
  width:20px;
  height:2px;
  background:rgba(255,255,255,.90);
  border-radius:999px;
  transition:transform .25s ease, opacity .25s ease, width .25s ease;
}

.dropdown.open .burgerBtn span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
  width:22px;
}
.dropdown.open .burgerBtn span:nth-child(2){
  opacity:0;
}
.dropdown.open .burgerBtn span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
  width:22px;
}

@media (max-width: 980px){
  .burgerBtn{display:inline-flex}
  .profileName{display:none}
}

.menu {
  position: absolute;
  /* 1. On ancre le menu juste sous le bouton (plus jamais de pixel fixe comme 54px) */
  top: 100%; 
  right: 0;
  
  /* 2. On ajoute une marge pour l'écarter un peu */
  margin-top: 12px; 
  
  min-width: 260px;
  background: rgba(var(--panel-rgb), .95);
  border: 1px solid rgba(var(--border-rgb), 1);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(180%);
  
  /* 3. L'ANIMATION CLÉ : On le fait partir de 10px plus BAS.
     Comme ça, il "remonte" vers sa place. Il ne spawn pas SUR ta souris. */
  transform: translateY(10px) scale(.95);
  
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 1000; /* Sécurité pour qu'il passe bien au-dessus de tout */
}

/* Quand il est ouvert */
.menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.menu::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.3), rgba(var(--accent2-rgb),.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.menu a, .menu button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:14px 18px;
  gap:12px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:all .2s ease;
  font-weight:500;
  font-family:'Syne',sans-serif;
}

/* Dans .menu a:hover */
.menu a:hover, .menu button:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .15), rgba(var(--accent2-rgb), .1));
  /* Réduis un peu le décalage si tu trouves ça trop violent, genre 18px au lieu de 22px */
  padding-left: 18px; 
}

.menu .hint{
  padding:14px 18px;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid rgba(var(--border-rgb),.8);
  background:rgba(var(--panel2-rgb),.5);
}

/* Grid layouts modernes */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(450px, 1fr));
  gap:24px;
  margin-top:24px;
}

@media (max-width: 980px){
  .grid{
    grid-template-columns:1fr;
  }
}

.dashTop{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:24px;
  margin-top:24px;
}

@media (max-width: 1200px){
  .dashTop{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 768px){
  .dashTop{
    grid-template-columns:1fr;
  }
}

/* Dashboard cards avec glassmorphism */
.dashCard{
  position:relative;
}

.dashCard .panelHeader{
  border-bottom:1px solid rgba(var(--border-rgb),.6);
  background:linear-gradient(180deg, rgba(var(--panel2-rgb),.5), transparent);
}

.statValue{
  font-size:36px;
  font-weight:800;
  letter-spacing:-1px;
  background:linear-gradient(135deg, var(--text), var(--muted));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
}

.statRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.chartWrap{
  width:100%;
  padding:12px 0;
}

.plSvg{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 4px 12px rgba(var(--accent-rgb),.2));
}

.plBg{
  fill:rgba(var(--panel2-rgb),.4);
}

.plText{
  fill:var(--muted);
  font-size:13px;
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}

/* Goal blocks avec animations */
.goalBlock{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius:16px;
  background:rgba(var(--panel2-rgb),.4);
  border:1px solid rgba(var(--border-rgb),.5);
  transition:all .3s ease;
}

.goalBlock:hover{
  background:rgba(var(--panel2-rgb),.6);
  border-color:rgba(var(--accent-rgb),.4);
  transform:translateX(4px);
}

.goalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.goalName{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:15px;
}

.goalMeta{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  font-family:'JetBrains Mono', monospace;
}

.progress{
  height:12px;
  border-radius:999px;
  background:rgba(var(--border-rgb),.4);
  overflow:hidden;
  position:relative;
}

.progress::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation:progressShimmer 2s linear infinite;
}

@keyframes progressShimmer{
  0%{
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(100%);
  }
}

.progressBar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),1), rgba(var(--accent2-rgb),.9));
  box-shadow:0 0 20px rgba(var(--accent-rgb),.5);
  position:relative;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}

.progressBar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation:progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow{
  0%, 100%{
    transform:translateX(-100%);
  }
  50%{
    transform:translateX(100%);
  }
}

/* Badges ultra stylés */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid rgba(var(--border-rgb),.8);
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.3px;
}

.badge.good{
  color:var(--good);
  border-color:rgba(var(--good-rgb),.5);
  background:linear-gradient(135deg, rgba(var(--good-rgb),.15), rgba(var(--good-rgb),.05));
  box-shadow:0 0 15px rgba(var(--good-rgb),.2);
}

.badge.bad{
  color:var(--bad);
  border-color:rgba(var(--bad-rgb),.5);
  background:linear-gradient(135deg, rgba(var(--bad-rgb),.15), rgba(var(--bad-rgb),.05));
  box-shadow:0 0 15px rgba(var(--bad-rgb),.2);
}

.badge.sniper{
  color:rgba(255,255,255,.95);
  border-color:rgba(var(--accent-rgb),.6);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.3), rgba(var(--accent2-rgb),.2));
  box-shadow:var(--glow-accent);
}

.good{color:var(--good)}
.bad{color:var(--bad)}

/* Panel ultra premium avec glassmorphism */
.panel{
  background:rgba(var(--panel-rgb),.6);
  border:1px solid rgba(var(--border-rgb),.8);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(30px) saturate(150%);
  position:relative;
  transition:all .3s ease;
}

.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(var(--accent-rgb),.12), transparent 70%),
    radial-gradient(600px 400px at 80% 100%, rgba(var(--accent2-rgb),.08), transparent 65%);
  opacity:.7;
  mix-blend-mode:screen;
}

.panel:hover{
  border-color:rgba(var(--accent-rgb),.4);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

.panelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:18px 24px;
  border-bottom:1px solid rgba(var(--border-rgb),.7);
  background:linear-gradient(180deg, rgba(var(--panel2-rgb),.6), rgba(var(--panel-rgb),.2));
  position:relative;
}

.panelHeader::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.3), transparent);
}

.panelTitle{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.panelTitle h2{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.3px;
}

.panelTitle span{
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}

.panelBody{
  padding:24px;
  position:relative;
}

/* Cards avec micro-interactions */
.cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  border:1px solid rgba(var(--border-rgb),.7);
  border-radius:var(--radius-sm);
  background:rgba(var(--panel2-rgb),.5);
  overflow:hidden;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.05), transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.card:hover{
  transform:translateX(6px);
  border-color:rgba(var(--accent-rgb),.5);
  background:rgba(var(--panel2-rgb),.7);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--accent-rgb),.2);
}

.card:hover::before{
  opacity:1;
}

.cardHead{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  position:relative;
  z-index:1;
}

.cardMain{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  flex:1;
}

.cardTop{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.symbol{
  font-weight:800;
  letter-spacing:-.3px;
  font-size:16px;
}

.muted{
  color:var(--muted);
  font-size:13px;
}

.cardMeta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
}

.cardRight{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Card body avec animation smooth */
.cardBody{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
  border-top:1px solid rgba(var(--border-rgb),.6);
  background:rgba(var(--panel2-rgb),.3);
}

.cardBodyInner{
  padding:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px 18px;
}

@media (max-width: 980px){
  .cardBodyInner{
    grid-template-columns:1fr;
  }
}

.kv{
  border:1px solid rgba(var(--border-rgb),.6);
  border-radius:14px;
  padding:14px;
  background:rgba(var(--panel-rgb),.3);
  transition:all .2s ease;
}

.kv:hover{
  background:rgba(var(--panel-rgb),.5);
  border-color:rgba(var(--accent-rgb),.4);
}

.kv .k{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:600;
  font-family:'JetBrains Mono', monospace;
}

.kv .v{
  font-size:14px;
  margin-top:6px;
  word-break:break-word;
  font-weight:600;
}

/* Forms ultra modernes */
.formGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:14px;
}

@media (max-width: 980px){
  .formGrid{
    grid-template-columns:1fr;
  }
}

label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}

input, select, textarea{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(var(--border-rgb),.8);
  background:rgba(var(--panel2-rgb),.6);
  color:var(--text);
  outline:none;
  transition:all .25s ease;
  font-family:'Syne',sans-serif;
  font-size:14px;
  font-weight:500;
}

input::placeholder, select::placeholder, textarea::placeholder{
  color:var(--muted);
  opacity:.6;
}

input:focus, select:focus, textarea:focus{
  border-color:rgba(var(--accent-rgb),.8);
  background:rgba(var(--panel2-rgb),.8);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1), 0 0 20px rgba(var(--accent-rgb),.2);
}

textarea{
  min-height:110px;
  resize:vertical;
  line-height:1.6;
}

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

.formActions.sticky{
  position:sticky;
  bottom:16px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(var(--border-rgb),.9);
  background:rgba(var(--bg-rgb),.85);
  backdrop-filter:blur(20px) saturate(180%);
  z-index:10;
  box-shadow:var(--shadow);
}

.formActions.sticky .btn{
  flex:1;
  min-width:180px;
}

.formActions.sticky .btn.sm{
  flex:0 0 auto;
  min-width:auto;
}

input[type=file]{
  padding:11px 14px;
  cursor:pointer;
}

input[type=file]::file-selector-button{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(var(--accent-rgb),.6);
  background:rgba(var(--accent-rgb),.15);
  color:var(--text);
  cursor:pointer;
  margin-right:12px;
  font-weight:600;
  transition:all .2s ease;
}

input[type=file]::file-selector-button:hover{
  background:rgba(var(--accent-rgb),.25);
  border-color:rgba(var(--accent-rgb),.8);
}

/* Notices modernes */
.notice{
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(var(--border-rgb),.8);
  background:rgba(var(--panel2-rgb),.6);
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  backdrop-filter:blur(10px);
}

.notice.good{
  border-color:rgba(var(--good-rgb),.5);
  background:rgba(var(--good-rgb),.1);
  color:#d1fae5;
}

.notice.bad{
  border-color:rgba(var(--bad-rgb),.5);
  background:rgba(var(--bad-rgb),.1);
  color:#fee2e2;
}

/* Auth layout repensé */
.authWrap{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:28px;
  align-items:start;
  margin-top:32px;
}

@media (max-width: 980px){
  .authWrap{
    grid-template-columns:1fr;
  }
}

/* Hero section ultra moderne */
.hero{
  padding:40px 32px;
  border-radius:24px;
  border:1px solid rgba(var(--border-rgb),.8);
  background:
    radial-gradient(1000px 600px at 30% 0%, rgba(var(--accent-rgb),.15), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(var(--accent2-rgb),.1), transparent 65%),
    linear-gradient(180deg, rgba(var(--panel-rgb),.5), rgba(var(--panel2-rgb),.3));
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.5), transparent);
}

.hero::after{
  content:"";
  position:absolute;
  inset:-100%;
  background:radial-gradient(circle at center, rgba(var(--accent-rgb),.15), transparent 50%);
  animation:heroGlow 8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes heroGlow{
  0%, 100%{
    transform:translate(0, 0) scale(1);
    opacity:.3;
  }
  50%{
    transform:translate(20px, -20px) scale(1.1);
    opacity:.5;
  }
}

.hero h2{
  margin:0 0 16px 0;
  font-size:32px;
  font-weight:800;
  letter-spacing:-1px;
  background:linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;
  position:relative;
  z-index:1;
}

.hero p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
  position:relative;
  z-index:1;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footerHint{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(var(--border-rgb),.5);
  color:var(--muted);
  font-size:12px;
  font-family:'JetBrains Mono', monospace;
  position:relative;
  z-index:1;
}

/* Animations de révélation */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, 20px, 0);
  filter:blur(10px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), 
             transform .7s cubic-bezier(.4,0,.2,1), 
             filter .7s cubic-bezier(.4,0,.2,1);
}

[data-reveal].in{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
}

/* Responsive amélioré */
@media (max-width: 768px){
  .container{
    padding:20px 16px;
  }
  
  .topbar{
    padding:12px 16px;
    border-radius:20px;
    top:12px;
  }
  
  .brand h1{
    font-size:16px;
  }
  
  .brand p{
    display:none;
  }
  
  .hero{
    padding:28px 24px;
  }
  
  .hero h2{
    font-size:24px;
  }
  
  .statValue{
    font-size:28px;
  }
  
  .panel{
    border-radius:18px;
  }
  
  .panelBody{
    padding:18px;
  }
}

/* Scrollbar personnalisée */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:rgba(var(--panel2-rgb),.5);
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.6), rgba(var(--accent2-rgb),.5));
  border-radius:10px;
  border:2px solid rgba(var(--panel2-rgb),.5);
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.8), rgba(var(--accent2-rgb),.7));
}

/* Selection personnalisée */
::selection{
  background:rgba(var(--accent-rgb),.3);
  color:var(--text);
}