/* ============================================================
   shiguangchi · 外壳与通用组件
   颜色只引用语义层；尺寸/间距引用 C.3–C.4 token。
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- AppFrame ---------- */
.app-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--frame-w);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  overflow: hidden;
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-page);
  -webkit-overflow-scrolling: touch;
}

/* ---------- TopBar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--topbar-h);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--divider);
  background: var(--bg-page);
}

.topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  margin-left: calc(var(--space-2) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  text-decoration: none;
}

.topbar__back svg {
  display: block;
  width: 100%;
  height: 100%;
}

.topbar__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Page ---------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
}

.page__body {
  flex: 1 1 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

.page__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--text-xs-weight);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.page__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: var(--text-xl-weight);
  line-height: var(--text-xl-lh);
  color: var(--text-primary);
}

.page__lead {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  font-weight: var(--text-base-weight);
  line-height: var(--text-base-lh);
  color: var(--text-secondary);
}

/* ---------- TabBar ---------- */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--divider);
  background: var(--bg-card);
}

.tabbar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--text-xs-weight);
  line-height: var(--text-xs-lh);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.tabbar__item.is-active {
  color: var(--accent);
}

.tabbar__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tabbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
}

.tabbar__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tabbar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Placeholder ---------- */
.placeholder {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.placeholder__mark {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.placeholder__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--text-sm-weight);
  line-height: var(--text-sm-lh);
  color: var(--text-tertiary);
}

/* ---------- 通用组件 ---------- */
.ui-card {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.ui-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

.ui-tag.is-active {
  background: var(--accent);
  color: var(--text-inverse);
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--text-md-weight);
  line-height: var(--text-base-lh);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}

.ui-btn:active {
  transform: scale(0.98);
}

.ui-btn--ghost {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-primary);
}

.ui-input {
  width: 100%;
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

.ui-input::placeholder {
  color: var(--text-tertiary);
}

.ui-empty {
  padding: var(--space-9) var(--space-5);
  text-align: center;
}

.ui-empty__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.ui-empty__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-tertiary);
}

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
}

.ui-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--space-6));
  z-index: 50;
  max-width: calc(var(--frame-w) - var(--space-8));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--text-primary);
  color: var(--bg-page);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}

/* ============================================================
   P2 · 记忆库（#/memory、卷宗详情、站点详情、录入 Sheet）
   只引用语义层颜色与 C.3–C.4 尺寸 token。
   ============================================================ */

.app-main {
  overflow-x: hidden;
}

.mem-num,
.mem-uploader__size,
.viewer__count {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- 列表：统计条与长廊 ---------- */

.mem-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mem-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

.mem-stats__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.mem-stats__item .mem-num {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
}

.mem-stats__sep {
  color: var(--text-tertiary);
}

.mem-hero__add {
  margin-top: var(--space-5);
}

.mem-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.mem-tripcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-sheet);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}

.mem-tripcard:active {
  transform: scale(0.99);
}

.mem-tripcard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mem-tripcard__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-sunken);
  color: var(--text-tertiary);
}

.mem-tripcard__cover.is-blank .ui-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.mem-tripcard__img,
.mem-cover__img,
.mem-food__img,
.mem-grid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.mem-tripcard__img.is-loaded,
.mem-cover__img.is-loaded,
.mem-food__img.is-loaded,
.mem-grid__img.is-loaded {
  opacity: 1;
}

.mem-tripcard__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.mem-tripcard__title {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.mem-tripcard__date {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.mem-tripcard__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-empty {
  margin: 0;
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-tertiary);
}

.ui-empty .ui-btn {
  margin-top: var(--space-5);
}

/* ---------- 卷宗详情 ---------- */

.mem-detail__body {
  padding: var(--space-4) var(--space-5) var(--space-8);
}

.mem-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sheet);
  background: var(--bg-sunken);
  box-shadow: var(--shadow-card);
  color: var(--text-tertiary);
}

.mem-cover.is-blank .ui-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.mem-detail__head {
  padding: var(--space-5) 0 0;
}

.mem-detail__title {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-2xl);
  font-weight: var(--text-2xl-weight);
  line-height: var(--text-2xl-lh);
  color: var(--text-primary);
}

.mem-detail__subtitle {
  margin: var(--space-2) 0 0;
  font-family: var(--font-title);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-secondary);
}

.mem-detail__meta {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-detail__segwrap {
  margin-top: var(--space-5);
}

.mem-detail__panel {
  margin-top: var(--space-5);
}

.mem-detail__add {
  width: 100%;
  margin-top: var(--space-6);
}

/* ---------- SegmentedControl ---------- */

.mem-seg {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
}

.mem-seg__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.mem-seg__btn.is-active {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.mem-seg__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- 时间线 ---------- */

.mem-timeline__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-timeline__item {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-7);
}

.mem-timeline__item::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  bottom: 0;
  left: calc(var(--space-2) - 1px);
  width: 1px;
  background: var(--divider);
}

.mem-timeline__item:last-child::before {
  display: none;
}

.mem-timeline__dot {
  position: absolute;
  top: var(--space-2);
  left: 0;
  width: var(--space-4);
  height: var(--space-4);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg-page);
}

