/* =============================================================
   情侣小站 · 古风主题（叠加层）
   -------------------------------------------------------------
   取向：
     · 宣纸为底、松烟为墨、朱砂点睛、泥金勾边
     · 楷体标题 + 字距疏朗，正文沿用文楷
     · 直角、发丝线、印章式朱砂方块点缀
   回退：删除 index.html 中引用本文件的那一行即可。
   ============================================================= */

:root {
  --paper: #f4eee1;      /* 宣纸 */
  --paper-2: #faf6ec;    /* 熟宣（卡片） */
  --ink: #2c2721;        /* 松烟墨 */
  --ink-2: #5a5244;      /* 淡墨 */
  --ink-3: #857b66;      /* 焦茶 */
  --rule: #d9cfb6;       /* 泥金淡线 */
  --vermilion: #a03a2a;  /* 朱砂（印泥） */
  --gold: #a98c5c;       /* 泥金 */

  --primary: #a84a38;
  --primary-soft: #eadfca;
  --primary-deep: #7d2c1d;
  --primary-rgb: 160, 58, 42;
  --accent-rgb: 125, 44, 29;
  --btn-rgb: 160, 58, 42;

  --bg: var(--paper);
  --card: var(--paper-2);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --border: var(--rule);
  --surface: var(--paper-2);
  --surface-2: var(--paper-2);
  --panel-soft: #efe7d3;
  --switch-track: #d2c6a8;

  --radius: 12px;
  --shadow: none;
  --shadow-float: 0 18px 44px rgba(44, 39, 33, .14);
  --shadow-float-sm: 0 8px 22px rgba(44, 39, 33, .11);
  --shadow-accent: none;
  --shadow-accent-strong: none;
  --shadow-hover: 0 10px 26px rgba(44, 39, 33, .10);

  --tabbar-bg: rgba(244, 238, 225, .97);
  --topbar-bg: rgba(244, 238, 225, .95);
  --overlay: rgba(44, 39, 33, .93);

  --hero-grad: linear-gradient(180deg, #efe7d3, #f4eee1);
  --btn-grad: var(--vermilion);   /* 主按钮朱砂 */
  --on-primary: #faf6ec;
}

body.dark {
  --paper: #16130f;
  --paper-2: #1e1a15;
  --ink: #ece4d3;
  --ink-2: #bdb29a;
  --ink-3: #8e8370;
  --rule: #3a3327;
  --vermilion: #c4523e;
  --bg: var(--paper);
  --card: var(--paper-2);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --border: var(--rule);
  --surface: #231e17;
  --surface-2: #231e17;
  --panel-soft: #262019;
  --shadow: none;
  --shadow-accent: none;
  --shadow-accent-strong: none;
  --topbar-bg: rgba(22, 19, 15, .95);
  --tabbar-bg: rgba(22, 19, 15, .97);
  --hero-grad: linear-gradient(180deg, #262019, #1e1a15);
  --btn-grad: #ece4d3;
  --on-primary: #16130f;
}

/* ---------- 字体与排版 ---------- */
:root {
  --font-song: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", "宋体", "NSimSun", serif;
  --font-body: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", "宋体", serif;
  --font-hand: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", "宋体", serif;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  /* 宣纸细纹 + 极淡水墨晕染 */
  background-image:
    repeating-linear-gradient(90deg, rgba(44, 39, 33, .010) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(44, 39, 33, .008) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 8% 4%, rgba(169, 140, 92, .05), transparent 55%),
    radial-gradient(120% 100% at 96% 96%, rgba(160, 58, 42, .04), transparent 55%);
  background-attachment: fixed;
  letter-spacing: .02em;
}
body.dark { background-image: none; }

.topbar-title,
.card-title,
.sheet-title,
.modal-title,
h1, h2, h3 {
  font-family: var(--font-song);
  letter-spacing: .22em;
  font-weight: 600;
}
.topbar-title {
  font-size: 18px;
  letter-spacing: .38em;
  margin-right: -.38em;
}

/* 卡片标题：泥金线承托，右侧渐隐 */
.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.card-title::after {
  content: "";
  order: 99;
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .5;
  margin-left: 4px;
}
.card-title > *:last-child { order: 98; }

.card-body, .page, p, li { line-height: 1.9; }
.ab-tl-date, .ab-since, .empty, .field-hint, small, .meta, .sub { letter-spacing: .1em; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}
.topbar-btn { color: var(--ink); border-radius: 12px; }
.topbar-btn:hover { background: transparent; color: var(--vermilion); }
.topbar-btn::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 0; height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width .22s ease;
}
.topbar-btn:hover::after { width: 16px; }

/* ---------- 卡片：熟宣 + 泥金线 + 左上印章 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
  padding: 22px 20px;
  margin-bottom: 18px;
  position: relative;
}
/* 印章：朱砂小方块，像落了一方私印 */
.card::before {
  content: "";
  position: absolute;
  left: 16px; top: 18px;
  width: 7px; height: 7px;
  background: var(--vermilion);
  opacity: .9;
}
.card:hover { box-shadow: 0 1px 0 var(--rule); }

/* ---------- 按钮：朱砂实心 / 墨描边 ---------- */
.btn {
  border-radius: 12px;
  letter-spacing: .18em;
  font-weight: 600;
}
.btn-primary {
  background: var(--vermilion);
  color: var(--on-primary);
  border: 1px solid var(--vermilion);
}
.btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper-2); }
.btn-sm { border-radius: 12px; }

