/* ===== Connexion v2 : carte centrée + fonds animés ===== */
html,body{height:auto!important;min-height:100%;overflow-x:hidden;overflow-y:auto!important;background:#040106}
body main{display:grid!important;grid-template-columns:minmax(0,1fr)!important;place-items:center;min-height:100dvh;height:auto!important;max-width:none;padding:40px 16px!important;gap:0!important}
#f{display:none!important}

/* ---------- arrière-plan ---------- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(1200px 800px at 50% 40%,#1a050b,#040106 70%)}
.fx .blob{position:absolute;border-radius:50%;will-change:transform;transform:translateZ(0)}
.fx .b1{width:620px;height:620px;left:-140px;top:-120px;background:radial-gradient(circle,#e5303cb0 0,#e5303c55 35%,transparent 68%);animation:fx-drift1 17s ease-in-out infinite alternate}
.fx .b2{width:540px;height:540px;right:-160px;top:18%;background:radial-gradient(circle,#b01a2ab0 0,#8f142055 35%,transparent 68%);animation:fx-drift2 21s ease-in-out infinite alternate}
.fx .b3{width:480px;height:480px;left:30%;bottom:-220px;background:radial-gradient(circle,#ff4d5880 0,#ff4d5833 35%,transparent 68%);animation:fx-drift3 19s ease-in-out infinite alternate}
@keyframes fx-drift1{to{transform:translate(220px,160px) scale(1.2)}}
@keyframes fx-drift2{to{transform:translate(-240px,120px) scale(.85)}}
@keyframes fx-drift3{to{transform:translate(180px,-140px) scale(1.25)}}
.fx .floor{position:absolute;left:-50%;right:-50%;bottom:-6%;height:62%;overflow:hidden;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
.fx .floor::before{content:"";position:absolute;left:0;right:0;top:-64px;bottom:0;background-image:linear-gradient(#ff4d5833 1px,transparent 1px),linear-gradient(90deg,#ff4d5833 1px,transparent 1px);background-size:64px 64px;will-change:transform;animation:fx-floor 5s linear infinite}
@keyframes fx-floor{to{transform:translateY(64px)}}}
.fx .spot{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px;border-radius:50%;background:radial-gradient(circle,#ff4d5835,transparent 62%);transform:translate(var(--mx,50vw),var(--my,40vh));transition:transform .18s ease-out}
.fx .ringx{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid #ff4d5826;transform:translate(-50%,-50%)}
.fx .rx1{width:760px;height:760px;border-style:dashed;animation:fx-spin 70s linear infinite}
.fx .rx2{width:1060px;height:1060px;border-color:#ff4d5818;}
.fx .rx3{width:520px;height:520px;border-color:#ff4d5833;animation:fx-pulse 4.5s ease-in-out infinite}
@keyframes fx-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes fx-pulse{50%{transform:translate(-50%,-50%) scale(1.08);border-color:#ff4d5866}}
.fx canvas{position:absolute;inset:0;width:100%;height:100%}
.fx::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,#000a 100%)}
.bg{display:none}

/* ---------- carte ---------- */
body main .card{width:min(440px,100%);margin:0 auto;padding:34px 34px 28px;border-radius:28px;
  background:linear-gradient(160deg,#2a0b11f2,#0b0508f7 60%);
  border:1px solid #ff4d5833;
  box-shadow:0 50px 120px #000d,0 0 90px #e5303c33,inset 0 1px 0 #ffffff1c;transform-style:preserve-3d;transition:transform .25s ease-out;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
body main .card::before{border-radius:28px;animation:none!important;background:linear-gradient(160deg,#ff4d5877,transparent 40%,#ff4d5822)}
body main .card{will-change:transform}
body main .card .cl{flex-direction:column;gap:12px;margin-bottom:18px;text-align:center}
body main .card .cl .bx{width:66px;height:66px;border-radius:20px;border-color:#ff4d5888;box-shadow:0 0 34px #e5303c77,inset 0 1px 0 #ffffff22;animation:fx-float 4.5s ease-in-out infinite}
body main .card .bx>.xgpt-logo{width:46px;height:50px}
@keyframes fx-float{50%{transform:translateY(-5px)}}
body main .card .lg{font-size:22px!important;letter-spacing:.02em}
body main .card h1{font-size:27px;text-align:center}
body main .card .sub{text-align:center;font-size:13px;margin-top:10px}
body main .card .chips{display:none}
body main .card .tabs{margin-top:20px}
body main .card .tabs button{padding:11px;font-size:13.5px}
body main .card .soc{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
body main .card .sb{padding:11px 8px;font-size:12px;border-radius:12px}
body main .card .note{font-size:10.5px;margin:9px 0 12px}
body main .card .or{font-size:11px;margin-bottom:12px;letter-spacing:.04em}
body main .card .f{height:50px;margin-bottom:11px;padding:0 15px;border-radius:14px;background:#0a0508cc;border-color:#ff4d5833}
body main .card .f input{font-size:14px}
body main .card .f:focus-within{transform:translateY(-1px)}
body main .card .go{height:52px;margin-top:6px;border-radius:14px;font-size:15px;letter-spacing:.01em}
body main .card #status{font-size:12px;min-height:18px;margin:6px 0 2px;text-align:center}
body main .card .ft{font-size:13px;margin-top:14px}

/* apparition */
body main .card{animation:fx-in .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-in{from{opacity:0;transform:perspective(1100px) translateY(30px) scale(.96)}}
body main .card>*{animation:fx-up .6s both}
body main .card>.cl{animation-delay:.1s}body main .card>h1{animation-delay:.18s}body main .card>.sub{animation-delay:.24s}body main .card>.tabs{animation-delay:.3s}body main .card>.soc{animation-delay:.36s}body main .card>form{animation-delay:.44s}
@keyframes fx-up{from{opacity:0;transform:translateY(14px)}}
@media(max-width:480px){body main .card{padding:26px 20px 22px}body main .card .soc{grid-template-columns:1fr}.fx .rx1,.fx .rx2{display:none}}

/* Connexion Google : bouton officiel pleine largeur, Discord en dessous */
body main .card .soc{grid-template-columns:1fr!important;gap:10px}
body main .card .soc .gwrap{min-height:44px}
body main .card .soc .gwrap.gerr{display:grid;place-items:center;padding:10px;border:1px dashed #ff4d5855;color:#ffb0b6;font-size:12px;line-height:1.4}