/* 登录页：左侧一句话 + 标志性的颜色×尺码矩阵；右侧表单。沿用 app.css 的令牌。 */
.lg-body { min-height: 100vh; }
.lg { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr); }
.lg-story { display: flex; flex-direction: column; gap: 40px; padding: 40px 64px 40px; border-right: 1px solid var(--line); }
.lg-brand { display: flex; align-items: center; gap: 12px; }
.lg-brand .mark { margin: 0; }
.lg-brand-name { font: 600 15px/1.2 var(--f-display); letter-spacing: .12em; }
.lg-brand-name small { display: block; font: 400 12px var(--f-text); letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
.lg-pitch { margin-top: auto; max-width: 30em; }
.lg-pitch h1 { font: 600 38px/1.35 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.lg-pitch p { margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--ink-2); max-width: 34em; }
.lg-mx { display: grid; gap: 3px; max-width: 420px; }
.lg-mx-row { display: grid; grid-template-columns: 92px repeat(3, 1fr); gap: 3px; align-items: center; font-size: 12px; color: var(--ink-2); }
.lg-mx-row.is-head { color: var(--ink-3); font-family: var(--f-num); text-align: center; }
.lg-mx-name { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.lg-mx-cell { height: 26px; border-radius: 4px; display: grid; place-items: center; font: 500 12px var(--f-num); background: var(--heat-4); color: var(--ink-2); opacity: 0; animation: lg-in 280ms var(--ease) forwards; animation-delay: calc(var(--i) * 12ms + 40ms); }
.lg-mx-cell.t-critical { background: var(--heat-1); color: var(--heat-1-ink); font-weight: 600; }
.lg-mx-cell.t-high { background: var(--heat-2); color: var(--ink); }
.lg-mx-cell.t-warn { background: var(--heat-3); color: var(--ink); }
.lg-mx-cap { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.lg-facts { display: grid; gap: 10px; margin-bottom: auto; font-size: 13px; color: var(--ink-2); }
.lg-facts li { display: flex; align-items: center; gap: 10px; }
.lg-facts .ic { width: 16px; height: 16px; color: var(--ink-3); }

.lg-card { display: flex; flex-direction: column; background: var(--surface); }
.lg-card-in { margin: auto; width: min(380px, 100%); padding: 40px 24px; }
.lg-seg { display: flex; width: 100%; margin-bottom: 32px; }
.lg-seg .seg-item { flex: 1; justify-content: center; height: 32px; font-size: 13px; }
.lg-title { font: 600 24px/1.35 var(--f-display); letter-spacing: -.01em; outline: none; }
.lg-sub { margin-top: 6px; font-size: 14px; color: var(--ink-3); line-height: 1.7; }
.lg-sub b { color: var(--ink); font-family: var(--f-num); }
.lg-form { display: grid; gap: 18px; margin-top: 28px; }
.lg-form .input { height: 42px; font-size: 15px; background: var(--raised); }
.lg-pass { position: relative; }
.lg-pass .input { padding-right: 44px; }
.lg-eye { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); }
.lg-eye:hover { background: var(--hover); color: var(--ink); }
.lg-eye[aria-pressed="true"] { color: var(--accent); }
.lg-caps { color: var(--warn); }
.lg-meter { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 2px; }
.lg-meter i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--warn-solid); transition: width 160ms var(--ease), background-color 160ms; }
.lg-meter i.is-ok { background: var(--ok); }
.lg-submit { width: 100%; height: 44px; font-size: 15px; margin-top: 4px; }
.lg-note { font-size: 12px; color: var(--ink-3); text-align: center; }
.lg-pending { text-align: left; }
.lg-pending-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); margin-bottom: 20px; }
.lg-pending-ic .ic { width: 22px; height: 22px; }
.lg-pending-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.lg-foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.lg-theme { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); }
.lg-theme:hover { background: var(--hover); }
@keyframes lg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .lg { grid-template-columns: minmax(0, 1fr); }
  .lg-story { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 20px 28px; gap: 24px; }
  .lg-pitch { margin-top: 0; } .lg-pitch h1 { font-size: 26px; } .lg-pitch p { font-size: 14px; }
  .lg-mx, .lg-facts { display: none; }
  .lg-card-in { padding: 28px 20px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .lg-mx-cell { opacity: 1; } }