.mem-timeline__card {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.mem-timeline__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mem-timeline__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.mem-timeline__name {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.mem-timeline__date {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-timeline__summary {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.mem-thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-bottom: var(--space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mem-thumbs::-webkit-scrollbar {
  display: none;
}

.mem-thumbs__item {
  flex: 0 0 auto;
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  cursor: pointer;
}

.mem-thumbs__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.mem-thumbs__img.is-loaded {
  opacity: 1;
}

/* ---------- 地图 ---------- */

.mem-mapwrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mem-map {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--bg-sunken);
}

.mem-map__bg {
  fill: var(--bg-sunken);
}

.mem-map__contour {
  fill: none;
  stroke: var(--divider);
  stroke-width: 1;
}

.mem-map__route {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
}

.mem-map__point {
  cursor: pointer;
}

.mem-map__hit {
  fill: none;
  pointer-events: all;
}

.mem-map__halo {
  fill: var(--accent-soft);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.mem-map__point.is-active .mem-map__halo {
  opacity: 1;
}

.mem-map__dot {
  fill: var(--bg-card);
  stroke: var(--accent);
  stroke-width: 2;
  transition: fill var(--dur-2) var(--ease-out);
}

.mem-map__dot.is-active {
  fill: var(--accent);
}

.mem-map__label {
  fill: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 9px;
}

.mem-map__point.is-active .mem-map__label {
  fill: var(--text-primary);
}

.mem-map__point:focus-visible {
  outline: none;
}

.mem-map__point:focus-visible .mem-map__halo {
  opacity: 1;
}

.mem-map__card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.mem-map__link {
  margin-right: var(--space-2);
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
  text-decoration: none;
}

.mem-map__date {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.mem-map__summary {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

/* ---------- 站点详情 ---------- */

.mem-station__body {
  padding-top: var(--space-5);
}

.mem-station__head {
  padding-bottom: var(--space-4);
}

.mem-station__name {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-2xl);
  font-weight: var(--text-2xl-weight);
  line-height: var(--text-2xl-lh);
  color: var(--text-primary);
}

.mem-station__meta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-station__summary {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent-soft);
  font-family: var(--font-title);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-secondary);
}

.mem-station__panel {
  margin-top: var(--space-4);
}

.mem-section {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 40vh;
}

.mem-section--heart {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--heart-soft);
}

[data-skin="mono"] .mem-section--heart {
  background: var(--bg-sunken);
}

.mem-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mem-fab {
  position: sticky;
  bottom: var(--space-5);
  z-index: 3;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  margin-top: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-float);
  color: var(--text-inverse);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}

.mem-fab:active {
  transform: scale(0.94);
}

.mem-fab:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.mem-fab svg {
  width: var(--space-6);
  height: var(--space-6);
}

/* ---------- 照片碎片与网格 ---------- */

.mem-photo-frag__caption {
  margin: var(--space-2) 0 0;
  font-family: var(--font-title);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.mem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.mem-grid[data-count="1"] {
  grid-template-columns: 1fr;
}

.mem-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mem-grid__cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--bg-sunken);
  cursor: pointer;
}

.mem-grid[data-count="1"] .mem-grid__cell {
  aspect-ratio: 4 / 3;
}

.mem-grid__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- 美食卡 ---------- */

.mem-food {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.mem-food__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-sunken);
}

