/* WealthOS — 登录页（浅色极简 / 深色玻璃，可切换）
   浅色参考衍观 monitor.seeseeworld.top；深色为深炭灰磨砂玻璃 + 银色流线。
   字体：Space Grotesk + Inter（缺失时回退系统栈）。 */

:root,
[data-theme="light"] {
  --lg-bg: #e7e8e6;
  --lg-ink: #22282a;
  --lg-muted: #5f6767;
  --lg-faint: #838a8a;
  --lg-line-strong: #9aa1a0;
  --lg-glass: rgba(255, 255, 255, .62);
  --lg-glass-border: rgba(20, 26, 26, .1);
  --lg-accent: #2f6fd0;
  --lg-danger: #c0392b;
  --lg-grid: rgba(20, 26, 26, .03);
  --lg-vignette: rgba(30, 34, 34, .06);
  --lg-sheen: rgba(255, 255, 255, .85);
  --lg-shadow: rgba(30, 40, 40, .1);
  --lg-card-inset: rgba(255, 255, 255, .8);
  --lg-btn-bg: #232829;
  --lg-btn-fg: #f6f7f6;
  --lg-btn-bg-hover: #101414;
  --lg-hover-bg: rgba(20, 26, 26, .06);
  --lg-mark-shadow: rgba(60, 80, 140, .22);
  --switch-track: rgba(20, 26, 26, .10);
  --switch-ico: rgba(20, 26, 26, .45);
  --field-line-rgb: 52, 59, 59;
  --lg-fallback-bg: #fbfcfe;
  --lg-greeting: 64px;                       /* 登录转场问候语（大屏） */
  --lg-greeting-sm: 40px;                    /* 窄屏降级，避免长问候溢出 */
}

[data-theme="dark"] {
  --lg-bg: #16181d;
  --lg-ink: #e9eef6;
  --lg-muted: #a6aebb;
  --lg-faint: #7e8794;
  --lg-line-strong: #3a414c;
  --lg-glass: rgba(255, 255, 255, .07);
  --lg-glass-border: rgba(255, 255, 255, .13);
  --lg-accent: #6ea8f0;
  --lg-danger: #f08577;
  --lg-fallback-bg: #22262c;
  --lg-grid: rgba(255, 255, 255, .022);
  --lg-vignette: rgba(0, 0, 0, .45);
  --lg-sheen: rgba(255, 255, 255, .1);
  --lg-shadow: rgba(0, 0, 0, .5);
  --lg-card-inset: rgba(255, 255, 255, .14);
  --lg-btn-bg: #e9eef6;
  --lg-btn-fg: #16181d;
  --lg-btn-bg-hover: #ffffff;
  --lg-hover-bg: rgba(255, 255, 255, .08);
  --lg-mark-shadow: rgba(0, 0, 0, .4);
  --switch-track: rgba(255, 255, 255, .12);
  --switch-ico: rgba(255, 255, 255, .55);
  --field-line-rgb: 206, 214, 228;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--lg-bg);
  color: var(--lg-ink);
  display: grid; grid-template-rows: 1fr 1fr; justify-items: center;
  align-items: stretch;
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(20px, 3.5vh, 44px);
  overflow: auto;
  transition: background var(--transition-normal) ease, color var(--transition-normal) ease;
}

/* ============ 主题模式切换（三段：浅色 / 自动 / 深色，右上角） ============ */
.theme-seg {
  /* 登录页：浮在右上角（组件本体样式见 base.css，两端同名 morph） */
  position: fixed; top: clamp(16px, 2.6vh, 28px); right: clamp(16px, 2.6vh, 28px);
  z-index: 10; background: var(--switch-track);
  border-color: var(--lg-glass-border); box-shadow: 0 6px 16px var(--lg-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.theme-seg .seg-opt { color: var(--switch-ico); }
.theme-seg .seg-opt:hover { color: var(--lg-ink); }

/* ============ 背景舞台：流线 + 极淡网格 + 柔光 ============ */
.login-stage {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none; background: var(--lg-bg);
}
.grid-layer {
  position: absolute; inset: -46px;
  background-image:
    linear-gradient(var(--lg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lg-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 62%, transparent 100%);
  animation: grid-drift 36s linear infinite;
}
@keyframes grid-drift { from { transform: translate(0, 0); } to { transform: translate(46px, 46px); } }

/* 背景流线缎带（Canvas）：中心留白、外围清晰 */
.line-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, .22) 16%, #000 72%);
          mask-image: radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, .22) 16%, #000 72%);
}

