/* ===== Palette alignée dashboard ===== */
:root{
  /* Fond global : plus clair comme avant */
  --bg-main:#0d1b2a;

  --card-bg:rgba(9,12,32,0.98);
  --card-elevated:rgba(14,19,52,0.98);

  --border-soft:rgba(148,163,184,0.55);
  --border-strong:rgba(248,250,252,0.85);

  --text-main:#f9fafb;
  --text-soft:#e5e7eb;
  --muted:#9ca3af;

  --neon-cyan:#22e5ff;
  --neon-pink:#ff4fd8;
  --neon-purple:#8b5cff;

  --accent:var(--neon-cyan);
  --accent2:var(--neon-purple);

  --shadow-soft:0 22px 60px rgba(0,0,0,0.9);
}

/* ===== Reset ===== */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body,button,input,a{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{
  text-decoration:none;
  color:inherit;
}
img{
  max-width:100%;
  display:block;
}

body.no-scroll{
  height:100vh;
  overflow:hidden;
}

/* ===== Immersion iOS (safe-areas / Dynamic Island) ===== */
html,
body{
  height:100%;
  overscroll-behavior-y:none;
  background-color:var(--bg-main);
}

/* Couleur de base vue par iOS dans les zones système */
html{
  background-color:var(--bg-main);
}

/* Fond néon fixé derrière toute la page (safe-areas incluses) */
body{
  color:var(--text-main);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  position:relative;
  overflow-x:hidden;
  min-height:100dvh;
  background-color:transparent;
}

/* Halo néon (proche dashboard) */
body::before{
  content:"";
  position:fixed;
  inset:-80px;
  z-index:-2;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(34,229,255,0.22), transparent 60%),
    radial-gradient(130% 130% at 100% 0%, rgba(255,79,216,0.22), transparent 60%),
    radial-gradient(160% 160% at 50% 120%, rgba(139,92,255,0.28), transparent 72%),
    var(--bg-main);
  background-repeat:no-repeat;
  background-size:cover;
}

/* Légères étoiles */
body::after{
  content:"";
  position:fixed;
  inset:-120px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.04), transparent 60%);
  mix-blend-mode:soft-light;
}

/* ===== Layout global (mobile first) ===== */
.screen{
  min-height:100dvh;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(135px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:540px;
  margin:0 auto;
  overscroll-behavior:contain;
}

/* Barre haute vide pour le moment */
.top-bar{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ===== Hero logo + titre ===== */
.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
}

.hero-logo-stack{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:6px;
}

/* Glow derrière le logo, plus proche du dashboard */
.hero-glow-circle{
  position:absolute;
  top:0;
  width:260px;
  height:260px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,79,216,0.85), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(34,229,255,0.75), transparent 55%);
  filter:blur(20px);
  opacity:.9;
  transform:translateY(8px);
  pointer-events:none;
}

/* Badge logo = carte glass avec bord lumineux */
.hero-logo-badge{
  position:relative;
  width:176px;
  height:176px;
  border-radius:40px;
  padding:3px;
  background:conic-gradient(from 210deg,
    rgba(248,250,252,0.9),
    rgba(255,79,216,1),
    rgba(34,229,255,1),
    rgba(248,250,252,0.95)
  );
  box-shadow:0 24px 55px rgba(0,0,0,1);
}

.hero-logo-inner{
  width:100%;
  height:100%;
  border-radius:36px;
  background:radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(15,23,42,1));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-logo-img{
  width:78%;
  height:auto;
  border-radius:22px;
  box-shadow:0 14px 32px rgba(0,0,0,0.95);
}

/* Titre + baseline */
.hero-title-block{
  margin-top:14px;
  padding:0 8px;
}
.hero-title{
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:.03em;
}
.hero-tagline{
  margin-top:6px;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.4;
}

/* ===== Chips / features style dashboard ===== */
.hero-chips{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* chips plus "flat", pas de gros contour */
.chip{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:4px 0;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  cursor:default;
}
.chip-emoji{
  font-size:1.15rem;
  flex-shrink:0;
  margin-top:1px;
}
.chip-text strong{
  font-size:.86rem;
  font-weight:600;
}
.chip-text span{
  display:block;
  font-size:.78rem;
  color:#d1ddff;
  opacity:.9;
  margin-top:2px;
}

/* ===== Auth block ===== */
.auth-block{
  margin-top:4px;
}
.auth-caption{
  font-size:.8rem;
  color:rgba(226,232,255,0.9);
  margin-bottom:8px;
}
.auth-row{
  display:flex;
  gap:8px;
}
.auth-btn{
  flex:1;
  padding:9px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
  border:1px solid transparent;
}
.auth-btn.ghost{
  background:rgba(15,23,42,0.96);
  border-color:rgba(148,163,184,0.75);
  color:var(--text-soft);
  box-shadow:0 10px 26px rgba(0,0,0,0.9);
}
.auth-btn.outline{
  background:rgba(15,23,42,0.4);
  border-color:rgba(148,163,184,0.45);
  color:var(--text-soft);
}

/* ===== Dock (bouton Jouer) style néon ===== */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  padding:10px 14px calc(18px + env(safe-area-inset-bottom));

  /* aligné sur le fond pour éviter l’effet “barre noire” */
  background:linear-gradient(180deg, rgba(13,27,42,0), rgba(13,27,42,0.98));
  border-top:1px solid rgba(13,27,42,0.95);

  backdrop-filter:blur(24px) saturate(190%);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
  box-shadow:0 -18px 40px rgba(0,0,0,1);
  display:grid;
  gap:8px;
  transition:transform .18s ease-out;
}
@media (min-width:700px){
  .dock{
    max-width:540px;
    margin:0 auto;
    left:50%;
    transform:translate(-50%,0);
  }
}

