:root {
  color-scheme: light;
  font-family: "Graphik", "Noto Sans SC", sans-serif;
  color: #17202a;
  background: #eef2f5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(54, 95, 225, .13), transparent 28rem),
    linear-gradient(145deg, #f7f9fb 0%, #e7edf2 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(460px, 100%);
  padding: 46px;
  border: 1px solid rgba(21, 37, 53, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 70px rgba(33, 49, 65, .14);
}

.eyebrow {
  margin: 0 0 18px;
  color: #365fe1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}

h1 { margin: 0; font-size: clamp(30px, 7vw, 42px); letter-spacing: -.04em; }
.intro { margin: 18px 0 30px; color: #64717e; line-height: 1.7; }

.feishu-button {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 18px 10px 11px;
  border-radius: 13px;
  color: white;
  background: #365fe1;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(54, 95, 225, .2);
}

.feishu-button:hover { background: #294fc8; }
.feishu-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: white; color: #365fe1; font-weight: 800; }

.login-error, .config-note {
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: 12px;
  line-height: 1.55;
}

.login-error { color: #8b2d2d; background: #fff0ef; border: 1px solid #f3c7c2; }
.config-note { display: grid; gap: 5px; color: #4b5c6c; background: #f3f6f9; border: 1px solid #dce4eb; }
.config-note span { color: #71808d; font-size: 13px; }
.login-card footer { margin-top: 26px; color: #9aa5af; font-size: 11px; letter-spacing: .08em; }

@media (max-width: 520px) { .login-card { padding: 32px 24px; } }