:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #0d1012;
  color: #edf2f4;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #0d1012 0 55%, #111719 55% 100%);
}

.login-panel {
  width: min(100%, 380px);
  padding: 32px;
  border: 1px solid #273136;
  border-top: 2px solid #22b99a;
  background: #121619;
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #277d70;
  color: #4ee0bc;
  font: 700 13px/1 ui-monospace, monospace;
}

.eyebrow { margin: 22px 0 8px; color: #7e929a; font-size: 12px; }
h1 { margin: 0 0 28px; font-size: 24px; letter-spacing: 0; }
form { display: grid; gap: 10px; }
label { color: #aebbc0; font-size: 13px; }
input {
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid #303b40;
  border-radius: 3px;
  outline: none;
  background: #0d1113;
  color: #f4f7f8;
  font-size: 15px;
}
input:focus { border-color: #22b99a; box-shadow: 0 0 0 2px rgb(34 185 154 / 16%); }
button {
  height: 44px;
  margin-top: 8px;
  border: 0;
  border-radius: 3px;
  background: #22b99a;
  color: #07110f;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: #35cbaa; }
.error { margin: 0; color: #ff6e73; font-size: 13px; }

@media (max-width: 480px) {
  .login-shell { padding: 14vh 16px 16px; place-items: start center; }
  .login-panel { padding: 26px 22px; }
}