:root{
  color-scheme:dark;
  --login-ink:#f1f0ed;
  --login-muted:#b8b9b9;
  --login-surface:#191919;
}
*{box-sizing:border-box}
html{
  min-height:100%;
  background:var(--login-surface);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  position:relative;
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background-color:var(--login-surface);
  background-image:url('/login-background.php?v=20260916-4');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:var(--login-ink);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.login-shell{
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100dvh;
  padding:96px 28px 112px;
}
.login-panel{width:min(340px,100%)}
.login-panel h1{
  margin:0 0 32px;
  font-size:32px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.035em;
}
#login-form{display:grid;gap:20px}
.login-field{display:grid;gap:8px}
.login-field label{color:var(--login-muted);font-size:13px;line-height:1.4;font-weight:400}
.login-field input{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px;
  outline:none;
  background:rgba(255,255,255,.035);
  color:var(--login-ink);
  font:inherit;
  font-size:16px;
  line-height:1.5;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.login-field input:hover{border-color:rgba(255,255,255,.34)}
.login-field input:focus{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(255,255,255,.065);
}
.login-field input::selection{background:rgba(255,255,255,.24);color:#fff}
.login-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--login-ink);
  caret-color:var(--login-ink);
  box-shadow:0 0 0 1000px #303133 inset;
}
.login-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:48px;
  margin-top:8px;
  padding:12px 15px;
  border:1px solid transparent;
  border-radius:7px;
  background:#e8e9e7;
  color:#26282a;
  font:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
  transition:background-color .15s ease,opacity .15s ease;
}
.login-submit svg{display:block;width:18px;height:18px;flex:0 0 18px}
.login-submit:hover{background:#fff}
.login-submit:focus-visible{outline:2px solid #f1f0ed;outline-offset:4px}
.login-submit:disabled{cursor:wait;opacity:.6}
.login-error{
  margin:0 0 22px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:7px;
  background:rgba(255,255,255,.06);
  color:#ece1d9;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
@media (max-width:600px){
  .login-shell{padding:112px 28px 104px}
  .login-panel h1{font-size:30px;margin-bottom:30px}
}
@media (max-height:580px){
  .login-shell{padding-top:92px;padding-bottom:48px}
  .login-panel h1{margin-bottom:22px}
  #login-form{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .login-field input,.login-submit{transition:none}
}