@import url("./farm.css");

/* ============================================================
   当前角色小手机 · ai-phone   v3 「清露白」
   柔焦照片壁纸 + 新拟态柔光磨砂玻璃 + 细线单色图标 + 氛围文案
   极低饱和 · 克制白蓝 · 零土渲染
   全部类名前缀 ynp-
   ============================================================ */

:root {
  --ynp-ink:#495569;          /* 主文字 慢板蓝灰 */
  --ynp-ink-2:#374252;        /* 标题更深 */
  --ynp-muted:#8592a6;
  --ynp-faint:#aab4c4;
  --ynp-icon:#77869c;         /* 图标线色 */
  --ynp-hair:rgba(120,140,170,.16);
  --ynp-glass:rgba(255,255,255,.46);
  --ynp-glass-2:rgba(255,255,255,.62);
  --ynp-tile:rgba(255,255,255,.5);
  --ynp-soft-sh:7px 7px 18px rgba(150,170,200,.26), -6px -6px 16px rgba(255,255,255,.55);
  --ynp-soft-sh-sm:4px 4px 11px rgba(150,170,200,.22), -4px -4px 10px rgba(255,255,255,.5);
  --ynp-radius:26px;
  --ynp-safe-top:44px;
  --ynp-font:-apple-system,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",sans-serif;
  --ynp-en:"SF Pro Display",-apple-system,"Segoe UI",sans-serif;
  --ynp-ease:cubic-bezier(.22,1,.36,1);
  /* 动效 token：入场 ease-out 系 / 出场 ease-in 系 / 关键动画弹簧 */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-in-quart:cubic-bezier(.5,0,.75,0);
  --spring-bouncy:cubic-bezier(.34,1.56,.64,1);
  /* 默认柔雾壁纸（多层柔光径向，非2段直线渐变，不土；可被上传照片覆盖） */
  --ynp-wall:
    radial-gradient(62% 42% at 22% 14%, rgba(212,227,242,.85), transparent 72%),
    radial-gradient(54% 46% at 82% 24%, rgba(226,223,240,.7), transparent 72%),
    radial-gradient(72% 52% at 60% 92%, rgba(214,230,240,.8), transparent 74%),
    radial-gradient(40% 30% at 50% 50%, rgba(255,255,255,.5), transparent 70%),
    #e9eef4;
}

/* 开机悬浮按钮 */
#ynp-fab {
  position: fixed; right: 14px; bottom: 92px; z-index: 9998;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.72); backdrop-filter: blur(14px); color: var(--ynp-icon);
  box-shadow: 5px 5px 14px rgba(150,170,200,.4), -4px -4px 12px rgba(255,255,255,.7);
  transition: transform .2s var(--ynp-ease);
}
#ynp-fab svg { width: 23px; height: 23px; }
#ynp-fab:hover { transform: translateY(-2px) scale(1.05); }
#ynp-fab:active { transform: scale(.92); }

/* 机身 */
#ynp-phone {
  position: fixed; z-index: 9999; width: 344px; height: 724px;
  right: 20px; bottom: 20px; font-family: var(--ynp-font); color: var(--ynp-ink);
  border-radius: 50px; padding: 11px; box-sizing: border-box;
  background: linear-gradient(155deg,#dfe6ee,#c4cfdc 60%,#b3c0d0);
  box-shadow: 0 26px 64px rgba(120,140,175,.4), 0 5px 18px rgba(90,110,145,.2);
  animation: ynp-pop .28s var(--ynp-ease); touch-action: none;
}
@keyframes ynp-pop { from{opacity:0;transform:translateY(24px) scale(.92)} to{opacity:1;transform:none} }
#ynp-phone.ynp-closing { animation: ynp-pop-out .24s var(--ease-in-quart) forwards; }
@keyframes ynp-pop-out { to{opacity:0;transform:translateY(20px) scale(.94)} }
#ynp-phone * { box-sizing: border-box; }

.ynp-screen { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: #eef2f7; display: flex; flex-direction: column; }
.ynp-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 100px; height: 28px; background: rgba(20,26,36,.92); border-radius: 15px; z-index: 40; pointer-events: none; }

.ynp-status { height: var(--ynp-safe-top); flex: 0 0 var(--ynp-safe-top); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 26px 6px; font-size: 13px; font-weight: 600; z-index: 30; cursor: grab; color: var(--ynp-ink-2); }
.ynp-status.ynp-dark { color: #eef2f7; }
.ynp-status:active { cursor: grabbing; }
.ynp-status .ynp-st-right { display: flex; align-items: center; gap: 6px; }
.ynp-status svg { width: 16px; height: 16px; opacity: .8; }
.ynp-battery { width: 23px; height: 12px; border-radius: 3px; border: 1px solid currentColor; position: relative; opacity: .8; }
.ynp-battery::after { content:""; position:absolute; right:-3px; top:3px; width:2px; height:6px; background:currentColor; border-radius:0 2px 2px 0; }
.ynp-battery::before { content:""; position:absolute; left:1px; top:1px; bottom:1px; width:72%; background:currentColor; border-radius:1px; }

.ynp-homebar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 122px; height: 5px; border-radius: 3px; background: rgba(70,90,120,.3); z-index: 45; cursor: pointer; transition: width .2s var(--ynp-ease); }
.ynp-homebar:hover { width: 134px; }
.ynp-homebar.ynp-dark { background: rgba(255,255,255,.5); }

.ynp-view { flex: 1 1 auto; position: relative; overflow: hidden; }

/* ============================================================
   主屏
   ============================================================ */
.ynp-home { position: absolute; inset: 0; overflow: hidden; }
.ynp-home-bg { position: absolute; inset: -6%; background: var(--ynp-wall); background-size: cover; background-position: center; will-change: transform; transition: transform .5s var(--ynp-ease); }
.ynp-home-bg.photo { filter: saturate(.88) brightness(1.04); }
.ynp-home-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(210,222,236,.1)); pointer-events: none; }
.ynp-home-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 6px 18px 96px; }
.ynp-home-scroll::-webkit-scrollbar { display: none; }

/* 顶部：当前角色资料卡 */
.ynp-profile {
  position: relative; margin: 8px 0 16px; border-radius: 30px; padding: 44px 20px 22px;
  background: var(--ynp-glass); backdrop-filter: blur(30px) saturate(115%); -webkit-backdrop-filter: blur(30px) saturate(115%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh); text-align: center;
  opacity: 0; transform: translateY(14px);
}
.ynp-profile.ynp-in { opacity: 1; transform: none; transition: opacity .38s var(--ynp-ease), transform .38s var(--ynp-ease); }
.ynp-profile-av { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 78px; height: 78px; border-radius: 50%; object-fit: cover; background: #e4ecf4; border: 4px solid rgba(255,255,255,.75); box-shadow: 0 8px 20px rgba(120,145,180,.35); }
.ynp-profile-name { font-size: 20px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: .5px; }
.ynp-profile-sub { font-size: 13px; color: var(--ynp-muted); margin-top: 8px; line-height: 1.6; font-family: var(--ynp-en); }
.ynp-profile-sub .dim { color: var(--ynp-faint); }
.ynp-profile-quote { margin-top: 12px; font-size: 12.5px; color: var(--ynp-muted); font-style: italic; }

/* Bento 网格 */
.ynp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-rows: 82px; }

/* 应用磁贴：柔白磨砂 + 细线单色图标（不着色、不渐变） */
.ynp-app {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  opacity: 0; transform: translateY(12px);
}
.ynp-app.ynp-in { opacity: 1; transform: none; transition: opacity .34s var(--ynp-ease), transform .34s var(--ynp-ease); }
.ynp-app-ico {
  width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  color: var(--ynp-icon); background: var(--ynp-tile); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh-sm);
  transition: transform .15s var(--ynp-ease); position: relative;
}
.ynp-app:active .ynp-app-ico { transform: scale(.9); }
.ynp-app-ico svg { width: 24px; height: 24px; }
.ynp-app-label { font-size: 11.5px; color: var(--ynp-ink); font-weight: 500; }
.ynp-app-badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #8fb0d4; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }

/* 页码点 */
.ynp-dots { display: flex; gap: 6px; justify-content: center; margin: 20px 0 6px; }
.ynp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(90,110,140,.3); }
.ynp-dots span.on { background: rgba(90,110,140,.6); width: 18px; border-radius: 3px; }

/* dock */
.ynp-dock {
  position: absolute; left: 18px; right: 18px; bottom: 22px; padding: 12px;
  border-radius: 30px; background: rgba(255,255,255,.4); backdrop-filter: blur(30px) saturate(115%); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 12px 30px rgba(120,145,180,.28);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; z-index: 6;
}
.ynp-dock-app { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ynp-dock-ico { width: 46px; height: 46px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh-sm); transition: transform .15s var(--ynp-ease); position: relative; }
.ynp-dock-app:active .ynp-dock-ico { transform: scale(.88); }
.ynp-dock-ico svg { width: 23px; height: 23px; }

/* ============================================================
   通用 App 页
   ============================================================ */
.ynp-app-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: #eef2f7; animation: ynp-slide-in .22s var(--ynp-ease); }
@keyframes ynp-slide-in { from{transform:translateX(100%);opacity:.5} to{transform:translateX(0);opacity:1} }
.ynp-navbar { flex: 0 0 auto; padding: 6px 12px 10px; display: flex; align-items: center; gap: 8px; background: rgba(238,242,247,.8); backdrop-filter: blur(16px); border-bottom: 1px solid var(--ynp-hair); z-index: 10; position: sticky; top: 0; }
.ynp-nav-back { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); cursor: pointer; border-radius: 10px; }
.ynp-nav-back:hover { background: rgba(120,140,170,.1); }
.ynp-nav-back svg { width: 22px; height: 22px; }
.ynp-nav-title { font-size: 16px; font-weight: 700; flex: 1; text-align: center; color: var(--ynp-ink-2); }
.ynp-nav-action { min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-end; color: var(--ynp-icon); cursor: pointer; }
.ynp-nav-action svg { width: 21px; height: 21px; }
.ynp-app-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 22px; }
.ynp-app-body::-webkit-scrollbar { width: 0; }

.ynp-reveal { opacity: 0; transform: translateY(12px); }
.ynp-reveal.ynp-in { opacity: 1; transform: none; transition: opacity .34s var(--ynp-ease), transform .34s var(--ynp-ease); }

/* ---------- 聊天 ---------- */
/* 聊天页专属顶栏：头像 + 名字 + 在线/正在输入 状态 */
.ynp-chat-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 12px 9px; background: rgba(238,242,247,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--ynp-hair); position: sticky; top: 0; z-index: 12; }
.ynp-chat-head .ynp-nav-back { flex: 0 0 auto; }
.ynp-chat-head-av { width: 34px; height: 34px; border-radius: 11px; object-fit: cover; background: #e0e8f1; box-shadow: var(--ynp-soft-sh-sm); flex: 0 0 auto; }
.ynp-chat-head-meta { flex: 1; min-width: 0; }
.ynp-chat-head-name { font-size: 15px; font-weight: 700; color: var(--ynp-ink-2); line-height: 1.2; }
.ynp-chat-head-status { font-size: 11.5px; color: var(--ynp-muted); margin-top: 2px; transition: color .2s; }
.ynp-chat-head-status.typing { color: var(--ynp-icon); }
.ynp-chat-head-status.typing::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: middle; animation: ynp-blink 1.1s infinite; }

.ynp-chat { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: #eef2f7; }
.ynp-chat-wall { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; filter: blur(1px); pointer-events: none; z-index: 0; }
.ynp-chat-body { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 8px 12px 6px; }
.ynp-chat-body::-webkit-scrollbar { width: 0; }
.ynp-chat-time-chip { text-align: center; margin: 10px 0 14px; }
.ynp-chat-time-chip span { font-size: 11px; color: var(--ynp-muted); background: rgba(120,140,170,.14); padding: 3px 11px; border-radius: 9px; backdrop-filter: blur(6px); }
.ynp-msg { display: flex; margin-bottom: 15px; gap: 9px; align-items: flex-start; animation: ynp-bubble-in .24s var(--ynp-ease); }
@keyframes ynp-bubble-in { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
.ynp-msg-av { width: 38px; height: 38px; border-radius: 13px; object-fit: cover; flex: 0 0 auto; background: #e0e8f1; box-shadow: var(--ynp-soft-sh-sm); }
.ynp-msg-bubble { max-width: 72%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; position: relative; word-break: break-word; white-space: pre-wrap; }
.ynp-msg.you .ynp-msg-bubble { background: rgba(255,255,255,.85); color: var(--ynp-ink); border-top-left-radius: 6px; box-shadow: var(--ynp-soft-sh-sm); }
.ynp-msg.me { flex-direction: row-reverse; }
.ynp-msg.me .ynp-msg-bubble { background: rgba(180,203,228,.9); color: #33455c; border-top-right-radius: 6px; box-shadow: 4px 4px 10px rgba(150,170,200,.24); }
/* 表情包气泡 */
.ynp-sticker { max-width: 100px; padding: 0; background: none !important; box-shadow: none; }
.ynp-sticker svg, .ynp-sticker img { width: 94px; height: 94px; display: block; filter: drop-shadow(0 3px 7px rgba(90,115,150,.22)); }
.ynp-msg.me .ynp-sticker { margin-left: auto; }
/* 输入区表情按钮 + 面板 */
.ynp-sticker-btn { flex: 0 0 auto; width: 34px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); cursor: pointer; }
.ynp-sticker-btn svg { width: 25px; height: 25px; }
.ynp-sticker-btn:active { transform: scale(.9); }
.ynp-sticker-panel { position: relative; z-index: 1; flex: 0 0 auto; max-height: 0; overflow: hidden; background: rgba(255,255,255,.72); backdrop-filter: blur(16px); display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; padding: 0 12px; transition: max-height .26s var(--ynp-ease), padding .26s var(--ynp-ease); }
.ynp-sticker-panel.open { max-height: 200px; overflow-y: auto; padding: 12px 12px 22px; }
.ynp-stk-item { aspect-ratio: 1; border-radius: 15px; background: rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 6px; transition: transform .12s var(--ynp-ease); }
.ynp-stk-item:active { transform: scale(.88); }
.ynp-stk-item svg, .ynp-stk-item img { width: 100%; height: 100%; object-fit: contain; }
.ynp-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.ynp-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ynp-faint); animation: ynp-blink 1.2s infinite; }
.ynp-typing span:nth-child(2){ animation-delay: .2s; } .ynp-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes ynp-blink { 0%,60%,100%{opacity:.35;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.ynp-chat-input { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 9px 10px 20px; background: rgba(255,255,255,.6); backdrop-filter: blur(16px); border-top: 1px solid var(--ynp-hair); }
.ynp-chat-input textarea { flex: 1; resize: none; border: none; border-radius: 20px; padding: 10px 14px; font-size: 14.5px; font-family: inherit; background: rgba(255,255,255,.85); max-height: 84px; min-height: 20px; line-height: 1.4; outline: none; color: var(--ynp-ink); box-shadow: inset 2px 2px 6px rgba(150,170,200,.18); }
.ynp-send-btn { flex: 0 0 auto; padding: 10px 16px; border-radius: 20px; border: none; background: rgba(160,188,218,.9); color: #33455c; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .14s var(--ynp-ease); box-shadow: var(--ynp-soft-sh-sm); }
.ynp-send-btn:active { transform: scale(.93); }
.ynp-send-btn:disabled { opacity: .5; cursor: default; }

/* ---------- 动态 ---------- */
.ynp-moments { min-height: 100%; }
.ynp-mo-cover { position: relative; height: 200px; background: var(--ynp-wall); background-size: cover; background-position: center; }
.ynp-mo-cover.photo { filter: saturate(.88); }
.ynp-mo-cover-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(210,222,236,.05), rgba(120,140,170,.28)); }
.ynp-mo-me { position: absolute; right: 16px; bottom: -26px; display: flex; align-items: flex-end; gap: 10px; }
.ynp-mo-me-name { color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 6px rgba(60,80,110,.5); margin-bottom: 32px; }
.ynp-mo-me-av { width: 62px; height: 62px; border-radius: 20px; border: 3px solid rgba(255,255,255,.85); object-fit: cover; box-shadow: 0 6px 16px rgba(90,115,150,.3); }
.ynp-mo-feed { padding: 42px 14px 20px; }
.ynp-mo-post { display: flex; gap: 11px; padding: 15px; margin-bottom: 12px; border-radius: 22px; background: var(--ynp-glass-2); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh); }
.ynp-mo-av { width: 40px; height: 40px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: #e0e8f1; }
.ynp-mo-main { flex: 1; min-width: 0; }
.ynp-mo-name { color: var(--ynp-ink-2); font-weight: 700; font-size: 14.5px; }
.ynp-mo-text { font-size: 14.5px; line-height: 1.6; margin: 5px 0 7px; white-space: pre-wrap; word-break: break-word; color: var(--ynp-ink); }
.ynp-mo-imgs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 6px 0; }
.ynp-mo-imgs > span { width: 100%; aspect-ratio: 1; border-radius: 12px; background: #dde6f0; display: block; box-shadow: var(--ynp-soft-sh-sm); }
.ynp-mo-imgs.single { grid-template-columns: 62%; }
.ynp-mo-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ynp-mo-time { font-size: 12px; color: var(--ynp-faint); }
.ynp-mo-like-btn { font-size: 13px; color: var(--ynp-muted); cursor: pointer; padding: 4px 11px; border-radius: 12px; background: rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh-sm); display: inline-flex; align-items: center; gap: 5px; transition: transform .14s var(--ynp-ease); }
.ynp-mo-like-btn:active { transform: scale(.9); }
.ynp-mo-like-btn svg { width: 13px; height: 13px; }
.ynp-mo-likes { font-size: 13px; color: var(--ynp-muted); background: rgba(255,255,255,.5); border-radius: 12px; padding: 7px 11px; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.ynp-mo-likes svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ynp-mo-comments { background: rgba(255,255,255,.45); border-radius: 12px; padding: 6px 11px; margin-top: 5px; }
.ynp-mo-comment { font-size: 13px; line-height: 1.75; color: var(--ynp-ink); }
.ynp-mo-comment b { color: var(--ynp-ink-2); font-weight: 600; }
.ynp-mo-cbar { display: flex; gap: 6px; margin-top: 8px; }
.ynp-mo-cbar input { flex: 1; border: none; border-radius: 12px; padding: 7px 11px; font-size: 13px; outline: none; background: rgba(255,255,255,.7); color: var(--ynp-ink); box-shadow: inset 2px 2px 5px rgba(150,170,200,.16); }

/* ---------- 卡片列表 ---------- */
.ynp-list { padding: 14px; }
.ynp-card { background: var(--ynp-glass-2); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.6); border-radius: 22px; padding: 15px 17px; margin-bottom: 12px; box-shadow: var(--ynp-soft-sh); }
.ynp-note-item { cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynp-note-item:active { transform: scale(.98); }
.ynp-note-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--ynp-ink-2); }
.ynp-note-body { font-size: 13px; color: var(--ynp-muted); line-height: 1.5; white-space: pre-wrap; max-height: 3em; overflow: hidden; }
.ynp-note-time { font-size: 11px; color: var(--ynp-faint); margin-top: 6px; }
.ynp-empty { text-align: center; color: var(--ynp-muted); font-size: 13.5px; padding: 70px 20px; line-height: 1.9; }
.ynp-empty svg { width: 44px; height: 44px; color: var(--ynp-faint); margin-bottom: 14px; }
.ynp-diary-date { font-size: 12px; color: var(--ynp-muted); margin-bottom: 9px; letter-spacing: .3px; }
.ynp-diary-body { font-size: 14px; line-height: 1.9; color: var(--ynp-ink); white-space: pre-wrap; font-family: var(--ynp-serif); }

@font-face { font-family:'Zpix'; src:url('fonts/zpix.woff2') format('woff2'); font-display:swap; }

/* ---------- 日记 · Poolsuite 复古（真站规范：奶油+1px黑边+像素凸起投影+Zpix像素字体+马卡龙按钮） ---------- */
.ynp-retro { background: #efe2d1; }
.ynp-retro, .ynp-retro .ynp-nav-title, .ynp-retro .ynp-retro-date, .ynp-retro .ynp-retro-body, .ynp-retro .ynp-retro-empty, .ynp-retro .ynp-retro-hint, .ynp-retro .ynp-nav-action { font-family: 'Zpix','Zpix Fallback',-apple-system,sans-serif; }
.ynp-retro .ynp-navbar { background: #efe2d1; border-bottom: 1px solid #000; backdrop-filter: none; }
.ynp-retro .ynp-nav-title { color: #000; font-weight: 400; letter-spacing: 1px; }
.ynp-retro .ynp-nav-back { color: #000; }
.ynp-retro .ynp-nav-back svg { stroke-width: 2.6; }
.ynp-retro .ynp-nav-action { min-width: 34px; height: 30px; padding: 0 10px; background: #f6c3cd; border: 1px solid #000; border-radius: 6px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.7), 0 2px 0 0 #000; color: #000; display: flex; align-items: center; justify-content: center; }
.ynp-retro .ynp-nav-action:active { transform: translateY(2px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.7); }
.ynp-retro .ynp-nav-action svg { width: 17px; height: 17px; stroke-width: 2.4; }
.ynp-diary-list { padding: 18px 16px 26px; }
.ynp-retro-hint { text-align: center; font-size: 11px; color: #7a6a55; letter-spacing: 2px; padding: 2px 0 14px; }
.ynp-retro-card { background: #fbf4ec; border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 2px 0 0 #000, 0 26px 44px -36px rgba(0,0,0,.45); padding: 13px 15px 15px; margin-bottom: 20px; }
.ynp-retro-date { font-size: 12px; color: #000; letter-spacing: .5px; padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px dashed #c7b299; display: flex; align-items: center; gap: 7px; }
.ynp-retro-date .star { color: #e8607f; }
.ynp-retro-date .tag { margin-left: auto; font-size: 10px; padding: 2px 9px; border-radius: 5px; background: #aee0e3; border: 1px solid #000; color: #000; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6), 0 1px 0 0 #000; }
.ynp-retro-body { font-size: 14px; line-height: 2.05; color: #1a1a1a; white-space: pre-wrap; letter-spacing: .3px; }
.ynp-retro-empty { text-align: center; color: #7a6a55; padding: 66px 20px; line-height: 2.2; font-size: 13px; }
.ynp-retro-empty .big { font-size: 34px; display: block; margin-bottom: 12px; }

/* Poolsuite 控件：马卡龙按钮条 / 🌴统计卡 / 底部tab栏 */
.ynp-retro-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.ynp-retro .rbtn { flex: 1; font-family: 'Zpix',sans-serif; font-size: 12px; padding: 9px 3px; border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.7), 0 2px 0 0 #000; cursor: pointer; color: #000; }
.ynp-retro .rbtn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.7); }
.ynp-retro .rbtn.pink { background: #f6c3cd; } .ynp-retro .rbtn.mint { background: #aee0e3; } .ynp-retro .rbtn.coral { background: #f4a9a9; }
.ynp-retro-stats { background: #fbf4ec; border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 2px 0 0 #000; padding: 8px 14px; margin-bottom: 16px; }
.ynp-retro-stats .srow { font-family: 'Zpix',sans-serif; font-size: 12.5px; color: #000; padding: 6px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #ecdcc6; }
.ynp-retro-stats .srow:last-child { border-bottom: none; }
.ynp-retro-stats .srow svg { flex: 0 0 auto; }
.ynp-retro-tabs { flex: 0 0 auto; display: flex; border-top: 1px solid #000; background: #efe2d1; }
.ynp-retro-tabs .tab { flex: 1; text-align: center; font-family: 'Zpix',sans-serif; font-size: 10.5px; color: #000; padding: 10px 0 12px; border-right: 1px solid #000; cursor: pointer; }
.ynp-retro-tabs .tab:last-child { border-right: none; }
.ynp-retro-tabs .tab.on { background: #fbf4ec; box-shadow: inset 0 3px 0 0 #f6c3cd; }
.ynp-retro-tabs .tab .i { display: block; margin-bottom: 4px; }
.ynp-retro-tabs .tab .i svg { width: 18px; height: 18px; }

/* 日记 tab 视图：心情打卡 / 月历 / 我的（Poolsuite像素） */
.ynp-retro-panel { background: #fbf4ec; border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 2px 0 0 #000; padding: 14px 15px; margin-bottom: 16px; }
.ynp-retro-panel h5 { font-family: 'Zpix',sans-serif; font-size: 13px; margin: 0 0 13px; color: #000; }
.ynp-cal-head { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.ynp-cal-head span { text-align: center; font-family: 'Zpix',sans-serif; font-size: 10px; color: #7a6a55; padding-bottom: 5px; }
.ynp-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.ynp-cal-grid .cell { aspect-ratio: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Zpix',sans-serif; font-size: 10px; color: #000; background: rgba(0,0,0,.04); border: 1px solid transparent; position: relative; cursor: pointer; }
.ynp-cal-grid .cell.empty { background: none; cursor: default; }
.ynp-cal-grid .cell.today { border: 1px solid #000; font-weight: 700; }
.ynp-cal-grid .cell .dot { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #e8607f; }
.ynp-mood-legend { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 13px; font-family: 'Zpix',sans-serif; font-size: 10.5px; color: #000; }
.ynp-mood-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.3); }
.ynp-me-card { text-align: center; }
.ynp-me-av { width: 66px; height: 66px; border-radius: 10px; border: 1px solid #000; box-shadow: 0 2px 0 0 #000; margin: 2px auto 10px; display: block; object-fit: cover; background: #e4ecf4; }
.ynp-me-avhint { font-family:'Zpix',sans-serif; font-size:10px; color:#7a6a55; margin-top:6px; }
.ynp-me-name { font-family: 'Zpix',sans-serif; font-size: 17px; color: #000; }
.ynp-me-badge { font-family: 'Zpix',sans-serif; font-size: 10px; display: inline-block; margin-top: 8px; padding: 3px 11px; border: 1px solid #000; border-radius: 5px; background: #aee0e3; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6), 0 1px 0 0 #000; }
.ynp-me-stats { display: flex; justify-content: space-around; margin-top: 16px; }
.ynp-me-stats .st { font-family: 'Zpix',sans-serif; color: #000; }
.ynp-me-stats .st b { display: block; font-size: 22px; }
.ynp-me-stats .st span { font-size: 10px; color: #7a6a55; }



/* ---------- 相册 ---------- */
.ynp-photos { padding: 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ynp-photos > span { width: 100%; aspect-ratio: 1; cursor: pointer; background: #dde6f0; display: block; border-radius: 16px; box-shadow: var(--ynp-soft-sh-sm); transition: transform .15s var(--ynp-ease); }
.ynp-photos > span:active { transform: scale(.94); }
.ynp-photo-full { position: absolute; inset: 0; background: rgba(24,32,44,.9); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; animation: ynp-fade .2s var(--ease-out-quart); }
@keyframes ynp-fade { from{opacity:0} to{opacity:1} }
.ynp-photo-full img { max-width: 86%; max-height: 80%; border-radius: 22px; }
.ynp-photo-close { position: absolute; top: 16px; right: 18px; color: #fff; cursor: pointer; z-index: 51; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.ynp-photo-close svg { width: 24px; height: 24px; }

/* 同一 App 内重渲染：关闭滑入/显现动画，杜绝“刷一下” */
.ynp-instant .ynp-app-page { animation: none !important; }
.ynp-instant .ynp-reveal, .ynp-instant .ynp-profile, .ynp-instant .ynp-app, .ynp-instant .ynp-widget, .ynp-instant .ynp-tile { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }

/* ---------- 广场 ---------- */
.ynp-weibo { padding: 12px; }
.ynp-wb-hotcard { background: var(--ynp-glass-2); border: 1px solid rgba(255,255,255,.6); border-radius: 20px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--ynp-soft-sh); }
.ynp-wb-hot-title { font-size: 14px; font-weight: 700; color: var(--ynp-ink-2); margin-bottom: 8px; }
.ynp-wb-hot-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--ynp-ink); }
.ynp-wb-hot-item .rank { width: 18px; text-align: center; color: var(--ynp-faint); font-weight: 700; font-size: 13px; }
.ynp-wb-hot-item .rank.top { color: #e0725c; }
.ynp-wb-hot-item .fire { margin-left: auto; font-size: 10px; color: #e0725c; background: rgba(224,114,92,.12); padding: 1px 6px; border-radius: 6px; }
.ynp-wb-post { background: var(--ynp-glass-2); border: 1px solid rgba(255,255,255,.6); border-radius: 20px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--ynp-soft-sh); }
.ynp-wb-head { display: flex; align-items: center; gap: 10px; }
.ynp-wb-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #e0e8f1; }
.ynp-wb-name { font-size: 14.5px; font-weight: 700; color: #e0725c; }
.ynp-wb-name .v { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: #e0725c; color: #fff; font-size: 10px; align-items: center; justify-content: center; vertical-align: middle; }
.ynp-wb-time { font-size: 11.5px; color: var(--ynp-faint); margin-top: 2px; }
.ynp-wb-text { font-size: 14.5px; line-height: 1.6; color: var(--ynp-ink); margin: 8px 0; }
.ynp-wb-actions { display: flex; justify-content: space-around; border-top: 1px solid var(--ynp-hair); padding-top: 8px; font-size: 13px; color: var(--ynp-muted); }
.ynp-wb-actions span { cursor: pointer; }
.ynp-wb-actions .liked { color: #e0725c; }

/* ---------- 电话 / 通话 ---------- */
.ynp-call-item { display: flex; align-items: center; gap: 12px; }
.ynp-call-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e0e8f1; }
.ynp-call-meta { flex: 1; }
.ynp-call-name { font-size: 15px; font-weight: 600; color: var(--ynp-ink-2); }
.ynp-call-name.missed { color: #e0725c; }
.ynp-call-sub { font-size: 12px; color: var(--ynp-muted); margin-top: 2px; }
.ynp-call-ico { color: var(--ynp-blue-deep, #4a7fc0); }
.ynp-call-ico svg { width: 20px; height: 20px; }
.ynp-call-screen { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 60px 0 60px; color: #fff; animation: ynp-fade .25s var(--ease-out-quart); overflow: hidden; }
.ynp-call-screen.closing { animation: ynp-fade .2s var(--ease-in-quart) reverse; }
.ynp-call-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #3a4a64, #1a2233); z-index: -1; }
.ynp-call-top { text-align: center; margin-top: 20px; }
.ynp-call-big-av { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; background: #6f89ad; border: 3px solid rgba(255,255,255,.3); box-shadow: 0 8px 30px rgba(0,0,0,.35); animation: ynp-callpulse 2s ease-in-out infinite; }
@keyframes ynp-callpulse { 0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.25); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,.35), 0 0 0 16px rgba(255,255,255,0); } }
.ynp-call-screen.connected .ynp-call-big-av { animation: none; }
.ynp-call-big-name { font-size: 26px; font-weight: 600; margin-top: 20px; }
.ynp-call-status { font-size: 15px; opacity: .8; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ynp-call-voice { font-size: 14px; opacity: .95; margin-top: 18px; padding: 10px 16px; background: rgba(255,255,255,.14); border-radius: 16px; max-width: 240px; line-height: 1.5; backdrop-filter: blur(8px); }
.ynp-call-btns { display: flex; gap: 60px; }
.ynp-call-btn { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .14s var(--ynp-ease); }
.ynp-call-btn:active { transform: scale(.9); }
.ynp-call-btn svg { width: 28px; height: 28px; color: #fff; }
.ynp-call-btn.hang { background: #e0524e; transform: rotate(135deg); }
.ynp-call-btn.hang:active { transform: rotate(135deg) scale(.9); }
.ynp-call-btn.accept { background: #3aa85e; }
.ynp-call-screen.connected .ynp-call-btn.accept { display: none; }

/* ---------- 计算器 ---------- */
.ynp-calc-disp { color: var(--ynp-ink-2); font-size: 54px; font-weight: 300; text-align: right; padding: 28px 26px 16px; min-height: 112px; word-break: break-all; font-variant-numeric: tabular-nums; }
.ynp-calc-pad { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 0 18px 22px; }
.ynp-calc-key { height: 58px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 23px; cursor: pointer; transition: transform .1s var(--ynp-ease); box-shadow: var(--ynp-soft-sh-sm); background: rgba(255,255,255,.62); color: var(--ynp-ink); }
.ynp-calc-key:active { transform: scale(.92); }
.ynp-calc-key.op { background: rgba(160,188,218,.85); color: #33455c; }
.ynp-calc-key.top { background: rgba(210,220,232,.85); color: var(--ynp-muted); }

/* ---------- 设置 ---------- */
.ynp-set-group { margin: 18px 0; }
.ynp-set-group h4 { font-size: 11.5px; color: var(--ynp-muted); font-weight: 600; margin: 0 20px 8px; letter-spacing: .6px; }
.ynp-set-list { background: var(--ynp-glass-2); border-radius: 20px; margin: 0 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh); }
.ynp-set-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ynp-hair); font-size: 14.5px; color: var(--ynp-ink); }
.ynp-set-item:last-child { border-bottom: none; }
.ynp-set-item label { flex: 0 0 84px; color: var(--ynp-muted); font-size: 13px; }
.ynp-set-item input, .ynp-set-item textarea { flex: 1; border: none; background: rgba(150,170,200,.1); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-family: inherit; outline: none; color: var(--ynp-ink); }
.ynp-set-item textarea { resize: vertical; min-height: 64px; line-height: 1.55; }
.ynp-set-note { font-size: 11.5px; color: var(--ynp-faint); margin: 7px 22px 0; line-height: 1.6; }
.ynp-btn { display: block; width: calc(100% - 28px); margin: 15px 14px; padding: 14px; border: none; border-radius: 18px; font-size: 15px; font-weight: 600; cursor: pointer; background: rgba(160,188,218,.9); color: #33455c; box-shadow: var(--ynp-soft-sh); transition: transform .14s var(--ynp-ease); }
.ynp-btn:active { transform: scale(.98); }
.ynp-btn.ghost { background: rgba(255,255,255,.6); color: var(--ynp-ink); }
.ynp-btn.danger { background: rgba(224,168,158,.85); color: #6a3630; }
.ynp-wallpaper-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 0 14px; }
.ynp-wallpaper-grid > div { aspect-ratio: 9/16; border-radius: 16px; background-size: cover; background-position: center; cursor: pointer; border: 2.5px solid transparent; box-shadow: var(--ynp-soft-sh-sm); transition: transform .14s var(--ynp-ease); position: relative; overflow: hidden; }
.ynp-wallpaper-grid > div:active { transform: scale(.95); }
.ynp-wallpaper-grid > div.active { border-color: #8fb0d4; }
.ynp-wallpaper-grid .upload { display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); background: rgba(255,255,255,.5); font-size: 26px; }
.ynp-wallpaper-grid .upload svg { width: 26px; height: 26px; }

/* toast */
.ynp-toast { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%) translateY(12px); background: rgba(60,75,100,.85); color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .28s var(--ynp-ease); z-index: 60; white-space: nowrap; backdrop-filter: blur(8px); }
.ynp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 深色 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --ynp-ink:#c3cdda; --ynp-ink-2:#e2e8f1; --ynp-muted:#8b97a9; --ynp-faint:#5e6a7c; --ynp-icon:#9aa7bb;
    --ynp-hair:rgba(255,255,255,.07);
    --ynp-glass:rgba(38,46,60,.5); --ynp-glass-2:rgba(40,48,62,.66); --ynp-tile:rgba(48,57,73,.6);
    --ynp-soft-sh:6px 6px 16px rgba(0,0,0,.4), -5px -5px 14px rgba(70,82,102,.25);
    --ynp-soft-sh-sm:3px 3px 9px rgba(0,0,0,.35), -3px -3px 8px rgba(70,82,102,.2);
    --ynp-wall:
      radial-gradient(62% 42% at 22% 14%, rgba(46,58,80,.8), transparent 72%),
      radial-gradient(54% 46% at 82% 24%, rgba(52,50,74,.7), transparent 72%),
      radial-gradient(72% 52% at 60% 92%, rgba(40,54,72,.8), transparent 74%),
      #171c26;
  }
  #ynp-phone { background: linear-gradient(155deg,#2a3140,#181d27 60%,#222836); }
  .ynp-screen, .ynp-app-page, .ynp-chat { background: #141926; }
  .ynp-navbar { background: rgba(20,25,38,.82); }
  .ynp-msg.you .ynp-msg-bubble { background: rgba(48,58,76,.85); color: var(--ynp-ink); }
  .ynp-msg.me .ynp-msg-bubble { background: rgba(74,98,130,.8); color: #dbe6f4; }
  .ynp-chat-input { background: rgba(28,35,50,.7); }
  .ynp-chat-input textarea { background: rgba(48,58,76,.7); color: var(--ynp-ink); box-shadow: none; }
  .ynp-weather { background: #26303f; color: #dbe6f4; }
  .ynp-calc-key { background: rgba(48,57,73,.7); }
}

/* ==================== 功能: lockscreen ==================== */
/* 锁屏+通知系统：视觉 1:1 移植定稿「锁屏.html」（手机系统规格：壁纸+轻暗化 veil、🔒/21px日期/97px大钟、
   圆角24 毛玻璃通知卡、50px 玻璃圆钮、13.5px 解锁提示）+ FAB 未读红点（.ynp-fab-badge） */

/* 覆盖层骨架：z 58 = 盖住页面/状态栏/homebar(≤45)和通话屏(55)，低于 toast(60) */
.ynp-lock { position: absolute; inset: 0; z-index: 58; overflow: hidden; color: #fff; font-family: var(--ynp-font); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; animation: ynp-fade .25s var(--ease-out-quart); transition: transform .25s var(--ynp-ease); will-change: transform; }
.ynp-lock:active { cursor: grabbing; }
.ynp-lock.ynp-lock-out { transition: transform .3s var(--ynp-ease), opacity .28s ease !important; transform: translateY(-102%) !important; opacity: .4; pointer-events: none; }

/* 壁纸（JS 赋 backgroundImage=wallCss()，绝不写进 HTML style）+ 定稿轻暗化：brightness(.92) + 淡渐变 veil */
.ynp-lock-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.92); }
.ynp-lock-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,40,60,.18), rgba(30,40,60,.05) 40%, rgba(20,28,44,.28)); }

/* 顶区：🔒 14px → 中文日期 21px/600 → 大时钟 97px/700/字距-3px */
.ynp-lock-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 64px; pointer-events: none; }
.ynp-lock-icn { font-size: 14px; opacity: .95; filter: drop-shadow(0 1px 4px rgba(30,40,60,.4)); }
.ynp-lock-date { font-size: 21px; font-weight: 600; margin-top: 16px; text-shadow: 0 1px 8px rgba(30,40,60,.35); }
.ynp-lock-clock { font-family: var(--ynp-en); font-size: 97px; font-weight: 700; letter-spacing: -3px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(30,40,60,.35); }

/* 通知堆叠区：贴底 158px（定稿 .lock-stack），圆角24 毛玻璃卡，第二张起 scale(.955) */
.ynp-lock-notifs { position: absolute; left: 10px; right: 10px; bottom: 158px; z-index: 2; }
.ynp-lock-card { display: flex; gap: 11px; padding: 13px 14px; border-radius: 24px; background: rgba(250,250,252,.62); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); color: #16202e; box-shadow: 0 10px 30px rgba(30,45,70,.18); cursor: pointer; animation: ynp-lock-in .4s var(--ynp-ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.ynp-lock-card + .ynp-lock-card { margin-top: 10px; transform: scale(.955); opacity: .92; }
.ynp-lock-card:active { transform: scale(.97); }
/* 入场只写 from：to 落回各卡自身计算样式（第二张的 scale(.955) 不会被打断） */
@keyframes ynp-lock-in { from { opacity: 0; transform: translateY(14px); } }
.ynp-lock-card-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(160deg, #57be6a, #2aa64c); color: #fff; display: flex; align-items: center; justify-content: center; }
.ynp-lock-card-ico svg { width: 22px; height: 22px; }
.ynp-lock-card-tx { flex: 1; min-width: 0; }
.ynp-lock-card-tx b { display: block; font-size: 15px; font-weight: 600; }
.ynp-lock-card-tx p { margin: 1px 0 0; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ynp-lock-card time { flex: 0 0 auto; margin-left: 6px; font-size: 13px; opacity: .5; font-variant-numeric: tabular-nums; }
.ynp-lock-more { width: fit-content; margin: 10px auto 0; font-size: 11.5px; color: rgba(255,255,255,.9); background: rgba(120,135,160,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 4px 12px; border-radius: 11px; }

/* 左下手电筒 / 右下相机：50px 玻璃圆钮（定稿 .lk：内描边 + blur22，线条 SVG 21px/1.8） */
.ynp-lock-btns { position: absolute; left: 46px; right: 46px; bottom: 46px; display: flex; justify-content: space-between; z-index: 3; }
.ynp-lock-circ { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(245,247,250,.2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); color: #fff; cursor: pointer; transition: transform .14s var(--ynp-ease), background .2s; }
.ynp-lock-circ:active { transform: scale(.88); background: rgba(245,247,250,.36); }
.ynp-lock-circ svg { width: 21px; height: 21px; }

/* 解锁提示 13.5px + 锁屏自己的 home 条（定稿 .homebar：134×5 白 .92，点它也能解锁） */
.ynp-lock-hint { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-size: 13.5px; opacity: .9; text-shadow: 0 1px 6px rgba(30,40,60,.4); z-index: 3; pointer-events: none; }
.ynp-lock-bar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 2.5px; background: #fff; opacity: .92; z-index: 3; cursor: pointer; }

/* FAB 右上角未读红点（提示红 #ff3b30）——逻辑与样式不变 */
.ynp-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-family: var(--ynp-en); box-shadow: 0 2px 6px rgba(200,50,40,.45), 0 0 0 2px rgba(255,255,255,.9); pointer-events: none; }

/* ==================== 功能: chatplus ==================== */
/* ============================================================
   chatplus · 聊天区视觉=「玻璃拟态」定稿（聊天列表-玻璃 / 语音红包-玻璃 / 拆红包-ins）
   本文件同时承载聊天区公共类：
   - .ynp-wx-wall / .ynp-wx-frost / .ynp-wx-in（壁纸层+磨砂白层+内容层，groupchat 草稿共用）
   - 1:1 聊天页玻璃覆写（.ynp-chat-*/.ynp-msg-* 本体在扩展 style.css，合入时本文件须追加在其后）
   壁纸一律 JS 赋值 el.style.backgroundImage = wallCss()，不写死 dataURI
   ============================================================ */

/* ---------- 公共：壁纸层 + 磨砂白层（定稿 .gwx .wp/.frost） ---------- */
.ynp-wx-wall { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.ynp-wx-frost { position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); background: rgba(248,250,253,.66); }
.ynp-wx-in { position: relative; z-index: 2; height: 100%; min-height: 0; display: flex; flex-direction: column; }

/* ---------- 1:1 聊天页 玻璃覆写 ---------- */
/* 壁纸铺满（盖掉基底的 opacity.3+blur），::after 叠磨砂白层 */
.ynp-chat-wall { opacity: 1; filter: none; }
.ynp-chat-wall::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); background: rgba(248,250,253,.66); }
/* 毛玻璃导航 */
.ynp-chat-head { background: rgba(248,250,253,.72); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: .5px solid rgba(140,160,190,.16); }
.ynp-chat-head .ynp-nav-back { color: #4a7cc9; }
.ynp-chat-head-av { border-radius: 50%; box-shadow: 0 3px 8px rgba(90,115,150,.22); }
/* 38px 圆头像 + 气泡底对齐（定稿 .gm align-items:flex-end） */
.ynp-msg { align-items: flex-end; gap: 10px; }
.ynp-msg-av { border-radius: 50%; box-shadow: 0 3px 8px rgba(90,115,150,.22); }
/* 白玻璃气泡 19px（左下小角6px）/ 我方柔蓝渐变（右下小角6px） */
.ynp-msg-bubble { border-radius: 19px; padding: 10.5px 14px; font-size: 15px; line-height: 1.45; }
.ynp-msg.you .ynp-msg-bubble { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #26303e; border-radius: 19px 19px 19px 6px; box-shadow: 0 4px 16px rgba(120,140,170,.13); }
.ynp-msg.me .ynp-msg-bubble { background: linear-gradient(150deg,#b7cdea,#9dbbe2); color: #1e2c40; border-radius: 19px 19px 6px 19px; box-shadow: 0 4px 16px rgba(120,145,185,.22); }
/* 时间条：去药丸，素字（定稿 .gc-time） */
.ynp-chat-time-chip span { background: none; backdrop-filter: none; padding: 0; font-size: 11.5px; color: #9aa8ba; }
/* 毛玻璃输入栏 */
.ynp-chat-input { background: rgba(250,251,253,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: .5px solid rgba(140,160,190,.16); }
.ynp-chat-input textarea { background: rgba(255,255,255,.85); border-radius: 19px; box-shadow: 0 2px 8px rgba(120,140,170,.08); color: #26303e; }
.ynp-send-btn { background: linear-gradient(150deg,#b7cdea,#9dbbe2); color: #1e2c40; border-radius: 19px; box-shadow: 0 4px 12px rgba(120,145,185,.3); }
.ynp-sticker-panel { background: rgba(250,251,253,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ---------- 语音条（定稿 .gvoice：蓝圆播放钮 + 竖条声波 + N″） ---------- */
.ynp-vc-wrap { max-width: 76%; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ynp-msg.me .ynp-vc-wrap { align-items: flex-end; }
.ynp-vc { max-width: 100%; display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; transition: transform .12s var(--ynp-ease); }
.ynp-vc:active { transform: scale(.97); }
.ynp-vc-play { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(150deg,#7d94b5,#5a7396); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(90,115,150,.3); }
.ynp-vc-play::after { content: ""; margin-left: 2px; border-left: 8px solid #fff; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.ynp-vc.playing .ynp-vc-play::after { margin-left: 0; border: none; width: 9px; height: 9px; border-radius: 2.5px; background: #fff; }
.ynp-vc-wave { display: flex; gap: 2.5px; align-items: center; height: 20px; flex: 1; min-width: 0; overflow: hidden; }
.ynp-vc-wave i { width: 3px; height: 8px; flex: 0 0 auto; border-radius: 2px; background: #8fa5c2; transform-origin: center; }
.ynp-vc-wave i:nth-child(3n) { height: 17px; }
.ynp-vc-wave i:nth-child(4n) { height: 12px; }
.ynp-vc-wave i:nth-child(5n) { height: 19px; }
.ynp-vc.playing .ynp-vc-wave i { animation: ynp-vc-eq .9s ease-in-out infinite; }
.ynp-vc.playing .ynp-vc-wave i:nth-child(2n) { animation-delay: .15s; }
.ynp-vc.playing .ynp-vc-wave i:nth-child(3n) { animation-delay: .3s; }
.ynp-vc.playing .ynp-vc-wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes ynp-vc-eq { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1.25); } }
.ynp-vc-sec { flex: 0 0 auto; font-size: 12.5px; color: #8a97a9; font-variant-numeric: tabular-nums; }
/* 我方（蓝渐变底）反白 */
.ynp-msg.me .ynp-vc-play { background: rgba(255,255,255,.92); box-shadow: 0 3px 8px rgba(60,85,120,.25); }
.ynp-msg.me .ynp-vc-play::after { border-left-color: #5a7396; }
.ynp-msg.me .ynp-vc.playing .ynp-vc-play::after { background: #5a7396; }
.ynp-msg.me .ynp-vc-wave i { background: rgba(30,44,64,.5); }
.ynp-msg.me .ynp-vc-sec { color: #3d5170; }
/* 转文字：折叠小字 */
.ynp-vc-fold { font-size: 11px; color: #a4b0c0; }
.ynp-vc-transbtn { cursor: pointer; padding: 2px 9px; border-radius: 9px; background: rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(120,140,170,.1); display: inline-block; transition: transform .12s var(--ynp-ease); }
.ynp-vc-transbtn:active { transform: scale(.92); }
.ynp-vc-transtext { display: none; margin-top: 5px; font-size: 12.5px; color: var(--ynp-muted); line-height: 1.55; background: rgba(255,255,255,.72); border-radius: 12px; padding: 7px 10px; white-space: pre-wrap; word-break: break-word; box-shadow: 0 4px 14px rgba(120,140,170,.1); }
.ynp-vc-fold.open .ynp-vc-transtext { display: block; }

/* ---------- 红包气泡（定稿 .ghb：暖红渐变 + 金光晕 + 金币开口图标 + 白底金字脚条） ---------- */
.ynp-hb { width: 238px; max-width: 100%; border-radius: 14px; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 8px 24px rgba(210,80,55,.32); transition: transform .12s var(--ynp-ease); }
.ynp-hb:active { transform: scale(.97); }
.ynp-hb-top { background: linear-gradient(160deg,#fa6a52 0%,#f0503c 58%,#e64534 100%); padding: 15px 14px 13px; display: flex; gap: 12px; align-items: center; position: relative; overflow: hidden; }
.ynp-hb-top::before { content: ""; position: absolute; right: -30px; top: -42px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,220,160,.28), transparent 65%); }
.ynp-hb-ic { width: 36px; height: 44px; position: relative; flex: 0 0 auto; filter: drop-shadow(0 3px 6px rgba(120,20,10,.3)); }
.ynp-hb-ic i { display: block; font-style: normal; }
.ynp-hb-ic .env { position: absolute; inset: 0; background: linear-gradient(170deg,#ef5240,#d63a2c); border-radius: 6px; }
.ynp-hb-ic .flap { position: absolute; left: 0; right: 0; top: 0; height: 19px; background: #c93b2b; border-radius: 6px 6px 48% 48%; }
.ynp-hb-ic .coin { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffedc7, #eccf94 58%, #d9b26a); color: #8a5a16; font-size: 10.5px; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 1px 3px rgba(120,60,10,.4); }
.ynp-hb-txt { flex: 1; min-width: 0; position: relative; }
.ynp-hb-wish { color: #fff2dd; font-size: 15px; font-weight: 550; text-shadow: 0 1px 3px rgba(150,40,25,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-hb-state { color: rgba(255,240,220,.66); font-size: 11.5px; margin-top: 2.5px; }
.ynp-hb-foot { background: rgba(255,255,255,.95); padding: 6px 14px; font-size: 10.5px; color: #c9a05e; display: flex; align-items: center; gap: 5px; }
.ynp-hb-foot::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: linear-gradient(150deg,#f2b04b,#e09a2f); flex: 0 0 auto; }
/* 已领取：整卡褪色 */
.ynp-hb.opened { filter: saturate(.45) brightness(1.06); }

/* ---------- 全屏拆红包（定稿「拆红包-ins」：深咖底 + 红卡双细金框 + 印章 + 宋体 + 细圈開钮） ---------- */
.ynp-hb-layer { position: absolute; inset: 0; z-index: 56; background: linear-gradient(170deg,#211d1b,#191514 60%,#141110); animation: ynp-fade .22s var(--ease-out-quart); }
.ynp-hb-cover, .ynp-hb-detail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ynp-hb-card { width: 282px; max-width: 88%; height: 474px; max-height: 80%; border-radius: 22px; position: relative; background: linear-gradient(178deg,#b3493f,#a63e35 55%,#9c3831); box-shadow: 0 26px 70px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; padding: 38px 26px 34px; }
.ynp-hb-card::before { content: ""; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(222,190,140,.34); pointer-events: none; }
.ynp-hb-card::after { content: ""; position: absolute; inset: 14px; border-radius: 12px; border: .5px solid rgba(222,190,140,.16); pointer-events: none; }
.ynp-hb-seal { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 1.2px solid rgba(228,198,150,.6); display: flex; align-items: center; justify-content: center; color: #ecd3a2; font-family: Georgia,'Songti SC','STSong','SimSun',serif; font-size: 19px; margin-top: 6px; }
.ynp-hb-from { margin-top: 24px; font-size: 11.5px; letter-spacing: 4px; color: rgba(240,216,176,.62); }
.ynp-hb-cwish { margin-top: 16px; font-family: Georgia,'Songti SC','STSong','SimSun',serif; font-size: 22px; line-height: 1.75; color: #f3dfba; text-align: center; letter-spacing: 1px; font-weight: 500; padding: 0 4px; }
.ynp-hb-line { width: 26px; height: 1px; flex: 0 0 auto; background: rgba(228,198,150,.5); margin: 24px 0 0; }
/* 封面：細圈開钮 + 轻点开启 */
.ynp-hb-kai { margin-top: auto; width: 66px; height: 66px; flex: 0 0 auto; border-radius: 50%; border: 1.2px solid rgba(232,204,156,.72); display: flex; align-items: center; justify-content: center; color: #f0d8a8; font-family: Georgia,'Songti SC','STSong','SimSun',serif; font-size: 26px; background: rgba(255,235,200,.05); cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynp-hb-kai:active { transform: scale(.93); }
.ynp-hb-kai.flip { animation: ynp-hb-flip .95s ease-in forwards; pointer-events: none; }
@keyframes ynp-hb-flip { 0% { transform: rotateY(0); } 70% { transform: rotateY(900deg) scale(1.06); opacity: 1; } 100% { transform: rotateY(1080deg) scale(.9); opacity: .2; } }
.ynp-hb-hint { margin-top: 14px; font-size: 10.5px; letter-spacing: 3px; color: rgba(240,216,176,.42); }
/* 详情：宋体金色金额 + 已存入零钱小字 + 底部零钱 */
.ynp-hb-amt { margin-top: 26px; font-family: Georgia,'Songti SC','STSong','SimSun',serif; font-size: 46px; font-weight: 600; color: #f0d8a8; letter-spacing: 1px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(60,10,5,.35); }
.ynp-hb-amt .y { font-size: 22px; margin-right: 3px; }
.ynp-hb-note { margin-top: 12px; font-size: 11px; letter-spacing: 3px; color: rgba(240,216,176,.55); }
.ynp-hb-wallet { margin-top: auto; font-size: 10.5px; letter-spacing: 2px; color: rgba(240,216,176,.4); }
/* 关闭钮：底部细圈（封面/详情共用） */
.ynp-hb-x { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,240,215,.22); color: rgba(255,240,215,.55); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.ynp-hb-x svg { width: 15px; height: 15px; }

/* ---------- 发红包 sheet（磨砂白玻璃 + 暖红塞钱钮，与气泡红同源） ---------- */
.ynp-hb-sheet { position: absolute; inset: 0; z-index: 56; background: rgba(244,247,251,.86); backdrop-filter: blur(34px) saturate(1.4); -webkit-backdrop-filter: blur(34px) saturate(1.4); display: flex; flex-direction: column; animation: ynp-fade .22s var(--ease-out-quart); }
.ynp-hb-sheet-bar { flex: 0 0 auto; display: flex; align-items: center; padding: 12px 14px 10px; }
.ynp-hb-sheet-bar .x { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); cursor: pointer; }
.ynp-hb-sheet-bar .x svg { width: 20px; height: 20px; }
.ynp-hb-sheet-bar .t { flex: 1; text-align: center; font-size: 16px; font-weight: 650; color: var(--ynp-ink-2); }
.ynp-hb-sheet-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.ynp-hb-field { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.8); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(120,140,170,.1); }
.ynp-hb-field label { font-size: 14.5px; color: var(--ynp-ink-2); flex: 0 0 auto; }
.ynp-hb-field input { flex: 1; border: none; outline: none; background: none; font-size: 15px; color: var(--ynp-ink-2); text-align: right; font-family: inherit; min-width: 0; }
.ynp-hb-field input.wish { text-align: left; }
.ynp-hb-field input::-webkit-outer-spin-button, .ynp-hb-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ynp-hb-field .unit { font-size: 14.5px; color: var(--ynp-ink-2); flex: 0 0 auto; }
.ynp-hb-big { text-align: center; font-family: Georgia,'Songti SC','STSong','SimSun',serif; font-size: 44px; font-weight: 600; color: var(--ynp-ink-2); margin: 26px 0 30px; font-variant-numeric: tabular-nums; }
.ynp-hb-send { display: block; margin: 0 auto; width: 188px; padding: 12px 0; border: none; border-radius: 22px; background: linear-gradient(160deg,#fa6a52,#e64534); color: #fff6e8; font-size: 15.5px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px rgba(210,80,55,.35); transition: transform .12s var(--ynp-ease); }
.ynp-hb-send:active { transform: scale(.96); }
.ynp-hb-balance { text-align: center; font-size: 12px; color: var(--ynp-muted); margin-top: 14px; }

/* ---------- + 面板（红包|转账，磨砂白玻璃与表情面板同款开合） ---------- */
.ynp-plus-panel { position: relative; z-index: 1; flex: 0 0 auto; max-height: 0; overflow: hidden; background: rgba(250,251,253,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; gap: 18px; padding: 0 18px; transition: max-height .26s var(--ynp-ease), padding .26s var(--ynp-ease); }
.ynp-plus-panel.open { max-height: 320px; padding: 16px 18px 24px; overflow-y: auto; }
.ynp-plus-item { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ynp-muted); cursor: pointer; }
.ynp-plus-ico { width: 52px; height: 52px; border-radius: 17px; background: rgba(255,255,255,.85); box-shadow: 0 4px 14px rgba(120,140,170,.14); border: 1px solid rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); transition: transform .12s var(--ynp-ease); }
.ynp-plus-item:active .ynp-plus-ico { transform: scale(.88); }
.ynp-plus-ico svg { width: 26px; height: 26px; }
.ynp-plus-ico.hb { color: #ef5240; }

/* ==================== 功能: groupchat ==================== */
/* ============================================================
   自定义群聊聊 + 聊天会话列表 · 视觉=「玻璃拟态」定稿(聊天列表-玻璃/群聊-玻璃)
   公共类 .ynp-wx-wall/.ynp-wx-frost/.ynp-wx-in 与时间条覆写在 chatplus 草稿 style.css(须一并合入)
   本文件只放群聊/列表特有类；壁纸由 JS 赋值 wallCss()，不写死
   ============================================================ */

/* ---------- 聊天会话列表(RENDER.chat)：手机大标题 + 搜索胶囊 + 白玻璃圆角22列表卡 ---------- */
.ynp-wxl-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 0; }
.ynp-wxl-top .ynp-nav-back, .ynp-wxl-top .ynp-nav-action { color: #4a7cc9; }
.ynp-wxl-title { flex: 0 0 auto; padding: 2px 20px 4px; font-size: 30px; font-weight: 800; letter-spacing: .2px; color: #26303e; }
.ynp-wxl-search { flex: 0 0 auto; margin: 10px 16px 6px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; gap: 6px; color: #93a1b3; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 14px rgba(120,140,170,.08); }
.ynp-wxl-search svg { width: 15px; height: 15px; stroke: #93a1b3; fill: none; stroke-width: 2; stroke-linecap: round; }
.ynp-wxl-list { margin: 8px 12px; background: rgba(255,255,255,.78); border-radius: 22px; box-shadow: 0 8px 30px rgba(120,140,170,.12); overflow: hidden; }
.ynp-wxl-item { display: flex; gap: 13px; padding: 13px 16px; align-items: center; position: relative; cursor: pointer; }
.ynp-wxl-item:active { background: rgba(240,244,250,.7); }
.ynp-wxl-item + .ynp-wxl-item::before { content: ""; position: absolute; left: 81px; right: 0; top: 0; height: 1px; background: rgba(140,160,190,.16); transform: scaleY(.5); }
.ynp-wxl-av { position: relative; width: 52px; height: 52px; flex: 0 0 auto; }
.ynp-wxl-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #dfe8f2; box-shadow: 0 3px 10px rgba(90,115,150,.25); }
.ynp-wxl-badge { position: absolute; top: -3px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #fa5151; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.95); box-sizing: border-box; }
.ynp-wxl-main { flex: 1; min-width: 0; }
.ynp-wxl-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ynp-wxl-name { font-size: 16.5px; font-weight: 650; color: #26303e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-wxl-time { font-size: 12px; color: #a4b0c0; flex: 0 0 auto; }
.ynp-wxl-prev { font-size: 13.5px; color: #8a97a9; margin-top: 3.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 底部毛玻璃 tabbar(装饰) */
.ynp-wxl-tabbar { flex: 0 0 auto; margin-top: auto; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(250,251,253,.8); border-top: .5px solid rgba(140,160,190,.18); display: flex; padding: 8px 0 16px; }
.ynp-wxl-tab { flex: 1; text-align: center; font-size: 10.5px; color: #8a97a9; }
.ynp-wxl-tab svg { width: 24px; height: 24px; display: block; margin: 0 auto 3px; stroke: #8a97a9; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ynp-wxl-tab.on { color: #4a7cc9; font-weight: 600; }
.ynp-wxl-tab.on svg { stroke: #4a7cc9; }
.ynp-wxl-tab { position: relative; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-wxl-tab:active { transform: scale(.94); }
.ynp-wxl-tabdot { position: absolute; top: -2px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #fa5151; border: 1.5px solid rgba(255,255,255,.95); }

/* ---------- 聊天 通讯录/发现/我(tab 页内切换,白玻璃分组卡) ---------- */
.ynp-wxc-label { margin: 14px 18px 6px; font-size: 12px; color: #909db0; }
.ynp-wxc-group { margin: 10px 12px 0; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 6px 18px -12px rgba(60,90,140,.25); }
.ynp-wxc-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; transition: background .12s; }
.ynp-wxc-item + .ynp-wxc-item { border-top: .5px solid rgba(140,160,190,.14); }
.ynp-wxc-item:active { background: rgba(140,160,190,.12); }
.ynp-wxc-item > span { flex: 1; font-size: 15px; color: #2f3a49; }
.ynp-wxc-av { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.ynp-wxc-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(120,150,200,.14); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ynp-wxc-ico svg { width: 21px; height: 21px; stroke: #4a7cc9; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ynp-wxc-chev { font-style: normal; color: #b3bdcb; font-size: 17px; }
.ynp-wxc-star { font-style: normal; color: #f0b64c; font-size: 14px; }
.ynp-wxme-card { display: flex; align-items: center; gap: 14px; margin: 16px 12px 4px; padding: 18px 16px; border-radius: 18px; background: rgba(255,255,255,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 6px 18px -12px rgba(60,90,140,.25); cursor: pointer; }
.ynp-wxme-av { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.ynp-wxme-info { flex: 1; min-width: 0; }
.ynp-wxme-name { font-size: 19px; font-weight: 700; color: #2f3a49; }
.ynp-wxme-id { margin-top: 4px; font-size: 12.5px; color: #909db0; }

/* ---------- 自定义群聊聊页(chat-talk param='class')：毛玻璃导航 + 玻璃气泡 ---------- */
.ynp-gc-nav { flex: 0 0 auto; display: flex; align-items: center; padding: 8px 10px 9px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(248,250,253,.72); border-bottom: .5px solid rgba(140,160,190,.16); z-index: 5; }
.ynp-gc-nav .ynp-nav-back { color: #4a7cc9; }
.ynp-gc-nav .ynp-nav-action { color: #3c4a5c; }
.ynp-gc-tt { flex: 1; text-align: center; min-width: 0; }
.ynp-gc-tt b { display: block; font-size: 16px; font-weight: 650; color: #26303e; line-height: 1.2; }
.ynp-gc-tt small { font-size: 11px; color: #8a97a9; font-weight: 500; }
.ynp-gc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 14px 8px; }
.ynp-gc-body::-webkit-scrollbar { width: 0; }
.ynp-gc-msg { display: flex; gap: 10px; margin-bottom: 15px; align-items: flex-end; animation: ynp-bubble-in .24s var(--ynp-ease); }
.ynp-gc-msg.me { flex-direction: row-reverse; }
.ynp-gc-avwrap { flex: 0 0 auto; }
.ynp-gc-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #dfe8f2; display: block; box-shadow: 0 3px 8px rgba(90,115,150,.22); }
.ynp-gc-main { max-width: 72%; display: flex; flex-direction: column; align-items: flex-start; }
.ynp-gc-msg.me .ynp-gc-main { align-items: flex-end; }
.ynp-gc-name { font-size: 12px; color: #9aa8ba; margin: 0 0 4px 4px; }
.ynp-gc-bubble { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #26303e; border-radius: 19px 19px 19px 6px; padding: 10.5px 14px; font-size: 15px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; box-shadow: 0 4px 16px rgba(120,140,170,.13); }
.ynp-gc-msg.me .ynp-gc-bubble { background: linear-gradient(150deg,#b7cdea,#9dbbe2); color: #1e2c40; border-radius: 19px 19px 6px 19px; box-shadow: 0 4px 16px rgba(120,145,185,.22); }
.ynp-gc-at { color: #3d6cb4; font-weight: 650; }
/* 输入栏：毛玻璃 + 白胶囊输入框 + 柔蓝渐变发送钮 */
.ynp-gc-input { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 9px; padding: 9px 12px 20px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(250,251,253,.82); border-top: .5px solid rgba(140,160,190,.16); }
.ynp-gc-input textarea { flex: 1; resize: none; border: none; border-radius: 19px; padding: 9px 14px; font-size: 14.5px; font-family: inherit; background: rgba(255,255,255,.85); max-height: 84px; min-height: 20px; line-height: 1.4; outline: none; color: #26303e; box-shadow: 0 2px 8px rgba(120,140,170,.08); }
.ynp-gc-send { flex: 0 0 auto; padding: 10px 16px; border-radius: 19px; border: none; background: linear-gradient(150deg,#b7cdea,#9dbbe2); color: #1e2c40; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(120,145,185,.3); transition: transform .14s var(--ynp-ease); }
.ynp-gc-send:active { transform: scale(.93); }
.ynp-gc-send:disabled { opacity: .55; cursor: default; }

/* ==================== 功能: momentsphoto ==================== */
/* 动态发图 ynp-mp-* ：action sheet / 发表器（聊天「发表」页克隆） / 动态真图宫格 / 大图页码
   视觉规格来自定稿「动态发表.html」：纯白全屏、#07c160 方角4px发表钮、3列图格6px缝、
   黑半透明✕角标、虚线＋格、细线信息行(灰色值+›)。壁纸相关一律不涉及（本页纯白无壁纸）。 */

/* ---------- 动态 feed 里的真实照片（对齐定稿：1张=大图圆角3px，多张=3列格6px缝） ---------- */
.ynp-mp-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.ynp-mp-imgs img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; cursor: pointer; background: #e8ecf2; }
.ynp-mp-imgs img:active { opacity: .82; }
.ynp-mp-imgs.n1 { grid-template-columns: 78%; }
.ynp-mp-imgs.n1 img { aspect-ratio: 4/3; }
.ynp-mp-imgs.n2 img, .ynp-mp-imgs.n3 img, .ynp-mp-imgs.n4 img { aspect-ratio: 1; }

/* ---------- action sheet（右上 + 菜单，保持机内玻璃拟态，不在定稿范围） ---------- */
.ynp-mp-mask { position: absolute; inset: 0; z-index: 56; background: rgba(40,52,70,.35); backdrop-filter: blur(3px); display: flex; align-items: flex-end; animation: ynp-fade .18s var(--ease-out-quart); }
.ynp-mp-mask.closing { animation: ynp-fade .18s var(--ease-in-quart) reverse forwards; }
.ynp-mp-sheet { width: 100%; padding: 10px 12px 26px; background: rgba(245,248,252,.92); backdrop-filter: blur(24px); border-radius: 26px 26px 0 0; animation: ynp-mp-up .22s var(--ynp-ease); }
@keyframes ynp-mp-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.ynp-mp-opt { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--ynp-ink-2); cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-mp-opt:active { background: rgba(120,140,170,.12); transform: scale(.98); }
.ynp-mp-opt svg { width: 21px; height: 21px; color: var(--ynp-icon); flex: 0 0 auto; }
.ynp-mp-cancel { margin-top: 6px; text-align: center; padding: 13px; border-radius: 16px; background: rgba(255,255,255,.75); color: var(--ynp-muted); font-size: 14.5px; cursor: pointer; box-shadow: var(--ynp-soft-sh-sm); transition: transform .12s var(--ynp-ease); }
.ynp-mp-cancel:active { transform: scale(.97); }

/* ---------- 发表器（定稿⑦：聊天发表页，纯白全屏） ---------- */
.ynp-mp-comp { position: absolute; inset: 0; z-index: 55; background: #fff; color: #191919; display: flex; flex-direction: column; animation: ynp-slide-in .22s var(--ynp-ease); }
.ynp-mp-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; background: #fff; }
.ynp-mp-cancelbtn { font-size: 16px; color: #181818; cursor: pointer; padding: 2px 0; }
.ynp-mp-pub { border: none; border-radius: 4px; padding: 7px 14px; font-size: 14.5px; font-weight: 500; font-family: inherit; background: #07c160; color: #fff; cursor: pointer; transition: opacity .14s; }
.ynp-mp-pub:active { opacity: .85; }
.ynp-mp-pub:disabled { background: #f7f7f7; color: #b2b2b2; cursor: default; }
.ynp-mp-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 24px; }
.ynp-mp-body::-webkit-scrollbar { width: 0; }
.ynp-mp-text { width: 100%; min-height: 88px; resize: none; border: none; outline: none; background: transparent; padding: 8px 0; font-size: 16.5px; line-height: 1.5; font-family: inherit; color: #191919; }
.ynp-mp-text::placeholder { color: #b2b2b2; }

/* 3列图格：6px缝、圆角3px、黑半透明✕角标、虚线＋格 */
.ynp-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.ynp-mp-cell { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; }
.ynp-mp-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ynp-mp-del { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ynp-mp-del:active { background: rgba(0,0,0,.68); }
.ynp-mp-del svg { width: 11px; height: 11px; }
.ynp-mp-add { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed #d9d9d9; color: #b2b2b2; cursor: pointer; }
.ynp-mp-add:active { background: #f7f7f7; }
.ynp-mp-add svg { width: 30px; height: 30px; stroke-width: 1; }

/* 细线信息行：所在位置 / 提醒谁看 / 谁可以看（灰色值 + ›） */
.ynp-mp-rows { margin-top: 26px; }
.ynp-mp-row { display: flex; align-items: center; gap: 12px; padding: 15px 2px; font-size: 15.5px; color: #191919; border-top: .5px solid rgba(0,0,0,.08); }
.ynp-mp-row:last-child { border-bottom: .5px solid rgba(0,0,0,.08); }
.ynp-mp-row svg { width: 20px; height: 20px; stroke: #181818; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ynp-mp-row span { margin-left: auto; color: #b2b2b2; font-size: 14px; }
.ynp-mp-tip { margin-top: 16px; font-size: 12px; color: #b2b2b2; text-align: center; line-height: 1.8; }

/* 全屏看图的页码角标 */
.ynp-mp-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.9); font-size: 12.5px; background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 12px; }

/* ---------- 深色 ---------- */
@media (prefers-color-scheme: dark) {
  .ynp-mp-sheet { background: rgba(30,37,52,.94); }
  .ynp-mp-cancel { background: rgba(48,58,76,.8); }
  .ynp-mp-comp, .ynp-mp-top { background: #191919; color: #d5d5d5; }
  .ynp-mp-cancelbtn { color: #d5d5d5; }
  .ynp-mp-pub:disabled { background: #2a2a2a; color: #5d5d5d; }
  .ynp-mp-text { color: #d5d5d5; }
  .ynp-mp-text::placeholder { color: #6b6b6b; }
  .ynp-mp-add { background: transparent; border-color: #3a3a3a; color: #6b6b6b; }
  .ynp-mp-add:active { background: #242424; }
  .ynp-mp-row { color: #d5d5d5; border-color: rgba(255,255,255,.08); }
  .ynp-mp-row:last-child { border-bottom-color: rgba(255,255,255,.08); }
  .ynp-mp-row svg { stroke: #d5d5d5; }
  .ynp-mp-row span, .ynp-mp-tip { color: #6b6b6b; }
  .ynp-mp-imgs img { background: #202a3a; }
  .ynp-mp-cell { background: #202a3a; }
}

/* ==================== 功能: games ==================== */
/* ---------- 小游戏 App（games）：选择页(清露白) + 2048(定稿「2048.html」官方原版) + 数独(定稿「数独.html」sudoku.com 原版) —— 追加到 style.css 末尾 ---------- */

/* 选择页 */
.ynp-gm-select { padding: 14px; }
.ynp-gm-hint { font-size: 13px; color: var(--ynp-muted); margin: 2px 4px 12px; }
.ynp-gm-card { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 14px; border-radius: 22px; background: var(--ynp-glass-2); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh); cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynp-gm-card:active { transform: scale(.97); }
.ynp-gm-thumb { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 18px; overflow: hidden; box-shadow: var(--ynp-soft-sh-sm); }
.ynp-gm-thumb svg { width: 100%; height: 100%; display: block; }
.ynp-gm-meta { flex: 1; min-width: 0; }
.ynp-gm-name { font-size: 16.5px; font-weight: 700; color: var(--ynp-ink-2); }
.ynp-gm-desc { font-size: 12.5px; color: var(--ynp-muted); margin-top: 3px; line-height: 1.5; }
.ynp-gm-tag { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--ynp-icon); background: rgba(150,175,205,.14); padding: 3px 9px; border-radius: 9px; }
.ynp-gm-go { color: var(--ynp-faint); flex: 0 0 auto; }
.ynp-gm-go svg { width: 18px; height: 18px; transform: rotate(180deg); }

/* 游戏内统一返回条（两游戏共用骨架，各自上色） */
.ynp-gm-topbar { display: flex; align-items: center; gap: 6px; padding: 10px 2px 4px; }
.ynp-gm-back { display: flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 4px 8px 4px 2px; border-radius: 10px; transition: transform .12s var(--ynp-ease); }
.ynp-gm-back svg { width: 18px; height: 18px; }
.ynp-gm-back:active { transform: scale(.94); }
.ynp-gm-topttl { flex: 1; text-align: center; font-size: 15px; font-weight: 700; }
.ynp-gm-topact { min-width: 52px; text-align: center; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 6px 10px; transition: transform .12s var(--ynp-ease); }
.ynp-gm-topact:active { transform: scale(.93); }
.ynp-gm-topact:empty { cursor: default; }

/* ===== 2048：定稿「2048.html」⑩ 官方 CSS 原版（自带世界观，不随深色模式变） ===== */
.ynp-gm-body-2048 { background: #faf8ef; }
.ynp-g2 { padding: 0 22px 22px; color: #776e65; font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif; }
.ynp-g2 .ynp-gm-back { color: #776e65; }
/* 头部：50px 标题 + SCORE/BEST 方块（定稿 .g2-head/.g2-sc） */
.ynp-g2-head { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.ynp-g2-logo { flex: 1; font-size: 50px; font-weight: 800; color: #776e65; line-height: 1; }
.ynp-g2-scores { display: flex; gap: 8px; }
.ynp-g2-scorebox { position: relative; min-width: 64px; background: #bbada0; border-radius: 3px; padding: 6px 16px 7px; text-align: center; color: #fff; }
.ynp-g2-scorebox span { display: block; font-size: 10px; font-weight: 700; color: #eee4da; letter-spacing: 1px; }
.ynp-g2-scorebox b { display: block; font-size: 19px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ynp-g2-add { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 15px; font-weight: 700; color: rgba(119,110,101,.9); animation: ynp-g2-add .7s var(--ease-out-quart) forwards; pointer-events: none; }
@keyframes ynp-g2-add { to { transform: translate(-50%,-28px); opacity: 0; } }
/* 第二行：副标题 + New Game 钮（定稿 .g2-row2/.g2-new） */
.ynp-g2-row2 { display: flex; align-items: center; margin: 12px 0 14px; }
.ynp-g2-sub { font-size: 13.5px; color: #776e65; }
.ynp-g2-sub b { font-weight: 700; }
.ynp-g2-new { margin-left: auto; background: #8f7a66; color: #f9f6f2; font-size: 13px; font-weight: 700; border-radius: 3px; padding: 9px 16px; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-g2-new:active { transform: scale(.94); }
.ynp-g2-boardwrap { position: relative; }
/* 盘面：#bbada0 / 圆角6 / 内距与格距 11（定稿 .g2-board） */
.ynp-g2-board { position: relative; background: #bbada0; border-radius: 6px; padding: 11px; display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.ynp-g2-board:active { cursor: grabbing; }
.ynp-g2-cell { aspect-ratio: 1; background: rgba(238,228,218,.35); border-radius: 3px; position: relative; }
.ynp-g2-tile { position: absolute; inset: 0; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 36px; color: #f9f6f2; font-variant-numeric: tabular-nums; }
.ynp-g2-tile.new { animation: ynp-g2-pop .18s var(--ynp-ease); }
@keyframes ynp-g2-pop { from { transform: scale(.4); opacity: .4; } to { transform: none; opacity: 1; } }
.ynp-g2-tile.merged { animation: ynp-g2-merge .22s var(--ynp-ease); }
@keyframes ynp-g2-merge { 0% { transform: scale(.85); } 55% { transform: scale(1.16); } 100% { transform: none; } }
/* 瓦片全表（定稿 t2-t256 + 官方 512-2048 延续） */
.ynp-g2-tile.v2 { background: #eee4da; color: #776e65; }
.ynp-g2-tile.v4 { background: #ede0c8; color: #776e65; }
.ynp-g2-tile.v8 { background: #f2b179; }
.ynp-g2-tile.v16 { background: #f59563; }
.ynp-g2-tile.v32 { background: #f67c5f; }
.ynp-g2-tile.v64 { background: #f65e3b; }
.ynp-g2-tile.v128 { background: #edcf72; font-size: 30px; }
.ynp-g2-tile.v256 { background: #edcc61; font-size: 30px; }
.ynp-g2-tile.v512 { background: #edc850; font-size: 30px; box-shadow: 0 0 18px 4px rgba(243,215,116,.28); }
.ynp-g2-tile.v1024 { background: #edc53f; font-size: 24px; box-shadow: 0 0 20px 5px rgba(243,215,116,.34); }
.ynp-g2-tile.v2048 { background: #edc22e; font-size: 24px; box-shadow: 0 0 22px 6px rgba(243,215,116,.42); }
.ynp-g2-tile.vbig { background: #3c3a32; font-size: 21px; }
/* 游戏结束遮罩（官方 rgba(238,228,218,.73)） */
.ynp-g2-over { position: absolute; inset: 0; border-radius: 6px; background: rgba(238,228,218,.73); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 3; animation: ynp-fade .4s var(--ease-out-quart); }
.ynp-g2-over h3 { margin: 0; font-size: 28px; color: #776e65; font-weight: 800; }
.ynp-g2-over .sc { font-size: 13px; color: #776e65; }
.ynp-g2-retry { border: none; background: #8f7a66; color: #f9f6f2; font-size: 14.5px; font-weight: 700; padding: 10px 22px; border-radius: 3px; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-g2-retry:active { transform: scale(.94); }
/* 当前角色弹幕：白圆角小卡 + 蓝渐变小头像（定稿 .g2-dm），大合并时右上飘出 2.5s 淡出 */
.ynp-g2-dmbox { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.ynp-g2-dm { display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 12px 12px 2px 12px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(120,100,70,.25); font-size: 12.5px; color: #4a5a70; max-width: 210px; animation: ynp-g2-dm 2.5s var(--ynp-ease) forwards; }
.ynp-g2-dm .a { position: relative; width: 24px; height: 24px; border-radius: 7px; overflow: hidden; flex: 0 0 auto; background: linear-gradient(160deg,#7d94b5,#5a7396); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ynp-g2-dm .a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes ynp-g2-dm { 0% { opacity: 0; transform: translateX(16px) scale(.9); } 8% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ===== 数独：定稿「数独.html」⑪ sudoku.com 原版（白底，自带世界观，不随深色模式变） ===== */
.ynp-gm-body-sud { background: #fff; }
.ynp-sud { padding: 0 14px 18px; color: #344861; }
/* 导航：‹ 经典数独 ⚙（定稿 .sd-nav） */
.ynp-sud .ynp-gm-back, .ynp-sud .ynp-gm-topttl { color: #344861; }
.ynp-sud .ynp-gm-topttl { font-size: 16px; }
.ynp-sud .ynp-gm-topact { color: #98a3b3; font-size: 16px; font-weight: 400; padding: 6px 4px; }
/* 信息行：难度/已完成/剩余（定稿 .sd-info 排版） */
.ynp-sud-info { display: flex; justify-content: space-between; padding: 6px 4px 10px; font-size: 12.5px; color: #98a3b3; font-variant-numeric: tabular-nums; }
.ynp-sud-info b { color: #344861; font-weight: 600; }
/* 棋盘：#344861 粗宫线 + #bfc6d4 细线（定稿 .sd-grid/.sc） */
.ynp-sud-board { display: grid; grid-template-columns: repeat(9,1fr); background: #fff; border: 2px solid #344861; border-radius: 6px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.ynp-sud-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 17.5px; color: #325aaf; background: #fff; border-right: 1px solid #bfc6d4; border-bottom: 1px solid #bfc6d4; cursor: pointer; font-variant-numeric: tabular-nums; }
.ynp-sud-cell:nth-child(9n) { border-right: none; }
.ynp-sud-cell:nth-child(n+73) { border-bottom: none; }
.ynp-sud-cell.br { border-right: 2px solid #344861; }   /* 宫格线加粗区分 3×3 */
.ynp-sud-cell.bb { border-bottom: 2px solid #344861; }
.ynp-sud-cell.given { color: #344861; }
.ynp-sud-cell.peer { background: #e2ebf3; }
.ynp-sud-cell.same { background: #c3d7ea; }
.ynp-sud-cell.sel { background: #bbdefb; }
.ynp-sud-cell.err { background: #f7cfd6; }
.ynp-sud-cell.err:not(.given) { color: #e55c6c; }
/* 工具行：撤销/擦除/笔记/提示（定稿 .sd-tools，线条图标 + 11px 灰字） */
.ynp-sud-tools { display: flex; justify-content: space-around; margin-top: 14px; padding: 0 10px; }
.ynp-sud-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #98a3b3; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-sud-tool:active { transform: scale(.9); }
.ynp-sud-tool svg { width: 24px; height: 24px; stroke: #6e7a8a; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* 底部数字行：1-9 大数字（定稿 .sd-nums：30px #325aaf） */
.ynp-sud-nums { display: flex; justify-content: space-between; margin-top: 12px; padding: 0 4px; }
.ynp-sud-num { width: 34px; text-align: center; font-size: 30px; font-weight: 400; color: #325aaf; cursor: pointer; font-variant-numeric: tabular-nums; transition: transform .12s var(--ynp-ease); }
.ynp-sud-num:active { transform: scale(.82); }
/* 撒花 + 完成卡（配色贴白底蓝调） */
.ynp-sud-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.ynp-sud-confetti i { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: ynp-sud-fall 2.6s ease-in forwards; }
@keyframes ynp-sud-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(660px) rotate(560deg); } }
.ynp-sud-win { position: absolute; inset: 0; z-index: 21; background: rgba(255,255,255,.88); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; animation: ynp-fade .3s var(--ease-out-quart); }
.ynp-sud-win .big { font-size: 46px; }
.ynp-sud-win h3 { margin: 0; font-size: 23px; color: #344861; font-weight: 800; }
.ynp-sud-win .sub { font-size: 13px; color: #98a3b3; }
.ynp-sud-again { margin-top: 8px; border: none; background: #325aaf; color: #fff; font-size: 14.5px; font-weight: 700; padding: 10px 24px; border-radius: 8px; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-sud-again:active { transform: scale(.94); }

/* ---------- 奶茶点单 · 半糖屋（自有品牌暖白视觉；前缀 ynp-mt-） ---------- */
.ynp-app-page.ynp-mt { background: #f7f6f3; }
.ynp-mt .ynp-navbar { background: rgba(247,246,243,.92); border-bottom: 1px solid rgba(0,0,0,.06); }
.ynp-mt .ynp-nav-title { color: #111; }
.ynp-mt .ynp-nav-back { color: #111; }
.ynp-mt .ynp-nav-action { font-size: 13.5px; font-weight: 800; color: #111; white-space: nowrap; }

/* 首页：黑字标 + 扫码框 */
.ynp-mt-home { padding-bottom: 88px; }
.ynp-mt-top { padding: 10px 20px 0; display: flex; align-items: center; }
.ynp-mt-logo { font-size: 20px; font-weight: 900; letter-spacing: 2px; color: #111; }
.ynp-mt-logo small { display: block; font-size: 8px; letter-spacing: 4px; color: #a9a294; font-weight: 600; margin-top: 2px; font-family: var(--ynp-en); }
.ynp-mt-scan { margin-left: auto; width: 33px; height: 33px; border-radius: 8px; border: 1.2px solid #111; display: flex; align-items: center; justify-content: center; color: #111; }
.ynp-mt-scan svg { width: 16px; height: 16px; }

/* 本周灵感横幅：米色渐变 + 文案 + 产品图 */
.ynp-mt-hero { margin: 14px 20px 0; background: linear-gradient(160deg, #f2ede4, #e9e0d0); border-radius: 12px; padding: 0 4px 0 20px; display: flex; align-items: center; height: 112px; overflow: hidden; cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynp-mt-hero:active { transform: scale(.98); }
.ynp-mt-hero .hl { flex: 1; min-width: 0; }
.ynp-mt-hero h3 { font-size: 16.5px; font-weight: 800; letter-spacing: .5px; color: #111; margin: 0; }
.ynp-mt-hero p { font-size: 10.5px; color: #8a8073; margin: 6px 0 0; letter-spacing: 1.5px; }
.ynp-mt-hero-img { width: 104px; height: 104px; margin-top: 6px; flex: 0 0 auto; }
.ynp-mt-hero-img .ynp-mt-img, .ynp-mt-hero-img .ynp-mt-img-empty { width: 100%; height: 100%; }

/* 黑下划 tab */
.ynp-mt-tabs { display: flex; gap: 22px; padding: 16px 22px 0; font-size: 14px; color: #a9a294; }
.ynp-mt-tab { padding-bottom: 9px; position: relative; cursor: pointer; }
.ynp-mt-tab.on { color: #111; font-weight: 800; }
.ynp-mt-tab.on::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 18px; height: 2.5px; background: #111; }

/* 2 列白卡：真产品图 108px contain + 名 + 英文小标 uppercase + ¥价 + 黑圆＋ */
.ynp-mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px 20px 0; align-content: start; }
.ynp-mt-card { background: #fff; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,.045); cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynp-mt-card:active { transform: scale(.97); }
.ynp-mt-card .ynp-mt-img { width: 108px; height: 108px; object-fit: contain; }
.ynp-mt-product { position: relative; width: 108px; height: 108px; }
.ynp-mt-img-empty { width: 108px; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; color: #aaa397; background: #f3f1ec; }
.ynp-mt-img-empty svg { width: 30px; height: 30px; }
.ynp-mt-img-empty span { font-size: 10px; }
.ynp-mt-upload { position: absolute; right: 2px; bottom: 2px; border: 0; border-radius: 999px; padding: 4px 7px; font: 9px/1.2 var(--ynp-font); color: #fff; background: rgba(17,17,17,.78); cursor: pointer; }
.ynp-mt-card b { font-size: 13.5px; font-weight: 750; margin-top: 8px; color: #111; }
.ynp-mt-card small { font-size: 8px; letter-spacing: 1.8px; color: #b3aca0; margin-top: 3px; text-transform: uppercase; font-family: var(--ynp-en); }
.ynp-mt-card .buy { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 9px; }
.ynp-mt-price { font-size: 15px; font-weight: 850; color: #111; }
.ynp-mt-price::before { content: '¥'; font-size: 10px; font-weight: 700; }
.ynp-mt-plus { width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .12s var(--ynp-ease); }
.ynp-mt-plus:active { transform: scale(.85); }
.ynp-mt-plus svg { width: 13px; height: 13px; }
/* 第 4 款：灵感上新中 虚线占位卡 */
.ynp-mt-card.soon { justify-content: center; gap: 8px; background: linear-gradient(160deg, #faf9f6, #f1efe9); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); min-height: 176px; }
.ynp-mt-card.soon .dot { width: 34px; height: 34px; border-radius: 50%; border: 1.2px dashed #c9c2b4; display: flex; align-items: center; justify-content: center; color: #b3aca0; font-size: 17px; }
.ynp-mt-card.soon b { color: #8a8478; font-weight: 700; margin-top: 0; }
.ynp-mt-card.soon small { color: #c2bcb0; margin-top: 0; }

/* 白玻璃结算条：件数黑角标 + 合计 + 黑色去结算钮（圆角10） */
.ynp-mt-cartbar { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 54px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 13px; display: flex; align-items: center; padding: 0 8px 0 18px; box-shadow: 0 12px 32px rgba(0,0,0,.13); transform: translateY(90px); opacity: 0; transition: transform .3s var(--ynp-ease), opacity .3s var(--ynp-ease); z-index: 20; }
.ynp-mt-cartbar.show { transform: none; opacity: 1; }
.ynp-mt-cartbar .ico { position: relative; color: #111; display: flex; }
.ynp-mt-cartbar .ico svg { width: 23px; height: 23px; }
.ynp-mt-cartbar .n { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; border-radius: 8px; background: #111; color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.ynp-mt-cartbar .sum { font-size: 17px; font-weight: 850; color: #111; margin-left: 18px; flex: 1; }
.ynp-mt-cartbar .sum::before { content: '¥'; font-size: 11px; font-weight: 700; color: #8a8478; }
.ynp-mt-cartbar .pay { border: none; margin-left: auto; background: #111; color: #fff; height: 40px; border-radius: 10px; padding: 0 24px; font-size: 13.5px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: transform .14s var(--ynp-ease); }
.ynp-mt-cartbar .pay:active { transform: scale(.94); }

/* 规格弹层（底部 sheet）：白底黑字细灰线 */
.ynp-mt-mask { position: absolute; inset: 0; z-index: 30; background: rgba(17,17,17,.38); backdrop-filter: blur(3px); display: flex; flex-direction: column; justify-content: flex-end; animation: ynp-fade .2s var(--ease-out-quart); }
.ynp-mt-mask.closing { animation: ynp-fade .18s var(--ease-in-quart) reverse forwards; }
.ynp-mt-sheet { background: #fff; border-radius: 16px 16px 0 0; padding: 16px 18px 24px; max-height: 82%; overflow-y: auto; box-shadow: 0 -10px 30px rgba(0,0,0,.12); animation: ynp-mt-up .28s var(--ynp-ease); }
.ynp-mt-mask.closing .ynp-mt-sheet { animation: ynp-mt-up .2s var(--ease-in-quart) reverse forwards; }
@keyframes ynp-mt-up { from { transform: translateY(100%); } to { transform: none; } }
.ynp-mt-sh-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eeece6; }
.ynp-mt-sh-img { width: 64px; height: 64px; flex: 0 0 auto; }
.ynp-mt-sh-img .ynp-mt-img { width: 100%; height: 100%; object-fit: contain; }
.ynp-mt-sh-img .ynp-mt-img-empty { width: 100%; height: 100%; gap: 2px; }
.ynp-mt-sh-img .ynp-mt-img-empty svg { width: 22px; height: 22px; }
.ynp-mt-sh-img .ynp-mt-img-empty span { font-size: 8px; }
.ynp-mt-sh-meta { flex: 1; min-width: 0; }
.ynp-mt-sh-meta .t { font-size: 16px; font-weight: 800; color: #111; }
.ynp-mt-sh-meta .e { font-size: 8px; letter-spacing: 1.8px; color: #b3aca0; margin-top: 2px; text-transform: uppercase; font-family: var(--ynp-en); }
.ynp-mt-sh-meta .d { font-size: 11.5px; color: #8a8073; margin-top: 4px; }
.ynp-mt-sh-x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #b3aca0; cursor: pointer; }
.ynp-mt-sh-x svg { width: 18px; height: 18px; }
.ynp-mt-sh-sec { font-size: 12px; font-weight: 700; color: #111; margin: 14px 0 8px; }
.ynp-mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ynp-mt-chip { padding: 7px 13px; border-radius: 10px; background: #fff; border: 1px solid #ddd8ce; font-size: 12.5px; color: #6b675e; cursor: pointer; transition: all .15s var(--ynp-ease); }
.ynp-mt-chip:active { transform: scale(.93); }
.ynp-mt-chip.on { background: #111; border-color: #111; color: #fff; }
/* 加料（多选）选中 = 黑边黑字 */
.ynp-mt-chip.tp.on { background: #fff; border: 1.5px solid #111; color: #111; font-weight: 700; padding: 6.5px 12.5px; }
.ynp-mt-sh-foot { display: flex; align-items: center; margin-top: 18px; }
.ynp-mt-sh-total { font-size: 13px; color: #8a8478; }
.ynp-mt-sh-total b { font-size: 20px; color: #111; margin-left: 4px; font-weight: 850; }
.ynp-mt-sh-add { margin-left: auto; border: none; height: 44px; padding: 0 26px; border-radius: 10px; background: #111; color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: 1px; cursor: pointer; transition: transform .14s var(--ynp-ease); }
.ynp-mt-sh-add:active { transform: scale(.95); }

/* 结算页 / 订单页共用白卡 */
.ynp-mt-co { padding: 14px; }
.ynp-mt-card2 { background: #fff; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.045); }
.ynp-mt-card-t { font-size: 13px; font-weight: 800; color: #111; margin-bottom: 4px; }
.ynp-mt-card-t span { font-size: 8px; letter-spacing: 1.8px; color: #b3aca0; font-weight: 600; margin-left: 6px; text-transform: uppercase; font-family: var(--ynp-en); }
.ynp-mt-co-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0eee8; }
.ynp-mt-co-item .m { flex: 1; min-width: 0; }
.ynp-mt-co-item .n { font-size: 14px; font-weight: 700; color: #111; }
.ynp-mt-co-item .s { font-size: 11.5px; color: #a9a294; margin-top: 2px; }
.ynp-mt-co-item .p { font-size: 14px; font-weight: 800; color: #111; flex: 0 0 auto; }
.ynp-mt-co-item .x { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #c9c2b4; cursor: pointer; flex: 0 0 auto; }
.ynp-mt-co-item .x svg { width: 14px; height: 14px; }
.ynp-mt-co-item .x:active { transform: scale(.85); }
.ynp-mt-co-item .tag { font-size: 10px; background: #f2ede4; color: #8a8073; padding: 2px 7px; border-radius: 6px; margin-left: 5px; font-weight: 600; white-space: nowrap; }
.ynp-mt-co-item .q { font-size: 11.5px; color: #8a8073; margin-top: 4px; font-style: italic; line-height: 1.5; }
.ynp-mt-co-total { text-align: right; padding-top: 10px; font-size: 13px; color: #8a8478; }
.ynp-mt-co-total b { font-size: 19px; color: #111; margin-left: 4px; font-weight: 850; }
.ynp-mt-yn { display: flex; align-items: center; gap: 12px; }
.ynp-mt-yn .av { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #f2ede4; flex: 0 0 auto; }
.ynp-mt-yn .m { flex: 1; min-width: 0; }
.ynp-mt-yn .n { font-size: 14.5px; font-weight: 800; color: #111; }
.ynp-mt-yn .s { font-size: 11.5px; color: #a9a294; margin-top: 2px; }
.ynp-mt-switch { width: 48px; height: 28px; border-radius: 14px; background: #ddd8ce; position: relative; cursor: pointer; transition: background .2s; flex: 0 0 auto; }
.ynp-mt-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: left .2s var(--ynp-ease); }
.ynp-mt-switch.on { background: #111; }
.ynp-mt-switch.on i { left: 23px; }
.ynp-mt-order-btn { display: block; width: 100%; border: none; height: 50px; border-radius: 10px; background: #111; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1px; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,.13); transition: transform .14s var(--ynp-ease); }
.ynp-mt-order-btn:active { transform: scale(.98); }
.ynp-mt-order-btn:disabled { opacity: .6; cursor: default; }
.ynp-mt-co-note { text-align: center; font-size: 11px; color: #b3aca0; margin-top: 10px; }

/* 订单详情：四步进度 + 动画舞台（单色黑） */
.ynp-mt-od { padding: 14px; }
.ynp-mt-stat { text-align: center; padding: 8px 0 12px; }
.ynp-mt-stat .big { font-size: 20px; font-weight: 900; color: #111; letter-spacing: 1px; }
.ynp-mt-stat .sub { font-size: 12px; color: #8a8073; margin-top: 4px; }
.ynp-mt-steps { position: relative; display: flex; justify-content: space-between; margin: 10px 2px 4px; }
.ynp-mt-steps .track { position: absolute; left: 26px; right: 26px; top: 10px; height: 2.5px; border-radius: 2px; background: #e9e5dc; }
.ynp-mt-steps .fill { height: 100%; border-radius: 2px; background: #111; transition: width .6s var(--ynp-ease); }
.ynp-mt-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 62px; }
.ynp-mt-step i { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid #e9e5dc; box-sizing: border-box; }
.ynp-mt-step.done i { background: #111; border-color: #111; }
.ynp-mt-step.cur i { border-color: #111; animation: ynp-mt-pulse 1.4s ease-in-out infinite; }
@keyframes ynp-mt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,.28); } 50% { box-shadow: 0 0 0 7px rgba(17,17,17,0); } }
.ynp-mt-step span { font-size: 10.5px; color: #a9a294; }
.ynp-mt-step.done span { color: #6b675e; }
.ynp-mt-step.cur span { color: #111; font-weight: 800; }
.ynp-mt-stage { text-align: center; padding: 14px 0 6px; }
.ynp-mt-stage .cup { width: 96px; height: 96px; margin: 0 auto; }
.ynp-mt-stage .cup .ynp-mt-img { width: 100%; height: 100%; object-fit: contain; }
.ynp-mt-stage .ok { font-size: 15px; font-weight: 900; color: #111; margin-top: 8px; letter-spacing: 1px; }
.ynp-mt-bob { animation: ynp-mt-bob 1.8s ease-in-out infinite; }
@keyframes ynp-mt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ynp-mt-shake { animation: ynp-mt-shake .55s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes ynp-mt-shake { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.ynp-mt-lane { position: relative; height: 58px; margin: 8px 8px 0; }
.ynp-mt-lane .road { position: absolute; left: 6px; right: 6px; top: 38px; border-top: 2px dashed #d6d1c6; }
.ynp-mt-lane .rider { position: absolute; top: 8px; left: 0; width: 40px; height: 30px; color: #111; animation: ynp-mt-ride 3s linear infinite; }
.ynp-mt-lane .rider svg { width: 100%; height: 100%; }
@keyframes ynp-mt-ride { from { left: -6%; } to { left: 94%; } }
.ynp-mt-lane .flag { position: absolute; right: 0; top: 12px; font-size: 20px; }

/* 订单历史 */
.ynp-mt .ynp-card { background: #fff; border: none; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.045); }
.ynp-mt-oitem { display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynp-mt-oitem:active { transform: scale(.98); }
.ynp-mt-oitem .m { flex: 1; min-width: 0; }
.ynp-mt-oitem .n { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-mt-oitem .s { font-size: 11.5px; color: #a9a294; margin-top: 3px; }
.ynp-mt-oitem .r { text-align: right; flex: 0 0 auto; }
.ynp-mt-oitem .st { font-size: 11.5px; color: #111; font-weight: 800; }
.ynp-mt-oitem .st.ok { color: #b3aca0; font-weight: 600; }
.ynp-mt-oitem .p { font-size: 14px; font-weight: 800; color: #111; margin-top: 3px; }

/* ==================== 功能: interlink ==================== */
/* interlink · 聊天互联层：＋面板九宫格 / 玻璃邀请卡 / 「两人正在听」胶囊
   视觉=「玻璃拟态」定稿体系（语音红包-玻璃.html）：白玻璃 blur、19px 圆角族、
   墨色 #26303e / 灰蓝 #8a97a9 / 链接蓝 #5f7ba0、阴影 rgba(120,140,170,.13)。
   合入时必须追加在 chatplus 的 style.css 之后（要盖 .ynp-plus-panel 的排版）。 */

/* ---------- ＋面板九宫格（ynplExtendPlus 给容器加 .ynp-link-grid） ---------- */
.ynp-plus-panel.ynp-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; justify-items: center; align-content: start; }
.ynp-plus-panel.ynp-link-grid .ynp-plus-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: auto; cursor: pointer; }
.ynp-plus-panel.ynp-link-grid .ynp-plus-item:active .ynp-plus-ico { transform: scale(.92); }
.ynp-plus-panel.ynp-link-grid .ynp-plus-ico { transition: transform .15s var(--ynp-ease); }
/* 新四项的图标着色（图标砖底/尺寸沿用 chatplus 的 .ynp-plus-ico） */
.ynp-plus-ico.ynp-link-i-tea { color: #b98f4e; }
.ynp-plus-ico.ynp-link-i-game { color: #6f9784; }

/* ---------- 玻璃邀请卡（坐在 .ynp-msg 里，位置同红包气泡） ---------- */
.ynp-link-card {
  width: 232px; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(120, 140, 170, .13);
  transition: transform .15s var(--ynp-ease);
}
.ynp-link-card:active { transform: scale(.97); }
.ynp-link-main { display: flex; align-items: center; gap: 11px; padding: 12px 13px 11px; }
.ynp-link-ic {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 3px 10px rgba(90, 115, 150, .22);
}
.ynp-link-ic svg { width: 21px; height: 21px; }
.ynp-link-k-tea { background: linear-gradient(150deg, #d8bc90, #c09f66); }
.ynp-link-k-game { background: linear-gradient(150deg, #94b9a6, #6f9784); }
.ynp-link-tx { flex: 1; min-width: 0; }
.ynp-link-t {
  font-size: 14px; font-weight: 650; color: #26303e; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ynp-link-s { font-size: 11.5px; color: #8a97a9; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-link-go { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; font-size: 11px; color: #5f7ba0; font-weight: 550; }
.ynp-link-go i { font-style: normal; font-size: 15px; line-height: 1; transform: translateY(-1px); }
.ynp-link-foot {
  border-top: .5px solid rgba(140, 160, 190, .16);
  padding: 5.5px 13px; font-size: 10.5px; color: #a4b0c0;
  display: flex; align-items: center; gap: 5px;
}
.ynp-link-foot::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(150deg, #b7cdea, #9dbbe2); }
/* 我方发的卡：底带一点柔蓝，跟我方气泡呼应 */
.ynp-msg.me .ynp-link-card { background: rgba(244, 248, 253, .92); }

/* ---------- 「两人正在听」玻璃胶囊（聊天页导航栏下浮层） ---------- */
.ynp-link-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 7px; max-width: 82%;
  padding: 6.5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 6px 20px rgba(120, 140, 170, .18), 0 1px 0 rgba(255, 255, 255, .8) inset;
  font-size: 12px; font-weight: 600; color: #3c4a5c;
  animation: ynpLinkDrop .32s var(--spring-bouncy) both;
}
.ynp-link-chip:active { transform: translateX(-50%) scale(.95); }
.ynp-link-chip.ynp-link-off { opacity: 0; transition: opacity .25s var(--ease-out-quart); }
.ynp-link-note { font-size: 11px; }
.ynp-link-ct { overflow: hidden; text-overflow: ellipsis; }
@keyframes ynpLinkEq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes ynpLinkDrop { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ==================== 功能: feel-p1 ==================== */
/* feel-p1 · 共享元素转场：::view-transition 规则 + FLIP 残影层 + 飞行气泡（纯动效，无业务样式） */

/* —— View Transitions：App 图标 ↔ 整页 morph ——
   曲线引用 P0 token（--ease-out-quart/--ease-in-quart），未合入 P0 时走 fallback 字面量 */
::view-transition { pointer-events: none; }   /* 转场期间不挡点击，动画可被下一次操作打断 */
::view-transition-group(root) { animation-duration: .25s; }
::view-transition-group(ynp-zoom) {
  animation-duration: .38s;
  animation-timing-function: var(--ease-out-quart, cubic-bezier(.25, 1, .5, 1));
}
::view-transition-image-pair(ynp-zoom) { isolation: none; border-radius: 22px; overflow: hidden; }
::view-transition-old(ynp-zoom) {
  width: 100%; height: 100%; object-fit: cover;
  animation: ynpfx-vt-out .38s var(--ease-in-quart, cubic-bezier(.5, 0, .75, 0)) both;
}
::view-transition-new(ynp-zoom) {
  width: 100%; height: 100%; object-fit: cover;
  animation: ynpfx-vt-in .38s var(--ease-out-quart, cubic-bezier(.25, 1, .5, 1)) both;
}
@keyframes ynpfx-vt-in { from { opacity: 0; } 45% { opacity: 1; } to { opacity: 1; } }
@keyframes ynpfx-vt-out { from { opacity: 1; } 40% { opacity: 0; } to { opacity: 0; } }

/* —— FLIP 残影层：打开时垫底的主屏（后退变暗）/ 关闭时收进图标的旧页 —— */
.ynpfx-ghost { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ynpfx-under { z-index: 0; background: #eef2f7; }
.ynpfx-over { z-index: 80; }

/* —— 聊天发送飞行气泡（挂在 .ynp-chat 里，坐标由 JS 定） —— */
.ynpfx-fly { position: absolute; z-index: 30; margin: 0; pointer-events: none; display: flex; justify-content: flex-end; animation: none !important; }
.ynpfx-fly .ynp-msg-av { display: none; }
.ynpfx-fly .ynp-msg-bubble { max-width: none; width: 100%; }

/* —— 减弱动态效果：VT 退化为瞬时切换，残影层直接不显示（JS 侧同样跳过） —— */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: .01s !important; }
  .ynpfx-ghost { display: none; }
}

/* 触屏手机避免共享元素截图、毛玻璃重绘和横向位移叠加造成首帧跳动。 */
@media (pointer: coarse) {
  .ynp-app-page,
  .ynp-feel-back:not(.ynp-instant) .ynp-app-page,
  .ynp-feel-back:not(.ynp-instant) .ynp-home {
    animation: ynp-fade .12s ease-out both !important;
  }
  .ynpfx-ghost { display: none !important; }
}

/* ============================================================
   P0 手感升级 · 弹簧曲线 + 按压反馈 + reduced-motion
   ============================================================ */
/* 真弹簧曲线（linear() 编码，支持则覆盖 cubic-bezier 回退） */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-bouncy: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
      1.017 19.1%, 1.077 21.4%, 1.121 23.4%, 1.149 25.3%, 1.159 26.6%,
      1.163 28%, 1.161 29.5%, 1.154 31.1%, 1.129 34.1%, 1.051 41.6%,
      1.017 45.5%, 0.991 49.8%, 0.977 53.6%, 0.974 57.1%, 0.975 60.6%,
      0.997 69.8%, 1.003 76.9%, 1);
  }
}
/* 减弱动态效果：退化为快速淡入淡出，循环动画只跑一次 */
@media (prefers-reduced-motion: reduce) {
  #ynp-phone, #ynp-phone *, #ynp-fab {
    animation-duration: .12s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .08s !important;
  }
}

/* ==================== 功能: feel-p3 ==================== */
/* ===== feel-p3 · P3 深度模型 / 灵动岛通知（动效由 WAAPI 驱动，这里只放静态皮肤；
       弹簧 token 用 var(--spring-bouncy, …) 带兜底：P0 没合入也能独立成活） ===== */

/* ---------- ③ 灵动岛通知（z=52：通话屏 55 / 锁屏 58 之下，岛 40 之上） ---------- */
.ynp-isl {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px; border-radius: 15px; z-index: 52;
  background: rgba(16,20,30,.96); color: #f2f5fa; overflow: hidden; cursor: pointer;
  box-shadow: 0 10px 30px rgba(10,16,28,.45);
}
.ynp-isl:active { filter: brightness(1.15); }
.ynp-isl-in { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; opacity: 0; transition: opacity .18s ease; }
.ynp-isl.open .ynp-isl-in { opacity: 1; }
.ynp-isl-av { width: 34px; height: 34px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: #2a3242; }
.ynp-isl-emo { width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.ynp-isl-tx { flex: 1; min-width: 0; }
.ynp-isl-tx b { display: block; font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-isl-tx p { margin: 1px 0 0; font-size: 11.5px; color: rgba(235,240,248,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-isl-time { font-size: 10.5px; color: rgba(235,240,248,.5); flex: 0 0 auto; }

/* ---------- 减弱动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ynp-isl-in { transition: opacity .12s ease; }
}

/* ==================== 功能: feel-p4 ==================== */
/* ===== P4 微反馈 · ynpf —— 必须整段追加到 style.css 最末尾（含「聊天页玻璃覆写」段之后），全部靠级联覆写，不改任何原规则 ===== */

/* 动效 token：优先吃 P0 的全局 token，P0 未合入时用内联回退值，顺序无关 */
:root {
  --ynpf-spring: var(--spring-bouncy, cubic-bezier(0.34, 1.56, 0.64, 1));
  --ynpf-out: var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  --ynpf-in: var(--ease-in-quart, cubic-bezier(0.5, 0, 0.75, 0));
}

/* —— ② 气泡入场：靠头像一侧下角为原点，scale .8→1 弹簧（覆写原 ynp-bubble-in）——
   backwards 配合首渲 stagger 的 animation-delay，排队期间不闪现 */
.ynp-msg, .ynp-gc-msg { animation: ynpf-bubble-in .25s var(--ynpf-spring) backwards; transform-origin: 0% 100%; }
.ynp-msg.me, .ynp-gc-msg.me { transform-origin: 100% 100%; }
@keyframes ynpf-bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ynp-chat-time-chip { animation: ynpf-fade-in .25s var(--ynpf-out) backwards; }
@keyframes ynpf-fade-in { from { opacity: 0; } }
/* 保住既有契约：同 App 重渲染（.ynp-instant）聊天区零动画 */
.ynp-instant .ynp-msg, .ynp-instant .ynp-gc-msg, .ynp-instant .ynp-chat-time-chip { animation: none !important; }

/* —— ① 三点打字指示气泡：依次起伏（覆写原 ynp-blink 节奏）—— */
.ynpf-typing-bubble { min-width: 52px; }
.ynp-typing { display: inline-flex; gap: 5px; padding: 4px 2px; align-items: flex-end; }
.ynp-typing span { animation: ynpf-dot 1.05s var(--ynpf-out) infinite; }
.ynp-typing span:nth-child(2) { animation-delay: .14s; }
.ynp-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes ynpf-dot {
  0%, 55%, 100% { opacity: .35; transform: translateY(0) scale(.92); }
  24%           { opacity: 1;   transform: translateY(-4px) scale(1.08); }
}
/* 顶栏「正在输入…」轻呼吸 */
.ynp-chat-head-status.typing { animation: ynpf-status 1.4s ease-in-out infinite; }
@keyframes ynpf-status { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* —— ④ 滚动显现：上移 8px + 淡入，ease-out（覆写原 12px / --ynp-ease）—— */
.ynp-reveal { transform: translateY(8px); }
.ynp-reveal.ynp-in, .ynp-profile.ynp-in, .ynp-app.ynp-in, .ynp-widget.ynp-in, .ynp-tile.ynp-in {
  transition: opacity .3s var(--ynpf-out), transform .3s var(--ynpf-out);
}

/* —— ③ 图片骨架 shimmer + blur-up ——
   shimmer 用半透明扫光，浅色/深色底都成立；.ynpf-img-in 过渡到清晰后 JS 会摘掉两个类 */
.ynp-mp-imgs img.ynpf-img-load, .ynp-photo-full img.ynpf-img-load {
  filter: blur(14px) saturate(.85); opacity: .55; transform: scale(1.03);
  background: linear-gradient(100deg, rgba(150,170,200,.18) 38%, rgba(255,255,255,.45) 50%, rgba(150,170,200,.18) 62%);
  background-size: 220% 100%;
  animation: ynpf-shimmer 1.1s linear infinite;
}
.ynp-mp-imgs img.ynpf-img-in, .ynp-photo-full img.ynpf-img-in {
  filter: none; opacity: 1; transform: none; animation: none;
  transition: filter .38s var(--ynpf-out), opacity .3s var(--ynpf-out), transform .38s var(--ynpf-out);
}
@keyframes ynpf-shimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
/* 相册九宫格（background-image 的 span）：模糊 + ::after 扫光层 */
.ynp-photos > span { position: relative; overflow: hidden; }
.ynp-photos > span.ynpf-img-load { filter: blur(10px) saturate(.85); opacity: .6; }
.ynp-photos > span.ynpf-img-load::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: ynpf-shimmer 1.1s linear infinite;
}
.ynp-photos > span.ynpf-img-in {
  filter: none; opacity: 1;
  transition: filter .38s var(--ynpf-out), opacity .3s var(--ynpf-out), transform .15s var(--ynp-ease);
}
.ynp-photos > span.ynpf-img-in::after { display: none; }

/* —— reduced-motion 退化：全部变快速淡入/纯透明度脉冲，零位移零模糊 —— */
@keyframes ynpf-dot-fade { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ynp-msg, .ynp-gc-msg, .ynp-chat-time-chip { animation: ynpf-fade-in .12s ease-out backwards !important; }
  .ynp-typing span { animation: ynpf-dot-fade 1.2s ease-in-out infinite !important; transform: none !important; }
  .ynp-chat-head-status.typing { animation: none; }
  .ynp-reveal { transform: none; }
  .ynp-reveal.ynp-in, .ynp-profile.ynp-in, .ynp-app.ynp-in, .ynp-widget.ynp-in, .ynp-tile.ynp-in { transition: opacity .15s ease-out; }
  .ynp-mp-imgs img.ynpf-img-load, .ynp-photo-full img.ynpf-img-load, .ynp-photos > span.ynpf-img-load {
    filter: none; transform: none; animation: none; opacity: .7;
  }
  .ynp-photos > span.ynpf-img-load::after { display: none; }
  .ynp-mp-imgs img.ynpf-img-in, .ynp-photo-full img.ynpf-img-in, .ynp-photos > span.ynpf-img-in { transition: opacity .15s ease-out; }
}

/* ==================== 功能: feel-p2 ==================== */
/* ===FEEL-P2=== 手势层：边缘右滑返回 + 列表橡皮筋 + 动态下拉刷新（追加到 style.css 末尾） */

/* ---- 边缘返回：下层「视差暗化层」= 壁纸打底 + 暗幕，随进度 -30%→0 位移、暗幕淡出 ---- */
.ynp-feel-under { position: absolute; inset: 0; overflow: hidden; background: #dfe6ef; }
.ynp-feel-under .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: translateX(-30%); will-change: transform; }
.ynp-feel-under .dim { position: absolute; inset: 0; background: #1d2635; opacity: .34; }
.ynp-feel-edging { cursor: grabbing; }
.ynp-feel-edging, .ynp-feel-edging * { user-select: none !important; -webkit-user-select: none !important; }
.ynp-feel-drag { will-change: transform; box-shadow: -24px 0 44px rgba(30, 42, 62, .3); }

/* 手势返回落地后：目标页从左短距滑入（接住 30% 视差的运动惯性），并抑制二次 stagger */
.ynp-feel-back:not(.ynp-instant) .ynp-app-page { animation: ynp-feel-back-in .24s cubic-bezier(.25, 1, .5, 1) both; }
.ynp-feel-back:not(.ynp-instant) .ynp-home { animation: ynp-feel-back-in .24s cubic-bezier(.25, 1, .5, 1) both; }
@keyframes ynp-feel-back-in { from { transform: translateX(-26%); filter: brightness(.86); } to { transform: none; filter: none; } }
.ynp-feel-back .ynp-reveal, .ynp-feel-back .ynp-profile, .ynp-feel-back .ynp-app,
.ynp-feel-back .ynp-widget, .ynp-feel-back .ynp-tile { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- 列表橡皮筋 ---- */
.ynp-feel-rb { will-change: transform; }
.ynp-feel-rb, .ynp-feel-rb * { user-select: none !important; -webkit-user-select: none !important; }

/* ---- 动态下拉刷新指示器（聊天味：左上角小相机随下拉旋转，触发后自转） ---- */
.ynp-feel-ptr { position: absolute; top: 52px; left: 16px; width: 26px; height: 26px; z-index: 6; color: var(--ynp-icon); opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 4px rgba(255, 255, 255, .8)); }
.ynp-feel-ptr .ic { display: block; width: 100%; height: 100%; }
.ynp-feel-ptr .ic svg { width: 100%; height: 100%; }
.ynp-feel-ptr.spin .ic { animation: ynp-feel-spin .8s linear infinite; }
@keyframes ynp-feel-spin { to { transform: rotate(360deg); } }

/* ---- 减弱动态：页面切换退化为快速淡入；回弹/飞出在 JS 里同步退化为直接置位 ---- */
@media (prefers-reduced-motion: reduce) {
  .ynp-feel-back:not(.ynp-instant) .ynp-app-page,
  .ynp-feel-back:not(.ynp-instant) .ynp-home { animation: ynp-fade .12s ease both; }
  .ynp-feel-drag { box-shadow: none; }
}

/* ==================== 功能: feel-p0 ==================== */
/* ==================== 功能: feel-p0 —— P0 全局手感换血(动效token + 缓动覆写 + 按压层 + reduced-motion退化) ==================== */
/* 合入位置：style.css 的【最末尾】（必须在 interlink 之后），全部靠"后来居上"的层叠覆写生效，
   不改任何既有规则本体。自带世界观模块一律绕开：日记Poolsuite(.ynp-retro) / 2048(.ynp-g2) /
   数独(.ynp-sud) / 奶茶(.ynp-mt) / 拆红包(.ynp-hb-layer/.ynp-hb-sheet)，
   它们的经典动画节奏原样保留。--ynp-ease 本体也不动（动它会波及上述模块）。 */

/* ---------- P0-1 动效 token ---------- */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* 入场 */
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);     /* 出场 */
  --spring-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹簧（旧浏览器回退：单次过冲） */
}
/* 真弹簧：linear() 编码的欠阻尼弹簧曲线（多一次微回摆），支持则覆盖回退值 */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring-bouncy: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.5%, 0.723 12.9%, 0.938 16.7%,
      1.017 20.4%, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%,
      1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%,
      0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
    );
  }
}

/* ---------- P0-2 逐条缓动覆写（核心 UI；编号与 NOTES 对应） ---------- */
/* ① 开机弹出：页面级关键动画 → 真弹簧；关机 → ease-in 出场（原 .28s var(--ynp-ease) / .24s ease） */
#ynp-phone { animation: ynp-pop .38s var(--spring-bouncy); }
#ynp-phone.ynp-closing { animation: ynp-pop-out .22s var(--ease-in-quart) forwards; }
/* ② FAB 悬浮钮 hover/复位（原 .2s var(--ynp-ease)） */
#ynp-fab { transition: transform .2s var(--ease-out-quart); }
/* ③ App 页滑入统一入场曲线（P1 会换成共享元素转场，这里先归拢到 token） */
.ynp-app-page { animation-timing-function: var(--ease-out-quart); }
/* ④ 主屏壁纸视差 / homebar 宽度 */
.ynp-home-bg { transition: transform .45s var(--ease-out-quart); }
.ynp-homebar { transition: width .2s var(--ease-out-quart); }
/* ⑤ 滚动显现 reveal 系（原 var(--ynp-ease)，归拢 token；.ynp-instant 的 !important 兜底依旧最高优先） */
.ynp-profile.ynp-in, .ynp-app.ynp-in, .ynp-widget.ynp-in, .ynp-reveal.ynp-in { transition-timing-function: var(--ease-out-quart); }
/* ⑥ 聊天/群聊气泡入场 → 弹簧（原 .24s var(--ynp-ease)；局部追加的新气泡同样吃到） */
.ynp-msg, .ynp-gc-msg { animation: ynp-bubble-in .3s var(--spring-bouncy); }
/* ⑦ 表情面板 / ＋面板 开合（原 var(--ynp-ease)，归拢 token） */
.ynp-sticker-panel, .ynp-plus-panel { transition-timing-function: var(--ease-out-quart); }
/* ⑧ 相册大图浮层淡入（原 .2s ease） */
.ynp-photo-full { animation: ynp-fade .22s var(--ease-out-quart); }
/* ⑨ 通话屏（原 .25s ease / reverse）。注意：reverse 会把曲线也反放，
      所以 closing 写 ease-out-quart + reverse，感知上正好等于 ease-in-quart 出场 */
.ynp-call-screen { animation: ynp-fade .25s var(--ease-out-quart); }
.ynp-call-screen.closing { animation: ynp-fade .2s var(--ease-out-quart) reverse; }
/* ⑩ 锁屏淡入（原 .25s ease；解锁上滑 .ynp-lock-out 是手势动量，P2 接管，此处不动） */
.ynp-lock { animation-timing-function: var(--ease-out-quart); }
/* ⑪ 动态 action sheet（机内玻璃拟态，非定稿克隆）：罩层 token 化，面板弹簧上升 */
.ynp-mp-mask { animation: ynp-fade .18s var(--ease-out-quart); }
.ynp-mp-mask.closing { animation: ynp-fade .18s var(--ease-out-quart) reverse forwards; }
.ynp-mp-sheet { animation: ynp-mp-up .32s var(--spring-bouncy); }
/* ⑫ toast：上浮用弹簧、透明度用 ease-out（原 all .28s var(--ynp-ease)） */
.ynp-toast { transition: transform .34s var(--spring-bouncy), opacity .22s var(--ease-out-quart); }
/* ⑬ 互联层（玻璃拟态体系，非"经典配色"模块）：邀请卡按压回弹、胶囊下落弹簧（原 .15s ease / .32s ease） */
.ynp-link-card { transition: transform .15s var(--ease-out-quart); }
.ynp-plus-panel.ynp-link-grid .ynp-plus-ico { transition: transform .15s var(--ease-out-quart); }
.ynp-link-chip { animation: ynpLinkDrop .32s var(--spring-bouncy) both; }
/* ⑭ 聊天顶栏"正在输入"变色（原 color .2s 无曲线） */
.ynp-chat-head-status { transition: color .2s var(--ease-out-quart); }
/* 刻意保留的 linear/ease：黑胶封面旋转 ynp-spin(匀速才像唱片)、外卖小哥 ynp-mt-ride(奶茶模块)、
   打字三点/等化器/星星等循环律动(自己的节拍器) —— 均不改。 */

/* ---------- P0-3 按压反馈层（JS 事件委托配套，见 code.js） ---------- */
/* 按压中的元素提示合成层；形变全部由 WAAPI 驱动（可打断、松手弹簧回弹），CSS 只做标记 */
.ynp-pressing { will-change: transform, filter; }

/* ---------- P0-4 prefers-reduced-motion 全局退化：快速淡入淡出 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --spring-bouncy: ease-out;
    --ease-out-quart: ease-out;
    --ease-in-quart: ease-in;
  }
  /* 开关机 / 进页面：退化为纯淡入淡出 */
  #ynp-phone { animation: ynp-fade .12s ease-out; }
  #ynp-phone.ynp-closing { animation: ynp-fade .12s ease-in reverse forwards; }
  .ynp-app-page { animation: ynp-fade .12s ease-out; }
  /* 气泡 / 浮层 / 胶囊：保留淡入骨架，压短时长 */
  .ynp-msg, .ynp-gc-msg, .ynp-photo-full, .ynp-call-screen, .ynp-lock,
  .ynp-mp-mask, .ynp-mp-sheet, .ynp-link-chip { animation-duration: .12s; animation-timing-function: ease-out; }
  /* 滚动显现：去位移，只留透明度 */
  .ynp-profile, .ynp-app, .ynp-widget, .ynp-reveal { transform: none; }
  .ynp-profile.ynp-in, .ynp-app.ynp-in, .ynp-widget.ynp-in, .ynp-reveal.ynp-in { transition: opacity .15s ease-out; }
  /* 视差 / toast：去位移 */
  .ynp-home-bg { transition: none; }
  .ynp-toast { transition: opacity .15s ease-out; }
  /* 纯装饰循环动画停掉 */
  .ynp-lumy-stars i, .ynp-lumy-arc .track, .ynp-call-big-av { animation: none; }
}

/* ==================== 功能: chat-actions · 长按消息玻璃菜单 ==================== */
.ynp-msgmenu { position: absolute; z-index: 60; min-width: 132px; border-radius: 15px; overflow: hidden; background: rgba(255,255,255,.88); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border: 1px solid rgba(255,255,255,.66); box-shadow: 0 14px 38px rgba(60,80,110,.3); animation: ynp-mm-in .3s var(--spring-bouncy); }
@keyframes ynp-mm-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.ynp-mm-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; color: var(--ynp-ink-2); cursor: pointer; border-bottom: 1px solid var(--ynp-hair); }
.ynp-mm-item:last-child { border-bottom: none; }
.ynp-mm-item:active { background: rgba(120,140,170,.13); }
.ynp-mm-item svg { width: 16px; height: 16px; color: var(--ynp-icon); flex: 0 0 auto; }
.ynp-mm-item.danger { color: #b3564d; }
.ynp-mm-item.danger svg { color: #b3564d; }
@media (prefers-reduced-motion: reduce) { .ynp-msgmenu { animation: ynp-fade .1s; } }

/* ==================== 功能: diary-actions · 手帐复古菜单 ==================== */
.ynp-retro-menu { position: absolute; z-index: 60; min-width: 148px; padding: 7px; display: flex; flex-direction: column; gap: 7px; background: #fbf4ec; border: 1px solid #000; border-radius: 9px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), 0 3px 0 0 #000, 0 22px 38px -26px rgba(0,0,0,.5); animation: ynp-mm-in .3s var(--spring-bouncy); }
.ynp-retro-menu .rm-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-family: 'Zpix', sans-serif; font-size: 12px; color: #000; background: #fff; border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.7), 0 2px 0 0 #000; cursor: pointer; }
.ynp-retro-menu .rm-item:active { transform: translateY(2px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.7); }
.ynp-retro-menu .rm-item .s { width: 15px; text-align: center; flex: 0 0 auto; }
.ynp-retro-menu .rm-item.pink { background: #f6c3cd; }
.ynp-retro-menu .rm-item.coral { background: #f4a9a9; }
@media (prefers-reduced-motion: reduce) { .ynp-retro-menu { animation: ynp-fade .1s; } }

/* ==================== 功能: momentsactions ==================== */
/* ==================== 功能: momentsactions · 动态条目操作 ==================== */
/* 菜单皮肤复用主干已有 .ynp-msgmenu/.ynp-mm-item（chat-actions 带入），这里只补：
   评论可长按的轻按压态 + 防止长按时选中文字 */
.ynp-mo-comment { border-radius: 6px; padding: 2px 4px; margin: 0 -4px; -webkit-user-select: none; user-select: none; }
.ynp-mo-comment:active { background: rgba(120,140,170,.12); }
.ynp-mo-post .ynp-mo-text { -webkit-user-select: none; user-select: none; }

/* ==================== 功能: shrink ==================== */
/* shrink:纯 JS 管线改造,无样式 */

/* ==================== 功能: archive ==================== */
/* 存档 archive:设置页「数据」区块 —— 只补容量数值样式,卡片/按钮全复用 .ynp-set-* / .ynp-btn */
.ynp-arc-val { flex: 1; text-align: right; font-size: 13.5px; color: var(--ynp-ink); font-variant-numeric: tabular-nums; }
.ynp-arc-val.warn { color: #c05a50; font-weight: 600; }

/* ==================== 功能: status ==================== */
/* ===当前角色聊天状态(ynst):顶栏状态可点,长文本省略号=== */
.ynp-chat-head-status { cursor: pointer; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-chat-head-status:active { opacity: .55; transform: scale(.97); }

/* ==================== 功能: pat ==================== */
/* ===当前角色小手机 · pat 拍一拍(双击头像)=== 灰条复用主干 .ynp-chat-time-chip,这里只有抖动动画+防选中 */
@keyframes ynppat-wiggle {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-12deg) scale(1.06); }
  45%  { transform: rotate(10deg) scale(1.04); }
  70%  { transform: rotate(-6deg); }
  100% { transform: rotate(0); }
}
.ynppat-wiggle {
  animation: ynppat-wiggle .4s cubic-bezier(.36, .07, .19, .97) both;
  transform-origin: 50% 60%;
}
/* 可拍的头像:双击不选中文字,给个手型暗示 */
.ynp-msg.you .ynp-msg-av,
.ynp-chat-head-av {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* ==================== 功能: anniv ==================== */
/* ===== 纪念日 anniv:主屏"在一起第N天"小字 + 设置页日期输入微调(清露白) ===== */
.ynpav-days { font-size: 12px; white-space: nowrap; }
/* date input 沿用 .ynp-set-item input 的白玻璃底,只压一下原生外观 */
.ynp-set-item input[type="date"] { -webkit-appearance: none; appearance: none; color-scheme: light; min-height: 37px; }
.ynp-set-item input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* ==================== 功能: movie ==================== */
/* movie · 一起看电影：＋面板格子着色 / movie 邀请卡配色 / 选片sheet / 放映厅暗色浮层 / 🎬胶囊（全部 .ynp-mv-* 前缀，卡片主体沿用主干 .ynp-link-card 皮肤） */

/* ---------- ＋面板格子 & 邀请卡图标砖（电影紫，融进 .ynp-link-k-* 色族） ---------- */
.ynp-plus-ico.ynp-mv-i { color: #7b6aa8; }
.ynp-link-k-movie { background: linear-gradient(150deg, #9587bd, #6a5a99); }

/* ---------- 选片 sheet：暗纱 + 白玻璃底部面板 + 横滑渐变海报 ---------- */
.ynp-mv-sheet { position: absolute; inset: 0; z-index: 52; }
.ynp-mv-mask { position: absolute; inset: 0; background: rgba(24, 32, 44, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ynp-fade .2s var(--ynp-ease); }
.ynp-mv-panel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px 26px;
  border-radius: 22px 22px 0 0;
  background: rgba(248, 250, 253, .92);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 -12px 38px rgba(60, 80, 110, .22);
  animation: ynpMvUp .32s var(--spring-bouncy, var(--ynp-ease)) both;
}
@keyframes ynpMvUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ynp-mv-ph { font-size: 15px; font-weight: 700; color: var(--ynp-ink); padding: 0 4px 12px; }
.ynp-mv-ph span { font-size: 11px; font-weight: 500; color: var(--ynp-muted); margin-left: 8px; }
.ynp-mv-list { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.ynp-mv-list::-webkit-scrollbar { display: none; }
.ynp-mv-film {
  flex: 0 0 auto; width: 104px; height: 148px; border-radius: 14px; cursor: pointer;
  position: relative; overflow: hidden; padding: 10px 10px 12px; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 6px 16px rgba(60, 80, 110, .2), 0 1px 0 rgba(255, 255, 255, .25) inset;
  transition: transform .15s var(--ynp-ease);
}
.ynp-mv-film:active { transform: scale(.94); }
.ynp-mv-fd { position: absolute; top: 8px; right: 9px; font-size: 9.5px; font-weight: 600; opacity: .8; letter-spacing: .4px; }
.ynp-mv-ft { font-size: 14.5px; font-weight: 750; line-height: 1.25; text-shadow: 0 1px 8px rgba(20, 30, 50, .35); }
.ynp-mv-fs { font-size: 10px; opacity: .85; margin-top: 3px; line-height: 1.3; text-shadow: 0 1px 6px rgba(20, 30, 50, .3); }
/* 五张渐变「海报」 */
.ynp-mv-f0 { background: linear-gradient(165deg, #2c3e6b 0%, #7a5c96 45%, #e88fa8 78%, #f6c9a0 100%); } /* 你的名字·黄昏彗星 */
.ynp-mv-f1 { background: linear-gradient(165deg, #1d3a33, #3f7059 55%, #9dc9a5); }                       /* 言叶之庭·雨中庭园 */
.ynp-mv-f2 { background: linear-gradient(165deg, #5b7fb5, #a3b9dd 52%, #f2cfdd); }                       /* 秒速五厘米·樱花天 */
.ynp-mv-f3 { background: linear-gradient(165deg, #1f7fae, #4fc3d9 55%, #bfe98f); }                       /* 夏日大作战·盛夏 */
.ynp-mv-f4 { background: linear-gradient(165deg, #8a5a3b, #d1955c 55%, #f2d9a6); }                       /* 侧耳倾听·暮色小镇 */

/* ---------- 放映厅：全屏暗色浮层（z=50：盖住页面≤45，低于通话55/锁屏58/toast60） ---------- */
.ynp-mv-theater {
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0b0e18, #151226 55%, #0a0d16);
  color: #e8ebf4; font-family: var(--ynp-font); animation: ynp-fade .25s var(--ease-out-quart, ease-out);
}
.ynp-mv-theater.ynp-mv-hide { display: none; }
.ynp-mv-theater.ynp-mv-out { opacity: 0; transition: opacity .28s var(--ynp-ease); }
.ynp-mv-top { flex: 0 0 auto; display: flex; align-items: center; padding: 54px 16px 10px; gap: 8px; }
.ynp-mv-away, .ynp-mv-exit {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; color: rgba(232, 235, 244, .85);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .12s var(--ynp-ease);
}
.ynp-mv-away:active, .ynp-mv-exit:active { transform: scale(.92); }
.ynp-mv-exit { color: #f0b8c4; }
.ynp-mv-name { flex: 1; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ynp-mv-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 18px; min-height: 0; }
.ynp-mv-screenbox {
  position: relative; height: 190px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #171d33, #241f3f 60%, #12172a);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 60px rgba(120, 110, 200, .18), 0 18px 44px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
}
/* 柔光斑：两团模糊光缓慢游走，假装画面在动 */
.ynp-mv-glow { position: absolute; border-radius: 50%; filter: blur(34px); pointer-events: none; }
.ynp-mv-glow.g1 { width: 150px; height: 150px; left: -20px; top: -30px; background: rgba(140, 120, 220, .4); animation: ynpMvG1 11s ease-in-out infinite alternate; }
.ynp-mv-glow.g2 { width: 120px; height: 120px; right: -16px; bottom: -34px; background: rgba(90, 160, 210, .34); animation: ynpMvG2 9s ease-in-out infinite alternate; }
@keyframes ynpMvG1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, 60px) scale(1.25); } }
@keyframes ynpMvG2 { from { transform: translate(0, 0) scale(1.15); } to { transform: translate(-110px, -46px) scale(.9); } }
.ynp-mv-big {
  position: relative; font-size: 24px; font-weight: 800; letter-spacing: 6px; padding-left: 6px;
  color: rgba(240, 242, 250, .92); text-shadow: 0 0 24px rgba(160, 150, 240, .55);
}
.ynp-mv-amb { text-align: center; font-size: 12px; color: rgba(210, 216, 232, .62); margin-top: 22px; min-height: 17px; }
.ynp-mv-amb.ynp-mv-ain { animation: ynpMvAmb .6s var(--ynp-ease) both; }
@keyframes ynpMvAmb { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.ynp-mv-prog { flex: 0 0 auto; padding: 0 22px 46px; }
.ynp-mv-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ynp-mv-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #8f7fd0, #c9a6e8); transition: width 1s linear; }
.ynp-mv-time { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(210, 216, 232, .55); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* ---------- 聊天页 🎬 胶囊（同 .ynp-link-chip 皮肤，独立类避免互踩） ---------- */
.ynp-mv-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 7px; max-width: 82%;
  padding: 6.5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 6px 20px rgba(120, 140, 170, .18), 0 1px 0 rgba(255, 255, 255, .8) inset;
  font-size: 12px; font-weight: 600; color: #3c4a5c;
  animation: ynpLinkDrop .32s var(--spring-bouncy, var(--ynp-ease)) both;
}
.ynp-mv-chip:active { transform: translateX(-50%) scale(.95); }
.ynp-mv-chip.ynp-mv-off { opacity: 0; transition: opacity .25s var(--ease-out-quart, ease-out); }
.ynp-mv-ct { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 减动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ynp-mv-panel, .ynp-mv-chip, .ynp-mv-amb.ynp-mv-ain { animation-duration: .1s; }
  .ynp-mv-glow.g1, .ynp-mv-glow.g2 { animation: none; }
}

/* ==================== 功能: economy ==================== */
/* ============================================================
   当前角色小手机 · economy 经济与成就（前缀 .ynpe-）
   视觉：清露白玻璃拟态基底（--ynp-* 变量）+ 克制的「心动玫瑰」点缀色，
   玫瑰只出现在心形/经验条/签到钮/流水正负号上，其余仍是低饱和蓝灰墨，
   不做廉价粉彩铺底。圆角 16–22px，柔光双向阴影，细线 SVG 图标。
   ============================================================ */

.ynpe-home, .ynpe-page {
  --ynpe-rose: #d98a99;          /* 心动玫瑰（主点缀） */
  --ynpe-rose-d: #b06d7d;        /* 玫瑰文字色（够暗，保证对比度） */
  --ynpe-rose-f: rgba(217,138,153,.13);
  --ynpe-up: #6f9c86;            /* 流水入账（低饱和青绿） */
}

/* ---------- 主屏：资料卡下方的签到胶囊 ---------- */
.ynpe-home {
  margin: 0 0 16px; padding: 9px 10px 9px 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 10px;
  background: var(--ynp-glass); backdrop-filter: blur(30px) saturate(115%); -webkit-backdrop-filter: blur(30px) saturate(115%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh-sm);
}
.ynpe-home-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ynpe-home-l:active { transform: scale(.97); transition: transform .12s var(--ynp-ease); }
.ynpe-home-h { width: 16px; height: 16px; color: var(--ynpe-rose); display: flex; flex: 0 0 auto; }
.ynpe-home-h svg { width: 100%; height: 100%; }
.ynpe-home-l b { font-size: 18px; font-weight: 700; color: var(--ynp-ink-2); font-family: var(--ynp-en); letter-spacing: .3px; }
.ynpe-home-l i { font-size: 11.5px; color: var(--ynp-muted); font-style: normal; }
.ynpe-home-lv {
  margin-left: 2px; font-size: 10.5px; font-weight: 700; color: var(--ynpe-rose-d);
  background: var(--ynpe-rose-f); padding: 3px 7px; border-radius: 8px; font-family: var(--ynp-en);
}
.ynpe-home-sign {
  position: relative; flex: 0 0 auto; border: none; cursor: pointer;
  padding: 8px 15px; border-radius: 14px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, #e6a0ac, #cf8496);
  box-shadow: 0 5px 13px rgba(200,130,148,.34);
  transition: transform .14s var(--ynp-ease);
}
.ynpe-home-sign:active { transform: scale(.95); }
.ynpe-home-sign.done { background: rgba(255,255,255,.62); color: var(--ynp-muted); box-shadow: none; font-weight: 500; }
/* 未签到的小红点（呼吸） */
.ynpe-home-sign em {
  position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #e2708a; box-shadow: 0 0 0 2px rgba(255,255,255,.85); animation: ynpe-dot 1.9s ease-in-out infinite;
}
@keyframes ynpe-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .6; } }

/* ---------- 钱包页 ---------- */
.ynpe-wrap { padding-bottom: 8px; }

/* 顶部玻璃卡：心动值 / 等级 / 经验条 / 签到 */
.ynpe-hero {
  position: relative; overflow: hidden; margin: 14px; padding: 18px 18px 15px; border-radius: 22px;
  background: var(--ynp-glass-2); backdrop-filter: blur(24px) saturate(115%); -webkit-backdrop-filter: blur(24px) saturate(115%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--ynp-soft-sh);
}
.ynpe-hero-glow {
  position: absolute; inset: -40% -20% auto -20%; height: 190%; pointer-events: none;
  background:
    radial-gradient(46% 42% at 82% 16%, rgba(226,160,175,.30), transparent 70%),
    radial-gradient(52% 46% at 12% 88%, rgba(150,180,215,.26), transparent 72%);
}
.ynpe-hero > *:not(.ynpe-hero-glow) { position: relative; }
.ynpe-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ynpe-coin { display: flex; align-items: baseline; gap: 7px; }
.ynpe-coin-h {
  width: 22px; height: 22px; flex: 0 0 auto; color: var(--ynpe-rose); align-self: center;
  display: flex; animation: ynpe-beat 2.6s var(--ynp-ease) infinite;
}
.ynpe-coin-h svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(200,130,150,.35)); }
@keyframes ynpe-beat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(1); } 36% { transform: scale(1.09); } 48% { transform: scale(1); } }
.ynpe-coin b { font-size: 32px; font-weight: 700; line-height: 1; color: var(--ynp-ink-2); font-family: var(--ynp-en); letter-spacing: .5px; }
.ynpe-coin i { font-size: 12px; color: var(--ynp-muted); font-style: normal; }
.ynpe-lv { text-align: right; flex: 0 0 auto; }
.ynpe-lv b {
  display: inline-block; font-size: 12.5px; font-weight: 700; font-family: var(--ynp-en);
  color: var(--ynpe-rose-d); background: var(--ynpe-rose-f); padding: 4px 10px; border-radius: 11px;
  border: 1px solid rgba(217,138,153,.2);
}
.ynpe-lv span { display: block; margin-top: 6px; font-size: 11px; color: var(--ynp-muted); letter-spacing: .4px; }

.ynpe-bar { margin: 16px 0 7px; height: 8px; border-radius: 5px; background: rgba(150,170,200,.18); overflow: hidden; }
.ynpe-bar span {
  display: block; height: 100%; border-radius: 5px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #e7a6b3, #cfa9cd 55%, #9db8dd);
  box-shadow: 0 1px 5px rgba(200,140,160,.35);
  transition: width .55s var(--ynp-ease);
}
.ynpe-bar span::after {
  content: ''; position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.62) 50%, transparent 80%);
  transform: translateX(-100%); animation: ynpe-shine 3.4s ease-in-out infinite;
}
@keyframes ynpe-shine { 0%,62% { transform: translateX(-100%); } 100% { transform: translateX(120%); } }
.ynpe-barmeta { display: flex; justify-content: space-between; font-size: 11px; color: var(--ynp-faint); font-family: var(--ynp-en); }

.ynpe-signrow { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ynp-hair); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ynpe-streak { font-size: 12.5px; color: var(--ynp-muted); }
.ynpe-streak b { font-size: 15px; color: var(--ynpe-rose-d); font-family: var(--ynp-en); margin: 0 2px; }
.ynpe-signbtn {
  flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit;
  padding: 9px 18px; border-radius: 15px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #e6a0ac, #cf8496);
  box-shadow: 0 6px 15px rgba(200,130,148,.35);
  transition: transform .14s var(--ynp-ease);
}
.ynpe-signbtn:active { transform: scale(.95); }
.ynpe-signbtn.done { background: rgba(150,170,200,.14); color: var(--ynp-muted); box-shadow: none; font-weight: 500; }

/* 分组小标题 */
.ynpe-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 20px 9px; }
.ynpe-sec h4 { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; color: var(--ynp-muted); }
.ynpe-sec span { font-size: 11px; color: var(--ynp-faint); font-family: var(--ynp-en); }

/* 徽章墙 */
.ynpe-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin: 0 14px; }
.ynpe-bd { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.ynpe-bd-ic {
  width: 50px; height: 50px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  font-size: 23px; line-height: 1;
  background: rgba(150,170,200,.11); color: var(--ynp-faint);
  border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 3px rgba(120,145,180,.12);
  transition: transform .16s var(--ynp-ease);
}
.ynpe-bd-ic svg { width: 21px; height: 21px; }
.ynpe-bd:active .ynpe-bd-ic { transform: scale(.9); }
.ynpe-bd.on .ynpe-bd-ic {
  background: linear-gradient(155deg, #ffffff, #f6e9ed 70%, #eef1f7);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--ynp-soft-sh-sm), inset 0 0 0 1px rgba(217,138,153,.12);
  filter: none;
}
.ynpe-bd-n { font-size: 10px; line-height: 1.35; text-align: center; color: var(--ynp-faint); max-width: 100%; }
.ynpe-bd.on .ynpe-bd-n { color: var(--ynp-ink); font-weight: 500; }

/* 小卖部（商城预留区，YNP_SHOP_HOOKS 为空时整段不渲染） */
.ynpe-shop { margin: 0 14px; border-radius: 20px; overflow: hidden; background: var(--ynp-glass-2); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh); }
.ynpe-sp { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--ynp-hair); }
.ynpe-sp:last-child { border-bottom: none; }
.ynpe-sp-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(150,170,200,.12); }
.ynpe-sp-tx { flex: 1; min-width: 0; }
.ynpe-sp-tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ynp-ink-2); }
.ynpe-sp-tx span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ynp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynpe-sp-buy {
  flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit;
  padding: 7px 13px; border-radius: 13px; font-size: 12.5px; font-weight: 600;
  color: var(--ynpe-rose-d); background: var(--ynpe-rose-f); border: 1px solid rgba(217,138,153,.22);
  transition: transform .14s var(--ynp-ease);
}
.ynpe-sp-buy:active { transform: scale(.94); }

/* 收支流水 */
.ynpe-log { margin: 0 14px; border-radius: 20px; overflow: hidden; background: var(--ynp-glass-2); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh); }
.ynpe-lg { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--ynp-hair); }
.ynpe-lg:last-child { border-bottom: none; }
.ynpe-lg-t { flex: 1; min-width: 0; }
.ynpe-lg-t b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ynp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynpe-lg-t span { display: block; margin-top: 2px; font-size: 11px; color: var(--ynp-faint); font-family: var(--ynp-en); }
.ynpe-lg-n { flex: 0 0 auto; font-size: 15px; font-weight: 700; font-family: var(--ynp-en); letter-spacing: .3px; }
.ynpe-lg-n.up { color: var(--ynpe-up); }
.ynpe-lg-n.dn { color: var(--ynpe-rose-d); }
.ynpe-blank { padding: 34px 20px; text-align: center; font-size: 12.5px; line-height: 1.9; color: var(--ynp-faint); }

/* 徽章详情底部弹层 */
/* z-index 30：盖住页面内容，但让 toast(60) 仍能冒出来 */
.ynpe-sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(60,75,95,.24); backdrop-filter: blur(3px); animation: ynpe-fade .18s ease-out; }
@keyframes ynpe-fade { from { opacity: 0; } to { opacity: 1; } }
.ynpe-sheet-card {
  width: 100%; margin: 0 10px 12px; padding: 22px 20px 16px; border-radius: 24px; text-align: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(26px) saturate(120%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 -6px 28px rgba(110,135,170,.28);
  animation: ynpe-up .3s var(--ynp-ease);
}
@keyframes ynpe-up { from { transform: translateY(26px); opacity: .4; } to { transform: none; opacity: 1; } }
.ynpe-sheet-ic {
  width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 31px;
  background: rgba(150,170,200,.11); color: var(--ynp-faint); border: 1px solid rgba(255,255,255,.6);
}
.ynpe-sheet-ic svg { width: 27px; height: 27px; }
.ynpe-sheet-card.on .ynpe-sheet-ic {
  background: linear-gradient(155deg, #ffffff, #f6e9ed 70%, #eef1f7);
  box-shadow: var(--ynp-soft-sh-sm); animation: ynpe-pop .42s var(--ynp-ease);
}
@keyframes ynpe-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.ynpe-sheet-n { font-size: 17px; font-weight: 700; color: var(--ynp-ink-2); }
.ynpe-sheet-d { margin-top: 6px; font-size: 13px; color: var(--ynp-ink); }
.ynpe-sheet-m { margin-top: 9px; font-size: 11.5px; color: var(--ynp-faint); line-height: 1.7; }
.ynpe-sheet-ok {
  margin-top: 16px; width: 100%; border: none; cursor: pointer; font-family: inherit;
  padding: 12px; border-radius: 16px; font-size: 14px; font-weight: 600;
  background: rgba(160,188,218,.9); color: #33455c; box-shadow: var(--ynp-soft-sh-sm);
  transition: transform .14s var(--ynp-ease);
}
.ynpe-sheet-ok:active { transform: scale(.98); }

/* 尊重系统的「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .ynpe-coin-h, .ynpe-bar span::after, .ynpe-home-sign em { animation: none; }
  .ynpe-sheet-card, .ynpe-sheet-card.on .ynpe-sheet-ic { animation: none; }
}

/* ==================== 功能: pet ==================== */
/* ============================================================
   宠物「一起养」pet —— 温柔奶油底 + 蓝调玻璃卡 + 手绘 SVG 小猫
   猫会呼吸/眨眼/摆尾，被摸会眯眼；喂食掉小鱼干、洗澡冒泡泡、逗猫棒羽毛乱窜
   类名全 .ynp-pet-*，只作用在 .ynp-app-page.ynp-pet 内，零全局污染
   ============================================================ */

.ynp-app-page.ynp-pet {
  background:
    radial-gradient(62% 40% at 20% 8%, rgba(252,240,224,.95), transparent 70%),
    radial-gradient(58% 42% at 88% 22%, rgba(224,234,246,.9), transparent 72%),
    radial-gradient(74% 48% at 50% 100%, rgba(238,232,246,.75), transparent 76%),
    #f8f4ee;
}
.ynp-pet .ynp-navbar { background: rgba(250,246,240,.82); border-bottom: 1px solid rgba(170,150,130,.14); }
.ynp-pet .ynp-nav-action { font-size: 13px; font-weight: 700; color: #9a8a79; white-space: nowrap; }
.ynp-pet-home { padding: 12px 14px 26px; }

/* ---------- 通用卡：白玻璃 + 柔光 ---------- */
.ynp-pet-card {
  background: var(--ynp-glass-2); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.68); border-radius: 22px;
  box-shadow: var(--ynp-soft-sh); margin-bottom: 12px;
}

/* ---------- 舞台 ---------- */
.ynp-pet-top { padding: 14px 14px 12px; text-align: center; }
.ynp-pet-say {
  min-height: 34px; font-size: 12.5px; line-height: 1.5; color: var(--ynp-muted);
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px 14px 14px 4px; padding: 7px 12px; margin: 0 4px 6px;
  box-shadow: var(--ynp-soft-sh-sm); opacity: 0; transform: translateY(-4px);
}
.ynp-pet-say.in { opacity: 1; transform: none; transition: opacity .3s var(--ynp-ease), transform .3s var(--ynp-ease); }

.ynp-pet-stage { position: relative; height: 214px; overflow: hidden; border-radius: 18px; }
.ynp-pet-floor {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 130px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140,160,190,.3), transparent 78%);
}
.ynp-pet-cat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ynp-pet-cat .ynp-pet-hit { cursor: pointer; }

/* 呼吸 / 摆尾 / 眨眼 —— 三条常驻微动画，错开周期才像活的 */
.ynp-pet-body { transform-box: fill-box; transform-origin: 50% 100%; animation: ynppet-breathe 3.4s ease-in-out infinite; }
@keyframes ynppet-breathe { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(1.028) } }
.ynp-pet-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: ynppet-wag 2.6s ease-in-out infinite; }
.pose-lie .ynp-pet-tail { transform-origin: 100% 100%; animation-duration: 3.2s; }
@keyframes ynppet-wag { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(8deg) } }
.ynp-pet-open { transform-box: fill-box; transform-origin: 50% 50%; animation: ynppet-blink 5.6s infinite; }
@keyframes ynppet-blink { 0%,95.5%,100% { transform: scaleY(1) } 97.4% { transform: scaleY(.08) } }
.ynp-pet-shut { display: none; }
.ynp-pet-head { transform-box: fill-box; transform-origin: 50% 92%; }

/* 眯眼（被摸） / 进食 / 抖水 / 走路 */
.ynp-pet-cat.squint .ynp-pet-open { display: none; }
.ynp-pet-cat.squint .ynp-pet-shut { display: block; }
.ynp-pet-cat.squint .ynp-pet-head { animation: ynppet-nuzzle 1.1s ease-in-out; }
@keyframes ynppet-nuzzle { 0%,100% { transform: none } 30% { transform: rotate(-5deg) translateY(2px) } 65% { transform: rotate(4deg) } }
.ynp-pet-cat.eat .ynp-pet-head { animation: ynppet-eat .34s ease-in-out 4; }
@keyframes ynppet-eat { 0%,100% { transform: none } 50% { transform: translateY(5px) scale(1.02) } }
.ynp-pet-cat.shiver { animation: ynppet-shiver .16s linear 9; }
@keyframes ynppet-shiver { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
.ynp-pet-cat.pose-walk { animation: ynppet-bob .5s ease-in-out infinite; }
@keyframes ynppet-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.pose-walk .ynp-pet-legs rect:nth-child(odd) { transform-box: fill-box; transform-origin: 50% 0; animation: ynppet-step .5s ease-in-out infinite; }
.pose-walk .ynp-pet-legs rect:nth-child(even) { transform-box: fill-box; transform-origin: 50% 0; animation: ynppet-step .5s ease-in-out infinite reverse; }
@keyframes ynppet-step { 0%,100% { transform: rotate(-8deg) } 50% { transform: rotate(8deg) } }

/* 飘浮特效：心心 / 星星 / 水滴 / 音符 */
.ynp-pet-fx {
  position: absolute; bottom: 74px; width: 20px; height: 20px; z-index: 3;
  pointer-events: none; animation: ynppet-float 1.4s var(--ynp-ease) forwards;
}
.ynp-pet-fx svg { width: 100%; height: 100%; }
@keyframes ynppet-float { 0% { opacity: 0; transform: translateY(6px) scale(.5) } 22% { opacity: 1; transform: translateY(-4px) scale(1.1) } 100% { opacity: 0; transform: translateY(-64px) scale(.86) rotate(12deg) } }
.ynp-pet-bub {
  position: absolute; bottom: 24px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(190,220,240,.42) 62%, rgba(160,200,230,.22));
  border: 1px solid rgba(255,255,255,.8); animation: ynppet-bubble 2.2s ease-in forwards;
}
@keyframes ynppet-bubble { 0% { opacity: 0; transform: translateY(10px) scale(.4) } 15% { opacity: 1 } 100% { opacity: 0; transform: translateY(-150px) scale(1.06) } }
.ynp-pet-food { position: absolute; left: 50%; top: -10px; width: 46px; height: 28px; margin-left: -23px; z-index: 3; pointer-events: none; animation: ynppet-drop 1.2s var(--ynp-ease) forwards; }
.ynp-pet-food svg { width: 100%; height: 100%; }
@keyframes ynppet-drop { 0% { opacity: 0; transform: translateY(-10px) rotate(-16deg) } 20% { opacity: 1 } 62% { opacity: 1; transform: translateY(96px) rotate(6deg) } 100% { opacity: 0; transform: translateY(110px) scale(.7) } }

/* 逗猫棒 */
.ynp-pet-wand {
  position: absolute; width: 46px; height: 46px; z-index: 4; cursor: pointer;
  transition: left .62s var(--spring-bouncy), top .62s var(--spring-bouncy);
  filter: drop-shadow(0 4px 8px rgba(140,120,130,.28));
}
.ynp-pet-wand svg { width: 100%; height: 100%; }
.ynp-pet-wand.pop { animation: ynppet-pop .3s var(--spring-bouncy); }
@keyframes ynppet-pop { 0% { transform: scale(1) } 45% { transform: scale(1.35) rotate(-14deg) } 100% { transform: scale(1) } }
.ynp-pet-toytip {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 4;
  font-size: 11.5px; color: #8a7a86; background: rgba(255,255,255,.82);
  border-radius: 999px; padding: 4px 12px; box-shadow: var(--ynp-soft-sh-sm); white-space: nowrap;
}
.ynp-pet-toytip b { color: #e08aa0; font-size: 13px; }

/* 名字 / 等级 */
.ynp-pet-meta { margin-top: 4px; }
.ynp-pet-name { font-size: 18px; font-weight: 800; color: var(--ynp-ink-2); letter-spacing: .5px; }
.ynp-pet-lv {
  display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: #a2789a;
  background: linear-gradient(120deg, rgba(246,226,238,.9), rgba(228,234,248,.9));
  border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 3px 11px;
}
.ynp-pet-days { margin-top: 6px; font-size: 11px; color: var(--ynp-faint); }

/* ---------- 四条状态 ---------- */
.ynp-pet-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.ynp-pet-bar {
  background: var(--ynp-glass-2); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.66); border-radius: 16px;
  padding: 9px 11px 10px; box-shadow: var(--ynp-soft-sh-sm);
}
.ynp-pet-bar .lb { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--ynp-muted); margin-bottom: 6px; }
.ynp-pet-bar .lb u { text-decoration: none; font-family: var(--ynp-en); font-size: 13.5px; font-weight: 800; color: var(--ynp-ink-2); }
.ynp-pet-bar .tk { height: 7px; border-radius: 999px; background: rgba(140,160,190,.16); overflow: hidden; box-shadow: inset 0 1px 2px rgba(120,140,170,.18); }
.ynp-pet-bar .tk i { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ynp-ease); }
.ynp-pet-bar.k-f .tk i { background: linear-gradient(90deg,#f6d3a4,#efb277); }
.ynp-pet-bar.k-c .tk i { background: linear-gradient(90deg,#bfe0f2,#8bbfdf); }
.ynp-pet-bar.k-m .tk i { background: linear-gradient(90deg,#f8cfd6,#f0a2b2); }
.ynp-pet-bar.k-l .tk i { background: linear-gradient(90deg,#d9cdf3,#b19ce4); }
.ynp-pet-bar.low .lb u { color: #d98a8a; }
.ynp-pet-bar.low { animation: ynppet-warn 2.4s ease-in-out infinite; }
@keyframes ynppet-warn { 0%,100% { box-shadow: var(--ynp-soft-sh-sm) } 50% { box-shadow: 0 0 0 1.5px rgba(224,140,140,.32), var(--ynp-soft-sh-sm) } }

/* ---------- 四个动作 ---------- */
.ynp-pet-acts { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 10px; }
.ynp-pet-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11.5px; color: var(--ynp-ink); padding: 11px 2px 10px;
  background: var(--ynp-glass-2); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.68); border-radius: 18px; box-shadow: var(--ynp-soft-sh-sm);
  transition: transform .16s var(--ynp-ease), box-shadow .16s var(--ynp-ease);
}
.ynp-pet-act span { width: 26px; height: 26px; color: #8e9cb2; display: block; }
.ynp-pet-act span svg { width: 100%; height: 100%; }
.ynp-pet-act:hover { transform: translateY(-2px); }
.ynp-pet-act:active { transform: scale(.93); box-shadow: inset 2px 2px 6px rgba(150,170,200,.22); }
.ynp-pet-act[data-act="feed"] span { color: #d2a06e; }
.ynp-pet-act[data-act="bath"] span { color: #7fb2d4; }
.ynp-pet-act[data-act="pet"] span { color: #c98fa2; }
.ynp-pet-act[data-act="toy"] span { color: #a394d6; }

.ynp-pet-fish { font-size: 11.5px; color: var(--ynp-muted); text-align: center; margin: 0 0 12px; }
.ynp-pet-fish b { font-family: var(--ynp-en); font-size: 13px; color: #d2a06e; }
.ynp-pet-fish small { display: block; color: var(--ynp-faint); font-size: 10.5px; margin-top: 3px; }

/* ---------- 当前角色也在养 ---------- */
.ynp-pet-yn { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.ynp-pet-yn img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: var(--ynp-soft-sh-sm); }
.ynp-pet-yn .tx { min-width: 0; }
.ynp-pet-yn b { display: block; font-size: 13.5px; color: var(--ynp-ink-2); }
.ynp-pet-yn span { display: block; font-size: 11.5px; color: var(--ynp-muted); margin-top: 3px; line-height: 1.45; }
.ynp-pet-yn.show { background: linear-gradient(120deg, rgba(250,238,244,.86), rgba(238,242,250,.86)); }
.ynp-pet-yn.show span { color: #a2789a; }

/* ---------- 满级一句话 ---------- */
.ynp-pet-vow { padding: 12px 14px; cursor: pointer; opacity: .62; }
.ynp-pet-vow .hd { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ynp-ink-2); }
.ynp-pet-vow .hd svg { width: 15px; height: 15px; color: #d9b2c4; flex: 0 0 auto; }
.ynp-pet-vow .hd small { margin-left: auto; font-size: 10.5px; color: var(--ynp-faint); font-weight: 400; }
.ynp-pet-vow p { margin: 8px 0 0; font-size: 12.5px; color: var(--ynp-muted); line-height: 1.7; filter: blur(3.4px); user-select: none; }
.ynp-pet-vow.ready { opacity: 1; background: linear-gradient(125deg, rgba(250,236,243,.9), rgba(234,238,250,.9)); }
.ynp-pet-vow.ready .hd svg { color: #e2809f; animation: ynppet-beat 1.5s ease-in-out infinite; }
@keyframes ynppet-beat { 0%,100% { transform: scale(1) } 30% { transform: scale(1.22) } 55% { transform: scale(1) } }
.ynp-pet-vow.ready.open p { filter: none; color: #8d6f86; font-size: 13.5px; }

/* ---------- 最近的小事 ---------- */
.ynp-pet-log { padding: 12px 14px 8px; }
.ynp-pet-log .hd { font-size: 12.5px; font-weight: 700; color: var(--ynp-ink-2); margin-bottom: 8px; }
.ynp-pet-log .row { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--ynp-hair); font-size: 11.5px; }
.ynp-pet-log .hd + .row { border-top: 0; }
.ynp-pet-log em { font-style: normal; font-family: var(--ynp-en); color: var(--ynp-faint); flex: 0 0 auto; }
.ynp-pet-log span { color: var(--ynp-muted); line-height: 1.5; }

/* ---------- 领养页 ---------- */
.ynp-pet-adopt { padding: 16px 14px 28px; }
.ynp-pet-ad-hd { text-align: center; margin-bottom: 16px; }
.ynp-pet-ad-hd b { font-size: 19px; font-weight: 800; color: var(--ynp-ink-2); letter-spacing: 1px; }
.ynp-pet-ad-hd p { margin: 8px 0 0; font-size: 12px; color: var(--ynp-muted); line-height: 1.8; }
.ynp-pet-ad-hd small { color: var(--ynp-faint); font-size: 11px; }
.ynp-pet-skins { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 14px; }
.ynp-pet-skin {
  text-align: center; padding: 10px 5px 11px; cursor: pointer; border-radius: 18px;
  background: var(--ynp-glass-2); border: 1.5px solid rgba(255,255,255,.66);
  box-shadow: var(--ynp-soft-sh-sm); transition: transform .18s var(--ynp-ease), border-color .18s;
}
.ynp-pet-skin .pic { height: 62px; }
.ynp-pet-face { width: 100%; height: 100%; }
.ynp-pet-skin b { display: block; font-size: 12.5px; color: var(--ynp-ink-2); margin-top: 4px; }
.ynp-pet-skin small { display: block; font-size: 10px; color: var(--ynp-faint); line-height: 1.4; margin-top: 3px; }
.ynp-pet-skin:active { transform: scale(.95); }
.ynp-pet-skin.on { border-color: rgba(226,160,190,.7); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(190,160,185,.26), var(--ynp-soft-sh-sm); }
.ynp-pet-skin.on .ynp-pet-face { animation: ynppet-pick .5s var(--spring-bouncy); }
@keyframes ynppet-pick { 0% { transform: scale(1) } 45% { transform: scale(1.12) rotate(-4deg) } 100% { transform: scale(1) } }

.ynp-pet-namebox { padding: 13px 14px 14px; }
.ynp-pet-namebox .hd { font-size: 12.5px; font-weight: 700; color: var(--ynp-ink-2); margin-bottom: 9px; }
.ynp-pet-input {
  width: 100%; box-sizing: border-box; font-family: var(--ynp-font); font-size: 14px; color: var(--ynp-ink-2);
  background: rgba(255,255,255,.72); border: 1px solid var(--ynp-hair); border-radius: 13px;
  padding: 9px 12px; outline: none; box-shadow: inset 2px 2px 6px rgba(150,170,200,.14);
}
.ynp-pet-input:focus { border-color: rgba(200,180,200,.7); }
.ynp-pet-namebox .tips { display: flex; gap: 7px; margin-top: 9px; }
.ynp-pet-namebox .tips span {
  font-size: 11.5px; color: var(--ynp-muted); cursor: pointer;
  background: rgba(255,255,255,.6); border: 1px solid var(--ynp-hair); border-radius: 999px; padding: 4px 11px;
}
.ynp-pet-namebox .tips span:active { transform: scale(.94); }
.ynp-pet-adopt-btn {
  display: block; width: 100%; margin-top: 4px; cursor: pointer;
  font-family: var(--ynp-font); font-size: 14.5px; font-weight: 700; color: #6b5164;
  background: linear-gradient(120deg,#fbe6ee,#e6ecfa 62%,#efe8f8);
  border: 1px solid rgba(255,255,255,.75); border-radius: 18px; padding: 13px;
  box-shadow: var(--ynp-soft-sh); transition: transform .16s var(--ynp-ease);
}
.ynp-pet-adopt-btn:active { transform: scale(.97); }

/* ---------- 改名弹层 ---------- */
.ynp-pet-mask {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(60,70,90,.28); backdrop-filter: blur(4px); animation: ynppet-fade .18s ease-out;
}
.ynp-pet-mask.closing { animation: ynppet-fade .18s ease-in reverse; }
@keyframes ynppet-fade { from { opacity: 0 } to { opacity: 1 } }
.ynp-pet-sheet {
  width: 78%; background: rgba(255,255,255,.9); backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.8); border-radius: 22px; padding: 16px 16px 14px;
  box-shadow: 0 18px 40px rgba(110,130,165,.3); animation: ynppet-rise .26s var(--spring-bouncy);
}
@keyframes ynppet-rise { from { opacity: 0; transform: translateY(16px) scale(.94) } to { opacity: 1; transform: none } }
.ynp-pet-sh-t { font-size: 14px; font-weight: 700; color: var(--ynp-ink-2); margin-bottom: 10px; text-align: center; }
.ynp-pet-sh-btns { display: flex; gap: 9px; margin-top: 13px; }
.ynp-pet-sh-btns button {
  flex: 1; font-family: var(--ynp-font); font-size: 13.5px; cursor: pointer; padding: 10px;
  border: 1px solid var(--ynp-hair); border-radius: 14px; background: rgba(255,255,255,.7); color: var(--ynp-muted);
}
.ynp-pet-sh-btns button.ok { background: linear-gradient(120deg,#fbe6ee,#e6ecfa); color: #6b5164; font-weight: 700; border-color: rgba(255,255,255,.8); }
.ynp-pet-sh-btns button:active { transform: scale(.96); }

/* ---------- 深色壁纸下的底色（跟随主干 prefers-color-scheme 变量） ---------- */
@media (prefers-color-scheme: dark) {
  .ynp-app-page.ynp-pet {
    background:
      radial-gradient(62% 40% at 20% 8%, rgba(58,52,44,.9), transparent 70%),
      radial-gradient(58% 42% at 88% 22%, rgba(40,48,62,.9), transparent 72%),
      #1b1f27;
  }
  .ynp-pet .ynp-navbar { background: rgba(27,31,39,.82); border-bottom-color: rgba(255,255,255,.07); }
  .ynp-pet-adopt-btn, .ynp-pet-sh-btns button.ok { background: linear-gradient(120deg,#3b3340,#2c3446); color: #e6dbe6; }
  .ynp-pet-sheet { background: rgba(38,44,56,.92); }
}

/* ---------- 减弱动画偏好：常驻微动画全停，交互反馈保留 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ynp-pet-body, .ynp-pet-tail, .ynp-pet-open, .ynp-pet-cat.pose-walk,
  .pose-walk .ynp-pet-legs rect, .ynp-pet-bar.low, .ynp-pet-vow.ready .hd svg { animation: none; }
  .ynp-pet-wand { transition: none; }
}

/* ==================== 功能: express ==================== */
/* ============================================================
   express · 菜鸟快递 —— 克制的暖白纸感（牛皮纸/瓦楞纸的包裹质感），
   不用菜鸟橙铺面：底色 #f5f2ee 暖白，强调色 #c08552 只落在取件码/包裹块/当前节点上，
   其余仍走清露白的 --ynp-ink / --ynp-muted / --ynp-hair。类名前缀 .ynp-ex-
   ============================================================ */

.ynp-app-page.ynp-ex { background: #f5f2ee; }
.ynp-app-page.ynp-ex .ynp-navbar { background: rgba(245, 242, 238, .84); }
.ynp-ex-home, .ynp-ex-detail { padding: 12px 14px 26px; }

/* ---------- 首页 · 驿站抬头 ---------- */
.ynp-ex-hero {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; margin-bottom: 10px;
  border-radius: 20px; background: linear-gradient(160deg, #fffdfa, #f7f1e8);
  border: 1px solid rgba(200, 178, 148, .3);
  box-shadow: 6px 6px 16px rgba(178, 158, 132, .16), -5px -5px 14px rgba(255, 255, 255, .8);
}
.ynp-ex-hero-ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; color: #b57c4b;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(200, 178, 148, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.ynp-ex-hero-ic svg { width: 23px; height: 23px; }
.ynp-ex-hero-tx { flex: 1; min-width: 0; }
.ynp-ex-hero-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: .2px; }
.ynp-ex-hero-tx small { display: block; margin-top: 3px; font-size: 11px; color: var(--ynp-muted); }
.ynp-ex-hero-n { flex: 0 0 auto; text-align: center; padding-left: 12px; border-left: 1px dashed rgba(190, 168, 138, .5); }
.ynp-ex-hero-n b { display: block; font-size: 22px; font-weight: 800; color: #b57c4b; font-variant-numeric: tabular-nums; line-height: 1; }
.ynp-ex-hero-n span { font-size: 10.5px; color: var(--ynp-muted); }

/* 绑定说明条 */
.ynp-ex-bind {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; margin-bottom: 14px;
  border-radius: 15px; background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--ynp-soft-sh-sm);
}
.ynp-ex-bav { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ynp-ex-bind p { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ynp-muted); }

/* ---------- 首页 · 分组标题 ---------- */
.ynp-ex-sec { display: flex; align-items: baseline; gap: 7px; padding: 12px 4px 8px; }
.ynp-ex-sec span { font-size: 12.5px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: .5px; }
.ynp-ex-sec i {
  font-style: normal; font-size: 10px; font-weight: 700; color: #b57c4b;
  padding: 1px 6px; border-radius: 8px; background: rgba(197, 152, 106, .16);
}
.ynp-ex-sec em { font-style: normal; margin-left: auto; font-size: 10.5px; color: var(--ynp-faint); }

/* ---------- 首页 · 包裹卡（纸箱质感：暖白底 + 左侧胶带色条 + 瓦楞细纹） ---------- */
.ynp-ex-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px 14px 13px 17px; margin-bottom: 10px; border-radius: 18px; cursor: pointer;
  background: #fffdfa; border: 1px solid rgba(198, 180, 156, .26); overflow: hidden;
  box-shadow: 0 3px 14px rgba(170, 150, 124, .13);
  transition: transform .15s var(--ynp-ease), box-shadow .2s var(--ynp-ease);
}
.ynp-ex-card:active { transform: scale(.975); box-shadow: 0 1px 6px rgba(170, 150, 124, .16); }
.ynp-ex-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.ynp-ex-card.yn::before { background: linear-gradient(180deg, #e6bd8e, #cf9a63); }   /* TA的：暖杏胶带 */
.ynp-ex-card.me::before { background: linear-gradient(180deg, #a9bdd6, #7f9bbd); }   /* 你的：雾蓝胶带 */
.ynp-ex-card.off { opacity: .62; }

.ynp-ex-box {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, #e0b183, #c08552);
  box-shadow: 0 4px 10px rgba(180, 130, 80, .26), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.ynp-ex-card.me .ynp-ex-box { background: linear-gradient(150deg, #a6bcd8, #7b98bd); box-shadow: 0 4px 10px rgba(110, 140, 175, .26), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ynp-ex-box svg { width: 24px; height: 24px; }

.ynp-ex-tx { flex: 1; min-width: 0; }
.ynp-ex-item { font-size: 13.5px; font-weight: 650; color: var(--ynp-ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-ex-shop { margin-top: 3px; font-size: 10.5px; color: var(--ynp-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-ex-foot { margin-top: 5px; font-size: 11px; }
.ynp-ex-cd { color: var(--ynp-muted); }
.ynp-ex-cd b { color: #b57c4b; font-size: 12.5px; font-weight: 800; letter-spacing: .8px; font-variant-numeric: tabular-nums; }
.ynp-ex-road { color: var(--ynp-faint); }
.ynp-ex-done { color: var(--ynp-faint); }

.ynp-ex-tag {
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px;
}
.ynp-ex-tag.t0 { color: #7c8ca3; background: rgba(124, 140, 163, .12); }
.ynp-ex-tag.t1 { color: #b06f38; background: rgba(198, 140, 78, .16); }
.ynp-ex-tag.t2 { color: #8fa08b; background: rgba(143, 160, 139, .16); }

/* ---------- 详情 · 取件码票据（撕口 + 两侧半圆缺口，仿快递单） ---------- */
.ynp-ex-ticket {
  position: relative; padding: 16px 18px 14px; margin-bottom: 14px; border-radius: 20px;
  background: linear-gradient(165deg, #fffefb, #f8f2e9);
  border: 1px solid rgba(200, 178, 148, .3);
  box-shadow: 0 6px 20px rgba(175, 152, 122, .17), inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
}
.ynp-ex-ticket::after {   /* 右上角淡淡的邮戳圈 */
  content: ''; position: absolute; right: -26px; top: -26px; width: 92px; height: 92px;
  border-radius: 50%; border: 1.5px dashed rgba(197, 152, 106, .22); pointer-events: none;
}
.ynp-ex-tk-h { display: flex; align-items: baseline; gap: 8px; }
.ynp-ex-tk-h span { font-size: 11.5px; font-weight: 700; color: var(--ynp-ink); letter-spacing: .3px; }
.ynp-ex-tk-h em { font-style: normal; margin-left: auto; font-size: 10px; color: var(--ynp-faint); }
.ynp-ex-tk-lb { margin-top: 14px; font-size: 10.5px; color: var(--ynp-muted); letter-spacing: 2px; }
.ynp-ex-tk-code {
  margin-top: 2px; font-size: 34px; font-weight: 800; letter-spacing: 3px; line-height: 1.15;
  color: #b06f38; font-family: var(--ynp-en); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.ynp-ex-tk-code.wait { color: #c6bcae; font-size: 26px; letter-spacing: 6px; }

/* 撕口：横向虚线 + 两端半圆缺口（缺口色 = 页面底色） */
.ynp-ex-tk-rip { position: relative; height: 1px; margin: 15px -18px 13px; border-top: 1.5px dashed rgba(190, 168, 138, .55); }
.ynp-ex-tk-rip::before, .ynp-ex-tk-rip::after {
  content: ''; position: absolute; top: -8px; width: 15px; height: 15px; border-radius: 50%;
  background: #f5f2ee; box-shadow: inset 0 0 0 1px rgba(200, 178, 148, .28);
}
.ynp-ex-tk-rip::before { left: -8px; }
.ynp-ex-tk-rip::after { right: -8px; }
.ynp-ex-tk-f b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ynp-ink-2); line-height: 1.4; }
.ynp-ex-tk-f small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ynp-faint); }

/* ---------- 详情 · 按钮区 ---------- */
.ynp-ex-act { margin-bottom: 14px; }
.ynp-ex-btns { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ynp-ex-btn {
  flex: 1 1 auto; min-width: 128px; padding: 12px 16px; border: 0; cursor: pointer;
  border-radius: 15px; font-size: 13.5px; font-weight: 700; font-family: var(--ynp-font); color: #fff;
  background: linear-gradient(150deg, #4f5c70, #3b4657);
  box-shadow: 0 5px 15px rgba(60, 75, 96, .26);
  transition: transform .14s var(--ynp-ease), box-shadow .2s var(--ynp-ease);
}
.ynp-ex-btn:active { transform: scale(.965); box-shadow: 0 2px 8px rgba(60, 75, 96, .22); }
.ynp-ex-btn2 {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 11px 14px; border-radius: 15px; font-size: 12.5px; font-weight: 650; font-family: var(--ynp-font);
  color: #b06f38; background: rgba(255, 255, 255, .8); border: 1px solid rgba(197, 152, 106, .38);
  box-shadow: 0 3px 10px rgba(175, 152, 122, .14);
  transition: transform .14s var(--ynp-ease);
}
.ynp-ex-btn2:active { transform: scale(.95); }
.ynp-ex-btn2 svg { width: 15px; height: 15px; }
.ynp-ex-pickedby { flex: 0 0 auto; font-size: 11px; color: var(--ynp-faint); }
.ynp-ex-hint {
  padding: 11px 14px; border-radius: 14px; font-size: 12px; color: var(--ynp-muted);
  background: rgba(255, 255, 255, .6); border: 1px dashed rgba(190, 168, 138, .45); text-align: center;
}

/* ---------- 详情 · 白卡通用块 ---------- */
.ynp-ex-block {
  padding: 14px 16px 12px; margin-bottom: 12px; border-radius: 18px;
  background: #fffdfa; border: 1px solid rgba(198, 180, 156, .24);
  box-shadow: 0 3px 14px rgba(170, 150, 124, .11);
}
.ynp-ex-bt { font-size: 12px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: .5px; margin-bottom: 10px; }

/* ---------- 详情 · 物流时间轴（细线 + 圆点，最新一条高亮） ---------- */
.ynp-ex-tl-row { display: flex; gap: 11px; }
.ynp-ex-tl-ax { position: relative; flex: 0 0 auto; width: 12px; }
.ynp-ex-tl-ax::before {   /* 竖细线 */
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 1.5px;
  background: rgba(190, 172, 148, .38);
}
.ynp-ex-tl-row.on .ynp-ex-tl-ax::before { top: 9px; }
.ynp-ex-tl-row.last .ynp-ex-tl-ax::before { bottom: auto; height: 9px; }
.ynp-ex-tl-ax i {
  position: absolute; left: 2px; top: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: #fffdfa; box-shadow: inset 0 0 0 1.6px rgba(178, 160, 136, .6);
}
.ynp-ex-tl-row.on .ynp-ex-tl-ax i {
  left: 0; top: 3px; width: 11px; height: 11px; background: #c08552; box-shadow: none;
  outline: 3px solid rgba(197, 152, 106, .18);
  animation: ynpExPulse 2.4s ease-in-out infinite;
}
@keyframes ynpExPulse { 0%, 100% { outline-color: rgba(197, 152, 106, .16); } 50% { outline-color: rgba(197, 152, 106, .34); } }
.ynp-ex-tl-tx { flex: 1; min-width: 0; padding-bottom: 15px; }
.ynp-ex-tl-tx p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ynp-muted); }
.ynp-ex-tl-tx time { display: block; margin-top: 3px; font-size: 10px; color: var(--ynp-faint); font-variant-numeric: tabular-nums; }
.ynp-ex-tl-row.on .ynp-ex-tl-tx p { color: var(--ynp-ink-2); font-weight: 600; }
.ynp-ex-tl-row.last .ynp-ex-tl-tx { padding-bottom: 0; }
.ynp-ex-tl-empty { font-size: 12px; color: var(--ynp-faint); padding: 6px 0 4px; }

/* ---------- 详情 · 拆箱评价 ---------- */
.ynp-ex-rv { display: flex; gap: 9px; margin-bottom: 9px; }
.ynp-ex-rav { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ynp-ex-rb {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 4px 14px 14px 14px;
  background: rgba(240, 243, 247, .8); border: 1px solid rgba(255, 255, 255, .7);
}
.ynp-ex-rv.yn .ynp-ex-rb { background: linear-gradient(150deg, rgba(250, 240, 228, .95), rgba(245, 232, 216, .9)); border-color: rgba(215, 190, 158, .4); }
.ynp-ex-rb b { display: block; font-size: 10.5px; font-weight: 700; color: var(--ynp-faint); margin-bottom: 3px; }
.ynp-ex-rb p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ynp-ink); word-break: break-word; }
.ynp-ex-rb time { display: block; margin-top: 4px; font-size: 9.5px; color: var(--ynp-faint); }
.ynp-ex-rnote { font-size: 10.5px; color: var(--ynp-faint); padding-top: 2px; }
.ynp-ex-rwait { font-size: 11px; color: var(--ynp-faint); padding: 4px 0 6px; }
.ynp-ex-rwait::after { content: '…'; animation: ynpExDots 1.4s steps(4) infinite; }
@keyframes ynpExDots { 0% { content: '·'; } 33% { content: '··'; } 66% { content: '···'; } }

.ynp-ex-input { display: flex; align-items: flex-end; gap: 8px; }
.ynp-ex-input textarea {
  flex: 1; min-width: 0; resize: none; max-height: 74px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid rgba(198, 180, 156, .4);
  background: rgba(255, 255, 255, .9); font-family: var(--ynp-font);
  font-size: 12.5px; line-height: 1.5; color: var(--ynp-ink); outline: none;
  transition: border-color .2s var(--ynp-ease), box-shadow .2s var(--ynp-ease);
}
.ynp-ex-input textarea::placeholder { color: var(--ynp-faint); }
.ynp-ex-input textarea:focus { border-color: rgba(197, 152, 106, .7); box-shadow: 0 0 0 3px rgba(197, 152, 106, .13); }
.ynp-ex-send {
  flex: 0 0 auto; padding: 10px 15px; border: 0; cursor: pointer; border-radius: 14px;
  font-size: 12.5px; font-weight: 700; font-family: var(--ynp-font); color: #fff;
  background: linear-gradient(150deg, #d09a63, #b47a45);
  box-shadow: 0 4px 12px rgba(180, 130, 80, .26);
  transition: transform .14s var(--ynp-ease);
}
.ynp-ex-send:active { transform: scale(.94); }

/* ---------- ＋面板格子 / 聊天卡片皮肤 ---------- */
.ynp-plus-ico.ynp-ex-i { color: #b57c4b; }
.ynp-link-k-express { background: linear-gradient(150deg, #e0b183, #c08552); }

/* ---------- 「叫TA代取」底部 sheet ---------- */
.ynp-ex-sheet { position: absolute; inset: 0; z-index: 52; }
.ynp-ex-mask { position: absolute; inset: 0; background: rgba(38, 32, 26, .34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ynp-fade .2s var(--ynp-ease); }
.ynp-ex-panel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px 26px;
  border-radius: 22px 22px 0 0; background: rgba(252, 249, 244, .95);
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 -12px 38px rgba(120, 100, 78, .2);
  animation: ynpExUp .32s var(--spring-bouncy, var(--ynp-ease)) both;
}
@keyframes ynpExUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ynp-ex-ph { font-size: 15px; font-weight: 700; color: var(--ynp-ink); padding: 0 4px 12px; }
.ynp-ex-ph span { font-size: 11px; font-weight: 500; color: var(--ynp-muted); margin-left: 8px; }
.ynp-ex-plist { max-height: 250px; overflow-y: auto; scrollbar-width: none; }
.ynp-ex-plist::-webkit-scrollbar { width: 0; }
.ynp-ex-prow {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  border-radius: 15px; background: #fffdfa; border: 1px solid rgba(198, 180, 156, .26);
  box-shadow: 0 2px 9px rgba(170, 150, 124, .1);
  transition: transform .14s var(--ynp-ease);
}
.ynp-ex-prow:active { transform: scale(.97); }
.ynp-ex-pbox {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #a6bcd8, #7b98bd);
}
.ynp-ex-pbox svg { width: 19px; height: 19px; }
.ynp-ex-ptx { flex: 1; min-width: 0; }
.ynp-ex-ptx b { display: block; font-size: 12.5px; font-weight: 650; color: var(--ynp-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-ex-ptx small { display: block; margin-top: 2px; font-size: 10px; color: var(--ynp-faint); }
.ynp-ex-pcode { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: #b06f38; letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.ynp-ex-pempty { text-align: center; font-size: 12px; line-height: 1.9; color: var(--ynp-muted); padding: 26px 10px 20px; }

/* ---------- 减动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ynp-ex-panel { animation-duration: .1s; }
  .ynp-ex-tl-row.on .ynp-ex-tl-ax i, .ynp-ex-rwait::after { animation: none; }
}

/* ==================== 功能: home ==================== */
/* ==================== 功能: calendar ==================== */
/* ===日历 calendar（清露白 iOS 极简月历,类名前缀 ynp-cld-,追加到 style.css 末尾）=== */

.ynp-cld { padding: 12px 14px 8px; }

/* 顶部:年月大标题 + 翻月/回今天 */
.ynp-cld-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; }
.ynp-cld-title { font-size: 19px; font-weight: 800; color: var(--ynp-ink-2); letter-spacing: .4px; }
.ynp-cld-nav { display: flex; gap: 8px; align-items: center; }
.ynp-cld-nav-btn {
  min-width: 30px; height: 30px; padding: 0 9px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--ynp-tile); border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--ynp-soft-sh-sm); color: var(--ynp-icon); cursor: pointer;
  font-size: 12px; font-weight: 600; transition: transform .14s var(--ynp-ease);
}
.ynp-cld-nav-btn:active { transform: scale(.9); }
.ynp-cld-nav-btn svg { width: 16px; height: 16px; }
.ynp-cld-nav-btn.flip svg { transform: rotate(180deg); }
.ynp-cld-nav-btn.today { color: var(--ynp-ink); }

/* 月历玻璃卡:星期行 + 7列网格 */
.ynp-cld-card {
  border-radius: 22px; padding: 10px 6px 8px;
  background: var(--ynp-glass); backdrop-filter: blur(26px) saturate(115%); -webkit-backdrop-filter: blur(26px) saturate(115%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh);
}
.ynp-cld-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.ynp-cld-week span { text-align: center; font-size: 11px; color: var(--ynp-faint); font-weight: 600; }
.ynp-cld-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }

/* 日期格:数字圆 + 底部事件点;今天=蓝实心,选中=细圈,周年=粉高亮 */
.ynp-cld-cell {
  position: relative; height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; cursor: pointer; border-radius: 14px;
}
.ynp-cld-cell.pad { cursor: default; }
.ynp-cld-cell b {
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: var(--ynp-ink); border-radius: 50%;
  font-family: var(--ynp-en); transition: transform .14s var(--ynp-ease);
}
.ynp-cld-cell:not(.pad):active b { transform: scale(.86); }
.ynp-cld-cell.wknd b { color: var(--ynp-muted); }
.ynp-cld-cell.now b { background: #8fb0d4; color: #fff; box-shadow: 0 3px 8px rgba(110,140,180,.4); }
.ynp-cld-cell.sel:not(.now) b { box-shadow: inset 0 0 0 1.6px #8fb0d4; background: rgba(255,255,255,.66); }
.ynp-cld-cell.sel.now b { box-shadow: 0 0 0 2.5px rgba(143,176,212,.32), 0 3px 8px rgba(110,140,180,.4); }
/* 周年 anniv=常亮粉圈;每月对应日 love 只靠小爱心点,不抢今天/选中态 */
.ynp-cld-cell.anniv b { background: rgba(232,168,183,.2); box-shadow: inset 0 0 0 1.6px #e3a8b7; color: #c26a80; }
.ynp-cld-cell.anniv.now b { background: #e3a8b7; color: #fff; box-shadow: 0 3px 8px rgba(200,140,160,.45); }
.ynp-cld-cell.anniv.sel:not(.now) b { box-shadow: inset 0 0 0 1.6px #e3a8b7, 0 0 0 2.5px rgba(227,168,183,.3); }

/* 事件点行:固定高度占位,没事件也不跳版 */
.ynp-cld-dots { height: 6px; display: flex; gap: 3px; align-items: center; }
.ynp-cld-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; display: block; }
.ynp-cld-heart { font-size: 8.5px; line-height: 6px; color: #e3a8b7; font-style: normal; }

/* 当日详情玻璃卡 */
.ynp-cld-day {
  margin-top: 14px; border-radius: 20px; padding: 14px 14px 10px;
  background: var(--ynp-glass-2); backdrop-filter: blur(24px) saturate(115%); -webkit-backdrop-filter: blur(24px) saturate(115%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ynp-soft-sh);
}
.ynp-cld-day-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ynp-cld-day-head b { font-size: 15px; color: var(--ynp-ink-2); }
.ynp-cld-day-head span { font-size: 11.5px; color: var(--ynp-muted); }
.ynp-cld-day-head .tag { margin-left: auto; font-size: 10.5px; color: #fff; background: #8fb0d4; border-radius: 8px; padding: 2px 8px; }

.ynp-cld-ev { display: flex; align-items: center; gap: 9px; padding: 9px 4px; border-bottom: 1px solid var(--ynp-hair); }
.ynp-cld-ev:last-of-type { border-bottom: none; }
.ynp-cld-ev-bar { width: 3.5px; height: 30px; border-radius: 2px; flex: 0 0 auto; }
.ynp-cld-ev-chip { font-size: 15px; flex: 0 0 auto; }
.ynp-cld-ev-tx { flex: 1; min-width: 0; }
.ynp-cld-ev-tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ynp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-cld-ev-tx small { font-size: 11px; color: var(--ynp-faint); }
.ynp-cld-ev-del {
  width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  color: var(--ynp-faint); cursor: pointer; transition: transform .14s var(--ynp-ease);
}
.ynp-cld-ev-del:active { transform: scale(.82); }
.ynp-cld-ev-del svg { width: 14px; height: 14px; }
.ynp-cld-empty { text-align: center; color: var(--ynp-faint); font-size: 12.5px; padding: 16px 0 12px; }
.ynp-cld-add {
  margin-top: 6px; text-align: center; padding: 10px; border-radius: 14px; cursor: pointer;
  color: #6f87a8; font-size: 13px; font-weight: 600; background: rgba(143,176,212,.12);
  transition: transform .14s var(--ynp-ease);
}
.ynp-cld-add:active { transform: scale(.96); }

/* 添加事件底部弹层(z=30：盖内容，让 toast(60) 冒头) */
.ynp-cld-sheet {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end;
  background: rgba(70,90,120,.28); backdrop-filter: blur(3px); animation: ynp-fade .18s var(--ease-out-quart);
}
.ynp-cld-sheet-card {
  width: 100%; border-radius: 22px 22px 0 0; padding: 18px 18px 24px;
  background: rgba(250,252,255,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 -12px 34px rgba(110,135,175,.3); animation: ynp-cld-up .26s var(--ynp-ease);
}
@keyframes ynp-cld-up { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
.ynp-cld-sheet-title { text-align: center; font-size: 14px; font-weight: 700; color: var(--ynp-ink-2); margin-bottom: 12px; }
.ynp-cld-sheet-inp {
  width: 100%; border: none; outline: none; border-radius: 13px; padding: 11px 13px;
  background: rgba(150,170,200,.12); font-size: 14px; color: var(--ynp-ink); font-family: inherit;
}
.ynp-cld-sheet-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ynp-cld-type {
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 0;
  border-radius: 12px; border: 1px solid var(--ynp-hair); background: rgba(255,255,255,.7);
  color: var(--ynp-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: transform .14s var(--ynp-ease);
}
.ynp-cld-type:active { transform: scale(.94); }
.ynp-cld-type i { width: 7px; height: 7px; border-radius: 50%; }
.ynp-cld-type.cur { background: #8fb0d4; border-color: #8fb0d4; color: #fff; }
.ynp-cld-type.cur i { outline: 2px solid rgba(255,255,255,.7); }
.ynp-cld-sheet-note { font-size: 11px; color: var(--ynp-faint); margin: 8px 2px 0; }
.ynp-cld-sheet-ok {
  display: block; width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 14px;
  background: #8fb0d4; color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 16px rgba(120,150,190,.35); transition: transform .14s var(--ynp-ease);
}
.ynp-cld-sheet-ok:active { transform: scale(.97); }
.ynp-cld-sheet-cancel {
  display: block; width: 100%; margin-top: 8px; padding: 10px; border: none; background: transparent;
  color: var(--ynp-muted); font-size: 13px; cursor: pointer; font-family: inherit;
}

/* ==================== 功能: ledger ==================== */
/* ledger 记账 · 清露白白卡 + 分类色点（.ynpb-*）：月度总览卡 / 按日流水 / 记一笔 sheet / 条目详情弹层 */

.ynpb-wrap { padding: 14px 16px 26px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- 月度总览卡 ---------- */
.ynpb-hero { background: var(--ynp-glass-2); border: 1px solid var(--ynp-hair); border-radius: 20px; box-shadow: var(--ynp-soft-sh-sm); padding: 14px 18px 16px; backdrop-filter: blur(10px); }
.ynpb-mnav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.ynpb-mnav b { font-size: 14px; font-weight: 600; color: var(--ynp-ink-2); min-width: 68px; text-align: center; }
.ynpb-mnav .ar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); cursor: pointer; transition: transform .15s var(--ynp-ease), background .15s; }
.ynpb-mnav .ar:active { transform: scale(.86); background: var(--ynp-hair); }
.ynpb-mnav .ar.off { opacity: .22; pointer-events: none; }
.ynpb-mnav .ar svg { width: 15px; height: 15px; }
.ynpb-mnav .ar.r svg { transform: scaleX(-1); }
.ynpb-label { text-align: center; font-size: 11.5px; color: var(--ynp-muted); letter-spacing: 2px; }
.ynpb-big { text-align: center; font-family: var(--ynp-en); font-size: 34px; font-weight: 700; color: var(--ynp-ink-2); margin: 2px 0; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.ynpb-big small { font-size: 17px; font-weight: 600; margin-right: 2px; }
.ynpb-sub { text-align: center; font-size: 11px; color: var(--ynp-faint); margin-bottom: 12px; }
.ynpb-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--ynp-hair); }
.ynpb-bar i { display: block; height: 100%; min-width: 3px; transition: width .4s var(--ynp-ease); }
.ynpb-bar i + i { margin-left: 2px; }
.ynpb-leg { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ynpb-leg-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ynp-ink); }
.ynpb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ynpb-leg-row .n { flex: 1; }
.ynpb-leg-row .a { font-family: var(--ynp-en); font-weight: 600; color: var(--ynp-ink-2); font-variant-numeric: tabular-nums; }
.ynpb-leg-row .p { width: 40px; text-align: right; font-size: 11px; color: var(--ynp-faint); font-variant-numeric: tabular-nums; }

/* ---------- 按日分组流水 ---------- */
.ynpb-day-h { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 7px; font-size: 11.5px; color: var(--ynp-muted); }
.ynpb-day-h b { font-weight: 600; font-size: 12.5px; color: var(--ynp-ink); }
.ynpb-day-h span { font-family: var(--ynp-en); font-variant-numeric: tabular-nums; }
.ynpb-card { background: var(--ynp-glass-2); border: 1px solid var(--ynp-hair); border-radius: 18px; box-shadow: var(--ynp-soft-sh-sm); overflow: hidden; }
.ynpb-it { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; transition: background .15s; }
.ynpb-it:active { background: var(--ynp-hair); }
.ynpb-it + .ynpb-it { border-top: 1px solid var(--ynp-hair); }
.ynpb-it-ic { width: 34px; height: 34px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; }
.ynpb-it-ic svg { width: 18px; height: 18px; }
.ynpb-it-m { flex: 1; min-width: 0; }
.ynpb-it-n { font-size: 13px; color: var(--ynp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynpb-it-s { font-size: 10.5px; color: var(--ynp-faint); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.ynpb-auto { font-size: 9px; color: var(--ynp-faint); border: 1px solid var(--ynp-hair); border-radius: 5px; padding: 0 4px; line-height: 1.5; }
.ynpb-it-a { font-family: var(--ynp-en); font-size: 14px; font-weight: 600; color: var(--ynp-ink-2); font-variant-numeric: tabular-nums; }

/* ---------- 空态大按钮 ---------- */
.ynpb-addbig { align-self: center; margin-top: 2px; border: 1px solid var(--ynp-hair); background: var(--ynp-glass-2); box-shadow: var(--ynp-soft-sh-sm); color: var(--ynp-ink); border-radius: 20px; padding: 9px 24px; font-size: 13px; cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynpb-addbig:active { transform: scale(.93); }

/* ---------- 记一笔 · 底部 sheet ---------- */
.ynpb-mask { position: absolute; inset: 0; z-index: 30; background: rgba(30,40,55,.32); backdrop-filter: blur(3px); display: flex; flex-direction: column; justify-content: flex-end; animation: ynp-fade .2s var(--ease-out-quart); }
.ynpb-mask.closing { animation: ynp-fade .18s var(--ease-in-quart) reverse forwards; }
.ynpb-sheet { background: #fdfdfe; border-radius: 18px 18px 0 0; padding: 14px 18px 22px; box-shadow: 0 -10px 30px rgba(60,80,110,.14); animation: ynpb-up .3s var(--ynp-ease); }
.ynpb-mask.closing .ynpb-sheet { animation: ynpb-up .2s var(--ease-in-quart) reverse forwards; }
@keyframes ynpb-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.ynpb-sh-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ynpb-sh-bar .t { font-size: 14px; font-weight: 600; color: #374252; }
.ynpb-sh-bar .x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #77869c; cursor: pointer; }
.ynpb-sh-bar .x svg { width: 16px; height: 16px; }
.ynpb-amt { display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid rgba(120,140,170,.2); padding: 6px 2px 8px; margin-bottom: 13px; }
.ynpb-amt .cur { font-size: 20px; font-weight: 700; color: #374252; font-family: var(--ynp-en); }
.ynpb-amt input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 26px; font-weight: 700; color: #374252; font-family: var(--ynp-en); }
.ynpb-amt input::placeholder { color: #aab4c4; font-weight: 500; }
.ynpb-cats { display: flex; justify-content: space-between; margin-bottom: 13px; }
.ynpb-cat { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 52px; padding: 6px 0; cursor: pointer; border-radius: 12px; transition: transform .15s var(--ynp-ease); }
.ynpb-cat:active { transform: scale(.88); }
.ynpb-cat i { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid transparent; transition: border-color .15s, box-shadow .15s; }
.ynpb-cat i svg { width: 20px; height: 20px; }
.ynpb-cat span { font-size: 10.5px; color: #8592a6; }
.ynpb-cat.on i { border-color: currentColor; box-shadow: 0 0 0 3px rgba(120,150,190,.14); }
.ynpb-cat.on span { color: #374252; font-weight: 600; }
.ynpb-note input { width: 100%; border: none; outline: none; background: rgba(120,140,170,.12); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; color: #495569; margin-bottom: 14px; }
.ynpb-note input::placeholder { color: #aab4c4; }
.ynpb-save { width: 100%; border: none; border-radius: 14px; padding: 11px 0; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #7c95b8, #5c7396); cursor: pointer; transition: transform .15s var(--ynp-ease), filter .15s; }
.ynpb-save:active { transform: scale(.97); filter: brightness(.94); }

/* ---------- 条目详情 · 居中小卡 ---------- */
.ynpb-dmask { position: absolute; inset: 0; z-index: 31; background: rgba(30,40,55,.35); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; animation: ynp-fade .2s var(--ease-out-quart); }
.ynpb-dmask.closing { animation: ynp-fade .16s var(--ease-in-quart) reverse forwards; }
.ynpb-dcard { width: 74%; background: #fdfdfe; border-radius: 20px; padding: 20px 18px 14px; text-align: center; box-shadow: 0 16px 40px rgba(40,60,90,.2); animation: ynpb-pop .3s var(--ynp-ease); }
@keyframes ynpb-pop { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
.ynpb-dic { width: 46px; height: 46px; border-radius: 15px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.ynpb-dic svg { width: 24px; height: 24px; }
.ynpb-damt { font-family: var(--ynp-en); font-size: 26px; font-weight: 700; color: #374252; font-variant-numeric: tabular-nums; }
.ynpb-dmeta { font-size: 13px; color: #495569; margin-top: 4px; word-break: break-all; }
.ynpb-dsub { font-size: 10.5px; color: #aab4c4; margin-top: 4px; }
.ynpb-dbtns { display: flex; gap: 10px; margin-top: 16px; }
.ynpb-dbtns button { flex: 1; border: none; border-radius: 12px; padding: 9px 0; font-size: 13px; cursor: pointer; transition: transform .15s var(--ynp-ease); }
.ynpb-dbtns button:active { transform: scale(.95); }
.ynpb-dbtns .del { background: rgba(207,122,122,.12); color: #c46a6a; }
.ynpb-dbtns .ok { background: linear-gradient(135deg, #7c95b8, #5c7396); color: #fff; font-weight: 600; }

/* ==================== 功能: daily ==================== */
/* 每日提问 dailyq：信纸奶油 + 横格线 + 手写感衬线；TA的问题=歪贴的便签（胶带/印章/随身饰品蝴蝶结），类名前缀 .ynp-dq- */

/* 页面基调：奶油信纸，导航同色掩映 */
.ynp-app-page.ynp-dq { background: #f7f1e4; }
.ynp-app-page.ynp-dq .ynp-navbar { background: rgba(247, 241, 228, .88); border-bottom: 1px solid rgba(150, 130, 90, .14); }
.ynp-dq { --dq-hand: "Kaiti SC", "STKaiti", "KaiTi", "FZKai-Z03S", "Songti SC", "SimSun", Georgia, serif; --dq-line: rgba(125, 156, 196, .22); --dq-ink: #4a5064; }
.ynp-dq-home, .ynp-dq-log { padding: 14px 16px 28px; }

/* 信纸抬头卡：横格线 + 蝴蝶结 + 日期 */
.ynp-dq-letter {
  position: relative; border-radius: 16px; padding: 14px 18px 16px; margin-bottom: 16px;
  background:
    repeating-linear-gradient(180deg, transparent, transparent 26px, var(--dq-line) 26px, var(--dq-line) 27px),
    #fffdf4;
  background-position: 0 12px;
  box-shadow: 0 8px 22px rgba(160, 140, 100, .14), 0 1px 0 rgba(255, 255, 255, .8) inset;
  border: 1px solid rgba(150, 130, 90, .12);
  font-family: var(--dq-hand);
}
.ynp-dq-bow { display: flex; justify-content: center; margin: 0 0 2px; }
.ynp-dq-bow svg { width: 58px; height: 24px; }
.ynp-dq-date { text-align: center; font-size: 12.5px; letter-spacing: 2px; color: #97876c; margin-bottom: 6px; }
.ynp-dq-hello { font-size: 14.5px; line-height: 27px; color: var(--dq-ink); }

/* 空信纸 / 等待态 */
.ynp-dq-wait { text-align: center; font-family: var(--dq-hand); font-size: 13.5px; color: #97876c; line-height: 27px; padding: 8px 0 2px; }
.ynp-dq-wait.busy { animation: ynp-dq-breath 1.6s ease-in-out infinite; }
.ynp-dq-wait.busy::after { content: "✎"; margin-left: 6px; display: inline-block; animation: ynp-dq-pen 1.2s ease-in-out infinite; }
@keyframes ynp-dq-breath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ynp-dq-pen { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(3px, -2px) rotate(-12deg); } }

/* TA的问题 = 歪贴便签：三色轮换 + 顶部半透明胶带 */
.ynp-dq-note {
  position: relative; border-radius: 10px; padding: 16px 14px 12px; margin: 14px 4px 0;
  font-family: var(--dq-hand);
  box-shadow: 0 6px 16px rgba(160, 140, 100, .16);
  transition: transform .18s var(--ynp-ease);
}
.ynp-dq-note.ta { background: #fdf6dc; transform: rotate(-1deg); }
.ynp-dq-note.tb { background: #e9f1fb; transform: rotate(.9deg); }
.ynp-dq-note.tc { background: #fdeee7; transform: rotate(-.5deg); }
.ynp-dq-note::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 58px; height: 15px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(150, 170, 200, .28); border-radius: 2px;
}
.ynp-dq-q { font-size: 14.5px; line-height: 1.75; color: var(--dq-ink); letter-spacing: .3px; }
.ynp-dq-q::before { content: "Q · "; font-size: 11px; color: #b3a184; letter-spacing: 1px; }

/* 回答输入：虚线底格，像在便签上接着写 */
.ynp-dq-ta {
  display: block; width: 100%; margin-top: 10px; padding: 4px 2px 6px;
  background: transparent; border: none; border-bottom: 1.5px dashed rgba(125, 156, 196, .5);
  font-family: var(--dq-hand); font-size: 14px; line-height: 1.7; color: #3d4356;
  resize: none; outline: none;
}
.ynp-dq-ta::placeholder { color: #b9ad93; }
.ynp-dq-ta:focus { border-bottom-color: #7d9cc4; }
.ynp-dq-send {
  display: block; margin: 10px 0 0 auto; padding: 5px 16px; border: none; border-radius: 999px;
  background: #7d9cc4; color: #fff; font-family: var(--dq-hand); font-size: 13px; letter-spacing: 2px;
  cursor: pointer; box-shadow: 0 3px 8px rgba(125, 156, 196, .4);
  transition: transform .16s var(--ynp-ease);
}
.ynp-dq-send:active { transform: scale(.92); }

/* 答完的便签：墨迹回答 + 右上角旋转小印章 */
.ynp-dq-note.done { padding-bottom: 14px; }
.ynp-dq-a { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(150, 130, 90, .25); font-size: 13.5px; line-height: 1.7; color: #5a688a; }
.ynp-dq-a::before { content: "A · "; font-size: 11px; color: #9fb1cd; letter-spacing: 1px; }
.ynp-dq-seal {
  position: absolute; top: 8px; right: 10px; padding: 1px 7px;
  border: 1.5px solid rgba(202, 96, 96, .75); border-radius: 6px; transform: rotate(8deg);
  font-size: 10.5px; letter-spacing: 2px; color: rgba(202, 96, 96, .85); font-family: var(--dq-hand);
}

/* TA的回信：白纸片 + 头像 + 落款 */
.ynp-dq-reply {
  position: relative; margin: 18px 2px 0; padding: 14px 16px 12px 52px; border-radius: 14px;
  background: #fffdf4; border: 1px solid rgba(150, 130, 90, .14);
  box-shadow: 0 8px 20px rgba(160, 140, 100, .15);
  font-family: var(--dq-hand);
}
.ynp-dq-rav { position: absolute; left: 12px; top: 14px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(120, 140, 175, .3); }
.ynp-dq-rtx { font-size: 14px; line-height: 1.85; color: var(--dq-ink); white-space: pre-line; }
.ynp-dq-sign { margin-top: 8px; text-align: right; font-size: 12.5px; color: #97876c; letter-spacing: 1px; }

/* 页脚提示 / 兜底按钮 */
.ynp-dq-foot { text-align: center; padding: 16px 0 4px; font-family: var(--dq-hand); font-size: 12.5px; color: #b3a184; letter-spacing: 1px; }
.ynp-dq-call {
  display: block; margin: 10px auto 0; padding: 8px 26px; border: none; border-radius: 999px;
  background: #7d9cc4; color: #fff; font-family: var(--dq-hand); font-size: 14px; letter-spacing: 3px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(125, 156, 196, .45);
  transition: transform .16s var(--ynp-ease);
}
.ynp-dq-call:active { transform: scale(.93); }

/* 旧信列表：缩小号的信纸片 */
.ynp-dq-old {
  border-radius: 14px; padding: 12px 15px; margin-bottom: 14px;
  background:
    repeating-linear-gradient(180deg, transparent, transparent 24px, var(--dq-line) 24px, var(--dq-line) 25px),
    #fffdf4;
  border: 1px solid rgba(150, 130, 90, .12);
  box-shadow: 0 6px 16px rgba(160, 140, 100, .12);
  font-family: var(--dq-hand);
}
.ynp-dq-old-date { font-size: 12px; letter-spacing: 2px; color: #97876c; margin-bottom: 4px; }
.ynp-dq-old-qa { margin-top: 6px; }
.ynp-dq-old-qa .q { margin: 0; font-size: 13.5px; line-height: 25px; color: var(--dq-ink); }
.ynp-dq-old-qa .q::before { content: "Q "; font-size: 10.5px; color: #b3a184; }
.ynp-dq-old-qa .a { margin: 0; font-size: 13px; line-height: 25px; color: #5a688a; }
.ynp-dq-old-qa .a::before { content: "A "; font-size: 10.5px; color: #9fb1cd; }
.ynp-dq-old-re { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(150, 130, 90, .25); }
.ynp-dq-old-re img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin-top: 2px; }
.ynp-dq-old-re p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--dq-ink); white-space: pre-line; }

/* ==================== 功能: alarm ==================== */
/* alarm 草稿 · 闹钟（iOS 时钟经典黑+橙#ff9f0a+绿拨杆#30d158）+ 当前角色叫醒来电（复用主干 .ynp-call-* 皮，只加 .ynp-alm-* 增量）*/

/* ---------- 闹钟页：整页黑，navbar 深色化 ---------- */
.ynp-app-page.ynp-alm-dark { background: #000; }
.ynp-alm-dark .ynp-navbar { background: rgba(12, 12, 14, .86); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ynp-alm-dark .ynp-nav-title { color: #fff; }
.ynp-alm-dark .ynp-nav-back, .ynp-alm-dark .ynp-nav-action { color: #ff9f0a; }
.ynp-alm-dark .ynp-nav-back:hover { background: rgba(255, 159, 10, .12); }

.ynp-alm-wrap { padding: 2px 16px 10px; }
.ynp-alm-htxt { font-size: 22px; font-weight: 700; color: #fff; padding: 12px 4px 6px; }
.ynp-alm-htxt span { display: block; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .45); margin-top: 3px; }

/* 闹钟行：iOS 大细数字 + 分隔细线 */
.ynp-alm-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px 13px; border-bottom: 1px solid rgba(255, 255, 255, .12); cursor: pointer; transition: background .14s var(--ynp-ease); }
.ynp-alm-row:active { background: rgba(255, 255, 255, .05); }
.ynp-alm-main { flex: 1; min-width: 0; }
.ynp-alm-time { font-size: 46px; font-weight: 200; line-height: 1.08; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .5px; transition: color .18s var(--ynp-ease); }
.ynp-alm-time.off { color: rgba(255, 255, 255, .35); }
.ynp-alm-note { font-size: 13px; color: rgba(255, 255, 255, .55); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* iOS 绿拨杆 */
.ynp-alm-sw { flex: 0 0 auto; width: 50px; height: 30px; border-radius: 16px; background: rgba(120, 120, 128, .32); position: relative; cursor: pointer; transition: background .18s var(--ynp-ease); }
.ynp-alm-sw i { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: left .18s var(--ynp-ease); }
.ynp-alm-sw.on { background: #30d158; }
.ynp-alm-sw.on i { left: 22px; }
.ynp-alm-sw:active i { transform: scale(.94); }

.ynp-alm-empty { text-align: center; color: rgba(255, 255, 255, .55); font-size: 15px; padding: 64px 16px 40px; line-height: 1.9; }
.ynp-alm-empty i { display: block; font-style: normal; font-size: 44px; margin-bottom: 12px; }
.ynp-alm-empty span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .38); }
.ynp-alm-foot { font-size: 11.5px; color: rgba(255, 255, 255, .38); text-align: center; padding: 18px 8px 6px; line-height: 1.7; }

/* ---------- 添加/编辑弹层：iOS 深色 sheet ---------- */
.ynp-alm-mask { position: absolute; inset: 0; z-index: 56; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; animation: ynp-fade .2s var(--ease-out-quart); }
.ynp-alm-mask.closing { animation: ynp-fade .2s var(--ease-in-quart) reverse forwards; }
.ynp-alm-sheet { width: 100%; background: #1c1c1e; border-radius: 22px 22px 0 0; padding: 14px 16px 22px; color: #fff; animation: ynp-alm-up .26s var(--ease-out-quart); }
.ynp-alm-mask.closing .ynp-alm-sheet { animation: ynp-alm-up .2s var(--ease-in-quart) reverse forwards; }
@keyframes ynp-alm-up { from { transform: translateY(100%); } to { transform: none; } }
.ynp-alm-bar { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding: 2px 2px 12px; }
.ynp-alm-bar b { font-size: 15px; font-weight: 600; }
.ynp-alm-bar span { color: #ff9f0a; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.ynp-alm-bar span:active { background: rgba(255, 159, 10, .14); }
.ynp-alm-tin { width: 100%; background: #000; border: none; border-radius: 14px; color: #fff; font-size: 44px; font-weight: 200; text-align: center; padding: 12px 8px; font-variant-numeric: tabular-nums; outline: none; color-scheme: dark; font-family: inherit; }
.ynp-alm-f { display: flex; align-items: center; gap: 10px; background: #2c2c2e; border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.ynp-alm-f label { font-size: 13px; color: rgba(255, 255, 255, .55); flex: 0 0 auto; }
.ynp-alm-f input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; }
.ynp-alm-f input::placeholder { color: rgba(255, 255, 255, .3); }
.ynp-alm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ynp-alm-chips span { font-size: 12.5px; color: #ff9f0a; background: rgba(255, 159, 10, .14); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-alm-chips span:active { transform: scale(.92); }
.ynp-alm-del { margin-top: 16px; text-align: center; color: #ff453a; background: #2c2c2e; border-radius: 12px; padding: 11px; font-size: 14px; cursor: pointer; transition: transform .12s var(--ynp-ease); }
.ynp-alm-del:active { transform: scale(.98); }

/* ---------- 叫醒来电：主干通话皮之上的增量 ---------- */
/* z=59：盖过锁屏(58)——锁着也要叫得醒；低于 toast(60) */
.ynp-call-screen.ynp-alm-ring { z-index: 59; }
.ynp-alm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #ffd08a; background: rgba(255, 159, 10, .2); border: 1px solid rgba(255, 159, 10, .35); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; animation: ynp-alm-swing 1.1s ease-in-out infinite; }
.ynp-call-screen.connected .ynp-alm-chip { animation: none; }
@keyframes ynp-alm-swing { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

@media (prefers-reduced-motion: reduce) {
  .ynp-alm-chip { animation: none; }
  .ynp-alm-sheet, .ynp-alm-mask { animation: none; }
}

/* ==================== 功能: shake ==================== */
/* 摇一摇(shake)：聊天原版黑底星空 + 上下分开的手 + 快门定格结果卡。全部 .ynp-shk-* 前缀，整段追加到 style.css 末尾即可 */

/* ---------- 页面底：夜空 ---------- */
.ynp-app-page.ynp-shk { background: #05070c; overflow: hidden; }
.ynp-shk-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 78% at 50% 8%, #1c2438 0%, #0d1220 44%, #05070c 100%),
    radial-gradient(80% 46% at 78% 96%, rgba(80, 110, 180, .22), transparent 70%);
}
.ynp-shk-stars {
  position: absolute; inset: -8%; pointer-events: none; opacity: .9;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 16%, rgba(255, 255, 255, .9), transparent 62%),
    radial-gradient(1.2px 1.2px at 31% 9%, rgba(255, 255, 255, .55), transparent 62%),
    radial-gradient(1.5px 1.5px at 54% 21%, rgba(216, 232, 255, .8), transparent 62%),
    radial-gradient(1.1px 1.1px at 72% 12%, rgba(255, 255, 255, .5), transparent 62%),
    radial-gradient(1.7px 1.7px at 88% 26%, rgba(255, 255, 255, .78), transparent 62%),
    radial-gradient(1.2px 1.2px at 8% 44%, rgba(255, 255, 255, .5), transparent 62%),
    radial-gradient(1.4px 1.4px at 92% 58%, rgba(216, 232, 255, .62), transparent 62%),
    radial-gradient(1.1px 1.1px at 22% 74%, rgba(255, 255, 255, .45), transparent 62%),
    radial-gradient(1.6px 1.6px at 66% 86%, rgba(255, 255, 255, .6), transparent 62%),
    radial-gradient(1.2px 1.2px at 44% 94%, rgba(255, 255, 255, .4), transparent 62%);
  animation: ynp-shk-tw 4.8s ease-in-out infinite alternate;
}
.ynp-shk-stars.s2 {
  opacity: .55;
  background-image:
    radial-gradient(1.3px 1.3px at 19% 30%, rgba(255, 255, 255, .7), transparent 62%),
    radial-gradient(1px 1px at 41% 52%, rgba(255, 255, 255, .45), transparent 62%),
    radial-gradient(1.5px 1.5px at 79% 40%, rgba(200, 220, 255, .6), transparent 62%),
    radial-gradient(1px 1px at 60% 66%, rgba(255, 255, 255, .4), transparent 62%),
    radial-gradient(1.4px 1.4px at 33% 88%, rgba(255, 255, 255, .5), transparent 62%),
    radial-gradient(1.1px 1.1px at 86% 78%, rgba(255, 255, 255, .42), transparent 62%);
  animation-duration: 6.6s; animation-delay: -2.2s;
}
@keyframes ynp-shk-tw { from { opacity: .35; transform: translateY(0); } to { opacity: 1; transform: translateY(-6px); } }

/* ---------- 顶栏 ---------- */
.ynp-shk-top { position: relative; z-index: 6; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; }
.ynp-shk-back, .ynp-shk-snd { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; color: rgba(255, 255, 255, .82); transition: background .12s, transform .12s; }
.ynp-shk-back:active, .ynp-shk-snd:active { transform: scale(.9); background: rgba(255, 255, 255, .12); }
.ynp-shk-back svg, .ynp-shk-snd svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ynp-shk-snd.off { color: rgba(255, 255, 255, .34); }
.ynp-shk-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .5px; }

/* ---------- 舞台（整片可点=摇） ---------- */
.ynp-shk-stage { position: relative; z-index: 4; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ynp-shk-hand { width: 120px; color: #e9f0ff; filter: drop-shadow(0 0 16px rgba(130, 175, 255, .3)); }
.ynp-shk.has .ynp-shk-hand { display: none; }
.ynp-shk-half { width: 120px; height: 60px; overflow: hidden; transition: transform .5s var(--ynp-ease); }
.ynp-shk-hi { width: 120px; height: 120px; }
.ynp-shk-half.b .ynp-shk-hi { margin-top: -60px; }
.ynp-shk-hi svg { display: block; width: 120px; height: 120px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ynp-shk.shaking .ynp-shk-half.t { transform: translateY(-15px); }
.ynp-shk.shaking .ynp-shk-half.b { transform: translateY(15px); }
.ynp-shk.shaking .ynp-shk-hand { animation: ynp-shk-jit .12s linear infinite; }
@keyframes ynp-shk-jit { 0%, 100% { transform: translateX(-3px) rotate(-1.6deg); } 50% { transform: translateX(3px) rotate(1.6deg); } }
/* 次数用完的拒绝抖动 */
.ynp-shk.no .ynp-shk-hand { animation: ynp-shk-no .4s ease; }
@keyframes ynp-shk-no { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }

.ynp-shk-tip { font-size: 12.5px; color: rgba(255, 255, 255, .42); letter-spacing: 1.5px; }
.ynp-shk-foot { position: relative; z-index: 5; flex: 0 0 auto; padding: 0 0 20px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .34); letter-spacing: .6px; }
.ynp-shk-foot b { color: rgba(255, 214, 226, .82); font-weight: 700; }

/* ---------- 结果卡 ---------- */
.ynp-shk-res:empty { display: none; }
.ynp-shk-card {
  width: 238px; padding: 18px 18px 16px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 52px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .16);
  animation: ynp-shk-pop .5s var(--ynp-ease) .1s both;
}
@keyframes ynp-shk-pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.ynp-shk-fate { font-size: 12.5px; color: #ffb6c6; letter-spacing: 1.2px; margin-bottom: 12px; }
.ynp-shk-fate.dim { color: rgba(255, 255, 255, .5); }
.ynp-shk-fate.gold { color: #f0c987; }
.ynp-shk-av { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px -12px rgba(0, 0, 0, .9); }
.ynp-shk-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ynp-shk-name { font-size: 18px; font-weight: 700; color: #fff; }
.ynp-shk-sign { margin-top: 6px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.ynp-shk-meta { margin-top: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .34); }
.ynp-shk-go { margin-top: 14px; width: 100%; padding: 10px 0; border: 0; border-radius: 13px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: var(--ynp-font); color: #fff; background: linear-gradient(135deg, #e08298, #c96d87); box-shadow: 0 10px 22px -12px rgba(224, 130, 152, .9); transition: transform .12s, filter .12s; }
.ynp-shk-go:active { transform: scale(.96); filter: brightness(1.06); }
.ynp-shk-go.ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; color: rgba(255, 255, 255, .8); }

/* ---------- 彩蛋红包（红金世界观，忠于聊天红包） ---------- */
.ynp-shk-card.ynp-shk-hb { cursor: pointer; }
.ynp-shk-hbcard { position: relative; padding: 18px 14px 16px; border-radius: 14px; background: linear-gradient(168deg, #dc4b3f 0%, #c23a30 58%, #ac2f27 100%); box-shadow: inset 0 0 0 1px rgba(240, 201, 135, .38), 0 14px 30px -16px rgba(180, 50, 40, .9); }
.ynp-shk-face.b { display: none; }
.ynp-shk-hb.open .ynp-shk-face.a { display: none; }
.ynp-shk-hb.open .ynp-shk-face.b { display: block; animation: ynp-shk-pop .4s var(--ynp-ease) both; }
.ynp-shk-hbfrom { font-size: 12px; color: rgba(255, 233, 209, .72); letter-spacing: 1px; }
.ynp-shk-hbwish { margin-top: 8px; font-size: 15px; font-weight: 600; color: #ffeedd; font-family: "Songti SC", "STSong", serif; }
.ynp-shk-kai { width: 50px; height: 50px; margin: 14px auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 21px; font-family: "Songti SC", "STSong", serif; color: #8a4a1f; background: radial-gradient(120% 120% at 30% 24%, #ffe6ac, #f0c987 62%, #d8a95e 100%); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .16s var(--ynp-ease); }
.ynp-shk-hb:active .ynp-shk-kai { transform: scale(.92); }
.ynp-shk-hbhint { font-size: 11px; color: rgba(255, 226, 196, .5); letter-spacing: 3px; }
.ynp-shk-amt { margin: 16px 0 6px; font-size: 40px; line-height: 1; font-weight: 700; color: #f7d79b; font-family: "Songti SC", "STSong", serif; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.ynp-shk-hbnote { font-size: 12px; color: rgba(255, 233, 209, .66); }

/* ---------- 快门：咔嚓合拢 → 缓缓拉开 ---------- */
.ynp-shk-shut { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.ynp-shk-shut i { position: absolute; left: 0; right: 0; height: 50.4%; background: #05070c; box-shadow: 0 0 24px 6px rgba(0, 0, 0, .85); transition: transform .46s var(--ynp-ease); }
.ynp-shk-shut i.t { top: 0; transform: translateY(-101%); }
.ynp-shk-shut i.b { bottom: 0; transform: translateY(101%); }
.ynp-shk-shut.shut i { transition: transform .13s ease-in; transform: none; }
.ynp-shk-flash { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: #eaf2ff; opacity: 0; transition: opacity .34s ease-out; }
.ynp-shk-flash.on { opacity: .5; transition-duration: .06s; }

@media (prefers-reduced-motion: reduce) {
  .ynp-shk-stars { animation: none; }
  .ynp-shk.shaking .ynp-shk-hand { animation: none; }
  .ynp-shk-card { animation-duration: .01s; }
}

/* ==================== 功能: cardtouch ==================== */
/* ==================== 功能: cardtouch ==================== */
/* ===== 摸摸TA cardtouch：跟手手掌 + 小心心粒子 + 反应气泡（清露白，全部 .ynpt- 前缀） ===== */

/* 特效层：铺满 .ynp-screen，不吃事件，盖在 toast(60) 之上（它是"手指"，得在最上面） */
.ynpt-fx { position: absolute; inset: 0; z-index: 62; pointer-events: none; overflow: hidden; border-radius: 40px; }

/* 蓄力：600ms 的一圈淡光，短按几乎看不见，长按刚好提示"这里能摸" */
.ynpt-press { animation: ynpt-press .6s var(--ynp-ease) forwards; }
.ynpt-hold { box-shadow: 0 0 0 5px rgba(222,146,162,.3), 0 4px 14px rgba(150,120,140,.2); }
@keyframes ynpt-press {
  from { box-shadow: 0 0 0 0 rgba(222,146,162,0); }
  to { box-shadow: 0 0 0 5px rgba(222,146,162,.3); }
}
/* 小人是 SVG 剪影，方框光晕不合适 → 换成描边辉光；TA自带 translate 定位，绝不能碰 transform */
#ynp-rm-char.ynpt-press { animation: ynpt-press-rm .6s var(--ynp-ease) forwards; box-shadow: none; }
#ynp-rm-char.ynpt-hold { box-shadow: none; filter: drop-shadow(0 0 7px rgba(222,146,162,.6)); }
@keyframes ynpt-press-rm {
  from { filter: drop-shadow(0 0 0 rgba(222,146,162,0)); }
  to { filter: drop-shadow(0 0 7px rgba(222,146,162,.6)); }
}

/* 松手：TA抖一下（0.3s 收住） */
img.ynpt-wob { animation: ynpt-wob .3s var(--ynp-ease); }
#ynp-rm-char.ynpt-wob svg { animation: ynpt-wob .3s var(--ynp-ease); }
@keyframes ynpt-wob {
  0% { transform: none; }
  35% { transform: rotate(-4deg) scale(1.07); }
  70% { transform: rotate(3deg) scale(1.02); }
  100% { transform: none; }
}
/* 摸满 100 次：TA不躲了，主动往手心里凑一下 */
img.ynpt-lean { animation: ynpt-lean .42s var(--spring-bouncy); }
#ynp-rm-char.ynpt-lean svg { animation: ynpt-lean .42s var(--spring-bouncy); }
@keyframes ynpt-lean {
  0% { transform: none; }
  45% { transform: scale(1.15) translateY(2px); }
  100% { transform: none; }
}

/* 跟手的手掌：外层负责跟坐标，内层负责出场动画（互不打架） */
.ynpt-hand { position: absolute; left: 0; top: 0; width: 0; height: 0; color: #8ea6c8; }
.ynpt-hand i { position: absolute; left: -13px; top: -34px; width: 30px; height: 30px; display: block;
  filter: drop-shadow(0 3px 6px rgba(90,115,150,.28)); animation: ynpt-hand-in .22s var(--spring-bouncy); }
.ynpt-hand svg { width: 100%; height: 100%; display: block; }
.ynpt-hand.out i { animation: ynpt-hand-out .18s var(--ease-in-quart) forwards; }
@keyframes ynpt-hand-in { from { opacity: 0; transform: translateY(7px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ynpt-hand-out { to { opacity: 0; transform: translateY(-5px) scale(.82); } }

/* 小心心粒子：6~8 颗，飘 0.62s 就散，绝不糊屏 */
.ynpt-hp { position: absolute; width: var(--sz, 12px); height: var(--sz, 12px); margin: calc(var(--sz, 12px) / -2) 0 0 calc(var(--sz, 12px) / -2);
  opacity: 0; animation: ynpt-hp .62s var(--ease-out-quart) forwards; }
.ynpt-hp svg { width: 100%; height: 100%; display: block; }
@keyframes ynpt-hp {
  0% { opacity: 0; transform: translate(0, 0) scale(.35) rotate(0deg); }
  22% { opacity: 1; transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .3)) scale(1.06) rotate(var(--rt)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5) rotate(var(--rt)); }
}
/* +1 心动值飘字（超日上限就不出现） */
.ynpt-plus { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: #d2798c; text-shadow: 0 1px 3px rgba(255,255,255,.9);
  white-space: nowrap; animation: ynpt-plus .8s var(--ease-out-quart) forwards; }
.ynpt-plus svg { width: 11px; height: 11px; display: block; }
@keyframes ynpt-plus {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(.94); }
}

/* TA的反应气泡：白玻璃小条，最多两行，尾巴指着TA */
.ynpt-say { position: absolute; max-width: 190px; padding: 7px 11px; border-radius: 13px;
  font-size: 12.5px; line-height: 1.45; font-weight: 500; color: var(--ynp-ink-2);
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 10px 26px rgba(80,100,135,.22); animation: ynpt-say-in .26s var(--spring-bouncy);
  transform-origin: bottom center; }
.ynpt-say.below { transform-origin: top center; }
.ynpt-say i { position: absolute; bottom: -5px; margin-left: -5px; width: 10px; height: 10px; background: rgba(255,255,255,.92);
  border-right: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); transform: rotate(45deg); }
.ynpt-say.below i { bottom: auto; top: -5px; border: none;
  border-left: 1px solid rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.7); }
.ynpt-say.out { animation: ynpt-say-out .22s var(--ease-in-quart) forwards; }
@keyframes ynpt-say-in { from { opacity: 0; transform: scale(.75) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ynpt-say-out { to { opacity: 0; transform: scale(.9) translateY(-3px); } }

/* 长按TA = 摸，不要弹系统的图片长按菜单 / 选中文字 */
.ynp-chat-head-av, .ynp-mo-av, #ynp-rm-char {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .ynpt-press, #ynp-rm-char.ynpt-press, img.ynpt-wob, #ynp-rm-char.ynpt-wob svg,
  img.ynpt-lean, #ynp-rm-char.ynpt-lean svg { animation: none; }
  .ynpt-hand i, .ynpt-say { animation: ynp-fade .12s; }
  .ynpt-hp { animation-duration: .3s; }
  .ynpt-plus { animation-duration: .4s; }
}

/* ==================== 功能: simulator ==================== */
/* ==================== 功能: simulator ==================== */
/* simulator 草稿 · 剧情模拟器：票根大厅（清露白 + 每张票自己的氛围色）＋沉浸剧场（暗幕/竖排开场/字幕排版/玻璃选项）＋票夹回忆。
   氛围色由 JS 逐张写入 --sim-a(主)/--sim-b(底幕)/--sim-ac(高光)，CSS 只认变量，不写死颜色。 */

.ynp-sim-lobby, .ynp-sim-stage { --sim-serif: "Songti SC", "STSong", "Source Han Serif SC", "SimSun", Georgia, serif; }

/* ---------- 票根大厅（清露白） ---------- */
.ynp-app-page.ynp-sim-lobby { background: linear-gradient(180deg, #f2f5f9, #e8edf4); }
.ynp-sim-hall { padding: 4px 16px 30px; }

.ynp-sim-hero { padding: 14px 4px 16px; }
.ynp-sim-hero-en { font-family: var(--ynp-en); font-size: 10px; letter-spacing: 2.6px; color: var(--ynp-faint); }
.ynp-sim-hero-cn { font-family: var(--sim-serif); font-size: 23px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: 2px; margin-top: 6px; }
.ynp-sim-hero-sub { font-size: 12px; color: var(--ynp-muted); margin-top: 6px; letter-spacing: .3px; }

/* 上一场没散场：续演条 */
.ynp-sim-resume {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 14px;
  border-radius: 16px; background: var(--ynp-glass-2); box-shadow: var(--ynp-soft-sh-sm);
  border: 1px solid rgba(120, 140, 170, .12); cursor: pointer;
  transition: transform .16s var(--ynp-ease);
}
.ynp-sim-resume:active { transform: scale(.985); }
.ynp-sim-resume-l { flex: 1; min-width: 0; }
.ynp-sim-resume-t { font-size: 14px; font-weight: 700; color: var(--ynp-ink-2); }
.ynp-sim-resume-s { font-size: 11.5px; color: var(--ynp-muted); margin-top: 3px; }
.ynp-sim-resume span { flex: 0 0 auto; font-size: 12px; color: #fff; background: #7d9cc4; border-radius: 999px; padding: 5px 14px; letter-spacing: 1px; }

/* 票根本体：左封面渐变 + 中间撕缝 + 右简介 */
.ynp-sim-tk {
  position: relative; display: flex; margin-bottom: 14px; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .62); box-shadow: var(--ynp-soft-sh-sm);
  border: 1px solid rgba(120, 140, 170, .1); cursor: pointer;
  transition: transform .18s var(--ynp-ease), box-shadow .18s var(--ynp-ease);
}
.ynp-sim-tk:active { transform: scale(.982); box-shadow: var(--ynp-soft-sh); }
.ynp-sim-tk-cover {
  flex: 0 0 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(150deg, var(--sim-a), var(--sim-b)); color: var(--sim-ac); padding: 16px 6px;
}
.ynp-sim-tk-art { width: 42px; height: 42px; opacity: .9; }
.ynp-sim-tk-art svg { width: 100%; height: 100%; }
.ynp-sim-tk-en { font-family: var(--ynp-en); font-size: 8.5px; letter-spacing: 1.6px; opacity: .72; }

/* 撕缝：虚线 + 上下两个半圆缺口（用页面底色打洞） */
.ynp-sim-tk-perf { position: relative; flex: 0 0 2px; background: repeating-linear-gradient(180deg, rgba(120, 140, 170, .45) 0 5px, transparent 5px 10px); }
.ynp-sim-tk-perf::before, .ynp-sim-tk-perf::after {
  content: ""; position: absolute; left: -5px; width: 11px; height: 11px; border-radius: 50%;
  background: #edf1f6; box-shadow: inset 0 1px 2px rgba(120, 140, 170, .25);
}
.ynp-sim-tk-perf::before { top: -6px; }
.ynp-sim-tk-perf::after { bottom: -6px; }

.ynp-sim-tk-body { flex: 1; min-width: 0; padding: 13px 14px 11px; }
.ynp-sim-tk-n { font-family: var(--sim-serif); font-size: 16px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: 1.4px; }
.ynp-sim-tk-d {
  font-size: 11.5px; line-height: 1.75; color: var(--ynp-muted); margin-top: 5px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;   /* 两行齐平，票面等高 */
}
.ynp-sim-tk-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(120, 140, 170, .2); }
.ynp-sim-tk-meta span { font-family: var(--ynp-en); font-size: 9.5px; letter-spacing: 1.2px; color: var(--ynp-faint); }
.ynp-sim-tk-meta b { font-size: 11.5px; font-weight: 600; letter-spacing: 2px; color: #fff; background: var(--sim-a); border-radius: 999px; padding: 3px 12px; }
.ynp-sim-tk-meta b:active { filter: brightness(.94); }

/* 空白票：自己写一句 */
.ynp-sim-tk.blank { cursor: default; border-style: dashed; border-color: rgba(120, 140, 170, .26); }
.ynp-sim-tk.blank:active { transform: none; }
.ynp-sim-cin {
  display: block; width: 100%; margin-top: 8px; padding: 4px 2px 6px; box-sizing: border-box;
  background: transparent; border: none; border-bottom: 1.5px dashed rgba(120, 140, 170, .4);
  font-family: var(--ynp-font); font-size: 12.5px; color: var(--ynp-ink); outline: none;
}
.ynp-sim-cin::placeholder { color: var(--ynp-faint); }
.ynp-sim-cin:focus { border-bottom-color: var(--sim-a); }

.ynp-sim-hall-foot { text-align: center; font-size: 11px; color: var(--ynp-faint); letter-spacing: .6px; padding: 6px 0 2px; }

/* ---------- 沉浸剧场 ---------- */
/* 底幕用剧本自己的 --sim-b 打底，再叠一层主色辉光：六个剧本进场就能看出色温不同 */
.ynp-app-page.ynp-sim-stage { background: linear-gradient(180deg, var(--sim-b), #0d0f15 78%); color: #e7ecf4; overflow: hidden; }
.ynp-sim-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(64% 36% at 20% 4%, var(--sim-a), transparent 72%),
    radial-gradient(46% 26% at 92% 72%, var(--sim-ac), transparent 74%);
  opacity: .42; filter: blur(3px);
}
.ynp-sim-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(126% 80% at 50% 40%, transparent 46%, rgba(0, 0, 0, .58) 100%);
}

.ynp-sim-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.ynp-sim-exit { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: rgba(255, 255, 255, .6); cursor: pointer; flex: 0 0 auto; }
.ynp-sim-exit svg { width: 21px; height: 21px; }
.ynp-sim-exit:active { background: rgba(255, 255, 255, .08); }
.ynp-sim-top-mid { flex: 1; min-width: 0; text-align: center; }
.ynp-sim-top-mid b { display: block; font-family: var(--sim-serif); font-size: 13px; font-weight: 600; letter-spacing: 2px; color: rgba(255, 255, 255, .78); }
.ynp-sim-top-mid i { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.ynp-sim-top-mid i span { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background .3s var(--ynp-ease), transform .3s var(--ynp-ease); }
.ynp-sim-top-mid i span.on { background: var(--sim-ac); transform: scale(1.15); }

/* 幕：字幕式排版 */
/* 顶部渐隐：往上滚的旧幕淡出画面，而不是被硬生生切一刀 */
.ynp-sim-scroll {
  position: relative; z-index: 2; flex: 1 1 auto; overflow-y: auto; padding: 12px 22px 6px; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px);
  mask-image: linear-gradient(180deg, transparent 0, #000 30px);
}
.ynp-sim-scroll::-webkit-scrollbar { width: 0; }
.ynp-sim-act-block { margin-bottom: 26px; transition: opacity .5s var(--ynp-ease), filter .5s var(--ynp-ease); }
.ynp-sim-act-block.faded { opacity: .34; }
.ynp-sim-actno {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--ynp-en); font-size: 9.5px; letter-spacing: 2.4px; color: var(--sim-ac); opacity: .68;
}
.ynp-sim-actno::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: .45; }
.ynp-sim-line {
  margin: 0 0 10px; font-family: var(--sim-serif); font-size: 15px; line-height: 2.05;
  color: rgba(233, 238, 246, .92); letter-spacing: .6px; text-indent: 2em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.ynp-sim-line.dlg { text-indent: 0; padding-left: 12px; border-left: 1px solid var(--sim-ac); color: #fff; }
.ynp-sim-act-block.fresh .ynp-sim-line { animation: ynp-sim-line-in .62s var(--ease-out-quart) both; }
@keyframes ynp-sim-line-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.ynp-sim-chosen {
  margin-top: 4px; text-align: right; font-size: 12.5px; letter-spacing: .5px;
  color: var(--sim-ac); opacity: 0; transform: translateX(8px);
  transition: opacity .4s var(--ynp-ease), transform .4s var(--ynp-ease);
}
.ynp-sim-chosen.on { opacity: .92; transform: none; }
.ynp-sim-chosen i { font-style: normal; font-size: 10px; letter-spacing: 1.4px; opacity: .6; margin-right: 8px; }

/* 底部控制区 */
.ynp-sim-ctrl {
  position: relative; z-index: 3; flex: 0 0 auto; padding: 12px 18px 26px;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 16, .72) 34%, rgba(8, 10, 16, .9));
  backdrop-filter: blur(6px);
}
.ynp-sim-opts { display: flex; flex-direction: column; gap: 8px; }
.ynp-sim-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  padding: 11px 14px; border-radius: 15px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(10px); color: rgba(240, 244, 250, .95);
  font-family: var(--ynp-font); font-size: 13.5px; letter-spacing: .5px;
  animation: ynp-sim-opt-in .42s var(--ease-out-quart) both;
  transition: transform .14s var(--ynp-ease), background .18s var(--ynp-ease), border-color .18s var(--ynp-ease);
}
@keyframes ynp-sim-opt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ynp-sim-opt:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); }
.ynp-sim-opt:active { transform: scale(.972); background: rgba(255, 255, 255, .17); }
.ynp-sim-opt b {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--ynp-en); font-size: 11px; font-weight: 600; color: var(--sim-ac); background: rgba(255, 255, 255, .12);
}
.ynp-sim-opt span { flex: 1; min-width: 0; }
.ynp-sim-opt.wide { justify-content: center; letter-spacing: 3px; color: var(--sim-ac); }

.ynp-sim-free { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ynp-sim-free input {
  flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, .18);
  padding: 6px 2px; color: #eef2f8; font-family: var(--ynp-font); font-size: 13px; outline: none;
}
.ynp-sim-free input::placeholder { color: rgba(255, 255, 255, .3); }
.ynp-sim-free input:focus { border-bottom-color: var(--sim-ac); }
.ynp-sim-free button {
  flex: 0 0 auto; border: none; cursor: pointer; border-radius: 999px; padding: 7px 18px;
  background: var(--sim-a); color: #fff; font-family: var(--ynp-font); font-size: 13px; letter-spacing: 3px;
  transition: transform .14s var(--ynp-ease);
}
.ynp-sim-free button:active { transform: scale(.92); }

.ynp-sim-wait { text-align: center; font-size: 12.5px; letter-spacing: 1.4px; color: rgba(255, 255, 255, .5); padding: 16px 0 12px; }
.ynp-sim-wait i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-left: 4px; vertical-align: middle; animation: ynp-sim-blink 1.2s infinite; }
.ynp-sim-wait i:nth-child(2) { animation-delay: .2s; }
.ynp-sim-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes ynp-sim-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* 结局 */
.ynp-sim-end { text-align: center; padding: 4px 0 2px; }
.ynp-sim-end-t { font-family: var(--sim-serif); font-size: 22px; letter-spacing: 8px; color: var(--sim-ac); text-indent: 8px; }
.ynp-sim-end-s { font-size: 11.5px; color: rgba(255, 255, 255, .45); margin-top: 8px; letter-spacing: .6px; }
.ynp-sim-end-btns { display: flex; gap: 10px; margin-top: 16px; }
.ynp-sim-btn {
  flex: 1; border: none; cursor: pointer; border-radius: 14px; padding: 11px 0;
  background: var(--sim-a); color: #fff; font-family: var(--ynp-font); font-size: 13.5px; letter-spacing: 2px;
  transition: transform .14s var(--ynp-ease);
}
.ynp-sim-btn.ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(240, 244, 250, .9); }
.ynp-sim-btn:active { transform: scale(.96); }

/* ---------- 开场：暗幕拉开 + 竖排剧本名 ---------- */
/* row-reverse：竖排从右往左读，剧本名在右、演职员在左 */
.ynp-sim-curtain { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 14px; }
.ynp-sim-cur-l, .ynp-sim-cur-r {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 16px),
    linear-gradient(180deg, #0b0d12, #131722 60%, #0b0d12);
  transition: transform .95s cubic-bezier(.6, 0, .22, 1);
}
.ynp-sim-cur-l { left: 0; box-shadow: 8px 0 26px rgba(0, 0, 0, .6); }
.ynp-sim-cur-r { right: 0; box-shadow: -8px 0 26px rgba(0, 0, 0, .6); }
.ynp-sim-curtain.open .ynp-sim-cur-l { transform: translateX(-101%); }
.ynp-sim-curtain.open .ynp-sim-cur-r { transform: translateX(101%); }
.ynp-sim-vtitle, .ynp-sim-vsub {
  position: relative; z-index: 2; writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--sim-serif); animation: ynp-sim-vt .95s var(--ease-out-quart) both;
}
.ynp-sim-vtitle { font-size: 25px; letter-spacing: .42em; color: #f0f3f8; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .35); }
.ynp-sim-vsub { font-size: 11px; letter-spacing: .3em; color: rgba(255, 255, 255, .42); animation-delay: .22s; }
.ynp-sim-curtain.open .ynp-sim-vtitle, .ynp-sim-curtain.open .ynp-sim-vsub { animation: ynp-sim-vt-out .5s var(--ease-in-quart) both; }
@keyframes ynp-sim-vt { from { opacity: 0; transform: translateY(-14px); letter-spacing: .9em; } to { opacity: 1; transform: none; } }
@keyframes ynp-sim-vt-out { to { opacity: 0; transform: scale(1.06); } }

/* ---------- 票夹：回忆列表 ---------- */
.ynp-sim-mem { padding: 10px 16px 26px; }
.ynp-sim-stub {
  display: flex; margin-bottom: 12px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, .62); box-shadow: var(--ynp-soft-sh-sm); border: 1px solid rgba(120, 140, 170, .1);
  transition: transform .16s var(--ynp-ease);
}
.ynp-sim-stub:active { transform: scale(.985); }
.ynp-sim-stub-side {
  flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--sim-a), var(--sim-b)); color: var(--sim-ac);
}
.ynp-sim-stub-side span { writing-mode: vertical-rl; font-size: 10.5px; letter-spacing: 3px; opacity: .85; }
.ynp-sim-stub-body { flex: 1; min-width: 0; padding: 11px 13px; }
.ynp-sim-stub-n { font-family: var(--sim-serif); font-size: 14.5px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: 1.2px; }
.ynp-sim-stub-e { font-size: 11.5px; line-height: 1.7; color: var(--ynp-muted); margin-top: 4px; }
.ynp-sim-stub-m { font-family: var(--ynp-en); font-size: 9.5px; letter-spacing: 1px; color: var(--ynp-faint); margin-top: 6px; }

/* ---------- 票夹：单场详情 ---------- */
.ynp-sim-detail { padding: 10px 16px 30px; }
.ynp-sim-dt-head { text-align: center; padding: 14px 0 20px; }
.ynp-sim-dt-art {
  width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 13px; box-sizing: border-box;
  background: linear-gradient(150deg, var(--sim-a), var(--sim-b)); color: var(--sim-ac);
  box-shadow: 0 8px 20px rgba(90, 110, 145, .28);
}
.ynp-sim-dt-art svg { width: 100%; height: 100%; }
.ynp-sim-dt-n { font-family: var(--sim-serif); font-size: 19px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: 2px; }
.ynp-sim-dt-m { font-size: 11px; color: var(--ynp-faint); margin-top: 6px; letter-spacing: 1px; }
.ynp-sim-dt-act { background: rgba(255, 255, 255, .58); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid rgba(120, 140, 170, .1); }
.ynp-sim-dt-no { font-family: var(--ynp-en); font-size: 9.5px; letter-spacing: 2px; color: var(--sim-a); margin-bottom: 6px; }
.ynp-sim-dt-act p { margin: 0; font-family: var(--sim-serif); font-size: 13.5px; line-height: 1.95; color: var(--ynp-ink); white-space: pre-line; }
.ynp-sim-dt-ch { margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(120, 140, 170, .22); text-align: right; font-size: 12px; color: var(--sim-a); }
.ynp-sim-dt-ch i { font-style: normal; font-size: 10px; letter-spacing: 1.2px; opacity: .6; margin-right: 7px; }
.ynp-sim-dt-fin { text-align: center; font-family: var(--sim-serif); font-size: 15px; letter-spacing: 7px; text-indent: 7px; color: var(--ynp-faint); padding: 12px 0 18px; }
.ynp-sim-dt-del { text-align: center; font-size: 12.5px; color: #c07a7a; background: rgba(255, 255, 255, .5); border-radius: 12px; padding: 10px; cursor: pointer; transition: transform .14s var(--ynp-ease); }
.ynp-sim-dt-del:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .ynp-sim-act-block.fresh .ynp-sim-line, .ynp-sim-opt, .ynp-sim-vtitle, .ynp-sim-vsub { animation: none; }
  .ynp-sim-cur-l, .ynp-sim-cur-r { transition-duration: .3s; }
  .ynp-sim-wait i { animation: none; opacity: .6; }
}

/* ==================== 功能: habit ==================== */
/* ============================================================
   当前角色小手机 · habit「打卡」样式（前缀 .ynp-hk-*，与红包 .ynp-hb-* 无交集）
   基调：清露白玻璃卡 + 蓝→青→暖橙的进度环渐变；
   多邻国式的"爽感"只保留在勾选弹跳/连击火焰/撒花上，配色一律收敛回 --ynp-* 冷白蓝。
   ============================================================ */

.ynp-hk-wrap { padding: 4px 14px 16px; }
.ynp-hk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 顶部今日总览 ---------- */
.ynp-hk-hero {
  display: flex; align-items: center; gap: 12px;
  background: var(--ynp-glass-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px;
  padding: 14px 16px; margin: 6px 0 12px; box-shadow: var(--ynp-soft-sh-sm);
  transition: box-shadow .3s var(--ynp-ease), border-color .3s var(--ynp-ease);
}
.ynp-hk-hero.full { border-color: rgba(255, 196, 138, .55); box-shadow: 0 6px 18px rgba(214, 160, 106, .2), -4px -4px 10px rgba(255, 255, 255, .55); }
.ynp-hk-h-tx { flex: 1 1 auto; min-width: 0; }
.ynp-hk-h-tx b { display: block; font-size: 15px; font-weight: 600; color: var(--ynp-ink-2); letter-spacing: .2px; }
.ynp-hk-h-tx b em { font-style: normal; font-family: var(--ynp-en); font-size: 24px; font-weight: 700; color: #6d8fbd; margin: 0 1px; }
.ynp-hk-h-tx b u { text-decoration: none; font-family: var(--ynp-en); font-size: 15px; color: var(--ynp-faint); }
.ynp-hk-h-tx span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ynp-muted); }
.ynp-hk-h-fire { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding-left: 12px; border-left: 1px solid var(--ynp-hair); }
.ynp-hk-h-fire i { font-style: normal; font-size: 17px; line-height: 1; filter: saturate(.72); }
.ynp-hk-h-fire b { font-family: var(--ynp-en); font-size: 17px; font-weight: 700; color: #d69a63; }
.ynp-hk-h-fire span { font-size: 10px; color: var(--ynp-faint); }

/* ---------- 目标卡 ---------- */
.ynp-hk-card {
  background: var(--ynp-glass-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px;
  padding: 14px 14px 8px; margin-bottom: 12px; box-shadow: var(--ynp-soft-sh-sm);
  transition: box-shadow .3s var(--ynp-ease);
}
.ynp-hk-card.allday { box-shadow: 0 6px 20px rgba(140, 175, 215, .28), -4px -4px 10px rgba(255, 255, 255, .6); }
.ynp-hk-card.fin { opacity: .82; padding-bottom: 12px; }
.ynp-hk-head { display: flex; align-items: center; gap: 12px; }

/* 进度环：底环细灰 + 渐变前环，dashoffset 走缓动 */
.ynp-hk-ring { position: relative; flex: 0 0 auto; width: 58px; height: 58px; }
.ynp-hk-ring svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.ynp-hk-ring circle { fill: none; stroke-linecap: round; }
.ynp-hk-ring .bg { stroke: rgba(130, 155, 190, .16); stroke-width: 5; }
.ynp-hk-ring .fg { stroke: url(#ynp-hk-grad); stroke-width: 5; transition: stroke-dashoffset .62s var(--ynp-ease); }
.ynp-hk-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ynp-en); font-size: 16px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: -.3px;
}
.ynp-hk-ring b i { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--ynp-faint); margin-left: 1px; align-self: center; }
.ynp-hk-card.fin .ynp-hk-ring b { color: #d69a63; font-size: 22px; }

.ynp-hk-meta { flex: 1 1 auto; min-width: 0; }
.ynp-hk-goal { font-size: 14.5px; font-weight: 600; color: var(--ynp-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-hk-sub { margin-top: 3px; font-size: 11.5px; color: var(--ynp-muted); }
.ynp-hk-sub b { font-family: var(--ynp-en); font-size: 13px; color: #6d8fbd; font-weight: 700; margin: 0 1px; }
.ynp-hk-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ynp-hk-tag, .ynp-hk-fire { font-size: 10.5px; border-radius: 999px; padding: 2.5px 9px; white-space: nowrap; }
.ynp-hk-tag { color: var(--ynp-muted); background: rgba(120, 140, 170, .12); }
.ynp-hk-tag.done { color: #b0824f; background: rgba(255, 196, 138, .22); }
.ynp-hk-fire { color: var(--ynp-faint); background: rgba(120, 140, 170, .1); transition: color .25s, background .25s; }
.ynp-hk-fire.on { color: #c07f45; background: rgba(255, 184, 118, .2); animation: ynp-hk-flick 2.4s ease-in-out infinite; }
@keyframes ynp-hk-flick { 0%, 100% { filter: none; } 50% { filter: brightness(1.09); } }

.ynp-hk-more { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--ynp-faint); cursor: pointer; border-radius: 9px; transition: background .15s, transform .12s var(--ynp-ease); }
.ynp-hk-more svg { width: 17px; height: 17px; }
.ynp-hk-more:hover { background: rgba(120, 140, 170, .1); }
.ynp-hk-more:active { transform: scale(.86); }

/* ---------- 今日任务清单 ---------- */
.ynp-hk-tasks { margin-top: 10px; border-top: 1px solid var(--ynp-hair); padding-top: 2px; }
.ynp-hk-task { display: flex; align-items: center; gap: 11px; padding: 9px 2px; cursor: pointer; border-radius: 12px; transition: background .14s var(--ynp-ease); }
.ynp-hk-task:active { background: rgba(120, 140, 170, .08); }
.ynp-hk-task + .ynp-hk-task { border-top: 1px solid rgba(120, 140, 170, .08); }

.ynp-hk-box {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid rgba(130, 155, 190, .38); background: rgba(255, 255, 255, .55);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .2s var(--ynp-ease), border-color .2s var(--ynp-ease);
}
.ynp-hk-box svg { width: 15px; height: 15px; stroke-dasharray: 26; stroke-dashoffset: 26; }
.ynp-hk-task.on .ynp-hk-box {
  border-color: transparent;
  background: linear-gradient(140deg, #8fb6e6, #9ad0d8 60%, #ffc48a);
  animation: ynp-hk-pop .42s var(--spring-bouncy);
}
.ynp-hk-task.on .ynp-hk-box svg { animation: ynp-hk-draw .3s .07s var(--ease-out-quart) forwards; }
@keyframes ynp-hk-pop { 0% { transform: scale(1); } 38% { transform: scale(1.3); } 66% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes ynp-hk-draw { to { stroke-dashoffset: 0; } }

.ynp-hk-tt { flex: 1 1 auto; min-width: 0; }
.ynp-hk-tt b { display: block; font-size: 13px; font-weight: 500; color: var(--ynp-ink); transition: color .2s, opacity .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-hk-tt i { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: var(--ynp-faint); }
.ynp-hk-tt i em { font-style: normal; font-family: var(--ynp-en); font-weight: 700; color: var(--ynp-muted); }
.ynp-hk-task.on .ynp-hk-tt b { color: var(--ynp-faint); text-decoration: line-through; text-decoration-color: rgba(150, 175, 210, .5); }

.ynp-hk-finbar { margin-top: 10px; border-top: 1px solid var(--ynp-hair); padding-top: 9px; font-size: 11px; color: #b0824f; text-align: center; }

/* ---------- 空态 ---------- */
.ynp-hk-empty { text-align: center; padding: 46px 22px 20px; }
.ynp-hk-empty i { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 50%; color: #9fb4cf; background: var(--ynp-glass); box-shadow: var(--ynp-soft-sh-sm); margin-bottom: 14px; }
.ynp-hk-empty i svg { width: 27px; height: 27px; }
.ynp-hk-empty b { display: block; font-size: 15px; font-weight: 600; color: var(--ynp-ink-2); }
.ynp-hk-empty span { display: block; margin-top: 6px; font-size: 12px; color: var(--ynp-muted); line-height: 1.7; }
.ynp-hk-empty-btn { margin-top: 16px; border: none; border-radius: 14px; padding: 10px 26px; font-size: 13.5px; font-weight: 600; color: #fff; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, #7c95b8, #5c7396); box-shadow: 0 6px 16px rgba(110, 140, 180, .3); transition: transform .15s var(--ynp-ease), filter .15s; }
.ynp-hk-empty-btn:active { transform: scale(.95); filter: brightness(.94); }
.ynp-hk-eg { margin-top: 20px; font-size: 11px; color: var(--ynp-faint); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.ynp-hk-eg em { font-style: normal; background: rgba(120, 140, 170, .12); border-radius: 999px; padding: 4px 11px; color: var(--ynp-muted); cursor: pointer; transition: transform .13s var(--ynp-ease); }
.ynp-hk-eg em:active { transform: scale(.92); }

/* ---------- 弹层：清露白底部 sheet ---------- */
.ynp-hk-mask { position: absolute; inset: 0; z-index: 32; background: rgba(30, 40, 55, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; flex-direction: column; justify-content: flex-end; animation: ynp-fade .2s var(--ease-out-quart); }
.ynp-hk-mask.closing { animation: ynp-fade .18s var(--ease-in-quart) reverse forwards; }
.ynp-hk-sheet { background: #fbfcfe; border-radius: 20px 20px 0 0; padding: 13px 17px 22px; box-shadow: 0 -10px 30px rgba(60, 80, 110, .16); animation: ynp-hk-up .3s var(--ynp-ease); max-height: 82%; overflow-y: auto; }
.ynp-hk-sheet::-webkit-scrollbar { width: 0; }
.ynp-hk-mask.closing .ynp-hk-sheet { animation: ynp-hk-up .2s var(--ease-in-quart) reverse forwards; }
@keyframes ynp-hk-up { from { transform: translateY(42%); opacity: .35; } to { transform: none; opacity: 1; } }
.ynp-hk-sh-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ynp-hk-sh-bar .t { font-size: 14px; font-weight: 600; color: var(--ynp-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-hk-sh-bar .x { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--ynp-icon); cursor: pointer; border-radius: 9px; }
.ynp-hk-sh-bar .x svg { width: 16px; height: 16px; }
.ynp-hk-sh-bar .x:active { background: rgba(120, 140, 170, .12); }

.ynp-hk-act { border-radius: 13px; background: rgba(120, 140, 170, .1); padding: 12px; text-align: center; font-size: 13.5px; color: var(--ynp-ink); cursor: pointer; margin-top: 8px; transition: transform .14s var(--ynp-ease); }
.ynp-hk-act:active { transform: scale(.98); }
.ynp-hk-act.danger { color: #c0665f; background: rgba(200, 110, 100, .1); }

/* 第一步：写目标 */
.ynp-hk-gin { width: 100%; border: none; outline: none; background: rgba(120, 140, 170, .1); border-radius: 14px; padding: 13px 14px; font-size: 15px; font-weight: 500; color: var(--ynp-ink-2); font-family: inherit; }
.ynp-hk-gin::placeholder { color: var(--ynp-faint); font-weight: 400; }
.ynp-hk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.ynp-hk-chips span { font-size: 11.5px; color: #6d8fbd; background: rgba(140, 175, 215, .16); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: transform .13s var(--ynp-ease); }
.ynp-hk-chips span:active { transform: scale(.92); }
.ynp-hk-days { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.ynp-hk-days label { font-size: 12px; color: var(--ynp-muted); margin-right: 2px; }
.ynp-hk-days span { flex: 1 1 0; text-align: center; font-size: 12.5px; color: var(--ynp-muted); background: rgba(120, 140, 170, .1); border-radius: 11px; padding: 8px 0; cursor: pointer; border: 1.5px solid transparent; transition: all .16s var(--ynp-ease); }
.ynp-hk-days span.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7c95b8, #5c7396); font-weight: 600; box-shadow: 0 4px 10px rgba(110, 140, 180, .28); }
.ynp-hk-days span:active { transform: scale(.95); }
.ynp-hk-go { width: 100%; margin-top: 16px; border: none; border-radius: 15px; padding: 13px 0; font-size: 14px; font-weight: 600; color: #fff; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, #7c95b8, #5c7396); box-shadow: 0 7px 18px rgba(110, 140, 180, .3); transition: transform .15s var(--ynp-ease), filter .15s; }
.ynp-hk-go:active { transform: scale(.97); filter: brightness(.94); }
.ynp-hk-tip { margin-top: 10px; font-size: 11px; color: var(--ynp-faint); text-align: center; }

/* 第二步：TA在拆 */
.ynp-hk-load { padding: 42px 0 46px; text-align: center; }
.ynp-hk-load b { display: block; margin-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--ynp-ink); }
.ynp-hk-load span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ynp-faint); }
.ynp-hk-dots { display: flex; gap: 6px; justify-content: center; }
.ynp-hk-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9fb6d4; animation: ynp-hk-bt 1.15s ease-in-out infinite; }
.ynp-hk-dots i:nth-child(2) { animation-delay: .16s; }
.ynp-hk-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ynp-hk-bt { 0%, 100% { transform: translateY(0); opacity: .42; } 45% { transform: translateY(-6px); opacity: 1; } }

/* 第三步：确认清单 */
.ynp-hk-pv-h { padding: 2px 2px 10px; }
.ynp-hk-pv-h b { display: block; font-size: 15px; font-weight: 600; color: var(--ynp-ink-2); }
.ynp-hk-pv-h span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ynp-muted); }
.ynp-hk-pv { border-radius: 15px; background: rgba(120, 140, 170, .08); padding: 3px 12px; }
.ynp-hk-pv-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.ynp-hk-pv-row + .ynp-hk-pv-row { border-top: 1px solid rgba(120, 140, 170, .12); }
.ynp-hk-pv-row .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(140deg, #8fb6e6, #ffc48a); }
.ynp-hk-pv-row .tx { flex: 1 1 auto; min-width: 0; }
.ynp-hk-pv-row .tx b { display: block; font-size: 13px; font-weight: 500; color: var(--ynp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-hk-pv-row .tx i { font-style: normal; font-size: 10.5px; color: var(--ynp-faint); }
.ynp-hk-pv-row .del { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--ynp-faint); cursor: pointer; border-radius: 8px; transition: transform .13s var(--ynp-ease); }
.ynp-hk-pv-row .del svg { width: 13px; height: 13px; }
.ynp-hk-pv-row .del:active { transform: scale(.85); }
.ynp-hk-pv-empty { padding: 22px 0; text-align: center; font-size: 12px; color: var(--ynp-faint); }
.ynp-hk-addrow { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.ynp-hk-addrow input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: rgba(120, 140, 170, .1); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--ynp-ink); font-family: inherit; }
.ynp-hk-addrow input::placeholder { color: var(--ynp-faint); }
.ynp-hk-addrow span { flex: 0 0 auto; font-size: 12.5px; color: #6d8fbd; background: rgba(140, 175, 215, .16); border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: transform .13s var(--ynp-ease); }
.ynp-hk-addrow span:active { transform: scale(.93); }
.ynp-hk-btns { display: flex; gap: 9px; margin-top: 16px; }
.ynp-hk-btns button { flex: 1 1 0; border: none; border-radius: 15px; padding: 12px 0; font-size: 13.5px; font-weight: 600; color: #fff; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, #7c95b8, #5c7396); box-shadow: 0 6px 16px rgba(110, 140, 180, .28); transition: transform .15s var(--ynp-ease), filter .15s; }
.ynp-hk-btns button.ghost { flex: 0 0 40%; color: var(--ynp-muted); background: rgba(120, 140, 170, .12); box-shadow: none; font-weight: 500; }
.ynp-hk-btns button:active { transform: scale(.97); filter: brightness(.95); }

/* ---------- 目标达成庆祝层 ---------- */
.ynp-hk-cele { position: absolute; inset: 0; z-index: 54; display: flex; align-items: center; justify-content: center; background: rgba(232, 238, 246, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: ynp-fade .26s var(--ease-out-quart); overflow: hidden; }
.ynp-hk-cele.closing { animation: ynp-fade .22s var(--ease-in-quart) reverse forwards; }
.ynp-hk-cele-bits { position: absolute; inset: 0; pointer-events: none; }
.ynp-hk-cele-bits i { position: absolute; top: -14px; width: var(--w); height: calc(var(--w) * 1.7); border-radius: 2px; background: var(--c); opacity: .9; animation: ynp-hk-fall 2.9s var(--d) cubic-bezier(.35, .1, .6, 1) forwards; }
@keyframes ynp-hk-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translateY(760px) rotate(var(--r)); opacity: 0; } }

.ynp-hk-cele-card { position: relative; width: 78%; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; padding: 26px 20px 20px; text-align: center; box-shadow: 0 18px 44px rgba(110, 135, 175, .3); animation: ynp-hk-cele-in .5s var(--spring-bouncy); }
@keyframes ynp-hk-cele-in { from { transform: scale(.82) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.ynp-hk-medal { display: flex; justify-content: center; margin-bottom: 12px; }
.ynp-hk-medal span { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(140deg, #8fb6e6, #9ad0d8 55%, #ffc48a); box-shadow: 0 10px 24px rgba(150, 180, 215, .45); animation: ynp-hk-medal 2.6s ease-in-out infinite; }
.ynp-hk-medal span svg { width: 30px; height: 30px; }
@keyframes ynp-hk-medal { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.ynp-hk-cele-card > b { display: block; font-size: 18px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: 1px; }
.ynp-hk-cele-card > p { margin: 6px 0 0; font-size: 12.5px; color: var(--ynp-muted); }
.ynp-hk-cele-num { display: flex; justify-content: center; gap: 14px; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--ynp-hair); border-bottom: 1px solid var(--ynp-hair); }
.ynp-hk-cele-num span { font-size: 10.5px; color: var(--ynp-faint); display: flex; flex-direction: column; gap: 2px; }
.ynp-hk-cele-num em { font-style: normal; font-family: var(--ynp-en); font-size: 19px; font-weight: 700; color: #6d8fbd; }
.ynp-hk-cele-say { margin-top: 14px; font-size: 12.5px; line-height: 1.75; color: var(--ynp-muted); min-height: 34px; opacity: .6; transition: opacity .3s; }
.ynp-hk-cele-say.in { color: var(--ynp-ink); opacity: 1; animation: ynp-hk-say .4s var(--ease-out-quart); }
@keyframes ynp-hk-say { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ynp-hk-cele-ok { margin-top: 16px; border: none; border-radius: 14px; padding: 11px 34px; font-size: 13.5px; font-weight: 600; color: #fff; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, #7c95b8, #5c7396); box-shadow: 0 7px 18px rgba(110, 140, 180, .3); transition: transform .15s var(--ynp-ease); }
.ynp-hk-cele-ok:active { transform: scale(.95); }

/* ---------- 深色模式随主干 ---------- */
@media (prefers-color-scheme: dark) {
  .ynp-hk-sheet { background: rgba(26, 33, 47, .96); }
  .ynp-hk-cele { background: rgba(20, 26, 38, .74); }
  .ynp-hk-cele-card { background: rgba(30, 38, 54, .92); border-color: rgba(255, 255, 255, .1); }
}

@media (prefers-reduced-motion: reduce) {
  .ynp-hk-task.on .ynp-hk-box, .ynp-hk-fire.on, .ynp-hk-medal span, .ynp-hk-dots i { animation: none; }
  .ynp-hk-task.on .ynp-hk-box svg { stroke-dashoffset: 0; animation: none; }
  .ynp-hk-cele-bits { display: none; }
  .ynp-hk-cele-card, .ynp-hk-sheet, .ynp-hk-mask { animation: none; }
}

/* ==================== 功能: live ==================== */
/* ==================== 功能: live ==================== */
/* live 草稿 · 直播间（通用直播暗色：近黑底 + 玻璃弹幕条 + 强调粉 #fb7299 强调，克制用色）
   作用域：所有样式都收在 .ynp-liv-dark / .ynp-liv-* 下，不外溢污染清露白主题 */

.ynp-liv-dark {
  --liv-bg: #131419;
  --liv-bg2: #1a1c23;
  --liv-ink: #eef1f6;
  --liv-sub: rgba(238, 241, 246, .52);
  --liv-faint: rgba(238, 241, 246, .3);
  --liv-line: rgba(255, 255, 255, .085);
  --liv-glass: rgba(20, 22, 29, .5);
  --liv-pink: #fb7299;
  --liv-gold: #ffc46b;
}

/* ---------- 整页深色 + navbar 化妆 ---------- */
.ynp-app-page.ynp-liv-dark { background: var(--liv-bg); }
.ynp-liv-dark .ynp-navbar { background: rgba(15, 16, 21, .86); border-bottom: 1px solid var(--liv-line); }
.ynp-liv-dark .ynp-nav-title { color: var(--liv-ink); }
.ynp-liv-dark .ynp-nav-back, .ynp-liv-dark .ynp-nav-action { color: var(--liv-pink); }
.ynp-liv-dark .ynp-nav-back:hover, .ynp-liv-dark .ynp-nav-action:hover { background: rgba(251, 114, 153, .12); }
.ynp-liv-dark .ynp-nav-action svg { width: 21px; height: 21px; }

/* ============ 入口页 ============ */
.ynp-liv-home { padding: 4px 14px 16px; }

/* 主播卡：渐变底 + 头像 + 关注 */
.ynp-liv-owner-card {
  position: relative; overflow: hidden; border-radius: 18px;
  display: flex; align-items: center; gap: 11px; padding: 14px 13px;
  background: var(--liv-bg2); border: 1px solid var(--liv-line); margin-top: 8px;
}
.ynp-liv-oc-bg { position: absolute; inset: 0; opacity: .5; }
.ynp-liv-oc-av { position: relative; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(251, 114, 153, .5); }
.ynp-liv-oc-meta { position: relative; flex: 1; min-width: 0; }
.ynp-liv-oc-name { font-size: 16px; font-weight: 600; color: var(--liv-ink); display: flex; align-items: center; gap: 6px; }
.ynp-liv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--liv-pink); box-shadow: 0 0 8px var(--liv-pink); animation: ynp-liv-blink 1.6s ease-in-out infinite; }
@keyframes ynp-liv-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ynp-liv-oc-sub { font-size: 12px; color: var(--liv-sub); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ynp-liv-follow {
  position: relative; flex: 0 0 auto; font-size: 12.5px; padding: 6px 15px; border-radius: 999px;
  background: var(--liv-pink); color: #fff; cursor: pointer; font-weight: 500;
  transition: transform .14s var(--ynp-ease), background .16s var(--ynp-ease);
}
.ynp-liv-follow:active { transform: scale(.92); }
.ynp-liv-follow.on { background: rgba(255, 255, 255, .1); color: var(--liv-sub); }

/* 正在直播大卡 */
.ynp-liv-nowcard {
  position: relative; overflow: hidden; border-radius: 18px; height: 152px;
  margin-top: 13px; border: 1px solid var(--liv-line); cursor: pointer;
  transition: transform .16s var(--ynp-ease);
}
.ynp-liv-nowcard:active { transform: scale(.985); }
.ynp-liv-nc-bg { position: absolute; inset: 0; }
.ynp-liv-nowcard::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background: linear-gradient(180deg, transparent, rgba(10, 11, 15, .86));
}
.ynp-liv-nc-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: #fff; background: var(--liv-pink); padding: 3px 9px; border-radius: 999px;
}
.ynp-liv-nowcard .ynp-liv-nc-tag { position: absolute; left: 12px; top: 12px; z-index: 2; }
.ynp-liv-nc-tag i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ynp-liv-blink 1.2s ease-in-out infinite; }
.ynp-liv-nc-view {
  position: absolute; right: 12px; top: 12px; z-index: 2; font-size: 11.5px; color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 3px 10px; border-radius: 999px;
}
/* right 要让开右下角「进直播间」胶囊的整宽（约 88px）+ 留白，否则副标题会钻到按钮底下 */
.ynp-liv-nc-foot { position: absolute; left: 13px; right: 102px; bottom: 12px; z-index: 2; }
.ynp-liv-nc-t { font-size: 15.5px; font-weight: 600; color: #fff; }
.ynp-liv-nc-s { font-size: 11.5px; color: rgba(255, 255, 255, .6); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-liv-nc-go {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; font-size: 12.5px; font-weight: 500;
  color: #fff; background: var(--liv-pink); padding: 6px 13px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(251, 114, 153, .4); transition: transform .14s var(--ynp-ease);
}
.ynp-liv-nc-go:active { transform: scale(.92); }

/* 未开播卡 */
.ynp-liv-offcard {
  margin-top: 13px; border-radius: 18px; padding: 26px 18px 20px; text-align: center;
  background: var(--liv-bg2); border: 1px solid var(--liv-line);
}
.ynp-liv-off-i { color: var(--liv-faint); }
.ynp-liv-off-i svg { width: 38px; height: 38px; }
.ynp-liv-off-t { font-size: 15px; color: var(--liv-ink); margin-top: 8px; }
.ynp-liv-off-s { font-size: 12.5px; color: var(--liv-sub); margin-top: 6px; line-height: 1.75; }
.ynp-liv-off-btn {
  display: inline-block; margin-top: 15px; font-size: 13px; color: #fff; background: var(--liv-pink);
  padding: 8px 26px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 5px 16px rgba(251, 114, 153, .34); transition: transform .14s var(--ynp-ease);
}
.ynp-liv-off-btn:active { transform: scale(.94); }

/* 预告分区标题 */
.ynp-liv-sec {
  display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--liv-ink); padding: 20px 2px 10px;
}
.ynp-liv-sec span { font-size: 11.5px; font-weight: 400; color: var(--liv-faint); }

/* 预告行 */
.ynp-liv-show {
  display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 14px;
  background: var(--liv-bg2); border: 1px solid var(--liv-line); margin-bottom: 10px; cursor: pointer;
  transition: transform .14s var(--ynp-ease), border-color .18s var(--ynp-ease);
}
.ynp-liv-show:active { transform: scale(.985); }
.ynp-liv-show.live { border-color: rgba(251, 114, 153, .4); }
.ynp-liv-sh-cover {
  position: relative; flex: 0 0 auto; width: 62px; height: 46px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
}
.ynp-liv-sh-cover span { font-size: 10.5px; color: rgba(255, 255, 255, .7); letter-spacing: 1px; }
.ynp-liv-sh-main { flex: 1; min-width: 0; }
.ynp-liv-sh-t { font-size: 13.5px; font-weight: 500; color: var(--liv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-liv-sh-s { font-size: 11.5px; color: var(--liv-sub); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ynp-liv-sh-hm { font-size: 11px; color: var(--liv-faint); margin-top: 4px; }
.ynp-liv-sh-hm b { color: var(--liv-pink); font-weight: 600; }
.ynp-liv-sh-btn {
  flex: 0 0 auto; font-size: 11.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  color: var(--liv-sub); background: rgba(255, 255, 255, .07);
  transition: transform .14s var(--ynp-ease);
}
.ynp-liv-sh-btn:active { transform: scale(.9); }
.ynp-liv-sh-btn.on { color: var(--liv-faint); }
.ynp-liv-sh-btn.go { color: #fff; background: var(--liv-pink); }
.ynp-liv-foot { text-align: center; font-size: 11.5px; color: var(--liv-faint); padding: 14px 8px 4px; }

/* ============ 直播间 ============ */
/* 整页固定分区，只有弹幕列滚动 */
.ynp-liv-room-page .ynp-app-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.ynp-liv-room { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; }

/* ---------- 画面区 ---------- */
.ynp-liv-stage { position: relative; flex: 0 0 auto; height: 176px; overflow: hidden; }
.ynp-liv-orb { position: absolute; border-radius: 50%; filter: blur(26px); pointer-events: none; }
.ynp-liv-orb.a { width: 130px; height: 130px; left: -26px; top: -34px; background: rgba(255, 210, 150, .17); animation: ynp-liv-drift 11s ease-in-out infinite; }
.ynp-liv-orb.b { width: 108px; height: 108px; right: -22px; bottom: -30px; background: rgba(150, 180, 255, .15); animation: ynp-liv-drift 14s ease-in-out infinite reverse; }
@keyframes ynp-liv-drift { 0%, 100% { transform: none; } 50% { transform: translate(16px, 12px) scale(1.12); } }

.ynp-liv-badges { position: absolute; left: 13px; right: 13px; top: 11px; display: flex; align-items: center; justify-content: space-between; }
.ynp-liv-vw {
  font-size: 11.5px; color: rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.ynp-liv-hint { position: absolute; left: 14px; right: 14px; top: 46px; font-size: 11.5px; color: rgba(255, 255, 255, .34); letter-spacing: .5px; }

/* TA的状态文字：切换时淡入上浮 */
.ynp-liv-status {
  position: absolute; left: 14px; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .88); letter-spacing: .5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.ynp-liv-status.in { animation: ynp-liv-fadeup .55s var(--ease-out-quart); }
@keyframes ynp-liv-fadeup { from { opacity: 0; transform: translateY(calc(-50% + 10px)); } to { opacity: 1; transform: translateY(-50%); } }

/* TA说话的悬浮字幕 */
.ynp-liv-say {
  position: absolute; left: 13px; right: 13px; bottom: 12px;
  font-size: 13px; line-height: 1.6; color: #fff; padding: 8px 12px; border-radius: 12px;
  background: rgba(251, 114, 153, .2); border: 1px solid rgba(251, 114, 153, .34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s var(--ease-out-quart), transform .3s var(--ease-out-quart);
}
.ynp-liv-say.on { opacity: 1; transform: none; }
.ynp-liv-say.dim { color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); border-color: var(--liv-line); }

/* ---------- 主播条 ---------- */
.ynp-liv-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid var(--liv-line); }
.ynp-liv-bar-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ynp-liv-bar-meta { flex: 1; min-width: 0; }
.ynp-liv-bar-n { font-size: 13.5px; color: var(--liv-ink); font-weight: 500; }
.ynp-liv-bar-s { font-size: 11px; color: var(--liv-faint); margin-top: 2px; }
.ynp-liv-bar .ynp-liv-follow { padding: 5px 13px; font-size: 12px; }

/* ---------- 弹幕列：玻璃条 ---------- */
/* 注意：这里绝不能加 scroll-behavior:smooth —— 平滑滚动期间 scrollTop 读到的还是起始值，
   ynplivPush 的「是否贴底」判定会永远算成"用户翻上去了"，弹幕从此停在顶端不再自动滚 */
.ynp-liv-dm { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 4px; }
.ynp-liv-dm::-webkit-scrollbar { width: 0; }
/* 每条独占一行、但气泡宽度贴着文字（不能用 inline-block，短弹幕会挤成一排） */
.ynp-liv-dm-i {
  display: block; width: fit-content; max-width: 100%; margin-bottom: 6px; padding: 5px 10px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.6; color: rgba(238, 241, 246, .84);
  background: var(--liv-glass); border: 1px solid var(--liv-line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  word-break: break-word;
  animation: ynp-liv-dmin .34s var(--ease-out-quart);
}
@keyframes ynp-liv-dmin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.ynp-liv-dm-i b { font-weight: 500; margin-right: 5px; }
.ynp-liv-bdg {
  font-style: normal; font-size: 9.5px; line-height: 1; padding: 2px 5px; border-radius: 4px; margin-right: 5px;
  color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .11); vertical-align: 1px;
}
.ynp-liv-bdg.host { color: #fff; background: var(--liv-pink); }
.ynp-liv-dm-i.host { background: rgba(251, 114, 153, .13); border-color: rgba(251, 114, 153, .28); color: #ffe3ec; }
.ynp-liv-dm-i.me { background: rgba(120, 160, 220, .16); border-color: rgba(120, 160, 220, .3); }
.ynp-liv-dm-i.me b { color: #a9c8ee !important; }
/* 礼物弹幕：金色横条 */
.ynp-liv-dm-i.gift {
  display: flex; align-items: center; gap: 6px; color: var(--liv-gold);
  background: linear-gradient(90deg, rgba(255, 196, 107, .2), rgba(255, 196, 107, .05));
  border-color: rgba(255, 196, 107, .34);
}
.ynp-liv-gemo { font-size: 15px; }
.ynp-liv-gtx { color: rgba(255, 196, 107, .78); }

/* ---------- 礼物栏 ---------- */
.ynp-liv-gbar { flex: 0 0 auto; padding: 8px 12px 6px; border-top: 1px solid var(--liv-line); background: rgba(255, 255, 255, .02); }
.ynp-liv-gbal { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--liv-faint); padding: 0 2px 6px; }
.ynp-liv-gbal b { font-weight: 500; color: var(--liv-gold); font-variant-numeric: tabular-nums; }
.ynp-liv-glist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ynp-liv-g {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px;
  border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, .05); border: 1px solid var(--liv-line);
  transition: transform .14s var(--ynp-ease), background .16s var(--ynp-ease), border-color .16s var(--ynp-ease);
}
.ynp-liv-g:active { transform: scale(.9); background: rgba(255, 255, 255, .1); }
.ynp-liv-g-e { font-size: 20px; line-height: 1.15; }
.ynp-liv-g-n { font-size: 10.5px; color: var(--liv-sub); }
.ynp-liv-g-c { font-size: 10.5px; color: var(--liv-gold); font-variant-numeric: tabular-nums; }
.ynp-liv-g.t3 { border-color: rgba(255, 196, 107, .24); }
.ynp-liv-g.t4 { border-color: rgba(251, 114, 153, .34); background: rgba(251, 114, 153, .09); }
.ynp-liv-g.t4 .ynp-liv-g-c { color: var(--liv-pink); }

/* ---------- 发弹幕 ---------- */
.ynp-liv-send { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; }
.ynp-liv-send input {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, .07); border: 1px solid var(--liv-line);
  border-radius: 999px; padding: 9px 14px; color: var(--liv-ink); font-size: 13px; outline: none;
  font-family: inherit; transition: border-color .18s var(--ynp-ease);
}
.ynp-liv-send input::placeholder { color: var(--liv-faint); }
.ynp-liv-send input:focus { border-color: rgba(251, 114, 153, .45); }
.ynp-liv-sbtn {
  flex: 0 0 auto; border: none; border-radius: 999px; padding: 9px 17px; cursor: pointer;
  background: var(--liv-pink); color: #fff; font-size: 13px; font-family: inherit;
  transition: transform .14s var(--ynp-ease);
}
.ynp-liv-sbtn:active { transform: scale(.92); }

/* ---------- 全屏礼物特效（挂 .ynp-screen）----------
   z=39：盖过 .ynp-view 页面内容与状态栏(30)，但低于灵动岛(40)/homebar(45)/锁屏(58)/toast(60)
   —— 特效可以糊满屏，但不该盖住"硬件"和系统提示；pointer-events:none 全程不挡交互 */
.ynp-liv-fx { position: absolute; inset: 0; z-index: 39; pointer-events: none; overflow: hidden; }
.ynp-liv-fx-core {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-size: 64px; line-height: 1; animation: ynp-liv-pop 1.4s var(--ease-out-quart) forwards;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
}
.ynp-liv-fx.t3 .ynp-liv-fx-core { font-size: 78px; animation-duration: 2s; }
.ynp-liv-fx.t4 .ynp-liv-fx-core { font-size: 92px; animation-duration: 2.5s; }
@keyframes ynp-liv-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  38% { transform: translate(-50%, -50%) scale(1); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.05); }
}
.ynp-liv-fx-float { position: absolute; bottom: 22%; animation: ynp-liv-float 1.5s var(--ease-out-quart) forwards; }
@keyframes ynp-liv-float {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-190px) scale(1.05); }
}
.ynp-liv-fx-fall { position: absolute; top: -8%; animation: ynp-liv-fall 2s linear forwards; }
@keyframes ynp-liv-fall {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translateY(560px) rotate(140deg); }
}
.ynp-liv-fx-streak {
  position: absolute; width: 150px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 180, .95), transparent);
  transform: rotate(34deg); opacity: 0; animation: ynp-liv-streak 1.1s var(--ease-out-quart) forwards;
}
@keyframes ynp-liv-streak {
  0% { opacity: 0; transform: rotate(34deg) translateX(-180px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(34deg) translateX(300px); }
}
.ynp-liv-fx-banner {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center; padding: 9px 12px;
  font-size: 13.5px; color: #fff2d8; letter-spacing: .5px;
  background: linear-gradient(90deg, transparent, rgba(251, 114, 153, .55), rgba(255, 196, 107, .5), transparent);
  animation: ynp-liv-banner 2.5s var(--ease-out-quart) forwards;
}
.ynp-liv-fx-banner b { color: #fff; font-weight: 600; }
@keyframes ynp-liv-banner {
  0% { opacity: 0; transform: translateX(-100%); }
  20% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(100%); }
}

/* ---------- 降级：省电/无障碍偏好下关掉持续动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ynp-liv-orb, .ynp-liv-dot, .ynp-liv-nc-tag i { animation: none; }
  .ynp-liv-status.in, .ynp-liv-dm-i { animation: none; }
  .ynp-liv-fx-streak, .ynp-liv-fx-fall, .ynp-liv-fx-float { display: none; }
  .ynp-liv-fx-core, .ynp-liv-fx-banner { animation-duration: 1s; }
}

/* ==================== 功能: aiassist ==================== */
/* ============================================================
   AI 回复参考 · aiassist —— 聊天输入框上方「✨帮我想」候选条
   1:1(.ynp-chat-input) 与自定义群聊(.ynp-gc-input) 共用同一套样式。
   视觉:清露白玻璃 —— 与输入区拼成一条连续的白玻璃工具带,
   chip 毛玻璃细边 + 弹簧逐个入场,✨ 图标常驻微光呼吸。
   ============================================================ */

/* 候选栏本体:和输入区同一块玻璃,所以让下面的输入区去掉自己的上边线 */
.ynp-aia {
  position: relative; z-index: 2; flex: 0 0 auto;
  background: rgba(250, 251, 253, .82);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-top: .5px solid rgba(140, 160, 190, .16);
}
.ynp-aia + .ynp-chat-input, .ynp-aia + .ynp-gc-input { border-top: none; }

/* 横滑条:默认收起(max-height 0),展开才有高度 —— 不占常驻空间 */
.ynp-aia-rail {
  display: flex; align-items: stretch; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  max-height: 0; opacity: 0; padding: 0 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  transition: max-height .3s var(--ynp-ease), opacity .2s var(--ynp-ease), padding .3s var(--ynp-ease);
}
.ynp-aia-rail::-webkit-scrollbar { height: 0; }
.ynp-aia.open .ynp-aia-rail { max-height: 140px; opacity: 1; padding: 10px 12px 3px; }

/* 候选 chip:毛玻璃细边 + 内高光 */
.ynp-aia-chip {
  flex: 0 0 auto; max-width: 74%; scroll-snap-align: start; cursor: pointer;
  padding: 7px 12px 8px; border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  border: .5px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 5px 16px rgba(120, 140, 170, .16), 0 1px 0 rgba(255, 255, 255, .72) inset;
  transition: transform .16s var(--ynp-ease), box-shadow .16s var(--ynp-ease);
  animation: ynpaia-chip-in .34s var(--spring-bouncy) backwards;
}
.ynp-aia-chip:nth-child(1) { animation-delay: .02s; }
.ynp-aia-chip:nth-child(2) { animation-delay: .07s; }
.ynp-aia-chip:nth-child(3) { animation-delay: .12s; }
.ynp-aia-chip:nth-child(4) { animation-delay: .17s; }
.ynp-aia-chip:active { transform: scale(.95); box-shadow: 0 2px 8px rgba(120, 140, 170, .14); }
.ynp-aia-tone {
  display: inline-block; margin-bottom: 3px; padding: 1px 7px;
  font-size: 10px; line-height: 1.5; letter-spacing: .3px;
  color: #6f83a0; background: rgba(150, 175, 205, .16); border-radius: 7px;
}
.ynp-aia-txt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.45; color: var(--ynp-ink); word-break: break-word;
}

/* 换一批:圆钮，跟在三个 chip 后面 */
.ynp-aia-more {
  flex: 0 0 auto; align-self: center; width: 32px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ynp-icon);
  background: rgba(255, 255, 255, .68);
  border: .5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 4px 12px rgba(120, 140, 170, .14);
  transition: transform .16s var(--ynp-ease);
  animation: ynpaia-chip-in .34s var(--spring-bouncy) .2s backwards;
}
.ynp-aia-more svg { width: 15px; height: 15px; }
.ynp-aia-more:active { transform: scale(.88) rotate(-90deg); }

/* 触发行:✨ 按钮 + 一句淡提示(用过一次就不再出现) */
.ynp-aia-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 3px; }
.ynp-aia-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: #55688a;
  background: rgba(255, 255, 255, .66);
  border: .5px solid rgba(255, 255, 255, .78);
  box-shadow: 0 3px 10px rgba(120, 140, 170, .14);
  transition: transform .14s var(--ynp-ease), color .18s, background .18s;
}
.ynp-aia-btn:active { transform: scale(.93); }
.ynp-aia-btn.busy { pointer-events: none; opacity: .82; }
.ynp-aia.open .ynp-aia-btn { color: #4a7cc9; background: rgba(214, 231, 250, .7); }

/* ✨ 微光:缓慢呼吸的 drop-shadow，生成中停掉换成转圈 */
.ynp-aia-spark {
  display: inline-flex; color: #7fa8dd;
  filter: drop-shadow(0 0 3px rgba(140, 180, 235, .65));
  animation: ynpaia-glow 2.6s ease-in-out infinite;
}
.ynp-aia-spark svg { width: 14px; height: 14px; }
.ynp-aia-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.6px solid rgba(120, 150, 190, .28); border-top-color: #7fa8dd;
  animation: ynpaia-spin .7s linear infinite;
}
.ynp-aia-tip {
  flex: 1 1 auto; min-width: 0; font-size: 10.5px; color: var(--ynp-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ynp-aia.open .ynp-aia-tip, .ynp-aia.used .ynp-aia-tip { display: none; }

@keyframes ynpaia-chip-in {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ynpaia-glow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
@keyframes ynpaia-spin { to { transform: rotate(360deg); } }

/* 深色模式(跟随主干 prefers-color-scheme 的处理方式) */
@media (prefers-color-scheme: dark) {
  .ynp-aia { background: rgba(28, 35, 50, .74); border-top-color: rgba(150, 170, 200, .14); }
  .ynp-aia-chip {
    background: rgba(48, 58, 76, .7); border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
  }
  .ynp-aia-txt { color: #dbe3ee; }
  .ynp-aia-tone { color: #aabdd6; background: rgba(150, 175, 205, .2); }
  .ynp-aia-btn {
    background: rgba(48, 58, 76, .72); border-color: rgba(255, 255, 255, .1);
    color: #b9c8dd; box-shadow: none;
  }
  .ynp-aia.open .ynp-aia-btn { background: rgba(74, 124, 201, .3); color: #d5e3f7; }
  .ynp-aia-more {
    background: rgba(48, 58, 76, .72); border-color: rgba(255, 255, 255, .1);
    color: #a8b8cd; box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ynp-aia-chip, .ynp-aia-more { animation: none; }
  .ynp-aia-spark { animation: none; }
}

/* ==================== 功能: voice ==================== */
/* ============================================================
   voice · 语音输入（聊天输入行的麦克风按钮 + 录音波纹 + 长按提示）
   常态：沿用 .ynp-sticker-btn 的尺寸与线色（清露白），只加相对定位与波纹容器
   录音：图标转柔珊瑚红 + 两圈错拍扩散波纹；上滑取消态转灰
   前缀：.ynp-vin-*（仅 .ynp-gc-input 补一条 position:relative 供提示气泡定位）
   ============================================================ */

.ynp-gc-input { position: relative; }        /* 长按提示气泡的定位参照（.ynp-chat-input 主干已是 relative） */

.ynp-vin-btn { position: relative; overflow: visible; transition: color .18s var(--ynp-ease); }
.ynp-vin-btn svg { position: relative; z-index: 1; }

/* 波纹环：默认收着不占位，录音时才展开 */
.ynp-vin-ring {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 1.5px solid rgba(226,86,79,.55);
  opacity: 0; pointer-events: none; transform: scale(.55);
}

/* —— 录音中 —— */
.ynp-vin-btn.rec { color: #e2564f; }
.ynp-vin-btn.rec svg { animation: ynp-vin-beat 1.1s var(--ynp-ease) infinite; }
.ynp-vin-btn.rec .ynp-vin-ring { animation: ynp-vin-wave 1.6s cubic-bezier(.22,1,.36,1) infinite; }
.ynp-vin-btn.rec .ynp-vin-ring.d2 { animation-delay: .8s; }

/* —— 上滑取消态：变灰、波纹停手 —— */
.ynp-vin-btn.rec.cancel { color: var(--ynp-faint); }
.ynp-vin-btn.rec.cancel svg { animation: none; }
.ynp-vin-btn.rec.cancel .ynp-vin-ring { border-color: rgba(150,165,185,.45); animation-duration: 2.4s; }

@keyframes ynp-vin-wave {
  0%   { opacity: .75; transform: scale(.55); }
  70%  { opacity: .06; transform: scale(1.85); }
  100% { opacity: 0;   transform: scale(2); }
}
@keyframes ynp-vin-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

/* —— 长按提示气泡（贴在输入行正上方，深玻璃小药丸） —— */
.ynp-vin-tip {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 8px; padding: 6px 13px; border-radius: 13px;
  background: rgba(42,52,68,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #f2f5f9; font-size: 12px; letter-spacing: .3px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(60,80,110,.28);
  pointer-events: none; z-index: 6;
  animation: ynp-vin-tip-in .22s var(--spring-bouncy) both;
}
.ynp-vin-tip::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: rgba(42,52,68,.86);
}
.ynp-vin-tip.danger { background: rgba(200,72,66,.9); }
.ynp-vin-tip.danger::after { border-top-color: rgba(200,72,66,.9); }

@keyframes ynp-vin-tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* 深色壁纸/深色系统下的提示气泡与波纹微调 */
@media (prefers-color-scheme: dark) {
  .ynp-vin-tip { background: rgba(18,24,36,.9); }
  .ynp-vin-tip::after { border-top-color: rgba(18,24,36,.9); }
  .ynp-vin-btn.rec { color: #ef6f68; }
  .ynp-vin-ring { border-color: rgba(239,111,104,.5); }
}

/* 降级动效：只留静态高亮，不做扩散 */
@media (prefers-reduced-motion: reduce) {
  .ynp-vin-btn.rec svg { animation: none; }
  .ynp-vin-btn.rec .ynp-vin-ring { animation: none; opacity: .35; transform: scale(1.25); }
  .ynp-vin-tip { animation: none; }
}

/* ==================== 功能: A-base ==================== */
/* evcard · 跨 App 事件回执卡（.ynp-ev-*）：邀请卡=「点我去玩」，事件卡=「小票回执」
   —— 更窄、更淡、图标砖不上高饱和渐变而是同色系浅底细线，脚条一道撕线 + 右下淡淡的「查看›」
   基座沿用主干 .ynp-link-card（玻璃/圆角/:active 缩放），下面全部用 .ynp-link-card.ynp-ev-card 提权覆写 */

.ynp-link-card.ynp-ev-card {
  width: 210px; border-radius: 17px;
  background: rgba(255, 255, 255, .8);
  border: .5px solid rgba(140, 160, 190, .15);
  box-shadow: 0 2px 9px rgba(120, 140, 170, .09);
  animation: ynp-ev-in .3s var(--ease-out-quart) both;
}
.ynp-msg.me .ynp-link-card.ynp-ev-card { background: rgba(246, 249, 253, .84); }
@keyframes ynp-ev-in { from { opacity: 0; transform: translateY(5px) scale(.985); } to { opacity: 1; transform: none; } }

.ynp-ev-main { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px 8px; }
.ynp-ev-ic {
  width: 29px; height: 29px; border-radius: 9px; flex: 0 0 auto; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ynp-icon); background: rgba(150, 170, 200, .13);
  box-shadow: none;   /* 回执不发光：跟邀请卡的 .ynp-link-ic 投影拉开层级 */
}
.ynp-ev-ic svg { width: 17px; height: 17px; }
.ynp-ev-tx { flex: 1; min-width: 0; }
.ynp-ev-t {
  font-size: 12.8px; font-weight: 600; color: #3a4655; line-height: 1.34;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ynp-ev-s {
  font-size: 10.8px; color: #97a4b6; line-height: 1.36; margin-top: 2.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 撕线脚条：虚线 = 小票的撕口 */
.ynp-ev-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5.5px 11px 7px; border-top: 1px dashed rgba(140, 160, 190, .26);
}
.ynp-ev-tag { font-size: 10px; color: #a8b3c3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ynp-ev-go { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; font-size: 10px; color: #8fa2bb; font-weight: 550; opacity: .9; }
.ynp-ev-go i { font-style: normal; font-size: 13px; line-height: 1; transform: translateY(-.5px); }
.ynp-link-card.ynp-ev-card:active .ynp-ev-go { opacity: 1; color: #6d87a8; }

/* ---------- 十个 kind 的图标着色（浅底 + 同色细线，低饱和克制向） ---------- */
.ynp-ev-k-express { color: #b8804f; background: rgba(192, 133, 82, .13); }
.ynp-ev-k-farm { color: #6b9482; background: rgba(111, 151, 132, .14); }
.ynp-ev-k-pet { color: #bd8478; background: rgba(196, 138, 125, .14); }
.ynp-ev-k-theater { color: #9585b5; background: rgba(155, 134, 184, .14); }
.ynp-ev-k-habit { color: #5f8fa8; background: rgba(95, 143, 168, .14); }
.ynp-ev-k-badge { color: #bd9c54; background: rgba(201, 167, 95, .15); }
.ynp-ev-k-live { color: #c0666e; background: rgba(196, 106, 114, .13); }
.ynp-ev-k-voucher2 { color: #c4879a; background: rgba(207, 143, 163, .14); }
.ynp-ev-k-alarm { color: #7d8ea6; background: rgba(125, 142, 166, .15); }
.ynp-ev-k-dailyq { color: #6b8cb3; background: rgba(111, 143, 181, .14); }

/* ---------- 深色模式（跟随主干 prefers-color-scheme 处理方式） ---------- */
@media (prefers-color-scheme: dark) {
  .ynp-link-card.ynp-ev-card {
    background: rgba(40, 47, 60, .78);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 2px 9px rgba(0, 0, 0, .28);
  }
  .ynp-msg.me .ynp-link-card.ynp-ev-card { background: rgba(44, 52, 67, .8); }
  .ynp-ev-ic { background: rgba(255, 255, 255, .07); }
  .ynp-ev-t { color: #cdd6e2; }
  .ynp-ev-s { color: #8b97a9; }
  .ynp-ev-foot { border-top-color: rgba(255, 255, 255, .12); }
  .ynp-ev-tag { color: #6f7c8e; }
  .ynp-ev-go { color: #93a5bd; }
}

/* 动效降级：跟随系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .ynp-link-card.ynp-ev-card { animation: none; }
}

/* ==================== 功能: B-express-farm-pet ==================== */
/* ev-B · 快递/农场/宠物事件卡：只补 farm / pet 两个 kind 的图标砖配色
   （express 的 .ynp-link-k-express 主干 2618 行已有，不重复定义；
     卡片本体结构/尺寸全部复用互联层 .ynp-link-* 现成样式，本文件不新增任何结构）
   —— 若地基模块 A 已给 farm / pet 配色，本文件可整段删除，不影响功能 */

/* 农场：田垄青（融进 .ynp-link-k-game 的低饱和绿族，比它更暖一点） */
.ynp-link-k-farm { background: linear-gradient(150deg, #a8c090, #7d9a63); }
/* 宠物：奶猫褐（暖灰橘，和快递的牛皮纸色拉开一档明度） */
.ynp-link-k-pet { background: linear-gradient(150deg, #cfae9b, #ab8571); }

/* ==================== 功能: C-theater-habit-badge ==================== */
/* 跨 App 事件卡片化 · 分片 C（剧场 / 打卡 / 成就）——本分片零新增样式。
   理由：三处事件全部复用地基模块 A 的事件卡，kind（theater / habit / badge）
   的图标砖配色 .ynp-link-k-theater / -habit / -badge 与卡片骨架都由 A 统一出，
   这里再写一份会和 A 的定义打架（四份并行合入，同名规则后者覆盖前者）。
   所以本文件只作占位，合入时可直接跳过，不需要往 style.css 追加任何内容。 */

/* ==================== 功能: D-live-shop-alarm-dailyq ==================== */
/* 当前角色小手机 · 事件卡片化 D 组（直播 / TA送券 / 闹钟未接 / 每日提问）
   —— 本组不需要任何新 CSS，这个文件只是把结论写下来，别再往里加东西 ——

   四张卡全部走地基 A 的事件小票皮（.ynp-ev-card / .ynp-ev-ic .ynp-ev-k-<kind>），
   而 A 已经把这四个 kind 的配色都带上了（index.js 里 YNPEV_KINDS 注册 + style.css）：
     .ynp-ev-k-live     { color: #c0666e; background: rgba(196, 106, 114, .13); }
     .ynp-ev-k-voucher2 { color: #c4879a; background: rgba(207, 143, 163, .14); }
     .ynp-ev-k-alarm    { color: #7d8ea6; background: rgba(125, 142, 166, .15); }
     .ynp-ev-k-dailyq   { color: #6b8cb3; background: rgba(111, 143, 181, .14); }

   注意别照着邀请卡的 .ynp-link-k-* 去写这四个 kind：事件卡渲染走 ynpevCardHtml，
   吃的是 .ynp-ev-k-*，写到 .ynp-link-k-* 上不会生效（早稿踩过，留个记号）。
   本组也不新增任何 DOM/页面，故无 .ynp-evd-* 类。 */

/* 事件卡:同一串连发时不重复显示头像(卡片自带来源脚条,头像只在第一张显示) */
.ynp-msg:has(> .ynp-ev-card) + .ynp-msg:has(> .ynp-ev-card) > .ynp-msg-av { visibility: hidden; }

/* ==================== 功能: steps ==================== */
/* ============================================================
   当前角色小手机 · steps 足迹（前缀 .ynp-ft-）
   清晨色调：晨曦橘 × 清露白，页头是刚亮的天，地图是一条蜿蜒走过的路
   与钱包(.ynpe-*)的玫瑰系刻意错开——那边是成绩单，这边是回忆
   ============================================================ */

.ynp-app-page.ynp-ft {
  --ft-dawn: #e0a882;                       /* 晨曦橘（低饱和，不粉不艳） */
  --ft-dawn-d: #b0714b;                     /* 深一档，用于数字/强调字 */
  --ft-dawn-f: rgba(224, 168, 130, .13);    /* 淡底 */
  --ft-sky: #9db1cd;                        /* 清晨天蓝灰 */
  background: linear-gradient(180deg, #fdf3ea 0%, #f8f2ec 24%, #f0f2f6 62%, #eaeff6 100%);
}
.ynp-app-page.ynp-ft .ynp-navbar {
  background: rgba(253, 243, 234, .84);
  border-bottom: 1px solid rgba(190, 158, 132, .16);
}
.ynp-ft-wrap { padding-bottom: 14px; }

/* ---------- 页头：晨光卡 ---------- */
.ynp-ft-hero {
  position: relative; overflow: hidden;
  margin: 12px 14px 0; padding: 20px 18px 17px; border-radius: 22px;
  background: linear-gradient(165deg, #fff6ee 0%, #fdece0 46%, #f0f1f6 100%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--ynp-soft-sh);
}
/* 斜射的晨光 */
.ynp-ft-rays {
  position: absolute; inset: -40% -30% auto -30%; height: 180%;
  background:
    linear-gradient(102deg, transparent 46%, rgba(255, 255, 255, .5) 50%, transparent 54%),
    linear-gradient(96deg, transparent 62%, rgba(255, 255, 255, .34) 66%, transparent 70%),
    radial-gradient(48% 40% at 84% 12%, rgba(240, 190, 150, .38), transparent 72%);
  pointer-events: none;
}
.ynp-ft-sun {
  position: absolute; right: 14px; top: 11px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ft-dawn); opacity: .72;
  animation: ynp-ft-rise 5.5s ease-in-out infinite;
}
.ynp-ft-sun svg { width: 30px; height: 30px; }
@keyframes ynp-ft-rise { 0%, 100% { transform: translateY(2px); opacity: .62; } 50% { transform: translateY(-3px); opacity: .86; } }

.ynp-ft-htitle { position: relative; font-size: 20px; font-weight: 700; letter-spacing: 1.4px; color: var(--ynp-ink-2); }
.ynp-ft-hsub { position: relative; margin-top: 7px; font-size: 12.5px; color: var(--ynp-muted); }
.ynp-ft-hsub b { font-family: var(--ynp-en); font-size: 15px; font-weight: 700; color: var(--ft-dawn-d); margin: 0 2px; }
.ynp-ft-hbar { position: relative; margin: 14px 0 8px; height: 7px; border-radius: 4px; background: rgba(160, 140, 125, .16); overflow: hidden; }
.ynp-ft-hbar span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #e9b68e, #dfa27f 52%, #a9bcd6);
  box-shadow: 0 1px 5px rgba(200, 150, 115, .34);
  transition: width .6s var(--ynp-ease);
}
.ynp-ft-hnote { position: relative; font-size: 11.5px; color: var(--ynp-faint); letter-spacing: .2px; }

/* ---------- 分组小标题 ---------- */
.ynp-ft-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 20px 9px; }
.ynp-ft-sec h4 { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; color: var(--ynp-muted); }
.ynp-ft-sec span { font-size: 11px; color: var(--ynp-faint); }

/* ---------- 八格指标 Bento ---------- */
.ynp-ft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 14px; }
.ynp-ft-cell {
  padding: 11px 6px 10px; border-radius: 16px; text-align: center;
  background: var(--ynp-glass-2); border: 1px solid rgba(255, 255, 255, .66);
  box-shadow: var(--ynp-soft-sh-sm);
}
.ynp-ft-cell-ic { height: 20px; color: var(--ft-dawn); opacity: .85; }
.ynp-ft-cell-ic svg { width: 19px; height: 19px; }
.ynp-ft-cell-n { margin-top: 5px; font-family: var(--ynp-en); font-size: 16px; font-weight: 700; color: var(--ynp-ink-2); line-height: 1.1; }
.ynp-ft-cell-n i { font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--ynp-faint); margin-left: 1px; }
.ynp-ft-cell-l { margin-top: 3px; font-size: 10px; color: var(--ynp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 旅程地图 ---------- */
.ynp-ft-map { position: relative; margin: 2px 10px 0; padding: 10px 0 8px; }
.ynp-ft-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ynp-ft-line-b { stroke: rgba(150, 168, 195, .42); stroke-width: 2.4; stroke-dasharray: 3 7; stroke-linecap: round; }
.ynp-ft-line-o {
  stroke: var(--ft-dawn); stroke-width: 3; stroke-linecap: round; opacity: .78;
  filter: drop-shadow(0 1px 3px rgba(200, 150, 115, .35));
}

.ynp-ft-st { position: relative; z-index: 1; min-height: 72px; padding: 0 0 0 88px; margin-bottom: 8px; cursor: pointer; }
.ynp-ft-dot {
  position: absolute; left: 6px; top: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .78); color: var(--ynp-faint);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 3px rgba(120, 145, 180, .14);
  transition: transform .18s var(--spring-bouncy), box-shadow .2s var(--ynp-ease);
}
.ynp-ft-st.r .ynp-ft-dot { left: 46px; }
.ynp-ft-dot svg { width: 19px; height: 19px; }
.ynp-ft-st:active .ynp-ft-dot { transform: scale(.88); }
.ynp-ft-st.on .ynp-ft-dot {
  color: #fff;
  background: linear-gradient(150deg, #ecb98f, #d5906a);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 5px 13px rgba(190, 135, 95, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* 走到的最新一站呼吸一下（.now 由 ynpftPaintMap 打在最靠后的已点亮站上） */
.ynp-ft-st.on.now .ynp-ft-dot { animation: ynp-ft-beat 2.6s ease-in-out infinite; }
@keyframes ynp-ft-beat { 0%, 100% { box-shadow: 0 5px 13px rgba(190, 135, 95, .34), 0 0 0 0 rgba(214, 150, 110, .34); } 55% { box-shadow: 0 5px 13px rgba(190, 135, 95, .34), 0 0 0 8px rgba(214, 150, 110, 0); } }

.ynp-ft-card {
  padding: 10px 13px 11px; border-radius: 16px;
  background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--ynp-soft-sh-sm);
  transition: transform .16s var(--ynp-ease), background .2s var(--ynp-ease);
}
.ynp-ft-st:active .ynp-ft-card { transform: scale(.985); }
.ynp-ft-st.on .ynp-ft-card { background: linear-gradient(150deg, rgba(255, 251, 246, .92), rgba(255, 255, 255, .7)); border-color: rgba(224, 168, 130, .3); }
.ynp-ft-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ynp-ft-t b { font-size: 13.5px; font-weight: 600; color: var(--ynp-faint); }
.ynp-ft-st.on .ynp-ft-t b { color: var(--ynp-ink-2); }
.ynp-ft-t span { flex: 0 0 auto; font-family: var(--ynp-en); font-size: 10.5px; color: var(--ynp-faint); }
.ynp-ft-st.on .ynp-ft-t span { color: var(--ft-dawn-d); }
.ynp-ft-q {
  margin-top: 6px; padding-left: 9px; font-size: 12px; line-height: 1.72; color: var(--ynp-ink);
  border-left: 2px solid rgba(224, 168, 130, .45);
}
.ynp-ft-bar { margin-top: 9px; height: 5px; border-radius: 3px; background: rgba(150, 170, 200, .16); overflow: hidden; }
.ynp-ft-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(157, 177, 205, .75), rgba(180, 196, 218, .75)); transition: width .5s var(--ynp-ease); }
.ynp-ft-need { margin-top: 5px; font-size: 10.5px; color: var(--ynp-faint); }

.ynp-ft-foot { margin: 16px 24px 6px; text-align: center; font-size: 11.5px; line-height: 1.95; color: var(--ynp-faint); letter-spacing: .3px; }

/* ---------- 站点详情弹层（z-index 30 对齐 .ynpe-sheet，toast 仍能冒出来） ---------- */
.ynp-ft-sheet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(70, 62, 58, .24); backdrop-filter: blur(3px);
  animation: ynp-ft-fade .18s ease-out;
}
@keyframes ynp-ft-fade { from { opacity: 0; } to { opacity: 1; } }
.ynp-ft-sheet-card {
  width: 100%; margin: 0 10px 12px; padding: 22px 20px 15px; border-radius: 24px; text-align: center;
  background: linear-gradient(170deg, #fffaf4, #f6f4f2 62%, #eef1f6);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 -8px 34px rgba(120, 100, 90, .2);
  animation: ynp-ft-up .26s var(--spring-bouncy);
}
@keyframes ynp-ft-up { from { transform: translateY(34%); opacity: .4; } to { transform: none; opacity: 1; } }
.ynp-ft-sheet-ic {
  width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(150, 170, 200, .12); color: var(--ynp-faint);
  border: 1px solid rgba(255, 255, 255, .6);
}
.ynp-ft-sheet-ic svg { width: 28px; height: 28px; }
.ynp-ft-sheet-card.on .ynp-ft-sheet-ic {
  color: #fff;
  background: linear-gradient(150deg, #edbb91, #d28d66);
  box-shadow: 0 8px 20px rgba(190, 135, 95, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ynp-ft-sheet-n { font-size: 17px; font-weight: 700; color: var(--ynp-ink-2); letter-spacing: .5px; }
.ynp-ft-sheet-d { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ynp-muted); }
.ynp-ft-sheet-q {
  margin: 13px 4px 0; padding: 11px 13px; border-radius: 14px; text-align: left;
  font-size: 13px; line-height: 1.85; color: var(--ynp-ink);
  background: var(--ft-dawn-f); border: 1px solid rgba(224, 168, 130, .22);
}
.ynp-ft-sheet-bar { margin: 15px 4px 0; height: 7px; border-radius: 4px; background: rgba(150, 170, 200, .18); overflow: hidden; }
.ynp-ft-sheet-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #b6c6dc, #9db1cd); }
.ynp-ft-sheet-m { margin-top: 10px; font-size: 11px; line-height: 1.7; color: var(--ynp-faint); }
.ynp-ft-sheet-more {
  margin-top: 13px; border: none; cursor: pointer; font-family: inherit;
  padding: 9px 20px; border-radius: 15px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #e5ab83, #cf8a63);
  box-shadow: 0 6px 15px rgba(190, 138, 100, .32);
  transition: transform .14s var(--ynp-ease);
}
.ynp-ft-sheet-more:active { transform: scale(.95); }
.ynp-ft-sheet-more:disabled { background: rgba(150, 170, 200, .16); color: var(--ynp-muted); box-shadow: none; cursor: default; }
.ynp-ft-sheet-ok {
  display: block; width: 100%; margin-top: 12px; padding: 11px 0;
  border: none; border-radius: 15px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--ynp-ink);
  background: rgba(150, 170, 200, .13);
  transition: transform .14s var(--ynp-ease);
}
.ynp-ft-sheet-ok:active { transform: scale(.98); }

/* ---------- 聊天里的「足迹徽章」卡片皮肤（融进 .ynp-link-k-* 色族） ---------- */
.ynp-link-k-ftbadge { background: linear-gradient(150deg, #e6b48c, #c48757); }

@media (prefers-reduced-motion: reduce) {
  .ynp-ft-sun, .ynp-ft-st.on.now .ynp-ft-dot, .ynp-ft-sheet-card { animation: none; }
}

/* ==================== 主屏 v2 · 编辑式票据版(乙·留白) ==================== */
.ynp-h2{position:absolute;inset:0;overflow:hidden;--page:#f5f3f0;
  --card:#ffffff;
  --card-warm:#fffdfa;
  --group:#eceae6;
  --ink:#15181d;
  --ink-2:#3d434b;
  --muted:#9c9a95;
  --faint:#bcb9b3;
  --hair:rgba(30,34,40,.09);
  --ticket:#1b2436;
  --blue:#7ea6dd;
  --en:"SF Pro Display",-apple-system,"Segoe UI",Helvetica,sans-serif;
  --font:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --sh-1:0 2px 8px rgba(60,80,120,.06);
  --sh-2:0 8px 24px -14px rgba(50,70,110,.28);}
.ynp-h2{background:var(--page);font-family:var(--font);color:var(--ink)}
.ynp-h2 svg{display:block}
.ynp-h2 .ic{stroke:currentColor;stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}
.ynp-h2 .status .ic{width:14px;height:14px}
.ynp-h2 .batt::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:4.5px;background:currentColor;border-radius:0 2px 2px 0}
.ynp-h2 .batt::before{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:70%;background:currentColor;border-radius:1px}
.ynp-h2 .topbar{display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:38px;position:relative;z-index:50}
.ynp-h2 .topbar .title{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.ynp-h2 .topbar .title b{font:700 16px/1 var(--font);letter-spacing:.04em;color:var(--ink)}
.ynp-h2 .topbar .title i{display:block;margin-top:4px;font:600 9.5px/1 var(--en);
  letter-spacing:.28em;color:var(--faint);font-style:normal}
.ynp-h2 .tb-left{width:32px}
.ynp-h2 .tb-right{display:flex;gap:8px;position:relative;z-index:2}
.ynp-h2 .gbtn{width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.75);
  border:1px solid var(--hair);display:grid;place-items:center;color:var(--ink-2);
  backdrop-filter:blur(12px);box-shadow:var(--sh-1)}
.ynp-h2 .gbtn .ic{width:16px;height:16px}
.ynp-h2 .rail{position:absolute;left:4px;top:48%;transform:translateY(-50%);
  width:46px;padding:8px 0;border-radius:999px;z-index:55;
  background:rgba(255,255,255,.84);backdrop-filter:blur(18px) saturate(120%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px -14px rgba(50,70,110,.28),0 2px 8px rgba(60,80,120,.06);
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.ynp-h2 .rail a{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  color:#96948f;position:relative}
.ynp-h2 .rail a.on{background:var(--ticket);color:#fff;box-shadow:0 0 0 3px rgba(126,166,221,.24)}
.ynp-h2 .rail .ic{width:20px;height:20px}
.ynp-h2 .rail .dot{position:absolute;top:3px;right:2px;width:7px;height:7px;border-radius:999px;
  background:var(--blue);border:1.5px solid #fff}
.ynp-h2 .scroll{position:absolute;left:0;right:0;top:80px;bottom:0;overflow:hidden;
  padding:0 12px 74px 56px}
.ynp-h2 .blk + .blk{margin-top:28px}
.ynp-h2 .ticket{position:relative;border-radius:22px;color:#fff;overflow:hidden;
  background:radial-gradient(130% 100% at 10% -10%,#2b374f 0%,var(--ticket) 48%,#151d2b 100%);
  box-shadow:0 8px 24px -14px rgba(50,70,110,.28),0 14px 30px -18px rgba(27,36,54,.55)}
.ynp-h2 .ticket::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 34%)}
.ynp-h2 .tk-top{display:flex;align-items:center;justify-content:space-between;padding:14px 17px 0}
.ynp-h2 .tk-top .kick{font:600 9.5px/1 var(--en);letter-spacing:.22em;color:rgba(255,255,255,.42)}
.ynp-h2 .tk-pill{display:flex;align-items:center;gap:4px;height:18px;padding:0 8px;border-radius:999px;
  background:rgba(126,166,221,.17);border:1px solid rgba(126,166,221,.3);
  font:600 9.5px/1 var(--font);color:#a9c6ea;letter-spacing:.02em}
.ynp-h2 .tk-pill .ic{width:11px;height:11px;color:var(--blue)}
.ynp-h2 .tk-names{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 17px 0}
.ynp-h2 .tk-name{font:700 26px/1 var(--en);letter-spacing:-.5px;color:#fff}
.ynp-h2 .tk-name i{display:block;margin-top:6px;font:400 11px/1 var(--font);font-style:normal;
  color:rgba(255,255,255,.48);letter-spacing:.02em}
.ynp-h2 .tk-name.r{text-align:right}
.ynp-h2 .tk-link{flex:1;display:flex;align-items:center;gap:6px;padding:8px 8px 0}
.ynp-h2 .tk-link .line{flex:1;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 4px,transparent 4px 8px)}
.ynp-h2 .tk-link .ic{width:15px;height:15px;color:var(--blue);flex:none}
.ynp-h2 .tk-sub{display:flex;justify-content:space-between;padding:6px 17px 0;
  font:400 11px/1 var(--font);color:rgba(255,255,255,.4)}
.ynp-h2 .tk-sub b{color:rgba(255,255,255,.7);font-weight:600}
.ynp-h2 .perf{position:relative;height:16px;margin-top:8px}
.ynp-h2 .perf .cut{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;
  border-radius:999px;background:var(--page)}
.ynp-h2 .perf .cut.l{left:-8px}
.ynp-h2 .perf .cut.r{right:-8px}
.ynp-h2 .perf .dash{position:absolute;left:14px;right:14px;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 5px,transparent 5px 10px)}
.ynp-h2 .tk-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:0 17px}
.ynp-h2 .tk-grid .k{font:600 9.5px/1 var(--en);letter-spacing:1.2px;color:rgba(255,255,255,.36);
  text-transform:uppercase}
.ynp-h2 .tk-grid .v{margin-top:8px;font:600 14px/1 var(--font);color:#fff;
  display:flex;align-items:baseline;gap:4px}
.ynp-h2 .tk-grid .v.blue{color:var(--blue)}
.ynp-h2 .tk-grid .v small{font:400 11px/1 var(--font);color:rgba(255,255,255,.45)}
.ynp-h2 .tk-foot{display:flex;align-items:center;gap:12px;padding:12px 17px 12px}
.ynp-h2 .bar{flex:1;height:20px;opacity:.55;background:repeating-linear-gradient(90deg,
  #fff 0 1.6px,transparent 1.6px 3.2px,#fff 3.2px 4.2px,transparent 4.2px 6.8px,
  #fff 6.8px 8.4px,transparent 8.4px 9.4px,#fff 9.4px 10.2px,transparent 10.2px 12.4px)}
.ynp-h2 .tk-foot span{font:600 9.5px/1 var(--en);letter-spacing:.18em;color:rgba(255,255,255,.45)}
.ynp-h2 .sec{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 8px}
.ynp-h2 .sec b{font:700 16px/1 var(--font);color:var(--ink);letter-spacing:.01em}
.ynp-h2 .sec b em{font:600 9.5px/1 var(--en);font-style:normal;letter-spacing:.22em;
  color:var(--faint);text-transform:uppercase;margin-left:8px}
.ynp-h2 .sec a{display:flex;align-items:center;gap:4px;font:400 11px/1 var(--font);color:var(--muted)}
.ynp-h2 .sec a .ic{width:12px;height:12px}
.ynp-h2 .group{background:var(--group);border-radius:18px;padding:4px}
.ynp-h2 .row{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:15px}
.ynp-h2 .row + .row{box-shadow:0 -1px 0 rgba(30,34,40,.055)}
.ynp-h2 .av{width:32px;height:32px;border-radius:999px;flex:none;
  background:linear-gradient(145deg,#f2e5d6,#d6c4ae);box-shadow:0 1px 3px rgba(60,50,40,.16)}
.ynp-h2 .av.g{background:linear-gradient(145deg,#e7e5e0,#c9c6bf)}
.ynp-h2 .av.b{background:linear-gradient(145deg,#dfe7f2,#b9c8dd)}
.ynp-h2 .row .txt{flex:1;min-width:0}
.ynp-h2 .row .txt b{display:block;font:600 12.5px/1 var(--font);color:var(--ink)}
.ynp-h2 .row .txt p{margin-top:4px;font:400 11px/1 var(--font);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ynp-h2 .row .t{flex:none;text-align:right;font:500 9.5px/1 var(--en);color:var(--faint)}
.ynp-h2 .row .t .n{display:block;margin:6px 0 0 auto;width:16px;height:16px;border-radius:999px;
  background:var(--blue);color:#fff;font:700 9.5px/16px var(--en);text-align:center}
.ynp-h2 .caps{display:flex;gap:8px;margin:0 2px 8px}
.ynp-h2 .cap{height:26px;padding:0 12px;border-radius:999px;border:1px solid var(--hair);
  display:grid;place-items:center;font:500 11px/1 var(--font);color:var(--muted);background:transparent}
.ynp-h2 .cap.on{background:var(--ticket);border-color:var(--ticket);color:#fff}
.ynp-h2 .apps{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 12px 6px 2px;
  margin-right:-12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  touch-action:pan-x;scroll-snap-type:x proximity}
.ynp-h2 .apps::-webkit-scrollbar{display:none}
.ynp-h2 .app{width:52px;flex:0 0 52px;display:flex;flex-direction:column;align-items:center;gap:7px;
  scroll-snap-align:start}
.ynp-h2 .app .sq{width:52px;height:52px;border-radius:15px;background:var(--card);
  border:1px solid var(--hair);display:grid;place-items:center;color:var(--ink-2);
  box-shadow:var(--sh-1);position:relative}
.ynp-h2 .app .sq .ic{width:22px;height:22px}
.ynp-h2 .app .sq svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ynp-h2 .app.hot .sq{background:var(--ticket);border-color:var(--ticket);color:#fff;
  box-shadow:var(--sh-2)}
.ynp-h2 .app .sq .bg{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--blue);color:#fff;font:700 9.5px/17px var(--en);
  text-align:center;border:2px solid var(--page)}
.ynp-h2 .app span{font:400 11px/1 var(--font);color:var(--muted)}
.ynp-h2 .feed{background:var(--card-warm);border-radius:18px;border:1px solid var(--hair);
  padding:12px;box-shadow:var(--sh-1)}
.ynp-h2 .feed-h{display:flex;align-items:center;gap:8px}
.ynp-h2 .feed-h .av{width:30px;height:30px}
.ynp-h2 .feed-h b{font:600 12.5px/1 var(--font);color:var(--ink)}
.ynp-h2 .feed-h i{font:400 11px/1 var(--en);font-style:normal;color:var(--faint)}
.ynp-h2 .feed-h .tm{margin-left:auto;font:400 9.5px/1 var(--en);color:var(--faint)}
.ynp-h2 .feed p.body{margin-top:8px;font:400 12.5px/1.5 var(--font);color:var(--ink-2)}
.ynp-h2 .feed .acts{display:flex;align-items:center;gap:16px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--hair)}
.ynp-h2 .feed .acts a{display:flex;align-items:center;gap:4px;font:400 11px/1 var(--font);color:var(--muted)}
.ynp-h2 .feed .acts .ic{width:14px;height:14px}
.ynp-h2 .feed .acts a.liked{color:var(--blue)}
.ynp-h2 .feed .acts .sp{margin-left:auto;color:var(--faint);display:flex}
.ynp-h2 .dock{position:absolute;left:12px;right:12px;bottom:12px;height:50px;border-radius:999px;z-index:56;
  background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(130%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 8px 24px -14px rgba(50,70,110,.28),0 2px 8px rgba(60,80,120,.06);
  display:flex;align-items:center;gap:12px;padding:0 12px 0 8px}
.ynp-h2 .dock .arrow{width:34px;height:34px;border-radius:999px;background:var(--ticket);color:#fff;
  display:grid;place-items:center;flex:none}
.ynp-h2 .dock .arrow .ic{width:16px;height:16px}
.ynp-h2 .dock .lbl{font:600 12.5px/1 var(--font);color:var(--ink)}
.ynp-h2 .dock .lbl i{display:block;font:600 9.5px/1 var(--en);letter-spacing:.14em;color:var(--faint);
  font-style:normal;margin-top:5px}
.ynp-h2 .dock .vsep{width:1px;height:22px;background:var(--hair);margin-left:auto}
.ynp-h2 .dock .music .ic{width:16px;height:16px}
.ynp-h2 .dock .music .nm{font:500 11px/1 var(--font);color:var(--ink-2);max-width:92px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ynp-h2 .dock .music .nm i{display:block;font-style:normal;font:600 9.5px/1 var(--en);
  letter-spacing:.06em;color:var(--faint);margin-top:5px}
.ynp-h2 .wave{display:flex;align-items:flex-end;gap:2px;height:13px}
.ynp-h2 .wave i{width:2px;border-radius:999px;background:var(--blue);display:block}

/* 全部应用抽屉(主屏 v2) */
.ynp-h2-drawer{position:absolute;inset:0;z-index:40;background:rgba(20,26,36,.34);backdrop-filter:blur(3px);display:flex;align-items:flex-end;animation:ynp-fade .18s ease-out}
.ynp-h2-drawer .dw-card{width:100%;max-height:82%;background:#f5f3f0;border-radius:24px 24px 0 0;padding:16px 16px 22px;overflow:auto;animation:ynp-slide-up .26s cubic-bezier(.25,1,.5,1)}
.ynp-h2-drawer .dw-h{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}
.ynp-h2-drawer .dw-h b{font-size:16px;font-weight:700;color:#15181d}
.ynp-h2-drawer .dw-x{font-size:15px;color:#9c9a95;cursor:pointer;padding:4px 8px}
.ynp-h2-drawer .dw-g{margin-bottom:16px}
.ynp-h2-drawer .dw-t{font-size:9.5px;letter-spacing:1.6px;color:#bcb9b3;font-weight:600;margin:0 4px 8px}
.ynp-h2-drawer .dw-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px}
.ynp-h2-drawer .dw-app{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-decoration:none}
.ynp-h2-drawer .dw-app .sq{width:46px;height:46px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(60,80,120,.06);display:flex;align-items:center;justify-content:center;color:#3d434b;transition:transform .12s}
.ynp-h2-drawer .dw-app:active .sq{transform:scale(.93)}
.ynp-h2-drawer .dw-app .sq svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ynp-h2-drawer .dw-app>span:last-child{font-size:10.5px;color:#9c9a95;text-align:center}
@keyframes ynp-slide-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* 主屏v2 · 等比缩放适配:设计稿按 390 宽画,真机屏宽 296 → 整体 scale,
   这样票据比例/字号/间距与设计稿逐像素一致,不用逐条微调 */
.ynp-h2{
  width:390px; height:calc(100% / var(--ynp-h2-scale, 0.759));
  transform:scale(var(--ynp-h2-scale, 0.759)); transform-origin:0 0;
  overflow:hidden;
}
.ynp-h2 .scroll{padding-bottom:76px}

/* 「TA那边的动静」ins 化:标题与预览各自单行截断,少字不杂乱 */
.ynp-h2 .row{align-items:center}
.ynp-h2 .row .txt{min-width:0;flex:1 1 auto;overflow:hidden}
.ynp-h2 .row .txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ynp-h2 .row .txt p{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
.ynp-h2 .row .av{flex:0 0 auto}
.ynp-h2 .row .t{flex:0 0 auto;white-space:nowrap}

/* 体验版锁定提示遮罩 */
.ynp-triallock{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:32px;
  background:rgba(30,40,58,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .26s ease}
.ynp-triallock.on{opacity:1}
.ynp-tl-card{background:rgba(255,255,255,.94);border-radius:24px;padding:30px 26px;text-align:center;max-width:280px;width:100%;
  box-shadow:0 24px 60px -24px rgba(40,60,95,.6),inset 0 1px 0 #fff;transform:scale(.9);transition:transform .3s cubic-bezier(.2,1,.3,1)}
.ynp-triallock.on .ynp-tl-card{transform:scale(1)}
.ynp-tl-ico{font-size:38px;margin-bottom:12px}
.ynp-tl-title{font-size:17px;font-weight:700;color:#333d4d;margin-bottom:8px}
.ynp-tl-desc{font-size:13px;line-height:1.7;color:#8593a6;margin-bottom:20px}
.ynp-tl-btn{appearance:none;border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(145deg,#8fa9cf,#6f8bb8);padding:11px 0;border-radius:13px;width:100%;
  box-shadow:0 8px 18px -8px rgba(95,125,175,.8);transition:transform .12s ease}
.ynp-tl-btn:active{transform:scale(.97)}
/* Commercial multi-character controls and template apps */
.ynp-h2 .apps.editing .app { animation: ynp-app-wiggle .18s ease-in-out infinite alternate; }
.ynp-h2 .apps .app.moving { opacity:.55; transform:scale(1.08); }
.ynp-h2 .apps .app.add .sq { border:1px dashed #aab4c2; background:rgba(255,255,255,.45); }
@keyframes ynp-app-wiggle { from { transform:rotate(-1deg); } to { transform:rotate(1deg); } }
.ynp-h2-drawer .dw-role,.ynp-h2-drawer .dw-add-role { border:0; border-radius:10px; padding:6px 9px; margin-right:6px; color:#66758c; background:#edf1f6; }
.ynp-template-picker { position:absolute; inset:0; z-index:90; display:flex; align-items:flex-end; background:rgba(26,34,47,.28); }
.ynp-template-card { width:100%; max-height:78%; overflow:auto; padding:20px; border-radius:26px 26px 0 0; box-sizing:border-box; background:#f7f8fb; color:#394457; }
.ynp-template-head { display:flex; justify-content:space-between; align-items:center; }
.ynp-template-head b { font-size:18px; }
.ynp-template-head button { border:0; width:32px; height:32px; border-radius:50%; background:#e8edf4; color:#657187; }
.ynp-template-card>p { color:#8490a3; font-size:12px; line-height:1.6; }
.ynp-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ynp-template-grid button { min-height:88px; padding:13px; border:1px solid #e0e5ed; border-radius:16px; text-align:left; color:#3d485b; background:#fff; }
.ynp-template-grid button b,.ynp-template-grid button span { display:block; }
.ynp-template-grid button span { margin-top:6px; color:#8a95a7; font-size:11px; line-height:1.45; }
.ynp-custom-app { padding:16px; }
.ynp-custom-intro { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; padding:14px; border-radius:15px; background:#edf2f8; color:#455269; }
.ynp-custom-intro span { color:#8490a3; font-size:12px; }
.ynp-custom-editor { width:100%; min-height:48vh; box-sizing:border-box; resize:vertical; padding:15px; border:1px solid #dce2eb; border-radius:16px; outline:none; font:14px/1.7 -apple-system,"PingFang SC",sans-serif; color:#394457; background:#fff; }
.ynp-custom-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.ynp-custom-actions button { flex:1; min-width:110px; border:0; border-radius:13px; padding:11px; color:#fff; background:#7897c3; }
.ynp-custom-actions button.danger { color:#a85c64; background:#f5e8ea; }

/* message-quote · 引用预览与气泡 */
.ynp-quote-stack{display:flex;flex-direction:column;gap:5px;max-width:76%;min-width:0}
.ynp-msg.me .ynp-quote-stack{align-items:flex-end}
.ynp-msg.you .ynp-quote-stack{align-items:flex-start}
.ynp-quote-stack>.ynp-msg-bubble,.ynp-quote-stack>.ynp-vc,.ynp-quote-stack>.ynp-hb,.ynp-quote-stack>.ynp-link-card{max-width:100%}
.ynp-quote-card{width:min(210px,100%);padding:7px 9px;border-left:3px solid rgba(105,132,169,.55);border-radius:8px;background:rgba(255,255,255,.48);color:var(--ynp-muted);font-size:10.5px;line-height:1.35;overflow:hidden}
.ynp-quote-card b,.ynp-quote-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ynp-quote-card b{margin-bottom:2px;color:var(--ynp-ink-2);font-size:10px}
.ynp-quote-compose{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(238,242,247,.94);border-top:1px solid var(--ynp-hair)}
.ynp-quote-compose .ynp-quote-card{flex:1;width:auto;background:rgba(255,255,255,.72)}
.ynp-quote-compose button{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(120,140,170,.12);color:var(--ynp-muted);font-size:18px;line-height:26px}
.ynp-mm-item[data-act="quote"] svg{width:18px;height:18px}

/* 商用天气页：恢复缺失的 Lumy 专用布局 */
.ynp-lumy{position:relative;height:100%;display:flex;flex-direction:column;background:#08080d;color:#fff;overflow:hidden;font-family:var(--ynp-font)}
.ynp-lumy-sky{position:relative;flex:0 0 46%;overflow:hidden;background:linear-gradient(180deg,#2b322e 0%,#3a3a2c 19%,#6d5330 37%,#b4722e 49%,#e58e2d 55%,#ab5319 60%,#391b09 64%,#120a05 69%,#08080d 80%)}
.ynp-lumy-sky.night{background:linear-gradient(180deg,#0d1430 0%,#182240 30%,#2a3a5e 49%,#3a4a6c 55%,#232f4c 60%,#0f1730 65%,#06080f 72%,#08080d 82%)}
.ynp-lumy-sun{position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 0 18px 8px rgba(255,236,204,.8),0 0 46px 22px rgba(255,188,120,.42);z-index:2;transition:opacity .4s}
.ynp-lumy-sky.night .ynp-lumy-sun{background:#eaf0ff;box-shadow:0 0 16px 7px rgba(210,224,255,.62),0 0 42px 18px rgba(150,180,240,.32)}
.ynp-lumy-arc{position:absolute;inset:0;pointer-events:none;z-index:1}.ynp-lumy-arc svg{width:100%;height:100%}.ynp-lumy-arc .track{animation:ynp-flow 3s linear infinite}
@keyframes ynp-flow{to{stroke-dashoffset:-14}}
.ynp-lumy-topbar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0}
.ynp-lumy-chip{font-size:13px;padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.12);border:.5px solid rgba(255,255,255,.24);color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:4px;cursor:pointer;backdrop-filter:blur(6px)}
.ynp-lumy-chip svg{width:15px;height:15px}.ynp-lumy-title{font-size:15px;font-weight:600;color:#fff;letter-spacing:.5px}
.ynp-lumy-circ{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:.5px solid rgba(255,255,255,.24);color:rgba(255,255,255,.9);cursor:pointer;backdrop-filter:blur(6px)}
.ynp-lumy-circ svg{width:17px;height:17px}
.ynp-lumy-lower{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:16px 18px 12px;overflow-y:auto;overflow-x:hidden}
.ynp-lumy-nowpill{font-size:12.5px;font-weight:600;letter-spacing:.8px;padding:6px 14px;border-radius:13px;background:linear-gradient(180deg,#5c4626,#3b2c17);color:#f6dcb0;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ynp-lumy-eq{display:flex;align-items:center;gap:3px;width:100%;height:42px;min-height:42px;margin:18px 0 8px;cursor:grab;touch-action:none}
.ynp-lumy-eq span{flex:1;border-radius:2px;background:rgba(255,255,255,.2);pointer-events:none}.ynp-lumy-eq .handle{flex:0 0 auto;width:18px;height:36px;border-radius:8px;background:linear-gradient(180deg,#7a7a84,#28282e);box-shadow:0 3px 9px rgba(0,0,0,.65),inset 0 1px 1px rgba(255,255,255,.35);pointer-events:none}
.ynp-lumy-tz{font-size:12px;padding:7px 15px;border-radius:15px;background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.14);color:rgba(255,255,255,.68);margin-bottom:14px}
.ynp-lumy-card{width:100%;border-radius:22px;background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.1);padding:2px 18px}
.ynp-lumy-row{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;border-bottom:.5px solid rgba(255,255,255,.08);cursor:pointer;border-radius:10px}.ynp-lumy-row:last-child{border-bottom:0}
.ynp-lumy-row .rl{font-size:14.5px;color:rgba(255,255,255,.85);font-weight:500}.ynp-lumy-row .rl small{display:block;font-size:11px;color:rgba(255,255,255,.42);margin-top:2px;font-weight:400}
.ynp-lumy-row .rt{font-size:31px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.ynp-lumy-row .rt span{font-size:13px;font-weight:500;opacity:.68;margin-left:2px}
.ynp-lumy-row .amber{color:#ffb552}.ynp-lumy-row .pink{color:#ff6f9d}.ynp-lumy-row .purple{color:#ba8dff}.ynp-lumy-row .blue{color:#6bb2ff}
.ynp-lumy-ctrls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;padding-top:12px}.ynp-lumy-ctrls .c{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font-size:17px;cursor:pointer}.ynp-lumy-ctrls .c svg{width:18px;height:18px}.ynp-lumy-ctrls .pill{font-size:14px;padding:13px 28px;border-radius:24px;background:rgba(255,255,255,.09);border:.5px solid rgba(255,255,255,.16);color:#fff;cursor:pointer}
@media(max-height:700px){.ynp-lumy-sky{flex-basis:40%}.ynp-lumy-lower{padding-top:10px}.ynp-lumy-row{padding:9px 4px}.ynp-lumy-eq{margin:10px 0 6px}.ynp-lumy-tz{margin-bottom:8px}}
@media(max-height:780px){
  .ynp-lumy-sky{flex-basis:32%}
  .ynp-lumy-lower{padding:9px 18px 8px}
  .ynp-lumy-eq{height:30px;min-height:30px;margin:7px 0 4px}
  .ynp-lumy-tz{padding:5px 13px;margin-bottom:6px}
  .ynp-lumy-card{border-radius:18px}
  .ynp-lumy-row{padding:6px 4px}
  .ynp-lumy-row .rt{font-size:24px}
  .ynp-lumy-ctrls{padding-top:7px}
  .ynp-lumy-ctrls .c{width:38px;height:38px}
  .ynp-lumy-ctrls .pill{padding:9px 24px}
}