:root {
  --bg1:#0f172a; --bg2:#1e3a8a; --bg3:#4338ca;
  --cta:#0ea5e9; --text:#f1f5f9;
  --error:#ef4444; --ok:#22c55e;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,Roboto,Inter,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
  min-height:100vh;color:var(--text);
  display:flex;flex-direction:column;text-align:center;
}

header{padding:24px}
.logo{width:160px;max-width:60%;height:auto;margin-bottom:8px}
.neroxa{font-size:1.2rem;color:#fff;margin:4px 0}
.sealssl{font-size:2.5rem;font-weight:700}

/* shimmer SealSSL lent avec pause */
.shimmer {
  color:#fff;
  background: linear-gradient(90deg,#fff 0%,#000 50%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine {
  0%,20% { background-position:200% center; }
  50%    { background-position:0 center; }
  80%,100% { background-position:200% center; }
}

.subtitle{font-size:1rem;opacity:.85}

.form{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:20px auto;max-width:500px;padding:0 16px;
}
input{
  flex:1;min-width:200px;
  padding:12px;border-radius:10px;border:none;font-size:1rem;
}
button{
  background:var(--cta);color:#fff;padding:12px 20px;
  border:none;border-radius:10px;font-size:1rem;
  cursor:pointer;transition:background .2s
}
button:hover{background:#0284c7}

.result,.explain{
  max-width:600px;margin:16px auto;padding:18px;
  border-radius:12px;text-align:left;font-size:.95rem
}
.result{background:rgba(0,0,0,.35)}
.explain{background:rgba(255,255,255,.1)}

.loader{
  border:6px solid rgba(255,255,255,.2);
  border-top:6px solid var(--cta);
  border-radius:50%;width:50px;height:50px;
  margin:20px auto;animation:spin 1s linear infinite;display:none
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

footer{margin-top:auto;padding:16px;font-size:.85rem;opacity:.8}
footer .ft a{color:#fff;opacity:.85;margin:0 6px;text-decoration:none}
footer .ft a:hover{text-decoration:underline}

@media(max-width:480px){
  h1.sealssl{font-size:2rem}
  .logo{width:120px}
}