/* 白色霓虹（試做，v3.35.0）：設計稿在畫布第八、九輪。<html data-look="neon"> 由 js/theme.js 設定，「更多 → 外觀 → 新外觀試做」切換。
   規則：細字（標題 300、內文 400）、色階分層不用框線、數字當主角（極細大數字＋小單位）、一張卡只講一件事、
   顏色只當氛圍——一個畫面最多一張卡片右下角有很淡的彩色光暈；按鈕一律膠囊、圖示按鈕一律圓形；警示只用亮紅。
   字：英文數字 Outfit、中文思源黑體（js/theme.js 只在選了這個外觀時才載）。 */

:root[data-look="neon"] {
  --bg: #F7F7F5; --dot: transparent; --card: #FFFFFF; --field: #F1F1EE; --well: #E9E9E6;
  --line: rgba(0, 0, 0, .06); --paper-line: rgba(0, 0, 0, .06);
  --ink: #161616; --ink-line: rgba(0, 0, 0, .06); --ink-soft: rgba(0, 0, 0, .16); --ink-shadow: rgba(0, 0, 0, .04); --edge: transparent;
  --text: #161616; --sub: #7A7975; --faint: #A3A29E;
  --accent: #161616; --accent-deep: #000000; --accent-text: #161616; --accent-soft: #F1F1EE; --on-accent: #FFFFFF;
  --chip-on: #161616; --chip-on-line: #161616; --chip-on-text: #FFFFFF;
  --state: #161616; --on-state: #FFFFFF;
  --today-bg: #161616; --today: #FFFFFF;
  --danger: #FF3B30; --danger-soft: rgba(255, 59, 48, .08);
  --late: #FF3B30; --late-bg: rgba(255, 59, 48, .08);
  --warn: #161616; --warn-bg: #F1F1EE;
  --info: #161616; --info-bg: #F1F1EE;
  --ok: #161616; --ok-bg: #F1F1EE;
  --heart: #161616;
  --butter: #F1F1EE; --peach: #F1F1EE; --mint: #F1F1EE; --pink: #F1F1EE; --lilac: #F1F1EE; --sky: #F1F1EE;
  --bar-bg: #F7F7F5;
  --cal-red: #161616;
  --on-dark: #FFFFFF; --scrim: rgba(22, 22, 22, .5); --overlay: rgba(20, 20, 20, .28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px -16px rgba(0, 0, 0, .08);
  --shadow-float: 0 10px 30px -10px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-up: 0 -8px 30px -12px rgba(0, 0, 0, .1);
  --shadow-accent: none; --shadow-fab: 0 10px 24px -10px rgba(0, 0, 0, .35);
  --r-card: 24px; --r-ctl: 16px; --r-sm: 12px; --r-sheet: 32px;
  --cute: "Outfit", "Noto Sans TC", -apple-system, "PingFang TC", sans-serif;
  --round: var(--cute);
  /* 光暈：重點卡右下角很淡的粉、蜜桃、淡藍；霓虹細線：進度條目前那段 */
  --wash: radial-gradient(42% 55% at 100% 104%, rgba(255, 140, 200, .26), rgba(255, 140, 200, 0) 70%), radial-gradient(36% 46% at 80% 112%, rgba(255, 196, 130, .24), rgba(255, 196, 130, 0) 70%), radial-gradient(38% 50% at 106% 70%, rgba(150, 175, 255, .24), rgba(150, 175, 255, 0) 70%);
  --neon: linear-gradient(90deg, #FF8FC7, #FFB46B 35%, #B48CFF 70%, #7FA8FF);
  --neon-glow: 0 0 6px rgba(255, 120, 190, .35);
  --red-glow: 0 0 6px rgba(255, 59, 48, .45);
  --num: "Outfit", -apple-system, sans-serif;
  /* 這個外觀多的字級、字重、字距 token（只在白色霓虹用） */
  --fs-10: 10px; --fs-17: 17px; --fs-24: 24px; --fs-28: 28px; --fs-52: 52px; --fs-30: 30px; --fs-64: 64px;
  --fw-thin: 200; --fw-light: 300; --fw-medium: 500;
  --lh-num: .85; --ls-tight: -.02em; --ls-num: -.04em; --ls-label: .08em;
  color-scheme: light;
  scrollbar-color: rgba(0, 0, 0, .18) transparent; /* 固定色：白底上的淡捲軸 */
}

:root[data-look="neon"] body { background: var(--bg); font-family: var(--cute); font-weight: 400; }
:root[data-look="neon"] :is(b, strong) { font-weight: var(--fw-medium); }

/* ==== 共用元件 ==== */
:root[data-look="neon"] {
  /* 卡片：白、圓角 24、很淡的陰影，不描邊 */
  & .card { background: var(--card); box-shadow: var(--shadow-card); border: 0; }
  & .section-title { font-size: var(--fs-13); font-weight: 400; color: var(--sub); background: none; }
  & .section-title::before { display: none; }

  /* 按鈕：一律膠囊；主按鈕黑底白字、次按鈕淺灰；刪除亮紅 */
  & .btn { border-radius: var(--r-pill); border: 0; box-shadow: none; font-weight: var(--fw-medium); }
  & .btn:not(.primary):not(.danger) { background: var(--field); color: var(--text); }
  & .btn.primary { background: var(--accent); color: var(--on-accent); }
  & .btn.danger { background: var(--danger); color: #FFFFFF; } /* 固定色：亮紅底上的白字 */
  & .mini-btn { border: 0; background: var(--field); color: var(--text); border-radius: var(--r-pill); }
  & .mini-btn.primary { background: var(--accent); color: var(--on-accent); }
  & .chip { border: 0; background: var(--field); color: var(--text); border-radius: var(--r-pill); box-shadow: none; }
  & .chip.on { background: var(--chip-on); color: var(--chip-on-text); }

  /* 頁首按鈕：返回、⋯ 都是圓形 */
  & .page-bar { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 0; }
  & .bar-btn.back { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--field); font-size: 0; display: grid; place-items: center; }
  & .bar-btn.back .ico { width: 18px; height: 18px; }
  & .page-title { font-weight: 400; color: var(--sub); }

  /* 打勾：細線圓圈，完成是黑色實心 */
  & .check { border: 1.5px solid var(--faint); background: transparent; }
  & .check.on { background: var(--text); border-color: var(--text); color: var(--on-state); }

  /* 標題分頁列：大細字，沒有底線 */
  & .tt-bar { background: var(--bg); border-bottom: 0; box-shadow: 0 0 0 100vmax var(--bg); }
  & .tt-tab { font-family: var(--cute); font-size: var(--fs-15); font-weight: 400; color: var(--faint); }
  & .tt-tab.on { font-size: var(--fs-36); font-weight: var(--fw-light); color: var(--text); letter-spacing: var(--ls-tight); }
  & .tt-tab.on::after { display: none; }

  /* 本月統計：標籤在上、極細大數字、小單位 */
  & .tt-bar .title-tabs { flex-wrap: wrap; row-gap: var(--sp-5); }
  & .tt-bar .tt-meta { flex-basis: 100%; padding: 0; }
  & .dash-stats { column-gap: var(--sp-5); align-items: flex-end; }
  & .dash-dot { display: none; }
  & .dash-stat { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; text-align: left; color: var(--sub); }
  & .ds-l { grid-column: 1 / -1; margin: 0 0 var(--sp-1); font-size: var(--fs-12); }
  & .dash-stat b { font-family: var(--num); font-size: var(--fs-30); font-weight: var(--fw-light); color: var(--text); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
  & .ds-u { margin-left: 3px; font-size: var(--fs-13); }

  /* 右下角＋：黑色圓形；分頁列：毛玻璃膠囊 */
  & #view .fab { display: none; } /* 新架構用共用的 ＋（#gfab） */
  & .fab, & .gfab { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-fab); width: 56px; height: 56px; right: 20px; bottom: calc(var(--tabbar) + var(--safe-bottom) + 26px); }
  & .fab .ico svg, & .gfab .ico svg { stroke-width: 1.6; }
  & .toast { background: var(--text); color: var(--on-accent); border: 0; }
}
:root[data-look="neon"] #tabs { /* v3.36.0 滿版貼底；＋ 獨立浮在導覽列正上方右側 */
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar) + var(--safe-bottom) + 10px); padding: var(--sp-3) var(--sp-3) var(--safe-bottom); align-items: flex-start;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: rgba(255, 255, 255, .88); /* 固定色：白色毛玻璃 */
  box-shadow: none;
  & .tab { color: var(--faint); font-size: var(--fs-11); gap: var(--sp-1); }
  & .tab.on { color: var(--text); font-weight: var(--fw-medium); }
  & .tab .ico { width: 24px; height: 24px; padding: 0; background: none; }
  & .tab .ico svg { stroke-width: 1.5; }
}
:root[data-look="neon"] #tabs:empty { display: none; }
:root[data-look="neon"] #view::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  height: calc(var(--safe-bottom) + 150px);
  background: linear-gradient(to bottom, rgba(247, 247, 245, 0), var(--bg) 60%); /* 固定色：底色的透明版 */
}

