:root{
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --border: var(--border-color);
  --primary: var(--color-primary);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{color-scheme:dark}
body{
  font-family: var(--font-primary);
  background: var(--bg);
  color: var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:var(--spacing-l);
}

.login-container{
  flex:1;
  width:100%;
  max-width:360px;
  margin:var(--spacing-xl) auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.logo{
  font-weight: var(--weight-bold);
  text-align:center;
  margin-bottom:var(--spacing-l);
}

.alert-top{
  color: var(--color-error);
  text-align:center;
  margin-bottom: var(--spacing-m);
}

.group{margin-bottom:var(--spacing-m);}
label{display:block;margin-bottom:var(--spacing-xs);color:var(--muted);font-size:.9rem;}
.field{position:relative;}
.field .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);}
.field .icon svg{width:20px;height:20px;display:block;}
.input{
  width:100%;
  padding:12px 14px 12px 40px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text);
  font-size:1rem;
  line-height:1.2;
}
.input::-ms-reveal,
.input::-ms-clear{
  display:none;
}
.input:focus{
  border-color:var(--primary);
  outline:none;
  box-shadow:0 0 0 1px var(--primary);
}
input[type="password"].input{
  padding-right:40px;
}
.eye{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.eye:focus{outline:1px solid var(--primary);outline-offset:2px;}
.eye svg{width:20px;height:20px;display:none;}
.eye svg:not([hidden]){display:block;}
.remember{display:flex;gap:8px;align-items:center;margin:var(--spacing-s) 0;color:var(--muted);font-size:.9rem;}
.hint{margin-left:32px;color:var(--text-muted);font-size:.8rem;}
#caps-warning{
  margin-top:var(--spacing-xs);
  margin-left:32px;
  color:var(--color-error);
}
.btn{
  width:100%;
  margin-top:var(--spacing-m);
  padding:12px;
  border:0;
  border-radius:8px;
  font-weight:600;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:filter .2s, transform .1s;
}
.btn:hover{filter:brightness(1.1);}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn .spinner{width:1em;height:1em;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;display:none;}
.btn.loading .spinner{display:inline-block;}
.links{text-align:center;margin-top:var(--spacing-m);font-size:.9rem;}
.links a{color:var(--primary);text-decoration:none;}
.links a:hover{text-decoration:underline;}
.divider{border:0;border-top:1px solid var(--border);margin:var(--spacing-m) auto;width:60%;}
.footer{text-align:center;color:var(--muted);font-size:.85rem;padding:var(--spacing-m) 0;}
.footer a{color:var(--primary);text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.error{color:var(--color-error);margin-top:var(--spacing-xs);font-size:.85rem;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shake{animation:shake .3s;}
@media (min-width:768px){body{padding:var(--spacing-xl);}}