/* Bouton néon principal */
.dock-btn{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.15px;
  color:#020617;
  background:linear-gradient(135deg,var(--neon-pink),var(--neon-cyan));
  border:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, background .22s ease, box-shadow .22s ease;
  box-shadow:0 18px 40px rgba(0,0,0,1);
  overflow:hidden;
}
.dock-btn-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:11px 14px;
  width:100%;
}
@media (min-width:480px){
  .dock-btn-inner{
    padding:12px 18px;
  }
}
.dock-btn:active{
  transform:scale(.985);
}
.dock-btn.primary:hover{
  box-shadow:0 22px 48px rgba(0,0,0,1);
}

.dock-text{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.dock-label{
  font-size:.92rem;
}

/* halo doux sur le bouton */
.primary-pulse{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 0%, rgba(248,250,252,0.6), transparent 60%);
  opacity:0;
  pointer-events:none;
  animation:pulseBtn 3s ease-out infinite;
}
@keyframes pulseBtn{
  0%{opacity:.7;transform:translateY(0);}
  60%{opacity:0;transform:translateY(26px);}
  100%{opacity:0;transform:translateY(26px);}
}

.icon{
  width:22px;
  height:22px;
  display:block;
}

/* ===== Modale invité ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,79,216,0.36), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(34,229,255,0.30), transparent 55%),
    rgba(0,0,0,0.80);
  z-index:120;
  padding:24px;
}
.modal.show{
  display:flex;
}

.modal-box{
  width:min(420px,92vw);
  border-radius:22px;
  background:radial-gradient(circle at top, rgba(129,140,248,0.55), rgba(15,23,42,0.98));
  border:1px solid rgba(255,255,255,0.22);
  padding:56px 18px 18px;
  box-shadow:var(--shadow-soft);
  color:var(--text-main);
  position:relative;
  overflow:hidden;
}
.modal-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 0%, rgba(248,250,252,0.26), transparent 60%),
    radial-gradient(circle at 90% 100%, rgba(34,229,255,0.26), transparent 60%);
  opacity:.5;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.modal-box h3{
  font-size:1.12rem;
  margin-bottom:.2rem;
  font-weight:800;
  position:relative;
  z-index:1;
}

.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.24);
  background:rgba(6,11,22,0.96);
  color:#fff;
  cursor:pointer;
  z-index:2;
}
.modal-close:hover{
  background:rgba(17,24,39,1);
}

/* Champ pseudo */
.field{
  position:relative;
  margin-top:.4rem;
  z-index:1;
}
.field input{
  width:100%;
  padding:.95rem 3.1rem .95rem 1rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.26);
  background:rgba(6,11,22,0.98);
  color:#fff;
  outline:none;
  font-weight:600;
  font-size:16px;
  box-shadow:0 8px 22px rgba(0,0,0,0.9);
}
.field input::placeholder{
  color:rgba(209,213,219,0.7);
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34,211,238,0.3);
}
.suggest{
  position:absolute;
  right:.4rem;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,0.3);
  background:rgba(6,11,22,1);
  color:#fff;
  cursor:pointer;
  font-size:1rem;
  box-shadow:0 8px 22px rgba(0,0,0,0.9);
}
.suggest:hover{
  background:#1d4ed8;
  border-color:#c7d2fe;
}

/* Erreur */
.form-error{
  color:#ffb4b4;
  font-size:.78rem;
  margin-top:.55rem;
  z-index:1;
  position:relative;
}

/* Boutons modale */
.modal-actions{
  display:flex;
  gap:.6rem;
  margin-top:1rem;
  justify-content:flex-end;
  position:relative;
  z-index:1;
}
.btn{
  padding:.68rem 1.1rem;
  border:none;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition:transform .08s ease, background .2s ease, box-shadow .2s ease, opacity .18s ease;
}
.btn.small{
  padding:.62rem 1.05rem;
}
.btn.primary{
  background:linear-gradient(135deg,var(--neon-purple),var(--neon-cyan));
  color:#020617;
  box-shadow:0 10px 26px rgba(0,0,0,0.95);
}
.btn.primary:hover{
  box-shadow:0 14px 34px rgba(0,0,0,1);
}
.btn.ghost{
  background:rgba(6,11,22,0.98);
  color:#e5edff;
  border:1px solid rgba(148,163,184,0.8);
}
.btn.ghost:hover{
  background:rgba(17,24,39,1);
}
.btn:active{
  transform:scale(.985);
}
.btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}
.btn.full{
  width:100%;
}