.mem-food__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.mem-food__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.mem-food__name {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.mem-badge {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

.mem-badge--ok {
  background: var(--ok);
}

.mem-badge--danger {
  background: var(--danger);
}

.mem-food__addr {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-food__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

/* ---------- StarRating ---------- */

.mem-stars {
  display: flex;
  gap: 2px;
}

.mem-stars__item {
  width: var(--space-4);
  height: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--divider);
  cursor: pointer;
}

.mem-stars--read .mem-stars__item {
  cursor: default;
}

.mem-stars__item svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}

.mem-stars__item.is-on {
  color: var(--star);
}

/* ---------- 趣事 ---------- */

.mem-moment {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.mem-moment__time {
  display: block;
  margin-bottom: var(--space-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-moment__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mem-moment .mem-grid {
  margin-top: var(--space-3);
}

/* ---------- 心事 ---------- */

.mem-section--heart .mem-section__list {
  gap: var(--space-3);
}

.mem-heart__mark {
  align-self: flex-end;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  color: var(--heart);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

.mem-heart {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.mem-heart__text {
  margin: 0;
  padding-right: var(--space-5);
  font-family: var(--font-title);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mem-heart__vis {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: var(--heart);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

/* ---------- 表单 ---------- */

.mem-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mem-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mem-field__label {
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.mem-field__req {
  color: var(--danger);
}

.mem-field__input {
  min-height: var(--space-9);
}

textarea.mem-field__input {
  min-height: calc(var(--space-9) + var(--space-5));
  resize: vertical;
}

.mem-field.has-error .mem-field__input {
  border-color: var(--danger);
}

.mem-field__hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.mem-field__hint.is-error {
  color: var(--danger);
}

.mem-field__hint.is-warn {
  color: var(--warn);
}

.mem-vis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  background: var(--bg-page);
}

.mem-vis__btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
}

.mem-vis__btn.is-shared {
  border-color: transparent;
  background: var(--accent-soft);
}

/* ---------- ImageUploader ---------- */

.mem-uploader {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mem-uploader__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.mem-uploader__grid:empty {
  display: none;
}

.mem-uploader__cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

.mem-uploader__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mem-uploader__busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.mem-uploader__size {
  position: absolute;
  bottom: var(--space-1);
  left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 16px;
}

.mem-uploader__del {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
}

.mem-uploader__del svg {
  width: var(--space-3);
  height: var(--space-3);
}

.mem-uploader__add {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--space-10);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
}

.mem-uploader__add[hidden] {
  display: none;
}

.mem-uploader__addicon {
  display: inline-flex;
  width: var(--space-5);
  height: var(--space-5);
}

.mem-uploader__addicon svg {
  width: 100%;
  height: 100%;
}

.mem-uploader__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Sheet ---------- */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-layer__scrim {
  position: absolute;
  inset: 0;
  background: var(--bg-sunken);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.sheet-layer.is-open .sheet-layer__scrim {
  opacity: 0.6;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--frame-w);
  max-height: 88vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-float);
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-out);
}

.sheet-layer.is-open .sheet {
  transform: translateY(0);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.sheet__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.sheet__close svg {
  width: 100%;
  height: 100%;
}

.sheet__body {
  padding: var(--space-2) var(--space-5) var(--space-4);
  overflow-y: auto;
}

.sheet .ui-input {
  border-color: var(--border);
  background: var(--bg-page);
}

.sheet__foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--divider);
}

.sheet__cancel {
  flex: 0 0 auto;
}

.sheet__save {
  flex: 1 1 auto;
}

/* ---------- ConfirmDialog ---------- */

.confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.confirm-layer__scrim {
  position: absolute;
  inset: 0;
  background: var(--bg-sunken);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.confirm-layer.is-open .confirm-layer__scrim {
  opacity: 0.6;
}

.confirm {
  position: relative;
  width: 100%;
  max-width: calc(var(--frame-w) - var(--space-8));
  padding: var(--space-5);
  border-radius: var(--radius-sheet);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-float);
  transform: scale(0.96);
  transition: transform var(--dur-2) var(--ease-spring);
}

.confirm-layer.is-open .confirm {
  transform: scale(1);
}

.confirm__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.confirm__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ---------- ImageViewer ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  max-width: var(--frame-w);
  margin: 0 auto;
  background: var(--bg-sunken);
  color: var(--text-primary);
}

.viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
}

.viewer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}

.viewer__btn svg {
  width: var(--space-5);
  height: var(--space-5);
}

.viewer__btn--prev svg {
  transform: rotate(180deg);
}

.viewer__count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.viewer__stage {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.viewer__img.is-loaded {
  opacity: 1;
}

.viewer__img.is-zoomed {
  transform: scale(2);
}

.viewer__hint {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.viewer__nav {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

/* ---------- 空状态页 ---------- */

.mem-missing {
  justify-content: center;
}

.mem-missing .page__body {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.mem-missing__btn {
  margin-top: var(--space-5);
  text-decoration: none;
}

/* ---------- 降低动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  .mem-tripcard,
  .mem-seg__btn,
  .mem-fab,
  .sheet,
  .sheet-layer__scrim,
  .confirm,
  .confirm-layer__scrim,
  .viewer__img,
  .mem-tripcard__img,
  .mem-cover__img,
  .mem-food__img,
  .mem-grid__img,
  .mem-thumbs__img {
    transition: none;
  }
}

/* ============================================================
   P3 · 许愿池（#/wish、心愿详情、新建心愿、升格）
   只引用语义层颜色与 C.3–C.4 尺寸 token。
   ============================================================ */

.wish-page,
.wish-detail {
  overflow-x: hidden;
}

.wish-body {
  padding-top: var(--space-7);
}

.wish-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wish-viewseg {
  margin-top: var(--space-5);
}

.wish-tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.wish-tools[hidden] {
  display: none;
}

.wish-toolrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.wish-toolrow__label {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.wish-chip.is-active {
  border-color: transparent;
  background: var(--accent);
  color: var(--text-inverse);
}

.wish-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.wish-panel {
  margin-top: var(--space-5);
}

/* ---------- WishStatusPill ---------- */

.wish-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  white-space: nowrap;
}

.wish-pill__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: currentColor;
}

.wish-pill[data-status="seed"] {
  border-color: var(--border);
  color: var(--text-secondary);
}

.wish-pill[data-status="seed"] .wish-pill__dot {
  background: none;
  border: 1px solid var(--border);
}

.wish-pill[data-status="planning"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft);
  color: var(--accent);
}

.wish-pill[data-status="traveling"] {
  border-color: var(--warn);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--warn);
  color: var(--warn);
}

.wish-pill[data-status="done"] {
  border-color: var(--divider);
  color: var(--text-tertiary);
  opacity: 0.8;
}

.wish-pill[data-status="shelved"] {
  border-color: var(--divider);
  background: var(--bg-sunken);
  color: var(--text-tertiary);
  filter: grayscale(1);
}

/* ---------- 心愿墙：双列瀑布流 ---------- */

.wish-wall {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.wish-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.wish-group__count {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-masonry {
  column-count: 2;
  column-gap: var(--space-3);
}

.wish-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--space-3);
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  text-decoration: none;
  vertical-align: top;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.wish-card:active {
  transform: scale(0.985);
}

.wish-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wish-card[data-status="seed"] {
  border-color: var(--border);
}

.wish-card[data-status="planning"] {
  border-color: var(--accent);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-soft);
}

.wish-card[data-status="traveling"] {
  border-color: var(--warn);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--warn);
}

.wish-card[data-status="done"] {
  border-color: var(--divider);
  opacity: 0.72;
}

.wish-card[data-status="shelved"] {
  border-style: dashed;
  border-color: var(--border);
  filter: grayscale(1);
  opacity: 0.58;
}

.wish-card.is-new {
  animation: wish-grow var(--dur-3) var(--ease-spring) both;
  transform-origin: 50% 60%;
}

@keyframes wish-grow {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wish-card__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-sunken);
  color: var(--text-tertiary);
}

