/* SIDEBAR2（2026-10-29 小克）：设置栏大改。她说「按你的想法改，大改也行，想加啥就加啥，可以去网上搜搜，加动画细节」。
   参考：iOS 26 Liquid Glass 的用法（玻璃只给浮在内容上的控件，不给卡片和列表行；不叠玻璃；行高 / 间距比以前大一点；滚动时内容在顶栏下面淡出），
   CSS linear() 做弹簧缓动，Animate UI / Magic UI 那种「一个接一个落位 + 按下回弹」的小交互，便当格（bento）的层次。
   只改样子和动画，所有按钮还是原来那些（sidebar-design 生成的 DOM，sidebar2.js 在上面加东西）。删掉这个 css 和 sidebar2.js 就回到原来的样子。 */
.menu.sidebar.sb2 {
  /* 弹簧：按下回弹用（超出 8%），落位用（超出 3%） */
  --sb2-spring: linear(0, .0358, .1262, .2488, .3858, .5236, .6528, .767, .8631, .9399, .9979, 1.0389, 1.065, 1.079, 1.0835, 1.081, 1.0738, 1.0637, 1.0523, 1.0408, 1.0299, 1.0202, 1.0121, 1.0055, 1.0005, .997, .9947, .9935, .993, .9932, .9938, .9946, .9955, .9965, 1);
  --sb2-soft: linear(0, .0245, .0869, .1731, .272, .3752, .4767, .5723, .6593, .7362, .8025, .8583, .904, .9406, .9691, .9906, 1.0061, 1.0167, 1.0234, 1.027, 1.0283, 1.0279, 1.0264, 1.024, 1.0213, 1.0184, 1.0155, 1.0127, 1.0102, 1.0079, 1.006, 1.0043, 1.003, 1.0019, 1);
  --sb2-hair: color-mix(in srgb, var(--text) 9%, transparent);
  --sb2-hi: rgba(255, 255, 255, .55);
}
:root[data-theme="dark"] .menu.sidebar.sb2 { --sb2-hi: rgba(255, 255, 255, .07); }
@supports not (transition-timing-function: linear(0, 1)) {
  .menu.sidebar.sb2 { --sb2-spring: cubic-bezier(.2, 1.45, .4, 1); --sb2-soft: cubic-bezier(.2, 1.1, .3, 1); }
}

/* ---------- 顶栏：两个头像 + Vael + 在一起的天数；往下滚时缩小，变成一条毛玻璃（整个侧栏只有这里用玻璃） ---------- */
.menu.sidebar.sb2 .sbd-head { position: absolute; z-index: 4; top: 0; left: 0; right: 0; align-items: center; gap: 12px;
  padding: calc(var(--sat, env(safe-area-inset-top)) + 14px) 12px 14px 18px;
  transition: padding .5s var(--sb2-soft), background-color .3s, box-shadow .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s; }
