/* createel.cn · 登录页
   这一页是站点唯一公开可见的部分，也是每天开站第一眼看到的东西。
   定位：一面「今天」的墙 —— 时间、天气、每日一话，一个入口，底下还有一整个月。

   布局（2026-10-25 重排）：
     这一版改的不是模块，是它们之间的比例和对齐：
       ≥1080px  两栏网格：[今天] [进入]，月历横跨整行；
                今天区内部再分两列（天气 | 每日一话），横向铺开而不是一根竖条；
                月历卡内部也分两列（格阵 | 本月），格子回到接近方形，不再被拉成扁条；
                入口卡随今天区一起长高，标题在上、表单沉底，右栏底部不再留一段虚空。
       ≥720px   今天区已分两列；入口卡靠右，与月历右边缘对齐。
       <720px   单列：今天 → 入口 → 月历。

   一条硬规矩：所有块的左右边缘必须落在同一条栏线上，不出现「只有一半宽」的孤立块，
   也不让任何一块（尤其是日历格阵）被拉成横向的扁条。
   颜色沿用 app.css 的 token，不另起一套。

   为什么不塞进 app.css：这页和外壳的改造节奏不同，混在一起改一次就牵一次线。

   注意层叠顺序：本文件里所有 @media 覆盖都写在对应基础规则之后 ——
   基础规则写在 media 后面会把覆盖吃掉（上一版 .cal-day / .lp-side-row 就踩过）。 */

.login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: #f4f5f9;
  color: #0f1222;
  font-family: var(--sans);
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  /* 纵向骨架：内容区吃满剩余高度、页脚沉底。
     这样内容不会像以前那样贴着浏览器顶边，高屏上底下空一大片。 */
  display: flex;
  flex-direction: column;
}