/* 无封面：许愿侧语义色的斜向渐变，叠一层不超过 8% 的径向光斑；4:3 占位高度不变
   许愿侧 --bg-elevated 与 --accent-soft 同为 indigo-700，故中点混入 --accent 让斜向可辨 */
.wish-card__cover.is-placeholder {
  background-image: linear-gradient(
    135deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--accent-soft) 80%, var(--accent)) 58%,
    var(--accent-soft) 100%
  );
}

.wish-card__cover.is-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 24%, var(--accent) 0%, transparent 68%);
  opacity: 0.08;
  pointer-events: none;
}

.wish-card__cover .ui-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.wish-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.wish-card__img.is-loaded {
  opacity: 1;
}

.wish-card__body {
  padding: var(--space-3);
}

.wish-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.wish-card__target {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wish-card__title {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-base);
  font-weight: var(--text-md-weight);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.wish-card__expect {
  display: -webkit-box;
  margin: var(--space-1) 0 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.wish-card__expect.is-empty {
  color: var(--text-tertiary);
}

.wish-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.wish-card__tag {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---------- 心愿地图 ---------- */

.wish-mapwrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wish-map {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--bg-sunken);
}

.wish-map__bg {
  fill: var(--bg-sunken);
}

.wish-map__contour {
  fill: none;
  stroke: var(--divider);
  stroke-width: 1;
}

.wish-map__point {
  cursor: pointer;
}

.wish-map__hit {
  fill: none;
  pointer-events: all;
}

.wish-map__halo {
  fill: var(--accent-soft);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.wish-map__point.is-active .wish-map__halo {
  opacity: 1;
}

.wish-map__dot {
  fill: var(--bg-sunken);
  stroke: var(--accent);
  stroke-width: 1.6;
  transition: fill var(--dur-2) var(--ease-out);
}

.wish-map__point[data-status="done"] .wish-map__dot {
  fill: var(--accent);
  stroke: var(--accent);
}

.wish-map__point[data-status="shelved"] .wish-map__dot {
  fill: var(--text-tertiary);
  stroke: var(--text-tertiary);
  opacity: 0.6;
}

.wish-map__point.is-active .wish-map__dot {
  fill: var(--accent);
}

.wish-map__point:focus-visible {
  outline: none;
}

.wish-map__point:focus-visible .wish-map__halo {
  opacity: 1;
}

.wish-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-map__legenditem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.wish-map__key {
  width: var(--space-2);
  height: var(--space-2);
  border: 1.6px solid var(--accent);
  border-radius: 50%;
}

.wish-map__key.is-done {
  background: var(--accent);
}

.wish-map__key.is-shelved {
  border-color: var(--text-tertiary);
  background: var(--text-tertiary);
  opacity: 0.6;
}

.wish-map__card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.wish-map__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.wish-map__target {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-map__link {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
  text-decoration: none;
}

.wish-map__summary {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

/* ---------- 许个愿按钮 ---------- */

.wish-fabwrap {
  position: sticky;
  bottom: var(--space-5);
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
  pointer-events: none;
}

.wish-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: var(--shadow-float);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--text-md-weight);
  line-height: var(--text-base-lh);
  pointer-events: auto;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}

.wish-fab:active {
  transform: scale(0.96);
}

.wish-fab:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.wish-fab .ui-icon {
  width: var(--space-5);
  height: var(--space-5);
}

/* ---------- 新建心愿 Sheet ---------- */

.wish-form .ui-input,
.wish-detail .ui-input,
.wish-detail .wish-notes .ui-input {
  border-color: var(--border-strong);
}

.wish-counter {
  margin: 0;
  text-align: right;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wish-more[hidden] {
  display: none;
}

.wish-more__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
}

.wish-more__toggle .ui-icon {
  width: var(--space-4);
  height: var(--space-4);
  transition: transform var(--dur-2) var(--ease-out);
}

.wish-more__toggle[aria-expanded="true"] .ui-icon {
  transform: rotate(90deg);
}

.wish-more__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wish-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wish-upload__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.wish-upload__pick {
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

.wish-upload__file,
.wish-insp__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wish-upload__preview {
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.wish-upload__preview[hidden],
.wish-upload__remove[hidden] {
  display: none;
}

/* ---------- 心愿详情 ---------- */

.wish-detail__body {
  padding: var(--space-4) var(--space-5) var(--space-6);
}

.wish-detail__head {
  padding: var(--space-2) 0 0;
}

.wish-detail__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.wish-detail__target {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-detail__title {
  margin: var(--space-3) 0 0;
  overflow-wrap: anywhere;
  /* 许愿侧语义层没有衬线标题 token；用系统衬线族关键字，不引用原始层变量 */
  font-family: serif;
  font-size: var(--text-2xl);
  font-weight: var(--text-2xl-weight);
  line-height: var(--text-2xl-lh);
  color: var(--text-primary);
}

.wish-detail__expect {
  margin: var(--space-3) 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-secondary);
}

.wish-detail__expect.is-empty {
  color: var(--text-tertiary);
}

.wish-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.wish-detail__segwrap {
  margin-top: var(--space-5);
}

.wish-detail__panel {
  margin-top: var(--space-5);
}

.wish-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-page);
}

.wish-actions__primary {
  width: 100%;
}

.wish-actions__row {
  display: flex;
  gap: var(--space-2);
}

.wish-actions__row .ui-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- InspirationBoard ---------- */

.wish-insp {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wish-insp__composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}

.wish-insp__modes {
  display: flex;
  gap: var(--space-1);
}

.wish-insp__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wish-insp__input {
  min-height: var(--space-9);
}

textarea.wish-insp__input {
  min-height: calc(var(--space-9) + var(--space-5));
  resize: vertical;
}

.wish-insp__hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-insp__add,
.wish-insp__pick {
  align-self: flex-start;
}

.wish-insp__pick {
  position: relative;
  cursor: pointer;
}

.wish-insp__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wish-insp__item {
  position: relative;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}

.wish-insp__item[data-type="image"] {
  padding: var(--space-2);
  padding-right: var(--space-8);
}

.wish-insp__text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.wish-insp__link {
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--accent);
}

.wish-insp__img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}

.wish-insp__note {
  margin: var(--space-2) var(--space-1) var(--space-1);
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.wish-insp__del {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-tertiary);
  cursor: pointer;
}

.wish-insp__del svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* ---------- PlanStationList ---------- */

.wish-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wish-plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wish-plan__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  transition: opacity var(--dur-1) var(--ease-out);
}