/* 柔和暗角 */
.login-stage::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, var(--lg-vignette) 100%);
}

/* ============ 磨砂玻璃卡片 ============ */
.login-card {
  grid-row: 2; align-self: center;
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  padding: 42px 40px 30px;
  border-radius: var(--radius-lg);          /* 卡片矩形圆角（与全站卡片一致：lg=8） */
  background: var(--lg-glass);
  border: 1px solid var(--lg-glass-border);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 20px 50px var(--lg-shadow), inset 0 1px 0 var(--lg-card-inset);
}
@supports not (backdrop-filter: blur(1px)) {
  .login-card { background: color-mix(in srgb, var(--lg-bg) 88%, var(--lg-fallback-bg)); }
}
.login-card.shake {
  /* 仅抖动：入场动画已由子元素错峰接管（卡片本身是共享元素，不做 transform 入场） */
  animation: login-shake .45s ease-in-out;
}
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* 玻璃光泽扫过 */
.login-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, var(--lg-sheen) 46%, transparent 62%);
  background-size: 260% 260%;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 130% 0; }
  50% { background-position: -40% 0; }
}

/* 品牌字标：与侧栏 .sidebar-title 同字体/字重/字距/渐变（视觉同源） */
.wordmark {
  grid-row: 1; align-self: center;
  margin: 0; text-align: center;
  font-family: var(--font-serif); font-size: clamp(3.4rem, min(15vw, 20vh), 8rem);
  font-weight: 700; letter-spacing: .02em; line-height: 1.1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: item-in .62s .06s var(--ease-emphasized) both;
}
.title {
  margin: 0; text-align: center;
  font-family: 'Space Grotesk', 'Inter', var(--font-sans);
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: .01em;
  color: var(--lg-ink);
  animation: item-in .56s .12s var(--ease-emphasized) both;
}
.subtitle {
  margin: 8px 0 0; text-align: center;
  font-size: var(--text-sm); color: var(--lg-muted); letter-spacing: .01em;
  animation: item-in .56s .16s var(--ease-emphasized) both;
}
.greeting {
  margin: 6px 0 22px; text-align: center;
  font-size: var(--text-xs); color: var(--lg-faint); min-height: 16px;
  animation: item-in .56s .2s var(--ease-emphasized) both;
}

/* ============ 下划线输入字段（浮动标签 + 焦点线展开） ============ */
.login-field { position: relative; margin-bottom: 24px; }
.login-field:nth-of-type(1) { animation: item-in .56s .26s var(--ease-emphasized) both; }
.login-field:nth-of-type(2) { animation: item-in .56s .32s var(--ease-emphasized) both; }
.login-field input {
  width: 100%; box-sizing: border-box;
  height: 54px; padding: 22px 2px 8px;
  font-size: var(--text-base); font-family: inherit;
  color: var(--lg-ink);
  background: transparent;
  border: none; border-bottom: 1px solid var(--lg-line-strong);
  border-radius: 0; outline: none;
}
.login-password-field input { padding-right: 44px; }
.login-field input:hover { border-bottom-color: var(--lg-muted); }
.login-field > label {
  position: absolute; left: 2px; top: 16px;
  font-size: var(--text-base); color: var(--lg-muted);
  pointer-events: none; transform-origin: 0 0;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), color .18s ease;
}
.login-field input:focus + label,
.login-field input:not(:placeholder-shown) + label {
  transform: translateY(-13px) scale(.78);
}
.login-field:focus-within > label { color: var(--lg-accent); }
.login-field-line {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--lg-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.login-field:focus-within .login-field-line { transform: scaleX(1); }
.login-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--lg-ink);
  transition: background-color 9999s ease-out;
}

/* 密码可见切换 */
.pwd-toggle {
  position: absolute; right: 0; top: 12px;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-lg);
  color: var(--lg-faint); cursor: pointer;
  transition: color var(--transition-fast) ease, background var(--transition-fast) ease;
}
.pwd-toggle:hover { color: var(--lg-ink); background: var(--lg-hover-bg); }
.pwd-toggle svg { width: 17px; height: 17px; }

.forgot-row { text-align: right; margin: -10px 0 18px; animation: item-in .56s .36s var(--ease-emphasized) both; }
.forgot { font-size: var(--text-xs); color: var(--lg-muted); }

/* ============ 主题切换过渡（柔和变色） ============ */
.login-card { transition: background-color .32s ease, border-color .32s ease, box-shadow .32s ease; }
.login-field input { transition: color .32s ease, border-bottom-color .32s ease; }
.login-field-line { transition: transform .28s cubic-bezier(.16, 1, .3, 1), background-color .32s ease; }
.pwd-toggle { transition: color .32s ease, background-color .32s ease; }
.title, .subtitle, .greeting, .forgot, .card-foot { transition: color .32s ease; }