/* ==== 行程卡片 ==== */
:root[data-look="neon"] {
  & .hd-wx, & .cc-card .cc-sub, & .cc-when, & .role-mark { display: none; }
  & .cc-kicker { display: block; font-family: var(--num); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--sub); }

  /* 第一張（下一場）：大卡＋光暈＋右下角大數字 */
  & .cat-perch { margin-top: 0; }
  & .cat-perch .cc-card { position: relative; min-height: 228px; padding: 22px; display: flex; flex-direction: column; background-image: var(--wash); }
  & .cat-perch .walk-cal { display: none; }
  & .cat-perch .walk-head { margin-top: 10px; gap: 0; padding: 0; }
  & .cat-perch .walk-hmain { padding: 0; }
  & .cat-perch .walk-title { font-size: var(--fs-24); font-weight: 400; }
  & .cat-perch .cc-meta { font-size: var(--fs-13); color: var(--sub); margin-top: var(--sp-2); }
  & .cat-perch .cc-band { margin: auto 0 0; padding: 0; border: 0; background: none; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-right: 96px; }
  & .cat-perch .cc-big { display: block; position: absolute; right: 22px; bottom: 18px; font-family: var(--num); font-size: var(--fs-64); font-weight: var(--fw-thin); line-height: var(--lh-num); letter-spacing: var(--ls-num); color: var(--text); }
  & .cc-big small { font-size: var(--fs-13); font-weight: 400; letter-spacing: normal; color: var(--sub); margin-left: var(--sp-2); }

  /* 其他場：不包卡片，細線分隔的列表 */
  & .walk-list > .cc-card, & .walk-list > .card + .card { background: none; box-shadow: none; border-radius: 0; padding: 16px 0; margin: 0; border-bottom: 1px solid var(--line); }
  & .walk-list > .cc-card:last-child { border-bottom: 0; }
  & .walk-list > .cc-card .cc-kicker { display: none; }
  & .walk-list > .cc-card .walk-head { padding: 0; }
  & .walk-list > .cc-card .walk-cal { width: 40px; border: 0; background: none; border-radius: 0; }
  & .walk-list > .cc-card .walk-cal-m { display: none; }
  & .walk-list > .cc-card .walk-cal b { font-family: var(--num); font-size: var(--fs-24); font-weight: var(--fw-light); padding: 0; line-height: 1; }
  & .walk-list > .cc-card .walk-cal-w { font-size: var(--fs-10); color: var(--sub); }
  & .walk-list > .cc-card .walk-title { font-size: var(--fs-16); font-weight: 400; }
  & .walk-list > .cc-card .cc-meta { font-size: var(--fs-12); color: var(--sub); }
  & .walk-list > .cc-card .cc-band { margin: var(--sp-3) 0 0 52px; padding: 0; border: 0; background: none; min-height: 0; }

  /* 下一步那一行：不打勾，一個小點＋步驟・剩幾天；右邊文字連結 */
  & .cc-band .check { display: none; }
  & .cc-band.late .cc-line::before, & .cc-band.warn .cc-line::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--late); box-shadow: var(--red-glow); margin-right: var(--sp-3); flex: none; align-self: center; }
  & .cc-band { gap: var(--sp-3); }
  & .cc-say { padding: 0; }
  & .cc-line { display: flex; align-items: baseline; gap: 0; font-size: var(--fs-13); }
  & .cc-line b { font-size: inherit; font-weight: 400; color: var(--text); }
  & .cc-due, & .cc-band.warn .cc-due, & .cc-band.late .cc-due { font-family: var(--cute); font-size: var(--fs-13); font-weight: 400; color: var(--text); }
  & .cc-due::before { content: "・"; }
  & .cc-band.warn .cc-say b, & .cc-band.late .cc-say b { color: var(--text); }
  & .cc-go, & .cc-band.warn .cc-go, & .cc-band.late .cc-go { font-family: var(--cute); font-size: var(--fs-13); font-weight: 400; color: var(--sub); padding: 0; }
  & .cc-go .ico { width: 14px; height: 14px; }
  & .cat-perch .cc-go { align-self: flex-start; }
}

