/* 数据安全段：左边一张「你的记忆」面板仿界面，右边黑衣特工站在弹珠碗旁；下面两条承诺。
   舞台与接力段同宽同风格；闪光只在舞台里，不用全屏 .flash。 */
.safe { padding: clamp(80px, 12vh, 140px) 0 clamp(40px, 6vh, 72px); }
.safe__stage { position: relative; margin: 56px auto 0; width: min(1040px, calc(100% - 2 * var(--pad-x))); height: 380px; overflow: hidden;
  border-radius: var(--r-2xl); background: var(--bg-2); border: 1px solid var(--border); box-shadow: var(--shadow-2), inset 0 1px 0 #fff;
  background-image: radial-gradient(560px circle at 76% 80%, rgba(166,203,242,.14), rgba(233,198,217,.08) 45%, transparent 70%); }
/* 蓄光时舞台四周轻轻压暗，笔尖那一下才显得亮 */
.safe__stage::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(70% 90% at 76% 40%, transparent 30%, rgba(20,18,24,.2)); opacity: 0; transition: opacity 500ms var(--ease-in-out); }
.safe__stage.is-charging::after { opacity: 1; }

.vault { position: absolute; left: 6%; top: 50%; width: min(440px, 52%); transform: translateY(-50%); padding: 18px 18px 14px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border); }
.vault__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.vault__head b { font-weight: 620; letter-spacing: -0.01em; }
.vault__count { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.vault__odo { display: inline-flex; color: var(--text-1); font-weight: 520; font-variant-numeric: tabular-nums; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.vault__odo .odo__d { display: block; width: 1ch; height: 1.25em; overflow: hidden; }
.vault__odo .odo__d.is-lead { display: none; }
.vault__odo .odo__s { display: flex; flex-direction: column; transition: transform 700ms var(--ease-spring); }
.vault__odo .odo__s > span { height: 1.25em; text-align: center; }

.vault__rows { position: relative; list-style: none; margin: 0; padding: 6px 0 0; display: grid; }
.vault__rows li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; height: 38px; font-size: 13.5px; color: var(--text-1); border-bottom: 1px dashed var(--border); }
.vault__rows li:last-child { border-bottom: 0; }
.vault__rows .mb { position: relative; }
.vault__rows small { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.vault__empty { position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; font-size: 13.5px; color: var(--text-3); opacity: 0; transform: translateY(4px); transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out); pointer-events: none; }
.vault.is-empty .vault__empty { opacity: 1; transform: none; transition-delay: 200ms; }
.vault.is-empty .vault__rows li { opacity: 0; }

.vault__foot { position: relative; display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.fake--danger { background: transparent; color: #98513c; gap: 6px; height: 30px; padding: 0 10px; font-size: 12px; }
.fake--danger svg { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fake--danger.is-press { background: rgba(152,81,60,.08); }
.fake--red { background: #B5543A; }
/* 确认气泡：从「全部忘掉」上方弹出 */
.confirm { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3; display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border);
  font-size: 12px; color: var(--text-1); white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 85% 100%; pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 420ms var(--ease-spring); }
.confirm.is-on { opacity: 1; transform: none; }
.confirm__btns { display: flex; justify-content: flex-end; gap: 6px; }

/* 特工站在碗边；角色尺寸固定，舞台缩放时整体跟着移动 */
.safe__agent { position: absolute; right: 12%; bottom: 50px; width: 164px; height: 164px; z-index: 2; }
.safe__agent .bot { left: 0; top: 0; }
.safe__bowl { position: absolute; right: calc(100% + 6px); bottom: -4px; width: 104px; height: 54px; border-radius: 6px 6px 46px 46px / 6px 6px 40px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.85)); box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 -8px 14px -8px rgba(28,25,20,.14), 0 10px 16px -12px rgba(20,18,15,.3); }
.safe__marbles { position: absolute; left: 15px; right: 6px; bottom: 6px; top: -6px; }

.safe__flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.safe__bloom, .safe__ring { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); border-radius: 50%; opacity: 0; }
.safe__bloom { width: 900px; height: 900px; background: radial-gradient(closest-side, #fff 0, rgba(255,255,255,.9) 18%, rgba(240,246,255,.55) 42%, rgba(255,255,255,0) 72%); }
.safe__ring { width: 320px; height: 320px; border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 0 24px rgba(200,225,255,.6); }

/* 两条承诺：线性图标 + 短标题 + 一句话 */
.promises { list-style: none; margin: 40px auto 0; padding: 0; width: min(1040px, calc(100% - 2 * var(--pad-x))); display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; max-width: 820px; }
.promises li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; row-gap: 6px; align-items: start; align-content: start; }
.promises li:nth-child(2) { --d: 100ms; }
.promises svg { grid-row: span 2; margin-top: 2px; stroke: var(--text-1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promises h3 { font-size: 16px; font-weight: 620; letter-spacing: -0.015em; }
.promises p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }

@media (min-width: 1920px) and (min-height: 1000px) {
  .safe__stage, .promises { width: min(1440px, calc(100% - 2 * var(--pad-x))); }
  .promises { max-width: 1100px; }
  .safe__stage { height: 460px; }
  .safe__agent { width: 200px; height: 200px; }
  .vault { width: min(560px, 52%); padding: 22px 22px 18px; }
  .vault__rows li { height: 46px; font-size: 16px; }
  .promises h3 { font-size: 19px; } .promises p { font-size: 17px; }
}
/* 手机：面板在上、特工和碗在右下，舞台加高 */
@media (max-width: 760px) {
  .safe__stage { height: 470px; }
  .vault { left: 14px; right: 14px; top: 16px; width: auto; transform: none; padding: 14px 14px 10px; }
  .vault__rows li { height: 33px; font-size: 13px; gap: 10px; }
  .safe__agent { right: 22px; bottom: 26px; width: 100px; height: 100px; }
  .safe__bowl { width: 84px; height: 44px; }
  .safe__marbles { left: 5px; }
  .safe__bowl { right: calc(100% + 14px); }
  .promises { grid-template-columns: 1fr; gap: 22px; max-width: 520px; }
}