.chip {
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: transparent;
  letter-spacing: .08em;
}
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }

/* ---------- 底栏 ---------- */
.tabbar {
  background: var(--tabbar-bg);
  backdrop-filter: blur(14px) saturate(1.05);
  border-top: 1px solid var(--rule);
  box-shadow: none;
}
.tabbar a, .tabbar button, .tabbar .tab { letter-spacing: .14em; }
.tabbar .active, .tabbar a.active, .tabbar button.active { color: var(--vermilion); }

/* ---------- 表单：下划线 ---------- */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], textarea, select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 2px;
  font-family: var(--font-body);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom-color: var(--vermilion);
  box-shadow: none;
}
textarea { border: 1px solid var(--rule); padding: 12px; line-height: 1.85; }

/* ---------- 弹窗 / 抽屉 ---------- */
.modal, .sheet, .modal-card, .sheet-panel {
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-float);
}
.sheet-title, .modal-title {
  letter-spacing: .26em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}

.empty { color: var(--ink-3); font-family: var(--font-song); letter-spacing: .16em; padding: 36px 12px; }

img, .ab-photo img, .photo, .thumb { border-radius: 12px; }
.ab-photo, .photo-item, .thumb { border: 1px solid var(--rule); overflow: hidden; }

/* ---------- 首页 hero：宣纸 + 朱砂大数字 + 印章式小印 ---------- */
.hero, .ab-hero {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
}
.hero::before, .hero::after, .ab-hero::before, .ab-hero::after { background: none; }
.hero .couple { font-family: var(--font-song); letter-spacing: .34em; font-size: 15px; color: var(--ink-2); }
.hero .days .love-main, .ab-hero .ab-day { font-family: var(--font-song); font-weight: 700; color: var(--ink); }
.hero .days .love-num { color: var(--vermilion); font-style: normal; }
.hero .days .love-sub { font-family: var(--font-song); color: var(--ink-3); letter-spacing: .16em; font-weight: 400; }
.hero .quote .say-text { font-family: var(--font-song); color: var(--ink-2); letter-spacing: .1em; }
.hero .couple-avatars .arco-avatar, .ab-hero .ab-ava { border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); }
.hero .couple-avatars .heart, .ab-hero .ab-heart { color: var(--vermilion); filter: none; text-shadow: none; }

/* ---------- 头像 / 图标 / FAB / 链接 ---------- */
.couple-avatars .arco-avatar-circle { border-radius: 12px; border: 1px solid var(--rule); box-shadow: none; }
.module-card, .module-icon, .module-icon .ico-tint { border-radius: 12px; }
.module-icon .ico-tint { background: var(--panel-soft); }
.module-icon .ico, .module-icon .ico-tint { color: var(--vermilion); }
.module-icon svg [fill], .module-icon svg[fill],
.tabbar svg [fill], .tabbar svg[fill],
.topbar svg [fill], .topbar svg[fill] { fill: currentColor; }
.tabbar svg, .topbar svg { color: var(--ink-3); }
.tabbar .active svg, .tabbar a.active svg, .tabbar button.active svg { color: var(--vermilion); }