/* ============ 实底按钮 ============ */
.btn-block {
  width: 100%; box-sizing: border-box; padding: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--text-base); font-weight: 600; font-family: inherit; letter-spacing: .04em;
  color: var(--lg-btn-fg); background: var(--lg-btn-bg);
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--transition-normal) ease, transform var(--transition-fast) ease;
  animation: item-in .56s .42s var(--ease-spring) both;
}
.btn-block:hover { background: var(--lg-btn-bg-hover); }
.btn-block:active { transform: translateY(1px); }
.btn-block .btn-arrow { width: 17px; height: 17px; transition: transform .2s var(--ease-standard); }
.btn-block:hover .btn-arrow { transform: translateX(3px); }
.btn-block.is-loading { pointer-events: none; opacity: .92; }
.btn-block.is-loading .btn-arrow { display: none; }
.btn-block.is-loading::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  opacity: .8;
  animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* 错误提示 */
.error {
  display: none; margin: 0 0 14px; padding: 9px 12px; text-align: center;
  font-size: var(--text-xs); color: var(--lg-danger);
  background: color-mix(in srgb, var(--lg-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg-danger) 26%, transparent);
  border-radius: var(--radius-lg);
  animation: item-in .25s var(--ease-emphasized) both;
}

/* 底部脚注 */
.card-foot {
  margin-top: 22px; text-align: center;
  font-size: var(--text-xs); color: var(--lg-faint); letter-spacing: .04em;
  animation: item-in .56s .46s var(--ease-emphasized) both;
}
@keyframes item-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ============ 移动端：居中布局、全宽卡片、顶部为主题控件留位 ============ */
@media (max-width: 640px), (max-height: 660px) {
  body {
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-items: start;
    justify-items: center;
    row-gap: clamp(16px, 3.5vh, 36px);
    padding: 64px 16px 28px;
  }
  .wordmark, .login-card { grid-row: auto; align-self: auto; }
  .login-card {
    max-width: 100%;
    padding: 32px 22px 24px;
    border-radius: var(--radius-lg);
  }
  .wordmark { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .title { font-size: var(--text-xl); }
  .subtitle, .greeting { font-size: var(--text-xs); }
  .theme-seg { width: 104px; height: 30px; }
  .seg-opt svg { width: 14px; height: 14px; }
}

/* ============ 无障碍：减少动效 ============ */
@media (prefers-reduced-motion: reduce) {
  .grid-layer, .login-card::after { animation: none; }
  .login-card, .login-card.shake, .wordmark, .title, .subtitle, .greeting,
  .login-field, .forgot-row, .btn-block, .error, .card-foot { animation: none; }
  .btn-block.is-loading::before { animation-duration: 1.2s; }
}

/* ============ 登录换场：卡片离场 + 过渡场景淡入 ============ */
.login-transition {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: var(--lg-bg);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-emphasized), visibility .35s;
}
body.leaving .login-transition { opacity: 1; visibility: visible; }
body.leaving .login-card { animation: card-leave .5s var(--ease-emphasized) both; }
body.leaving .theme-seg { opacity: 0; transition: opacity .3s ease; }
.lt-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lt-ring { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--lg-glass-border); border-top-color: var(--lg-accent); animation: login-spin .8s linear infinite; }
.lt-text { color: var(--lg-ink); font-size: var(--lg-greeting); font-family: var(--font-serif); font-weight: 600;
  letter-spacing: .01em; line-height: 1.2; text-align: center; max-width: 90vw; overflow-wrap: break-word;
  animation: item-in .56s .15s var(--ease-emphasized) both; }
@keyframes card-leave {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-14px) scale(.97); }
}


/* ============ 登录 → 仪表盘 共享元素过渡（MPA View Transitions） ============ */


@keyframes login-fade { from { opacity: 0; } to { opacity: 1; } }
.theme-seg { animation: login-fade .5s ease .08s both; }
@media (prefers-reduced-motion: reduce) {
  .wordmark, .title, .subtitle, .greeting, .login-field, .forgot-row, .login-card .btn, .card-foot,
  .theme-seg, .lt-text { animation: none !important; }
}




/* 窄屏：问候语降级（64px 在手机宽度下会溢出） */
@media (max-width: 640px) {
  .lt-text { font-size: var(--lg-greeting-sm); }
}