/* 深色畫廊（試做，v3.31.0）：參考 Cosmos 的設計語言——近黑底、白色粗體標題、灰色次要字、深灰大圓角卡片、
   白色膠囊當主按鈕和「選中」、浮在畫面上的毛玻璃分頁列。只換外觀，頁面架構、卡片內容、功能都跟原本一樣。
   開關：更多 → 外觀 →「試看深色畫廊」（存在這支手機，localStorage purrmo:look）；網址加 ?look=gallery 也可以打開、?look=off 關掉。
   <html data-look="gallery"> 由 js/theme.js 設定。
   v3.32.0 起套到整個 App（所有分頁、子頁面、底部選單）。

   設計系統（數值都在下面這一段 token，元件只用 token）：
   - 顏色：底 --bg 近黑、卡 --card 深灰、填色 --field 再淺一階、框線白 8%；字 白 / 灰 --sub / 淡灰 --faint
   - 主色＝白：主按鈕、新增鈕、選中的膠囊都是白底黑字（--accent 白、--on-accent 近黑）
   - 狀態色只留三個，壓暗當底、亮色當字：快到期 琥珀、逾期 珊瑚紅、完成 薄荷綠
   - 圓角：卡片 22（--r-card）、按鈕和輸入框 14（--r-ctl）、膠囊 999
   - 字：標題 700 白色、不用手寫圓體（--cute 換成系統字），內文 400，次要資訊灰色 */

:root[data-look="gallery"] {
  --bg: #121212; --dot: transparent; --card: #1e1e1e; --field: #2a2a2a; --line: rgba(255, 255, 255, .08); --paper-line: rgba(255, 255, 255, .08);
  --ink: #ffffff; --ink-line: rgba(255, 255, 255, .08); --ink-soft: rgba(255, 255, 255, .24); --ink-shadow: rgba(0, 0, 0, .3); --edge: transparent;
  --text: #f4f4f4; --sub: #9a9a9a; --faint: #767676;
  --accent: #ffffff; --accent-deep: #ffffff; --accent-text: #ffffff; --accent-soft: rgba(255, 255, 255, .1); --on-accent: #121212;
  --chip-on: #ffffff; --chip-on-line: #ffffff; --chip-on-text: #121212;
  --state: #ffffff; --on-state: #121212;
  --today-bg: #ffffff; --today: #121212;
  --warn-bg: rgba(255, 196, 92, .14); --warn: #ffc45c;
  --late-bg: rgba(255, 128, 116, .14); --late: #ff8a80;
  --info-bg: rgba(140, 190, 255, .14); --info: #9cc6ff;
  --ok-bg: rgba(127, 209, 155, .14); --ok: #7fd19b;
  --danger: #ff8a80; --danger-soft: rgba(255, 128, 116, .14);
  --heart: #ff9db3;
  --butter: #2a2a2a; --peach: #2a2a2a; --mint: #2a2a2a; --pink: #2a2a2a; --lilac: #2a2a2a; --sky: #2a2a2a;
  --bar-bg: #121212;
  --glass: rgba(42, 42, 42, .72);
  --cal-red: #2a2a2a;
  --on-dark: #ffffff; --scrim: rgba(0, 0, 0, .55); --overlay: rgba(0, 0, 0, .6);
  --shadow-card: none; --shadow-float: 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-fab: 0 8px 24px rgba(0, 0, 0, .5); --shadow-accent: 0 4px 14px rgba(0, 0, 0, .45);
  --r-card: 22px; --r-ctl: 14px;
  --shutter: rgba(0, 0, 0, .92);
  --cute: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --round: var(--cute);
  color-scheme: dark;
}

/* 整頁底色：純色，不要奶油點點 */
:root[data-look="gallery"] body { background: var(--bg); }