.fab, .float-btn, .ab-add {
  border-radius: 12px;
  background: var(--vermilion);
  color: var(--paper-2);
  box-shadow: 0 6px 20px rgba(160, 58, 42, .22);
}

.page-head, .section-head { border-bottom: 1px solid var(--rule); }
.list-item.active, .list-item[aria-selected="true"], .item.selected {
  background: var(--panel-soft);
  border-left: 2px solid var(--vermilion);
}
progress, .bar, .meter, .progress { accent-color: var(--vermilion); }
a, .link { color: var(--vermilion); }
a:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }
::selection { background: rgba(160, 58, 42, .18); }
:focus-visible { outline: 1px solid var(--vermilion); outline-offset: 2px; }

/* ---------- 展示页 / 登录页海报色 ---------- */
:root {
  --sc-bg: #f4eee1;
  --sc-card: #faf6ec;
  --sc-text: #2c2721;
  --sc-text-soft: #5a5244;
  --sc-border: #d9cfb6;
  --sc-surface: #faf6ec;
  --sc-panel-soft: #efe7d3;
  --sc-switch-track: #d2c6a8;
  --sc-topbar-bg: rgba(244, 238, 225, .95);
  --sc-tabbar-bg: rgba(244, 238, 225, .97);
  --sc-primary: #a84a38;
  --sc-primary-soft: #eadfca;
  --sc-primary-deep: #7d2c1d;
  --sc-btn-grad: #a03a2a;
  --sc-primary-rgb: 160, 58, 42;
  --sc-accent-rgb: 125, 44, 29;
  --sc-btn-rgb: 160, 58, 42;
  --sc-hero-grad: linear-gradient(180deg, #ece2cc, #f4eee1 72%);
  --sc-auth-grad: linear-gradient(180deg, #e9dec7 0%, #f4eee1 62%, #f4eee1 100%);
}
body.is-auth .auth-screen, body.is-showcase .auth-screen {
  color: var(--ink);
  background: var(--sc-auth-grad);
}
body.is-auth .waves, body.is-showcase .waves { display: none; }
.showcase-topbar {
  background: rgba(244, 238, 225, .82);
  backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: none;
  border-bottom: 1px solid var(--rule);
}
.showcase-topbar .st-name { font-family: var(--font-song); letter-spacing: .3em; font-weight: 600; color: var(--ink); }
.showcase-topbar .st-quote { color: var(--ink-2); font-style: normal; letter-spacing: .08em; }
.showcase-avatars .showcase-avatar { border-radius: 12px; box-shadow: none; outline: 1px solid var(--rule); outline-offset: 3px; }
.showcase-avatars .avatar-name { font-family: var(--font-song); letter-spacing: .32em; color: var(--ink); }
.showcase-love .love-main, .showcase-love .days { font-family: var(--font-song); letter-spacing: .04em; color: var(--ink); }
.showcase-love .couple, .showcase-love .love-sub { color: var(--ink-2); letter-spacing: .2em; }

/* ---------- 压住 JS 主题色 ---------- */
html[data-theme-color], html[data-theme-color] body {
  --primary: #a84a38;
  --primary-soft: #eadfca;
  --primary-deep: #7d2c1d;
  --primary-rgb: 160, 58, 42;
  --accent-rgb: 125, 44, 29;
  --btn-rgb: 160, 58, 42;
  --bg: var(--paper);
  --card: var(--paper-2);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --border: var(--rule);
  --hero-grad: linear-gradient(180deg, #efe7d3, #f4eee1);
  --btn-grad: var(--vermilion);
  --panel-soft: #efe7d3;
}
body.dark, html[data-theme-color] body.dark {
  --bg: var(--paper);
  --card: var(--paper-2);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --border: var(--rule);
  --hero-grad: linear-gradient(180deg, #262019, #1e1a15);
  --btn-grad: #ece4d3;
}

/* ---------- 打磨层 ---------- */

/* 顶栏标题前落一枚朱砂小印，点题 */
.topbar-title::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--vermilion);
  margin-right: 12px;
  vertical-align: 2px;
  opacity: .9;
}

/* 默认头像暖化：纸色底 + 泥金描边，去掉灰扑扑的占位感 */
.default-avatar, .arco-avatar-image, .arco-avatar .icon {
  background: var(--panel-soft);
}
.couple-avatars .arco-avatar-circle {
  border-color: var(--gold);
}

/* 弹窗 / 抽屉标题下加一条朱砂短横，收束视线 */
.sheet-title::after, .modal-title::after {
  content: "";
  display: block;
  width: 2.2em;
  height: 2px;
  background: var(--vermilion);
  margin-top: 8px;
}

/* 空状态：泥金菱形作装饰，像书页间夹的签 */
.empty::before {
  content: "◇";
  display: block;
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: normal;
}

/* 卡片入场：轻上浮淡入，深色/减动效环境自动关闭 */
.card {
  animation: cardIn .3s ease both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

/* 卡片悬停：泥金描边 + 极轻阴影 */
.card:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(44, 39, 33, .06);
}

/* 主按钮加一点呼吸：hover 轻微提亮 */
.btn-primary { transition: background .18s, border-color .18s, box-shadow .18s; }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(160, 58, 42, .25); }

/* 占位头像：灰色笑脸改成暖墨色，融入整体 */
.arco-avatar .icon.default-avatar,
.default-avatar { color: var(--ink-3); }
.default-avatar svg [fill], .default-avatar svg[fill] { fill: currentColor; }

/* ---------- 登录页（古风版） ----------
   原样式的 .auth-title/.auth-brand/.auth-slogan 都是写死白色（为深粉渐变准备的），
   落到宣纸底上会看不见，这里全部改回墨色，并加一方「同心」印章。 */

.auth-screen.login-mobile,
.auth-screen.login-pc {
  background: var(--sc-auth-grad);
  color: var(--ink);
}

/* 品牌区：图标朱砂、站名楷体拉字距、副题淡墨 */
.auth-logo { color: var(--vermilion); font-size: 46px; }
.auth-logo svg [fill], .auth-logo svg[fill] { fill: currentColor; }

.auth-title {
  font-family: var(--font-song);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .42em;
  margin-right: -.42em;
  text-shadow: none;
  font-size: 24px;
}
.auth-title::after {
  content: "";
  display: block;
  width: 2.4em;
  height: 2px;
  background: var(--vermilion);
  margin: 14px auto 0;
}
.auth-sub {
  color: var(--ink-2);
  letter-spacing: .24em;
  margin-top: 10px;
}

/* 站名下方一方「同心」朱砂印 */
.auth-hero { position: relative; padding: 52px 0 34px; }
.auth-hero::after {
  content: "锦书";
  display: inline-block;
  margin-top: 22px;
  width: 46px; height: 46px;
  line-height: 46px;
  background: var(--vermilion);
  color: var(--paper-2);
  font-family: var(--font-song);
  font-size: 15px;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 3px 8px rgba(160, 58, 42, .28);
}

/* PC 端品牌行 */
.auth-brand {
  font-family: var(--font-song);
  color: var(--ink);
  letter-spacing: .3em;
  text-shadow: none;
}
.auth-brand .ico { color: var(--vermilion); filter: none; }
.auth-brand svg [fill], .auth-brand svg[fill] { fill: currentColor; }
.auth-slogan { color: var(--ink-2); letter-spacing: .2em; }

/* 登录表单卡片：熟宣 + 泥金线，顶部居中一块小印章 */
.auth-form-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(44, 39, 33, .08);
}
.auth-form-card .field label {
  font-family: var(--font-song);
  letter-spacing: .14em;
  color: var(--ink-2);
  font-size: 13px;
}
.auth-form-card .chip.active { background: var(--ink); color: var(--paper-2); }
.auth-form-card .btn-primary { letter-spacing: .3em; }
.auth-tip { color: var(--ink-3); letter-spacing: .06em; }