.wish-plan__item.is-dragging {
  opacity: 0.6;
}

.wish-plan__handle {
  flex: 0 0 auto;
  width: var(--space-5);
  min-height: var(--space-5);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background-color: transparent;
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-position: center;
  background-repeat: repeat;
  background-size: var(--space-2) var(--space-2);
  color: var(--text-tertiary);
  opacity: 0.7;
  cursor: grab;
  touch-action: none;
}

.wish-plan__handle:active {
  cursor: grabbing;
}

.wish-plan__main {
  flex: 1 1 auto;
  min-width: 0;
}

.wish-plan__name {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-base);
  font-weight: var(--text-md-weight);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.wish-plan__meta {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-plan__del,
.wish-todo__del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.wish-plan__del svg,
.wish-todo__del svg {
  width: var(--space-3);
  height: var(--space-3);
}

.wish-plan__foot {
  margin: 0;
  text-align: right;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.wish-plan__note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.wish-plan__add {
  width: 100%;
}

/* ---------- WishTodoList ---------- */

.wish-todo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wish-todo__addrow {
  display: flex;
  gap: var(--space-2);
}

.wish-todo__input {
  flex: 1 1 auto;
  min-width: 0;
}

.wish-todo__add {
  flex: 0 0 auto;
}

.wish-todo__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wish-todo__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  background: var(--bg-card);
}

.wish-todo__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  color: transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}

.wish-todo__check svg {
  width: var(--space-3);
  height: var(--space-3);
}

.wish-todo__item.is-done .wish-todo__check {
  border-color: transparent;
  background: var(--accent);
  color: var(--text-inverse);
}

.wish-todo__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.wish-todo__item.is-done .wish-todo__text {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.wish-empty {
  margin: 0;
  padding: var(--space-5) 0;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-tertiary);
}

.wish-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
}

.wish-notes__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--text-md-weight);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

/* ---------- 卷宗顶部的「来自愿望」横幅 ---------- */

.mem-origin {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.mem-origin__head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
}

.mem-origin__head .ui-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.mem-origin__label {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.08em;
}

.mem-origin__line {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.mem-origin__expect {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.mem-origin__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

/* ---------- 降低动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  .wish-card,
  .wish-chip,
  .wish-fab,
  .wish-more__toggle .ui-icon,
  .wish-plan__item,
  .wish-todo__check {
    transition: none;
  }

  .wish-card.is-new {
    animation: none;
  }
}

/* ============================================================
   P4 · 首页双向时间轴与全局搜索（#/home、#/search）
   只引用语义层颜色与 C.3–C.4 尺寸 token。
   ============================================================ */

.home-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-8);
}

/* ---------- 头部与搜索入口 ---------- */

.home-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-head__text {
  min-width: 0;
}

.home-head__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.home-head__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: var(--text-xl-weight);
  line-height: var(--text-xl-lh);
  color: var(--text-primary);
}