/* ---- 共用元件 ---- */
:root[data-look="gallery"] {
  /* 標題分頁列：沒有底線、沒有橘色短線；選中的分頁只靠「大、白、粗」區分 */
  & .tt-bar { border-bottom: 0; }
  & .tt-tab { color: var(--faint); font-weight: 600; }
  & .tt-tab.on { color: var(--text); font-size: var(--fs-32); font-weight: 700; }
  & .tt-tab.on::after { display: none; }
  & .dash-stat b { color: var(--text); font-weight: 700; }

  & .section-title { color: var(--sub); font-weight: 600; }

  /* 卡片：深灰、大圓角、不描邊 */
  & .card { background: var(--card); border-color: transparent; box-shadow: none; }

  /* 小日曆：深灰方塊，月份灰字、日期白色粗體（不再用紅色表頭） */
  & .walk-cal { border: 0; background: var(--field); border-radius: var(--r-ctl); }
  & .walk-cal-m { background: none; color: var(--sub); font-weight: 600; padding-top: 6px; }
  & .walk-cal b { color: var(--text); font-weight: 700; }
  & .walk-cal.past b { color: var(--sub); }

  & .walk-title { font-weight: 700; }

  /* 倒數膠囊：快到了＝白底黑字（最醒目）、其他＝深灰 */
  & .when-pill { background: var(--field); color: var(--sub); font-weight: 600; }
  & .when-pill.soon, & .when-pill.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
  & .when-pill.week { background: var(--field); color: var(--text); }

  /* 下一步那一條：上面一條細線分開；動作改成膠囊按鈕 */
  & .cc-band { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
  & .cc-band.warn, & .cc-band.late { background: color-mix(in srgb, var(--text) 4%, transparent); }
  & .cc-band.warn .cc-say b, & .cc-band.late .cc-say b { color: var(--text); }
  & .cc-band .cc-sub { color: var(--sub); }
  & .cc-band .check { background: transparent; }
  & .cc-go { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--pill-sm-h); padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--field); color: var(--text); font-family: inherit; font-size: var(--fs-13); font-weight: 600; }
  & .cc-band.warn .cc-go, & .cc-band.late .cc-go { background: var(--accent); color: var(--on-accent); }
  & .cc-go .ico { width: 14px; height: 14px; }

  /* 提醒卡（建立帳號）：圖示底改深灰，主按鈕白色膠囊 */
  & .nudge-ico { background: var(--field); color: var(--text); }
  & .mini-btn.primary { border-color: var(--accent); }

  /* 刪除按鈕：珊瑚紅底配深色字（白字在亮珊瑚紅上看不清楚） */
  & .btn.danger { color: var(--on-accent); }
  /* 提示：比卡片再亮一階，浮在深色畫面上才看得到 */
  & .toast { background: var(--field); border-color: var(--ink-soft); }

  /* 右下角＋：白色圓、黑色加號，放在浮動分頁列上方 */
  & .fab { bottom: calc(var(--tabbar) + var(--safe-bottom) + 28px); }
}

/* ---- 底部分頁列：浮在畫面上的毛玻璃膠囊 ---- */
:root[data-look="gallery"] #tabs {
  left: var(--sp-5); right: var(--sp-5); bottom: calc(var(--safe-bottom) + 12px);
  height: var(--tabbar); padding: 0 var(--sp-2);
  align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: var(--shadow-float);
  & .tab { height: calc(var(--tabbar) - 10px); border-radius: var(--r-pill); color: var(--sub); }
  & .tab.on { background: var(--accent-soft); color: var(--text); }
}
/* 還在載入（分頁列還沒畫）時不要先出現一條空的膠囊 */
:root[data-look="gallery"] #tabs:empty { display: none; }
/* 分頁列浮起來之後，下面留一點漸層，內容捲到底下時不會跟分頁列糊在一起 */
:root[data-look="gallery"] #view::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  height: calc(var(--tabbar) + var(--safe-bottom) + 40px);
  background: linear-gradient(to bottom, transparent, var(--bg) 70%);
}

/* ---- 招牌轉場（v3.32.0，js 在 ui.js；系統「減少動態效果」打開時 js 不會加這些） ---- */
/* 打勾＝快門：上下兩片黑幕 0.12 秒合起來、再打開 */
:root[data-look="gallery"] .shutter { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
:root[data-look="gallery"] .shutter::before, :root[data-look="gallery"] .shutter::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50%; background: var(--shutter);
  animation: shutter-top .34s cubic-bezier(.6, 0, .3, 1) both;
}
:root[data-look="gallery"] .shutter::before { top: 0; }
:root[data-look="gallery"] .shutter::after { bottom: 0; animation-name: shutter-bottom; }
@keyframes shutter-top { 0% { transform: translateY(-100%); } 40%, 55% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes shutter-bottom { 0% { transform: translateY(100%); } 40%, 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* 點卡片＝卡片原地展開成整頁（關掉時縮回卡片的位置） */
:root[data-look="gallery"] .page.from-card { transform: none; clip-path: var(--from); transition: clip-path .3s cubic-bezier(.2, .8, .2, 1); }
:root[data-look="gallery"] .page.from-card.in { clip-path: inset(0 round 0); }

/* ---- 載入中：星星轉一圈（v3.34.0）----
   assets/star/spin.webp 是 8 格橫排（正面 → 四分之三 → 側面 → 背面 → 另一側 → 回到正面），每格 200×194（2 倍圖）
   只在深色畫廊顯示；原本外觀還是貓的 loading.webp */
.boot-star { display: none; }
:root[data-look="gallery"] .boot img { display: none; }
:root[data-look="gallery"] .boot-star {
  display: block; width: 100px; height: 97px; margin-bottom: var(--sp-4);
  background: url("../assets/star/spin.webp") 0 0 / 800px 97px no-repeat;
  animation: star-spin .8s steps(8) infinite, star-bob 1.6s ease-in-out infinite alternate;
}
@keyframes star-spin { to { background-position: -800px 0; } }
@keyframes star-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { :root[data-look="gallery"] .boot-star { animation: none; } }