/* 身上 · 五感面板(2026-09-06)。暖玫瑰打底、跟壁纸走一点金;夜里李子色底、余烬色字。暧昧来自颜色和留白,不靠装饰。 */
:root { --sp-bg: rgba(44,22,30,.94); --sp-ink: #f3dfe4; --sp-mut: rgba(243,223,228,.58); --sp-acc: #e6a3ad;
  --sp-line: rgba(230,163,173,.16); --sp-track: rgba(230,163,173,.18); --sp-proust: rgba(243,223,228,.74); }
[data-theme="day"] { --sp-bg: rgba(252,241,243,.96); --sp-ink: #4b1528; --sp-mut: #a05c74; --sp-acc: #d4537e;
  --sp-line: rgba(212,83,126,.16); --sp-track: #f4c9d6; --sp-proust: #72243e; }

/* 顶栏那枚指纹:身上有东西时带玫瑰色、右上一粒小点慢慢呼吸;空着时灰 */
.icon-btn.somatic { position: relative; }
.icon-btn.somatic svg { width: 21px; height: 21px; }
.icon-btn.somatic .dot { position: absolute; right: 7px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-acc);
  opacity: 0; transition: opacity .4s ease; will-change: opacity; }
.icon-btn.somatic.on { color: var(--sp-acc); }
/* 只动 opacity:顶栏是 backdrop-filter 的固定层,里面动 transform 会让它滚动时每帧重采样(她报的「顶栏闪烁」) */
.icon-btn.somatic.on .dot { opacity: 1; animation: sp-breathe 2.8s ease-in-out infinite; }
@keyframes sp-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.sp-veil { position: fixed; inset: 0; z-index: 58; background: rgba(20,14,12,.16); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.sp-veil.on { opacity: 1; pointer-events: auto; }
.sp-panel { position: fixed; left: 10px; right: 10px; top: 70px; z-index: 59; max-width: 640px; margin: 0 auto; box-sizing: border-box;
  padding: 14px 18px 14px; border-radius: 22px; max-height: min(72vh, 560px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--sp-bg); color: var(--sp-ink); border: 1px solid var(--sp-line);
  box-shadow: 0 16px 44px rgba(40,10,20,.22), 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .26s ease, visibility 0s linear .34s; }
.sp-panel.on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-eye { font-family: var(--serif); font-size: 10.5px; letter-spacing: .32em; color: var(--sp-acc); }
.sp-when { margin-left: auto; font-size: 11px; letter-spacing: .06em; color: var(--sp-mut); }
.sp-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--sp-ink) 8%, transparent); color: var(--sp-mut);
  font-size: 17px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.sp-sum { font-family: var(--serif); font-size: 15.5px; line-height: 1.65; margin: 8px 0 6px; color: var(--sp-ink); }
.sp-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sp-line); transition: opacity .5s ease; border-radius: 10px; }
.sp-row.dim { opacity: .48; }
.sp-row.fresh { animation: sp-warm 1.4s ease; }
@keyframes sp-warm { from { background: color-mix(in srgb, var(--sp-acc) 22%, transparent); } to { background: transparent; } }
.sp-ic { width: 20px; height: 20px; color: var(--sp-acc); flex-shrink: 0; }
.sp-ic svg { width: 20px; height: 20px; display: block; }
.sp-nm { width: 14px; font-family: var(--serif); font-size: 12px; letter-spacing: .1em; color: var(--sp-acc); flex-shrink: 0; }
.sp-lb { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--sp-ink); word-break: break-word; }
.sp-lb small { display: block; font-size: 11px; letter-spacing: .08em; color: var(--sp-mut); margin-top: 1px; }
.sp-bar { width: 58px; height: 3px; border-radius: 2px; background: var(--sp-track); overflow: hidden; flex-shrink: 0; }
.sp-bar i { display: block; height: 100%; background: var(--sp-acc); transition: width 1s linear; }
.sp-tm { width: 58px; text-align: right; font-size: 11px; color: var(--sp-mut); flex-shrink: 0; }
.sp-proust { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sp-line); font-size: 13px; line-height: 1.65; color: var(--sp-proust); white-space: pre-wrap; }
@media (hover: hover) { .sp-x:hover { color: var(--sp-ink); } }