/* ==== 合作頁 ==== */
:root[data-look="neon"] {
  & .page-action .bar-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--field); display: grid; place-items: center; }
  /* 頂部：不包卡片，大細字標題 */
  & .hd-card { background: none; box-shadow: none; border: 0; padding: 0; }
  & .hd-tt b { font-family: var(--cute); font-size: var(--fs-36); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
  & .hd-tt .when-pill { background: none; padding: 0; font-size: var(--fs-13); font-weight: 400; color: var(--sub); }
  & .hd-meta { font-size: var(--fs-14); color: var(--sub); }
  & :is(.hd-ibtn, .fold-btn) { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--field); color: var(--text); }
  /* 進度：六段細線，目前那段是霓虹漸層，做完的是黑色 */
  & .hd-steps { display: flex; gap: var(--sp-2); height: auto; margin-top: 28px; padding: 0; }
  & .hd-steps :is(.hd-track, .hd-fill) { display: none; }
  & .hd-steps span { position: static; flex: 1; transform: none; padding-top: 10px; border-top: 3px solid var(--well); border-radius: 2px; font-size: var(--fs-11); font-weight: 400; color: var(--faint); text-align: left; white-space: nowrap; }
  & .hd-steps span::before, & .hd-steps span::after { display: none; }
  & .hd-steps span.done { border-top-color: var(--text); color: var(--sub); }
  & .hd-steps span.now { border-image: var(--neon) 1; border-top-width: 3px; color: var(--text); font-weight: var(--fw-medium); }

  /* 區塊標題 */
  & .cd-h { font-size: var(--fs-13); font-weight: 400; color: var(--sub); }

  /* 現在要做：光暈大卡；右上大數字；完成按鈕放到最下面變成整排黑色膠囊 */
  & .card.cd-now { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: var(--sp-4); padding: 20px; background-image: var(--wash); }
  & .cd-now > * { grid-column: 1 / -1; }
  & .nw-head { display: contents; }
  & .nw-art { display: none; }
  & .nw-main { grid-column: 1; }
  & .nw-title b { font-size: var(--fs-22); font-weight: 400; }
  & .nw-sub { font-size: var(--fs-13); color: var(--sub); }
  & .nw-due, & .nw-sub-due { color: var(--text); font-weight: 400; background: none; }
  & .nw-head.late .nw-due::before, & .nw-head.late .nw-sub-due::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--sp-2) 0 var(--sp-3); border-radius: 50%; background: var(--late); box-shadow: var(--red-glow); vertical-align: middle; }
  & .nw-big { display: block; grid-column: 2; grid-row: 1; font-family: var(--num); font-size: var(--fs-52); font-weight: var(--fw-thin); line-height: var(--lh-num); letter-spacing: var(--ls-num); color: var(--text); }
  & .nw-big small { font-size: var(--fs-12); font-weight: 400; letter-spacing: normal; color: var(--sub); margin-left: 3px; }
  & .nw-done { grid-column: 1 / -1; order: 9; justify-self: stretch; max-width: none; margin-top: var(--sp-5); height: 52px; width: 100%; border-radius: var(--r-pill); border: 0; background: var(--accent); color: var(--on-accent); flex-direction: row; justify-content: center; gap: var(--sp-3); font-size: var(--fs-15); font-weight: var(--fw-medium); }
  & .nw-done .ico { width: 18px; height: 18px; border: 0; background: none; color: inherit; box-shadow: none; }
  & .nw-cta { justify-self: stretch; width: 100%; max-width: none; margin: var(--sp-5) 0 0; height: 52px; border-radius: var(--r-pill); border: 0; background: var(--accent); color: var(--on-accent); box-shadow: none; }
  & .nw-tool { margin: var(--sp-5) 0 0; padding: 0; border: 0; background: none; }
  & .nw-tool :is(.prep-area, .prep-section, .fit-in) { margin: 0; padding-left: 0; padding-right: 0; border: 0; background: none; box-shadow: none; }

  /* 實穿照、清單 */
  & .prep-board { background: none; border: 0; padding: 0; }
  & .fit-shot { border-radius: var(--r-ctl); border: 0; }
  & .fit-shot.add { background: var(--field); border: 0; }
  & .fit-send { border: 0; background: var(--field); color: var(--text); border-radius: var(--r-pill); }
  & .prep-row, & .prep-add-row { border-top: 1px solid var(--line); border-bottom: 0; }
  & .prep-thumb { border-radius: var(--r-sm); border: 0; }
  & .prep-thumb.add { background: var(--field); border: 0; }
  & .prep-price { font-family: var(--num); font-weight: var(--fw-light); color: var(--text); }
  & .prep-row.done :is(.prep-thumb, .prep-text, .prep-price) { opacity: .45; text-decoration: none; }
  & .nw-tick { border: 1.5px solid var(--faint); background: transparent; }
  & .nw-tick.on { background: var(--text); border-color: var(--text); color: var(--on-state); }

  /* 收支：極細大數字 */
  & .mc-cells b { font-family: var(--num); font-size: var(--fs-24); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
  & .mc-cells small { color: var(--sub); }
}

