:root {
  --auth-ink: #243743;
  --auth-coral: #ee7a74;
  --auth-paper: #fffaf4;
  --auth-line: #eadbcf;
}

#appRoot[hidden],
#loginGate[hidden] { display: none !important; }

.login-gate {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background:
    radial-gradient(circle at 94% 10%, #ffedb6 0 0, transparent 26%),
    radial-gradient(circle at 0 88%, #fff3ec 0 0, transparent 24%),
    var(--auth-paper);
}

.login-card {
  width: min(100%, 480px);
  padding: clamp(32px, 8vw, 56px);
  border: 1px solid rgba(234, 219, 207, .9);
  border-radius: 32px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 18px 58px rgba(75, 49, 37, .08);
}

.login-brand {
  margin: 0 0 clamp(58px, 12vw, 92px);
  color: var(--auth-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 700;
}

.login-brand i { color: #e95f62; font-style: normal; font-size: .75em; vertical-align: .08em; padding: 0 .08em; }
.login-card .eyebrow { margin: 0 0 14px; color: var(--auth-coral); font-size: 13px; letter-spacing: .14em; }
.login-card h1 { margin: 0; color: var(--auth-ink); font-size: clamp(40px, 11vw, 64px); line-height: 1.08; }
.login-intro { margin: 18px 0 36px; color: #71808a; font-size: clamp(18px, 4.7vw, 23px); }

.login-form {
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--auth-line);
  border-radius: 28px;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: #71808a;
  font-size: 16px;
  font-weight: 700;
}

.login-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--auth-line);
  border-radius: 18px;
  outline: none;
  color: var(--auth-ink);
  background: #fff;
  font: inherit;
}

.login-form input:focus { border-color: #4d7dd6; box-shadow: 0 0 0 3px rgba(77, 125, 214, .14); }

.login-button {
  min-height: 60px;
  margin-top: 6px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: var(--auth-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.login-button:hover { transform: translateY(-1px); }
.login-button:disabled { cursor: wait; opacity: .64; transform: none; }

.forgot-button {
  display: block;
  margin: 18px auto 0;
  padding: 6px;
  border: 0;
  color: var(--auth-coral);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.login-status { min-height: 24px; margin: 16px 0 0; text-align: center; color: #b65651; }
.login-status.success { color: #4e9873; }
.version-label { margin: 28px 0 0; color: #c5b8ad; text-align: center; font-size: 13px; }

@media (max-width: 420px) {
  .login-gate { padding: 0; align-items: stretch; }
  .login-card { border: 0; border-radius: 0; box-shadow: none; }
  .login-form { padding: 20px; }
}

/* v1.0.3：首页标题使用更舒展、稳定的双行层级。 */
.welcome {
  padding-top: 29px;
  padding-bottom: 21px;
}

.welcome h1 {
  display: grid;
  gap: 4px;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.welcome h1 > span {
  display: block;
  font-size: .78em;
  line-height: 1.04;
}

.welcome h1 > em {
  display: block;
  padding-left: clamp(22px, 8vw, 42px);
  font-size: 1.22em;
  line-height: .92;
}

.welcome .subline { margin-top: 18px; }

/* 日历项目：给时间单独留出固定宽度，标题和完整日期整体右移。 */
.event {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
}

.event-day {
  white-space: nowrap;
  font-size: 17px;
  letter-spacing: -.08em;
}