/* 設計樣板（比較用）。網址加 ?design=settings｜health｜reminders 切換，?scheme=light｜dark 強制深淺色。
   三款共用同一套「乾淨、簡單、清楚」的 iOS 基礎：系統字型與字級、iOS 系統色、平面底色，不用光暈和毛玻璃卡片。
   選定一款後，會把它併進 app.css，這個檔案和 design-preview.html 就刪掉。 */

/* ========== 共用基礎：iOS 系統色 ========== */

:root[data-design] {
  color-scheme: light;
  --bg-page: #f2f2f7;
  --bg-cell: #ffffff;
  --fill: rgba(118, 118, 128, 0.12);
  --text: #000000;
  --text-2: rgba(60, 60, 67, 0.64);
  --text-3: rgba(60, 60, 67, 0.32);
  --hairline: rgba(60, 60, 67, 0.2);
  --accent: #7c3aed;
  --accent-strong: #7c3aed;
  --tint: rgba(124, 58, 237, 0.1);
  --green: #248a3d;
  --orange: #c93400;
  --red: #d70015;
  --blue: #0066cc;
  --shout: #0066cc;
  --sing: #d70015;
  --bar: rgba(249, 249, 249, 0.92);
  --thumb: #ffffff;
  --thumb-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  --icon-blue: #007aff;
  --icon-green: #34c759;
  --icon-orange: #ff9500;
  --icon-purple: #af52de;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-design]:not([data-scheme="light"]) {
    color-scheme: dark;
    --bg-page: #000000;
    --bg-cell: #1c1c1e;
    --fill: rgba(118, 118, 128, 0.24);
    --text: #ffffff;
    --text-2: rgba(235, 235, 245, 0.64);
    --text-3: rgba(235, 235, 245, 0.32);
    --hairline: rgba(84, 84, 88, 0.65);
    --accent: #b69cff;
    --accent-strong: #7c3aed;
    --tint: rgba(167, 139, 250, 0.16);
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --blue: #409cff;
    --shout: #64d2ff;
    --sing: #ff6482;
    --bar: rgba(22, 22, 24, 0.9);
    --thumb: #636366;
    --thumb-shadow: none;
    --icon-blue: #0a84ff;
    --icon-green: #30d158;
    --icon-orange: #ff9f0a;
    --icon-purple: #bf5af2;
  }
}

:root[data-design][data-scheme="dark"] {
  color-scheme: dark;
  --bg-page: #000000;
  --bg-cell: #1c1c1e;
  --fill: rgba(118, 118, 128, 0.24);
  --text: #ffffff;
  --text-2: rgba(235, 235, 245, 0.64);
  --text-3: rgba(235, 235, 245, 0.32);
  --hairline: rgba(84, 84, 88, 0.65);
  --accent: #b69cff;
  --accent-strong: #7c3aed;
  --tint: rgba(167, 139, 250, 0.16);
  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
  --blue: #409cff;
  --shout: #64d2ff;
  --sing: #ff6482;
  --bar: rgba(22, 22, 24, 0.9);
  --thumb: #636366;
  --thumb-shadow: none;
  --icon-blue: #0a84ff;
  --icon-green: #30d158;
  --icon-orange: #ff9f0a;
  --icon-purple: #bf5af2;
}

:root[data-design] body { background: var(--bg-page); font-size: 17px; line-height: 1.47; }
:root[data-design] .backdrop { display: none; }