/* ==== 其他頁的標題和大數字（第一階段先統一字，版面第二階段再換） ==== */
:root[data-look="neon"] {
  & :is(.tab-title, .pane-title) { font-family: var(--cute); font-size: var(--fs-36); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
  & .big-money { font-family: var(--num); font-size: var(--fs-52); font-weight: var(--fw-thin); letter-spacing: var(--ls-num); color: var(--text); }
  & .profile-name { font-family: var(--cute); font-weight: var(--fw-light); font-size: var(--fs-30); }
}

/* ==== 新架構（v3.36.0）：今天、我、共用 ＋ ==== */
.gfab { display: none; }
:root[data-look="neon"] .gfab { position: fixed; z-index: 11; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; }
:root[data-look="neon"] .gfab .ico { width: 24px; height: 24px; }
:root[data-look="neon"] .gfab[hidden] { display: none; }
:root[data-look="neon"] body.page-open .gfab { display: none; }
:root[data-look="neon"] {
  & .td-head { display: flex; flex-direction: column; gap: var(--sp-2); padding: calc(var(--safe-top) + 18px) 0 var(--sp-5); }
  & .td-kicker { font-family: var(--num); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--sub); }
  & .td-title { margin: 0; font-size: var(--fs-28); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
  & .td-hero { position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 22px; margin-bottom: var(--sp-5); background-image: var(--wash); cursor: pointer; }
  & .td-hero .td-k { display: block; }
  & .td-hero-title { margin-top: var(--sp-4); font-size: var(--fs-28); font-weight: var(--fw-light); }
  & .td-hero-meta { margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--sub); }
  & .td-hero-foot { margin-top: auto; padding-top: var(--sp-5); display: flex; justify-content: space-between; align-items: flex-end; }
  & .td-hero .cc-big { display: block; position: static; font-family: var(--num); font-size: var(--fs-52); font-weight: var(--fw-thin); line-height: var(--lh-num); letter-spacing: var(--ls-num); }
  & .td-prep { display: flex; flex-direction: column; gap: var(--sp-3); }
  & .td-prep small { font-size: var(--fs-12); color: var(--sub); }
  & .td-bar { display: flex; gap: var(--sp-1); width: 150px; }
  & .td-bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--well); }
  & .td-bar i.on { background: var(--text); }
  & .td-sec { display: flex; justify-content: space-between; align-items: baseline; }
  & .td-n { font-family: var(--num); font-size: var(--fs-11); color: var(--sub); }
  & .td-row { display: flex; align-items: center; gap: var(--sp-4); padding: 14px 0; border-bottom: 1px solid var(--line); }
  & .td-row:last-child { border-bottom: 0; }
  & .td-row .check { flex: none; }
  & .td-wait { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px dashed var(--faint); }
  & .td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); padding: 0; border: 0; background: none; text-align: left; }
  & .td-main b { font-size: var(--fs-15); font-weight: 400; }
  & .td-main small { font-size: var(--fs-12); color: var(--sub); }
  & .td-main small.urgent::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--sp-3); border-radius: 50%; background: var(--late); box-shadow: var(--red-glow); vertical-align: middle; }
  & .td-go { flex: none; padding: var(--sp-4) 0 var(--sp-4) var(--sp-4); border: 0; background: none; font-size: var(--fs-13); color: var(--sub); white-space: nowrap; }
  & .td-more { padding: var(--sp-3) 0; border: 0; background: none; font-size: var(--fs-13); color: var(--sub); }
  & .td-stats { display: flex; column-gap: var(--sp-5); justify-content: flex-start; margin-bottom: var(--sp-5); }
  & .td-stat + .td-stat { margin-left: var(--sp-4); }
  & .td-stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0; border: 0; background: none; text-align: left; color: var(--text); }
  & .td-stat small { font-size: var(--fs-12); color: var(--sub); }
  & .td-stat b { font-family: var(--num); font-size: var(--fs-24); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); }
  & .td-stat b span { margin-left: 3px; font-size: var(--fs-12); font-weight: 400; color: var(--sub); }
  & .td-ideas { display: flex; gap: var(--sp-4); overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--sp-3); scrollbar-width: none; }
  & .td-idea { flex: none; width: 210px; display: flex; flex-direction: column; gap: var(--sp-3); cursor: pointer; }
  & .td-idea-pics { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 58px 58px; gap: var(--sp-2); }
  & .td-idea-pics img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
  & .td-idea-pics img:first-child { grid-row: span 2; border-radius: var(--r-ctl); }
  & .td-idea-blank { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--field); font-size: var(--fs-22); font-weight: var(--fw-light); color: var(--sub); }
  & .td-idea-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  & .td-idea-foot b { font-size: var(--fs-15); font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .td-idea-foot .td-go { padding: 0; font-size: var(--fs-12); }
  & .td-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: 40px 30px; }
  & .td-empty-art { width: 110px; height: 110px; }
  & .td-empty b { font-size: var(--fs-22); font-weight: var(--fw-light); }
  & .td-empty small { font-size: var(--fs-13); color: var(--sub); line-height: var(--lh-body); }

  /* 我 */
  & .me-head { padding: calc(var(--safe-top) + 10px) 0 var(--sp-5); }
  & .me-gear { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: var(--field); color: var(--text); }
  & .me-gear .ico { width: 20px; height: 20px; }
  & .me-id { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-3); }
  /* 頭像＝我的角色頭貼；兩個角色就兩張重疊（v3.46.0） */
  & .me-avatar { position: relative; width: 64px; height: 64px; flex: none; }
  & .me-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
  & .me-avatar.two { width: 92px; }
  & .me-avatar.two img { position: absolute; top: 0; width: 60px; height: 60px; box-shadow: 0 0 0 3px var(--bg); }
  & .me-avatar.two img:first-child { left: 0; z-index: 1; }
  & .me-avatar.two img:last-child { right: 0; }
  & .me-id b { display: block; font-size: var(--fs-28); font-weight: var(--fw-light); }
  & .me-id small { font-size: var(--fs-13); color: var(--sub); }
  & .me-list { padding: var(--sp-2) 18px; }
  & .me-row { display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--text); }
  & .me-row:last-child { border-bottom: 0; }
  & .me-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--field); }
  & .me-ico .ico { width: 18px; height: 18px; }
  & .me-text { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
  & .me-text b { font-size: var(--fs-15); font-weight: 400; }
  & .me-text small { font-size: var(--fs-12); color: var(--sub); }
  & .me-row .chev { color: var(--faint); }
  /* 放進子頁面裡的分頁（夥伴、設定）：標題列不用吸頂、不用往上塗 */
  & .in-page .tt-bar { position: static; margin: 0 0 var(--sp-5); padding: 0; box-shadow: none; clip-path: none; }
  & .in-page .fab { display: grid; position: fixed; bottom: calc(var(--safe-bottom) + 26px); }
}