/* ===== Écran hors ligne ===== */
.offline-layer{
  position:fixed;
  inset:0;
  z-index:150;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,79,216,0.35), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(34,229,255,0.32), transparent 60%),
    rgba(2,6,23,0.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.offline-layer.show{
  display:flex;
}
.offline-card{
  position:relative;
  width:100%;
  max-width:360px;
  padding:22px 18px 18px;
  border-radius:22px;
  background:radial-gradient(circle at top, rgba(30,64,175,0.9), rgba(15,23,42,0.98));
  border:1px solid rgba(148,163,184,0.75);
  box-shadow:0 20px 45px rgba(0,0,0,0.95);
  text-align:center;
  overflow:hidden;
}
.offline-pulse{
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 50% 0%, rgba(248,250,252,0.18), transparent 60%);
  opacity:.7;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.offline-icon{
  position:relative;
  font-size:32px;
  margin-bottom:8px;
}
.offline-title{
  position:relative;
  font-size:1.1rem;
  font-weight:800;
  margin-bottom:6px;
}
.offline-text{
  position:relative;
  font-size:.86rem;
  line-height:1.4;
  color:#e5e7ff;
  opacity:.9;
  margin-bottom:14px;
}

/* ===== Splash screen Pamidari ===== */
.splash-layer{
  position:fixed;
  inset:0;
  z-index:220;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,79,216,0.4), transparent 60%),
    radial-gradient(circle at 90% 100%, rgba(34,229,255,0.36), transparent 60%),
    var(--bg-main);
  transition:opacity .35s ease-out, transform .35s ease-out;
}
.splash-orbit{
  position:relative;
  width:220px;
  height:220px;
}
.splash-blur{
  position:absolute;
  inset:30px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 10%, rgba(248,250,252,0.3), transparent 60%),
    radial-gradient(circle at 70% 90%, rgba(34,229,255,0.35), transparent 60%);
  filter:blur(6px);
  opacity:.7;
}
.splash-ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.3);
  mix-blend-mode:screen;
}
.splash-ring-1{
  animation:splashRing1 12s linear infinite;
}
.splash-ring-2{
  inset:12px;
  border-color:rgba(34,229,255,0.45);
  animation:splashRing2 16s linear infinite;
}
@keyframes splashRing1{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
@keyframes splashRing2{
  0%{transform:rotate(360deg);}
  100%{transform:rotate(0deg);}
}
.splash-core{
  position:absolute;
  inset:28px;
  border-radius:28px;
  background:radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(15,23,42,1));
  border:1px solid rgba(148,163,184,0.5);
  box-shadow:0 18px 40px rgba(0,0,0,1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px 14px 14px;
}
.splash-logo-wrap{
  width:82px;
  height:82px;
  border-radius:24px;
  padding:3px;
  background:conic-gradient(from 230deg,
    rgba(248,250,252,0.9),
    rgba(255,79,216,1),
    rgba(34,229,255,1),
    rgba(248,250,252,0.9)
  );
  margin-bottom:8px;
  animation:splashLogoWrap 1.4s ease-in-out infinite alternate;
}
@keyframes splashLogoWrap{
  0%{transform:translateY(0) scale(1);}
  100%{transform:translateY(-3px) scale(1.03);}
}
.splash-logo{
  width:100%;
  height:100%;
  border-radius:20px;
}
.splash-text{
  font-size:.8rem;
  color:#e5e7ff;
  opacity:.95;
  margin-bottom:6px;
}
.splash-dots{
  display:flex;
  gap:4px;
}
.splash-dots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:#e5e7ff;
  opacity:.5;
  animation:splashDot 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2){animation-delay:.15s;}
.splash-dots span:nth-child(3){animation-delay:.3s;}
@keyframes splashDot{
  0%{transform:translateY(0);opacity:.4;}
  50%{transform:translateY(-4px);opacity:.9;}
  100%{transform:translateY(0);opacity:.4;}
}
.splash-hide{
  opacity:0;
  transform:scale(1.03);
}

/* ===== Alert ===== */
.alert{
  position:fixed;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  background:rgba(15,23,42,0.98);
  color:#fee2e2;
  border:1px solid rgba(248,113,113,0.9);
  padding:.6rem .9rem;
  border-radius:12px;
  z-index:240;
  font-size:.9rem;
  box-shadow:0 8px 22px rgba(0,0,0,0.7);
}

/* Safe-area */
@supports (padding: env(safe-area-inset-top)){
  .screen{
    padding-top:calc(18px + env(safe-area-inset-top));
    padding-bottom:calc(135px + env(safe-area-inset-bottom));
  }
  .dock{
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
}

/* Responsive tweaks */
@media (max-width:400px){
  .screen{
    padding-inline:14px;
  }
  .hero-logo-badge{
    width:160px;
    height:160px;
  }
  .hero-title{
    font-size:1.28rem;
  }
}
@media (min-width:540px){
  .hero-logo-badge{
    width:190px;
    height:190px;
  }
}