.home-head__lead {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.home-search {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  text-decoration: none;
}

.home-search .ui-icon {
  width: var(--space-4);
  height: var(--space-4);
}

/* ---------- 今日卡片 ---------- */

.home-today {
  padding: var(--space-4);
  border-radius: var(--radius-sheet);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.home-today__label {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.home-today__title {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.home-today__meta {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.home-today__photo {
  margin-top: var(--space-3);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bg-sunken);
}

.home-today__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.home-today__img.is-loaded {
  opacity: 1;
}

.home-today__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--accent);
  text-decoration: none;
}

.home-today__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.home-today__foot .home-today__link {
  margin-top: 0;
}

.home-today__again {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
}

.home-today.is-flip {
  animation: home-flip var(--dur-3) var(--ease-out);
}

@keyframes home-flip {
  from {
    opacity: 0.35;
    transform: translateY(var(--space-1));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 时间轴 ---------- */

.home-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.home-section-head__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.home-section-head__hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.home-tl {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-y;
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-tl::-webkit-scrollbar {
  display: none;
}

.home-tl:active {
  cursor: grabbing;
}

.home-tl__track {
  position: relative;
  height: 232px;
}

.home-tl__axis {
  position: absolute;
  top: 50%;
  right: var(--space-6);
  left: var(--space-6);
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--divider) 14%,
    var(--border) 50%,
    var(--divider) 86%,
    transparent 100%
  );
}

.home-tl__node {
  position: absolute;
  top: 0;
  width: 96px;
  height: 100%;
  margin-left: -48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  text-align: center;
  cursor: pointer;
}

.home-tl__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
}

.home-tl__node[data-kind="wish"] .home-tl__dot {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--accent);
  background: none;
}

.home-tl__node.is-active .home-tl__dot,
.home-tl__node:focus-visible .home-tl__dot {
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.home-tl__node.is-active .home-tl__label {
  color: var(--text-primary);
}

.home-tl__date {
  position: absolute;
  top: calc(50% + 58px);
  left: 50%;
  width: 96px;
  margin-left: -48px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-tl__label {
  position: absolute;
  top: calc(50% + 16px);
  left: 50%;
  display: -webkit-box;
  width: 96px;
  margin-left: -48px;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-tl__node.is-up .home-tl__label {
  top: auto;
  bottom: calc(50% + 16px);
}

.home-tl__node.is-up .home-tl__date {
  top: auto;
  bottom: calc(50% + 58px);
}

.home-tl__now {
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 0;
  border-left: 1px solid var(--border-strong);
  pointer-events: none;
}

.home-tl__nowhead {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transform: translateX(-50%);
  pointer-events: auto;
}

.home-tl__nowchip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

.home-tl__nowlabel {
  font-size: var(--text-xs);
  font-weight: var(--text-md-weight);
  line-height: var(--text-xs-lh);
  color: var(--text-primary);
}

.home-tl__nowdate {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.home-tl__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
  cursor: pointer;
}

.home-tl__plus .ui-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.home-tl__menu {
  position: absolute;
  top: calc(var(--space-6) + var(--space-2));
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-width: 132px;
  padding: var(--space-1);
  border-radius: var(--radius-input);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
  pointer-events: auto;
}

.home-tl__menu[hidden] {
  display: none;
}

.home-tl__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.home-tl__action:hover {
  background: var(--bg-sunken);
}

/* ---------- 节点摘要卡 ---------- */

.home-summary {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.home-summary__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.home-summary__kind {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.home-summary__date {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.home-summary__title {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.home-summary__text {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.home-summary__text.is-empty {
  color: var(--text-tertiary);
}

.home-summary__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.home-summary__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--accent);
  text-decoration: none;
}

/* ---------- 两个入口卡 ---------- */

.home-entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.home-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
}

.home-entry__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  color: var(--text-tertiary);
}

.home-entry__cover .ui-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.home-entry__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.home-entry__img.is-loaded {
  opacity: 1;
}

.home-entry__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.home-entry__eyebrow {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.home-entry__value {
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.home-entry__hint {
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 搜索页 ---------- */

.search-body {
  padding: var(--space-4) var(--space-5) var(--space-8);
}

.search-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 2;
  padding: var(--space-2) 0 var(--space-3);
  background: var(--bg-page);
}

.search-group {
  margin-top: var(--space-5);
}

.search-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--divider);
}

.search-group__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.search-group__count {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.search-group__list {
  display: flex;
  flex-direction: column;
}

.search-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--divider);
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  text-decoration: none;
}

.search-item:active {
  background: var(--bg-sunken);
}

.search-item__meta {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.search-mark {
  padding: 0 2px;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ---------- 降低动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  .home-today.is-flip {
    animation: none;
  }
}

/* ============================================================
   P5 · 收口：期待 vs 现实、回忆册导出、我的（#/me）
   只引用语义层颜色与 C.3–C.4 尺寸 token。
   ============================================================ */

/* ---------- 首页头部：设置入口与布局 ---------- */

.home-head__text {
  flex: 1 1 auto;
}

.home-settings {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  text-decoration: none;
}

.home-settings:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-settings .ui-icon {
  width: var(--space-5);
  height: var(--space-5);
}

/* ---------- TopBar 右侧操作 ---------- */

.topbar__title {
  flex: 1 1 auto;
}

.topbar__action {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
}

.topbar__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 期待 vs 现实 ---------- */

.erp {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}

.erp__head {
  margin-bottom: var(--space-4);
}

.erp__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.erp__sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.erp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.erp__col {
  min-width: 0;
  padding: var(--space-4) var(--space-3);
}

.erp__col--plan {
  border-right: 1px solid var(--divider);
  background: var(--bg-page);
  color: var(--text-primary);
}

.erp__col--real {
  background: var(--bg-card);
  color: var(--text-primary);
}

.erp__collabel {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.erp__line {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: var(--text-base);
  font-weight: var(--text-md-weight);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.erp__expect {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

.erp__stats {
  display: flex;
  gap: var(--space-3);
}

.erp__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.erp__statvalue {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: var(--text-lg-weight);
  line-height: var(--text-lg-lh);
  color: var(--text-primary);
}

.erp__statlabel {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.erp__photo {
  margin-top: var(--space-3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

.erp__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.erp__img.is-loaded {
  opacity: 1;
}

.erp__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.erp__station {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--divider);
}

.erp__stationhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.erp__name {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-primary);
}

.erp__note {
  display: block;
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.erp__flag {
  flex: 0 0 auto;
  padding: 0 var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  white-space: nowrap;
}

.erp__station.is-missing .erp__flag {
  color: var(--warn);
}

.erp__station.is-extra .erp__flag {
  color: var(--accent);
}

.erp__station.is-missing .erp__name {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.erp__empty {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.erp__foot {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

/* ---------- 导出询问 ---------- */

.export-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.export-sheet__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.export-sheet__hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.export-sheet__btn {
  width: 100%;
}

.export-sheet__cancel {
  align-self: center;
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  cursor: pointer;
}

/* ---------- 我的 ---------- */

.me-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-8);
}

.me-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.me-stat {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.me-stat__value {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: var(--text-xl-weight);
  line-height: var(--text-xl-lh);
  color: var(--text-primary);
}

.me-stat__label {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.me-section {
  display: flex;
  flex-direction: column;
}

.me-section__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.me-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--divider);
}

.me-row__text {
  flex: 1 1 auto;
  min-width: 0;
}

.me-row__name {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
}

.me-row__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.me-action {
  flex: 0 0 auto;
  min-height: var(--space-7);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.me-action--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.me-error {
  width: 100%;
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--danger);
}

.me-file[hidden] {
  display: none;
}

.me-switch {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-9);
  height: var(--space-6);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.me-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--space-6) - 6px);
  height: calc(var(--space-6) - 6px);
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out);
}

.me-switch.is-on {
  border-color: var(--accent);
  background: var(--accent);
}

.me-switch.is-on .me-switch__knob {
  transform: translateX(calc(var(--space-9) - var(--space-6)));
}

.me-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.me-clearsheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.me-clearsheet__warn {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--danger);
}

.me-danger {
  width: 100%;
  background: var(--danger);
  color: var(--text-inverse);
}

.me-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.me-download {
  display: none;
}

.me-about {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.me-about__version {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
  color: var(--text-primary);
}

.me-about__idea {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

/* ============================================================
   回忆册：打印视图
   屏幕下隐藏；导出时挂到 body，@media print 才显示。
   ============================================================ */

.print-sheet {
  display: none;
}

@media print {
  @page {
    margin: 14mm 12mm;
  }

  html,
  body {
    height: auto;
    background: var(--bg-card);
    color: var(--text-primary);
  }

  /* 交互控件一律不打印 */
  .tabbar,
  .topbar__back,
  .topbar__action,
  .mem-fab,
  .wish-fabwrap,
  .mem-detail__add,
  .mem-detail__segwrap,
  .mem-origin,
  .ui-toast,
  .sheet-layer,
  .confirm-layer,
  .viewer,
  .home-search,
  .home-settings,
  .home-tl__plus,
  .home-tl__menu,
  .home-tl__now,
  .search-bar,
  .me-action,
  .me-switch,
  .wish-chip,
  .wish-toolrow,
  .wish-viewseg,
  .wish-actions,
  .mem-uploader__add {
    display: none !important;
  }

  body.is-printing .app-frame {
    display: none !important;
  }

  body:not(.is-printing) .app-frame {
    width: auto;
    max-width: none;
    height: auto;
    overflow: visible;
    box-shadow: none;
  }

  body:not(.is-printing) .app-main {
    overflow: visible;
  }

  body.is-printing .print-sheet {
    display: block;
  }

  .print-cover {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--divider);
    page-break-after: avoid;
    break-after: avoid;
  }

  .print-cover__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--text-2xl);
    font-weight: var(--text-2xl-weight);
    line-height: var(--text-2xl-lh);
    color: var(--text-primary);
    page-break-after: avoid;
    break-after: avoid;
  }

  .print-cover__sub {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    line-height: var(--text-base-lh);
    color: var(--text-secondary);
  }

  .print-cover__meta {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text-tertiary);
  }

  .print-map {
    margin: var(--space-5) 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-map__svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70mm;
    border-radius: var(--radius-card);
  }

  .print-map__bg {
    fill: var(--bg-sunken);
  }

  .print-map__contour {
    fill: none;
    stroke: var(--divider);
    stroke-width: 1.2;
  }

  .print-map__route {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
  }

  .print-map__halo {
    fill: var(--accent-soft);
  }

  .print-map__dot {
    fill: var(--accent);
  }

  .print-map__label {
    fill: var(--text-primary);
    font-family: var(--font-body);
    font-size: 9px;
  }

  .print-station {
    margin-top: var(--space-5);
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-station__head {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--divider);
    page-break-after: avoid;
    break-after: avoid;
  }

  .print-station__name {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: var(--text-lg-weight);
    line-height: var(--text-lg-lh);
    color: var(--text-primary);
    page-break-after: avoid;
    break-after: avoid;
  }

  .print-station__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    color: var(--text-tertiary);
  }

  .print-station__summary {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text-secondary);
  }

  .print-frags {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .print-frag {
    padding: var(--space-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-frag__head {
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    color: var(--text-tertiary);
  }

  .print-frag__text {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text-primary);
    white-space: pre-wrap;
  }

  .print-frag__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    color: var(--text-secondary);
  }

  .print-frag__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .print-frag__img {
    width: calc(50% - var(--space-1));
    max-height: 55mm;
    border-radius: var(--radius-xs);
    object-fit: cover;
  }

  .print-empty {
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    color: var(--text-tertiary);
  }

  .print-erp {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--divider);
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-erp__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-title);
    font-size: var(--text-lg);
    font-weight: var(--text-lg-weight);
    line-height: var(--text-lg-lh);
    color: var(--text-primary);
    page-break-after: avoid;
    break-after: avoid;
  }

  .print-erp__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .print-erp__col {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
  }

  .print-erp__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    color: var(--text-tertiary);
  }

  .print-erp__line {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--text-base);
    line-height: var(--text-base-lh);
    color: var(--text-primary);
  }

  .print-erp__text {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text-secondary);
    white-space: pre-wrap;
  }

  .print-erp__list {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text-primary);
  }

  .print-erp__item {
    margin-top: var(--space-1);
  }

  .print-foot {
    margin-top: var(--space-6);
    padding-top: var(--space-2);
    border-top: 1px solid var(--divider);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    color: var(--text-tertiary);
  }
}