/* ==== 新架構第二版（v3.37.0）：行程日期條、月曆、合作頁時間軸、拍攝日 ==== */
:root[data-look="neon"] {
  /* 行程：右上月曆按鈕、兩週日期條 */
  & .tt-bar .tt-meta:has(.wk-cal) { flex-basis: auto; margin-left: auto; }
  & .tt-bar .tt-meta .wk-cal { border: 0; color: var(--text); }
  & .wk-strip { display: flex; gap: var(--sp-3); overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) var(--sp-5); padding: var(--sp-1) var(--gutter) var(--sp-3); scrollbar-width: none; }
  & .wk-strip::-webkit-scrollbar { display: none; }
  & .wk-day { flex: none; width: 44px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); border: 0; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--shadow-card); color: var(--text); }
  & .wk-day small { font-family: var(--num); font-size: var(--fs-11); color: var(--sub); }
  & .wk-day b { font-family: var(--num); font-size: var(--fs-18); font-weight: var(--fw-light); }
  & .wk-day i { width: 4px; height: 4px; border-radius: 50%; }
  & .wk-day.has i { background: var(--text); }
  & .wk-day.today { background: var(--accent); color: var(--on-accent); }
  & .wk-day.today small { color: var(--on-accent); opacity: .6; }
  & .wk-day.today.has i { background: var(--on-accent); }

  /* 月曆 */
  & .mo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
  & .mo-head b { font-family: var(--num); font-size: var(--fs-15); font-weight: 400; }
  & .mo-head .me-ico { border: 0; color: var(--text); }
  & .mo-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--sp-1); padding: var(--sp-4) var(--sp-2); margin-bottom: var(--sp-5); text-align: center; }
  & .mo-w { padding-bottom: var(--sp-3); font-size: var(--fs-11); color: var(--faint); }
  & .mo-d { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); padding: 0; border: 0; background: none; color: var(--text); }
  & .mo-d b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-family: var(--num); font-size: var(--fs-15); font-weight: var(--fw-light); }
  & .mo-d i { width: 4px; height: 4px; border-radius: 50%; }
  & .mo-d.has i { background: var(--text); }
  & .mo-d.today b { box-shadow: inset 0 0 0 1px var(--text); }
  & .mo-d.on b { background: var(--accent); color: var(--on-accent); }
  & .mo-none { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 0; color: var(--sub); }

  /* 合作頁：封面滿版、標題壓在照片下緣 */
  & .cd-photo { position: relative; height: 300px; margin: calc(-1 * (var(--safe-top) + 72px)) calc(-1 * var(--gutter)) 0; }
  & .cd-photo img { width: 100%; height: 100%; object-fit: cover; }
  & .cd-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 30%, rgba(247, 247, 245, 0) 50%, var(--bg)); } /* 固定色：照片上方的暗角 */
  & .has-photo .hd-sec { margin-top: -40px; position: relative; }
  & .has-photo .page-bar { background: none; }
  & .has-photo .page-bar .bar-btn { background: rgba(255, 255, 255, .8); } /* 固定色：照片上的白色圓鈕 */
  & .hd-steps, & .hd-step-r { display: none; }

  /* 時間軸 */
  & .tl { padding-top: var(--sp-3); }
  & .tl-row { display: flex; gap: var(--sp-5); position: relative; }
  & .tl-row::before { content: ""; position: absolute; left: 6.5px; top: 22px; bottom: 0; width: 1px; background: var(--line); }
  & .tl-row:last-child::before { display: none; }
  & .tl-dot { flex: none; width: 14px; height: 22px; display: grid; place-items: center; }
  & .tl-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
  & .tl-row.done .tl-dot::after { background: var(--text); box-shadow: none; }
  & .tl-row.now .tl-dot::after { width: 14px; height: 14px; background: var(--text); box-shadow: 0 0 0 4px var(--well); }
  & .tl-main { flex: 1; min-width: 0; padding-bottom: 22px; }
  & .tl-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); min-height: 22px; }
  & .tl-line b { font-size: var(--fs-15); font-weight: 400; }
  & .tl-line small { flex: none; font-size: var(--fs-12); color: var(--sub); }
  & .tl-row.now .tl-line b { font-size: var(--fs-17); font-weight: var(--fw-medium); }
  & .tl-row.next .tl-line b { color: var(--sub); }
  & .tl-row.late .tl-line small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--sp-3); border-radius: 50%; background: var(--late); box-shadow: var(--red-glow); vertical-align: middle; }
  & .tl-main > .section { margin: var(--sp-4) 0 0; }
  & .tl-main > .section > .cd-h { display: none; }
  & .tl-main .nw-title { display: none; } /* 步驟名稱已經在時間軸上 */

  /* 拍攝日 */
  & .td-hero.sd { min-height: 0; cursor: default; }
  & .sd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
  & .sd-who { display: flex; flex-direction: column; cursor: pointer; }
  & .sd-who .td-hero-title { margin-top: var(--sp-3); }
  & .sd-count { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
  & .sd-count small { font-size: var(--fs-12); color: var(--sub); }
  & .sd-count small.live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--sp-2); border-radius: 50%; background: var(--late); vertical-align: middle; }
  & .sd-count b { font-family: var(--num); font-size: var(--fs-52); font-weight: var(--fw-thin); line-height: var(--lh-num); letter-spacing: var(--ls-num); white-space: nowrap; }
  & .sd-count b.sm { font-size: var(--fs-24); font-weight: var(--fw-light); letter-spacing: normal; }
  & .sd-count b i { margin: 0 var(--sp-2); font-style: normal; font-size: var(--fs-13); font-weight: 400; letter-spacing: normal; color: var(--sub); }
  & .sd-row { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--line); }
  & .sd-row + .sd-row { border-top: 0; margin-top: 0; }
  & .sd-row[hidden] { display: none; }
  & .sd-text { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-15); }
  & .sd-text small { font-size: var(--fs-12); color: var(--sub); }
  & .sd-btns { margin-top: var(--sp-5); }
  & .sd-two { display: flex; gap: var(--sp-3); }
  & .sd-two .btn { flex: 1; }
  & .sd-note { margin: 0 0 var(--sp-4); font-size: var(--fs-13); color: var(--sub); }
  & .sd-prep { display: flex; gap: var(--sp-3); overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  & .sd-item { position: relative; flex: none; width: 84px; height: 104px; border-radius: var(--r-ctl); overflow: hidden; background: var(--field); }
  & .sd-item img { width: 100%; height: 100%; object-fit: cover; }
  & .sd-item.on img, & .sd-item.on .sd-blank { opacity: .45; }
  & .sd-blank { width: 100%; height: 100%; display: grid; place-items: center; font-size: var(--fs-22); font-weight: var(--fw-light); color: var(--sub); }
  & .sd-item .check { position: absolute; right: 6px; bottom: 6px; }
}

