:root{
  --bg:#000; 
  --card:rgba(20,20,20,0.6); 
  --muted:#777; 
  --text:#f0f0f0; 
  --accent:#fff;
}

*{box-sizing:border-box;margin:0;padding:0;}
html, body{height:100%;overflow:hidden;}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(circle at 30% 20%, rgba(60,60,80,0.25), transparent 60%),
              radial-gradient(circle at 70% 80%, rgba(80,80,120,0.15), transparent 70%),
              radial-gradient(circle at 50% 50%, rgba(40,40,60,0.3), transparent 80%),
              var(--bg);
  color:var(--text);
  display:flex; align-items:center; justify-content:center; padding:32px;
}

canvas#stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;}

.card{
  width:100%; 
  max-width:480px;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.05);
  padding:16px 28px;
  border-radius:14px;
  backdrop-filter:blur(12px);
  text-align:center;
  box-shadow:0 0 30px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
  overflow:hidden;
  min-height:90px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

h1{margin-bottom:20px;font-size:28px;font-weight:700;color:var(--text);}

.license-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.input{
  width:80%; height:46px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05); color:var(--text); padding:0 14px; font-size:15px;
  outline:none; margin-bottom:8px; transition:box-shadow 0.3s ease;
}

.input::placeholder{color:var(--muted);}
.input:focus{box-shadow:0 0 10px 3px rgba(255,255,255,0.15),0 0 20px rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);}

.btn{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--bg);
  padding:12px 24px;
  cursor:pointer; border-radius:6px; font-weight:600; border:none;
  font-size:16px;
  transition:box-shadow 0.3s ease;
}

.btn svg{
  fill:var(--bg);
  width:18px;
  height:18px;
}

.btn:hover{box-shadow:0 0 8px 3px rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.12);}

/* Conteneur pour bouton et message succès */
.action-container{
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

/* Style du message succès pour ressembler au bouton/erreur */
.success-btn{
  display: none;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  text-align: center;
  font-weight:600;
  font-size:14px;
  color:#4caf50;
  border:1px solid #4caf50;
  background: rgba(0,80,0,0.4);
  box-sizing: border-box;
}

.error-box{
  width: 80%;
  margin: 12px 0 0 0;
  padding:10px 14px;
  border-radius:10px;
  backdrop-filter:blur(6px);
  opacity:0; max-height:0;
  transition:all 0.3s ease;
  font-weight:600; font-size:14px;
  overflow:hidden;
  text-align:center;
  border:1px solid #ff5c5c; 
  color:#ff5c5c; 
  background:rgba(80,0,0,0.4);
}

.error-box.show{opacity:1; max-height:60px;}

footer{margin-top:4px;color:var(--muted);font-size:12px;}