:root {
  --bg: #0d0f12;
  --surface: rgba(255, 255, 255, .045);
  --text: #f2f4f6;
  --muted: #9aa3ad;
  --line: rgba(255, 255, 255, .09);
  --lime: #c6f24e;
  --cyan: #3ee6c4;
  --up: #ff6b7f;
  --up-soft: rgba(255, 107, 127, .13);
  --font-d: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-b: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-font-smoothing: antialiased; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.5;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, #000 30%, transparent 100%);
}
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .55);
}
.login-brand { color: var(--lime); font-family: var(--font-d); font-weight: 700; font-size: 17px; }
.login-panel h1 { margin: 8px 0 24px; font-family: var(--font-d); font-size: 27px; }
.login-panel form { display: grid; gap: 14px; }
.login-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.login-panel input[type="password"] {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, .18);
  color: var(--text);
}
.login-panel input:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.login-panel .button {
  min-height: 40px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(120deg, var(--cyan), var(--lime));
  color: #0d0f12;
  font-weight: 750;
}
.login-panel .flash { margin-bottom: 4px; padding: 12px 14px; border-radius: 11px; font-size: 13.5px; }
.login-panel .flash.error { background: var(--up-soft); color: var(--up); }