body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:'Raleway',sans-serif;
  background:var(--bg);
  color:var(--text);
}

*{box-sizing:border-box}

.login-shell{
  width:100%;
  max-width:400px;
}

.login-container{
  background:var(--surface-02);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  padding:64px 50px 100px;
  width:100%;
  position:relative;
  overflow:visible;
}

html:is([data-theme="papier"],[data-theme="lin"],[data-theme="dune"],[data-theme="floraison"],[data-theme="solaire"]) .login-container {
  background:var(--surface);
}

.login-container::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:12px;
  background:linear-gradient(90deg,var(--user) 0%,var(--user-2) 25%,var(--user) 50%,var(--user-2) 75%,var(--user) 100%);
  background-size:400% 100%;
  animation:loginGradientFlow 6s linear infinite;
}

@keyframes loginGradientFlow{
  0%{background-position:200% 0%}
  100%{background-position:0% 0%}
}

.login-theme-picker{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  margin-bottom:36px;
}

.theme-picker-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

.theme-swatch{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--sc);
  border:none;
  padding:0;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  outline:none;
}

.theme-swatch:hover{transform:scale(1.3)}
.theme-swatch.is-active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--sc);transform:scale(1.15)}

.login-logo{
  width:100%;
  height:auto;
  display:block;
  margin-bottom:24px;
}

.login-password{
  width:100%;
  padding:16px 18px;
  margin-bottom:8px;
  border:1.5px solid transparent;
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
  font-family:inherit;
  font-size:16px;
  transition:border-color .2s;
}

.login-password:focus{
  outline:none;
  box-shadow:0 0 0 1px var(--user);
}

.login-password::placeholder{color:var(--muted)}

.login-password:-webkit-autofill,
.login-password:-webkit-autofill:hover,
.login-password:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  box-shadow:0 0 0 1000px var(--bg) inset;
}

.login-submit{
  width:100%;
  padding:16px;
  margin-top:4px;
  border:none;
  border-radius:8px;
  background:var(--text);
  color:var(--bg);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background-color .2s,transform .12s ease;
}

.login-submit:hover{background:#3fff00}

.login-error{
  background:rgba(255,68,68,.1);
  border:1px solid #ff4444;
  color:#ff4444;
  padding:12px;
  border-radius:8px;
  margin-bottom:20px;
  font-size:14px;
  text-align:center;
}

@media (max-width:480px){
  .login-container{padding:64px 24px 88px}
}