/* 映跡的皮膚。預設皮膚「晨光」(a) 的樣式就是 app.css 本身；這裡是其他六個。
   每個皮膚先重新定義全部的顏色與形狀變數，再調整少數元件。 */

/* ═════════════ B 色塊 ═════════════ */
:root[data-skin="b"] {
  color-scheme: light;
  --bg: #F3F4F6; --card: #FFFFFF; --fill: #E6E7EB; --fill-2: #D6D8DE;
  --text: #101114; --text2: #555963; --outline: #B9BCC6; --sep: rgba(16, 17, 20, 0.1);
  --accent: #101114; --on-accent: #FFFFFF; --accent-soft: #C7B8FF; --on-accent-soft: #101114;
  --danger: #C7341A; --danger-soft: #FFD9D1; --warn-bg: #FF6A4D; --warn-text: #FFFFFF; --ok-bg: #20B26B; --ok-text: #FFFFFF;
  --bar: #101114; --hero: #3D7BFF; --hero-text: #FFFFFF;
  --font-display: "Noto Sans TC", var(--font); --font-num: "Bricolage Grotesque", var(--font);
  --title-size: 34px; --title-weight: 900;
  --r-card: 28px; --r-list: 24px; --r-stage: 28px;
  --a-blue: #3D7BFF; --a-red: #FFC935; --a-yellow: #FFC935; --a-green: #20B26B; --a-navy: #101114; --a-ink: #101114;
  --a-blue-tint: #D5E2FF; --a-green-tint: #CDEEDD; --a-yellow-tint: #FFEDB5; --a-red-tint: #FFD9D1; --a-cookie: rgba(255, 255, 255, 0.16);
}
[data-skin="b"] .hero h2 { font-weight: 900; font-size: 22px; }
[data-skin="b"] .hero .tagp { background: #101114; color: #fff; font-weight: 900; font-family: var(--font-display); }
[data-skin="b"] .hero .cta { background: #101114; color: #fff; }
[data-skin="b"] .proj-list { grid-template-columns: 1fr 1fr; gap: 8px; }
[data-skin="b"] .proj { background: var(--tone); color: var(--tone-ink); display: flex; flex-direction: column; }
[data-skin="b"] .proj[data-tone="0"] { --tone: #FFC935; --tone-ink: #101114; }
[data-skin="b"] .proj[data-tone="1"] { --tone: #20B26B; --tone-ink: #FFFFFF; }
[data-skin="b"] .proj[data-tone="2"] { --tone: #FF6A4D; --tone-ink: #FFFFFF; }
[data-skin="b"] .proj[data-tone="3"] { --tone: #3D7BFF; --tone-ink: #FFFFFF; }
[data-skin="b"] .proj-top { flex: 1; display: block; padding: 14px 14px 6px; min-height: 128px; }
[data-skin="b"] .proj-top:active { background: rgba(0, 0, 0, 0.07); }
[data-skin="b"] .proj-thumb { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.75); }
[data-skin="b"] .proj-name { font-size: 15px; font-weight: 900; padding-right: 52px; }
[data-skin="b"] .proj-count { display: block; margin-top: 8px; }
[data-skin="b"] .proj-count b { font-family: var(--font-num); font-size: 58px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
[data-skin="b"] .proj-count em { font-style: normal; font-size: 12px; font-weight: 700; margin-left: 4px; }
[data-skin="b"] .proj-sum, [data-skin="b"] .proj .chev, [data-skin="b"] .proj-score { display: none; }
[data-skin="b"] .proj-latest { color: inherit; opacity: 0.78; font-size: 12px; }
[data-skin="b"] .proj-badge .badge { background: #101114; color: #fff; }
[data-skin="b"] .proj-actions { padding: 6px 12px 12px; gap: 6px; }
[data-skin="b"] .proj-actions .lbl { display: none; }
[data-skin="b"] .proj-actions .btn { flex: none; width: 42px; min-height: 42px; padding: 0; }
[data-skin="b"] .proj-actions .btn.primary { background: #101114; color: #fff; }
[data-skin="b"] .proj-actions .btn.tinted { background: #fff; color: #101114; }
[data-skin="b"] .proj-actions .icon-btn { width: 42px; height: 42px; margin-left: auto; background: rgba(16, 17, 20, 0.13); color: inherit; }
[data-skin="b"] .month, [data-skin="b"] .rec-date, [data-skin="b"] .section-title { font-family: var(--font-display); font-weight: 900; }
[data-skin="b"] .seg button.on { background: #101114; color: #fff; box-shadow: none; }
[data-skin="b"] .span-card { background: #C7B8FF; color: #101114; border-radius: 28px; padding: 14px 18px 12px; flex-wrap: wrap; }
[data-skin="b"] .span-card small { font-weight: 900; opacity: 1; flex-basis: 100%; }
[data-skin="b"] .span-card strong { font-size: 76px; letter-spacing: -0.04em; line-height: 0.9; }
[data-skin="b"] .span-card span { background: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 12px; opacity: 1; align-self: center; }
[data-skin="b"] .tag { background: #101114; color: #fff; }
[data-skin="b"] .icon-btn.tool { background: #101114; color: #fff; }
[data-skin="b"] .split-handle::after { background: #101114; color: #fff; }

/* B、D、E 共用：浮在畫面上的膠囊導覽列 */
:is([data-skin="b"], [data-skin="d"], [data-skin="e"]) #tabbar { left: 12px; right: 12px; bottom: max(12px, calc(var(--safe-b) - 8px)); height: 60px; padding: 0 7px; border-radius: 30px; align-items: center; }
/* 浮動導覽列的下方與四周墊一層底色，捲動時內容才不會從導覽列底下和旁邊露出來 */
:is([data-skin="b"], [data-skin="d"], [data-skin="e"]) #app::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(max(12px, var(--safe-b) - 8px) + 92px); background: linear-gradient(to bottom, transparent, var(--scrim, var(--bg)) 42%); z-index: 9; pointer-events: none; }
:is([data-skin="b"], [data-skin="d"], [data-skin="e"]) #view { padding-bottom: calc(var(--safe-b) + 108px); }
:is([data-skin="b"], [data-skin="d"], [data-skin="e"]) .toast { bottom: calc(max(12px, var(--safe-b) - 8px) + 76px); }

[data-skin="b"] #tabbar { background: #101114; box-shadow: 0 10px 24px rgba(16, 17, 20, 0.25); }
[data-skin="b"] .tab { color: #8D9099; }
[data-skin="b"] .tab .lbl { display: none; }
[data-skin="b"] .tab .pill { width: 40px; height: 44px; background: none; color: inherit; }
[data-skin="b"] .tab.on { flex: none; flex-direction: row; gap: 4px; height: 46px; padding: 0 16px 0 6px; border-radius: 23px; background: #fff; color: #101114; white-space: nowrap; }
[data-skin="b"] .tab.on .pill { width: 34px; background: none; color: inherit; }
[data-skin="b"] .tab.on .lbl { display: inline; font-family: var(--font-display); font-weight: 900; font-size: 13px; }

/* ═════════════ C 相紙 ═════════════ */
:root[data-skin="c"] {
  color-scheme: light;
  --bg: #DCE6E0; --card: #FDFDFB; --fill: #CCD9D2; --fill-2: #BDCCC4;
  --text: #17332E; --text2: #47625B; --outline: rgba(23, 51, 46, 0.45); --sep: rgba(23, 51, 46, 0.16);
  --accent: #17332E; --on-accent: #FDFDFB; --accent-soft: #F1E2A0; --on-accent-soft: #17332E;
  --danger: #A8321A; --danger-soft: #F6D5CB; --warn-bg: #FFDFC2; --warn-text: #5E2A00; --ok-bg: #CFE3D6; --ok-text: #17332E;
  --bar: #FDFDFB; --hero: transparent; --hero-text: #17332E; --sheet-bg: #E6EEE9;
  --font-display: "LXGW WenKai TC", "Noto Serif TC", serif; --font-num: "LXGW WenKai TC", "Noto Serif TC", serif;
  --title-size: 36px;
  --r-card: 5px; --r-list: 5px; --r-btn: 6px; --r-chip: 6px; --r-seg: 6px; --r-thumb: 1px; --r-stage: 2px; --r-input: 6px; --r-sheet: 12px; --r-notice: 3px;
  --card-shadow: 0 1px 2px rgba(23, 51, 46, 0.18);
  --a-blue: #3B7F71; --a-red: #FF7A1A; --a-yellow: #F0CE4E; --a-green: #3B7F71; --a-navy: #17332E; --a-ink: #17332E; --a-paper: #FDFDFB; --a-line: #B9C9C2;
  --a-blue-tint: #C5D6CE; --a-green-tint: #D5E2DA; --a-yellow-tint: #F5E9B8; --a-red-tint: #F6D9C2; --a-cookie: transparent;
}
[data-skin="c"] :is(.month, .rec-date, .sheet-head .title, .section-title, .field-label, .tab, .seg button, .btn, .chip, .empty h3, .alert h3, .notice, .span-card, .skin-name, .banner h2, .slot .when, .pick .cap) { font-family: var(--font-display); }
[data-skin="c"] .page-sub, [data-skin="c"] .section-title { font-size: 15px; }
[data-skin="c"] .hero { display: block; padding: 0; min-height: 0; overflow: visible; border-radius: 0; }
[data-skin="c"] .hero-media { display: block; position: relative; width: 100%; height: 204px; text-align: left; }
[data-skin="c"] .hm { position: absolute; width: 112px; background: #FDFDFB; padding: 6px 6px 26px; overflow: visible; border-radius: 3px; box-shadow: 0 8px 16px -4px rgba(23, 51, 46, 0.3), 0 1px 2px rgba(23, 51, 46, 0.25); }
[data-skin="c"] .hm img { height: 130px; }
[data-skin="c"] .hm::before { content: ""; position: absolute; width: 46px; height: 15px; top: -8px; left: 50%; margin-left: -23px; background: rgba(240, 206, 78, 0.88); transform: rotate(-4deg); z-index: 1; }
[data-skin="c"] .hm-a { left: 2px; top: 26px; transform: rotate(-7deg); }
[data-skin="c"] .hm-b { left: 110px; top: 10px; transform: rotate(4deg); }
[data-skin="c"] .hero-media[data-n="1"] .hm-b { left: 26px; top: 16px; transform: rotate(-4deg); }
[data-skin="c"] .stamp { display: block; position: absolute; right: 11px; bottom: 30px; font: 900 11.5px "Doto", "Courier New", monospace; color: #FF8A2A; letter-spacing: 0.02em; text-shadow: 0 0 4px rgba(255, 110, 10, 0.8); white-space: nowrap; }
[data-skin="c"] .hm-cap { display: block; position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 400 13px var(--font-display); color: #17332E; }
[data-skin="c"] .hm-days { display: block; position: absolute; right: 8px; top: 2px; font: 700 22px var(--font-display); color: #17332E; transform: rotate(5deg); }
[data-skin="c"] .hm-days em { font-style: normal; font-size: 15px; margin-left: 2px; }
[data-skin="c"] .hm-days .lbl { display: none; }
[data-skin="c"] .hero .art { position: absolute; right: -8px; top: 44px; width: 122px; pointer-events: none; }
[data-skin="c"] .hero-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 2px 4px 6px; }
[data-skin="c"] .hero .tagp { display: none; }
[data-skin="c"] .hero h2 { margin: 0; font-size: 22px; font-weight: 700; }
[data-skin="c"] .hero p { grid-column: 1; }
[data-skin="c"] .hero .cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
[data-skin="c"] .hero.no-media .art { position: static; width: 150px; margin: 0 auto; }
[data-skin="c"] .thumb { background: #fff; padding: 3px 3px 10px; box-shadow: 0 1px 3px rgba(23, 51, 46, 0.42); transform: rotate(-4deg); }
[data-skin="c"] :is(.rec-row, .proj, .row):nth-child(even) .thumb { transform: rotate(3deg); }
[data-skin="c"] .thumb.empty-thumb, [data-skin="c"] .pick .thumb { transform: none; }
[data-skin="c"] .pick .thumb { padding: 4px 4px 14px; }
[data-skin="c"] .slot .thumb { padding: 2px 2px 7px; }
[data-skin="c"] .btn.tinted, [data-skin="c"] .btn.gray { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
[data-skin="c"] .proj-actions .icon-btn { border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--outline); }
[data-skin="c"] .icon-btn.tool { background: #FDFDFB; box-shadow: var(--card-shadow); }
[data-skin="c"] .seg { background: transparent; padding: 0; gap: 8px; }
[data-skin="c"] .seg button { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); font-size: 15px; }
[data-skin="c"] .seg button.on { background: var(--text); color: #FDFDFB; }
[data-skin="c"] .notice { background: #FDFDFB repeating-linear-gradient(#FDFDFB 0 25px, #D5DEDA 25px 26px); color: var(--text); font-size: 15px; line-height: 26px; padding: 6px 14px; box-shadow: 0 2px 5px rgba(23, 51, 46, 0.2); transform: rotate(-0.4deg); }
[data-skin="c"] .notice .ico { margin-top: 4px; color: #FF7A1A; }
[data-skin="c"] .notice.ok .ico { color: #3B7F71; }
[data-skin="c"] .notice.warn div { display: inline; background: linear-gradient(transparent 58%, rgba(255, 122, 26, 0.3) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-skin="c"] .month { display: flex; align-items: center; gap: 10px; }
[data-skin="c"] .month::after { content: ""; flex: 1; border-top: 1.5px dashed rgba(23, 51, 46, 0.4); }
[data-skin="c"] #tabbar { background: #FDFDFB; border-top: 1.5px solid #17332E; }
[data-skin="c"] .tab { font-size: 13px; gap: 1px; }
[data-skin="c"] .tab .pill { background: none; height: 28px; position: relative; color: inherit; }
[data-skin="c"] .tab.on { color: #17332E; }
[data-skin="c"] .tab.on .pill::after { content: ""; position: absolute; top: 0; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #FF7A1A; }
[data-skin="c"] .pane-label { background: rgba(0, 0, 0, 0.6); padding: 3px 8px; border-radius: 2px; font: 900 14px "Doto", "Courier New", monospace; color: #FFA54D; letter-spacing: 0.02em; text-shadow: 0 0 4px rgba(255, 110, 10, 0.85), 0 0 2px rgba(0, 0, 0, 0.6); }
[data-skin="c"] .stage { margin: 22px 8px 4px; box-shadow: 0 0 0 8px #FDFDFB, 0 12px 22px -2px rgba(23, 51, 46, 0.35); }
[data-skin="c"] .stage-tools { margin-top: 22px; }
[data-skin="c"] .span-card { background: none; border-radius: 0; padding: 0 6px 8px; border-bottom: 1.5px dashed rgba(23, 51, 46, 0.4); color: var(--text); }
[data-skin="c"] .span-card strong { font-size: 36px; font-weight: 700; }
[data-skin="c"] .tag { border-radius: 2px; background: rgba(240, 206, 78, 0.75); color: #17332E; }
[data-skin="c"] .badge { border-radius: 3px; }
[data-skin="c"] .proj-name { font-size: 22px; }
[data-skin="c"] .confirm-photo, [data-skin="c"] .detail-photo { box-shadow: 0 0 0 6px #FDFDFB, 0 6px 14px rgba(23, 51, 46, 0.3); margin: 8px 6px 14px; }

/* ═════════════ D 夜航 ═════════════ */
:root[data-skin="d"] {
  color-scheme: dark;
  --bg: #0D1030; --card: #181D4A; --solid: #1D2356; --fill: #232A66; --fill-2: #2E3680;
  --text: #F0F2FF; --text2: #A9B0E0; --outline: #4651A8; --sep: rgba(240, 242, 255, 0.12);
  --accent: #FFB56B; --on-accent: #0D1030; --accent-soft: #2A3277; --on-accent-soft: #F0F2FF;
  --danger: #FF8DB0; --danger-soft: #4A1F3A; --warn-bg: #FF8DB0; --warn-text: #2A0A1A; --ok-bg: #7BE0B5; --ok-text: #06281B;
  --bar: #232A66; --hero: #181D4A; --hero-text: #F0F2FF;
  --font-num: "Unbounded", var(--font);
  --r-card: 26px; --r-stage: 28px;
  --a-blue: #79C7FF; --a-red: #FF8DB0; --a-yellow: #FFB56B; --a-green: #7BE0B5; --a-navy: #4651A8; --a-ink: #070920; --a-paper: #F0F2FF; --a-line: #4651A8;
  --a-blue-tint: #2E3680; --a-green-tint: #1F4A5A; --a-yellow-tint: #5A4636; --a-red-tint: #5A2F55; --a-cookie: #232A66;
}
[data-skin="d"] .hero { display: block; padding: 0; background: none; overflow: visible; min-height: 0; border-radius: 0; }
[data-skin="d"] .hero-media { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 232px; border-radius: 30px; overflow: hidden; position: relative; }
[data-skin="d"] .hero-media[data-n="1"] { grid-template-columns: 1fr; height: 210px; }
[data-skin="d"] .hero-media[data-n="2"]::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #FFB56B; z-index: 1; }
[data-skin="d"] .hero-media[data-n="2"]::after { content: "‹ ›"; position: absolute; left: 50%; top: 42%; width: 42px; height: 42px; margin: -21px; border-radius: 50%; background: #FFB56B; color: #0D1030; display: grid; place-items: center; font-weight: 800; font-size: 15px; z-index: 2; }
[data-skin="d"] .hm { height: 100%; }
[data-skin="d"] .hm-cap { display: block; position: absolute; top: 12px; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: rgba(13, 16, 48, 0.72); color: #F0F2FF; }
[data-skin="d"] .hm-a .hm-cap { left: 12px; }
[data-skin="d"] .hm-b .hm-cap { right: 12px; }
[data-skin="d"] .hm-days { display: flex; align-items: baseline; gap: 6px; position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 18px 12px; background: rgba(13, 16, 48, 0.86); color: #F0F2FF; z-index: 3; }
[data-skin="d"] .hm-days b { font: 700 30px/1.1 var(--font-num); color: #FFB56B; }
[data-skin="d"] .hm-days em { font-style: normal; font-weight: 700; }
[data-skin="d"] .hm-days .lbl { font-size: 12px; color: #C9CEF5; margin-left: 4px; }
[data-skin="d"] .hero-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 6px 4px; }
[data-skin="d"] .hero .tagp { display: none; }
[data-skin="d"] .hero h2 { margin: 0; font-size: 18px; }
[data-skin="d"] .hero p { grid-column: 1; }
[data-skin="d"] .hero .cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-height: 50px; padding: 0 22px 0 18px; font-size: 15px; }
[data-skin="d"] .hero .art { display: none; }
[data-skin="d"] .hero.no-media { display: grid; background: var(--card); padding: 18px 4px 0 20px; border-radius: 28px; overflow: hidden; }
[data-skin="d"] .hero.no-media .art { display: block; }
[data-skin="d"] .hero.no-media .hero-text { display: block; padding: 0 0 18px; }
[data-skin="d"] .hero.no-media .cta { margin-top: 12px; }
[data-skin="d"] .proj[data-tone="0"] { --tone: #FFB56B; }
[data-skin="d"] .proj[data-tone="1"] { --tone: #7BE0B5; }
[data-skin="d"] .proj[data-tone="2"] { --tone: #FF8DB0; }
[data-skin="d"] .proj[data-tone="3"] { --tone: #79C7FF; }
[data-skin="d"] .proj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); margin-right: 8px; vertical-align: 2px; }
[data-skin="d"] .btn.tinted { background: none; box-shadow: inset 0 0 0 1.5px #4651A8; }
[data-skin="d"] .seg button.on { background: #F0F2FF; color: #0D1030; box-shadow: none; }
[data-skin="d"] .span-card { background: var(--card); color: var(--text); border-radius: 26px; padding: 16px 20px; }
[data-skin="d"] .span-card strong { font-size: 40px; font-weight: 700; color: #FFB56B; }
[data-skin="d"] .span-card strong em { color: var(--text); }
[data-skin="d"] .split-handle::before { background: #FFB56B; }
[data-skin="d"] .split-handle::after { background: #FFB56B; color: #0D1030; }
[data-skin="d"] #tabbar { background: #232A66; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); padding: 0 8px; }
[data-skin="d"] .tab .lbl { display: none; }
[data-skin="d"] .tab .pill { width: 44px; height: 44px; border-radius: 50%; background: none; color: #A9B0E0; }
[data-skin="d"] .tab.on .pill { background: #FFB56B; color: #0D1030; }

/* ═════════════ Apple 三款共用 ═════════════ */
:root:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif;
  --title-size: 34px;
}
/* Apple 的介面不用卡通人物 */
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .art { display: none; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .banner { grid-template-columns: 1fr; padding: 18px 20px; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .empty { padding-top: 40px; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .large-title { letter-spacing: -0.02em; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert { max-width: 280px; text-align: center; border-radius: 14px; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert .body { padding: 20px 16px 18px; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert h3 { font-size: 17px; font-weight: 600; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert p { font-size: 13px; margin-top: 5px; color: var(--text); }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert .acts { padding: 0; gap: 0; border-top: 0.5px solid var(--sep); }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert .acts button { flex: 1; border-radius: 0; min-height: 44px; font-size: 17px; font-weight: 400; }
:is([data-skin="e"], [data-skin="f"], [data-skin="g"]) .alert .acts button + button { border-left: 0.5px solid var(--sep); font-weight: 600; }
:is([data-skin="f"], [data-skin="g"]) .sheet-head .btn.done { background: none; color: var(--accent); padding: 0 12px; font-weight: 600; }
:is([data-skin="f"], [data-skin="g"]) .seg { padding: 2px; }
:is([data-skin="f"], [data-skin="g"]) .seg button { border-radius: 7px; min-height: 32px; }
:is([data-skin="f"], [data-skin="g"]) .chip { border-color: transparent; background: var(--fill); }
:is([data-skin="f"], [data-skin="g"]) .chip.on { background: var(--accent); }
:is([data-skin="f"], [data-skin="g"]) .pill-select select { border-color: transparent; background: var(--card); }
:is([data-skin="f"], [data-skin="g"]) .row { min-height: 46px; padding: 10px 16px; }
:is([data-skin="f"], [data-skin="g"]) .row + .row::before { left: 16px; right: 0; height: 0.5px; }
:is([data-skin="f"], [data-skin="g"]) .hero { display: none; }
:is([data-skin="f"], [data-skin="g"]) #tabbar { background: var(--bar); border-top: 0.5px solid var(--sep); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding-top: 4px; }
:is([data-skin="f"], [data-skin="g"]) .tab { font-size: 10.5px; gap: 0; font-weight: 500; }
:is([data-skin="f"], [data-skin="g"]) .tab .pill { background: none; height: 30px; color: inherit; }
:is([data-skin="f"], [data-skin="g"]) .tab.on { color: var(--accent); font-weight: 500; }
:is([data-skin="f"], [data-skin="g"]) .span-card strong { font-weight: 700; }
:is([data-skin="f"], [data-skin="g"]) .proj-name { font-family: var(--font); }

/* ═════════════ E 流光（Liquid Glass） ═════════════ */
:root[data-skin="e"] {
  color-scheme: light; --scrim: rgba(236, 239, 246, 0.92);
  --bg: #ECEFF6; --chrome: #DDE6FA; --card: rgba(255, 255, 255, 0.6); --solid: #F6F7FB; --sheet-bg: rgba(240, 243, 250, 0.86);
  --fill: rgba(118, 126, 150, 0.16); --fill-2: rgba(118, 126, 150, 0.26);
  --text: #0B0B0F; --text2: #5A5E6C; --outline: rgba(60, 66, 90, 0.28); --sep: rgba(60, 66, 90, 0.14);
  --accent: #007AFF; --on-accent: #FFFFFF; --accent-soft: rgba(0, 122, 255, 0.14); --on-accent-soft: #0062CC;
  --danger: #D92D20; --danger-soft: #FBDAD7; --warn-bg: rgba(255, 159, 10, 0.22); --warn-text: #6B3F00; --ok-bg: rgba(48, 176, 80, 0.2); --ok-text: #0B4A1E;
  --bar: rgba(255, 255, 255, 0.5); --hero: transparent; --hero-text: #0B0B0F;
  --r-card: 26px; --r-list: 22px; --r-stage: 30px; --r-sheet: 34px; --r-input: 18px; --r-thumb: 16px;
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 6px 20px rgba(20, 30, 60, 0.08);
  --glass: blur(18px) saturate(180%);
}
/* 背景的色光：玻璃要有東西可以透出來 */
[data-skin="e"] #app { background: radial-gradient(64% 36% at 6% 12%, #BCD4FF 0, rgba(188, 212, 255, 0) 100%), radial-gradient(58% 32% at 100% 56%, #FFD6BD 0, rgba(255, 214, 189, 0) 100%), radial-gradient(64% 34% at 20% 100%, #D9CBFF 0, rgba(217, 203, 255, 0) 100%), #ECEFF6; }
[data-skin="e"] #tabbar { height: 62px; padding: 0 6px; border-radius: 31px; background: var(--bar); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--card-shadow), 0 10px 30px rgba(20, 30, 60, 0.16); }
[data-skin="e"] .tab { gap: 0; font-size: 10px; font-weight: 600; color: #3C3F4A; height: 50px; border-radius: 25px; }
[data-skin="e"] .tab .pill { width: auto; height: 26px; background: none; color: inherit; }
[data-skin="e"] .tab.on { color: #007AFF; background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 1px 0 #fff; }
[data-skin="e"] .hero { display: block; padding: 0; min-height: 0; border-radius: 30px; box-shadow: 0 16px 30px -14px rgba(20, 30, 60, 0.4); }
[data-skin="e"] .hero-media { display: block; width: 100%; height: 262px; }
[data-skin="e"] .hm-a { display: none; }
[data-skin="e"] .hm-b { height: 100%; }
[data-skin="e"] .hero-text { position: absolute; left: 10px; right: 10px; bottom: 10px; min-height: 58px; border-radius: 29px; padding: 9px 62px 9px 18px; background: rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--card-shadow); }
[data-skin="e"] .hero .tagp { background: none; padding: 0; font-size: 11.5px; color: rgba(0, 0, 0, 0.6); display: block; }
[data-skin="e"] .hero h2 { margin: 0; font-size: 15px; font-weight: 600; }
[data-skin="e"] .hero p { display: none; }
[data-skin="e"] .hero .cta { position: absolute; right: 7px; top: 50%; margin: -22px 0 0; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
[data-skin="e"] .hero .cta .lbl { display: none; }
[data-skin="e"] .hero.no-media { background: var(--card); box-shadow: var(--card-shadow); padding: 10px; }
[data-skin="e"] .hero.no-media .hero-text { position: relative; left: 0; right: 0; bottom: 0; }
[data-skin="e"] .hero.no-media p { display: block; }
[data-skin="e"] .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 10px rgba(0, 122, 255, 0.3); }
[data-skin="e"] .icon-btn.tool { background: rgba(255, 255, 255, 0.5); box-shadow: var(--card-shadow); color: #007AFF; }
[data-skin="e"] .sheet { -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
[data-skin="e"] .sheet-head .btn.done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 10px rgba(0, 122, 255, 0.3); }
[data-skin="e"] .seg button.on { background: rgba(255, 255, 255, 0.88); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
[data-skin="e"] .pane-label { background: rgba(255, 255, 255, 0.55); color: #0B0B0F; -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--card-shadow); }
[data-skin="e"] .split-handle::after { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--card-shadow), 0 2px 8px rgba(0, 0, 0, 0.2); }
[data-skin="e"] .span-card { background: var(--card); color: var(--text); box-shadow: var(--card-shadow); border-radius: 24px; }
[data-skin="e"] .span-card strong { font-weight: 700; }
[data-skin="e"] .notice { box-shadow: var(--card-shadow); background-color: var(--card); }
[data-skin="e"] .notice.warn { background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--card); }
[data-skin="e"] .notice.ok { background: linear-gradient(var(--ok-bg), var(--ok-bg)), var(--card); }
[data-skin="e"] .input { background: rgba(255, 255, 255, 0.72); }
[data-skin="e"] .chip { border-color: transparent; background: rgba(255, 255, 255, 0.6); box-shadow: var(--card-shadow); }
[data-skin="e"] .chip.on { background: var(--accent); }
[data-skin="e"] .pill-select select { border-color: transparent; background: rgba(255, 255, 255, 0.6); box-shadow: var(--card-shadow); }
[data-skin="e"] .stage, [data-skin="e"] .result { box-shadow: 0 16px 30px -14px rgba(20, 30, 60, 0.4); }
[data-skin="e"] .proj-name { font-family: var(--font); }

/* ═════════════ F 健康 ═════════════ */
:root[data-skin="f"] {
  --bg: #F2F2F7; --card: #FFFFFF; --fill: rgba(118, 118, 128, 0.12); --fill-2: rgba(118, 118, 128, 0.2);
  --text: #000000; --text2: #6C6C70; --outline: rgba(60, 60, 67, 0.3); --sep: rgba(60, 60, 67, 0.2);
  --accent: #007AFF; --on-accent: #FFFFFF; --accent-soft: rgba(0, 122, 255, 0.13); --on-accent-soft: #007AFF;
  --danger: #D70015; --danger-soft: #FFE1E0; --warn-bg: #FFF1D6; --warn-text: #7A4300; --ok-bg: #E1F5E6; --ok-text: #0E5A25;
  --bar: rgba(249, 249, 249, 0.94); --hero: #FFFFFF; --hero-text: #000000;
  --r-card: 16px; --r-list: 14px; --r-btn: 14px; --r-chip: 999px; --r-seg: 9px; --r-thumb: 10px; --r-stage: 16px; --r-input: 12px; --r-sheet: 14px; --r-notice: 14px;
  --card-shadow: none;
  --t0: #FF2D55; --t1: #FF9500; --t2: #AF52DE; --t3: #5856D6; --weight: #248A3D;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="f"] {
    --bg: #000000; --card: #1C1C1E; --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.36);
    --text: #FFFFFF; --text2: #98989F; --outline: rgba(84, 84, 88, 0.8); --sep: rgba(84, 84, 88, 0.6);
    --accent: #0A84FF; --on-accent: #FFFFFF; --accent-soft: rgba(10, 132, 255, 0.22); --on-accent-soft: #6CB6FF;
    --danger: #FF453A; --danger-soft: #4A1512; --warn-bg: #3A2A0A; --warn-text: #FFD38A; --ok-bg: #0F3D1E; --ok-text: #B6F0C5;
    --bar: rgba(22, 22, 24, 0.94); --hero: #1C1C1E; --hero-text: #FFFFFF;
    --t0: #FF375F; --t1: #FF9F0A; --t2: #BF5AF2; --t3: #7D7AFF; --weight: #30D158;
  }
}
[data-skin="f"] .proj[data-tone="0"] { --tone: var(--t0); }
[data-skin="f"] .proj[data-tone="1"] { --tone: var(--t1); }
[data-skin="f"] .proj[data-tone="2"] { --tone: var(--t2); }
[data-skin="f"] .proj[data-tone="3"] { --tone: var(--t3); }
[data-skin="f"] .proj-top { align-items: flex-end; padding: 12px 14px 10px; }
[data-skin="f"] .proj-thumb, [data-skin="f"] .proj .chev, [data-skin="f"] .proj-sum { display: none; }
[data-skin="f"] .proj-name { font-size: 14px; font-weight: 600; color: var(--tone); }
[data-skin="f"] .proj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); margin-right: 6px; }
[data-skin="f"] .proj-count { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
[data-skin="f"] .proj-count b { font: 700 28px/1.1 var(--font-num); }
[data-skin="f"] .proj-count em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text2); }
[data-skin="f"] .proj-latest { font-size: 12px; }
[data-skin="f"] .proj-bars { display: flex; align-items: flex-end; gap: 5px; height: 42px; color: var(--tone); flex: none; }
[data-skin="f"] .proj-bars i { width: 9px; border-radius: 3px; background: currentColor; }
[data-skin="f"] .proj-bars i.dim { opacity: 0.25; }
[data-skin="f"] .proj-actions { padding: 0 14px 12px; }
[data-skin="f"] .proj-actions .btn { min-height: 40px; font-size: 15px; }
[data-skin="f"] .proj-actions .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
[data-skin="f"] .proj-score { margin: 0 14px; padding: 9px 0 11px; border-top-width: 0.5px; }
[data-skin="f"] .weight-card { display: block; position: relative; padding: 12px 14px 14px; margin-top: 12px; }
[data-skin="f"] .wc-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--weight); }
[data-skin="f"] .wc-head time { color: var(--text2); font-weight: 400; font-size: 12px; }
[data-skin="f"] .wc-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: 6px; padding-right: 126px; }
[data-skin="f"] .wc-val b { font: 700 28px/1.1 var(--font-num); }
[data-skin="f"] .wc-val em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text2); }
[data-skin="f"] .wc-val span { flex-basis: 100%; font-size: 12px; color: var(--text2); }
[data-skin="f"] .wc-spark { position: absolute; right: 14px; bottom: 14px; width: 112px; color: var(--weight); }
[data-skin="f"] .wc-spark svg { display: block; overflow: visible; }
[data-skin="f"] .wc-spark path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-skin="f"] .wc-spark circle { fill: currentColor; }
[data-skin="f"] .seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); }
[data-skin="f"] .span-card { background: var(--card); color: var(--text); }
[data-skin="f"] .icon-btn.tool { color: var(--accent); }
@media (prefers-color-scheme: dark) { [data-skin="f"] .seg button.on { background: #636366; } }

/* ═════════════ G 手記 ═════════════ */
:root[data-skin="g"] {
  color-scheme: dark;
  --bg: #17161C; --card: #26252E; --solid: #2B2A34; --fill: #33323E; --fill-2: #403F4D;
  --text: #FFFFFF; --text2: #B6B5C2; --outline: #5A596E; --sep: rgba(255, 255, 255, 0.12);
  --accent: #B9A8FF; --on-accent: #1B1530; --accent-soft: #3A3360; --on-accent-soft: #DDD5FF;
  --danger: #FF7B72; --danger-soft: #4A1F1C; --warn-bg: #47351A; --warn-text: #FFD592; --ok-bg: #1D4630; --ok-text: #B6F0C5;
  --bar: rgba(30, 29, 37, 0.94); --hero: #26252E; --hero-text: #FFFFFF;
  --r-card: 20px; --r-list: 16px; --r-btn: 14px; --r-seg: 9px; --r-thumb: 10px; --r-stage: 16px; --r-input: 12px; --r-sheet: 16px; --r-notice: 14px;
}
[data-skin="g"] .proj-top { display: block; padding: 6px 6px 0; }
[data-skin="g"] .proj-thumb, [data-skin="g"] .proj .chev { display: none; }
[data-skin="g"] .proj-collage { display: grid; gap: 3px; border-radius: 15px; overflow: hidden; height: 150px; }
[data-skin="g"] .proj-collage[data-n="3"] { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
[data-skin="g"] .proj-collage[data-n="3"] > :first-child { grid-row: span 2; }
[data-skin="g"] .proj-collage[data-n="2"] { grid-template-columns: 1fr 1fr; height: 112px; }
[data-skin="g"] .proj-collage > div { min-height: 0; background: var(--fill); }
[data-skin="g"] .proj-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-skin="g"] .proj-info { padding: 10px 8px 0; }
[data-skin="g"] .proj-name { font-size: 17px; }
[data-skin="g"] .proj-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: var(--text2); margin-top: 2px; line-height: 1.4; }
[data-skin="g"] .proj-sum { font-size: 12px; color: #9B9AA8; margin-top: 6px; }
[data-skin="g"] .proj-latest { font-size: 12px; color: #9B9AA8; margin-top: 0; }
[data-skin="g"] .proj-actions { padding: 10px 12px 12px; }
[data-skin="g"] .proj-actions .btn { min-height: 42px; }
[data-skin="g"] .proj-actions .icon-btn { width: 42px; height: 42px; border-radius: 14px; }
[data-skin="g"] .proj-score { margin: 0 14px; padding: 9px 0 11px; border-top-width: 0.5px; }
[data-skin="g"] .seg button.on { background: #55546A; color: #fff; box-shadow: none; }
/* 回顧卡：整個皮膚唯一用到漸層的地方 */
[data-skin="g"] .span-card { background: linear-gradient(135deg, #3A2F80, #7B3D8C); color: #fff; border-radius: 20px; }
[data-skin="g"] .icon-btn.tool { color: var(--accent); }

/* ═════════════ 時光滑桿在各皮膚的細節 ═════════════ */
[data-skin="b"] .scrub-thumb { background: #101114; border-color: #FFC935; }
[data-skin="b"] .scrub-fill, [data-skin="b"] .scrub-tick.on { background: #101114; }
[data-skin="b"] .scrub { --tag-dot: #FF6A4D; }
[data-skin="b"] .scrub-day { font-weight: 800; }
[data-skin="c"] .scrub-head h2, [data-skin="c"] .scrub-pick b { font-family: var(--font-display); }
[data-skin="c"] .scrub-stage { box-shadow: 0 0 0 7px #FDFDFB, 0 10px 20px -2px rgba(23, 51, 46, 0.35); margin: 12px auto 16px; max-width: calc(46vh * 0.75 - 14px); width: calc(100% - 14px); }
[data-skin="c"] .scrub-date { background: rgba(0, 0, 0, 0.6); border-radius: 2px; padding: 3px 8px; font: 900 15px "Doto", "Courier New", monospace; color: #FFA54D; text-shadow: 0 0 4px rgba(255, 110, 10, 0.85); }
[data-skin="c"] .scrub-day { background: #FDFDFB; color: #17332E; border-radius: 3px; }
[data-skin="c"] .scrub { --tag-dot: #FF7A1A; }
[data-skin="c"] .scrub-thumb { border-color: #FDFDFB; }
[data-skin="d"] .scrub-day { background: #FFB56B; color: #0D1030; font-size: 12px; }
[data-skin="d"] .scrub { --tag-dot: #7BE0B5; }
[data-skin="e"] .scrub-date, [data-skin="e"] .scrub-day { background: rgba(255, 255, 255, 0.55); color: #0B0B0F; -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); box-shadow: var(--card-shadow); }
[data-skin="e"] .scrub-thumb { border-color: #fff; box-shadow: 0 2px 10px rgba(0, 122, 255, 0.45); }
[data-skin="g"] .scrub { --tag-dot: #FF9FD0; }

/* ═════════════ 首頁功能方塊在各皮膚的樣子 ═════════════ */
/* 色塊：項目和功能方塊排成同一面兩欄的拼貼牆，每塊一個純色 */
[data-skin="b"] .proj-list > .proj { grid-column: auto; }
[data-skin="b"] .quick.wide-q { grid-column: auto; }
[data-skin="b"] .quick.wide-all { grid-column: span 2; }
[data-skin="b"] .quick { border-radius: 28px; min-height: 150px; padding: 14px 16px; }
[data-skin="b"] .q-vis { left: 16px; right: auto; top: 14px; }
[data-skin="b"] .q-vis i { width: 36px; height: 48px; border-radius: 11px; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.9); background: rgba(16, 17, 20, 0.14); }
[data-skin="b"] .q-vis.v-film i { width: 34px; height: 46px; border-radius: 6px; }
[data-skin="b"] .q-chips i { background: #101114; color: #fff; font-weight: 700; }
[data-skin="b"] .quick .q-ico { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; margin: 0; background: rgba(16, 17, 20, 0.12); color: inherit; }
[data-skin="b"] .quick b { margin-top: auto; padding-top: 62px; font-size: 18px; font-weight: 900; }
[data-skin="b"] .q-new b, [data-skin="b"] .q-pending b { padding-top: 0; }
[data-skin="b"] .quick.q-new, [data-skin="b"] .quick.q-pending { min-height: 112px; }
[data-skin="b"] .quick .q-desc { color: inherit; opacity: 0.82; font-weight: 500; }
[data-skin="b"] .q-scrub { background: #C7B8FF; color: #101114; }
[data-skin="b"] .q-compare { background: #101114; color: #FFFFFF; }
[data-skin="b"] .q-compare .q-ico, [data-skin="b"] .q-export .q-ico { background: rgba(255, 255, 255, 0.18); }
[data-skin="b"] .q-export { background: #3D7BFF; color: #FFFFFF; }
[data-skin="b"] .q-new { background: #FFFFFF; color: #101114; }
[data-skin="b"] .q-new .q-ico { background: #101114; color: #FFFFFF; }
[data-skin="b"] .q-pending .q-ico { background: rgba(255, 255, 255, 0.22); }
[data-skin="b"] .demo-note { background: #FFFFFF; border-radius: 22px; }
[data-skin="c"] .quick b { font-size: 19px; }
[data-skin="c"] .quick .q-ico { border-radius: 4px; background: #F1E2A0; transform: rotate(-4deg); }
[data-skin="d"] .q-scrub .q-ico { background: #FFB56B; color: #0D1030; }
[data-skin="d"] .q-compare .q-ico { background: #79C7FF; color: #0D1030; }
[data-skin="d"] .q-export .q-ico { background: #7BE0B5; color: #0D1030; }
[data-skin="d"] .q-new .q-ico { background: #FF8DB0; color: #0D1030; }
[data-skin="e"] .quick .q-ico { background: rgba(255, 255, 255, 0.7); color: #007AFF; box-shadow: var(--card-shadow); }
:is([data-skin="f"], [data-skin="g"]) .quick { min-height: 104px; }
:is([data-skin="f"], [data-skin="g"]) .quick b { font-family: var(--font); font-weight: 600; }
[data-skin="f"] .q-scrub .q-ico { background: #FF2D55; color: #fff; }
[data-skin="f"] .q-compare .q-ico { background: #5856D6; color: #fff; }
[data-skin="f"] .q-export .q-ico { background: #FF9500; color: #fff; }
[data-skin="f"] .q-new .q-ico { background: #007AFF; color: #fff; }
:is([data-skin="f"], [data-skin="g"]) .quick .q-ico { border-radius: 10px; }