/* 卡片改成平面：不要毛玻璃、光邊、陰影 */
:root[data-design] .glass {
  background: var(--bg-cell);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
:root[data-design] .glass::before { content: none; }

:root[data-design] .large-title { padding: 10px 0 2px; }
:root[data-design] .large-title h1 { font-size: 34px; font-weight: 700; letter-spacing: 0; }
:root[data-design] .eyebrow { font-size: 13px; font-weight: 600; color: var(--text-2); }

:root[data-design] .card { border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
:root[data-design] .card > h2 { font-size: 13px; font-weight: 600; color: var(--text-2); }
:root[data-design] .card > h2 .icon { width: 16px; height: 16px; }
:root[data-design] .card p { margin: 4px 0; }
:root[data-design] .big { font-size: 28px; }
:root[data-design] .small { font-size: 13px; }
:root[data-design] .footnote { color: var(--text-2); font-size: 13px; }
:root[data-design] .dot { box-shadow: none; }

/* 分段控制：iOS 灰色軌道＋白色滑塊 */
:root[data-design] .segmented { gap: 0; padding: 2px; border-radius: 9px; background: var(--fill); }
:root[data-design] .segmented button,
:root[data-design] .segmented a { min-height: 32px; border-radius: 7px; color: var(--text); font-size: 14px; font-weight: 500; }
:root[data-design] .segmented button[aria-pressed="true"],
:root[data-design] .segmented a[aria-current="page"] { background: var(--thumb); font-weight: 600; box-shadow: var(--thumb-shadow); }

/* 按鈕：主要＝紫底白字；次要＝灰底紫字 */
:root[data-design] .btn {
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--fill);
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
:root[data-design] .btn.primary { background: var(--accent-strong); color: #fff; border: 0; box-shadow: none; }
:root[data-design] .btn.small { min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 15px; }
:root[data-design] .call-grid .btn { color: var(--text-2); font-size: 13px; }
:root[data-design] .call-grid .btn b { color: var(--red); }
:root[data-design] .chip { min-height: 34px; padding: 0 14px; border: 0; background: var(--fill); color: var(--text); font-size: 15px; }

/* 標籤：淡色底＋同色字 */
:root[data-design] .badge,
:root[data-design] .tag { padding: 1px 7px; border-radius: 6px; background: var(--fill); color: var(--text-2); }
:root[data-design] .badge.best,
:root[data-design] .tag.verified { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
:root[data-design] .badge.ok,
:root[data-design] .tag.past { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
:root[data-design] .badge.short,
:root[data-design] .tag.unverified { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
:root[data-design] .badge.cheer { color: var(--accent); background: var(--tint); }

/* 應援、歌單、班次 */
:root[data-design] .act.shout,
:root[data-design] .act.sing { box-shadow: none; }
:root[data-design] .act.other { background: var(--fill); }
:root[data-design] .cue,
:root[data-design] .cheer-song .fan-event { border: 0; background: var(--tint); }
:root[data-design] .act-title { margin: 24px 4px 8px; font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
:root[data-design] .setlist { padding: 4px; border-radius: 14px; }
:root[data-design] .seg.is-current,
:root[data-design] .train[aria-pressed="true"] { background: var(--tint); box-shadow: none; }
:root[data-design] .seg-note { color: var(--text-2); }

/* 輸入、步進器、進度、勾選 */
:root[data-design] input[type="time"],
:root[data-design] input[type="text"] { border: 0; border-radius: 10px; background: var(--fill); }
:root[data-design] .stepper { border-radius: 9px; background: var(--fill); box-shadow: none; }
:root[data-design] .stepper button { color: var(--accent); }
:root[data-design] .stepper button:active { background: var(--fill); }
:root[data-design] .progress { height: 6px; background: var(--fill); }
:root[data-design] .progress > span { background: var(--accent-strong); }
:root[data-design] .check-box { border-width: 1.5px; border-color: var(--text-3); }
:root[data-design] .check[aria-checked="true"] .check-box { border-color: var(--accent-strong); background: var(--accent-strong); }

:root[data-design] .tile { border-radius: 14px; }
:root[data-design] .tile .icon { color: var(--accent); }

:root[data-design] .toast {
  border: 0;
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

:root[data-design] .tabbar a { color: var(--text-2); font-size: 10px; font-weight: 500; }
:root[data-design] .tabbar a[aria-current="page"] { color: var(--accent); background: none; box-shadow: none; }

/* ========== A 設定風：灰底、白色群組，小標題放在框外 ========== */

:root[data-design="settings"] .card { border-radius: 12px; padding: 12px 16px; margin: 40px 0 0; }
:root[data-design="settings"] .card:not(:has(> h2)) { margin-top: 20px; }
:root[data-design="settings"] .card > h2 { margin: -38px 0 20px; font-weight: 400; }
:root[data-design="settings"] .setlist { border-radius: 12px; }
:root[data-design="settings"] .act-title { margin: 28px 16px 6px; font-weight: 400; }

/* 首頁捷徑改成「設定」那種列表：彩色方形圖示＋右箭頭 */
:root[data-design="settings"] .tiles { display: block; margin: 20px 0 0; overflow: hidden; border-radius: 12px; background: var(--bg-cell); }
:root[data-design="settings"] .tile {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  column-gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 10px 16px;
  border-radius: 0;
  background: transparent;
}
:root[data-design="settings"] .tile + .tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 60px;
  height: 0;
  padding: 0;
  border-radius: 0;
  border-top: 0.5px solid var(--hairline);
  background: none;
  -webkit-mask: none;
  mask: none;
}
:root[data-design="settings"] .tile .icon { grid-row: 1 / span 2; width: 30px; height: 30px; padding: 5px; border-radius: 7px; color: #fff; background: var(--icon-purple); }
:root[data-design="settings"] .tile:nth-child(1) .icon { background: var(--icon-blue); }
:root[data-design="settings"] .tile:nth-child(2) .icon { background: var(--icon-green); }
:root[data-design="settings"] .tile:nth-child(3) .icon { background: var(--icon-orange); }
:root[data-design="settings"] .tile b { grid-column: 2; margin: 0; font-size: 17px; font-weight: 400; line-height: 1.3; }
:root[data-design="settings"] .tile span { grid-column: 2; margin: 0; font-size: 13px; }
:root[data-design="settings"] .tile::after { content: "›"; grid-column: 3; grid-row: 1 / span 2; font-size: 24px; line-height: 1; color: var(--text-3); }

/* 傳統的 iPhone 底部分頁列：滿版、細分隔線 */
:root[data-design="settings"] .tabbar {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  transform: none;
  gap: 0;
  padding: 2px 0 calc(env(safe-area-inset-bottom) + 2px);
  border-radius: 0;
  border-top: 0.5px solid var(--hairline);
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
:root[data-design="settings"] .tabbar a { min-height: 49px; border-radius: 0; }
:root[data-design="settings"] .view { padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }

/* ========== B 健康風：白色卡片、紫色小標題、大數字 ========== */

:root[data-design="health"] .card { border-radius: 16px; margin: 12px 0; }
:root[data-design="health"] .card > h2 { margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--accent); }
:root[data-design="health"] .card > h2 .icon { width: 18px; height: 18px; }
:root[data-design="health"] .big,
:root[data-design="health"] .countdown b,
:root[data-design="health"] .now-title,
:root[data-design="health"] .train-dep,
:root[data-design="health"] .call-grid .btn b { font-family: var(--rounded); }
:root[data-design="health"] .countdown b { font-size: 50px; }
:root[data-design="health"] .big { font-size: 30px; }
:root[data-design="health"] .act-title { margin: 26px 2px 8px; font-size: 22px; font-weight: 700; color: var(--text); }
:root[data-design="health"] .setlist { border-radius: 16px; }
:root[data-design="health"] .tile { padding: 14px; border-radius: 16px; }

/* 浮動膠囊分頁列（iOS 26 的位置與形狀），不透明一點比較清楚 */
:root[data-design="health"] .tabbar {
  border: 0.5px solid var(--hairline);
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
:root[data-design="health"] .tabbar a[aria-current="page"] { background: var(--tint); }

/* ========== C 提醒事項風：白底不加框，用分隔線和紫色標題 ========== */

:root[data-design="reminders"] { --bg-page: #ffffff; }
:root[data-design="reminders"] .large-title h1 { color: var(--accent); }
:root[data-design="reminders"] .card,
:root[data-design="reminders"] .setlist { border-radius: 0; background: transparent; }
:root[data-design="reminders"] .card { margin: 0; padding: 16px 0; border-bottom: 0.5px solid var(--hairline); }
:root[data-design="reminders"] .card > h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--accent); }
:root[data-design="reminders"] .card > h2 .icon { width: 20px; height: 20px; }
:root[data-design="reminders"] .setlist { padding: 0; }
:root[data-design="reminders"] .act-title { margin: 28px 0 4px; font-size: 20px; font-weight: 700; color: var(--accent); }

/* 首頁捷徑：像「提醒事項」最上面的灰色方塊，圓形彩色圖示 */
:root[data-design="reminders"] .tiles { gap: 10px; margin: 14px 0; }
:root[data-design="reminders"] .tile { min-height: 0; padding: 12px; border-radius: 12px; background: var(--fill); }
:root[data-design="reminders"] .tile .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: #fff; background: var(--icon-purple); }
:root[data-design="reminders"] .tile:nth-child(1) .icon { background: var(--icon-blue); }
:root[data-design="reminders"] .tile:nth-child(2) .icon { background: var(--icon-green); }
:root[data-design="reminders"] .tile:nth-child(3) .icon { background: var(--icon-orange); }
:root[data-design="reminders"] .tile b { margin-top: 10px; font-size: 16px; }

/* 浮動膠囊分頁列，半透明 */
:root[data-design="reminders"] .tabbar {
  border: 0.5px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-cell) 72%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
}
:root[data-design="reminders"] .tabbar a[aria-current="page"] { background: var(--fill); }