/* ============================================================================
   03 · components.css — 手账的零件：便签卡片、胶带、按钮、表单、抽屉、引导页
   ----------------------------------------------------------------------------
   风格要点（照着设计规范写，别妥协）：
   · 卡片 = 便签纸 / 拍立得：白底、细边框、轻微纸张阴影，**没有大圆角、没有悬浮感**。
   · 每张卡片一枚 CSS 画的胶带贴纸（薄荷绿或淡金）+ 逐张不同的微小旋转。
   · 按钮扁平 + 细边框，hover 底色略深，按下缩到 0.97。
   · 输入框聚焦时底部一条薄荷下划线从 0 长到 100%（不是生硬的边框变色）。
   ========================================================================== */

/* ==========================================================================
   1. 按钮
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  color: var(--c-ink);
  font-family: var(--font-title);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-title);
  white-space: nowrap;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn:hover {
  background-color: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
}

.btn:active {
  scale: var(--press-scale);
}

.btn--primary {
  color: var(--c-on-primary);
  background-color: var(--c-primary);
  border-color: var(--c-primary-strong);
}

.btn--primary:hover {
  background-color: var(--c-primary-strong);
}

.btn--outline {
  color: var(--c-primary);
  background-color: transparent;
  border-color: var(--c-primary);
}

.btn--outline:hover {
  background-color: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

.btn--ghost {
  color: var(--c-ink-muted);
  background-color: transparent;
  border-color: transparent;
}

.btn--ghost:hover {
  color: var(--c-ink);
  background-color: color-mix(in srgb, var(--c-ink) 8%, transparent);
}

.btn--danger {
  color: var(--c-danger);
  background-color: transparent;
  border-color: color-mix(in srgb, var(--c-danger) 55%, transparent);
}

.btn--danger:hover {
  background-color: var(--c-danger-soft);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 32px;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   2. 筛选小圆片 / 标签计数
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: var(--sp-1) var(--sp-3);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
}

.chip:hover {
  color: var(--c-ink);
  border-color: var(--c-line);
}

.chip[aria-pressed="true"] {
  color: var(--c-primary-strong);
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary);
}

.chip__num {
  min-width: 18px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--r-pill);
}

.chip__dot {
  width: 8px;
  height: 8px;
  flex: none;
  background-color: var(--c-line);
  border-radius: 50%;
}

.chip[aria-pressed="true"] .chip__dot {
  background-color: var(--c-primary);
}

/* ==========================================================================
   3. 便签卡片 / 写字区
   ========================================================================== */

.card {
  position: relative;
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-paper);
}

/* 写字区顶上贴一条胶带：像撕了一张便签按在本子上 */
.card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: var(--tape-x);
  width: var(--tape-w);
  height: var(--tape-h);
  background-color: var(--tape-c);
  opacity: .85;
  rotate: var(--tape-rot);
  box-shadow: var(--shadow-tape);
}

.composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.composer--private::before {
  background-color: var(--tape-c-2);
}

.card__title {
  color: var(--c-ink);
  font-size: var(--fs-lg);
}

.composer__foot {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

/* ---------------------------------------------------------------- 表单域 */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* fieldset 版的 .field（「谁能看到」那两组）要先把浏览器默认的边框与内边距清掉，
     否则两个选项会被挤得换行 */
  min-width: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  color: var(--c-ink-muted);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
}

.field__input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-ink);
  background-color: var(--c-surface);
  background-image: linear-gradient(var(--c-primary), var(--c-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  border: 1px solid var(--c-line-soft);
  border-bottom-color: var(--c-line-dash);
  border-radius: var(--r-sm);
  transition: background-size var(--dur-base) var(--ease), background-color var(--dur-fast) var(--ease);
}

.field__input::placeholder {
  color: var(--c-ink-faint);
  font-family: var(--font-body);
}

.field__input:hover {
  border-color: var(--c-line);
}

/* 聚焦：下划线从左边长出来（不要生硬的边框变色） */
.field__input:focus {
  background-color: var(--c-paper-tint);
  background-size: 100% 2px;
  border-color: var(--c-line-soft);
}

.field__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-focus) 30%, transparent);
}

.field__input[aria-invalid="true"] {
  background-color: var(--c-danger-soft);
  border-color: var(--c-danger);
}

/* 多行正文：铺一层极淡的横格纸 */
.field__input--area {
  min-height: 132px;
  line-height: 28px;
  background-image: linear-gradient(var(--c-primary), var(--c-primary)),
    repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--c-line-soft) 80%, transparent) 27px 28px);
  background-repeat: no-repeat, repeat;
  background-position: 0 100%, 0 0;
  background-size: 0% 2px, 100% 28px;
}

.field__input--area:focus {
  background-size: 100% 2px, 100% 28px;
}

.field__hint {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.field__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--c-ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

/* ---------------------------------------------------------------- 单选 */
.choice-row {
  /* 两个选项等宽并排：不用 flex-wrap（字一宽就换行，看着像个列表） */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.choice {
  position: relative;
  display: flex;
  min-width: 0;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: var(--sp-1) var(--sp-3);
  white-space: nowrap;
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.choice:hover .choice__box {
  color: var(--c-ink);
  border-color: var(--c-line);
}

.choice input:checked + .choice__box {
  color: var(--c-primary-strong);
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary);
}

.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   4. 列表与便签条目（共同 / 私人日记）
   ========================================================================== */

.entries,
.mini-list,
.qas {
  display: flex;
  flex-direction: column;
}

.entries {
  gap: var(--sp-5);
}

.mini-list,
.qas {
  gap: var(--sp-4);
}

.entry,
.mini,
.qa {
  position: relative;
  background-color: var(--c-surface);
  /* 便签纸：白底 + 一层极淡的纸纹（跟整页的纸张质感同一张图，只是更淡） */
  background-image: var(--paper-grain);
  background-size: var(--paper-noise-size);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-paper);
  /* 用独立的 rotate / translate 属性，避免被 hover 的 transform 冲掉 */
  rotate: var(--tilt);
  translate: var(--nudge) var(--lift);
  transition: border-color var(--dur-fast) var(--ease);
}

.entry:hover,
.mini:hover,
.qa:hover {
  border-color: var(--c-line-dash);
}

/* 胶带贴纸：纯 CSS 画的小矩形，斜着贴在卡片角上 */
.entry::before,
.mini::before,
.qa::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--tape-x);
  width: var(--tape-w);
  height: 16px;
  background-color: var(--tape-c);
  opacity: .8;
  rotate: var(--tape-rot);
  box-shadow: var(--shadow-tape);
}

/* 逐张不同的微小旋转与偏移：0.3deg 到 -0.8deg，绝不统一角度 */
.entries > .entry:nth-child(7n+1),
.mini-list > .mini:nth-child(7n+1),
.qas > .qa:nth-child(7n+1) {
  --tilt: -.5deg;
  --nudge: -5px;
  --lift: -1px;
  --tape-x: 22px;
  --tape-rot: -5deg;
}

.entries > .entry:nth-child(7n+2),
.mini-list > .mini:nth-child(7n+2),
.qas > .qa:nth-child(7n+2) {
  --tilt: .42deg;
  --nudge: 6px;
  --lift: 1px;
  --tape-x: 62%;
  --tape-rot: 3.5deg;
  --tape-c: var(--tape-c-2);
}

.entries > .entry:nth-child(7n+3),
.mini-list > .mini:nth-child(7n+3),
.qas > .qa:nth-child(7n+3) {
  --tilt: -.22deg;
  --nudge: -2px;
  --lift: 0px;
  --tape-x: 40%;
  --tape-rot: -2.4deg;
}

.entries > .entry:nth-child(7n+4),
.mini-list > .mini:nth-child(7n+4),
.qas > .qa:nth-child(7n+4) {
  --tilt: .68deg;
  --nudge: 4px;
  --lift: -2px;
  --tape-x: 12%;
  --tape-rot: 6deg;
  --tape-c: var(--tape-c-2);
}

.entries > .entry:nth-child(7n+5),
.mini-list > .mini:nth-child(7n+5),
.qas > .qa:nth-child(7n+5) {
  --tilt: -.8deg;
  --nudge: -6px;
  --lift: 1px;
  --tape-x: 74%;
  --tape-rot: -6.5deg;
}

.entries > .entry:nth-child(7n+6),
.mini-list > .mini:nth-child(7n+6),
.qas > .qa:nth-child(7n+6) {
  --tilt: .3deg;
  --nudge: 2px;
  --lift: 0px;
  --tape-x: 50%;
  --tape-rot: 4deg;
}

.entries > .entry:nth-child(7n+7),
.mini-list > .mini:nth-child(7n+7),
.qas > .qa:nth-child(7n+7) {
  --tilt: -.36deg;
  --nudge: -3px;
  --lift: -1px;
  --tape-x: 30%;
  --tape-rot: -3deg;
  --tape-c: var(--tape-c-2);
}

.entry {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.entry--private {
  --tape-c: var(--tape-c-2);
  background-color: var(--c-paper-tint);
  border-style: dashed;
}

.entry[data-new="1"] {
  border-color: var(--c-primary-soft);
  box-shadow: var(--shadow-paper), inset 3px 0 0 var(--c-primary-soft);
}

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

.entry__title {
  color: var(--c-ink);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

.entry__badges {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.entry__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.entry__author {
  color: var(--c-ink-muted);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
}

.entry__time {
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}

/* 日期旁的天气 / 心情：手账里随手补的那一小笔 */
.entry__mood,
.mini__mood {
  color: var(--c-gold-deep);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.entry__mood::before,
.mini__mood::before {
  content: "｜";
  margin-right: 2px;
  color: var(--c-line-dash);
}

.entry__body {
  color: var(--c-ink);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 长日记默认只露四行（行数在 tokens.css 的 --clamp-lines 里调） */
.entry__body--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines);
  line-clamp: var(--clamp-lines);
  overflow: hidden;
}

/* 「展开全文 / 收起」：做成一枚小贴纸，手感跟迷你日记的「#喜好」标签一致 */
.entry__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 32px;
  padding: 0 var(--sp-3);
  color: var(--c-primary-strong);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
  background-color: var(--c-primary-soft);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--r-sm);
  transition: scale var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.entry__more:hover {
  background-color: color-mix(in srgb, var(--c-primary) 16%, var(--c-primary-soft));
  border-color: currentColor;
}

.entry__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line-soft);
}

.act {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 32px;
  padding: 0 var(--sp-2);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    scale var(--dur-fast) var(--ease);
}

.act:hover {
  color: var(--c-ink);
  background-color: color-mix(in srgb, var(--c-ink) 8%, transparent);
}

.act:active {
  scale: var(--press-scale);
}

.act--like-on {
  color: var(--c-danger);
}

.act--danger {
  color: var(--c-danger);
}

.act--danger:hover {
  background-color: var(--c-danger-soft);
}

.act__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------- 评论区 */
.comments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line-soft);
}

.comments__empty {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.comments__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.comment {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-1) 0;
}

.comment__author {
  color: var(--c-primary);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
}

.comment__text {
  flex: 1 1 12ch;
  min-width: 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.comment__time {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.comment__del {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.comment__del:hover {
  color: var(--c-danger);
}

.comment-form,
.answer-form {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}

.comment-form__input,
.answer-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-1) var(--sp-3);
  color: var(--c-ink);
  background-color: var(--c-surface-2);
  background-image: linear-gradient(var(--c-primary), var(--c-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  transition: background-size var(--dur-base) var(--ease);
}

.comment-form__input:focus,
.answer-form__input:focus {
  background-size: 100% 2px;
}

.comment-form__input::placeholder,
.answer-form__input::placeholder {
  color: var(--c-ink-faint);
}

/* ==========================================================================
   5. 徽章
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  color: var(--c-ink-muted);
  font-size: var(--fs-xs);
  line-height: 20px;
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.badge--private {
  color: var(--c-gold-deep);
  background-color: var(--c-gold-soft);
  border-color: var(--c-gold);
}

.badge--mine {
  color: var(--c-primary-strong);
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary-soft);
}

.badge--answered {
  color: var(--c-primary-strong);
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary-soft);
}

.badge--waiting {
  color: var(--c-gold-deep);
  background-color: var(--c-gold-soft);
  border-color: var(--c-gold);
}

/* 迷你日记的标签：小贴纸 —— 和「双方可见 / 我写的」同一种手感
   （方角、一圈细边、淡色底），一色一类，颜色全部来自四套主题里的 --c-tag-* */
.badge--tag {
  padding: 1px var(--sp-2);
  color: var(--c-primary-strong);
  background-color: var(--c-primary-soft);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--r-sm);
}

.badge--tag[data-chip="喜好"] {
  color: var(--c-tag-like-ink);
  background-color: var(--c-tag-like);
}

.badge--tag[data-chip="情绪"] {
  color: var(--c-tag-mood-ink);
  background-color: var(--c-tag-mood);
}

.badge--tag[data-chip="性格"] {
  color: var(--c-tag-trait-ink);
  background-color: var(--c-tag-trait);
}

.badge--tag[data-chip="日常"] {
  color: var(--c-tag-daily-ink);
  background-color: var(--c-tag-daily);
}

.badge--tag[data-chip="随口说"] {
  color: var(--c-tag-casual-ink);
  background-color: var(--c-tag-casual);
}

/* ---------- 「只有我能看到」的小封印 ---------- */
.sealed {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  color: var(--c-gold-deep);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  background-color: var(--c-gold-soft);
  border: 1px dashed var(--c-gold);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   6. 迷你日记：标签筛选条 + 小卡片
   ========================================================================== */

.tagbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--c-surface-2);
  border: 1px dashed var(--c-line-dash);
  border-radius: var(--r-md);
}

.tagbar__label {
  color: var(--c-ink-muted);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
}

.tagbar__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tagbar__state {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

/* 「按标签查看」那一排：也做成一张张小贴纸，颜色跟着各自的标签走。
   只作用在 .tagbar__row 里面 —— 共同日记与互动页的筛选按钮（.chip）不受影响。 */
.tagbar__row .chip {
  min-height: 32px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
}

.tagbar__row .chip[data-tag="喜好"] {
  color: var(--c-tag-like-ink);
  background-color: var(--c-tag-like);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}

.tagbar__row .chip[data-tag="情绪"] {
  color: var(--c-tag-mood-ink);
  background-color: var(--c-tag-mood);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}

.tagbar__row .chip[data-tag="性格"] {
  color: var(--c-tag-trait-ink);
  background-color: var(--c-tag-trait);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}

.tagbar__row .chip[data-tag="日常"] {
  color: var(--c-tag-daily-ink);
  background-color: var(--c-tag-daily);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}

.tagbar__row .chip[data-tag="随口说"] {
  color: var(--c-tag-casual-ink);
  background-color: var(--c-tag-casual);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}

/* 选中的那张贴纸：边框变实、里面再压一圈细线，像被按下去了一点 */
.tagbar__row .chip[aria-pressed="true"] {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent);
}

.tagbar__row .chip[aria-pressed="true"] .chip__dot {
  background-color: currentColor;
}

.mini {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* 内边距跟共同日记的便签对齐（原来上下窄了 8px，看着比便签薄一层） */
  padding: var(--sp-5);
}

.mini::before,
.qa::before {
  top: -7px;
  width: 58px;
  height: 14px;
}

/* ---------- 迷你 / 互动的卡片：胶带一律压左上角，倾斜守住 ±0.5° ----------
   上面那套「七张一循环」是四个列表共用的（胶带会跑到卡片右边，角度最大 ±0.8°）。
   这两组只针对迷你日记与互动的卡片把它收回来：胶带固定贴左上角（只挪一点点，
   还是每张不同），倾斜三张一循环、都在 ±0.5° 以内。共同日记的卡片完全不受影响。 */
.mini-list > .mini:nth-child(n),
.qas > .qa:nth-child(n) {
  --tape-x: 18px;
  --tape-rot: -3.4deg;
  --tilt: -.34deg;
  --nudge: 0px;
  --lift: 0px;
}

.mini-list > .mini:nth-child(3n+2),
.qas > .qa:nth-child(3n+2) {
  --tape-x: 26px;
  --tape-rot: 2.6deg;
  --tilt: .46deg;
  --nudge: 2px;
  --lift: -1px;
  --tape-c: var(--tape-c-2);
}

.mini-list > .mini:nth-child(3n+3),
.qas > .qa:nth-child(3n+3) {
  --tape-x: 34px;
  --tape-rot: -1.6deg;
  --tilt: -.16deg;
  --nudge: -2px;
  --lift: 0px;
}

.mini--private {
  --tape-c: var(--tape-c-2);
  background-color: var(--c-paper-tint);
  border-style: dashed;
}

.mini__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.mini__title {
  color: var(--c-ink);
  font-family: var(--font-title);
  font-size: var(--fs-md);
}

.mini__body {
  color: var(--c-ink);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
}

.mini__foot {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.mini__time {
  font-size: var(--fs-xs);
}

/* ==========================================================================
   7. 互动（盲盒）
   ========================================================================== */

.qa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.qa--answered::before {
  background-color: var(--c-primary-soft);
}

.qa--mine::before {
  background-color: var(--c-gold-soft);
}

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

.qa__title {
  color: var(--c-ink);
  font-size: var(--fs-lg);
}

.qa__badges {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.qa__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
}

.qa__block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  /* 另贴上去的一小张纸：米纸底 + 纸纹 + 一点点纸影，角上再压一小条胶带 */
  background-color: var(--c-paper-tint);
  background-image: var(--paper-grain);
  background-size: var(--paper-noise-size);
  border: 1px dashed var(--c-line-dash);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-note);
}

.qa__block::before {
  content: "";
  position: absolute;
  top: -7px;
  right: var(--sp-5);
  width: 46px;
  height: 13px;
  background-color: var(--tape-c-2);
  opacity: .75;
  rotate: 4deg;
  box-shadow: var(--shadow-tape);
}

.qa__tag {
  color: var(--c-ink-muted);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
}

.qa__answer {
  color: var(--c-ink);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qa__locked,
.qa__await {
  color: var(--c-ink-faint);
  font-size: var(--fs-sm);
}

.qa__locked {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.qa__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.answer-form {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  width: 100%;
}

.answer-form__input {
  min-height: 72px;
  padding: var(--sp-2) var(--sp-3);
  line-height: var(--lh-base);
}

/* ==========================================================================
   8. 空状态：一张手绘风的空白便签（跟日记卡片同一套纸：米白纸底 + 纸纹 +
      左上角一小块胶带 + 一点点歪 + 柔和纸影，四套主题跟着令牌走）
   ========================================================================== */

.empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-5);
  color: var(--c-ink-muted);
  text-align: center;
  background-color: var(--c-surface);
  background-image: var(--paper-grain),
    repeating-linear-gradient(to bottom, transparent 0 25px,
      color-mix(in srgb, var(--c-line-soft) 70%, transparent) 25px 26px);
  background-size: var(--paper-noise-size), auto;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-paper);
  rotate: -0.4deg;
}

/* 左上角那一小块胶带：跟卡片用的同一组令牌（位置/角度是便签自己的） */
.empty::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 24px;
  width: 56px;
  height: 16px;
  background-color: var(--tape-c);
  opacity: .8;
  rotate: -3.2deg;
  box-shadow: var(--shadow-tape);
}

.empty__mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--c-primary);
  background-color: var(--c-primary-tint);
  border: 1px solid var(--c-primary-soft);
  border-radius: var(--r-sm);
  rotate: -3deg;
}

.empty__mark .icon {
  width: 28px;
  height: 28px;
}

.empty__title {
  color: var(--c-ink);
  font-family: var(--font-title);
  font-size: var(--fs-md);
}

.empty__text {
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* ==========================================================================
   9. 顶栏右侧：「我的空间」入口 + 主题开关 + 页脚小链接
   ========================================================================== */

.space-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  color: var(--c-head-ink);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
  background-color: color-mix(in srgb, var(--c-head-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-head-ink) 32%, transparent);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    scale var(--dur-fast) var(--ease);
}

.space-open:hover {
  background-color: color-mix(in srgb, var(--c-head-ink) 20%, transparent);
}

.space-open[aria-expanded="true"] {
  color: var(--c-head-bg);
  background-color: var(--c-head-on);
  border-color: var(--c-gold);
}

.space-open__text {
  white-space: nowrap;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--c-head-ink);
  background-color: color-mix(in srgb, var(--c-head-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-head-ink) 32%, transparent);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
}

.icon-btn:hover {
  background-color: color-mix(in srgb, var(--c-head-ink) 20%, transparent);
}

.icon-btn__face {
  font-size: var(--fs-md);
  line-height: 1;
}

.foot__link {
  color: var(--c-ink-muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--c-line-dash);
  text-underline-offset: 4px;
}

.foot__link:hover {
  color: var(--c-primary);
  text-decoration-style: solid;
}

/* ==========================================================================
   10. 「我的空间」抽屉
   ========================================================================== */

.space {
  position: fixed;
  inset: 0;
  z-index: var(--z-space);
}

.space__scrim {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--c-ink) 42%, transparent);
  animation: fade-in var(--dur-base) var(--ease) both;
}

.space__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: min(420px, 94vw);
  height: 100%;
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  overflow-y: auto;
  background-color: var(--c-surface);
  border-left: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-paper);
  animation: space-in var(--dur-base) var(--ease) both;
}

@keyframes space-in {
  from {
    opacity: 0;
    translate: 24px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.space__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.space__title {
  color: var(--c-ink);
  font-size: var(--fs-xl);
}

.space__close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--c-ink-muted);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.space__close:hover {
  color: var(--c-ink);
  background-color: var(--c-primary-tint);
}

.space__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-primary-tint);
  border: 1px solid var(--c-primary-soft);
  border-radius: var(--r-sm);
}

.space__face {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--c-primary-strong);
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  background-color: var(--c-surface);
  border: 1px solid var(--c-primary-soft);
  border-radius: 50%;
  rotate: -4deg;
}

.space__who-text {
  min-width: 0;
}

.space__name {
  color: var(--c-ink);
  font-family: var(--font-title);
  font-size: var(--fs-md);
}

.space__meta {
  color: var(--c-ink-muted);
  font-size: var(--fs-xs);
}

.space__block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-line-soft);
}

.space__block--last {
  margin-top: auto;
}

.space__label {
  color: var(--c-ink-muted);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
}

.space__code {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.space__code code {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-ink);
  font-size: var(--fs-base);
  background-color: var(--c-surface-2);
  border: 1px dashed var(--c-line-dash);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}

.space__copy {
  min-height: 36px;
  padding: 0 var(--sp-3);
  color: var(--c-primary);
  font-size: var(--fs-sm);
  background-color: var(--c-surface);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease);
}

.space__copy:hover {
  background-color: var(--c-primary-tint);
}

.space__copy[data-done="1"] {
  color: var(--c-on-primary);
  background-color: var(--c-primary);
}

.space__hint {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
}

.space__form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.space__form .field__input {
  flex: 1 1 auto;
  min-width: 0;
}

.space__row {
  display: flex;
  gap: var(--sp-2);
}

/* ==========================================================================
   11. 轻提示
   ========================================================================== */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  translate: -50% 0;
  pointer-events: none;
}

.toast {
  position: relative;
  max-width: min(90vw, 44ch);
  margin: 0;
  padding: var(--sp-2) var(--sp-5);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-paper);
  animation: toast-in var(--dur-base) var(--ease) both;
}

.toast::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 42px;
  height: 12px;
  background-color: var(--c-primary-soft);
  opacity: .8;
  rotate: -3deg;
  translate: -50% 0;
  box-shadow: var(--shadow-tape);
}

@keyframes toast-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ==========================================================================
   12. 新手引导页（整屏一页向导）
   ========================================================================== */

.gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  overflow-y: auto;
  background-color: transparent;
  background-image: var(--paper-wash-1), var(--paper-wash-2), var(--paper-wash-3);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  animation: gate-in var(--dur-slow) var(--ease) both;
}

/* 主界面还露在下面时（建房那一步）盖一层薄纱，先把这一页走完；
   主界面已经藏起来时（登录/注册那一步）全透明，底层花瓣就能透出来 */
[data-app]:not([hidden]) ~ .gate {
  background-color: color-mix(in srgb, var(--c-bg) 78%, transparent);
}

@keyframes gate-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gate__sheet {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 460px);
  align-items: center;
  justify-content: center;
  gap: var(--sp-7);
  width: 100%;
  max-width: 900px;
}

/* 左边：一张贴在本子上的便签插画（纯 CSS 方块与线，没有图片） */
.gate__intro {
  display: grid;
  place-items: center;
}

.gate__paper {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 3;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-paper);
  rotate: -2.4deg;
}

.gate__tape {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 96px;
  height: 22px;
  background-color: var(--c-primary-soft);
  opacity: .8;
  rotate: -3deg;
  translate: -50% 0;
  box-shadow: var(--shadow-tape);
}

.gate__paper-line {
  position: absolute;
  top: 38%;
  left: 12%;
  width: 76%;
  height: 6px;
  background-color: var(--c-line-soft);
  border-radius: var(--r-pill);
}

.gate__paper-line--short {
  top: 52%;
  width: 46%;
}

.gate__paper-heart {
  position: absolute;
  right: 10%;
  bottom: 12%;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--c-primary);
  background-color: var(--c-primary-tint);
  border-radius: 50%;
}

/* 右边：真正的向导卡片 */
.gate__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6);
  background-color: var(--c-surface);
  border: 1px dashed var(--c-line-dash);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-paper);
}

.gate__eyebrow {
  color: var(--c-ink-faint);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
  text-align: center;
}

.gate__brand {
  color: var(--c-primary);
  font-family: var(--font-title);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  text-align: center;
}

.gate__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--c-ink-faint);
  font-size: var(--fs-sm);
}

.gate__dot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.gate__dot-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--c-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 50%;
}

.gate__dot[data-active="true"] {
  color: var(--c-ink);
}

.gate__dot[data-active="true"] .gate__dot-num {
  color: var(--c-on-primary);
  background-color: var(--c-primary);
  border-color: var(--c-primary-strong);
}

.gate__dot[data-done="true"] .gate__dot-num {
  color: var(--c-primary-strong);
  background-color: var(--c-primary-soft);
  border-color: var(--c-primary);
}

.gate__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gate__title {
  color: var(--c-ink);
  font-size: var(--fs-xl);
  text-align: center;
}

.gate__note {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-align: center;
}

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

.gate__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    scale var(--dur-fast) var(--ease);
}

.gate__btn:hover {
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary-soft);
}

.gate__btn:active {
  scale: var(--press-scale);
}

.gate__btn[aria-pressed="true"] {
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary-soft);
}

.gate__face {
  color: var(--c-primary);
  font-family: var(--font-title);
  font-size: var(--fs-2xl);
  line-height: 1.1;
}

.gate__hint {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gate__hint-line {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

.gate__hint-line[data-state="ok"] {
  color: var(--c-success);
}

.gate__hint-line[data-state="bad"] {
  color: var(--c-danger);
}

.gate__foot {
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  text-align: center;
}

.gate__cancel {
  align-self: center;
}

/* 登录 / 注册 两枚小贴纸：选中的那枚描边变实、底色变浅 */
.gate__modes {
  display: flex;
  gap: var(--sp-2);
  margin-block: var(--sp-4) var(--sp-2);
}

.gate__mode {
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  color: var(--c-ink-muted);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    scale var(--dur-fast) var(--ease);
}

.gate__mode:hover {
  border-color: var(--c-primary-soft);
  color: var(--c-ink);
}

.gate__mode:active {
  scale: var(--press-scale);
}

.gate__mode[aria-pressed="true"] {
  border-color: var(--c-primary);
  background-color: var(--c-primary-tint);
  color: var(--c-primary-strong);
}

/* 底下那行小链接：去注册 / 忘记密码 / 换个账号 */
.gate__switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-4);
}

.gate__link {
  min-height: 32px;
  padding: 0 var(--sp-1);
  border: 0;
  background: none;
  color: var(--c-ink-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.gate__link:hover {
  color: var(--c-primary-strong);
}

/* 建房页：新建 / 进屋 两个并排按钮 */
.gate__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

@media (max-width: 460px) {
  .gate__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gate__safe {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  color: var(--c-ink-faint);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  text-align: left;
  border-top: 1px dashed var(--c-line-soft);
}

/* ==========================================================================
   12b. 主题设置（我的空间里换肤）
   --------------------------------------------------------------------------
   四个按钮 = 四套主题，每个按钮自己带一排小圆点，预览这套主题的主色调。
   圆点颜色来自 tokens.css 里的 --swatch-*（四套主题各自的色，不随当前主题变）。
   ========================================================================== */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.theme-opt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 46px;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  background-color: var(--c-surface);
  border: 1px dashed var(--c-line-dash);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    scale var(--dur-fast) var(--ease);
}

.theme-opt:hover {
  background-color: var(--c-surface-2);
}

/* 当前正在用的那套：实线边框 + 主色纸底（不靠阴影强调） */
.theme-opt[aria-pressed="true"] {
  background-color: var(--c-primary-tint);
  border-color: var(--c-primary);
  border-style: solid;
}

.theme-opt__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-ink);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-title);
}

.theme-opt__now {
  color: var(--c-primary);
  font-size: var(--fs-xs);
}

.theme-opt__dots {
  display: flex;
  gap: var(--sp-1);
}

.theme-opt__dot {
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--c-line-soft);
}

/* 每套主题的四个点：文字色 / 主色 / 浅主色 / 点缀色 */
.theme-opt[data-theme-opt="mint"] {
  --sw-1: var(--swatch-mint-1);
  --sw-2: var(--swatch-mint-2);
  --sw-3: var(--swatch-mint-3);
  --sw-4: var(--swatch-mint-4);
}

.theme-opt[data-theme-opt="sun"] {
  --sw-1: var(--swatch-sun-1);
  --sw-2: var(--swatch-sun-2);
  --sw-3: var(--swatch-sun-3);
  --sw-4: var(--swatch-sun-4);
}

.theme-opt[data-theme-opt="dark"] {
  --sw-1: var(--swatch-dark-1);
  --sw-2: var(--swatch-dark-2);
  --sw-3: var(--swatch-dark-3);
  --sw-4: var(--swatch-dark-4);
}

.theme-opt[data-theme-opt="sakura"] {
  --sw-1: var(--swatch-sakura-1);
  --sw-2: var(--swatch-sakura-2);
  --sw-3: var(--swatch-sakura-3);
  --sw-4: var(--swatch-sakura-4);
}

.theme-opt__dot:nth-child(1) {
  background-color: var(--sw-1);
}

.theme-opt__dot:nth-child(2) {
  background-color: var(--sw-2);
}

.theme-opt__dot:nth-child(3) {
  background-color: var(--sw-3);
}

.theme-opt__dot:nth-child(4) {
  background-color: var(--sw-4);
}

/* ==========================================================================
   13. 响应式微调
   ========================================================================== */

@media (max-width: 900px) {
  .gate__sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    max-width: 460px;
  }

  .gate__intro {
    display: none;
  }
}

@media (max-width: 720px) {
  .card,
  .entry,
  .qa {
    padding: var(--sp-4);
  }

  .entry__body {
    font-size: var(--fs-base);
  }

  .toast-region {
    bottom: var(--sp-4);
  }
}

/* ==========================================================================
   14. 微动效：卡片淡入、按钮按压、爱心跳动
   全部纯 CSS，没有第三方库。base.css 里那条 prefers-reduced-motion 会把
   动画时长压到 1ms，所以系统开了「减少动效」时这些动画等于关闭。
   ========================================================================== */

/* 卡片淡入：淡入 + 轻轻上浮 10px。app.js 在切换标签页时给列表加 .is-entering
   重播一遍（约 0.7s 后自己摘掉，之后的局部重画不再重播）。
   注意只动 transform，卡片本身的倾斜用的是 rotate/translate 属性，互不干扰。 */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-entering > * {
  animation: card-in var(--dur-base) var(--ease) backwards;
}

/* 按压反馈：筛选片、标签页、顶栏两个按钮、主题卡、展开全文。
   按下去缩到 0.97，松手立刻回弹（.btn / .act / .gate__btn 本来就带这条）。 */
.chip:active,
.tab:active,
.icon-btn:active,
.space-open:active,
.theme-opt:active,
.entry__more:active {
  scale: var(--press-scale);
}

/* 爱心跳动：点过赞的那一颗放大到 1.3 再弹回。点赞后列表会重画，app.js 把
   .is-popping 补到重画后的那颗按钮上，所以只弹一次、不会每张卡片都弹。 */
@keyframes heart-pop {
  0% {
    scale: 1;
  }

  35% {
    scale: 1.3;
  }

  70% {
    scale: 0.94;
  }

  100% {
    scale: 1;
  }
}

.is-popping .icon {
  animation: heart-pop 380ms var(--ease) both;
}