/* ---------- 登录页修正（高特异性覆盖） ---------- */
.login-mobile .auth-title, .login-pc .auth-brand {
  color: var(--ink);
  text-shadow: none;
}
.login-mobile .auth-sub, .login-pc .auth-slogan { color: var(--ink-2); }

/* 品牌图标（心形 sprite）改成朱砂 */
.auth-logo, .auth-logo *, .auth-brand .ico, .auth-brand .ico * { color: var(--vermilion); }
.auth-logo svg [fill], .auth-logo [fill], .auth-logo use,
.auth-brand svg [fill], .auth-brand [fill], .auth-brand use { fill: currentColor; }

/* 输入框：无 type 的 input 也纳入下划线样式 */
.auth-form-card input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 2px;
  font-family: var(--font-body);
  letter-spacing: .04em;
}
.auth-form-card input:focus {
  outline: none;
  border-bottom-color: var(--vermilion);
  box-shadow: none;
}

/* 去掉表单卡左上那枚多余的角标（登录卡已有「同心」印，避免重复） */
.auth-form-card::before { display: none; }

/* 登录页整体禁止横向溢出（标题字距拉开后可能出现横向滚动） */
.auth-screen.login-mobile, .auth-screen.login-pc { overflow-x: hidden; }

/* 登录卡：box-sizing 归一边框盒，避免 width:100% 加上内边距导致横向溢出 */
.auth-form-card {
  box-sizing: border-box;
  max-width: 100%;
}
/* 收紧品牌区留白，印章与卡片之间留出呼吸 */
.auth-hero { padding: 30px 0 20px; }
.auth-hero::after { margin-top: 16px; }

