/* ═══ 「作品」页(js/creations.js):他做给她的一切 —— 乐谱 / 作品 / 氛围 / 收藏 ═══
   颜色全走主页那套主题变量(--home-bg 壁纸、--home-glass 玻璃、--pp-ink 字色、--home-accent-rgb 主题色),
   换主题、换壁纸、深浅色都跟着走。封面的图案按每件的 id 画,色相在主题色附近轻轻偏一点,一屏不会千篇一律。 */

.creations-board{--cr-a:var(--home-accent-rgb,154,169,200);--cr-ease:cubic-bezier(.2,.8,.2,1);
  position:fixed;inset:0;z-index:92;overflow:hidden;color:var(--pp-ink);
  background:var(--home-bg,linear-gradient(180deg,var(--pp-tint),var(--pp-tint)));background-size:var(--home-bg-size,cover);
  background-position:var(--home-bg-position,center);background-repeat:no-repeat}
.creations-board::before{content:'';position:absolute;inset:-40px;pointer-events:none;
  background:var(--home-bg,linear-gradient(180deg,var(--pp-tint),var(--pp-tint)));background-size:var(--home-bg-size,cover);
  background-position:var(--home-bg-position,center);background-repeat:no-repeat;filter:blur(22px) saturate(1.12);transform:scale(1.04)}
.creations-board::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--home-glass-soft,var(--pp-card-soft)) 0%,var(--home-glass-faint,var(--pp-card-soft)) 38%,var(--home-glass-soft,var(--pp-card-soft)) 100%)}
.creations-board.hidden{display:none}
.cr-shell{position:relative;z-index:1;height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}

/* ── 顶栏 ── */
.cr-head{flex:none;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:10px;padding:calc(var(--safe-t,env(safe-area-inset-top,0px)) + 10px) 18px 4px}
.cr-round{width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
  border:1px solid rgba(var(--cr-a),.18);background:var(--home-glass,var(--pp-card-soft));color:rgba(var(--cr-a),.95);
  box-shadow:0 8px 22px rgba(var(--cr-a),.14),inset 0 1px 0 var(--pp-hi);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}
.cr-round:active{transform:scale(.94)}
.cr-title{min-width:0;text-align:center}
.cr-title small{display:block;color:rgba(var(--cr-a),.78);font:600 9.5px/1 var(--font-ui,sans-serif);letter-spacing:.34em;text-transform:uppercase}
.cr-title strong{display:block;margin-top:6px;color:var(--pp-ink);letter-spacing:.14em;
  font:600 25px/1 var(--font-home-text,'Noto Serif SC','Songti SC',serif),'Noto Serif SC','Songti SC',serif}

/* ── 分栏:玻璃胶囊 + 会滑的主题色指示 ── */
.cr-tabs{flex:none;position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:42px;margin:14px 18px 2px;padding:4px;border-radius:999px;
  border:1px solid rgba(var(--cr-a),.14);background:var(--home-glass,var(--pp-card-soft));box-shadow:inset 0 1px 0 var(--pp-hi),0 10px 26px rgba(var(--cr-a),.10);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
.cr-tab-ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 5);border-radius:999px;
  background:linear-gradient(135deg,rgba(var(--cr-a),.96),rgba(var(--cr-a),.74));box-shadow:0 6px 16px rgba(var(--cr-a),.34),inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .4s var(--cr-ease)}
.cr-tab{position:relative;z-index:1;border:0;padding:0;background:transparent;color:var(--pp-ink-2);font:600 13px/1 var(--font-ui,sans-serif);letter-spacing:.06em;
  transition:color .3s;-webkit-tap-highlight-color:transparent}