/* ==== 新架構第三版（v3.38.0）：作品、衣櫃、子頁面、寫訊息、我 ==== */
:root[data-look="neon"] {
  /* 作品・拍好的：兩欄照片牆，標題放在照片下面；右欄往下錯開 */
  & .pf-sum { font-size: var(--fs-13); font-weight: 400; color: var(--sub); }
  & .pf-sum b, & .pf-sum span { font-weight: 400; }
  & .pf-grid { gap: var(--sp-5) var(--sp-4); align-items: start; }
  & .pf-tile { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
  & .pf-grid > .pf-tile:nth-child(2) { margin-top: 40px; }
  & .pf-tile > img { position: static; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-ctl); }
  & .pf-tile.empty { background: none; }
  & .pf-tile.empty .pf-letter { position: static; aspect-ratio: 3 / 4; border-radius: var(--r-ctl); background: var(--field); color: var(--sub); font-family: var(--cute); font-weight: var(--fw-light); }
  & .pf-cap, & .pf-tile.empty .pf-cap { position: static; padding: 0; background: none; color: var(--text); }
  & .pf-cap b { font-weight: 400; }
  & .pf-cap small { font-family: var(--num); color: var(--sub); opacity: 1; }
  & .pf-tile .done-count { top: 8px; right: 8px; }

  /* 作品・想拍的：一欄大卡，參考圖一大一小 */
  & .idea-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  & .idea-card { border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px; }
  & .idea-card:first-child { background-image: var(--wash); }
  & .idea-cover { aspect-ratio: 16 / 10; border-radius: var(--r-ctl); }
  & .idea-cover.empty { background: var(--field); color: var(--sub); font-family: var(--cute); font-weight: var(--fw-light); }
  & .idea-body { display: grid; grid-template-columns: 1fr auto; column-gap: var(--sp-4); padding: 14px 2px 2px; }
  & .idea-body > :not(.idea-act) { grid-column: 1; }
  & .idea-title { font-size: var(--fs-17); font-weight: 400; }
  & .idea-act { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }

  /* 衣櫃：價格用細數字、下面一行拍過幾次 */
  & .cl-meta b { font-weight: 400; }
  & .cl-meta small { font-family: var(--num); font-weight: 400; color: var(--sub); }
  & .cl-meta small.muted { color: var(--faint); }
  & .cl-wn { display: inline; margin-left: var(--sp-3); font-family: var(--cute) !important; color: var(--faint) !important; }
  & .cl-ph { border-radius: var(--r-ctl); box-shadow: none; }
  & .cl-detail { padding: 0; background: none; box-shadow: none; }
  & .cl-hero { border-radius: var(--r-card); }
  & .cl-name b { font-size: var(--fs-28); font-weight: var(--fw-light); }
  & .cl-name span { font-family: var(--num); font-size: var(--fs-24); font-weight: var(--fw-light); }
  & .cl-tags span { border: 0; background: var(--field); border-radius: var(--r-pill); }
  & .cl-stats { display: block; margin: var(--sp-5) 0; }
  & .cl-stat-row { display: flex; column-gap: var(--sp-5); }
  & .cl-stat-row .td-stat + .td-stat { margin-left: var(--sp-4); }
  & .cl-hint { display: flex; align-items: center; margin-top: var(--sp-4); padding: 14px 16px; border-radius: var(--r-ctl); background: var(--field); font-size: var(--fs-13); }
  & .cl-hint::before { content: ""; width: 6px; height: 6px; flex: none; margin-right: var(--sp-3); border-radius: 50%; background: var(--late); box-shadow: var(--red-glow); }

  /* 子頁面（夥伴、設定、花費）：列表用細線，不用框 */
  & .page-body .card.list { padding: var(--sp-1) 18px; }
  & .row { border-color: var(--line); }
  & .row-title .name { font-weight: 400; }
  & .avatar { box-shadow: none; }
  & .badge { border: 0; background: var(--field); color: var(--text); font-weight: 400; }

  /* 寫訊息：模板膠囊、按鈕一排 */
  & .tpl-textarea { border: 0; background: none; font-size: var(--fs-15); line-height: var(--lh-body); }
  & .composer-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

  /* 我：名字可以點 */
  & .me-id { width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--text); }
}