/* 登录页外层 .content 自带 16px 内边距，与 .login-mobile 自己的 padding 叠加，
   卡片被 auth-screen 的 overflow:hidden 裁掉右缘。这里零掉外层，由登录页自行留边。 */
body.is-auth .content {
  padding-left: 0;
  padding-right: 0;
}
.auth-screen.login-mobile {
  box-sizing: border-box;
  padding: 30px 20px 90px;
}
.login-mobile .auth-form-card {
  box-sizing: border-box;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 根因修正：父级 .auth-screen 用 align-items:center，卡片 width:100% 会溢出并被
   overflow:hidden 裁掉。改为 stretch 让卡片贴合内容宽，并垂直居中、给印章留出间距。 */
.auth-screen.login-mobile {
  align-items: stretch;
  justify-content: center;
  padding: 32px 20px 64px;
}
.auth-hero { margin-bottom: 10px; padding-bottom: 26px; }
.login-mobile .auth-form-card {
  width: auto;
  max-width: 100%;
  margin: 0;
  align-self: stretch;
}

/* 兜底：登录页整体锁死视口宽，卡片宽度按视口精确计算，彻底消除右缘裁剪 */
body.is-auth { overflow-x: hidden; }
.auth-screen.login-mobile, .auth-screen.login-pc { max-width: 100vw; }
.login-mobile .auth-form-card {
  width: calc(100vw - 40px);
  max-width: 398px;
}

/* 全局禁止横向滚动（防止个别元素字距/装饰造成横向溢出） */
html, body { overflow-x: hidden; }

/* 登录页精简：去掉心形图标与「锦书」印章，只留居中标题与副题 */
.auth-logo { display: none; }
.auth-hero::after { display: none; }
.auth-title { margin-top: 0; }
.auth-hero { padding: 40px 0 22px; }

/* 标题/副题真正居中：用 text-indent 补偿字距造成的视觉偏移，去掉负边距 */
.auth-hero { text-align: center; }
.auth-title {
  letter-spacing: .36em;
  text-indent: .36em;
  margin-right: 0;
  margin-left: 0;
}
.auth-sub {
  letter-spacing: .22em;
  text-indent: .22em;
}

/* 强制居中：auth-hero 用 flex 列 + 水平居中，标题/副题独立占满一行再居中 */
.auth-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.auth-title, .auth-sub {
  width: 100%;
  text-indent: 0;
  text-align: center;
}

/* 登录块整体垂直居中：去掉不对称的上下 padding，交给 justify-content:center */
.auth-screen.login-mobile {
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
.auth-hero { padding-top: 12px; }

/* 平板/宽屏下卡片居中：父级改回 align-items:center，卡片用 align-self:center + 固定宽 */
.auth-screen.login-mobile { align-items: center; }
.login-mobile .auth-form-card {
  align-self: center;
  width: min(398px, calc(100vw - 40px));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.auth-hero { width: 100%; }


/* ============================================================
   古风动画层（锦书 · 全局动效）
   统一时长 / 缓动变量；幅度小、节奏柔，呼应「宣纸朱砂」的克制气质。
   所有动画尊重 prefers-reduced-motion，减动效环境自动关闭。
   ============================================================ */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur-base: .32s;
  --dur-slow: .5s;
}

/* ---------- 页面切换：淡入 + 轻上移 ---------- */
.page { animation: pageIn var(--dur-base) var(--ease-out) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 卡片入场：按序号错落（stagger） ---------- */
.card { animation: cardRise var(--dur-base) var(--ease-out) both; }
.card:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3) { animation-delay: .1s; }
.card:nth-child(4) { animation-delay: .15s; }
.card:nth-child(5) { animation-delay: .2s; }
.card:nth-child(n+6) { animation-delay: .25s; }
@keyframes cardRise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 首页 hero：大数字与文案依次浮现 ---------- */
.hero .couple { animation: fadeIn var(--dur-slow) ease both; }
.hero .love-main,
.hero .love-num { animation: numIn var(--dur-slow) var(--ease-out) .08s both; }
.hero .love-sub,
.hero .quote { animation: fadeIn var(--dur-slow) ease .18s both; }
@keyframes numIn {
  from { opacity: 0; transform: translateY(7px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 双头像：轻弹浮现 ---------- */
.couple-avatars .arco-avatar-circle,
.hero .couple-avatars .arco-avatar {
  animation: avatarPop var(--dur-slow) var(--ease-out) both;
}
.couple-avatars .arco-avatar-circle:nth-child(2),
.hero .couple-avatars .arco-avatar:nth-child(2) { animation-delay: .1s; }
@keyframes avatarPop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 功能网格：图标依次浮现 ---------- */
.module-grid .module-card { animation: cardRise var(--dur-base) var(--ease-out) both; }
.module-grid .module-card:nth-child(1) { animation-delay: .03s; }
.module-grid .module-card:nth-child(2) { animation-delay: .09s; }
.module-grid .module-card:nth-child(3) { animation-delay: .15s; }
.module-grid .module-card:nth-child(4) { animation-delay: .21s; }
.module-grid .module-card:nth-child(5) { animation-delay: .27s; }
.module-grid .module-card:nth-child(6) { animation-delay: .33s; }

/* ---------- 顶栏：标题淡入 + 朱砂小印落印 ---------- */
.topbar-title { animation: fadeIn var(--dur-slow) ease both; }
.topbar-title::before { animation: sealDrop .42s var(--ease-out) both; }
@keyframes sealDrop {
  from { opacity: 0; transform: scale(1.9) rotate(45deg); }
  to   { opacity: .9; transform: none; }
}

/* ---------- 弹窗：遮罩淡入 + 面板自底部滑入 ---------- */
.modal-mask { animation: fadeIn var(--dur-fast) ease both; }
.modal { animation: sheetUp var(--dur-base) var(--ease-soft) both; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sheetUp {
  from { transform: translateY(26px); opacity: .35; }
  to   { transform: none; opacity: 1; }
}

/* ---------- 空状态菱形：缓慢呼吸 ---------- */
.empty::before { animation: diamondBreathe 2.6s ease-in-out infinite; }
@keyframes diamondBreathe {
  0%, 100% { opacity: .45; transform: rotate(0) scale(1); }
  50%      { opacity: 1;   transform: rotate(45deg) scale(1.06); }
}

/* ---------- 按钮：按压反馈 + hover 提亮过渡 ---------- */
.btn-primary,
.btn { transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.btn-primary:active,
.btn:active { transform: scale(.97); }

/* ---------- 胶囊 / 分段：状态平滑过渡 ---------- */
.chip,
.seg,
.seg-pd { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }

/* ---------- FAB：hover 轻浮 ---------- */
.fab { transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.fab:hover { transform: translateY(-2px); }

/* ---------- 列表行：hover 微移 ---------- */
.list-item,
.ls-item { transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.list-item:hover,
.ls-item:hover { transform: translateX(2px); }

/* ---------- 输入框：聚焦下划线平滑过渡 ---------- */
.auth-form-card input { transition: border-color var(--dur-base) var(--ease-soft); }

/* ---------- 登录页：标题、副题、表单卡依次入场 ---------- */
.auth-title { animation: fadeIn var(--dur-slow) ease both; }
.auth-sub { animation: fadeIn var(--dur-slow) ease .1s both; }
.login-mobile .auth-form-card { animation: fadeUp var(--dur-slow) var(--ease-out) .16s both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 减动效：全部关停 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}