.cr-tab.is-on{color:var(--on-accent,#fff)}

/* ── 正在看哪段时间 ── */
.cr-when{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;margin:10px auto 0;padding:5px 5px 5px 14px;border-radius:999px;
  background:rgba(var(--cr-a),.14);border:1px solid rgba(var(--cr-a),.2);color:var(--pp-ink);font:500 12px/1 var(--font-ui,sans-serif);letter-spacing:.04em}
.cr-when.hidden{display:none}
.cr-when button{width:24px;height:24px;border:0;border-radius:50%;background:rgba(var(--cr-a),.18);color:var(--pp-ink-2);font-size:11px;padding:0}

/* ── 内容 ── */
.cr-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;
  padding:4px 18px calc(var(--safe-b,env(safe-area-inset-bottom,0px)) + 36px)}
.cr-body::-webkit-scrollbar{display:none}
/* 有歌在放:迷你条停在这一页底部,最后一排卡往上让出它的位置 */
body:has(#score-player.is-mini:not(.hidden)) .cr-body{padding-bottom:calc(var(--safe-b,env(safe-area-inset-bottom,0px)) + 112px)}
.cr-sec-title{display:flex;align-items:center;gap:10px;margin:18px 2px 12px;color:rgba(var(--cr-a),.85);
  font:600 10.5px/1 var(--font-ui,sans-serif);letter-spacing:.32em}
.cr-sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--cr-a),.32),transparent)}
.cr-shelf{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;margin:-10px -18px -22px;padding:10px 18px 32px;scrollbar-width:none}   /* 上下留出卡片投影的位置,不然影子被横向滚动框切出一道边 */
.cr-shelf::-webkit-scrollbar{display:none}
.cr-month-head{display:flex;align-items:baseline;gap:6px;margin:24px 2px 12px}
.cr-month-head b{color:var(--pp-ink);font:italic 400 36px/.9 Georgia,'Times New Roman',serif;letter-spacing:-.02em}
.cr-month-head span{color:var(--pp-ink-2);font:500 13px/1 var(--font-home-text,'Noto Serif SC',serif),serif}
.cr-month-head em{margin-left:4px;color:var(--pp-ink-3);font:italic 500 12px/1 Georgia,serif;letter-spacing:.16em}
.cr-month-head i{margin-left:auto;font-style:normal;font-size:11px;color:var(--pp-ink-3);letter-spacing:.06em}
.cr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* ── 一件 ── */
.cr-tile{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:22px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:var(--pp-card,var(--home-glass));border:1px solid var(--pp-bd,rgba(var(--cr-a),.14));
  box-shadow:0 12px 28px rgba(var(--cr-a),.13),inset 0 1px 0 var(--pp-hi);
  transition:transform .18s ease;animation:cr-in .55s var(--cr-ease) both;animation-delay:calc(var(--i,0) * 38ms)}
.cr-tile:active{transform:scale(.97)}
@keyframes cr-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cr-cover{position:relative;aspect-ratio:1 / .8;overflow:hidden;color:rgba(var(--cr-a),.98)}
.cr-cover-bg{position:absolute;inset:0;filter:hue-rotate(var(--h,0deg));
  background:radial-gradient(130% 95% at var(--x,30%) 0%,rgba(var(--cr-a),.5),transparent 62%),linear-gradient(var(--a,135deg),rgba(var(--cr-a),.34),rgba(var(--cr-a),.06))}