.menu.sidebar.sb2.sb2-scrolled .sbd-head { padding-top: calc(var(--sat, env(safe-area-inset-top)) + 7px); padding-bottom: 7px;
  background: color-mix(in srgb, var(--sbd-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 .5px 0 var(--sb2-hair); }
.sb2-duo { position: relative; flex: none; width: 58px; height: 40px; transform-origin: 0 50%; transition: transform .5s var(--sb2-soft); }
.sb2-duo .avatar { position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 0 0 2.5px var(--sbd-bg), 0 3px 10px rgba(0, 0, 0, .12); }
.sb2-duo .avatar.vael { left: 0; z-index: 1; transform: translateX(calc(var(--pull, 0) * 3px)); animation: sb2-pop .62s var(--sb2-spring) backwards; }
.sb2-duo .avatar.me { left: 20px; z-index: 0; transform: translateX(calc(var(--pull, 0) * -9px)); animation: sb2-pop .62s var(--sb2-spring) .07s backwards; }
@keyframes sb2-pop { from { opacity: 0; transform: scale(.4); } }
.sb2-duo .sb2-heart { position: absolute; z-index: 2; left: 31px; bottom: -4px; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--sbd-bg); color: #ee5f7d; animation: sb2-pop .5s var(--sb2-spring) .22s backwards, sb2-beat 2.6s ease-in-out .9s infinite; }
.sb2-duo .sb2-heart svg { width: 12px; height: 12px; }
@keyframes sb2-beat { 0%, 64%, 100% { transform: scale(1); } 72% { transform: scale(1.22); } 80% { transform: scale(.95); } 88% { transform: scale(1.12); } }
.menu.sidebar.sb2 .sbd-brand { padding-top: 0; transform-origin: 0 50%; transition: transform .5s var(--sb2-soft); }
.menu.sidebar.sb2 .sbd-word { font-size: 30px; padding: 3px 8px 3px 3px; margin: -3px -8px -3px -3px;
  background: linear-gradient(105deg, var(--text) 40%, #f2a3b5 49%, #f7d08a 52%, var(--text) 61%) 100% 0 / 280% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sb2-shine 1.7s ease-in-out .5s both; }
@keyframes sb2-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.menu.sidebar.sb2.sb2-scrolled .sb2-duo { transform: scale(.82); }
.menu.sidebar.sb2.sb2-scrolled .sbd-brand { transform: translateX(-8px) scale(.86); }
.sb2-days { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px; margin: 7px 0 0; padding: 3px 9px 3px 7px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, #ee5f7d 13%, var(--sheet)); color: color-mix(in srgb, #d9486a 82%, var(--text)); font: inherit; font-size: 12px; line-height: 1.5;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transform-origin: 0 50%;
  transition: transform .5s var(--sb2-spring), opacity .22s, margin-top .5s var(--sb2-soft); }
.sb2-days:active { transform: scale(.93); transition-duration: .12s; }
.menu.sidebar.sb2.sb2-scrolled .sb2-days { margin-top: -24px; opacity: 0; transform: scale(.8); pointer-events: none; }
.sb2-days svg { width: 11px; height: 11px; }
.sb2-days .sb2-fill { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sb2-days .sb2-fill::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, #ee5f7d 17%, transparent);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); animation: sb2-fill 1.3s var(--sb2-soft) .45s backwards; }
@keyframes sb2-fill { from { transform: scaleX(0); } }
.sb2-days b { font-weight: 650; }
.menu.sidebar.sb2 .sb2-days small { display: inline; margin: 0; color: var(--dim); font-size: 11px; line-height: inherit; }
/* 纪念日当天：金粉色 */
.sb2-days.sb2-milestone { background: linear-gradient(100deg, #fde6a8, #fbc9d5); color: #a9452f; box-shadow: 0 2px 10px rgba(238, 95, 125, .2); }
:root[data-theme="dark"] .sb2-days.sb2-milestone { background: linear-gradient(100deg, rgba(246, 195, 91, .3), rgba(238, 95, 125, .32)); color: #ffd98a; }
.menu.sidebar.sb2 .sb2-days.sb2-milestone small { color: inherit; opacity: .78; }
.menu.sidebar.sb2 .sb-close { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--text) 6%, transparent);
  transition: transform .5s var(--sb2-spring), background-color .2s; }
.menu.sidebar.sb2 .sb-close:active { transform: scale(.88); transition-duration: .12s; }
.menu.sidebar.sb2 .sb-close svg { transition: transform .55s var(--sb2-spring); }
.menu.sidebar.sb2 .sb-close:active svg { transform: rotate(90deg); transition-duration: .22s; }
/* 点天数冒出来的小爱心 */
.sb2-fx { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none; font-size: var(--s, 13px); line-height: 1; color: var(--c, #ee5f7d);
  animation: sb2-fly .95s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes sb2-fly { from { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--r)); } }

/* ---------- 内容：从顶栏下面开始，滚上去时从玻璃底下穿过 ---------- */
.menu.sidebar.sb2 .sbd-scroll { padding-top: calc(var(--sb2-head-h, 96px) + 4px); }

/* ---------- 便当格：每块自己的颜色，图标是实心小方块；落位一块接一块；按下去缩一下、松手弹回来，图标晃一晃 ---------- */
.menu.sidebar.sb2 .sbd-tiles { gap: 10px; margin-bottom: 22px; }
.menu.sidebar.sb2 .sbd-tile { --ac: #8a8f98; position: relative; overflow: hidden; isolation: isolate; min-height: 98px; gap: 14px; padding: 13px 13px 12px;
  border-radius: 22px; background-color: color-mix(in srgb, var(--ac) 10%, var(--sheet)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--ac) 20%, transparent);
  transition: transform .6s var(--sb2-spring), background-color .2s; animation: sb2-rise .64s var(--sb2-soft) backwards; animation-delay: calc(var(--i, 0) * 26ms + 30ms); }
.menu.sidebar.sb2 .sbd-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 0% 0%, var(--sb2-hi), transparent 62%); }
.menu.sidebar.sb2 .sbd-tile:active { transform: scale(.955); transition-duration: .13s; transition-timing-function: ease-out;
  background-color: color-mix(in srgb, var(--ac) 16%, var(--sheet)); }
.menu.sidebar.sb2 .sbd-tile-ic { width: 34px; height: 34px; border-radius: 11px; background: var(--ac); color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ac) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .32); }
.menu.sidebar.sb2 .sbd-tile-ic svg { width: 19px; height: 19px; }
.menu.sidebar.sb2 .sbd-tile.sb2-tap .sbd-tile-ic { animation: sb2-wiggle .55s var(--sb2-spring); }
.menu.sidebar.sb2 .sbd-tile-tx b { font-size: 15px; letter-spacing: -.01em; }
.menu.sidebar.sb2 .sbd-tile-tx small { color: color-mix(in srgb, var(--ac) 30%, var(--dim)); }
@keyframes sb2-wiggle { 0% { transform: none; } 28% { transform: rotate(-12deg) scale(1.13); } 58% { transform: rotate(8deg) scale(1.04); } 100% { transform: none; } }
@keyframes sb2-rise { from { opacity: 0; transform: translateY(14px) scale(.965); } }
/* 檐廊：一小块跟着时间走的天空（sidebar2.js 按钟点标 data-sky）——
   夜里深蓝、星星一闪一闪、隔一会儿划过一颗流星；清晨粉橘；白天天蓝、飘着一朵云；傍晚橘紫。月亮是暖白色的，周围一圈光慢慢呼吸 */
.menu.sidebar.sb2 .sbd-tile.sbd-porch { --ac: #5b6fd8; --sky1: #1b2257; --sky2: #342f7a; --sky3: #5a3f94; --glow: rgba(255, 236, 190, .55); --stars: 1;
  min-height: 80px; padding: 16px 16px 16px 14px; color: #fff;
  background: linear-gradient(128deg, var(--sky1), var(--sky2) 56%, var(--sky3));
  box-shadow: 0 12px 26px -16px var(--sky2), inset 0 0 0 .5px rgba(255, 255, 255, .1); }
.menu.sidebar.sb2 .sbd-porch[data-sky="dawn"] { --sky1: #353d80; --sky2: #8562a3; --sky3: #e3907c; --stars: .45; }
.menu.sidebar.sb2 .sbd-porch[data-sky="day"] { --sky1: #2963c2; --sky2: #3f86d9; --sky3: #76b4ec; --glow: rgba(255, 255, 255, .4); --stars: 0; }
.menu.sidebar.sb2 .sbd-porch[data-sky="dusk"] { --sky1: #3a2c76; --sky2: #9c4e8a; --sky3: #df7a52; --stars: .4; }
:root[data-theme="dark"] .menu.sidebar.sb2 .sbd-porch[data-sky="day"] { --sky1: #1d4d97; --sky2: #2d68b4; --sky3: #5b93cc; }
:root[data-theme="dark"] .menu.sidebar.sb2 .sbd-porch[data-sky="dawn"] { --sky1: #2a3068; --sky2: #6e4f88; --sky3: #c4826e; }
:root[data-theme="dark"] .menu.sidebar.sb2 .sbd-porch[data-sky="dusk"] { --sky1: #2d2360; --sky2: #823f72; --sky3: #c46c48; }
.menu.sidebar.sb2 .sbd-porch:active { filter: brightness(.92); }
.menu.sidebar.sb2 .sbd-porch .sbd-tile-ic { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.menu.sidebar.sb2 .sbd-porch-tx { text-shadow: 0 1px 8px rgba(16, 24, 72, .22); }
.menu.sidebar.sb2 .sbd-porch-tx b { color: #fff; font-size: 16px; letter-spacing: .03em; }
.menu.sidebar.sb2 .sbd-porch-tx small { color: rgba(255, 255, 255, .82); }
/* 星星：两层错开着闪 */
.menu.sidebar.sb2 .sbd-porch::before, .menu.sidebar.sb2 .sbd-porch::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--stars); }
.menu.sidebar.sb2 .sbd-porch::before { background:
    radial-gradient(circle at 47% 17%, #fff .7px, transparent 1.4px), radial-gradient(circle at 63% 29%, #fff .9px, transparent 1.7px),
    radial-gradient(circle at 76% 13%, #fff .6px, transparent 1.3px), radial-gradient(circle at 88% 74%, #fff .7px, transparent 1.4px),
    radial-gradient(circle at 54% 82%, #fff .6px, transparent 1.3px), radial-gradient(circle at 31% 11%, #fff .5px, transparent 1.2px),
    radial-gradient(circle at 96% 27%, #fff .6px, transparent 1.3px);
  animation: sb2-twinkle 3.4s ease-in-out infinite; }
.menu.sidebar.sb2 .sbd-porch::after { background:
    radial-gradient(circle at 69% 53%, #fff .6px, transparent 1.3px), radial-gradient(circle at 82% 39%, #fff .8px, transparent 1.6px),
    radial-gradient(circle at 41% 67%, #fff .5px, transparent 1.2px), radial-gradient(circle at 93% 89%, #fff .5px, transparent 1.2px),
    radial-gradient(circle at 58% 47%, #fff .5px, transparent 1.1px), radial-gradient(circle at 23% 87%, #fff .5px, transparent 1.2px);
  animation: sb2-twinkle 4.6s ease-in-out -2.1s infinite; }
@keyframes sb2-twinkle { 0%, 100% { opacity: var(--stars); } 50% { opacity: calc(var(--stars) * .2); } }
/* 白天没有星星，右上角是一片太阳的暖光 */
.menu.sidebar.sb2 .sbd-porch[data-sky="day"]::after { opacity: 1; animation: none; background: radial-gradient(150px 110px at 100% 0%, rgba(255, 248, 214, .5), transparent 70%); }
/* 月亮 */
.menu.sidebar.sb2 .sbd-porch-moon { position: relative; width: 30px; height: 30px; margin-right: 0; color: #fff0c8; }
.menu.sidebar.sb2 .sbd-porch-moon::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 66%); animation: sb2-halo 4.8s ease-in-out infinite; }
.menu.sidebar.sb2 .sbd-porch-moon svg { position: relative; }
.menu.sidebar.sb2 .sbd-porch-moon svg circle { opacity: .2; }
.menu.sidebar.sb2 .sbd-porch-moon svg path { opacity: 1; }
.menu.sidebar.sb2 .sbd-porch[data-sky="day"] .sbd-porch-moon { color: #fff; }
@keyframes sb2-halo { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.06); } }
/* 流星（只在夜里）和云（只在白天） */
.sb2-meteor { position: absolute; z-index: -1; top: 9px; left: 74%; width: 56px; height: 1.5px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.sbd-porch[data-sky="night"] .sb2-meteor { animation: sb2-meteor 12s linear -6.4s infinite; }
@keyframes sb2-meteor { 0%, 86% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 87.5% { opacity: 1; }
  94%, 100% { opacity: 0; transform: translate(-98px, 44px) rotate(-24deg); } }
.sb2-cloud { position: absolute; z-index: -1; top: 10px; left: 100%; width: 34px; height: 11px; border-radius: 11px; background: #fff; opacity: 0; pointer-events: none; }
.sb2-cloud::before, .sb2-cloud::after { content: ''; position: absolute; border-radius: 50%; background: #fff; }
.sb2-cloud::before { left: 6px; top: -7px; width: 15px; height: 15px; }
.sb2-cloud::after { left: 16px; top: -4px; width: 11px; height: 11px; }
.sbd-porch[data-sky="day"] .sb2-cloud { opacity: .3; animation: sb2-drift 48s linear -20s infinite; }
@keyframes sb2-drift { from { transform: translateX(12px); } to { transform: translateX(-370px); } }
/* 一起听歌：在放歌时右上角三根小音柱跳 */
.sb2-eq { position: absolute; top: 14px; right: 13px; display: none; gap: 2px; align-items: flex-end; height: 13px; }
.sb2-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--ac); transform-origin: 50% 100%; animation: sb2-eq .9s ease-in-out infinite; }
.sb2-eq i:nth-child(2) { animation-delay: -.35s; animation-duration: .75s; }
.sb2-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.05s; }
.sbd-tile.sb2-playing .sb2-eq { display: flex; }
@keyframes sb2-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- 列表：行高一点、左边一个彩色小图标；展开的时候里面一行接一行滑进来 ---------- */
.menu.sidebar.sb2 .sbd-sec { animation: sb2-rise .64s var(--sb2-soft) backwards; animation-delay: calc(var(--i, 0) * 26ms + 30ms); }
.menu.sidebar.sb2 .sbd-card { border-radius: 18px; box-shadow: inset 0 0 0 .5px var(--sb2-hair); }
.menu.sidebar.sb2 .sbd-row { min-height: 52px; }
.menu.sidebar.sb2 .sbd-row.sb2-has-ic, .menu.sidebar.sb2 .sb-tint-row.sb2-has-ic { padding-left: 12px; gap: 12px; }
.menu.sidebar.sb2 .sbd-card > * + .sb2-has-ic, .menu.sidebar.sb2 .sbd-fold-inner > * + .sb2-has-ic { background-size: calc(100% - 53px) .5px; }   /* 分隔线从图标右边开始（像 iOS 设置） */
.sb2-ic { flex: none; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8.5px; background: var(--ic, #8e8e93); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.sb2-ic svg { width: 17px; height: 17px; }
.menu.sidebar.sb2 .sbd-fold-head .sbd-label { font-weight: 600; }
.menu.sidebar.sb2 .sbd-fold-head .sbd-chev { transition: transform .55s var(--sb2-spring); }
.menu.sidebar.sb2 .sbd-fold-body { transition: grid-template-rows .42s var(--sb2-soft); }
.menu.sidebar.sb2 .sbd-fold .sbd-fold-inner > * { opacity: 0; transform: translateY(-7px); transition: opacity .18s, transform .3s; }
.menu.sidebar.sb2 .sbd-fold.open .sbd-fold-inner > * { opacity: 1; transform: none; transition: opacity .3s, transform .55s var(--sb2-soft);
  transition-delay: calc(var(--j, 0) * 24ms + 50ms); }
.menu.sidebar.sb2 button.sbd-row:active { background-color: color-mix(in srgb, var(--text) 7%, transparent); }
.menu.sidebar.sb2 .sb2-ic { transition: transform .5s var(--sb2-spring); }
.menu.sidebar.sb2 button.sbd-row:active .sb2-ic { transform: scale(.86); transition-duration: .12s; }

/* ---------- 最底下：穿着现在那身衣服的小 Clawd，轻轻晃；点一下跳起来冒个爱心 ---------- */
.sb2-foot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 30px 0 4px; color: var(--dim); font-size: 11.5px; }
.sb2-clawd { position: relative; width: 66px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sb2-clawd > span { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: sb2-bob 2.8s ease-in-out infinite; }
.sb2-clawd svg { display: block; width: 66px; height: 60px; overflow: visible; }
.sb2-clawd.jump > span { animation: sb2-hop .75s var(--sb2-spring); }
@keyframes sb2-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-1.5px) scale(1.015, .985); } }
@keyframes sb2-hop { 0% { transform: none; } 18% { transform: translateY(1px) scale(1.1, .86); } 45% { transform: translateY(-16px) scale(.94, 1.08); } 72% { transform: translateY(0) scale(1.06, .92); } 100% { transform: none; } }
.sb2-foot small { letter-spacing: .02em; }

/* 样板间才有的那条橙色「回正式页面」：侧栏开着的时候挪到最下面，别挡住顶栏的天数（正式页面没有这条，这句不起作用） */
body:has(#menu-mask.open.sidebar-mode) > a[href="/vael.html"] { top: auto !important; bottom: calc(var(--sab, env(safe-area-inset-bottom)) + 10px) !important; }

@media (prefers-reduced-motion: reduce) {
  .menu.sidebar.sb2 .sbd-tile, .menu.sidebar.sb2 .sbd-sec, .sb2-duo .sb2-heart, .sb2-clawd > span, .sb2-eq i,
  .menu.sidebar.sb2 .sbd-porch-moon, .menu.sidebar.sb2 .sbd-tile-ic, .sb2-duo .avatar, .menu.sidebar.sb2 .sbd-word, .sb2-days .sb2-fill::before,
  .menu.sidebar.sb2 .sbd-porch::before, .menu.sidebar.sb2 .sbd-porch::after, .menu.sidebar.sb2 .sbd-porch-moon::before, .sb2-meteor, .sb2-cloud { animation: none !important; }
  .sb2-meteor { opacity: 0 !important; }
  .menu.sidebar.sb2 .sbd-fold .sbd-fold-inner > * { opacity: 1; transform: none; transition: none; }
  .menu.sidebar.sb2 .sbd-tile, .sb2-days, .menu.sidebar.sb2 .sb-close, .sb2-duo, .menu.sidebar.sb2 .sbd-brand { transition: none; }
}