/* ============================================================
   P6.1 · 心愿墙连续双列瀑布与筛选行压缩
   ============================================================ */

/* 排序、筛选各占一行：不换行，超出横向滑动，不把页面撑宽 */
.wish-toolrow {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.wish-toolrow::-webkit-scrollbar {
  display: none;
}

.wish-toolrow__label,
.wish-toolrow .wish-chip {
  flex: 0 0 auto;
}

.wish-toolrow .wish-chip {
  white-space: nowrap;
}

/* 连续瀑布里只剩一张：单列铺满整行，封面封顶 180px，避免一张大图占满一屏 */
.wish-masonry.is-single {
  column-count: 1;
}

.wish-masonry.is-single .wish-card__cover {
  height: 180px;
  aspect-ratio: auto;
}

/* ============================================================
   P6.2 · 筛选行两端渐隐
   ============================================================ */

/* 外壳不滚动，遮罩挂在壳上；内容在壳内横向滚动 */
.wish-toolscroll {
  position: relative;
}

.wish-toolscroll::before,
.wish-toolscroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 24px;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-out);
}

/* 左端：贴边不透明，向内 24px 渐隐到透明 */
.wish-toolscroll::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-page), transparent);
}

/* 右端：方向相反 */
.wish-toolscroll::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-page), transparent);
}