/* ==== 介紹（v3.41.0） ==== */
:root[data-look="neon"] {
  & .onboard { background: var(--bg); }
  & .onboard-panel { display: flex; flex-direction: column; min-height: 100%; padding-top: calc(var(--safe-top) + 12px); }
  & .intro-panel { justify-content: flex-start; }
  & .intro-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
  & .intro-dots i { width: 8px; height: 4px; border-radius: var(--r-pill); background: var(--well); }
  & .intro-dots i.on { width: 22px; background: var(--text); }
  & .intro-art { width: 160px; height: 160px; margin: 0 auto var(--sp-5); object-fit: contain; }
  & .ob-roles { display: flex; flex-direction: column; text-align: left; padding-top: var(--sp-5); }
  & .ob-roles .onboard-title, & .ob-roles .onboard-sub { text-align: left; }
  & .onboard-title { font-family: var(--cute); font-size: var(--fs-28); font-weight: var(--fw-light); line-height: var(--lh-snug); margin-bottom: var(--sp-4); }
  & .onboard-sub { font-size: var(--fs-15); }
  & .intro-btns { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: var(--sp-3); }
  & .onboard-role { border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
  & .onboard-role.picked { background-image: var(--wash); }
  & .onboard-role-main b { font-family: var(--cute); font-size: var(--fs-17); }
  & .btn.ghost:not(.primary) { background: none; color: var(--sub); }
}

/* ==== 介紹的介面縮圖（v3.42.0）：用 App 自己的樣子畫，卡片依序浮上來 ==== */
:root[data-look="neon"] .intro-panel { text-align: left; }
:root[data-look="neon"] .intro-panel .onboard-title, :root[data-look="neon"] .intro-panel .onboard-sub { text-align: left; }
:root[data-look="neon"] {
  & .ob-stage { position: relative; height: 380px; margin: 0 calc(-1 * var(--sp-2)) var(--sp-5); padding: 22px 18px 0; border-radius: var(--r-sheet); background: var(--well); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
  & .ob-mock { display: flex; flex-direction: column; gap: var(--sp-4); }
  & .ob-mock > *, & .ob-row, & .ob-thing, & .ob-step, & .ob-tile { animation: ob-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }
  & .ob-mock > :first-child { animation-delay: 0ms; }
  & .ob-card { padding: 16px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
  & .ob-card.hero { background-image: var(--wash); }
  & .ob-card.mini { flex-direction: row; align-items: center; gap: var(--sp-4); padding: 12px 14px; }
  & .ob-k { font-family: var(--num); font-size: var(--fs-10); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--sub); }
  & .ob-t { margin-top: var(--sp-3); font-size: var(--fs-22); font-weight: var(--fw-light); }
  & .ob-s { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--sub); }
  & .ob-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: var(--sp-5); }
  & .ob-bar { display: flex; gap: var(--sp-1); width: 110px; }
  & .ob-bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--well); }
  & .ob-bar i.on { background: var(--text); }
  & .ob-big { font-family: var(--num); font-size: var(--fs-52); font-weight: var(--fw-thin); line-height: var(--lh-num); letter-spacing: var(--ls-num); }
  & .ob-big small, & .ob-count b i { margin-left: var(--sp-1); font-size: var(--fs-12); font-weight: 400; font-style: normal; letter-spacing: normal; color: var(--sub); }
  & .ob-list { display: flex; flex-direction: column; padding: 0 var(--sp-2); }
  & .ob-row { display: flex; align-items: center; gap: var(--sp-4); padding: 11px 0; border-bottom: 1px solid var(--line); }
  & .ob-row:last-child { border-bottom: 0; }
  & .ob-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
  & .ob-main b { font-size: var(--fs-14); font-weight: 400; }
  & .ob-main small { font-size: var(--fs-11); color: var(--sub); }
  & .ob-main small.red::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: var(--sp-2); border-radius: 50%; background: var(--late); vertical-align: middle; }
  & .ob-chk { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); color: var(--on-state); }
  & .ob-chk.on { background: var(--text); box-shadow: none; }
  & .ob-chk .ico { width: 12px; height: 12px; }
  & .ob-row .ob-chk.on { animation: ob-pop .4s .9s both; }
  & .ob-top { display: flex; justify-content: space-between; align-items: flex-start; }
  & .ob-top > span:first-child { display: flex; flex-direction: column; }
  & .ob-count { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
  & .ob-count small { font-size: var(--fs-11); color: var(--sub); }
  & .ob-count b { font-family: var(--num); font-size: var(--fs-36); font-weight: var(--fw-thin); line-height: 1; letter-spacing: var(--ls-num); }
  & .ob-line { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
  & .ob-line b { flex: 1; font-size: var(--fs-14); font-weight: 400; }
  & .ob-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--field); }
  & .ob-ico .ico { width: 15px; height: 15px; }
  & .ob-pill { height: 26px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--field); font-size: var(--fs-11); }
  & .ob-pill.dark { background: var(--accent); color: var(--on-accent); }
  & .ob-btn { margin-top: var(--sp-4); height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-13); font-weight: var(--fw-medium); }
  & .ob-cap { padding: 0 var(--sp-2); font-size: var(--fs-12); color: var(--sub); }
  & .ob-things { display: flex; gap: var(--sp-3); }
  & .ob-thing { position: relative; width: 62px; height: 78px; display: grid; place-items: center; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--shadow-card); font-size: var(--fs-17); font-weight: var(--fw-light); color: var(--sub); }
  & .ob-thing.on { color: var(--faint); }
  & .ob-thing .ob-chk { position: absolute; right: 5px; bottom: 5px; width: 16px; height: 16px; }
  & .ob-tl { display: flex; flex-direction: column; padding: 4px var(--sp-2) 0; }
  & .ob-step { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; height: 40px; }
  & .ob-step::before { content: ""; position: absolute; left: 5.5px; top: 26px; height: 28px; width: 1px; background: var(--ink-soft); }
  & .ob-step:last-child::before { display: none; }
  & .ob-step i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); margin-left: 1px; }
  & .ob-step.done i { background: var(--text); box-shadow: none; }
  & .ob-step.now i { width: 12px; height: 12px; margin-left: 0; background: var(--text); box-shadow: 0 0 0 4px var(--card); }
  & .ob-step b { font-size: var(--fs-14); font-weight: 400; }
  & .ob-step.now b { font-weight: var(--fw-medium); font-size: var(--fs-15); }
  & .ob-step.next b { color: var(--sub); }
  & .ob-step small { font-size: var(--fs-11); color: var(--sub); }
  & .ob-ava { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--field); font-size: var(--fs-13); }
  & .ob-seg { align-self: flex-start; display: flex; padding: 3px; border-radius: var(--r-pill); background: var(--card); }
  & .ob-seg span { height: 28px; padding: 0 12px; display: grid; place-items: center; border-radius: var(--r-pill); font-size: var(--fs-12); color: var(--sub); }
  & .ob-seg span.on { background: var(--accent); color: var(--on-accent); }
  & .ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); align-items: start; }
  & .ob-tile { display: flex; flex-direction: column; gap: var(--sp-1); }
  & .ob-tile:nth-child(2) { margin-top: 28px; }
  & .ob-tile b { margin-top: var(--sp-2); font-size: var(--fs-12); font-weight: 400; }
  & .ob-tile small { font-family: var(--num); font-size: var(--fs-10); color: var(--sub); }
  & .ob-pic { height: 130px; border-radius: var(--r-ctl); }
  & .ob-pic.a { background: linear-gradient(160deg, #F4D9C6, #E6B8A7 60%, #B98A7B); } /* 固定色：示意作品照的色調 */
  & .ob-pic.b { background: linear-gradient(160deg, #DCE3EA, #AEBCCB 60%, #7F8FA3); } /* 固定色：示意作品照的色調 */
  & .ob-pic.c { background: linear-gradient(160deg, #E9E2D3, #CDBFA4 60%, #9E8C6E); } /* 固定色：示意作品照的色調 */
  & .ob-pic.d { background: linear-gradient(160deg, #E4DDEF, #C4B6DA 60%, #9182B0); } /* 固定色：示意作品照的色調 */
  & .ob-kicker { font-family: var(--num); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--sub); margin-bottom: var(--sp-3); }
}
@keyframes ob-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes ob-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { :root[data-look="neon"] :is(.ob-mock > *, .ob-row, .ob-thing, .ob-step, .ob-tile, .ob-chk) { animation: none !important; } }

/* ==== 第一次打開（v3.45.0）、星星泡泡引導 ==== */
:root[data-look="neon"] {
  & .ob-step-panel { text-align: left; }
  & .ob-step-panel .onboard-title, & .ob-step-panel .onboard-sub { text-align: left; }
  & .ob-step-panel .ob-kicker { margin-top: var(--sp-5); }
  & .ob-invite { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding: 14px 16px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--shadow-card); font-size: var(--fs-14); }
  & .ob-invite .ico { width: 16px; height: 16px; color: var(--ok); }
  & .ob-field { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
  & .ob-field .input { height: 52px; border: 0; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--shadow-card); font-family: var(--num); letter-spacing: var(--ls-label); }
  & .ob-field small { font-size: var(--fs-12); color: var(--sub); }
  & .ob-code { margin-top: var(--sp-5); padding: 22px; border-radius: var(--r-card); background: var(--card); background-image: var(--wash); box-shadow: var(--shadow-card); font-family: var(--num); font-size: var(--fs-22); font-weight: var(--fw-light); letter-spacing: var(--ls-label); text-align: center; }
  & .ob-howto { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
  & .ob-howto li { display: flex; align-items: center; gap: var(--sp-4); padding: 14px 16px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--shadow-card); font-size: var(--fs-14); }
  & .ob-howto li > span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--field); font-family: var(--num); font-size: var(--fs-12); }
  & .ob-share { margin-left: auto; color: var(--sub); }
  & .ob-share .ico { width: 18px; height: 18px; }

  & .coach { position: fixed; z-index: 40; width: min(280px, calc(100vw - 32px)); padding: 16px 16px 12px; border-radius: var(--r-card); background: var(--text); color: var(--on-accent); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
  /* 打開子頁面、彈窗時先收起來，回到主畫面再出現（v3.48.0） */
  & body.page-open .coach, & body:has(.overlay) .coach { display: none; }
  & .coach.in { opacity: 1; transform: none; }
  & .coach p { margin: 0; padding-right: 30px; font-size: var(--fs-14); line-height: var(--lh-body); }
  & .coach-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-3); }
  & .coach-foot small { font-family: var(--num); font-size: var(--fs-11); opacity: .5; }
  & .coach-ok { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--on-accent); color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); }
  & .coach-star { position: absolute; top: -26px; right: -12px; width: 52px; height: 52px; pointer-events: none; animation: coach-bob 2.4s ease-in-out infinite; }
  & .coach-star img { width: 100%; height: 100%; object-fit: contain; }
  & .coach-tail { position: absolute; left: calc(var(--tail, 50%) - 7px); bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: var(--text); transform: rotate(45deg); }
  & .coach.below .coach-tail { bottom: auto; top: -6px; }
}
@keyframes coach-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { :root[data-look="neon"] .coach-star { animation: none; } }

/* 插圖星星縮小一點（v3.46.0）：留白多一點，比較精緻 */
:root[data-look="neon"] {
  & .empty-art { width: 108px; height: 108px; margin-bottom: var(--sp-3); }
  & .no-result-art { width: 88px; height: 88px; }
  & .td-empty-art { width: 88px; height: 88px; }
  & .td-empty { padding-top: 28px; }
  & .sheet-opt-art { width: 40px; height: 40px; }
  & .guide-art { width: 44px; height: 44px; }
  & .onboard-avatar { width: 48px; height: 48px; }
  & .coach-star { top: -22px; right: -10px; width: 42px; height: 42px; }
}