/* ══════════════════════════════════════════════
   SKYLANDS — Auth Modal
══════════════════════════════════════════════ */

.auth-nav-btn {
  width:36px; height:36px; border-radius:10px;
  background:var(--night-4); border:1px solid var(--line);
  color:var(--t2); font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s; flex-shrink:0; position:relative;
}
.auth-nav-btn:hover { border-color:var(--line-blue); background:rgba(79,142,247,.1); }
.auth-nav-btn--on {
  border-radius:10px;
  background:linear-gradient(135deg,#0f2044,#1d4ed8,#0891b2);
  border-color:rgba(59,130,246,.6);
  color:#fff; font-weight:700; font-size:.85rem;
  font-family:'Rajdhani',sans-serif;
  box-shadow:
    0 0 0 1px rgba(6,182,212,.2),
    0 0 12px rgba(59,130,246,.5),
    0 2px 8px rgba(0,0,0,.4);
}
/* Coin doré sur le bouton connecté */
.auth-nav-btn--on::after {
  content:''; position:absolute;
  top:-2px; right:-2px; width:8px; height:8px;
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  border-radius:0 8px 0 5px;
  box-shadow:0 0 6px rgba(245,158,11,.7);
}

#auth-wrap {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding:16px;
  /* Fond solide - pas de transparence, pas de backdrop-filter */
  background:#04070f;
}
#auth-bg { display:none; }

#auth-box {
  position:relative; z-index:1;
  isolation:isolate;
  width:100%; max-width:400px;
  background:#0a1020;
  border:1px solid rgba(79,142,247,.25);
  border-radius:16px; overflow:hidden;
  max-height:94vh; overflow-y:auto;
  box-shadow:0 0 0 1px rgba(79,142,247,.06), 0 32px 80px rgba(0,0,0,.8);
}
#auth-box::before {
  content:''; display:block; height:2px;
  background:linear-gradient(90deg,transparent,#1d4ed8 20%,#3b82f6 40%,#06b6d4 50%,#3b82f6 60%,#1d4ed8 80%,transparent);
}
#auth-box::-webkit-scrollbar{width:3px;}
#auth-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px;}

#auth-x {
  position:absolute; top:12px; right:12px; z-index:10;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4); font-size:.75rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
#auth-x:hover{background:rgba(255,255,255,.12);color:#fff;transform:rotate(90deg);}

.am-panel { flex-direction:column; align-items:center; padding:28px 26px 26px; }

.am-title {
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:1.3rem; color:#f1f5ff; margin-bottom:4px; text-align:center;
}
.am-sub { font-size:.8rem; color:rgba(255,255,255,.35); text-align:center; margin-bottom:22px; }
.am-note { font-weight:400; font-size:.63rem; color:#3b82f6; text-transform:none; letter-spacing:0; }

.am-err {
  display:none; width:100%; padding:10px 13px; border-radius:8px;
  font-size:.78rem; line-height:1.5; margin-bottom:12px;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); color:#fca5a5;
}