/* 滚到端点时藏起该侧遮罩；不可滚动时两端同时隐藏 */
.wish-toolscroll.is-at-start::before,
.wish-toolscroll.is-at-end::after {
  opacity: 0;
}

/* ============================================================
   P7 · 本机多档案：档案选择页与「我的」当前档案
   ============================================================ */

/* 档案选择页不显示底栏 */
html[data-route="login"] .tabbar {
  display: none;
}

.login-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-5) var(--space-9);
}

.login-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}

.login-profile:active {
  transform: scale(0.99);
}

.login-profile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.login-profile__name {
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
}

.login-profile__meta {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.login-profile__tag {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}

.login-new {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-new__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
}

.login-error {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--danger);
}

.login-new__submit {
  align-self: flex-start;
}

/* 「我的」当前档案区块 */
.me-profile__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.me-profile__name {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--text-md-weight);
  line-height: var(--text-md-lh);
}

.me-profile__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--text-tertiary);
}

.me-profile__actions {
  display: flex;
  gap: var(--space-2);
}

.me-profile__editor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.me-profile__editor[hidden],
.me-profile__actions[hidden] {
  display: none;
}

/* ============================================================
   P8 · PWA 独立窗口与安全区
   外壳顶部与底栏的 env(safe-area-inset-*) 已在 AppFrame / TabBar 中生效；
   独立窗口下让底色连续铺到状态栏与 Home 指示条后面。
   ============================================================ */

@media (display-mode: standalone) {
  html,
  body {
    background: var(--bg-page);
  }
}