/* ============================================================
   我们俩 · 纪念手账主题
   纸张 / 墨色 / 朱砂 / 中文书写感 / 杂志拼贴
   ============================================================ */
:root {
  --bg: #f0f0f0;
  --bg-2: #e5e5e5;
  --card: #fafafa;
  --card-soft: #f0f0f0;
  --ink: #0a0a0a;
  --ink-soft: #383838;
  --muted: #666666;
  --line: #e5e5e5;
  --brand: #db3356;
  --brand-deep: #b52244;
  --brand-soft: #f8e6eb;
  --accent: #41907a;
  --accent-soft: #e4efea;
  --paper-accent: #b0c6b3;
  --gold: #993333;
  --ok: #357c65;
  --danger: #b52244;
  --shadow: none;
  --shadow-soft: none;
  --radius: 6px;
  --radius-sm: 4px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Songti SC", "Noto Serif SC", "SimSun", Georgia, serif;
  --display: "Kaiti SC", "STKaiti", "KaiTi", "FZKai-Z03", "Noto Serif SC", "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "Courier New", "PingFang SC", "Microsoft YaHei", monospace;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="cream"] {
  --bg: #f0f0f0;
  --bg-2: #e5e5e5;
  --card: #fafafa;
  --card-soft: #f0f0f0;
  --ink: #0a0a0a;
  --ink-soft: #383838;
  --muted: #666666;
  --line: #e5e5e5;
  --brand: #c00000;
  --brand-deep: #920000;
  --brand-soft: #f7e5e0;
  --paper-accent: #ffb57d;
  --accent: #41907a;
  --accent-soft: #e4efea;
}

[data-theme="night"] {
  --bg: #0b0b0b;
  --bg-2: #161616;
  --card: #141414;
  --card-soft: #1c1c1c;
  --ink: #f0f0f0;
  --ink-soft: #d5d5d5;
  --muted: #a3a3a3;
  --line: #333333;
  --brand: #db3356;
  --brand-deep: #ef5b78;
  --brand-soft: #351820;
  --accent: #83b8a7;
  --accent-soft: #182a24;
  --paper-accent: #263b31;
  --gold: #d69a9a;
  --ok: #83b8a7;
  --shadow: none;
  --shadow-soft: none;
}

html { background: var(--bg); }
body {
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "calt", "liga", "kern";
}
body::before {
  z-index: -1;
  background-image: var(--paper-grain), linear-gradient(to right, color-mix(in srgb, var(--ink) 2.5%, transparent) 1px, transparent 1px);
  background-size: 180px 180px, 32px 100%;
  background-repeat: repeat;
}
[data-theme="night"] body::before { opacity: .28; }

