.manifestation-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #1d1d1f;

  /* ===== 简洁列表版 ===== */
}
.manifest-rows { display: flex; flex-direction: column; gap: 2px; }
.manifest-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 14px; padding: 18px 4px; border: 0; border-bottom: 1px solid rgba(36,35,33,.06); background: transparent; text-align: left; cursor: pointer; transition: opacity .18s ease; }
.manifest-row:active { opacity: .6; }
.manifest-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.manifest-row__dot.is-filled { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.manifest-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.manifest-row__main strong { font-size: var(--fs-heading); font-weight: 700; color: var(--ink-1); }
.manifest-row__main small { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.4; }
.manifest-row__meta { font-size: var(--fs-lead); font-weight: 600; color: var(--ink-2); }
/* ===== 苹果风格显化首页 ===== */
.ios-style { padding: 8px 0 24px; }
.ios-header { padding: 20px 20px 16px; }
.ios-header__eyebrow { font-size: 11px; color: var(--ink-3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.ios-header__title { font-size: 34px; font-weight: 700; color: var(--ink-1); margin: 0; letter-spacing: -0.5px; }
.ios-hero { position: relative; margin: 0 16px 20px; border-radius: 20px; padding: 40px 20px; min-height: 180px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.ios-hero--empty { background: linear-gradient(135deg, #f5f5f7, #e8e8ed); color: var(--ink-1); }
.ios-hero__eyebrow { font-size: 12px; opacity: .8; margin-bottom: 4px; }
.ios-hero__title { font-size: 22px; font-weight: 700; line-height: 1.3; }
.ios-hero__hint { font-size: 12px; opacity: .5; margin-top: 8px; }
.ios-group { margin: 0 16px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ios-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-bottom: .5px solid #e8e8ed; background: transparent; text-align: left; cursor: pointer; width: 100%; }
.ios-row:last-child { border-bottom: 0; }
.ios-row:active { background: #f5f5f7; }
.ios-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ios-row__dot.is-filled { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.ios-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ios-row__text strong { font-size: 16px; font-weight: 600; color: var(--ink-1); }
.ios-row__text small { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-row__value { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.ios-row__thumb { width: 44px; height: 44px; border-radius: 10px; background-size: cover; background-position: center; }
.ios-footnote { margin: 16px 20px 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ===== 订单页苹果风 ===== */
.order-list-block { display: flex; flex-direction: column; gap: 1px; background: #e8e8ed; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.order-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 0; text-align: left; cursor: pointer; }
.order-list-item:active { background: #f5f5f7; }
.order-list-item > span { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-list-item strong { font-size: 17px; font-weight: 600; color: var(--ink-1); }
.order-list-item small { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-list-item__thumb { width: 56px; height: 56px; border-radius: 12px; background-size: cover; background-position: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #c8c4be; font-size: 20px; }
.order-list-item__thumb.is-empty { background: #f0f0f3; }
.order-form__img { width: 100%; height: 160px; border-radius: 14px; background-size: cover; background-position: center; margin-bottom: 16px; }
.order-form__img-add { width: 100%; padding: 20px; border: 1.5px dashed #d6d2cc; border-radius: 14px; background: transparent; color: var(--ink-3); font-size: 15px; cursor: pointer; margin-bottom: 16px; }
.order-form-panel { padding-bottom: 24px; }
.order-form-panel .ios-field input { font-size: 17px; font-weight: 600; }
.order-form-panel .ios-field textarea { font-size: 14px; min-height: 100px; }
.order-list-item em { font-size: 11px; color: var(--ink-3); font-style: normal; }
.order-list-item i { color: var(--ink-3); }
.new-order-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: #fff; border: 0; border-radius: 12px; color: var(--accent); font-size: 16px; font-weight: 500; cursor: pointer; }
.ios-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ios-field span { font-size: 13px; color: var(--ink-3); }
.ios-field input, .ios-field textarea { border: 0; border-bottom: .5px solid #e8e8ed; padding: 8px 0; font-size: 16px; background: transparent; outline: none; resize: vertical; }
.ios-field textarea { border-bottom: 0; background: #f5f5f7; border-radius: 12px; padding: 12px; font-size: 15px; line-height: 1.5; }
.order-form-panel .form-actions button { width: 100%; }
.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
.day-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border: 0; border-radius: 10px; background: #f5f5f7; cursor: pointer; }
.day-cell b { font-size: 14px; color: var(--ink-1); }
.day-cell small { font-size: 10px; color: var(--ink-3); }
.day-cell.is-sel { background: var(--accent); }
.day-cell.is-sel b, .day-cell.is-sel small { color: #fff; }
.day-cell.is-today b { color: var(--accent); }
.day-cell.is-sel.is-today b { color: #fff; }

.manifestation-footnote { margin: 8px 4px 0; font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.6; }

/* ===== 感恩新版 ===== */
.cal-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; background: #fafafa; border-radius: 14px; margin-bottom: 14px; }
.cal-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 8px; }
.cal-cell.empty { visibility: hidden; }
.cal-cell i { width: 8px; height: 8px; border-radius: 50%; background: #e2ded9; }
.cal-cell.has i { background: var(--accent); }
.cal-cell.today { background: var(--accent-bg); }
.cal-cell b { font-size: 9px; color: var(--ink-3); font-weight: 400; }
.cal-cell.today b { color: var(--accent); font-weight: 600; }
.gweek-list { display: flex; flex-direction: column; gap: 10px; }
.gweek-card { padding: 12px 14px; background: #fafafa; border-radius: 14px; }
.gweek-card.is-current { background: var(--accent-bg); }
.gweek-card__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.gweek-card__head strong { font-size: var(--fs-body); color: var(--ink-1); }
.gweek-card.is-current .gweek-card__head strong { color: var(--accent); }
.gweek-card__head small { font-size: var(--fs-micro); color: var(--ink-3); flex: 1; }
.gweek-card__head em { font-size: var(--fs-micro); color: var(--accent); font-style: normal; }
.gweek-card__add { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.gweek-card .gitem { margin-bottom: 6px; }
.gweek-card .gitem:last-child { margin-bottom: 0; }
.gitem time { font-size: var(--fs-micro); color: var(--ink-3); margin-right: 8px; flex-shrink: 0; }
.gitem { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #fff; border-radius: 10px; margin-bottom: 6px; }
.gitem p { margin: 0; font-size: var(--fs-body); color: var(--ink-1); line-height: 1.5; flex: 1; }
.gitem button { border: 0; background: transparent; color: var(--ink-3); font-size: 16px; cursor: pointer; padding: 0 4px; }
.gitem time { font-size: var(--fs-micro); color: var(--ink-3); flex-shrink: 0; padding-top: 2px; }
.gitem-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: var(--fs-caption); }
.gitem-add { width: 100%; padding: 14px; border: 1.5px dashed #d6d2cc; border-radius: 12px; background: transparent; color: var(--ink-3); font-size: 22px; cursor: pointer; margin-top: 8px; }
  min-width: 0;
}
.manifestation-page button { font-family: inherit; }
.manifestation-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.manifestation-header { align-items: center; margin-bottom: 0; padding: 3px 2px 2px; }
.manifestation-header .page-title { letter-spacing: -.9px; }
.manifestation-header p { margin: 8px 0 0; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.45; }
.manifestation-status { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #e5e5ea; border-radius: 999px; color: #8e8e93; background: rgba(255,255,255,.78); font-size: var(--fs-caption); white-space: nowrap; }
.manifestation-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(226,75,74,.1); }
.manifestation-practices { display: grid; gap: 9px; }
.section-heading, .manifestation-panel__head, .subsection-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-heading { padding: 0 2px; color: #1d1d1f; }
.section-heading strong, .subsection-line span { font-size: var(--fs-body); font-weight: 650; letter-spacing: -.1px; }
.section-heading span, .subsection-line small, .manifestation-panel__head small { color: #8e8e93; font-size: var(--fs-caption); }
.manifestation-practice-grid { display: grid; gap: 10px; }
.manifestation-practice-card { position: relative; display: flex; align-items: stretch; width: 100%; min-height: 108px; overflow: hidden; padding: 0; border: 1px solid #e5e5ea; border-radius: 20px; color: #1d1d1f; background: #fff; box-shadow: 0 10px 26px rgba(44,38,32,.055); text-align: left; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.manifestation-practice-card:hover { border-color: #d5d5da; box-shadow: 0 15px 32px rgba(44,38,32,.1); transform: translateY(-2px); }
.manifestation-practice-card:active { transform: translateY(0) scale(.995); }
.practice-card__body { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 13px 16px; }
.practice-card__topline { display: flex; align-items: center; gap: 8px; color: #8e8e93; }
.practice-card__topline small { font-size: var(--fs-caption); letter-spacing: .4px; }
.practice-card__icon, .law-row__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--accent); background: #f5f5f7; }
.ui-icon { display: block; width: 17px; height: 17px; flex: 0 0 auto; }
.practice-card__body > strong { max-width: 100%; overflow: hidden; color: #1d1d1f; font-size: var(--fs-heading); font-weight: 650; letter-spacing: -.45px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.practice-card__body > span:not(.practice-card__topline) { max-width: 100%; overflow: hidden; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.practice-card__body > b { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--accent); font-size: var(--fs-caption); font-weight: 600; }
.practice-card__body > b .ui-icon { width: 14px; height: 14px; }
.manifestation-practice-card--order { background: #ffffff; border-color: #e5e5ea; }
.order-summary { display: flex; flex: 0 0 88px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-left: 1px solid #e5e5ea; color: var(--accent); background: rgba(255,255,255,.42); }
.order-summary strong { font-size: var(--fs-display); font-weight: 650; letter-spacing: -1.2px; line-height: 1; }
.order-summary span { color: #a79591; font-size: var(--fs-caption); }
.manifestation-practice-card--vision { min-height: 112px; }
.manifestation-practice-card--vision .practice-card__body { padding-right: 16px; }
.vision-summary__preview { flex: 0 0 92px; order: 2; align-self: stretch; margin: 8px 8px 8px 0; overflow: hidden; border-radius: 14px; background: #f5f5f7; }
.vision-summary__tile { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; background-position: center; background-size: cover; background-color: #ececef; }
.vision-summary__tile--empty { display: grid; place-items: center; color: #8e8e93; font-size: var(--fs-caption); }
.practice-card__media { flex: 0 0 126px; order: 2; margin: 10px 10px 10px 0; overflow: hidden; border-radius: 14px; background: #f5f5f7; }
.practice-card__media .vision-image { height: 100%; min-height: 146px; border-radius: 14px; }
.practice-card__media .vision-image--empty { background: #f5f5f7; }
.manifestation-practice-card--receive { min-height: 108px; }
.receive-summary { display: flex; flex: 0 0 102px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-left: 1px solid #ededf0; color: #8e8e93; font-size: var(--fs-caption); }
.receive-summary__dot { width: 13px; height: 13px; border: 1px solid #d1d1d6; border-radius: 50%; }
.receive-summary__dot.is-filled { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(226,75,74,.1); }
.gratitude-panel { gap: 18px; }
.gratitude-compose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gratitude-compose-head h2 { margin: 5px 0 0; color: #1d1d1f; font-size: var(--fs-title); font-weight: 650; letter-spacing: -.5px; }
.gratitude-compose-head small { color: #8e8e93; font-size: var(--fs-caption); }
.gratitude-form { display: grid; gap: 12px; }
.gratitude-input-wrap { position: relative; }
.gratitude-input-wrap textarea { display: block; width: 100%; min-height: 145px; border: 1px solid #d1d1d6; border-radius: 16px; padding: 16px 48px 16px 16px; color: #1d1d1f; background: #fff; font: inherit; font-size: var(--fs-lead); line-height: 1.6; outline: none; resize: none; transition: border-color .2s ease, box-shadow .2s ease; }
.gratitude-input-wrap textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(226,75,74,.1); }
.gratitude-input-wrap textarea::placeholder { color: #b7b7bd; }
.voice-input { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--accent); background: #f5f5f7; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.voice-input:hover { background: #f5f5f7; transform: scale(1.05); }
.voice-input .ui-icon { width: 17px; height: 17px; }
.gratitude-submit { width: 100%; min-height: 46px; border-radius: 13px; font-size: var(--fs-body); font-weight: 600; }
.gratitude-complete { display: grid; justify-items: center; gap: 9px; padding: 30px 16px; border: 1px solid #e5e5ea; border-radius: 16px; background: #f5f5f7; text-align: center; }
.gratitude-complete__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--accent); font-size: var(--fs-heading); }
.gratitude-complete strong { color: var(--accent); font-size: var(--fs-heading); font-weight: 650; }
.gratitude-complete p { margin: 0; color: #8e8e93; font-size: var(--fs-caption); }
.gratitude-history { display: grid; gap: 9px; }
.gratitude-history__item { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ededf0; }
.gratitude-history__item time { color: #8e8e93; font-size: var(--fs-caption); line-height: 1.55; }
.gratitude-history__item p { margin: 0; color: #1d1d1f; font-size: var(--fs-caption); line-height: 1.55; }
.gratitude-history__empty { padding: 18px 0; color: #8e8e93; font-size: var(--fs-caption); text-align: center; }
.gratitude-week-view { display: grid; gap: 16px; width: 100%; }
.gratitude-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.gratitude-view-head h2 { margin: 5px 0 0; color: #1d1d1f; font-size: var(--fs-title); font-weight: 650; letter-spacing: -.5px; }
.month-switch { display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid #e5e5ea; border-radius: 11px; background: #fff; }
.month-switch strong { min-width: 74px; color: #6e6e73; font-size: var(--fs-caption); text-align: center; }
.month-switch button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 7px; color: var(--accent); background: #f5f5f7; cursor: pointer; font-size: var(--fs-heading); line-height: 1; }
.gratitude-week-cards { display: grid; gap: 10px; width: 100%; }
.gratitude-week-card { display: grid; gap: 0; width: 100%; min-width: 0; overflow: hidden; border: 1px solid #e5e5ea; border-radius: 15px; color: #1d1d1f; background: #fff; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.gratitude-week-card:hover, .gratitude-week-card.is-selected { border-color: #e5e5ea; box-shadow: 0 8px 18px rgba(44,38,32,.07); transform: translateY(-1px); }
.gratitude-week-card__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 14px; cursor: pointer; list-style: none; }
.gratitude-week-card__summary::-webkit-details-marker { display: none; }
.gratitude-week-card__summary::before { content: '⌄'; order: 3; color: #8e8e93; font-size: var(--fs-body); transition: transform .2s ease; }
.gratitude-week-card:not([open]) .gratitude-week-card__summary::before { transform: rotate(-90deg); }
.gratitude-week-card__summary > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; margin-right: auto; }
.gratitude-week-card__summary strong { color: #1d1d1f; font-size: var(--fs-body); font-weight: 650; }
.gratitude-week-card__summary small, .gratitude-week-card__summary > b { color: #8e8e93; font-size: var(--fs-caption); font-weight: 500; }
.gratitude-week-card__summary > b { color: var(--accent); white-space: nowrap; }
.gratitude-week-card__days { display: grid; gap: 0; padding: 0 14px 8px; border-top: 1px solid #f0f0f2; }
.gratitude-day-row { display: grid; grid-template-columns: 48px 7px minmax(0, 1fr) 16px; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 11px 0; border: 0; border-bottom: 1px solid #f0f0f2; color: #8e8e93; background: transparent; text-align: left; cursor: pointer; }
.gratitude-day-row:last-child { border-bottom: 0; }
.gratitude-day-row__date { display: flex; flex-direction: column; gap: 2px; }
.gratitude-day-row__date b { color: #6e6e73; font-size: var(--fs-caption); font-weight: 650; }
.gratitude-day-row__date small { color: #a8a8ad; font-size: var(--fs-micro); }
.gratitude-day-row > i { width: 7px; height: 7px; border: 1px solid #d1d1d6; border-radius: 50%; background: #fff; }
.gratitude-day-row.is-filled > i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(226,75,74,.1); }
.gratitude-day-row.is-today .gratitude-day-row__date b { color: var(--accent); }
.gratitude-day-row__text { min-width: 0; overflow: hidden; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.gratitude-day-row.is-filled .gratitude-day-row__text { color: #1d1d1f; }
.gratitude-day-row__arrow { color: var(--accent); }
.gratitude-day-row__arrow .ui-icon { width: 14px; height: 14px; }
.gratitude-day-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 8px; border-radius: 13px; background: #f5f5f7; }
.gratitude-day-tabs button { display: grid; justify-items: center; gap: 4px; padding: 7px 2px; border: 0; border-radius: 9px; color: #8e8e93; background: transparent; cursor: pointer; }
.gratitude-day-tabs button.is-active { color: var(--accent); background: #fff; box-shadow: 0 3px 9px rgba(44,38,32,.07); }
.gratitude-day-tabs b { font-size: var(--fs-body); font-weight: 650; }
.gratitude-day-tabs span { font-size: var(--fs-micro); }
.gratitude-day-tabs i { width: 5px; height: 5px; border-radius: 50%; background: #d1d1d6; }
.gratitude-day-tabs i.is-filled { background: var(--accent); }
.gratitude-complete--editable { align-items: center; }
.gratitude-complete--editable p { max-width: 270px; color: #1d1d1f; font-size: var(--fs-body); line-height: 1.55; }
.gratitude-week-content { display: grid; gap: 8px; padding: 13px; border: 1px solid #e5e5ea; border-radius: 14px; background: #fff; }
.gratitude-week-content .gratitude-history__item { grid-template-columns: 76px minmax(0, 1fr); padding: 11px 0; }
.gratitude-week-content .gratitude-history__item p { overflow-wrap: anywhere; white-space: normal; }
.gratitude-week-content .subsection-line { padding-bottom: 4px; }
.gratitude-week-content .gratitude-history__item button { justify-self: start; border: 0; padding: 0; color: var(--accent); background: none; cursor: pointer; font-size: var(--fs-caption); }

.manifestation-law-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 14px; border: 1px solid #e5e5ea; border-radius: 17px; color: #1d1d1f; background: #fff; box-shadow: 0 7px 18px rgba(44,38,32,.045); text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.manifestation-law-row:hover { box-shadow: 0 12px 24px rgba(44,38,32,.09); transform: translateY(-2px); }
.law-row__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.law-row__copy small { color: #8e8e93; font-size: var(--fs-micro); }
.law-row__copy strong { overflow: hidden; color: #1d1d1f; font-size: var(--fs-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.law-row__copy > span { overflow: hidden; color: #8e8e93; font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.law-row__arrow { color: var(--accent); }
.law-row__arrow .ui-icon { width: 18px; height: 18px; }
.vision-image { width: 100%; min-height: 74px; border-radius: 10px; background-position: center; background-size: cover; background-color: #f5f5f7; }
.vision-image--empty { display: grid; place-items: center; color: #8e8e93; font-size: var(--fs-caption); text-align: center; }
.vision-image--empty > span { display: flex; align-items: center; gap: 4px; }
.vision-image--empty .ui-icon { width: 14px; height: 14px; color: var(--accent); }
.vision-summary__preview > .vision-media { display: grid; }
.vision-summary__preview .vision-media__image { display: block; min-width: 0; min-height: 0; background-position: center; background-size: cover; background-color: #ececef; }
.vision-summary__preview .vision-media__image + .vision-media__image { display: none; }
.vision-summary__preview .vision-media__text { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; padding: 5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.58)); font-size: var(--fs-micro); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.vision-summary__preview .vision-media--empty { display: grid; place-items: center; width: 100%; height: 100%; color: #8e8e93; font-size: var(--fs-caption); }
.manifestation-modal { position: fixed; z-index: 30; inset: 0; display: grid; align-items: end; justify-items: center; padding: 0; opacity: 0; transition: opacity .2s ease; }
.manifestation-modal.is-visible { opacity: 1; }
.manifestation-modal__backdrop { position: absolute; inset: 0; background: rgba(29,29,31,.24); backdrop-filter: blur(5px); }
.manifestation-modal__dialog { position: relative; z-index: 1; width: min(100%, 500px); max-height: min(760px, calc(100vh - 24px)); overflow: auto; border: 1px solid rgba(255,255,255,.8); border-radius: 24px 24px 0 0; background: rgba(255,255,255,.96); box-shadow: 0 -12px 50px rgba(29,29,31,.16); transform: translateY(18px); transition: transform .22s ease; }
.manifestation-modal.is-visible .manifestation-modal__dialog { transform: translateY(0); }
.manifestation-modal__handle { width: 36px; height: 4px; margin: 9px auto 0; border-radius: 99px; background: #d1d1d6; }
.manifestation-modal__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(229,229,234,.9); color: #1d1d1f; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); font-size: var(--fs-caption); font-weight: 650; }
.manifestation-modal__bar button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; color: #8e8e93; background: #f5f5f7; cursor: pointer; }
.manifestation-modal__bar button:hover { color: #1d1d1f; background: #e5e5ea; }
.manifestation-modal [data-manifestation-panel] { padding: 18px; }
.manifestation-modal-panel, .manifestation-modal-panel * { min-width: 0; }
.manifestation-modal-panel { display: grid; gap: 14px; width: 100%; }
.vision-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.manifestation-panel__head h2 { margin: 5px 0 0; color: #1d1d1f; font-size: var(--fs-title); font-weight: 650; letter-spacing: -.4px; line-height: 1.3; }
.detail-label { color: var(--accent); font-size: var(--fs-caption); letter-spacing: .7px; }
.inline-back { display: inline-flex; align-items: center; gap: 2px; border: 0; padding: 0; color: var(--accent); background: none; cursor: pointer; font-size: var(--fs-caption); }
.inline-back .ui-icon { width: 14px; height: 14px; }
.panel-note, .micro-note { margin: 0; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.5; }
.vision-statement { display: grid; gap: 5px; padding: 14px; border-radius: 13px; background: #f5f5f7; }
.vision-statement span { color: var(--accent); font-size: var(--fs-caption); }
.vision-statement strong { color: #1d1d1f; font-size: var(--fs-body); font-weight: 550; line-height: 1.5; }
.vision-folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; touch-action: pan-y; }
.vision-folder { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 6px; min-width: 0; min-height: 146px; padding: 12px; border: 1px solid #e5e5ea; border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.vision-folder:hover { border-color: #e5e5ea; box-shadow: 0 7px 16px rgba(44,38,32,.07); transform: translateY(-1px); }
.vision-folder .vision-image { min-height: 92px; }
.vision-folder > span { display: block; overflow: hidden; color: #1d1d1f; font-size: var(--fs-body); font-weight: 550; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.vision-folder > small { display: block; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.3; }
.vision-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; color: #8e8e93; font-size: var(--fs-caption); }
.vision-pagination button { width: 30px; height: 30px; border: 1px solid #e5e5ea; border-radius: 50%; color: var(--accent); background: #fff; cursor: pointer; }
.vision-pagination button:disabled { color: #c7c7cc; cursor: default; }
.vision-detail-composition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vision-detail-image { display: grid; gap: 7px; min-width: 0; }
.vision-detail-image .vision-image { min-height: 160px; }
.vision-detail-image p { min-height: 16px; margin: 0; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.45; }
.vision-detail-image--wide { grid-column: 1 / -1; }
.vision-detail-image--wide .vision-image { min-height: 190px; }
.vision-detail-copy { grid-column: 1 / -1; margin: 0; padding: 12px; border-radius: 11px; color: #4c4843; background: #f5f5f7; font-size: var(--fs-caption); line-height: 1.55; }
.vision-edit-form { display: grid; gap: 11px; }
.vision-edit-form label { display: grid; gap: 6px; }
.vision-edit-form label > span { color: #6e6e73; font-size: var(--fs-caption); }
.vision-edit-form input, .vision-edit-form textarea { width: 100%; border: 1px solid #d1d1d6; border-radius: 10px; padding: 10px; color: #1d1d1f; background: #fff; font: inherit; font-size: var(--fs-caption); outline: none; resize: vertical; }
.vision-edit-form input:focus, .vision-edit-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226,75,74,.1); }
.vision-detail-image button { justify-self: start; border: 0; padding: 0; color: var(--accent); background: none; cursor: pointer; font-size: var(--fs-caption); }
.vision-empty-detail { display: grid; gap: 7px; grid-column: 1 / -1; padding: 36px 15px; border: 1px dashed #d1d1d6; text-align: center; }
.vision-empty-detail span { color: #1d1d1f; font-size: var(--fs-body); }
.vision-empty-detail small { color: #8e8e93; font-size: var(--fs-caption); }
.vision-detail-actions, .form-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.vision-detail-actions > button { flex: 1 1 auto; min-width: 0; }
.vision-detail-actions .primary-action { min-width: 106px; }
.vision-detail-actions .secondary-action { min-width: 92px; }
.primary-action, .secondary-action, .new-order-trigger, .order-list-item { border-radius: 11px; cursor: pointer; font-size: var(--fs-caption); }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; padding: 10px 14px; color: #fff; background: var(--accent); box-shadow: 0 5px 12px rgba(226,75,74,.16); }
.primary-action .ui-icon, .secondary-action .ui-icon, .new-order-trigger .ui-icon { width: 15px; height: 15px; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e5e5ea; padding: 9px 13px; color: #6e6e73; background: #fff; }
.order-list-block, .receive-block, .gratitude-board { display: grid; gap: 9px; padding: 13px; border: 1px solid #e5e5ea; border-radius: 14px; background: #fff; }
.order-list-item { display: grid; grid-template-columns: 48px 1fr 18px; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid #ededf0; color: #1d1d1f; background: #fff; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.order-list-item:hover { border-color: #d1d1d6; box-shadow: 0 7px 16px rgba(44,38,32,.06); transform: translateY(-1px); }
.order-list-item span { display: grid; min-width: 0; gap: 4px; }
.order-list-item strong { overflow: hidden; color: #1d1d1f; font-size: var(--fs-caption); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.order-list-item small { overflow: hidden; color: #6e6e73; font-size: var(--fs-caption); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.order-list-item em { color: #8e8e93; font-size: var(--fs-micro); font-style: normal; }
.order-list-item > i { color: var(--accent); }
.order-list-item > i .ui-icon { width: 16px; height: 16px; }
.order-thumbnail { width: 48px; height: 56px; border-radius: 9px; background-position: center; background-size: cover; background-color: #f5f5f7; }
.order-thumbnail--empty { display: grid; place-items: center; color: var(--accent); }
.order-thumbnail--empty .ui-icon { width: 19px; height: 19px; }
.order-list-actions { display: none; }
.order-empty { padding: 15px 0; color: #8e8e93; font-size: var(--fs-caption); text-align: center; }
.new-order-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 15px; border: 1px dashed #d1d1d6; color: var(--accent); background: #fafafa; text-align: left; transition: background .2s ease, box-shadow .2s ease; }
.new-order-trigger:hover { background: #f5f5f7; box-shadow: 0 7px 16px rgba(44,38,32,.06); }
.new-order-trigger > span { display: grid; gap: 3px; }
.new-order-trigger strong { font-size: var(--fs-caption); }
.new-order-trigger small { color: #8e8e93; font-size: var(--fs-caption); }
.order-form { display: grid; gap: 11px; padding-top: 3px; }
.form-section-title { display: grid; gap: 4px; }
.form-section-title strong { color: #1d1d1f; font-size: var(--fs-body); font-weight: 650; }
.form-section-title span { color: #8e8e93; font-size: var(--fs-caption); }
.order-form label, .gratitude-inputs label, .receive-block > textarea { display: grid; gap: 6px; }
.order-form label > span { color: #6e6e73; font-size: var(--fs-caption); }
.order-form input, .order-form textarea, .gratitude-inputs textarea, .receive-block > textarea { width: 100%; border: 1px solid #d1d1d6; border-radius: 10px; padding: 10px; color: #1d1d1f; background: #fff; font: inherit; font-size: var(--fs-caption); outline: none; resize: vertical; }
.order-form input:focus, .order-form textarea:focus, .gratitude-inputs textarea:focus, .receive-block > textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226,75,74,.1); }
.order-textarea-wrap { position: relative; }
.order-textarea-wrap textarea { min-height: 178px; padding-right: 48px; font-size: var(--fs-body); line-height: 1.65; resize: vertical; }
.order-textarea-wrap .voice-input { bottom: 12px; }
.order-writing-hints { display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; background: #f5f5f7; }
.order-writing-hints span { color: var(--accent); font-size: var(--fs-caption); font-weight: 600; }
.order-writing-hints p { margin: 0; color: #8e8e93; font-size: var(--fs-caption); line-height: 1.5; }
.order-delete-action { color: var(--accent); }
.order-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.gratitude-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gratitude-inputs label { padding: 9px; border: 1px solid #ededf0; border-radius: 10px; }
.gratitude-inputs label > b { color: var(--accent); font-size: var(--fs-caption); }
.gratitude-inputs textarea { min-height: 92px; resize: none; }
.receive-form { display: grid; gap: 11px; }
.gratitude-board { margin-top: 2px; }
.gratitude-board__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gratitude-board__day { display: grid; justify-items: center; gap: 5px; min-height: 60px; padding: 8px 3px; border: 1px solid #ededf0; border-radius: 9px; color: #8e8e93; background: #fafafa; font-size: var(--fs-micro); }
.gratitude-board__day i { width: 7px; height: 7px; border-radius: 50%; background: #d1d1d6; }
.gratitude-board__day b { color: #8e8e93; font-size: var(--fs-micro); font-weight: 500; }
.gratitude-board__day.is-filled { border-color: #e5e5ea; color: var(--accent); background: #f5f5f7; }
.gratitude-board__day.is-filled i, .gratitude-board__day.is-filled b { color: var(--accent); background: var(--accent); }
.vision-category-actions { display: flex; align-items: center; gap: 9px; }
.vision-category-actions span { color: #8e8e93; font-size: var(--fs-caption); }
.law-library { display: grid; gap: 8px; }
.daily-law-card { display: grid; gap: 8px; padding: 16px; border: 1px solid #e5e5ea; border-radius: 14px; background: #f5f5f7; }
.daily-law-card > span { color: var(--accent); font-size: var(--fs-caption); }
.daily-law-card strong { color: #1d1d1f; font-size: var(--fs-heading); font-weight: 650; }
.daily-law-card p { margin: 0; color: #6e6e73; font-size: var(--fs-caption); line-height: 1.5; }
.daily-law-card button, .law-library-item button { display: inline-flex; align-items: center; gap: 4px; justify-self: start; border: 0; padding: 2px 0; color: var(--accent); background: none; cursor: pointer; font-size: var(--fs-caption); }
.daily-law-card button .ui-icon { width: 13px; height: 13px; }
.law-library-item { border: 1px solid #e5e5ea; border-radius: 11px; background: #fff; overflow: hidden; }
.law-library-item summary { display: grid; grid-template-columns: 25px 1fr 20px; align-items: center; gap: 8px; padding: 13px; cursor: pointer; list-style: none; }
.law-library-item summary::-webkit-details-marker { display: none; }
.law-library-item summary b { color: var(--accent); font-size: var(--fs-caption); }
.law-library-item summary strong { color: #1d1d1f; font-size: var(--fs-caption); font-weight: 550; }
.law-library-item summary i { color: #8e8e93; font-size: var(--fs-heading); font-style: normal; }
.law-library-item[open] summary i { transform: rotate(45deg); }
.law-library-item > div { display: grid; gap: 9px; padding: 0 13px 13px 46px; }
.law-library-item p, .law-library-item small { margin: 0; color: #6e6e73; font-size: var(--fs-caption); line-height: 1.5; }
.law-library-item small { padding: 8px; background: #f5f5f7; }
@media (max-width: 380px) {
  .manifestation-header p { max-width: 205px; }
  .practice-card__body { padding: 16px; }
  .practice-card__body > strong { font-size: var(--fs-heading); }
  .practice-card__body > span:not(.practice-card__topline) { font-size: var(--fs-caption); }
  .practice-card__media { flex-basis: 96px; }
  .practice-card__media .vision-image { min-height: 146px; }
  .order-summary, .receive-summary { flex-basis: 82px; }
  .order-summary strong { font-size: var(--fs-display); }
  .gratitude-inputs, .order-field-grid { grid-template-columns: 1fr; }
  .gratitude-input-wrap textarea { min-height: 128px; font-size: var(--fs-body); }
  .gratitude-inputs textarea { min-height: 62px; }
  .order-list-item { grid-template-columns: 42px 1fr 16px; }
  .order-thumbnail { width: 42px; height: 52px; }
  .manifestation-modal__dialog { max-height: calc(100vh - 12px); }
  .home-dual-feature { gap: 7px; }
  .home-manifestation, .home-divination { min-height: 166px; padding-inline: 12px; }
  .home-manifestation__grid { grid-template-rows: repeat(2, 38px); }
  .home-divination__symbol { font-size: 48px; }
  .home-divination__name { font-size: var(--fs-caption); }
  .gratitude-week-card__days { gap: 4px; }
  .gratitude-view-head { align-items: center; }
  .month-switch strong { min-width: 65px; }
  .vision-category-actions { align-items: flex-start; flex-direction: column; }
}

/* ===== Story 模式 =====
   真正全屏：显化页时 body 挂 story-fullscreen，#app-root padding 已被清零，
   story 直接 margin:0 从屏幕最顶端（状态栏后）铺到屏幕最底（导航浮在上面）。
   内部 padding-top 避开灵动岛；.story-bottom 底部留出导航高度，内容不被盖。 */


/* ===== 愿景板设计稿风格 ===== */
.vb-page { background: transparent; color: #fff; min-height: calc(100dvh - 90px); padding: 20px 16px 30px; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; width: 100%; }
.vb-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.vb-header h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.vb-date { font-size: 13px; color: #666; }
.vb-date .day { color: #b94f49; font-weight: 600; }
.vb-main-card { position: relative; height: 440px; border-radius: 24px; margin-bottom: 16px; overflow: hidden; }
.vb-stack2 { position: absolute; inset: 18px -24px -24px 24px; border-radius: 20px; background: #151515; transform: rotate(-3deg); }
.vb-stack1 { position: absolute; inset: 10px -14px -14px 14px; border-radius: 20px; background: #1a1a1a; transform: rotate(-1.5deg); }
.vb-visual { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #1a1a1a; }
.vb-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #1a1a1a; }
.vb-image--empty { display: flex; align-items: center; justify-content: center; }
.vb-empty-icon { font-size: 60px; opacity: .5; }
.vb-cat-label { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); padding: 6px 14px; border-radius: 20px; font-size: 13px; color: #b94f49; font-weight: 600; }
.vb-slide-hint { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 20px; font-size: 12px; color: #999; }
.vb-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 24px 20px; background: rgba(255,255,255,.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); display: flex; flex-direction: column; justify-content: flex-end; }
.vb-quote { font-size: 17px; line-height: 1.6; font-weight: 500; margin-bottom: 10px; }
.vb-order-num { font-size: 12px; color: #ffffff; opacity: .8; }
.vb-dots { position: absolute; bottom: 16px; right: 20px; display: flex; gap: 6px; }
.vb-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; border: 0; padding: 0; }
.vb-dots .dot.active { background: #b94f49; width: 18px; border-radius: 3px; }
.vb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.vb-btn { height: 90px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: none; }
.vb-btn__icon { width: 28px; height: 28px; flex-shrink: 0; opacity: .9; }
.vb-btn__text { display: flex; flex-direction: column; gap: 2px; } .vb-btn__text strong { font-size: 15px; font-weight: 600; } .vb-btn__text small { font-size: 11px; color: rgba(255,255,255,.5); }
.vb-btn--vision { background: #fff; color: #1a1a1a; }
.vb-btn--gratitude { background: #fff; color: #1a1a1a; }
.vb-btn__icon { display: none; }
.vb-footer { text-align: center; font-size: 11px; color: #444; }
.vb-footer span { color: #ffffff; }
.wh-back-btn { font-size: 14px; color: #ffffff; background: none; border: 0; cursor: pointer; padding: 0; }


/* 愿景板仓库：两列卡片 */
.wh-card { background: #1a1a1a; border-radius: 14px; overflow: hidden; }
.wh-card__head { display: flex; align-items: center; gap: 10px; padding: 10px; background: none; border: 0; color: #fff; width: 100%; cursor: pointer; }
.wh-card__cover { width: 44px; height: 44px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; }
.wh-card__info { flex: 1; text-align: left; display: flex; flex-direction: column; }
.wh-card__info strong { font-size: 14px; }
.wh-card__info small { font-size: 11px; color: #888; }
.wh-card__arrow { color: #888; transition: transform .2s; }
.wh-card.open .wh-card__arrow { transform: rotate(90deg); }
.wh-card__body { display: none; padding: 0 10px 10px; grid-template-columns: 1fr 1fr; gap: 8px; }
.wh-card.open .wh-card__body { display: grid; }


/* ===== 愿景板 v5 苹果风 ===== */
.vb-page { background: transparent; color: #fff; min-height: calc(100dvh - 90px); padding: 20px 16px 30px; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; width: 100%; }
.vb-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.vb-header h1 { font-size: 22px; font-weight: 700; }
.vb-date { font-size: 13px; color: #666; }
.vb-date .day { color: #b94f49; font-weight: 600; }
.vb-main-card { position: relative; flex: 1; min-height: 380px; border-radius: 24px; overflow: hidden; margin-bottom: 16px; cursor: grab; user-select: none; }
.vb-main-card:active { cursor: grabbing; }
.vb-visual { position: absolute; inset: 0; }
.vb-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #1a1a1a; }
.vb-image--empty { display: flex; align-items: center; justify-content: center; }
.vb-empty-icon { font-size: 60px; opacity: .5; }
.vb-cat-label { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); padding: 6px 14px; border-radius: 20px; font-size: 13px; color: #ffffff; font-weight: 600; z-index: 2; }
.vb-text { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 14px; background: rgba(255,255,255,.12); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,.6); border-radius: 14px; }
.vb-quote { font-size: 16px; line-height: 1.5; margin-bottom: 4px; }
.vb-dots { position: absolute; bottom: 16px; right: 20px; display: flex; gap: 6px; z-index: 3; }
.vb-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; border: 0; padding: 0; }
.vb-dots .dot.active { background: #b94f49; width: 18px; border-radius: 3px; }
.vb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.vb-btn { display: flex; align-items: center; gap: 12px; padding: 16px; height: 76px; border-radius: 18px; background: rgba(255,255,255,.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); color: #fff; border: 1px solid rgba(255,255,255,.1); cursor: pointer; text-align: left; transition: transform .15s; }
.vb-footer { text-align: center; font-size: 11px; color: #444; }
/* 仓库全屏 */
.warehouse { position: fixed; inset: 0; background: radial-gradient(ellipse at top, #141420 0%, #000 60%); z-index: 30; display: none; flex-direction: column; padding-top: env(safe-area-inset-top); }
.warehouse.open { display: flex; }
.wh-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px; max-width: 480px; margin: 0 auto; width: 100%; }
.wh-topbar h1 { font-size: 18px; font-weight: 700; }
.wh-back-btn { font-size: 16px; color: #b94f49; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0; cursor: pointer; padding: 8px 14px; border-radius: 20px; }
.wh-spacer { width: 60px; }
.wh-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 16px 120px; align-content: start; max-width: 480px; margin: 0 auto; width: 100%; }
.vb-card { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #1a1a1a; border: 0; padding: 0; cursor: pointer; text-align: left; height: 200px; width: 100%; }
.vb-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vb-card__tag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); padding: 4px 10px; border-radius: 12px; font-size: 11px; color: #fff; }
.vb-card__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); font-size: 13px; color: #fff; line-height: 1.4; }
.wh-fab { position: fixed; bottom: 30px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: #b94f49; color: #fff; border: none; font-size: 28px; cursor: pointer; box-shadow: 0 4px 20px rgba(185,79,73,.4); z-index: 31; }

/* 显化页根容器铺满深色渐变 */
#app-root:has(.vb-page) { background: radial-gradient(ellipse at top, #141420 0%, #0a0a0a 60%) !important; }


/* 愿景板仓库 v2 */
.wh-body { flex: 1; overflow-y: auto; padding: 16px; max-width: 480px; margin: 0 auto; width: 100%; padding-bottom: 40px; }
.wh-hero { display: block; width: 100%; border: 0; padding: 0; border-radius: 20px; overflow: hidden; position: relative; background: #1a1a1a; cursor: pointer; margin-bottom: 16px; text-align: left; }
.wh-hero__img { width: 100%; height: 220px; background-size: cover; background-position: center; }
.wh-hero__text { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; background: rgba(0,0,0,.3); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-radius: 14px; }
.wh-hero__title { font-size: 16px; font-weight: 600; color: #fff; }
.wh-hero__sub { font-size: 12px; color: #b94f49; margin-top: 4px; }
.wh-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wh-cat-card { position: relative; border: 0; padding: 0; background: #1a1a1a; border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; }
.wh-cat-card__cover { position: relative; aspect-ratio: 1/1; background-size: cover; background-position: center; }
.wh-cat-card__count { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 10px; }
.wh-cat-card__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 13px; color: #fff; background: rgba(0,0,0,.35); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.wh-cat-card--add { display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px dashed #333; }
.wh-cat-card__add { font-size: 32px; color: #555; }


.vb-card-wrap { position: relative; }
.vb-card__del { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #b94f49; color: #fff; border: 2px solid #fff; font-size: 14px; line-height: 1; cursor: pointer; z-index: 5; }

.gratitude-tabs { display: flex; gap: 6px; padding: 4px; background: #f0f0f3; border-radius: 14px; margin-bottom: 14px; }
.gratitude-tab { flex: 1; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: #666; font-size: 13px; cursor: pointer; transition: all .15s ease; }
.gratitude-tab.is-active { background: #fff; color: #1a1a1a; font-weight: 600; }
/* 写感恩 tab 标着重：未激活也红色加粗，激活实心红 */
.gratitude-tab[data-grat-tab="write"] { color: var(--accent); font-weight: 600; }
.gratitude-tab[data-grat-tab="write"].is-active { background: var(--accent); color: #fff; }
.gweek-card summary { list-style: none; }
.gweek-card summary::-webkit-details-marker { display: none; }
.gweek-card__body { padding: 8px 0 4px; }
.gweek-empty { color: #999; font-size: 13px; padding: 12px 0; text-align: center; }
.gratitude-big-add { display: block; width: 100%; padding: 40px; border: 1.5px dashed #ccc; border-radius: 20px; background: #fafafa; color: #666; font-size: 18px; cursor: pointer; }


.wh-cat-card--featured { grid-column: 1 / -1; aspect-ratio: 2.2 / 1; overflow: hidden; position: relative; }
.wh-cat-card--featured .wh-cat-card__cover { aspect-ratio: auto !important; height: 100%; background-size: cover; background-position: center; position: absolute; inset: 0; }
.wh-cat-card--featured .wh-cat-card__count { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); padding: 4px 10px; border-radius: 20px; font-size: 11px; color: #fff; }
.wh-cat-card--featured .wh-cat-card__name { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; background: rgba(0,0,0,.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; font-size: 17px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); z-index: 2; }

.manifestation-modal__dialog { background: #fff; border-radius: 24px 24px 0 0; padding: 8px 20px 34px; max-height: 85vh; overflow-y: auto; }
.manifestation-modal__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 16px; font-size: 16px; font-weight: 600; color: #242321; }
.manifestation-modal__bar button { background: none; border: 0; font-size: 22px; color: #999; cursor: pointer; }
.ios-field { margin-bottom: 12px; }
.ios-field input, .ios-field textarea { width: 100%; border: 0; background: #f5f5f7; border-radius: 14px; padding: 14px 16px; font-size: 15px; font-family: inherit; color: #242321; outline: none; box-sizing: border-box; }
.ios-field textarea { resize: none; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; }
.primary-action { flex: 1; background: #b94f49; color: #fff; border: 0; border-radius: 14px; padding: 14px; font-size: 16px; font-weight: 600; cursor: pointer; }
.secondary-action { flex: 1; background: #f5f5f7; color: #242321; border: 0; border-radius: 14px; padding: 14px; font-size: 16px; font-weight: 600; cursor: pointer; }

/* 3. 主页两个按钮 */
.vb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vb-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: rgba(255,255,255,.08); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 18px 16px; color: #fff; cursor: pointer; transition: transform .15s ease, background .15s ease; text-align: left; }
.vb-btn:active { transform: scale(.96); background: rgba(255,255,255,.15); }
.vb-btn__icon { width: 28px; height: 28px; opacity: .9; }
.vb-btn__text { display: flex; flex-direction: column; gap: 2px; }
.vb-btn__text strong { font-size: 15px; font-weight: 700; }
.vb-btn__text small { font-size: 12px; opacity: .7; }

/* 写感恩 = 主操作按钮：实心红，强化；愿景板保持白色毛玻璃 */
.vb-actions [data-open-section="receive"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(185,79,73,.35); }
.vb-actions [data-open-section="receive"] .vb-btn__text small { color: rgba(255,255,255,.8); }
.vb-actions [data-open-section="receive"]:active { background: #a64640; }
.vb-actions [data-open-warehouse] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }