/* 我们的记忆 —— 换皮 2026-09-25：跟「美化小屋」同款底部花边弹层，只用 keke.css 的 token */
.keke-memory {
  --km-accent: var(--pink-deep);
  position: fixed; z-index: 9000; inset: 0; display: grid; color: var(--ink); font-family: var(--f-body);
}
.keke-memory *, .keke-memory *::before, .keke-memory *::after { box-sizing: border-box; }
.km-shade { grid-area: 1 / 1; background: rgba(94, 81, 87, .28); animation: km-fade .2s ease-out; }
.km-panel {
  grid-area: 1 / 1; align-self: end; justify-self: center; position: relative;
  width: min(100%, 560px); height: 92%; overflow: auto; overscroll-behavior: contain;
  padding: var(--sp4) var(--sp4) max(var(--sp5), env(safe-area-inset-bottom));
  background: var(--card); -webkit-mask: var(--lace-mask); mask: var(--lace-mask); padding-top: calc(var(--sp4) + 8px);
  animation: km-arrive .28s ease-out;
}
.km-header { position: relative; padding-top: var(--sp2); min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); }
.km-header::before { content: ""; position: absolute; top: -6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.km-heading { min-width: 0; text-align: center; flex: 1; }
.km-heading h1 { margin: 0; font-family: var(--f-cute); font-weight: 400; font-size: 22px; color: var(--accent-ink); }
.km-heading p { margin: 2px 0 0; color: var(--ink-soft); font-size: var(--fs-s); }
.km-icon-button { flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--pink-deep); background: var(--pink-soft); cursor: pointer; }
.km-icon-button svg, .km-search-wrap > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.km-search-wrap { height: 44px; margin: var(--sp3) 0; padding: 0 var(--sp4); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  display: flex; align-items: center; gap: var(--sp2); color: var(--ink-soft); background: var(--paper); }
.km-search-wrap:focus-within { border-color: var(--pink); }
.km-search { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 16px; background: transparent; }
.km-search::placeholder { color: var(--ink-soft); }

.km-filters { display: flex; gap: var(--sp2); overflow-x: auto; margin: 0 0 var(--sp4); padding: 2px; scrollbar-width: none; }
.km-filters::-webkit-scrollbar { display: none; }
.km-filter, .km-retry { min-height: 34px; border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 0 var(--sp3);
  color: var(--ink); font: inherit; font-size: 13px; white-space: nowrap; background: var(--card); cursor: pointer; }
.km-filter.is-selected { color: var(--pink-deep); border-color: var(--pink); background: var(--pink-soft); font-weight: 700; }

/* 记忆卡 = 带胶带的小纸片 */
.km-list { display: grid; gap: var(--sp4); padding: var(--sp2) 0; }
.km-memory-card { position: relative; width: 100%; padding: var(--sp4); border: var(--bw) solid var(--line); border-radius: var(--r-m);
  text-align: left; color: inherit; font: inherit; background: var(--card); box-shadow: var(--shadow-card); cursor: pointer; }
.km-memory-card::before { content: ""; position: absolute; top: -7px; left: var(--sp5); width: 40px; height: 13px; transform: rotate(-4deg);
  background: var(--tape); border-radius: 2px; }
.km-memory-card:nth-child(3n+2)::before { background: rgba(157, 184, 220, .4); left: auto; right: var(--sp5); transform: rotate(3deg); }
.km-memory-card:nth-child(3n)::before { background: rgba(250, 214, 140, .5); }
.km-memory-card:hover { border-color: var(--pink); }
.km-card-top { display: flex; align-items: baseline; gap: var(--sp2); }
.km-card-top h2 { min-width: 0; flex: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: 700; }
.km-date { flex: 0 0 auto; color: var(--ink-soft); font-family: var(--f-num); font-size: var(--fs-s); }
.km-preview { display: -webkit-box; overflow: hidden; margin: 6px 0 var(--sp2); color: var(--ink-soft); font-size: var(--fs-m); line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.km-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.km-tag { max-width: 100%; overflow: hidden; padding: 2px var(--sp2); border-radius: var(--r-pill); color: var(--pink-deep); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; background: var(--pink-soft); }

.km-state { min-height: 128px; padding: var(--sp6) var(--sp5); border: var(--bw) dashed var(--line); border-radius: var(--r-m); display: grid; place-content: center; text-align: center; color: var(--ink-soft); }
.km-state p { margin: 0; font-size: var(--fs-m); line-height: 1.7; }
.km-state-error { color: var(--danger); }
.km-retry { display: block; margin: var(--sp3) auto 0; color: var(--pink-deep); }

/* 详情 = 一张横格信纸 */
.km-detail { min-height: 100%; }
.km-detail .km-back { margin-bottom: var(--sp3); }
.km-detail-body { position: relative; padding: var(--sp5) var(--sp5) var(--sp4); border: var(--bw) solid var(--line); border-radius: 6px;
  background: var(--card) linear-gradient(transparent 31px, var(--line-soft) 31px) 0 12px / 100% 32px; }
.km-detail-body::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; border-left: var(--bw) solid var(--pink-soft); }
.km-detail-body h1 { margin: 0 0 var(--sp2); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.5; }
.km-detail-body > .km-tags { margin: var(--sp2) 0 var(--sp4); }
.km-content { color: var(--ink); font-size: var(--fs-body); line-height: 32px; white-space: pre-wrap; overflow-wrap: anywhere; }
.km-technical { margin-top: var(--sp5); border-top: var(--bw) dashed var(--line); color: var(--ink-soft); }
.km-technical summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-size: 13px; }
.km-technical pre { overflow: auto; margin: 0 0 var(--sp3); padding: var(--sp3); border-radius: var(--r-s); color: var(--ink-soft); font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); }

.km-search:focus-visible { outline: none; }
.keke-memory button:focus-visible, .keke-memory summary:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 2px; }
@keyframes km-arrive { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes km-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .km-panel, .km-shade { animation: none; } }