.cr-cover-bg svg{position:absolute;inset:0;width:100%;height:100%}
.cr-tile.k-page .cr-cover-bg svg,.cr-tile.k-overlay .cr-cover-bg svg{mix-blend-mode:screen}
.cr-kind{position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:999px;color:var(--pp-ink);font:600 10px/1 var(--font-ui,sans-serif);letter-spacing:.14em;
  background:var(--home-glass,var(--pp-card-soft));box-shadow:inset 0 1px 0 var(--pp-hi);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cr-star{position:absolute;right:10px;top:9px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:var(--on-accent,#fff);
  background:rgba(var(--cr-a),.85);box-shadow:0 4px 12px rgba(var(--cr-a),.35)}
.cr-star svg{width:13px;height:13px}
.cr-meta{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 40px 12px 12px}
.cr-meta strong{color:var(--pp-ink);font:600 14.5px/1.3 var(--font-home-text,'Noto Serif SC',serif),serif;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-meta em{font-style:normal;font-size:11.5px;color:var(--pp-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-meta em.is-lyric{font-family:var(--font-chat,inherit);font-style:italic}
.cr-date{font-size:10.5px;color:var(--pp-ink-3);letter-spacing:.06em}
.cr-more{position:absolute;right:4px;bottom:6px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pp-ink-3);
  font-size:19px;line-height:1;letter-spacing:.05em;-webkit-tap-highlight-color:transparent}
.cr-more:active{background:rgba(var(--cr-a),.12)}
/* 置顶的大卡 */
.cr-tile.is-feature{flex:0 0 min(80%,330px);scroll-snap-align:start;border-radius:26px}
.cr-tile.is-feature .cr-cover{aspect-ratio:16 / 9.5}
.cr-tile.is-feature .cr-meta strong{font-size:17px;-webkit-line-clamp:1}

/* ── 加载中 / 空 ── */
.cr-skel{min-height:200px;background:linear-gradient(100deg,var(--pp-card,var(--home-glass)) 30%,rgba(var(--cr-a),.12) 50%,var(--pp-card,var(--home-glass)) 70%);
  background-size:300% 100%;animation:cr-shimmer 1.4s linear infinite}
.cr-skel-line{width:90px;height:30px;border-radius:10px;background:rgba(var(--cr-a),.12)}
@keyframes cr-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.cr-empty{margin:80px 24px;text-align:center;color:var(--pp-ink-3);font:400 14px/2 var(--font-home-text,'Noto Serif SC',serif),serif}
.cr-retry{margin-top:16px;width:auto;padding:0 22px}

/* ── 底部弹层(⋯ 操作 / 日历)── */
.cr-scrim{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.26);opacity:0;pointer-events:none;transition:opacity .3s}
.cr-scrim.is-on{opacity:1;pointer-events:auto}
.cr-sheet{position:absolute;z-index:6;left:10px;right:10px;bottom:calc(var(--safe-b,env(safe-area-inset-bottom,0px)) + 10px);max-width:540px;margin:0 auto;
  max-height:calc(100dvh - 90px);overflow-y:auto;padding:8px 14px 14px;border-radius:30px;
  background:var(--home-glass-strong,color-mix(in srgb,var(--th-bg,var(--bg)) 88%,transparent));border:1px solid rgba(var(--cr-a),.16);
  box-shadow:0 26px 70px rgba(0,0,0,.3),inset 0 1px 0 var(--pp-hi);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  transform:translateY(calc(100% + 40px));transition:transform .38s var(--cr-ease);scrollbar-width:none}
.cr-sheet.is-on{transform:none}
.cr-grip{width:38px;height:4px;margin:2px auto 10px;border-radius:2px;background:rgba(var(--cr-a),.3)}
.cr-sheet-head{padding:2px 6px 12px;text-align:center}
.cr-sheet-head strong{display:block;color:var(--pp-ink);font:600 16px/1.35 var(--font-home-text,'Noto Serif SC',serif),serif}
.cr-sheet-head small{display:block;margin-top:4px;color:var(--pp-ink-3);font-size:11.5px;letter-spacing:.06em}
.cr-act{width:100%;height:52px;display:flex;align-items:center;gap:14px;padding:0 16px;border:0;border-radius:16px;background:transparent;color:var(--pp-ink);
  font:500 15px/1 var(--font-ui,sans-serif);text-align:left;-webkit-tap-highlight-color:transparent}
.cr-act svg{width:20px;height:20px;flex:none;color:rgba(var(--cr-a),.95)}
.cr-act:active{background:rgba(var(--cr-a),.1)}
.cr-act.is-danger,.cr-act.is-danger svg{color:var(--danger,#e5484d)}
.cr-btn{flex:1;height:48px;padding:0 16px;border-radius:16px;border:1px solid rgba(var(--cr-a),.2);background:transparent;color:var(--pp-ink);
  font:600 14px/1 var(--font-ui,sans-serif);letter-spacing:.04em;-webkit-tap-highlight-color:transparent}
.cr-btn.is-primary{border-color:transparent;color:var(--on-accent,#fff);background:linear-gradient(135deg,rgba(var(--cr-a),.96),rgba(var(--cr-a),.76));box-shadow:0 8px 20px rgba(var(--cr-a),.3)}
.cr-cancel{width:100%;margin-top:8px}

/* 日历:年 → 月 → 日 */
.cr-cal-years{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:0 2px 14px}
.cr-chip{height:32px;padding:0 16px;border-radius:999px;border:1px solid rgba(var(--cr-a),.22);background:transparent;color:var(--pp-ink-2);font:italic 500 14px/1 Georgia,serif;letter-spacing:.06em}
.cr-chip.is-on{border-color:transparent;color:var(--on-accent,#fff);background:rgba(var(--cr-a),.9)}
.cr-cal-months{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.cr-mon{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:16px;
  background:rgba(var(--cr-a),.08);color:var(--pp-ink);-webkit-tap-highlight-color:transparent;transition:background .2s}
.cr-mon b{font:italic 400 19px/1 Georgia,serif}
.cr-mon small{font-size:10px;color:var(--pp-ink-3)}
.cr-mon.is-empty{opacity:.34}
.cr-mon.is-on{background:rgba(var(--cr-a),.9);color:var(--on-accent,#fff)}
.cr-mon.is-on small{color:inherit;opacity:.85}
.cr-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--cr-a),.14)}
.cr-dow{padding:2px 0 6px;text-align:center;color:var(--pp-ink-3);font-size:10.5px}
.cr-day{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pp-ink-3);font:500 13px/1 var(--font-ui,sans-serif);opacity:.55}
.cr-day.has{color:var(--pp-ink);font-weight:600;opacity:1}
.cr-day.has::after{content:'';position:absolute;left:50%;bottom:12%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(var(--cr-a),.95)}
.cr-day.is-on{background:rgba(var(--cr-a),.9);color:var(--on-accent,#fff)}
.cr-day.is-on::after{background:var(--on-accent,#fff)}
.cr-cal-actions{display:flex;gap:8px;margin-top:16px}

/* 在这一页上重放氛围:氛围层和它的 ✕ 要盖在这一页上面(iOS 壳走原生层,本来就在最上面) */
body:has(#creations-board:not(.hidden)) #work-overlay{z-index:97}
body:has(#creations-board:not(.hidden)) #work-overlay-close{z-index:98}

@media (prefers-reduced-motion: reduce){
  .cr-tile,.cr-skel{animation:none}
  .cr-tab-ink,.cr-sheet{transition:none}
}