/* ---------- 背景：柔光 + 一层极淡网格，纯 CSS ---------- */
.lp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 6% -4%, rgba(79, 70, 229, .13), transparent 62%),
    radial-gradient(46% 40% at 94% 2%, rgba(124, 58, 237, .10), transparent 62%);
}
.lp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  background-image:
    linear-gradient(rgba(15, 18, 34, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 18, 34, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(76% 60% at 50% 34%, #000 8%, transparent 76%);
  mask-image: radial-gradient(76% 60% at 50% 34%, #000 8%, transparent 76%);
}

/* ---------- 骨架 ---------- */
.lp-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 16px 8px;
  display: grid;
  gap: 15px;
  /* 撑满登录页剩余高度，让整组内容在视口里垂直居中。
     内容比视口高时 safe 关键字会退回顶部对齐，不会把第一块顶出屏幕。 */
  flex: 1 0 auto;
  align-content: center;
  align-content: safe center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "today" "gate" "cal";
}
.lp-today { grid-area: today; min-width: 0; }
.lp-cal-wrap { grid-area: cal; min-width: 0; }
.lp-gate { grid-area: gate; min-width: 0; }

/* ---------- ① 今天 ---------- */
.lp-today {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 2px;
  min-width: 0;
}

.lp-time {
  font-family: var(--mono);
  font-size: clamp(48px, 14vw, 56px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: #0f1222;
}
.lp-date {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-d {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.015em;
  color: #0f1222;
}
.lp-date .lp-wd {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 18, 34, .05);
}
.lp-lunar {
  margin-top: 6px;
  font-size: 12px;
  color: #7b8194;
  letter-spacing: .01em;
  min-height: 1.5em;
}

/* 天气：一张横着的小卡 */
.lp-weather {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 11px;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(16, 18, 34, .04), 0 10px 26px -20px rgba(16, 18, 34, .35);
  max-width: 100%;
}
.lp-weather[hidden] { display: none; }
.lp-wi {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #4f46e5;
}
.lp-wi svg { display: block; width: 100%; height: 100%; }
.lp-wbody { display: grid; gap: 1px; min-width: 0; }
.lp-wt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lp-wt b {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.lp-wt span {
  font-size: 13px;
  font-weight: 600;
  color: #4b5162;
  white-space: nowrap;
}
.lp-wm {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: #8b90a2;
  white-space: nowrap;
  overflow: hidden;
}
.lp-wm b { font-weight: 500; color: #8b90a2; }
.lp-wm span { color: #b0b5c4; }

/* 每日一话：左边一道竖线，正文比日期大一号 */
.lp-quote {
  position: relative;
  margin: 0;
  padding: 2px 0 2px 14px;
  max-width: 34em;
}
.lp-quote[hidden] { display: none; }
.lp-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f46e5, #7c3aed 60%, rgba(124, 58, 237, .1));
}
.lp-quote-text {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -.005em;
  color: #262b40;
  text-wrap: pretty;
}
.lp-quote-foot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #9aa0b2;
}
.lp-quote-cite:empty { display: none; }
.lp-quote-cite::before { content: "—— "; }
.lp-quote-src {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #4f46e5;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 0 5px;
  line-height: 1.5;
  opacity: .72;
}
.lp-quote-src[hidden] { display: none; }

/* ---------- ② 入口 ---------- */
.lp-gate {
  padding: 18px 16px 16px;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(16, 18, 34, .04), 0 26px 54px -34px rgba(16, 18, 34, .35);
}
.lp-gate-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0f1222;
}
.lp-gate-sub {
  margin: 4px 0 14px;
  font-size: 12.5px;
  /* 对白底 ≥4.5:1（原来的 #8b90a2 只有 3.23:1） */
  color: #5b6172;
}

.lp-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  color: #3a3f55;
  margin-bottom: 6px;
}
/* 账号和口令各占一行，中间留一口气 */
.lp-field + .lp-field { margin-top: 12px; }

/* 账号框：与口令框同高同边框，只是右边不用给「显示」按钮留位 */
.lp-name {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #e2e5ee;
  border-radius: 12px;
  background: #fff;
  color: #0f1222;
  font-size: 16px; /* 16px 起 iOS 才不会在聚焦时放大页面 */
  transition: border-color .15s, box-shadow .15s;
}
.lp-name::placeholder { color: #6b7280; font-size: 14px; }
.lp-name:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}

.lp-secret { position: relative; display: flex; align-items: center; }
.lp-secret input {
  width: 100%;
  min-height: 48px;
  padding: 0 50px 0 14px;
  border: 1px solid #e2e5ee;
  border-radius: 12px;
  background: #fff;
  color: #0f1222;
  font-size: 16px; /* 16px 起 iOS 才不会在聚焦时放大页面 */
  transition: border-color .15s, box-shadow .15s;
}
.lp-secret input::placeholder { color: #6b7280; font-size: 14px; }
.lp-secret input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}
.lp-reveal {
  position: absolute;
  right: 3px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #9aa0b2;
  border-radius: 9px;
  cursor: pointer;
}
.lp-reveal:hover { background: #f2f3f9; color: #0f1222; }
.lp-reveal[aria-pressed="true"] { color: #4f46e5; }
.lp-reveal svg { width: 18px; height: 18px; }

.lp-caps {
  display: none;
  margin: 8px 0 0;
  font-size: 12px;
  color: #d97706;
  align-items: center;
  gap: 5px;
}
.lp-caps.show { display: flex; }
.lp-caps svg { width: 13px; height: 13px; flex: 0 0 auto; }

.lp-msg {
  margin: 10px 0 0;
  font-size: 12.5px;
  border-radius: 10px;
  padding: 8px 11px;
  display: none;
  line-height: 1.55;
  border: 1px solid transparent;
}
.lp-msg.show { display: block; }
.lp-msg.err { color: #dc2626; background: #fdecec; border-color: #f6d5d5; }
.lp-msg.hint { color: #3a3f55; background: #eef0ff; border-color: #dfe2ff; }

.lp-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .85);
  transition: transform .15s, box-shadow .15s;
}
.lp-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(79, 70, 229, .85); }
.lp-submit:active { transform: translateY(0); }
.lp-submit[aria-busy="true"] { opacity: .9; cursor: progress; }
.lp-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lp-spin .7s linear infinite;
  display: none;
}
.lp-submit[aria-busy="true"] .lp-spin { display: inline-block; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ---------- ③ 月历 ---------- */
.lp-cal-card {
  display: grid;
  gap: 0;
  border: 1px solid #e6e8f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 1px rgba(16, 18, 34, .02), 0 12px 28px -30px rgba(16, 18, 34, .28);
  overflow: hidden;
}

.lp-cal { padding: 13px 10px 14px; min-width: 0; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cal-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cal-title b { font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.cal-gz { display: none; font-size: 11.5px; color: #8b90a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-nav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.cal-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e6e8f0;
  border-radius: 9px;
  background: #fff;
  color: #4b5162;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.cal-btn:hover { border-color: #cfd3e2; color: #0f1222; }
.cal-btn:active { transform: translateY(1px); }
.cal-btn-text { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

/* 星期表头：加深加粗；周末用红（中文日历惯例），整月一眼分出工作日 / 休息日 */
.cal-wd {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #5b6478;
  padding-bottom: 7px;
  letter-spacing: .06em;
}
.cal-wd.is-weekend { color: #ef4444; }

/* 格子：极淡底 + 细描边，整月读起来是一张表，而不是一堆飘着的字 */
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px 2px;
  border: 1px solid #edeff5;
  border-radius: 10px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background .14s, border-color .14s, box-shadow .14s;
  font: inherit;
  color: inherit;
  overflow: hidden;
}
.cal-cell:hover { background: #eef0ff; border-color: #dcdfff; }

/* 日期数字：加粗压深，比之前更顶用 */
.cal-day {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: #11142a;
}

/* 小字（农历 / 节气 / 节日）：放大到 11px、压深，不再像 10px 灰雾 */
.cal-sub {
  font-size: 11px;
  line-height: 1.15;
  color: #6b7280;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-sub.is-lunar-month { color: #4b5162; font-weight: 600; }
.cal-sub.is-term { color: #047857; font-weight: 600; }
.cal-sub.is-fest { color: #6d28d9; font-weight: 600; }
.cal-sub.is-legal { color: #dc2626; font-weight: 700; }

/* 周末：淡紫底，工作日一眼可辨（之前比工作日还淡，反了） */
.cal-cell.is-weekend { background: rgba(99, 102, 241, .05); }
.cal-cell.is-weekend .cal-day { color: #312e81; }

/* 法定节假日：红点 + 淡红底 + 加粗红字，是整张日历里最跳的那几个 */
.cal-cell.is-legal { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .22); }
.cal-cell.is-legal .cal-day { color: #dc2626; font-weight: 800; }
.cal-cell.is-legal::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: #dc2626;
}
/* 传统节日（不放假）：淡紫底，区别于法定红 */
.cal-cell.is-fest { background: rgba(124, 58, 237, .06); }

/* 上个月 / 下个月溢出日：不再那么淡，能看清但不抢本月 */
.cal-cell.is-muted { opacity: .5; background: transparent; border-color: transparent; }

/* 今天：淡蓝底 + 蓝边 + 蓝字 + 蓝点，是日常最该被一眼锁定的 */
.cal-cell.is-today { background: #eef0ff; border-color: #c3c8ff; }
.cal-cell.is-today .cal-day { color: #4f46e5; font-weight: 800; }
.cal-cell.is-today::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: #4f46e5;
}

/* 选中：紫渐变，压在所有状态之上 */
.cal-cell.is-selected {
  background: linear-gradient(140deg, #4f46e5, #7c3aed) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .9);
}
.cal-cell.is-selected .cal-day,
.cal-cell.is-selected .cal-sub { color: #fff !important; }
.cal-cell.is-selected .cal-sub { opacity: .92; }
.cal-cell.is-selected::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
}

/* 「本月概览」：月头 + 下个假期 + 本月关键日 + 选中详情 + 图例。
   手机上是一条能横滑的胶囊行（只露出「下个假期」和「关键日」），
   桌面上折成竖栏，五块一起把右栏填满。全部由本地 Hub.lunar 渲染，零接口。 */
.lp-cal-side {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px 12px 14px;
  border-top: 1px solid #eef0f6;
  background: rgba(248, 249, 252, .72);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lp-cal-side::-webkit-scrollbar { display: none; }
/* 小屏只保留两条信息流，月头 / 图例收起，免得横滑里塞一堆竖块 */
.lp-side-top, .lp-side-legend { display: none; }

.lp-side-h {
  margin: 0;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9aa0b2;
}

/* 下个假期：手机上是红胶囊，桌面上升级成一张卡 */
.lp-side-next {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fdecec;
  border: 1px solid #f6d5d5;
  white-space: nowrap;
}
.lp-side-next.is-empty { background: #f2f3f9; border-color: #e6e8f0; }
.lp-side-next-label { font-size: 11px; font-weight: 700; color: #dc2626; letter-spacing: .04em; }
.lp-side-next.is-empty .lp-side-next-label { color: #8b90a2; }
.lp-side-next-name { font-size: 13px; font-weight: 700; color: #b91c1c; }
.lp-side-next-count { font-size: 12px; font-weight: 600; color: #dc2626; }
.lp-side-next-date { font-size: 11px; color: #ef4444; font-variant-numeric: tabular-nums; }

/* 本月关键日：横滑时是一排胶囊 */
.lp-side-list { margin: 0; padding: 0; list-style: none; display: flex; gap: 6px; }
.lp-side-row {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f2f3f9;
  font-size: 12.5px;
  color: #3a3f55;
  white-space: nowrap;
}
.lp-side-row b {
  font-family: var(--mono);
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lp-side-name { font-weight: 600; }
.lp-side-tag {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(220, 38, 38, .12);
  color: #dc2626;
}
.lp-side-row.is-term { background: #eaf8f1; }
.lp-side-row.is-term .lp-side-tag { background: rgba(4, 120, 87, .12); color: #047857; }
.lp-side-row.is-term b { color: #047857; }
.lp-side-empty { font-size: 12px; color: #b4b9c8; flex: 0 0 auto; align-self: center; }

/* ---------- 页脚 ---------- */
.lp-foot {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  font-size: 11.5px;
  color: #9aa0b2;
  line-height: 1.6;
}
.lp-foot-note { white-space: nowrap; }
.lp-foot-links { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.lp-foot-links[hidden] { display: none; }
.lp-foot-links a {
  color: #9aa0b2;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lp-foot-links a:hover { color: #4f46e5; border-bottom-color: currentColor; }
.lp-foot-links a[hidden] { display: none; }

/* ============================================================
   断点覆盖（一律放在基础规则后面）
   ============================================================ */

/* 720–1079px：今天区放大一号；入口卡靠左，与今天区、月历落在同一条左边缘上。
   中屏最难看的就是「左边一张 400px 卡、右边一整片空」。 */
@media (min-width: 720px) {
  .lp-wrap {
    padding: 34px 28px 12px;
    gap: 24px;
    /* 这里原来是 start：宽屏下内容被顶到浏览器上沿，1080p 上底下空出两百多像素。
       改回居中，safe 保证「内容比视口高」时退回顶部对齐，不会把第一块顶出屏幕。 */
    align-content: safe center;
  }
  /* 单列区间里入口卡靠左站，与今天区、月历落在同一条左边缘上。
     靠右会让左边空出一大片，比靠左更散。 */
  .lp-gate { width: 100%; max-width: 400px; }

  .lp-time { font-size: clamp(56px, 6.4vw, 84px); }
  .lp-date { margin-top: 14px; gap: 10px; }
  .lp-d { font-size: clamp(17px, 1.5vw, 20px); }
  .lp-date .lp-wd { font-size: 13.5px; padding: 2px 9px; }
  .lp-lunar { margin-top: 8px; font-size: 13px; }
  .lp-weather { padding: 11px 15px 11px 13px; gap: 12px; }
  .lp-wi { width: 26px; height: 26px; }
  .lp-wt b { font-size: 21px; }
  .lp-quote { padding: 2px 0 2px 18px; }
  .lp-quote-text { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.65; }
  .lp-gate { padding: 22px 20px 20px; border-radius: 18px; }
  .lp-gate-title { font-size: 20px; }
  .lp-gate-sub { margin-bottom: 18px; }
  .lp-cal { padding: 18px 18px 16px; }
  .cal-gz { display: block; }
  .cal-cell { min-height: 64px; }
  .cal-day { font-size: 16px; }
  .cal-sub { font-size: 11px; }
  .lp-foot { padding: 12px 28px 26px; }
}

/* 900–1079px：今天区与入口并排。
   这一段如果还是单列，入口卡（400px）右边会空出将近一半屏宽 —— 平板上最显眼的散。
   并排后两栏底部一起对齐，空白收到页面底下去。
   今天区在这个宽度还不切两列：一话会被挤成一条细缝。 */
@media (min-width: 900px) {
  .lp-wrap {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "today gate"
      "cal   cal";
    align-items: stretch;
  }
  .lp-gate {
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 月历在这里就折成两列（日历 | 本月）。
     原来要等到 1480px 才折，中间这一大段是整张拉满屏宽的格阵 ——
     每个格子 113×58，宽是高的两倍，一排扁条，怎么摆都不好看。
     折竖栏后格阵收窄，格子回到接近方形，右边那片空白也有东西站。 */
  .lp-cal-card { grid-template-columns: minmax(0, 1fr) 240px; }
  .lp-cal { padding: 15px 14px 13px; }
  .cal-head { margin-bottom: 10px; }
  .cal-grid { gap: 2px; }
  .cal-cell { min-height: 58px; }
  .lp-cal-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    border-top: 0;
    border-left: 1px solid #eef0f6;
    padding: 18px 18px;
    overflow: visible;
  }
  /* 桌面显示全部四块 */
  .lp-side-top, .lp-side-legend { display: block; }
  .lp-side-top { display: flex; align-items: baseline; gap: 8px; }
  .lp-side-h { margin: 0; text-align: left; font-size: 12px; flex: 0 0 auto; }
  .lp-side-month { font-size: 12px; color: #6b7280; font-weight: 600; }

  /* 下个假期 → 桌面卡片 */
  .lp-side-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .lp-side-next-label { font-size: 11px; }
  .lp-side-next-name { font-size: 17px; }
  .lp-side-next-count { font-size: 13px; }
  .lp-side-next-date { font-size: 12px; }

  /* 本月关键日 → 竖栏 */
  .lp-side-list { display: grid; gap: 8px; margin: 0; }
  .lp-side-row {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f5f6fb;
    gap: 9px;
    font-size: 13px;
    white-space: normal;
    align-items: center;
  }
  .lp-side-row b { font-size: 13px; min-width: 1.8em; text-align: center; color: #6b7280; }
  .lp-side-row.is-term { background: #eaf8f1; }

  /* 图例：压到栏底，帮着撑满整列高度 */
  .lp-side-legend {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 12px;
    border-top: 1px solid #eef0f6;
  }
  .lp-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #6b7280; }
  .lp-leg-dot {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 5px;
    background: rgba(107, 114, 128, .14);
    color: #4b5162;
  }
  .lp-leg-dot.is-legal { background: rgba(220, 38, 38, .14); color: #dc2626; }
  .lp-leg-dot.is-term { background: rgba(4, 120, 87, .14); color: #047857; }
}

/* 桌面：两栏 + 月历内部再分两列。
   月历从 1480px 才折竖栏改成 1080px 就折 —— 原来 1080–1480 之间是整张拉满屏宽的
   扁格子阵（每格 168×50，宽是高的三倍多），折成两列后格子回到接近方形，
   右边那片空白也有了「本月」着落。 */
@media (min-width: 1080px) {
  .lp-wrap {
    padding: 34px 32px 16px;
    gap: 22px 36px;
    grid-template-columns: minmax(0, 1fr) 324px;
    grid-template-areas:
      "today gate"
      "cal   cal";
    align-items: stretch;
  }
  .lp-gate { max-width: none; margin-left: 0; }
  .lp-foot { padding: 12px 32px 26px; }

  /* 入口卡跟着今天区长高：标题留在上面、表单沉到底部，
     中间那段空气是卡片自己的留白，而不是右栏底部一条硬邦邦的虚空。 */
  .lp-gate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 22px 22px;
  }

  /* 今天区：时间独占一行，下面天气与一话并排。
     696px 宽足够分成 252 + 一话；再窄一话就成细缝，所以这个切换点放在 1080 而不是 720。 */
  .lp-today {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-areas:
      "clock   clock"
      "weather quote";
    column-gap: 28px;
    row-gap: 20px;
    align-items: stretch;
    align-content: start;
  }
  .lp-clock { grid-area: clock; }
  /* 天气卡跟着一话的高度走、内容居中，两列底部齐平，不再一高一低。 */
  .lp-weather { grid-area: weather; align-self: stretch; justify-content: center; }
  .lp-quote { grid-area: quote; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

  .lp-cal-card { grid-template-columns: minmax(0, 1fr) 400px; }
  .lp-cal { padding: 15px 15px 13px; }
  .lp-cal-side { padding: 16px 20px; }
  /* 宽屏不缩字号：日期固定 16px 是这套版面的基准，缩回去就等于在最需要的
     地方又开始费眼。格子随之抬到 58px，子标签 10.5px 跟上，卡片约 430px 高，
     仍明显低于今天区 + 入口卡的整页重心。 */
  .cal-cell { min-height: 58px; border-radius: 9px; }
  .cal-day { font-size: 16px; }
  .cal-sub { font-size: 11px; }
  .cal-title b { font-size: 16px; }
  .cal-wd { font-size: 11px; padding-bottom: 5px; }
}

/* ---------- 暗色：由 html[data-theme] 驱动 ----------
   「跟随系统」在首帧内联脚本里已解析成 light|dark，
   所以这里不再写 prefers-color-scheme 分支 —— 否则用户手动选浅色会被系统偏好覆盖。 */
html[data-theme="dark"] .login-page {
  color-scheme: dark;
  background: #0a0b12;
  color: #eef0f8;
}
html[data-theme="dark"] .lp-bg {
  background:
    radial-gradient(52% 46% at 6% -4%, rgba(99, 102, 241, .26), transparent 62%),
    radial-gradient(46% 40% at 94% 2%, rgba(139, 92, 246, .20), transparent 62%);
}
html[data-theme="dark"] .lp-bg::after {
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
html[data-theme="dark"] .lp-time,
html[data-theme="dark"] .lp-d { color: #f4f5fb; }
html[data-theme="dark"] .lp-date .lp-wd { color: #9aa2ba; background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .lp-lunar { color: #8b93ad; }
html[data-theme="dark"] .lp-weather {
  border-color: #232a44;
  background: rgba(20, 24, 40, .74);
  box-shadow: 0 12px 30px -22px #000;
}
html[data-theme="dark"] .lp-wi { color: #a5b4fc; }
html[data-theme="dark"] .lp-wt span { color: #a9b0c8; }
html[data-theme="dark"] .lp-wm b { color: #7f88a2; }
html[data-theme="dark"] .lp-wm span { color: #5c6684; }
html[data-theme="dark"] .lp-quote::before {
  background: linear-gradient(180deg, #818cf8, #a78bfa 60%, rgba(167, 139, 250, .12));
}
html[data-theme="dark"] .lp-quote-text { color: #dee2f2; }
html[data-theme="dark"] .lp-quote-foot { color: #7f88a2; }
html[data-theme="dark"] .lp-quote-src { color: #a5b4fc; }
html[data-theme="dark"] .lp-gate {
  border-color: #232a44;
  background: rgba(18, 22, 38, .86);
  box-shadow: 0 30px 60px -40px #000;
}
html[data-theme="dark"] .lp-cal-card {
  border-color: #1e2438;
  background: rgba(16, 20, 34, .7);
  box-shadow: 0 16px 36px -32px #000;
}
html[data-theme="dark"] .lp-gate-title { color: #f2f4fb; }
html[data-theme="dark"] .lp-gate-sub { color: #9aa3b8; }
html[data-theme="dark"] .lp-field label { color: #c3c9dc; }
html[data-theme="dark"] .lp-name {
  background: #11152a;
  border-color: #2b3352;
  color: #eef0f8;
}
html[data-theme="dark"] .lp-name::placeholder { color: #9aa3b8; }
html[data-theme="dark"] .lp-name:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .18);
}
html[data-theme="dark"] .lp-secret input {
  background: #11152a;
  border-color: #2b3352;
  color: #eef0f8;
}
html[data-theme="dark"] .lp-secret input::placeholder { color: #9aa3b8; }
html[data-theme="dark"] .lp-secret input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .18);
}
html[data-theme="dark"] .lp-reveal:hover { background: #1c2340; color: #eef0f8; }
html[data-theme="dark"] .lp-msg.err {
  color: #f87171;
  background: rgba(220, 38, 38, .14);
  border-color: #4a2530;
}
html[data-theme="dark"] .lp-msg.hint {
  color: #c7cbf0;
  background: rgba(79, 70, 229, .18);
  border-color: #3a3f6b;
}
html[data-theme="dark"] .cal-title b { color: #f2f4fb; }
html[data-theme="dark"] .cal-gz { color: #7f88a2; }
html[data-theme="dark"] .cal-btn {
  border-color: #2b3352;
  background: #151a2e;
  color: #c3c9dc;
}
html[data-theme="dark"] .cal-btn:hover { border-color: #3a4368; color: #fff; }
html[data-theme="dark"] .cal-wd { color: #7f88a2; }
html[data-theme="dark"] .cal-wd.is-weekend { color: #5c6684; }
html[data-theme="dark"] .cal-cell:hover { background: #1a2038; }
html[data-theme="dark"] .cal-cell.is-weekend .cal-day { color: #c3c9dc; }
html[data-theme="dark"] .cal-cell.is-today {
  background: linear-gradient(140deg, #4f46e5, #7c3aed);
  border-color: transparent;
  box-shadow: 0 8px 20px -12px rgba(99, 102, 241, .9);
}
html[data-theme="dark"] .cal-cell.is-today .cal-day { color: #fff; }
html[data-theme="dark"] .cal-cell.is-today .cal-sub { color: rgba(255, 255, 255, .82); }
html[data-theme="dark"] .cal-sub { color: #6f7896; }
html[data-theme="dark"] .cal-sub.is-lunar-month { color: #8b93ad; }
html[data-theme="dark"] .cal-sub.is-term { color: #34d399; }
html[data-theme="dark"] .cal-sub.is-fest { color: #c4b5fd; }
html[data-theme="dark"] .cal-sub.is-legal { color: #f87171; }
html[data-theme="dark"] .lp-cal-side {
  background: rgba(24, 29, 48, .6);
  border-color: #1e2438;
}
html[data-theme="dark"] .lp-side-row { background: #1a2038; color: #c3c9dc; }
html[data-theme="dark"] .lp-side-row.is-term { background: rgba(16, 185, 129, .14); color: #34d399; }
html[data-theme="dark"] .lp-side-h { color: #6f7896; }
html[data-theme="dark"] .lp-side-row b { color: #6f7896; }
html[data-theme="dark"] .lp-side-empty { color: #5c6684; }
html[data-theme="dark"] .lp-foot { color: #6f7896; }
html[data-theme="dark"] .lp-foot-links a { color: #6f7896; }
html[data-theme="dark"] .lp-foot-links a:hover { color: #a5b4fc; }

/* ---------- 入场动效 ----------
   与工作台同一套曲线（--mo-ease-out，定义在 app.css）：只动 opacity/transform，
   读起来是「墙上依次亮起来」，不是整页闪一下。 */
@keyframes lp-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.lp-time { animation: lp-rise .42s var(--mo-ease-out) both; }
.lp-date, .lp-lunar { animation: lp-rise .44s .04s var(--mo-ease-out) both; }
.lp-weather { animation: lp-rise .44s .08s var(--mo-ease-out) both; }
.lp-quote { animation: lp-rise .46s .12s var(--mo-ease-out) both; }
.lp-gate { animation: lp-rise .46s .06s var(--mo-ease-out) both; }
.lp-cal-card { animation: lp-rise .48s .16s var(--mo-ease-out) both; }
.lp-foot { animation: lp-fade .5s .2s var(--mo-ease-out) both; }

/* 系统要求减少动效时，收掉所有过渡与旋转 —— 不影响可用性，只是不晃 */
@media (prefers-reduced-motion: reduce) {
  .login-page *,
  .login-page *::before,
  .login-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .lp-spin { animation: none; border-color: rgba(255, 255, 255, .45); border-top-color: transparent; }
}

/* ---------- 暗色：日历 + 本月概览 ---------- */
html[data-theme="dark"] .cal-wd { color: #9aa2ba; }
html[data-theme="dark"] .cal-wd.is-weekend { color: #f87171; }
html[data-theme="dark"] .cal-cell {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .cal-cell:hover { background: rgba(99, 102, 241, .16); border-color: rgba(99, 102, 241, .3); }
html[data-theme="dark"] .cal-day { color: #eef0f8; }
html[data-theme="dark"] .cal-sub { color: #9aa2ba; }
html[data-theme="dark"] .cal-sub.is-lunar-month { color: #8b93ad; }
html[data-theme="dark"] .cal-sub.is-term { color: #34d399; }
html[data-theme="dark"] .cal-sub.is-fest { color: #c4b5fd; }
html[data-theme="dark"] .cal-sub.is-legal { color: #f87171; }
html[data-theme="dark"] .cal-cell.is-weekend { background: rgba(99, 102, 241, .1); }
html[data-theme="dark"] .cal-cell.is-weekend .cal-day { color: #c7d2fe; }
html[data-theme="dark"] .cal-cell.is-legal { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .32); }
html[data-theme="dark"] .cal-cell.is-legal .cal-day { color: #f87171; }
html[data-theme="dark"] .cal-cell.is-legal::after { background: #f87171; }
html[data-theme="dark"] .cal-cell.is-fest { background: rgba(167, 139, 250, .12); }
html[data-theme="dark"] .cal-cell.is-muted { opacity: .4; background: transparent; border-color: transparent; }
html[data-theme="dark"] .cal-cell.is-today { background: rgba(99, 102, 241, .22); border-color: rgba(129, 140, 248, .5); }
html[data-theme="dark"] .cal-cell.is-today .cal-day { color: #fff; }
html[data-theme="dark"] .cal-cell.is-today::after { background: #a5b4fc; }
html[data-theme="dark"] .cal-cell.is-selected::after { background: #fff; }

html[data-theme="dark"] .lp-cal-side { background: rgba(24, 29, 48, .6); border-color: #1e2438; }
html[data-theme="dark"] .lp-side-h { color: #6f7896; }
html[data-theme="dark"] .lp-side-month { color: #8b93ad; }
html[data-theme="dark"] .lp-side-next { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .3); }
html[data-theme="dark"] .lp-side-next.is-empty { background: rgba(255, 255, 255, .05); border-color: #2b3352; }
html[data-theme="dark"] .lp-side-next-label { color: #f87171; }
html[data-theme="dark"] .lp-side-next.is-empty .lp-side-next-label { color: #9aa2ba; }
html[data-theme="dark"] .lp-side-next-name { color: #fca5a5; }
html[data-theme="dark"] .lp-side-next-count { color: #f87171; }
html[data-theme="dark"] .lp-side-next-date { color: #fca5a5; }
html[data-theme="dark"] .lp-side-row { background: #1a2038; color: #c3c9dc; }
html[data-theme="dark"] .lp-side-row b { color: #9aa2ba; }
html[data-theme="dark"] .lp-side-row.is-term { background: rgba(16, 185, 129, .14); }
html[data-theme="dark"] .lp-side-row.is-term b { color: #34d399; }
html[data-theme="dark"] .lp-side-tag { background: rgba(248, 113, 113, .18); color: #f87171; }
html[data-theme="dark"] .lp-side-row.is-term .lp-side-tag { background: rgba(16, 185, 129, .18); color: #34d399; }
html[data-theme="dark"] .lp-side-empty { color: #5c6684; }
html[data-theme="dark"] .lp-side-legend { border-color: #1e2438; }
html[data-theme="dark"] .lp-leg { color: #8b93ad; }
html[data-theme="dark"] .lp-leg-dot { background: rgba(255, 255, 255, .1); color: #c3c9dc; }
html[data-theme="dark"] .lp-leg-dot.is-legal { background: rgba(248, 113, 113, .2); color: #f87171; }
html[data-theme="dark"] .lp-leg-dot.is-term { background: rgba(16, 185, 129, .2); color: #34d399; }