::selection { background: var(--brand); color: #ffffff; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------------- 字体与页面骨架 ---------------- */
.view { max-width: 1040px; padding: 24px 20px calc(var(--nav-h) + 48px + var(--safe-bottom)); }
.page { gap: 24px; animation: none; }
.page-head { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.page-title { font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: .06em; }
.page-sub { font-size: 13px; margin-top: 6px; }
.section { gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.section-head { min-height: 26px; }
.section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
}
.section-title::after {
  content: attr(data-en);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .14em;
}
.section-head .link { font-size: 12px; }
.section-head .link:hover { text-decoration: underline; text-underline-offset: 4px; }

.topbar {
  padding: 14px 20px 12px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.topbar-title { font-family: var(--display); font-size: 23px; font-weight: 500; letter-spacing: .08em; }
.topbar-date { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }

/* ---------------- 桌面侧栏 ---------------- */
@media (min-width: 980px) {
  .app { grid-template-columns: 248px minmax(0, 1fr); }
  .side {
    gap: 24px;
    padding: 28px 18px 22px;
    background: var(--paper-accent);
    border-right: 1px solid var(--ink);
    backdrop-filter: none;
  }
  .side-brand { align-items: flex-start; padding: 0 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); }
  .side-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    box-shadow: none;
  }
  .side-logo .icon { width: 19px; height: 19px; }
  .side-name { font-family: var(--display); font-size: 25px; font-weight: 500; line-height: 1.15; letter-spacing: .08em; }
  .side-sub { margin-top: 5px; color: var(--ink-soft); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
  .side-nav { gap: 2px; }
  .nav-link {
    min-height: 46px;
    padding: 11px 12px;
    border-radius: 2px;
    color: var(--ink-soft);
    font-size: 14px;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
  }
  .nav-link .icon { color: var(--ink-soft); }
  .nav-link:hover { background: color-mix(in srgb, var(--card) 36%, transparent); transform: translateX(3px); }
  .nav-link.active { background: var(--ink); color: var(--bg); font-weight: 500; }
  .nav-link.active .icon { color: var(--bg); }
  .side-user { border-radius: 2px; color: var(--ink); }
  .side-user:hover { background: color-mix(in srgb, var(--card) 36%, transparent); }
  .side-avatar { border-radius: 50%; background: var(--ink); color: var(--bg); }
  .view { padding: 40px 48px 72px; }
}

/* ---------------- 底部导航 ---------------- */
.tabbar {
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border-top: 1px solid var(--ink);
  backdrop-filter: blur(14px);
}
.tab { position: relative; min-height: 56px; font-size: 11px; transition: color .18s ease, transform .18s ease; }
.tab.active { color: var(--brand); }
.tab.active::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 1px; background: var(--brand); transform: translateX(-50%); }
.tab:active { transform: scale(.96); }

/* ---------------- 卡片、按钮与通用组件 ---------------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: none;
}
.card-pad { padding: 20px; }
.btn {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { filter: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #ffffff; box-shadow: none; }
.btn.primary:hover { background: var(--brand-deep); }
.btn.soft { background: var(--brand-soft); color: var(--brand-deep); border-color: transparent; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.small { min-height: 40px; padding: 8px 12px; border-radius: 3px; font-size: 12px; }
.icon-btn { width: 44px; height: 44px; border-radius: 4px; border-color: var(--line); transition: background-color .18s ease, transform .18s ease; }
.icon-btn:hover { background: var(--card-soft); }
.avatar-btn, .avatar-btn.lg { border-radius: 50%; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); box-shadow: none; }
.avatar-menu { border-radius: 6px; border-color: var(--ink); box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.avatar-menu button, .avatar-menu a { min-height: 44px; border-radius: 3px; }
.chip { min-height: 40px; border-radius: 3px; }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.pill { border-radius: 3px; }
.seg { border-radius: 4px; }
.seg button { min-height: 40px; border-radius: 2px; }
.seg button.active { background: var(--ink); color: var(--bg); box-shadow: none; }
.empty-icon { border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--brand); }
.empty-title { font-family: var(--display); font-size: 21px; font-weight: 500; }

.input, .textarea, .select { border-radius: 4px; background: var(--card); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: none; }
.field > label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
dialog, .modal, .modal-wide { border-radius: 6px !important; }
.modal-head h3 { font-family: var(--display); font-size: 25px; font-weight: 500; }
.modal-foot { border-top: 1px solid var(--ink); }
.toast { border-radius: 4px; }

/* ---------------- 登录与初始化 ---------------- */
.auth-page { background: transparent; }
.auth-card {
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--paper-accent);
}
.auth-brand { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.auth-logo { border-radius: 50%; background: var(--ink); color: var(--bg); box-shadow: none; }
.auth-logo .icon { width: 21px; height: 21px; }
.auth-brand-name { font-family: var(--display); font-size: 25px; font-weight: 500; letter-spacing: .08em; }
.auth-brand-sub { font-family: var(--mono); font-size: 9px; }
.auth-title { font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: .04em; }
.auth-decor { display: none; }
.invite-code { border-radius: 4px; }

/* ---------------- 首页：我们的纪念封面 ---------------- */
.hero {
  min-height: 252px;
  padding: 24px 22px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background-color: var(--paper-accent);
  background-image: linear-gradient(to right, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  box-shadow: none;
  gap: 0;
}
.hero.has-cover {
  border-color: transparent;
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.hero::after { display: none; }
.hero.has-cover::after {
  display: block;
  background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .04) 72%);
}
.hero::before {
  content: "PRIVATE ARCHIVE  /  VOL. 01";
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}
.hero-top {
  top: 58px;
  left: 22px;
  right: 22px;
  display: flex;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  opacity: 1;
}
.hero-top .hero-space { padding-left: 9px; border-left: 1px solid currentColor; font-family: var(--sans); letter-spacing: .12em; }
.hero-label { margin-top: auto; font-family: var(--display); font-size: 23px; letter-spacing: .08em; }
.hero-days {
  color: var(--brand);
  font-family: var(--serif);
  font-size: clamp(72px, 19vw, 104px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.045em;
}
.hero.has-cover .hero-days { color: #ffffff; }
.hero-days small { font-family: var(--display); font-size: 20px; font-weight: 400; margin-left: 10px; letter-spacing: .08em; }
.hero-meta { max-width: calc(100% - 66px); margin-top: 12px; font-size: 11px; opacity: 1; }
.hero-seal {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: 50%;
  color: var(--brand);
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-8deg);
}
.hero.has-cover .hero-seal { border-color: #ffffff; color: #ffffff; }
.reminder-banner { border-radius: 4px; background: var(--brand-soft); border: 1px solid var(--brand); }
.reminder-banner .btn { margin-left: auto; }

.countdown-row { gap: 8px; padding: 0 0 4px; }
.countdown-card {
  min-width: 160px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  box-shadow: none;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease;
}
.countdown-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.countdown-card .cc-title { min-height: 22px; font-size: 13px; }
.countdown-card .cc-days { margin-top: 10px; font-size: 34px; font-weight: 400; }
.countdown-card .cc-meta { margin-top: 8px; font-size: 11px; }
.countdown-card.today { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.countdown-card.today .cc-title, .countdown-card.today .cc-days, .countdown-card.today .cc-meta, .countdown-card.today .cc-days small { color: #ffffff; opacity: 1; }
.today-card { padding: 20px; border-radius: 4px; }
.today-lunar { padding-right: 18px; border-right: 1px solid var(--ink); }
.today-lunar b { font-family: var(--display); font-size: 27px; font-weight: 500; }
.today-info .ti-date { font-size: 15px; }

/* 首页照片：无边距杂志拼贴，第一张作为主图 */
.photo-strip { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-auto-flow: dense; gap: 4px; }
.photo-strip .thumb {
  aspect-ratio: auto;
  border: 0;
  border-radius: 2px;
  background: var(--card-soft);
  cursor: pointer;
}
.photo-strip .thumb:first-child { grid-column: span 2; grid-row: span 2; }
.photo-strip .thumb img { filter: saturate(.86) contrast(.98); transition: transform .28s ease; }
.photo-strip .thumb:hover img { transform: scale(1.025); }
.photo-strip .more-tile { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); }

.stats-row { gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stat { min-height: 76px; padding: 14px 6px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; transition: background-color .18s ease; }
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--brand-soft); }
.stat b { font-size: 28px; font-weight: 400; }
.stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.moment-preview { padding: 18px 2px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; }
.moment-preview .mp-body { font-family: var(--serif); font-size: 17px; line-height: 1.9; }
.place-preview { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.place-preview .pp-thumb { border-radius: 2px; }

@media (min-width: 700px) {
  .photo-strip { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 112px; }
  .home-grid { grid-template-columns: 1.35fr 1fr; gap: 28px; }
  .hero { min-height: 304px; padding: 30px 32px; }
  .hero-top { top: 64px; left: 32px; }
  .hero::before { top: 28px; right: 30px; }
  .hero-seal { right: 30px; bottom: 30px; width: 60px; height: 60px; }
}

/* ---------------- 日历 ---------------- */
.cal-card { border-radius: 4px; }
.cal-title { font-family: var(--display); font-size: 27px; font-weight: 500; }
.cal-cell { min-height: 62px; border-radius: 3px; }
.cal-cell.selected { background: var(--brand-soft); }
.cal-cell.today .cd, .cal-cell.today.selected .cd { background: var(--brand); }
.event-row, .month-item { border-radius: 4px; }
.event-icon { border-radius: 50%; }
.event-title .nth { border-radius: 2px; }

/* ---------------- 相册与灯箱 ---------------- */
.photo-grid { gap: 4px; }
.photo-item { border: 0; border-radius: 2px; }
.photo-item img { filter: saturate(.88) contrast(.98); transition: transform .28s ease; }
.photo-item:hover img { transform: scale(1.025); }
.photo-item .pi-badge { left: 0; bottom: 0; max-width: 100%; padding: 4px 8px; border-radius: 0; background: rgba(10, 10, 10, .82); backdrop-filter: none; }
.fab { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); box-shadow: none; }
.fab:hover { background: var(--brand-deep); }
dialog.lightbox { border: 1px solid var(--ink); }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: none; }
.lb-stage { background: #0b0b0b; }
.lb-caption { font-family: var(--serif); font-size: 18px; }

/* ---------------- 时光 / 心愿 / 足迹 ---------------- */
.composer { border-radius: 4px; }
.composer textarea { font-family: var(--serif); font-size: 17px; }
.moment-item { border-radius: 4px; }
.moment-avatar { border-radius: 50%; }
.moment-body { font-family: var(--serif); font-size: 17px; line-height: 1.9; }
.moment-photo { border-radius: 2px; }
.day-divider { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.wish-head { border-radius: 4px; }
.wish-head .wh-num { font-size: 42px; font-weight: 400; }
.progress { height: 4px; border-radius: 0; }
.progress > i { border-radius: 0; background: var(--brand); }
.wish-card { border-radius: 4px; }
.wish-check { border-radius: 2px; }
.wish-title { font-family: var(--serif); font-size: 17px; }
.map-card { border-radius: 4px; }
.map-stat { border-radius: 4px; backdrop-filter: none; }
.place-card { border-radius: 4px; }
.place-thumb { border-radius: 2px; }
.leaflet-container { border-radius: 2px; }

/* ---------------- 设置与主题样本 ---------------- */
.settings-group { border-radius: 4px; }
.settings-title { font-family: var(--mono); font-size: 10px; }
.invite-box { border-radius: 4px; }
.theme-swatch { height: 60px; border-radius: 4px; }
.theme-swatch.rose { --swatch: #b0c6b3; color: #0a0a0a; }
.theme-swatch.cream { --swatch: #ffb57d; color: #0a0a0a; }
.theme-swatch.night { --swatch: #0b0b0b; color: #f0f0f0; }
.member-avatar { border-radius: 50%; }

/* ---------------- 滚动与动效 ---------------- */
@media (min-width: 980px) {
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border: 0; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 34%, transparent); }
}
@media (max-width: 480px) {
  .view { padding-left: 16px; padding-right: 16px; }
  .page-title { font-size: 31px; }
  .section-title { gap: 7px; }
  .section-title::after { font-size: 8px; }
  .hero::before { font-size: 8px; }
  .hero-meta { gap: 5px 10px; }
  .hero-meta .icon { display: none; }
  .today-card { gap: 10px; padding: 16px 14px; }
  .today-lunar b { font-size: 24px; }
  .moment-preview .mp-body { font-size: 16px; }
  .card-pad { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}