.am-field { width:100%; margin-bottom:12px; }
.am-field label {
  display:block; font-size:.6rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:6px;
}
.am-inp-w { position:relative; display:flex; align-items:center; }
.am-ico { position:absolute; left:12px; font-size:.88rem; pointer-events:none; opacity:.5; }
.am-inp-w input {
  width:100%; padding:12px 40px 12px 36px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px; color:#f1f5ff;
  font-size:.87rem; font-family:inherit; outline:none; transition:all .2s;
}
.am-inp-w input::placeholder { color:rgba(255,255,255,.2); }
.am-inp-w input:focus {
  border-color:rgba(59,130,246,.5);
  background:rgba(59,130,246,.06);
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.am-eye {
  position:absolute; right:10px; background:none; border:none;
  cursor:pointer; font-size:.84rem; color:rgba(255,255,255,.25); padding:4px; transition:color .2s;
}
.am-eye:hover{color:rgba(255,255,255,.7);}

.pwd-bar-wrap{display:flex;align-items:center;gap:8px;width:100%;margin:-4px 0 12px;}
.pwd-bar{flex:1;height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.pwd-bar div{height:100%;border-radius:3px;transition:width .3s,background .3s;}
#pwd-txt{font-size:.62rem;font-weight:700;min-width:50px;text-align:right;}

.am-chk{
  display:flex; align-items:flex-start; gap:9px; width:100%;
  margin-bottom:14px; font-size:.76rem; color:rgba(255,255,255,.35);
  cursor:pointer; line-height:1.5;
}
.am-chk input{width:15px;height:15px;accent-color:#3b82f6;flex-shrink:0;margin-top:2px;}

.am-btn {
  width:100%; padding:13px; margin-bottom:14px;
  background:linear-gradient(135deg,#1e40af,#3b82f6);
  border:none; border-radius:10px; color:#fff;
  font-family:inherit; font-weight:700; font-size:.76rem;
  letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
  transition:transform .2s,box-shadow .2s,opacity .2s;
  box-shadow:0 4px 20px rgba(59,130,246,.35);
}
.am-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(59,130,246,.5);}
.am-btn:disabled{opacity:.4;cursor:default;transform:none;}
.am-btn--red{
  background:linear-gradient(135deg,#881337,#e11d48);
  box-shadow:0 4px 20px rgba(225,29,72,.3);
}
.am-btn--red:hover{box-shadow:0 8px 28px rgba(225,29,72,.5);}

.am-sw{font-size:.76rem;color:rgba(255,255,255,.3);text-align:center;}
.am-lnk{background:none;border:none;color:#60a5fa;font-size:.76rem;font-weight:600;cursor:pointer;padding:0;transition:color .2s;}
.am-lnk:hover{color:#93c5fd;}

.code-row{display:flex;gap:8px;justify-content:center;margin:16px 0 10px;}
.ci{
  width:46px;height:52px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:#f1f5ff;font-size:1.4rem;font-weight:700;
  text-align:center;font-family:monospace;outline:none;
  transition:all .18s;-moz-appearance:textfield;
}
.ci::-webkit-outer-spin-button,.ci::-webkit-inner-spin-button{display:none;}
.ci:focus{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.08);box-shadow:0 0 0 3px rgba(59,130,246,.1);}
.ci--ok{border-color:rgba(59,130,246,.35);}
.code-timer{font-size:.7rem;color:rgba(255,255,255,.3);margin-bottom:14px;text-align:center;}
.code-timer b{color:#60a5fa;font-family:monospace;}

.am-avatar{
  position:relative;
  width:88px; height:88px; border-radius:20px; margin-bottom:16px;
  background:linear-gradient(135deg,#0f2044,#1d4ed8,#0891b2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:2.2rem; color:#fff;
  /* Bordure dégradée animée */
  box-shadow:
    0 0 0 2px rgba(59,130,246,.5),
    0 0 0 4px rgba(6,182,212,.2),
    0 8px 32px rgba(59,130,246,.4),
    0 0 60px rgba(6,182,212,.15);
  letter-spacing:-1px;
}
/* Coin décoratif */
.am-avatar::before {
  content:''; position:absolute;
  top:-2px; right:-2px; width:14px; height:14px;
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  border-radius:0 18px 0 8px;
  box-shadow:0 0 8px rgba(245,158,11,.6);
}
.am-avatar::after {
  content:''; position:absolute; inset:0;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%);
}
.am-badge{
  font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#60a5fa;background:rgba(59,130,246,.1);
  border:1px solid rgba(59,130,246,.3);border-radius:100px;
  padding:6px 16px;margin-bottom:22px;
  display:flex;align-items:center;gap:7px;
}
.am-stat-row{display:flex;width:100%;margin-bottom:20px;}
.am-stat{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:14px;text-align:center;
}
.am-stat b{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;color:#f1f5ff;margin-bottom:3px;}
.am-stat span{font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.25);}

.am-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(18px);
  background:#0a1020;border:1px solid rgba(59,130,246,.3);
  border-radius:12px;padding:12px 22px;
  font-size:.84rem;font-weight:600;color:#f1f5ff;
  box-shadow:0 16px 40px rgba(0,0,0,.7);z-index:2000;
  opacity:0;transition:all .3s;white-space:nowrap;
}
.am-toast--show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:480px){
  .am-panel{padding:22px 20px 22px;}
  .ci{width:40px;height:48px;font-size:1.2rem;}
  .code-row{gap:6px;}
}